/* ══════════════════════════════════════════════════════════════════
   TANE JOURNEY ── デザインシステム  v2  2026-08-23

   🔴 色・書体・字の大きさ・余白は、このファイル1つで決まる。
      ページ側のHTMLには見た目を書かない。名前（クラス）だけを貼る。

   決まりの出どころ
     色・書体 ──────── CLAUDE.md
     字は15px未満禁止 ── context/working-rules.md
     囲みボックスは使わず余白で分ける ── CLAUDE.md

   組み立ての考え方
     1. 決めごと（トークン）
     2. 土台
     3. 文字
     4. 面（セクション）
     5. メニュー
     6. 押すもの
     7. 写真の見せ方 ── ここがTANEの主役
     8. 章立ての部品
     9. ページごとの型
    10. 足もと
    11. 画面が狭いとき
   ══════════════════════════════════════════════════════════════════ */

/* ══ 1. 決めごと ══════════════════════════════════════════════ */
:root{
  /* 色 */
  --navy:#0B1B41;          /* メイン */
  --kinari:#FBF8F2;        /* 生成り。地の色 */
  --white:#FFFFFF;
  --muted:#5A6478;         /* 添えの字 */
  --rule:#DDD6C9;          /* 罫線 */
  --seal:#D23B26;          /* 落款の赤 */
  --wash:#F4F1EA;          /* 生成りより一段沈んだ面 */

  /* テーマ8色（CLAUDE.md の表と同じ） */
  --t-food:#D23B26;        /* 食 */
  --t-ferment:#EA6923;     /* 発酵 */
  --t-kitchen:#FEEB48;     /* キッチン */
  --t-farming:#3F7839;     /* ファーミング */
  --t-cloth:#4D6CB4;       /* 衣 */
  --t-house:#A59564;       /* 住 */
  --t-skin:#FBF8F2;        /* スキンケア */
  --t-mind:#450C44;        /* マインド */

  /* ページごとの差し色。既定はネイビー。
     🔴 白地とのコントラストが本文基準(4.5)を満たす色だけを差し色にする。
        発酵オレンジ3.21・黄1.22・利久茶2.96 は本文には使わない */
  --accent:var(--navy);

  /* 字の大きさ ── 🔴 15px未満は作らない */
  --fs-meta:15px;
  --fs-small:16px;
  --fs-body:18px;
  --fs-lead:20px;
  --fs-h3:21px;
  --fs-h2:clamp(25px,3.6vw,33px);
  --fs-h1:clamp(27px,4.4vw,40px);
  --fs-display:clamp(34px,6.4vw,72px);   /* 表紙の大見出し */

  /* 幅と間 */
  --col:1180px;            /* ページの柱 */
  --wide:1440px;           /* 広く使うとき */
  --read:720px;            /* 読ませる文の幅。これ以上広げない */
  --bar:1440px;
  --pad:28px;
  --gap-sec:104px;         /* 節と節のあいだ */
  --gap-half:56px;

  /* 写真の角 ── 🔴 既定は「中」。何も指定しない写真はこれになる（2026-08-25）
     画面いっぱいに見せる写真（表紙・全幅の帯）だけは角を立てたまま。
     エディタの「角」なし/小/中/大/全丸 は、この数字を差し替えるだけ */
  --r-s:clamp(6px,.5vw,8px);
  --r-m:clamp(11px,1vw,16px);
  --r-l:clamp(18px,2vw,30px);

  /* 動き。控えめに */
  --ease:cubic-bezier(.22,.61,.36,1);

  /* 🔴 表紙の写真の上端の色。メニューの帯をこれでつなぐと境目が消える。
        写真を替えたら測り直して貼り替える */
  --cover-top:linear-gradient(to right,
    #EEEFEA 0%, #EFEEE9 13%, #EAE9E7 25%, #ECEBE9 38%, #EEEDEB 50%,
    #EDECEA 62%, #ECEBE9 75%, #E8E7E5 87%, #F6F6F8 100%);
  --cover-flat:#ECEBE9;
}

/* ページごとの差し色 */
body.p-food   {--accent:var(--t-food)}
body.p-living {--accent:var(--t-farming)}
body.p-skin   {--accent:var(--navy)}      /* 肌のテーマ色は生成り。地の色に使い、字はネイビー */
body.p-journal{--accent:var(--t-mind)}

/* ══ 2. 土台 ═════════════════════════════════════════════════ */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:120px}
body{margin:0;overflow-x:hidden;
  background:var(--kinari);color:var(--navy);
  font-family:'Tinos','Klee One',serif;
  font-size:var(--fs-body);line-height:1.95;font-weight:400}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--navy);outline-offset:3px}

.wrap{max-width:var(--col);margin:0 auto;padding:0 var(--pad)}
.wrap.w{max-width:var(--wide)}
.narrow{max-width:860px;margin:0 auto;padding:0 var(--pad)}
.read{max-width:var(--read)}
.center{text-align:center}

/* 「文字を大きく」（足もとのボタン） */
body.big{--fs-meta:16px;--fs-small:17px;--fs-body:20px;--fs-lead:22px;--fs-h3:23px}

/* ── そっと現れる ──────────────────────────────────────────
   スクロールで下から少し上がりながら出る。強い動きは付けない。
   動きを止めている人の設定は必ず尊重する */
/* 🔴 既定は「見えている」。JavaScript が動いたときだけ隠して、出す。
      こうしておくと、JSが読めない・壊れた環境でも文と写真が必ず読める */
.reveal{opacity:1;transform:none;
  transition:opacity .9s var(--ease),transform .9s var(--ease)}
html.js .reveal{opacity:0;transform:translateY(18px)}
html.js .reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.10s}
.reveal.d2{transition-delay:.20s}
.reveal.d3{transition-delay:.30s}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .para img{transform:none !important}
}

/* ══ 3. 文字 ═════════════════════════════════════════════════ */
h1,h2,h3,h4{font-family:'Tinos','Klee One',serif;font-weight:600;letter-spacing:.02em}
h1{font-size:var(--fs-h1);line-height:1.45;margin:0 0 20px}
h2{font-size:var(--fs-h2);line-height:1.6;margin:0 0 20px}
h3{font-size:var(--fs-h3);line-height:1.6;margin:0 0 10px}
h4{font-size:var(--fs-small);line-height:1.7;margin:0 0 8px}
p{margin:0 0 1.35em}
p:last-child{margin-bottom:0}

/* 小さく置く見出しの上の一行。英字・字間広め */
.eyebrow{font-family:'Tinos',serif;font-size:var(--fs-meta);
  letter-spacing:.34em;color:var(--muted);margin:0 0 14px}
.eyebrow .n{color:var(--accent)}
/* 章番号つきの見出し */
.kicker{font-family:'Tinos',serif;font-size:var(--fs-meta);letter-spacing:.28em;
  color:var(--accent);margin:0 0 16px;display:flex;align-items:center;gap:14px}
.kicker::after{content:"";flex:1;height:1px;background:var(--rule)}
.center .kicker{justify-content:center}
.center .kicker::after{display:none}

.lead{font-size:var(--fs-lead);line-height:1.9}
.deck{font-family:'Klee One',serif;font-weight:600;
  font-size:clamp(20px,2.6vw,27px);line-height:1.95;margin:0 0 28px}
.note{color:var(--muted);font-size:var(--fs-small);line-height:1.9}
.trunk{font-family:'Klee One',serif;font-weight:600;
  font-size:clamp(21px,2.8vw,26px);line-height:1.9;margin:0 0 30px}

/* 文の中で強める（直す道具から付く）。
   🔴 大きさと色は別もの。小さくしたときに色まで変わらないように */
b,strong{font-weight:600}
.dai{font-size:1.18em}
.sho{font-size:max(15px,.86em)}
.c-navy{color:var(--navy)}
.c-muted{color:var(--muted)}
.c-food{color:var(--t-food)}
.c-farming{color:var(--t-farming)}
.c-cloth{color:var(--t-cloth)}
.c-mind{color:var(--t-mind)}
section.dark .c-navy,section.dark .c-mind{color:var(--kinari)}

/* 余白で分ける。囲み枠は使わない */
.stance{border-left:2px solid var(--rule);padding:16px 0 16px 22px;
  color:var(--muted);margin:0 0 40px}
.stance p{margin:0 0 .7em}
.stance p:last-child{margin:0}

/* 引く一行。大きく、余白の中に置く */
.pull{font-family:'Klee One',serif;font-weight:600;
  font-size:clamp(22px,3.4vw,34px);line-height:1.85;
  max-width:900px;margin:0 auto;text-align:center;
  padding:var(--gap-half) 0}
.pull .by{display:block;font-family:'Tinos',serif;font-weight:400;
  font-size:var(--fs-meta);letter-spacing:.2em;color:var(--muted);margin-top:26px}

hr{border:0;border-top:1px solid var(--rule);margin:var(--gap-sec) 0}

/* ══ 4. 面 ═══════════════════════════════════════════════════ */
section{padding:var(--gap-sec) 0}
section.tight{padding:var(--gap-half) 0}
section.paper{background:var(--white)}
section.wash{background:var(--wash)}
section.dark{background:var(--navy);color:var(--kinari)}
section.dark h1,section.dark h2,section.dark h3{color:var(--kinari)}
section.dark .eyebrow,section.dark .note{color:rgba(251,248,242,.68)}
section.dark .kicker{color:rgba(251,248,242,.82)}
section.dark .kicker::after{background:rgba(251,248,242,.28)}
section.flush{padding:0}

/* ══ 5. メニュー ═════════════════════════════════════════════
   印が中央、メニューも中央、右上に言語とSNS（いまのHPと同じ並び）。
   ホームだけ、表紙の写真の上端の色でつないで境目を消す              */
header{position:sticky;top:0;z-index:60;
  background:rgba(251,248,242,.96);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--rule);
  transition:background .25s ease,border-color .25s ease}
body.has-cover header{background:var(--cover-top);border-bottom-color:transparent;backdrop-filter:none}
body.has-cover header.past{background:rgba(251,248,242,.96);border-bottom-color:var(--rule);backdrop-filter:blur(8px)}

.bar{position:relative;max-width:var(--bar);margin:0 auto;padding:16px var(--pad) 0;text-align:center}
.brand{display:inline-block}
.brand img{width:56px;margin:0 auto}
.brand span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

.utils{position:absolute;right:var(--pad);top:20px;
  display:flex;align-items:center;gap:14px;font-size:var(--fs-meta);color:var(--muted)}
.langs{display:flex;gap:2px}
.langs a{font-family:'Tinos',serif;font-size:var(--fs-meta);letter-spacing:.06em;
  padding:6px 10px;border-radius:999px;color:var(--muted)}
.langs a[aria-current="true"]{background:var(--navy);color:var(--kinari)}
/* まだ書き出していない言語（押せない・準備中） */
.langs .soon{font-family:'Tinos',serif;font-size:var(--fs-meta);letter-spacing:.06em;
  padding:6px 10px;color:var(--muted);opacity:.45}
.sns{display:flex;gap:8px}
.sns a{width:34px;height:34px;border:1px solid var(--rule);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:'Tinos',serif;font-size:var(--fs-meta);color:var(--navy)}
/* 🔴 2026-09-10 ── 「IG」「f」「L」の文字を、本物のマーク（SVG）に替えた。
   色は currentColor で受けるので、上の色指定と hover の反転がそのまま効く。
   円の中に置くので、丸みのある四角の公式ロゴではなく、記号だけを使う */
.sns a svg{width:17px;height:17px;display:block}
.sns a[aria-label="Facebook"] svg{width:19px;height:19px}
.sns a[aria-label="LINE"] svg{width:19px;height:19px}
.sns a:hover{background:var(--navy);color:var(--kinari);border-color:var(--navy)}

#nav{display:flex;justify-content:center;align-items:center}
#nav>ul{display:flex;justify-content:center;flex-wrap:wrap;align-items:center;
  gap:2px;list-style:none;margin:0;padding:6px var(--pad) 14px}
#nav a,#nav .top{display:block;padding:10px 15px;font-size:var(--fs-small);line-height:1.2;
  border-radius:999px;white-space:nowrap;cursor:pointer;
  background:none;border:0;color:var(--navy);font-family:inherit}
#nav a:hover,#nav .top:hover{background:rgba(11,27,65,.07)}
#nav a[aria-current="page"]{font-weight:600}
/* 3つの柱には、その色の点をつける */
#nav a.pil{position:relative}
#nav a.pil::before{content:"";position:absolute;left:6px;top:50%;margin-top:-2px;
  width:4px;height:4px;border-radius:50%;background:var(--c);opacity:.85}
#nav a.pil{padding-left:20px}

.has-sub{position:relative}
.top::after{content:"▾";margin-left:6px;font-size:11px;/* 記号。字ではない */opacity:.6;vertical-align:1px}
.has-sub .sub{position:absolute;left:50%;transform:translateX(-50%) translateY(-6px);
  top:calc(100% + 2px);min-width:236px;text-align:left;
  background:var(--white);border:1px solid var(--rule);border-radius:4px;
  padding:8px;list-style:none;margin:0;
  box-shadow:0 14px 34px rgba(11,27,65,.13);
  opacity:0;visibility:hidden;transition:opacity .16s,transform .16s,visibility .16s}
.has-sub:hover .sub,.has-sub:focus-within .sub,.has-sub.open .sub{
  opacity:1;visibility:visible;transform:translateX(-50%)}
.has-sub .sub a{border-radius:3px;padding:10px 12px}

/* オンデマンドだけ細い枠（2026-08-21 YUKI 案A）。塗りつぶさない */
#nav a.pill{border:1px solid var(--navy);margin:0 5px}
#nav a.pill:hover{background:var(--navy);color:var(--kinari)}

.burger{display:none;position:absolute;left:var(--pad);top:18px;
  background:none;border:1px solid var(--rule);border-radius:999px;
  padding:10px 16px;font-size:var(--fs-small);color:var(--navy);cursor:pointer;font-family:inherit}

.progress{position:fixed;top:0;left:0;height:2px;width:0;
  background:var(--accent);z-index:70;transition:width .1s linear}

/* ══ 6. 押すもの ═════════════════════════════════════════════ */
.more{display:inline-block;font-family:'Tinos',serif;font-size:var(--fs-meta);
  letter-spacing:.22em;border-bottom:1px solid currentColor;padding-bottom:3px}
.more:hover{color:var(--accent);border-bottom-color:var(--accent)}
.btn{display:inline-block;font-family:'Tinos','Klee One',serif;
  font-size:var(--fs-small);letter-spacing:.1em;
  padding:15px 32px;border:1px solid currentColor;border-radius:999px;
  transition:background .2s,color .2s,border-color .2s}
.btn:hover{background:var(--navy);color:var(--kinari);border-color:var(--navy)}
.btn.solid{background:var(--navy);color:var(--kinari);border-color:var(--navy)}
.btn.solid:hover{background:transparent;color:var(--navy)}
section.dark .btn:hover{background:var(--kinari);color:var(--navy);border-color:var(--kinari)}
section.dark .btn.solid{background:var(--kinari);color:var(--navy);border-color:var(--kinari)}

/* 🔴 文の中のリンクも、指で押せる高さにする（24px以上）。
      inline のままなので、長いリンクが行をまたいでも崩れない。
      クラスの付いたリンク（.more .btn .door …）は自前の余白を持つので外す */
/* 文の段落の中だけ。並び（.chips .toc など）は自前の余白を持っている */
main p a:not([class]),a[href^="mailto:"]{padding:4px 0}

/* いま、ここ */
.crumb{font-size:var(--fs-meta);color:var(--muted);padding:22px 0 0}
.crumb a{display:inline-block;padding:5px 0}
.crumb a:hover{color:var(--navy)}
.crumb span{margin:0 8px;opacity:.6}

/* ══ 7. 写真の見せ方 ═════════════════════════════════════════
   🔴 TANEの写真は説明の絵ではない。空気・時間・素材・手・温度を運ぶ。
      だから「四角く並べる」ことをしない。
      加工はしない（色を足さない）。切り方と大きさと余白で見せる。      */

/* ── 7-0 写真の角 ─────────────────────────────────────────────
   🔴 ここ一か所で全部の写真の角を決める（2026-08-25）。
      既定＝「中」。エディタで替えた写真だけが、その指定に従う。

   仕組み ── エディタは写真（img）に s-round-◯ を貼る。それが --r を書き換える。
      写真を切っている枠（.ph / .mosaic .c）は :has で中の指定を読み取り、
      枠と写真の角をそろえる。**枠だけ四角く残って地色が覗く事故**を防ぐため。

   角を立てたままにする場所 ── 画面いっぱいに見せる写真。
      表紙（.stage / .cover）と 全幅の帯（.bleed）。
      それでもエディタで角を付けたければ付けられる（var(--r, 0) の 0 が既定）。

   🔴 人物の丸い顔（.m .ph / .bio .ph）と、記号の絵（.geo）は対象外。      */

/* 中の写真に付いた指定を、切り枠にも伝える */
.ph:has(> .s-round-none),.mosaic .c:has(> .s-round-none){--r:0}
.ph:has(> .s-round-s),   .mosaic .c:has(> .s-round-s)   {--r:var(--r-s)}
.ph:has(> .s-round-m),   .mosaic .c:has(> .s-round-m)   {--r:var(--r-m)}
.ph:has(> .s-round-l),   .mosaic .c:has(> .s-round-l)   {--r:var(--r-l)}
.ph:has(> .s-round-full),.mosaic .c:has(> .s-round-full){--r:999px}

/* 切り枠（中で写真が cover されているところ）*/
.door .ph,.pillar .ph,.post .ph,.card .ph,.split .ph,.mosaic .c{
  border-radius:var(--r,var(--r-m))}

/* 写真そのもの */
.band img,.fig img,.article figure img,.give .ph img,.duo .ph img,
.lap .a img,.lap .b img,.strip img,.ph img{border-radius:var(--r,var(--r-m))}

/* 角を立てたまま置く ── 画面いっぱいの写真 */
.stage>img,.cover>img,.bleed img{border-radius:var(--r,0)}

/* 対象外 ── 丸い顔と記号 */
.m .ph,.bio .ph,.m .ph img,.bio .ph img{--r:0}
.geo .g img{border-radius:0}

/* ── 7-1 全画面の表紙。写真の上に字を置く ── */
.stage{position:relative;min-height:min(92vh,860px);display:flex;align-items:flex-end;
  overflow:hidden;background:var(--wash)}
.stage>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.stage::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,27,65,.30) 0%,rgba(11,27,65,.06) 38%,rgba(11,27,65,.52) 100%)}
.stage .in{position:relative;z-index:2;width:100%;padding-bottom:clamp(48px,7vw,96px);color:var(--kinari)}
.stage h1{font-family:'Tinos',serif;font-weight:400;font-size:var(--fs-display);
  line-height:1.08;letter-spacing:.06em;margin:0 0 18px;color:var(--kinari)}
.stage .jp{font-family:'Klee One',serif;font-weight:600;
  font-size:clamp(19px,2.4vw,27px);line-height:1.8;margin:0;color:var(--kinari)}
.stage .eyebrow{color:rgba(251,248,242,.86)}
/* 明るい写真のときは字をネイビーに（膜も生成りにする）。
   🔴 下半分をしっかり明るくしないと、小さい英字が写真に負ける */
.stage.light::after{background:linear-gradient(180deg,
  rgba(251,248,242,.26) 0%, rgba(251,248,242,.04) 28%,
  rgba(251,248,242,.58) 58%, rgba(251,248,242,.94) 100%)}
.stage.light .in,.stage.light h1,.stage.light .jp{color:var(--navy)}
.stage.light .eyebrow{color:var(--navy);opacity:.7}

/* ── 7-2 表紙（ホーム）。写真を切らずに全部見せ、上に社名 ── */
.cover{position:relative;background:var(--cover-flat);margin-top:-1px}
.cover>img{width:100%;height:auto;display:block}
.cover .t{position:absolute;left:50%;top:22%;transform:translateX(-50%);
  text-align:center;color:var(--navy);width:100%;padding:0 24px}
.cover .t h1{font-family:'Tinos',serif;font-weight:400;
  font-size:clamp(23px,3.6vw,46px);line-height:1.2;letter-spacing:.08em;margin:0}
.cover .t h1 span{display:block;font-size:max(15px,.54em);letter-spacing:.28em;margin-top:.42em}

/* ── 7-3 全幅の帯。横長の写真だけをここに置く ── */
.bleed{position:relative;overflow:hidden}
.bleed img{width:100%;height:auto;display:block}
.bleed.tall img{height:min(78vh,700px);object-fit:cover}
.bleed .over{position:absolute;inset:0;display:flex;align-items:center;z-index:2}
.bleed .over.mid{justify-content:center;text-align:center}
/* 写真の上に字を置くとき、字の側だけ明るく／暗くする膜 */
.bleed .veil-l::after,.bleed .veil-d::after{content:"";position:absolute;inset:0}
.veil-l::after{background:linear-gradient(100deg,rgba(251,248,242,.92) 0%,rgba(251,248,242,.78) 44%,rgba(251,248,242,.06) 100%)}
.veil-d::after{background:linear-gradient(100deg,rgba(11,27,65,.72) 0%,rgba(11,27,65,.44) 46%,rgba(11,27,65,.06) 100%)}
.veil-d,.veil-d h2,.veil-d p{color:var(--kinari)}
.bleed .tx{position:relative;z-index:3;max-width:620px}

/* ゆっくり動く（視差）。強くしない */
.para{overflow:hidden}
.para img{will-change:transform;transition:transform .05s linear}

/* ── 7-4 写真を切らずに置く（幅で大きさを決める） ── */
.band{max-width:960px;margin:0 auto;padding:0 var(--pad)}
.band img{width:100%;height:auto}
.band.small{max-width:680px}
/* 写真とことばの距離 ── 近すぎると説明文になり、離れすぎると迷子になる */
.band figcaption,.fig figcaption{margin-top:20px;font-size:var(--fs-meta);
  line-height:1.95;color:var(--muted);letter-spacing:.02em}
.band figcaption{text-align:center;max-width:56ch;margin-left:auto;margin-right:auto}
.fig{margin:0}
.fig img{width:100%;height:auto}

/* ── 7-5 左右に分ける ──
   既定は半々。**文の側を狭くすると見出しが不自然に折れる**ので、
   崩れない半々を既定にして、片側を広げたいときだけ ph-l / ph-r を付ける。
     .ph-l … 写真が左で小さめ、文が右で広い
     .ph-r … 文が左で広い、写真が右で小さめ                                  */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,5.6vw,96px);align-items:center}
.duo.ph-l{grid-template-columns:.88fr 1.12fr}
.duo.ph-r{grid-template-columns:1.12fr .88fr}
.duo.rev .ph{order:2}
.duo .ph img{width:100%;height:auto}
/* 🔴 比率は --ar で渡す。直に aspect-ratio と書くと、
      エディタで選んだ「縦長／横長／四角」が効かなくなる（2026-08-25 実測） */
.duo .ph.crop img{aspect-ratio:var(--ar,4/5);object-fit:cover;
  min-height:clamp(280px,27vw,440px)}
.duo .ph.crop.wide{--ar:5/4}

/* ── 7-6 2枚を重ねる ── */
.lap{position:relative;padding-bottom:clamp(40px,7vw,90px)}
.lap .a img{width:100%;height:auto}
/* 重ねた小さいほう ── 影は「浮かせる」ためではなく、境目を作るため。
   角を丸めたので影は弱めて、下にだけ落とす */
.lap .b{position:absolute;right:0;bottom:0;width:clamp(150px,31%,330px);
  filter:drop-shadow(0 18px 38px rgba(11,27,65,.16))}
.lap .b img{width:100%;height:auto}
.lap.left .b{right:auto;left:0}

/* ── 7-7 大小を混ぜた編集グリッド（TANEを一目で伝える面） ──
   写真を「並べる」のではなく、大きさの差で視線の順を作る */
/* 角を丸めたぶん、間を少し広げる。詰まっているとタイルに見える */
.mosaic{display:grid;grid-template-columns:repeat(12,1fr);
  gap:clamp(12px,1.7vw,26px);align-items:stretch}
/* width/min-width ── 写真の元の大きさや比率の計算で、
   マスが列より広がることがある（実測でセル1つだけ438pxになった）。
   幅は必ず「自分の列ぶん」に留める */
.mosaic .c{position:relative;overflow:hidden;background:var(--wash);
  min-width:0;width:100%;max-width:100%}
.mosaic .c img{width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s var(--ease)}
.mosaic a.c:hover img{transform:scale(1.045)}
.mosaic .c .cap{position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:20px 22px;color:var(--kinari);
  background:linear-gradient(to top,rgba(11,27,65,.62),rgba(11,27,65,0))}
.mosaic .c .cap .k{display:block;font-family:'Tinos',serif;font-size:var(--fs-meta);
  letter-spacing:.24em;opacity:.9}
.mosaic .c .cap .n{display:block;font-family:'Klee One',serif;font-weight:600;
  font-size:var(--fs-lead);line-height:1.5;margin-top:4px}
/* 置き方。12列のうち何列ぶん・何行ぶん使うか */
.m-6x2{grid-column:span 6;grid-row:span 2}
.m-6{grid-column:span 6}
.m-4{grid-column:span 4}
.m-3{grid-column:span 3}
.m-8{grid-column:span 8}
.ratio-1{aspect-ratio:1/1}
.ratio-45{aspect-ratio:4/5}
.ratio-54{aspect-ratio:5/4}
.ratio-32{aspect-ratio:3/2}
.ratio-full{aspect-ratio:auto;height:100%}

/* ── 7-8 横に流れる写真列（スマホは指でなぞる） ──
   🔴 同じ大きさの写真が等間隔で並ぶと、目録に見えて読み飛ばされる（2026-08-25）。
      形も高さも変えず「比率」と「高さの起点」だけをずらして、流れを作る。
      ・奇数枚目＝縦長（4:5） ／ 偶数枚目＝正方形（1:1）→ 下端が揃わない
      ・パソコンでは偶数枚目を少し下げる → ゆるい波になる
      飾りは足していない。切り方と置き場所だけで作っている。               */
.strip{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(clamp(168px,15.5vw,232px),1fr);
  gap:clamp(14px,1.9vw,28px);align-items:start;
  overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:8px;-webkit-overflow-scrolling:touch}
.strip::-webkit-scrollbar{height:3px}
.strip::-webkit-scrollbar-thumb{background:var(--rule)}
.strip>*{scroll-snap-align:start;margin:0}
.strip img{width:100%;aspect-ratio:var(--ar,4/5);object-fit:cover;display:block}
.strip>*:nth-child(even){--ar:1/1}
.strip figcaption{margin-top:18px;font-size:var(--fs-meta);color:var(--muted);
  line-height:1.95;max-width:24em}
/* 見出しの語（糀・味噌…）は一段強く。説明はその下に添える。
   原稿の <br> は、b を行にした時点で余分になるので消す */
.strip figcaption b,.strip figcaption strong{display:block;font-weight:600;
  color:var(--navy);margin-bottom:.3em}
.strip figcaption br{display:none}
/* 🔴 ずらしは margin で作る。transform だと .reveal.in{transform:none} に
      打ち消される（2026-08-25 実測） */
@media (min-width:901px){
  .strip>*:nth-child(even){margin-top:clamp(18px,2.4vw,38px)}
}

/* ══ 8. 章立ての部品 ═════════════════════════════════════════ */

/* 入口が並ぶ（動詞＋一行。囲み全部が押せる） */
.doors{display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(38px,4.4vw,56px) clamp(28px,3.4vw,44px);text-align:left}
.doors.three{grid-template-columns:repeat(3,1fr)}
.door{display:block}
.door .ph{aspect-ratio:4/3;overflow:hidden;background:var(--rule);margin:0 0 22px}
.door .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.door:hover .ph img{transform:scale(1.045)}
.door h3{font-size:23px;line-height:1.5;margin:0 0 4px;letter-spacing:.08em}
.door .what{font-family:'Klee One',serif;font-size:17px;line-height:1.7;margin:0 0 8px}
.door .sub{color:var(--muted);font-size:var(--fs-small);line-height:1.85;margin:0 0 16px}

/* 三つの柱（食・暮らし・肌）と、そのあいだの循環 */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,40px)}
.pillar{display:block;position:relative}
.pillar .ph{aspect-ratio:3/4;overflow:hidden;background:var(--wash)}
.pillar .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.pillar:hover .ph img{transform:scale(1.05)}
.pillar .en{font-family:'Tinos',serif;font-size:clamp(22px,2.6vw,30px);
  letter-spacing:.22em;margin:22px 0 2px;color:var(--c,var(--navy))}
.pillar .jp{font-family:'Klee One',serif;font-weight:600;font-size:var(--fs-lead);margin:0 0 10px}
.pillar .sub{color:var(--muted);font-size:var(--fs-small);line-height:1.85;margin:0}

/* 入口を4つ並べる段（DISCOVER TANE の下）。三つの柱より一段小さくして、
   「何の話か（3つ）」と「どう受け取るか（4つ）」の上下を保つ */
.pillars.four{grid-template-columns:repeat(4,1fr);margin-top:clamp(44px,5vw,72px)}
.pillars.four .pillar .ph{aspect-ratio:1/1}
.pillars.four .pillar .en{font-size:var(--fs-small);letter-spacing:.2em;margin:16px 0 2px}
.pillars.four .pillar .jp{font-size:var(--fs-body)}
.pillars.four .pillar .sub{font-size:var(--fs-meta)}

/* 順に読む（1・2・3…） */
.steps{margin:0;padding:0;list-style:none;counter-reset:s}
.steps li{counter-increment:s;position:relative;
  padding:0 0 26px 58px;font-size:var(--fs-small);line-height:1.95}
.steps li::before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:0;
  font-family:'Tinos',serif;font-size:var(--fs-meta);letter-spacing:.1em;color:var(--accent)}
.steps li b{display:block;font-size:var(--fs-body);margin-bottom:4px}

/* ページ内の目次 */
.toc{margin:44px 0 0;padding:0;list-style:none;border-top:1px solid var(--rule)}
.toc li{border-bottom:1px solid var(--rule)}
.toc a{display:block;padding:14px 0;font-size:var(--fs-small)}
.toc a:hover{padding-left:8px;transition:padding .15s}
.toc a.now{font-weight:600}
.toc .n{font-family:'Tinos',serif;color:var(--muted);margin-right:14px}

/* 記事の並び（Journal） */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(32px,3.6vw,48px)}
.posts.two{grid-template-columns:repeat(2,1fr)}
.post{display:block}
.post .ph{aspect-ratio:4/3;overflow:hidden;background:var(--wash);margin:0 0 18px}
.post .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.post:hover .ph img{transform:scale(1.045)}
.post .meta{font-family:'Tinos',serif;font-size:var(--fs-meta);letter-spacing:.14em;
  color:var(--muted);margin:0 0 8px}
.post .meta .cat{color:var(--c,var(--accent))}
.post h3{font-size:var(--fs-lead);line-height:1.65;margin:0 0 8px}
.post p{font-size:var(--fs-small);color:var(--muted);line-height:1.85;margin:0}
/* 大きく出す1本 */
.post.lead-post{grid-column:span 2}
.post.lead-post .ph{aspect-ratio:16/9}
.post.lead-post h3{font-size:clamp(23px,2.6vw,30px)}

/* 分類の帯 */
.chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.chips a{display:block;padding:9px 18px;border:1px solid var(--rule);border-radius:999px;
  font-size:var(--fs-meta)}
.chips a:hover,.chips a[aria-current="true"]{background:var(--navy);color:var(--kinari);border-color:var(--navy)}

/* 3列の考え（WHY/HOW/WHAT など） */
.core{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(32px,4vw,52px)}
.core .w{border-top:2px solid var(--navy);padding-top:26px}
.core .w h3{font-family:'Tinos',serif;font-weight:400;font-size:27px;
  letter-spacing:.24em;margin:0 0 16px}
.core .w p{font-size:var(--fs-small);line-height:1.95;margin:0}

/* 二つの図（ロゴの説明など） */
.geo{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(36px,5vw,60px)}
.geo .g{text-align:center}
.geo .g img{width:min(200px,52vw);margin:0 auto 26px}
.geo .g h3{font-family:'Tinos',serif;font-weight:400;font-size:21px;letter-spacing:.16em;margin:0 0 4px}
.geo .g .jp{font-size:var(--fs-meta);color:var(--muted);margin:0 0 18px}
.geo .g p{font-size:var(--fs-small);line-height:1.95;text-align:left;margin:0 0 .9em}

/* 人の紹介 */
.team{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(32px,4vw,52px)}
.m{border-top:2px solid var(--navy);padding-top:26px}
.m .ph{width:132px;height:132px;border-radius:50%;overflow:hidden;margin:0 0 22px;background:var(--rule)}
.m .ph img{width:100%;height:100%;object-fit:cover;filter:saturate(.72) sepia(.08) contrast(1.02)}
.m.hinone .ph img{filter:saturate(.70) sepia(.10) contrast(1.20) brightness(.95)}
.m.evan   .ph img{filter:saturate(.52) sepia(.10) contrast(1.04)}
.m h3{font-size:22px;line-height:1.5;margin:0 0 2px;letter-spacing:.06em}
.m .role{font-family:'Tinos',serif;font-size:var(--fs-meta);letter-spacing:.18em;
  color:var(--muted);margin:0 0 16px}
.m p{font-size:var(--fs-small);line-height:1.95;margin:0}

.bio{display:grid;grid-template-columns:190px 1fr;gap:44px;align-items:start;
  border-top:2px solid var(--navy);padding-top:30px;margin:0 0 58px}
.bio:last-child{margin-bottom:0}
.bio .ph{width:170px;height:170px;border-radius:50%;overflow:hidden;background:var(--rule)}
.bio .ph img{width:100%;height:100%;object-fit:cover;filter:saturate(.72) sepia(.08) contrast(1.02)}
.bio.hinone .ph img{filter:saturate(.70) sepia(.10) contrast(1.20) brightness(.95)}
.bio.evan   .ph img{filter:saturate(.52) sepia(.10) contrast(1.04)}
.bio h3{font-size:24px;margin:0 0 2px;letter-spacing:.06em}
.bio .role{font-family:'Tinos',serif;font-size:var(--fs-meta);letter-spacing:.18em;
  color:var(--muted);margin:0 0 20px}
.bio ul{margin:0;padding:0;list-style:none}
.bio li{position:relative;padding:0 0 12px 20px;font-size:var(--fs-small);line-height:1.95}
.bio li::before{content:"";position:absolute;left:0;top:14px;width:6px;height:6px;
  border-radius:50%;background:var(--rule)}

/* 声 */
.voices{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(32px,3.6vw,42px)}
.v{border-top:1px solid var(--rule);padding-top:20px}
.v .who{font-family:'Tinos',serif;font-size:var(--fs-meta);letter-spacing:.2em;
  color:var(--muted);margin:0 0 10px}
.v p{font-size:var(--fs-small);line-height:2;margin:0}
.vfull{max-width:var(--read);margin:0 auto}
.vfull .v{padding:34px 0 0;margin:0 0 40px}
.vfull .v p{font-size:var(--fs-body);line-height:2.05;margin:0 0 1em}

/* この先へ */
.next{display:grid;grid-template-columns:repeat(2,1fr);gap:36px}
.next.three{grid-template-columns:repeat(3,1fr)}
.next a{display:block;border-top:1px solid var(--rule);padding:24px 0 0}
.next a:hover{border-top-color:var(--accent)}
.next h3{margin:0 0 6px}
.next p{font-size:var(--fs-small);color:var(--muted);margin:0 0 14px}

/* 前 ／ 次 */
.seq{border-top:1px solid var(--rule);display:grid;grid-template-columns:1fr 1fr;gap:20px}
.seq a{display:block;padding:26px 0;font-size:var(--fs-small);line-height:1.7}
.seq a:hover{color:var(--accent)}
.seq .r{text-align:right}
.seq .lb{display:block;font-family:'Tinos',serif;font-size:var(--fs-meta);
  letter-spacing:.18em;color:var(--muted);margin-bottom:6px}
.seq .none{padding:26px 0}

/* 質問と答え */
.qa{border-top:1px solid var(--rule)}
.qa details{border-bottom:1px solid var(--rule)}
.qa summary{cursor:pointer;padding:22px 0;font-size:var(--fs-body);
  list-style:none;display:flex;gap:16px;align-items:flex-start}
.qa summary::-webkit-details-marker{display:none}
.qa summary::before{content:"＋";font-family:'Tinos',serif;color:var(--accent);flex:none;line-height:1.7}
.qa details[open] summary::before{content:"−"}
.qa .a{padding:0 0 24px 32px;font-size:var(--fs-small);color:var(--muted);line-height:1.95}

/* 読ませる型の入口 */
.pagehead{padding:76px 0 0}
.pagehead .mark{width:56px;margin:0 0 34px}
.pagehead h1{margin-bottom:14px}
.pagehead .rule{height:1px;background:var(--rule);margin:34px 0 0}

/* 記事本文 */
.article{max-width:var(--read);margin:0 auto}
.article h2{font-size:clamp(22px,2.6vw,28px);margin:2.2em 0 .7em}
.article h3{margin:1.8em 0 .5em}
.article figure{margin:2.4em 0}
.article figure img{width:100%;height:auto}
.article figcaption{margin-top:14px;font-size:var(--fs-meta);color:var(--muted);line-height:1.9}
.article ul,.article ol{padding-left:1.3em}
.article li{margin-bottom:.6em}

/* ══ 9. ページごとの型 ═══════════════════════════════════════ */
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:46px 40px}
.cards.three{grid-template-columns:repeat(3,1fr);gap:40px 32px}
.card{display:block}
.card .ph{aspect-ratio:4/3;overflow:hidden;background:var(--rule)}
.card .ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.card:hover .ph img{transform:scale(1.035)}
.card h3{margin:20px 0 6px}
.card .note{margin:0 0 14px}

.give{display:grid;grid-template-columns:1fr 1.15fr;gap:56px;align-items:center}
.give .ph img{width:100%;height:auto}
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.split .ph{aspect-ratio:4/5;overflow:hidden}
.split .ph img{width:100%;height:100%;object-fit:cover}

/* 数字を見せる（実績・分量など） */
.figs{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;text-align:center}
.figs .f .n{font-family:'Tinos',serif;font-size:clamp(30px,4vw,46px);
  line-height:1.2;color:var(--accent);display:block}
.figs .f p{font-size:var(--fs-meta);color:var(--muted);margin:10px 0 0}

/* ══ 10. 足もと ══════════════════════════════════════════════
   ネイビーは重いので生成りに。ロゴはネイビー（2026-08-22 YUKI）       */
.tail .newsletter{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px;max-width:520px}
.tail input{flex:1;min-width:220px;padding:15px 16px;font-size:17px;font-family:inherit;
  border:1px solid var(--rule);border-radius:3px;background:var(--white);color:var(--navy)}
.tail input::placeholder{color:var(--muted)}
.tail button{padding:15px 28px;font-size:var(--fs-small);font-family:'Tinos',serif;
  letter-spacing:.16em;border:0;border-radius:3px;
  background:var(--navy);color:var(--kinari);cursor:pointer}
.tail .note a{display:inline-block;padding:5px 0}

/* 🔴 足もとは TANE の緑（2026-08-24 YUKI）。
   字は生成り（緑地とのコントラスト5.01＝本文の基準4.5を満たす）。
   罫線とうすい字は、生成りを透かして作る（別の色を足さない） */
footer{background:var(--t-farming);color:var(--kinari);
  --f-line:rgba(251,248,242,.26);--f-dim:rgba(251,248,242,.82);
  border-top:1px solid var(--f-line);padding:74px 0 48px}
.fmap{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;margin-bottom:54px}
.fmap h4{font-size:var(--fs-small);margin:0 0 12px;letter-spacing:.06em;color:var(--kinari)}
.fmap a{display:block;font-size:var(--fs-small);color:var(--f-dim);padding:5px 0}
.fmap a:hover{color:var(--kinari);text-decoration:underline;text-underline-offset:4px}
.fbot{display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  border-top:1px solid var(--f-line);padding-top:30px;font-size:var(--fs-meta);color:var(--f-dim)}
.fbot .fmk{width:34px}
.fbot .seal{margin-left:auto;width:50px}
/* 🔴 落款は面の字と同じ色にする（緑の上で赤は沈むため）。
   CLAUDE.md の「ロゴの色はその面の文字色と同じ」に合わせる */
footer .seal{filter:brightness(0) invert(1);opacity:.92}
footer .sns a{border-color:var(--f-line);color:var(--kinari)}
footer .sns a:hover{background:var(--kinari);color:var(--t-farming);border-color:var(--kinari)}
.big-t{border:1px solid var(--f-line);border-radius:999px;padding:9px 16px;
  font-size:var(--fs-meta);font-family:inherit;color:var(--f-dim);background:none;cursor:pointer}
.big-t:hover,.big-t[aria-pressed="true"]{background:var(--kinari);color:var(--t-farming);border-color:var(--kinari)}

.totop{position:fixed;right:24px;bottom:24px;z-index:55;
  width:48px;height:48px;border-radius:50%;
  border:1px solid var(--rule);background:rgba(251,248,242,.94);
  color:var(--navy);font-size:17px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .2s,transform .2s,visibility .2s}
.totop.on{opacity:1;visibility:visible;transform:none}
.totop:hover{background:var(--navy);color:var(--kinari)}
.totoc{bottom:80px;width:auto;padding:0 16px;border-radius:999px;
  font-family:'Klee One',serif;font-size:var(--fs-meta)}

/* ══ 11. 画面が狭いとき ══════════════════════════════════════
   🔴 パソコン版の縮小ではない。スマホでも写真が主役であること      */
@media (max-width:1000px){
  /* 🔴 狭い画面では12列をやめて、素直な2列にする。
        12列のまま span を割り直すと、自動配置の隙間で列がはみ出すことがある。
        ratio-full は「隣の高さに合わせる」ためのものなので、
        縦積みでは合わせる相手がおらず、4:3 に戻す */
  .mosaic{grid-template-columns:repeat(2,1fr)}
  .mosaic .c{min-width:0}
  .mosaic .ratio-full{aspect-ratio:4/3;height:auto}
  .mosaic .m-6x2{grid-column:span 2;grid-row:span 1}
  .mosaic .m-6,.mosaic .m-8{grid-column:span 2}
  .mosaic .m-4{grid-column:span 1}
  .mosaic .m-3{grid-column:span 1}
  .posts,.core,.team,.voices,.figs{grid-template-columns:repeat(2,1fr)}
  .post.lead-post{grid-column:span 2}
}
@media (max-width:900px){
  :root{--gap-sec:68px;--gap-half:40px}
  body{font-size:17px}
  .bar{padding-top:14px}
  .brand img{width:46px}
  .burger{display:block}
  .utils{position:static;justify-content:center;padding:12px 0 0}
  #nav{position:fixed;inset:74px 0 auto;background:var(--kinari);
    border-bottom:1px solid var(--rule);margin:0;display:none;
    max-height:calc(100vh - 74px);overflow:auto;flex-direction:column;align-items:stretch}
  #nav.open{display:flex}
  #nav>ul{flex-direction:column;align-items:stretch;gap:0;padding:10px var(--pad) 16px}
  #nav a,#nav .top{padding:15px 6px;border-radius:0;
    border-bottom:1px solid var(--rule);text-align:left;width:100%}
  #nav a.pil{padding-left:20px}
  #nav a.pill{border:0;border-bottom:1px solid var(--rule);margin:0;font-weight:600}
  .top::after{float:right}
  .has-sub .sub{position:static;transform:none;opacity:1;visibility:visible;display:none;
    box-shadow:none;border:0;background:none;padding:0 0 0 18px;min-width:0}
  .has-sub.open .sub{display:block}
  .has-sub .sub a{border-bottom:1px solid var(--rule)}

  .cover .t{top:15%}
  .stage{min-height:min(84vh,680px)}
  .bleed.tall img{height:56vh}
  .band.small{max-width:none}
  /* 🔴 .ph-l / .ph-r を書き落とすと、スマホで縦に積まれない（2026-08-25 実測）。
        .duo.ph-r は名前が2つ ＝ ここの .duo より強いので、名指しが要る */
  .duo,.duo.rev,.duo.ph-l,.duo.ph-r,
  .split,.give,.geo,.next,.next.three{grid-template-columns:1fr;gap:32px}
  /* 縦に積んだら、写真の下限の高さは要らない（幅で決まる） */
  .duo .ph.crop img{min-height:0}
  .duo.rev .ph{order:0}
  .doors,.doors.three{grid-template-columns:1fr;gap:44px}
  .pillars{grid-template-columns:1fr;gap:44px}
  /* 4つの入口は、狭いときは2列。1列にすると縦に伸びすぎる */
  .pillars.four{grid-template-columns:repeat(2,1fr);gap:30px}
  .posts,.posts.two,.core,.team,.voices,.figs,.cards,.cards.three,.fmap{
    grid-template-columns:1fr;gap:34px}
  .post.lead-post{grid-column:span 1}
  .bio{grid-template-columns:1fr;gap:22px}
  .bio .ph{width:132px;height:132px}
  .lap .b{width:44%}
  .seq{grid-template-columns:1fr;gap:0}
  .seq .r{text-align:left}
  .seq a{padding:20px 0;border-top:1px solid var(--rule)}
  .seq a:first-child{border-top:0}
  .totop{right:16px;bottom:16px;width:44px;height:44px}
  .totoc{bottom:70px}
  .split .ph{aspect-ratio:4/3}
}
@media (max-width:560px){
  .mosaic .m-4,.mosaic .m-3{grid-column:span 2}
  .strip{grid-auto-columns:minmax(76%,1fr)}
}


/* ══ 14. 読みもの（LIBRARY）══════════════════════════════════
   長い文章を最後まで読ませるための型。
   ここだけ本文を一段大きくして、行間も広くとる（40〜50代が長時間読む前提）。

   使い方 ── ページの一番外に .rd を置き、中は
     .rd-hero（全幅の表紙写真）
     .rd-lede（入口の文）
     .toc（目次・既存の型）
     section.rd-ch（章）＝ .rd-no（番号）＋ h2 ＋ h3 ＋ 本文
     .rd-box（早見・情報を整理して見せる箱）
     .pull（引く一行・既存の型）
     .rd-src（出どころ・小さく）
   🔴 新しい読みものを足すときも、この名前だけで組む            */

.rd{--fs-rd:clamp(18px,.55vw + 15.9px,20px);   /* 本文。スマホ18px・PC20px */
    --lh-rd:2.05;
    --read:760px}      /* 読ませる幅。1行 約38字（日本語で読みやすいのは35〜40字）*/

/* ── 表紙 ── 読みものの決まり：テーマ色の地に、文字と印 ──
   （配布しているカバー画像と同じ組み方。文字は画像にせず、そのまま文字で置く。
     大きな画面でもぼやけない・検索にも読まれる・エディタから直せる）        */
.rd-cover{background:var(--cov-bg,var(--kinari));color:var(--cov-ink,var(--navy));
  padding:clamp(52px,7.5vw,104px) 0;
  /* 地の色がサイトと同じ（生成り）ときも、表紙として分かるように一本 */
  border-bottom:1px solid var(--cov-rule,rgba(11,27,65,.14))}
.rd-cover .in{display:grid;grid-template-columns:1fr auto;
  gap:clamp(20px,4vw,64px);align-items:center}
.rd-cover .brandline{font-family:'Tinos',serif;letter-spacing:.34em;font-size:var(--fs-meta);
  color:inherit;opacity:.92;margin:0 0 clamp(22px,3vw,40px)}
.rd-cover h1{color:inherit;font-size:clamp(29px,4.6vw,54px);line-height:1.5;
  margin:0 0 clamp(16px,2vw,26px);max-width:min(100%,15em)}
.rd-cover .rd-sub{color:inherit;opacity:.94;font-size:var(--fs-lead);line-height:1.9;
  margin:0;max-width:min(100%,30em)}
.rd-cover .rd-meta{font-family:'Tinos',serif;font-size:var(--fs-meta);letter-spacing:.18em;
  color:inherit;opacity:.72;margin:clamp(20px,2.4vw,32px) 0 0;display:flex;gap:18px;flex-wrap:wrap}
.rd-cover .mk{width:clamp(76px,10vw,168px);height:auto}

/* テーマ色（CLAUDE.md の8色から。1冊＝1色） */
.cov-skin{--cov-bg:#FBF8F2;--cov-ink:#0B1B41}
.cov-food{--cov-bg:#D23B26;--cov-ink:#FBF8F2;--cov-rule:rgba(251,248,242,.22)}
.cov-living{--cov-bg:#3F7839;--cov-ink:#FBF8F2;--cov-rule:rgba(251,248,242,.22)}
.cov-tane{--cov-bg:#0B1B41;--cov-ink:#FBF8F2;--cov-rule:rgba(251,248,242,.22)}

/* ── 表紙に写真を使いたいときだけ（例外）── */
.rd-hero{position:relative;min-height:min(78svh,720px);display:flex;align-items:flex-end;
  overflow:hidden;background:var(--wash)}
.rd-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:var(--pos,50% 50%)}
.rd-hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,27,65,.34) 0%,rgba(11,27,65,.10) 40%,rgba(11,27,65,.62) 100%)}
.rd-hero .in{position:relative;z-index:2;width:100%;color:var(--kinari);
  padding-bottom:clamp(40px,6vw,84px)}
.rd-hero .eyebrow{color:rgba(251,248,242,.86)}
.rd-hero h1{color:var(--kinari);font-size:clamp(28px,4.6vw,52px);line-height:1.4;
  margin:0 0 16px;max-width:min(100%,16em)}   /* 日本語なので em で測る（ch だと半分になる）*/
.rd-hero .rd-sub{   /* 🔴 .sub はメニューの引き出しが使っている名前。混ぜない */
  font-size:var(--fs-lead);line-height:1.9;margin:0;max-width:min(100%,30em);
  color:rgba(251,248,242,.94)}
.rd-hero .rd-meta{font-family:'Tinos',serif;font-size:var(--fs-meta);letter-spacing:.18em;
  color:rgba(251,248,242,.8);margin:22px 0 0;display:flex;gap:18px;flex-wrap:wrap}

/* ── 本文 ── */
.rd-body{font-size:var(--fs-rd);line-height:var(--lh-rd)}
.rd-body p{margin:0 0 1.55em}
.rd-lede{font-size:calc(var(--fs-rd) * 1.12);line-height:1.95}
.rd-lede p:last-child{margin-bottom:0}

/* ── 章（大見出し）── */
.rd-ch{padding:clamp(56px,7vw,96px) 0 0}
.rd-ch + .rd-ch{padding-top:clamp(48px,6vw,84px)}
.rd-no{font-family:'Tinos',serif;font-size:var(--fs-meta);letter-spacing:.3em;
  color:var(--accent);margin:0 0 14px;display:flex;align-items:center;gap:14px}
.rd-no::after{content:"";flex:1;height:1px;background:var(--rule)}
.rd-ch>.wrap>.read>h2,.rd-ch h2{font-size:clamp(24px,3.2vw,32px);line-height:1.6;margin:0 0 24px}
/* 小見出し ── 本文より少し大きく、上に息を置く */
.rd-body h3{font-size:calc(var(--fs-rd) * 1.12);line-height:1.7;
  margin:2.2em 0 .7em;padding-left:14px;border-left:2px solid var(--accent)}
.rd-body h3:first-child{margin-top:0}
.rd-body .note{font-size:calc(var(--fs-rd) * .88)}

/* ── 早見（情報を整理して見せる箱）──
   本文と見た目を変える。囲み枠は使わず、面の色と罫線で分ける */
.rd-box{background:var(--wash);padding:clamp(30px,4vw,52px) 0;
  margin:clamp(44px,5vw,72px) 0}
.rd-box h2{font-size:clamp(21px,2.4vw,26px);margin:0 0 6px}
.rd-box .lead-in{color:var(--muted);font-size:var(--fs-small);margin:0 0 26px}
.rd-list{list-style:none;margin:0;padding:0}
.rd-list li{padding:18px 0;border-top:1px solid var(--rule)}
.rd-list li:last-child{border-bottom:1px solid var(--rule)}
.rd-list b{display:block;font-size:calc(var(--fs-rd) * .96);color:var(--accent);
  letter-spacing:.02em;margin:0 0 4px}
.rd-list span{display:block;font-size:calc(var(--fs-rd) * .94);line-height:1.9;color:var(--navy)}
/* 三つ並べて比べる（国の決まりなど） */
.rd-tri{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,34px)}
.rd-tri .w{border-top:2px solid var(--accent);padding-top:16px}
.rd-tri h4{font-size:calc(var(--fs-rd) * 1.02);margin:0 0 8px}
.rd-tri p{font-size:calc(var(--fs-rd) * .92);line-height:1.9;margin:0;color:var(--navy)}

/* 早見の中の読ませ幅は、本文と同じ位置にそろえる */
.rd-box .read{margin-left:auto;margin-right:auto}

/* 一覧のカードの号数（第1号…）*/
.cards .card .meta{font-family:'Tinos',serif;font-size:var(--fs-meta);letter-spacing:.2em;
  color:var(--c,var(--muted));margin:0 0 10px}
.cards a.card{display:block}
.cards a.card:hover h3{text-decoration:underline;text-underline-offset:5px}
.cards .card .more{font-family:'Tinos',serif;font-size:var(--fs-meta);letter-spacing:.18em;
  color:var(--accent)}

/* ── 合言葉とLINEの入口（紹介ページ）── */
.kw{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding:clamp(28px,3.4vw,44px) 0}
.kw .kw-label{font-family:'Tinos',serif;font-size:var(--fs-meta);letter-spacing:.24em;
  color:var(--muted);margin:0 0 6px}
.kw .kw-word{font-family:'Klee One',serif;font-weight:600;
  font-size:clamp(26px,3.6vw,38px);line-height:1.5;margin:0 0 clamp(22px,2.6vw,32px);
  color:var(--navy)}
.kw .steps{margin:0 0 clamp(24px,3vw,34px)}
.kw .kw-btns{display:flex;gap:12px;flex-wrap:wrap;margin:0 0 16px}

/* 関連する投稿の並び */
.plain-links{list-style:none;margin:20px 0 0;padding:0}
.plain-links li{padding:10px 0;border-top:1px solid var(--rule);font-size:var(--fs-small);
  word-break:break-all}
.plain-links li:last-child{border-bottom:1px solid var(--rule)}

/* Instagramを知らない人のための一行 */
.ig-invite{font-size:var(--fs-small);line-height:1.9;color:var(--muted);
  margin:18px 0 0;padding-top:16px;border-top:1px solid var(--rule)}
.ig-invite a{color:var(--navy);border-bottom:1px solid var(--rule);padding-bottom:2px}
.ig-invite a:hover{border-bottom-color:var(--navy)}

/* ── 出どころ ── */
.rd-src{font-size:var(--fs-small);line-height:1.95;color:var(--muted)}
.rd-src p{margin:0 0 1em}

/* ── 読み終わり ── */
.rd-end{border-top:1px solid var(--rule);margin-top:clamp(48px,6vw,80px);
  padding-top:clamp(32px,4vw,56px)}

@media (max-width:900px){
  .rd{--lh-rd:1.98}
  .rd-cover .in{gap:18px}
  .rd-cover .mk{width:64px;align-self:start}
  .rd-hero{min-height:min(66svh,560px)}
  .rd-hero h1{max-width:none}
  .rd-tri{grid-template-columns:1fr;gap:26px}
  .rd-body h3{margin-top:1.9em}
}

/* ══ 13. 編集ダイヤル ════════════════════════════════════════
   ここから下は「エディタ（TANE Editor）が付けてよい名前」の全部。
   エディタはこの名前を貼るだけで、数字は持たない。
   だから、あとでこのファイルを直せば、エディタで調整した場所も一緒に変わる。

   決まり
     u-◯◯ ＝ 文字と余白のダイヤル（Advanced）
     s-◯◯ ＝ 写真の形
     mo-◯◯ ＝ スマホだけの上書き
     写真の見せ場所（フォーカス）は --pos / --pos-m 変数で渡す        */

/* ── 文字の役（Preset）── p に付けると役が変わる。数字はここが持つ */
p.as-lead{font-size:var(--fs-lead);line-height:1.9}
p.as-trunk{font-family:'Klee One',serif;font-weight:600;
  font-size:clamp(21px,2.8vw,26px);line-height:1.9}
p.as-note{color:var(--muted);font-size:var(--fs-small);line-height:1.9}
p.as-quote{font-family:'Klee One',serif;font-weight:600;text-align:center;
  font-size:clamp(20px,2.9vw,29px);line-height:2;padding:0 5%}

/* ── 文字のダイヤル（Advanced）── 15px未満は作らない */
.u-fs-s{font-size:max(15px,.89em)}
.u-fs-l{font-size:1.15em}
.u-fs-xl{font-size:1.32em}
.u-fw-n{font-weight:400}
.u-fw-b{font-weight:600}
.u-lh-s{line-height:1.6}
.u-lh-l{line-height:2.3}
.u-ls-w{letter-spacing:.12em}
.u-al-l{text-align:left}
.u-al-c{text-align:center}
.u-al-r{text-align:right}

/* ── 余白のダイヤル ── 面（section）の上下 */
.u-pad-0{padding-top:0;padding-bottom:0}
.u-pad-s{padding-top:var(--gap-half);padding-bottom:var(--gap-half)}
.u-pad-l{padding-top:calc(var(--gap-sec)*1.4);padding-bottom:calc(var(--gap-sec)*1.4)}
/* 要素の下の間 */
.u-mb-0{margin-bottom:0}
.u-mb-s{margin-bottom:.6em}
.u-mb-l{margin-bottom:2.2em}
/* 文の幅 */
.u-w-read{max-width:var(--read);margin-left:auto;margin-right:auto}
.u-w-narrow{max-width:560px;margin-left:auto;margin-right:auto}

/* ── 面の上下の間（Spacing preset S/M/L/XL）──
   ふつう＝何も付けない。u-pad-xl まで4段 */
.u-pad-xl{padding-top:calc(var(--gap-sec)*2);padding-bottom:calc(var(--gap-sec)*2)}

/* ── 面の地の色（Background preset）──
   🔴 ネイビーは section.dark と同じ絵にするが、名前は別にする。
      もとから dark で組んである面と、エディタで塗った面を見分けるため
      （「TANEの標準に戻す」で外れるのは bg-◯◯ のほうだけ） */
.bg-kinari{background:var(--kinari)}
.bg-white{background:#fff}
.bg-wash{background:var(--wash)}
section.bg-navy{background:var(--navy);color:var(--kinari)}
section.bg-navy h1,section.bg-navy h2,section.bg-navy h3{color:var(--kinari)}
section.bg-navy .eyebrow,section.bg-navy .note{color:rgba(251,248,242,.68)}
section.bg-navy .kicker{color:rgba(251,248,242,.82)}
section.bg-navy .kicker::after{background:rgba(251,248,242,.28)}
section.bg-navy .c-navy,section.bg-navy .c-mind{color:var(--kinari)}
section.bg-navy .btn:hover{background:var(--kinari);color:var(--navy);border-color:var(--kinari)}
section.bg-navy .btn.solid{background:var(--kinari);color:var(--navy);border-color:var(--kinari)}

/* ── 写真の形（Shape / Radius）──
   🔴 角の付け方は §7-0 に一本化した。ここは「どの数字を使うか」を渡すだけ。
      写真そのものと、写真を切っている枠（.ph / .mosaic .c）の両方に届く      */
/* 🔴 img.◯◯ と書くのは、置き場所の指定（.strip img など）に負けないため。
      さらに比率は --ar で渡す ── 直に書くと強い場所で無効になる（2026-08-25） */
img.s-circle{border-radius:50%;--ar:1/1;aspect-ratio:var(--ar);object-fit:cover}
.s-round-none{--r:0}
.s-round-s{--r:var(--r-s)}
.s-round-m{--r:var(--r-m)}
.s-round-l{--r:var(--r-l)}
.s-round-full{--r:999px}
img.s-square{--ar:1/1;aspect-ratio:var(--ar);object-fit:cover}
img.s-contain{object-fit:contain;background:var(--wash)}
/* 寄り（Zoom）── 見せ場所（--pos）を中心に拡大する。
   拡大した分は、外の枠で必ず切る（はみ出させない） */
.s-zoom{transform:scale(var(--zoom,1));transform-origin:var(--pos,50% 50%)}
:has(> img.s-zoom){overflow:hidden}

/* 写真の見せ方（Display）── 幅は置き場所のまま、高さの型だけ変える */
img.s-tall{--ar:4/5;aspect-ratio:var(--ar);object-fit:cover;width:100%}
img.s-wide{--ar:16/9;aspect-ratio:var(--ar);object-fit:cover;width:100%}
img.s-screen{height:min(78svh,900px);aspect-ratio:auto;object-fit:cover;width:100%;
  min-height:0}
@media (max-width:900px){
  img.s-screen{height:min(66svh,620px)}
}

/* ── 写真の見せ場所（Focus Point）──
   エディタが style="--pos:62% 30%" を書く。数字はこの変数の中だけ。
   スマホで別の場所を見せたいときは --pos-m を足す */
.ph img,.stage>img,.bleed img,.mosaic .c img,.door .ph img,
.post .ph img,.pillar .ph img,.card .ph img,.split .ph img{
  object-position:var(--pos,50% 50%)}

/* ── スマホだけの上書き ── */
@media (max-width:900px){
  .ph img,.stage>img,.bleed img,.mosaic .c img,.door .ph img,
  .post .ph img,.pillar .ph img,.card .ph img,.split .ph img{
    object-position:var(--pos-m,var(--pos,50% 50%))}
  .mo-hide{display:none !important}
  .mo-al-c{text-align:center}
  .mo-fs-l{font-size:1.12em}
}
@media (min-width:901px){
  .pc-hide{display:none !important}
}

/* ══ 12. 印刷 ════════════════════════════════════════════════ */
@media print{
  header,.totop,.progress,.tail .newsletter,.big-t,.seq{display:none !important}
  body{background:#fff;color:#000}
  section{padding:24px 0}
  .reveal{opacity:1;transform:none}
  a{text-decoration:none}
}

/* ══ 問い合わせフォーム（2026-09-10）══════════════════════════
   足もとの購読欄（.tail input/button）と同じ作り。新しい色は足さない */
.tform{max-width:620px;margin-top:26px}
.tform label{display:block;margin:0 0 20px;font-size:var(--fs-small);color:var(--navy)}
.tform input,.tform textarea{
  width:100%;margin-top:8px;padding:14px 16px;font-size:17px;font-family:inherit;
  line-height:1.7;border:1px solid var(--rule);border-radius:3px;
  background:var(--white);color:var(--navy);box-sizing:border-box}
.tform textarea{resize:vertical;min-height:160px}
.tform input:focus,.tform textarea:focus{outline:2px solid var(--navy);outline-offset:1px}
.tform label .note{display:block;margin-top:6px}
.tform button{padding:15px 34px;font-size:var(--fs-small);font-family:'Tinos',serif;
  letter-spacing:.16em;border:0;border-radius:3px;
  background:var(--navy);color:var(--kinari);cursor:pointer}
.tform button:hover{opacity:.88}
.hp{position:absolute;left:-9999px}