/* ============================================================
   スタジオノーブレム｜ハーフバースデーフォト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; } }

/* ---------- 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つの宝物 ---------- */
.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;
}
.plan-list {
  display: grid;
  gap: clamp(40px, 8vw, 56px);
}
@media (min-width: 900px) {
  .plan-list { grid-template-columns: 1fr 1fr 1.15fr; gap: 30px; align-items: start; }
}
.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; } }

/* ---------- SECTION 9｜撮影の流れ ---------- */
.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; } }

/* ---------- 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; }
.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 の % が効かない）。
   このLPの写真は横位置のため、そのままだと写真が低く、下に大きな余白ができる。

   写真に決め打ちの高さを入れると、端末によって文字が下からはみ出す。
   そこで逆に、文字は中身のぶんだけ取り、余ったぶんを写真が受け持つようにする。
   こうすれば画面の高さがいくつでも、ちょうど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); }

/* ============================================================
   ヘッダーの撮影メニュー（全プラン共通）
   ------------------------------------------------------------
   ★ このサイトにはハンバーガーが無い。
     狭い画面で隠すと行き先が消えるので、常に出して
     入りきらないぶんは横に送れるようにする。
   ★ いま見ているプランはリンクにせず、色を落として示す。
============================================================ */
.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:ここまで */