/* price.css — 料金プランセクション（Figma: Frame 1821 2247:65916 / PRICE）
   実値: 透かし 200px グレーグラデ op.3 / 見出し 42.67px Black + 青バー
         カード 白 544px radius10 影 0,0,25,10% / ヘッダ #1561AB 25.6px Bold lh48
         価格 42.67px Black #1561AB / ボタン #004C98 320x59
         表: ラベル #E6F0F7 73px / 値 #F6F6F6 14.22px lh24 */

.price {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-80) var(--space-120);
}

.price__watermark {
  position: absolute;
  top: -.625rem; /* ⚠ Figma実値 -9.74px（前セクションに少し重なる） */
  left: calc(50% - 22.1875rem); /* Figma実値: 1440px中 x365 */
  margin: 0;
  font-size: var(--font-size-watermark);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-wider);
  white-space: nowrap;
  background: var(--gradient-watermark-gray);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0.3;
  pointer-events: none;
}

.price__heading {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  align-items: center;
}

.price__title {
  margin: 0;
  color: var(--color-black);
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-body);
  letter-spacing: var(--letter-spacing-widest);
  text-align: center;
}

.price__bar {
  display: block;
  width: 3.75rem;
  height: .375rem;
  background: var(--color-primary);
}

.price__body {
  position: relative;
  display: flex;
  gap: var(--space-32);
  align-items: stretch; /* カードを同じ高さに揃える（desc高さ統一で価格以降の行位置も揃う） */
  justify-content: center;
  width: 100%;
  max-width: var(--layout-max);
  margin-top: var(--space-40);
  padding: 0 var(--space-40); /* Figma: body px-40 */
}

/* カード背面のソフトシャドウ（Figma: Rectangle 202） */
.price__body::before {
  content: "";
  position: absolute;
  top: 4.491875rem; /* ⚠ Figma実値 */
  left: 5.3125rem;
  width: 61.1875rem;
  height: 33rem;
  background: var(--color-shadow-soft-2);
  filter: blur(50px);
  opacity: 0.5;
}

.price-card {
  position: relative;
  display: flex;
  flex: 1 1 0; /* Figma: flex-[1_0_0]（カードを等幅で配置） */
  min-width: 0;
  flex-direction: column;
  border-radius: var(--radius-md);
  background: var(--color-white);
  box-shadow: var(--shadow-price);
  overflow: hidden;
}

/* 中央の推奨プラン（Figma: お試しプラン border-4 #1561AB）。
   outline+負offsetで内側4px枠を描画し、カード幅を変えず等幅を保つ */
.price-card--featured {
  outline: 0.25rem solid var(--color-accent);
  outline-offset: -0.25rem;
}

.price-card__name {
  margin: 0;
  padding: var(--space-8) 0;
  background: var(--color-accent);
  color: var(--color-white);
  font-size: var(--font-size-h2-lead);
  font-weight: var(--font-weight-bold);
  line-height: 3rem; /* ⚠ Figma実値 */
  text-align: center;
}

.price-card__content {
  display: flex;
  flex: 1; /* カード高さを満たし、余白を最終行へ流す */
  flex-direction: column;
  gap: var(--space-32); /* Figma: content gap-32 */
  padding: var(--space-24);
}

.price-card__desc {
  min-height: 4.8rem; /* 2カードで価格・ボタン・表の位置を揃える（最長3行分＝14.22px×1.8×3。Figmaはカード側のgapを詰めて調整） */
  margin: 0;
  color: var(--color-text-body);
  font-size: var(--font-size-h5);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-loose);
}

.price-card__main {
  display: flex;
  flex: 1; /* desc以下の余白を吸収し、リスト最終行まで届かせる */
  flex-direction: column;
  gap: var(--space-32);
  align-items: center;
}

.price-card__price {
  margin: 0;
  color: var(--color-accent);
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-black);
  line-height: 3rem; /* ⚠ Figma実値 */
  text-align: center;
}

.price-card__note {
  font-size: var(--font-size-h5);
  font-weight: var(--font-weight-bold); /* Figma: （税抜）はBold */
}

/* 矢印なしの塗りボタン（Figma: #004C98 幅いっぱい px40 py16 radius100） */
.price-card__btn {
  display: flex;
  max-width: 100%;
  align-items: center;
  justify-content: center;
  /* Figma（4099:11450）は横幅hug。左右paddingで幅が決まる（親が align-items: center） */
  padding: var(--space-16) var(--space-80);
  border-radius: var(--radius-full);
  background: var(--color-primary-dark);
  color: var(--color-white);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-widest); /* Figma: tracking 1.8286px = 0.1em */
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

/* hover: 濃青塗り → 白地＋濃青字＋濃青縁（.btn--fill と同トーン）。
   縁はレイアウトを動かさないよう内側box-shadowで描く */
@media (hover: hover) {
  .price-card__btn:hover {
    background: var(--color-white);
    box-shadow: inset 0 0 0 2px var(--color-primary-dark);
    color: var(--color-primary-dark);
  }
}

.price-card__list {
  display: flex;
  flex: 1; /* mainの余白を受け取る */
  flex-direction: column;
  gap: var(--space-4);
  width: 100%;
  margin: 0;
}

.price-card__row {
  display: flex;
  gap: var(--space-4);
  align-items: stretch;
}

/* 最終行（主な内容）はカード下部まで背景を伸ばす */
.price-card__row:last-child {
  flex: 1;
}

.price-card__area {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0 var(--space-8); /* Figma: px-8 のhug幅（ラベルは4文字で等幅） */
  border-radius: var(--radius-5);
  background: var(--color-blue-pale);
  color: var(--color-text-body); /* Figma: ラベルも #333 */
  font-size: var(--font-size-h5);
  font-weight: var(--font-weight-regular);
  white-space: nowrap;
}

.price-card__value {
  flex: 1;
  min-width: 0;
  margin: 0;
  /* Figma: pl-16・py-8（右パディングなし）。右16pxを入れると折り返し位置がずれる */
  padding: var(--space-8) 0 var(--space-8) var(--space-16);
  border-radius: var(--radius-5);
  background: var(--color-gray-cell);
  color: var(--color-text-body);
  font-size: var(--font-size-h5);
  font-weight: var(--font-weight-medium);
  line-height: 1.5rem; /* ⚠ Figma実値 */
}

/* --- SP: カードは縦積み --------------------------------------------------- */
@media (max-width: 767px) {
  .price {
    padding: var(--space-48) var(--space-24) var(--space-40);
  }
  /* 透かしの位置は section.css の .section__watermark（トップ）に合わせる */
  .price__watermark {
    font-size: var(--font-size-en-title);
    top: var(--space-16);
    left: 50%;
    transform: translateX(-50%);
  }
  .price__title {
    font-size: var(--font-size-h2);
  }
  .price__body {
    flex-direction: column;
    gap: var(--space-24);
    padding: 0;
  }
  /* 縦積みでは PC用の flex:1 1 0 の basis が「高さ0」として効き、
     overflow:hidden と相まってカードが消える。内容なりの高さに戻す */
  .price-card {
    flex: 0 1 auto;
  }
  /* 背面ぼかし影はカード列全体に追従 */
  .price__body::before {
    top: 2rem;
    left: 5%;
    width: 90%;
    height: calc(100% - 4rem);
  }
  /* 縦積みでは行位置合わせが不要 */
  .price-card__desc {
    min-height: 0;
  }
}