/* =========================================================
   sections/price.css — 料金（Figma フレーム "price" / 1447×1319）
   【C-2：absolute 解体 → 通常フロー(Flex)／2層構造＋レスポンシブ】
   - 旧構造は子が全て position:absolute + % のオーバーレイだった。
     これを解体し、視覚どおりの入れ子で通常フロー(flex column)に組み直した：
       白カード ⊃ ( title / plan / キャンペーン枠 )
       キャンペーン枠 ⊃ ( スパークル×2 / campaign-title / content )
     位置の top/left/% と aspect-ratio は撤去。余白は縦積みの gap（トークン）で再取得。
   - 空div だった .price__card / .price__campaign は「中身を持つ実コンテナ」に作り替え。
   - 装飾スパークル .price__deco のみ absolute を維持（親 .price__campaign が relative）。
   - 2層：外側 .price=全幅背景 / 内側 .price__inner=max1440中央寄せ＋cqw基準。
   - BP：PC ≥1024 / タブレット 768–1023 / SP ≤767（最小375）。生px禁止・トークン/%参照。
     @media 条件式は var() 不可のため px 直書き＋トークン名（--bp-*）をコメント併記。
   ========================================================= */

/* ---- 外側：全幅の背景レイヤー（画像セクションではここに背景画像を敷く想定） ---- */
.price {
  background: var(--color-cream-2);
  padding-block: var(--space-64);   /* 上下のクリーム余白 */
  overflow: hidden;
}

/* ---- 内側：中央寄せコンテンツ（cqw の基準＝1440px 以下のこの幅） ---- */
.price__inner {
  container-type: inline-size;
  width: 100%;
  max-width: var(--container-max);  /* 1440px */
  margin-inline: auto;
}

/* ---- 白カード（旧・空div → 実コンテナ化）title+plan+campaign を内包 ---- */
.price__card {
  width: 91.776%;                   /* 旧 1328/1447：クリーム左右余白を % で再現 */
  margin-inline: auto;
  padding-block: var(--space-72);   /* カード内の上下余白 */
  border-radius: 2.557cqw;          /* 37px */
  background: var(--color-white);
  box-shadow: inset 0 0 0 0.415cqw var(--color-primary); /* 6px 黄枠 */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-88);             /* title↔plan↔campaign の縦間隔（旧≈100–130px） */
}

/* 見出し（left447/top148/w553）51.282px */
.price__title {
  margin: 0;
  display: flex;                    /* 2行を span 化し縦積み */
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);              /* 2行の間 8px */
  font-weight: 700;
  font-size: var(--fs-2xl);         /* 51.282px */
  line-height: 1;
  text-align: center;
  color: var(--color-text);
  white-space: nowrap;              /* 各行 span に効く。狭幅では @media で解除 */
}
/* 「ワンプラン！」強調色（旧インラインstyleをクラス化） */
.price__title-em { color: var(--color-primary); }

/* 価格グループ（flex col gap5 center） */
.price__plan {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);              /* 5px */
}
/* 「初期開発費用」黄ラベル（387×73） */
.price__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-8);
  width: 26.745cqw;                 /* 387px */
  height: 5.045cqw;                 /* 73px */
  background: var(--color-primary);
  font-weight: 600;
  font-size: var(--fs-2xl);         /* 50.167px */
  line-height: 1;
  text-align: center;
  color: var(--color-white);
}
/* メイン価格（62.524px）。「一律/円/(税別)」＝黒、数字＝黄で強調 */
.price__amount {
  margin: var(--space-8) 0 0;
  font-weight: 700;
  font-size: var(--fs-3xl);         /* 62.524px */
  line-height: 1;
  text-align: center;
  color: var(--color-text);         /* 「一律」「円」「(税別)」を黒に */
  white-space: nowrap;
}
.price__amount .num {
  color: var(--color-primary);      /* 数字「400,000」だけ黄を維持 */
  font-size: var(--fs-88);          /* 数字強調 88px */
  font-style: italic;
  margin-right: var(--space-16);    /* 数字→「円」間 16px */
}
/* 補足（32px）黒 */
.price__note {
  margin: var(--space-16) 0 0;      /* plan gap 8px＋この16px＝amount↔note 実効24px */
  font-weight: 400;
  font-size: var(--fs-lg);          /* 32px */
  line-height: 1;
  text-align: center;
  color: var(--color-text);
}

/* ---- キャンペーン枠（旧・空div → 実コンテナ化）title+content を内包 ---- */
.price__campaign {
  position: relative;               /* .price__deco の配置基準 */
  width: 76.6%;                     /* 旧 1017/1328 */
  border-radius: 4.492cqw;          /* 65px */
  background: var(--color-cream-3);
  padding: var(--space-56) var(--space-40);   /* 上下56（+16）/ 左右40維持 */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-40);             /* campaign-title ↔ content */
}
/* キャンペーン見出し（白抜き＋黄アウトライン） */
.price__campaign-title {
  margin: 0;
  font-weight: 700;
  font-size: var(--fs-2xl);         /* 54.077px */
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  letter-spacing: 0.05em;           /* 字間を控えめに広げる（文字サイズの5%） */
  color: var(--color-white);
  -webkit-text-stroke: 0.83cqw var(--color-primary); /* 縁（≈12px相当）：太すぎのトゲ軽減 */
  paint-order: stroke fill;
}

/* 装飾スパークル（唯一 absolute を維持。親枠 .price__campaign 内に閉じる） */
.price__deco {
  position: absolute;
  top: var(--space-40);             /* campaign-title の高さに合わせて左右へ */
  width: 3.455cqw;                  /* 50px */
  height: 3.248cqw;                 /* 47px */
}
.price__deco--l { left: 7%; }                          /* 見出し文字の左端すぐ外（被らない位置） */
.price__deco--r { right: 7%; transform: scaleX(-1); }  /* 見出し文字の右端すぐ外（被らない位置） */

/* コンテンツ（free/desc/btn を縦積み） */
.price__content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-16);             /* 12px */
}
/* 「最初の3ヶ月は月額運用費0円！」40px。3 と 0 を強調 */
.price__free {
  margin: 0;
  font-weight: 700;
  font-size: var(--fs-xl);          /* 40px */
  line-height: 1;
  text-align: center;
  color: var(--color-text);
  white-space: nowrap;
}
.price__free .num {
  font-size: var(--fs-5xl);         /* 3・0 強調 80px */
  color: var(--color-primary);      /* 「3」「0」を黄で強調 */
  margin-inline: calc(var(--space-8) / 2);  /* 左右各4px：隣接文字との詰まり解消 */
}
/* 説明（24px） */
.price__desc {
  margin: 0;
  align-self: stretch;
  font-weight: 400;
  font-size: var(--fs-base);        /* 24px */
  line-height: 1.35;
  text-align: center;
  color: var(--color-text);
}

/* CTA ボタン（601.123×86 / radius47.706） */
.price__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  width: 41.542cqw;                 /* 601.123px */
  height: 5.943cqw;                 /* 86px */
  margin-top: var(--space-8);
  border-radius: 3.297cqw;          /* 47.706px */
  background: var(--color-primary);
  box-shadow:
    inset -0.110cqw -0.147cqw 0.225cqw 0 rgb(141,54,22),
    0.112cqw 0.112cqw 0.755cqw 0 rgba(255,255,255,0.19);
  font-weight: 600;
  font-size: var(--fs-lg);          /* 32px */
  line-height: 1;
  color: var(--color-text);
  white-space: nowrap;
}
.price__btn-arrow {
  width: 1.4cqw;
  height: auto;
  fill: currentColor;
  flex: none;
}

/* =========================================================
   レスポンシブ（solution と同じ型）
   ※ @media は var() 不可のため px 直書き＋トークン名をコメント併記。
   ========================================================= */

/* ---- タブレット以下（<1024＝--bp-tablet 未満）----
   nowrap 見出しの折返しを許可し、固定cqw幅の pill/btn を content 幅にして
   フォント固定px との衝突（はみ出し）を防ぐ。 */
@media (max-width: 1023px) {
  .price__title,
  .price__amount,
  .price__free,
  .price__campaign-title { white-space: normal; }

  .price__label { width: auto; height: auto; padding: var(--space-8) var(--space-24); }
  .price__btn   { width: auto; height: auto; padding: var(--space-16) var(--space-48); }
}

/* ---- タブレット（768–1023＝--bp-sp 〜 --bp-tablet 未満）：幅追従＋詰め ---- */
@media (min-width: 768px) and (max-width: 1023px) {
  .price__card     { gap: var(--space-64); padding-block: var(--space-56); }
  .price__campaign { width: 90%; padding: var(--space-32); }
}

/* ---- SP（≤767＝--bp-sp 未満）：全幅・縦積み・見出し1〜2段下げ（最小375） ---- */
@media (max-width: 767px) {
  .price__inner { padding-inline: var(--container-pad); } /* 画面端ガター16px */

  /* カード：ほぼ全幅、内側余白を圧縮 */
  .price__card {
    width: 100%;
    padding: var(--space-40) var(--space-16);
    gap: var(--space-24);   /* ①タイトル→バッジ / ②月額運用費→キャンペーン枠＝各24（title↔plan↔campaign。旧40） */
  }

  /* 見出し・価格：1〜2 段下げ */
  .price__title       { font-size: var(--fs-28); }   /* SP標準セクションタイトル28px（旧32） */
  .price__label       { padding: var(--space-8) var(--space-16); font-size: var(--fs-md); } /* バッジ 20px */
  .price__amount      { font-size: var(--fs-28); }   /* 一律・円・(税別) 28px */
  .price__amount .num { font-size: var(--fs-48); }   /* 数字「500,000」48px（色分け維持） */
  .price__note        { font-size: var(--fs-sm); line-height: 1.6; } /* 注記 16px・2行の行間を広げる */

  /* キャンペーン枠：全幅、余白圧縮 */
  .price__campaign {
    width: 100%;
    padding: var(--space-24) var(--space-16);
    gap: var(--space-16);   /* 「お得な〜」↔「最初の〜」の間だけを16pxに（24→16） */
  }
  .price__campaign-title { font-size: var(--fs-28); line-height: 1.4; } /* お得なキャンペーン 28px・2行の行間を広げる（袋文字スタイルは維持） */
  /* スパークル装飾：cqw だと SP で約12pxに極小化して見えないため、実用サイズに拡大＋見出し左右へ。
     ※ width/height/top/left/right は実機375pxで見出し脇に来るよう微調整前提の初期値。 */
  .price__deco    { width: var(--space-24); height: var(--space-24); top: var(--space-16); } /* 約50px→24px */
  .price__deco--l { left: var(--space-8); }   /* 見出し左端の外（コーナー寄り） */
  .price__deco--r { right: var(--space-8); }  /* transform:scaleX(-1) は基底維持 */
  .price__free           { font-size: var(--fs-base); } /* 本文 24px */
  .price__free .num      { font-size: var(--fs-36); }  /* 数字「3」「0」36px（色分け維持） */
  .price__desc           { font-size: var(--fs-sm); }  /* 説明文 16px */

  /* ボタン：幅いっぱい・折り返し許可 */
  .price__btn {
    width: 100%;
    padding: var(--space-16);
    font-size: var(--fs-sm);        /* 24→16：完成版に合わせ1行に収める */
    white-space: nowrap;            /* テキスト＋矢印を1行に（折返し防止） */
    border-radius: var(--space-96); /* 高さ以上の半径＝短辺を完全な丸（ピル型）に（cqwの小角丸を上書き） */
  }
  .price__btn-arrow { width: 14px; } /* SP矢印を中サイズ14pxに統一（基底1.4cqw≈4.6pxを上書き。全ボタン共通） */
}

/* ---- 狭いPC（1024–1370）：price 専用ブロック【新規追加：1440デザインの比例縮小】 ----
   固定px を cqw（.price__inner=container-type:inline-size／inner padding-inline無し→W=1370px, 1cqw=13.70px, ÷13.70）に換算。
   1370で現行px一致（段差なし）→1024へ比例縮小。white-space未指定＝基底nowrap維持＝折返しゼロ。
   ★min-1024〜max-1370 のため ≥1371/タブレット/SP には非適用。既存cqw/%（card幅%・label/btn幅高cqw・radius・text-stroke・deco幅高cqw・campaign幅% 等）は基底のまま比例追従。
   ★font は token 実値で換算（--fs-2xl=56 / --fs-3xl=64 / --fs-88=88 / --fs-xl=42 / --fs-5xl=80 / --fs-lg=32 / --fs-base=24）。 */
@media (min-width: 1024px) and (max-width: 1370px) {
  .price__card        { padding-block: 5.255cqw; gap: 6.423cqw; }      /* 72 / 88 */
  .price__title       { font-size: 4.088cqw; gap: 0.584cqw; }          /* 56 / 8 */
  .price__plan        { gap: 0.584cqw; }                               /* 8 */
  .price__label       { font-size: 4.088cqw; padding: 0 0.584cqw; }    /* 56 / 0 8 */
  .price__amount      { font-size: 4.672cqw; margin-top: 0.584cqw; }   /* 64 / 8 */
  .price__amount .num { font-size: 6.423cqw; margin-right: 1.168cqw; } /* 88 / 16 */
  .price__note        { font-size: 2.336cqw; margin-top: 1.168cqw; }   /* 32 / 16 */
  .price__campaign    { padding: 4.088cqw 2.920cqw; gap: 2.920cqw; }   /* 56 40 / 40 */
  .price__campaign-title { font-size: 4.088cqw; }                      /* 56 */
  .price__deco        { top: 2.920cqw; }                               /* 40 */
  .price__content     { gap: 1.168cqw; }                               /* 16 */
  .price__free        { font-size: 3.066cqw; }                         /* 42 */
  .price__free .num   { font-size: 5.839cqw; margin-inline: 0.292cqw; } /* 80 / 4 */
  .price__desc        { font-size: 1.752cqw; }                         /* 24 */
  .price__btn         { font-size: 2.336cqw; gap: 0.584cqw; margin-top: 0.584cqw; } /* 32 / 8 / 8 */
}