@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap');

:root {
    --primary-orange: #FF6900;
    --primary-blue: #4DA3FF;
    --bg-orange-light: #FFE7DC;
    --bg-gray-light: #F7F7F7;
    --bg-blue-light: #F2F7FC;
    --text-main: #333333;
    --text-sub: #666666;
    --text-muted: #555555;
    --white: #FFFFFF;
    --border: #DDDDDD;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.feature-page {
    --feature-section-padding: 90px 20px;
    --feature-max-width: 1024px;
    margin-top: 60px; /* 固定ヘッダーの高さ分を確保 */
}

@media (min-width: 768px) {
    .feature-page {
        margin-top: 72px; /* デスクトップ版のヘッダー高さ */
    }
}

body {
    font-family: 'Noto Sans JP', sans-serif;
    color: var(--text-main);
    line-height: 1.75; /* 日本語テキストの可読性向上 */
    background: var(--white);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Common Components */
/* .feature-page 内のコンポーネントのみに適用されるようにセレクタを限定 */
.feature-page .section {
    padding: var(--feature-section-padding);
}

.feature-page .container {
    max-width: var(--feature-max-width);
    margin: 0 auto;
}

.section-header {
    text-align: center;
    margin-bottom: 40px;
    width: 100%;
}

.section-label {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #f39a7c;
    letter-spacing: 0.15em;
    margin-bottom: 8px;
    text-align: center;
}

.section-title {
    font-size: 32px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 10px;
    position: relative;
    padding-bottom: 15px;
    display: inline-block;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 4px;
    background: #f39a7c;
    border-radius: 2px;
}

.section-desc {
    text-align: center;
    font-size: 16px; /* 14px -> 16px */
    color: var(--text-main);
    margin-bottom: 90px;
}

/* --- Section 1: Intro --- */
.intro-section {
    background-color: #fbeae1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 60px 20px;
}

.intro-container {
    display: flex;
    align-items: center;
    gap: 60px;
}

.intro-content {
    max-width: 500px;
}

.intro-title {
    font-size: 40px;
    font-weight: 700;
    margin-bottom: 25px;
}

.intro-text {
    font-size: 16px;
    color: var(--text-main);
}

.intro-image-wrapper {
    width: 130px; /* 161px -> 130px */
    height: auto;
}

/* --- Section 2: Features --- */
.features-section {
    background-color: var(--bg-gray-light);
}

.features-list {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.feature-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 15px;
    padding: 40px;
    display: flex;
    align-items: center;
    gap: 60px;
    transition: box-shadow 0.25s ease;
}

/* 微細なホバーシャドウ（浮き上がりなし、視覚的なインタラクション） */
.feature-card:hover {
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
}

/* 2, 3, 4番目 (コミュニティ機能) を「画像、テキスト」にする */
.feature-card:nth-child(2),
.feature-card:nth-child(3),
.feature-card:nth-child(4) {
    flex-direction: row-reverse;
}

.feature-info {
    flex: 1; /* テキスト部分を少し抑えて画像を目立たせる */
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.feature-header {
    display: flex;
    align-items: center;
    gap: 15px;
}

.feature-icon-bg {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

/* ホーム（1枚目）: オレンジ */
.feature-card:nth-child(1) .feature-icon-bg { background: #ffe7de; }
/* コミュニティ（2〜4枚目）: 薄いピンク */
.feature-card:nth-child(2) .feature-icon-bg,
.feature-card:nth-child(3) .feature-icon-bg,
.feature-card:nth-child(4) .feature-icon-bg { background: rgb(253, 255, 218); }
/* コーチ（5〜6枚目）: 薄い水色 */
.feature-card:nth-child(5) .feature-icon-bg,
.feature-card:nth-child(6) .feature-icon-bg { background: rgb(255, 241, 251); }

.feature-image {
    flex: 1.2; /* 画像部分を少し広く (約55%) */
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 0;
}

.feature-image img {
    width: 280px; /* 横幅を統一 */
    height: auto;
    object-fit: contain;
}

.feature-label-group {
    display: flex;
    flex-direction: column;
}

.feature-label-en {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
}

.feature-label-jp {
    font-size: 20px;
    font-weight: 700;
}

.feature-text {
    font-size: 16px; /* 14px -> 16px */
    color: var(--text-muted);
}

.feature-points {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.feature-points li {
    font-size: 16px; /* 13px -> 16px */
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.feature-points li::before {
    content: '';
    width: 6px;
    height: 6px;
    background: var(--primary-orange);
    border-radius: 50%;
    margin-top: 8px;
    flex-shrink: 0;
}

/* Old .feature-image definition removed */

/* 不要な個別指定を削除 */

/* --- Section 3: Scientific Reason --- */
.science-section {
    background-color: var(--bg-blue-light);
}

.science-grid {
    display: flex;
    flex-direction: column;
    gap: 90px;
}

.science-item {
    display: flex;
    align-items: center;
    gap: 60px;
}

.science-item.reverse {
    flex-direction: row-reverse;
}

.science-image {
    width: 240px; /* 300px -> 240px */
    flex-shrink: 0;
}

.science-content {
    flex: 1;
}

.science-item-title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 24px;
    color: var(--text-main);
    padding-left: 14px;
    line-height: 1.5;
}

/* 各セクションのアクセントカラーを小見出しと統一 */
.science-item:nth-child(1) .science-item-title { border-left: 4px solid var(--primary-blue); }
.science-item:nth-child(2) .science-item-title { border-left: 4px solid #FF5A78; }
.science-item:nth-child(3) .science-item-title { border-left: 4px solid var(--primary-orange); }

.science-blocks {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.science-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.science-block-title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 4px;
}

.science-block-text {
    font-size: 16px; /* 14px -> 16px */
    color: var(--text-sub);
}

.science-effect-box {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 20px;
    margin-top: 20px;
}

.effect-title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    margin-bottom: 10px;
}

.effect-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.effect-list li {
    font-size: 16px; /* 14px -> 16px */
    color: var(--text-sub);
    display: flex;
    gap: 8px;
}

.effect-list li::before {
    content: '✓';
    font-weight: 700;
}

/* Color variations for science items */
.science-item:nth-child(1) .science-block-title,
.science-item:nth-child(1) .effect-title,
.science-item:nth-child(1) .effect-list li::before {
    color: var(--primary-blue);
}

.science-item:nth-child(2) .science-block-title,
.science-item:nth-child(2) .effect-title,
.science-item:nth-child(2) .effect-list li::before {
    color: #FF5A78;
}

.science-item:nth-child(3) .science-block-title,
.science-item:nth-child(3) .effect-title,
.science-item:nth-child(3) .effect-list li::before {
    color: var(--primary-orange);
}

/* --- Section 4: Life Change --- */
.life-change-section {
    background-color: var(--bg-gray-light);
}

.comparison-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.comparison-card {
    display: flex;
    background: var(--white);
    border-radius: 15px;
    /* overflow: hidden を削除（スマホで嵌い垢が切れる原因） */
    min-height: 180px; /* height固定の代わりに最小高だけ指定 */
}

.before-box {
    flex: 1;
    background: #FFFFFF;
    border: 1px solid var(--border);
    border-right: none;
    border-radius: 15px 0 0 15px;
    padding: 25px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.after-box {
    flex: 1;
    background: #FFF9F5;
    border: 1px solid #FFD8C2;
    border-radius: 0 15px 15px 0;
    padding: 25px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.comp-arrow {
    width: 40px;
    flex-shrink: 0;
    background: var(--bg-gray-light);
    display: flex;
    justify-content: center;
    align-items: center;
}

.comp-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.comp-icon {
    width: 40px;
    height: 40px;
}

.comp-label-group {
    display: flex;
    flex-direction: column;
}

.comp-tag {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.before-box .comp-tag { color: var(--text-muted); }
.after-box .comp-tag { color: var(--primary-orange); }

.comp-title {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.5;
}

.comp-text {
    font-size: 14px;
    color: var(--text-sub);
    line-height: 1.7;
}

/* --- Section 5: FAQ --- */
.faq-section {
    background-color: var(--white);
}

.faq-section .section-title {
    margin-bottom: 60px; /* 見出し下の間隔を拡大 */
}

.faq-container {
    max-width: 1024px; /* 全体の最大幅に合わせる */
    margin: 0 auto;
}

.faq-groups {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px 60px;
}

.faq-group-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--primary-orange); /* カテゴリーをオレンジで色付け */
    padding-bottom: 12px;
    border-bottom: 2px solid #FFD8C2; /* オレンジ系のボーダーに統一 */
    margin-bottom: 20px;
    letter-spacing: 0.03em;
}

.faq-items {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.faq-item {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.faq-q {
    font-size: 16px;
    font-weight: 700;
}

.faq-a {
    font-size: 16px; /* 14px -> 16px */
    color: var(--text-sub);
    padding-left: 20px;
}

/* =============================
   Responsive: Tablet (〜900px)
   ============================= */
@media (max-width: 900px) {

    .feature-page {
        --feature-section-padding: 70px 24px;
    }

    /* Section titles */
    .section-header { margin-bottom: 30px; }
    .section-title { font-size: 28px; padding-bottom: 14px; }
    .section-title::after { width: 40px; height: 3px; }
    .section-desc { font-size: 15px; margin-bottom: 50px; }

    /* Intro */
    .intro-section { padding: 50px 24px; }
    .intro-container {
        flex-direction: column-reverse; /* 画像を上に表示 */
        text-align: center;
        gap: 30px;
    }
    .intro-content { max-width: 100%; }
    .intro-title { font-size: 30px; }
    .intro-image-wrapper { width: 110px; margin: 0 auto; }

    /* Feature cards */
    .feature-card {
        flex-direction: column-reverse !important; /* 画像を上に表示 */
        gap: 30px;
        padding: 28px;
    }
    .feature-info { width: 100%; text-align: left; }
    .feature-image { width: 100%; }
    .feature-image img { 
        width: 300px; /* 340px -> 300px */
        height: auto;
    }
    .feature-label-jp { font-size: 18px; }
    .feature-text, .feature-points li { font-size: 15px; }

    /* Science */
    .science-grid { gap: 60px; }
    .science-item,
    .science-item.reverse {
        flex-direction: column;
        gap: 30px;
    }
    .science-image { width: 100%; max-width: 240px; margin: 0 auto; }
    .science-content { width: 100%; }
    .science-item-title { font-size: 19px; }
    .science-block-text { font-size: 15px; }

    /* Before/After */
    .comparison-card {
        flex-direction: column;
        min-height: auto;
    }
    .before-box,
    .after-box {
        flex: none;       /* flex:1 による幅の共有を解除 */
        width: 100%;      /* 横幅をカード全体に明示指定 */
    }
    .before-box {
        border-right: 1px solid var(--border) !important;
        border-bottom: none !important;
        border-radius: 15px 15px 0 0 !important;
    }
    .after-box {
        border-left: 1px solid #FFD8C2 !important;
        border-radius: 0 0 15px 15px !important;
    }
    /* Before/After 矢印を非表示 */
    .comp-arrow { display: none; }

    /* FAQ */
    .faq-groups {
        grid-template-columns: 1fr 1fr;
        gap: 32px 40px;
    }

}

/* =============================
   Responsive: Mobile (〜600px)
   ============================= */
@media (max-width: 600px) {

    .feature-page {
        --feature-section-padding: 40px 16px; /* 56px -> 40px */
    }

    /* Section titles */
    .section-header { margin-bottom: 24px; }
    .section-title { font-size: 20px; padding-bottom: 12px; }
    .section-title::after { width: 30px; height: 3px; }
    .section-desc { font-size: 14px; margin-bottom: 36px; }

    /* Intro */
    .intro-section { padding: 32px 16px; } /* 40px -> 32px */
    .intro-title { font-size: 24px; margin-bottom: 16px; }
    .intro-text { font-size: 14px; }
    .intro-image-wrapper { width: 110px; }

    /* Feature cards */
    .feature-card { padding: 20px; gap: 20px; }
    .feature-icon-bg { width: 44px; height: 44px; border-radius: 10px; }
    .feature-label-en { font-size: 12px; }
    .feature-label-jp { font-size: 16px; }
    .feature-text, .feature-points li { font-size: 14px; }
    .feature-image img { 
        width: 215px; /* 300px -> 215px */
        height: auto;
    }

    /* Science */
    .science-grid { gap: 48px; }
    .science-image { max-width: 180px; } /* 220px -> 180px */
    .science-item-title { font-size: 17px; margin-bottom: 16px; }
    .science-block-title { font-size: 15px; }
    .science-block-text { font-size: 14px; }
    .effect-list li { font-size: 14px; }

    /* Before/After */
    .before-box, .after-box { padding: 18px; gap: 8px; }
    .comp-icon { width: 32px; height: 32px; }
    .comp-title { font-size: 14px; }
    .comp-text { font-size: 13px; }

    /* FAQ */
    .faq-groups {
        grid-template-columns: 1fr; /* スマホは1カラムに */
        gap: 32px;
    }
    .faq-group-title { font-size: 15px; }
    .faq-q { font-size: 14px; }
    .faq-a { font-size: 14px; padding-left: 12px; }
}