/* =============================================================
   Keario Living — Landing Page Stylesheet
   Authentic合同会社 / CCO Claire

   2026-07-20 全面書き換え版
   旧「Keario Operations（介護向け・バックオフィス6機能）」から、
   新ポジション「請求ソフトはそのままに、経営の"全体"が1画面で見える
   介護経営基盤＝Keario Living」へ刷新。

   構成:
     1. Design Tokens（現行 Keario ブランドトークンを踏襲・一貫性維持）
     2. Base / Reset
     3. Layout
     4. Components（header / hero / dashboard mock / coexist /
        causal-chain / value-groups / mechanism-flow / audience /
        pricing / flow / faq / lead-form / cta-band / footer 等）
     5. Utilities & Responsive
   ============================================================= */

/* =============================================================
   1. DESIGN TOKENS（既存 site/styles.css と同一値＝同じKearioだと分かる一貫性）
   ============================================================= */
:root {
  /* --- Brand: Keario --- */
  --color-primary:        #2B9E8F; /* ティール（信頼・落ち着き・ケア） */
  --color-primary-dark:   #248A7D;
  --color-primary-darker: #1c6f64;
  --color-primary-hover:  #175c53;
  --color-primary-light:  #e6f5f3; /* 淡いティール（面） */
  --color-primary-tint:   #f1faf8; /* さらに淡い面（セクション背景） */
  --color-accent:         #F4A261; /* 温かいオレンジ（差し色・最小限） */
  --color-accent-dark:    #e08b45;

  /* --- Neutrals --- */
  --color-ink:            #17302b; /* 文字色。面には使わない（下の --color-surface-deep を使う） */
  --color-body:           #3f4b48;
  --color-muted:          #6c7b77;
  --color-bg:             #F7F5F2;
  --color-surface:        #ffffff;
  --color-surface-alt:    #fbfaf7;
  /* 濃い「面」専用色。文字色 --color-ink(#17302b) を面に流用すると、
     ページで一番暗い色＝フッター（＝ページの終わり）と同じ重さの帯が本文中に出る。
     面はこちらを使い、--color-ink は文字色のまま据え置く。 */
  --color-surface-deep:   #245046;
  --color-border:         #e7e3db;
  --color-border-strong:  #d6cfc3;

  /* --- Neutral（帳票/請求ソフト側の中立色。Kearioのティールと視覚的に区別する） --- */
  --color-neutral-panel:  #eef0ee;
  --color-neutral-ink:    #55625d;

  /* --- Typography --- */
  --font-sans: "Inter", "Hiragino Sans", "Hiragino Kaku Gothic ProN",
               "Noto Sans JP", "BIZ UDPGothic", "Yu Gothic", "Meiryo", sans-serif;

  --fs-caption: clamp(0.78rem, 0.75rem + 0.12vw, 0.85rem);
  --fs-small:   clamp(0.86rem, 0.83rem + 0.15vw, 0.94rem);
  --fs-body:    clamp(1rem, 0.97rem + 0.16vw, 1.075rem);
  --fs-lead:    clamp(1.06rem, 1rem + 0.34vw, 1.22rem);
  --fs-h3:      clamp(1.12rem, 1.06rem + 0.32vw, 1.28rem);
  --fs-h2:      clamp(1.6rem, 1.28rem + 1.45vw, 2.35rem);
  --fs-h1:      clamp(1.95rem, 1.35rem + 2.7vw, 3.05rem);
  --fs-display: clamp(1.9rem, 1.45rem + 2.2vw, 2.75rem);

  --lh-tight: 1.28;
  --lh-heading: 1.42;
  --lh-body: 1.9;

  --ls-tight: -0.02em;

  /* --- Spacing scale --- */
  --space-2xs: 0.375rem;
  --space-xs:  0.625rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2.5rem;
  --space-xl:  4rem;
  --space-2xl: 6rem;
  --section-y: clamp(3.5rem, 2.5rem + 4vw, 6.5rem);

  /* --- Radii --- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  /* --- Shadows --- */
  --shadow-sm: 0 1px 2px rgba(23, 48, 43, 0.05);
  --shadow-md: 0 6px 20px rgba(23, 48, 43, 0.07);
  --shadow-lg: 0 18px 48px rgba(23, 48, 43, 0.10);

  /* --- Layout --- */
  --container: 1120px;
  --measure: 40rem;
  --header-h: 68px;

  --transition: 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* =============================================================
   2. BASE / RESET
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-body);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, p { margin: 0; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }

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

[id] { scroll-margin-top: calc(var(--header-h) + 16px); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

.skip-link {
  position: absolute;
  left: 12px; top: -60px;
  background: var(--color-primary-darker);
  color: #fff;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  z-index: 100;
  transition: top var(--transition);
}
.skip-link:focus { top: 12px; }

/* =============================================================
   3. LAYOUT
   ============================================================= */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.15rem, 0.6rem + 2vw, 2.25rem);
}

.section { padding-block: var(--section-y); }
.section--tint { background: var(--color-primary-tint); }

.section-head {
  max-width: 46rem;
  margin-inline: auto;
  text-align: center;
  margin-bottom: clamp(2rem, 1.4rem + 2vw, 3.25rem);
}
.section-head--wide { max-width: 56rem; }

.eyebrow {
  display: inline-block;
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary-darker);
  background: var(--color-primary-light);
  padding: 0.4em 0.95em;
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-sm);
}

.section-title {
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-tight);
  color: var(--color-ink);
  font-weight: 700;
}

.section-lead {
  margin-top: var(--space-sm);
  font-size: var(--fs-lead);
  color: var(--color-muted);
  line-height: 1.85;
}

/* =============================================================
   4. COMPONENTS
   ============================================================= */

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font-family: inherit;
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1;
  padding: 0.95em 1.6em;
  border-radius: var(--radius-pill);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform var(--transition), background var(--transition),
              box-shadow var(--transition), border-color var(--transition);
  white-space: nowrap;
}
.btn--primary { background: var(--color-primary-darker); color: #fff; box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--color-primary-hover); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn--ghost { background: transparent; color: var(--color-primary-darker); border-color: var(--color-border-strong); }
.btn--ghost:hover { border-color: var(--color-primary); background: var(--color-primary-light); }
.btn--light { background: #fff; color: var(--color-primary-darker); }
.btn--light:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn--outline-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.6); }
.btn--outline-light:hover { background: rgba(255, 255, 255, 0.14); border-color: #fff; }
.btn--lg { padding: 1.1em 2em; font-size: var(--fs-body); }
.btn--block { width: 100%; }

/* ---- Header ---- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(247, 245, 242, 0.9);
  backdrop-filter: saturate(1.2) blur(10px);
  -webkit-backdrop-filter: saturate(1.2) blur(10px);
  border-bottom: 1px solid var(--color-border);
}
.nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); height: var(--header-h); }
.brand { display: inline-flex; align-items: center; gap: 0.6em; }
/* ロゴは正式ロゴ A-1 のインラインSVG（HTML側）が持つ。
   地の色・角丸・白抜きはSVGの中にあるので、CSSは置き場所と寸法だけを与える。 */
.brand-mark {
  display: block;
  flex: 0 0 auto;      /* 幅の狭い画面でロゴが潰れないように */
  width: 34px; height: 34px;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-name { font-weight: 800; font-size: 1.18rem; color: var(--color-ink); letter-spacing: var(--ls-tight); }
.brand-sub  { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-primary-darker); }

.nav-links { display: flex; align-items: center; gap: clamp(0.9rem, 0.4rem + 1.3vw, 1.75rem); }
.nav-links a { font-size: var(--fs-small); font-weight: 600; color: var(--color-body); transition: color var(--transition); }
.nav-links a:hover { color: var(--color-primary-darker); }
.nav-actions { display: flex; align-items: center; gap: var(--space-sm); }

/* ---- Hero ---- */
.hero { padding-block: clamp(2.75rem, 1.8rem + 4.5vw, 5.5rem); overflow: hidden; }
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
}
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-size: var(--fs-small); font-weight: 700;
  color: var(--color-primary-darker);
  background: var(--color-primary-light);
  padding: 0.5em 1em;
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-md);
}
.hero-eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--color-primary); }
.hero h1 {
  font-size: var(--fs-h1);
  line-height: 1.34;
  letter-spacing: var(--ls-tight);
  color: var(--color-ink);
  font-weight: 800;
}
.hero h1 .accent { color: var(--color-primary-darker); }
.hero-subhead {
  margin-top: var(--space-md);
  font-size: var(--fs-lead);
  font-weight: 700;
  color: var(--color-primary-darker);
  letter-spacing: 0.01em;
}
.hero-lead { margin-top: var(--space-sm); max-width: 34rem; font-size: var(--fs-lead); color: var(--color-body); }
.hero-cta { margin-top: var(--space-lg); display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.hero-note {
  margin-top: var(--space-md);
  font-size: var(--fs-caption);
  color: var(--color-muted);
  display: inline-flex; align-items: center; gap: 0.5em;
}
.hero-note svg { width: 16px; height: 16px; color: var(--color-primary-darker); flex: none; }
.hero-visual { position: relative; }

/* ---- Dashboard mock（ヒーロー：経営ダッシュボードの自作モック。実画面ではない） ---- */
.dashboard-mock {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.dm-bar {
  display: flex; align-items: center; gap: 7px;
  padding: 12px 16px;
  background: var(--color-primary-darker);
}
.dm-bar span { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.55); }
.dm-bar-title {
  margin-left: 0.6em;
  font-size: var(--fs-caption);
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.02em;
}
.dm-body { padding: clamp(1.1rem, 0.8rem + 1vw, 1.6rem); display: flex; flex-direction: column; gap: 1.1rem; }

.dm-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7rem; }
.dm-kpi {
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.85rem 0.9rem;
  display: flex; flex-direction: column; gap: 0.25rem;
}
.dm-kpi--accent { background: var(--color-primary-tint); border-color: var(--color-primary-light); }
.dm-kpi-label { font-size: var(--fs-caption); color: var(--color-muted); font-weight: 600; line-height: 1.4; }
.dm-kpi-value { font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem); font-weight: 800; color: var(--color-ink); letter-spacing: -0.02em; }
.dm-kpi-value small { font-size: 0.55em; font-weight: 700; margin-left: 0.15em; color: var(--color-muted); }
.dm-kpi-trend { font-size: var(--fs-caption); font-weight: 700; }
.dm-up { color: var(--color-primary-darker); }
.dm-down { color: var(--color-accent-dark); }

.dm-chart {
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.9rem 1rem 0.7rem;
}
.dm-chart-title { font-size: var(--fs-caption); font-weight: 700; color: var(--color-ink); margin-bottom: 0.7rem; }
.dm-bars { display: flex; align-items: flex-end; gap: 0.9rem; height: 84px; }
.dm-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 0.4rem; }
.dm-bar-fill {
  width: 100%;
  max-width: 34px;
  border-radius: 6px 6px 3px 3px;
  background: linear-gradient(180deg, var(--color-primary), var(--color-primary-dark));
}
.dm-bar-fill--accent { background: linear-gradient(180deg, var(--color-accent), var(--color-accent-dark)); }
.dm-bar-col span { font-size: 0.68rem; color: var(--color-muted); font-weight: 600; }

.dm-list { background: var(--color-surface-alt); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 0.85rem 1rem; }
.dm-list-title { font-size: var(--fs-caption); font-weight: 700; color: var(--color-ink); margin-bottom: 0.55rem; }
.dm-list ul { display: flex; flex-direction: column; gap: 0.5rem; }
.dm-list li { display: flex; align-items: center; gap: 0.55em; font-size: var(--fs-caption); color: var(--color-body); }
.dm-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; }
.dm-dot--warn { background: var(--color-accent); }
.dm-dot--ok { background: var(--color-primary); }

.visual-caption {
  margin-top: 0.75rem;
  text-align: center;
  font-size: var(--fs-caption);
  color: var(--color-muted);
}

/* ---- Coexist band（併存宣言・最重要セクション） ---- */
/* 地を明るくすると、半透明の白文字は「地に近づく」ぶんコントラストが落ちる。
   下の rgba(...) の数値を上げているのはそのため（濃淡の順序＝情報の階層は保っている）。 */
.coexist-section { background: var(--color-surface-deep); }
.coexist-section .section-title,
.coexist-section .eyebrow-label { color: #fff; }
.coexist-head { max-width: 44rem; margin-inline: auto; text-align: center; margin-bottom: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); }
.coexist-eyebrow {
  display: inline-block;
  font-size: var(--fs-caption); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: #cdece6;
  background: rgba(255,255,255,0.08);
  padding: 0.4em 0.95em;
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-sm);
}
.coexist-title { font-size: var(--fs-h2); line-height: var(--lh-heading); letter-spacing: var(--ls-tight); color: #fff; font-weight: 800; }
.coexist-lead { margin-top: var(--space-sm); font-size: var(--fs-lead); color: rgba(255,255,255,0.88); line-height: 1.85; }

.coexist-diagram {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: clamp(1rem, 0.5rem + 2vw, 2rem);
  max-width: 920px;
  margin-inline: auto;
}
.coexist-box {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius-lg);
  padding: clamp(1.3rem, 1rem + 1vw, 1.9rem);
  display: flex; flex-direction: column; gap: 0.55rem;
}
.coexist-box--keario { background: rgba(43, 158, 143, 0.22); border-color: rgba(43, 158, 143, 0.55); }
.coexist-box-label { font-size: var(--fs-caption); font-weight: 700; letter-spacing: 0.08em; color: rgba(255,255,255,0.78); }
.coexist-box strong { font-size: var(--fs-h3); font-weight: 700; color: #fff; line-height: 1.5; }
.coexist-box p { font-size: var(--fs-small); color: rgba(255,255,255,0.86); line-height: 1.75; }
.coexist-tag {
  align-self: flex-start;
  font-size: var(--fs-caption); font-weight: 700;
  color: rgba(255,255,255,0.92);
  background: rgba(255,255,255,0.14);
  padding: 0.3em 0.85em;
  border-radius: var(--radius-pill);
}
.coexist-tag--accent { background: var(--color-accent); color: #3a2a16; }
.coexist-link { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.35rem; color: rgba(255,255,255,0.85); }
.coexist-link-icon { font-size: 1.6rem; color: var(--color-accent); }
.coexist-link-label { font-size: var(--fs-caption); font-weight: 700; letter-spacing: 0.06em; }

.coexist-foot { margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); text-align: center; font-size: var(--fs-small); color: rgba(255,255,255,0.84); max-width: 42rem; margin-inline: auto; line-height: 1.85; }

/* ---- Causal chain（課題：管理→定着→稼働→売上） ---- */
.causal-chain {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: clamp(1.75rem, 1rem + 2vw, 2.5rem);
}
.cc-node {
  font-size: var(--fs-small); font-weight: 700;
  color: var(--color-primary-darker);
  background: var(--color-primary-light);
  padding: 0.65em 1.3em;
  border-radius: var(--radius-pill);
}
.cc-node--accent { color: #fff; background: var(--color-primary-darker); box-shadow: var(--shadow-md); }
.cc-arrow { color: var(--color-border-strong); font-size: 1.1rem; }

.problem-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.1rem, 0.5rem + 1.6vw, 1.6rem); }
.problem-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: clamp(1.4rem, 1rem + 1vw, 1.9rem);
  box-shadow: var(--shadow-sm);
}
.problem-card-tag {
  display: inline-block;
  font-size: var(--fs-caption); font-weight: 700; letter-spacing: 0.08em;
  color: var(--color-primary-darker);
  background: var(--color-primary-light);
  padding: 0.3em 0.85em;
  border-radius: var(--radius-pill);
  margin-bottom: 0.9rem;
}
.problem-card h3 { font-size: var(--fs-h3); line-height: var(--lh-heading); color: var(--color-ink); font-weight: 700; letter-spacing: var(--ls-tight); margin-bottom: 0.6rem; }
.problem-card p { font-size: var(--fs-small); color: var(--color-body); line-height: 1.85; }

.problem-conclusion {
  margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
  text-align: center;
  font-size: var(--fs-lead);
  font-weight: 700;
  color: var(--color-ink);
}

/* ---- 提供価値（大→小） ---- */
.value-kicker {
  text-align: center;
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-primary-darker);
  margin-bottom: 0.6rem;
}
.value-dashboard-wrap { max-width: 760px; margin-inline: auto; margin-bottom: clamp(2.5rem, 1.6rem + 3vw, 4rem); }
.value-dashboard { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; }
.vd-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.9rem; padding: clamp(1.3rem, 0.9rem + 1.2vw, 1.9rem); }
.vd-tile {
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.1rem 1rem;
  display: flex; flex-direction: column; gap: 0.35rem;
  text-align: center;
}
.vd-tile--accent { background: var(--color-primary-tint); border-color: var(--color-primary-light); }
.vd-tile-label { font-size: var(--fs-small); font-weight: 700; color: var(--color-primary-darker); letter-spacing: 0.04em; }
.vd-tile-value { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 800; color: var(--color-ink); letter-spacing: -0.02em; }
.vd-tile-value small { font-size: 0.5em; font-weight: 700; margin-left: 0.15em; color: var(--color-muted); }
.vd-tile-desc { font-size: var(--fs-caption); color: var(--color-muted); line-height: 1.6; }

.value-groups { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.1rem, 0.5rem + 1.6vw, 1.6rem); }
.value-group {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: clamp(1.3rem, 1rem + 1vw, 1.9rem);
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 1rem;
}
.value-group-head { display: flex; align-items: center; gap: 0.7rem; }
.value-group-icon {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: var(--radius-md);
  background: var(--color-primary-light);
  color: var(--color-primary-darker);
  flex: none;
}
.value-group-icon svg { width: 22px; height: 22px; }
.value-group-head h3 { font-size: var(--fs-h3); color: var(--color-ink); font-weight: 700; letter-spacing: var(--ls-tight); }
.value-group-head span { display: block; font-size: var(--fs-caption); color: var(--color-muted); font-weight: 600; margin-top: 0.15em; }
.value-feature { border-top: 1px solid var(--color-border); padding-top: 0.85rem; }
.value-feature:first-of-type { border-top: 0; padding-top: 0; }
.value-feature h4 { font-size: var(--fs-small); font-weight: 700; color: var(--color-ink); margin-bottom: 0.3em; }
.value-feature p { font-size: var(--fs-caption); color: var(--color-body); line-height: 1.75; }

/* 近日提供予定バッジ（未実装機能を正直に明示。現行サイトの tag-soon 表記を踏襲） */
.tag-soon {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: var(--fs-caption);
  font-weight: 700;
  color: var(--color-accent-dark);
  background: #fdf1e5;
  border: 1px solid #f6d9bd;
  padding: 0.25em 0.75em;
  border-radius: var(--radius-pill);
  margin-top: 0.6em;
}
.tag-soon::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent); }

/* ---- 仕組み図（現場が毎日触る → データが貯まる → 1画面） ---- */
.mechanism-flow {
  margin-top: clamp(2.25rem, 1.4rem + 2.5vw, 3.5rem);
  display: flex; align-items: center; justify-content: center;
  gap: clamp(0.75rem, 0.4rem + 1.5vw, 1.5rem);
  flex-wrap: wrap;
}
.mech-step {
  flex: 1 1 220px;
  max-width: 260px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: clamp(1.1rem, 0.9rem + 0.6vw, 1.4rem);
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.mech-step--accent { background: var(--color-primary-darker); border-color: transparent; color: #fff; box-shadow: var(--shadow-md); }
.mech-icon {
  display: grid; place-items: center;
  width: 46px; height: 46px;
  margin-inline: auto;
  border-radius: 50%;
  background: var(--color-primary-light);
  color: var(--color-primary-darker);
  margin-bottom: 0.7rem;
}
.mech-step--accent .mech-icon { background: rgba(255,255,255,0.2); color: #fff; }
.mech-icon svg { width: 22px; height: 22px; }
.mech-step h4 { font-size: var(--fs-small); font-weight: 700; color: var(--color-ink); margin-bottom: 0.4em; }
.mech-step--accent h4 { color: #fff; }
.mech-step p { font-size: var(--fs-caption); color: var(--color-muted); line-height: 1.7; }
.mech-step--accent p { color: rgba(255,255,255,0.85); }
.mech-arrow { color: var(--color-border-strong); font-size: 1.3rem; flex: none; }

/* ---- 導入対象（名指し） ---- */
.audience-card {
  max-width: 860px;
  margin-inline: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
}
.audience-checklist { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.9rem 1.5rem; margin-top: var(--space-md); }
.audience-checklist li { display: flex; gap: 0.7em; align-items: flex-start; font-size: var(--fs-small); color: var(--color-body); line-height: 1.7; }
.audience-checklist .ico { flex: none; width: 20px; height: 20px; margin-top: 0.15em; color: var(--color-primary-darker); }
.audience-note { margin-top: var(--space-lg); padding-top: var(--space-md); border-top: 1px dashed var(--color-border); font-size: var(--fs-small); color: var(--color-muted); line-height: 1.8; }

/* ---- Pricing ---- */
.price-wrap { max-width: 1080px; margin-inline: auto; }
.price-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.1rem, 0.7rem + 1.5vw, 1.75rem); align-items: stretch; }
.price-card { background: var(--color-surface); border: 2px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; display: flex; flex-direction: column; }
.price-card--emph { border: 2px solid var(--color-primary); }
.price-head { position: relative; background: var(--color-primary-darker); color: #fff; padding: clamp(1.6rem, 1rem + 2vw, 2.4rem); text-align: center; }
.price-head::before { content: ""; display: block; height: 1.75rem; margin-bottom: 0.65rem; }
.price-plan { font-size: var(--fs-small); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.9; }
.price-recommendation { position: absolute; top: clamp(1.6rem, 1rem + 2vw, 2.4rem); left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; justify-content: center; padding: 0.3em 0.9em; border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-ink); font-size: var(--fs-caption); font-weight: 800; letter-spacing: 0.08em; white-space: nowrap; }
/* 2026-08-18 代表ご指示: 年額を主役に、月額は（）の補足へ（パンフレット P7 と同じ順序・語彙）。
   .price-kicker（1施設あたり・税別）→ .price-total（年額）→ .price-monthly（月額の補足）→ .price-total-tax の4段。
   ⚠️ 色は .price-head から継承させ、濃淡は opacity だけで作ること。自前で rgba(255,255,255,…) を書くと
      @media print の color:#000!important が効いても白のまま残り、印刷で消える。
   ⚠️ opacity の下限は 0.85（#1c6f64 上の白文字で 0.9≒5.2:1／0.7≒3.8:1 で不足する）。 */
.price-total { margin-top: 0.35em; text-align: center; white-space: nowrap; }
.price-total .amount { font-size: clamp(1.6rem, 1.1rem + 1.5vw, 2.25rem); font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* 「円」は .amount の内側に置き em で指定する。外側や絶対値で指定すると本文サイズ基準になり潰れる。 */
.price-total .yen { font-size: 0.5em; font-weight: 700; letter-spacing: normal; }
.price-kicker { margin-top: 0.15em; font-size: var(--fs-caption); font-weight: 700; letter-spacing: 0.04em; opacity: 0.9; }
.price-monthly { margin-top: 0.2em; font-size: var(--fs-small); font-weight: 600; opacity: 0.92; }
.price-total-tax { margin-top: 0.3em; font-size: var(--fs-caption); opacity: 0.88; }
.price-caption { margin-top: 0.65em; font-size: var(--fs-caption); opacity: 0.9; line-height: 1.75; }
.price-headline { margin-top: 0.9em; font-size: var(--fs-small); font-weight: 700; background: rgba(255,255,255,0.16); display: inline-block; padding: 0.5em 1.1em; border-radius: var(--radius-pill); }

.price-body { padding: clamp(1.4rem, 1rem + 1.5vw, 2.2rem); display: flex; flex: 1; flex-direction: column; }
.price-rows { display: flex; flex-direction: column; margin: 0; }
/* dl/dt/dd 化（読み上げで「初期設定費＝なし」が対として伝わる）。
   ⚠️ dd の既定 margin-inline-start:40px を打ち消さないと、スマホの1列表示で値だけ右へずれる。 */
.price-row dt, .price-row dd { margin: 0; }
.price-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 1rem; padding: 0.95rem 0; border-bottom: 1px dashed var(--color-border); }
.price-row:last-child { border-bottom: 0; }
.price-row .label { font-weight: 600; color: var(--color-ink); }
.price-row .label small { display: block; font-weight: 500; font-size: var(--fs-caption); color: var(--color-body); }
/* 条件の説明は「見出し語」ではなく「説明」側に置く（読み上げが 契約期間→初回12か月→注記 の順になる）。
   全幅の1行にして、右寄せの .value 列に長文が押し込まれないようにする。
   ⚠️ 色は --color-muted(#6c7b77=4.43:1) ではなく --color-body(#3f4b48=9.09:1) を使うこと。
      ここには初期設定の範囲・支払期日・中途解約と返金という「後で揉める論点」が入る。 */
/* ⚠️ flex-basis は「主軸」の指定。スマホ幅では .price-row が flex-direction:column になるため、
      flex-basis:100% は「高さ100%」と解釈され、注記が別の段へ押し出されて右端で切れる（2026-08-18 実測）。
      向きに依存しない width:100% を使うこと。 */
.price-row .note { width: 100%; flex-basis: auto; margin: 0.4rem 0 0; font-size: var(--fs-caption); line-height: 1.7; color: var(--color-body); text-align: left; }
.price-row .value { text-align: right; font-weight: 700; color: var(--color-ink); white-space: nowrap; }
.price-row .value small { display: block; font-weight: 500; font-size: var(--fs-caption); color: var(--color-body); white-space: normal; }
.price-row--sub .value, .price-row--sub .label { color: var(--color-muted); font-weight: 600; }
/* ⚠️ 未使用（2026-08-18）: 年額を強調するための箱だったが、年額がカード上部の主表示へ移ったため
   HTML から外した（同じ金額を大小2箇所に置くと、片方だけ改訂されて食い違う事故の型になる）。
   .price-headline と .price-row--sub も以前から未使用。次に料金カードを触る際にまとめて掃除する。 */
.price-row--emph { margin-top: 0.4rem; padding: 1.1rem 1.1rem; background: var(--color-primary-tint); border: 1px solid var(--color-primary-light); border-radius: var(--radius-md); }
.price-row--emph .value .amount { font-size: 1.35rem; color: var(--color-primary-darker); }

.price-actions { margin-top: var(--space-lg); text-align: center; }
.price-actions .btn { margin-top: var(--space-md); }
.price-note { margin-top: var(--space-md); font-size: var(--fs-caption); color: var(--color-muted); line-height: 1.7; }
/* 機能比較表の列見出しに添える月額換算。⚠️ .feature-scope を流用しないこと
   （color:#3f4b48 が濃緑地 #1c6f64 に乗りコントラスト約1.5:1）。色は th から継承させる。 */
.feature-plan-sub { display: block; margin-top: 0.15em; font-size: var(--fs-caption); font-weight: 600; letter-spacing: normal; opacity: 0.88; }
.price-common { margin: clamp(1.25rem, 0.9rem + 1vw, 1.75rem) auto 0; text-align: center; font-size: var(--fs-small); font-weight: 700; color: var(--color-primary-darker); }

.price-anchor {
  max-width: 760px;
  margin: clamp(1.5rem, 1rem + 1.5vw, 2.25rem) auto 0;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius-md);
  padding: 1.1rem 1.3rem;
  font-size: var(--fs-small);
  color: var(--color-body);
  line-height: 1.85;
}
.price-anchor strong { color: var(--color-ink); }

/* 機能比較への案内。主役は年額、月額は（）の補足（2026-08-18 代表ご指示・パンフレット P7 に合わせる） */
.price-reference {
  margin-top: auto;
  padding-top: 0.9rem;
  font-size: var(--fs-caption);
  color: var(--color-muted);
  line-height: 1.8;
}

/* プラン別機能比較（横幅が足りないときは表だけを横スクロール） */
.feature-comparison {
  margin-top: clamp(2rem, 1.4rem + 2vw, 3rem);
  padding: clamp(1.25rem, 0.9rem + 1.5vw, 2rem);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.feature-comparison-head { text-align: center; }
.feature-comparison-head h3 { font-size: var(--fs-h3); color: var(--color-ink); font-weight: 700; letter-spacing: var(--ls-tight); }
.feature-comparison-head p { margin-top: 0.35rem; font-size: var(--fs-small); color: var(--color-body); }
.feature-legend { margin-top: var(--space-md); text-align: right; font-size: var(--fs-caption); color: var(--color-body); }
.feature-legend span:first-child { color: var(--color-primary-darker); }
.feature-scroll-hint { display: none; }
.feature-table-scroll { position: relative; max-width: 100%; margin-top: var(--space-xs); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.feature-table { width: 100%; min-width: 720px; border-collapse: collapse; background: var(--color-surface); border: 1px solid var(--color-border); }
.feature-table th, .feature-table td { padding: 0.9rem 1rem; border-bottom: 1px solid var(--color-border); font-size: var(--fs-small); line-height: 1.6; }
.feature-table tr:last-child th, .feature-table tr:last-child td { border-bottom: 0; }
.feature-table thead th { background: var(--color-primary-darker); color: #fff; text-align: center; font-weight: 700; }
.feature-table thead th:first-child { width: 46%; text-align: left; }
.feature-table tbody th { color: var(--color-ink); text-align: left; font-weight: 700; }
.feature-table tbody td { width: 18%; text-align: center; border-left: 1px solid var(--color-border); }
.feature-scope { display: block; margin-top: 0.2em; font-size: var(--fs-caption); font-weight: 500; color: var(--color-body); }
.feature-availability { display: inline-block; min-width: 1.2em; font-size: 1.15rem; font-weight: 800; line-height: 1; }
.feature-availability--included { color: var(--color-primary-darker); }
.feature-availability--not-included { color: var(--color-body); }

.feature-facility-note {
  margin-top: var(--space-md);
  padding: 1rem 1.15rem;
  background: var(--color-primary-tint);
  border: 1px solid var(--color-primary-light);
  border-radius: var(--radius-md);
}
.feature-facility-note h4 { font-size: var(--fs-small); font-weight: 700; color: var(--color-ink); margin-bottom: 0.35rem; }
.feature-facility-note p { font-size: var(--fs-caption); color: var(--color-body); line-height: 1.85; }
.feature-facility-note strong { color: var(--color-ink); }

@media (min-width: 821px) {
  .price-grid { grid-template-rows: auto auto; row-gap: 0; }
  .price-card { display: grid; grid-template-rows: subgrid; grid-row: span 2; }
}

/* ご契約条件（12か月分の一括払い・契約期間・解約予告・90日解約と未経過分返金・トライアル不提供を明記） */
.contract-terms {
  margin-top: var(--space-lg);
  padding: 1.1rem 1.3rem;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.contract-terms h4 { font-size: var(--fs-small); font-weight: 700; color: var(--color-ink); margin-bottom: 0.65rem; }
.contract-terms ul { display: flex; flex-direction: column; gap: 0.55rem; }
.contract-terms li { font-size: var(--fs-caption); color: var(--color-body); line-height: 1.8; padding-left: 1.1em; position: relative; }
.contract-terms li::before { content: "・"; position: absolute; left: 0; color: var(--color-primary-darker); font-weight: 700; }
.contract-terms strong { color: var(--color-ink); font-weight: 700; }

/* ---- Steps ---- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 0.4rem + 1.6vw, 1.6rem); margin: 0; padding: 0; list-style: none; }
.step { position: relative; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: clamp(1.3rem, 1rem + 1vw, 1.8rem); box-shadow: var(--shadow-sm); }
.step-num { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--color-primary-darker); color: #fff; font-weight: 800; font-size: 1.05rem; margin-bottom: var(--space-sm); }
.step h3 { font-size: 1.05rem; color: var(--color-ink); font-weight: 700; margin-bottom: 0.35em; }
.step p { font-size: var(--fs-small); color: var(--color-body); line-height: 1.8; }

/* ---- FAQ ---- */
.faq-list { max-width: 800px; margin-inline: auto; display: flex; flex-direction: column; gap: 0.85rem; margin-top: clamp(2.25rem, 1.5rem + 2vw, 3.25rem); }
.faq-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.05rem 1.3rem;
  font-weight: 700;
  color: var(--color-ink);
  font-size: var(--fs-small);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  flex: none;
  display: grid; place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--color-primary-light);
  color: var(--color-primary-darker);
  font-weight: 800;
  transition: transform var(--transition);
}
.faq-item[open] summary::after { content: "−"; }
.faq-item .faq-a { padding: 0 1.3rem 1.2rem; font-size: var(--fs-small); color: var(--color-body); line-height: 1.85; border-top: 1px solid var(--color-border); padding-top: 0.9rem; }
.faq-item[open] summary { border-bottom: 0; }

/* ---- Lead form（お問い合わせ・資料DL） ---- */
.contact-wrap { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(1.75rem, 1rem + 3vw, 3.5rem); align-items: start; }
.contact-side h3 { font-size: var(--fs-h3); color: var(--color-ink); font-weight: 700; margin-bottom: 0.6rem; letter-spacing: var(--ls-tight); }
.contact-side p { font-size: var(--fs-small); color: var(--color-body); line-height: 1.85; }
.contact-side-list { margin-top: var(--space-md); display: flex; flex-direction: column; gap: 0.75rem; }
.contact-side-list li { display: flex; gap: 0.65em; font-size: var(--fs-small); color: var(--color-body); line-height: 1.7; }
.contact-side-list .ico { flex: none; width: 18px; height: 18px; margin-top: 0.2em; color: var(--color-primary-darker); }
.contact-side-email { margin-top: var(--space-md); padding-top: var(--space-md); border-top: 1px dashed var(--color-border); font-size: var(--fs-small); }
.contact-side-email a { color: var(--color-primary-darker); font-weight: 700; }

.lead-form {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
  display: flex; flex-direction: column; gap: 1.1rem;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.lead-form label { display: flex; flex-direction: column; gap: 0.4rem; font-size: var(--fs-small); font-weight: 700; color: var(--color-ink); }
.req-mark { font-size: var(--fs-caption); font-weight: 700; color: #92400e; background: #fdf1e5; border: 1px solid #f6d9bd; padding: 0.1em 0.55em; border-radius: var(--radius-pill); margin-left: 0.35em; vertical-align: middle; }
.lead-form input,
.lead-form select,
.lead-form textarea {
  font-family: inherit;
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--color-body);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  padding: 0.75em 0.9em;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.lead-form input:focus,
.lead-form select:focus,
.lead-form textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light);
}
.lead-form textarea { resize: vertical; min-height: 6.5em; }
.form-note { font-size: var(--fs-caption); color: var(--color-muted); line-height: 1.8; }
.form-status { font-size: var(--fs-small); font-weight: 700; color: var(--color-primary-darker); display: none; }
.form-status.is-visible { display: block; }

/* スパム対策：ハニーポット（人には見えない・ボットには通常のフォーム項目に見える） */
.hp-field {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* サーバー側検証NG時のエラー表示 */
.form-error {
  display: none;
  font-size: var(--fs-small);
  font-weight: 700;
  color: #b91c1c;
  background: #fdf1e5;
  border: 1px solid #f6d9bd;
  border-radius: var(--radius-sm);
  padding: 0.85em 1.1em;
  line-height: 1.7;
}
.form-error.is-visible { display: block; }

/* ---- 送信完了ページ（thanks.html） ---- */
.thanks-icon {
  display: grid;
  place-items: center;
  width: 72px; height: 72px;
  margin: 0 auto var(--space-lg);
  border-radius: 50%;
  background: var(--color-primary-light);
  color: var(--color-primary-darker);
}
.thanks-icon svg { width: 34px; height: 34px; }
.thanks-actions { margin-top: var(--space-lg); }

/* ---- Company ---- */
.company-card { max-width: 760px; margin-inline: auto; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: clamp(1.6rem, 1rem + 2vw, 2.75rem); }
.company-dl { display: grid; grid-template-columns: 160px 1fr; gap: 0; }
.company-dl > dt, .company-dl > dd { padding: 0.95rem 0; border-bottom: 1px solid var(--color-border); }
.company-dl > dt { font-weight: 700; color: var(--color-ink); }
.company-dl > dd { color: var(--color-body); }
.company-dl > dt:last-of-type, .company-dl > dd:last-of-type { border-bottom: 0; }
.placeholder-text { color: var(--color-muted); font-style: normal; }
.company-brand-note { margin-top: var(--space-md); font-size: var(--fs-caption); color: var(--color-muted); line-height: 1.8; }

/* ---- CTA band ---- */
.cta-band { background: var(--color-primary-darker); color: #fff; border-radius: var(--radius-lg); padding: clamp(2.25rem, 1.5rem + 3vw, 4rem); text-align: center; box-shadow: var(--shadow-lg); }
.cta-band h2 { font-size: var(--fs-h2); line-height: var(--lh-heading); letter-spacing: var(--ls-tight); font-weight: 800; }
.cta-band p { margin-top: var(--space-sm); font-size: var(--fs-lead); opacity: 0.95; max-width: 40rem; margin-inline: auto; }
.cta-band .cta-actions { margin-top: var(--space-lg); display: flex; flex-wrap: wrap; gap: var(--space-sm); justify-content: center; }
.cta-band-note { margin-top: var(--space-md); font-size: var(--fs-caption); opacity: 0.85; }
.cta-band-steps { margin-top: var(--space-lg); display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem 1.4rem; }
.cta-band-steps span { font-size: var(--fs-caption); font-weight: 700; opacity: 0.9; background: rgba(255,255,255,0.14); padding: 0.4em 0.95em; border-radius: var(--radius-pill); }

/* ---- Footer ---- */
.site-footer { background: var(--color-ink); color: rgba(255,255,255,0.82); padding-block: clamp(2.5rem, 2rem + 2vw, 3.5rem) 2rem; margin-top: var(--section-y); }
.footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-lg); padding-bottom: var(--space-lg); border-bottom: 1px solid rgba(255,255,255,0.12); }
.footer-brand .brand-name { color: #fff; }
/* ヘッダーの「LIVING」は明るい地の上なので濃いティール #1c6f64 でよいが、
   その色を濃いフッターに載せると 2.35:1 で読めない。濃い地では明るいティールへ反転させる。
   色はブランド #2B9E8F を白へ39%寄せたもの（色相は同じ 172.2°）。
   明るさは、ヘッダーで成立している「LIVING は Keario と地の間の69%の位置」を
   濃い地に写して決めた。地との差 7.04:1、白の「Keario」14.06:1 より一段控えめ。 */
.footer-brand .brand-sub { color: #7FC4BB; }
.footer-brand p { margin-top: var(--space-sm); font-size: var(--fs-small); color: rgba(255,255,255,0.7); max-width: 30rem; }
.footer-tagline { margin-top: 0.6rem; font-size: var(--fs-caption); color: rgba(255,255,255,0.5); }
.footer-nav { display: flex; flex-wrap: wrap; gap: clamp(1.5rem, 1rem + 2vw, 3rem); }
.footer-col h4 { font-size: var(--fs-caption); letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.55); margin-bottom: var(--space-sm); font-weight: 700; }
.footer-col ul { display: flex; flex-direction: column; gap: 0.65rem; }
.footer-col a { font-size: var(--fs-small); color: rgba(255,255,255,0.82); transition: color var(--transition); }
.footer-col a:hover { color: #fff; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-sm); padding-top: var(--space-md); font-size: var(--fs-caption); color: rgba(255,255,255,0.6); }
.footer-legal { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.footer-legal a { color: rgba(255,255,255,0.75); }
.footer-legal a:hover { color: #fff; }

/* =============================================================
   6. LEGAL / DOCUMENT PAGES（特商法・利用規約・プライバシー・SLA）
   living-lp トークンを流用しつつ、可読性重視（本文行長を絞り・目次・
   条文見出しの階層を明示）。site/styles.css の doc-* 設計を踏襲。
   ============================================================= */
.doc-main { padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem) var(--section-y); }
.doc { max-width: 780px; margin-inline: auto; }

.doc-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-size: var(--fs-caption);
  font-weight: 700;
  color: var(--color-accent-dark);
  background: #fdf1e5;
  border: 1px solid #f6d9bd;
  padding: 0.35em 0.9em;
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-md);
}
.doc-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent); }

.doc h1 {
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-tight);
  color: var(--color-ink);
  font-weight: 800;
  margin-bottom: var(--space-sm);
}
.doc-lead { color: var(--color-muted); font-size: var(--fs-lead); line-height: 1.9; margin-bottom: var(--space-lg); }
.doc-meta { font-size: var(--fs-caption); color: var(--color-muted); margin-bottom: var(--space-lg); display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; }
.doc-meta strong { color: var(--color-ink); }
.doc-back { display: inline-block; margin-top: var(--space-lg); font-weight: 600; color: var(--color-primary-darker); }
.doc-back:hover { text-decoration: underline; }
.doc a { color: var(--color-primary-darker); font-weight: 600; }
.doc a:hover { text-decoration: underline; }

/* 送信完了ページ（thanks.html）の「トップへ戻る」は .doc の内側にあるため、
   上の .doc a（詳細度 0,1,1）が .btn--primary（0,1,0）に勝ち、文字色が地色と
   同じ #1c6f64 になって読めなくなる。ここで打ち消す。 */
.doc .btn--primary { color: #fff; }

/* 目次 */
.doc-toc {
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.2rem 1.5rem;
  margin-bottom: clamp(2rem, 1.5rem + 1.5vw, 3rem);
}
.doc-toc h2 { font-size: var(--fs-small); font-weight: 700; letter-spacing: 0.06em; color: var(--color-ink); margin-bottom: 0.7rem; }
.doc-toc ol { list-style: decimal; padding-left: 1.3rem; display: flex; flex-direction: column; gap: 0.4rem; columns: 1; }
.doc-toc li { font-size: var(--fs-small); line-height: 1.6; }
.doc-toc a { color: var(--color-primary-darker); font-weight: 600; }

/* 表 */
.doc-table { width: 100%; border-collapse: collapse; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; }
.doc-table th, .doc-table td { text-align: left; vertical-align: top; padding: 1rem 1.25rem; border-bottom: 1px solid var(--color-border); line-height: 1.7; font-size: var(--fs-small); }
.doc-table tr:last-child th, .doc-table tr:last-child td { border-bottom: 0; }
.doc-table th { width: 30%; font-weight: 700; color: var(--color-ink); background: var(--color-primary-tint); border-right: 1px solid var(--color-border); }
.doc-table td { color: var(--color-body); }
.doc-table th small { display: block; margin-top: 0.15em; font-weight: 500; font-size: var(--fs-caption); color: var(--color-muted); }

.req {
  display: inline-block;
  font-size: var(--fs-caption);
  font-weight: 700;
  color: var(--color-accent-dark);
  background: #fdf1e5;
  border: 1px dashed #e6b98a;
  padding: 0.2em 0.7em;
  border-radius: var(--radius-sm);
}
.doc-note { margin-top: var(--space-md); font-size: var(--fs-caption); color: var(--color-muted); line-height: 1.8; }

/* 条文・節（利用規約／プライバシー／SLA共通） */
.doc-sections { display: flex; flex-direction: column; gap: clamp(1.9rem, 1.5rem + 1.4vw, 2.75rem); margin-top: var(--space-md); }
.doc-section > h2 {
  display: flex; align-items: flex-start; gap: 0.6em;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-tight);
  color: var(--color-ink);
  font-weight: 700;
}
.doc-section-num {
  flex: none;
  display: grid; place-items: center;
  width: 1.85em; height: 1.85em;
  margin-top: 0.05em;
  border-radius: var(--radius-pill);
  background: var(--color-primary-light);
  color: var(--color-primary-darker);
  font-size: 0.82em;
  font-weight: 800;
}
.doc-section > p { margin-top: var(--space-sm); color: var(--color-body); line-height: var(--lh-body); }
.doc-section > p strong { color: var(--color-ink); font-weight: 700; }
.doc-section > .doc-table { margin-top: var(--space-md); }
.doc-section-sub { margin-top: var(--space-md); font-size: var(--fs-small); font-weight: 700; color: var(--color-primary-darker); }

/* 2026-08-08 修正: li を flex にしていたため、文中の <strong>／<span class="req"> が
   それぞれ独立した列になり、「施設を追加される場合」等の長い強調語が縦一列に潰れていた
   （8/6 に第4条へ長い強調語を追記した時点から発生・法務2ページで計16か所）。
   印（●／番号）を絶対配置に変え、li を通常の文章ブロックへ戻す。字下げ幅は従来と同値。 */
.doc-list { display: flex; flex-direction: column; gap: 0.7rem; margin-top: var(--space-sm); }
.doc-list li { position: relative; display: block; padding-left: calc(7px + 0.7em); line-height: 1.85; color: var(--color-body); font-size: var(--fs-small); }
.doc-list li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 7px; height: 7px; border-radius: 50%; background: var(--color-primary); }
.doc-list--num { counter-reset: doclist; }
.doc-list--num li { counter-increment: doclist; padding-left: 2.1em; }
.doc-list--num li::before { content: counter(doclist) "."; position: absolute; left: 0; top: 0; width: 1.6em; height: auto; text-align: right; border-radius: 0; background: none; color: var(--color-primary-darker); font-weight: 700; font-size: var(--fs-small); }

.doc-callout {
  margin-top: var(--space-md);
  padding: 0.85rem 1.15rem;
  background: var(--color-primary-tint);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-sm);
  font-size: var(--fs-small);
  color: var(--color-primary-darker);
  line-height: 1.85;
}
.doc-callout--warn {
  background: #fdf1e5;
  border-left-color: var(--color-accent);
  color: #7a4a1f;
}

/* =============================================================
   5. RESPONSIVE
   ============================================================= */
@media (max-width: 960px) {
  .steps { grid-template-columns: repeat(2, 1fr); }
  .problem-grid { grid-template-columns: 1fr; }
  .value-groups { grid-template-columns: 1fr; }
  .vd-tiles { grid-template-columns: 1fr; }
  .contact-wrap { grid-template-columns: 1fr; }
  .coexist-diagram { grid-template-columns: 1fr; }
  .coexist-link { flex-direction: row; padding-block: 0.5rem; }
}

@media (max-width: 820px) {
  .nav-links { display: none; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { order: -1; max-width: 480px; margin-inline: auto; }
  .hero-lead { max-width: none; }
  .audience-checklist { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .mechanism-flow { flex-direction: column; }
  .mech-step { max-width: none; width: 100%; }
  .mech-arrow { transform: rotate(90deg); }
  .price-grid { grid-template-columns: 1fr; max-width: 640px; margin-inline: auto; }
}

@media (min-width: 561px) and (max-width: 768px) {
  .feature-scroll-hint {
    display: block;
    margin-top: 0.35rem;
    text-align: right;
    font-size: var(--fs-caption);
    font-weight: 600;
    color: var(--color-body);
  }
  .feature-table-scroll::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 2.5rem;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), var(--color-surface));
  }
}

@media (max-width: 560px) {
  .steps { grid-template-columns: 1fr; }
  .dm-kpis { grid-template-columns: 1fr; }
  .company-dl { grid-template-columns: 1fr; }
  .company-dl > dt { padding-bottom: 0.2rem; border-bottom: 0; }
  .company-dl > dd { padding-top: 0.2rem; }
  .company-dl > dt:not(:first-of-type) { padding-top: 1rem; border-top: 1px solid var(--color-border); }
  .brand-sub { display: none; }
  .btn { width: 100%; }
  .nav-actions .btn { width: auto; }
  .price-row { flex-direction: column; gap: 0.2rem; }
  .price-row .value { text-align: left; }
  .feature-legend { text-align: left; }
  .feature-table-scroll { overflow: visible; }
  .feature-table-scroll::after { content: none; }
  .feature-table { display: block; width: 100%; min-width: 0; border: 0; background: transparent; }
  .feature-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .feature-table tbody { display: grid; gap: 0.85rem; }
  .feature-table tbody tr { display: block; width: 100%; overflow: hidden; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
  .feature-table tbody th { display: block; width: 100%; padding: 0.85rem 1rem; background: var(--color-primary-tint); border-bottom: 1px solid var(--color-border); }
  .feature-table tbody td { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0.75rem 1rem; text-align: right; border-left: 0; border-bottom: 1px solid var(--color-border); }
  .feature-table tbody td::before { font-size: var(--fs-small); font-weight: 700; color: var(--color-ink); }
  /* ⚠️ スマホで実際に見える列名はここ。index.html の <th> と必ず同時に直すこと。
     HTML を grep しても出てこないため、片方だけ直すと PC は新表記・スマホは旧価格になる。 */
  .feature-table tbody td:first-of-type::before { content: "ベーシック"; }
  .feature-table tbody td:nth-of-type(2)::before { content: "スタンダード"; }
  .feature-table tbody td:last-of-type::before { content: "アドバンス"; }
  .feature-table tbody td:last-child { border-bottom: 0; }
  .doc-table, .doc-table tbody, .doc-table tr, .doc-table th, .doc-table td { display: block; width: 100%; }
  .doc-table th { border-right: 0; }
  .doc-table td { border-bottom: 1px solid var(--color-border); }
  .doc-table tr:last-child td { border-bottom: 0; }
}

@media print {
  @page { size: A4 portrait; margin: 12mm; }

  html { scroll-behavior: auto; }
  body { background: #fff; color: #000; overflow: visible; }
  .section, .section--tint { background: #fff !important; }

  .price-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6mm; max-width: none; }
  .price-card, .price-card--emph { display: flex; border: 1px solid #555; box-shadow: none; break-inside: avoid; }
  .price-head { background: #fff !important; color: #000 !important; padding: 7mm 5mm 5mm; }
  .price-head::before { display: none; }
  .price-total .amount { font-size: 18pt; }
  .price-plan, .price-kicker, .price-total, .price-monthly, .price-total-tax, .price-caption { color: #000 !important; opacity: 1; }
  .price-recommendation { position: static; transform: none; margin-bottom: 2mm; background: #fff !important; color: #000 !important; border: 1px solid #555; }
  .price-body, .price-row--emph { background: #fff !important; }

  .feature-comparison { padding: 0; border: 0; box-shadow: none; }
  .feature-scroll-hint { display: none; }
  .feature-table-scroll { overflow: visible; }
  .feature-table-scroll::after { content: none; }
  .feature-table { display: table; width: 100%; min-width: 0; table-layout: fixed; border-color: #777; }
  .feature-table thead { display: table-header-group; position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: normal; }
  .feature-table tbody { display: table-row-group; }
  .feature-table tr { display: table-row; }
  .feature-table th, .feature-table td { display: table-cell; padding: 2.2mm 2.5mm; border-color: #777; font-size: 7.5pt; color: #000 !important; }
  .feature-table thead th { background: #fff !important; color: #000 !important; border: 1px solid #777; }
  .feature-table thead th:first-child { width: 46%; }
  .feature-table tbody th { width: 46%; background: #fff !important; }
  .feature-table tbody td { width: 18%; border-left: 1px solid #777; }
  .feature-table tbody td::before { content: none !important; }
  .feature-availability { color: #000 !important; }
  .feature-facility-note { background: #fff !important; border-color: #777; }
}