/* ============================================================
   携帯用オーバーライド（mobile.html 専用）
   ・PCで開いてもスマホレイアウトを維持（幅に依存しない）
   ・全体をスマホ幅に絞って中央寄せ
   ============================================================ */

/* コンテンツをスマホ幅に制限して中央に置く */
.is-mobile { max-width: 480px; margin: 0 auto; box-shadow: 0 0 40px rgba(0,0,0,0.06); }

/* ヘッダーを画面上部に固定（sticky が効かない環境向けに fixed で確実に固定） */
.is-mobile .header {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  z-index: 1000;
}
/* 固定ヘッダーの分だけ本文を下げる */
.is-mobile { padding-top: 82px; }

/* ヘッダー: ハンバーガーを常に表示、ナビはドロップダウン */
.is-mobile .header__toggle { display: flex; }

/* ハンバーガー(3本線)とPC切替ボタンを右側で横並びに */
.is-mobile .header__actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
/* ハンバーガーの左横に出すPC切替ボタン（常時表示） */
.is-mobile .header__switch--outside {
  padding: 8px 14px;
  font-size: 0.8rem;
  border: 1.5px solid var(--color-accent);
  border-radius: 999px;
  background: #fff;
  color: var(--color-accent-dark);
  white-space: nowrap;
}
.is-mobile .header__name { font-size: 0.9rem; white-space: normal; line-height: 1.35; }
.is-mobile .header__nav {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  background: #fff;
  border-bottom: 1px solid var(--color-line);
  box-shadow: var(--shadow);
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}
.is-mobile .header__nav.is-open { max-height: 480px; }
.is-mobile .header__link,
.is-mobile .header__cta,
.is-mobile .header__switch {
  padding: 16px 24px;
  border-top: 1px solid var(--color-line);
  border-radius: 0;
  box-shadow: none;
  border-left: none;
  border-right: none;
  border-bottom: none;
  justify-content: flex-start;
}
.is-mobile .header__cta { color: var(--color-accent-dark); background: var(--color-pink-soft); }
.is-mobile .header__switch { color: var(--color-accent-dark); background: #fff; }

/* 余白・見出しをスマホ向けに */
.is-mobile .hero { padding: 60px 18px 90px; }
.is-mobile .hero__photo { margin-bottom: 32px; }

/* キャッチコピーを画面内に1行で収める */
.is-mobile .hero { overflow: hidden; }
.is-mobile .hero__content { max-width: 100%; overflow: hidden; }
.is-mobile .hero__title {
  font-size: clamp(1rem, 5.2vw, 1.5rem);
  white-space: nowrap;
  letter-spacing: 0;
  overflow: hidden;
  text-overflow: clip;
}
/* サブコピー: 画面内に収める（長い行は折り返し可） */
.is-mobile .hero__lead {
  font-size: clamp(0.7rem, 3.1vw, 0.9rem);
  white-space: normal;
  letter-spacing: 0;
  line-height: 1.9;
  padding: 0 4px;
  word-break: auto-phrase;
  overflow-wrap: anywhere;
}
.is-mobile .section { padding: 56px 18px; }

/* 丸い売りポイント（強調・スマホ） */
.is-mobile .hero__points { gap: 12px; padding: 24px 14px; }
.is-mobile .point { width: 100px; gap: 10px; }
.is-mobile .point__circle { width: 96px; height: 96px; font-size: 0.9rem; border-width: 2px; }
.is-mobile .point__label { font-size: 0.76rem; font-weight: 700; }

/* MOC本文: スマホはさらに小さめ＆余白広め */
.is-mobile .pc-br { display: none; }
.is-mobile .moc-text p { font-size: 0.82rem; line-height: 1.95; margin-bottom: 14px; }

/* 3カラム系は1カラムに */
.is-mobile .cards { grid-template-columns: 1fr; gap: 36px; }
.is-mobile .price-groups { grid-template-columns: 1fr; gap: 24px; }
.is-mobile .salon { padding: 26px 18px; }
.is-mobile .salon__list { grid-template-columns: 1fr; row-gap: 6px; }
.is-mobile .salon__list dt { margin-top: 14px; }

/* 予約ボタンは縦積み */
.is-mobile .booking__actions { flex-direction: column; align-items: stretch; }

/* 下部固定の予約ボタンを表示 */
.is-mobile .mobile-cta { display: block; }