/* =====================================================
   mypagenew 全ページ共通 CSS オーバーライド
   common.css の position:absolute / overflow:hidden を上書き
   ===================================================== */

.page {
  position: relative;
  width: 375px;
  min-height: 100vh;
  margin: 0 auto;
  background: #F3F2F9;
}

.main-area {
  position: relative;
  top: 0;
  width: 375px;
  height: auto;
  padding-bottom: 108px;
}

/* .cover / .step-area は DOM 上 .main-area より先に来るため、z-index を明示して上に重ねる */
.cover {
  z-index: 10;
}

.step-area {
  z-index: 5;
}

/* グローバルメニュー: fixed + ページ中央に合わせる */
.global-menu {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
}

/* ステップナビのリンク装飾リセット */
a.step-item {
  text-decoration: none;
  color: inherit;
}

a.step-item:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* =====================================================
   ステップナビゲーション（personal_y_ 予約フロー共通）
   ===================================================== */

.step-area {
  position: absolute;
  top: 144px;
  left: 0;
  width: 375px;
  height: 56px;
  background: #fff;
  border-radius: 0 0 20px 20px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 体験予約は4ステップを1行表示（店舗選択 › 情報入力 › 日時選択 › 予約完了） */
.step-line {
  display: flex;
  align-items: center;
  justify-content: center;
}

.step-item {
  color: #3B3C39;
  font-size: 14px;   /* XD準拠: パンくず14px */
  font-weight: 500;
  line-height: 16px;
  white-space: nowrap;
}

.step-item.active {
  display: inline-block;
  color: #7389C4;
  font-weight: 700;
  background: #F3F2F9;
  border-radius: 100px;
  padding: 5px 7px;
  margin: -5px -7px;
}

.step-arrow {
  color: #7389C4;
  font-size: 18px;
  line-height: 14px;
  margin: 0 7px;
}

.step-item-wrap {
  display: inline-block;
  line-height: 14px;
}

/* gray-btn のボーダー追加（common.css の上書き） */
.gray-btn {
  border: 1px solid #D6DDF0;
  box-shadow: 0 0 8px rgba(115,137,196,.25);
}

/* =====================================================
   体験予約 グローバルメニュー（XD「体験予約_メニュー」準拠）
   ブルー全画面オーバーレイ＋2カード＋ログアウト＋SNS
   ===================================================== */
.global-menu {
  display: none;
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 375px;
  height: 100vh;
  z-index: 100;
  background: url("img/login-sp.png") center center / cover no-repeat;
  overflow-y: auto;
}
.global-menu.is-open { display: block; }

/* ヘッダー（白帯・濃紺ロゴ・体験予約サイト・✕）は common.css の
   .global-menu-header / .menu-close をそのまま使用（マイページと共通） */

/* カード：トップページ(admin)と同一（幅334・高さ140・角丸/影なし）。XD配置＝top261 */
.gm-cards {
  position: relative;
  margin: 261px auto 0;
  width: 334px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.gm-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 140px;
  background: #fff;
  border-radius: 0;
  text-decoration: none;
}
.gm-card-icon { width: 28px; height: 31px; color: #7389C4; line-height: 0; }
.gm-card-icon svg { width: 28px; height: 31px; display: block; }
.gm-card-jp {
  margin-top: 10px;
  color: #7389C4;
  font-size: 18px;
  font-weight: 700;
  line-height: 18px;
  letter-spacing: .9px;
}
.gm-card-en {
  margin-top: 8px;
  color: #7389C4;
  font-family: Optima, "Noto Sans", serif;
  font-size: 14px;
  line-height: 19px;
  letter-spacing: 1.4px;
}

/* ログアウト：XD top646（カード下端551から95px）・Noto Medium 14px・下線なし */
.gm-logout {
  display: block;
  width: fit-content;
  margin: 95px auto 0;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  line-height: 14px;
  letter-spacing: .14px;
  text-decoration: none;
}

/* SNS：XD top706・公式サイト｜Instagram（中央・白12px・区切り線） */
.gm-sns {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 46px auto 0;
}
.gm-sns a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  color: #fff;
  font-size: 12px;
  line-height: 1;
  text-decoration: none;
}
.gm-sns a + a { border-left: 1px solid rgba(255,255,255,.5); }

/* フッター：XD top786・Optima 10px */
.gm-footer {
  margin: 50px auto 0;
  text-align: center;
  color: rgba(255,255,255,.6);
  font-family: Optima, "Noto Sans", serif;
  font-size: 10px;
  letter-spacing: 1px;
}