@charset "utf-8";

:root {
  --anniv-navy: #072b4b;
  --anniv-blue: #0660a5;
  --anniv-ink: #18242e;
  --anniv-mist: #f1f7f8;
  --anniv-line: rgba(6, 96, 165, 0.18);
  --anniv-gradient: linear-gradient(90deg, #acb6e5 0%, #86fde8 100%);
  --anniv-serif: "Noto Serif JP", "Yu Mincho", YuMincho, serif;
  --anniv-sans: "Noto Sans JP", "Yu Gothic", YuGothic, sans-serif;
}

html { scroll-behavior: smooth; }

body.anniversary-page {
  color: var(--anniv-ink);
  background: #fff;
  font-family: var(--anniv-sans);
  overflow-x: hidden;
}

body.anniversary-page #page_h {
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 1px 0 rgba(5, 42, 73, 0.1);
  backdrop-filter: blur(12px);
}

#anniversary { padding-top: 50px; }

.anniv-hero {
  min-height: calc(100svh - 50px);
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 72% 28%, rgba(134, 253, 232, 0.12), transparent 25%),
    linear-gradient(135deg, #041f36 0%, #07355c 60%, #064e78 100%);
}

.anniv-hero::before,
.anniv-hero::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.anniv-hero::before {
  z-index: 2;
  width: min(86vw, 900px);
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  left: 52%;
  top: 48%;
  transform: translate(-50%, -50%);
}

.anniv-hero::after {
  z-index: 4;
  height: 5px;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--anniv-gradient);
}

.anniv-hero__texture {
  position: absolute;
  z-index: 1;
  inset: 0;
  opacity: 0.22;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to bottom, black, transparent 88%);
}

.anniv-hero__backdrop {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: grid;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 6px;
  overflow: hidden;
  opacity: .2;
  pointer-events: none;
}

.hero-slider,
.hero-slider__track { min-width: 0; min-height: 0; }

.hero-slider { overflow: hidden; }

.hero-slider__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 58vw;
  gap: 6px;
  height: 100%;
  overflow-x: scroll;
  scrollbar-width: none;
  will-change: scroll-position;
}

.hero-slider__track::-webkit-scrollbar { display: none; }

.hero-slider__track img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.75) contrast(1.08);
}

.anniv-hero__inner {
  position: relative;
  z-index: 3;
  width: min(100% - 40px, 1120px);
  padding: 64px 0 94px;
  text-align: center;
}

.anniv-hero__eyebrow {
  margin-top: 20px;
  font-family: var(--anniv-serif);
  font-size: 1.2rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  color: #a5efea;
}

.anniv-hero__number {
  margin: 14px auto -14px;
  display: flex;
  justify-content: center;
  font-family: var(--anniv-serif);
  font-size: clamp(13rem, 47vw, 25rem);
  font-weight: 400;
  line-height: 0.88;
  letter-spacing: -0.09em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.48);
  text-shadow: 0 0 80px rgba(134, 253, 232, 0.08);
}

.anniv-hero__number span:first-child {
  color: rgba(255, 255, 255, 0.96);
  -webkit-text-stroke: 0;
}

.anniv-hero h2 {
  margin-top: 24px;
  font-family: var(--anniv-serif);
  font-size: clamp(3rem, 8.6vw, 5.2rem);
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.35;
}

.anniv-hero__lead {
  margin-top: 18px;
  font-family: var(--anniv-serif);
  font-size: clamp(1.5rem, 4vw, 2.1rem);
  line-height: 2;
  letter-spacing: 0.04em;
}

.breadcrumb {
  width: min(100% - 40px, 1180px);
  margin: 0 auto;
  padding: 20px 0;
  font-size: 1.2rem;
  color: #73818b;
}

.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 8px; }
.breadcrumb li + li::before { content: "/"; margin-right: 8px; color: #acb6bd; }
.breadcrumb a { text-decoration: underline; text-underline-offset: 3px; }

.anniv-intro {
  width: min(100% - 40px, 760px);
  margin: 82px auto 0;
  padding: 0 0 74px;
  font-family: var(--anniv-serif);
  text-align: center;
}

.anniv-intro p {
  font-size: 1.7rem;
  line-height: 2;
  letter-spacing: .03em;
}

.anniv-intro__note {
  margin-top: 28px;
}

.chapter {
  width: min(100% - 40px, 1180px);
  margin: 0 auto;
  padding: 92px 0 112px;
}

.opening { display: grid; gap: 52px; }
.opening__visual { position: relative; }

.opening__portrait {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center top;
}

.photo-placeholder {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.14), transparent 42%),
    #afb5b9;
}

.photo-placeholder::after {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(255, 255, 255, 0.42);
}

.photo-placeholder span {
  position: absolute;
  left: 28px;
  bottom: 24px;
  z-index: 1;
  color: rgba(255, 255, 255, 0.88);
  font-size: 1rem;
  letter-spacing: 0.24em;
}

.opening__caption {
  margin: -38px 18px 0 auto;
  width: max-content;
  position: relative;
  z-index: 2;
  padding: 20px 28px;
  background: #fff;
  box-shadow: 0 18px 48px rgba(7, 43, 75, 0.12);
  font-family: var(--anniv-serif);
  line-height: 1.8;
}

.opening__caption strong { font-size: 2rem; letter-spacing: 0.16em; }

.chapter-label {
  display: flex;
  align-items: baseline;
  gap: 12px;
  color: var(--anniv-blue);
  font-family: var(--anniv-serif);
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: 0.16em;
}

.chapter-label span {
  display: inline;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
}

.opening__copy h3 {
  margin-top: 22px;
  font-family: var(--anniv-serif);
  font-size: clamp(3.2rem, 8vw, 5rem);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.05em;
}

.interview-block { margin-top: 48px; }

.question {
  position: relative;
  padding: 26px 0 26px 28px;
  border-left: 3px solid var(--anniv-blue);
  font-family: var(--anniv-serif);
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.9;
  color: var(--anniv-navy);
}

.answer { margin-top: 36px; color: #46545e; }
.answer p { line-height: 2.15; }
.answer p + p { margin-top: 1.7em; }
.answer strong { color: var(--anniv-navy); font-weight: 700; }

@media only screen and (min-width: 768px) {
  .anniv-hero__inner { width: min(100% - 80px, 1120px); }
  .anniv-hero__number { font-size: clamp(20rem, 35vw, 31rem); }
  .anniv-hero__sp-break { display: none; }
  .hero-slider__track { grid-auto-columns: 34vw; }
  .opening { grid-template-columns: minmax(300px, 0.82fr) minmax(380px, 1.18fr); align-items: center; gap: 7vw; }
}

@media only screen and (min-width: 1040px) {
  #anniversary { padding-top: 80px; }
  .anniv-hero { min-height: calc(100svh - 80px); }
  .anniv-hero__eyebrow { font-size: 1.3rem; }
  .anniv-hero__number { margin-top: 20px; font-size: min(30vw, 33rem); }
  .anniv-hero__lead { margin-top: 24px; }
  .hero-slider__track { grid-auto-columns: min(26vw, 440px); }
  .breadcrumb { padding-top: 28px; }
  .anniv-intro { margin-top: 120px; padding-bottom: 110px; }
  .anniv-intro p { font-size: 1.8rem; }
  .chapter { padding: 150px 0 180px; }
  .opening__caption { margin-right: -24px; }
  .question { font-size: 2.2rem; padding-left: 34px; }
  .answer { font-size: 1.7rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fade-in { opacity: 1; transform: none; transition: none; }
}

.work-scenes {
  padding: 36px 0 112px;
  overflow: hidden;
}

.photo-slider { width: 100%; }

.photo-slider__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 44%;
  gap: 16px;
  padding: 0 20px;
  overflow-x: auto;
  scroll-snap-type: none;
  scroll-behavior: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
}

.photo-slider__track::-webkit-scrollbar { display: none; }

.photo-slider__item {
  scroll-snap-align: none;
}

.photo-slider__image {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.photo-slider .photo-placeholder::after { display: none; }

.photo-placeholder--landscape { aspect-ratio: 16 / 10; }
.photo-placeholder--gray2 { background: linear-gradient(145deg, rgba(255,255,255,.13), transparent 48%), #979da1; }
.photo-placeholder--gray3 { background: linear-gradient(145deg, rgba(255,255,255,.12), transparent 48%), #c4c8ca; }
.photo-placeholder--gray4 { background: linear-gradient(145deg, rgba(255,255,255,.12), transparent 48%), #838a8e; }
.photo-placeholder--gray5 { background: linear-gradient(145deg, rgba(255,255,255,.12), transparent 48%), #b5b9bb; }

.chapter-intro h3,
.integrity__copy h3,
.hundred-colors h3 {
  margin-top: 22px;
  font-family: var(--anniv-serif);
  font-size: clamp(3rem, 7.8vw, 5.2rem);
  font-weight: 600;
  line-height: 1.55;
  letter-spacing: 0.04em;
}

.chapter-dark {
  position: relative;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 88% 18%, rgba(134, 253, 232, 0.1), transparent 24%),
    #061f35;
}

.chapter-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .2;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 100% 48px;
}

.chapter-dark__word {
  position: absolute;
  top: 42px;
  right: -0.08em;
  color: transparent;
  font-family: var(--anniv-serif);
  font-size: clamp(12rem, 40vw, 40rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.16em;
  -webkit-text-stroke: 1px rgba(255,255,255,.08);
}

.chapter-dark__inner { position: relative; z-index: 1; padding-bottom: 0; }
.chapter-label--light { color: #8ce9e2; }
.dark-dialogue { margin-top: 76px; }
.interview-block--dark + .interview-block--dark { margin-top: 76px; }
.interview-block--dark .question { color: #fff; border-left-color: #86fde8; }
.interview-block--dark .answer { color: #c7d4dd; }
.interview-block--dark .answer strong { color: #fff; }

.integrity {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(120deg, rgba(172,182,229,.14), rgba(134,253,232,.13)),
    #f6f9fa;
}

.integrity::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: var(--anniv-gradient);
}

.integrity__symbol {
  position: absolute;
  top: 76px;
  left: 2vw;
  display: flex;
  flex-direction: column;
  color: rgba(6, 96, 165, .055);
  font-family: var(--anniv-serif);
  font-size: clamp(14rem, 30vw, 30rem);
  font-weight: 700;
  line-height: .9;
}

.integrity__inner { position: relative; z-index: 1; }
.integrity__copy { max-width: 800px; margin-left: auto; }

.story-photo {
  width: min(80%, 944px);
  margin: 0 auto;
  padding: 82px 0;
}

.story-photo img {
  display: block;
  width: 100%;
  height: auto;
  box-shadow: 0 24px 70px rgba(7, 43, 75, .12);
}

.story-photo--art { width: min(80%, 800px); padding-top: 41px; }
.story-photo--interview { padding: 72px 0 0; }
.story-photo--team { padding-top: 41px; }

.vision {
  position: relative;
  overflow: hidden;
}

.vision__100 {
  position: absolute;
  top: 1.2%;
  left: 50%;
  transform: translateX(-50%);
  color: transparent;
  font-family: var(--anniv-serif);
  font-size: clamp(18rem, 45vw, 52rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.08em;
  -webkit-text-stroke: 1px rgba(6, 96, 165, .075);
}

.vision__inner { position: relative; z-index: 1; }
.chapter-intro--center { text-align: center; }
.chapter-intro--center .chapter-label { justify-content: center; }
.vision-grid { margin-top: 100px; }
.vision-grid__copy { max-width: 900px; margin: 0 auto; }
.vision-grid__copy .interview-block + .interview-block { margin-top: 72px; }
.future-message { margin-top: 96px; padding-top: 76px; border-top: 1px solid var(--anniv-line); }

.people-scenes {
  padding: 72px 0 120px;
  overflow: hidden;
  color: #fff;
  background: transparent;
}

.culture {
  background:
    radial-gradient(circle at 94% 18%, rgba(134,253,232,.18), transparent 22%),
    linear-gradient(180deg, #f3f8f9 0%, #fff 48%);
}

.culture__body { margin-top: 72px; }

.hundred-colors {
  position: relative;
  margin-top: 116px;
  padding: 58px 28px 60px;
  background: #fff;
  box-shadow: 0 28px 90px rgba(7,43,75,.1);
}

.hundred-colors::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 5px;
  background: var(--anniv-gradient);
}

.hundred-colors__en {
  color: var(--anniv-blue);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .24em;
}

.hundred-colors .interview-block { margin-top: 54px; }

.anniv-finale {
  min-height: 500px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: #fff;
  text-align: center;
  background:
    radial-gradient(circle at 50% 40%, rgba(134,253,232,.12), transparent 34%),
    #061f35;
}

.anniv-finale__line {
  width: min(72vw, 480px);
  height: 1px;
  margin-bottom: 26px;
  background: var(--anniv-gradient);
}

.anniv-finale strong { position: relative; z-index: 1; font-family: var(--anniv-serif); font-size: clamp(2.3rem, 7vw, 5rem); font-weight: 500; letter-spacing: .08em; }
.anniv-finale__number { position: absolute; bottom: -.28em; color: transparent; font-family: var(--anniv-serif); font-size: clamp(20rem, 54vw, 48rem); line-height: 1; letter-spacing: -.08em; -webkit-text-stroke: 1px rgba(255,255,255,.09); }

@media only screen and (min-width: 768px) {
  .photo-slider__track { grid-auto-columns: 30%; gap: 22px; padding-inline: 6vw; }
  .hundred-colors { padding: 80px 64px 76px; }
  .answer--columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; }
  .answer--columns p + p { margin-top: 0; }
}

@media only screen and (min-width: 1040px) {
  .work-scenes { padding: 40px 0 180px; }
  .photo-slider__track { grid-auto-columns: min(26vw, 380px); gap: 28px; padding-inline: calc((100vw - min(88vw, 1180px)) / 2); }
  .chapter-dark__inner { padding-top: 78px; padding-bottom: 0; }
  .chapter-dark .chapter-label { font-size: 2rem; }
  .chapter-dark .chapter-intro h3 {
    max-width: 1160px;
    margin-top: 52px;
    font-size: clamp(4.8rem, 4.2vw, 6rem);
    font-weight: 500;
    line-height: 1.62;
    letter-spacing: .02em;
  }
  .dark-dialogue { margin-top: 132px; }
  .integrity__symbol { left: 5vw; }
  .story-photo { padding: 120px 0; }
  .story-photo--art { padding-top: 60px; }
  .story-photo--interview { padding: 96px 0 0; }
  .story-photo--team { padding-top: 60px; }
  .future-message { margin-top: 140px; padding-top: 96px; }
  .people-scenes { padding: 96px 0 160px; }
  .culture__inner > .chapter-intro { max-width: 780px; }
  .culture__body { width: 78%; margin-left: auto; }
  .hundred-colors { margin-top: 160px; padding: 100px 9vw 96px; }
  .hundred-colors h3 { max-width: 900px; }
  .anniv-finale { min-height: 680px; }
}