/* 図解の見本（2026-11-03）共通。色は今の店の色だけ：墨 #2a2521・本文 #4f443c・生成り #f4eedf・砂 #d9cca8・錆 #b03e12（錆は A3 の枠だけ）
   字は今のページの字をそのまま継ぐ（font-family: inherit）。アイコンは Lucide（ISC）と自前の SVG。
   今のテーマの li/figure/span の指定に負けないよう、全部 .tz.tz.tz.tz.tz から書く。 */
.tz.tz.tz.tz.tz{--ink:#2a2521;--tx:#4f443c;--cream:#f4eedf;--sand:#d9cca8;--rust:#b03e12;--paper:#fbf8f1;--ng:#f1e9e4;--ngink:#8c3a1c;
  color:var(--ink);font-family:inherit;line-height:1.6;margin:0 0 1.6em;container-type:inline-size;letter-spacing:.02em;font-size:16px}
.tz.tz.tz.tz.tz *{box-sizing:border-box;letter-spacing:inherit}
.tz.tz.tz.tz.tz h3,.tz.tz.tz.tz.tz h4{font-family:inherit;color:var(--ink);margin:0;padding:0;line-height:1.4;text-wrap:balance;font-weight:700}
.tz.tz.tz.tz.tz p{margin:0;padding:0;text-wrap:pretty}
.tz.tz.tz.tz.tz ul,.tz.tz.tz.tz.tz ol{list-style:none;margin:0;padding:0}
.tz.tz.tz.tz.tz li{list-style:none;margin:0;padding:0;position:relative;background:none;border:0;font-size:inherit;line-height:inherit;min-height:0}
.tz.tz.tz.tz.tz li::before,.tz.tz.tz.tz.tz li::marker{content:none}
.tz.tz.tz.tz.tz figure{margin:0;padding:0;border:0;max-width:none;width:auto}
.tz.tz.tz.tz.tz svg.tz-i{width:26px;height:26px;flex:none;color:var(--ink);display:block}
.tz.tz.tz.tz.tz .tz-num{font-variant-numeric:tabular-nums}
.tz.tz.tz.tz.tz .tz-h{font-size:17px;margin:22px 0 10px}
.tz.tz.tz.tz.tz a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* 番号付きの手順。スマホ＝縦の列、PC＝横に4つ */
.tz.tz.tz.tz.tz .tz-steps{display:grid;grid-template-columns:1fr;gap:0;border:1.5px solid var(--ink);border-radius:12px;background:#fff;overflow:hidden}
.tz.tz.tz.tz.tz .tz-steps>li{display:grid;grid-template-columns:22px 44px 1fr;gap:10px;align-items:center;padding:12px 14px;border-bottom:1px solid var(--sand)}
.tz.tz.tz.tz.tz .tz-steps>li:last-child{border-bottom:0}
.tz.tz.tz.tz.tz .tz-n{width:22px;height:22px;border-radius:50%;background:var(--ink);color:#fff;font-weight:700;font-size:16px;display:grid;place-items:center;font-variant-numeric:tabular-nums;line-height:1}
.tz.tz.tz.tz.tz .tz-ic{width:44px;height:44px;border-radius:50%;background:var(--cream);display:grid;place-items:center}
.tz.tz.tz.tz.tz .tz-steps h3{font-size:16px}
.tz.tz.tz.tz.tz .tz-steps p{font-size:16px;color:var(--tx);line-height:1.5}
@container (min-width:600px){
  .tz.tz.tz.tz.tz .tz-steps{grid-template-columns:repeat(4,1fr)}
  .tz.tz.tz.tz.tz .tz-steps>li{grid-template-columns:1fr;justify-items:start;align-content:start;border-bottom:0;border-right:1px solid var(--sand);padding:16px}
  .tz.tz.tz.tz.tz .tz-steps>li:last-child{border-right:0}
}

/* 数字の帯。スマホ＝1行ずつ（左にアイコン・右に数字）、PC＝横に4つ */
.tz.tz.tz.tz.tz .tz-band{display:grid;grid-template-columns:1fr;border:1.5px solid var(--ink);border-radius:12px;background:var(--paper);margin-top:12px;overflow:hidden}
.tz.tz.tz.tz.tz .tz-band>li{display:grid;grid-template-columns:26px 1fr auto;gap:10px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--sand)}
.tz.tz.tz.tz.tz .tz-band>li:last-child{border-bottom:0}
.tz.tz.tz.tz.tz .tz-band .tz-l{font-size:14px;line-height:1.35}
.tz.tz.tz.tz.tz .tz-band .tz-l small{display:block;font-size:14px;color:var(--tx)}
.tz.tz.tz.tz.tz .tz-band .tz-v{font-size:19px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
@container (min-width:600px){
  .tz.tz.tz.tz.tz .tz-band{grid-template-columns:repeat(4,1fr)}
  .tz.tz.tz.tz.tz .tz-band>li{grid-template-columns:26px 1fr;grid-template-areas:"i l" "i v";align-content:start;border-bottom:0;border-right:1px solid var(--sand);padding:14px}
  .tz.tz.tz.tz.tz .tz-band>li:last-child{border-right:0}
  .tz.tz.tz.tz.tz .tz-band svg.tz-i{grid-area:i;align-self:start}
  .tz.tz.tz.tz.tz .tz-band .tz-v{grid-area:v;text-align:left;font-size:20px}
  .tz.tz.tz.tz.tz .tz-band .tz-l{grid-area:l}
}

/* 送料の3段 */
.tz.tz.tz.tz.tz .tz-ship{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.tz.tz.tz.tz.tz .tz-ship>li{border:1px solid var(--sand);border-radius:10px;padding:10px 4px;text-align:center;background:#fff}
.tz.tz.tz.tz.tz .tz-ship svg.tz-i{margin:0 auto 4px}
.tz.tz.tz.tz.tz .tz-ship .tz-v{display:block;font-size:16px;font-weight:700;font-variant-numeric:tabular-nums}
.tz.tz.tz.tz.tz .tz-ship .tz-l{display:block;font-size:14px;color:var(--tx);line-height:1.4}

/* ○×（形と言葉で分ける。色だけに頼らない） */
.tz.tz.tz.tz.tz .tz-okng{display:grid;grid-template-columns:1fr;gap:6px}
.tz.tz.tz.tz.tz .tz-okng>li{display:flex;gap:10px;align-items:flex-start;padding:9px 12px;border-radius:10px;font-size:14px;line-height:1.5}
.tz.tz.tz.tz.tz .tz-okng>li.ok{background:var(--cream)}
.tz.tz.tz.tz.tz .tz-okng>li.ng{background:var(--ng)}
.tz.tz.tz.tz.tz .tz-mark{flex:none;display:inline-flex;align-items:center;gap:3px;font-size:14px;font-weight:700;line-height:1;padding:4px 8px 4px 4px;border-radius:999px;border:1.5px solid var(--ink);background:#fff;white-space:nowrap;position:static;width:auto;height:auto;margin:0}
.tz.tz.tz.tz.tz .tz-mark svg{width:15px;height:15px;display:block}
.tz.tz.tz.tz.tz .ng .tz-mark{color:var(--ngink);border-color:var(--ngink)}
.tz.tz.tz.tz.tz .tz-okng .tz-t{position:static;display:inline;font-weight:400}
.tz.tz.tz.tz.tz .tz-okng.tz-cols{grid-template-columns:1fr 1fr}
.tz.tz.tz.tz.tz .tz-okng.tz-cols>li{flex-direction:column;gap:4px}

/* ○と×の対の小さな図 */
.tz.tz.tz.tz.tz .tz-pair{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.tz.tz.tz.tz.tz .tz-pair figure{text-align:center}
.tz.tz.tz.tz.tz .tz-pair figure>svg{width:100%;height:auto;display:block;border-radius:6px;max-height:90px}
.tz.tz.tz.tz.tz figcaption{font-size:14px;line-height:1.3;margin:4px 0 0;padding:0;display:flex;align-items:center;justify-content:center;gap:3px;color:var(--ink);font-weight:700;white-space:nowrap}
.tz.tz.tz.tz.tz figcaption svg{width:14px;height:14px;flex:none;display:block}
.tz.tz.tz.tz.tz figcaption.ng{color:var(--ngink)}

/* 図＋見出し＋1行の札（見出し・図・1行を縦に。PC は2列） */
.tz.tz.tz.tz.tz .tz-figs{display:grid;grid-template-columns:1fr;gap:10px}
.tz.tz.tz.tz.tz .tz-fig{background:#fff;border:1.5px solid var(--ink);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.tz.tz.tz.tz.tz .tz-fig>svg{width:100%;max-width:130px;height:auto;margin:0 auto;display:block}
.tz.tz.tz.tz.tz .tz-fig h4{font-size:16px}
.tz.tz.tz.tz.tz .tz-fig p{font-size:16px;color:var(--tx);line-height:1.6}
@container (min-width:600px){.tz.tz.tz.tz.tz .tz-figs{grid-template-columns:1fr 1fr}}

/* 仕様のタイル */
.tz.tz.tz.tz.tz .tz-spec{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tz.tz.tz.tz.tz .tz-spec>li{background:#fff;border:1px solid var(--sand);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:4px}
.tz.tz.tz.tz.tz .tz-k{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--tx)}
.tz.tz.tz.tz.tz .tz-k svg.tz-i{width:18px;height:18px}
.tz.tz.tz.tz.tz .tz-spec .tz-v{font-size:16px;font-weight:700;line-height:1.35;font-variant-numeric:tabular-nums}
.tz.tz.tz.tz.tz .tz-spec .tz-d{font-size:14px;color:var(--tx);line-height:1.55}
.tz.tz.tz.tz.tz .tz-spec>li.tz-wide{grid-column:1/-1}
.tz.tz.tz.tz.tz .tz-spec>li.tz-wide .tz-pair{max-width:300px;margin:4px 0}
@container (min-width:600px){
  .tz.tz.tz.tz.tz .tz-spec{grid-template-columns:repeat(4,1fr)}
  .tz.tz.tz.tz.tz .tz-spec>li.tz-wide{grid-column:span 2}
}

/* 状態の流れ（送ったあと） */
.tz.tz.tz.tz.tz .tz-tl{display:grid;gap:0}
.tz.tz.tz.tz.tz .tz-node{display:grid;grid-template-columns:40px 1fr;gap:10px;align-items:start;border:1.5px solid var(--ink);border-radius:12px;padding:12px;background:#fff}
.tz.tz.tz.tz.tz .tz-node .tz-ic{width:40px;height:40px}
.tz.tz.tz.tz.tz .tz-node h3{font-size:15px}
.tz.tz.tz.tz.tz .tz-node p{font-size:16px;color:var(--tx);line-height:1.55;margin-top:2px}
.tz.tz.tz.tz.tz .tz-node.is-lock{background:var(--ng)}
.tz.tz.tz.tz.tz .tz-down{display:block;width:2px;height:16px;background:var(--ink);margin:0 auto}
.tz.tz.tz.tz.tz .tz-branch{display:grid;grid-template-columns:1fr;gap:10px}
@container (min-width:600px){.tz.tz.tz.tz.tz .tz-branch{grid-template-columns:1fr 1fr}}

/* 範囲の図 */
.tz.tz.tz.tz.tz .tz-range{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:end;max-width:460px}
.tz.tz.tz.tz.tz .tz-range figure{text-align:center}
.tz.tz.tz.tz.tz .tz-range figure svg{width:100%;height:auto;display:block}
.tz.tz.tz.tz.tz .tz-range figcaption{display:block;white-space:normal;font-size:14px}
.tz.tz.tz.tz.tz .tz-range figcaption small{display:block;font-weight:400;font-size:14px;color:var(--tx);font-variant-numeric:tabular-nums}
.tz.tz.tz.tz.tz .tz-legend{display:flex;flex-direction:column;gap:2px;font-size:14px;color:var(--tx);margin-top:8px;line-height:1.5}
.tz.tz.tz.tz.tz .tz-sw{display:inline-block;width:18px;height:12px;vertical-align:-1px;margin-right:4px;border:1.5px dashed var(--ink);border-radius:2px}
.tz.tz.tz.tz.tz .tz-sw.a3{border:1.5px solid var(--rust);background:rgba(176,62,18,.08)}

/* 注意の一覧（アイコン＋見出し＋1行） */
.tz.tz.tz.tz.tz .tz-tips{display:grid;grid-template-columns:1fr;border-top:1px solid var(--sand)}
.tz.tz.tz.tz.tz .tz-tips>li{display:grid;grid-template-columns:26px 1fr;gap:10px;padding:9px 2px;border-bottom:1px solid var(--sand);align-items:start}
.tz.tz.tz.tz.tz .tz-tips svg.tz-i{width:22px;height:22px;margin-top:2px}
.tz.tz.tz.tz.tz .tz-tips .tz-t{display:block;font-size:14px;font-weight:700;line-height:1.45}
.tz.tz.tz.tz.tz .tz-tips .tz-d{display:block;font-size:16px;color:var(--tx);line-height:1.55}
@container (min-width:600px){.tz.tz.tz.tz.tz .tz-tips{grid-template-columns:1fr 1fr;column-gap:28px}}

.tz.tz.tz.tz.tz .tz-note{font-size:16px;color:var(--tx);margin-top:10px;line-height:1.6}
@media (prefers-reduced-motion:reduce){.tz.tz.tz.tz.tz *{transition:none!important;animation:none!important}}
@container (min-width:600px){.tz.tz.tz.tz.tz .tz-figs.tz-3{grid-template-columns:repeat(3,1fr)}}

/* ===== 2周目（2026-11-03）：最初に見えるのはアイコン＋短い1行、説明は「くわしく」の畳みへ ===== */
/* くわしく（ふつうの details。キーボードで開ける・開いたら矢印が回る） */
.tz.tz.tz.tz.tz .tz-more{margin-top:12px;border-top:1px solid var(--sand);border-bottom:1px solid var(--sand)}
.tz.tz.tz.tz.tz .tz-more>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:6px;padding:10px 2px;font-size:15px;font-weight:700;color:var(--ink);background:none;border:0;margin:0;line-height:1.4}
.tz.tz.tz.tz.tz .tz-more>summary::-webkit-details-marker{display:none}
.tz.tz.tz.tz.tz .tz-more>summary::before,.tz.tz.tz.tz.tz .tz-more>summary::after{content:none}
.tz.tz.tz.tz.tz .tz-more>summary svg{width:18px;height:18px;transition:transform .15s ease-out}
.tz.tz.tz.tz.tz .tz-more[open]>summary svg{transform:rotate(180deg)}
.tz.tz.tz.tz.tz .tz-more>summary:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:4px}
.tz.tz.tz.tz.tz .tz-more .tz-tips{border-top:0}

/* 短い1行の札（アイコンを上に、文は1〜2行）。狭い所は2列、広いと3〜4列 */
.tz.tz.tz.tz.tz .tz-tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.tz.tz.tz.tz.tz .tz-tiles>li{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:10px;border:1px solid var(--sand);border-radius:10px;background:#fff}
.tz.tz.tz.tz.tz .tz-tiles svg.tz-i{width:22px;height:22px}
.tz.tz.tz.tz.tz .tz-tiles .tz-k{font-size:13px;color:var(--tx);line-height:1.3}
.tz.tz.tz.tz.tz .tz-tiles .tz-v{font-size:15px;font-weight:700;line-height:1.4;font-variant-numeric:tabular-nums}
.tz.tz.tz.tz.tz .tz-tiles>li.is-rule{background:var(--ng)}
@container (min-width:480px){.tz.tz.tz.tz.tz .tz-tiles{grid-template-columns:repeat(3,1fr)}}
@container (min-width:640px){.tz.tz.tz.tz.tz .tz-tiles{grid-template-columns:repeat(4,1fr)}}

/* 見本の図の小さな札（題＋○×の対。○×は図の角にも描いてある） */
.tz.tz.tz.tz.tz .tz-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.tz.tz.tz.tz.tz .tz-strip.tz-s2{grid-template-columns:repeat(2,1fr)}
.tz.tz.tz.tz.tz .tz-sc{border:1.5px solid var(--ink);border-radius:10px;padding:8px;background:#fff;display:flex;flex-direction:column;gap:6px}
.tz.tz.tz.tz.tz .tz-sc h4{font-size:14px;line-height:1.35;text-align:center}
.tz.tz.tz.tz.tz .tz-sc .tz-pair{gap:4px}
.tz.tz.tz.tz.tz .tz-sc>svg{width:100%;max-width:120px;height:auto;margin:0 auto;display:block}
@container (min-width:600px){.tz.tz.tz.tz.tz .tz-strip.tz-s2{grid-template-columns:repeat(4,1fr)}}

/* 1行の決まり（アイコン＋文） */
.tz.tz.tz.tz.tz .tz-rules{display:grid;grid-template-columns:1fr;gap:6px}
.tz.tz.tz.tz.tz .tz-rules>li{display:grid;grid-template-columns:22px 1fr;gap:8px;align-items:center;padding:8px 12px;border-radius:10px;background:var(--ng);font-size:15px;line-height:1.45}
.tz.tz.tz.tz.tz .tz-rules>li.ok{background:var(--cream)}
.tz.tz.tz.tz.tz .tz-rules svg.tz-i{width:20px;height:20px;color:var(--ngink)}
.tz.tz.tz.tz.tz .tz-rules>li.ok svg.tz-i{color:var(--ink)}
.tz.tz.tz.tz.tz .tz-rules .tz-w{font-weight:700;margin-right:6px}
@container (min-width:600px){.tz.tz.tz.tz.tz .tz-rules.tz-cols{grid-template-columns:1fr 1fr}}

/* 範囲の図：PC は 前・後ろ・凡例 を横に */
@container (min-width:600px){
  .tz.tz.tz.tz.tz .tz-range3{display:grid;grid-template-columns:200px 200px 1fr;gap:16px;align-items:center}
  .tz.tz.tz.tz.tz .tz-range3 .tz-range{display:contents}
}
.tz.tz.tz.tz.tz .tz-cap{display:block;font-size:14px;line-height:1.4;color:var(--tx);text-align:center}
@container (min-width:600px){.tz.tz.tz.tz.tz .tz-band.tz-b3{grid-template-columns:repeat(3,1fr)}}
/* 2周目の手直し：札はアイコンを左に（縦を短く）。見本の札は狭い所では「題｜図」の横並び */
.tz.tz.tz.tz.tz .tz-tiles>li{display:grid;grid-template-columns:22px 1fr;grid-template-areas:"i k" "i v";column-gap:8px;row-gap:0;align-items:center;padding:8px 10px}
.tz.tz.tz.tz.tz .tz-tiles>li>svg,.tz.tz.tz.tz.tz .tz-tiles>li>svg.tz-i{grid-area:i;align-self:center}
.tz.tz.tz.tz.tz .tz-tiles .tz-k{grid-area:k}
.tz.tz.tz.tz.tz .tz-tiles .tz-v{grid-area:v;font-size:14px}
.tz.tz.tz.tz.tz .tz-strip,.tz.tz.tz.tz.tz .tz-strip.tz-s2{grid-template-columns:1fr}
.tz.tz.tz.tz.tz .tz-sc{display:grid;min-width:0;grid-template-columns:minmax(0,1fr) minmax(0,150px);grid-template-areas:"h f" "c f";column-gap:10px;row-gap:2px;align-items:center;padding:8px 10px}
.tz.tz.tz.tz.tz .tz-sc h4{grid-area:h;text-align:left;align-self:end}
.tz.tz.tz.tz.tz .tz-sc .tz-cap{grid-area:c;text-align:left;align-self:start}
.tz.tz.tz.tz.tz .tz-sc>.tz-pair,.tz.tz.tz.tz.tz .tz-sc>svg{grid-area:f}
.tz.tz.tz.tz.tz .tz-sc>svg{max-width:84px}
.tz.tz.tz.tz.tz .tz-sc>.tz-pair:only-of-type{grid-row:1/3}
@container (min-width:600px){
  .tz.tz.tz.tz.tz .tz-strip{grid-template-columns:repeat(3,1fr)}
  .tz.tz.tz.tz.tz .tz-strip.tz-s2{grid-template-columns:repeat(4,1fr)}
  .tz.tz.tz.tz.tz .tz-sc{grid-template-columns:1fr;grid-template-areas:"h" "f" "c"}
  .tz.tz.tz.tz.tz .tz-sc h4,.tz.tz.tz.tz.tz .tz-sc .tz-cap{text-align:center}
  .tz.tz.tz.tz.tz .tz-sc>.tz-pair,.tz.tz.tz.tz.tz .tz-sc>.tz-pair:only-of-type{grid-row:auto;max-width:300px;margin:0 auto;width:100%}
}

/* 2026-11-03 狭い画面で札が箱からはみ出して切れていた（右列が 160px 固定・左列が縮まなかった）。左列は縮められるようにし、箱が狭い時は札の中を縦に積む。 */
.tz.tz.tz.tz.tz .tz-sc>*{min-width:0}
@container (max-width:280px){
  .tz.tz.tz.tz.tz .tz-sc{grid-template-columns:minmax(0,1fr);grid-template-areas:"h" "f" "c";row-gap:6px}
  .tz.tz.tz.tz.tz .tz-sc h4,.tz.tz.tz.tz.tz .tz-sc .tz-cap{text-align:center}
  .tz.tz.tz.tz.tz .tz-sc>.tz-pair,.tz.tz.tz.tz.tz .tz-sc>.tz-pair:only-of-type{grid-row:auto;max-width:240px;margin:0 auto;width:100%}
  .tz.tz.tz.tz.tz .tz-sc>svg{max-width:96px;margin:0 auto}
}