/* あつらえシフト LP 第2版（見本）: 本体ページの見た目
   設計図: docs/worknotes-20260902-lp-v2/blueprint.md §2〜§3
   ・グラデーション・影・半透明・傾き・ふわっと表示・線画アイコン・波・ぼかしは一切使わない
   ・ダークモードの上書きを書かない（地色は白で固定＝D-19）
   ・15px未満の文字を作らない（製品再現の画面片＝hero-grid.css／figures.css の内側だけが例外）
   ・書体は "BIZ UDPGothic" と "Klee One" の2本だけ（ローカルフォント名は書かない＝D-24）
   見本A／B の違いは面の色と締めの2点だけ（html[data-variant]）。 */

/* ============ 変数 ============ */
:root {
  color-scheme: light;

  /* 文字色（この2色以外の灰色をLP側の文字に使わない） */
  --head: #3a4a40;          /* 見出し */
  --ink: #4c4c4c;           /* 本文 */

  /* 緑（役割固定） */
  --brand: #67b371;         /* 押せるもの */
  --brand-dk: #4f9a5b;      /* ホバー・リンク文字 */
  --brand-deep: #3d7a47;    /* 実数の数字・締めの面（A）・現場の声の左罫 */
  --brand-pale: #e8f4ea;    /* 製品由来の淡緑＋見本Aの面 */
  --brand-line: #bfe0c5;    /* 副ボタン枠・フォーカスリング */
  --cream: #fdfaf3;         /* 見本Bの面 */

  --line: #e7e4dc;          /* LP側の罫線 */
  --line-fig: #e2e8ee;      /* 製品再現の外枠 */
  --danger: #d83a3a;

  --klee: "Klee One", sans-serif;
  --biz: "BIZ UDPGothic", sans-serif;

  --fs-h1: 34px;
  --fs-h2: 26px;
  --fs-h3: 18px;
  --fs-lead: 18px;
  --fs-body: 16px;
  --fs-btn: 16px;
  --fs-tag: 15px;
  --fs-timing: 17px;
  --fs-voice: 20px;

  --pad-sec: 88px;
  --pad-heavy: 104px;
}

@media (max-width: 600px) {
  :root {
    --fs-h1: 26px;
    --fs-h2: 22px;
    --pad-sec: 56px;
    --pad-heavy: 64px;
  }
}

/* ============ 基礎 ============ */
* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  overflow-x: clip;          /* 右端まで伸ばす画面片（.bleed-r）の受け皿 */
  scroll-behavior: smooth;
}

body {
  background: #fff;
  color: var(--ink);
  font-family: var(--biz);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: .02em;
  word-break: auto-phrase;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var(--brand-dk); }
a:hover { color: var(--brand-deep); }   /* 押せるものは必ずホバーで色が変わる（D-20） */
[id] { scroll-margin-top: 80px; }

a:focus-visible,
button:focus-visible,
input:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; border-radius: 6px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

.wrap { max-width: min(1060px, 100%); margin: 0 auto; padding: 0 24px; }

/* 横に長い画面片を画面の右端まで伸ばす（≤900px で解除）。
   100vw は縦スクロールバーの幅を含むので、そのまま使うと枠の右端がスクロールバーの下に隠れる。
   --vw（＝documentElement.clientWidth）を index.html が読み込み時と resize で入れる。 */
.bleed-r { margin-right: calc(50% - var(--vw, 100vw) * 0.5); }
@media (max-width: 900px) { .bleed-r { margin-right: 0; } }

/* セクションの上下余白は3段階だけ */
.sec { padding: var(--pad-sec) 0; }
.sec-heavy { padding: var(--pad-heavy) 0; }

/* ============ 見出し・本文 ============ */
/* 見出しは本文と同じ書体（BIZ UDPGothic 700）。太さと大きさだけで階層を作る。
   手書き風の Klee One は、引用として書体が変わる理由のある「現場の声」の3文だけに使う。 */
h1 {
  font-family: var(--biz);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: 1.5;
  color: var(--head);
  letter-spacing: .02em;
}

h2 {
  font-family: var(--biz);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: 1.5;
  color: var(--head);
  letter-spacing: .02em;
}

h3 {
  font-family: var(--biz);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: 1.6;
  color: var(--head);
}

.lead { margin: 12px 0 40px; max-width: 40em; font-size: var(--fs-body); }

/* ============ ボタン・リンク ============ */
.btn {
  display: inline-block;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 14px 28px;
  font-family: var(--biz);
  font-size: var(--fs-btn);
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-dk); color: #fff; }
.btn-sm { padding: 10px 20px; }

.tlink {
  font-size: var(--fs-body);
  color: var(--brand-dk);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.tlink:hover { color: var(--brand-deep); }

/* ============ 画面片（製品の再現）とキャプション ============ */
.figblock { margin-top: 28px; }
.cap { margin-top: 12px; font-size: var(--fs-body); color: var(--ink); }

/* ============ ヘッダー ============ */
.site-head {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.head-in {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.head-logo { display: block; border-bottom: 2px solid transparent; }
.head-logo:hover { border-bottom-color: var(--brand); }   /* 押せることを色で示す（D-20） */
.head-logo img { height: 44px; width: auto; }
.head-right { display: flex; align-items: center; gap: 28px; }
.head-nav { display: flex; align-items: center; gap: 28px; }
.head-nav a {
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--head);
  text-decoration: none;
  white-space: nowrap;
}
.head-nav a:hover { color: var(--brand-dk); text-decoration: underline; }

/* ≤760px はロゴ＋ボタンだけ（文字リンク4本＋ボタンが入りきらず右端が切れる幅の境目） */
@media (max-width: 900px) { .head-nav { gap: 20px; } }
@media (max-width: 760px) { .head-nav { display: none; } }

/* ============ ヒーロー ============ */
/* 上下の余白は3段階（40／88／104）だけ＝ヘッダー直下は帯と同じ40px */
.hero { padding: 40px 0 var(--pad-sec); }
.hero h1 { max-width: 24em; }
.hero-lead { margin-top: 20px; max-width: 40em; font-size: var(--fs-lead); line-height: 1.8; }
.hero-act { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 24px; }
.hero-grid-wrap { margin-top: 40px; }

/* ============ 見出しの右に添える件数（D-59: 件数はタイトルのすぐ右） ============ */
.h-count {
  margin-left: 14px;
  font-size: var(--fs-body);
  font-weight: 400;
  color: var(--ink);
  white-space: nowrap;
}
.h-count b { font-weight: 700; font-variant-numeric: tabular-nums; }

/* ============ 現場の声 ============ */
.voices { border-left: 3px solid var(--brand-deep); padding-left: 24px; }
.voices p {
  font-family: var(--klee);
  font-weight: 400;
  font-size: var(--fs-voice);
  line-height: 1.8;
  color: var(--head);
  max-width: 36em;
}
.voices p + p { margin-top: 20px; }

/* ============ 手で組むのと、何が違うか ============ */
.tbl-scroll { overflow-x: auto; margin-top: 40px; }
.cmp-table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: var(--fs-body); }
.cmp-table th,
.cmp-table td {
  text-align: left;
  vertical-align: top;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  line-height: 1.7;
}
.cmp-table thead th { font-weight: 700; color: var(--head); }
.cmp-table tbody th { font-weight: 700; color: var(--head); }
.cmp-table th:first-child,
.cmp-table td:first-child { padding-left: 0; width: 22%; }
.cmp-table th:last-child,
.cmp-table td:last-child { padding-right: 0; }

/* ============ ひと月の流れ ============ */
.step {
  display: grid;
  grid-template-columns: 168px 1fr;
  column-gap: 40px;
  padding: 56px 0;
  border-top: 1px solid var(--line);
}
.step:first-of-type { border-top: 0; }
.step-when {
  font-family: var(--biz);
  font-weight: 700;
  font-size: var(--fs-timing);
  line-height: 1.5;
  color: var(--head);
}
.step-body > p { margin-top: 12px; max-width: 34em; }
.step-act { margin-top: 32px; }

/* 6段は並列＝位置も余白も組み方もそろえる（段ごとに変えない＝D-61）。
   どの段も 時期ラベル左・右列は h3 →本文→画面片 の1列。 */

@media (max-width: 900px) {
  .step { grid-template-columns: 1fr; }
  .step-when { margin-bottom: 8px; }
}

/* ============ できること ============ */
.can-group { margin-top: 48px; }
.can-group:first-of-type { margin-top: 32px; }
/* 群の見分けは余白（.can-group の margin-top）で付ける＝h3 の大きさは他の h3 と同じ（D-46） */
.can-list { margin-top: 12px; }
.can-item {
  display: grid;
  grid-template-columns: 260px 1fr;
  column-gap: 32px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}
.can-item dt { font-size: var(--fs-h3); font-weight: 700; color: var(--head); line-height: 1.6; }
.can-item dd { font-size: var(--fs-body); line-height: 1.8; }

@media (max-width: 700px) {
  .can-item { grid-template-columns: 1fr; }
  .can-item dd { margin-top: 4px; }
}

/* ============ 主任が休みの日も ============ */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.split p { margin-top: 20px; max-width: 34em; }
.split img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: 32px; }
}

/* ============ 気になることを、その場で ============ */
.ask-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ask-tip-btn {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--brand-deep);
  font-family: var(--biz);
  font-size: var(--fs-tag);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.ask-tip-btn:hover,
.ask-tip-btn[aria-expanded="true"] { border-color: var(--brand); background: var(--brand-pale); }

.tooltip-pop {
  position: fixed;
  z-index: 100;
  max-width: min(360px, calc(100vw - 24px));
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--ink);
}
.tooltip-pop[hidden] { display: none; }

.ask-box { max-width: 760px; }
/* 会話ログは「よくある質問」（.faq-item）と同じ平置き。左右のバブルにしない */
.ask-log { display: none; }
.ask-log.show { display: block; margin-bottom: 24px; }
.ask-msg { font-size: var(--fs-body); line-height: 1.8; }
.ask-msg-q {
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--head);
  line-height: 1.6;
}
.ask-log .ask-msg-q:first-child { padding-top: 0; border-top: 0; }
.ask-msg-a { padding: 8px 0 24px; }
.ask-a-name { display: block; font-weight: 700; color: var(--brand-deep); margin-bottom: 6px; }
.ask-a-text { font-size: var(--fs-body); color: var(--ink); }
.ask-a-text + .ask-a-text { margin-top: 8px; }
.ask-related { margin-top: 12px; }
.ask-related-label { font-size: var(--fs-body); font-weight: 700; color: var(--ink); margin-bottom: 8px; }

.ask-form { display: flex; gap: 12px; margin: 24px 0 24px; }
.ask-input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  border: 1.5px solid #d6dde3;
  border-radius: 10px;
  padding: 10px 14px;
  background: #fff;
  color: var(--ink);
  font-family: var(--biz);
  font-size: var(--fs-body);
  line-height: 1.6;
}
.ask-input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-line);
}
.ask-sug-label { font-size: var(--fs-body); font-weight: 700; color: var(--ink); margin-bottom: 10px; }

/* 質問の候補と「関連する機能」は文字リンクの箇条（1行1件）。
   枠付きの小札を並べると対話AI製品の入力欄そのものの見た目になるうえ、
   質問集の機能名は40字を超えるものがあり、小札では必ず折り返す（D-14）。 */
.ask-links { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.ask-link {
  display: block;
  max-width: 100%;
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--biz);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.7;
  text-align: left;
  color: var(--brand-dk);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.ask-link:hover { color: var(--brand-deep); }

@media (max-width: 600px) {
  .ask-form { flex-wrap: wrap; }
  .ask-form .btn { width: 100%; }
}

/* ============ よくある質問 ============ */
.faq { max-width: 46em; }
.faq-item { padding: 24px 0; border-top: 1px solid var(--line); }
.faq-item:first-child { border-top: 0; padding-top: 0; }
.faq-q { font-size: var(--fs-h3); font-weight: 700; color: var(--head); line-height: 1.6; }
.faq-a { margin-top: 8px; font-size: var(--fs-body); }

/* ============ 締め（面の色は見本A／Bで変える） ============ */
.closing { padding: 80px 0; }
.closing h2 { max-width: 26em; }
.closing p { margin-top: 16px; max-width: 34em; }
.closing .btn { margin-top: 32px; }

@media (max-width: 600px) {
  .closing { padding: 56px 0; }
}

/* ============ フッター ============ */
.site-foot { border-top: 1px solid var(--line); padding: 32px 0; }
.foot-in { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; font-size: var(--fs-body); }

/* ============ 見本A／B の違い（面の色と締めの面の2点だけ） ============ */

/* A: 淡緑の面（よくある質問）＋濃緑の締め */
[data-variant="a"] .sec-faq { background: var(--brand-pale); }
[data-variant="a"] .closing { background: var(--brand-deep); }
[data-variant="a"] .closing h2,
[data-variant="a"] .closing p { color: #fff; }
[data-variant="a"] .closing .btn-primary { background: #fff; color: var(--brand-deep); }
[data-variant="a"] .closing .btn-primary:hover { background: var(--brand-pale); color: var(--brand-deep); }

/* B: クリームの面2つ（現場の声・締め） */
[data-variant="b"] .sec-voices { background: var(--cream); }
[data-variant="b"] .closing { background: var(--cream); }

/* グリッド・フレックスの子は中身（横スクロール枠の表）の幅に引きずられない（D-09。min-width:auto の既定を切る） */
.step > *, .can-item > *, .split > *, .rfig, .fig-scroll { min-width: 0; max-width: 100%; }