/* ============================================================
   天手会（tensyukai）— コミュニティ登録LP スタイルシート
   css/style.css  （Dreamweaver 2020 対応）

   ■ 色を変えたい → :root の変数を編集
   ■ フォントを変えたい → body の font-family を編集

   セクション構成:
     1.  カラー変数・グローバル設定
     2.  背景装飾
     3.  ヘッダー
     4.  ヒーローセクション
     5.  フォームカード
     6.  入力フィールド共通スタイル
     7.  チェックボックス・ラジオカスタム
     8.  郵便番号ステータス
     9.  送信ボタン
     10. 特典ボックス・社会的証明
     11. コンテンツ紹介セクション
     12. 読者の声セクション
     13. 著者プロフィールセクション
     14. FAQセクション
     15. ボトムCTA
     16. プライバシー・フッター
     17. アニメーション
     18. レスポンシブ
   ============================================================ */


/* ============================================================
   1. カラー変数・グローバル設定
   ============================================================ */
:root {
    --deep   : #0d2b1a;    /* 最も暗い緑（背景・テキスト） */
    --mid    : #1a4a2e;    /* 中間グリーン */
    --forest : #2a6645;    /* フォレストグリーン */
    --sage   : #4e8c68;    /* セージグリーン */
    --moss   : #7ab393;    /* モスグリーン（補助テキスト） */
    --mist   : #b8d4c4;    /* 薄いグリーン */
    --gold   : #c9a84c;    /* アクセントゴールド */
    --gold-l : #e6c97a;    /* 明るいゴールド */
    --cream  : #f5f0e8;    /* クリーム（明るいテキスト） */
    --warm   : #faf8f4;    /* 温かみのあるホワイト（背景） */
    --dark   : #1a1a14;    /* 濃いテキスト */
    --midtx  : #3d4a3e;    /* 中間テキスト */
    --error  : #d9534f;    /* エラー赤 */
    --ok     : #5a9e76;    /* 成功緑 */
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    font-family : 'Noto Serif JP', serif;
    background  : var(--warm);
    color       : var(--dark);
    overflow-x  : hidden;
    line-height : 1.8;
}


/* ============================================================
   2. 背景装飾
   ============================================================ */
.bg-mesh {
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(ellipse 65% 55% at 0% 0%,    rgba(42,102,69,.12) 0%, transparent 55%),
        radial-gradient(ellipse 50% 60% at 100% 100%, rgba(13,43,26,.08)  0%, transparent 55%);
}
.bg-grid {
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background-image:
        linear-gradient(rgba(42,102,69,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(42,102,69,.04) 1px, transparent 1px);
    background-size: 60px 60px;
}
.deco-ring {
    position: fixed; border-radius: 50%;
    border: 1px solid rgba(201,168,76,.07);
    pointer-events: none;
    animation: ringTurn linear infinite; z-index: 0;
}
.deco-ring.r1 { width:600px; height:600px; top:-200px; right:-200px; animation-duration:50s; }
.deco-ring.r2 { width:400px; height:400px; bottom:-180px; left:-180px; animation-duration:35s; animation-direction:reverse; border-color:rgba(42,102,69,.06); }
@keyframes ringTurn { to { transform: rotate(360deg); } }


/* ============================================================
   3. ヘッダー
   ============================================================ */
.site-header {
    background: rgba(13,43,26,.97);
    border-bottom: 1px solid rgba(201,168,76,.18);
    padding: .9rem 0;
    position: sticky; top: 0; z-index: 100;
    backdrop-filter: blur(16px);
}
.header-inner {
    display: flex; align-items: center;
    justify-content: space-between; flex-wrap: wrap; gap: .8rem;
}
.logo { display: flex; flex-direction: column; }
.logo-eng {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.6rem; font-weight: 600; color: var(--gold);
    letter-spacing: .1em; line-height: 1;
}
.logo-jp {
    font-size: .56rem; color: var(--mist);
    letter-spacing: .18em; margin-top: .1rem;
}
.header-badge {
    display: flex; align-items: center; gap: .4rem;
    font-size: .72rem; color: var(--moss);
    letter-spacing: .06em;
    border: 1px solid rgba(201,168,76,.2); padding: .35rem 1rem;
}
.header-badge i { color: var(--gold); }


/* ============================================================
   4. ヒーローセクション
   ============================================================ */
.hero-sec {
    position: relative; z-index: 1;
    padding: 5rem 0 4rem;
    background: var(--deep); overflow: hidden;
}
.hero-sec::before {
    content: ''; position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 70% 60% at 30% 50%, rgba(42,102,69,.35) 0%, transparent 60%),
        radial-gradient(ellipse 40% 50% at 100% 0%, rgba(201,168,76,.06) 0%, transparent 45%);
}
.hero-kicker {
    display: inline-flex; align-items: center; gap: .6rem;
    background: rgba(201,168,76,.1); border: 1px solid rgba(201,168,76,.25);
    color: var(--gold); font-size: .72rem; letter-spacing: .12em;
    padding: .45rem 1.1rem; margin-bottom: 1.8rem;
    animation: fadeUp .7s ease both;
}
.kicker-dot {
    width: 6px; height: 6px; border-radius: 50%; background: var(--gold);
    animation: blink 1.8s ease infinite;
}
@keyframes blink { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.7)} }

.hero-title {
    font-family: 'Shippori Mincho', serif;
    font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 700;
    color: var(--cream); line-height: 1.25; margin-bottom: 1.8rem;
    animation: fadeUp .7s .1s ease both;
}
.hero-title em {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic; color: var(--gold); font-size: 1.1em;
}
.hero-title-sub {
    display: block; font-size: .44em; color: var(--moss);
    letter-spacing: .04em; margin-top: .6em;
    font-style: normal; font-weight: 300; line-height: 1.9;
}
.hero-desc {
    font-size: .88rem; color: var(--mist);
    line-height: 2.1; font-weight: 300; margin-bottom: 2rem;
    animation: fadeUp .7s .2s ease both;
}
.hero-desc strong { color: var(--gold-l); font-weight: 500; }

/* 特典ボックス */
.gift-box {
    background: rgba(201,168,76,.07); border: 1px solid rgba(201,168,76,.25);
    border-left: 3px solid var(--gold); padding: 1.4rem 1.6rem;
    margin-bottom: 2rem; animation: fadeUp .7s .3s ease both;
}
.gift-label {
    font-family: 'Shippori Mincho', serif; font-size: .82rem;
    color: var(--gold-l); letter-spacing: .1em; margin-bottom: .9rem;
    display: flex; align-items: center; gap: .4rem;
}
.gift-item {
    display: flex; align-items: flex-start; gap: .6rem;
    font-size: .8rem; color: var(--mist); margin-bottom: .5rem; font-weight: 300;
}
.gift-item i { color: var(--gold); flex-shrink: 0; margin-top: .15rem; font-size: .82rem; }

/* 社会的証明 */
.social-proof {
    display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
    animation: fadeUp .7s .45s ease both;
}
.sp-big {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2.6rem; color: var(--gold-l); line-height: 1;
}
.sp-unit { font-size: .78rem; color: var(--mist); }
.sp-text { font-size: .78rem; color: var(--mist); font-weight: 300; }
.sp-stars {
    display: flex; align-items: center; gap: .25rem;
    font-size: .75rem; color: var(--gold);
}
.sp-stars span { color: var(--moss); margin-left: .3rem; font-size: .7rem; }


/* ============================================================
   5. フォームカード
   ============================================================ */
.form-card {
    background: var(--warm); border: 1px solid rgba(201,168,76,.2);
    position: relative; animation: fadeUp .7s .3s ease both;
    box-shadow: 0 30px 80px rgba(0,0,0,.35);
}
.form-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(to right, var(--forest), var(--gold), var(--forest));
}
.form-card-header {
    background: linear-gradient(135deg, var(--mid), var(--forest));
    padding: 1.4rem 2rem; text-align: center;
}
.form-card-title {
    font-family: 'Shippori Mincho', serif; font-size: 1.1rem;
    font-weight: 700; color: var(--cream); letter-spacing: .05em;
}
.form-card-sub { font-size: .68rem; color: var(--moss); margin-top: .25rem; letter-spacing: .08em; }
.form-card-body { padding: 1.8rem 2rem 2rem; }


/* ============================================================
   6. 入力フィールド共通スタイル
   ============================================================ */
.f-group { margin-bottom: 1.1rem; }

.f-label {
    display: flex; align-items: center; gap: .4rem;
    font-size: .72rem; color: var(--midtx);
    font-weight: 500; margin-bottom: .4rem; letter-spacing: .05em;
}
.req {
    background: var(--gold); color: var(--deep);
    font-size: .55rem; font-weight: 700; padding: .1rem .4rem; letter-spacing: 0;
}

.f-input, .f-select {
    width: 100%; background: #fff;
    border: 1px solid rgba(42,102,69,.2); color: var(--dark);
    padding: .72rem .9rem; font-family: 'Noto Serif JP', serif;
    font-size: .85rem; border-radius: 2px; outline: none;
    transition: all .25s; -webkit-appearance: none; appearance: none;
}
.f-input::placeholder { color: rgba(61,74,62,.3); }
.f-input:focus, .f-select:focus {
    border-color: var(--sage); box-shadow: 0 0 0 3px rgba(78,140,104,.12);
}
.f-input.is-invalid, .f-select.is-invalid {
    border-color: var(--error); box-shadow: 0 0 0 3px rgba(217,83,79,.1);
}
.f-input.is-valid, .f-select.is-valid { border-color: var(--ok); }

/* セレクトの矢印 */
.f-select {
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234e8c68' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right .9rem center;
    padding-right: 2.5rem;
}
.f-select option { background: #fff; color: var(--dark); }

/* ヒント・エラー */
.f-hint { font-size: .65rem; color: rgba(61,74,62,.45); margin-top: .3rem; }
.f-error { font-size: .65rem; color: var(--error); margin-top: .3rem; display: none; }

/* 全体エラーボックス */
.form-error-box {
    background: rgba(217,83,79,.08); border: 1px solid rgba(217,83,79,.3);
    color: var(--error); font-size: .75rem;
    padding: .65rem .9rem; margin-bottom: .8rem;
}

/* フォーム注記 */
.form-note {
    font-size: .65rem; color: rgba(61,74,62,.45);
    text-align: center; line-height: 1.7;
}
.form-note i { color: var(--sage); }


/* ============================================================
   7. チェックボックス・ラジオカスタム
   ============================================================ */
.check-group, .radio-group {
    display: flex; flex-wrap: wrap; gap: .55rem; margin-top: .4rem;
}
.check-item, .radio-item { position: relative; }
.check-item input, .radio-item input {
    position: absolute; opacity: 0; width: 0; height: 0;
}
.check-item label, .radio-item label {
    display: flex; align-items: center; gap: .45rem;
    padding: .42rem .85rem; border: 1px solid rgba(42,102,69,.2);
    font-size: .75rem; color: var(--midtx);
    cursor: pointer; transition: all .25s; letter-spacing: .04em;
}
.check-item label::before, .radio-item label::before {
    content: ''; width: 13px; height: 13px;
    border: 1px solid rgba(42,102,69,.35); border-radius: 50%;
    flex-shrink: 0; transition: all .25s;
}
.check-item label::before { border-radius: 2px; }
.check-item input:checked + label, .radio-item input:checked + label {
    border-color: rgba(42,102,69,.4); color: var(--forest);
    background: rgba(42,102,69,.06);
}
.check-item input:checked + label::before, .radio-item input:checked + label::before {
    background: var(--forest); border-color: var(--forest);
}

/* 同意チェックボックス（大きめ） */
.f-agree { margin-bottom: .8rem; margin-top: .2rem; }
.agree-wrap {
    display: flex; align-items: flex-start; gap: .7rem;
    cursor: pointer;
}
.agree-wrap input[type="checkbox"] {
    position: absolute; opacity: 0; width: 0; height: 0;
}
.agree-box {
    width: 18px; height: 18px; border: 1px solid rgba(42,102,69,.3);
    border-radius: 2px; flex-shrink: 0; margin-top: .15rem;
    display: flex; align-items: center; justify-content: center;
    transition: all .2s; background: #fff;
}
.agree-wrap input:checked ~ .agree-box {
    background: var(--forest); border-color: var(--forest);
}
.agree-wrap input:checked ~ .agree-box::after {
    content: ''; width: 10px; height: 5px;
    border-left: 2px solid #fff; border-bottom: 2px solid #fff;
    transform: rotate(-45deg) translateY(-1px); display: block;
}
.agree-text { font-size: .75rem; color: var(--midtx); line-height: 1.7; }
.agree-text a { color: var(--forest); text-decoration: underline; }
.agree-error { font-size: .65rem; color: var(--error); margin-top: .3rem; display: none; }


/* ============================================================
   8. 郵便番号ステータス
   ============================================================ */
#zip-status {
    font-size: .68rem; margin-top: .35rem;
    display: none; letter-spacing: .04em;
}


/* ============================================================
   9. 送信ボタン
   ============================================================ */
.btn-submit {
    width: 100%; background: var(--gold); color: var(--deep);
    border: none; border-radius: 2px; padding: 1rem 1.5rem;
    font-family: 'Shippori Mincho', serif; font-size: .92rem;
    font-weight: 700; letter-spacing: .12em; cursor: pointer;
    position: relative; overflow: hidden; transition: all .3s;
    margin-bottom: .8rem;
    display: flex; align-items: center; justify-content: center; gap: .5rem;
}
.btn-submit::before {
    content: ''; position: absolute; inset: 0;
    background: rgba(255,255,255,.18);
    transform: translateX(-100%) skewX(-12deg); transition: transform .35s;
}
.btn-submit:hover::before { transform: translateX(110%) skewX(-12deg); }
.btn-submit:hover  { background: var(--gold-l); }
.btn-submit:active { transform: scale(.99); }
.btn-submit:disabled { opacity: .5; cursor: not-allowed; }

.btn-spinner {
    display: none; width: 18px; height: 18px;
    border: 2px solid rgba(13,43,26,.3); border-top-color: var(--deep);
    border-radius: 50%; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }


/* ============================================================
   10. セクション共通
   ============================================================ */
.sec-tag {
    font-size: .62rem; letter-spacing: .38em; color: var(--forest);
    text-transform: uppercase; display: inline-flex; align-items: center; gap: .7rem;
    margin-bottom: .8rem;
}
.sec-tag::before { content: ''; width: 24px; height: 1px; background: var(--forest); }
.sec-tag.light { color: var(--moss); }
.sec-tag.light::before { background: var(--moss); }

.sec-title {
    font-family: 'Shippori Mincho', serif;
    font-size: clamp(1.6rem,3.5vw,2.4rem); font-weight: 700;
    color: var(--deep); line-height: 1.3; margin-bottom: .8rem;
}
.sec-title.light { color: var(--cream); }
.sec-desc { font-size: .85rem; color: var(--midtx); line-height: 2; font-weight: 300; }
.sec-desc.light { color: var(--moss); }


/* ============================================================
   11. コンテンツ紹介セクション
   ============================================================ */
.content-sec { position: relative; z-index: 1; padding: 6rem 0; background: var(--warm); }

.content-card {
    border: 1px solid rgba(13,43,26,.08); padding: 2rem 1.8rem;
    background: #fff; height: 100%; position: relative; transition: all .35s; overflow: hidden;
}
.content-card::after {
    content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(to right, var(--forest), var(--gold));
    transform: scaleX(0); transform-origin: left; transition: transform .35s;
}
.content-card:hover { transform: translateY(-4px); box-shadow: 0 16px 48px rgba(13,43,26,.07); }
.content-card:hover::after { transform: scaleX(1); }

.cc-icon {
    width: 48px; height: 48px;
    background: linear-gradient(135deg, var(--mid), var(--forest));
    display: flex; align-items: center; justify-content: center;
    color: var(--gold-l); font-size: 1.2rem; margin-bottom: 1.1rem;
}
.cc-title {
    font-family: 'Shippori Mincho', serif; font-size: .98rem;
    color: var(--deep); font-weight: 700; margin-bottom: .6rem;
}
.cc-desc {
    font-size: .78rem; color: var(--midtx);
    line-height: 1.95; font-weight: 300; margin-bottom: 1rem;
}
.cc-tag {
    display: inline-block; font-size: .62rem; color: var(--sage);
    border: 1px solid rgba(78,140,104,.25); padding: .18rem .7rem; letter-spacing: .08em;
}


/* ============================================================
   12. 読者の声セクション
   ============================================================ */
.voice-sec {
    position: relative; z-index: 1; padding: 6rem 0;
    background: var(--deep); overflow: hidden;
}
.voice-sec::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(ellipse 60% 60% at 50% 50%, rgba(42,102,69,.2) 0%, transparent 65%);
}
.voice-card {
    background: rgba(255,255,255,.05); border: 1px solid rgba(78,140,104,.18);
    padding: 2rem; height: 100%; transition: all .35s;
}
.voice-card:hover { border-color: rgba(201,168,76,.28); background: rgba(255,255,255,.08); }
.voice-stars { color: var(--gold); font-size: .78rem; margin-bottom: 1rem; display: flex; gap: .15rem; }
.voice-text { font-size: .82rem; color: var(--mist); line-height: 2; font-weight: 300; margin-bottom: 1.4rem; }
.voice-author { display: flex; align-items: center; gap: .8rem; }
.voice-avatar {
    width: 38px; height: 38px; border-radius: 50%;
    background: var(--forest); display: flex; align-items: center; justify-content: center;
    color: var(--cream); font-family: 'Shippori Mincho', serif; font-size: .88rem; flex-shrink: 0;
}
.voice-name { font-family: 'Shippori Mincho', serif; font-size: .82rem; color: var(--cream); font-weight: 700; }
.voice-area { font-size: .68rem; color: var(--sage); }


/* ============================================================
   13. 著者プロフィールセクション
   ============================================================ */
.profile-sec { position: relative; z-index: 1; padding: 6rem 0; background: var(--warm); }
.profile-card {
    border: 1px solid rgba(13,43,26,.09); padding: 3.5rem; background: #fff;
    position: relative; overflow: hidden;
}
.profile-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(to right, var(--forest), var(--gold), var(--forest));
}
.profile-avatar {
    width: 120px; height: 120px; border-radius: 50%;
    background: linear-gradient(135deg, var(--mid), var(--forest));
    display: flex; align-items: center; justify-content: center;
    font-size: 3rem; color: rgba(201,168,76,.5);
    margin: 0 auto .8rem; border: 3px solid rgba(201,168,76,.2);
}
.profile-title-badge {
    display: inline-block; font-size: .62rem; letter-spacing: .15em;
    color: var(--sage); border: 1px solid rgba(78,140,104,.25); padding: .18rem .7rem;
}
.profile-tag { font-size: .62rem; letter-spacing: .3em; color: var(--forest); text-transform: uppercase; margin-bottom: .4rem; }
.profile-name { font-family: 'Shippori Mincho', serif; font-size: 1.3rem; color: var(--deep); font-weight: 700; margin-bottom: 1rem; }
.profile-desc { font-size: .82rem; color: var(--midtx); line-height: 2.1; font-weight: 300; margin-bottom: 1.2rem; }
.profile-badges { display: flex; gap: .6rem; flex-wrap: wrap; }
.p-badge {
    display: inline-block; background: rgba(42,102,69,.08);
    border: 1px solid rgba(42,102,69,.18); color: var(--forest);
    font-size: .68rem; padding: .25rem .8rem; letter-spacing: .05em;
}


/* ============================================================
   14. FAQセクション
   ============================================================ */
.faq-sec {
    position: relative; z-index: 1; padding: 6rem 0;
    background: var(--mid); overflow: hidden;
}
.faq-list { max-width: 760px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid rgba(78,140,104,.18); }
.faq-q {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1.3rem 0; font-family: 'Shippori Mincho', serif;
    font-size: .95rem; color: var(--cream); cursor: pointer; font-weight: 700;
    gap: 1rem; transition: color .2s; user-select: none;
}
.faq-q:hover { color: var(--gold-l); }
.faq-icon { flex-shrink: 0; font-size: 1rem; color: var(--gold); transition: transform .3s; }
.faq-q.open .faq-icon { transform: rotate(45deg); }
.faq-a {
    font-size: .82rem; color: var(--moss); line-height: 2;
    font-weight: 300; padding-bottom: 1.3rem; display: none;
}
.faq-a.open { display: block; animation: fadeUp .3s ease both; }


/* ============================================================
   15. ボトムCTA
   ============================================================ */
.bottom-cta {
    position: relative; z-index: 1; padding: 6rem 0;
    background: var(--deep); overflow: hidden;
}
.bottom-cta::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(ellipse 55% 65% at 50% 50%, rgba(42,102,69,.25) 0%, transparent 65%);
}
.bcta-tag {
    display: inline-block; font-size: .62rem; letter-spacing: .35em;
    color: var(--gold); text-transform: uppercase;
    border: 1px solid rgba(201,168,76,.25); padding: .3rem 1rem; margin-bottom: 1.5rem;
}
.bcta-title {
    font-family: 'Shippori Mincho', serif;
    font-size: clamp(1.6rem,3.5vw,2.6rem); color: var(--cream);
    font-weight: 700; line-height: 1.4; margin-bottom: 1rem; position: relative;
}
.bcta-desc { font-size: .85rem; color: var(--moss); line-height: 2; font-weight: 300; margin-bottom: 2rem; position: relative; }
.bcta-btn {
    display: inline-flex; align-items: center;
    background: var(--gold); color: var(--deep); border: none; border-radius: 2px;
    padding: 1rem 3rem; font-family: 'Shippori Mincho', serif;
    font-size: .95rem; font-weight: 700; letter-spacing: .1em;
    text-decoration: none; position: relative; overflow: hidden;
    transition: all .3s; margin-bottom: 1rem;
}
.bcta-btn::before {
    content: ''; position: absolute; inset: 0;
    background: rgba(255,255,255,.18);
    transform: translateX(-100%) skewX(-12deg); transition: transform .35s;
}
.bcta-btn:hover::before { transform: translateX(110%) skewX(-12deg); }
.bcta-btn:hover { background: var(--gold-l); color: var(--deep); }
.bcta-note { font-size: .68rem; color: rgba(184,212,196,.3); position: relative; letter-spacing: .06em; }
.bcta-note i { color: var(--sage); }


/* ============================================================
   16. プライバシー・フッター
   ============================================================ */
.privacy-sec { background: var(--warm); padding: 3.5rem 0; border-top: 1px solid rgba(13,43,26,.06); }
.privacy-title { font-family: 'Shippori Mincho', serif; font-size: .95rem; color: var(--deep); font-weight: 700; margin-bottom: 1rem; }
.privacy-body { font-size: .75rem; color: var(--midtx); line-height: 2; font-weight: 300; max-width: 700px; }
.privacy-body p  { margin-bottom: .6rem; }
.privacy-body ul { padding-left: 1.2rem; }
.privacy-body li { margin-bottom: .2rem; }

.site-footer { background: #060f0a; padding: 2rem 0; border-top: 1px solid rgba(78,140,104,.1); }
.footer-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .8rem; }
.footer-logo { font-family: 'Cormorant Garamond', serif; font-size: 1.1rem; font-weight: 600; color: var(--gold); letter-spacing: .1em; }
.footer-copy { font-size: .65rem; color: rgba(184,212,196,.2); letter-spacing: .06em; }
.footer-links { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.footer-links a { font-size: .65rem; color: rgba(184,212,196,.22); text-decoration: none; transition: color .2s; }
.footer-links a:hover { color: var(--gold-l); }


/* ============================================================
   17. アニメーション
   ============================================================ */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .55s ease, transform .55s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }


/* ============================================================
   18. レスポンシブ
   ============================================================ */
@media (max-width: 991px) {
    .hero-sec { padding: 3rem 0 2.5rem; }
    .form-card-body { padding: 1.4rem 1.4rem 1.6rem; }
}
@media (max-width: 767px) {
    .hero-title { font-size: 1.8rem; }
    .social-proof { flex-direction: column; gap: .8rem; }
    .profile-card { padding: 2rem 1.5rem; }
    .footer-inner { flex-direction: column; text-align: center; }
    .footer-links { justify-content: center; }
    .header-badge { display: none; }
}

/* ============================================================
   ヒーロー上段レイアウト（PC: 左右2列 / SP: 縦積み）
   ============================================================ */
.hero-top-row {
    display        : flex;
    align-items    : flex-start;
    gap            : 3.5rem;
    margin-bottom  : 3rem;
}
.hero-top-left  { flex: 1 1 0; min-width: 0; }
.hero-top-right { flex-shrink: 0; width: 280px; }

/* 2段落目テキスト */
.hero-desc2 {
    font-size    : .84rem;
    color        : rgba(184,212,196,.55);
    line-height  : 2.1;
    font-weight  : 300;
    margin-top   : -.5rem;
    margin-bottom: 0;
    animation    : fadeUp .7s .35s ease both;
}

/* 実績数字ボックス */
.hero-stat-box {
    background : rgba(255,255,255,.04);
    border     : 1px solid rgba(78,140,104,.2);
    padding    : 2rem 1.6rem;
    position   : relative;
}
.hero-stat-box::before {
    content    : '';
    position   : absolute;
    top: 0; left: 0; right: 0; height: 2px;
    background : linear-gradient(to right, var(--forest), var(--gold), var(--forest));
}
.hsb-item { text-align: center; padding: .8rem 0; }
.hsb-num  {
    font-family   : 'Cormorant Garamond', serif;
    font-size     : 2rem; color: var(--gold-l);
    line-height   : 1; font-weight: 400;
}
.hsb-unit  { font-size: .95rem; color: var(--mist); margin-left: .15rem; }
.hsb-label { font-size: .68rem; color: var(--sage); letter-spacing: .08em; margin-top: .3rem; }
.hsb-stars { color: var(--gold); font-size: .88rem; display: flex; justify-content: center; gap: .18rem; }
.hsb-divider {
    height     : 1px;
    background : rgba(78,140,104,.18);
    margin     : 0 .5rem;
}


/* ============================================================
   ヒーロー中段：特典3列グリッド
   ============================================================ */
.hero-gift-row {
    margin-bottom: 3rem;
}
.hero-gift-label {
    font-family   : 'Shippori Mincho', serif;
    font-size     : .82rem;
    color         : var(--gold-l);
    letter-spacing: .1em;
    border        : 1px solid rgba(201,168,76,.2);
    border-left   : 3px solid var(--gold);
    padding       : .7rem 1.4rem;
    margin-bottom : 1.5rem;
    background    : rgba(201,168,76,.05);
    display       : inline-flex;
    align-items   : center;
    gap           : .4rem;
}
.hero-gift-cards {
    display              : grid;
    grid-template-columns: repeat(3, 1fr);
    gap                  : 1.2rem;
}
.hgc-item {
    background : rgba(255,255,255,.04);
    border     : 1px solid rgba(78,140,104,.18);
    padding    : 1.6rem;
    display    : flex;
    gap        : 1rem;
    align-items: flex-start;
    transition : border-color .3s, background .3s;
}
.hgc-item:hover {
    border-color: rgba(201,168,76,.3);
    background  : rgba(255,255,255,.07);
}
.hgc-icon {
    font-size  : 1.6rem;
    color      : var(--gold);
    flex-shrink: 0;
    margin-top : .1rem;
}
.hgc-tag  { font-size: .6rem; letter-spacing: .18em; color: var(--sage); text-transform: uppercase; margin-bottom: .35rem; }
.hgc-title {
    font-family  : 'Shippori Mincho', serif;
    font-size    : .9rem; color: var(--cream);
    font-weight  : 700; line-height: 1.5;
    margin-bottom: .5rem;
}
.hgc-desc { font-size: .74rem; color: var(--moss); line-height: 1.9; font-weight: 300; margin: 0; }


/* ============================================================
   ヒーロー下段フォーム：旧 gift-box / social-proof を非表示
   ============================================================ */
.hero-sec .gift-box,
.hero-sec .social-proof { display: none; }


/* ============================================================
   レスポンシブ調整
   ============================================================ */
@media (max-width: 1100px) {
    .hero-top-right { width: 240px; }
}
@media (max-width: 991px) {
    .hero-top-row   { flex-direction: column; }
    .hero-top-right { width: 100%; }
    .hero-stat-box  { display: flex; flex-wrap: wrap; justify-content: space-around; }
    .hsb-item       { padding: .6rem 1rem; }
    .hsb-divider    { display: none; }
    .hero-gift-cards { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
    .hero-gift-cards { grid-template-columns: 1fr; }
    .hero-desc2 { display: none; }
}

/* ============================================================
   全幅縦積みヒーロー（v4）
   ① hw-copy  : キャッチコピー全幅
   ② hw-stats : 実績数字 横4列
   ③ hw-gifts : 特典カード 横3列
   ④ hw-form-wrap : フォーム 全幅中央
   ============================================================ */

/* ── ① コピー ── */
.hw-copy {
    max-width    : 860px;
    margin       : 0 auto 3rem;
    text-align   : center;
}
.hw-copy .hero-kicker { justify-content: center; }
.hw-copy .hero-title  { font-size: clamp(2.4rem, 5vw, 4rem); }
.hw-copy .hero-desc   { max-width: 700px; margin-left: auto; margin-right: auto; }


/* ── ② 実績数字バー ── */
.hw-stats {
    display        : flex;
    align-items    : center;
    justify-content: center;
    gap            : 0;
    background     : rgba(255,255,255,.04);
    border         : 1px solid rgba(78,140,104,.2);
    margin-bottom  : 2.5rem;
    position       : relative;
}
.hw-stats::before {
    content    : '';
    position   : absolute;
    top: 0; left: 0; right: 0; height: 2px;
    background : linear-gradient(to right, var(--forest), var(--gold), var(--forest));
}
.hwst-item {
    flex           : 1;
    text-align     : center;
    padding        : 1.6rem 1rem;
}
.hwst-num {
    font-family: 'Cormorant Garamond', serif;
    font-size  : 2.4rem; color: var(--gold-l);
    line-height: 1; font-weight: 400;
}
.hwst-unit  { font-size: .95rem; color: var(--mist); margin-left: .15rem; }
.hwst-label { font-size: .68rem; color: var(--sage); letter-spacing: .08em; margin-top: .35rem; }
.hwst-stars { color: var(--gold); font-size: .9rem; display: flex; justify-content: center; gap: .2rem; }
.hwst-divider {
    width      : 1px;
    height     : 60px;
    background : rgba(78,140,104,.22);
    flex-shrink: 0;
}


/* ── ③ 特典カード ── */
.hw-gifts { margin-bottom: 2.5rem; }
.hw-gifts-label {
    font-family   : 'Shippori Mincho', serif;
    font-size     : .85rem; color: var(--gold-l);
    letter-spacing: .1em;
    border        : 1px solid rgba(201,168,76,.2);
    border-left   : 3px solid var(--gold);
    padding       : .75rem 1.5rem;
    margin-bottom : 1.5rem;
    background    : rgba(201,168,76,.05);
    display       : inline-flex; align-items: center; gap: .4rem;
}
.hw-gifts-grid {
    display              : grid;
    grid-template-columns: repeat(3, 1fr);
    gap                  : 1.2rem;
}
.hwg-card {
    background : rgba(255,255,255,.04);
    border     : 1px solid rgba(78,140,104,.18);
    padding    : 1.6rem 1.8rem;
    display    : flex; gap: 1.1rem; align-items: flex-start;
    transition : border-color .3s, background .3s;
}
.hwg-card:hover {
    border-color: rgba(201,168,76,.3);
    background  : rgba(255,255,255,.07);
}
.hwg-icon  { font-size: 1.8rem; color: var(--gold); flex-shrink: 0; margin-top: .1rem; }
.hwg-tag   { font-size: .6rem; letter-spacing: .18em; color: var(--sage); text-transform: uppercase; margin-bottom: .35rem; }
.hwg-title {
    font-family  : 'Shippori Mincho', serif;
    font-size    : .92rem; color: var(--cream);
    font-weight  : 700; line-height: 1.5; margin-bottom: .5rem;
}
.hwg-desc  { font-size: .76rem; color: var(--moss); line-height: 1.9; font-weight: 300; margin: 0; }


/* ── ④ フォームラッパー（全幅・中央配置） ── */
.hw-form-wrap   { }
.hw-form-inner  {
    max-width : 860px;
    margin    : 0 auto;
}

/* フォーム内フィールドを PC で2列グリッドにする */
.form-grid {
    display              : grid;
    grid-template-columns: 1fr 1fr;
    gap                  : 0 2rem;
}
.form-grid .f-group       { margin-bottom: 1.1rem; }
.form-grid .f-group.fg-full { grid-column: 1 / -1; }  /* 全幅スパン */


/* ── 古いレイアウト用クラスを無効化 ── */
.hero-top-row, .hero-top-left, .hero-top-right,
.hero-stat-box, .hero-gift-row, .hero-gift-label,
.hero-gift-cards, .hgc-item,
.hero-sec .gift-box, .hero-sec .social-proof,
.hero-sec .gift-label, .hero-sec .gift-item,
.hero-sec .sp-big, .hero-sec .sp-unit,
.hero-sec .sp-text, .hero-sec .sp-stars {
    display: none !important;
}


/* ── レスポンシブ ── */
@media (max-width: 991px) {
    .hw-stats          { flex-wrap: wrap; }
    .hwst-divider      { display: none; }
    .hwst-item         { flex: 0 0 50%; padding: 1.2rem .8rem; }
    .hw-gifts-grid     { grid-template-columns: 1fr; }
    .form-grid         { grid-template-columns: 1fr; }
    .form-grid .f-group.fg-full { grid-column: 1; }
}
@media (max-width: 767px) {
    .hw-copy           { text-align: left; }
    .hw-copy .hero-kicker { justify-content: flex-start; }
    .hwst-item         { flex: 0 0 100%; }
}