@charset "UTF-8";

/* =========================================================
 * cocolo corporate site - custom styles
 * Bootstrap 5.3 を補完する最小限のカスタムCSS
 * ========================================================= */

/* ---------------------------------------------------------
 * CSS Variables (デザイントークン)
 * --------------------------------------------------------- */
:root {
  /* Color */
  --color-bg:           #FFF;
  --color-bg-gray:      #f2ede6;
  --color-accent:       #f97e2b;   /* オレンジ：見出し・強調 */
  --color-text:         #443022;   /* 基本文字色 */
  --color-footer:       #56443c;

  /* Service カテゴリの配色（必要に応じてカテゴリを追加していく） */
  --service-home:           #5d87bf;   /* 在宅サービス：見出し帯／文字色 */
  --service-home-bg:        #d9e9fc;   /* 在宅サービス：パネル背景 */
  --service-facility:       #ea8c9c;   /* 施設サービス：見出し帯／文字色 */
  --service-facility-bg:    #fed8dd;   /* 施設サービス：パネル背景 */
  --service-daycare:        #8db772;   /* 通所サービス：見出し帯／文字色 */
  --service-daycare-bg:     #e5f3dc;   /* 通所サービス：パネル背景 */
  --service-other:          #e2ba00;   /* 自費・その他サービス：見出し帯／文字色 */
  --service-other-bg:       #fff4cf;   /* 自費・その他サービス：パネル背景 */
  --vacancy:                #d76a80;   /* 空室情報：施設サービス(--service-facility #ea8c9c)ベースの一段濃いローズ（お知らせ一覧のバッジ／フィルターピル） */

  /* Font */
  /* 先頭の Zalando Sans が Latin（英文・数字）を担当し、
     Zalando Sans が持たない和文グリフは自動的に Noto Sans JP（以降のフォールバック）にフォールバックする */
  --font-base: "Zalando Sans", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Yu Gothic", "Meiryo", sans-serif;

  /* Bootstrap カスタム上書き用 */
  --bs-body-font-family: var(--font-base);
  --bs-body-color: var(--color-text);
  --bs-body-bg: var(--color-bg);
}

/* ---------------------------------------------------------
 * Base
 * --------------------------------------------------------- */
html {
  scroll-behavior: smooth;
  /* 縦スクロールバーを常に表示（ガター確保）。メニュー開閉でバーが
     出入りしてビューポート幅が変わる→レイアウトがガタつくのを防ぐ。 */
  overflow-y: scroll;
}

body {
  font-family: var(--font-base);
  font-weight: 500; /* Medium をデフォルト */
  color: var(--color-text);
  background-color: var(--color-bg);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700; /* 見出しは Bold */
  color: var(--color-accent);
  line-height: 1.4;
}

a {
  color: var(--color-text);
  text-decoration: none;
  transition: opacity 0.2s ease;
}
a:hover {
  opacity: 0.7;
  color: var(--color-text);
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

/* ---------------------------------------------------------
 * Header（固定表示）
 *   - ロゴ：左端、上部に余白あり
 *   - MENUボタン：右上の角に密着、オレンジ正方形
 * --------------------------------------------------------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  /* 背景は透過：下のヒーロー（グレー）を見せる */
  background-color: transparent;
  pointer-events: none; /* 透過部分のクリックを下の要素に通す */
  /* メニュー開閉時の background-color: transparent ⇔ #fff を
     メニュー本体の opacity フェード (0.25s) と同期させる */
  transition: background-color 0.25s ease;
  /* ※ transform / will-change はあえて付けない。
     ancestor に transform が付くと、子孫の position:fixed が
     ビューポートではなくその要素に対して固定されてしまうため、
     MENU ボタンをこの中に入れていた旧構造（キャッシュ）でも
     位置が破綻しないように containing block を作らないこと。 */
}

/* 内部のクリック可能要素は pointer-events を有効に戻す */
.site-header__logo,
.site-header__menu {
  pointer-events: auto;
}

.site-header__logo {
  display: block;
  /* MENUボタンとの視覚的バランスのため、上を少し厚めに */
  padding: 19px 16px 16px;
  /* スクロール時の隠す動作（is-scrolled クラスで切替） */
  transition: opacity 0.3s ease;
}

.site-header__logo img {
  display: block;
  height: 20px;
  width: auto;
}

/* メニュー開いている時は scroll-hide も解除して logo を常に見せる
   .site-header.is-scrolled .site-header__logo (specificity 0,3,0) を上回るため
   body.is-menu-open + .site-header + .site-header__logo の3クラス連結で
   specificity を (0,3,1) に押し上げて勝たせる */
body.is-menu-open .site-header .site-header__logo {
  opacity: 1;
  pointer-events: auto;
}

/* メニュー展開中はヘッダー帯を白で塗り、スクロールしてもロゴが見やすいようにする
   ロゴ右側〜MENU/CLOSE ボタン手前までの帯を確保するため、ロゴ要素自体に背景を当てる */
body.is-menu-open .site-header {
  background-color: var(--color-bg);
  /* 透過部分のクリックを通さない（ロゴ＝白帯の領域をクリック対象にする） */
  pointer-events: auto;
}

/* スクロール時：ロゴを非表示（MENU ボタンは残す） */
.site-header.is-scrolled .site-header__logo {
  opacity: 0;
  pointer-events: none;
}

/* MENUボタン（オレンジ正方形・左下のみ角丸）
   iOS Chrome の URL バー伸縮時の fixed 要素の追従不具合を回避するため、
   header の入れ子ではなく body 直下に独立配置している。
   position: fixed をボタン自身に直接当てることで、ヘッダーの背景アニメーション等の
   影響を受けず、安定して画面右上に固定される。 */
.site-header__menu {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1100; /* .site-header (z-index:1000) より上 */
  background-color: var(--color-accent);
  border: 0;
  padding: 0;
  width: 55px;
  height: 55px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  /* 画面右上に密着するボタン：外側になる左下角だけ丸める */
  border-radius: 0 0 0 16px;
}
.site-header__menu img {
  display: block;
  width: 66%;
  height: auto;
}

/* MENU / CLOSE アイコンの切り替え（aria-expanded で連動）
   .site-header__menu img (specificity 0,1,1) の display:block を上回るため
   親クラス込みで specificity を 0,2,0 にしている */
.site-header__menu .site-header__menu-icon--close { display: none; }
.site-header__menu[aria-expanded="true"] .site-header__menu-icon--open  { display: none; }
.site-header__menu[aria-expanded="true"] .site-header__menu-icon--close { display: block; }

/* ---------------------------------------------------------
 * Hero（ファーストビュー）
 *   - グレー背景は .hero__inner（長方形部分）のみに付与
 *   - .hero__curve（SVG）が下部の円形カットを担当
 *   - .hero 自体は背景なし：SVGの透明部分から body の白が見える
 * --------------------------------------------------------- */
.hero__inner {
  background-color: var(--color-bg-gray);
  padding-top: 72px; /* 固定ヘッダー分の余白（MENU 55px + 余白 17px） */
  padding-bottom: 24px; /* コンテンツとカーブの間の余白。後で微調整 */
  /* 画面左端から画像がはみ出した分をクリップ（角丸は維持したままカット表現） */
  overflow: hidden;
}

/* ----- Hero 上段：画像A + 縦書きコピー ----- */
.hero__top {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  /* 左paddingは付けない：画像Aを画面左端まで突き出すため */
  padding: 0 16px 0 0;
}

/* 写真共通 */
.hero__photo {
  margin: 0;
  /* 画面幅375pxで12pxとなる比率（12/375 = 3.2%）。
     画面幅に応じて角丸サイズが追従する */
  border-radius: 3.2vw;
  overflow: hidden;
  /* ロード時アニメーション：90%スケールから100%へ＋フェードイン */
  opacity: 0;
  animation: heroPhotoZoom 2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.hero__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* A→B→C の順でディレイ */
.hero__photo--a { animation-delay: 0.1s; }
.hero__photo--b { animation-delay: 0.7s; }
.hero__photo--c { animation-delay: 1.3s; }

@keyframes heroPhotoZoom {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* 画像A：上段左、縦長（表示比率 4:5 に統一）
   角丸は4辺とも維持（PC版やアニメーションで活用するため）。
   margin-left のマイナス値で画面左端からはみ出させ、.hero__inner の
   overflow: hidden で視覚的にカット表現する。 */
.hero__photo--a {
  /* flex sizing をやめて width 方式に変更（B と同じ計算経路に揃える） */
  flex: 0 0 auto;
  width: 65%;
  aspect-ratio: 4 / 5;
  margin-left: -24px;
  /* スライドショー用：内部の画像を絶対配置で重ねるための基準 */
  position: relative;
}

/* ----- スライドショー（A / B / C 共通：3枚クロスフェード） -----
   3枚の <img> を重ね、全スロット同期で 01→02→03 を 12s 周期で巡回する。
   各画像は自分の担当 4s 区間でフェードイン→保持→フェードアウトし、
   次画像のフェードインと重ねてクロスフェードする。
   animation-fill-mode: both により、ディレイ待機中は 0%（opacity:0）で待つ。 */
.hero__photo .hero__photo-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Chrome の合成器でサブピクセルを揃えるため独自 GPU レイヤーに乗せる */
  transform: translateZ(0);
  opacity: 0;
  animation: heroPhotoSlideshow 12s ease-in-out infinite both;
}
/* スロットごとに開始位相をずらし、切替タイミングを A→B→C でカスケードさせる。
   オフセットは登場ディレイ（A:0.1s / B:0.7s / C:1.3s）に合わせる。
   各スロット内は base / base+4s / base+8s（12s周期）でシームレスにループ。 */
.hero__photo--a .hero__photo-slide:nth-child(1) { animation-delay: 0.1s; }
.hero__photo--a .hero__photo-slide:nth-child(2) { animation-delay: 4.1s; }
.hero__photo--a .hero__photo-slide:nth-child(3) { animation-delay: 8.1s; }
.hero__photo--b .hero__photo-slide:nth-child(1) { animation-delay: 0.7s; }
.hero__photo--b .hero__photo-slide:nth-child(2) { animation-delay: 4.7s; }
.hero__photo--b .hero__photo-slide:nth-child(3) { animation-delay: 8.7s; }
.hero__photo--c .hero__photo-slide:nth-child(1) { animation-delay: 1.3s; }
.hero__photo--c .hero__photo-slide:nth-child(2) { animation-delay: 5.3s; }
.hero__photo--c .hero__photo-slide:nth-child(3) { animation-delay: 9.3s; }

@keyframes heroPhotoSlideshow {
  0%     { opacity: 0; }   /* フェードイン開始 */
  5%     { opacity: 1; }   /* 約0.6sで表示 */
  33.33% { opacity: 1; }   /* 4s 地点まで保持 */
  38.33% { opacity: 0; }   /* 4〜4.6s でフェードアウト（次画像のフェードインと重なる） */
  100%   { opacity: 0; }   /* 次の周回まで非表示 */
}

/* 画像B：中段右寄せ、縦長（表示比率 4:5 に統一）
   margin-top を負の値にすることで .hero__top（画像A・コピーを含む行）の
   下端より上に引き上げ、画像Aの下端と縦方向に重ねる。
   横位置は画像Aの右側で離れているため視覚的な重なりは発生しない。 */
.hero__photo--b {
  width: 30%;
  margin: -35px 16px 0 auto;
  aspect-ratio: 4 / 5;
  position: relative; /* スライドショー基準 */
}

/* 画像C：下段、横長（表示比率 5:4）、画像Bと少し重ねる
   画像Bを90度回転させたサイズ感（幅と高さを入れ替えた状態）に統一 */
.hero__photo--c {
  width: 44%;
  margin: -76px 0 0 16.5%;
  aspect-ratio: 6 / 4;
  position: relative; /* 重なり順を制御するため */
  z-index: 1;
}

/* ----- Hero 縦書きキャッチコピー ----- */
.hero__copy {
  display: flex;
  flex-direction: row-reverse; /* 縦書き：右から左の順に並べる */
  align-items: flex-start;
  gap: 6px;
  flex: 1;
  padding-top: 15px;
  /* コピー全体の右端位置のオフセット（数値を小さくするほど右にずれる） */
  margin-right: 25px;
}

.hero__copy-line {
  writing-mode: vertical-rl;
  background-color: #fff;
  margin: 0;
  /* vertical-rl では Noto Sans JP のグリフが em ボックス内でわずかに
     右寄りに配置される傾向があるため、左右パディングを非対称にして
     視覚的に文字が箱の中央に来るよう補正している（右側を厚めに）。
     em 指定にして font-size (5.25vw) に追従しスケールさせる：
     375px 時点で 上下 0.3em ≒ 6px、右 0.2em ≒ 4px、左 0 を維持。 */
  padding: 0.3em 0.2em 0.3em 0;
  font-weight: 700;
  /* 画面幅375pxで約20.8px（1.3rem相当）となる比率。
     画面幅に応じて文字サイズが追従する */
  font-size: 5.25vw;
  line-height: 1.7;
  letter-spacing: 0.06em;
  color: var(--color-text);
  /* ロード時アニメーション：上から降りながらフェードイン */
  opacity: 0;
  animation: heroCopyDrop 2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* 1行目（右側：つながるこころが）→ わずかに遅らせて開始 */
.hero__copy-line--right {
  animation-delay: 0.2s;
}

/* 2行目（左側：地域を支えていく）→ さらに遅延 */
.hero__copy-line--left {
  animation-delay: 0.6s;
}

@keyframes heroCopyDrop {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* OSの「視差効果を減らす」設定を尊重 */
@media (prefers-reduced-motion: reduce) {
  .hero__copy-line,
  .hero__photo,
  .hero-menu__item {
    opacity: 1;
    animation: none;
  }
  /* スライドショー無効化：1枚目のみ表示 */
  .hero__photo .hero__photo-slide {
    opacity: 0;
    animation: none;
  }
  .hero__photo .hero__photo-slide:nth-child(1) {
    opacity: 1;
  }
}

.hero__copy-accent {
  color: var(--color-accent);
}

/* ----- Hero メニュー（4ボタン 2×2グリッド） ----- */
.hero-menu {
  margin-top: 24px;
  padding: 0 16px;
}

.hero-menu__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* ロード時アニメーション：4ボタン同時にフェードイン
   写真C のロード（1.3s開始 / 3.3s完了）と並行して立ち上げ、
   視覚的に「写真の後にメニューが現れる」流れを作る */
.hero-menu__item {
  opacity: 0;
  animation: heroMenuFadeIn 1s cubic-bezier(0.22, 1, 0.36, 1) 1.8s forwards;
}

@keyframes heroMenuFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-menu__link {
  display: flex;
  align-items: center;
  gap: 8px;
  /* 上下 padding はカンプ実測（ボタン高さ70px ＝ アイコン48px ＋ 上下11px）。
     左はアイコンを少し内寄せ、右はテキスト幅を稼ぐため薄め */
  padding: 11px 6px 11px 8px;
  background-color: #fff;
  /* 角丸は固定値（375px 表示時の 3.2vw ＝ 12px 相当を採用） */
  border-radius: 12px;
  color: var(--color-text);
  text-decoration: none;
  font-weight: 700;
  line-height: 1.35;
  transition: opacity 0.2s ease;
}

.hero-menu__link:hover {
  opacity: 0.8;
  color: var(--color-text);
}

/* アイコン径はカンプ実測（375px幅で48px相当）。テキスト（最長＝「在宅・その他」6文字）が
   375px でも折り返さないよう、アイコン＋余白を差し引いた残り幅を確保するための寸法。 */
.hero-menu__icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: block;
}

.hero-menu__icon img {
  display: block;
  width: 100%;
  height: 100%;
}

.hero-menu__text {
  font-size: 0.95rem;
}

/* 下部の円形カット（375 × 72.77 の比率で横幅100%に追従） */
.hero__curve {
  display: block;
  width: 100%;
  height: auto;
  /* margin-top は付けない：.hero__inner と隙間なく連結させる */
  margin-top: -1px; /* サブピクセルレンダリングの隙間防止 */
}

/* ---------------------------------------------------------
 * Message セクション（hero 直下：メッセージ＋私たちについて CTA）
 * --------------------------------------------------------- */
/* --- パフォーマンス: 画面外セクションの描画スキップ（軽量化 A-2） ---------------
 * トップページの各セクション（ファーストビュー .hero を除く）に content-visibility:auto を付与し、
 * 画面外にある間の reflow / paint 対象から外す。見た目は不変（画面内では通常描画）。
 *
 * contain-intrinsic-size … 画面外で描画をスキップしている間の「推定サイズ」。
 *   これが無いとスキップ中の高さが 0 に潰れ、スクロールバーが跳ねる（＝スクロール位置ジャンプ）。
 *   auto キーワードは「一度実描画した実寸を記憶して以後それを使う」指定。往復スクロールでガタつかない。
 *   600px はまだ一度も描画していない初回だけ使う概算値（以後 auto が実寸に上書き）。
 *   ブロック要素の幅は利用可能幅が優先されるため、幅側の 600px は無視され全幅は崩れない。
 *
 * 注意: 対象は全幅(100vw)セクションのみ。内部の calc(50% - 50vw) ブリードも 100vw 内に収まるため、
 *       content-visibility が伴う paint containment でクリップされない。
 *       container 幅から横へはみ出すブリードを含む詳細ページの __section 等には安易に付けないこと。 */
.message,
.service,
.topics,
.news {
  content-visibility: auto;
  contain-intrinsic-size: auto 600px;
}

.message {
  background-color: var(--color-bg);
  padding: 32px 0 64px;
}

.message__inner {
  max-width: 480px;
  margin: 0 auto;
  padding: 0 16px;
}

.message__heading {
  font-size: 1.875rem; /* 約 30px */
  line-height: 1.45;
  color: var(--color-accent);
  text-align: center;
  margin: 0 0 36px;
  letter-spacing: 0.04em;
}

.message__body {
  color: var(--color-text);
  text-align: left;
  font-size: 0.95rem;
  line-height: 1.9;
  letter-spacing: -0.07em;
}

.message__body p {
  margin: 0 0 1.6em;
}

.message__body p:last-child {
  margin-bottom: 0;
}

.message__action {
  text-align: center;
  margin: 40px 0 0;
}

/* ---------------------------------------------------------
 * Message Slider（縦長画像が左へ無限ループするスライド）
 *
 * 仕組み：service-detail の写真スライダーと設定を統一。
 *  - 同じ画像セット（3枚）をHTML側で4セット並べる
 *  - 各 .message-slider__item に margin-right を付けてトラックを作る
 *  - トラックを translateX(0) → translateX(-50%) まで一定速度で流す
 *  - -50%（＝トラックの半分＝2セット分）が画面幅より広いのでワイド画面でも途切れない
 *  - 速度80s・4セット・幅（SP220/PC320）・読み込み時フェードインは他スライダーと共通
 * --------------------------------------------------------- */
.message-slider {
  margin-top: 40px;
  overflow: hidden;       /* 画面外にはみ出した分は隠す */
  width: 100%;
}

.message-slider__track {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  width: max-content;     /* 子要素の合計幅にフィット */
  /* service-detail__photo-slider と統一：4セット/-50% を 80s で流す（見た目速度は共通） */
  animation: message-slider-flow 80s linear infinite;
  will-change: transform;
}

.message-slider__item {
  flex: 0 0 auto;
  width: 220px;           /* service-detail スライダーと幅を統一（SP） */
  margin-right: 20px;     /* gapではなくmarginにすることで -50% が綺麗な境界に揃う */
  transition: opacity 0.9s ease;   /* 読み込み時フェードイン用 */
}

/* 読み込み時の1枚ずつフェードイン（service-detail スライダーと共通の演出）。
   JS 有効時のみ初期非表示 → JS が可視スライドへ左→右順に .is-revealed を付与。非JSは常時表示。 */
.js .message-slider__item {
  opacity: 0;
}
.js .message-slider__item.is-revealed {
  opacity: 1;
}

.message-slider__item img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 768 / 976;
  object-fit: cover;
  border-radius: 16px;
  user-select: none;
  pointer-events: none;
}

@keyframes message-slider-flow {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* モーション低減設定の場合は流れを止める */
@media (prefers-reduced-motion: reduce) {
  .message-slider__track {
    animation: none;
  }
}

/* ---------------------------------------------------------
 * Service セクション（サービス内容・カテゴリ別アコーディオン）
 * --------------------------------------------------------- */
.service {
  background-color: var(--color-bg);
  padding: 48px 16px 64px;
}

.service__header {
  text-align: center;
  margin: 0 0 28px;
}

.service__title {
  margin: 0;
  font-size: 1.75rem;       /* 約 28px */
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: 0.08em;
}

.service__title-en {
  margin: 6px 0 0;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-accent);
  letter-spacing: 0.32em;
}

/* ---- グループ（アコーディオン）---- */
.service-group {
  /* デフォルト配色（モディファイアが未指定なら在宅サービス色） */
  --service-color: var(--service-home);
  --service-color-bg: var(--service-home-bg);

  max-width: 480px;
  margin: 0 auto;
  border-radius: 18px;
  overflow: hidden;                          /* 内側の余分なはみ出しをカット */
  background-color: var(--service-color-bg);
}

.service-group + .service-group {
  margin-top: 16px;
}

/* カテゴリ別配色：モディファイアでローカル変数を上書き */
.service-group--home {
  --service-color: var(--service-home);
  --service-color-bg: var(--service-home-bg);
}

.service-group--facility {
  --service-color: var(--service-facility);
  --service-color-bg: var(--service-facility-bg);
}

.service-group--daycare {
  --service-color: var(--service-daycare);
  --service-color-bg: var(--service-daycare-bg);
}

.service-group--other {
  --service-color: var(--service-other);
  --service-color-bg: var(--service-other-bg);
}

/* グループのヘッダー（開閉ボタン兼） */
.service-group__header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 72px;
  /* 左右非対称パディング：アイコンの視覚的な重みに合わせ、
     テキストを若干右へずらして視覚的な中央バランスを取る
     （flex の justify-content: center は content-box の中央なので
       padding-left を大きくすると中央点が右へ移動する） */
  padding: 22px 60px 22px 100px;
  background-color: var(--service-color);
  color: #fff;
  border: 0;
  font-size: 1.125rem;                       /* 約 18px */
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.4;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

/* 左のカテゴリアイコン（PNG：白抜きシルエット） */
.service-group__icon {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  width: 60px;
  height: 60px;
}

.service-group__icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 右のシェブロン（開閉インジケータ） */
.service-group__chevron {
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
}

.service-group__chevron-img {
  display: block;
  width: 100%;
  height: auto;
}

/* デフォルト：開いている時 → 上向きを表示 */
.service-group__chevron-img--close { display: none; }

/* 閉じている時 → 下向きを表示 */
.service-group:not(.is-open) .service-group__chevron-img--open { display: none; }
.service-group:not(.is-open) .service-group__chevron-img--close { display: block; }

/* ---- 展開パネル ---- */
.service-group__panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.45s ease;
}

.service-group.is-open .service-group__panel {
  max-height: 1200px;                        /* 開いた時の余裕を持った最大値 */
}

.service-group__list {
  list-style: none;
  margin: 0;
  padding: 16px 14px 20px;
}

.service-group__item + .service-group__item {
  margin-top: 10px;
}

/* ---- 個別リンク（カプセル型ボタン） ---- */
.service-link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 10px 22px 10px 56px;              /* 左にシェブロン分の余白 */
  background-color: #fff;
  border-radius: 12px;
  color: var(--service-color);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.45;
  letter-spacing: 0.06em;
  text-align: center;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

/* ラベルは <br> で区切ったパーツを .service-link__seg で囲む。各パーツを折り返し禁止にして
   「語中では絶対に折り返さず、改行はパーツ境界（＝<br>と同じ位置）だけ」に固定する。
   SP は <br> でそのまま改行、PC は <br> 非表示＋1行に収まらない時だけ境界で改行（最大2行）。 */
.service-link__seg {
  white-space: nowrap;
}

.service-link:hover,
.service-link:focus-visible {
  opacity: 0.85;
  color: var(--service-color);
}

/* 左の丸囲みシェブロン */
.service-link__chevron {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background-color: var(--service-color);
  border-radius: 50%;
}

.service-link__chevron img {
  display: block;
  width: 5px;
  height: auto;
}

/* ---------------------------------------------------------
 * Service Detail（サービス詳細ページ：訪問介護・訪問看護 等）
 *   - カテゴリ色は --detail-color / --detail-color-bg をモディファイアで切り替える
 *   - 在宅(青) / 施設(ピンク) / 通所(緑) / 自費(黄) の4種類を想定
 *   - ページタイトル帯 → ヒーロー画像 → キャッチ → リード文 → 各サービス内容
 * --------------------------------------------------------- */
.service-detail {
  /* デフォルトは在宅(青) */
  --detail-color: var(--service-home);
  --detail-color-bg: var(--service-home-bg);
}

.service-detail--home     { --detail-color: var(--service-home);     --detail-color-bg: var(--service-home-bg); }
.service-detail--facility { --detail-color: var(--service-facility); --detail-color-bg: var(--service-facility-bg); }
.service-detail--daycare  { --detail-color: var(--service-daycare);  --detail-color-bg: var(--service-daycare-bg); }
.service-detail--other    { --detail-color: var(--service-other);    --detail-color-bg: var(--service-other-bg); }

/* ---- ページタイトル帯（カテゴリ色塗り） ----
   固定ヘッダー(高さ約55px)直下から始まる。本帯の上下にわずかな余白を入れる */
.service-detail__title-band {
  margin-top: 70px;
  padding: 16px 16px;
  min-height: 96px;                /* 1行/2行/サブタイトル付きいずれも同じ帯高さに揃える */
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--detail-color);
  text-align: center;
}

.service-detail__title {
  margin: 0;
  color: #fff;
  font-size: 1.5rem;
  font-weight: 900;                /* Noto Sans JP Black 相当でしっかり強調 */
  letter-spacing: 0.05em;
}

/* --long: 「看護小規模多機能型居宅介護」など13文字級の長いタイトル用。
   375px で1行に収まるよう viewport 連動でスケールさせつつ、広い画面では
   通常サイズ(1.5rem)を上限に帯幅いっぱいに見せる */
.service-detail__title--long {
  font-size: clamp(1.1rem, 5.5vw, 1.5rem);
  letter-spacing: 0.03em;
}

/* ---- 本文コンテナ ---- */
.service-detail__container {
  max-width: 480px;
  margin: 0 auto;
  padding: 32px 16px 64px;
}

/* ---- ヒーロー画像（実画像が決まるまでグレー塗りのプレースホルダ） ----
   実画像導入時は <figure> 内に <img> を入れれば自動で差し替わる。
   アスペクト比 7:4 はカンプ実測値 (392×224px) に合わせている */
.service-detail__image {
  margin: 0 0 32px;
  aspect-ratio: 7 / 4;
  background-color: #b1aaa5;
  border-radius: 20px;
}

.service-detail__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
}

/* --menu: 料金表の直上に置くメニュー写真。表と横幅を揃える（訪問理美容ページ）。
   SP は本文コンテナ幅＝表と同幅なのでそのまま。PC で表と同じ 720px に絞る指定は
   min-width:769px 側で行う（ヒーロー用の height:500px も併せて解除） */

/* ---- キャッチコピー（カテゴリ色・センター揃え） ---- */
.service-detail__catch {
  margin: 0 0 28px;
  color: var(--detail-color);
  font-size: 1.35rem;
  font-weight: 900;
  text-align: center;
  line-height: 1.6;
  letter-spacing: 0.04em;
}

/* ---- リード文（上にカテゴリ色の区切り線） ----
   区切り線は border-box 幅いっぱい（コンテナ幅）に引き、
   本文だけ左右 padding で内側に寄せる（カンプ準拠） */
.service-detail__lead {
  margin: 0 0 48px;
  padding: 24px 8px 0;
  border-top: 1px solid var(--detail-color);
  color: var(--color-text);
  font-size: 0.95rem;
  line-height: 1.9;
}

/* ---- サブセクション（サービス内容など） ---- */
.service-detail__section {
  margin: 0 0 40px;
}

/* gray-bleed: 複数セクションを束ねて全幅グレー背景にするラッパー。
   container の左右 padding (16px) を打ち消す負マージン技で全幅化し、
   ラッパー内側の padding でテキスト位置を元に戻す。
   訪問看護ページの「ご利用について + ご利用までの流れ」一帯用 */
.service-detail__gray-bleed {
  margin: 0 calc(50% - 50vw) 40px;
  padding: 40px 16px 48px;
  background-color: var(--color-bg-gray);
}

/* ラッパー内の末尾セクションは margin-bottom を消して、
   グレー領域の下端パディング (48px) だけが余白として残るようにする */
.service-detail__gray-bleed > .service-detail__section:last-child {
  margin-bottom: 0;
}

/* 全幅グレー内のサブカードは「白カード on グレー背景」に反転 */
.service-detail__gray-bleed .service-detail__sub-card {
  background-color: #fff;
}

/* gray-bleed が container の末尾要素のときは footer まで延長：
   下マージンを消し、padding-bottom を厚くして、グレー帯が footer curve に
   直接接続するようにする（body.is-service-detail の白フッターと組み合わせて使う） */
.service-detail__container > .service-detail__gray-bleed:last-child {
  margin-bottom: 0;
  padding-bottom: 80px;
}

/* ---- 補足注釈テキスト（※ で始まる小さい説明） ---- */
.service-detail__note {
  margin: 14px 0 0;
  padding: 0 16px;                  /* カード等より左右を少し内側に寄せる */
  color: var(--color-text);        /* 本文と同じ濃さ（黒） */
  font-size: 0.8rem;
  line-height: 1.7;
}

/* セクションタイトル：左に縦バーアクセント（カテゴリ色） */
.service-detail__section-title {
  position: relative;
  margin: 0 0 16px;
  padding-left: 14px;
  color: var(--color-text);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.service-detail__section-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2em;
  bottom: 0.2em;
  width: 4px;
  background-color: var(--detail-color);
  border-radius: 2px;
}
/* 見出し末尾の補足（例: 「（1割負担の場合）」）は一回り小さく */
.service-detail__section-title small {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* ---- 項目リスト（ラベル+説明の2カラム） ---- */
.service-detail__items {
  list-style: none;
  margin: 0;
  padding: 0;
}

.service-detail__item {
  display: grid;
  /* ラベル列幅: 375px viewport で「日常生活支援」(6文字) が改行されないギリギリの幅。
     1rem(16px) × 6 + letter-spacing 0.04em × 5 ≒ 99.2px に左右 padding 8px ×2 を加味 */
  grid-template-columns: 135px 1fr;
  border: 1px solid var(--detail-color);
  border-radius: 10px;
  overflow: hidden;
}

.service-detail__item + .service-detail__item {
  margin-top: 8px;
}

.service-detail__item-label {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 6px;
  background-color: var(--detail-color);
  color: #fff;
  font-size: 1.2rem;
  font-weight: 900;
  text-align: center;
  letter-spacing: 0.04em;
}

.service-detail__item-desc {
  display: flex;
  align-items: center;
  padding: 12px 14px;
  background-color: #fff;
  color: var(--color-text);
  font-size: 0.875rem;
  line-height: 1.55;
}

/* ---- ベージュ背景のカード（対応エリア等） ----
   container の max-width を突き抜けて常に viewport の左右端まで広げる。
   50% (margin の基準 = 自要素の containing block 幅) と 50vw (ビューポート幅基準) の
   差分を負マージンに与えると、画面幅に依らずカードの左右端が viewport edge に一致する。
   内側パディングは 16px に取り直して他セクションのコンテンツと縦のラインを揃える。 */
.service-detail__card {
  margin: 0 calc(50% - 50vw) 40px;
  padding: 24px 16px 28px;
  background-color: var(--color-bg-gray);
}

/* セクションタイトルはカード内でも同じ縦バー付き見出しを再利用するため上マージン調整 */
.service-detail__card .service-detail__section-title {
  margin-bottom: 20px;
}

/* ---- 対応エリア：都道府県ごとのグループ ---- */
.service-detail__area-group + .service-detail__area-group {
  margin-top: 24px;
}

/* --inline: 県名と市町村ピルを横並びに（ピル1〜2個などエリアが少ない時に使う）。
   訪問看護ページのように山形市のみ など、縦積みだと余白が大きくなりすぎる場合の修飾子 */
.service-detail__area-group--inline {
  display: flex;
  align-items: center;
  gap: 16px;
}

.service-detail__area-group--inline .service-detail__area-prefecture {
  margin: 0;                       /* 縦並び時の下マージンを解除 */
  flex: 0 0 auto;
}

.service-detail__area-group--inline .service-detail__area-cities {
  display: flex;                   /* grid → flex に切替（中央寄せ不要） */
  flex-wrap: wrap;
  justify-content: flex-start;
  grid-template-columns: none;
}

/* 県名見出し：section-title のテキスト左端 (padding-left: 14px) と
   揃うよう padding-left を 14px に。バーは付かないがテキスト位置は揃う */
.service-detail__area-prefecture {
  margin: 0 0 12px;
  padding-left: 14px;
  color: var(--detail-color);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}

/* ---- 市町村ピル ----
   Grid で 3カラム固定にし、justify-content: center でカラムトラックごと
   親コンテンツ領域の中央に寄せる。各ピルはカラムを左から順に埋めるので、
   行内では自然に左揃え、最終行に1個だけ残った場合も左端のカラムに配置される。 */
.service-detail__area-cities {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 92px);
  justify-content: center;
  gap: 8px;
}

.service-detail__area-cities li {
  /* カンプ準拠でピル幅を統一。4文字市町村 (寒河江市/多賀城市) が収まる最小幅を
     min-width で確保し、3文字市町村もこの幅に揃える。
     375px viewport で 3列 × 1行 が成立する: card 内コンテンツ 327px に対し
     3 列 × 92px + gap 8 × 2 = 292px → 左右に 17.5px ずつ余りができ中央寄せ */
  min-width: 92px;
  padding: 5px 14px;
  background-color: #fff;
  border-radius: 999px;
  color: var(--color-text);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: center;
}

/* ---- セクション内サブタイトル（ご利用いただける方等） ----
   縦バー無しのカテゴリ色テキストのみ。section-title より階層的に小さい */
.service-detail__sub-title {
  margin: 0 0 12px;
  padding-left: 4px;
  color: var(--detail-color);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* sub-title 内の補足（カッコ書き）は小さめに（料金表の見出し等で使用） */
.service-detail__sub-title small {
  font-size: 0.8rem;
  font-weight: 700;
}

/* sub-title を料金表の小見出しに使う場合の上マージン
   （本文の直後＝表タイトル／表の直後＝次の表タイトル） */
.service-detail__text + .service-detail__sub-title {
  margin-top: 40px;
}
.service-detail__price-table-wrap + .service-detail__sub-title {
  margin-top: 32px;
}
/* 看多機月額：オレンジカード（price-lead）と小見出しの間を広めに開ける
   （price-lead の margin-bottom 20px と相殺し、実効ギャップを 40px に） */
.service-detail__price-lead + .service-detail__sub-title {
  margin-top: 40px;
}

/* 導入文の直後にオレンジ配色ブロック（住宅型の実費費用など）が来る場合、
   見出しが price-accent 内にネストされ「text + sub-title」隣接が効かないため、
   ブロック自体に上マージンを与えて本文との窮屈さを解消する */
.service-detail__text + .service-detail__price-accent {
  margin-top: 40px;
}

/* ---- 通常の本文段落 ---- */
.service-detail__text {
  margin: 0;
  color: var(--color-text);
  font-size: 0.95rem;
  line-height: 1.85;
}

/* ---------------------------------------------------------
 * Policy（個人情報保護方針など、カテゴリ色を持たない規程ページ）
 *   service-detail の骨格を流用し、アクセント色をブランドオレンジに固定する。
 *   見出しの縦バー／箇条書きマーカー／枠線などが一括でオレンジになる。
 * --------------------------------------------------------- */
.service-detail--policy {
  --detail-color: var(--color-accent);
  --detail-color-bg: var(--color-bg-gray);
  /* 規程ページは本文・見出しを黒で読ませる（ブランド標準の茶系 #443022 を上書き） */
  --color-text: #000;
}

/* 会社概要は policy の骨格（オレンジ）を流用しつつ、本文色はブランド標準（茶系）に戻す。
   --policy(#000) より詳細度を高くして確実に上書きする（2クラス指定） */
.service-detail--policy.service-detail--company {
  --color-text: #443022;
}

/* 規程ページはセクションが多いため、共通の 40px より広めの余白で区切る */
.service-detail--policy .service-detail__section {
  margin-bottom: 60px;
}

/* 規程ページの箇条書きマーカー（・）は黒にする（アクセントのオレンジを上書き） */
.service-detail--policy .service-detail__bullets > li::before {
  color: var(--color-text);
}

/* 署名行（代表取締役名）：導入文直後の小さめテキスト（カンプに合わせ左揃え）。
   導入文との間と、次セクション見出しとの間に十分な余白を確保する */
.service-detail__sign {
  margin: 32px 0 70px;
  color: var(--color-text);
  font-size: 0.85rem;
  line-height: 1.7;
  text-align: left;
}

/* 箇条書き（・マーカー）：利用目的・第三者提供などの列挙用 */
.service-detail__bullets {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}
.service-detail__bullets > li {
  position: relative;
  padding-left: 1.1em;
  color: var(--color-text);
  font-size: 0.95rem;
  line-height: 1.85;
}
.service-detail__bullets > li + li {
  margin-top: 6px;
}
.service-detail__bullets > li::before {
  content: "・";
  position: absolute;
  left: 0;
  color: var(--detail-color);
}

/* お問い合わせ対応窓口ボックス（カンプ準拠：枠線なし・グレー背景・社名 + TEL を横並び） */
.service-detail__contact-box {
  margin: 16px 0 0;
  padding: 16px 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 18px;
  border-radius: 12px;
  background-color: var(--color-bg-gray);
}
.service-detail__contact-box-name {
  color: var(--color-text);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.service-detail__contact-box-tel {
  color: var(--color-text);
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
}
.service-detail__contact-box-tel:hover {
  text-decoration: underline;
}

/* =========================================================
 *  お問い合わせフォーム（contact-form）
 *  ── service-detail--contact（オレンジ＝--detail-color）の骨格に乗る。
 *     最終的には CF7 + Multi-Step Forms で構築するため、見た目だけを
 *     共通クラスで定義しておき、本番は各フィールドを CF7 タグへ差し替える。
 * ========================================================= */

/* カテゴリ色をブランドオレンジに。本文色はブランド標準（茶系）のまま。
   policy と違い本文を #000 に落とさない（ラベル・本文は茶系で読ませる） */
.service-detail--contact {
  --detail-color: var(--color-accent);
  --detail-color-bg: var(--color-bg-gray);
}

/* 導入文（タイトル帯とフォーム見出しの間の説明） */
.service-detail__lead-text {
  margin: 0 0 44px;
  color: var(--color-text);
  font-size: 0.95rem;
  line-height: 1.9;
}

.contact-form {
  margin: 8px 0 0;
}

/* 各フィールド行 */
.contact-form__row {
  margin: 0 0 28px;
}

/* ラベル（お名前 等）＋必須バッジ */
.contact-form__label {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin: 0 0 12px;
  color: var(--color-text);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* 必須バッジ（オレンジ塗りの角丸） */
.contact-form__badge {
  flex: none;
  padding: 4px 14px;
  border-radius: 6px;
  background-color: var(--detail-color);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

/* 入力欄共通（input / textarea / select）：白地＋淡いタン色の枠線 */
.contact-form__input,
.contact-form__textarea,
.contact-form__select {
  display: block;
  width: 100%;
  padding: 15px 18px;
  border: 1px solid #d3c7bb;
  border-radius: 12px;
  background-color: #fff;
  color: var(--color-text);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.6;
  -webkit-appearance: none;
  appearance: none;
}
.contact-form__input::placeholder,
.contact-form__textarea::placeholder {
  color: #b3a89d;
}
.contact-form__input:focus,
.contact-form__textarea:focus,
.contact-form__select:focus {
  outline: none;
  border-color: var(--detail-color);
}

/* テキストエリア（メッセージ）：プレースホルダの例文が収まる高さ */
.contact-form__textarea {
  min-height: 220px;
  resize: vertical;
}

/* セレクト：右端にカテゴリ色の v 字マーカーを重ねる */
.contact-form__select-wrap {
  position: relative;
}
.contact-form__select-wrap::after {
  content: "";
  position: absolute;
  /* セレクト入力の縦中央に固定。CF7 のバリデーションエラー文がラッパー内に
     追加されて枠が縦に伸びても、シェブロンがずれないよう top:50% は使わない */
  top: 26px;
  right: 22px;
  width: 11px;
  height: 11px;
  border-right: 2px solid #b3a89d;
  border-bottom: 2px solid #b3a89d;
  transform: translateY(-50%) rotate(45deg);
  pointer-events: none;
}
.contact-form__select {
  padding-right: 44px;
}
/* 未選択（プレースホルダ option）時は薄いグレー文字に見せる */
.contact-form__select:has(option[value=""]:checked) {
  color: #b3a89d;
}
/* セレクトにフォーカスがある時だけ、シェブロンをカテゴリ色（オレンジ）に点灯。
   フォーカスが外れたらグレーに戻る（選択の有無は問わない） */
.contact-form__select-wrap:focus-within::after {
  border-color: var(--detail-color);
}

/* プライバシーポリシー同意ボックス（グレー背景・角丸なし） */
.contact-form__privacy {
  margin: 40px 0 0;
  padding: 24px 20px;
  background-color: var(--color-bg-gray);
}
.contact-form__privacy-text {
  margin: 0;
  color: var(--color-text);
  font-size: 0.88rem;
  line-height: 1.9;
}
.contact-form__privacy-text a {
  color: var(--color-text);
  text-decoration: underline;
}
/* 同意チェック行（中央寄せ） */
.contact-form__agree {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 18px 0 0;
  color: var(--color-text);
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
}
.contact-form__agree input {
  width: 20px;
  height: 20px;
  accent-color: var(--detail-color);
}
/* CF7 acceptance（本番）：プラグインが出力する入れ子（span > span > label）を
   プレビューの .contact-form__agree（label）と同じ中央寄せ・横並びに整える */
.contact-form__agree .wpcf7-form-control-wrap,
.contact-form__agree .wpcf7-acceptance,
.contact-form__agree .wpcf7-list-item {
  margin: 0;
}
.contact-form__agree .wpcf7-list-item label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-weight: 700;
  cursor: pointer;
}

/* 送信（確認画面へ）ボタン：トップのトピックス一覧と同じ薄型 btn--solid を流用。
   <button> 要素のブラウザ既定（フォント・カーソル）だけ補正する */
.contact-form__submit {
  margin: 36px 0 0;
  text-align: center;
  position: relative;            /* スピナーの絶対配置の基準 */
}
.contact-form__submit .btn {
  font-family: inherit;
  cursor: pointer;
}
/* CF7 が [submit] の直後に必ず出力するスピナー（待機中は不可視だが幅を占有し、
   ボタンが左に寄って見える原因）。絶対配置でレイアウトから外し、ボタンを中央に保つ。
   送信中はボタンの右脇に重なって表示される */
.contact-form__submit .wpcf7-spinner {
  position: absolute;
  margin-left: 8px;
}
/* CF7 の [submit]/[previous] は <input> で出力されるため、子要素の .btn__chevron を
   持てない。シェブロンは背景画像で表現する（class:btn class:btn--solid を付与した前提）。
   value は CF7 側のラベルなので、ここでは見た目だけ btn と揃える */
.contact-form__submit .wpcf7-submit {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 46px;
  background-image: url('../image/SVG/arrow-right-white.svg');
  background-repeat: no-repeat;
  background-position: right 22px center;
  background-size: 8px 12px;
}
@media (hover: hover) {
  .contact-form__submit .wpcf7-submit:hover {
    background-image: url('../image/SVG/arrow-right-orange.svg');
  }
}

/* ---- 確認ページ（フォーム2）：入力値の表示と2ボタン並び ---- */
/* [multiform] で出力した入力値（ラベルの下に枠線付きで表示） */
.contact-form__value {
  margin: 0;
  padding: 14px 18px;
  min-height: 54px;
  border-bottom: 1px solid #d3c7bb;
  color: var(--color-text);
  font-size: 1rem;
  line-height: 1.7;
  white-space: pre-wrap;        /* メッセージの改行を保持 */
  word-break: break-word;
}
/* 戻る／送信の2ボタンを中央に横並び（狭い画面では縦積み） */
.contact-form__submit--confirm {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
/* 戻る／送信の2ボタンは同じ大きさに揃える。
   均等幅（flex-grow 1・同 basis）で常に同寸。狭い幅では basis が収まらず
   折り返して縦積み＝各ボタン全幅（=同寸）になり、長いラベルも窮屈にならない。 */
.contact-form__submit--confirm .btn {
  flex: 1 1 200px;
  max-width: 300px;
  white-space: nowrap;
  /* 戻る(outline)は基底 .btn の padding 5px、送信(solid)は 8px と縦paddingが
     異なり高さがズレるため、両者を 8px に統一して高さを揃える（横paddingは各自のまま） */
  padding-top: 8px;
  padding-bottom: 8px;
}
.contact-form__submit--confirm .wpcf7-previous {
  background-image: none;       /* 戻るボタンにはシェブロンを出さない */
  padding-right: 28px;
}

/* ---- 完了ページ：中央寄せの完了メッセージ ---- */
.contact-complete {
  text-align: center;
  padding: 8px 0 16px;
}
.contact-complete__title {
  margin: 0 0 24px;
  color: var(--detail-color);
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: 0.04em;
}
.contact-complete__text {
  margin: 0;
  color: var(--color-text);
  font-size: 0.95rem;
  line-height: 1.9;
}
.contact-complete .contact-form__submit {
  margin-top: 44px;
}

/* フォーム下の案内文 */
.contact-form__after-note {
  margin: 36px 0 0;
  color: var(--color-text);
  font-size: 0.95rem;
  line-height: 1.9;
}

/* ---- PC / タブレット：本文系を 760px 中央カラムに揃える ---- */
@media (min-width: 769px) {
  .service-detail--contact .service-detail__section-title,
  .service-detail--contact .service-detail__lead-text,
  .service-detail--contact .contact-form,
  .service-detail--contact .contact-form__after-note {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
  }
  .service-detail--contact .service-detail__lead-text {
    font-size: 1.05rem;
    line-height: 2;
    margin-bottom: 56px;
  }
  .service-detail--contact .contact-form__row {
    margin-bottom: 32px;
  }
  .service-detail--contact .contact-form__label {
    font-size: 1.15rem;
  }
  .service-detail--contact .contact-form__after-note {
    font-size: 1.05rem;
  }
  /* プライバシーポリシー欄は他のフォーム要素より幅を狭めて中央寄せ */
  .service-detail--contact .contact-form__privacy {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
  }
  /* 完了ページの見出し・本文 */
  .service-detail--contact .contact-complete__title {
    font-size: 2rem;
    margin-bottom: 28px;
  }
  .service-detail--contact .contact-complete__text {
    font-size: 1.05rem;
    line-height: 2;
  }
}

/* ---- ご利用いただける方：縦積みのラベル+説明ボックス ---- */
.service-detail__eligible {
  list-style: none;
  margin: 0;
  padding: 0;
}

.service-detail__eligible-item {
  border: 1px solid var(--detail-color);
  border-radius: 10px;
  overflow: hidden;
}

.service-detail__eligible-item + .service-detail__eligible-item {
  margin-top: 12px;
}

.service-detail__eligible-label {
  padding: 5px;
  background-color: var(--detail-color);
  color: #fff;
  font-size: 1.15rem;
  font-weight: 900;
  text-align: center;
  letter-spacing: 0.04em;
}

.service-detail__eligible-desc {
  padding: 9px 14px;
  background-color: #fff;
  color: var(--color-text);
  font-size: 0.875rem;
  line-height: 1.55;
  text-align: center;
}

/* ---- ご利用までの流れ：縦タイムライン ----
   各 item の左に丸ドット (::before)、ドット同士を縦線で接続 (::after)。
   ::after は item の中央から下方向に 100% 伸ばすため、隣接 item の中央まで届く。
   最後の item には ::after を出さない */
.service-detail__flow {
  list-style: none;
  margin: 0;
  padding: 0;
}

.service-detail__flow-item {
  position: relative;
  padding: 8px 0 8px 38px;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: 0.02em;
}

.service-detail__flow-item::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background-color: var(--detail-color);
  border-radius: 50%;
  z-index: 1;
}

.service-detail__flow-item::after {
  content: "";
  position: absolute;
  left: 13px;     /* ドット中心 (left:6 + width:16 ÷ 2 = 14) − 線幅/2 (1) = 13 */
  top: 50%;
  width: 2px;
  height: 100%;   /* 自要素中央 → 次要素中央 を等高 item 前提で連結 */
  background-color: var(--detail-color);
  z-index: 0;
}

.service-detail__flow-item:last-child::after {
  display: none;
}

/* ---- ベージュカード内の白い小カード（研修内容の一例 等） ---- */
.service-detail__inner-card {
  margin: 24px 0 0;
  padding: 16px 20px 18px;
  background-color: #fff;
  border-radius: 10px;
}

.service-detail__inner-card-title {
  margin: 0 0 6px;
  color: var(--detail-color);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.service-detail__inner-card-text {
  margin: 0;
  color: var(--color-text);
  font-size: 0.875rem;
  line-height: 1.7;
}

/* ---- PDF リンク（円形チェブロン + 下線付きテキスト） ---- */
.service-detail__pdf-link-wrap {
  margin: 18px 0 24px;
  text-align: center;
}

.service-detail__pdf-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 4px;
  color: var(--color-text);
  font-size: 0.85rem;
  font-weight: 400;
  text-decoration: none;
  border-bottom: 1px solid var(--detail-color);
}

.service-detail__pdf-link:hover {
  color: var(--color-text); /* グローバル a:hover の文字色変更を打ち消し */
}

.service-detail__pdf-link-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  background-color: var(--detail-color);
  border-radius: 50%;
  flex-shrink: 0;
}

.service-detail__pdf-link-icon img {
  display: block;
  width: 6px;
  height: auto;
}

/* ---- ベージュカード内のイメージ画像（モディファイア） ----
   ベース .service-detail__image の margin/aspect-ratio を上書き。
   カンプ実測 (393×240) より 8:5 のアスペクト比 */
.service-detail__image--in-card {
  margin: 24px 0 0;
  aspect-ratio: 8 / 5;
}

/* ---- 縦積みサービスカード（居宅介護等のサービス内容、専門的な支援 等） ----
   訪問介護ページの .service-detail__item は横並び (label-left + desc-right) だが、
   このパターンはラベル上 + 説明下の縦積み。eligible 系と似ているが本文左揃え＆
   フォントがやや大きい。 */
.service-detail__stack-items {
  list-style: none;
  margin: 0;
  padding: 0;
}

.service-detail__stack-item {
  border: 1px solid var(--detail-color);
  border-radius: 10px;
  overflow: hidden;
}

.service-detail__stack-item + .service-detail__stack-item {
  margin-top: 12px;
}

.service-detail__stack-item-name {
  padding: 5px;
  background-color: var(--detail-color);
  color: #fff;
  font-size: 1.25rem;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.04em;
}

.service-detail__stack-item-desc {
  margin: 0;
  padding: 9px 14px;
  background-color: #fff;
  color: var(--color-text);
  font-size: 0.875rem;
  line-height: 1.55;
}

/* ---- ベージュサブカード（ご相談の多いケース等） ----
   セクション内に置く小カード。タイトルはカテゴリ色、本文は丸ドット箇条書き */
.service-detail__sub-card {
  margin: 20px 0 0;
  padding: 22px 24px;
  background-color: var(--color-bg-gray);
  border-radius: 10px;
}

.service-detail__sub-card-title {
  margin: 0 0 14px;
  color: var(--detail-color);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.service-detail__sub-card-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.service-detail__sub-card-list li {
  position: relative;
  padding: 6px 0 6px 24px;
  color: var(--color-text);
  font-size: 0.9rem;
  line-height: 1.6;
}

.service-detail__sub-card-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(6px + 0.8em);          /* padding-top + line-height/2 で1行目テキスト中央に揃える */
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  background-color: var(--detail-color);
  border-radius: 50%;
}

/* ---- 最終ベージュカード（footer まで背景を延長） ----
   通常カードと違い margin-bottom を消し、padding-bottom を厚く取って
   コンテンツ末尾〜footer curve までベージュが途切れず続くようにする */
.service-detail__card--bleed-bottom {
  margin-bottom: 0;
  padding-bottom: 80px;
}

/* ---- サービス内容カード（訪問看護ページ：ヘッダー帯 + 説明 + ●リスト） ----
   stack-item と異なり、本文・リスト付きの縦積みカード */
.service-detail__service-cards {
  list-style: none;
  margin: 0;
  padding: 0;
}

.service-detail__service-card {
  border: 1px solid var(--detail-color);
  border-radius: 10px;
  overflow: hidden;
  background-color: #fff;
}

.service-detail__service-card + .service-detail__service-card {
  margin-top: 18px;
}

.service-detail__service-card-header {
  padding: 9px;
  background-color: var(--detail-color);
  color: #fff;
  font-size: 1.25rem;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.04em;
}

.service-detail__service-card-body {
  padding: 16px 18px 18px;
}

.service-detail__service-card-desc {
  margin: 0 0 12px;
  color: var(--color-text);
  font-size: 0.9rem;
  line-height: 1.7;
}

/* card-body 末尾要素の下マージンを消す（card-body の padding-bottom と
   重なって余白が二重になるのを防ぐ）。
   home-nursing のカード（desc + list）では list が末尾で既に margin: 0 のため影響なし。
   --features バリアント（desc のみ）では desc 末尾の 12px が消えて視覚的に揃う */
.service-detail__service-card-body > :last-child {
  margin-bottom: 0;
}

.service-detail__service-card-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.service-detail__service-card-list li {
  position: relative;
  padding: 4px 0 4px 22px;
  color: var(--detail-color);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.6;
}

.service-detail__service-card-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(4px + 0.8em);          /* padding-top + line-height/2 で1行目テキスト中央に揃える */
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  background-color: var(--detail-color);
  border-radius: 50%;
}

/* --features: 施設「こころの特徴」用バリアント。
   カード全体が淡いカテゴリ色のベタ塗りで、見出しと本文は同じ背景。
   ヘッダー下に1本の罫線で区切る（左右はやや内側に inset） */
.service-detail__service-cards--features .service-detail__service-card {
  background-color: var(--detail-color-bg);
  border: none;
  border-radius: 12px;
  overflow: hidden;
}

.service-detail__service-cards--features .service-detail__service-card-header {
  position: relative;
  padding: 30px 40px 18px;              /* 左右を広げ（24→40）、上を増やす（22→30） */
  background-color: transparent;
  color: var(--color-text);
  text-align: center;
}

.service-detail__service-cards--features .service-detail__service-card-header::after {
  content: "";
  position: absolute;
  left: 40px;                           /* 罫線もヘッダーの左右padding（40px）に合わせる */
  right: 40px;
  bottom: 0;
  height: 1px;
  background-color: var(--color-text);
}

.service-detail__service-cards--features .service-detail__service-card-body {
  padding: 20px 40px 30px;              /* 左右を広げ（24→40）、下を増やす（22→30） */
  background-color: transparent;
}

/* --plain: 看多機ページ「サービスの特徴」用バリアント。
   グレー背景の上に乗る白カードで、見出しはカテゴリ色センター揃え。
   見出し下にカテゴリ色の細い罫線を1本引く（左右はやや内側に inset） */
.service-detail__service-cards--plain .service-detail__service-card {
  background-color: #fff;
  border: none;
  border-radius: 14px;
  overflow: hidden;
}

.service-detail__service-cards--plain .service-detail__service-card-header {
  position: relative;
  padding: 30px 28px 14px;              /* 左右を広げ（12→28）、上を増やす（22→30） */
  background-color: transparent;
  color: var(--detail-color);
  font-size: 1.3rem;
  font-weight: 900;
  text-align: center;
}

/* 罫線はカード端のすぐ内側。表もこの幅いっぱいに合わせる（padding と同じ 28px） */
.service-detail__service-cards--plain .service-detail__service-card-header::after {
  content: "";
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 0;
  height: 1px;
  background-color: var(--detail-color);
  opacity: 0.45;
}

/* body は罫線と同じ左右12px（→ 表は罫線の幅いっぱいに広がる）。
   本文テキストだけ desc/note 側で控えめに内側へ寄せる */
.service-detail__service-cards--plain .service-detail__service-card-body {
  padding: 20px 28px 32px;              /* 左右を広げ（12→28）、下を増やす（24→32） */
}

/* 本文テキスト（と注釈）のみ、罫線より少しだけ内側へ（リード文より控えめ）。
   表（care-table-wrap）には効かないので罫線幅いっぱいのまま */
.service-detail__service-cards--plain .service-detail__service-card-desc,
.service-detail__service-cards--plain .service-detail__service-card-body > .service-detail__note {
  padding-left: 8px;
  padding-right: 8px;
}

/* --center: カード本文（desc）を中央揃えにする修飾子。
   児童発達支援ページ「施設の特徴」のみの特別措置（他ページとは揃わない） */
.service-detail__service-cards--center .service-detail__service-card-desc {
  text-align: center;
}

/* --gold-fill: ゴールド塗りカード（居住支援ページ「こころの居住支援3つの特徴」）。
   plain 構造（中央見出し＋下線＋本文）を流用し、カード背景をカテゴリ色（ゴールド）で塗り、
   見出し下線をゴールド→淡色（白半透明）に変える。文字は plain の共通ルールで黒のまま。 */
.service-detail__service-cards--gold-fill .service-detail__service-card {
  background-color: var(--detail-color);
}
.service-detail__service-cards--gold-fill .service-detail__service-card-header::after {
  background-color: #fff;
  opacity: 0.6;
}

/* ---- 医療的ケア対応表（用語 + ○/△ を2ペア横並び） ----
   罫線は「外周（wrap）」「行区切り」「中央の縦1本」のみ。
   用語と ○/△ の間には引かない。色はすべて --detail-color で統一 */
.service-detail__care-table-wrap {
  margin-top: 14px;
  border: 1px solid var(--detail-color);
  border-radius: 8px;
  overflow: hidden;
}

.service-detail__care-table {
  width: 100%;
  border-collapse: collapse;
  color: var(--color-text);
  font-size: 0.73rem;
  /* fixed にして列幅を等分固定（nowrap のカッコ書きで列が広がり右ペアが
     はみ出すのを防ぐ）。幅が足りればカッコ書きは用語と同じ行、足りなければ
     カッコ書きごと次行へ落ちる */
  table-layout: fixed;
}

.service-detail__care-table td {
  padding: 5px 8px;
  vertical-align: middle;
  line-height: 1.4;
}

/* 行区切り（最終行以外）— 全幅 */
.service-detail__care-table tr:not(:last-child) td {
  border-bottom: 1px solid var(--detail-color);
}

/* 中央の縦区切りのみ（左ペアの ○ 列の右側に1本） */
.service-detail__care-table td:nth-child(2) {
  border-right: 1px solid var(--detail-color);
}

.service-detail__care-table-term {
  font-weight: 700;
}

/* カッコ書き：
   - 狭い幅（〜413px / SP基準375px含む）は block で常に次行＝列内で安全に折返し
   - 余裕のある幅（414px〜）は inline + nowrap にし、入り切れば用語と同じ行、
     入り切らなければカッコ書きごと（途中で折れず）次行へ落とす
   列幅が広がって右ペアがはみ出すのは table-layout: fixed で防止済み */
.service-detail__care-table-term small {
  display: block;
  font-size: 0.8em;               /* 親(term)基準でバランス固定 */
  font-weight: 500;
  opacity: 0.85;
}

@media (min-width: 414px) {
  .service-detail__care-table-term small {
    display: inline;
    white-space: nowrap;
  }
}

.service-detail__care-table-mark {
  width: 2.4em;                   /* fixed レイアウトでも ○/△ の左右に余白が残る幅 */
  text-align: center;
  color: var(--detail-color);
  /* ○△ などの幾何学記号は font-weight ではほぼ太くならないため、
     グリフ輪郭にストロークを足して線の太さを直接コントロールする */
  -webkit-text-stroke: 1px currentColor;
  font-weight: 900;
}

/* 対応表直後の注釈（※記載項目以外も〜）だけ小さく（共通 note は据え置き） */
.service-detail__care-table-wrap + .service-detail__note {
  font-size: 0.68rem;
}

/* 対応表・料金表の注釈は、薄く落とさず本文と同じ文字色にする
   （共通 note の opacity:0.75 を打ち消す。他ページの note は据え置き） */
.service-detail__care-table-wrap + .service-detail__note,
.service-detail__price-table-wrap + .service-detail__note,
.service-detail__price-table-wrap + .service-detail__note + .service-detail__note {
  opacity: 1;
}

/* 料金表の直後の注釈は、表から少し余白を開ける */
.service-detail__price-table-wrap + .service-detail__note {
  margin-top: 24px;
}

/* ---- サブ見出し（ご利用料金内の「月額基本料金表」等・カテゴリ色） ---- */
.service-detail__sub-heading {
  margin: 28px 0 12px;
  color: var(--detail-color);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.service-detail__sub-heading small {
  font-size: 0.8rem;
  font-weight: 700;
}

/* ---- 料金表（左：カテゴリ淡色ラベル列 / 右：白の値列） ---- */
.service-detail__price-table-wrap {
  border: 2px solid var(--detail-color);   /* 外枠2px（SP・PC共通）。内側のセル罫線は1pxのまま */
  border-radius: 8px;
  overflow: hidden;
}

.service-detail__price-table-wrap + .service-detail__sub-heading {
  margin-top: 32px;
}

/* 説明文の直後にくる表タイトルは、間隔を少し広めに取る */
.service-detail__text + .service-detail__sub-heading {
  margin-top: 40px;
}

/* 説明・注釈テキストの直後に表がくる場合は、間に余白を開ける
   （居住支援ページ「ご利用について」の ※注釈 → 料金表 など）。
   .service-detail__text は margin:0 のため表と密着してしまうのを防ぐ */
.service-detail__text + .service-detail__price-table-wrap {
  margin-top: 24px;
}

.service-detail__price-table {
  width: 100%;
  border-collapse: collapse;
  color: var(--color-text);
}

.service-detail__price-table th,
.service-detail__price-table td {
  border: 1px solid var(--detail-color);
  padding: 8px 10px;
  text-align: center;
  line-height: 1.5;
}

.service-detail__price-table th {
  width: 34%;
  background-color: var(--detail-color-bg);
  font-size: 0.9rem;                 /* SPは折り返し軽減のため少し小さめ（PCは 769px 側で 1rem に戻す） */
  font-weight: 700;
}

.service-detail__price-table th small {
  display: block;
  font-size: 0.72rem;
  font-weight: 500;
}

.service-detail__price-table td {
  background-color: #fff;
  font-size: 0.9rem;                 /* SPは折り返し軽減のため少し小さめ（PCは 769px 側で 1rem に戻す） */
  font-weight: 700;
}

/* 外周のセル罫線は wrap の border と二重になるため消す */
.service-detail__price-table tr:first-child th,
.service-detail__price-table tr:first-child td { border-top: 0; }
.service-detail__price-table tr:last-child th,
.service-detail__price-table tr:last-child td { border-bottom: 0; }
.service-detail__price-table th:first-child { border-left: 0; }
.service-detail__price-table td:last-child { border-right: 0; }

/* ---- 住宅型有料老人ホーム：料金表のオレンジ配色スコープ ----
   「ご利用料金」h2（ピンクバー）はそのままに、実費費用／看多機月額の
   見出し(sub-title)・料金表・説明ボックスだけ配色をブランドオレンジへ差し替える（カンプ準拠）。
   sub-title と price-table は --detail-color / --detail-color-bg を参照するため、
   スコープ変数の上書きだけで「見出し色・罫線・ラベル列」が一括でオレンジ／ペーチになる。 */
.service-detail__price-accent {
  --detail-color: var(--color-accent);   /* 見出し・罫線＝オレンジ #f97e2b */
  --detail-color-bg: #f8ddc8;            /* 料金表ラベル列＝ペールピーチ */
}

/* 看多機月額の説明文：オレンジ塗りの角丸ボックス（白文字）。
   見出しの上に配置し、幅は見出しと同じ（コンテナ幅いっぱい）。 */
.service-detail__price-lead {
  margin: 0 0 20px;
  padding: 20px 24px;
  background-color: var(--color-accent);   /* ブランドオレンジ塗り（見出し・罫線と同色） */
  border-radius: 12px;
  color: #fff;                             /* 白文字 */
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.85;
}

/* 料金表の値セル内の補足（管理費の冬季光熱費など）は小さめのブロックで折り返す */
.service-detail__price-accent .service-detail__price-table td small {
  display: block;
  margin-top: 3px;
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.4;
}

/* 看多機月額：PCのみ「表（左・やや縮小）＋写真（右）」の2カラム。
   SPは表のみ表示し、写真は非表示（カンプの「※PC版のみ」注記に対応）。
   PC側の2カラム化は min-width:769px ブロック（style.css 後半）で行う。 */
.service-detail__price-photo { display: none; }

/* ---- 本文中のインライン外部リンク（下線 + 外部リンクアイコン） ----
   text-decoration の下線は画像（アイコン）の下に引かれず、折り返してアイコンが
   行頭/行末に来ると線が途切れる。border-bottom なら各行の末尾要素（アイコン含む）の
   下にも連続して線が入るため、border-bottom 方式でピンクの下線を引く */
.service-detail__inline-link {
  color: var(--color-text);
  font-weight: inherit;                            /* 本文と同じウェイト */
  text-decoration: none;
  border-bottom: 1px solid var(--detail-color);   /* 下線はピンク・アイコン下まで連続 */
  padding-bottom: 2px;                             /* text-underline-offset 相当の間隔 */
}

.service-detail__inline-link-icon {
  width: 0.95em;
  height: 0.95em;
  margin-left: 4px;
  vertical-align: -0.1em;
}

/* ---- スタッフ紹介（左カラム：丸写真+氏名+役職 / 右カラム：説明） ---- */
.service-detail__staff {
  list-style: none;
  margin: 0;
  padding: 0;
}

.service-detail__staff-item {
  display: flex;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--detail-color);
  border-radius: 10px;
  background-color: #fff;
}

.service-detail__staff-item + .service-detail__staff-item {
  margin-top: 14px;
}

.service-detail__staff-profile {
  flex: 0 0 110px;                 /* 左カラム固定幅 */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.service-detail__staff-photo {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #cfcfcf;       /* プレースホルダ。差し替え時は img 等に置き換え */
}

.service-detail__staff-name {
  margin: 8px 0 2px;
  color: var(--color-text);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.service-detail__staff-role {
  margin: 0;
  color: var(--detail-color);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.service-detail__staff-desc {
  flex: 1 1 auto;
  margin: 0;
  color: var(--color-text);
  font-size: 0.85rem;
  line-height: 1.7;
}

/* ---- お問合せボタン（電話直通・フォーム） ---- */
.service-detail__contact-buttons {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.service-detail__contact-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  background-color: #fff;
  border: 2px solid var(--detail-color);   /* 施設カード・料金表と統一（SP・PC共通で2px） */
  border-radius: 14px;
  color: var(--detail-color);
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.service-detail__contact-btn:hover {
  opacity: 0.75;
  color: var(--detail-color);   /* グローバル a:hover の color:var(--color-text) を打ち消し、通常色のまま opacity で薄く */
}

/* グレー背景内ではボーダーを消す（白ボタンの輪郭は背景コントラストで十分） */
.service-detail__gray-bleed .service-detail__contact-btn {
  border: none;
}

/* アイコンは「青円+白アイコン」が1枚に焼き込まれた PNG。
   要素側で円塗りや背景は付けず、サイズだけ整える */
.service-detail__contact-btn-icon {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  display: block;
}

.service-detail__contact-btn-text {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  line-height: 1.2;
}

.service-detail__contact-btn-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.service-detail__contact-btn-main {
  margin-top: 2px;
  font-size: 1.5rem;
  font-weight: 900;                /* フッター代表電話番号 (.site-footer__tel-number) と同じ Black */
  letter-spacing: 0.02em;
}

/* =========================================================
 * 訪問理美容（beauty）ページ専用
 *   カテゴリ色は「自費・その他」＝ゴールド（--service-other / --detail-color）。
 *   骨格は service-detail 共通コンポーネントを流用し、以下だけ追加する：
 *     - サービスの特徴カード：見出しを本文色（濃茶）に。罫線はゴールドのまま
 *     - 対応日時の白カード（営業日・受付時間）
 *     - 施設・事業者様向けのキャンペーン告知ボックス（淡ゴールド）
 * ========================================================= */

/* このカテゴリ（自費・その他＝ゴールド）はカンプ準拠で、
   「文字としてのゴールド」をすべて本文色（#443022）にする（視認性優先）。
   装飾のゴールド（見出し縦バー・カード下線・フローのドット・料金表罫線・
   連絡ボタンの枠線＆アイコン・淡ゴールドの背景）はそのまま維持する。 */
.service-detail--other .service-detail__catch,
.service-detail--other .service-detail__sub-heading,
.service-detail--other .service-detail__sub-title,
.service-detail--other .service-detail__area-prefecture,
.service-detail--other .service-detail__staff-role,
.service-detail--other .service-detail__service-cards--plain .service-detail__service-card-header,
.service-detail--other .service-detail__contact-btn,
.service-detail--other .service-detail__contact-btn:hover {
  color: var(--color-text);
}

/* 対応日時カード（グレー背景に乗る白カード・中央寄せ） */
.service-detail__hours-card {
  margin: 0 0 28px;
  padding: 22px 20px;
  background-color: #fff;
  border-radius: 14px;
  text-align: center;
  line-height: 1.8;
}
.service-detail__hours-card p {
  margin: 0;
  color: var(--color-text);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.service-detail__hours-card small {
  font-size: 0.82rem;
  font-weight: 700;
}

/* 料金表：ラベルが長い（メニュー名）ため、ラベル列を広めに取る（カンプ準拠）。
   見出し列は左揃え（値列は中央のまま）。自費・その他カテゴリ共通 */
.service-detail--other .service-detail__price-table th {
  width: 46%;
  text-align: left;
  padding-left: 16px;
}

/* キャンペーン告知ボックス（淡ゴールド） */
.service-detail__campaign {
  margin: 20px 0 0;
  padding: 22px 24px;
  background-color: var(--detail-color-bg);
  border-radius: 12px;
  color: var(--color-text);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.8;
}

/* =========================================================
 * よくある質問（FAQ アコーディオン）
 *   ネイティブ <details>/<summary> で JS 無しの開閉。デフォルト閉。
 *   訪問理美容ページ（--other＝ゴールド）で使用。Q＝ゴールド、丸チェブロン。
 * ========================================================= */
.service-detail__faq {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.service-detail__faq-item {
  background-color: #fff;
  border-radius: 14px;
  overflow: hidden;
}
/* summary（Q 行）：既定の三角マーカーを消し、クリック可能な見出しに */
.service-detail__faq-q {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 18px;
  font-weight: 700;
  color: var(--color-text);
}
.service-detail__faq-q::-webkit-details-marker { display: none; }
.service-detail__faq-q-mark {
  flex: 0 0 auto;
  color: var(--detail-color);
  font-size: 1.15rem;
  font-weight: 900;
}
.service-detail__faq-q-text {
  flex: 1 1 auto;
  font-size: 1rem;
  line-height: 1.5;
}
/* 開閉チェブロン：ゴールドの丸＋白い山形（閉＝下向き／開＝上向き） */
.service-detail__faq-chevron {
  flex: 0 0 auto;
  position: relative;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: var(--detail-color);
}
.service-detail__faq-chevron::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 42%;
  width: 7px;
  height: 7px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: translate(-50%, -50%) rotate(45deg);   /* 下向き（閉） */
  transition: transform 0.2s ease;
}
.service-detail__faq-item[open] .service-detail__faq-chevron::before {
  top: 55%;
  transform: translate(-50%, -50%) rotate(-135deg); /* 上向き（開） */
}
/* A（回答）：外枠は高さ0まで畳めるよう overflow:hidden＋height トランジションのみ。
   罫線・余白・インデントは内側の <p> に持たせ、閉時に外枠を 0 まで縮められるようにする
   （script.js が details の開閉に合わせて height を 0 ↔ 実寸でアニメーションさせる）。 */
.service-detail__faq-a {
  overflow: hidden;
  transition: height 0.3s ease;
}
.service-detail__faq-a p {
  margin: 0 18px;                              /* 左右インデント（旧 .faq-a の margin） */
  padding: 16px 0 20px;
  border-top: 1px solid var(--detail-color);  /* Q と分けるゴールドの区切り線 */
  color: var(--color-text);
  font-size: 0.95rem;
  line-height: 1.85;
}
/* 閉じアニメーション中はチェブロンを即座に下向きへ（開閉と向きを同期） */
.service-detail__faq-item.is-closing .service-detail__faq-chevron::before {
  top: 42%;
  transform: translate(-50%, -50%) rotate(45deg);
}
@media (prefers-reduced-motion: reduce) {
  .service-detail__faq-a { transition: none; }
}

/* =========================================================
 * 登録支援機関・有料職業紹介（specified-skilled）ページ専用
 *   カテゴリ色は自費・その他＝ゴールド（--other）。文字色ルールは beauty と共通
 *   （文字ゴールドは #443022・装飾のみゴールド）＝ .service-detail--other 指定を継承。
 *   固有パーツ：担当者写真の丸トリミング／淡ゴールドのパネル（カード内補足・対応業種）
 * ========================================================= */

/* カンプ準拠で「サポート担当者」の小見出しだけゴールドに戻す（要デザイナー確認）。
   自費・その他の共通ルールでは文字ゴールド→黒だが、本ページのカンプは
   この見出しのみゴールドで描いているため。他の小見出し（登録支援業務／ご契約について）
   や catch・役職・連絡ボタン等は共通ルール通り黒のまま。
   共通の黒ルールと同じ詳細度なので、この宣言が後方にある前提で上書きする */
.service-detail--other .service-detail__sub-heading--gold {
  color: var(--detail-color);
}

/* 担当者カードの丸写真（プレースホルダ div の中に img を入れて差し替え） */
.service-detail__staff-photo img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

/* 淡ゴールドの補足パネル（特徴カード内の対応業務リスト等） */
.service-detail__gold-panel {
  margin: 16px 0 0;
  padding: 16px 18px;
  background-color: var(--detail-color-bg);
  border-radius: 10px;
  color: var(--color-text);
  font-size: 0.78rem;
  line-height: 1.85;
}

/* 対応業種ボックス（淡ゴールド・中央寄せの見出し＋業種リスト＋注釈） */
.service-detail__industry {
  margin: 24px 0 0;
  padding: 24px 22px;
  background-color: var(--detail-color-bg);
  border-radius: 12px;
}
.service-detail__industry-title {
  margin: 0 0 14px;
  color: var(--color-text);
  font-size: 1.05rem;
  font-weight: 700;
  text-align: left;
  letter-spacing: 0.08em;
}
.service-detail__industry-list {
  margin: 0;
  color: var(--color-text);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.9;
  text-align: left;
}
/* 対応業種ボックス内の注釈は左右padキャンセル・上に余白 */
.service-detail__industry .service-detail__note {
  margin-top: 16px;
  padding: 0;
}

/* 許可番号類（有料職業紹介／登録支援機関）は行間を詰めてひとまとまりに見せる */
.service-detail__note--license {
  line-height: 1.5;
}
.service-detail__note--license + .service-detail__note--license {
  margin-top: 2px;
}

/* =========================================================
 * 居住支援（housing-support）ページ専用
 *   カテゴリ色は自費・その他＝ゴールド（--other）。文字色ルールは beauty と共通
 *   （文字ゴールドは #443022・装飾のみゴールド）＝ .service-detail--other を継承。
 *   固有パーツ：
 *     - こんなお悩みバブル群（淡ゴールドの円が「ぽよぽよ」1個ずつ出現）
 *     - 白いテキストカード（居住支援法人とは？／関係機関・不動産オーナー様へ）
 *     - ●リスト（対象となる方）
 *     - 料金表の中央寄せバリアント（--other の左寄せ既定を打ち消す）
 * ========================================================= */

/* ---- こんなお悩みバブル群 ----
   design素材の円画像（f1〜f5.png・300×300・角透過・淡ゴールドの円）を
   上段2つ・下段3つでハニカム状に少し重ねて配置。円は正方形いっぱいなので、
   画像を少し重ねると円同士が重なる（角は透過のため白箱の継ぎ目は出ない）。
   .js-fadeup（共通の IntersectionObserver）で親に .is-visible が付くと、
   各バブルが 1個ずつ時間差で「ぽよぽよ」とポップイン表示される。 */
.service-detail__worries {
  list-style: none;
  margin: 4px 0 32px;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.service-detail__worries-row {
  display: flex;
  justify-content: center;
}

/* 下段は上段の円に少し食い込ませてハニカム状に */
.service-detail__worries-row--lower {
  margin-top: -14px;
}

.service-detail__worry-bubble {
  display: block;
  width: clamp(96px, 29vw, 124px);
  height: auto;
}

/* 隣り合う円は横に少し重ねる（角は透過なので継ぎ目は見えない） */
.service-detail__worry-bubble + .service-detail__worry-bubble {
  margin-left: -8px;
}

/* PC（769px〜）は円をだいぶ大きく。重なり量も同じ比率でスケールさせて
   現状の重なり具合（横 ≒6.5% / 段 ≒11%）を維持する */
@media (min-width: 769px) {
  .service-detail__worry-bubble {
    width: 230px;
  }
  .service-detail__worry-bubble + .service-detail__worry-bubble {
    margin-left: -15px;
  }
  .service-detail__worries-row--lower {
    margin-top: -26px;
  }
}

/* 初期は縮小＋透明。.is-visible で 1個ずつポップ */
.service-detail__worries .service-detail__worry-bubble {
  opacity: 0;
  transform: scale(0.2);
}

@keyframes service-detail-worry-pop {
  0%   { opacity: 0; transform: scale(0.2); }
  60%  { opacity: 1; transform: scale(1.08); }
  80%  { transform: scale(0.95); }
  100% { opacity: 1; transform: scale(1); }
}

.service-detail__worries.is-visible .service-detail__worry-bubble {
  animation: service-detail-worry-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.service-detail__worries.is-visible .service-detail__worry-bubble--1 { animation-delay: 0.05s; }
.service-detail__worries.is-visible .service-detail__worry-bubble--2 { animation-delay: 0.25s; }
.service-detail__worries.is-visible .service-detail__worry-bubble--3 { animation-delay: 0.45s; }
.service-detail__worries.is-visible .service-detail__worry-bubble--4 { animation-delay: 0.65s; }
.service-detail__worries.is-visible .service-detail__worry-bubble--5 { animation-delay: 0.85s; }

/* モーション低減設定時はアニメ無しでそのまま表示 */
@media (prefers-reduced-motion: reduce) {
  .service-detail__worries .service-detail__worry-bubble {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* ---- 白いテキストカード（グレー背景に乗る／本文左揃え） ----
   居住支援法人とは？・関係機関の皆さまへ・不動産オーナー様へ で使用。
   beauty の hours-card（中央寄せ）に対し、こちらは本文左揃えの説明カード */
.service-detail__text-card {
  padding: 24px 22px;
  background-color: #fff;
  border-radius: 16px;
}
.service-detail__text-card p {
  margin: 0;
  color: var(--color-text);
  font-size: 0.95rem;
  line-height: 1.9;
}
.service-detail__text-card p + p {
  margin-top: 1em;
}

/* ---- ●リスト（対象となる方：ゴールドの丸ドット＋テキスト） ---- */
.service-detail__dot-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.service-detail__dot-list li {
  position: relative;
  padding: 7px 0 7px 26px;
  color: var(--color-text);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.02em;
}
.service-detail__dot-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: calc(7px + 0.8em);
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  background-color: var(--detail-color);
  border-radius: 50%;
}

/* ---- 料金表：中央寄せバリアント ----
   自費・その他（--other）の既定はラベル列を左寄せ・46%幅にするが、
   居住支援の料金表（相談／居住支援＝無料）は短いラベルの中央寄せなので打ち消す。
   共通ルールと同詳細度・後方宣言で上書き */
.service-detail--other .service-detail__price-table--center th {
  width: 34%;
  text-align: center;
  padding-left: 10px;
}

/* 料金表ラベルの均等割り付け：2文字の「相談」を下段「居住支援」（4文字＝4em）の幅に
   合わせて両端揃えで均等配置する（カンプ準拠の「相　談」）。
   inline-block + 固定幅 4em + text-align-last:justify で1行でも文字間を開く。
   font-size は SP/PC で変わるが em 基準なので常に4文字ぶんに追従する */
.service-detail__cell-justify {
  display: inline-block;
  width: 4em;
  text-align: justify;
  text-align-last: justify;
}

/* =========================================================
 * ★★★「ご利用までの流れ」は全ページ共通コンポーネント ★★★
 *   （在宅=青 / 施設=ピンク / 通所=緑 / 自費その他=ゴールド … 色だけ違い、
 *    レイアウト・文字サイズ・インデントは全ページで完全共通）
 *
 *   正しい組み方（daycare / home-care / housing-support 等すべて同一）：
 *     <h3 class="service-detail__sub-title">ご利用までの流れ</h3>
 *     <ul class="service-detail__flow"> … <li class="service-detail__flow-item"> …
 *
 *   - 見出し＝ service-detail__sub-title（SP 1.2rem / PC 1.35rem・カテゴリ色）
 *   - リスト＝ service-detail__flow（●＋縦タイムライン）
 *   - インデント（見出し＞内容物の1段差）は "sub-title ~ flow" の共通ルールが
 *     SP（padding 16px）/ PC（max-width 720px 中央）で自動付与する。※上部参照
 *
 *   ⚠️ ページ固有に __sub-heading や独自の --inset 等で作り直さないこと。
 *      毎回レイアウト/文字サイズを揃え直す手戻りが発生するため、必ず上記の
 *      共通クラス（sub-title + flow）を使う。色はカテゴリ色が自動で乗る。
 * ========================================================= */

/* 自費・その他(--other)は「文字ゴールドは黒」共通ルールで sub-title も黒になるが、
   「ご利用までの流れ」は他ページ(緑/青)と揃えてカテゴリ色(ゴールド)にする共通見出し。
   この共通見出しだけ --gold でカテゴリ色に戻す（specified-skilled の sub-heading--gold と同趣旨）。 */
.service-detail--other .service-detail__sub-title--gold {
  color: var(--detail-color);
}

/* サポート内容カードの長い見出し「福祉サービス・関係機関との連携」（15字級）は、
   375px だと既定 1.3rem では“惜しくも”折り返す（実測 312px > カード内側 303px）。
   この見出しだけ例外的に字詰め（-0.02em）＋狭幅で font を clamp で少しだけ縮小して
   1行に収める。他の3カードは 1.3rem のまま。
   - clamp 上限 1.3rem：広い画面（≒406px〜）では他カードと同一サイズ
   - clamp 可変 5.1vw：375px で ≈1.2rem（実測 ≈280px で収まる）
   - clamp 下限 1.15rem：360px 等でも下がりすぎない
   → 390/393px(iPhone12〜15) 等「元々収まる幅」では殆ど縮まず、375px以下だけ効く
   ※ base（.--plain .__service-card-header）と同詳細度・後方宣言で上書き */
.service-detail__service-cards--plain .service-detail__service-card-header--nowrap {
  font-size: clamp(1.15rem, 5.1vw, 1.3rem);
  letter-spacing: -0.02em;
}

/* =========================================================
 * 不動産事業（realestate）ページ専用
 *   カテゴリ色は自費・その他＝ゴールド（--other）。文字色ルールは共通
 *   （文字ゴールドは #443022・装飾のみゴールド）＝ .service-detail--other を継承。
 *   固有パーツ：
 *     - こんなお悩みアイコンカード群（グレー背景・白カード2列×3行。ゴールド線画アイコン）
 *     - 安心のサポート体制：--plain カードを白背景に置くため枠線を足す(--outlined)。
 *       うち「初回相談無料」だけゴールド塗り(--fill)
 *     - 宅地建物取引業者情報の白カード（免許番号・所属団体の定義リスト）
 * ========================================================= */

/* ---- こんなお悩みアイコンカード（グレー背景に乗る白カード・2列グリッド） ---- */
.service-detail__icon-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.service-detail__icon-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  padding: 26px 10px 22px;
  background-color: #fff;
  border-radius: 16px;
  text-align: center;
}

.service-detail__icon-card-img {
  display: block;
  width: 64px;
  height: 64px;
  object-fit: contain;
}

.service-detail__icon-card-text {
  margin: 0;
  color: var(--color-text);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.02em;
}

/* PC：6枚を3列×2行に（SPは2列×3行）。アイコン・文字も少し大きく */
@media (min-width: 769px) {
  .service-detail__icon-cards {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
  .service-detail__icon-card {
    padding: 32px 14px 28px;
  }
  .service-detail__icon-card-img {
    width: 76px;
    height: 76px;
  }
  .service-detail__icon-card-text {
    font-size: 1rem;
  }
}

/* こんなお悩みアイコンカードの表示アニメーション
   居住支援ページ上部の円バブル群（.service-detail__worries）と同じ
   「ぽよぽよ」ポップイン（service-detail-worry-pop）を流用。
   親 .js-fadeup に共通の IntersectionObserver が .is-visible を付けたら、
   6枚のカードが時間差で 1枚ずつ拡大しながらポップイン表示される。 */
.service-detail__icon-cards.js-fadeup .service-detail__icon-card {
  opacity: 0;
  transform: scale(0.2);
}

.service-detail__icon-cards.is-visible .service-detail__icon-card {
  animation: service-detail-worry-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.service-detail__icon-cards.is-visible .service-detail__icon-card:nth-child(1) { animation-delay: 0.05s; }
.service-detail__icon-cards.is-visible .service-detail__icon-card:nth-child(2) { animation-delay: 0.20s; }
.service-detail__icon-cards.is-visible .service-detail__icon-card:nth-child(3) { animation-delay: 0.35s; }
.service-detail__icon-cards.is-visible .service-detail__icon-card:nth-child(4) { animation-delay: 0.50s; }
.service-detail__icon-cards.is-visible .service-detail__icon-card:nth-child(5) { animation-delay: 0.65s; }
.service-detail__icon-cards.is-visible .service-detail__icon-card:nth-child(6) { animation-delay: 0.80s; }

/* モーション低減設定時はアニメ無しでそのまま表示 */
@media (prefers-reduced-motion: reduce) {
  .service-detail__icon-cards.js-fadeup .service-detail__icon-card {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* ---- 安心のサポート体制：--plain カードを白背景に置くため枠線(ゴールド)を足す ----
   --plain は「グレー背景に乗る白カード（枠線なし）」用。白背景では輪郭が消えるので、
   --outlined を併記して 1px のカテゴリ色枠を戻す */
.service-detail__service-cards--outlined .service-detail__service-card {
  border: 1px solid var(--detail-color);
}

/* 「初回相談無料」＝ゴールド塗りのカード（地=ゴールド／文字=濃茶／下線=白系）。
   --plain が `.--plain .__service-card{background:#fff}`(詳細度2) で白を敷くため、
   --fill も --plain スコープで上書きして詳細度を合わせる */
.service-detail__service-cards--plain .service-detail__service-card--fill {
  background-color: var(--detail-color);
}
.service-detail__service-cards--plain .service-detail__service-card--fill .service-detail__service-card-header {
  color: var(--color-text);
}
.service-detail__service-cards--plain .service-detail__service-card--fill .service-detail__service-card-header::after {
  background-color: #fff;
  opacity: 0.55;
}

/* ---- 宅地建物取引業者情報カード（白カード内の定義リスト） ---- */
/* 直上の「ご利用までの流れ」チャートとカードが密着するので、間に余白を開ける */
.service-detail__license-card {
  margin-top: 36px;
}

.service-detail__license-title {
  margin: 0 0 12px;
  color: var(--color-text);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.service-detail__license-list {
  margin: 0;
}
.service-detail__license-list dt {
  color: var(--color-text);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.6;
}
.service-detail__license-list dd {
  margin: 0 0 14px;
  color: var(--color-text);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.7;
}
.service-detail__license-list dd:last-child {
  margin-bottom: 0;
}

/* =========================================================
 * 採用情報（recruit）ページ専用
 *   ページ全体のカテゴリ色はブランドオレンジ（--color-accent）。
 *   骨格は service-detail 共通コンポーネントを流用し、以下の
 *   ページ固有パーツだけを追加する：
 *     - cocolo で働く魅力カード（--plain カードにオレンジ枠を付与）
 *     - 求人情報（カテゴリ別のカラー帯 + 職種カード）
 *     - コンプライアンス「大切にしていること」ベージュカード
 * ========================================================= */
.service-detail--recruit {
  --detail-color: var(--color-accent);
  --detail-color-bg: var(--color-bg-gray);
}

/* タイトル帯を廃止したため、固定ヘッダー分の上部クリアランスをコンテナ側で確保する
   （帯ありページの .service-detail__title-band { margin-top:70px/84px } 相当）。
   これが無いとキャッチ(h1)が固定ヘッダーに潜り込む */
.service-detail--recruit .service-detail__container {
  padding-top: 108px;
}
@media (min-width: 769px) {
  .service-detail--recruit .service-detail__container {
    padding-top: 128px;
  }
}

/* スライダー直下のリード文：カテゴリ色の上罫線を採用ページでは非表示にする
   （スライダーとリードの間の橙ラインを消す） */
.service-detail--recruit .service-detail__lead {
  border-top: none;
}

/* キャッチを h1 に格上げした採用ページのみ、見出しとして一回り大きくする
   （共通の .service-detail__catch は SP 1.35rem / PC 2rem） */
.service-detail--recruit .service-detail__catch {
  font-size: 1.6rem;
}
@media (min-width: 769px) {
  .service-detail--recruit .service-detail__catch {
    font-size: 2.3rem;
  }
}

/* ---- スタッフ紹介スライダーの吹き出し（デザイン済みPNGを写真上部に重ねる） ----
   既存の写真スライダー（.service-detail__photo-slider＝無限マーキー）はそのまま。
   各スライドに position: relative を与え、吹き出しPNGを絶対配置で重ねるだけ。
   ・写真と一緒に左へ流れる（item の子なので追従）
   ・画面内に入ると JS(IntersectionObserver) が .is-pop を付与し「ポヨン」と表示
   ・画面外に出ると解除 → ループ再入場で再度アニメーション */
/* 吹き出しが写真上へはみ出す分、スライダー上部に余白を確保
   （.service-detail__photo-slider は overflow:hidden のため、余白が無いと上が切れる） */
.service-detail--recruit .service-detail__photo-slider {
  padding-top: 62px;
}

/* 速度（80s）とPCの画像サイズ（320px/32px）は共通スライダー側に統一済み。
   採用ページ固有は「吹き出しのはみ出し分の上余白」だけ。PC は画像拡大に合わせて拡大。 */
@media (min-width: 769px) {
  .service-detail--recruit .service-detail__photo-slider {
    padding-top: 100px;
  }
}

/* 吹き出しPNGを絶対配置で重ねるため item を position: relative に。
   フェードイン（transition / opacity / .is-revealed）は共通スライダー側へ統一済み。 */
.service-detail--recruit .service-detail__photo-slider-item {
  position: relative;
}

/* ※ セレクタは .service-detail--recruit で始めて、共通の
   .service-detail__photo-slider-item img { width:100% } より詳細度を高く保つ
   （そうしないと吹き出しが写真と同じ 100% 幅に膨らむ） */
.service-detail--recruit .recruit-slider__bubble {
  position: absolute;
  top: -20%;                        /* 写真上端付近。下端が顔の少し上（写真の約16%）に来る */
  width: 45%;                       /* item 幅に対する比率（カンプ準拠・レスポンシブ追従） */
  height: auto;
  z-index: 2;
  pointer-events: none;
  user-select: none;
  /* 既定は非表示（ポップ前）。JS で .is-pop が付くと出現アニメーション */
  opacity: 0;
  transform: scale(0.6);
  transform-origin: center center;
}
.service-detail--recruit .recruit-slider__bubble--left  { left: -3%; }   /* 左肩側の角へ（顔を避ける） */
.service-detail--recruit .recruit-slider__bubble--right { right: -3%; }  /* 右肩側の角へ */

/* ポヨン（scale の軽いバウンス。約0.36秒） */
.service-detail--recruit .recruit-slider__bubble.is-pop {
  animation: recruit-bubble-pop 0.36s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes recruit-bubble-pop {
  0%   { opacity: 0; transform: scale(0.6); }
  60%  { opacity: 1; transform: scale(1.1); }
  100% { opacity: 1; transform: scale(1); }
}
/* ポップ完了後の「固定」状態。JS が animationend で付与する。
   アニメーションを外し（animation:none）、不透明・等倍の静的表示にすることで、
   合成レイヤーを保持し続けず、長時間放置時のGPU再描画チラつきを抑える。
   ※ .is-pop と詳細度が同じ(0,3,0)ため、必ず .is-pop より後に置いて勝たせる。
   見た目は .is-pop の最終フレーム（opacity:1 / scale:1）と同一なので切替時のジャンプなし。 */
.service-detail--recruit .recruit-slider__bubble.is-settled {
  opacity: 1;
  transform: none;
  animation: none;
}

/* IO 非対応 / モーション低減時は、アニメーション無しでそのまま表示
   （base（0,2,0）の opacity:0 を上書きするため同じく --recruit スコープで詳細度を合わせる） */
.service-detail--recruit .recruit-slider__bubble.is-static {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .service-detail--recruit .recruit-slider__bubble {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* 本文中のインライン強調（カテゴリ色・太字） */
.service-detail__accent {
  color: var(--detail-color);
  font-weight: 700;
}

/* ---- 「cocolo で働く魅力」カード ----
   看多機の --plain 白カードを流用し、採用ページではグレー帯の上でも
   視認できるようオレンジの細枠を付ける（見出し下の罫線は --plain のまま） */
.service-detail--recruit .service-detail__service-cards--plain .service-detail__service-card {
  border: 1.5px solid var(--detail-color);
}

/* 見出しの改行(<br>)はカンプに合わせて SP のみ有効。PC では自然折り返しに任せる */
@media (min-width: 769px) {
  .service-detail--recruit .service-detail__service-cards--plain .service-detail__service-card-header br {
    display: none;
  }
}

/* ---- Instagram ダミータイル（HTMLプレビュー用） ----
   本番は Instagram Feed プラグイン出力に置き換わる。プレビューでは
   空の <li> をグレーの正方形タイルとして見せる */
.service-detail--recruit .service-detail__instagram-grid li:empty {
  aspect-ratio: 1 / 1;
  background-color: #d9d4cd;
  border-radius: 14px;
}

/* =========================================================
 * 求人情報：カテゴリ別カラー帯 + 職種カード
 *   各グループ(.recruit-jobs__group)は container を突き抜けて
 *   viewport 左右端まで広がる全幅の淡色帯。gray-bleed と同じ負マージン技。
 *   帯色/アクセント色は --cat-color / --cat-bg をモディファイアで切替。
 * ========================================================= */
/* 求人情報ブロックの下端に余白を確保し、次セクション（コンプライアンス）の
   見出しが末尾の全幅帯にくっつかないようにする */
.recruit-jobs {
  margin: 0 0 48px;
}

/* 求人が無い場合の空メッセージ：見出し・次セクションと詰まらないよう上下に大きく余白 */
.recruit-jobs__empty {
  padding: 48px 16px 96px;
}

.recruit-jobs__group {
  margin: 0 calc(50% - 50vw);
  padding: 36px 16px 40px;
  background-color: var(--cat-bg);
}

/* グループ間は白の隙間をあける（全幅帯どうしの間） */
.recruit-jobs__group + .recruit-jobs__group {
  margin-top: 40px;
}

/* カテゴリ色：訪問系(青)/施設系(ピンク)/児童支援(緑)/総合・その他(オレンジ) */
.recruit-jobs__group--home     { --cat-color: var(--service-home);     --cat-bg: var(--service-home-bg); }
.recruit-jobs__group--facility { --cat-color: var(--service-facility); --cat-bg: var(--service-facility-bg); }
.recruit-jobs__group--daycare  { --cat-color: var(--service-daycare);  --cat-bg: var(--service-daycare-bg); }
.recruit-jobs__group--other    { --cat-color: var(--color-accent);     --cat-bg: var(--color-bg-gray); }

/* カテゴリ見出しピル（帯上端に中央配置） */
.recruit-jobs__cat {
  width: fit-content;
  margin: 0 auto 20px;
  padding: 10px 48px;
  background-color: var(--cat-color);
  color: #fff;
  font-size: 1.25rem;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.08em;
  border-radius: 999px;
}

/* カードを載せる中央カラム（PCでも幅が広がりすぎないよう制限） */
.recruit-jobs__inner {
  max-width: 640px;
  margin: 0 auto;
}

.recruit-jobs__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* 職種カード：白地・カテゴリ色の細枠・右に丸アイコン */
.recruit-jobs__card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px;
  background-color: #fff;
  border: 1px solid var(--cat-color);
  border-radius: 14px;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.recruit-jobs__card:hover {
  opacity: 0.8;
}

.recruit-jobs__card-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.recruit-jobs__card-meta {
  color: var(--cat-color);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.recruit-jobs__card-title {
  color: var(--color-text);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.5;
}

.recruit-jobs__card-arrow {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--cat-color);
  border-radius: 50%;
}

.recruit-jobs__card-arrow img {
  display: block;
  width: 7px;
  height: auto;
  /* 「>」は左（折れ部）に面積が偏るため、幾何学中央だと視覚的に左へ寄る。
     丸の中で光学的に中央へ見えるよう右へ約1px補正 */
  transform: translateX(1px);
}

/* ---- コンプライアンス「大切にしていること」ベージュカード ---- */
.recruit-compliance-image {
  margin: 0 0 24px;
  border-radius: 16px;
  overflow: hidden;
}

.recruit-compliance-image img {
  display: block;
  width: 100%;
  height: auto;
}

.recruit-values {
  margin: 24px 0 0;
  padding: 24px 22px 26px;
  background-color: var(--color-bg-gray);
  border-radius: 16px;
}

.recruit-values__title {
  margin: 0 0 14px;
  color: var(--detail-color);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.recruit-values__list {
  list-style: none;
  margin: 0;
  padding: 0 0 0 8px;               /* リスト全体を少し内側へ */
}

.recruit-values__list li {
  position: relative;
  padding: 2px 0 2px 26px;          /* 上下パディングを詰めて行間を狭く */
  color: var(--color-text);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
}

.recruit-values__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(2px + 0.75em);
  transform: translateY(-50%);
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background-color: var(--detail-color);
}

/* =========================================================
 * 採用情報：求人 個別ページ（recruit-single）
 *   ページ骨格は service-detail--recruit（オレンジ）を流用。
 *   記事見出しの職種ラベルだけカテゴリ色（青/ピンク/緑/橙）に切替。
 *   本文の各セクション見出しは「オレンジ丸 + 右へ伸びる罫線」。
 * ========================================================= */

/* 記事ヘッダー：職種ラベル + タイトル + 下罫線 */
.recruit-single__header {
  margin: 0 0 32px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(68, 48, 34, 0.25);
}

.recruit-single__cat {
  margin: 0 0 4px;
  color: var(--detail-color);      /* 既定はブランドオレンジ。カテゴリ別に下で上書き */
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.recruit-single__cat--home     { color: var(--service-home); }
.recruit-single__cat--facility { color: var(--service-facility); }
.recruit-single__cat--daycare  { color: var(--service-daycare); }
.recruit-single__cat--other    { color: var(--color-accent); }

.recruit-single__title {
  margin: 0;
  color: var(--color-text);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.04em;
}

/* 強調ボックス（キャンペーン告知・収入例など）：グレー・角は直角（カンプ準拠） */
.recruit-single__box {
  margin: 0 0 8px;
  padding: 20px 22px;
  background-color: var(--color-bg-gray);
  color: var(--color-text);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.7;
}
/* --lg: キャンペーン告知など少し大きめに見せたいボックス。
   直後の見出しと近づきすぎないよう下余白を確保する */
.recruit-single__box--lg {
  margin-bottom: 40px;
  padding: 22px 24px;
  font-size: 1.05rem;
}

/* 箇条書き直後のボックス（収入例など）は上にも余白を取る */
.recruit-single__list + .recruit-single__box {
  margin-top: 20px;
}

/* セクション見出し：オレンジ丸 + テキスト、その下に全幅の罫線（カンプ準拠）。
   丸・テキストは罫線より少し内側（padding-left）に寄せる */
.recruit-single__heading {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 20px;
  padding: 0 0 10px 10px;
  border-bottom: 1px solid rgba(68, 48, 34, 0.25);
  color: var(--color-text);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.recruit-single__heading::before {
  content: "";
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: var(--detail-color);
}

/* 見出し配下の本文（箇条書き・段落・注釈）は罫線より少し内側へ寄せる */
.recruit-single__heading ~ .recruit-single__list,
.recruit-single__heading ~ .service-detail__text,
.recruit-single__heading ~ .service-detail__note {
  padding-left: 10px;
}

/* 「・」始まりの箇条書き */
.recruit-single__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.recruit-single__list li {
  position: relative;
  padding: 3px 0 3px 1.1em;
  color: var(--color-text);
  font-size: 1rem;
  line-height: 1.7;
}
.recruit-single__list li::before {
  content: "・";
  position: absolute;
  left: 0;
  top: 3px;
}

/* 担当者からのメッセージ：写真 + 役職/氏名 */
.recruit-single__person {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 0 0 20px;
}
.recruit-single__person-photo {
  flex: 0 0 120px;
  width: 120px;
  overflow: hidden;
}
.recruit-single__person-photo img {
  display: block;
  width: 100%;
  height: auto;
}
.recruit-single__person-role {
  margin: 0 0 2px;
  color: var(--color-text);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.5;
}
.recruit-single__person-name {
  margin: 0;
  color: var(--color-text);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.5;
}

/* 「採用情報ページへ」戻りボタン：オレンジ枠のピル（中央配置）。
   直後の応募セクション（グレー全幅帯）とくっつかないよう下余白を確保 */
.recruit-single__back {
  margin: 0 0 48px;
  text-align: center;
}
.recruit-single__back-btn {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 5px 32px;               /* フォーム送信/インスタボタンと同じ厚みに揃える */
  border: 1.5px solid var(--detail-color);
  border-radius: 999px;
  color: var(--detail-color);
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 0.04em;
  transition: opacity 0.2s ease;
}
.recruit-single__back-btn:hover {
  opacity: 0.75;
  color: var(--detail-color);
}
.recruit-single__back-btn img {
  display: block;
  width: 7px;
  height: auto;
}

/* =========================================================
 * 求人本文（エディタ出力）を「HTML要素単位」でデザイン固定する
 *   the_content() の標準要素をそのまま整形するため、書き手は
 *   「見出し3 / 箇条書き / 段落 / 引用 / スタイル:注釈」を選ぶだけで
 *   このページのデザインになる（見出しの増減・並べ替えは自由）。
 *     h2,h3      → オレンジ丸＋下線の見出し（.recruit-single__heading 相当）
 *     ul         → 「・」付きリスト（.recruit-single__list 相当）
 *     p          → 本文（.service-detail__text 相当）
 *     blockquote → グレーの強調カード（.recruit-single__box 相当）
 *     p.is-note  → ※注記（.service-detail__note 相当）
 *     strong     → オレンジ強調
 * ========================================================= */
.recruit-single__body {
  /* 本文の最後が段落で終わっても、次のセクション（担当者/戻るボタン）と
     詰まらないよう下余白を確保する（本文内の見出し間隔と揃える） */
  margin: 0 0 40px;
}
.recruit-single__body > :first-child {
  margin-top: 0;
}

/* 見出し（h2/h3）＝オレンジ丸＋下線 */
.recruit-single__body h2,
.recruit-single__body h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 40px 0 20px;
  padding: 0 0 10px 10px;
  border-bottom: 1px solid rgba(68, 48, 34, 0.25);
  color: var(--color-text);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.recruit-single__body h2::before,
.recruit-single__body h3::before {
  content: "";
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: var(--detail-color);
}

/* 段落＝本文 */
.recruit-single__body p {
  margin: 0 0 1em;
  padding-left: 10px;
  color: var(--color-text);
  font-size: 1rem;
  line-height: 1.9;
}

/* 箇条書き＝「・」付きリスト */
.recruit-single__body ul {
  list-style: none;
  margin: 0 0 1em;
  padding: 0 0 0 10px;
}
.recruit-single__body ul li {
  position: relative;
  padding: 3px 0 3px 1.1em;
  color: var(--color-text);
  font-size: 1rem;
  line-height: 1.7;
}
.recruit-single__body ul li::before {
  content: "・";
  position: absolute;
  left: 0;
  top: 3px;
}
/* 原稿を貼り付けると項目内に <p> が入る（li>p）ことがあり、その p の
   margin / padding-left が効いて手打ち項目とズレる。インライン化＋余白リセットで
   「li 直下テキスト」と同じ体裁に揃える（ul / ol 共通） */
.recruit-single__body li > p {
  display: inline;
  margin: 0;
  padding: 0;
}

/* 番号リストは標準の見た目を維持（内側インセットのみ） */
.recruit-single__body ol {
  margin: 0 0 1em;
  padding-left: 1.6em;
  color: var(--color-text);
  font-size: 1rem;
  line-height: 1.7;
}

/* 引用＝グレーの強調カード（収入例・補足など） */
.recruit-single__body blockquote {
  margin: 0 0 1em;
  padding: 20px 22px;
  background-color: var(--color-bg-gray);
  color: var(--color-text);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.7;
}
.recruit-single__body blockquote > :last-child {
  margin-bottom: 0;
}
.recruit-single__body blockquote p {
  margin: 0;
  padding: 0;
  font-weight: 700;
}

/* スタイル「注釈（※）」＝小さめの注記 */
.recruit-single__body p.is-note {
  margin: -0.4em 0 1em;
  padding: 0 16px 0 10px;
  font-size: 0.8rem;
  line-height: 1.7;
}

/* 太字＝カテゴリ色（オレンジ）の強調 */
.recruit-single__body strong {
  color: var(--detail-color);
  font-weight: 700;
}

/* 本文末尾要素の余白を詰める（下のセクションと間隔が二重にならないように） */
.recruit-single__body > :last-child {
  margin-bottom: 0;
}

/* PC：幅の階層を全ページ共通の「見出し 880 / コンテンツ 780」に揃える。
   - 見出し類（記事タイトルヘッダー・セクション見出し）… 880px
   - グレーカード（キャンペーン・収入例）／本文／リスト／注釈 … 780px
   ※ service-detail__text・__note は共通ルールで既に 780px 中央寄せ。
     ここでは container 直下 or 880 対象外の要素（ヘッダー・カード・リスト）を個別に指定し、
     SP 用に付けた左インセット(10px)は PC では解除して左端を揃える。 */
@media (min-width: 769px) {
  .recruit-single__header {
    max-width: 880px;
    margin-left: auto;
    margin-right: auto;
  }
  .recruit-single__box,
  .recruit-single__list,
  .recruit-single__person {
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;
  }
  .recruit-single__heading ~ .recruit-single__list,
  .recruit-single__heading ~ .service-detail__text,
  .recruit-single__heading ~ .service-detail__note {
    padding-left: 0;
  }

  /* 本文（エディタ）も同じ階層に：見出し(h2/h3)＝880px、
     段落・リスト・引用・注釈＝780px 中央カラム */
  .recruit-single__body h2,
  .recruit-single__body h3 {
    max-width: 880px;
    margin-left: auto;
    margin-right: auto;
  }
  .recruit-single__body p,
  .recruit-single__body ul,
  .recruit-single__body ol,
  .recruit-single__body blockquote {
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;
  }
  /* 段落・「・」リストは左インセットを解除して左端を 780px に揃える
     （ol の番号領域・blockquote の内側余白はそのまま維持する） */
  .recruit-single__body p,
  .recruit-single__body ul {
    padding-left: 0;
  }
  /* 注釈(is-note)は margin ショートハンドで左右0が効いてしまうため、
     780px 中央カラムに明示的に揃え直す（上マージンの詰めは維持） */
  .recruit-single__body p.is-note {
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
  }
}

/* =========================================================
 * 通所（児童発達支援・放課後等デイサービス）ページ専用
 *   デザイン指定により、このページのカテゴリ色だけ濃い緑(#60963e)へ
 *   差し替える。通所カテゴリ標準色 #8db772（ニュース等）はそのまま継続。
 *   service-detail--daycare と併用して --detail-color を上書きする。
 * ========================================================= */
.service-detail--deep-green { --detail-color: #60963e; }

/* 写真スライダーは介護付き有料老人ホーム等と共通の
   .service-detail__photo-slider（無限ループ・マーキー）を流用する */

/* ---- 「成長を支える5つの支援」カードの番号（緑ヘッダー内） ---- */
.service-detail__step-num {
  margin-right: 0.5em;
  font-weight: 900;
}

/* ---- サービス詳細ページ全体のテーマ切替 ----
   ページ背景とフッター背景を入れ替える（トップページ：白bg/グレーfooter ⇔
   詳細ページ：ベージュbg/白footer）。
   curve SVG はフッター上部の白版 (footer-bg_w.svg) を別途読み込む */
body.is-service-detail .site-footer__top {
  background-color: var(--color-bg);
}

/* 詳細ページの container 下端パディングを 0 にして、最終カードのベージュが
   直接 footer の curve に接続するようにする（通常時は 64px の白余白あり） */
body.is-service-detail .service-detail__container {
  padding-bottom: 0;
}

/* container 最終要素の下マージンも 0 にして、グレー（card / gray-bleed）が
   そのまま footer curve のグレー肩へ繋がるようにする。
   ※ card--bleed-bottom は margin-bottom:64px を持つため、これが無いと
   グレーカード → 白64px隙間 → グレーカーブ となり、SPフッターのカーブが
   出る 768〜1199px で白い切れ目が露出する（≥1200px はカーブ非表示で隠れていた） */
body.is-service-detail .service-detail__container > :last-child {
  margin-bottom: 0;
}

/* curve SVG (footer-bg_w.svg) の上部両端は透明なので、そのままだと body 白が
   透けて見える。詳細ページでは SVG 自身に beige 背景を当て、白い curve が
   beige を切り抜いて footer 上端に降りていくように見せる */
body.is-service-detail .site-footer__curve {
  background-color: var(--color-bg-gray);
}

/* is-detail-bleed: フッター色は通常通り（ベージュ）のまま、container 下端パディングだけ消す。
   末尾の gray-bleed セクションを通常フッターのベージュへシームレスに繋ぐためのバリエーション
   （施設ページ：beige bleed → beige footer の遷移用） */
body.is-detail-bleed .service-detail__container {
  padding-bottom: 0;
}

/* ---------------------------------------------------------
 * 施設詳細ページ専用パーツ
 * --------------------------------------------------------- */

/* ---- タイトル帯のサブタイトル（「（特定施設入居者生活介護）」など） ---- */
.service-detail__title-sub {
  display: block;
  margin-top: 4px;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* ---- 写真スライダー：横長画像を左へゆっくり無限ループ
   message-slider と同じ「2セット並べ → translateX(-50%) で循環」方式 */
.service-detail__photo-slider {
  margin: 0 calc(50% - 50vw) 32px;   /* 画面端まで全幅延長 */
  overflow: hidden;
}

.service-detail__photo-slider-track {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  width: max-content;
  /* サイト共通で「4セット並べ → -50%」方式に統一（ワイド画面でループが途切れないよう
     半分＝2セット分を画面幅より広く確保）。-50% で2セット分＝従来(2セット)の2倍距離を
     動かすため、再生時間も倍(80s)にして従来の見た目速度を維持する。 */
  animation: service-detail__photo-slider-flow 80s linear infinite;
  will-change: transform;
}

.service-detail__photo-slider-item {
  flex: 0 0 auto;
  width: 220px;
  margin-right: 20px;                /* gap ではなく margin で -50% が綺麗な境界に揃う */
  transition: opacity 0.9s ease;     /* 読み込み時フェードイン用（少しゆっくり） */
}

/* 読み込み時の1枚ずつフェードイン（全 service-detail スライダー共通）。
   JS 有効時のみ初期は非表示にし、JS が可視スライドへ左→右順に .is-revealed を付与する。
   head のインラインJSが <html>.js を初回ペイント前に付けるため「一瞬表示→消える」チラつきは無い。
   非JS環境では隠さず常時表示。採用ページの写真フェードインと同じ演出を他ページにも統一。 */
.js .service-detail__photo-slider-item {
  opacity: 0;
}
.js .service-detail__photo-slider-item.is-revealed {
  opacity: 1;
}

/* PC：写真を拡大（220→320px／間隔 20→32px）。全 service-detail のスライダー共通。
   拡大分1セットが広がるため PC はやや速くなる（＝画像が大きい分の自然な増速）。 */
@media (min-width: 769px) {
  .service-detail__photo-slider-item {
    width: 320px;
    margin-right: 32px;
  }
}

.service-detail__photo-slider-item img {
  display: block;
  width: 100%;
  height: auto;                      /* 元画像のアスペクト比をそのまま使う */
  border-radius: 12px;
  user-select: none;
  pointer-events: none;
}

@keyframes service-detail__photo-slider-flow {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* モーション低減設定の場合は流れを止める */
@media (prefers-reduced-motion: reduce) {
  .service-detail__photo-slider-track {
    animation: none;
  }
}

/* お知らせは index ページと共通の .news__* クラスを流用するため、
   service-detail__news-* 系の独自定義は持たない */

/* お知らせ見出し直下に news__list が続く場合、罫線までの余白を倍に広げる */
.service-detail__section-title:has(+ .news__list) {
  margin-bottom: 32px;
}

/* ---- 施設写真グリッド（2列 × 4行）：8枚の施設写真を均等に並べる ---- */
.service-detail__photo-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 12px;
}

.service-detail__photo-grid figure {
  margin: 0;
}

.service-detail__photo-grid img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 6px;
}

.service-detail__photo-grid figcaption {
  margin: 6px 0 0;
  font-size: 0.78rem;
  font-weight: 700;
  text-align: left;
  color: var(--color-text);
}

/* ---- 一日の過ごし方（時刻 + ●ドット縦タイムライン） ---- */
.service-detail__schedule {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ドット中心（left:8px）を貫く縦線。最初と最後のドットの間だけ描く。
   ●と同じ --detail-color（不透明）で揃える */
.service-detail__schedule::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 18px;
  bottom: 18px;
  width: 2px;
  background-color: var(--detail-color);
}

.service-detail__schedule-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 9px 0 9px 34px;
}

.service-detail__schedule-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: var(--detail-color);
}

.service-detail__schedule-time {
  flex: 0 0 auto;
  min-width: 78px;                 /* 「16:00 〜」まで収め、ラベル開始位置を揃える */
  white-space: nowrap;
  color: var(--detail-color);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
}

.service-detail__schedule-label {
  color: var(--color-text);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.5;
}

/* タイプ見出し（包括型／日中支援型）＝カテゴリ色のピル。
   カンプ準拠で、見出し「一日の過ごし方（例）」と同じ外側位置（timeline より1段外）に置く。
   ＝インデント用の「sub-title ~ …」リストには含めない。
   2種のピルは文字数が違っても同じ幅に揃える（min-width＋中央寄せ／GH専用） */
.service-detail__schedule-type {
  margin: 0 0 12px;
}
.service-detail__schedule + .service-detail__schedule-type {
  margin-top: 28px;
}
.service-detail__schedule-type span {
  display: inline-block;
  min-width: 9em;                  /* border-box(=padding込)。「日中支援型」の実幅を上回る値で2種を同幅に */
  padding: 5px 22px;
  text-align: center;
  background-color: var(--detail-color);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: 999px;
}

/* ---- 主なサポート（グレー背景に乗る白カード + ●リスト） ---- */
.service-detail__support-card {
  background-color: #fff;
  border-radius: 14px;
  padding: 14px 22px;
}

.service-detail__support-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.service-detail__support-list li {
  position: relative;
  padding: 4px 0 4px 28px;
  color: var(--color-text);
  font-size: 1rem;
  line-height: 1.45;
}

.service-detail__support-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(4px + 0.72em);         /* padding-top + line-height/2 で1行目テキスト中央に揃える */
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: var(--detail-color);
}

/* ---- Instagram プレビュー（見出し + 6 タイル + ボタン） ---- */
.service-detail__instagram-heading {
  margin: 0 0 16px;
  text-align: center;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: 0.04em;
}

.service-detail__instagram-grid {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.service-detail__instagram-grid img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* --placeholder: Instagram フィード未連携時の仮グリッド（淡グレーの角丸セル）。
   ログイン情報受領後、[instagram-feed] ショートコードに差し替える想定。 */
.service-detail__instagram-grid--placeholder li {
  aspect-ratio: 1 / 1;
  background-color: #dcd8d0;
  border-radius: 14px;
}

/* Smash Balloon Instagram Feed プラグイン出力の画像に角丸を当てる
   （プラグインは #sb_instagram .sbi_photo img でレンダリング） */
#sb_instagram .sbi_photo img {
  border-radius: 14px;
}

.service-detail__instagram-link-wrap {
  margin: 0;
  text-align: center;
}

.service-detail__instagram-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 4px 32px;
  background-color: var(--detail-color);
  border: none;
  border-radius: 999px;
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 0.06em;
  transition: opacity 0.2s ease;
}

.service-detail__instagram-link:hover {
  color: #fff;
  opacity: 0.85;
}

.service-detail__instagram-link-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 8px;
}

.service-detail__instagram-link-arrow img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---- PDF ダウンロードボタン群 ---- */
.service-detail__pdf-btns {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.service-detail__pdf-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 22px;
  background-color: var(--detail-color);
  color: #fff;
  text-decoration: none;
  border-radius: 12px;
  transition: opacity 0.2s ease;
}

.service-detail__pdf-btn:hover {
  color: #fff;
  opacity: 0.85;
}

/* 白ボタン（カンプ準拠：最後の「入居条件・費用・設備一覧」等）。
   白地・ピンク2px枠・ピンク文字＝お問合せの白枠ボタン(contact-btn)と統一。
   矢印は arrow-right-pink.svg にマークアップ側で差し替える */
.service-detail__pdf-btn--outline {
  background-color: #fff;
  border: 2px solid var(--detail-color);
  color: var(--detail-color);
}
.service-detail__pdf-btn--outline:hover {
  color: var(--detail-color);
}

.service-detail__pdf-btn-arrow {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 9px;
}

.service-detail__pdf-btn-arrow img {
  display: block;
  width: 100%;
  height: auto;
}

.service-detail__pdf-btn-text {
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.4;
  /* 折り返し位置を整える：ラベル内のスペース（例「特定施設入居者生活介護 利用料金」）
     や句読点で改行し、CJK の途中では極力切らない。長すぎる連続文字は anywhere で救済 */
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.service-detail__pdf-btn-ext {
  display: block;
  margin-top: 2px;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* ---------------------------------------------------------
 * 案内ハブページ（施設/サービス/法人・団体を探す方向けの誘導ページ）
 *   service-detail--policy（オレンジ）の骨格に、中央アイコン＋リード文＋
 *   誘導ボタン（右チェブロン・中央寄せ）を載せる。
 * --------------------------------------------------------- */
.service-detail__hub-icon {
  display: block;
  width: 100px;                /* カンプ実測（375px幅で100px相当） */
  height: auto;
  margin: 8px auto 22px;
}

.service-detail__hub-lead {
  margin: 0 0 32px;
  color: var(--color-text);
  font-size: 0.95rem;
  line-height: 1.9;
  text-align: center;
}

/* 誘導ボタン一覧（縦積み） */
.service-detail__link-btns {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.service-detail__link-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 22px;
  background-color: var(--detail-color);
  color: #fff;
  text-decoration: none;
  border-radius: 12px;
  transition: opacity 0.2s ease;
}

.service-detail__link-btn:hover {
  color: #fff;
  opacity: 0.85;
}

/* タイトル（中央寄せ）＋ 補足（括弧の2行目）。右端のチェブロン幅(9px)分を
   左 padding にも確保し、テキストをボタン中央に見せる */
.service-detail__link-btn-text {
  flex: 1 1 auto;
  padding-left: 9px;
  text-align: center;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.4;
}

.service-detail__link-btn-sub {
  display: block;
  margin-top: 2px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.service-detail__link-btn-arrow {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 9px;
}

.service-detail__link-btn-arrow img {
  display: block;
  width: 100%;
  height: auto;
}

/* 小見出し(sub-title)配下の誘導ボタン（例：訪問看護「詳しいご案内」）は
   1行/2行が混在してもカンプ通り高さを揃える。2行分（2.8em＝line-height1.4×1.05rem×2）
   ＋上下padding(18px×2)を min-height に確保し、1行ボタンも同じ高さで中央寄せ。
   ※ 誘導ハブ(service-guide 等)の link-btns は sub-title を挟まないため影響しない */
.service-detail__sub-title ~ .service-detail__link-btns .service-detail__link-btn {
  min-height: calc(2.94rem + 36px);
}

/* ---------------------------------------------------------
 * 案内ハブ（カード／グループ）
 *   トップの4ボタンから飛ぶ2ページ専用のパーツ。
 *     - 施設をお探しの方   … .hub-cards  ＝ カテゴリ淡色のカード（白ピル＋説明文）
 *     - 在宅・その他サービス … .hub-groups ＝ カテゴリ色の見出し帯＋淡色パネル（白ピル）
 *   白ピル（.hub-link）は両者で共有。丸チェブロンの色だけ --hub-color で切り替える。
 *   ※ トップの「サービス内容」アコーディオン(.service-group/.service-link)とは
 *      見た目が近いが、カンプ実測の寸法（帯66 / ピル44 / アイコン54）と
 *      ラベル色（カテゴリ色ではなく本文色）が異なるため別コンポーネントにしている。
 * --------------------------------------------------------- */

/* ---- 白ピル（共通） ---- */
.hub-link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  /* 左は丸チェブロン分を確保。左右非対称にしてラベルの見た目の中心を
     カンプ（ピル中心よりわずかに右）に合わせる */
  padding: 9px 22px 9px 44px;
  background-color: #fff;
  border-radius: 12px;
  color: var(--color-text);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.4;
  letter-spacing: 0.04em;
  text-align: center;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.hub-link:hover,
.hub-link:focus-visible {
  opacity: 0.85;
  color: var(--color-text);
}

/* ラベルは <br> 区切りのパーツを .hub-link__seg で囲む（.service-link と同じ作法）。
   各パーツは折り返し禁止＝改行は必ずパーツ境界（＝<br>と同じ位置）で起こる */
.hub-link__seg {
  white-space: nowrap;
}

/* 括弧書きの補足行（（特定技能）など）は一段小さく */
.hub-link__sub {
  display: block;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
}

/* 左の丸囲みチェブロン */
.hub-link__chevron {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  background-color: var(--hub-color);
  border-radius: 50%;
}

.hub-link__chevron img {
  display: block;
  width: 5px;
  height: auto;
}

/* ---- 施設ハブ：カテゴリ淡色のカード（白ピル＋説明文） ---- */
.hub-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 17px;
}

.hub-card {
  /* 色は親の .service-detail--{category} が持つ --detail-color を引き継ぐ */
  --hub-color: var(--detail-color);
  padding: 19px 17px 17px;
  background-color: var(--detail-color-bg);
  border-radius: 18px;
}

.hub-card__desc {
  margin: 10px 0 0;
  color: var(--color-text);
  font-size: 0.9rem;
  line-height: 1.6;
  text-align: center;
}

/* ---- 在宅・その他ハブ：カテゴリ色の見出し帯＋淡色パネル ---- */
.hub-groups {
  list-style: none;
  margin: 0;
  padding: 0;
}

.hub-group {
  --hub-color: var(--service-home);
  --hub-color-bg: var(--service-home-bg);

  border-radius: 18px;
  overflow: hidden;                          /* 見出し帯の角を丸くカット */
  background-color: var(--hub-color-bg);
}

.hub-group + .hub-group {
  margin-top: 36px;
}

.hub-group--home    { --hub-color: var(--service-home);    --hub-color-bg: var(--service-home-bg); }
.hub-group--daycare { --hub-color: var(--service-daycare); --hub-color-bg: var(--service-daycare-bg); }
.hub-group--other   { --hub-color: var(--service-other);   --hub-color-bg: var(--service-other-bg); }

/* 見出し帯：左にアイコン（絶対配置）、テキストは帯の中央寄せ。
   左右非対称パディングでテキストの見た目の中心をカンプに合わせる */
.hub-group__header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;                                 /* h2 の既定マージンを打ち消す */
  min-height: 66px;
  padding: 12px 24px 12px 50px;
  background-color: var(--hub-color);
  color: #fff;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.4;
}

/* 左のカテゴリアイコン（PNG：白抜きシルエット） */
.hub-group__icon {
  position: absolute;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  width: 54px;
  height: 54px;
}

.hub-group__icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.hub-group__list {
  list-style: none;
  margin: 0;
  padding: 17px 17px 20px;
}

.hub-group__item + .hub-group__item {
  margin-top: 11px;
}

/* ---------------------------------------------------------
 * 会社概要ページ（company）専用パーツ
 * --------------------------------------------------------- */
/* 事業ネットワーク図（diagram.png） */
.service-detail__diagram {
  margin: 0 0 40px;
  text-align: center;
}
.service-detail__diagram img {
  display: inline-block;
  width: 100%;
  max-width: 340px;
  height: auto;
}

/* 企業理念の中央見出し（オレンジ・センター・下ボーダー）。
   罫線は border-box 幅いっぱいに引き、直下の本文だけ padding で内側に寄せる */
.service-detail__center-heading {
  margin: 28px 0 0;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--detail-color);
  color: var(--detail-color);
  font-size: 1.2rem;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.04em;
}
.service-detail__center-heading:first-of-type {
  margin-top: 0;
}
.service-detail__center-heading + .service-detail__text {
  margin-top: 16px;
  padding: 0 8px;
}

/* 事業内容：カテゴリ小見出し（sub-title）が直前のリストと密着しないよう余白 */
.service-detail__sub-card-list + .service-detail__sub-title {
  margin-top: 28px;
}
/* セクション見出し直後の最初のカテゴリ小見出しも詰まりすぎないよう余白を確保 */
.service-detail--policy .service-detail__section-title + .service-detail__sub-title {
  margin-top: 28px;
}
/* 事業内容・沿革のリストは見出しより少し内側に入れ、丸印も小さくする（カンプ準拠） */
.service-detail--policy .service-detail__sub-card-list {
  padding-left: 14px;
}
.service-detail--policy .service-detail__sub-card-list li {
  padding: 3px 0 3px 18px;
}
.service-detail--policy .service-detail__sub-card-list li::before {
  top: calc(3px + 0.8em);          /* 詰めた padding-top に合わせて丸印を1行目中央へ */
  width: 8px;
  height: 8px;
}

/* 各種指定・登録番号：行区切りの一覧 */
.service-detail__reg-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.service-detail__reg-list > li {
  padding: 12px 2px;
  border-bottom: 1px solid var(--detail-color);
  color: var(--color-text);
  font-size: 0.9rem;
  line-height: 1.65;
}
.service-detail__reg-list > li:first-child {
  border-top: 1px solid var(--detail-color);
}
.service-detail__reg-no {
  font-weight: inherit;            /* 数字も本文と同じ通常ウェイト（太字にしない） */
  white-space: nowrap;
}

/* 各種指定・登録番号：事業所ごとの白カード（オレンジ枠・オレンジ見出し）。カンプ準拠 */
.service-detail__reg-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.service-detail__reg-card {
  padding: 20px 22px;
  background-color: #fff;
  border: 1px solid var(--detail-color);
  border-radius: 12px;
}
.service-detail__reg-card-name {
  margin: 0 0 10px;
  color: var(--detail-color);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.4;
}
.service-detail__reg-card-list {
  list-style: none;
  margin: 0;
  padding: 0;
  color: var(--color-text);
  font-size: 0.9rem;
  line-height: 1.7;
}
.service-detail__reg-card-list > li {
  overflow-wrap: anywhere;   /* 長い項目名＋番号がカード幅を超える時に確実に折り返す */
}
.service-detail__reg-card-list > li + li {
  margin-top: 2px;
}

/* 会社概要テーブル（左：淡オレンジのラベル列 / 右：白の値列） */
/* 角丸は wrap 側の border-radius + overflow:hidden でクリップする */
.service-detail__info-table-wrap {
  border: 1px solid var(--detail-color);
  border-radius: 8px;
  overflow: hidden;
}
.service-detail__info-table {
  width: 100%;
  border-collapse: collapse;
  color: var(--color-text);
}
.service-detail__info-table th,
.service-detail__info-table td {
  border: 1px solid var(--detail-color);
  padding: 10px 12px;
  font-size: 0.9rem;
  line-height: 1.6;
}
/* 見出し列：中身（5文字）ぴったりに縮め、上下左右中央・通常ウェイト */
.service-detail__info-table th {
  width: 1%;
  background-color: #fbe6d6;
  font-weight: 500;
  white-space: nowrap;
  text-align: center;
  vertical-align: middle;
}
/* 内容列：左寄せ・上揃え・太字 */
.service-detail__info-table td {
  background-color: #fff;
  font-weight: 700;
  text-align: left;
  vertical-align: top;
}
/* 外周のセル罫線は wrap の border と二重になるため消す */
.service-detail__info-table tr:first-child th,
.service-detail__info-table tr:first-child td { border-top: 0; }
.service-detail__info-table tr:last-child th,
.service-detail__info-table tr:last-child td { border-bottom: 0; }
.service-detail__info-table th:first-child { border-left: 0; }
.service-detail__info-table td:last-child { border-right: 0; }
/* 役員などの補足（所属・役職）は小さめ・改行表示 */
.service-detail__info-table small {
  display: block;
  margin-top: 2px;
  font-size: 0.68rem;
  font-weight: 500;
  line-height: 1.5;
}
/* 1セルに複数の役員名（取締役・執行役員）が入る場合、名前ごとにオレンジのドットで区切る（カンプ準拠）。
   区切り線は td の左右padding（12px）を負マージンで打ち消してセル端まで伸ばし、
   テキストだけ同量のpaddingで元位置に戻す（罫線＝端まで／文字＝インセット）。 */
.service-detail__info-person {
  display: block;
}
.service-detail__info-person + .service-detail__info-person {
  margin: 10px -12px 0;
  padding: 14px 12px 0;
  /* border:dotted はブラウザにより角ドットになるため radial-gradient で確実に丸ドットにする。
     帯(tile)の高さを円の直径より大きく取り、上下が切れて角張らないようにする。
     アンチエイリアス幅(1.8→2.4)を広めに取ると輪郭が滑らかな丸になる。 */
  background-image: radial-gradient(circle, var(--detail-color) 0.9px, transparent 1.5px);
  background-repeat: repeat-x;
  background-position: left top;
  background-size: 5px 6px;
}

/* 沿革：年ごとのブロック（年ラベル＋右へ伸びる罫線＋ドットリスト） */
.service-detail__history-item {
  margin-bottom: 28px;
}
.service-detail__history-item:last-child {
  margin-bottom: 0;
}
.service-detail__year {
  display: flex;
  align-items: center;
  margin: 0 0 10px;
  color: var(--detail-color);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.service-detail__year::after {
  content: "";
  flex: 1 1 auto;
  margin-left: 8px;                /* 年 と罫線の間隔 */
  height: 1px;
  background-color: var(--detail-color);
  opacity: 0.4;
}
.service-detail__year span {
  font-size: 0.85rem;
  margin-left: 3px;                /* 数字と年をわずかに離す */
}

/* 沿革リスト：●ドットではなく先頭に月ラベル（オレンジ）を置く。
   月ラベルは固定幅で右揃えし、本文の頭を縦に揃える。 */
.service-detail__history-list li {
  display: flex;
  align-items: baseline;
  padding: 6px 0;
  column-gap: 10px;
}
.service-detail__history-list li::before {
  content: none;                   /* ●ドットを無効化 */
}
.service-detail__month {
  flex: 0 0 auto;
  min-width: 2.8em;                /* 「10月」「12月」でも本文頭が揃う固定幅 */
  text-align: right;
  color: var(--detail-color);
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.service-detail__month span {
  font-size: 0.75rem;
  margin-left: 1px;
}
.service-detail__history-text {
  flex: 1 1 auto;
}

/* 各種公表資料：説明文と最初のPDFボタンの間に余白を確保 */
.service-detail--policy .service-detail__text + .service-detail__pdf-btns {
  margin-top: 24px;
}

/* ---- リード直下の補足ノート（淡ピンクの角丸ボックス） サ高住ページ用 ---- */
.service-detail__lead-note {
  margin: 24px 0 32px;             /* 下の gray-bleed（お知らせ）と密着しないよう余白を確保 */
  padding: 22px 24px;
  background-color: var(--detail-color-bg);
  border-radius: 12px;
  font-size: 0.9rem;
  line-height: 1.9;
  color: var(--color-text);
}

/* ---- 施設一覧：拠点カード（写真＋名称＋住所＋MAP） サ高住ページ用 ----
   グレー背景(gray-bleed)に乗る、カテゴリ色ボーダーの白カード。
   上段：写真（左・正方形）＋ ラベル/名称/住所（右）、下段：MAP 全幅 */
.service-detail__facility-list {
  list-style: none;
  margin: 0 0 8px;
  /* カード左右を 4px インセットし、エリア名の小見出し(.sub-title:padding-left 4px)と
     左端・幅を揃える（daycare／group-home／senior-housing 共通） */
  padding: 0 4px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* エリア区切り：施設リストの後に続く次エリアの小見出し（例：山形→宮城）の手前に
   大きめの余白を入れて、エリアのまとまりを視覚的に分ける */
.service-detail__facility-list + .service-detail__sub-title {
  margin-top: 56px;
}

.service-detail__facility-card {
  background-color: #fff;
  border: 2px solid var(--detail-color);   /* SP・PC共通で2px */
  border-radius: 14px;
  padding: 20px;
}

.service-detail__facility-head {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.service-detail__facility-photo {
  flex: 0 0 34%;
  min-width: 0;                    /* 既定の min-width:auto が画像の実寸で固定されカードが溢れるのを防ぐ */
  margin: 0;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  overflow: hidden;
}

.service-detail__facility-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.service-detail__facility-body {
  flex: 1 1 auto;
  min-width: 0;
}

.service-detail__facility-label {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-text);
}

.service-detail__facility-name {
  margin: 2px 0 12px;
  font-size: 1.3rem;
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: 0.04em;
  color: var(--color-text);
  overflow-wrap: anywhere;
}

/* 施設名に付く（男性棟）（女性棟）等の補足：本体名より一回り小さく */
.service-detail__facility-name-suffix {
  font-size: 0.72em;
  font-weight: 700;
}

.service-detail__facility-address {
  display: flex;
  gap: 8px;
  min-width: 0;                    /* テキスト列が折り返せるよう収縮を許可 */
  margin: 0;
  font-size: 0.9rem;
  font-weight: 500;                /* 郵便番号・住所は通常（Medium）ウェイト */
  line-height: 1.5;
  color: var(--color-text);
}

/* 住所テキスト列：375px でカード幅を超えないよう折り返しを許可 */
.service-detail__facility-address > span:last-child {
  min-width: 0;
  overflow-wrap: anywhere;
}

.service-detail__facility-address-pin {
  flex: 0 0 auto;
  width: 22px;
  margin-top: 1px;
}

.service-detail__facility-address-pin img {
  display: block;
  width: 100%;
  height: auto;
}

.service-detail__facility-map {
  margin: 18px 0 0;
  aspect-ratio: 16 / 9;
  background-color: #cfcfcf;
  border-radius: 10px;
  overflow: hidden;
}

.service-detail__facility-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* MAP ダミー：埋め込みコード提供後に iframe へ差し替える暫定プレースホルダー */
.service-detail__map-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-text);
}

/* ---- アクセス：施設情報 + MAP + 経路リスト ---- */
.service-detail__access-info {
  margin: 0 0 18px;
}

.service-detail__access-name {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: 0.02em;
}

.service-detail__access-address {
  margin: 4px 0 0;
  font-size: 0.9rem;
  color: var(--color-text);
}

.service-detail__access-map {
  margin: 0 0 24px;
  aspect-ratio: 16 / 9;            /* カンプ準拠：横長 */
  background-color: #cfcfcf;
  border-radius: 12px;
  overflow: hidden;
}

.service-detail__access-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.service-detail__access-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.service-detail__access-list > li {
  position: relative;
  padding: 4px 0 14px 22px;
}

.service-detail__access-list > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 12px;
  height: 12px;
  background-color: var(--detail-color);
  border-radius: 50%;
}

.service-detail__access-list-name {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: 0.02em;
}

.service-detail__access-list-desc {
  margin: 2px 0 0;
  font-size: 0.85rem;
  color: var(--color-text);
  line-height: 1.6;
}

/* ---------------------------------------------------------
 * Topics セクション（グレー背景・自動スライドカルーセル）
 * --------------------------------------------------------- */
.topics {
  background-color: var(--color-bg-gray);
  padding: 56px 16px 72px;
}

.topics__header {
  text-align: center;
  margin: 0 0 28px;
}

.topics__title {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: 0.08em;
}

.topics__title-en {
  margin: 6px 0 0;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-accent);
  letter-spacing: 0.32em;
}

/* ---- スライダー本体 ---- */
.topics-slider {
  max-width: 480px;
  margin: 0 auto;
}

.topics-slider__viewport {
  overflow: hidden;                          /* 横にはみ出したスライドは隠す */
  border-radius: 16px;
}

.topics-slider__track {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  transition: transform 0.55s ease;
  will-change: transform;
}

/* アニメ無しでスナップ（末尾→先頭の瞬間スナップに使用） */
.topics-slider__track.is-no-transition {
  transition: none;
}

.topics-slider__item {
  flex: 0 0 100%;                            /* 1スライド＝ビューポート幅 */
  min-width: 0;
}

/* ---- カード ---- */
.topics-card {
  background-color: #fff;
  border-radius: 16px;
  overflow: hidden;
  height: 100%;
}

.topics-card__link {
  display: block;
  color: var(--color-text);
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.topics-card__media {
  margin: 0;
  aspect-ratio: 3 / 2;                       /* 投稿画像の比率に依存しない固定枠（中央クロップ） */
  overflow: hidden;
}

.topics-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.topics-card__body {
  padding: 18px 22px 22px;
}

.topics-card__date {
  margin: 0 0 8px;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-accent);
  letter-spacing: 0.08em;
}

.topics-card__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.6;
  color: var(--color-text);
  letter-spacing: 0.02em;
}

/* ---- ページネーション・ドット ---- */
.topics-slider__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
}

.topics-slider__dot {
  display: block;
  width: 22px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background-color: #cfc6b9;
  cursor: pointer;
  transition: background-color 0.3s ease;
  -webkit-appearance: none;
  appearance: none;
}

.topics-slider__dot.is-active {
  background-color: var(--color-accent);
}

/* ---- 下部 CTA：トピックス一覧（オレンジ塗りボタン） ---- */
.topics__action {
  text-align: center;
  margin: 36px 0 0;
}

/* ---------------------------------------------------------
 * News セクション（お知らせ：点線区切りの記事リスト）
 * --------------------------------------------------------- */
.news {
  background-color: var(--color-bg);
  padding: 56px 16px 72px;
}

.news__header {
  text-align: center;
  margin: 0 0 28px;
}

.news__title {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: 0.08em;
}

.news__title-en {
  margin: 6px 0 0;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-accent);
  letter-spacing: 0.32em;
}

/* ---- リスト本体 ---- */
.news__list {
  max-width: 480px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.news__item {
  /* 上下に丸点ドットの区切り線（最後の項目だけ下にも線を引く）
     border-style: dotted は環境差があるため background-image で安定化させる
     左右パディングは1文字分（≈1rem）：罫線の端から内側に余裕を取る
     上下パディングは罫線と本文の間隔（記事間の余白）を確保する */
  padding: 26px 16px;
  background-image:
    radial-gradient(circle, var(--color-text) 0.7px, transparent 1.1px);
  background-size: 4px 2px;
  background-repeat: repeat-x;
  background-position: top center;
}

.news__item:last-child {
  background-image:
    radial-gradient(circle, var(--color-text) 0.7px, transparent 1.1px),
    radial-gradient(circle, var(--color-text) 0.7px, transparent 1.1px);
  background-size: 4px 2px, 4px 2px;
  background-repeat: repeat-x, repeat-x;
  background-position: top center, bottom center;
}

.news__link {
  display: block;
  color: var(--color-text);
  text-decoration: none;
  transition: opacity 0.2s ease;
}

/* ---- 上段：日付とカテゴリ ---- */
.news__meta {
  display: flex;
  /* SP：日付の後で改行し、日付とカテゴリを縦2行に。PC は min-width:769 で横並びに戻す */
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  margin: 0 0 8px;
}

.news__date {
  color: var(--color-text);
  font-family: "Zalando Sans", sans-serif;  /* 数字・ピリオドを必ず Zalando Sans で描画 */
  font-weight: 500;                          /* Bold(700) から1段階細く（Medium） */
  font-size: 0.9rem;
  letter-spacing: 0.04em;
}

.news__category {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 700;                          /* Black(900) から1段階細く（Bold） */
  font-size: 0.85rem;
  line-height: 1.2;                          /* 行高を詰めて、縦積み時の項目高さを抑える */
  /* 文字色もカテゴリ色を使用（ドットと統一） */
  color: var(--news-category-color, var(--color-text));
}

/* カテゴリが2件あり SP で縦に積まれる場合、カテゴリ同士の行間だけを詰める
   （日付とカテゴリの間隔＝news__meta の gap は維持。PC は横1行なので下で相殺） */
.news__category + .news__category {
  margin-top: -5px;
}

.news__category-mark {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: var(--news-category-color, #ccc);
  transform: translateY(-1px);     /* 和文の視覚中央が line-box 中央よりわずかに上にあるため微調整 */
  flex-shrink: 0;
}

/* カテゴリ別のドット色（ローカル変数で注入：必要に応じて追加可能） */
.news__category--info      { --news-category-color: var(--color-accent); }
.news__category--facility  { --news-category-color: var(--service-facility); }
.news__category--home      { --news-category-color: var(--service-home); }
.news__category--daycare   { --news-category-color: var(--service-daycare); }
.news__category--other     { --news-category-color: var(--service-other); }
.news__category--vacancy   { --news-category-color: var(--vacancy); }
.news__category--sora-fune { --news-category-color: var(--service-daycare); }

/* ---- 記事タイトル ---- */
.news__heading {
  margin: 0;
  font-size: 1.25rem;        /* 1.3rem から約5%小さく（キリの良い 1.25rem） */
  font-weight: 700;          /* 記事タイトルは強調して太字（Bold） */
  line-height: 1.65;
  color: var(--color-text);
  letter-spacing: 0.02em;
}

/* ---- 下部 CTA：お知らせ一覧 ---- */
.news__action {
  text-align: center;
  margin: 36px 0 0;
}

/* 記事が無い場合のメッセージ（一覧・トップ共通） */
.news__empty {
  margin: 8px auto 0;
  max-width: 480px;
  text-align: center;
  color: var(--color-text);
  opacity: 0.75;
}

/* ===========================================================
 * お知らせ／トピックス アーカイブ（一覧ページ）
 *   service-detail の骨格を流用（タイトル帯はブランドオレンジ）。
 *   - 親カテゴリのフィルターピル（カテゴリ色の塗り）
 *   - 記事リストは index と共通の .news__* を流用
 *   - ページネーション（< 1 / 10 >）
 * =========================================================== */
.service-detail--news {
  --detail-color: var(--color-accent);   /* タイトル帯をオレンジに */
}

/* 記事サムネイル（トピックス一覧：日付・カテゴリ・タイトルの上に表示）。
   お知らせ一覧には付かない任意要素。比率 3:2 で中央クロップ。 */
.news__thumb {
  margin: 0 0 14px;
  aspect-ratio: 3 / 2;
  border-radius: 12px;
  overflow: hidden;
  background-color: var(--color-bg-gray);
}
.news__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ----- 親カテゴリ フィルター（塗りピル） ----- */
.news-filter {
  margin: 0 0 28px;
}
.news-filter__list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 480px;            /* 記事リストと同じ基準幅で左端を揃える */
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.news-filter__link {
  display: inline-flex;
  align-items: center;
  padding: 5px 14px;
  border-radius: 999px;
  background-color: var(--cat-color, var(--color-accent));
  color: #fff;
  font-weight: 700;
  font-size: 1rem;               /* フィルターピルを一回り大きく（0.8→1rem） */
  letter-spacing: 0.06em;
  line-height: 1.3;
  text-decoration: none;
  transition: opacity 0.2s ease;
}
.news-filter__link:hover {
  opacity: 0.8;
  color: #fff;
}
/* 「全て」（絞り込み解除）：白塗り・オレンジ枠・オレンジ文字（塗りピルと差別化）。
   border 1px 分だけ縦 padding を 5→4px にして他ピルと外形の高さを揃える */
.news-filter__item--all .news-filter__link {
  background-color: #fff;
  color: var(--color-accent);
  border: 1px solid var(--color-accent);
  padding: 4px 14px;
}
.news-filter__item--all .news-filter__link:hover {
  color: var(--color-accent);
}

/* カテゴリ別の塗り色（親カテゴリ＝メニューの色体系に準拠） */
.news-filter__item--general  .news-filter__link { --cat-color: var(--color-accent); }
.news-filter__item--home     .news-filter__link { --cat-color: var(--service-home); }
.news-filter__item--facility .news-filter__link { --cat-color: var(--service-facility); }
.news-filter__item--daycare  .news-filter__link { --cat-color: var(--service-daycare); }
.news-filter__item--other    .news-filter__link { --cat-color: var(--service-other); }
.news-filter__item--vacancy  .news-filter__link { --cat-color: var(--vacancy); }

/* ----- ページネーション（< 1 / 10 >） ----- */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  margin: 44px 0 0;
}
.pagination__status {
  font-family: "Zalando Sans", sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.14em;
  color: var(--color-text);
}
.pagination__sep {
  margin: 0 0.3em;
}
.pagination__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  transition: opacity 0.2s ease;
}
.pagination__arrow:hover {
  opacity: 0.6;
}
.pagination__chevron {
  display: block;
  width: 11px;
  height: 11px;
  border-top: 2px solid var(--color-text);
  border-right: 2px solid var(--color-text);
}
.pagination__chevron--prev { transform: rotate(-135deg); margin-left: 4px; }
.pagination__chevron--next { transform: rotate(45deg);  margin-right: 4px; }
/* 端ページ（前/次が無い）は薄く無効化 */
.pagination__arrow[aria-disabled="true"] {
  opacity: 0.3;
  pointer-events: none;
}

/* ===========================================================
 * 記事シングル（お知らせ／トピックス）
 *   service-detail の骨格内に置く。本文(.article__body)は
 *   WPエディタ出力の素タグ（p / h2 / ul）を想定してスタイルする。
 * =========================================================== */
.article {
  max-width: 780px;
  margin: 0 auto;
}
/* 日付＋カテゴリ（複数可）。news の見た目を流用しつつ折り返し可に */
.article__meta {
  display: flex;
  align-items: flex-start;     /* 日付は1行目のカテゴリと上端で揃える */
  gap: 6px 18px;
  margin: 0 0 12px;
}
.article__meta .news__date {
  flex-shrink: 0;
  line-height: 1.6;            /* カテゴリ1行目と高さを合わせる */
}
/* カテゴリ列：複数ある場合は縦に積んで日付と2カラムにする */
.article__cats {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.article__title {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--color-text);
}
/* タイトル下の区切り線（実線） */
.article__rule {
  margin: 20px 0 28px;
  border: 0;
  border-top: 2px solid #000;
}
/* アイキャッチ（トピックス本文先頭の写真） */
.article__figure {
  margin: 0 0 28px;
  border-radius: 12px;
  overflow: hidden;
}
.article__figure img {
  display: block;
  width: 100%;
  height: auto;
}
/* 本文 */
.article__body {
  color: var(--color-text);
  font-size: 0.95rem;
  line-height: 1.95;
}
.article__body > :first-child { margin-top: 0; }
.article__body p { margin: 0 0 1.7em; }
.article__body h2 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 2em 0 0.7em;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-text);
}
.article__body h2::before {           /* ■ 角マーカー */
  content: "";
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  background-color: var(--color-text);
}
.article__body ul {
  margin: 0 0 1.7em;
  padding: 0;
  list-style: none;
}
.article__body ul li {
  position: relative;
  padding-left: 1.3em;
}
.article__body ul li::before {        /* ・ マーカー */
  content: "・";
  position: absolute;
  left: 0;
}
.article__body .article__note {
  font-size: 0.9rem;
}
/* 点線区切り（本文と問い合わせ先の間など） */
.article__rule--dotted {
  border: 0;
  height: 2px;
  margin: 30px 0;
  background-image: radial-gradient(circle, var(--color-text) 0.7px, transparent 1.1px);
  background-size: 4px 2px;
  background-repeat: repeat-x;
  background-position: center;
}
/* 本文末の小ブロック（お問い合わせ先など） */
.article__contact {
  font-size: 0.95rem;
  line-height: 1.9;
  color: var(--color-text);
}
.article__contact-title {
  margin: 0 0 4px;
  font-weight: 700;
}
/* 一覧へ戻るボタン */
.article__action {
  text-align: center;
  margin: 44px 0 0;
}

/* ---------------------------------------------------------
 * Scroll-in アニメーション（フェード＋下からの上昇）
 * .js-fadeup-item を初期状態（透明＋下にオフセット）にしておき、
 * 親に .is-visible が付いたら表示する。
 * 子要素を順に少し遅らせてスタッガー表示する。
 * --------------------------------------------------------- */
.js-fadeup-item {
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity 0.9s ease-out,
    transform 0.9s ease-out;
  will-change: opacity, transform;
}

.js-fadeup.is-visible .js-fadeup-item {
  opacity: 1;
  transform: translateY(0);
}

/* スタッガー（順に少しずつ遅らせて出す） */
.js-fadeup.is-visible .js-fadeup-item:nth-child(1) { transition-delay: 0s; }
.js-fadeup.is-visible .js-fadeup-item:nth-child(2) { transition-delay: 0.15s; }
.js-fadeup.is-visible .js-fadeup-item:nth-child(3) { transition-delay: 0.3s; }
.js-fadeup.is-visible .js-fadeup-item:nth-child(4) { transition-delay: 0.45s; }
.js-fadeup.is-visible .js-fadeup-item:nth-child(5) { transition-delay: 0.6s; }
.js-fadeup.is-visible .js-fadeup-item:nth-child(6) { transition-delay: 0.75s; }

/* モーション低減設定をしているユーザーには動きを無効化 */
@media (prefers-reduced-motion: reduce) {
  .js-fadeup-item {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------------------------------------------------------
 * Button（共通：アウトライン丸型）
 * --------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 5px 24px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.btn--outline {
  background-color: transparent;
  border: 1.5px solid var(--color-accent);
  color: var(--color-accent);
}

/* オレンジ塗り：トピックス一覧などの CTA で使用 */
.btn--solid {
  background-color: var(--color-accent);
  /* デフォルトはボーダー非表示。ホバー時にオレンジへ変化させても
     ボタンの寸法が変わらないよう、同色の透明ボーダーを敷いておく */
  border: 1.5px solid transparent;
  color: #fff;
  padding: 8px 28px;                         /* 塗りボタンは少し縦余白を増やす */
}

.btn--solid .btn__chevron {
  background-image: url('../image/SVG/arrow-right-white.svg');
}

.btn__chevron {
  display: block;
  width: 8px;
  height: 12px; /* SVG viewBox 7.26×10.83 の比率に合わせて固定 */
  flex-shrink: 0;
  background: url('../image/SVG/arrow-right-orange.svg') center / contain no-repeat;
}

/* PC（マウスオーバー対応デバイス）のホバー：
   背景をアクセント色で塗りつぶし、文字を白、シェブロンを白版に切替 */
@media (hover: hover) {
  .btn--outline:hover {
    background-color: var(--color-accent);
    color: #fff;
    opacity: 1; /* 全体 a:hover の opacity:0.7 を上書き */
  }
  .btn--outline:hover .btn__chevron {
    background-image: url('../image/SVG/arrow-right-white.svg');
  }
  /* 塗りボタンのホバー：背景白／オレンジボーダー／文字とシェブロンをオレンジへ反転
     （アウトラインボタンとちょうど逆の遷移） */
  .btn--solid:hover {
    background-color: #fff;
    border-color: var(--color-accent);
    color: var(--color-accent);
    opacity: 1;                              /* 全体 a:hover の opacity:0.7 を上書き */
  }
  .btn--solid:hover .btn__chevron {
    background-image: url('../image/SVG/arrow-right-orange.svg');
  }
}

/* ---------------------------------------------------------
 * Footer
 *  - 上段：グレー背景（会社情報＋ナビ＋認証）／上端に hero と同じ円形カットSVG
 *  - 下段：ブラウン背景（関連リンク＋法的リンク＋コピーライト）
 * --------------------------------------------------------- */
/* ---------------------------------------------------------
 * Menu Navigation（MENU ボタンクリックで全画面オーバーレイ）
 *   - ヘッダー (.site-header) は z-index:1000 で常に上に乗る
 *   - .menu-nav は z-index:900 でヘッダーの直下に展開
 *   - body.is-menu-open で表示／scroll lock を制御
 * --------------------------------------------------------- */
.menu-nav {
  position: fixed;
  inset: 0;
  z-index: 900;
  background-color: var(--color-bg);
  /* 固定ヘッダー (logo 20px + padding 19+16 = 55px) の高さ分を確保 */
  padding: 76px 0 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}

body.is-menu-open .menu-nav {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.25s ease, visibility 0s linear 0s;
}

/* 開いている間は背景のスクロールを止める。
   overflow:hidden だとスクロールバーが消えてビューポート幅が変わり
   ガタつくため、position:fixed 方式で固定する（html の overflow-y:scroll で
   スクロールバー＝ガターは常時確保されるので幅は変わらない）。
   top は JS で -scrollY を指定し、閉じたら元のスクロール位置へ戻す。 */
body.is-menu-open {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
}

.menu-nav__inner {
  max-width: 480px;
  margin: 0 auto;
  /* 下padding は .menu-nav__bottom 側で持つため 0 にして
     グレーブロックが最下部まで途切れなく伸びるようにする */
  padding: 8px 18px 0;
}

/* ---- 上部リンク（会社概要／トピックス／お知らせ） ---- */
.menu-nav__top-links {
  list-style: none;
  margin: 0 0 24px;
  padding: 4px 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 10px;
}

.menu-nav__top-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-text);
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
}

/* HOME 項目は PC 版のみ表示（SP／タブレットでは非表示） */
.menu-nav__top-item--home {
  display: none;
}

/* 丸囲みシェブロン（円＋白矢印）
   - 上部リンク（会社概要等）はオレンジ
   - 各カテゴリ内のアイテムはカテゴリ色（--menu-color）で塗る */
.menu-nav__chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  background-color: var(--color-accent);
  border-radius: 50%;
  flex-shrink: 0;
}

.menu-nav__chevron img {
  display: block;
  width: 5px;
  height: auto;
}

/* カテゴリ内アイテムのシェブロンはカテゴリ色を使用 */
.menu-nav__group .menu-nav__chevron {
  background-color: var(--menu-color);
}

/* ---- カテゴリ別グループ ----
   カンプに合わせ、カテゴリ見出しは単独の角丸ピル、
   アイテムリストはメニュー白背景上にそのまま並べる（リストの背景塗りはなし） */
.menu-nav__group {
  --menu-color: var(--service-home);
  margin: 0 0 14px;
}

.menu-nav__group--home     { --menu-color: var(--service-home); }
.menu-nav__group--facility { --menu-color: var(--service-facility); }
.menu-nav__group--daycare  { --menu-color: var(--service-daycare); }
.menu-nav__group--other    { --menu-color: var(--service-other); }

/* カテゴリ見出し（横100％の帯状・角丸なし） */
.menu-nav__group-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px;
  /* .menu-nav__inner の左右パディング 18px を相殺して画面端まで帯を伸ばす */
  margin: 0 -18px;
  background-color: var(--menu-color);
  color: #fff;
}

.menu-nav__group-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.menu-nav__group-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.menu-nav__group-name {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #fff;
}

/* カテゴリ内項目リスト：背景塗りなし、メニュー白背景の上にそのまま並べる */
.menu-nav__group-list {
  list-style: none;
  margin: 6px 0 0;
  padding: 0 8px;                            /* 見出しよりやや内側にインデント */
}

.menu-nav__group-list > li + li {
  margin-top: 2px;
}

.menu-nav__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 4px;
  color: var(--color-text);
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  line-height: 1.5;
}

/* カッコ書きの補足部分（例：（特定技能）／（共同生活援助）など）
   メイン名称より一回り小さく表示し、視覚的な優先順位を下げる */
.menu-nav__item-sub {
  font-size: 0.85em;
}

/* ---- 下部ブロック（CTA＋代表電話）：背景グレーで一塊 ----
   .menu-nav__inner の左右パディング 18px を相殺して画面端まで塗り、
   ブロック内側でコンテンツ用のパディングを取り直す */
.menu-nav__bottom {
  margin: 28px -18px 0;
  padding: 26px 18px 32px;
  background-color: var(--color-bg-gray);
}

/* ---- CTA：採用情報／お問合せ（横並び） ---- */
.menu-nav__ctas {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0 0 24px;
  padding: 0;
}

.menu-nav__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px;
  background-color: #fff;
  border: 2px solid var(--color-accent);
  border-radius: 14px;
  color: var(--color-accent);
  font-weight: 700;
  font-size: 1.17rem;
  text-decoration: none;
  letter-spacing: 0.08em;
  transition: opacity 0.2s ease;
}

/* hover：グローバル a:hover の color: var(--color-text) を打ち消し、
   文字色はオレンジ（アクセント色）のまま保つ。半透明フェードは継承 */
.menu-nav__cta:hover {
  color: var(--color-accent);
}

.menu-nav__cta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  flex-shrink: 0;
}

.menu-nav__cta-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ---- 代表電話ブロック ----
   オレンジ塗りボタン（.menu-nav__tel）と注記（.menu-nav__phone-note）の
   2つを縦に並べたラッパー。ボタン本体のスタイルは
   .site-footer__tel と共通で定義済み（上記） */
.menu-nav__phone {
  text-align: center;
}

.menu-nav__phone-note,
.site-footer__phone-note {
  margin: 10px 0 0;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-text);
}

/* フッター側はメニューと異なり中央揃えにし、住所との間に余白を確保 */
.site-footer__phone-note {
  margin: 10px 0 32px;
  text-align: center;
}

/* 注記内の「施設ページ」リンク：オレンジ丸シェブロン＋下線付き
   下線はシェブロン下にも伸ばす（リンク全体に border-bottom） */
.menu-nav__phone-note-link,
.site-footer__phone-note-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--color-text);
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  /* インライン文中で違和感なく並ぶようテキストとベースラインを合わせる */
  vertical-align: middle;
  /* 注記の前後にもわずかな余白を確保 */
  margin: 0 2px;
}

/* 注記内のシェブロン：丸はそのまま、矢印イメージのみ小さく */
.menu-nav__phone-note .menu-nav__chevron,
.site-footer__phone-note .menu-nav__chevron {
  width: 14px;
  height: 14px;
}

.menu-nav__phone-note .menu-nav__chevron img,
.site-footer__phone-note .menu-nav__chevron img {
  width: 4px;
}

/* .site-footer 自体には背景を付けない：
   上端SVGの曲線外（角の透明部分）から直前セクションの白を透過させたいため。
   ブラウンは .site-footer__bottom にのみ適用する。 */

/* 上端の円形カット（footer-bg.svg：viewBox 375 × 72.8） */
.site-footer__curve {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: -1px;                       /* サブピクセル隙間防止 */
}

/* ---- 上段：グレー背景 ---- */
.site-footer__top {
  background-color: var(--color-bg-gray);
  padding: 8px 16px 40px;
}

.site-footer__inner {
  max-width: 480px;
  margin: 0 auto;
}

/* ロゴ */
.site-footer__brand {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 12px 0 22px;
}

.site-footer__brand-logo {
  display: block;
  height: 35px;
  width: auto;
}

/* TEL（代表電話）ブロック：フッター／メニューで共通使用するオレンジ塗りボタン
   ブロック全体を <a href="tel:..."> にしているため、グローバル a の
   transition / a:hover の opacity が自然に効き、hover で
   「オレンジ枠ごと半透明」になる挙動が得られる */
.site-footer__tel,
.menu-nav__tel {
  display: block;
  background-color: var(--color-accent);
  border-radius: 18px;
  /* 受付時間の行を削除。番号1行を枠の上下中央に配置しつつ、枠の高さは従来のまま維持する。
     旧＝padding 8/10 + 受付時間(0.85rem×行高1.15) + その上マージン2px。この非番号分の縦量
     (20px + 0.9775rem) を上下均等に振り分け＝上下とも calc(10px + 0.489rem)。番号のvw可変は
     旧新で共通のため相殺され、どの幅でも高さが変わらない。 */
  padding: calc(10px + 0.489rem) 20px;
  text-align: center;
  color: #fff;
  /* 内部要素の行高をデフォルトの 1.75 から詰めて行間を最小化 */
  line-height: 1.15;
}

/* 各文脈での外側マージン */
.site-footer__tel { margin: 0 0 24px; }
.menu-nav__tel    { margin: 0; }

/* hover：グローバル a:hover の color: var(--color-text) を打ち消し、文字色は白を維持。
   opacity 0.7 はグローバル a:hover をそのまま継承し、枠全体が半透明になる */
.site-footer__tel:hover,
.menu-nav__tel:hover {
  color: #fff;
}

.site-footer__tel-main,
.menu-nav__tel-main {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0;
  white-space: nowrap;                       /* 行内で折り返さない */
}

.site-footer__tel-label,
.menu-nav__tel-label {
  /* label / number 双方を従来比 85% にして「一回り小さく」した状態。
     ラベルと番号の相対比率（1 : 1.6〜2.0）は維持している。 */
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.site-footer__tel-number,
.menu-nav__tel-number {
  /* 電話番号は数字＋ハイフンのみ。Zalando Sans の Black(900) で
     周辺テキストよりも一段強調する。
     viewport が狭い時は clamp() でサイズを縮め、1行に収まり続けるようにする。
     上記 label と同じ 0.85 倍に縮小（元: 1.6 / 7.6vw / 2）。 */
  font-size: clamp(1.36rem, 6.46vw, 1.7rem);
  font-weight: 900;
  color: #fff;
  letter-spacing: 0.04em;
  text-decoration: none;
}

/* 受付時間（.tel-hours）は表記削除により廃止。番号を枠中央に配置（padding で高さ維持）。 */

/* 住所 */
.site-footer__address {
  font-style: normal;
  color: var(--color-text);
  margin: 0 0 28px;
  line-height: 1.7;
}

.site-footer__address p {
  margin: 0;
}

.site-footer__address-zip {
  font-size: 1.05rem;
  font-weight: 700;
}

.site-footer__address-place {
  font-size: 1.3rem;                         /* 住所行は郵便番号／FAX より一段大きく */
  font-weight: 700;
}

.site-footer__address-fax {
  font-size: 1.05rem;
  font-weight: 700;
}

/* ナビゲーション（2列 × 4行）／各項目の下に点線
   左列に長文ラベル（施設をお探しの方 など）、右列に短いラベルが並ぶため
   カンプに合わせて左を広め、右を狭めに振る */
.site-footer__nav-list {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  column-gap: 18px;
}

.site-footer__nav-list > li {
  /* 各項目の下端に細かい点線（news セクションと同じ手法）
     左右に少しパディングを入れることで、点線が
     シェブロン／テキストの端より外側まで伸びて見えるようにする */
  padding: 11px 10px;
  background-image:
    radial-gradient(circle, var(--color-text) 0.7px, transparent 1.1px);
  background-size: 4px 2px;
  background-repeat: repeat-x;
  background-position: bottom center;
}

.site-footer__nav-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-text);
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
}

/* 小型の丸シェブロン（オレンジ円＋白矢印） */
.site-footer__nav-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  background-color: var(--color-accent);
  border-radius: 50%;
  flex-shrink: 0;
}

.site-footer__nav-chevron img {
  display: block;
  width: 4.5px;
  height: auto;
}

/* 加盟団体テキスト */
.site-footer__memberships {
  margin: 0 0 22px;
  text-align: center;
  color: var(--color-text);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.9;
}

/* 認証バナー（やまがたスマイル企業 GOLD / やまがた健康企業宣言）
   カンプに合わせ左寄せ */
.site-footer__certs {
  list-style: none;
  display: flex;
  justify-content: flex-start;
  gap: 14px;
  margin: 0;
  padding: 0;
}

.site-footer__certs img {
  display: block;
  width: 92px;
  height: auto;
  border-radius: 12px;
}

/* 認証バナー（アイコン）と「公益社団法人〜」加盟団体テキストが近すぎるため間隔を空ける。
   両者は隣接する兄弟要素（テーマは certs→memberships、HTMLプロトタイプは逆順）なので、
   どちらの並び順でも「後に来る側」に上マージンを付けて確実に離す。
   ≥769px は右カラムのグリッド（grid-area certs/memb＋memberships の margin-top）で
   間隔を付けるため、ここは 768px 以下（SP の積み上げレイアウト）のみを対象にする。 */
@media (max-width: 768px) {
  .site-footer__certs + .site-footer__memberships,
  .site-footer__memberships + .site-footer__certs {
    margin-top: 24px;
  }
}

/* ---- 下段：ブラウン背景 ---- */
.site-footer__bottom {
  background-color: var(--color-footer);
  /* 下段の文字色は CLAUDE.md の指定：グレー背景と同一色 */
  color: var(--color-bg-gray);
  padding: 60px 16px 28px;
}

.site-footer__bottom a {
  color: var(--color-bg-gray);
  text-decoration: none;
}

/* 関連リンクボタン（白カード型） */
.site-footer__links {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: grid;
  gap: 12px;
}

/* 親の .site-footer__bottom a の specificity (0,1,1) を上回るため、
   親クラスと複合して specificity (0,2,0) で本文色を適用する */
.site-footer__bottom .site-footer__link-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  background-color: #fff;
  color: var(--color-text);
  border-radius: 12px;
  padding: 12px 18px;
  font-weight: 700;
  font-size: 0.9rem;
  line-height: 1.45;
  min-height: 68px;
  transition: opacity 0.2s ease;
}

.site-footer__link-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
}

.site-footer__link-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.site-footer__link-text {
  flex: 1;
}

/* 各ボタンの個別サイズ調整
   ・association（地域包括…）：本文が長く2行になるため一段小さく
   ・LINE：本文が短いため一段大きく */
.site-footer__bottom .site-footer__link-btn--assoc {
  font-size: 0.8rem;
}

.site-footer__bottom .site-footer__link-btn--line {
  font-size: 1rem;
}

/* 法的リンク */
.site-footer__legal {
  margin: 0 0 18px;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 700;
}

.site-footer__legal-sep {
  margin: 0 10px;
}

.site-footer__copyright {
  margin: 0;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.2em;
}

/* ---------------------------------------------------------
 * Responsive (Bootstrap 5 breakpoints)
 *   - SP       : ~767px
 *   - Tablet   : 768px ~ 1199px
 *   - PC       : 1200px ~
 * --------------------------------------------------------- */

/* SP 狭幅（〜409px）
 *   サービスのアコーディオン見出しは「自費・その他サービス」のような長文ラベルが
 *   既定サイズだと収まらず折り返されるため、全カテゴリ共通でアイコンと
 *   ヘッダー文字を一段縮小して 1 行に収まるようにする */
@media (max-width: 409px) {
  .service-group__header {
    min-height: 64px;
    /* 左右の比は維持しつつ全体を圧縮（左:右 ≒ 1.6:1 → 視覚的中央寄せの効果も保つ） */
    padding: 18px 50px 18px 80px;
    font-size: 1rem;
    letter-spacing: 0.04em;
  }
  .service-group__icon {
    left: 16px;
    width: 48px;
    height: 48px;
  }
}

/* SP 超狭幅（〜359px）
 *   案内ハブ（在宅・その他サービス）の見出し帯は「自費・その他サービス」が
 *   基準サイズ(375px)だと1行に収まらなくなるため、この幅から一段縮小する。
 *   ※ 基準幅 375px ではカンプ通りの寸法（帯66px / 1.25rem）を維持すること */
@media (max-width: 359px) {
  .hub-group__header {
    min-height: 60px;
    padding: 10px 18px 10px 44px;
    font-size: 1.1rem;
    letter-spacing: 0.06em;
  }
  .hub-group__icon {
    left: 16px;
    width: 46px;
    height: 46px;
  }
}

/* SP（〜768px）：小見出し(sub-title)配下のコンテンツを 1 段階内側へ寄せる。
   PC（≥769px）では max-width 720（見出し780より内側）で同じ階層差を付けているが、
   SP でも左右に少しインセットして「見出し＞内容物」の段差を揃える（全ページ共通）。
   ※ section-title 直下のコンテンツは対象外（小見出しを挟まないため一致しない）
   ※ facility-list（施設一覧 MAP カード）は対象外＝小見出しと同幅のまま */
@media (max-width: 768px) {
  .service-detail__sub-title ~ .service-detail__flow,
  .service-detail__sub-title ~ .service-detail__eligible,
  .service-detail__sub-title ~ .service-detail__items,
  .service-detail__sub-title ~ .service-detail__text,
  .service-detail__sub-title ~ .service-detail__area-group,
  .service-detail__sub-title ~ .service-detail__sub-card-list,
  .service-detail__sub-title ~ .service-detail__sub-card,
  .service-detail__sub-title ~ .service-detail__stack-items,
  .service-detail__sub-title ~ .service-detail__service-cards,
  .service-detail__sub-title ~ .service-detail__staff,
  .service-detail__sub-title ~ .service-detail__link-btns,
  .service-detail__sub-title ~ .service-detail__schedule {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* schedule の縦線 ::before は ul のパディングボックス基準（left:7px）で描かれるため、
     上の inset で padding-left:16px が付くと、中身の●ドット（項目基準・16px右へ寄る）に
     対して縦線だけ取り残されて左にズレる。縦線も同量右へ寄せてドット中心を貫かせる。
     ※ flow は線を項目側(::after)に持つのでこの影響を受けない＝schedule 固有の補正 */
  .service-detail__sub-title ~ .service-detail__schedule::before {
    left: 23px;   /* 既定 7px + inset padding-left 16px */
  }
}

/* Tablet 以上 */
@media (min-width: 768px) {
  /* Message Slider：タブレットも service-detail スライダーと幅を統一（SP と同値） */
  .message-slider__item {
    width: 220px;
    margin-right: 20px;
  }
}

/* =========================================================
 * PC レイアウト（769px 以上）
 *   - ブレークポイントは 769px（768px 以下は SP 固定）
 *   - コンテナ最大幅 1400px・中央寄せ
 *   - 文字サイズ：1200px で 18px を基準とし、769〜1199px は
 *     ブラウザ幅に応じて 16〜18px へ流体スケール（rem ベースの
 *     バランスを保ったまま全体が縮小）。≥1200px と ≤768px は固定。
 *   - ヒーロー／フッターの円形カットSVGは廃止し、
 *     セクションをまっすぐ切る
 *   - SPで縦並びだった要素はバランスを見て横並びに
 * ========================================================= */
@media (min-width: 769px) {

  /* ---- 全体：基準フォントサイズ（3段階） ----
     旧実装は 769→1200px で clamp による vw 連続スケールだったが、root font-size が動くと
     ページ上の全 rem 要素が毎pxリレイアウトし、769〜1199px のリサイズが極端に重くなっていた。
     → 3段階の固定値に変更（帯内は再計算ゼロで軽快。992px / 1200px で一段だけ切替）。
       769–991=16.5px（下の 992px / 1200px メディアクエリで 17.5 / 18 に上書き）
       ≥1200=18px は旧 clamp の上限と同値のため、1200px 以上の見た目は従来と不変。
     ※ 各値は旧 clamp を各帯の代表幅(880 / 1096px)で評価したもの。 */
  html {
    font-size: 16.5px;
  }

  /* ---- ヘッダー：ロゴ／MENUボタンを少し大きく ---- */
  .site-header__logo {
    padding: 26px 32px 22px;
  }
  .site-header__logo img {
    height: 26px;
  }
  .site-header__menu {
    width: 72px;
    height: 72px;
    border-radius: 0 0 0 20px;
  }

  /* =======================================================
   * Hero（PC）：円形カット廃止 → 全幅グレーの長方形セクション
   *   左に縦書きキャッチ＋メイン写真、右に写真2枚を横並び、
   *   下段に4ボタンメニューを1列で配置
   * ======================================================= */
  .hero {
    background-color: var(--color-bg-gray);
  }
  /* 下部の円形カットSVGは非表示 */
  .hero__curve {
    display: none;
  }
  .hero__inner {
    max-width: none;                 /* カンプは全幅基準で配置するため幅制限なし */
    margin: 0 auto;
    padding: 100px 0 64px;
    background-color: transparent;   /* 背景は親 .hero 側で全幅グレー */
    overflow: visible;
    display: block;                  /* コラージュ → メニューの順に縦積み */
  }

  /* ----- コラージュ枠 -----
     カンプの配置領域（A左端〜コピー右端／コピー上端〜C下端）の
     バウンディングボックス比 1515 : 1135 を保ったまま縮尺し、
     子要素（A・B・C・コピー）を % で絶対配置する。
     カンプ基準（全幅2000）で 左マージン14.25%・幅75.75%（右マージン約10%）。
     aspect-ratio で高さが決まるため、下のメニューはこの枠の下に流れる。 */
  .hero__collage {
    position: relative;
    width: 75.75%;
    max-width: 1515px;
    margin-left: 14.25%;
    aspect-ratio: 1515 / 1135;
  }
  /* hero__top のラッパを配置計算から外し、A とコピーを collage 基準で直接配置する */
  .hero__top {
    display: contents;
  }

  .hero__photo {
    position: absolute;
    margin: 0;
    border-radius: clamp(12px, 1.4vw, 22px);
  }
  /* A：大・左、縦長 3:4 */
  .hero__photo--a {
    left: 0;
    top: 1.3%;
    width: 46.5%;
    aspect-ratio: 3 / 4;
  }
  /* B：中・中央、縦長 3:4 */
  .hero__photo--b {
    left: 52.8%;
    top: 24.7%;
    width: 25.4%;
    aspect-ratio: 3 / 4;
  }
  /* C：横長、右下（B の下・少し右に重なる位置） */
  .hero__photo--c {
    left: 70.6%;
    top: 75.8%;
    width: 24.75%;
    aspect-ratio: 17 / 12;
    z-index: 1;
  }

  /* 縦書きキャッチコピー：コラージュ右上に絶対配置 */
  .hero__copy {
    position: absolute;
    top: 0;
    right: 0;
    order: 0;
    margin: 0;
    padding: 0;
    flex-direction: row-reverse;
    align-items: flex-start;
    gap: clamp(8px, 0.9vw, 14px);
  }
  .hero__copy-line {
    font-size: clamp(1.7rem, 3vw, 3.3rem);
    /* 文字を白パネルの中央に揃える（縦書きグリフの右寄り傾向を相殺）。
       右パディングを厚くするほど文字は左へ動く: 右0.26 / 左0.06 */
    padding: 0.5em 0.26em 0.5em 0.06em;
    line-height: 1.55;
    letter-spacing: 0.08em;
  }

  /* メニュー：4ボタンを横一列に（コラージュ枠の下） */
  .hero-menu {
    margin: clamp(32px, 4vw, 64px) auto 0;
    padding: 0;
    max-width: 1040px;
  }
  .hero-menu__list {
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(10px, 1.67vw, 20px);
  }
  /* アイコン径・余白・文字を幅に応じて可変にし、769px 付近では縮めて
     各ボタンの文字（<br>で2行）がそれ以上折り返さないようにする。
     ---
     比率基準は SP(≈425px) のボタン：幅191.5 / icon48 / text0.95rem / pad6 / gap8。
     PC はメニュー幅が 1040px で頭打ち＝ボタン幅約245px（SPの約1.28倍）になるため、
     アイコン・文字も同じ1.28倍（icon62 / text1.2rem / pad8 / gap13）まで拡大して
     SP と同じ余白比を保つ。vw係数はメニュー幅が最大化する
     1040px 付近で各上限に達するよう設定（769px 側は SP とほぼ同寸法）。 */
  .hero-menu__link {
    padding: clamp(11px, 1.5vw, 16px);
    gap: clamp(9px, 1.24vw, 13px);
    border-radius: 16px;
    /* 内容物は左詰め（flex-start）のままにして各ボタンのアイコン左端を揃える。
       ただし左paddingだけ厚くして内容物を右へ寄せ、内容物が最も広い
       「在宅・その他サービス」がほぼ中央に見える位置にする。
       テキストが短い他ボタンは内容物が中央より左寄りになるが、アイコン位置は揃う。 */
    padding-left: clamp(16px, 2.1vw, 22px);
  }
  /* 「在宅・その他サービス」だけ内容物が最も広く中央寄りに見えるため、
     この1ボタンのみ左paddingを削って他ボタンと見た目のバランスを揃える */
  .hero-menu__link--service {
    padding-left: clamp(15px, 2vw, 21px);
  }
  .hero-menu__icon {
    width: clamp(42px, 5.9vw, 62px);
    height: clamp(42px, 5.9vw, 62px);
  }
  .hero-menu__text {
    font-size: clamp(0.9rem, 1.9vw, 1.2rem);
    white-space: nowrap;          /* <br>の2行は維持しつつ、各行の二次折り返しを防止 */
  }

  /* =======================================================
   * Message（PC）：見出し＋CTAを左、本文を右の2カラム
   * ======================================================= */
  .message {
    padding: 80px 0 96px;
  }
  .message__inner {
    max-width: 1120px;
    padding: 0 40px;
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    grid-template-areas:
      "heading body"
      "action  body";
    column-gap: 72px;
    row-gap: 28px;
    align-items: start;
  }
  .message__heading {
    grid-area: heading;
    text-align: left;
    margin: 0;
    /* 幅に応じて可変。769px 付近では縮めて、<br>で区切った各行
       （「つながりの中に」「安心が生まれる」）が二次折り返ししないようにする。
       1200px で現状の 2.6rem に到達し以上は固定 */
    font-size: clamp(1.6rem, 3.9vw, 2.6rem);
    line-height: 1.4;
    white-space: nowrap;
  }
  .message__body {
    grid-area: body;
    font-size: 1rem;
    line-height: 2;
    letter-spacing: 0;
  }
  .message__action {
    grid-area: action;
    /* 右カラム（body）が最も背が高くグリッド高を決めるので、
       ボタンは自セル下端＝右カラムの下端に揃える。
       そこから本文1行分ほど持ち上げ、ボタン下端が本文最終行の上端と揃う位置にする
       （body の line-height:2 × font-size:1rem ≒ 2rem） */
    align-self: end;
    text-align: left;
    margin: 0 0 1.6rem;
  }

  /* Message Slider：PC も service-detail スライダーと幅を統一（320/32） */
  .message-slider {
    margin-top: 64px;
  }
  .message-slider__item {
    width: 320px;
    margin-right: 32px;
  }

  /* =======================================================
   * Service（PC）：4カテゴリのアコーディオンを 2 列に。
   *   - 最大1400px幅まで広げ、比率を保ったまま全体を拡大
   *   - デフォルトで開いた状態に固定し、開閉操作を無効化
   * ======================================================= */
  .service {
    max-width: 1120px;
    margin: 0 auto;
    padding: 96px 40px 104px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 32px;
  }
  .service__header {
    flex: 1 0 100%;
    margin: 0 0 20px;
  }
  .service__title {
    font-size: 2.1rem;
  }
  .service__title-en {
    font-size: 0.95rem;
  }
  .service-group {
    flex: 0 1 calc(50% - 16px);
    max-width: none;
    margin: 0;
    /* stretch にして同じ行のカード同士を同じ高さに揃える
       （下段：通所[ボタン1つ] と 自費・その他[ボタン4つ] の薄色コンテナ高さを合わせる）。
       余った高さはカード下部の薄色背景で埋まり、ボタンは上揃えのまま */
    align-self: stretch;
    border-radius: 22px;
  }
  .service-group + .service-group {
    margin-top: 0;
  }

  /* --- デフォルト展開・開閉無効 --- */
  .service-group__panel {
    max-height: none;          /* 常に開いた状態 */
  }
  .service-group__header {
    pointer-events: none;      /* クリックで閉じられないように */
    cursor: default;
  }
  .service-group__chevron {
    display: none;             /* 開閉インジケータは不要なので非表示 */
  }

  /* --- 各部のサイズを比率維持のまま約1.25倍に拡大 ---
     アイコン径・左右padding は clamp で幅に応じて可変にし、769px 付近では
     縮めて見出しテキストの幅を確保（在宅/施設/通所が1行に収まる）。
     1200px で現状値に到達し、それ以上は固定（vw 係数 = 目標値 ÷ 1200px） */
  .service-group__header {
    min-height: 92px;
    padding: 28px clamp(36px, 6.33vw, 76px) 28px clamp(78px, 10.5vw, 126px);
    font-size: clamp(1.15rem, 2.3vw, 1.4rem);
  }
  .service-group__icon {
    left: clamp(16px, 2.17vw, 26px);
    width: clamp(50px, 6.33vw, 76px);
    height: clamp(50px, 6.33vw, 76px);
  }
  .service-group__list {
    padding: 20px 18px 26px;
  }
  .service-group__item + .service-group__item {
    margin-top: 13px;
  }
  .service-link {
    min-height: 64px;
    /* 左右の余白を控えめに（チェブロン分の左余白は確保）。左paddingも幅に応じて可変 */
    padding: 10px clamp(14px, 1.5vw, 20px) 10px clamp(38px, 4.17vw, 50px);
    font-size: clamp(0.8rem, 1.55vw, 0.9rem);
    line-height: 1.4;
    border-radius: 15px;
    /* 狭い幅では1行に収まらないラベルは折り返す（はみ出し防止）。
       1200px 以上のカード幅では大半が1行に収まる */
    white-space: normal;
  }
  /* SP 用の <br> は PC では非表示。各ラベルは <br> 区切りのパーツを
     .service-link__seg（折り返し禁止・基底で定義）で囲んでおり、PC ではパーツが
     1行に収まらない時だけ「パーツの境目＝<br> と同じ位置」で改行する
     （各パーツは nowrap なので語中では折れず・最大2行）。改行位置は常に SP と一致する。 */
  .service-link__label br {
    display: none;
  }
  .service-link__chevron {
    left: 16px;
    width: 22px;
    height: 22px;
  }
  .service-link__chevron img {
    width: 6px;
  }

  /* =======================================================
   * Topics（PC）：カルーセル → 3 列グリッドの一覧に
   *   （JS はインラインで transform を更新するため !important で固定）
   * ======================================================= */
  .topics {
    padding: 96px 40px 104px;
  }
  .topics__title {
    font-size: 2.1rem;
  }
  .topics__title-en {
    font-size: 0.95rem;
  }
  .topics-slider {
    /* フッター内容幅(.site-footer__inner = 1200px)に左右端を合わせる
       （.topics も footer__top と同じく左右 padding 40px のため一致する） */
    max-width: 1200px;
  }
  .topics-slider__viewport {
    overflow: visible;
    border-radius: 0;
  }
  .topics-slider__track {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;   /* カード数が3未満でも中央揃え */
    gap: 28px;
    transform: none !important;
    transition: none;
  }
  .topics-slider__item {
    /* 3列分の幅（gap 28px×2 を差し引いた 1/3）。3未満なら中央に寄る */
    flex: 0 1 calc((100% - 56px) / 3);
    max-width: calc((100% - 56px) / 3);
    min-width: 0;
  }
  /* ループ用クローン（aria-hidden）は一覧では不要 */
  .topics-slider__item[aria-hidden="true"] {
    display: none;
  }
  .topics-slider__dots {
    display: none;
  }

  /* =======================================================
   * News（PC）：中央寄せの一覧（文字を一回り大きく）
   * ======================================================= */
  .news {
    padding: 96px 40px 104px;
  }
  .news__title {
    font-size: 2.1rem;
  }
  .news__title-en {
    font-size: 0.95rem;
  }
  .news__list {
    max-width: 880px;
  }
  .news__item {
    padding: 32px 16px;
  }
  /* PC：日付とカテゴリは横1行に戻す（SP は縦2行） */
  .news__meta {
    flex-direction: row;
    align-items: center;
    gap: 18px;
  }
  /* PC は横並びなので、SP 用のカテゴリ行間詰め（負マージン）を相殺 */
  .news__meta .news__category + .news__category {
    margin-top: 0;
  }

  /* =======================================================
   * Button（PC）：一回り大きく
   * ======================================================= */
  .btn {
    font-size: 1rem;
    padding: 8px 32px;
  }
  .btn--solid {
    padding: 11px 36px;
  }

  /* Footer（PC）は別ブロック（下部の @media (min-width: 769px)）に分離。
     769px 以上は 1200px 時のサイズ感を基準に vw で縮小した 3 カラムを維持する */

  /* =======================================================
   * Menu Nav（PC）：全画面ではなく右側のドロワーに。
   *   - 画面右端に固定したパネルとして表示し、右からスライドイン
   *   - 中身は SP レイアウトのまま単一カラム。文字を一回り大きくし、
   *     それに合わせてパネル幅を拡げて折り返しを防ぐ
   *   - グループ見出し帯／下部グレーはパネル両端まで背景を伸ばす
   * ======================================================= */
  .menu-nav {
    inset: 0 0 0 auto;          /* top/right/bottom: 0、left: auto → 右寄せ */
    width: 600px;               /* 一回り大きい文字でも折り返さない幅 */
    max-width: 100%;
    padding-top: 88px;          /* 右上の CLOSE ボタン(72px)を避ける */
    box-shadow: -8px 0 28px rgba(68, 48, 34, 0.16);
    transform: translateX(100%);
    transition:
      transform 0.3s ease,
      opacity 0.25s ease,
      visibility 0s linear 0.3s;
  }

  body.is-menu-open .menu-nav {
    transform: translateX(0);
    transition:
      transform 0.3s ease,
      opacity 0.25s ease,
      visibility 0s linear 0s;
  }

  /* インナーはパネル幅いっぱいに（中央寄せの max-width を解除）。
     左右 padding は 24px、見出し帯／下部グレーはこの 24px を相殺して
     パネル両端まで背景を伸ばす */
  .menu-nav__inner {
    max-width: none;
    margin: 0;
    padding: 10px 24px 0;
  }

  /* メニュー展開中もヘッダーは透明のまま・ロゴも出さない
     （SP では白帯＋ロゴ表示だが、PC のドロワーでは不要） */
  body.is-menu-open .site-header {
    background-color: transparent;
    pointer-events: none;
  }
  body.is-menu-open .site-header .site-header__logo {
    opacity: 0;
    pointer-events: none;
  }

  /* HOME 項目を表示（PC のみ） */
  .menu-nav__top-item--home {
    display: block;
  }

  /* 上部リンク：広い幅で間延びしないよう左寄せ＋一定の間隔に。
     左右の padding(12px) を各サービス項目のインセット
     （group-list 8px ＋ item 4px ＝ 12px）に合わせ、
     左端をサービス項目と揃えつつ右側も同等マージンにする */
  .menu-nav__top-links {
    justify-content: flex-start;
    gap: 12px 32px;
    padding: 4px 12px;
  }
  .menu-nav__top-link {
    /* 各サービスのリスト項目（.menu-nav__item）と同じ文字サイズ */
    font-size: 1rem;
  }

  /* グループ見出し帯：両端まで背景を伸ばす（padding 24px を相殺）＋文字拡大 */
  .menu-nav__group-header {
    margin: 0 -24px;
    padding: 12px 24px;
  }
  .menu-nav__group-name {
    font-size: 1.35rem;
  }
  .menu-nav__group-icon {
    width: 36px;
    height: 36px;
  }

  /* 各項目：文字を一回り大きく。丸シェブロンも合わせて少し大きく */
  .menu-nav__item {
    font-size: 1rem;
    padding: 8px 4px;
  }
  .menu-nav__chevron {
    width: 18px;
    height: 18px;
  }
  .menu-nav__chevron img {
    width: 5.5px;
  }

  /* 下部ブロック：グレー背景を両端まで伸ばす（padding 24px を相殺） */
  .menu-nav__bottom {
    margin: 28px -24px 0;
    padding: 30px 24px 36px;
  }
  .menu-nav__cta {
    font-size: 1.3rem;
    padding: 15px 12px;
  }
  .menu-nav__cta-icon {
    width: 48px;
    height: 48px;
  }
  .menu-nav__tel-label {
    font-size: 0.95rem;
  }
  .menu-nav__tel-number {
    font-size: 1.9rem;
  }
  /* PC はラベル/受付時間が 0.95rem 相当だったため、旧受付時間の縦量に合わせて
     上下均等余白を再計算（枠の高さを維持したまま番号を中央配置）。 */
  .menu-nav__tel {
    padding: calc(10px + 0.546rem) 20px;
  }
}

/* ルート基準フォントの段階化つづき（上の html 参照）。
   992px / 1200px で上書きして 16.5 → 17.5 → 18px の3段階にする。
   同詳細度・後方宣言で上の 769px 版（16.5px）を上書きする。 */
@media (min-width: 992px) {
  html { font-size: 17.5px; }
}
@media (min-width: 1200px) {
  html { font-size: 18px; }
  /* root が 18px になるとトップ施設サービスのアコーディオン最長ラベル
     「介護付き有料老人ホーム（特定施設入居者生活介護）」が 0.9rem=16.2px に膨らみ、
     2カラムの狭い列（内容≈399px。≥1200では左paddingがclamp最大50pxに達し1199pxより
     約5px狭い）で折り返す。実測で確実に1行に収まる 15.3px に固定して折り返しを防ぐ
     （≤1199px の 15.75px とほぼ同サイズ）。 */
  .service-link { font-size: 15.3px; }
}

/* =========================================================
 * Footer（PC：769px 以上）：円形カット廃止 → まっすぐセクションを切る
 *   上段グレーを3カラム（会社情報 / ナビ / 加盟・認証）に。
 *   ---
 *   基準は 1200px 時のサイズ感。3カラムは密で長いラベル・住所が入るため、
 *   769〜1199px でも「同じレイアウト・同じバランス」を保ったまま、文字・画像・
 *   余白・カラム幅をビューポート比（vw）でそのまま縮小する（769px で約0.64倍）。
 *   各値は clamp(769px時の値, N vw, 1200px時の値) で、1200px 以上は基準値に固定。
 *   フォント/画像/余白がすべて同率で縮むため縦横比・間隔比が維持され崩れない。
 * ========================================================= */
@media (min-width: 769px) {
  .site-footer__curve {
    display: none;
  }

  .site-footer__top {
    padding: clamp(41px, 5.333vw, 64px) clamp(26px, 3.333vw, 40px) clamp(36px, 4.667vw, 56px);
  }
  .site-footer__inner {
    max-width: 1200px;
    display: grid;
    /* 中央メニュー枠を広めに取り、長いラベルが折り返さないようにする。
       minmax の最小幅も vw で縮めて 769px でも 3 カラムを保つ */
    grid-template-columns: minmax(clamp(179px, 23.33vw, 280px), 0.95fr) 1.5fr minmax(clamp(135px, 17.5vw, 210px), 0.85fr);
    grid-template-rows: 1fr auto auto;
    grid-template-areas:
      "company nav ."
      "company nav certs"
      "company nav memb";
    column-gap: clamp(36px, 4.667vw, 56px);
    align-items: start;
  }
  /* 左カラム（会社情報）：1まとまりにして、右側テキストの行高に
     引っ張られずロゴ→住所→代表電話を縦に詰めて並べる */
  .site-footer__company {
    grid-area: company;
    display: flex;
    flex-direction: column;
  }
  .site-footer__brand {
    order: 0;
    justify-content: flex-start;
    margin: 0 0 clamp(13px, 1.667vw, 20px);   /* ロゴと住所の余白 */
  }
  .site-footer__brand-logo {
    height: clamp(24px, 3.167vw, 38px);
  }
  /* 住所（上）→ 代表電話ボタン（下）の順。
     左端は下のボタン「代表電話」の "代" あたりに合わせて少し内側へ */
  .site-footer__address {
    order: 1;
    margin: 0 0 clamp(13px, 1.667vw, 20px);
    padding-left: clamp(15px, 1.917vw, 23px);
  }
  /* 郵便番号・住所・FAX：大小バランス（住所＞郵便番号＝FAX）は維持して全体を縮小 */
  .site-footer__address-zip,
  .site-footer__address-fax {
    font-size: clamp(0.545rem, 1.133vw, 0.85rem);
  }
  .site-footer__address-place {
    font-size: clamp(0.673rem, 1.4vw, 1.05rem);
  }
  .site-footer__tel {
    order: 2;
    margin: 0;
    max-width: clamp(205px, 26.67vw, 320px);
    /* 番号1行を上下中央に。上下・左右余白も基準(約14px/18px)から vw で縮小 */
    padding: clamp(9px, 1.2vw, 14px) clamp(12px, 1.5vw, 18px);
  }
  /* ボタン内テキストは大小バランス（番号 > ラベル）を保って縮小 */
  .site-footer__tel-number {
    font-size: clamp(0.897rem, 1.867vw, 1.4rem);
  }
  .site-footer__tel-label {
    font-size: clamp(0.449rem, 0.933vw, 0.7rem);
  }
  .site-footer__nav {
    grid-area: nav;
    align-self: end;            /* 左右カラムと下端を揃える */
  }
  /* 2列メニュー：左右サブ列の幅差を抑えて余白感を均等寄りにする
     （左は長いラベルが入る分だけ少し広め） */
  .site-footer__nav-list {
    margin: 0;
    grid-template-columns: 1.25fr 1fr;
    column-gap: clamp(15px, 2vw, 24px);
  }
  /* メニューは文字は少し大きめ・上下余白は詰めて、左カラムと高さを合わせる */
  .site-footer__nav-link {
    gap: clamp(5px, 0.667vw, 8px);
    font-size: clamp(0.609rem, 1.267vw, 0.95rem);
  }
  .site-footer__nav-chevron {
    width: clamp(10px, 1.333vw, 16px);
    height: clamp(10px, 1.333vw, 16px);
  }
  .site-footer__nav-chevron img {
    width: clamp(3px, 0.375vw, 4.5px);
  }
  .site-footer__nav-list > li {
    padding: clamp(7px, 0.917vw, 11px) clamp(6px, 0.833vw, 10px);
  }
  /* 右カラム（加盟・認証）：アイコン（上・certs行）→ 加盟テキスト（下・memb行）。
     最上段の 1fr 余白行が両者を下へ押し下げ、左カラム高さの下端に揃う。
     certs / memb をそれぞれ明示配置しているのでカラム落ちしない */
  .site-footer__certs {
    grid-area: certs;
  }
  .site-footer__certs img {
    width: clamp(59px, 7.667vw, 92px);
  }
  .site-footer__memberships {
    grid-area: memb;
    text-align: left;
    font-size: clamp(0.41rem, 0.853vw, 0.64rem);   /* 折り返さない程度に縮小（1行優先） */
    line-height: 1.6;
    white-space: nowrap;
    margin: clamp(18px, 2.333vw, 28px) 0 0;         /* アイコンの下に間隔 */
  }

  /* 下段ブラウン：関連リンクを横並び＋全体を中央寄せ */
  .site-footer__bottom {
    padding: clamp(36px, 4.667vw, 56px) clamp(26px, 3.333vw, 40px) clamp(23px, 3vw, 36px);
  }
  .site-footer__bottom .site-footer__inner {
    display: block;
    max-width: 1000px;
  }
  /* 関連リンクの白ボタン：横幅・文字・アイコン・余白すべてを vw で縮小し、
     2つとも同サイズ（可変幅）で中央寄せ。基準は 1200px 時の 380px 幅 */
  .site-footer__links {
    grid-template-columns: repeat(2, clamp(244px, 31.67vw, 380px));
    justify-content: center;
    gap: clamp(13px, 1.667vw, 20px);
    margin: 0 auto clamp(21px, 2.667vw, 32px);
  }
  .site-footer__bottom .site-footer__link-btn {
    gap: clamp(9px, 1.167vw, 14px);
    padding: clamp(8px, 1vw, 12px) clamp(12px, 1.5vw, 18px);
    font-size: clamp(0.577rem, 1.2vw, 0.9rem);
    min-height: clamp(44px, 5.667vw, 68px);
  }
  .site-footer__bottom .site-footer__link-btn--assoc {
    font-size: clamp(0.513rem, 1.067vw, 0.8rem);
  }
  .site-footer__bottom .site-footer__link-btn--line {
    font-size: clamp(0.641rem, 1.333vw, 1rem);
  }
  .site-footer__link-icon {
    width: clamp(27px, 3.5vw, 42px);
    height: clamp(27px, 3.5vw, 42px);
  }
}

/* =========================================================
 * 個別ページ（service-detail）PC レイアウト（769px 以上）
 *   - コンテナ最大 1200px（ヒーロー画像・全幅カードはこの幅を活用）
 *   - 本文・各セクションは読みやすい 880px 幅の中央カラムに揃える
 *     （全幅ベージュカードは背景は全幅のまま、中身を 880px 中央に）
 *   - ヒーロー画像は横幅を活かしつつ高さ最大 500px でクロップ
 *   - 幅は max-width 主体なので 769〜1199px ではビューポートに収まるよう縮む。
 *     文字は root の流体スケールで連動して縮小する
 * ========================================================= */
@media (min-width: 769px) {
  /* ---- ページタイトル帯 ---- */
  .service-detail__title-band {
    margin-top: 84px;
    min-height: 120px;
    padding: 20px 16px;
  }
  .service-detail__title {
    font-size: 2rem;
  }
  .service-detail__title--long {
    font-size: 2rem;
  }

  /* ---- 本文コンテナ：最大 1200px ---- */
  .service-detail__container {
    max-width: 1200px;
    padding: 64px 40px 100px;
  }

  /* ---- ヒーロー画像：幅は広く・高さは最大 500px でクロップ ---- */
  .service-detail__image {
    aspect-ratio: auto;
    height: 500px;
    margin-bottom: 56px;
    border-radius: 24px;
  }
  .service-detail__image img {
    border-radius: 24px;
  }

  /* ---- 本文系（キャッチ・リード・各セクション）は 880px 中央カラムに ---- */
  .service-detail__catch,
  .service-detail__lead,
  .service-detail__section,
  .service-detail__lead-note,
  .service-detail__hub-lead {
    max-width: 880px;
    margin-left: auto;
    margin-right: auto;
  }
  .service-detail__catch {
    font-size: 2rem;
    margin-bottom: 44px;
  }
  .service-detail__lead {
    /* 区切り線(border-top)はメインビジュアルと同じ幅まで伸ばし、
       本文だけ左右paddingで中央880px相当に内寄せする */
    max-width: none;
    font-size: 1.05rem;
    line-height: 2;
    padding: 36px 120px 0;
    margin-bottom: 72px;
  }
  /* ---- 会社概要トップ：リード文＋事業ネットワーク図を2カラム化（左=図／右=本文） ----
     DOM 順は本文→図（SPは縦積み維持）。PC は figure を order:-1 で左へ回す。 */
  .service-detail--company .service-detail__intro {
    display: flex;
    align-items: center;
    gap: 48px;
    max-width: 880px;
    margin: 0 auto 72px;
  }
  .service-detail--company .service-detail__intro .service-detail__diagram {
    order: -1;                       /* 図を左カラムへ */
    flex: 0 0 40%;
    max-width: 360px;
    margin: 0;
  }
  .service-detail--company .service-detail__intro .service-detail__diagram img {
    max-width: 100%;
  }
  /* 2カラム内の本文は右カラム。全幅リード用の区切り線・左右paddingを解除して素の段落に */
  .service-detail--company .service-detail__intro .service-detail__lead {
    flex: 1 1 auto;
    max-width: none;
    margin: 0;
    padding: 0;
    border-top: none;
  }
  .service-detail__section {
    margin-bottom: 64px;
  }
  .service-detail__section-title {
    font-size: 1.55rem;
    margin-bottom: 24px;
  }
  .service-detail__sub-title {
    font-size: 1.35rem;
    margin-bottom: 16px;
  }
  /* 看多機月額の小見出し：PCでは改行(br)を無効化して1行で表示する
     （SPは <br> 有効のまま2行） */
  .service-detail__price-accent .service-detail__sub-title br {
    display: none;
  }
  .service-detail__text {
    font-size: 1.05rem;
    line-height: 1.95;
  }

  /* ---- サービス内容（ラベル＋説明）：ラベル列を広げ文字も大きく ---- */
  .service-detail__item {
    grid-template-columns: 180px 1fr;
  }
  .service-detail__item-label {
    font-size: 1.3rem;
  }
  .service-detail__item-desc {
    font-size: 1rem;
    padding: 14px 22px;
  }

  /* ---- ご利用いただける方：2カラム横並び ---- */
  .service-detail__eligible {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  .service-detail__eligible-item + .service-detail__eligible-item {
    margin-top: 0;
  }
  .service-detail__eligible-label {
    font-size: 1.25rem;
  }
  .service-detail__eligible-desc {
    font-size: 1rem;
  }

  /* ---- ご利用までの流れ：文字大きめ ---- */
  .service-detail__flow-item {
    font-size: 1.05rem;
    padding: 10px 0 10px 42px;
  }

  /* ---- サービス内容セクション以下：本文・カプセル・カード等の
     コンテンツは最大800pxで左右中央に配置（内部レイアウトは現状維持）。
     見出し(section-title/sub-title)は対象外なので現在位置(880カラム左)のまま。
     → 見出しと本文の開始位置はズレる形になる ---- */
  .service-detail__sub-title,
  .service-detail__schedule-type,
  .service-detail__items,
  .service-detail__eligible,
  .service-detail__flow,
  .service-detail__text,
  .service-detail__sign,
  .service-detail__area-group,
  .service-detail__inner-card,
  .service-detail__pdf-link-wrap,
  .service-detail__image--in-card,
  /* 各ページ固有のコンテンツ要素も同じ 780px 中央カラムに揃える
     （見出し直下のレベルの要素はすべて 780px：基準＝訪問介護ページ） */
  .service-detail__stack-items,
  .service-detail__sub-card,
  .service-detail__service-cards,
  .service-detail__staff,
  .service-detail__photo-grid,
  .service-detail__instagram-feed,
  .service-detail__care-table-wrap,
  .service-detail__access-info,
  .service-detail__access-map,
  .service-detail__access-list,
  .service-detail__price-table,
  .service-detail__facility-list,
  .service-detail__info-table-wrap,
  .service-detail__reg-list,
  .service-detail__history,
  .service-detail__bullets,
  .service-detail__support-card,
  .service-detail__note,
  /* 訪問理美容：料金表の小見出し／対応日時の白カード／事業者向けキャンペーンの黄色カード */
  .service-detail__sub-heading,
  .service-detail__hours-card,
  .service-detail__campaign,
  .service-detail__industry,
  /* 居住支援：お悩みバブル群／白テキストカード／●リスト */
  .service-detail__worries,
  .service-detail__text-card,
  .service-detail__dot-list,
  /* 不動産事業：こんなお悩みアイコンカード群 */
  .service-detail__icon-cards,
  /* 会社概要：企業理念の中央見出し（下線つき）も本文と同じ 780 に揃え、
     下線が本文より外へはみ出さないようにする */
  .service-detail__center-heading,
  .service-detail__link-btns,
  /* 案内ハブ：施設カード群／在宅・その他のカテゴリグループ */
  .hub-cards,
  .hub-groups {
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;
  }

  /* ---- 案内ハブ（PC）：SP と同じ比率のまま一段大きく ---- */
  .hub-cards {
    gap: 22px;
  }
  .hub-card {
    padding: 24px 22px 22px;
    border-radius: 22px;
  }
  .hub-card__desc {
    margin-top: 12px;
    font-size: 0.95rem;
    line-height: 1.8;
  }
  /* SP 用の改行は解除して、780px 幅で自然に折り返させる */
  .hub-card__desc br {
    display: none;
  }

  .hub-group {
    border-radius: 22px;
  }
  .hub-group + .hub-group {
    margin-top: 40px;
  }
  .hub-group__header {
    min-height: 84px;
    /* SP と同じ「左右非対称＝テキストをやや右へ」の関係を維持しつつ拡大 */
    padding: 16px clamp(28px, 3.9vw, 40px) 16px clamp(62px, 8.5vw, 88px);
    font-size: clamp(1.3rem, 2.1vw, 1.6rem);
  }
  .hub-group__icon {
    left: clamp(24px, 3.2vw, 32px);
    width: clamp(58px, 7.3vw, 70px);
    height: clamp(58px, 7.3vw, 70px);
  }
  .hub-group__list {
    padding: 22px 22px 26px;
  }
  .hub-group__item + .hub-group__item {
    margin-top: 14px;
  }

  .hub-link {
    min-height: 56px;
    padding: 12px 26px 12px 56px;
    font-size: 1.1rem;
    border-radius: 15px;
  }
  /* SP 用の <br> は PC では非表示。ラベルは <br> 区切りのパーツを .hub-link__seg
     （折り返し禁止）で囲んでいるため、PC ではパーツが1行に収まらない時だけ
     「パーツの境目＝<br> と同じ位置」で改行する（改行位置は常に SP と一致） */
  .hub-link__label br {
    display: none;
  }
  .hub-link__sub {
    font-size: 0.85rem;
  }
  .hub-link__chevron {
    left: 20px;
    width: 20px;
    height: 20px;
  }
  .hub-link__chevron img {
    width: 6px;
  }

  /* お知らせ／トピックス一覧（detailページ）：
     ボーダー（記事間の区切り線）は各ページ上部のイメージ画像と同じ 1120px 幅まで広げ、
     内容物（日付・タイトル）は 880px 中央に収める。
     → list を 1120px（＝コンテナ内容幅＝画像幅）にして罫線をそこへ引き、
       アイテムの左右 padding を 0 にして罫線を端まで伸ばし、内容物だけ 880px 中央に寄せる */
  .service-detail .news__list {
    max-width: 1120px;
    margin-left: auto;
    margin-right: auto;
  }
  /* 記事アイテム：罫線を list 幅いっぱい（1120px）に伸ばす（左右 padding を 0 に） */
  .service-detail .news__item {
    padding-left: 0;
    padding-right: 0;
  }
  /* 内容物（クリック領域＝日付・タイトル）だけ 880px 中央に。罫線は 1120px のまま */
  .service-detail .news__link {
    max-width: 880px;
    margin-left: auto;
    margin-right: auto;
  }
  /* カテゴリフィルターは記事リストの罫線幅と同じ 1120px 中央に広げる
     （ピルが増えても折り返しにくいよう内容物880pxより広い枠を確保） */
  .service-detail .news-filter__list {
    max-width: 1120px;
    justify-content: center;   /* PCはピルを中央揃え */
  }
  /* 記事シングル：PCではタイトル・本文をやや大きく */
  .service-detail .article__title {
    font-size: 1.85rem;
  }
  /* PCは日付｜カテゴリの2カラムを維持しつつ、カテゴリ側は横並びにする */
  .article__cats {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px 18px;
  }
  .service-detail .article__body {
    font-size: 1rem;
  }

  /* お問合せボタン：横並び（各ボタン おおよそ 50%幅・間に余白）。
     各ボタンを flex-basis 50%（gap 分を差し引き）・grow 無しにして wrap させるので、
     ボタン2個＝1行に50/50、3個＝上段50/50＋下段50%中央、1個＝50%中央、と
     個数に依らず「おおよそ 50%幅」で揃う。中央寄せ。
     カテゴリ色違い（--detail-color）も同一 .service-detail__contact-btn なので共通で効く */
  .service-detail__contact-buttons {
    width: 780px;                 /* 子の 50%幅を解決させるため確定幅にする */
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
  }
  /* flex アイテムは li（クラス無し）。これを約50%幅にし、中の .contact-btn は li 幅いっぱいに */
  .service-detail__contact-buttons > li {
    flex: none;
    width: calc(50% - 10px);      /* gap 20px の半分を差し引いた約50%幅 */
    display: flex;
  }
  .service-detail__contact-buttons > li > .service-detail__contact-btn {
    width: 100%;
  }

  /* PDFボタン（資料DL/料金プラン等）：お問合せボタンと同様に2カラム。
     ただし改行された分（3個目など）は左揃え（justify-content: flex-start）。
     構造は ul.__pdf-btns > li > a.__pdf-btn（flexアイテムはクラス無しの li） */
  .service-detail__pdf-btns {
    width: 780px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 20px;
  }
  .service-detail__pdf-btns > li {
    flex: none;
    width: calc(50% - 10px);
    display: flex;
  }
  .service-detail__pdf-btns > li > .service-detail__pdf-btn {
    width: 100%;
  }

  /* スタッフ紹介：3枚のカードを横並び（3カラム）に。
     ※ .service-detail__staff 自体は 780px 中央カラムのまま（上の 780リストで指定済み） */
  .service-detail__staff {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
  /* 4枚など、3カラムだと1枚だけカラム落ちする場合の 2×2 レイアウト。
     幅は親と同じ 780px コンテナいっぱい（2列均等）に広げる（初出＝訪問看護） */
  .service-detail__staff--2col {
    grid-template-columns: repeat(2, 1fr);
  }
  /* カード内は「プロフィール上・本文下」の縦2段に（SPの左右並びを解除） */
  .service-detail__staff-item {
    flex-direction: column;
    gap: 12px;
  }
  .service-detail__staff-item + .service-detail__staff-item {
    margin-top: 0;                 /* grid gap に任せる */
  }
  /* プロフィールはカード上段で中央寄せ（固定幅指定を解除して全幅中央に） */
  .service-detail__staff-profile {
    flex: 0 0 auto;
    width: 100%;
  }

  /* 小見出し(sub-title)配下のコンテンツは、小見出しより さらに少し内側へ寄せて
     「見出し（780）＞内容物（720）」の配置差をつける（全ページ共通）。
     ※ section-title(880) 直下のコンテンツ(780)はこの対象外なので現状維持
     ※ facility-list（施設一覧の MAP カード）は対象外。デザイン指定により
        小見出しと同じ 780px 幅に揃える（780カラム指定のまま） */
  .service-detail__sub-title ~ .service-detail__flow,
  .service-detail__sub-title ~ .service-detail__eligible,
  .service-detail__sub-title ~ .service-detail__items,
  .service-detail__sub-title ~ .service-detail__text,
  .service-detail__sub-title ~ .service-detail__area-group,
  .service-detail__sub-title ~ .service-detail__sub-card-list,
  .service-detail__sub-title ~ .service-detail__sub-card,
  .service-detail__sub-title ~ .service-detail__stack-items,
  .service-detail__sub-title ~ .service-detail__service-cards,
  .service-detail__sub-title ~ .service-detail__staff,
  .service-detail__sub-title ~ .service-detail__link-btns,
  .service-detail__sub-title ~ .service-detail__schedule {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
  }

  /* ----- 施設一覧カード（PC調整） ----- */
  /* サムネ画像を小さく：横の施設名・住所ブロックと同じくらいの高さに
     合わせる（本文高さに stretch、幅は固定の小さめサムネ）。 */
  .service-detail__facility-head {
    align-items: stretch;
  }
  .service-detail__facility-photo {
    flex: 0 0 auto;
    width: 150px;
    aspect-ratio: auto;          /* 1/1 を解除し、高さは本文ブロックに追従 */
    align-self: stretch;
  }
  /* MAP をもう少し横長に（縦を少し減らす） */
  .service-detail__facility-map {
    aspect-ratio: 21 / 9;
  }
  /* 料金表（枠線つき）は本文(780)より内側の 720 に統一する。
     ・枠と表本体が同じ幅になり「枠だけ広く残る」不具合も解消
     ・小見出し(sub-title)の有無に関わらず、全ての料金表を同じ幅にする
       （住宅型ページの月額料金表は小見出しが無いが、これで他の表と幅が揃う） */
  .service-detail__price-table-wrap {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
  }
  /* 看多機月額：PCのみ「表（左・縮小）＋写真（右）」の2カラム（住宅型ページ）。
     figure 全体を 720 幅に収め、内側で表を縮めて右隣に写真を並べる。SPは写真非表示。 */
  .service-detail__price-figure {
    display: flex;
    align-items: stretch;
    gap: 28px;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
  }
  .service-detail__price-figure .service-detail__price-table-wrap {
    flex: 0 1 380px;        /* 表は縮めて左に寄せる */
    max-width: none;        /* 上の 720px 中央指定を打ち消す */
    margin: 0;
  }
  .service-detail__price-photo {
    display: block;
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
  }
  .service-detail__price-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
  }
  /* 自費・その他：ご契約についての白カードは料金表と同じ 720px 幅に揃える */
  .service-detail--other .service-detail__sub-card {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
  }
  /* 料金表の文字はPCでは従来サイズ（1rem）に戻す（SP縮小は折り返し軽減用） */
  .service-detail__price-table th,
  .service-detail__price-table td {
    font-size: 1rem;
  }
  /* メニュー写真（--menu）は直下の料金表と同じ 720px 幅・中央寄せに揃える。
     ヒーロー用の height:500px/aspect:auto を解除し、写真本来の比率で表示する */
  .service-detail__image--menu {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    height: auto;
    aspect-ratio: 1500 / 682;
  }
  /* --content: 表に紐づかない本文内の写真。本文と同じ 780px 幅・写真本来の比率で表示
     （ヒーロー用の height:500px を解除）。登録支援機関ページの人材紹介写真など */
  .service-detail__image--content {
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;
    height: auto;
    aspect-ratio: 1500 / 682;
  }
  /* 料金表の注釈も表と左右端を揃える（表の直後に続く note のみ対象） */
  .service-detail__price-table-wrap ~ .service-detail__note {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
  }

  /* 白カード（研修内容の一例 等）：文字を中央揃え＋幅を少し詰める */
  .service-detail__inner-card {
    max-width: 680px;
    text-align: center;
  }

  /* より良い支援のために：リード文・白カード・注釈・画像の縦間隔を広げる */
  .service-detail__card--bleed-bottom .service-detail__inner-card {
    margin-top: 44px;
  }
  .service-detail__card--bleed-bottom .service-detail__pdf-link-wrap {
    margin-top: 36px;
    margin-bottom: 44px;
  }
  .service-detail__card--bleed-bottom .service-detail__image--in-card {
    margin-top: 44px;
  }


  /* ---- ベージュ全幅カード：背景は全幅のまま、中身を 880px 中央に ---- */
  .service-detail__card {
    /* 背景は全幅。見出しは 880 カラム左に合わせ、中身(本文/カプセル)は別途800中央 */
    padding-left: max(40px, calc(50vw - 440px));
    padding-right: max(40px, calc(50vw - 440px));
    padding-top: 56px;
    padding-bottom: 56px;
    margin-bottom: 64px;
  }
  .service-detail__card--bleed-bottom {
    padding-bottom: 100px;
  }

  /* 市町村ピル：横幅に余裕がある分カラムを増やす */
  .service-detail__area-cities {
    grid-template-columns: repeat(5, 108px);
  }
  /* 写真ビジュアル（研修）は SP の比率（8:5）を維持したまま 780px 幅へ拡大
     （ヒーロー用 .service-detail__image の高さ500px/aspect:auto を打ち消す） */
  .service-detail__image--in-card {
    aspect-ratio: 8 / 5;
    height: auto;
  }
}