@charset "UTF-8";

/* ==========================================================================
   合同会社ReJIYu — 全ページ共通スタイル
   1ファイルに集約。ページごとの書き分けはしない。

   デザインの方向性：
   - 色相は青1つだけ。ロゴと同じ #0000A0 をアクセントに使い、ほかの色相を足さない
   - アクセントは小さく使う：ボタン・リンク・番号・図の要点。
     全幅の面（ページヘッダー・CTA・ファーストビュー）には、同じ色相で
     明度を落とした濃紺 --color-navy を使う。純色を大面積に敷くと
     画面上で強く発色し、細い白文字がにじんで見えるため
   - 文字とグレーは、わずかに青みを帯びたニュートラルで統一する
   - 本文はグレーにしない。グレーはリード文・注記・キャプションに限る
   - 大見出しは細字で大きく、小見出しは太字で小さく。太さで階層をつくる
   - 白の角丸パネルを淡いグレー面に置く。濃紺の全幅バンドで区切る
   - 本文は 17px / 行間 2.0。読者に年齢層の高い院長が含まれるため一段大きく
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Windows の游ゴシックの太さ対応
   游ゴシックは font-weight 400 で Regular が選ばれ、Windows では文字が細く
   かすれて見える。300 では Light になり、さらに薄くなる。
   そこで端末に入っている書体（local）だけを使い、太さの対応を1段ずらす。
     300（細字の大見出し） → Regular
     400・500（本文）      → Medium
     700（太字）           → Bold
   ダウンロードは発生しないため「Webフォントを読み込まない」方針は保つ。
   Mac にも游ゴシックがあるため、フォント指定ではヒラギノより後ろに置くこと
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "YuGothic Adjusted";
  src: local("Yu Gothic Regular"), local("YuGothic-Regular");
  font-weight: 300;
}
@font-face {
  font-family: "YuGothic Adjusted";
  src: local("Yu Gothic Medium"), local("YuGothic-Medium");
  font-weight: 400 500;
}
@font-face {
  font-family: "YuGothic Adjusted";
  src: local("Yu Gothic Bold"), local("YuGothic-Bold");
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   1. カスタムプロパティ
   コントラスト比は WCAG 2.1 の計算式による値
   -------------------------------------------------------------------------- */

:root {
  --color-bg:        #FFFFFF;
  --color-bg-alt:    #F4F6FA;  /* セクションの淡い背景 */
  --color-panel:     #FFFFFF;  /* 白パネル */
  --color-border:    #E3E7EF;
  --color-rule:      #D3D8E3;  /* カードを使わない一覧の区切り線。淡いグレー面の上でも見える濃さ */

  --color-text:      #1E2333;  /* 本文。白背景で 15.6:1 */
  --color-heading:   #0E1230;  /* 見出し。白背景で 18.3:1 */
  --color-muted:     #4A5064;  /* 補足（リード文・注記）。白背景で 8.0:1 */
  --color-caption:   #5F6577;  /* さらに弱い補足。白背景で 5.8:1、淡いグレー背景で 5.4:1 */
  --color-border-strong: #7D8598; /* 枠線だけで形を示す要素用。白背景で 3.7:1 */

  --color-accent:    #0000A0;  /* アクセント。ロゴと同色。白背景で 13.9:1 */
  --color-accent-dk: #00007A;  /* アクセントのホバー */
  --color-accent-bg: #F1F2FA;  /* アクセントの淡い面 */

  --color-navy:      #12184A;  /* 全幅の濃紺面。白文字で 16.7:1 */
  --color-accent-lt: #C5CAE6;  /* 濃紺面の上での弱い線・文字。濃紺面で 10.3:1 */
  --color-scrim-rgb: 8, 11, 38; /* ファーストビューの文字下に敷く暗幕 */

  /* Mac・iOS はヒラギノ、Windows は太さを補正した游ゴシック、
     Android は端末標準（Noto Sans CJK）で表示する */
  --font-base: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP",
               "YuGothic Adjusted", "Yu Gothic", "YuGothic", "Meiryo", sans-serif;

  --width-max:    1120px;
  --width-narrow: 840px;

  --gutter: 24px;
  --section-y: 104px;

  --radius:    10px;
  --radius-sm: 5px;

  /* 文字サイズの段階。本文 17px を基準に9段へ集約する。
     値を直接書かず、必ずこのトークンを使う */
  --fs-2xs:     .6875rem;  /* 11px ヘッダー内の補足のみ */
  --fs-xs:      .8125rem;  /* 13px ラベル・パンくず・注記 */
  --fs-sm:      .9375rem;  /* 15px 補足文・フッター */
  --fs-body:    1.0625rem; /* 17px 本文 */
  --fs-h4:      1.1875rem; /* 19px 小見出し（太字） */
  --fs-h3:      1.5rem;    /* 24px 本文中の見出し・大きな数値 */
  --fs-h2:      2.125rem;  /* 34px セクション見出し（細字） */
  --fs-h1:      2.5rem;    /* 40px ページ見出し（細字） */
  --fs-display: 3.125rem;  /* 50px トップのファーストビュー */
  --fs-stat:    5.5rem;    /* 88px 実績の数字（.stat）専用 */
}

/* --------------------------------------------------------------------------
   2. ベース
   -------------------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font-base);
  font-size: var(--fs-body);
  line-height: 2;
  color: var(--color-text);
  background: var(--color-bg);
  font-feature-settings: "palt" 1;
  -webkit-font-smoothing: antialiased;
  text-align: left;
}

/* 大見出しは細く大きく。字間は letter-spacing で調整し、全角スペースは使わない */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  color: var(--color-heading);
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: 0;
}

p { margin: 0 0 1.5em; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 1.5em; padding-left: 1.4em; }
ul:last-child, ol:last-child { margin-bottom: 0; }
li { margin-bottom: .4em; }
li:last-child { margin-bottom: 0; }

a {
  color: var(--color-accent);
  text-underline-offset: .2em;
}
a:hover,
a:focus-visible { color: var(--color-accent-dk); }

img, svg { max-width: 100%; height: auto; vertical-align: middle; }

strong { font-weight: 700; color: var(--color-heading); }

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* 濃紺の面ではアクセント色のリングが背景と同化して見えないため、白に反転する */
.hero :focus-visible,
.page-head :focus-visible,
.cta :focus-visible,
.band :focus-visible {
  outline-color: #fff;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 200;
  padding: .6em 1.2em;
  background: var(--color-accent);
  color: #fff;
  text-decoration: none;
  border-radius: var(--radius-sm);
}
.skip-link:focus { top: 12px; color: #fff; }

/* --------------------------------------------------------------------------
   3. レイアウト
   -------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--width-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--width-narrow); }

/* 読みやすい行長に収めたい本文ブロック */
.prose { max-width: 44em; }

.section { padding-block: var(--section-y); }
.section--alt { background: var(--color-bg-alt); }
.section--tight { padding-block: 64px; }

/* 濃紺の全幅バンド。白パネルを乗せて使う */
.band {
  background: var(--color-navy);
  color: #fff;
  padding-block: var(--section-y);
}
.band h1, .band h2, .band h3 { color: #fff; }
.band a { color: #fff; }

/* 白の角丸パネル */
.panel {
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 48px;
}
.band .panel { border-color: transparent; }

/* 見出しの上に置く小さなラベル */
.eyebrow {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .14em;
  color: var(--color-accent);
  margin-bottom: .9em;
}
.band .eyebrow { color: var(--color-accent-lt); }

/* セクション見出し */
.section__head { margin-bottom: 3em; }
.section__title {
  font-size: var(--fs-h2);
  font-weight: 300;
  line-height: 1.45;
  margin: 0;
}
.section__lead {
  margin: 1.2em 0 0;
  color: var(--color-muted);
  max-width: 44em;
}
.band .section__lead { color: rgba(255, 255, 255, .82); }

/* 連番マーカー */
.num {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: .12em;
  color: var(--color-caption);
  margin-bottom: 1em;
}

/* --------------------------------------------------------------------------
   4. ヘッダー
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: saturate(180%) blur(8px);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 86px;
  padding-block: 10px;
}

.site-logo {
  margin: 0;
  line-height: 1;
}
.site-logo a {
  display: inline-block;
  text-decoration: none;
  transition: opacity .15s ease;
}
.site-logo a:hover { opacity: .72; }
.site-logo img {
  display: block;
  height: 44px;
  width: auto;
}
.site-logo__sub {
  display: block;
  font-size: var(--fs-2xs);
  font-weight: 400;
  color: var(--color-caption);
  letter-spacing: .1em;
  margin-top: .5em;
}

.global-nav ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
}
.global-nav li { margin: 0; }
.global-nav a {
  display: block;
  padding: .5em 1em;
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--color-heading);
  text-decoration: none;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}
.global-nav a:hover { color: var(--color-accent); background: var(--color-accent-bg); }
.global-nav a[aria-current="page"] {
  color: var(--color-accent);
  font-weight: 500;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}
.header-tel {
  text-decoration: none;
  color: var(--color-heading);
  line-height: 1.3;
  text-align: right;
}
.header-tel__num {
  display: block;
  font-size: var(--fs-h4);
  font-weight: 700;
  letter-spacing: .01em;
}
.header-tel__note {
  display: block;
  font-size: var(--fs-2xs);
  color: var(--color-caption);
  letter-spacing: .02em;
}
.header-tel:hover .header-tel__num { color: var(--color-accent); }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: #fff;
  cursor: pointer;
  position: relative;
}
.nav-toggle span {
  position: absolute;
  left: 11px;
  width: 20px; height: 1.5px;
  background: var(--color-heading);
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle span:nth-child(1) { top: 15px; }
.nav-toggle span:nth-child(2) { top: 21px; }
.nav-toggle span:nth-child(3) { top: 27px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   5. ボタン
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  min-width: 260px;
  min-height: 62px;
  padding: .8em 2em;
  font-family: inherit;
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.btn--primary {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}
.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--color-accent-dk);
  border-color: var(--color-accent-dk);
  color: #fff;
}

.btn--outline {
  background: #fff;
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.btn--outline:hover,
.btn--outline:focus-visible {
  background: var(--color-accent-bg);
  color: var(--color-accent-dk);
}

/* 枠線だけで形を示すボタンなので、境界がはっきり見える色を使う */
.btn--ghost {
  background: #fff;
  border-color: var(--color-border-strong);
  color: var(--color-heading);
}
.btn--ghost:hover,
.btn--ghost:focus-visible {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* 濃紺面の上で使うボタン（ファーストビュー・ページヘッダー・CTA・バンド） */
.band .btn--primary,
.hero .btn--primary,
.page-head .btn--primary,
.cta .btn--primary {
  background: #fff;
  border-color: #fff;
  color: var(--color-accent);
}
.band .btn--primary:hover,
.hero .btn--primary:hover,
.page-head .btn--primary:hover,
.cta .btn--primary:hover,
.band .btn--primary:focus-visible,
.hero .btn--primary:focus-visible,
.page-head .btn--primary:focus-visible,
.cta .btn--primary:focus-visible {
  background: var(--color-accent-bg);
  border-color: var(--color-accent-bg);
  color: var(--color-accent-dk);
}

.band .btn--outline,
.hero .btn--outline,
.page-head .btn--outline,
.cta .btn--outline {
  background: transparent;
  border-color: rgba(255, 255, 255, .5);
  color: #fff;
}
.band .btn--outline:hover,
.hero .btn--outline:hover,
.page-head .btn--outline:hover,
.cta .btn--outline:hover,
.band .btn--outline:focus-visible,
.hero .btn--outline:focus-visible,
.page-head .btn--outline:focus-visible,
.cta .btn--outline:focus-visible {
  background: rgba(255, 255, 255, .12);
  border-color: #fff;
  color: #fff;
}

.btn--tel {
  flex-direction: column;
  gap: 0;
  font-size: var(--fs-h4);
  font-weight: 700;
  letter-spacing: .01em;
}
.btn__note {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 400;
  letter-spacing: 0;
  opacity: .82;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.btn-row--center { justify-content: center; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  font-weight: 500;
  text-decoration: none;
}
.link-arrow::after {
  content: "";
  width: .5em; height: .5em;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
}
.link-arrow:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   6. ページヘッダー（下層ページ共通）
   -------------------------------------------------------------------------- */

.page-head {
  background: var(--color-navy);
  color: #fff;
  padding-block: 88px 84px;
}
.page-head .eyebrow { color: var(--color-accent-lt); }
.page-head__title {
  font-size: var(--fs-h1);
  font-weight: 300;
  line-height: 1.45;
  color: #fff;
  margin: 0;
}
.page-head__lead {
  margin: 1.4em 0 0;
  color: rgba(255, 255, 255, .82);
  max-width: 44em;
}

.breadcrumb {
  padding-block: 16px;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--fs-xs);
  line-height: 1.7;
  color: var(--color-caption);
}
.breadcrumb ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .5em;
  margin: 0; padding: 0;
}
.breadcrumb li { margin: 0; display: flex; align-items: center; gap: .5em; }
.breadcrumb li + li::before { content: "／"; color: var(--color-border-strong); }
.breadcrumb a { color: var(--color-caption); text-decoration: none; }
.breadcrumb a:hover { color: var(--color-accent); text-decoration: underline; }

/* --------------------------------------------------------------------------
   7. ファーストビュー（トップ）
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--color-navy);
  color: #fff;
}

/* たなびく旗のWebGL背景。assets/hero-flag.js が canvas を差し込む。
   描画できない環境では単色の背景のままになり、文字は常に読める。 */
.flag-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.flag-canvas canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* 旗の上でも見出しが確実に読めるよう、左側だけ暗く落とす */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(100deg,
    rgba(var(--color-scrim-rgb), .74) 0%,
    rgba(var(--color-scrim-rgb), .40) 34%,
    rgba(var(--color-scrim-rgb), 0) 64%);
}

.hero__inner {
  position: relative;
  z-index: 2;
  padding-block: 128px 124px;
}
.hero .eyebrow { color: var(--color-accent-lt); }
.hero__title {
  font-size: var(--fs-display);
  font-weight: 300;
  line-height: 1.42;
  color: #fff;
  margin: 0 0 .6em;
}
/* 句のまとまりを1行に保つ。幅が足りないときは句の切れ目で折り返す */
.hero__title .phrase { display: inline-block; }
.hero__lead {
  font-size: var(--fs-body);
  color: rgba(255, 255, 255, .88);
  max-width: 42em;
  margin-bottom: 2.6em;
}
.hero__actions { gap: 16px; }

/* 読み込み時に一度だけ立ち上がる導入。スクロール連動はしない */
@media (prefers-reduced-motion: no-preference) {
  .hero__inner > * {
    animation: hero-rise .9s cubic-bezier(.16, 1, .3, 1) both;
  }
  .hero__inner > *:nth-child(1) { animation-delay: .10s; }
  .hero__inner > *:nth-child(2) { animation-delay: .22s; }
  .hero__inner > *:nth-child(3) { animation-delay: .34s; }
}
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   8. カード・グリッド類
   -------------------------------------------------------------------------- */

.grid { display: grid; gap: 24px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 36px 32px;
}
.card__title {
  font-size: var(--fs-h4);
  font-weight: 700;
  line-height: 1.6;
  margin-bottom: .7em;
}
.card p { font-size: var(--fs-body); color: var(--color-text); }

/* カード内で電話番号やメールアドレスを大きく見せる */
.card__value {
  display: block;
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .01em;
  color: var(--color-heading);
  text-decoration: none;
  word-break: break-all;
  margin-bottom: .3em;
}
a.card__value { color: var(--color-accent); }
a.card__value:hover { color: var(--color-accent-dk); text-decoration: underline; }

/* お悩みリスト */
.trouble-list {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.trouble-list li {
  margin: 0;
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 26px 32px 26px 68px;
  position: relative;
  font-size: var(--fs-body);
  line-height: 1.8;
}
/* チェック印。装飾なので読み上げ対象にしない */
.trouble-list li::before {
  content: "";
  position: absolute;
  left: 32px; top: 1.9em;
  width: 15px; height: 8px;
  border-left: 2px solid var(--color-accent);
  border-bottom: 2px solid var(--color-accent);
  transform: rotate(-45deg) translateY(-2px);
}

/* 特徴（01〜05）。カードを並べると単調になるため、罫線で区切る読み物型にする。
   PC では 番号｜見出し｜本文 の3列 */
.feature-list {
  list-style: none;
  margin: 0; padding: 0;
  border-top: 1px solid var(--color-rule);
}
.feature-list > li {
  margin: 0;
  padding: 44px 0;
  border-bottom: 1px solid var(--color-rule);
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 8px 24px;
  align-items: start;
}
.feature-list__num {
  font-size: var(--fs-h2);
  font-weight: 300;
  color: var(--color-accent);
  line-height: 1.1;
  letter-spacing: .01em;
}
.feature-list__body {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  gap: 0 48px;
  align-items: start;
}
.feature-list__title {
  font-size: var(--fs-h4);
  font-weight: 700;
  line-height: 1.6;
  margin: 0;
}
.feature-list__body p { font-size: var(--fs-body); color: var(--color-text); }

/* ステップ（流れ） */
.steps {
  list-style: none;
  margin: 0; padding: 0;
  counter-reset: step;
}
.steps > li {
  position: relative;
  margin: 0;
  padding: 0 0 44px 96px;
}
.steps > li::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0; top: 0;
  width: 60px; height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-accent);
  color: #fff;
  font-weight: 400;
  font-size: var(--fs-body);
  border-radius: 50%;
  letter-spacing: .02em;
}
.steps > li::after {
  content: "";
  position: absolute;
  left: 29px; top: 70px; bottom: 6px;
  width: 1px;
  background: var(--color-border);
}
.steps > li:last-child { padding-bottom: 0; }
.steps > li:last-child::after { display: none; }
.steps__title {
  font-size: var(--fs-h4);
  font-weight: 700;
  margin-bottom: .5em;
  padding-top: .5em;
}
.steps__body { font-size: var(--fs-body); color: var(--color-text); }
.steps__note {
  font-size: var(--fs-sm);
  color: var(--color-caption);
  margin-top: 1em;
  line-height: 1.9;
}

/* 簡易版ステップ（トップ用・横並び）。番号の丸を線でつなぎ、順序を形で示す */
.steps-brief {
  list-style: none;
  margin: 0 0 2.8em; padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.steps-brief > li {
  margin: 0;
  position: relative;
}
.steps-brief > li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 28px;
  left: 68px;
  right: -20px;
  height: 1px;
  background: var(--color-border-strong);
}
.steps-brief__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  margin-bottom: 1.1em;
  border-radius: 50%;
  background: var(--color-accent);
  color: #fff;
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1;
  letter-spacing: .02em;
}
.steps-brief__title {
  font-size: var(--fs-h4);
  font-weight: 700;
  margin-bottom: .4em;
}
.steps-brief p { font-size: var(--fs-sm); color: var(--color-text); margin: 0; }

/* 業種リスト */
.industry-list {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--color-rule);
}
.industry-list > li {
  margin: 0;
  padding: 26px 8px;
  border-bottom: 1px solid var(--color-rule);
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 4px 24px;
  align-items: baseline;
}
.industry-list__name {
  font-weight: 700;
  color: var(--color-heading);
  font-size: var(--fs-body);
}
.industry-list__desc { margin: 0; font-size: var(--fs-body); color: var(--color-text); }

/* 見出しを左、内容を右に置く2列。会社案内など読み物のページで使い、
   トップのカード中心の見せ方と変化をつける */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.6fr);
  gap: 24px 64px;
  align-items: start;
}

/* 本文の横に補足を置く2列。補足は読み進めても画面内に残す */
.split--aside { grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); }
.split__aside {
  position: sticky;
  top: 110px;  /* 固定ヘッダーの高さ＋余白 */
}

/* 実績の数字。読み上げで「歯科医院だけで100件以上の決済導入を…」と
   1文になるよう、1つの段落の中で組む */
.stat-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 32px 64px;
  align-items: start;
}
.stat {
  margin: 0;
  display: flex;
  flex-direction: column;
  color: var(--color-heading);
  line-height: 1.6;
}
.stat__label { font-size: var(--fs-body); font-weight: 700; }
.stat__value {
  font-size: var(--fs-stat);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--color-accent);
  margin-block: .08em .12em;
}
.stat__unit {
  font-size: var(--fs-h3);
  font-weight: 400;
  letter-spacing: 0;
  margin-left: .2em;
  color: var(--color-heading);
}
.stat__note { font-size: var(--fs-sm); color: var(--color-muted); }
/* 数字の横に置く業種リストは幅が狭いため、業種名の列を詰める */
.stat-split .industry-list > li { grid-template-columns: 180px 1fr; }

/* 短い語を並べるタグ（決済手段など） */
.tag-list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
}
.tag-list li {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: .8em;
  padding: .7em 1.6em .7em 1.3em;
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: var(--fs-h4);
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-heading);
}
.tag-list li::before {
  content: "";
  width: 12px; height: 6px;
  border-left: 2px solid var(--color-accent);
  border-bottom: 2px solid var(--color-accent);
  transform: rotate(-45deg) translateY(-2px);
}

/* 罫線だけの一覧（決済手段など） */
.plain-list {
  list-style: none;
  margin: 0; padding: 0;
  border-top: 1px solid var(--color-border);
}
.plain-list > li {
  margin: 0;
  padding: 20px 8px;
  border-bottom: 1px solid var(--color-border);
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 4px 24px;
  align-items: baseline;
  font-size: var(--fs-body);
}
.plain-list__name { font-weight: 700; color: var(--color-heading); }
.plain-list__desc { color: var(--color-text); }

/* --------------------------------------------------------------------------
   9. 図版（ReJIYuの役割）
   -------------------------------------------------------------------------- */

.role-figure {
  margin: 0;
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 56px 40px 36px;
}
.role-figure figcaption {
  margin-top: 26px;
  font-size: var(--fs-sm);
  color: var(--color-caption);
  text-align: center;
  line-height: 1.9;
}

/* 3者関係図。画像ではなく HTML と CSS で組んでいるため、
   拡大縮小しても潰れず、読み上げもできる */
.role-diagram {
  display: grid;
  grid-template-columns: 1fr 1.3fr 1fr 1.3fr 1fr;
  align-items: center;
  gap: 0;
}

.role-diagram__node {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg-alt);
  padding: 26px 14px;
  text-align: center;
  font-weight: 700;
  color: var(--color-heading);
  font-size: var(--fs-body);
  line-height: 1.6;
}
.role-diagram__node span {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 400;
  color: var(--color-caption);
  margin-top: .3em;
}
.role-diagram__node--center {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: #fff;
  padding-block: 34px;
}
.role-diagram__node--center span { color: var(--color-accent-lt); }

.role-diagram__link { text-align: center; }
.role-diagram__label {
  display: block;
  font-size: var(--fs-xs);
  line-height: 1.7;
  color: var(--color-muted);
  padding: 0 6px 10px;
}
.role-diagram__rail {
  position: relative;
  display: block;
  height: 9px;
  margin-inline: 4px;
}
.role-diagram__rail::before {
  content: "";
  position: absolute;
  left: 8px; right: 8px; top: 4px;
  height: 1px;
  background: var(--color-accent);
}
.role-diagram__rail span {
  position: absolute;
  top: 0;
  width: 0; height: 0;
  border-top: 4.5px solid transparent;
  border-bottom: 4.5px solid transparent;
}
.role-diagram__rail span:first-child { left: 0;  border-right: 8px solid var(--color-accent); }
.role-diagram__rail span:last-child  { right: 0; border-left:  8px solid var(--color-accent); }

/* --------------------------------------------------------------------------
   10. 表（会社概要・店舗情報）
   -------------------------------------------------------------------------- */

.info-table {
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid var(--color-border);
}
.info-table th,
.info-table td {
  border-bottom: 1px solid var(--color-border);
  padding: 22px 20px;
  text-align: left;
  vertical-align: top;
  font-size: var(--fs-body);
  line-height: 1.9;
}
.info-table th {
  width: 240px;
  font-weight: 700;
  color: var(--color-heading);
  white-space: nowrap;
}
.info-table td { color: var(--color-text); }
/* パネルの中では外枠が区切りを兼ねるため、上下端の罫線を消す */
.panel > .info-table { border-top: 0; }
.panel > .info-table tr:last-child > * { border-bottom: 0; }

/* 2列レイアウトの中では幅が狭いため、項目名の列を詰める */
.split .info-table th { width: 150px; }
.info-table ul { margin: 0; padding-left: 1.2em; }

/* --------------------------------------------------------------------------
   11. FAQ
   -------------------------------------------------------------------------- */

.faq-list {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  gap: 16px;
}
.faq-list > li {
  margin: 0;
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 34px 40px;
}
.faq__q {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 14px;
  align-items: start;
  font-size: var(--fs-h4);
  font-weight: 700;
  line-height: 1.7;
  margin-bottom: .8em;
}
.faq__a {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 14px;
  align-items: start;
  font-size: var(--fs-body);
  color: var(--color-text);
}
.faq__mark {
  font-size: var(--fs-h4);
  font-weight: 300;
  line-height: 1.35;
  text-align: center;
}
.faq__q .faq__mark { color: var(--color-accent); }
.faq__a .faq__mark { color: var(--color-caption); }
.faq__a > div > p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   12. CTA（各ページ末に必ず置く）
   -------------------------------------------------------------------------- */

.cta { background: var(--color-navy); color: #fff; padding-block: 96px; }
.cta__title {
  color: #fff;
  font-size: var(--fs-h2);
  font-weight: 300;
  line-height: 1.45;
  text-align: center;
  margin: 0 0 .5em;
}
.cta__lead {
  text-align: center;
  color: rgba(255, 255, 255, .82);
  margin-bottom: 3em;
}
.cta__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 960px;
  margin-inline: auto;
}
.cta__card {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: var(--radius);
  padding: 34px 26px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .4em;
}
.cta__label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: .14em;
  color: var(--color-accent-lt);
}
.cta__value {
  display: block;
  font-size: var(--fs-h3);
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  letter-spacing: .01em;
  line-height: 1.5;
  word-break: break-all;
}
a.cta__value:hover { color: var(--color-accent-lt); }
.cta__note {
  display: block;
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, .72);
  line-height: 1.8;
}
.cta__card .btn { width: 100%; min-width: 0; min-height: 54px; margin-block: .3em; }

/* --------------------------------------------------------------------------
   13. その他のパーツ
   -------------------------------------------------------------------------- */

.note {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 30px 34px;
  font-size: var(--fs-sm);
  color: var(--color-muted);
}
.note--accent {
  background: var(--color-accent-bg);
  border-color: #DDE0F0;
}
.note__title {
  font-size: var(--fs-body);
  font-weight: 700;
  margin-bottom: .6em;
}

/* ブロック間の余白。HTML に style 属性を書かず、この2段から選ぶ */
.mt-sm { margin-top: 1.4em; }
.mt-lg { margin-top: 2.4em; }

/* 外部リンクであることの表示 */
.ext::after {
  content: "";
  display: inline-block;
  width: .6em; height: .6em;
  margin-left: .5em;
  border: 1.5px solid currentColor;
  border-left-width: 0;
  border-bottom-width: 0;
  transform: rotate(45deg) translate(-.1em, .1em);
}

.map-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-bg-alt);
}
.map-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  border: 0;
}

/* 本文中の見出し */
.body-title {
  font-size: var(--fs-h3);
  font-weight: 400;
  margin: 2.6em 0 1em;
}
.body-title:first-child { margin-top: 0; }

.body-subtitle {
  font-size: var(--fs-h4);
  font-weight: 700;
  margin: 2em 0 .6em;
}

.signature {
  margin-top: 3em;
  text-align: right;
  line-height: 2;
  color: var(--color-muted);
}
.signature__name {
  font-size: var(--fs-h4);
  font-weight: 700;
  color: var(--color-heading);
}

/* 条文（プライバシーポリシー） */
.article { margin-bottom: 3em; }
.article:last-child { margin-bottom: 0; }
.article__title {
  font-size: var(--fs-h4);
  font-weight: 700;
  padding-bottom: .6em;
  margin-bottom: 1em;
  border-bottom: 1px solid var(--color-border);
}
.article__subtitle {
  font-size: var(--fs-body);
  font-weight: 700;
  margin: 1.8em 0 .5em;
}
.article ol { padding-left: 1.6em; }

.policy-contact {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 30px 34px;
  font-size: var(--fs-body);
  line-height: 2;
}
.policy-contact p { margin: 0; }

/* --------------------------------------------------------------------------
   14. フッター
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--color-bg-alt);
  color: var(--color-muted);
  padding-block: 64px 32px;
  font-size: var(--fs-sm);
  border-top: 1px solid var(--color-border);
}
.site-footer a { color: var(--color-muted); text-decoration: none; }
.site-footer a:hover { color: var(--color-accent); text-decoration: underline; }

.footer-nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  margin: 0 0 40px;
  padding: 0;
}
.footer-nav li { margin: 0; }

.footer-info {
  padding-top: 32px;
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
}
.footer-info__name {
  color: var(--color-heading);
  font-weight: 700;
  font-size: var(--fs-body);
  display: block;
  margin-bottom: .4em;
}
.footer-info address { font-style: normal; line-height: 1.9; }
.footer-copyright {
  font-size: var(--fs-xs);
  color: var(--color-caption);
  margin: 0;
}

/* --------------------------------------------------------------------------
   15. モバイル（ブレークポイントは 768px の1点）
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
  :root {
    --gutter: 20px;
    --section-y: 64px;

    --fs-h4:      1.125rem;  /* 18px */
    --fs-h3:      1.25rem;   /* 20px */
    --fs-h2:      1.5rem;    /* 24px */
    --fs-h1:      1.625rem;  /* 26px */
    --fs-display: 1.75rem;   /* 28px */
    --fs-stat:    3.75rem;   /* 60px */
  }

  /* ヘッダー */
  .site-header__inner { min-height: 64px; }
  .site-logo img { height: 26px; }
  .site-logo__sub { display: none; }

  .nav-toggle { display: block; flex: 0 0 auto; }

  .header-actions { gap: 10px; }
  .header-tel__num { font-size: var(--fs-sm); white-space: nowrap; }
  .header-tel__note { display: none; }

  .site-header { border-bottom: 1px solid var(--color-border); }

  .global-nav {
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    background: #fff;
    border-bottom: 1px solid var(--color-border);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .06);
    display: none;
  }
  .global-nav[data-open="true"] { display: block; }
  .global-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px var(--gutter) 20px;
  }
  .global-nav a {
    padding: .9em .4em;
    border-bottom: 1px solid var(--color-border);
    border-radius: 0;
    font-size: var(--fs-body);
  }

  /* ファーストビュー。縦長の画面では旗が見出しに重なるため、
     スクリムを横方向から縦方向に切り替えて上部を暗く落とす */
  .hero::before {
    background: linear-gradient(180deg,
      rgba(var(--color-scrim-rgb), .88) 0%,
      rgba(var(--color-scrim-rgb), .72) 50%,
      rgba(var(--color-scrim-rgb), .44) 100%);
  }
  .hero__inner { padding-block: 64px 60px; }
  .hero__title { line-height: 1.55; }
  .hero__lead { margin-bottom: 2em; }
  .hero__actions { flex-direction: column; align-items: stretch; }

  .btn { width: 100%; min-width: 0; min-height: 58px; }
  .btn-row { flex-direction: column; align-items: stretch; }

  /* 見出し */
  .section__head { margin-bottom: 2.2em; }
  .page-head { padding-block: 44px 40px; }
  .cta { padding-block: 64px; }
  .cta__lead { margin-bottom: 2em; }

  .panel { padding: 28px 22px; }

  /* グリッド類はすべて1列 */
  .grid--2,
  .grid--3,
  .grid--4,
  .steps-brief,
  .trouble-list,
  .stat-split,
  .split,
  .split--aside,
  .cta__grid { grid-template-columns: 1fr; }

  .trouble-list li { padding: 22px 22px 22px 54px; }
  .trouble-list li::before { left: 22px; top: 1.75em; }

  .feature-list > li {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 32px 0;
  }
  .feature-list__body { grid-template-columns: 1fr; }
  .feature-list__title { margin-bottom: .6em; }

  .industry-list > li,
  .stat-split .industry-list > li,
  .plain-list > li { grid-template-columns: 1fr; gap: 2px; }

  .steps > li { padding-left: 68px; padding-bottom: 34px; }
  .steps > li::before { width: 48px; height: 48px; font-size: var(--fs-sm); }
  .steps > li::after { left: 23px; top: 56px; }
  .steps__title { padding-top: .25em; }

  /* 簡易ステップは縦積みにし、つなぐ線も縦にする */
  .steps-brief { gap: 28px; }
  .steps-brief > li { padding-left: 68px; min-height: 48px; }
  .steps-brief__num {
    position: absolute;
    left: 0; top: 0;
    width: 48px; height: 48px;
    margin: 0;
    font-size: var(--fs-sm);
  }
  .steps-brief > li:not(:last-child)::after {
    left: 23.5px; right: auto;
    top: 56px; bottom: -20px;
    width: 1px; height: auto;
  }
  .steps-brief__title { padding-top: .45em; }

  /* 表は縦積みにする */
  .info-table,
  .info-table tbody,
  .info-table tr,
  .info-table th,
  .info-table td { display: block; width: 100%; }
  .info-table { border-top: 0; }
  .info-table tr { border-top: 1px solid var(--color-border); padding-block: 6px; }
  .info-table tr:last-child { border-bottom: 1px solid var(--color-border); }
  .info-table th {
    border-bottom: 0;
    padding: 16px 4px 2px;
    font-size: var(--fs-sm);
    color: var(--color-caption);
    white-space: normal;
  }
  .info-table td { border-bottom: 0; padding: 0 4px 16px; }
  .panel > .info-table tr:first-child { border-top: 0; }
  .panel > .info-table tr:last-child { border-bottom: 0; }

  .card, .note, .policy-contact { padding: 26px 22px; }
  .role-figure { padding: 28px 20px 20px; }
  .split { gap: 28px; }
  .split__aside { position: static; }

  .faq-list > li { padding: 26px 22px; }
  .faq__q, .faq__a { grid-template-columns: 26px 1fr; gap: 10px; }


  /* 3者関係図は縦積みにし、矢印も縦向きにする */
  .role-diagram { grid-template-columns: 1fr; }
  .role-diagram__link {
    display: grid;
    grid-template-columns: 44px 1fr;
    align-items: center;
    gap: 12px;
    text-align: left;
    padding-block: 6px;
  }
  .role-diagram__label { padding: 0; order: 2; }
  .role-diagram__rail {
    order: 1;
    height: 62px;
    width: 44px;
    margin: 0;
  }
  .role-diagram__rail::before {
    left: 21px; right: auto; top: 8px;
    width: 1px; height: calc(100% - 16px);
  }
  .role-diagram__rail span:first-child,
  .role-diagram__rail span:last-child {
    left: 50%; right: auto;
    transform: translateX(-50%);
    border: 4.5px solid transparent;
  }
  .role-diagram__rail span:first-child {
    top: 0; bottom: auto;
    border-top: 0;
    border-bottom: 8px solid var(--color-accent);
  }
  .role-diagram__rail span:last-child {
    top: auto; bottom: 0;
    border-bottom: 0;
    border-top: 8px solid var(--color-accent);
  }

  .footer-nav ul { flex-direction: column; gap: 0; margin-bottom: 24px; }
  .footer-nav li { border-bottom: 1px solid var(--color-border); }
  .footer-nav a { display: block; padding: .8em 0; }
  .footer-info { display: block; }
  .footer-copyright { margin-top: 24px; }
}

/* --------------------------------------------------------------------------
   16. 印刷
   -------------------------------------------------------------------------- */

@media print {
  .site-header, .site-footer, .cta, .nav-toggle, .skip-link { display: none !important; }
  body { font-size: 12pt; color: #000; }
  a { color: #000; text-decoration: underline; }
  .page-head, .hero { background: #fff !important; color: #000 !important; }
  .page-head__title, .hero__title { color: #000 !important; }
}

/* --------------------------------------------------------------------------
   17. 動きを減らす設定への配慮
   -------------------------------------------------------------------------- */

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