/*
  さらのそのHP トップページ 新デザイン実装（静的HTML）
  カラー・フォントサイズは目視推定の仮値。正式指示が届き次第 :root のみ差し替える。
  1200px以上をPCデザインの基準とする（左固定カラム＋右スクロールカラムの2カラム構成）。

  ────────────────────────────────────────────────────────
  ⚠️ モバイル対応の鉄則（2026-09-06〜）
  ────────────────────────────────────────────────────────
  このファイルの大部分は「全幅に効く共通スタイル」で、PCの見た目もここで作られている。
  そのためモバイル調整でこの共通部分を書き換えると、PC版が即座に崩れる。

  モバイル用のスタイルは、必ずファイル末尾の
      @media (max-width: 1199px) { ... }
  ブロックの中だけに書くこと。共通スタイルの既存行は書き換えない（上書きで対応する）。

  CSSを触るたびに 1200px・1920px で実測し、`PCデザイン_ベースライン.json` と
  差分0件であることを確認してから完了とする。
  ────────────────────────────────────────────────────────
*/

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

/* ============================================================
   全体スケーリングの基準
   ============================================================
   このCSSの寸法はすべて rem で書いてあり、その基準となる 1rem をここで決めている。
   1200px幅で組んだ配置感・サイズ感を、それ以上の画面でも比率のまま拡大するのが狙い。

     1200px未満   … 16pxで固定（PC版の下限。SP版レイアウトは後工程）
     1200〜1920px … 画面幅に比例（1200pxで16px、1920pxで25.6px）
     1920px超     … 25.6pxで固定（大画面で文字が間延びしないよう頭打ちにする）

   100vw/75 は「100vw ÷ 1200 × 16」を約分したもの。
   拡大の上限を変えたいときは、この1行の 25.6rem 相当の値だけを触ればよい。 */
html {
  font-size: clamp(16px, calc(100vw / 75), 25.6px);
}

:root {
  /* ---- カラー（仮値） ---- */
  /* --bg はデザインカンプの背景画像から実測した地色（画像読み込み前後のちらつき防止用） */
  --bg:           #F1EDEC;
  --bg-light:     #FBEAEF;
  --primary:      #DA536B; /* ロゴから抽出したピンク（RGB 218,83,107 / HSL 349,65%,59%） */
  --primary-dark: #A8243C; /* 上記と同色相・同彩度で明度のみ下げた濃色版 */
  --accent:       #C98A73;
  --text:         #2C2C2C;
  --text-light:   #6B6560;
  --border:       #F3D9E0;
  --white:        #ffffff;
  --line-green:   #06C755;
  --tel-red:      #B5321A;

  /* ---- 角丸トークン ---- */
  --radius-card:  1.25rem;
  --radius-photo: 1rem;
  --radius-pill:  999px;

  /* ---- レイアウト寸法 ---- */
  --side-w:       50%;

  /* ---- フォントサイズ（1200px基準の実測値） ----
     用途別（--fs-news-date のような名前）ではなく「大きさの段階」で持つ。
     同じ大きさが何箇所で使われても定義は1つで済み、サイト全体をまとめて
     拡縮したくなったときも、この12行だけを触ればよい。 */
  --fs-3xs:  0.5rem;  /* 箇条書きのドット記号 */
  --fs-2xs: 0.6875rem;  /* カード内の特徴リスト、コピーライト */
  --fs-xs:  0.75rem;  /* 本文の基準。ナビ・ボタン・注記など最も広く使う */
  --fs-sm:  0.8125rem;  /* リード文、日付、フッターリンク */
  --fs-md:  0.875rem;  /* 強調テキスト、CTAボタン */
  --fs-lg:  1rem;  /* 施設名 */
  --fs-xl:  1.25rem;  /* MVコピー、サービスカード見出し */
  --fs-2xl: 1.375rem;  /* CTA見出し */
  --fs-3xl: 1.5rem;  /* お知らせの矢印記号 */
  --fs-4xl: 1.625rem;  /* セクション見出し、お知らせ見出し */
  --fs-5xl: 2rem;  /* 「3つの安心」の大見出し */
  --fs-6xl: 2.25rem;  /* 同上（900px以下のみで使用） */
}

/* ============================
   スマホ専用パーツの既定値
   ============================
   スティッキーヘッダー・メニューの閉じるボタン・メニュー内SNSは
   スマホ専用のため、既定では非表示にしておく（PCに一切出さない）。
   900px以下のブロックで表示に切り替える。 */
.sp-header,
.sp-menu-close,
.sp-menu-sns,
.sp-cta-bar,
.sp-page-logo,
.sp-menu-animals,
.mv-sp-slides {
  display: none;
}

/* スマホでだけ効かせたい改行。PCでは改行そのものが無効になる */
br.sp-only {
  display: none;
}

body {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-size: var(--fs-xs);
  background: var(--bg);
  color: var(--text);
  line-height: 1.8;
  letter-spacing: 0.05em;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

/* ============================
   背景パターン（右スクロールカラム）
   ============================
   デザインカンプの背景画像（960×6914px、円の大きさ・位置は不揃い）をそのまま使用。
   円が完全な正円・均等配置ではないため、CSSのradial-gradientでは再現しきれず、
   画像を採用している（webp化して15KB程度に圧縮）。
   ページがカラム幅×7.2（画像の縦横比）を超えて伸びた場合は repeat-y で継ぎ足す。
   継ぎ目は画像の元デザインがタイル前提で作られていないため多少出うる。 */
.main-scroll {
  background-color: var(--bg);
  background-image: url('../asset/common/bg-pattern.webp');
  background-repeat: repeat-y;
  background-position: top center;
  background-size: 100% auto;
}

/* ============================
   写真プレースホルダー
   ============================ */

/* 仮枠（.photo-placeholder）を写真に差し替えたときの共通指定。
   各ページの枠の寸法（幅・高さ・比率・角丸）はそのまま使い、写真は枠いっぱいに切り抜いて収める（2026-10-01）。
   :where() で優先度を0にして、各ページ側の寸法の指定が必ず勝つようにしている */
:where(img.photo-fill) {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-placeholder {
  background: #E9D6DC;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9C6B7C;
  font-size: var(--fs-xs);
  text-align: center;
  padding: 0.75rem;
  line-height: 1.5;
}

/* ============================
   共通ボタン
   ============================ */

.btn-pill {
  display: inline-block;
  background: var(--primary);
  color: var(--white);
  padding: 0.875rem 1.75rem;
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: 500;
  text-align: center;
  transition: background 0.2s, opacity 0.2s;
}

.btn-pill:hover { background: var(--primary-dark); }

.btn-outline {
  display: inline-block;
  border: 1.5px solid var(--primary);
  color: var(--primary);
  padding: 0.625rem 1.5rem;
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: 500;
  transition: all 0.2s;
}

.btn-outline:hover { background: var(--primary); color: var(--white); }

/* ============================
   セクション共通
   ============================ */

.section {
  /* 左右1remは、サービスカードとアクセス情報の横幅を確保するための値。
     広げすぎると本文が間延びするため、この2セクションが収まる最小限にしている。
     変更する場合は .map-embed の負のマージン（打ち消し用）も必ず同じ値に合わせること。 */
  padding: 5rem 1rem;
}

/* #service と #access は同じ .section を共有しているが、
   前後に隣接するセクションが異なるため、境界を80pxに揃えるにはそれぞれ個別に上書きする */
#service {
  /* 前の .photo-wide-single はpaddingなしなので、上側80pxはそのまま活かす */
  padding-bottom: 2.5rem;
}

#access {
  padding-top: 2.5rem;
  /* 次の .contact-section は高さを抑える演出上の理由で padding-top を28pxに固定しているため、
     こちら側で調整する。CTA上の間隔だけ他より広め（112px = 84px+28px）にしている */
  padding-bottom: 5.25rem;
}

.section-inner {
  max-width: 56.25rem;
  margin: 0 auto;
}

.section-alt { background: var(--bg-light); }

.section-title {
  font-family: 'Shippori Mincho', serif;
  font-size: var(--fs-4xl);
  font-weight: 600;
  color: var(--primary-dark);
  text-align: center;
  line-height: 1.6;
  margin-bottom: 0.75rem;
}

.section-title-vertical {
  /* カード側へ1rem寄せる。gapを詰めるとカードの幅まで変わってしまうため、
     レイアウトに影響しない position:relative で見た目の位置だけずらしている */
  position: relative;
  left: 1rem;
  font-family: 'Shippori Mincho', serif;
  font-size: var(--fs-4xl);
  font-weight: 600;
  color: var(--primary);
  letter-spacing: 0.35em;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  white-space: nowrap;
  flex-shrink: 0;
  margin-top: -1.5rem;
}

.service-layout {
  display: flex;
  align-items: flex-start;
  gap: 2.5rem;
}

.section-divider {
  width: 2.25rem;
  height: 0.125rem;
  background: var(--accent);
  margin: 0 auto 2.5rem;
}

.section-lead {
  text-align: center;
  color: var(--text-light);
  font-size: var(--fs-xs);
  margin-bottom: 3rem;
  margin-top: -1.5rem;
}

/* ============================
   左固定カラム（side-fixed）
   ============================ */

.side-fixed {
  position: fixed;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--primary-dark);
  overflow: hidden;
}

.side-header {
  position: relative;
  z-index: 2;
  height: 100%;
  pointer-events: none;
}

.side-top {
  position: absolute;
  top: 7%;
  right: 5%;
  pointer-events: auto;
}

.side-logo {
  display: block;
}

.side-logo-full {
  height: 5.3125rem;
  width: auto;
  display: block;
}

.side-nav {
  position: absolute;
  top: 7%;
  left: 5%;
  pointer-events: auto;
}

.side-nav ul {
  display: flex;
  gap: 0.75rem;
}

/* 子メニューを持つ項目の親（開閉ボタン。例：ペット納骨・ペット供養／お見送りのかたちを選ぶ）。
   ボタン既定の背景・枠・余白・行間だけを消し、見た目は下の .side-nav a と同じ指定を受ける
   （リンクの項目と1pxも違わない見た目にするため。2026-09-12） */
.side-nav-parent {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  line-height: inherit;
  cursor: pointer;
}

.side-nav a,
.side-nav-parent {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: 'Shippori Mincho', serif;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--primary);
  letter-spacing: 0.08em;
  padding-top: 0.75rem;
  border-top: 2px solid var(--primary);
  transition: opacity 0.2s;
}

.side-nav-emphasis a {
  font-size: var(--fs-lg);
}

.side-nav a:hover,
.side-nav-parent:hover { opacity: 0.75; }

/* ---- 子メニュー（例：家族葬｜お迎え葬、ペット納骨｜ペット供養） ----
   親の左側に、縦書き2列で出す（2026-10-29 池上さん指示。以前は親の下に出していた）。
   縦書きは右から左へ読むため row-reverse（1つ目の子が右）。2列の間の線は引かない（同日 池上さん指示で外した）。
   出るときは、親の後ろから左へすっと枠が出てくる動き（右端を軸に clip-path で見せる範囲を広げ、少しだけ左へ動かす）。
   左隣のメニュー項目には重なってよい（同日 池上さん指示）。
   ふだんは隠しておき、次のときに出す（開閉の動きは js/main.js）
     ・PC（マウスが使える901px以上）… 親にマウスを乗せたとき／キーボードで中へ入ったとき
     ・タッチ操作・スマホ …………… 親をタップして .is-open が付いたとき */
/* 項目はいちばん長い項目の高さまで縦に引き伸ばされる（flex の stretch）。
   この項目だけ文字の長さに合わせ、子メニューの上端を親の上端にそろえる */
.side-nav-has-sub {
  position: relative;
  align-self: flex-start;
}

/* 親ボタンを行の中に置くと下に行のすき間がつき、子メニューの白い枠がそのぶん親より長くなる。ブロックにして高さをそろえる */
.side-nav-has-sub > .side-nav-parent {
  display: block;
}

/* 隠れている間は visibility:hidden にして、見えない子メニューを押せない・キーボードで入れないようにする。
   出る速さと戻る速さは同じ 0.45s（2026-10-30 池上さん指示）。透明度を 0.2s で変えると、戻るときに縮みきる前に
   消えて速く見えるため、透明度は動かさず、閉じきってから visibility と一緒に切り替える（出るときは即座に不透明） */
.side-nav .side-nav-sub {
  display: flex;
  visibility: hidden;
  opacity: 0;
  clip-path: inset(0 0 0 100%);
  transform: translateX(0.75rem);
  transition: clip-path 0.45s ease, transform 0.45s ease, opacity 0s linear 0.45s, visibility 0s linear 0.45s;
  position: absolute;
  /* 白い枠は親（お見送りのかたちを選ぶ）と同じ高さ（2026-10-29 池上さん指示） */
  top: 0;
  bottom: 0;
  right: calc(100% + 0.375rem);
  z-index: 3;
  flex-direction: row-reverse;
  /* 列の間は余白だけ（.side-nav ul の gap を持ち込まず、各項目の左右の余白で間をとる） */
  gap: 0;
  padding: 0 0.25rem;
  background: rgba(255, 255, 255, 0.97);
  border-radius: 0.5rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
}

/* 親と子の間のすき間（0.375rem）を埋める透明な面。マウスが親から子へ移る途中で hover が切れないように */
.side-nav .side-nav-sub::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 100%;
  width: 0.375rem;
}

/* 左に収まらない項目は右側に出す（js/main.js が .is-flip を付ける）。親の後ろから右へ出てくる */
.side-nav-has-sub.is-flip .side-nav-sub {
  right: auto;
  left: calc(100% + 0.375rem);
  clip-path: inset(0 100% 0 0);
  transform: translateX(-0.75rem);
}

.side-nav-has-sub.is-flip .side-nav-sub::before {
  left: auto;
  right: 100%;
}

/* 文字の大きさは親と同じ（.side-nav a のまま。2026-10-29 池上さん指示）。
   左右の余白を同じにして列の左右中央に置き、書き出しは親の文字の位置（上の線2px＋余白）にそろえる */
.side-nav .side-nav-sub a {
  display: block;
  padding: calc(0.75rem + 2px) 0.5rem 0;
  border-top: 0;
  white-space: nowrap;
}

/* 子メニューに添える一言（例：家族葬 → 人と同じお葬式）。スマホのメニューだけで出す（下のスマホのブロック） */
.side-nav-note {
  display: none;
}

.side-nav-has-sub.is-open .side-nav-sub {
  visibility: visible;
  opacity: 1;
  clip-path: inset(0 0 0 0);
  transform: none;
  transition-delay: 0s;
}

@media (hover: hover) and (min-width: 901px) and (min-height: 501px), (hover: hover) and (min-width: 1200px) {
  .side-nav-has-sub:hover .side-nav-sub,
  .side-nav-has-sub:focus-within .side-nav-sub {
    visibility: visible;
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: none;
    transition-delay: 0s;
  }
}

/* 動物写真スライド：side-fixed全体に敷く背景 */
.side-photo-slide {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.side-photo-item {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 2.5s ease;
}

.side-photo-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* 被写体（動物の顔）が中央に来るよう、画像ごとに調整 */
.side-photo-item img.obj-dog    { object-position: 65% 45%; }
.side-photo-item img.obj-rabbit { object-position: 35% 55%; }
.side-photo-item img.obj-cat    { object-position: 45% 60%; }

.side-photo-item.is-active { opacity: 1; }

/* 下部CTA：左カラムの下から20%の高さで白背景固定 */
.side-bottom {
  position: relative;
  z-index: 3;
  background: var(--white);
  display: flex;
  align-items: center;
  padding: 1rem 0;
}

.side-bottom-inner {
  width: 100%;
  padding-left: 5%;
  padding-right: 1.75rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.875rem;
}

/* イメージキャラクター：白枠(side-bottom)からはみ出し、頭半分が上に突き抜ける */
.side-character-photo {
  position: absolute;
  right: 5%;
  bottom: 0;
  height: 11.25rem;
  width: auto;
  z-index: 4;
  pointer-events: none;
}

.side-cta-lead {
  font-size: var(--fs-md);
  color: var(--text);
  font-weight: 500;
  white-space: nowrap;
  text-align: left;
  letter-spacing: 0.12em;
}

.side-cta-buttons {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  width: 100%;
  max-width: 22.625rem;
}

.btn-pill-tel,
.btn-pill-line {
  flex: 1;
  text-align: center;
}

.btn-pill-tel {
  background: var(--primary);
  color: var(--white);
  font-size: var(--fs-xs);
  padding: 0.625rem 0.375rem;
  line-height: 1.4;
  letter-spacing: 0.12em;
}

.btn-pill-line {
  background: var(--white);
  color: var(--line-green);
  border: 1.5px solid var(--line-green);
  font-size: var(--fs-xs);
  padding: 0.53125rem 0.375rem;
  line-height: 1.4;
  letter-spacing: 0.12em;
}

/* LINEボタンのホバーは .btn-pill:hover（ピンク）を受け継がず、LINEの緑で塗る（2026-10-01 池上さん指示） */
.btn-pill-line:hover {
  background: var(--line-green);
  color: var(--white);
}

/* ============================
   ファーストビュー（右カラム内）
   ============================ */

.mv {
  /* ---- ファーストビュー専用のサイズ単位 ----
     他のセクションは幅だけに連動する rem を使うが、ここは「ロゴ・コピー・バッジ・動物写真を
     1画面に収める」ことがデザインの前提なので、幅と高さの小さい方に合わせる。
     横長の画面では rem より小さくなり、全体が縮んで画面内に収まる。

     45.2 の内訳:
       40.3 … 上下paddingを含むコンテンツ全体の高さ
        4.0 … 動物写真(9)が下余白(5)からはみ出す分。バッジに重ねないための逃げ
        0.9 … 安全マージン
     ファーストビューのどれかの要素の大きさを変えたら、この数値も合わせて見直すこと。
     とくに動物写真を大きくするときは、はみ出し分（動物の高さ − 下余白5）を必ず足し直す。 */
  --u: min(1rem, 100vh / 45.2);

  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  /* padding-topの7は、左固定カラムのロゴ上端に揃う値(5.8125)から、
     池上さんの指示でさらに1.1875単位（1200pxで19px）下げたもの。
     padding-bottomの5単位は次セクションとの間隔を80pxに揃えるため（次の.photo-wide-singleはpaddingなし） */
  padding: calc(7 * var(--u)) calc(3 * var(--u)) calc(5 * var(--u));
  text-align: center;
}

/* ロゴとテキストブロックは、それぞれ独立してカラム中央に配置する
   （テキストブロック内の各行は左揃えのまま） */
.mv-header-group {
  width: 100%;
}

/* 以下、ファーストビュー内の寸法は rem ではなく --u（上記の専用単位）で指定する。
   数値は rem のときと同じ倍率なので、1200px幅では従来とまったく同じ大きさになる。 */

.mv-logo {
  display: block;
  width: fit-content;
  margin: calc(-1.875 * var(--u)) auto calc(1.25 * var(--u));
}

.mv-logo-full {
  height: calc(10 * var(--u));
  width: auto;
  display: block;
}

.mv-text-block {
  width: fit-content;
  margin: 0 auto calc(1.5 * var(--u));
  text-align: left;
}

.mv-copy {
  font-family: 'Shippori Mincho', serif;
  font-size: calc(1.25 * var(--u)); /* --fs-xl と同じ倍率 */
  font-weight: 600;
  color: var(--primary);
  line-height: 1.6;
  letter-spacing: 0.12em;
  margin-bottom: calc(1 * var(--u));
}

.mv-desc {
  font-size: calc(0.8125 * var(--u)); /* --fs-sm と同じ倍率(13px) */
  color: var(--primary);
  line-height: 2.2;
  letter-spacing: 0.12em;
}

.mv-badges {
  display: flex;
  justify-content: center;
  gap: calc(1 * var(--u));
}

.badge-pill {
  width: calc(7.5 * var(--u));
  height: calc(7.5 * var(--u));
  border-radius: 50%;
  border: 0.75px solid var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(0.625 * var(--u));
}

.badge-pill-title {
  font-size: calc(0.75 * var(--u)); /* --fs-xs と同じ倍率 */
  font-weight: 700;
  color: var(--primary);
  line-height: 1.5;
  white-space: nowrap;
}

.mv-animal-photo-single {
  position: absolute;
  bottom: 0;
  width: auto;
}

.mv-animal-photo-right {
  right: 5%;
  height: calc(9 * var(--u));
}

.mv-animal-photo-left {
  left: 5%;
  height: calc(9 * var(--u));
}

/* ============================
   大きな一枚写真／2枚横並び
   ============================ */

.photo-wide-single {
  height: 50vh;
  margin-left: 3%;
  overflow: hidden;
  border-top-left-radius: var(--radius-photo);
  border-bottom-left-radius: var(--radius-photo);
}

.photo-wide-single img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

/* ============================
   写真2枚オフセット配置（丸型子猫 ＆ 角丸長方形 子供と子犬）
   ============================ */

.photo-offset-section {
  padding: 2.5rem 0 2.5rem;
  position: relative;
  overflow: visible;
}

.photo-offset-inner {
  width: 100%;
  margin-left: auto;
  position: relative;
  min-height: 19.375rem;
  display: flex;
  justify-content: flex-end;
  padding: 0;
}

.photo-offset-dog {
  width: 55%;
  max-width: 27.5rem;
  height: 16.25rem;
  border-top-left-radius: 1.5rem;
  border-bottom-left-radius: 1.5rem;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  overflow: hidden;
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.04);
}

.photo-offset-dog img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.photo-offset-cat {
  position: absolute;
  left: 8%;
  bottom: -2.75rem;
  width: 12.5rem;
  height: 12.5rem;
  border-radius: 50%;
  overflow: hidden;
  z-index: 2;
  box-shadow: 0 0.5rem 1.75rem rgba(0, 0, 0, 0.08);
}

.photo-offset-cat img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* ============================
   サービスカード（選べるお別れのかた）
   ============================ */

.service-cards {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  flex: 1;
  min-width: 0;
}

.service-cards .service-card:first-child {
  margin-top: 5rem;
}

.service-card {
  background: var(--white);
  border-radius: var(--radius-card);
  box-shadow: 0 0.375rem 1.5rem rgba(217, 82, 122, 0.06);
  display: flex;
  align-items: flex-start;
  flex-direction: row;
  padding: 1.25rem;
  gap: 1.5rem;
}

.service-card-photo {
  flex: 1;
  min-width: 0;
  align-self: flex-start;
  aspect-ratio: 10 / 11;
  padding: 0;
  border-radius: 0.625rem;
  overflow: hidden;
}

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

.service-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 0;
}

.service-card-title {
  align-self: center;
  display: inline-block;
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-size: var(--fs-xl);
  font-weight: 400;
  color: var(--primary);
  text-align: center;
  letter-spacing: 0.25em;
  text-indent: 0.25em;
  border-bottom: 1px solid var(--primary);
  padding-bottom: 0.1875rem;
  margin-bottom: 0.875rem;
}

.service-card-desc {
  font-family: 'Shippori Mincho', serif;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--primary);
  margin-bottom: 0.875rem;
  line-height: 2;
  letter-spacing: 0.08em;
}

.service-features {
  margin-bottom: 1.25rem;
  flex: 1;
}

.service-features li {
  font-size: var(--fs-2xs);
  padding: 0.0625rem 0 0.0625rem 0.875rem;
  color: var(--primary);
  line-height: 1.4;
  letter-spacing: 0.06em;
  position: relative;
}

.service-features li::before {
  content: '●';
  color: var(--primary);
  font-size: var(--fs-3xs);
  position: absolute;
  left: 0;
  top: 0.55em;
}

.service-card .btn-pill {
  align-self: center;
  width: 100%;
  padding: 0.5rem 0.5rem;
  white-space: nowrap;
  letter-spacing: 0.03em;
}

/* ============================
   3つの安心（さらのそのが選ばれる「３つの安心」）
   ============================ */

.anshin-section {
  /* 上下40pxは前後（#service / .photo-offset-section）との境界を80pxに揃えるため */
  padding: 2.5rem 4% 2.5rem;
  position: relative;
}

.anshin-container {
  max-width: 42.5rem;
  margin: 0 auto;
}

.anshin-header {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  margin-bottom: 2.75rem;
}

.anshin-title-group {
  margin-bottom: 1rem;
  text-align: right;
}

.anshin-title-sub {
  font-family: 'Shippori Mincho', serif;
  font-size: var(--fs-4xl);
  font-weight: 500;
  color: var(--primary);
  letter-spacing: 0.22em;
  line-height: 1.4;
  margin-bottom: 0.25rem;
  margin-right: -0.22em;
}

.anshin-title-main {
  font-family: 'Shippori Mincho', serif;
  font-size: var(--fs-5xl);
  font-weight: 600;
  color: var(--primary);
  letter-spacing: 0.12em;
  line-height: 1.3;
  margin-right: -0.12em;
}

.anshin-lead {
  font-family: 'Shippori Mincho', serif;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--primary);
  line-height: 1.8;
  letter-spacing: 0.08em;
  text-align: right;
}

.anshin-grid {
  display: grid;
  /* minmax(0, 1fr) にしないと、1fr の下限が「中身の最小幅」になるため、
     長い見出しを持つカラムだけが押し広げられ、3列目が枠外にあふれる */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  align-items: start;
}

.anshin-card {
  display: flex;
  flex-direction: column;
}

.anshin-photo-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.anshin-photo {
  width: 9.75rem;
  height: 9.75rem;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.anshin-body {
  padding-left: 0;
  padding-right: 0;
}

.anshin-card:not(:first-child) .anshin-body {
  border-left: 1px solid rgba(218, 83, 107, 0.45);
  padding-left: 1rem;
}

.anshin-item-title {
  font-family: 'Shippori Mincho', serif;
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--primary);
  line-height: 1.8;
  letter-spacing: 0.08em;
  margin-bottom: 0.875rem;
}

/* span ごとに改行位置を指定しているが、カラム幅に収まらない場合は
   はみ出さずに折り返させる（nowrapだとカラムを押し広げてしまうため） */
.anshin-item-title span {
  display: block;
}

.anshin-text {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-size: var(--fs-xs);
  font-weight: 400;
  /* 本文はページ標準の黒（--text）。以前のピンク（--primary）から変更（2026-10-04 池上さん指示・全デバイス） */
  color: var(--text);
  line-height: 1.8;
  letter-spacing: 0.05em;
  text-align: left;
}

@media (max-width: 900px), (max-width: 1199px) and (max-height: 500px) and (orientation: landscape) {
  /* 上は「さらのそのが選ばれる」の上の間隔。60→80px（2026-10-22 池上さん指示） */
  .anshin-section {
    padding: 5rem 1.5rem 4.375rem;
  }
  .anshin-title-sub {
    font-size: var(--fs-2xl);
    letter-spacing: 0.2em;
  }
  .anshin-title-main {
    font-size: var(--fs-6xl);
    letter-spacing: 0.12em;
  }
  .anshin-lead {
    font-size: var(--fs-sm);
  }
  .anshin-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .anshin-photo {
    width: 9.375rem;
    height: 9.375rem;
  }
  .anshin-body {
    border-left: none;
    border-top: 1px solid rgba(218, 83, 107, 0.45);
    padding-left: 0;
    padding-top: 1rem;
  }
}

/* ============================
   お知らせ
   ============================ */

.section-news {
  /* bottom40pxは次の #access（padding-top 40pxに変更済み）との境界を80pxに揃えるため */
  padding: 2.5rem 0 2.5rem;
}

.section-news .section-inner {
  max-width: none;
  margin: 0;
  padding: 0;
  padding-left: 3%;
  display: flex;
  justify-content: flex-end;
}

.news-card {
  background: var(--white);
  border-top-left-radius: 2.25rem;
  border-bottom-left-radius: 2.25rem;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  padding: 3rem 3rem 4.375rem 3.25rem;
  width: 100%;
  max-width: 42.5rem;
  margin-left: auto;
  margin-right: 0;
  position: relative;
  box-shadow: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.02);
}

.news-title {
  font-family: 'Shippori Mincho', serif;
  font-size: var(--fs-4xl);
  font-weight: 500;
  color: var(--primary);
  letter-spacing: 0.35em;
  margin-bottom: 1.5rem;
  text-align: left;
  line-height: 1.4;
}

.news-list {
  border-top: 1px solid #EAE5E2;
  margin: 0;
  width: 100%;
}

.news-item {
  border-bottom: 1px solid #EAE5E2;
}

.news-link {
  display: flex;
  align-items: center;
  padding: 1.25rem 0.25rem;
  text-decoration: none;
  transition: opacity 0.2s;
}

.news-link:hover {
  opacity: 0.75;
}

.news-date {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: #333333;
  letter-spacing: 0.05em;
  width: 7.5rem;
  flex-shrink: 0;
}

.news-text {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--primary);
  letter-spacing: 0.04em;
  flex-grow: 1;
  padding-right: 1rem;
}

.news-arrow {
  font-size: var(--fs-3xl);
  line-height: 1;
  font-weight: 300;
  color: var(--primary);
  flex-shrink: 0;
  margin-left: auto;
  transition: transform 0.2s;
}

.news-link:hover .news-arrow {
  transform: translateX(0.1875rem);
}

/* 右下のうさぎ用スロット（画像受け取り次第差し込み可能） */
.news-character-slot {
  position: absolute;
  right: 1.75rem;
  bottom: 0;
  width: 4.875rem;
  height: auto;
  pointer-events: none;
}

.news-character-slot img {
  width: 100%;
  height: auto;
  display: block;
}

/* ============================
   施設・アクセス
   ============================ */

.access-card {
  display: grid;
  grid-template-columns: 40% 1fr;
  /* 写真とテキストの間隔。住所・開苑時間を1200pxで1行に収めるため詰めている */
  gap: 0.75rem;
  align-items: center;
  background: transparent;
  padding: 0;
  /* Googleマップとの間隔を他のセクション間と同じ80pxに揃える */
  margin-bottom: 5rem;
}

.access-photo {
  /* 建物が入る範囲で高さを抑えた横広の枠 */
  height: 10rem;
  border-radius: var(--radius-photo);
  overflow: hidden;
}

.access-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  display: block;
}

.access-name {
  font-family: 'Shippori Mincho', serif;
  font-size: var(--fs-lg);
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  margin-bottom: 0.625rem;
}

.access-name-highlight {
  font-size: 1.2em;
}

.access-detail { font-size: var(--fs-xs); line-height: 1.4; margin-bottom: 0.625rem; color: var(--text); }
.access-detail p { display: flex; margin-bottom: 0.25rem; }

.access-label {
  flex-shrink: 0;
  width: 5rem;
  font-weight: 700;
  color: var(--text);
  font-size: var(--fs-xs);
  letter-spacing: 0.05em;
}

.access-value {
  flex: 1;
  min-width: 0;
}

.access-card .btn-pill {
  display: block;
  width: 100%;
  background: var(--white);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 0.5rem 0.5rem;
}

.access-card .btn-pill:hover {
  background: var(--bg-light);
}

.map-placeholder { height: 20rem; border-radius: var(--radius-photo); }

.map-embed {
  height: 20rem;
  overflow: hidden;
  /* .section の左右padding(1rem)を打ち消して main-scroll 幅いっぱいに広げる */
  margin: 0 -1rem;
}

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

/* ============================
   ご相談窓口CTA（濃ピンク背景）
   ============================ */

/* 左側だけ角丸・右端は画面端まで伸びるピンク帯。
   スタッフ写真は上端が帯からはみ出す */
.contact-section {
  background: var(--primary);
  color: var(--white);
  margin-left: 3%;
  padding: 1.75rem 0 1.75rem 1.75rem;
  border-top-left-radius: 2.25rem;
  border-bottom-left-radius: 2.25rem;
  position: relative;
}

.contact-inner {
  max-width: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 10.625rem;
  gap: 1rem;
  align-items: end;
}

.contact-title {
  font-family: 'Shippori Mincho', serif;
  /* 1200pxで20px。22pxだと2行目が枠に収まらず3行に折り返してしまうため */
  font-size: var(--fs-xl);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.18em;
  margin-bottom: 1rem;
}

.contact-text {
  font-size: var(--fs-xs);
  line-height: 1.85;
  letter-spacing: 0.06em;
  margin-bottom: 1rem;
}

.contact-note {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  margin-bottom: 1rem;
}

.contact-buttons { display: flex; gap: 1rem; flex-wrap: wrap; }

.btn-tel-large,
.btn-line-large {
  background: var(--white);
  padding: 0.875rem 1.875rem;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: var(--fs-md);
  line-height: 1.5;
  text-align: center;
  letter-spacing: 0.06em;
  min-width: 10.25rem;
}

.btn-tel-large { color: var(--primary); }
.btn-line-large { color: var(--line-green); }

.contact-staff-photo {
  position: absolute;
  right: 5%;
  bottom: 0;
  width: 10.625rem;
  height: auto;
  display: block;
}

/* ---- 人物写真の右下の肩書き・名前（2026-10-04 池上さん指示） ----
   左カラム下部（PC）・画面下の固定CTA（スマホ）の2か所で共通（本文中のCTAには入れない。同日の池上さん指示）。
   写真の右下に白文字で重ねる。服の色に左右されず読めるよう、ごく薄い影を付ける。
   位置（right・bottom）だけ、置き場所ごとに下で指定する */
.person-credit {
  position: absolute;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  color: var(--white);
  line-height: 1.3;
  letter-spacing: 0.1em;
  /* 肌（手元）の上に重なっても読めるよう、影を二重にする */
  text-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.55), 0 0 0.0625rem rgba(0, 0, 0, 0.4);
  pointer-events: none;
  white-space: nowrap;
}

/* 文字は小さめ（2026-10-04 池上さん指示で、肩書き 11→8px・名前 13→11px） */
.person-credit-role {
  font-size: var(--fs-3xs);
}

.person-credit-name {
  font-size: var(--fs-2xs);
  font-weight: 500;
}

/* 左カラム下部（PC）：人物（右5%）の右端から少し内側・白い帯の下端から少し上 */
.side-bottom .person-credit {
  right: calc(5% + 0.5rem);
  bottom: 0.5rem;
}

/* 画面下の固定CTAはスマホ専用のため、PCでは出さない（バーごと非表示だが念のため） */
.sp-cta-bar .person-credit {
  display: none;
}

/* ============================
   フッター
   ============================ */

footer {
  /* 背景パターンをフッターまで通すため、地色は敷かない */
  background: transparent;
  color: var(--text);
  /* top52pxは、.contact-sectionのbottom28px（演出上の理由で固定）と合わせて境界80pxにするため */
  padding: 3.25rem 2rem 2.5rem;
  text-align: center;
}

.footer-inner { max-width: 56.25rem; margin: 0 auto; }

.footer-logo {
  display: inline-block;
  margin-bottom: 1.75rem;
}

.footer-logo-full {
  height: 6rem;
  width: auto;
  display: block;
  margin: 0 auto;
}

.footer-sns { display: flex; align-items: center; justify-content: center; gap: 0.75rem; margin-bottom: 2rem; }

.footer-sns-label {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--primary);
  letter-spacing: 0.06em;
  margin-right: 0.5rem;
}

.footer-sns-icon {
  width: 1.875rem;
  height: 1.875rem;
  border-radius: 50%;
  background: var(--primary);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s;
}

.footer-sns-icon svg {
  width: 1.0625rem;
  height: 1.0625rem;
  display: block;
}

.footer-sns-icon:hover { opacity: 0.8; }

.footer-related { display: flex; justify-content: center; gap: 1rem; margin-bottom: 2rem; flex-wrap: wrap; }

/* 本藏院・菩提樹苑へのボタン。
   上下パディングの伸びを抑えたまま高さを増やし、その分をロゴの拡大にあてて
   枠に対するロゴの占める比率を上げている（50% → 63%） */
.footer-related-link {
  background: var(--white);
  color: var(--text);
  padding: 0.875rem 2.25rem;
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
}

.footer-related-logo {
  height: 2.75rem;
  width: auto;
  display: block;
}

.footer-legal { font-size: var(--fs-2xs); margin-bottom: 0.75rem; }
.footer-legal a { color: var(--text); opacity: 0.6; text-decoration: underline; }
.footer-legal a:hover { opacity: 1; }

.footer-copy { font-size: var(--fs-2xs); opacity: 0.5; }

/* ============================
   よくある質問（アコーディオン・サイト共通）
   ============================
   2026-09-11 lost.php 用に新設。よくある質問ページでも同じ部品を使う想定。
   構造: .faq-list > .faq-item > button.faq-question（.faq-q ＋ .faq-question-text ＋ .faq-chevron）
         と .faq-answer。開閉は js/main.js（aria-expanded と hidden 属性を切り替える）。
   ページ固有CSSに .faq-* を書かず、見た目の変更はここで行うこと。 */

.faq-list {
  border-top: 1px solid var(--faq-line);
  --faq-line: color-mix(in srgb, var(--primary) 30%, transparent);
}

.faq-item {
  border-bottom: 1px solid var(--faq-line);
}

.faq-question {
  width: 100%;
  display: grid;
  grid-template-columns: 2.5rem 1fr 1.5rem;
  column-gap: 0.75rem;
  align-items: center;
  padding: 1rem 0.5rem 1rem 0;
  background: none;
  border: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.faq-q {
  font-family: 'Shippori Mincho', serif;
  font-size: var(--fs-3xl);
  font-weight: 500;
  color: var(--primary);
  line-height: 1;
  text-align: center;
}

/* 2026-09-12 池上さん指示で --fs-lg から1段下げた */
.faq-question-text {
  font-size: var(--fs-md);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.05em;
}

/* 開いているときは上向き、閉じているときは下向きの細い山形 */
.faq-chevron {
  justify-self: end;
  width: 0.625rem;
  height: 0.625rem;
  margin-top: 0.3125rem;
  border-top: 1px solid var(--primary);
  border-left: 1px solid var(--primary);
  transform: rotate(45deg);
  transition: transform 0.2s, margin-top 0.2s;
}

.faq-question[aria-expanded="false"] .faq-chevron {
  margin-top: -0.3125rem;
  transform: rotate(225deg);
}

/* 回答は「Q」の列ぶん字下げして、質問の文字の頭にそろえる */
.faq-answer {
  padding: 0 0 1.25rem 3.25rem;
  color: var(--primary);
  line-height: 2;
  letter-spacing: 0.02em;
}

/* 回答の中のページ内リンク（2026-09-13 faq.php で初使用）。リンクだと分かるよう下線を付ける */
.faq-answer a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.faq-answer a:hover {
  opacity: 0.7;
}

/* PC・タブレット：回答の書き始め（質問の文字の頭）はそのまま、右端を枠の90%で折り返す
   （2026-09-12 池上さん指示で70%→90%。スマホは未着手のためここでは触らない） */
@media (min-width: 901px) and (min-height: 501px), (min-width: 1200px) {
  .faq-answer {
    max-width: 90%;
  }
}

.faq-more {
  text-align: center;
  margin-top: 2rem;
}

.faq-more .btn-pill {
  padding: 0.625rem 1.75rem;
  letter-spacing: 0.15em;
}

/* スマホ：スマホ用カンプ（1019_…よくある質問_sp.pdf・…ペットがなくなったら_sp.pdf。2026-10-21）に合わせる。
   回答は字下げせず「Q」の左端から全幅で書く。質問の文字は本文色・細め。回答は13px・行間1.8（本文の決まり）。
   lost・faq・pet-kuyou・pet-noukotsu・家族葬・お迎え葬のよくある質問すべてに効く */
@media (max-width: 900px), (max-width: 1199px) and (max-height: 500px) and (orientation: landscape) {
  .faq-question {
    grid-template-columns: 1.75rem 1fr 1.5rem;
    padding: 1.25rem 0.5rem 1rem 0.125rem;
  }

  .faq-q {
    font-size: var(--fs-5xl);
  }

  /* 折り返しは文節の切れ目で（「いけ／ないのですか」のように語の途中で切らない） */
  .faq-question-text {
    font-weight: 400;
    color: var(--text);
    letter-spacing: 0.12em;
    word-break: auto-phrase;
    /* 文節がひとつながりで長いと格子の列を押し広げて山形が画面外に出る（320px）。そのときだけ文節の途中でも折る */
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .faq-answer {
    padding: 0 0 1.5rem 0.125rem;
    font-size: var(--fs-sm);
    line-height: 1.8;
    letter-spacing: 0.05em;
  }
}

/* ============================
   下層ページ冒頭の写真（.fv-fit・2026-09-13 池上さん指示）
   ============================
   写真がページの一番上に来るページ（lost.php 以外）は、写真の高さをすべて about.php に合わせる。
   比率は about.php のカンプの 424:270（1200px時 593×377px）。

   さらに、写真の高さに「画面の高さ − 写真の下に続く冒頭のかたまり（--fv-below）」の上限を付ける。
   このサイトは画面幅に合わせて文字・余白が大きくなるため、横長の画面ほど冒頭のかたまりが
   画面の下にはみ出す。背の低い画面でだけ写真を低くして収める。
   --fv-below は about.php の冒頭（一文＋4つの円：実測16rem）＋余白2.5rem。全ページ共通の値にして、
   どのページでも写真の高さがそろうようにしている（ページごとに変えない）。
   12rem より低くはしない（写真の上のタイトルが窮屈にならないように）。
   スマホ（900px以下）は固定ヘッダー・下部ボタンがあり事情が違うため、上限は対象外 */
.fv-fit {
  aspect-ratio: 424 / 270;
  --fv-below: 18.5rem;
}

@media (min-width: 901px) and (min-height: 501px), (min-width: 1200px) {
  /* width:100% は必須。aspect-ratio を持つ要素は、幅が auto のままだと max-height が
     縦横比を通して幅にも効き、写真が横に縮む（右カラムいっぱいにならない）。
     幅を先に決めておくと、高さだけが上限で抑えられ、はみ出した分は写真の上下が切れる */
  .fv-fit {
    width: 100%;
    max-height: max(12rem, calc(100vh - var(--fv-below, 0rem)));
    max-height: max(12rem, calc(100svh - var(--fv-below, 0rem)));
  }
}

/* タブレット（901〜1199px）は about.php の4つの円が2段に折り返し、冒頭が高くなる（実測24.25rem）。
   全ページとも同じ値にして、写真の高さをそろえる */
@media (min-width: 901px) and (max-width: 1199px) and (min-height: 501px) {
  .fv-fit {
    --fv-below: 26.75rem;
  }
}

/* ============================
   スクロールでふわっと表示（サイト共通。2026-09-13 池上さん指示）
   ============================
   .reveal は js/main.js が「開いた時点で画面より下にあるブロック」にだけ付ける。
   JSが動かない環境では付かないので、最初から普通に見える。
   位置と不透明度だけを動かすため、レイアウト（ほかの要素の位置）は変わらない。
   表示し終えたら transform を外す（中の要素の重なり方に影響を残さないため） */

.reveal {
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity 0.9s ease-out, transform 0.9s ease-out;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ============================
   写真スライド（[data-slider]。2026-09-30新設・kazokusou.php）
   ============================
   写真を同じ位置に重ね、表示中（.is-active）だけを見せる。切り替えは js/main.js。
   新しい写真を上に重ねて浮かび上がらせ、浮かび終わるまで前の写真（.is-leaving）を下に残す
   （途中で地の色が透けないようにするため。ギャラリーのディゾルブと同じ考え方）。
   枠の大きさ・角丸・矢印・点の見た目はページ側のCSSで決める */

.slider-viewport {
  position: relative;
  overflow: hidden;
}

.slider-viewport [data-slide] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
}

.slider-viewport [data-slide].is-leaving {
  opacity: 1;
  z-index: 1;
}

.slider-viewport [data-slide].is-active {
  opacity: 1;
  z-index: 2;
  transition: opacity 0.6s ease;
}

@media (prefers-reduced-motion: reduce) {
  .slider-viewport [data-slide].is-active { transition: none; }
}

/* ============================================================
   PCレイアウト（1200px以上を基準）
   左固定カラム＋右スクロールカラムの2カラム構成
   1200px未満は今回未対応（後工程でSP版レイアウトを実装）
   ============================================================ */

/* ============================================================
   PC・タブレット共通レイアウト（901px以上）
   ============================================================
   左固定カラム＋右スクロールカラムの2カラム構成。
   2026-09-10、池上さんの指示で「タブレットもPCと同じ仕様」に変更し、
   適用範囲を 1200px以上 → 901px以上へ広げた。
   901〜1199pxは 1rem=16px 固定のまま横幅だけが縮むため、
   はみ出しが出る箇所だけを後段のタブレットブロックで上書きする。
   ============================================================ */
@media (min-width: 901px) and (min-height: 501px), (min-width: 1200px) {

  .side-fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--side-w);
    height: 100vh;
  }

  .side-bottom {
    position: fixed;
    left: 0;
    bottom: 0;
    width: var(--side-w);
    height: 20%;
  }

  .main-scroll {
    margin-left: var(--side-w);
  }

  /* 犬の写真だけ上へずらす。この画像は被写体が下寄りで、そのままだと
     前足が下部CTAの白帯に潜り込むため、足先が見える位置まで上げる。
     下に空く分は白帯の裏に隠れるので見えない（他の2枚には掛けない）。
     .side-fixedの高さが100vhなので、固定pxだと画面が縦に長い端末で
     ズレて足先が再び見えなくなる。vh単位にして画面の高さに連動させる */
  .side-photo-item img.obj-dog {
    transform: translateY(-16vh);
  }

}


/* ============================================================
   スマートフォン（900px以下）
   ============================================================
   ここから下がスマホ専用。**スマホの調整は必ずこのブロック内で行う。**
   上の共通スタイルを書き換えるとPC版（1200px以上）が崩れるため、
   共通スタイルは触らず、このブロックでの上書きだけで対応する。
   このブロックは900px以下にしか適用されないので、
   ここに何を書いてもPC版には影響しない（＝安全に作業できる）。

   設計の基準:
     ・標準は 390px（iPhone 12〜15 相当）で組む
     ・最小 320px でも崩れないこと（iPhone SE 第1世代 相当）
     ・320〜900px は同じ設計で通す（この範囲で作り分けはしない）

   注意: 上の方に古い `@media (max-width: 900px)` ブロック（3つの安心用）が
   別途あり、900px以下では両方が効く。競合したときは後に書かれたこちらが勝つ。
   ============================================================ */

@media (max-width: 900px), (max-width: 1199px) and (max-height: 500px) and (orientation: landscape) {

  /* ---- 1. スティッキーヘッダー（ロゴ＋メニュートグル） ---- */

  :root {
    /* スティッキーヘッダーの高さ。ここを変えると本文の開始位置・
       ファーストビューの高さ・メニュー内のロゴ位置・×ボタンの縦位置が
       すべて連動する。高さを変えてもファーストビューの中身は動かない
       （.mv の padding-bottom で増減分を相殺しているため） */
    /* 80px → 64px（2026-10-04 池上さん指示。ロゴ48px・メニューボタン38pxの大きさは変えず、上下の余白だけ削る） */
    --sp-header-h: 64px;

    /* 画面下の固定CTAの高さ。中身の折り返しで端末ごとに変わるため、
       js/main.js が実測値で上書きする（この値は読み込み前のフォールバック） */
    --sp-cta-h: 95px;

    /* ファーストビューの高さ（画面の見えている高さ − ヘッダー）。ツールバーが出ている状態の高さ（svh）で測る */
    --sp-fv-h: calc(100svh - var(--sp-header-h));
    /* 下層ページ冒頭の大きなロゴのかたまり（.sp-page-logo：上下の余白 2.5rem ＋ 画面幅66%のロゴの高さ 24.13vw。2026-10-21 小さくした・10-22 上下とも1.25remに） */
    --sp-logo-block: calc(2.5rem + 24.13vw);
    /* 下層ページ冒頭の写真（.fv-fit：画面幅いっぱい・424:270） */
    --sp-fv-photo: calc(100vw * 270 / 424);

    /* 本文の文字を1段階大きくする（2026-10-21 池上さん指示「スマホの全ページで、タイトル以外の本文を1つ大きく」）。
       本文・注記に使う下の3段階だけを1段ずつ繰り上げる（11→12・12→13・13→14px）。
       見出しに使う --fs-md 以上は変えない。PCには効かない */
    --fs-2xs: 0.75rem;
    --fs-xs:  0.8125rem;
    --fs-sm:  0.875rem;
  }

  .sp-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--sp-header-h);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    background: var(--white);
    /* box-sizingは全体でborder-box。paddingを含めて100%に収める */
    box-sizing: border-box;
  }

  /* 2026-10-22 池上さん指示でひと回り大きく（48→54px。ヘッダーの高さ64pxの中で上下5px） */
  .sp-header-logo img {
    height: 54px;
    width: auto;
  }

  /* ハンバーガー：円枠の中に3本線 */
  .sp-menu-btn {
    width: 38px;
    height: 38px;
    border: 1px solid var(--primary);
    border-radius: 50%;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
  }

  .sp-menu-btn-bars,
  .sp-menu-btn-bars::before,
  .sp-menu-btn-bars::after {
    display: block;
    width: 16px;
    height: 1.5px;
    background: var(--primary);
  }

  .sp-menu-btn-bars {
    position: relative;
  }

  .sp-menu-btn-bars::before,
  .sp-menu-btn-bars::after {
    content: '';
    position: absolute;
    left: 0;
  }

  .sp-menu-btn-bars::before { top: -5px; }
  .sp-menu-btn-bars::after  { top: 5px; }

  /* 本文はヘッダーの高さぶん下げ、下端は固定CTAに隠れないよう空ける */
  body {
    padding-top: var(--sp-header-h);
    padding-bottom: var(--sp-cta-h);
  }


  /* ---- 2. 本体：PCの右カラムを幅100%で表示 ---- */

  .main-scroll {
    margin-left: 0;
    width: 100%;
  }

  /* ファーストビューのロゴ：高さ固定だと親幅に収まらず、
     img{max-width:100%} で横だけ潰れて縦長に見えてしまう。
     スマホでは幅基準にして縦横比を保ち、コンテンツ幅(=画面の80%)いっぱいに広げる */
  .mv-logo-full {
    height: auto;
    width: 100%;
    max-width: none;
  }

  /* ロゴ・バッジはデバイス幅の80%（.mv の左右padding 10%ずつ）に揃えるが、
     文章ブロックだけは最長行の幅まで縮めて中央に置く。
     width:100% にすると行が左端に張り付き、右側にだけ余白が残って
     ブロック全体が左に寄って見えるため（行そのものは左詰めのまま） */
  .mv-text-block {
    width: fit-content;
    margin-inline: auto;
  }


  /* ---- 3. 左カラム → 全画面メニュー（トグルで開閉） ---- */

  /* 下端は画面下の固定CTAバーの上で止める。全画面にすると本体で見えている
     電話・LINEのボタンがメニュー中だけ隠れてしまうため */
  .side-fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: var(--sp-cta-h);
    width: 100%;
    height: auto;
    z-index: 1100;
    background: var(--bg);
    display: block;
    /* 既定は閉じた状態。開くと .is-open が付く */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    overflow: hidden;
  }

  .side-fixed.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  /* メニュー上部：ロゴと×ボタン */
  .side-header {
    position: static;
    height: auto;
    pointer-events: auto;
  }

  .side-top {
    position: absolute;
    top: 0;
    left: 16px;
    right: auto;
    height: var(--sp-header-h);
    display: flex;
    align-items: center;
  }

  /* メニューを開いたときのロゴ。スティッキーヘッダーのロゴと同じ大きさ・同じ位置に重ねる（2026-10-22 48→54px） */
  .side-logo-full {
    height: 54px;
  }

  .sp-menu-close {
    position: absolute;
    /* ヘッダーの高さの中央に来るように（ボタンは38px角） */
    top: calc((var(--sp-header-h) - 38px) / 2);
    right: 16px;
    width: 38px;
    height: 38px;
    border: 1px solid var(--primary);
    border-radius: 50%;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    z-index: 2;
  }

  .sp-menu-close span {
    position: relative;
    display: block;
    width: 16px;
    height: 16px;
  }

  .sp-menu-close span::before,
  .sp-menu-close span::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1.5px;
    background: var(--primary);
  }

  .sp-menu-close span::before { transform: rotate(45deg); }
  .sp-menu-close span::after  { transform: rotate(-45deg); }

  /* 縦書きナビ：ヘッダーから少し下げ、背景写真の上端より内側から始める */
  .side-nav {
    position: absolute;
    top: calc(var(--sp-header-h) + 50px);
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    /* タップで開く子メニュー（お見送りのかたち・ペット納骨）が、下の SNS（z-index 2）・動物（1）より前に出るよう3にする（2026-10-22 池上さん指示） */
    z-index: 3;
    pointer-events: auto;
  }

  /* 縦書きなので padding-top は視覚的に「横幅」になる。
     7項目 ×(文字17+padding12) + gap14×6 = 287px で、320px幅でも収まる */
  .side-nav ul {
    gap: 14px;
  }

  /* 実機の iPhone（Safari）で、縦書きの項目の幅が0近くまで潰れ、各項目が数文字ずつ折り返して
     隣と重なる不具合があった（2026-10-04。PCのChromeや検証用の表示では再現しない）。
     横並びの中に縦書きを置くと、項目の幅をブラウザが文字から計算する必要があり、その計算が
     iOS Safari では正しく行われないため。幅を「1行ぶん（行の高さ1.8 × 文字サイズ）」で明示し、
     折り返しも禁止して、ブラウザの計算に頼らないようにする */
  .side-nav a,
  .side-nav-parent {
    font-size: 17px;
    padding-top: 12px;
    width: 1.8em;
    line-height: 1.8;
    white-space: nowrap;
  }

  .side-nav li {
    flex: none;
  }

  .side-nav-emphasis a {
    font-size: var(--fs-xl);
  }

  /* 子メニュー（タップで開く）。指で押しやすい大きさ・間隔にする */
  .side-nav .side-nav-sub {
    padding: 0 4px;
  }

  /* 子メニューに添える一言：名前の下に続けて、小さく・少し薄く（2026-10-29 池上さん指示。スマホだけ） */
  /* 補足の書き出しをそろえるため、名前の長さを一番長い「お迎え葬」（4文字）＋1文字半ほどの余白にそろえ、補足はそこから始める（2026-10-29 池上さん指示） */
  .side-nav-label {
    display: inline-block;
    inline-size: 5.6em;
  }

  .side-nav-note {
    display: inline;
    font-size: 0.68em;
    letter-spacing: 0.18em;
    opacity: 0.8;
  }

  /* 補足を入れた子メニューは、白い枠を親より下へ広げる（補足が枠の下端に詰まらないように） */
  .side-nav-has-sub .side-nav-sub:has(.side-nav-note) {
    bottom: -3.25rem;
    padding-bottom: 0.75rem;
  }

  /* 文字の大きさは親と同じ17px。書き出しは親の文字の位置（上の線2px＋余白12px）にそろえる。
     項目の幅は親と同じ1行ぶん（1.8em）に左右の余白を足す（足さないと文字が左へはみ出す） */
  .side-nav .side-nav-sub a {
    width: calc(1.8em + 16px);
    padding: 14px 8px 0;
  }

  /* 動物写真のスライドはメニューでは使わない（2026-10-21 スマホ用カンプで、犬の写真の背景から
     地の色＋下端の動物の切り抜き .sp-menu-animals に変更） */
  .side-photo-slide {
    display: none;
  }

  /* メニュー下部の動物（猫・モルモット・犬）。メニューの下端（＝画面下の固定CTAの上端）に足元をそろえる。
     大きさ・位置はスマホ用カンプ（390px幅）の実測。モルモットは犬の左に寄せて置く（幅が狭い画面でも重ならない） */
  .sp-menu-animals {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 10rem;
    z-index: 1;
    pointer-events: none;
  }

  .sp-menu-animal {
    position: absolute;
    bottom: 0;
    width: auto;
  }

  .sp-menu-animal.is-cat {
    left: 1.25rem;
    height: 10rem;
  }

  .sp-menu-animal.is-guineapig {
    right: 8rem;
    height: 3.25rem;
  }

  .sp-menu-animal.is-dog {
    right: 0.9375rem;
    height: 9.75rem;
  }

  /* 背の低い画面（iPhone SE など）ではメニュー一覧とSNSが動物に重なるため、動物を小さくしてSNSも下げる */
  @media (max-height: 720px) {
    .sp-menu-animals,
    .sp-menu-animal.is-cat {
      height: 7rem;
    }

    .sp-menu-animal.is-dog {
      height: 6.75rem;
    }

    .sp-menu-animal.is-guineapig {
      right: 6rem;
      height: 2.25rem;
    }

    /* 下に書いた .sp-menu-sns の基本の指定に負けないよう、.side-fixed を足して強める */
    .side-fixed .sp-menu-sns {
      bottom: 9rem;
    }
  }

  /* さらに背の低い画面（ツールバーが出ている iPhone SE は約550px）では、メニュー一覧の下に動物を置く余白がないため出さない。
     SNS は以前（犬の写真の背景のころ）と同じ下端近くに戻す */
  @media (max-height: 600px) {
    .sp-menu-animals {
      display: none;
    }

    .side-fixed .sp-menu-sns {
      bottom: 56px;
    }
  }

  /* PCの下部CTA（電話・LINE）とキャラクターはメニューでは使わない */
  .side-bottom {
    display: none;
  }

  /* メニュー下部のSNS（動物の上。カンプでは猫の頭の約60px上） */
  .sp-menu-sns {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 13.75rem;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
  }

  .sp-menu-sns-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--primary);
    letter-spacing: 0.06em;
    margin-right: 4px;
  }

  .sp-menu-sns-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--primary);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .sp-menu-sns-icon svg {
    width: 17px;
    height: 17px;
    display: block;
  }

  /* メニューを開いている間は背面をスクロールさせない */
  body.is-menu-open {
    overflow: hidden;
  }


  /* ---- 3.5 画面下の固定CTA ---- */
  /* PC版の左カラム下部（.side-bottom）と同じ構成・同じ配色のまま、
     寸法と間隔だけスマホ向けに詰めて画面下に貼り付ける */

  .sp-cta-bar {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 900;
    background: var(--white);
    display: flex;
    align-items: flex-end;
    gap: 8px;
    /* 上下の余白は 10px → 上5px・下9px（2026-10-04 池上さん指示。文字・ボタン・人物の大きさは変えず、余白だけで高さを調整） */
    padding: 5px 16px 9px;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.06);
    /* ページを少しスクロールするまでは画面の下に隠す（js/main.js が .is-shown を付ける。2026-10-04 池上さん指示）。
       影が画面の下端に残らないよう、影の分（16px）まで余分に下げる。隠れている間はタップ・フォーカスもさせない */
    transform: translateY(calc(100% + 16px));
    visibility: hidden;
    transition: transform 0.4s ease, visibility 0s linear 0.4s;
  }

  /* メニューを開いているときは、スクロール位置に関係なく出す */
  .sp-cta-bar.is-shown,
  body.is-menu-open .sp-cta-bar {
    transform: none;
    visibility: visible;
    transition: transform 0.4s ease, visibility 0s;
  }

  .sp-cta-bar-inner {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  /* リード文：PCは14pxだが、キャラクターと並べる幅に収めるため11pxに。
     狭い端末では折り返してよいので nowrap は外す */
  .sp-cta-bar .side-cta-lead {
    font-size: 11px;
    letter-spacing: 0.04em;
    white-space: normal;
  }

  /* ボタンはPCの max-width:362px を外すが、キャラクターの分の余白は
     確保しつつ、なるべく広く取る */
  .sp-cta-bar .side-cta-buttons {
    max-width: 96%;
  }

  /* キャラクターはPCと同じく右端・下端に接して立つ。もう少し大きく見せる（76→88→96px・2026-10-04）。
     バーの下の余白（9px）を負の余白で打ち消し、足元をバーの下端に付ける。
     上の負の余白で、人物の高さ（96−9−10＝77px）がボタン側（81px）を超えないようにし、バーの高さを人物で押し広げない。
     頭はバーの上端から少しはみ出す。
     バーの下の余白（10px）を負の余白で打ち消し、胸元で切れた下端をバーの下端にぴったり付ける（2026-10-04 池上さん指示） */
  .sp-cta-character {
    height: 96px;
    width: auto;
    flex-shrink: 0;
    display: block;
    margin-top: -10px;
    margin-bottom: -9px;
  }


  /* ---- 4. 本体のはみ出し対策（横スクロールを消す） ---- */

  /* 施設・アクセス：写真とテキストの2カラムをやめて縦に積む。
     PCでは .access-name に white-space:nowrap があり、それが grid の 1fr を
     押し広げて画面外まではみ出していたため、折り返しも許可する */
  .access-card {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .access-name {
    white-space: normal;
    text-align: center;
  }

  /* 所在地・電話番号などの本文は1段階上げる（--fs-xs → --fs-sm。2026-10-04 池上さん指示） */
  .access-detail {
    font-size: var(--fs-sm);
  }

  /* サービスカード：写真とテキストの横並びをやめて縦に積む。
     横並びのままだとテキスト側が96pxしかなく、そこに入る
     「家族葬の詳細・料金はこちら」(nowrapで169px)が画面外へはみ出していた */
  .service-card {
    flex-direction: column;
  }

  /* 本文ブロックは中身の最長行の幅まで縮めてカード内で中央に置く。
     こうするとタイトル・説明文・箇条書きの左端が1本の線で揃い、
     そのかたまりごと中央に来る（共通スタイルの align-items:flex-start は
     縦積みだと「幅を内容に合わせる」指定になるため、それを活かしている） */
  .service-card-body {
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  /* タイトルは本文ブロックの中で中央に置く */
  .service-card-title {
    font-size: var(--fs-2xl);
  }

  /* 写真は縦長をやめて正方形に近づける。
     縦積みでは flex:1 が高さ方向に効き、枠の高さが写真の読み込みを待って決まっていた（読み込み中に下の文がずれる）。
     flex をやめ、高さは比率だけで決める（2026-10-30。見た目の大きさは変えていない。幅は今までどおり写真の大きさ＝img の width/height 属性から決まる） */
  .service-card-photo {
    flex: none;
    aspect-ratio: 1 / 1;
  }

  /* 見出しはPCと同じくカード左側に縦書きのまま置く。
     文字サイズと余白をモバイル向けに詰めて、320px幅でもカード側の
     「家族葬の詳細・料金はこちら」（nowrap）がはみ出さない幅を確保する */
  .service-layout {
    gap: 1rem;
  }

  /* 縦書きの見出しはカード左側に固定（スクロール追従は廃止。2026-11-02 池上さん指示）。
     追従の止まる位置を js/main.js が下の余白で入れていたが、縦書きでは下の余白が1行の長さを削るため、
     iPhoneでスクロールするうちに見出しが1文字ずつ折り返し、カードが押し潰されて横スクロールが出ていた */
  .section-title-vertical {
    left: 0;
    margin-top: 0;
    font-size: var(--fs-3xl);
    letter-spacing: 0.28em;
  }

  .service-cards .service-card:first-child {
    margin-top: 0;
  }

  .mv {
    /* スマホではヘッダーと下部CTAを除いた高さが使える領域になるので、
       ファーストビュー専用単位もその高さを基準に取り直す。
       これをしないと中身が領域に収まらず .mv が伸び、動物写真がCTAバーに潜り込む。
       38.2 = コンテンツ全体37.3単位（上下padding込み）＋ 安全マージン0.9 */
    /* 2026-10-04 見直し（実機のiPhoneでロゴがヘッダーに潜り、動物が下部ボタンに隠れていた）：
       ・高さの基準は svh（ブラウザのアドレス欄・下のツールバーが出ている状態の高さ）に固定する（池上さん指示）。
         dvh だとスクロールでツールバーが隠れる・出るたびに基準が変わり、ファーストビュー全体が拡大縮小してしまうため
       ・スマホではロゴ（幅の80%）とバッジ（幅の80%を3等分）の高さが --u ではなく画面幅で決まる。
         旧式（÷38.2）はこれを --u の分として数えていたため中身が領域より約30px高くなり、
         上下にはみ出してロゴがヘッダーに、動物が下部ボタンに潜っていた。
         そこで画面幅で決まる分（ロゴ 29.26vw ＋ バッジ 26.67vw − 8px ＋ ヘッダー相殺分 12px ＝ 55.93vw ＋ 4px）を先に引き、
         残りを --u で決まる分（実測24.8単位＋余裕0.7）で割る
       ・同日、コピーと説明文を --u 連動から固定サイズ（--fs-lg・--fs-xs）に変えたため、その高さも先に引く。
         コピー3行（16px×行間1.6×3＝76.8px）＋説明文3行（13px×1.8×3＝70.2px）を足して 151px（端数切り上げ）。
         --u で決まる分は実測16単位になったので、余裕0.7を足して16.7で割る
       ・画面下の固定CTAは、ページを開いた時点では隠れている（スクロールで出る）ため、その高さは引かない。
         引くと文字が小さくなりすぎる（ツールバーありの393×665で、説明文が7.6px）
       上の dvh の行は svh 非対応ブラウザ用の予備 */
    --u: min(1rem, (100dvh - var(--sp-header-h) - 55.93vw - 151px) / 16.7);
    --u: min(1rem, (100svh - var(--sp-header-h) - 55.93vw - 151px) / 16.7);

    /* ヘッダーのぶんを引いて、動物写真の足先が画面の下端（ツールバーの上）に来るようにする。
       動物は .mv に bottom:0 で貼り付いている。固定CTAはスクロールしてから出るので、開いた時点では重ならない */
    min-height: calc(100dvh - var(--sp-header-h));
    min-height: calc(100svh - var(--sp-header-h));
    /* 左右10%ずつ空けることで、内側（ロゴ・文章・バッジ）がデバイス幅の80%になる */
    padding-left: 10%;
    padding-right: 10%;
    /* ロゴ〜バッジのかたまりを画面の上下中央あたりに置く。
       要素どうしの間隔（各margin）は変えていない。
       padding-topを少し持たせて中央位置をわずかに下げている
       （動物写真の頭とバッジの間には十分な余白があるため、下げても重ならない） */
    justify-content: center;
    padding-top: calc(1.5 * var(--u));
    /* 下端には動物写真(9u)が貼り付いているので、その高さぶんを空けておく。
       こうすると「画面上端〜動物の上端」の範囲で中央に置かれ、
       縦の短い端末（iPhone SE 375x667 など）でもバッジと動物が重ならない。

       後半の (--sp-header-h - 68px) は、ヘッダーを高くしても
       ロゴ・コピー・バッジの画面上の位置が変わらないようにするための相殺分。
       ヘッダーが高くなると .mv の上端が下がり中央も下がるので、その分だけ
       下余白を増やして打ち消している（68pxが基準の高さ）。
       ただし 12px は下回らせない。これがバッジと動物の頭の間の隙間も兼ねているため
       （2026-10-04 ヘッダーを64pxに下げたとき、相殺分が −4px になってバッジと動物が接したので下限を付けた） */
    padding-bottom: calc(9 * var(--u) + max(var(--sp-header-h) - 68px, 12px));
  }

  /* スマホでだけ効く改行（br.sp-only）を有効化 */
  br.sp-only {
    display: inline;
  }

  /* PCでだけ効かせたい改行（br.pc-only）。スマホでは改行を消して自然に折り返す（2026-10-15 供養ページFAQで追加） */
  br.pc-only {
    display: none;
  }

  /* 下層ページ冒頭の大きなロゴ（inc/sp-page-logo.php。2026-10-21 アクセスのスマホ用カンプから共通化）。
     大きさ・余白は家族葬の .miokuri-sp-logo（2026-09-30 池上さん指示で詰めた値）と同じ */
  /* 2026-10-21 池上さん指示で小さく（幅80%→66%）・上へ（上の余白 2rem→1rem）。2026-10-22 さらに上へ（1rem→0.25rem）。
     その後、ロゴの高さをトップ・家族葬・お迎え葬（ヘッダーの下から1.25rem）にそろえ、ロゴ〜冒頭の写真も同じ 1.25rem にした（2026-10-22 池上さん指示）。
     余白を変えたら :root の --sp-logo-block も合わせる */
  .sp-page-logo {
    display: block;
    padding: 1.25rem 0;
  }

  .sp-page-logo img {
    display: block;
    width: 66%;
    height: auto;
    margin: 0 auto;
  }

  /* ロゴとコピーの間隔を広げて、コピーの位置を少し下げる */
  .mv-logo {
    /* PCの上の負の余白（-1.875u）はスマホでは使わない。ロゴがヘッダーの下に潜るため（2026-10-04） */
    margin-top: 0;
    margin-bottom: calc(2 * var(--u));
  }

  /* 1行目「たくさんの幸せをくれた我が仔へ。」16文字を、幅80%の中で1行に収める。
     16px固定だと iPhone SE2/3(375px幅) で使える幅288pxに対し294px必要となり
     4行に折り返すため、画面に連動する --u（390pxで16px / 375pxで14.8px）にする */
  /* 2026-10-04 池上さん指示で1段階上げ（実機で小さかったため）。--u 連動（ツールバーありで約14px）をやめ、
     --fs-lg（16px）に固定する。ただし1行目16文字（16字×1.15＝18.4字分）が幅80%に収まるよう、
     狭い端末では画面幅に連動させる（4.2vw：375pxで15.75px） */
  .mv-copy {
    font-size: min(var(--fs-lg), 4.2vw);
    letter-spacing: 0.15em;
  }

  /* 文章とバッジの間隔を広げて、バッジの位置を少し下げる。
     行ごとは左揃えのまま、ブロック自体（width:fit-content）を
     画面中央に置く（PCと同じ「左詰めの中央配置」） */
  .mv-text-block {
    margin-bottom: calc(2.5 * var(--u));
    text-align: left;
  }

  /* 説明文：行間はPCの2.2だと間延びするのでサイト標準（body と同じ1.8）に詰める。
     文字サイズは、幅80%（390pxで300px）の中で最長行
     「ご自宅からお見送りできる「お迎え葬」まで。」を1行に収めるため 0.75u に下げる
     （13pxのままだと306px必要で折り返し、意図の3行が5行になる） */
  /* 2026-10-04 池上さん指示で2段階上げ。--u 連動（ツールバーありで約10.6px）をやめ、--fs-sm（13px）に固定する。
     最長行（13pxで約306px）が幅80%に収まるよう、狭い端末では画面幅に連動させる（3.4vw：375pxで12.75px） */
  .mv-desc {
    font-size: min(var(--fs-sm), 3.4vw);
    line-height: 1.8;
  }

  /* バッジ3つで幅80%を埋める。幅を%で出し、aspect-ratioで正円を保つので
     320px〜900pxのどの幅でも常に画面の80%に収まる */
  .mv-badges {
    gap: 12px;
  }

  .badge-pill {
    width: calc((100% - 24px) / 3);
    height: auto;
    aspect-ratio: 1 / 1;
    padding: 6px;
  }

  /* 1段階上げて --fs-xs（12px。2026-10-04 池上さん指示。元は --fs-2xs の11px）。
     ただし 320px 幅ではバッジ内側61pxに対し「24時間」が12pxで63px必要になり収まらないため、
     狭い端末では画面幅に連動させて縮める（3.4vw：320pxで10.9px・353px以上で12px） */
  .badge-pill-title {
    font-size: min(var(--fs-xs), 3.4vw);
  }

  /* 子犬を抱く手元の写真：PCの50vhのままだと画面の半分を占めて縦に間延びするため
     30vh程度に抑える */
  .photo-wide-single {
    height: 30vh;
    height: 30svh;
  }

  /* 説明文の行そのものは左詰め。ブロックごと中央に寄せるのは
     .service-card-body 側で行っている */
  .service-card-desc {
    font-size: var(--fs-lg);
    text-align: left;
  }

  .service-features li {
    font-size: var(--fs-md);
  }


  /* ---- 5. 3つの安心：カード内を「見出し＋写真・本文の横並び」に組み替える ---- */
  /* 上段に見出しを1本通し、下段で写真と本文を3:7の幅で並べる。
     HTMLは触らず、.anshin-body を display:contents で透過させて
     h3とpを直接グリッドに載せている */

  /* 「さらのそのが選ばれる」を一段大きく（上の900px以下ブロックの --fs-2xl を上書き） */
  /* 幅いっぱいの均等割り付け：.anshin-title-groupが子要素の内容に合わせて縮む
     (shrink-to-fit)ため、まずgroup自体をwidth:100%でコンテナ幅まで広げてから、
     title-subをそのgroup幅いっぱいにwidth:100%で広げ、text-justifyで文字間を自動調整する。
     右詰め用のmargin-right(負値)は不要になるため打ち消す */
  .anshin-title-group {
    width: 100%;
  }

  .anshin-title-sub {
    font-size: var(--fs-4xl);
    width: 100%;
    text-align: justify;
    text-align-last: justify;
    text-justify: inter-character;
    margin-right: 0;
  }

  .anshin-card {
    display: grid;
    grid-template-columns: 4fr 6fr;
    grid-template-areas:
      "title title"
      "photo text";
    column-gap: 1rem;
    row-gap: 1rem;
    align-items: start;
  }

  .anshin-body {
    display: contents;
  }

  /* 見出しは幅いっぱいに置き、下線で見出しらしく区切る
     （縦積みのときに写真と本文を分けていた区切り線を、ここへ移している） */
  /* 16px固定だと最長行（17文字）が320px幅で2行に収まらず3行に折り返すため、
     狭い端末だけ画面幅に連動させる。364px以上では 16px で頭打ちになる */
  .anshin-item-title {
    grid-area: title;
    font-size: min(var(--fs-lg), 4.4vw);
    border-bottom: 1px solid rgba(218, 83, 107, 0.45);
    padding-bottom: 0.75rem;
    margin-bottom: 0;
  }

  .anshin-photo-wrap {
    grid-area: photo;
    margin-bottom: 0;
  }

  /* 3fr列の幅いっぱいに広げ、正円を保つ */
  .anshin-photo {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
  }

  /* 本文は1段階上げる（--fs-xs → --fs-sm。2026-10-04 池上さん指示） */
  .anshin-text {
    grid-area: text;
    font-size: var(--fs-sm);
  }

  /* 見出しはPCの3行から2行へ。繋げたいspanどうしを inline にして同じ行に流す。
     区切り位置がカードごとに違うため、カード単位で指定している
       1枚目「最初から最後まで、／お気持ちに「寄り添う」専任スタッフ」
       2枚目「ご家族様の想いに合わせて選べる、／お寺ならではのご供養」
       3枚目「費用の不安なく、／心ゆくまでお別れしていただくために」 */
  .anshin-card:nth-child(1) .anshin-item-title span:nth-child(n+2),
  .anshin-card:nth-child(3) .anshin-item-title span:nth-child(n+2),
  .anshin-card:nth-child(2) .anshin-item-title span:nth-child(-n+2) {
    display: inline;
  }


  /* ---- 6. 写真2枚オフセット配置 ---- */

  /* 子供と子犬：縦長だと画面を占有しすぎるため、高さを抑えた横広にする */
  .photo-offset-dog {
    width: 50%;
    height: 10rem;
  }

  /* 丸い子猫：犬の写真を小さくしたぶん、こちらも一回り小さくする。
     bottomを上げて、犬の写真との重なりを浅くしている */
  .photo-offset-cat {
    width: 9.5rem;
    height: 9.5rem;
    bottom: 1.5rem;
  }


  /* ---- 7. お知らせ ---- */

  /* 白いカードの上下余白を詰める（下側はうさぎの分だけ残す）。
     左右は5%ずつにして、日付・本文の並ぶ幅を白枠の90%まで広げる */
  .news-card {
    padding-top: 2rem;
    padding-bottom: 3rem;
    padding-left: 5%;
    padding-right: 5%;
  }

  .news-character-slot {
    width: 3rem;
  }

  .news-title {
    font-size: var(--fs-3xl);
  }

  /* 日付と本文を横並びから2段に組み替える。矢印だけは右端に置いたままにしたいので、
     grid-template-areas で右列に縦通ししている。
     日付の固定幅(120px)を外して、日付と本文の左端を1本の線に揃える */
  .news-link {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "date  arrow"
      "text  arrow";
    row-gap: 0.25rem;
    column-gap: 0.5rem;
    align-items: center;
    /* PC比で縦の余白が空きすぎるため詰める */
    padding: 0.75rem 0.25rem;
  }

  .news-date {
    grid-area: date;
    width: auto;
  }

  .news-text {
    grid-area: text;
    padding-right: 0;
  }

  .news-arrow {
    grid-area: arrow;
    margin-left: 0;
  }


  /* ---- 8. 施設・アクセス ---- */

  /* 外観写真は4:3。PCは高さを詰めて建物の一部を切っていたが、
     スマホでは建物全体が入るよう縦位置を中央に戻す */
  .access-photo {
    height: auto;
    aspect-ratio: 4 / 3;
  }

  .access-photo img {
    object-position: center center;
  }


  /* ---- 9. ご相談窓口CTA ---- */
  /* PCは「本文｜写真」の2カラムだが、スマホではその写真列(170px)に押されて
     本文が164pxまで痩せ、見出しから箇条書きまで全部が折り返していた。
     列を持たせるのをやめ、本文を広く取ったうえで写真を右下に重ねる */

  .contact-inner {
    display: block;
  }

  /* CTAの帯の下に余白を足す（2026-10-04 池上さん指示）。ページ途中のCTAと、フッター前のCTAの両方に効く */
  .contact-section {
    margin-bottom: 1.25rem;
  }

  /* 写真より前面に置き、本文は写真にかからない幅で止める */
  .contact-body {
    position: relative;
    z-index: 2;
    max-width: 72%;
  }

  /* 指定の改行（3行）を保てる大きさに。20px固定だと320px幅で
     1行目「私たちがどんな時でも」が収まらないため画面幅に連動させる */
  .contact-title {
    font-size: min(var(--fs-xl), 5.2vw);
  }

  /* 本文と注記も同様に、最長行（16文字）が320px幅で折り返さない大きさへ。
     385px以上では従来どおり12pxで頭打ちになる */
  .contact-text,
  .contact-note {
    font-size: min(var(--fs-xs), 3.6vw);
  }

  /* 本文は2段階上げる（--fs-xs → --fs-sm → --fs-md。2026-10-04 池上さん指示）。
     最長行が狭い端末で折り返さないよう、同じく画面幅に連動させる（3.9vw：320pxで12.5px・359px以上で14px） */
  .contact-text {
    font-size: min(var(--fs-md), 3.9vw);
    line-height: 1.8; /* 本文の行間の基準（2026-10-04） */
  }

  /* ボタンは横1列。共通の min-width:164px が2つ分で入りきらず
     縦積みになっていたので、それを外して帯幅を分け合う */
  .contact-buttons {
    flex-wrap: nowrap;
    gap: 0.5rem;
  }

  .btn-tel-large,
  .btn-line-large {
    min-width: 0;
    flex: 1;
    padding: 0.75rem 0.5rem;
    font-size: var(--fs-xs);
  }

  /* 右端に寄せて大きめに。素材は膝上で切れているため、下端を帯の下のふちにぴったり付ける
     （以前は1rem浮かせていたが、切れ目が見えるため 2026-10-04 池上さん指示で変更） */
  .contact-staff-photo {
    width: 44%;
    right: 0;
    bottom: 0;
  }

  /* 画面下の固定CTA：人物（右16px）の右下。人物が小さいので文字も一段小さくする */
  .sp-cta-bar .person-credit {
    display: flex;
    right: 20px;
    bottom: 6px;
  }

  /* スマホの固定CTAは人物が小さいので、肩書き・名前とも最小の段階（--fs-3xs：8px）にする */
  .sp-cta-bar .person-credit-name {
    font-size: var(--fs-3xs);
  }

  /* ---- 8. フッター：関連リンクのロゴを横並びから縦積みにし、大きく見せる ---- */
  .footer-related {
    flex-direction: column;
    align-items: center;
  }

  .footer-related-link {
    width: 100%;
    max-width: 16rem;
    justify-content: center;
    padding: 1.25rem 1.75rem;
  }

  .footer-related-logo {
    height: 3.25rem;
  }

  /* コピーライトを固定CTAバーの直上、余白ほぼなしまで詰める */
  footer {
    padding-bottom: 0.75rem;
  }

  .footer-copy {
    font-size: var(--fs-3xs);
  }

}


/* ============================================================
   タブレット（901px〜1199px）
   ============================================================
   2026-09-10、池上さんの指示により「タブレットもPCと同じ仕様」に決定。
   レイアウトそのものは上の 901px以上ブロック（PC共通）が担当し、
   このブロックは**幅が縮んだことで生じる接触・はみ出しの逃がしだけ**を書く。
   1200px以上には一切効かないため、PC版を壊さずに調整できる。
   ============================================================ */

@media (min-width: 901px) and (max-width: 1199px) and (min-height: 501px) {

  /* 左カラムの上部は、左にナビ・右にロゴを置いている。
     カラム幅が1200px時の593pxから最小450pxまで縮むため、そのままでは
     縦書きナビの右端とロゴの左端が接触する。列間とロゴの高さを
     画面幅に連動させて、901pxでも重ならない範囲に収める */
  .side-nav ul {
    gap: 0.5rem;
  }

  .side-logo-full {
    height: clamp(4rem, 7.1vw, 5.3125rem);
  }

  /* 左カラム下部：イメージキャラクターは右5%に絶対配置、CTAボタンは
     左5%起点で幅362px（max-width:22.625rem）固定。1200px以上は
     カラム幅593pxで両者の間に31px空くが、カラムが縮むとキャラクターは
     左へ、ボタン右端は動かないまま（幅固定）なので、
     ビューポート幅がおよそ1116pxを下回った地点から重なり始める
     （901pxで104px重複）。
     人物の高さを 15vw（=1200px基準で11.25remと一致する係数）で
     ビューポートに連動させ、ボタンの上限幅も同じ基準で
     「33.33vw − 1rem」まで動的に縮めることで、909〜1199pxのどの幅でも
     キャラクター左端とボタン右端の間に約9px以上の隙間を保つ。
     1199px時点では計算値が22.625remの上限を上回るためPCと同じ362pxに
     戻り、1200px側の見た目と継ぎ目なく揃う */
  .side-character-photo {
    height: clamp(6.5rem, 15vw, 11.25rem);
  }

  .side-cta-buttons {
    max-width: clamp(15rem, calc(33.33vw - 1rem), 22.625rem);
  }

  /* アクセスカードは「写真40% ＋ 情報1fr」の2カラム。情報側は施設名の
     nowrap（265px）が最小幅になるため、カラム幅が946pxを下回ると
     グリッドが親をはみ出し、ページに横スクロールが出る。
     2カラムの構造は保ったまま、施設名だけ折り返しを許して逃がす。
     keep-all を添えるのは「くまもとペット霊園／さらのその」の間で
     折らせ、語の途中で切れるのを防ぐため */
  .access-name {
    white-space: normal;
    word-break: keep-all;
  }

  /* サービスカードのボタンは1行固定（nowrap）で、文言に169〜181pxを要する。
     カラムが縮むと割り当てが130px程度まで下がり、ボタンからはみ出した分が
     カード→レイアウト→セクションと連鎖してページに横スクロールを出していた。
     この幅では2行に折り返して収める */
  /* フッターの本藏院・菩提樹苑ボタンは、ロゴを大きくした分だけ横幅も増え、
     カラムが狭い928px未満では2つが横に並びきらず縦積みに折り返してしまう。
     ロゴの大きさはそのままに、左右パディングだけ詰めて横並びを保つ */
  .footer-related-link {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  #service .btn-pill {
    white-space: normal;
    /* ただ折り返すと「家族葬の詳細・料金はこ／ちら」と語中で切れる。
       auto-phrase は文節の切れ目で折るため「〜料金は／こちら」に揃う。
       非対応ブラウザでは通常の折り返しに戻るだけで、はみ出しは起きない */
    word-break: auto-phrase;
  }

}


/* ============================================================
   トップのファーストビュー（スマホ）：2026-10-19 版スマホ用カンプ（1019_saranosono_top_sp.pdf）に合わせる（2026-10-21）
   ============================================================
   写真（女の子と子犬 → 猫 → うさぎ を自動で切り替え。.mv-sp-slides）をヘッダーの下に画面いっぱいに敷き、
   その上にロゴと月桂樹の3つの印を重ねる。コピーと説明文は写真の下。犬・猫の切り抜き（.mv-animal-photo-*）は出さない。
   写真の比率と、ロゴ・印の位置は家族葬のスマホの冒頭（page-miokuri.css の .miokuri-hero--fv）と同じ。
   上の「スマホ」ブロックの .mv（画面の高さに合わせて中身を縮める --u の仕組み）を、ここでまとめて上書きしている。
   ここに書いた指定はPC（901px以上）には一切効かない。 */
@media (max-width: 900px), (max-width: 1199px) and (max-height: 500px) and (orientation: landscape) {

  .mv {
    display: block;
    position: relative;
    min-height: 0;
    /* 上は写真の高さ（画面幅 × 662/390）＋写真からコピーまでの40px。下は次の写真との間 */
    padding: calc(var(--sp-fv-h) - var(--sp-cta-h) + 2.5rem) 1rem 5rem;
    --u: 1rem;
  }

  .mv-sp-slides {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    /* 高さは画面の見えている高さ（ヘッダーの下〜ツールバーの上）。写真はこの枠に合わせて上下を切る（2026-10-21 池上さん指示） */
    /* 画面下の固定ボタン（--sp-cta-h。最初から出すようにした）と重ならないよう、その高さぶん短くする（2026-10-21 池上さん指示） */
    height: calc(var(--sp-fv-h) - var(--sp-cta-h));
    overflow: hidden;
    /* 切り替え中の写真の重なり（z-index 0〜2）をこの中に閉じ込め、ロゴ・印（z-index 1）より上に出さない */
    z-index: 0;
  }

  /* 写真は重ねておき、.is-active だけを表示する（切り替えは js/main.js の [data-autofade]） */
  .mv-sp-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 2.5s ease;
  }

  .mv-sp-slide.is-active {
    opacity: 1;
  }

  /* 女の子と子犬：枠が写真より横長になると上下が切れる。上端を基準にして、子犬の顔を印より下に保つ */
  .mv-sp-slide:first-child {
    object-position: 50% 0;
  }

  /* 猫・うさぎの写真（4:5）は枠（390:662）より横長なので、そのままだと顔がちょうど印の後ろに来る。
     少し拡大して上端を枠の上端にそろえ、下側（床・台）を切ることで、顔を印より下へ下げる */
  .mv-sp-slide.is-cat,
  .mv-sp-slide.is-rabbit {
    inset: 0 0 auto;
    height: 120%;
  }

  .mv-sp-slide.is-cat    { object-position: 45% 0; }
  .mv-sp-slide.is-rabbit { object-position: 35% 0; }

  /* ロゴ：写真の上（家族葬と同じ位置・大きさ） */
  .mv-logo {
    position: absolute;
    /* 2026-10-21 池上さん指示で小さく（81%→66%）・上へ（3rem→2rem）。2026-10-22 さらに上へ（2rem→1.25rem） */
    top: 1.25rem;
    left: 50%;
    z-index: 1;
    width: 66%;
    margin: 0;
    transform: translateX(-50%);
  }

  /* 写真の上でも読めるよう、ロゴの輪郭にだけ白い光をにじませる（お迎え葬と同じ） */
  .mv-logo-full {
    filter: drop-shadow(0 0 0.375rem rgba(255, 255, 255, 0.9)) drop-shadow(0 0 0.125rem rgba(255, 255, 255, 0.85));
  }

  /* コピー・説明文：写真の下。左揃えのかたまりを中央に */
  .mv-text-block {
    margin-bottom: 0;
  }

  .mv-copy {
    line-height: 1.95;
    letter-spacing: 0.25em;
    margin-bottom: 0.75rem;
  }

  /* 本文は1段階大きく（--fs-sm＝14px。2026-10-21）。以前の min(--fs-sm, 3.4vw) の上限を外す */
  .mv-desc {
    font-size: var(--fs-sm);
    letter-spacing: 0.15em;
  }

  /* 3つの印：月桂樹（asset/common/laurel.svg）の中に3行。写真の上（家族葬と同じ形・大きさ） */
  .mv-badges {
    position: absolute;
    /* ロゴのすぐ下（2026-10-21 池上さん指示で 12rem から上げ、ロゴを小さくした分さらに上げた）。
       2026-10-22 ロゴと同じだけ上へ（8.5rem→7.75rem） */
    top: 7.75rem;
    left: 0;
    right: 0;
    z-index: 1;
    display: flex;
    justify-content: center;
    gap: 0.75rem;
  }

  /* 幅の狭い画面（360px未満）では3つが収まるよう、画面幅に合わせて縮める */
  .badge-pill {
    width: min(6.5rem, 28.5vw);
    height: auto;
    aspect-ratio: 104 / 92;
    padding: 0 0 0.25rem;
    border: 0;
    border-radius: 0;
    background:
      url('../asset/common/laurel.svg') center / contain no-repeat,
      radial-gradient(circle closest-side, rgb(255, 255, 255), rgba(255, 255, 255, 0.97) 50%, rgba(255, 255, 255, 0.8) 70%, rgba(255, 255, 255, 0.45) 86%, rgba(255, 255, 255, 0) 100%) center / 100% 100% no-repeat;
    /* 中の白は家族葬・お迎え葬（page-miokuri.css の .miokuri-fv-badge）と同じ値。
       2026-10-21 池上さん指示で、白を濃く・大きく（5.75rem）し、外側へなだらかにぼかした。
       2026-10-22 さらに濃く、円を月桂樹の葉の後ろまで広げた。同日さらに白い部分を外へ広げ、縁のぼかしを少し広くした（印の高さいっぱいの円。画面幅で印が縮んでも追従する） */
  }

  .badge-pill-title {
    font-size: var(--fs-xs);
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.06em;
  }

  /* 犬・猫の切り抜きはスマホでは出さない（写真のスライドに置き換え） */
  .mv-animal-photo-single {
    display: none;
  }

}


/* ============================================================
   トップのファーストビューより下（スマホ）：2026-10-19 版スマホ用カンプ（1019_saranosono_top_sp.pdf）に合わせる（2026-10-21）
   ============================================================
   並び・中身は今までどおり。寸法だけカンプに寄せる。
   ・子犬を抱く手元の写真（.photo-wide-single）はカンプにないためスマホでは出さない
   ・選べるお別れのかたち：縦書きの見出しを大きく、カードは少し細く、箇条書き・ボタンを一回り大きく
   ・3つの安心：見出しを大きく、下線をなくす
   ・施設・アクセス（トップ・about・access・家族葬・お迎え葬の共通部品）：写真を左右に余白を取った角丸に、
     所在地などは見出しと値の間に縦線、ボタンは中央の細いピル
   ここに書いた指定はPC（901px以上）には一切効かない。 */
@media (max-width: 900px), (max-width: 1199px) and (max-height: 500px) and (orientation: landscape) {

  .photo-wide-single {
    display: none;
  }

  /* ---- 選べるお別れのかたち ---- */
  #service {
    padding-right: 1.5625rem;
  }

  /* 縦書きの見出しだけ、カードの頭より上から始める（2026-10-22 池上さん指示。1.5rem→3rem） */
  #service .section-title-vertical {
    margin-top: -3rem;
    font-size: var(--fs-4xl);
    letter-spacing: 0.55em;
  }

  #service .service-layout {
    gap: 1.5rem;
  }

  #service .service-card {
    padding: 0.625rem 0.625rem 1.25rem;
    border-radius: 0.875rem;
  }

  /* 写真は 263:211（カンプ） */
  #service .service-card-photo {
    aspect-ratio: 263 / 211;
  }

  #service .service-features li {
    font-size: var(--fs-sm);
    line-height: 1.85;
    letter-spacing: 0.04em;
    padding-left: 1.2em;
  }

  /* ●は文字と同じ大きさ（カンプ） */
  #service .service-features li::before {
    font-size: 1em;
    top: 0;
    line-height: inherit;
  }

  /* 320px幅では1行に収まらないため、文節の切れ目（「〜料金は／こちら」）で折り返させる */
  #service .btn-pill {
    padding: 0.75rem 0.5rem;
    font-size: var(--fs-sm);
    letter-spacing: 0.14em;
    white-space: normal;
    word-break: auto-phrase;
  }

  /* ---- 3つの安心 ---- */
  /* 見出しの各行（「お気持ちに「寄り添う」専任スタッフ」など17字）が折り返さないよう、
     字間を詰め、かぎかっこ・読点の余白も詰める（palt）（2026-10-22 池上さん指示）。
     狭い画面では、17字＋字間が本文幅（画面幅 − 左右1.5rem）に収まる大きさまで縮める */
  .anshin-item-title {
    font-size: min(var(--fs-xl), calc((100vw - 3rem) / 17.6));
    line-height: 1.6;
    letter-spacing: 0.02em;
    font-feature-settings: "palt";
    border-bottom: 0;
    padding-bottom: 0;
  }

  .anshin-card {
    row-gap: 1.25rem;
  }

  /* ---- 施設・アクセス（共通部品 inc/access-body.php） ---- */
  .access-photo {
    width: calc(100% - 2.375rem);
    margin: 0 auto;
    aspect-ratio: 326 / 272;
    border-radius: 1.25rem;
  }

  .access-name {
    margin-top: 0.25rem;
  }

  /* 所在地などは、見出しの列と値の列の間に縦線（カンプ） */
  .access-detail {
    width: fit-content;
    max-width: 100%;
    margin: 0 auto 1.75rem;
    line-height: 1.6;
  }

  .access-detail p {
    margin-bottom: 0;
  }

  .access-label {
    width: 4.375rem;
    font-weight: 400;
    font-size: var(--fs-sm);
    border-right: 1px solid color-mix(in srgb, var(--text) 45%, transparent);
    margin-right: 0.75rem;
  }

  .access-card .btn-pill {
    width: 16.75rem;
    max-width: 100%;
    margin: 0 auto;
    padding: 0.5rem;
    border-color: var(--text);
    border-radius: var(--radius-pill);
    font-size: var(--fs-sm);
    letter-spacing: 0.15em;
  }

}


/* ============================================================
   スマホ：各ページの冒頭（写真・タイトルの下）の見出しを1段階大きくする（2026-10-21 池上さん指示）
   ============================================================
   例：ペット納骨の「お見送りの後も、ずっと寄り添い続けます。」。--fs-lg（16px）→ --fs-xl（20px）。その下の本文は変えない。
   決めてある改行のまま1行に収まるよう字間を詰め、狭い画面では画面幅に合わせて縮める。
   ページ固有CSS（style.css の後に読まれる）に勝つよう .main-scroll を付けて強めている。PCには効かない。
   ※ about・access・ペット納骨・ペット供養は、この見出しまでを最初の画面に収める計算（各ページCSS）で見出しの高さ（2行）を使っている */
@media (max-width: 900px), (max-width: 1199px) and (max-height: 500px) and (orientation: landscape) {
  .main-scroll .access-lead,
  .main-scroll .about-lead,
  .main-scroll .voice-intro-lead,
  .main-scroll .kuyou-lead,
  .main-scroll .noukotsu-lead {
    font-size: min(var(--fs-xl), 5.6vw);
    letter-spacing: 0.2em;
  }

  /* ペットが亡くなったら：3行目「まず、深呼吸してください。」（13字）が狭い画面でも1行に収まる大きさ */
  .main-scroll .lost-title {
    font-size: min(var(--fs-xl), 5.2vw);
    letter-spacing: 0.2em;
  }

  /* 1行が長い見出し（16字）は字間をさらに詰める */
  .main-scroll .mv-copy,
  .main-scroll .miokuri-lead {
    font-size: min(var(--fs-xl), 5.1vw);
    letter-spacing: 0.08em;
  }

  /* よくある質問の呼びかけは1行目が18字あるため、20pxでは収まらない。収まる範囲で大きくする（393pxで約18px） */
  .main-scroll .qa-intro-lead {
    font-size: min(var(--fs-xl), 4.6vw);
    letter-spacing: 0.06em;
  }
}

/* ---- スマホの改行（2026-10-29 池上さん指示「モバイルで改行がおかしいところは直して」）----
   見出し・ボタン・質問文など短いものだけに効かせる。PC（901px以上）には効かない。
   ・語の途中で行を切らない（「お仔さ／ま」）→ word-break: auto-phrase（文節で折り返す。Chrome・Android向け。iPhoneは未対応）
   ・行の長さをそろえ、最後の行を1〜2文字にしない → text-wrap: balance（iPhoneも対応）
   ・文節より狭い幅で入りきらないときは、はみ出さずに途中で折り返す（overflow-wrap: anywhere）
   本文の段落にはかけない。最初は本文にも text-wrap: pretty と auto-phrase をかけていたが、iPhone の Safari で
   右端まで行く前に早めに改行される行が多くなった（同日 池上さん指摘）。本文は端まで詰めて折り返す従来の形に戻した */
@media (max-width: 900px), (max-width: 1199px) and (max-height: 500px) and (orientation: landscape) {
  .main-scroll :is(h1, h2, h3, h4, h5, h6, dt, th, button, .btn-pill, .btn-outline),
  .main-scroll .faq-question-text,
  .main-scroll .news-cards-title {
    word-break: auto-phrase;
    overflow-wrap: anywhere;
    text-wrap: balance;
  }
}

/* ---- 画面下の固定ボタン：手を差し出す写真（inc/footer.php。2026-10-29 池上さん指示）----
   写真を <picture> で包んだので、包みごと縮ませない（縮むと写真が細る）。
   390px以上は写真が手の分だけ横に広がる（75→112px）。ボタンが狭くなるので
   ・上の一文は写真の左上の透明なところ（手より上）へはみ出させ、1行のまま保つ
   ・ボタンの字間を詰め、「今すぐお電話で」を1行に収める */
@media (max-width: 900px), (max-width: 1199px) and (max-height: 500px) and (orientation: landscape) {
  .sp-cta-character-wrap {
    display: block;
    flex-shrink: 0;
  }
}

@media (min-width: 390px) and (max-width: 900px), (max-width: 1199px) and (max-height: 500px) and (orientation: landscape) {
  .sp-cta-bar .side-cta-lead {
    position: relative;
    z-index: 6;
    margin-right: -5.5rem;
    white-space: nowrap;
  }

  .sp-cta-bar .side-cta-buttons .btn-pill {
    letter-spacing: 0.04em;
  }
}

/* トップのロゴを大見出し（h1）にした（2026-10-29 SEO対策）。h1 の既定の文字サイズ・太さ・余白を持ち込まない */
h1.mv-logo {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

/* 改行の位置を <br> で決めてある短い文は、上の「スマホの改行」の指定をかけない（2026-10-29 池上さん指摘）。
   aboutの丸（.about-badge）とスタッフの資格・役職で、iPhone で改行が崩れたため、指定前の折り返しに戻す */
@media (max-width: 900px), (max-width: 1199px) and (max-height: 500px) and (orientation: landscape) {
  .main-scroll :is(.about-badge, .about-badge *, .about-staff-cert, .about-staff-role) {
    word-break: normal;
    overflow-wrap: normal;
    text-wrap: wrap;
  }
}

/* ---- 画面下の固定ボタン：iOS 26 の Safari 対策（2026-10-29 池上さん指摘）----
   position: fixed; bottom: 0 だと、iOS 26 の Safari でページの一番下までスクロールしたときなどに
   ボタンが画面の途中へ浮き、その下に大きな空白が出る（WebKit の不具合。bug 297779）。
   ボタンをページの最後に置いたまま画面の下に貼りつかせる sticky に替える。一番下ではフッターのすぐ後ろに収まる。
   ボタンが流れの中で自分の高さを持つので、本文の下に空けていた余白（body の padding-bottom）は要らない */
@media (max-width: 900px), (max-width: 1199px) and (max-height: 500px) and (orientation: landscape) {
  body {
    padding-bottom: 0;
  }

  .sp-cta-bar {
    position: sticky;
    left: auto;
  }
}

/* ---- タブレットの縦画面（幅600〜900px・縦向き）だけの調整（2026-10-29 池上さん指示）----
   スマホの作りがそのまま引き伸ばされ、画面幅の66%で決めていたロゴだけが大きくなって、
   スマホと同じ位置にあるバッジ・ページ名の札に重なっていた。
   ロゴを「幅430pxのスマホで見たときの大きさ」（17.75rem）で止め、下の部品はスマホの設計どおりの位置に収める。
   スマホ（縦は幅440px以下）・スマホの横画面（横向き）・PCとタブレットの横画面（901px以上）には効かない */
@media (min-width: 600px) and (max-width: 900px) and (orientation: portrait) {
  :root {
    /* 下層ページ冒頭のロゴのかたまりの高さ（ファーストビューの計算に使う）も、ロゴに合わせて止める */
    --sp-logo-block: calc(2.5rem + 6.5rem);
  }

  .mv-logo {
    width: 17.75rem;
  }

  .sp-page-logo img {
    width: 17.75rem;
  }
}

/* ---- スマホの横画面（高さ500px以下・横向き）だけの調整（2026-10-29 池上さん指示）----
   幅が900pxを超える大きいスマホの横画面も、切り替え条件を広げてスマホの作りで出している（各 @media の条件。js/main.js の SARA_SP_MQ も同じ）。
   横画面は高さが足りないため、
   ・冒頭のロゴを画面幅の66%ではなく 15rem で止め、スマホと同じ位置にあるバッジ・ページ名の札に重ならないようにする
   ・画面下の固定ボタンは「電話」「LINE」を1段の細い形にし、上の一文と人物の写真は出さない（画面の高さの4割を占めていたため）
   スマホの縦画面・タブレット・PCには効かない */
@media (max-width: 1199px) and (max-height: 500px) and (orientation: landscape) {
  :root {
    /* 下層ページ冒頭のロゴのかたまりの高さ（ファーストビューの計算に使う）も、ロゴに合わせて止める */
    --sp-logo-block: calc(2.5rem + 5.5rem);
  }

  .mv-logo {
    width: 15rem;
  }

  .sp-page-logo img {
    width: 15rem;
  }

  .sp-cta-bar {
    justify-content: center;
    padding: 6px 16px;
  }

  .sp-cta-bar .side-cta-lead,
  .sp-cta-bar .sp-cta-character-wrap,
  .sp-cta-bar .person-credit {
    display: none;
  }

  .sp-cta-bar-inner {
    flex: 0 1 34rem;
  }

  .sp-cta-bar .side-cta-buttons {
    max-width: none;
  }

  /* ボタンの文字は1行に（「今すぐお電話でご相談」「LINEでのご予約」） */
  .sp-cta-bar .side-cta-buttons .btn-pill {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  .sp-cta-bar .side-cta-buttons .btn-pill br {
    display: none;
  }

  /* 冒頭の写真：横画面では1画面に収めようとせず、写真に高さ（30rem）を持たせてスクロールで見せる（2026-10-29 池上さん指示）。
     画面の高さだけで決めると細い帯になり、子犬や人物が切れていたため。縦画面のスマホは今までどおり画面の高さ */
  .mv {
    padding-top: calc(max(var(--sp-fv-h) - var(--sp-cta-h), 30rem) + 2.5rem);
  }

  .mv-sp-slides {
    height: max(calc(var(--sp-fv-h) - var(--sp-cta-h)), 30rem);
  }

  /* 子犬の顔がロゴ・バッジの下に見える位置 */
  .mv-sp-slide:first-child {
    object-position: 50% 42%;
  }

  /* メニュー（縦書き）：高さに収まらず下が切れ、SNSのアイコンと重なっていた。
     文字を少し小さく・上の余白を詰め、SNSはメニューの下端へ */
  .side-nav {
    top: calc(var(--sp-header-h) + 12px);
  }

  .side-nav ul {
    gap: 10px;
  }

  .side-nav a,
  .side-nav-parent {
    font-size: 14px;
    padding-top: 10px;
  }

  .side-nav-emphasis a {
    font-size: 16px;
  }

  .side-fixed .sp-menu-sns {
    bottom: 0.75rem;
  }

  /* 子メニューの書き出しも、親の文字の位置（上の線2px＋余白10px）にそろえる */
  .side-nav .side-nav-sub a {
    padding-top: 12px;
  }

  /* 子メニューに添える一言は、横画面では文字が10px未満になって読めないため出さない（PCと同じ扱い）。
     名前の長さをそろえる指定・枠を下へ広げる指定も外す */
  .side-nav-note {
    display: none;
  }

  .side-nav-label {
    display: inline;
    inline-size: auto;
  }

  .side-nav-has-sub .side-nav-sub:has(.side-nav-note) {
    bottom: 0;
    padding-bottom: 0;
  }
}