/* リセット */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Noto Sans JP', sans-serif;
    color: #4a362a;
    line-height: 1.8;
}

/* --- ヘッダーのスタイル --- */
.site-header {
    position: fixed; /* 画面上部に固定 */
    top: 0;
    left: 0;
    width: 100%;
    height: 70px; /* デザインに合わせた高さ */
    z-index: 1000;
    display: flex;
    align-items: center;
    background-color: #FDFAF7; /* 背景が画像の場合は透過、必要に応じて rgba(255,255,255,0.9) など */
}

.header-inner {
    width: 100%;
    max-width: 1400px; /* メインコンテンツと合わせる */
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ロゴサイズ調整 */
.logo img {
    height: 60px; /* ロゴの高さに合わせて調整 */
    width: auto;
}

/* ナビゲーション */
.main-nav ul {
    display: flex;
    list-style: none;
    gap: 35px; /* メニュー間の余白 */
}

.main-nav a {
    text-decoration: none;
    color: #4a362a; /* 濃い茶色 */
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.05em;
    transition: opacity 0.3s;
}

.main-nav a:hover {
    opacity: 0.7;
}

/* ヘッダーボタン */
.header-btn {
    display: inline-block;
    text-decoration: none;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    padding: 12px 35px;
    border-radius: 50px; /* 楕円形 */
    /* デザインカンプに基づいたグラデーション */
    background: linear-gradient(90deg, #a87864 0%, #8c6265 100%);
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    transition: transform 0.2s;
}

.header-btn:hover {
    transform: scale(1.03);
}

/* --- メインビジュアルの調整 --- */
/* ヘッダーが固定(fixed)なので、中身が被らないよう調整 */
.hero-content {
    padding-top: 70px; /* ヘッダーの高さ分下げる */
}

/* --- レスポンシブ (スマホ用) --- */
@media (max-width: 1024px) {
    .main-nav {
        display: none; /* スマホではハンバーガーメニューにするのが一般的 */
    }
    .header-inner {
        padding: 0 20px;
    }
    .site-header {
        height: 70px;
    }
    .logo img {
        height: 40px;
    }
    .header-btn {
        padding: 8px 20px;
        font-size: 13px;
    }
}

/* --- heroのスタイル --- */
.hero-container {
    position: relative;
    width: 100%;
    height: 1015px; /* 画面いっぱいの高さ */
    display: flex;
    align-items: center; /* 上下中央 */
    overflow: hidden;
    margin-top: 70px;
}

/* 背景画像の設定 */
.hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.hero-background img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 縦横比を保って画面を埋める */
    object-position: center right; /* 女性を右側に寄せる */
}

/* 文字を読みやすくするためのグラデーション */
.overlay-gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 左側のベージュから右に向かって透明になるグラデーション */
    background: linear-gradient(to right, 
        rgba(246, 239, 233, 1) 0%, 
        rgba(246, 239, 233, 0.9) 30%, 
        rgba(246, 239, 233, 0) 70%);
}

/* コンテンツの設定 */
.hero-content {
    position: relative;
    z-index: 2; /* 背景より上に配置 */
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 0 5%; /* 左右の余白 */
}

/* 以下、文字装飾は共通 */
.label-area {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
}

.label-area .line {
    width: 35px;
    height: 1px;
    background-color: #a67c6d;
    margin-right: 12px;
}

.label-area .eng-text {
    font-size: 14px;
    color: #a67c6d;
    letter-spacing: 0.05em;
}

.main-copy {
    font-family: 'Noto Serif JP', serif;
    font-size: clamp(1.8rem, 2.5vw, 2.2rem); /* 画面サイズに合わせて自動調整 */
    font-weight: 500;
    margin-bottom: 40px;
}

.accent-wrap {
    display: block;
    font-size: clamp(2.5rem, 4.5vw, 4rem);
 
    /* 1. 背景にグラデーションを指定（ボタンと同じ色に合わせるのがおすすめ） */
  background: linear-gradient(to right, #A3563C, #6F2F38);

  /* 2. 背景を文字の形に切り抜く（重要！） */
  -webkit-background-clip: text;
  background-clip: text;

  /* 3. 本来の文字色を透明にする（透明にしないと背景が見えません） */
  -webkit-text-fill-color: transparent;
  color: transparent; /* 万が一のバックアップ用 */

  /* 4. 見栄えを整える */
  display: inline-block; /* 切り抜きを安定させるために必要 */
  font-weight: 500;
}

.description {
    margin-bottom: 50px;
    font-size: 16px;
    color: #5a5353;
}

.description p {
    margin-bottom: 5px;
}

/* ボタン */
.cta-area {
    max-width: 420px;
}

.cta-button {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #fff;
    font-size: 18px;
    padding: 20px 40px;
    border-radius: 50px;
    background: linear-gradient(90deg, #a65e45 0%, #633230 100%);
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    transition: 0.3s;
}

.cta-button:hover {
    transform: translateY(-3px);
    filter: brightness(1.1);
}

.cta-button .arrow {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px 0 6px 10px;
    border-color: transparent transparent transparent #ffffff;
    margin-left: 20px;
}

.sub-info {
    text-align: center;
    margin-top: 12px;
    font-size: 12px;
    color: #666;
}

/* スマホ対応 */
@media (max-width: 768px) {
    .overlay-gradient {
        /* スマホでは全体的に少し暗く（明るく）して文字を読みやすくする */
        background: rgba(246, 239, 233, 0.85);
    }
    .hero-content {
        text-align: center;
    }
    .label-area {
        justify-content: center;
    }
    .cta-area {
        margin: 0 auto;
    }
}

/* --- 共感セクション全体 --- */
.empathy-section {
    /* ベースの色（一番暗い色） */
    background-color: #1d1614; 
    
    /* 円形グラデーションを追加 */
    background-image: 
        /* 1つ目の光：左上に配置（色: 銅色を薄くした感じ） */
        radial-gradient(circle at 20% 30%, rgba(166, 94, 69, 0.3) 0%, transparent 50%),
        /* 2つ目の光：右下に配置（色: 少し明るいベージュ系） */
        radial-gradient(circle at 80% 70%, rgba(246, 239, 233, 0.15) 0%, transparent 50%);

    color: #f6efe9;
    padding: 120px 20px;
    text-align: center;
}

.container-small {
    max-width: 1000px;
    margin: 0 auto;
}

/* ヘッダー */
.sub-label {
    display: block;
    color: #a67c6d;
    font-size: 14px;
    letter-spacing: 0.1em;
    margin-bottom: 30px;
}

.empathy-title {
    font-size: 32px;
    font-weight: 500;
    line-height: 1.6;
    margin-bottom: 40px;
    letter-spacing: 0.05em;
    font-family: 'Noto Serif JP', serif;
}

.empathy-intro {
    font-size: 16px;
    line-height: 2;
    color: #d1c7bc; /* 少し落としたベージュ */
    margin-bottom: 60px;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 100;
}

/* カードエリア */
.empathy-cards {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 80px;
}

.card {
    background-color: #F8EDE1; /* カードの明るい背景 */
    color: #1d1614; /* カード内の文字は濃い色 */
    flex: 1;
    padding: 0 25px 30px;
    border-radius: 12px; /* 角の丸み */
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 300px;
}

.card-icon svg, 
.card-icon img {
    width: 250px;  /* デザインに合わせて調整 */
    height: 250px; /* デザインに合わせて調整 */
    display: block;
}

.card-icon img {
    max-width: 100%;
    height: auto;
}

.card-text {
    font-size: 18px;
    line-height: 1.8;
    text-align: left; /* テキストは左揃え */
    width: 100%;
    text-align: center;
    letter-spacing: 0.1em;
}

/* 強調メッセージ */
.empathy-message {
    display: flex;
    justify-content: center;
    margin-bottom: 80px;
    font-family: 'Noto Serif JP', serif;
}

.message-inner {
    border-left: 3px solid #a65e45; /* 左側のアクセントライン */
    padding-left: 25px;
    text-align: left;
}

.message-inner p {
    font-size: 20px;
    font-weight: 500;
    line-height: 1.8;
}

/* 最後の問いかけ */
.empathy-footer {
    font-size: 24px;
    font-weight: 500;
    letter-spacing: 0.05em;
    font-family: 'Noto Serif JP', serif;
}

/* --- レスポンシブ --- */
@media (max-width: 768px) {
    .empathy-cards {
        flex-direction: column; /* スマホでは縦並び */
    }
    .card {
        min-height: auto;
        padding: 30px;
    }
    .empathy-title {
        font-size: 24px;
    }
    .message-inner p {
        font-size: 18px;
    }
    .empathy-footer {
        font-size: 18px;
    }
}

/* --- コンセプトセクション --- */
.concept-section {
    background-color: #fff;
    padding: 120px 0;
    color: #4a362a;
}

.container-concept {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    align-items: center; /* 上下中央揃え */
    gap: 80px; /* 画像とテキストの間隔 */
}

/* ビジュアルエリア（左） */
.concept-visual {
    flex: 1;
    position: relative;
}

.image-wrapper {
    position: relative;
    max-width: 500px;
}

.image-wrapper img {
    width: 100%;
    height: auto;
    border-radius: 8px; /* デザインに合わせた角丸 */
    display: block;
}

/* 画像に重なる茶色のボックス */
.concept-badge {
    position: absolute;
    bottom: -30px;
    right: -40px;
    background-color: #a78b7d; /* カンプのくすみブラウン */
    color: #fff;
    padding: 20px 30px;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    z-index: 2;
}

.concept-badge p {
    font-size: 16px;
    line-height: 1.8;
    margin: 0;
    white-space: nowrap; /* 改行を防ぐ */
    font-family: 'Noto Serif JP', serif;
     letter-spacing: 0.05em;
     font-weight: 500;
}

/* テキストコンテンツ（右） */
.concept-text-content {
    flex: 1.2;
}

.concept-label {
    display: block;
    font-size: 14px;
    color: #a67c6d;
    margin-bottom: 20px;
    font-family: serif; /* 英字はセリフ体で上品に */
    letter-spacing: 0.1em;
}

.concept-main-title {
    font-size: 36px;
    font-weight: 500;
    line-height: 1.5;
    margin-bottom: 40px;
    font-family: 'Noto Serif JP', serif;
     letter-spacing: 0.05em;
}

.concept-description {
    font-size: 15px;
    line-height: 2;
    color: #666;
    margin-bottom: 40px;
}

/* 特徴リスト */
.concept-feature-list {
    list-style: none;
    margin-bottom: 40px;
    font-family: 'Noto Serif JP', serif;
}

.concept-feature-list li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 15px;
    font-size: 18px;
    font-weight: 600;
}

/* リストの丸ドット */
.concept-feature-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    background-color: #a67c6d;
    border-radius: 50%;
}

/* クロージングメッセージ */
.concept-closing {
    margin-top: 50px;
}

.closing-highlight {
    font-size: 20px;
    color: #444;
    margin-bottom: 10px;
    font-family: 'Noto Serif JP', serif;
    letter-spacing: 0.05em;
}

.closing-main {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: 0.02em;
    font-family: 'Noto Serif JP', serif;
}

/* --- レスポンシブ調整 --- */
@media (max-width: 1024px) {
    .container-concept {
        flex-direction: column;
        gap: 60px;
    }
    .concept-visual {
        width: 100%;
        display: flex;
        justify-content: center;
    }
    .concept-badge {
        right: 0;
        bottom: -20px;
        padding: 20px 30px;
    }
    .concept-text-content {
        text-align: center;
    }
    .concept-feature-list li {
        display: inline-block;
        text-align: left;
        margin: 10px;
    }
}

/* --- 選ばれる理由セクション --- */
.reason-section {
    background-color: #fcf9f6; /* 非常に薄いベージュ */
    padding: 140px 0;
    color: #4a362a;
    overflow: hidden;
}

.container-narrow {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 40px;
}

/* 共通ヘッダー */
.section-header {
    text-align: center;
    margin-bottom: 100px;
    font-family: 'Noto Serif JP', serif;
}

.section-label {
    display: block;
    font-size: 14px;
    color: #a67c6d;
    font-family: serif;
    letter-spacing: 0.2em;
    margin-bottom: 15px;
}

.section-title {
    font-size: 28px;
    font-weight: 500;
    margin-bottom: 20px;
}

.section-line {
    width: 30px;
    height: 1px;
    background-color: #4a362a;
    margin: 0 auto;
}

/* 理由リストのアイテム */
.reason-item {
    display: flex;
    align-items: center;
    margin-bottom: 200px; /* アイテム間の余白 */
    position: relative;
}

/* 2段目の反転 */
.reason-item.is-reverse {
    flex-direction: row-reverse;
}

/* 画像エリア */
.reason-visual {
    flex: 0 0 60%; /* 画像の幅 */
    position: relative;
}

.reason-visual img {
    width: 100%;
    height: auto;
    display: block;
    position: relative;
    z-index: 2;
}

/* 背面のベージュフレーム */
.image-bg-frame {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #e6cfc1; /* 背面の薄茶色 */
    top: 30px;
    left: 30px;
    z-index: 1;
}

/* 反転時のフレーム位置 */
.is-reverse .image-bg-frame {
    left: auto;
    right: 30px;
}

/* テキストボックス */
.reason-box {
    flex: 0 0 45%;
    background-color: #fff;
    padding: 40px 35px;
    border: 1px solid #e6cfc1;
    position: relative;
    z-index: 3;
    /* 画像に重ねるためのネガティブマージン */
    margin-left: -10%; 
    box-sizing: border-box;
    transform: translateY(200px); /* 数字を大きくするほど下に下がります */
    text-align: center; /* タイトル（inline-block）を中央に寄せる */
}

.is-reverse .reason-box {
    margin-left: 0;
    margin-right: -10%;
}

.reason-box-title {
    font-size: 22px;
    font-weight: 500;
    margin-bottom: 20px;
    position: relative;
    display: inline-block;
    padding-bottom: 10px;
    text-align: center; 
    font-family: 'Noto Serif JP', serif;
    letter-spacing: 0.05em;
    color: #2E2219;
}

/* タイトルの下線 */
.reason-box-title::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #2E2219;
}

.reason-box-text {
    font-size: 15px;
    line-height: 1.8;
    color: #2E2219;
    text-align: left; /* ボックス内でのテキストの並びを左に戻す */
    display: inline-block; /* 左揃えのまま中央に配置したい場合はこれ */
    max-width: 100%; /* はみ出し防止 */
}

/* --- レスポンシブ --- */
@media (max-width: 1024px) {
    .reason-item, .reason-item.is-reverse {
        flex-direction: column;
        margin-bottom: 100px;
    }
    .reason-visual {
        width: 100%;
        margin-bottom: 40px;
    }
    .reason-box {
        width: 90%;
        margin: -60px auto 0 !important; /* スマホでは画像の下に重ねて中央配置 */
        padding: 40px 30px;
    }
    .image-bg-frame {
        top: 20px;
        left: 20px;
    }
    .is-reverse .image-bg-frame {
        right: 20px;
    }
}

/* --- 講師紹介セクション --- */
.instructor-section {
    background-color: #3b2c28; /* 深みのあるダークブラウン */
    padding: 120px 0 160px; /* バッジがはみ出すため下側の余白を多めに */
    color: #fff;
    overflow: hidden;
}

.container-instructor {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    align-items: center; /* 上下中央揃え */
    gap: 80px; /* 画像とテキストの間隔 */
}

/* ビジュアルエリア（左） */
.instructor-visual {
    flex: 1;
}

.instructor-image-wrap {
    position: relative;
    width: 100%;
    max-width: 500px;
}

.instructor-image-wrap img {
    width: 100%;
    height: auto;
    display: block;
    /* 写真の比率を保つための微調整が必要な場合はここに記述 */
}

/* 名前バッジ（写真の下端に重なる白いボックス） */
.instructor-name-badge {
    position: absolute;
    bottom: -20%; /* 下にはみ出させる */
    left: 50%;
    transform: translateX(-50%); /* 中央配置 */
    background-color: #f6efe9; /* ベージュがかった白 */
    color: #3b2c28;
    padding: 30px 50px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    min-width: 200px;
    font-family: noto-serif-jp, serif;
    letter-spacing: 0.05em;
    font-weight: 500;
}

.badge-label {
    display: block;
    font-size: 14px;
    font-family: serif;
    letter-spacing: 0.1em;
    margin-bottom: 10px;
}

.badge-name {
    font-size: 24px;
    font-weight: 500;
    white-space: nowrap;
}

/* テキストコンテンツ（右） */
.instructor-content {
    flex: 1.2;
}

.content-label-eng {
    display: block;
    font-size: 14px;
    color: #a67c6d; /* 銅色（アクセントカラー） */
    margin-bottom: 40px;
    letter-spacing: 0.05em;
}

.instructor-main-copy {
    font-size: 32px;
    font-weight: 400; /* 太すぎず上品に */
    line-height: 1.8;
    margin-bottom: 50px;
    letter-spacing: 0.05em;
    font-family: 'Noto Serif JP', serif;
}

.instructor-sub-text {
    font-size: 16px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.9); /* 純白より少しだけ透明度を下げて落ち着かせる */
    font-weight: 300;
    font-family: 'Noto Sans JP', sans-serif;
}

.instructor-sub-text p {
    margin-bottom: 10px;
}

/* --- レスポンシブ調整 --- */
@media (max-width: 1024px) {
    .container-instructor {
        flex-direction: column;
        text-align: center;
        gap: 100px;
    }
    .instructor-image-wrap {
        margin: 0 auto;
    }
    .instructor-main-copy {
        font-size: 24px;
    }
}

/* --- ターゲットセクション --- */
.target-section {
    background-color: #f6efe9; /* 全体のベースとなる薄いベージュ */
    padding: 140px 20px;
    color: #4a362a;
}

.container-target {
    max-width: 800px; /* リストが見やすくなるよう幅を絞る */
    margin: 0 auto;
    text-align: center;
}

/* ヘッダー */
.target-label-eng {
    display: block;
    font-size: 20px;
    color: #a67c6d;
    font-family: serif; /* 英字は上品に */
    margin-bottom: 20px;
    letter-spacing: 0.05em;
    font-style: italic;
}

.target-title {
    font-size: 32px;
    font-weight: 500;
    margin-bottom: 25px;
    letter-spacing: 0.05em;
    font-family: noto-serif-jp, serif;
}

.header-line {
    width: 30px;
    height: 1px;
    background-color: #4a362a;
    margin: 0 auto 80px;
}

/* チェックリスト */
.target-checklist-wrapper {
    margin-bottom: 80px;
    border-bottom: 1px solid #dcc7ba;
}

.target-checklist {
    list-style: none;
    padding: 0;
    margin: 0;
}

.target-checklist li {
    display: flex;
    align-items: center;
    padding: 20px 40px;
    border-bottom: 1px solid #dcc7ba; /* 項目間の線 */
    text-align: left;
    font-family: noto-serif-jp, serif;
    letter-spacing: 0.05em;
    font-weight: 500;
}

/* 最後の項目の線は wrapper の border-bottom と重なるので消す */
.target-checklist li:last-child {
    border-bottom: none;
}

/* チェックアイコンの作成 */
.check-icon {
    width: 24px;
    height: 24px;
    background-color: #96706b; /* アイコンの背景色（くすみローズ/ブラウン） */
    border-radius: 50%;
    position: relative;
    flex-shrink: 0;
    margin-right: 20px;
}

/* チェックマーク（白線） */
.check-icon::after {
    content: "";
    position: absolute;
    left: 8px;
    top: 5px;
    width: 6px;
    height: 10px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(45deg);
}

.target-checklist li p {
    font-size: 18px;
    font-weight: 500;
    margin: 0;
    letter-spacing: 0.02em;
}

/* フッターメッセージ */
.target-footer {
    font-size: 24px;
    line-height: 1.8;
    font-weight: 500;
    font-family: noto-serif-jp, serif;
}

/* --- レスポンシブ調整 --- */
.sp-only { display: none; }

@media (max-width: 768px) {
    .target-section {
        padding: 100px 20px;
    }
    .target-title {
        font-size: 22px;
    }
    .target-checklist li {
        padding: 18px 10px;
    }
    .target-checklist li p {
        font-size: 14px;
    }
    .target-footer {
        font-size: 16px;
    }
    .sp-only { display: block; }
}

/* --- 料金設定セクション --- */
.price-section {
    background-color: #fcf9f6; /* 非常に明るいベージュ */
    padding: 120px 20px;
    color: #4a362a;
}

.container-price {
    max-width: 1000px;
    margin: 0 auto;
}

/* 料金カード */
.price-card {
    background-color: #fff;
    max-width: 700px;
    margin: 0 auto 80px;
    position: relative;
    box-shadow: 0 15px 40px rgba(0,0,0,0.05); /* 柔らかい影 */
    border-top: 8px solid #a67c6d; /* 上部の太いアクセントライン */
    border-radius: 4px;
}

.price-card-inner {
    padding: 60px 40px;
    text-align: center;
}

.plan-name {
    font-size: 14px;
    color: #a67c6d;
    margin-bottom: 30px;
    letter-spacing: 0.1em;
}

/* 金額部分 */
.price-amount-wrap {
    margin-bottom: 40px;
}

.amount {
    font-size: 72px; /* 非常に大きく */
    font-weight: 600;
    font-family: 'Noto Serif JP', serif; /* 価格はセリフ体で高級感を */
    color: #96706b;
    line-height: 1;
}

.currency {
    font-size: 24px;
    color: #96706b;
    margin-left: 5px;
}

.tax-info {
    font-size: 14px;
    color: #888;
    margin-top: 5px;
}

/* カード内の区切り線 */
.card-line {
    width: 300px;
    height: 1px;
    background-color: #4a362a;
    margin: 30px auto;
}

/* カード内リスト */
.price-features {
    list-style: none;
    display: inline-block;
    text-align: left;
    margin: 0 auto;
}

.price-features li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 10px;
    font-size: 16px;
}

.price-features li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background-color: #96706b;
    border-radius: 50%;
}

/* 斜線付きメッセージ */
.card-message {
    font-size: 14px;
    margin: 40px 0 5px;
    color: #4a362a;
}

.card-message .slash {
    color: #ccc;
    margin: 0 10px;
    font-size: 18px;
    font-weight: 300;
}

/* カード内ボタン */
.card-cta {
    margin-bottom: 30px;
}

.btn-primary {
    display: inline-block;
    background: linear-gradient(90deg, #a67c6d 0%, #633230 100%);
    color: #fff;
    padding: 20px 50px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 500;
    font-size: 16px;
    box-shadow: 0 5px 15px rgba(99, 50, 48, 0.3);
    transition: 0.3s;
}

.btn-primary:hover {
    transform: translateY(-2px);
    opacity: 0.95;
}

.card-note {
    font-size: 12px;
    line-height: 1.8;
    color: #666;
}

/* セクションフッターメッセージ */
.price-footer-msg {
    text-align: center;
    font-family: noto-serif-jp, serif;
    letter-spacing: 0.05em;
    font-weight: 500;
}

.price-footer-msg p {
    font-size: 22px;
    line-height: 1.8;
    margin-bottom: 10px;
    letter-spacing: 0.05em;
}

/* --- レスポンシブ --- */
@media (max-width: 768px) {
    .amount { font-size: 54px; }
    .price-card-inner { padding: 40px 20px; }
    .card-line { width: 80%; }
    .btn-primary { padding: 18px 30px; font-size: 15px; width: 100%; box-sizing: border-box; }
    .price-footer-msg p { font-size: 18px; }
}

/* --- 無料トライアルセクション --- */
.trial-section {
    /* 深い茶色の背景 + 奥行きを出す円形グラデーション */
    background-color: #1d1614;
    background-image: radial-gradient(circle at 50% 50%, rgba(166, 94, 69, 0.12) 0%, transparent 70%);
    padding: 140px 20px;
    color: #f6efe9;
    text-align: center;
}

.container-trial {
    max-width: 1000px;
    margin: 0 auto;
}

/* ヘッダー */
.trial-label-eng {
    display: block;
    font-size: 20px;
    color: #a67c6d;
    font-family: serif;
    font-style: italic;
    margin-bottom: 25px;
    letter-spacing: 0.1em;
}

.trial-title {
    font-size: 36px;
    font-weight: 500;
    margin-bottom: 30px;
    letter-spacing: 0.05em;
    font-family: noto-serif-jp, serif;
}

.trial-sub-title {
    font-size: 18px;
    color: #d1c7bc;
    margin-bottom: 60px;
    font-family: noto-serif-jp, serif;
     font-weight: 300;
}

/* メリットカードのグリッド */
.trial-benefit-grid {
    display: flex;
    justify-content: center;
    gap: 25px;
    margin-bottom: 80px;
}

.benefit-card {
    flex: 1;
    max-width: 280px;
    background-color: rgba(255, 255, 255, 0.03); /* 非常に薄い透過背景 */
    border: 1px solid rgba(246, 239, 233, 0.2); /* 繊細な枠線 */
    padding: 40px 20px;
    border-radius: 8px;
}

.benefit-eng {
    font-size: 32px;
    font-family: serif;
    font-style: italic;
    color: #a67c6d;
    margin-bottom: 20px;
}

.benefit-text {
    font-size: 18px;
    line-height: 1.8;
}

/* メッセージ */
.trial-message {
    margin-bottom: 60px;
    font-family: noto-serif-jp, serif;
     letter-spacing: 0.05em;
     font-weight: 500;
}

.trial-message p {
    font-size: 18px;
    line-height: 2;
    margin-bottom: 10px;
}

/* ボタンエリア */
.card-message-trial {
    font-size: 14px;
    color: #d1c7bc;
    margin-bottom: 5px;
}
.btn-trial {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(90deg, #a67c6d 0%, #633230 100%);
    color: #fff;
    padding: 20px 60px;
    border-radius: 50px;
    text-decoration: none;
    font-size: 18px;
    font-weight: 500;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    transition: 0.3s;
    position: relative;
}

.btn-trial:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.4);
}

.btn-trial .arrow {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px 0 6px 10px;
    border-color: transparent transparent transparent #ffffff;
    margin-left: 20px;
}

.cta-sub-info {
    margin-top: 20px;
    font-size: 13px;
    color: #999;
}

/* --- レスポンシブ --- */
@media (max-width: 768px) {
    .trial-title { font-size: 24px; }
    .trial-benefit-grid { flex-direction: column; align-items: center; }
    .benefit-card { width: 100%; max-width: 400px; padding: 30px; }
    .trial-message p { font-size: 15px; }
    .btn-trial { width: 100%; padding: 20px 30px; font-size: 16px; box-sizing: border-box; }
}

/* --- FAQセクション --- */
.faq-section {
    background-color: #fcf9f6;
    padding: 120px 20px;
    color: #4a362a;
}

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

/* ヘッダー */
.faq-label-eng {
    display: block;
    text-align: center;
    font-size: 20px;
    color: #a67c6d;
    font-family: serif;
    font-style: italic;
    margin-bottom: 20px;
}

.faq-title {
    text-align: center;
    font-size: 32px;
    font-weight: 500;
    margin-bottom: 25px;
    font-family: noto-serif-jp, serif;
     letter-spacing: 0.05em;
}

.faq-header .header-line {
    width: 30px;
    height: 1px;
    background-color: #4a362a;
    margin: 0 auto 60px;
}

/* アコーディオン全体 */
.faq-list {
    border-top: 1px solid #dcc7ba;
}

.faq-item {
    border-bottom: 1px solid #dcc7ba;
}

/* 質問部分 */
.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 10px;
    cursor: pointer;
    font-size: 18px;
    font-weight: 500;
    transition: background-color 0.3s;
    font-family: noto-serif-jp, serif;
     letter-spacing: 0.05em;
}

.faq-question:hover {
    background-color: rgba(220, 199, 186, 0.1);
}

/* ＋・− アイコン */
.faq-icon {
    width: 26px;
    height: 26px;
    background-color: #b8998a;
    border-radius: 50%;
    position: relative;
    flex-shrink: 0;
    transition: transform 0.4s ease;
}

/* 縦棒 (＋用) */
.faq-icon::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 2px;
    background-color: #fff;
    transform: translate(-50%, -50%);
}

/* 横棒 (＋用) */
.faq-icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px;
    height: 12px;
    background-color: #fff;
    transform: translate(-50%, -50%);
    transition: opacity 0.3s, transform 0.4s;
}

/* 開いている時のアイコンの状態 */
.faq-item.is-open .faq-icon {
    transform: rotate(180deg);
}

.faq-item.is-open .faq-icon::after {
    opacity: 0; /* 縦棒を消して「−」にする */
}

/* 回答部分 */
.faq-answer {
    height: 0;
    overflow: hidden;
    transition: height 0.4s ease-out; /* JavaScriptで高さを動的に計算します */
}

.answer-inner {
    padding: 0 90px 30px 10px;
    font-size: 15px;
    line-height: 1.8;
    color: #666;
}

@media (max-width: 768px) {
    .faq-title { font-size: 24px; }
    .faq-question { font-size: 14px; padding: 25px 5px; }
}

/* --- 最終CTAセクション --- */
.final-cta-section {
    background-color: #fcf9f6; /* 清潔感のある明るいベージュ */
    padding: 100px 20px;
    text-align: center;
    color: #4a362a;
}

.container-final {
    max-width: 1000px;
    margin: 0 auto;
}

/* メインヘッドライン */
.final-headline {
    font-size: 42px;
    font-weight: 500;
    line-height: 1.6;
    margin-bottom: 50px;
    letter-spacing: 0.05em;
    font-family: noto-serif-jp, serif;
}

/* リード文 */
.final-lead {
    font-size: 18px;
    line-height: 2;
    margin-bottom: 60px;
    color: #555;
}

/* ボタンエリア */
.card-message-final {
    font-size: 15px;
    color: #2E2219;
    margin: 0 0 5px;
    font-family: noto-serif-jp, serif;
     letter-spacing: 0.05em;
     font-weight: 500;
}
.final-cta-area {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cta-caption {
    font-size: 15px;
    margin-bottom: 20px;
    color: #4a362a;
    font-weight: 500;
}

/* ボタン本体（これまでのボタンの集大成） */
.btn-final {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(90deg, #a67c6d 0%, #633230 100%);
    color: #fff;
    padding: 20px 70px;
    border-radius: 60px;
    text-decoration: none;
    font-size: 20px;
    font-weight: 700;
    box-shadow: 0 10px 30px rgba(99, 50, 48, 0.25);
    transition: all 0.3s ease;
    margin-bottom: 30px;
}

.btn-final:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(99, 50, 48, 0.35);
    opacity: 0.95;
}

/* ボタン内の矢印アイコン */
.btn-final .arrow {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 7px 0 7px 11px;
    border-color: transparent transparent transparent #ffffff;
    margin-left: 20px;
}

/* ボタン下の補足情報 */
.cta-micro-copy {
    font-size: 13px;
    line-height: 1.8;
    color: #888;
}

.cta-micro-copy p {
    margin-bottom: 5px;
}

/* --- レスポンシブ調整 --- */
@media (max-width: 768px) {
    .final-cta-section {
        padding: 100px 20px;
    }
    .final-headline {
        font-size: 28px;
    }
    .final-lead {
        font-size: 15px;
    }
    .btn-final {
        width: 100%;
        padding: 20px;
        font-size: 17px;
        box-sizing: border-box;
    }
}

/* --- フッターセクション --- */
.site-footer {
    background-color: #1d1614; /* 深いダークブラウン（他の暗いセクションと統一） */
    padding: 100px 0 20px;
    color: #f6efe9; /* 薄いベージュ系の文字色 */
}

.container-footer {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}

/* メインコンテンツの配置 */
.footer-main {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 80px;
}

/* 左側エリア */
.footer-left {
    flex: 1;
}

.footer-logo {
    margin-bottom: 40px;
}

.footer-logo img {
    height: 60px; /* デザインに合わせて調整 */
    width: auto;
}

.footer-catchphrase {
    font-size: 15px;
    line-height: 2;
    letter-spacing: 0.05em;
    color: rgba(246, 239, 233, 0.8);
    font-family: noto-serif-jp, serif;
     font-weight: 500;
}

/* 右側ナビゲーション */
.footer-right {
    flex: 1;
}

.footer-nav ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* 左揃え */
    gap: 15px;
}

/* 右側に寄せるための調整（PC表示時） */
@media (min-width: 1025px) {
    .footer-nav ul {
        align-items: flex-end; /* PCでは右側に寄せる */
    }
}

.footer-nav a {
    text-decoration: none;
    color: #f6efe9;
    font-size: 15px;
    transition: opacity 0.3s ease;
    letter-spacing: 0.02em;
}

.footer-nav a:hover {
    opacity: 0.6;
}

/* コピーライト部分 */
.footer-bottom {
    border-top: 1px solid rgba(246, 239, 233, 0.15); /* 非常に薄い境界線 */
    padding-top: 20px;
    text-align: center;
}

.copyright {
    font-size: 13px;
    color: rgba(246, 239, 233, 0.6);
    letter-spacing: 0.05em;
}

/* --- レスポンシブ --- */
@media (max-width: 1024px) {
    .footer-main {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 60px;
    }
    .footer-nav ul {
        align-items: center;
    }
    .container-footer {
        padding: 0 20px;
    }
    .site-footer {
        padding: 80px 0 30px;
    }
}