/* 参考サイトに合わせたデザイン - 緑色基調 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Montserrat', 'Roboto', 'Open Sans', 'HGP創英角ゴシックUB', 'HGP創英角ｺﾞｼｯｸUB', 'MS UI Gothic', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro', 'Yu Gothic UI', 'Yu Gothic Medium', '游ゴシック Medium', YuGothic, '游ゴシック体', 'Meiryo UI', 'Meiryo', 'MS PGothic', 'MS Gothic', sans-serif !important;
    font-weight: 700 !important;
    line-height: 1.6;
    color: #333;
    background: linear-gradient(45deg, #f0f8f0 25%, transparent 25%),
        linear-gradient(-45deg, #f0f8f0 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #f0f8f0 75%),
        linear-gradient(-45deg, transparent 75%, #f0f8f0 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
    background-color: #ffffff;

    /* モバイルでのフォント表示を強制 */
    -webkit-font-feature-settings: normal !important;
    font-feature-settings: normal !important;
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* 全要素に対してフォントを強制適用 */
*,
*::before,
*::after {
    font-family: inherit !important;
}

/* モバイル専用のフォント強制設定 */
@media (max-width: 768px) {

    body,
    * {
        font-family: 'Montserrat', 'Roboto', 'Open Sans', 'HGP創英角ゴシックUB', 'HGP創英角ｺﾞｼｯｸUB', 'MS UI Gothic', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro', 'Yu Gothic UI', 'Yu Gothic Medium', '游ゴシック Medium', YuGothic, '游ゴシック体', 'Meiryo UI', 'Meiryo', 'MS PGothic', 'MS Gothic', sans-serif !important;
        font-weight: 700 !important;
        -webkit-text-size-adjust: 100% !important;
        text-size-adjust: 100% !important;
    }

    /* WebKit系ブラウザの独自フォント設定を無効化 */
    input,
    textarea,
    select,
    button {
        font-family: 'Montserrat', 'Roboto', 'Open Sans', 'HGP創英角ゴシックUB', 'HGP創英角ｺﾞｼｯｸUB', 'MS UI Gothic', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro', 'Yu Gothic UI', 'Yu Gothic Medium', '游ゴシック Medium', YuGothic, '游ゴシック体', 'Meiryo UI', 'Meiryo', 'MS PGothic', 'MS Gothic', sans-serif !important;
        font-weight: 700 !important;
        -webkit-appearance: none !important;
        appearance: none !important;
    }
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    width: 100%;
}

/* ヘッダー */
header {
    background: white;
    color: #333;
    padding: 0.33rem 0;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 50px;
    position: relative;
}

.logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #333;
    height: 100%;
}

.logo img {
    height: 45px;
    max-height: 45px;
    width: auto;
}

/* ハンバーガーメニューボタン */
.hamburger {
    display: none;
    flex-direction: column;
    justify-content: space-around;
    width: 30px;
    height: 30px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 101;
}

.hamburger span {
    display: block;
    height: 3px;
    width: 100%;
    background: #333;
    border-radius: 3px;
    transition: all 0.3s ease;
}

.hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translate(8px, 8px);
}

.hamburger.active span:nth-child(2) {
    opacity: 0;
}

.hamburger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -6px);
}

/* ナビゲーション */
.nav {
    display: block;
}

.nav ul {
    display: flex;
    list-style: none;
    gap: 2rem;
}

.nav a {
    color: #333;
    text-decoration: none;
    font-weight: normal;
    font-size: 1.1rem;
    transition: all 0.3s;
    padding: 8px 16px;
    border-radius: 20px;
}

.nav a:hover {
    background: rgba(255, 107, 107, 0.1);
    color: #FF5252;
    transform: translateY(-2px);
}

/* ヒーローセクション */
.hero {
    background: transparent;
    color: white;
    padding: 0;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero .container {
    position: relative;
    z-index: 2;
    padding: 0;
    max-width: none;
    width: 100%;
}

.hero-image {
    width: 100%;
    height: auto;
    display: block;
}

.cta-button {
    display: inline-block;
    background: linear-gradient(135deg, #FF6B6B 0%, #FF5252 100%);
    color: white;
    padding: 1.2rem 3rem;
    text-decoration: none;
    border-radius: 50px;
    font-size: 1.3rem;
    font-weight: normal;
    transition: all 0.3s;
    box-shadow: 0 6px 25px rgba(255, 107, 107, 0.4);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(255, 107, 107, 0.6);
    background: linear-gradient(135deg, #FF5252 0%, #FF6B6B 100%);
}

/* 特徴セクション */
.features {
    padding: 5rem 0;
    background: white;
    position: relative;
}

.section-title {
    text-align: center;
    font-size: 3rem;
    margin-bottom: 4rem;
    color: #FF5252;
    font-weight: normal;
    position: relative;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 4px;
    background: linear-gradient(135deg, #FF6B6B 0%, #FF5252 100%);
    border-radius: 2px;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 3rem;
    margin-bottom: 3rem;
}

.feature-card {
    background: white;
    padding: 3rem 2rem;
    border-radius: 20px;
    text-align: center;
    transition: all 0.3s;
    border: 3px solid #E8F5E8;
    box-shadow: 0 10px 30px rgba(0, 200, 81, 0.1);
    position: relative;
    overflow: hidden;
}

.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(135deg, #00C851 0%, #00A843 100%);
}

.feature-card:hover {
    transform: translateY(-10px);
    border: 3px solid #00C851;
    box-shadow: 0 20px 50px rgba(0, 200, 81, 0.2);
}

.feature-card h3 {
    color: #00A843;
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
    font-weight: normal;
}

.feature-card p {
    color: #555;
    line-height: 1.8;
    font-size: 1.1rem;
    font-weight: normal;
}

/* 成功率セクション */
.success-rate {
    background: linear-gradient(135deg, #00C851 0%, #00A843 100%);
    color: white;
    padding: 2rem 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.success-rate::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(255, 255, 255, 0.1) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(255, 255, 255, 0.1) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, 0.1) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, 0.1) 75%);
    background-size: 40px 40px;
    background-position: 0 0, 0 20px, 20px -20px, -20px 0px;
}

.success-rate .container {
    position: relative;
    z-index: 2;
}

.success-rate h2 {
    font-size: 3rem;
    margin-bottom: 1.5rem;
    font-weight: normal;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.success-rate .rate {
    font-size: 5rem;
    font-weight: normal;
    margin: 2rem 0;
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.3);
    color: #FFD700;
}

.success-rate p {
    font-size: 1.3rem;
    font-weight: normal;
}

/* 詳細説明セクション */
.details {
    padding: 5rem 0;
    background: white;
}

.details-content {
    max-width: 900px;
    margin: 0 auto;
    background: white;
    padding: 3rem;
    border-radius: 20px;
    box-shadow: 0 15px 40px rgba(0, 200, 81, 0.1);
    border: 2px solid #E8F5E8;
}

.details h2 {
    color: #00A843;
    font-size: 2.5rem;
    margin-bottom: 3rem;
    text-align: center;
    font-weight: normal;
}

.details p {
    margin-bottom: 2rem;
    line-height: 1.8;
    color: #555;
    font-size: 1.1rem;
    font-weight: normal;
}

.highlight {
    background: linear-gradient(135deg, #FFF3CD 0%, #FFECB3 100%);
    padding: 2rem;
    border-left: 6px solid #FFC107;
    margin: 3rem 0;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(255, 193, 7, 0.2);
}

.highlight h3 {
    color: #856404;
    margin-bottom: 1rem;
    font-size: 1.5rem;
    font-weight: normal;
}

.highlight p {
    color: #856404;
    margin-bottom: 0;
    font-weight: normal;
}

/* セルフサポートセクション */
.self-support {
    background: linear-gradient(135deg, #E8F5E8 0%, #F0F8F0 100%);
    padding: 4rem 0;
    text-align: center;
    position: relative;
}

.self-support h2 {
    color: #00A843;
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
    font-weight: normal;
}

.self-support p {
    color: #555;
    margin-bottom: 2.5rem;
    font-size: 1.2rem;
    font-weight: normal;
}

.self-support-link {
    display: inline-block;
    background: linear-gradient(135deg, #00C851 0%, #00A843 100%);
    color: white;
    padding: 1.2rem 3rem;
    text-decoration: none;
    border-radius: 50px;
    font-weight: normal;
    font-size: 1.2rem;
    transition: all 0.3s;
    box-shadow: 0 6px 25px rgba(0, 200, 81, 0.3);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.self-support-link:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(0, 200, 81, 0.5);
}

/* 料金セクション */
.pricing {
    padding: 5rem 0;
    background: white;
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 3rem;
    max-width: 1100px;
    margin: 0 auto;
}

.pricing-card {
    background: white;
    padding: 3rem 2rem;
    border-radius: 20px;
    text-align: center;
    border: 3px solid #E8F5E8;
    transition: all 0.3s;
    box-shadow: 0 10px 30px rgba(0, 200, 81, 0.1);
    position: relative;
    overflow: hidden;
}

.pricing-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(135deg, #00C851 0%, #00A843 100%);
}

.pricing-card.featured {
    border: 3px solid #00C851;
    transform: scale(1.05);
    background: linear-gradient(135deg, #F8FFF8 0%, #FFFFFF 100%);
    box-shadow: 0 20px 50px rgba(0, 200, 81, 0.2);
}

.pricing-card.featured::before {
    height: 8px;
    background: linear-gradient(135deg, #FFD700 0%, #FFC107 100%);
}

.pricing-card h3 {
    color: #00A843;
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
    font-weight: normal;
    line-height: 1.3;
}

.price {
    font-size: 3.5rem;
    font-weight: normal;
    color: #FF6B6B;
    margin: 2rem 0;
    text-shadow: 2px 2px 4px rgba(255, 107, 107, 0.2);
}

.price-note {
    color: #666;
    font-size: 1rem;
    margin-bottom: 2.5rem;
    font-weight: normal;
}

/* FAQ セクション */
.faq {
    padding: 5rem 0;
    background: linear-gradient(135deg, #E8F5E8 0%, #F0F8F0 100%);
}

.faq-list {
    max-width: 900px;
    margin: 0 auto;
}

.faq-item {
    background: white;
    margin-bottom: 1.5rem;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0, 200, 81, 0.1);
    overflow: hidden;
    border: 2px solid #E8F5E8;
    transition: all 0.3s;
}

.faq-item:hover {
    border: 2px solid #00C851;
    box-shadow: 0 10px 30px rgba(0, 200, 81, 0.2);
}

.faq-question {
    padding: 2rem;
    background: linear-gradient(135deg, #00C851 0%, #00A843 100%);
    color: white;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s;
}

.faq-question:hover {
    background: linear-gradient(135deg, #00A843 0%, #00C851 100%);
}

.faq-question h3 {
    margin: 0;
    font-size: 1.3rem;
    font-weight: normal;
}

.faq-toggle {
    font-size: 2rem;
    font-weight: normal;
    transition: transform 0.3s;
    color: #FFD700;
}

.faq-item.active .faq-toggle {
    transform: rotate(45deg);
}

.faq-answer {
    padding: 0 2rem;
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s ease-out;
    background: white;
}

.faq-item.active .faq-answer {
    padding: 2rem;
    max-height: 1000px;
}

.faq-answer p {
    margin-bottom: 1.5rem;
    line-height: 1.8;
    color: #555;
    font-size: 1.1rem;
    font-weight: normal;
}

.faq-answer p:last-child {
    margin-bottom: 0;
}

/* 雇用主メッセージセクション */
.employer-message {
    padding: 5rem 0;
    background: white;
}

.employer-content {
    max-width: 900px;
    margin: 0 auto;
    padding: 3rem;
    background: linear-gradient(135deg, #F8FFF8 0%, #FFFFFF 100%);
    border-radius: 20px;
    border-left: 8px solid #00C851;
    box-shadow: 0 15px 40px rgba(0, 200, 81, 0.1);
    border: 2px solid #E8F5E8;
}

.employer-content p {
    margin-bottom: 2rem;
    line-height: 1.8;
    color: #555;
    font-size: 1.1rem;
    font-weight: normal;
}

.employer-content p:last-child {
    margin-bottom: 0;
}

.employer-content strong {
    color: #00A843;
    font-weight: normal;
}

/* フッター */
footer {
    background: linear-gradient(135deg, #2C3E50 0%, #34495E 100%);
    color: white;
    padding: 4rem 0 2rem;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 3rem;
    margin-bottom: 3rem;
}

.footer-section h3 {
    margin-bottom: 1.5rem;
    color: #00C851;
    font-size: 1.5rem;
    font-weight: normal;
}

.footer-section p,
.footer-section a {
    color: #BDC3C7;
    text-decoration: none;
    line-height: 1.8;
    font-weight: normal;
    transition: color 0.3s;
}

.footer-section a:hover {
    color: #00C851;
}

.footer-bottom {
    text-align: center;
    padding-top: 2rem;
    border-top: 2px solid #34495E;
    color: #95A5A6;
    font-weight: normal;
}

/* LINE相談ボタン（固定） */
.line-consultation {
    position: fixed;
    bottom: 25px;
    right: 25px;
    background: linear-gradient(135deg, #06C755 0%, #05B34A 100%);
    color: white;
    padding: 18px 25px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: normal;
    font-size: 15px;
    box-shadow: 0 8px 30px rgba(6, 199, 85, 0.4);
    z-index: 1000;
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 140px;
    animation: pulse 2s infinite;
    border: 3px solid rgba(255, 255, 255, 0.3);
}

.line-consultation:hover {
    background: linear-gradient(135deg, #05B34A 0%, #06C755 100%);
    transform: translateY(-5px);
    box-shadow: 0 12px 40px rgba(6, 199, 85, 0.6);
    color: white;
    text-decoration: none;
}

.line-consultation .time {
    font-size: 12px;
    opacity: 0.9;
    margin-bottom: 5px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    padding-bottom: 5px;
    font-weight: normal;
}

.line-consultation .action {
    font-size: 18px;
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: 1px;
}

@keyframes pulse {
    0% {
        box-shadow: 0 8px 30px rgba(6, 199, 85, 0.4);
        transform: scale(1);
    }

    50% {
        box-shadow: 0 8px 30px rgba(6, 199, 85, 0.8);
        transform: scale(1.05);
    }

    100% {
        box-shadow: 0 8px 30px rgba(6, 199, 85, 0.4);
        transform: scale(1);
    }
}

/* レスポンシブ */
@media (max-width: 768px) {

    /* ハンバーガーメニューを表示 */
    .hamburger {
        display: flex;
    }

    /* ナビゲーションをモバイル用に変更 */
    .nav {
        position: fixed;
        top: 70px;
        right: -100%;
        width: 280px;
        height: calc(100vh - 70px);
        background: white;
        transition: right 0.3s ease;
        box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
        z-index: 99;
        overflow-y: auto;
    }

    .nav.active {
        right: 0;
    }

    .nav ul {
        flex-direction: column;
        padding: 2rem 0;
        gap: 0;
        height: 100%;
    }

    .nav li {
        width: 100%;
    }

    .nav a {
        display: block;
        padding: 1.5rem 2rem;
        border-radius: 0;
        border-bottom: 1px solid #f0f0f0;
        font-size: 1.2rem;
        transition: all 0.3s;
    }

    .nav a:hover {
        background: rgba(255, 107, 107, 0.1);
        color: #FF5252;
        transform: none;
        padding-left: 2.5rem;
    }

    /* ヘッダーの高さ調整 */
    .header-content {
        height: 60px;
    }

    .logo img {
        height: 40px;
        max-height: 40px;
    }

    .features-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .feature-card {
        padding: 2rem 1.5rem;
    }

    .line-consultation {
        bottom: 20px;
        right: 20px;
        padding: 15px 20px;
        min-width: 120px;
    }

    .line-consultation .time {
        font-size: 11px;
    }

    .line-consultation .action {
        font-size: 16px;
    }

    .section-title {
        font-size: 2.2rem;
    }

    .pricing-grid {
        grid-template-columns: 1fr;
    }

    .pricing-card.featured {
        transform: none;
    }

    /* フッターのモバイル対応 */
    .footer-content {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
    }

    .footer-section {
        padding: 1rem 0;
    }

    /* 詳細セクションのモバイル対応 */
    .details-content {
        padding: 2rem 1.5rem;
        margin: 0 1rem;
    }

    .employer-content {
        padding: 2rem 1.5rem;
        margin: 0 1rem;
    }

    /* FAQ のモバイル対応 */
    .faq-question {
        padding: 1.5rem;
    }

    .faq-question h3 {
        font-size: 1.1rem;
        line-height: 1.4;
    }

    .faq-item.active .faq-answer {
        padding: 1.5rem;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 15px;
    }

    /* さらに小さい画面での調整 */
    .nav {
        width: 100%;
        right: -100%;
    }

    .nav.active {
        right: 0;
    }

    .hamburger {
        width: 25px;
        height: 25px;
    }

    .hamburger span {
        height: 2px;
    }

    .section-title {
        font-size: 1.8rem;
    }

    .success-rate h2 {
        font-size: 2.2rem;
    }

    .success-rate .rate {
        font-size: 4rem;
    }

    .details h2 {
        font-size: 2rem;
    }

    .self-support h2 {
        font-size: 2rem;
    }

    .price {
        font-size: 2.8rem;
    }

    .pricing-card h3 {
        font-size: 1.5rem;
    }

    .cta-button {
        padding: 1rem 2rem;
        font-size: 1.1rem;
    }

    .self-support-link {
        padding: 1rem 2rem;
        font-size: 1.1rem;
    }

    /* LINE相談ボタンの小画面対応 */
    .line-consultation {
        bottom: 15px;
        right: 15px;
        padding: 12px 16px;
        min-width: 100px;
    }

    .line-consultation .time {
        font-size: 10px;
    }

    .line-consultation .action {
        font-size: 14px;
    }
}