/* ============================================================
   noren-trust.css — 「契約前の懸念に答える」ガイド10本の部品（2026-10-16）
   ガイドの書式（.legal.gd）に足すぶんだけ。クラスは tr- 。
   ★中身は全部 HTML に在る。動き（js/noren-trust.js）は読み込まれなくても、
     どの部品も「最後の姿」で読める。JS が隠すのは、動かせる道具（計算・選ぶ）の
     見本だけで、その中身は本文の表にも必ず書いてある。
   ★判子の朱は「判定」という意味の色。差し色（藍）とは別に、判子だけに使う。
   ============================================================ */
:root{
  --tr-ink:#c8341f;          /* 判子の朱 */
  --tr-ink-soft:#fbe9e5;
  --tr-ok:#1f6b4e;           /* 「公開中」など、続いている状態 */
  --tr-ok-soft:#e3f2eb;
  --tr-line:rgba(11,23,48,.09);
  --tr-card:#fff;
  --tr-soft:#f4f7fc;
}

/* ── ヒーロー：左に問い、右に「AIの指摘」と判子 ─────────────── */
.tr-hero > .container{width:min(100% - var(--pad)*2, 1180px);display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(28px,4vw,64px);align-items:center}
.tr-hero h1{font-size:clamp(1.75rem,min(3.3vw,5.4vh),2.85rem);line-height:1.32;letter-spacing:-.02em;word-break:auto-phrase;text-wrap:balance}
.tr-hero .tr-hero-copy{min-width:0}
.tr-hero .tr-series-lab{display:inline-flex;align-items:center;gap:.6em;margin:0 0 .9em;font-size:.8rem;letter-spacing:.08em;color:rgba(255,255,255,.92)}
.tr-hero .tr-series-lab b{display:inline-grid;place-items:center;min-width:2.1em;height:2.1em;padding:0 .4em;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.32);font-weight:700;letter-spacing:0}
.tr-hero .tr-series-lab a{color:#fff;border-bottom:1px solid rgba(255,255,255,.45);text-decoration:none}
@media (max-width:900px){
  .tr-hero > .container{grid-template-columns:minmax(0,1fr);gap:22px;align-items:start}
  .tr-hero{justify-content:flex-start}
}

/* AIの指摘のカード（紙） */
.tr-claim{position:relative;margin:0;padding:clamp(18px,2.2vw,26px) clamp(18px,2.4vw,28px) clamp(20px,2.4vw,28px);border-radius:16px;background:#fff;color:var(--ink,#0b1730);text-shadow:none;
  box-shadow:0 30px 60px -28px rgba(2,8,24,.75),0 2px 0 rgba(255,255,255,.4) inset}
.tr-claim::before{content:"";position:absolute;inset:0;border-radius:inherit;background:url("/img/pattern-noise.svg");opacity:.05;pointer-events:none}
.tr-claim-lab{display:flex;flex-wrap:wrap;align-items:center;gap:.3em .8em;margin:0 0 .7em;font-size:.74rem;letter-spacing:.06em;color:#6f7a94}
.tr-claim-lab b{display:inline-flex;align-items:center;gap:.45em;padding:.18em .7em;border-radius:999px;background:#eef2f9;color:#1d3f7f;font-weight:700;letter-spacing:.08em}
.tr-claim-lab b::before{content:"";width:.62em;height:.62em;border-radius:50%;background:conic-gradient(#4b78cc,#8fabe3,#c8d6f0,#4b78cc)}
.tr-claim-q{position:relative;margin:0;padding:0 0 0 1.15em;font-family:"Shippori Mincho B1","Hiragino Mincho ProN",serif;font-weight:700;font-size:clamp(1.02rem,1.5vw,1.2rem);line-height:1.85;color:#0b1730;min-height:3.7em}
.tr-claim-q::before{content:"“";position:absolute;left:-.1em;top:-.28em;font-size:2.4em;line-height:1;color:#c8d6f0}
.tr-claim-q .tr-caret{display:inline-block;width:2px;height:1.05em;margin-left:2px;vertical-align:-.15em;background:#1d3f7f;animation:trCaret 1s steps(1) infinite}
@keyframes trCaret{50%{opacity:0}}
.tr-claim-src{display:block;margin:.6em 0 0 1.4em;font-size:.72rem;color:#8a93a8;letter-spacing:.02em}
.tr-claim-a{position:relative;margin:1em 0 0;padding:.85em clamp(100px,11vw,122px) .85em 2.2em;border-radius:12px;background:#f4f7fc;font-size:.92rem;line-height:1.75;color:#0b1730;min-height:7.4em}
.tr-claim-a::before{content:"→";position:absolute;left:.9em;top:.85em;font-weight:700;color:#1d3f7f}
.tr-claim-a b{color:#1d3f7f}

/* 判子（角印・縦書き） */
.tr-stamp{--s:104px;position:absolute;right:clamp(12px,1.6vw,20px);bottom:clamp(12px,1.6vw,18px);width:var(--s);height:var(--s);display:grid;place-items:center;
  border:3px solid var(--tr-ink);border-radius:12px;box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 4.5px var(--tr-ink);
  color:var(--tr-ink);transform:rotate(-8deg);mix-blend-mode:multiply;background:rgba(255,255,255,.35);
  font-family:"Shippori Mincho B1","Hiragino Mincho ProN",serif;font-weight:700;line-height:1}
.tr-stamp > span{writing-mode:vertical-rl;text-orientation:upright;font-size:calc(var(--s) * .76 / var(--k,4));letter-spacing:0;display:block;line-height:1}
.tr-stamp > span i{display:block;font-style:normal;white-space:nowrap}
.tr-stamp > span i + i{margin-block-start:.2em}
.tr-stamp--sm{--s:58px;position:static;border-width:2px;border-radius:8px;box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 3px var(--tr-ink);transform:rotate(-6deg)}

.tr-stamp--hub{border-color:#1d3f7f;color:#1d3f7f;box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 4.5px #1d3f7f}
@media (max-width:900px){.tr-claim .tr-stamp{--s:78px;top:-26px;right:14px;bottom:auto;background:#fff;mix-blend-mode:normal}.tr-claim-lab{padding-right:84px}.tr-claim-a{padding-right:1em;min-height:0}.tr-claim{margin-top:14px}}

/* ── 本文の頭：答えの数字3つ ─────────────────────────── */
.tr-keys{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 0 2.4em;padding:0;list-style:none}
.tr-keys li{padding:18px 18px 16px;border-radius:14px;background:#fff;border:1px solid var(--tr-line);display:flex;flex-direction:column;gap:.35em;min-width:0}
.tr-keys .n{font-family:"Shippori Mincho B1",serif;font-weight:700;font-size:clamp(1.9rem,3.6vw,2.5rem);line-height:1.05;color:#0b1730;font-variant-numeric:tabular-nums;letter-spacing:-.02em;white-space:nowrap}
.tr-keys .n small{font-size:.42em;margin-left:.15em;letter-spacing:0;color:#3a465f}
.tr-keys .c{font-size:.84rem;line-height:1.65;color:#3a465f}
@media (max-width:640px){.tr-keys{grid-template-columns:minmax(0,1fr)}.tr-keys li{flex-direction:row;align-items:baseline;gap:.9em}.tr-keys .n{min-width:4.2em}}

/* ── 横に広げる箱（本文780pxより広い図） ─────────────────── */
.tr-wide{width:min(1060px, calc(100vw - 48px));margin-left:calc((100% - min(1060px, calc(100vw - 48px))) / 2)}

/* ── 部品の共通の器 ──────────────────────────────── */
.tr-fig{margin:0 0 2.2em;padding:clamp(18px,2.6vw,28px);border-radius:18px;background:#fff;border:1px solid var(--tr-line)}
.tr-fig > figcaption,.tr-fig-h{display:block;margin:0 0 1em;font-weight:700;color:#0b1730;line-height:1.6;font-size:1rem}
.tr-fig-note{display:block;margin-top:1em;font-size:.78rem;color:#6f7a94;line-height:1.7}
.tr-fig--dark{background:#0a1530;border-color:#0a1530;color:#e6edf9}
.tr-fig--dark > figcaption,.tr-fig--dark .tr-fig-h{color:#fff}
.tr-fig--dark .tr-fig-note{color:rgba(200,214,240,.75)}

/* ── 時間の流れ（縦の線が読み進めると伸びる） ──────────────── */
.tr-tl{position:relative;margin:0;padding:0 0 0 30px;list-style:none;--p:1}
.tr-tl::before{content:"";position:absolute;left:9px;top:6px;bottom:6px;width:2px;background:#e6edf9;border-radius:2px}
.tr-tl::after{content:"";position:absolute;left:9px;top:6px;bottom:6px;width:2px;background:#1d3f7f;border-radius:2px;transform-origin:top;transform:scaleY(var(--p))}
.tr-tl li{position:relative;padding:0 0 1.3em}
.tr-tl li:last-child{padding-bottom:0}
.tr-tl li::before{content:"";position:absolute;left:-27px;top:.42em;width:14px;height:14px;border-radius:50%;background:#fff;border:3px solid #1d3f7f;box-sizing:border-box;z-index:1}
.tr-tl li.is-end::before{background:#1d3f7f}
.tr-tl .when{display:block;font-size:.78rem;font-weight:700;letter-spacing:.06em;color:#2a56a6}
.tr-tl .what{display:block;font-weight:700;color:#0b1730;line-height:1.6}
.tr-tl .more{display:block;font-size:.9rem;color:#3a465f;line-height:1.85}
.tr-pill{display:inline-flex;align-items:center;gap:.4em;margin:.35em .4em 0 0;padding:.12em .7em;border-radius:999px;font-size:.76rem;font-weight:700;line-height:1.8;white-space:nowrap}
.tr-pill--live{background:var(--tr-ok-soft);color:var(--tr-ok)}
.tr-pill--live::before{content:"";width:.55em;height:.55em;border-radius:50%;background:var(--tr-ok);box-shadow:0 0 0 0 rgba(31,107,78,.5);animation:trPulse 1.8s ease-out infinite}
.tr-pill--off{background:#eef0f4;color:#6f7a94}
.tr-pill--on{background:#e6edf9;color:#1d3f7f}
@keyframes trPulse{0%{box-shadow:0 0 0 0 rgba(31,107,78,.45)}80%,100%{box-shadow:0 0 0 7px rgba(31,107,78,0)}}

/* ── 動かして確かめる道具（月数・費用）共通 ─────────────── */
.tr-tool{margin:0 0 2.2em;padding:clamp(18px,2.6vw,28px);border-radius:18px;background:linear-gradient(180deg,#f4f7fc,#fff 70%);border:1px solid rgba(29,63,127,.14)}
.tr-tool-h{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.4em 1em;margin:0 0 1em}
.tr-tool-h b{font-size:1rem;color:#0b1730}
.tr-tool-h small{font-size:.78rem;color:#6f7a94}
.tr-range{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;margin:0 0 1.2em}
.tr-range label{font-weight:700;color:#0b1730;font-size:.92rem;white-space:nowrap}
.tr-range output{font-family:"Shippori Mincho B1",serif;font-weight:700;font-size:1.6rem;color:#1d3f7f;min-width:4.4em;text-align:right;font-variant-numeric:tabular-nums}
.tr-range input[type=range]{width:100%;accent-color:#1d3f7f;height:28px;cursor:pointer}
.tr-bars{display:grid;gap:12px}
.tr-bar{display:grid;grid-template-columns:minmax(0,8.5em) minmax(0,1fr) 7.6em;align-items:center;gap:12px;font-size:.88rem;color:#3a465f}
.tr-bar .t{height:22px;border-radius:6px;background:#e6edf9;overflow:hidden;position:relative}
.tr-bar .f{display:block;height:100%;border-radius:6px;background:#8fabe3;width:0;transition:width .45s cubic-bezier(.2,.7,.2,1)}
.tr-bar.is-year .f{background:#1d3f7f}
.tr-bar .v{text-align:right;font-weight:700;color:#0b1730;font-variant-numeric:tabular-nums}
.tr-bar .mark{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--tr-ink)}
.tr-verdict{margin:1.1em 0 0;padding:.8em 1em;border-radius:12px;background:#fff;border:1px dashed rgba(29,63,127,.3);font-size:.95rem;line-height:1.8;color:#0b1730}
.tr-verdict b{color:#1d3f7f}
.tr-verdict b.is-red{color:var(--tr-ink)}
@media (max-width:640px){.tr-range{grid-template-columns:minmax(0,1fr) auto}.tr-range input{grid-column:1/-1;grid-row:2}.tr-bar{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"l v" "t t";row-gap:4px}.tr-bar>span:first-child{grid-area:l}.tr-bar .v{grid-area:v}.tr-bar .t{grid-area:t}}

/* チップ（選ぶ・入れ切り） */
.tr-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 1.1em;padding:0;list-style:none}
.tr-chip{appearance:none;display:inline-flex;align-items:center;gap:.45em;min-height:40px;padding:.35em 1em;border-radius:999px;border:1px solid rgba(29,63,127,.22);background:#fff;color:#1d3f7f;font:inherit;font-size:.88rem;font-weight:700;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.tr-chip:hover{border-color:#1d3f7f}
.tr-chip[aria-pressed="true"],.tr-chip[aria-selected="true"]{background:#1d3f7f;border-color:#1d3f7f;color:#fff}
.tr-chip:focus-visible{outline:3px solid #8fabe3;outline-offset:2px}

/* ── レシート（費用） ─────────────────────────────── */
.tr-receipt{position:relative;max-width:440px;margin:0 auto;padding:26px 26px 34px;background:#fff;color:#0b1730;font-variant-numeric:tabular-nums;
  box-shadow:0 22px 44px -26px rgba(11,23,48,.45),0 0 0 1px rgba(11,23,48,.06);
  -webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/16px 100%;mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/16px 100%}
.tr-receipt :is(h3,h4){margin:0 0 .2em;text-align:center;font-family:"Shippori Mincho B1",serif;font-size:1.05rem;letter-spacing:.2em}
.tr-receipt .sub{display:block;text-align:center;font-size:.72rem;color:#6f7a94;margin-bottom:1em;letter-spacing:.06em}
.tr-receipt ul{margin:0;padding:0;list-style:none;border-top:1px dashed rgba(11,23,48,.25)}
.tr-receipt li{display:flex;align-items:baseline;gap:.5em;padding:.55em 0;border-bottom:1px dashed rgba(11,23,48,.14);font-size:.9rem;line-height:1.5}
.tr-receipt li .k{flex:1 1 auto;min-width:0}
.tr-receipt li .k small{display:block;font-size:.74rem;color:#6f7a94}
.tr-receipt li .y{white-space:nowrap;font-weight:700}
.tr-receipt li.is-zero .y{color:var(--tr-ok)}
.tr-receipt li.is-off{opacity:.38}
.tr-receipt li.is-off .y{text-decoration:line-through}
.tr-receipt .tot{display:flex;align-items:baseline;justify-content:space-between;margin-top:.9em;padding-top:.7em;border-top:2px solid #0b1730;font-weight:700}
.tr-receipt .tot .y{font-family:"Shippori Mincho B1",serif;font-size:1.7rem}
.tr-receipt .tot2{display:flex;justify-content:space-between;font-size:.84rem;color:#3a465f;margin-top:.3em}
.tr-receipt-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(18px,3vw,36px);align-items:start}
@media (max-width:760px){.tr-receipt-grid{grid-template-columns:minmax(0,1fr)}}
.tr-q{margin:0 0 1.1em}
.tr-q > b{display:block;margin:0 0 .5em;font-size:.86rem;color:#0b1730}
.tr-stepper{display:inline-flex;align-items:center;gap:10px}
.tr-stepper button{appearance:none;width:40px;height:40px;border-radius:50%;border:1px solid rgba(29,63,127,.25);background:#fff;color:#1d3f7f;font-size:1.2rem;font-weight:700;cursor:pointer}
.tr-stepper output{min-width:3.4em;text-align:center;font-weight:700;font-size:1.1rem;color:#0b1730;font-variant-numeric:tabular-nums}

/* ── 作品の帯（デザイン例を横に流す） ─────────────────── */
.tr-gallery{position:relative;margin:0 0 2.2em}
.tr-gallery-track{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 14px;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.tr-gallery figure{flex:0 0 min(440px,78vw);margin:0;scroll-snap-align:start}
.tr-gallery img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:12px;background:#0d1a38;box-shadow:0 18px 36px -24px rgba(11,23,48,.6)}
.tr-gallery figcaption{margin-top:.5em;font-size:.8rem;color:#3a465f}
.tr-gallery-nav{display:flex;gap:8px;justify-content:flex-end;margin-top:4px}
.tr-gallery-nav button{appearance:none;width:42px;height:42px;border-radius:50%;border:1px solid rgba(29,63,127,.25);background:#fff;color:#1d3f7f;font-size:1.1rem;cursor:pointer}
.tr-gallery-nav button:focus-visible{outline:3px solid #8fabe3;outline-offset:2px}

/* 部品を積む図（ページ＝部品の積み重ね） */
.tr-stack{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(18px,3vw,40px);align-items:center}
.tr-stack-page{position:relative;aspect-ratio:3/4;max-width:300px;width:100%;margin:0 auto;padding:12px;border-radius:14px;background:#0a1530;display:flex;flex-direction:column;gap:7px;box-shadow:0 26px 50px -30px rgba(11,23,48,.8)}
.tr-stack-page i{display:flex;align-items:center;padding:0 10px;border-radius:6px;background:#1d3f7f;color:#e6edf9;font-style:normal;font-size:.72rem;font-weight:700;letter-spacing:.04em;flex:1 1 0;min-height:0}
.tr-stack-page i:nth-child(1){flex:.45;background:#15305f}
.tr-stack-page i:nth-child(2){flex:2.2;background:#2a56a6}
.tr-stack-page i:nth-child(odd):not(:first-child){background:#4b78cc}
.tr-stack-page i:last-child{flex:.6;background:#15305f}
@media (max-width:760px){.tr-stack{grid-template-columns:minmax(0,1fr)}}

/* ── 誰がやる？（作業を選ぶ） ──────────────────────── */
.tr-who-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.tr-who-col{padding:16px 16px 14px;border-radius:14px;background:#fff;border:1px solid var(--tr-line);min-width:0}
.tr-who-col :is(h3,h4){margin:0 0 .6em;font-size:.82rem;letter-spacing:.08em;color:#6f7a94}
.tr-who-col.is-full{border-color:rgba(29,63,127,.35);box-shadow:0 0 0 3px #e6edf9}
.tr-actor{display:flex;align-items:center;gap:.7em;margin:0 0 .4em;font-weight:700;color:#0b1730;font-size:1.02rem}
.tr-actor svg{flex:0 0 auto;width:34px;height:34px;padding:7px;border-radius:50%;background:#e6edf9;color:#1d3f7f}
.tr-who-col p{margin:0;font-size:.88rem;line-height:1.8;color:#3a465f}
@media (max-width:640px){.tr-who-panel{grid-template-columns:minmax(0,1fr)}}

/* ── 公開前の門（言い換えの実演） ─────────────────────── */
.tr-gate{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.tr-gate li{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:12px;align-items:center;padding:14px 16px;border-radius:14px;background:#fff;border:1px solid var(--tr-line)}
.tr-gate .src{margin:0;font-size:.95rem;line-height:1.8;color:#3a465f}
.tr-gate .out{margin:0;font-size:.95rem;line-height:1.8;color:#0b1730;font-weight:700}
.tr-gate .arw{display:grid;justify-items:center;gap:4px;font-size:.7rem;color:#6f7a94;white-space:nowrap}
.tr-gate .arw::before{content:"→";font-size:1.2rem;color:#1d3f7f;font-weight:700}
.tr-gate .law{display:inline-block;padding:.1em .55em;border-radius:6px;background:var(--tr-ink-soft);color:var(--tr-ink);font-weight:700;font-size:.7rem}
.tr-gate .law.is-stop{background:var(--tr-ink);color:#fff}
.tr-hit{position:relative;background:linear-gradient(transparent 58%,rgba(200,52,31,.22) 58%);color:#0b1730;font-weight:700;padding:0 .08em}
.tr-gate .out .tr-new{background:linear-gradient(transparent 58%,#e6edf9 58%)}
@media (max-width:640px){.tr-gate li{grid-template-columns:minmax(0,1fr)}.tr-gate .arw{justify-items:start;grid-auto-flow:column;align-items:center}.tr-gate .arw::before{content:"↓"}}

/* ── 業種のルール（開くカード） ───────────────────────── */
.tr-packs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0 0 2.2em}
.tr-pack{border-radius:14px;background:#fff;border:1px solid var(--tr-line);overflow:hidden}
.tr-pack summary{list-style:none;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:14px 16px;cursor:pointer}
.tr-pack summary::-webkit-details-marker{display:none}
.tr-pack summary .ic{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:#e6edf9;color:#1d3f7f;font-weight:700;font-size:.9rem;font-family:"Shippori Mincho B1",serif}
.tr-pack summary b{display:block;color:#0b1730;font-size:.98rem;line-height:1.5}
.tr-pack summary small{display:block;color:#6f7a94;font-size:.76rem;line-height:1.5;margin-top:.1em}
.tr-pack summary .lv{font-size:.72rem;font-weight:700;padding:.2em .6em;border-radius:6px;white-space:nowrap}
.tr-pack summary .lv.is-stop{background:var(--tr-ink);color:#fff}
.tr-pack summary .lv.is-warn{background:#fff4dc;color:#8a5a0b}
.tr-pack summary::after{content:"＋";color:#1d3f7f;font-weight:700;grid-column:3;grid-row:1;justify-self:end;display:none}
.tr-pack[open] summary{background:#f4f7fc}
.tr-pack .body{padding:4px 16px 16px;font-size:.88rem;line-height:1.85;color:#3a465f}
.tr-pack .body ul{margin:.3em 0 0;padding-left:1.2em}
.tr-pack:focus-within{box-shadow:0 0 0 3px #c8d6f0}
@media (max-width:760px){.tr-packs{grid-template-columns:minmax(0,1fr)}}

/* ── データの流れ（線が流れる図） ─────────────────────── */
.tr-flow{width:100%;height:auto;display:block}
.tr-flow .node rect{fill:#fff;stroke:rgba(29,63,127,.28);stroke-width:1.2}
.tr-flow .node.is-me rect{fill:#0a1530;stroke:#0a1530}
.tr-flow .node.is-me text{fill:#fff}
.tr-flow text{font-family:"Zen Kaku Gothic New","Noto Sans JP",sans-serif;font-size:13px;fill:#0b1730}
.tr-flow text.s{font-size:11px;fill:#6f7a94}
.tr-flow .node.is-me text.s{fill:#c8d6f0}
.tr-flow .wire{fill:none;stroke:#8fabe3;stroke-width:2;stroke-dasharray:6 7;animation:trDash 1.1s linear infinite}
.tr-flow .wire.is-card{stroke:#1f6b4e}
.tr-flow .wire.is-no{stroke:var(--tr-ink);stroke-dasharray:3 5;animation:none;opacity:.8}
.tr-flow .x{fill:var(--tr-ink);font-weight:700;font-size:18px}
.tr-flow .lbl{font-size:11px;fill:#3a465f}
@keyframes trDash{to{stroke-dashoffset:-26}}

/* ── 預かる・預からない ─────────────────────────── */
.tr-vs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;margin:0 0 2.2em}
.tr-vs > div{padding:18px;border-radius:16px;background:#fff;border:1px solid var(--tr-line);min-width:0}
.tr-vs :is(h3,h4){display:flex;align-items:center;gap:.5em;margin:0 0 .7em;font-size:.95rem;color:#0b1730}
.tr-vs :is(h3,h4)::before{content:"";width:1.6em;height:1.6em;border-radius:50%;background:#e6edf9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d3f7f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='9' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center/62% no-repeat}
.tr-vs .is-no :is(h3,h4)::before{background:var(--tr-ink-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c8341f' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center/52% no-repeat}
.tr-vs ul{margin:0;padding:0;list-style:none}
.tr-vs li{padding:.6em 0;border-top:1px solid var(--tr-line);font-size:.9rem;line-height:1.75;color:#3a465f}
.tr-vs li b{display:block;color:#0b1730}
@media (max-width:640px){.tr-vs{grid-template-columns:minmax(0,1fr)}}

/* ── まとめの盤（9つの懸念） ─────────────────────────── */
.tr-board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none}
.tr-board li{position:relative;min-width:0}
.tr-board a{position:relative;display:flex;flex-direction:column;gap:.5em;height:100%;padding:16px 16px 74px;border-radius:16px;background:#fff;border:1px solid var(--tr-line);text-decoration:none;color:#0b1730;transition:transform .25s,box-shadow .25s,border-color .25s}
.tr-board a:hover{transform:translateY(-3px);box-shadow:0 18px 36px -24px rgba(11,23,48,.5);border-color:rgba(29,63,127,.3)}
.tr-board a:focus-visible{outline:3px solid #8fabe3;outline-offset:2px}
.tr-board .no{font-size:.72rem;font-weight:700;letter-spacing:.12em;color:#6f7a94}
.tr-board .cl{font-weight:700;line-height:1.6;font-size:.98rem}
.tr-board .an{font-size:.84rem;line-height:1.75;color:#3a465f}
.tr-board .go{position:absolute;left:16px;bottom:16px;font-size:.8rem;font-weight:700;color:#1d3f7f}
.tr-board .tr-stamp{position:absolute;right:14px;bottom:12px}
.tr-board li.is-dim a{opacity:.32}
@media (max-width:900px){.tr-board{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.tr-board{grid-template-columns:minmax(0,1fr)}}
.tr-tally{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 1.2em}
.tr-tally span{display:inline-flex;align-items:baseline;gap:.35em;padding:.4em .9em;border-radius:12px;background:#fff;border:1px solid var(--tr-line);font-size:.86rem;color:#3a465f}
.tr-tally b{font-family:"Shippori Mincho B1",serif;font-size:1.5rem;color:var(--tr-ink);line-height:1}

/* ── シリーズの案内（記事の最後） ─────────────────────── */
.tr-series{margin:2.6em 0 0;padding:clamp(18px,2.6vw,26px);border-radius:18px;background:#f4f7fc;border:1px solid rgba(29,63,127,.12)}
.tr-series > b{display:block;margin:0 0 .3em;font-size:.8rem;letter-spacing:.14em;color:#6f7a94}
.tr-series > p{margin:0 0 1em!important;font-size:.92rem}
.tr-series ol{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0;padding:0;list-style:none}
.tr-series li a{display:flex;align-items:center;gap:.6em;height:100%;padding:10px 12px;border-radius:12px;background:#fff;border:1px solid var(--tr-line);font-size:.84rem;line-height:1.5;color:#0b1730;text-decoration:none}
.tr-series li a:hover{border-color:rgba(29,63,127,.35)}
.tr-series li a[aria-current="page"]{background:#1d3f7f;color:#fff;border-color:#1d3f7f}
.tr-series .vd{flex:0 0 auto;font-size:.66rem;font-weight:700;padding:.15em .45em;border-radius:5px;border:1.5px solid var(--tr-ink);color:var(--tr-ink);background:#fff;white-space:nowrap}
.tr-series li a[aria-current="page"] .vd{border-color:#fff}
@media (max-width:760px){.tr-series ol{grid-template-columns:minmax(0,1fr)}}

/* ── 読み進み（上の細い線） ─────────────────────────── */
.tr-progress{position:fixed;left:0;top:0;right:0;height:3px;z-index:1000;pointer-events:none;background:transparent}
.tr-progress i{display:block;height:100%;width:100%;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,#4b78cc,#8fabe3)}

/* ── 判定の札（本文中） ─────────────────────────────── */
.tr-tag{display:inline-block;padding:.05em .55em;border-radius:6px;border:1.5px solid var(--tr-ink);color:var(--tr-ink);font-size:.8em;font-weight:700;white-space:nowrap;line-height:1.6}

@media (prefers-reduced-motion:reduce){
  .tr-claim-q .tr-caret,.tr-pill--live::before,.tr-flow .wire{animation:none}
  .tr-bar .f{transition:none}
}
@media print{.tr-progress{display:none}}

/* チェックの行（道具の中） */
.tr-check{display:flex;align-items:flex-start;gap:.6em;margin:1em 0 0;font-size:.88rem;line-height:1.7;color:#3a465f;cursor:pointer}
.tr-check input{flex:0 0 auto;width:20px;height:20px;margin-top:.15em;accent-color:#1d3f7f}
/* 本文の表で、強めたい行 */
.legal.gd tr.tr-row-hl td{background:#f4f7fc;font-weight:700;color:#0b1730}
.legal.gd td.tr-num,.legal.gd th.tr-num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}

/* ── 要点のカード（2〜4枚） ─────────────────────────── */
.tr-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:12px;margin:0 0 2.2em;padding:0;list-style:none}
.tr-cards li{display:flex;flex-direction:column;gap:.45em;padding:18px;border-radius:16px;background:#fff;border:1px solid var(--tr-line);min-width:0}
.tr-cards .ic{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:#e6edf9;color:#1d3f7f;font-family:"Shippori Mincho B1",serif;font-weight:700}
.tr-cards b{color:#0b1730;font-size:1rem;line-height:1.55}
.tr-cards p{margin:0!important;font-size:.88rem;line-height:1.8;color:#3a465f}

/* ── じょうご（段ごとの数） ─────────────────────────── */
.tr-funnel{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:0;margin:0;padding:0;list-style:none;counter-reset:f}
.tr-funnel li{position:relative;display:flex;flex-direction:column;gap:.3em;padding:18px 22px 18px 18px;background:#fff;border:1px solid var(--tr-line);min-width:0}
.tr-funnel li:first-child{border-radius:16px 0 0 16px}
.tr-funnel li:last-child{border-radius:0 16px 16px 0}
.tr-funnel li+li{border-left:0}
.tr-funnel li:not(:last-child)::after{content:"";position:absolute;right:-11px;top:50%;width:20px;height:20px;background:#fff;border-top:1px solid var(--tr-line);border-right:1px solid var(--tr-line);transform:translateY(-50%) rotate(45deg);z-index:1}
.tr-funnel .st{font-size:.74rem;font-weight:700;letter-spacing:.08em;color:#2a56a6}
.tr-funnel .n{font-family:"Shippori Mincho B1",serif;font-weight:700;font-size:clamp(1.6rem,3vw,2.2rem);line-height:1.1;color:#0b1730;font-variant-numeric:tabular-nums}
.tr-funnel .n small{font-size:.45em;margin-left:.15em;color:#3a465f}
.tr-funnel .c{font-size:.8rem;line-height:1.65;color:#3a465f}
.tr-funnel li.is-gap{background:#fbfcfe}
.tr-funnel li.is-gap .n{color:#8a93a8}
@media (max-width:760px){.tr-funnel{grid-template-columns:minmax(0,1fr)}.tr-funnel li,.tr-funnel li:first-child,.tr-funnel li:last-child{border-radius:0;border-left:1px solid var(--tr-line)}.tr-funnel li+li{border-top:0}.tr-funnel li:first-child{border-radius:16px 16px 0 0}.tr-funnel li:last-child{border-radius:0 0 16px 16px}.tr-funnel li:not(:last-child)::after{right:auto;left:50%;top:auto;bottom:-11px;transform:translateX(-50%) rotate(135deg)}}

/* ── 記録の流れ（時刻つきの行が順に出る） ─────────────── */
.tr-log{margin:0 0 2.2em;padding:16px 18px;border-radius:14px;background:#0a1530;color:#c8d6f0;font-family:"SFMono-Regular",Menlo,Consolas,monospace;font-size:.8rem;line-height:1.9;overflow-x:auto}
.tr-log ol{margin:0;padding:0;list-style:none;min-width:520px}
.tr-log li{display:grid;grid-template-columns:11.5em 9em minmax(0,1fr) 3em;gap:12px;white-space:nowrap}
.tr-log .t{color:#8fabe3}.tr-log .b{color:#fff;font-weight:700}.tr-log .s{color:#86d2ab;text-align:right}
.tr-log-cap{display:block;margin-top:.6em;font-family:"Zen Kaku Gothic New",sans-serif;font-size:.74rem;color:rgba(200,214,240,.7);white-space:normal}

/* ── 並び替わる順位（図解） ─────────────────────────── */
.tr-rank{position:relative;margin:0;padding:0;list-style:none;display:grid;gap:8px}
.tr-rank li{display:grid;grid-template-columns:2.4em minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;background:#fff;border:1px solid var(--tr-line);font-size:.92rem;color:#0b1730}
.tr-rank .r{font-family:"Shippori Mincho B1",serif;font-weight:700;font-size:1.2rem;color:#1d3f7f;text-align:center}
.tr-rank .tag{font-size:.72rem;font-weight:700;padding:.15em .6em;border-radius:6px;background:#eef0f4;color:#6f7a94;white-space:nowrap}
.tr-rank li.is-you{border-color:#1d3f7f;box-shadow:0 0 0 3px #e6edf9}
.tr-rank li.is-you .tag{background:#1d3f7f;color:#fff}
.tr-rank li.is-up .tag{background:var(--tr-ok-soft);color:var(--tr-ok)}
.tr-rank-ctl{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}

/* ── デザインの見本（パソコン＋スマホを重ねる） ─────────── */
.tr-pair{position:relative;margin:0;padding:0 0 14px}
.tr-pair .pc{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:10px;background:#0d1a38;box-shadow:0 18px 36px -24px rgba(11,23,48,.6)}
.tr-pair .sp{position:absolute;right:4%;bottom:0;width:22%;aspect-ratio:300/640;object-fit:cover;object-position:top;border-radius:8px;border:3px solid #0b1730;background:#0b1730;box-shadow:0 14px 28px -14px rgba(11,23,48,.7)}
.tr-gallery figure.tr-pair{flex:0 0 min(460px,80vw)}
.tr-gallery .tr-pair figcaption{margin-top:.4em;padding-right:28%}

/* ── ガイド本文（.legal.gd）の ul/ol の書式が部品に当たらないように ───────── */
.legal.gd .tr-keys,.legal.gd .tr-cards,.legal.gd .tr-board,.legal.gd .tr-chips,.legal.gd .tr-gate,.legal.gd .tr-funnel,.legal.gd .tr-rank,
.legal.gd .tr-series ol,.legal.gd .tr-vs ul,.legal.gd .tr-receipt ul,.legal.gd .tr-log ol,.legal.gd .tr-packs ul{list-style:none;padding-left:0;color:inherit;line-height:inherit}
.legal.gd .tr-tl{list-style:none;padding:0 0 0 30px;margin:0}
.legal.gd .tr-keys,.legal.gd .tr-cards,.legal.gd .tr-board{margin:0 0 2.2em}
.legal.gd .tr-chips{margin:0 0 1.1em}
.legal.gd .tr-gate,.legal.gd .tr-funnel,.legal.gd .tr-rank{margin:0 0 1.6em}
.legal.gd .tr-series ol,.legal.gd .tr-vs ul,.legal.gd .tr-receipt ul,.legal.gd .tr-log ol{margin:0}
.legal.gd .tr-pack .body ul{list-style:disc;padding-left:1.2em;margin:.3em 0 0;line-height:1.85}
/* 横に広げる（本文の780pxより広く）。本文側の margin 指定に負けないように */
.legal.gd .tr-wide{width:min(1060px, calc(100vw - 48px));max-width:none;margin-left:calc((100% - min(1060px, calc(100vw - 48px))) / 2);margin-right:0}
.legal.gd .tr-keys li,.legal.gd .tr-cards li,.legal.gd .tr-board li,.legal.gd .tr-chips li,.legal.gd .tr-gate li,.legal.gd .tr-funnel li,.legal.gd .tr-rank li,.legal.gd .tr-series li,.legal.gd .tr-tl li,.legal.gd .tr-log li,.legal.gd .tr-receipt li,.legal.gd .tr-vs li{margin-bottom:0}
.legal.gd .tr-keys li::marker,.legal.gd .tr-cards li::marker{content:none}
/* 4枚のカードは、中くらいの幅で2×2（3＋1に割れないように）。広い幅（tr-wide）では4列 */
.legal.gd .tr-cards:has(> li:nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:1100px){.legal.gd .tr-cards.tr-wide:has(> li:nth-child(4):last-child){grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:560px){.legal.gd .tr-cards:has(> li:nth-child(4):last-child){grid-template-columns:minmax(0,1fr)}}
/* 本文の箇条書き・手順に印と番号を出す（サイトの基本の書式は list-style を消している。手順は番号が意味を持つ） */
.legal.gd ol:not([class]){list-style:decimal}
.legal.gd ul:not([class]){list-style:disc}
.legal.gd ol:not([class]) > li::marker{color:#2a56a6;font-weight:700}

/* 2026-10-16 見出しの段（h2 の次が h4）を正すため、カードの見出しを h4 → h3 にした。
   本文の h3 の指定（.legal h3・各ページの .legal.gd h3）が当たらないよう、もとの h4 の見た目に戻す（クラスを重ねて強さを上げている） */
.legal .tr-receipt.tr-receipt :is(h3,h4){margin:0 0 .2em;font-size:1.05rem;line-height:inherit;color:inherit;text-wrap:wrap}
.legal .tr-who-col.tr-who-col :is(h3,h4){margin:0 0 .6em;font-size:.82rem;line-height:inherit;color:#6f7a94;text-wrap:wrap}
.legal .tr-vs.tr-vs :is(h3,h4){margin:0 0 .7em;font-size:.95rem;line-height:inherit;color:#0b1730;text-wrap:wrap}