/* ============================================================
   紡ぎ舎 会員ログイン・マイアカウント（sessions.css）
   2026/09/21
   ------------------------------------------------------------
   読み込み順が  common_init.css → このCSS → application.css
   のため、ColorMe側の指定に負けないよう
   .p-page__wrap を前置するか !important を付けている。
   ============================================================ */

:root{
  --tsm-orange:#d97757;
  --tsm-taupe:#8a7d68;
  --tsm-cream:#faf7f1;
  --tsm-border:#e4ddd0;
  --tsm-heading:#4a4034;
  --tsm-body:#585858;
  --tsm-line:#06C755;
  --tsm-gothic:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",
               "YuGothic","Noto Sans JP",sans-serif;
  --tsm-mincho:"Hiragino Mincho ProN","Yu Mincho","YuMincho",
               "Noto Serif JP",serif;
}

/* ---------- ページ全体 ---------- */
body.p-page__wrap{
  margin:0;
  background:var(--tsm-cream);
  color:var(--tsm-body);
  font-family:var(--tsm-gothic);
  line-height:1.9;
  -webkit-text-size-adjust:100%;
}

/* ColorMe標準の .p-page__body / .p-page__container は白背景を持っており、
   カード（.p-page__body-inner）の左右に白い帯として見えてしまうため透明にする。 */
.p-page__wrap .p-page__body,
.p-page__wrap .p-page__container{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

/* ---------- 店舗ロゴ ----------
   ロゴ画像はJPEG（透過を持てない）ため、mix-blend-mode:multiply で
   白地をページ背景に溶かしている。背景色は .title_area に明示して
   ブレンドの下地を確定させる。 */
.title_area{
  display:block !important;
  text-align:center;
  padding:36px 20px 0;
  background:var(--tsm-cream);
}
.p-page__wrap .p-shop__logo{
  display:inline-block;
  width:auto !important;
  height:auto !important;
  max-width:210px;
  max-height:52px;
  mix-blend-mode:multiply;
}

/* ---------- 本体カード ---------- */
.p-page__wrap .p-page__body-inner{
  width:auto !important;
  max-width:620px !important;
  margin:32px auto 0 !important;
  padding:44px 48px 40px !important;
  background:#fff;
  border:1px solid var(--tsm-border) !important;
  border-radius:12px;
  box-sizing:border-box;
}

/* ---------- ショップへ戻る ---------- */
.p-page__wrap .c-button__group--sub{
  margin:0 0 20px !important;
  text-align:left !important;
  transform:none !important;
}
.p-page__wrap .c-button__group--sub a.c-button{
  display:inline-block;
  width:auto !important;
  background:none !important;
  background-color:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  border-radius:0 !important;
  padding:0 !important;
  margin:0 !important;
  max-width:none;
  font-family:var(--tsm-gothic) !important;
  font-size:12.5px !important;
  font-weight:400 !important;
  letter-spacing:.04em;
  color:var(--tsm-taupe) !important;
  text-decoration:none;
}
.p-page__wrap .c-button__group--sub a.c-button::before{ content:"＜ "; }
.p-page__wrap .c-button__group--sub a.c-button:hover{
  background:none !important;
  background-color:transparent !important;
  color:var(--tsm-heading) !important;
}

/* ---------- タイトル ---------- */
.p-page__wrap .p-page__title{
  margin:0 !important;
  font-family:var(--tsm-mincho) !important;
  font-size:26px !important;
  font-weight:600;
  line-height:1.5;
  letter-spacing:.12em;
  text-align:center;
  color:var(--tsm-heading) !important;
}
.p-page__wrap .p-page__title::after{
  content:"";
  display:block;
  width:40px;
  height:1px;
  margin:20px auto 0;
  background:var(--tsm-orange);
}

/* ---------- 導入文 ---------- */
.p-page__wrap .c-alert{
  display:block !important;
  max-width:430px;
  margin:22px auto 34px !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:none !important;
  color:var(--tsm-body) !important;
  font-family:var(--tsm-gothic) !important;
  font-size:14px !important;
  line-height:2.0;
  text-align:center;
}
.p-page__wrap .c-alert a{ color:var(--tsm-orange) !important; }

/* エラー表示 */
.p-page__wrap .c-alert--danger{
  display:block !important;
  max-width:none;
  margin:0 0 26px !important;
  padding:14px 18px !important;
  background:#fdf0eb !important;
  border:1px solid #e9b8a6 !important;
  border-radius:8px !important;
  color:#b4552f !important;
  font-size:13.5px !important;
  line-height:1.9;
  text-align:left;
}
.p-page__wrap .c-alert--danger ul,
.p-page__wrap .c-alert--danger ol{ margin:0; padding-left:1.2em; }
.p-page__wrap .c-alert--danger a{ color:#b4552f !important; }

/* 完了表示 */
.p-page__wrap .c-alert--success{
  display:flex !important;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  max-width:none;
  margin:26px 0 0 !important;
  padding:0 !important;
  background:none !important;
  border:0 !important;
  font-family:var(--tsm-mincho) !important;
  font-size:19px !important;
  line-height:2.0;
  letter-spacing:.08em;
  text-align:center;
  color:var(--tsm-heading) !important;
}
.p-page__wrap .c-alert--success::after{
  content:url(https://img21.shop-pro.jp/PA01462/811/etc/messageComplete.png?cmsp_timestamp=20210117231817);
  display:block;
  width:182px;
  margin:46px 0 20px;
}

/* ---------- フォーム ---------- */
.p-page__wrap .c-form__table{
  width:100% !important;
  margin:0 !important;
  border:0 !important;
}
.p-page__wrap .c-form__table tr{
  display:flex;
  flex-direction:column;
  width:100%;
  border:0 !important;
}
.p-page__wrap .c-form__title{
  width:100% !important;
  padding:0 !important;
  border:0 !important;
  font-family:var(--tsm-gothic) !important;
  font-size:14px !important;
  font-weight:600 !important;
  line-height:1.7;
  letter-spacing:.02em;
  text-align:left !important;
  vertical-align:top;
  color:var(--tsm-heading) !important;
  box-sizing:border-box;
}
.p-page__wrap .c-form__title--must{
  margin-left:7px;
  font-size:11.5px;
  font-weight:400;
  letter-spacing:0;
  color:var(--tsm-orange) !important;
}
.p-page__wrap .c-form__content{
  width:100% !important;
  padding:8px 0 22px !important;
  border:0 !important;
  text-align:left;
  vertical-align:middle;
  color:var(--tsm-body) !important;
  box-sizing:border-box;
}
.p-page__wrap .c-form__note{
  margin:10px 0 0 !important;
  font-size:12.5px;
  line-height:1.8;
}
.p-page__wrap .c-form__note a{
  color:var(--tsm-taupe) !important;
  text-decoration:none;
  border-bottom:1px solid var(--tsm-border);
}

.p-page__wrap .c-input--text{
  width:100% !important;
  margin:0 !important;
  padding:13px 14px !important;
  background:#fff !important;
  border:1px solid var(--tsm-border) !important;
  border-radius:6px !important;
  box-shadow:none !important;
  font-family:var(--tsm-gothic) !important;
  font-size:16px !important;   /* iOSの自動ズーム防止 */
  line-height:1.7;
  color:var(--tsm-heading) !important;
  box-sizing:border-box;
  -webkit-appearance:none;
  appearance:none;
  transition:border-color .15s, box-shadow .15s;
}
.p-page__wrap .c-input--text:focus{
  outline:none !important;
  border-color:var(--tsm-orange) !important;
  box-shadow:0 0 0 3px rgba(217,119,87,.14) !important;
}
.p-page__wrap .c-input--text::placeholder{ color:#b5ada0; }

/* ---------- reCAPTCHA ---------- */
.p-page__wrap .g-recaptcha{
  display:flex !important;
  justify-content:center;
  align-items:center;
  margin:4px 0 0 !important;
}

/* ============================================================
   ボタン
   ------------------------------------------------------------
   ColorMeのボタンは用途がクラスで分かれている。
     .c-button--primary … その画面の主アクション（送信・登録・更新・ログイン）
     .c-button--danger  … 取り消し系（解除・退会）
     修飾なしの .c-button … 副アクション（変更・住所検索・再設定など。
                            マイアカウントに多数あり、入力欄の隣に並ぶ）
   既定を「小さいアウトライン」にして、--primary だけをオレンジにする。
   ここを取り違えると、マイアカウントの副ボタンが全部オレンジの
   全幅ボタンになって入力欄に重なる。
   ============================================================ */

/* 既定：小さいアウトライン（副アクション） */
.p-page__wrap input.c-button,
.p-page__wrap button.c-button,
.p-page__wrap a.c-button,
.p-page__wrap span.c-button{
  display:inline-block;
  width:auto !important;
  max-width:100%;
  height:auto !important;
  margin:0 !important;
  padding:9px 18px !important;
  background:#fff !important;
  background-color:#fff !important;
  border:1px solid var(--tsm-border) !important;
  border-radius:6px !important;
  box-shadow:none !important;
  outline:none !important;
  font-family:var(--tsm-gothic) !important;
  font-size:13.5px !important;
  font-weight:400 !important;
  line-height:1.6;
  letter-spacing:.06em;
  color:var(--tsm-heading) !important;
  text-decoration:none;
  text-align:center;
  vertical-align:middle;
  cursor:pointer;
  -webkit-appearance:none;
  appearance:none;
  transition:background-color .15s, opacity .15s;
}
.p-page__wrap input.c-button:hover:not(:disabled),
.p-page__wrap button.c-button:hover:not(:disabled),
.p-page__wrap a.c-button:hover{
  background:var(--tsm-cream) !important;
  background-color:var(--tsm-cream) !important;
}

/* 主アクションだけオレンジ */
.p-page__wrap input.c-button--primary,
.p-page__wrap button.c-button--primary{
  background:var(--tsm-orange) !important;
  background-color:var(--tsm-orange) !important;
  border:0 !important;
  color:#fff !important;
}
.p-page__wrap input.c-button--primary:hover:not(:disabled),
.p-page__wrap button.c-button--primary:hover:not(:disabled){
  background:var(--tsm-orange) !important;
  background-color:var(--tsm-orange) !important;
  opacity:.88;
}

/* 大きさ：--lg / --login は全幅（最大340px）で中央 */
.p-page__wrap input.c-button--lg,
.p-page__wrap button.c-button--lg,
.p-page__wrap a.c-button--lg,
.p-page__wrap input.c-button--login,
.p-page__wrap button.c-button--login{
  display:block;
  width:100% !important;
  max-width:340px;
  margin:0 auto !important;
  padding:15px 0 !important;
  font-size:16px !important;
  letter-spacing:.14em;
}

/* 無効状態 */
.p-page__wrap input.c-button:disabled,
.p-page__wrap button.c-button:disabled,
.p-page__wrap .c-button.disabled{
  background:var(--tsm-cream) !important;
  background-color:var(--tsm-cream) !important;
  border-color:#ece5d9 !important;
  color:#b5ada0 !important;
  cursor:not-allowed;
  opacity:1;
}
.p-page__wrap input.c-button--primary:disabled,
.p-page__wrap button.c-button--primary:disabled{
  background:#ded6c8 !important;
  background-color:#ded6c8 !important;
  color:#fff !important;
  cursor:not-allowed;
  opacity:1;
}

/* 取り消し系（解除・退会）は赤ではなくアウトラインのまま。色で脅かさない */
.p-page__wrap input.c-button--danger,
.p-page__wrap button.c-button--danger{
  background:#fff !important;
  background-color:#fff !important;
  border:1px solid var(--tsm-border) !important;
  color:var(--tsm-heading) !important;
}

/* ---------- セレクト ---------- */
.p-page__wrap .c-input--select{
  width:100% !important;
  padding:12px 34px 12px 14px !important;
  background:#fff !important;
  border:1px solid var(--tsm-border) !important;
  border-radius:6px !important;
  box-shadow:none !important;
  font-family:var(--tsm-gothic) !important;
  font-size:16px !important;
  line-height:1.7;
  color:var(--tsm-heading) !important;
  box-sizing:border-box;
}
.p-page__wrap .c-input--select-wrap{ position:relative; }

/* 郵便番号など、隣にボタンが並ぶ短い入力欄 */
.p-page__wrap .c-input--text.is-narrow{
  width:auto !important;
  max-width:190px;
  margin-right:8px !important;
}

/* 入力例・注記・必須マーク（ハイフン1つの c-form__title-must もある） */
.p-page__wrap .c-form__example{
  margin:6px 0 0 !important;
  font-size:12px;
  line-height:1.7;
  color:var(--tsm-taupe);
  text-align:left;
}
.p-page__wrap .c-form__title-must{
  margin-left:7px;
  font-size:11.5px;
  font-weight:400;
  letter-spacing:0;
  color:var(--tsm-orange) !important;
}
.p-page__wrap .c-text--danger{ color:#b4552f !important; }

/* ---------- セクション（マイアカウント） ---------- */
.p-page__wrap .p-page__section{
  margin:0 0 30px !important;
  padding:26px 26px 22px !important;
  border:1px solid var(--tsm-border) !important;
  border-radius:10px;
  background:#fff;
}
.p-page__wrap .p-page__section-title{
  font-family:var(--tsm-gothic) !important;
  font-size:15px !important;
  font-weight:600;
  letter-spacing:.04em;
  color:var(--tsm-heading) !important;
  margin:0 0 14px !important;
}
.p-page__wrap .p-page__section .c-alert{
  max-width:none;
  margin:0 0 18px !important;
  text-align:left;
  font-size:13px !important;
  color:#7a7266 !important;
}

/* ---------- 一覧テーブル（注文履歴） ---------- */
.p-page__wrap .c-table{
  width:100% !important;
  border-collapse:collapse !important;
  font-size:13.5px;
}
.p-page__wrap .c-table__title{
  padding:10px 12px !important;
  background:var(--tsm-cream) !important;
  border:1px solid var(--tsm-border) !important;
  font-size:12px !important;
  font-weight:600 !important;
  color:var(--tsm-heading) !important;
  text-align:left;
}
.p-page__wrap .c-table__content{
  padding:12px !important;
  border:1px solid var(--tsm-border) !important;
  color:var(--tsm-body) !important;
  vertical-align:middle;
}
.p-page__wrap .c-table a{ color:var(--tsm-orange) !important; }
.p-page__wrap .c-result-count{
  font-size:12.5px;
  color:var(--tsm-taupe);
  margin:0 0 10px !important;
}
.p-page__wrap .c-table-wrap--overflow{ overflow-x:auto; }

/* 区切り線 */
.p-page__wrap .c-line,
.p-page__wrap hr{
  margin:30px 0 !important;
  border:0 !important;
  border-top:1px solid var(--tsm-border) !important;
  height:0 !important;
  background:none !important;
}
.p-page__wrap .c-line--narrow{ margin:18px 0 !important; }

/* ボタンの並び */
.p-page__wrap .c-button__group{
  margin:18px 0 0 !important;
  text-align:center;
}
.p-page__wrap .c-button__group--in-form{ text-align:left; }

/* ---------- フッター（SSLシールのみ表示） ---------- */
.p-page__wrap .p-page__footer{
  display:block !important;
  margin:28px 0 0;
  padding:0 0 56px;
}
.p-page__wrap .p-page__copyright{ display:none !important; }
.p-page__wrap .p-page__secure{
  display:flex;
  gap:16px;
  align-items:center;
  justify-content:center;
  max-width:620px;
  margin:0 auto;
  padding:0 24px;
  box-sizing:border-box;
}
.p-page__wrap .p-secure__image{ flex:0 0 auto; }
.p-page__wrap .p-secure__msg{
  max-width:420px;
  font-size:11px;
  line-height:1.9;
  color:var(--tsm-taupe);
  text-align:left;
}

/* ---------- 会員ログイン・マイアカウント固有 ---------- */
/* ログイン画面には「紡ぎ舎の会員様ページへようこそ！／新規会員登録はこちら」の
   段落があり、ColorMe標準の .c-alert が同じ内容を重複して持つ。
   ログイン画面でだけ .c-alert を畳み、その段落をリード文として使う。 */
.p-page__wrap .p-page__body-inner:has(form[action="/customer/login"]) .c-alert{
  display:none !important;
}
.p-page__wrap form[action="/customer/login"] > p{
  max-width:430px;
  margin:22px auto 34px !important;
  font-size:14px;
  line-height:2.0;
  text-align:center;
}
.p-page__wrap form[action="/customer/login"] > p a{
  color:var(--tsm-orange) !important;
  text-decoration:none;
  border-bottom:1px solid rgba(217,119,87,.4);
}

/* ログインボタン */
.p-page__wrap input.c-button--login{
  letter-spacing:.2em;
}

/* LINEでログイン（LINEのボタンは必ずLINEの緑） */
.p-page__wrap .c-button--line,
.p-page__wrap button.c-button--line{
  background:var(--tsm-line) !important;
  background-color:var(--tsm-line) !important;
  color:#fff !important;
  border:0 !important;
}
.p-page__wrap .c-button--line *{ color:#fff !important; }

/* メールログインとLINEログインの間に区切り */
.p-page__wrap .p-page__body-inner > section{
  position:relative;
  margin-top:34px;
  padding-top:30px;
  border-top:1px solid var(--tsm-border);
}
.p-page__wrap .p-page__body-inner > section::before{
  content:"または";
  position:absolute;
  top:-13px;
  left:50%;
  transform:translateX(-50%);
  padding:0 14px;
  background:#fff;
  font-size:11.5px;
  letter-spacing:.16em;
  color:var(--tsm-taupe);
}
.p-page__wrap .p-page__body-inner > section .c-button__group{
  margin-top:0 !important;
}

/* マイアカウントのリンク一覧など、標準コンポーネントの受け皿 */
.p-page__wrap .p-page__body-inner ul{ padding-left:1.3em; }
.p-page__wrap .p-page__body-inner a{ color:var(--tsm-orange); }
/* 退会ブロック */
.p-page__wrap .myaccount-withdrawal{
  margin:6px 0 0 !important;
  padding:20px 22px !important;
  background:var(--tsm-cream);
  border-radius:10px;
}
.p-page__wrap .myaccount-withdrawal__content{ font-size:13px; line-height:1.9; }

/* ============================================================
   モバイル
   ============================================================ */
@media (max-width:600px){
  .title_area{ padding:26px 16px 0; }
  .p-page__wrap .p-shop__logo{ max-width:176px; max-height:44px; }

  .p-page__wrap .p-page__body-inner{
    width:auto !important;
    max-width:none !important;
    margin:22px 12px 0 !important;
    padding:30px 20px 28px !important;
    border-radius:10px;
  }
  .p-page__wrap .p-page__title{ font-size:22px !important; }
  .p-page__wrap .p-page__title::after{ margin-top:16px; }
  .p-page__wrap .c-alert{
    max-width:none;
    margin:18px 0 26px !important;
    font-size:13.5px !important;
    text-align:left;
  }
  .p-page__wrap .c-alert--success{ font-size:17px !important; }
  .p-page__wrap input.c-button--lg,
  .p-page__wrap button.c-button--lg,
  .p-page__wrap a.c-button--lg,
  .p-page__wrap input.c-button--login,
  .p-page__wrap button.c-button--login{ max-width:none; }
  .p-page__wrap .p-page__section{ padding:20px 18px 16px !important; }
  .p-page__wrap .c-input--text.is-narrow{ max-width:150px; }
  .p-page__wrap .p-page__secure{
    flex-direction:column;
    gap:10px;
    text-align:center;
    padding:0 20px;
  }
  .p-page__wrap .p-secure__msg{ text-align:center; }

  .p-page__wrap form[action="/customer/login"] > p{
    max-width:none;
    margin:18px 0 26px !important;
    font-size:13.5px;
    text-align:left;
  }
}