:root {
  --page-bg: #f4eee2;
  --ink: #071f3d;
  --gold: #9b711d;
  --book-red: #c8250f;
}

/* Opening cinema: supplied video is shown uncropped, with an immediate exit. */
.opening-active { overflow: hidden; }
.opening {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: #07121f;
  color: #fffaf0;
}
.opening:not([open]) { display: none; }
.opening::backdrop { background: #07121f; }
.opening__layout { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100%; }
.opening__header, .opening__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px max(24px, env(safe-area-inset-right)) 16px max(24px, env(safe-area-inset-left));
}
.opening__header { padding-top: max(16px, env(safe-area-inset-top)); border-bottom: 1px solid #c4a36140; }
.opening__header h2 { margin: 0; font: 500 clamp(15px, 1.7vw, 24px)/1.6 "Yu Mincho", serif; }
.opening__footer { padding-bottom: max(16px, env(safe-area-inset-bottom)); border-top: 1px solid #c4a36140; }
.opening__footer p { margin: 0; color: #dfd8c9; font: 400 13px/1.7 "Yu Gothic", sans-serif; }
.opening__screen { position: relative; display: grid; place-items: center; min-height: 0; overflow: hidden; }
.opening__video { display: block; width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.opening__button, .opening__play, .opening-launch {
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid #c4a361;
  border-radius: 999px;
  font: 600 13px/1.6 "Yu Gothic", sans-serif;
  cursor: pointer;
}
.opening__button { flex-shrink: 0; background: #ffffff0d; color: #fffaf0; }
.opening__button--sound { background: #ead5a7; color: #071f3d; }
.opening__play { position: absolute; background: #f4eee2; color: #071f3d; box-shadow: 0 8px 40px #0008; }
.opening__play[hidden], .opening-launchbar[hidden] { display: none; }
.opening button:focus-visible, .opening-launch:focus-visible { outline: 3px solid #e8bd62; outline-offset: 4px; }
.opening button:hover, .opening-launch:hover { filter: brightness(1.12); }
.opening-launchbar { display: flex; align-items: center; justify-content: flex-end; gap: 16px; padding: 8px 24px; background: #f4eee2; }
.opening-launchbar > span { color: #796548; font: 400 12px/1.6 "Yu Gothic", sans-serif; }
.opening-launch { background: #fffaf0; border-color: #b49a64; color: #071f3d; }
@media (max-width: 640px) {
  .opening__header { align-items: flex-start; flex-direction: column-reverse; gap: 14px; }
  .opening__header > button { align-self: flex-end; }
  .opening__header h2 { align-self: center; }
  .opening__footer { flex-direction: column-reverse; gap: 12px; text-align: center; }
  .opening-launchbar { justify-content: center; gap: 10px; padding-inline: 12px; }
  .opening-launchbar > span { font-size: 10px; }
  .opening-launch { font-size: 12px; padding-inline: 13px; }
}
@media (max-height: 480px) {
  .opening__header, .opening__footer { flex-direction: row; padding: 6px 16px; gap: 8px; }
  .opening__header h2 { font-size: 13px; }
  .opening__footer p { font-size: 11px; }
}

* {
  box-sizing: border-box;
}

html {
  background: var(--page-bg);
}

body {
  margin: 0;
  background: var(--page-bg);
  color: var(--ink);
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
}

img {
  display: block;
  max-width: 100%;
}

.hero {
  margin: 0;
  background: #f7f0e5;
}

.hero picture,
.hero__image {
  display: block;
  width: 100%;
}

.hero__image {
  height: auto;
}

.visual-section,
.visual-section picture,
.visual-section__image {
  display: block;
  width: 100%;
}

.visual-section {
  background: #f7f0e5;
}

.visual-section__image {
  height: auto;
}

.gift-offer {
  padding: clamp(54px, 6vw, 86px) 24px;
  background: radial-gradient(ellipse at 50% 10%, #fffefa, #f2e8d7);
  text-align: center;
}

.gift-offer__inner {
  max-width: 980px;
  margin-inline: auto;
}

.gift-kicker {
  margin: 0 0 20px;
  color: #856021;
  font: 700 clamp(13px, 1.4vw, 17px)/1.7 "Yu Gothic", sans-serif;
  letter-spacing: .1em;
}

.gift-offer h2,
.reading-section h2 {
  margin: 0;
  font-size: clamp(27px, 3.2vw, 43px);
  font-weight: 500;
  line-height: 1.6;
  text-wrap: balance;
}

.gift-description,
.reading-section__lead {
  margin: 24px auto 32px;
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.95;
}

.gift-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  width: min(100%, 650px);
  min-height: 82px;
  margin-inline: auto;
  padding: 22px 28px;
  border: 1px solid #fff;
  border-radius: 10px;
  background: linear-gradient(170deg, #397853 0%, #215d3d 58%, #184a30 100%);
  box-shadow: 0 4px 0 #123e29, 0 12px 28px #14372324, inset 0 1px 0 #ffffff60;
  color: #fff;
  font: 700 clamp(16px, 1.65vw, 22px)/1.65 "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
  text-decoration: none;
  text-wrap: balance;
}

.gift-cta[href] { cursor: pointer; }
.gift-cta[href]:hover { filter: brightness(1.08); }
.gift-cta:focus-visible { outline: 3px solid var(--gold); outline-offset: 6px; }
.gift-cta__arrow { flex: 0 0 auto; font-size: 26px; font-weight: 400; }
.gift-channel {
  margin: 18px 0 0;
  color: #61594d;
  font: 400 13px/1.7 "Yu Gothic", sans-serif;
  text-align: center;
}
.gift-action { margin-top: 48px; text-align: center; }
.reading-section { padding: clamp(72px, 8vw, 120px) 24px; background: #f2e9da; }
.reading-section h2,
.reading-section__lead { text-align: center; }
.reading-questions { padding: 0; margin: 48px 0 0; list-style: none; }
.reading-questions li { display: flex; gap: 28px; padding: 30px 0; border-top: 1px solid #ae8a4c50; }
.reading-questions li > span { color: #96702a; font: 400 38px/1.4 Georgia, serif; }
.reading-questions h3 { margin: 0 0 12px; font-weight: 500; font-size: clamp(21px, 2.2vw, 28px); line-height: 1.6; }
.reading-questions p { margin: 0; font-size: 16px; line-height: 1.9; }
.gift-offer--final { padding-block: clamp(80px, 9vw, 132px); }
.gift-offer--final .gift-cta {
  background: linear-gradient(170deg, #bf590b 0%, #b94b06 58%, #a63e05 100%);
  box-shadow: 0 4px 0 #813006, 0 12px 28px #a64a092e, inset 0 1px 0 #ffffff60;
}

@media (max-width: 640px) {
  .gift-offer { padding-inline: 20px; }
  .gift-offer h2 { font-size: 26px; }
  .gift-offer h2 br { display: none; }
  .gift-cta { padding: 18px 16px; gap: 10px; min-height: 78px; }
  .gift-cta__arrow { font-size: 22px; }
  .gift-channel { font-size: 12px; }
  .desktop-break { display: none; }
  .reading-questions li { gap: 18px; }
  .reading-questions li > span { font-size: 30px; }
}

.copy-section {
  position: relative;
  padding: clamp(88px, 10vw, 148px) 24px;
  overflow: hidden;
}

.copy-section::before {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 9% 12%, rgba(155, 113, 29, 0.1), transparent 26%),
    radial-gradient(circle at 92% 88%, rgba(31, 79, 47, 0.09), transparent 26%);
  content: "";
  pointer-events: none;
}

.copy-section--check {
  background: #fbf8f1;
}

.copy-section--reason {
  background: #eee5d5;
}

.copy-section__inner,
.book-intro__inner,
.book-after__inner {
  position: relative;
  z-index: 1;
  width: min(100%, 980px);
  margin-inline: auto;
}

.copy-section__inner--narrow,
.book-intro__inner,
.book-after__inner {
  width: min(100%, 820px);
}

.copy-section__eyebrow {
  margin: 0 0 22px;
  color: var(--gold);
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", sans-serif;
  font-size: clamp(13px, 1.2vw, 16px);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-align: center;
}

.copy-section h2,
.book-intro h2,
.book-after h2 {
  margin: 0;
  font-size: clamp(30px, 4.4vw, 58px);
  font-weight: 600;
  line-height: 1.48;
  letter-spacing: 0.01em;
  text-align: center;
}

.copy-section__lead {
  width: min(100%, 760px);
  margin: 46px auto 0;
  font-size: clamp(17px, 1.65vw, 22px);
  line-height: 2;
}

.check-list {
  display: grid;
  gap: 16px;
  width: min(100%, 760px);
  margin: 42px auto 0;
  padding: 0;
  list-style: none;
}

.check-list li {
  position: relative;
  padding: 20px 22px 20px 62px;
  border: 1px solid rgba(155, 113, 29, 0.32);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.76);
  font-size: clamp(16px, 1.45vw, 20px);
  line-height: 1.75;
  box-shadow: 0 12px 32px rgba(7, 31, 61, 0.05);
}

.check-list li::before {
  position: absolute;
  top: 19px;
  left: 22px;
  color: var(--gold);
  content: "✓";
  font-family: sans-serif;
  font-size: 22px;
  font-weight: 800;
}

.copy-section__closing,
.copy-section__statement {
  margin: 52px 0 0;
  font-size: clamp(21px, 2.5vw, 32px);
  line-height: 1.8;
  text-align: center;
}

.copy-section__closing strong,
.copy-section__statement strong {
  color: var(--gold);
  font-weight: 600;
}

.copy-section__body {
  display: grid;
  gap: 22px;
  margin-top: 48px;
  font-size: clamp(17px, 1.55vw, 21px);
  line-height: 2;
}

.copy-section__body p {
  margin: 0;
}

.book-intro {
  padding: clamp(92px, 11vw, 160px) 24px clamp(62px, 7vw, 98px);
  background: linear-gradient(180deg, #eee5d5 0%, #f5eee1 100%);
  text-align: center;
}

.book-intro p {
  margin: 0 0 24px;
  color: var(--gold);
  font-size: clamp(18px, 1.7vw, 23px);
  font-weight: 600;
  letter-spacing: 0.05em;
}

.book-after {
  padding: clamp(92px, 10vw, 148px) 24px;
  background: #fbf8f1;
}

.book-after__description {
  margin: 44px auto 0;
  font-size: clamp(17px, 1.55vw, 21px);
  line-height: 2;
}

/* book-spin/index.html の .stage 配下だけを、衝突防止のため book- 接頭辞で移植 */
.book-stage {
  --book-width: clamp(230px, 23vw, 330px);
  --book-height: calc(var(--book-width) * 1.6);
  --book-depth: clamp(28px, 2.8vw, 40px);
  position: relative;
  height: 300vh;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.96) 0 17%, rgba(255, 255, 255, 0) 48%),
    linear-gradient(180deg, #f5eee1 0%, #f8f4ec 48%, #efe4d2 100%);
}

.book-sticky {
  position: sticky;
  top: 0;
  display: grid;
  place-items: center;
  height: 100vh;
  min-height: 560px;
  overflow: hidden;
  perspective: 1400px;
}

.book-object {
  position: relative;
  z-index: 1;
  width: var(--book-width);
  height: var(--book-height);
  transform-style: preserve-3d;
  will-change: transform;
}

.book-face {
  position: absolute;
  backface-visibility: hidden;
}

.book-front {
  width: var(--book-width);
  height: var(--book-height);
  background: #fff url("./images/cover.webp") center / cover no-repeat;
  box-shadow: inset 4px 0 8px rgba(0, 0, 0, 0.15);
  transform: translateZ(calc(var(--book-depth) / 2));
}

.book-back {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: var(--book-width);
  height: var(--book-height);
  padding: clamp(22px, 2.4vw, 32px);
  gap: 14px;
  background: #fffdf9;
  color: var(--ink);
  font-size: clamp(12px, 1.1vw, 14px);
  font-weight: 600;
  line-height: 1.9;
  transform: rotateY(180deg) translateZ(calc(var(--book-depth) / 2));
}

.book-back strong {
  color: var(--gold);
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.55;
}

.book-back p {
  margin: 0;
}

.book-spine {
  left: calc(50% - var(--book-depth) / 2);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--book-depth);
  height: var(--book-height);
  padding-block: 12px;
  background: var(--book-red);
  color: #fff;
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", sans-serif;
  font-size: clamp(10px, 0.95vw, 13px);
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.35;
  writing-mode: vertical-rl;
  transform: rotateY(-90deg) translateZ(calc(var(--book-width) / 2));
}

.book-pages {
  top: 3px;
  left: calc(50% - var(--book-depth) / 2);
  width: var(--book-depth);
  height: calc(var(--book-height) - 6px);
  background: repeating-linear-gradient(90deg, #fdfbf6 0 2px, #e9e4da 2px 3px);
  transform: rotateY(90deg) translateZ(calc(var(--book-width) / 2 - 3px));
}

.book-top,
.book-bottom {
  top: calc(50% - var(--book-depth) / 2);
  width: calc(var(--book-width) - 3px);
  height: var(--book-depth);
  background: #f3efe6;
}

.book-top {
  transform: rotateX(90deg) translateZ(calc(var(--book-height) / 2 - 3px));
}

.book-bottom {
  transform: rotateX(-90deg) translateZ(calc(var(--book-height) / 2 - 3px));
}

.book-shadow {
  position: absolute;
  bottom: 8vh;
  width: calc(var(--book-width) * 1.1);
  height: 24px;
  border-radius: 50%;
  background: rgba(7, 31, 61, 0.2);
  filter: blur(10px);
}

@media (max-width: 640px) {
  .copy-section {
    padding: 72px 22px;
  }

  .copy-section h2,
  .book-intro h2,
  .book-after h2 {
    font-size: clamp(27px, 8.2vw, 35px);
    line-height: 1.55;
  }

  .copy-section__lead,
  .copy-section__body,
  .book-after__description {
    line-height: 1.9;
  }

  .check-list li {
    padding: 18px 18px 18px 50px;
  }

  .check-list li::before {
    left: 17px;
  }

  .book-intro,
  .book-after {
    padding-inline: 22px;
  }

  .book-stage {
    --book-width: min(62vw, 250px);
    --book-depth: 28px;
    height: 260vh;
  }

  .book-sticky {
    min-height: 520px;
  }

  .book-back {
    padding: 22px;
    font-size: 12px;
  }

  .book-shadow {
    bottom: max(7vh, 48px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .book-stage {
    height: 100vh;
  }

  .book-object {
    transform: rotateX(6deg) rotateY(18deg);
    will-change: auto;
  }
}