/* 自分の味方ノート 共通スタイル（2026-10-29 デザイン刷新）
   方針：「放課後、マグカップを持ってひと休み」。自己チェックのアプリとそろえる。
   色はアルビーから：毛のミント → 紙の色、パーカーの紺 → 文字。「味方」の色は葉っぱの緑。
   見出しはやわらかい教科書体（Klee One）、本文は読みやすいUD書体。
   目立たせるのは「気持ちの強さの帯」だけ。ほかは静かにする。 */
:root {
  --paper: #EDF3EF;
  --sheet: #FBFDFC;
  --ink: #24304E;
  --ink-soft: #5B6579;
  --line: #D2DDD7;
  --mikata: #3D7F60;
  --mikata-pale: #E1EFE6;
  --tone-up: #8C6100; /* 白地とのコントラスト 4.5:1 以上 */
  --tone-down: #A8446B;
  --tone-mid: #5E6E87;
  --warn-pale: #FBF1DA;
  --radius-s: 10px;
  --radius-m: 18px;
  --radius-l: 24px;
  --fs-body: 1.0625rem;
  --fs-student: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  --font: "BIZ UDPGothic", "BIZ UDPゴシック", "BIZ UDゴシック", "Yu Gothic UI", "Meiryo", sans-serif;
  --hand: "Klee One", "UD デジタル 教科書体 N-R", "UD Digi Kyokasho N-R", serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.8;
  font-feature-settings: "palt" 0;
}
h1, h2, h3, h4 { line-height: 1.4; font-feature-settings: "palt" 1; letter-spacing: .02em; }
/* 大きな見出しだけ教科書体にする（小さい見出し・本文はUD書体のまま） */
h1, h2, .kai-no, .scene-title { font-family: var(--hand); font-weight: 600; letter-spacing: .04em; }
a { color: var(--mikata); text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--mikata); outline-offset: 2px; }
rt { font-size: .55em; }
.muted { color: var(--ink-soft); }
.wrap { max-width: 72rem; margin: 0 auto; padding: 0 16px; }
.measure { max-width: 42em; }

/* ---------- 上の帯 ---------- */
.site-head {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.site-head .wrap {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px;
  min-height: 56px;
}
.site-name {
  font-weight: 700; font-size: 1.125rem; color: var(--ink); text-decoration: none;
  display: flex; align-items: center; gap: 10px;
}
.site-name .mark {
  width: 26px; height: 26px; flex: none;
}
.site-nav { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-left: auto; font-size: .95rem; }
.site-nav a { color: var(--ink-soft); text-decoration: none; padding: 6px 0; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--ink); text-decoration: underline; }

.notice {
  background: var(--mikata-pale);
  color: var(--ink);
  font-size: .9rem;
  padding: 6px 0;
}

/* ---------- 回のページ：見出し ---------- */
.kai-head { padding: 28px 0 8px; }
.kai-head .wrap { display: grid; grid-template-columns: auto 1fr; gap: 0 20px; align-items: end; }
.kai-no {
  grid-row: span 2;
  font-size: clamp(3rem, 2rem + 4vw, 5rem); font-weight: 700; line-height: 1;
  color: var(--mikata);
}
.kai-no small { display: block; font-size: .9rem; font-weight: 700; color: var(--ink-soft); margin-bottom: 4px; }
.kai-meta { margin: 0; color: var(--ink-soft); font-size: .95rem; }
.kai-title { margin: 0; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); }
.type-tag {
  display: inline-block; padding: 0 10px; margin-right: 6px; border-radius: 999px;
  border: 1.5px solid currentColor; font-size: .85rem; font-weight: 700;
}
.type-tag.group { color: var(--tone-up); }
.type-tag.solo { color: var(--ink-soft); }
.type-tag.must3 { color: #fff; background: var(--ink); border-color: var(--ink); }

/* 切りかえ */
.mode-bar { position: sticky; top: 0; z-index: 5; background: rgba(237, 243, 239, .94); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border-bottom: 1px solid var(--line); }
.mode-bar .wrap { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding-top: 10px; padding-bottom: 10px; }
.mode-btn {
  font: inherit; font-weight: 700; cursor: pointer;
  padding: 8px 18px; border-radius: 999px; border: 2px solid var(--ink);
  background: var(--sheet); color: var(--ink);
}
.mode-btn[aria-pressed="true"] { background: var(--ink); color: #fff; }
.ws-download {
  margin-left: auto; font-weight: 700; text-decoration: none;
  padding: 8px 18px; border-radius: 999px; border: 2px solid var(--mikata);
  color: var(--mikata); background: var(--sheet);
}
.ws-download:hover { background: var(--mikata-pale); }

/* hidden 属性は、display を指定した部品でも必ず隠す */
[hidden] { display: none !important; }

/* ---------- 先生用ガイド ---------- */
.guide { padding: 24px 0 48px; }
.guide .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); gap: 32px; align-items: start; }
.guide-main > * + * { margin-top: 28px; }
.guide-side { position: sticky; top: 76px; display: grid; gap: 16px; }
.panel { background: var(--sheet); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 18px 20px; }
.panel h3 { margin: 0 0 8px; font-size: 1rem; color: var(--ink-soft); }
.panel p { margin: 0; }
.jiritsu-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.jiritsu-list li { display: grid; }
.kubun { font-weight: 700; }
.koumoku { font-size: .95rem; }
.copy-btn {
  margin-top: 10px; font: inherit; font-size: .85rem; cursor: pointer;
  border: 1px solid var(--line); background: var(--paper); color: var(--ink);
  padding: 4px 12px; border-radius: var(--radius-s);
}
.copy-btn[data-done] { border-color: var(--mikata); color: var(--mikata); }
.guide h2 { font-size: 1.35rem; margin: 0 0 8px; }
/* セリフ例：番号の丸の右に、文をそろえて置く（左の太い線は使わない） */
.serifu { margin-bottom: 20px; }
.serifu h4 { margin: 0 0 4px; font-size: 1rem; display: flex; gap: 10px; align-items: center; }
.serifu p { margin: 0; padding-left: calc(1.6em * .85 + 10px); }
.step-no {
  display: inline-grid; place-items: center; width: 1.6em; height: 1.6em; border-radius: 50%;
  background: var(--mikata); color: #fff; font-size: .85rem;
}
.guide ul { padding-left: 1.2em; margin: 0; }
.backdraft { background: var(--warn-pale); border-radius: var(--radius-m); padding: 16px 20px; }
.backdraft h2 { font-size: 1.05rem; }
.check-note { background: var(--sheet); border: 1px dashed var(--mikata); border-radius: var(--radius-m); padding: 12px 16px; }
.kai-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; font-size: .95rem; }

/* ---------- 生徒と見る画面 ---------- */
.student { padding: 16px 0 40px; font-size: var(--fs-student); line-height: 1.75; }
.stage {
  background: var(--sheet); border: 1px solid var(--line); border-radius: var(--radius-l);
  padding: clamp(20px, 3vw, 44px); min-height: 60vh;
}
.progress { list-style: none; display: flex; gap: 6px; padding: 0; margin: 0 0 18px; font-size: .8em; }
.progress li {
  flex: 1; padding-top: 8px; color: var(--ink-soft); position: relative;
}
/* 進み具合の細い帯（角を丸くして、やわらかく） */
.progress li::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; border-radius: 3px; background: var(--line); }
.progress li[aria-current="step"] { color: var(--ink); font-weight: 700; }
.progress li[aria-current="step"]::before { background: var(--mikata); }
.progress li.done::before { background: #A9CDB9; }
.step h2 { margin: 0 0 .6em; font-size: 1.3em; }
.step p { margin: 0 0 .7em; max-width: 34em; }
.scene-title { font-size: 1.05em; margin: 0 0 .5em; color: var(--mikata); }
.scene-fig { margin: 1em 0 0; }
.scene-fig svg { width: 100%; max-width: 760px; height: auto; display: block; }

/* 生徒と見ている間は、回の見出しを小さくして、内容を1画面に収めやすくする */
.is-student .kai-head { padding: 10px 0 4px; }
.is-student .kai-no { font-size: 2.2rem; }
.is-student .kai-no small { display: none; }
.is-student .kai-title { font-size: 1.35rem; }
.is-student .scene-fig svg { max-width: 980px; }

/* 気持ちカード */
.feel-hint { font-size: .85em; color: var(--ink-soft); }
.feel-cards { display: flex; flex-wrap: wrap; gap: 10px; margin: .4em 0 .6em; }
.feel-card {
  font: inherit; font-size: .9em; cursor: pointer; padding: .3em .9em;
  border-radius: 999px; border: 2px solid var(--line); background: var(--sheet); color: var(--ink);
}
.feel-card::before { content: ""; display: inline-block; width: .55em; height: .55em; border-radius: 50%; margin-right: .45em; vertical-align: .08em; background: var(--tone); }
.feel-card[data-tone="up"] { --tone: var(--tone-up); }
.feel-card[data-tone="down"] { --tone: var(--tone-down); }
.feel-card[data-tone="mid"] { --tone: var(--tone-mid); }
.feel-card[aria-pressed="true"] { border-color: var(--tone); background: color-mix(in srgb, var(--tone) 12%, white); font-weight: 700; }
.more-btn { font: inherit; font-size: .8em; background: none; border: none; color: var(--mikata); cursor: pointer; text-decoration: underline; padding: .3em 0; }
.feel-limit { min-height: 1.6em; font-size: .85em; color: var(--tone-down); font-weight: 700; margin: 0; }

/* 気持ちの強さの帯（このサイトでいちばん目立たせる部品） */
.strengths { display: grid; gap: 18px; margin-top: .6em; }
.strength { display: grid; grid-template-columns: minmax(6em, auto) 1fr 3.2em; gap: 6px 16px; align-items: center; }
.strength .name { font-weight: 700; }
.strength .num { font-weight: 700; font-size: 1.2em; text-align: right; font-variant-numeric: tabular-nums; }
.strength input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 1.4em; margin: 0;
  border-radius: 999px; cursor: pointer;
  background: linear-gradient(to right,
    color-mix(in srgb, var(--tone) calc(25% + var(--v) * .75%), white) 0 calc(var(--v) * 1%),
    var(--paper) calc(var(--v) * 1%) 100%);
  border: 1.5px solid color-mix(in srgb, var(--tone) 40%, var(--line));
}
.strength input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 1.6em; height: 1.6em; border-radius: 50%;
  background: var(--sheet); border: 3px solid var(--tone); box-shadow: 0 1px 2px rgba(35, 48, 90, .25);
}
.strength input[type="range"]::-moz-range-thumb {
  width: 1.4em; height: 1.4em; border-radius: 50%; background: var(--sheet); border: 3px solid var(--tone);
}
.strength[data-tone="up"] { --tone: var(--tone-up); }
.strength[data-tone="down"] { --tone: var(--tone-down); }
.strength[data-tone="mid"] { --tone: var(--tone-mid); }
.scale { grid-column: 2; display: flex; justify-content: space-between; font-size: .6em; color: var(--ink-soft); }

/* 考える・一言 */
.q { margin-bottom: 1em; }
.q label { display: block; font-weight: 700; margin-bottom: .3em; }
.q-no { display: inline-block; margin-right: .5em; color: var(--mikata); }
textarea, .word-input {
  width: 100%; font: inherit; font-size: .9em; color: var(--ink);
  border: 2px solid var(--line); border-radius: var(--radius-s); padding: .5em .7em; background: #fff;
}
textarea:focus, .word-input:focus { border-color: var(--mikata); outline: none; }
.word-examples { display: flex; flex-wrap: wrap; gap: 10px; margin: .4em 0 .8em; }
.word-example {
  font: inherit; font-size: .85em; cursor: pointer; text-align: left;
  padding: .35em .9em; border-radius: var(--radius-s); border: 1.5px dashed var(--mikata);
  background: var(--sheet); color: var(--ink);
}
.word-input { font-size: 1.15em; font-weight: 700; padding: .7em .9em; border-color: var(--mikata); }

/* 「前へ・次へ」は画面の下に固定して、内容が長くてもタップできるようにする */
.step-nav {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 18px;
  position: sticky; bottom: 0; z-index: 4;
  background: var(--sheet); border-top: 1px solid var(--line);
  padding: 12px 0; margin-bottom: calc(-1 * clamp(20px, 3vw, 44px)); padding-bottom: clamp(12px, 2vw, 24px);
}
/* 今日の大事なこと：アルビーがふきだしで伝える */
.key-row { display: grid; grid-template-columns: clamp(76px, 9vw, 120px) 1fr; gap: 0 18px; align-items: center; margin: 1em 0 .6em; }
.key-row .alby { width: 100%; height: auto; display: block; }
.key-point {
  position: relative; margin: 0; padding: .8em 1.1em; border-radius: var(--radius-l);
  background: var(--mikata-pale);
}
.key-row .key-point::before {
  content: ""; position: absolute; left: -12px; top: 50%; margin-top: -12px;
  border: 12px solid transparent; border-left: 0; border-right-color: var(--mikata-pale);
}
.key-point h3 { margin: 0 0 .3em; font-size: .8em; color: var(--mikata); }
.key-point p { margin: 0; font-weight: 700; }
.key-point p + p { margin-top: .3em; }
.base-words { margin: 14px 0 0; font-size: .95rem; color: var(--ink-soft); text-align: center; }
.step-nav button {
  font: inherit; font-size: .85em; font-weight: 700; cursor: pointer;
  padding: .45em 1.3em; border-radius: 999px; border: 2px solid var(--ink); background: var(--sheet); color: var(--ink);
}
.step-nav button.primary { background: var(--ink); color: #fff; }
.step-nav button:disabled { opacity: .35; cursor: default; }
.step-count { font-size: .75em; color: var(--ink-soft); }

/* ---------- ふつうのページ（トップ・はじめて・年間計画） ---------- */
.page { padding: 32px 0 64px; }
.page h1 { font-size: clamp(1.7rem, 1.2rem + 1.7vw, 2.6rem); margin: 0 0 12px; }
.page h2 { font-size: 1.5rem; margin: 2.2em 0 .5em; }
.page h3 { font-size: 1.1rem; margin: 1.5em 0 .4em; }
.page p, .page li { max-width: 42em; }
.lead { font-size: 1.1rem; color: var(--ink-soft); }

.site-foot { border-top: 1px solid var(--line); padding: 20px 0 32px; font-size: .85rem; color: var(--ink-soft); }
.site-foot p { margin: 0 0 4px; }

@media (max-width: 860px) {
  .guide .wrap { grid-template-columns: 1fr; }
  .guide-side { position: static; order: -1; }
  .ws-download { margin-left: 0; }
}
@media (max-width: 520px) {
  /* せまい画面：アルビーはふきだしの上に小さく置き、ふきだしの先を上に向ける */
  .key-row { grid-template-columns: 1fr; }
  .key-row .alby { width: 72px; margin: 0 0 10px 6px; }
  .key-row .key-point::before {
    left: 28px; top: -12px; margin-top: 0;
    border: 12px solid transparent; border-top: 0; border-bottom-color: var(--mikata-pale);
  }
  .strength { grid-template-columns: 1fr 3em; }
  .strength .name { grid-column: 1 / -1; }
  .strength input[type="range"] { grid-column: 1; }
  .scale { grid-column: 1; }
}
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; }
}