/* ============================================================
   atelier 紹介ページ — プロトタイプ
   TW8サイト共通のポスター調（紙 × 墨 × 赤 / M PLUS Rounded 1c × Noto Sans JP）。
   2026-07-29 まで「生成り × 墨 × ティール / 和明朝 × Fraunces」の独立ブランドだった。
   master-design.md の「process.html が雛形／別商品として接ぎ木しない」に従って揃えた。
   ============================================================ */

/* 2026-07-29 TW8サイトのデザインに合わせた。
   根拠は atelier-launch/master-design.md の
   「process.html が雛形。構成とトーンをそのまま流用」
   「atelier は process.html の続きに置く（別商品として接ぎ木しない）」。
   独立ブランドにするのではなく、サイトの一部として揃えるのが元の設計。

   変数名（--paper / --teal など）はそのままにして値だけ載せ替えている。
   セクションごとの背景の付け方は元から正しかったので、構造は触っていない。 */
:root {
  /* 紙。サイト共通の4段と同じ値（ai.html の t1〜t3 と揃えてある） */
  --paper:      #FFFDF6;   /* 生成りに近い紙 */
  --paper-2:    #F5EDDC;   /* クリーム */
  --paper-3:    #F7DFCF;   /* セクション差し */
  /* 墨 */
  --ink:        #16130F;   /* 本文 */
  --ink-soft:   #443E37;   /* 副（濃い紙の上でも 8.2:1 以上） */
  --ink-faint:  #6B6459;   /* キャプション */
  /* 差し色。サイトのアクセントは赤1色なのでティールから移した。
     用途で3段に分けるのは ai.html / ai-guide.css と同じ考え方。
       --teal        … 紙の上の小さい文字・罫
       --teal-bright … 墨の面の上にだけ載る（明るくてよい）
       --teal-deep   … 面に塗って紙色の文字を乗せる／強い文字 */
  --teal:       #A62F19;
  --teal-bright:#F2503F;
  --teal-deep:  #8E2715;
  /* 罫線 */
  --rule:       rgba(22, 19, 15, 0.16);
  --rule-soft:  rgba(22, 19, 15, 0.08);

  --maxw: 1080px;
  --gut: clamp(20px, 5vw, 64px);

  /* 書体もサイトに合わせた。変数名は据え置き（使用箇所が多いため）。
     --serif-jp = 本文 / --serif-en = 見出し・ラベル。 */
  --serif-jp: 'Noto Sans JP', sans-serif;
  --serif-en: 'M PLUS Rounded 1c', 'Noto Sans JP', sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--serif-jp);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.9;
  font-feature-settings: "palt" 1;
  letter-spacing: 0.02em;
  overflow-x: hidden;
  position: relative;
}

/* 紙のグレインは外した（2026-07-29）。
   サイト本体は平らなポスター調で紙目を持たないので浮くのと、
   mix-blend-mode: multiply が全面に掛かるため文字と地色のコントラストが
   計算値どおりにならなくなる（検証できない状態を作らない）。 */

img { max-width: 100%; display: block; }
a { color: inherit; }

/* ---------- 共通レイアウト ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut); }

section { position: relative; }

.eyebrow {
  font-family: var(--serif-en);
  font-size: clamp(0.78rem, 1.4vw, 0.95rem);
  letter-spacing: 0.18em;
  color: var(--teal);
  text-transform: lowercase;
  margin-bottom: 1.1em;
  display: inline-block;
}
.eyebrow::before { content: "— "; color: var(--ink-faint); }

h2.sec-title {
  font-size: clamp(1.7rem, 4.4vw, 2.9rem);
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 0.01em;
  margin-bottom: 0.9em;
}

.lead { font-size: clamp(1.02rem, 1.7vw, 1.2rem); color: var(--ink); max-width: 36em; }
.muted { color: var(--ink-soft); }

/* 手書き風アンダーライン */
.mark {
  position: relative;
  white-space: nowrap;
}
.mark::after {
  content: "";
  position: absolute;
  left: -2%; right: -2%; bottom: -0.12em;
  height: 0.42em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='14' viewBox='0 0 200 14'%3E%3Cpath d='M2 9 C 40 3, 70 12, 110 6 S 180 3, 198 8' fill='none' stroke='%23A62F19' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  opacity: 0.85;
  z-index: -1;
}

/* セクション区切りヘアライン */
.rule-sep {
  height: 1px;
  background: var(--rule);
  border: 0;
  max-width: var(--maxw);
  margin: 0 auto;
}

/* ============================================================
   1. ヒーロー（キネティックタイポ＋崩し）
   ============================================================ */
.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(90px, 14vh, 160px) var(--gut) clamp(60px, 8vh, 100px);
  position: relative;
  background:
    radial-gradient(120% 90% at 85% 8%, var(--paper-2) 0%, transparent 55%),
    radial-gradient(90% 70% at 10% 100%, var(--paper-3) 0%, transparent 60%),
    var(--paper);
  overflow: hidden;
}

/* 崩し：薄い巨大 atelier をずらして背景に */
.hero__ghost {
  position: absolute;
  font-family: var(--serif-en);
  font-weight: 300;
  font-size: clamp(7rem, 26vw, 22rem);
  color: var(--ink);
  opacity: 0.045;
  right: -3vw;
  bottom: -2vh;
  line-height: 0.8;
  user-select: none;
  pointer-events: none;
  letter-spacing: -0.02em;
}

.hero__over {
  font-family: var(--serif-en);
  letter-spacing: 0.2em;
  color: var(--teal);
  font-size: clamp(0.85rem, 1.6vw, 1.05rem);
  margin-bottom: clamp(1.4rem, 4vh, 2.6rem);
}
.hero__over .jp { font-family: var(--serif-jp); font-style: normal; letter-spacing: 0.3em; color: var(--ink-soft); }

.hero__title {
  font-size: clamp(2.1rem, 6.6vw, 5.4rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.005em;
  margin-bottom: clamp(1.6rem, 4vh, 2.4rem);
  max-width: 20em;
}
.hero__title .line { display: block; overflow: hidden; }
.hero__title .word {
  display: inline-block;
  transform: translateY(110%);
  opacity: 0;
}
.hero__title .accent { color: var(--teal-deep); }

.hero__sub {
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  color: var(--ink-soft);
  max-width: 30em;
  line-height: 2;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s ease 1.1s, transform 1s ease 1.1s;
}
.hero.is-ready .hero__sub { opacity: 1; transform: none; }

.hero__cta {
  margin-top: clamp(2rem, 5vh, 3.2rem);
  display: flex;
  gap: 1.4rem;
  align-items: center;
  flex-wrap: wrap;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s ease 1.35s, transform 1s ease 1.35s;
}
.hero.is-ready .hero__cta { opacity: 1; transform: none; }

.btn {
  font-family: var(--serif-jp);
  font-size: 1rem;
  letter-spacing: 0.08em;
  padding: 0.95em 2em;
  border: 2px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  border-radius: 0;
  box-shadow: 4px 4px 0 var(--ink);
  transition: background .2s, color .2s, box-shadow .14s, transform .14s;
  display: inline-block;
}
/* 浮かせるのではなく押し込む。サイト共通の硬い影の作法に合わせた。 */
.btn:hover { background: var(--teal-deep); border-color: var(--ink); box-shadow: 1px 1px 0 var(--ink); transform: translate(3px, 3px); }
.btn--ghost { background: var(--paper); color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.scroll-hint {
  position: absolute;
  bottom: 2.2rem; left: 50%;
  transform: translateX(-50%);
  font-family: var(--serif-en);
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  color: var(--ink-faint);
  opacity: 0;
  transition: opacity 1s ease 1.8s;
}
.hero.is-ready .scroll-hint { opacity: 1; }
.scroll-hint::after {
  content: "";
  display: block;
  width: 1px; height: 38px;
  margin: 0.7rem auto 0;
  background: linear-gradient(var(--ink-faint), transparent);
  animation: drip 2.2s ease-in-out infinite;
}
@keyframes drip {
  0%, 100% { transform: scaleY(0.5); transform-origin: top; opacity: .4; }
  50% { transform: scaleY(1); opacity: 1; }
}

/* ============================================================
   スクロール・リビール（共通）
   ============================================================ */
.reveal { opacity: 0; transform: translateY(34px); transition: opacity .9s ease, transform .9s ease; }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .12s; }
.reveal.d2 { transition-delay: .24s; }
.reveal.d3 { transition-delay: .36s; }

/* ============================================================
   2. 問いかけ
   ============================================================ */
.ask { padding: clamp(90px, 16vh, 180px) 0; background: var(--paper); }
.ask__big {
  font-size: clamp(1.8rem, 5.2vw, 3.6rem);
  font-weight: 600;
  line-height: 1.7;
  letter-spacing: 0.01em;
}
.ask__big .q { color: var(--ink-faint); }
.ask__note { margin-top: 2.2em; color: var(--ink-soft); font-size: clamp(1rem, 1.7vw, 1.15rem); max-width: 34em; }

/* ============================================================
   3. これは何か
   ============================================================ */
.what { padding: clamp(80px, 13vh, 150px) 0; background: var(--paper-2); }
.what__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.what__body p { margin-bottom: 1.4em; font-size: clamp(1.02rem, 1.6vw, 1.15rem); }
.what__aside {
  border-left: 1px solid var(--rule);
  padding-left: clamp(1.4rem, 3vw, 2.6rem);
}
/* atelier が「何の仲間なのか」を置く箱（2026-07-29 追加）。
   ここが無いと、読者は唯一知っているChatGPTに当てはめて読み進めてしまい、
   最後まで違いが分からないまま「ChatGPTでええやん」で終わる。
   赤の左罫は使わない（あれは「断らないと嘘になる」ときの合図）。
   ここは断りではなく定義なので、墨の枠で囲うだけにする。 */
.what__def {
  margin-top: clamp(1.6rem, 3vw, 2.2rem);
  padding: clamp(1.4rem, 2.6vw, 1.9rem);
  border: 2px solid var(--ink);
  background: var(--paper);
}
.what__def p { font-size: .95rem; }
.what__def p + p { margin-top: .9em; }
.what__def-t {
  font-family: var(--serif-en);
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--ink);
}
.what__def a { color: var(--teal); text-decoration: underline; text-underline-offset: 3px; }

.what__claim {
  font-family: var(--serif-en);
  font-size: clamp(1.6rem, 3.6vw, 2.6rem);
  line-height: 1.4;
  color: var(--teal-deep);
}
.what__claim .jp { font-family: var(--serif-jp); font-style: normal; display: block; margin-top: .5em; color: var(--ink); font-size: .62em; line-height: 1.8; }

/* ============================================================
   3.5 タイムウェーバー入口
   ============================================================ */
.tw { padding: clamp(80px, 13vh, 150px) 0; background: var(--paper); }
.tw__grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; margin-top: clamp(1.5rem, 4vh, 2.5rem); }
.tw__body p { margin-bottom: 1.3em; font-size: clamp(1.02rem, 1.6vw, 1.15rem); }
.tw__body strong { font-weight: 600; color: var(--ink); }
.tw__note { background: var(--paper); border: 2px solid var(--ink); border-radius: 0; padding: clamp(1.6rem, 3vw, 2.2rem); }
.tw__note-t { font-weight: 600; color: var(--teal-deep); margin-bottom: .6em; font-size: 1.12rem; }
.tw__note p { color: var(--ink-soft); font-size: .95rem; }
.tw__note strong { color: var(--ink); font-weight: 600; }
@media (max-width: 760px) { .tw__grid { grid-template-columns: 1fr; gap: 1.8rem; } }

/* ============================================================
   4. 物語の核（会話→整理→蓄積→濃くなる）
   ============================================================ */
.story { padding: clamp(90px, 15vh, 170px) 0; background: var(--paper-3); position: relative; }
.story__steps { position: relative; margin-top: clamp(2rem, 6vh, 4rem); }
.story__line {
  position: absolute;
  left: 13px; top: 8px; bottom: 8px;
  width: 2px;
  background: var(--rule);
}
.story__line span {
  position: absolute; left: 0; top: 0; width: 100%; height: 0;
  background: var(--teal);
  transition: height 1.4s ease;
}
.story.in-view .story__line span { height: 100%; }

.step { position: relative; padding: 0 0 clamp(2.4rem, 5vh, 4rem) clamp(3rem, 6vw, 4.5rem); }
.step:last-child { padding-bottom: 0; }
.step__dot {
  position: absolute; left: 4px; top: 4px;
  width: 20px; height: 20px; border-radius: 0;
  background: var(--paper); border: 2px solid var(--ink-faint);
  transition: border-color .5s, background .5s, transform .5s;
}
.step.in .step__dot { border-color: var(--teal); background: var(--teal); transform: scale(1.15); }
.step__no { font-family: var(--serif-en); color: var(--teal); font-size: .95rem; letter-spacing: .1em; }
.step__t { font-size: clamp(1.3rem, 3vw, 2rem); font-weight: 600; margin: .15em 0 .4em; }
.step__d { color: var(--ink-soft); max-width: 32em; }
/* step__d が2つ以上並ぶのは step 1（Claude Code / Codex の2択）だけ。
   このCSSは * { margin: 0 } でリセットしているので、足さないと段落が詰まって1段落に見える。 */
.step__d + .step__d { margin-top: .8em; }

/* ============================================================
   5. 世間との違い（足し算 ↔ 引き算）
   ============================================================ */
.diff { padding: clamp(80px, 13vh, 150px) 0; background: var(--ink); color: var(--paper); }

/* ▼ 2026-07-29 の不具合修正（黒背景に黒文字）
   CSSを4枚化したことで renewal-framework.css の
     .renewal-framework h1, h2, h3 { color: var(--rf-ink); }
   が効くようになった。これは詳細度 0,1,1。
   atelier 側の .diff__head / .diff__h は 0,1,0 なので負けて、
   墨地のこのセクションの見出しが墨色になり読めなくなっていた。

   個別に色を指定し直すのではなく inherit で .diff の色を継がせている。
   このセクションに後から見出しを足しても同じ事故が起きないため。 */
.renewal-framework .diff h2,
.renewal-framework .diff h3 { color: inherit; }
/* atelier 側の列は赤に戻す。
   この行が必要なのは上の inherit(0,2,1) が元の .diff__col--us .diff__h(0,2,0) を
   上回ってしまうため＝修正そのものの後始末で、元から壊れていたわけではない。 */
.renewal-framework .diff .diff__col--us .diff__h { color: var(--teal-bright); }
.diff .eyebrow { color: var(--teal-bright); }
.diff .eyebrow::before { color: rgba(243,237,225,.4); }
.diff__head { color: var(--paper); }
.diff__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: clamp(2rem, 5vh, 3.5rem); border: 1px solid rgba(243,237,225,.18); }
.diff__col { padding: clamp(1.8rem, 4vw, 3rem); }
.diff__col + .diff__col { border-left: 1px solid rgba(243,237,225,.18); }
.diff__tag { font-family: var(--serif-en); font-size: .9rem; letter-spacing: .15em; opacity: .6; }
.diff__h { font-size: clamp(1.4rem, 3.2vw, 2.1rem); font-weight: 600; margin: .4em 0 .7em; }
.diff__col--us .diff__h { color: var(--teal-bright); }
.diff__col p { color: rgba(243,237,225,.78); }
.diff__op { font-family: var(--serif-en); opacity: .5; font-size: .95rem; }

/* ============================================================
   6. できること（Bento Grid）
   ============================================================ */
.can { padding: clamp(90px, 14vh, 160px) 0; background: var(--paper); }
.bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(160px, auto);
  gap: clamp(0.8rem, 1.6vw, 1.2rem);
  margin-top: clamp(2rem, 5vh, 3.2rem);
}
.cell {
  border: 1px solid var(--rule);
  background: var(--paper);
  padding: clamp(1.4rem, 2.6vw, 2.2rem);
  border-radius: 0;
  display: flex; flex-direction: column; justify-content: space-between;
  transition: transform .4s ease, box-shadow .4s ease, border-color .4s;
  position: relative; overflow: hidden;
}
.cell:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -24px rgba(42,37,33,.4); border-color: var(--teal); }
.cell__no { font-family: var(--serif-en); color: var(--ink-faint); font-size: .85rem; }
.cell__t { font-size: clamp(1.15rem, 2.2vw, 1.5rem); font-weight: 600; margin-top: .4em; }
/* 製品名を途中で改行させない。
   .bento は3カラムで1セルが約260pxしかなく、"Claude Code" が
   「Claude / Code」と割れていた（2026-07-29 修正）。
   欧文の固有名詞にはこれを付ける。 */
.nw { white-space: nowrap; }
.cell__d { color: var(--ink-soft); font-size: .95rem; margin-top: .6em; }
.cell--wide { grid-column: span 2; }
.cell--tall { grid-row: span 2; }
.cell--feature { grid-column: span 2; background: var(--teal-deep); color: var(--paper); border-color: var(--teal-deep); }
.cell--feature .cell__no, .cell--feature .cell__d { color: rgba(243,237,225,.78); }
.cell--feature .cell__t { color: var(--paper); }
.cell--feature:hover { box-shadow: 0 18px 50px -22px rgba(10,79,74,.7); }

/* ============================================================
   7. 正直な構え
   ============================================================ */
.honest { padding: clamp(90px, 16vh, 180px) 0; background: var(--paper-2); }
.honest__frame {
  border: 1px solid var(--rule);
  border-radius: 0;
  padding: clamp(2.2rem, 6vw, 5rem);
  position: relative;
}
.honest__frame::before {
  content: "”";
  position: absolute; top: -.1em; left: .2em;
  font-family: var(--serif-en);
  font-size: clamp(5rem, 14vw, 11rem);
  color: var(--rule);
  line-height: 1;
}
.honest__q {
  font-size: clamp(1.4rem, 3.6vw, 2.5rem);
  font-weight: 500; line-height: 1.65;
  letter-spacing: .01em;
  position: relative;
}
.honest__q .hl { color: var(--teal-deep); }
.honest__by { margin-top: 1.6em; color: var(--ink-soft); font-size: .98rem; }
.honest__by .name { font-family: var(--serif-en); }

/* ============================================================
   8. 作り手
   ============================================================ */
.maker { padding: clamp(80px, 13vh, 150px) 0; background: var(--paper); }
.maker__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: end; }
.maker__body p { margin-bottom: 1.2em; color: var(--ink-soft); font-size: clamp(1rem, 1.6vw, 1.12rem); }
.maker__body strong { color: var(--ink); font-weight: 600; }
.doors { border-top: 1px solid var(--rule); }
.door {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: 1.2em 0; border-bottom: 1px solid var(--rule);
  text-decoration: none; transition: padding-left .3s, color .3s;
}
.door:hover { padding-left: .6em; color: var(--teal); }
.door__l { font-size: 1.05rem; }
.door__r { font-family: var(--serif-en); color: var(--ink-faint); font-size: .85rem; }
.door:hover .door__r { color: var(--teal); }

/* ============================================================
   9. 次へ（導入ページへの橋）
   ============================================================ */
.next { padding: clamp(100px, 18vh, 200px) var(--gut); background: var(--paper-3); text-align: center; }
.next__k {
  font-size: clamp(2rem, 7vw, 4.4rem);
  font-weight: 600; line-height: 1.3;
  margin-bottom: 1em;
}
.next .btn { margin-top: 1rem; padding: 1.1em 2.6em; font-size: 1.08rem; }
.next__wink { margin-top: 3.5em; font-family: var(--serif-en); color: var(--ink-faint); font-size: .9rem; letter-spacing: .04em; }
.next__wink .jp { font-family: var(--serif-jp); font-style: normal; }

/* ---------- フッター ---------- */
.foot { padding: 3rem var(--gut); background: var(--ink); color: #C9C2B4; text-align: center; font-size: .85rem; }
.foot a { color: var(--teal-bright); text-decoration: none; }
.foot__mark { font-family: var(--serif-en); font-size: 1.4rem; color: var(--paper); margin-bottom: .6rem; letter-spacing: .04em; }

/* ============================================================
   レスポンシブ
   ============================================================ */
@media (max-width: 760px) {
  .what__grid { grid-template-columns: 1fr; gap: 2.4rem; }
  .what__aside { border-left: 0; border-top: 1px solid var(--rule); padding-left: 0; padding-top: 1.6rem; }
  .diff__cols { grid-template-columns: 1fr; }
  .diff__col + .diff__col { border-left: 0; border-top: 1px solid rgba(243,237,225,.18); }
  .bento { grid-template-columns: 1fr 1fr; }
  .cell--wide, .cell--feature { grid-column: span 2; }
  .cell--tall { grid-row: span 1; }
  .maker__grid { grid-template-columns: 1fr; gap: 2.4rem; align-items: start; }
  .hero__title { font-size: clamp(1.85rem, 8.5vw, 3rem); }
}
@media (max-width: 440px) {
  .bento { grid-template-columns: 1fr; }
  .cell--wide, .cell--feature { grid-column: span 1; }
}

/* ============================================================
   start ページ（始めかた）
   ============================================================ */
.start-hero {
  padding: clamp(110px, 16vh, 170px) var(--gut) clamp(50px, 8vh, 80px);
  background:
    radial-gradient(110% 80% at 90% 0%, var(--paper-2) 0%, transparent 55%),
    var(--paper);
}
.start-hero .wrap { max-width: var(--maxw); }
.crumb {
  font-family: var(--serif-en);
  font-size: .88rem; letter-spacing: .12em;
  color: var(--ink-faint); text-decoration: none;
  display: inline-block; margin-bottom: 2.2em;
  transition: color .3s;
}
.crumb:hover { color: var(--teal); }
.start-hero h1 {
  font-size: clamp(2rem, 5.6vw, 3.8rem);
  font-weight: 600; line-height: 1.35; margin-bottom: .5em;
}
.start-hero .lead { color: var(--ink-soft); }

.sec { padding: clamp(70px, 11vh, 130px) 0; }
.sec--alt { background: var(--paper-2); }
.sec--alt2 { background: var(--paper-3); }

/* 正直の枠（お金の話） */
/* ---------- 画像スロット（差し替え前の枠） ----------
   2026-07-29 追加。atelier のページには画像が1枚も無く、
   「AIがフォルダの中にいてファイルを書く」という状態が文字だけでは伝わらない
   （ChatGPTのチャット欄しか知らない読者には未知の絵）ため。

   ★ここに入れるのは生成イラストではなく「実際の画面のスクリーンショット」。
     ai-guide.html のスロットは雰囲気の絵なので生成でよいが、
     こちらは「これは何をするものか」の証拠なので、実物でないと役に立たない。

   差し替え方：<div class="img-slot">…</div> を
              <img src="assets/images/…" alt="…"> に置き換える。 */
.at-figure { margin: clamp(2rem, 5vh, 3.2rem) 0 0; }
.at-figure img { width: 100%; border: 2px solid var(--ink); }
.at-figure figcaption {
  margin-top: .8em; font-size: .85rem; line-height: 1.85;
  color: var(--ink-faint); text-align: center;
}
.img-slot {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: .7rem; aspect-ratio: 16 / 9;
  padding: 1.5rem; text-align: center;
  border: 2px dashed var(--teal);
  background: repeating-linear-gradient(
    -45deg, rgba(22,19,15,.035) 0 12px, transparent 12px 24px);
}
.img-slot__num {
  font-family: var(--serif-en); font-size: .8rem; font-weight: 700;
  letter-spacing: .2em; color: var(--teal);
}
.img-slot__desc {
  font-size: .85rem; line-height: 1.85; color: var(--ink-soft); max-width: 30rem;
}

.callout {
  border: 1px solid var(--rule);
  border-left: 5px solid var(--teal);
  background: var(--paper);
  border-radius: 0;
  padding: clamp(1.4rem, 3vw, 2rem);
  margin-top: 2em;
  max-width: 44em;
}
.callout__t { font-weight: 600; color: var(--teal-deep); margin-bottom: .5em; }
.callout p { color: var(--ink-soft); font-size: .98rem; }
.callout strong { color: var(--ink); font-weight: 600; }

/* ダウンロード枠 */
.dl-box {
  margin-top: 2.2em;
  border: 1px dashed var(--rule);
  border-radius: 0;
  background: var(--paper);
  padding: clamp(1.8rem, 4vw, 2.6rem);
  text-align: center;
  max-width: 34em;
}
.dl-box .btn { font-size: 1.05rem; padding: 1em 2.4em; }
.dl-meta { margin-top: 1em; font-size: .85rem; color: var(--ink-faint); }

/* 手順内の小さな補足 */
.step__aside {
  margin-top: .8em; font-size: .9rem; color: var(--ink-faint);
  border-left: 2px solid var(--rule); padding-left: 1em; max-width: 30em;
}

/* Q&A */
.qa { max-width: 40em; margin-top: 1.5em; }
.qa dt {
  font-weight: 600; font-size: 1.08rem; margin-top: 2em;
  padding-left: 1.2em; position: relative;
}
.qa dt::before { content: "―"; position: absolute; left: 0; color: var(--teal); }
.qa dd { margin: .5em 0 0 1.2em; color: var(--ink-soft); }

/* ============================================================
   画像の拡大（ライトボックス）
   2026-07-31 追加。このページだけ。スクリプトは atelier.js にある
   （start/ は atelier.js を読んでいないので、あちらには効かない）。

   ・対象は .at-figure の中の実画像だけ。画像スロット（.img-slot）は対象外
   ・面の作りはサイトのナビ（nav-poster.css）と同じ＝墨地に少し透過
   ・墨地の上なので、罫は紙色、影は --teal-bright（墨の面の上に載せる色）
   ============================================================ */
.at-figure img {
  cursor: zoom-in;
}
.at-figure img:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 3px;
}

.at-lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;              /* ナビ(99)・ヘッダー(100)より前 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: clamp(16px, 5vw, 56px);
  background: rgba(22, 19, 15, 0.94);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  overflow: hidden;          /* 拡大した画像がはみ出してもスクロールバーを出さない */
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s ease, visibility .22s ease;
}
.at-lightbox.is-open {
  opacity: 1;
  visibility: visible;
}

.at-lightbox__img {
  max-width: min(1100px, 100%);
  max-height: 76vh;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  border: 3px solid var(--paper);
  box-shadow: 10px 10px 0 var(--teal-bright);
  background: var(--paper);
  cursor: zoom-out;
  /* ホイール・ドラッグ・ピンチをこちらで処理するので、
     ブラウザ既定のスクロールやピンチに取られないようにする */
  touch-action: none;
  will-change: transform;
  transform-origin: center center;
  user-select: none;
  -webkit-user-drag: none;
}
/* 拡大中：クリックで閉じない状態なので、カーソルも「つかむ」に変える */
.at-lightbox.is-zoomed .at-lightbox__img { cursor: grab; }
.at-lightbox.is-panning .at-lightbox__img { cursor: grabbing; }

.at-lightbox__cap {
  max-width: 60ch;
  margin: 0;
  color: var(--paper);
  font-size: .88rem;
  line-height: 1.85;
  text-align: center;
}

.at-lightbox__hint {
  margin: 0;
  color: var(--paper);
  opacity: .62;
  font-size: .74rem;
  letter-spacing: .04em;
  line-height: 1.7;
  text-align: center;
}
/* 指で見ている画面ではホイールもダブルクリックも無いので、
   案内の文言を atelier.js 側で入れ替えている（hover: none で判定） */

.at-lightbox__close {
  position: absolute;
  top: clamp(12px, 3vw, 26px);
  right: clamp(12px, 3vw, 26px);
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif-en, inherit);
  font-size: 22px;
  line-height: 1;
  color: var(--paper);
  background: transparent;
  border: 3px solid var(--paper);
  border-radius: 0;
  cursor: pointer;
  transition: background .14s, color .14s;
}
.at-lightbox__close:hover,
.at-lightbox__close:focus-visible {
  background: var(--teal-bright);
  color: var(--ink);
}
.at-lightbox__close:focus-visible {
  outline: 3px solid var(--paper);
  outline-offset: 3px;
}

/* 開いている間だけ背後を固定する */
body.at-lightbox-open {
  overflow: hidden;
}

/* ============================================================
   モーション軽減（必須マナー）
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .hero__title .word { transform: none; opacity: 1; }
  .hero__sub, .hero__cta, .scroll-hint { opacity: 1; transform: none; }
  .reveal { opacity: 1; transform: none; }
  .story__line span { height: 100%; }
}