
:root {
  --sun: #F5BA17;
  --sun-tone: #E8A70C;   
  --sun-pale: #FFF2C6;
  --seed: #231607;
  --ink: #1C1712;
  --ink-2: #3A2F21;      
  --ivory: #FFFAEC;
  --muted: #5E5446;      
  --line: rgba(35, 22, 7, .16);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", "Yu Gothic", Meiryo, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.95;
  -webkit-font-smoothing: antialiased;
  line-break: strict;
}
h1, h2, h3, h4, p, figure { margin: 0; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
::selection { background: var(--sun); color: var(--seed); }
h1, h2, h3, .finale-line, .pull { word-break: auto-phrase; text-wrap: balance; }
p { text-wrap: pretty; }
.nb { white-space: nowrap; }
.sp-br { display: inline; }
.pc-br { display: none; }
@media (min-width: 640px) {
  .sp-br { display: none; }
  .pc-br { display: inline; }
}
.latin { font-family: "Barlow Condensed", "Arial Narrow", sans-serif; font-style: italic; font-weight: 800; }
.hero {
  position: relative;
  overflow: hidden;
  background: var(--ivory);
  padding: 72px 16px 72px;
}
.hero-mark {
  position: absolute;
  width: 330px;
  top: -150px;
  right: -165px;
  pointer-events: none;
}
@media (min-width: 768px) { .hero-mark { width: 560px; top: -210px; right: -170px; } }
.hero-in { position: relative; max-width: 60rem; margin: 0 auto; }
.hero-kicker {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--muted);
  margin-bottom: 14px;
}
.hero-title {
  font-family: "Zen Kaku Gothic New", "Hiragino Sans", sans-serif;
  font-weight: 900;
  color: var(--seed);
  font-size: min(112px, calc((100vw - 2rem) / 7.5));
  line-height: 1.05;
  letter-spacing: -.02em;
  transform: skewX(-8deg);
  transform-origin: left bottom;
  word-break: keep-all;
}
.hero-name {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  font-size: min(34px, calc((100vw - 2rem) / 10));
  line-height: 1.1;
  letter-spacing: .06em;
  color: var(--seed);
}
.hero-lead {
  margin-top: 26px;
  font-size: 15px;
  line-height: 1.9;
  font-weight: 600;
  color: var(--ink-2);
}
@media (min-width: 640px) { .hero-lead { font-size: 17px; } }
.hero-photo { margin-top: 36px; }
.frame {
  overflow: hidden;
  border-radius: 6px;
  background: #e9e4d8;
  box-shadow: 0 22px 44px -26px rgba(35, 22, 7, .55);
}
.cap {
  margin-top: 10px;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--ink-2);
}
.sec { position: relative; overflow: hidden; padding: 72px 16px; }
@media (min-width: 768px) { .sec { padding: 104px 24px; } }
.sec-in { position: relative; max-width: 38rem; margin: 0 auto; }
.sec-wide { position: relative; max-width: 60rem; margin: 0 auto; }
.sun { background: var(--sun); color: var(--ink); }
.ivory { background: var(--ivory); }
.sun + .sun { padding-top: 0; }
.rule { position: relative; max-width: 38rem; margin: 0 auto 64px; border: 0; border-top: 1px solid var(--line); }
@media (min-width: 768px) { .rule { margin-bottom: 88px; } }
.tone-mark { position: absolute; width: 300px; pointer-events: none; }
.tone-mark--tr { top: -110px; right: -120px; }
.tone-mark--bl { bottom: -150px; left: -150px; width: 280px; }  
@media (min-width: 768px) { .tone-mark { width: 460px; } .tone-mark--bl { width: 520px; } }
.lap {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--ink-2);
}
.lap b {
  display: inline-block;
  padding: 3px 10px 2px;
  background: var(--seed);
  color: var(--sun);
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-style: italic;
  font-weight: 800;
  font-size: 15px;
  line-height: 1.3;
  letter-spacing: .1em;
}
.lap--plain { justify-content: center; }
.h2 {
  font-size: min(27px, calc((100vw - 2rem) / 14.4));
  font-weight: 800;
  line-height: 1.55;
  letter-spacing: .01em;
  margin-bottom: 24px;
  color: var(--seed);
}
@media (min-width: 640px) { .h2 { font-size: 36px; margin-bottom: 30px; } }
.body p + p { margin-top: 1.15em; }
.body p { font-size: 16px; }
@media (min-width: 640px) { .body p { font-size: 17px; } }
.pull {
  margin: 30px 0;
  padding: 4px 0 4px 18px;
  border-left: 4px solid var(--seed);
  font-size: 19px;
  font-weight: 800;
  line-height: 1.75;
  color: var(--seed);
}
@media (min-width: 640px) { .pull { font-size: 22px; } }
.body .big-line {
  margin: 34px 0 10px;
  font-size: 30px;
  font-weight: 900;
  line-height: 1.4;
  color: var(--seed);
}
@media (min-width: 640px) { .body .big-line { font-size: 38px; } }
.photo { margin: 36px auto; }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 4px; }
.fact { border-top: 3px solid var(--seed); padding: 12px 0 6px; line-height: 1.5; }
.fact b {
  display: block;
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-style: italic;
  font-weight: 800;
  font-size: 30px;
  line-height: 1.05;
  color: var(--seed);
  margin-bottom: 6px;
}
.fact b small { font-size: 16px; font-family: "Hiragino Sans", "Noto Sans JP", sans-serif; font-style: normal; font-weight: 800; margin-left: 1px; }
.fact span { display: block; font-size: 11.5px; font-weight: 600; color: var(--ink-2); }
@media (min-width: 640px) { .fact b { font-size: 38px; } .fact span { font-size: 13px; } }
.body .note-box {
  margin-top: 28px;
  padding: 16px 18px;
  border-left: 3px solid var(--sun);
  background: var(--sun-pale);
  font-size: 14.5px;
  line-height: 1.9;
  color: var(--ink-2);
}
.center { text-align: center; }
.lead { color: var(--muted); max-width: 36rem; margin: 0 auto; }
.cards { display: grid; gap: 14px; margin-top: 40px; }
@media (min-width: 768px) {
  .cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
  .cards-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
}
.card {
  background: #fff;
  border-radius: 6px;
  padding: 24px 22px;
  border: 1px solid rgba(35, 22, 7, .1);
  text-align: left;
}
.sun .card { border-color: transparent; box-shadow: 0 14px 30px -24px rgba(35, 22, 7, .6); }
.num {
  display: inline-block;
  margin-bottom: 14px;
  padding: 1px 9px;
  background: var(--seed);
  color: var(--sun);
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-style: italic;
  font-weight: 800;
  font-size: 17px;
  line-height: 1.4;
  letter-spacing: .06em;
}
.card h3 { font-size: 17.5px; font-weight: 800; line-height: 1.6; margin-bottom: 8px; color: var(--seed); }
.card p { font-size: 14px; line-height: 1.9; color: #4A4136; }
.pdr { margin-top: 12px; display: grid; gap: 4px; }
.pdr a {
  display: inline-flex; align-items: center; gap: .35em;
  font-size: 13.5px; font-weight: 700; color: #7A5500;
  text-decoration: none;
}
.pdr a:hover span { text-decoration: underline; }
.btn-arrow {
  display: inline-block;
  width: 1em; height: 1em;
  flex: 0 0 auto;
  vertical-align: -0.125em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.finale-sec { padding-bottom: calc(72px + 76px); }  
@media (min-width: 768px) { .finale-sec { padding-bottom: calc(104px + 76px); } }
.finale-sec .finale { margin-top: 0; }
.finale { position: relative; text-align: center; margin-top: 88px; }
.finale img { width: 72px; margin: 0 auto 24px; }
.finale-line {
  font-size: min(22px, calc((100vw - 2rem) / 14.5));
  font-weight: 800;
  line-height: 1.85;
  color: var(--seed);
}
@media (min-width: 640px) { .finale-line { font-size: 26px; } }
.finale-sign { margin-top: 18px; font-size: 26px; letter-spacing: .06em; color: var(--seed); }
.join-in { max-width: 36rem; margin: 0 auto; text-align: center; }
.faq-h { font-size: 22px; font-weight: 800; color: var(--seed); line-height: 1.5; }
@media (min-width: 640px) { .faq-h { font-size: 26px; } }
.faq { display: grid; gap: 10px; margin: 18px 0 56px; text-align: left; }
.faq-h--after { margin-top: 64px; }
.faq-h--after + .faq { margin-bottom: 0; }
.faq-item { background: #fff; border: 1px solid rgba(35, 22, 7, .12); border-radius: 6px; }
.faq-item > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 18px 20px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--ink);
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after {
  content: "+";
  margin-left: auto;
  flex: 0 0 auto;
  font-size: 18px;
  line-height: 1;
  font-weight: 400;
  color: #8A6100;   
}
.faq-item[open] > summary::after { content: "\2212"; }
.faq-item[open] > summary { padding-bottom: 10px; }
.faq-item > summary:focus-visible { outline: 2px solid var(--sun-tone); outline-offset: 2px; border-radius: 6px; }
.faq-a { padding: 0 20px 20px; }
.faq-a p { font-size: 14px; line-height: 1.9; color: rgba(28, 23, 18, .75); }
.faq-a p + p { margin-top: .6em; }
.faq-link { display: inline-flex; align-items: center; gap: .4em; font-weight: 700; color: var(--ink); text-decoration: none; }
.faq-link span { text-decoration: underline; text-decoration-color: var(--sun-tone); text-decoration-thickness: 2px; text-underline-offset: 3px; }
@media (min-width: 640px) {
  .faq-item > summary { font-size: 16px; padding: 20px 24px; }
  .faq-a { padding: 0 24px 24px; }
  .faq-a p { font-size: 15px; }
}
.buy-kicker { font-size: 13px; font-weight: 700; letter-spacing: .12em; color: var(--muted); margin-bottom: 8px; }
.buy-h { font-size: 26px; font-weight: 800; color: var(--seed); margin-bottom: 20px; line-height: 1.45; }
@media (min-width: 640px) { .buy-h { font-size: 30px; } }
.buy-card {
  background: #fff;
  border-top: 6px solid var(--sun);
  border-radius: 6px;
  padding: 32px 22px;
  box-shadow: 0 24px 50px -30px rgba(35, 22, 7, .5), 0 0 0 1px rgba(35, 22, 7, .06);
}
@media (min-width: 640px) { .buy-card { padding: 36px 32px; } }
.buy-name { font-weight: 800; letter-spacing: .08em; color: #7A5500; margin-bottom: 6px; }
.buy-set { font-size: min(14px, calc((100vw - 6.5rem) / 20.6)); color: #5E5446; margin-bottom: 18px; white-space: nowrap; }
.buy-was { display: block; font-size: 13px; color: #8C8375; }
.buy-price { display: block; margin-top: 2px; margin-bottom: 26px; font-size: min(38px, calc((100vw - 2rem) / 10.5)); font-weight: 900; color: var(--seed); line-height: 1.3; white-space: nowrap; }
.buy-price small { font-size: min(16px, calc((100vw - 190px) / 12)); font-weight: 500; color: var(--ink); }
.cta {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  width: 100%;
  padding: 17px 20px;
  border-radius: 6px;
  background: var(--seed);
  color: var(--sun);
  font-size: min(18px, calc((100vw - 7rem) / 13.5));
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: .03em;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 14px 28px -14px rgba(35, 22, 7, .7);
  transition: background-color .2s ease;
}
.cta:hover { background: #3B2710; }
.cta:focus-visible { outline: 3px solid var(--sun-tone); outline-offset: 3px; }
@media (min-width: 640px) { .cta { width: auto; padding: 18px 44px; font-size: 18px; } }
.badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 22px; }
.badges span { padding: 3px 10px; border: 1px solid rgba(35, 22, 7, .18); color: var(--seed); font-size: 11.5px; font-weight: 600; }
.buy-info { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); text-align: left; }
.buy-info-t { font-size: 13px; font-weight: 800; color: var(--seed); }
.buy-info-b { margin-top: 4px; font-size: 12.5px; line-height: 1.9; color: #5E5446; }
.legal { margin-top: 24px; text-align: left; font-size: 12.5px; line-height: 1.85; color: rgb(28 23 18 / .72); }
.foot {
  padding: 40px 16px calc(40px + 76px);  
  text-align: center;
  background: var(--seed);
}
.foot img { width: 40px; margin: 0 auto 10px; }
.foot p { font-size: 20px; letter-spacing: .08em; color: var(--sun); line-height: 1.2; }
.stickybar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  padding: .625rem .75rem calc(.625rem + env(safe-area-inset-bottom, 0px));
  background: rgba(35, 22, 7, .96);
  transform: translateY(110%);
  visibility: hidden;
  transition: transform .28s ease, visibility 0s linear .28s;
}
.stickybar.is-on { transform: translateY(0); visibility: visible; transition: transform .28s ease, visibility 0s; }
@media (prefers-reduced-motion: reduce) { .stickybar { transition: visibility 0s; } }
.stickybar a {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  max-width: 26rem; margin: 0 auto;
  padding: .8125rem 1.25rem; border-radius: 6px;
  background: var(--sun); color: var(--seed);
  font-weight: 800; font-size: 1rem; line-height: 1.4; letter-spacing: .03em;
  text-decoration: none;
}
.stickybar a::after { content: "\2192"; flex: 0 0 auto; }
.stickybar a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (max-width: 389px) { .stickybar a { font-size: .9375rem; } }

.bx{word-break:keep-all;overflow-wrap:anywhere}
