:root {
  --color-ivory: #f7f4ed;
  --color-paper: #fffdf8;
  --color-ink: #090908;
  --color-muted: #6e675d;
  --color-gold: #b5924e;
  --content-width: 1180px;
  --font-serif: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--color-ink); background: var(--color-ivory); font-family: var(--font-serif); font-size: 16px; line-height: 1.75; }
button, input, select, textarea { font-family: inherit; }
img { display: block; width: 100%; height: 100%; object-fit: cover; }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { font-family: var(--font-serif); font-weight: 600; letter-spacing: .04em; }
h2 { font-size: 30px; line-height: 1.35; }
.visual-band { width: 100%; margin: 0; }
.section-number { display: none; }
.order-cta { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; gap: 20px; padding: 12px 22px; color: #fff; background: var(--color-ink); border: 1px solid var(--color-ink); text-decoration: none; }
.order-cta::after { content: "›"; color: var(--color-gold); font-size: 1.25em; }
a:focus-visible, .faq-item button:focus-visible { outline: 3px solid var(--color-gold); outline-offset: 4px; }

.band-hero { position: relative; min-height: 620px; overflow: hidden; }
.band-hero .site-header { position: absolute; z-index: 3; top: 18px; left: 20px; padding: 0; background: transparent; border: 0; }
.band-hero .site-header a { display: block; width: 138px; }
.band-hero .site-header img { height: auto; }
.band-hero .hero-visual { position: absolute; inset: 0; }
.band-hero .hero-visual img { object-position: 78% center; }
.band-hero .hero-visual picture { display: block; height: 100%; }
.band-hero .hero-visual::after { position: absolute; inset: 0; content: ""; background: linear-gradient(90deg, rgba(247,244,237,.98) 0 24%, rgba(247,244,237,.82) 48%, rgba(247,244,237,.08) 82%); }
.band-hero .hero-copy { position: relative; z-index: 2; width: min(78%, 390px); padding: 130px 20px 52px; }
.band-hero h1 { margin-bottom: 20px; font-size: 36px; line-height: 1.45; }
.hero-lead, .meaning-lines { color: var(--color-muted); }

.band-story-use { background: var(--color-paper); }
.band-story-use #story, .band-story-use #use-cases, .band-gift { padding: 0; }
.band-story-use #story .section-copy, .band-story-use #use-cases, .band-gift .section-copy { padding: 38px 20px; }
.band-story-use #story .section-visual, .band-gift .section-visual { display: block; }
.band-story-use #story .section-visual { aspect-ratio: 16 / 9; min-height: 0; overflow: hidden; }
.band-gift .section-visual { aspect-ratio: 4 / 3; min-height: 0; overflow: hidden; }
.use-case-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin: 20px 0 0; padding: 0; list-style: none; }
.use-case-card { min-width: 0; }
.use-case-card picture { display: block; aspect-ratio: 1 / 1; overflow: hidden; }
.use-case-label { margin: 5px 0 0; font-size: .7rem; text-align: center; }
.use-case-icon-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 8px; margin: 20px 0 0; padding: 0; list-style: none; }
.use-case-icon-list li { min-width: 0; text-align: center; }
.use-case-icon { width: 28px; height: 28px; color: var(--color-gold); }
.gift-points { display: grid; gap: 8px; margin: 20px 0 0; padding: 0; list-style: none; }
.gift-points li { display: flex; align-items: center; gap: 8px; font-size: .875rem; }
.gift-point-icon { flex: 0 0 auto; width: 28px; height: 28px; color: var(--color-gold); }
.band-gift { background: var(--color-ivory); }

.band-opening-scenes { padding: 28px 12px; background: var(--color-paper); }
.band-opening-scenes > h2 { margin-bottom: 0; font-size: 22px; text-align: center; }
.opening-scene-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; max-width: var(--content-width); margin: 16px auto 0; padding: 0; list-style: none; }
.opening-scene-card { min-width: 0; }
.opening-scene-card picture { display: block; aspect-ratio: 72 / 61; overflow: hidden; border-radius: 8px; }
.opening-scene-label { margin: 6px 0 0; font-family: var(--font-serif); font-size: .625rem; line-height: 1.4; text-align: center; }

.band-steps { padding: 42px 20px; background: var(--color-paper); }
.band-steps > h2 { text-align: center; }
.usage-steps-visual { display: block; width: min(100%, var(--content-width)); aspect-ratio: 3 / 2; margin: 0 auto; overflow: hidden; }
.usage-steps-visual--touch-area { margin-top: 20px; }
.usage-steps-heading--accessible { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.usage-step-list--accessible { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.band-comparison { display: grid; color: #fff; background: var(--color-ink); }
.benefit-inner { width: min(100%, var(--content-width)); margin-inline: auto; padding: 48px 20px; }
.benefit-inner > h2 { max-width: 820px; margin-inline: auto; text-align: center; }
.benefit-list { display: flex; flex-direction: column; align-items: center; gap: 18px; max-width: 680px; margin: 28px auto 0; padding: 0; list-style: none; text-align: center; }
.benefit-list li { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; font-size: 1rem; line-height: 1.6; }
.benefit-icon { width: 28px; height: 28px; color: var(--color-gold); }
.benefit-cta { margin-top: 28px; text-align: center; }

.band-purchase { padding: 48px 20px; background: var(--color-paper); }
.band-purchase > section { max-width: var(--content-width); margin-inline: auto; padding: 0; }
.plan-order-notice { margin-bottom: 0; padding: 22px 0; border-top: 1px solid #d9d1c3; border-bottom: 1px solid #d9d1c3; color: var(--color-muted); }
.plan-order-notice p { margin: 0; }
.plan-order-notice__title { color: var(--color-ink); font-size: 1.05rem; letter-spacing: .04em; }
.order-flow { margin: 44px 0 48px; }
.order-flow__heading { max-width: 720px; margin: 0 auto 34px; text-align: center; }
.order-flow__eyebrow,
.order-materials__label { margin-bottom: 7px; color: var(--color-gold); font-family: Georgia, "Times New Roman", serif; font-size: .72rem; letter-spacing: .22em; }
.order-flow__heading h3 { margin: 0 0 13px; font-size: clamp(1.7rem, 7vw, 2.35rem); font-weight: 600; line-height: 1.4; letter-spacing: .05em; }
.order-flow__heading > p:last-child { margin: 0; color: var(--color-muted); font-size: .92rem; }
.order-flow__steps { position: relative; display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.order-flow__steps::before { position: absolute; top: 70px; bottom: 70px; left: 27px; width: 1px; content: ""; background: linear-gradient(var(--color-gold), rgba(181,146,78,.18)); }
.order-step { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); min-width: 0; padding: 12px 0 26px; }
.order-step::before { position: absolute; z-index: 1; top: 66px; left: 23px; width: 9px; height: 9px; content: ""; background: var(--color-paper); border: 1px solid var(--color-gold); transform: rotate(45deg); }
.order-step__visual { grid-column: 2; width: min(100%, 210px); margin: 0 auto 10px; color: var(--color-ink); }
.order-step__visual svg { display: block; width: 100%; height: auto; }
.order-step__copy { grid-column: 2; min-width: 0; text-align: center; }
.order-step__number { margin: 0 0 5px; color: var(--color-gold); font-family: Georgia, "Times New Roman", serif; font-size: .73rem; letter-spacing: .16em; }
.order-step__copy h4 { margin: 0 0 10px; font-size: 1.22rem; font-weight: 600; letter-spacing: .06em; }
.order-step__copy > p:last-child { margin: 0; color: var(--color-muted); font-size: .86rem; line-height: 1.85; }
.order-materials { position: relative; margin-top: 18px; padding: 30px 0 28px; border-top: 1px solid #d9d1c3; border-bottom: 1px solid #d9d1c3; }
.order-materials::before { position: absolute; top: -7px; left: 27px; width: 12px; height: 12px; content: ""; background: var(--color-paper); border-right: 1px solid #d9d1c3; border-bottom: 1px solid #d9d1c3; transform: rotate(45deg); }
.order-materials__intro { margin-bottom: 25px; }
.order-materials__intro h4 { margin: 0 0 12px; font-size: 1.22rem; font-weight: 600; line-height: 1.55; letter-spacing: .04em; }
.order-materials__intro > p:last-child { margin: 0; color: var(--color-muted); font-size: .86rem; }
.order-materials__plans { display: grid; gap: 22px; }
.material-plan { min-width: 0; padding-left: 17px; border-left: 2px solid #d9d1c3; }
.material-plan--premium { border-left-color: var(--color-gold); }
.material-plan h5 { margin: 0 0 11px; font-family: Georgia, "Times New Roman", serif; font-size: 1.08rem; font-weight: 500; letter-spacing: .06em; }
.material-plan ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.material-plan li { position: relative; padding-left: 16px; font-size: .86rem; line-height: 1.7; }
.material-plan li::before { position: absolute; top: .78em; left: 0; width: 5px; height: 5px; content: ""; background: var(--color-gold); border-radius: 50%; }
.material-plan small { color: var(--color-muted); font-size: .76rem; }
.plan-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.plan-card { overflow: hidden; border: 1px solid #d9d1c3; border-radius: 0; background: #fff; box-shadow: none; }
.plan-card--premium { color: #fff; background: var(--color-ink); border-color: var(--color-gold); }
.plan-card-copy { padding: 24px; }
.plan-card picture { display: block; aspect-ratio: 1 / 1; overflow: hidden; }
.faq-list { border-top: 1px solid #d9d1c3; }
.faq-item { border-bottom: 1px solid #d9d1c3; }
.faq-item button { width: 100%; min-height: 54px; padding: 14px 0; color: var(--color-ink); background: transparent; border: 0; text-align: left; }

.band-final { display: grid; color: #fff; background: var(--color-ink); }
.band-final > picture { display: block; aspect-ratio: 3 / 4; overflow: hidden; }
.band-final .final-cta-copy { padding: 48px 20px; }
.band-final h2 span { color: var(--color-gold); }
.band-final .order-cta { color: #fff; background: var(--color-gold); border-color: var(--color-gold); }
.band-final .order-cta::after { color: #fff; }
.final-reassurance-list { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 24px 20px 42px; list-style: none; }
.final-reassurance-list li { display: flex; min-width: 0; align-items: center; gap: 8px; font-size: .8125rem; }
.final-reassurance-list svg { flex: 0 0 auto; width: 24px; height: 24px; color: var(--color-gold); }
footer { padding: 10px 20px; color: #fff; background: var(--color-ink); text-align: center; }
footer p { margin: 0; }

@media (max-width: 767px) {
  .band-hero { min-height: 560px; }
  .band-hero .site-header { top: 14px; left: 16px; }
  .band-hero .site-header a { width: 120px; }
  .band-hero .hero-copy { width: 70%; padding: 112px 16px 30px; }
  .band-hero .kicker { margin-bottom: 14px; font-size: .9375rem; }
  .band-hero h1 { margin-bottom: 14px; font-size: 30px; line-height: 1.4; }
  .band-hero .hero-lead { max-width: 230px; margin-bottom: 16px; font-size: .875rem; line-height: 1.7; }
  .band-hero .order-cta { min-height: 48px; max-width: 100%; gap: 12px; padding: 10px 16px; font-size: .875rem; }
  .band-hero .hero-visual img { object-position: 62% center; }
}

@media (min-width: 768px) {
  .band-purchase { padding-inline: 32px; }
  .order-flow { margin-block: 58px 64px; }
  .order-flow__heading { margin-bottom: 40px; }
  .order-flow__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .order-flow__steps::before { top: 61px; right: 16.666%; bottom: auto; left: 16.666%; width: auto; height: 1px; background: linear-gradient(90deg, rgba(181,146,78,.15), var(--color-gold), rgba(181,146,78,.15)); }
  .order-step { display: block; padding: 0 clamp(14px, 2.2vw, 30px); }
  .order-step + .order-step { border-left: 1px solid rgba(217,209,195,.65); }
  .order-step::before { top: 57px; left: 50%; transform: translateX(-50%) rotate(45deg); }
  .order-step__visual { width: min(100%, 220px); height: 120px; margin-bottom: 18px; }
  .order-step__copy h4 { font-size: 1.3rem; }
  .order-step__copy > p:last-child { font-size: .88rem; }
  .order-materials { display: grid; grid-template-columns: minmax(240px, .9fr) minmax(0, 1.6fr); gap: clamp(28px, 5vw, 64px); align-items: start; padding: 34px 0; }
  .order-materials::before { left: 50%; }
  .order-materials__intro { margin: 0; }
  .order-materials__plans { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(22px, 4vw, 44px); }
  .plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  h2 { font-size: 40px; }
  .band-hero { display: grid; grid-template-columns: minmax(0, 0.35fr) minmax(0, 0.65fr); min-height: 620px; }
  .band-hero .site-header { left: max(28px, calc((100vw - var(--content-width)) / 2)); }
  .band-hero .hero-copy { grid-column: 1; width: auto; max-width: 440px; padding: 130px 28px 54px max(28px, calc((100vw - var(--content-width)) / 2)); }
  .band-hero h1 { font-size: 48px; }
  .band-hero .hero-visual { position: relative; grid-column: 2; }
  .band-hero .hero-visual img { object-position: center 70%; }
  .band-hero .hero-visual::after { background: linear-gradient(90deg, var(--color-ivory) 0, rgba(247,244,237,.2) 18%, transparent 40%); }
  .band-story-use { display: grid; grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr); grid-template-rows: auto 1fr; align-items: stretch; }
  .band-story-use #story { display: contents; }
  .band-story-use #story .section-visual { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
  .band-story-use #story .section-copy { grid-column: 2; grid-row: 1; padding: 54px clamp(36px, 5vw, 78px) 14px; }
  .band-story-use #use-cases { grid-column: 2; grid-row: 2; padding: 0 clamp(36px, 5vw, 78px) 46px; }
  .band-gift { display: grid; grid-template-columns: minmax(0, 0.4fr) minmax(0, 0.6fr); align-items: stretch; }
  .band-gift .section-copy { padding: 70px max(36px, calc((100vw - var(--content-width)) / 2)); }
  .band-gift .section-visual { min-height: 0; align-self: center; }
  .band-opening-scenes { padding: 42px 20px; }
  .band-opening-scenes > h2 { font-size: 40px; }
  .opening-scene-grid { gap: 20px; margin-top: 24px; }
  .opening-scene-card picture { border-radius: 20px; }
  .opening-scene-label { font-size: 1.05rem; }
  .benefit-list { gap: 16px; }
  .benefit-list li { font-size: 1.15rem; }
  .band-final { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .band-final .final-cta-copy { padding: 70px 36px 70px max(30px, calc((100vw - var(--content-width)) / 2)); }
  .final-reassurance-list { grid-template-columns: repeat(4, minmax(0, 1fr)); padding-inline: max(30px, calc((100vw - var(--content-width)) / 2)); }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}