/* ============================================================
   電話占い ゆくえ(yukue-uranai.com)/ 全ページ共通のスタイル。1 本だけ。
   ------------------------------------------------------------
   話し相手ネットとは別ブランド。地雷の回避は同じものを引き継ぎ、
   色・書体・面の作りは別にする(同じ運営に見えないようにする)。

   書体は 3 種類。役割を固定する。
     ・Zen Kaku Gothic New = 見出し(700/900)・本文・箇条書き・表・ボタン
     ・Zen Old Mincho      = 屋号「ゆくえ」と、節の飾り文字だけ
       (話し相手ネットは明朝を 1 件も使わない。ここは逆に、明朝を
        「占い」の格を出す 1 点だけに絞って使う = ブランドの差)
     ・Outfit              = 英字のラベル(READING / VOICES など)
   ------------------------------------------------------------
   色 ── 業界の型(紫・ピンク・黒地に金のきらきら)を採らない。
     理由 = 「怪しい・高そう」が、この市場の客がいちばん警戒するところ。
     地は生成り #FAF7F2 と白。いちばん多い面は生成り。
     文字は墨 #2A2622 1 色でほぼ全部。
     差し色は 2 色だけ。増やさない。
        藍   #2E3F6E = 「夜・行き先・静けさ」= 見出しの帯・締めの面
        金茶 #B8862F = 「行動」= ボタン・選択中の札・強調

   ★コントラストの床(読み手は 30〜60 代)。
     通常の文字 4.5:1 / 24px 超・18.66px 超の太字 3:1 を 1 か所も割らない。
     ★下の数は 2026-09-21 に計算して出した値(WCAG の式)。目分量ではない。
     白 #FFFFFF の上:
        藍  #2E3F6E = 10.23  … 小さい文字に使ってよい
        金茶 #B8862F = 3.24  … 小さい文字に使ってはいけない
        濃金茶 #8A6420 = 5.35 … 薄い面の上の小さい文字はこちら
        墨  #2A2622 = 15.01 / 補助 #5A5148 = 7.76
     面にするとき:
        藍 #2E3F6E の面 + 白文字 = 10.23    … 可
        金茶 #B8862F の面 + 白文字 = 3.24   … 不可。面にするなら文字は #241C17(5.18)
        濃藍 #223056 の面 + 白文字 = 12.92  … 可
     生成り #FAF7F2 の上: 墨 = 14.05 / 藍 = 9.58 / 補助 = 7.26
     薄藍 #EDF0F7 の上: 藍 = 8.97 / 金茶薄面 #F6EEDD の上: 濃金茶 = 4.64
   ------------------------------------------------------------
   出現演出の約束(社内実測の地雷。緩めない。話し相手ネットから引き継ぐ):
     ・隠すのに opacity と scale(0) を使わない
       → 持ち上げ = translate / 覆い = clip-path
     ・IntersectionObserver を使わない
       → clip-path を持つ要素は交差比が永久に 0 になり、節が丸ごと出てこない
     ・隠す側は :where(html.js) の中に置く
       → JS が落ちたら本文は全部出る。html.js .rise と書くと .rise.seen に
         詳細度で勝ってしまい、今度は永久に出ない
     ・触る演出は必ず @media(hover:hover) の中(指の画面で :hover が居座るため)
     ・ループは translate / scale / rotate、ホバーは transform に分ける
       (同じ指定に動きが走っていると transition が始まらない)
     ・animation の一括指定は play-state を running へ戻す
       → 画面外で止める規則は必ず末尾 + id で当てる
     ・#main と body に clip-path を付けない(固定・粘着の子孫が画面から消える)
   ------------------------------------------------------------
   横あふれ:
     html / body に overflow-x:clip も hidden も書かない。
     書くと「横あふれ 0」を測る定規が原理的に 0 しか返さなくなる(実測済)。
     はみ出す飾りは、その節の中の器に overflow:hidden で閉じ込める。

   ★★ 格子の列は必ず minmax(0,1fr)。1fr と書いてはいけない。
      1fr = minmax(auto,1fr) で、中身の最小幅が列の下限になる。
      aspect-ratio と min-height を同じ器に同時に書かない。
   ------------------------------------------------------------
   面の並び(同じ色を隣り合わせにしない)。地の色は 4 つだけ:
      白 #FFFFFF / 生成り #FAF7F2 / 薄藍 #EDF0F7 / 藍 #2E3F6E(締め 1 か所)
   ============================================================ */

:root{
  --ink:#2A2622;          /* 本文の墨 */
  --ink-soft:#5A5148;     /* 補助の文字 */
  --ai:#2E3F6E;           /* 藍 = 夜・行き先 */
  --ai-deep:#223056;      /* 藍の濃い側(面の上の面) */
  --ai-pale:#EDF0F7;      /* 薄藍の面 */
  --kin:#B8862F;          /* 金茶 = 行動。面と大きい文字だけ */
  --kin-deep:#8A6420;     /* 濃金茶 = 薄い面の上の小さい文字 */
  --kin-pale:#F6EEDD;     /* 金茶の薄い面 */
  --kinari:#FAF7F2;       /* 生成り = いちばん多い面 */
  --white:#FFFFFF;
  --line:#E4DDD2;         /* 罫 */
  --w:1080px;             /* 版面の最大幅 */
  --w-doc:720px;          /* 読みものの柱 */
  --gut:16px;             /* 画面の端の余白(320px でも割らない) */
  --r:14px;               /* 角の丸み */
}

*,*::before,*::after{box-sizing:border-box}
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto } }

body{
  margin:0; background:var(--kinari); color:var(--ink);
  font-family:"Zen Kaku Gothic New",-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP",sans-serif;
  font-size:17px; line-height:1.95; font-weight:500;
  letter-spacing:.012em;
}
@media (max-width:520px){ body{ font-size:16px; line-height:1.9 } }

img,svg{ max-width:100%; height:auto }
a{ color:var(--ai); text-underline-offset:.22em; text-decoration-thickness:1px }
a:hover{ color:var(--kin-deep) }

/* ---------- 版面 ---------- */
.wrap{ width:100%; max-width:var(--w); margin-inline:auto; padding-inline:var(--gut) }
.doc{ max-width:var(--w-doc) }

/* ---------- 見出し ---------- */
h1,h2,h3{ font-weight:900; line-height:1.4; letter-spacing:.01em; color:var(--ink) }
h1{ font-size:clamp(25px,5.4vw,40px); margin:0 0 .6em }
h2{ font-size:clamp(20px,3.6vw,27px); margin:2.4em 0 .8em }
h3{ font-size:clamp(17px,2.6vw,20px); margin:1.8em 0 .5em }
p{ margin:0 0 1.35em }

/* 屋号だけ明朝。ここ以外で明朝を使わない */
.yago{ font-family:"Zen Old Mincho",serif; font-weight:700; letter-spacing:.06em }

/* ---------- 頭(ナビ) ---------- */
.site-head{
  position:sticky; top:0; z-index:40;
  background:rgba(250,247,242,.94); backdrop-filter:saturate(1.2) blur(8px);
  border-bottom:1px solid var(--line);
}
.site-head .wrap{ display:flex; align-items:center; gap:18px; min-height:62px }
.brand{ display:flex; align-items:baseline; gap:.45em; text-decoration:none; color:var(--ink); flex:0 0 auto }
.brand .b1{ font-size:13px; font-weight:700; color:var(--ai); letter-spacing:.08em }
.brand .b2{ font-size:23px }
.site-nav{ margin-left:auto; display:flex; gap:6px; flex-wrap:wrap }
.site-nav a{
  display:inline-block; padding:8px 13px; border-radius:999px;
  font-size:14px; font-weight:700; color:var(--ink); text-decoration:none;
}
.site-nav a[aria-current="page"]{ background:var(--ai); color:#fff }
@media (hover:hover){ .site-nav a:hover{ background:var(--ai-pale); color:var(--ai-deep) } }
@media (max-width:760px){
  .site-head .wrap{ min-height:56px; gap:10px; flex-wrap:wrap; padding-block:8px }
  .site-nav{ margin-left:0; width:100%; gap:4px }
  .site-nav a{ padding:6px 10px; font-size:13px }
}

/* ---------- 節の地の色 ---------- */
section{ padding-block:clamp(38px,6vw,68px) }
section.bg-white{ background:var(--white) }
section.bg-kinari{ background:var(--kinari) }
section.bg-pale{ background:var(--ai-pale) }
section.bg-ai{ background:var(--ai); color:#fff }
section.bg-ai h2,section.bg-ai h3{ color:#fff }
section.bg-ai a{ color:#F1D89A }

/* ---------- ボタン ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.5em;
  padding:14px 26px; border-radius:999px; text-decoration:none;
  font-weight:900; font-size:16px; line-height:1.3;
  background:var(--kin); color:#241C17;      /* 白だと 3.24 で床を割るので文字は墨寄り(5.18) */
  border:2px solid transparent; transition:transform .18s ease, box-shadow .18s ease;
}
.btn-ai{ background:var(--ai); color:#fff }
.btn-line{ background:transparent; color:var(--ai); border-color:var(--ai) }
@media (hover:hover){ .btn:hover{ transform:translateY(-2px); box-shadow:0 6px 18px rgba(46,63,110,.18) } }

/* ---------- 札・箇条書き ---------- */
.tiles{ list-style:none; margin:0; padding:0; display:grid; gap:14px;
        grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr)) }
.tile{ background:var(--white); border:1px solid var(--line); border-radius:var(--r); padding:20px 20px 16px }
.tile b{ display:block; font-size:17px; margin-bottom:.4em; color:var(--ai-deep) }
.tile p{ margin:0; font-size:15px; line-height:1.85; color:var(--ink-soft) }

.lead{ font-size:clamp(17px,2.4vw,19px); line-height:2.0 }

/* 答え先出し(AI に拾わせる短い答え) */
.answer{
  background:var(--kin-pale); border-left:5px solid var(--kin);
  border-radius:0 var(--r) var(--r) 0; padding:18px 20px; margin:0 0 1.6em;
}
.answer p:last-child{ margin-bottom:0 }
.answer b{ color:var(--kin-deep) }

/* 先に言っておくこと */
.caution{ background:var(--white); border:1px dashed var(--line); border-radius:var(--r); padding:18px 20px }
.caution b{ color:var(--ai-deep) }

/* 出どころと日付の判 */
.stamp{ font-size:14px; line-height:1.8; color:var(--ink-soft);
        border-top:1px solid var(--line); padding-top:14px; margin-top:2.4em }

/* よくある質問 */
.faq{ border-top:1px solid var(--line) }
.faq > div{ border-bottom:1px solid var(--line); padding:16px 0 }
.faq b{ display:block; font-size:16px; color:var(--ai-deep); margin-bottom:.35em }
.faq p{ margin:0; font-size:15.5px }

/* ---------- 脚 ---------- */
.site-foot{ background:var(--ai-deep); color:#D9DEEC; padding-block:40px 30px; font-size:14.5px }
.site-foot a{ color:#fff; text-decoration:none }
@media (hover:hover){ .site-foot a:hover{ text-decoration:underline } }
.site-foot h3{ color:#fff; font-size:14px; letter-spacing:.06em; margin:0 0 .6em }
.foot-cols{ display:grid; gap:24px; grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr)) }
.foot-cols ul{ list-style:none; margin:0; padding:0 }
.foot-cols li{ margin-bottom:.4em }
.foot-btm{ margin-top:28px; padding-top:16px; border-top:1px solid rgba(255,255,255,.18); font-size:13px }

/* ---------- パンくず ---------- */
.crumbs{ font-size:13.5px; color:var(--ink-soft); padding-block:12px }
.crumbs a{ color:var(--ink-soft) }
.crumbs ol{ list-style:none; display:flex; flex-wrap:wrap; gap:.4em; margin:0; padding:0 }
.crumbs li + li::before{ content:"›"; margin-right:.4em; color:var(--line) }

/* ============================================================
   出現演出。隠すのは clip-path のみ。opacity と scale は使わない。
   合図は自前の scroll + rAF(IntersectionObserver は clip-path を見られない)。
   ============================================================ */
:where(html.js) .rise{
  clip-path:inset(0 0 100% 0);
  translate:0 18px;
  transition:clip-path .62s cubic-bezier(.22,.8,.26,1), translate .62s cubic-bezier(.22,.8,.26,1);
}
:where(html.js) .rise.seen{ clip-path:inset(0 0 0 0); translate:0 0 }
@media (prefers-reduced-motion: reduce){
  :where(html.js) .rise{ clip-path:none; translate:none; transition:none }
}

/* ============================================================
   トップの見出しの器(ヒーロー)
   ============================================================ */
.hero-in{ display:grid; gap:clamp(22px,4vw,44px); align-items:center;
          grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr) }
@media (max-width:820px){ .hero-in{ grid-template-columns:minmax(0,1fr) } }
.hero-eyebrow{
  display:inline-block; margin:0 0 .9em; padding:5px 14px; border-radius:999px;
  background:var(--kin-pale); color:var(--kin-deep);
  font-size:13.5px; font-weight:700; letter-spacing:.04em;
}
.hero h1{ font-size:clamp(28px,6vw,46px); line-height:1.32; margin-bottom:.55em }
.hero-em{ font-family:"Zen Old Mincho",serif; color:var(--ai); letter-spacing:.04em }
.hero-btns{ display:flex; flex-wrap:wrap; gap:12px; margin-top:1.6em }
.hero-fig{ margin:0 }
.hero-fig svg{ width:100%; height:auto; border-radius:18px;
               box-shadow:0 14px 40px rgba(34,48,86,.18) }

/* 読みものの柱の中の節 */
.doc-sec + .doc-sec{ margin-top:clamp(30px,5vw,52px) }
.doc-sec h2:first-child{ margin-top:0 }
.doc-sec .tiles{ margin:1.4em 0 }

/* 一覧の札 */
.cards{ list-style:none; margin:0; padding:0; display:grid; gap:14px;
        grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr)) }
.card{ background:var(--white); border:1px solid var(--line); border-radius:var(--r);
       padding:20px 20px 18px }
.card a{ font-weight:900; font-size:17px; text-decoration:none; color:var(--ai-deep) }
@media (hover:hover){ .card a:hover{ color:var(--kin-deep); text-decoration:underline } }
.card p{ margin:.5em 0 0; font-size:14.5px; line-height:1.8; color:var(--ink-soft) }
.card .card-kw{ display:inline-block; margin-top:.7em; font-size:12.5px;
                color:var(--kin-deep); font-weight:700 }