:root { --color-primary: #d1143a; --color-secondary: #0f1a33; --color-accent: #d8bd84; --color-ink: #f8f4eb; --color-panel-bg: #F7F4EF; --color-panel-ink: #1B2740 }
* { box-sizing: border-box; margin: 0; padding: 0 }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth }
body { background: var(--color-secondary); font-family: "Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif; color: var(--color-ink); line-height: 1.8 }
.lp { max-width: 750px; margin: 0 auto; position: relative; background: var(--color-secondary) }
.lp img { display: block; width: 100%; height: auto }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap }
.visual { background: var(--color-secondary) }
.hero { padding-bottom: 34px; background: linear-gradient(180deg,#0f1a33 78%,#14213c) }
.hero .visual, .closing .visual { margin: 0 }
.content-section { padding: 64px 20px; background: linear-gradient(180deg,#14213c,#0f1a33 90%) }
.benefits { background: linear-gradient(180deg,#14213c,#17243e 52%,#0f1a33) }
.section-kicker { display: block; margin-bottom: 10px; color: var(--color-accent); font-size: 12px; font-weight: 700; letter-spacing: .2em; text-align: center }
.section-title { color: var(--color-ink); font-family: inherit; font-size: clamp(24px,6.2vw,36px); font-weight: 700; line-height: 1.45; letter-spacing: .03em; text-align: center }
.section-lead { max-width: 36em; margin: 18px auto 0; color: #eee8dc; font-size: clamp(15px,3.8vw,18px); line-height: 1.9; text-align: center }
.rule { width: 44px; height: 1px; margin: 24px auto 32px; background: var(--color-accent) }
.benefit-list { display: grid; gap: 16px; margin: 0 auto; max-width: 620px }
.benefit-card { position: relative; overflow: hidden; border: 1px solid rgba(216,189,132,.55); border-radius: 12px; background: var(--color-panel-bg); padding: 25px 22px 27px; box-shadow: 0 10px 28px rgba(0,0,0,.12) }
.benefit-card::after { content: ''; position: absolute; right: 17px; top: 18px; width: 13px; height: 17px; border-radius: 90% 0 90% 0; background: var(--color-accent); opacity: .65; transform: rotate(-30deg); pointer-events: none }
.benefit-label { display: inline-block; color: var(--color-panel-ink); font-size: 13px; font-weight: 700; letter-spacing: .15em }
.benefit-card h3 { margin-top: 9px; color: var(--color-panel-ink); font-size: clamp(20px,5.3vw,28px); line-height: 1.55 }
.benefit-card p { margin-top: 11px; color: var(--color-panel-ink); font-size: 15px; line-height: 1.85 }
.benefit-note { max-width: 620px; margin: 24px auto 0; color: #eee8dc; font-size: 13px; line-height: 1.9 }
.image-section { padding: 16px 0 48px; background: linear-gradient(180deg,#0f1a33,#14213c 50%,#0f1a33) }
.image-section figure + figure { margin-top: 32px }
.image-section figcaption { padding: 14px 20px 0; color: var(--color-ink); font-size: 15px; font-weight: 700; text-align: center }
.flow { background: linear-gradient(180deg,#0f1a33,#17243e 55%,#0f1a33) }
.flow-panel { max-width: 620px; margin: 0 auto; padding: 26px 22px; border: 1px solid rgba(216,189,132,.55); border-radius: 12px; background: var(--color-panel-bg) }
.flow-panel h3 { color: var(--color-panel-ink); font-size: 18px; line-height: 1.6 }
.flow-panel p { margin-top: 10px; color: var(--color-panel-ink); font-size: 15px }
.steps { max-width: 620px; margin: 24px auto 0; padding-left: 0; color: var(--color-panel-ink); list-style-position: inside }
.steps li { padding: 14px 20px; border: 1px solid rgba(216,189,132,.55); border-radius: 8px; background: var(--color-panel-bg); color: var(--color-panel-ink); font-size: 16px }
.steps li + li { margin-top: 12px }
.steps li::marker { color: var(--color-panel-ink); font-weight: 700 }
.stores { padding-top: 32px; background: linear-gradient(180deg,#0f1a33,#17243e 65%,#0f1a33) }
.stores .visual { margin: 0 -20px 40px }
.period { max-width: 620px; margin: 28px auto 0; border: 1px solid rgba(216,189,132,.55); border-radius: 12px; padding: 20px; background: var(--color-panel-bg); color: var(--color-panel-ink); text-align: center }
.period strong { display: block; color: var(--color-panel-ink); font-size: 13px; letter-spacing: .12em }
.period span { display: block; margin-top: 6px; font-size: clamp(18px,4.8vw,24px); font-weight: 700 }
.store-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; max-width: 620px; margin: 24px auto 0; list-style: none }
.store-list li { display: grid; place-items: center; min-height: 52px; padding: 10px 6px; border: 1px solid rgba(216,189,132,.42); border-radius: 8px; background: var(--color-panel-bg); color: var(--color-panel-ink); font-size: 14px; font-weight: 700; text-align: center; overflow-wrap: anywhere }
.closing { padding: 16px 0 72px; background: linear-gradient(180deg,#0f1a33,#14213c) }
.cta { display: block; width: min(84%,600px); margin: 32px auto 0; position: relative; z-index: 2; background: var(--color-primary); color: #fff; text-align: center; text-decoration: none; font-weight: 700; font-size: clamp(17px,4.6vw,26px); line-height: 1.5; padding: .9em 12px; border-radius: 999px; box-shadow: 0 4px 0 #8f0c28; transition: background .2s,transform .2s,box-shadow .2s }
.cta:hover, .fixed a:hover { background: #b90f32 }
.cta:active { transform: translateY(2px); box-shadow: 0 2px 0 #8f0c28 }
a:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px }
.sitemap { padding: 28px 16px 110px; background: #f6f2f2; font-size: 13px; text-align: center; color: #333 }
.sitemap h2 { font-size: 14px; margin-bottom: 10px; color: #666 }
.sitemap ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px }
.sitemap a { color: #555; text-decoration: underline }
.copy { margin-top: 14px; font-size: 11px; color: #999 }
.fixed { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.95); box-shadow: 0 -2px 10px rgba(0,0,0,.12) }
.fixed a { display: block; max-width: 600px; margin: 0 auto; background: var(--color-primary); color: #fff; text-align: center; text-decoration: none; font-weight: 700; font-size: clamp(16px,4.4vw,20px); padding: .8em 12px; border-radius: 999px; transition: background .2s }
@media (min-width:600px) {
  .content-section { padding: 80px 48px }
  .stores .visual { margin-left: -48px; margin-right: -48px }
  .store-list { grid-template-columns: repeat(3,minmax(0,1fr)) }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior: auto }
  .cta, .fixed a { transition: none }
}