/* ═══════════════════════════════════════════════════════════════════
   TORiX社内向けツール — 入口
   お客様向けの入口（muhaieigyo-top/public/style.css）から、使うところだけを写した。
   色は同じ3つ（金＝進む／濃紺＝地と構造／白＝本文）。計画ツールも同じ濃紺を使っている。
   **薄い色の面のカードを作らない。左だけ太い縦罫を引かない**（muhaieigyo-top/DECISIONS.md §5）
   ═══════════════════════════════════════════════════════════════════ */

[hidden]{display:none !important}

:root{
  --navy:#00469E; --navy-2:#003A85;
  --paper:#fff; --ink:#12161F; --ink-2:#555E6D; --ink-3:#8B939F;
  --line:#E2E5EB;
  --gold:#D8A537; --gold-line:#B4862B; --on-gold:#12161F;
  --on-navy:#fff;
  --error:#B3261E;
  --f-g:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic",system-ui,sans-serif;
}

*{box-sizing:border-box}
/* ライトのみ。OSのダークで入力欄・スクロールバーが反転しないように（お客様向けの入口と同じ1行） */
html{color-scheme:light; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--f-g); font-size:16px; line-height:1.85;
}
.wrap{max-width:720px; margin:0 auto; padding:0 16px}

/* ── 帯 ───────────────────────────────────────────── */
.bar{background:var(--navy); color:var(--on-navy); padding:14px 0}
.brand{font-weight:700; letter-spacing:.06em}

/* ── 見出し ───────────────────────────────────────── */
h1{font-size:26px; line-height:1.5; margin:40px 0 0}
.lead{margin:12px 0 0; color:var(--ink-2)}
a{color:var(--navy)}

/* ── 道具の一覧 ───────────────────────────────────── */
/* 面で囲まない。罫と余白だけで区切る。押せる広さは、行の全体 */
/* 段（要望036：業務ツールとリンク集を見た目で分ける）。段の見出しは濃紺の太字に、上に金の短い罫（3分ロープレの h2.lead と同じ形）。
   段と段のあいだは大きく空ける。面で囲まない（§5）。3つ目の段（過去のツール・リンク集）も同じ形で足せる */
.group{margin:44px 0 0}
.group h2{font-size:19px; line-height:1.5; margin:0; color:var(--navy); letter-spacing:.04em}
.group h2::before{content:""; display:block; width:34px; height:3px; border-radius:999px; background:var(--gold); margin-bottom:12px}
.group-note{margin:6px 0 0; color:var(--ink-2); font-size:14px}
.tools{margin:14px 0 0; border-top:1px solid var(--line)}
.tool{
  display:block; text-decoration:none; color:inherit;
  border-bottom:1px solid var(--line); padding:20px 0;
}
.tool:hover .name,.tool:focus-visible .name{color:var(--navy)}
/* 中身は span のまま（a の中に div を入れない）。**必ず縦に積む**（既定の inline だと1行につながる。9/21 お客様向けで発見） */
.name,.for{display:block}
.name{font-size:17px; font-weight:700}
.for{margin:7px 0 0; color:var(--ink-2); font-size:14px}
/* 矢印の前は改行しない空き。矢印だけが次の行に落ちない（10/10、練習設定の行で落ちた） */
.for{text-wrap:pretty}
.for::after{content:"\00a0→"; color:var(--navy)}
.none{margin:26px 0 0; color:var(--ink-2)}

/* 下に余白を大きく取る。iPhone のアプリ内ブラウザで、いちばん下が帯の下に切れる（お客様向けの入口の要望006・008） */
main.wrap{padding-bottom:240px}

/* ── 合言葉 ───────────────────────────────────────── */
.gate{max-width:380px; margin:14vh auto; padding:0 20px}
.gate h1{margin:0; font-size:21px}
.gate input{
  width:100%; margin:18px 0 0; padding:12px 2px; font:inherit; font-size:16px;
  border:0; border-bottom:2px solid var(--ink-3); background:transparent; color:var(--ink);
}
.gate input:focus{outline:none; border-bottom-color:var(--navy)}
.gate button{
  width:100%; margin:20px 0 0; padding:14px; font:inherit; font-size:16px; font-weight:700;
  letter-spacing:.08em; background:var(--gold); color:var(--on-gold);
  border:1px solid var(--gold-line); border-radius:6px; cursor:pointer;
}
.err{margin:12px 0 0; color:var(--error); font-size:14px}

@media (max-width:520px){
  h1{font-size:23px}
}

/* 途中で折りたくないまとまり（2行目が1〜2文字だけになるのを防ぐ。10/10 Gem のカードで「ます」だけが落ちた） */
.keep{display:inline-block}

/* ── 要望やアイデアの受け皿（10/10）。目立たせない。一覧のあとに、文字のリンク1行 ── */
.fb{margin:40px 0 0}
.link{background:none; border:0; padding:10px 0; min-height:44px; font:inherit; font-size:15px; color:var(--navy); text-decoration:underline; cursor:pointer}
.fb-form{display:grid; gap:10px; margin:6px 0 0}
.fb-label{display:grid; gap:4px; font-size:14px; color:var(--ink-2)}
.fb-tool,.fb-text{font:inherit; font-size:16px; color:var(--ink); border:1px solid var(--line); border-radius:6px; padding:10px; background:#fff; width:100%}
.fb-text{resize:vertical}
.fb-note{margin:0; font-size:14px; color:var(--ink-3)}
.fb-err{margin:0; font-size:14px; color:var(--error)}
.fb-foot{display:flex; gap:16px; justify-content:flex-end; align-items:center}
.fb-send{font:inherit; font-size:16px; font-weight:700; padding:10px 22px; background:var(--gold); color:var(--on-gold); border:1px solid var(--gold-line); border-radius:6px; cursor:pointer}
.fb-thanks{margin:6px 0 0; font-size:14px; color:var(--ink-2)}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}

/* ── 使われ方（高橋さんだけが見る /usage） ── */
.u-h{font-size:17px; margin:30px 0 8px}
.u-scroll{overflow-x:auto}
.u-table{border-collapse:collapse; font-size:14px; white-space:nowrap}
.u-table th,.u-table td{border-bottom:1px solid var(--line); padding:6px 10px; text-align:right}
.u-table th:first-child,.u-table td:first-child{text-align:left}
.u-table th{color:var(--ink-2); font-weight:700}