/* リセット・タイポ・レイアウト・Markdown 本文（部品は components.css、ヘッダー/フッターは shell.css、演出は motion.css） */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 24px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
/* 本文は Zen Maru Gothic 500 のみ。太さではなく色とサイズで階層を作る。溢れは隠さない（body に overflow-x:hidden を付けない） */
body { margin: 0; background: var(--c-cream); color: var(--c-ink); font-family: var(--f-body); font-size: var(--fs-body); line-height: var(--lh-body); letter-spacing: var(--ls-body); font-weight: 500; -webkit-font-smoothing: antialiased; overflow-wrap: anywhere; word-break: normal; line-break: strict; }
body.area-recruit { color: var(--c-ink-deep); letter-spacing: 0.06em; }
img, svg, video, iframe { max-width: 100%; display: block; }
img { height: auto; object-fit: cover; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; letter-spacing: inherit; }
h1, h2, h3, h4 { font-family: var(--f-round); font-weight: 500; color: var(--c-ink-deep); line-height: var(--lh-body); margin: 0; letter-spacing: var(--ls-heading); text-wrap: balance; }
h1 { font-size: var(--fs-h1); color: var(--c-orange); }   /* 医院下層・採用下層（about/求人/データ）の H1 はオレンジ [参照 about・recruit/dentist・recruit/about 実測] */
body.page-recruit-home h1 { color: var(--c-ink-deep); }   /* 採用トップの FV「私たちの街に、」だけ濃茶 #271200 [参照 recruit pc1920 実測]。ページ CSS の .rh-hero-title{color} より優先させる */
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
table { border-collapse: collapse; }
strong, b { font-weight: 500; color: var(--c-orange); }
small { font-size: var(--fs-xs); }
address { font-style: normal; }
hr { border: 0; border-top: var(--dash); margin: 0; }
:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 3px; border-radius: 4px; }
.skip { position: absolute; left: 8px; top: -60px; background: var(--c-white); padding: 10px 16px; border-radius: var(--r-s); z-index: 1000; }
.skip:focus { top: 8px; }
.icon { width: 1em; height: 1em; display: inline-block; vertical-align: -0.15em; flex: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* レイアウト */
.container { width: min(100% - var(--gutter) * 2, var(--container)); margin-inline: auto; }
.container-md { width: min(100% - var(--gutter) * 2, var(--container-md)); margin-inline: auto; }
.container-narrow { width: min(100% - var(--gutter) * 2, var(--container-narrow)); margin-inline: auto; }
.container-text { width: min(100% - var(--gutter) * 2, var(--container-text)); margin-inline: auto; }
.container-read { width: min(100% - var(--gutter) * 2, var(--container-read)); margin-inline: auto; }
.section { padding-block: var(--section-y); }
.section-tight { padding-block: var(--section-y-s); }
.section + .section { padding-top: 0; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.table-scroll table { min-width: 560px; width: 100%; }
/* 横スクロール箱の共通形: 先頭に必ず到達できる（center と overflow-x を併用しない） */
.scroll-x { display: flex; justify-content: flex-start; justify-content: safe center; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; gap: 16px; padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
.scroll-x > * { flex: none; scroll-snap-align: start; }
/* スクロールバーを出さない（2026-09-28 医院指摘「画面下にずっと固定で表示されているのが不自然。スクロール機能がある箇所のものは全般的に非表示に」）:
   本文（main）の中で横に送る箱（沿革・流れ・スケジュール・特長のカルーセル・表・写真帯など。医院・採用とも）はバーを隠す。
   送れるのは今までどおり（指・トラックパッド・Shift＋ホイール・各箱の矢印ボタン）。ページの CSS で新しく overflow-x: auto の箱を足しても
   自動で隠れるよう main の中の要素を全部対象にする（はみ出しの無い要素には何も起きない）。
   残すもの: ページ全体（html・body）の縦のバー、入力欄（textarea・select）。
   main の外で縦に送る箱（ドロワー・目次のシート）も同じ指摘の範囲として shell.css で隠す（2026-09-28。1366×657 のノート PC でドロワーの右端に 15px のバーが出ていた）。チャットの箱は assist.css。
   どうしてもバーを出したい箱には data-scrollbar を付ける。-webkit- の方は scrollbar-width が効かない古い Safari（18.1 まで）用 */
main :where(:not(textarea, select, [data-scrollbar])) { scrollbar-width: none; }
main :where(:not(textarea, select, [data-scrollbar]))::-webkit-scrollbar { display: none; }
.text-center { text-align: center; }
.text-orange { color: var(--c-orange); }
.text-soft { color: var(--c-ink-soft); }
.lead { font-size: var(--fs-lead); color: var(--c-orange); line-height: var(--lh-body); }
.loose { line-height: var(--lh-loose); letter-spacing: 0.06em; }
.note { font-size: var(--fs-xs); color: var(--c-ink-soft); line-height: 1.8; }
.note-list li { padding-left: 1.2em; text-indent: -1.2em; }
/* 縦書きの白帯コピー（ヒーロー・理事長）。幅は ch ではなく px */
.vtext { writing-mode: vertical-rl; font-family: var(--f-round); font-size: var(--fs-h1); letter-spacing: var(--ls-vertical); line-height: 1.2; color: var(--c-ink-deep); background: var(--c-white); padding: 12px 8px; }

/* 本文（Markdown 出力）: ## → 左罫線 H2、### → 左罫線 H3、点線区切り */
.prose { font-size: var(--fs-body); line-height: 2; }
.prose > * + * { margin-top: 1.2em; }
.prose h2 { font-size: var(--fs-h2); margin-top: 2.4em; padding-left: 20px; border-left: 4px solid var(--c-orange); line-height: 1.5; }
.prose h2::after, .prose h3::after { content: ""; display: block; margin-top: 16px; margin-left: -24px; border-top: var(--dash); }
.prose h3 { font-size: var(--fs-h3); margin-top: 2em; padding-left: 20px; border-left: 4px solid var(--c-orange); line-height: 1.5; }
.prose h4 { font-size: var(--fs-h4); margin-top: 1.6em; display: flex; align-items: center; gap: 8px; }
.prose h4::before { content: ""; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--c-orange); flex: none; }
.prose ul { padding-left: 1.4em; list-style: disc; } .prose ol { padding-left: 1.6em; list-style: decimal; }
.prose li + li { margin-top: .4em; }
.prose a { color: var(--c-orange); text-decoration: underline; text-underline-offset: 3px; padding-block: 6px; }   /* 行内リンクの当たり判定を 44px に */
.prose img { border-radius: var(--r-photo); width: auto; max-width: 100%; margin-inline: auto; }   /* 原本より大きく拡大しない（width/height 属性の幅が上限） */
.prose table { width: 100%; font-size: var(--fs-small); }
.prose th, .prose td { text-align: left; padding: 10px 12px; border-bottom: var(--dash); vertical-align: top; }
.prose th { background: var(--c-peach-soft); font-weight: 500; white-space: nowrap; }
.prose blockquote { margin: 0; padding: 16px 20px; background: var(--c-white); border-left: 4px solid var(--c-peach); border-radius: var(--r-s); }
.prose strong { color: var(--c-orange); }
.prose hr { margin-block: 2em; }

/* 装飾のはみ出しは data-allow-bleed を付けた親で clip する（overflow-x:hidden を body に付けない） */
[data-allow-bleed] { overflow: clip; }

/* 〜767: 原本（STUDIO）の折り返しに合わせる。小さい仮名（っ・ゃ 等）の行頭を許し（strict だと 1 字早く折れて行が増える）、
   見出しの均等割り（balance。原本は使っていない）をやめる。PC はこれまでどおり */
@media (max-width: 767px) { body { line-break: normal; } h1, h2, h3, h4 { text-wrap: wrap; } }