@charset "UTF-8";
/* =====================================================
   占いのまえに（仮）  共通スタイル
   世界観 = やわらかい朝の光（白 × 藤 × 金）
   ※2026-09-17に「深夜の星空（紺×金）」から切り替え。
     旧版は style.dark.bak.css に残してある。

   ★設計方針
     1. 画像を1枚も使わない。光も玉も CSS のグラデーションで描く。
        → 転送量が増えないので表示速度（Core Web Vitals）を落とさずに
          「動きのあるやさしいサイト」を成立させられる。
     2. アニメーションは transform / opacity だけを動かす。
        （width や top を動かすとブラウザがレイアウトを計算し直して重くなる）
     3. ★白地では金色の文字が読めない（#D4AF37 は白地で1.9:1）。
        そこで「見出しの色」は紫（--gold-soft）に移し、
        金は濃いもの（--gold）を数字に、淡いもの（--gold-line）を線だけに使う。
     4. prefers-reduced-motion（OSの「視差効果を減らす」設定）を必ず尊重する。
   ===================================================== */

/* ---------- 1. デザイントークン（色や余白の"元栓"） ----------
   ★白地版。役割が紺×金のときと変わっているので注意：
     --gold-soft … 白地では「見出しの色」＝紫。金では白地で読めないため
     --gold      … 数字と枠。文字に使える濃さ（白地で約5:1）
     --gold-line … 装飾の線だけに使う淡い金。文字には使わない
   ------------------------------------------------------------- */
:root{
  --bg:        #FBF8F6;   /* ページの地。ほんのり暖かい白 */
  --bg-deep:   #FBF8F6;   /* 旧名。互換のため同じ値にしてある */
  --bg-soft:   #F3EEF7;   /* 帯・沈めたい面。うすい藤 */
  --bg-card:   #FFFFFF;   /* カード面 */
  --bg-panel:  #FFFFFF;   /* 表など、情報を読ませる面 */
  --bg-mid:    #F0E8FA;

  --gold:      #8C6B12;   /* 数字と枠。白地で約5:1なので文字に使える */
  --gold-soft: #5F4FB0;   /* ★見出しの色＝紫。白地で約6.5:1 */
  --gold-line: #DCC178;   /* 装飾の線だけ。文字には使わない */
  --gold-dim:  rgba(95,79,176,.26);

  --text:      #2E2A3D;   /* 本文。真っ黒でなく紫みの濃灰。白地で約13:1 */
  --text-dim:  #6E6880;   /* 補足・注記。白地で約5:1 */
  --accent:    #6B5BC4;

  --line:      rgba(60,45,90,.14);  /* 罫線。紺×金のときの白い線の代わり */
  --line-2:    rgba(60,45,90,.08);  /* もっと薄い罫線 */

  --mincho: "Hiragino Mincho ProN", "HiraMinProN-W3", "Yu Mincho", "YuMincho", "MS PMincho", serif;
  --gothic: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", "Noto Sans JP", "Meiryo", sans-serif;

  --wrap: 960px;
  --r: 14px;
}

/* ---------- 2. リセットと土台 ---------- */
*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--gothic);
  font-size:16px;
  line-height:1.9;
  letter-spacing:.02em;
  overflow-x:hidden;          /* 星レイヤーがはみ出しても横スクロールさせない */
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; }
a{ color:var(--gold-soft); text-decoration:none; }
a:hover{ color:var(--gold); }

.wrap{ width:min(100% - 40px, var(--wrap)); margin-inline:auto; }

/* =====================================================
   3. 夜空（背景レイヤー）
   position:fixed の板を3枚重ねる。z-index を負にして本文の下へ敷く。
   ===================================================== */

/* 3-1. 一番下：ゆっくり流れる、やわらかい光のグラデーション
   ★動かすのは transform だけ。background-position を動かすと再計算で重くなる。 */
.sky{
  position:fixed;
  inset:-25% -5%;
  z-index:-3;
  background:
    radial-gradient(75% 52% at 50% 0%,   #FDF2E6 0%, transparent 62%),
    radial-gradient(62% 46% at 12% 88%,  #EFE6FB 0%, transparent 72%),
    radial-gradient(52% 40% at 92% 62%,  #FBE8F1 0%, transparent 74%),
    linear-gradient(170deg, #FDFBF8 0%, #F8F2F8 46%, #F2ECFA 100%);
  animation: skydrift 70s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes skydrift{
  from{ transform: translate3d(0, -2.5%, 0) scale(1.02); }
  to  { transform: translate3d(0,  2.5%, 0) scale(1.06); }
}

/* 3-2. 光のたまり
   ★白地では星の点は「ゴミ」に見えるので、大きくぼかした光の玉に変えている。
     やわらかい色の玉をタイルで敷き詰め、板ごとに違う周期で濃さを揺らす。 */
.stars{ position:fixed; inset:0; z-index:-2; pointer-events:none; }
.stars i{ position:absolute; inset:0; display:block; background-repeat:repeat; }
.stars i:nth-child(1){
  background-image:
    radial-gradient(46px 46px at 60px 80px,  rgba(212,175,55,.09), transparent 70%),
    radial-gradient(38px 38px at 210px 160px,rgba(107,91,196,.07), transparent 70%),
    radial-gradient(30px 30px at 130px 250px,rgba(226,154,203,.07), transparent 70%);
  background-size: 320px 320px;
  animation: twinkle 9s ease-in-out infinite;
}
.stars i:nth-child(2){
  background-image:
    radial-gradient(64px 64px at 260px 120px,rgba(123,108,214,.07), transparent 72%),
    radial-gradient(52px 52px at 90px 300px, rgba(255,214,160,.10), transparent 72%);
  background-size: 460px 440px;
  animation: twinkle 13s ease-in-out infinite;
  animation-delay:-4s;
}
.stars i:nth-child(3){
  background-image:
    radial-gradient(86px 86px at 380px 260px,rgba(226,154,203,.07), transparent 74%);
  background-size: 620px 580px;
  animation: twinkle 17s ease-in-out infinite;
  animation-delay:-9s;
}
@keyframes twinkle{
  0%,100%{ opacity:.55; }
  50%    { opacity:1;   }
}

/* 3-3. 小さな光の粒（ヒーローの中にだけ数個置く） */
.spark{
  position:absolute; width:6px; height:6px; border-radius:50%;
  background:radial-gradient(circle, rgba(212,175,55,.75) 0%, rgba(212,175,55,0) 70%);
  animation: spark 4.5s ease-in-out infinite;
}
@keyframes spark{
  0%,100%{ opacity:.25; transform:scale(.6); }
  45%    { opacity:1;   transform:scale(1.3); }
}

/* =====================================================
   4. ヘッダー
   ===================================================== */
.pr-note{
  font-size:11px; color:var(--text-dim); text-align:center;
  padding:7px 12px; letter-spacing:.04em;
  border-bottom:1px solid var(--line-2);
  background:var(--bg-soft);
}
.site-head{
  position:relative; z-index:5;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:16px 0;
}
.logo{
  font-family:var(--mincho);
  font-size:20px; letter-spacing:.22em;
  color:var(--gold-soft);
}
.logo small{
  display:block; font-family:var(--gothic);
  font-size:10px; letter-spacing:.14em; color:var(--text-dim);
  margin-top:3px; letter-spacing:.1em;
}
.site-head nav{ display:flex; gap:20px; font-size:13px; letter-spacing:.08em; }
.site-head nav a{ color:var(--text-dim); }
.site-head nav a:hover{ color:var(--gold-soft); }

/* ハンバーガーボタン。PCでは出さない */
.navbtn{
  display:none;
  width:42px; height:38px; padding:0;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
  background:transparent; border:1px solid var(--gold-dim);
  border-radius:9px; cursor:pointer;
}
.navbtn span{
  display:block; width:18px; height:1px; background:var(--gold-soft);
  transition:transform .3s cubic-bezier(.2,.7,.2,1), opacity .3s;
}
.navbtn[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.navbtn[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.navbtn[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* =====================================================
   5. ヒーロー
   ===================================================== */
.hero{
  position:relative;
  min-height:min(88vh, 720px);
  display:flex; flex-direction:column; justify-content:center;
  text-align:center;
  padding:56px 0 72px;
}

.hero h1{
  font-family:var(--mincho);
  font-weight:400;
  font-size:clamp(28px, 6.4vw, 52px);
  line-height:1.65;
  letter-spacing:.14em;
  margin:0 0 22px;
  text-shadow:0 2px 24px rgba(251,248,246,.9);
}
.hero h1 em{
  font-style:normal;
  color:var(--gold-soft);
}
/* ★h1を二段にする理由
   詩的なコピーだけだと、h1（ページ内で最強のSEOシグナル）に
   「電話占い」というキーワードが1文字も入らない。
   さらに読者も3秒で何のサイトか分からない。
   → 世界観の一行は残したまま、その下に説明の一行をh1の中に入れて両方を解決する。 */
.h1-poem{ display:block; }
.h1-key{
  display:block;
  position:relative;
  margin-top:24px; padding-top:24px;
  font-family:var(--gothic);
  font-size:clamp(12px, 2.7vw, 15px);
  font-weight:400;
  line-height:1.8;
  letter-spacing:.14em;
  color:var(--gold-soft);
  text-shadow:none;
}
.h1-key::before{
  content:''; position:absolute; top:0; left:50%;
  transform:translateX(-50%);
  width:46px; height:1px; background:var(--gold-dim);
}
.hero .lead{
  font-size:clamp(13px, 3.2vw, 16px);
  color:var(--text-dim);
  letter-spacing:.08em;
  margin:0 auto 34px;
  max-width:38em;
}
.hero .lead b{ color:var(--text); font-weight:600; }
/* 意味のかたまりを inline-block にして、途中で改行させない */
.hero .lead span{ display:inline-block; }

/* ★日本語の折り返しを賢くする
   auto-phrase = ブラウザが文節を判定して改行位置を選ぶ（Chrome 119以降）。
   対応していないブラウザは無視するだけなので、入れておいて損がない。 */
.hero .lead, .sec-lead, .finding h3, .finding p, .steps p, .svc-card p, .faq .a{
  word-break: auto-phrase;
}

/* CTAボタン：ホバーで金の光が横に流れる */
.btn{
  display:inline-block;
  padding:15px 38px;
  border:1px solid var(--gold);
  border-radius:999px;
  color:var(--gold-soft);
  font-family:var(--mincho);
  font-size:16px; letter-spacing:.16em;
  background:rgba(140,107,18,.06);
  position:relative; overflow:hidden;
  transition:color .4s, border-color .4s, box-shadow .4s;
}
.btn::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(100deg, transparent 20%, rgba(140,107,18,.22) 50%, transparent 80%);
  transform:translateX(-110%);
  transition:transform .8s cubic-bezier(.2,.7,.2,1);
}
.btn:hover{ color:var(--gold-soft); border-color:var(--gold-soft); box-shadow:0 6px 20px rgba(107,91,196,.20); }
.btn:hover::before{ transform:translateX(110%); }

/* スクロールを促す縦の金線（すーっと降りる） */
.scroll-hint{
  margin-top:52px; height:56px;
  display:flex; justify-content:center; align-items:flex-start;
}
.scroll-hint span{
  display:block; width:1px; height:100%;
  background:linear-gradient(180deg, var(--gold-line), transparent);
  animation: drop 2.6s ease-in-out infinite;
  transform-origin:top;
}
@keyframes drop{
  0%      { transform:scaleY(0); opacity:0; }
  35%     { transform:scaleY(1); opacity:1; }
  100%    { transform:scaleY(1); opacity:0; }
}

/* =====================================================
   6. セクション共通
   ===================================================== */
.sec{ padding:74px 0; position:relative; }

.sec-h{
  font-family:var(--mincho);
  font-weight:400;
  font-size:clamp(21px, 4.6vw, 30px);
  letter-spacing:.14em;
  margin:0 0 10px;
}
.sec-h .no{
  display:inline-block;
  font-size:12px; letter-spacing:.2em;
  color:var(--gold); vertical-align:middle;
  margin-right:14px;
}
/* 見出しの下の金線が、画面に入ったときに横へ伸びる */
.sec-h::after{
  content:''; display:block;
  width:100%; height:1px; margin-top:16px;
  background:linear-gradient(90deg, var(--gold-line), rgba(220,193,120,.08));
  transition:width 1.4s cubic-bezier(.2,.7,.2,1) .2s;
}
.js .sec-h::after{ width:0; }
.js [data-reveal].is-in .sec-h::after{ width:100%; }

.sec-lead{ color:var(--text-dim); font-size:14px; margin:0 0 34px; }

/* =====================================================
   7. スクロール出現（reveal.js が .is-in を付ける）
   ===================================================== */
/* ★「隠す」指定は .js の下にだけ置くこと。
   直接 [data-reveal]{opacity:0} と書くと、JSが動かない環境で
   本文が丸ごと消えて真っ暗なページになる。
   .js は <head> のインラインscriptで立てている。 */
[data-reveal]{ transition:opacity 1s ease, transform 1s cubic-bezier(.2,.7,.2,1); }
.js [data-reveal]{ opacity:0; transform:translateY(22px); }
.js [data-reveal].is-in{ opacity:1; transform:none; }

/* 子要素を順番に出す（表の行やカードに使う） */
.stagger > *{ transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.js .stagger > *{ opacity:0; transform:translateY(12px); }
.js [data-reveal].is-in .stagger > *{ opacity:1; transform:none; }
.js [data-reveal].is-in .stagger > *:nth-child(1){ transition-delay:.10s; }
.js [data-reveal].is-in .stagger > *:nth-child(2){ transition-delay:.19s; }
.js [data-reveal].is-in .stagger > *:nth-child(3){ transition-delay:.28s; }
.js [data-reveal].is-in .stagger > *:nth-child(4){ transition-delay:.37s; }
.js [data-reveal].is-in .stagger > *:nth-child(5){ transition-delay:.46s; }
.js [data-reveal].is-in .stagger > *:nth-child(6){ transition-delay:.55s; }

/* =====================================================
   8. 悩みから選ぶ（丸アイコン6つ）
   ★カード型から丸型に変更。横に並ぶと視線が流れて選びやすく、
     「まず自分の悩みを選ぶ」という入口の役割が強くなる。
   ===================================================== */
.worry{
  display:grid; gap:22px 10px;
  grid-template-columns:repeat(6, 1fr);
  list-style:none; padding:0; margin:0;
}
.worry a{ display:block; text-align:center; color:var(--text); padding:4px; }
.worry .ic{
  display:grid; place-items:center;
  width:78px; height:78px; margin:0 auto 14px;
  border-radius:50%;
  background:linear-gradient(160deg, rgba(255,232,190,.85), rgba(226,216,250,.85));
  border:1px solid var(--line);
  transition:transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s, border-color .45s;
}
.worry svg{ width:32px; height:32px; color:var(--gold-soft); }
.worry a:hover .ic{
  transform:translateY(-5px);
  border-color:var(--gold);
  box-shadow:0 12px 26px rgba(60,45,90,.10), 0 0 0 1px rgba(107,91,196,.18);
}
.worry b{
  display:block; font-family:var(--mincho);
  font-size:15px; letter-spacing:.08em; font-weight:400;
}
.worry span{
  display:block; font-size:11px; color:var(--text-dim);
  margin-top:5px; letter-spacing:.02em; line-height:1.6;
}

/* =====================================================
   8-b. プロフィールの見どころ（番号つきリスト）
   ===================================================== */
.look{ list-style:none; margin:0; padding:0; counter-reset:lk; display:grid; gap:8px; }
.look li{
  display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:start;
  padding:16px 18px; border-radius:var(--r);
  border:1px solid var(--line-2);
  background:var(--bg-card);
}
.look li::before{
  counter-increment:lk; content:counter(lk);
  width:24px; height:24px; margin-top:2px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(140,107,18,.10); border:1px solid var(--gold-dim);
  color:var(--gold-soft); font-size:12px; font-family:var(--mincho);
}
/* ★見出しと説明の2つを、どちらも2列目に置く。
   li の直下に3つ（::before / b / span）あるので、指定しないと
   span が2行目の1列目に落ちてレイアウトが崩れる。 */
.look b{
  grid-column:2; text-align:left;
  display:block; font-family:var(--mincho); font-weight:400;
  font-size:16px; letter-spacing:.08em; color:var(--gold-soft); margin-bottom:3px;
}
.look span{
  grid-column:2; text-align:left;
  font-size:13.5px; color:var(--text-dim); word-break: auto-phrase;
}
.look em{ font-style:normal; color:var(--gold-soft); }
/* 見なくていい項目は、あえて沈めて表示する */
.look li.skip{ background:transparent; border-style:dashed; }
.look li.skip::before{ content:'—'; background:transparent; border-color:var(--line); color:var(--text-dim); }
.look li.skip b{ color:var(--text-dim); }

/* =====================================================
   9. 実質1分料金の比較表（このサイトの核）
   ★ここだけは"神秘"より"読みやすさ"を優先する。
     背景をわずかに明るくして、数字をはっきり見せる。
   ===================================================== */
.note-warn{
  font-size:12px; color:var(--gold-soft);
  border:1px dashed var(--gold-dim);
  border-radius:10px;
  padding:10px 14px; margin:0 0 20px;
  background:rgba(140,107,18,.06);
}

.tscroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }

.ctable{
  width:100%; min-width:640px;
  border-collapse:separate; border-spacing:0;
  background:var(--bg-panel);
  border:1px solid var(--line);
  border-radius:var(--r);
  overflow:hidden;
  font-size:14px;
}
.ctable thead th{
  background:var(--bg-soft);
  color:var(--gold-soft);
  font-family:var(--mincho); font-weight:400;
  font-size:13px; letter-spacing:.1em;
  padding:14px 12px; text-align:center;
  border-bottom:1px solid var(--gold-dim);
  white-space:nowrap;
}
.ctable tbody td{
  padding:15px 12px; text-align:center;
  border-bottom:1px solid var(--line-2);
  vertical-align:middle;
}
.ctable tbody tr:last-child td{ border-bottom:0; }
.ctable tbody tr:hover td{ background:rgba(140,107,18,.045); }

.ctable .svc{ text-align:left; white-space:nowrap; }
/* スマホでだけ出す補足（表示料金と特典を1行にまとめたもの）
   ★セレクタに small を入れておくこと。
     下の .ctable .svc small が display:block を当てており、
     クラス2つだけの .ctable .sp-only では詳細度で負けてPCでも出てしまう。 */
.ctable .svc small.sp-only{ display:none; }
.ctable .svc b{
  display:block; font-family:var(--mincho);
  font-size:15px; font-weight:400; letter-spacing:.06em;
}
.ctable .svc small{
  display:block; font-size:11px; color:var(--text-dim); margin-top:2px;
}
.ctable .rank{
  width:44px; color:var(--gold);
  font-family:var(--mincho); font-size:17px;
}
.ctable .dim{ color:var(--text-dim); }
/* 実質1分料金＝この表で一番読ませたい列 */
.ctable .real{
  font-family:var(--mincho);
  font-size:22px; color:var(--gold);
  letter-spacing:.02em; white-space:nowrap;
}
.ctable .real i{ font-style:normal; font-size:12px; color:var(--gold-soft); margin-left:2px; }
/* 数字の下に置く但し書き（どの単価の先生で計算したか） */
.ctable .real .fx{
  display:block; font-family:var(--gothic);
  font-size:10.5px; color:var(--text-dim); letter-spacing:0;
  margin-top:3px; white-space:normal;
}
.ctable .unk{ color:var(--text-dim); font-size:12px; font-family:var(--gothic); }
/* 公式で裏が取れていない数字につけるしるし */
.chk{
  display:inline-block; font-size:9.5px; font-weight:400;
  color:#FFFFFF; background:var(--gold-soft);
  border-radius:3px; padding:1px 5px; margin-left:5px; vertical-align:1px;
}
.cardwarn{ font-size:11.5px; color:var(--text-dim); margin:10px 0 0 !important; }
/* 表の下に置く補足の一行 */
.note-sm{
  font-size:12px; color:var(--text-dim); line-height:1.9;
  margin:18px 0 0; word-break: auto-phrase;
}
.note-sm b{ color:var(--gold-soft); font-weight:600; }

/* 表の下の「気づき」ボックス */
.finding{
  margin-top:22px; padding:20px 22px;
  border-left:2px solid var(--gold);
  background:linear-gradient(90deg, rgba(140,107,18,.07), transparent 72%);
  border-radius:0 var(--r) var(--r) 0;
}
.finding h3{
  margin:0 0 8px; font-family:var(--mincho); font-weight:400;
  font-size:17px; letter-spacing:.1em; color:var(--gold-soft);
}
.finding p{ margin:0; font-size:14px; }
.finding strong{ color:var(--gold); font-weight:600; }

/* =====================================================
   9-b. グラフ
   ※「逆転ゾーンの帯」と「支払い曲線の折れ線」は2026-09-07に設計から外したので、
     その指定（.zonebar / .ln / .lb など）は削除した。
     いま使っているのは横棒（rangechart）と積み上げ（stackchart）の2つだけ。
   ===================================================== */
.chartwrap{ margin:0 0 8px; }
.chart{ width:100%; height:auto; display:block; overflow:visible; }
.chart .grid{ stroke:var(--line); stroke-width:1; }
.chart .edge{ stroke:rgba(140,107,18,.40); stroke-width:1; stroke-dasharray:3 4; }
.chart .ax{ fill:var(--text-dim); font-size:11px; font-family:var(--gothic); }
.chart .ax.unit{ fill:var(--text-dim); font-size:10px; }

/* 0円で話せる時間の横棒。棒の長さがそのまま結論になる */
.rangechart .nm{ fill:var(--gold-soft); font-family:var(--mincho); font-size:13.5px; letter-spacing:.06em; }
.rangechart .bar.hi{ fill:var(--gold); }
.rangechart .bar.lo{ fill:rgba(140,107,18,.24); }   /* 上限単価の先生だとここまで縮む */
.rangechart .bar.unk{ fill:var(--line-2); stroke:var(--line); stroke-dasharray:3 3; }
.rangechart .big{ fill:var(--gold-soft); font-size:14px; font-family:var(--mincho); }

/* 「最大◯円分」の分解。左から順に「初回に使える→条件つき→鑑定後」 */
.stackchart .seg.s1{ fill:var(--gold); }
.stackchart .seg.s2{ fill:rgba(140,107,18,.30); }
.stackchart .seg.s3{ fill:var(--line); }
/* 濃い金の上だけ文字を暗くする。半透明の帯の上で暗い文字にすると読めない */
.stackchart .segv{ fill:var(--text); font-size:13px; font-family:var(--mincho); font-weight:600; }
.stackchart .seg.s1 + .segv{ fill:#FFFFFF; }
.stackchart .segl{ fill:var(--text-dim); font-size:11.5px; font-family:var(--gothic); }
.chartwrap figcaption{
  font-size:12px; color:var(--text-dim); margin-top:12px; text-align:center;
  line-height:1.8; word-break: auto-phrase;
}
.chartwrap figcaption b{ color:var(--gold-soft); font-weight:600; }

/* =====================================================
   10. 各社カード
   ===================================================== */
.svc-card{
  display:grid;
  grid-template-columns:1fr 220px;
  gap:26px; align-items:center;
  padding:26px 28px; margin-bottom:18px;
  background:var(--bg-card);
  border:1px solid var(--line);
  border-radius:var(--r);
  transition:border-color .45s, box-shadow .45s;
}
.svc-card:hover{ border-color:var(--gold-dim); box-shadow:0 10px 26px rgba(60,45,90,.09); }
.svc-card h3{
  margin:0 0 4px; font-family:var(--mincho); font-weight:400;
  font-size:20px; letter-spacing:.1em;
}
.svc-card .tag{
  display:inline-block; font-size:11px; letter-spacing:.08em;
  color:var(--gold-soft); border:1px solid var(--gold-dim);
  border-radius:999px; padding:2px 11px; margin-bottom:12px;
}
.svc-card p{ margin:0 0 10px; font-size:14px; }
.svc-card ul{ margin:0; padding-left:1.2em; font-size:13px; color:var(--text-dim); }
.svc-card ul li{ margin-bottom:3px; }
.svc-card .side{ text-align:center; }
.svc-card .side .price{
  font-family:var(--mincho); font-size:30px; color:var(--gold);
  display:block; line-height:1.2;
}
.svc-card .side .price i{ font-style:normal; font-size:13px; color:var(--gold-soft); }
.svc-card .side .cap{ font-size:11px; color:var(--text-dim); display:block; margin-bottom:14px; }

/* 提携前の仮ボタン（リンク先が決まるまでの状態） */
.btn-sm{
  display:inline-block; width:100%;
  padding:11px 18px; border-radius:999px;
  border:1px solid var(--gold-dim);
  color:var(--gold-soft); font-size:13px; letter-spacing:.1em;
  transition:background .35s, border-color .35s;
}
.btn-sm:hover{ background:rgba(140,107,18,.12); border-color:var(--gold); }
.btn-sm.soon{
  border-style:dashed; color:var(--text-dim); cursor:not-allowed;
}
.btn-sm.soon:hover{ background:transparent; border-color:var(--gold-dim); }

/* =====================================================
   10-b. 鑑定の記録（明細）と、引用した投稿
   ★ここは「カード」ではなく「書類」に見せる。
     感想ではなく確かめられる事実を置く場所なので、
     レシートの見た目にして、飾りより数字の読みやすさを優先する。
   ===================================================== */
.kiroku{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:26px; align-items:start;
}

.receipt{
  background:var(--bg-panel);
  border:1px solid var(--gold-dim);
  border-radius:var(--r);
  padding:24px 26px;
  font-variant-numeric:tabular-nums;   /* 桁を縦に揃える */
}
.rc-head{
  display:flex; flex-wrap:wrap; gap:10px;
  justify-content:space-between; align-items:baseline;
  padding-bottom:14px; margin-bottom:16px;
  border-bottom:1px solid var(--gold-dim);
}
.rc-head b{
  font-family:var(--mincho); font-weight:400;
  font-size:17px; letter-spacing:.08em; color:var(--gold-soft);
}
.rc-head span{ font-size:11px; color:var(--text-dim); }

.rc-rows{ margin:0; display:grid; gap:10px; }
.rc-rows > div{ display:flex; align-items:baseline; gap:10px; font-size:14px; }
.rc-rows dt{ order:0; color:var(--text-dim); white-space:nowrap; }
/* 点線のリーダー。項目と金額を目で結ぶ */
.rc-rows > div::after{
  content:''; order:1; flex:1 1 auto;
  border-bottom:1px dotted var(--line);
  transform:translateY(-4px);
}
.rc-rows dd{ order:2; margin:0; white-space:nowrap; }
.rc-rows .minus dd{ color:var(--gold-soft); }
.rc-total{ margin-top:4px; padding-top:14px; border-top:1px solid var(--gold-dim); }
.rc-total dt{ color:var(--text); }
.rc-total dd{ font-family:var(--mincho); font-size:26px; color:var(--gold); line-height:1.2; }
.rc-total dd i{ font-style:normal; font-size:13px; color:var(--gold-soft); margin-left:2px; }

.rc-notes{
  margin:18px 0 0; padding:16px 0 0;
  border-top:1px dotted var(--line);
  list-style:none; font-size:12.5px; color:var(--text-dim);
  display:grid; gap:7px;
}
.rc-notes li::before{ content:'・'; color:var(--gold); }

.sub-h{
  font-family:var(--mincho); font-weight:400;
  font-size:15px; letter-spacing:.1em; color:var(--gold-soft);
  margin:28px 0 12px;
}

/* 引用した投稿。実在のものだけを載せる */
.voice{
  margin:0 0 14px; padding:18px 20px;
  border-left:2px solid var(--accent);
  background:rgba(107,91,196,.07);
  border-radius:0 10px 10px 0;
}
.voice blockquote{ margin:0 0 10px; font-size:14px; }
.voice figcaption{ font-size:11.5px; color:var(--text-dim); }
/* まだ実物が無いときの空枠（捏造しないための状態） */
.voice.empty{
  border-left-style:dashed; border-left-color:var(--gold-dim);
  background:transparent;
}
.voice.empty p{ margin:0; font-size:13px; color:var(--text-dim); }

.cite-rule{
  font-size:12px; color:var(--text-dim); line-height:1.85;
  border:1px dashed var(--line);
  border-radius:10px; padding:13px 16px; margin:0;
  word-break: auto-phrase;
}
.cite-rule b{ color:var(--gold-soft); }

/* =====================================================
   使える道具の1行（ヒーロー直後）
   ★写真を使わない。ランキングの写真カード列と強さを争わせないため。
   ===================================================== */
.tools{ margin:0 auto 6px; padding:0; }
.tools-t{
  margin:0 0 12px; text-align:center;
  font-size:11.5px; letter-spacing:.18em; color:var(--text-dim);
}
.tools-l{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:1fr 1fr; gap:14px;
}
.tools-l li{ display:flex; }
.tools-l a{
  position:relative;
  display:grid; grid-template-columns:auto 1fr; gap:4px 14px;
  align-content:start; width:100%;
  padding:18px 20px;
  background:var(--bg-card);
  border:1px solid var(--line);
  border-radius:var(--r);
  color:var(--text);
  transition:transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s, border-color .45s;
}
.tools-l a:hover{
  transform:translateY(-4px);
  border-color:var(--gold-line);
  box-shadow:0 14px 30px rgba(60,45,90,.10);
}
.tl-ic{
  grid-row:1 / span 2;
  display:grid; place-items:center;
  width:44px; height:44px; border-radius:50%;
  background:linear-gradient(160deg, rgba(255,232,190,.85), rgba(226,216,250,.85));
  border:1px solid rgba(60,45,90,.07);
  color:var(--gold-soft);
}
.tl-ic svg{ width:22px; height:22px; }
.tl-b{
  grid-column:2;
  font-family:var(--mincho); font-size:15.5px; letter-spacing:.06em;
  line-height:1.6; word-break:auto-phrase;
}
.tl-d{
  grid-column:2;
  font-size:11.5px; line-height:1.85; color:var(--text-dim);
  word-break:auto-phrase;
}
/* ★押す前に知りたいことだけをバッジにする（お金と時間） */
.tl-tags{ grid-column:2; display:flex; gap:6px; margin-top:8px; }
.tl-tags i{
  font-style:normal; font-size:10.5px; letter-spacing:.04em;
  padding:2px 9px; border-radius:999px;
  background:var(--bg-soft); color:var(--gold-soft);
}

@media (max-width:760px){
  .tools-l{ grid-template-columns:1fr; gap:10px; }
  .tools-l a{ padding:15px 16px; gap:3px 12px; }
  .tl-ic{ width:38px; height:38px; }
  .tl-ic svg{ width:19px; height:19px; }
  .tl-b{ font-size:14px; }
}

/* =====================================================
   吉方位ツール（仕組みは assets/js/kyusei.js と houi.js）
   ★盤は南が上。CSSの並びもそのまま 3×3 で組んである
   ===================================================== */
.ho-wrap{ max-width:620px; margin:0 auto; }

/* 入力 */
.ho-form{
  background:var(--bg-card); border:1px solid var(--line);
  border-radius:var(--r); padding:22px 20px; text-align:center;
}
.ho-form.is-done{ padding:16px 20px; }
.ho-q{ margin:0 0 12px; font-size:13px; color:var(--text-dim); letter-spacing:.06em; }
.ho-selects{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
.ho-selects select{
  font:inherit; font-size:15px; color:var(--text);
  padding:10px 12px; border:1px solid var(--line); border-radius:9px;
  background:#fff; min-width:92px;
}
.ho-selects select:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.ho-btn{ margin:16px 0 0; }
.ho-err{ margin:12px 0 0; font-size:13px; color:#B3261E; }
.ho-priv{ margin:12px 0 0; font-size:11.5px; color:var(--text-dim); line-height:1.7; }
.ho-nojs{ margin:14px 0 0; font-size:12.5px; color:var(--text-dim); text-align:center; }
.js .ho-nojs{ display:none; }

/* 結果 */
.ho-out{ margin-top:18px; }
.ho-me{ text-align:center; margin-bottom:18px; }
.ho-melab{ margin:0; font-size:11.5px; color:var(--text-dim); letter-spacing:.1em; }
.ho-mestar{ margin:4px 0 2px; font-family:var(--mincho); font-size:26px; color:var(--gold-soft); }
.ho-meword{ margin:0; font-size:12.5px; color:var(--text-dim); }

/* 日付をめくる */
.ho-nav{ display:flex; align-items:center; justify-content:center; gap:14px; margin-bottom:14px; }
.ho-arrow{
  width:36px; height:36px; border-radius:50%; border:1px solid var(--line);
  background:#fff; color:var(--gold-soft); font-size:19px; line-height:1; cursor:pointer;
}
.ho-arrow:hover{ background:var(--bg-soft); }
.ho-date{ font-size:15px; font-weight:700; }
.ho-date em{
  font-style:normal; font-size:10.5px; margin-left:7px; padding:2px 7px;
  background:var(--gold-soft); color:#fff; border-radius:999px; vertical-align:2px;
}
.ho-lead{ margin:0 0 16px; text-align:center; font-size:14.5px; line-height:1.9; }
.ho-lead b{ color:var(--gold-soft); font-size:17px; }

/* 方位盤 */
.ho-ban{
  display:grid; grid-template-columns:repeat(3,1fr); gap:7px;
  max-width:400px; margin:0 auto;
}
.ho-cell{
  background:#fff; border:1px solid var(--line); border-radius:11px;
  padding:11px 5px; text-align:center; min-height:76px;
  display:flex; flex-direction:column; justify-content:center; gap:3px;
}
.ho-cell .ho-dn{ font-size:11px; color:var(--text-dim); }
.ho-cell b{ font-size:14.5px; font-weight:700; }
.ho-cell i{ font-style:normal; font-size:10.5px; }
.ho-cell.ho-c{ background:var(--bg-soft); border-style:dashed; }
.ho-cell.ho-c b{ color:var(--gold-soft); }
.ho-cell.ho-c span{ font-size:10.5px; color:var(--text-dim); }

.ho-cell.is-kichi{ background:#F1F7F1; border-color:#9CC79C; }
.ho-cell.is-kichi i{ color:#2E6B3A; font-weight:700; }
.ho-cell.is-kichi.lv2{ background:#E6F3E7; }
.ho-cell.is-kichi.lv3{ background:#D8EDDA; box-shadow:0 0 0 2px #9CC79C inset; }
.ho-cell.is-kyo{ background:#FAF2F2; border-color:#E0BEBE; }
.ho-cell.is-kyo i{ color:#9A3C3C; }
.ho-cell.is-kyo b{ color:#7A5A5A; }

.ho-note2{ margin:11px 0 0; text-align:center; font-size:11.5px; color:var(--text-dim); }
.ho-note2 b{ color:var(--gold-soft); }

/* 凶方位の内訳 */
.ho-kyo{ margin-top:18px; padding:14px 16px; background:var(--bg-soft); border-radius:11px; }
.ho-kyo h4{ margin:0 0 8px; font-size:12.5px; color:var(--gold-soft); }
.ho-kyo ul{ margin:0; padding:0; list-style:none; font-size:12.5px; line-height:1.95; }
.ho-kyo li b{ display:inline-block; min-width:3.4em; color:var(--text); }

/* 1週間 */
.ho-week{ margin-top:20px; }
.ho-week h4{ margin:0 0 9px; font-size:12.5px; color:var(--gold-soft); text-align:center; }
.ho-days{ display:grid; grid-template-columns:repeat(7,1fr); gap:5px; }
.ho-day{
  border:1px solid var(--line); border-radius:9px; background:#fff;
  padding:8px 2px; cursor:pointer; text-align:center; font:inherit;
  display:flex; flex-direction:column; gap:3px;
}
.ho-day span{ font-size:10.5px; color:var(--text-dim); }
.ho-day b{ font-size:10.5px; color:var(--text-dim); font-weight:400; line-height:1.4; }
.ho-day.has{ background:#F1F7F1; border-color:#9CC79C; }
.ho-day.has b{ color:#2E6B3A; font-weight:700; }
.ho-day:hover{ border-color:var(--accent); }

/* 先生へつなぐ */
.ho-cta{
  margin-top:20px; padding:16px 18px; text-align:center;
  border:1px dashed var(--gold-line); border-radius:12px;
}
.ho-cta p{ margin:0; font-size:13.5px; line-height:1.9; }
.ho-cta b{ color:var(--gold-soft); }
.ho-ctab{ margin-top:12px !important; }

.ho-discl{
  margin:14px 0 0; font-size:11px; color:var(--text-dim); line-height:1.75;
  text-align:center;
}

/* 共有用リンク（2026-09-22）。押すとURLをコピーするだけの軽いボタン */
.ho-share{ margin:16px 0 0; text-align:center; }
.ho-share-b{
  font:inherit; font-size:12.5px; color:var(--gold-soft);
  background:transparent; border:1px solid var(--gold-dim); border-radius:999px;
  padding:8px 18px; cursor:pointer; transition:background .3s, border-color .3s;
}
.ho-share-b:hover{ background:rgba(140,107,18,.08); border-color:var(--gold); }
.ho-share-note{ margin-left:8px; font-size:11.5px; color:var(--text-dim); }

@media (max-width:520px){
  .ho-selects select{ min-width:0; flex:1; }
  .ho-cell{ min-height:66px; padding:8px 3px; }
  .ho-cell b{ font-size:12.5px; }
  .ho-cell .ho-dn{ font-size:10px; }
  .ho-day b{ font-size:9.5px; }
}

/* -----------------------------------------------------
   Xのポストの埋め込み（仕組みは assets/js/xpost.js の頭に書いてある）
   ★中に原文を書いておくのが肝。Xのスクリプトが動けば本物の箱に化け、
     動かない／ポストが消されたときは、この引用がそのまま残る。
   ----------------------------------------------------- */
.xpost{ margin:0 0 14px; }

/* ① 埋め込みが出る前と、出せなかったとき。
      読む人にとっては同じ「引用」なので .voice と同じ見た目にそろえる */
.xpost blockquote.twitter-tweet{
  margin:0; padding:18px 20px;
  border:0; border-left:2px solid var(--accent);
  background:rgba(107,91,196,.07);
  border-radius:0 10px 10px 0;
  font-size:14px; line-height:1.9; color:var(--text);
}
.xpost blockquote.twitter-tweet p{ margin:0 0 10px; }
.xpost blockquote.twitter-tweet a{ color:var(--gold-soft); }

/* ② Xが本物に差し替えたあと。
      ★差し替え後は blockquote ではなく div.twitter-tweet-rendered になるので、
        ①の指定（blockquote から書いてある）は自然に外れる */
.xpost .twitter-tweet-rendered{ margin:0 auto !important; }

/* ③ 埋め込みを出せなかったときだけ見せる一行 */
.xpost-note{ display:none; margin:7px 0 0; font-size:11.5px; color:var(--text-dim); }
.xpost.is-fallback .xpost-note{ display:block; }


/* =====================================================
   10-c. 対になる2つを並べる（命術と卜術など）
   ===================================================== */
.pair{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.pair > div{
  padding:26px 24px;
  background:var(--bg-card);
  border:1px solid var(--line);
  border-radius:var(--r);
}
.pair h3{
  margin:0 0 4px; font-family:var(--mincho); font-weight:400;
  font-size:19px; letter-spacing:.1em; color:var(--gold-soft);
}
.pair .yomi{ display:block; font-size:11px; color:var(--text-dim); margin-bottom:14px; letter-spacing:.08em; }
.pair .what{ font-size:13px; color:var(--text-dim); margin:0 0 14px; }
.pair ul{ margin:0; padding-left:1.2em; font-size:13.5px; }
.pair ul li{ margin-bottom:5px; }
.pair .ex{
  margin:16px 0 0; padding-top:14px;
  border-top:1px dotted var(--line);
  font-size:12.5px; color:var(--text-dim);
}
.pair .ex b{ color:var(--gold-soft); font-weight:600; }

/* 悪い聞き方／良い聞き方 */
.ask{ display:grid; gap:14px; margin:0 0 22px; }
.ask > div{
  display:grid; grid-template-columns:auto 1fr auto;
  gap:14px; align-items:center;
  padding:16px 20px; border-radius:var(--r);
  border:1px solid var(--line);
  font-size:14px;
}
.ask .mk{ font-family:var(--mincho); font-size:20px; line-height:1; }
.ask .to{ font-size:12px; color:var(--text-dim); white-space:nowrap; }
.ask .bad{ background:var(--bg-soft); }
.ask .bad .mk{ color:var(--text-dim); }
.ask .bad q{ color:var(--text-dim); }
.ask .good{ background:rgba(140,107,18,.06); border-color:var(--gold-dim); }
.ask .good .mk{ color:var(--gold); }
.ask .good q{ color:var(--text); }
.ask q{ quotes:"「" "」"; }

@media (max-width:760px){
  .pair{ grid-template-columns:1fr; }
  .ask > div{ grid-template-columns:auto 1fr; }
  .ask .to{ grid-column:2; margin-top:2px; }
}

/* =====================================================
   11. 選び方の3ステップ
   ===================================================== */
.steps{
  display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
  list-style:none; padding:0; margin:0;
  counter-reset:step;
}
.steps li{
  position:relative;
  padding:30px 22px 24px;
  background:var(--bg-card);
  border:1px solid var(--line-2);
  border-radius:var(--r);
}
.steps li::before{
  counter-increment:step;
  content:counter(step,decimal-leading-zero);
  position:absolute; top:-14px; left:22px;
  font-family:var(--mincho); font-size:26px; color:var(--gold);
  background:var(--bg); padding:0 10px; line-height:1;
}
.steps h3{
  margin:0 0 8px; font-family:var(--mincho); font-weight:400;
  font-size:16px; letter-spacing:.1em; color:var(--gold-soft);
}
.steps p{ margin:0; font-size:13px; color:var(--text-dim); }

/* =====================================================
   12. よくある質問（<details> のアコーディオン）
   ===================================================== */
.faq details{
  border-bottom:1px solid var(--line);
}
.faq summary{
  list-style:none; cursor:pointer;
  padding:19px 40px 19px 26px;
  position:relative;
  font-family:var(--mincho); font-size:15px; letter-spacing:.06em;
  transition:color .3s;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::before{
  content:'Q'; position:absolute; left:0; top:19px;
  font-family:var(--mincho); color:var(--gold); font-size:14px;
}
/* ＋ が × に回る */
.faq summary::after{
  content:''; position:absolute; right:6px; top:50%;
  width:11px; height:11px; margin-top:-5px;
  background:
    linear-gradient(var(--gold),var(--gold)) center/100% 1px no-repeat,
    linear-gradient(var(--gold),var(--gold)) center/1px 100% no-repeat;
  transition:transform .4s cubic-bezier(.2,.7,.2,1);
}
.faq details[open] summary::after{ transform:rotate(135deg); }
.faq summary:hover{ color:var(--gold-soft); }
.faq .a{
  padding:0 26px 22px;
  font-size:14px; color:var(--text-dim);
}

/* =====================================================
   13. フッター
   ===================================================== */
.site-foot{
  margin-top:40px; padding:44px 0 34px;
  border-top:1px solid var(--line);
  background:var(--bg-soft);
  font-size:12px; color:var(--text-dim);
}
.site-foot .fnav{ display:flex; flex-wrap:wrap; gap:18px; margin-bottom:18px; }
.site-foot .fnav a{ color:var(--text-dim); }
.site-foot .fnav a:hover{ color:var(--gold-soft); }
.site-foot p{ margin:0 0 8px; }
.site-foot .copy{ margin-top:20px; letter-spacing:.08em; }

/* =====================================================
   13-b. スクロール後に出るCTAバー
   ヒーローを通り過ぎたら出て、フッターに着いたら引っ込む。
   ===================================================== */
.fbar{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  background:rgba(251,248,246,.94);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-top:1px solid var(--gold-dim);
  transform:translateY(100%);
  transition:transform .45s cubic-bezier(.2,.7,.2,1);
}
.fbar.is-on{ transform:translateY(0); }
.fbar-in{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:12px 0;
}
.fbar-t{ font-size:13px; color:var(--text-dim); letter-spacing:.04em; }
.fbar-t b{ color:var(--gold-soft); font-weight:600; }
.btn-f{
  flex:none;
  padding:10px 24px; border-radius:999px;
  border:1px solid var(--gold); color:var(--gold-soft);
  background:rgba(140,107,18,.07);
  font-family:var(--mincho); font-size:14px; letter-spacing:.12em;
  white-space:nowrap;
  transition:background .35s, color .35s;
}
.btn-f:hover{ background:rgba(140,107,18,.14); color:var(--gold-soft); }

/* =====================================================
   14. レスポンシブ
   ===================================================== */
@media (max-width:760px){
  /* ★スマホでは表を横スクロールさせない。
     横スクロールする表は「スクロールできること自体に気づかれない」ので、
     このサイトの売りである実質1分料金が最後まで読まれずに終わる。
     → 途中の3列（表示料金・初回特典・30分の総額）を隠し、
       サービス名の下に1行でまとめて出す。 */
  .ctable{ min-width:0; font-size:13px; }
  .ctable .c-hide{ display:none; }
  .ctable .svc small.sp-only{ display:block; font-size:10.5px; color:var(--gold-soft); margin-top:4px; }
  .ctable .svc{ white-space:normal; }
  .ctable thead th, .ctable tbody td{ padding:12px 7px; }
  .ctable .real{ font-size:19px; }
  .ctable .rank{ width:28px; }

  .chart .ax{ font-size:13px; }
  .chart .lb{ font-size:14px; }

  .kiroku{ grid-template-columns:1fr; gap:20px; }
  .receipt{ padding:20px 18px; }
  .sub-h{ margin-top:22px; }

  .worry{ grid-template-columns:repeat(3,1fr); gap:18px 6px; }
  .worry .ic{ width:64px; height:64px; margin-bottom:10px; }
  .worry svg{ width:27px; height:27px; }
  .worry b{ font-size:13.5px; }
  .worry span{ font-size:10.5px; }
  .look li{ padding:14px 15px; gap:11px; }
  .steps{ grid-template-columns:1fr; }
  .svc-card{ grid-template-columns:1fr; gap:18px; }
  .svc-card .side{ border-top:1px solid var(--line); padding-top:16px; }
  /* ナビはハンバーガーに畳む。
     ★畳むのは .js のときだけ。JSが無い環境で消すと回遊できなくなる。 */
  .js .navbtn{ display:flex; }
  .js .site-head nav{ display:none; }
  .js .site-head nav.is-open{ display:flex; }
  .site-head nav{
    position:absolute; top:100%; right:20px; left:20px;
    flex-direction:column; gap:0; z-index:30;
    background:var(--bg-card);
    border:1px solid var(--gold-dim); border-radius:var(--r);
    padding:6px 0;
    box-shadow:0 18px 36px rgba(60,45,90,.16);
  }
  .site-head nav a{ padding:13px 20px; }

  .fbar-t{ font-size:12px; }
  .btn-f{ padding:10px 18px; font-size:13px; }
  /* CTAバーがフッターの文字に重ならないよう下を空ける */
  .site-foot{ padding-bottom:82px; }

  .sec{ padding:56px 0; }
}

/* =====================================================
   15. 動きを減らす設定への対応（必須）
   OSで「視差効果を減らす」を選んでいる人には、動きを一切見せない。
   入れないと、動きで気分が悪くなる読者を取りこぼす。
   ===================================================== */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation:none !important;
    transition:none !important;
  }
  .js [data-reveal]{ opacity:1 !important; transform:none !important; }
  .js .stagger > *{ opacity:1 !important; transform:none !important; }
  .sec-h::after, .js .sec-h::after{ width:100% !important; }
  html{ scroll-behavior:auto; }
}

/* =====================================================
   16. 2026-09-18：デザインボード（明るい版）の取り込み
   ★ここは「あとから上書きする」ための追記ブロック。
     CSSは後ろに書いたものが勝つので、上の古い指定を消さずに済む。
     スマホ用の指定も、このブロックの中に自前の @media を置いている
     （上の @media より後ろに無いと、スマホ指定がPC指定に負けてしまう）。
   ===================================================== */

/* ---- 16-1. ヒーロー：写真を帯にして、文字と一体にする ----
   ★2026-09-18改訂。写真を右に「置く」と、四角い板を貼ったように見えて
     文字と写真が別物になる。ヒーロー全体に写真を敷き、左側だけ地の色へ
     溶かして、その上に文字を置く形にした（デザインボードと同じ作り）。 */
.hero{
  position:relative;
  display:flex; flex-direction:column; justify-content:center;
  min-height:min(72vh, 600px);
  padding:52px 0 60px;
  text-align:left;
  overflow:hidden;              /* 帯の写真がページからはみ出さないように */
}
.hero-bg{
  position:absolute; inset:0; z-index:-1;
  /* ★下端を「消す」。色で塗って隠すのではなく、写真そのものを
     だんだん透明にして、ページの地（動いている光の層）に溶かす。
     色で塗ると、地の色とわずかに違って一本の線に見えてしまう。 */
  -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 58%, rgba(0,0,0,.45) 84%, transparent 100%);
          mask-image:linear-gradient(180deg, #000 0%, #000 58%, rgba(0,0,0,.45) 84%, transparent 100%);
}
.hero-bg img{
  width:100%; height:100%; display:block;
  object-fit:cover;             /* 枠の形に合わせて写真を切り抜く（縦横比は保つ） */
  object-position:78% center;   /* 右側の人物を必ず画面に残す */
}
/* ★写真を地に溶かす2枚のグラデーション。
   1枚目＝左から右へ。文字が乗るところを地の色で薄く覆って読めるようにする。
   2枚目＝上と下。ヘッダーと次のセクションへ、境目なくつながるようにする。 */
.hero-bg::after{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(94deg,
      var(--bg) 3%,
      rgba(251,248,246,.94) 24%,
      rgba(251,248,246,.60) 42%,
      rgba(251,248,246,.14) 62%,
      rgba(251,248,246,0)   78%),
    linear-gradient(180deg,
      rgba(251,248,246,.65) 0%,
      rgba(251,248,246,0)  18%);
}
.hero-in{ position:relative; }
.hero-txt{ text-align:left; max-width:min(56%, 540px); }

/* ＼ ／ で挟む一行。ボードから取り入れた、いちばん上の小さな文字 */
.hero-eyebrow{
  display:flex; align-items:center; gap:10px;
  margin:0 0 20px;
  font-size:12px; letter-spacing:.18em; color:var(--text-dim);
}
.hero-eyebrow::before,
.hero-eyebrow::after{
  content:''; height:1px; width:26px; background:var(--gold-line);
}
.hero-eyebrow::after{ flex:0 0 auto; }

/* ★2カラムにすると横幅が狭くなるので、h1の文字を少し小さく・字間を詰める。
   これをしないと「ひとりで決めなく／ていい。」という不自然な位置で折り返す。
   word-break:auto-phrase は、ブラウザが文節を見て改行位置を選んでくれる保険。 */
.hero h1{
  text-align:left;
  font-size:clamp(25px, 3.0vw, 37px);
  letter-spacing:.10em;
  word-break:auto-phrase;
}
.h1-key::before{ left:0; transform:none; }   /* 見出し下の短い線を左寄せに */
.hero .lead{ margin-left:0; margin-right:0; max-width:26em; }
.hero-cta{ margin:0; }

/* 画面が狭い横幅では、写真の切り抜きで人物が寄ってくるので、
   帯を浅くして文字の逃げ場を作る */
@media (max-width:1040px) and (min-width:761px){
  .hero{ min-height:min(58vh, 450px); }
  .hero-bg img{ object-position:88% center; }
  .hero-txt{ max-width:60%; }
}

/* ---- 16-2. このページで分かること（写真カード） ---- */
.pcards{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4, 1fr); gap:18px;
}
.pcards li{ display:flex; }
.pcards a{
  position:relative; display:flex; flex-direction:column;
  width:100%; padding-bottom:40px;
  background:var(--bg-card);
  border:1px solid var(--line);
  border-radius:var(--r);
  overflow:hidden;
  color:var(--text);
  transition:transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s, border-color .45s;
}
.pcards .ph{ display:block; aspect-ratio:16/9; overflow:hidden; background:var(--bg-soft); }
.pcards .ph img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .8s cubic-bezier(.2,.7,.2,1);
}
.pcards .tag{
  align-self:flex-start;
  margin:13px 14px 0; padding:3px 11px;
  border-radius:999px;
  font-size:10.5px; letter-spacing:.06em; line-height:1.7;
  background:var(--bg-soft); color:var(--gold-soft);
}
.pcards .tag.t1{ background:#FCE7EE; color:#A8426A; }
.pcards .tag.t2{ background:#EDE7FB; color:#5F4FB0; }
.pcards .tag.t3{ background:#E4EDFA; color:#2C6490; }
.pcards .tag.t4{ background:#FBF1DE; color:#8C6B12; }
.pcards b{
  display:block; margin:9px 14px 0;
  font-family:var(--mincho); font-weight:400;
  font-size:15px; line-height:1.72; letter-spacing:.04em;
}
.pcards .d{
  display:block; margin:8px 14px 0;
  font-size:11.5px; line-height:1.85; color:var(--text-dim);
  word-break:auto-phrase;
}
.pcards .ar{
  position:absolute; right:12px; bottom:11px;
  width:26px; height:26px; border-radius:50%;
  border:1px solid var(--line);
  display:grid; place-items:center;
  font-size:11px; color:var(--gold-soft);
  transition:background .35s, border-color .35s;
}
.pcards a:hover{
  transform:translateY(-5px);
  border-color:var(--gold-line);
  box-shadow:0 16px 34px rgba(60,45,90,.11);
}
.pcards a:hover .ph img{ transform:scale(1.06); }
.pcards a:hover .ar{ background:rgba(107,91,196,.10); border-color:var(--gold-line); }

/* ---- 16-3. 悩みの丸アイコンに、ボードのパステル6色を当てる ---- */
.worry .w1 .ic, .worry.w1 .ic{ background:linear-gradient(160deg,#FFF3F7,#FCE1EB); }
.worry .w2 .ic{ background:linear-gradient(160deg,#F7F3FE,#EAE1FB); }
.worry .w3 .ic{ background:linear-gradient(160deg,#FFF9EE,#FAEFD8); }
.worry .w4 .ic{ background:linear-gradient(160deg,#F2F7FE,#DFE9F9); }
.worry .w5 .ic{ background:linear-gradient(160deg,#F2F9F3,#E1EFE4); }
.worry .w6 .ic{ background:linear-gradient(160deg,#FFF5EE,#FBE6D8); }
.worry .w1 svg{ color:#B94E76; }
.worry .w2 svg{ color:#6B5BC4; }
.worry .w3 svg{ color:#A2761A; }
.worry .w4 svg{ color:#2C6490; }
.worry .w5 svg{ color:#3C8159; }
.worry .w6 svg{ color:#B86A2E; }
.worry .ic{ border-color:rgba(60,45,90,.07); }

/* ---- 16-4. フッターを夜で締める ---- */
/* 白 → 藤 → 紺 へ落とす帯。これが無いと、白い本文と紺のフッターが
   ハサミで切ったような境目になる。 */
.foot-dawn{
  height:clamp(90px, 14vw, 150px);
  background:linear-gradient(180deg,
      rgba(251,248,246,0) 0%,
      #F3EBF9 28%,
      #CDC0E6 52%,
      #6E5F98 72%,
      #2C2552 90%,
      #171334 100%);
  margin-top:60px;
}
.site-foot{
  position:relative;
  margin-top:0;
  padding:46px 0 36px;
  border-top:0;
  background:linear-gradient(180deg, #171334 0%, #0B0B2B 100%);
  color:rgba(237,231,246,.74);
}
.site-foot::before{
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(212,175,55,.55), transparent);
}
.site-foot .fnav a{ color:#E6D7A8; }
.site-foot .fnav a:hover{ color:#FFFFFF; }
.site-foot p{ color:rgba(237,231,246,.62); }
.site-foot .copy{ color:rgba(237,231,246,.48); }

/* ---- 16-5. スマホ（760px以下） ---- */
@media (max-width:760px){
  /* ★スマホでは文字を写真に重ねない（帯が縦に短くなり、必ずどこかで
     人物と文字がぶつかるため）。写真を上に敷き、その下に文字を置く。
     写真の下側を地の色へ溶かしているので、切り貼りには見えない。 */
  .hero{ display:block; min-height:0; padding:0 0 44px; }
  .hero-bg{ position:relative; inset:auto; z-index:auto; height:286px; margin-bottom:24px; }
  .hero-bg img{ object-position:74% center; }
  .hero-bg::after{
    background:linear-gradient(180deg,
      rgba(251,248,246,.30) 0%,
      rgba(251,248,246,0)  30%);
  }
  .hero-bg{
    /* スマホは帯の上もヘッダーに溶かす（上端に線が出ないように） */
    -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 9%, #000 50%, rgba(0,0,0,.40) 82%, transparent 100%);
            mask-image:linear-gradient(180deg, transparent 0%, #000 9%, #000 50%, rgba(0,0,0,.40) 82%, transparent 100%);
  }
  .hero-txt{ max-width:none; text-align:center; }
  .hero h1{ text-align:center; font-size:clamp(22px, 6.1vw, 27px); letter-spacing:.09em; }
  .h1-key::before{ left:50%; transform:translateX(-50%); }
  .hero .lead{ margin-inline:auto; }
  .hero-eyebrow{ justify-content:center; }

  .pcards{ grid-template-columns:repeat(2, 1fr); gap:12px; }
  .pcards b{ font-size:13.5px; margin-inline:11px; }
  .pcards .d{ font-size:11px; margin-inline:11px; }
  .pcards .tag{ margin-inline:11px; }

  .foot-dawn{ margin-top:36px; }
}

/* =====================================================
   17. 2026-09-18（第2稿）：モックアップの配置に合わせた追加
   ・ページの地図（細い文字リンク）
   ・人気ランキング（順位バッジつきカード）
   ・帯の背景（セクションを全幅の淡い面で沈める）
   ・3つの約束（FEATURE帯）
   ===================================================== */

/* ---- 17-2. 帯の背景（全幅） ----
   .sec は .wrap で幅960pxに絞ってあるので、背景だけ 100vw に広げる。
   body に overflow-x:hidden があるので横スクロールは出ない。 */
.sec.band::before{
  content:''; position:absolute; z-index:-1;
  top:0; bottom:0; left:50%; transform:translateX(-50%);
  width:100vw;
  background:linear-gradient(180deg, rgba(243,238,247,0), rgba(243,238,247,.85) 18%, rgba(243,238,247,.85) 82%, rgba(243,238,247,0));
}

/* ---- 17-3. 人気ランキングのカード ----
   ★各社カードに雰囲気写真を敷くのはやめた。
     会社と関係のない写真は「その会社の写真」と誤解される余地があるため。
     代わりに、いちばん読ませたい数字そのものを写真の位置に置く。 */
.rcards .rk{
  position:absolute; top:10px; left:10px; z-index:2;
  width:26px; height:26px; border-radius:50%;
  display:grid; place-items:center;
  font-family:var(--mincho); font-size:14px; line-height:1;
  color:#FFFFFF; background:var(--gold-soft);
  box-shadow:0 2px 8px rgba(60,45,90,.22);
}
.rcards a:nth-child(n) .rk{ }
.rcards .ph.num{
  display:grid; place-content:center; gap:2px;
  aspect-ratio:16/9; text-align:center;
}
.rcards .ph.num b{
  font-family:var(--mincho); font-weight:400;
  font-size:34px; line-height:1.1; color:var(--gold);
}
.rcards .ph.num b i{ font-style:normal; font-size:14px; margin-left:2px; color:var(--gold-soft); }
.rcards .ph.num small{ font-size:10.5px; color:var(--text-dim); letter-spacing:.06em; }
.rcards .ph.n1{ background:linear-gradient(160deg,#FFF6E8,#F6E7F3); }
.rcards .ph.n2{ background:linear-gradient(160deg,#F6F1FE,#E9E2FA); }
.rcards .ph.n3{ background:linear-gradient(160deg,#F1F7FE,#E2EBF8); }
.rcards .ph.n4{ background:linear-gradient(160deg,#FFF8EC,#F6EEDD); }
.rcards b{ font-size:16px; }
.rcards a{ background:var(--bg-card); }

/* ---- 17-4. 3つの約束（FEATURE帯） ---- */
.feat{ position:relative; padding:78px 0; }
.feat::before{
  content:''; position:absolute; z-index:-1;
  top:0; bottom:0; left:50%; transform:translateX(-50%);
  width:100vw;
  background:
    radial-gradient(60% 80% at 12% 50%, rgba(255,236,214,.55), transparent 70%),
    linear-gradient(180deg, rgba(240,232,250,0), rgba(240,232,250,.9) 22%, rgba(240,232,250,.9) 78%, rgba(240,232,250,0));
}
.feat-in{ display:grid; grid-template-columns:260px 1fr; gap:clamp(24px,4vw,54px); align-items:center; }
.feat-art{
  display:grid; place-items:center;
  aspect-ratio:1/1; border-radius:50%;
  background:radial-gradient(circle at 38% 34%, #FFFFFF, #FBF2FA 52%, #EDE4FA 100%);
  box-shadow:0 18px 44px rgba(60,45,90,.10);
  color:var(--gold-soft);
}
.feat-art svg{ width:56%; height:56%; }
.feat-eyebrow{ font-size:11px; letter-spacing:.3em; color:var(--text-dim); margin:0 0 10px; }
.feat h2{
  margin:0 0 12px; font-family:var(--mincho); font-weight:400;
  font-size:clamp(20px,3.2vw,27px); letter-spacing:.12em;
}
.feat-lead{ margin:0 0 22px; font-size:14px; color:var(--text-dim); word-break:auto-phrase; }
.feat-list{ list-style:none; margin:0; padding:0; display:grid; gap:2px; }
.feat-list li{
  display:grid; grid-template-columns:auto 1fr; gap:4px 14px;
  padding:14px 0; border-top:1px solid var(--line-2);
}
.feat-list li:last-child{ border-bottom:1px solid var(--line-2); }
.feat-list b{
  grid-column:1; white-space:nowrap;
  font-family:var(--mincho); font-weight:400; font-size:15px;
  letter-spacing:.08em; color:var(--gold-soft);
}
.feat-list span{ grid-column:2; font-size:12.5px; color:var(--text-dim); line-height:1.8; }

@media (max-width:760px){
  .rcards .ph.num b{ font-size:28px; }
  .rcards b{ font-size:14px; }
  .feat{ padding:56px 0; }
  .feat-in{ grid-template-columns:1fr; gap:24px; }
  .feat-art{ width:160px; margin-inline:auto; }
  .feat-list li{ grid-template-columns:1fr; gap:3px; }
  .feat-list span{ grid-column:1; }
}

/* =====================================================
   18. 動き（2026-09-18追加）
   ★原則は今までどおり。動かすのは transform と opacity だけ。
     width や top を動かすと、そのたびにブラウザが全体のレイアウトを
     計算し直すので、スクロールがガクつく。
   ★ここで足したものも、15.の prefers-reduced-motion で全部止まる。
   ===================================================== */

/* 18-1. ヒーローの写真が、ごくゆっくり寄る（26秒で7%）
   ★1回見ただけでは動いていると気づかない速さにする。
     速いと「広告のバナー」に見えて、落ち着いて読めなくなる。 */
.hero-bg img{
  animation: heroZoom 26s ease-in-out infinite alternate;
  transform-origin:74% 50%;   /* 人物を軸にして寄る（軸が中央だと人が画面外へ逃げる） */
  will-change: transform;
}
@keyframes heroZoom{
  from{ transform:scale(1); }
  to  { transform:scale(1.07); }
}

/* 18-2. カードの矢印が、ホバーでひと呼吸ぶん右へ動く */
.pcards .ar{ transition:background .35s, border-color .35s, transform .45s cubic-bezier(.2,.7,.2,1); }
.pcards a:hover .ar{ transform:translateX(3px); }

/* 18-3. 3つの約束の三日月が、ゆっくり浮き沈みする */
.feat-art svg{ animation: floaty 7.5s ease-in-out infinite; }
@keyframes floaty{
  0%,100%{ transform:translateY(-4px); }
  50%    { transform:translateY(4px);  }
}

/* 18-4. 悩みの丸アイコンに、順番に灯りがともる（画面に入ったときだけ）
   ★.stagger の遅れと重ねているので、左から順に光る。 */
.js [data-reveal].is-in .worry .ic{ animation: icGlow 1.6s ease-out .2s both; }
@keyframes icGlow{
  0%  { box-shadow:0 0 0 0 rgba(107,91,196,0); }
  40% { box-shadow:0 0 0 7px rgba(107,91,196,.10); }
  100%{ box-shadow:0 0 0 0 rgba(107,91,196,0); }
}

/* =====================================================
   19. 3問診断・占術図鑑（2026-09-18・第3稿）
   ===================================================== */

/* ---- 19-1. 3問診断 ----
   ★JSが動かない環境では .qz を隠し、代わりに .qz-nojs を出す。
     押しても何も起きないボタンを見せないため。 */
.qz{ display:none; }
.js .qz{
  display:block;
  position:relative;
  background:var(--bg-card);
  border:1px solid var(--gold-dim);
  border-radius:var(--r);
  padding:clamp(22px,4vw,34px);
  box-shadow:0 14px 34px rgba(60,45,90,.07);
}
.qz-nojs{
  font-size:13px; color:var(--text-dim);
  border:1px dashed var(--line); border-radius:var(--r);
  padding:16px 18px; margin:0;
}
.js .qz-nojs{ display:none; }

/* 進み具合の3つの点 */
.qz-bar{ display:flex; gap:7px; justify-content:center; margin-bottom:26px; }
.qz-bar i{
  width:26px; height:3px; border-radius:2px;
  background:var(--line);
  transition:background .5s;
}
.qz-bar i.is-on{ background:var(--gold-line); }

.qz-q{ display:none; }
.qz-q.is-on{ display:block; animation: qzIn .5s cubic-bezier(.2,.7,.2,1) both; }
@keyframes qzIn{
  from{ opacity:0; transform:translateY(10px); }
  to  { opacity:1; transform:none; }
}
.qz-t{
  margin:0 0 20px; text-align:center;
  font-family:var(--mincho); font-size:clamp(16px,2.6vw,20px);
  letter-spacing:.08em; word-break:auto-phrase;
}
.qz-t .qn{
  display:block; margin-bottom:8px;
  font-family:var(--gothic); font-size:11px; letter-spacing:.25em;
  color:var(--gold);
}
.qz-as{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.qz-a{
  display:block; width:100%; text-align:left; cursor:pointer;
  padding:20px 22px;
  background:var(--bg-soft);
  border:1px solid var(--line);
  border-radius:var(--r);
  color:var(--text);
  font-family:var(--gothic);
  transition:transform .4s cubic-bezier(.2,.7,.2,1), border-color .4s, box-shadow .4s, background .4s;
}
.qz-a b{
  display:block; font-family:var(--mincho); font-weight:400;
  font-size:15.5px; letter-spacing:.06em; line-height:1.7;
  word-break:auto-phrase;
}
.qz-a small{ display:block; margin-top:7px; font-size:11.5px; color:var(--text-dim); line-height:1.7; }
.qz-a:hover{
  transform:translateY(-3px);
  background:var(--bg-card);
  border-color:var(--gold);
  box-shadow:0 12px 26px rgba(60,45,90,.10);
}

/* 結果 */
.qz-r{ animation: qzIn .6s cubic-bezier(.2,.7,.2,1) both; text-align:center; }
.qz-rt{
  margin:0 0 14px; font-family:var(--mincho);
  font-size:clamp(18px,3vw,23px); letter-spacing:.1em;
}
.qz-rt b{ color:var(--gold-soft); font-weight:400; }
.qz-rd{
  margin:0 auto 20px; max-width:34em;
  font-size:14px; color:var(--text-dim); word-break:auto-phrase;
}
.qz-rd b{ color:var(--text); font-weight:600; }
.qz-rl{
  list-style:none; margin:0 auto 22px; padding:18px 20px;
  max-width:36em; text-align:left;
  border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2);
  display:grid; gap:10px; font-size:13px;
}
/* ★liをgridにしてはいけない。
   liの中身は「文字＋<b>＋文字」と続いているので、gridにすると
   その一つひとつが別のマス目に飛んで、文がバラバラに散らばる。
   印（✓）は position:absolute で左に置く。 */
.qz-rl li{ position:relative; padding-left:22px; line-height:1.85; }
.qz-rl li::before{
  content:'✓'; position:absolute; left:0; top:0;
  color:var(--gold); font-size:12px;
}
.qz-rl b{ color:var(--gold-soft); font-weight:600; }
.qz-rb{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin:0 0 16px; }
.qz-rb .btn-sm{ width:auto; padding:11px 24px; }
.qz-again{
  background:none; border:0; cursor:pointer;
  font-family:var(--gothic); font-size:12px; color:var(--text-dim);
  text-decoration:underline; text-underline-offset:4px;
  padding:6px 10px;
}
.qz-again:hover{ color:var(--gold-soft); }

/* ---- 19-2. 占術図鑑 ---- */
.zukan{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.zk{
  padding:24px 26px;
  background:var(--bg-card);
  border:1px solid var(--line);
  border-radius:var(--r);
}
.zk-h{
  margin:0 0 16px; padding-bottom:12px;
  border-bottom:1px solid var(--gold-dim);
  font-family:var(--mincho); font-size:18px; letter-spacing:.1em;
  color:var(--gold-soft);
}
.zk-h small{
  display:block; margin-top:4px;
  font-family:var(--gothic); font-size:11px; letter-spacing:.06em;
  color:var(--text-dim);
}
.zk ul{ list-style:none; margin:0; padding:0; display:grid; gap:11px; }
.zk li{ display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:baseline; }
.zk li b{
  font-family:var(--mincho); font-weight:400; font-size:14px;
  letter-spacing:.04em; white-space:nowrap;
}
.zk li span{ font-size:12px; color:var(--text-dim); line-height:1.75; word-break:auto-phrase; }
/* 記事がある占術だけ名前がリンクになる。点線の下線と小さな矢印で「押せる」と分かるように */
.zk li b a{ color:var(--gold-soft); border-bottom:1px dotted var(--gold-line); }
.zk li b a::after{ content:'→'; font-size:10px; margin-left:3px; }
.zk li b a:hover{ color:var(--gold); }
.zk-f{
  margin:16px 0 0; padding-top:13px;
  border-top:1px dotted var(--line);
  font-size:12px; color:var(--text-dim); word-break:auto-phrase;
}
.zk-f b{ color:var(--gold-soft); font-weight:600; }

@media (max-width:760px){
  .qz-as{ grid-template-columns:1fr; gap:11px; }
  .qz-a{ padding:16px 18px; }
  .qz-a b{ font-size:14.5px; }
  .zukan{ grid-template-columns:1fr; }
  .zk{ padding:20px 18px; }
  .zk li{ grid-template-columns:1fr; gap:3px; }
  .zk li b{ white-space:normal; }
}

/* =====================================================
   20. 写真を増やす（2026-09-18・第4稿）
   ★画像が少ないとページが安っぽく見える。
     ただし「置けば良い」ではなく、写真は必ず
     (1)文字の逃げ場をつくる (2)地の色へ溶かす の2つを守る。
   ===================================================== */

/* ---- 20-2. 風景のCTA帯 ---- */
.cband{
  position:relative; overflow:hidden;
  padding:clamp(44px,7vw,74px) 0;
  margin:20px 0;
}
.cband-bg{ position:absolute; inset:0; z-index:-1; }
.cband-bg img{ width:100%; height:100%; object-fit:cover; object-position:70% center; display:block; }
.cband-bg::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(94deg,
    var(--bg) 2%, rgba(251,248,246,.90) 26%, rgba(251,248,246,.50) 48%, rgba(251,248,246,0) 76%);
}
/* 上下は写真そのものを消して、前後のセクションへ溶かす */
.cband-bg{
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 16%, #000 80%, transparent 100%);
          mask-image:linear-gradient(180deg, transparent 0%, #000 16%, #000 80%, transparent 100%);
}
.cband-in{ position:relative; max-width:min(100% - 40px, var(--wrap)); }
.cband-t{
  margin:0 0 10px; font-family:var(--mincho);
  font-size:clamp(19px,3.2vw,27px); letter-spacing:.12em;
}
.cband-d{
  margin:0 0 24px; font-size:13.5px; color:var(--text-dim);
  max-width:28em; word-break:auto-phrase;
}
.cband-b{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; margin:0; }
.cband-sub{ font-size:12.5px; color:var(--text-dim); text-decoration:underline; text-underline-offset:4px; }
.cband-sub:hover{ color:var(--gold-soft); }

/* ---- 20-3. 準備中のカード ---- */
.socards .card{
  position:relative; display:flex; flex-direction:column;
  width:100%; padding-bottom:18px;
  background:var(--bg-card);
  border:1px dashed var(--gold-dim);
  border-radius:var(--r);
  overflow:hidden;
}
.socards .ph{ display:block; aspect-ratio:16/9; overflow:hidden; background:var(--bg-soft); }
.socards .ph img{ width:100%; height:100%; object-fit:cover; display:block; filter:saturate(.72); }
.socards .soon-b{
  position:absolute; top:10px; right:10px; z-index:2;
  padding:4px 10px; border-radius:999px;
  background:rgba(251,248,246,.92);
  border:1px solid var(--gold-dim);
  font-size:9.5px; letter-spacing:.12em; color:var(--gold-soft);
}
.socards .tag{
  align-self:flex-start; margin:13px 14px 0; padding:3px 11px;
  border-radius:999px; font-size:10.5px; letter-spacing:.06em; line-height:1.7;
}
.socards b{
  display:block; margin:9px 14px 0;
  font-family:var(--mincho); font-weight:400;
  font-size:15px; line-height:1.72; letter-spacing:.04em;
}
.socards .d{
  display:block; margin:8px 14px 0;
  font-size:11.5px; line-height:1.85; color:var(--text-dim); word-break:auto-phrase;
}

/* ---- 20-4. FEATURE帯の丸を写真に ---- */
.feat-art{ overflow:hidden; padding:0; }
.feat-art img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:50%; }

/* ---- 20-5. フッターの準備中リンク ---- */
.site-foot .f-soon{ color:rgba(237,231,246,.42); }
.site-foot .f-soon i{
  font-style:normal; margin-left:6px; padding:1px 7px;
  border:1px solid rgba(230,215,168,.35); border-radius:999px;
  font-size:9.5px; letter-spacing:.08em;
}

/* ---- 20-6. 帯セクションに、空の写真をうっすら敷く ---- */
.sec.band::after{
  content:''; position:absolute; z-index:-1;
  top:0; bottom:0; left:50%; transform:translateX(-50%);
  width:100vw;
  background:url('../img/qz-bg.jpg') center/cover no-repeat;
  opacity:.14;
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
          mask-image:linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
}

@media (max-width:760px){
  .socards{ grid-template-columns:repeat(2,1fr); }
  .socards b{ font-size:13.5px; margin-inline:11px; }
  .socards .d{ font-size:11px; margin-inline:11px; }
  .socards .tag{ margin-inline:11px; }
  .cband-b{ gap:14px; }
}

/* =====================================================
   21. カードの奥に、うっすら絵を沈める（2026-09-18・第5稿）
   ★右下に寄せて、文字が並ぶ左上には出さない。
     さらに丸くぼかして消す（四角い写真の角が出ると「貼った」ように見える）。
   ★opacity は .14 前後。これ以上濃いと本文の読みやすさが落ちる。
   ===================================================== */
.pair > div, .zk{ position:relative; overflow:hidden; }
.pair > div > *, .zk > *{ position:relative; z-index:1; }

.pair > div::after, .zk::after{
  content:''; position:absolute; z-index:0; pointer-events:none;
  right:-8%; bottom:-12%;
  width:66%; height:78%;
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
  opacity:.15;
  /* 丸くぼかして消す。四角いまま置くと写真の角が見えてしまう */
  -webkit-mask-image:radial-gradient(68% 68% at 72% 70%, #000 0%, rgba(0,0,0,.55) 48%, transparent 76%);
          mask-image:radial-gradient(68% 68% at 72% 70%, #000 0%, rgba(0,0,0,.55) 48%, transparent 76%);
}

/* ★透明度は写真ごとに変える。
   同じ数字にすると、明るい写真（水晶玉・湖）はほとんど見えず、
   暗い写真（星空）だけが濃く出てしまう。
   地の色(#FBF8F6)との明るさの差が 16 くらいになるよう、1枚ずつ決めた。 */
/* 命術＝生年月日と星 → 天の川（暗いので薄く） */
.bg-mei::after{ background-image:url('../img/zk-mei.jpg'); opacity:.10; }
/* 卜術＝道具で読む → 水晶玉 */
.bg-boku::after{ background-image:url('../img/zk-boku.jpg'); opacity:.14; }
/* 霊感・霊視 → 月の満ち欠け */
.bg-rei::after{ background-image:url('../img/zk-rei.jpg'); opacity:.29; }
/* 相術＝形から読む → 山なみ */
.bg-sou::after{ background-image:url('../img/zk-sou.jpg'); opacity:.25; }

@media (max-width:760px){
  /* スマホは1枚が細くなるので、絵をもう少し小さく・薄くする */
  .pair > div::after, .zk::after{ width:58%; height:62%; }
  .bg-mei::after{ opacity:.11; } .bg-boku::after{ opacity:.30; }
  .bg-rei::after{ opacity:.25; } .bg-sou::after{ opacity:.44; }
}

/* =====================================================
   22. 診断に絵を足す（2026-09-18・第7稿）
   ★選択肢が文字だけだと、真っ白い箱が2つ並んでいるだけに見える。
     小さなアイコンを1つ添えるだけで「選ぶもの」に見えてくる。
   ===================================================== */

/* 選択肢＝アイコン＋文字の2列 */
.qz-a{ display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:center; }
.qz-a .qi{
  display:grid; place-items:center;
  width:44px; height:44px; border-radius:50%;
  background:linear-gradient(160deg, #FFF6E8, #EDE7FB);
  border:1px solid rgba(60,45,90,.07);
  color:var(--gold-soft);
  transition:transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s;
}
.qz-a .qi svg{ width:22px; height:22px; }
.qz-a:hover .qi{ transform:scale(1.06); box-shadow:0 6px 16px rgba(60,45,90,.12); }
.qz-a .qt{ display:block; }

/* 診断の箱の奥にも、うっすら空を敷く（明るさから計算した濃さ） */
.js .qz{ position:relative; overflow:hidden; }
.js .qz::before{
  content:''; position:absolute; z-index:0; pointer-events:none;
  right:-6%; bottom:-14%; width:46%; height:82%;
  background:url('../img/sky2.jpg') center/cover no-repeat;
  /* sky2は平均の明るさ230とかなり明るいので、濃いめに敷かないと見えない */
  opacity:.55;
  -webkit-mask-image:radial-gradient(66% 66% at 74% 72%, #000 0%, rgba(0,0,0,.5) 50%, transparent 78%);
          mask-image:radial-gradient(66% 66% at 74% 72%, #000 0%, rgba(0,0,0,.5) 50%, transparent 78%);
}
.qz-bar, .qz-q, .qz-r{ position:relative; z-index:1; }

/* 結果に添える丸い写真 */
.qz-rp{ margin:0 auto 16px; width:84px; height:84px; }
.qz-rp img{
  width:100%; height:100%; object-fit:cover; display:block;
  border-radius:50%;
  box-shadow:0 10px 24px rgba(60,45,90,.14);
}

@media (max-width:760px){
  .qz-a{ gap:13px; }
  .qz-a .qi{ width:38px; height:38px; }
  .qz-a .qi svg{ width:19px; height:19px; }
  .js .qz::before{ width:56%; height:52%; opacity:.14; }
  .qz-rp{ width:68px; height:68px; }
}

/* =====================================================
   23. 写真と背景をもう一段（2026-09-18・第8稿）
   ★濃さは毎回「16 ÷（地の明るさ − 写真の明るさ）」で決めている。
     目分量だと、明るい写真だけ消えて濃さが揃わない。
   ===================================================== */

/* ---- 23-1. 飾りの区切り（素材集の罫線パターンをCSSで描き直したもの）
       ★画像で入れると、小さい線画なので拡大したときに荒れる。
         線と丸だけなのでCSSのほうが鮮明で軽い。 ---- */
.divider{
  display:flex; align-items:center; justify-content:center; gap:14px;
  margin:6px auto 0; width:min(100% - 40px, var(--wrap));
  color:var(--gold-line);
}
.divider::before, .divider::after{
  content:''; height:1px; flex:1 1 auto; max-width:190px;
  background:linear-gradient(90deg, transparent, currentColor);
}
.divider::after{ background:linear-gradient(90deg, currentColor, transparent); }
/* まん中の三日月 */
.divider span{
  position:relative; width:15px; height:15px; flex:none;
  background:currentColor;
  border-radius:50%;
  -webkit-mask-image:radial-gradient(circle at 72% 30%, transparent 52%, #000 53%);
          mask-image:radial-gradient(circle at 72% 30%, transparent 52%, #000 53%);
  opacity:.75;
}

/* ---- 23-2. 05 プロフィール：右に縦長の月 ---- */
.look-wrap{ display:grid; grid-template-columns:1fr 150px; gap:26px; align-items:start; }
.look-pic{ margin:0; }
.look-pic img{
  width:100%; height:auto; display:block;
  border-radius:var(--r);
  box-shadow:0 14px 30px rgba(60,45,90,.12);
}
.look-pic figcaption{
  margin-top:12px; font-size:11px; line-height:1.9;
  color:var(--text-dim); word-break:auto-phrase;
}

/* ---- 23-3. 06 準備の3ステップに、人物のイラストを添える ----
   ★素材集の「人物シルエット・イラスト」。写真より軽い気持ちで見られるので、
     これから電話をかける人の緊張をやわらげる役に立つ。 ---- */
.steps.with-sky li{ position:relative; overflow:hidden; padding-top:34px; }
.steps.with-sky li > *{ position:relative; z-index:1; }
.steps.with-sky li::before{ z-index:2; }
/* ★セレクタを親から書くこと。
   すぐ上の「.steps.with-sky li > *{position:relative}」のほうが強いので、
   .st-pic だけで書くと position:absolute が負けて、絵が文章の左に居座る。 */
.steps.with-sky li .st-pic{
  position:absolute; right:12px; top:14px; z-index:1;
  width:72px; height:84px; display:block;
  opacity:.9;
}
.st-pic img{ width:100%; height:100%; object-fit:contain; display:block; mix-blend-mode:multiply; }
.steps.with-sky h3{ padding-right:74px; }

/* ---- 23-4. 08 記録のセクションに、花をうっすら ---- */
.sec.bg-flower::before{
  content:''; position:absolute; z-index:-1; pointer-events:none;
  right:-2%; top:6%; width:clamp(180px, 26vw, 330px); aspect-ratio:1/1;
  background:url('../img/kiroku-bg.jpg') center/cover no-repeat;
  opacity:.33;
  -webkit-mask-image:radial-gradient(56% 56% at 50% 50%, #000, rgba(0,0,0,.45) 56%, transparent 76%);
          mask-image:radial-gradient(56% 56% at 50% 50%, #000, rgba(0,0,0,.45) 56%, transparent 76%);
}

@media (max-width:760px){
  .divider{ gap:10px; }
  .divider::before, .divider::after{ max-width:90px; }
  .look-wrap{ grid-template-columns:1fr; }
  .look-pic{ max-width:190px; margin-inline:auto; }
  .steps.with-sky li .st-pic{ width:58px; height:68px; right:10px; }
  .steps.with-sky h3{ padding-right:60px; }
  .sec.bg-flower::before{ opacity:.24; top:2%; }
}

/* ---- 23-5. フッター手前の波（素材集の装飾パーツ） ----
   ★白い背景ごと重ねると四角く見えるので、mix-blend-mode:multiply で
     白を透かして線と色だけを乗せる。 */
.deco-wave{ margin:40px auto -10px; width:min(100% - 40px, var(--wrap)); line-height:0; }
.deco-wave img{
  width:100%; height:auto; display:block;
  mix-blend-mode:multiply; opacity:.9;
}
@media (max-width:760px){ .deco-wave{ margin-top:24px; } }

/* 気づきの箱に添えるイラスト（線画なので白を透かして乗せる） */
.finding.has-pic{ position:relative; padding-right:110px; }
.fd-pic{ position:absolute; right:14px; top:50%; transform:translateY(-50%); width:78px; height:92px; }
.fd-pic img{ width:100%; height:100%; object-fit:contain; display:block; mix-blend-mode:multiply; opacity:.92; }
@media (max-width:760px){
  .finding.has-pic{ padding-right:22px; padding-bottom:86px; }
  .fd-pic{ right:50%; top:auto; bottom:10px; transform:translateX(50%); width:64px; height:76px; }
}

/* =====================================================
   24. 新トップページ（2026-09-20・モックの表現に寄せた追加）
   ★ここは「トップだけで使う表現」の置き場。
     既存のクラス（.hero .worry .rcards .feat）はそのまま使い、
     モック特有の飾りだけをここで足している。
   ===================================================== */

/* ---- 24-1. ＼ … ／ で挟む一行 ----
   ★モックのアイキャッチの形。既存の .hero-eyebrow は左右に「線」を引く作りなので、
     .eb-slash を後から当てて、線をスラッシュ文字に置き換える。 */
.eb-slash{
  display:flex; align-items:center; justify-content:center; gap:12px;
  font-size:12px; letter-spacing:.16em; color:var(--text-dim);
}
.eb-slash::before, .eb-slash::after{
  content:'＼'; width:auto; height:auto; background:none;
  font-size:13px; color:var(--gold-line); line-height:1;
}
.eb-slash::after{ content:'／'; }

/* ---- 24-2. 手書き風の一行 ----
   ★モックの "Good things are coming" / "Pick up"。
     Webフォントは読み込まない方針なので、明朝のイタリックで近づける。 */
.hero-script, .pick-script{
  font-family:var(--mincho); font-style:italic;
  color:var(--gold-line); letter-spacing:.06em; margin:0;
}
.hero-script{
  position:absolute; top:13%; right:6%; z-index:1;
  font-size:clamp(13px, 1.7vw, 19px);
  transform:rotate(-7deg);
  pointer-events:none;
}
.pick-script{ font-size:17px; margin-bottom:2px; }

/* ---- 24-3. グラデーションの丸ボタン（モックのCTA） ----
   ★既存の .btn（金の枠線）と別物として足す。置き換えではない。 */
.btn-g{
  display:inline-flex; align-items:center; gap:12px;
  padding:15px 20px 15px 30px;
  border-radius:999px;
  background:linear-gradient(100deg, #8FA7E8 0%, #B79BDD 48%, #E9A8C4 100%);
  color:#FFFFFF;
  font-family:var(--mincho); font-size:16px; letter-spacing:.12em;
  box-shadow:0 10px 24px rgba(107,91,196,.26);
  transition:transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s, filter .4s;
}
.btn-g:hover{
  color:#FFFFFF; transform:translateY(-3px); filter:saturate(1.1);
  box-shadow:0 16px 32px rgba(107,91,196,.34);
}
.btn-g i{
  display:grid; place-items:center;
  width:26px; height:26px; border-radius:50%;
  background:rgba(255,255,255,.26);
  font-style:normal; font-size:13px; line-height:1;
  transition:transform .4s cubic-bezier(.2,.7,.2,1);
}
.btn-g:hover i{ transform:translateX(3px); }
.btn-g.sm{ padding:12px 16px 12px 24px; font-size:14px; }
.btn-g.sm i{ width:22px; height:22px; font-size:11px; }

/* ---- 24-4. 中央ぞろえのセクション見出し（テーマから探す） ----
   ★トップは「読み物」ではなく「入口」なので、章番号(01)と金の下線は使わない。 */
.sec-lab{ margin:0 0 30px; }
.sec-soft{ padding-top:46px; }

/* ---- 24-5. Pick up の見出し行（左に見出し／右に一覧への導線） ---- */
.pick-h{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:20px; margin-bottom:26px;
}
.pick-h .sec-h{ margin-bottom:8px; }
.pick-h .sec-h::after{ display:none; }   /* 金の下線はここでは出さない */
.pick-h .sec-lead{ margin:0; }
.pick-more{
  flex:none; display:inline-flex; align-items:center; gap:9px;
  padding:9px 16px; border-radius:999px;
  border:1px solid var(--line);
  background:var(--bg-card);
  font-size:12.5px; letter-spacing:.04em; color:var(--gold-soft);
  transition:border-color .35s, background .35s;
}
.pick-more:hover{ border-color:var(--gold-line); background:var(--bg-soft); }
.pick-more i{
  display:grid; place-items:center;
  width:20px; height:20px; border-radius:50%;
  background:var(--bg-soft); font-style:normal; font-size:10.5px;
}

/* ---- 24-6. FEATURE の3項目にアイコンを足す（モックの形） ---- */
.feat-list.has-ic li{ grid-template-columns:auto auto 1fr; gap:4px 12px; }
.feat-list.has-ic .fi{
  grid-row:1 / span 2; grid-column:1;
  display:grid; place-items:center;
  width:34px; height:34px; border-radius:50%;
  background:var(--bg-card); border:1px solid var(--line);
  color:var(--gold-soft);
}
.feat-list.has-ic .fi svg{ width:17px; height:17px; }
.feat-list.has-ic b{ grid-column:2 / -1; }
.feat-list.has-ic span:not(.fi){ grid-column:2 / -1; }
.feat-cta{ margin:22px 0 0; }

/* ---- 24-7. いま見ているページを示す（ナビ） ---- */
.site-head nav a.is-here{ color:var(--gold-soft); }

@media (max-width:760px){
  .hero-script{ top:8px; right:14px; font-size:12px; }
  .pick-h{ flex-direction:column; align-items:stretch; gap:14px; }
  .pick-more{ align-self:flex-start; }
  .btn-g{ padding:14px 18px 14px 26px; font-size:15px; }
  .feat-list.has-ic li{ grid-template-columns:auto 1fr; }
  .feat-list.has-ic .fi{ width:30px; height:30px; }
}

/* =====================================================
   25. 下層ページ（2026-09-20・分割にともなって追加）
   ===================================================== */

/* ---- 25-1. 下層の小さいヒーロー ----
   ★見出しを置くためだけの帯ではない。
     assets/js/ui.js が `.hero` を探して、スクロール後のCTAバーを
     出す/引っ込めるを決めている。これが無いページはバーが出ない。 */
.hero.hero-sm{
  display:block; min-height:0; overflow:visible;
  padding:34px 0 26px; text-align:center;
}
.hero-sm .hero-eyebrow{ margin-bottom:14px; }
.hero-sm h1{
  margin:0 0 12px; text-align:center;
  font-family:var(--mincho); font-weight:400;
  font-size:clamp(22px, 3.4vw, 31px); letter-spacing:.12em;
  line-height:1.6; word-break:auto-phrase;
}
.hero-sm .lead{
  margin:0 auto; max-width:40em; text-align:center;
  font-size:13.5px; color:var(--text-dim); line-height:1.95;
  word-break:auto-phrase;
}

/* ---- 25-2. ページの中の目次 ----
   ★先生の選び方は4つの読み物が続くので、着地点が中腹になることがある。
     どこに何があるかを先に見せる。 */
.ptoc{ margin:6px auto 0; }
.ptoc ul{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:8px; justify-content:center;
}
.ptoc a{
  display:inline-block; padding:7px 15px;
  border:1px solid var(--line); border-radius:999px;
  background:var(--bg-card);
  font-size:12.5px; letter-spacing:.04em; color:var(--gold-soft);
  transition:border-color .35s, background .35s;
}
.ptoc a:hover{ border-color:var(--gold-line); background:var(--bg-soft); }

/* ---- 25-3. フッターの実リンク ----
   ★準備中の span と区別がつくように */
.site-foot .fnav a{ text-decoration:underline; text-underline-offset:3px; }

@media (max-width:760px){
  .hero.hero-sm{ padding:24px 0 20px; }
  .ptoc ul{ gap:6px; }
  .ptoc a{ padding:6px 12px; font-size:11.5px; }
}

/* =====================================================
   26. トップの「できること」1列（2026-09-20）
   ★トップには入口だけを置く。測る・調べる・読むは全部下層ページへ出し、
     ここはアイコンを押して飛ぶだけにする。
   ★テーマの丸アイコンと見分けがつくように、こちらは白いカードにする
     （同じ見た目の列が2つ並ぶと、どちらも弱くなる）。
   ===================================================== */
.mlist{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3, 1fr); gap:12px;
}
.mlist li{ display:flex; }
.mlist a{
  display:flex; flex-direction:column; align-items:center; gap:9px;
  width:100%; padding:22px 12px 20px;
  background:var(--bg-card);
  border:1px solid var(--line);
  border-radius:var(--r);
  color:var(--text); text-align:center;
  transition:transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s, border-color .45s;
}
.mlist a:hover{
  transform:translateY(-5px);
  border-color:var(--gold-line);
  box-shadow:0 14px 30px rgba(60,45,90,.10);
}
.mlist .mi{
  display:grid; place-items:center;
  width:46px; height:46px; border-radius:50%;
  background:var(--bg-soft); color:var(--gold-soft);
  border:1px solid rgba(60,45,90,.06);
  transition:background .4s;
}
.mlist .mi svg{ width:22px; height:22px; }
.mlist a:hover .mi{ background:var(--bg-mid); }
.mlist b{
  font-family:var(--mincho); font-weight:400;
  font-size:14.5px; letter-spacing:.05em; line-height:1.6;
  word-break:auto-phrase;
}
.mlist span:not(.mi){
  font-size:11px; color:var(--text-dim); line-height:1.7;
  word-break:auto-phrase;
}

/* ★かんたんな占い（この2つが他社に無いもの）は、少しだけ前に出す */
.mlist .m-tool a{
  background:linear-gradient(170deg, #FFFDF8, #FBF4FB);
  border-color:var(--gold-dim);
}
.mlist .m-tool .mi{
  background:linear-gradient(160deg, rgba(255,232,190,.9), rgba(226,216,250,.9));
}

@media (max-width:860px){
  .mlist{ grid-template-columns:repeat(3, 1fr); }
  .mlist li:nth-child(4), .mlist li:nth-child(5){ grid-column:span 1; }
}
@media (max-width:520px){
  .mlist{ grid-template-columns:repeat(2, 1fr); gap:9px; }
  .mlist a{ padding:17px 9px 15px; gap:7px; }
  .mlist .mi{ width:38px; height:38px; }
  .mlist .mi svg{ width:19px; height:19px; }
  .mlist b{ font-size:13px; }
  .mlist span:not(.mi){ font-size:10.5px; }
}

/* =====================================================
   27. 占いの紹介記事とタグ（2026-09-20）
   ===================================================== */

/* ---- 27-1. タグのボタン ---- */
.tgbox{
  background:var(--bg-card); border:1px solid var(--line);
  border-radius:var(--r); padding:20px 22px; margin-bottom:8px;
}
.tgbox-h{
  margin:0 0 14px; font-size:12px; letter-spacing:.16em; color:var(--gold-soft);
}
.tgg{ margin-bottom:14px; }
.tgg:last-of-type{ margin-bottom:0; }
.tgg-n{
  margin:0 0 7px; font-size:11px; letter-spacing:.1em; color:var(--text-dim);
}
.tgg-l{ display:flex; flex-wrap:wrap; gap:7px; }
.tg, .tg-all{
  display:inline-block; padding:7px 15px;
  border:1px solid var(--line); border-radius:999px;
  background:var(--bg); color:var(--text);
  font:inherit; font-size:12.5px; letter-spacing:.03em; cursor:pointer;
  transition:border-color .3s, background .3s, color .3s;
}
.tg:hover, .tg-all:hover{ border-color:var(--gold-line); background:var(--bg-soft); }
.tg.is-on, .tg-all.is-on{
  background:var(--gold-soft); border-color:var(--gold-soft); color:#FFFFFF;
}
.tgbox-f{
  margin:16px 0 0; padding-top:14px; border-top:1px dashed var(--line);
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
.tg-count{ font-size:12px; color:var(--text-dim); }

/* ---- 27-2. 記事カード ---- */
.kcards{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(2, 1fr); gap:14px;
}
.kcards li{ display:flex; }
.kcards a{
  position:relative; display:flex; flex-direction:column; gap:7px;
  width:100%; padding:22px 24px 40px;
  background:var(--bg-card); border:1px solid var(--line);
  border-radius:var(--r); color:var(--text);
  transition:transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s, border-color .45s;
}
.kcards a:hover{
  transform:translateY(-4px); border-color:var(--gold-line);
  box-shadow:0 14px 30px rgba(60,45,90,.10);
}
.kc-kind{
  align-self:flex-start; padding:2px 11px; border-radius:999px;
  background:var(--bg-soft); color:var(--gold-soft);
  font-size:10.5px; letter-spacing:.06em;
}
.kcards b{
  font-family:var(--mincho); font-weight:400;
  font-size:19px; letter-spacing:.07em;
}
.kc-d{ font-size:12.5px; color:var(--text-dim); line-height:1.85; word-break:auto-phrase; }
.kc-tags{ display:flex; flex-wrap:wrap; gap:5px; margin-top:3px; }
.kc-tags i{
  font-style:normal; font-size:10.5px; color:var(--text-dim);
  padding:2px 8px; border-radius:999px; background:var(--bg-soft);
}
.kcards .ar{
  position:absolute; right:14px; bottom:12px;
  width:26px; height:26px; border-radius:50%;
  border:1px solid var(--line); display:grid; place-items:center;
  font-size:11px; color:var(--gold-soft);
  transition:transform .45s cubic-bezier(.2,.7,.2,1);
}
.kcards a:hover .ar{ transform:translateX(3px); }
.kj-empty{ text-align:center; color:var(--text-dim); font-size:13px; padding:26px 0; }

/* ---- 27-3. 記事のページ ---- */
.kj-crumb{ font-size:11.5px; color:var(--text-dim); margin:0 auto 14px; }
.kj-crumb a{ color:var(--gold-soft); }
.kj-tags{ display:flex; flex-wrap:wrap; gap:7px; margin:0 auto 10px; }
.kj-tags .tg{ font-size:11.5px; padding:5px 13px; }
.kj-sec{ padding:38px 0; }
.kj-sec .sec-h{ font-size:clamp(18px, 2.7vw, 23px); }
.kj-sec p{ font-size:14.5px; line-height:2; word-break:auto-phrase; }
.kj-sec b{ color:var(--gold-soft); }
.kj-ul{ margin:0 0 14px; padding-left:1.2em; font-size:14px; line-height:1.95; }
.kj-ul li{ margin-bottom:7px; }

/* 記事のセクションに写真をうっすら敷く（2026-09-24）
   写真と濃さは .bg-mei などの既存クラスに任せる。
   ★ここで background: の一括指定を使うと、先に書いた .bg-mei の画像が消える */
.kj-deco{ position:relative; overflow:hidden; }
.kj-deco > div{ position:relative; z-index:1; }
.kj-deco::after{
  content:''; position:absolute; z-index:0; pointer-events:none;
  right:-4%; bottom:-6%;
  width:min(46%, 360px); aspect-ratio:4/3;
  background-repeat:no-repeat; background-position:center; background-size:cover;
  -webkit-mask-image:radial-gradient(closest-side, #000 0%, rgba(0,0,0,.55) 55%, transparent 100%);
          mask-image:radial-gradient(closest-side, #000 0%, rgba(0,0,0,.55) 55%, transparent 100%);
}

/* 記事用に素材集 10_26_53 から切り出した写真（2026-09-25）
   濃さ＝16÷(251−写真の平均の明るさ) で1枚ずつ計算した値 */
.bg-unkai::after{ background-image:url('../img/bg-unkai.jpg'); opacity:.15; }  /* 雲海＝吉方旅行 */
.bg-tsuki::after{ background-image:url('../img/bg-tsuki.jpg'); opacity:.10; }  /* 三日月の夜空＝星 */
.bg-note::after { background-image:url('../img/bg-note.jpg');  opacity:.15; }  /* ノートとペン＝名前 */
.bg-kumo::after { background-image:url('../img/bg-kumo.jpg');  opacity:.23; }  /* 紫の雲＝見えないもの */
.bg-heya::after { background-image:url('../img/bg-heya.jpg');  opacity:.31; }  /* 明るいリビング＝間取り */
.bg-lantern::after{ background-image:url('../img/bg-lantern.jpg'); opacity:.10; } /* ランタン＝易の道具 */

/* 最初の見出しの右に置く、その占術の目印（線画）。
   白地ごと切り出しているので multiply で白を透かす */
.kj-mark{
  float:right; width:auto; height:clamp(64px, 9vw, 92px);
  margin:0 0 10px 18px;
  mix-blend-mode:multiply; opacity:.9;
}
/* 「ほかの占術」の手前の区切り（葉っぱつきの波線） */
.kj-sec > div{ display:flow-root; }   /* 目印の float をセクションの中で止める */
.kj-div{ margin:34px auto 0; text-align:center; line-height:0; }
.kj-div img{ width:min(220px, 60%); height:auto; mix-blend-mode:multiply; opacity:.85; }

/* 命式の表。比較表(.ctable)の見た目を借り、列が少ないので横幅の下限を外す */
.kj-meishiki{ min-width:0; margin:4px 0 18px; }
.kj-meishiki tbody td{ font-size:13px; }
.kj-meishiki tbody tr:nth-child(2) td:not(.svc),
.kj-meishiki tbody tr:nth-child(3) td:not(.svc){
  font-family:var(--mincho); font-size:22px; letter-spacing:0;
}
.kj-meishiki .kj-me{ color:var(--gold-soft); background:rgba(140,107,18,.07); }
/* タロットのスート表は命式の見た目を借りるだけ。漢字を大きくする指定は外す
   （nth-child(n) は、上とスマホ用の指定より詳細度を1つ上げるため） */
.kj-meishiki.kj-suit tbody tr:nth-child(n) td:not(.svc){ font-family:inherit; font-size:13px; }
.kj-suit tbody td:last-child{ text-align:left; }
/* 姓名判断の画数の表。数字の列は中央、格の名前と足す文字は折り返さない */
.kj-kaku tbody td:last-child{ text-align:center; }
.kj-kaku .svc, .kj-kaku td:nth-child(2){ white-space:nowrap; }

/* このサイトの道具への案内 */
.kj-tool{
  border:1px dashed var(--gold-line); border-radius:var(--r);
  padding:22px 24px; text-align:center; margin:0 auto;
}
.kj-tool-l{ margin:0 0 7px; font-size:11px; letter-spacing:.16em; color:var(--text-dim); }
.kj-tool-t{ margin:0 0 6px; font-family:var(--mincho); font-size:18px; letter-spacing:.08em; }
.kj-tool-d{ margin:0 0 16px; font-size:12.5px; color:var(--text-dim); }

/* ---- 27-4. 広告の枠 ----
   ★PRの札を必ず出す（ステマ規制）。提携前は仮ボタンで、押せない見た目にする。 */
.adbox{
  margin:38px auto 0; padding:22px 24px;
  background:var(--bg-card);
  border:1px solid var(--gold-dim); border-radius:var(--r);
  text-align:center;
}
.ad-lab{
  display:inline-block; margin:0 0 10px; padding:2px 10px;
  border-radius:999px; background:var(--bg-soft); color:var(--gold-soft);
  font-size:10px; letter-spacing:.16em;
}
.ad-t{ margin:0 0 6px; font-family:var(--mincho); font-size:18px; letter-spacing:.08em; }
.ad-d{ margin:0 0 16px; font-size:13px; color:var(--text-dim); }
.ad-b{ margin:0; }
.adbox .btn-sm{ width:auto; padding:11px 28px; }
.ad-note{ margin:14px 0 0; font-size:11px; color:var(--text-dim); line-height:1.75; }
/* 提携前。ここが残っているあいだは実リンクではない */
.adbox.go-soon{ border-style:dashed; }

/* ---- 27-5. ほかの占術 ---- */
.kj-rel{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3, 1fr); gap:11px;
}
.kj-rel a{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:17px 12px; background:var(--bg-card);
  border:1px solid var(--line); border-radius:var(--r); color:var(--text);
  transition:border-color .35s, transform .4s cubic-bezier(.2,.7,.2,1);
}
.kj-rel a:hover{ border-color:var(--gold-line); transform:translateY(-3px); }
.kj-rel b{ font-family:var(--mincho); font-weight:400; font-size:15px; letter-spacing:.06em; }
.kj-rel span{ font-size:10.5px; color:var(--text-dim); }

@media (max-width:760px){
  .tgbox{ padding:16px 15px; }
  .tg, .tg-all{ padding:6px 12px; font-size:11.5px; }
  .kcards{ grid-template-columns:1fr; gap:10px; }
  .kcards a{ padding:18px 18px 36px; }
  .kcards b{ font-size:17px; }
  .kj-sec{ padding:28px 0; }
  .kj-deco::after{ width:62%; right:-10%; bottom:-4%; }
  /* 図鑑カード用のスマホ指定（.bg-boku .30 など）を記事に持ち込まない。
     記事の写真は広い地の上に敷くので、濃さは計算どおりのPC値に固定する */
  .kj-deco.bg-mei::after{ opacity:.10; } .kj-deco.bg-boku::after{ opacity:.14; }
  .kj-deco.bg-rei::after{ opacity:.29; } .kj-deco.bg-sou::after{ opacity:.25; }
  .kj-mark{ height:60px; margin-left:12px; }
  .kj-meishiki thead th, .kj-meishiki tbody td{ padding:10px 4px; }
  .kj-meishiki tbody td{ font-size:11.5px; }
  .kj-meishiki tbody tr:nth-child(2) td:not(.svc),
  .kj-meishiki tbody tr:nth-child(3) td:not(.svc){ font-size:19px; }
  .kj-rel{ grid-template-columns:repeat(2, 1fr); }
  .adbox{ padding:18px 16px; }
}

/* =====================================================
   28. houi.html を厚くする（2026-09-21）
   ★吉方位ツールだけだった入口ページに、説明・信頼・9星一覧・FAQを追加。
     写真は新しく切り出さず、既存の zk-rei.jpg（月の満ち欠け）を再利用する。
   ===================================================== */

/* ---- 28-1.「そもそも、吉方位とは」の隅に月相の写真をうっすら ----
   仕組みは23-4節の .bg-flower と同じ（.sec の隅に丸くぼかして置く）。
   ★右上に置くので、本文とかぶらないよう .sec-lead / .kj-ul に上限幅をつける。 */
.sec.bg-moon::before{
  content:''; position:absolute; z-index:-1; pointer-events:none;
  right:-2%; top:8%; width:clamp(150px, 20vw, 260px); aspect-ratio:1/1;
  background:url('../img/zk-rei.jpg') center/cover no-repeat;
  opacity:.30;
  -webkit-mask-image:radial-gradient(56% 56% at 50% 50%, #000, rgba(0,0,0,.45) 56%, transparent 76%);
          mask-image:radial-gradient(56% 56% at 50% 50%, #000, rgba(0,0,0,.45) 56%, transparent 76%);
}
#about .sec-lead, #about .kj-ul{ max-width:64%; }

@media (max-width:760px){
  .sec.bg-moon::before{ opacity:.18; top:1%; width:clamp(110px, 30vw, 170px); }
  #about .sec-lead, #about .kj-ul{ max-width:100%; }
}