@charset "UTF-8";
/* ==========================================================================
   plan.css — PLANページ固有のセクション

   レイアウト方式: 通常のレスポンシブ（%・flex/grid・clamp()・メディアクエリ）。
   1920px の等比縮小（zoom）は使わない（.currentPage.js-fluid）。
   数値は fig の 1920px 版面での値を起点に、画面幅へ追従させてある。
   ========================================================================== */

/* ==========================================================================
   p-pln-hero — PLAN メインビジュアル
   ========================================================================== */

.p-pln-hero {
  position: relative;
  width: 100%;
  height: var(--vph, 100vh);
  overflow: hidden;
  background: rgb(222,221,219);
}

.p-pln-hero__img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: luminosity;
}

.p-pln-hero__div {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.8;
  mix-blend-mode: multiply;
  background: linear-gradient(114.325deg, rgb(132,127,120) 10.77%, rgb(49,46,41) 96.87%);
}

.p-pln-hero__div-2 {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  gap: 13px;
  align-items: center;
  white-space: nowrap;
}

.p-pln-hero__div-3 {
  font-family: 'Cormorant Infant', ui-serif, Georgia, serif;
  font-weight: 400;
  font-size: clamp(56px, 5.21vw, 100px);
  line-height: 0.75;
  text-align: center;
  padding-bottom: 8px;
  background: linear-gradient(90deg, rgb(154,153,131) 0%, rgb(218,215,203) 50%, rgb(154,153,131) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.p-pln-hero__div-4 {
  font-family: 'YakuHanMP', 'Shippori Mincho B1', serif;
  font-weight: 600;
  font-size: 24px;
  line-height: 31px;
  text-align: center;
  padding-bottom: 4px;
  background: linear-gradient(90deg, rgb(154,153,131) 0%, rgb(218,215,203) 50%, rgb(154,153,131) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}


/* ==========================================================================
   p-pln-intro — PLANNING 導入＋PLAN GRADE
   ========================================================================== */

.p-pln-intro {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  padding: clamp(96px, 9.79vw, 188px) clamp(24px, 8.33vw, 160px) clamp(72px, 5.63vw, 108px);
  background: linear-gradient(180.65deg, rgb(222,221,219) 9.5%, rgb(219,217,213) 88.8%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
}

.p-pln-intro__head {
  display: flex;
  flex-direction: column;
  gap: 68px;
  align-items: center;
}

.p-pln-intro__kicker {
  font-family: 'Cormorant Infant', ui-serif, Georgia, serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 0.75;
  text-align: center;
  color: rgb(48,47,34);
}

.p-pln-intro__h2 {
  margin: 0;
  font-family: 'YakuHanMP', 'Shippori Mincho B1', serif;
  font-weight: 600;
  font-size: 50px;
  line-height: 67px;
  text-align: center;
  padding-bottom: 6px;
  background: linear-gradient(90deg, rgb(44,43,31) 0%, rgb(136,134,105) 50%, rgb(44,43,31) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.p-pln-intro__p {
  margin: 0;
  font-family: 'YakuHanMP', 'Shippori Mincho B1', serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 37px;
  letter-spacing: 0.01em;
  text-align: center;
  color: rgb(48,47,34);
}

/* ---- 合計14タイプの内訳（見出しの左右に髪罫を引く） ---- */
.p-pln-count {
  width: 100%;
  max-width: 1600px;
  display: flex;
  flex-direction: column;
  gap: 45px;
  align-items: center;
}

.p-pln-count__h3 {
  width: 100%;
  margin: 0;
  box-sizing: border-box;
  font-family: 'YakuHanMP', 'Shippori Mincho B1', serif;
  font-weight: 500;
  font-size: 40px;
  line-height: 37px;
  letter-spacing: 0.03em;
  text-align: center;
  color: rgb(48,47,34);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 54px;
}

.p-pln-count__h3::before,
.p-pln-count__h3::after {
  content: '';
  flex: 1 1 0;
  height: 1px;
  background: rgb(48,47,34);
}

.p-pln-count__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: row;
  gap: 40px;
  align-items: flex-start;
  justify-content: center;
}

.p-pln-count__item {
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: center;
}

.p-pln-count__num {
  flex-shrink: 0;
  box-sizing: border-box;
  width: 34px;
  height: 34px;
  border-radius: 100px;
  background: rgb(67,63,57);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Cormorant Infant', ui-serif, Georgia, serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 0.75;
  color: rgb(255,255,255);
}

.p-pln-count__label {
  font-family: 'YakuHanMP', 'Shippori Mincho B1', serif;
  font-weight: 500;
  font-size: 24px;
  line-height: 37px;
  letter-spacing: 0.03em;
  white-space: nowrap;
  color: rgb(48,47,34);
}

/* ---- PLAN GRADE パネル ---- */
.p-pln-grade {
  width: 100%;
  max-width: 1600px;
  box-sizing: border-box;
  padding: clamp(32px, 5.21vw, 100px);
  background: rgba(255,255,255,0.7);
  display: flex;
  flex-direction: column;
  gap: 60px;
  align-items: center;
}

.p-pln-grade__head {
  display: flex;
  flex-direction: column;
  gap: 45px;
  align-items: center;
}

.p-pln-grade__kicker {
  font-family: 'Cormorant Infant', ui-serif, Georgia, serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 0.75;
  text-align: center;
  color: rgb(48,47,34);
}

.p-pln-grade__h3 {
  margin: 0;
  font-family: 'YakuHanMP', 'Shippori Mincho B1', serif;
  font-weight: 600;
  font-size: 40px;
  line-height: 67px;
  text-align: center;
  color: rgb(48,47,34);
}

/* 会員サイト誘導（aun #4 で追加）。罫線で囲う（aun #1）。
   aun #9：下部の .p-pln-member と同じ組み（リード文＋見出し＋ボタン）に合わせる */
.p-pln-grade__member {
  box-sizing: border-box;
  width: 100%;
  padding: clamp(20px, 2.08vw, 40px);
  border: 1px solid rgb(154,153,131);
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 1.67vw, 32px);
  align-items: center;
}

.p-pln-grade__memberBody {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 0.83vw, 16px);
  align-items: center;
}

.p-pln-grade__memberLead {
  margin: 0;
  font-family: 'YakuHanMP', 'Shippori Mincho B1', serif;
  font-weight: 500;
  font-size: 24px;
  line-height: 44px;
  letter-spacing: 0.01em;
  text-align: center;
  color: rgb(48,47,34);
}

.p-pln-grade__memberH {
  margin: 0;
  font-family: 'YakuHanMP', 'Shippori Mincho B1', serif;
  font-weight: 600;
  font-size: 40px;
  line-height: 1;
  text-align: center;
  padding-bottom: 4px;
  background: linear-gradient(90deg, rgb(44,43,31) 0%, rgb(136,134,105) 50%, rgb(44,43,31) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.p-pln-grade__memberBtn {
  align-self: center;
}

.p-pln-grade__list {
  /* 3つのボタンが親いっぱいに伸びられるよう、並びの箱を全幅にする */
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(16px, 2.08vw, 40px);
}

/* 3つ並ぶグレードのボタン。狭い画面では折り返して縦に積む */
.p-pln-grade__a {
  position: relative;
  flex: 1 1 260px;
  max-width: 440px;
  min-height: clamp(120px, 8.49vw, 163px);
  padding: clamp(14px, 1.04vw, 20px) clamp(12px, 0.83vw, 16px);
  border-radius: 5px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: clamp(7px, 0.57vw, 11px);
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: opacity 320ms ease;
}

.p-pln-grade__a:hover {
  opacity: 0.82;
}

.p-pln-grade__a--premiere {
  background: linear-gradient(191.79deg, rgb(222,221,219) 30.57%, rgb(204,198,188) 83.6%);
}

.p-pln-grade__a--luxury {
  background: linear-gradient(90deg, rgb(49,46,41) 0%, rgb(132,127,120) 53.37%, rgb(49,46,41) 100%);
}

.p-pln-grade__a--heritage {
  background:
    linear-gradient(90deg, rgba(49,46,41,0.3) 0%, rgba(132,127,120,0.3) 53.37%, rgba(49,46,41,0.3) 100%),
    linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
    url(../imgs/heritage.jpg) 56% 46% / cover no-repeat;
}

.p-pln-grade__name {
  font-family: 'Cormorant Infant', ui-serif, Georgia, serif;
  font-weight: 400;
  font-size: 40px;
  line-height: 0.75;
  text-align: center;
  color: rgb(48,47,34);
}

.p-pln-grade__a--luxury .p-pln-grade__name,
.p-pln-grade__a--heritage .p-pln-grade__name {
  background: linear-gradient(90deg, rgb(154,153,131) 0%, rgb(218,215,203) 50%, rgb(154,153,131) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.p-pln-grade__types {
  box-sizing: border-box;
  width: min(260px, 100%);
  padding: 8px 5px;
  background: rgba(255,255,255,0.5);
  font-family: 'YakuHanMP', 'Shippori Mincho B1', serif;
  font-weight: 600;
  font-size: 13px;
  line-height: 13px;
  letter-spacing: 0.03em;
  text-align: center;
  color: rgb(48,47,34);
}

.p-pln-grade__sub {
  font-family: 'YakuHanMP', 'Shippori Mincho B1', serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 1;
  text-align: center;
  color: rgb(48,47,34);
}

.p-pln-grade__a--luxury .p-pln-grade__sub,
.p-pln-grade__a--heritage .p-pln-grade__sub {
  color: rgb(255,255,255);
}

.p-pln-grade__icon {
  position: absolute;
  right: 38px;
  top: 50%;
  width: 35px;
  height: 35px;
  margin-top: -17.5px;
  border-radius: 50%;
  background: rgba(132,127,120,0.5);
}

.p-pln-grade__icon::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  margin: -6px 0 0 -4px;
  border-right: 1px solid rgb(255,255,255);
  border-bottom: 1px solid rgb(255,255,255);
  transform: rotate(45deg);
}


/* ==========================================================================
   p-pln-floor — フロア概念図
   ========================================================================== */

.p-pln-floor {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  /* 左右センター・上下は左右と同じ程よいマージン */
  padding: clamp(56px, 5.21vw, 100px) 3.125%;
  display: flex;
  justify-content: center;
  /* figのページ全体グラデーション（rgb(222,221,219)→rgb(204,198,188)）のうち、
     このセクションが占める区間の色。概念図は背景透過なので地色がそのまま見える */
  background: linear-gradient(180.646deg, rgb(216,213,207) 0%, rgb(212,208,200) 100%);
}

.p-pln-floor__imgBox {
  max-width: 1600px;
  margin-inline: auto;
  position: relative;
  z-index: 0;
}

.p-pln-floor__btn {
  display: none;
}

.p-pln-floor picture {
  display: block;
  width: 100%;
}

.p-pln-floor__img {
  display: block;
  width: 100%;
  height: auto;
}

@media screen and (min-width: 768px) {
  .p-pln-floor__btn {
    display: block;
    width: calc(600 / 1600 * 100%);
    aspect-ratio: 600 / 210;
    border-radius: 5px;
    transition: .4s;
    position: absolute;
    right: calc(100 / 1600 * 100%);
    z-index: 1;
  }
  .p-pln-floor__btn--heritage {
    top: 0;
  }
  .p-pln-floor__btn--luxury {
    top: 31%;
  }
  .p-pln-floor__btn--premiere {
    bottom: 10.5%;
  }
}

@media (hover: hover) and (pointer: fine) {
  .p-pln-floor__btn:hover {
    background: rgb(255 255 255 / .1);
  }
}



/* ==========================================================================
   p-pln-sec — グレード別セクション（PREMIERE / LUXURY / HERITAGE）
   ========================================================================== */

.p-pln-sec {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  padding: clamp(88px, 9.38vw, 180px) clamp(24px, 5.63vw, 108px);
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 5.21vw, 100px);
  align-items: center;
}

.p-pln-sec--premiere {
  background: linear-gradient(183.46deg, rgb(222,221,219) 12.05%, rgb(204,198,188) 88.2%);
}

.p-pln-sec--luxury {
  background: linear-gradient(90deg, rgb(49,46,41) 0%, rgb(132,127,120) 53.37%, rgb(49,46,41) 100%);
}

.p-pln-sec--heritage {
  background:
    linear-gradient(90deg, rgba(49,46,41,0.3) 0%, rgba(132,127,120,0.3) 53.37%, rgba(49,46,41,0.3) 100%),
    linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
    url(../imgs/heritage.jpg) center / cover no-repeat;
}

.p-pln-sec__head {
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: center;
}

.p-pln-sec__h2 {
  margin: 0;
  font-family: 'Cormorant Infant', ui-serif, Georgia, serif;
  font-weight: 400;
  font-size: 70px;
  line-height: 0.75;
  text-align: center;
  white-space: nowrap;
  background: linear-gradient(90deg, rgb(154,153,131) 0%, rgb(136,134,105) 50%, rgb(154,153,131) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.p-pln-sec--luxury .p-pln-sec__h2,
.p-pln-sec--heritage .p-pln-sec__h2 {
  background: linear-gradient(90deg, rgb(154,153,131) 0%, rgb(218,215,203) 50%, rgb(154,153,131) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.p-pln-sec__sub {
  margin: 0;
  font-family: 'YakuHanMP', 'Shippori Mincho B1', serif;
  font-weight: 600;
  font-size: 24px;
  line-height: 1;
  text-align: center;
  color: rgb(48,47,34);
}

.p-pln-sec--luxury .p-pln-sec__sub,
.p-pln-sec--heritage .p-pln-sec__sub {
  color: rgb(255,255,255);
}

.p-pln-sec__grid {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(32px, 3.75vw, 72px);
  justify-content: center;
  /* 同じ行のカードは高さを揃える（ボタンは下端で揃う） */
  align-items: stretch;
}

/* ---- プランカード ---- */
/* 3枚並ぶプランカード。狭い画面では折り返す */
/* 1行3枚（fig は 520px × 3）。狭い画面では折り返す */
.p-pln-card {
  flex: 1 1 30%;
  min-width: 300px;
  max-width: 520px;
  box-sizing: border-box;
  padding: clamp(24px, 2.08vw, 40px);
  border-radius: 5px;
  background: rgba(255,255,255,0.7);
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.p-pln-sec--luxury .p-pln-card {
  background: rgba(132,127,120,0.7);
}

.p-pln-sec--heritage .p-pln-card {
  background: linear-gradient(90deg, rgb(67,63,57) 0%, rgb(101,96,89) 53.37%, rgb(67,63,57) 100%);
}

.p-pln-card__head {
  display: flex;
  justify-content: space-between;
  /* fig: バッジ（90px）に対して仕樯ブロックは上下センター */
  align-items: center;
  gap: clamp(8px, 0.83vw, 16px);
}

.p-pln-card__badge {
  flex: 0 0 auto;
  width: 90px;
  height: 90px;
  box-sizing: border-box;
  padding-top: 16px;
  background: linear-gradient(90deg, rgb(154,153,131) -14.44%, rgb(218,215,203) 50.86%, rgb(154,153,131) 117.78%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

.p-pln-card__letter {
  font-family: 'Cormorant Infant', ui-serif, Georgia, serif;
  font-weight: 400;
  font-size: 46px;
  line-height: 0.75;
  color: rgb(49,46,42);
}

.p-pln-card__type {
  font-family: 'Cormorant Infant', ui-serif, Georgia, serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 0.75;
  color: rgb(49,46,42);
}

/* 間取り表記と面積。バッジの隣で右揃え、長い表記はこの箱の中で折り返す */
.p-pln-card__spec {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 15px;
  align-items: flex-end;
  text-align: right;
}

/* 間取り表記。長短で号数を分けず、長い表記（+PAN 等）が1行に収まる号数に全カードそろえる */
.p-pln-card__madori {
  font-family: 'Cormorant Infant', ui-serif, Georgia, serif;
  font-weight: 400;
  font-size: clamp(17px, 1.15vw, 22px);
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: rgb(44,43,31);
}

/* fig は間取り表記の先頭の数字だけを一段大きく組んでいる（1LDK の「1」） */
.p-pln-card__madori .num {
  font-size: 1.36em;
  line-height: inherit;
}

/* 「(納戸)」は和文のため欧文より大きく見える。号数を落として英字と釣り合わせる */
.p-pln-card__madori .nando,
.p-pld__madori .nando {
  font-family: 'YakuHanMP', 'Shippori Mincho', serif;
  font-size: 0.62em;
  letter-spacing: 0;
  vertical-align: 0.06em;
}

/* 単位と坪数は数値より小さく、ラベル「専有面積」より大きい中間の号数 */
.p-pln-card__unit {
  font-size: 0.8em;
}

.p-pln-sec--luxury .p-pln-card__madori,
.p-pln-sec--heritage .p-pln-card__madori {
  color: rgb(255,255,255);
}

.p-pln-card__menseki {
  font-family: 'YakuHanMP', 'Shippori Mincho B1', serif;
  font-weight: 500;
  font-size: clamp(14px, 0.94vw, 18px);
  line-height: 1;
  white-space: nowrap;
  color: rgb(44,43,31);
}

.p-pln-card__menseki .num {
  font-family: 'Cormorant Infant', ui-serif, Georgia, serif;
  font-weight: 400;
  font-size: 2em;
  line-height: 0.9;
}

.p-pln-sec--luxury .p-pln-card__menseki,
.p-pln-sec--heritage .p-pln-card__menseki {
  color: rgb(255,255,255);
}

/* 図面枠は fig 準拠でカード内幅いっぱい × 高さ350px、その中央に図面を置く。
   図面は全タイプ同一縮尺（原寸×0.2）で、幅は HTML の style="width:○%"（= 表示px ÷ 440）が持つ */
.p-pln-card__pic {
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 440 / 350;
  /* 縦長の図面が枠から出てカードの高さを崩さないように */
  overflow: hidden;
}

/* <picture> は箱を作らせず、img を直接 flex アイテムにする（中央寄せと % 幅を効かせるため） */
.p-pln-card__pic picture {
  display: contents;
}

/* 間取りイラストは周囲が透過された PNG 由来。カードの地にそのまま重ねる。
   幅は HTML の style="width:○%" が持ち、高さは枠（440:350）に収まるよう object-fit で縮める */
.p-pln-card__img {
  display: block;
  height: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* HERITAGE: 限定公開のためぼかし＋文言 */
.p-pln-card__pic--secret {
  position: relative;
}

.p-pln-card__pic--secret .p-pln-card__img {
  filter: blur(10px) brightness(0.6);
  opacity: 0.55;
}

/* 限定カードのボタンは押せない見せ方（キャプチャどおりの沈んだグレー） */
.p-pln-card__btn--secret {
  margin: 0;
  width: 100%;
  height: 80px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 3px;
  font-family: 'YakuHanMP', 'Shippori Mincho B1', serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 1;
  letter-spacing: 0.1em;
  text-align: center;
  color: rgb(255,255,255);
}

/* ボタンはカードの下端に揃える（同じ行の高さが揃うので、全カードで同じ位置に来る） */
.p-pln-card__btn {
  margin-top: auto;
}

/* 寸法・書体・所作は .c-goldBtn（エントリーフローのボタンと共通）に委ねる */


/* ==========================================================================
   p-pln-member — 限定間取りの案内
   ========================================================================== */

/* fig は 1100 の写真＋右 500 のテキスト。絶対配置をやめて 2 カラムで組む（1024px 以下は縦積み） */
.p-pln-member {
  position: relative;
  width: 100%;
  padding: clamp(24px, 1.56vw, 30px) 0 0;
  box-sizing: border-box;
  background: linear-gradient(180.65deg, rgb(216,213,208) 0%, rgb(204,198,188) 100%);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: clamp(24px, 3.13vw, 60px);
}

/* 一覧ページは DOM 上テキストが先。fig の並び（写真が左）に合わせて順番を固定する */
.p-pln-member__pic {
  order: 0;
  position: relative;
  flex: 0 0 57.29%;
  min-width: 0;
  aspect-ratio: 1100 / 880;
  overflow: hidden;
}

.p-pln-member__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 外観パースは乗算で地になじませる（Figma の合成指定に合わせる） */
  mix-blend-mode: multiply;
}

.p-pln-member__txt {
  order: 1;
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  box-sizing: border-box;
  padding-right: clamp(24px, 6.25vw, 120px);
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 3.13vw, 60px);
  align-items: center;
}

.p-pln-member__lead {
  margin: 0;
  font-family: 'YakuHanMP', 'Shippori Mincho B1', serif;
  font-weight: 500;
  font-size: 24px;
  line-height: 44px;
  letter-spacing: 0.01em;
  text-align: center;
  color: rgb(48,47,34);
}

.p-pln-member__h2 {
  margin: 0;
  font-family: 'YakuHanMP', 'Shippori Mincho B1', serif;
  font-weight: 600;
  font-size: 40px;
  line-height: 1;
  text-align: center;
  padding-bottom: 4px;
  background: linear-gradient(90deg, rgb(44,43,31) 0%, rgb(136,134,105) 50%, rgb(44,43,31) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.p-pln-member__body {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* テキスト（lead / h2）は中央揃え。ボタンも同じ中心線に揃える
   （stretch だとボタン自身の固定幅が左端に寄り、文字と中心がずれる） */
.p-pln-member__btn {
  align-self: center;
}


/* ==========================================================================
   p-pld — プラン詳細（/plan/タイプ名.html）
   ========================================================================== */

.p-pld {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  padding: clamp(120px, 13.02vw, 250px) clamp(24px, 13.54vw, 260px) clamp(72px, 6.25vw, 120px);
  display: flex;
  flex-direction: column;
  gap: clamp(72px, 7.97vw, 153px);
  align-items: center;
}

.p-pld--premiere {
  background: linear-gradient(182.64deg, rgb(222,221,219) 10.97%, rgb(204,198,188) 88.47%);
}

.p-pld--luxury,
.p-pld--heritage {
  background: linear-gradient(90deg, rgb(49,46,41) 0%, rgb(132,127,120) 53.37%, rgb(49,46,41) 100%);
}

.p-pld__inner {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 5.21vw, 100px);
  align-items: center;
}

.p-pld__h2 {
  margin: 0;
  font-family: 'Cormorant Infant', ui-serif, Georgia, serif;
  font-weight: 400;
  font-size: 70px;
  line-height: 0.75;
  text-align: center;
  white-space: nowrap;
  background: linear-gradient(90deg, rgb(154,153,131) 0%, rgb(136,134,105) 50%, rgb(154,153,131) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.p-pld--luxury .p-pld__h2,
.p-pld--heritage .p-pld__h2 {
  background: linear-gradient(90deg, rgb(154,153,131) 0%, rgb(218,215,203) 50%, rgb(154,153,131) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.p-pld__card {
  width: 100%;
  max-width: 1400px;
  box-sizing: border-box;
  padding: clamp(28px, 5.21vw, 100px);
  border-radius: 12px;
  background: rgba(255,255,255,0.7);
  display: flex;
  flex-direction: column;
  gap: 60px;
}

.p-pld--luxury .p-pld__card,
.p-pld--heritage .p-pld__card {
  background: rgba(222,221,219,0.2);
}

.p-pld__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.p-pld__badge {
  width: 160px;
  height: 170px;
  flex: 0 0 auto;
  box-sizing: border-box;
  padding-top: 16px;
  background: linear-gradient(90deg, rgb(154,153,131) -14.44%, rgb(218,215,203) 50.86%, rgb(154,153,131) 117.78%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

.p-pld__letter {
  font-family: 'Cormorant Infant', ui-serif, Georgia, serif;
  font-weight: 400;
  font-size: 70px;
  line-height: 0.75;
  color: rgb(49,46,42);
}

.p-pld__type {
  font-family: 'Cormorant Infant', ui-serif, Georgia, serif;
  font-weight: 400;
  font-size: 30px;
  line-height: 0.75;
  color: rgb(49,46,42);
}

.p-pld__grade {
  width: 140px;
  box-sizing: border-box;
  padding: 5px 4px;
  overflow: hidden;
  background: rgb(49,46,42);
  font-family: 'Cormorant Infant', ui-serif, Georgia, serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.15;
  text-align: center;
  color: rgb(255,255,255);
}

/* グレード下の階数。バッジの外形は変えずに収める */
.p-pld__floor {
  display: block;
  font-family: 'YakuHanMP', 'Shippori Mincho B1', serif;
  font-size: 13px;
  line-height: 1.2;
}

.p-pld__spec {
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: flex-end;
  padding-top: 8px;
}

/* 「4LDK+3WIC+WTC+SIC+PAN」まで1行で組めるよう、版面幅に追従させる
   （固定 50px だと 768〜1300px 帯で折り返す） */
.p-pld__madori {
  font-family: 'Cormorant Infant', ui-serif, Georgia, serif;
  font-weight: 400;
  font-size: clamp(28px, 3.2vw, 50px);
  line-height: 0.75;
  letter-spacing: 0.03em;
  white-space: nowrap;
  color: rgb(49,46,42);
}

.p-pld--luxury .p-pld__madori,
.p-pld--heritage .p-pld__madori {
  color: rgb(255,255,255);
}

.p-pld__areas {
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: flex-end;
}

/* バルコニー面積と室外機置場は1行に並べる */
.p-pld__areaRow {
  display: flex;
  gap: 40px;
  align-items: flex-end;
}

.p-pld__area {
  font-family: 'YakuHanMP', 'Shippori Mincho B1', serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 1;
  color: rgb(49,46,42);
}

.p-pld--luxury .p-pld__area,
.p-pld--heritage .p-pld__area {
  color: rgb(255,255,255);
}

.p-pld__area .num {
  font-family: 'Cormorant Infant', ui-serif, Georgia, serif;
  font-weight: 400;
  font-size: clamp(28px, 3.2vw, 50px);
  line-height: 0.75;
}

/* 一覧カードと同じ組み。先頭の数字を一段大きく */
.p-pld__madori .num {
  font-size: 1.36em;
  line-height: inherit;
}

.p-pld__unit {
  font-size: clamp(20px, 2.24vw, 33px);
}

.p-pld__unit--s {
  font-size: clamp(15px, 1.63vw, 24px);
}

.p-pld__area .num--s {
  font-size: 30px;
}

/* 間取り図の枠。PC はカードの版面（左右のパディングを除いた内側）にそろえる。
   タイプごとの倍率は各ページの img の width%（一覧と同じ縮尺関係）がそのまま効き、
   版面より広い図は max-width で内側に収まる */
.p-pld__pic {
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  /* 枠は図の高さに追従させる（固定の aspect-ratio を持つと、
     図を縮小したぶんだけ上下に余白が残る） */
  aspect-ratio: auto;
}

.p-pld__pic picture {
  display: contents;
}

.p-pld__img {
  display: block;
  max-width: 100%;
  height: auto;
}

.p-pld__legend {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
  margin-top: 12px;
}

.p-pld--luxury .p-pld__note,
.p-pld--heritage .p-pld__note {
  color: rgb(233,230,220);
}

.p-pld__note {
  margin: 0;
  font-family: 'Shippori Mincho', 'Shippori Mincho B1', serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: rgb(5,23,48);
}

.p-pld__noteInner {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  column-gap: 1em;
}

.p-pld__noteItem {
  display: block;
}

.p-pld__noteItem--small {
  font-size: max(12px, calc(14 / 16 * 100%));
  text-align: right;
}
* + .p-pld__noteItem--small {
  margin-top: 5px;
}

/* 2つのボタンは等幅で並べ、文言は折らない。狭い画面では縦に積む（下の @media） */
.p-pld__btns {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(24px, 3.13vw, 60px);
  justify-content: center;
}

.p-pld__btns .c-goldBtn {
  flex: 1 1 320px;
  max-width: 440px;
  white-space: nowrap;
}

/* 寸法・書体・所作は .c-goldBtn に委ねる */

/* 詳細ページ下部の限定間取り案内（p-pln-member を薄地で使う） */
.p-pld ~ .p-pln-member,
.p-pln-member--pld {
  background: linear-gradient(189.58deg, rgb(222,221,219) 25.2%, rgb(204,198,188) 84.93%);
}

/* ==========================================================================
   タブレット（〜1024px）— MEMBER を縦積みに組み替える
   ========================================================================== */

@media screen and (max-width: 1024px) {
  .p-pld__btns {
    flex-direction: column;
    align-items: center;
  }

  .p-pld__btns .c-goldBtn {
    flex: 0 0 auto;
    width: min(440px, 100%);
  }

  .p-pln-member {
    flex-direction: column;
    padding: 0 0 56px;
    gap: 32px;
  }

  .p-pln-member__pic,
  .p-pln-member__txt {
    width: 100%;
    flex: 0 0 auto;
  }

  .p-pln-member__txt {
    box-sizing: border-box;
    padding: 0 24px;
  }

  /* 合計14タイプの内訳（4項目）は横一列だと 900px 前後で親（overflow: clip）に切られるため、
     2列×2行に折り返す（幅を 2 項目ぶんに絞ってセンター） */
  .p-pln-count__list {
    flex-wrap: wrap;
    row-gap: 16px;
    max-width: 560px;
    margin: 0 auto;
  }
}


/* ==========================================================================
   SP（〜767px）— 規定ブレークポイント。zoom は掛からず実寸で組む
   ========================================================================== */

@media screen and (max-width: 767px) {

  /* SP は支給画像にモノクロ・明暗の加工が焼き込まれているため、実装側の画像処理（luminosity 合成・
     multiply の暗幕・明るさ補正）は行わず、画像をそのまま表示する */
  .p-pln-hero__img {
    filter: none;
    mix-blend-mode: normal;
  }

  .p-pln-hero__div {
    display: none;
  }


  #mainVisual .p-pln-hero,
  .p-pln-hero {
    width: 100%;
    height: var(--vph, 100vh);
  }

  .p-pln-hero__div-2 {
    width: 100%;
    box-sizing: border-box;
    gap: 10px;
    padding: 0 24px;
    white-space: normal;
  }

  .p-pln-hero__div-3 {
    font-size: 54px;
    padding-bottom: 6px;
  }

  .p-pln-hero__div-4 {
    font-size: 15px;
    line-height: 24px;
    /* SP はキャッチコピーを白にする（支給画像の上での可読性を確保）。
       PC のグラデーション文字は打ち消す */
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    color: rgb(255,255,255);
  }

  /* ---- 導入＋PLAN GRADE ---- */
  .p-pln-intro {
    width: 100%;
    padding: 96px 16px 72px;
    gap: 56px;
  }

  .p-pln-intro__head {
    gap: 40px;
  }

  .p-pln-intro__kicker {
    font-size: 15px;
  }

  .p-pln-intro__h2 {
    font-size: 27px;
    line-height: 44px;
  }

  .p-pln-intro__p {
    font-size: 15px;
    line-height: 31px;
    text-align: left;
  }

  .p-pln-intro__p br:not(.only-sp) {
    display: none;
  }

  /* ---- 合計14タイプの内訳 ---- */
  .p-pln-count {
    width: 100%;
    gap: 28px;
  }

  .p-pln-count__h3 {
    font-size: 21px;
    line-height: 34px;
    gap: 16px;
  }

  .p-pln-count__list {
    flex-wrap: wrap;
    gap: 16px 24px;
  }

  .p-pln-count__num {
    width: 28px;
    height: 28px;
    font-size: 19px;
  }

  .p-pln-count__label {
    font-size: 16px;
    line-height: 28px;
  }

  .p-pln-grade {
    width: 100%;
    padding: 48px 20px;
    gap: 36px;
  }

  .p-pln-grade__head {
    gap: 24px;
  }

  .p-pln-grade__kicker {
    font-size: 14px;
  }

  .p-pln-grade__h3 {
    font-size: 20px;
    line-height: 36px;
  }

  .p-pln-grade__member {
    padding: 20px 16px;
  }

  .p-pln-grade__memberLead {
    font-size: 17px;
    line-height: 31px;
  }

  .p-pln-grade__memberH {
    font-size: 24px;
    line-height: 40px;
  }

  .p-pln-grade__list {
    flex-direction: column;
    gap: 12px;
    align-self: stretch;
  }

  .p-pln-grade__a {
    width: 100%;
    height: auto;
    padding: 20px 0;
  }

  .p-pln-card__btn--secret {
    height: 60px;
    font-size: 14px;
  }

  .p-pln-grade__name {
    font-size: 34px;
  }

  .p-pln-grade__sub {
    font-size: 14px;
  }

  /* 右の開閉アイコン（right:20px・幅35px）に重ならない幅にする。
     箱は中央寄せなので、アイコンの占める右 55px 分を左右両側から引く。
     タイプ帯はリード文から少し離す（名前・リード・帯の組は箱の上下センター） */
  .p-pln-grade__types {
    width: calc(100% - 130px);
    margin-top: 8px;
    font-size: 12px;
  }

  /* SP はボタンの中央下部に置く（右センターだとタイプ帯と窮屈に並ぶため） */
  .p-pln-grade__icon {
    right: auto;
    left: 50%;
    top: auto;
    bottom: 12px;
    margin-top: 0;
    margin-left: -17.5px;
  }

  /* ---- フロア概念図（PCと同じ比率・同じトリミングで縮小） ---- */
  .p-pln-floor {
    width: 100%;
  }

  /* ---- グレード別セクション ---- */
  .p-pln-sec {
    width: 100%;
    padding: 88px 16px;
    gap: 48px;
  }

  .p-pln-sec__head {
    gap: 24px;
  }

  .p-pln-sec__h2 {
    font-size: 34px;
    line-height: 0.9;
    white-space: normal;
  }

  .p-pln-sec__sub {
    font-size: 16px;
  }

  .p-pln-sec__grid {
    flex-direction: column;
    gap: 24px;
    align-self: stretch;
  }

  .p-pln-card {
    width: 100%;
    padding: 24px 20px;
    gap: 24px;
  }

  .p-pln-card__badge {
    width: 68px;
    height: 68px;
    padding-top: 12px;
    gap: 7px;
  }

  /* SP: 間取り・面積のブロックはタイプボックスの上端に揃える */
  .p-pln-card__head {
    align-items: flex-start;
  }

  .p-pln-card__spec {
    gap: 10px;
  }

  .p-pln-card__letter {
    font-size: 34px;
  }

  .p-pln-card__type {
    font-size: 15px;
  }

  /* SP: 長い表記でもタイプボックスに重ならない号数。収まらない場合は折り返す */
  .p-pln-card__madori {
    font-size: 17px;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .p-pln-card__unit {
    font-size: 16px;
  }

  .p-pln-card__menseki {
    font-size: 15px;
    /* SP は「専有面積」のあとで改行する（HTML の <br class="only-sp">）。
       折り返した数値・単位の行を右端に揃える */
    display: block;
    text-align: right;
  }

  .p-pln-card__menseki .num {
    font-size: 28px;
  }

  .p-pln-card__pic {
    width: 100%;
    height: auto;
    aspect-ratio: 440 / 350;
  }



  /* ---- 限定間取り ---- */
  .p-pln-member {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
  }

  /* SP はパース（外観完成予想CG）をテキスト・ボタンの下に置く。
     パースが最後に来るため、親の下padding（〜1024px指定の56px）は外して
     画像の下端を次の帯に接地させる（キャプションが帯にかかるのは可） */
  .p-pln-member {
    padding-bottom: 0;
  }

  .p-pln-member__pic {
    order: 1;
    position: static;
    width: 100%;
    height: auto;
  }

  .p-pln-member__img {
    width: 100%;
    height: auto;
    aspect-ratio: 750 / 600;
  }

  .p-pln-member__txt {
    order: 0;
    position: static;
    width: 100%;
    box-sizing: border-box;
    /* 上: 直前の外観パース（暗い写真）との境目でリード文が詰まるため余白を確保 */
    padding: 40px 24px;
    gap: 32px;
  }

  .p-pln-member__lead {
    font-size: 17px;
    line-height: 31px;
  }

  .p-pln-member__h2 {
    font-size: 24px;
    line-height: 40px;
  }


}


/* ---- プラン詳細 SP ---- */
@media screen and (max-width: 767px) {
  .p-pld {
    width: 100%;
    padding: 120px 16px 72px;
    gap: 72px;
  }

  .p-pld__inner {
    width: 100%;
    gap: 48px;
  }

  .p-pld__h2 {
    font-size: 34px;
    line-height: 0.9;
    white-space: normal;
  }

  .p-pld__card {
    width: 100%;
    padding: 28px 20px;
    gap: 32px;
    border-radius: 6px;
  }

  .p-pld__head {
    flex-direction: column;
    gap: 24px;
    align-items: flex-start;
  }

  .p-pld__badge {
    width: 108px;
    height: 118px;
    padding-top: 10px;
    gap: 7px;
  }

  .p-pld__letter { font-size: 46px; }
  .p-pld__type { font-size: 20px; }
  .p-pld__grade { width: 100px; font-size: 14px; }
  .p-pld__floor { font-size: 10px; }

  .p-pld__spec {
    align-items: flex-start;
    gap: 20px;
    padding-top: 0;
  }

  /* SP は間取り名・面積・凡例の左端を揃える（aun 指示「青線左揃え」） */
  .p-pld__areas,
  .p-pld__legend {
    align-items: flex-start;
  }

  .p-pld__noteInner {
    justify-content: flex-start;
  }

  .p-pld__noteItem--small {
    text-align: left;
  }

  /* 最長の「3LDK+2WIC+SIC+N(納戸)+PAN」まで1行で収まる号数（画面幅に追従） */
  .p-pld__madori { font-size: clamp(18px, 6vw, 32px); }
  .p-pld__area { font-size: 15px; }
  .p-pld__area .num { font-size: 32px; }
  .p-pld__area .num--s { font-size: 22px; }
  .p-pld__unit { font-size: 22px; }
  .p-pld__unit--s { font-size: 16px; }
  .p-pld__areaRow { gap: 20px; }

  .p-pld__pic {
    width: 100%;
    height: auto;
    aspect-ratio: 440 / 350;
  }

  .p-pld__btns {
    flex-direction: column;
    gap: 12px;
    align-self: stretch;
  }


}

/* ---- SP: 間取り図は画面の左右いっぱいに見せる ----
   PC の縮尺（img の inline width%）は SP では小さすぎるため、
   カードの内側いっぱいまで広げる（inline style を上書きするので !important）。
   枠は図の高さに追従させ、下の凡例・ボタンとの間隔は gap が保つ */
@media screen and (max-width: 767px) {
  .p-pld__pic {
    width: calc(100% + 24px);
    margin-inline: -12px;
    aspect-ratio: auto;
  }

  .p-pld__img {
    width: 100% !important;
    height: auto;
  }
}


/* ==========================================================================
   タブレット（768〜1279px・iPad 等）— PLAN GRADE のボタン
   3つ横並びだと折り返して 2＋1 になり、1枚目と3枚目で幅が変わる。
   3つとも同じ幅・同じ高さで縦に積む
   ========================================================================== */

@media screen and (min-width: 768px) and (max-width: 1279px) {
  .p-pln-grade__list {
    flex-direction: column;
    align-items: center;
  }

  .p-pln-grade__a {
    flex: 0 0 auto;
    width: min(440px, 100%);
  }

  /* フロア概念図は 1920px 固定のままだと版面の左 1065px 分しか見えず、
     外観パースが切れて見える。SP と同じく画面幅に収めて全体を出す
     （縦横比とトリミングは PC と同じ aspect-ratio / % 指定が保つ） */
  .p-pln-floor {
    width: 100%;
  }
}