@charset "UTF-8";

:root {
  --bg: #f4f1ed;
  --text: #272422;
  --white: #fff;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; }
img {
  display: block;
  width: 100%;
  height: auto;
}

.site-main { overflow: clip; }

.frame {
  position: relative;
  width: 100%;
  background: #191614;
  overflow: hidden;
}

/* 写真のスクロール演出：トリミングせず、薄いヴェールとぼかしだけで静かに現す */
.frame > img {
  position: relative;
  z-index: 0;
  opacity: .72;
  filter: blur(5px) saturate(.92);
  transition:
    opacity 1.45s var(--ease),
    filter 1.65s var(--ease);
  will-change: opacity, filter;
}

.frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: rgba(244, 241, 237, .34);
  transform: scaleY(1);
  transform-origin: top;
  transition: transform 1.35s var(--ease), opacity 1.35s var(--ease);
  will-change: transform, opacity;
}

.frame.image-is-visible > img {
  opacity: 1;
  filter: blur(0) saturate(1);
}

.frame.image-is-visible::after {
  transform: scaleY(0);
  opacity: 0;
}

/* 文字・メニューはヴェールより前面に置く */
.overlay { z-index: 2; }
.scroll-sign { z-index: 3; }

.frame picture,
.frame picture img {
  display: block;
  width: 100%;
}

.overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: flex;
  padding: clamp(20px, 3vw, 48px);
}

.align-left,
.align-center,
.align-right {
  justify-content: center;
  text-align: center;
}

.pos-hero-center { align-items: center; }
.pos-02 { align-items: center; }
.pos-05 { align-items: flex-start; padding-top: 8.2%; }
.pos-06 { align-items: flex-end; padding-bottom: 10.8%; }
.pos-07 { align-items: flex-end; padding-bottom: 7.6%; }
.pos-08 { align-items: flex-end; padding-bottom: 7.2%; }
.pos-09 { align-items: flex-start; padding-top: 38.5%; }
.pos-10 { align-items: center; }
.pos-11 { align-items: flex-end; padding-bottom: 24%; justify-content: center; text-align: center; }

.hero-copy { color: #000; }
.hero h1 {
  margin: 0;
  font-weight: 300;
  font-size: clamp(2.7rem, 7.3vw, 7rem);
  line-height: 1.08;
  letter-spacing: .16em;
}

/* タイトルは黒。ロゴはタイトルから離して下部へ */
.hero-copy h1 {
  color: #000;
  text-shadow: none;
}

.hero-logo-wrap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 16%;
  z-index: 3;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.hero-logo {
  width: clamp(230px, 24vw, 360px);
  height: auto;
}

.text-stack {
  color: var(--white);
  text-shadow: 0 2px 10px rgba(0, 0, 0, .18), 0 0 18px rgba(0, 0, 0, .18);
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  font-weight: 300;
  letter-spacing: .08em;
  line-height: 2.2;
  line-break: strict;
  word-break: normal;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}
.narrow .text-stack { width: min(84vw, 820px); }
.medium .text-stack { width: min(78vw, 760px); }
.medium-wide .text-stack { width: min(88vw, 980px); }
.small .text-stack { width: min(72vw, 700px); }
.end-copy .text-stack { width: min(52vw, 480px); }

/* 導入文だけ均等配置。各段落の最終行は左揃え */
.pos-02 .lead-copy {
  width: min(76vw, 720px);
  text-align: justify;
  text-align-last: left;
  text-justify: inter-ideograph;
}
.pos-02 .lead-copy p {
  text-align: justify;
  text-align-last: left;
  text-justify: inter-ideograph;
}

.text-stack p,
.visual-heading,
.ending-title,
.ending-sub {
  margin: 0;
}
.text-stack p + p,
.visual-heading + p,
.text-stack p + .visual-heading { margin-top: .95em; }

.text-stack p {
  font-size: clamp(.95rem, .84rem + .55vw, 1.65rem);
}
.visual-heading {
  font-size: clamp(1.25rem, 1rem + 1vw, 2.25rem);
  font-weight: 300;
  line-height: 1.95;
  letter-spacing: .10em;
  text-wrap: balance;
}
.ending-title {
  font-size: clamp(2rem, 1.6rem + 1.4vw, 3.6rem);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: .14em;
}
.ending-sub {
  margin-top: .4em;
  font-size: clamp(1rem, .9rem + .45vw, 1.6rem);
  letter-spacing: .10em;
}

.tone-dark .text-stack,
.tone-light .text-stack,
.end-copy .text-stack { color: #fff; }

.scroll-sign {
  position: absolute;
  left: 50%;
  bottom: clamp(18px, 3.3vw, 42px);
  transform: translateX(-50%);
  color: #fff;
  font: 400 .68rem/1 "Noto Sans JP", sans-serif;
  letter-spacing: .30em;
  opacity: .84;
  pointer-events: none;
}
.scroll-sign::after {
  content: "";
  display: block;
  width: 1px;
  height: 44px;
  margin: 11px auto 0;
  background: rgba(255,255,255,.85);
  transform-origin: top;
  animation: scrollLine 1.8s ease-in-out infinite;
}
@keyframes scrollLine {
  0% { transform: scaleY(0); opacity: 0; }
  35% { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; }
}

.reveal {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  filter: blur(2px);
  transition:
    opacity 1.05s var(--ease) .22s,
    transform 1.15s var(--ease) .22s,
    filter 1.15s var(--ease) .22s;
  will-change: opacity, transform, filter;
}
.reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  filter: blur(0);
}
.reveal.is-visible.reveal-delay-1 { transition-delay: .34s; }
.reveal.is-visible.reveal-delay-2 { transition-delay: .48s; }
.reveal.is-visible.reveal-delay-3 { transition-delay: .62s; }
.reveal.is-visible.reveal-delay-3b { transition-delay: .76s; }
.reveal.is-visible.reveal-delay-3c { transition-delay: .90s; }

/* サイト共通の右下メニューボタン */
.back {
  position: fixed;
  z-index: 50;
  right: 10px;
  bottom: 10px;
}
.back a {
  display: block;
  width: 50px;
  height: 50px;
}
.back img {
  display: block;
  width: 50px;
  height: 50px;
}

@media (max-width: 900px) {
  .small .text-stack,
  .end-copy .text-stack { width: min(54vw, 380px); }
  .text-stack p { font-size: clamp(.88rem, .74rem + .58vw, 1.28rem); }
}

@media (max-width: 767px) {
  .overlay { padding: 18px 20px; }
  .hero h1 { letter-spacing: .10em; }
  .narrow .text-stack,
  .medium .text-stack,
  .medium-wide .text-stack,
  .small .text-stack,
  .end-copy .text-stack { width: min(88vw, 540px); }
  .text-stack {
    line-height: 2.05;
    letter-spacing: .045em;
  }
  .text-stack p {
    font-size: clamp(.84rem, .76rem + .55vw, 1.08rem);
    text-wrap: pretty;
  }
  .visual-heading { font-size: clamp(1.06rem, .92rem + .8vw, 1.42rem); }
  .ending-title { font-size: clamp(1.8rem, 1.45rem + 1.8vw, 2.5rem); }
  .ending-sub { font-size: clamp(.95rem, .88rem + .5vw, 1.2rem); }

  .pos-05 { padding-top: 10.5%; }
  .pos-06 { padding-bottom: 9%; }
  .pos-07 { padding-bottom: 6%; }
  .pos-08 { padding-bottom: 6.5%; }
  .pos-09 { padding-top: 35.5%; }
  .pos-11 { padding-bottom: 22%; }

}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  .reveal {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
  .frame > img {
    opacity: 1;
    filter: none;
    transition: none;
  }
  .frame::after {
    display: none;
  }
}


@media (max-width: 767px) {
  .hero-logo-wrap { bottom: 14%; }
  .hero-logo { width: clamp(190px, 58vw, 250px); }
  .pos-02 .lead-copy {
    width: min(86vw, 520px);
    line-height: 2;
    letter-spacing: .035em;
  }
}