/* =============================================
   オーバースクロール背景色
   html = 上バウンス時（FVミント）、body = 下バウンス時（フッター色）
   theme.css の #fdf5f8（薄ピンク）を上書き
   ============================================= */
html,
body {
  background: #eef3f0 !important;
}

/* =============================================
   Mypage subs_orders: ヘッダー被り解消
   theme.css の一般ルール (specificity 高) に上書きされる問題を解消
   ============================================= */
.p-pdrn_subs_index-minimal > .l-container__row {
  padding-top: 100px !important;
}

/* =============================================
   日付 font-size 統一: 全マイページで clamp(34px, 2.7vw, 42px)
   - Next Delivery date (dashboard)  ← 元から同値
   - PURCHASE DATE (Recent Order)    36px → 42px
   - subs_orders list / show date    62px → 42px
   ============================================= */
.p-pdrn_subs_index-minimal .p-pdrn_subs_minimal-order__date,
.p-pdrn_mypage--focus .p-order_history_summary__order-date {
  font-size: clamp(34px, 2.7vw, 42px) !important;
}

@media (max-width: 719px) {
  .p-pdrn_subs_index-minimal .p-pdrn_subs_minimal-order__date,
  .p-pdrn_mypage--focus .p-order_history_summary__order-date {
    font-size: clamp(30px, 9vw, 38px) !important;
  }
}

.u-text--head {
  color: #1f1d1a !important;
  font-size: 24px !important;
  font-family: var(--pdrn-serif, "Roboto", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif);
}
.u-color--head {
  color: #1f1d1a !important;
}
.u-text--subhead {
  color: #1f1d1a !important;
  font-size: 17px !important;
  font-family: var(--pdrn-sans, "Roboto", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif);
}
.u-text--body {
  color: #6f6a64 !important;
  font-size: 13px !important;
  font-family: var(--pdrn-sans, "Roboto", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif);
}
.u-color--body {
  color: #6f6a64 !important;
}
.u-text--strong {
  color: #1f1d1a !important;
  font-size: 13px !important;
  font-family: var(--pdrn-sans, "Roboto", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif);
}
.u-text--link {
  color: #2f2724 !important;
  font-size: 13px !important;
  font-family: var(--pdrn-sans, "Roboto", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif);
}
.u-text--head--overlay {
  color: #FFFFFF !important;
  font-size: 24px !important;
  font-family: var(--pdrn-serif, "Roboto", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif);
}
.u-text--subhead--overlay {
  color: #FFFFFF !important;
  font-size: 17px !important;
  font-family: var(--pdrn-sans, "Roboto", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif);
}
.u-text--body--overlay {
  color: #FFFFFF !important;
  font-size: 13px !important;
  font-family: var(--pdrn-sans, "Roboto", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif);
}
.u-text--color--overlay {
  color: #FFFFFF !important;
}
.u-color__btn--bg {
  background: #2f2724 !important;
}
.u-color__btn--bg--overlay {
  background: #2f2724 !important;
}
.u-color__btn--bg--reverse {
  background: #FFFFFF !important;
}
.u-color__btn--bg--overlay--reverse {
  background: #FFFFFF !important;
}
.u-color__btn {
  color: #2f2724 !important;
}
.u-text--btn {
  color: #FFFFFF !important;
  font-size: 13px !important;
  font-family: var(--pdrn-sans, "Roboto", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif);
}
.u-text--btn--overlay {
  color: #FFFFFF !important;
  font-size: 13px !important;
  font-family: var(--pdrn-sans, "Roboto", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif);
}
.u-text--btn--reverse {
  color: #2f2724 !important;
  font-size: 13px !important;
  font-family: var(--pdrn-sans, "Roboto", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif);
  border: 1px solid #e6dfd6 !important;
}
.u-text--btn--overlay--reverse {
  color: #2f2724 !important;
  font-size: 13px !important;
  font-family: var(--pdrn-sans, "Roboto", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif);
  border: 1px solid #e6dfd6 !important;
}
.u-color__btn--text {
  color: #FFFFFF !important;
}
.u-color__btn--text--bg {
  background: #FFFFFF !important;
}
.u-text--input {
  color: #6f6a64 !important;
  font-size: 13px !important;
  font-family: var(--pdrn-sans, "Roboto", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif);
}
.u-color--input {
  color: #6f6a64 !important;
}
.u-color__input--bg {
  background: #FFFFFF !important;
}
.u-color__border--input {
  border-color: #e6dfd6 !important;
}
.u-color__bg--base {
  background: #FFFFFF !important;
}
.u-color__bg--main {
  background: #FFFFFF !important;
}
.u-color__border--border {
  border-color: #e6dfd6 !important;
}
.u-color__border--main {
  border-color: #e6dfd6 !important;
}
.u-font--head {
  font-size: 24px !important;
  font-family: var(--pdrn-serif, "Roboto", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif);
}
.u-font--subhead {
  font-size: 17px !important;
  font-family: var(--pdrn-sans, "Roboto", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif);
}
.u-font--body {
  font-size: 13px !important;
  font-family: var(--pdrn-sans, "Roboto", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif);
}
.u-font--bold {
  font-weight: bold;
}

.c-product_info__details__icon::before, .c-product_info__details__icon::after {
  background: #1f1d1a !important;
}

/*================ SNS Icon ================*/

/*================ Other Icon ================*/

  .c-product_item__actions .c-product_item__form--favorite {
    display: none;
  }

  .c-product_item__actions .c-product_item__form--cart {
    display: inline-block;
  }

  .c-product_item .c-product_item__inner__content {
    margin-top: 0;
  }

/*================ Fonts ================*/

/*================ Headings ================*/
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
  font-family: var(--pdrn-serif), var(--pdrn-sans);
}

/* PDP 商品タイトル: serif → sans-serif, サイズ・ウェイト強調 */
.c-product_info__title {
  font-family: var(--pdrn-sans) !important;
  font-size: 32px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
}
@media (max-width: 719px) {
  .c-product_info__title {
    font-size: 26px !important;
  }
}

/*================ Variables ================*/
:root {
  --color-text-head: #1f1d1a;
  --color-text-body: #6f6a64;
  --color-text-overlay: #FFFFFF;
  --color-text-link: #2f2724;
  --color-btn-bg: #2f2724;
  --color-btn-text: #FFFFFF;
  --color-input-text: #6f6a64;
  --color-input-border: #e6dfd6;
  --color-page-bg: #FFFFFF;
  --color-page-border: #e6dfd6;
  --color-page-accent: #2f2724;

  --font-size-text-head: 24px;
  --font-size-text-subhead: 17px;
  --font-size-text-body: 13px;
  --font-size-text-link: 13px;

  --font-family-text-head: var(--pdrn-serif);
  --font-family-text-subhead: var(--pdrn-sans);
  --font-family-text-body: var(--pdrn-sans);
}

body {
  font-family: var(--pdrn-sans);
}

.c-steps_to_order--theme {
  --theme-color: var(--color-btn-bg) !important;
  --text-color: var(--color-btn-text) !important;
}

.p-movie--theme {
  --theme-color: var(--color-btn-bg);
}

/* === Harmony gradient: ページラッパーを透明化 ===
 * .u-color__bg--base の !important を2クラス詳細度で上書き。
 * body::before の fixed グラデーションをラッパー越しに表示させる。
 */
.l-wrapper.u-color__bg--base,
.l-wrapper-none.u-color__bg--base,
.l-wrapper.u-color__bg--main,
.l-wrapper-none.u-color__bg--main {
  background: transparent !important;
}

/* =============================================
   Checkout (order/new + confirm): フォームデザイン刷新
   ============================================= */

/* ---- Section card: ボーダー統一・余分な装飾削除 ---- */
.p-pdrn_order_page--new .p-checkout__list__block {
  border-color: #e6dfd6;
  border-radius: 4px;
}

/* receive-method の左アクセントボーダーを除去 */
.p-pdrn_order_page--new .p-checkout__list__block.--receive-method {
  border-left: none !important;
}

/* ---- Form label (th): ピンク背景削除・ミニマルな小文字ラベルに ---- */
.p-pdrn_order_page--new .c-form_table > tbody > tr > th {
  background: transparent !important;
  width: 200px !important;
  min-width: 200px !important;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.07em;
  color: #4b3d34 !important;
  border-right: none !important;
  padding-right: 20px;
}

/* ---- SP (≤719px): ラベルをインプット上に縦スタック ---- */
@media (max-width: 719px) {
  .p-pdrn_order_page--new .c-form_table,
  .p-pdrn_order_page--new .c-form_table > tbody,
  .p-pdrn_order_page--new .c-form_table > tbody > tr {
    display: block;
    width: 100%;
  }

  .p-pdrn_order_page--new .c-form_table > tbody > tr {
    padding: 10px 0;
    border-bottom: 1px solid #ede8e5;
  }

  .p-pdrn_order_page--new .c-form_table > tbody > tr:last-child {
    border-bottom: none;
  }

  .p-pdrn_order_page--new .c-form_table > tbody > tr > th {
    display: block;
    width: 100% !important;
    min-width: 0 !important;
    border-right: none !important;
    padding: 0 0 6px 0;
  }

  .p-pdrn_order_page--new .c-form_table > tbody > tr > td {
    display: block;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box;
  }

  /* インプット・セレクトを全幅に */
  .p-pdrn_order_page--new .c-form_table > tbody > tr > td input[type=text],
  .p-pdrn_order_page--new .c-form_table > tbody > tr > td input[type=email],
  .p-pdrn_order_page--new .c-form_table > tbody > tr > td input[type=tel],
  .p-pdrn_order_page--new .c-form_table > tbody > tr > td input[type=number],
  .p-pdrn_order_page--new .c-form_table > tbody > tr > td input[type=password],
  .p-pdrn_order_page--new .c-form_table > tbody > tr > td select:not([multiple]) {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
}

/* =============================================
   FAQ page: ブランドパレットに統一
   mint背景削除・角丸をシャープに（4px）統一
   ============================================= */

/* FAQページ背景: ソフトピンク */
.p-pdrn_faq_page {
  background: #edb7c2 !important;
}

/* ページタイトル「よくあるご質問」「新規会員登録」「パスワードリセット」: serif → sans-serif（ゴシック） */
.p-pdrn_faq_page .p-page_header__inner__title,
.p-pdrn_password_page .p-page_header__inner__title,
.p-pdrn_signup_page .p-page_header__inner__title {
  font-family: var(--pdrn-sans) !important;
}

/* 検索バー: 10px → 0px（サイト全体の角なし方針に統一） */
.p-pdrn-faq .p-pdrn-faq__search-input {
  border-radius: 0 !important;
}

/* フィルタータブ: pill(999px) → 0px */
.p-pdrn-faq .p-pdrn-faq__tab {
  border-radius: 0 !important;
}

/* フィルタータブ 活性状態: ブランドのダークネイビーに統一 */
.p-pdrn-faq .p-pdrn-faq__tab.is-active,
.p-pdrn-faq.is-sp .p-pdrn-faq__tab.is-active {
  background: #1a2b33 !important;
  border-color: #1a2b33 !important;
  color: #ffffff !important;
}

/* フィルタータブ 非活性: 茶系ベージュ → ブランドネイビー寄り */
.p-pdrn-faq .p-pdrn-faq__tab:not(.is-active) {
  color: #1a2b33 !important;
  border-color: rgba(26, 43, 51, 0.2) !important;
}

/* テキスト類をブランドのダークネイビー(#1a2b33)に統一
   （元は #1f1d1a の暖色寄り黒で散らかっていた） */
.p-pdrn_faq_page .p-page_header__inner__title,
.p-pdrn-faq .p-pdrn-faq__group-title,
.p-pdrn-faq .p-pdrn-faq__sp-heading,
.p-pdrn-faq .p-pdrn-faq__search-label,
.p-pdrn-faq .p-faq-q__label,
.p-pdrn-faq .p-faq-q__title,
.p-pdrn-faq .p-faq-a__label,
.p-pdrn-faq .p-faq-a__content,
.p-pdrn-faq .p-pdrn-faq__empty {
  color: #1a2b33 !important;
}

/* FAQリストカード: 12px → 0px */
.p-pdrn-faq .p-pdrn-faq__list {
  border-radius: 0 !important;
}

/* 「該当なし」カード: 12px → 0px */
.p-pdrn-faq .p-pdrn-faq__empty {
  border-radius: 0 !important;
}

/* カテゴリチップ（定期・支払い等）: pill → 0px */
.p-pdrn-faq .p-faq-q__chip {
  border-radius: 0 !important;
}

/* SP タブスクロールフェード: 旧カラー(#fdf5f7) → ピンク背景に合わせて更新 */
@media (max-width: 719px) {
  .p-pdrn_faq_page .p-pdrn-faq.is-sp [data-faq-tabs-wrap]::after {
    background: linear-gradient(to right, rgba(237, 183, 194, 0), #edb7c2) !important;
  }
}

/* =============================================
   FAQ: 白カード背景を除去
   ピンク地 + 白セパレーターラインで構造化
   ============================================= */

/* リストコンテナ: 白背景除去・左右ボーダーなし・上下のみ白ライン */
.p-pdrn-faq .p-pdrn-faq__list {
  background: transparent !important;
  border-left: none !important;
  border-right: none !important;
  border-top-color: rgba(255, 255, 255, 0.5) !important;
  border-bottom-color: rgba(255, 255, 255, 0.5) !important;
}

/* アイテム間セパレーター: ミント系ボーダー → 白ライン */
.p-pdrn-faq .p-faq-item {
  border-top-color: rgba(255, 255, 255, 0.5) !important;
}

/* 回答エリア: 薄暗くして質問と区別・ボーダーも白ラインに */
.p-pdrn-faq .p-faq-a {
  background: rgba(255, 255, 255, 0.35) !important;
  border-top-color: rgba(255, 255, 255, 0.5) !important;
}

/* カテゴリチップ（定期・支払い etc）: 旧クリーム系 → 白地+ダーク文字 */
.p-pdrn-faq .p-faq-q__chip {
  background: #ffffff !important;
  color: #1a2b33 !important;
}

/* =============================================
   PDP 全成分アコーディオン: 上下ボーダーを白ラインに
   --pdrn-border（半透明ミント）がミント背景に溶け込んで
   アコーディオンと認識されにくいため白線に変更
   ============================================= */
.p-product_section__after_options .p-product_subaccordion {
  border-top-color: rgba(255, 255, 255, 0.5) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5) !important;
}


/* =============================================
   FV 表示中: ヘッダー境界線を非表示
   glass クラスが付いていない = スクロール量が少ない = FV 表示中
   スクロールで glass が追加されると自動的に境界線が現れる
   ============================================= */
.p-pdrn_header--transparent:not(.p-pdrn_header--glass) {
  border-bottom-color: transparent !important;
  box-shadow: none !important;
}
.p-pdrn_header--transparent:not(.p-pdrn_header--glass) .l-header__inner::after {
  display: none !important;
}

/* =============================================
   SP header: スクロール連動で自動表示/非表示
   下スクロール → 隠れる / 上スクロール → 現れる
   PC (>768px) は常時表示
   ============================================= */
@media (max-width: 768px) {
  #ecf_header_section {
    transition: transform 0.28s ease;
  }
  #ecf_header_section.is-header-hidden {
    transform: translateY(-100%);
  }
}

/* =============================================
   Order complete page: ヘッダー被り解消 (SP) + コンテンツ短い問題
   .l-container { padding-top: 0 !important } (section inline style, 0,1,0)
   を 2-class specificity (0,2,0) で上書き。ヘッダー実測 80px。
   ============================================= */
.p-pdrn_order_page.p-pdrn_order_page--complete {
  min-height: 70vh;
  padding-top: 80px !important;
}

/* =============================================
   Order confirm page: SP CTA 修正
   - float bar を非表示（static ボタンで代替）
   - static ボタンを中央揃え・全幅で表示
   ============================================= */
@media (max-width: 719px) {
  .p-checkout_confirm__float {
    display: none !important;
  }
  .p-checkout_confirm__static {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    padding: 0 0 24px;
  }
  .p-checkout_confirm__static .p-checkout_confirm__inner__list__block__submit {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* =============================================
   Cart page / Order page:
   - 背景色を TOP の Product/Contact セクションと同じピンク #edb7c2 に統一
   - min-height を 100vh に拡張してフッターを viewport 下端に押し下げる
   ============================================= */
.p-pdrn_cart_page,
.p-pdrn_order_page {
  background: #edb7c2 !important;
  min-height: 100vh;
}

/* Order page: フォーム白外枠を除去（ピンク地直貼りに） */
.p-pdrn_order_page .p-checkout__list__block {
  background: transparent !important;
  border: none !important;
}

/* Order page: ご注文確認へエリアの白い外枠を除去 */
.p-pdrn_order_page--new .p-checkout__bottom {
  background: transparent !important;
}

/* =============================================
   SP footer nav: 横並び → 縦並びに変更
   ============================================= */
@media (max-width: 719px) {
  .p-pdrn_footer__sp_nav__list {
    flex-direction: column;
    align-items: center;
    gap: 14px;
  }
}

/* =============================================
   Footer legal links: 縦並び → 横並び + ｜ 区切り
   SP では theme.css が flex-direction:column / li{width:100%} にするため
   ID セレクタ (1,1,0) + !important で上書き。
   ============================================= */

/* PC: / → ｜ (theme.css デフォルトが "/" のため上書き) */
#ecf_footer_section .p-pdrn_footer__legal li + li::before {
  content: '｜' !important;
  margin: 0 4px !important;
}

/* SP (≤767px): column → row, li width: 100% → auto */
@media screen and (max-width: 767px) {
  #ecf_footer_section .p-pdrn_footer__legal {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    max-width: 100% !important;
    row-gap: 4px !important;
  }
  #ecf_footer_section .p-pdrn_footer__legal > li {
    width: auto !important;
  }
  #ecf_footer_section .p-pdrn_footer__legal li + li::before {
    content: '｜' !important;
    margin: 0 4px !important;
  }
}

/* =============================================
   PDP 背景色 + フロートバー
   - html/body はフッター色(#eef3f0)でフォールバック
     → body の padding-bottom 露出エリアをフッターと一致させる
   - コンテンツ個別要素で #80cf91 を上書き
   ============================================= */
/* html/body はフッター色: body padding-bottom 露出時に隙間が見えなくなる */
body.is-pdrn-floating-teiki-visible,
html:has(.is-product-page),
html:has(.is-product-page) body {
  background: #eef3f0 !important;
}
/* コンテンツエリアは緑で上書き */
.l-container.is-product-page,
.is-product-page .p-product_content,
.is-product-page .p-product_content__inner__info {
  background: #80cf91 !important;
}
/* フロートバー背景を PDP 背景色に統一 */
.p-pdrn_floating_teiki {
  background: #80cf91 !important;
}

/* =============================================
   規約系ページ SP: ヘッダー被り修正
   ヘッダー高さ 80px に対し各ページの SP padding-top が 68–72px と不足。
   → 96px に統一（clearance +16px）
   対象: 利用規約 / プライバシー / 特商法 / 静的法務ページ
   ============================================= */
@media (max-width: 719px) {
  .p-legal-page .p-legal-page__row--header,
  .p-law-info-page .p-law-info-page__row--header {
    padding-top: 96px !important;
  }

  /* キャンセルポリシー・返金ポリシー・個人情報取扱いなど静的法務ページ */
  .p-static-page--pdrn.p-static-page--legal .p-static-page__row--content {
    padding-top: 96px !important;
  }
}

/* =============================================
   定期便詳細ページ: セクション（お届け先・支払い方法）
   ============================================= */
.p-pdrn_subs_detail-section {
  padding: 20px 0;
}
.p-pdrn_subs_detail-section__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.p-pdrn_subs_detail-section__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-head, #333);
  margin: 0;
}
.p-pdrn_subs_detail-section__change {
  font-size: 12px;
}
.p-pdrn_subs_detail-section__body {
  font-size: 14px;
  line-height: 1.8;
  margin: 0;
}


/* モーダル内注記のリンクはアンダーラインで視認性確保 */
.p-pdrn_subs_cancel-modal__note a {
  text-decoration: underline;
}

/* カード追加・編集ページ: 月/年プルダウンの数字と矢印が重ならないよう余白調整 */
#customers-card-index-view .c-form_table__tel .c-form_table__select > select,
#customers-card-edit-view .c-form_table__tel .c-form_table__select > select {
  padding-left: 8px;
  padding-right: 32px;
  min-width: 72px;
}

/* お問い合わせページ: プライバシーポリシー同意（テーブル外） */
.p-contact__agree {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 24px;
  padding-bottom: 8px;
}
#agree-error {
  text-align: center;
  font-size: 12px;
  color: #c0392b;
  margin-top: 6px;
  min-height: 0;
}
/* ECforceが注入するエラー要素のリセット（絶対配置を無効化） */
#agree-error .agreeformError,
#agree-error .formError {
  position: static !important;
  display: block;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  color: #c0392b;
  font-size: 12px;
}
#agree-error .agreeformError::before,
#agree-error .formError::before {
  display: none !important;
}
.p-contact__agree .c-form_table__checkbox {
  gap: 8px;
}
.p-contact__agree .c-form_table__checkbox__text {
  font-size: 13px;
}

/* お問い合わせページ: FAQボタン上のリードテキスト */
.p-contact__link__lead {
  font-size: 13px;
  line-height: 1.8;
  color: var(--pdrn-text-sub, #6b6560);
  margin-bottom: 16px;
}

/* カード一覧: 編集・削除ボタン横並び（モバイルの display:block を上書き） */
.p-card-actions,
#customers-card-index-view .c-account_table > tbody > tr > td.p-card-actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 20px;
  white-space: nowrap;
}

/* カード一覧: デフォルトバッジ */
.p-card-default-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  border: 1px solid var(--pdrn-accent, #b09080);
  color: var(--pdrn-accent, #b09080);
  border-radius: 2px;
  vertical-align: middle;
}

/* カード追加・編集ページ: デフォルト設定チェックボックスの視認性向上 */
#customers-card-index-view .c-form_table__newsletter,
#customers-card-edit-view .c-form_table__newsletter {
  padding: 16px 0 10px;
  border-top: 1px solid var(--pdrn-border, #e8e4e1);
}
#customers-card-index-view .c-form_table__checkbox__text,
#customers-card-edit-view .c-form_table__checkbox__text {
  font-weight: 500;
  color: var(--color-head, #1f1d1a);
}

/* お問い合わせ確認ページ: 送信/修正ボタンレイアウト */
.p-contact_confirm__bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 32px 0 8px;
}
.p-contact_confirm__bottom .p-account_form__inner__bottom__btn {
  width: 100%;
  max-width: 360px;
}
.p-contact_confirm__bottom .u-text--link {
  text-decoration: underline;
}

/* お問い合わせ完了ページ: SP ヘッダー被り解消 */
@media (max-width: 719px) {
  .p-pdrn_contact_page--complete .p-pdrn_contact_page__row--complete {
    padding-top: 80px;
  }
}

/* 定期便詳細: 停止済みバナー */
.p-pdrn_subs_stopped-banner {
  background: #f5f0eb;
  border-left: 3px solid #1f1d1a;
  padding: 14px 20px;
  margin-bottom: 24px;
  border-radius: 2px;
}
.p-pdrn_subs_stopped-banner__text {
  font-size: 14px;
  font-weight: 600;
  color: #1f1d1a;
  margin: 0;
}

/* 定期便一覧: 解約リンクの矢印を非表示 */
.p-pdrn_subs_minimal-order__cancel-link::after,
.p-pdrn_subs_minimal-order__cancel-link::before {
  display: none !important;
}

/* 定期便一覧: PC でアクションボタンを中央揃え */
@media (min-width: 720px) {
  .p-pdrn_subs_minimal-order__actions {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}

/* =============================================
   Product セクション内: section-container に収めた構成
   - .p-pdrn_products__inner で Product + HOW TO USE を 1200px に収める
   - HOW TO USE は自前 56/44 グリッドで組む（Product item を流用しない）
   ============================================= */

/* section-container 内の Product item が viewport 幅に飛び出さないよう保証 */
.p-pdrn_products__inner .p-pdrn_products__list,
.p-pdrn_products__inner .p-pdrn_products__item {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* HOW TO USE ラベル間隔 */
.p-pdrn_howto__heading {
  margin-top: 80px !important;
  margin-bottom: 24px !important;
}

/* HOW TO USE 本体：Product item と同比率のグリッド（703:497 を実測値から合わせる） */
.p-pdrn_howto__article {
  display: grid;
  grid-template-columns: 703fr 497fr;
  align-items: start;
}

/* HOW TO USE 画像エリア：2枚横並び */
.p-pdrn_howto__image-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.p-pdrn_howto__img-top {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

/* HOW TO USE コンテンツ（右列）*/
.p-pdrn_howto__content {
  padding: 0 40px;
  box-sizing: border-box;
}

/* ステップ群 */
.p-pdrn_howto__steps {
  margin: 0;
}

.p-pdrn_howto__step {
  text-align: left;
  padding: 12px 0;
}

.p-pdrn_howto__step-label {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin: 0 0 8px;
  color: #1a2b33 !important;
}

.p-pdrn_howto__step-text {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.85;
  margin: 0;
  color: #1a2b33 !important;
}

.p-pdrn_howto__arrow {
  text-align: center;
  font-size: 28px;
  margin: 8px 0;
  opacity: 0.5;
  color: #1a2b33 !important;
}

@media (max-width: 768px) {
  .p-pdrn_howto__article {
    grid-template-columns: 1fr;
    margin-top: 48px;
  }
  .p-pdrn_howto__content {
    padding: 24px 0 0;
  }
}

/* =============================================
   TOP: SP で Product item と HOW TO USE article の幅を揃える
   - .p-pdrn_products__list に余計な padding-left/right: 24px が
     当たっているのを除去（section-container の padding と二重がけ）
   ============================================= */
@media (max-width: 768px) {
  #index-view #add_product_async_view .p-new_product--pdrn .p-pdrn_products__list {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* =============================================
   TOP: Contact セクション（フォーム埋め込み）
   - .section-chapter が padding-top/bottom: clamp(80-120px) を持つため
     ここでは 0 にして二重 padding を回避
   - SP では section-chapter に min-height:85vh + display:flex が当たり
     フォームが中央揃えで余白が変になるので打ち消す
   ============================================= */
#contact.section-chapter {
  padding-left: 0;
  padding-right: 0;
  background-color: #80cf91;
}

.p-pdrn_contact_cta__row {
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 24px;
  padding-right: 24px;
  box-sizing: border-box;
}

/* SP: contact section の 85vh min-height と flex centering を打ち消す */
@media (max-width: 768px) {
  #index-view > #add_product_async_view > section#contact.section-chapter {
    min-height: auto;
    display: block;
    padding: 64px 24px 80px;
  }
}


.p-pdrn_contact_cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 560px;
  margin: 0 auto;
  width: 100%;
}

.p-pdrn_contact_cta__heading {
  text-align: center;
  margin-bottom: 48px;
  width: 100%;
}
.p-pdrn_contact_cta__heading .p-pdrn_section_heading__label {
  margin: 0;
  font-family: var(--pdrn-sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.2em;
  line-height: 1.4;
  text-transform: uppercase;
  color: #fff;
}

/* フォームラッパー */
.p-pdrn_contact_cta__form-wrap {
  width: 100%;
}

.p-pdrn_contact_cta__form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* フィールド：縦スタック */
.p-pdrn_contact_cta__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 2カラム並列（名前・フリガナ） */
.p-pdrn_contact_cta__field-group {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.p-pdrn_contact_cta__field-group--half {
  flex-direction: row;
  gap: 16px;
}

.p-pdrn_contact_cta__field-group--half > .p-pdrn_contact_cta__field {
  flex: 1;
  min-width: 0;
}

/* ラベル */
.p-pdrn_contact_cta__label {
  font-size: 12px;
  letter-spacing: 0.06em;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #fff;
}

/* 必須マーク */
.p-pdrn_contact_cta__required {
  font-size: 13px;
  color: #c0392b;
  margin-left: 2px;
}

/* インプット共通 */
.p-pdrn_contact_cta__input {
  width: 100%;
  padding: 12px 14px;
  font-size: 14px;
  border-radius: 0;
  box-sizing: border-box;
}

.p-pdrn_contact_cta__textarea {
  resize: vertical;
  min-height: 140px;
}

/* 同意チェックボックス */
.p-pdrn_contact_cta__agree {
  margin-top: 4px;
  display: flex;
  justify-content: center;
}

.p-pdrn_contact_cta__agree-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.p-pdrn_contact_cta__agree-checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border: 1px solid currentColor;
  flex-shrink: 0;
  position: relative;
  cursor: pointer;
  opacity: 0.6;
  margin: 0;
  vertical-align: middle;
}

.p-pdrn_contact_cta__agree-checkbox:checked {
  opacity: 1;
}

.p-pdrn_contact_cta__agree-checkbox:checked::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 1px;
  width: 4px;
  height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
}

.p-pdrn_contact_cta__agree-frame {
  display: none;
}

.p-pdrn_contact_cta__agree-text {
  font-size: 13px;
  line-height: 1.6;
}

/* プライバシーポリシーリンク：アンダーライン＋半透明白（ミント背景に馴染む） */
.p-pdrn_contact_cta__privacy-link {
  text-decoration: underline !important;
  color: rgba(255, 255, 255, 0.65) !important;
}

/* LP CONTACT: 同意テキストを半透明白に（checkbox は currentColor で連動） */
.p-pdrn_contact_cta__agree-text {
  color: rgba(255, 255, 255, 0.65) !important;
}

/* 専用コンタクトページ: 同意テキスト・リンク・チェックボックスを半透明白に */
.p-pdrn_contact_page .p-contact__agree .c-form_table__checkbox__text,
.p-pdrn_contact_page .p-contact__agree .c-form_table__checkbox__text a {
  color: rgba(255, 255, 255, 0.65) !important;
}
.p-pdrn_contact_page .p-contact__agree .c-form_table__checkbox__text a {
  text-decoration: underline !important;
}
.p-pdrn_contact_page .p-contact__agree .c-form_table__checkbox input {
  border-color: rgba(255, 255, 255, 0.5) !important;
  background: transparent !important;
}
.p-pdrn_contact_page .p-contact__agree .c-form_table__checkbox__frame {
  border-color: rgba(255, 255, 255, 0.65) !important;
}

/* Product セクション: "Product" タイトルを非表示（PRODUCT ラベルのみ表示） */
.p-new_product--pdrn .p-new_product__title__en {
  display: none !important;
}

/* Product セクション: ラベルと商品リストの間隔を確保（キャプション的に近づける） */
.p-new_product--pdrn .p-pdrn_products__title {
  margin-bottom: 0 !important;
}

/* PRODUCT ラベルコンテナの下余白 */
.p-new_product--pdrn > .section-container:first-child {
  padding-bottom: 24px;
}

/* =============================================
   Product セクション: 商品アイテムをセクション背景と一体化
   theme.css の .c-goods_card, ... ルールで card-bg / border-radius が
   付いているのを透過化する
   ============================================= */
.p-new_product--pdrn .p-pdrn_products__item {
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.p-new_product--pdrn .p-pdrn_products__image {
  background: transparent !important;
}

/* SP: aspect-ratio: 4/3 (theme.css 959px) が正方形画像をクリップするので解除
   + section-container の 24px padding と二重にならないよう content の横 padding を 0 に */
@media (max-width: 719px) {
  .p-new_product--pdrn .p-pdrn_products__image {
    aspect-ratio: unset !important;
  }
  .p-new_product--pdrn .p-pdrn_products__image img {
    width: 100% !important;
    max-height: none !important;
  }
  .p-new_product--pdrn .p-pdrn_products__content {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* =============================================
   Product セクション: 商品コンテンツ右側のレイアウト
   theme.css の .p-new_product--pdrn 系を上書き
   ============================================= */

/* コンテンツ全体: 左寄せ（theme.css は center なので上書き） */
.p-new_product--pdrn .p-pdrn_products__content,
.p-new_product--pdrn .p-pdrn_products__name,
.p-new_product--pdrn .p-pdrn_products__name a,
.p-new_product--pdrn .p-pdrn_products__name-jp,
.p-new_product--pdrn .p-pdrn_products__description {
  text-align: left !important;
}

.p-new_product--pdrn .p-pdrn_products__content {
  align-items: flex-start !important;
}

/* 商品名（ブランド + 英語名）*/
.p-new_product--pdrn .p-pdrn_products__name {
  margin: 0 0 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* PDRN FOCUS / Toner and Serum 3600ppm を同じ太さに統一
   theme.css の .p-new_product--pdrn .p-pdrn_products__name a { font-weight: 300 } を上書き */
.p-new_product--pdrn .p-pdrn_products__name-brand,
.p-new_product--pdrn .p-pdrn_products__name-en,
.p-new_product--pdrn .p-pdrn_products__name-en a {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.3;
  color: #1a2b33 !important;
}

.p-pdrn_products__name-en a {
  color: inherit;
  text-decoration: none;
}

/* 日本語サブタイトル */
.p-pdrn_products__name-jp {
  font-size: 19px;
  line-height: 1.7;
  margin: 0 0 32px;
  font-weight: 700;
  text-align: left;
  color: #1a2b33 !important;
}

/* 説明文 */
.p-pdrn_products__description {
  font-size: 15px;
  line-height: 1.95;
  margin: 0 0 36px;
  font-weight: 600;
  text-align: left;
  color: #1a2b33 !important;
}

/* CTA ボタン群 */
.p-pdrn_products__cta-group {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin-top: 28px;
}

.p-pdrn_products__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-decoration: none;
  border: 1px solid currentColor;
  transition: opacity 0.2s;
  white-space: nowrap;
}

.p-pdrn_products__cta:hover {
  opacity: 0.7;
}

.p-new_product--pdrn .p-pdrn_products__cta--primary {
  background: #2b2b2b !important;
  color: #fff !important;
  border-color: #2b2b2b !important;
}

.p-new_product--pdrn .p-pdrn_products__cta--secondary {
  background: transparent;
}

@media (max-width: 768px) {
  .p-pdrn_products__name-brand,
  .p-pdrn_products__name-en {
    font-size: 18px;
  }
  .p-pdrn_products__cta-group {
    flex-direction: column;
    width: 100%;
  }
  .p-new_product--pdrn .p-pdrn_products__cta {
    width: 100%;
  }
}

/* 送信ボタン */
.p-pdrn_contact_cta__submit {
  margin-top: 8px;
}

.p-pdrn_contact_cta__submit-btn {
  width: 100%;
  padding: 16px;
  font-size: 14px;
  letter-spacing: 0.08em;
  cursor: pointer;
  border: none;
}

/* SP: 姓/名・セイ/メイ は短い項目なので横並び維持。padding は親(section)に任せる */
@media (max-width: 768px) {
  .p-pdrn_contact_cta__field-group--half {
    flex-direction: row;
    gap: 12px;
  }
}

/* セクション見出しラベル: 12px → 14px に統一（PRODUCT / HOW TO USE） */
#index-view #add_product_async_view .p-message_story .p-pdrn_section_heading__label,
#index-view #add_product_async_view .design-of-formula .p-pdrn_section_heading__label,
#index-view #add_product_async_view .p-new_product--pdrn .p-pdrn_section_heading__label {
  font-size: 14px !important;
}
/* ABOUT eyebrow も同サイズに、セクション padding-top を縮めて上に引き上げ */
.p-message_story__eyebrow,
#index-view #add_product_async_view .p-message_story .p-message_story__eyebrow,
.p-message_story .p-pdrn_section_heading__label,
.p-pdrn_spirit__label {
  font-size: 14px !important;
}

/* PDP DETAILS / POINT eyebrow: LP セクションラベルに合わせる */
.p-product_section__eyebrow {
  font-family: var(--pdrn-sans) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0.2em !important;
  line-height: 1.4 !important;
  text-transform: uppercase !important;
  color: #fff !important;
}
.p-message_story {
  padding-top: 80px !important;
}

/* ==================================================
   FV オーバーレイ完全除去（全加工を網羅・確定版）
   ================================================== */
/* ① hero 全体のラディアルグロー + blur(14px) */
.p-hero_plan::before,
.p-hero_plan::after {
  display: none !important;
}
/* ② bg::after の白グラデーション */
.p-hero_plan__bg::after {
  display: none !important;
}
/* ③ slide::before（PC: 白/カラーグラデーション / 全スライド共通）*/
.p-hero_plan__slide::before,
.p-hero_plan__slide:first-child::before,
.p-hero_plan__slide:nth-child(2)::before {
  display: none !important;
  background: none !important;
}
/* ④ slide::after（SP≤719px: 下部を暗くする rgba(0,0,0,0.45) グラデーション）*/
.p-hero_plan__slide::after {
  display: none !important;
}
/* ⑤ 画像自体の filter / transform */
.p-hero_plan__bg img {
  filter: none !important;
  transform: none !important;
}

/* =============================================
   FV1 の headline を FV2 に合わせて Noto Sans JP（ゴシック）統一
   - .p-hero_plan__headline は serif を !important で当てている rule あり
     なので !important で打ち消す
   ============================================= */
/* PC FV: ロゴ＋テキストを垂直中央に（同じ top:50%+translateY で完全一致） */
@media (min-width: 720px) {
  .p-hero_plan__logo {
    top: 50% !important;
    transform: translateY(-50%) !important;
  }
  .p-hero_plan__inner {
    position: absolute !important;
    top: 50% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    transform: translateY(-50%) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .p-hero_plan__copy {
    margin-top: 0 !important;
  }
}

/* FV テキストボックス幅を制限（商品との重なりを回避）
   - スライド1: 全PC幅(720px+)で min(33%, 460px)。
     460px固定では幅広い画面で被り続けるため % スケール。
     460px で頭打ちにして超ワイド画面では従来通りに戻す。
   - スライド2(PDRN): 720-959px のみ 38%。それ以外は margin-right が大きく余裕あり */
@media (min-width: 720px) {
  .p-hero_plan__copy:not(.p-hero_plan__copy--slide2) {
    max-width: min(33%, 460px) !important;
    margin-left: auto !important;
  }
}
@media (min-width: 720px) and (max-width: 959px) {
  .p-hero_plan__copy--slide2 {
    max-width: 38% !important;
    margin-left: auto !important;
  }
}

.p-hero_plan__copy:not(.p-hero_plan__copy--slide2) .p-hero_plan__headline {
  font-family: var(--pdrn-sans) !important;
}

/* FV2: CTA「くわしく見る」をリードテキストと同じ sans-serif に統一 */
.p-hero_plan__copy--slide2 .p-hero_plan__cta {
  font-family: var(--pdrn-sans) !important;
}

/* =============================================
   SP FV: テキストをヒーロー底部（商品の下）に配置
   - SP専用画像(780×1500 @2x) を使用
   - object-position: top でボトルを上半分に表示
   ============================================= */
@media (max-width: 719px) {
  .p-hero_plan__inner {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    align-items: center !important;
    padding: 0 24px 60px !important;
  }
  .p-hero_plan__copy {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    text-align: center !important;
  }
  /* SP専用画像は上揃えでボトルを上半分に表示 */
  .p-hero_plan__bg img {
    object-position: 50% 0% !important;
  }
  /* SP FV テキストを白に（theme.css 後段の var(--pdrn-text) を上書き） */
  .p-hero_plan__eyebrow,
  .p-hero_plan__headline,
  .p-hero_plan__lead {
    color: #fff !important;
  }
}

/* =============================================
   About → Product 境界: 白い隙間を除去 + 両脇帯対策
   - #product.section-chapter の padding-top (clamp 80-120px)
   - 内側 l-container__row の u-margin__top--80 (80px)
   を除去し、mint 背景を About ピンクに直接隣接させる
   - .l-wrapper の overflow:hidden により p-pdrn_products__row の
     100vw + 負margin トリックが clip され両脇に帯ができていたため、
     #product 自体に mint 背景を当てて根本解決する
   ============================================= */
#product.section-chapter {
  padding-top: 0 !important;
  background: #edb7c2 !important;
  --pdrn-bg: #edb7c2;
}

#product .p-pdrn_products__row {
  margin-top: 0 !important;
}

/* =============================================
   PDP Detail パネル: USP 1行
   ============================================= */
.p-pdrn_pdp_detail__usp {
  margin: 8px 0 0;
  padding: 16px 20px;
  font-size: 13px;
  line-height: 1.85;
  letter-spacing: 0.04em;
  color: var(--pdrn-text);
  border-left: 2px solid var(--pdrn-accent, #b89991);
  background: rgba(184, 153, 145, 0.05);
}

/* =============================================
   PDP Visual stat band: 4つの数字 proof point
   ============================================= */
.p-pdrn_pdp_stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--pdrn-border, #D8DDDF);
  border-bottom: 1px solid var(--pdrn-border, #D8DDDF);
  margin: clamp(48px, 6vw, 80px) 0;
}

.p-pdrn_pdp_stats__item {
  padding: clamp(28px, 3.5vw, 44px) 16px;
  text-align: center;
  border-right: 1px solid var(--pdrn-border, #D8DDDF);
}

.p-pdrn_pdp_stats__item:last-child {
  border-right: none;
}

.p-pdrn_pdp_stats__value {
  font-family: var(--pdrn-serif), var(--pdrn-sans);
  font-size: clamp(32px, 4vw, 56px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.02em;
  margin: 0 0 10px;
  color: var(--pdrn-text);
}

.p-pdrn_pdp_stats__unit {
  font-size: 0.42em;
  margin-left: 4px;
  letter-spacing: 0.06em;
  color: var(--pdrn-muted, #6b6e6c);
}

.p-pdrn_pdp_stats__label {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  margin: 0;
  font-weight: 500;
}

@media (max-width: 768px) {
  .p-pdrn_pdp_stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .p-pdrn_pdp_stats__item:nth-child(2n) {
    border-right: none;
  }
  .p-pdrn_pdp_stats__item:nth-child(-n+2) {
    border-bottom: 1px solid var(--pdrn-border, #D8DDDF);
  }
}

/* =============================================
   Stat band 2x2 variant: Detail パネル右列に配置
   - .p-product_detail_panel__media の image 用スタイル（グラデ背景/
     ボーダー/シャドウ/aspect-ratio）を打ち消し、divider のみで構成
   ============================================= */

/* 親の image 用装飾を打ち消し */
.p-product_detail_panel__media:has(.p-pdrn_pdp_stats--vertical) {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  aspect-ratio: auto !important;
  overflow: visible !important;
}

/* Detail パネル: 左右の縦中央揃え */
.p-product_detail_panel:has(.p-pdrn_pdp_stats--vertical) {
  align-items: center;
}

/* 2x2 正方形グリッド: 元の divider スタイル踏襲 */
.p-pdrn_pdp_stats--vertical {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  aspect-ratio: 1 / 1;
  border-top: 1px solid var(--pdrn-border, #D8DDDF);
  border-bottom: 1px solid var(--pdrn-border, #D8DDDF);
  margin: 0;
}

.p-pdrn_pdp_stats--vertical .p-pdrn_pdp_stats__item {
  padding: clamp(20px, 2.4vw, 32px) 16px;
  border-right: 1px solid var(--pdrn-border, #D8DDDF);
  border-bottom: 1px solid var(--pdrn-border, #D8DDDF);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* 右列は右ボーダー無し */
.p-pdrn_pdp_stats--vertical .p-pdrn_pdp_stats__item:nth-child(2n) {
  border-right: none;
}

/* 下段は下ボーダー無し */
.p-pdrn_pdp_stats--vertical .p-pdrn_pdp_stats__item:nth-last-child(-n+2) {
  border-bottom: none;
}

@media (max-width: 768px) {
  .p-pdrn_pdp_stats--vertical {
    margin-top: 32px;
  }
}

/* =============================================
   PDP Point editorial スプレッド: 5枚交互レイアウト
   - 偶数番目は画像右配置（zig-zag）
   ============================================= */
.p-pdrn_pdp_points {
  display: grid;
  gap: clamp(72px, 9vw, 128px);
  margin-top: clamp(40px, 5vw, 64px);
}

.p-pdrn_pdp_point {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}

/* 偶数番目: 画像を右へ */
.p-pdrn_pdp_point:nth-child(even) .p-pdrn_pdp_point__media {
  order: 2;
}

.p-pdrn_pdp_point__media {
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}

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

.p-pdrn_pdp_point__body {
  display: grid;
  gap: 14px;
}

.p-pdrn_pdp_point__num {
  font-family: var(--pdrn-serif), var(--pdrn-sans);
  font-size: clamp(48px, 5vw, 76px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0.02em;
  color: #fff;
  margin: 0 0 4px;
}

.p-pdrn_pdp_point__sub {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
  margin: 0;
  font-weight: 500;
}

.p-pdrn_pdp_point__title {
  font-family: var(--pdrn-serif), var(--pdrn-sans);
  font-size: clamp(20px, 1.8vw, 28px);
  letter-spacing: 0.04em;
  font-weight: 500;
  margin: 0;
  line-height: 1.4;
  color: var(--pdrn-text);
}

.p-pdrn_pdp_point__bullets {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
}

.p-pdrn_pdp_point__bullets li {
  font-size: 13px;
  letter-spacing: 0.04em;
  line-height: 1.7;
  padding-left: 18px;
  position: relative;
  color: var(--pdrn-text);
}

.p-pdrn_pdp_point__bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.8em;
  width: 10px;
  height: 1px;
  background: var(--pdrn-text, #1f1d1a);
}

.p-pdrn_pdp_point__desc {
  font-size: 13px;
  line-height: 1.85;
  margin: 12px 0 0;
  color: var(--pdrn-text);
  letter-spacing: 0.04em;
}

.p-pdrn_pdp_point__note {
  font-size: 11px;
  color: var(--pdrn-muted, #6b6e6c);
  letter-spacing: 0.04em;
}

@media (max-width: 768px) {
  .p-pdrn_pdp_point {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .p-pdrn_pdp_point:nth-child(even) .p-pdrn_pdp_point__media {
    order: 0;
  }
  .p-pdrn_pdp_point__media {
    aspect-ratio: 4 / 3;
  }
}

/* =============================================
   PDP Point: Typography-only layout (Option B)
   - 画像を非表示にして、編集タイポグラフィで構成
   - body内をasymmetric grid化：左に番号 / 右にテキスト
   ============================================= */
.p-pdrn_pdp_points .p-pdrn_pdp_point__media {
  display: none !important;
}

/* container は単一カラム化、左寄せ（セクションタイトルと揃える） */
.p-pdrn_pdp_points .p-pdrn_pdp_point {
  grid-template-columns: 1fr !important;
  max-width: none !important;
  margin: 0 !important;
}

/* body は relative＋padding-left でレイアウト、番号は absolute で左に配置 */
.p-pdrn_pdp_points .p-pdrn_pdp_point__body {
  display: block !important;
  position: relative;
  padding-left: clamp(120px, 14vw, 220px) !important;
  gap: 0 !important;
}

/* 番号は absolute で左上に固定 */
.p-pdrn_pdp_points .p-pdrn_pdp_point__num {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  color: #ffffff !important;
  font-size: clamp(56px, 6vw, 96px) !important;
  font-weight: 200 !important;
  line-height: 1 !important;
  margin: 0 !important;
  letter-spacing: 0.02em;
}

/* 右カラムの要素は自然な縦積み、各要素のmarginで間隔調整 */
.p-pdrn_pdp_points .p-pdrn_pdp_point__sub {
  color: #ffffff !important;
  font-size: clamp(14px, 1.1vw, 16px) !important;
  letter-spacing: 0.1em !important;
  margin: 0 0 6px !important;
  line-height: 1.5;
}
.p-pdrn_pdp_points .p-pdrn_pdp_point__title {
  margin-top: 4px !important;
}
.p-pdrn_pdp_points .p-pdrn_pdp_point__bullets {
  margin-top: 12px !important;
}
.p-pdrn_pdp_points .p-pdrn_pdp_point__desc {
  margin-top: 14px !important;
}

/* セクション間の細いセパレーター */
.p-pdrn_pdp_points .p-pdrn_pdp_point + .p-pdrn_pdp_point {
  border-top: 1px solid rgba(26, 43, 51, 0.15);
  padding-top: clamp(48px, 6vw, 80px);
}

/* セクションgapを編集ページらしい余白に */
.p-pdrn_pdp_points {
  gap: clamp(48px, 6vw, 80px) !important;
  margin-top: clamp(40px, 5vw, 64px) !important;
}

/* モバイル：番号を上に静的配置、テキストは下に縦積み */
@media (max-width: 768px) {
  .p-pdrn_pdp_points .p-pdrn_pdp_point__body {
    padding-left: 0 !important;
  }
  .p-pdrn_pdp_points .p-pdrn_pdp_point__num {
    position: static !important;
    margin-bottom: 12px !important;
    font-size: clamp(48px, 12vw, 72px) !important;
  }
}

/* =============================================
   TOP page: HOW TO USEとCONTACTの間の過剰な余白を圧縮
   - #product 下の余白252px → ~80px
   - #contact 上の余白120px → 60px
   ============================================= */
#product.section-chapter {
  padding-bottom: 40px !important;
}
#product .p-pdrn_products__row {
  padding-bottom: 40px !important;
  margin-bottom: 0 !important;
}
#contact.section-chapter {
  padding-top: 60px !important;
}

/* =============================================
   ログインページ：枠外のページタイトル「ログイン」を非表示
   - フォームカード内に同じ見出しが既にあるため重複を解消
   - header要素だけ非表示（行のpadding・flash messages領域は維持）
   ============================================= */
.p-pdrn_signin_page__header {
  display: none !important;
}

/* =============================================
   FV: ブランドグラデーション背景を削除
   - スライダー写真が全画面表示されるためグラデーション不要
   - theme.css の .p-hero_plan の linear-gradient を上書き
   ============================================= */
.p-hero_plan {
  background: transparent !important;
}

/* OTPモーダル(ワンタイムトークン認証)はECforceプラットフォーム管理の独立ページ。
   theme_customize.css がロードされないため、テーマ側からのCSS上書き不可。
   公開検証で確認済み。デザイン統一は不可能なため標準に従う。 */

/* =============================================
   新規会員登録：利用規約同意・オプトイン行
   - liquid template側でtableの外に出した
   - submitボタンと同じく中央寄せでバランスを取る
   ============================================= */
.p-pdrn_signup_page__agreements {
  margin-top: 24px;
  padding: 18px 18px 0;
  border-top: 1px solid rgba(26, 43, 51, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.p-pdrn_signup_page__agreements .c-form_table__newsletter {
  width: auto;
}

/* =============================================
   フォーム検証エラー表示の改善（軽量スタイリング）
   - 赤いフキダシ → 控えめなインラインテキスト風
   - 三角矢印を非表示
   - 同フィールド内の複数エラーは1つだけ表示
   - 全エラーをtdの右端に揃えて位置統一
   - jquery.validationEngineのデフォルトUXを上書き
   ============================================= */

/* tdを位置基準点にする */
.c-form_table td,
.c-form_table--confirm td {
  position: relative;
}

/* bundle.css の .c-form_table .formError より高い specificity で上書き */
.p-pdrn_signup_page .c-form_table .formError,
.p-pdrn_signin_page .c-form_table .formError,
.p-pdrn_password_page .c-form_table .formError,
.c-form_table .formError {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
  /* ライブラリのインライン位置指定 + bundle.css を上書きして右端中央に固定 */
  top: 50% !important;
  left: auto !important;
  right: 12px !important;
  bottom: auto !important;
  margin: 0 !important;
  transform: translateY(-50%) !important;
}
.p-pdrn_signup_page .c-form_table .formError .formErrorContent,
.p-pdrn_signin_page .c-form_table .formError .formErrorContent,
.p-pdrn_password_page .c-form_table .formError .formErrorContent,
.c-form_table .formError .formErrorContent {
  background: transparent !important;
  color: #c0392b !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  text-shadow: none !important;
  border-radius: 0 !important;
  line-height: 1.5 !important;
  /* br区切りで連結された複数エラーは最初の1行だけ表示 */
  max-height: 1.6em !important;
  overflow: hidden !important;
}
.c-form_table .formErrorArrow,
.c-form_table .formErrorArrow div {
  display: none !important;
}

/* =============================================
   TOP CONTACTセクション：プラポリ同意チェックボックス視認性
   - 緑背景上で白ボーダー＋白リンクで明確に
   - チェックマークは自前の角度線で正確に中央配置
   ============================================= */
#contact .p-pdrn_contact_cta__agree input[type="checkbox"],
#contact input#agree_top {
  -webkit-appearance: none !important;
  appearance: none !important;
  opacity: 1 !important;
  border: 1.5px solid #ffffff !important;
  background-color: rgba(255, 255, 255, 0.2) !important;
  width: 18px !important;
  height: 18px !important;
  position: relative !important;
  cursor: pointer;
  vertical-align: middle;
  border-radius: 2px;
}
#contact input#agree_top:checked {
  background-color: #ffffff !important;
}
#contact input#agree_top:checked::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 5px;
  width: 5px;
  height: 10px;
  border-right: 2px solid #1a2b33;
  border-bottom: 2px solid #1a2b33;
  transform: rotate(45deg);
}
#contact .p-pdrn_contact_cta__agree-label a {
  color: #ffffff !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
}

/* ---- Contact Confirm Modal ---- */
.p-pdrn_modal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.p-pdrn_modal[hidden] {
  display: none;
}
.p-pdrn_modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}
.p-pdrn_modal__dialog {
  position: relative;
  background: #fff;
  max-width: 560px;
  width: calc(100% - 48px);
  max-height: 82vh;
  overflow-y: auto;
  border-radius: 2px;
  padding: 40px 40px 32px;
  box-sizing: border-box;
}
.p-pdrn_modal__header {
  margin-bottom: 24px;
}
.p-pdrn_modal__title {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}
.p-pdrn_modal__lead {
  font-size: 13px;
  color: var(--pdrn-muted, #6b6e6c);
  line-height: 1.7;
}
.p-pdrn_modal__body {
  margin-bottom: 32px;
}
.p-pdrn_modal__table {
  width: 100%;
}
.p-pdrn_modal__footer {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}
.p-pdrn_modal__footer form {
  width: 100%;
}
.p-pdrn_modal__submit {
  display: block;
  width: 100%;
  text-align: center;
  padding: 18px 24px !important;
  font-size: 15px !important;
  letter-spacing: 0.1em;
}
.p-pdrn_modal__back {
  background: none;
  border: none;
  font-size: 13px;
  color: var(--pdrn-muted, #6b6e6c);
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}
@media (max-width: 768px) {
  .p-pdrn_modal__dialog {
    padding: 32px 24px 24px;
    max-height: 90vh;
  }
}
.p-pdrn_modal__success-msg {
  text-align: center;
  font-size: 14px;
  line-height: 2.2;
  padding: 8px 0 24px;
}
/* Contact form validation */
.p-pdrn_contact_cta__input--error {
  border-color: #c0392b !important;
}
.pdrn-field-error {
  font-size: 11px;
  color: #c0392b;
  margin-top: 4px;
  margin-bottom: 0;
}
#agree-top-error {
  font-size: 11px;
  color: #c0392b;
  margin-top: 4px;
  text-align: center;
}
/* Order confirm caution block: ピンク背景上で読みやすく */
.p-pdrn_order_page--confirm .p-checkout_confirm__caution__block {
  background: rgba(255, 255, 255, 0.35) !important;
  border-color: rgba(255, 255, 255, 0.6) !important;
  color: #1f1d1a !important;
}
.p-pdrn_order_page--confirm .p-checkout_confirm__caution__block * {
  color: #1f1d1a !important;
}
/* Order confirm caution block: underline links */
.p-checkout_confirm__caution__block a {
  text-decoration: underline;
}
/* Order confirm: remove white card box around submit button */
.p-pdrn_order_page--confirm .p-checkout_confirm__inner__list__block--bottom {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}
/* PDP 画像: <picture> ラッパーをブロックにしてサイズを保持 */
.c-product_img--single picture,
.c-product_img--mobile-hero picture {
  display: block;
  width: 100%;
  height: 100%;
}

/* =============================================
   PDP CTAボタン高さ統一: 54px
   定期便(54px) / まとめ(52px) / 購入手続き(50px) を揃える
   ============================================= */
.p-pdrn_course_inline__cta--sub {
  min-height: calc(var(--pdrn-silver-control-min-height, 50px) + 4px) !important;
}
.c-product_info__form__submit {
  min-height: calc(var(--pdrn-silver-control-min-height, 50px) + 4px) !important;
}