@charset "utf-8";
/* =========================================================
   buttons.css — ボタンコンポーネント（全ページ共通）

   このファイル1箇所を変更するだけでサイト全体のボタンデザインが変わる。

   クラス早見表:
     .ka-btn            ← 基底（必須）。すべてのボタンに必ず付ける
     .ka-btn-primary    ← メインCTA: 「確認する」「予約する」「次へ進む」
     .ka-btn-outline    ← サブアクション: 「戻る」「修正する」「マイページへ」
     .ka-btn-ghost      ← 絞り込み/ナビ: スタイリスト・メニュー等の選択肢ボタン、絞り込みフィルター
     .ka-btn-soft       ← 補助強調: キャンペーン・おすすめ等の軽めのボタン
     .ka-btn-mens       ← mensサイト専用プライマリ（青みグレーブランドカラー）
     .ka-btn--sm        ← サイズ修飾子: 小（インラインリンク・補足ボタン等）
     .ka-btn--lg        ← サイズ修飾子: 大（幅いっぱいに広げる場合）
     .ka-btn--selected  ← 選択状態トグル（JSで付け外し）
     .ka-btn-change     ← 変更ボタン（鉛筆アイコン付き・サマリーカード専用）

   レガシー互換（既存HTML用。新規HTMLでは使わないこと）:
     .action-button / .frm_button → 新規は .ka-btn.ka-btn-primary を使用
   ========================================================= */

/* ── 基底 ─────────────────────────────────────────────────
   全ボタン共通のレイアウト・タイポグラフィ・トランジション。
   単独では色・背景を持たないため、必ずバリアントと組み合わせること。
   例: <a class="ka-btn ka-btn-primary">登録</a>
   ─────────────────────────────────────────────────────── */
.ka-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--font-ka);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: var(--ka-radius-pill);
  padding: 15px 40px;
  transition:
    transform var(--ka-transition),
    box-shadow var(--ka-transition),
    background var(--ka-transition),
    color var(--ka-transition),
    border-color var(--ka-transition);
  -webkit-appearance: none;
  white-space: nowrap;
}
.ka-btn:hover {
  transform: translateY(-2px);
  text-decoration: none;
}
.ka-btn:active {
  transform: translateY(1px);
}

/* ── Primary ── メインCTA ─────────────────────────────────
   「確認する」「予約する」「次へ進む」「登録する」等のメインアクション。
   オレンジ塗りつぶし・ドロップシャドウあり。
   ─────────────────────────────────────────────────────── */
.ka-btn-primary {
  background: var(--ka-orange);
  color: #fff;
  box-shadow: 0 3px 0 var(--ka-orange-pressed);
}
.ka-btn-primary:link,
.ka-btn-primary:visited {
  color: #fff;
}
.ka-btn-primary:hover,
.ka-btn-primary:focus {
  background: var(--ka-orange-hover);
  color: #fff;
  box-shadow: 0 4px 0 var(--ka-orange-pressed);
}
.ka-btn-primary:active {
  box-shadow: none;
}

/* ── Outline ── サブアクション ────────────────────────────
   「戻る」「修正する」「マイページへ」「キャンセル」等の補助アクション。
   白背景・グレーボーダー、ホバーでオレンジ。
   min-width: ページレベルボタンの最小幅を保証する。
   ─────────────────────────────────────────────────────── */
.ka-btn-outline {
  background: var(--ka-bg-white);
  color: var(--ka-subtext);
  border-color: var(--ka-line-strong);
  min-width: 240px;
}
.ka-btn-outline:link,
.ka-btn-outline:visited {
  color: var(--ka-subtext);
}
.ka-btn-outline:hover,
.ka-btn-outline:focus {
  border-color: var(--ka-orange);
  color: var(--ka-orange);
}

/* ── Ghost ── 絞り込み/ナビゲーションボタン ──────────────
   スタイリスト選択・メニュー選択等の選択肢ボタン、絞り込みフィルターボタン。
   白背景・オレンジボーダー+テキスト、ホバーで薄オレンジ背景。
   ─────────────────────────────────────────────────────── */
.ka-btn-ghost {
  background: var(--ka-bg-white);
  color: var(--ka-orange);
  border-color: var(--ka-orange);
}
.ka-btn-ghost:link,
.ka-btn-ghost:visited {
  color: var(--ka-orange);
}
.ka-btn-ghost:hover,
.ka-btn-ghost:focus {
  background: var(--ka-orange-soft);
  color: var(--ka-orange);
}

/* ── Soft ── 補助強調ボタン ───────────────────────────────
   キャンペーン・おすすめ表示等の補助的な強調ボタン。
   薄オレンジ背景・オレンジテキスト+ボーダー。
   ─────────────────────────────────────────────────────── */
.ka-btn-soft {
  background: var(--ka-orange-soft);
  color: var(--ka-orange);
  border-color: rgba(255, 101, 0, 0.32);
}
.ka-btn-soft:link,
.ka-btn-soft:visited {
  color: var(--ka-orange);
}
.ka-btn-soft:hover,
.ka-btn-soft:focus {
  background: #fde4cc;
  border-color: var(--ka-orange);
  color: var(--ka-orange);
}

/* ── Mens ── mensサイト専用プライマリCTA ─────────────────
   mensサイトの「次へ」「予約する」等のメインアクション。
   青みグレーブランドカラー（var(--ka-mens)）塗りつぶし。
   ─────────────────────────────────────────────────────── */
.ka-btn-mens {
  background: var(--ka-mens);
  color: #fff;
  border-color: var(--ka-mens);
  box-shadow: 0 3px 0 var(--ka-mens-dark);
}
.ka-btn-mens:link,
.ka-btn-mens:visited {
  color: #fff;
}
.ka-btn-mens:hover,
.ka-btn-mens:focus {
  background: var(--ka-mens-dark);
  border-color: var(--ka-mens-dark);
  color: #fff;
  box-shadow: 0 4px 0 var(--ka-mens-dark);
}
.ka-btn-mens:active {
  box-shadow: none;
}

/* ── .ka-btn--selected ── 選択状態修飾子 ─────────────────
   絞り込み・スタイリスト選択等でJSが付け外しする「選択済み」状態。
   .ka-btn-ghost の選択済みバージョン（薄オレンジ背景+オレンジボーダー）。
   !important はバリアントクラスとの優先度競合を防ぐため意図的に使用。
   ─────────────────────────────────────────────────────── */
.ka-btn--selected,
.ka-btn--selected:link,
.ka-btn--selected:visited {
  background: var(--ka-orange-soft) !important;
  border-color: var(--ka-orange) !important;
  color: var(--ka-orange) !important;
  box-shadow: none !important;
}
.ka-btn--selected:hover,
.ka-btn--selected:focus {
  background: #fde4cc !important;
  transform: none;
}

/* ── サイズ修飾子 ─────────────────────────────────────────
   .ka-btn--sm: 小ボタン（インラインリンク・補足ボタン等、min-width不要）
   .ka-btn--lg: 大ボタン（幅いっぱいに広げたい場合、モバイルフォーム等）
   ─────────────────────────────────────────────────────── */
.ka-btn--sm {
  font-size: 13px;
  padding: 8px 16px;
  min-width: auto;
}
.ka-btn--lg {
  font-size: 16px;
  padding: 6px 32px;
  width: 100%;
}

/* ── .ka-btn-change ── 変更ボタン ────────────────────────
   サマリーカード・確認画面の「変更」ボタン。鉛筆SVGアイコン付き。
   このクラス1箇所を変更するだけでサイト全体の変更ボタンデザインが変わる。
   使い方: <a class="ka-btn-change" href="...">変更</a>
   ─────────────────────────────────────────────────────── */
.ka-btn-change {
  display: inline-flex;
  align-items: center;
  background: none;
  border: none;
  border-radius: 0;
  padding: 8px 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ka-ink);
  letter-spacing: 0.12em;
  text-decoration: none;
  text-underline-offset: 3px;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
  transition: color 0.2s, text-decoration-color 0.2s;
}
.ka-btn-change:link,
.ka-btn-change:visited { color: var(--ka-ink); }
.ka-btn-change::before {
  content: '';
  display: inline-block;
  width: 11px;
  height: 11px;
  margin-right: 5px;
  flex-shrink: 0;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'/%3E%3Cpath d='M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'/%3E%3Cpath d='M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z'/%3E%3C/svg%3E") no-repeat center / contain;
  transition: background 0.2s;
}
.ka-btn-change:hover {
  color: var(--ka-orange);
  text-decoration: underline;
  text-decoration-color: rgba(255, 101, 0, 0.4);
}

/* ── LINE ログインボタン（公式画像使用） ────────────────────
   LINE公式ガイドライン準拠:
   https://terms2.line.me/LINE_Developers_Guidelines_for_Login_Button
   ログインボタンは公式画像(btn_login_base.png)をそのまま <img> で表示。
   アイソレーションゾーン（上下 margin）をラッパーで確保。

   使い方（ログイン画面）:
     <a class="ka-btn--line-login" href="...">
       <img src="common/images/line/btn_login_base.png"
            srcset="common/images/line/btn_login_base@2x.png 2x"
            alt="LINEでログイン" width="248" height="44">
     </a>
   ─────────────────────────────────────────────────────── */
.ka-btn--line-login {
  display: block;
  line-height: 0;
  text-decoration: none;
  cursor: pointer;
  width: 100%;
  margin: 10px auto;
  transition: opacity var(--ka-transition);
}
.ka-btn--line-login:hover,
.ka-btn--line-login:focus { opacity: 0.85; text-decoration: none; }
.ka-btn--line-login:active { opacity: 0.7; }
.ka-btn--line-login img {
  display: block;
  width: 100%;
  height: auto;
}

/* ── LINE 連携ボタン（マイページ用・公式アイコン使用） ────
   「LINEを連携する」など独自テキストが必要な場面に使用。
   公式アイコン画像(line-icon.png)を左に配置し、テキストを右に。
   テキスト左右パディング ≥ アイコン幅(44px)、上下 ≥ その半分(22px)。

   使い方（マイページ等）:
     <a class="ka-btn ka-btn--line" href="...">
       <span class="line-btn-icon"><img src="common/images/line/line-icon.png"
            srcset="common/images/line/line-icon@2x.png 2x" alt="" width="44" height="44"></span>
       <span class="line-btn-text">LINEを連携する</span>
     </a>
   ─────────────────────────────────────────────────────── */
.ka-btn--line {
  background: #06C755;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 0;
  min-width: 240px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  margin: 10px 0;              /* アイソレーションゾーン */
}
.ka-btn--line:link,
.ka-btn--line:visited { color: #fff; }
.ka-btn--line:hover,
.ka-btn--line:focus { background: #05b34a; color: #fff; box-shadow: 0 3px 6px rgba(0,0,0,0.25); }
.ka-btn--line:active { box-shadow: none; transform: translateY(1px); }

.ka-btn--line .line-btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  align-self: stretch;
  background: rgba(0, 0, 0, 0.08);
  border-right: 1px solid rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
}
.ka-btn--line .line-btn-icon img { display: block; width: 44px; height: 44px; }

/* テキスト: 左右 ≥ アイコン幅(44px)、上下 ≥ その半分(22px) */
.ka-btn--line .line-btn-text {
  flex: 1;
  padding: 13px 44px;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* ── レガシー互換 ─────────────────────────────────────────
   .action-button (<button>) / .frm_button (<a>)
   既存HTMLとの互換のために残す。新規HTMLでは .ka-btn.ka-btn-primary を使うこと。
   ─────────────────────────────────────────────────────── */
.action-button,
.frm_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ka);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--ka-radius-pill);
  padding: 15px 40px;
  min-width: 240px;
  background: var(--ka-orange);
  color: #fff;
  box-shadow: 0 3px 0 var(--ka-orange-pressed);
  transition:
    transform var(--ka-transition),
    box-shadow var(--ka-transition),
    background var(--ka-transition);
  cursor: pointer;
  -webkit-appearance: none;
}
.action-button:hover,
.frm_button:hover,
.frm_button:focus {
  transform: translateY(-2px);
  background: var(--ka-orange-hover);
  box-shadow: 0 4px 0 var(--ka-orange-pressed);
  text-decoration: none;
}
.action-button:active,
.frm_button:active {
  transform: translateY(1px);
  box-shadow: none;
}
.frm_button:link,
.frm_button:visited {
  color: #fff;
}
.action-button:disabled {
  background: var(--ka-disabled-strong);
  box-shadow: none;
  cursor: not-allowed;
  opacity: 0.6;
}