@charset "UTF-8";
/* ============================================================
   商品台帳（ledger）design system（サイト名・ドメインは site.json で設定）
   色は藍・生成り・朱の三色。朱は「判子」と「注意」「送信」だけに使う。

   構成は3層。
     1) 尺度   … 文字サイズ（--fs-*）と余白（--sp-*）。4pxの倍数に統一
     2) 色     … 明地を既定にし、暗地は「選べる見た目」として後段で上書き
     3) 面     … --field / --on-* のように「面の上の文字」を役割で持つ
   色を直書きしないのは、暗地のときだけ直書きが取り残される事故を防ぐため。
   ============================================================ */

:root{
  /* ---- 1) 尺度：文字サイズ ----
     以前は23種類の実数が散っていた。8段に畳む。 */
  --fs-1:11px;  /* 補助ラベル・判子・脚注の副文 */
  --fs-2:12px;  /* メタ情報・注記 */
  --fs-3:13px;  /* チップ・ラベル・状態表示 */
  --fs-4:14px;  /* 表・ボタン・副次本文 */
  --fs-5:16px;  /* 本文 */
  --fs-6:18px;  /* 小見出し */
  --fs-7:21px;  /* 見出し */
  --fs-8:26px;  /* 大見出し（暖簾の屋号） */

  /* ---- 1) 尺度：余白（4pxの倍数） ---- */
  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px;
  --sp-5:20px; --sp-6:24px; --sp-7:32px; --sp-8:40px;
  --sp-9:48px; --sp-10:64px;

  /* ---- 2) 色（明地＝既定） ---- */
  color-scheme: light;

  --paper:      #FAFAF6;  /* 紙 */
  --paper-2:    #F3F2EA;  /* 一段沈んだ面（引用・表頭・脚注・フォーム） */
  --paper-3:    #EBE9DE;  /* 二段沈んだ面（図・サムネイル） */
  --ink:        #1C2A38;  /* 墨 */
  --ink-2:      #46586A;  /* 墨（副次） */
  --ink-3:      #5E6C7A;  /* 墨（メタ情報）。AA 5.14 まで下げた上限 */
  --shu:        #CE3B21;  /* 朱 */
  --shu-deep:   #A62D16;  /* 朱（濃）＝ホバー・エラー・注意の見出し */
  --shu-wash:   #F7E9E4;  /* 朱の淡い面（注意ブロックの地） */
  --rule:       #D2CFC2;  /* 罫線（弱）。ΔL* 15.1 まで強くした */
  --rule-strong:#B5B09D;  /* 罫線（強）。ΔL* 26.4 */

  /* ---- 3) 面の上の文字（テーマに追従させる） ---- */
  --on-shu:   #FFFFFF;         /* 朱の塗りの上 */
  --field:      var(--paper);   /* 入力欄の地 */
  --field-focus:#FFFFFF;        /* 入力欄の地（フォーカス時） */

  /* 版面の幅。全頁この 1 つで決める。
     以前は本文だけを --measure（40rem→48rem）で中央に絞っていたが、
     トップの台帳が 1032px、記事の本文が 768px と 264px ずれ、
     ページを移動するたびに本文の幅が変わって別のサイトのように見えた。
     記事も枠いっぱいに流し、全頁で左右の端を一致させる。
     1行が約 64 字になるが、行間 1.85 と文節折り返し
     （word-break:auto-phrase）で行の追跡は保てる。 */
  --maxw:       1080px;

  --f-disp: "Shippori Mincho B1","Hiragino Mincho ProN","Yu Mincho",serif;
  --f-body: "Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  --f-util: "Shippori Antique","Zen Kaku Gothic New",sans-serif;
}

/* ------------------------------------------------------------
   暗地。既定は明地のまま（③）。暗地は「選べる見た目」として足す。
   ------------------------------------------------------------
   2箇所に書いているのは重複が目的ではなく、役割が違うため。
     (a) OSが暗色で、利用者が明示的に選んでいない場合（JSが無くても効く）
     (b) 利用者が明示的に暗色を選んだ場合（OSが明色でも効かせる）
   明示選択は data-theme に必ず記録されるので、両者は衝突しない。
   ------------------------------------------------------------ */

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --paper:#111417; --paper-2:#1A1E23; --paper-3:#232830;
    --ink:#E0DDD5; --ink-2:#AFB4BC; --ink-3:#8A9199;
    --shu:#FA6A3C; --shu-deep:#FF8566; --shu-wash:#2A1B17;
    --rule:#333A43; --rule-strong:#4A5460;
    --on-shu:#111417;
    --field:#20252B; --field-focus:#20252B;
  }
}

:root[data-theme="dark"]{
  color-scheme: dark;
  --paper:#111417; --paper-2:#1A1E23; --paper-3:#232830;
  --ink:#E0DDD5; --ink-2:#AFB4BC; --ink-3:#8A9199;
  --shu:#FA6A3C; --shu-deep:#FF8566; --shu-wash:#2A1B17;
  --rule:#333A43; --rule-strong:#4A5460;
  --on-shu:#111417;
  --field:#20252B; --field-focus:#20252B;
}

*,*::before,*::after{box-sizing:border-box;}

html{
  -webkit-text-size-adjust:100%;
  background:var(--paper);  /* 末端まで色を引く（暗地のスクロール端の白を防ぐ） */
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:var(--fs-5);
  line-height:1.85;
  font-feature-settings:"palt" 1;
  letter-spacing:.02em;
  /* 和文を文節の切れ目で折り返す。
     既定（word-break:normal）だと、日本語は文字単位で折り返すため
     「〜した。中国語の」のように語の途中で行が切れ、読みづらい。
     auto-phrase は文節境界を推定して折り返す（Chrome 119 以降）。
     欧文には影響しない（非CJKでは normal と同じ挙動になる）。
     非対応のブラウザ（Firefox・Safari）では従来どおり文字単位に戻るだけで、
     崩れはしない。 */
  word-break:auto-phrase;
  /* 最終行が1〜2字だけ残るのを避ける（対応ブラウザのみ効く） */
  text-wrap:pretty;
}

/* 折り返しを触らせたくない要素だけ既定に戻す。
   auto-phrase は CJK 向けなので、コード・表・整理番号では
   文節推定に意味がなく、むしろ不自然な位置で切れることがある。 */
.tbl,
.piece__no,
.crumb,
.piece__meta,
code,
pre{
  word-break:normal;
}

/* ただし word-break:normal に戻すと、区切りの無い長い URL が
   折り返せずに版面からはみ出す（0002 の github.com/... が 390px で
   実測 +28px）。overflow-wrap は「語が入りきらないときだけ」切るので、
   通常の語中切断は起きない。 */
.blk code,
.page__body code,
a[href]{
  overflow-wrap:break-word;
}

img{max-width:100%;height:auto;display:block;}

a{color:inherit;}

:focus-visible{
  outline:2px solid var(--shu);
  outline-offset:3px;
  border-radius:2px;
}

/* 画面には出さず、読み上げにだけ渡す */
.vh{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);
  white-space:nowrap;border:0;
}

.wrap{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:24px;
}


.skip{
  position:absolute;left:-9999px;
}
.skip:focus{
  left:16px;top:16px;z-index:99;
  background:var(--ink);color:var(--paper);
  padding:10px 16px;border-radius:4px;
}

/* ---------- 暖簾（masthead） ---------- */

.masthead{
  border-bottom:1px solid var(--rule);
  background:var(--paper);
}
.masthead__inner{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:var(--sp-6);
  padding-block:24px 20px;
  flex-wrap:wrap;
}
.brand{
  text-decoration:none;
  display:flex;
  align-items:baseline;
  gap:14px;
  flex-wrap:wrap;
}
.brand__mark{
  font-family:var(--f-disp);
  font-weight:800;
  font-size:var(--fs-8);
  letter-spacing:.14em;
  line-height:1;
  color:var(--ink);
}
.brand__sub{
  font-family:var(--f-util);
  font-size:var(--fs-1);
  letter-spacing:.22em;
  color:var(--ink-3);
}
.masthead__tools{
  display:flex;
  align-items:center;
  gap:var(--sp-5);
  flex-wrap:wrap;
}
.nav{
  display:flex;
  gap:24px;
  font-family:var(--f-util);
  font-size:var(--fs-3);
  letter-spacing:.12em;
}
.nav a{
  text-decoration:none;
  color:var(--ink-2);
  padding-bottom:3px;
  border-bottom:1px solid transparent;
  transition:border-color .18s ease,color .18s ease;
}
.nav a:hover{
  color:var(--shu);
  border-bottom-color:var(--shu);
}

/* ---------- 明暗の切替（暖簾の右端） ---------- */

.tt{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  padding:0;
  background:transparent;
  color:var(--ink-2);
  border:1px solid var(--rule-strong);
  cursor:pointer;
  transition:color .18s ease,border-color .18s ease,background-color .18s ease;
}
.tt:hover{color:var(--shu);border-color:var(--shu);}
.tt svg{width:16px;height:16px;display:block;fill:none;stroke:currentColor;stroke-width:1.6;}
/* アイコンは「いまの設定」を示す（追従／明／暗の3つ） */
.tt__i{display:none;}
[data-theme-mode="auto"]  .tt__auto{display:block;}
[data-theme-mode="light"] .tt__sun{display:block;}
[data-theme-mode="dark"]  .tt__moon{display:block;}
/* JSが無いと押しても何も起きないので、そもそも見せない */
html:not(.js) .tt{display:none;}

/* ---------- 表題（hero） ---------- */

.hero{
  padding-block:clamp(48px,8vw,96px) clamp(40px,6vw,72px);
  border-bottom:1px solid var(--rule);
  position:relative;
  overflow:hidden;
}
.hero::after{
  content:"";
  position:absolute;
  inset-block:0;
  right:clamp(-40px,-6vw,0px);
  width:1px;
  background:var(--shu);
  opacity:.35;
}
.hero .wrap{position:relative;}
.eyebrow{
  font-family:var(--f-util);
  font-size:var(--fs-1);
  letter-spacing:.34em;
  color:var(--shu);
  margin:0 0 var(--sp-5);
}
.hero__title{
  font-family:var(--f-disp);
  font-weight:800;
  font-size:clamp(30px,6.2vw,58px);
  line-height:1.28;
  letter-spacing:.04em;
  margin:0 0 var(--sp-6);
  max-width:20em;
}
.hero__lede{
  margin:0;
  max-width:34em;
  color:var(--ink-2);
  font-size:var(--fs-5);
}

/* ---------- 台帳（ledger） ---------- */

.ledger{padding-block:var(--sp-8) clamp(56px,8vw,96px);}

.ledger__head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:var(--sp-5);
  padding-bottom:var(--sp-4);
  border-bottom:2px solid var(--ink);
  margin-bottom:0;
}
.ledger__head h2{
  font-family:var(--f-disp);
  font-weight:600;
  font-size:var(--fs-7);
  letter-spacing:.16em;
  margin:0;
}
.more{
  font-family:var(--f-util);
  font-size:var(--fs-2);
  letter-spacing:.14em;
  color:var(--ink-2);
  text-decoration:none;
  border-bottom:1px solid var(--rule-strong);
  padding-bottom:2px;
  transition:color .18s ease,border-color .18s ease;
}
.more:hover{color:var(--shu);border-bottom-color:var(--shu);}

.entries{
  list-style:none;
  margin:0;
  padding:0;
  border-left:1px solid var(--shu);
}

.entry{
  border-bottom:1px solid var(--rule);
}
.entry__link{
  display:grid;
  grid-template-columns:74px 92px 1fr auto;
  align-items:center;
  gap:22px;
  padding:22px 20px;
  text-decoration:none;
  transition:background-color .2s ease;
}
.entry__link:hover{background:var(--paper-2);}

.entry__no{
  font-family:var(--f-util);
  font-size:var(--fs-2);
  letter-spacing:.18em;
  color:var(--ink-3);
}
.entry__thumb{
  aspect-ratio:1/1;
  background:var(--paper-3);
  border:1px solid var(--rule);
  display:grid;
  place-items:center;
  overflow:hidden;
}
.entry__thumb img{width:100%;height:100%;object-fit:cover;}
.entry__thumb span{
  font-family:var(--f-util);
  font-size:var(--fs-1);
  letter-spacing:.14em;
  color:var(--ink-3);
}
.entry__body{min-width:0;}
.entry__cat{
  display:block;
  font-family:var(--f-util);
  font-size:var(--fs-1);
  letter-spacing:.2em;
  color:var(--shu);
  margin-bottom:var(--sp-2);
}
.entry__title{
  display:block;
  font-family:var(--f-disp);
  font-weight:600;
  font-size:var(--fs-6);
  line-height:1.55;
  letter-spacing:.03em;
  margin-bottom:var(--sp-2);
}
.entry__sum{
  display:block;
  font-size:var(--fs-4);
  line-height:1.8;
  color:var(--ink-2);
}

/* ---------- 判子（署名要素） ---------- */

.stamp{
  font-family:var(--f-util);
  font-size:var(--fs-1);
  letter-spacing:.16em;
  line-height:1;
  padding:9px 8px;
  writing-mode:vertical-rl;
  text-orientation:upright;
  border:1.5px solid var(--shu);
  color:var(--shu);
  transform:rotate(-3deg);
  flex:none;
}
.stamp--bought{
  background:var(--shu);
  color:var(--on-shu);   /* 朱の塗りの上に載る文字。--paper ではない */
}
.stamp--used{
  background:var(--ink);
  border-color:var(--ink);
  color:var(--paper);
}

/* 記事の判子から「判子の意味」へ渡す導線。
   判子そのものは装飾のまま置き、下に小さい説明を添えるだけにする。
   （判子を大きくしたり動かしたりすると、署名要素としての重みが変わるため） */
.stamp-link{
  display:inline-flex;
  align-items:center;
  gap:var(--sp-2);
  text-decoration:none;
  color:inherit;
}
.stamp-link__hint{
  font-size:var(--fs-1);
  letter-spacing:.06em;
  color:var(--ink-3);
  border-bottom:1px solid var(--rule-strong);
  padding-bottom:1px;
  transition:color .2s ease,border-color .2s ease;
}
.stamp-link:hover .stamp-link__hint,
.stamp-link:focus-visible .stamp-link__hint{
  color:var(--shu-deep);
  border-bottom-color:var(--shu-deep);
}
/* 記事冒頭の判子。署名要素なので、記事でいちばん先に目に入る位置に置く。
   小さい判子に「この判子の意味」だけを添える形だと、意味が分からないまま
   読み進められてしまう。ここでは判子を大きくし、意味の一文を横に添える。 */
.stamp--lg{
  font-size:var(--fs-6);
  padding:14px 11px;
  border-width:2.5px;
  letter-spacing:.2em;
  transform:rotate(-4deg);
}
.stamp-link--lg{
  display:inline-flex;
  align-items:center;
  gap:var(--sp-3);
  text-decoration:none;
  color:inherit;
}
/* .piece__meta .stamp が horizontal-tb / padding:7px 12px を当てているので、
   同じ強さで上書きする。記事冒頭の判子だけは縦組みに戻す（判子らしさが出る）。
   .piece__meta .stamp はこの規則より後ろにあるため、詳細度を1つ上げないと負ける
   （.piece__meta .stamp--lg では 0,2,0 で同点になり、後勝ちで横組みのままだった）。 */
.piece__meta .stamp.stamp--lg{
  writing-mode:vertical-rl;
  text-orientation:upright;
  padding:12px 9px;
  font-size:var(--fs-6);
  border-width:2.5px;
  letter-spacing:.2em;
  transform:rotate(-4deg);
  /* 縦組みなので行の高さを持たせない。flex の行を押し広げないよう揃える。 */
  align-self:center;
}
.stamp-link--lg .stamp-link__text{
  display:flex;
  flex-direction:column;
  gap:2px;
  font-family:var(--f-util);
  font-size:var(--fs-2);
  line-height:1.6;
  letter-spacing:.04em;
  color:var(--ink-3);
  max-width:15em;
}
.stamp-link--lg .stamp-link__text strong{
  font-weight:400;
  color:var(--shu-deep);
  letter-spacing:.06em;
}

/* 一覧（トップ・商品帳）の判子。
   11px の判子では、行の高さ 92px のサムネイルの隣で完全に埋もれ、
   「どこまで確認したか」が一覧から読み取れなかった。
   記事冒頭の判子（18px・縦 95px）より一段小さく、一覧の行に収まる
   大きさ（縦 80px 前後）にする。一覧の行は全体が <a> なので、
   判子だけを大きくし、入れ子のリンクは作らない。 */
.stamp--md{
  font-size:var(--fs-5);
  padding:12px 10px;
  border-width:2px;
  letter-spacing:.14em;
  transform:rotate(-4deg);
}
/* 縦組みの判子は、行の中央に置く。 */
.entry__link > .stamp{
  justify-self:end;
}
.stamp-link--lg:hover .stamp-link__text strong,
.stamp-link--lg:focus-visible .stamp-link__text strong{
  text-decoration:underline;
  text-underline-offset:2px;
}

/* 判子の見出しへ飛ぶので、固定ヘッダー分は無いが余白だけ確保する */
#stamp{scroll-margin-top:var(--sp-6);}

/* ---------- 分類（tags） ---------- */

.tagsheet{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:0;
  border-left:1px solid var(--shu);
}
.tagsheet li{
  border-bottom:1px solid var(--rule);
  border-right:1px solid var(--rule);
}
.tagsheet a{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:14px;
  padding:18px 20px;
  text-decoration:none;
  transition:background-color .2s ease;
}
.tagsheet a:hover{background:var(--paper-2);}
.tagsheet .t-name{
  font-family:var(--f-disp);
  font-weight:600;
  font-size:var(--fs-5);
  letter-spacing:.08em;
}
.tagsheet .t-count{
  font-family:var(--f-util);
  font-size:var(--fs-2);
  letter-spacing:.12em;
  color:var(--ink-3);
}

/* ---------- 品（article） ---------- */

/* 版面（枠）は全頁 1080px で統一する。
   以前は記事と固定頁だけ .wrap を 688px に絞り、さらに :has() で
   暖簾と脚注まで同じ幅に縮めていた。そのため記事を開くと、ロゴも
   脚注も内側へ 196px 飛び、トップページと別のサイトのように見えた
   （「ヘッダーやフッターの幅が違う」という指摘の原因）。
   枠を絞るのをやめ、中身も枠いっぱいに流す。 */
.piece > .wrap,
.page > .wrap{
  max-width:var(--maxw);
}

/* 記事・固定頁の中身は、トップページと同じ幅（1080px の枠 − 左右余白
   24px×2 = 1032px）いっぱいに流す。
   以前は本文だけを 48rem（768px）に絞っていたため、トップの台帳
   （1032px）と記事の本文（768px）で左右の端が 132px ずつずれていた。
   ページを移動するたびに本文の幅が変わり、狭く感じる原因になる。
   ここでは絞らず、枠の幅をそのまま使う。 */
.piece > .wrap > *,
.page > .wrap > *{
  max-width:none;
}
/* 枠付きのブロック（注意・確認）も同じ幅に揃える。
   中身は内側余白のぶんだけ狭くなるが、枠の外側の端は本文と一致する。 */
.piece > .wrap > .blk--caution,
.piece > .wrap > .blk--verified,
.page > .wrap > .blk--caution,
.page > .wrap > .blk--verified{
  max-width:none;
}
/* 見出しの罫線は、枠の幅いっぱいに引く。 */
.blk h2{max-width:none;}

.piece{padding-block:clamp(32px,5vw,60px) clamp(56px,8vw,96px);}
.crumb{
  font-family:var(--f-util);
  font-size:var(--fs-2);
  letter-spacing:.14em;
  color:var(--ink-3);
  margin-bottom:var(--sp-7);
}
.crumb a{text-decoration:none;color:var(--ink-3);}
.crumb a:hover{color:var(--shu);}
.crumb span{margin-inline:8px;}

.piece__head{
  border-bottom:2px solid var(--ink);
  padding-bottom:26px;
  margin-bottom:var(--sp-7);
}
.piece__no{
  font-family:var(--f-util);
  font-size:var(--fs-2);
  letter-spacing:.24em;
  color:var(--shu);
  margin:0 0 var(--sp-4);
}
.piece__title{
  font-family:var(--f-disp);
  font-weight:800;
  font-size:clamp(26px,4.6vw,42px);
  line-height:1.35;
  letter-spacing:.03em;
  margin:0 0 18px;
  /* 行の長さを揃える。auto-phrase だけだと、この記事のh1は
     「うんちを踏む感覚のスリッパ／——その正体は中国語の／褒め言葉だった」と
     3行に割れ、2行目の行頭がダッシュ（——）になる。行頭禁則の違反で、
     line-break:strict でも word-break の指定でも避けられない
     （—— は約物ではなく記号扱いのため）。balance を掛けると行の長さが
     均等になり、ダッシュが行の途中に収まる。 */
  text-wrap:balance;
}
.piece__sum{
  margin:0 0 var(--sp-6);
  color:var(--ink-2);
  max-width:none;   /* 本文と同じ幅に揃える */
  line-height:1.85;
}
.piece__meta{
  display:flex;
  align-items:center;
  gap:var(--sp-5);
  flex-wrap:wrap;
  font-family:var(--f-util);
  font-size:var(--fs-2);
  letter-spacing:.12em;
  color:var(--ink-3);
}
.piece__meta .stamp{writing-mode:horizontal-tb;padding:7px 12px;}

/* 判子の横に置く事実（分類・掲載日・価格）。
   以前は span を横一列に並べていたため、判子を縦組みに大きくした途端、
   カテゴリと日付が判子の途中に浮いた位置で折り返していた。
   定義リストにして「ラベル：値」の形で揃える。 */
.piece__meta-stamp{flex:none;}
.piece__facts{
  margin:0;
  display:grid;
  gap:2px;
  font-size:var(--fs-2);
  line-height:1.7;
  letter-spacing:.06em;
}
.piece__facts > div{
  display:grid;
  grid-template-columns:5.5em 1fr;
  gap:var(--sp-2);
}
.piece__facts dt{
  color:var(--ink-3);
  letter-spacing:.1em;
}
.piece__facts dd{
  margin:0;
  color:var(--ink-2);
}

.piece__pr{
  font-size:var(--fs-3);
  color:var(--ink-3);
  border-left:3px solid var(--rule-strong);
  padding:var(--sp-2) 0 var(--sp-2) var(--sp-4);
  margin-bottom:var(--sp-7);
}

.piece__fig{
  margin:0 0 var(--sp-8);
  border:1px solid var(--rule);
  background:var(--paper-3);
}
.piece__fig figcaption{
  font-size:var(--fs-2);
  color:var(--ink-3);
  padding:var(--sp-3) var(--sp-4);
  border-top:1px solid var(--rule);
}

/* 本文中の図版。記事が文字ばかりになるのを避けるために置く。
   商品写真は使わない（著作権・AdSense）。数値から描いた図だけを載せる。
   図も本文と同じ幅（枠いっぱい）に揃える。 */
.fig{
  margin:var(--sp-6) 0 var(--sp-7);
  max-width:none;
}
.fig img{
  width:100%;
  height:auto;
  display:block;
  border:1px solid var(--rule);
  background:var(--paper-2);
}
.fig figcaption{
  font-size:var(--fs-2);
  line-height:1.7;
  color:var(--ink-3);
  padding-top:var(--sp-2);
  border-top:1px solid var(--rule);
  margin-top:var(--sp-2);
}

.blk{
  margin:0 0 var(--sp-8);
  padding-top:var(--sp-1);
}
.blk h2{
  font-family:var(--f-disp);
  font-weight:600;
  font-size:var(--fs-7);
  letter-spacing:.08em;
  margin:0 0 var(--sp-4);
  padding-bottom:10px;
  border-bottom:1px solid var(--rule);
}
/* 本文も枠の幅いっぱいに流す。
   以前は段落だけ 48rem（768px）に絞っていたため、見出しの罫線（1032px）と
   段落（768px）で右端が 264px ずれていた。表・図と同じ幅に揃える。 */
.blk p,
.blk ul,
.blk ol,
.blk blockquote{max-width:none;}

/* 段落の間隔は行間の約1.8倍。1em（16px）は行間の隙間 13.6px とほぼ同じで、
   段落の切れ目が読み取れなかった。 */
.blk p{margin:0 0 var(--sp-6);}
.blk p:last-child{margin-bottom:0;}
.blk ul,
.blk ol{margin:0 0 var(--sp-6);padding-left:1.4em;}
.blk li{margin-bottom:.45em;}
.blk li:last-child{margin-bottom:0;}
/* 本文のリンク。全体の a{color:inherit} を継承するため、記事本文では
   下線も色も付かず地の文と見分けられなかった（実測で4本の外部リンクが該当）。 */
.blk a{
  color:var(--shu-deep);
  text-decoration:underline;
  text-underline-offset:.18em;
  text-decoration-thickness:1px;
  text-decoration-color:color-mix(in srgb,var(--shu-deep) 45%,transparent);
  transition:background-color .2s ease;
}
.blk a:hover{
  background:var(--shu-wash);
  text-decoration-color:var(--shu-deep);
}

/* 本文中のインラインコード。.page__body にしか定義が無く、
   記事側では地の文と同じ見た目になっていた（0007 で4箇所）。 */
.blk code{
  font-size:.92em;
  background:var(--paper-2);
  padding:2px 6px;
  border:1px solid var(--rule);
}

.blk blockquote{
  margin:0 0 var(--sp-6);
  padding:14px 18px;
  background:var(--paper-2);
  border-left:3px solid var(--rule-strong);
  color:var(--ink-2);
}
/* 表は枠で包み、狭い画面では表だけ横スクロールさせる。
   包まないと 390px の画面でページ全体が横に伸びる（0007 は3列）。
   表は中身が長いので、横スクロールに逃がす。 */
.tbl{
  max-width:100%;
  overflow-x:auto;
  margin:0 0 var(--sp-6);
  /* スクロールできることを示す細い帯（暗地でも色はトークン由来） */
  scrollbar-width:thin;
  scrollbar-color:var(--rule-strong) transparent;
}
.tbl:focus-visible{outline:2px solid var(--shu);outline-offset:3px;}

.blk table{
  width:100%;
  border-collapse:collapse;
  font-size:var(--fs-4);
  margin:0;
}
.blk th,.blk td{
  border:1px solid var(--rule);
  padding:10px 14px;
  text-align:left;
  vertical-align:top;
}
.blk th{
  background:var(--paper-2);
  font-family:var(--f-util);
  font-weight:400;
  letter-spacing:.08em;
  white-space:nowrap;
}
/* 1列目は「商品名」「本体寸法」のような短い項目名。
   2列目の文章が長いため、放っておくと列幅が均等に配られ、
   「本体／寸法」「カテゴ／リ」のように2文字ずつ折れて読みにくい。
   項目名の列は中身に合わせて縮め、折り返さない。
   中身が長い表（0001 のレビュー表など）でも、はみ出す分は
   .tbl の横スクロールに収まる。 */
.blk table td:first-child{
  width:1%;
  white-space:nowrap;
}
/* 狭い画面では見出しも折り返す。nowrap のままだと列が縮まず、
   302px の使える幅に対して表が溢れ続ける。 */
@media (max-width:760px){
  .blk th{white-space:normal;}
  .blk th,.blk td{padding:8px 10px;font-size:var(--fs-3);}
}

/* 朱枠の注意ブロック — このサイトで一番読ませたい部分
   枠の外側の端を本文と揃える（max-width:none）。内側の文字は
   左右の内側余白 26px のぶんだけ狭くなるが、枠の位置は本文と一致する。 */
.blk--caution{
  border:1.5px solid var(--shu);
  padding:26px 26px 22px;
  background:var(--shu-wash);
  max-width:none;
}
.blk--caution h2{
  color:var(--shu-deep);
  border-bottom-color:var(--shu);
  margin-top:-4px;
}

.blk--verified{
  background:var(--paper-2);
  padding:26px 26px 22px;
  max-width:none;
}

.piece__cta{
  border-top:2px solid var(--ink);
  padding-top:var(--sp-7);
  margin-bottom:var(--sp-8);
}
.piece__cta p{
  font-size:var(--fs-3);
  color:var(--ink-3);
  margin:0 0 var(--sp-4);
}
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:var(--shu);
  color:var(--on-shu);
  text-decoration:none;
  font-family:var(--f-util);
  font-size:var(--fs-4);
  letter-spacing:.08em;
  padding:var(--sp-4) var(--sp-6);
  transition:background-color .18s ease,transform .18s ease;
}
.btn:hover{background:var(--shu-deep);transform:translateY(-1px);}
.btn span{font-size:var(--fs-5);}

.piece__tags{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}
.piece__tags .lbl{
  font-family:var(--f-util);
  font-size:var(--fs-1);
  letter-spacing:.18em;
  color:var(--ink-3);
  margin-right:var(--sp-1);
}
.chip{
  font-size:var(--fs-3);
  text-decoration:none;
  color:var(--ink-2);
  border:1px solid var(--rule-strong);
  padding:6px var(--sp-3);
  transition:border-color .18s ease,color .18s ease;
}
.chip:hover{border-color:var(--shu);color:var(--shu);}

/* ---------- 静的な頁 ---------- */

.page{padding-block:clamp(32px,5vw,60px) clamp(56px,8vw,96px);}
.page__head{
  border-bottom:2px solid var(--ink);
  padding-bottom:var(--sp-6);
  margin-bottom:var(--sp-7);
}
.page__title{
  font-family:var(--f-disp);
  font-weight:800;
  font-size:clamp(24px,4vw,36px);
  letter-spacing:.06em;
  margin:0;
}
.page__body{max-width:none;}   /* 記事本文と同じ幅に揃える */
.page__body h2{
  font-family:var(--f-disp);
  font-weight:600;
  font-size:var(--fs-6);
  letter-spacing:.08em;
  margin:2em 0 .8em;
  padding-bottom:10px;
  border-bottom:1px solid var(--rule);
}
.page__body h2:first-child{margin-top:0;}
.page__body p{margin:0 0 1em;}
.page__body ul,.page__body ol{margin:0 0 1em;padding-left:1.4em;}
.page__body li{margin-bottom:.35em;}
.page__body table{width:100%;border-collapse:collapse;font-size:var(--fs-4);margin:0 0 1em;}
.page__body th,.page__body td{border:1px solid var(--rule);padding:10px 14px;text-align:left;}
.page__body th{background:var(--paper-2);}
.page__body a{color:var(--shu-deep);}
.page__body blockquote{
  margin:0 0 1em;padding:14px 18px;background:var(--paper-2);
  border-left:3px solid var(--rule-strong);color:var(--ink-2);
}
.page__body code{
  font-size:.92em;background:var(--paper-2);padding:2px 6px;
  border:1px solid var(--rule);
}

.note{
  background:var(--paper-2);
  border:1px solid var(--rule);
  padding:var(--sp-5) var(--sp-6);
  margin:0 0 1.5em;
  font-size:var(--fs-4);
}
.note strong{color:var(--shu-deep);}

/* ---------- 404 ---------- */

.nf{padding-block:clamp(60px,12vw,140px);text-align:center;}
.nf h1{
  font-family:var(--f-disp);
  font-weight:800;
  font-size:clamp(28px,6vw,52px);
  letter-spacing:.06em;
  margin:0 0 18px;
}
.nf p{color:var(--ink-2);margin:0 0 var(--sp-7);}

/* ---------- 脚注 ---------- */

.foot{
  border-top:2px solid var(--ink);
  margin-top:var(--sp-8);
  padding-block:var(--sp-9) 56px;
  background:var(--paper-2);
}
/* 脚注は「屋号」と「リンクの列」の2列。
   以前は 1fr 2fr で、リンクの列に幅の 2/3 を機械的に与えていたため、
   枠が 688px に絞られていたことも重なり、6つのリンクが 2 行・3 行に
   折り返していた。列幅を中身に合わせ（auto）、余りを屋号側に渡し、
   リンクは右端に寄せる。これで 1080px の枠に 1 行で収まる。 */
.foot__inner{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:var(--sp-7);
  align-items:start;
}
.foot__brand{
  font-family:var(--f-disp);
  font-weight:800;
  font-size:var(--fs-7);
  letter-spacing:.12em;
  line-height:1.3;
}
.foot__brand span{
  display:block;
  font-family:var(--f-util);
  font-weight:400;
  font-size:var(--fs-1);
  letter-spacing:.18em;
  color:var(--ink-3);
  margin-top:10px;
}
.foot__nav{
  display:flex;
  flex-wrap:wrap;
  gap:var(--sp-3) var(--sp-6);
  font-size:var(--fs-3);
  align-content:start;
  /* 屋号の右、枠の右端に寄せる。左寄せのままだと、屋号との間に
     不揃いな余白ができ、リンクの列が途中で切れて見える。 */
  justify-content:flex-end;
  text-align:right;
}
.foot__nav a{
  text-decoration:none;
  color:var(--ink-2);
  border-bottom:1px solid transparent;
}
.foot__nav a:hover{color:var(--shu);border-bottom-color:var(--shu);}
.foot__note{
  grid-column:1/-1;
  font-size:var(--fs-2);
  line-height:1.8;
  color:var(--ink-3);
  margin:0;
  border-top:1px solid var(--rule);
  padding-top:var(--sp-5);
}

/* ---------- 反応 ---------- */

@media (max-width:760px){
  .masthead__inner{align-items:flex-start;padding-block:18px 14px;}
  .brand__mark{font-size:var(--fs-7);}
  .nav{gap:var(--sp-5);font-size:var(--fs-3);}
  .entry__link{
    grid-template-columns:56px 1fr auto;
    gap:14px;
    padding:18px 14px;
  }
  .entry__thumb{display:none;}
  .entry__no{grid-row:1;}
  .entry__title{font-size:var(--fs-5);}
  .entry__sum{display:none;}
  /* 390px では判子の幅が 46px を占め、タイトルが 201px まで狭まって
     3行に折れていた。判子は目印として残しつつ、一覧の行では一段詰める
     （14px・幅 38px）。記事冒頭の判子（18px・45px 幅）とは別物として扱う。 */
  .entry__link > .stamp{
    font-size:var(--fs-4);
    padding:10px 8px;
    letter-spacing:.1em;
  }
  .foot__inner{grid-template-columns:1fr;gap:22px;}
  /* 1列に積むので、右寄せのままだと不自然に右へ寄る。左に戻す。 */
  .foot__nav{justify-content:flex-start;text-align:left;}
  /* 折り返しに任せると、最後の行に1つだけ残る（390px で実測）。
     2列の格子にすると、リンクが縦に揃い、行の長さも一定になる。 */
  .foot__nav{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px var(--sp-5);
  }
  .wrap{padding-inline:18px;}
  .blk--caution,.blk--verified{padding:20px 18px 16px;}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
}

/* 入荷の立ち上がり */
@keyframes rise{
  from{opacity:0;transform:translateY(12px);}
  to{opacity:1;transform:translateY(0);}
}
.entry{animation:rise .55s cubic-bezier(.22,.61,.36,1) both;}
.entry:nth-child(1){animation-delay:.02s;}
.entry:nth-child(2){animation-delay:.06s;}
.entry:nth-child(3){animation-delay:.10s;}
.entry:nth-child(4){animation-delay:.14s;}
.entry:nth-child(5){animation-delay:.18s;}
.entry:nth-child(6){animation-delay:.22s;}
.entry:nth-child(n+7){animation-delay:.26s;}

/* 判子が押される */
@keyframes stampIn{
  0%{opacity:0;transform:rotate(-3deg) scale(2.1);}
  55%{opacity:1;transform:rotate(-3deg) scale(.93);}
  75%{transform:rotate(-3deg) scale(1.02);}
  100%{opacity:1;transform:rotate(-3deg) scale(1);}
}
.piece__meta .stamp{animation:stampIn .6s cubic-bezier(.2,.8,.3,1) .3s both;}

/* ============================================================
   紹介リクエスト フォーム
   朱は「送信」という最重要の一箇所だけに使う（判子・注意と同格に扱う）
   ============================================================ */

.reqform{
  border:1px solid var(--rule);
  background:var(--paper-2);
  padding:clamp(20px,3vw,32px);
  margin:0 0 1.5em;
}

.reqform__row{margin:0 0 22px;}

.reqform__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  margin:0 0 22px;
}

.reqform label{
  display:block;
  font-family:var(--f-util);
  font-size:var(--fs-3);
  letter-spacing:.14em;
  color:var(--ink-2);
  margin-bottom:var(--sp-2);
}

.reqform__req{
  font-size:var(--fs-2);
  letter-spacing:.12em;
  color:var(--paper);
  background:var(--shu);
  padding:2px 6px;
  margin-left:var(--sp-2);
  vertical-align:middle;
}

.reqform input[type="text"],
.reqform input[type="email"],
.reqform input[type="url"],
.reqform select,
.reqform textarea{
  width:100%;
  font-family:var(--f-body);
  font-size:var(--fs-5);
  line-height:1.7;
  color:var(--ink);
  background:var(--field);
  border:1px solid var(--rule-strong);
  padding:12px 14px;
  border-radius:0;
  -webkit-appearance:none;
  appearance:none;
  transition:border-color .18s ease,background-color .18s ease;
}

.reqform select{
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-2) 50%),
                   linear-gradient(135deg,var(--ink-2) 50%,transparent 50%);
  background-position:calc(100% - 19px) calc(50% - 2px),calc(100% - 14px) calc(50% - 2px);
  background-size:5px 5px,5px 5px;
  background-repeat:no-repeat;
  padding-right:40px;
}

.reqform textarea{resize:vertical;min-height:9em;}

.reqform input:focus,
.reqform select:focus,
.reqform textarea:focus{
  outline:none;
  border-color:var(--ink);
  background:var(--field-focus);
}

.reqform input:focus-visible,
.reqform select:focus-visible,
.reqform textarea:focus-visible{
  outline:2px solid var(--shu);
  outline-offset:2px;
}

.reqform__hint{
  font-size:var(--fs-3);
  color:var(--ink-3);
  margin:var(--sp-2) 0 0;
}

/* ハニーポット（自動投稿だけが記入する欄。人間には見せない） */
.reqform__hp{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}

.reqform__actions{
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
  border-top:1px solid var(--rule);
  padding-top:var(--sp-6);
}

.reqform__actions .btn{
  border:0;
  cursor:pointer;
  font-family:var(--f-util);
}

.reqform__actions .btn[disabled]{
  background:var(--ink-3);
  cursor:default;
  transform:none;
}

.reqform__status{
  font-size:var(--fs-3);
  margin:0;
  min-height:1.4em;
  color:var(--ink-2);
}

.reqform__status.is-error{color:var(--shu-deep);}
.reqform__status.is-done{color:var(--ink);}

.reqform__status.is-done::before{
  content:"";
  display:inline-block;
  width:9px;height:9px;
  margin-right:8px;
  background:var(--ink);
  vertical-align:middle;
}

.reqform__note{
  font-size:var(--fs-2);
  line-height:1.8;
  color:var(--ink-3);
  margin:var(--sp-5) 0 0;
  border-top:1px solid var(--rule);
  padding-top:var(--sp-4);
}
.reqform__note a{color:var(--ink-2);}

@media (max-width:640px){
  .reqform__grid{grid-template-columns:1fr;gap:0;}
  .reqform__grid > div{margin-bottom:22px;}
  .reqform__actions{flex-direction:column;align-items:stretch;}
  .reqform__actions .btn{justify-content:center;}
}

/* 記事末のリクエスト誘導 */
.solicit{
  border-top:2px solid var(--ink);
  margin:0 0 var(--sp-8);
  padding:26px 0 0;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:var(--sp-6);
  flex-wrap:wrap;
}
.solicit p{
  margin:0;
  font-size:var(--fs-4);
  color:var(--ink-2);
  max-width:32em;
}
.solicit .more{white-space:nowrap;}