:root {
  --page-bg: #0b1226;
  --navy: #141f3f;
  --navy-deep: #0d1630;
  --cream: #f7f0e3;
  --red: #d8443a;
  --ink: #1d2a4a;
}

main { background: var(--navy); color: #fff; overflow: hidden; }
section { position: relative; padding: var(--s-section) var(--gutter); }
section > div[data-reveal] { display: grid; gap: var(--s-item); }

.label { text-align: center; font-size: 13px; font-weight: 700; letter-spacing: .08em; color: var(--yellow); }
.hero-title, .sec-title {
  font-family: "Noto Serif JP", serif;
  font-weight: 900;
  line-height: 1.35;
  text-align: center;
  letter-spacing: .02em;
}
.hero-title span { display: block; }
.hero-title em, .sec-title em { font-style: normal; color: var(--yellow); }
.sec-title { font-size: clamp(27px, 7.4vw, 34px); }
.body, .lead, .caption, .note { text-align: center; }
.lead { font-weight: 700; font-size: 17px; }
.caption { font-size: 13px; opacity: .75; }
.note { font-size: 13px; line-height: 1.7; opacity: .85; }

.status {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--s-tight);
  font-weight: 700;
  font-size: 15px;
}
.status strong { padding: 2px 12px; border-radius: 999px; background: var(--red); color: #fff; font-size: 14px; }

/* S01 */
.s01 {
  display: grid;
  gap: var(--s-item);
  padding-top: var(--s-group);
  padding-bottom: var(--s-group);
  background:
    radial-gradient(120% 60% at 50% 62%, rgba(242, 194, 48, .28) 0%, rgba(242, 194, 48, 0) 60%),
    linear-gradient(180deg, var(--navy-deep) 0%, var(--navy) 100%);
}
.s01 .hero-title { font-size: clamp(30px, 8.4vw, 40px); }
.s01 .hero-title .l1 { font-size: .72em; color: rgba(255, 255, 255, .86); }
.s01 .group { margin-top: calc(var(--s-tight) * -1); }
.s01-foot { display: grid; gap: var(--s-item); margin-top: calc(var(--s-group) * -1); position: relative; z-index: 5; }
.s01-foot::before {
  content: "";
  position: absolute;
  left: calc(var(--gutter) * -1);
  right: calc(var(--gutter) * -1);
  top: calc(var(--s-group) * -1);
  bottom: calc(var(--s-group) * -1);
  z-index: -1;
  background: linear-gradient(180deg, rgba(20, 31, 63, 0) 0%, var(--navy) 36%);
}

/* S02 */
.s02 { background: var(--cream); color: var(--ink); padding-top: 88px; padding-bottom: 88px; }
.s02 .sec-title em { color: var(--red); }

/* S03 */
.s03 { display: grid; gap: var(--s-group); }
.reels { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-item); }
.reels article { display: grid; gap: var(--s-tight); }
.reels h3 { font-size: 14px; text-align: center; }

/* S04 */
.s04 { display: grid; gap: var(--s-item); background: var(--navy-deep); padding-bottom: 0; }
.s04 > div[data-reveal] { margin-bottom: var(--s-item); }
.mosaic {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 4px;
  margin: var(--s-group) calc(var(--gutter) * -1) 0;
}
.mosaic img { width: 100%; height: 100%; object-fit: cover; }
.mosaic img:first-child { grid-row: span 2; aspect-ratio: 4 / 5; }

/* S05 */
.s05 { background: var(--cream); color: var(--ink); display: grid; gap: var(--s-group); }
.s05 .sec-title em { color: var(--red); }
.method { display: grid; gap: var(--s-section); }
.method li { display: grid; gap: var(--s-item); text-align: center; }
.method img { width: calc(100% + var(--gutter) * 2); max-width: none; margin: 0 calc(var(--gutter) * -1); height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.method h3 { font-family: "Noto Serif JP", serif; font-weight: 900; font-size: 22px; line-height: 1.4; }

/* S06 */
.s06 { display: grid; gap: var(--s-group); }
.fit { margin: 0; padding: 0 0 0 1.2em; display: grid; gap: var(--s-tight); }
.team { width: calc(100% + var(--gutter) * 2); max-width: none; margin: 0 calc(var(--gutter) * -1); height: auto; aspect-ratio: 4 / 3; object-fit: cover; }

/* S07 */
.s07 { background: var(--navy-deep); display: grid; gap: var(--s-group); }
.faq { display: grid; gap: var(--s-item); }
.faq details { border-radius: 12px; background: rgba(255, 255, 255, .06); }
.faq summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-item);
  min-height: 56px;
  padding: var(--s-item) var(--s-item) var(--s-item) 20px;
  font-weight: 700;
  line-height: 1.5;
  cursor: pointer;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "＋"; flex: none; color: var(--yellow); font-size: 20px; line-height: 1; transition: transform .2s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; border-radius: 12px; }
.faq details p { padding: 0 20px var(--s-item); opacity: .9; }

/* S08 */
.s08 {
  text-align: center;
  background:
    radial-gradient(90% 50% at 50% 0%, rgba(242, 194, 48, .22) 0%, rgba(242, 194, 48, 0) 70%),
    var(--navy);
}
.s08 .hero-title.small { font-size: clamp(32px, 9vw, 42px); }

.footer { background: var(--navy); color: rgba(255, 255, 255, .7); }