@charset "UTF-8";
/* =========================================================
   BEAUTY&YOUTH 20th "& MORE" LP
   デザインルール仕様書 + Figma に基づくスタイル
   カラー: 黒 #231815 / アクセント赤 #e60012
   ========================================================= */
:root {
  --accent: #e60012;
  --ink: #231815;
  --gap: 1.5px; /* タイル/リストの余白（Figma準拠） */
  --content-max: 1280px; /* コンテンツ最大幅（PC） */
  --side-pc: 80px; /* 左右マージン PC */
  --side-sp: 20px; /* 左右マージン SP */
  --section-gap: clamp(72px, 12vw, 192px); /* セクション間の余白 */
  --title-h: 28px; /* Section-Title 画像の固定高さ（PC） */
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden; /* 横スクロール防止（※bodyには掛けないこと。下のbodyのコメント参照） */
}
body {
  font-family:
    "Yu Gothic Medium", "游ゴシック Medium", "YuGothic", "游ゴシック",
    "Yu Gothic", "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    "Helvetica Neue", Arial, "Noto Sans JP", sans-serif;
  color: var(--ink);
  background: #fff;
  font-size: 16px; /* PCベース。Yu Gothicは字面が小さめのため14→16pxに調整 */
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
  /* 横スクロール防止はhtml側の overflow-x: hidden だけに任せる。
     以前はbodyにも overflow-x: hidden と max-width: 100vw を掛けていたが、
     htmlとbodyの両方に非表示のoverflowを指定すると、ブラウザが
     「スクロール容器が二重にある」と解釈してしまう。Chromeはホイール操作を
     最初にどちらか一方の容器へ割り当てる（ラッチする）仕様のため、
     ページ最上部での1回目のホイールが空の容器に取られて空振りし、
     「2回スクロールしないと動かない」症状の原因になっていた */
}
img {
  border: 0;
}
a {
  color: inherit;
  text-decoration: none;
}

/* 中央寄せコンテナ（左右マージンで最大1280pxに収める） */
.container {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--side-pc);
}

/* =========================================================
   Hero / MainVisual （hero_prototype.html をそのまま採用）
   ========================================================= */
.hero {
  position: relative;
  width: 100%;
  background: #fff;
  overflow: hidden;
}
.tile-grid {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
}
.tile {
  position: relative;
  aspect-ratio: 1/1;
  overflow: hidden;
  opacity: 0;
  transform: scale(0.9) translateY(18px);
  filter: blur(6px);
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.tile.is-visible {
  opacity: 1;
  transform: scale(1) translateY(0);
  filter: blur(0);
}
.tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tile-logo {
  background: #fff;
}
.tile-logo img {
  object-fit: contain;
  transform: scale(1.3);
}

@media (min-width: 1024px) {
  .hero {
    height: 100vh;
    overflow: hidden;
  }
  .tile-grid {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: repeat(3, 1fr);
    height: 100vh;
    width: calc((100vh - var(--gap) * 2) / 3 * 7 + var(--gap) * 6);
  }
  .tile:nth-child(21) {
    display: block;
  }
  .tile {
    aspect-ratio: auto;
    transition: none;
    animation-name: tileFadeUp;
    animation-duration: 0.9s;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    animation-fill-mode: forwards;
    animation-delay: var(--d, 0s);
  }
}
@keyframes tileFadeUp {
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
    filter: blur(0);
  }
}

/* スクロールヒント（PCのみ表示） */
.scroll-hint {
  position: absolute;
  right: 28px;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #fff;
  opacity: 0;
  animation: hintFade 1s ease-out 2.6s forwards;
}
.scroll-hint .label {
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-size: 13px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
.scroll-hint .track {
  position: relative;
  width: 1px;
  height: 90px;
  margin-top: 14px;
  background: rgba(255, 255, 255, 0.35);
  overflow: hidden;
}
.scroll-hint .track:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  animation: sdl01 1.6s cubic-bezier(1, 0, 0, 1) infinite;
  animation-delay: 2.6s;
}
@media (max-width: 1023px) {
  .scroll-hint {
    display: none;
  }
}
@keyframes hintFade {
  to {
    opacity: 0.9;
  }
}
@keyframes sdl01 {
  0% {
    transform: scaleY(0);
    transform-origin: 0 0;
  }
  50% {
    transform: scaleY(1);
    transform-origin: 0 0;
  }
  50.1% {
    transform: scaleY(1);
    transform-origin: 0 100%;
  }
  100% {
    transform: scaleY(0);
    transform-origin: 0 100%;
  }
}

/* =========================================================
   Message
   ========================================================= */
.message {
  text-align: center;
  padding-top: clamp(16px, 2vw, 32px);
  padding-bottom: clamp(56px, 9vw, 120px);
  padding-inline: var(--side-sp);
}
.message__logo {
  display: block;
  margin: 0 auto;
  width: min(62.5%, 900px);
  height: auto;
}
@media (max-width: 1023px) {
  .message__logo {
    width: 100%;
  }
}
.message__text {
  margin-top: clamp(12px, 1.5vw, 24px);
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 2.6;
  letter-spacing: 0.04em;
}
.message__text span {
  display: block;
}

/* =========================================================
   共通セクション見出し
   ========================================================= */
.section {
  margin-top: var(--section-gap);
}
.section__head {
  text-align: center;
}
.section-title {
  display: block;
  height: var(--title-h);
  width: auto;
  margin: 0 auto;
}
.section__lead {
  margin-top: 16px;
  font-size: clamp(15px, 1.25vw, 18px); /* メッセージ文(.message__text)と同じサイズに統一 */
  line-height: 1.9;
  letter-spacing: 0.03em;
  padding-inline: var(--side-sp);
}

/* =========================================================
   Movie
   ========================================================= */
.movie__embed {
  margin: clamp(20px, 2.5vw, 32px) auto 0;
  width: min(100%, 628px);
  aspect-ratio: 628/417;
  background: #111;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.movie__embed iframe,
.movie__embed video {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.movie__placeholder {
  color: #fff;
  font-size: 13px;
  letter-spacing: 0.25em;
  opacity: 0.7;
  text-transform: uppercase;
}

/* =========================================================
   リスト（Items / Look / InMe）横幅いっぱい・比率保持
   ========================================================= */
.tile-list {
  margin-top: clamp(20px, 2.5vw, 32px);
  width: 100%;
  display: grid;
  gap: var(--gap);
}
.tile-list img {
  width: 100%;
  height: 100%;
  object-fit: cover;        /* 比率を保ったまま正方形いっぱいに表示 */
  display: block;
}
.tile-list__item {
  aspect-ratio: 1 / 1;      /* パネルを正方形に固定 */
  overflow: hidden;
  cursor: pointer;
}
.tile-list__item img {
  transition: transform 0.5s ease;
}
.tile-list__item:hover img {
  transform: scale(1.04);
}

/* =========================================================
   Items サムネイルスライダー
   - 24個のサムネイルを、PCは12個ずつ(6×2)＝2スライド、
     SPは6個ずつ(3×2)＝4スライドで切り替える。
   - スライドへの分割・◯ドット生成・スワイプはassets/js/main.jsが担当していた（現在は未使用）。
   - ここではスライド1枚分のグリッドと、横スライドの見た目を定義する。
   ========================================================= */
.items-slider {
  position: relative;             /* 左右クリックゾーンの基準 */
  margin-top: clamp(20px, 2.5vw, 32px);
  width: 100%;
  overflow: hidden;               /* はみ出したスライドを隠す（クリップ窓） */
}
/* 左半分＝前へ／右半分＝次へ の透明なクリックゾーン（lookモーダルと同じ操作感）。
   サムネイルの上に重ねるため position:absolute。 */
.items-nav {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  z-index: 1;
}
.items-nav--prev { left: 0; }
.items-nav--next { right: 0; }
.items-track {
  display: flex;                  /* スライドを横一列に並べる */
  width: 100%;
  transition: transform 0.45s ease; /* スライド切り替えのスルッとした動き */
  will-change: transform;
}
/* スライド1枚＝クリップ窓の横幅いっぱい。中はサムネイルのグリッド。 */
.items-slide {
  flex: 0 0 100%;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(6, 1fr); /* PC：6列（×2行＝12個） */
  gap: var(--gap);
}
.items-slide .tile-list__item {
  aspect-ratio: 1 / 1;      /* パネルを正方形に固定 */
  overflow: hidden;
}
.items-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;        /* 比率を保ったまま正方形いっぱいに表示 */
  display: block;
}
/* Itemsのサムネイルはモーダル廃止によりクリック無効。
   クリックできる見た目（ポインタ・hover拡大）も外す */
.items-slide .tile-list__item {
  cursor: default;
}
.items-slide .tile-list__item:hover img {
  transform: none;
}

/* スライドの現在位置を示す◯ドット（lookモーダルと同じ見た目） */
.items-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding-top: clamp(16px, 2vw, 20px);
}
.items-dot {
  width: 6px;
  height: 6px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: background 0.15s ease;
}
.items-dot.is-active {
  background: var(--ink);
}

.look-list,
.staff-list {
  grid-template-columns: repeat(6, 1fr);
}

@media (max-width: 1023px) {
  .items-slide {
    grid-template-columns: repeat(3, 1fr); /* SP/タブレット：3列（×2行＝6個） */
  }
  .look-list,
  .staff-list {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 600px) {
  .items-slide {
    grid-template-columns: repeat(3, 1fr); /* SP：3列（×2行＝6個） */
  }
  .look-list,
  .staff-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* See More */
.seemore {
  display: flex;
  justify-content: center;
  margin-top: clamp(28px, 3.5vw, 40px);
}
.seemore img {
  height: 13px;
  width: auto;
  display: block;
  transition: opacity 0.3s ease;
}
.seemore:hover img {
  opacity: 0.6;
}

/* =========================================================
   Footer
   ========================================================= */
.footer {
  margin-top: var(--section-gap);
  padding-block: clamp(40px, 6vw, 80px) clamp(32px, 4vw, 56px);
  text-align: center;
}
.footer__title {
  display: block;
  height: var(--title-h);
  width: auto;
  margin: 0 auto;
}
.sns {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-top: 28px;
}
.sns a {
  display: inline-flex;
  transition: opacity 0.3s ease;
}
.sns a:hover {
  opacity: 0.6;
}
.sns img {
  width: 38px;
  height: 38px;
  display: block;
}
.footer__symbol {
  display: block;
  margin: clamp(48px, 7vw, 72px) auto 0;
  width: auto;
  height: clamp(172px, 22vw, 240px);
}
.footer__copy {
  margin-top: clamp(40px, 6vw, 72px);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--accent);
  line-height: 2;
  white-space: nowrap;
}
.footer__copy a {
  margin: 0 0.6em;
}
.footer__copy a:hover {
  opacity: 0.7;
}
.footer__copy .rights {
  display: inline;
  margin-left: 0.6em;
}

/* 画面下部までのフェードイン（Hero以外） */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.8s ease-out,
    transform 0.8s ease-out;
}
.reveal.is-in {
  opacity: 1;
  transform: none;
}

/* SP微調整 */
@media (max-width: 1023px) {
  :root {
    --title-h: 20px;
    --side-pc: 20px;
  }
  body {
    font-size: 12px;
  }
  .footer__title,
  .section-title {
    height: var(--title-h);
    width: auto;
    max-width: calc(100% - var(--side-sp) * 2);
    object-fit: contain;
    object-position: center;
  }
  .footer__copy {
    white-space: normal;
  }
  .footer__copy .rights {
    display: block;
    margin-left: 0;
    margin-top: 4px;
  }
}