/* AI高橋くん。決めごとは docs/スタイルガイド.md（3分ロープレからの複製）。
   色・書体・角・余白は、あちらと同じ値をそのまま使う。**ここで新しい値を作らない。** */
:root{
  /* 地と構造。『無敗営業』表紙の青 */
  --navy:#00469E; --navy-2:#003A85; --navy-line:#2E6FC0;
  --paper:#fff; --ink:#12161F; --ink-2:#555E6D; --ink-3:#8B939F;
  --line:#E2E5EB;        /* 仕切りの細罫 */
  --line-2:#8B939F;      /* 入力欄の下線。白地で 3.2:1 */
  --surface:#EDF0F7;     /* 自分（相談する側）の発言の面 */
  /* 進む＝金。白地では文字に使えない（2.1:1）ので、明るい地用と暗い地用を対で持つ */
  --gold:#D8A537; --gold-ink:#8A6410; --gold-line:#B4862B; --on-gold:#12161F;
  --on-navy:#fff; --on-navy-2:#C6D2EE; --on-navy-3:#AEC0E4; --gold-on-navy:#E8C46A;
  --error:#B3261E;
  --f-g:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic",system-ui,sans-serif;
  --f-m:"Zen Old Mincho","Hiragino Mincho ProN",serif;
  --f-n:"IBM Plex Sans","Zen Kaku Gothic New",system-ui,sans-serif;
  --r:4px; --pill:999px; --pad:20px;
  --t-fast:120ms; --t-slow:260ms;
  --e-in:cubic-bezier(.2,0,0,1); --e-out:cubic-bezier(.4,0,1,1);
}
*{ box-sizing:border-box }
html{ color-scheme:light }   /* v1 はライトのみ。OSのダークで勝手に反転させない */
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--f-g); font-size:16px; line-height:1.75;
  -webkit-text-size-adjust:100%;
}
:focus-visible{ outline:3px solid #F6CF00; outline-offset:1px; box-shadow:0 0 0 5px rgba(0,0,0,.85) }
.num{ font-family:var(--f-n); font-feature-settings:"tnum" 1 }

/* ---------- 帯 ---------- */
header{
  background:var(--navy); color:var(--on-navy);
  padding:14px var(--pad); border-bottom:1px solid var(--navy-line);
  position:sticky; top:0; z-index:3;
  display:flex; align-items:center; gap:14px;
}
/* 「AI高橋くん」という名前なら、顔があるほうが自然（2026-09-21 ご指定）。
   **角は付けない。** 写真は0、がスタイルガイドの決めごと（§5） */
header .kao{
  width:48px; height:48px; flex:none; object-fit:cover; object-position:50% 20%;
  display:block;
}
header h1{
  margin:0; font-size:18px; line-height:1.4; font-weight:700;
  font-feature-settings:"palt" 1;
}
header p{ margin:2px 0 0; font-size:14px; color:var(--on-navy-3); letter-spacing:.06em;
  word-break:auto-phrase }
/* ツール一覧へ（DECISIONS §6.9）。帯の右に、文字のリンク。押せる広さは縦横44px以上（幅は文字で84px）。
   主役は相談なので、目立たせすぎない（帯の上のふだんの文字の色と下線だけ）。
   **語の途中で折らない**（keep-all）。スマホの幅で「ツール一／覧へ」「押す／と移ります」と割れた（10/9、描いて見つけた）。
   折ってよい所は、app.js が <wbr> と <br> で句の切れ目にだけ置く */
header .to-tools{
  margin-left:auto; flex:0 1 auto; min-height:44px;
  display:inline-flex; align-items:center; justify-content:flex-end;
  font-size:14px; line-height:1.5; color:var(--on-navy); text-align:right;
  text-decoration:underline; text-underline-offset:3px; word-break:keep-all;
}
header .to-tools:hover{ color:var(--on-navy-2) }
header button.to-tools{ background:none; border:0; padding:0; font-family:inherit; cursor:pointer }   /* 「トップに戻る」はボタン。見た目は「ツール一覧へ」と同じ文字のリンク */
/* 合言葉の画面の「ツール一覧へ」（§6.9。初めて来た人には、ここが最初の画面）。「入る」の下に、白地のふだんの文字のリンクで */
.pass .to-tools{
  display:inline-flex; align-items:center; min-height:44px; margin-top:16px; padding:0;   /* 左端を「入る」にそろえる */
  font-size:14px; color:var(--ink-2); text-decoration:underline; text-underline-offset:4px; word-break:keep-all;
}
.pass .to-tools:hover{ color:var(--ink) }

main{ max-width:680px; margin:0 auto; padding:24px var(--pad) 0 }

/* 何のツールかの説明。**面で囲まない。下の罫だけで仕切る**（スタイルガイド §5） */
.annai{ margin:0 0 24px; padding:0 0 20px; border-bottom:1px solid var(--line) }
.annai p{ margin:0; font-size:15px; line-height:1.8; color:var(--ink-2); word-break:auto-phrase }
.annai .chui{ margin-top:10px; font-size:14px; color:var(--ink-2) }

/* ---------- 会話 ---------- */
.talk{ display:flex; flex-direction:column; gap:24px }
.turn{ animation:rise var(--t-slow) var(--e-in) both }
@keyframes rise{ from{ opacity:0; transform:translateY(6px) } to{ opacity:1; transform:none } }

/* 相手（高橋くん）の言葉は明朝。**声の主が入れ替わったことが、読む前に分かる** */
.said{
  font-family:var(--f-m); font-weight:700; font-size:17px; line-height:1.85;
  font-feature-settings:"palt" 1; word-break:auto-phrase;
  white-space:pre-wrap; margin:0;
}
/* 行頭の「をぶら下げる。**「で始まる文にだけ**付ける（app.js が見て付ける）。
   全部に付けると、かぎ括弧で始まらない文の2行目以降が一字ぶん右にずれて見える（描画して気づいた） */
.said.kagi{ text-indent:-0.55em; padding-left:0.55em }
/* 自分の発言はゴシック。面で置く（囲みが許されている唯一の形の、明るい版） */
.mine{
  background:var(--surface); border-radius:var(--r); padding:12px 16px;
  white-space:pre-wrap; word-break:auto-phrase; margin:0; font-size:16px;
}
.turn.me{ align-self:flex-end; max-width:88% }

/* 出典。**書名と章はサーバが決めている。画面では触らない** */
.genten{ margin:10px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:4px }
.genten li{
  font-size:14px; color:var(--ink-2); line-height:1.6;
  padding-top:8px; border-top:1px solid var(--line);   /* 面で囲まない。罫で仕切る */
}
.genten b{ color:var(--ink); font-weight:700 }
.genten .book{ font-family:var(--f-m); font-feature-settings:"palt" 1 }

/* ---------- 選択肢 ---------- */
/* 「選ぶ」行なので山形（>）は付けない（画面が変わらないため。スタイルガイド §1⑥） */
.choices{ display:flex; flex-wrap:wrap; gap:8px; margin:16px 0 0 }
.choice{
  font:inherit; font-size:15px; font-weight:700; color:var(--navy);
  background:var(--paper); border:1px solid var(--navy-line); border-radius:var(--pill);
  padding:10px 16px; min-height:44px; cursor:pointer;
  transition:background var(--t-fast) var(--e-in), transform var(--t-fast) var(--e-in);
}
.choice:hover{ background:var(--surface) }
.choice:active{ transform:scale(.985) }
/* 「どれも違う」。選択肢と同じ行に置くが、**枠を外して文字リンクにする**。
   等幅のボタンを並べると、どれが本筋か分からなくなる（スタイルガイド §5「使わない形」）。
   ここに置くことで、「選べなければ自由記入」が、読まなくても形で分かる */
.choice.free{
  border-color:transparent; background:transparent; color:var(--ink-2);
  font-weight:400; text-decoration:underline; text-underline-offset:4px; padding:10px 8px;
}
.choice.free:hover{ background:transparent; color:var(--ink) }

/* ---------- 書く ---------- */
.composer{
  position:sticky; bottom:0; background:var(--paper);
  margin-top:8px; padding:16px var(--pad) 24px;
}
/* **上に仕切りの線を引かない。** 選択肢と自由記入は「どちらでもよい」関係なので、
   線で切ると別物に見える（2026-09-21、高橋さんのご指摘）。
   ただし会話が下に流れ込むと読みにくいので、入力欄が浮いているときだけ、薄く線を出す */
.composer.floating{ border-top:1px solid var(--line) }
.composer .inner{ max-width:680px; margin:0 auto }
textarea{
  width:100%; font:inherit; font-size:16px; line-height:1.7; color:var(--ink);
  background:transparent; border:0; border-bottom:1px solid var(--line-2);   /* 枠で囲まない。下線だけ */
  border-radius:0; padding:8px 0; resize:none; min-height:44px; max-height:180px;
  overflow-y:auto;
}
textarea::placeholder{ color:var(--ink-3) }
textarea:focus{ border-bottom-color:var(--navy) }
/* 危ない語があるときだけの1行（DECISIONS §3）。**赤にしない。**地の文と同じ灰色で、送るのは止めない */
.leak-hint{ margin:6px 0 0; font-size:13px; line-height:1.7; color:var(--ink-2) }

.row{ display:flex; align-items:center; gap:16px; margin-top:16px }
.go{
  font:inherit; font-size:17px; font-weight:700; color:var(--on-gold);
  background:var(--gold); border:1px solid var(--gold-line); border-radius:var(--r);
  padding:0 24px; min-height:52px; cursor:pointer; margin-left:auto;
  transition:filter var(--t-fast) var(--e-in), transform var(--t-fast) var(--e-in);
}
.go:hover{ filter:brightness(.98) }
.go:active{ transform:scale(.985) }
.go[disabled]{ opacity:.45; cursor:default; transform:none }

/* ---------- 伏せ字 ---------- */
.mask{ margin:0 0 4px }
.mask p{ margin:0 0 8px; font-size:14px; color:var(--ink-2) }
.mask .chips{ display:flex; flex-wrap:wrap; gap:8px }
.chip{
  font:inherit; font-size:14px; font-weight:700; border-radius:var(--pill);
  padding:7px 14px; min-height:44px; cursor:pointer; border:1px solid var(--line-2);
  background:var(--paper); color:var(--ink-2);
  transition:background var(--t-fast) var(--e-in);
}
.chip[aria-pressed="true"]{ background:var(--navy); border-color:var(--navy); color:var(--on-navy) }
.chip .to{ font-family:var(--f-n); font-weight:600 }

/* ---------- ひとつ戻る ---------- */
/* 補助なので枠を外して文字リンクにする（スタイルガイド §5「使わない形」） */
.back{
  font:inherit; font-size:14px; color:var(--ink-2); background:transparent; border:0;
  padding:10px 8px; min-height:44px; cursor:pointer;
  text-decoration:underline; text-underline-offset:4px;
}
.back:hover{ color:var(--ink) }

/* ---------- あと何回でまとめるか ---------- */
/* **終わりが見えないと、人は続けられない。** 色だけで伝えず、必ず文字を添える */
.susumi{
  display:flex; align-items:center; gap:8px; margin:12px 0 0;
  font-size:14px; color:var(--ink-2);
}
.susumi .dots{ display:flex; gap:5px }
.susumi .dots i{
  width:7px; height:7px; border-radius:var(--pill); background:var(--line);
  transition:background var(--t-fast) var(--e-in);
}
.susumi .dots i.on{ background:var(--gold-ink) }   /* 白地なので濃い金（5.4:1） */

/* ---------- ここまでのまとめ ---------- */
/* 面で囲まない。**上下の罫で「ひと区切り」を示す**（スタイルガイド §5） */
.matome{
  border-top:1px solid var(--ink); border-bottom:1px solid var(--line);
  padding:20px 0 24px; margin-top:8px;
}
.matome.machi{ border-bottom:0; padding-bottom:20px }
.matome .label{
  margin:0 0 10px; font-size:14px; font-weight:700; color:var(--ink-2);
  letter-spacing:.1em; text-indent:.1em;
}
.matome .label.next{ margin-top:24px }
.matome ol{ margin:0; padding:0; list-style:none; counter-reset:t }
.matome ol li{
  counter-increment:t; position:relative; padding-left:28px; margin:0 0 12px;
  font-size:16px; line-height:1.75; word-break:auto-phrase;
}
.matome ol li::before{
  content:counter(t); position:absolute; left:0; top:0;
  font-family:var(--f-n); font-weight:600; font-size:15px; color:var(--gold-ink);
}
.matome .roleplay{ margin:0 0 14px; font-size:16px; line-height:1.75; word-break:auto-phrase }
/* 3分ロープレへの行。**画面が変わる**ので、選ぶ行とは見た目を分ける（スタイルガイド §1⑥） */
.matome a.choice{ display:inline-block; text-decoration:none }
.matome a.choice::after{ content:" ›"; font-family:var(--f-n); font-weight:600 }
.matome .genten{ margin-top:20px }
/* コピーできなかったときに出す、写し取り用の欄。
   **枠で囲んだ入力欄ではなく**、自分の発言と同じ面に置く（読むものであって、書くものではない） */
.utsusu{
  width:100%; margin:16px 0 0; padding:12px 16px; font:inherit; font-size:14px; line-height:1.7;
  color:var(--ink); background:var(--surface); border:0; border-radius:var(--r); resize:vertical;
}

/* ---------- 待っているあいだ ---------- */
.waiting{ display:flex; align-items:center; gap:10px; color:var(--ink-2); font-size:14px }
.dot{ width:8px; height:8px; border-radius:var(--pill); background:var(--gold); animation:blink 1.1s infinite }
@keyframes blink{ 0%,100%{ opacity:.25 } 50%{ opacity:1 } }

/* ---------- 知らせ・誤り ---------- */
.notice{
  background:var(--navy); color:var(--on-navy); border-radius:var(--r);
  padding:16px; margin:16px 0 0; font-size:15px; line-height:1.7;
}
.notice b{ color:var(--gold-on-navy) }
.wrong{ color:var(--error); font-size:14px; margin:8px 0 0 }

/* ---------- 合言葉 ---------- */
.pass{ max-width:420px; margin:48px auto; padding:0 var(--pad) }
.pass h2{ font-size:24px; margin:0 0 8px; font-feature-settings:"palt" 1 }
.pass h2::before{ content:""; display:block; width:34px; height:3px; background:var(--gold); margin-bottom:12px }
.pass input{
  width:100%; font:inherit; font-size:17px; padding:10px 0; margin-top:16px;
  border:0; border-bottom:1px solid var(--line-2); background:transparent; border-radius:0;
}
.pass input:focus{ border-bottom-color:var(--navy) }
.pass input.bad{ border-bottom:2px solid var(--error) }
.pass .go{ margin:24px 0 0; width:100% }

/* もとにしている本。**最初の案内に1回だけ**添える（画面の下の常設はやめた）。
   面で囲まない。罫と余白で仕切る（スタイルガイド §5） */
.books{ margin:24px 0 0 }
.books p{ margin:0 0 8px; font-size:14px; line-height:1.7; color:var(--ink-2) }
.books ul{ margin:0; padding:0; list-style:none }
.books li{
  font-family:var(--f-m); font-weight:700; font-size:15px; line-height:1.7;
  color:var(--ink); font-feature-settings:"palt" 1; word-break:auto-phrase;
  padding:7px 0; border-top:1px solid var(--line);
}

footer{
  max-width:680px; margin:0 auto; padding:24px var(--pad) 32px;
  font-size:14px; color:var(--ink-2); border-top:1px solid var(--line);
}
footer p{ margin:0 0 6px }

/* 気づいたことを送る窓口。置き方の原本は taiwa-roleplay の .fb。
   **囲まない。色を足さない。** 罫1本の下に静かに置く */
.fb{ margin:18px 0 0 }
.fb:empty{ display:none }              /* 窓口を出さないとき、罫だけが残らないように */
.fb::before{ content:""; display:block; height:1px; background:var(--line); margin-bottom:18px }
.fb-line{ margin:0 }
.fb-open, .fb-close, .fb-mic{
  font:inherit; font-size:14px; color:var(--ink-2); background:transparent; border:0;
  padding:10px 0; min-height:44px; cursor:pointer;
  text-decoration:underline; text-underline-offset:4px;
}
.fb-open:hover, .fb-close:hover, .fb-mic:hover{ color:var(--ink) }
.fb-form{ display:grid; gap:12px }
.fb-text{
  width:100%; font:inherit; font-size:16px; line-height:1.7; color:var(--ink);
  background:transparent; border:0; border-bottom:1px solid var(--line-2);  /* 囲まない。下線だけ */
  border-radius:0; padding:8px 0; resize:vertical;
}
.fb-text:focus{ border-bottom-color:var(--navy) }
.fb-note{ margin:0; font-size:14px; line-height:1.85; color:var(--ink-2) }
.fb-err{ margin:0; font-size:14px; line-height:1.8; color:var(--error) }
.fb-foot{ display:flex; align-items:center; gap:18px }
.fb-send{
  font:inherit; font-size:16px; font-weight:700; color:var(--on-gold);
  background:var(--gold); border:1px solid var(--gold-line); border-radius:var(--r);
  padding:0 22px; min-height:48px; cursor:pointer; margin-left:auto;
}
.fb-send[disabled]{ opacity:.45; cursor:default }
.fb-thanks{ margin:0; font-size:15px; line-height:1.9; color:var(--ink-2) }
/* 読み上げにだけ届く文。画面には出さない */
.sr-only{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0 }

/* TORiX への導線。決めごとの原本は muhaieigyo-top/DECISIONS.md §6.4、
   置き方の原本は taiwa-roleplay の .offer（`39e11f6`）。**囲まない。色を足さない。**
   外すときは、この3つの決まりごと（.offer）と index.html の <p class="offer"> を消す */
.offer{ margin:0 0 14px; font-size:14px; line-height:1.9; color:var(--ink-2) }
.offer::before{ content:""; display:block; height:1px; background:var(--line); margin-bottom:18px }
.offer a{ color:var(--navy); text-decoration:underline; text-underline-offset:4px;
  white-space:nowrap }   /* 社名と矢印を離さない。矢印だけが次の行へ落ちるのを防ぐ */
.offer a:hover{ color:var(--navy-line) }
.offer .ext{ vertical-align:-1px; margin-left:5px }
.kiyaku{ display:flex; gap:20px }
.kiyaku a{ color:var(--ink-2); text-underline-offset:4px }

[hidden]{ display:none !important }   /* 表示の指定に負けないようにする（書くロープレで踏んだ罠） */

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important }
}