/* ==========================================================================
   plan-pc.css — 各プランページ (/plan/〇〇/) の PC・横長画面用
   <link media="(min-width: 1024px)"> で読み込む。方針は common-pc.css の冒頭を参照。

   - FV … 左に赤いいびつな丸とプラン名・キャッチ・説明文、右に縦長の写真（2026-09-17 金田さんと決定）
   - プラン紹介 … 写真の帯は横いっぱい、見出しと本文は中央
   - フォトギャラリー … 正方形の写真を1段5枚まで、中央寄せで並べる
   - 料金プラン … カードを横に並べる（プランによって1〜3枚）。カードの中身はスマホ版の寸法のまま拡大
   ========================================================================== */

.plan-page .footer {
  margin-top: 150px;
}

/* =============== FV（ヒーロー） =============== */
.pp-fv {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(380px, 36vw, 480px);
  align-items: center;
  column-gap: clamp(40px, 6vw, 90px);
  width: min(1100px, calc(100% - 2 * var(--pc-gutter)));
  margin: 60px auto 0;
  padding: 0;
}

.pp-fv__photo {
  position: relative;
  left: auto;
  top: auto;
  bottom: auto;
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  aspect-ratio: 2 / 3;
  border-radius: 32px;
  z-index: 1;
}

/* 赤いいびつな丸は、文字の後ろに大きく敷く */
.pp-fv__decor-red {
  left: -150px;
  top: 50%;
  bottom: auto;
  width: 740px;
  height: 752px;
  transform: translateY(-50%);
}
/* 小さい赤い丸は、写真の右上の角に */
.pp-fv__decor-red-top {
  left: auto;
  right: -34px;
  top: -30px;
  width: 104px;
  height: 99px;
  z-index: 2;
}

.pp-fv__body {
  grid-column: 1;
  grid-row: 1;
  width: auto;
  padding-left: 30px;
}
.pp-fv__title {
  margin: 0;
  width: auto;
  font-size: clamp(56px, 5.2vw, 76px);
  line-height: 1.2;
}
.pp-fv__subtitle {
  margin: 34px 0 0;
  width: auto;
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.6;
  letter-spacing: 1px;
  text-align: left;
}
.pp-fv__desc {
  margin: 24px 0 0;
  width: auto;
  font-size: clamp(14px, 1.2vw, 17px);
  line-height: 2;
  letter-spacing: 0.5px;
}

/* =============== プラン紹介 =============== */
.pp-intro {
  width: 100%;
  margin-top: 130px;
}
.pp-intro__decor-beige {
  left: max(0px, calc((100% - var(--pc-content)) / 2));
  top: -90px;
  width: 440px;
  height: 536px;
}
.pp-intro__slide {
  margin-top: 0;
  width: 100%;
  height: clamp(300px, 26vw, 400px);
}
/* 帯が高くなったぶん写真も大きくなる。スマホ版と同じ縦横比（310:205 / 137:205）のまま */
.pp-intro__photo--wide { width: auto; aspect-ratio: 310 / 205; }
.pp-intro__photo--narrow { width: auto; aspect-ratio: 137 / 205; }
.pp-intro__track { animation-duration: 50s; }

.pp-intro__heading {
  margin: 56px auto 0;
  width: auto;
  font-size: clamp(24px, 2.1vw, 30px);
  letter-spacing: 2px;
  text-align: center;
}
.pp-intro__body {
  margin: 26px auto 0;
  width: auto;
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 2.1;
  letter-spacing: 0.5px;
  text-align: center;
}

/* =============== フォトギャラリー =============== */
.pp-gallery {
  width: min(1100px, calc(100% - 2 * var(--pc-gutter)));
  margin: 140px auto 0;
}
.pp-gallery__decor-red {
  left: -140px;
  top: 40%;
  width: 400px;
  height: 406px;
}
.pp-gallery__title {
  font-size: 30px;
  letter-spacing: 4px;
}
.pp-gallery__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin: 44px 0 0;
  width: 100%;
}
.pp-gallery__card {
  width: calc((100% - 4 * 16px) / 5);
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
}
.pp-gallery__card img { transition: transform 0.4s ease; }
.pp-gallery__card:hover img { transform: scale(1.05); }
.pp-gallery__link {
  margin-top: 40px;
  font-size: 18px;
}
.pp-gallery__link:hover { color: var(--brown); }

/* =============== 他ページへの導線ボタン =============== */
.pp-links {
  width: 700px;
  height: 64px;
  margin-top: 110px;
}
.pp-links__btn {
  width: 330px;
  height: 64px;
  border-radius: 14px;
  font-size: 17px;
  letter-spacing: 1px;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.pp-links__btn:hover { opacity: 0.88; transform: translateY(-2px); }

/* =============== 料金プラン =============== */
/* カードを横に並べる。見出しと注意書きは1行ぶん使う */
.pp-plans {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  column-gap: clamp(28px, 3vw, 48px);
  width: min(1200px, calc(100% - 2 * var(--pc-gutter)));
  margin-top: 150px;
}
.pp-plans__lead {
  flex: 0 0 100%;
  font-size: 22px;
  letter-spacing: 2px;
}
/* カードの中身はスマホ版の寸法（幅299px）で組んであるので、丸ごと拡大する */
.pp-card,
.pp-card:first-of-type {
  margin-top: 36px;
  zoom: 1.2;
}

.pp-plans__decor--beige1 {
  left: auto;
  right: -60px;
  top: -80px;
  width: 440px;
  height: 536px;
}
.pp-plans__decor--red1 {
  left: -120px;
  top: 45%;
  width: 380px;
  height: 386px;
}
.pp-plans__decor--beige2 { display: none; }

.pp-plans__note {
  flex: 0 0 auto;
  width: fit-content;
  max-width: 100%;
  margin: 44px auto 0;
  font-size: 14px;
  line-height: 1.9;
}
/* flex の中で1行を占有させる（width: fit-content のまま中央に置くため） */
.pp-plans::after {
  content: '';
  order: 1;
  flex: 0 0 100%;
}
.pp-plans__note { order: 2; }

/* =============== シミュレーションCTA =============== */
.pp-sim {
  width: 380px;
  height: 72px;
  margin-top: 90px;
}
.pp-sim__btn {
  width: 380px;
  height: 72px;
  padding: 0 18px 0 36px;
  border-radius: 36px;
}
.pp-sim__label { font-size: 18px; }
.pp-sim__arrow {
  width: 40px;
  height: 40px;
  font-size: 18px;
}
.pp-sim__btn:not(.is-disabled):hover { opacity: 1; }

/* 横に並べると、注意書き（.pp-card__note）のあるカードと無いカードで金額の高さがずれる。
   注意書きの場所を3行ぶん確保し、無いカードには同じ高さの空きを置いて揃える */
.pp-card__note { min-height: calc(3 * 1.6em); }
.pp-card:not(:has(.pp-card__note))::after {
  content: '';
  display: block;
  margin-top: 10px;
  min-height: 48px; /* 10px × 1.6 × 3行 */
}

/* 狭めの PC（〜1279px）では、3枚が1列に収まるよう拡大をやめて間隔を詰める */
@media (max-width: 1279px) {
  .pp-plans {
    column-gap: 20px;
    width: calc(100% - 40px);
  }
  .pp-card,
  .pp-card:first-of-type { zoom: 1; }
}