/* ============================================================
   カラーミー 会員/システムページ用 補助CSS（STEP 6）
   対象: 会員ログイン・マイアカウント / お問い合わせ / メルマガ / レビュー など
        （/customer/ 配下の別システム。共通テンプレ/共通CSSは効かない）
   実クラスは会員ログインHTMLソース(2026-07-07)より採取（c-*, p-page__* 系）。
   ・色は管理画面のカラー設定（page_bgcolor/button*_bgcolor 等）で先に合わせる。
   ・本CSSは各ページのCSS欄の末尾に追記（既存の <{$...}> 変数ルールは残す）。
     顧客ページはクラス体系が共通なので、同じ内容を各ページCSS欄へ貼れば全体に効く。
   ============================================================ */

/* Webフォント（head編集不可のためCSSで読込） */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600&family=Shippori+Mincho:wght@500&display=swap');

/* 本文フォント・文字色 */
body.p-page__wrap,
.p-page__wrap {
  font-family: "Shippori Mincho", serif !important;
  color: #4c4b4c;
}

/* ショップ名ヘッダー → テキストを隠してTOCARロゴ画像に置換（小技）
   HTMLが変えられないため、span.shop_title のテキストを不可視化し背景にロゴを表示 */
.shop_title,
.p-shop__title {
  display: inline-block;
  width: 200px;
  height: 54px;
  /* テキストを視覚的に隠す */
  text-indent: -9999px;
  white-space: nowrap;
  overflow: hidden;
  background-image: url('https://img21.shop-pro.jp/PA01522/072/etc_base64/dG9jYXItZWNsb2dv.png?cmsp_timestamp=20260707151614');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* ページ見出し（例: 「ログイン」） */
.p-page__title {
  font-family: "Plus Jakarta Sans", "Shippori Mincho", sans-serif;
  font-weight: 600;
  letter-spacing: .04em;
  color: #4c4b4c;
}

/* フォームのラベル */
.c-form__title,
.c-form__title label {
  font-family: "Shippori Mincho", serif;
  color: #4c4b4c;
}

/* 入力欄：角を直角に（色/枠は管理画面の textarea_bordercolor が反映） */
.c-input--text,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
textarea,
select {
  border-radius: 0 !important;
}

/* ボタン：角を直角・字間・フォント統一（背景色は管理画面 button*_bgcolor が反映） */
.c-button,
.c-button--primary,
.c-button--danger,
.c-button--login,
.c-button-sm {
  border-radius: 0 !important;
  font-family: "Shippori Mincho", serif;
  letter-spacing: .08em;
}

/* CTAボタンの色固定：基盤CSS(application.css)が後読みで .c-button--login 等に
   青を当ててくるため !important で上書き（管理画面の色設定が効かない対策） */
.c-button--primary,
.c-button--login {
  background: #4c4b4c !important;
  color: #ffffff !important;
}
.c-button--primary:hover,
.c-button--login:hover {
  background: #6a696a !important;
}

/* お知らせ枠（既定の水色ボックス） */
.c-alert {
  border-radius: 0;
}