@charset "UTF-8";
/* ==========================================================================
   プロセント 医薬品輸入代行サービス  v2
   1ファイル構成：トークン → 基礎 → 共通部品 → ページ別 → レスポンシブ
   余白は 8px グリッド。色は :root のトークンのみを使う。
   文字が載る青は --c-blue-dark / --c-navy（白文字で AA 以上）。
   --c-blue（#2686EC）は線・アイコン・図形などの非文字要素に使う。
   ========================================================================== */

:root {
  --c-bg: #FFFFFF;
  --c-surface: #F5F7FA;     /* 面（#F7F7F7 をわずかに青へ寄せた） */
  --c-text: #26303C;        /* 文字（#333 を青みに寄せた。白地で 13:1） */
  --c-sub: #5A6676;         /* 補助文字（白地で 5.9:1） */
  --c-line: #E3E8EE;
  --c-line-strong: #C9D2DD;
  --c-input: #8792A2;       /* 入力欄の枠（白地で 3:1 以上） */
  --c-blue: #2686EC;        /* ブランドの青：線・アイコン・図形用 */
  --c-blue-dark: #1B5FAE;   /* 文字が載る青・リンク（白文字で 6.6:1） */
  --c-navy: #10335F;        /* 濃い面・強調見出し */
  --c-blue-pale: #EAF3FD;
  --c-blue-tint: #F4F8FE;
  --c-green: #7FCB3E;
  --c-green-dark: #3F7A12;
  --c-footer: #151A21;
  --c-req: #ED6E6E;
  --c-error: #B42318;
  --c-todo: #FFE14D;        /* 未確定箇所のマーカー（公開前に必ず差し替える） */

  --f-base: "Inter", "Noto Sans JP", "Noto Sans CJK JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  --f-num: "Inter", "Noto Sans JP", sans-serif;

  --w-content: 1120px;
  --gutter: 40px;
  --sec: 112px;
  --radius: 8px;
  --header-h: 80px;
}

/* ---------- 基礎 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 24px); }
body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--f-base);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.85;
  letter-spacing: .02em;
  line-break: strict;
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, fieldset, address { margin: 0; padding: 0; }
ul, ol { list-style: none; }
fieldset { border: 0; min-width: 0; }
address { font-style: normal; }
img, svg { max-width: 100%; height: auto; vertical-align: middle; }
table { border-collapse: collapse; width: 100%; }
a { color: var(--c-blue-dark); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); transition: color .15s, text-decoration-color .15s; }
a:hover { text-decoration-color: currentColor; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
strong { font-weight: 700; }
/* 見出しは約物を詰め、文節で折り返す。本文は詰めない（可読性優先） */
h1, h2, h3, .lead-title, .fact__main { font-feature-settings: "palt"; letter-spacing: .04em; word-break: auto-phrase; text-wrap: balance; }
.num { white-space: nowrap; font-family: var(--f-num); font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum", "cv11"; letter-spacing: -.01em; }
:focus-visible { outline: 2px solid var(--c-blue-dark); outline-offset: 3px; border-radius: 3px; }
[hidden] { display: none !important; }
::selection { background: #CFE2F9; }

.container { width: 100%; max-width: calc(var(--w-content) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.container--mid { max-width: calc(960px + var(--gutter) * 2); }
.container--narrow { max-width: calc(880px + var(--gutter) * 2); }
.container--doc { max-width: calc(760px + var(--gutter) * 2); }
.container--form { max-width: calc(720px + var(--gutter) * 2); }

/* ---------- 未確定箇所（公開前に必ず人が差し替える。非表示の切替は設けない） ---------- */
.todo {
  background: var(--c-todo);
  color: #333333;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px #C9A400 inset;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  font-family: var(--f-base);
  font-size: max(.8em, 12px);
  letter-spacing: 0;
}
.todo-block { margin-bottom: 24px; font-size: 14px; }
.todo-block .todo, .doc .todo, .table .todo { font-size: inherit; }
.draft-bar {
  background: var(--c-todo);
  color: #333333;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  padding: 6px 16px;
}

/* ---------- ヘッダー ---------- */
.skip { position: absolute; left: 8px; top: -80px; z-index: 100; background: #fff; padding: 8px 16px; border: 2px solid var(--c-blue-dark); border-radius: var(--radius); }
.skip:focus { top: 8px; }
.top-note { background: var(--c-navy); color: #fff; font-size: 13px; line-height: 32px; min-height: 32px; text-align: center; padding-inline: 16px; letter-spacing: .06em; }
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .97); border-bottom: 1px solid var(--c-line); transition: box-shadow .2s; }
.site-header.is-scrolled { box-shadow: 0 1px 12px rgba(16, 51, 95, .08); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: var(--header-h); transition: height .2s; }
.site-header.is-scrolled .site-header__inner { height: 64px; }
.brand { display: flex; align-items: center; gap: 16px; color: var(--c-text); text-decoration: none; flex-shrink: 0; }
.brand img { height: 26px; width: auto; }
.brand__name { font-size: 13px; font-weight: 700; line-height: 1; padding-left: 16px; border-left: 1px solid var(--c-line-strong); white-space: nowrap; letter-spacing: .08em; }
.gnav { display: flex; align-items: center; gap: 40px; }
.gnav__list { display: flex; gap: 36px; }
.gnav__list a { position: relative; display: block; padding: 14px 0; color: var(--c-text); font-size: 15px; font-weight: 500; line-height: 1; text-decoration: none; white-space: nowrap; }
.gnav__list a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 2px; background: var(--c-blue-dark); transform: scaleX(0); transform-origin: left; transition: transform .2s; }
.gnav__list a:hover { color: var(--c-blue-dark); }
.gnav__list a:hover::after, .gnav__list a[aria-current="page"]::after { transform: scaleX(1); }
.gnav__list a[aria-current="page"] { color: var(--c-blue-dark); font-weight: 700; }
.menu-btn, .site-header .header-cta { display: none; }
.gnav__cta, .header-cta { white-space: nowrap; }

/* ---------- ボタン ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  min-height: 56px; padding: 12px 36px 12px 40px;
  border: 1.500px solid var(--c-blue-dark); border-radius: 999px;
  font-size: 16px; font-weight: 700; line-height: 1.4; letter-spacing: .04em; text-align: center; text-decoration: none;
  cursor: pointer; transition: background-color .2s, border-color .2s, color .2s;
}
.btn::after { content: ""; flex: none; width: 7px; height: 7px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s; }
.btn:hover::after { transform: translateX(4px) rotate(45deg); }
.btn--primary { background: var(--c-blue-dark); color: #fff; }
.btn--primary:hover { background: var(--c-navy); border-color: var(--c-navy); }
.btn--secondary { background: #fff; color: var(--c-blue-dark); }
.btn--secondary:hover { background: var(--c-blue-pale); }
.btn--white { background: #fff; border-color: #fff; color: var(--c-navy); }
.btn--white:hover { background: var(--c-blue-pale); border-color: var(--c-blue-pale); }
.btn--sm { min-height: 44px; padding: 8px 22px 8px 26px; font-size: 14px; gap: 10px; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .6; cursor: default; }
.center-btn { margin-top: 48px; text-align: center; }
.arrow-link { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; text-decoration: none; padding-block: 8px; }
.arrow-link::after { content: ""; width: 7px; height: 7px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s; }
.arrow-link:hover { text-decoration: underline; }
.arrow-link:hover::after { transform: translateX(4px) rotate(45deg); }
.right-link { margin-top: 32px; text-align: right; }

/* ---------- セクション・見出し ---------- */
.section { padding-block: var(--sec); }
.section--gray { background: var(--c-surface); }
.section--blue { background: var(--c-blue-tint); }
.section--line { border-top: 1px solid var(--c-line); }
.section--tight { padding-block: 72px; }
.section--first { padding-top: 72px; }
.sec-head { margin-bottom: 48px; }
.sec-head--row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.sec-head--center { text-align: center; }
.sec-title { font-size: 32px; font-weight: 700; line-height: 1.45; }
.sec-en, .page-head__en { margin-bottom: 12px; color: var(--c-blue-dark); font-family: var(--f-num); font-size: 13px; font-weight: 700; line-height: 1; letter-spacing: .14em; text-transform: uppercase; }
.sec-lead { margin-top: 20px; max-width: 40em; }
.lead-title { font-size: 32px; font-weight: 700; line-height: 1.5; }
.lead-title--sm { font-size: 24px; color: var(--c-navy); }
.note, .notes { color: var(--c-sub); font-size: 14px; line-height: 1.75; }
.notes { margin-top: 24px; }
.notes li + li { margin-top: 4px; }
.notes li, p.note { padding-left: 1.4em; text-indent: -1.4em; }
.note { margin-top: 16px; }
.label { display: inline-block; padding: 4px 12px; border: 1px solid var(--c-line-strong); border-radius: 999px; color: var(--c-blue-dark); background: #fff; font-size: 12px; font-weight: 700; line-height: 1.2; white-space: nowrap; letter-spacing: .06em; }

/* 見出しを左、内容を右に置く2カラム */
.side { display: grid; grid-template-columns: 304px minmax(0, 1fr); gap: 48px 96px; align-items: start; }
.side__head { position: sticky; top: calc(var(--header-h) + 32px); }
.side__head .sec-head { margin-bottom: 0; }
.side__btn { margin-top: 32px; text-align: left; }
.side__link { margin-top: 24px; }

/* ---------- アイコン（32px グリッド・線幅 1.75・単色線画） ---------- */
.icon { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 1.750; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.icon-badge { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 64px; height: 64px; border-radius: 50%; background: var(--c-blue-pale); color: var(--c-blue-dark); position: relative; }

/* ---------- 画像枠 ----------
   既定はフォールバックの図（.media__fallback）。写真を入れたら .has-img を付け、<picture> を表示する。 */
.media { position: relative; overflow: hidden; border-radius: 12px; background: var(--c-blue-pale); }
.media__fallback, .media__img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.media__fallback { overflow: visible; }
.media__img { object-fit: cover; }
.media.has-img .media__fallback { display: none; }
.media--hero { aspect-ratio: 1 / 1; }
.media--hero .media__img { object-position: 60% 50%; }
.media--head { aspect-ratio: 26 / 15; width: 416px; flex: none; }

/* ---------- ページタイトル帯 ---------- */
.page-head { padding-block: 28px 64px; background: var(--c-surface); border-bottom: 1px solid var(--c-line); }
.crumbs { display: flex; flex-wrap: wrap; gap: 4px 0; color: var(--c-sub); font-size: 13px; line-height: 1.7; }
.crumbs li + li::before { content: ""; display: inline-block; width: 5px; height: 5px; margin: 0 12px 2px 8px; border-top: 1px solid var(--c-sub); border-right: 1px solid var(--c-sub); transform: rotate(45deg); }
.crumbs a { color: var(--c-sub); }
.page-head__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; margin-top: 48px; }
.page-head--fig { padding-bottom: 48px; }
.page-head--fig .page-head__row { align-items: center; margin-top: 24px; }
.page-head__title { font-size: 40px; font-weight: 700; line-height: 1.4; }
.page-head__title--article { margin-top: 16px; font-size: 30px; line-height: 1.5; }
.page-head__en { margin-bottom: 16px; }
.page-head__meta { margin-top: 40px; display: flex; align-items: center; gap: 16px; color: var(--c-sub); font-size: 14px; }
.page-lead { margin-bottom: 40px; }

/* ---------- ヒーロー ---------- */
.hero { border-bottom: 1px solid var(--c-line); }
.hero__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 448px); align-items: center; gap: 56px; padding-block: 64px 64px; }
.hero__eyebrow { display: inline-flex; align-items: center; gap: 10px; color: var(--c-navy); font-size: 14px; font-weight: 700; line-height: 1.5; letter-spacing: .06em; }
.hero__eyebrow::before { content: ""; width: 24px; height: 2px; background: var(--c-blue); }
.hero__title { margin-top: 24px; font-size: 42px; font-weight: 700; line-height: 1.55; letter-spacing: .04em; white-space: nowrap; }
.hero__lead { margin-top: 28px; max-width: 34em; }
.hero__btn { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; margin-top: 40px; }

/* 要点（費用・納期・手間） */
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--c-line); }
.fact + .fact { border-left: 1px solid var(--c-line); }
.fact a { position: relative; display: flex; flex-direction: column; height: 100%; padding: 32px 40px 36px; color: var(--c-text); text-decoration: none; transition: background-color .2s; }
.fact:first-child a { padding-left: 0; }
.fact a:hover { background: var(--c-blue-tint); }
.fact:first-child a:hover { box-shadow: -24px 0 0 var(--c-blue-tint); }
.fact__label { color: var(--c-sub); font-size: 13px; font-weight: 700; line-height: 1.5; letter-spacing: .08em; }
.fact__main { margin-top: 4px; font-size: 20px; font-weight: 700; line-height: 1.4; white-space: nowrap; }
.fact__main .num { margin-inline: 2px 4px; color: var(--c-blue-dark); font-size: 48px; font-weight: 700; line-height: 1.15; letter-spacing: -.02em; vertical-align: -3px; }
.fact__sub { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin-top: 10px; color: var(--c-sub); font-size: 13px; line-height: 1.7; }
.fact__sub > span:not(.fact__plus) { color: var(--c-text); font-weight: 500; }
.fact__plus { color: var(--c-blue); font-weight: 700; }

/* ---------- 取扱カテゴリ ---------- */
.cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--c-line-strong); }
.cat { display: flex; align-items: center; gap: 16px; padding: 20px 8px; border-bottom: 1px solid var(--c-line); color: var(--c-blue-dark); }
.cat .icon { width: 28px; height: 28px; }
.cat__name { color: var(--c-text); font-size: 16px; font-weight: 700; line-height: 1.5; }

/* ---------- 特長 ---------- */
.feature .icon { color: var(--c-blue-dark); }
.feature__title { font-weight: 700; line-height: 1.5; }
.feature__link { margin-top: auto; padding-top: 16px; }
.feature-core { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: #fff; border: 1px solid var(--c-line); border-top: 3px solid var(--c-blue-dark); border-radius: 0 0 var(--radius) var(--radius); }
.feature--core { display: flex; flex-direction: column; padding: 40px 40px 32px; }
.feature--core + .feature--core { border-left: 1px solid var(--c-line); }
.feature--core .icon { width: 40px; height: 40px; stroke-width: 1.500; }
.feature--core .feature__title { margin-block: 24px 12px; font-size: 22px; }
.feature--core .feature__text { font-size: 15px; line-height: 1.85; }
.feature-rest { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; margin-top: 48px; }
.feature--rest { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 4px 16px; align-content: start; padding-top: 24px; border-top: 1px solid var(--c-line-strong); }
.feature--rest .icon { width: 28px; height: 28px; margin-top: 2px; grid-row: span 3; }
.feature--rest .feature__title { font-size: 18px; }
.feature--rest .feature__text, .feature--rest .note { grid-column: 2; font-size: 14px; line-height: 1.8; }
.feature--rest .feature__text { color: var(--c-text); }
.feature--rest .note { margin-top: 4px; font-size: 13px; }

/* ---------- ステップ ---------- */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; counter-reset: s; }
.step { position: relative; padding-top: 32px; border-top: 1px solid var(--c-line-strong); }
.step::before { content: ""; position: absolute; left: 0; top: -2px; width: 56px; height: 3px; background: var(--c-blue-dark); }
.step:not(:last-child)::after { content: ""; position: absolute; right: -24px; top: -5px; width: 8px; height: 8px; border-top: 1.500px solid var(--c-sub); border-right: 1.500px solid var(--c-sub); transform: rotate(45deg); background: transparent; }
.step__num { display: flex; align-items: baseline; gap: 8px; color: var(--c-blue-dark); font-family: var(--f-num); font-size: 44px; font-weight: 700; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.step__num span { color: var(--c-sub); font-size: 12px; letter-spacing: .14em; }
.step__title { margin-block: 24px 12px; font-size: 20px; font-weight: 700; line-height: 1.5; }
.step__body > p:not(.note) { font-size: 15px; }

/* ---------- お知らせ ---------- */
.news-list { border-top: 1px solid var(--c-line-strong); }
.news-row { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 8px 24px; padding: 24px 8px; border-bottom: 1px solid var(--c-line); }
.news-row__date { color: var(--c-sub); font-family: var(--f-num); font-size: 14px; font-variant-numeric: tabular-nums; }
.news-row__title { color: var(--c-text); font-weight: 500; text-decoration: none; }
.news-row__title:hover { color: var(--c-blue-dark); text-decoration: underline; }

/* ---------- Q&A（一覧表示） ---------- */
.qa { border-top: 1px solid var(--c-line-strong); }
.qa__item { padding: 28px 8px; border-bottom: 1px solid var(--c-line-strong); }
.qa dt, .qa dd { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 8px; }
.qa dt { font-size: 17px; font-weight: 700; line-height: 1.6; }
.qa dd { margin-top: 10px; font-size: 15px; }
.qa__mark { color: var(--c-blue-dark); font-family: var(--f-num); font-size: 18px; font-weight: 700; line-height: 1.52; letter-spacing: 0; }
.qa dd .qa__mark { line-height: 1.55; }
.qa__mark--a { color: var(--c-sub); }

/* ---------- お問い合わせ帯 ---------- */
.cta-band { padding-block: 96px; background: var(--c-navy); color: #fff; }
.cta-band__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 48px 96px; align-items: center; }
.cta-band .sec-en { color: #9CC4F3; }
.cta-band__title { font-size: 32px; font-weight: 700; line-height: 1.5; }
.cta-band__text { margin-top: 16px; max-width: 30em; color: #DCE6F2; }
.cta-band__btn { margin-top: 36px; }
.cta-rows { border-top: 1px solid rgba(255, 255, 255, .24); }
.cta-row { display: grid; grid-template-columns: 28px 72px minmax(0, 1fr); align-items: center; gap: 4px 16px; padding: 20px 4px; border-bottom: 1px solid rgba(255, 255, 255, .24); }
.cta-row .icon { width: 24px; height: 24px; color: #9CC4F3; }
.cta-row__name { font-size: 14px; font-weight: 700; line-height: 1.5; }
.cta-row__value { font-size: 15px; line-height: 2; }
.cta-band .note { color: #DCE6F2; }
.cta-band :focus-visible { outline-color: #fff; }

.section--blue .sec-head { margin-bottom: 40px; }
.contact-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; text-align: center; }
.contact-card { display: flex; flex-direction: column; align-items: center; padding: 32px 24px; background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); }
.contact-card .icon-badge { width: 56px; height: 56px; }
.contact-card .icon { width: 28px; height: 28px; }
.contact-card__name { margin-top: 16px; font-size: 18px; font-weight: 700; line-height: 1.5; }
.contact-card__value { margin-top: 8px; line-height: 2; }
.contact-card__hours { margin-top: 8px; color: var(--c-sub); font-size: 14px; line-height: 1.7; }

/* ---------- フッター ---------- */
.site-footer { padding-block: 80px 32px; background: var(--c-footer); color: #fff; font-size: 14px; line-height: 1.8; }
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer :focus-visible { outline-color: #fff; }
.site-footer__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, .8fr) minmax(0, 1.2fr) minmax(0, 1.2fr); gap: 48px; }
.site-footer__company img { height: 24px; width: auto; }
.site-footer__service { margin-block: 24px 8px; font-weight: 700; }
.site-footer address { color: #C5CCD6; font-size: 13px; line-height: 1.9; }
.site-footer__head { margin-bottom: 20px; color: #8D99A8; font-family: var(--f-num); font-size: 12px; font-weight: 700; line-height: 1; letter-spacing: .14em; text-transform: uppercase; }
.site-footer__list li + li, .site-footer__contact li + li { margin-top: 10px; }
.site-footer__list a { display: inline-block; padding-block: 2px; font-weight: 500; }
.site-footer__contact { line-height: 2; }
.site-footer__bottom { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px 48px; margin-top: 64px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .16); color: #C5CCD6; font-size: 13px; }
.site-footer__copy { flex: none; font-family: var(--f-num); }
.site-footer__copy small { font-size: 12px; letter-spacing: .04em; }

/* ---------- 本文の基本形 ---------- */
.split { display: grid; grid-template-columns: 304px minmax(0, 1fr); gap: 48px 96px; align-items: start; }
.split .sec-head { margin-bottom: 0; }
.prose > * + * { margin-top: 24px; }
.prose--wide { margin-top: 32px; max-width: 48em; }
.prose__strong { font-size: 22px; font-weight: 700; line-height: 1.6; font-feature-settings: "palt"; letter-spacing: .04em; }
.prose__strong .num { margin-inline: 4px; color: var(--c-blue-dark); font-size: 44px; line-height: 1; vertical-align: -3px; }
.callout { display: flex; gap: 12px; padding: 16px 20px; background: var(--c-blue-tint); border: 1px solid #D5E5F8; border-radius: var(--radius); color: var(--c-navy); font-size: 15px; font-weight: 700; }
.bullet-list li { position: relative; padding-left: 20px; }
.bullet-list li + li { margin-top: 8px; }
.bullet-list li::before { content: ""; position: absolute; left: 4px; top: .92em; width: 5px; height: 5px; margin-top: -3px; border-radius: 50%; background: var(--c-blue-dark); }
.bullet-list--panel { padding: 32px 40px; background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); }
.bullet-list--panel li + li { margin-top: 12px; }
.plain-list li + li { margin-top: 4px; }

/* 直送の経路図 */
.route { display: grid; grid-template-columns: auto minmax(24px, 1fr) auto minmax(24px, 1fr) auto; align-items: center; gap: 16px; padding: 28px 32px; background: var(--c-surface); border-radius: var(--radius); }
.route__node { display: flex; align-items: center; gap: 12px; color: var(--c-blue-dark); font-weight: 700; line-height: 1.4; white-space: nowrap; }
.route__node span { color: var(--c-text); }
.route__node--goal { padding: 12px 20px 12px 16px; background: #fff; border: 1.500px solid var(--c-blue-dark); border-radius: 999px; }
.route__arrow { position: relative; height: 2px; background-image: linear-gradient(90deg, var(--c-blue-dark) 0 2px, transparent 2px); background-size: 8px 2px; }
.route__arrow::after { content: ""; position: absolute; right: 0; top: -4px; width: 8px; height: 8px; border-top: 2px solid var(--c-blue-dark); border-right: 2px solid var(--c-blue-dark); transform: rotate(45deg); }

/* ---------- 表 ---------- */
.table { background: #fff; border-top: 2px solid var(--c-navy); font-size: 15px; line-height: 1.75; }
.table th, .table td { padding: 18px 24px; border-bottom: 1px solid var(--c-line); text-align: left; vertical-align: top; }
.table thead th, .table thead td { padding-block: 14px; background: #fff; color: var(--c-navy); font-size: 13px; font-weight: 700; letter-spacing: .08em; border-bottom: 1px solid var(--c-line-strong); }
.table tbody th { width: 28%; font-weight: 700; }
.table td:last-child:not(:nth-child(2)) { width: 30%; }
.table tr.is-clinic > * { background: var(--c-blue-pale); }
.table tr.is-clinic > th { box-shadow: inset 3px 0 0 var(--c-blue-dark); }
.table--docs td:last-child { color: var(--c-sub); }
.table--docs td:last-child strong { color: var(--c-navy); }
.table--compare { table-layout: fixed; }
.table--compare thead th { font-size: 16px; letter-spacing: .04em; }
.table--compare tbody th { width: 20%; color: var(--c-sub); font-size: 14px; }
.table--compare thead td { width: 20%; }
.table--compare td, .table--compare thead th { width: 40% !important; border-left: 1px solid var(--c-line); }
.table--def tbody th { width: 30%; background: var(--c-surface); font-size: 14px; }

/* ---------- サービス：2レーン対比フロー ---------- */
.flow { margin-bottom: 8px; }
.flow__head, .flow__phase { display: grid; grid-template-columns: 120px minmax(0, 1fr) minmax(0, 1fr); gap: 0 24px; }
.flow__lane { padding: 14px 16px; border-radius: var(--radius) var(--radius) 0 0; color: #fff; font-size: 16px; font-weight: 700; line-height: 1.4; letter-spacing: .1em; text-align: center; }
.flow__lane--clinic { background: var(--c-blue-dark); }
.flow__lane--company { background: var(--c-navy); }
.flow__phase { border-top: 1px solid var(--c-line-strong); }
.flow__stage { padding-top: 36px; color: var(--c-navy); font-size: 15px; font-weight: 700; line-height: 1.5; letter-spacing: .06em; }
.flow__col { display: flex; flex-direction: column; gap: 12px; padding: 20px 16px; background: #fff; }
.flow__phase:last-child .flow__col { border-radius: 0 0 var(--radius) var(--radius); padding-bottom: 24px; }
.flow-box { padding: 16px 20px; border: 1px solid var(--c-line); border-radius: var(--radius); background: #fff; font-size: 14px; line-height: 1.75; }
.flow-box--clinic { background: var(--c-blue-pale); border-color: var(--c-blue-pale); }
.flow-box--plain { background: transparent; border-style: dashed; border-color: var(--c-line-strong); color: var(--c-sub); }
.flow-box__title { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; font-size: 17px; font-weight: 700; line-height: 1.5; }
.flow-box__id { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--c-blue-dark); color: #fff; font-family: var(--f-num); font-size: 14px; line-height: 1; letter-spacing: 0; }
.flow-box--company .flow-box__id { background: #fff; color: var(--c-navy); box-shadow: inset 0 0 0 1.500px var(--c-navy); }
.flow-box__lane { display: none; }

/* ---------- サービス：費用（1枚の明細として見せる） ---------- */
.bill { border: 1px solid var(--c-line-strong); border-top: 3px solid var(--c-navy); border-radius: 0 0 var(--radius) var(--radius); background: #fff; overflow: hidden; }
.fees { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fee { position: relative; padding: 36px 40px 40px; }
.fee + .fee { border-left: 1px solid var(--c-line); }
.fee + .fee::before { content: "＋"; position: absolute; left: -18px; top: 50%; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin-top: -18px; border: 1px solid var(--c-line-strong); border-radius: 50%; background: #fff; color: var(--c-blue-dark); font-size: 16px; font-weight: 700; line-height: 1; }
.fee__idx { display: block; margin-bottom: 12px; color: var(--c-sub); font-size: 13px; font-weight: 700; line-height: 1; letter-spacing: .1em; }
.fee__idx::after { content: " / 3"; }
.fee__name { font-size: 20px; font-weight: 700; line-height: 1.5; }
.fee__amount { min-height: 76px; margin-block: 12px 16px; padding-bottom: 16px; border-bottom: 1px solid var(--c-line); color: var(--c-navy); font-size: 16px; font-weight: 700; line-height: 1.6; }
.fee__amount .num { font-size: 36px; line-height: 1.2; margin-inline: 1px 2px; }
.fee:first-child .fee__amount { display: flex; align-items: flex-end; }
.fee__desc { font-size: 14px; line-height: 1.8; }
.bill__foot { display: flex; align-items: center; gap: 12px; padding: 20px 40px; background: var(--c-navy); color: #fff; font-weight: 700; line-height: 1.6; }
.bill__foot .icon { width: 24px; height: 24px; stroke-width: 2.500; color: #9CC4F3; }
.deflist { margin-top: 56px; border-top: 1px solid var(--c-line-strong); }
.deflist > div { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 8px 40px; padding: 24px 8px; border-bottom: 1px solid var(--c-line); }
.deflist dt { font-weight: 700; }
.deflist__btn { margin-top: 24px; }

/* ---------- 保証 ---------- */
.g-head { display: flex; align-items: center; gap: 24px; margin-bottom: 32px; }
.g-head__when { display: inline-block; margin-bottom: 8px; padding: 3px 12px; border-radius: 999px; background: var(--c-navy); color: #fff; font-size: 12px; font-weight: 700; line-height: 1.5; letter-spacing: .1em; }
.g-check { position: absolute; right: -6px; bottom: -6px; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 2px solid #fff; border-radius: 50%; background: var(--c-green); color: #fff; }
.section--gray .g-check { border-color: var(--c-surface); }
.icon--sm { width: 16px; height: 16px; stroke-width: 4; }
.g-body { margin-bottom: 40px; font-size: 18px; font-weight: 500; line-height: 1.9; }
.g-cols { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.g-panel { padding: 32px; background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); }
.g-panel__title { margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--c-line); font-size: 17px; font-weight: 700; line-height: 1.5; }
.num-list { counter-reset: n; }
.num-list li { position: relative; padding-left: 36px; counter-increment: n; font-size: 15px; line-height: 1.75; }
.num-list li + li { margin-top: 12px; }
.num-list li::before { content: counter(n); position: absolute; left: 0; top: 2px; width: 24px; height: 24px; border: 1px solid var(--c-blue-dark); border-radius: 50%; color: var(--c-blue-dark); font-family: var(--f-num); font-size: 12px; font-weight: 700; line-height: 22px; text-align: center; letter-spacing: 0; }
.num-list--steps li::before { background: var(--c-blue-dark); color: #fff; }
.num-list--steps li + li { margin-top: 20px; }
.num-list--steps li:not(:last-child)::after { content: ""; position: absolute; left: 11px; top: 30px; bottom: -18px; width: 2px; background: var(--c-line); }
.icon-badge--done { background: var(--c-green); color: #fff; }

/* ---------- FAQ ---------- */
.faq-nav { position: sticky; top: 64px; z-index: 40; background: rgba(255, 255, 255, .97); border-bottom: 1px solid var(--c-line); }
.faq-nav ul { display: flex; gap: 8px; padding-block: 12px; overflow-x: auto; scrollbar-width: none; }
.faq-nav ul::-webkit-scrollbar { display: none; }
.faq-nav a { display: block; padding: 12px 20px; border: 1px solid var(--c-line-strong); border-radius: 999px; background: #fff; color: var(--c-text); font-size: 14px; font-weight: 500; line-height: 1.2; text-decoration: none; white-space: nowrap; transition: background-color .15s, border-color .15s, color .15s; }
.faq-nav a:hover, .faq-nav a.is-current { background: var(--c-navy); border-color: var(--c-navy); color: #fff; }
.faq-cat { scroll-margin-top: calc(var(--header-h) + 88px); }
.faq-cat + .faq-cat { margin-top: 80px; }
.faq-cat__title { padding-bottom: 16px; border-bottom: 2px solid var(--c-navy); color: var(--c-navy); font-size: 24px; font-weight: 700; line-height: 1.5; }
.acc { border-bottom: 1px solid var(--c-line); }
.acc summary { display: grid; grid-template-columns: 48px minmax(0, 1fr) 32px; gap: 8px; align-items: start; padding: 24px 8px; cursor: pointer; list-style: none; transition: background-color .15s; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary:hover { background: var(--c-blue-tint); }
.acc summary:hover .acc__q { color: var(--c-blue-dark); }
.acc__q { font-size: 17px; font-weight: 700; line-height: 1.6; }
.acc__icon { position: relative; width: 32px; height: 32px; margin-top: -2px; border: 1px solid var(--c-line-strong); border-radius: 50%; background: #fff; }
.acc__icon::before, .acc__icon::after { content: ""; position: absolute; left: 9px; top: 14px; width: 12px; height: 2px; background: var(--c-blue-dark); }
.acc__icon::after { transform: rotate(90deg); transition: transform .2s; }
.acc[open] .acc__icon::after { transform: rotate(0); }
.acc__body { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 8px; margin: 0 0 24px; padding: 24px 32px 24px 8px; background: var(--c-surface); border-radius: var(--radius); font-size: 15px; }
.acc__body > div > * + * { margin-top: 12px; }

/* ---------- フォーム ---------- */
.form { margin-top: 40px; padding: 48px; background: #fff; border: 1px solid var(--c-line-strong); border-top: 3px solid var(--c-navy); border-radius: 0 0 var(--radius) var(--radius); }
.field + .field { margin-top: 32px; }
.field__label { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; font-weight: 700; line-height: 1.5; }
.field__sub { display: block; margin-bottom: 4px; color: var(--c-sub); font-size: 14px; }
.field__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.req, .opt { display: inline-block; padding: 3px 8px; border-radius: 4px; background: var(--c-error); color: #fff; font-size: 11px; font-weight: 700; line-height: 1.3; letter-spacing: .08em; }
.opt { background: #fff; box-shadow: inset 0 0 0 1px var(--c-line-strong); color: var(--c-sub); }
.form input[type="text"], .form input[type="email"], .form select, .form textarea {
  display: block; width: 100%; min-height: 56px; padding: 12px 16px;
  background: #fff; border: 1px solid var(--c-input); border-radius: 6px;
  font-size: 16px; line-height: 1.6; appearance: none; transition: border-color .15s, box-shadow .15s;
}
.form input:hover, .form select:hover, .form textarea:hover { border-color: var(--c-text); }
.form select { padding-right: 48px; background-image: linear-gradient(45deg, transparent 50%, #26303C 50%), linear-gradient(135deg, #26303C 50%, transparent 50%); background-position: calc(100% - 22px) 25px, calc(100% - 16px) 25px; background-size: 6px 6px; background-repeat: no-repeat; cursor: pointer; }
.form textarea { min-height: 200px; resize: vertical; }
.form ::placeholder { color: #6B7686; opacity: 1; }
.form input[type="text"]:focus-visible, .form input[type="email"]:focus-visible, .form select:focus-visible, .form textarea:focus-visible { outline: 0; border-color: var(--c-blue-dark); box-shadow: 0 0 0 3px #BFD8F6; }
.form [aria-invalid="true"] { border-color: var(--c-error) !important; box-shadow: 0 0 0 1px var(--c-error); background-color: #FFFAF9; }
.field__error { margin-top: 8px; color: var(--c-error); font-size: 14px; font-weight: 700; line-height: 1.5; }
.field__counter { margin-top: 8px; color: var(--c-sub); font-family: var(--f-num); font-size: 13px; line-height: 1.5; text-align: right; font-variant-numeric: tabular-nums; }
.field__counter.is-over { color: var(--c-error); font-weight: 700; }
.field--agree { padding: 20px 24px; background: var(--c-surface); border-radius: var(--radius); }
.check { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.check input { flex: none; width: 24px; height: 24px; margin: 3px 0 0; accent-color: var(--c-blue-dark); }
.form .btn--block { margin-top: 40px; }
.form__summary, .form__dev { margin-bottom: 32px; padding: 16px 24px; background: #FFFAF9; border: 1px solid var(--c-error); border-left-width: 4px; border-radius: 6px; color: var(--c-error); font-weight: 700; }
.form__dev { margin: 32px 0 0; }
.form__confirm-title { font-size: 24px; font-weight: 700; line-height: 1.5; margin-bottom: 8px; }
.confirm-list { margin-top: 32px; border-top: 1px solid var(--c-line-strong); }
.confirm-list > div { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 4px 24px; padding: 18px 8px; border-bottom: 1px solid var(--c-line); }
.confirm-list dt { color: var(--c-sub); font-size: 14px; font-weight: 700; line-height: 2; }
.confirm-list dd { white-space: pre-wrap; }
.form__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 40px; }

/* ---------- 完了 ---------- */
.thanks { text-align: center; }
.thanks__title { margin-block: 32px; font-size: 32px; font-weight: 700; line-height: 1.5; }
.thanks p + p { margin-top: 24px; }

/* ---------- 文章ページ（長文の可読性：行長 約38〜40字、段落間を広めに） ---------- */
.doc { font-size: 16px; line-height: 1.95; }
.doc > p + p { margin-top: 16px; }
.doc h2 { margin-block: 64px 20px; padding-top: 24px; border-top: 1px solid var(--c-line-strong); color: var(--c-navy); font-size: 20px; font-weight: 700; line-height: 1.5; scroll-margin-top: calc(var(--header-h) + 24px); }
.doc .doc__l1 { padding-left: 2em; text-indent: -2em; margin-top: 12px; }
.doc .doc__l2 { padding-left: 4em; text-indent: -2em; margin-top: 8px; }
.doc .doc__cont { padding-left: 2em; text-indent: 0; }
.doc .doc__addr { margin-top: 0; padding: 0 24px; background: var(--c-surface); }
.doc p:not(.doc__addr) + .doc__addr { margin-top: 24px; padding-top: 24px; border-radius: var(--radius) var(--radius) 0 0; }
.doc .doc__addr:has(+ :not(.doc__addr)) { padding-bottom: 24px; border-radius: 0 0 var(--radius) var(--radius); }
.doc .doc__sign { margin-top: 8px; text-align: right; }
.doc p:not(.doc__sign) + .doc__sign { margin-top: 56px; }
.doc .plain-list { margin-top: 16px; }
.doc .todo-block { margin-bottom: 32px; }
.toc { margin-block: 40px 8px; padding: 28px 32px; background: var(--c-surface); border-radius: var(--radius); }
.toc__title { margin-bottom: 12px; color: var(--c-navy); font-size: 14px; font-weight: 700; letter-spacing: .1em; }
.toc__list { columns: 2; column-gap: 40px; font-size: 14px; line-height: 1.6; }
.toc__list li { break-inside: avoid; }
.toc__list a { display: block; padding-block: 6px; color: var(--c-text); text-decoration: none; }
.toc__list a:hover { color: var(--c-blue-dark); text-decoration: underline; }

/* ==========================================================================
   タブレット（〜1099px）：ナビをハンバーガーに
   ========================================================================== */
@media (max-width: 1099px) {
  :root { --sec: 88px; }
  .site-header__inner { gap: 8px; }
  .brand { margin-right: auto; }
  .site-header .header-cta { display: inline-flex; }
  .menu-btn { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-right: -12px; padding: 0; background: none; border: 0; border-radius: var(--radius); cursor: pointer; }
  .menu-btn__bars { position: relative; display: block; width: 22px; height: 16px; }
  .menu-btn__bars span { position: absolute; left: 0; width: 22px; height: 2px; background: var(--c-text); transition: transform .2s, opacity .2s; }
  .menu-btn__bars span:nth-child(1) { top: 0; }
  .menu-btn__bars span:nth-child(2) { top: 7px; }
  .menu-btn__bars span:nth-child(3) { top: 14px; }
  .menu-btn[aria-expanded="true"] .menu-btn__bars span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu-btn[aria-expanded="true"] .menu-btn__bars span:nth-child(2) { opacity: 0; }
  .menu-btn[aria-expanded="true"] .menu-btn__bars span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .gnav { position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 24px; padding: 8px var(--gutter) 32px; background: #fff; border-bottom: 1px solid var(--c-line); box-shadow: 0 16px 24px rgba(16, 51, 95, .08); max-height: calc(100vh - var(--header-h)); overflow-y: auto; }
  .js .gnav { display: none; }
  .js .gnav.is-open { display: flex; }
  .gnav__list { flex-direction: column; gap: 0; }
  .gnav__list a { display: flex; align-items: center; justify-content: space-between; padding: 22px 4px; font-size: 16px; border-bottom: 1px solid var(--c-line); }
  .gnav__list a::after { position: static; flex: none; width: 7px; height: 7px; background: none; border-top: 2px solid var(--c-sub); border-right: 2px solid var(--c-sub); transform: rotate(45deg) !important; }
  .gnav__cta { min-height: 56px; font-size: 16px; }
  html:not(.js) .site-header { position: static; }
  html:not(.js) .site-header__inner { height: auto; flex-wrap: wrap; padding-block: 16px; }
  html:not(.js) .gnav { position: static; width: 100%; padding: 0; border: 0; box-shadow: none; }
  html:not(.js) .menu-btn, html:not(.js) .header-cta { display: none; }

  .hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: 40px; }
  .hero__title { font-size: clamp(26px, 3.600vw, 36px); }
  .fact a { padding-inline: 24px; }
  .fact__main .num { font-size: 40px; }
  .side, .split { grid-template-columns: 1fr; gap: 40px; }
  .side__head { position: static; }
  .feature--core { padding: 32px 24px 24px; }
  .feature-rest { gap: 0 24px; }
  .steps { gap: 0 32px; }
  .step:not(:last-child)::after { right: -20px; }
  .cta-band__inner { grid-template-columns: 1fr; }
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
  .site-footer__company { grid-column: 1 / -1; }
  .media--head { width: 320px; }
  .fee { padding: 32px 24px; }
}

/* ==========================================================================
   スマホ（〜767px）
   ========================================================================== */
@media (max-width: 767px) {
  :root { --gutter: 20px; --sec: 64px; --header-h: 60px; }
  body { font-size: 15px; letter-spacing: .01em; }
  .top-note { font-size: 11px; line-height: 1.5; padding-block: 6px; letter-spacing: .04em; }
  .draft-bar { font-size: 12px; }
  .site-header.is-scrolled .site-header__inner { height: var(--header-h); }
  .brand { flex-direction: column; align-items: flex-start; gap: 5px; }
  .brand img { height: 17px; }
  .brand__name { padding-left: 0; border-left: 0; font-size: 10px; letter-spacing: .06em; }
  .header-cta { min-height: 40px; padding: 6px 14px 6px 16px; font-size: 13px; gap: 8px; width: auto !important; }
  .header-cta::after { width: 6px; height: 6px; }

  .btn { width: 100%; padding-inline: 24px; }
  .gnav__cta { display: none; }
  .gnav { padding-bottom: 16px; }
  .gnav__list li:last-child a { border-bottom: 0; }
  .center-btn { margin-top: 40px; }
  .section--first { padding-top: 40px; }
  .section--tight { padding-block: 56px; }
  .sec-head { margin-bottom: 32px; }
  .sec-head--row { flex-direction: column; align-items: flex-start; gap: 8px; }
  .sec-title, .lead-title, .cta-band__title { font-size: 24px; line-height: 1.5; }
  .lead-title--sm { font-size: 20px; }
  .sec-en, .page-head__en { font-size: 12px; margin-bottom: 10px; }
  .sec-lead { margin-top: 16px; }
  .note, .notes { font-size: 13px; }
  .side, .split { gap: 32px; }
  .side__btn { margin-top: 24px; }
  .side__link { margin-top: 8px; }

  .page-head { padding-block: 16px 36px; }
  .crumbs { font-size: 12px; }
  .page-head__row { margin-top: 28px; }
  .page-head--fig { padding-bottom: 0; border-bottom: 0; }
  .page-head--fig .page-head__row { flex-direction: column; align-items: stretch; gap: 28px; margin-top: 28px; }
  .media--head { width: auto; margin-inline: calc(var(--gutter) * -1); border-radius: 0; aspect-ratio: 5 / 2; }
  .page-head__title { font-size: 27px; }
  .page-head__title--article { margin-top: 12px; font-size: 22px; }
  .page-head__meta { margin-top: 24px; }
  .page-lead { margin-bottom: 32px; }

  .hero__inner { grid-template-columns: 1fr; gap: 36px; padding-block: 40px 40px; }
  .hero__eyebrow { font-size: 12px; }
  .hero__title { margin-top: 16px; font-size: clamp(19px, 6.100vw, 28px); line-height: 1.6; letter-spacing: .02em; }
  .hero__lead { margin-top: 20px; }
  .hero__lead br { display: none; }
  .hero__btn { margin-top: 28px; justify-content: center; gap: 8px; }
  .media--hero { aspect-ratio: 16 / 10; margin-inline: calc(var(--gutter) * -1); border-radius: 0; }
  .hero .container + .container { padding-inline: 0; }
  .facts { grid-template-columns: 1fr; border-top: 0; }
  .fact + .fact { border-left: 0; border-top: 1px solid var(--c-line); }
  .fact a, .fact:first-child a { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 16px; padding: 18px 40px 18px var(--gutter); }
  .fact a::after { content: ""; position: absolute; right: var(--gutter); top: 50%; width: 7px; height: 7px; margin-top: -4px; border-top: 2px solid var(--c-sub); border-right: 2px solid var(--c-sub); transform: rotate(45deg); }
  .fact__label { grid-column: 1; }
  .fact__main { grid-column: 2; grid-row: 1 / span 2; margin: 0; font-size: 15px; }
  .fact__main .num { font-size: 32px; vertical-align: -2px; }
  .fact__sub { grid-column: 1; margin-top: 2px; font-size: 12px; }

  .cat-grid { grid-template-columns: repeat(2, 1fr); column-gap: 16px; }
  .cat { gap: 12px; padding: 16px 4px; }
  .cat .icon { width: 24px; height: 24px; }
  .cat__name { font-size: 14px; letter-spacing: 0; }
  .feature-core { grid-template-columns: 1fr; }
  .feature--core { padding: 28px 24px 24px; }
  .feature--core + .feature--core { border-left: 0; border-top: 1px solid var(--c-line); }
  .feature--core .icon { width: 36px; height: 36px; }
  .feature--core .feature__title { margin-block: 16px 8px; font-size: 20px; }
  .feature__link { padding-top: 8px; }
  .feature-rest { grid-template-columns: 1fr; gap: 24px; margin-top: 32px; }
  .feature--rest { padding-top: 20px; }
  .feature--rest .feature__title { font-size: 17px; }
  .steps { grid-template-columns: 1fr; gap: 0; }
  .step { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 0 16px; padding: 0 0 32px; border-top: 0; }
  .step::before { left: 27px; top: 44px; bottom: 4px; width: 2px; height: auto; background: var(--c-line-strong); }
  .step:last-child { padding-bottom: 0; }
  .step:last-child::before, .step:not(:last-child)::after { display: none; }
  .step__num { flex-direction: column; align-items: center; gap: 4px; font-size: 28px; }
  .step__num span { font-size: 10px; }
  .step__title { margin-block: 6px 8px; font-size: 18px; }
  .news-row { grid-template-columns: auto minmax(0, 1fr); padding: 20px 4px; }
  .news-row .label { justify-self: start; }
  .news-row__title { grid-column: 1 / -1; }
  .qa__item { padding: 20px 4px; }
  .qa dt, .qa dd { grid-template-columns: 28px minmax(0, 1fr); }
  .qa dt, .acc__q { font-size: 16px; }
  .qa dd { font-size: 14px; }
  .qa__mark { font-size: 16px; line-height: 1.6; }

  .cta-band { padding-block: 64px; }
  .cta-band__inner { gap: 40px; }
  .cta-row { grid-template-columns: 24px 64px minmax(0, 1fr); gap: 4px 12px; padding: 16px 0; }
  .contact-cards { grid-template-columns: 1fr; gap: 12px; }
  .contact-card { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 0 16px; align-items: center; padding: 20px 16px; text-align: left; }
  .contact-card .icon-badge { width: 48px; height: 48px; grid-row: span 3; align-self: start; }
  .contact-card__name { margin-top: 0; font-size: 16px; }
  .contact-card__value, .contact-card__hours { margin-top: 4px; }
  .site-footer { padding-block: 56px 32px; }
  .site-footer__grid { grid-template-columns: 1fr; gap: 40px; }
  .site-footer__list a { padding-block: 6px; }
  .site-footer__list li + li { margin-top: 4px; }
  .site-footer__bottom { flex-direction: column; margin-top: 40px; }

  .route { grid-template-columns: 1fr; justify-items: start; gap: 8px; padding: 20px; }
  .route__arrow { width: 2px; height: 24px; margin-left: 13px; background-image: linear-gradient(180deg, var(--c-blue-dark) 0 2px, transparent 2px); background-size: 2px 8px; }
  .route__arrow::after { right: -3px; top: auto; bottom: 0; transform: rotate(135deg); }
  .route__node--goal { margin-left: -4px; }

  /* 表：項目名を上、内容を下に縦積み */
  .table--stack, .table--stack tbody, .table--stack tr, .table--stack th, .table--stack td { display: block; width: 100% !important; }
  .table--stack thead { display: none; }
  .table--stack { border: 0; background: transparent; }
  .table--stack tr { border: 1px solid var(--c-line); border-radius: var(--radius); background: #fff; overflow: hidden; }
  .table--stack tr + tr { margin-top: 12px; }
  .table--stack th, .table--stack td { border: 0 !important; padding: 12px 16px; }
  .table--stack tbody th { background: var(--c-surface) !important; color: var(--c-navy); font-size: 15px; box-shadow: inset 0 -1px 0 var(--c-line); }
  .table--stack tr.is-clinic { border-color: var(--c-blue-dark); }
  .table--stack tr.is-clinic > th { background: var(--c-blue-dark) !important; color: #fff; box-shadow: none; }
  .table--stack tr.is-clinic > td { background: #fff; }
  .table--stack td + td { border-top: 1px solid var(--c-line) !important; }
  .table--stack td::before { content: attr(data-label); display: block; margin-bottom: 2px; color: var(--c-sub); font-size: 11px; font-weight: 700; letter-spacing: .06em; }
  .table--def, .table--def tbody, .table--def tr, .table--def th, .table--def td { display: block; width: 100% !important; }
  .table--def th, .table--def td { border: 0; padding: 10px 16px; }
  .table--def td { padding-bottom: 20px; }
  .table--def tr + tr { border-top: 1px solid var(--c-line); }

  /* フロー：医療機関は左寄せ、当社は右寄せで縦に積む */
  .flow__head { display: none; }
  .flow__phase { display: block; padding-block: 24px; }
  .flow__stage { padding-top: 0; margin-bottom: 16px; font-size: 15px; }
  .flow__col { padding: 0 !important; background: transparent; gap: 12px; }
  .flow__col--clinic { margin-right: 32px; }
  .flow__col--company { margin: 12px 0 0 32px; }
  .flow-box { padding: 16px; }
  .flow-box--clinic { border-left: 3px solid var(--c-blue-dark); }
  .flow-box--company { border-left: 3px solid var(--c-navy); }
  .flow-box--plain { background: transparent; }
  .flow-box__lane { display: inline-block; margin-bottom: 8px; padding: 3px 10px; border-radius: 999px; background: var(--c-navy); color: #fff; font-size: 11px; font-weight: 700; line-height: 1.4; letter-spacing: .08em; }
  .flow-box--clinic .flow-box__lane { background: var(--c-blue-dark); }
  .flow-box--plain .flow-box__lane { display: block; width: fit-content; }
  .flow-box__title { font-size: 16px; }

  .fees { grid-template-columns: 1fr; }
  .fee { padding: 28px 20px; }
  .fee + .fee { border-left: 0; border-top: 1px solid var(--c-line); }
  .fee + .fee::before { left: 50%; top: 0; margin: -18px 0 0 -18px; }
  .fee__amount { min-height: 0; }
  .fee__amount .num { font-size: 32px; }
  .bill__foot { align-items: flex-start; padding: 16px 20px; font-size: 14px; }
  .bill__foot .icon { margin-top: 1px; width: 20px; height: 20px; }
  .deflist { margin-top: 40px; }
  .deflist > div { grid-template-columns: 1fr; padding: 20px 4px; }
  .bullet-list--panel { padding: 24px 20px; }
  .prose__strong { font-size: 17px; letter-spacing: .02em; }
  .prose__strong .num { font-size: 32px; margin-inline: 2px; }

  .g-head { gap: 16px; margin-bottom: 24px; }
  .g-body { font-size: 16px; margin-bottom: 24px; }
  .g-cols { grid-template-columns: 1fr; gap: 16px; }
  .g-panel { padding: 24px 20px; }

  .faq-nav { top: var(--header-h); }
  .faq-nav ul { margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
  .faq-nav a { padding: 12px 16px; font-size: 13px; }
  .faq-cat + .faq-cat { margin-top: 56px; }
  .faq-cat__title { font-size: 20px; }
  .acc summary { grid-template-columns: 36px minmax(0, 1fr) 32px; padding: 20px 0; }
  .acc__body { grid-template-columns: 24px minmax(0, 1fr); padding: 16px 16px 16px 12px; margin-bottom: 20px; font-size: 14px; }

  .form { margin-top: 32px; margin-inline: calc(var(--gutter) * -1 + 8px); padding: 28px 16px 32px; }
  .field + .field { margin-top: 24px; }
  .field--agree { padding: 16px; }
  .confirm-list > div { grid-template-columns: 1fr; padding: 14px 4px; }
  .form__actions { grid-template-columns: 1fr; }
  .form__actions .btn--primary { order: -1; }
  .thanks__title { font-size: 22px; margin-block: 24px; }
  .thanks p br { display: none; }
  .doc { font-size: 15px; line-height: 1.9; }
  .doc h2 { margin-top: 48px; font-size: 18px; }
  .doc .doc__l2 { padding-left: 3em; }
  .doc .doc__cont { padding-left: 2em; }
  .toc { padding: 20px; }
  .toc__list { columns: 1; }
  .toc__list a { padding-block: 8px; }
}

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

@media print {
  .draft-bar, .top-note, .site-header, .faq-nav, .cta-band, .skip, .media { display: none; }
  .section { padding-block: 32px; }
}

/* スマホ：保証の比較表は行見出しを紺の細帯に */
@media (max-width: 767px) {
  .table--compare tbody th { color: var(--c-navy); font-size: 14px; }
  .fee__amount { min-height: 0 !important; }
}