/* かげみ — 着地ページとプレスキットの意匠。
 *
 * 正本は design/kagemi-mock/index.html。色・書体・角丸・影・字送りは、そこから写している。
 * **ここで新しい意匠を作らない。** 迷ったら足さずに削る。
 *
 *   色         :root の変数名と値は mock と同一（胡粉・墨・薄墨・紅緋・松葉・金泥・桜鼠・夜）
 *   書体       Kaisei Decol（見出し）／Zen Maru Gothic（本文）。mock の --disp / --body
 *              webfont は assets/fonts/*.woff2 に自前で置いてある（外部 CDN を使わない）
 *   ボタン     高さ54px・半径27px・字送り .14em・700  ← mock の .btn / .btn-beni
 *   影         0 2px 6px rgba(38,33,28,.14)          ← mock の .screen
 *   罫         1px rgba(38,33,28,.1)                 ← mock の .tabbar の上罫
 *   節番号     漢数字・紅緋・字送り .2em             ← mock の .section-label .no
 *   夜→胡粉   胡粉の面を -28px 持ち上げて 28px の角丸で受ける ← mock の .welcome-body
 */

/* ---------- 書体（部分集合。site/tools/subset-fonts.sh で作り直す） ---------- */
@font-face{font-family:'Kaisei Decol';src:url('fonts/KaiseiDecol-400.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Kaisei Decol';src:url('fonts/KaiseiDecol-700.woff2') format('woff2');
  font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:'Zen Maru Gothic';src:url('fonts/ZenMaruGothic-400.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Zen Maru Gothic';src:url('fonts/ZenMaruGothic-500.woff2') format('woff2');
  font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'Zen Maru Gothic';src:url('fonts/ZenMaruGothic-700.woff2') format('woff2');
  font-weight:700;font-style:normal;font-display:swap;}

:root{
  --gofun:#FAF6ED;      /* 胡粉 地 */
  --gofun-deep:#F3EBDC; /* 胡粉 影 */
  --sumi:#26211C;       /* 墨 */
  --sumi-soft:#57504A;  /* 薄墨 */
  --beni:#CF5449;       /* 紅緋 主アクセント */
  --beni-deep:#B4443B;
  --matsu:#39604D;      /* 松葉 副 */
  --kindei:#B99B4F;     /* 金泥 */
  --sakura:#F0E0D6;     /* 桜鼠 面 */
  --yoru:#211C18;       /* 夜 パネル */
  --hair:rgba(38,33,28,.1);
  --disp:'Kaisei Decol',serif;
  --body:'Zen Maru Gothic','Hiragino Maru Gothic ProN',sans-serif;
  /* 版面の幅。**1060 は見出しが折れない下限**として決めた値 —
     絵を左に置く行では文の列が 1060−56(左右の余白)−300(絵)−56(間) = 648px になり、
     いちばん長い見出し「自分のプロフィールは、自分には見えません。」（約595px）が1行に収まる。
     1000 にすると、この見出しだけ「ん。」が2行目へ落ちる（実際に落ちた） */
  --page:1060px;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{background:var(--gofun);color:var(--sumi);font-family:var(--body);
  font-size:15px;line-height:1.95;letter-spacing:.02em;
  font-feature-settings:"palt" 1;}
/* height:auto を必ず書く。<img> の height 属性は presentational hint として
   height:390px / height:1408px のように効くので、width:100% だけを当てると
   **横だけ縮んで縦は属性のまま**になり、絵が縦に伸びる（札が 76x390 の短冊になった）。
   かつて .movie video で同じ罠を踏んで直してあったのに、img 側が抜けていた（2026-08-29。
   動画の節そのものは 2026-09-14 に削除したが、この罠は img に残っている） */
img{display:block;max-width:100%;height:auto;}
a{color:var(--beni-deep);text-underline-offset:.25em;text-decoration-thickness:1px;}
a:hover{color:var(--beni);}
::selection{background:rgba(207,84,73,.18);}

.wrap{max-width:var(--page);margin:0 auto;padding:0 28px;}

/* ---------- 夜のヒーロー ---------- */
/* mock の S1「ようこそ」の作り: 夜景 → 胡粉の面が -28px 重なって 28px の角丸で受ける */
.hero{background:var(--yoru);color:var(--gofun);position:relative;overflow:hidden;}
.hero-art{position:absolute;inset:0;}
/* PC は hero-wide.jpg（月の面が右に組んである横長の絵）。
   **右端を固定して切る** — 中央基準で切ると、器の高さが変わるたびに月が左右へ泳ぐ */
.hero-art picture,.hero-art img{width:100%;height:100%;display:block;}
.hero-art img{object-fit:cover;object-position:100% 50%;}
/* 絵の側で左が既に夜なので、ここは字を起こすぶんだけ。
   **平らな半透明の黒を全面に敷かない** — 月まで濁って、絵を使う意味が無くなる */
.hero-art::after{content:'';position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(33,28,24,.55) 0%,rgba(33,28,24,.38) 42%,
                          rgba(33,28,24,.06) 76%,rgba(33,28,24,0) 100%),
    linear-gradient(180deg,rgba(33,28,24,.16) 0%,rgba(33,28,24,0) 40%,
                           rgba(33,28,24,.42) 100%);}
.hero-in{position:relative;max-width:var(--page);margin:0 auto;padding:92px 28px 104px;}
.vlogo{position:absolute;top:34px;right:26px;writing-mode:vertical-rl;
  font-family:var(--disp);font-size:24px;letter-spacing:.5em;color:var(--gofun);}
.hero h1{font-family:var(--disp);font-weight:700;font-size:38px;line-height:1.55;
  letter-spacing:.05em;max-width:16em;}
.hero .h1-sub{font-family:var(--disp);font-weight:400;font-size:22px;line-height:1.7;
  letter-spacing:.06em;margin-top:14px;color:#EFE6D4;}
.hero .lead{font-size:14.5px;line-height:1.95;color:#D9CFC0;margin-top:22px;max-width:30em;}

/* 三ステップ — mock の .steps をそのまま（一・二・三、紅緋の漢数字） */
.steps{display:flex;gap:12px;margin-top:30px;max-width:460px;}
/* min-width:0 を明示する。flex の既定は min-width:auto で、
   「ことばが札になる」の幅が縮まない下限になりうる（文言を長くすると帯が版面を割る）。
   **いま出ている見え方の修正ではなく、文言を触ったときの保険** */
.step{flex:1;min-width:0;background:rgba(250,246,237,.10);
  border:1px solid rgba(250,246,237,.18);
  border-radius:14px;padding:13px 10px;text-align:center;}
.step .n{font-family:var(--disp);font-size:12px;color:#E9948B;letter-spacing:.14em;}
.step .t{font-size:12.5px;font-weight:700;margin-top:6px;letter-spacing:.05em;line-height:1.5;
  color:var(--gofun);}

/* ---------- ボタン ---------- */
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px;}
.btn{display:inline-flex;align-items:center;justify-content:center;height:54px;padding:0 30px;
  border-radius:27px;font-family:var(--body);font-size:15px;font-weight:700;letter-spacing:.14em;
  text-decoration:none;min-width:200px;}
.btn-beni{background:var(--beni);color:#FDFAF4;}
.btn-beni:hover{background:var(--beni-deep);color:#FDFAF4;}
.btn-line{border:1px solid rgba(250,246,237,.5);color:var(--gofun);}
.btn-line:hover{background:rgba(250,246,237,.10);color:var(--gofun);}
.btn-sumi{border:1px solid rgba(38,33,28,.28);color:var(--sumi);}
.btn-sumi:hover{background:var(--gofun-deep);color:var(--sumi);}
.hero-note{font-size:12.5px;color:#B7ADA0;margin-top:18px;letter-spacing:.04em;}
.hero-note a{color:#D9CFC0;}

/* 胡粉の面が夜を受ける */
.after-hero{background:var(--gofun);border-radius:28px 28px 0 0;margin-top:-28px;position:relative;}

/* ---------- 節 ---------- */
.sec{padding:78px 0;border-top:1px solid var(--hair);}
.sec:first-child{border-top:0;}
/* 節ひとつを面として起こす。全幅には敷かない（版面の外まで色を伸ばすと、
   胡粉の地に浮かぶ「札」ではなく、ただの帯になる） */
.sec.tinted{background:var(--gofun-deep);border-top:0;border-radius:22px;
  padding:56px 40px;margin:22px 0;}
.no{font-family:var(--disp);font-size:14px;color:var(--beni);letter-spacing:.2em;
  margin-bottom:12px;}
h2{font-family:var(--disp);font-weight:700;font-size:27px;line-height:1.6;letter-spacing:.05em;}
h3{font-family:var(--disp);font-weight:700;font-size:18px;line-height:1.7;letter-spacing:.06em;
  margin-bottom:10px;}
.sec p{margin-top:16px;color:var(--sumi-soft);max-width:34em;}
.sec p.tight{margin-top:8px;}
.sec .quiet{font-size:13px;color:#7B736B;}

/* 文と絵の二段組み。840px を切ったら縦に積む */
.two{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:56px;align-items:center;}
/* 絵を左へ入れ替える行。**列の幅も入れ替える** —
   order だけ変えると、絵が 1fr の列に入って文が 300px の列へ落ち、文が細長く潰れる */
.two.rev{grid-template-columns:300px minmax(0,1fr);}
.two.rev .two-txt{order:2;}
.two.rev .two-fig{order:1;}
.two-fig img{width:100%;border-radius:20px;box-shadow:0 2px 6px rgba(38,33,28,.14);}
.two-fig figcaption{font-size:12px;color:#8A8078;margin-top:10px;letter-spacing:.04em;}

/* 引用の一行 — 紅緋の縦罫を左に立てる（mock の短冊の代わりに、印は最小限） */
.pull{border-left:2px solid var(--beni);padding-left:18px;margin-top:26px;
  font-family:var(--disp);font-size:17px;line-height:1.85;letter-spacing:.06em;
  color:var(--sumi);max-width:30em;}

/* 花札12枚。**横に繋いだ1枚の帯にしない**（狭い画面で爪ほどになるか、横スクロールの箱になる）。
   札の輪郭は mock の .fuda と同じ作法 — 白い縁を3px、その外に墨の細い輪 */
.cards{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-top:30px;}
.cards img{width:100%;border-radius:8px;border:3px solid #FDFBF5;
  outline:1.5px solid rgba(38,33,28,.45);}

/* 料金 */
.plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:28px;max-width:720px;}
.plan{background:#fff;border:1px solid var(--hair);border-radius:18px;padding:26px 24px;}
.plan .pn{font-family:var(--disp);font-size:19px;letter-spacing:.14em;}
.plan .pp{font-family:var(--disp);font-size:24px;margin-top:6px;letter-spacing:.04em;}
.plan .pp small{font-size:13px;font-family:var(--body);color:var(--sumi-soft);letter-spacing:.04em;}
.plan ul{list-style:none;margin-top:14px;font-size:13.5px;color:var(--sumi-soft);line-height:1.9;}
.plan li{padding-left:1.1em;text-indent:-1.1em;}
.plan li::before{content:'・';color:var(--beni);}

/* ---------- 表 ---------- */
table{border-collapse:collapse;width:100%;max-width:760px;margin-top:20px;font-size:14px;}
th,td{border-bottom:1px solid var(--hair);padding:13px 14px;text-align:left;vertical-align:top;
  line-height:1.85;}
th{width:9.5em;font-weight:700;color:var(--sumi);white-space:nowrap;}
/* URL をそのまま載せる行があるので、狭い画面で桁があふれないように折る */
td{color:var(--sumi-soft);overflow-wrap:anywhere;}
table.wide th{width:auto;white-space:normal;}

/* ---------- 脚 ---------- */
footer{background:var(--yoru);color:#C9BFB2;padding:56px 0 64px;font-size:13.5px;}
footer .wrap{display:flex;flex-wrap:wrap;gap:40px;justify-content:space-between;align-items:flex-start;}
footer a{color:#E4DACB;text-decoration:none;}
footer a:hover{color:#fff;text-decoration:underline;}
footer .fl{font-family:var(--disp);font-size:20px;letter-spacing:.4em;color:var(--gofun);}
footer nav{display:flex;flex-direction:column;gap:9px;}
footer .fine{font-size:12px;color:#8D8478;margin-top:16px;line-height:1.9;letter-spacing:.03em;}

/* ---------- プレスキットだけで使うもの ---------- */
.kicker{font-family:var(--disp);font-size:13px;letter-spacing:.34em;color:#E9948B;}
.meta{font-size:13px;color:#B7ADA0;margin-top:22px;line-height:2;letter-spacing:.03em;}
.meta a{color:#E4DACB;}

.copybox{position:relative;background:#fff;border:1px solid var(--hair);border-radius:14px;
  padding:22px 24px;margin-top:14px;max-width:760px;}
.copybox .cap{font-size:12px;letter-spacing:.16em;color:var(--beni);font-family:var(--disp);}
.copybox pre{font-family:var(--body);font-size:14px;line-height:2;color:var(--sumi);
  white-space:pre-wrap;margin-top:10px;letter-spacing:.02em;}
.copybtn{position:absolute;top:16px;right:16px;background:none;border:1px solid rgba(38,33,28,.2);
  border-radius:14px;height:28px;padding:0 13px;font-family:var(--body);font-size:11.5px;
  letter-spacing:.1em;color:var(--sumi-soft);cursor:pointer;}
.copybtn:hover{background:var(--gofun-deep);}

/* 素材の一覧 */
.shots{display:grid;grid-template-columns:repeat(auto-fill,minmax(126px,1fr));gap:16px;
  margin-top:20px;max-width:760px;}
.shots a{display:block;text-decoration:none;color:var(--sumi-soft);font-size:11.5px;
  letter-spacing:.04em;}
.shots img{width:100%;border-radius:9px;border:1px solid var(--hair);}
.shots span{display:block;margin-top:7px;}

.dl{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px;}
.dl a{display:inline-flex;align-items:center;height:42px;padding:0 20px;border-radius:21px;
  border:1px solid rgba(38,33,28,.24);font-size:13px;letter-spacing:.06em;color:var(--sumi);
  text-decoration:none;background:#fff;}
.dl a:hover{background:var(--gofun-deep);color:var(--sumi);}
.dl a em{font-style:normal;color:#8A8078;margin-left:9px;font-size:11.5px;}

/* プレスリリース原稿 */
.draft{background:#fff;border:1px solid var(--hair);border-radius:18px;padding:34px 34px 38px;
  margin-top:22px;max-width:820px;}
.draft h4{font-family:var(--disp);font-size:16px;letter-spacing:.06em;margin-top:30px;
  padding-left:12px;border-left:2px solid var(--beni);line-height:1.7;}
.draft h4:first-child{margin-top:0;}
.draft p{margin-top:13px;color:var(--sumi-soft);font-size:14px;max-width:none;}
.draft p.strong{color:var(--sumi);font-weight:500;}
.fill{background:var(--gofun-deep);color:var(--beni-deep);padding:1px 7px;border-radius:4px;
  font-size:13px;letter-spacing:.06em;}
.draft ul{margin-top:12px;padding-left:1.2em;color:var(--sumi-soft);font-size:14px;}
.draft li{margin-top:5px;}
.draft .editorial{margin-top:12px;font-size:12.5px;color:#8A8078;background:var(--gofun);
  border-radius:10px;padding:11px 14px;line-height:1.9;}

.notice{background:var(--gofun-deep);border-radius:18px;padding:26px 28px;margin-top:20px;
  max-width:820px;}
.notice ul{padding-left:1.2em;font-size:14px;color:var(--sumi-soft);}
.notice li{margin-top:9px;}

/* 目次 */
.toc{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:22px;font-size:13.5px;}
.toc a{color:var(--sumi-soft);text-decoration:none;letter-spacing:.04em;}
.toc a:hover{color:var(--beni);text-decoration:underline;}

/* ---------- 折り返し ---------- */
@media (max-width:860px){
  body{font-size:14.5px;}
  .wrap{padding:0 22px;}
  .hero-in{padding:70px 22px 84px;}
  /* 狭い画面は縦長の原本（hero-night.jpg）に切り替わる。字が版面いっぱいに広がるので、
     横のグラデーションでは足りない。縦だけで受ける（月は暗くなるが、読めるほうが先） */
  .hero-art img{object-position:center 22%;}
  /* 中央の .50 が**ちょうど月のいちばん明るいところ**に当たっていて、
     そこへ h1-sub と lead が重なっていた。実測（狭い画面で描いて画素を測った）:
       .lead(#D9CFC0)   2.52:1 → 4.66:1     .h1-sub(#EFE6D4) 3.50:1 → 5.47:1
     どちらも WCAG AA の本文 4.5:1 を割っていた。**この数字から逆算して .72 にした**
     （素の月は rgb(255,230,180)）。**月は暗くなるが、読めるほうが先** —
     この規則のもとの意図のままで、値だけが足りていなかった（2026-08-29） */
  .hero-art::after{background:linear-gradient(180deg,rgba(33,28,24,.66) 0%,
    rgba(33,28,24,.72) 46%,rgba(33,28,24,.88) 100%);}
  .hero h1{font-size:29px;}
  .hero .h1-sub{font-size:18px;}
  .vlogo{font-size:20px;top:26px;right:20px;}
  .sec{padding:56px 0;}
  h2{font-size:22px;}
  .two,.two.rev{grid-template-columns:minmax(0,1fr);gap:34px;}
  .two.rev .two-txt,.two.rev .two-fig{order:0;}
  .two-fig{max-width:360px;margin:0 auto;}
  .sec.tinted{padding:44px 22px;border-radius:18px;}
  .copybox{padding:20px 18px;}
  .toc{gap:6px 16px;font-size:13px;}
  .plans{grid-template-columns:minmax(0,1fr);}
  .cards{grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;}
  .btn{width:100%;min-width:0;}
  .cta{flex-direction:column;}
  th{width:7.5em;}
  .draft{padding:26px 22px 30px;}
  footer .wrap{flex-direction:column;gap:26px;}
}
@media (max-width:400px){
  th,td{padding:11px 8px;}
  th{width:6.5em;font-size:13px;}
  td{font-size:13px;}
}

/* ---------- 図解（2026-09-04 追加） ----------
 * 文章だけで説明していた節に図を足した。**新しい意匠を作らない** —
 * 色は :root の変数、書体は --disp / --body、角丸と影は .plan / .two-fig から写している。
 *
 * **図の中の文字を画像にしない。** 実文字のまま置く。検索・拡大・読み上げに効き、
 * 英語版を作るときも作り直しが要らない（スクショの ja/en を7枚ずつ持つのと同じ轍を踏まない）。
 * 罫の色 #C9BEAE は --hair(rgba(38,33,28,.1)) を胡粉の地に重ねた見えと同じ濃さの実色。
 * 矢印など「線として見せたいもの」に使う（--hair は面の境目、こちらは図の線）。
 */

/* 流れ図 — 横一列。狭い画面では縦に積む */
.flow{margin-top:30px;max-width:900px;}
.flow-row{display:flex;align-items:stretch;}
.flow-step{flex:1 1 0;min-width:0;background:#fff;border:1px solid var(--hair);
  border-radius:16px;padding:17px 14px;text-align:center;}
.flow-step .fn{font-family:var(--disp);font-size:11.5px;color:var(--beni);letter-spacing:.2em;}
.flow-step .ft{font-size:13.5px;font-weight:700;margin-top:7px;line-height:1.65;letter-spacing:.03em;}
.flow-step .fd{font-size:11.5px;color:var(--sumi-soft);margin-top:7px;line-height:1.75;}
.flow-arrow{flex:0 0 24px;display:flex;align-items:center;justify-content:center;}
.flow-arrow svg{width:11px;height:11px;display:block;fill:none;stroke:#C9BEAE;stroke-width:1.6;}

/* 一周して戻ることを線で見せる。左端に矢じりを立て、真ん中で線を切って字を置く。
   SVG で描くと preserveAspectRatio の都合で角丸と矢じりが横に潰れるので、
   ここは枠線（border）で描いている */
.flow-loop{position:relative;height:30px;margin:0 26px;
  border:1.5px solid #C9BEAE;border-top:0;border-radius:0 0 16px 16px;}
.flow-loop::before{content:'';position:absolute;left:-5.5px;top:-1px;width:0;height:0;
  border-left:5px solid transparent;border-right:5px solid transparent;
  border-bottom:7px solid #C9BEAE;}
.flow-loop span{position:absolute;left:50%;transform:translateX(-50%);top:21px;
  background:var(--gofun);padding:0 12px;font-size:12px;color:var(--sumi-soft);
  letter-spacing:.04em;white-space:nowrap;}

/* 対比図 — 左に既存のアプリ、右にかげみ */
.vs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:28px;max-width:760px;}
.vs-col{border-radius:18px;padding:23px 22px;border:1px solid var(--hair);background:#fff;}
.vs-col.old{background:var(--gofun-deep);border-color:transparent;}
.vs-h{font-family:var(--disp);font-size:14.5px;letter-spacing:.1em;line-height:1.6;}
.vs-col.old .vs-h{color:var(--sumi-soft);}
.vs-col.new .vs-h{color:var(--beni);}
.vs ul{list-style:none;margin-top:13px;font-size:13px;color:var(--sumi-soft);line-height:1.85;}
.vs li{padding-left:1.1em;text-indent:-1.1em;}
.vs li::before{content:'・';color:#C4B9A9;}
.vs-col.new li::before{color:var(--beni);}
.vs-mid{display:flex;justify-content:center;margin:11px 0 3px;}
.vs-mid svg{width:11px;height:11px;fill:none;stroke:#C9BEAE;stroke-width:1.6;}
.vs-out{border-top:1px solid var(--hair);margin-top:11px;padding-top:12px;
  font-size:13.5px;font-weight:700;line-height:1.75;letter-spacing:.02em;}
.vs-col.old .vs-out{color:var(--sumi-soft);}
.vs-col.new .vs-out{color:var(--sumi);}

/* 1日にやること（節一・2026-09-04）。**枠は梅と竹を必ず並べる** —
   「1日ひとり」は無料の梅の値で、竹は3人。片方だけ書くと嘘になる。
   意匠は新設していない: 番号は .no と同じ漢数字・紅緋、器は .plan と同じ
   白地＋ hair の罫＋18px の角丸。 */
.todo{list-style:none;margin-top:26px;max-width:720px;}
.todo li{display:flex;align-items:center;gap:16px;background:#fff;
  border:1px solid var(--hair);border-radius:18px;padding:18px 22px;margin-top:12px;}
.todo .td-n{flex:none;font-family:var(--disp);font-size:15px;color:var(--beni);
  letter-spacing:.2em;width:1.4em;text-align:center;}
.todo .td-b{flex:1;min-width:0;}
.todo .td-t{font-size:15px;font-weight:700;letter-spacing:.02em;line-height:1.6;}
.todo .td-d{font-size:12.5px;color:var(--sumi-soft);margin-top:5px;line-height:1.8;}
/* 枠は右端に立てる。**竹の値を小さく添える** — 梅だけ見て全プラン共通と
   読まれないように、同じ行に必ず両方を出す */
.todo .td-q{flex:none;text-align:right;line-height:1.5;}
.todo .td-q b{display:block;font-size:13.5px;letter-spacing:.02em;}
.todo .td-q small{display:block;font-size:11px;color:#8A8078;margin-top:3px;letter-spacing:.02em;}

/* 月と水面。名前の由来（空の月＝あなた／水にうつる＝うつし）を1枚で */
.mizu{margin-top:26px;max-width:600px;background:var(--yoru);border-radius:18px;
  padding:22px 24px;display:flex;align-items:center;gap:26px;}
.mizu svg{flex:0 0 118px;width:118px;height:118px;display:block;}
.mizu-t{color:#E4DACB;font-size:13px;line-height:2;letter-spacing:.03em;}
.mizu-t b{display:block;font-family:var(--disp);font-size:14px;font-weight:400;
  color:var(--gofun);letter-spacing:.08em;}
.mizu-t em{font-style:normal;color:#9E948A;}

@media (max-width:860px){
  .flow-row{flex-direction:column;}
  .flow-arrow{flex:0 0 22px;}
  .flow-arrow svg{transform:rotate(90deg);}
  /* 縦積みでは「一周して戻る」を線で描けない。字だけにする */
  .flow-loop{height:auto;margin:16px 0 0;border:0;border-radius:0;text-align:center;}
  .flow-loop::before{display:none;}
  .flow-loop span{position:static;transform:none;display:inline-block;background:none;padding:0;}
  .vs{grid-template-columns:minmax(0,1fr);gap:14px;}
  .todo li{flex-wrap:wrap;gap:10px 14px;padding:16px 18px;}
  .todo .td-q{width:100%;text-align:left;padding-left:calc(1.4em + 14px);}
  .todo .td-q b{display:inline;}
  .todo .td-q small{display:inline;margin-left:8px;}
  .mizu{flex-direction:column;align-items:flex-start;gap:18px;padding:22px 20px;}
}

/* 引用コメントの固定リンクと出典（2026-09-04 追加）。
   **pre の外に置く。** コピーボタンは pre.innerText を読むので、
   中に入れると出典行まで記者の記事へ貼られる */
.copybox .cite{margin-top:13px;padding-top:11px;border-top:1px solid var(--hair);
  font-size:11.5px;color:#8A8078;letter-spacing:.03em;line-height:1.8;}
.copybox .cite a{color:#8A8078;}
.copybox .cite a:hover{color:var(--beni);}
/* 固定リンクで飛んだとき、上の帯に隠れないように余白を取る */
.copybox[id]{scroll-margin-top:24px;}

/* 絵の列に入れる月と水面（節六）。**満ち欠けは育成の意匠なのでここでは使わない**
   — 見えなさは雲と波紋で表す（2026-09-04 ユーザー訂正）。
   300px の列に入るので、横並びをやめて縦に積む */
.two-fig .mizu{flex-direction:column;align-items:center;text-align:center;
  gap:15px;margin-top:0;max-width:none;padding:24px 20px;}
.two-fig .mizu svg{flex:none;width:104px;height:104px;}
.two-fig .mizu .mizu-t{font-size:12.5px;}

/* 流れ図の各段に置く部品（2026-09-04）。
   **端末の枠は写さない。** 店頭スクショを切り抜く形をやめ、
   **design/kagemi-mock/index.html から部品そのものを写した**（ユーザー指示）。
   写した先（モックの行）と、写した値:
     一 もちづき  節14 .orb-moon / .orb-q / .mochizuki（月の**手前**に置く・#385）
     二 問いの札  節01 .fuda / .q-label / .q-text
     三 うつし    節03 .op-sheet-chat の .bubble me / .bubble ai / .src
     四 おしらせ  節02 .foot-row（.ft-face / .ft-q / .ft-meta）
     五 レポート  節20 .wk-card の見出し3つ ＋ 語り部のツル
   **意匠を新設していない** — 色は :root の変数、書体は --disp / --body、
   文言はモックの実文をそのまま。小さい器に入るよう寸法だけ縮めてある。
   絵は assets/hanafuda/ の正本から site/assets/img/comp/ へ web サイズで落とした
   （作り直す手順は site/tools/build-assets.sh の「流れ図の部品」節）。 */
.cmp{height:158px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;margin-bottom:14px;overflow:hidden;}

/* 一 もちづき — 月の**手前**に兎。月の中に入れない（モックの掟・#385） */
.cmp-moon .orb{position:relative;width:78px;height:78px;flex:none;}
.cmp-moon .orb-m{width:78px;height:78px;border-radius:50%;object-fit:cover;object-position:48% 46%;display:block;}
/* モックは 200px の月に 82px・left36・bottom20。同じ比で 78px に落とす */
.cmp-moon .orb-u{position:absolute;left:14px;bottom:8px;height:32px;width:auto;z-index:2;}
.cmp-moon .orb-q{font-family:var(--disp);font-size:10.5px;line-height:1.85;color:var(--sumi);
  text-align:center;margin-top:11px;letter-spacing:.02em;}

/* 二 問いの札 */
.cmp-fuda .fuda{position:relative;width:112px;height:168px;border-radius:10px;overflow:hidden;
  background:#fff;box-shadow:0 1px 4px rgba(38,33,28,.16);
  display:flex;flex-direction:column;align-items:center;padding:9px 8px 0;}
.cmp-fuda .fuda-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0;}
.cmp-fuda .fuda-label{position:relative;font-size:6.5px;letter-spacing:.24em;color:var(--sumi-soft);}
.cmp-fuda .fuda-label i{font-style:normal;background:rgba(255,251,240,.92);border-radius:14px;padding:3px 7px;}
/* **鹿に文字を重ねない。** 札の絵は下半分に鹿が居るので、字は上の胡粉の空きに収める。
   モックは 22px だが、器が半分以下なので比で 9px まで落としてある */
.cmp-fuda .fuda-text{position:relative;font-family:var(--disp);font-size:8.5px;line-height:1.8;
  text-align:center;letter-spacing:.01em;color:var(--sumi);margin-top:11px;padding:0 3px;}

/* 三 うつしのやり取り */
.cmp-chat{align-items:stretch;justify-content:flex-start;padding-top:6px;}
.cmp-chat .chat-head{display:flex;gap:6px;align-items:center;margin-bottom:8px;}
.cmp-chat .chat-head img{width:20px;height:20px;border-radius:50%;object-fit:cover;flex:none;}
.cmp-chat .chat-head b{display:block;font-size:9px;font-weight:700;line-height:1.4;}
.cmp-chat .chat-head span{display:block;font-size:7.5px;color:#8A8078;line-height:1.4;}
.cmp-chat .bubble{font-size:8.5px;line-height:1.7;border-radius:11px;padding:6px 9px;margin-bottom:5px;}
.cmp-chat .bubble.me{background:var(--matsu);color:#FDFAF4;align-self:flex-end;border-bottom-right-radius:4px;}
.cmp-chat .bubble.ai{background:#fff;border:1px solid var(--hair);color:var(--sumi);border-bottom-left-radius:4px;}
.cmp-chat .src{display:block;margin-top:3px;font-size:7px;color:#8A8078;}

/* 四 花合わせのおしらせ */
/* 四 花合わせ — モック節02 の .hana-scene を写した。
   うしろに覗く2枚は役「花見で一杯」（桜に幕 ＋ 菊に盃）。
   役名の金（#F7E4AF）は **-webkit-text-stroke を使わず** text-shadow の8方向で縁を作る
   （モックの掟。細字だと stroke が字の太さを食って金が残らない）。
   **人物はアプリ同梱の練習相手**（assets/demo/）。モックの people/*.jpg は商用に使えない。 */
.cmp-hana{position:relative;border-radius:12px;overflow:hidden;background:#151114;
  justify-content:flex-end;padding-bottom:12px;}
.cmp-hana .hana-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.cmp-hana .hana-back{position:absolute;width:52px;height:78px;border-radius:5px;overflow:hidden;
  background:#FBEACE;border:2px solid #F6EEDC;outline:1px solid rgba(38,33,28,.55);
  box-shadow:0 5px 12px rgba(0,0,0,.55);}
.cmp-hana .hana-back img{width:100%;height:100%;object-fit:cover;border-radius:0;}
.cmp-hana .hana-back::after{content:"";position:absolute;inset:0;background:rgba(24,20,32,.22);}
.cmp-hana .hana-back.l{left:-12px;top:26px;transform:rotate(-14deg);}
.cmp-hana .hana-back.r{right:-12px;top:14px;transform:rotate(12deg);}
.cmp-hana .hana-scrim{position:absolute;left:0;right:0;bottom:0;height:74%;
  background:linear-gradient(180deg,rgba(24,20,32,0) 0%,rgba(24,20,32,.76) 18%,rgba(24,20,32,.82) 100%);}
.cmp-hana .hana-cards{position:relative;width:104px;height:66px;margin:0 auto 8px;}
.cmp-hana .hfuda{position:absolute;width:44px;height:66px;border-radius:5px;overflow:hidden;
  border:2px solid #F6EEDC;box-shadow:0 5px 14px rgba(0,0,0,.45);}
.cmp-hana .hfuda img{width:100%;height:100%;object-fit:cover;border-radius:0;}
.cmp-hana .hfuda.l{left:0;top:4px;transform:rotate(-7deg);}
.cmp-hana .hfuda.r{right:0;top:0;transform:rotate(6deg);}
.cmp-hana .hana-title{position:relative;font-family:var(--disp);font-size:13px;font-weight:600;
  letter-spacing:.14em;color:#FAF6ED;text-align:center;
  text-shadow:0 2px 14px rgba(0,0,0,.8),0 0 4px rgba(0,0,0,.5);}
.cmp-hana .hana-yaku{position:relative;font-family:var(--disp);font-size:7px;font-weight:500;
  letter-spacing:.24em;color:#F7E4AF;text-align:center;margin-top:6px;
  text-shadow:1px 0 0 #17110D,-1px 0 0 #17110D,0 1px 0 #17110D,0 -1px 0 #17110D,
    1px 1px 0 #17110D,-1px 1px 0 #17110D,1px -1px 0 #17110D,-1px -1px 0 #17110D,
    0 0 3px rgba(0,0,0,.9);}

/* 五 レポート — 語り部のツルと三項目 */
.cmp-report{align-items:stretch;justify-content:center;}
.cmp-report .rep-lead{display:flex;gap:7px;align-items:center;margin-bottom:9px;}
.cmp-report .rep-lead img{width:24px;height:auto;flex:none;}
.cmp-report .rep-lead span{font-size:7.5px;line-height:1.6;color:var(--sumi-soft);}
.cmp-report .rep-row{display:flex;gap:6px;align-items:center;background:#fff;
  border:1px solid var(--hair);border-radius:9px;padding:7px 9px;margin-bottom:5px;
  font-size:9px;font-weight:700;color:var(--sumi);}
.cmp-report .rep-row i{width:11px;height:11px;border-radius:50%;flex:none;}
.cmp-report .rep-row i.ao{background:rgba(38,33,28,.10);}
.cmp-report .rep-row i.aka{background:rgba(207,84,73,.16);}
.cmp-report .rep-row i.matsu{background:rgba(57,96,77,.16);}

/* 節の背景に置く札（2026-09-04）。
   **節八「意匠は、花札です。」を畳んだ代わり** — 12枚を並べて見せる節をやめ、
   節ごとに1枚を地に敷いた（ユーザー指示）。札は既存の assets/img/cards/ をそのまま使う。
   割り当ては意味で決めてある:
     流れ図=桜に幕（幕開け） 一=牡丹に蝶 二=柳に蛙 三=藤にほととぎす（使い）
     四=紅葉に鹿（問いの札の絵） 五=松に鶴（語り部のツル） 六=芒に月（月＝うつし）
     七=梅に鶯（友だちの文を運ぶ） 料金=菊に盃 はじめる=桐に鳳凰（結び）
   **読みやすさを先に置く。** 版面の外へ半分逃がし、うんと薄くして、
   本文の列（.sec p は max-width:34em）には掛からない位置にだけ置く。 */
.sec{position:relative;overflow:hidden;}
.sec-fuda{position:absolute;right:-84px;top:50%;width:210px;height:auto;
  transform:translateY(-50%) rotate(8deg);opacity:.17;border-radius:12px;
  pointer-events:none;z-index:0;}
/* 絵のある節（.two）は左右とも埋まっているので、**札は端から覗くだけにする** —
   -64px だと本文の下に半分入って読みにくかった（描画で確認）。
   -124px まで逃がし、濃さも落とす。「見えるか見えないか」で足りる */
.sec:has(.two) .sec-fuda{right:auto;left:-124px;opacity:.13;
  transform:translateY(-50%) rotate(-9deg);}
.sec > *:not(.sec-fuda){position:relative;z-index:1;}

@media (max-width:860px){
  /* 狭い画面は本文が版面いっぱいに広がるので、**さらに薄く・さらに外へ** */
  .sec-fuda{width:150px;right:-58px;opacity:.12;}
  .sec:has(.two) .sec-fuda{left:-58px;}
}

/* 素材のプレビュー（2026-09-04）。落とす前に見えるように。
   **胡粉（白）版は地が暗くないと見えない** ので、墨版は胡粉の地、胡粉版は夜の地に置く。
   別の画像は作らない — 配っている PNG をそのまま縮めて出す。 */
.logo-prev{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;
  margin-top:20px;max-width:520px;}
.lp-cell{border-radius:14px;padding:22px 18px 14px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:14px;min-height:150px;}
.lp-cell.light{background:var(--gofun-deep);}
.lp-cell.dark{background:var(--yoru);}
.lp-cell img{max-height:78px;width:auto;object-fit:contain;}
.lp-cell.wide img{max-height:34px;}
.lp-cell span{font-size:11.5px;letter-spacing:.06em;}
.lp-cell.light span{color:var(--sumi-soft);}
.lp-cell.dark span{color:#B7ADA0;}

/* 使い方ガイドは1枚もの。押すと原寸で開く */
.guide-prev{display:block;margin-top:20px;max-width:340px;border-radius:14px;
  overflow:hidden;border:1px solid var(--hair);background:#fff;}
.guide-prev img{width:100%;height:auto;display:block;}

@media (max-width:860px){
  .logo-prev{grid-template-columns:minmax(0,1fr);gap:12px;}
}

/* 「かげみとは」を画面で説明する帯（2026-09-04）。
   **絵はストアの正本（thumb/）をそのまま使う。** 見出しの一行は画像の中に
   焼かれているので、下のキャプションには「何の場面か」だけを書く（二度言わない）。 */
.tour{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;
  margin-top:22px;max-width:820px;}
.tour figure{min-width:0;}
.tour img{width:100%;border-radius:10px;border:1px solid var(--hair);display:block;}
.tour figcaption{font-size:11.5px;color:var(--sumi-soft);line-height:1.75;margin-top:9px;
  letter-spacing:.02em;}
.tour figcaption b{display:block;color:var(--sumi);font-size:12.5px;margin-bottom:3px;
  letter-spacing:.04em;}

@media (max-width:860px){
  /* 5列は入らない。**横に流す** — 縦へ積むと帯が長くなりすぎて、
     「5枚で一周」という見え方が消える */
  .tour{display:flex;overflow-x:auto;gap:12px;padding-bottom:10px;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;}
  .tour figure{flex:0 0 150px;scroll-snap-align:start;}
}