@charset "UTF-8";

/* ==============================
   p-top-hero
   TOP：全画面ファーストビュー
   ============================== */
.p-top-hero {
  position: relative;
  height: 100svh;
  min-height: 560px;
  max-height: 900px;
  overflow: hidden;
  background: var(--color-bg-dark);
  color: #fff;
}
.p-top-hero__bg { position: absolute; inset: -5%; width: 110%; max-width: none; height: 110%; object-fit: cover; animation: top-kenburns 24s ease-in-out infinite alternate; }
.p-top-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(24, 18, 15, .3) 0%, rgba(24, 18, 15, .08) 38%, rgba(24, 18, 15, .38) 100%);
}
.p-top-hero__inner {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 var(--gutter);
  text-align: center;
}
.p-top-hero__en {
  font: 500 11.5px var(--font-en);
  letter-spacing: .42em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .8);
  animation: fade-up 1s ease .25s both;
}
.p-top-hero__catch {
  margin-top: 22px;
  font: 600 40px/1.3 var(--font-mincho);
  letter-spacing: .14em;
  text-shadow: 0 2px 30px rgba(20, 14, 11, .45);
}
/* 1文字ずつ表示。遅延は style="--i:番号" で指定 */
.p-top-hero__char {
  display: inline-block;
  animation: top-brush 1.05s cubic-bezier(.3, .75, .2, 1) both;
  animation-delay: calc(.35s + var(--i) * .13s);
}
.p-top-hero__line {
  display: block;
  width: 70px; height: 1px;
  margin-top: 30px;
  background: rgba(255, 255, 255, .6);
  animation: top-line 1.1s var(--ease) 1.7s both;
}
.p-top-hero__lead {
  margin-top: 24px;
  font: 400 13.5px/2.1 var(--font-mincho);
  letter-spacing: .12em;
  animation: fade-up 1.1s ease 1.85s both;
}
.p-top-hero__scroll {
  position: absolute;
  left: 50%; bottom: 24px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  transform: translateX(-50%);
  font: 500 10px var(--font-en);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .78);
  animation: fade-up 1.2s ease 2.1s both;
}
.p-top-hero__scroll::after { content: ""; width: 1px; height: 46px; background: linear-gradient(rgba(255, 255, 255, .85), rgba(255, 255, 255, 0)); }
@media (min-width: 768px) {
  .p-top-hero__catch { font-size: 64px; letter-spacing: .16em; }
  .p-top-hero__lead { font-size: 15px; letter-spacing: .14em; }
}
@media (min-width: 1024px) {
  .p-top-hero__catch { margin-top: 26px; font-size: 90px; }
  .p-top-hero__line { margin-top: 36px; }
  .p-top-hero__lead { margin-top: 28px; }
}
@keyframes top-kenburns { from { transform: scale(1.02); } to { transform: scale(1.14); } }
@keyframes top-brush {
  from { clip-path: inset(0 100% -18% 0); opacity: 0; filter: blur(3px); }
  60%  { opacity: 1; }
  to   { clip-path: inset(0 -8% -18% 0); opacity: 1; filter: blur(0); }
}
@keyframes top-line { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ==============================
   p-top-concept
   TOP：コンセプト（文章＋写真2枚）
   ============================== */
.p-top-concept__inner { display: grid; gap: 56px; align-items: center; }
.p-top-concept__text { position: relative; }
.p-top-concept__stars { position: absolute; top: -50px; right: -10px; width: 220px; pointer-events: none; }
.p-top-concept__stars path:nth-child(odd) { animation: top-twinkle 5s ease-in-out infinite; }
.p-top-concept__title { position: relative; font: 700 24px/1.75 var(--font-mincho); letter-spacing: .05em; }
.p-top-concept__title::after { content: ""; display: block; width: 56px; height: 2px; margin: 24px 0; background: var(--color-accent); }
.p-top-concept__body { font: 400 15px/2.05 var(--font-mincho); color: var(--color-text-sub); }
.p-top-concept__photos { position: relative; margin: 0 0 30px 30px; }
.p-top-concept__main { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--color-bg-alt); }
.p-top-concept__sub {
  position: absolute;
  left: -30px; bottom: -30px;
  width: 40%;
  aspect-ratio: 19 / 23;
  object-fit: cover;
  border: 6px solid var(--color-bg);
  background: var(--color-bg-alt);
}
@media (min-width: 768px) {
  .p-top-concept__title { font-size: 34px; }
  .p-top-concept__body { font-size: 18px; }
  .p-top-concept__stars { width: 300px; top: -58px; }
}
@media (min-width: 1024px) {
  .p-top-concept__inner { grid-template-columns: 1.05fr 1fr; }
  .p-top-concept__main { aspect-ratio: auto; height: 520px; }
  .p-top-concept__sub { width: 190px; }
}
@keyframes top-twinkle { 0%, 100% { opacity: .8; } 50% { opacity: .35; } }

/* ==============================
   p-top-gallery
   TOP：レンタル衣裳ギャラリー
   ============================== */
.p-top-gallery__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.p-top-gallery__item { aspect-ratio: 3 / 4; overflow: hidden; background: var(--color-bg-alt); }
.p-top-gallery__item img { width: 100%; height: 100%; object-fit: cover; }
.p-top-gallery__item--large { grid-column: span 2; aspect-ratio: 1; }
.p-top-gallery__more {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 3 / 4;
  border: 1px solid var(--color-line);
  background: var(--color-bg-alt);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: .06em;
  text-align: center;
}
@media (min-width: 1024px) {
  .p-top-gallery__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: 283px 283px; gap: 14px; }
  .p-top-gallery__item, .p-top-gallery__more { aspect-ratio: auto; }
  .p-top-gallery__item--large { grid-row: span 2; }
}