/* =====================================================================
   各プランページ (plan.html) 専用スタイル
   - style.css の後に読み込む
   - ルート `.plan-page` スコープ + `pp-` 接頭辞で TOP ページのルールと
     名前空間を分けているため、既存スタイルとは衝突しない
   - レイアウトは通常フロー（section を margin-top で積む）。
     セクション内部の装飾配置のみ絶対配置を使用
   ===================================================================== */

/* フッターは TOP ページ用に margin-top:-33px が入っているので打ち消す */
.plan-page .footer {
  margin-top: 101px;
}

/* =============== FV（ヒーロー） =============== */
.pp-fv {
  position: relative;
  width: 390px;
  /* 高さは .pp-fv__body（タイトル〜説明文）で決まる。
     padding は、写真の上に文字を載せる位置をデザイン通りに保つためのもの */
  padding: 445px 0 104px;
}

.pp-fv__photo {
  position: absolute;
  left: -96px;
  top: -112px;
  bottom: 0;
  width: 598px;
  overflow: hidden;
}
.pp-fv__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pp-fv__decor-red-top {
  position: absolute;
  left: -16px;
  top: -11px;
  width: 59px;
  height: 56px;
}
.pp-fv__decor-red-top img { width: 100%; height: 100%; }

.pp-fv__decor-red {
  position: absolute;
  left: 139px;
  bottom: -19px;
  width: 368px;
  height: 374px;
}
.pp-fv__decor-red img { width: 100%; height: 100%; }

/* タイトル〜説明文をひとかたまりにして積み上げる。
   個別に top を指定していると、文字量が増えたとき互いに重なってしまうため */
.pp-fv__body {
  position: relative;
  width: 390px;
  z-index: 2;
}

.pp-fv__title {
  position: relative;
  /* 2026-09-17 金田さん指定で、全プラン左30pxに統一（デザインの七五三は87px） */
  margin: 0 0 0 30px;
  width: 300px;
  font-family: var(--font-pocchi);
  font-weight: 400;
  /* 2026-09-17 金田さん指定で、全プラン50pxに統一（デザインの七五三は62px）。
     長い名前は1行に収めず、build-plans.js の fvTitle で改行する */
  font-size: 50px;
  line-height: 1.25;
  /* 2026-09-17 金田さん指定で 0（デザインは 8px） */
  letter-spacing: 0;
  color: #fff;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.28);
  white-space: nowrap;
}

/* 以前は文字数ごとに大きさを変えていた（.pp-fv__title--len4〜7）。
   大きさを50pxに統一したのでルールは消した。クラス自体は build-plans.js が
   まだ付けているので、文字数で調整したくなったらここに書けば効く */

.pp-fv__subtitle {
  position: relative;
  margin: 37px 0 0 199px;
  width: 174px;
  font-family: var(--font-zenmaru);
  /* 2026-09-17 金田さん指定で太字（デザインは 500） */
  font-weight: 700;
  font-size: 13px;
  line-height: 1.55;
  color: #fff;
  text-align: right;
}

.pp-fv__desc {
  position: relative;
  margin: 18px 0 0 13px;
  width: 344px;
  font-family: var(--font-zenmaru);
  font-weight: 500;
  font-size: 11px;
  line-height: 1.95;
  color: #fff;
}

/* =============== プラン紹介 =============== */
.pp-intro {
  position: relative;
  width: 390px;
  margin-top: -29px;
}

.pp-intro__decor-beige {
  position: absolute;
  left: -120px;
  top: -69px;
  width: 354px;
  height: 431px;
  z-index: 0;
}
.pp-intro__decor-beige img { width: 100%; height: 100%; }

/* デザインではスライドの上に白文字のリード（「家族の思い出になる七五三を。」）が
   あったが、見出しと役割が重なるので削除した（2026-09-17）。
   リードの高さ21px＋元の余白7pxを、そのままスライドの上余白にして、
   スライドがFV写真に食い込まないようにしている */
.pp-intro__slide {
  position: relative;
  margin-top: 28px;
  width: 390px;
  height: 205px;
  overflow: hidden;
  z-index: 2;
}

/* 横スクロールできることを示す両矢印。デザインには入っているが、
   TOPページの同じ矢印（.brand-msg__line）を非表示にする判断をしているので、
   ここも揃えて display:none にしてある。出す場合は両方の display を外す。 */
.pp-intro__slide-arrow {
  position: absolute;
  left: 50%;
  bottom: 10px;
  width: 96px;
  transform: translateX(-50%);
  z-index: 3;
  display: none;
}
.pp-intro__slide-arrow img { width: 100%; height: auto; }

.pp-intro__track {
  display: flex;
  align-items: center;
  width: max-content;
  height: 100%;
  animation: ppIntroScroll 26s linear infinite;
}

.pp-intro__photo {
  height: 100%;
  flex-shrink: 0;
  object-fit: cover;
}
.pp-intro__photo--wide { width: 310px; }
.pp-intro__photo--narrow { width: 137px; }

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

.pp-intro__heading {
  position: relative;
  margin: 17px 0 0 17px;
  width: 356px;
  z-index: 2;
  font-family: var(--font-zenmaru);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.4px;
  color: var(--dark);
  white-space: nowrap;
}

.pp-intro__body {
  position: relative;
  margin: 14px 0 0 17px;
  width: 373px;
  z-index: 2;
  font-family: var(--font-zenmaru);
  font-weight: 500;
  font-size: 11px;
  line-height: 1.85;
  color: var(--dark);
  white-space: nowrap;
}

/* =============== フォトギャラリー =============== */
.pp-gallery {
  position: relative;
  width: 390px;
  /* intro が実際の高さ（349px）になった分、間隔を保つため 66 → 55 */
  margin-top: 55px;
}

.pp-gallery__decor-red {
  position: absolute;
  left: -165px;
  top: 244px;
  width: 310px;
  height: 315px;
  z-index: 0;
}
.pp-gallery__decor-red img { width: 100%; height: 100%; }

.pp-gallery__title {
  position: relative;
  z-index: 2;
  font-family: var(--font-kurumilk);
  font-size: 15px;
  letter-spacing: 2px;
  color: #000;
  text-align: center;
}

.pp-gallery__grid {
  position: relative;
  margin: 29px 0 0 3px;
  width: 383px;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, 126px);
  /* 写真の枚数がプランごとに違う（最大9枚）ので、段数は中身に合わせる。
     以前は高さ383px・3段固定で、写真が少ないと空の段が残った */
  grid-auto-rows: 126px;
  gap: 3px;
}

.pp-gallery__card {
  display: block;
  width: 126px;
  height: 126px;
  border-radius: 8px;
  background: #d9d9d9;
  overflow: hidden;
}
.pp-gallery__card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pp-gallery__link {
  position: relative;
  display: block;
  margin-top: 28px;
  z-index: 2;
  font-family: var(--font-zenmaru);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 1px;
  color: var(--dark);
  text-align: center;
}

/* =============== 他ページへの導線ボタン =============== */
.pp-links {
  position: relative;
  width: 327px;
  height: 45px;
  margin: 115px auto 0;
  display: flex;
  justify-content: space-between;
}

.pp-links__btn {
  width: 151px;
  height: 45px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-zenmaru);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.5px;
  color: #fff;
  text-align: center;
}

.pp-links__btn--red { background: var(--pink); }
.pp-links__btn--green { background: #55b47a; }

/* =============== 料金プラン =============== */
.pp-plans {
  position: relative;
  width: 300px;
  margin: 142px auto 0;
}

.pp-plans__decor {
  position: absolute;
  z-index: 0;
}
.pp-plans__decor img { width: 100%; height: 100%; }

.pp-plans__decor--beige1 {
  left: 129px;
  top: 0;
  width: 354px;
  height: 431px;
}
.pp-plans__decor--red1 {
  left: -188px;
  top: 693px;
  width: 310px;
  height: 315px;
}
.pp-plans__decor--beige2 {
  left: 129px;
  top: 1262px;
  width: 354px;
  height: 431px;
}

.pp-plans__lead {
  position: relative;
  z-index: 2;
  font-family: var(--font-zenmaru);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 1.5px;
  color: var(--pink);
  text-align: center;
}

/* ---- プランカード ---- */
.pp-card {
  position: relative;
  margin-top: 14px;
  width: 299px;
  /* 上下の余白は padding で持つ（最初の子の margin-top が親と相殺するのを防ぐ）。
     価格行はデザイン上カード下端からの距離が一定なので、縦フレックスで下に寄せる。
     min-height はデザイン上の高さ。仕様アイコンが増えて中身が超えたら伸びる。 */
  display: flex;
  flex-direction: column;
  min-height: 387px;
  padding: 14px 0 21px;
  /* 枠は常に確保しておき色だけ切り替える（付いた瞬間にガタつかせないため） */
  border: 2px solid transparent;
  transition: border-color 0.2s ease;
  z-index: 2;
  border-radius: 24px;
  background: #fcfafa;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
}

.pp-card:first-of-type { margin-top: 34px; }

/* デザインで青枠が付いているのはホバー状態の表現なので、常時ではなく
   PCはマウスオーバー、スマホは指が触れている間だけ出す。
   @media (hover: hover) で切り分けて、タッチ端末に hover が残るのを避ける。 */
@media (hover: hover) {
  .pp-card:hover {
    border-color: #4a9ec6;
  }
}
.pp-card.is-touched {
  border-color: #4a9ec6;
}
/* 選択中のプランは青枠を出しっぱなしにする（ホバーと同じ表現を流用） */
.pp-card.is-selected {
  border-color: #4a9ec6;
}
/* カードは押せるので、それが分かるように */
.pp-card[role="button"] {
  cursor: pointer;
}

.pp-card__catch {
  position: relative;
  font-family: var(--font-zenmaru);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.5px;
  color: var(--dark);
  text-align: center;
}

.pp-card__photo {
  position: relative;
  margin: 6px 0 0 16px;
  width: 267px;
  height: 198px;
  border-radius: 24px;
  overflow: hidden;
}
.pp-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pp-card__name {
  position: absolute;
  left: 16px;
  bottom: 11px;
  font-family: var(--font-pocchi);
  font-size: 21px;
  letter-spacing: 0;
  color: #fff;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.35);
  white-space: nowrap;
}
/* 写真の幅に収まらない長い名前は2行にする（plans-data.js の cardName）。
   下端の位置はそのままで、上に1行ぶん伸びる */
.pp-card__name--2line {
  line-height: 1.2;
}

/* ---- プラン情報アイコン列 ---- */
.pp-card__specs {
  position: relative;
  margin: 16px 0 0 46px;
  width: 209px;
  list-style: none;
  display: flex;
  align-items: flex-start;
  gap: 11px;
}

.pp-spec {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 41px;
}
.pp-spec--wide { width: 54px; }

.pp-spec__box {
  position: relative;
  width: 41px;
  height: 41px;
  border-radius: 9px;
  background: rgba(148, 113, 94, 0.67);
  display: flex;
  align-items: center;
  justify-content: center;
}
.pp-spec__glyph {
  width: 19px;
  height: auto;
  margin-bottom: 5px;
}
.pp-spec__label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 5px;
  font-family: var(--font-zenmaru);
  font-weight: 500;
  font-size: 5px;
  letter-spacing: 0.2px;
  color: #fff;
  text-align: center;
}
.pp-spec__value {
  font-family: var(--font-zenmaru);
  font-weight: 700;
  font-size: 11px;
  line-height: 1.3;
  color: var(--dark);
  text-align: center;
  white-space: nowrap;
}
.pp-spec__value small {
  font-size: 8px;
  font-weight: 500;
}
/* フォト商品は2行になるので少し詰める */
.pp-spec--wide .pp-spec__value {
  font-size: 10px;
  line-height: 1.25;
}

/* ---- カード下部（詳細ボタン + 料金） ---- */
/* 詳細ボタン・料金は Figma の座標どおり絶対配置
   （アイコン列の行数がカードごとに違うため、フローで並べると干渉する） */
/* 詳細ボタンと価格を載せる帯。高さは中の要素で決める */
.pp-card__foot {
  position: relative;
  margin-top: auto;
  height: 32px;
}

.pp-card__detail {
  position: absolute;
  left: 24px;
  top: 10px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #a49a97;
  color: #fff;
  font-family: var(--font-zenmaru);
  font-weight: 700;
  font-size: 12px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;

  /* ★ 押しても何も起きないので、いまは隠してある。
     中身（プランの詳細説明）が決まったらこの1行を消す。
     絶対配置なので、消えても金額の位置は動かない */
  display: none;
}

/* コースごとの注意書き。PDFに条件つきで書かれているものだけ出る */
.pp-card__note {
  margin: 10px 18px 0 24px;
  font-family: var(--font-zenmaru);
  font-weight: 500;
  font-size: 10px;
  line-height: 1.6;
  color: #8b807c;
}

/* 全プラン共通の注意書き。カードの並びの下に1つだけ置く */
.pp-plans__note {
  position: relative;
  z-index: 2;
  margin: 22px auto 0;
  width: 291px;
  list-style: none;
  font-family: var(--font-zenmaru);
  font-weight: 500;
  font-size: 11px;
  line-height: 1.7;
  color: #8b807c;
}
.pp-plans__note li {
  padding-left: 1em;
  text-indent: -1em;
}
.pp-plans__note li::before {
  content: '※';
}

.pp-card__price {
  position: absolute;
  right: 18px;
  top: 0;
  font-family: var(--font-zenmaru);
  font-weight: 700;
  font-size: 25px;
  line-height: 1;
  letter-spacing: 0.5px;
  color: var(--pink);
  white-space: nowrap;
}
.pp-card__yen { font-size: 13px; }
.pp-card__tax { font-size: 10px; font-weight: 500; }

/* =============== シミュレーションCTA =============== */
.pp-sim {
  position: relative;
  width: 252px;
  height: 52px;
  margin: 79px auto 0;
}

/* デザインでは白い縁とドロップシャドウが付いていて、下地がうっすら透ける。
   （書き出し画像で確認: 縁は約1pxの白、影は上下に5〜7px広がる） */
.pp-sim__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 252px;
  height: 52px;
  padding: 0 14px 0 24px;
  border: 1px solid #fff;
  border-radius: 26px;
  background: #6aaecd;
  opacity: 0.9;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.18);
  transition: opacity 0.2s ease;
}

/* プラン未選択のあいだは押せない。
   pointer-events で無効化し、キーボードでも拾わないよう tabindex は JS 側で -1 にする */
.pp-sim__btn.is-disabled {
  opacity: 0.45;
  pointer-events: none;
}

.pp-sim__label {
  font-family: var(--font-zenmaru);
  font-weight: 700;
  font-size: 13px;
  line-height: 1.35;
  letter-spacing: 0.5px;
  color: #fff;
}

.pp-sim__arrow {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff;
  color: #6aaecd;
  font-size: 14px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}