/* PITSOLE_MYPAGE_CSS_BUILD 2026-09-11-lead-bold-rose */

/* ============================================================
   マイページ(会員ページ)のPitsoleトンマナ適用
   pitsole_mypage.css

   【対象】
   ecforce標準のマイページ(注文履歴・定期便・住所録・カード・ポイント・
   クーポン・会員情報編集・パスワード変更など)。

   【方針】
   構造(左メニュー + 多ページ)はそのままで、見た目だけを他ページに寄せる。
   モック(pitsole-site/mypage.html)は「注文履歴/お気に入り/登録情報」の
   タブ1枚構成で実物と構造が違うため、構造は移植していない(2026-09-08判断)。
   このファイルではDOMを一切変更していない。テンプレート側の変更は
   <link>タグの追加だけ。

   【スコープ】3種類のフックを使い分ける。どれも外してはいけない。

   1. .p-account__inner … 26ページ。左メニュー付きのマイページ本体。
        外側の .p-account を持つ24ページに加えて、
        customer/subs_orders/products/show と variants/show の2ページは
        .p-account を持たず .p-account__inner から始まるためこちらで拾う。
        【重要】この2ページは id が #product-show-view で、商品詳細ページ
        (shop/products/show.html.liquid)と完全に衝突する。
        スコープに #product-show-view を使うと商品詳細が壊れる。使用禁止。

   2. .p-account_form … 3ページ。会員登録(customers/registrations/new)と
        パスワード再設定(customers/passwords/new・edit)。
        .p-account とは別クラスなので個別に併記が必要。
        grep 'p-account' は p-account_form にもマッチするので数え間違えやすい。

   3. #set-edit-view … 1ページ。定期便のセット内容変更
        (customer/subs_orders/sets/edit)。.p-account 系を一切持たない。

   c-form_table / u-color__btn--bg / c-breadcrumbs / u-text--head は
   商品詳細・カート・お問い合わせでも使われているため、裸で書くと
   他ページを壊す。

   【前提】
   :root のデザイントークンは pitsole_top.css が持っている。
   このファイルは必ず pitsole_top.css の後に読み込むこと。

   【!important が必要な理由】
   theme_customize.css.liquid が管理画面のカラー設定を
     .u-color__btn--bg { background: <設定色> !important; }
     .u-text--head    { color: <設定色> !important; font-size: <設定値> !important; }
   のように !important 付きで注入している。色とフォントサイズを変えるには
   セレクタを強めた上で !important が必要。
   一方 font-family には !important が付いていないので、セレクタを
   強めるだけで勝てる(だから font-family には付けていない)。
   u-margin__* にも !important は無い(bundle.css 746/758行)。

   【ブレークポイント】
   bundle.css のSPは max-width:719px、pitsole_top.css は 767/768px を使う。
   bundle.css のルールを打ち消す指定は、範囲を揃えるため 719px で書く。

   現在の管理画面の設定値(2026-09-08時点):
     ボタン背景 #470331 / 地色 #ffffff / 見出し文字 #494949 / フォント 游ゴシック
   ここをPitsoleの値に変えれば、このファイルの色指定の大半は不要になる。
   ただし全ブランド・全ページに一斉に効くため、今回はCSSで閉じている。
   ============================================================ */


/* ------------------------------------------------------------
   1. ページ全体の地色
   .p-account 自体に背景を付けると、親の u-margin__top--60 /
   u-margin__bottom--100 の分だけ上下に白帯が残る。
   .l-container は display:block の全幅要素なので、:has() で
   マイページのときだけ地色を付ける。
   100vw + 負のmargin は縦スクロールバー分ズレるため使わない
   (商品一覧で踏んだ地雷)。:has() はABOUTページでも使っている手法。
   ------------------------------------------------------------ */
main.l-container:has(.p-account__inner),
main.l-container:has(.p-account_form),
main.l-container#set-edit-view {
  background-color: var(--color-cream);
}


/* ------------------------------------------------------------
   2. 上下に出る白帯の解消(HANDOFF.mdの地雷3と同じ症状)
   マイページの本文は .l-container__row に
   u-margin__top--60 / u-margin__bottom--100 が付いている
   (27ページが上下、7ページが上だけ)。<main> に padding も border も
   無いとこの margin はマージン相殺で <main> の外へ抜けるため、
   地色のクリームが余白まで届かず上下が白いまま残る。

   そこで margin を 0 にして、同じ量を padding として内側に入れる。
   u-margin__* 側に !important は無いので詳細度だけで勝てる。

   .p-account ではなく .l-container__row に付けているのは、
   フラッシュメッセージ(注文完了やエラーの通知)が row の直下・
   .p-account の外に描画されるため。.p-account に付けると
   通知だけがクリームの上端に張り付いてしまう。

   row が2つあるページ(customers/passwords/edit・new、
   customers/registrations/new、customer/subs_orders/sets/edit)で
   余白が二重にならないよう、上は先頭のrow・下は末尾のrowだけに付ける。
   rowが1つのページは両方が同じ要素に当たるので問題ない。

   量は下70px(ユーザー指定)、上は元の60pxを踏襲。
   ------------------------------------------------------------ */
main.l-container:has(.p-account__inner) > .l-container__row,
main.l-container:has(.p-account_form) > .l-container__row,
main.l-container#set-edit-view > .l-container__row {
  margin-top: 0;
  margin-bottom: 0;
}

main.l-container:has(.p-account__inner) > .l-container__row:first-of-type,
main.l-container:has(.p-account_form) > .l-container__row:first-of-type,
main.l-container#set-edit-view > .l-container__row:first-of-type {
  padding-top: 60px;
}

main.l-container:has(.p-account__inner) > .l-container__row:last-of-type,
main.l-container:has(.p-account_form) > .l-container__row:last-of-type,
main.l-container#set-edit-view > .l-container__row:last-of-type {
  padding-bottom: 70px;
}


/* ------------------------------------------------------------
   3. 基礎(フォント・文字色)
   font-size は触らない。c-form_table の th が white-space:nowrap を
   持っているため、本文サイズを 13px から上げると項目名が溢れる
   おそれがある。サイズ調整は見た目を確認してから別途行う。
   ------------------------------------------------------------ */
.p-account__inner,
.p-account_form,
#set-edit-view {
  color: var(--color-ink);
  font-family: var(--font-sans);
}

.p-account__inner .u-text--body,
.p-account__inner .u-text--subhead,
.p-account_form .u-text--body,
.p-account_form .u-text--subhead,
#set-edit-view .u-text--body,
#set-edit-view .u-text--subhead {
  font-family: var(--font-sans);
  color: var(--color-ink) !important;
}

/* 補足テキスト(注記・件数・日付など)はPitsoleのグレーに寄せる */
.p-account__inner .u-color__text--sub,
.p-account_form .u-color__text--sub,
#set-edit-view .u-color__text--sub {
  color: var(--color-gray) !important;
}


/* ------------------------------------------------------------
   4. パンくず
   他ページの .breadcrumb と同じ、小さめ・字間広めのグレー。
   ------------------------------------------------------------ */
.p-account__inner .c-breadcrumbs {
  margin-top: 4px;
}

.p-account__inner .c-breadcrumbs__item,
.p-account__inner .c-breadcrumbs__item__inner,
.p-account__inner .c-breadcrumbs__item a {
  font-family: var(--font-sans);
  font-size: var(--fs-caption) !important;
  letter-spacing: 0.04em;
  color: var(--color-gray) !important;
}

.p-account__inner .c-breadcrumbs__item a:hover {
  color: var(--color-rose-deep) !important;
}


/* ------------------------------------------------------------
   5. ページ見出し
   他ページの .sec-title(明朝・字間0.06em・line-height1.6)に合わせる。
   font-size は元から24px = --fs-h2 と同値なので変えない。
   .p-account__inner__content__title は flex(見出し + 右側のボタン)
   なので display 系は触らない。
   ------------------------------------------------------------ */
.p-account__inner .p-account__inner__content__title,
.p-account__inner .p-account__inner__content__title.u-text--head {
  font-family: var(--font-serif-jp);
  color: var(--color-ink) !important;
  letter-spacing: 0.06em;
  line-height: 1.6;
  font-weight: 500;
  margin-top: 48px;
}

/* ブロック見出し(「お客様情報」「ご注文履歴」など) */
.p-account__inner .p-mypage__block__title,
.p-account__inner .p-subscription_detail__block__head__title,
.p-account_form .p-account_form__inner__title,
#set-edit-view .p-mypage__block__title {
  font-family: var(--font-serif-jp);
  color: var(--color-ink) !important;
  letter-spacing: 0.04em;
}


/* ------------------------------------------------------------
   6. 左メニュー
   区切り線をPitsoleの --color-line に。
   ------------------------------------------------------------ */
.p-account__inner .p-account__inner__menu {
  border-right-color: var(--color-line) !important;
}

.p-account__inner .c-account_menu,
.p-account__inner .c-account_menu__container__block {
  border-color: var(--color-line) !important;
}

.p-account__inner .c-account_menu__container__block__top span,
.p-account__inner .c-account_menu__container__block__title span {
  font-family: var(--font-serif-jp);
  letter-spacing: 0.04em;
}

.p-account__inner .c-account_menu__container__block__list__item__inner:hover span {
  color: var(--color-rose-deep) !important;
}

/* SPのメニュー開閉ボタン。
   DOM側に u-color__bg--sub(#868686のグレー地) と u-color__text--base
   (白文字)が付いていて、ここで色を当てるまで管理画面デフォルトの
   グレー帯のまま出ていた(2026-09-11に修正)。
   どちらも util.css の単一クラス(詳細度0,1,0)で !important も付かない
   ため、この2クラスセレクタ(0,2,0)で上書きできる。
   開閉アイコンの <i> には色指定が無く、ボタンから継承する。 */
.p-account__inner .c-account_menu__btn {
  font-family: var(--font-sans);
  border-radius: var(--radius-sm);
  background: var(--color-cream-deep);
  color: var(--color-ink);
}


/* ------------------------------------------------------------
   7. ボタン
   他ページの .btn--primary(rose-deep / 白文字 / 角丸999px /
   hoverでink + scale1.02)に合わせる。

   u-color__btn--bg は c-form_table のラジオ・チェックボックスの
   「枠」にも付いている(radio__frame / checkbox__frame)。これらに
   ボタンのpaddingやmin-heightを当てると入力欄が崩れるため
   :not() で除外する。
   ------------------------------------------------------------ */
.p-account__inner .u-color__btn--bg:not(.c-form_table__radio__frame):not(.c-form_table__checkbox__frame),
.p-account_form .u-color__btn--bg:not(.c-form_table__radio__frame):not(.c-form_table__checkbox__frame),
#set-edit-view .u-color__btn--bg:not(.c-form_table__radio__frame):not(.c-form_table__checkbox__frame) {
  background: var(--color-rose-deep) !important;
  color: var(--color-white) !important;
  border: none !important;
  border-radius: var(--radius-btn) !important;
  font-family: var(--font-sans);
  letter-spacing: 0.08em;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.p-account__inner .u-color__btn--bg:not(.c-form_table__radio__frame):not(.c-form_table__checkbox__frame):hover,
.p-account_form .u-color__btn--bg:not(.c-form_table__radio__frame):not(.c-form_table__checkbox__frame):hover,
#set-edit-view .u-color__btn--bg:not(.c-form_table__radio__frame):not(.c-form_table__checkbox__frame):hover {
  background: var(--color-ink) !important;
  transform: scale(1.02);
}

/* 送信ボタンなど、幅と高さを持つ主要ボタン */
.p-account__inner .p-account__inner__content__form__bottom__btn,
.p-account__inner .p-subscription_detail__block__head__btn,
.p-account__inner .p-subscription_detail__block__bottom__btn,
.p-account__inner .p-history_list__item__header__btn,
.p-account_form .p-account_form__inner__bottom__btn,
.p-account_form .p-account_form__inner__bottom__mailbtn,
#set-edit-view .p-account__inner__content__form__bottom__btn {
  min-height: 52px;
  border-radius: var(--radius-btn) !important;
}

/* p-account_form 側のテキストリンク */
.p-account_form .p-account_form__inner__bottom__link {
  color: var(--color-rose-deep) !important;
  font-family: var(--font-sans);
}

/* ログアウト(左メニュー最下部)。主要ボタンより控えめにしたいので
   他ページの .btn--secondary(枠線 + ink文字、hoverで反転)に寄せる。 */
.p-account__inner .c-account_menu__container__block__logout {
  background: transparent !important;
  color: var(--color-ink) !important;
  border: 1px solid var(--color-ink) !important;
  border-radius: var(--radius-btn) !important;
  letter-spacing: 0.08em;
}

.p-account__inner .c-account_menu__container__block__logout:hover {
  background: var(--color-ink) !important;
  color: var(--color-white) !important;
}

.p-account__inner .c-account_menu__container__block__logout:hover i {
  color: var(--color-white) !important;
}

/* 卸専用ページへのリンク(条件付きで出る独自ボタン) */
.p-account__inner .wholesale-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 24px;
  border: 1px solid var(--color-ink);
  border-radius: var(--radius-btn);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  letter-spacing: 0.08em;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.p-account__inner .wholesale-button:hover {
  background: var(--color-ink);
  color: var(--color-white);
}

/* モーダルのキャンセルボタン */
.p-account__inner .c-modal__button--cancel {
  border: 1px solid var(--color-gray) !important;
  border-radius: var(--radius-btn) !important;
  color: var(--color-gray) !important;
}


/* ------------------------------------------------------------
   8. ブロック・カード面
   地色をcreamにしたぶん、中身は白面 + 角丸で他ページのカードに揃える。
   ------------------------------------------------------------ */
.p-account__inner .p-mypage__block,
.p-account__inner .p-subscription_detail__block,
.p-account__inner .p-history_list__item,
.p-account__inner .c-cart_item,
.p-account_form .p-account_form__inner {
  background-color: var(--color-white);
  border-color: var(--color-line) !important;
  border-radius: var(--radius-card);
}

.p-account__inner .p-mypage__block,
.p-account__inner .p-subscription_detail__block,
.p-account_form .p-account_form__inner {
  padding: 24px;
}

.p-account__inner .c-cart_item {
  padding: 16px;
}


/* ------------------------------------------------------------
   9. フォーム
   【重要】DOMは一切変更していない。c-form_table の構造と
   validate[] のクラスはecforce側の検証エンジンが見ているため、
   マークアップを書き換えると入力チェックが壊れる。
   ここは枠線・角丸・フォントだけを変えている。
   ------------------------------------------------------------ */
.p-account__inner .c-form_table > tbody > tr > th,
.p-account_form .c-form_table > tbody > tr > th,
#set-edit-view .c-form_table > tbody > tr > th {
  font-family: var(--font-sans);
  color: var(--color-ink) !important;
  letter-spacing: 0.04em;
}

.p-account__inner .c-form_table input[type="text"],
.p-account__inner .c-form_table input[type="email"],
.p-account__inner .c-form_table input[type="tel"],
.p-account__inner .c-form_table input[type="number"],
.p-account__inner .c-form_table input[type="password"],
.p-account__inner .c-form_table textarea,
.p-account__inner .c-form_table select,
.p-account_form .c-form_table input[type="text"],
.p-account_form .c-form_table input[type="email"],
.p-account_form .c-form_table input[type="tel"],
.p-account_form .c-form_table input[type="number"],
.p-account_form .c-form_table input[type="password"],
.p-account_form .c-form_table textarea,
.p-account_form .c-form_table select,
#set-edit-view .c-form_table input[type="text"],
#set-edit-view .c-form_table select {
  border-color: var(--color-line) !important;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  color: var(--color-ink);
  background-color: var(--color-white);
}

.p-account__inner .c-form_table input[type="text"]:focus,
.p-account__inner .c-form_table input[type="email"]:focus,
.p-account__inner .c-form_table input[type="tel"]:focus,
.p-account__inner .c-form_table input[type="number"]:focus,
.p-account__inner .c-form_table input[type="password"]:focus,
.p-account__inner .c-form_table textarea:focus,
.p-account__inner .c-form_table select:focus,
.p-account_form .c-form_table input[type="text"]:focus,
.p-account_form .c-form_table input[type="email"]:focus,
.p-account_form .c-form_table input[type="password"]:focus,
.p-account_form .c-form_table select:focus {
  border-color: var(--color-rose) !important;
  outline: none;
}

/* 必須マーク。ecforce標準の色を変えるだけで、位置は触らない。 */
.p-account__inner .c-form_table > tbody > tr > th.is-star::after,
.p-account_form .c-form_table > tbody > tr > th.is-star::after {
  color: var(--color-rose-deep);
}

/* 検証エラーの吹き出しは検証エンジンが生成する。
   位置やDOMは触らず、色だけPitsole側に寄せる。 */
.p-account__inner .formError .formErrorContent,
.p-account_form .formError .formErrorContent {
  font-family: var(--font-sans);
  border-radius: var(--radius-sm);
}


/* ------------------------------------------------------------
   10. 一覧・罫線・リンク
   ------------------------------------------------------------ */
.p-account__inner .p-history_list__item__header,
.p-account__inner .c-cart_item__info__title {
  font-family: var(--font-serif-jp);
  letter-spacing: 0.04em;
}

.p-account__inner .u-color__border--border,
.p-account_form .u-color__border--border,
#set-edit-view .u-color__border--border {
  border-color: var(--color-line) !important;
}

.p-account__inner .u-text--link,
.p-account_form .u-text--link,
#set-edit-view .u-text--link {
  color: var(--color-rose-deep) !important;
  font-family: var(--font-sans);
}

.p-account__inner .u-text--link:hover,
.p-account_form .u-text--link:hover,
#set-edit-view .u-text--link:hover {
  color: var(--color-ink) !important;
}


/* ============================================================
   11. SP(max-width:719px)
   bundle.css のSP指定と範囲を揃えるため 719px で書く。
   ============================================================ */
@media screen and (max-width: 719px) {

  /* 上下の余白はSPでは詰める。
     PitsoleのSP基準は --gutter:28px / --sec-pad:64px。 */
  main.l-container:has(.p-account__inner) > .l-container__row:first-of-type,
  main.l-container:has(.p-account_form) > .l-container__row:first-of-type,
  main.l-container#set-edit-view > .l-container__row:first-of-type {
    padding-top: 28px;
  }

  main.l-container:has(.p-account__inner) > .l-container__row:last-of-type,
  main.l-container:has(.p-account_form) > .l-container__row:last-of-type,
  main.l-container#set-edit-view > .l-container__row:last-of-type {
    padding-bottom: 48px;
  }

  /* 【重要】bundle.css 10495行が SP時の .p-account__inner__menu に
     margin-top:-60px を入れている。これは row の u-margin__top--60 を
     打ち消して、SPではメニュー(アコーディオン)を最上部に詰めるための
     負マージン。上の 2. で row の margin を 0 にしたため打ち消す対象が
     無くなり、このままだとメニューがクリームの外(上の白地)へ
     60px飛び出す。ここで 0 に戻す。 */
  .p-account__inner .p-account__inner__menu {
    margin-top: 0;
  }

  /* 上のメニューと本文の間隔。bundle.cssは15px。
     メニューがアコーディオンで閉じている状態でも息が付くよう少し広げる。 */
  .p-account__inner .p-account__inner__content {
    margin-top: 24px;
  }

  /* 左右の余白。bundle.cssのSPは15pxだが、Pitsoleの他ページは
     --gutter(SP 28px)。SPが「狭すぎる」とレビューが出た経緯があるので
     他ページと揃える。 */
  .p-account,
  .p-account_form {
    padding-right: var(--gutter);
    padding-left: var(--gutter);
  }

  /* カード内側の余白はSPでは詰める(24pxだと本文の幅が足りない) */
  .p-account__inner .p-mypage__block,
  .p-account__inner .p-subscription_detail__block,
  .p-account_form .p-account_form__inner {
    padding: 16px;
  }

  .p-account__inner .c-cart_item {
    padding: 12px;
  }

  /* 見出し。bundle.cssがSPで22pxにしている。明朝で字間を空けるぶん
     上の余白を少し詰めてバランスを取る。 */
  .p-account__inner .p-account__inner__content__title,
  .p-account__inner .p-account__inner__content__title.u-text--head {
    margin-top: 32px;
  }
}


/* ------------------------------------------------------------
   9. 公式アプリ「Pitme」導線(D2C_CR-89 / 2026-09-10)

   マイページTOP(customer/base/show.html.liquid)の会員名の直下。
   出典: Figma「デザインレビュー用_南」592:2(SP) / 592:69(PC)

   【スコープ】#customers-view はマイページTOP専用のidで、テーマ内に
   1箇所しかない(grep済み)。ここだけに閉じているので他ページに出ない。

   【Figmaの数値をそのまま使っていない箇所とその理由】
   フレームは2倍スケール(ヘッダーが枠内142px・実物71pxで確認)。
   ただし2で割ると本文11px・注記8〜9pxになり、この案件の基準
   (本文15/16px・注記13px)を大きく下回って読めない。
   Figmaのフォントサイズが 20.12 / 33.12 / 24.667px という半端な値で、
   グループを非整数倍で縮小した痕跡が出ている。
   一方、字間と行間は「比率」なので縮小の影響を受けず信用できる。
   実際ラベルの 4.4264/20.12 = 0.22em は pitsole_top.css の .sec-label と、
   PC見出しの 1.9872/33.12 = 0.06em は .sec-title と完全に一致する。
   → 構成・色・字間・行間はFigma通り、フォントサイズは既存の型スケール。
   画像の表示寸法(ロゴ282px・バッジ高45px)はFigma通り。

   SP見出しだけ字間が 3.4/34 = 0.10em でPCと食い違うが、PC側が
   .sec-title と一致するのでPCを採り 0.06em に揃えた。

   【!important を使っていない理由】
   theme_customize.css.liquid が !important で潰してくるのは
   .u-color__btn--bg と .u-text--head。ここでは独自クラスだけを
   使っているので競合しない。
   ------------------------------------------------------------ */

/* PCの帯は右端をビューポートまで伸ばす(デザイン通り)。50vw はスクロール
   バーの幅を含むため、そのままだと横スクロールが出る(商品一覧で踏んだ地雷)。
   はみ出す分をここで刈り取る。overflow:hidden ではなく clip を使うのは
   スクロールコンテナを作らないため。.l-header は position:fixed で
   main の外なので、ヘッダーの固定表示には影響しない。 */
#customers-view {
  overflow-x: clip;
}

#customers-view .p-pitme {
  margin-top: 28px;
  background: var(--color-cream-deep);
  font-family: var(--font-sans);
  color: var(--color-ink);
  /* 左端はサイドバーの区切り線まで。.p-account__inner は
     240px + calc(100% - 300px) = 100% - 60px なので、flexの空きが
     ビューポート幅によらず常に正確に60px。負マージンで寸分違わず合う。 */
  margin-left: -60px;
  /* 右端はビューポートまで。1200px以下では min() が 0 を選ぶ
     (その時点で content領域の右端＝ビューポート端になっているため)。 */
  margin-right: min(0px, calc(600px - 50vw));
  padding: 40px 40px 40px 60px;
}

/* ラベル。pitsole_top.css の .sec-label と同じ指定 */
#customers-view .p-pitme__label {
  display: block;
  margin-bottom: 10px;
  font-family: var(--font-serif);
  font-size: var(--fs-caption);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-rose-deep);
}

#customers-view .p-pitme__title {
  margin: 0;
  font-family: var(--font-serif-jp);
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.6;
}

/* 以前は .sec-lead と同じ max-width:34em で measure を絞っていたが、
   2026-09-11 に実機を見たユーザーの判断で外した(帯の幅いっぱいに流す)。
   SPでは本文幅が 34em に届かないので、この変更が効くのはPCのみ。 */
#customers-view .p-pitme__lead {
  margin: 16px 0 0;
  font-size: var(--fs-body);
  /* 行間はFigmaの1.55だったが、Pitsoleの他ページは本文を1.9で組んでいる
     (hero__sub / feature__body / voice-card__text / howto__body)。
     ここだけ詰まって見えるため他ページに揃えた(2026-09-11)。 */
  line-height: 1.9;
}

/* リード文の強調。9/8に「palette外の赤」と指摘した箇所が
   デザイン側で rose-deep に直っていたので、そのまま採用。
   2026-09-11に対象が2箇所になった(マーケ指摘)。
     1つ目「約40種類以上」
     2つ目「Pitsoleをお持ちの方は、ぜひ併用してご活用ください。」(一文まるごと) */
#customers-view .p-pitme__lead strong {
  font-weight: 700;
  color: var(--color-rose-deep);
}

/* ロゴとストアバッジの行。PCは横並び、SPは縦積み。
   上マージンはPC/SPとも16px(2026-09-11ユーザー指定。元は24px)。 */
#customers-view .p-pitme__body {
  margin-top: 16px;
  display: flex;
  align-items: center;
  gap: 15px;
}

/* 素材は2倍(564x139)。表示は半分。犬・ワードマーク・ピンクの
   キャッチコピーが1枚に焼き込まれているので、テキストでは組まない。 */
#customers-view .p-pitme__logo {
  display: block;
  width: 282px;
  height: auto;
}

#customers-view .p-pitme__store {
  display: flex;
  align-items: center;
  gap: 10px;
}

#customers-view .p-pitme__store__link {
  display: block;
}

/* 高さ基準で組む。最小高はAppleが40px、Googleが28px
   (2026-09-11にPartner Marketing Hubで確認。以前このコメントは
   両社40pxと書いていたが、Google側は28pxだった)。45pxは両方を満たす。
   width:auto にしてあるので、縦横比の違う素材に差し替わっても崩れない。
   実際 2026-09-11 のPNG→SVG差し替えで縦横比がわずかに変わったが、
   ここは触らずに追従できている。 */
#customers-view .p-pitme__store__link img {
  display: block;
  height: 45px;
  width: auto;
}

/* 上マージンはPC/SPとも6px(2026-09-11ユーザー指定。16px → 8px → 6px)。 */
#customers-view .p-pitme__note {
  margin: 6px 0 0;
  font-size: var(--fs-caption);
  letter-spacing: 0.02em;
  /* 行間を指定していなかったのでブラウザ/bundle.css依存だった。
     他ページの .note / .disclaimer と同じ1.7に揃える(2026-09-11)。 */
  line-height: 1.7;
}

@media screen and (max-width: 719px) {
  /* SPの帯も画面端まで。SPで左右の余白を持っているのは
     こちらが当てた .p-account の --gutter(28px)だけで、
     .l-container__row にはCSSが無い(grep済み)。よって負マージンが
     ちょうど画面端に届く。vw を使わずに済むのでスクロールバーの
     影響を受けない。 */
  #customers-view .p-pitme {
    margin-right: calc(-1 * var(--gutter));
    margin-left: calc(-1 * var(--gutter));
    padding: 28px var(--gutter);
  }

  /* ------------------------------------------------------------
     SPの文字組み(2026-09-11)
     「見出し・リード文・注釈を1行ずつ短くしたい」という指定。
     固定のremで指定すると、合わせた端末幅より狭い端末で必ず再発する
     (375pxで直しても320pxで折り返す)ため、pitsole_top.css:455 の
     .about-banner__text と同じ「N文字が収まる上限でサイズを止める」
     手法にする。min() の第1引数が上限なので、広い端末では従来どおり。

     除数は実機のスクリーンショット(375px幅・本文319px)からの実測。
     リード文が1行21文字だったことから本文幅319px = 21.3em と確定し、
     そこから各要素の必要幅を逆算した。
       見出し 歩くほどおトクに。公式アプリ『Pitme』
              全角16字×1.06(字間) + Pitme(欧文約3.0em) = 20.16em
              → 3%の余裕を見て 20.8
       リード文 全体で約83.4em。4行に収めるには改行の端数(約2.6em)を
              足した86em が4行に入ればよい → 86/4 × 1.03 = 22.1
       注釈   全角27字×1.02(字間) + Pitme(約2.8em) = 30.3em
              → 3%の余裕を見て 31.2

     文字数を変えたら除数も見直すこと(全角1字増減 ≒ 1.0)。
     ------------------------------------------------------------ */
  /* 見出しは clamp で「1行に収まる上限」と「本文より小さくならない下限」を
     両方押さえる(2026-09-11)。「2行にならないぎりぎりまで大きく」の指定で
     一度目の 20.8 / 1.12rem から詰めた第2版。
       上限 1.1875rem(19px) … SPの --fs-h3。390px以上ではキャップで
            頭打ちになっていたので、トークンの既定値まで開けた
       可変 (100vw - 56px) / 20.4 … 1行に収まる上限
       下限 0.92rem(14.72px) … リード文13pxとの逆転を防ぐ。
            0.95remだと360px端末で下限に張り付いて2行になるため下げた

     除数20.4の内訳。実機スクショ(375px幅・本文319px)からの実測で、
     見出し「歩くほどおトクに。公式アプリ『Pitme』」は
       全角16字 × 1.06(字間0.06em) + Pitme(明朝の欧文 約2.9em) = 20.16em
     必要。20.4は余白1.2%しか見ていない【ぎりぎりの値】。
     文言・字間・font-weightのどれかを変えたら必ず再計算すること。
     実機で2行に折り返すようなら 20.8(余白3%)へ戻す。

       320px → 14.7px(下限・2行) / 360px → 14.9px(1行)
       375px → 15.6px(1行) / 390px → 16.4px(1行) / 430px → 18.3px(1行) */
  #customers-view .p-pitme__title {
    font-size: clamp(0.92rem, calc((100vw - 56px) / 20.4), 1.1875rem);
  }

  /* SPのリード文はマイページ本文と同じ13pxに合わせる(2026-09-11)。
     同じ画面の <p>定期購入中の商品はありません。</p> などは
     u-text--body から継承する13px(theme_customize.css.liquid が
     管理画面の font_body:13 を !important で注入)。Pitme導線だけ
     14.4pxで浮いていた。--fs-caption も同じ13px。
     幅追従(min/calc)は不要になったので外した。375pxでは4行、
     320pxでは5行になるが、周囲との統一を優先する。 */
  #customers-view .p-pitme__lead {
    font-size: var(--fs-caption);
  }

  /* 直上のロゴとストアバッジをSPで中央揃えにしたため、左寄せのままだと
     ズレて見える(実機で指摘)。注釈も中央に揃える(2026-09-11)。

     【注意】375pxで約10.2px、320pxで約8.5pxまで落ちる。
     この案件の注釈の下限は12px(2026-08-28に .disclaimer を13px→12px)
     なので、それを下回っている。中央揃えにしたことで2行でも
     不自然に見えなくなったので、文言を
     「どなたでも無料でご利用いただけます。」(18字)へ詰めて
     13pxへ戻すか、min()を外して2行を許すかの判断余地がある。 */
  #customers-view .p-pitme__note {
    font-size: min(0.73rem, calc((100vw - 56px) / 31.2));
    text-align: center;
  }

  /* PCでは「完了。」の後で改行して2文に分けているが、SPは幅が狭く
     改行位置が不自然になるので強制改行を殺す(2026-09-11)。
     このリード文の <br> は1つだけなので要素セレクタで足りる。 */
  #customers-view .p-pitme__lead br {
    display: none;
  }

  /* 上マージンはPCと同値(16px)になったので基本指定に一本化した。
     ここではSPの縦積みだけを指定する。 */
  #customers-view .p-pitme__body {
    display: block;
  }

  /* SPは縦積みにしたうえで、ロゴとバッジを画面の中央に置く
     (2026-09-11)。ロゴは max-width で本文幅より狭くなるので
     auto マージン、バッジ2枚は flex なので justify-content で寄せる。 */
  #customers-view .p-pitme__logo {
    width: 100%;
    max-width: 282px;
    margin-left: auto;
    margin-right: auto;
  }

  #customers-view .p-pitme__store {
    margin-top: 12px;
    justify-content: center;
  }
}

/* バッジ2枚は 122.5 + 10 + 151.9 = 284.3px。SPの本文幅は
   375-56 = 319px なので収まるが、320px幅の端末では 264px しか
   無く溢れる。最小規定の40pxまで落として 253.9px に収める。
   (2026-09-11にPNG→SVGへ差し替えて実寸が 282 → 284.3px に増えたが、
    どちらの分岐も収まる範囲に留まっている) */
@media screen and (max-width: 359px) {
  #customers-view .p-pitme__store__link img {
    height: 40px;
  }
}