/* ==========================================================================
   『今月の書』夢道 MUDO ─ 全ページ共通スタイル（このファイル1本だけ）

   出典：レビュー版（今月の書 実装版レビュー）の <style>
         ＋ /home/claude/brief/05_design.md（デザイン仕様書）
   色・書体・数値は site_v2.html から読み取ったものをそのまま使っています。
   新しい色は1つも足していません。

   章立て（05_design 8-1 のとおり）
   00 トークン            08 フッター
   01 土台                09 ページヘッダー（下層5ページ）
   02 ヘッダー            10 作品の枠
   03 ボタン              11 作品の見せ方3案
   04 フォーム            12 トップ固有
   05 表と定義リスト      13 下層ページ固有
   06 バッジ              14 @media (max-width:960px)
   07 記入見本            15 @media (max-width:600px)

   ※ 直すのは常にこの1ファイルです。HTMLの6ページ側では色も余白も指定しません。
   ========================================================================== */


/* ==========================================================================
   00 トークン ─ site_v2.html から抽出。値は2つだけ暗くしてある（下の▲を読んでください）

   ▲要確認:色 ─ 補助文字の2色だけ、05_design.md の記載より暗くしてあります。
   コントラスト比が WCAG AA（4.5:1）に届かなかったためです（07_qa ブロッカー7）。
       --mut         05_design 69行 #76746c → ここでは #6e6c64
                     和紙色 --paper の上で 4.30:1（不合格）→ 4.83:1（合格）
                     該当：理念のひとことの署名／メール登録の説明文／雅号の由来のラベル
       --ink-sample  05_design 84行 #8d8878 → ここでは #737169
                     白の上で 3.54:1（不合格）→ 4.89:1（合格）
                     該当：記入見本と contact の「書き出しの例」（17〜23px・weight300）
   どちらも同系の灰で、見た目の性格は変えていません。新しい色は足していません。
   デザイナーの承認を得たうえで、05_design.md 側の記載も同じ値に直してください。
   元の値に戻すと、上の箇所が AA を割ります。戻すときは必ず測り直してください。
   ========================================================================== */
:root{

  /* ── 色：既存の9変数（--mut のみ上記の理由で暗くした。他は変更禁止） ─── */
  --fg:#12120f;        /* 墨。本文・見出し・黒いボタンの地 */
  --mut:#6e6c64;       /* 補助文字。ラベル・注記・キャプション（AA調整済み・上の▲参照） */
  --hair:#e4e2db;      /* 罫線。ほぼすべての区切りがこれ1本 */
  --seal:#c0392b;      /* 落款の朱。キッカー・強調・フォーカス表示 */
  --bg:#ffffff;        /* 地 */
  --paper:#f7f5f0;     /* 和紙色。作品の地・帯の地 */
  --dk:#16150f;        /* 暗い区画の地（物語） */
  --lt:#f3efe6;        /* 暗い区画の文字 */
  --gold:#b08d57;      /* 暗い区画の強調・数字 */

  /* ── 色：既存CSSに直書きされていたものに名前を付けたもの
        （--ink-sample のみ上記の理由で暗くした。他は値も同一） ── */
  --fg-2:#33322c;      /* .creed p の文字。fg より一段やわらかい */
  --fg-3:#46453e;      /* .lede / .name-sec p / about 本文。長文の本文色 */
  --line-soft:#c8c3b5; /* .name-chars .plus。本文リンクの下線にも使う */
  --line-input:#dcdad3;/* 入力欄の罫 */
  --line-dash:#cfc9ba; /* 記入見本の破線 */
  --ink-sample:#737169;/* 記入見本の文字（AA調整済み・上の▲参照） */
  --dk-2:#0d0c08;      /* 暗い区画の中の写真枠の地 */

  /* 暗い区画（--dk の上）で使う文字と罫 */
  --on-dk-strong:rgba(243,239,230,.92);
  --on-dk-body:rgba(243,239,230,.72);
  --on-dk-mut:rgba(243,239,230,.5);
  --on-dk-line:rgba(243,239,230,.14);

  /* ── 書体 ─────────────────────────────────────────── */
  --ff-sans:'Inter','Noto Sans JP',sans-serif;
  --ff-serif:'Cormorant Garamond','Shippori Mincho',serif;
  --ff-mono:'IBM Plex Mono',monospace;
  --ff-jp:'Shippori Mincho',serif;

  /* ── 文字サイズ ───────────────────────────────────── */
  --fs-h1:clamp(32px,4vw,50px);
  --fs-h2:clamp(26px,3.2vw,40px);
  --fs-h2b:19px;
  --fs-h3:14.5px;
  --fs-lead:clamp(17px,2vw,22px);
  --fs-quote:clamp(20px,2.5vw,29px);
  --fs-body:14px;
  --fs-cap:12.5px;
  --fs-note:11.5px;
  --fs-label:10px;

  /* ── 行間 ─────────────────────────────────────────── */
  --lh-h1:1.15;
  --lh-h2:1.32;
  --lh-body:1.95;     /* data-lang="ja" のとき 2.05 に上がる */
  --lh-cap:1.95;
  --lh-note:1.8;
  --lh-quote:1.72;

  /* ── 字間 ─────────────────────────────────────────── */
  --ls-h1:-.01em;
  --ls-label:.26em;
  --ls-label-wide:.3em;
  --ls-mono:.14em;
  --ls-logo:.3em;
  --ls-ticker:.18em;

  /* ── 余白（6段階） ────────────────────────────────── */
  --sp-1:8px;
  --sp-2:14px;
  --sp-3:24px;
  --sp-4:38px;
  --sp-5:56px;
  --sp-6:74px;

  --sec-y:70px;
  --sec-y-sm:52px;
  --band-y:76px;

  /* ── 器 ───────────────────────────────────────────── */
  --wrap:1200px;
  --wrap-pad:36px;
  --wrap-pad-sm:22px;
  --col-gap:54px;
  --measure:48ch;

  /* ── 罫線・角丸 ───────────────────────────────────── */
  --bw:1px;
  --r-1:2px;
  --r-2:3px;
  --r-3:4px;
  --r-pill:99px;

  /* ── 影：案①では使わない。案②の紙にだけ使う ────────── */
  --sh-sheet:0 24px 50px rgba(0,0,0,.55), 0 3px 10px rgba(0,0,0,.4);

  /* ── 動き ─────────────────────────────────────────── */
  --t:.2s;
}

/* 日本語表示のときだけ行間を一段開ける（切替の仕組みは変えていない） */
body[data-lang="ja"]{ --lh-body:2.05; }


/* ==========================================================================
   01 土台 ─ 6ページ化で必ず要るもの
   ========================================================================== */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; padding:0; background:var(--bg); }
/* height:auto を必ず添えること。max-width だけだと、HTMLの height 属性が
   CSSの高さとして残り、幅が縮んだときに画像が縦に伸びます（作品写真が歪みます） */
img{ max-width:100%; height:auto; }

/* 日英の出し分け。この2行がサイト全体の言語切替の実体 */
body[data-lang="en"] .ja{ display:none; }
body[data-lang="ja"] .en{ display:none; }

.site-root{
  background:var(--bg); color:var(--fg);
  font-family:var(--ff-sans);
  -webkit-font-smoothing:antialiased;
}
.site-root .wrap{ max-width:var(--wrap); margin:0 auto; padding:0 var(--wrap-pad); }

/* ── リンクの既定（site_v2 には無い。6ページ化で必須） ──
   :where() で包んで詳細度を 0 に落としています。
   .site-root a{...} と書くとID詳細度(1,0,1)になり、あとから来る .buy / .f-links a /
   .crumb a などのクラス指定（0,1,x）を全部押し負かしてしまいます。
   実際、これで .buy の文字色が白ではなく地の色になり、黒地に黒文字で
   ボタンの文字が消えていました。ここは必ず :where() のままにしてください。 */
:where(.site-root) a{ color:inherit; text-decoration:none; }

/* 本文の中のリンクだけ下線を引く。ナビ・ボタン・カードには引かない */
.site-root p a, .site-root .prose a, .site-root dd a{
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-decoration-color:var(--line-soft);
  text-underline-offset:.18em;
  transition:text-decoration-color var(--t);
}
.site-root p a:hover, .site-root .prose a:hover, .site-root dd a:hover{
  text-decoration-color:var(--seal);
}

/* ── キーボードのフォーカス表示（必須・すべての操作要素） ── */
.site-root a:focus-visible,
.site-root button:focus-visible,
.site-root input:focus-visible,
.site-root select:focus-visible,
.site-root textarea:focus-visible,
.site-root summary:focus-visible,
.site-root [tabindex]:focus-visible,
.skip:focus-visible{
  outline:2px solid var(--seal);
  outline-offset:2px;
  border-radius:var(--r-1);
}
/* 暗い区画の上では朱がほとんど見えない（3.37:1）。金にする */
.story a:focus-visible,
.story button:focus-visible{ outline-color:var(--gold); }

/* ── フォーム要素は書体を継承しない。必ず継承させる ──
   ここも :where() で詳細度を 0 にしています。.site-root button{color:inherit} と書くと
   .buy / .form .sub の color:#fff を押し負かし、黒地に黒文字で送信ボタンの
   文字が消えます。必ず :where() のままにしてください。 */
:where(.site-root) :is(input, select, textarea, button){
  font-family:inherit; font-size:inherit; color:inherit;
}

/* ── 読み上げ専用 ── */
.visually-hidden{
  position:absolute!important; width:1px; height:1px;
  margin:-1px; padding:0; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap; border:0;
}

/* ── 本文へ飛ぶリンク（ヘッダーを毎回読み飛ばせるように） ── */
.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--fg); color:#fff; padding:10px 16px;
  font-family:var(--ff-sans); font-size:var(--fs-cap); text-decoration:none;
}
.skip:focus{ left:0; }

/* ── 動きを減らす設定の人へ ── */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ transition-duration:.01ms!important; animation-duration:.01ms!important; }
}


/* ==========================================================================
   02 ヘッダー（上部の黒帯・ロゴ・ナビ・言語切替）
   ========================================================================== */
.ticker{
  background:var(--fg); color:#fff;
  font-family:var(--ff-mono);
  font-size:10.5px; letter-spacing:var(--ls-ticker); text-transform:uppercase;
  padding:9px 16px; text-align:center; line-height:1.7;
}

.topbar{
  display:flex; align-items:center; gap:var(--sp-3);
  padding:20px 0; border-bottom:var(--bw) solid var(--hair);
}
.logo{ font-family:var(--ff-jp); font-size:18px; letter-spacing:var(--ls-logo); white-space:nowrap; }
.logo a{ display:inline-block; }

.site-root nav{ display:flex; gap:26px; font-size:var(--fs-cap); color:var(--mut); flex-wrap:wrap; }
.site-root nav a{ color:var(--mut); white-space:nowrap; transition:color var(--t); padding:2px 0; }
.site-root nav a:hover{ color:var(--fg); }
.site-root nav a[aria-current="page"]{
  color:var(--mut);
  border-bottom:var(--bw) solid var(--seal);
}

.tb-right{ margin-left:auto; display:flex; align-items:center; gap:var(--sp-2); }

/* 言語切替（.rvw から .topbar 右端へ移設。構造と仕組みは変えていない） */
.langs{
  display:flex; border:var(--bw) solid var(--hair);
  border-radius:var(--r-pill); overflow:hidden;
}
.lang{
  font-family:inherit; font-size:var(--fs-note); font-weight:600;
  letter-spacing:.06em; padding:5px 13px;
  background:transparent; color:var(--mut); border:0; cursor:pointer;
  transition:color var(--t), background var(--t);
}
.lang:hover{ color:var(--fg); }
/* 選択中の言語。属性は aria-pressed（トグルボタン）です。
   HTML の各ページのヘッダーと js/lang.js も同じ属性名です。3か所そろえて直してください */
.lang[aria-pressed="true"]{ background:var(--seal); color:#fff; }
.lang[aria-pressed="true"]:hover{ color:#fff; }
.lang:focus-visible{ outline:2px solid var(--seal); outline-offset:-2px; }


/* ==========================================================================
   03 ボタン ─ 3種類だけ。これ以外のボタンを作らない
   ========================================================================== */

/* ① 一次ボタン（大・黒）── 作品欄・works の受付中カード・contact の送信 */
.buy{
  display:block; width:100%; text-align:center;
  background:var(--fg); color:#fff; text-decoration:none;
  padding:17px; border-radius:var(--r-2);
  font-size:13.5px; font-weight:600; border:0; cursor:pointer;
  transition:background var(--t);
}
.buy:hover{ background:var(--seal); }
.buy:active{ background:#a5301f; }
.buy:focus-visible{ outline:2px solid var(--seal); outline-offset:3px; }

/* ② 二次ボタン（線囲み）── ヘッダー・各ページ末尾 */
.cta-sm{
  display:inline-block; white-space:nowrap;
  border:var(--bw) solid var(--fg); background:transparent; color:var(--fg);
  padding:8px 16px; border-radius:var(--r-1);
  font-size:var(--fs-note); font-weight:500; cursor:pointer;
  transition:background var(--t), color var(--t);
}
.cta-sm:hover{ background:var(--fg); color:#fff; }
.cta-sm:active{ background:var(--seal); border-color:var(--seal); color:#fff; }
.cta-sm:focus-visible{ outline:2px solid var(--seal); outline-offset:2px; }

/* 暗い区画の上に置く場合 */
.story .cta-sm{ border-color:var(--on-dk-line); color:var(--lt); }
.story .cta-sm:hover{ background:var(--lt); color:var(--dk); }

/* ③ 本文中の「続きを読む」リンク（ボタンではない） */
.more{
  display:inline-flex; align-items:baseline; gap:var(--sp-1);
  font-size:var(--fs-cap); font-weight:500; color:var(--fg);
  border-bottom:var(--bw) solid var(--hair); padding-bottom:4px;
  transition:border-color var(--t);
}
.more::after{ content:"→"; color:var(--seal); }
.more:hover{ border-bottom-color:var(--seal); }
.story .more{ color:var(--lt); border-bottom-color:var(--on-dk-line); }
.story .more::after{ color:var(--gold); }
.story .more:hover{ border-bottom-color:var(--gold); }

/* ページ末尾のCTA列 */
.cta-row{
  display:flex; flex-wrap:wrap; gap:var(--sp-2);
  align-items:center; margin-top:var(--sp-4);
}


/* ==========================================================================
   04 フォーム
   ========================================================================== */
.f-field{ margin-bottom:var(--sp-4); }
.f-label{
  display:block; font-size:var(--fs-cap); font-weight:500;
  color:var(--fg); margin-bottom:var(--sp-1);
}
.f-req{
  font-family:var(--ff-mono); font-size:9.5px; letter-spacing:var(--ls-mono);
  color:var(--seal); margin-left:var(--sp-1); text-transform:uppercase;
}
.f-help{
  font-size:var(--fs-note); line-height:var(--lh-note);
  color:var(--mut); margin-top:6px;
}

.f-input, .f-textarea, .f-select{
  width:100%; display:block;
  border:var(--bw) solid var(--line-input); background:#fff;
  border-radius:var(--r-2); padding:14px;
  font-size:13px; color:var(--fg);
  transition:border-color var(--t);
}
.f-textarea{ min-height:190px; line-height:var(--lh-body); resize:vertical; }
.f-input::placeholder, .f-textarea::placeholder{ color:var(--mut); opacity:1; }

.f-input:hover, .f-textarea:hover, .f-select:hover{ border-color:#c9c6bd; }
.f-input:focus-visible, .f-textarea:focus-visible, .f-select:focus-visible{
  border-color:var(--fg); outline:2px solid var(--seal); outline-offset:1px;
}
.f-input:disabled{ background:var(--paper); color:var(--mut); }
.f-input[aria-invalid="true"]{ border-color:var(--seal); }
.f-error{ font-size:var(--fs-note); color:var(--seal); margin-top:6px; }

/* 用件の選択（4択・ラジオ） */
.f-choices{ display:flex; flex-direction:column; gap:var(--sp-1); }
.f-choice{
  display:flex; align-items:flex-start; gap:10px;
  padding:11px 14px; border:var(--bw) solid var(--hair);
  border-radius:var(--r-2); cursor:pointer; font-size:13px;
  transition:border-color var(--t), background var(--t);
}
.f-choice:hover{ border-color:var(--line-soft); }
.f-choice:has(input:checked){ border-color:var(--fg); background:var(--paper); }
.f-choice input{ accent-color:var(--seal); margin-top:3px; flex:none; }
.f-choice:focus-within{ outline:2px solid var(--seal); outline-offset:2px; }

/* チェックボックス1つ（次の一字のお知らせ） */
.f-check{ display:flex; align-items:flex-start; gap:10px; font-size:13px; cursor:pointer; }
.f-check input{ accent-color:var(--seal); margin-top:3px; flex:none; }

/* honeypot。目に見えないが読み上げには残す */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* メール登録（.notify の中） */
.form{ display:flex; gap:var(--sp-1); }
.form .inp{
  flex:1; border:var(--bw) solid var(--line-input); background:#fff;
  border-radius:var(--r-2); padding:14px; font-size:13px; color:var(--fg);
  transition:border-color var(--t);
}
.form .inp::placeholder{ color:var(--mut); opacity:1; }
.form .inp:hover{ border-color:#c9c6bd; }
.form .inp:focus-visible{ border-color:var(--fg); outline:2px solid var(--seal); outline-offset:1px; }
.form .sub{
  background:var(--fg); color:#fff; border:0; border-radius:var(--r-2);
  padding:14px 22px; font-size:13px; font-weight:600; white-space:nowrap; cursor:pointer;
  transition:background var(--t);
}
.form .sub:hover{ background:var(--seal); }


/* ==========================================================================
   05 表と定義リスト
   ========================================================================== */

/* ① 作品の仕様表（既存 .spec。構造は変えない） */
.spec{ border-top:var(--bw) solid var(--hair); font-size:var(--fs-cap); }
.spec div{
  display:flex; justify-content:space-between; gap:16px;
  padding:10px 0; border-bottom:var(--bw) solid var(--hair);
}
.spec div b{ color:var(--mut); font-weight:400; flex:none; }
.spec div span{ text-align:right; }

/* ② 定義リスト（legal / shipping）── 装飾は最小。読みやすさ優先 */
.dl{ margin:0; border-top:var(--bw) solid var(--hair); }
.dl > div{
  display:grid; grid-template-columns:210px 1fr; gap:var(--sp-4);
  padding:var(--sp-3) 0; border-bottom:var(--bw) solid var(--hair);
}
.dl dt{
  font-size:var(--fs-cap); font-weight:600; color:var(--fg);
  line-height:1.7;
}
.dl dd{
  margin:0; font-size:var(--fs-body); line-height:var(--lh-body);
  color:var(--fg-3); max-width:var(--measure);
}
.dl dd + dd{ margin-top:var(--sp-2); }


/* ==========================================================================
   06 バッジ ─ クラス1語で状態が変わる（月次更新のため）
   ========================================================================== */
.sold{
  position:absolute; top:10px; right:10px;
  z-index:2;                    /* .badge と同じ理由。作品写真の下に潜らせない */
  background:var(--fg); color:#fff;
  font-family:var(--ff-mono); font-size:9px; letter-spacing:.1em;
  padding:4px 8px; white-space:nowrap;
}
.sold.is-avail{ background:var(--seal); }                 /* 受付中 */
.sold.is-record{ background:var(--mut); font-size:10px; } /* 記録（非売） */

/* 作品欄の左上のバッジ（受付中／SOLD の2状態） */
.badge{
  position:absolute; top:16px; left:16px;
  /* z-index を外さないこと。バッジも .stage も position 付きなので、
     指定が無いとDOMの後ろにある .stage（＝作品写真）が上に乗り、
     バッジの右下が写真の白地で隠れて「赤い線」に見えます */
  z-index:2;
  background:var(--seal); color:#fff;
  font-family:var(--ff-mono); font-size:10px; letter-spacing:.12em;
  padding:5px 10px; text-transform:uppercase;
  white-space:nowrap;
}
.badge.is-sold{ background:var(--fg); }


/* ==========================================================================
   07 記入見本の破線枠（contact の「書き出しの例」にも流用する）
   ========================================================================== */
.sample{
  border:1.5px dashed var(--line-dash); background:#fff;
  padding:34px 38px; position:relative; border-radius:var(--r-2);
}
.sample .tag{
  position:absolute; top:-9px; left:24px;
  background:var(--seal); color:#fff;
  font-family:var(--ff-mono); font-size:9.5px; letter-spacing:var(--ls-mono);
  padding:3px 9px; text-transform:uppercase;
}
.sample p{
  margin:0; font-family:var(--ff-serif);
  font-size:clamp(17px,2.1vw,23px); line-height:1.8; font-weight:300;
  color:var(--ink-sample); font-style:italic;
}
.sample .hint{
  font-family:var(--ff-sans); font-size:var(--fs-note); font-style:normal;
  color:var(--mut); margin-top:16px; line-height:1.85;
}
/* 作品欄の中に置く場合は一回り小さく */
.meta .sample{ padding:24px 26px 22px; }
.meta .sample p{ font-size:clamp(15px,1.5vw,18px); line-height:1.85; }
.meta .sample .hint{ font-size:11px; margin-top:13px; }

/* 実文が入ったあとの姿（見本ではなく本文） */
.thought .real p{
  font-family:var(--ff-serif); font-weight:300;
  font-size:clamp(16px,1.7vw,20px); line-height:1.85; color:var(--fg-2);
  font-style:normal; margin:0 0 var(--sp-2);
}
.thought .real p:last-child{ margin-bottom:0; }


/* ==========================================================================
   08 フッター
   ========================================================================== */
.site-root footer{
  border-top:var(--bw) solid var(--hair);
  padding:40px 0 56px; font-size:12px; color:var(--mut);
  display:flex; justify-content:space-between; gap:var(--sp-3); flex-wrap:wrap;
}
/* 著作権表示は2行になります（著作者／運営者）。行間だけ整えます */
.site-root footer > div:first-child{ line-height:1.9; }
.f-links{ display:flex; flex-wrap:wrap; gap:6px var(--sp-3); }
.f-links a{ color:var(--mut); transition:color var(--t); }
.f-links .f-soon{ color:var(--mut); }
.f-links a:hover{ color:var(--fg); text-decoration:underline; text-underline-offset:.18em; }


/* ==========================================================================
   09 ページヘッダー（下層5ページ共通）── 地色を敷かない。白地に罫線1本
   ========================================================================== */
.pagehead{ padding:44px 0 40px; border-bottom:var(--bw) solid var(--hair); }
.crumb{
  font-family:var(--ff-mono); font-size:10px; letter-spacing:var(--ls-mono);
  color:var(--mut); margin-bottom:18px;
}
.crumb a{ color:var(--mut); transition:color var(--t); }
.crumb a:hover{ color:var(--fg); }
.crumb span[aria-current="page"]{ color:var(--fg); }
.crumb .sep{ margin:0 8px; color:var(--line-soft); }

.pagehead h1{
  font-family:var(--ff-serif); font-weight:300;
  font-size:clamp(26px,3.4vw,40px); line-height:1.3;
  margin:0 0 var(--sp-2); letter-spacing:0;
}
.pagehead .sub{
  font-size:13.5px; color:var(--mut); margin:0; max-width:var(--measure);
}


/* ==========================================================================
   10 作品の枠 ─ 見せ方3案がすべて入る器
   ========================================================================== */
.art{
  background:var(--paper); border:var(--bw) solid var(--hair);
  padding:var(--sp-4); position:relative;
}
.stage{
  position:relative; overflow:hidden;
  aspect-ratio:4/5;
  display:flex; align-items:center; justify-content:center;
}
.sheet{ position:relative; width:100%; }
.stage .ink{ display:block; width:100%; height:auto; color:var(--fg); }
.stage img{ display:block; width:100%; height:100%; object-fit:contain; object-position:center; }
.seal{ position:absolute; right:3%; bottom:2%; width:10%; height:auto; }


/* ==========================================================================
   11 作品の見せ方3案 ─ ①が既定。②③は .art にクラスを1語足すだけ
      ① 紙の上に、そのまま（既定・暫定採用）＝ 10章の指定がそのまま①です
   ========================================================================== */

/* ── ② 暗がりに、浮かぶ ───────────────────────────── */
.art.view-2{ background:var(--dk); border-color:#26241c; }
.art.view-2 .stage{ background:var(--dk); }
.art.view-2 .stage::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 60% 50% at 50% 34%, rgba(255,250,235,.16), transparent 70%);
}
.art.view-2 .sheet{
  width:72%; background:#fdfcf8; padding:6% 5%;
  box-shadow:var(--sh-sheet);
}
.art.view-2 .badge{ background:var(--seal); }

/* ── ③ 飾られた姿で ──────────────────────────────── */
.art.view-3{ padding:0; background:var(--paper); }
.art.view-3 .stage{ aspect-ratio:4/5; }
.art.view-3 .sheet{ width:100%; height:100%; }
.art.view-3 .stage img{ object-fit:cover; }
.art.view-3 .seal{ display:none; }
.art.view-3 .badge{ top:12px; left:12px; }


/* ==========================================================================
   12 トップ固有 ─ site_v2.html の <style> をそのまま移したもの
      （.rvw 系と、01〜11 章で既に定義したものだけを除いています）
   ========================================================================== */

/* 冒頭の宣言 */
.creed{ border-bottom:var(--bw) solid var(--hair); padding:46px 0 44px; }
.creed p{
  max-width:44em; margin:0 auto; text-align:center;
  font-family:var(--ff-serif);
  font-size:clamp(17px,2vw,22px); line-height:1.92; font-weight:300; color:var(--fg-2);
}
.creed .en{ font-style:italic; }

/* 作品欄 */
.drop{ display:grid; grid-template-columns:1.02fr .98fr; gap:54px; padding:56px 0 64px; align-items:start; }
.ed{ font-family:var(--ff-mono); font-size:11px; letter-spacing:var(--ls-mono); color:var(--seal); text-transform:uppercase; }
.meta h1{ font-size:clamp(32px,4vw,50px); line-height:1.15; margin:14px 0 2px; font-weight:600; letter-spacing:-.01em; }
.meta h1 .kanji{ font-family:var(--ff-jp); font-weight:500; }
.meta .kana{ font-family:var(--ff-jp); font-size:15px; color:var(--mut); letter-spacing:.2em; display:block; margin-bottom:26px; }
.meta .lede{ font-size:14px; line-height:1.95; color:var(--fg-3); margin:22px 0 26px; max-width:46ch; }
.pricerow{ display:flex; align-items:baseline; gap:14px; padding:20px 0 18px; flex-wrap:wrap; }
.pricerow b{ font-size:28px; font-weight:600; letter-spacing:-.01em; }
.pricerow span{ font-size:12.5px; color:var(--mut); }
.note{ font-size:11.5px; color:var(--mut); margin-top:12px; line-height:1.8; }
.note em{ font-style:normal; color:var(--seal); font-weight:600; }

/* 作品欄の中の「一文字への想い」 */
.thought{ margin:24px 0 28px; }
.thought .tk{
  font-family:var(--ff-mono); font-size:10px; letter-spacing:var(--ls-label);
  text-transform:uppercase; color:var(--seal); margin:0 0 13px; font-weight:400;
}

/* 理念のひとこと */
.words{ background:var(--paper); border-top:var(--bw) solid var(--hair); border-bottom:var(--bw) solid var(--hair); padding:58px 0; }
.words .in{ max-width:760px; margin:0 auto; padding:0 36px; text-align:center; }
.words .k{ font-family:var(--ff-mono); font-size:10px; letter-spacing:var(--ls-label-wide); text-transform:uppercase; color:var(--seal); margin:0 0 22px; font-weight:400; }
.words blockquote{ margin:0; font-family:var(--ff-serif); font-size:clamp(20px,2.5vw,29px); line-height:1.72; font-weight:300; font-style:italic; }
.words .by{ font-size:11.5px; color:var(--mut); margin-top:22px; letter-spacing:.1em; }

/* 物語（暗いバンド） */
.story{ background:var(--dk); color:var(--lt); padding:76px 0; }
.story .grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:56px; align-items:center; }
.story .grid-2{
  display:grid; grid-template-columns:1fr 1fr; gap:56px;
  border-top:var(--bw) solid var(--on-dk-line); margin-top:56px; padding-top:48px;
}
.story .ph{
  background:var(--dk-2); border:var(--bw) solid var(--on-dk-line); aspect-ratio:4/5;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  font-family:var(--ff-mono); font-size:10px; letter-spacing:var(--ls-mono); color:rgba(243,239,230,.3);
}
.story .ph img{ width:100%; height:100%; object-fit:cover; }
.story .k{ font-family:var(--ff-mono); font-size:10px; letter-spacing:var(--ls-label-wide); text-transform:uppercase; color:var(--gold); margin-bottom:20px; }
.story h2{ font-family:var(--ff-serif); font-weight:300; font-size:clamp(26px,3.2vw,40px); line-height:1.32; margin:0 0 24px; }
.story p{ font-size:14px; line-height:2.1; color:var(--on-dk-body); margin:0 0 16px; max-width:48ch; }
.story .say{ color:var(--gold); font-style:normal; }
.story .strong{ color:var(--lt); font-weight:500; }
.story .teach{
  border-left:2px solid var(--gold); padding-left:22px; color:var(--on-dk-strong);
  font-family:var(--ff-serif); font-size:17px; font-style:italic; line-height:1.85;
}
.story .stats{ display:flex; gap:44px; border-top:var(--bw) solid var(--on-dk-line); padding-top:24px; margin-top:30px; flex-wrap:wrap; }
.story .stats .num{ font-family:'Cormorant Garamond',serif; font-size:36px; line-height:1; color:var(--gold); }
.story .stats .lb{ font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--on-dk-mut); margin-top:8px; }

/* 雅号の由来 */
.name-sec{ background:var(--paper); border-top:var(--bw) solid var(--hair); border-bottom:var(--bw) solid var(--hair); padding:74px 0; }
.name-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:56px; align-items:center; }
.name-chars{ display:flex; gap:20px; align-items:center; justify-content:center; }
.name-chars .c{ text-align:center; }
.name-chars .g{ font-family:var(--ff-jp); font-size:clamp(52px,8vw,86px); line-height:1; color:var(--fg); }
.name-chars .m{ font-family:var(--ff-mono); font-size:10px; letter-spacing:var(--ls-mono); text-transform:uppercase; color:var(--mut); margin-top:14px; }
.name-chars .plus{ font-size:22px; color:var(--line-soft); }
.name-sec .k{ font-family:var(--ff-mono); font-size:10px; letter-spacing:var(--ls-label-wide); text-transform:uppercase; color:var(--seal); margin-bottom:18px; }
.name-sec h2{ font-family:var(--ff-serif); font-weight:300; font-size:clamp(25px,3vw,36px); line-height:1.36; margin:0 0 22px; }
.name-sec p{ font-size:14px; line-height:2.1; color:var(--fg-3); margin:0 0 15px; max-width:50ch; }

/* 汎用セクション */
.sec{ padding:70px 0; border-top:var(--bw) solid var(--hair); }
.sh{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:30px; gap:20px; flex-wrap:wrap; }
.sh h2{ font-size:19px; font-weight:600; margin:0; letter-spacing:-.01em; }
.sh .s{ font-size:12.5px; color:var(--mut); }

/* ご購入の流れ */
.how{ display:grid; grid-template-columns:repeat(4,1fr); gap:28px; }
.how .n{ font-family:var(--ff-mono); font-size:11px; color:var(--seal); letter-spacing:var(--ls-mono); }
.how h3{ font-size:14.5px; margin:10px 0 8px; font-weight:600; }
.how p{ font-size:12.8px; line-height:1.95; color:var(--mut); margin:0; }

/* 作品カードの一覧（index の抜粋・works の全件で共通） */
/* align-items:start ─ 作品ごとに縦横比が違うので、カードの高さを揃えません。
   揃えると、背の低い作品のカードの下に空白の帯ができます */
.past{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:start; }
.pcard{ border:var(--bw) solid var(--hair); border-radius:var(--r-2); overflow:hidden; background:#fff; }
.pcard .im{ background:var(--paper); padding:26px; position:relative; }
.pcard .im .ink{ display:block; width:100%; height:auto; color:var(--fg); }
/* 作品写真。縦横比はそのまま、カードの幅いっぱいに置く */
.pcard .im picture{ display:block; }
.pcard .im img{ display:block; width:100%; height:auto; }
.pcard .tx{ padding:14px 16px 16px; }
.pcard .tx b{ font-size:13.5px; font-weight:600; display:block; }
/* works.html のカード見出しは h2（h1 の直下なので段を飛ばさない）。
   index.html の抜粋カードは、直前に h2 があるため h3 のまま。両方に同じ見た目を当てます */
.pcard .tx h2,
.pcard .tx h3{ font-size:13.5px; font-weight:600; display:block; margin:0; }
/* 直下の span だけを年月・所在の行として扱う（見出しの中の .en/.ja に効かせないため） */
.pcard .tx > span{ font-family:var(--ff-mono); font-size:10.5px; color:var(--mut); }

/* 作品カードの由来文（works.html）。年月の行の下に、2〜4行の短い文を添える */
.pcard .tx p{
  font-size:12.2px; line-height:1.95; color:var(--fg-3);
  margin:10px 0 0; max-width:42ch;
}

/* メール登録 */
.notify{ background:var(--paper); border-radius:var(--r-3); padding:44px; display:grid; grid-template-columns:1fr 360px; gap:38px; align-items:center; }
.notify h2{ font-size:23px; margin:0 0 10px; font-weight:600; letter-spacing:-.01em; }
.notify p{ font-size:13.5px; color:var(--mut); margin:0; line-height:1.9; }
.notify .msg{ font-size:12.5px; line-height:1.9; margin-top:12px; }
.notify .msg.is-error{ color:var(--seal); }

/* トップ末尾の結びの言葉（書家について短縮版の下） */
.sec .quiet{
  font-family:var(--ff-serif); font-weight:300; font-style:italic;
  font-size:clamp(17px,1.9vw,21px); line-height:1.8; color:var(--fg-2);
  margin:26px 0 0; max-width:36em;
}


/* ==========================================================================
   13 下層ページ固有
   ========================================================================== */

/* works：状態の1行（■毎月7 の点検対象） */
.count{
  border-top:var(--bw) solid var(--hair);
  border-bottom:var(--bw) solid var(--hair);
  padding:var(--sp-2) 0; margin:var(--sp-4) 0 var(--sp-5);
  font-family:var(--ff-mono); font-size:11px; letter-spacing:var(--ls-mono);
  color:var(--mut);
}

/* works：受付中のカードにだけ入るボタン */
.pcard .buy{ margin:0 16px 16px; width:auto; padding:12px; font-size:12.5px; }

/* works：リンクになっているカード */
a.pcard{ display:block; transition:border-color var(--t); }
a.pcard:hover{ border-color:var(--fg); }

/* works：12件を超えたときの年の見出し */
.year{
  grid-column:1 / -1;
  font-family:var(--ff-mono); font-size:11px; letter-spacing:var(--ls-mono);
  color:var(--mut); border-top:var(--bw) solid var(--hair);
  padding-top:var(--sp-2); margin-top:var(--sp-3); font-weight:400;
}

/* about：プロフィール */
.bio{ display:grid; grid-template-columns:1fr 1fr; gap:48px; }
.bio p{ font-size:var(--fs-body); line-height:2.05; color:var(--fg-3); margin:0 0 16px; }
.bio p:last-child{ margin-bottom:0; }
.bio .facts{
  border-left:var(--bw) solid var(--hair); padding-left:32px;
  font-size:12.8px; line-height:2.1; color:var(--mut);
}

/* about：結びの言葉（ページの最後の一文） */
.closing{ padding:var(--band-y) 0; border-top:var(--bw) solid var(--hair); text-align:center; }
.closing p{
  margin:0 auto; max-width:24em;
  font-family:var(--ff-serif); font-weight:300; font-style:italic;
  font-size:clamp(21px,2.6vw,30px); line-height:1.7; color:var(--fg-2);
}
.closing .by{ font-size:var(--fs-note); color:var(--mut); margin-top:var(--sp-3); letter-spacing:.1em; }
/* 結びの言葉の下に置くCTA2本。.closing は中央揃えなので、.cta-row も中央に寄せる */
.closing .cta-row{ justify-content:center; }

/* 下層ページ：ページヘッダーの直後に来る区画。
   .pagehead の border-bottom と .sec の border-top が重なって2pxに見えるので、上の罫線を外す。
   （.pagehead はトップページに無いので、index.html の見え方には影響しません） */
.pagehead + .sec{ border-top:0; }

/* 設置イメージ（index）。画像は幅いっぱい、説明は写真の下に小さく添える */
.room-fig{ margin:0; }
.room-fig img{ display:block; width:100%; height:auto; border:var(--bw) solid var(--hair); border-radius:var(--r-2); }
.room-fig figcaption{
  margin-top:var(--sp-2); font-size:var(--fs-note); line-height:var(--lh-note);
  color:var(--mut); max-width:92ch;
}
.room-fig figcaption em{ font-style:normal; font-weight:600; color:var(--fg-3); }

/* shipping：番号付きの項目 */
.qa{ border-top:var(--bw) solid var(--hair); padding:var(--sp-5) 0 0; }
.qa + .qa{ margin-top:var(--sp-5); }
.qa .n{
  font-family:var(--ff-mono); font-size:11px;
  letter-spacing:var(--ls-mono); color:var(--seal); margin-bottom:var(--sp-2);
}
.qa h2{ font-size:var(--fs-h2b); font-weight:600; margin:0 0 var(--sp-3); letter-spacing:-.01em; }
.qa p{
  font-size:var(--fs-body); line-height:var(--lh-body);
  color:var(--fg-3); margin:0 0 var(--sp-3); max-width:var(--measure);
}
.qa p:last-child{ margin-bottom:0; }
/* shipping：答えを先に置く一行（お届け日数など）。結論を本文色より濃く、少し大きく */
.qa p.answer{ font-size:calc(var(--fs-body) + 1px); font-weight:600; color:var(--fg); }

/* contact：1段組・最大680px */
.form-col{ max-width:680px; margin:0 auto; }

/* contact：送信後のお礼（?sent=1 で hidden を外す） */
#thanks{
  background:var(--paper); border-radius:var(--r-3);
  padding:var(--sp-4); margin-bottom:var(--sp-5);
  border-left:3px solid var(--seal);
}
#thanks h2{ font-size:21px; font-weight:600; margin:0 0 var(--sp-2); }
#thanks p{ font-size:13.5px; line-height:var(--lh-body); color:var(--fg-3); margin:0 0 var(--sp-2); }
#thanks p:last-child{ margin-bottom:0; }

/* 汎用の本文（下層ページのリード文・説明文） */
.prose p{
  font-size:var(--fs-body); line-height:var(--lh-body);
  color:var(--fg-3); margin:0 0 var(--sp-3); max-width:60ch;
}
.prose p:last-child{ margin-bottom:0; }
.lede-note{ font-size:var(--fs-cap); color:var(--mut); margin:0 0 var(--sp-3); }

/* 定義リストの直後に置く本文（legal 末尾の1行）。
   .dl の最終行の罫線と本文がくっつくので、余白だけを足す。
   新しいクラスは作らず、既存の .dl と .prose の隣接だけで効かせている */
.dl + .prose{ margin-top:var(--sp-5); }


/* ==========================================================================
   14 @media (max-width:960px)
   ========================================================================== */
@media (max-width:960px){
  .site-root .wrap{ padding:0 var(--wrap-pad-sm); }

  /* ヘッダー：ナビを消さない。折り返す1行として出す（ハンバーガーは作らない） */
  .topbar{ flex-wrap:wrap; row-gap:var(--sp-2); padding:16px 0; }
  .logo{ order:1; }
  .tb-right{ order:2; margin-left:auto; }
  .site-root nav{
    order:3; width:100%; gap:18px; font-size:12px;
    padding-top:var(--sp-2); border-top:var(--bw) solid var(--hair);
  }

  /* 2段組をすべて1段に */
  .drop,
  .story .grid,
  .story .grid-2,
  .name-grid,
  .bio,
  .notify{ grid-template-columns:1fr!important; gap:34px!important; }
  .how{ grid-template-columns:1fr 1fr!important; }
  .past{ grid-template-columns:1fr 1fr!important; }

  .bio .facts{
    border-left:0; border-top:var(--bw) solid var(--hair);
    padding-left:0; padding-top:var(--sp-3);
  }

  .sec,.story,.name-sec,.words{ padding:var(--sec-y-sm) 0; }
  .closing{ padding:var(--sec-y-sm) 0; }
  .notify{ padding:28px; }
  .words .in{ padding:0 22px; }
  .creed{ padding:32px 0 30px; }
  .creed p{ font-size:15.5px; line-height:1.95; text-align:left; }
  .story .grid-2{ margin-top:34px; padding-top:34px; }
}


/* ==========================================================================
   15 @media (max-width:600px)
   ========================================================================== */
@media (max-width:600px){
  .ticker{ font-size:10px; letter-spacing:.1em; }

  .site-root nav{ gap:14px; font-size:11.5px; }
  .cta-sm{ padding:7px 12px; font-size:11px; }
  .langs .lang{ padding:5px 10px; }

  .how,.past{ grid-template-columns:1fr!important; }
  .form{ flex-direction:column; }
  .story .stats{ gap:26px; }

  /* 作品の枠：内側余白を落として、書そのものを大きく出す */
  .art{ padding:var(--sp-3); }
  .stage{ aspect-ratio:1/1; }
  .art.view-2 .sheet{ width:80%; }
  .art.view-3 .stage{ aspect-ratio:1/1; }

  .meta h1{ font-size:32px; }
  .pricerow{ padding:16px 0 14px; }
  .pricerow b{ font-size:26px; }
  .buy{ padding:16px; }

  .pcard .im{ padding:20px; }

  .sample{ padding:26px 20px 22px; }
  .sample .tag{ left:16px; }

  .pagehead{ padding:30px 0 26px; }
  .crumb{ margin-bottom:14px; }

  /* iOS は 16px 未満の入力欄でフォーカス時に自動拡大する */
  .f-input, .f-textarea, .f-select, .form .inp{ font-size:16px; }
  .f-field{ margin-bottom:var(--sp-3); }

  .dl > div{ grid-template-columns:1fr; gap:6px; padding:18px 0; }
  .dl dt{
    font-family:var(--ff-mono); font-size:10.5px;
    letter-spacing:var(--ls-mono); color:var(--seal); font-weight:400;
  }

  .qa{ padding-top:var(--sp-4); }
  .qa + .qa{ margin-top:var(--sp-4); }

  #thanks{ padding:var(--sp-3); }

  .site-root footer{ flex-direction:column; gap:var(--sp-3); padding:32px 0 44px; }
  .f-links{ flex-direction:column; gap:12px; }
}


/* ==========================================================================
   16 追加（2026-10-16）── 準備中の枠（これまでの書）と、額の色の見本
   色はすべて既存の変数のみ。新しい色は足していません
   ========================================================================== */
.soon{
  border:1.5px dashed var(--line-dash); border-radius:var(--r-2);
  background:var(--paper); padding:44px 32px; text-align:center;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
  min-height:240px;
}
.soon .tag{
  font-family:var(--ff-mono); font-size:10px; letter-spacing:var(--ls-label);
  text-transform:uppercase; color:var(--seal);
}
.soon p{
  margin:0; font-family:var(--ff-serif); font-weight:300;
  font-size:clamp(16px,1.7vw,20px); line-height:1.8; color:var(--fg-2); max-width:34em;
}
.soon .hint{ font-family:var(--ff-sans); font-size:var(--fs-note); color:var(--mut); line-height:var(--lh-note); }
.past .soon{ grid-column:span 2; align-self:stretch; }

.frames{ margin-top:var(--sp-5); }
.frames h3{
  font-family:var(--ff-mono); font-size:10px; letter-spacing:var(--ls-label);
  text-transform:uppercase; color:var(--seal); font-weight:400; margin:0 0 6px;
}
.frames .lead{ font-size:var(--fs-note); color:var(--mut); line-height:var(--lh-note); margin:0 0 var(--sp-3); max-width:92ch; }
.frames .grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.frames figure{ margin:0; }
.frames img{ display:block; width:100%; height:auto; border:var(--bw) solid var(--hair); border-radius:var(--r-2); }
.frames figcaption{ margin-top:8px; font-size:var(--fs-cap); color:var(--fg-3); }
@media (max-width:960px){ .past .soon{ grid-column:span 1; } .frames .grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .soon{ padding:34px 22px; min-height:0; } }