@charset "UTF-8";
/* ============================================================
   DAサポート 子テーマ 上書きスタイル

   site.css（見本サイト由来）の後に読み込む。目的は3つ。

   1. Lightning / WordPress コアとの配色衝突を止める
   2. カード・枠線・角丸・余白を1つの規則に揃える
   3. グリッドをレスポンシブに共通化する

   site.css は自動生成のため直接編集しない。調整はこのファイルで行う。
   ============================================================ */

/* ============================================================
   0. 寸法の共通値

   配色は見本サイト由来（site.css の :root）をそのまま使う。
   ここでは上書きしない。
   ============================================================ */

:root {
  /* --- ヘッダー・フッターの内側の幅 -------------------------
     本文は 1160px。ヘッダーとフッターはその約3/4に絞る。
     メニュー間隔を1.5倍・ロゴを1.3倍にしたため 890px にしていたが、
     メニューの文字を14px→15pxにしてナビが 658px→695px になったため、
     ロゴ169px + 間隔39px + ナビ695px + 左右padding24px = 927px が必要。
     余白を見て 950px とする。 */
  --shell-max: 950px;
  --header-h: 84px;

  /* --- 文字サイズ -------------------------------------------
     一般に使われている目安に合わせる。
       ・本文は 16px 以上（ブラウザ既定が16px。Material Design の
         Body Large も16px、Apple HIG の本文は17px）。
         日本語は同じ px でも漢字の字面が小さく見えるため 17px にする。
       ・注記・キャプションは 12px を下回らない。ここでは 14px。
       ・ボタンは本文と同等の 16px。
       ・ナビゲーションは 14〜16px が一般的。ここでは 15px。
     タップ領域は WCAG 2.5.5（AAA）の 44x44 CSS px を満たす。 */
  --fs-body: 17px;      /* 本文 */
  --fs-ui: 16px;        /* ボタン・CTA */
  --fs-nav: 15px;       /* ヘッダーのメニューとCTA */
  --fs-small: 14px;     /* 注記・キャプション */
  --lh-body: 1.8;       /* 日本語の長文向け */
  --tap-min: 44px;      /* タップ領域の最小 */

  /* ページ先頭の帯の青。
     Lightning の既定は #337EBF だが、白文字とのコントラスト比が 4.31 で
     本文サイズに必要な 4.5 を下回る。サイト自身の青（ボタンと同じ
     --blue #296599）なら 6.15 で基準を満たすため、そちらを使う。 */
  --hero-bg: var(--blue);

  /* --- 面（カード）の共通規則 ------------------------------- */
  --card-radius: 12px;          /* 小～中のカードはすべてこの値 */
  --panel-radius: 16px;         /* サイドパネル・CTA枠など大きい面 */
  --card-border: 1px solid var(--line);
  --card-pad: 24px;
  --card-pad-sm: 20px;
  --grid-gap: 20px;

  /* --- 面の高さ（影）--------------------------------------- */
  --elev-hover: 0 8px 24px rgb(23 53 74 / 10%);

  /* --- ボタン ----------------------------------------------
     CTAボタンの青は、グローバルメニューのサブメニューと同じ
     Lightning のキーカラー #337EBF にそろえる。
     サイトの --blue (#296599) は本番より暗く見えるため、
     ボタンには使わない（リンク色や帯には引き続き使用）。
     ホバーはその --blue に沈める。 */
  --btn-bg: #337EBF;
  --btn-fg: #fff;
  --btn-bg-hover: var(--blue);
  --btn-radius: 8px;
  --btn-min-h: 52px;

  /* --- セクションの縦リズム -------------------------------- */
  --section-y: 72px;
  --section-y-sm: 48px;

  /* 矢印アイコン（マスク用）。カードリンクの右下に出す */
  --da-arrow: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14m-6-6 6 6-6 6'/%3E%3C/svg%3E");
}

/* ============================================================
   0.5 リンクの識別性

   「押せるもの」を色だけで示すと、見出しのサブメッセージ
   （.eyebrow）と同じ青になり区別がつかなかった。
   サブメッセージを無彩色へ寄せ、リンクは青＋下線／矢印で示す。
   ============================================================ */

/* 見出しのサブメッセージ。リンクと同じ青だったのをグレーへ */
.da-page .eyebrow { color: var(--muted); }
.da-page .eyebrow::before { background: var(--blue); }   /* 横棒は青のまま */

/* 本文中のリンクは必ず青＋下線 */
.da-page .article-content a:not(.btn):not(.doc-link):not(.related > a),
.da-page .entry-body p a:not(.btn):not(.doc-link) {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* 矢印付きテキストリンク */
.da-page .text-link {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 4px;
  font-weight: 700;
}
.da-page .text-link:hover { text-decoration-thickness: 2px; }

/* ページ内タブ・出典まわりのリンクも同様に */
.da-page .page-tabs a,
.da-page .inline-links a { color: var(--blue); text-decoration: underline; text-underline-offset: 4px; }

/* ============================================================
   1. ボタン — Lightning / コアブロックの配色に負けないようにする
   ============================================================ */

/* wp:button 経由で出力された場合も同じ見た目にそろえる */
.da-page a.btn,
.da-page .wp-block-button__link.btn,
.da-page .wp-element-button.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: var(--btn-min-h);
  padding: 14px 26px;
  border: 1px solid var(--btn-bg);
  border-radius: var(--btn-radius);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  box-shadow: none;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

.da-page a.btn:hover,
.da-page a.btn:focus-visible,
.da-page .wp-block-button__link.btn:hover {
  background: var(--btn-bg-hover);
  border-color: var(--btn-bg-hover);
  color: var(--btn-fg);
  transform: translateY(-1px);
}

/* 文字色の継承で白が消えるのを防ぐ */
.da-page a.btn,
.da-page a.btn *,
.da-page a.btn svg {
  color: var(--btn-fg);
  stroke: currentColor;
}

/* 副ボタン（白地） */
.da-page a.btn.secondary,
.da-page a.btn.white {
  background: #fff;
  color: var(--blue);
  border-color: #b7c7d3;
}
.da-page a.btn.secondary *,
.da-page a.btn.white * {
  color: var(--blue);
}
.da-page a.btn.secondary:hover,
.da-page a.btn.white:hover {
  background: var(--pale);
  border-color: var(--blue);
}

/* 紺背景のバンド内は白ボタン */
.da-page .medical-band a.btn {
  background: #fff;
  color: var(--navy);
  border-color: #fff;
}
.da-page .medical-band a.btn * { color: var(--navy); }
.da-page .medical-band a.btn:hover { background: var(--pale); }

.da-page a.btn.wide { width: 100%; }

/* 電話番号のCTA。ボタンと区別しつつ同じ余白規則にそろえる */
.da-page .cta-phone,
.da-page .side-phone {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--btn-min-h);
  margin-top: 12px;
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: var(--btn-radius);
  background: #fff;
  color: var(--navy);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}
.da-page .cta-phone:hover,
.da-page .side-phone:hover { background: var(--pale); }

/* コアブロックのボタンが混ざった場合も色を合わせる */
.da-page .wp-block-button__link {
  border-radius: var(--btn-radius);
}

/* ============================================================
   2. 面（カード）— 角丸・枠線・余白・背景を1規則に統一
   ============================================================ */

.da-page .concern,
.da-page .service-card,
.da-page .info-card,
.da-page .doc-link,
.da-page .contact-card,
.da-page .map-cta,
.da-page .prep-result,
.da-page .related > a,
.da-page .step {
  box-sizing: border-box;
  padding: var(--card-pad);
  border: var(--card-border);
  border-radius: var(--card-radius);
  background: #fff;
  box-shadow: none;
  transition: box-shadow .18s ease, border-color .18s ease;
}

/* リンクになっているカードのホバーだけ持ち上げる */
.da-page a.concern:hover,
.da-page a.service-card:hover,
.da-page .related > a:hover,
.da-page .doc-link:hover {
  border-color: #9dbbd3;
  box-shadow: var(--elev-hover);
}

/* 淡い面（補足・強調）も同じ形に */
.da-page .note,
.da-page .consult-prep,
.da-page .side-panel,
.da-page .cta-box {
  box-sizing: border-box;
  padding: var(--card-pad);
  border: var(--card-border);
  border-radius: var(--panel-radius);
  background: var(--pale);
}

/* 注記は左のラインで役割を示す（角丸は他と統一） */
.da-page .note {
  border-left: 4px solid var(--blue);
  border-radius: var(--card-radius);
}
.da-page .note.warm {
  background: #fff7ee;
  border-left-color: #c8762e;
}

/* 関連カード。トップの「いま、気になっていることは何ですか。」の
   カード（.concern）と同じ見た目に揃える。
   幅は既に同じ（357px）で、違っていたのは背景・上辺・高さ。 */
.da-page .related > a {
  display: flex;
  flex-direction: column;
  min-height: 180px;
  border: var(--card-border);
  border-radius: var(--card-radius);
  background: #fff;
}
.da-page .related > a strong {
  margin-bottom: 10px;
  color: var(--blue);       /* 押せることを色で示す */
  font-size: 18px;
}
.da-page .related > a span { color: var(--muted); }

/* 右下に矢印を出し、カード全体がリンクだと分かるようにする */
.da-page .related > a::after {
  content: "";
  display: block;
  width: 22px;
  height: 22px;
  margin-top: auto;
  margin-left: auto;
  background: currentColor;
  color: var(--blue);
  -webkit-mask: var(--da-arrow) center / contain no-repeat;
  mask: var(--da-arrow) center / contain no-repeat;
}
.da-page .related > a:hover strong { text-decoration: underline; text-underline-offset: 4px; }

/* ステップは枠線を持たない列。上辺のラインのみで統一 */
.da-page .step {
  padding: 20px 0 0;
  border: 0;
  border-top: 2px solid var(--line);
  border-radius: 0;
  background: transparent;
}

/* 表も同じ角丸・枠線で */
.da-page .table-wrap {
  border: var(--card-border);
  border-radius: var(--card-radius);
  overflow: hidden;
}
.da-page .table-wrap table { margin: 0; }

/* ============================================================
   3. グリッド — レスポンシブに共通化（個別のbreakpointをやめる）
   ============================================================ */

.da-page .concerns,
.da-page .service-grid,
.da-page .two-col,
.da-page .related,
.da-page .contact-grid {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  align-items: stretch;
}

/* 4枚固定のカード群は2列×2行にそろえる。
     .concerns    「いま、気になっていることは何ですか」
     .service-grid 「目的に合わせて選べるサービス」

   auto-fit のままだと画面幅によって3列＋1列になり、
   4枚目だけが次の行に取り残される。

   切り替えは 900px。これより狭いと1枚あたりが 250px 前後まで細くなり、
   価格と所要時間が折り返してカードが倍近い高さになるため、1列にする。
   2つのセクションで同じ幅で切り替え、途中で並びがちぐはぐにならないようにする。 */
.da-page .concerns,
.da-page .service-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 900px) {
  .da-page .concerns,
  .da-page .service-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.da-page .steps {
  display: grid;
  gap: 28px var(--grid-gap);
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
}

/* 2カラム本文。サイドパネルは狭い画面で下へ回す */
.da-page .article-layout {
  display: grid;
  gap: 48px;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 992px) {
  .da-page .article-layout {
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 56px;
  }
}

/* 左右分割も同様 */
.da-page .split,
.da-page .hero-grid {
  display: grid;
  gap: 40px;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}
@media (min-width: 992px) {
  .da-page .split,
  .da-page .hero-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 56px;
  }
  .da-page .medical-band .split { grid-template-columns: 1.05fr 1fr; }
}

/* CTA枠は狭い画面で縦積み */
.da-page .cta-box {
  display: grid;
  gap: 28px;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}
@media (min-width: 900px) {
  .da-page .cta-box { grid-template-columns: 1fr minmax(260px, auto); gap: 40px; }
}

/* ============================================================
   3.5 Lightning 側の重複要素を止める
   ============================================================ */

/* タイトル帯の抑止は functions.php の lightning_is_page_header フィルタで行う。
   （CSSで隠すとH1が2つ残るため）念のための保険だけ残す。 */
body.da-has-hero > .page-header { display: none; }

/* 独自ヒーローを持たないページ（お知らせ・創業の想い・規約・投稿）は
   Lightning のタイトル帯が出る。帯は青なので文字は白。
   10節で他ページの .page-hero / .hero も同じ青地にそろえている。 */
.da-page .page-header,
.da-page .page-header h1,
.da-page .page-header .page-header-title,
.da-page .page-header a { color: #fff; }

/* パンくずは Lightning のものを使う。上下の余白だけ整える */
.da-page .breadcrumb {
  padding-block: 14px;
  font-size: 13px;
}

/* 本文直下の余計な上マージンを消す */
.da-page .entry-body > .wp-block-group:first-child,
.da-page .post_content > .wp-block-group:first-child { margin-top: 0; }

/* Lightning が .site-body に padding 48px/56px を入れており、
   ヒーローの上（トップはスライダーとの間、下層はパンくずとの間）に
   白い帯が残っていた。ヒーローは全幅の色面なので、上下とも詰める。
   独自ヒーローを持つページだけに限定し、他のページの余白は触らない。 */
body.da-has-hero .site-body {
  padding-top: 0;
  padding-bottom: 0;
}

/* 最終セクションが自前の下余白を持つため、フッター側の上マージンは不要 */
body.da-has-hero .site-footer { margin-top: 0; }

/* Lightning の本文幅制限を、フル幅セクションでは解除する */
.da-page .page-hero,
.da-page .section.pale,
.da-page .medical-band,
.da-page .hero {
  margin-inline: calc(50% - 50vw);
  padding-inline: calc(50vw - 50%);
}

/* ============================================================
   4. セクションの縦リズム・横幅
   ============================================================ */

.da-page .section { padding-block: var(--section-y); }

/* 左右の余白は Lightning の .site-body-container が持っている。
   見本CSSの .container が同じ余白を重ねると二重ガターになり、
   本文が実寸より狭くなる（375px幅で251pxまで縮んでいた）。
   ここでは最大幅と中央寄せだけを担当させる。
   本文（.entry-body）の中だけに適用する。ヘッダー・フッターや
   Lightning 自身のコンテナを巻き込むと、余白や幅の指定が効かなくなる。 */
.da-page .entry-body .container {
  width: 100%;
  max-width: 1160px;
  margin-inline: auto;
  padding-inline: 0;
}

.da-page .page-hero-inner { padding-block: 36px 44px; }

/* 本文・補助テキストの色は見本サイトの指定（--ink / --muted）のまま。
   --muted #536675 は白地で 5.9:1 あり、AA を満たす。 */

/* 見出し直後の余白を一定に */
.da-page .article-content > .wp-block-group + .wp-block-group { margin-top: 48px; }
.da-page .article-content h2 {
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.da-page .article-content h3 { margin: 24px 0 10px; }

/* サイドパネルは十分な高さがあるときだけ追従させる */
@media (min-width: 992px) {
  .da-page .side-panel { position: sticky; top: 96px; }
}

/* ============================================================
   5. フッター — Lightning のフッターナビを段組みにする
   ============================================================ */

/* Lightning は footer-nav-list を1行の横並び（.nav--line）で出す。
   16項目あると折り返しが読みづらいため、段組みにする。 */
.site-footer .footer-nav .container { max-width: 1160px; }

.site-footer ul.footer-nav-list,
.site-footer ul.menu.nav {
  display: grid !important;
  gap: 2px 40px;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
  border: 0;
}

.site-footer ul.footer-nav-list > li,
.site-footer ul.menu.nav > li {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
}
.site-footer ul.footer-nav-list > li::before,
.site-footer ul.footer-nav-list > li::after { content: none; }

.site-footer ul.footer-nav-list > li > a,
.site-footer ul.menu.nav > li > a {
  display: block;
  padding: 7px 0;
  border: 0;
  font-size: 14px;
  line-height: 1.6;
  text-align: left;
  text-decoration: none;
}
.site-footer ul.footer-nav-list > li > a:hover {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* 現在地の強調は下線ではなく色で */
.site-footer .current-menu-item > a { color: var(--blue); font-weight: 700; }

/* ============================================================
   6. お知らせ（トップの新着）
   ============================================================ */

.da-page .da-news { display: grid; gap: 0; }
.da-page .da-news__item {
  display: grid;
  gap: 4px 16px;
  grid-template-columns: 72px minmax(0, 1fr);
  grid-template-areas:
    "thumb date"
    "thumb cat"
    "thumb title";
  align-items: start;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
}
@media (min-width: 720px) {
  .da-page .da-news__item {
    grid-template-columns: 96px 110px 120px minmax(0, 1fr);
    grid-template-areas: "thumb date cat title";
    align-items: center;
  }
}

/* サムネイル。無い記事は枠だけ詰める */
.da-page .da-news__thumb {
  grid-area: thumb;
  display: block;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--pale);
  aspect-ratio: 4 / 3;
}
.da-page .da-news__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.da-page .da-news__item:not(.da-news__item--thumb) .da-news__thumb {
  border-style: dashed;
  opacity: .5;
}
.da-page .da-news__date { grid-area: date; }
.da-page .da-news__cat { grid-area: cat; }
.da-page .da-news__title { grid-area: title; }
.da-page .da-news__item:first-child { border-top: 1px solid var(--line); }
.da-page .da-news__item:hover .da-news__title { color: var(--blue); text-decoration: underline; }
.da-page .da-news__date { color: var(--muted); font-size: 14px; font-variant-numeric: tabular-nums; }
.da-page .da-news__cat { color: var(--blue); font-size: 12px; font-weight: 700; }
.da-page .da-news__title { font-weight: 650; }
.da-page .da-news__more { display: inline-flex; gap: 10px; align-items: center; margin-top: 24px; color: var(--blue); font-weight: 700; }
.da-page .da-news__more:hover { text-decoration: underline; }

/* ============================================================
   6.5 ヘッダー — 幅を絞り、高さを固定する
   ============================================================ */

/* html / body に overflow-x: hidden が掛かっていると、body 自体が
   スクロールコンテナになり、その中の position: sticky が効かなくなる。
   clip なら横スクロールは同じく抑止しつつスクロールコンテナを作らない。 */
html, body { overflow-x: clip; }

/* ヘッダーを上部に固定する。
   見本サイトは `.site-header { position: sticky; top: 0 }` だったが、
   Lightning と同じクラス名のため二重定義を避けて除外した際に
   この指定ごと落ちてしまい、スクロールすると流れて消えていた。 */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgb(255 255 255 / 97%);
  border-bottom: 1px solid var(--line);
  /* 見本サイトは backdrop-filter: blur(14px) だが、固定ヘッダーの背後を
     毎フレーム再合成するためスクロールが重くなる。背景は不透明度97%で
     ぼかしはほぼ見えないため、描画負荷を避けて外している。 */
}

/* 固定ヘッダーの下にアンカー先が隠れないようにする */
html { scroll-padding-top: calc(var(--header-h) + 16px); }

.site-header .site-header-container {
  max-width: var(--shell-max);
  margin-inline: auto;
  padding-inline: 12px;
}

/* 高さが中身で変動していたため固定する（ボタンの高さで114pxまで伸びていた） */
.site-header .site-header-container,
.site-header .global-nav {
  min-height: var(--header-h);
  height: auto;
}

/* Lightning はスクロールすると body へ `scrolled header_scrolled` を付け、
   ヘッダーの見た目を切り替える。実測した差分は次の3点で、いずれも
   「スクロールするとメニューが勝手に上へ動く」原因になっていた。

     .global-nav       display: flex -> block   縦中央揃えが外れる
     .global-nav-list  y: 15px -> 0px           メニューが15px上へ跳ねる
     .site-header      position: sticky -> fixed 流れから外れて本文がずれる

   スクロール前後でヘッダーが一切変化しないように、すべて打ち消す。

   Lightning 側の該当ルール（_g3/assets/css/style.css）:
     .header_scrolled .site-header { position:fixed; top:0; min-height:unset;
                                     animation:header_drop .5s ... }
     .header_scrolled .site-header-logo { display:none }
     .header_scrolled .site-header .global-nav { display:block; margin-inline:auto }
     .header_scrolled .global-nav-list { height:100% }

   打ち消し側は詳細度で上回る必要がある。Lightning の
   `.header_scrolled .site-header .global-nav` は (0,3,0) のため、
   `body` を前置して (0,3,1) にしている。 */
body.header_scrolled .site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  min-height: var(--header-h);
  animation: none;                       /* 落下アニメーションを止める */
  background: rgb(255 255 255 / 97%);
  box-shadow: 0 1px 3px rgb(0 0 0 / 5%);
}
/* 通常時は Lightning の
   `body:not(.header_scrolled) .global-nav--layout--float-right`
   が justify-content:flex-end を当て、margin-left:auto でナビを右へ寄せている。
   スクロールするとこのルールが外れ、さらに Lightning が margin-inline:auto に
   変えるため、メニューが左へ 46px 動いていた。通常時と同じ寄せ方を明示する。 */
body.header_scrolled .site-header .global-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-left: auto;
  margin-right: 0;
}
body.header_scrolled .site-header .global-nav-list {
  height: auto;
  min-height: 0;
}
body.header_scrolled .site-header-logo {
  display: flex !important;
  align-items: center;
}
body.header_scrolled .site-header-container {
  min-height: var(--header-h);
  height: var(--header-h);
}
body.header_scrolled .site-header-logo img { max-height: 52px; }
.site-header .site-header-container { display: flex; align-items: center; gap: 16px; }

/* ロゴの箱は Lightning が width:100% にしており、余った幅をすべて
   吸い込んでいた（画像169pxに対し箱が282pxまで広がる）。
   そのため器を広げてもロゴとナビの間隔は 16px のまま変わらなかった。
   内容幅にして、余りは margin-right:auto でロゴとナビの間へ送る。 */
.site-header .site-header-logo {
  width: auto;
  margin-right: auto;
}

/* Lightning がロゴに margin-right:48px、ナビに padding-left:24px を付けており、
   幅を絞ると合計 72px がはみ出しの原因になる。gap に一本化する。 */
/* Lightning がロゴ枠に padding-top:17.6px を入れており、
   枠は中央に揃うのに中の画像だけが 9px 下がっていた。
   余白を外し、枠と <a> の両方で中央に揃える。 */
.site-header .site-header-logo {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
}
.site-header .site-header-logo > * {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
}
.site-header .site-header-logo img { display: block; }
.site-header .global-nav,
.site-header ul.global-nav-list { padding-left: 0; margin-left: auto; }

/* 見本CSSの `li + li { margin-top: .45em }` が横並びのナビにも効き、
   2番目以降が 5.4px 下がって「はじめての方」だけ浮いて見えていた。
   横並びのリストでは縦マージンを打ち消す。 */
.site-header ul li + li,
.site-footer ul li + li,
.da-page .mobile-cta a + a { margin-top: 0; }

/* ロゴ */
/* ロゴ。130px の1.3倍 */
.site-header .site-header-logo img,
.site-header .custom-logo {
  width: auto;
  max-width: 169px;
  max-height: 52px;
  object-fit: contain;
}

/* グローバルナビ。幅が狭いので文字と間隔を詰める */
.site-header .global-nav > ul,
.site-header ul.global-nav-list {
  display: flex;
  align-items: center;
  gap: 3px;            /* 2px の1.5倍 */
  margin-left: auto;
}
/* 項目間の実効間隔を 10px -> 15px（1.5倍）にする。
   gap 3px + 左右 padding 6px ずつ */
.site-header ul.global-nav-list > li { padding: 0; }
.site-header ul.global-nav-list > li > a {
  padding: 8px 6px;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  white-space: nowrap;
}

/* CTAの li は class="btn" を持つため、見本CSSの汎用 .btn（青塗り・角丸14px）
   がそのまま当たっていた。ボタンの実体は中の <a> なので、li 側の塗りは消す。
   これを残すと <a> の margin 分だけ li の青がはみ出し、
   ボタンの左だけ伸びて見える。 */
.site-header ul.global-nav-list > li.btn,
.site-header ul.global-nav-list > li.nav-cta {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

/* 相談CTA。文字とボタンの大きさを釣り合わせる */
.site-header ul.global-nav-list > li.btn > a,
.site-header ul.global-nav-list > li.nav-cta > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  height: 42px;
  /* 「会社について」との間隔を他の項目と同じ15pxにする。
     内訳は 会社についての右padding 6px + リストのgap 3px + ここの6px。 */
  margin-left: 6px;
  padding: 0 14px;
  border-radius: var(--btn-radius);
  background: var(--btn-bg);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}
/* アニメを本文のボタンと揃える。
   Lightning が transition:all を当てており、レイアウト変化まで
   補間されるためホバーの挙動がここだけ不自然だった。 */
.site-header ul.global-nav-list > li.btn > a,
.site-header ul.global-nav-list > li.nav-cta > a {
  border: 1px solid var(--btn-bg);
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.site-header ul.global-nav-list > li.btn > a:hover,
.site-header ul.global-nav-list > li.nav-cta > a:hover {
  background: var(--btn-bg-hover);
  border-color: var(--btn-bg-hover);
  color: #fff;
  transform: translateY(-1px);
}
/* Lightning が付ける下線・区切り線を消す */
.site-header ul.global-nav-list > li.btn > a::after,
.site-header ul.global-nav-list > li.btn > a::before { content: none; }

/* ============================================================
   6.6 フッター — 面を作ってリンクを内側に収める
   ============================================================ */

/* 帯を1段にする。
   縦3分割で、左1/3にロゴ・社名・住所・電話、右2/3にリンク。
   認定文は中央下、コピーライトは最下段。 */
.site-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  grid-template-areas:
    "info links"
    "cert cert"
    "copy copy";
  column-gap: 48px;
  margin-top: 64px;
  padding-block: 40px 24px;
  border-top: 1px solid var(--line);
  background: var(--pale);
}
.site-footer > .site-footer-content { grid-area: info; }
.site-footer > .footer-nav { grid-area: links; }
.site-footer > .site-footer-copyright { grid-area: copy; }

@media (max-width: 900px) {
  .site-footer {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "info" "links" "cert" "copy";
    row-gap: 24px;
  }
}

/* 帯の左右の余白。グリッドの外側で1回だけ効かせる */
.site-footer { padding-inline: max(20px, calc(50% - var(--shell-max) / 2)); }
.site-footer .footer-nav > .container,
.site-footer .site-footer-content,
.site-footer .site-footer-copyright {
  /* 見本CSSの `.container { width: min(1160px, calc(100% - 80px)) }` が
     効いてグリッド領域を埋めきれていなかったため width も戻す */
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
}

/* リンク群。右2/3に3列で並べる */
.site-footer .footer-nav {
  padding-block: 0;
  margin-bottom: 0;
  border-bottom: 0;
}
/* デスクトップでは、リンク群の先頭をロゴではなく住所の上端にそろえる。 */
@media (min-width: 901px) {
  .site-footer > .footer-nav { margin-top: 72px; }
}
.site-footer ul.footer-nav-list,
.site-footer ul.menu.nav {
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  gap: 0 24px;
}
.site-footer ul.footer-nav-list > li > a {
  padding: 6px 0;
  font-size: 13px;
  color: var(--ink);
}
.site-footer ul.footer-nav-list > li > a:hover { color: var(--blue); }

/* --- 情報ブロック（ロゴ・住所・規約）-----------------------
   ウィジェット由来で文字サイズが 14/16/18px と混在していたため、
   帯の中で 13px に統一する。すべて左寄せ。 */
.site-footer .site-footer-content { padding-top: 0; }

.site-footer .site-footer-content,
.site-footer .site-footer-content p,
.site-footer .site-footer-content li,
.site-footer .site-footer-content a,
.site-footer .site-footer-content span {
  font-size: 13px !important;   /* ウィジェットのインライン指定(18px)を打ち消す */
  line-height: 1.85;
  text-align: left;
  color: var(--ink);
}
.site-footer .site-footer-content a { text-decoration: underline; text-underline-offset: 3px; }
.site-footer .site-footer-content a:hover { color: var(--blue); }

/* 左カラムは1列。Lightning の3カラム分割を解除する */
.site-footer .site-footer-content .row {
  display: block;
  margin-inline: 0;
}
.site-footer .site-footer-content [class*="col-"] {
  width: 100%;
  max-width: none;
  flex: none;
  padding-inline: 0;
}
.site-footer .site-footer-content [class*="col-"]:empty { display: none; }

/* フッターロゴ。社名入りの透過PNGに差し替えたため、
   テキストの社名行（.da-footer-name）は使わない。 */
.site-footer .site-footer-content img {
  width: auto;
  max-width: 230px;
  height: auto;
  margin-bottom: 14px;
}
.site-footer .da-footer-logo { margin: 0 0 14px; }
.site-footer .da-footer-name { display: none; }
.site-footer .da-footer-info { margin: 0; }
.site-footer .da-footer-info .small { font-size: 12px !important; color: var(--muted); }

/* 認定文。帯の中央下 */
.site-footer .da-footer-cert {
  grid-area: cert;
  margin: 28px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  /* 認定の記載。フッターリンク（14px / 400）より少し強くする */
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  text-align: center;
}

/* --- コピーライト ---------------------------------------- */
.site-footer .site-footer-copyright {
  padding-top: 16px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
}
.site-footer .site-footer-copyright p {
  margin: 0;
  font-size: 12px;
  text-align: center;   /* 認定文と同じ中央揃え */
}

/* テーマ・プラグインのクレジット行を出さない。
   本番の追加CSSも同じ意図で書かれていたが、末尾が全角の｝で効いていなかった。 */
.site-footer .site-footer-copyright p:nth-child(2) { display: none; }

/* 共通CTAの主ボタン・電話ボタン・受付時間を一定間隔で縦に並べる。 */
.da-page .cta-buttons {
  display: grid;
  gap: 12px;
}

/* ============================================================
   6.7 CTA の統一
   同じラベルのCTAが、置き場所によって大きさや色が変わっていたため
   そろえる。配色は「主＝塗り / 副＝白地 / 電話＝白地＋枠」の3種のみ。
   ============================================================ */

/* サイドパネル内のボタンも本文と同じ寸法にする
   （site.css が 14px / 48px に落としていた） */
.da-page .side-panel a.btn {
  min-height: var(--btn-min-h);
  padding: 14px 20px;
  font-size: 16px;
}

/* 電話CTA。cta-phone と side-phone で 25px / 20px と差があったので統一。
   文字色もボタンと同系統（--blue）にそろえる。 */
.da-page .cta-phone,
.da-page .side-phone {
  font-size: 20px;
  color: var(--blue);
}

/* `.btn.white` は紺色の帯の上に置く想定のクラスだが、
   site.css 側で `.medical-band` の背景が後から淡い紫（--lavender）へ
   上書きされているため、白ボタン＋白枠では輪郭が消えてしまう。
   置き場所にかかわらず副ボタン（白地＋青文字＋見える枠）に統一する。 */
.da-page a.btn.white,
.da-page .medical-band a.btn.white {
  background: #fff;
  color: var(--blue);
  border-color: #b7c7d3;
}
.da-page a.btn.white *,
.da-page .medical-band a.btn.white * { color: var(--blue); }
.da-page a.btn.white:hover,
.da-page .medical-band a.btn.white:hover {
  background: var(--pale);
  border-color: var(--blue);
}

/* ============================================================
   7. モバイル
   ============================================================ */

@media (max-width: 767px) {
  :root { --card-pad: var(--card-pad-sm); --grid-gap: 16px; }
  .da-page .section { padding-block: var(--section-y-sm); }
  .da-page .cta-box { padding: 28px 20px; }
  /* 固定CTAに隠れないよう下に逃がす */
  body.da-page { padding-bottom: 72px; }
}

/* 画面下の固定CTA */
.da-page .mobile-cta { display: none; }
@media (max-width: 900px) {
  .da-page .mobile-cta {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 40;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--line);
    border-top: 1px solid var(--line);
  }
  .da-page .mobile-cta a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 58px;
    padding: 10px;
    background: #fff;
    color: var(--navy);
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
  }
  .da-page .mobile-cta a:last-child { background: var(--btn-bg); color: var(--btn-fg); }
  .da-page .mobile-cta a:last-child svg { stroke: currentColor; }
}

/* ── 会社概要 / 代表挨拶 ───────────────────────────────── */

/* 余白の指定は詳細度を上げないと通らない。競合は2つある。
     site.css    `.da-page figure { margin: 0 }`                       (0,1,1)
     Lightning   `body .container .is-layout-flow > * + :where(…)`     (0,2,1)
   後者に勝つため、写真は `.da-page figure.da-portrait` (0,2,1) とし、
   overrides.css が後に読み込まれること（同値なら後勝ち）で上書きする。
   他の要素は `.da-page` の前置 (0,2,0) で足りる。 */

/* 代表写真。本文の右に回り込ませる（本番 /company/ と同じ配置）。
   右のCTAカードを出さないぶん本文が広くなるため、写真も大きくする。
   img の sizes は "auto" なので、表示幅に合う候補が自動で選ばれる。 */
.da-page figure.da-portrait {
  float: right;
  width: 320px;
  max-width: 42%;
  margin: 4px 0 24px 36px;
}
.da-page .da-portrait img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--card-radius);
}
.da-page .da-portrait figcaption {
  margin-top: 8px;
  font-size: .82rem;
  color: var(--muted);
  text-align: center;
}

/* 回り込みを次のセクションへ持ち越さない */
.da-page #greeting::after {
  content: "";
  display: block;
  clear: both;
}

/* 冒頭の一行 */
.da-page .da-greeting-lead {
  margin-bottom: .9em;
  font-size: 1.18rem;
  font-weight: 700;
  line-height: 1.7;
}

/* 現場で聞かれた声 */
.da-page .da-voices {
  margin: 0 0 1.1em;
  padding: 14px 18px;
  list-style: none;
  border-left: 3px solid var(--blue);
  background: var(--pale);
  border-radius: 0 var(--card-radius) var(--card-radius) 0;
}
.da-page .da-voices li + li { margin-top: .4em; }

/* 代表挨拶の本文だけ濃くする。
   記事本文の既定は --muted (#536675) で、長文だと弱く見えるため、
   見出しと同じ --ink (#17354A) にそろえる。
   写真キャプションは補足なので --muted のまま残す。 */
.da-page #greeting p,
.da-page #greeting li {
  color: var(--ink);
}

/* 会社概要ページは代表挨拶を主役にするため、右のCTAカードを出さない。
   ページ末尾に相談ボタンと電話のCTAが別にあるため、導線は残る。
   ページの指定には Lightning が body へ付ける post-name-<スラッグ> を使う。
   ページIDだと本番と番号が変わる可能性があるため。 */
.da-page.post-name-company .side-panel { display: none; }

@media (min-width: 992px) {
  /* 1カラムに戻す。`.da-page .article-layout` (0,2,0) より詳細度が高い */
  .da-page.post-name-company .article-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (width <= 640px) {
  .da-page figure.da-portrait {
    float: none;
    width: 240px;
    max-width: 78%;
    margin: 0 auto 20px;
  }
}

/* ============================================================
   9. 文字サイズの統一

   見本サイト由来の site.css は本文15〜16px、ヘッダーのメニューが12px と
   ばらついていた。:root のトークンに寄せる。
   ============================================================ */

/* --- 本文 ------------------------------------------------- */
.da-page .entry-body,
.da-page .article-content,
.da-page .article-content p,
.da-page .article-content li,
.da-page .entry-body > p {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

/* 注記・キャプションは据え置き。本文の指定に巻き込まれないようにする */
.da-page .small,
.da-page p.small,
.da-page .article-content p.small,
.da-page figcaption,
.da-page .muted {
  font-size: var(--fs-small);
  line-height: 1.7;
}

/* 2カラムの節にある「DAサポートについて」だけ、リンクが右カラムの
   左端（x=660）から始まり、他の節のリンク（本文カラムの右端 1187px で揃う）
   とずれて見えていた。右端に合わせる。
   誘導リンクはセクション末尾の右下でそろえる方針にしたので、
   画面幅にかかわらず右寄せにする。 */
.da-page .split-copy .actions {
  justify-content: flex-end;
}

/* --- 会社概要などの定義リスト ------------------------------ */
/* 罫線の崩れは原因が2つあった。
   1. dt に margin-bottom:7.5px が付いており、グリッドの行いっぱいに
      伸びずに罫線が7〜8px上へずれて、段差になっていた。
   2. 狭い画面では column-gap:15px が入り、dt と dd の罫線の間に
      15px の切れ目ができていた。
   gap をやめ、その分を dd の左padding に移して罫線をつなげる。 */
.da-page .definition {
  column-gap: 0;
}
.da-page .definition dt,
.da-page .definition dd {
  margin: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
.da-page .definition dd {
  padding-left: 15px;
}

/* --- ボタン・CTA ------------------------------------------- */
.da-page a.btn,
.da-page .wp-block-button__link.btn,
.da-page .mobile-cta a {
  font-size: var(--fs-ui);
}

/* --- ヘッダーのメニューとCTA -------------------------------- */
/* 項目のラベルは <strong class="global-nav-name"> の中にあり、
   Lightning が 14px を指定している。a 側だけ変えても見た目は変わらない。 */
.site-header ul.global-nav-list > li > a {
  font-size: var(--fs-nav);
  min-height: var(--tap-min);
}
.site-header ul.global-nav-list > li > a .global-nav-name {
  font-size: var(--fs-nav);
}
.site-header ul.global-nav-list > li.btn > a,
.site-header ul.global-nav-list > li.nav-cta > a {
  min-height: var(--tap-min);
  height: var(--tap-min);
  font-size: var(--fs-nav);
  line-height: 1.4;
}

/* ============================================================
   10. 監査で出た不整合の解消（2026-09-18）
   ============================================================ */

/* --- ページ先頭の帯をそろえる -------------------------------
   帯は2種類あった。
     .page-hero  15ページ（本文に持つ。クリーム地・濃紺文字）
     .page-header 5ページ（Lightning の素の帯。青地・白文字）
   青地・白文字の方に統一する。余白・角丸・左端の位置もそろえる。 */
.da-page .page-header {
  background: var(--hero-bg);
  border-bottom: 0;
  border-radius: 0;
}
/* 本文（.entry-body）と左端をそろえる。本文は1110px幅で中央寄せ。 */
.da-page .page-header-inner {
  width: min(1110px, calc(100% - 40px));
  max-width: none;
  margin-inline: auto;
  padding-inline: 0;
  padding-block: 42px 56px;
}
.da-page .page-header-title {
  color: var(--navy);
  font-size: clamp(30px, 3.8vw, 45px);
  line-height: 1.55;
  font-weight: 700;
  text-align: left;   /* Lightning は中央寄せ。他ページのヒーローは左寄せ */
}
@media (max-width: 900px) {
  .da-page .page-header-inner { padding-block: 24px 37px; }
  .da-page .page-header-title { font-size: 30px; line-height: 1.6; }
}

/* --- 本文サイズの取りこぼし ---------------------------------
   /story/ は WordPress の文字サイズ設定（has-regular-font-size）が
   付いた段落があり、16px のまま残っていた。
   プリセット側が !important で指定するため、こちらも必要になる。 */
.da-page .entry-body p.has-regular-font-size {
  font-size: var(--fs-body) !important;
  line-height: var(--lh-body);
}

/* --- カード見出しの大きさ -----------------------------------
   カードの見出しはサイト全体で 21px。/contact/ の .contact-card だけ
   25px で浮いていた。 */
.da-page .contact-card h2 {
  font-size: 21px;
}

/* --- 横に並ぶボタンの高さ -----------------------------------
   文言が折り返すボタンだけ高くなり、隣と段差になっていた。
   同じ行のボタンは高さをそろえる。 */
.da-page .actions {
  align-items: stretch;
}

/* 依頼カードのボタンは、文言が長いものだけ2行になって高さが
   54px→78px とばらついていた。カードごとに縦に並ぶため隣と段差になる。
   横幅に余裕がある画面では折り返さないようにして高さをそろえる。 */
@media (min-width: 641px) {
  .da-page .doc-link a.btn { white-space: nowrap; }
}

/* 依頼カードは「説明文＋ボタン」の横並び。狭い画面ではボタンが
   幅121px・高さ246pxまで縦に潰れていた。縦積みにして全幅で置く。 */
@media (max-width: 640px) {
  .da-page .doc-link {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  .da-page .doc-link a.btn,
  .da-page .doc-link .actions {
    width: 100%;
  }
}

/* 見出しの折り返し位置
   日本語は既定だと文字単位で折り返すため、見出しを改行タグなしにした結果
   「確か／な一歩を」「…の前／に、今の運転を…」のように語の途中で切れていた。
   word-break: auto-phrase で文節の区切りを優先させる。
   （未対応のブラウザは従来どおり文字単位で折り返すだけで、崩れない） */
.da-page h1,
.da-page h2,
.da-page h3,
.da-page .page-header-title,
.da-page .hero-kicker {
  word-break: auto-phrase;
  line-break: strict;
}

/* --- .page-hero / .hero も同じ青地・白文字に ------------------
   下層14ページの .page-hero とトップの .hero は、見本サイト由来の
   クリーム地（--warm）だった。Lightning のタイトル帯に合わせて青地にする。 */
.da-page .page-hero,
.da-page .entry-body .hero {
  background: var(--hero-bg);
  border-bottom: 0;
  /* 見本サイトは右下だけ角丸（.hero 72px / .page-hero 48px）だったが、
     帯を青の面にしたので角丸はやめて水平に切る。 */
  border-radius: 0;
}

/* 帯の中の文字は白 */
.da-page .page-hero,
.da-page .page-hero h1,
.da-page .page-hero p,
.da-page .page-hero .hero-kicker,
.da-page .entry-body .hero,
.da-page .entry-body .hero h1,
.da-page .entry-body .hero h1 em,
.da-page .entry-body .hero p,
.da-page .entry-body .hero .eyebrow,
.da-page .entry-body .hero .hero-foot span {
  color: #fff;
}

/* kicker の横棒は白。トップの所在地アイコンは、白い面の中へ
   ブランドの紫を置き、青いHero上でも形が沈まないようにする。 */
.da-page .page-hero .hero-kicker::before,
.da-page .entry-body .hero .eyebrow::before { background: #fff; }
.da-page .entry-body .hero .eyebrow svg { stroke: #fff; color: #fff; }
.da-page .entry-body .hero .hero-loc { color: #fff; }
.da-page .entry-body .hero .hero-loc svg {
  box-sizing: border-box;
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  padding: 4px;
  border-radius: 50%;
  background: #fff;
  color: var(--navy);
  stroke: currentColor;
}

/* Heroの主CTAもグローバルメニューと同じ色・アニメーションにする。
   副CTAは白枠の透過を維持し、主従関係を明確にする。 */
.da-page .entry-body .hero a.btn {
  background: var(--btn-bg);
  color: var(--btn-fg);
  border-color: var(--btn-bg);
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.da-page .entry-body .hero a.btn * { color: var(--btn-fg); }
.da-page .entry-body .hero a.btn:hover,
.da-page .entry-body .hero a.btn:focus-visible {
  background: var(--btn-bg-hover);
  border-color: var(--btn-bg-hover);
  color: var(--btn-fg);
  transform: translateY(-1px);
}

.da-page .entry-body .hero a.btn.secondary {
  background: transparent;
  color: #fff;
  border-color: rgb(255 255 255 / 70%);
}
.da-page .entry-body .hero a.btn.secondary * { color: #fff; }
.da-page .entry-body .hero a.btn.secondary:hover {
  background: rgb(255 255 255 / 14%);
  border-color: #fff;
}

/* 写真のキャプションは白いカードのままなので、文字色は元に戻す */
.da-page .entry-body .hero .photo-caption,
.da-page .entry-body .hero .photo-caption strong,
.da-page .entry-body .hero .photo-caption * { color: var(--ink); }
.da-page .entry-body .hero .photo-caption svg { stroke: var(--blue); color: var(--blue); }

/* --- 本文中の写真のはみ出し --------------------------------
   見本CSSは `.split-image { width:100%; aspect-ratio:1.3; object-fit:cover }`
   と `.article-content .split-image { max-height:430px }` を <img> 向けに
   書いていたが、ブロックエディタでは同じクラスが <figure> に付く。
   結果、枠は430pxに収まる一方で中の <img> は本来の高さ（658px）のまま描画され、
   228pxはみ出して下の表に重なっていた（/drivingaid/ /healthcheck/）。
   指定を <img> 側へ移す。 */
.da-page .article-content figure.split-image {
  max-height: none;
  aspect-ratio: auto;
  overflow: hidden;
  border-radius: var(--card-radius);
}
.da-page figure.split-image img {
  display: block;
  width: 100%;
  max-height: 430px;
  aspect-ratio: 1.3;
  object-fit: cover;
  border-radius: var(--card-radius);
}

/* --- サービスカードの正式名称 -------------------------------
   カードの見出しは平易な言い方を先に出しているが、それだけだと
   病院やチラシで正式名称を聞いた人が同じものだと気づけない。
   正式名称を見出しの下に小さく併記する。 */
.da-page .service-card h3 small {
  display: block;
  margin-top: 5px;
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0;
  color: var(--muted);
}

/* --- 本番から戻した写真の並べ方 -----------------------------
   装置・機器・帳票の写真を本文に差し込む。縦横比の違う写真が
   混ざるため、枠の比率を固定して object-fit で収める。
   .two-col と同じ auto-fit なので、狭い画面では自然に1列になる。 */
.da-page .photo-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 20px;
  margin-block: 24px;
}
.da-page figure.photo {
  margin: 0;
  min-width: 0;
}
.da-page figure.photo img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
  background: var(--pale);
  border: 1px solid var(--line);
  border-radius: var(--card-radius);
}
.da-page figure.photo figcaption {
  margin-top: 10px;
  font-size: var(--fs-small);
  line-height: 1.7;
  color: var(--muted);
}
/* 帳票・画面キャプチャは切り抜くと読めないので全体を見せる */
.da-page figure.photo.fit img {
  aspect-ratio: 16 / 10;
  object-fit: contain;
  padding: 8px;
}

/* .info-card の見出しの上に置く写真。
   装置の写真は横長・縦長がまちまちで、切り抜くと肝心の部分
   （旋回ノブ、レバーの取り付け位置）が欠ける。枠の高さだけを
   そろえ、写真そのものは全体を見せる。 */
.da-page .info-card .card-photo {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  border-radius: 8px;
  margin-bottom: 18px;
  padding: 8px;
  background: var(--pale);
}

/* --- 地図の埋め込み（/access/）------------------------------
   Googleマップの iframe。訪問者のブラウザから Google へ通信が発生する。 */
.da-map {
  margin-block: 24px 8px;
  overflow: hidden;
  border: var(--card-border);
  border-radius: var(--card-radius);
  aspect-ratio: 16 / 10;
}
.da-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
@media (max-width: 640px) {
  .da-map { aspect-ratio: 4 / 3; }
}

/* ============================================================
   11. トップのヒーロー（写真を背景に）
   ============================================================ */

/* 画像URLは functions.php が <style id="da-hero-photo"> で
   --hero-photo / --hero-photo-mobile として渡す。 */
.da-page .entry-body .hero {
  background-color: var(--hero-bg);   /* 画像が無いときの下地 */
  /* 覆いは文字が乗る左側だけに掛け、右半分は素の写真を見せる。
     覆いを完全に外すと、画像左上のフロントガラス（ほぼ白）に
     見出しが重なり、最悪コントラストが 1.1 まで落ちるため残している。 */
  /* 写真は全体が入るように contain。切り取らない。
     余った上下は --hero-bg の青で埋まる。
     覆いは文字が乗る左側だけに掛ける。 */
  background-image:
    linear-gradient(90deg,
      rgb(23 53 74 / 86%) 0%,
      rgb(23 53 74 / 80%) 44%,
      rgb(23 53 74 / 34%) 60%,
      rgb(23 53 74 / 0%) 76%),
    var(--hero-photo, none);
  background-size: auto, contain;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}

/* 小窓画像をなくしたので、文章は左側に置いて右に写真を見せる。
   上下の padding はヒーローの高さを決める。写真は contain なので
   （ヒーロー高 − 写真高）÷2 が上下の青帯になる。
   1280px幅では写真640px・中身555pxで、72/80 だと帯が34px、
   55/63 にすると 17px（半分）になる。 */
.da-page .entry-body .hero .hero-grid { padding-block: 55px 63px; }
.da-page .entry-body .hero .hero-copy { max-width: 620px; }
.da-page .entry-body .hero .hero-copy > p { max-width: 560px; }

/* Lightning がモバイルヘッダーへ切り替わる一方、Hero はまだPC配置になる
   中間幅では、縦余白を抑えて背景を全面に敷き、上下の青帯を出さない。 */
@media (min-width: 901px) and (max-width: 991.98px) {
  .da-page .entry-body .hero {
    background-size: auto, cover;
  }
  .da-page .entry-body .hero .hero-grid {
    padding-block: 32px;
  }
}

@media (max-width: 900px) {
  /* スマホでも写真をHero全体の背景として扱う。
     横長写真は cover で左右を適度に切り、濃紺の覆いで文字の可読性を守る。 */
  .da-page .entry-body .hero {
    background-image:
      linear-gradient(180deg,
        rgb(23 53 74 / 84%) 0%,
        rgb(23 53 74 / 78%) 58%,
        rgb(23 53 74 / 68%) 100%),
      var(--hero-photo-mobile, var(--hero-photo, none));
    background-size: auto, cover;
    background-position: center, center;
  }
  .da-page .entry-body .hero .hero-grid { padding-block: 44px 46px; }
  .da-page .entry-body .hero .hero-copy { max-width: none; }
}

/* --- お知らせ ---------------------------------------------
   他セクションと同じ .section / .section-top に合わせたので、
   見出しは左、「すべて見る」は右端にそろう。
   一覧は左端ぞろえのまま、本文カラムの中央に置く。 */
.da-page #news .da-news {
  margin-inline: auto;
  text-align: left;
}

/* 狭い画面でヒーローのボタンを横2分割すると、
   「まずは相談する」が3行に折れて潰れる（見本CSSの .hero .btn{flex:1}）。
   縦積みにして全幅で置く。 */
@media (max-width: 640px) {
  .da-page .entry-body .hero .actions {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .da-page .entry-body .hero .actions a.btn {
    flex: none;
    width: 100%;
    max-width: none;
    font-size: var(--fs-ui);
  }
}

/* プライバシーポリシーの条見出しを、利用規約の条見出しと同寸法にする。
   見出し階層（h2）は維持し、見た目だけを統一する。 */
.da-page.post-name-privacypolicy .entry-body h2.wp-block-heading {
  font-size: 21px;
  line-height: 1.5;
}

/* --- セクションの誘導リンクを右下にそろえる ------------------
   「お知らせをすべて見る」などが、見出しの横（セクション上部）だったり
   本文の下だったりして縦位置がばらついていた。
   .section-foot としてセクション末尾に置き、右寄せにする。 */
.da-page .section-foot {
  display: flex;
  justify-content: flex-end;
  margin-top: 28px;
}

/* 下層ページの「節の最後に置かれた誘導リンク」も右寄せにする。
   見出しや本文と同じグループの末尾に置かれているため、
   グループ側ではなくリンク自身を右へ寄せる。
   width: fit-content で押せる範囲は文字の幅のままにする。 */
.da-page .article-content .wp-block-group > a.text-link:last-child {
  display: flex;
  width: fit-content;
  margin-left: auto;
}
/* 1つのセクションにリンクが複数あるときは横に並べる */
.da-page .section-foot { gap: 28px; flex-wrap: wrap; }

/* ============================================================
   12. ボタンの配色とアニメをそろえる

   .btn 系（主・副・白）はそろっていたが、電話ボタンとモバイルCTAだけ
   別系統だった。
     .cta-phone / .side-phone  transition: all 0s（アニメなし）
                               枠 #DDE3E8（副ボタンは #B7C7D3）
     .mobile-cta a             transition: all 0s、角丸14px（他は8px）
                               白い方に枠がなく、文字が --navy（副は --blue）
   ============================================================ */

.da-page .cta-phone,
.da-page .side-phone,
.da-page .mobile-cta a {
  border-radius: var(--btn-radius);
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

/* 電話ボタンは副ボタンと同じ配色・同じホバーに */
.da-page .cta-phone,
.da-page .side-phone {
  border: 1px solid #b7c7d3;
  color: var(--blue);
}
.da-page .cta-phone:hover,
.da-page .side-phone:hover {
  background: var(--pale);
  border-color: var(--blue);
  transform: translateY(-1px);
}

/* モバイルCTA。左＝副ボタン、右＝主ボタンの配色に合わせる */
.da-page .mobile-cta a {
  box-sizing: border-box;
}
.da-page .mobile-cta a:first-child {
  border: 1px solid #b7c7d3;
  color: var(--blue);
}
.da-page .mobile-cta a:first-child svg { stroke: var(--blue); }
.da-page .mobile-cta a:last-child {
  border: 1px solid var(--btn-bg);
  background: var(--btn-bg);
  color: #fff;
}

/* ============================================================
   13. スマホ・タブレットの衝突防止（2026-09-19）

   ・スクロール後のデスクトップナビが狭い画面へ漏れる
   ・相談カードの絶対配置アイコンが見出しへ重なる
   ・サービスカードの矢印が長い文言に押されて枠外へ出る
   ・トップへ戻るボタンが画面下の固定CTAへ重なる
   ============================================================ */

/* grid の 1fr は min-width:auto のため、長い日本語があると
   右端の矢印をカード外へ押し出す。縮められる列として明示する。 */
.da-page .service-card {
  grid-template-columns: minmax(0, 1fr) auto;
}
.da-page .service-card > div {
  min-width: 0;
}

@media (max-width: 991.98px) {
  /* スクロール後に Lightning が .global-nav を再表示する規則も含めて止める。 */
  .site-header .global-nav,
  body.header_scrolled .site-header .global-nav {
    display: none !important;
  }

  /* 狭い画面ではヘッダーをコンパクトにし、ロゴとメニューボタンを共存させる。 */
  .site-header .site-header-container,
  body.header_scrolled .site-header-container {
    min-height: 64px;
    height: 64px;
  }
  .site-header .site-header-logo img,
  body.header_scrolled .site-header-logo img {
    max-width: min(169px, calc(100vw - 96px));
    max-height: 44px;
  }
}

@media (max-width: 900px) {
  /* 固定CTAの高さ＋安全域を確保し、末尾の内容を隠さない。 */
  body.da-page {
    padding-bottom: calc(88px + env(safe-area-inset-bottom));
  }

  /* 右側の長いラベルへ少し多く幅を渡し、1行で読めるようにする。 */
  .da-page .mobile-cta {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  }
  .da-page .mobile-cta a {
    min-width: 0;
    padding-inline: 8px;
    gap: 6px;
    font-size: 14px;
  }

  /* 固定CTAの上に逃がし、ボタン同士のタップ領域を重ねない。 */
  .page_top_btn {
    bottom: calc(88px + env(safe-area-inset-bottom)) !important;
  }
}

@media (max-width: 640px) {
  /* site.css の絶対配置を解除する。アイコン→見出し→説明→リンクの順で
     自然な縦積みにし、文言の長さが変わっても重ならない構造にする。 */
  .da-page .concern {
    position: relative;
    min-height: 0;
    padding: 22px;
  }
  .da-page .concern .icon {
    position: static;
    width: 44px;
    height: 44px;
    margin: 0 0 16px;
  }
  .da-page .concern h3 {
    margin-bottom: 10px;
  }
  .da-page .concern .bottom {
    gap: 10px;
  }
  .da-page .concern .bottom .arrow {
    flex: 0 0 auto;
    margin-left: auto;
  }
}