@charset "UTF-8";
/* =========================================================
   index.html（トップページ）専用スタイル
   - デザイン：サイトデザイン_260729_2（Figma BY20thデザイン node 670-310）
   - SPデザイン優先（レスポンシブ想定でPCは破綻しない程度に対応）
   - 前提：style.css（ベース）／modal.css（モーダル）／header.css（ヘッダー）
     の後に読み込むこと
   ========================================================= */

/* ---------- ヘッダー上書き（index-a流用：ロゴ左寄せ・高さ40px） ---------- */
.site-header {
  justify-content: flex-start; /* ロゴを左寄せに */
  padding-inline: var(--side-sp, 20px) calc(var(--btn-right) + var(--btn-size));
}
.site-header__logos img {
  height: 40px; /* ロゴは「高さ」で揃える（指示：40px） */
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
}

/* PC：ハンバーガーの右余白を「上の余白」と同じにする。
   上の余白はヘッダー高とボタンサイズの差の半分
   （(header-h - btn-size) / 2）で自動計算されているため、
   右にも同じ式を使えば、画面幅が変わっても常に上下＝左右が揃う。
   ＋2px はスクロールバーとの重なり回避のための逃げ。 */
@media (min-width: 1024px) {
  :root {
    --btn-right: calc((var(--header-h) - var(--btn-size)) / 2 + 2px);
  }
}

/* =========================================================
   Movie（mp4自動再生）
   ========================================================= */
.movie-hero {
  position: relative; /* 音声ON/OFFボタン（右下）の配置基準 */
  width: 100%;
  background: #0d0d0d; /* 動画1フレーム目が暗色のため、読み込み中の白飛びを防ぐ */
}
.movie-hero img,
.movie-hero video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9; /* 支給動画の実寸比 1920x1080。トリミングを避けるため16:9に統一 */
  object-fit: cover;
}
.movie-hero video {
  cursor: pointer; /* 動画本体のタップ/クリックでも音声ON/OFFが切り替わる */
}

/* ---------- 音声ON/OFFボタン（右下の丸ボタン） ----------
   動画はブラウザの制約でミュート自動再生が必須のため、
   ユーザーのタップをきっかけに音声をONにする。
   状態は .movie-hero の is-unmuted クラスで表現し、
   OFF中＝スピーカー＋×／ON中＝スピーカー＋波 のアイコンを出し分ける */
.movie-sound-btn {
  position: absolute;
  right: clamp(10px, 2.6vw, 20px);
  bottom: clamp(10px, 2.6vw, 20px);
  width: clamp(36px, 9.6vw, 44px);
  height: clamp(36px, 9.6vw, 44px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(13, 13, 13, 0.55); /* 動画の上でも見えるよう半透明の暗色 */
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.3s ease;
}
.movie-sound-btn:hover {
  opacity: 0.7;
}
/* キーボード操作時のフォーカスリング（panelのfocus-visibleと同じ考え方。
   ボタンが暗色のため、リングは外側に離して描く） */
.movie-sound-btn:focus-visible {
  outline: 3px solid var(--accent, #e60012);
  outline-offset: 2px;
}
.movie-sound-btn__icon {
  width: 58%;
  height: 58%;
  display: block;
}
/* OFF中はミュートアイコンのみ、ON中は音ありアイコンのみ表示 */
.movie-sound-btn__icon--on {
  display: none;
}
.movie-hero.is-unmuted .movie-sound-btn__icon--off {
  display: none;
}
.movie-hero.is-unmuted .movie-sound-btn__icon--on {
  display: block;
}

/* =========================================================
   Message（BEAUTY&YOUTHは 20周年／これからももっと）
   ========================================================= */
.lead-message {
  padding: clamp(28px, 6vw, 56px) var(--side-sp, 20px);
  font-size: clamp(13px, 3.4vw, 16px);
  line-height: 2.1;
  letter-spacing: 0.12em;
  text-align: left;
}
@media (min-width: 1024px) {
  .lead-message {
    font-size: 16px;
    padding-inline: var(--side-pc, 80px);
  }
}

/* =========================================================
   パネル自動くるりん切り替え（ua-panel-auto.html 流用）
   look / items / photo / inme 共通
   ========================================================= */
.panel-section {
  margin-top: clamp(48px, 10vw, 96px);
}
/* Messageの直後（look）はMessage側の下パディングのみとし、余白を詰める */
.lead-message + .panel-section {
  margin-top: 0;
}
/* inmeは上下に他セクションより広めの余白を取る
   （下側は次セクションのmargin-topと相殺され、大きい方＝この値が効く） */
#inme.panel-section {
  margin-block: clamp(88px, 18vw, 176px);
}

/* セクション見出し（items / inme の左寄せテキスト） */
.panel-heading {
  padding-inline: var(--side-sp, 20px);
  margin-bottom: clamp(14px, 3vw, 24px);
  font-size: clamp(13px, 3.4vw, 16px);
  letter-spacing: 0.12em;
  line-height: 1.8;
  text-align: left;
}
@media (min-width: 1024px) {
  .panel-heading {
    padding-inline: var(--side-pc, 80px);
    font-size: 16px;
  }
}

/* ---------- ステージ（右端sticky縦ロゴの基準） ---------- */
.panel-stage {
  position: relative;
  width: 100%;
  --logo-len: min(60vh, 400px); /* 縦ロゴの長さ上限 */
  --logo-margin: 14px;          /* セクション上下端からの最低余白 */
}
.panel-stage__logo-track {
  position: absolute;
  inset: 0;
  pointer-events: none; /* パネルのタップを邪魔しない */
  z-index: 10;
}
.panel-stage__logo {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  height: min(100dvh, 100%);
  display: flex;
  justify-content: flex-end; /* 右端へ */
  align-items: center;
  padding-right: 10px;
}
.panel-stage__logo img {
  display: block;
  height: min(var(--logo-len), calc(100% - var(--logo-margin) * 2));
  width: auto;
}

/* ---------- ページ（セットを同じマスに重ねて切り替え） ---------- */
.panel-pages {
  display: grid; /* 全セットを同じマスに重ねる */
  width: 100%;
}
.panel-page {
  grid-area: 1 / 1; /* 全セット重ね置き */
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* SP基本：2列（×3行＝6枚） */
  gap: var(--gap, 1.5px);
  visibility: hidden;
}
.panel-page.is-active {
  visibility: visible;
}
/* ふわっと出現の「直前〜最中」だけ、パネルをGPU描画レイヤーへ
   載せておく予約（will-change）を行う。will-spin は top.js が
   アニメ開始直前に付け、終了後に外す。
   ※以前は表示中ページ全部に常時予約していたが、合成レイヤーが
   　20枚以上残り続けてページ全体のスクロールが重くなるため、
   　必要な時間だけに限定した */
.panel-page.will-spin .panel {
  will-change: transform, opacity;
}
/* photo：2列×2行＝4枚 */
.panel-pages--photo .panel-page {
  grid-template-columns: repeat(2, 1fr);
}
/* inme：SPは3列×2行、PCは横一列6枚（横幅いっぱい） */
.panel-pages--inme .panel-page {
  grid-template-columns: repeat(3, 1fr);
}
@media (min-width: 1024px) {
  /* PC暫定：look / items は3列×2行（SPデザイン優先のため簡易対応） */
  .panel-pages--cols6 .panel-page {
    grid-template-columns: repeat(3, 1fr);
  }
  .panel-pages--inme .panel-page {
    grid-template-columns: repeat(6, 1fr);
  }
}

/* ---------- パネル1枚 ---------- */
.panel {
  position: relative;
  aspect-ratio: 1 / 1; /* 素材はすべて900×900の正方形 */
  overflow: hidden;
  background: #eee;
  border: none;
  padding: 0;
  width: 100%;
  display: block;
}
.panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
button.panel,
a.panel {
  cursor: pointer;
}
a.panel {
  text-decoration: none;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}
button.panel:focus-visible,
a.panel:focus-visible {
  outline: 3px solid var(--accent, #e60012);
  outline-offset: -3px;
}

/* ---------- ふわっと出現（hero_prototype_patterns パターンA採用）
     フェード＋浮き上がり＋ブラー解除で、遅延（--d）の順番どおりに
     1枚ずつやわらかく現れる ---------- */
.panel-page.spin-in .panel {
  animation-name: panelFadeUp;
  animation-duration: 0.9s;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  animation-fill-mode: backwards; /* 遅延中は透明で待機 */
  animation-delay: var(--d, 0s);
}
@keyframes panelFadeUp {
  0% {
    opacity: 0;
    transform: scale(0.9) translateY(18px);
    filter: blur(6px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
    filter: blur(0);
  }
}

/* ---------- パネル下のテキスト＋SEE MORE ---------- */
.panel-caption {
  margin-top: clamp(24px, 5vw, 40px);
  text-align: center;
  font-size: clamp(13px, 3.4vw, 16px);
  letter-spacing: 0.12em;
  line-height: 1.8;
  padding-inline: var(--side-sp, 20px);
}
@media (min-width: 1024px) {
  .panel-caption {
    font-size: 16px;
  }
}
.panel-seemore {
  display: flex;
  justify-content: center;
  margin-top: clamp(10px, 2.2vw, 16px); /* キャプションとの間隔を詰める（旧:14〜22px） */
}
/* SEE MOREボタン。
   以前は枠線ごと1枚のSVG（122x27）だったが、枠線が原寸0.5px相当と細く
   縮小時に潰れてかすれるため、枠だけCSSのborderで描き、中身は
   テキストのseemore.svg（64x10）と矢印のarrow.svg（13x7）を並べている。
   ── 旧SVGの実測値（枠の外寸 121.41 x 26.18）を基準に比率を移植 ──
     枠の角丸 6.25 / 枠線 0.5 / 左余白 7.5 / 文字〜矢印の間 28 / 右余白 7.91
   すべて枠の高さ --h に対する比率で指定しているので、SPでも形が崩れない。 */
.panel-seemore__btn {
  --h: clamp(27px, 7.37vw, 33px); /* 枠の高さ（旧SVG 34px時の枠＝約33px） */
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  height: var(--h);
  /* 左余白は旧SVG比（0.2865）から広げて 0.60 に。
     枠の幅は変えずに中身の比率だけ変えたいので、
     広げた分（0.60 - 0.2865 = 0.3135）を gap から引いている。 */
  padding-left: calc(var(--h) * 0.6);
  padding-right: calc(var(--h) * 0.3022);
  gap: calc(var(--h) * 0.756);
  border: 1px solid #e60012;
  border-radius: calc(var(--h) * 0.2387);
  transition: opacity 0.3s ease;
}
.panel-seemore__text,
.panel-seemore__arrow {
  display: block;
  width: auto;
}
.panel-seemore__text {
  height: calc(var(--h) * 0.382);
}
.panel-seemore__arrow {
  height: calc(var(--h) * 0.2674);
}
@media (min-width: 1024px) {
  .panel-seemore__btn {
    --h: 33px;
  }
}
.panel-seemore:hover .panel-seemore__btn {
  opacity: 0.6;
}

/* =========================================================
   Photo下のメッセージ（5行）
   ========================================================= */
.photo-message {
  margin-top: clamp(32px, 7vw, 64px);
  padding-inline: var(--side-sp, 20px);
  font-size: clamp(13px, 3.4vw, 16px);
  line-height: 3;
  letter-spacing: 0.12em;
  text-align: left;
}
.photo-message span {
  display: block;
}
@media (min-width: 1024px) {
  .photo-message {
    padding-inline: var(--side-pc, 80px);
    font-size: 16px;
  }
}

/* =========================================================
   Footer 調整（share.svgの縦サイズ13px）
   ========================================================= */
.footer__title {
  height: 13px;
  width: auto;
}
/* 並び順：シンボルロゴ → SHARE MORE（share.svg）→ SNSアイコン → コピーライト */
.footer__symbol {
  margin: 0 auto; /* 先頭要素のためfooterの上パディングに任せる */
}
.footer .footer__title {
  margin-top: clamp(40px, 7vw, 64px);
}
.footer .sns {
  margin-top: clamp(18px, 3.5vw, 28px); /* シェア画像とアイコンは近めに */
}

/* =========================================================
   PC調整
   ========================================================= */
@media (min-width: 1024px) {
  /* ---------- ヘッダー：ロゴ（40px）に合わせて短く ---------- */
  :root {
    --header-h: 64px; /* ロゴ40px＋上下12pxずつ。ハンバーガー位置もこの変数に追従 */
  }

  /* ---------- photo：PCは4枚を横一列（1行）で表示 ---------- */
  .panel-pages--photo .panel-page {
    grid-template-columns: repeat(4, 1fr);
  }

  /* ---------- ふわっと出現を軽量版（blurなし）に差し替え、
       スクロール中のカクつきを抑える ---------- */
  .panel-page.spin-in .panel {
    animation-name: panelFadeUpPc;
  }
}
/* PC用：blurを外した軽量版ふわっ（フェード＋浮き上がりは維持） */
@keyframes panelFadeUpPc {
  0% {
    opacity: 0;
    transform: scale(0.9) translateY(18px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* ---------- 視差効果を減らす設定への配慮 ---------- */
@media (prefers-reduced-motion: reduce) {
  .panel-page.spin-in .panel {
    animation: none;
  }
}