/* =====================================================
   奇跡の霊視鑑定 暁令（あかつき・れい）鑑定室
   デザインシステム：黒×金・柔らか改良（案④）
   - 黒は暖色寄り #1b1520（真っ黒禁止）
   - 金は「線と点」で使う（面で塗らない・画面の5〜10%以下）
   - 世界観セクション＝ダーク / 実務情報＝明るい生成り
   - 差し色（ローズ）は5%だけ
   ===================================================== */

/* ===== Webフォント（自前配信）=====
   見出し＝Shippori Mincho（サイトで使う文字だけを収録した軽量版・1ファイル）
   本文　＝Noto Sans JP（サイトで使う文字だけの軽量版）。今までの見た目をどの端末でも保つ
   ★文章を変えたり記事を足したら _font_subset.py を再実行すること（入っていない文字は端末標準の書体で出る）。
   ライセンス：SIL Open Font License（assets/fonts/OFL-*.txt）

   【2026-09-19 の判断】Google Fonts は 109ファイル・約1.8MB を読み込み、スマホの最初の表示が 7.4秒かかっていた。
     案A（採用・9/25 みーやさんが見比べて決定）：Noto Sans JP＋Mincho 600/700 を自前配信＝794KB → 表示 3.6秒
     案B（不採用）：本文は端末標準、Mincho は 600 の1ファイルを 600〜700 兼用＝204KB → 表示 3.0秒
   案Bにするには：下の Noto Sans JP と Mincho 700 の2行を消し、Mincho 600 の font-weight を「600 700」にし、
   --font-sans の先頭の 'Noto Sans JP' を外す。
*/
@font-face{font-family:'Noto Sans JP';font-style:normal;font-weight:400 700;font-display:swap;src:url("../assets/fonts/NotoSansJP-sub.woff2?v=20261023") format("woff2")}
@font-face{font-family:'Shippori Mincho';font-style:normal;font-weight:700;font-display:swap;src:url("../assets/fonts/ShipporiMincho-700-sub.woff2?v=20261023") format("woff2")}
/* Windows の游ゴシックは標準だと細すぎるため、Medium を通常の太さとして使う */
@font-face{font-family:'YuGothic M';font-weight:400;src:local('Yu Gothic Medium'),local('YuGothic-Medium')}
@font-face{font-family:'YuGothic M';font-weight:700;src:local('Yu Gothic Bold'),local('YuGothic-Bold')}
@font-face{font-family:'Shippori Mincho';font-style:normal;font-weight:600;font-display:swap;src:url("../assets/fonts/ShipporiMincho-600-sub.woff2?v=20261023") format("woff2")}

:root{
  /* ダーク面 */
  --dark:#1b1520;            /* 暖色寄りの黒（夜のプラム） */
  --dark-2:#241c2b;          /* ひとつ明るい面 */
  --dark-card:#2a2133;
  --dark-line:#453a52;
  --on-dark:#f1eae0;         /* 温かい白 */
  --on-dark-muted:#b5a9bd;

  /* ライト面（実務情報） */
  --light:#faf7f1;           /* 生成り */
  --light-2:#f3eee4;
  --light-card:#ffffff;
  --light-line:#e5dcc9;
  --ink:#3a3040;             /* 本文色 */
  --ink-muted:#6b6073;       /* 補足文。生成り(#f3eee4)の上でも 4.5:1 以上になる濃さ */
  --heading-on-light:#4a3b56;

  /* 金（シャンパン〜山吹の低彩度） */
  --gold:#c9a35c;
  --gold-soft:#d8bc82;
  --gold-line:#8a734a;
  --gold-on-dark:#d8bc82;
  --gold-text:#75603a;       /* ライト面に「文字」として金を置くとき用（4.5:1 以上） */

  /* 差し色（柔らかいローズ）: 使用は5%まで */
  --rose:#c76e8a;
  --rose-deep:#a84d6b;       /* ローズを文字色・白抜きバッジの地色に使うとき用（4.5:1 以上） */
  --line-green-deep:#067a36; /* LINE緑を小さな文字・小バッジに使うとき用 */

  /* LINE */
  --line-green:#06C755;

  --font-min:'Shippori Mincho','Yu Mincho','Hiragino Mincho ProN',serif;
  --font-sans:'Noto Sans JP','Hiragino Sans','Hiragino Kaku Gothic ProN','Noto Sans CJK JP','YuGothic M','Yu Gothic','Meiryo',sans-serif;

  --maxw:1080px;
  --radius:14px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-sans);
  color:var(--ink);
  background:var(--light);
  line-height:2;              /* ゆったり（低ジャンプ率） */
  font-size:15.5px;
  letter-spacing:.04em;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}  /* height:auto＝HTMLのwidth/height指定（ガタつき防止）と併用するため */
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
h1,h2,h3,h4{font-family:var(--font-min);font-weight:600;line-height:1.7;letter-spacing:.06em}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.section{padding:88px 0}
@media(max-width:640px){.section{padding:64px 0}}

/* ===== ダーク/ライト面の切替 ===== */
.on-dark{background:var(--dark);color:var(--on-dark)}
.on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4{color:var(--on-dark)}
.on-dark .muted{color:var(--on-dark-muted)}
.on-light{background:var(--light)}
.on-light-2{background:var(--light-2)}
.muted{color:var(--ink-muted)}

/* ===== 見出しまわり ===== */
.eyebrow{
  font-size:.75rem;letter-spacing:.34em;color:var(--gold-text);
  font-weight:700;text-transform:uppercase;
}
/* ダーク面の上では明るい金に戻す（ライト面で薄い金だと読めないため、標準は濃い金） */
.on-dark .eyebrow,.hero .eyebrow,.cta-sec .eyebrow,.media-band .eyebrow,.page-head .eyebrow{color:var(--gold)}
.h2{font-size:clamp(1.45rem,3.4vw,2.05rem);margin:.55rem 0 .2rem;color:var(--heading-on-light)}
.on-dark .h2,.media-band .h2{color:var(--on-dark)}
.lead{color:var(--ink-muted);font-size:.95rem;max-width:660px;margin:14px auto 0}
.on-dark .lead,.media-band .lead{color:var(--on-dark-muted)}
.center{text-align:center}

/* 金の飾り罫（線と点） */
.orn{display:flex;align-items:center;justify-content:center;gap:10px;margin:18px auto 0;width:180px}
.orn::before,.orn::after{content:"";height:1px;flex:1;background:linear-gradient(90deg,transparent,var(--gold))}
.orn::after{background:linear-gradient(90deg,var(--gold),transparent)}
.orn .d{width:7px;height:7px;background:var(--gold);transform:rotate(45deg);flex:none}

/* ===== ボタン ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  padding:1em 2em;border-radius:999px;font-weight:700;font-size:.95rem;
  border:1.5px solid transparent;cursor:pointer;transition:.22s;line-height:1.4;
  letter-spacing:.05em;white-space:nowrap;
}
.btn svg{flex:none}
.btn-gold{background:var(--gold);color:#221708;box-shadow:0 10px 26px -12px rgba(201,163,92,.55)}
.btn-gold:hover{background:var(--gold-soft);transform:translateY(-2px)}
.btn-outline{border-color:var(--gold-line);color:var(--heading-on-light)}
.on-dark .btn-outline{color:var(--on-dark);border-color:var(--gold-line)}
.btn-outline:hover{border-color:var(--gold);color:var(--gold-text)}
.on-dark .btn-outline:hover{color:var(--gold-soft)}
/* ダーク面（ヒーロー/CTA/メディア帯）のアウトラインボタンはゴールド文字で視認性を確保 */
.hero .btn-outline,.cta-sec .btn-outline,.media-band .btn-outline{color:var(--gold-soft);border-color:var(--gold-line)}
.hero .btn-outline:hover,.cta-sec .btn-outline:hover,.media-band .btn-outline:hover{color:#f2e3bf;border-color:var(--gold)}
.btn-line{background:var(--line-green);color:#fff;box-shadow:0 10px 26px -12px rgba(6,199,85,.5)}
.btn-line:hover{filter:brightness(1.06);transform:translateY(-2px)}
.btn-lg{padding:1.15em 2.6em;font-size:1.02rem}
.btn-sm{padding:.6em 1.4em;font-size:.85rem}

/* ===== ヘッダー ===== */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(27,21,32,.92);backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(138,115,74,.35);
}
.header-in{display:flex;align-items:center;justify-content:space-between;height:72px;max-width:1200px;margin:0 auto;padding:0 24px}
.brand{display:flex;flex-direction:column;line-height:1.2}
.brand .nm{font-family:var(--font-min);font-size:1.42rem;font-weight:700;color:var(--on-dark);letter-spacing:.14em}
.brand .nm small{font-size:.6em;color:var(--gold-soft);letter-spacing:.1em;margin-left:.4em}
.brand .sb{font-size:.69rem;letter-spacing:.14em;color:var(--gold);font-weight:700}
.gnav{display:flex;gap:24px;font-size:.87rem;color:var(--on-dark)}
.gnav a{padding:6px 2px;border-bottom:1.5px solid transparent;transition:.2s}
.gnav a:hover,.gnav a.cur{color:var(--gold-soft);border-bottom-color:var(--gold)}
.hd-cta{display:flex;align-items:center;gap:12px}
.hd-tel{text-align:right;color:var(--on-dark);line-height:1.35}
.hd-tel .no{font-family:var(--font-min);font-size:1.05rem;font-weight:700;letter-spacing:.04em}
.hd-tel small{display:block;font-size:.69rem;color:var(--on-dark-muted)}

/* モバイルメニュー */
.menu-btn{display:none;background:none;border:none;cursor:pointer;padding:8px}
.menu-btn span{display:block;width:24px;height:2px;background:var(--on-dark);margin:5px 0;transition:.25s}
.mobile-nav{display:none}
@media(max-width:960px){
  .gnav,.hd-tel{display:none}
  .menu-btn{display:block}
  .mobile-nav{
    display:none;position:fixed;inset:72px 0 auto 0;z-index:99;
    background:rgba(27,21,32,.98);border-bottom:1px solid var(--gold-line);
    padding:18px 24px 26px;
  }
  .mobile-nav.open{display:block}
  .mobile-nav a{
    display:block;padding:13px 6px;color:var(--on-dark);font-size:.95rem;
    border-bottom:1px solid rgba(138,115,74,.25);
  }
  .mobile-nav a:last-child{border-bottom:none}
  body.nav-open .menu-btn span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  body.nav-open .menu-btn span:nth-child(2){opacity:0}
  body.nav-open .menu-btn span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}

/* ===== ヒーロー（トップ） ===== */
.hero{
  position:relative;color:var(--on-dark);overflow:hidden;
  background:var(--dark) url("../assets/img/bg_hero.jpg") center/cover no-repeat;
}
/* 軽いWebP版に差し替え（スマホはさらに小さい版）。上のJPGは古いブラウザ用の予備 */
.hero{background-image:url("../assets/img/bg_hero-1536.webp")}
@media(max-width:900px){.hero{background-image:url("../assets/img/bg_hero-900.webp")}}
.hero::before{ /* 可読性のための薄い暗幕＋差し色の淡い光 */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg, rgba(27,21,32,.42), rgba(27,21,32,.68)),
    radial-gradient(42% 34% at 12% 88%, rgba(199,110,138,.07), transparent 70%);
}
.hero-in{
  position:relative;display:grid;grid-template-columns:1.02fr .98fr;gap:40px;
  align-items:center;max-width:1120px;margin:0 auto;padding:56px 24px 0;
}
.hero-txt{padding-bottom:64px}
.hero-cat{display:flex;align-items:center;gap:12px;font-size:.78rem;letter-spacing:.3em;color:var(--gold-soft);font-weight:700;margin-bottom:22px}
.hero-cat::before{content:"";width:34px;height:1px;background:var(--gold)}
.hero-copy{
  font-family:var(--font-min);font-size:clamp(1.6rem,4.3vw,2.5rem);
  line-height:1.85;font-weight:600;letter-spacing:.08em;
}
.hero-name{margin-top:26px;line-height:1.5}
.hero-name .nm{font-family:var(--font-min);font-size:clamp(1.9rem,5vw,2.9rem);letter-spacing:.16em;font-weight:700}
.hero-name .nm .gold{color:var(--gold-soft);display:inline-block;white-space:nowrap}  /* スマホで「暁」と「令」が別の行に割れるのを防ぐ */
.hero-name .rb{display:block;font-size:.78rem;letter-spacing:.4em;color:var(--on-dark-muted);margin-top:6px}
.hero-sub{margin-top:18px;color:var(--on-dark-muted);font-size:.93rem}
.hero-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.tag{
  font-size:.76rem;padding:.42em 1.05em;border-radius:999px;
  border:1px solid rgba(216,188,130,.45);color:var(--on-dark);
  background:rgba(216,188,130,.07);
}
.hero-cta{display:flex;flex-wrap:wrap;gap:13px;margin-top:30px}
.hero-note{margin-top:14px;font-size:.76rem;color:var(--on-dark-muted)}
.hero-photo{position:relative;align-self:center;max-width:430px;width:100%;margin:0 auto 56px;padding:14px;
  background:rgba(27,21,32,.5);border:1px solid rgba(216,188,130,.5);border-radius:14px;
  box-shadow:0 36px 90px -36px rgba(0,0,0,.9);
}
.hero-photo img{width:100%;border-radius:8px}
.hero-photo::after{ /* 内側の金の細フレーム（額装の二重線） */
  content:"";position:absolute;inset:7px;border:1px solid rgba(216,188,130,.35);
  border-radius:11px;pointer-events:none;
}
@media(max-width:860px){
  .hero-in{display:flex;flex-direction:column;gap:0;text-align:center;padding:28px 24px 52px}
  .hero-txt{display:contents}          /* 中の要素を直接並べ替えられるようにする */
  .hero-cat{order:1;justify-content:center;margin-bottom:16px}
  .hero-cat::before{display:none}
  .hero-copy{order:2;line-height:1.7}
  .hero-photo{order:3;max-width:280px;margin:20px auto 0;padding:9px}
  .hero-photo img{aspect-ratio:5/6;object-fit:cover;object-position:center 60%}
  .hero-photo::after{inset:4px;border-radius:8px}
  .hero-name{order:4}
  .hero-sub{order:5}
  .hero-tags{order:6;justify-content:center}
  .hero-cta{order:7;justify-content:center}
  .hero-note{order:8}
}

/* ===== 実績バー ===== */
.proof{background:var(--dark-2);border-top:1px solid rgba(138,115,74,.3);border-bottom:1px solid rgba(138,115,74,.3)}
.proof-in{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:30px 24px;max-width:var(--maxw);margin:0 auto;text-align:center}
.proof .num{font-family:var(--font-min);font-size:1.55rem;color:var(--gold-soft);font-weight:700;line-height:1.35}
.proof .num small{font-size:.58em}
.proof .lb{font-size:.75rem;color:var(--on-dark-muted);margin-top:2px}
@media(max-width:680px){.proof-in{grid-template-columns:repeat(2,1fr);gap:20px 8px}}

/* ===== カード類 ===== */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:44px}
@media(max-width:780px){.grid3,.grid2{grid-template-columns:1fr}}

.card{
  background:var(--light-card);border:1px solid var(--light-line);
  border-radius:var(--radius);padding:30px 26px;
}
.on-dark .card{background:var(--dark-card);border-color:var(--dark-line)}

/* 悩み別 */
.worry{
  text-align:center;padding:26px 18px;transition:.22s;
}
.worry:hover{transform:translateY(-4px);border-color:var(--gold-soft)}
.worry .ic{
  width:52px;height:52px;margin:0 auto 14px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--gold-soft);color:var(--gold-text);font-size:1.2rem;
}
.worry h3{font-size:1.02rem;color:var(--heading-on-light)}
.worry p{font-size:.8rem;color:var(--ink-muted);margin-top:6px;line-height:1.8}

/* ===== メニュー（料金カード） ===== */
.mcard{display:flex;flex-direction:column}
.mcard .badge{
  align-self:flex-start;font-size:.7rem;font-weight:700;letter-spacing:.16em;
  color:#221708;background:var(--gold);padding:.4em 1.2em;border-radius:999px;margin-bottom:18px;
}
.mcard.rec{border:1.5px solid var(--gold);position:relative}
.mcard.rec .rec-tag{
  position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:var(--rose-deep);color:#fff;font-size:.72rem;font-weight:700;
  padding:.3em 1.2em;border-radius:999px;letter-spacing:.12em;white-space:nowrap;
}
.mcard h3{font-size:1.2rem;color:var(--heading-on-light)}
.mcard .desc{font-size:.84rem;color:var(--ink-muted);margin:6px 0 16px;min-height:2.4em;line-height:1.9}
.mcard .price{font-family:var(--font-min);font-size:1.7rem;color:var(--heading-on-light);font-weight:700}
.mcard .price small{font-size:.55em;color:var(--ink-muted);font-weight:400}
.mcard ul{margin:16px 0 20px;font-size:.87rem}
.mcard li{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px dashed var(--light-line)}
.mcard li b{font-family:var(--font-min);color:var(--gold-text);font-weight:600;white-space:nowrap}
.mcard .btn{margin-top:auto}
.price-note{font-size:.8rem;color:var(--ink-muted);text-align:center;margin-top:20px;line-height:2}

/* 料金表（鑑定案内ページ） */
.ptable{width:100%;border-collapse:collapse;margin-top:22px;font-size:.92rem;background:var(--light-card)}
.ptable th,.ptable td{border:1px solid var(--light-line);padding:13px 16px;text-align:left}
.ptable th{background:var(--light-2);font-family:var(--font-min);font-weight:600;color:var(--heading-on-light);white-space:nowrap}
.ptable td.pr{font-family:var(--font-min);font-weight:700;color:var(--gold-text);white-space:nowrap}
.table-scroll{overflow-x:auto}

/* ===== 声 ===== */
.vcard{position:relative;padding-top:38px}
.vcard .q{
  position:absolute;top:14px;left:22px;font-family:var(--font-min);
  font-size:2.4rem;color:var(--gold-soft);line-height:1;opacity:.85;
}
.vcard p{font-size:.9rem;line-height:2.05}
.vcard .who{
  margin-top:16px;padding-top:12px;border-top:1px solid var(--light-line);
  font-size:.78rem;color:var(--ink-muted);display:flex;align-items:center;gap:8px;
}
.vcard .who::before{content:"";width:18px;height:1px;background:var(--gold)}
.vcard .genre{color:var(--rose-deep);font-weight:700}

/* LINEの声 */
.line-voice{
  background:#eef7ef;border:1px solid #d4e9d8;border-radius:var(--radius);padding:26px 24px;
}
.line-voice .lv-head{display:flex;align-items:center;gap:8px;font-size:.78rem;font-weight:700;color:#1a7a3d;margin-bottom:12px}
.line-voice p{font-size:.88rem;line-height:2.05}

/* ===== ステップ（鑑定の流れ） ===== */
.flow{counter-reset:step;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:44px}
@media(max-width:860px){.flow{grid-template-columns:repeat(2,1fr)}}
@media(max-width:540px){.flow{grid-template-columns:1fr}}
.step{position:relative;padding:30px 22px 26px}
.step::before{
  counter-increment:step;content:"0" counter(step);
  font-family:var(--font-min);font-size:2rem;color:var(--gold-soft);
  font-weight:700;line-height:1;display:block;margin-bottom:10px;
}
.step h3{font-size:1rem;color:var(--heading-on-light);margin-bottom:6px}
.step p{font-size:.82rem;color:var(--ink-muted);line-height:1.95}

/* ===== ポリシー枠（お読みください） ===== */
.policy{
  border:1px solid var(--gold-line);border-radius:18px;
  padding:46px 48px;text-align:center;position:relative;
  background:linear-gradient(180deg,rgba(216,188,130,.05),transparent);
}
.policy::before,.policy::after{
  content:"";position:absolute;width:22px;height:22px;border-color:var(--gold);border-style:solid;
}
.policy::before{top:-1px;left:-1px;border-width:1.5px 0 0 1.5px;border-radius:18px 0 0 0}
.policy::after{bottom:-1px;right:-1px;border-width:0 1.5px 1.5px 0;border-radius:0 0 18px 0}
.policy .pq{font-family:var(--font-min);font-size:clamp(1.12rem,2.6vw,1.44rem);line-height:2.1;color:var(--heading-on-light)}
.on-dark .policy .pq{color:var(--on-dark)}
.policy p.note{font-size:.84rem;color:var(--ink-muted);margin-top:18px}
@media(max-width:600px){.policy{padding:34px 24px}}

/* ===== 定義リスト（アクセス・概要） ===== */
.dl{display:grid;grid-template-columns:auto 1fr;gap:12px 22px;font-size:.92rem}
.dl dt{
  font-family:var(--font-min);color:var(--gold-text);font-weight:600;
  white-space:nowrap;padding-top:1px;
}
.dl dd{color:var(--ink)}
.on-dark .dl dd{color:var(--on-dark)}

/* ===== FAQ アコーディオン ===== */
.faq{margin-top:36px}
.faq details{
  background:var(--light-card);border:1px solid var(--light-line);
  border-radius:12px;margin-bottom:12px;overflow:hidden;
}
.faq summary{
  cursor:pointer;list-style:none;display:flex;gap:14px;align-items:baseline;
  padding:18px 22px;font-weight:600;font-size:.94rem;color:var(--heading-on-light);
  font-family:var(--font-min);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"Q.";color:var(--gold);font-family:var(--font-min);font-weight:700;flex:none}
.faq summary::after{content:"＋";margin-left:auto;color:var(--gold-text);font-weight:400;transition:.2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{
  padding:2px 22px 20px 52px;font-size:.89rem;color:var(--ink);line-height:2.05;
  border-top:1px dashed var(--light-line);padding-top:14px;margin:0 0 0;
}

/* ===== メディア実績 ===== */
.media-band{background:var(--dark);color:var(--on-dark)}
.media-list{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 14px;margin-top:30px}
.media-list li{
  font-size:.82rem;border:1px solid rgba(216,188,130,.4);border-radius:999px;
  padding:.5em 1.3em;color:var(--on-dark);
}
.media-photos{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:34px}
@media(max-width:680px){.media-photos{grid-template-columns:1fr}}
.media-photos figure{border:1px solid var(--dark-line);border-radius:10px;overflow:hidden;background:var(--dark-card)}
.media-photos img{width:100%;aspect-ratio:4/3;object-fit:cover}
.media-photos figcaption{font-size:.76rem;color:var(--on-dark-muted);padding:10px 14px;line-height:1.7}
.media-note{font-size:.78rem;color:var(--on-dark-muted);text-align:center;margin-top:18px}

/* ===== CTAセクション ===== */
.cta-sec{background:var(--dark);color:var(--on-dark);position:relative;overflow:hidden}
.cta-sec::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(55% 60% at 50% 0%, rgba(201,163,92,.13), transparent 70%);
}
.cta-in{position:relative;text-align:center;padding:80px 24px;max-width:760px;margin:0 auto}
.cta-in h2{font-size:clamp(1.4rem,3.4vw,2rem);line-height:1.9}
.cta-in p{color:var(--on-dark-muted);margin:16px 0 30px;font-size:.94rem}
.cta-btns{display:flex;flex-direction:column;align-items:center;gap:14px}
.cta-btns .btn-line{width:min(420px,100%)}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.cta-tel{font-family:var(--font-min);font-size:1.3rem;color:var(--on-dark);letter-spacing:.05em}
.cta-tel small{display:block;font-family:var(--font-sans);font-size:.7rem;color:var(--on-dark-muted);letter-spacing:.08em}

/* ===== ページ下層共通：ページヘッダー ===== */
.page-head{
  background:var(--dark);color:var(--on-dark);text-align:center;
  padding:66px 24px 58px;position:relative;overflow:hidden;
}
.page-head::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(50% 70% at 50% 0%, rgba(201,163,92,.12), transparent 70%);
}
.page-head .eyebrow{position:relative}
.page-head h1{position:relative;font-size:clamp(1.5rem,3.8vw,2.15rem);margin-top:10px;letter-spacing:.12em}
.breadcrumb{font-size:.78rem;color:var(--ink-muted);padding:14px 0}
.breadcrumb a:hover{color:var(--gold-text)}

/* ===== プロフィール ===== */
.prof-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:44px;align-items:start}
@media(max-width:820px){.prof-grid{grid-template-columns:1fr}}
.prof-photo{position:relative}
.prof-photo img{border-radius:12px;border:1px solid var(--light-line)}
.prof-photo::after{
  content:"";position:absolute;inset:12px;border:1px solid rgba(201,163,92,.5);
  border-radius:8px;pointer-events:none;
}
.story p{margin-bottom:1.4em;font-size:.95rem;line-height:2.15}
.story .em{
  font-family:var(--font-min);font-size:1.16rem;color:var(--heading-on-light);
  line-height:2.1;margin:1.6em 0;padding-left:18px;border-left:2px solid var(--gold);
}

/* 資格タグ */
.quali{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.quali li{
  font-size:.78rem;background:var(--light-2);border:1px solid var(--light-line);
  border-radius:999px;padding:.42em 1.1em;color:var(--ink);
}

/* ===== 注意リスト（できないこと） ===== */
.ng-list{margin-top:26px;display:grid;grid-template-columns:1fr 1fr;gap:10px 22px}
@media(max-width:680px){.ng-list{grid-template-columns:1fr}}
.ng-list li{
  font-size:.9rem;padding:10px 0 10px 30px;position:relative;
  border-bottom:1px dashed var(--light-line);line-height:1.9;
}
.ng-list li::before{
  content:"✕";position:absolute;left:4px;top:11px;color:var(--rose);
  font-weight:700;font-size:.85rem;
}
.ok-list li::before{content:"◆";color:var(--gold)}

/* ===== アクセス ===== */
.map-frame{border:1px solid var(--light-line);border-radius:12px;overflow:hidden;margin-top:10px}
.map-frame iframe{width:100%;height:380px;border:0;display:block}

/* ===== フッター ===== */
.site-footer{background:var(--dark);color:var(--on-dark-muted);padding:60px 0 90px;font-size:.85rem}
.foot-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:36px;max-width:var(--maxw);margin:0 auto;padding:0 24px}
@media(max-width:780px){.foot-grid{grid-template-columns:1fr;gap:26px}}
.foot-brand .nm{font-family:var(--font-min);font-size:1.3rem;color:var(--on-dark);letter-spacing:.14em}
.foot-brand p{margin-top:10px;font-size:.8rem;line-height:2}
.foot-ttl{font-family:var(--font-min);color:var(--gold-soft);font-size:.85rem;letter-spacing:.16em;margin-bottom:12px}
.foot-nav a{display:block;padding:5px 0;transition:.2s}
.foot-nav a:hover{color:var(--gold-soft)}
.foot-tel{font-family:var(--font-min);font-size:1.25rem;color:var(--on-dark)}
.copy{
  text-align:center;margin-top:44px;padding-top:22px;font-size:.72rem;
  border-top:1px solid rgba(138,115,74,.25);color:var(--on-dark-muted);
}

/* ===== スマホ固定CTA（小さく・LINE1本＋電話） ===== */
.fix-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:98;display:none;
  grid-template-columns:1fr auto;gap:0;
  background:rgba(27,21,32,.96);backdrop-filter:blur(8px);
  border-top:1px solid rgba(138,115,74,.4);padding:10px 12px;
}
.fix-cta .btn-line{border-radius:10px;padding:.85em 1em;font-size:.9rem;width:100%}
.fix-cta .tel{
  display:flex;align-items:center;justify-content:center;margin-left:10px;
  width:52px;border:1px solid var(--gold-line);border-radius:10px;color:var(--gold-soft);
}
@media(max-width:860px){
  .fix-cta{display:grid}
  body{padding-bottom:66px}
}

/* ===== キャンペーン（LINE無料オファー） ===== */
.offer{
  max-width:680px;margin:0 auto;text-align:center;
  border:1.5px solid var(--gold);border-radius:18px;
  padding:38px 34px 34px;position:relative;
  background:linear-gradient(180deg,rgba(216,188,130,.08),rgba(216,188,130,.02));
}
.offer .limited{
  position:absolute;top:-15px;left:50%;transform:translateX(-50%);
  background:var(--rose-deep);color:#fff;font-size:.74rem;font-weight:700;
  padding:.35em 1.5em;border-radius:999px;letter-spacing:.14em;white-space:nowrap;
}
.offer .of-ttl{font-family:var(--font-min);font-size:clamp(1.15rem,2.8vw,1.5rem);font-weight:700;line-height:1.8;color:var(--heading-on-light)}
.on-dark .offer .of-ttl{color:var(--on-dark)}
.offer .of-ttl b{color:var(--gold-text)}
.on-dark .offer .of-ttl b{color:var(--gold-soft)}
.offer .of-note{font-size:.76rem;color:var(--ink-muted);margin-top:14px;line-height:1.9}
.on-dark .offer .of-note{color:var(--on-dark-muted)}
.offer .btn{margin-top:20px}
@media(max-width:600px){.offer{padding:32px 20px 28px}}

/* ===== LINEスクリーンショット（証拠画像） ===== */
.line-shot{
  margin-top:16px;border:1px solid #d4e9d8;border-radius:12px;overflow:hidden;
  background:#fff;
}
.line-shot img{width:100%;display:block}
.line-voice .who-label{
  display:inline-block;font-size:.72rem;font-weight:700;color:#1a7a3d;
  background:#fff;border:1px solid #cfe8d5;border-radius:999px;
  padding:.2em .95em;margin-bottom:10px;
}

/* ===== コラム（ブログ記事） ===== */
.article{max-width:720px;margin:0 auto}
.post-meta{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;font-size:.76rem;color:var(--ink-muted);margin-bottom:30px;padding-bottom:18px;border-bottom:1px solid var(--light-line)}
.post-meta .cat{border:1px solid var(--gold-line);color:var(--gold-text);border-radius:999px;padding:.2em 1em;font-weight:700}
.article h2{
  font-size:1.22rem;color:var(--heading-on-light);line-height:1.75;
  border-left:3px solid var(--gold);padding:10px 16px;border-radius:0 10px 10px 0;
  background:linear-gradient(90deg,rgba(201,163,92,.10),transparent 80%);
  margin:2.8em 0 1.1em;
}
.article h3{
  font-size:1.05rem;color:var(--heading-on-light);margin:2.2em 0 .7em;
  padding-left:1em;text-indent:-1em;
}
.article h3::before{content:"◆ ";color:var(--gold);font-size:.8em}
.article p{margin-bottom:1.7em;font-size:.95rem;line-height:2.2}
.article ul{margin:0 0 1.7em 1.5em;list-style:disc;font-size:.95rem;line-height:2.1}
.article li{margin-bottom:.6em}
.article li::marker{color:var(--gold)}
.article .lead-p{font-size:1rem;color:var(--ink)}
.post-cta{border:1.5px solid var(--gold);border-radius:16px;padding:30px 24px;text-align:center;margin-top:56px;background:linear-gradient(180deg,rgba(216,188,130,.07),transparent)}
.post-cta p{font-family:var(--font-min);font-size:1.02rem;color:var(--heading-on-light);margin-bottom:16px;line-height:2.05}
.blog-card h3{font-size:1.02rem;color:var(--heading-on-light);line-height:1.85;margin-bottom:8px}
.blog-card .date{font-size:.74rem;color:var(--gold-text);font-weight:700;letter-spacing:.06em}
.blog-card p{font-size:.84rem;color:var(--ink-muted);margin-top:8px;line-height:1.95}
.blog-card:hover{border-color:var(--gold-soft);transform:translateY(-3px)}
.blog-card{transition:.22s;display:block;position:relative}
.blog-card .pin{
  position:absolute;top:-11px;left:20px;background:var(--gold);color:#221708;
  font-size:.68rem;font-weight:700;letter-spacing:.1em;padding:.25em 1.1em;border-radius:999px;
}
@media(max-width:600px){
  .article p{font-size:.93rem;line-height:2.15}
  .article h2{font-size:1.1rem;margin-top:2.4em}
  .article h3{font-size:1rem}
  .post-cta{padding:26px 16px}
}

/* ===== LINE初回限定オファー ===== */
.line-offer{
  position:relative;border-radius:20px;padding:44px 40px 40px;text-align:center;
  background:linear-gradient(180deg,#f2fbf4,#ffffff);
  border:2px solid var(--line-green);
  box-shadow:0 18px 46px -26px rgba(6,199,85,.4);
}
.line-offer .lo-badge{
  position:absolute;top:-16px;left:50%;transform:translateX(-50%);
  background:var(--line-green-deep);color:#fff;font-size:.76rem;font-weight:700;
  padding:.42em 1.6em;border-radius:999px;letter-spacing:.1em;white-space:nowrap;
  box-shadow:0 6px 16px -6px rgba(6,199,85,.6);
}
.line-offer .lo-lead{font-size:.9rem;color:var(--ink-muted);margin-bottom:6px}
.line-offer h2,.line-offer .lo-ttl{
  font-family:var(--font-min);font-size:clamp(1.25rem,3.2vw,1.7rem);
  color:var(--heading-on-light);line-height:1.75;margin-bottom:22px;
}
.line-offer .lo-ttl b{color:var(--line-green-deep)}
.lo-plans{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:0 auto 26px;max-width:600px}
@media(max-width:560px){.lo-plans{grid-template-columns:1fr}.line-offer{padding:38px 20px 32px}}
.lo-plan{
  background:#fff;border:1px solid #cfe8d5;border-radius:14px;padding:20px 16px;text-align:center;
}
.lo-plan .lp-cat{font-size:.76rem;font-weight:700;color:var(--line-green-deep);letter-spacing:.08em}
.lo-plan .lp-time{font-family:var(--font-min);font-size:.95rem;color:var(--ink);margin-top:6px}
.lo-plan .lp-price{font-family:var(--font-min);font-size:1.85rem;font-weight:700;color:var(--heading-on-light);line-height:1.3;margin-top:2px}
.lo-plan .lp-price small{font-size:.5em;font-weight:400}
.lo-plan .lp-was{font-size:.76rem;color:var(--ink-muted);margin-top:4px}
.lo-plan .lp-was s{opacity:1}  /* 取り消し線で十分に「旧価格」と伝わる。薄くすると読めない（コントラスト3.1） */
.lo-plan .lp-off{
  display:inline-block;margin-top:8px;font-size:.72rem;font-weight:700;color:#fff;
  background:var(--rose-deep);border-radius:999px;padding:.22em 1em;
}
.line-offer .lo-note{font-size:.76rem;color:var(--ink-muted);margin-top:16px;line-height:1.95}
.lo-steps{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-bottom:22px;font-size:.78rem;color:var(--ink-muted)}
.lo-steps span{background:#fff;border:1px solid #d4e9d8;border-radius:999px;padding:.35em 1em}

/* ===== 電話鑑定バンド（トップ下部） ===== */
.tel-band{background:var(--light-2);border-top:1px solid var(--light-line);border-bottom:1px solid var(--light-line)}
.tel-band-in{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;max-width:var(--maxw);margin:0 auto;padding:64px 24px}
@media(max-width:820px){.tel-band-in{grid-template-columns:1fr;gap:26px;padding:48px 24px}}
.tel-band h2{font-size:clamp(1.3rem,3vw,1.75rem);color:var(--heading-on-light);line-height:1.7}
.tel-band p{font-size:.93rem;color:var(--ink-muted);line-height:2.05;margin-top:14px}
.tel-price-box{background:#fff;border:1px solid var(--light-line);border-radius:16px;padding:26px 24px}
.tel-price-box .tp-first{
  background:linear-gradient(180deg,#f2fbf4,#fff);border:1.5px solid var(--line-green);
  border-radius:12px;padding:16px;text-align:center;margin-bottom:16px;
}
.tel-price-box .tp-first .tf-lb{font-size:.74rem;font-weight:700;color:var(--line-green-deep);letter-spacing:.08em}
.tel-price-box .tp-first .tf-price{font-family:var(--font-min);font-size:1.7rem;font-weight:700;color:var(--heading-on-light);line-height:1.3}
.tel-price-box .tp-first .tf-was{font-size:.74rem;color:var(--ink-muted)}
.tel-price-box ul{font-size:.88rem}
.tel-price-box li{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px dashed var(--light-line)}
.tel-price-box li:last-child{border-bottom:none}
.tel-price-box li b{font-family:var(--font-min);color:var(--gold-text);font-weight:600}

/* ===== 本人の言葉（引用枠） ===== */
.voice-quote{
  margin:2.2em 0;padding:26px 28px;border-left:3px solid var(--gold);
  background:linear-gradient(90deg,rgba(201,163,92,.09),transparent 85%);
  border-radius:0 12px 12px 0;
}
.voice-quote p{font-family:var(--font-min);font-size:1.02rem;line-height:2.2;color:var(--heading-on-light);margin:0}
.voice-quote .vq-name{display:block;margin-top:12px;font-family:var(--font-sans);font-size:.78rem;color:var(--ink-muted);text-align:right}
.voice-quote .vq-name::before{content:"—— "}
@media(max-width:600px){.voice-quote{padding:20px 18px}.voice-quote p{font-size:.95rem}}

/* ===== スクロールフェードイン ===== */
/* JSが動かない環境では最初から表示（本文が消える事故を防ぐ） */
.fade{opacity:1;transform:none}
.js-on .fade{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.js-on .fade.show{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.js-on .fade{opacity:1;transform:none;transition:none}}

/* ===== 汎用 ===== */
.mt-0{margin-top:0}.mt-20{margin-top:20px}.mt-30{margin-top:30px}.mt-40{margin-top:40px}
.small{font-size:.8rem}
.gold-txt{color:var(--gold-text)}
.on-dark .gold-txt{color:var(--gold-soft)}
.note-box{
  background:var(--light-2);border-left:3px solid var(--gold);
  padding:16px 20px;font-size:.85rem;border-radius:0 8px 8px 0;line-height:2;
}

/* ===== モバイル：ボタンの横はみ出し防止 ===== */
@media(max-width:600px){
  .btn{white-space:normal;max-width:100%}
  .btn-lg{padding:1.05em 1.4em;font-size:.96rem;line-height:1.6}
  .line-offer .btn-line,.post-cta .btn-line,.cta-btns .btn-line{width:100%}
}

/* ===== 固定CTA：2行表示・iPhoneのホームバー対応・PCは右下常設 ===== */
.fix-cta{padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px))}
.fix-cta .btn-line{flex-direction:column;gap:2px;white-space:normal;line-height:1.45;padding:.62em .8em}
.fix-cta .fc-main{font-size:.86rem;font-weight:700;letter-spacing:.02em}
.fix-cta .fc-sub{font-size:.7rem;font-weight:400;opacity:.93;letter-spacing:.02em}
@media(max-width:860px){
  body{padding-bottom:calc(78px + env(safe-area-inset-bottom,0px))}
}
@media(min-width:861px){
  .fix-cta{
    display:grid;left:auto;right:22px;bottom:22px;width:290px;
    border:1px solid rgba(138,115,74,.5);border-radius:14px;
    box-shadow:0 20px 50px -22px rgba(0,0,0,.75);
  }
}
/* ===== 画面外のセクションは、近づくまでレイアウト計算を後回しにする（最初の表示を速くする） ===== */
main > section:not(.hero){content-visibility:auto;contain-intrinsic-size:auto 900px}

/* ページ内リンク（#menu など）で飛んだとき、固定ヘッダーの下に見出しが隠れないようにする */
section[id]{scroll-margin-top:84px}

/* ヘッダーの「ご予約」ボタンは折り返さない（幅360pxの端末で3行に割れてヘッダーからはみ出していた） */
.hd-cta .btn{white-space:nowrap}
.brand .sb{word-break:auto-phrase}
@media(max-width:400px){.hd-cta .btn-sm{padding:.6em 1.05em}.header-in{padding:0 16px}.hd-cta{gap:6px}}

/* ===== 2026-10-15 SEO小修正（ひと目でわかる・関連コラム） ===== */
.glance-list{max-width:880px;margin:0 auto;border-top:1px solid var(--light-line)}
.glance-list > div{display:grid;grid-template-columns:10.5em 1fr;gap:6px 28px;padding:20px 4px;border-bottom:1px solid var(--light-line)}
.glance-list dt{font-family:var(--font-min);font-weight:600;color:var(--heading-on-light);font-size:1.02rem}
.glance-list dd{font-size:.93rem;line-height:1.95}
@media(max-width:640px){.glance-list > div{grid-template-columns:1fr;gap:2px;padding:16px 2px}}
.related-posts{margin-top:44px;padding-top:24px;border-top:1px solid var(--light-line)}
.related-posts h2{font-family:var(--font-min);font-size:1.05rem;color:var(--heading-on-light);margin:0 0 10px;background:none;padding:0;border:0}
.related-posts ul{list-style:none;padding:0;margin:0}
.related-posts li{padding:9px 0;border-bottom:1px dashed var(--light-line);font-size:.93rem;line-height:1.8}
.related-posts a{color:var(--heading-on-light);text-decoration:underline;text-decoration-color:var(--gold-line)}
.related-posts .small{margin-top:12px}
