:root {
  --bg: #f2e9dc;
  --paper: #fbf7ee;
  --ink: #2d2723;
  --navy: #273548;
  --red: #8c3835;
  --line: #bbae9a;
  --muted: #756b62;
  --serif: "Shippori Mincho", "Yu Mincho", "Hiragino Mincho ProN", serif;
  --sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --content-width: 1080px;
  --page-gutter: clamp(22px, 6.6vw, 34px);
  --section-title-size: clamp(30px, 6.8vw, 34px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.8;
  letter-spacing: 0.018em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.has-mobile-checkout { padding-bottom: calc(78px + env(safe-area-inset-bottom)); }
img { display: block; width: 100%; }
a { color: inherit; }

.story-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: 65px;
  border-bottom: 1px solid rgba(187, 174, 154, 0.7);
  background: var(--bg);
}
.story-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: min(100%, var(--content-width));
  height: 100%;
  margin-inline: auto;
  padding-inline: 20px;
}
.story-brand {
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.08em;
  text-decoration: none;
}
.header-cta {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 8px 16px;
  border-radius: 2px;
  background: var(--red);
  color: var(--paper);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.08em;
  text-decoration: none;
  transition: background-color 180ms ease;
}
.header-cta:hover { background: #74302e; }
.header-cta:focus-visible { outline: 3px solid rgba(140, 56, 53, 0.28); outline-offset: 2px; }
.story-shell { overflow: clip; }
.story-section { position: relative; padding-inline: var(--page-gutter); }
.section-inner { width: min(100%, var(--content-width)); margin-inline: auto; }
.display-title, .section-title, .appeal-item h3 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 600;
}
.display-title {
  font-size: clamp(36px, 8.6vw, 43px);
  line-height: 1.43;
  letter-spacing: 0.086em;
}
.section-title {
  max-width: 15em;
  font-size: var(--section-title-size);
  line-height: 1.42;
  letter-spacing: 0.08em;
}
.section-body { margin-top: 58px; }
.section-body p, .story-copy p { margin: 0; }
.section-body p + p, .story-copy p + p { margin-top: 1.8em; }

.hero { min-height: min(1165px, 233vw); padding-top: 25px; padding-bottom: 45px; }
.hero-inner, .beginning-layout, .experience-layout, .purchase-layout { max-width: 434px; }
.hero-visual { aspect-ratio: 1; margin: 0; }
.hero-visual img { height: 100%; object-fit: cover; }
.hero-copy { margin-top: 16px; }
.hero-kicker {
  margin: 4px 0 0;
  color: var(--navy);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.046em;
}
.story-copy { margin-top: 28px; font-size: 18px; line-height: 1.67; }
.story-copy strong { font-weight: 700; }
.purchase-summary { margin-top: 37px; padding-top: 18px; border-top: 1px solid var(--line); }
.price-lockup {
  margin: 0;
  color: var(--navy);
  font-family: var(--serif);
  text-align: center;
}
.cancel-note { margin: 8px 0 4px; color: var(--red); font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-align: center; }
.lp-plan-picker { min-width: 0; margin: 0; padding: 0; border: 0; }
.lp-plan-picker legend { width: 100%; margin-bottom: 14px; color: var(--navy); font-family: var(--serif); font-size: 17px; font-weight: 600; text-align: center; }
.lp-plan-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding-top: 9px; }
.lp-plan-card { position: relative; display: block; min-width: 0; cursor: pointer; }
.lp-plan-card:has(input[value="one_time"])::before { position: absolute; top: -9px; left: 50%; z-index: 1; padding: 6px 11px; transform: translateX(-50%); border-radius: 999px; background: #b48c39; box-shadow: 0 3px 9px rgba(56, 43, 24, .14); color: #fffaf0; content: "一番人気"; font-family: var(--sans); font-size: 10px; font-weight: 700; letter-spacing: .07em; line-height: 1.2; white-space: nowrap; }
.lp-plan-card input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.lp-plan-card-body { display: flex; min-height: 163px; flex-direction: column; align-items: center; padding: 23px 6px 9px; border: 2px solid #d9cdb4; border-radius: 15px; background: rgba(251, 247, 238, .7); color: var(--navy); text-align: center; transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease; }
.lp-plan-card:has(input:checked) .lp-plan-card-body { border-color: #b48c39; background: #fffaf0; box-shadow: 0 3px 14px rgba(56, 43, 24, .08); }
.lp-plan-card:focus-within .lp-plan-card-body { outline: 3px solid rgba(140, 56, 53, .3); outline-offset: 3px; }
.lp-plan-radio { display: grid; width: 22px; height: 22px; place-items: center; border: 2px solid #cfc4a9; border-radius: 50%; }
.lp-plan-card:has(input:checked) .lp-plan-radio { border-color: #b48c39; background: #b48c39; }
.lp-plan-card:has(input:checked) .lp-plan-radio::after { width: 8px; height: 8px; border-radius: 50%; background: #fffaf0; content: ''; }
.lp-plan-name { display: flex; min-height: 20px; align-items: center; margin-top: 6px; font-family: var(--serif); font-size: 14px; font-weight: 600; line-height: 1.3; white-space: nowrap; }
.lp-plan-price { display: flex; height: 35px; align-items: baseline; justify-content: center; margin-top: 2px; color: #8d6b22; font-family: var(--serif); font-size: clamp(22px, 6.4vw, 29px); font-weight: 700; line-height: 1; white-space: nowrap; }
.lp-plan-price small { margin-left: 1px; color: var(--navy); font-family: var(--sans); font-size: 10px; font-weight: 500; }
.lp-plan-total { display: flex; height: 13px; align-items: center; justify-content: center; margin-top: 4px; color: var(--muted); font-family: var(--sans); font-size: 9px; line-height: 1.35; white-space: nowrap; }
.lp-plan-card:has(input[value="one_time"]) .lp-plan-total { color: var(--red); font-weight: 700; }
.lp-plan-foot { display: flex; height: 13px; align-items: center; justify-content: center; margin-top: 2px; color: var(--muted); font-family: var(--sans); font-size: 9px; line-height: 1.35; white-space: nowrap; }
.lp-plan-tax { margin: 10px 0 0; color: var(--muted); font-family: var(--sans); font-size: 11px; text-align: center; }
.lp-plan-picker + .checkout-button, .purchase-action .lp-plan-picker + .checkout-button { margin-top: 17px; }
.price-line { display: flex; align-items: baseline; justify-content: center; gap: 8px; line-height: 1; }
.price-eyebrow { font-size: 13px; font-weight: 600; letter-spacing: 0.14em; }
.price-amount { font-size: clamp(32px, 8vw, 39px); font-weight: 600; letter-spacing: 0.025em; }
.price-amount small { margin-left: 3px; font-size: 15px; font-weight: 600; }
.price-meta {
  display: block;
  margin-top: 9px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.09em;
}
.checkout-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 58px;
  margin-top: 10px;
  padding: 14px 24px;
  border: 0;
  border-radius: 3px;
  background: var(--red);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.06em;
  text-align: center;
  text-decoration: none;
  transition: transform 180ms ease, background-color 180ms ease;
}
.checkout-button:hover { transform: translateY(-1px); background: #74302e; }
.checkout-button:focus-visible { outline: 3px solid rgba(140, 56, 53, 0.28); outline-offset: 3px; }
.checkout-button[aria-disabled="true"] {
  cursor: not-allowed;
  background: #8c3835;
  opacity: 1;
  pointer-events: none;
}

.beginning { min-height: min(1057px, 211.4vw); padding-top: 64px; padding-bottom: 82px; background: var(--paper); }
.beginning-body { margin-top: 28px; color: var(--navy); }
.beginning-body p + p { margin-top: 0; }
.beginning-body p:nth-child(3), .beginning-body p:nth-child(5) { margin-top: 1.8em; }
.story-map { aspect-ratio: 428 / 241; margin: 38px 0 0; overflow: hidden; }
.story-map img { height: 100%; object-fit: cover; }

.experience { min-height: min(967px, 193.4vw); padding-top: 76px; padding-bottom: 47px; }
.experience .section-body { margin-top: 66px; }
.experience .section-body p + p { margin-top: 0; }
.experience .section-body p:nth-child(2) { margin-top: 1.8em; }
.experience-visual { width: min(82%, 356px); aspect-ratio: 1; margin: 40px auto 0; }
.experience-visual img { height: 100%; object-fit: cover; }

.story-map,
.experience-visual,
.purchase-visual {
  padding: 5px;
  overflow: visible;
  background: #fffaf0;
  box-shadow: 0 14px 32px rgba(63, 49, 36, 0.13), 0 2px 5px rgba(63, 49, 36, 0.1);
}
.story-map { transform: rotate(-0.45deg); }
.experience-visual { transform: rotate(0.7deg); }
.purchase-visual { transform: rotate(-0.35deg); }

.appeal { min-height: min(879px, 175.8vw); padding-top: 112px; padding-bottom: 46px; background: var(--paper); }
.appeal .section-inner { max-width: 456px; }
.appeal-list { display: grid; gap: 34px; margin-top: 52px; }
.appeal-item {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: start;
  gap: 16px;
}
.appeal-icon { width: 72px; height: 72px; margin-top: 1px; object-fit: cover; }
.appeal-item h3 {
  color: var(--navy);
  font-size: clamp(21px, 4.8vw, 24px);
  line-height: 1.38;
  letter-spacing: 0.073em;
}
.appeal-item p { margin: 8px 0 0; color: var(--muted); font-size: 18px; line-height: 1.48; }

.purchase { min-height: min(860px, 172vw); padding-top: 112px; padding-bottom: 55px; scroll-margin-top: 65px; }
.purchase .section-body { margin-top: 10px; font-size: 18px; line-height: 1.67; }
.purchase-visual { aspect-ratio: 421 / 283; margin: 47px 0 0; overflow: hidden; }
.purchase-visual img { height: 100%; object-fit: cover; }
.purchase-action { margin-top: 34px; }
.purchase-invitation {
  margin: 0 0 24px;
  color: var(--navy);
  font-size: 15px;
  line-height: 1.8;
  letter-spacing: 0.08em;
  text-align: center;
}
.purchase-invitation::after {
  display: block;
  width: 24px;
  height: 1px;
  margin: 15px auto 0;
  content: "";
  background: var(--red);
  opacity: 0.65;
}
.purchase-price {
  margin: 0;
}
.purchase-price .price-amount { font-size: clamp(35px, 9vw, 44px); }
.purchase-action .checkout-button { margin-top: 28px; }

.faq { padding-top: 104px; padding-bottom: 104px; background: var(--paper); }
.faq-inner { max-width: 760px; }
.faq-list { margin-top: 52px; border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary {
  position: relative;
  padding: 24px 42px 24px 0;
  color: var(--navy);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.6;
  cursor: pointer;
  list-style: none;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  position: absolute;
  top: 50%;
  right: 4px;
  content: "+";
  transform: translateY(-50%);
  color: var(--red);
  font-family: var(--sans);
  font-size: 24px;
  font-weight: 400;
  transition: transform 220ms ease;
}
.faq-list details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-list details p {
  margin: -4px 0 24px;
  padding-right: 34px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.9;
}
.faq-list details[open] p { animation: faq-reveal 260ms ease both; }

@keyframes faq-reveal {
  from { transform: translateY(-5px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

.story-footer {
  min-height: 285px;
  padding: 50px 22px 34px;
  border-top: 1px solid var(--line);
  background: var(--navy);
  color: var(--paper);
}
.story-footer-inner { width: min(100%, var(--content-width)); margin-inline: auto; }
.story-footer-brand, .story-footer a { text-decoration: none; }
.story-footer-brand { font-size: 22px; font-weight: 600; line-height: 2; letter-spacing: 0.1em; }
.story-footer-copy {
  margin: 4px 0 0;
  color: rgba(251, 247, 238, 0.72);
  font-size: 13px;
  line-height: 2;
  letter-spacing: 0.07em;
}
.story-footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-top: 24px;
  font-family: var(--sans);
  font-size: 12px;
  line-height: 2;
  letter-spacing: 0.06em;
}
.story-footer-note {
  margin: 22px 0 0;
  color: rgba(251, 247, 238, 0.5);
  font-family: var(--sans);
  font-size: 10px;
  line-height: 2;
  letter-spacing: 0.08em;
}

.mobile-checkout {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  transform: translateY(110%);
  border-top: 1px solid var(--line);
  background: rgba(251, 247, 238, 0.97);
  box-shadow: 0 -8px 24px rgba(45, 39, 35, 0.08);
  transition: transform 280ms ease;
}
.mobile-checkout.is-visible { transform: translateY(0); }
.mobile-checkout-price {
  flex: 0 0 auto;
  margin: 0;
  color: var(--navy);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
}
.mobile-checkout .checkout-button { min-height: 50px; margin: 0; padding-inline: 12px; font-size: 14px; }

.reveal-ready [data-reveal] {
  transform: translateY(14px);
  opacity: 0;
  transition: transform 650ms cubic-bezier(0.22, 1, 0.36, 1), opacity 650ms ease;
}
.reveal-ready [data-reveal].is-revealed { transform: none; opacity: 1; }
.reveal-ready .story-map.is-revealed { transform: rotate(-0.45deg); }
.reveal-ready .experience-visual.is-revealed { transform: rotate(0.7deg); }
.reveal-ready .purchase-visual.is-revealed { transform: rotate(-0.35deg); }

@media (max-width: 420px) {
  body { font-size: 16px; }
  .display-title {
    font-size: clamp(27px, 7.7vw, 32px);
    white-space: nowrap;
  }
  .hero-kicker { font-size: 19px; }
  .story-copy, .appeal-item p, .purchase .section-body { font-size: 16px; }
  .appeal-item { grid-template-columns: 64px minmax(0, 1fr); gap: 14px; }
  .appeal-icon { width: 64px; height: 64px; }
}

@media (min-width: 768px) {
  :root { --page-gutter: 40px; }
  .story-header-inner { padding-inline: var(--page-gutter); }
  .hero, .beginning, .experience, .appeal, .purchase { min-height: 0; }
  .hero { padding-top: 72px; padding-bottom: 92px; }
  .hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    column-gap: clamp(54px, 7vw, 96px);
    max-width: var(--content-width);
  }
  .hero-visual { grid-row: 1 / span 2; }
  .hero-copy { align-self: center; margin-top: 0; }
  .purchase-summary { grid-column: 2; }
  .beginning, .experience, .appeal, .purchase { padding-top: 104px; padding-bottom: 104px; }
  .beginning-layout, .experience-layout, .purchase-layout { max-width: var(--content-width); }
  .beginning-layout, .experience-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.86fr);
    align-items: center;
    gap: clamp(60px, 8vw, 112px);
  }
  .story-map, .experience-visual { width: 100%; margin: 0; }
  .appeal .section-inner { max-width: var(--content-width); }
  .appeal-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px; margin-top: 68px; }
  .appeal-item { grid-template-columns: 80px minmax(0, 1fr); }
  .appeal-icon { width: 80px; height: 80px; }
  .appeal-item p { font-size: 16px; }
  .purchase-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(420px, 1.1fr);
    column-gap: clamp(60px, 8vw, 112px);
    align-items: center;
  }
  .purchase-visual { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
  .purchase-action { margin-top: 46px; }
  .purchase-action .checkout-button { margin-top: 28px; }
  .story-footer { padding-inline: var(--page-gutter); }
  .mobile-checkout {
    left: 50%;
    width: min(560px, calc(100% - 40px));
    transform: translate(-50%, 110%);
    border: 1px solid var(--line);
    border-bottom: 0;
    border-radius: 4px 4px 0 0;
  }
  .mobile-checkout.is-visible { transform: translate(-50%, 0); }
}

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