/* ============================================================
   スタジオノーブレム｜ハーフバースデーフォトLP
   Mobile First / CSS変数で色・余白を管理
============================================================ */

:root {
  /* カラーパレット */
  --color-base: #FFFDF9;        /* ベース：温かみのある白 */
  --color-bg-sub: #F8F4F1;      /* サブ背景：薄いベージュ */
  --color-accent: #D9BCB7;      /* アクセント：くすみピンク */
  --color-accent-sub: #C8B8A8;  /* サブアクセント：グレージュ */
  --color-text: #45413F;        /* メイン文字 */
  --color-text-sub: #77716D;    /* 補助文字 */
  --color-line: #E8E0DA;        /* 線・境界 */

  /* タイポグラフィ */
  --font-mincho: 'Shippori Mincho', serif;
  --font-sans: 'Noto Sans JP', sans-serif;
  --font-en: 'Cormorant Garamond', serif;

  /* 余白（セクション上下） */
  --space-sec: clamp(80px, 16vw, 120px);
  --space-sec-emotional: clamp(100px, 20vw, 150px);

  /* レイアウト */
  --inner-max: 1080px;
  --inner-narrow: 820px;
  --inner-pad: 22px;

  --radius-photo: 12px;
  --sticky-height: 62px;
}

@media (min-width: 768px) {
  :root {
    --space-sec: clamp(120px, 12vw, 180px);
    --space-sec-emotional: clamp(150px, 14vw, 200px);
    --inner-pad: 40px;
  }
}

/* ---------- リセット ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
img { max-width: 100%; height: auto; display: block; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
table { border-collapse: collapse; width: 100%; }

body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 2;
  letter-spacing: 0.03em;
  color: var(--color-text);
  background: var(--color-base);
  -webkit-font-smoothing: antialiased;
  padding-bottom: var(--sticky-height); /* 追従CTA分 */
}

@media (min-width: 768px) {
  body { font-size: 16px; padding-bottom: 0; }
}

.en { font-family: var(--font-en); font-weight: 400; letter-spacing: 0.14em; }
.sp { display: inline; }
.pc { display: none; }
@media (min-width: 768px) {
  .sp { display: none; }
  .pc { display: inline; }
}

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

/* ---------- 共通レイアウト ---------- */
.inner {
  max-width: var(--inner-max);
  margin: 0 auto;
  padding-left: var(--inner-pad);
  padding-right: var(--inner-pad);
}
.inner--narrow { max-width: var(--inner-narrow); }

.sec { padding-top: var(--space-sec); padding-bottom: var(--space-sec); }

.sec-accent {
  font-size: 13px;
  color: var(--color-accent-sub);
  letter-spacing: 0.22em;
  margin-bottom: 14px;
}
@media (min-width: 768px) { .sec-accent { font-size: 15px; } }

.sec-title {
  font-family: var(--font-mincho);
  font-weight: 500;
  font-size: clamp(27px, 7vw, 34px);
  line-height: 1.5;
  letter-spacing: 0.06em;
  margin-bottom: clamp(36px, 8vw, 64px);
}
@media (min-width: 768px) {
  .sec-title { font-size: clamp(34px, 3.4vw, 44px); }
}

.lead {
  font-size: 15px;
  line-height: 2.2;
  color: var(--color-text);
}
@media (min-width: 768px) { .lead { font-size: 17px; } }

/* ---------- フェードイン ---------- */
.fade {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1s ease, transform 1s ease;
}
.fade.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fade { opacity: 1; transform: none; transition: none; }
  .hero__photo img { animation: none !important; }
  .hero__scroll-line::after { animation: none !important; }
  .btn--pink { animation: none !important; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ---------- ラインアート・イラスト ---------- */
/* スプライト本体は非表示（display:noneだと参照できない環境があるためサイズ0で隠す） */
.icon-sprite {
  position: absolute;
  width: 0; height: 0;
  overflow: hidden;
}

.line-icon {
  display: block;
  width: 44px; height: 44px;
  flex-shrink: 0;
  color: var(--color-accent-sub);
}

/* 大きめの装飾イラスト */
.illust {
  color: var(--color-accent);
  margin: 0 auto;
}
.illust svg { width: 100%; height: auto; display: block; }
.illust--half { max-width: 340px; margin-bottom: clamp(44px, 9vw, 64px); }
.illust--feet { max-width: 210px; margin-bottom: 26px; }

/* 細い線が描かれる演出（pathLength="1"で長さを正規化） */
.draw .dl {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.8s ease;
}
.draw.is-visible .dl { stroke-dashoffset: 0; }
/* 塗りは線が描かれたあとに遅れて現れる。
   最終不透明度は各要素の style="--o:..." を尊重する */
.draw .fillfade { opacity: 0; transition: opacity 1s ease 1s; }
.draw.is-visible .fillfade { opacity: var(--o, 1); }

@media (prefers-reduced-motion: reduce) {
  .draw .dl { stroke-dashoffset: 0; transition: none; }
  .draw .fillfade { opacity: var(--o, 1); transition: none; }
}

/* ---------- ボタン ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0 34px;
  border-radius: 30px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1.4;
  text-align: center;
  box-shadow: 0 4px 14px rgba(69, 65, 63, 0.10);
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(69, 65, 63, 0.14); }
.btn:active { transform: scale(0.97); }

.btn--pink { background: var(--color-accent); color: #fff; }
.btn--pink:hover { background: #D0AFA9; }
.btn--line { background: #fff; color: var(--color-text); border: 1px solid var(--color-line); }
.btn--outline { background: transparent; color: var(--color-text); border: 1px solid var(--color-accent-sub); box-shadow: none; }
.btn--ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.7); box-shadow: none; }
.btn--small { min-height: 44px; padding: 0 22px; font-size: 14px; }
.btn--large { min-height: 60px; padding: 0 42px; font-size: 16px; }

/* CTAの弱い呼吸アニメーション */
@keyframes breathe {
  0%, 100% { box-shadow: 0 4px 14px rgba(217, 188, 183, 0.35); }
  50% { box-shadow: 0 4px 22px rgba(217, 188, 183, 0.6); }
}
.hero__cta .btn--pink,
.final__cta .btn--pink { animation: breathe 4s ease-in-out infinite; }

.mid-cta {
  text-align: center;
  margin-top: clamp(48px, 10vw, 80px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.mid-cta__copy {
  font-family: var(--font-mincho);
  font-size: clamp(18px, 4.6vw, 24px);
  letter-spacing: 0.08em;
}

/* ---------- ヘッダー ---------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 14px 0;
  transition: background-color 0.4s ease, box-shadow 0.4s ease;
}
.site-header.is-scrolled {
  background: rgba(255, 253, 249, 0.92);
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 0 var(--color-line);
}
.site-header__inner {
  max-width: var(--inner-max);
  margin: 0 auto;
  padding: 0 var(--inner-pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.site-header__logo a { display: flex; flex-direction: column; line-height: 1.3; }
.site-header__logo-en { font-family: var(--font-en); font-size: 17px; letter-spacing: 0.2em; }
.site-header__logo-ja { font-size: 10px; color: var(--color-text-sub); letter-spacing: 0.12em; }
.site-header__nav { display: flex; align-items: center; gap: 26px; }
.site-header__link { display: inline-block; font-size: 14px; letter-spacing: 0.06em; }
@media (min-width: 900px) { .site-header__link { display: inline; } }
/* 項目が増えたぶん、900〜1100px ではロゴと重なる手前まで詰まる。
   この幅だけ間隔を狭めて収める */
@media (min-width: 900px) and (max-width: 1100px) {
  .site-header__nav { gap: 16px; }
  .site-header__link { font-size: 13px; }
}

/* ---------- SECTION 1｜ファーストビュー ---------- */
.hero {
  position: relative;
  min-height: 100vh;      /* svh未対応ブラウザ向けフォールバック */
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* 画面の約70%を写真に。写真は縦横比そのままなので被写体が切れない */
.hero__photo {
  position: relative;
  flex: 0 0 66%;
  min-height: 0;
}
.hero__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* 被写体を下寄りに置き、上部に文字用の白い余白を残す */
  object-position: center 40%;
  animation: heroZoom 18s ease-out forwards;
}
/* 写真上部にごく薄い白のヴェール。白背景では見えず、
   小さい画面で被写体が上がってきたときだけ文字の可読性を守る保険 */
.hero__photo::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(255, 253, 249, 0.80) 0%,
    rgba(255, 253, 249, 0.52) 22%,
    rgba(255, 253, 249, 0.18) 34%,
    rgba(255, 253, 249, 0) 44%);
}
@keyframes heroZoom {
  from { transform: scale(1.08); }
  to { transform: scale(1); }
}

/* 写真の下、クリーム地に説明文と予約導線
   （position を付けると .hero__lead の絶対配置基準がここになるため static のまま） */
.hero__content {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 14px var(--inner-pad) calc(var(--sticky-height) + 14px);
  width: 100%;
  color: var(--color-text);
}
/* ブランドコピーは写真上部の白い余白に重ねる（基準は .hero） */
.hero__lead {
  position: absolute;
  top: 68px;
  left: var(--inner-pad);
  right: var(--inner-pad);
  z-index: 3;
}
/* 画面が短い端末では写真の縦トリミングが増え、余白が減るため位置を上げる */
@media (max-height: 700px) {
  .hero__lead { top: 58px; }
}
.hero__accent {
  font-size: 14px;
  letter-spacing: 0.3em;
  color: var(--color-accent-sub);
  margin-bottom: 14px;
  opacity: 0;
  animation: fadeUp 1.2s ease 0.3s forwards;
}
.hero__copy {
  font-family: var(--font-mincho);
  font-weight: 500;
  /* 画面の幅と高さの両方に追従させ、写真の余白から溢れないようにする */
  font-size: max(30px, min(9.8vw, 5.4vh, 46px));
  line-height: 1.35;
  letter-spacing: 0.08em;
  opacity: 0;
  animation: fadeUp 1.2s ease 0.7s forwards;
}
.hero__sub {
  font-size: 13px;
  line-height: 1.85;
  color: var(--color-text-sub);
  opacity: 0;
  animation: fadeUp 1.2s ease 1.2s forwards;
}
.hero__h1 {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 11px;
  line-height: 1.65;
  letter-spacing: 0.04em;
  color: var(--color-text-sub);
  opacity: 0;
  animation: fadeUp 1.2s ease 1.5s forwards;
}
/* SPは横並び2ボタン。写真の面積を確保するため高さを抑える */
.hero__cta {
  display: flex;
  gap: 10px;
  margin-top: 4px;
  opacity: 0;
  animation: fadeUp 1.2s ease 1.8s forwards;
}
.hero__cta .btn {
  flex: 1;
  min-height: 50px;
  padding: 0 12px;
  font-size: 13.5px;
}
.hero__cta .btn--line { border-color: var(--color-accent-sub); }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: none; }
}

/* PC：左にテキスト、右に写真の分割レイアウト */
@media (min-width: 900px) {
  .hero { flex-direction: row; align-items: stretch; }
  .hero__photo { order: 2; flex: 0 0 52%; }
  .hero__photo img { object-position: center 56%; }
  .hero__photo::after { display: none; }
  .hero__content {
    order: 1;
    flex: 1;
    justify-content: center;
    gap: 0;
    padding: 40px clamp(40px, 4.5vw, 72px);
  }
  /* PCではコピーも左カラムに通常配置 */
  .hero__lead { position: static; margin-bottom: 26px; }
  .hero__copy { font-size: clamp(48px, 4.6vw, 66px); }
  .hero__sub { font-size: 15px; line-height: 2; margin-bottom: 16px; }
  .hero__h1 { font-size: 13px; }
  .hero__cta { margin-top: 26px; }
  .hero__cta .btn { flex: 0 1 auto; min-height: 56px; padding: 0 30px; font-size: 15px; }
}
/* スクロール誘導はPCのみ（SPは写真の下に本文とボタンが見えているため不要） */
.hero__scroll { display: none; }
@media (min-width: 900px) {
  .hero__scroll {
    display: flex;
    position: absolute;
    left: clamp(40px, 4.5vw, 72px);
    bottom: 30px;
    z-index: 2;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: var(--color-accent-sub);
    font-size: 11px;
    letter-spacing: 0.25em;
    writing-mode: vertical-rl;
  }
}
.hero__scroll-line {
  width: 1px; height: 56px;
  background: var(--color-line);
  position: relative;
  overflow: hidden;
}
.hero__scroll-line::after {
  content: '';
  position: absolute; top: -100%; left: 0;
  width: 100%; height: 100%;
  background: var(--color-accent-sub);
  animation: scrollLine 2.2s ease-in-out infinite;
}
@keyframes scrollLine {
  0% { top: -100%; }
  60%, 100% { top: 100%; }
}

/* ---------- SECTION 2｜共感 ---------- */
.sec--story { padding-top: var(--space-sec-emotional); padding-bottom: var(--space-sec-emotional); }

.growth {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(44px, 9vw, 60px);
  max-width: var(--inner-max);
  margin: clamp(56px, 12vw, 90px) auto 0;
  padding: 0 var(--inner-pad);
}
@media (min-width: 768px) {
  .growth { grid-template-columns: repeat(3, 1fr); gap: 36px; align-items: end; }
  /* 写真集らしい高さの揺らぎ */
  .growth__item:nth-child(1) { transform: translateY(-18px); }
  .growth__item:nth-child(3) { transform: translateY(-10px); }
  .growth__item.fade { transition-property: opacity, transform; }
  .growth__item.fade:not(.is-visible) { transform: translateY(24px); }
}
.growth__photo { border-radius: var(--radius-photo); overflow: hidden; margin-bottom: 18px; }
.growth__photo img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
.growth__month {
  font-family: var(--font-en);
  font-size: 34px;
  line-height: 1;
  color: var(--color-accent-sub);
  margin-bottom: 10px;
}
.growth__month small { font-size: 15px; letter-spacing: 0.18em; margin-left: 6px; }
.growth__text { font-size: 14px; color: var(--color-text-sub); line-height: 1.9; }

.story-points {
  margin-top: clamp(64px, 13vw, 100px);
  display: grid;
  gap: clamp(36px, 8vw, 56px);
}
@media (min-width: 768px) { .story-points { grid-template-columns: 1fr 1fr; gap: 64px; } }
.story-point__title {
  font-family: var(--font-mincho);
  font-weight: 500;
  font-size: clamp(20px, 5vw, 24px);
  line-height: 1.6;
  margin-bottom: 14px;
  padding-left: 18px;
  border-left: 2px solid var(--color-accent);
}
@media (min-width: 768px) { .story-point__title { font-size: clamp(22px, 2.2vw, 28px); } }
.story-point__text { color: var(--color-text-sub); }

/* ---------- SECTION 3｜ハーフバースデーとは ---------- */
.sec--about {
  background: var(--color-bg-sub);
  border-radius: clamp(32px, 8vw, 80px) clamp(32px, 8vw, 80px) 0 0;
}
.about-block { margin-bottom: clamp(44px, 9vw, 64px); }
.about-block:last-child { margin-bottom: 0; }
.about-block__title {
  font-family: var(--font-mincho);
  font-weight: 500;
  font-size: clamp(20px, 5vw, 24px);
  line-height: 1.6;
  margin-bottom: 16px;
}
@media (min-width: 768px) { .about-block__title { font-size: clamp(22px, 2.2vw, 26px); } }
.about-block__text { color: var(--color-text-sub); }

.reason-list { display: grid; gap: 0; }
.reason-list__item {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 4px;
  border-bottom: 1px solid var(--color-line);
}
.reason-list__item:first-child { border-top: 1px solid var(--color-line); }
.reason-list__num { font-size: 20px; color: var(--color-accent); min-width: 34px; }
.reason-list__title { font-size: 15px; font-weight: 500; line-height: 1.7; }
@media (min-width: 768px) { .reason-list__title { font-size: 17px; } }

/* ---------- SECTION 4｜ギャラリー ---------- */
.sec--gallery {
  background: var(--color-bg-sub);
  padding-bottom: var(--space-sec-emotional);
}
.gallery-group { margin-bottom: clamp(56px, 12vw, 90px); }
.gallery-group__title {
  font-family: var(--font-mincho);
  font-weight: 500;
  font-size: clamp(20px, 5vw, 24px);
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}
@media (min-width: 768px) { .gallery-group__title { font-size: clamp(22px, 2.2vw, 28px); } }
.gallery-group__sub {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 13px;
  color: var(--color-text-sub);
  margin-bottom: clamp(24px, 5vw, 36px);
}
@media (min-width: 768px) { .gallery-group__sub { font-size: 14px; } }

.gallery-grid {
  display: grid;
  gap: 14px;
  padding: 0 var(--inner-pad);
  max-width: var(--inner-max);
  margin: 0 auto;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 768px) { .gallery-grid { gap: 22px; } }

.gallery-photo {
  border-radius: var(--radius-photo);
  overflow: hidden;
}
.gallery-photo img { width: 100%; height: 100%; object-fit: cover; }
.gallery-photo--tall img { aspect-ratio: 4 / 5; }
.gallery-photo--wide img { aspect-ratio: 16 / 11; }

/* 写真集のようなサイズ差：グループごとに構成を変える */
.gallery-grid--a .gallery-photo--wide { grid-column: 1 / -1; }
.gallery-grid--a .gallery-photo:nth-child(1) { grid-column: 1 / -1; }
@media (min-width: 768px) {
  .gallery-grid--a { grid-template-columns: repeat(3, 1fr); }
  .gallery-grid--a .gallery-photo:nth-child(1) { grid-column: span 1; }
  .gallery-grid--a .gallery-photo--wide { grid-column: span 2; }
}
.gallery-grid--b { grid-template-columns: repeat(2, 1fr); }
.gallery-grid--b .gallery-photo--wide { grid-column: 1 / -1; }
@media (min-width: 768px) {
  .gallery-grid--b { grid-template-columns: repeat(3, 1fr); }
  .gallery-grid--b .gallery-photo--wide { grid-column: span 1; align-self: center; }
}
.gallery-grid--c .gallery-photo--wide { grid-column: 1 / -1; }
@media (min-width: 768px) {
  .gallery-grid--c { grid-template-columns: 2fr 1fr 1fr; }
  .gallery-grid--c .gallery-photo--wide { grid-column: span 1; align-self: center; }
}
.gallery-grid--d { grid-template-columns: 1fr; }
@media (min-width: 768px) {
  .gallery-grid--d { grid-template-columns: 3fr 2fr; align-items: center; }
}

/* 感情コピー */
.gallery-copy {
  text-align: center;
  padding: clamp(70px, 15vw, 110px) var(--inner-pad);
}
.gallery-copy p {
  font-family: var(--font-mincho);
  font-size: clamp(22px, 6vw, 30px);
  line-height: 1.9;
  letter-spacing: 0.1em;
}

/* ---------- SECTION 5｜5つの宝物 ---------- */
/* ============================================================
   料金ストリップ（ページ上部の料金まとめ）
   ------------------------------------------------------------
   ★ ここには CSS が無く、素の段落が縦に並んだままだった。
     金額は HTML 側だけに書き、CSS では大きさと並びだけを決める。
============================================================ */
.sec--price-strip {
  padding-top: var(--space-sec);
  padding-bottom: var(--space-sec);
  background: var(--color-bg-sub);
}
.price-strip__title {
  font-family: var(--font-mincho);
  font-size: clamp(21px, 3.4vw, 28px);
  line-height: 1.7;
  letter-spacing: .09em;
  text-align: center;
  margin-bottom: clamp(26px, 4.6vw, 40px);
}
/* 新プランの開始日。見落とされると予約時に困るので、料金の手前に置く */
.price-strip__start {
  display: block;
  width: fit-content;
  margin: -14px auto clamp(24px, 4vw, 36px);
  padding: 6px 18px;
  border: 1px solid var(--color-accent);
  border-radius: 999px;
  font-size: 13px;
  letter-spacing: .06em;
  color: var(--color-text);
  background: var(--color-base);
}

.price-strip__list {
  display: grid;
  gap: clamp(14px, 2.2vw, 20px);
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 768px) {
  /* おすすめを中央に置き、両脇に同じ幅で2枚 */
  .price-strip__list { grid-template-columns: repeat(3, 1fr); align-items: stretch; }
}
.price-strip__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: clamp(22px, 3.6vw, 30px) 18px;
  background: var(--color-base);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-photo);
  text-align: center;
}
.price-strip__item--main {
  border-color: var(--color-accent);
  box-shadow: 0 6px 22px rgba(217, 188, 183, .22);
}
.price-strip__badge {
  font-size: 11px;
  letter-spacing: .22em;
  color: var(--color-accent);
  margin: 0 0 2px;
}
.price-strip__name {
  font-family: var(--font-mincho);
  font-size: clamp(16px, 2.1vw, 18px);
  letter-spacing: .06em;
  margin: 0;
}
.price-strip__price {
  font-size: clamp(28px, 4.4vw, 36px);
  line-height: 1.25;
  letter-spacing: .02em;
  color: var(--color-text);
  margin: 0;
}
.price-strip__price span {
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--color-text-sub);
  margin-left: 2px;
}
.price-strip__spec {
  font-size: 13px;
  line-height: 1.8;
  letter-spacing: .04em;
  color: var(--color-text-sub);
  margin: 0;
}
.price-strip__note {
  max-width: var(--inner-narrow);
  margin: clamp(22px, 3.4vw, 30px) auto 0;
  font-size: 13px;
  line-height: 2;
  letter-spacing: .05em;
  color: var(--color-text-sub);
  text-align: center;
}
.price-strip__note b { color: var(--color-text); font-weight: 500; }
.price-strip__link {
  display: inline-block;
  margin-top: 10px;
  color: var(--color-text);
  border-bottom: 1px solid var(--color-accent);
  padding-bottom: 2px;
}

.sec--treasure { padding-bottom: var(--space-sec-emotional); }
.treasure-list {
  max-width: var(--inner-max);
  margin: 0 auto;
  padding: 0 var(--inner-pad);
  display: grid;
  gap: clamp(64px, 14vw, 110px);
}
.treasure { display: grid; gap: 22px; }
@media (min-width: 768px) {
  .treasure {
    grid-template-columns: 7fr 5fr;
    align-items: center;
    gap: clamp(40px, 6vw, 80px);
  }
  .treasure--reverse .treasure__photo { order: 2; }
  .treasure--reverse .treasure__body { order: 1; text-align: right; }
  .treasure--reverse .treasure__title { justify-content: flex-end; }
}
.treasure__photo { border-radius: var(--radius-photo); overflow: hidden; }
.treasure__photo img { width: 100%; object-fit: cover; }
.treasure__num {
  display: block;
  font-size: 44px;
  line-height: 1;
  color: var(--color-accent);
  opacity: 0.55;
  margin-bottom: 12px;
}
.treasure__title {
  font-family: var(--font-mincho);
  font-weight: 500;
  font-size: clamp(20px, 5vw, 24px);
  line-height: 1.6;
  margin-bottom: 8px;
}
@media (min-width: 768px) { .treasure__title { font-size: clamp(22px, 2.3vw, 28px); } }
.treasure__sub {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 13px;
  color: var(--color-text-sub);
}
@media (min-width: 768px) { .treasure__sub { font-size: 15px; } }

/* ---------- SECTION 6｜家族写真 ---------- */
.sec--family {
  background: var(--color-bg-sub);
  border-radius: clamp(32px, 8vw, 80px) clamp(32px, 8vw, 80px) 0 0;
  padding-bottom: var(--space-sec-emotional);
}
.family__copy {
  font-family: var(--font-mincho);
  font-size: clamp(22px, 6vw, 28px);
  line-height: 1.8;
  letter-spacing: 0.08em;
  margin-bottom: 28px;
}
@media (min-width: 768px) { .family__copy { font-size: clamp(28px, 2.8vw, 36px); } }
.family__text { color: var(--color-text-sub); margin-bottom: clamp(40px, 9vw, 64px); }
.family__photo {
  max-width: 1280px;
  margin: 0 auto clamp(40px, 9vw, 64px);
}
.family__photo img { width: 100%; object-fit: cover; }
@media (min-width: 1320px) { .family__photo { border-radius: var(--radius-photo); overflow: hidden; } }
.family__list { display: grid; gap: 4px; }
.family__list li { border-bottom: 1px solid var(--color-line); padding: 16px 4px; }
.family__list li:first-child { border-top: 1px solid var(--color-line); }
.family__list-title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.8;
  padding-left: 16px;
  position: relative;
}
.family__list-title::before {
  content: '';
  position: absolute;
  left: 0; top: 0.75em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
}
@media (min-width: 768px) { .family__list-title { font-size: 17px; } }

/* ---------- SECTION 7｜プラン ---------- */
.plan-note {
  font-size: 13px;
  color: var(--color-text-sub);
  margin: -20px 0 40px;
}
/* ---------- プラン一覧（横長カード） ----------
   写真を左に置き、右を横長に使う。
   縦3列だと本文の幅が133pxしか残らず、
   「①着ぐるみフォト ②カジュアルフォト…」が5行に折り返していた。 */
.plan-row {
  display: grid;
  background: var(--color-base);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-photo);
  overflow: hidden;
}
@media (min-width: 760px) { .plan-row { grid-template-columns: 38% 1fr; } }
.plan-row--special {
  border-color: var(--color-accent);
  box-shadow: 0 6px 22px rgba(217, 188, 183, .20);
}
.plan-row__photo { margin: 0; }
.plan-row__photo img {
  width: 100%;
  height: 100%;
  min-height: 220px;
  object-fit: cover;
  display: block;
}
@media (max-width: 759px) {
  /* 縦積みになる幅では、元の縦長（4:5）のままだと写真だけで
     画面の半分を占めてしまう。横位置に切って高さを抑える */
  .plan-row__photo img { height: auto; aspect-ratio: 4 / 3; }
}
.plan-row__body {
  padding: clamp(20px, 3.4vw, 30px);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.plan-row__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.plan-row__badge {
  font-size: 10.5px;
  letter-spacing: .18em;
  color: var(--color-accent);
  margin-bottom: 2px;
}
.plan-row__title {
  font-family: var(--font-mincho);
  font-size: clamp(17px, 2.2vw, 20px);
  letter-spacing: .05em;
  line-height: 1.6;
}
.plan-row__price {
  font-size: clamp(24px, 3.2vw, 28px);
  line-height: 1.1;
  white-space: nowrap;
  text-align: right;
}
.plan-row__price span {
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--color-text-sub);
}
.plan-row__price small {
  display: block;
  font-family: var(--font-sans);
  font-size: 11.5px;
  letter-spacing: .04em;
  color: var(--color-text-sub);
  margin-top: 4px;
}
.plan-row__text {
  font-size: 13px;
  line-height: 1.95;
  color: var(--color-text-sub);
}
.plan-row__text b { color: var(--color-text); font-weight: 500; }
.plan-row__spec {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 18px;
  margin: 0;
}
@media (min-width: 980px) { .plan-row__spec { grid-template-columns: repeat(4, 1fr); } }
.plan-row__spec > div {
  border-top: 1px solid var(--color-line);
  padding-top: 8px;
}
.plan-row__spec dt {
  font-size: 11.5px;
  letter-spacing: .06em;
  color: var(--color-accent-sub);
}
.plan-row__spec dd {
  margin: 2px 0 0;
  font-size: 13.5px;
  line-height: 1.6;
}
.plan-row__spec small {
  display: block;
  font-size: 11.5px;
  line-height: 1.75;
  color: var(--color-text-sub);
  margin-top: 3px;
}
.plan-row__foot {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 4px;
}
.plan-row__foot .btn { min-width: 210px; }
.plan-row__note {
  flex: 1;
  min-width: 200px;
  font-size: 11.5px;
  line-height: 1.8;
  color: var(--color-text-sub);
}

.plan-list {
  display: grid;
  gap: clamp(16px, 2.6vw, 22px);
}
@media (min-width: 900px) {
  .plan-list { grid-template-columns: 1fr; gap: 18px; }
}
.plan-card {
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: 18px;
  overflow: hidden;
}
.plan-card__photo img { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; }
@media (min-width: 900px) { .plan-card__photo img { aspect-ratio: 4 / 3.4; } }
.plan-card__body { padding: clamp(24px, 5vw, 32px); }
.plan-card__title {
  font-family: var(--font-mincho);
  font-weight: 500;
  font-size: clamp(20px, 5vw, 22px);
  line-height: 1.6;
  margin-bottom: 12px;
}
.plan-card__text { font-size: 14px; color: var(--color-text-sub); margin-bottom: 20px; }
.plan-card__spec { margin-bottom: 24px; }
.plan-card__spec > div {
  display: flex;
  gap: 16px;
  padding: 10px 2px;
  border-bottom: 1px solid var(--color-line);
  font-size: 13px;
}
.plan-card__spec dt { min-width: 76px; color: var(--color-text-sub); font-weight: 500; }
.plan-card__spec dd { flex: 1; }
.plan-card .btn { width: 100%; }

/* スペシャルプラン：色ではなく余白・背景・サイズで上質に強調 */
.plan-card--special {
  position: relative;
  background: var(--color-bg-sub);
  border-color: var(--color-accent-sub);
}
@media (min-width: 900px) {
  .plan-card--special { transform: translateY(-14px); }
  .plan-card--special .plan-card__photo img { aspect-ratio: 4 / 3.1; }
}
.plan-card__badge {
  position: absolute;
  top: 16px; left: 16px;
  z-index: 1;
  background: rgba(255, 253, 249, 0.92);
  color: var(--color-text);
  font-size: 12px;
  letter-spacing: 0.2em;
  padding: 6px 16px;
  border-radius: 16px;
}

/* ---------- SECTION 8｜選ばれる理由 ---------- */
.sec--reason { background: var(--color-bg-sub); }
.reason-grid {
  display: grid;
  gap: clamp(32px, 7vw, 44px);
}
@media (min-width: 768px) { .reason-grid { grid-template-columns: 1fr 1fr; gap: 56px 64px; } }
@media (min-width: 1000px) { .reason-grid { grid-template-columns: 1fr 1fr 1fr; } }
.reason { padding-left: 20px; border-left: 1px solid var(--color-accent-sub); }
.reason__icon { width: 40px; height: 40px; margin-bottom: 14px; color: var(--color-accent); }
.reason__num {
  font-size: 17px;
  color: var(--color-accent-sub);
  letter-spacing: 0.18em;
  margin-bottom: 8px;
}
.reason__title {
  font-family: var(--font-mincho);
  font-weight: 500;
  font-size: clamp(18px, 4.6vw, 21px);
  line-height: 1.6;
  margin-bottom: 8px;
}
@media (min-width: 768px) { .reason__title { font-size: clamp(19px, 1.9vw, 23px); } }
.reason__sub {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 13px;
  color: var(--color-text-sub);
  line-height: 1.9;
}
@media (min-width: 768px) { .reason__sub { font-size: 14px; } }

/* ---------- 流れの手順（ご予約／撮影当日で共用） ---------- */
.flow-list { display: grid; gap: 0; position: relative; }
.flow-step {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 26px 0;
  position: relative;
}
@media (min-width: 480px) { .flow-step { gap: 22px; } }
.flow-step__body { flex: 1; }
/* アイコンは右端に控えめに配置 */
.flow-step__icon {
  width: 36px; height: 36px;
  margin-top: 10px;
  opacity: 0.75;
}
@media (min-width: 480px) { .flow-step__icon { width: 46px; height: 46px; margin-top: 6px; } }
.flow-step:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 21px;
  top: 70px;
  bottom: -8px;
  width: 1px;
  background: var(--color-line);
}
.flow-step__num {
  flex-shrink: 0;
  width: 44px; height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-accent-sub);
  border-radius: 50%;
  font-size: 15px;
  color: var(--color-accent-sub);
  background: var(--color-base);
  position: relative;
  z-index: 1;
}
.flow-step__title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 4px;
  padding-top: 8px;
}
@media (min-width: 768px) { .flow-step__title { font-size: 18px; } }
.flow-step__sub {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 13px;
  color: var(--color-text-sub);
}
@media (min-width: 768px) { .flow-step__sub { font-size: 14px; } }

/* ---------- ご予約から撮影当日までの流れ ----------
   手順の見た目は「撮影の流れ」と同じ .flow-list を使い回している。
   ここで足しているのは、2段階の全体像・補足行・確認事項の3つだけ。 */
.sec--booking { background: var(--color-bg-sub); }

/* 2つの流れを分ける小見出し */
.flow-group__title {
  font-family: var(--font-mincho);
  font-size: clamp(17px, 2.4vw, 20px);
  letter-spacing: .08em;
  text-align: center;
  margin: 0 0 clamp(4px, 1vw, 10px);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-line);
}
.flow-group__title--second { margin-top: clamp(34px, 5.4vw, 52px); }

.booking-overview {
  background: var(--color-base);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-photo);
  padding: clamp(22px, 4vw, 32px) clamp(18px, 3.4vw, 30px);
  margin-bottom: clamp(30px, 5vw, 44px);
}
.booking-overview__title {
  font-family: var(--font-mincho);
  font-size: clamp(17px, 2.4vw, 20px);
  letter-spacing: .08em;
  text-align: center;
  margin: 0 0 clamp(16px, 2.6vw, 22px);
}
.booking-overview__row {
  display: grid;
  gap: 12px;
  justify-items: stretch;
  /* stretch にして2つの箱の高さを揃える。center だと文字数の差でずれる */
  align-items: stretch;
}
.booking-overview__arrow { align-self: center; }
@media (min-width: 600px) {
  /* 横並びにして、間に矢印を挟む */
  .booking-overview__row { grid-template-columns: 1fr auto 1fr; }
}
.booking-overview__phase {
  background: var(--color-bg-sub);
  border-radius: 10px;
  padding: 18px 16px;
  text-align: center;
}
.booking-overview__badge {
  display: inline-block;
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--color-accent-sub);
  margin-bottom: 4px;
}
.booking-overview__name {
  font-family: var(--font-mincho);
  font-size: clamp(18px, 2.6vw, 21px);
  letter-spacing: .06em;
  margin: 0 0 6px;
}
.booking-overview__desc {
  font-size: 13px;
  line-height: 1.9;
  color: var(--color-text-sub);
  margin: 0;
}
.booking-overview__arrow {
  color: var(--color-accent);
  font-size: 20px;
  text-align: center;
  /* 縦並びのときは下向きに見せる */
  transform: rotate(90deg);
}
@media (min-width: 600px) { .booking-overview__arrow { transform: none; } }
.booking-overview__note {
  font-size: 13px;
  line-height: 2;
  color: var(--color-text-sub);
  text-align: center;
  margin: clamp(16px, 2.6vw, 22px) 0 0;
}
.booking-overview__note b { color: var(--color-text); font-weight: 500; }

/* 手順の中の補足行 */
.flow-step__note {
  font-size: 12.5px;
  line-height: 1.9;
  color: var(--color-text-sub);
  margin: 6px 0 0;
}
.flow-step__note--done {
  display: inline-block;
  background: var(--color-base);
  border: 1px solid var(--color-accent-sub);
  border-radius: 999px;
  padding: 3px 14px;
  color: var(--color-text);
}

/* 予約カレンダーの前の確認とチェック */
.booking-gate { margin-top: clamp(30px, 5vw, 44px); }
.booking-agree {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: clamp(20px, 3.4vw, 28px) 0 clamp(16px, 2.6vw, 22px);
}
.booking-agree__input {
  width: 20px;
  height: 20px;
  accent-color: var(--color-accent);
  cursor: pointer;
  flex-shrink: 0;
}
.booking-agree__label {
  font-size: 13.5px;
  letter-spacing: .04em;
  cursor: pointer;
}
/* チェックが入るまでは押せない見た目にする */
.booking-gate.is-locked .btn--pink {
  opacity: .42;
  pointer-events: none;
}
.booking-agree__hint {
  font-size: 12px;
  line-height: 1.9;
  color: var(--color-text-sub);
  text-align: center;
  margin-top: 10px;
}

/* 確認事項 */
.booking-notes {
  background: var(--color-base);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-photo);
  padding: clamp(22px, 4vw, 32px) clamp(18px, 3.4vw, 30px);
  margin-top: clamp(26px, 4.4vw, 40px);
}
.booking-notes__title {
  font-family: var(--font-mincho);
  font-size: clamp(16px, 2.2vw, 19px);
  letter-spacing: .08em;
  margin: 0 0 clamp(12px, 2vw, 18px);
}
.booking-notes__list { margin: 0; }
.booking-notes__row {
  display: grid;
  gap: 2px 18px;
  padding: 12px 0;
  border-top: 1px solid var(--color-line);
}
.booking-notes__row:first-child { border-top: none; padding-top: 0; }
@media (min-width: 600px) {
  .booking-notes__row { grid-template-columns: 8em 1fr; }
}
.booking-notes__row dt {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--color-accent-sub);
}
.booking-notes__row dd {
  margin: 0;
  font-size: 13.5px;
  line-height: 2;
  color: var(--color-text-sub);
}
.booking-notes__row dd b { color: var(--color-text); font-weight: 500; }
.booking-notes__row dd a {
  color: var(--color-text);
  border-bottom: 1px solid var(--color-accent);
}

/* 「ハーフバースデーとは？」の中に取り込んだ安心ポイント。
   もとは独立セクションで背景色がついていたので、
   枠の中でも同じように地の色を敷いて区切りを残す。 */
.anshin-group {
  background: var(--color-bg-sub);
  border-radius: var(--radius-photo);
  padding: clamp(26px, 4.4vw, 40px) clamp(18px, 3.4vw, 32px);
  margin-top: clamp(34px, 5.4vw, 52px);
}
.anshin-group .flow-group__title { border-bottom-color: var(--color-line); }

/* 撮影パターンの早見表（料金シミュレーターの中） */
.sim__patterns { margin: clamp(18px, 3vw, 26px) 0; }
.pattern-list {
  display: grid;
  gap: 8px;
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  counter-reset: none;
}
@media (min-width: 560px) {
  /* 横に並べて、当日の流れとして読めるようにする */
  .pattern-list { grid-auto-flow: column; grid-auto-columns: 1fr; gap: 10px; }
}
.pattern {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  text-align: center;
  padding: 14px 10px;
  background: var(--color-base);
  border: 1px solid var(--color-line);
  border-radius: 10px;
}
.pattern--family { border-style: dashed; }
.pattern__num { font-size: 12px; letter-spacing: .12em; color: var(--color-accent-sub); }
.pattern__name { font-size: 13.5px; font-weight: 500; line-height: 1.6; }
.pattern__wear { font-size: 12px; line-height: 1.7; color: var(--color-text-sub); }
.pattern-set__note {
  font-size: 12.5px;
  line-height: 1.9;
  color: var(--color-text-sub);
  margin: 10px 0 0;
}
.pattern-set__note b { color: var(--color-text); font-weight: 500; }

/* 作例を1枚ぶんの画面で見せ、複数枚を自動で送る
   ------------------------------------------------------------
   ★ 高さを決め打ちにしている。縦・横が混じっていても
     送るたびに枠が伸び縮みしないようにするため。 */
.gallery-solo {
  position: relative;
  width: min(100%, 560px);
  margin: 0 auto;
}
.gallery-solo__track {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-photo);
}
.gallery-solo__track::-webkit-scrollbar { display: none; }
.gallery-solo__slide { flex: 0 0 100%; scroll-snap-align: center; }
.gallery-solo__slide figure { margin: 0; }
.gallery-solo__slide img {
  width: 100%;
  /* 縦 2:3。縦・横どちらの写真も同じ枠に切りそろえる。
     高さを固定していないので、幅に合わせて素直に伸び縮みする */
  aspect-ratio: 2 / 3;
  height: auto;
  object-fit: cover;
  display: block;
  cursor: zoom-in;
}
/* 横長の一枚をそのまま見せるとき（ころりんフォトなど）
   ------------------------------------------------------------
   ★ ふだんは縦2:3に切りそろえているが、
     4カットをつないだ横長の写真は切ると絵が成立しない。 */
.gallery-solo--wide { width: min(100%, 900px); }
.gallery-solo--wide .gallery-solo__slide img {
  aspect-ratio: auto;
  height: auto;
  object-fit: contain;
}

.gallery-solo__dots {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-top: 12px;
}
.gallery-solo__dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-line);
  transition: background .3s ease;
}
.gallery-solo__dots span.is-now { background: var(--color-accent); }

/* ---------- 写真の拡大表示 ----------
   figure[data-large] を押すと、大きい画像を画面いっぱいに出す。
   data-large が無いときは、表示中の写真をそのまま拡大する。 */
.zoom {
  position: fixed;
  inset: 0;
  z-index: 2147483600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 48px);
  background: rgba(28, 25, 24, .88);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}
.zoom.is-open { opacity: 1; visibility: visible; }
.zoom__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 6px;
  /* 画像そのものを押しても閉じないようにする */
  cursor: default;
}
.zoom__cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: max(12px, env(safe-area-inset-bottom));
  text-align: center;
  font-size: 12px;
  line-height: 1.8;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .82);
  padding: 0 16px;
  pointer-events: none;
}
.zoom__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background .2s ease;
}
.zoom__btn:hover { background: rgba(255, 255, 255, .26); }
.zoom__btn--prev { left: clamp(8px, 2vw, 24px); }
.zoom__btn--next { right: clamp(8px, 2vw, 24px); }
.zoom__close {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  right: clamp(8px, 2vw, 24px);
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.zoom__close:hover { background: rgba(255, 255, 255, .26); }
@media (max-width: 599px) { .zoom__btn { display: none; } }
body.is-zooming { overflow: hidden; }

/* 「ハーフバースデーとは？」の書き出し。見出しを付けず、
   ひとことで何の記念日かを伝える段落 */
.about-lead {
  font-size: 14.5px;
  line-height: 2.1;
  color: var(--color-text-sub);
  text-align: center;
  margin-bottom: clamp(30px, 5vw, 46px);
}
@media (min-width: 768px) { .about-lead { font-size: 15px; } }

/* ---------- 着ぐるみ衣装ギャラリー ----------
   ギャラリーの「着ぐるみフォト」の直後に置くブロック。
   1着につき1枚。カードを横に送って、いろいろな種類を見てもらう。 */
.costume-block {
  margin-top: clamp(26px, 4.4vw, 40px);
  padding-top: clamp(26px, 4.4vw, 40px);
  border-top: 1px solid var(--color-line);
  margin-bottom: clamp(56px, 12vw, 90px);
}
.costume-slider { margin-top: clamp(18px, 3vw, 26px); }
.costume-list {
  display: flex;
  gap: clamp(12px, 2vw, 20px);
  margin: 0;
  padding: 0 var(--inner-pad);
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}
.costume-list::-webkit-scrollbar { display: none; }
/* 自動で流しているあいだ、スナップが効いていると引き戻されて進まない。
   指で送るときだけスナップさせたいので、ここでは外す */
.costume-list { scroll-snap-type: none; }
@media (prefers-reduced-motion: reduce) {
  .costume-list { scroll-snap-type: x mandatory; }
}
@media (min-width: 1100px) {
  /* 画面が広いときは、中身が真ん中の列に揃うように左右を空ける */
  .costume-list { padding-inline: max(var(--inner-pad), calc((100vw - var(--inner-max)) / 2)); }
}
.costume {
  /* 次のカードの端がのぞく幅。送れることが見た目で分かる */
  flex: 0 0 clamp(180px, 46vw, 250px);
  scroll-snap-align: center;
  background: var(--color-base);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-photo);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.costume__photo { margin: 0; }
.costume__photo img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
  cursor: zoom-in;
}
.costume__name {
  font-family: var(--font-mincho);
  font-size: 15px;
  letter-spacing: .06em;
  text-align: center;
  padding: 14px 12px 0;
}
.costume__text {
  font-size: 12px;
  line-height: 1.9;
  color: var(--color-text-sub);
  padding: 6px 14px 16px;
}
.costume-slider__hint {
  font-size: 11.5px;
  letter-spacing: .06em;
  color: var(--color-text-sub);
  text-align: center;
  margin-top: 12px;
}
.costume-note {
  font-size: 12px;
  line-height: 1.95;
  color: var(--color-text-sub);
  text-align: center;
  max-width: var(--inner-narrow);
  margin: clamp(20px, 3.4vw, 28px) auto 0;
}

/* ---------- SECTION 10｜安心ポイント ---------- */
.sec--anshin {
  background: var(--color-bg-sub);
  border-radius: clamp(32px, 8vw, 80px) clamp(32px, 8vw, 80px) 0 0;
}
.anshin-list { display: grid; gap: 4px; }
.anshin {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 4px;
  border-bottom: 1px solid var(--color-line);
}
.anshin:first-child { border-top: 1px solid var(--color-line); }
.anshin__icon { width: 42px; height: 42px; color: var(--color-accent); }
.anshin__body { flex: 1; }
@media (min-width: 768px) {
  .anshin { gap: 26px; }
  .anshin__icon { width: 50px; height: 50px; }
}
.anshin__title {
  font-family: var(--font-mincho);
  font-weight: 500;
  font-size: clamp(18px, 4.6vw, 20px);
  line-height: 1.7;
  margin-bottom: 6px;
}
@media (min-width: 768px) { .anshin__title { font-size: 21px; } }
.anshin__sub {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 13px;
  color: var(--color-text-sub);
}
@media (min-width: 768px) { .anshin__sub { font-size: 14px; } }

/* ---------- SECTION 11｜お客様の声 ---------- */
.voice-preparing {
  color: var(--color-text-sub);
  padding: clamp(32px, 7vw, 48px) clamp(24px, 6vw, 40px);
  background: var(--color-bg-sub);
  border-radius: 14px;
  text-align: center;
}
.voice-preparing__icon {
  width: 52px; height: 52px;
  margin: 0 auto 16px;
  color: var(--color-accent);
}
.voice-preparing p { font-size: 14px; }

/* ---------- SECTION 12｜店舗情報 ---------- */
.sec--studio { background: var(--color-bg-sub); }
.studio-wrap { display: grid; gap: clamp(32px, 7vw, 44px); }
@media (min-width: 900px) { .studio-wrap { grid-template-columns: 1fr 1fr; align-items: start; gap: 56px; } }
.studio__photo { border-radius: var(--radius-photo); overflow: hidden; }
.studio-table th, .studio-table td {
  text-align: left;
  padding: 13px 4px;
  border-bottom: 1px solid var(--color-line);
  font-size: 14px;
  line-height: 1.8;
  vertical-align: top;
  font-weight: 400;
}
.studio-table tr:first-child th, .studio-table tr:first-child td { border-top: 1px solid var(--color-line); }
.studio-table th { width: 92px; color: var(--color-text-sub); white-space: nowrap; }
.studio__area { margin-top: 20px; font-size: 13px; color: var(--color-text-sub); }

/* ---------- SECTION 13｜Instagram ---------- */
.instagram__text { color: var(--color-text-sub); margin-bottom: clamp(28px, 6vw, 44px); }
.instagram-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (min-width: 768px) { .instagram-grid { grid-template-columns: repeat(4, 1fr); gap: 18px; } }
.instagram-grid__item { border-radius: 10px; overflow: hidden; }
.instagram-grid__item img { aspect-ratio: 4 / 5; width: 100%; object-fit: cover; }

/* ---------- SECTION 14｜FAQ ---------- */
.faq-list { border-top: 1px solid var(--color-line); }
.faq { border-bottom: 1px solid var(--color-line); }
.faq__q { font-size: inherit; font-weight: inherit; }
.faq__button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  text-align: left;
  padding: 20px 4px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.7;
  transition: color 0.3s ease;
}
@media (min-width: 768px) { .faq__button { font-size: 16px; padding: 24px 8px; } }
.faq__button:hover { color: var(--color-text-sub); }
.faq__icon {
  flex-shrink: 0;
  position: relative;
  width: 14px; height: 14px;
}
.faq__icon::before, .faq__icon::after {
  content: '';
  position: absolute;
  top: 50%; left: 0;
  width: 100%; height: 1px;
  background: var(--color-accent-sub);
  transition: transform 0.35s ease;
}
.faq__icon::after { transform: rotate(90deg); }
.faq__button[aria-expanded="true"] .faq__icon::after { transform: rotate(0deg); }
.faq__a { padding: 0 4px 22px; }
.faq__a p { font-size: 14px; color: var(--color-text-sub); }
@media (min-width: 768px) { .faq__a { padding: 0 8px 26px; } .faq__a p { font-size: 15px; } }

/* ---------- SECTION 15｜後押し ---------- */
.sec--push { text-align: center; }
.sec--push .sec-title { margin-bottom: 24px; }
.push__text { color: var(--color-text-sub); }
.sec--push .mid-cta { margin-top: 40px; }

/* ---------- SECTION 16｜最終CTA ---------- */
.sec--final {
  position: relative;
  padding: clamp(110px, 24vw, 200px) 0;
  overflow: hidden;
  color: #fff;
}
.final__photo { position: absolute; inset: 0; }
/* 背景の写真。縦位置の写真を横長の帯に敷いているので、
   そのままだと真ん中＝衣装のアップだけが映る。
   お子さまが入る高さまで下げて見せる。 */
.final__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 68%;
}
.final__overlay {
  position: absolute; inset: 0;
  background: rgba(69, 65, 63, 0.55);
}
.final__content {
  position: relative;
  z-index: 1;
  max-width: var(--inner-narrow);
  margin: 0 auto;
  padding: 0 var(--inner-pad);
  text-align: center;
}
.final__h2 {
  font-family: var(--font-mincho);
  font-weight: 500;
  font-size: clamp(20px, 5.2vw, 26px);
  line-height: 1.7;
  letter-spacing: 0.06em;
  margin-bottom: clamp(32px, 7vw, 48px);
}
@media (min-width: 768px) { .final__h2 { font-size: clamp(26px, 2.6vw, 34px); } }
.final__copy {
  font-family: var(--font-mincho);
  font-size: clamp(30px, 8.5vw, 40px);
  line-height: 1.5;
  letter-spacing: 0.1em;
  margin-bottom: clamp(28px, 6vw, 40px);
}
@media (min-width: 768px) { .final__copy { font-size: clamp(40px, 4vw, 54px); } }
.final__text {
  font-size: 14px;
  line-height: 2.3;
  margin-bottom: clamp(40px, 8vw, 56px);
  opacity: 0.95;
}
@media (min-width: 768px) { .final__text { font-size: 16px; } }
.final__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.final__cta .btn { width: min(100%, 340px); }
@media (min-width: 768px) {
  .final__cta { flex-direction: row; justify-content: center; }
  .final__cta .btn { width: auto; }
}

/* ---------- 0歳〜1歳の月齢タイムライン（LP間の回遊導線） ---------- */
.sec--journey { background: var(--color-bg-sub); }
.journey-lead {
  font-size: 14px;
  color: var(--color-text-sub);
  margin: -20px 0 clamp(32px, 7vw, 48px);
}
.journey-lead b { font-weight: 500; color: var(--color-text); }

.journey { display: grid; gap: 0; }
.journey__item { position: relative; }
.journey__link {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 22px 4px;
  transition: opacity .3s ease;
}
a.journey__link:hover { opacity: .68; }

/* 縦に伸びる時系列の線 */
.journey__marker {
  position: relative;
  flex-shrink: 0;
  width: 14px;
  display: flex;
  justify-content: center;
  padding-top: 8px;
}
.journey__item:not(:last-child) .journey__marker::after {
  content: '';
  position: absolute;
  top: 20px;
  bottom: -34px;
  left: 50%;
  width: 1px;
  background: var(--color-line);
}
.journey__dot {
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--color-bg-sub);
  border: 1px solid var(--color-accent-sub);
  position: relative; z-index: 1;
}
.journey__item--current .journey__dot {
  background: var(--color-accent);
  border-color: var(--color-accent);
  box-shadow: 0 0 0 4px rgba(217, 188, 183, .28);
}

.journey__body { display: block; flex: 1; }
.journey__age {
  display: block;
  font-family: var(--font-en);
  font-size: 20px;
  line-height: 1;
  color: var(--color-accent-sub);
  margin-bottom: 6px;
}
.journey__age small { font-size: 11px; letter-spacing: .16em; margin-left: 4px; }
.journey__name {
  display: block;
  font-family: var(--font-mincho);
  font-weight: 500;
  font-size: clamp(17px, 4.4vw, 20px);
  line-height: 1.6;
  margin-bottom: 4px;
}
.journey__badge {
  display: inline-block;
  vertical-align: 2px;
  margin-left: 10px;
  font-family: var(--font-sans);
  font-size: 10.5px;
  letter-spacing: .06em;
  color: var(--color-text-sub);
  background: var(--color-base);
  border: 1px solid var(--color-line);
  border-radius: 12px;
  padding: 3px 10px;
  line-height: 1.5;
}
.journey__text {
  display: block;
  font-size: 13px;
  color: var(--color-text-sub);
  line-height: 1.85;
}
a.journey__link .journey__body::after {
  content: '詳しく見る →';
  display: inline-block;
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--color-text);
  border-bottom: 1px solid var(--color-accent-sub);
  padding-bottom: 2px;
}

.journey-note {
  margin-top: clamp(32px, 7vw, 44px);
  padding: 18px 20px;
  background: var(--color-base);
  border-radius: 12px;
  font-size: 13px;
  color: var(--color-text-sub);
  line-height: 1.9;
}

@media (min-width: 768px) {
  .journey__link { gap: 24px; padding: 26px 4px; }
  .journey__age { font-size: 24px; }
  .journey__text { font-size: 14px; }
}

/* ---------- フッター ---------- */
.site-footer {
  padding: clamp(48px, 10vw, 72px) 0 calc(clamp(28px, 6vw, 40px));
  text-align: center;
}
.site-footer__logo a { display: flex; flex-direction: column; gap: 4px; }
.site-footer__logo {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 24px;
}
.site-footer__nav {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 26px;
  font-size: 13px;
}
.site-footer__nav a { color: var(--color-text-sub); }
.site-footer__nav a:hover { color: var(--color-text); }
@media (min-width: 768px) {
  .site-footer__nav { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 12px 28px; }
}
.site-footer__logo .en { font-size: 20px; letter-spacing: 0.24em; }
.site-footer__logo span:last-child { font-size: 11px; color: var(--color-text-sub); letter-spacing: 0.14em; }
.site-footer__copy { font-size: 12px; color: var(--color-text-sub); letter-spacing: 0.1em; }

/* ---------- スマートフォン追従CTA ---------- */
.sticky-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  display: flex;
  height: var(--sticky-height);
  box-shadow: 0 -2px 14px rgba(69, 65, 63, 0.12);
  transition: transform 0.4s ease;
}
.sticky-cta.is-hidden { transform: translateY(100%); }
.sticky-cta__btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.08em;
}
.sticky-cta__btn--reserve { background: var(--color-accent); color: #fff; }
.sticky-cta__btn--line { background: #fff; color: var(--color-text); }
@media (min-width: 768px) {
  .sticky-cta { display: none; }
}

/* 月齢の単位は日本語表記のため、和文書体で組む（英字書体だと字形が崩れるため） */
.growth__month small,
.journey__age small {
  font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', sans-serif;
  letter-spacing: .02em;
  margin-left: 3px;
}

/* Cormorant Garamond の既定は旧様式数字で、0 が「o」、1 が「I」に見えてしまう。
   数字は高さの揃った字形に統一する（和文書体はもともとこの字形なので影響なし）。 */
body { font-variant-numeric: lining-nums; }

/* ============================================================
   お宮参りLPで足したもの
   ------------------------------------------------------------
   このLPは既存LPと違い、料金を明記する。
   そのぶんだけ、価格まわりの見た目をここに足している。
   既存のクラスで足りるところは、あえて新しく作っていない。
============================================================ */

/* ---------- ヒーローの価格 ---------- */
/* 予約ボタンのすぐ上に置く。金額は大きく、条件は小さく */
.hero__price {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 14px 0 18px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--color-line);
  border-radius: 10px;
  line-height: 1.5;
}
.hero__price-name {
  font-family: var(--font-mincho);
  font-size: 14px;
  letter-spacing: 0.08em;
}
.hero__price-num {
  font-size: clamp(28px, 7vw, 34px);
  letter-spacing: 0.02em;
  color: var(--color-text);
}
.hero__price-num small {
  font-family: var(--font-sans);
  font-size: 12px;
  margin-left: 2px;
  color: var(--color-text-sub);
}
.hero__price-note { font-size: 12px; color: var(--color-text-sub); }

@media (min-width: 900px) {
  .hero__price {
    align-self: flex-start;
    background: none;
    border: 0;
    border-left: 2px solid var(--color-accent);
    border-radius: 0;
    padding: 4px 0 4px 18px;
  }
}

/* ---------- 補足の一文 ---------- */
/* 「※」に頼らず、字を落として補足だと分かるようにする */
.note {
  font-size: 13px;
  line-height: 1.9;
  color: var(--color-text-sub);
  margin-top: clamp(20px, 4vw, 28px);
  padding-left: 14px;
  border-left: 1px solid var(--color-line);
}
.note b { font-weight: 500; color: var(--color-text); }

/* ---------- 料金カード ---------- */
/* このLPは2枚なので、3列の指定を上書きする */
@media (min-width: 768px) {
  .plan-list--two { grid-template-columns: 1fr 1fr; }
}

.plan-card__label {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--color-accent-sub);
  border: 1px solid var(--color-line);
  border-radius: 999px;
  padding: 3px 12px;
  margin-bottom: 12px;
}
.plan-card__price {
  font-size: clamp(30px, 8vw, 36px);
  line-height: 1.2;
  letter-spacing: 0.02em;
  margin-bottom: 2px;
}
.plan-card__price small {
  font-family: var(--font-sans);
  font-size: 12px;
  margin-left: 3px;
  color: var(--color-text-sub);
}
.plan-card__price-note {
  font-size: 12px;
  color: var(--color-text-sub);
  margin-bottom: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--color-line);
}
.plan-card__note {
  font-size: 12px;
  line-height: 1.9;
  color: var(--color-text-sub);
  margin-top: 14px;
}

/* ---------- 料金の表（美容・キャンセル） ---------- */
.price-block { margin-top: clamp(48px, 9vw, 72px); }
.price-block__title {
  font-family: var(--font-mincho);
  font-weight: 500;
  font-size: clamp(18px, 4.6vw, 20px);
  letter-spacing: 0.06em;
  margin-bottom: 16px;
}
/* 金額の列は右端に寄せて、額を見比べやすくする */
.price-block .studio-table th { width: auto; white-space: normal; color: var(--color-text); }
.price-block .studio-table td.en {
  width: 5.5em;
  text-align: right;
  white-space: nowrap;
  font-size: 17px;
}

/* ---------- 共感セクションの写真 ---------- */
.story__photo {
  max-width: var(--inner-max);
  margin: clamp(36px, 8vw, 56px) auto 0;
  padding: 0 var(--inner-pad);
}
.story__photo img { width: 100%; border-radius: var(--radius-photo); }

/* ---------- スタジオへの行き先 ---------- */
.studio__links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin-top: 18px;
  font-size: 14px;
}
.studio__links a {
  color: var(--color-accent);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}

/* ---------- ヒーローの写真の高さ（スマートフォン） ---------- */
/* 既存LPのヒーローは、写真の高さが中身まかせになっている
   （高さが決まっていないので flex-basis の % が効かない）。
   そのため写真の縦横比しだいで、下に大きな余白ができたり、
   逆に文字が画面からはみ出したりする。

   そこで、文字は中身のぶんだけ取り、余ったぶんを写真が受け持つようにする。
   こうすれば写真の比率も画面の高さも問わず、ちょうど1画面に収まる */
@media (max-width: 899px) {
  .hero__photo { flex: 1 1 auto; min-height: 0; }
  .hero__content { flex: 0 0 auto; }
  /* 写真の枠は伸びても、中の画像は height:100% が効かず元の比率のまま止まる
     （枠の高さが height ではなく flex で決まっているため）。
     枠に貼り付けて、はみ出したぶんは切り取る */
  .hero__photo img { position: absolute; inset: 0; width: 100%; height: 100%; }
}

/* 写真が明るいと英字の小見出しが読めなくなるため、少し濃くする */
.hero__accent { color: var(--color-text-sub); }

/* -------------------------------------------------------------------------
   プラン限定特典 / オプション・注意事項
   ------------------------------------------------------------
   公式サイト（noblem.jp/plan/half-birthday）に載っている
   特典・オプション・注意事項をこのページにも置いたときに足した。
   もとのCSSにはこの2つの指定が無く、素のHTMLのまま並んでいた。
   ------------------------------------------------------------------------- */

/* ★ 特典は、料金カードより先に目に入る位置に置く
     「パノラマデータがもらえる」ことは選ぶ理由になるため、
     金額の並びに埋もれさせない。 */
.plan-bonus {
  max-width: 720px;
  margin: 0 auto clamp(32px, 5vw, 48px);
  padding: clamp(24px, 4vw, 34px);
  background: var(--color-bg-sub);
  border: 1px solid var(--color-line);
  border-radius: 14px;
  text-align: center;
}
.plan-bonus__label {
  display: inline-block;
  margin: 0 0 12px;
  padding: 5px 16px;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  color: #fff;
  background: var(--color-accent);
  border-radius: 999px;
}
.plan-bonus__title {
  margin: 0 0 14px;
  font-family: var(--font-mincho);
  font-size: clamp(1.15rem, 3.4vw, 1.4rem);
  line-height: 1.7;
  letter-spacing: 0.06em;
}
.plan-bonus__text {
  margin: 0;
  font-size: 0.94rem;
  line-height: 2;
  letter-spacing: 0.04em;
  color: var(--color-text-sub);
}
.plan-bonus__text b { color: var(--color-text); font-weight: 500; }

/* オプションと注意事項 */
.plan-extra {
  max-width: 780px;
  margin: clamp(40px, 7vw, 64px) auto 0;
}
.plan-extra__title {
  margin: 0 0 16px;
  font-family: var(--font-mincho);
  font-size: clamp(1.05rem, 3vw, 1.25rem);
  letter-spacing: 0.08em;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-line);
}
.plan-extra__title + .plan-extra__title,
.plan-extra__note + .plan-extra__title { margin-top: clamp(30px, 5vw, 46px); }

.plan-extra__list { margin: 0 0 18px; }
.plan-extra__list > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 16px;
  padding: 13px 2px;
  border-bottom: 1px dotted var(--color-line);
}
.plan-extra__list dt {
  font-size: 0.94rem;
  letter-spacing: 0.04em;
}
.plan-extra__list dd {
  margin: 0;
  font-size: 0.94rem;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.plan-extra__list dd small {
  display: block;
  font-size: 0.8rem;
  color: var(--color-text-sub);
}
.plan-extra__note {
  margin: 0;
  font-size: 0.88rem;
  line-height: 2.05;
  letter-spacing: 0.04em;
  color: var(--color-text-sub);
}
.plan-extra__note b { color: var(--color-text); font-weight: 500; }

/* -------------------------------------------------------------------------
   料金シミュレーター
   ------------------------------------------
   プロフィール特設サイトと同じ仕組み（金額はHTML側に持たせる）。
   見た目だけ、このページの配色に合わせている。

   ★ 選択肢と見積りを左右に分ける
     選びながら合計が目に入る形にしたい。
     画面が狭いときは縦に積む。
   ------------------------------------------------------------------------- */
.plan-sim {
  max-width: 980px;
  margin: clamp(48px, 8vw, 76px) auto 0;
  padding: clamp(26px, 4.5vw, 40px);
  background: var(--color-bg-sub);
  border-radius: 16px;
}
.plan-sim__title {
  margin: 0 0 10px;
  font-family: var(--font-mincho);
  font-size: clamp(1.15rem, 3.4vw, 1.45rem);
  letter-spacing: 0.08em;
  text-align: center;
}
.plan-sim__lead {
  margin: 0 0 clamp(22px, 4vw, 32px);
  font-size: 0.9rem;
  line-height: 2;
  color: var(--color-text-sub);
  text-align: center;
}

.sim { display: grid; gap: clamp(22px, 4vw, 34px); }
@media (min-width: 900px) {
  .sim { grid-template-columns: minmax(0, 1fr) minmax(0, 320px); align-items: start; }
}

.sim__group { margin: 0 0 22px; padding: 0; border: 0; }
.sim__legend {
  padding: 0;
  margin-bottom: 10px;
  font-size: 0.92rem;
  letter-spacing: 0.06em;
}
.sim__hint {
  margin: 0 0 10px;
  font-size: 0.8rem;
  line-height: 1.9;
  color: var(--color-text-sub);
}
.sim__options { display: flex; flex-wrap: wrap; gap: 8px; }
.sim__option { margin: 0; }
.sim__option input { position: absolute; opacity: 0; width: 0; height: 0; }
.sim__chip {
  display: block;
  padding: 11px 16px;
  font-size: 0.88rem;
  letter-spacing: 0.04em;
  line-height: 1.5;
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color .25s, background .25s;
}
.sim__chip small {
  display: block;
  margin-top: 3px;
  font-size: 0.74rem;
  color: var(--color-text-sub);
}
.sim__option input:checked + .sim__chip {
  border-color: var(--color-accent);
  background: #fff;
  box-shadow: 0 0 0 1px var(--color-accent) inset;
}
.sim__option input:focus-visible + .sim__chip {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.sim__result-inner {
  padding: clamp(20px, 3.5vw, 26px);
  background: #fff;
  border-radius: 12px;
}
@media (min-width: 900px) {
  .sim__result { position: sticky; top: 96px; }
}
.sim__result-label {
  margin: 0 0 6px;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  color: var(--color-text-sub);
}
.sim__total {
  margin: 0 0 16px;
  font-family: var(--font-en);
  font-size: clamp(2rem, 6vw, 2.6rem);
  line-height: 1.1;
  letter-spacing: 0.02em;
}
.sim__breakdown { margin: 0 0 16px; }
.sim__row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  font-size: 0.84rem;
  border-bottom: 1px dotted var(--color-line);
}
.sim__row dd { margin: 0; white-space: nowrap; }
.sim__note {
  margin: 0 0 16px;
  font-size: 0.76rem;
  line-height: 1.9;
  color: var(--color-text-sub);
}
.sim__cta .btn { width: 100%; }
.sim__reset {
  display: block;
  margin: 12px auto 0;
  padding: 6px 14px;
  font-size: 0.78rem;
  color: var(--color-text-sub);
  background: none;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  cursor: pointer;
}

/* パノラマのギャラリー（1枚ずつ大きく、横に送る）
   ------------------------------------------
   ★ 小さく並べても、何が写っているか分からない
     パノラマは4カットを一枚にまとめたもの。縮めると
     中の写真も文字も潰れて、特典の中身が伝わらない。
     1枚を大きく見せて、横に送って見比べる形にする。

   ★ 高さをそろえる
     縦タイプと横タイプで縦横比が違うため、幅ではなく
     高さを決めて並べる。送っている最中に上下が動かない。

   ★ 次の1枚を少し覗かせる
     端で切らずに見せると、まだ続きがあることが伝わる。
   ------------------------------------------------------------------------- */
.panorama-slider { margin-top: clamp(18px, 3vw, 26px); }

/* プラン限定特典の中に置いたとき
   ------------------------------------------------------------
   ★ もともとギャラリー直下（画面いっぱい）に置く前提の指定なので、
     枠の中に入れると左右の余白が二重になる。ここで打ち消す。 */
.plan-bonus .panorama-slider { margin-top: clamp(20px, 3.4vw, 30px); }
.plan-bonus .panorama-slider__track { padding-inline: 0; }
@media (min-width: 1100px) {
  .plan-bonus .panorama-slider__track { padding-inline: 0; }
}
/* 特典枠は画面いっぱいより狭いので、写真の出し方を変える。
   ・スマホ … 幅を枠いっぱいに。縦は縦長、横は横長のまま大きく出す
   ・PC     … 高さを揃えて、縦・横を並べて見比べられるようにする
   横タイプは 1400×768（約1.8:1）なので、高さを揃えると幅がその1.8倍まで
   伸びる。枠からはみ出さない高さに抑えている。 */
.plan-bonus .panorama-slider__item img {
  width: min(78vw, 460px);
  height: auto;
  max-width: none;
}
@media (min-width: 768px) {
  .plan-bonus .panorama-slider__item img {
    width: auto;
    height: min(320px, 30vw);
  }
}

.panorama-slider__track {
  display: flex;
  gap: clamp(14px, 2.4vw, 24px);
  margin: 0;
  padding: 0 var(--gutter, 20px);
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}
.panorama-slider__track::-webkit-scrollbar { display: none; }

.panorama-slider__item {
  flex: 0 0 auto;
  scroll-snap-align: center;
}
.panorama-slider__item figure { margin: 0; }
.panorama-slider__item img {
  display: block;
  width: auto;
  height: clamp(380px, 62vw, 620px);
  /* ★ 横タイプが画面をはみ出さないようにする
       高さだけを決めると、横長の1枚が幅1130pxまで伸びて
       画面に収まらなかった。幅の上限を先に効かせ、
       そのときは高さのほうを縮める。 */
  max-width: min(88vw, 900px);
  object-fit: contain;
  border-radius: 12px;
}
.panorama-slider__item figcaption {
  margin-top: 10px;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  color: var(--color-text-sub);
  text-align: center;
}
.panorama-slider__hint {
  margin: clamp(14px, 2.4vw, 20px) 0 0;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--color-text-sub);
  text-align: center;
}

/* 画面が広いときは、左右に余白を作って中央に寄せる */
@media (min-width: 1100px) {
  .panorama-slider__track { padding-inline: max(var(--gutter, 20px), calc((100vw - 1000px) / 2)); }
}

/* ============================================================
   ヘッダーの撮影メニュー（全プラン共通）
   ------------------------------------------------------------
   ★ このサイトにはハンバーガーが無い。
     狭い画面で隠すと行き先が消えるので、常に出して
     入りきらないぶんは横に送れるようにする。
   ★ いま見ているプランはリンクにせず、色を落として示す。
============================================================ */
.site-header__link,
.lp-header__link {
  display: inline-block;
  font-size: 14px;
  letter-spacing: .04em;
  white-space: nowrap;
  color: inherit;
  text-decoration: none;
}
.site-header__link.is-current,
.lp-header__link.is-current { opacity: .42; }
.lp-header__nav { display: flex; align-items: center; gap: 20px; }

@media (max-width: 1119px) {
  .site-header__inner,
  .lp-header__inner {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 8px;
    align-items: center;
  }
  .site-header__nav,
  .lp-header__nav {
    gap: 16px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
  }
  .site-header__nav::-webkit-scrollbar,
  .lp-header__nav::-webkit-scrollbar { display: none; }
  .site-header__link,
  .lp-header__link { font-size: 12.5px; letter-spacing: .02em; }
}
@media (min-width: 1120px) and (max-width: 1400px) {
  .site-header__nav, .lp-header__nav { gap: 13px; }
  .site-header__link, .lp-header__link { font-size: 12.5px; letter-spacing: .02em; }
}

/* 一覧CSS:ここから */
/* ============================================================
   「0歳から1歳まで」の一覧（写真つきのカード）
   ------------------------------------------------------------
   7つのプランページで共通に使う。
   ★ _build/journey.css が持ち主。
     build-journey.js が、各ページのCSSに印つきで差し込む。
       / * 一覧CSS:ここから * / 〜 / * 一覧CSS:ここまで * /
     ページ側のCSSを直しても、次の実行で入れ替わる。
   ★ 土台の .journey__link は「時系列の縦線」用に flex 横並びで
     組まれている。ここでは写真つきの一覧にするため、
     .journey-list の中だけ組み方を上書きする。
   ★ 写真は添えものなので小さく。文字が主役。
============================================================ */
.journey-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(10px, 1.6vw, 16px);
}
@media (min-width: 620px)  { .journey-list { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .journey-list { grid-template-columns: repeat(3, 1fr); } }

.journey-list .journey { display: block; }
.journey-list .journey__link {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  height: 100%;
  padding: 14px;
  background: var(--color-base);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-photo);
}
.journey-list a.journey__link:hover { opacity: 1; border-color: var(--color-accent); }

.journey-list .journey__thumb {
  flex-shrink: 0;
  width: 104px;
  margin: 0;
  border-radius: 8px;
  overflow: hidden;
}
.journey-list .journey__thumb img {
  display: block;
  width: 100%;
  /* ★ height を auto にしておくこと。
     HTMLに width="560" height="420" と書いてあるため、
     これを消さないと aspect-ratio が効かず、縦に伸びる。
     土台のCSSに img { height:auto } がある作りでは表に出ないが、
     1歳バースデーのCSSには無く、実際に縦420pxで表示された。 */
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.22,.61,.36,1);
}
.journey-list a.journey__link:hover .journey__thumb img { transform: scale(1.05); }

.journey-list .journey__body { flex: 1; min-width: 0; }
.journey-list .journey__age { font-size: 16px; margin-bottom: 3px; }
.journey-list .journey__name { font-size: 15px; margin-bottom: 5px; }
.journey-list .journey__text { font-size: 12px; line-height: 1.8; }
.journey-list a.journey__link .journey__body::after { margin-top: 6px; font-size: 11.5px; }

/* 今ご覧のページ */
.journey-list .journey.is-current .journey__link {
  pointer-events: none;
  background: var(--color-bg-sub);
  border-color: var(--color-accent);
}
.journey-list .journey.is-current .journey__thumb img { opacity: .5; }
.journey__now {
  display: inline-block;
  margin-left: 6px;
  font-size: 10px;
  letter-spacing: .04em;
  color: #fff;
  background: var(--color-accent);
  border-radius: 999px;
  padding: 2px 8px;
  vertical-align: 2px;
  white-space: nowrap;
}

@media (min-width: 768px) {
  .journey-list .journey__link { gap: 14px; padding: 14px; }
  .journey-list .journey__age  { font-size: 16px; }
  .journey-list .journey__text { font-size: 12px; }
}

/* ============================================================
   ほかの撮影をお探しの方へ（公式サイトへの導線）
   ------------------------------------------------------------
   一覧のすぐ下。ページの締めなので、控えめに。
============================================================ */
.sec--outlink { background: var(--color-base); text-align: center; }
.outlink-lead {
  font-size: 13.5px; line-height: 2.05; color: var(--color-text-sub);
  margin-bottom: clamp(22px, 3.2vw, 30px);
}
.outlink-btn { margin-bottom: clamp(18px, 2.6vw, 24px); }
.outlink-note { font-size: 12.5px; color: var(--color-text-sub); }
.outlink-note a { color: var(--color-text); border-bottom: 1px solid var(--color-line); padding-bottom: 2px; }
.outlink-note a:hover { border-color: var(--color-accent); }
.outlink-note span { margin: 0 8px; color: var(--color-line); }
/* 一覧CSS:ここまで */

/* 衣装CSS:ここから */
/* ============================================================
   スタジオの衣装
   ------------------------------------------------------------
   衣装セクション（横に流す）と、/costume/ のページで使う。
   ★ _build/wardrobe.css が持ち主。
     build-costumes.js が、各ページのCSSに印つきで差し込む。
       [ 衣装CSS:ここから ] 〜 [ 衣装CSS:ここまで ]
============================================================ */

/* ---------- スタジオの衣装 ----------
   ★ 328点あるので、店舗ごとに横に流して置く。
     縦に並べるとページが延々と続いてしまう。
   ★ 自動では動かさない。見たい人が自分で動かす。
     着せたい服を探している人にとって、勝手に流れるのは邪魔になる。 */
.sec--wardrobe { background: var(--color-bg-sub); }
.wardrobe-lead {
  font-size: 13.5px; line-height: 2; color: var(--color-text-sub);
  text-align: center; margin-bottom: clamp(28px, 4vw, 42px);
}
.wardrobe-lead b { color: var(--color-text); font-weight: 500; }

.wardrobe { margin-bottom: clamp(30px, 4.4vw, 46px); }
.wardrobe:last-of-type { margin-bottom: 0; }
.wardrobe__head {
  display: flex; align-items: baseline; gap: 12px;
  padding-bottom: 10px; margin-bottom: 14px;
  border-bottom: 1px solid var(--color-line);
}
.wardrobe__name {
  font-family: var(--font-mincho);
  font-size: clamp(16px, 2.2vw, 18px); letter-spacing: .06em;
}
.wardrobe__count { font-size: 12px; color: var(--color-text-sub); }
.wardrobe__count .en { font-size: 15px; color: var(--color-accent-sub); margin-right: 2px; }

/* 横に流す。端で切れていることが分かるよう、右側をぼかす */
.wardrobe__track {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  padding-bottom: 10px;
  /* スクロールバーは細く。消すと動かせることが分からなくなる */
  scrollbar-width: thin;
  scrollbar-color: var(--color-line) transparent;
}
.wardrobe__track::-webkit-scrollbar { height: 6px; }
.wardrobe__track::-webkit-scrollbar-track { background: transparent; }
.wardrobe__track::-webkit-scrollbar-thumb { background: var(--color-line); border-radius: 3px; }

.wardrobe__item {
  flex: 0 0 auto;
  width: clamp(108px, 15vw, 140px);
  margin: 0;
  scroll-snap-align: start;
  cursor: zoom-in;
}
.wardrobe__item img {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 8px;
  background: var(--color-base);
  transition: transform .4s cubic-bezier(.22,.61,.36,1);
}
.wardrobe__item:hover img { transform: scale(1.04); }
.wardrobe__item figcaption {
  margin-top: 6px;
  font-size: 10.5px; line-height: 1.6;
  color: var(--color-text-sub);
  text-align: center;
}

.wardrobe__more { margin-top: 12px; font-size: 12.5px; }
.wardrobe__more a {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--color-text);
  border-bottom: 1px solid var(--color-accent);
  padding-bottom: 3px;
}
.wardrobe-note {
  font-size: 12px; line-height: 1.95; color: var(--color-text-sub);
  text-align: center; margin-top: clamp(24px, 3.4vw, 34px);
}

/* ---------- 店舗ごとの衣装ページ ----------
   ★ ベビーLPの「並べて見る」から開くページ。
     横スクロールでは端まで見るのが大変なので、
     こちらは一度に見渡せるよう並べる。 */
body.is-costume { background: var(--color-base); }
.is-costume .site-header {
  background: rgba(255, 253, 249, 0.94);
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 0 var(--color-line);
}
.sec--costume { padding-top: clamp(96px, 13vw, 130px); }

.cst-crumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: 12px; color: var(--color-text-sub);
  margin-bottom: clamp(20px, 3vw, 30px);
}
.cst-crumb a { color: var(--color-text-sub); border-bottom: 1px solid var(--color-line); padding-bottom: 2px; }
.cst-crumb a:hover { color: var(--color-text); }

.cst-title {
  font-family: var(--font-mincho);
  font-size: clamp(24px, 4.6vw, 34px);
  letter-spacing: .06em; line-height: 1.5;
  margin-bottom: clamp(14px, 2.2vw, 20px);
}
.cst-lead {
  font-size: 13.5px; line-height: 2; color: var(--color-text-sub);
  margin-bottom: clamp(18px, 2.6vw, 24px);
}
.cst-lead b { color: var(--color-text); font-weight: 500; }

/* 内訳。どのサイズが何点あるか、先に分かるように */
.cst-sum { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(30px, 4.4vw, 46px); }
.cst-sum__item {
  display: inline-flex; align-items: baseline; gap: 6px;
  font-size: 12px; letter-spacing: .03em;
  color: var(--color-text-sub);
  background: var(--color-bg-sub);
  border-radius: 999px; padding: 6px 14px;
}
.cst-sum__item b { font-family: var(--font-en); font-size: 14px; color: var(--color-accent-sub); font-weight: 400; }

.cst-group { margin-bottom: clamp(34px, 5vw, 52px); }
.cst-group__head {
  display: flex; align-items: baseline; gap: 12px;
  padding-bottom: 10px; margin-bottom: clamp(14px, 2vw, 18px);
  border-bottom: 1px solid var(--color-line);
}
.cst-group__title { font-family: var(--font-mincho); font-size: clamp(16px, 2.2vw, 19px); letter-spacing: .06em; }
.cst-group__count { font-size: 12px; color: var(--color-text-sub); }
.cst-group__count .en { font-size: 15px; color: var(--color-accent-sub); margin-right: 2px; }

/* 並べる。狭い画面でも3列は確保して、一度に見渡せるようにする */
.cst-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: clamp(8px, 1.4vw, 14px);
}
.cst-grid .wardrobe__item { width: auto; }
/* 品番は見せない（ふつうの衣装は名前を持たない）。
   着ぐるみのように名前があるものだけ、札を出す。 */
.cst-grid .wardrobe__item figcaption { margin-top: 6px; font-size: 11px; text-align: center; color: var(--color-text-sub); }

.cst-note {
  font-size: 12px; line-height: 1.95; color: var(--color-text-sub);
  text-align: center; margin-top: clamp(24px, 3.4vw, 34px);
}
.cst-note a { color: var(--color-text); border-bottom: 1px solid var(--color-accent); }
.cst-foot {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
  margin-top: clamp(28px, 4vw, 40px);
}

/* 5店舗の入口 */
.cst-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(12px, 2vw, 18px); }
@media (min-width: 620px)  { .cst-cards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .cst-cards { grid-template-columns: repeat(3, 1fr); } }
.cst-card a {
  display: flex; align-items: center; gap: 16px; height: 100%;
  background: var(--color-base);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-photo);
  padding: 14px;
  transition: border-color .3s ease, transform .3s ease;
}
.cst-card a:hover { border-color: var(--color-accent); transform: translateY(-2px); }
.cst-card__photo { flex: 0 0 auto; width: 84px; border-radius: 8px; overflow: hidden; }
.cst-card__photo img { display: block; width: 100%; aspect-ratio: 2 / 3; object-fit: cover; }
.cst-card__body { flex: 1; min-width: 0; }
.cst-card__name { display: block; font-family: var(--font-mincho); font-size: 16px; letter-spacing: .05em; margin-bottom: 4px; }
.cst-card__count { display: block; font-size: 12px; color: var(--color-text-sub); margin-bottom: 8px; }
.cst-card__count .en { font-size: 15px; color: var(--color-accent-sub); margin-right: 2px; }
.cst-card__more { display: inline-block; font-size: 12.5px; color: var(--color-text); border-bottom: 1px solid var(--color-accent); padding-bottom: 3px; }
/* 衣装CSS:ここまで */

/* ============================================================
   0〜1歳LPの追加パーツ（共通）
   ------------------------------------------------------------
   土台はハーフバースデーLPの css/style.css。
   そこに無い部品（プランの段組み・比較表・店舗一覧・
   0〜1歳の一覧カード）をここに足す。

   使う側： baby / smash-cake / milk-bath
   組み立て： _build/build-lp.js が
             half-birthday/css/style.css ＋ このファイル
             を連結して各 LP の css/style.css を作る。
   ★ このファイルを直せば3つのLPすべてに反映される。
      各LPの css/style.css を直しても次の実行で上書きされる。
============================================================ */

/* 料金は1つなので、帯は中央に1枚だけ */
.price-strip__list--one { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; }

/* ---------- プランの段組み ---------- */
.plan-step {
  font-family: var(--font-mincho);
  font-size: clamp(16px, 2.2vw, 19px);
  letter-spacing: .08em;
  text-align: center;
  margin: clamp(34px, 5vw, 52px) 0 clamp(14px, 2vw, 18px);
}
.plan-base {
  background: var(--color-bg-sub);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-photo);
  padding: clamp(26px, 4vw, 36px) clamp(20px, 3vw, 30px);
  text-align: center;
}
.plan-base__price { font-size: clamp(30px, 5vw, 40px); line-height: 1.2; }
.plan-base__price span { font-family: var(--font-sans); font-size: 12px; color: var(--color-text-sub); margin-left: 2px; }
.plan-base__sub { font-size: 13px; color: var(--color-text-sub); margin-top: 6px; }
.plan-base__text { font-size: 13px; line-height: 2; color: var(--color-text-sub); margin-top: 14px; }

.plan-included {
  background: var(--color-base);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-photo);
  padding: clamp(24px, 3.6vw, 32px) clamp(18px, 2.6vw, 28px);
}
.plan-included__list { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(16px, 2.4vw, 22px); }
@media (min-width: 760px) { .plan-included__list { grid-template-columns: 1fr 1fr; column-gap: clamp(20px, 3vw, 32px); } }
.plan-included__item { display: flex; align-items: flex-start; gap: 14px; }
.plan-included__item .line-icon { flex-shrink: 0; width: 34px; height: 34px; opacity: .75; }
.plan-included__title { font-size: 14px; font-weight: 500; line-height: 1.7; margin-bottom: 3px; }
.plan-included__text { font-size: 12.5px; line-height: 2; color: var(--color-text-sub); }

.plan-spec {
  background: var(--color-bg-sub);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-photo);
  padding: clamp(24px, 3.6vw, 32px) clamp(18px, 2.6vw, 28px);
}
.plan-spec__row { display: grid; gap: 0; margin: 0 0 clamp(18px, 2.6vw, 24px); }
@media (min-width: 760px) { .plan-spec__row { grid-template-columns: repeat(4, 1fr); } }
.plan-spec__row > div { padding: 12px 0; border-top: 1px solid var(--color-line); text-align: center; }
@media (min-width: 760px) {
  .plan-spec__row > div { border-top: none; border-left: 1px solid var(--color-line); padding: 4px 12px; }
  .plan-spec__row > div:first-child { border-left: none; }
}
.plan-spec__row dt { font-size: 11.5px; letter-spacing: .08em; color: var(--color-accent-sub); margin-bottom: 4px; }
.plan-spec__row dd { margin: 0; font-size: 15px; line-height: 1.6; }
.plan-spec__row dd small { display: block; margin-top: 5px; font-size: 11.5px; line-height: 1.85; color: var(--color-text-sub); }
.plan-spec__two { display: grid; gap: clamp(14px, 2.2vw, 20px); }
@media (min-width: 760px) { .plan-spec__two { grid-template-columns: 1fr 1fr; align-items: start; } }
.plan-spec__card { background: var(--color-base); border: 1px solid var(--color-line); border-radius: 10px; padding: 18px 18px 20px; }
.plan-spec__card-title { font-family: var(--font-mincho); font-size: 15px; letter-spacing: .05em; margin-bottom: 10px; }
.plan-spec__card-lead { font-size: 12px; line-height: 1.9; color: var(--color-text-sub); margin-bottom: 8px; }
.plan-spec__card-note { font-size: 11.5px; line-height: 1.95; color: var(--color-text-sub); margin-top: 10px; }
.plan-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.plan-table th, .plan-table td { padding: 9px 4px; border-bottom: 1px solid var(--color-line); }
.plan-table th { font-weight: 400; color: var(--color-text-sub); white-space: nowrap; text-align: left; }
.plan-table td { text-align: right; }
.plan-table tr:last-child th, .plan-table tr:last-child td { border-bottom: none; }
.plan-steps { list-style: none; margin: 0; padding: 0; counter-reset: n; display: grid; gap: 6px; }
.plan-steps li { counter-increment: n; display: flex; align-items: baseline; gap: 10px; font-size: 12.5px; line-height: 1.85; color: var(--color-text-sub); }
.plan-steps li::before {
  content: counter(n); flex-shrink: 0; width: 20px; height: 20px;
  display: grid; place-items: center; border: 1px solid var(--color-line);
  border-radius: 50%; font-family: var(--font-en); font-size: 11px; color: var(--color-accent-sub);
}
.plan-steps b { color: var(--color-text); font-weight: 500; }

.plan-opt { display: grid; gap: clamp(14px, 2.2vw, 20px); }
@media (min-width: 760px) { .plan-opt { grid-template-columns: 1fr 1fr; align-items: start; } }
.plan-opt__card { background: var(--color-base); border: 1px solid var(--color-line); border-radius: var(--radius-photo); padding: clamp(22px, 3.2vw, 28px); }
.plan-opt__title { font-family: var(--font-mincho); font-size: 16px; letter-spacing: .06em; text-align: center; margin-bottom: 4px; }
.plan-opt__label { font-size: 12px; color: var(--color-text-sub); text-align: center; margin-bottom: 14px; }
.plan-opt__list { margin: 0 0 14px; display: grid; gap: 8px; }
.plan-opt__list > div { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--color-line); }
.plan-opt__list dt { font-size: 13px; }
.plan-opt__list dd { margin: 0; font-size: 15px; white-space: nowrap; }
.plan-opt__text { font-size: 12.5px; line-height: 2; color: var(--color-text-sub); margin-bottom: 10px; }
.plan-opt__text b { color: var(--color-text); font-weight: 500; }
.plan-opt__photo { margin: 0 0 12px; }
.plan-opt__photo img { width: 100%; height: auto; border-radius: 10px; display: block; }
.plan-opt__shop { text-align: center; margin-top: 14px; }

/* ---------- ほかのプランとの違い ---------- */
.diff {
  background: var(--color-bg-sub);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-photo);
  padding: clamp(24px, 3.6vw, 34px) clamp(18px, 2.8vw, 30px);
  margin-top: clamp(30px, 4.6vw, 46px);
}
.diff__title { font-family: var(--font-mincho); font-size: clamp(16px, 2.2vw, 19px); letter-spacing: .08em; text-align: center; margin-bottom: clamp(18px, 2.6vw, 24px); }
.diff__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.diff__table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 13px; background: var(--color-base); border-radius: 10px; overflow: hidden; }
.diff__table th, .diff__table td { padding: 11px 12px; border-bottom: 1px solid var(--color-line); text-align: center; white-space: nowrap; }
.diff__table thead th { font-size: 11.5px; font-weight: 400; letter-spacing: .06em; color: var(--color-accent-sub); background: var(--color-bg-sub); }
.diff__table tbody th { text-align: left; font-weight: 400; }
.diff__table tbody td { color: var(--color-text-sub); }
.diff__table tr:last-child th, .diff__table tr:last-child td { border-bottom: none; }
.diff__table .is-this th, .diff__table .is-this td { background: #F3EBE9; color: var(--color-text); font-weight: 500; }

.diff__exclude { background: var(--color-base); border: 1px solid var(--color-line); border-radius: 10px; padding: 20px 20px 22px; margin-top: clamp(18px, 2.6vw, 24px); }
.diff__exclude-title { font-family: var(--font-mincho); font-size: 15px; letter-spacing: .05em; margin-bottom: 8px; }
.diff__exclude-text { font-size: 12.5px; line-height: 1.95; color: var(--color-text-sub); margin-bottom: 14px; }
.diff__exclude-text b { color: var(--color-text); font-weight: 500; }
.diff__exclude-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
@media (min-width: 600px) { .diff__exclude-list { grid-template-columns: 1fr 1fr; } }
.diff__exclude-list li { display: flex; align-items: baseline; gap: 10px; font-size: 12.5px; line-height: 1.85; padding-left: 20px; position: relative; }
.diff__exclude-list li::before { content: '\00d7'; position: absolute; left: 0; color: var(--color-accent-sub); }
.diff__exclude-list b { font-weight: 500; white-space: nowrap; }
.diff__exclude-list span { color: var(--color-text-sub); }
.diff__exclude-note { font-size: 12px; line-height: 1.95; color: var(--color-text-sub); margin-top: 14px; }
.diff__exclude-note a { color: var(--color-text); border-bottom: 1px solid var(--color-accent); }

/* ---------- 店舗一覧 ---------- */
.studio-lead { font-size: 13.5px; line-height: 2; color: var(--color-text-sub); text-align: center; margin-bottom: clamp(26px, 4vw, 40px); }
.studio-lead b { color: var(--color-text); font-weight: 500; }
.studio-list { display: grid; gap: clamp(14px, 2.2vw, 20px); list-style: none; margin: 0; padding: 0; }
@media (min-width: 700px)  { .studio-list { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .studio-list { grid-template-columns: repeat(3, 1fr); } }
.studio-card { background: var(--color-base); border: 1px solid var(--color-line); border-radius: var(--radius-photo); padding: clamp(20px, 3vw, 26px); display: flex; flex-direction: column; }
.studio-card__name { font-family: var(--font-mincho); font-size: clamp(16px, 2.2vw, 18px); letter-spacing: .06em; padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid var(--color-line); }
.studio-card__spec { margin: 0 0 16px; display: grid; gap: 9px; }
.studio-card__spec > div { display: grid; grid-template-columns: 4.5em 1fr; gap: 10px; align-items: baseline; }
.studio-card__spec dt { font-size: 11.5px; letter-spacing: .06em; color: var(--color-accent-sub); }
.studio-card__spec dd { margin: 0; font-size: 12.5px; line-height: 1.85; color: var(--color-text-sub); }
.studio-card__spec dd a { color: var(--color-text); border-bottom: 1px solid var(--color-line); }
.studio-card__more { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; font-size: 12.5px; color: var(--color-text); border-bottom: 1px solid var(--color-accent); padding-bottom: 3px; }
.studio-note { font-size: 12.5px; line-height: 1.9; color: var(--color-text-sub); text-align: center; margin-top: clamp(20px, 3vw, 28px); }

/* ---------- 0歳〜1歳の一覧にサムネイル ---------- */

/* 店舗カードの外観写真
   ★ 旧ページにあった5店舗の外観写真（location_01〜05.jpg）を引き継ぐ。
     道に迷わないための手がかりなので、大きくはせず帯状に。 */
.studio-card__photo {
  margin: calc(clamp(20px, 3vw, 26px) * -1) calc(clamp(20px, 3vw, 26px) * -1) clamp(16px, 2.2vw, 20px);
  border-radius: var(--radius-photo) var(--radius-photo) 0 0;
  overflow: hidden;
}
.studio-card__photo img {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 1;
  object-fit: cover;
}