@charset "UTF-8";

/* ==========================================================================
   cle-account.css — 会員ページ（/shop/customer 配下 38枚）

   カート（cle-cart.css）・注文フロー（cle-order.css）と同じ方針。ecforce
   既定の造りと仕様をそのまま使い、CSS だけでトンマナを寄せる。
   **テンプレートは1枚も触っていない。**

   ■ スコープは .p-account 1つ
     38枚のうち 32枚が .p-account を共通の器として持つ。ここを起点にすれば
     会員ページ全部に効く。ページ地だけは main を取る必要があるので
     .l-container:has(.p-account) で拾っている。

     .p-account を持たない6枚のうち4枚は部品（nav・フォームの断片）で、
     親のページ側に .p-account があるので効く。残る2枚は
       customer/subs_orders/sets/edit.html.liquid          (#set-edit-view)
       customer/subs_orders/orders/index.html.liquid
     で、定期便のセット変更まわり。**ここだけ既定のまま。**

   ■ デザインより既定の造りを優先している
     デザイン（docs/design/design_0901/mypage.html ＋ account.css）は
     サイドバーを持たない1カラムで、カード3枚の要約とメニューの縦並びを
     自前で組んでいる。ecforce の会員ページは 38枚がサイドバー付きの
     2カラムで動いていて、作り替えると全部を作り直すことになる。
     **既定の骨格を残し、パーツの見た目だけデザインの調子に寄せる。**

     デザインから借りているのは、見出しの組み（欧文ラベル ＋ 明朝）、
     罫線1本で区切る一覧、角を落としたボタン、字間の広い小さな欧文。

   ■ すでに実装したパーツに合わせているところ
     ここが持たない値は、先に作った面から借りている。**片方だけ直さないこと。**

       ボタン          cle-page.css 4節（.cle-btn の --solid / --outline）
       入力欄・チェック cle-form.css 2〜4節（面の並びに .p-account が入っている）
       パンくずの字    cle-page.css 3節（.cle-crumb）
       商品の行        cle-cart.css 3節（.c-cart_item）
       タグの印        cle-list.css 5節・cle-cart.css の .c-badge
       ページ送り      cle-list.css 7節（.cle-products__pager）

   ■ 色は cle-common.css で直したぶんが先に効いている
     この面が使う既定の色は3か所に分かれていた。どれも cle-common.css で
     ブランド値へ向けてあるので、ここでは色を書き直していない箇所が多い。

       :root の --color-*        bundle.css 全体（ボタン・罫線・字）
       util.css の .u-color__*   .u-color__bg--bg など
       @layer の --Base ほか     会員ページの新しめの部品

     **ベタ書きで残っていたぶん**（#868686 / #000000 / #f5f8fa / 角丸）
     だけをこのファイルで打ち消している。

   ■ 読み込み位置
     ec_force/shop/sections/_head.html.liquid から条件なしで読む。
     指定はすべて .p-account の下に閉じてある。
   ========================================================================== */

/* ==========================================================================
   1. ページの地と幅

   地はカート・注文フローと同じ2色のクリーム。幅は他の下層ページと同じ
   1400px ＋ 共通ガター。

   この面の main は .l-container を持つので、固定ヘッダーぶんの押し下げは
   cle-header.css 1節がそのまま効く。カートのような場合分けは要らない。
   ========================================================================== */

.l-container:has(.p-account) {
  background: linear-gradient(180deg, #f6f0e7 0%, #efe8dc 100%);
}

.l-container:has(.p-account) .l-container__row {
  box-sizing: border-box;
  width: min(100%, 1400px);
  margin-top: 0;
  margin-right: auto;
  margin-bottom: 0;
  margin-left: auto;
  padding-top: 56px;
  padding-right: var(--cle-page-gutter);
  padding-bottom: 96px;
  padding-left: var(--cle-page-gutter);
}

/* 既定は 40px の左右を自分で持っている。左右は行1か所で決める */
.p-account {
  padding-right: 0;
  padding-left: 0;
}

/* ==========================================================================
   2. 2カラム（サイドバー ＋ 本文）

   既定は「240px のメニュー ＋ 残り」の flex。デザインはサイドバーを
   持たないが、38枚がこの形で動いているので列はそのまま使う。
   間の縦罫だけブランドの色に替える。
   ========================================================================== */

.p-account__inner {
  max-width: none;
  width: 100%;
  align-items: flex-start;
}

.p-account__inner__menu {
  border-right-color: var(--cle-line);
}

/* ==========================================================================
   3. サイドバー（.c-account_menu）

   項目の字を小さく、字間を広く。いまいる項目を塗って示す仕組みは既定に
   無いので足していない（テンプレートを触らない方針のため）。
   ========================================================================== */

.p-account .c-account_menu__list {
  padding: 4px 24px 4px 0;
}

.p-account .c-account_menu__content {
  padding: 11px 0;
}

/* 大項目。アイコン ＋ 名前 */
.p-account .c-account_menu__content.--main-heading .c-account_menu__text {
  color: var(--cle-ink);
  font: 300 14px/1.5 var(--cle-font-mincho);
}

/* 小項目。行頭の点は既定のアイコンフォント */
.p-account .c-account_menu__content.--sub-heading {
  padding-block: 4px;
  padding-left: 2px;
}

.p-account .c-account_menu__content.--sub-heading .c-account_menu__text {
  color: var(--cle-ink-soft);
  font-size: 12px;
  letter-spacing: 0.04em;
}

.p-account .c-account_menu__content.--sub-heading .c-account_menu__icon {
  width: 16px;
  font-size: 12px;
  color: var(--cle-line-strong);
}

/* アイコンは線が太く色も濃いので、少し小さく落ち着かせる */
.p-account .c-account_menu__content.--main-heading .c-account_menu__icon {
  width: 18px;
  opacity: 0.55;
}

.p-account .c-account_menu__content.--separator {
  padding-block: 10px;
}

.p-account .c-account_menu__content.--separator::after {
  background-color: var(--cle-line);
}

/* ---- ログアウト --------------------------------------------------------
   値は cle-page.css 4節の .cle-btn.--outline と同じ。主導線ではないので
   塗らずに枠線で置く（既定は塗り）。前のアイコンは白抜きの画像なので、
   塗りをやめると見えなくなる。消して字だけにする。
   ----------------------------------------------------------------------- */

.p-account .c-account_menu__logout {
  padding: 13px 16px;
  border: 1px solid var(--cle-line-strong);
  border-radius: 0;
  background: transparent;
  color: var(--cle-ink);
  transition: border-color 0.35s ease, background-color 0.35s ease;
}

.p-account .c-account_menu__logout::before {
  display: none;
}

/* 中の字は .u-text--btn（cle-common.css）が付いていて、ボタンの字色
   ＝紙の白になる。塗りをやめたので**白が白の上に乗って消える。**
   包む要素の color だけでは class 指定に負けるので、字にも当てる。
   2026-09-07 に実際に見えなくなった。 */
.p-account .c-account_menu__logout .c-account_menu__text {
  color: var(--cle-ink);
  font-size: 11px;
  letter-spacing: 0.08em;
}

.p-account .c-account_menu__logout:hover {
  border-color: var(--cle-ink);
  background: rgba(255, 253, 249, 0.6);
  opacity: 1;
}

/* ---- SPの開閉ボタン -----------------------------------------------------
   既定は #868686 の帯。ベタ書きなので cle-common.css の差し替えが効かない。
   ----------------------------------------------------------------------- */

.p-account .c-account_menu__toggle-button {
  border: 1px solid var(--cle-line-strong);
  background: transparent;
  color: var(--cle-ink);
}

.p-account .c-account_menu__toggle-button-text {
  font-size: 12px;
  letter-spacing: 0.08em;
}

/* ==========================================================================
   4. パンくず

   デザインはどのページもフッター直前に1本（.cle-crumb）。会員ページの
   既定は本文の頭にある別物（ul.c-breadcrumbs）で、置き場所が
   .p-account__inner__content の中＝サイドバーの右の列なので、CSS の order で
   下げても列の中で下がるだけ。サイドバーの下まで回り込ませられない。

   そこで cle-ui.js 3節が、共通のマークアップに組み直して main の末尾へ
   移している。**見た目は cle-page.css 3節（.cle-crumb）がそのまま受け持つ
   ので、この節に帯や字の指定は無い。**

   ここが持つのは、移った後に要る余白の調整だけ。JS が動かなかったときは
   既定のパンくずが頭に残る（消えはしない）ので、そのぶんの字も下に置く。
   ========================================================================== */

/* パンくずが後ろに付いたぶん、行の下の余白を詰める（1節は 96px） */
.l-container:has(.p-account) .l-container__row:has(~ .cle-crumb) {
  padding-bottom: 56px;
}

/* ---- JS が動かなかったとき ---------------------------------------------
   既定のパンくずが本文の頭に残る。その場合でも字が浮かないように
   最小限だけ整える。移動が成功していれば、この要素はもう無い。
   ----------------------------------------------------------------------- */

.p-account .c-breadcrumbs {
  gap: 2px;
  margin-bottom: 6px;
}

.p-account .c-breadcrumbs__item__inner {
  color: var(--cle-ink-soft);
  font-size: 11px;
  letter-spacing: 0.06em;
}

.p-account .c-breadcrumbs__item:not(:last-child)::after {
  color: var(--cle-line-strong);
  font-size: 1.2em;
}

.p-account .c-breadcrumbs__item a {
  color: var(--cle-ink-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--cle-line);
}

.p-account .c-breadcrumbs__item a:hover {
  color: var(--cle-ink);
}

/* ==========================================================================
   5. 見出しとリード文

   既定は 24px のゴシック。注文フローの節見出し（cle-order.css 4節）と
   同じ 20px の明朝にして、下に罫線を1本引く。
   ========================================================================== */

.p-account__inner__content__title {
  gap: 20px;
  margin-top: 0;
  margin-bottom: 26px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--cle-line);
  color: var(--cle-ink);
  font: 300 20px/1.4 var(--cle-font-mincho);
}

/* 一覧を持つ面（購入履歴・お気に入り・定期便・カレンダー）は
   .p-account__inner__content__title ではなく .p-list_header__inner__title を
   見出しに使う。同じ扱いにする。

   .p-list_header__inner__title は会員ページの外（セット販売・セレクション）
   でも使われるので、.p-account の下に閉じてある。 */
.p-account .p-list_header__inner__title {
  margin-bottom: 0;
  color: var(--cle-ink);
  font: 300 20px/1.4 var(--cle-font-mincho);
}

/* 上の見出しを包む器。既定は左右 40px を持つものと持たないものがあるので、
   左右を畳んでから罫線を1本引く。 */
.p-account .p-list_header,
.p-account .p-favorite__header {
  padding-right: 0;
  padding-left: 0;
}

.p-account .p-list_header__inner {
  gap: 20px;
  max-width: none;
  margin-bottom: 26px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--cle-line);
}

.p-account__inner__content__lead {
  margin-top: 0;
  margin-bottom: 24px;
  color: var(--cle-ink-soft);
  font-size: 12px;
  line-height: 2;
}

/* ==========================================================================
   6. 一覧表（.c-account_table）

   注文履歴・お届け先・カードなど 25枚が使う。既定は表全体を枠で囲み、
   行ごとにも枠を引く「箱の中に箱」。デザインの表（cle-page.css 7節の
   .cle-page__deftable）に合わせて、**枠を外して横罫だけにする。**
   ========================================================================== */

.p-account .c-account_table {
  width: 100%;
  border: 0;
  border-top: 1px solid var(--cle-line-strong);
}

.p-account .c-account_table > tbody > tr {
  border: 0;
  border-bottom: 1px solid var(--cle-line);
}

/* 見出しの行。地を敷かず字で示す */
.p-account .c-account_table > tbody > tr > th {
  padding: 14px 10px;
  color: var(--cle-ink-soft);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.p-account .c-account_table > tbody > tr > td {
  padding: 16px 10px;
  color: var(--cle-ink);
  font-size: 12px;
  line-height: 1.9;
}

.p-account .c-account_table > tbody > tr > th:first-child,
.p-account .c-account_table > tbody > tr > td:first-child {
  padding-left: 0;
}

.p-account .c-account_table > tbody > tr > th:last-child,
.p-account .c-account_table > tbody > tr > td:last-child {
  padding-right: 0;
}

/* SPは1行が縦積みになり、td の前に data-title の見出しが出る（既定の仕掛け）。
   その見出しを表の th と同じ調子にする。 */
@media (max-width: 719px) {
  .p-account .c-account_table > tbody > tr > td::before {
    display: block;
    margin-bottom: 2px;
    color: var(--cle-ink-soft);
    font-size: 10px;
    letter-spacing: 0.08em;
  }

  .p-account .c-account_table > tbody > tr > td:first-child {
    padding-left: 0;
  }

  .p-account .c-account_table > tbody > tr > td:last-child {
    padding-right: 0;
  }
}

/* ==========================================================================
   7. ボタン

   値は cle-page.css 4節の .cle-btn と同じもの。角丸（2px）と
   ベタ書きの色（#868686 / #000000 / #bdc1c2）をここで打ち消す。

     主導線   … 墨の塗り（.cle-btn.--solid）
     副次的   … 枠線（.cle-btn.--outline）
   ========================================================================== */

/* ---- 汎用のボタン（.c-button）------------------------------------------ */

.p-account .c-button {
  border-radius: 0;
  font-size: 12px;
  letter-spacing: 0.08em;
}

.p-account .c-button.--primary,
.p-account .c-button.--colorized,
.p-account .c-button.--basic {
  border: 1px solid var(--cle-ink);
  background-color: var(--cle-ink);
  color: var(--cle-white);
}

.p-account .c-button.--secondary,
.p-account .c-button.--unaltered {
  border: 1px solid var(--cle-line-strong);
  background-color: transparent;
  color: var(--cle-ink);
}

.p-account .c-button.--secondary:hover,
.p-account .c-button.--unaltered:hover {
  border-color: var(--cle-ink);
  background-color: rgba(255, 253, 249, 0.6);
  opacity: 1;
}

.p-account .c-button.--disabled {
  border: 1px solid var(--cle-line);
  background-color: transparent;
  color: var(--cle-line-strong);
}

/* ---- フォームの送信（23枚）--------------------------------------------- */

.p-account .p-account__inner__content__form__bottom {
  margin-top: 44px;
}

.p-account .p-account__inner__content__form__bottom__btn {
  max-width: 340px;
  height: auto;
  padding: 17px 24px;
  border: 1px solid var(--cle-ink);
  border-radius: 0;
  background: var(--cle-ink);
  color: var(--cle-white);
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 0.08em;
  transition: opacity 0.35s ease;
}

.p-account .p-account__inner__content__form__bottom__btn:hover {
  opacity: 0.82;
}

/* 「戻る」など。取り消しの導線なので字だけ */
.p-account .p-account__inner__content__form__bottom__link {
  margin-top: 22px;
  color: var(--cle-ink-soft);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-decoration: none;
  border-bottom: 1px solid var(--cle-line-strong);
}

/* ---- 見出しの横の小さいボタン ------------------------------------------
   「新しいお届け先を追加」など。見出しと並ぶので枠線で置く。
   ----------------------------------------------------------------------- */

.p-account .p-account__inner__content__title__btn,
.p-account .p-account__inner__content__title__subs-form__btn,
.p-account .p-account__inner__content__title__subs-form__bottom__btn,
.p-account .p-mypage__block__subscription__item__btn,
.p-account .p-account__inner__content__copy__btn {
  max-width: 240px;
  height: auto;
  padding: 12px 18px;
  border: 1px solid var(--cle-line-strong);
  border-radius: 0;
  background: transparent;
  color: var(--cle-ink);
  font-family: inherit;
  font-size: 11px;
  letter-spacing: 0.08em;
  transition: border-color 0.35s ease, background-color 0.35s ease;
}

.p-account .p-account__inner__content__title__btn:hover,
.p-account .p-account__inner__content__title__subs-form__btn:hover,
.p-account .p-account__inner__content__title__subs-form__bottom__btn:hover,
.p-account .p-mypage__block__subscription__item__btn:hover,
.p-account .p-account__inner__content__copy__btn:hover {
  border-color: var(--cle-ink);
  background: rgba(255, 253, 249, 0.6);
  opacity: 1;
}

/* ==========================================================================
   8. ページ送り（.c-pagination）

   商品一覧のページ送り（cle-list.css 7節）と同じ調子にする。
   既定は下に罫線を1本通して、いまのページだけ太い線で示す形。
   その造りは残し、字と色だけ替える。
   ========================================================================== */

.p-account .c-pagination {
  margin-top: 40px;
  padding-right: 0;
  padding-left: 0;
}

.p-account .c-pagination__list {
  border-bottom-color: var(--cle-line);
}

.p-account .c-pagination__list__item__page {
  width: 38px;
  height: 38px;
  color: var(--cle-ink-soft);
  font-size: 12px;
  letter-spacing: 0.06em;
}

.p-account .c-pagination__list__item.is-active .c-pagination__list__item__page {
  color: var(--cle-ink);
}

.p-account .c-pagination__list__item.is-active::after {
  border-bottom-color: var(--cle-ink);
}

.p-account .c-pagination__list__item__next,
.p-account .c-pagination__list__item__prev {
  width: 38px;
  height: 38px;
  color: var(--cle-ink-soft);
  font-size: 16px;
}

/* ==========================================================================
   9. マイページトップ（4つのセクション）

   ポイントと会員ランク・クーポン・購入履歴・定期便。管理画面で並べ替え
   できるので、節の見た目だけ揃えて順番には触れない。
   ========================================================================== */

.p-account .p-mypage {
  margin-top: 0;
}

/* 「〇〇 さま」。デザインの会員名の見出しと同じ扱いにする */
.p-account .p-mypage__name {
  color: var(--cle-ink);
  font: 300 22px/1.5 var(--cle-font-mincho);
}

.p-account .p-mypage__block {
  margin-top: 48px;
}

.p-account .p-mypage__block__title {
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--cle-line);
  color: var(--cle-ink);
  font: 300 16px/1.5 var(--cle-font-mincho);
}

/* ---- ポイントと会員ランク ---------------------------------------------- */

/* 既定は #f5f8fa のベタ書き。@layer の --Background とは別なので、
   cle-common.css の差し替えが効かない。 */
.p-account .p-mypage__membership {
  border: 1px solid var(--cle-line);
  background: var(--cle-paper);
}

.p-account .c-membership_rank + .c-avairable_points {
  border-top-color: var(--cle-line);
}

/* ---- クーポン ----------------------------------------------------------
   カードの角丸（8px）を落として、地と枠をブランドの値にする。
   ----------------------------------------------------------------------- */

.p-account .c-coupon {
  padding: 18px;
  border-radius: 0;
  border-color: var(--cle-line-strong);
  background: var(--cle-paper);
}

/* 中の帯。ここも #f5f8fa のベタ書き */
.p-account .c-coupon__content {
  border-radius: 0;
  background: var(--cle-white);
}

.p-account .c-coupon__code {
  color: var(--cle-ink);
  letter-spacing: 0.06em;
}

/* コピーのボタン。前のアイコンが白抜きの画像なので塗りのまま残す */
.p-account .c-coupon__copy {
  padding: 10px 14px;
  border-radius: 0;
  font-size: 11px;
  letter-spacing: 0.06em;
}

.p-account .c-coupon__expiration {
  color: var(--cle-ink-soft);
  font-size: 11px;
}

/* ---- 定期便の予定 ------------------------------------------------------ */

/* .u-color__bg--bg（cle-common.css で --cle-paper に差し替え済み）の上に
   枠を1本足して、他のカードと同じ見え方にする。 */
.p-account .p-mypage__block__subscription__item {
  padding: 18px 20px;
  border: 1px solid var(--cle-line);
}

.p-account .p-mypage__block__subscription__item__label {
  color: var(--cle-ink-soft);
  font-size: 11px;
  letter-spacing: 0.08em;
}

.p-account .p-mypage__block__subscription__item__date {
  color: var(--cle-ink);
  font: 300 14px/1.5 var(--cle-font-mincho);
}

/* ==========================================================================
   10. 商品の行（.c-cart_item）

   購入履歴・注文詳細・定期便の中身で 13枚が使う。カートの明細
   （cle-cart.css 3節）と同じ部品だが、あちらは #cart-show-view に閉じて
   いてここには届かない。**値はあちらと対。片方だけ直さないこと。**

   カートと違って数量の増減も削除も無いので、2列（写真 ＋ 情報）で組む。
   ========================================================================== */

.p-account .c-cart_item {
  gap: 20px;
  padding: 22px 0;
  border-top: 0;
  border-bottom: 1px solid var(--cle-line);
}

.p-account .c-cart_item__img {
  width: 88px;
  border: 1px solid var(--cle-line);
  background: var(--cle-white);
}

/* 既定は 4:3 の縦長。商品カードと同じ正方形にする */
.p-account .c-cart_item__img__inner {
  padding-top: 100%;
  background-size: contain;
}

.p-account .c-cart_item__info {
  padding-left: 0;
}

/* ブランド名。商品カードと同じ扱い（小さく・字間を広く・大文字） */
.p-account .c-cart_item__info__category {
  margin-bottom: 4px;
  color: var(--cle-ink-soft);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.p-account .c-cart_item__info__title {
  display: block;
  color: var(--cle-ink);
  font: 300 15px/1.6 var(--cle-font-name);
  text-decoration: none;
}

.p-account .c-cart_item__info__variant {
  margin-top: 4px;
  color: var(--cle-ink-soft);
  font-size: 11px;
}

.p-account .c-cart_item__info__total {
  margin-top: 10px;
}

.p-account .c-cart_item__info__total__quantity {
  color: var(--cle-ink-soft);
  font-size: 11px;
}

.p-account .c-cart_item__info__total__price {
  font: 300 15px/1 var(--cle-font-mincho);
}

/* ---- タグの印（.c-badge）-----------------------------------------------
   商品カード（cle-list.css 5節）・カート（cle-cart.css）と同じチップ。
   ----------------------------------------------------------------------- */

.p-account .c-badge {
  display: inline-block;
  padding: 4px 11px;
  border: 1px solid var(--cle-line-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--cle-ink-soft);
  font-size: 10px;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

/* ==========================================================================
   11. 金額の内訳（.c-billing_list）

   注文詳細と定期便で 18枚が使う。カート（cle-cart.css 4節）・注文確認
   （cle-order.css 6節）と同じ組み。**3か所とも対。**
   ここは囲みを持たない面なので、地と枠は足さずに字と罫線だけ。
   ========================================================================== */

.p-account .c-billing_list {
  padding: 0;
  background: transparent;
}

.p-account .c-billing_list__title {
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--cle-line);
  color: var(--cle-ink);
  font: 300 15px/1.5 var(--cle-font-mincho);
}

.p-account .c-billing_list__detail__item__row {
  margin-block-end: 12px;
  font-size: 12px;
}

.p-account .c-billing_list__detail__item__row__title {
  color: var(--cle-ink-soft);
  font-size: 12px;
}

.p-account .c-billing_list__detail__item__row__price {
  font-size: 13px;
}

.p-account .c-billing_list__detail__item__tax {
  color: var(--cle-ink-soft);
  font-size: 11px;
}

.p-account .c-billing_list__total__title {
  color: var(--cle-ink);
  font-size: 13px;
}

.p-account .c-billing_list__total__price {
  font: 300 20px/1 var(--cle-font-mincho);
}

/* ==========================================================================
   12. レスポンシブ（会員ページだけ 719px で切る）

   2カラムを解くのも、サイドバーが開閉式に変わるのも bundle.css が 719px で
   やっている。他の面に合わせて 768px にすると、720〜768px のあいだだけ
   ずれる。**ここは 719px のままにすること**（注文確認と同じ理由）。
   ========================================================================== */

@media (max-width: 719px) {
  .l-container:has(.p-account) .l-container__row {
    padding-top: 0;
    padding-bottom: 62px;
  }

  /* 既定はメニューを画面幅いっぱいに引き伸ばして、行の上余白を
     margin-top:-60px で吸収している。行の余白を変えたので合わせ直す。 */
  .p-account__inner__menu {
    margin-top: 0;
  }

  /* ---- SPのメニューの左右 ---------------------------------------------
     SPではメニューが .c-account_menu の
       margin: 0 calc(50% - 50vw); width: 100vw
     で行のガターを飛び越して画面幅いっぱいになる。そのぶん左右は既定が
       .c-account_menu__list    padding: 10px 0
       .c-account_menu__content padding-inline: 15px
     で取り直している。

     3節（PC のサイドバー）で書いた指定はクラス2つぶんの詳細度があり、
     **既定のこの2つ（クラス1つぶん）に勝ってしまう。** 右だけ 24px 空いて
     左は 0 になり、項目が画面の左端に貼り付いて右にずれて見えていた
     （2026-09-07）。ここで既定の値へ戻す。

     **3節に左右の指定を足したら、この節にも同じ数だけ戻しを足すこと。**
     -------------------------------------------------------------------- */

  .p-account .c-account_menu__list {
    padding: 10px 0;
  }

  .p-account .c-account_menu__content {
    padding-block: 12px;
    padding-inline: var(--cle-page-gutter);
  }

  .p-account .c-account_menu__content.--sub-heading {
    padding-block: 6px;
  }

  .p-account .c-account_menu__content.--separator {
    padding-block: 10px;
  }

  /* 開閉ボタンの帯も同じ左右に揃える。ログアウトの行は
     .c-account_menu__content なので上の指定で一緒に揃う。 */
  .p-account .c-account_menu__toggle-button {
    padding-inline: var(--cle-page-gutter);
  }

  .p-account__inner__content {
    margin-top: 32px;
  }

  .p-account__inner__content__title {
    gap: 14px;
    margin-bottom: 20px;
    padding-bottom: 14px;
    font-size: 18px;
  }

  .p-account .p-mypage__name {
    font-size: 19px;
  }

  .p-account .p-account__inner__content__form__bottom__btn {
    max-width: none;
  }

  .p-account .c-cart_item__img {
    width: 72px;
  }
}