/* =========================================================
 * price.css : 「04 料金」ページ固有スタイル
 * デザイン基準: design-reference/04-price-pc.png (1440x6762) / 04-price-sp.png
 * 中央コンテンツ幅 1024 / PC左右余白 208px
 * base -> header -> footer -> cta -> price -> spcv の順で読み込む
 * 共通コンポーネント（par-subtitle / breadcrumbs / btn-pill）は
 * services.css / company.css と同じ値を自己完結で定義。
 * ========================================================= */

/* ----- ヒーローサブ（company-hero と同型・背景は company/hero.jpg 流用）----- */
.price-hero {
  position: relative;
  width: 100%;
  height: 120px; /* Figma SP ヘッダーサブ 375x120 */
  overflow: hidden;
}

@media (min-width: 1025px) {
  .price-hero {
    height: 250px;
  }
}

.price-hero__bg {
  position: absolute;
  inset: 0;
  background-image: url("../images/price/hero.jpg");
  background-size: cover;
  background-position: center;
}

.price-hero__content {
  position: relative;
  height: 100%;
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad-sp);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (min-width: 1025px) {
  .price-hero__content {
    padding-inline: 0;
  }
}

.price-hero__title {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 24px; /* Figma SP 24 */
  line-height: 1.3;
  letter-spacing: 1.4px;
  color: var(--color-text-sub); /* #3F3B3A */
}

@media (min-width: 1025px) {
  .price-hero__title {
    font-size: 40px;
    letter-spacing: 2px;
  }
}

/* ----- 共通サブタイトル（英語サブ + 紺h2）----- */
.par-subtitle {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 15px;
}

.par-subtitle__en {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 12px;
  line-height: 22px;
  letter-spacing: 0;
  color: var(--color-accent);
}

@media (min-width: 1025px) {
  .par-subtitle__en {
    font-size: 16px;
    line-height: 28px;
  }
}

.par-subtitle__jp {
  color: var(--color-navy);
}

/* ----- 共通：ピルボタン（services.css と同値）----- */
.btn-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 200px;
  padding: 12px 40px;
  border-radius: 50px;
  background: var(--color-accent);
  color: var(--color-bg-white);
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 14px;
  line-height: 24px;
  white-space: nowrap;
  transition: opacity var(--transition-base), transform var(--transition-base);
}

.btn-pill:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

.btn-pill__arrow {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  filter: brightness(0) invert(1);
}

.btn-pill--navy { background: var(--color-navy); }

/* リファレンス基準：料金ブロックの詳細ボタンは全て濃紺 */
.price-block .btn-pill { background: var(--color-navy); }

/* =========================================================
 * イントロ（Price / 料金 + リード）
 * ========================================================= */
.price-intro {
  background: var(--color-bg-beige); /* #F9F7F2 */
  padding-top: 56px;
  padding-bottom: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

@media (min-width: 1025px) {
  .price-intro {
    padding-top: 80px;
    padding-bottom: 8px;
    gap: 32px;
  }
}

.price-intro__lead {
  max-width: 840px;
  width: 100%;
  padding-inline: var(--container-pad-sp);
  margin-inline: auto;
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 16px;
  line-height: 24px; /* Figma SP lh24 */
  color: var(--color-text-black);
  text-align: left;
}

@media (min-width: 1025px) {
  .price-intro__lead {
    padding-inline: 0;
    font-size: 20px;
    line-height: 32px;
    letter-spacing: 0.05em; /* Figma PC 1px */
    text-align: center;
  }
}

/* =========================================================
 * 帯（運用代行 / 内製化 / コンサル）
 * ========================================================= */
.price-band {
  width: 100%;
  padding-block: 56px;
}

@media (min-width: 1025px) {
  .price-band {
    padding-block: 92px;
  }
}

.price-band--white { background: var(--color-bg-white); }
.price-band--beige { background: var(--color-bg-beige); }     /* #F9F7F2 */
.price-band--blue  { background: var(--color-bg-blue-gray); } /* #F0F2F5 */

.price-inner {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad-sp);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

@media (min-width: 1025px) {
  .price-inner {
    padding-inline: 0;
    gap: 72px;
  }
}

.price-band__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 15px;
}

.price-band__title {
  color: var(--color-text-black);
}

.price-band__catch {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: 0.05em;
  color: var(--color-text-black);
}

@media (min-width: 1025px) {
  .price-band__catch {
    font-size: 24px;
    letter-spacing: 1.2px;
  }
}

.price-band__intro {
  max-width: 800px;
  color: var(--color-text-sub);
  text-align: left;
}

@media (min-width: 1025px) {
  .price-band__intro {
    text-align: center;
  }
}

/* ----- 帯ごとのSP出し分け（Figmaが帯ごとに矛盾するため実値どおり）----- */
@media (max-width: 1024px) {
  /* B. 帯タイトル：band1(--white) のみ fs20 / 紺 */
  .price-band--white .price-band__title {
    font-size: 20px;      /* Figma SP band1 */
    color: var(--color-navy); /* #00103E */
  }

  /* C. 帯キャッチ：band1 は lh24 / ls0、band2/3 は fs20 */
  .price-band--white .price-band__catch {
    line-height: 24px;    /* Figma SP band1 lh24 */
    letter-spacing: 0;    /* Figma SP band1 ls0 */
  }
  .price-band--beige .price-band__catch,
  .price-band--blue .price-band__catch {
    font-size: 20px;      /* Figma SP band2/3 */
  }

  /* A. 帯説明文：band2/3 は fs16 / lh24（band1 は t-text-sm-bold の 14/22 が正）*/
  .price-band--beige .price-band__intro,
  .price-band--blue .price-band__intro {
    font-size: 16px;
    line-height: 24px;
  }
}

/* =========================================================
 * 料金ブロック（番号バッジ + タイトル / 画像 + 詳細 / ボタン）
 * ========================================================= */
.price-block {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

@media (min-width: 1025px) {
  .price-block {
    gap: 34px;
  }
}

/* ----- ヘッダ行：丸番号バッジ + タイトル（左寄せ）----- */
.price-block__head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  width: 100%;
}

.price-block__badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-accent); /* #C0AF72 ベージュ帯（06）のバッジ金 */
  color: var(--color-bg-white);
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 18px;
  line-height: 1;
  letter-spacing: 0.02em;
}

/* バッジ背景は帯ごとに色が異なる */
.price-band--white .price-block__badge { background: var(--color-bg-deep-beige); } /* #D3BF7C 白帯（01〜05） */
.price-band--blue  .price-block__badge { background: var(--color-navy); }          /* #00103E 青帯（07〜08）は紺 */

@media (min-width: 1025px) {
  .price-block__badge {
    width: 80px;          /* Figma PC: 番号バッジ円 80×80（56だと小さかった） */
    height: 80px;
    font-size: 28px;      /* Figma: 番号 28px（円は80でも数字は28） */
  }
}

.price-block__title {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: var(--color-text-black);
  text-align: left;
}

@media (min-width: 1025px) {
  .price-block__title {
    font-size: 32px;
    letter-spacing: 0.05em;
  }
}

/* ----- 本体：画像（左 358×242）+ 料金詳細（右）----- */
.price-block__body {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

@media (min-width: 1025px) {
  .price-block__body {
    flex-direction: row;
    align-items: flex-start;
    gap: 40px;
  }
}

.price-block__image {
  width: 100%;
  max-width: 358px;
  flex-shrink: 0;
  border-radius: 10px; /* Figma: 料金ブロック画像角丸10 */
  overflow: hidden;
  aspect-ratio: 358 / 242;
}

@media (max-width: 1024px) {
  /* E. Figma SP 本文画像は帯/ブロックごとに高さが異なる（Figma実値どおり出し分け）
   *    01/03/06/07/08 = 343x200 ・ 02 = 343x230 ・ 04/05 = 343x232
   *    ※06 のみ横幅296（x=40インセット）だが、レイアウト崩れを避け高さのみ合わせる（残課題として報告）
   *    PCは全ブロック 358x242 のまま */
  .price-block__image {
    aspect-ratio: 343 / 200;
  }
  .price-block__image--h230 {
    aspect-ratio: 343 / 230;
  }
  .price-block__image--h232 {
    aspect-ratio: 343 / 232;
  }
}

@media (min-width: 1025px) {
  .price-block__image {
    width: 358px;
  }
}

.price-block__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.price-block__detail {
  flex: 1 1 0;
  min-width: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ----- プラン（名称 + 箇条書き）----- */
.price-plan {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.price-plan__name {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 18px; /* Figma SP プラン名 18 */
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: var(--color-text-black);
}

@media (min-width: 1025px) {
  .price-plan__name {
    font-size: 20px;        /* Figma PC プラン名 */
    line-height: 1.7;
    letter-spacing: 0.05em; /* Figma PC 1px */
  }
}

.price-plan__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.price-plan__list li {
  position: relative;
  padding-left: 1.1em;
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.7;
  color: var(--color-text-black);
}

@media (min-width: 1025px) {
  .price-plan__list li {
    font-size: 15px;
    line-height: 1.8;
  }
}

.price-plan__list li::before {
  content: "・";
  position: absolute;
  left: 0;
  top: 0;
}

/* ----- 注記（※）----- */
.price-notes {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 2px;
}

.price-notes li {
  position: relative;
  padding-left: 1.1em;
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.65;
  color: var(--color-text-sub); /* #3F3B3A */
}

@media (min-width: 1025px) {
  .price-notes li {
    font-size: 13px;
    line-height: 1.7;
  }
}

.price-notes li::before {
  content: "※";
  position: absolute;
  left: 0;
  top: 0;
}

/* ----- ボタン（PCは右の詳細カラム中央 / SPは全幅中央）----- */
.price-block__more {
  display: flex;
  justify-content: center;
  width: 100%;
}

@media (min-width: 1025px) {
  .price-block__more {
    /* 画像(358) + gap(40) = 398 分だけ右にずらし、詳細カラム内で中央寄せ */
    padding-left: 398px;
  }
}