@charset "utf-8";
/* ============================================================
   癒しの星読み ・ 夏未七緒（なお先生）｜ 共通スタイル
   ------------------------------------------------------------
   このファイル1つで、全4ページの見た目が決まります。
   色を変えたいときは、下の「色の設定」だけ触れば全ページに反映されます。

   ▼ 色の考え方
     金（gold）  … サイト全体の共通色。紫微斗数LP・風水LPとも共通
     墨（mid）   … トップの夜空。紺でも緑でもない中立の地
     紺（navy）  … 紫微斗数のセクションだけに使う
     深緑（jade）… 風水のセクションだけに使う
   ============================================================ */

/* ============ 色の設定（ライトモード） ============ */
:root{
  --bg:#f6f2ea; --bg-2:#efe7d9; --surface:#fdfbf6; --surface-2:#f3ecdf;
  --ink:#22212e; --ink-soft:#5b5867; --ink-faint:#8a8794;
  --gold:#a97f31; --gold-2:#c39c4c;
  --line:rgba(34,33,46,.14); --line-2:rgba(34,33,46,.07);

  /* 常に暗いブロック（ヒーロー・占術セクション・LINE）で使う色 */
  --mid:#14131f; --mid-2:#1d1c2b;
  --navy:#16153a; --navy-2:#1f1d4c;
  --jade:#0a2b25; --jade-2:#0f382f;
  --mid-surface:rgba(255,255,255,.05);
  --mid-line:rgba(232,214,178,.16);
  --mid-ink:#f3efe6; --mid-ink-soft:#c4bfd0;
  --gold-glow:#e8c988;
  --jade-glow:#8fd9c0;
  --line-green:#06c755;

  --serif:"Hiragino Mincho ProN","Yu Mincho","YuMincho","HGS明朝E","MS PMincho",serif;
  --sans:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic","YuGothic","Meiryo",system-ui,sans-serif;
  --maxw:1080px;
  --radius:18px;
}

/* ============ 色の設定（ダークモード） ============ */
@media (prefers-color-scheme:dark){
  :root{
    --bg:#14131f; --bg-2:#1a1927; --surface:#1e1d2c; --surface-2:#242332;
    --ink:#f3efe6; --ink-soft:#bfbacb; --ink-faint:#8d899b;
    --gold:#d9b26a; --gold-2:#e8c988;
    --line:rgba(232,214,178,.14); --line-2:rgba(232,214,178,.07);
  }
}
:root[data-theme="light"]{
  --bg:#f6f2ea; --bg-2:#efe7d9; --surface:#fdfbf6; --surface-2:#f3ecdf;
  --ink:#22212e; --ink-soft:#5b5867; --ink-faint:#8a8794;
  --gold:#a97f31; --gold-2:#c39c4c;
  --line:rgba(34,33,46,.14); --line-2:rgba(34,33,46,.07);
}
:root[data-theme="dark"]{
  --bg:#14131f; --bg-2:#1a1927; --surface:#1e1d2c; --surface-2:#242332;
  --ink:#f3efe6; --ink-soft:#bfbacb; --ink-faint:#8d899b;
  --gold:#d9b26a; --gold-2:#e8c988;
  --line:rgba(232,214,178,.14); --line-2:rgba(232,214,178,.07);
}

/* ============ 土台 ============ */
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:78px}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); line-height:1.85; font-size:16px;
  -webkit-font-smoothing:antialiased; letter-spacing:.02em; overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--serif); font-weight:600; text-wrap:balance; line-height:1.45; letter-spacing:.04em; margin:0}
p{margin:0}
a{color:inherit}
img{max-width:100%; height:auto; display:block}
ul{margin:0; padding:0; list-style:none}

/* パソコンでだけ効かせる改行（スマホでは自然に折り返させる） */
.br-pc{display:inline}
@media (max-width:640px){.br-pc{display:none}}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
.wrap-narrow{max-width:760px; margin:0 auto; padding:0 24px}
.section{padding:92px 0}
.section-sm{padding:64px 0}
.bg-2{background:var(--bg-2)}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}

/* ============ 見出しまわり ============ */
.eyebrow{
  font-family:var(--sans); font-size:12px; letter-spacing:.32em; text-transform:uppercase;
  color:var(--gold); font-weight:600; display:inline-flex; align-items:center; gap:.7em;
}
.eyebrow::before,.eyebrow::after{content:""; width:26px; height:1px; background:currentColor; opacity:.55}
.eyebrow.solo::after{display:none}
.sec-head{display:flex; flex-direction:column; align-items:center; gap:18px; text-align:center; margin-bottom:52px}
.sec-head h2{font-size:clamp(25px,4.2vw,36px)}
.sec-head p{color:var(--ink-soft); max-width:38em; font-size:15px}
.lede{color:var(--ink-soft)}

/* ============ ボタン ============ */
.btn{
  display:inline-flex; align-items:center; gap:.7em; justify-content:center;
  font-family:var(--sans); font-weight:700; letter-spacing:.06em; font-size:15px;
  padding:16px 32px; border-radius:999px; border:1px solid transparent; cursor:pointer;
  text-decoration:none; transition:transform .25s ease, box-shadow .25s ease, background .25s, border-color .25s, color .25s;
}
.btn-primary{
  background:linear-gradient(135deg,var(--gold-2),var(--gold));
  color:#20180a; box-shadow:0 10px 30px -10px rgba(169,127,49,.7);
}
.btn-primary:hover{transform:translateY(-3px); box-shadow:0 18px 40px -12px rgba(169,127,49,.85)}
.btn-ghost{border-color:var(--line); color:var(--ink); background:transparent}
.btn-ghost:hover{border-color:var(--gold); color:var(--gold)}
.btn-on-dark{border-color:var(--mid-line); color:var(--mid-ink); background:transparent}
.btn-on-dark:hover{border-color:var(--gold-glow); color:var(--gold-glow)}
.btn-line{background:var(--line-green); color:#fff; box-shadow:0 10px 30px -12px rgba(6,199,85,.75)}
.btn-line:hover{transform:translateY(-3px); box-shadow:0 18px 40px -14px rgba(6,199,85,.85)}
.btn-sm{padding:11px 22px; font-size:13.5px}
.btn .star{font-size:.9em}

/* ============ ヘッダー（全ページ共通） ============ */
.site-header{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-2);
}
@supports not (background:color-mix(in srgb, red 50%, transparent)){
  .site-header{background:var(--bg)}
}
.site-header .inner{
  max-width:var(--maxw); margin:0 auto; padding:12px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; flex-shrink:0}
.brand .mark{color:var(--gold); font-size:17px; line-height:1}
.brand .name{font-family:var(--serif); font-size:17px; letter-spacing:.08em; font-weight:600}
.brand .sub{font-size:10.5px; letter-spacing:.16em; color:var(--ink-faint); display:block; line-height:1.4; font-family:var(--sans)}
.site-nav{display:flex; align-items:center; gap:6px 22px; flex-wrap:wrap}
.site-nav a{
  text-decoration:none; font-size:13.5px; letter-spacing:.08em; color:var(--ink-soft);
  padding:6px 0; border-bottom:1px solid transparent; transition:color .2s, border-color .2s;
}
.site-nav a:hover{color:var(--gold)}
.site-nav a[aria-current="page"]{color:var(--gold); border-bottom-color:var(--gold)}
@media (max-width:720px){
  .site-header .inner{flex-direction:column; align-items:center; gap:10px; padding:10px 16px}
  .site-nav{justify-content:center; gap:4px 16px}
  .site-nav a{font-size:12.5px}
  .site-nav .btn{display:none}
}

/* ============ 星空（ヒーロー・暗いブロック共通） ============ */
.starfield{position:relative; overflow:hidden; isolation:isolate}
.starfield::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    radial-gradient(4px 4px at 60px 70px, rgba(255,255,255,.95), rgba(255,255,255,.18) 32%, transparent 72%),
    radial-gradient(3px 3px at 300px 130px, rgba(232,214,178,.9), rgba(232,214,178,.15) 35%, transparent 72%),
    radial-gradient(3.5px 3.5px at 180px 300px, rgba(255,255,255,.9), rgba(255,255,255,.15) 33%, transparent 72%),
    radial-gradient(2.8px 2.8px at 385px 360px, rgba(255,255,255,.82), transparent 70%),
    radial-gradient(3px 3px at 100px 385px, rgba(232,214,178,.8), rgba(232,214,178,.12) 35%, transparent 72%),
    radial-gradient(5px 5px at 225px 95px, rgba(255,255,255,.98), rgba(255,255,255,.22) 26%, transparent 68%),
    radial-gradient(2.8px 2.8px at 45px 205px, rgba(232,214,178,.82), transparent 70%),
    radial-gradient(3.2px 3.2px at 260px 255px, rgba(255,255,255,.9), rgba(255,255,255,.14) 34%, transparent 72%);
  background-size:420px 420px,420px 420px,420px 420px,420px 420px,420px 420px,300px 300px,300px 300px,300px 300px;
  background-repeat:repeat; opacity:.9;
}
/* またたきはヒーロー（各ページ最上部）だけ。全ブロックで動かすと描画が重くなるため */
.hero.starfield::before,.page-hero.starfield::before{animation:twinkle 7s ease-in-out infinite alternate}
@keyframes twinkle{from{opacity:.72}to{opacity:1}}
.glow{
  position:absolute; z-index:0; width:640px; height:640px; left:50%; top:-160px;
  transform:translateX(-50%); pointer-events:none;
  background:radial-gradient(circle, rgba(217,178,106,.18), transparent 62%); filter:blur(6px);
}

/* ============ ヒーロー ============ */
.hero{background:var(--mid); color:var(--mid-ink)}
.hero::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:radial-gradient(120% 90% at 50% -10%, transparent 55%, rgba(6,5,16,.85) 100%);
}
.hero-inner{
  position:relative; z-index:3; max-width:var(--maxw); margin:0 auto; padding:76px 24px 84px;
  display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:56px; align-items:center;
}
.hero-copy{display:flex; flex-direction:column; align-items:flex-start; text-align:left}
.hero .eyebrow{color:var(--gold-glow)}
.hero h1{
  font-size:clamp(26px,4.6vw,46px); line-height:1.42; margin:22px 0 0; color:#fdfaf2;
  text-shadow:0 2px 26px rgba(0,0,0,.35);
}
.hero h1 .accent{color:var(--gold-glow)}
.hero .role{
  margin-top:18px; font-size:13.5px; letter-spacing:.1em; color:var(--gold-glow);
  border:1px solid var(--mid-line); border-radius:999px; padding:7px 18px;
}
.hero-sub{margin-top:22px; color:var(--mid-ink-soft); font-size:15.5px; max-width:32em}
.hero-cta{display:flex; gap:14px; flex-wrap:wrap; margin-top:32px}
.hero-note{margin-top:22px; font-size:12.5px; letter-spacing:.08em; color:var(--mid-ink-soft); opacity:.85}
.hero-photo{position:relative; z-index:3; justify-self:center}
.hero-photo img{
  width:300px; height:300px; object-fit:cover; border-radius:50%;
  border:1px solid var(--mid-line); box-shadow:0 24px 60px -22px rgba(0,0,0,.75);
}
.hero-photo::after{
  content:""; position:absolute; inset:-14px; border-radius:50%;
  border:1px solid rgba(232,214,178,.22); pointer-events:none;
}
@media (max-width:860px){
  .hero-inner{grid-template-columns:1fr; gap:34px; padding:56px 24px 66px; justify-items:center}
  .hero-copy{align-items:center; text-align:center}
  .hero-sub{max-width:100%}
  .hero-cta{justify-content:center}
  .hero-photo{order:-1}
  .hero-photo img{width:206px; height:206px}
}

/* ページ内見出し用の小さいヒーロー（about / menu / contact） */
.page-hero{background:var(--mid); color:var(--mid-ink); text-align:center}
.page-hero .inner{position:relative; z-index:3; max-width:var(--maxw); margin:0 auto; padding:74px 24px 68px}
.page-hero .eyebrow{color:var(--gold-glow)}
.page-hero h1{font-size:clamp(27px,4.6vw,40px); margin:20px 0 0; color:#fdfaf2}
.page-hero p{margin-top:20px; color:var(--mid-ink-soft); font-size:15px; max-width:34em; margin-left:auto; margin-right:auto}

/* ============ 3つの入口 ============ */
.gates{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.gate{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:34px 28px 30px; display:flex; flex-direction:column; text-decoration:none;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s;
}
.gate:hover{transform:translateY(-4px); border-color:var(--gold); box-shadow:0 18px 40px -24px rgba(0,0,0,.35)}
.gate .want{font-size:14px; color:var(--ink-soft); letter-spacing:.04em}
.gate h3{font-size:21px; margin:12px 0 0}
.gate .desc{font-size:14px; color:var(--ink-soft); margin-top:12px; flex:1}
.gate .go{margin-top:20px; font-size:13px; letter-spacing:.1em; color:var(--gold); font-weight:700}
.gate.is-navy{border-top:3px solid #3b3878}
.gate.is-jade{border-top:3px solid var(--jade-glow)}
.gate.is-line{border-top:3px solid var(--line-green)}
@media (max-width:820px){.gates{grid-template-columns:1fr}}

/* ============ プロフィール抜粋（トップ） ============ */
.prof{display:grid; grid-template-columns:280px minmax(0,1fr); gap:48px; align-items:center}
.prof-photo img{width:100%; border-radius:var(--radius); border:1px solid var(--line)}
.prof-body h3{font-size:25px}
.prof-body .role{margin-top:10px; font-size:13px; letter-spacing:.08em; color:var(--gold); font-weight:700}
.prof-body p{margin-top:20px; color:var(--ink-soft); font-size:15px}
.prof-body .more{margin-top:26px}
.prof-tags{display:flex; flex-wrap:wrap; gap:8px; margin-top:22px}
.prof-tags span{
  font-size:12px; letter-spacing:.06em; padding:5px 13px; border-radius:999px;
  border:1px solid var(--line); color:var(--ink-soft);
}
@media (max-width:820px){
  .prof{grid-template-columns:1fr; gap:28px; text-align:center; justify-items:center}
  .prof-photo{max-width:240px}
  .prof-tags{justify-content:center}
}

/* ============ 占術セクション（紺・深緑の帯） ============ */
.pillar{color:var(--mid-ink); position:relative}
.pillar.navy{background:linear-gradient(180deg,var(--navy),var(--navy-2))}
.pillar.jade{background:linear-gradient(180deg,var(--jade),var(--jade-2))}
.pillar .inner{position:relative; z-index:3; max-width:var(--maxw); margin:0 auto; padding:88px 24px}
.pillar .eyebrow{color:var(--gold-glow)}
.pillar h2{font-size:clamp(26px,4.4vw,38px); color:#fdfaf2; margin-top:18px}
.pillar .lede{color:var(--mid-ink-soft); font-size:15px; margin-top:20px}
.pillar-head{max-width:44em}
.pillar-meta{
  display:flex; flex-wrap:wrap; gap:10px 12px; margin-top:26px; align-items:center;
}
.pillar-meta .chip{
  font-size:12.5px; letter-spacing:.08em; padding:6px 15px; border-radius:999px;
  border:1px solid var(--mid-line); color:var(--mid-ink-soft);
}
.pillar-meta .price{font-family:var(--serif); font-size:26px; color:var(--gold-glow); letter-spacing:.03em}
.pillar-meta .price small{font-size:12px; letter-spacing:.1em; margin-left:8px; color:var(--mid-ink-soft)}
.pillar-cta{display:flex; gap:14px; flex-wrap:wrap; margin-top:32px}

.cells{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:52px}
.cells.four{grid-template-columns:repeat(4,1fr)}
.cell{
  background:var(--mid-surface); border:1px solid var(--mid-line); border-radius:14px; padding:22px 20px;
}
.cell .num{
  font-family:var(--serif); font-size:12px; letter-spacing:.18em; color:var(--gold-glow); opacity:.8;
}
.cell h3{font-size:16px; margin-top:8px; color:#fdfaf2}
.cell p{font-size:13px; color:var(--mid-ink-soft); margin-top:8px; line-height:1.75}
@media (max-width:960px){.cells,.cells.four{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.cells,.cells.four{grid-template-columns:1fr}}

/* 「まずは鑑定書だけ」の小箱 */
.subnote{
  margin-top:48px; border:1px solid var(--mid-line); border-radius:var(--radius);
  background:rgba(0,0,0,.16); padding:28px 26px;
}
.subnote h3{font-size:17px; color:var(--gold-glow)}
.subnote > p{font-size:13.5px; color:var(--mid-ink-soft); margin-top:10px}
.doc-list{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:22px}
.doc{
  display:flex; flex-direction:column; text-decoration:none; padding:18px 18px 16px;
  border:1px solid var(--mid-line); border-radius:12px; background:var(--mid-surface);
  transition:border-color .25s, transform .25s;
}
.doc:hover{border-color:var(--gold-glow); transform:translateY(-3px)}
.doc .t{font-family:var(--serif); font-size:15px; color:#fdfaf2}
.doc .d{font-size:12.5px; color:var(--mid-ink-soft); margin-top:8px; flex:1; line-height:1.7}
.doc .p{margin-top:14px; font-size:15px; color:var(--gold-glow); font-family:var(--serif)}
@media (max-width:820px){.doc-list{grid-template-columns:1fr}}

/* ============ 比較表 ============ */
.table-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface)}
table.cmp{border-collapse:collapse; width:100%; min-width:620px; font-size:14.5px}
table.cmp th,table.cmp td{padding:16px 18px; text-align:left; border-bottom:1px solid var(--line-2); vertical-align:top}
table.cmp thead th{font-family:var(--serif); font-size:16px; background:var(--surface-2); border-bottom:1px solid var(--line)}
table.cmp thead th:nth-child(2){color:#4a47a0}
table.cmp thead th:nth-child(3){color:var(--gold)}
table.cmp tbody th{font-weight:600; color:var(--ink-soft); font-family:var(--sans); font-size:13.5px; white-space:nowrap; background:var(--surface-2)}
table.cmp tr:last-child th,table.cmp tr:last-child td{border-bottom:0}
@media (prefers-color-scheme:dark){
  table.cmp thead th:nth-child(2){color:#a9a4ec}
}
:root[data-theme="dark"] table.cmp thead th:nth-child(2){color:#a9a4ec}
.cmp-note{margin-top:22px; text-align:center; font-size:14px; color:var(--ink-soft)}

/* ============ その他のメニュー（Tier 3） ============ */
.others{display:grid; grid-template-columns:repeat(2,1fr); gap:16px}
.other{
  border:1px solid var(--line); border-radius:var(--radius); background:var(--surface);
  padding:26px 24px; display:flex; flex-direction:column;
}
.other h3{font-size:18px}
.other p{font-size:13.5px; color:var(--ink-soft); margin-top:10px; flex:1}
.other .p{margin-top:16px; font-family:var(--serif); font-size:17px; color:var(--gold)}
@media (max-width:820px){.others{grid-template-columns:1fr}}

/* ============ FAQ ============ */
.faq{max-width:800px; margin:0 auto; display:flex; flex-direction:column; gap:12px}
.faq details{
  border:1px solid var(--line); border-radius:14px; background:var(--surface); overflow:hidden;
}
.faq summary{
  cursor:pointer; padding:18px 22px; font-size:15px; display:flex; gap:14px; align-items:flex-start;
  list-style:none; font-weight:600;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"＋"; margin-left:auto; color:var(--gold); font-weight:400; flex-shrink:0}
.faq details[open] summary::after{content:"−"}
.faq summary .q{color:var(--gold); font-family:var(--serif); font-size:16px; flex-shrink:0}
.faq .ans{padding:0 22px 20px 54px; font-size:14px; color:var(--ink-soft)}

/* ============ note・Instagram ============ */
.links2{display:grid; grid-template-columns:repeat(2,1fr); gap:20px}
.linkcard{
  border:1px solid var(--line); border-radius:var(--radius); background:var(--surface);
  padding:32px 28px; text-decoration:none; display:flex; flex-direction:column;
  transition:transform .25s ease, border-color .25s;
}
.linkcard:hover{transform:translateY(-4px); border-color:var(--gold)}
.linkcard .ico{font-size:22px}
.linkcard h3{font-size:19px; margin-top:14px}
.linkcard p{font-size:13.5px; color:var(--ink-soft); margin-top:12px; flex:1}
.linkcard .go{margin-top:18px; font-size:13px; letter-spacing:.1em; color:var(--gold); font-weight:700}
@media (max-width:820px){.links2{grid-template-columns:1fr}}

/* ============ noteマガジンの紹介カード ============ */
.mag{
  display:block; text-decoration:none; margin-bottom:20px;
  border:1px solid var(--gold); border-radius:var(--radius); background:var(--surface);
  padding:34px 32px; transition:transform .25s ease, box-shadow .25s ease;
}
.mag:hover{transform:translateY(-4px); box-shadow:0 18px 44px -26px rgba(169,127,49,.85)}
.mag .tag{
  font-size:11.5px; letter-spacing:.18em; color:var(--gold); font-weight:700;
  display:inline-block; border:1px solid var(--line); border-radius:999px; padding:4px 13px;
}
.mag h3{font-size:23px; margin-top:16px}
.mag p{font-size:14px; color:var(--ink-soft); margin-top:14px; max-width:52em}
.mag .stars{
  display:flex; flex-wrap:wrap; gap:7px; margin-top:18px;
}
.mag .stars span{
  font-size:12px; letter-spacing:.04em; padding:4px 11px; border-radius:999px;
  border:1px solid var(--line-2); background:var(--surface-2); color:var(--ink-soft);
}
.mag .go{margin-top:20px; display:inline-block; font-size:13.5px; letter-spacing:.1em; color:var(--gold); font-weight:700}

/* 暗いブロックの中に置く、細い読み物リンク */
.pillar-link{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  margin-top:26px; padding:18px 24px; text-decoration:none;
  border:1px solid var(--mid-line); border-radius:14px; background:var(--mid-surface);
  transition:border-color .25s, transform .25s;
}
.pillar-link:hover{border-color:var(--gold-glow); transform:translateY(-2px)}
.pillar-link .lb{
  font-size:11px; letter-spacing:.18em; color:var(--gold-glow); font-weight:700; flex-shrink:0;
}
.pillar-link .tt{font-family:var(--serif); font-size:15.5px; color:#fdfaf2; flex:1; min-width:0}
.pillar-link .gg{color:var(--gold-glow); font-size:14px; flex-shrink:0}

/* ============ LINE（フッター直前） ============ */
.line-cta{background:var(--mid); color:var(--mid-ink); text-align:center}
.line-cta .inner{position:relative; z-index:3; max-width:760px; margin:0 auto; padding:84px 24px}
.line-cta .eyebrow{color:var(--gold-glow)}
.line-cta h2{font-size:clamp(24px,4vw,34px); color:#fdfaf2; margin-top:18px}
.line-cta p{margin-top:20px; color:var(--mid-ink-soft); font-size:15px}
.line-cta .btn{margin-top:30px}
.line-cta .note{margin-top:18px; font-size:12.5px; color:var(--mid-ink-soft); opacity:.8}

/* ============ フッター ============ */
.site-footer{background:var(--mid-2); color:var(--mid-ink-soft); padding:56px 0 40px; font-size:13.5px}
.site-footer .inner{max-width:var(--maxw); margin:0 auto; padding:0 24px; display:grid; grid-template-columns:1fr auto; gap:36px}
.site-footer .brand-block .n{font-family:var(--serif); font-size:19px; color:var(--mid-ink); letter-spacing:.08em}
.site-footer .brand-block .r{margin-top:10px; line-height:1.9}
.site-footer .brand-block .area{margin-top:14px; color:var(--gold-glow); font-size:12.5px; letter-spacing:.06em}
.site-footer nav{display:flex; gap:40px}
.site-footer nav ul{display:flex; flex-direction:column; gap:9px}
.site-footer nav .h{font-size:11px; letter-spacing:.2em; color:var(--gold-glow); text-transform:uppercase; margin-bottom:6px}
.site-footer a{text-decoration:none; transition:color .2s}
.site-footer a:hover{color:var(--gold-glow)}
.site-footer .copy{
  max-width:var(--maxw); margin:44px auto 0; padding:22px 24px 0; border-top:1px solid var(--mid-line);
  font-size:11.5px; letter-spacing:.06em; opacity:.65;
}
@media (max-width:820px){
  .site-footer .inner{grid-template-columns:1fr; gap:32px}
  .site-footer nav{gap:32px; flex-wrap:wrap}
}

/* ============ /about/ 本文 ============ */
.chapter{margin-top:64px}
.chapter:first-of-type{margin-top:0}
.chapter .ch-no{
  font-family:var(--serif); font-size:12px; letter-spacing:.24em; color:var(--gold); display:block;
}
.chapter h2{font-size:clamp(21px,3.4vw,27px); margin-top:12px}
.chapter .body{margin-top:26px; font-size:15.5px; line-height:2.05; color:var(--ink-soft)}
.chapter .body p{margin-bottom:1.6em}
.chapter .body p:last-child{margin-bottom:0}
.chapter .body em{font-style:normal; color:var(--ink); font-weight:600}
.arrow-list{
  margin:0 0 1.6em; padding:22px 24px; border-left:2px solid var(--gold);
  background:var(--surface); border-radius:0 12px 12px 0;
}
.arrow-list li{color:var(--ink); font-size:15px}
.arrow-list li + li{margin-top:10px; padding-top:10px; border-top:1px dashed var(--line)}
.greeting{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:38px 34px; text-align:center;
}
.greeting .big{font-family:var(--serif); font-size:clamp(19px,3.2vw,25px); line-height:1.75}
.greeting p{margin-top:20px; color:var(--ink-soft); font-size:15px}
.facts{display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:40px}
.fact{border:1px solid var(--line); border-radius:14px; padding:20px 22px; background:var(--surface)}
.fact .k{font-size:11.5px; letter-spacing:.16em; color:var(--gold); font-weight:700}
.fact .v{margin-top:8px; font-size:14.5px; line-height:1.8}
@media (max-width:820px){.facts{grid-template-columns:1fr}}

/* ============ /menu/ ============ */
.tier{margin-top:72px}
.tier:first-of-type{margin-top:0}
.tier-head{display:flex; align-items:baseline; gap:16px; flex-wrap:wrap; padding-bottom:16px; border-bottom:1px solid var(--line)}
.tier-head h2{font-size:23px}
.tier-head .cap{font-size:13px; color:var(--ink-soft)}
.items{display:flex; flex-direction:column; gap:14px; margin-top:26px}
.item{
  border:1px solid var(--line); border-radius:var(--radius); background:var(--surface);
  padding:26px 26px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:20px 28px; align-items:center;
}
.item.feature{border-color:var(--gold); box-shadow:0 14px 40px -28px rgba(169,127,49,.9)}
.item .name{font-family:var(--serif); font-size:18px; line-height:1.55}
.item .desc{font-size:13.5px; color:var(--ink-soft); margin-top:9px}
.item .tags{display:flex; flex-wrap:wrap; gap:7px; margin-top:13px}
.item .tags span{font-size:11.5px; letter-spacing:.05em; padding:4px 11px; border-radius:999px; border:1px solid var(--line); color:var(--ink-faint)}
.item .tags span.type{border-color:var(--gold); color:var(--gold)}
.item .buy{display:flex; flex-direction:column; align-items:flex-end; gap:12px; flex-shrink:0}
.item .amt{font-family:var(--serif); font-size:25px; color:var(--gold); white-space:nowrap}
.item .amt small{font-size:11px; letter-spacing:.1em; color:var(--ink-faint); margin-left:6px}
@media (max-width:760px){
  .item{grid-template-columns:1fr}
  .item .buy{align-items:stretch; flex-direction:row; justify-content:space-between; align-content:center}
  .item .buy .btn{flex-shrink:0}
}

/* オプション2列表 */
.opt-table{border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--surface); margin-top:26px}
.opt-row{display:grid; grid-template-columns:minmax(0,1.6fr) 1fr 1fr; gap:16px; padding:16px 22px; align-items:center; border-bottom:1px solid var(--line-2)}
.opt-row:last-child{border-bottom:0}
.opt-row.head{background:var(--surface-2); font-size:12px; letter-spacing:.12em; color:var(--ink-faint); font-weight:700}
.opt-row .n{font-size:14.5px}
.opt-row .v{font-family:var(--serif); font-size:17px; color:var(--gold); text-align:right}
.opt-row .v.only{font-family:var(--sans); font-size:12.5px; color:var(--ink-faint)}
.opt-row .lbl{display:none}
@media (max-width:640px){
  .opt-row{grid-template-columns:1fr; gap:6px; padding:16px 18px}
  .opt-row.head{display:none}
  .opt-row .n{font-weight:700; font-size:15px; margin-bottom:4px}
  .opt-row .v{text-align:left; display:flex; justify-content:space-between; align-items:baseline; font-size:15px}
  .opt-row .lbl{display:inline; font-family:var(--sans); font-size:11.5px; letter-spacing:.1em; color:var(--ink-faint)}
}

/* ============ /contact/ ============ */
.contact-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.ccard{
  border:1px solid var(--line); border-radius:var(--radius); background:var(--surface);
  padding:34px 28px; display:flex; flex-direction:column; text-align:center; align-items:center;
}
.ccard.primary{border-color:var(--line-green)}
.ccard .ico{font-size:26px}
.ccard h2{font-size:19px; margin-top:14px}
.ccard .lead{font-size:13.5px; color:var(--ink-soft); margin-top:12px; flex:1}
.ccard .btn{margin-top:22px}
.ccard .addr{margin-top:16px; font-size:13.5px; word-break:break-all}
.ccard .addr a{color:var(--gold); text-decoration:none}
.ccard .addr a:hover{text-decoration:underline}
@media (max-width:860px){.contact-grid{grid-template-columns:1fr}}

.notice{
  margin-top:44px; border:1px solid var(--line); border-left:3px solid var(--gold);
  border-radius:0 14px 14px 0; background:var(--surface); padding:26px 28px;
}
.notice h3{font-size:16px}
.notice p{margin-top:12px; font-size:14px; color:var(--ink-soft)}
.notice ul{margin-top:14px; display:flex; flex-direction:column; gap:9px}
.notice li{font-size:14px; color:var(--ink-soft); padding-left:1.2em; position:relative}
.notice li::before{content:"・"; position:absolute; left:0; color:var(--gold)}

/* ============ 申し込み先の注記（MOSHであることを明示） ============ */
.pay-note{font-size:12px; letter-spacing:.04em; color:var(--ink-faint); margin-top:14px}
.pay-note.on-dark{color:var(--mid-ink-soft); opacity:.8}

/* ============ スクロール表示アニメ ============ */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .8s ease, transform .8s ease}
.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1; transform:none; transition:none}
  .starfield::before{animation:none}
  html{scroll-behavior:auto}
}