@charset "UTF-8";
/* ==========================================================================
   料金ページ（page-pricing.php）専用スタイル
    - 初期費用の枠 / プラン料金表示のカスタム分を切り出したもの
   - content.css の後に読み込むこと（記述順・詳細度で上書きするため）
   ========================================================================== */

/* --------------------------------------------------------------------------
   初期費用の枠（ベーシック・プレミアム列の上に配置）
   -------------------------------------------------------------------------- */
.p-pricing-initial {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 4px;
  /* SP時、スティッキーヘッダーの背景帯（.p-table-price__head:before）が
     「+」の上に重なって隠してしまうため、前面に出す。
     オフセットは付けないのでレイアウト・間隔は変わらない。 */
  position: relative;
  z-index: 2;
}
.p-pricing-initial__body {
  /* ベーシック＋プレミアム列幅（26.0416% × 2）に合わせる */
  width: 52.0833%;
  padding: 0 10px;
  box-sizing: border-box;
}
.p-pricing-initial__box {
  display: block;
  padding: 14px 20px;
  border-radius: 14px;
  background: #fff;
  color: #1a1a1a;
  font-size: 1.1rem;
  font-weight: 700;
  text-align: center;
}
.p-pricing-initial__plus {
  display: block;
  margin-top: 2px;
  color: #b1b3b8;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1;
  text-align: center;
}

/* --------------------------------------------------------------------------
   プラン料金表示（ベーシック／プレミアム）
   -------------------------------------------------------------------------- */
/* プラン名（ベーシック／プレミアム）
   ※ クラスを付けたことで content.css の
     「.p-table-price__head span:not([class])」の指定（1.125rem・太字）が
     効かなくなるため、本来のスタイルをここで明示的に復元しつつ少しだけ拡大する。 */
.p-pricing-plan__name {
  display: block;
  margin-bottom: 24px;
  font-size: 1.25rem; /* 元 1.125rem から少しだけ拡大 */
  font-weight: 700;
  line-height: 1.3;
}

/* 料金ブロック（p-table-price__inner と併用。gap のみ追加指定） */
.p-pricing-plan__price {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 6px;
}

/* 「1ユーザー」「月額」の縦積みキャプション */
.p-pricing-plan__caption {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  font-size: 1.2rem;
  line-height: 1.2;
}
.p-pricing-plan__user {
  white-space: nowrap;
  /* 「月額」ボックスの幅（右端）に揃うよう小さくする */
  font-size: 0.85rem;
}

/* 「0円」高さ揃え用スペーサー（SPのみ使用）。PCでは非表示にして影響を与えない */
.p-pricing-plan__caption--spacer {
  display: none;
}

/* 「月額」ラベル（白地に各プランのアクセントカラー） */
.p-pricing-plan__monthly {
  padding: 3px 10px;
  border-radius: 4px;
  background: #fff;
}
.p-pricing-plan__monthly--basic {
  color: #0000cd;
}
.p-pricing-plan__monthly--premium {
  color: #40b8b0;
}

/* 金額の数字・単位。content.css 側（.p-table-price .p-table-price__number 等）を
   上書きするため、同じ詳細度（.p-table-price スコープ）で指定する。 */
.p-table-price .p-pricing-plan__number {
  font-size: 3rem;
}
.p-table-price .p-pricing-plan__unit {
  font-size: 1.6rem;
}

/* 「＋」記号（料金と基本料金の連結） */
.p-pricing-plan__plus {
  display: block;
  margin-top: 8px;
  font-size: 1.6rem;
  line-height: 1;
}

/* 「基本料金」 */
.p-pricing-plan__base {
  display: block;
  margin-top: 6px;
  margin-bottom: 22px;
  font-size: 1.5rem;
}

/* 「詳細料金のお問い合わせ」ボタンの最大幅 */
.p-pricing-plan__btn {
  max-width: 210px;
}

/* ==========================================================================
   SP（スマートフォン）表示
    - SP時は各プラン列が flex:1 / max-width:33.33%（3列で全幅）になるため、
     PC の横並び価格レイアウトだと収まらない。縦積み・中央揃えに切り替える。
   ========================================================================== */
@media (max-width: 767.98px) {
  /* 初期費用の枠：ベーシック＋プレミアム列幅（33.33% × 2）に合わせる */
  .p-pricing-initial__body {
    width: 66.6666%;
  }

  /* プラン名：狭い列でも1行に収まるよう縮小 */
  .p-pricing-plan__name {
    margin-bottom: 2.6666667vw;
    font-size: 3.2vw;
  }

  /* 料金ブロック：キャプション（1ユーザー/月額）を上段に折り返し、
     数字＋単位（600円~）は下段で1行にまとめて中央寄せする。
     - caption を flex-basis:100% にして1段目を占有させる
     - 数字と単位は align-items:flex-end でベースライン下端を揃える
       （align-items:flex-end は content.css の __inner から継承） */
  .p-table-price .p-pricing-plan__price {
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-end;
    column-gap: 1.0666667vw;
    row-gap: 1.0666667vw;
  }

  /* 「1ユーザー」「月額」を1段目に中央揃えで配置 */
  .p-pricing-plan__caption {
    flex-basis: 100%;
    align-items: center;
    gap: 1.0666667vw;
    font-size: 2.9333333vw;
  }

  /* 無料トライアルの「0円」を、他プランの金額（600円~/1,500円~）の高さに揃える。
     他プランは金額の上に「1ユーザー/月額」があり金額が下がるため、
     トライアルには同じ高さの透明なスペーサーを入れて位置を合わせる。 */
  .p-pricing-plan__caption--spacer {
    display: flex;
    visibility: hidden;
    align-items: center;
    /* 金額ブロックの行間（row-gap）ぶんを補正して数字の高さをぴったり合わせる */
    margin-bottom: 1.0666667vw;
  }
  .p-pricing-plan__user {
    font-size: 2.6666667vw;
  }
  .p-pricing-plan__monthly {
    padding: 0.5333333vw 2.1333333vw;
  }

  /* 金額の数字・単位：列幅（約33vw）に収める */
  .p-table-price .p-pricing-plan__number {
    font-size: 7.4666667vw;
  }
  .p-table-price .p-pricing-plan__unit {
    font-size: 3.2vw;
  }

  /* 「＋」「基本料金」 */
  .p-pricing-plan__plus {
    margin-top: 1.0666667vw;
    font-size: 3.7333333vw;
  }
  .p-pricing-plan__base {
    margin-top: 1.0666667vw;
    margin-bottom: 4.2666667vw;
    font-size: 3.7333333vw;
  }
}