@charset "UTF-8";
/* =========================================================
   index-a 専用ヘッダー / ハンバーガーメニュー
   - MVの上に白背景ヘッダー（ロゴ2つ並び＋ハンバーガー）
   - ハンバーガーは常時 position:fixed（ヘッダーがスクロールで
     流れてもアイコンだけ画面右上に固定される）
   - アイコンはSVGの線（太さ0.8 / vector-effectで常に0.8px）
   - 開閉時は3本線⇔×にアニメーションで変形
   ========================================================= */
:root {
  --header-h: clamp(64px, 8vw, 112px);   /* ヘッダーの高さ */
  --hlogo-h: clamp(20px, 3.5vw, 50px);   /* ロゴは「高さ」で揃える */
  --btn-size: 48px;                      /* ハンバーガーの正方形サイズ */
  --btn-right: clamp(16px, 2.8vw, 40px); /* ハンバーガーの右余白 */
  /* メニュー内リンクの上下パディング（＝文字とクリック領域の余白） */
  --nav-pad-v: clamp(10px, 1.8vh, 18px);
  /* サイト内リンクと外部リンクの間に開ける余白 */
  --nav-gap: clamp(16px, 3vh, 32px);
}
@media (max-width: 1023px) {
  :root {
    --btn-size: 44px;
  }
}
/* PC：ハンバーガーの位置は index.html（top.css）の指定に全ページで揃える。
   - ヘッダー高さはロゴ40px＋上下12pxずつの64px固定
   - 右余白は上余白（(header-h − btn-size) / 2）と同じ値にして上下＝左右を揃える
     ＋2px はスクロールバーとの重なり回避のための逃げ
   これを header.css 側に置くことで、top.css を読まない
   look.html / items.html でもアイコン位置が index.html と一致する。 */
@media (min-width: 1024px) {
  :root {
    --header-h: 64px;
    --btn-right: calc((var(--header-h) - var(--btn-size)) / 2 + 2px);
  }
}

html {
  scroll-behavior: smooth; /* メニューからのアンカー移動を滑らかに */
}

/* アンカー着地時の上余白（20px）。
   header.js でも同じ値（ANCHOR_OFFSET）で着地位置を補正しているが、
   Safariはページ読み込みの前後でブラウザ自身がアンカーへ飛び直すことがあり、
   そのタイミングではJSの補正が効かず、見出しが画面上端にぴったり
   付いてしまう。CSS側にも余白を持たせておけば、ブラウザ任せの着地でも
   同じ見た目になる（Chrome等では従来どおりJSの補正が効くだけで無害）。
   ※値を変えるときは header.js の ANCHOR_OFFSET も揃えて変えること */
section[id] {
  scroll-margin-top: 20px;
}

/* ---------- ヘッダー（通常フロー：スクロールで一緒に流れる） ---------- */
.site-header {
  position: relative;
  height: var(--header-h);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 右側のハンバーガーと重ならないための逃げ */
  padding-inline: calc(var(--btn-right) + var(--btn-size));
}
.site-header__logos {
  display: flex;
  align-items: center; /* 2つのロゴを高さ基準で揃えて中央配置 */
  gap: clamp(14px, 2.4vw, 34px);
}
.site-header__logos img {
  height: var(--hlogo-h);
  width: auto;
  display: block;
}

/* ---------- ハンバーガーボタン（常時固定） ---------- */
.menu-btn {
  position: fixed;
  top: calc((var(--header-h) - var(--btn-size)) / 2);
  right: var(--btn-right);
  z-index: 950; /* メニューオーバーレイ(940)より上／モーダル(1000)より下 */
  width: var(--btn-size);
  height: var(--btn-size);
  padding: 0;
  border: none;
  background: #fff; /* 背景は白・余白多めの正方形 */
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.menu-btn svg {
  width: 24px;
  height: 24px;
  display: block;
  overflow: visible;
}
.menu-btn line {
  stroke: var(--ink, #231815);
  stroke-width: 0.8;
  stroke-linecap: round;
  transform-box: fill-box;
  transform-origin: center;
  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.25s ease;
}
/* 開いたら3本線が×に変形（閉じる時も同じ経路で戻るアニメーション） */
.menu-btn.is-open .menu-btn__l1 {
  transform: translateY(6px) rotate(45deg);
}
.menu-btn.is-open .menu-btn__l2 {
  opacity: 0;
}
.menu-btn.is-open .menu-btn__l3 {
  transform: translateY(-6px) rotate(-45deg);
}

/* ---------- メニューオーバーレイ ---------- */
.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 940;
  background: #fff;
  opacity: 0;
  visibility: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transition:
    opacity 0.4s ease,
    visibility 0s linear 0.4s; /* フェードアウト後に非表示化 */
}
.menu-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.4s ease;
}
.menu-overlay__inner {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start; /* 上詰め */
  text-align: center;
  padding: calc(var(--btn-size) + clamp(20px, 4vh, 44px)) var(--side-sp, 20px) 48px;
}
.menu-overlay__logo {
  display: block;
  width: min(78%, 648px);
  height: auto;
}

/* ナビ：文字サイズは .section__lead と同じ clamp(15px, 1.25vw, 18px) */
.menu-overlay__nav {
  margin-top: clamp(32px, 6vh, 64px);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* PC：外部リンクを足して項目が増えたぶん、上側の余白を少し詰めて
   メニュー全体を上に寄せる（ロゴ上とロゴ〜ナビの2か所を縮める）。
   SPは元のままなので、この指定はPC幅のときだけ効く。 */
@media (min-width: 1024px) {
  .menu-overlay__inner {
    padding-top: calc(var(--btn-size) + clamp(12px, 2vh, 24px));
  }
  .menu-overlay__nav {
    margin-top: clamp(20px, 3.4vh, 36px);
  }
}
.menu-overlay__nav a {
  display: block;
  padding: var(--nav-pad-v) 16px;
  font-size: clamp(15px, 1.25vw, 18px);
  letter-spacing: 0.15em;
  line-height: 1.6;
  color: var(--ink, #231815);
  transition: opacity 0.3s ease;
}
.menu-overlay__nav a:hover {
  opacity: 0.5;
}
/* 外部サイトへの導線（オフィシャルサイト／店舗一覧）は、
   サイト内リンクとの区切りが分かるよう少し上に余白を開ける */
.menu-overlay__nav a.menu-overlay__nav-gap {
  margin-top: var(--nav-gap);
}
/* SPは1行に収まらず文字が落ちてしまうため、
   「ビューティー＆ユース」と「オフィシャルサイト」を2行に分けて表示する。
   （PCは1行のまま。brの出し入れではなくspanのblock化で確実に切り替える） */
@media (max-width: 1023px) {
  .menu-overlay__nav a .menu-overlay__nav-line {
    display: block;
  }
}

/* SNS（footerと同じアイコン） */
.menu-overlay__sns {
  /* 「店舗一覧」との見た目の余白を、
     「スタッフスタイリング」と外部リンクの間の余白とぴったり揃える。
     リンク側は上下にパディング（--nav-pad-v）を持つため、
     こちらは その1枚分＋--nav-gap を足した値にする。
     さらに +5px は、文字の行間（line-height 1.6）で文字の上下に生まれる
     すき間のぶん。アイコンにはこのすき間が無いため、その差を補って
     見た目の白い部分の高さがぴったり同じになるようにしている。 */
  margin-top: calc(var(--nav-pad-v) + var(--nav-gap) + 5px);
  display: flex;
  justify-content: center;
  gap: 24px;
}
.menu-overlay__sns a {
  display: inline-flex;
  transition: opacity 0.3s ease;
}
.menu-overlay__sns a:hover {
  opacity: 0.6;
}
.menu-overlay__sns img {
  width: 30px;
  height: 30px;
  display: block;
}

/* メニュー展開中は背面のスクロールを止める */
html.menu-lock,
body.menu-lock {
  overflow: hidden;
}

/* 開いた時に中身がふわっと上がる控えめな演出 */
.menu-overlay__logo,
.menu-overlay__nav,
.menu-overlay__sns {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.45s ease,
    transform 0.45s ease;
}
.menu-overlay.is-open .menu-overlay__logo,
.menu-overlay.is-open .menu-overlay__nav,
.menu-overlay.is-open .menu-overlay__sns {
  opacity: 1;
  transform: none;
}
.menu-overlay.is-open .menu-overlay__nav {
  transition-delay: 0.08s;
}
.menu-overlay.is-open .menu-overlay__sns {
  transition-delay: 0.16s;
}

/* =========================================================
   Hero（MVパネル）をファーストビュー内に収める
   - style.css では PC の .hero / .tile-grid が 100vh 基準のため、
     ヘッダーの高さぶんパネル下部が見切れてしまう。
   - ここで「100vh − ヘッダー高さ」に上書きして、
     ヘッダー＋パネルがちょうど1画面に収まるようにする。
   ========================================================= */
@media (min-width: 1024px) {
  .hero {
    height: calc(100vh - var(--header-h));
  }
  .tile-grid {
    height: calc(100vh - var(--header-h));
    /* タイル1辺 = (パネル高さ − 隙間2本) ÷ 3行。それを7列＋隙間6本ぶん並べた幅 */
    width: calc((100vh - var(--header-h) - var(--gap) * 2) / 3 * 7 + var(--gap) * 6);
  }
}