/* タン｜手作業を道具に変えた記録 — サイト共通の見た目
   2026-11-04 作成。骨組みは手本（リードオタク）: パソコンは「左に固定の案内・真ん中にスマホ幅のページ・右に目次」の3列、スマホは真ん中だけ。
   色はタンの絵から取った: 作業着の紺・安全の黄色・ヘッドセットの青緑。赤は「できなかった所」にだけ使う。 */
:root {
  --paper: #ecf0f4;
  --grid: #d3dbe6;
  --navy: #1c2a57;
  --navy-2: #2a3b72;
  --yellow: #f6c832;
  --teal: #3ed6bf;
  --red: #d9412b;
  --white: #ffffff;
  --muted: #56648a;
  --col: 460px;
  --display: "Dela Gothic One", "Hiragino Sans", sans-serif;
  --body: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --stripe: repeating-linear-gradient(-45deg, var(--yellow) 0 14px, var(--navy) 14px 28px);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--navy); font-family: var(--body); font-weight: 500; font-size: 15px; line-height: 1.8;
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 24px 24px;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }
h1, h2, h3, p { margin: 0; }
section[id], article[id] { scroll-margin-top: 70px; }

/* ---------- 3列 ---------- */
.shell { display: grid; grid-template-columns: 1fr var(--col) 1fr; min-height: 100vh; }
.side { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 32px; }
.side-l { align-items: flex-end; }
.side-r { align-items: flex-start; }
.col { background: var(--white); border-inline: 3px solid var(--navy); min-width: 0; }

.side-l .inner { width: 300px; display: grid; gap: 18px; }
.side-l .catch { font-weight: 700; text-align: right; line-height: 1.6; }
.side-l .pair { display: flex; justify-content: flex-end; align-items: flex-end; gap: 4px; }
.side-l .pair img:first-child { width: 84px; }
.side-l .pair img:last-child { width: 130px; }

.logo {
  display: inline-flex; flex-direction: column; background: var(--navy); color: var(--white);
  border: 3px solid var(--navy); border-radius: 12px; padding: 8px 16px; text-decoration: none;
  box-shadow: 4px 4px 0 var(--yellow);
}
.logo b { font-weight: 900; font-size: 26px; line-height: 1.2; color: var(--yellow); letter-spacing: .06em; }
.logo small { font-size: 11px; font-weight: 700; letter-spacing: .02em; }

.index { list-style: none; margin: 0; padding: 0; counter-reset: idx; width: 200px; }
.index-title { font-weight: 900; font-size: 20px; margin-bottom: 12px; letter-spacing: .1em; }
.index li { counter-increment: idx; }
.index a { display: grid; grid-template-columns: 26px 1fr; text-decoration: none; font-size: 13px; font-weight: 700; color: var(--muted); padding: 5px 0; line-height: 1.5; }
.index a::before { content: counter(idx, decimal-leading-zero); font-family: var(--mono); font-size: 11px; padding-top: 2px; }
.index a.on { color: var(--navy); }
.index a.on::before { color: var(--red); }

/* ---------- ボタン ---------- */
.btn {
  display: flex; align-items: center; justify-content: center; gap: 10px; text-decoration: none; text-align: center;
  border: 3px solid var(--navy); border-radius: 999px; padding: 12px 22px; font-weight: 900; font-size: 16px; line-height: 1.35;
  box-shadow: 0 5px 0 var(--navy); transition: transform .12s, box-shadow .12s;
}
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--navy); }
.btn small { display: block; font-size: 11px; font-weight: 700; }
.btn-line { background: var(--yellow); color: var(--navy); }
.btn-sub { background: var(--white); color: var(--navy); }
.btn-dark { background: var(--navy); color: var(--white); box-shadow: 0 5px 0 var(--yellow); }
.btn .dot { width: 26px; height: 26px; border-radius: 50%; background: var(--navy); color: var(--yellow); display: grid; place-items: center; font-size: 13px; flex: none; }
.btn-dark .dot { background: var(--yellow); color: var(--navy); }
.btns { display: grid; gap: 14px; }

/* ---------- 上の帯 ---------- */
.top { position: sticky; top: 0; z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 14px; background: var(--white); border-bottom: 3px solid var(--navy); }
.top .logo { padding: 4px 12px; box-shadow: 3px 3px 0 var(--yellow); }
.top .logo b { font-size: 18px; }
.top .logo small { font-size: 9px; }
.top .mini { text-decoration: none; background: var(--yellow); border: 3px solid var(--navy); border-radius: 999px; font-weight: 900; font-size: 13px; padding: 6px 14px; white-space: nowrap; }

.ticker { overflow: hidden; border-bottom: 3px solid var(--navy); background: var(--white); }
.ticker ul { display: flex; gap: 10px; width: max-content; list-style: none; margin: 0; padding: 10px 0; animation: tick 38s linear infinite; }
.ticker li { border: 2px solid var(--navy); border-radius: 999px; padding: 2px 12px; font-size: 12px; font-weight: 700; white-space: nowrap; }
@keyframes tick { to { transform: translateX(-50%); } }

/* ---------- 見出しの部品 ---------- */
.sec { padding: 64px 22px; }
.sec.dark { background: var(--navy); color: var(--white); background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px); background-size: 24px 24px; }
.kicker { display: flex; justify-content: center; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; color: var(--muted); margin-bottom: 10px; }
.kicker::before, .kicker::after { content: ""; width: 22px; height: 2px; background: currentColor; }
.dark .kicker { color: var(--teal); }
.h2 { font-weight: 900; font-size: 27px; line-height: 1.5; text-align: center; letter-spacing: .02em; }
.h2 .y { color: var(--navy); background: var(--yellow); padding: 0 6px; }
.dark .h2 .y { color: var(--navy); }
.chips { display: grid; justify-items: center; gap: 6px; }
.chip { background: var(--navy); color: var(--white); font-weight: 900; font-size: 21px; padding: 3px 12px; line-height: 1.5; }
.chip .y { color: var(--yellow); }
.dark .chip { background: var(--white); color: var(--navy); }
.dark .chip .y { color: var(--red); }
.lead { margin-top: 18px; }
.stripe { height: 18px; background: var(--stripe); border-block: 3px solid var(--navy); }

/* ---------- ファーストビュー ---------- */
.fv { padding: 34px 20px 0; position: relative; overflow: hidden; }
.fv .for { text-align: center; font-weight: 700; font-size: 14px; }
.fv h1 { font-weight: 900; font-size: 34px; line-height: 1.38; margin-top: 10px; letter-spacing: .02em; }
.fv h1 .big { display: inline-block; font-family: var(--display); font-weight: 400; font-size: 56px; line-height: 1.1; color: var(--yellow); -webkit-text-stroke: 2px var(--navy); paint-order: stroke fill; text-shadow: 4px 4px 0 var(--navy); margin: 4px 0; }
.fv .head { position: relative; }
.fv .tsuki { position: absolute; right: -6px; top: 34px; width: min(150px, 34%); }
.fv .stage { position: relative; margin-top: 22px; }
.term { background: var(--navy); color: #e7ecff; border: 3px solid var(--navy); border-radius: 12px; font-family: var(--mono); font-size: 12.5px; line-height: 1.75; padding: 12px 14px 14px; box-shadow: 5px 5px 0 var(--yellow); }
.term .bar { display: flex; gap: 6px; margin-bottom: 8px; align-items: center; }
.term .bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--yellow); display: block; }
.term .bar i:nth-child(2) { background: var(--teal); }
.term .bar i:nth-child(3) { background: #e7ecff; }
.term .bar span { margin-left: 8px; font-size: 11px; color: #aab5da; }
.term .ok { color: var(--teal); }
.term .ng { color: #ff8a73; }
.term .cur::after { content: "▍"; color: var(--yellow); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.fv .term .bar img { width: 22px; height: 22px; border-radius: 6px; background: var(--white); margin-left: auto; }
.fv .chips { justify-items: start; margin-top: 16px; }
.fv .chip { font-size: 18px; }
.fv .band { margin: 22px -20px 0; background: var(--navy); color: var(--white); display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; }
.fv .band b { font-weight: 900; font-size: 24px; color: var(--yellow); letter-spacing: .06em; }
.fv .band small { font-family: var(--mono); font-size: 10px; text-align: right; line-height: 1.5; color: #aab5da; }
.cta { padding: 26px 22px; display: grid; gap: 14px; background: var(--white); }

/* ---------- タンとは ---------- */
.about .chips { margin-top: 22px; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 28px; }
.stat { border: 3px solid var(--navy); border-radius: 12px; padding: 10px 6px; text-align: center; background: var(--white); }
.stat b { display: block; font-family: var(--display); font-weight: 400; font-size: 24px; line-height: 1.3; }
.stat span { font-size: 11px; font-weight: 700; line-height: 1.5; display: block; }
.note { font-size: 12px; color: var(--muted); margin-top: 10px; line-height: 1.7; }
.dark .note { color: #aab5da; }
.rail { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 26px 22px 10px; margin: 0 -22px; }
.rail > * { scroll-snap-align: center; flex: none; }
.who { width: 230px; border: 3px solid var(--navy); border-radius: 16px; overflow: hidden; background: var(--white); }
.who .face { height: 210px; display: grid; place-items: end center; padding-top: 10px; }
.who .face img { max-height: 190px; width: auto; }
.who.t .face { background: var(--yellow); }
.who.k .face { background: var(--teal); }
.who h3 { font-size: 15px; font-weight: 900; padding: 10px 14px 0; }
.who p { font-size: 13px; line-height: 1.7; padding: 4px 14px 14px; }
.who .tag { font-weight: 900; font-size: 18px; padding: 10px 14px 0; display: block; }

/* ---------- 約束 ---------- */
.why { padding-bottom: 48px; }
.why .h2 { margin-top: 6px; }
.why .sub { text-align: center; font-weight: 900; font-size: 20px; color: var(--yellow); margin-top: 14px; letter-spacing: .06em; }
.promise { padding: 56px 22px 52px; border-bottom: 3px dashed var(--grid); }
.promise:last-of-type { border-bottom: 0; }
.p-num { display: flex; align-items: baseline; justify-content: center; gap: 10px; font-family: var(--display); }
.p-num small { font-family: var(--body); font-weight: 900; font-size: 15px; }
.p-num b { font-weight: 400; font-size: 64px; line-height: 1; color: var(--yellow); -webkit-text-stroke: 2px var(--navy); paint-order: stroke fill; text-shadow: 4px 4px 0 var(--navy); }
.habit { position: relative; margin: 18px auto 0; border: 3px solid var(--navy); border-radius: 14px; padding: 20px 14px 14px; text-align: center; font-weight: 900; font-size: 17px; line-height: 1.6; background: var(--white); }
.habit::before { content: "タンのくせ"; position: absolute; top: -11px; left: 50%; transform: translateX(-50%); background: var(--white); padding: 0 10px; font-size: 11px; font-weight: 700; color: var(--muted); }
.arrow { width: 3px; height: 42px; margin: 8px auto; background: repeating-linear-gradient(var(--navy) 0 5px, transparent 5px 9px); position: relative; }
.arrow::after { content: ""; position: absolute; bottom: -2px; left: 50%; transform: translateX(-50%); border: 7px solid transparent; border-top-color: var(--navy); border-bottom: 0; }
.dakara { display: table; margin: 6px auto 14px; background: var(--yellow); border: 3px solid var(--navy); border-radius: 999px; padding: 2px 18px; font-weight: 900; }
.promise .chips { margin-bottom: 20px; }
.win { border: 3px solid var(--navy); border-radius: 12px; overflow: hidden; background: var(--white); margin: 6px 0 18px; }
.win .wbar { background: var(--navy); color: #e7ecff; font-family: var(--mono); font-size: 11.5px; padding: 6px 12px; display: flex; gap: 6px; align-items: center; }
.win .wbar i { width: 9px; height: 9px; border-radius: 50%; background: var(--yellow); display: block; }
.win .wbar i:nth-child(2) { background: var(--teal); }
.win .wbar i:nth-child(3) { background: #e7ecff; margin-right: 6px; }
.win .wbody { padding: 12px 14px; font-size: 13.5px; line-height: 1.8; }
.win .row { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px dashed var(--grid); padding: 3px 0; }
.win .row:last-child { border-bottom: 0; }
.win .ok { color: #0f8a76; font-weight: 900; }
.win .ng { color: var(--red); font-weight: 900; }
.win .red { background: #fde7e3; outline: 2px solid var(--red); }
.bubble { display: table; max-width: 86%; border-radius: 16px; padding: 6px 14px; margin: 6px 0; font-size: 13.5px; }
.bubble.me { margin-left: auto; background: #8de08a; }
.bubble.tan { background: #eef1f7; }

/* ---------- 区切りの呼びかけ ---------- */
.must { text-align: center; padding: 54px 22px; }
.must .h2 { font-size: 26px; }
.must .btns { margin-top: 26px; }

/* ---------- 配っている道具 ---------- */
.tool { width: 300px; border: 3px solid var(--navy); border-radius: 16px; overflow: hidden; background: var(--white); display: flex; flex-direction: column; }
.tool .shot { background: #f4f6f9; border-bottom: 3px solid var(--navy); height: 180px; overflow: hidden; }
.tool .shot img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.tool .body { padding: 14px; display: grid; gap: 8px; flex: 1; align-content: start; }
.tool .tag { font-size: 12px; font-weight: 700; color: var(--muted); }
.tool h3 { font-size: 17px; font-weight: 900; line-height: 1.5; }
.hl { display: inline; background: var(--yellow); font-weight: 900; font-size: 17px; line-height: 1.9; padding: 1px 4px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.tool p { font-size: 13.5px; line-height: 1.75; }
.tool .kw { font-size: 13px; font-weight: 700; border-top: 1px dashed var(--grid); padding-top: 8px; }
.tool .kw b { background: var(--navy); color: var(--yellow); padding: 1px 8px; border-radius: 6px; }
.tool .btn { font-size: 14px; padding: 9px 14px; margin-top: 4px; }
.dots { display: flex; justify-content: center; gap: 6px; margin-top: 8px; }
.dots i { width: 22px; height: 6px; border-radius: 3px; background: var(--grid); display: block; }
.dots i.on { background: var(--navy); }

/* ---------- 作れる物 ---------- */
.svc .h2 + p { text-align: center; margin-top: 10px; font-size: 14px; color: #c9d1ec; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 24px; list-style: none; padding: 0; }
.tags li { border: 2px solid var(--white); border-radius: 999px; padding: 4px 14px; font-weight: 700; font-size: 14px; }
.tags li.y { background: var(--yellow); border-color: var(--yellow); color: var(--navy); }

/* ---------- 流れ ---------- */
.flow ol { list-style: none; padding: 0; margin: 30px 0 0; position: relative; }
.flow ol::before { content: ""; position: absolute; left: 21px; top: 10px; bottom: 10px; width: 3px; background: linear-gradient(var(--yellow), var(--navy)); }
.flow li { display: grid; grid-template-columns: 46px 1fr; gap: 12px; margin-bottom: 14px; position: relative; }
.flow .n { width: 46px; height: 46px; border-radius: 12px; background: var(--navy); color: var(--white); display: grid; place-items: center; font-family: var(--display); font-size: 17px; }
.flow li:last-child .n { background: var(--yellow); color: var(--navy); border: 3px solid var(--navy); }
.flow .box { border: 3px solid var(--navy); border-radius: 12px; padding: 10px 14px; background: var(--white); }
.flow h3 { font-size: 16px; font-weight: 900; }
.flow p { font-size: 13.5px; line-height: 1.75; margin-top: 4px; }

/* ---------- 締め ---------- */
.close { text-align: center; padding: 60px 22px 40px; }
.close .tan { width: 200px; margin: 18px auto 0; }
.close .id { font-family: var(--mono); font-size: 13px; margin-top: 12px; }
.foot { padding: 26px 22px 110px; font-size: 12px; color: var(--muted); border-top: 3px solid var(--navy); line-height: 1.8; }
.foot a { font-weight: 700; }

/* ---------- 動画（押したら読み込む） ---------- */
.yt { position: relative; display: block; width: 100%; border: 3px solid var(--navy); border-radius: 14px; overflow: hidden; background: var(--navy); cursor: pointer; padding: 0; }
.yt.v { aspect-ratio: 9 / 16; max-width: 260px; margin-inline: auto; }
.yt.h { aspect-ratio: 16 / 9; }
.yt img { width: 100%; height: 100%; object-fit: cover; opacity: .9; }
.yt .play { position: absolute; inset: 0; margin: auto; width: 70px; height: 70px; border-radius: 50%; background: var(--yellow); border: 3px solid var(--navy); display: grid; place-items: center; font-size: 26px; color: var(--navy); }
.yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt-note { font-size: 12px; color: var(--muted); text-align: center; margin-top: 8px; }

/* ---------- 道具のページ ---------- */
.crumb { display: inline-block; font-size: 13px; font-weight: 700; margin: 18px 22px 0; }
.page-h { padding: 18px 22px 0; }
.page-h .tag { font-size: 13px; font-weight: 700; color: var(--muted); }
.page-h h1 { font-weight: 900; font-size: 30px; line-height: 1.45; margin-top: 6px; }
.page-h .lead { font-size: 15px; }
.demo { margin-top: 16px; border: 3px solid var(--navy); border-radius: 14px; overflow: hidden; background: var(--white); }
.demo .note-bar { background: var(--yellow); border-bottom: 3px solid var(--navy); font-weight: 900; font-size: 13px; padding: 6px 12px; display: flex; justify-content: space-between; gap: 8px; align-items: center; flex-wrap: wrap; }
.demo .note-bar a { font-size: 12px; }
.demo iframe { width: 100%; height: 640px; border: 0; display: block; }
.list { padding-left: 1.2em; margin: 14px 0 0; }
.list li { margin-bottom: 6px; }
.facts { border: 3px solid var(--navy); border-radius: 12px; margin-top: 16px; overflow: hidden; }
.facts div { display: grid; grid-template-columns: 7.5em 1fr; border-bottom: 2px solid var(--grid); }
.facts div:last-child { border-bottom: 0; }
.facts dt, .facts dd { margin: 0; padding: 8px 12px; font-size: 13.5px; line-height: 1.7; }
.facts dt { background: #f4f6f9; font-weight: 900; }
.faq { margin-top: 16px; }
.faq details { border: 3px solid var(--navy); border-radius: 12px; margin-bottom: 10px; background: var(--white); }
.faq summary { font-weight: 900; padding: 10px 14px; cursor: pointer; }
.faq details p { padding: 0 14px 12px; font-size: 14px; }
.h3 { font-weight: 900; font-size: 21px; line-height: 1.5; margin-top: 40px; }
.block { padding: 0 22px; }

/* ---------- スマホの下のボタン ---------- */
.dock { display: none; }

/* ---------- 幅ごとの直し ---------- */
@media (max-width: 1180px) {
  .shell { grid-template-columns: 1fr var(--col) 1fr; }
  .side-l .inner { width: 240px; }
  .side-l .pair img:last-child { width: 104px; }
  .index { width: 170px; }
}
@media (max-width: 1000px) {
  .shell { grid-template-columns: minmax(0, 560px); justify-content: center; }
  .side { display: none; }
  .dock { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.94); border-top: 3px solid var(--navy); }
  .dock .btn { max-width: 520px; margin: 0 auto; padding: 10px 18px; }
}
@media (max-width: 400px) {
  .fv h1 { font-size: 29px; }
  .fv h1 .big { font-size: 46px; }
  .fv .tsuki { width: 32%; top: 40px; }
  .h2 { font-size: 24px; }
  .chip { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ticker ul { animation: none; flex-wrap: wrap; width: auto; padding: 10px 14px; }
  .ticker li[aria-hidden="true"] { display: none; }
  .term .cur::after { animation: none; }
  .btn { transition: none; }
}

/* ---------- 2026-11-04 2回目: 約束の部品と、背景 ---------- */
/* ツキの心配（読む人の代わりに言う） */
.worry { display: flex; align-items: flex-end; gap: 8px; margin-bottom: 18px; }
.worry img { width: 54px; height: 54px; object-fit: cover; object-position: top; border-radius: 50%; background: var(--teal); border: 3px solid var(--navy); flex: none; }
.worry p { position: relative; background: #fffbe8; border: 3px solid var(--navy); border-radius: 14px; padding: 8px 12px; font-weight: 700; font-size: 15px; line-height: 1.6; }
.worry p::before { content: ""; position: absolute; left: -10px; bottom: 10px; border: 7px solid transparent; border-right-color: var(--navy); border-left: 0; }
.next { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 18px; border: 3px solid var(--navy); border-radius: 999px; padding: 10px 16px; font-weight: 900; font-size: 14px; text-decoration: none; background: var(--white); box-shadow: 0 4px 0 var(--navy); }
.next::after { content: "›"; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--navy); color: var(--yellow); font-size: 13px; }
.next.line { background: var(--yellow); }
.next:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--navy); }
.sum { list-style: none; padding: 0; margin: 24px auto 0; display: grid; gap: 8px; text-align: left; max-width: 340px; }
.sum li { display: grid; grid-template-columns: 26px 1fr; gap: 8px; font-weight: 700; font-size: 15px; line-height: 1.6; }
.sum li::before { content: "✓"; width: 24px; height: 24px; border-radius: 6px; background: var(--teal); color: var(--navy); display: grid; place-items: center; font-weight: 900; font-size: 14px; }
.must .first { margin-top: 20px; font-size: 14px; color: #dfe5f7; }
.promise:nth-of-type(even) { background: #f5f8fb; }

/* 区切りごとの淡い色（方眼は残す） */
.about { background: #eefaf7; background-image: linear-gradient(#d6efe9 1px, transparent 1px), linear-gradient(90deg, #d6efe9 1px, transparent 1px); background-size: 24px 24px; }
#tools { background: #fff8de; background-image: linear-gradient(#f3e6b5 1px, transparent 1px), linear-gradient(90deg, #f3e6b5 1px, transparent 1px); background-size: 24px 24px; }
.flow { background: #f5f8fb; }

/* 最初の画面: ツキの後ろに黄色の丸 */
.fv .head::after { content: ""; position: absolute; right: -40px; top: 18px; width: min(210px, 48%); aspect-ratio: 1; border-radius: 50%; background: var(--yellow); border: 3px solid var(--navy); z-index: 0; }
.fv .tsuki { z-index: 1; }
.fv h1 { position: relative; z-index: 1; }

/* パソコンの左右の余白: 工事中のテープを斜めに */
.tape { position: fixed; z-index: -1; height: 46px; width: 760px; background: var(--stripe); border-block: 4px solid var(--navy); box-shadow: 0 8px 0 rgba(28,42,87,.12); pointer-events: none; }
.tape.a { top: 20px; left: -300px; transform: rotate(-24deg); }
.tape.b { bottom: 30px; right: -300px; transform: rotate(-24deg); }
.tape.c { top: 20px; right: -320px; transform: rotate(24deg); }
.tape span { display: none; }
@media (max-width: 1000px) { .tape { display: none; } }
/* 約束の証拠（本物の画面の切り抜き）と詰めた並び（2026-11-04 Astra の採点のあと） */
.promise { padding: 44px 22px 42px; }
.promise .habit { margin-top: 12px; font-size: 16px; padding: 18px 12px 12px; }
.promise .dakara { margin: 12px auto 10px; }
.promise .chips { margin-bottom: 14px; }
.promise .chip { font-size: 18px; }
.proof { margin: 0 0 12px; border: 3px solid var(--navy); border-radius: 12px; overflow: hidden; background: var(--white); }
.proof img { width: 100%; }
.proof figcaption { font-size: 12px; font-weight: 700; line-height: 1.6; padding: 6px 10px; background: var(--navy); color: #e7ecff; }
.proof figcaption::before { content: "●"; color: var(--teal); margin-right: 6px; }
.pbody { font-size: 15px; }
.pre { margin-top: 14px; font-size: 13px; font-weight: 700; text-align: center; }
.pre + .next { margin-top: 8px; }
.promise .p-num b { font-size: 46px; }
.proof img { width: auto; max-width: 100%; margin: 6px auto; }
.proof + .win { margin-top: 0; }
.pbody b { background: linear-gradient(transparent 60%, #ffe58a 60%); }
.must .kws { margin-top: 10px; font-weight: 900; }
.must .kws b { display: inline-block; background: var(--yellow); color: var(--navy); border-radius: 6px; padding: 0 8px; margin: 2px; }
/* 値段の目安（2026-11-04） */
.price { background: #fff; }
.ptable { width: 100%; border-collapse: collapse; margin-top: 22px; border: 3px solid var(--navy); border-radius: 12px; overflow: hidden; }
.ptable th, .ptable td { border-bottom: 2px solid var(--grid); padding: 10px 12px; text-align: left; vertical-align: middle; }
.ptable th { font-weight: 900; font-size: 15px; line-height: 1.5; }
.ptable th small { display: block; font-weight: 500; font-size: 12px; color: var(--muted); }
.ptable td { font-weight: 900; font-size: 17px; white-space: nowrap; text-align: right; }
.ptable tr.free { background: #eefaf7; }
.ptable tr.free td { color: #0f8a76; }
.price .note { margin-top: 12px; }
.ptable td small { display: block; font-weight: 700; font-size: 11.5px; color: var(--muted); margin-top: 2px; }
/* 作り直しの例（再現） */
.example { background: #f5f8fb; }
.saigen { margin-top: 18px; border: 3px dashed var(--navy); border-radius: 12px; padding: 10px 12px; font-size: 13.5px; line-height: 1.7; background: var(--white); }
.saigen b { display: inline-block; background: var(--navy); color: var(--yellow); border-radius: 6px; padding: 0 8px; margin-right: 8px; }
.case { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 10px; }
.case li { display: grid; grid-template-columns: 64px 1fr; gap: 10px; align-items: start; }
.case .when { display: grid; place-items: center; min-height: 44px; border-radius: 10px; background: var(--navy); color: var(--yellow); font-weight: 900; font-size: 13px; text-align: center; line-height: 1.3; padding: 4px; }
.case li:nth-child(4) .when { background: var(--yellow); color: var(--navy); border: 3px solid var(--navy); }
.case li:last-child .when { background: var(--white); color: var(--navy); border: 3px solid var(--navy); }
.case li > div { border: 3px solid var(--navy); border-radius: 12px; padding: 10px 12px; background: var(--white); }
.case h3 { font-size: 15.5px; font-weight: 900; line-height: 1.5; }
.case p { font-size: 13.5px; line-height: 1.75; margin-top: 4px; }