/* =====================================================================
   各プランページ (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;
  height: 786px;
}

.pp-fv__photo {
  position: absolute;
  left: -96px;
  top: -112px;
  width: 598px;
  height: 898px;
  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;
  top: 431px;
  width: 368px;
  height: 374px;
}
.pp-fv__decor-red img { width: 100%; height: 100%; }

.pp-fv__title {
  position: absolute;
  left: 87px;
  top: 445px;
  width: 300px;
  font-family: var(--font-pocchi);
  font-weight: 400;
  font-size: 62px;
  line-height: 1.25;
  letter-spacing: 8px;
  color: #fff;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.28);
}

.pp-fv__subtitle {
  position: absolute;
  left: 199px;
  top: 560px;
  width: 174px;
  font-family: var(--font-zenmaru);
  font-weight: 500;
  font-size: 13px;
  line-height: 1.55;
  color: #fff;
  text-align: right;
}

.pp-fv__desc {
  position: absolute;
  left: 13px;
  top: 618px;
  width: 344px;
  font-family: var(--font-zenmaru);
  font-weight: 500;
  font-size: 11px;
  line-height: 1.95;
  color: #fff;
}

.pp-fv__cta {
  position: absolute;
  left: 34px;
  top: 637px;
  width: 251px;
  height: 52px;
}

/* クリーム色のピルボタン（料金プランへ） */
.pp-pill-btn {
  position: absolute;
  left: 62px;
  top: 0;
  width: 189px;
  height: 51px;
  border-radius: 26px;
  background: #fcf5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.pp-pill-btn__label {
  font-family: var(--font-zenmaru);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 1px;
  color: #e09358;
}

.pp-pill-btn__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  font-size: 13px;
  line-height: 1;
  color: #e09358;
}

/* FV 内の LINE ボタン（style.css の .line-cta を流用し位置だけ上書き） */
.pp-fv__cta .line-cta {
  left: 0;
  top: 3px;
  bottom: auto;
}

/* =============== プラン紹介 =============== */
.pp-intro {
  position: relative;
  width: 390px;
  height: 338px;
  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%; }

.pp-intro__lead {
  position: absolute;
  left: 97px;
  top: 0;
  width: 210px;
  z-index: 3;
  font-family: var(--font-zenmaru);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 1px;
  color: #fff;
  text-align: center;
  white-space: nowrap;
}

.pp-intro__slide {
  position: absolute;
  left: 0;
  top: 28px;
  width: 390px;
  height: 205px;
  overflow: hidden;
  z-index: 2;
}

.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: absolute;
  left: 17px;
  top: 250px;
  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: absolute;
  left: 17px;
  top: 288px;
  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;
  height: 481px;
  margin-top: 66px;
}

.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: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 2;
  font-family: var(--font-kurumilk);
  font-size: 15px;
  letter-spacing: 2px;
  color: #000;
  text-align: center;
}

.pp-gallery__grid {
  position: absolute;
  left: 3px;
  top: 44px;
  width: 383px;
  height: 383px;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, 126px);
  grid-template-rows: repeat(3, 126px);
  gap: 3px;
}

.pp-gallery__card {
  display: block;
  width: 126px;
  height: 126px;
  border-radius: 8px;
  background: #d9d9d9;
}

.pp-gallery__link {
  position: absolute;
  left: 0;
  right: 0;
  top: 455px;
  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: 110px 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;
  height: 1245px;
  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: absolute;
  left: 0;
  right: 0;
  top: 0;
  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: absolute;
  left: 0;
  width: 299px;
  height: 387px;
  z-index: 2;
  border-radius: 24px;
  background: #fcfafa;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
}

.pp-card:nth-of-type(1) { top: 55px; }
.pp-card:nth-of-type(2) { top: 456px; }
.pp-card:nth-of-type(3) { top: 858px; }

.pp-card--featured {
  border: 2px solid #4a9ec6;
}

.pp-card__catch {
  position: absolute;
  left: 0;
  right: 0;
  top: 14px;
  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: absolute;
  left: 16px;
  top: 37px;
  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.5px;
  color: #fff;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.35);
  white-space: nowrap;
}

/* ---- プラン情報アイコン列 ---- */
.pp-card__specs {
  position: absolute;
  left: 46px;
  top: 251px;
  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__box--lg {
  width: 53px;
  height: 53px;
  border-radius: 11px;
}

.pp-spec__glyph {
  width: 19px;
  height: auto;
  margin-bottom: 5px;
}
.pp-spec__box--lg .pp-spec__glyph {
  width: 22px;
  margin-bottom: 7px;
}

.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__box--lg .pp-spec__label {
  bottom: 7px;
  font-size: 6px;
}

.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: static;
}

.pp-card__detail {
  position: absolute;
  left: 24px;
  top: 344px;
  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;
}

.pp-card__price {
  position: absolute;
  right: 18px;
  top: 334px;
  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;
}

.pp-sim__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 252px;
  height: 52px;
  padding: 0 14px 0 24px;
  border-radius: 26px;
  background: #6aaecd;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.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;
}