/* Claude Code ステップ学習 — 共通スタイル。1ファイルだけ。 */
:root {
  /* 配色（2026-09-09）。ヒーロー画像から取った「金」を差し色にする。
     基調は生成りの白と炭色のまま。色を増やさず、金1色＋赤（危ないときだけ）で通す。 */
  --gutter: 1rem;           /* main の左右の余白。紙を画面いっぱいに広げるときに符号を反転して使う */
  --bg: #f7f4ee;            /* 生成りの白。画像の壁の色に寄せた */
  --paper: #ffffff;
  --ink: #17130d;           /* 少し暖かい黒 */
  --muted: #6f6558;
  --line: #e8e0d3;
  --accent: #8f6b0f;        /* 金。色相 43度（前は 35度で茶色に寄っていた）。白地で 4.9:1 なので文字にも使える */
  --accent-ink: #ffffff;
  --accent-2: #d7ab35;      /* 明るい金（金箔の色）。塗りと飾りに使う。**濃い文字と組み合わせる** */
  --accent-mid: #a9841a;    /* 中くらいの金。線と図に使う（白地で 3.6:1）。文字には使わない */
  --accent-on: #231a02;     /* 金の上に乗せる文字の色。白より読みやすい */
  --accent-soft: #fcf3dc;
  --accent-line: #ecd9a2;
  --ok: #8f6b0f;
  --ok-soft: #fcf3dc;
  --warn: #74560c;
  --warn-soft: #fdf6e4;
  --err: #9b2233;           /* 爪の赤。消す・止めるときだけ */
  --err-soft: #f7e4e6;
  --code-bg: #1a1611;
  --code-ink: #efe9df;
  --lock: #cfc7b8;
  --radius: 12px;
  --font: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Segoe UI", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Noto Sans Mono CJK JP", monospace;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); color: var(--ink); background: var(--bg); line-height: 1.7; font-size: 16px; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.6rem; line-height: 1.35; margin: .2em 0 .6em; }
h2 { font-size: 1.2rem; margin: 1.4em 0 .5em; }
h3 { font-size: 1.05rem; margin: 1.2em 0 .4em; }
p { margin: .5em 0; }
small { font-size: .85em; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }

/* 枠 */
header.site { background: var(--paper); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 10; }
header.site .inner, footer.site .inner { max-width: 1080px; margin: 0 auto; padding: .6rem 1rem; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
header.site .inner { padding-top: .42rem; padding-bottom: .42rem; }   /* 帯の高さを1割ほど詰めた（2026-09-17 佐藤の指示。59px → 53px） */
header.site .brand { display: inline-flex; align-items: center; gap: .5rem; color: var(--ink); text-decoration: none; }
/* ロゴ（D案、2026-09-07）: 線画のマーク（>_ の角丸四角）＋ 等幅フォントの小文字 njcc。マークは app/layout.php のインライン SVG、ファビコンは assets/icon.svg */
header.site .brand .logo-mark { width: 26px; height: 26px; display: block; color: var(--accent-mid); }
header.site .brand .logo-text { font-family: var(--mono); font-weight: 700; font-size: 1.2rem; letter-spacing: .02em; line-height: 1; }
header.site nav { margin-left: auto; display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; font-size: .95rem; }
header.site nav a, header.site nav .link { color: var(--ink); display: inline-flex; align-items: center; min-height: 40px; }   /* 指で押せる高さ（2026-09-16） */
header.site nav a.btn { color: var(--accent-on); }   /* 上の行の色指定を打ち消して、金の上の濃い文字に戻す */
header.site nav a.me { display: inline-flex; gap: .4rem; align-items: center; }
main { max-width: 760px; margin: 0 auto; padding: 1.2rem var(--gutter) 3rem; }
main.wide { max-width: 1080px; }
footer.site { border-top: 1px solid var(--line); color: var(--muted); font-size: .85rem; margin-top: 2rem; }

.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem 1.4rem; margin: 0 0 1.2rem; }
.card.narrow { max-width: 460px; margin-left: auto; margin-right: auto; }
.card > h1:first-child, .card > h2:first-child { margin-top: 0; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.actions { display: flex; gap: .8rem; flex-wrap: wrap; }
.crumb { font-size: .9rem; color: var(--muted); margin: 0 0 .4rem; }
.lead { font-size: 1.05rem; color: var(--muted); margin-bottom: 1.2rem; }
.tools { font-size: .9rem; display: flex; gap: 1rem; flex-wrap: wrap; padding: .5rem .8rem; background: var(--bg); border-radius: 8px; }

/* ボタン */
.btn { display: inline-block; background: linear-gradient(180deg, #dcb445, #c1971f); color: var(--accent-on); border: 1px solid #b78d1a; border-radius: 999px; padding: .55rem 1.3rem; font-size: 1rem; font-weight: 600; font-family: inherit; cursor: pointer; line-height: 1.3; }
.btn:hover { filter: brightness(1.05); text-decoration: none; }
.btn.ghost { background: transparent; color: var(--accent); border-color: var(--accent-mid); font-weight: 400; }
.btn.small { padding: .35rem .9rem; font-size: .9rem; }
.btn.big { padding: .8rem 1.6rem; font-size: 1.1rem; }
button.link { background: none; border: 0; padding: 0; color: var(--accent); font: inherit; cursor: pointer; }
button.link:hover { text-decoration: underline; }
button.link.danger { color: var(--err); }
form.inline { display: inline; }

/* バッジ */
.badge { display: inline-block; font-size: .75rem; padding: .1rem .55rem; border-radius: 999px; border: 1px solid transparent; vertical-align: middle; line-height: 1.5; }
.badge.role-learner { background: var(--paper); color: var(--muted); border-color: var(--line); }
.badge.role-editor { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-line); }
.badge.role-expert { background: var(--accent-2); color: var(--accent-on); }
.badge.role-admin { background: var(--paper); color: var(--ink); border-color: var(--ink); font-weight: 700; }
.badge.done { background: var(--accent-2); color: var(--accent-on); }
.badge.draft { background: var(--paper); color: var(--muted); border: 1px dashed var(--muted); }

/* 知らせ */
.flash { border-radius: 8px; padding: .6rem .9rem; margin: 0 0 1rem; background: var(--ok-soft); color: var(--ink); border-left: 4px solid var(--accent); }
.flash.warn { background: var(--warn-soft); border-left-style: dashed; }
.flash.err { background: var(--err-soft); color: var(--err); border-left-color: var(--err); }

/* トップ（ヒーロー。画面いっぱいに画像を敷き、文字を重ねる） */
.hero {
  position: relative;
  width: 100vw; margin-left: calc(50% - 50vw);           /* main の幅を抜けて画面いっぱいに */
  min-height: clamp(420px, 44vw, 880px);                 /* 画面が広いほど高くして、切れる量を減らす */
  display: flex; align-items: center;
  /* 縦位置は 22%：指先が画像の上寄り（高さの約1/4）にあるので、横長の画面で上下が切れても指先を残す */
  /* 画像は 2048px の1枚。webp が使える端末には webp を（71KB / jpeg は 151KB）。
     image-set を知らない古い端末は、上の url() のほうを使う。
     位置 76% 22% は「指先が文字にかぶらず、上のほうに来る」ように測った値（画像を差し替えたら測り直す）。 */
  background: var(--bg) url(img/hero.jpg?v=5) 76% 22% / cover no-repeat;
  background-image: image-set(url(img/hero.webp?v=5) type("image/webp"), url(img/hero.jpg?v=5) type("image/jpeg"));
  margin-top: -1.2rem; margin-bottom: 2rem;
}
.hero::before {                                          /* 文字の下だけ白を敷いて読めるようにする */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(247,244,238,.94) 0%, rgba(247,244,238,.76) 40%, rgba(247,244,238,0) 66%);
}
/* 下端を背景色へ溶かす。画像がぷつりと切れるのを避ける */
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 16%;
  background: linear-gradient(180deg, rgba(247,244,238,0), var(--bg));
  pointer-events: none;
}
.hero-inner { position: relative; z-index: 1; max-width: 1080px; width: 100%; margin: 0 auto; padding: 3rem 1rem; }
.hero .eyebrow { font-size: .85rem; letter-spacing: .12em; color: var(--accent); font-weight: 700; margin: 0 0 .6rem; }   /* サイト名。大文字化はしない */
.hero h1 { font-size: clamp(2rem, 3.6vw, 2.9rem); line-height: 1.3; margin: 0 0 1rem; max-width: 16em; }
.hero .lead-text { font-size: 1.1rem; max-width: 34em; margin: 0 0 1.6rem; }
.hero .actions .btn { font-size: 1.05rem; padding: .7rem 1.6rem; }
.hero .note { margin: .9rem 0 0; font-size: .92rem; color: var(--muted); }
@media (max-width: 720px) {
  /* スマホは「上が画像の帯、下が文字」。
     cover のままだと画像の高さが枠と同じになり、手が文字の上まで伸びて重なる。
     そこで画像を 1.65 倍に拡大して縦の余りを作り、位置 68% 45% で**指先を帯の中**に入れる。
     白の膜は帯の下から強く掛ける（帯の中で薄めると、肝心の指先がぼやける）。 */
  /* スマホには小さいほうの画像を送る（2048px → 1280px、73KB → 27KB。2026-09-17） */
  .hero {
    min-height: 0; background-size: auto 165%; background-position: 68% 45%;
    background-image: image-set(url(img/hero-sm.webp) type("image/webp"), url(img/hero.jpg?v=5) type("image/jpeg"));
  }
  .hero::before {
    background: linear-gradient(180deg,
      rgba(247,244,238,.10) 0%,
      rgba(247,244,238,.20) 22vw,
      rgba(247,244,238,.93) 40vw,
      rgba(247,244,238,.97) 100%);
  }
  .hero-inner { padding: 44vw 1rem 2rem; }                /* 上は画像を見せ、文字は下に */
  .hero h1 { font-size: 1.7rem; }
  .hero .lead-text { font-size: 1rem; }
}
/* トップ：実例（これまでは… の流れ → Claude Code なら… の流れ） */
/* 事例の切り替え（横スクロール＋中央寄せ。真ん中が今の事例、両脇に前後が半透明で見える。JS が無くてもスワイプで動く） */
.cases-wrap { position: relative; width: 100vw; margin-left: calc(50% - 50vw); }
.cases {
  --card: min(760px, 84vw);
  display: flex; gap: 1rem; align-items: flex-start;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding: .5rem calc((100vw - var(--card)) / 2) 1rem;   /* 最初と最後の事例も真ん中に来るように両端を空ける */
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.cases::-webkit-scrollbar { display: none; }
.case { flex: 0 0 var(--card); scroll-snap-align: center; box-sizing: border-box; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem 1.5rem; margin: 0; transition: opacity .35s, transform .35s; }
html.js .case { opacity: .35; transform: scale(.96); }
html.js .case.is-active { opacity: 1; transform: none; }
.cases-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 1px solid var(--line); background: var(--paper); color: var(--ink); font-size: 1.5rem; line-height: 1; cursor: pointer; z-index: 2; display: none; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.cases-btn.prev { left: calc((100vw - min(760px, 84vw)) / 2 - 1.3rem); }
.cases-btn.next { right: calc((100vw - min(760px, 84vw)) / 2 - 1.3rem); }
.cases-btn[disabled] { opacity: .25; cursor: default; }
@media (min-width: 900px) { html.js .cases-btn { display: block; } }
.cases-dots { display: flex; justify-content: center; gap: .55rem; margin: .2rem 0 1.6rem; }
.cases-dots button { width: .55rem; height: .55rem; padding: 0; border-radius: 50%; border: 1px solid var(--accent); background: transparent; cursor: pointer; transition: transform .2s; }
.cases-dots button[aria-current="true"] { background: var(--accent); transform: scale(1.3); }
.case > .bubble { margin: 0 0 1rem; }
.phase { padding: 1rem 0 .4rem; }
.phase.before { border-top: 1px dashed var(--line); color: var(--muted); margin-top: .2rem; }
.phase.after { border-top: 2px solid var(--accent); }
.phase-label { margin: 0; font-size: .8rem; letter-spacing: .12em; font-weight: 700; color: var(--muted); }
.phase.after .phase-label { color: var(--accent); }
.phase.after .case-result strong { color: var(--accent); }
.phase-sub { margin: .1rem 0 .4rem; font-size: .95rem; color: var(--muted); }
.phase-note { margin: .2rem 0 .4rem; font-size: .9rem; color: var(--muted); }
/* 頼んだ一言の吹き出し。テーマの金で塗る（黒だと、ここだけ浮いて見える） */
.case .bubble { display: inline-block; margin: .6rem 0 .4rem; background: linear-gradient(135deg, #e2bc4d, #c1971f);
  color: var(--accent-on); border-radius: 14px 14px 14px 4px; padding: .8rem 1.1rem; font-size: 1.05rem; line-height: 1.6; font-weight: 600;
  box-shadow: 0 2px 10px rgba(143, 107, 15, .22); }
.case-flow { display: flex; align-items: center; justify-content: space-between; gap: .4rem; padding: .8rem .2rem; }
.case-flow .node { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: .4rem; font-size: .85rem; line-height: 1.4; color: var(--ink); }
.phase.before .case-flow .node { color: var(--muted); font-size: .8rem; word-break: keep-all; }
.case-flow .node svg { width: 64px; height: 64px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.phase.before .case-flow .node svg { width: 52px; height: 52px; stroke-width: 2; }
.case-flow .arrow { flex: 0 1 110px; display: flex; flex-direction: column; align-items: center; gap: .2rem; color: var(--muted); min-width: 64px; padding-bottom: 1.4rem; }   /* 下の余白で、隣のラベルと段をずらす */
.case-flow .arrow svg { width: 100%; max-width: 90px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.case-flow .arrow em { font-style: normal; font-size: .75rem; text-align: center; line-height: 1.3; }
.case-result { margin: .6rem 0 .4rem; font-size: 1rem; }
/* 本文の図（:::figure。app/figures.php）。流れ図の部品はトップと共通の .case-flow */
.fig { margin: 1.2em 0 1.4em; }
.fig .pane { padding: .7rem 0 .3rem; border-top: 1px dashed var(--line); }
.fig .pane.hi { border-top: 2px solid var(--accent); }
.fig .pane-label { margin: 0 0 .2rem; font-size: .82rem; letter-spacing: .08em; font-weight: 700; color: var(--muted); }
.fig .pane.hi .pane-label { color: var(--accent); }
.fig .pane-label b { font-size: 1.05em; }
.fig .pane-note { margin: .1rem 0 .3rem; font-size: .92rem; color: var(--muted); }
.fig .pane.hi .pane-note b { color: var(--accent); }
.fig .case-flow { padding: .6rem 0; }
.fig .case-flow .node { font-size: .82rem; }
.fig .case-flow .node svg { width: 56px; height: 56px; }
.fig .pcbox { position: relative; display: flex; align-items: center; justify-content: space-between; gap: .4rem; flex: 5 1 0; min-width: 0; border: 2px dashed var(--accent-line); border-radius: 14px; padding: 1.3rem .6rem .5rem; background: var(--accent-soft); }   /* 箱は中身が多いので広く取る */
.fig .pcbox-label { position: absolute; top: .3rem; left: .7rem; font-size: .7rem; letter-spacing: .08em; font-weight: 700; color: var(--accent); white-space: nowrap; }
.fig .pcbox .node { color: var(--ink); }
.fig .pcbox .arrow { flex: 0 1 90px; min-width: 56px; }
.fig .pane:not(.hi) .pcbox { flex: 0 0 auto; min-width: 7.5rem; }   /* ファイル1つだけの箱 */
.fig .pane.hi .case-flow > .node { flex: 0 0 auto; min-width: 5rem; }   /* 箱の外の「あなた」は広げない */
@media (max-width: 720px) { .fig .pcbox { flex-direction: column; width: 100%; box-sizing: border-box; padding-top: 1.6rem; } .fig .case-flow .arrow svg { transform: rotate(90deg); width: 32px; height: 32px; } }
.case-result strong { display: block; font-size: 1.15rem; margin-bottom: .2rem; }
/* スマホの流れ図（2026-09-17 佐藤の指摘「縦長すぎて頭に入ってこない」）。
   絵を下に、文字をその下に…と積むと1つの流れで画面3つぶんになっていた。
   「左に小さい絵、右に言葉」の1行にして、矢印の行も細くする。1つの流れが画面1つに収まる */
@media (max-width: 720px) {
  .case { padding: 1rem; }
  .case .bubble { font-size: .98rem; }
  .case .bubble br { display: none; }
  .case-flow { flex-direction: column; align-items: stretch; gap: 0; }
  .case-flow .node,
  .case-flow .arrow { display: grid; grid-template-columns: 34px 1fr; align-items: center; column-gap: .7rem; text-align: left; flex-basis: auto; min-width: 0; }
  .case-flow .node { padding: .15rem 0; }
  .case-flow .node svg,
  .phase.before .case-flow .node svg,
  .fig .case-flow .node svg { width: 30px; height: 30px; justify-self: center; }
  .case-flow .node span { text-align: left; }
  .case-flow .arrow { padding: 0; }
  .case-flow .arrow svg,
  .fig .case-flow .arrow svg { transform: rotate(90deg); width: 20px; height: 20px; max-width: none; justify-self: center; }
  .case-flow .arrow em { text-align: left; font-size: .76rem; }
}

/* トップ：なぜこのサイトか */
.why { list-style: none; padding: 0; margin: 0 0 2.2rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.why li { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem 1.2rem 1rem; }
.why svg { color: var(--accent-mid); width: 56px; height: 56px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; display: block; margin-bottom: .6rem; }
.why h3 { margin: 0 0 .35rem; font-size: 1.05rem; color: var(--accent); }   /* 見出しは金。絵も金（2026-09-17） */
.why p { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.65; }
@media (max-width: 720px) { .why { grid-template-columns: 1fr; } .why li { display: grid; grid-template-columns: 56px 1fr; column-gap: 1rem; } .why svg { grid-row: 1 / 3; margin: 0; } }

/* トップ：1つのステップの中身（事例と同じ流れの部品を使う） */
.anatomy { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: .6rem 1.2rem; margin: 0 0 2.2rem; }
.anatomy .case-flow .node { font-size: .9rem; font-weight: 600; flex: 0 1 auto; min-width: 64px; }
.anatomy .case-flow .node span { white-space: nowrap; }
.anatomy .case-flow .arrow { flex: 1 1 40px; min-width: 40px; }
.anatomy .case-flow .arrow em { white-space: nowrap; }

/* トップ：進むと役割が変わる（12個の点を線でつなぎ、節目だけ黒く） */
.journey { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 2.6rem 1.4rem 1.2rem; margin: 0 0 1rem; }
.track { list-style: none; padding: 0; margin: 0 0 1.6rem; display: flex; justify-content: space-between; align-items: center; position: relative; }
.track::before { content: ""; position: absolute; left: 1rem; right: 1rem; top: 50%; height: 2px; background: var(--line); z-index: 0; }
.track li { position: relative; z-index: 1; }
.track li span { display: inline-flex; width: 2rem; height: 2rem; border-radius: 50%; border: 2px solid var(--line); background: var(--paper); color: var(--muted); align-items: center; justify-content: center; font-family: var(--mono); font-size: .85rem; font-weight: 700; }
.track li.editor span, .track li.expert span, .track li.goal span { background: var(--accent-mid); color: #fff; border-color: var(--accent-mid); width: 2.4rem; height: 2.4rem; }
.track li b { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(100% + .4rem); white-space: nowrap; font-size: .78rem; color: var(--ink); }
.track li b::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1px; height: .3rem; background: var(--ink); }
.track2 { position: relative; margin: 0 0 .6rem; padding-top: 2.2rem; }
.track2 .segs { display: flex; gap: 3px; height: 1.9rem; }
.track2 .seg { display: flex; align-items: center; justify-content: center; border-radius: 6px; background: var(--accent-soft); color: var(--accent); font-family: var(--mono); font-size: .75rem; font-weight: 700; min-width: 1.2rem; }
.track2 .seg.m20 { background: var(--accent-2); color: var(--accent-on); }
.track2 .seg.m30 { background: var(--accent-mid); color: #fff; }
.track2 .mark { position: absolute; top: 0; transform: translateX(-100%); font-size: .78rem; color: var(--ink); white-space: nowrap; text-align: right; line-height: 1.2; padding-right: .3rem; border-right: 2px solid var(--accent); height: 2.2rem; }
.track2 .mark small { display: block; color: var(--muted); font-weight: 400; font-size: .7rem; }
.zones { list-style: none; padding: 0; margin: 0 0 1.4rem; display: flex; gap: 1.2rem; flex-wrap: wrap; font-size: .82rem; color: var(--muted); }
.zones i { display: inline-block; width: .9rem; height: .9rem; border-radius: 3px; vertical-align: -2px; margin-right: .35rem; background: var(--accent-soft); }
.zones i.m20 { background: var(--accent-2); } .zones i.m30 { background: var(--accent-mid); }
.roles-visual { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.roles-visual li { border-top: 2px solid var(--line); padding-top: .9rem; }
.roles-visual li:nth-child(2), .roles-visual li:nth-child(3) { border-top-color: var(--accent); }
.roles-visual svg { width: 44px; height: 44px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; display: block; margin-bottom: .4rem; }
.roles-visual h3 { margin: 0 0 .3rem; font-size: 1rem; }
.roles-visual h3 small { font-weight: 400; color: var(--muted); margin-left: .3rem; }
.roles-visual p { margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.6; }
@media (max-width: 720px) {
  .journey { padding: 2.4rem .8rem 1rem; }
  .track li span { width: 1.4rem; height: 1.4rem; font-size: .68rem; border-width: 1.5px; }
  .track li.editor span, .track li.expert span, .track li.goal span { width: 1.7rem; height: 1.7rem; }
  .track li b { font-size: .66rem; }
  .track li.goal b { left: auto; right: 0; transform: none; }
  .track li:first-child b { left: 0; transform: none; }
  .roles-visual { grid-template-columns: 1fr; }
}
.cta { text-align: center; padding: 1.5rem 1rem 2rem; }
ul.roles { list-style: none; padding: 0; margin: 0; }
ul.roles li { padding: .4rem 0; border-bottom: 1px dashed var(--line); }
ul.roles li:last-child { border: 0; }

/* 進捗 */
.progress .bar { height: 10px; background: var(--bg); border-radius: 999px; overflow: hidden; margin-top: .8rem; border: 1px solid var(--line); }
.progress .fill { height: 100%; background: linear-gradient(90deg, var(--accent-2), var(--accent-mid)); transition: width .4s; }

/* 章（ログイン後の一覧） */
details.chapter { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); margin: 0 0 .8rem; }
details.chapter > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; column-gap: .8rem; align-items: center; padding: .8rem 1rem; }
details.chapter > summary::-webkit-details-marker { display: none; }
details.chapter > summary::before { content: "▸"; grid-row: 1 / 3; color: var(--muted); font-size: .9rem; }
details[open].chapter > summary::before { content: "▾"; }
details.chapter .ch-no { grid-column: 2; font-family: var(--mono); font-size: .75rem; color: var(--muted); letter-spacing: .05em; }
details.chapter .ch-title { grid-column: 2; font-weight: 700; font-size: 1.05rem; }
details.chapter .ch-meta { grid-column: 3; grid-row: 1 / 3; font-size: .82rem; color: var(--muted); text-align: right; white-space: nowrap; }
details.chapter .ch-bar { grid-column: 2 / 4; height: 4px; background: var(--bg); border-radius: 999px; overflow: hidden; margin-top: .4rem; }
details.chapter .ch-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent-2), var(--accent-mid)); }
details.chapter > ol.steps { padding: 0 .8rem .8rem; }
details.chapter > ol.steps li { border: 0; border-top: 1px solid var(--line); border-radius: 0; margin: 0; padding: .7rem .2rem; }
details.chapter > ol.steps li.open { box-shadow: none; border-left: 3px solid var(--accent); padding-left: .6rem; }

/* ステップ一覧 */
ol.steps { list-style: none; padding: 0; margin: 0; }
ol.steps li { display: flex; gap: .9rem; align-items: flex-start; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem 1rem; margin-bottom: .6rem; }
ol.steps.preview li { padding: .6rem .9rem; }
ol.steps .num { flex: 0 0 2.2rem; height: 2.2rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; background: var(--bg); color: var(--muted); border: 1px solid var(--line); font-family: var(--mono); }
ol.steps li.done .num { background: var(--accent-2); color: var(--accent-on); border-color: var(--accent-mid); }
ol.steps li.open .num { background: var(--ink); color: #fff; border-color: var(--ink); }
ol.steps li.open { border-color: var(--ink); box-shadow: 0 0 0 3px var(--accent-soft); }
ol.steps li.locked { opacity: .6; }
ol.steps li.locked .num { background: var(--lock); color: #fff; border-color: var(--lock); }
ol.steps li.draft { border-style: dashed; }
ol.steps .body { flex: 1; min-width: 0; }
ol.steps .body .title { font-weight: 600; font-size: 1.05rem; display: inline; }
ol.steps .body small, ol.steps.preview li > div small { display: block; color: var(--muted); }
ol.steps .body > small { display: block; }
ol.steps .reorder { display: flex; flex-direction: column; gap: .2rem; }
ol.steps .reorder button { border: 1px solid var(--line); background: var(--paper); border-radius: 6px; width: 1.8rem; height: 1.5rem; cursor: pointer; color: var(--muted); font-size: .8rem; }
ol.steps .reorder button:hover { color: var(--accent); border-color: var(--accent); }

/* ステップ本文 */
.step-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1.2rem; align-items: start; }
@media (max-width: 860px) { .step-layout { grid-template-columns: minmax(0, 1fr); } aside.note { position: static; } }
article.step h1 { font-size: 1.7rem; }
.md h2 { font-size: 1.25rem; margin-top: 1.8em; padding-bottom: .25em; border-bottom: 2px solid var(--accent-line); }
.md h3 { font-size: 1.05rem; }
.md p { margin: .7em 0; }
.md ul, .md ol { padding-left: 1.5em; margin: .6em 0; }
.md li { margin: .25em 0; }
.md code { font-family: var(--mono); font-size: .9em; background: var(--accent-soft); color: #6b5108; padding: .1em .4em; border-radius: 4px; }
.md pre.code { background: var(--code-bg); color: var(--code-ink); padding: .9rem 1rem; border-radius: 8px; overflow-x: auto; font-family: var(--mono); font-size: .88rem; line-height: 1.55; position: relative; margin: .8em 0; }
.md pre.code code { background: none; padding: 0; color: inherit; font-size: inherit; }
.md pre.code[data-lang]::before { content: attr(data-lang); position: absolute; right: .7rem; top: .4rem; font-size: .7rem; color: #8a8a8a; }
.md blockquote { margin: .8em 0; padding: .5em 1em; border-left: 4px solid var(--accent-2); background: var(--accent-soft); border-radius: 0 8px 8px 0; }
.md blockquote p { margin: .3em 0; }
.md hr { border: 0; border-top: 1px solid var(--line); margin: 1.5em 0; }
.md .table-wrap { overflow-x: auto; margin: 1em 0; }
.md table { border-collapse: collapse; width: 100%; font-size: .95em; }
.md th, .md td { border-bottom: 1px solid var(--line); padding: .45em .7em; text-align: left; vertical-align: top; }
.md thead th { border-bottom: 2px solid var(--ink); white-space: nowrap; }
.md tbody tr:last-child td { border-bottom: 0; }
.md a { text-decoration: underline; }
/* 本文の中のクイズ（:::quiz） */
.quiz { border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; margin: 1.4em 0; background: var(--bg); }
.quiz .q { font-weight: 700; margin-bottom: .7rem; }
.quiz .choices { display: grid; gap: .45rem; }
.quiz .choice { display: flex; align-items: flex-start; gap: .6rem; background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: .6rem .8rem; cursor: pointer; position: relative; }
.quiz .choice:hover { border-color: var(--muted); }
.quiz.is-answered .choice, .quiz.static .choice { cursor: default; }
.quiz .choice input { margin-top: .25rem; accent-color: var(--accent); }
.quiz .choice .txt { flex: 1; }
.quiz .choice.correct { border: 2px solid var(--accent); background: var(--accent-soft); padding: calc(.6rem - 1px) calc(.8rem - 1px); }
.quiz .choice.correct::after { content: "正解"; font-size: .72rem; font-weight: 700; background: var(--accent); color: #fff; border-radius: 999px; padding: .1rem .55rem; align-self: center; white-space: nowrap; }
.quiz .choice.wrong { border-style: dashed; color: var(--muted); }
.quiz .choice.wrong::after { content: "あなたの答え"; font-size: .72rem; color: var(--muted); align-self: center; white-space: nowrap; }
.quiz .quiz-actions { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin: .8rem 0 0; }
.quiz .verdict { font-weight: 700; margin: .8rem 0 0; color: var(--accent); }
.quiz .explain { border-top: 1px solid var(--line); margin-top: .7rem; padding-top: .7rem; }
.quiz .explain > :first-child { margin-top: 0; }
.quiz .explain > :last-child { margin-bottom: 0; }

/* クイズに答えるまで、その下は隠れている */
.gate[hidden] { display: none; }
[hidden] { display: none !important; }   /* display:flex などの指定より hidden を優先（「正解を見る」の行が残る不具合、2026-09-15） */

/* 本文の中の書き込み欄（:::write） */
.write { border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; margin: 1.4em 0; background: var(--bg); }
.write .q { font-weight: 400; }
.write .q > p:first-child { font-weight: 700; }   /* 問いかけの1行目だけ太く。例示や補足は普通の太さ */
.write .q > :first-child { margin-top: 0; }
.write .fields { list-style: none; padding-left: 0; margin: .6rem 0 .4rem; display: grid; gap: .5rem; counter-reset: wf; }
.write .fields li { display: grid; grid-template-columns: 1.5em 1fr; align-items: start; gap: .3rem; }
.write .fields li::before { counter-increment: wf; content: counter(wf) "."; font-family: var(--mono); color: var(--muted); padding-top: .55rem; }
.write textarea { width: 100%; font: inherit; font-size: .95rem; line-height: 1.6; padding: .5rem .7rem; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); resize: vertical; }
.write textarea:focus { outline: 2px solid var(--accent-soft); border-color: var(--ink); }
.write .hint { margin: .2rem 0 0; }
p.answers-save { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin: 1.2rem 0 0; }
/* 保存は自動。ボタンは JS が動かない環境のための控えなので、動く環境では隠す。
   保存に失敗したときだけ JS が出し直す（.save-failed）。 */
html.js .save-fallback { display: none; }
html.js .save-failed .save-fallback { display: inline-block; }
.status { font-variant-numeric: tabular-nums; }

section.task { margin-top: 2rem; padding: 1rem 1.2rem; background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: var(--radius); }
section.task h2 { margin-top: 0; color: var(--accent); border: 0; }
section.task h2::before { content: "▶ "; font-size: .8em; }
form.complete { margin: 1.8rem 0; text-align: center; }
.reset-step { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; justify-content: center; margin: 0 0 1.2rem; font-size: .9rem; }
.reset-step label { display: inline-flex; align-items: center; gap: .3rem; }
nav.pager { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
nav.pager.bottom { border-top: 1px solid var(--line); padding-top: 1rem; margin-top: 1rem; }
nav.pager.top { border-bottom: 1px solid var(--line); padding-bottom: .6rem; margin: 0 0 .8rem; font-size: .92rem; }
nav.pager.top .here { font-weight: 700; color: var(--muted); white-space: nowrap; }   /* いまいる場所。左右の「前へ／次へ」と見分ける */
nav.pager.top .muted { white-space: nowrap; }

/* メモ */
aside.note { position: sticky; top: 4rem; }
aside.note h2 { margin-top: 0; font-size: 1.05rem; }
aside.note textarea, .card textarea { width: 100%; font: inherit; font-size: .95rem; line-height: 1.6; padding: .6rem .7rem; border: 1px solid var(--line); border-radius: 8px; resize: vertical; background: #fafafa; }
aside.note textarea:focus, .card textarea:focus, .form input:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
.note-item { border-top: 1px solid var(--line); padding: .6rem 0; }
.note-item h3 { margin: .2rem 0; }
.note-body { white-space: pre-wrap; font-family: inherit; margin: .3rem 0 0; background: #fafafa; padding: .6rem .8rem; border-radius: 8px; border: 1px solid var(--line); }

/* マイノート（notes.php）。1ステップ＝1ページ。設問と自分の答えを読み返すだけ（ここでは書かない） */
/* ページ捲りの帯。JS が無ければ番号の飛び先だけ（‹ › は出ない） */
.nb-nav { display: flex; align-items: center; gap: .5rem; padding: .6rem .8rem; }
.nb-tabs { flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; }
.nb-tabs a { display: inline-block; min-width: 2em; text-align: center; padding: .15rem .45rem; border: 1px solid var(--line); border-radius: 6px; font-family: var(--mono); font-size: .9rem; text-decoration: none; color: var(--accent); background: var(--paper); }
.nb-tabs a:hover { border-color: var(--accent); background: var(--accent-soft); }
.nb-tabs a[aria-current] { background: var(--accent); border-color: var(--accent); color: #fff; }
.nb-btn { display: none; width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 1px solid var(--line); background: var(--paper); color: var(--ink); font-size: 1.3rem; line-height: 1; cursor: pointer; flex: none; }
.nb-btn:hover { border-color: var(--accent); background: var(--accent-soft); }
html.js .nb-btn { display: inline-flex; align-items: center; justify-content: center; }
.nb-btn[disabled] { opacity: .25; cursor: default; }
.nb-btn[disabled]:hover { border-color: var(--line); background: var(--paper); }
/* ページは横に並べ、いまのページを左端に置く。右に次のページが少し見える（トップの事例と同じ作り）。
   ページ1の左には何も無い。端で止まり、回らない。JS が無ければ縦に全部並ぶ */
html.js .nb-book { --nb-w: 88%; display: flex; align-items: flex-start; gap: 1rem; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: .2rem 0 .6rem; scrollbar-width: none; transition: height .25s ease; }
html.js .nb-book::-webkit-scrollbar { display: none; }
html.js .nb-book::after { content: ""; flex: 0 0 calc(100% - var(--nb-w)); }   /* 最後のページも左端まで来られるように */
html.js .nb-page { flex: 0 0 var(--nb-w); scroll-snap-align: start; margin: 0; opacity: .35; transition: opacity .35s; }   /* 縮小はしない（snap の位置がずれる） */
html.js .nb-page.is-active { opacity: 1; }
@media (max-width: 640px) { html.js .nb-book { --nb-w: 92%; } }
@media (prefers-reduced-motion: reduce) { html.js .nb-book { scroll-behavior: auto; } html.js .nb-page { transition: none; } }
.nb-page { scroll-margin-top: 4.5rem; }
.nb-head { border-bottom: 2px solid var(--accent-line); padding-bottom: .6rem; margin-bottom: .4rem; }
.nb-head .crumb { margin: 0 0 .2rem; }
.nb-head h2 { margin: 0 0 .2rem; }
.nb-head h2 a { text-decoration: none; }
.nb-head h2 a:hover { text-decoration: underline; }
.nb-head p:last-child { margin: 0; }
.nb-item { padding: .9rem 0; border-bottom: 1px dashed var(--line); }
.nb-item:last-child { border-bottom: 0; padding-bottom: .2rem; }
.nb-q { font-weight: 700; margin: 0 0 .5rem; }
.nb-q > p:first-of-type { display: inline; }
.nb-write .nb-q { font-weight: 400; }
.nb-write .nb-q > p:first-of-type { font-weight: 700; }   /* 問いかけの1行目だけ太く。ステップ画面と同じ */
.nb-fields li > .muted { display: inline-block; padding-top: .45rem; }
.nb-q > :last-child { margin-bottom: 0; }
.nb-tag { display: inline-block; font-size: .72rem; font-weight: 700; color: var(--accent); border: 1px solid var(--accent-line); background: var(--accent-soft); border-radius: 999px; padding: .05rem .55rem; margin-right: .5rem; vertical-align: .1em; white-space: nowrap; }
.nb-q small { font-weight: 400; margin-left: .3rem; }
.nb-choices { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem; }
.nb-choices li { display: flex; align-items: center; gap: .6rem; padding: .4rem .7rem; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--muted); }
.nb-choices li .txt { flex: 1; }
.nb-choices li.correct { color: var(--ink); border: 2px solid var(--accent); background: var(--accent-soft); padding: calc(.4rem - 1px) calc(.7rem - 1px); }
.nb-choices li.correct::before { content: "正解"; font-size: .72rem; font-weight: 700; background: var(--accent); color: #fff; border-radius: 999px; padding: .1rem .55rem; white-space: nowrap; }
.nb-verdict { margin: .5rem 0 0; font-weight: 700; color: var(--accent); }
.nb-verdict .muted { font-weight: 400; }
.nb-fields { list-style: none; padding: 0; margin: 0; display: grid; gap: .4rem; counter-reset: nf; }
.nb-fields li { display: grid; grid-template-columns: 1.5em 1fr; align-items: start; gap: .3rem; }
.nb-fields li::before { counter-increment: nf; content: counter(nf) "."; font-family: var(--mono); color: var(--muted); padding-top: .45rem; }
.nb-text { white-space: pre-wrap; font-family: inherit; margin: 0; background: #fafafa; padding: .5rem .8rem; border-radius: 8px; border: 1px solid var(--line); }

/* メモ・感想の簡易エディタ（app.js が textarea の代わりに置く）と、その表示 */
.rich-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; margin: 0 0 .35rem; }
.rich-bar button { font: inherit; font-size: .82rem; line-height: 1; padding: .38rem .5rem; min-width: 2em; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); color: var(--ink); cursor: pointer; }
.rich-bar button:hover, .rich-bar button.on { border-color: var(--accent); background: var(--accent-soft); }
.rich-bar .sep { width: 1px; height: 1.2em; background: var(--line); margin: 0 .2rem; }
.rich-bar .c-gold { color: #8f6b0f; font-weight: 700; }
.rich-bar .c-red  { color: #9b2233; font-weight: 700; }
.rich-bar .c-blue { color: #1d4f8c; font-weight: 700; }
.rich { width: 100%; box-sizing: border-box; font: inherit; font-size: .95rem; line-height: 1.6; padding: .6rem .7rem; border: 1px solid var(--line); border-radius: 8px; background: #fafafa; overflow: auto; }
.rich:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
.rich:empty::before { content: attr(data-placeholder); color: #9a9a9a; pointer-events: none; }
.rich p, .rich-view p { margin: 0 0 .35em; }
.rich ul, .rich ol, .rich-view ul, .rich-view ol { margin: .15em 0 .4em; padding-left: 1.5em; }
.rich > :last-child, .rich-view > :last-child { margin-bottom: 0; }
.rich-view { white-space: normal; }
.hl-gold { color: #8f6b0f; }
.hl-red  { color: #9b2233; }
.hl-blue { color: #1d4f8c; }
.nb-note > p:last-child { margin-bottom: 0; }

/* フォーム */
.form label { display: block; margin: .6rem 0; font-size: .9rem; color: var(--muted); }
.form input[type=text], .form input[type=email], .form input[type=password], .form input:not([type]), .form input[type=number], .form textarea, .form select {
  display: block; width: 100%; font: inherit; font-size: 1rem; color: var(--ink); padding: .55rem .7rem; border: 1px solid var(--line); border-radius: 8px; margin-top: .2rem; background: #fff;
}
.form input[type=number] { width: 7em; display: inline-block; }
.form label.check { color: var(--ink); }
.form label.check input { width: auto; display: inline; margin-right: .4rem; }
.form .btn { margin-top: .6rem; }
.form.inline-form { display: flex; gap: 1rem; align-items: flex-end; flex-wrap: wrap; }
.form.editor textarea { font-family: var(--mono); font-size: .9rem; }
details.help { font-size: .9rem; color: var(--muted); margin: .6rem 0; }
details.help summary { cursor: pointer; }
.preview { border: 2px dashed var(--accent); }

/* 表 */
table.list { width: 100%; border-collapse: collapse; font-size: .92rem; }
table.list th, table.list td { text-align: left; padding: .45rem .5rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.list tr.sel td { background: var(--accent-soft); }
table.list td.acts { white-space: nowrap; }
table.list td.acts > * { margin-right: .6rem; }
table.list select { font: inherit; font-size: .9rem; }
.scroll { overflow-x: auto; }

@media (max-width: 600px) {
  body { font-size: 15px; }
  .card { padding: 1rem; }
  .hero h1 { font-size: 1.5rem; }
  header.site nav { gap: .6rem; font-size: .88rem; }
  :root { --gutter: .75rem; }
  main { padding: .8rem var(--gutter) 2rem; }
}

/* ===== 管理のアクセス解析（admin_stats.php）。imh.moe と同じ組み立て、色はこのサイトの金 ===== */
.row.head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.row.head h1 { margin: 0; }
.admin-tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin: .6rem 0 1rem; }
.admin-tabs a { padding: .3rem .8rem; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; color: var(--accent); background: var(--paper); font-size: .92rem; }
.admin-tabs a:hover { border-color: var(--accent); background: var(--accent-soft); }
.admin-tabs a.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }
.admin-tabs.period-tabs { margin-top: -.4rem; }

.stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .6rem; margin: .8rem 0; }
.stat-box { border: 1px solid var(--line); border-radius: var(--radius); padding: .7rem .8rem; background: var(--bg); }
.stat-box .stat-label { display: block; font-size: .78rem; color: var(--muted); }
.stat-box strong { display: block; font-size: 1.5rem; line-height: 1.2; color: var(--accent); font-variant-numeric: tabular-nums; }
.stat-box small { color: var(--muted); font-size: .74rem; }

.bar-chart { display: flex; align-items: flex-end; gap: 2px; height: 150px; padding: .4rem 0 0; overflow-x: auto; }
.bar-chart.bar-chart-s { height: 96px; }
.bar-col { flex: 1 1 0; min-width: 7px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; gap: .2rem; }
.bar-col .bar { display: block; width: 100%; max-width: 22px; background: var(--accent-2); border-radius: 3px 3px 0 0; }
.bar-col:hover .bar { background: var(--accent); }
.bar-col .bar-day { display: block; min-height: .62rem; font-size: .62rem; color: var(--muted); line-height: 1; white-space: nowrap; }   /* 目盛りを出さない列も同じ高さにする。空だと、その列だけ棒が下がってガタつく（2026-09-17） */

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 0 1rem; align-items: start; }
.stat-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.stat-table th { text-align: left; font-weight: 400; padding: .35rem .2rem; border-bottom: 1px solid var(--line); word-break: break-all; }
.stat-table td { text-align: right; padding: .35rem .2rem; border-bottom: 1px solid var(--line); white-space: nowrap; font-variant-numeric: tabular-nums; }
.stat-table td.muted { font-size: .84rem; }
@media (max-width: 720px) { .stat-grid { grid-template-columns: 1fr; } .bar-chart { height: 110px; } }

/* 利用規約・プライバシーポリシー（terms.php / privacy.php） */
.doc { max-width: 46rem; margin-left: auto; margin-right: auto; }
.doc h2 { font-size: 1.05rem; margin: 1.6rem 0 .4rem; padding-top: .8rem; border-top: 1px solid var(--line); }
.doc h2:first-of-type { border-top: 0; padding-top: 0; }
.doc ul { padding-left: 1.3em; margin: .4rem 0 .8rem; }
.doc li { margin: .3rem 0; line-height: 1.75; }
.doc p { line-height: 1.85; }
footer.site .inner { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem 1.2rem; flex-wrap: wrap; }
footer.site .foot-links a { color: inherit; display: inline-flex; align-items: center; min-height: 40px; }   /* 指で押せる高さ */
@media (max-width: 560px) { footer.site .inner { flex-direction: column; gap: .35rem; } }

/* ===== スマホで見たときの直し（2026-09-16） ===== */
@media (max-width: 720px) {
  /* 頼み方の文（言語の指定が無いコードブロック）は折り返す。横スクロールだと読み落とす。
     ```bash や ```json のように言語を書いたものは、行がずれると誤解を生むので折り返さない */
  .md pre.code:not([data-lang]) { white-space: pre-wrap; overflow-wrap: anywhere; }
  /* 図が縦に長くなりすぎるので、アイコンと余白を少し詰める */
  .fig .case-flow .node svg { width: 46px; height: 46px; }
  .fig .case-flow { padding: .3rem 0; gap: .1rem; }
  .fig .pcbox { padding-top: 1.4rem; }
  /* ヘッダの行間を詰めて、2段になっても高くなりすぎないように */
  header.site .inner { gap: .2rem .8rem; padding: .25rem .7rem; }
  header.site nav { gap: .2rem .8rem; }
}

/* 管理の表は、スマホでは横に潰れるので「1行＝1枚のカード」に積み上げる（2026-09-17）。
   各セルの data-label を項目名として左に出す */
@media (max-width: 720px) {
  table.list.stack, table.list.stack tbody, table.list.stack tr, table.list.stack td { display: block; width: auto; }
  table.list.stack tr.head { display: none; }
  table.list.stack tr { border: 1px solid var(--line); border-radius: 8px; padding: .5rem .7rem; margin: 0 0 .6rem; background: var(--paper); }
  table.list.stack td { border: 0; padding: .25rem 0; display: flex; gap: .8rem; align-items: baseline; justify-content: space-between; }
  table.list.stack td::before { content: attr(data-label); color: var(--muted); font-size: .8rem; flex: 0 0 auto; }
  table.list.stack td[data-label=""]::before { content: none; }
  table.list.stack td > * { min-width: 0; }
  table.list.stack td code { word-break: break-all; text-align: right; }
  table.list.stack td.acts { white-space: normal; justify-content: flex-start; gap: 1rem; padding-top: .45rem; border-top: 1px dashed var(--line); margin-top: .25rem; }
  table.list.stack td.acts > * { margin-right: 0; }
  table.list.stack select, table.list.stack input { max-width: 62%; }
  .scroll { overflow-x: visible; }
  .form.inline-form { display: block; }
  .form.inline-form label { display: block; margin-bottom: .5rem; }

  /* ステップの一覧は73行あるので、1行ごとにカードにすると縦に長くなりすぎる。
     「番号＋題名」「日時＋操作」の2行に詰める */
  table.list.stack-compact tr { display: grid; grid-template-columns: auto 1fr; gap: .15rem .6rem; }
  table.list.stack-compact td { display: block; padding: 0; }
  table.list.stack-compact td::before { content: none; }
  table.list.stack-compact td[data-label="番号"] { grid-row: 1; grid-column: 1; color: var(--muted); white-space: nowrap; }
  table.list.stack-compact td[data-label="題名"] { grid-row: 1; grid-column: 2; }
  table.list.stack-compact td[data-label="最終更新"] { grid-row: 2; grid-column: 1; font-size: .78rem; color: var(--muted); white-space: nowrap; }
  table.list.stack-compact td.acts { grid-row: 2; grid-column: 2; display: flex; justify-content: flex-end; gap: 1rem; border-top: 0; margin-top: 0; padding-top: 0; }
}

/* スマホでは、ステップ本文の外枠をやめて紙を画面いっぱいに広げる（2026-09-17 佐藤の指示）。
   1段組では枠が何も仕切っていないのに、左右で約2rem・上下で約2rem を食っていた。
   ついでに題名・要約・道具の行を詰めて、最初の画面に本文が入るようにする */
@media (max-width: 720px) {
  article.step.card, aside.note.card, section.nb-top.card {
    margin-left: calc(-1 * var(--gutter));
    margin-right: calc(-1 * var(--gutter));
    border-left: 0; border-right: 0; border-radius: 0;
    padding: .7rem 1rem 1.1rem;
  }
  article.step > .crumb { margin-bottom: .25rem; }
  article.step h1 { font-size: 1.45rem; margin: .1rem 0 .3rem; }
  article.step > .lead { font-size: 1rem; line-height: 1.6; margin-bottom: .8rem; }
  article.step .tools { font-size: .82rem; gap: .35rem .9rem; padding: .35rem .6rem; }
  nav.pager.top { padding-bottom: .45rem; margin-bottom: .6rem; }
}

/* マイノートも同じ考え方で詰める（2026-09-17 佐藤の指示）。
   ただしノートの各ページ（.nb-page）の枠は残す。あれは「紙」で、
   右に次のページがのぞく作りが枠なしでは成り立たないため。中の余白だけ詰める */
@media (max-width: 720px) {
  nav.nb-nav.card {
    margin-left: calc(-1 * var(--gutter));
    margin-right: calc(-1 * var(--gutter));
    border-left: 0; border-right: 0; border-radius: 0;
    padding: .5rem .8rem;
  }
  .nb-page.card { padding: .8rem .9rem; }
  .nb-item { padding: .7rem 0; }
}
@media (max-width: 640px) { html.js .nb-book { --nb-w: 94%; gap: .7rem; } }

/* ===== スマホの下の帯（tabbar、2026-09-17）=====
   ヘッダに7つ並べると3段になるので、よく使う所だけを親指の届く下に置く。
   パソコンでは出さない。ログイン前も出さない（PHP 側で描かない） */
.tabbar { display: none; }
@media (max-width: 720px) {
  .tabbar {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    background: var(--paper); border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom);   /* iPhone の下の余白 */
  }
  .tabbar a {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem;
    min-height: 54px; padding: .35rem .2rem; color: var(--muted); font-size: .7rem; text-decoration: none;
  }
  .tabbar a:hover { text-decoration: none; }
  .tabbar svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .tabbar a[aria-current] { color: var(--accent); font-weight: 700; }
  /* 帯の下に本文が隠れないように、その分だけ下を空ける */
  body.has-tabbar { padding-bottom: calc(54px + env(safe-area-inset-bottom)); }
  /* ヘッダの並びは下の帯に移したので、ログイン中はヘッダにはロゴだけ出す */
  header.site nav.main-nav { display: none; }
}

/* スマホの文字と余白を一段小さくする（2026-09-17 佐藤の指摘「全体的にデカすぎ」）。
   本文の読みやすさ（16px→15px は既定のまま）は触らず、題名・枠の余白・並びだけ詰める */
@media (max-width: 720px) {
  h1 { font-size: 1.35rem; }
  h2 { font-size: 1.1rem; }
  .card { padding: .9rem 1rem; margin-bottom: .8rem; }
  article.step h1 { font-size: 1.35rem; }
  /* 「こんにちは、◯◯ さん」の枠。名前が長いと2行になって場所を食う */
  .progress.card h1 { font-size: 1.1rem; line-height: 1.4; margin: 0 0 .15rem; overflow-wrap: anywhere; }
  .progress.card .muted { font-size: .85rem; }
  .progress .row { gap: .6rem; }
  .progress .bar { height: 8px; margin-top: .6rem; }
  .progress .btn { font-size: .95rem; padding: .5rem 1.1rem; min-height: 40px; display: inline-flex; align-items: center; }
  /* 章の見出しと、その中のステップ */
  details.chapter { margin-bottom: .6rem; }
  details.chapter > summary { padding: .6rem .8rem; column-gap: .6rem; }
  details.chapter .ch-title { font-size: 1rem; }
  details.chapter .ch-meta { font-size: .78rem; }
  details.chapter > ol.steps { padding: 0 .7rem .7rem; }
  ol.steps li { padding: .7rem .8rem; }
  ol.steps .num { flex: 0 0 1.9rem; height: 1.9rem; font-size: .9rem; }
  .section-title { font-size: 1.2rem; }
}

/* 「こんにちは」の枠（2026-09-17）。ボタンの右に進み具合を置く。
   ボタンの中の「（ステップ10）」は一段小さくして、ボタンの幅を詰める */
.progress .row.go { justify-content: flex-start; gap: .8rem; align-items: center; }
.progress .row.go p { margin: 0; font-size: .88rem; line-height: 1.45; }
.progress .btn small { font-size: .82em; font-weight: 400; margin-left: .05em; }
@media (max-width: 720px) {
  .progress .btn { padding: .45rem .8rem; }
  .progress .row.go { gap: .6rem; }
  .progress .row.go p { font-size: .82rem; }
}

/* ステップ一覧の要約は1行で切る（2026-09-17 佐藤の指示）。目安の分は出さない。
   長い要約で行数が変わると、一覧の高さがそろわず読みづらいため */
ol.steps .body small.sum { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 編集画面の並べ替え（↑↓）。表の中に横並びで置く */
.reorder-inline { display: inline-flex; gap: .2rem; }
.reorder-inline button { border: 1px solid var(--line); background: var(--paper); border-radius: 6px; width: 1.9rem; height: 1.7rem; cursor: pointer; color: var(--muted); font-size: .85rem; }
.reorder-inline button:hover { color: var(--accent); border-color: var(--accent); }

/* ステップ一覧の行間を詰める（2026-09-17 佐藤の指示）。
   本文（.md）の 1.7 は読み物なのでそのまま。一覧は「題名＋一言＋完了日」の3行で、
   間が空くと1件が大きくなりすぎる */
ol.steps .body { line-height: 1.45; }
ol.steps .body .title { line-height: 1.35; }
ol.steps .body small { margin-top: .1rem; }
@media (max-width: 720px) {
  ol.steps li { padding: .55rem .8rem; gap: .7rem; }
  details.chapter > ol.steps li { padding: .55rem .2rem; }
}

/* ヒーローのボタンは、スマホでは小さくして横に並べる（2026-09-17 佐藤の指示）。
   大きいまま縦に積むと、画面の3分の1をボタンだけで使ってしまう */
@media (max-width: 720px) {
  .hero .actions { flex-wrap: nowrap; gap: .5rem; align-items: center; }
  .hero .actions .btn { font-size: .92rem; padding: .45rem .9rem; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; }
  .hero .actions .btn small { font-size: .82em; font-weight: 400; }
}

/* トップの区切り（2026-09-17 佐藤の指摘「ヒーローの次の見出しが唐突」）。
   ① 画像の下端をもっと長く背景色へ溶かす ② 見出しの上に金の短い線を置いて、
   「ここから次の話」と分かるようにする ③ 見出しの下に一言を添える */
.hero::after { height: 30%; background: linear-gradient(180deg, rgba(247,244,238,0) 0%, rgba(247,244,238,.65) 60%, var(--bg) 100%); }
.section-title { position: relative; padding-top: .95rem; margin-top: 2.4rem; }
.section-title::before {
  content: ""; position: absolute; top: 0; left: 0; width: 2.4rem; height: 3px; border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-2), var(--accent-mid));
}
.section-lead { color: var(--muted); margin: -.1rem 0 1.4rem; }
@media (max-width: 720px) {
  .section-title { margin-top: 1.8rem; padding-top: .8rem; }
  .section-lead { font-size: .9rem; margin-bottom: 1.1rem; }
}

/* 節目の札（編集者に／エキスパートに／完了）。スマホでは並べる幅が無く、
   となりの札と重なって読めなかったので、線だけ残して言葉は下の1行にまとめる（2026-09-17） */
.track2-note { display: none; font-size: .8rem; color: var(--muted); margin: .1rem 0 .7rem; }
@media (max-width: 720px) {
  .track2 .mark { font-size: 0; padding-right: 0; }
  .track2 .mark small { display: none; }
  .track2 { padding-top: .6rem; }
  .track2-note { display: block; }
}

/* ===== 本文を書く欄（edit.php）。app.js が textarea を包んで作る =====
   後ろの <pre>（色分け）と前の textarea は、字も余白も折り返しも**同じ**にしておく。
   ずれると、書いた字と色がずれて読めなくなる（2026-09-17） */
.mde { border: 1px solid var(--line); border-radius: 10px; background: #fff; margin-top: .2rem; overflow: hidden; }
.mde-bar { display: flex; flex-wrap: wrap; gap: .25rem; padding: .35rem .4rem; border-bottom: 1px solid var(--line); background: var(--bg); }
.mde-btn { font: inherit; font-size: .8rem; line-height: 1; padding: .4rem .55rem; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); color: var(--ink); cursor: pointer; }
.mde-btn:hover { border-color: var(--accent); background: var(--accent-soft); }
.mde-wrap { position: relative; display: flex; align-items: stretch; overflow: hidden; resize: vertical; }   /* 高さは JS が rows から決める。端をつまんで伸ばせる */
.mde-gutter, .mde-hl, .form.editor textarea.mde-ta, textarea.mde-ta {
  /* 3つとも同じ字・同じ行間・同じ折り返しにする。ここがずれると色と字がずれる。
     .form.editor textarea（.9rem）に負けないよう、選択子を強くしてある */
  font-family: var(--mono); font-size: .88rem; line-height: 1.8;
  white-space: pre-wrap; overflow-wrap: anywhere; word-break: normal; tab-size: 2;
  margin: 0; box-sizing: border-box;
}
.mde-gutter { flex: 0 0 3em; padding: .7rem .5rem .7rem 0; text-align: right; color: #b9b0a2; background: #fbfaf7; border-right: 1px solid var(--line); overflow: hidden; user-select: none; }
.mde-hl { position: absolute; top: 0; left: 3em; right: 0; bottom: 0; padding: .7rem .8rem; overflow: hidden; color: var(--ink); background: transparent; pointer-events: none; }
.form.editor textarea.mde-ta, textarea.mde-ta {
  flex: 1 1 auto; min-width: 0; position: relative; z-index: 1; height: 100%;
  padding: .7rem .8rem; border: 0; border-radius: 0; background: transparent;
  color: transparent; caret-color: var(--ink); resize: none; overflow-y: auto;
}
textarea.mde-ta:focus { outline: 0; }
.mde:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.mde-hl .l { min-height: 1.8em; }
.mde-status { padding: .3rem .6rem; border-top: 1px solid var(--line); background: var(--bg); color: var(--muted); font-size: .76rem; text-align: right; }
/* 色分け。サイトの金を基調に、赤は「正解の印」だけ */
.mde-hl .t-block { color: var(--accent); font-weight: 700; }
.mde-hl .t-head  { color: var(--ink); font-weight: 700; }
.mde-hl .t-code  { color: #1d4f8c; }
.mde-hl .t-quote { color: var(--muted); }
.mde-hl .t-table { color: #4a6b3f; }
.mde-hl .t-mark  { color: var(--accent-mid); font-weight: 700; }
.mde-hl .t-star  { color: var(--err); font-weight: 700; }
.mde-hl .t-bold  { font-weight: 700; }
.mde-hl .t-link  { color: #1d4f8c; text-decoration: underline; }
@media (max-width: 720px) {
  .mde-gutter { flex-basis: 2.4em; }
  .mde-hl { left: 2.4em; }
  .mde-gutter, .mde-hl, textarea.mde-ta { font-size: .82rem; }
}

/* 直す画面の「見え方」と、書き方の見張り（2026-09-17） */
.live { border: 1px solid var(--accent-line); border-radius: 10px; background: var(--paper); margin: 1rem 0; overflow: hidden; }
.live-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .5rem .9rem; background: var(--accent-soft); border-bottom: 1px solid var(--accent-line); }
.live-head h2 { margin: 0; font-size: 1rem; color: var(--accent); }
.live-body { padding: .9rem 1rem; max-height: 34rem; overflow-y: auto; }
.live > p { margin: 0; padding: .4rem .9rem .6rem; border-top: 1px dashed var(--line); }
.err-text { color: var(--err); font-weight: 700; }
.lint { list-style: none; padding: .6rem .8rem; margin: 0 0 .9rem; border-radius: 8px; background: var(--warn-soft); border-left: 4px solid var(--warn); font-size: .9rem; }
.lint li { margin: .15rem 0; }
.lint li.err { color: var(--err); font-weight: 700; }
.lint li.err::before { content: "直す "; }
.lint li.warn::before { content: "ひとこと "; color: var(--muted); font-weight: 400; }
.form .count { display: inline-block; margin-top: .2rem; font-size: .76rem; }
.form .count.over { color: var(--err); font-weight: 700; }

/* 管理者の確認待ち（版10、2026-09-17）。直した中身はもう出ているので、赤ではなく金で知らせる */
.badge.wait { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-line); }
.dot { display: inline-flex; align-items: center; justify-content: center; min-width: 1.25em; height: 1.25em; padding: 0 .3em; margin-left: .3em;
       border-radius: 999px; background: var(--accent); color: #fff; font-size: .68rem; font-style: normal; font-weight: 700; line-height: 1; vertical-align: .1em; }
.tabbar .dot { font-size: .6rem; }
.card.hot { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* 目次（curriculum.php、2026-09-17）。ログイン前でも読める、全ステップの一覧 */
.toc { list-style: none; padding: 0; margin: .2rem 0 1.6rem; }
.toc li { display: grid; grid-template-columns: 2.4rem 1fr; gap: .1rem .4rem; padding: .45rem 0; border-bottom: 1px dashed var(--line); }
.toc li:last-child { border-bottom: 0; }
.toc li b { font-family: var(--mono); color: var(--muted); font-weight: 400; font-size: .9rem; }
.toc .toc-title { font-weight: 600; }
.toc .toc-sum { grid-column: 2; font-size: .88rem; line-height: 1.5; }
.doc h2 small { font-weight: 400; font-size: .8rem; }
@media (max-width: 720px) { .toc li { grid-template-columns: 2rem 1fr; } }

/* 試し読み（ログイン前にステップを読む）の案内（版12、2026-09-19） */
.tryout { border: 2px solid var(--accent-line); background: var(--accent-soft); border-radius: var(--radius); padding: 1.1rem 1.2rem; margin: 1.4rem 0 .4rem; }
.tryout h2 { margin: 0 0 .4rem; font-size: 1.1rem; color: var(--accent); }
.tryout p { margin: .3rem 0; }
.tryout .actions { margin-top: .8rem; }
/* 第1章の途中に出す短い版。読む邪魔にならない大きさにする（2026-09-19） */
.tryout.slim { padding: .8rem .95rem; }
.tryout.slim p { font-size: .92rem; }
.tryout.slim .actions { margin: .6rem 0 0; display: flex; gap: .5rem; flex-wrap: wrap; }
.note.guest-note p { font-size: .92rem; }

/* ヒーローの下の「第1章は登録なしで読めます」（2026-09-19） */
.hero-free { margin: .9rem 0 0; font-size: .95rem; line-height: 1.7; }
.hero-free a { text-decoration: underline; }
.card.tryout { border: 2px solid var(--accent-line); background: var(--accent-soft); }
.card.tryout h2 { margin-top: 0; }
.card.tryout > p:first-child { margin-top: 0; }
.card.tryout .actions { margin-bottom: 0; }
@media (max-width: 720px) { .hero-free { font-size: .88rem; } }