/* 株式会社メドフェア 会社サイト
   考え方：写真や飾りではなく、文字の大きさの差と余白で見せる。
   大きい文字はページに 1 か所だけ。残りは小さく、静かに。 */

/* 色は専用サイト（医療鑑定・産業医）と同じ系統。紺 #14509e と水色 #90d1ff、薄い青白 #f3f5fa。 */
:root {
  --paper: #f7f9fc;
  --paper-2: #edf2f9;
  --ink: #1b2436;
  --ink-2: #5a6578;
  --rule: #d5dce6;
  --rule-strong: #1b2436;
  --blue: #14509e;
  --blue-ink: #ffffff;
  --blue-deep: #0d3d7c;
  --blue-soft: #e3eefb;
  --sky: #d9ecff;
  --sky-line: #6fb2ec;
  /* 右下の円の色。紙の上では --sky と同じに見え、左上の円と重なった所だけ少し濃くなる（乗算） */
  --sky-2: #e0f2ff;
  --sky-2-blend: multiply;
  /* 円の中心を少し明るくするグラデーションの、明るい側の色 */
  --sky-hi: #f0f8ff;
  --sky-2-hi: #f3fbff;
  --focus: #14509e;
  /* 事業ごとのほんのり色（事業ページの目次）。面はごく薄く、番号だけ少し濃く */
  --tint-kantei: #eef0fa; --acc-kantei: #4a55b8;
  --tint-sangyoi: #e9f2fb; --acc-sangyoi: #1d6fc2;
  --tint-doctors: #e8f5f3; --acc-doctors: #1f8a7a;
  --tint-medicalai: #eef4ec; --acc-medicalai: #4f8a3a;
  --tint-doctor: #fbf1ec; --acc-doctor: #c2683c;
  --band: #14213f;
  --band-ink: #eef3fb;
  --band-sky: #90d1ff;
  --foot: #14213f;
  --foot-ink: #eef3fb;
  --foot-sky: #90d1ff;
  --foot-ink-2: #aab9d2;
  --foot-rule: rgba(238, 243, 251, .18);
  --mincho: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
  --gothic: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", "Meiryo", sans-serif;
  --wrap: 1200px;
  --gutter: 24px;
  /* 押せるもの（ボタン・入力欄）だけの小さな角丸。罫線・表・帯は真四角のまま */
  --radius: 4px;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #111b2b;
    --paper-2: #19263b;
    --ink: #eef3fb;
    --ink-2: #aab7cc;
    --rule: #3a4a60;
    --rule-strong: #eef3fb;
    --blue: #8fbfff;
    --blue-ink: #0b1a33;
    --blue-deep: #b4d6ff;
    --blue-soft: #1b2c43;
    --sky: #1f3a5c;
    --sky-line: #5f9fd8;
    --sky-2: #1f3a5c;
    --sky-2-blend: normal;
    --sky-hi: #2c4f7c;
    --sky-2-hi: #2c4f7c;
    --tint-kantei: #1a2342; --acc-kantei: #a3abff;
    --tint-sangyoi: #15263d; --acc-sangyoi: #7fb6f5;
    --tint-doctors: #132c2d; --acc-doctors: #6fd0bf;
    --tint-medicalai: #192a21; --acc-medicalai: #9ccb7e;
    --tint-doctor: #2b221d; --acc-doctor: #f0a97e;
    --focus: #8fbfff;
    --band: #eef3fb;
    --band-ink: #1b2436;
    --band-sky: #14509e;
    --foot: #0b1424;
  }
}
:root[data-theme="dark"] {
  --paper: #111b2b;
  --paper-2: #19263b;
  --ink: #eef3fb;
  --ink-2: #aab7cc;
  --rule: #3a4a60;
  --rule-strong: #eef3fb;
  --blue: #8fbfff;
  --blue-ink: #0b1a33;
  --blue-deep: #b4d6ff;
  --blue-soft: #1b2c43;
  --sky: #1f3a5c;
  --sky-line: #5f9fd8;
  --sky-2: #1f3a5c;
  --sky-2-blend: normal;
  --sky-hi: #2c4f7c;
  --sky-2-hi: #2c4f7c;
  --tint-kantei: #1a2342; --acc-kantei: #a3abff;
  --tint-sangyoi: #15263d; --acc-sangyoi: #7fb6f5;
  --tint-doctors: #132c2d; --acc-doctors: #6fd0bf;
  --tint-medicalai: #192a21; --acc-medicalai: #9ccb7e;
  --tint-doctor: #2b221d; --acc-doctor: #f0a97e;
  --focus: #8fbfff;
  --band: #eef3fb;
  --band-ink: #1b2436;
  --band-sky: #14509e;
  --foot: #0b1424;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; overflow-x: hidden; }
body {
  margin: 0;
  overflow-x: clip;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--gothic);
  font-size: 17px;
  line-height: 1.95;
  font-feature-settings: "palt";
  letter-spacing: .02em;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
h1, h2, h3, p, ol, ul, dl, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--paper); padding: 8px 12px; }
.skip:focus { left: 8px; z-index: 10; }

/* 見出しの書体。大きい見出しだけ明朝。本文と小見出しはゴシック。 */
.statement, .h-mincho, .quote {
  font-family: var(--mincho);
  font-weight: 500;
  letter-spacing: .03em;
}
.eyebrow {
  font-size: 13px;
  letter-spacing: .16em;
  color: var(--ink-2);
  line-height: 1.6;
}
.small { font-size: 14px; line-height: 1.8; color: var(--ink-2); }
/* 文節の単位。ここでだけ折り返す。 */
.ph { display: inline-block; }
/* 標語の読点のあとの空きを少し詰める（明朝の「、」は右に余白が大きい） */
.statement .ph:not(:last-child) { margin-right: -.18em; }
/* 線画。線は紺、塗りは水色。 */
.art { display: block; color: var(--blue); width: 100%; height: auto; }
.art * { vector-effect: non-scaling-stroke; }

/* ヘッダー。画面の上に貼りつき、スクロールしてもついてくる。
   下にずれて本文が重なり始めたら（.stuck）、うっすら線を出す。 */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease;
}
.site-header.stuck { border-bottom-color: var(--rule); }
.site-header > .wrap {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding-block: 22px;
}
/* 見出しへ飛んだとき、貼りついたヘッダーの下に隠れないように */
html { scroll-padding-top: 84px; }
.brand img { width: 196px; height: 33px; }
.site-nav { display: flex; align-items: center; gap: 36px; font-size: 15px; letter-spacing: .12em; }
.site-nav a { padding-block: 6px; border-bottom: 1px solid transparent; white-space: nowrap; }
.site-nav a:hover, .site-nav a[aria-current="page"] { border-bottom-color: var(--ink); }
.site-nav .contact { padding: 10px 26px; margin-left: 8px; border: 1px solid var(--blue); color: var(--blue); border-radius: var(--radius); }
.site-nav .contact:hover { background: var(--blue); color: var(--blue-ink); }
.menu { display: none; }

/* 第一画面：会社の一文だけを大きく。 */
/* 第一画面。左は大きな標語、右は水色の面に線画。水色の面は画面の右端まで伸ばす。 */
.hero { position: relative; padding-block: 0; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 48px; align-items: center; min-height: min(640px, calc(100vh - 96px)); }
.hero-text { padding-block: 48px; }
/* 絵の後ろに水色の円を二つ重ねる（左上と右下。絵の輪の中心からずらす）。読み込み時は左上 → 右下の順に広がる */
.hero-visual { position: relative; align-self: stretch; display: flex; align-items: center; justify-content: center; padding: 40px 0; }
.hero-visual::before, .hero-visual::after { content: ""; position: absolute; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: var(--sky); z-index: -1; }
.hero-visual::before { left: 30%; top: 36%; width: min(420px, 90%); background: radial-gradient(circle at 36% 32%, var(--sky-hi), var(--sky) 74%); }
.hero-visual::after { left: 70%; top: 66%; width: min(360px, 78%); background: radial-gradient(circle at 62% 66%, var(--sky-2-hi), var(--sky-2) 74%); mix-blend-mode: var(--sky-2-blend); }
.hero-visual .art { width: 100%; max-width: 600px; }
.hero-visual .art .fill { fill: var(--paper); }
.hero-stack { position: relative; width: 100%; max-width: 600px; }
.hero-stack .art { max-width: none; }
.hero-stack .hero-doctor { position: absolute; inset: 0; }
/* ファイルの絵はダークモードで色を反転して、紺の線を明るい青にする */
/* ファイルの絵の色の反転は変数 --art-filter で持つ（ライトでは none）。動きのぼかしと重ねて使えるようにするため。
   第一画面の二枚は、動きでぼかしを使うので、反転は包んでいる .hero-stack 側にかける */
:root { --art-filter: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --art-filter: invert(1) hue-rotate(180deg) brightness(1.15); } }
:root[data-theme="dark"] { --art-filter: invert(1) hue-rotate(180deg) brightness(1.15); }
.art-file { filter: var(--art-filter); }
.hero-stack { filter: var(--art-filter); }
.hero-stack .art-file { filter: none; }
.hero .eyebrow { margin-bottom: 24px; }
.statement {
  font-size: clamp(40px, 5.3vw, 78px);
  line-height: 1.32;
  letter-spacing: .02em;
  color: var(--blue);
}
.hero .after {
  margin-top: 32px;
  /* 明朝の大きな標語は字の左に少し空きがあるので、本文も少しだけ右に寄せて字の左端をそろえる */
  padding-left: 5px;
  max-width: 30em;
  font-size: 17px;
}
/* 困りごとの一覧。行ごとに罫線。入口を兼ねる。 */
.scenes { padding-block: 24px 96px; }
.scenes .eyebrow { margin-bottom: 8px; }
.scene-list { border-top: 1px solid var(--rule-strong); }
.scene-list li { border-bottom: 1px solid var(--rule); }
.scene-list a {
  display: grid;
  grid-template-columns: 48px 56px minmax(0, 1fr) 280px;
  gap: 24px;
  align-items: center;
  padding: 22px 0;
  transition: background-color .15s ease;
}
.scene-icon .art { width: 44px; height: 44px; }
.scene-list a:hover { background: var(--paper-2); box-shadow: 0 0 0 16px var(--paper-2); border-radius: var(--radius); }
.scene-no { font-size: 13px; letter-spacing: .12em; color: var(--blue); font-variant-numeric: tabular-nums; }
.scene-text { font-family: var(--mincho); font-size: clamp(22px, 2.1vw, 30px); line-height: 1.5; font-weight: 500; }
/* 行き先の名前。青い下線付きで、行の上下中央に置く */
.scene-to { font-size: 15px; line-height: 1.6; align-self: center; }
.scene-to strong { display: inline-block; font-weight: 700; letter-spacing: .04em; color: var(--blue); border-bottom: 1px solid var(--blue); padding-bottom: 1px; }
.scene-list a:hover .scene-to strong { color: var(--blue-deep); border-color: var(--blue-deep); }
.scenes .aside { margin-top: 20px; font-size: 14px; color: var(--ink-2); }
.scenes .aside a { text-decoration: underline; text-underline-offset: 4px; }

/* 三つの事業。絵と文章を左右に置き、段ごとに入れ替える。 */
.pillars-label { padding-top: 40px; display: flex; align-items: center; gap: 14px; font-size: 17px; font-weight: 700; letter-spacing: .14em; color: var(--ink); }
.pillars-label::before { content: ""; width: 10px; height: 10px; background: var(--blue); }
.pillar { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px 72px; align-items: center; padding-block: 64px 80px; }
.pillar.first { padding-top: 24px; }
.pillar[id] { scroll-margin-top: 24px; }
/* 入れ替えた段は列の幅も入れ替える（絵を右に置くとき、文章の列が狭くならないように） */
.pillar.flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.pillar.flip .pillar-art { order: 2; }
.pillar-art .art { max-width: 460px; margin-inline: auto; }.pillar-no { font-size: 13px; letter-spacing: .14em; color: var(--blue); font-variant-numeric: tabular-nums; }
.pillar-no span { color: var(--ink-2); margin-left: 16px; }
/* 事業の見出し（「法律×医学」など）。大きく、青で */
.pillar h2 { font-family: var(--mincho); font-weight: 500; font-size: clamp(32px, 3.4vw, 46px); line-height: 1.4; letter-spacing: .04em; margin-top: 12px; color: var(--blue); }
/* 見出しより下（事業名・本文・箇条書き・ボタン）は、少しだけ右に寄せる */
.pillar-name, .pillar-body, .pillar .facts, .pillar .actions { margin-left: 12px; }
.pillar-name { margin-top: 18px; font-size: 20px; font-weight: 700; letter-spacing: .04em; }
.pillar-body { margin-top: 10px; max-width: 34em; font-size: 16px; text-wrap: pretty; }
.facts { margin-top: 26px; max-width: 40em; }
.facts li { display: grid; grid-template-columns: .5em minmax(0, 1fr); gap: .7em; padding: 5px 0; font-size: 15px; line-height: 1.8; }
/* 四角は 1 行目の文字の中心に合わせる（行の高さ 1.8em の半分から、四角の半分を引く） */
.facts li::before { content: ""; width: .5em; height: .5em; margin-top: .65em; background: var(--sky-line); }
.pillar .actions { margin-top: 40px; }
.pillar .btn { min-height: 52px; padding: 10px 24px; font-size: 15px; }

/* 理念の段。紙の色を反転させた帯。左に縦書きの一文、右に本文。ページで一番余白の大きい場所。 */
.creed { padding-block: 120px 128px; background: var(--band); color: var(--band-ink); }
.creed .eyebrow { color: inherit; opacity: .7; margin-bottom: 20px; }
.creed .inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px 64px; align-items: end; }
.creed .inner > div:first-child { grid-column: 1 / -1; }
.creed-statement {
  font-family: var(--mincho);
  font-size: clamp(28px, 3.3vw, 46px);
  line-height: 1.6;
  letter-spacing: .04em;
  font-weight: 500;
}
.creed .copy { max-width: 30em; font-size: 16px; }
/* 絵の下の余白（地面より下の透明部分、絵の幅の約 6.9%）ぶん下げて、地面の線を左の文章の最後の行にそろえる */
.creed-visual { align-self: end; position: relative; margin-bottom: -4.5%; }
/* 街並みの絵の上に重ねる雲。絵と同じ枠いっぱいに置く。重なった所で後ろの線が透けないよう、帯と同じ色で塗る */
/* 枠は絵より上に広い（高さは幅の 280/520）ので、絵の下端にそろえて上へはみ出させる */
.creed-clouds { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: auto; }
.creed-clouds path { fill: var(--band); }
.creed-visual .art { color: var(--band-sky); }
.creed-visual .art [fill] { fill: transparent; }
.creed .copy p + p { margin-top: 1.4em; }

/* 章見出し。番号付きの小さな見出しと、下線だけ。 */
.section { padding-block: 88px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: 48px; }
.section-head h2 { font-family: var(--mincho); font-weight: 500; font-size: clamp(26px, 2.6vw, 36px); line-height: 1.4; letter-spacing: .04em; }
.section-head .more { font-size: 15px; border-bottom: 1px solid var(--ink); padding-bottom: 2px; white-space: nowrap; }
.section-head .more:hover { color: var(--blue); border-color: var(--blue); }

/* 三つの言葉（熱・仁・誠）。漢字一字を大きく。 */
.section-note { font-size: 14px; color: var(--ink-2); letter-spacing: .06em; }
.words { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 56px; border-top: 1px solid var(--rule-strong); }
.words li { padding: 36px 0 32px; border-bottom: 1px solid var(--rule); }
.words .kanji { display: block; font-family: var(--mincho); font-size: 76px; line-height: 1; font-weight: 500; color: var(--blue); }
.words h3 { margin-top: 22px; font-size: 19px; font-weight: 700; line-height: 1.6; letter-spacing: .04em; }
.words p { margin-top: 10px; font-size: 15.5px; line-height: 1.9; color: var(--ink-2); text-wrap: pretty; }

/* 事業の段の折りたたみ。押すと詳しい内容が開く。 */
.fold { margin-top: 28px; }
.fold summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 12px; padding: 14px 0; font-size: 15px; font-weight: 700; letter-spacing: .04em; }
.fold summary::-webkit-details-marker { display: none; }
.fold summary::before { content: ""; width: 14px; height: 14px; background: linear-gradient(var(--blue), var(--blue)) center / 14px 1.5px no-repeat, linear-gradient(var(--blue), var(--blue)) center / 1.5px 14px no-repeat; transition: transform .2s ease; }
.fold[open] summary::before { transform: rotate(45deg); }
.fold summary:hover { color: var(--blue); }
.fold .when-open, .fold[open] .when-closed { display: none; }
.fold[open] .when-open { display: inline; }
.fold-body { padding: 8px 0 8px 26px; border-left: 2px solid var(--sky-line); margin: 4px 0 8px; }
.fold-item + .fold-item { margin-top: 28px; }
.fold-item h3 { font-family: var(--mincho); font-weight: 500; font-size: 21px; line-height: 1.5; letter-spacing: .03em; margin-bottom: 10px; }
.fold-item .body { max-width: 36em; font-size: 15.5px; }
.fold-item .body.wide { max-width: none; }
.fold-item .body p + p { margin-top: 1em; }
.fold-item .body h3 { font-family: var(--gothic); font-size: 16px; font-weight: 700; letter-spacing: .02em; margin: 1.6em 0 .4em; }
.fold-item .body ul { list-style: none; }
.fold-item .body ul li { padding-left: 1.2em; text-indent: -1.2em; }
.fold-item .body ul li::before { content: "・"; }
.fold-item .actions { margin-top: 18px; }
.fold-item .note { font-size: 13.5px; color: var(--ink-2); line-height: 1.8; }
.fold-item .figures dd { font-size: 26px; }
.figures dd small { white-space: nowrap; }
/* 事業の段の下に置く折りたたみ。段の全幅を使い、開くと専用ページと同じ「見出しは左、本文は右」の形で並ぶ。 */
.pillar > .fold { grid-column: 1 / -1; order: 3; margin-top: 0; }
.pillar > .fold summary { display: flex; width: 100%; padding: 12px 0; }
.pillar > .fold .fold-body { padding: 0; border-left: 0; margin: 16px 0 8px; }
.pillar > .fold .fold-item { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 16px 64px; padding: 32px 0; }
.pillar > .fold .fold-item + .fold-item { margin-top: 0; }
.pillar > .fold .fold-item h3 { font-size: 23px; margin-bottom: 0; }

/* 事業ページの目次。五つ並べて、押すとその段へ移る。 */
.index { margin-top: 8px; margin-bottom: 48px; }
.index ol { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
/* 事業ごとに、ほんのり色の付いた面にする。線は引かない */
.index a { display: block; height: 100%; padding: 14px 16px 16px; border-radius: var(--radius); background: var(--paper-2); }
.index li[data-biz="kantei"] a { background: var(--tint-kantei); }
.index li[data-biz="sangyoi"] a { background: var(--tint-sangyoi); }
.index li[data-biz="doctors"] a { background: var(--tint-doctors); }
.index li[data-biz="medicalai"] a { background: var(--tint-medicalai); }
.index li[data-biz="doctor"] a { background: var(--tint-doctor); }
.index li[data-biz="kantei"] .no { color: var(--acc-kantei); }
.index li[data-biz="sangyoi"] .no { color: var(--acc-sangyoi); }
.index li[data-biz="doctors"] .no { color: var(--acc-doctors); }
.index li[data-biz="medicalai"] .no { color: var(--acc-medicalai); }
.index li[data-biz="doctor"] .no { color: var(--acc-doctor); }
.index .no { font-size: 12px; letter-spacing: .14em; color: var(--blue); font-variant-numeric: tabular-nums; }
/* 目次の名前。一番長い「医療出版物・AIデータ作成」が一行に収まる大きさに */
.index strong { display: block; margin-top: 4px; font-size: 14.5px; font-weight: 700; letter-spacing: .02em; line-height: 1.5; white-space: nowrap; }
.index .who { display: block; margin-top: 4px; font-size: 12.5px; color: var(--ink-2); letter-spacing: .04em; }
.index a:hover strong { color: var(--blue); }

/* お問い合わせフォーム。送信は site.js が受付の Worker（contact/）へ送る。 */
.form-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 32px 72px; align-items: start; }
.form-intro p + p { margin-top: 1em; }
.form-intro .note { font-size: 14px; color: var(--ink-2); line-height: 1.8; }
.form-intro .note a { text-decoration: underline; text-underline-offset: 4px; }
.inquiry { display: grid; gap: 18px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.inquiry label { display: grid; gap: 6px; font-size: 14px; letter-spacing: .04em; color: var(--ink); }
.inquiry input, .inquiry select, .inquiry textarea {
  font: inherit; font-size: 16px; line-height: 1.5; color: var(--ink); background: var(--paper); border: 1px solid var(--rule-strong); border-radius: var(--radius); padding: 0 14px; height: 52px; width: 100%;
}
/* 一行の入力欄と選択欄は同じ高さ（52px）。本文欄だけ高く */
.inquiry textarea { height: auto; min-height: 160px; padding: 12px 14px; resize: vertical; line-height: 1.7; }
.inquiry input:focus, .inquiry select:focus, .inquiry textarea:focus { outline: 2px solid var(--focus); outline-offset: 1px; }
.inquiry .consent { grid-template-columns: auto 1fr; align-items: start; gap: 10px; font-size: 14px; color: var(--ink); }
.inquiry .consent input { width: 18px; height: 18px; min-height: 0; margin-top: 4px; accent-color: var(--blue); }
.inquiry .consent a { text-decoration: underline; text-underline-offset: 4px; }
.inquiry .actions { margin-top: 20px; }
.inquiry button.btn { font-family: inherit; cursor: pointer; }
.form-status:empty { display: none; }
.form-status[data-kind="success"] { color: var(--ink); }
/* 送信できたときのお礼。「お問い合わせ」の見出しの下に、青字で目立たせて出す */
.form-thanks { margin: -24px 0 40px; padding: 18px 22px; border-left: 4px solid var(--blue); background: var(--blue-soft); color: var(--blue); font-size: 17px; font-weight: 700; line-height: 1.8; border-radius: var(--radius); }
.form-thanks:focus { outline: none; }
.form-thanks span { display: inline-block; }
.form-thanks[hidden] { display: none; }
/* 送信前の確認（Turnstile）。受付先が未設定のときは枠が入らず、高さもとらない */
.verification:empty { display: none; }
.verification-frame { display: block; width: 100%; max-width: 360px; height: 72px; border: 0; background: transparent; }

/* 表に近い一覧（道具、年表、会社の情報） */
.rows { border-top: 1px solid var(--rule-strong); }
.rows > * { display: grid; grid-template-columns: 200px minmax(0, 1fr) auto; gap: 24px; padding: 22px 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
/* dl で組んだ表の dd に付くブラウザ既定の左の余白（40px）を外す。列の間は grid の gap でとる */
.rows dd { margin: 0; }
.rows .k { font-size: 15px; font-weight: 700; letter-spacing: .04em; }
.rows .v { font-size: 15.5px; color: var(--ink-2); }
.rows .go { font-size: 14px; white-space: nowrap; border: 1px solid var(--blue); color: var(--blue); padding: 7px 16px; letter-spacing: .04em; align-self: center; border-radius: var(--radius); }
.rows .go:hover { background: var(--blue); color: var(--blue-ink); }
.rows .year { font-family: var(--mincho); font-size: 22px; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.rows .date { font-size: 13px; color: var(--ink-2); letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.rows .v a { text-decoration: underline; text-underline-offset: 4px; }
.rows .v a:hover { color: var(--blue); }

/* 代表のことば */
.voice { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 64px; align-items: end; }
.quote { font-size: clamp(22px, 2.2vw, 32px); line-height: 1.7; max-width: 24em; }
.voice .who { font-size: 14px; color: var(--ink-2); line-height: 1.9; }
.voice .who strong { display: block; color: var(--ink); font-size: 16px; font-weight: 700; }
.voice .who a { border-bottom: 1px solid var(--ink); color: var(--ink); padding-bottom: 1px; }
.voice .who a:hover { color: var(--blue); border-color: var(--blue); }

/* 下層ページの頭。読み手を示す一行、見出し、短い説明、ボタン。 */
.page-head { padding-block: 56px 48px; }
/* 絵は右端に寄せず、文章の右端のすぐ隣に置く（文章の列は 36em まで） */
.page-head.with-art { display: grid; grid-template-columns: minmax(0, 44em) minmax(0, 1fr); gap: 48px; align-items: end; }
.page-art .art { width: 300px; height: 250px; margin-left: 0; }
.page-head .eyebrow { margin-bottom: 20px; }
.page-head h1 { font-family: var(--mincho); font-weight: 500; font-size: clamp(32px, 3.6vw, 50px); line-height: 1.45; letter-spacing: .03em; max-width: 18em; }
.page-head .lead { margin-top: 28px; max-width: 34em; }
.actions { margin-top: 44px; display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 56px; padding: 12px 28px;
  background: var(--blue); color: var(--blue-ink);
  font-weight: 700; font-size: 16px; letter-spacing: .04em;
  border: 1px solid var(--blue);
  border-radius: var(--radius);
  transition: background-color .15s ease, border-color .15s ease;
}
.btn:hover { background: var(--blue-deep); border-color: var(--blue-deep); }
/* フォームの送信ボタン。横に長く、色はほんの少し薄い */
.btn.send { min-width: 260px; background: color-mix(in srgb, var(--blue) 88%, var(--paper)); border-color: color-mix(in srgb, var(--blue) 88%, var(--paper)); }
.btn.quiet { background: transparent; color: var(--blue); }
.btn.quiet:hover { background: var(--blue-soft); border-color: var(--blue-deep); color: var(--blue-deep); }
.actions .note { font-size: 13px; color: var(--ink-2); line-height: 1.7; }
.breadcrumb { font-size: 13px; color: var(--ink-2); letter-spacing: .06em; padding-top: 8px; }
.breadcrumb a { text-decoration: underline; text-underline-offset: 4px; }

/* 本文の段。見出しは左、本文は右。 */
.block { padding-block: 36px; display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 32px 64px; }
.block h2 { font-family: var(--mincho); font-weight: 500; font-size: 25px; line-height: 1.55; letter-spacing: .04em; text-wrap: balance; }
.block .body { max-width: 36em; }
/* 事業ページの詳しい内容：事業の色の薄い帯に載せ、段の頭に事業の色の番号を置く */
.details { --tint: var(--paper-2); --acc: var(--blue); background: var(--tint); padding-block: 40px; }
.details[data-biz="kantei"] { --tint: var(--tint-kantei); --acc: var(--acc-kantei); }
.details[data-biz="sangyoi"] { --tint: var(--tint-sangyoi); --acc: var(--acc-sangyoi); }
.details[data-biz="doctors"] { --tint: var(--tint-doctors); --acc: var(--acc-doctors); }
.details[data-biz="medicalai"] { --tint: var(--tint-medicalai); --acc: var(--acc-medicalai); }
.details[data-biz="doctor"] { --tint: var(--tint-doctor); --acc: var(--acc-doctor); }
/* 番号は見出しの上に浮かせ、見出しの一行目と本文の一行目の高さをそろえる */
.details .block { padding-top: 64px; }
.details .block h2 { position: relative; }
.details .block h2 .no { position: absolute; left: 0; bottom: calc(100% + 12px); display: flex; align-items: center; gap: 12px; font-family: var(--gothic); font-size: 13px; font-weight: 700; letter-spacing: .14em; color: var(--acc); font-variant-numeric: tabular-nums; }
.details .block h2 .no::before { content: ""; width: 28px; height: 2px; background: var(--acc); }
.details .block h2 em { font-style: normal; color: var(--acc); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .28em; }
.block .num { font-family: var(--mincho); font-size: 2.4em; font-weight: 500; line-height: 1; color: var(--acc, var(--blue)); margin: 0 .08em; vertical-align: -.08em; }
.details .figures dd { color: var(--acc); }
.details p + .figures { margin-top: 20px; }
.details .steps li::before { color: var(--acc); font-weight: 700; }
.block .body.wide { max-width: none; }
.page-head h1, .section-head h2, .statement, .creed-statement, .quote { text-wrap: balance; }
.page-head .lead, .hero .after, .block .body p { text-wrap: pretty; }
.block .body p + p { margin-top: .9em; }
.block .body p { line-height: 1.85; }
.block .body h3 { font-size: 17px; font-weight: 700; margin: 1.8em 0 .4em; }
.block .body h3:first-child { margin-top: 0; }
.block .body ul { list-style: none; }
.block .body ul li { padding-left: 1.2em; text-indent: -1.2em; }
.block .body ul li::before { content: "・"; }
.block .note { font-size: 14px; color: var(--ink-2); line-height: 1.8; }
.steps + .note, .figures + .note { margin-top: 16px; }

/* 料金などの数字の並び */
.figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px 40px; margin-bottom: 28px; }
.figures div { padding: 6px 0; }
.figures dt { font-size: 14px; color: var(--ink-2); letter-spacing: .06em; }
.figures dd { margin: 6px 0 0; font-family: var(--mincho); font-size: 30px; line-height: 1.3; letter-spacing: .02em; }
.figures dd small { font-family: var(--gothic); font-size: 14px; color: var(--ink-2); margin-left: 6px; letter-spacing: .04em; }

/* 手順 */
.steps { counter-reset: step; border-top: 1px solid var(--rule-strong); }
.steps li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; padding: 18px 0; border-bottom: 1px solid var(--rule); }
.steps li::before { counter-increment: step; content: counter(step, decimal-leading-zero); font-size: 13px; letter-spacing: .1em; color: var(--ink-2); padding-top: 6px; font-variant-numeric: tabular-nums; }
.steps strong { display: block; font-size: 16px; }
.steps span { grid-column: 2; font-size: 15px; color: var(--ink-2); }

/* ほかの事業 */
.others { padding-block: 72px 96px; }
.others .eyebrow { margin-bottom: 16px; }

/* 代表のあいさつ本文 */
.letter { max-width: 44em; padding-block: 24px 96px; font-family: var(--mincho); font-size: 18px; line-height: 2.2; }
.letter p + p { margin-top: 1.6em; }
.letter .sign { margin-top: 3em; font-family: var(--gothic); font-size: 15px; line-height: 2; }

/* 文章の中の下線リンクは、どのページでも青で目立たせる */
.scenes .aside a, .form-intro .note a, .inquiry .consent a, .rows .v a, .breadcrumb a, .block .body p a, .fold-item .body p a, .letter a, .contact-card a {
  color: var(--blue); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--blue); font-weight: 700;
}

/* JobFare の段。左に説明と手順、右に LINE の画面の絵 */
.jobfare { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 32px 64px; align-items: center; }
.jobfare-logo { display: block; width: 96px; height: 96px; margin-bottom: 22px; }
.jobfare-steps { counter-reset: jf; margin: 22px 0 0 16px; display: grid; gap: 12px; max-width: 32em; }
.jobfare-steps li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 14px; align-items: start; font-size: 15px; line-height: 1.8; }
.jobfare-steps li::before { counter-increment: jf; content: counter(jf); width: 28px; height: 28px; border-radius: 50%; background: var(--sky); color: var(--blue); font-weight: 700; font-size: 13px; display: inline-grid; place-items: center; }
.jobfare .actions { margin-top: 30px; }
.jobfare-phone .art { max-width: 260px; margin-inline: auto; }

/* 代表の経歴。二人を横に並べる */
.profiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 64px; }
.profile h3 { font-family: var(--mincho); font-weight: 500; font-size: 26px; letter-spacing: .06em; margin-bottom: 18px; }
.profile h3 span { display: inline-block; margin-left: 14px; font-family: var(--gothic); font-size: 13px; letter-spacing: .12em; color: var(--ink-2); }
.profile .rows > * { grid-template-columns: 96px minmax(0, 1fr); gap: 16px; padding: 16px 0; }
.career { display: grid; gap: 6px; }
.career li { display: grid; grid-template-columns: 4.2em minmax(0, 1fr); gap: 12px; }
.career .date { font-variant-numeric: tabular-nums; letter-spacing: .04em; }

/* 連絡先の塊 */
.contact-card { border: 1px solid var(--rule-strong); padding: 32px; max-width: 560px; }
.contact-card dt { font-size: 13px; color: var(--ink-2); letter-spacing: .08em; }
.contact-card dd { margin: 2px 0 18px; font-size: 22px; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.contact-card dd:last-child { margin-bottom: 0; }
.contact-card a:hover { color: var(--blue); }

/* フッター。理念の帯と同じ濃い紺の面に、明るい文字。ロゴは白いほう。 */
.site-footer { background: var(--foot); color: var(--foot-ink); padding-block: 72px 40px; font-size: 14px; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr)); gap: 40px; }
.footer-grid h2 { font-size: 13px; letter-spacing: .14em; color: var(--foot-sky); font-weight: 500; margin-bottom: 14px; }
.footer-grid a { display: block; padding-block: 4px; }
.footer-grid a:hover { color: var(--foot-sky); }
.footer-grid address { font-style: normal; line-height: 1.9; margin-top: 18px; padding-left: 44px; color: var(--foot-ink-2); }
.footer-grid address a { display: inline; padding: 0; }
.footer-grid address a:hover { color: var(--foot-sky); }
.footer-bottom { margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--foot-rule); display: flex; flex-wrap: wrap; gap: 8px 32px; justify-content: space-between; color: var(--foot-ink-2); font-size: 13px; }

/* 右下に追いかける丸い「お問合せ」。フォームが見えている間は引っ込む。 */
.float-contact {
  position: fixed; right: 28px; bottom: 28px; z-index: 30;
  height: 60px; padding: 0 24px 0 18px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--blue); color: var(--blue-ink);
  font-size: 13px; font-weight: 700; letter-spacing: .1em;
  box-shadow: 0 10px 28px rgba(20, 80, 158, .28), 0 0 0 6px color-mix(in srgb, var(--paper) 70%, transparent);
  transition: transform .25s ease, opacity .25s ease, background-color .2s ease;
}
.float-contact svg { width: 30px; height: 30px; flex: none; }
.float-contact:hover { background: var(--blue-deep); transform: translateY(-2px); }
.float-contact.away { opacity: 0; transform: translateY(24px); pointer-events: none; }
/* スマホでは小さく。文章に重なる面を減らす */
@media (max-width: 767px) {
  .float-contact { right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); height: 44px; padding: 0 14px 0 10px; gap: 6px; font-size: 12px; letter-spacing: .06em; box-shadow: 0 6px 18px rgba(20, 80, 158, .26), 0 0 0 4px color-mix(in srgb, var(--paper) 70%, transparent); }
  .float-contact svg { width: 22px; height: 22px; }
}

/* 動き。ページを移るときは静かに切り替わり、画面に入った段はふわりと現れる。
   第一画面は、水色の面が左から広がり、文字が順に上がり、絵の線が引かれる。
   端末で「動きを減らす」を選んでいるときは、どれも動かさない。 */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  /* 段は、下から軽く浮かび上がる。各ページの頭（見出し・説明・ボタン・絵）は第一画面と同じく、ぼかしも取れながら出る */
  .js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .9s cubic-bezier(.2, .6, .2, 1), transform .9s cubic-bezier(.2, .6, .2, 1), filter .9s ease; }
  .js .reveal.in { opacity: 1; transform: none; }
  .js .page-head > .reveal { filter: blur(8px); }
  .js .page-head > .reveal.in { filter: blur(0); }
  /* 絵（PNG）は、読み込みが終わって画面に入ったら、ぼやけた状態から焦点が合うように浮かび上がる（第一画面と同じ調子） */
  .js img.art-file.pic { opacity: 0; filter: blur(14px) var(--art-filter); transform: scale(.96); transition: opacity .9s ease, filter .9s ease, transform .9s cubic-bezier(.2, .6, .2, 1); }
  .js img.art-file.pic.on { opacity: 1; filter: var(--art-filter); transform: none; }
  /* 第一画面の動きは、書体が届く（html.fonts）まで止めておく */
  .js:not(.fonts) .hero-text > *, .js:not(.fonts) .hero-visual::before, .js:not(.fonts) .hero-visual::after,
  .js:not(.fonts) .hero-stack .hero-bg, .js:not(.fonts) .hero-stack .hero-doctor { animation-play-state: paused; }
  /* 第一画面の文字。ぼやけた状態から、下からふわりと浮かび上がる */
  .js .hero-text > * { opacity: 0; animation: surface 1.1s cubic-bezier(.2, .6, .2, 1) forwards; }
  .js .hero-text .eyebrow { animation-delay: .1s; }
  .js .hero-text .statement { animation-delay: .2s; }
  .js .hero-text .after { animation-delay: .5s; }
  /* 水色の円。小さくぼやけた光が、にじむように広がって面になる。出たあとは、ゆっくり漂う */
  .js .hero-visual::before { opacity: 0; scale: .7; filter: blur(28px); animation: bloom 1.4s cubic-bezier(.2, .6, .2, 1) .05s forwards, drift 9s ease-in-out 1.5s infinite alternate; }
  .js .hero-visual::after { opacity: 0; scale: .7; filter: blur(28px); animation: bloom 1.3s cubic-bezier(.2, .6, .2, 1) .3s forwards, drift2 11s ease-in-out 1.6s infinite alternate; }
  .js .hero-visual .art > g:last-child > :not([stroke-dasharray]) { stroke-dasharray: 1400; stroke-dashoffset: 1400; animation: draw 2.4s ease-out .4s forwards; }
  .js .hero-visual .art .fill { opacity: 0; animation: fade .9s ease 1.6s forwards; }
  /* 二層の第一画面：円がにじみ出たあと、街と輪の絵が中心から、縁をぼかしたグラデーションで浮かび上がり、最後に医師が現れる */
  .js .hero-stack .hero-bg {
    opacity: 0; filter: blur(18px); transform: scale(.94);
    /* 大きさ 0 だとマスクが無いものとして扱われ、一瞬だけ全部見えるので 2% から始める。縁は広くぼかす */
    -webkit-mask: radial-gradient(circle at 50% 52%, #000 38%, transparent 80%) center / 2% 2% no-repeat;
    mask: radial-gradient(circle at 50% 52%, #000 38%, transparent 80%) center / 2% 2% no-repeat;
    animation: unveil 2.1s cubic-bezier(.2, .6, .2, 1) .5s forwards;
  }
  .js .hero-stack .hero-doctor { opacity: 0; transform: translateY(14px) scale(.96); filter: blur(10px); animation: appear .9s cubic-bezier(.2, .6, .2, 1) 1.7s forwards; }
  @keyframes bloom { to { opacity: 1; scale: 1; filter: blur(0); } }
  @keyframes drift { from { transform: translate(0, 0); } to { transform: translate(6px, -10px); } }
  @keyframes drift2 { from { transform: translate(0, 0); } to { transform: translate(-8px, 8px); } }
  @keyframes unveil { 35% { opacity: 1; } to { opacity: 1; filter: blur(0); transform: none; -webkit-mask-size: 340% 340%; mask-size: 340% 340%; } }
  @keyframes appear { to { opacity: 1; transform: none; filter: blur(0); } }
  @keyframes surface { from { opacity: 0; transform: translateY(18px); filter: blur(10px); } to { opacity: 1; transform: none; filter: blur(0); } }
  .fold[open] .fold-body { animation: rise .5s cubic-bezier(.2, .6, .2, 1); }
  .fold summary::before { transition: transform .25s ease; }
  .btn, .rows .go, .site-nav a, .scene-list a, .index strong, .scene-to strong { transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease; }
  @keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  @keyframes fade { to { opacity: 1; } }
  @keyframes draw { to { stroke-dashoffset: 0; } }
}

/* タブレット以下 */
@media (max-width: 1023px) {
  .site-nav { gap: 28px; letter-spacing: .08em; }
  .site-nav .contact { padding: 8px 18px; margin-left: 0; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .block { grid-template-columns: 1fr; gap: 16px; padding-block: 32px; }
  .jobfare { grid-template-columns: 1fr; }
  .creed .inner { grid-template-columns: 1fr; gap: 32px; }
  /* 縦に積むときは、上へはみ出す雲（幅の約 23%）のぶん、絵を本文から離す */
  .creed-visual { margin-top: 20%; }
  .hero { grid-template-columns: 1fr; gap: 0; min-height: 0; }
  .hero-text { padding-block: 40px 32px; }
  .hero-visual { padding: 32px 24px; }
  .hero-visual .art { max-width: 480px; }
  .words { grid-template-columns: 1fr; gap: 0; }
  .form-grid { grid-template-columns: 1fr; gap: 24px; }
  .pillar, .pillar.flip { grid-template-columns: 1fr; gap: 24px; padding-block: 40px 48px; }
  .pillar h2 { font-size: 25px; letter-spacing: .02em; }
  .pillar.flip .pillar-art { order: 0; }
  .pillar-art .art { max-width: 320px; margin-inline: 0; }
  .pillar > .fold .fold-item { grid-template-columns: 1fr; gap: 12px; padding: 32px 0; }
  .index ol { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .scene-list a { grid-template-columns: 36px 44px minmax(0, 1fr) 190px; gap: 16px; }
  .scene-text { font-size: 20px; }
  .scene-icon .art { width: 36px; height: 36px; }
  .page-head.with-art { grid-template-columns: minmax(0, 1fr) 220px; gap: 24px; }
  .page-art .art { width: 210px; height: 175px; }
  .voice { grid-template-columns: 1fr; gap: 32px; }
  .promises { grid-template-columns: 1fr; }
}

/* スマホ。
   考え方：縦に長くなりすぎないよう段と段の間を詰め、見出しは一回り小さく、
   文章は文節単位の折り返しをやめて自然に流す（狭い幅で文節ごとに折ると、行末がでこぼこになる）。 */
@media (max-width: 767px) {
  :root { --gutter: 20px; }
  body { font-size: 16px; line-height: 1.9; }
  .eyebrow { font-size: 12.5px; letter-spacing: .14em; }
  /* 説明文の中の文節は、スマホでは普通に折り返す（見出しと標語は文節の単位のまま） */
  .lead .ph, .after .ph, .copy .ph { display: inline; }
  /* ヘッダー。メニューは画面の幅いっぱいに下りてくる */
  .site-header > .wrap { position: relative; padding-block: 14px; }
  html { scroll-padding-top: 64px; }
  .brand img { width: 152px; height: 26px; }
  .site-nav { display: none; }
  .menu { display: block; position: static; }
  /* メニューは三本線だけ（2026-11-08） */
  .menu summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin-right: -9px; }
  .menu summary svg { display: block; }
  .menu summary::-webkit-details-marker { display: none; }
  .menu[open] summary { color: var(--blue); }
  .menu nav { position: absolute; left: 0; right: 0; top: 100%; z-index: 20; background: var(--paper); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule-strong); padding: 6px 0 10px; box-shadow: 0 18px 36px rgba(20, 36, 64, .14); }
  .menu nav a { display: block; padding: 13px var(--gutter); font-size: 16px; letter-spacing: .04em; }
  .menu nav a + a { border-top: 1px solid var(--rule); }
  /* 第一画面 */
  .hero { padding-block: 20px 16px; }
  .hero .eyebrow { margin-bottom: 18px; }
  .statement { font-size: clamp(36px, 10.5vw, 48px); line-height: 1.35; max-width: none; }
  .hero-text { padding-block: 20px 16px; }
  .hero-visual { padding: 20px 0; max-width: 300px; }
  .hero-visual::before { left: 34%; top: 38%; width: 70%; }
  .hero-visual::after { left: 68%; top: 64%; width: 62%; }
  /* 狭い幅では一文ずつ改行せず、一つの段として自然に折り返す（改行すると行末に一語だけ残る） */
  .hero .after { margin-top: 22px; padding-left: 2px; font-size: 15.5px; line-height: 1.85; }
  .hero .after br { display: none; }
  /* 三つの事業 */
  .pillars-label { padding-top: 20px; font-size: 16px; }
  .pillar, .pillar.flip { grid-template-columns: 1fr; gap: 18px; padding-block: 28px 36px; }
  .pillar.first { padding-top: 12px; }
  .pillar-art .art { max-width: 250px; margin-inline: 0; }
  .pillar-no span { margin-left: 12px; }
  .pillar h2 { font-size: 26px; letter-spacing: .02em; margin-top: 8px; }
  .pillar-name, .pillar-body, .pillar .facts, .pillar .actions { margin-left: 6px; }
  .pillar-name { margin-top: 12px; font-size: 18px; }
  .pillar-body { margin-top: 8px; font-size: 15.5px; }
  .facts { margin-top: 18px; }
  .facts li { font-size: 14.5px; padding: 4px 0; }
  .pillar .actions { margin-top: 28px; }
  .pillar > .fold .fold-item { padding: 24px 0; }
  .pillar > .fold .fold-item h3 { font-size: 20px; }
  .fold { margin-top: 20px; }
  .fold-body { padding-left: 16px; }
  .fold-item h3 { font-size: 19px; }
  /* 事業ページの目次 */
  .index { margin-bottom: 28px; }
  .index ol { grid-template-columns: 1fr; gap: 6px; }
  .index a { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 0 8px; align-items: baseline; padding: 13px 16px; }
  .index strong { margin-top: 0; }
  .index .who { grid-column: 2; margin-top: 0; }
  /* そのほかの事業 */
  .scenes { padding-block: 8px 48px; }
  .scene-list a { grid-template-columns: 40px minmax(0, 1fr); gap: 4px 12px; padding: 16px 0; align-items: start; }
  .scene-list a:hover { box-shadow: none; background: none; }
  .scene-no { display: none; }
  .scene-icon .art { width: 32px; height: 32px; margin-top: 2px; }
  .scene-text { font-size: 18px; letter-spacing: .01em; line-height: 1.5; }
  .scene-to { grid-column: 2; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin-top: 4px; }
  .scene-to strong { font-size: 14px; }
  .others { padding-block: 40px 56px; }
  /* 下層ページの頭 */
  .page-head { padding-block: 20px 32px; }
  .page-head.with-art { grid-template-columns: 1fr; gap: 4px; }
  .page-art .art { width: 200px; height: 167px; margin: 0; }
  .page-head h1 br, .creed-statement br { display: none; }
  .page-head .eyebrow { margin-bottom: 14px; }
  .page-head h1 { font-size: clamp(28px, 7.6vw, 36px); line-height: 1.4; }
  .page-head .lead { margin-top: 16px; font-size: 15.5px; }
  .actions { margin-top: 26px; gap: 12px; }
  .actions .note { font-size: 12.5px; }
  .btn { width: 100%; min-height: 52px; }
  /* 本文の段 */
  .block { padding-block: 24px; gap: 12px; }
  .details { padding-block: 24px; }
  .details .block { padding-top: 52px; }
  .details .block h2 .no { bottom: calc(100% + 8px); }
  .block h2 { font-size: 23px; }
  .block .body { font-size: 15.5px; }
  .block .body .rows .go { margin-top: 6px; }
  .figures { gap: 4px 24px; margin-bottom: 20px; }
  .figures dd { font-size: 25px; }
  .steps li { grid-template-columns: 34px minmax(0, 1fr); gap: 10px; padding: 16px 0; }
  .steps span { font-size: 14.5px; }
  /* 理念と三つの言葉 */
  .creed { padding-block: 56px 48px; }
  .creed .copy { font-size: 15.5px; }
  .creed-visual { margin-top: 16%; }
  .section { padding-block: 48px; }
  .section-head { flex-direction: column; gap: 10px; margin-bottom: 24px; }
  .form-thanks { margin: -8px 0 28px; padding: 14px 16px; font-size: 16px; }
  .words li { padding: 26px 0 22px; }
  .words .kanji { font-size: 56px; }
  .words h3 { margin-top: 14px; font-size: 18px; }
  .words p { font-size: 15px; }
  /* 表に近い一覧。項目名の下に内容を置く */
  .rows > * { grid-template-columns: 1fr; gap: 4px; padding: 14px 0; }
  .rows .year { font-size: 19px; }
  .rows .go { justify-self: start; margin-top: 4px; }
  .profiles { grid-template-columns: 1fr; gap: 32px; }
  .profile h3 { font-size: 22px; margin-bottom: 12px; }
  .profile .rows > * { grid-template-columns: 1fr; gap: 4px; }
  .career li { grid-template-columns: 3.6em minmax(0, 1fr); gap: 10px; }
  /* JobFare の段 */
  .jobfare { gap: 24px; }
  .jobfare-logo { width: 72px; height: 72px; margin-bottom: 16px; }
  .jobfare-steps { margin-left: 4px; }
  .letter { padding-block: 8px 56px; font-size: 17px; line-height: 2.1; }
  /* フォーム */
  .form-grid { gap: 16px; }
  .inquiry { gap: 14px; }
  .field-row { grid-template-columns: 1fr; gap: 14px; }
  .inquiry textarea { min-height: 140px; }
  .contact-card { padding: 22px; }
  .contact-card dd { font-size: 19px; }
  /* フッター */
  .site-footer { padding-block: 48px 28px; }
  .footer-grid { grid-template-columns: 1fr; gap: 24px; }
  .footer-grid a { padding-block: 6px; }
  .footer-grid address { padding-left: 36px; margin-top: 14px; }
  .footer-bottom { margin-top: 32px; }
}