@charset "utf-8";
/* ============================================================
   じぶん道具 — 決定版デザインシステム（土台: 案 d2「ひと呼吸」）
   余白と大きな文字で、迷いようがない。

   ・情報を減らす。1画面に「次にやること」がひとつだけ強く見える
   ・線と影をほとんど使わない。かたまりは余白で分ける
   ・青は「押すところ」にだけ使う。それ以外は紙と墨と琥珀だけ
   ・警告は赤くしない。止めていないので「お知らせ」に見せる

   d2 に接いだもの（審査の講評より）:
     d1 … テンプレートの2列グリッド / 罫線入りの textarea / ツールの背表紙
     d4 … ツールカードの「›」/ 週のマス目の寸法 / 項目一覧の4等分グリッド
     d3 … 警告行の印（記号は ⚠ に差し替え）
     d1 … :root{ color-scheme: light }

   素のCSS1枚 / Webフォントなし / 画像なし / JSなし
   詳しい経緯と申し送りは同じフォルダの README.md
   ============================================================ */

:root{
  /* 端末がダークでも <select> のポップアップと日付ピッカーを白いままにする。
     この宣言が無いと、生成りの紙の上に真っ黒な選択肢が出る（d1 から） */
  color-scheme: light;

  /* --- 色：紙と墨、そして青ひとつ --- */
  --paper:      #f4f1ea;   /* 画面の地。ほんのり温かい紙 */
  --paper-2:    #ece8df;   /* 表の見出しなど、地より少し沈む面 */
  --card:       #ffffff;   /* かたまりの面 */
  --on-brand:   #ffffff;   /* 青や緑の上に載る文字 */
  --ink:        #17191c;   /* 本文 */
  --muted:      #6b6f78;   /* 補足 */
  --muted-2:    #8d9099;   /* さらに弱い補足 */
  --ink-soft:   #3c4048;   /* 読ませる補足。灰色にしすぎない */
  --line:       #e2ddd2;   /* 弱い線 */
  --line-2:     #cfc8ba;   /* 少し見える線 */

  --brand:      #1650d9;   /* 押すところ。ここにしか使わない */
  --brand-dark: #0f3ba6;
  --brand-tint: #e8eefc;
  --ring:       rgba(22,80,217,.20);

  --accent:     #dd9b2e;   /* 琥珀。ツールカードの背表紙にだけ使う */

  --warn:       #d18700;   /* 気づいてほしい（止めてはいない） */
  --warn-ink:   #8a5a00;   /* 理由の短い文 */
  --warn-bg:    #fdf3df;
  --warn-ink-2: #4a3a17;   /* お知らせの本文。**薄くしない**（叱っていない証拠） */
  --ok:         #1a7a4c;
  --ok-bg:      #e7f4ec;
  --ok-ink:     #14432c;   /* 「できました」の文字 */
  --danger:     #bc3b2f;
  --danger-bg:  #fbeceb;

  /* --- 寸法：余白は大きく、刻みは少なく --- */
  --sp-1: 6px;
  --sp-2: 12px;
  --sp-3: 18px;
  --sp-4: 24px;
  --sp-5: 32px;
  --sp-6: 44px;
  --sp-7: 64px;

  --r-s: 12px;
  --r-m: 16px;
  --r-l: 22px;
  --r-pill: 999px;

  --tap: 44px;          /* 指で押せる最小 */
  --tap-2: 56px;        /* ふつうの押すところ */
  --tap-3: 64px;        /* いちばん押してほしいところ */

  --wrap: 720px;
  --pad: 20px;          /* 画面の左右 */
  --card-pad: 24px;     /* かたまりの左右。表はここぶん外へ出す */
  --rows-pad: 9px;      /* 一覧の表のマスの左右。390pxで4列を収めるための寸法 */

  --fs-body: 18px;
  --fs-lead: 19px;
  --fs-small: 15.5px;
  --fs-h2: 22px;

  --font: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN",
          "Hiragino Sans", "Noto Sans JP", "Yu Gothic Medium", Meiryo, sans-serif;
}

/* ============================================================
   土台
   ============================================================ */

*, *::before, *::after{ 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.85;
  letter-spacing: .01em;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

h1, h2{
  font-feature-settings: "palt" 1;
  letter-spacing: -.01em;
  line-height: 1.4;
  margin: 0;
}

p{ margin: 0 0 var(--sp-3); }
p:last-child{ margin-bottom: 0; }
p:empty{ display: none; }

a{ color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
a:hover{ color: var(--brand-dark); }

b{ font-weight: 800; }

ul, ol{ margin: 0; padding: 0; }

:focus-visible{
  outline: 3px solid var(--brand);
  outline-offset: 3px;
  border-radius: 4px;
}

/* 中身の幅。すべての横幅はここで決まる（body は絶対に横に倒さない） */
.wrap{
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}

/* ============================================================
   上の帯 — いちばん静かにしておく
   ============================================================ */

.head{
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.head .wrap{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-1) var(--sp-3);
  padding-top: 14px;
  padding-bottom: 10px;
}

.brand{
  font-size: 19px;
  font-weight: 800;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -.01em;
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
}
.brand:hover{ color: var(--ink); }

.orgname{
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
  background: var(--paper-2);
  border-radius: var(--r-pill);
  padding: 4px 12px;
  line-height: 1.6;
}
.orgname:empty{ display: none; }

.nav{
  flex: 1 0 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--sp-3);
  margin-top: -4px;
}
.nav a,
.nav .linklike{
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  font-size: 16px;
  font-weight: 700;
  color: var(--muted);
  text-decoration: none;
}
.nav a:hover,
.nav .linklike:hover{ color: var(--brand); }

/* フォームを行の中に置く */
.inline{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.inline > select,
.inline > input{ min-width: 0; }

.linklike{
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
  min-height: var(--tap);
}

/* 本文 */
main.wrap{
  display: block;
  padding-top: var(--sp-5);
  padding-bottom: var(--sp-7);
}

.back{
  margin: 0 0 var(--sp-3);
}
.back a{
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  font-size: 17px;
  font-weight: 700;
  color: var(--muted);
  text-decoration: none;
}
.back a:hover{ color: var(--brand); }

/* 本文直下の、ぽつんと置かれたリンク（⚙ 設定へ など） */
p.count-note a{
  display: inline-block;
  padding: 10px 6px;
  font-weight: 800;
  text-decoration: none;
}
p.count-note a:hover{ text-decoration: underline; }

main.wrap > p:not(.hint):not(.back):not(.count-note) > a:not(.btn){
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-2);
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
}
main.wrap > p:not(.hint):not(.back):not(.count-note) > a:not(.btn):hover{ text-decoration: underline; }

/* 下の帯 */
.foot{
  border-top: 1px solid var(--line);
  margin-top: var(--sp-6);
}
.foot .wrap{
  padding-top: var(--sp-4);
  padding-bottom: var(--sp-5);
}
.foot p{
  margin: 0;
  font-size: 14.5px;
  color: var(--muted-2);
}

/* ============================================================
   かたまり — 線も影もほぼ無し。白い面と余白だけで分ける
   ============================================================ */

.card{
  background: var(--card);
  border-radius: var(--r-l);
  padding: var(--sp-5) var(--card-pad);
  margin: 0 0 var(--sp-4);
}


.card-h{
  font-size: var(--fs-h2);
  font-weight: 800;
  margin: 0 0 var(--sp-4);
}

.card p{ line-height: 1.9; }

/* 左右に開く（さがす口＋追加ボタン）。スマホでは縦に積む */
.spread{
  display: grid;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}
.spread .inline{ display: flex; }
.spread .inline input[type="text"]{
  width: 100% !important;   /* HTML側の style="width:10em" を上書きする */
}
.spread > .btn{ width: 100%; }

/* 補足の文 */
.hint{
  font-size: var(--fs-small);
  line-height: 1.8;
  color: var(--muted);
  margin: var(--sp-2) 0 0;
}
p.hint + p.hint{ margin-top: var(--sp-2); }
/* 文の中のリンクも指で押せるように。
   inline の上下パディングは行の高さを変えずに、当たり判定だけ広げる */
.hint a,
.card p a{ padding: 13px 2px; font-weight: 700; }
main.wrap > .hint{ margin: var(--sp-4) 0 0; }
main.wrap > p:not(.hint):not(.back){ margin: var(--sp-5) 0 0; }

/* ============================================================
   ランディングの頭 — ここだけは大きく、他を置かない
   ============================================================ */

.hero{
  padding: var(--sp-6) 0 var(--sp-5);
  text-align: center;
}
.hero h1{
  font-size: clamp(31px, 8.6vw, 46px);
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: -.02em;
  text-wrap: balance;
  word-break: auto-phrase;
  margin: 0 0 var(--sp-4);
}
.hero p{
  font-size: var(--fs-lead);
  line-height: 1.95;
  color: var(--ink-soft);
  text-wrap: balance;
  word-break: auto-phrase;
  margin: 0 0 var(--sp-4);
}
.hero .hint{ color: var(--muted); word-break: auto-phrase; text-wrap: balance; }
.card-h, .steps li, .tp-name, .t-name, .tp-ex, .t-sub, .lbl,
.card p, .flash b, .flash .fld-list li, .flash p, .hint,
.warn-note, .f-label, .count-note, .fld-list li, .check-row{ word-break: auto-phrase; }
.hero .btn{ margin-top: var(--sp-1); }
.hero .hint{ margin: var(--sp-3) 0 0; }

/* 1・2・3の手順 */
.steps{
  list-style: none;
  counter-reset: step;
  margin: 0;
  padding: 0;
}
.steps li{
  counter-increment: step;
  position: relative;
  padding: 0 0 0 56px;
  margin: 0 0 var(--sp-4);
  font-size: 18px;
  line-height: 1.75;
  min-height: 40px;
  display: flex;
  align-items: center;
}
.steps li:last-child{ margin-bottom: 0; }
.steps li::before{
  content: counter(step);
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: var(--r-pill);
  background: var(--brand-tint);
  color: var(--brand);
  font-size: 18px;
  font-weight: 800;
  line-height: 40px;
  text-align: center;
}

/* ============================================================
   押すもの — 押せる面はひと目で分かる大きさに
   ============================================================ */

.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--tap-2);
  padding: 12px 26px;
  border: 2px solid var(--brand);
  border-radius: var(--r-m);
  background: var(--brand);
  color: var(--on-brand);
  font-family: inherit;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease;
}
.btn:hover{ background: var(--brand-dark); border-color: var(--brand-dark); color: var(--on-brand); }

.btn.big{
  width: 100%;
  min-height: var(--tap-3);
  font-size: 20px;
  border-radius: var(--r-l);
}
.btn.small{
  min-height: 48px;
  padding: 10px 20px;
  font-size: 16px;
  border-radius: var(--r-s);
}
.btn.ghost{
  background: var(--card);
  color: var(--brand);
  border-color: var(--brand);
}
.btn.ghost:hover{ background: var(--brand-tint); color: var(--brand-dark); border-color: var(--brand-dark); }

.btn.danger{
  background: var(--card);
  color: var(--danger);
  border-color: var(--danger);
}
.btn.danger:hover{ background: var(--danger-bg); color: var(--danger); border-color: var(--danger); }

/* その画面の主役だけ、横いっぱいの青にする */
form > .btn:not(.small),
form > button.btn:not(.small){ width: 100%; }
.btn.small{ min-width: 11em; }

/* 一覧の中の小さい押し */
.mini{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  min-width: var(--tap);
  padding: 8px 14px;
  border: 2px solid var(--line);
  border-radius: var(--r-s);
  background: var(--card);
  color: var(--muted);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  cursor: pointer;
}
.mini:hover{ border-color: var(--brand); color: var(--brand); }

/* ============================================================
   入力 — ラベルは上、口は横いっぱい、単位はその右に
   ============================================================ */

.field{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin: 0 0 var(--sp-4);
  font-size: 17px;
}
.card form > .field:last-of-type{ margin-bottom: var(--sp-5); }

.lbl{
  flex: 0 0 100%;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.6;
  color: var(--ink);
}

.req{
  display: inline-block;
  margin-left: 8px;
  padding: 2px 9px;
  border-radius: var(--r-pill);
  background: var(--danger-bg);
  color: var(--danger);
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.7;
  vertical-align: 2px;
}

.field > .hint{ flex: 0 0 100%; margin: 0; }

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
select,
textarea{
  font-family: inherit;
  font-size: 17px;          /* 16px以上。iOSが勝手にズームしないように */
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--line);
  border-radius: var(--r-m);
  padding: 14px 16px;
  min-height: var(--tap-2);
  width: 100%;
  max-width: 100%;
}
.field > input,
.field > select,
.field > textarea{
  flex: 1 1 8em;
  min-width: 0;
  width: auto;
}

/* えらび口。基準を小さくしておくと、
   「◯◯ と △△」のように2つ並ぶ行でも1行に収まる（d3・d4 から） */
.field > select{ flex-basis: 6em; max-width: 24em; }
.field > input[type="date"]{ max-width: 16em; }
.field > input[type="number"]{ max-width: 12em; }

/* 罫線入りの便箋にする（d1 から）。
   「作りたいものをそのまま書いてください」の白い箱がいちばん怖いので、
   紙の罫線を敷いて「書けばいい」に見せる。
   background-attachment:local ＝ 書いた文字と罫線が一緒にスクロールする */
textarea{
  min-height: 140px;
  line-height: 30px;
  padding: 12px 16px 14px;
  resize: vertical;
  display: block;
  background-image: repeating-linear-gradient(to bottom,
      transparent 0 29px, var(--line) 29px 30px);
  background-attachment: local;
  background-position: 0 12px;
  background-repeat: repeat;
}
.card form > textarea{ margin-bottom: var(--sp-3); }

select{
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 22px) calc(50% + 1px), calc(100% - 15px) calc(50% + 1px);
  background-size: 7px 7px, 7px 7px;
  background-repeat: no-repeat;
}

input::placeholder,
textarea::placeholder{ color: var(--muted-2); }

/* **background の一括指定にしない。**一括にすると
   select の矢印と textarea の罫線（どちらも background-image）が消える */
input:focus,
select:focus,
textarea:focus{
  outline: none;
  background-color: var(--card);
  border-color: var(--brand);
  box-shadow: 0 0 0 4px var(--ring);
}

/* チェック1行 — 行ごと押せる大きさに */
.check-row{
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  min-height: var(--tap-2);
  padding: 14px 16px;
  margin: 0 0 var(--sp-2);
  border: 2px solid var(--line);
  border-radius: var(--r-m);
  font-size: 17px;
  line-height: 1.7;
  cursor: pointer;
}
.check-row:hover{ border-color: var(--line-2); }
.check-row:has(input:checked){
  border-color: var(--brand);
  background: var(--brand-tint);
}
.check-row input[type="checkbox"]{
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  margin: 4px 0 0;
  accent-color: var(--brand);
}
.card form > .check-row:last-of-type{ margin-bottom: var(--sp-5); }

/* 複数えらび — 丸い枠を横に並べる */
.pick{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 8px 18px 8px 14px;
  border: 2px solid var(--line-2);
  border-radius: var(--r-pill);
  background: var(--card);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  cursor: pointer;
  white-space: nowrap;
}
.pick:hover{ border-color: var(--brand); }
.pick:has(input:checked){
  border-color: var(--brand);
  background: var(--brand-tint);
  color: var(--brand-dark);
}
.pick input[type="checkbox"]{
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: var(--brand);
}
.field > .pick{ flex: 0 0 auto; }

/* ============================================================
   知らせ — 「間違い」ではなく「お知らせ」に見せる
   ============================================================ */

.flash{
  position: relative;
  padding: var(--sp-4) var(--sp-4) var(--sp-4) 62px;
  border-radius: var(--r-l);
  margin: 0 0 var(--sp-3);
  font-size: 17px;
  line-height: 1.8;
}
.flash::before{
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  left: 20px;
  top: 21px;
  width: 32px;
  height: 32px;
  border: 2px solid transparent;
  border-radius: var(--r-pill);
  font-size: 17px;
  font-weight: 800;
  line-height: 1;
}
.flash.ok{
  background: var(--ok-bg);
  color: var(--ok-ink);
}
.flash.ok::before{
  content: "✓";
  background: var(--ok);
  color: var(--on-brand);
}
.flash.error{
  background: var(--warn-bg);
  color: var(--warn-ink-2);
}
/* 塗りつぶした「！」にしない。一覧の警告行と同じ ⚠ ひとつで喋る。
   印が2種類の強さで出ると「こっちのほうが怒られている」に見える */
.flash.error::before{
  content: "\26A0\FE0E";      /* VS15 ＝ 絵文字ではなく文字として出す。色は --warn で決める */
  background: transparent;
  border-color: var(--warn);
  color: var(--warn);
  font-size: 15px;
  font-weight: 600;
}
.flash + .card{ margin-top: var(--sp-4); }
.flash b{
  display: block;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.6;
  margin-bottom: var(--sp-1);
}
.flash .fld-list{
  list-style: none;
  margin: var(--sp-2) 0;
  padding: 0;
}
.flash .fld-list li,
.flash .fld-list li:first-child{
  display: block;
  position: relative;
  padding: 6px 0 6px 20px;
  border: 0;
  font-size: 16.5px;
  line-height: 1.7;
}
.flash .fld-list li::before{
  content: "";
  position: absolute;
  left: 2px;
  top: 17px;
  width: 7px;
  height: 7px;
  border-radius: var(--r-pill);
  background: var(--warn);
}
/* **叱っていない証拠を、いちばん目立たない字にしない。**
   「そのままでも保存できます」は件数の見出しと同じ濃さで読ませる（d4 から） */
.flash p{
  margin: var(--sp-2) 0 0;
  font-size: 16.5px;
  line-height: 1.8;
  color: inherit;
}

/* 見えない input と、文字を打たないチェックボックスにも16pxを敷いておく。
   実害は無いが、点検の道具（ops.quiet --measure）が「16px未満の入力」として
   数えるので、本物の取りこぼしがその中に埋もれてしまう */
input[type="hidden"],
input[type="checkbox"],
input[type="radio"]{ font-size: 16px; }

/* ============================================================
   一覧
   ============================================================ */

.table-scroll{
  overflow-x: auto;           /* 横に倒れていいのはこの中だけ */
  -webkit-overflow-scrolling: touch;
  border-top: 2px solid var(--line);
  border-bottom: 2px solid var(--line);
}

.rows{
  border-collapse: collapse;
  width: 100%;
  font-size: 16px;
}
.rows th{
  text-align: left;
  padding: 12px var(--rows-pad);
  background: var(--paper-2);
  color: var(--muted);
  font-size: 14.5px;
  font-weight: 800;
  letter-spacing: .02em;
  white-space: nowrap;
}
.rows td{
  padding: 14px var(--rows-pad);
  border-top: 1px solid var(--line);
  vertical-align: top;
  line-height: 1.7;
}
/* **品名の列に床を敷く。**表の列幅は中身の最小幅の取り合いで決まるので、
   床が無いと警告の理由（「下回っています」＝7文字）に幅を持っていかれ、
   「オリー／ブオイ／ル」と3行に折れた（390px で実測）。
   6.4em ＝ 102px。ここで品名2行・理由2行に落ち着く */
.rows td:first-child{ min-width: 6.4em; font-weight: 700; }
.rows tbody tr:first-child td{ border-top: 2px solid var(--line); }
.rows a{
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}
.rows a:hover{ text-decoration: underline; }

/* 警告の行 — 赤くしない。気づけばいい */
.rows tr.warn td{ background: var(--warn-bg); }
.rows tr.warn td:first-child{
  box-shadow: inset 5px 0 0 var(--warn);
  font-weight: 800;
}
/* 表が横に流れて右が見えなくなっても、気にすべき行だと分かる印（d3 から。
   ただし塗りつぶした丸い「!」にはしない。責めずに「この行を見て」だけ伝える）。
   **印は絶対配置で左の余白にぶら下げる。**行に流し込むと品名の欄が狭くなり、
   「オリーブオイル」が3行に折れた（390px で実測） */
.rows tr.warn td:first-child{ position: relative; padding-left: 26px; }
.rows tr.warn td:first-child::before{
  content: "\26A0\FE0E";
  position: absolute;
  left: 7px;
  top: 16px;
  color: var(--warn);
  font-size: 13px;
  font-weight: 400;
  line-height: 1;
}
/* **なぜ琥珀なのかを説明する文が、画面でいちばん小さい字であってはいけない。**
   この文の最小幅（「下回っています」＝7文字）が、そのまま最後の列の床になる。
   だから幅を削るのではなく、品名の列に床を敷いて取り合いを止める（上） */
.warn-note{
  display: block;
  margin-top: 3px;
  color: var(--warn-ink);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.55;
}

/* 前後の週 */
.pager{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-1);
  margin: 0 0 var(--sp-3);
  font-size: 17px;
}
.pager a{
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 4px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.pager a:hover{ text-decoration: underline; }
.pager b{
  font-size: 18px;
  font-weight: 800;
}

/* ============================================================
   ツール — 1画面に大きく並べる
   ============================================================ */

.tools{
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3);
  margin: 0;
  padding: 0;
}

.tool-card{
  position: relative;
  overflow: hidden;          /* 背表紙をカードの角丸で切る */
  display: grid;
  grid-template-columns: 56px 1fr auto;
  grid-template-rows: auto auto;
  column-gap: var(--sp-3);
  align-items: center;
  min-height: 96px;
  padding: var(--sp-4) var(--sp-3) var(--sp-4) 30px;
  background: var(--card);
  border: 2px solid transparent;
  border-radius: var(--r-l);
  text-decoration: none;
  color: var(--ink);
}
.tool-card:hover{ border-color: var(--brand); color: var(--ink); }

/* 左の琥珀の帯＝帳面の背表紙（d1 から）。
   真っ白なカードが棚に並んだ帳面に見えて、ホームが「使ってみたい」側に寄る */
.tool-card::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 12px;
  background: var(--accent);
}
/* 右の「›」（d4 から）。スマホで見慣れた「押せば開く」の合図 */
.tool-card::after{
  content: "›";
  grid-column: 3;
  grid-row: 1 / 3;
  align-self: center;
  color: var(--muted-2);
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
}

.t-icon{
  grid-row: 1 / 3;
  align-self: center;
  justify-self: center;
  font-size: 34px;
  line-height: 1;
}
.t-name{
  grid-column: 2;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.5;
}
.t-sub{
  grid-column: 2;
  font-size: 15px;
  color: var(--muted);
  line-height: 1.6;
}

.tool-new{
  background: transparent;
  border: 2px dashed var(--line-2);
  color: var(--brand);
}
/* まだ中身が無いので背表紙は付けない。破線のまま残す */
.tool-new::before{ background: transparent; }
.tool-new::after{ color: var(--brand); }
.tool-new:hover{
  border-style: dashed;
  border-color: var(--brand);
  background: var(--brand-tint);
  color: var(--brand);
}
.tool-new .t-icon{ color: var(--brand); font-size: 30px; font-weight: 700; }
.tool-new .t-name{ color: var(--brand); }

/* 作れる数のお知らせ（span としても p としても使われる） */
.count-note{
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
  line-height: 1.6;
}
p.count-note{
  margin: var(--sp-4) 0 0;
  font-size: 15.5px;
  font-weight: 400;
  line-height: 1.8;
  text-align: center;
}

/* ============================================================
   テンプレート — 2列。390px で7枚がほぼ1画面に入る（d1 から）
   「候補はこれだけ」が最初に見えるほうが、選ぶのが気楽になる。
   ※ d1 の破線の下線は足さない（線を増やさないのがこの案の方針）
   ============================================================ */

/* **144px と gap 8px。**390px の中身は302pxしかないので、
   148px＋10px（＝306px）だと1列に落ちる。実測で決めた寸法 */
.tpl-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(144px, 1fr));
  gap: 8px;
}

.tpl{
  display: grid;
  grid-template-columns: 1fr;
  align-content: start;
  gap: 6px;
  width: 100%;
  min-height: 136px;
  padding: 14px 14px 16px;
  background: var(--paper);
  border: 2px solid transparent;
  border-radius: var(--r-m);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.tpl:hover{ border-color: var(--brand); background: var(--brand-tint); }

.tp-icon{
  font-size: 28px;
  line-height: 1.15;
}
.tp-name{
  font-size: 17px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.45;
}
.tp-ex{
  font-size: 14.5px;
  color: var(--muted);
  line-height: 1.6;
}

/* ============================================================
   項目の一覧（設定・メンバー・休み希望・店の決まり）
   ============================================================ */

.fld-list{
  list-style: none;
  margin: 0 0 var(--sp-4);
  padding: 0;
}
.fld-list li{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--line);
  font-size: 17px;
  line-height: 1.7;
}
.fld-list li:first-child{ border-top: 1px solid var(--line); }
.fld-list form{ display: inline-flex; margin: 0; }

/* 押すものが2つ以上ある行（＝設定の「項目」）は、4等分の枠に置く（d4 から）。
   折り返し任せだと「↑ ↓／必須に 削除」の折れる位置が行ごとにずれて雑に見えた。
   **ただし form に grid-row を書かない。**書くと押すものが5つに増えた瞬間に
   暗黙の5列目ができて、カードごと横に溢れる（d4 の実装の穴）。
   最初の form だけ1列目に固定すれば、あとは自動配置で次の段へ折り返す */
.fld-list li:has(form:nth-of-type(2)){
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  gap: 10px 6px;
}
.fld-list li:has(form:nth-of-type(2)) > .f-label{ grid-column: 1 / span 2; }
.fld-list li:has(form:nth-of-type(2)) > .req,
.fld-list li:has(form:nth-of-type(2)) > .f-type{ margin-left: 0; justify-self: start; }
.fld-list li:has(form:nth-of-type(2)) > form:first-of-type{ grid-column: 1; }
.fld-list li:has(form:nth-of-type(2)) form{ display: flex; }
.fld-list li:has(form:nth-of-type(2)) .mini{ width: 100%; padding-left: 4px; padding-right: 4px; }
/* 4等分の枠は1つ71px。札はその中に収める */
.fld-list li:has(form:nth-of-type(2)) > .f-type{ padding: 3px 8px; font-size: 12.5px; }

/* 押すものが1つだけの行（＝「店の決まり」「休み希望」）は、
   その押しどころ（やめる・取り消す）を右端へ戻す */
.fld-list li:has(form):not(:has(form:nth-of-type(2))){
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.fld-list li:has(form):not(:has(form:nth-of-type(2))) > .f-label{ flex: 1 1 8em; }
.fld-list li:has(form):not(:has(form:nth-of-type(2))) > form{ margin-left: auto; }

.f-label{
  flex: 0 1 auto;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.6;
}
.f-type{
  display: inline-block;
  margin-left: auto;
  padding: 3px 11px;
  border-radius: var(--r-pill);
  background: var(--paper-2);
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.7;
  white-space: nowrap;      /* 「短い／文字」と2行に折らない */
}
.fld-list .req{ margin-left: 0; }

/* ============================================================
   シフト — 週のマス目。表の中だけ横に流す
   ============================================================ */

.shift-scroll{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-top: 2px solid var(--line);
  border-bottom: 2px solid var(--line);
}

/* 横に流せることが分かるように、棒はいつも出しておく。
   **これを消さない。**「まだ右にある」を伝える唯一の手掛かり */
.table-scroll, .shift-scroll{ scrollbar-width: thin; scrollbar-color: var(--line-2) var(--paper-2); }
.table-scroll::-webkit-scrollbar,
.shift-scroll::-webkit-scrollbar{ height: 10px; }
.table-scroll::-webkit-scrollbar-track,
.shift-scroll::-webkit-scrollbar-track{ background: var(--paper-2); }
.table-scroll::-webkit-scrollbar-thumb,
.shift-scroll::-webkit-scrollbar-thumb{
  background: var(--line-2);
  border-radius: var(--r-pill);
  border: 2px solid var(--paper-2);
}

.shift{
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}
.shift th,
.shift td{
  border-right: 2px solid var(--line);
  border-bottom: 2px solid var(--line);
  padding: 8px;
  vertical-align: top;
}
.shift tr > *:last-child{ border-right: 0; }
.shift tbody tr:last-child > *{ border-bottom: 0; }

.shift thead th{
  background: var(--paper-2);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.5;
  text-align: center;
  padding: 12px 8px;
  white-space: nowrap;
}
.shift thead th:first-child{
  position: sticky;
  left: 0;
  z-index: 3;
  background: var(--paper-2);
  min-width: 3.8em;
}
.day-head{ color: var(--ink); }

.shift tbody th{
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--card);
  min-width: 3.8em;
  text-align: left;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.5;
  padding: 12px 10px;
}

/* **max-width が要る。**無いと「渡辺（休み希望）」のような長い選択肢に
   列幅を引っぱられる。この寸法で表の総幅が約760pxに収まり、
   390px でも3日ぶんが見えて4日目が覗く（d4 から） */
.shift td{ min-width: 98px; max-width: 116px; background: var(--card); }
.shift td br{ display: none; }
.shift select{
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 46px;
  padding: 8px 24px 8px 9px;
  margin-bottom: 8px;
  font-size: 16px;
  border-radius: var(--r-s);
  border-color: var(--line);
  background-position: calc(100% - 14px) calc(50% + 1px), calc(100% - 9px) calc(50% + 1px);
}
.shift select:last-child{ margin-bottom: 0; }

.shift td.closed{
  background: var(--paper-2);
  color: var(--muted-2);
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  vertical-align: middle;
}

.shift-actions{
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}
.shift-actions .btn{ flex: 1 1 auto; }

/* 続けて置かれたフォームは、余白でひとかたまりずつに分ける */
.card > form + form{ margin-top: var(--sp-5); }

/* 表はカードの端まで使う。1文字でも多く見せたい */
.card > .table-scroll,
.card > form > .shift-scroll{
  margin-left: calc(var(--card-pad) * -1);
  margin-right: calc(var(--card-pad) * -1);
}

/* ============================================================
   広い画面（PCでも1カラム。業務データだけ横に広がる）
   ============================================================ */

@media (min-width: 620px){
  .spread{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
  }
  .spread .inline{ flex: 1 1 10em; min-width: 0; max-width: 24em; }
  .spread > .btn{ width: auto; }

  .tools{ grid-template-columns: 1fr 1fr; }
  .tpl-grid{ grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); }

  .shift-actions .btn{ flex: 0 1 auto; min-width: 14em; }
  form > .btn:not(.small),
  form > button.btn:not(.small){ width: auto; min-width: 14em; }
  .btn.big{ width: 100%; }
}

@media (min-width: 760px){
  :root{
    --fs-body: 19px;
    --fs-lead: 20px;
    --fs-h2: 24px;
    --pad: 28px;
    --card-pad: 32px;
  }
  .card{ padding: var(--sp-6) var(--card-pad); }
  /* PCでは週のマス目を1画面に収める。マスを13pxだけ細くすると
     7日ぶん（85×7＋見出し61＝656px）が入り、横に送らずに日曜まで見える。
     **スマホ側の98pxは削らない。**あちらは指で押す寸法そのもの */
  .shift td{ min-width: 85px; }
  .hero{ padding: var(--sp-7) 0 var(--sp-6); }
  main.wrap{ padding-top: var(--sp-5); }
  .nav{ flex: 0 0 auto; margin-top: 0; margin-left: auto; }
}

@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; }
}