.l-inner.l-inner__contact {
  max-width: 1000px !important;
  padding: 0 20px;
}

.l-subscription-grid {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  max-width: 1000px;
  margin: 0 auto;
  gap: 40px;
}

.l-subscription-grid {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: flex-start;
  max-width: 1000px;
  margin: 0 auto;
  gap: 40px;
}

/* 注文完了時：サイドバー非表示 & 中央に寄せる */
#lp-subscription.is-complete .l-subscription-sidebar {
  display: none;
}

#lp-subscription.is-complete .l-subscription-main {
  width: 100%;
}

#lp-subscription.is-complete .l-subscription-grid {
  justify-content: center;
}

.l-inner.l-inner__contact,
.p-contact__content,
.p-form-product-register,
.u-hidden {
  overflow: visible !important;
}

.l-subscription-main {
  flex: 1;
  min-width: 0;
}

/* サイドバー列ラッパー（幅・sticky・PC専用ステップナビを含む） */
.l-subscription-sidebar {
  width: 339px;
  flex-shrink: 0;
  position: -webkit-sticky;
  position: sticky;
  top: 100px;
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* 料金明細グレーボックス */
.l-subscription-sidebar-wrap {
  background: #f9f9f9;
  padding: 25px;
  border-radius: 8px;
}

.l-subscription-grid .p-btn01 {
  background-color: #ffd167 !important;
  color: #2a2a2a !important;
}

/* CTAボタンのホバーアクション */
#btn-to-confirm,
#btn-submit-payment,
.p-btn01 {
  transition: opacity 0.3s ease !important;
}

#btn-to-confirm:hover,
#btn-submit-payment:hover,
.p-btn01:hover {
  opacity: 0.7 !important;
}

@media (min-width: 769px) {
  .l-subscription-main .p-wrap01 {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
  }

  /* エラー出現時はラベルが中央に浮かないよう上揃えに切り替え */
  .l-subscription-main .p-wrap01:has(.error-text) {
    align-items: flex-start;
  }
  .l-subscription-main .p-wrap01:has(.error-text) > .p-texts01 {
    padding-top: 10px;
  }

  .l-subscription-main .p-wrap01>.p-texts01 {
    width: 30%;
    margin-bottom: 0;
    flex-shrink: 0;
  }

  .l-subscription-main .p-wrap01> :not(.p-texts01) {
    flex: 1;
    min-width: 0;
  }
}

/* カード名義人フィールドもエラー時に上揃え */
.p-credit-card-field:has(.error-text) {
  align-items: flex-start !important;
}
.p-credit-card-field:has(.error-text) .p-text01 {
  padding-top: 10px;
}

.l-subscription-main .p-input,
.l-subscription-main .p-date,
.l-subscription-main .p-select,
.l-subscription-main .p-textarea {
  width: 100%;
  border: 1px solid #cccccc !important;
  border-radius: 3px !important;
  padding: 8px 16px !important;
  min-height: 44px !important;
  line-height: 1.5 !important;
  vertical-align: middle !important;
  box-sizing: border-box;
  background: #fff;
  font-size: 14px !important;
}

.l-subscription-main .p-input:focus,
.l-subscription-main .p-date:focus,
.l-subscription-main .p-select:focus,
.l-subscription-main .p-textarea:focus,
.l-subscription-main select.p-input:focus {
  border-color: #01a273 !important;
  outline: none !important;
}

/* 受取日時の入力枠の比率(日にち3:時間7) */
.l-subscription-main .p-wrap02 {
  display: flex;
  gap: 10px;
  width: 100%;
}

.l-subscription-main .p-wrap02 .p-date {
  flex: 3;
}

.l-subscription-main .p-wrap02 .p-input,
.l-subscription-main .p-wrap02 select {
  flex: 7;
}

.l-subscription-main .p-input::placeholder,
.l-subscription-main .p-date::placeholder,
.l-subscription-main select.p-select.is-placeholder,
.l-subscription-main select.p-input.is-placeholder,
.l-subscription-main input.p-date.is-placeholder,
.l-subscription-main input.p-date.is-placeholder::-webkit-datetime-edit,
.l-subscription-main input.p-date.is-placeholder::-webkit-datetime-edit-fields-wrapper,
.l-subscription-main input.p-date.is-placeholder::-webkit-datetime-edit-text,
.l-subscription-main input.p-date.is-placeholder::-webkit-datetime-edit-month-field,
.l-subscription-main input.p-date.is-placeholder::-webkit-datetime-edit-day-field,
.l-subscription-main input.p-date.is-placeholder::-webkit-datetime-edit-year-field {
  color: #b3b3b3 !important;
  font-size: 14px !important;
}

.l-subscription-main .p-text01,
.l-subscription-main .p-texts01 p {
  color: #545454 !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}

.l-subscription-main .p-text02 {
  font-size: 13px;
}

.l-subscription-main .p-text01 .must,
.l-subscription-main .p-texts01 .must,
.l-subscription-main .must {
  color: #01a273 !important;
  font-size: 14px !important;
  margin-left: 4px !important;
  vertical-align: middle !important;
  display: inline-block !important;
  line-height: 1 !important;
}

.l-subscription-main .p-wrap01:not(:last-child) {
  margin-bottom: 18px !important;
}

/* クレジットカード情報のグレーボックス */
.p-credit-card-box {
  background: #f6f6f6 !important;
  padding: 24px !important;
  border-radius: 4px !important;
  width: 100% !important;
  /* 親の75%幅いっぱいに広げる */
}

.p-credit-card-field:not(:last-child) {
  margin-bottom: 20px !important;
}

.p-credit-card-field {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 15px !important;
}

.p-credit-card-field .p-text01 {
  width: 200px !important;
  flex-shrink: 0 !important;
  margin-bottom: 0 !important;
  font-size: 14px !important;
}

/* CVC行（入力枠＋説明文 横並び） */
.p-cvc-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.p-cvc-input {
  width: 110px !important;
  flex-shrink: 0;
}

.p-expiry-input {
  width: 140px !important;
}

@media (min-width: 769px) {
  #card-holder-name {
    width: 280px !important;
  }
}

.p-cvc-hint {
  font-size: 12px;
  color: #999;
  line-height: 1.4;
  white-space: nowrap;
}

@media (min-width: 769px) {
  .p-wrap01.u-align-top {
    align-items: flex-start !important;
  }

  .p-wrap01.u-align-top .p-texts01 {
    padding-top: 13px !important;
  }

  .p-wrap01.u-align-top-payment {
    align-items: flex-start !important;
  }

  .p-wrap01.u-align-top-payment .p-texts01 {
    padding-top: 36px !important;
  }
}

.l-subscription-sidebar-wrap {
  background-color: #f5f5f5 !important;
}

/* --- リッチなステップナビゲーション --- */
.p-step-nav {
  width: 100%;
  padding: 10px 0 30px;
}

.p-step-nav__list {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
}

/* 数珠繋ぎの線 */
.p-step-nav__list::before {
  content: '';
  position: absolute;
  top: 22px;
  left: 16%;
  right: 16%;
  height: 4px;
  background: #eee;
  z-index: 1;
}

.p-step-nav__list::after {
  content: '';
  position: absolute;
  top: 22px;
  left: 16%;
  width: calc(68% * (var(--progress-val, 0) / 100));
  height: 4px;
  background: #01a273;
  z-index: 2;
  transition: width 0.4s ease;
}

.p-step-nav__item {
  flex: 1;
  text-align: center;
  position: relative;
  z-index: 3;
}

.p-step-nav__icon {
  width: 48px;
  height: 48px;
  background: #fff;
  border: 4px solid #eee;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 12px;
  color: #ccc;
  font-weight: bold;
  font-size: 18px;
  transition: all 0.3s ease;
  position: relative;
}

.p-step-nav__text {
  font-size: 14px;
  font-weight: bold;
  color: #aaa;
  display: block;
  transition: color 0.3s ease;
}

/* Active State */
.p-step-nav__item.is-active .p-step-nav__icon {
  border-color: #01a273;
  background: #01a273;
  color: #fff;
  box-shadow: 0 0 0 6px rgba(1, 162, 115, 0.15);
}

.p-step-nav__item.is-active .p-step-nav__text {
  color: #01a273;
}

/* Completed State */
.p-step-nav__item.is-completed .p-step-nav__icon {
  border-color: #01a273;
  background: #fff;
  color: #01a273;
}

.p-step-nav__item.is-completed .p-step-nav__icon::after {
  content: '✓';
  position: absolute;
  font-size: 22px;
}

.p-step-nav__item.is-completed .p-step-nav__icon .p-step-nav__number {
  display: none;
}

.p-step-nav__item.is-completed .p-step-nav__text {
  color: #333;
}

/* --- 同意チェックボックス（既存スタイル流用） --- */
.p-agreement-label {
  display: flex !important;
  align-items: center;
  font-size: 15px;
  cursor: pointer;
  color: #333;
  line-height: 1.4;
  text-align: left;
}

.p-agreement-label a {
  color: #01a273 !important;
  text-decoration: underline !important;
  margin: 0 4px;
}

.p-agreement-label a:hover {
  text-decoration: none !important;
}

/* 支払うボタンの無効化スタイル */
#btn-submit-payment:disabled {
  background: #ccc !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
}

/* ---------------------------------- */

@media (max-width: 768px) {

  /* ステップナビゲーション（スマホ） */
  .p-step-nav {
    padding: 0 0 30px;
    margin-top: -30px;
  }

  .p-step-nav__list::before,
  .p-step-nav__list::after {
    top: 18px;
  }

  .p-step-nav__icon {
    width: 40px;
    height: 40px;
    border-width: 3px;
    font-size: 16px;
    margin-bottom: 8px;
  }

  .p-step-nav__item.is-active .p-step-nav__icon {
    box-shadow: 0 0 0 4px rgba(1, 162, 115, 0.15);
  }

  .p-step-nav__text {
    font-size: 13px;
  }

  .p-step-nav__item.is-completed .p-step-nav__icon::after {
    font-size: 18px;
  }

  .l-subscription-main .p-wrap01 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }

  .l-subscription-main .p-wrap01>.p-texts01,
  .l-subscription-main .p-wrap01>div {
    width: 100% !important;
  }

  .l-subscription-main .p-wrap01>.p-texts01 {
    margin-bottom: 0;
  }

  /* 見出し（お申込み情報など）のフォントサイズ */
  .p-block01 h3 {
    font-size: 15px !important;
  }

  /* 確認画面テーブルのフォントサイズ（インラインを上書き） */
  #step-confirm table,
  .p-confirm-table {
    font-size: 13px !important;
  }
  #step-confirm table th,
  #step-confirm table td,
  .p-confirm-table th,
  .p-confirm-table td {
    font-size: 13px !important;
  }

  /* 項目名のフォントサイズ */
  .l-subscription-main .p-text01,
  .l-subscription-main .p-texts01 p {
    font-size: 13px !important;
  }

  .l-subscription-grid {
    flex-direction: column;
    gap: 0 !important;
  }

  .l-subscription-main {
    width: 100%;
    position: static;
  }
  .l-subscription-sidebar {
    width: 100%;
    position: static;
    margin-top: 20px;
  }
  .l-subscription-sidebar-wrap {
    width: 100%;
    position: static;
  }

  /* 入力枠のスマホ調整
     font-size:16px（iOSズーム防止）＋scale(0.875)で視覚14px相当に。
     幅・高さをスケール前に1/0.875倍して膨らませ、overflow-x:hiddenでクリップ。
     overflow-yはauto（固定高さなしのため実質クリップなし）→エラーテキストが縦に見える。 */
  .l-subscription-main .p-wrap01 > :not(.p-texts01) {
    overflow-x: hidden;
  }
  .l-subscription-main .p-input,
  .l-subscription-main .p-date,
  .l-subscription-main .p-select,
  .l-subscription-main .p-textarea {
    padding: 6px 12px !important;
    font-size: 16px !important;
    width: calc(100% / 0.875) !important;
    min-height: calc(38px / 0.875) !important;
    transform: scale(0.875);
    transform-origin: left top;
    margin-bottom: calc(38px - 38px / 0.875) !important;
  }

  .l-subscription-main .p-input::placeholder,
  .l-subscription-main .p-date::placeholder,
  .l-subscription-main select.p-select.is-placeholder,
  .l-subscription-main select.p-input.is-placeholder,
  .l-subscription-main input.p-date.is-placeholder,
  .l-subscription-main input.p-date.is-placeholder::-webkit-datetime-edit,
  .l-subscription-main input.p-date.is-placeholder::-webkit-datetime-edit-fields-wrapper,
  .l-subscription-main input.p-date.is-placeholder::-webkit-datetime-edit-text,
  .l-subscription-main input.p-date.is-placeholder::-webkit-datetime-edit-month-field,
  .l-subscription-main input.p-date.is-placeholder::-webkit-datetime-edit-day-field,
  .l-subscription-main input.p-date.is-placeholder::-webkit-datetime-edit-year-field {
    font-size: 16px !important;
  }

  .l-subscription-main .p-text02 {
    font-size: 12px;
  }

  .error-text {
    font-size: 13px;
    /* margin-top: 10px で、input の margin-bottom: -5.4px と合わせ視覚約4.6px の隙間 */
    margin-top: 10px;
  }

  .p-cvc-hint {
    font-size: 11px;
  }

  .p-agreement-label {
    font-size: 14px;
  }

  .p-agreement-checkbox {
    width: 15px;
    height: 15px;
    margin-top: 4px;
  }

  .p-wrap03 {
    margin-top: 8px;
  }

  /* クレジットカード情報のスマホ最適化（すべて縦並び） */
  .p-credit-card-box {
    display: block;
  }

  .p-credit-card-field {
    width: 100%;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 5px !important;
    margin-bottom: 0;
    overflow-x: hidden;
  }

  .p-credit-card-field .p-text01 {
    width: 100% !important;
    margin-bottom: 0 !important;
  }

  /* CVC以外のStripe枠・input は全幅 */
  .p-credit-card-field:not(.p-credit-card-field--cvc) > div,
  .p-credit-card-field:not(.p-credit-card-field--cvc) > input {
    width: 100% !important;
  }

  /* お支払い情報ブロック：スケールhackをリセット
     Stripe要素はiframeを内包するdivのため、scale/幅拡張を適用すると表示崩れが起きる */
  .p-credit-card-box .p-input {
    transform: none !important;
    width: 100% !important;
    min-height: 38px !important;
    margin-bottom: 0 !important;
    font-size: 14px !important;
  }
  /* カード名義人のみ font-size:16px + scale(0.875) で iOSズーム防止＋視覚14px */
  .p-credit-card-box input.p-input {
    font-size: 16px !important;
    width: calc(100% / 0.875) !important;
    min-height: calc(38px / 0.875) !important;
    transform: scale(0.875) !important;
    transform-origin: left top;
    margin-bottom: calc(38px - 38px / 0.875) !important;
  }
  /* p-col-input ラッパーも幅リセット */
  .p-credit-card-box .p-col-input {
    overflow-x: visible;
    width: 100%;
  }
}

/* ==========================================
   モバイル専用：注文内容サマリー（上部表示）
   ========================================== */
.p-mobile-summary {
  display: none;
}
@media (max-width: 768px) {
  .p-mobile-summary {
    display: block;
    background: #f5f5f5;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 24px;
  }
  .p-mobile-summary .p-sidebar-heading {
    margin-top: 0;
  }
  .p-mobile-summary .p-sidebar-order-inner {
    margin-bottom: 0;
  }
}

/* ==========================================
   ステップナビ PC/スマホ 表示切り替え
   ========================================== */

/* デフォルト: 両方表示（後でメディアクエリで制御） */
.p-step-nav--mobile {
  display: block;
}
.p-step-nav--pc {
  display: none;
}

/* PC（769px以上）: サイドバー側（PC専用）を表示、メイン側（スマホ専用）を非表示 */
@media (min-width: 769px) {
  .p-step-nav--mobile {
    display: none;
  }
  .p-step-nav--pc {
    display: block;
    padding: 0 0 20px;
    margin-bottom: 10px;
  }
}

/* スマホ（768px以下）: PC専用を非表示（スマホ専用はデフォルトで表示済み） */
@media (max-width: 768px) {
  .p-step-nav--pc {
    display: none;
  }
}

/* ==========================================
   戻るリンク
   ========================================== */
#btn-back-link {
  color: #b0b0b0 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
}

#btn-back-link-wrap {
  margin-top: 24px !important;
}

@media (max-width: 768px) {
  #btn-back-link {
    font-size: 13px !important;
  }
}

/* ==========================================
   バリデーションエラー用スタイル
   ========================================== */
.p-input.is-error,
.p-date.is-error,
select.p-input.is-error {
  border-color: #ff4c4c !important;
  background-color: #fffafb !important;
}

.error-text {
  color: #ff4c4c;
  font-size: 13px;
  margin-top: 5px;
  display: block;
  font-weight: bold;
  width: 100%;
}

/* 複数枠（姓名や電話・郵便番号など）の親ラップ用エラー配置 */
.flex-error-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
}

/* ==========================================
   モーダル用スタイル
   ========================================== */
.p-insurance-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.p-insurance-modal.is-show {
  opacity: 1;
  pointer-events: auto;
}

.p-insurance-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(2px);
  cursor: pointer;
}

.p-insurance-modal__content {
  position: relative;
  background: #fff;
  width: 90%;
  max-width: 600px;
  padding: 40px 30px 30px;
  border-radius: 20px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  transform: translateY(20px);
  transition: transform 0.3s ease;
  max-height: 90vh;
  overflow-y: auto;
}

.p-insurance-modal.is-show .p-insurance-modal__content {
  transform: translateY(0);
}

.p-insurance-modal__close {
  position: absolute;
  top: 15px;
  right: 15px;
  background: none;
  border: none;
  font-size: 28px;
  line-height: 1;
  color: #aaa;
  cursor: pointer;
  padding: 5px;
}

.p-insurance-modal__close:hover {
  color: #333;
}

/* ============================================================
 * 決済処理中オーバーレイ
 * ============================================================ */
#payment-loading {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 9999;
  justify-content: center;
  align-items: center;
}

#payment-loading.is-active {
  display: flex;
}

.p-payment-loading__inner {
  background: #fff;
  border-radius: 14px;
  padding: 44px 32px 36px;
  text-align: center;
  width: min(340px, 88vw);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}

.p-payment-loading__spinner {
  width: 54px;
  height: 54px;
  border: 5px solid #e0e0e0;
  border-top-color: #01a273;
  border-radius: 50%;
  animation: payment-spin 0.85s linear infinite;
  margin: 0 auto 24px;
}

@keyframes payment-spin {
  to { transform: rotate(360deg); }
}

.p-payment-loading__title {
  font-size: 17px;
  font-weight: 700;
  color: #545454;
  margin: 0 0 10px;
  letter-spacing: 0.04em;
}

.p-payment-loading__step {
  font-size: 13px;
  color: #888;
  margin: 0 0 24px;
  min-height: 1.6em;
  transition: opacity 0.35s ease;
}

.p-payment-loading__caution {
  font-size: 11px;
  color: #e57373;
  margin: 0;
  line-height: 1.7;
  padding-top: 16px;
  border-top: 1px solid #f0f0f0;
}

/* ============================================================
 * 解約確認画面：残金請求の事前告知ブロック
 * ============================================================ */
.p-cancel-notice {
  background: #fff7ec;
  border: 1px solid #f0c674;
  border-radius: 8px;
  padding: 14px 16px 12px;
  margin-bottom: 18px;
}

.p-cancel-notice__title {
  font-size: 14px;
  font-weight: 700;
  color: #8a5a00;
  margin: 0 0 8px;
  line-height: 1.5;
}

.p-cancel-notice__list {
  margin: 0;
  padding-left: 1.2em;
  font-size: 12.5px;
  color: #5a4a20;
  line-height: 1.7;
}

.p-cancel-notice__list li + li {
  margin-top: 6px;
}

.p-cancel-notice__list strong {
  color: #c8410b;
  font-weight: 700;
}

/* 解約入力画面：軽めの予告リード */
.p-cancel-lead-notice {
  font-size: 12.5px;
  color: #777;
  line-height: 1.7;
  margin: 0 0 18px;
}

/* 送信ボタンの直下に置く用（2026-08-28）。ボタンと詰まって見えるので上に余白を取る。
   `p-cancel-lead-notice` 単体は cancel-verify でも使うので、修飾子を足して基底は触らない。 */
.p-cancel-lead-notice--mt {
  margin-top: 14px;
}

/* ==========================================
   セクション見出し（共通）
   ========================================== */
.p-section-heading {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #545454;
  border-left: 3px solid #01a273;
  padding-left: 12px;
}

.p-section-heading--mt {
  margin-top: 40px;
}

/* ==========================================
   申込コンテンツ：外側ブロック調整
   ========================================== */
.p-apply-block {
  padding-top: 5px;
}

.p-apply-block + .p-apply-block {
  margin-top: 40px;
}

/* ==========================================
   お支払い情報ブロック
   ========================================== */
.p-payment-block {
  margin-top: 40px;
  border-top: 1px solid #eee;
  padding-top: 30px;
}

/* ==========================================
   サイドバー：ご注文内容
   ========================================== */
.p-sidebar-heading {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 15px;
  text-align: center;
  color: #666;
}

.p-sidebar-order-inner {
  background: #fff;
  padding: 20px 10px;
}

.p-sidebar-product-row {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
  align-items: flex-start;
}

.p-sidebar-thumb {
  width: 70px;
  height: 70px;
  background: #f0f0f0;
  border-radius: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid #ddd;
}

.p-sidebar-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-sidebar-thumb__no-image {
  color: #bbb;
  font-size: 10px;
  text-align: center;
  line-height: 1.2;
}

.p-sidebar-product-info {
  flex: 1;
}

#sidebar-product-name,
.p-mobile-summary .p-sidebar-product-info > p:first-child {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.4;
  color: #333;
}

#sidebar-product-name.is-empty {
  color: #aaa;
}

#sidebar-plan-name,
.p-mobile-summary .p-sidebar-product-info > p:nth-child(2) {
  font-size: 13px;
  color: #888;
  margin-top: 4px;
}

.p-sidebar-pricing {
  font-size: 14px;
  color: #555;
}

.p-sidebar-price-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
}

.p-sidebar-price-row--ins {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}

.p-sidebar-price-bold {
  font-weight: bold;
}

.p-unit {
  font-size: 0.8em;
  margin-left: 2px;
}

.p-unit--sm {
  font-size: 0.6em;
  margin-left: 2px;
}

.p-sidebar-divider {
  border-bottom: 1px dashed #ccc;
  margin-bottom: 18px;
}

.p-sidebar-total-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.p-sidebar-total-label {
  font-weight: bold;
  font-size: 15px;
}

.p-sidebar-total-label__note {
  font-size: 11px;
  font-weight: normal;
  margin-left: 4px;
  color: #666;
}

#total-price-display,
.p-mobile-summary .p-sidebar-total-row > span:last-child {
  font-size: 1.8em;
  font-weight: bold;
  color: #333;
  line-height: 1;
}

/* ==========================================
   フォーム入力グループ
   ========================================== */
.p-name-group {
  display: flex;
  gap: 10px;
  width: 100%;
}

.p-name-group__item {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.p-tel-group {
  display: flex;
  gap: 10px;
  align-items: center;
}

.p-input--tel {
  width: 80px !important;
}

.p-zip-mark {
  color: #555;
}

.p-input--zip1 {
  width: 60px !important;
}

.p-col-input {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.p-addr-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.p-text01--multiline {
  line-height: 1.4;
}

.p-wrap01--mt {
  margin-top: 15px;
}

.p-insurance-label-text {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.p-insurance-modal-link {
  font-size: 12px;
  color: #01a273;
  text-decoration: none;
  font-weight: normal;
}

.p-datetime-wrap {
  width: 100%;
}

.p-text02--mt {
  margin-top: 10px;
}

@media (max-width: 768px) {
  .p-text02--mt {
    margin-top: 3px;
  }
}

#time-no-designate-notice {
  display: none;
  margin-top: 6px;
}

/* ==========================================
   商品未選択状態
   ========================================== */
.p-no-product {
  text-align: center;
  padding: 60px 20px;
}

.p-no-product__heading {
  font-size: 18px;
  font-weight: bold;
  color: #555;
  margin-bottom: 15px;
}

.p-no-product__body {
  font-size: 14px;
  color: #888;
  margin-bottom: 30px;
}

.p-no-product__link {
  display: inline-block;
  padding: 14px 40px;
  background: #01a273;
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
  font-size: 15px;
  font-weight: bold;
}

/* ==========================================
   カード関連
   ========================================== */
#card-errors {
  color: red;
  margin-top: 15px;
  font-size: 14px;
}

.p-card-saved-note {
  margin-top: 10px;
  font-size: 14px;
  color: #666;
}

.p-block-divider {
  border-bottom: 1px solid #eee;
  margin-top: 40px;
}

/* ==========================================
   CTAボタン
   ========================================== */
#btn-to-confirm {
  width: 100%;
  padding: 18px;
  background: #ffd167;
  color: #2a2a2a;
  border: none;
  border-radius: 6px;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  text-align: center;
  display: block;
  margin-top: 10px;
}

#btn-to-confirm:disabled {
  background: #ccc;
  cursor: not-allowed;
}

#btn-to-confirm-cancel {
  width: 100%;
  padding: 18px;
  background: #01a273;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  text-align: center;
  display: block;
  margin-top: 10px;
  transition: opacity 0.3s ease;
}

#btn-to-confirm-cancel:hover {
  opacity: 0.7;
}

/* 解約フォーム：ボタンエリアのグレー背景を削除 */
#cancel-input-form .l-subscription-sidebar-wrap {
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* 解約フォーム：ボタン下の余白 */
#cancel-input-form {
  padding-bottom: 60px;
}
@media (max-width: 768px) {
  #cancel-input-form {
    padding-bottom: 70px;
  }
  #cancel-input-form .l-subscription-sidebar {
    margin-top: 0;
  }
}

/* 解約フォーム：項目名エリアをやや広く */
@media (min-width: 769px) {
  #cancel-input-form .p-wrap01>.p-texts01 {
    width: 30%;
  }
}

#btn-submit-payment {
  width: 100%;
  padding: 18px;
  background: #ffd167;
  color: #2a2a2a;
  border: none;
  border-radius: 6px;
  font-size: 1.1rem;
  font-weight: bold;
  cursor: pointer;
  text-align: center;
  display: block;
  margin-top: 10px;
  margin-bottom: 15px;
}

/* ==========================================
   戻るリンク（追加プロパティ）
   ========================================== */
#btn-back-link-wrap {
  text-align: left;
  padding-bottom: 40px;
}

#btn-back-link {
  text-decoration: none;
}

/* ==========================================
   解約確認ページ：解約するボタン
   ========================================== */
#btn-submit-cancellation,
#btn-verify-number {
  width: 100%;
  padding: 18px;
  background: #01a273;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  text-align: center;
  display: block;
  margin-top: 10px;
  transition: opacity 0.3s ease;
}

#btn-submit-cancellation:hover,
#btn-verify-number:hover {
  opacity: 0.7;
}

/* 解約確認ページ：ボタンエリアのグレー背景を削除 */
#cancel-confirm-sidebar-wrap {
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* 解約番号確認ページ：サイドバーのグレー背景を削除（confirm に揃える） */
#cancel-verify-form .l-subscription-sidebar-wrap {
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* 解約番号確認ページ：照合失敗＝手続き未完了を伝える警告バナー（琥珀トーン） */
.p-cancel-verify-alert {
  background: #fff8ec;
  border: 1px solid #f0c987;
  border-left: 4px solid #e8a33d;
  border-radius: 6px;
  padding: 16px 18px;
  margin-bottom: 24px;
}

.p-cancel-verify-alert__title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #a45b00;
  border-left: none;   /* 通常の緑左罫を打ち消す */
  padding-left: 0;
  margin-bottom: 10px;
}

.p-cancel-verify-alert__title::before {
  content: "⚠";
  font-size: 20px;
  line-height: 1;
}

.p-cancel-verify-alert__text {
  margin-bottom: 0;
  font-size: 13.5px;
  color: #6b5a3a;   /* 琥珀背景でも読みやすい暖色グレー */
}

/* 解約番号確認ページ：下部の案内文（上部の余白を広めに） */
.p-cancel-verify-help {
  margin-top: 40px;
}

.p-cancel-verify-help__link {
  color: #01a273;
  text-decoration: underline;
  font-weight: bold;
}

.p-cancel-verify-help__link:hover {
  opacity: 0.7;
}

/* 解約番号確認ページ：入力エラー通知（p-form-error-notice の定義は contact.css 側で
   このページでは未読込のため、ここに同等スタイルを持たせる） */
#cancel-verify-form .p-form-error-notice,
.p-cancel-verify-error {
  background: #fff5f5;
  border: 1px solid #ff0101;
  color: #c00;
  padding: 12px 16px;
  margin-bottom: 20px;
  font-size: 14px;
  line-height: 1.5;
  border-radius: 4px;
}

/* ==========================================
   確認ページ：確認テーブル
   ========================================== */
.p-confirm-table {
  width: 100%;
  text-align: left;
  border-collapse: collapse;
  font-size: 15px;
  table-layout: fixed;
}

.p-confirm-table th {
  padding: 12px 0;
  width: 30%;
  font-weight: normal;
  color: #888;
  vertical-align: top;
}

.p-confirm-table td {
  padding: 12px 0;
  color: #2a2a2a;
  vertical-align: top;
}

/* PC：th と td の間に余白を広げる */
@media (min-width: 769px) {
  .p-confirm-table th {
    padding-right: 24px;
    width: 35%;
  }
}

@media (max-width: 768px) {
  .p-confirm-table th {
    width: 33%;
    padding-right: 12px;
  }
  .p-confirm-table th,
  .p-confirm-table td {
    padding-top: 8px;
    padding-bottom: 8px;
  }
}

/* ==========================================
   確認ページ：決済エラーダイアログ
   ========================================== */
#payment-error {
  display: none;
  margin: 20px 0;
  padding: 16px 20px;
  background: #fff5f5;
  border: 1px solid #e57373;
  border-radius: 6px;
}

.p-payment-error__title {
  margin: 0 0 8px;
  font-weight: bold;
  font-size: 15px;
  color: #c62828;
}

.p-payment-error__message {
  margin: 0 0 16px;
  font-size: 14px;
  color: #c62828;
  line-height: 1.6;
}

.p-payment-error__close {
  padding: 9px 20px;
  background: #fff;
  border: 1px solid #e57373;
  border-radius: 4px;
  color: #c62828;
  cursor: pointer;
  font-size: 14px;
}

/* ==========================================
   確認ページ：同意セクション
   ========================================== */
.p-wrap03 {
  margin: 20px 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.p-agreement-checkbox {
  margin: 10px 10px 10px 0;
  flex-shrink: 0;
}

/* ==========================================
   あんしん保険モーダル：内容
   ========================================== */
.p-insurance-modal__heading {
  font-size: 18px;
  font-weight: bold;
  border-bottom: 2px solid #01a273;
  padding-bottom: 10px;
  margin-bottom: 15px;
  color: #333;
}

.p-insurance-modal__body {
  font-size: 14px;
  line-height: 1.8;
  color: #555;
}

.p-insurance-modal__sub-heading {
  margin-top: 20px;
  font-weight: bold;
  color: #01a273;
}

.p-insurance-modal__list {
  list-style: none;
  padding-left: 0;
  margin-top: 5px;
}

.p-insurance-modal__note {
  font-size: 12px;
  color: #888;
  margin-top: 5px;
}

/* ==========================================
   完了ページ
   ========================================== */
.p-complete-content {
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
  padding-top: 40px;
  padding-bottom: 60px;
}

.p-complete-content .c-heading2 {
  margin-top: 0;
  margin-bottom: 50px;
  font-size: 26px;
  font-weight: bold;
  color: #01a273;
  line-height: 1.4;
}

@media (max-width: 768px) {
  .p-complete-content .c-heading2 {
    font-size: 20px;
    margin-top: -20px;
    margin-bottom: 40px;
  }
}

.p-complete-body {
  text-align: left;
  line-height: 1.8;
  color: #333;
}

.p-complete-btn {
  max-width: 300px;
  margin: 60px auto 0;
}

/* ==========================================
   電話番号・郵便番号グループ（SP）
   transform-origin を center top にして「-」前後の余白を均等にする
   ========================================== */
@media (max-width: 768px) {
  .p-tel-group {
    column-gap: 6px;
    row-gap: 0;
  }

  .p-tel-group .p-input {
    width: auto !important;
    margin-bottom: 0 !important;
    transform-origin: center top !important;
  }

  .p-tel-group .p-input--tel {
    width: 80px !important;
  }

  .p-tel-group .p-input--zip1 {
    width: 60px !important;
  }

  /* tel/zipはinputのmargin-bottom:0のため、margin-topのみで隙間を制御 */
  .p-tel-group .error-text {
    margin-top: 4px;
  }
}

/* ==========================================
   受取日時（SP）
   flex アイテムに直接 scale をかけると視覚幅が縮んで外側・間に余白が出るため
   コンテナ（.p-wrap02）ごとスケールする方式に変更。
   ・コンテナを 1/0.875 倍に広げて scale(0.875) → 視覚 100%
   ・gap も逆算して視覚 10px（名前欄と同等）に
   ・入力欄は transform なし → コンテナ scale で font-size 16px が実効 14px に
   ========================================== */
@media (max-width: 768px) {
  .l-subscription-main .p-wrap02 {
    width: calc(100% / 0.875) !important;
    transform: scale(0.875) !important;
    transform-origin: left top !important;
    column-gap: calc(10px / 0.875) !important;
    row-gap: 0 !important;
  }

  .l-subscription-main .p-wrap02 .p-date,
  .l-subscription-main .p-wrap02 .p-input,
  .l-subscription-main .p-wrap02 select {
    width: auto !important;
    min-height: calc(38px / 0.875) !important;
    transform: none !important;
    margin-bottom: 0 !important;
  }

  /* p-wrap02はscale(0.875)されているためエラーテキストが縮小される→逆数で打ち消す */
  /* row-gap:0のため margin-top だけで視覚上4px の隙間（÷0.875で逆算） */
  .l-subscription-main .p-wrap02 .error-text {
    font-size: calc(13px / 0.875) !important;
    width: calc(100% / 0.875) !important;
    margin-top: calc(4px / 0.875) !important;
  }
}