@charset "utf-8";
/* =========================================================
   stepbar.css — ステップバーコンポーネント（全ページ共通）

   予約フローの現在位置を示すナビゲーション。
   stepbar.js が動的に is-active クラスと data-active-label を付与する。

   クラス早見表:
     .stepBar           ← ステップバー全体のコンテナ
     .stepBar-item      ← 各ステップ（SALON / MENU / STAFF / DATE / CONFIRM 等）
     .stepBar-num       ← ステップ番号（01 / 02 / 03 ...）
     .stepBar-label     ← ステップ名テキスト（SALON, MENU 等）
     .stepBar-arrow     ← ステップ間の矢印
     .is-active         ← 現在のステップ（stepbar.js が付与）
     .step              ← ステップバー + ページコンテンツ全体のラッパー
   ========================================================= */

/* ── .stepBar ── ステップバーコンテナ ───────────────────── */
.stepBar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0 14px;
  overflow: hidden;
  position: relative;
}

/* アクティブステップ名を巨大薄文字で背景に表示する */
.stepBar::before {
  content: attr(data-active-label);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Cormorant SC', serif;
  font-size: 100px;
  font-weight: 200;
  letter-spacing: 0.22em;
  color: rgba(0, 0, 0, 0.025);
  pointer-events: none;
  white-space: nowrap;
  z-index: 0;
  line-height: 1;
  user-select: none;
}

.stepBar-item {
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  position: relative;
  z-index: 1;
}

.stepBar-num {
  font-family: 'Cormorant SC', serif;
  font-size: clamp(11px, 1.8vw, 15px);
  font-weight: 300;
  color: #ccc5be;
  letter-spacing: 0.06em;
  line-height: 1;
  margin-bottom: 2px;
}

.stepBar-icon {
  display: none;
}

.stepBar-label {
  font-family: 'Cormorant SC', serif;
  font-size: clamp(9px, 1vw, 11px);
  font-weight: 300;
  color: #c8c0b8;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  margin-top: 1px;
  white-space: nowrap;
}

/* ── アクティブステップ ──────────────────────────────────
   stepbar.js が現在のステップに .is-active を付与する。
   ─────────────────────────────────────────────────────── */
.stepBar-item.is-active .stepBar-num {
  color: #1f1f1f;
  font-weight: 600;
  font-size: clamp(17px, 2.6vw, 22px);
  letter-spacing: 0.04em;
}

.stepBar-item.is-active .stepBar-label {
  color: #1f1f1f;
  font-weight: 400;
  font-size: clamp(10px, 1.1vw, 12px);
  letter-spacing: 0.14em;
  display: inline-block;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--ka-orange);
}

.stepBar-arrow {
  flex: 0 0 auto;
  width: clamp(6px, 1.5vw, 12px);
  text-align: center;
  color: #d0cac4;
  font-size: clamp(8px, 1.2vw, 11px);
  font-family: var(--font-serif);
  line-height: 1;
  position: relative;
  z-index: 1;
}

/* ── .step ── ページコンテンツのラッパー ─────────────────
   ステップバーとコンテンツを含む全体ラッパー。
   幅・マージンはブレークポイントで制御する。
   ─────────────────────────────────────────────────────── */

/* タブレット以上: 幅90%・中央揃え */
@media only screen and (min-width: 481px) {
  .step {
    margin: 0 5%;
    width: 90%;
    text-align: center;
  }
}

/* デスクトップ: トークン変数で幅を制御 */
@media only screen and (min-width: 769px) {
  .step {
    width: var(--reservation-content-width, 700px);
    max-width: calc(100% - 32px);
    margin-left: auto;
    margin-right: auto;
  }
}

/* ── ステップバー下のコンテンツ余白（全ページ共通） ───────
   ステップバー直後のコンテンツとの間隔。
   ページ固有の調整が必要な場合はページCSSで上書きする。
   ─────────────────────────────────────────────────────── */
#reserve .step {
  margin-top: 14px;
}
#reserve .step p {
  padding: 0 10px 0.8em;
}

@media (max-width: 768px) {
  #reserve .step {
    margin-top: 6px;
  }
  #reserve .step p {
    padding-bottom: 0.6em;
  }

  .stepBar {
    padding: 8px 0 5px;
  }

  .stepBar::before {
    font-size: 52px;
  }

  .stepBar-num {
    font-size: 10px;
  }

  .stepBar-label {
    font-size: 7.5px;
  }

  .stepBar-item.is-active .stepBar-num {
    font-size: clamp(14px, 2.6vw, 22px);
  }

  .stepBar-item.is-active .stepBar-label {
    font-size: 9px;
  }
}