/* ==========================================================================
   フォトスタジオ sai — 共通スタイルシート
   絵本のような・可愛くておしゃれでカラフルな水彩パステルの世界観
   ========================================================================== */

/* ---------- デザイントークン ---------- */
:root {
  --coral: #F0907F;
  --coral-light: #F7B5A8;
  --mint: #A8DDD3;
  --teal: #7EC9BC;
  --yellow: #F5E9A8;
  --gold: #D9C36A;
  --star: #F2C24E; /* 評価の星専用の明るいゴールド */
  --pink: #F2B7C9;
  --lavender: #D8D3EC;
  --blue-gray: #7B8CB8;
  --text: #5A6572;
  --bg: #FFFFFF;
  --bg-tint: #FAF7F2;

  --font-script: 'Caveat', cursive;
  --font-jp: 'Zen Maru Gothic', sans-serif;

  --radius-lg: 32px;
  --radius-md: 20px;
  --header-h: 76px;
}

/* ---------- リセット・基本設定 ---------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* スクロールバーの有無でページ幅が変わり、ヘッダーがズレるのを防ぐ */
  scrollbar-gutter: stable;
  scroll-padding-top: var(--header-h);
}

body {
  font-family: var(--font-jp);
  color: var(--text);
  background: var(--bg);
  line-height: 1.8;
  font-weight: 400;
  overflow-x: hidden;
  /* 下部の余白はフッター自身が持つ（bodyに付けると地色の下に白が残るため） */
  padding-bottom: 0;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

/* ---------- スマホのタップフィードバック ----------
   OS標準のグレーのタップハイライトは無効化する。要素の角丸を無視した
   四角い面で光るため見た目が粗く、特にFAQでは角丸カードの上に角の尖った
   長方形が出てしまう（2026-08-07）。
   消すだけだと「押した感」がなくなるので、代わりに下の:activeで
   要素自身の形に沿ったフィードバックを返す（タップ中だけ発火）。
   なお、各所の:hover規則はすべて @media (hover: hover) で包んである。
   iOSはタップした要素に:hoverを適用し「別の場所をタップするまで解除しない」ため、
   タッチ環境にホバー装飾を渡すと背景色などが貼り付いたままになる（2026-08-07実機で確認） */
* {
  -webkit-tap-highlight-color: transparent;
}

/* 面で反応する要素: ホバーと同じ背景色を押下中にも出す（角丸は要素側の形に従う） */
.faq-item__q:active,
.news-item > a:active {
  background: var(--bg-tint);
}

/* ボタン類: わずかに沈み込ませて「押している」ことを伝える。
   2〜3%の縮小は指の下でも知覚できて、離した瞬間に戻るので安っぽくならない */
.btn-ribbon:active {
  transform: scale(0.97);
  filter: brightness(0.97);
}

.btn-outline:active {
  background: var(--blue-gray);
  color: #fff;
}

.mobile-fixed-bar a:active {
  transform: scale(0.94);
}

.pager__num:active,
.pager__arrow:active {
  color: var(--coral);
  border-color: var(--coral-light);
}

/* カード型のリンク: 全体を軽く縮めて面で反応させる */
.column-card:active,
.menu-card:active,
.top-banner:active {
  transform: scale(0.985);
}

/* テキストリンク: ホバーと同じ色替えを押下中にも */
.site-header__nav a:active,
.site-footer__nav a:active,
.breadcrumb a:active,
.news-strip__more:active,
.anchor-hybrid a:active {
  color: var(--coral);
}

/* ヘッダー内CTAは白文字を維持（色替えのリンク扱いにしない） */
.site-header__nav a.site-header__cta:active {
  color: #fff;
}

.container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}

/* html側にoverflowを持たせるとiOS Safariのルートスクロール扱いが変わり、
   Safariがボトムツールバーを着色できなくなる（背後にページ本文が透ける）。
   現行の本番サイトもhtml/bodyに未指定でうまく着色されているため、
   横はみ出しの抑制はbody側のoverflow-x: hiddenに任せる。
   背景色はsafe-area外側やオーバースクロール領域のために明示しておく */
html {
  background-color: #fff;
}

section {
  position: relative;
  padding: 88px 0;
  overflow: hidden;
}

.bg-tint {
  background: var(--bg-tint);
}

/* ---------- 見出し共通（筆記体＋日本語サブタイトル） ---------- */
.section-head {
  text-align: center;
  margin-bottom: 56px;
  position: relative;
  z-index: 2;
}

.section-head .script {
  display: block;
  font-family: var(--font-script);
  font-weight: 700;
  font-size: 64px;
  color: var(--blue-gray);
  line-height: 1;
}

.section-head .sub {
  display: block;
  margin-top: 8px;
  font-size: 15px;
  letter-spacing: 0.08em;
  color: var(--text);
  font-weight: 500;
}

@media (max-width: 767px) {
  .section-head .script {
    font-size: 44px;
  }
  section {
    padding: 64px 0;
  }
}

/* ---------- 水彩ブロブ装飾 ----------
   移動＋伸縮＋濃淡（呼吸）をゆっくり組み合わせて、水彩が紙の上でにじむような動きに。
   2種類の軌道×周期ずらしで、隣り合うブロブが同期して見えないようにする */
/* 水玉アニメーション（2026-08 デザイン設計ベースに改訂）
   配置・色はmain.jsが決定論的に組む。動きは控えめなただよい
   （PC60px/SP40px・1周28〜43秒）。個体差はindexから決まる固定値 */
.blob {
  --blob-r: 60;         /* 移動範囲(px) */
  --blob-scale: 1.1;    /* サイズ倍率 */
  --blob-op: 0.55;      /* 濃さの最大値 */
  position: absolute;
  border-radius: 50%;
  /* blurはscaleが固定である限り安全（レイヤーに一度だけ焼き込まれ、
     以後はGPU合成のみ）。カクつきの原因はblur単体ではなく
     「blur × scaleの無段階アニメーション」の組み合わせで、scaleが変わるたび
     ぼかしレイヤーが毎フレーム再描画されることだった。
     キーフレームのscaleを固定化した今はblurを維持してよい。
     scaleのアニメーションを再導入する場合はblurを外すこと（2026-08-05） */
  filter: blur(2px);
  opacity: 0.35;
  z-index: 0;
  pointer-events: none;
  animation: blob-drift calc(var(--blob-dur, 35) * 1s) ease-in-out infinite alternate;
  animation-delay: var(--blob-delay, 0s);
}

/* 動きを減らす設定のユーザーには、ただよいを止めて静止表示にする */
@media (prefers-reduced-motion: reduce) {
  .blob {
    animation: none;
  }
}

/* PCのみ表示する水玉。SPは現状の数がちょうど良いため増やさない（2026-08-05） */
.blob--pc {
  display: none;
}

@media (min-width: 768px) {
  .blob--pc {
    display: block;
  }
}

.blob:nth-of-type(2n) {
  animation-duration: calc(var(--blob-dur, 35) * 1.3s);
  animation-delay: calc(var(--blob-delay, 0s) - 12s);
}

.blob:nth-of-type(3n) {
  animation-duration: calc(var(--blob-dur, 35) * 0.8s);
  animation-delay: calc(var(--blob-delay, 0s) - 18s);
}

/* ただよう往復軌道。--kx/--ky（main.jsが水玉ごとに±0.6〜1.0で設定）で
   軌道の向き・振れ幅が水玉ごとに変わり、全体が同方向に流れるのを防ぐ。
   scaleは全キーフレームで固定にする。scaleを無段階に変化させると、
   iOS Safariが鮮明さを保つためレイヤーを毎フレーム再ラスタライズし、
   スクロール中のフレーム落ちの原因になるため。移動(translate)と明滅(opacity)は
   GPU合成だけで処理される（2026-08-05） */
@keyframes blob-drift {
  0% {
    transform: translate(0, 0) scale(var(--blob-scale));
    opacity: calc(var(--blob-op) * 0.65);
  }
  35% {
    transform: translate(calc(var(--blob-r) * var(--kx, 1) * 1px), calc(var(--blob-r) * var(--ky, 1) * -1.1px)) scale(var(--blob-scale));
    opacity: var(--blob-op);
  }
  70% {
    transform: translate(calc(var(--blob-r) * var(--kx, 1) * -0.75px), calc(var(--blob-r) * var(--ky, 1) * 0.4px)) scale(var(--blob-scale));
    opacity: calc(var(--blob-op) * 0.5);
  }
  100% {
    transform: translate(calc(var(--blob-r) * var(--kx, 1) * 0.4px), calc(var(--blob-r) * var(--ky, 1) * -0.55px)) scale(var(--blob-scale));
    opacity: calc(var(--blob-op) * 0.9);
  }
}

/* JS無効時のフォールバック: SPは可動域とサイズを控えめに */
@media (max-width: 767px) {
  .blob {
    --blob-r: 40;
    --blob-scale: 0.9;
  }
}

@media (prefers-reduced-motion: reduce) {
  .blob { animation: none; }
}

.blob--coral { background: radial-gradient(circle at 30% 30%, var(--coral-light), transparent 70%); }
.blob--mint  { background: radial-gradient(circle at 30% 30%, var(--mint), transparent 70%); }
.blob--yellow{ background: radial-gradient(circle at 30% 30%, var(--yellow), transparent 70%); }
.blob--lavender{ background: radial-gradient(circle at 30% 30%, var(--lavender), transparent 70%); }
.blob--pink  { background: radial-gradient(circle at 30% 30%, var(--pink), transparent 70%); }

/* ---------- リボン型ボタン ---------- */
/* 両端の旗型ノッチ＋上下辺をゆるやかにカーブさせた、布のようなリボン（SVGマスクで形状を作る） */
.btn-ribbon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* マスクで上下が削られるぶん、視覚上の高さが揃うよう縦paddingは厚めに取る
     （視覚高さ≒box×0.78。アウトラインボタン(約50px)よりわずかに低い48px前後を狙う） */
  padding: 26px 48px;
  line-height: 1.3;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  background: var(--coral);
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 60' preserveAspectRatio='none'><path d='M2 8 C 70 4 150 11 238 6 L 224 30 L 238 51 C 150 56 70 49 2 53 L 16 30.5 Z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 60' preserveAspectRatio='none'><path d='M2 8 C 70 4 150 11 238 6 L 224 30 L 238 51 C 150 56 70 49 2 53 L 16 30.5 Z'/></svg>");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  transition: transform 0.2s ease, filter 0.2s ease;
  letter-spacing: 0.03em;
  /* リボン内での折り返しは形が崩れるため禁止 */
  white-space: nowrap;
}

/* SPでは少し小ぶりにして狭い幅でも折り返させない */
@media (max-width: 767px) {
  .btn-ribbon {
    font-size: 14px;
    padding: 22px 34px;
  }
}

/* ステッチはリボンのS字カーブに沿った丸端の破線（上下の辺のみ） */
.btn-ribbon::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 60' preserveAspectRatio='none'><g fill='none' stroke='rgba(255,255,255,0.75)' stroke-width='1.5' stroke-dasharray='5 5.5' stroke-linecap='round'><path d='M22 13.5 C 78 10 148 16 218 12'/><path d='M22 47.5 C 78 44 148 50.5 218 46'/></g></svg>") center / 100% 100% no-repeat;
  pointer-events: none;
}

@media (hover: hover) {
  .btn-ribbon:hover {
    transform: translateY(-2px);
    filter: brightness(1.05);
  }
}

.btn-ribbon--pink {
  background: var(--pink);
}

.btn-ribbon--teal {
  background: var(--teal);
}

/* アウトラインボタン（副CTA）
   破線はWebでは「プレースホルダ」の記号で押せる感が弱いため、実線の枠に統一。
   破線の装飾はカード枠・リボンのステッチに限定する */
.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 36px;
  line-height: 1.3;
  font-size: 16px;
  font-weight: 700;
  color: var(--blue-gray);
  background: #fff;
  border: 2px solid var(--blue-gray);
  border-radius: 999px;
  transition: background 0.2s ease, color 0.2s ease;
}

@media (hover: hover) {
  .btn-outline:hover {
    background: var(--blue-gray);
    color: #fff;
  }
}

/* ---------- ヘッダー ---------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-h);
  display: flex;
  align-items: center;
  z-index: 100;
  background: rgba(255, 255, 255, 0);
  transition: background 0.45s ease, box-shadow 0.45s ease;
}

/* スクロール時はすりガラス調。ぼかしが効くよう不透明度は低めにし、
   backdrop-filter非対応ブラウザのみ白ベタに近づけて視認性を確保する。
   注意: backdrop-filterをヘッダー本体に付けると、子であるドロワーの
   backdrop-filterがページ本体をぼかせなくなる（backdrop rootの仕様）ため、
   ガラス効果は疑似要素に持たせる */
.site-header::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  /* 出現・消滅は閾値で切り替え、その変化をゆっくりフェードさせる。
     スクロール量に連動させると途中で止めたとき半端な濃さで固定されるため。
     非表示時はvisibilityも切り、backdrop-filterの描画コストを完全に止める
     （opacity:0だけでは描画処理が残り、スクロールのカクつき要因になる）。
     visibilityはフェード完了後（0.45s後）に切り替える */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s cubic-bezier(0.33, 0, 0.2, 1), visibility 0s linear 0.45s;
  background: rgba(255, 255, 255, 0.92);
}

/* ヘッダーは写真の上に直接乗るため、ロゴとナビにも光彩を敷く。
   ガラスが出ている時もごく淡いので邪魔にならない。
   右端のCTAは自前の塗りがあるので対象外 */
.site-header__logo img {
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.9));
}

.site-header__nav a:not(.site-header__cta) {
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
}

.hamburger span {
  box-shadow: 0 0 2px rgba(255, 255, 255, 0.9);
}

.site-header.is-scrolled {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.site-header.is-scrolled::before {
  opacity: 1;
  /* 出現時は即座にvisibleにしてからフェードイン */
  visibility: visible;
  transition: opacity 0.45s cubic-bezier(0.33, 0, 0.2, 1);
}

/* ページ読み込み直後の初期判定ではフェードさせない（遷移時の一瞬表示防止）。
   疑似要素のopacityだけでなく、本体のbox-shadowトランジションも止める */
.site-header.no-anim,
.site-header.no-anim::before {
  transition: none;
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .site-header::before {
    background: rgba(255, 255, 255, 0.62);
    -webkit-backdrop-filter: blur(16px) saturate(1.6);
    backdrop-filter: blur(16px) saturate(1.6);
  }
}

.site-header__inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.site-header__logo img {
  height: 40px;
}

.site-header__nav {
  display: flex;
  align-items: center;
  gap: 32px;
}

.site-header__nav a {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  position: relative;
}

@media (hover: hover) {
  .site-header__nav a:hover {
    color: var(--coral);
  }
}

.site-header__cta {
  padding: 14px 30px;
  font-size: 14px;
}

/* ナビの文字色指定に負けないように白文字を明示 */
.site-header__nav a.site-header__cta,
.site-header a.btn-ribbon {
  color: #fff;
}

@media (hover: hover) {
  .site-header__nav a.site-header__cta:hover {
    color: #fff;
  }
}

.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  z-index: 110;
}

.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--blue-gray);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.hamburger.is-active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.hamburger.is-active span:nth-child(2) {
  opacity: 0;
}
.hamburger.is-active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 1023px) {
  .site-header__nav {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 78%;
    max-width: 320px;
    background: #fff; /* backdrop-filter非対応ブラウザ用のフォールバック */
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 32px;
    gap: 24px;
    transform: translateX(100%);
    transition: transform 0.35s ease;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.08);
  }

  /* ドロワーもすりガラス調に（ヘッダーとトーンを揃える）。
     透けすぎると背面の文字と混ざるため、不透明度は高めに保つ */
  @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .site-header__nav {
      background: rgba(255, 255, 255, 0.82);
      -webkit-backdrop-filter: blur(20px) saturate(1.5);
      backdrop-filter: blur(20px) saturate(1.5);
    }
  }

  .site-header__nav {
    z-index: 108;
  }

  .site-header__nav.is-open {
    transform: translateX(0);
  }

  /* ドロワー展開中は背面を薄暗くして、メニューへ視線を集める。
     ヘッダー(z:100)内のドロワーを覆わないよう、ヘッダーより下に敷く。
     クラス切替で要素が生成されるとtransitionが効かないため、
     常設してopacityだけをフェードさせる */
  body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 99;
    background: rgba(90, 101, 114, 0.32);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }

  body.nav-open::before {
    opacity: 1;
    pointer-events: auto;
  }

  .site-header__nav a {
    font-size: 17px;
  }

  .site-header__cta {
    margin-top: 8px;
  }

  .hamburger {
    display: flex;
  }
}

/* ---------- ファーストビュー ---------- */
.hero {
  position: relative;
  /* 写真を画面の縦いっぱいに見せる（下に余白を作らない） */
  height: 100vh;
  min-height: 560px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 横位置: 被写体を右に寄せて左側にテキストの居場所を作る
     縦位置: 下端固定（足元の余白は写真のまま残し、上側だけを切る） */
  object-position: 24% bottom;
  z-index: 0;
}

/* FVの要素は写真に直接重なるため輪郭を補強する（2026-08-05に実機で調整）。
   塗りのあるバッジ・リボンは白い光彩だと発光して見えるのでグレーの落ち影に、
   塗りのない文字は白い光彩で背景の柄から切り離す */
.hero h1 {
  text-shadow: 0 1px 4px rgba(255, 255, 255, 0.85);
}

.hero__sub {
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.95);
}

.hero__badge {
  filter: drop-shadow(0 3px 9px rgba(0, 0, 0, 0.2));
}

/* リボンは自身がmaskで切り抜かれており、自分のfilterでは外側に影を出せない。
   マスクの影響を受けないコンテナ側にかけて、リボンの形に沿った影にする */
.hero__ctas {
  filter: drop-shadow(0 3px 9px rgba(0, 0, 0, 0.2));
}

/* 写真の下端を次セクションの地色へ溶かし、直線的な切れ目をなくす（2026-08-05）。
   写真の床はうっすらベージュがかっており、純白と直線で接すると段差に見えるため、
   ①次セクションの地色をベージュに寄せる ②下端56pxをその色へ溶かす、を併用する。
   2点グラデだと減衰の切れ目が帯に見えるので中間点を刻む。
   足元は画面下端から約90pxあり、56pxのフェードは届かない（足が消えない） */
.hero__gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(250, 247, 242, 1) 0,
    rgba(250, 247, 242, 0.92) 11px,
    rgba(250, 247, 242, 0.62) 25px,
    rgba(250, 247, 242, 0.24) 40px,
    rgba(250, 247, 242, 0) 56px
  );
  z-index: 1;
}

/* テキストは左寄せで、右側の被写体の顔にかからないようにする */
.hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 0 24px 64px;
  max-width: 1120px;
  margin: 0 auto;
  text-align: left;
}

/* コーラル塗り＋内側に白ステッチの丸スタンプ */
.hero__badge {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: var(--coral);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.5;
  transform: rotate(-8deg);
  box-shadow: 0 6px 18px rgba(240, 144, 127, 0.35);
  margin-bottom: 20px;
}

.hero__badge::before {
  content: '';
  position: absolute;
  inset: 6px;
  border: 1.5px dashed rgba(255, 255, 255, 0.75);
  border-radius: 50%;
  pointer-events: none;
}

.hero h1 {
  font-size: 42px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.5;
  margin-bottom: 16px;
  word-break: keep-all;
}

/* 「おしゃれに」「カラフルに。」を塊で折り返す */
.hero h1 span {
  display: inline-block;
}

.hero__sub {
  font-size: 16px;
  font-weight: 500;
  color: var(--blue-gray);
  margin-bottom: 32px;
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  /* stretchのままだと、隣のリボンの箱（マスクで削られる分だけ視覚より高い）に
     合わせてアウトラインボタンが縦に伸びてしまう */
  align-items: center;
  gap: 16px;
}

@media (max-width: 767px) {
  .hero h1 {
    font-size: 27px;
  }
  .hero__img {
    /* SPは32%だと被写体が右に寄りすぎるため、顔が切れない位置まで戻す */
    object-position: 43% center;
  }
  .hero__badge {
    width: 96px;
    height: 96px;
    font-size: 12px;
    margin-bottom: 16px;
  }
  .hero__sub {
    margin-bottom: 14px;
  }
  /* 下げたぶん文字の背面が写真の明るい床にかかるため、白のなじみを少し強める */
  /* SPも白のかぶせは使わない（写真をそのまま見せる） */
}


/* ---------- About（選ばれる理由） ---------- */
.about-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  position: relative;
  z-index: 2;
}

@media (max-width: 1023px) {
  .about-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}

.about-card {
  text-align: center;
}

.about-card__photo {
  background: #fff;
  padding: 12px 12px 24px;
  border-radius: var(--radius-md);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
  margin-bottom: 20px;
  display: inline-block;
}

.about-card:nth-child(1) .about-card__photo { transform: rotate(-2deg); }
.about-card:nth-child(2) .about-card__photo { transform: rotate(1.5deg); }
.about-card:nth-child(3) .about-card__photo { transform: rotate(-1deg); }

.about-card__photo img {
  border-radius: 10px;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.about-card h3 {
  font-size: 19px;
  font-weight: 700;
  color: var(--blue-gray);
  margin-bottom: 12px;
}

.about-card p {
  font-size: 14.5px;
  color: var(--text);
}

/* ---------- Menu（撮影メニュー） ---------- */
.menu-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  position: relative;
  z-index: 2;
  margin-bottom: 40px;
}

@media (max-width: 1023px) {
  .menu-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.menu-card {
  background: #fff;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

@media (hover: hover) {
  .menu-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.12);
  }
}

.menu-card__img {
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.menu-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.menu-card__body {
  padding: 16px;
  text-align: center;
}

.menu-card__body h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}

.menu-card__price {
  font-size: 14px;
  font-weight: 700;
  color: var(--coral);
}

.menu-note {
  text-align: center;
  font-size: 13px;
  color: var(--text);
  margin-bottom: 32px;
  position: relative;
  z-index: 2;
}

.menu-cta {
  text-align: center;
  position: relative;
  z-index: 2;
}

/* ---------- Review（口コミ） ---------- */
/* ---------- お客様の声（Google評価カード） ----------
   クチコミ本文は転載許可の関係で載せず、評価点＋件数＋導線のみを
   マスキングテープ留めの1枚カードで見せる（2026-08再設計） */
.g-review {
  position: relative;
  z-index: 2;
  max-width: 440px;
  margin: 0 auto;
  text-align: center;
  /* テープで貼った「紙」の表現なので面は白のまま。白背景のセクションから
     分離するため、囲みではなくカードの輪郭としてラベンダーの実線を使う
     （破線にするとテープの意匠と競合して賑やかになる） */
  background: #fff;
  border: 2px solid var(--lavender);
  border-radius: 18px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.07);
  padding: 40px 32px 36px;
  transform: rotate(-0.8deg);
}

/* ポラロイドと同じ文脈の「マスキングテープ」を上部中央に */
.g-review::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 50%;
  width: 96px;
  height: 26px;
  transform: translateX(-50%) rotate(-2.5deg);
  background: var(--mint);
  opacity: 0.75;
  border-radius: 2px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.g-review__label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #9AA3AD;
  margin-bottom: 14px;
}

.g-review__main {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-bottom: 16px;
}

.g-review__score {
  /* 星（26px）より点数を明確に主役にする。行の高さも点数側が星ブロックを
     包み込むサイズにして「星が上に飛び出て見える」ズレを解消する */
  font-size: 68px;
  font-weight: 700;
  line-height: 0.9;
  color: var(--blue-gray);
}

.g-review__detail {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  /* 数字はフォントの仕様でボックス上端より数px下から描かれるが、
     ★は上端まで描かれるため、星ブロックを下げてインクの高さを揃える */
  transform: translateY(7px);
}

.g-review__stars {
  font-size: 26px;
  letter-spacing: 3px;
  position: relative;
  display: inline-block;
  line-height: 1;
}

/* 下層: 薄いグレーの星 ／ 上層: 金の星を評価値の幅(96%)だけ表示 */
.g-review__stars-base {
  color: #E3DFD6;
}

.g-review__stars-fill {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  white-space: nowrap;
  color: var(--star);
}

.g-review__count {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
}

.g-review__note {
  font-size: 14px;
  color: var(--text);
  margin-bottom: 24px;
}

/* ---------- Gallery（ポラロイド風） ---------- */
/* 写真の枚数が列数で割り切れないとき、最終行が左寄せのまま残って落ち着かないため、
   gridではなくflexで組んで justify-content:center で端数の行だけ中央に寄せる。
   1行が埋まっているときは幅がぴったりなので、中央寄せの影響は出ない */
.gallery-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 28px 24px;
  position: relative;
  z-index: 2;
  margin-bottom: 48px;
}

.gallery-grid > * {
  width: calc((100% - 24px * 3) / 4);
}

/* 枚数が少ないギャラリー用の3列版（例: 魅せる一枚の5枚→3＋2） */
.gallery-grid--3 > * {
  width: calc((100% - 24px * 2) / 3);
}

@media (max-width: 767px) {
  .gallery-grid {
    gap: 24px 16px;
  }
  .gallery-grid > *,
  .gallery-grid--3 > * {
    width: calc((100% - 16px) / 2);
  }
}

.polaroid {
  background: #fff;
  padding: 10px 10px 28px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.1);
  transition: transform 0.25s ease;
}

@media (hover: hover) {
  .polaroid:hover {
    transform: scale(1.04) rotate(0deg) !important;
  }
}

.polaroid img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.gallery-cta {
  text-align: center;
  position: relative;
  z-index: 2;
}

/* ---------- Flow（撮影の流れ） ---------- */
.flow-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  position: relative;
  z-index: 2;
  margin-bottom: 40px;
}

@media (max-width: 1023px) {
  .flow-steps {
    grid-template-columns: 1fr;
  }
}

.flow-step {
  text-align: center;
  padding: 0 12px;
}

.flow-step__badge {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--teal);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  line-height: 1.2;
  box-shadow: 0 6px 14px rgba(126, 201, 188, 0.4);
}

.flow-step__badge span {
  font-size: 22px;
}

.flow-step h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--blue-gray);
  margin-bottom: 10px;
}

.flow-step p {
  font-size: 14px;
}

.flow-more {
  text-align: center;
  position: relative;
  z-index: 2;
}

.flow-more a {
  font-size: 14px;
  font-weight: 700;
  color: var(--blue-gray);
  border-bottom: 1px solid var(--blue-gray);
  padding-bottom: 2px;
}

/* ---------- FAQ ---------- */
.faq-list {
  max-width: 760px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.faq-item {
  border: 2px dashed var(--lavender);
  border-radius: var(--radius-md);
  margin-bottom: 16px;
  overflow: hidden;
  background: #fff;
}

.faq-item__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  font-weight: 700;
  font-size: 15px;
  color: var(--text);
  text-align: left;
}

@media (hover: hover) {
  .faq-item__q:hover {
    background: var(--bg-tint);
  }
}

/* 質問文はQアイコンの隣に左寄せ（space-betweenで中央に浮くのを防ぐ） */
.faq-item__q span:first-of-type {
  flex: 1;
  text-align: left;
}

.faq-item__q::before {
  content: 'Q';
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--lavender);
  color: #fff;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.faq-item__icon {
  flex-shrink: 0;
  font-size: 20px;
  color: var(--blue-gray);
  transition: transform 0.25s ease;
}

.faq-item.is-open .faq-item__icon {
  transform: rotate(45deg);
}

.faq-item__a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  position: relative;
}

/* Qと対になるAアイコン。Qの薄紫（#D8D3EC）と同じ淡さに揃えたミント。
   コーラルはCTA専用色のため、非アクションのアイコンには使わない */
.faq-item__a::before {
  content: "A";
  position: absolute;
  left: 24px;
  top: 6px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #BFE2D9;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.faq-item__a p {
  padding: 8px 24px 0 68px;
  font-size: 14px;
  color: var(--text);
  line-height: 1.9;
}

/* 回答が複数段落でも下余白は最後の段落にだけ付ける（CMS化しても崩れない） */
.faq-item__a p:last-of-type {
  padding-bottom: 22px;
}

/* ---------- Access（アクセス） ---------- */
.access-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
  position: relative;
  z-index: 2;
  margin-bottom: 64px;
}

@media (max-width: 1023px) {
  .access-grid {
    grid-template-columns: 1fr;
  }
}

.access-info dl {
  display: grid;
  grid-template-columns: 96px 1fr;
  row-gap: 16px;
  font-size: 14.5px;
}

.access-info dt {
  font-weight: 700;
  color: var(--blue-gray);
}

.access-info dd {
  color: var(--text);
}

.access-map {
  border: 2px dashed var(--lavender);
  border-radius: var(--radius-md);
  padding: 8px;
  background: #fff;
}

.access-map iframe {
  width: 100%;
  height: 304px;
  border: 0;
  border-radius: calc(var(--radius-md) - 8px);
  display: block;
  /* 彩度は軽く抑える程度にして、明るさを保ったままなじませる */
  filter: saturate(0.8) brightness(1.06) contrast(0.96) sepia(0.04);
}

/* クロージングCTA: 画面幅いっぱいの淡いミントの横帯。
   ベタ塗りの濃色はページ内で浮くため、他セクションと同じ淡いトーンに揃える。
   ドットは1レイヤー＋中央基準で、左右の切れ方が対称になるようにする */
.access-closing {
  text-align: center;
  background-color: #E7F3EE;
  /* 水玉はフェードさせず、文字の邪魔にならない薄さで均一に敷く */
  background-image: radial-gradient(circle, rgba(126, 201, 188, 0.2) 0 5px, transparent 6px);
  background-size: 56px 56px;
  background-position: center;
  padding: 72px 24px;
  margin: 88px calc(50% - 50vw) -88px; /* セクション余白を突き抜けて全幅に */
  position: relative;
  z-index: 2;
}

.access-closing h3 {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 28px;
  color: var(--blue-gray);
  margin-bottom: 28px;
  word-break: keep-all;
  letter-spacing: 0.08em;
}

/* フレーズ単位で折り返す */
.access-closing h3 span {
  display: inline-block;
}

@media (max-width: 767px) {
  .access-closing {
    padding: 56px 20px;
    margin: 64px calc(50% - 50vw) -64px;
  }
  .access-closing h3 {
    font-size: 19px;
    margin-bottom: 22px;
  }
}

/* クロージング専用セクション（詳細ページ末尾）では上の余白を重ねない */
.closing-section {
  padding-top: 0;
}

.closing-section .access-closing {
  margin-top: 0;
}

.access-closing__ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

/* 締めCTAの2本は等幅にして安定させる（ラベルは名詞形で統一） */
.access-closing__ctas .btn-ribbon {
  min-width: 230px;
  text-align: center;
}

/* ---------- フッター ---------- */
.site-footer {
  background: var(--bg-tint);
  padding: 56px 24px 32px;
  text-align: center;
}

.site-footer__logo img {
  height: 36px;
  margin: 0 auto 16px;
}

.site-footer p {
  font-size: 13px;
  color: var(--text);
  margin-bottom: 6px;
}

.site-footer__sns {
  margin: 16px 0;
}

.site-footer__sns a {
  font-size: 13px;
  font-weight: 700;
  color: var(--pink);
  border-bottom: 1px solid var(--pink);
  padding-bottom: 2px;
}

.site-footer__copy {
  margin-top: 24px;
  font-size: 12px;
  color: #9AA3AD;
}

/* ---------- スマホ下部のCTA（右下フローティング） ---------- */
/* 画面を横に貫くバーをやめ、右下の小さな2ボタンにした（2026-08-05）。
   ・iOS SafariのURLバーと縦に並ばないため、誤タップしにくい
   ・画面最下部にフッター（ベージュ単色）が来るので、Safariが最下部の色を拾って
     ツールバーを塗る。全幅バーで起きていた「バーの下が透ける」現象が構造的に起きない
   ・電話と予約はひとつの台座に載せず離して置く。並べるとiOSの切替スイッチ
     （セグメンテッドコントロール）に見え、片方が選択中だと誤読されるため */
.mobile-fixed-bar {
  display: none;
}

@media (max-width: 767px) {
  .mobile-fixed-bar {
    display: flex;
    position: fixed;
    right: 12px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
    align-items: center;
    gap: 8px;
    z-index: 90;
    transition: opacity 0.3s ease, transform 0.3s ease;
  }

  .mobile-fixed-bar a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 50px;
    padding: 0 18px;
    border-radius: 999px;
    box-shadow: 0 5px 16px rgba(0, 0, 0, 0.18);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
  }

  .mobile-fixed-bar a svg {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
  }

  /* 直前の .mobile-fixed-bar a（color:#fff）に負けないよう a. を付けて具体度を上げる */
  .mobile-fixed-bar a.mobile-fixed-bar__tel {
    background: #fff;
    color: var(--coral);
  }

  .mobile-fixed-bar a.mobile-fixed-bar__resv {
    background: var(--coral);
  }

  /* 同じ動線がすぐ近くにある場所（FVのCTA・フッターの予約リンク）では引っ込める。
     JS側で .is-hidden を付け外しする */
  .mobile-fixed-bar.is-hidden {
    opacity: 0;
    transform: translateY(10px) scale(0.94);
    pointer-events: none;
  }

}

/* ---------- フェードインアニメーション ---------- */
.fade-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* main.js が読み込めなかったとき（通信エラー・配信漏れ）の保険。
   is-visible を付ける役がいなくなり本文が透明のままになるため、最初から表示状態にする。
   js-failed は Base.astro の script タグの onerror が付ける */
.js-failed .fade-in {
  opacity: 1;
  transform: none;
}

/* ---------- 料金ページ ---------- */

/* ページタイトル（固定ヘッダー分の余白を上に確保） */
.price-hero {
  padding-top: calc(var(--header-h) + 56px);
  padding-bottom: 48px;
  background: var(--bg-tint);
}

.price-hero .section-head {
  margin-bottom: 0;
}

/* 全プラン共通の安心材料カード */
.assure-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  position: relative;
  z-index: 2;
  margin-bottom: 24px;
}

@media (max-width: 1023px) {
  .assure-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .assure-grid {
    grid-template-columns: 1fr;
  }
}

.assure-card {
  background: #fff;
  border: 2px dashed var(--mint);
  border-radius: var(--radius-md);
  padding: 24px 18px;
  text-align: center;
}

.assure-card__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--mint);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
}

.assure-card__icon svg {
  width: 30px;
  height: 30px;
}

.assure-card h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--blue-gray);
  margin-bottom: 6px;
}

.assure-card p {
  font-size: 12.5px;
  color: var(--text);
}

.assure-note {
  text-align: center;
  font-size: 13px;
  color: var(--text);
  position: relative;
  z-index: 2;
}

/* メニュー別セクション */
.price-menu {
  padding: 72px 0;
}

.price-menu__head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  margin-bottom: 40px;
  position: relative;
  z-index: 2;
}

/* メニュー写真はポラロイド風の小さめフレーム */
.price-menu__photo {
  flex-shrink: 0;
  width: 180px;
  background: #fff;
  padding: 8px 8px 20px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.1);
  transform: rotate(-2deg);
}

.price-menu__photo img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.price-menu__title h2 {
  font-size: 26px;
  font-weight: 700;
  color: var(--blue-gray);
  line-height: 1.4;
}

.price-menu__title .en {
  display: block;
  font-family: var(--font-script);
  font-weight: 700;
  font-size: 30px;
  color: var(--coral-light);
  line-height: 1;
  margin-bottom: 4px;
}

.price-menu__title .target {
  display: block;
  margin-top: 6px;
  font-size: 13.5px;
  color: var(--text);
  font-weight: 400;
}

@media (max-width: 767px) {
  .price-menu {
    padding: 56px 0;
  }
  .price-menu__head {
    flex-direction: column;
    text-align: center;
  }
  .price-menu__photo {
    width: 160px;
  }
  .price-menu__title h2 {
    font-size: 22px;
  }
}

/* プランカード */
.plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  position: relative;
  z-index: 2;
  margin-bottom: 24px;
}

/* プランが1つのメニューはカードを中央に置き広がりすぎを防ぐ */
.plan-grid--single {
  grid-template-columns: minmax(260px, 420px);
  justify-content: center;
}

@media (max-width: 767px) {
  .plan-grid {
    grid-template-columns: 1fr;
  }
}

.plan-card {
  background: #fff;
  border: 2px dashed var(--coral-light);
  border-radius: var(--radius-md);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  text-align: center;
}

.plan-card__name {
  font-size: 17px;
  font-weight: 700;
  color: var(--blue-gray);
  margin-bottom: 8px;
}

.plan-card__price {
  font-size: 30px;
  font-weight: 700;
  color: var(--coral);
  line-height: 1.2;
  margin-bottom: 4px;
}

.plan-card__meta {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 14px;
}

.plan-card__includes {
  text-align: left;
  font-size: 13.5px;
  color: var(--text);
  margin-bottom: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--lavender);
}

/* 金額の直後にリストが来るカード（おでかけプラン等）は、間にメタ行が
   ないぶん破線が金額に近づきすぎるため、他カードと同等の間隔を確保する */
.plan-card__price + .plan-card__includes {
  margin-top: 12px;
}

.plan-card__includes li {
  padding-left: 20px;
  position: relative;
  margin-bottom: 4px;
}

/* 含まれるものリストのチェックマーク */
.plan-card__includes li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--teal);
  font-weight: 700;
}

.plan-card__note {
  font-size: 12px;
  color: #9AA3AD;
  margin-bottom: 16px;
}

/* ※注記が連続する場合は1つのまとまりに見えるよう間隔を詰める
   （前の注記のmargin-bottomと相殺して約6pxにする） */
.plan-card__note + .plan-card__note {
  margin-top: -10px;
}

.plan-card .btn-ribbon {
  margin-top: auto;
  align-self: center;
  /* マスクで上下が削られるため、縦paddingを薄くしすぎるとリボンが潰れる。
     トップページのCTAと同じバランスの厚みを保つ */
  padding: 20px 40px;
  font-size: 14px;
}

/* セクション末尾の共通注記 */
.price-menu-note {
  font-size: 12.5px;
  color: #9AA3AD;
  text-align: center;
  position: relative;
  z-index: 2;
}

/* オプション・商品の表風リスト（点線区切り） */
.option-list {
  max-width: 720px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.option-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 8px;
  border-bottom: 1px dashed var(--lavender);
  font-size: 14.5px;
}

.option-list .name {
  color: var(--text);
  font-weight: 500;
}

.option-list .price {
  color: var(--coral);
  font-weight: 700;
  white-space: nowrap;
}

/* 商品セクションのグループ見出し */
.goods-group {
  max-width: 720px;
  margin: 0 auto 36px;
  position: relative;
  z-index: 2;
}

.goods-group h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--blue-gray);
  text-align: center;
  margin-bottom: 12px;
}

.goods-group h3::before {
  content: '❀ ';
  color: var(--pink);
}

/* ナビの現在ページ表示（料金ページで「料金」を強調） */
.site-header__nav a.is-current {
  color: var(--coral);
  font-weight: 700;
}

/* ---------- 七五三詳細ページ ---------- */

/* パンくずリスト */
/* パンくず: ナビゲーション部品なので下線は常時表示しない（悪目立ちするため）。
   薄い青紫でページの空気に溶け込ませ、ホバー時だけサイトモチーフの
   破線下線＋コーラルでリンクだと分かるようにする */
.breadcrumb {
  position: relative;
  z-index: 2;
  font-size: 12px;
  letter-spacing: 0.04em;
  margin-bottom: 24px;
}

.breadcrumb ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.breadcrumb li {
  color: rgba(123, 140, 184, 0.85);
}

.breadcrumb li:not(:last-child)::after {
  content: '›';
  margin-left: 10px;
  font-size: 14px;
  color: var(--lavender);
}

/* 現在地はいちばん薄く（クリックできない情報だと分かるように） */
.breadcrumb li:last-child {
  color: #A8B0BC;
}

.breadcrumb a {
  color: rgba(123, 140, 184, 0.85);
  padding-bottom: 2px;
  /* ホバーで実線の下線が左から右へ伸びる */
  background: linear-gradient(currentColor, currentColor) no-repeat left bottom / 0% 1px;
  transition: background-size 0.35s ease, color 0.2s ease;
}

@media (hover: hover) {
  .breadcrumb a:hover {
    color: var(--coral);
    background-size: 100% 1px;
  }
}

/* 詳細ページのタイトルまわり（リード文＋ヒーロー写真） */
.detail-hero {
  padding-top: calc(var(--header-h) + 40px);
  padding-bottom: 64px;
  background: var(--bg-tint);
}

.detail-hero__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 56px;
  position: relative;
  z-index: 2;
  /* CTA行を3つ目の子として置くページ（おでかけLP）で、写真の下に
     横いっぱいの行として回り込ませるため（2026-09-04） */
  flex-wrap: wrap;
}

.detail-hero__text {
  max-width: 480px;
}

.detail-hero__text .section-head {
  text-align: left;
  margin-bottom: 20px;
}

/* ヒーロー直下に置くCTA行（写真の下）。横いっぱいを占有して独立した行にする。
   PCでは2カラムの下、SPでは写真の下に来る。揃えは .detail-cta-row の既定（中央）のまま
   ——2カラム全体に対するCTAなので、文章カラムに左揃えするとかえってズレる
   （2026-09-04 坪井さん指示でボタンを写真の下へ移動） */
.detail-cta-row--hero {
  /* flex-basis だと縦並び（SP）では「高さ」の指定になってしまうので width を使う */
  width: 100%;
  /* 上下の間隔は .detail-hero__inner の gap が担うので margin は持たせない */
  margin-top: 0;
}

.detail-hero__lead {
  font-size: 15px;
  color: var(--text);
}

/* ヒーロー写真はやや大きめのポラロイド */
.detail-hero__photo {
  flex-shrink: 0;
  width: 380px;
  background: #fff;
  padding: 12px 12px 32px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
  transform: rotate(2deg);
}

.detail-hero__photo img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

@media (max-width: 767px) {
  .detail-hero__inner {
    flex-direction: column;
    gap: 36px;
  }
  .detail-hero__text .section-head {
    text-align: center;
  }
  .detail-hero__photo {
    width: 240px;
  }
}

/* プラン比較表（横スクロール可） */
.compare-scroll {
  overflow-x: auto;
  position: relative;
  z-index: 2;
  margin-bottom: 20px;
  -webkit-overflow-scrolling: touch;
  padding: 14px 2px 6px; /* 人気バッジのはみ出し分の余白 */
}

.compare-table {
  width: 100%;
  min-width: 760px;
  /* プラン列は等幅にする（内容量で列幅が揺れると比較の格子が崩れるため）。
     タイトル列だけ固定幅で確保し、残りをプラン数で等分する */
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  border: 2px dashed var(--lavender);
  border-radius: var(--radius-md);
  overflow: hidden;
  font-size: 13.5px;
}

.compare-table th,
.compare-table td {
  padding: 14px 12px;
  text-align: center;
  border-bottom: 1px dashed var(--lavender);
  vertical-align: middle;
}

/* 表の最終行だけ線を消す。tr:last-childだけだとtheadの行（thead内の
   最終行）にも当たってプラン名下の線が消えるため、tbodyに限定する */
.compare-table tbody tr:last-child th,
.compare-table tbody tr:last-child td {
  border-bottom: none;
}

/* タイトル列の幅は先頭行（theadの空セル）で決まる（table-layout: fixed の仕様） */
.compare-table thead th:first-child {
  width: 150px;
}

/* 行見出し（左端）— 固定幅を超える長文（おでかけ表など）は折り返す */
.compare-table th[scope="row"] {
  background: var(--bg-tint);
  color: var(--blue-gray);
  font-weight: 700;
  text-align: left;
  padding-left: 18px;
  padding-right: 10px;
}

/* 列見出し（プラン名）— バッジが収まる高さを確保 */
.compare-table thead th {
  background: var(--bg-tint);
  color: var(--blue-gray);
  font-weight: 700;
  font-size: 14px;
  position: relative;
  padding-top: 34px;
  padding-bottom: 14px;
}

/* おすすめ（スタンダード）列の強調 */
.compare-table .is-recommend {
  background: rgba(240, 144, 127, 0.08);
}

.compare-table thead th.is-recommend {
  color: var(--coral);
}

/* 「人気」バッジ */
.compare-badge {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%) rotate(-4deg);
  background: var(--coral);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 12px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 3px 8px rgba(240, 144, 127, 0.4);
}

/* 料金行は大きくコーラルで */
.compare-table .price-cell {
  color: var(--coral);
  font-weight: 700;
  font-size: 16px;
}

/* ○×マーク（○=ミント／×=薄グレー） */
.mark-yes,
.mark-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
}

.mark-yes {
  background: var(--mint);
  color: #fff;
}

.mark-no {
  background: #EDEDEA;
  color: #B8BDC4;
}

.compare-notes {
  position: relative;
  z-index: 2;
  font-size: 12.5px;
  color: #9AA3AD;
  text-align: center;
}

.compare-notes p {
  margin-bottom: 4px;
}

/* 各プラン詳細カード（縦積み・大きめ） */
.plan-detail {
  max-width: 760px;
  margin: 0 auto 32px;
  background: #fff;
  border: 2px dashed var(--coral-light);
  border-radius: var(--radius-md);
  padding: 36px 32px;
  position: relative;
  z-index: 2;
  text-align: center;
}

.plan-detail__name {
  font-size: 21px;
  font-weight: 700;
  color: var(--blue-gray);
  margin-bottom: 4px;
}

.plan-detail__tag {
  display: inline-block;
  background: var(--yellow);
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  padding: 2px 14px;
  border-radius: 999px;
  margin-bottom: 10px;
}

.plan-detail__price {
  font-size: 34px;
  font-weight: 700;
  color: var(--coral);
  line-height: 1.2;
  margin-bottom: 6px;
}

.plan-detail__price small {
  font-size: 15px;
  font-weight: 500;
}

/* 金額に添える税込表記（総額表示）。
   数字のベースラインに揃うので、見た目は金額の右下に小さく載る */
.plan-detail__price .tax,
.plan-card__price .tax {
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  opacity: 0.7;
  margin-left: 5px;
  letter-spacing: 0.02em;
}

/* 「こんな方におすすめ」の一言。＼ ／の飾りごと必ず1行に収める。
   途中で折り返すと閉じの／だけが次の行に落ちて崩れて見えるため、
   nowrap＋画面幅連動のフォントで対応（最長文言18字が iPhone SE の
   カード内幅259pxに収まるよう、375px時は約12.4pxまで縮む） */
.plan-detail__for {
  font-size: min(14px, 3.3vw);
  white-space: nowrap;
  font-weight: 700;
  color: var(--teal);
  margin-bottom: 16px;
}

.plan-detail__for::before { content: '＼ '; }
.plan-detail__for::after  { content: ' ／'; }

.plan-detail .plan-card__includes {
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

.plan-detail__note {
  font-size: 12.5px;
  color: #9AA3AD;
  margin-bottom: 20px;
}

/* ※注記が連続する場合は1つのまとまりに見えるよう間隔を詰める */
.plan-detail__note + .plan-detail__note {
  margin-top: -14px;
}

/* 着物ギャラリーのキャプション */
.kimono-caption,
.gallery-lead {
  text-align: center;
  font-size: 14px;
  color: var(--text);
  margin-bottom: 40px;
  position: relative;
  z-index: 2;
}

/* オプションの補足つきリスト（名前の下に小さな注記） */
.option-list .desc {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: #9AA3AD;
}

/* ==========================================================================
   カード枠のステッチ（四隅まで連続した破線。縫い目の個性はリボン側に集約）
   ========================================================================== */
.plan-card,
.plan-detail {
  border: 2px dashed var(--coral-light);
}

.assure-card {
  border: 2px dashed var(--mint);
}

/* FAQの破線だけはborderではなくグラデーションで描く。
   CSSのdashed borderは「その辺にちょうど収まる本数」に破線を割り付け直すため、
   アコーディオンの開閉で高さが変わると左右の辺の破線が毎フレーム動いて見える
   （iOS SafariのWebKitで顕著。iPhone実機で確認。Blinkは上端アンカーで目立たない）。
   グラデーションには破線の再配分が存在しないので、どのブラウザでも破線が動かない。
   構成: 4辺=repeating-linear-gradient（縦辺はto bottom＝上端アンカー）、
   四隅=コーナー円の中心を軸にしたrepeating-conic-gradient（弧に沿った破線）、
   maskのcontent-box XORで外周2pxのリング状に絞る。
   実測: 高さ3px変化で動くのは下角との継ぎ目の1本だけ＝Blinkの挙動と同等（2026-08-07） */
.faq-item {
  /* conic-gradient非対応の古いブラウザ用フォールバック（従来どおり破線は動く） */
  border: 2px dashed var(--lavender);
}

@supports (background: repeating-conic-gradient(#000 0 9deg, #fff 9deg 18deg)) {
  .faq-item {
    /* 透明borderで従来と同じボックス寸法を保つ。破線は下のborder-box層が透けて見える */
    border: 2px solid transparent;
    background:
      /* 内側を白で覆う（padding-box）。四隅のconicタイルのうち枠より内側の部分を隠し、
         見えるのを外周2pxのリング部分だけにする */
      linear-gradient(#fff 0 0) padding-box,
      /* 上辺・下辺（四隅の20pxを除いた直線部分） */
      repeating-linear-gradient(to right, var(--lavender) 0 3px, transparent 3px 6px) 20px 0 / calc(100% - 40px) 2px no-repeat border-box,
      repeating-linear-gradient(to right, var(--lavender) 0 3px, transparent 3px 6px) 20px 100% / calc(100% - 40px) 2px no-repeat border-box,
      /* 左辺・右辺。to bottom＝上端アンカーなので、高さが伸びても既存の破線は動かず下に足されるだけ */
      repeating-linear-gradient(to bottom, var(--lavender) 0 3px, transparent 3px 6px) 0 20px / 2px calc(100% - 40px) no-repeat border-box,
      repeating-linear-gradient(to bottom, var(--lavender) 0 3px, transparent 3px 6px) 100% 20px / 2px calc(100% - 40px) no-repeat border-box,
      /* 四隅: 角の円の中心を軸にした角度縞。9度≒半径20pxの弧上で約3px＝直線部分と同じ見た目。
         20×20pxの固定タイルなので、カードの伸縮に追随して拡大されることがない */
      repeating-conic-gradient(from 180deg at 20px 20px, var(--lavender) 0 9deg, transparent 9deg 18deg) 0 0 / 20px 20px no-repeat border-box,
      repeating-conic-gradient(from 270deg at calc(100% - 20px) 20px, var(--lavender) 0 9deg, transparent 9deg 18deg) 100% 0 / 20px 20px no-repeat border-box,
      repeating-conic-gradient(from 90deg at 20px calc(100% - 20px), var(--lavender) 0 9deg, transparent 9deg 18deg) 0 100% / 20px 20px no-repeat border-box,
      repeating-conic-gradient(from 0deg at calc(100% - 20px) calc(100% - 20px), var(--lavender) 0 9deg, transparent 9deg 18deg) 100% 100% / 20px 20px no-repeat border-box,
      /* 最下層: カードの白地（破線の隙間からもこの白が見える＝従来のdashed borderと同じ見え方） */
      linear-gradient(#fff 0 0) border-box;
  }
}

/* ==========================================================================
   比較表のスマホ対応
   横スクロールも転置もせず、フル比較表を1画面に収まるサイズへ縮小して表示する。
   PC/SPで表示を切り替えるための補助クラスも定義。
   ========================================================================== */
.sp-only { display: none; }

@media (max-width: 767px) {
  .pc-only { display: none; }
  .sp-only { display: inline; }

  .compare-scroll {
    overflow: visible;
    padding: 6px 0 0;
  }

  .compare-table {
    min-width: 0;
    font-size: 10.5px;
    line-height: 1.45;
  }

  .compare-table th,
  .compare-table td {
    padding: 8px 3px;
  }

  .compare-table thead th:first-child {
    width: 62px;
  }

  /* 2プラン表（プラン列に余裕がある）はタイトル列を広げて1行で収める。
     最長は「きょうだい写真」7文字。4プラン表（七五三）は62pxのまま */
  .compare-table:not(:has(thead th:nth-child(4))) thead th:first-child {
    width: 92px;
  }

  .compare-table th[scope="row"] {
    font-size: 10.5px;
    padding-left: 7px;
    padding-right: 4px;
    white-space: normal;
    width: 62px;
  }

  .compare-table thead th {
    font-size: 11px;
    padding-top: 24px;
    padding-bottom: 8px;
    line-height: 1.3;
    vertical-align: middle;
  }

  .compare-table .price-cell {
    font-size: 12px;
  }

  .compare-badge {
    font-size: 9px;
    padding: 1px 8px;
    top: 4px;
  }

  .mark-yes,
  .mark-no {
    width: 18px;
    height: 18px;
    font-size: 10px;
  }
}

/* 比較表の列見出しを自然な位置で折り返すための塊 */
.compare-table thead .th-break {
  display: inline-block;
}

/* ==========================================================================
   ナビのSP専用リンク（お問い合わせ・電話）とモバイル固定バーのアイコン
   ========================================================================== */
/* PCのヘッダーには出さず、ドロワーメニュー内のみ表示 */
.nav-sp-only {
  display: none;
}

@media (max-width: 1023px) {
  .site-header__nav .nav-sp-only {
    display: block;
  }
}

/* メニューカードの補足（対象シーン等）は小さく添える */
.menu-card__sub {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: #9AA3AD;
  line-height: 1.5;
  margin-top: 2px;
}

/* ==========================================================================
   七五三プラン詳細: PCは2列グリッド（縦長と余白の間延びを解消）、SPは1列
   ========================================================================== */
.plan-detail-grid {
  position: relative;
  z-index: 2;
}

@media (min-width: 1024px) {
  .plan-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
    max-width: 1000px;
    margin: 0 auto;
  }

  /* グリッド内では中央寄せ・下マージンをリセットし、高さを揃える */
  .plan-detail-grid .plan-detail {
    max-width: none;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* 予約ボタンをカード下端に揃える */
  .plan-detail-grid .plan-detail .btn-ribbon {
    margin-top: auto;
  }

  .plan-detail-grid .plan-detail .plan-card__includes {
    margin-bottom: 16px;
  }
}

/* ==========================================================================
   メニュー詳細ページ共通の追加部品（ベビー・バースデー・アニバーサリー）
   ========================================================================== */

/* 写真2枚をポラロイドで並べる（お宮参りの着物紹介など）。
   PCは横並び、SPは縦積み。着物の柄や色を見せるための写真なので、
   SPで2列に並べると写真部分が実質130px前後まで小さくなり、
   何の着物か分からなくなるため（2026-08 坪井さんの指摘で変更） */
.photo-duo {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 40px;
  position: relative;
  z-index: 2;
  margin-bottom: 32px;
  flex-wrap: wrap;
}

/* 写真とその説明文を1組にまとめる。縦積みにしたときに
   「どの写真の説明か」が崩れないよう、説明文は写真の直下に置く */
.photo-duo__item {
  width: min(300px, 42%);
}

.photo-duo .polaroid {
  width: 100%;
}

.photo-duo .polaroid figcaption {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  text-align: center;
  padding-top: 10px;
}

/* 写真ごとの補足（レンタル料金・持ち込みの可否など） */
.photo-duo__text {
  margin-top: 14px;
  font-size: 13.5px;
  line-height: 1.85;
  text-align: center;
  color: var(--text);
}

@media (max-width: 767px) {
  .photo-duo {
    flex-direction: column;
    align-items: center;
    gap: 32px;
  }
  .photo-duo__item {
    width: min(300px, 82%);
  }
}

/* 写真2枚の下の説明文 */
.photo-duo-note {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  font-size: 14.5px;
  color: var(--text);
  position: relative;
  z-index: 2;
}

/* アニバーサリーのシーンカード（PC3列×2段・SP2列） */
.scene-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px 24px;
  position: relative;
  z-index: 2;
  margin-bottom: 48px;
}

@media (max-width: 1023px) {
  .scene-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}

@media (max-width: 767px) {
  .scene-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 14px;
  }
}

.scene-card {
  background: #fff;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
  text-align: center;
}

.scene-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.scene-card__body {
  padding: 16px 14px 20px;
}

.scene-card h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--blue-gray);
  margin-bottom: 6px;
}

.scene-card p {
  font-size: 13px;
  color: var(--text);
  line-height: 1.7;
}

/* シーン共通料金カードの下などに置く誘導ボタン行 */
.detail-cta-row {
  text-align: center;
  position: relative;
  z-index: 2;
}

/* ボタンの前に置く導入文。ボタン内に長文を入れるとSPで2行に折り返すため、
   説明はこちらに出してボタンのラベルは短く保つ */
.detail-cta-row__lead {
  font-size: 14px;
  color: var(--text);
  margin-bottom: 12px;
}

/* ---------- 魅せる一枚（プロフィール撮影）ページ ---------- */

/* 「こんな時に」チェックリスト（白カードにミントの丸チェック） */
.check-list {
  max-width: 560px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.check-list li {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  border: 2px dashed var(--mint);
  border-radius: var(--radius-md);
  padding: 18px 24px;
  margin-bottom: 14px;
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
}

/* チェックマークはミントの丸バッジで */
.check-list li::before {
  content: '✓';
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--mint);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
}

/* ---------- マタニティページ（特典カード） ---------- */

/* ミント点線カードを2枚横並び（SPは1列） */
.benefit-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  max-width: 760px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

@media (max-width: 767px) {
  .benefit-grid {
    grid-template-columns: 1fr;
  }
}

.benefit-card {
  background: #fff;
  border: 2px dashed var(--mint);
  border-radius: var(--radius-md);
  padding: 28px 24px;
  text-align: center;
}

/* 「特典①」などの丸ラベル */
.benefit-card__label {
  display: inline-block;
  background: var(--teal);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 3px 16px;
  border-radius: 999px;
  margin-bottom: 12px;
}

.benefit-card p {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--text);
}

/* ---------- 撮影の流れページ（縦タイムライン） ---------- */

.timeline {
  max-width: 720px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.timeline-step {
  display: flex;
  gap: 24px;
  position: relative;
  padding-bottom: 40px;
}

/* STEPバッジ同士をつなぐ点線の縦線 */
.timeline-step:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 31px;
  top: 64px;
  bottom: 0;
  border-left: 2px dashed var(--mint);
}

/* ミントの丸STEPバッジ（トップページのflow-step__badgeと同トーン） */
.timeline-step__badge {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--teal);
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
  box-shadow: 0 6px 14px rgba(126, 201, 188, 0.4);
}

.timeline-step__badge span {
  font-size: 20px;
}

.timeline-step__body {
  padding-top: 6px;
}

.timeline-step__body h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--blue-gray);
  margin-bottom: 8px;
}

.timeline-step__body p {
  font-size: 14.5px;
  color: var(--text);
}

.timeline-step__body .note {
  display: block;
  font-size: 12.5px;
  color: #9AA3AD;
  margin-top: 4px;
}

/* ステップ内のリンクボタン行 */
.timeline-step__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 14px;
}

.timeline-step__ctas .btn-outline {
  padding: 10px 24px;
  font-size: 14px;
}

@media (max-width: 767px) {
  .timeline-step {
    gap: 16px;
    padding-bottom: 32px;
  }
  .timeline-step__badge {
    width: 52px;
    height: 52px;
    font-size: 10.5px;
  }
  .timeline-step__badge span {
    font-size: 17px;
  }
  .timeline-step:not(:last-child)::before {
    left: 25px;
    top: 52px;
  }
}

/* FAQページのカテゴリ小見出し */
.faq-category {
  max-width: 760px;
  margin: 0 auto 16px;
  font-size: 17px;
  font-weight: 700;
  color: var(--blue-gray);
  position: relative;
  z-index: 2;
}

.faq-category::before {
  content: '❀ ';
  color: var(--pink);
}

.faq-category:not(:first-of-type) {
  margin-top: 40px;
}

/* ==========================================================================
   お知らせ・コラム（news / column）
   ========================================================================== */

/* フッターのサブメニュー（お知らせ・コラム） */
.site-footer__links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
  margin: 16px 0 4px;
}

.site-footer__links a {
  font-size: 13px;
  font-weight: 700;
  color: var(--blue-gray);
  border-bottom: 1px solid var(--blue-gray);
  padding-bottom: 2px;
}

/* ---------- お知らせ一覧（1行リスト・点線区切り） ---------- */
.news-list {
  max-width: 760px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.news-item {
  border-bottom: 1px dashed var(--lavender);
}

.news-item:first-child {
  border-top: 1px dashed var(--lavender);
}

/* 行全体は「テキスト一式（左）＋サムネイル（右）」の2カラム */
.news-item > a {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 8px;
  transition: background 0.2s ease;
}

/* baseline揃え: 概要が付いて右側が2〜3段になっても、日付とタイトル1行目の
   文字の下端が一直線に並ぶ（centerだと右側の高さに引きずられて日付が下がる） */
.news-item__content {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 16px;
}

/* 日付とバッジは1つの塊にまとめる。塊にしておかないと、
   タイトルと概要を縦に積んだときに列がずれる */
.news-item__meta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 16px;
}

.news-item__body {
  flex: 1 1 100%;
  min-width: 0;
}

/* サムネイル（画像がある記事のみ）。スクエア中央切り出しで被写体を大きく見せる。
   角丸はカードより一段小さく。無い記事はテキストが右端まで使う */
.news-item__thumb {
  flex-shrink: 0;
}

.news-item__thumb img {
  display: block;
  width: 88px;
  height: 88px;
  object-fit: cover;
  border-radius: 10px;
}

/* 元画像が縦長（Insta広告用4:5/3:4バナー等）のときは4:5の縦長で見せる */
.news-item__thumb--tall img {
  height: 110px;
}

@media (hover: hover) {
  .news-item > a:hover {
    background: var(--bg-tint);
  }
}

.news-item__date {
  flex-shrink: 0;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--blue-gray);
  letter-spacing: 0.04em;
}

/* カテゴリバッジ（NEWS=ミント／CAMPAIGN=コーラル） */
.news-badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 88px;
  padding: 3px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #fff;
}

.news-badge--news {
  background: var(--teal);
}

.news-badge--campaign {
  background: var(--coral);
}

.news-item__title {
  display: block;
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
}

/* 概要はタイトルの補足。一段小さく淡くして読む順を明示する。
   一覧は記事を選ぶ場所なので、トップの帯（PCは1行）より長めの2行まで見せる。
   上限を設けるのは、長い概要が1件だけ突出して一覧の見通しを壊さないため */
.news-item__summary {
  margin-top: 5px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text);
  opacity: 0.62;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (hover: hover) {
  .news-item > a:hover .news-item__title {
    color: var(--coral);
  }
}

/* 中〜大画面ではタイトルを日付・バッジと同じ行に */
@media (min-width: 600px) {
  .news-item__body {
    flex: 1;
  }
}

/* 狭い画面ではサムネイルを一回り小さくして本文の幅を確保する */
@media (max-width: 599px) {
  .news-item__thumb img {
    width: 72px;
    height: 72px;
  }
  .news-item__thumb--tall img {
    height: 90px;
  }
}

.news-empty {
  text-align: center;
  color: var(--text);
  font-size: 15px;
  position: relative;
  z-index: 2;
}

/* トップページのNewsセクションはリストを少し詰めて配置 */
.news-list--home {
  margin-bottom: 28px;
}

.home-news-more {
  text-align: center;
  position: relative;
  z-index: 2;
  margin-top: 36px;
}

/* トップのコラム見出しは上に余白を足して区切る */
.section-head--sub {
  margin-top: 64px;
}

/* ---------- コラム一覧（カードグリッド） ---------- */
.column-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px 24px;
  position: relative;
  z-index: 2;
}

@media (max-width: 1023px) {
  .column-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 599px) {
  .column-grid {
    grid-template-columns: 1fr;
  }
}

.column-card {
  background: #fff;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  display: flex;
  flex-direction: column;
}

@media (hover: hover) {
  .column-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.12);
  }
}

.column-card__img {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.column-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 画像なし記事のプレースホルダ（パステル地＋ロゴ） */
.column-card__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 30% 30%, rgba(168, 221, 211, 0.55), transparent 60%),
    radial-gradient(circle at 75% 70%, rgba(242, 183, 201, 0.5), transparent 60%),
    var(--bg-tint);
}

.column-card__placeholder img {
  width: 52%;
  max-width: 150px;
  height: auto;
  opacity: 0.85;
}

.column-card__body {
  padding: 18px 18px 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.column-card__title {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--blue-gray);
  line-height: 1.6;
  margin-bottom: 8px;
}

.column-card__date {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--coral);
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}

/* 説明文は3行（日本語で約60字）で打ち切る。
   Gridは同じ行のカードを最も高いものに合わせて引き伸ばすため、長い説明が1件
   あるだけで行全体が膨らみ、短いカードの下に空白が残ってしまう（2026-08-07） */
.column-card__desc {
  font-size: 13.5px;
  color: var(--text);
  line-height: 1.75;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- 一覧のページ送り（お知らせ・コラム共通） ---------- */
.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap; /* ページ数が増えても横にはみ出さず折り返す */
  gap: 8px;
  margin-top: 48px;
  position: relative;
  z-index: 2;
}

.pager__nums {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

/* 数字は小さくても、指で押す領域は44px角を確保する
   （スマホで押し間違えない最小サイズの目安） */
.pager__num,
.pager__arrow {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  color: var(--blue-gray);
  background: #fff;
  border: 1.5px solid var(--lavender);
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

@media (hover: hover) {
  .pager__num:hover,
  .pager__arrow:hover {
    color: var(--coral);
    border-color: var(--coral-light);
  }
}

/* 現在地は塗りつぶす。枠線の色差だけだと今どこにいるか読み取りにくいため */
.pager__num.is-current {
  color: #fff;
  background: var(--coral);
  border-color: var(--coral);
}

/* 先頭・末尾で押せない矢印。消すと数字の並びが左右にずれて落ち着かないので、
   場所は残したまま淡くする */
.pager__arrow.is-disabled {
  color: var(--lavender);
  border-color: rgba(216, 211, 236, 0.5);
  background: transparent;
}

.pager__gap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 44px;
  color: var(--blue-gray);
  opacity: 0.6;
}

@media (max-width: 599px) {
  /* 押す領域(44px)は保ったまま、隙間だけ詰めて横幅に収める */
  .pager,
  .pager__nums {
    gap: 6px;
  }
  .pager {
    margin-top: 36px;
  }
}

/* ---------- 記事ページ共通（見出し・本文） ---------- */

/* 記事タイトルまわり（お知らせ・コラム共通） */
.article-head {
  position: relative;
  z-index: 2;
  max-width: 760px;
  margin: 0 auto;
}

.article-head__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-bottom: 14px;
}

.article-head__title {
  font-size: 27px;
  font-weight: 700;
  color: var(--blue-gray);
  line-height: 1.5;
}

@media (max-width: 767px) {
  .article-head__title {
    font-size: 21px;
  }
}

/* コラムのタグ */
.column-tag {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--teal);
}

/* コラムのアイキャッチ */
.article-eyecatch {
  /* カード（白フチ）は画像の実幅にぴったり合わせる。固定幅にすると
     縦長画像のとき左右に白い余白が残ってしまうため */
  width: fit-content;
  max-width: min(760px, 100%);
  margin: 0 auto 36px;
  background: #fff;
  padding: 12px;
  border-radius: var(--radius-md);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
  position: relative;
  z-index: 2;
}

.article-eyecatch img {
  /* microCMSの画像は縦長バナーも多いため、切り抜かず元の縦横比のまま表示する。
     縦長でも画面を覆い尽くさないよう高さに上限を設け、幅が余る分は中央寄せ */
  display: block;
  max-width: 100%;
  width: auto;
  max-height: 640px;
  margin: 0 auto;
  border-radius: calc(var(--radius-md) - 12px);
}

/* 記事本文のタイポグラフィ（Markdown出力用） */
.article-body {
  max-width: 760px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  font-size: 15.5px;
  line-height: 2;
  color: var(--text);
}

/* h2: 筆記体ではなく和文太字＋コーラルの下線あしらい */
.article-body h2 {
  font-size: 22px;
  font-weight: 700;
  color: var(--blue-gray);
  line-height: 1.5;
  margin: 48px 0 20px;
  padding-bottom: 10px;
  border-bottom: 2px dashed var(--coral-light);
}

.article-body h2::before {
  content: '❀ ';
  color: var(--coral);
}

.article-body h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--blue-gray);
  line-height: 1.6;
  margin: 36px 0 14px;
  padding-left: 14px;
  border-left: 4px solid var(--mint);
}

.article-body p {
  margin: 0 0 20px;
}

.article-body ul,
.article-body ol {
  margin: 0 0 24px;
  padding-left: 0;
}

.article-body ul {
  list-style: none;
}

.article-body ul li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 8px;
}

.article-body ul li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--teal);
  font-weight: 700;
}

.article-body ol {
  list-style: decimal;
  padding-left: 24px;
}

.article-body ol li {
  margin-bottom: 8px;
}

.article-body img {
  /* width/height属性付きの取込画像でも縦横比が壊れないようにする。
     小さい画像は原寸のまま中央寄せ、大きい画像は幅に収める。
     高さの上限はアイキャッチ（.article-eyecatch img）と同じ640pxに揃え、
     本文中の縦長画像が記事の顔より大きくならないようにする */
  display: block;
  max-width: 100%;
  width: auto;
  height: auto;
  max-height: 640px;
  margin: 8px auto 28px;
  border-radius: var(--radius-md);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

/* 区切り線: ブラウザ標準の暗いグレー線は世界観に合わないため、
   丸ドットをゆったりした間隔で並べた飾り線にする。
   色はロゴ・見出しと同じ青紫（#7B8CB8）の単色。原色のままだと
   区切り線としては主張が強いため、透明度を落として空気感を残す */
.article-body hr {
  border: none;
  width: 240px;
  height: 10px;
  margin: 48px auto;
  background-image: radial-gradient(circle, rgba(123, 140, 184, 0.55) 3.5px, transparent 4px);
  background-size: 24px 10px;
  background-position: 0 center;
  background-repeat: repeat-x;
}

/* 記事内CTAボタン（リンクだけの段落をビルド時に自動変換したもの） */
.article-cta {
  text-align: center;
  margin: 36px 0;
}

.article-body a.btn-ribbon {
  color: #fff;
  border-bottom: none;
  padding: 24px 48px; /* .article-body a のpadding-bottom:1px に潰されないよう明示 */
}

.article-body a {
  color: var(--coral);
  font-weight: 700;
  border-bottom: 1px dashed var(--coral);
  padding-bottom: 1px;
}

@media (hover: hover) {
  .article-body a:hover {
    color: var(--teal);
    border-bottom-color: var(--teal);
  }
}

.article-body blockquote {
  margin: 0 0 28px;
  padding: 18px 24px;
  background: var(--bg-tint);
  border-left: 4px dashed var(--lavender);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  color: var(--text);
  font-size: 14.5px;
}

.article-body blockquote p:last-child {
  margin-bottom: 0;
}

.article-body strong {
  font-weight: 700;
  color: var(--blue-gray);
}

.article-body h2:first-child,
.article-body h3:first-child,
.article-body p:first-child {
  margin-top: 0;
}

/* 記事下部の戻るリンク・関連導線 */
.article-back {
  max-width: 760px;
  margin: 40px auto 0;
  text-align: center;
  position: relative;
  z-index: 2;
}

.article-related {
  max-width: 760px;
  margin: 48px auto 0;
  text-align: center;
  position: relative;
  z-index: 2;
}

.article-related__lead {
  font-size: 15px;
  font-weight: 700;
  color: var(--blue-gray);
  margin-bottom: 18px;
}

/* ==========================================================================
   写真の縦横比: 正方形に統一（2026-07 坪井さん承認で確定）
   対象: ポラロイド一覧・写真2枚並び・各プランページのヒーロー写真
   ========================================================================== */
.polaroid img,
.photo-duo img,
.detail-hero__photo img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* ==========================================================================
   iPhone SE等の低い画面対応:
   SPではヒーローの高さ固定(85vh)をやめてコンテンツ基準にし、
   ヘッダー分の上余白を確保してロゴとバッジの衝突を防ぐ
   ========================================================================== */
@media (max-width: 767px) {
  .hero {
    /* ツールバー表示中でも常に見えている高さ(svh)いっぱいに写真を敷く。
       下部CTAが全幅バーだった頃はその分を引いていたが、右下フローティングに
       変えて画面下端を覆わなくなったため、引くと写真の下に地の色が出る（2026-08-05）。
       svh非対応の古い端末はvhフォールバック（多少ずれるが致命的ではない） */
    height: 100vh;
    height: 100svh;
    /* 横向きや極端に低い画面でコンテンツが潰れないための下限 */
    min-height: 480px;
  }

  .hero__content {
    /* 高さ固定＋下寄せなので上余白は最小限でよい
       （キャッチコピーは下からの積み上げで位置が決まる） */
    padding: calc(var(--header-h) + 24px) 24px 28px;
  }

  /* 縦長画面では横長写真の上下が切れないため、被写体の顔が画面中央に来て
     キャッチコピーと重なる。写真を縦に広げて下端を画面下端に固定し、
     顔を上へ逃がす。横は被写体を右寄せにして左のうさぎを画面外へ出し、
     CTAボタンと重ならないようにする（2026-08-05） */
  .hero__img {
    top: auto;
    bottom: 0;
    height: 120%;
    object-position: 44% center;
  }

  /* リボンはマスクで上下が削られるぶん、同じ縦paddingだと隣の
     アウトラインボタン（実測50px）より薄く見える。FVの2つのCTAは
     並んで見えるので、視覚上の高さと文字サイズを揃える（2026-08-05） */
  .hero__ctas .btn-ribbon {
    font-size: 16px;
    padding: 25px 34px;
  }

  /* SPでは2つが縦に並ぶ。文字数に任せると幅が揃わず中心線がずれるため、
     同じ幅にして左右の中央を合わせる（両方 justify-content:center なので
     文字は自動で中央に来る） */
  .hero__ctas {
    flex-direction: column;
    align-items: flex-start;
  }

  .hero__ctas .btn-ribbon,
  .hero__ctas .btn-outline {
    width: 240px;
    max-width: 100%;
  }
}

/* ==========================================================================
   スマホ横向き等、画面が低いときのファーストビュー（2026-08-07）
   上のSP対応は幅767px以下だけが対象で、min-height:480px も残るため、
   iPhoneを横にすると（幅852px・高さ393px など）中身が下端揃えのまま箱の上へ
   あふれ、バッジが固定ヘッダーのロゴに重なって欠けていた。
   低い画面では高さ指定を外して中身の分だけ伸ばし、ヘッダー分を上に空ける。
   幅を問わず高さだけで判定するので、幅767px以下の横向き（iPhone SE等）も拾う。
   ※このブロックは上のSP対応より後ろに置くこと（同じ詳細度のため順序で決まる）
   ========================================================================== */
@media (max-height: 500px) {
  /* 「写真を敷く外枠」と「中身を置く安全領域」で高さの基準を分ける。
     iPhoneの横向きはスクロール位置0でもSafariのツールバーが畳まれるため、
     可視領域は lvh（ツールバーが隠れた状態の高さ）になる。ヒーローを svh で
     組むとその差ぶんだけ下に次セクションのベージュが覗く（実機で発生）。
     かといって全部 lvh にすると、ツールバー表示中はCTAがツールバーの下へ潜る。
     → 外枠は lvh まで敷き、中身は svh の箱の下端に寄せる。
     dvh 一本でも大半は解決するが、ツールバーの伸縮中に高さが追従して
     CTAが上下に動くため採用しない（2026-08-07 codexの助言を受けて決定） */
  .hero {
    height: auto;
    min-height: 100vh;  /* lvh 非対応ブラウザのフォールバック */
    min-height: 100lvh;
    /* 中身は .hero__content 側で下寄せするので、外枠は上詰めにする */
    align-items: flex-start;
    /* 高さ固定をやめると、隠れていた section 共通の上下パディングが効いてしまう */
    padding: 0;
  }

  .hero__content {
    /* ツールバー表示中でも見えている高さ。中身はこの箱の下端に置く */
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: calc(var(--header-h) + 14px) 24px 28px;
  }

  .hero__badge {
    width: 80px;
    height: 80px;
    font-size: 11px;
    margin-bottom: 10px;
    /* .hero__content が縦積みの flex になるので、既定の stretch を打ち消す */
    align-self: flex-start;
  }

  .hero h1 {
    font-size: 26px;
    margin-bottom: 8px;
  }

  .hero__sub {
    font-size: 14px;
    margin-bottom: 14px;
  }

  /* 写真の切り取り位置。横向きは枠が横長すぎて縦を165px（852x393の場合）切る。
     既定の「下端固定」だと切り取りが全部上に寄り、被写体が画面上端まで上がって
     床ばかりが下に残る。切り取りを上下に振り分けて写真を下げる。
     85%＝上から140px・下から25px。足元（写真の約94%の位置）が切れない上限が
     この付近で、床の見え幅は56px→31pxに減る。
     幅767px以下のSP指定（下端固定・高さ120%）もここで戻す */
  .hero__img {
    top: 0;
    bottom: auto;
    height: 100%;
    object-position: 24% 85%;
  }

  /* 写真の下端を次セクションのベージュへ溶かすグラデーション。
     56pxのままだと画面が低いぶん相対的に厚く見えるうえ（PCの7%に対し14%）、
     写真を下げて足元が画面下端に近づいたぶん、つま先までベージュが乗ってしまう。
     PCでは足元からフェード開始まで51pxあるが横向きは9pxしかないため、16pxまで縮める */
  .hero__gradient {
    background: linear-gradient(
      to top,
      rgba(250, 247, 242, 1) 0,
      rgba(250, 247, 242, 0.92) 3px,
      rgba(250, 247, 242, 0.62) 7px,
      rgba(250, 247, 242, 0.24) 11px,
      rgba(250, 247, 242, 0) 16px
    );
  }

  /* 縦に積むと画面に収まらないため、横向きでは2つのCTAを横並びに戻す */
  .hero__ctas {
    flex-direction: row;
    align-items: center;
  }

  .hero__ctas .btn-ribbon {
    font-size: 15px;
    padding: 20px 28px;
  }

  .hero__ctas .btn-ribbon,
  .hero__ctas .btn-outline {
    width: auto;
  }
}

/* ==========================================================================
   トップページ改修（2026-07-10）: お知らせストリップ／口コミ引用／
   コラムのコンパクト表示／フッター3カラム
   ========================================================================== */

/* ---------- お知らせストリップ（ヒーロー直下・白カード型）
   コンテンツセクション（中央寄せ見出し）とは別物の「ユーティリティ帯」として、
   カードで囲んで独立したコンポーネントに見せる。見出し行の左にラベル・
   右に一覧リンクを置き、余白の間延びと寄せの不統一を解消する ---------- */
.news-strip {
  /* カードの影（ぼかし20px）が切れないよう下にも余白を確保する */
  padding: 48px 0 32px;
  /* FV写真の床の色に寄せて、写真との境目を目立たなくする（2026-08-05） */
  background: var(--bg-tint);
}

/* 白背景のセクションに白カードでは輪郭が出ないため、FAQと同じ
   「白面＋ラベンダー破線」に統一する。ラベンダーはサイト内で
   中立的な情報の囲みに使う色（FAQ・比較表）で、お知らせの役割と合う。
   枠で分離できるので影は持たせない（2026-08-02） */
.news-strip__card {
  position: relative;
  z-index: 2;
  background: #fff;
  border: 2px dashed var(--lavender);
  border-radius: var(--radius-md);
  padding: 20px 28px 22px;
}

.news-strip__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 10px;
  margin-bottom: 14px;
  border-bottom: 1px dashed rgba(122, 134, 154, 0.3);
}

.news-strip__label {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.news-strip__label .script {
  font-family: var(--font-script, cursive);
  font-size: 26px;
  line-height: 1.2;
  color: var(--blue-gray);
}

.news-strip__label-sub {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--text);
}

.news-strip__more {
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--blue-gray);
  transition: color 0.2s ease;
}

@media (hover: hover) {
  .news-strip__more:hover {
    color: var(--coral);
  }
}

.news-strip__list li + li {
  /* 概要が入って1件が2段になるぶん、行間はやや広めに取る */
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed rgba(122, 134, 154, 0.18);
}

/* baseline揃え: 概要が付いて右側が2段になっても、日付とタイトル1行目の
   文字の下端が一直線に並ぶ（centerだと右側の高さに引きずられて日付が下がる） */
/* 行全体は「テキスト一式（左）＋サムネイル（右）」の2カラム */
.news-strip__list a {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.news-strip__content {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 12px;
}

/* サムネイル（画像がある記事のみ）。帯はコンパクトさ優先で一覧より小さく */
.news-strip__thumb {
  flex-shrink: 0;
}

.news-strip__thumb img {
  display: block;
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 8px;
}

/* 元画像が縦長のときは4:5の縦長で見せる */
.news-strip__thumb--tall img {
  height: 90px;
}

/* 日付とバッジは1つの塊にまとめる。塊にしておかないと、
   タイトルと概要を縦に積んだときに列がずれる */
.news-strip__meta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

/* min-width:0 がないと、長いタイトルが縮まず ellipsis が効かない */
.news-strip__body {
  min-width: 0;
}

.news-strip__title {
  display: block;
  font-size: 14px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 概要はタイトルの補足。読む順を取り違えないよう一段小さく淡くし、
   PCでは1行に丸める（この帯は「ざっと見て選ぶ」ための入口で、
   読ませ切る場所ではないため。続きは記事ページで読んでもらう） */
.news-strip__summary {
  display: block;
  margin-top: 4px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text);
  opacity: 0.62;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (hover: hover) {
  .news-strip__list a:hover .news-strip__title {
    color: var(--coral);
  }
}

@media (max-width: 767px) {
  .news-strip {
    padding: 32px 0 24px;
  }
  .news-strip__card {
    padding: 16px 18px 18px;
  }
  /* モバイルは日付・バッジの行とタイトルの行を2段に分ける（切り詰めすぎ防止） */
  /* 行間で情報のまとまりを作る: 日付の行との間(8px)を、タイトルと概要の間(4px)より
     広く取り、「メタ情報」と「本文」が別の段だと一目で分かるようにする */
  .news-strip__content {
    flex-wrap: wrap;
    gap: 8px 12px;
  }
  .news-strip__body {
    flex-basis: 100%;
  }
  .news-strip__thumb img {
    width: 64px;
    height: 64px;
  }
  .news-strip__thumb--tall img {
    height: 80px;
  }
  .news-strip__list li + li {
    margin-top: 14px;
    padding-top: 14px;
  }
  .news-strip__title {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.6;
  }
  /* 幅が狭く1行では文が切れて意味をなさないため、2行まで見せる。
     PCの1行省略とは方針を変えている */
  .news-strip__summary {
    margin-top: 4px;
    font-size: 12px;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* ---------- 口コミ引用（Reviewセクション・吹き出し型）
   ギャラリーのポラロイドと同じく1〜1.5度傾けて、手貼りの
   メッセージカードのような温度感を出す ---------- */


/* ---------- トップのコラム（モバイルは横並びカードでコンパクトに） ---------- */
@media (max-width: 599px) {
  .column-card--home {
    flex-direction: row;
    align-items: stretch;
  }
  .column-card--home .column-card__img {
    flex-shrink: 0;
    width: 110px;
    /* 正方形に固定する。auto にすると箱の高さが画像の元の縦横比に引きずられ、
       縦長画像を入れたときカードごと縦長になる（2026-09-04 修正）。
       サイト全体の「写真は正方形に統一」ルールに合わせる */
    aspect-ratio: 1 / 1;
    min-height: 110px;
  }
  .column-card--home .column-card__body {
    padding: 12px 14px;
    min-width: 0;
  }
  .column-card--home .column-card__title {
    font-size: 13.5px;
    margin-bottom: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .column-card--home .column-card__date {
    margin-bottom: 0;
  }
  .column-card--home .column-card__desc {
    display: none;
  }
  .column-card--home .column-card__placeholder img {
    width: 60%;
    max-width: 66px;
  }
}

/* ---------- フッター
   PC: 店舗情報(左)＋サイト案内＋撮影メニューの3カラム
   モバイル: ナビ2列が上段、店舗情報が下段（grid-areaで配置切替） ---------- */
.site-footer__grid {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  grid-template-areas: "info guide menu";
  gap: 40px;
  text-align: left;
}

.site-footer__info {
  grid-area: info;
}

.site-footer__col--guide {
  grid-area: guide;
}

.site-footer__col--menu {
  grid-area: menu;
}

.site-footer__info .site-footer__logo img {
  margin: 0 0 16px;
}

/* 電話がつながらない場合の断り書き。本文より一段落として添える */
/* 「.site-footer p」の13px指定より詳細度を上げる（p付きセレクタ） */
.site-footer p.site-footer__note {
  font-size: 12px;
  line-height: 1.7;
  opacity: 0.75;
  margin-top: 8px;
}

.site-footer__head {
  font-size: 13px;
  font-weight: 700;
  color: var(--blue-gray);
  letter-spacing: 0.08em;
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px dashed rgba(122, 134, 154, 0.35);
}

.site-footer__nav li + li {
  margin-top: 9px;
}

.site-footer__nav a {
  font-size: 13px;
  color: var(--text);
}

@media (hover: hover) {
  .site-footer__nav a:hover {
    color: var(--coral);
  }
}

.site-footer__nav .site-footer__reserve {
  font-weight: 700;
  color: var(--coral);
}

.site-footer p a {
  color: inherit;
}

.site-footer__copy {
  text-align: center;
}

@media (max-width: 767px) {
  /* 下部の余白はbodyではなくフッター自身に持たせる。bodyに付けると
     フッターの地色（ベージュ）の下にbodyの白が残り、画面最下部が白くなる。
     iOS Safariは最下部の色を拾ってツールバーを塗るため、ここが白いと
     ツールバーまで白くなってしまう。ホームインジケータ領域も地色で埋める（2026-08-05） */
  .site-footer {
    padding: 44px 20px calc(28px + env(safe-area-inset-bottom, 0px));
  }
  .site-footer__grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "guide menu"
      "info info";
    gap: 28px 20px;
  }
  .site-footer__info {
    text-align: center;
    padding-top: 28px;
    border-top: 1px dashed rgba(122, 134, 154, 0.3);
  }
  .site-footer__info .site-footer__logo img {
    margin: 0 auto 16px;
  }
  .site-footer__nav li + li {
    margin-top: 8px;
  }
  .site-footer__nav a {
    font-size: 12.5px;
  }
  /* 長い補足（お宮参り・百日祝 等）はモバイルでは省略 */
  .site-footer__opt {
    display: none;
  }
  .site-footer__copy {
    margin-top: 28px;
  }
}

/* ---------- 商品のご案内（Goods.astro） ---------- */
.goods-lead {
  text-align: center;
  margin: -8px 0 36px;
  color: var(--text);
  font-size: 15px;
  position: relative;
  z-index: 2;
}

.goods-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  position: relative;
  z-index: 2;
}

@media (max-width: 960px) {
  .goods-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .goods-grid { grid-template-columns: 1fr; }
}

.goods-card {
  background: #fff;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
}

.goods-card__img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

.goods-card__body {
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.goods-card__body h3 {
  font-size: 17px;
  color: var(--blue-gray);
  margin-bottom: 8px;
}

.goods-card__body p {
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--text);
  margin-bottom: 14px;
}

.goods-card__prices {
  list-style: none;
  margin-top: auto;
  border-top: 1px dashed var(--lavender);
  padding-top: 10px;
}

.goods-card__prices li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 5px 0;
  font-size: 13px;
}

.goods-card__prices .name { color: var(--text); }

.goods-card__prices .price {
  color: var(--coral);
  font-weight: 700;
  white-space: nowrap;
}

.goods-note {
  text-align: center;
  margin-top: 24px;
  font-size: 12.5px;
  color: #999;
  position: relative;
  z-index: 2;
}

/* ---------- オプション紹介写真 ---------- */
.option-photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-width: 860px;
  margin: 0 auto 32px;
  position: relative;
  z-index: 2;
}

@media (max-width: 640px) {
  .option-photos { grid-template-columns: 1fr; }
}

.option-photos img {
  width: 100%;
  border-radius: var(--radius-md);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
  display: block;
}

/* ---------- オプション2カラム（Options.astro） ---------- */
.option-lead {
  text-align: center;
  margin: -8px 0 36px;
  color: var(--text);
  font-size: 15px;
  position: relative;
  z-index: 2;
}

.option-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  align-items: start;
  position: relative;
  z-index: 2;
}

@media (max-width: 820px) {
  .option-cols { grid-template-columns: 1fr; gap: 44px; }
}

.option-col {
  background: #fff;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
}

.option-col img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top;
  display: block;
}

.option-col h3 {
  font-size: 17px;
  color: var(--blue-gray);
  margin: 20px 24px 8px;
}

.option-col__note {
  font-size: 13px;
  line-height: 1.8;
  color: #8A94A0;
  margin: 0 24px 6px;
}

.option-col .option-list {
  max-width: none;
  margin: 0;
  padding: 0 24px 20px;
}

.option-col .option-list li:last-child { border-bottom: none; }

.option-note-tax {
  text-align: center;
  margin-top: 24px;
  font-size: 12.5px;
  color: #999;
  position: relative;
  z-index: 2;
}

/* ---------- 記事ページ（お知らせ・コラム）の余白調整 ---------- */
/* タイトル帯と本文の間隔: 汎用の detail-hero(64px)＋section(88px) では
   記事ページには空きすぎるため、タイトル→本文が一続きに読める間隔に詰める */
.detail-hero--article { padding-bottom: 36px; }
.article-section { padding-top: 44px; }

/* 一覧ページ（お知らせ・コラム）のタイトル帯。帯の中身がタイトルだけなので、
   汎用の section-head(56px)＋detail-hero(64px)＝120px では下が空きすぎ、
   タイトルの下に用のない色面が居座って見える（2026-08-07） */
.detail-hero--title { padding-bottom: 44px; }
.detail-hero--title .section-head { margin-bottom: 0; }

/* 見出しの下マージンはリード文との間隔なので、リード文がないページでは
   タイトル帯の下に用のない余白として残る。--title を付け忘れても
   空かないよう、構造で落としておく（2026-08-07 よくある質問で発覚） */
.detail-hero__text .section-head:last-child { margin-bottom: 0; }

/* ---------- 記事系ページ（お知らせ・コラム）は水玉を薄く ----------
   写真やイラストが少なくテキスト主体のため、背景が文字の邪魔をしないよう
   ぼかしを強め、濃度を下げる。opacityはキーフレームが動かすため、
   キーフレームが参照する --blob-op（濃さの最大値）側で減衰させる
   （filterのopacity()で薄めるとblurと併せてfilterが複合し管理しにくいため） */
.soft-blobs .blob {
  --blob-op: 0.33;
  filter: blur(5px);
}

/* タイトル帯は文字が大きく可読性に余裕があるため、水玉をやや濃いめに残す
   （ぼかしは通常の水玉と同じ2px） */
.detail-hero.soft-blobs .blob {
  --blob-op: 0.44;
  filter: blur(2px);
}

/* ---------- トップページのキャンペーンバナー ---------- */
.top-banner {
  /* 直上のお知らせカードと左右端を揃える（幅の不一致は「ズレ」に見えるため） */
  display: block;
  margin: 24px auto 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  position: relative;
  z-index: 2;
}

.top-banner img {
  display: block;
  width: 100%;
  height: auto;
}

@media (hover: hover) {
  .top-banner:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.12);
  }
}

/* ==========================================================================
   ドロワー内サブメニュー（メニュー・料金 → プラン直リンク、2026-08追加）
   PCではトグルもサブリストも出さず、従来どおりリンク1本として振る舞う
   ========================================================================== */
.nav-group,
.nav-group__row {
  display: contents;
}

.nav-group__toggle,
.nav-sub {
  display: none;
}

@media (max-width: 1023px) {
  .nav-group {
    display: block;
    width: 100%;
  }

  /* ＋ボタンはラベルのすぐ右に置く（右端固定だと項目との結びつきが弱いため） */
  .nav-group__row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
  }

  /* ＋ボタン: 2本のバーを重ねて描き、開いたら縦バーを消して「−」にする */
  .nav-group__toggle {
    display: block;
    position: relative;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border: 1px solid rgba(123, 140, 184, 0.4);
    border-radius: 50%;
    background: none;
    cursor: pointer;
  }

  .nav-group__toggle span {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 2px;
    background: var(--blue-gray, #7B8CB8);
    border-radius: 1px;
    transform: translate(-50%, -50%);
    transition: transform 0.25s ease, opacity 0.25s ease;
  }

  .nav-group__toggle span:nth-child(2) {
    transform: translate(-50%, -50%) rotate(90deg);
  }

  .nav-group.is-open .nav-group__toggle span:nth-child(2) {
    transform: translate(-50%, -50%) rotate(0deg);
    opacity: 0;
  }

  /* サブメニュー本体。開閉はJS（main.js）がscrollHeightを測って
     max-heightに実高さを設定する方式（FAQアコーディオンと同じ）。
     固定の大きなmax-heightだと実高さとの差で速度が不均一になり
     カクついて見えるため、実高さぴったりを1つのイージングで動かす。
     背景はごく薄いラベンダーグレー4.5%（検討の結果採用した案2）。
     ※コーラル案は「料金が非選択のページでは不整合」のため不採用 */
  .nav-sub {
    display: block; /* PC用のdisplay:noneを打ち消す */
    max-height: 0;
    overflow: hidden;
    margin: 0;
    transition: max-height 0.45s cubic-bezier(0.45, 0, 0.2, 1), margin 0.45s cubic-bezier(0.45, 0, 0.2, 1);
  }

  .nav-group.is-open .nav-sub {
    margin-top: 14px;
  }

  .nav-sub__inner {
    overflow: hidden;
    min-height: 0;
    list-style: none;
    margin: 0;
    padding: 0 18px;
    background: rgba(123, 140, 184, 0.045);
    border-radius: 14px;
  }

  /* 上下の内余白はpaddingでなくli余白で確保する（閉時に高さ0まで潰せるように） */
  .nav-sub__inner li:first-child { margin-top: 8px; }
  .nav-sub__inner li:last-child { margin-bottom: 8px; }

  .site-header__nav .nav-sub a {
    display: block;
    padding: 9px 0;
    font-size: 15px;
    color: #8A93A6;
  }

  /* サブメニュー展開でドロワーが縦に伸びてもスクロールで全項目に届くように。
     height はアドレスバー分を除いた実表示域(dvh)にし、
     端まで達した後のバウンス・背面へのスクロール伝播は止める（上下の切れ対策） */
  .site-header__nav {
    height: 100dvh;
    overflow-y: auto;
    overscroll-behavior: none;
    justify-content: center;
    justify-content: safe center;
  }

  /* ドロワー表示中は背面ページ自体をスクロールさせない */
  body.nav-open {
    overflow: hidden;
  }
}

/* ==========================================================================
   料金ページ アンカーナビ（等幅グリッド＋左サムネイル。2026-08 D案で確定）
   整列を保ちつつ写真で内容が一目で分かる形。ラベルは原則1行、長名のみ2行
   ========================================================================== */
.anchor-hybrid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  position: relative;
  z-index: 2;
}

.anchor-hybrid a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 60px;
  padding: 9px 12px 9px 9px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--blue-gray);
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

@media (hover: hover) {
  .anchor-hybrid a:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
  }
}

.anchor-hybrid img {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 10px;
  object-fit: cover;
}

@media (max-width: 767px) {
  .anchor-hybrid {
    grid-template-columns: repeat(2, 1fr);
    gap: 9px;
  }

  .anchor-hybrid a {
    min-height: 56px;
    gap: 9px;
    padding: 8px 10px 8px 8px;
    font-size: 12.5px;
  }

  .anchor-hybrid img {
    width: 38px;
    height: 38px;
  }
}