/* ==========================================================================
   マイアカウント・会員ログイン（ベースデザイン同期・1000pxワイド＆ボタンサイズ完全同期版）
   ========================================================================= */

/* --------------------------------------------------------------------------
   1. 全体コンテナ：一番外側の角丸グレーの枠線を完全に消去（1000pxワイド版）
   -------------------------------------------------------------------------- */
html body #customer .base02,
html body .p-page__body-inner,
html body form[action*="/customer/login"] {
  padding-top: 0px !important;
  padding-bottom: 10px !important;
  margin-bottom: 0 !important;
}

.p-login,
.p-page__body-inner {
  display: block !important; 
  width: 100% !important;
  max-width: 1000px !important; /* ★1000pxの最大ワイド幅に拡張 */
  margin: 40px auto !important;
  padding: 50px 0px !important; /* 外枠を消去したため、左右の不要なパディングを0に最適化 */
  background: transparent !important; /* 背景の白を透過させ、コンテナのフチ線をなくす */
  border: none !important; /* ★一番外側のグレーの縁線を完全に消去 */
  border-radius: 0px !important; /* 角丸をリセット */
  box-shadow: none !important; 
  box-sizing: border-box !important;
  text-align: center !important; 
  opacity: 0;
  transform: translateY(10px);
  animation: loginFadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes loginFadeIn { to { opacity: 1; transform: translateY(0); } }

/* マイアカウントの各セクション（メールアドレス・ログイン方法・お客様情報等）的外枠・背景も完全に消去 */
.p-page__section,
.c-form__table {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* --------------------------------------------------------------------------
   2. 【背景グレー同期】ショップに戻るボタン・案内アラートエリア（HTML完全同期版）
   -------------------------------------------------------------------------- */
/* 案内アラートエリア（文章とマニュアルボタンが入る枠）のベース */
.c-alert {
  display: flex !important;
  flex-direction: column !important; /* 文章を上に、ボタンを下に分ける */
  align-items: center !important;
  justify-content: center !important;
  float: none !important;
  clear: both !important;
  margin: 0 auto 35px auto !important; 
  padding: 25px !important; 
  width: 100% !important;
  box-sizing: border-box !important;
  background-color: #f5f5f5 !important; /* ライトグレー背景 */
  border: 1px solid #aaaaaa !important; /* マイルドグレーの1px枠線 */
  border-radius: 6px !important;
  
  color: #1a202c !important; 
  font-weight: 500 !important; 
  font-size: 14px !important;
  letter-spacing: 0.03em !important;
  line-height: 1.8 !important;
}

/* 案内枠の中のテキスト（文章） */
.c-alert div,
.c-alert p {
  display: inline !important; 
  margin: 0 !important; 
  padding: 0 !important;
  background: transparent !important;
  text-align: center !important; 
  color: #1a202c !important; 
  font-weight: 500 !important; 
  font-size: 14px !important;
  letter-spacing: 0.03em !important;
  order: 1 !important; 
  line-height: 1.8 !important;
}

.c-alert br {
  display: none !important;
}

/* マニュアルリンクを、文章の「一番下」に強制移動 */
.c-alert a,
.c-alert div:has(a) {
  order: 2 !important; 
  width: 100% !important;
  margin-bottom: 0 !important;
}

/* マニュアルボタン自体の形状を1000pxワイドに完全同期 */
.c-alert a,
.c-alert div a,
a[href*="help.shop-pro.jp"] {
  display: flex !important; 
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important; 
  max-width: 1000px !important; 
  height: 54px !important;      
  padding: 0 24px !important;
  font-size: 15px !important; 
  font-weight: bold !important; 
  letter-spacing: 0.05em !important;
  color: #ffffff !important;    
  background-color: #1a202c !important; 
  border: 2px solid #1a202c !important; 
  border-radius: 6px !important;
  box-sizing: border-box !important;
  margin: 20px auto 0 auto !important; 
  text-decoration: none !important; 
  transition: all 0.15s ease-in-out !important;
}

/* ★【ショップに戻るボタン完全同期】
   お送りいただいたHTML専用クラス（.c-button__group--sub）を狙い撃ちし、形状とカラーを他の全主要ボタン（1000px×54pxの黒）と完璧に揃える */
.c-button__group--sub {
  display: block !important;
  width: 100% !important;
  max-width: 1000px !important;
  margin: 0 auto 20px auto !important; /* 中央寄せ */
  box-sizing: border-box !important;
}

/* ★パソコン側修正：ボタン本体が親枠の縮んだ横幅（12pxマイナス）に100%完全同期するように最適化 */
.c-button__group--sub a.c-button.c-button-sm,
.c-button__group--sub a.c-button {
  display: flex !important; 
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;        /* 親枠の幅に合わせる命令に変更 */
  max-width: 100% !important;    /* 1000px固定を解除し、親枠の12pxマイナス幅に完全連動させます */
  height: 54px !important;      
  padding: 0 24px !important;
  font-size: 15px !important; 
  font-weight: bold !important; 
  letter-spacing: 0.05em !important;
  color: #ffffff !important;    
  background-color: #1a202c !important; 
  border: 2px solid #1a202c !important; 
  border-radius: 6px !important;
  box-shadow: none !important; 
  cursor: pointer !important; 
  box-sizing: border-box !important;
  margin: 0 auto !important; 
  text-decoration: none !important; 
  transition: all 0.15s ease-in-out !important;
}

/* ホバー時：パキッと白黒反転（共通設定） */
.c-alert a:hover,
.c-alert div a:hover, 
a[href*="help.shop-pro.jp"]:hover,
.c-button__group--sub a.c-button:hover { 
  background-color: #ffffff !important; 
  color: #1a202c !important; 
  border-color: #1a202c !important;
}

/* --------------------------------------------------------------------------
   3. 入力エリア・ラベル（テーブル構造を解除して完全な縦並び・2段表示化）
   -------------------------------------------------------------------------- */
/* テーブル全体の横並びを解除 */
.c-form__table,
.c-form__table tbody,
.c-form__table tr,
.c-form__table th,
.c-form__table td {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  text-align: left !important; /* 基本はすべて左寄せに統一 */
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
}

/* タイトルラベル（「メールアドレス」「パスワード」の文字部分を中央寄せに） */
.c-form__title {
  margin-top: 20px !important; /* 項目ごとの上の余白 */
  margin-bottom: 8px !important; /* 入力欄との隙間 */
  text-align: center !important; /* ブロック全体を中央寄せに */
}

.c-form__title label {
  display: block !important;
  font-size: 15px !important;
  font-weight: bold !important;
  color: #4a5568 !important;
  text-align: center !important; /* 文字を完全に中央寄せ */
}

/* テキスト入力欄本体（枠色を #cccccc に最適化） */
.c-input--text,
input[type="email"],
input[type="password"] {
  display: block !important; 
  width: 100% !important; 
  padding: 14px 16px !important; 
  font-size: 16px !important; /* スマホのズーム防止 */
  line-height: 1.5 !important;
  border: 2px solid #cccccc !important; /* ご指定の #cccccc へ変更 */
  border-radius: 6px !important; 
  background-color: #ffffff !important; 
  text-align: left !important;
  transition: border-color 0.2s ease !important;
  margin-bottom: 10px !important; /* パスワード忘れた方リンク等との隙間 */
}

/* 入力欄にカーソルが当たった時（フォーカス時）はパキッと黒にする */
.c-input--text:focus,
input[type="email"]:focus,
input[type="password"]:focus { 
  outline: none !important; 
  border-color: #1a202c !important; 
}

/* 「パスワードを忘れた方はこちら」のテキスト位置微調整（中央寄せ） */
.c-form__note {
  display: block !important;
  text-align: center !important; 
  margin: 8px 0 30px 0 !important; 
  font-size: 14px !important;
  width: 100% !important;
}

.c-form__note a {
  color: #718096 !important; 
  text-decoration: underline !important;
}

/* --------------------------------------------------------------------------
   4. 【サイズ1000px完全同期】すべての黒色主要ボタンの縦横幅を一括で統一
   -------------------------------------------------------------------------- */
/* 通常のログイン・各種送信ボタン・新規登録枠内のボタン・マイアカウント内の全変更ボタンを強制同期 */
.c-button:not(.c-button--line):not(.c-button-sm), 
.c-button--primary, 
.c-button--danger, 
form[action*="login"] button:not([class*="line"]),
input[type="submit"],
.c-alert a,
.c-alert div a, 
a.c-button[href="/"], 
a.c-button[href*="shop-pro.jp"]:not(.c-button-sm),
.p-page__section form[action*="email_verification_requests"] input[type="submit"].c-button,
.c-form__content form input[type="submit"].c-button {
  display: flex !important; 
  align-items: center !important; 
  justify-content: center !important; /* 文字をど真ん中に固定 */
  box-sizing: border-box !important;
  
  /* ★横幅をログインコンテナと同じ「最大1000pxのダイナミックワイド」に完全同期 */
  width: 100% !important; 
  max-width: 1000px !important; 
  margin: 20px auto !important; /* 中央寄せ */
  
  /* 縦幅の完全統一（高さ54px固定） */
  height: 54px !important; 
  padding: 0 24px !important; 
  
  font-size: 15px !important; 
  font-weight: bold !important; 
  letter-spacing: 0.05em !important;
  color: #ffffff !important; 
  background-color: #1a202c !important; /* ソリッドな黒 */
  border: 2px solid #1a202c !important; 
  border-radius: 6px !important;
  box-shadow: none !important; 
  cursor: pointer !important; 
  text-decoration: none !important;
  transition: all 0.15s ease-in-out !important;
}

/* ホバー時の挙動も一括統一 */
.c-button:not(.c-button--line):not(.c-button-sm):hover, 
.c-button--primary:hover, 
input[type="submit"]:hover,
.c-alert a:hover,
.c-alert div a:hover, 
a.c-button[href="/"]:hover,
.p-page__section form[action*="email_verification_requests"] input[type="submit"].c-button:hover,
.c-form__content form input[type="submit"].c-button:hover {
  background-color: #ffffff !important; 
  color: #1a202c !important; 
  border-color: #1a202c !important;
}

/* クリック時の縮小エフェクト */
.c-button:not(.c-button--line):not(.c-button-sm):active,
.c-button--primary:active,
input[type="submit"]:active { 
  transform: scale(0.98) !important; 
}

/* --------------------------------------------------------------------------
   5. LINEログインボタン専用の上書き指定（カラーをLINEグリーン化・幅ズレ解消）
   -------------------------------------------------------------------------- */
/* LINEボタンが入っているform要素の幅を100%に同期 */
form.button_to {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
}

/* 5. LINEログインボタン専用の上書き指定（最大幅1000px同期） */
.c-button.c-button--line,
[class*="line-login"] {
  display: flex !important;
  align-items: center !important; 
  justify-content: center !important;
  width: 100% !important;
  max-width: 1000px !important; /* ★1000px幅に完全同期 */
  height: 54px !important;     
  padding: 0 24px !important;
  font-size: 15px !important; 
  font-weight: bold !important; 
  letter-spacing: 0.05em !important;
  box-sizing: border-box !important;
  background-color: #06c755 !important; 
  border: 2px solid #06c755 !important;
  color: #ffffff !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  cursor: pointer !important;
  margin: 16px auto !important;
  transition: all 0.15s ease-in-out !important;
}

/* LINEボタンホバー時：パキッと白緑にカラー反転 */
.c-button.c-button--line:hover,
[class*="line-login"]:hover {
  background-color: #ffffff !important;
  color: #06c755 !important; 
  border-color: #06c755 !important;
}
.c-button.c-button--line:active,
[class*="line-login"]:active {
  transform: scale(0.98) !important;
}

/* --------------------------------------------------------------------------
   6. パスワード紛失・新規登録等のテキストリンク調整
   -------------------------------------------------------------------------- */
.p-login__forget, 
.p-login__register { 
  text-align: center !important; 
  margin: 20px auto !important; 
  font-size: 14px !important; 
  width: 100% !important; 
  color: #718096 !important;
}
.p-login__forget a, 
.p-login__register a { 
  color: #1a202c !important; 
  text-decoration: underline !important; 
}

/* ==========================================================================
   8. マイアカウント：ページ全体の要素を完全中央寄せ（センター配置・1000pxワイド版）
   ========================================================================== */

/* --------------------------------------------------------------------------
   A. 注文履歴テーブル（表組み）の中央寄せと最適化（標準デザインへリセット）
   -------------------------------------------------------------------------- */
.c-table-wrap--overflow {
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
  margin: 0 auto 30px auto !important;
}

.c-table {
  width: 100% !important;
  max-width: 1000px !important;
  margin: 0 auto !important;
  text-align: center !important; 
}

.c-table__title,
.c-table__content,
.c-table__text {
  text-align: center !important;
  justify-content: center !important;
}

.c-result-count {
  text-align: center !important;
  margin-bottom: 15px !important;
  color: #4a5568 !important;
  font-size: 14px !important;
}

/* 注文履歴：受注番号の案内アラートテキストの背景と枠線を完全消去 */
#sales_lst .c-alert,
#orders_list .c-alert {
  display: block !important;
  background-color: transparent !important; /* ★背景色を完全に消去して透明に */
  border: none !important;                   /* ★外枠のグレーの線を完全に消去 */
  box-shadow: none !important;
  border-radius: 0px !important;
  margin: 15px auto 25px auto !important;   /* 上下の余白を綺麗に微調整 */
  padding: 0 !important;                     /* 背景を消したため不要な内側余白をカット */
  width: 100% !important;
  text-align: center !important;             /* パキッと中央寄せ */
  
  /* 文字の装飾：他の補足テキストとお揃いのパキッとした黒 */
  color: #1a202c !important; 
  font-weight: 500 !important;               /* 太さ500（ミディアム） */
  font-size: 14px !important;
  letter-spacing: 0.03em !important;
}

/* 案内枠の中のテキストタグ（divやp）も透明化を完全同期 */
#sales_lst .c-alert div,
#sales_lst .c-alert p {
  display: inline !important;
  background: transparent !important;
  color: #1a202c !important;
  text-align: center !important;
}

/* 区切り線（hr）：極細・極薄・広めの余白で高級感を演出 */
.c-line {
  display: block !important;
  border: none !important;
  border-top: 1px solid #e2e8f0 !important; /* 目立ちすぎない繊細なニュアンスグレー */
  height: 0 !important;
  max-width: 1000px !important;
  margin: 60px auto !important; /* 上下の余白を広げてゆったりと洗練された印象に */
  opacity: 0.7 !important;
}

/* --------------------------------------------------------------------------
   B. 各セクションのタイトル（大表題）の上下1.5px黒の横線デザイン ＆ 中央寄せ
   -------------------------------------------------------------------------- */
/* 「お客様の注文履歴」「マイアカウント」「退会する（退会手続き）」の大表題見出し */
#sales_lst .p-page__title,
.p-page__body-inner > .p-page__title,
.p-page__body-inner > section .p-page__title,
.p-page__title {
  display: block !important;
  width: 100% !important;
  max-width: 1000px !important;       /* 1000pxワイド枠いっぱいに広げる */
  margin: 50px auto 30px auto !important; /* 上下にゆったりとした余白を確保 */
  padding: 16px 0 !important;          /* 上下の黒線と文字の間のスタイリッシュな隙間 */
  box-sizing: border-box !important;
  background: transparent !important;  /* ボタンに見えないよう背景は完全に無し */
  border: none !important;
  border-radius: 0px !important;       /* 角丸を完全リセット */
  
  /* ★ご指示の上下1.5px（実質2pxのパキッとした太さ）の黒の横線のみを配置 */
  border-top: 2px solid #1a202c !important;   
  border-bottom: 2px solid #1a202c !important; 
  
  /* 文字の装飾：太さ600・大きく */
  font-size: 18px !important;         /* 表題として堂々と目立つサイズ */
  font-weight: 600 !important;        /* 太さ600（セミボルド） */
  color: #1a202c !important;          /* パキッとした黒文字 */
  letter-spacing: 0.08em !important;   /* 文字の間隔を少し広げてハイブランド感を演出 */
  text-align: center !important;      /* 文字を中央寄せ */
}

/* メールアドレスやログイン方法などの「中見出し（セクション内の子タイトル）」 */
.p-page__section-title {
  text-align: center !important;
  width: 100% !important;
  font-size: 15px !important;
  font-weight: bold !important;
  color: #1a202c !important;
  margin-top: 25px !important;
  margin-bottom: 15px !important;
}

/* 「メールアドレスとパスワード」「LINE」などのテーブルタイトル */
.c-form__table .c-form__title,
.c-form__table th.c-form__title {
  display: block !important;
  text-align: center !important; 
  width: 100% !important;
  font-size: 16px !important;    
  font-weight: 600 !important;   
  color: #1a202c !important;     
  margin-top: 15px !important;
  margin-bottom: 10px !important;
  padding: 0 !important;
  border: none !important;
}

/* 設定済 などのテキスト表示を中央寄せ */
.c-form__content,
.c-form__content div {
  text-align: center !important;
  justify-content: center !important;
  width: 100% !important;
}

/* --------------------------------------------------------------------------
   C. メールアドレス変更フォーム＆パスワード再設定ボタンの縦並び中央寄せ
   -------------------------------------------------------------------------- */
.p-page__section form[action*="email_verification_requests"] div,
.p-page__section form[action*="email_verification_requests"] .c-form__content,
.c-form__content form {
  display: flex !important;
  flex-direction: column !important; 
  align-items: center !important;    
  justify-content: center !important;
  width: 100% !important;
  max-width: 100% !important;
  gap: 12px !important;
  box-sizing: border-box !important; /* 横幅の計算に余白を含めてはみ出しをストップ */
}

/* --------------------------------------------------------------------------
   I. メールアドレス表示エリア：文字サイズ16.5px ＆ ブルー（#0044cc）化
   -------------------------------------------------------------------------- */
/* メールアドレスと変更ボタンが入っているflexの枠（隣のボタンの大きさを巻き込まないよう制御） */
form[action*="email_verification_requests"] div {
  font-size: 16.5px !important;    /* ★ご指定の16.5pxサイズ */
  color: #0044cc !important;       /* ★綺麗なブルー（#0044cc） */
  font-weight: 500 !important;
  letter-spacing: 0.03em !important;
}

/* 「変更」ボタン自体の文字サイズや色は他のボタン基準を維持するように強制保護 */
form[action*="email_verification_requests"] input[type="submit"].c-button {
  font-size: 15px !important;
  color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   D. お客様情報：顧客ID（番号）エリア（標準仕様へ安全リセット）
   -------------------------------------------------------------------------- */
.p-page__section .c-form__table tr {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

/* ★「顧客ID」の見出しの真下にある「番号（td）」だけを100%確実にピンポイントで狙い撃ち */
.c-form__table tr th.c-form__title:has-text("顧客ID") + td.c-form__content,
.c-form__table tr:has(th:has-text("顧客ID")) td.c-form__content {
  display: block !important;
  text-align: center !important;  
  justify-content: center !important;
  width: 100% !important;
  font-size: 18px !important;     /* 番号をパッと見やすく大きく */
  font-weight: bold !important;   /* 高級感のある太字 */
  color: #1a202c !important;     /* ★システム直書きの文字色を打ち破り、完全に黒（#1a202c）に固定 */
  margin: 10px auto 20px auto !important; /* 上下に程よい余白を確保 */
  letter-spacing: 0.05em !important; /* 数字が見やすいよう文字間を広げる */
}

/* --------------------------------------------------------------------------
   E. お客様情報：入力欄の配置中央寄せ ＆ 中身の文字は左寄せ（純正▼位置調整特化）
   -------------------------------------------------------------------------- */
.p-page__section .c-form__content,
.p-page__section .c-select-wrap,
.p-page__section .c-input-wrap {
  display: block !important;
  width: 100% !important;
  max-width: 1000px !important;    
  margin: 0 auto 15px auto !important; 
  padding: 0 !important;
  box-sizing: border-box !important;
}

.p-page__section .c-input--text:not(select),
.p-page__section input[type="text"],
.p-page__section input[type="tel"],
.p-page__section input[type="email"] {
  display: block !important;     
  width: 100% !important;
  max-width: 100% !important;    
  margin: 0 auto 15px auto !important; 
  padding: 14px 16px !important;
  font-size: 16px !important;     
  line-height: 1.5 !important;
  border: 2px solid #cccccc !important; 
  border-radius: 6px !important;
  background-color: #ffffff !important;
  box-sizing: border-box !important;
  text-align: left !important;   
  transition: border-color 0.2s ease !important;
}

.p-page__section select {
  display: block !important;     
  width: 100% !important;
  max-width: 100% !important;    
  margin: 0 auto 15px auto !important; 
  padding: 14px 40px 14px 16px !important; 
  line-height: 1.5 !important;
  border: 2px solid #cccccc !important; 
  border-radius: 6px !important;
  background-color: #ffffff !important;
  box-sizing: border-box !important;
  text-align: left !important;   
  cursor: pointer !important;
  -webkit-appearance: select !important;
  -moz-appearance: menulist !important;
  appearance: select !important;
  transition: border-color 0.2s ease !important;
}

.p-page__section .c-form__content::after,
.p-page__section .c-form__content::before,
.p-page__section .c-select-wrap::after,
.p-page__section .c-select-wrap::before,
.p-page__section select::after,
.p-page__section select::before {
  content: none !important;
  display: none !important;
  background: none !important;
  background-image: none !important;
}

.p-page__section .c-input--text:focus,
.p-page__section input:focus,
.p-page__section select:focus {
  outline: none !important;
  border-color: #1a202c !important;
}

/* --------------------------------------------------------------------------
   F. 「設定済」「連携済」ステータスエリアの文字サイズ16px・太さ500・カラー完全分離
   -------------------------------------------------------------------------- */
/* 「設定済」や「連携済」というテキスト表示そのものの形（ボタンやフォームに干渉しないように制御） */
.c-form__table tr td.c-form__content,
.c-form__table tr td.c-form__content > div,
.p-page__section td.c-form__content {
  display: block !important;       /* ★横並び（inlineやflex）を完全に破壊して、縦並び（2段表示）へ強制変換 */
  width: 100% !important;
  text-align: center !important;
  font-size: 16px !important;     /* ご指定の16px（165px） */
  font-weight: 500 !important;    /* 太さ500（ミディアム） */
  letter-spacing: 0.03em !important;
  box-sizing: border-box !important;
}

/* 1行目（メールアドレスとパスワードの列）のテキストだけを狙い撃ちしてブルーに固定 */
.c-form__table tr:nth-child(1) td.c-form__content,
.c-form__table tr:nth-child(1) td.c-form__content span,
.c-form__table tr:nth-child(1) td.c-form__content div:not(.c-button__group) {
  color: #0044cc !important; /* ★「設定済」は綺麗なブルー */
}

/* 2行目（LINEログインの列）のテキストだけを狙い撃ちしてLINEグリーンに固定 */
.c-form__table tr:nth-child(2) td.c-form__content,
.c-form__table tr:nth-child(2) td.c-form__content span,
.c-form__table tr:nth-child(2) td.c-form__content div {
  color: #06c755 !important; /* ★「連携済」はLINEグリーン */
}

/* 反対の言葉（未設定・未連携など）が表示された場合のカラー指定（グレー） */
.c-form__content [class*="un"],
.c-form__content [class*="not"],
.c-form__content [class*="disabled"] {
  color: #718096 !important; 
}

/* --------------------------------------------------------------------------
   G. 【ボタン大復活】「パスワード再設定」ボタンを縮ませず、縦並び1000pxワイドへ強制上書き
   -------------------------------------------------------------------------- */
/* テキストの横に縮んで隠れていたform要素とボタンの枠を、親枠いっぱいに広げて縦並び化 */
.c-form__table td.c-form__content form,
.c-form__table td.c-form__content span {
  display: block !important;
  width: 100% !important;
  max-width: 1000px !important;
  margin: 12px auto 0 auto !important; /* 「設定済」のテキストの下に綺麗に落とす */
  text-align: center !important;
}

/* 「パスワード再設定」ボタン本体を、他の主要ボタン（縦54px・横1000px・ソリッドな黒）と完璧に同期 */
.c-form__table td.c-form__content input[type="submit"].c-button,
.c-form__table td.c-form__content .c-button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 1000px !important; /* ★縮んだ横幅を最大1000pxワイドへ大復活 */
  height: 54px !important;      /* 高さ54px固定に同期 */
  padding: 0 24px !important;
  font-size: 15px !important;
  font-weight: bold !important;
  letter-spacing: 0.05em !important;
  color: #ffffff !important;    /* ボタンの文字は絶対に白 */
  background-color: #1a202c !important; /* ソリッドな黒 */
  border: 2px solid #1a202c !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  margin: 10px auto 0 auto !important;
  transition: all 0.15s ease-in-out !important;
}

/* ホバー時：パキッと白黒反転 */
.c-form__table td.c-form__content input[type="submit"].c-button:hover {
  background-color: #ffffff !important;
  color: #1a202c !important;
  border-color: #1a202c !important;
}

/* ==========================================================================
   H. 退会するセクション：退会ボタン1000px化 ＆ テキスト下部中央寄せ（アラート枠同期版）
   ========================================================================== */
/* 1. ★【枠全体のデザイン同期】上側の内側余白（パディング）のみを15pxさらに広げる */
.myaccount-withdrawal__content {
  display: flex !important;
  flex-direction: column !important; /* 横並びを破壊して縦一列に並べる */
  align-items: center !important;    /* 左右中央寄せ */
  justify-content: center !important;
  width: 100% !important;
  max-width: 1000px !important;       /* 他の主要エリアと同じ1000pxワイドに完全同期 */
  margin: 40px auto !important;
  box-sizing: border-box !important;
  
  /* 案内アラートエリアと同期したライトグレー背景 ＆ 1px枠線 */
  background-color: #f5f5f5 !important; 
  border: 1px solid #aaaaaa !important; 
  border-radius: 6px !important;         
  
  /* ★元々の 30px から上側だけ「15px」プラスして【45px】へ拡張（左右と下は美しさをキープ） */
  padding: 45px 25px 35px 25px !important; 
}

/* 2. ボタンを包んでいるform要素自体の幅も1000pxに拡張 */
.myaccount-withdrawal__content .button_to {
  display: block !important;
  width: 100% !important;
  max-width: 1000px !important;
  margin: 0 auto !important;
  order: 1 !important; /* ボタンを必ず1番（上）に配置 */
}

/* 3. 【退会ボタン本体】他の主要ボタン（縦54px・横1000px・ソリッドな黒）と完璧に同期 */
#withdrawal-button,
.myaccount-withdrawal__content .c-button--danger {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 1000px !important; /* 1000px大画面ワイドへ強制拡張 */
  height: 54px !important;      /* 高さを54pxに完全同期 */
  padding: 0 24px !important;
  font-size: 15px !important;
  font-weight: bold !important;
  letter-spacing: 0.05em !important;
  color: #ffffff !important;    
  background-color: #1a202c !important; /* ソリッドな黒 */
  border: 2px solid #1a202c !important;
  border-radius: 6px !important;   
  cursor: pointer !important;
  box-sizing: border-box !important;
  margin: 0 auto 15px auto !important; /* 下のテキストとの間にだけ余白を空ける */
  transition: all 0.15s ease-in-out !important;
}

/* 退会ボタンのホバー時：パキッと白黒反転 */
#withdrawal-button:hover {
  background-color: #ffffff !important;
  color: #1a202c !important;
  border-color: #1a202c !important;
}

/* 4. ★【警告テキスト】ボタンとの距離を5pxに近づけ、パキッとした赤文字（#bf0000）へ指定 */
.myaccount-withdrawal__content .c-text--danger {
  display: block !important;
  width: 100% !important;
  text-align: center !important; /* ボタンの真下に中央配置 */
  
  /* ★上のボタンからの距離をご指定通りの「5px」へきゅっと近づけます */
  margin: 0 auto 0 auto !important; 
  
  /* ★文字の装飾：フッターとお揃いのパキッとした赤色（#bf0000）へ指定 */
  color: #bf0000 !important;
  
  font-size: 14px !important;    
  font-weight: 500 !important;   /* 太さ500（ミディアム） */
  letter-spacing: 0.03em !important;
  line-height: 1.8 !important;
  order: 2 !important; /* テキストを必ずボタンの2番（下）にする */
}

/* ==========================================================================
   J. 各入力欄・ボタン下の補足テキスト（例）〜）の距離を一括統一
   ========================================================================== */
/* テキスト入力欄、プルダウン、ボタンの直後に来るグレーの補足テキストを狙い撃ち */
.p-page__section .c-input--text + .c-form__note,
.p-page__section input + .c-form__note,
.p-page__section select + .c-form__note,
.p-page__section .c-button + .c-form__note,
.p-page__section [class*="content"] .c-form__note,
.p-page__section [class*="help"],
.c-form__note:has-text("例"),
span:has-text("例"),
div:has-text("例") {
  display: block !important;
  width: 100% !important;
  text-align: center !important; /* パキッと中央寄せ */
  
  /* ★上のパーツ（入力欄やボタン）からの距離を「10px」に完全統一 */
  margin-top: 10px !important; 
  
  /* 下の項目との間の余白（ここは次のタイトルと被らないよう25px確保） */
  margin-bottom: 25px !important; 
  margin-left: auto !important;
  margin-right: auto !important;
  
  /* 文字の装飾：主張しすぎない綺麗な小さめグレー */
  font-size: 13px !important;
  font-weight: 500 !important; /* 太さ500（ミディアム） */
  color: #718096 !important;   /* 上品なグレー */
  letter-spacing: 0.03em !important;
}

/* --------------------------------------------------------------------------
   K. 郵便番号エリア：「例）1000000」の距離をシンプルに10pxに上書き
   -------------------------------------------------------------------------- */
p.c-form__example,
.c-form__example {
  display: block !important;
  width: 100% !important;
  text-align: center !important; /* パキッと中央寄せ */
  
  /* ★他の「例」と1ミリの狂いもなく同じ、上からの距離「10px」を指定 */
  margin-top: 13px !important; 
  margin-bottom: 25px !important;
  
  /* 文字の装飾：他とお揃いの上品なグレー */
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #718096 !important;
  letter-spacing: 0.03em !important;
}

/* ==========================================================================
   L. 注文履歴：ページネーションボタン（前のページ・次のページ）の横並び化（1000px黒）
   ========================================================================== */
/* 1. ボタンを包んでいる親枠を全体の最大幅「1000px」に広げ、横並びに固定 */
#sales_lst .c-button__group {
  display: flex !important;
  flex-direction: row !important;     /* 強制横並び */
  align-items: center !important;
  justify-content: space-between !important; /* 左右いっぱいにバランスよく広げる */
  gap: 20px !important;               /* ボタンとボタンの間の隙間 */
  width: 100% !important;
  max-width: 1000px !important;       /* ★全体の1000pxワイドに完全同期 */
  margin: 40px auto !important;
  box-sizing: border-box !important;
}

/* 2. ★【1000px横並び・パキッと黒】2つ合わせて1000px幅になる等幅サイズの黒ボタンへ制御 */
#sales_lst .c-button__group .c-button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  
  /* ★2つのボタンが横並びで合算1000px（隙間を除いて各490px）になるように強制拡張 */
  width: 100% !important;
  max-width: 490px !important; 
  height: 54px !important;            /* ★他の主要ボタンと完全に同じ高さ54pxに同期 */
  padding: 0 24px !important;
  margin: 0 !important;               
  
  /* ★他のボタンと100%同じ、パキッとしたソリッドな黒のデザイン */
  font-size: 15px !important;
  font-weight: bold !important;
  letter-spacing: 0.05em !important;
  color: #ffffff !important;          /* 文字は白 */
  background-color: #1a202c !important; /* ソリッドな黒 */
  border: 2px solid #1a202c !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: all 0.15s ease-in-out !important;
}

/* 通常のホバー時：パキッと白黒反転 */
#sales_lst .c-button__group .c-button:not(.disabled):hover {
  background-color: #ffffff !important;
  color: #1a202c !important;
  border-color: #1a202c !important;
}

/* 3. ボタンが押せない状態（disabled）のときの設定
   ※色と形状は「パキッとした黒」を100%維持したまま、押せない状態であることをブラウザに伝えます */
#sales_lst .c-button__group .c-button.disabled {
  background-color: #1a202c !important; /* ★押せなくても黒色を完全キープ */
  border-color: #1a202c !important;
  color: #ffffff !important;
  cursor: not-allowed !important;       /* カーソルを禁止マークに */
  opacity: 0.65 !important;              /* ★他の黒ボタンと区別するため、少しだけシースルー（透過）にして上品に表現 */
}

/* ==========================================================================
   M. ページ全体：すべてのグレーテキスト色（#718096）を一括で【#777777】へ上書き
   ========================================================================== */
/* 「例）」の補足テキスト、郵便番号下の例、注文履歴の案内テキストなどのグレー文字をすべて網羅 */
.c-form__note,
.c-form__help,
p.c-form__example,
.c-form__example,
.c-result-count,
.p-login__forget, 
.p-login__register,
.p-page__body-inner :is(span, div, p)[class*="note"],
.p-page__body-inner :is(span, div, p)[class*="example"],
.p-page__body-inner :is(span, div, p)[class*="help"] {
  color: #777777 !important; /* ★すべてのグレー指定をご指定の #777777 に完全固定 */
}

/* ==========================================================================
   「設定済」「連携済」ステータスエリアの文字サイズ16px・太さ500・カラー完全分離
   ========================================================================== */
/* ログイン方法枠内のステータス表示テキスト全体の共通設定 */
.c-form__content,
.c-form__content div,
.c-form__content span,
.p-page__section .c-form__content div,
.p-page__section .c-form__content span {
  font-size: 16px !important;     /* ★ご指定通り16px（165pxのタイポと解釈）に大きく調整 */
  font-weight: 500 !important;    /* 太さ500（ミディアム）に指定 */
  letter-spacing: 0.03em !important;
}

/* 1. 「設定済」のカラー指定（ブルー）
   ※直後のテキストや子要素を狙い撃ちして黒文字に負けないように強制上書き */
.c-form__table tr:nth-child(1) .c-form__content,
.c-form__table tr:nth-child(1) .c-form__content span,
.c-form__table tr:nth-child(1) .c-form__content div {
  color: #0044cc !important; 
}

/* 2. 「連携済」（LINEログイン側）のカラー指定（LINE公式ブランドグリーン）
   ※LINEボタンと同じ列（2行目以降）のステータスエリアを狙い撃ち */
.c-form__table tr:nth-child(2) .c-form__content,
.c-form__table tr:nth-child(2) .c-form__content span,
.c-form__table tr:nth-child(2) .c-form__content div,
[class*="line"] ~ .c-form__content,
[class*="line"] ~ .c-form__content span {
  color: #06c755 !important;
}

/* 3. 反対の言葉（未設定・未連携・解除など）が表示された場合のカラー指定（グレー）
   ※HTML内に "un" や "not"、"disabled" などの目印がある場合に自動上書き */
.c-form__content [class*="un"],
.c-form__content [class*="not"],
.c-form__content [class*="disabled"],
.c-form__content span:empty + span {
  color: #718096 !important; 
}

/* ★マイアカウントページ専用：
   案内枠内の「マニュアル」リンクをご指定の美しい白背景50pxボタンへ完全同期します */
.p-page__section .c-alert a[href*="help.shop-pro.jp"] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 50px !important;
  background-color: #ffffff !important; /* ★パキッとした美しい白背景 */
  border: 1px solid #cccccc !important; /* ★綺麗なグレーの細枠 */
  border-radius: 6px !important;
  color: #1a202c !important;
  text-decoration: none !important;
  font-weight: normal !important;
  font-size: 14px !important;
  box-sizing: border-box !important;
  transition: all 0.2s ease !important;
  margin: 15px auto 0 auto !important; /* 上の文章との間に綺麗な隙間を空けます */
}

/* ボタンホバー時のアニメーションも同期 */
.p-page__section .c-alert a[href*="help.shop-pro.jp"]:hover {
  border-color: #1a202c !important;
  background-color: #fafafa !important;
}
/* ★マイアカウントページ専用：
   案内枠内の「プライバシーポリシー」リンクをご指定の美しい白背景50pxボタンへ完全同期します */
.p-page__section .c-alert a[href*="mode=privacy"] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 50px !important;
  background-color: #ffffff !important; /* パキッとした美しい白背景 */
  border: 1px solid #cccccc !important; /* 綺麗なグレーの細枠 */
  border-radius: 6px !important;
  color: #1a202c !important;
  text-decoration: none !important;
  font-weight: normal !important;
  font-size: 14px !important;
  box-sizing: border-box !important;
  transition: all 0.2s ease !important;
  margin: 15px auto 0 auto !important; /* 上の文章との間に綺麗な隙間を空けます */
}

/* ボタンホバー時のアニメーションも同期 */
.p-page__section .c-alert a[href*="mode=privacy"]:hover {
  border-color: #1a202c !important;
  background-color: #fafafa !important;
}

form[action*="profile"] .c-form__title-must,
form[action*="profile"] .c-form__title span.c-form__title-must,
#my_account .c-form__title-must {
  display: inline-block !important;
  background-color: #bd0000 !important;   /* ★あの時と同じ完璧な赤背景 */
  background: #bd0000 !important;
  color: #ffffff !important;               /* ★パキッとした白文字 */
  font-size: 11px !important;
  padding: 3px 8px !important;             /* ★綺麗な内側余白 */
  border-radius: 4px !important;           /* ★美しい角丸 */
  margin-left: 6px !important;             /* タイトル文字との間に心地よい隙間を確保 */
  font-weight: bold !important;
  vertical-align: middle !important;
  line-height: 1.2 !important;
}

/* ★マイアカウントページ専用（タイトル＆必須バッジ・セットで完全中央寄せ）：
   「お名前」などの文字と「必須バッジ」を完全にひとまとめのセットにし、
   1ミリの狂いもなく画面のど真ん中（中央寄せ）へ綺麗に配置します。
   バッジが下に落ちることなく、タイトル文字のすぐ真横にピタッとくっつきます */

form[action*="profile"] .c-form__title,
#my_account .c-form__title {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important; /* ★文字とバッジをセットのまま画面のど真ん中へ寄せます */
  width: 100% !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

/* タイトル文字（label）の無駄な突っ張りを消して、文字の長さ幅にフィットさせます */
form[action*="profile"] .c-form__title label,
#my_account .c-form__title label {
  display: inline-block !important; /* 横並びを許可 */
  width: auto !important;            /* 幅100%を解除し、文字の長さだけに縮めます */
  max-width: 100% !important;
  text-align: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 必須バッジも文字のすぐ真横へピタッと美しく同期させます */
form[action*="profile"] .c-form__title-must,
form[action*="profile"] .c-form__title span.c-form__title-must,
#my_account .c-form__title-must {
  display: inline-block !important;
  position: static !important;        /* 浮かせる命令を完全に消滅させます */
  width: auto !important;
  margin: 0 0 0 8px !important;       /* ★タイトル文字のすぐ右隣に8pxの美しい隙間を空けます */
  vertical-align: middle !important;
}


/* ==========================================================================
   スマートフォン環境（横幅767px以下）専用
   ========================================================================== */
@media screen and (max-width: 767px) {
  
  /* ★共通の大外修正：大枠の左右に「15px」の外側余白（マージン）をピンポイントで追加。
     画面幅からはみ出さない流動設定（width: auto）を維持したまま、左右15pxのスライドを完全に相殺します */
  .title_area.p-shop__header,
  .p-page__body-inner,
  form[action*="login"],
  form[action*="account"] {
    display: block !important;
    width: auto !important;                   /* 画面幅を突き抜けない流動設定 */
    max-width: 100% !important;
    margin-left: 15px !important;             /* ★左サイドに15pxの固定隙間 */
    margin-right: 15px !important;            /* ★右サイドに15pxの固定隙間 */
    box-sizing: border-box !important;
  }
  form[action*="/customer/login"] {
    position: relative !important;
    left: -15px !important;
    width: calc(100% + 15px) !important;      /* ★この長さ（幅）のプラス指定を1行だけピンポイント追加 */
  }
  
  form[action*="email_verification_requests"] {
    position: relative !important;
    left: -30px !important;                   /* ★【-15px】から【-30px】へピンポイント修正 */
    width: calc(100% + 30px) !important;      
    max-width: calc(100% + 30px) !important;
  }
  form[action*="email_verification_requests"] div[style*="display:flex"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    box-sizing: border-box !important;
  }
  form[action*="account"] .c-alert,
  .p-page__section .c-alert {
    position: relative !important;
    left: -15px !important;                   /* ★【-30px】から【-15px】へピンポイント修正 */
    width: calc(100% + 30px) !important;      
    max-width: calc(100% + 30px) !important;
    box-sizing: border-box !important;
  }
  form[action*="email_verification_requests"] input[value="パスワード再設定"],
  form[action*="email_verification_requests"] input[value="設定解除"] {
    width: calc(100% + 30px) !important;      /* ★【100%】から【calc(100% + 30px)】へピンポイント修正 */
    max-width: calc(100% + 30px) !important;
    min-width: calc(100% + 30px) !important;
    box-sizing: border-box !important;
    position: relative !important;
    left: 15px !important;                    
  }
  form[action*="/customer/auth/line"] button.c-button,
  form[action*="/customer/auth/line"] .c-button {
    width: calc(100% + 30px) !important;      
    max-width: calc(100% + 30px) !important;
    min-width: calc(100% + 30px) !important;
    box-sizing: border-box !important;
    position: relative !important;
    left: -15px !important;                   /* ★【15px】から【-15px】へピンポイント修正（30px左へ動きます） */
  }
  .p-page__section:has(form[action*="profile"]),
  form[action*="profile"] {
    position: relative !important;
    left: -15px !important;                   
    width: 100% !important;                   /* ★【calc(100% + 15px)】から、右側を15px縮めて【100%】にピンポイント修正 */
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .c-alert:has(+ form[action*="profile"]) {
    position: relative !important;
    left: 0 !important;                       /* ★左移動の -5px を、右に5px戻して【0】にピンポイント修正 */
    width: calc(100% - 5px) !important;       
    max-width: calc(100% - 5px) !important;
    box-sizing: border-box !important;
  }
  form[action*="addresses/deletion"] {
    position: relative !important;
    left: -30px !important;                   /* ★【-15px】から、さらに左に15px寄せて【-30px】にピンポイント修正 */
    width: calc(100% + 30px) !important;      
    max-width: calc(100% + 30px) !important;
    box-sizing: border-box !important;
  }
  form[action*="addresses/deletion"] .c-button__group,
  form[action*="addresses/deletion"] .c-table-wrap--overflow,
  form[action*="addresses/deletion"] .c-table {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    box-sizing: border-box !important;
  }
    #address_list .c-button__group a.c-button--lg[href*="addresses/new"] {
    position: relative !important;
    left: -15px !important;                   /* 全体を左へ15px平行移動させて中央配置 */
    width: calc(100% + 30px) !important;      /* 横幅を＋30px拡張して右端まで届かせます */
    max-width: calc(100% + 30px) !important;
    box-sizing: border-box !important;
  }
  button.c-button--line,
  form[action*="/customer/auth/line"] button.c-button--line {
    position: relative !important;
    left: 0 !important;                       /* ★【15px】から、左に15px動かして【0】にピンポイント修正 */
    width: calc(100% - 30px) !important;      
    max-width: calc(100% - 30px) !important;
    box-sizing: border-box !important;
  }
    section .c-button__group,
  section .c-button__group .button_to,
  section .c-button__group button.c-button--line {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    box-sizing: border-box !important;
    position: relative !important;
    left: 0 !important;                       /* 余計なスライド位置をすべて0に戻して中央にホールドします */
  }
}