:root {
  color-scheme: light;
  --green: #4b5d3f;
  --ink: #364533;
  --coral: #e28763;
  --cta: #d87151;
  --cta-readable: #b75a40; /* Coral adjusted for white button-label contrast. */
  --paper: #faf6ef;
  --sage: #eef1e5;
  --peach: #f7ece5;
  --line: #d9ddd2;
  --muted: #626b5b;
  --serif: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif;
  --sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 94px; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); font-size: 15px; line-height: 1.95; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-underline-offset: 5px; }
img { display: block; max-width: 100%; height: auto; }
figure, p, h1, h2, h3 { margin: 0; }
ul, ol { padding: 0; margin: 0; list-style: none; }
button, summary, a { -webkit-tap-highlight-color: transparent; }
a:focus-visible, summary:focus-visible { outline: 3px solid var(--green); outline-offset: 6px; border-radius: 3px; }
::selection { background: #e2e9d8; color: var(--ink); }
.shell { width: min(1180px, calc(100% - 112px)); margin-inline: auto; position: relative; z-index: 2; }
.icon-definitions { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 40px; height: 40px; fill: none; stroke: currentColor; stroke-width: 1.45; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.skip-link { position: fixed; left: 16px; top: 12px; transform: translateY(-160%); z-index: 100; background: white; padding: 10px 20px; }
.skip-link:focus { transform: none; }
.site-header { position: sticky; top: 0; background: rgb(255 254 251 / 97%); z-index: 30; border-bottom: 1px solid rgb(217 221 210 / 45%); }
.header-inner { max-width: 1440px; min-height: 76px; padding: 12px 54px; margin-inline: auto; display: flex; align-items: center; gap: 30px; }
.brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; white-space: nowrap; font-family: var(--serif); font-size: 20px; font-weight: 600; letter-spacing: .07em; color: var(--green); }
.brand .icon { width: 30px; height: 34px; }
.desktop-nav { display: flex; align-items: center; justify-content: flex-end; gap: 26px; margin-left: auto; }
.desktop-nav a { font-size: 12px; letter-spacing: .04em; text-decoration: none; padding-block: 10px; font-weight: 500; white-space: nowrap; }
.desktop-nav a:hover { text-decoration: underline; }
.button { display: inline-flex; justify-content: center; align-items: center; gap: 24px; padding: 15px 31px; min-height: 54px; border: 1px solid transparent; border-radius: 50px; color: #fff; background: var(--cta-readable); text-decoration: none; font-weight: 600; letter-spacing: .08em; line-height: 1.6; box-shadow: 0 7px 20px rgb(165 83 53 / 8%); transition: background .2s, transform .2s, box-shadow .2s; }
.button:hover { background: #a34e37; transform: translateY(-2px); box-shadow: 0 8px 24px rgb(165 83 53 / 18%); }
.arrow { font-size: 28px; font-weight: 400; line-height: 1; }
.header-button { padding: 10px 23px; min-height: 42px; font-size: 12px; letter-spacing: .1em; flex-shrink: 0; }
.header-button .arrow { display: none; }
.mobile-menu { display: none; }
.hero { position: relative; min-height: 610px; display: grid; align-items: center; isolation: isolate; overflow: hidden; }
.hero-photo { position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: center 15%; z-index: -3; }
.hero-wash { position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, rgb(250 246 239 / 95%) 0%, rgb(250 246 239 / 85%) 24%, rgb(250 246 239 / 52%) 45%, transparent 66%); }
.hero-inner { padding-block: 56px 65px; }
.audience { font-size: 11px; font-weight: 500; letter-spacing: .15em; border-bottom: 1px solid #8b997c; width: fit-content; padding-bottom: 5px; margin-bottom: 28px; }
.hero-kicker { font-family: var(--serif); font-size: clamp(15px, 1.55vw, 22px); font-weight: 600; letter-spacing: .06em; }
h1 { font-family: var(--serif); font-size: clamp(37px, 5.1vw, 68px); font-weight: 500; letter-spacing: .035em; line-height: 1.55; color: #314429; margin: 4px 0 21px; }
.hero-description { font-size: 16px; letter-spacing: .04em; line-height: 2; font-weight: 500; }
.hero-button { font-size: 18px; padding: 18px 39px; margin: 27px 0 17px; min-width: 354px; }
.text-link { display: block; width: fit-content; font-size: 12px; font-weight: 500; letter-spacing: .05em; line-height: 1.8; padding-block: 8px; }
.text-link span { padding-left: 5px; }
.section { position: relative; padding-block: 58px; isolation: isolate; overflow: hidden; }
.two-column { display: grid; grid-template-columns: 1fr 1fr; gap: 46px; align-items: center; }
.section-copy { position: relative; z-index: 2; }
.section-heading { display: flex; align-items: flex-start; gap: 23px; margin-bottom: 19px; }
.section-number { width: 70px; height: 70px; display: grid; place-items: center; flex: 0 0 70px; border-radius: 50%; color: white; background: #929e81; font-family: var(--serif); font-size: 32px; font-weight: 400; letter-spacing: -.03em; line-height: 1; }
.section-label { color: #667953; font-size: 11px; letter-spacing: .23em; line-height: 1.4; margin: 5px 0 11px; font-weight: 500; }
h2 { color: var(--green); font-family: var(--serif); font-weight: 500; font-size: clamp(25px, 2.4vw, 34px); letter-spacing: .025em; line-height: 1.55; }
.indented-copy { padding-left: 93px; }
.indented-copy p { line-height: 1.95; letter-spacing: .015em; font-size: 14px; }
.indented-copy p + p { margin-top: 8px; }
.indented-copy .text-link { margin-top: 14px; }
.botanical::before { content: ""; width: 250px; height: 350px; position: absolute; z-index: 0; left: -30px; bottom: -45px; background: url('/okama/assets/img/leaves-left.webp') bottom left / contain no-repeat; pointer-events: none; opacity: .8; }
.about { padding-block: 46px; }
.device-figure { position: relative; }
.device-figure img { border-radius: 5px; width: 100%; }
.device-figure figcaption { color: var(--muted); text-align: right; font-size: 10px; padding-top: 8px; line-height: 1.7; }
.campaign { background: linear-gradient(100deg, #f8ebe1, #faf4ec 65%, #f7ece5); padding-block: 48px; }
.campaign .section-number, .blog .section-number, .start .section-number { background: #d8937b; }
.campaign .section-label, .blog .section-label, .start .section-label { color: #b65d41; }
.accent { color: #c86646; }
.heading-price { font-size: 1.35em; letter-spacing: -.035em; line-height: 1; }
.offer-card { position: relative; min-height: 283px; display: flex; align-items: center; justify-content: flex-end; background: rgb(255 255 255 / 44%); border: 1px solid rgb(255 255 255 / 40%); border-radius: 22px; padding: 20px 28px 20px 128px; }
.offer-card::after { content: ""; width: 98px; height: 183px; background: url('/okama/assets/img/leaves-right.webp') center / contain no-repeat; position: absolute; bottom: -15px; right: -40px; pointer-events: none; }
.offer-badge { position: absolute; top: 13px; left: -7px; width: 136px; height: 136px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 50%; background: #d87151; color: white; font-size: 14px; line-height: 1.5; transform: rotate(-7deg); }
.offer-badge strong { font-family: var(--serif); font-size: 33px; font-weight: 500; }
.offer-badge strong span { font-size: 15px; margin-left: 3px; }
.offer-content { text-align: center; width: 100%; position: relative; z-index: 1; }
.offer-label { color: #b95a3c; font-size: 19px; font-weight: 500; letter-spacing: .04em; }
.offer-price { color: #c66545; font-family: var(--serif); font-size: 25px; line-height: 1.2; margin-top: 8px; white-space: nowrap; }
.offer-price strong { font-size: 72px; font-weight: 500; letter-spacing: -.04em; }
.offer-price > span { font-size: 32px; }
.offer-tax { font-size: 13px; margin: 4px 0 19px; }
.offer-content .button { width: 100%; min-height: 50px; padding: 12px 14px; }
.offer-note { font-size: 10px; color: var(--muted); margin-top: 9px; }
.price-comparison { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 32px; padding: 36px 40px; border: 1px solid rgb(255 255 255 / 40%); border-radius: 22px; background: rgb(255 253 248 / 78%); }
.special-price-message { text-align: center; }
.special-price-kicker { color: #b95a3c; font-size: 12px; font-weight: 700; letter-spacing: .12em; }
.special-price-message h3 { margin-top: 8px; font-family: var(--serif); color: var(--green); font-size: 22px; font-weight: 500; letter-spacing: .015em; line-height: 1.65; }
.special-price-message h3 span { color: var(--muted); font-size: 16px; font-weight: 400; text-decoration: line-through; text-decoration-thickness: 1px; }
.special-price-message h3 strong { display: block; margin-top: 4px; color: #bf5b3d; font-size: 32px; font-weight: 600; }
.special-price-message > p:not(.special-price-kicker) { margin-top: 12px; font-size: 13px; line-height: 1.8; }
.regular-plan-summary { border-top: 1px solid var(--line); padding-top: 26px; }
.regular-plan-heading { color: var(--ink); font-size: 14px; font-weight: 700; letter-spacing: .04em; text-align: center; }
.regular-plan-heading small { color: var(--muted); font-size: 10px; font-weight: 400; }
.regular-plan-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 18px; }
.regular-plan-list li { min-height: 124px; padding: 20px 12px; display: flex; flex-direction: column; justify-content: center; background: #fffdfa; border: 1px solid rgb(217 221 210 / 80%); border-radius: 16px; text-align: center; }
.regular-plan-list span { color: var(--green); font-size: 13px; font-weight: 700; }
.regular-plan-list strong { margin-top: 4px; color: #b95a3c; font-family: var(--serif); font-size: 20px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
.regular-plan-list small { margin-top: 5px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.plan-features-link { display: table; margin: 22px auto 0; text-align: center; }
.together { background: linear-gradient(110deg, var(--paper), #fcfaf5); padding-block: 54px; }
.together .two-column { grid-template-columns: 1fr 1.12fr; gap: 24px; }
.growth-flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; text-align: center; }
.growth-flow li { position: relative; }
.growth-flow li:not(:last-child)::after { content: '→'; position: absolute; right: -17px; top: 33px; color: var(--green); font-size: 22px; }
.flow-icon { display: flex; align-items: center; justify-content: center; width: 104px; height: 104px; max-width: 100%; margin-inline: auto; border-radius: 50%; background: radial-gradient(circle, #fcfaf5 35%, #f2eadb); color: var(--green); }
.flow-icon .icon { width: 44px; height: 44px; }
.growth-flow li:last-child .icon { fill: #ecc0a6; }
.growth-flow p { font-size: 12px; line-height: 1.75; font-weight: 500; margin-top: 14px; }
.photo-section .section-photo { position: absolute; top: 0; right: 0; width: 58%; height: 100%; z-index: -2; }
.section-photo img { width: 100%; height: 100%; object-fit: cover; }
.photo-section::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--paper) 37%, rgb(250 246 239 / 96%) 44%, rgb(250 246 239 / 70%) 51%, transparent 69%); pointer-events: none; }
.photo-section .section-copy { max-width: 660px; }
.blog { min-height: 392px; padding-block: 53px; }
.blog .section-photo img { object-position: 60% 55%; }
.blog .section-copy { max-width: 635px; }
.system { background: linear-gradient(120deg, #faf6ef 45%, #f6f4e9); padding-block: 49px 41px; }
.system::after { content: ""; position: absolute; width: 300px; height: 350px; right: -75px; top: -76px; background: url('/okama/assets/img/leaves-right.webp') center / contain no-repeat; opacity: .55; pointer-events: none; }
.system-grid { display: grid; grid-template-columns: 1.17fr 1fr; gap: 48px; align-items: center; }
.system > .shell > .section-heading { margin-bottom: 27px; }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.feature-grid li { min-height: 150px; border-radius: 15px; background: rgb(239 234 215 / 54%); padding: 23px 10px 19px; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; }
.feature-grid .icon { width: 40px; height: 40px; color: var(--green); margin-bottom: 14px; }
.feature-grid h3 { font-size: 13px; font-weight: 500; line-height: 1.5; }
.feature-grid h3 small { font-size: 11px; }
.demo-cta { margin-top: 32px; text-align: center; }
.blog-cta { margin-top: 28px; }
.plan-features { margin-top: 44px; scroll-margin-top: 24px; }
.plan-features-intro { text-align: center; }
.plan-features-intro h3 { margin-top: 8px; color: var(--green); font-family: var(--serif); font-size: 26px; font-weight: 500; line-height: 1.6; }
.plan-features-intro > p:not(.section-label) { margin-top: 12px; font-size: 13px; }
.plan-features-intro .feature-campaign-note { display: inline-block; padding: 10px 20px; border-radius: 14px; background: var(--peach); color: var(--cta-readable); }
.feature-accordions { display: grid; gap: 16px; margin-top: 26px; }
.feature-accordion { min-width: 0; border: 1px solid var(--line); border-radius: 22px; background: rgb(255 253 248 / 90%); }
.feature-accordion summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 23px 28px; border-radius: 22px; cursor: pointer; list-style: none; color: var(--green); }
.feature-accordion summary::-webkit-details-marker { display: none; }
.feature-accordion summary:hover { background: rgb(238 241 229 / 60%); }
.feature-summary-title { display: block; font-size: 16px; font-weight: 600; line-height: 1.7; }
.feature-summary-description { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; line-height: 1.7; }
.feature-toggle { position: relative; flex: 0 0 32px; height: 32px; border-radius: 50%; background: var(--sage); }
.feature-toggle::before, .feature-toggle::after { content: ''; position: absolute; top: 15px; left: 10px; width: 12px; height: 2px; background: var(--green); }
.feature-toggle::after { transform: rotate(90deg); }
.feature-accordion[open] .feature-toggle::after { display: none; }
.feature-accordion-content { margin-inline: 28px; padding-block: 24px 28px; border-top: 1px solid var(--line); }
.common-feature-groups { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 28px; }
.common-feature-group h4 { margin: 0 0 12px; color: var(--green); font-size: 13px; font-weight: 600; }
.common-feature-list { display: grid; gap: 10px; }
.common-feature-list li { position: relative; padding-left: 22px; font-size: 13px; line-height: 1.75; }
.common-feature-list li::before { content: ''; position: absolute; left: 3px; top: 6px; width: 6px; height: 10px; border-right: 2px solid var(--green); border-bottom: 2px solid var(--green); transform: rotate(45deg); }
.feature-subaccordions { display: grid; gap: 10px; margin-top: 16px; }
.feature-subaccordion { min-width: 0; border: 1px solid var(--line); border-radius: 14px; background: rgb(255 253 248 / 70%); }
.feature-subaccordion summary { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 14px; cursor: pointer; list-style: none; color: var(--green); }
.feature-subaccordion summary::-webkit-details-marker { display: none; }
.feature-subaccordion summary:hover { background: rgb(238 241 229 / 60%); }
.feature-sub-title { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; line-height: 1.7; }
.feature-sub-count { flex: 0 0 auto; color: var(--muted); font-size: 12px; }
.feature-sub-toggle { position: relative; flex: 0 0 24px; height: 24px; border-radius: 50%; background: var(--sage); }
.feature-sub-toggle::before, .feature-sub-toggle::after { content: ''; position: absolute; top: 11px; left: 7px; width: 10px; height: 2px; background: var(--green); }
.feature-sub-toggle::after { transform: rotate(90deg); }
.feature-subaccordion[open] .feature-sub-toggle::after { display: none; }
.feature-detail-list { margin: 0; padding: 4px 18px 16px; }
.feature-detail-list > div { padding: 12px 0; border-top: 1px solid var(--line); }
.feature-detail-list dt { margin: 0; color: var(--green); font-size: 13px; font-weight: 600; line-height: 1.7; }
.feature-detail-list dd { margin: 2px 0 0; color: var(--ink, inherit); font-size: 13px; line-height: 1.8; overflow-wrap: anywhere; }
.feature-plan-badge { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--sage); color: var(--green); font-size: 11px; font-weight: 600; line-height: 1.6; vertical-align: 1px; white-space: nowrap; }
.feature-plan-badge.is-premium { background: var(--green); color: #fff; }
.feature-table-note { font-size: 13px; }
.feature-table-key { margin-top: 8px; color: var(--muted); font-size: 12px; }
.feature-status { display: inline-block; font-size: 23px; line-height: 1.3; font-weight: 500; }
.feature-status-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.feature-scroll-hint { display: none; }
.feature-table-scroll { overflow-x: auto; margin-top: 16px; border: 1px solid var(--line); border-radius: 14px; }
.feature-table-scroll:focus-visible { outline: 3px solid var(--green); outline-offset: 4px; }
.feature-comparison-table { width: 100%; min-width: 600px; border-collapse: collapse; color: var(--green); font-size: 13px; }
.feature-comparison-table caption { padding: 12px 16px; color: var(--muted); text-align: left; font-size: 12px; }
.feature-comparison-table th, .feature-comparison-table td { padding: 14px 16px; border-top: 1px solid var(--line); text-align: center; }
.feature-comparison-table thead { background: var(--sage); }
.feature-comparison-table th:first-child { width: 31%; text-align: left; }
.feature-comparison-table tbody th { position: sticky; left: 0; background: #fffdf8; }
.feature-comparison-table thead th:first-child { position: sticky; left: 0; background: var(--sage); }
.feature-comparison-table th small { display: block; margin-top: 3px; font-weight: 400; }
.feature-comparison-table tbody th { font-weight: 500; }
.feature-comparison-table td { font-weight: 600; }
.feature-comparison-table .premium-column { background: var(--peach); color: var(--cta-readable); }
.feature-comparison-table .feature-unavailable { color: var(--muted); font-size: 12px; font-weight: 400; }
.support { min-height: 469px; padding-block: 46px 35px; }
.support .section-photo { width: 43%; }
.support .section-photo img { object-position: center 36%; }
.support::after { background: linear-gradient(90deg, var(--paper) 45%, rgb(250 246 239 / 97%) 51%, rgb(250 246 239 / 66%) 58%, transparent 75%); }
.support .section-copy { max-width: 650px; }
.support-options { margin-top: 28px; margin-left: 93px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; width: min(760px, calc(100% - 93px)); position: relative; z-index: 2; }
.support-options li { background: rgb(255 253 249 / 94%); border: 1px solid rgb(217 221 210 / 30%); border-radius: 15px; padding: 16px 12px; display: flex; align-items: center; gap: 16px; justify-content: center; box-shadow: 0 5px 20px rgb(90 68 37 / 3%); }
.support-options .icon { width: 34px; height: 34px; color: var(--green); }
.support-options span { font-size: 12px; line-height: 1.7; font-weight: 500; }
.indented-copy p.support-fee { margin-top: 14px; padding: 12px 16px; border-left: 3px solid var(--green); background: rgb(255 253 249 / 80%); border-radius: 0 10px 10px 0; font-size: 14px; line-height: 1.8; }
.indented-copy p.support-fee small { font-size: 12px; color: var(--muted); }
.start { min-height: 363px; padding-block: 45px; }
.start .section-photo { width: 53%; }
.start .section-photo img { object-position: 65% center; }
.start::after { background: linear-gradient(90deg, var(--paper) 40%, rgb(250 246 239 / 96%) 46%, rgb(250 246 239 / 73%) 56%, transparent 78%); }
.start .section-copy { max-width: 820px; }
.start .indented-copy > p:first-child { font-size: 13px; }
.start-button { gap: 14px; padding: 12px 26px; margin-top: 23px; font-weight: 500; letter-spacing: .015em; }
.start-button strong { font-family: var(--serif); font-size: 32px; font-weight: 600; line-height: 1; }
.start-button-label { font-size: 12px; }
.indented-copy .start-note { font-size: 10px; color: var(--muted); margin-top: 12px; }
.closing { position: relative; text-align: center; padding: 51px 24px 58px; isolation: isolate; overflow: hidden; }
.closing::before, .closing::after { content: ''; position: absolute; width: 310px; height: 330px; bottom: -110px; background: url('/okama/assets/img/leaves-left.webp') center / contain no-repeat; z-index: -1; opacity: .64; }
.closing::before { left: -68px; filter: blur(3px); }
.closing::after { right: -75px; transform: scaleX(-1); }
.closing > .icon { display: block; margin: 0 auto 15px; width: 30px; height: 36px; color: var(--green); }
.closing > p { font-family: var(--serif); font-size: 25px; font-weight: 500; letter-spacing: .045em; }
.closing > span { display: block; margin-top: 11px; font-size: 13px; letter-spacing: .05em; }
.closing > span::after { content: ''; display: block; width: 180px; height: 8px; border-top: 1px solid #bdba99; border-radius: 50%; margin: 18px auto 0; }
.site-footer { border-top: 1px solid var(--line); padding: 22px 0; color: var(--muted); background: #f7f4ec; }
.footer-inner { display: flex; align-items: center; gap: 30px; font-size: 11px; }
.footer-inner > span { font-family: var(--serif); font-size: 14px; color: var(--green); }
.footer-inner nav { display: flex; gap: 20px; margin-left: auto; }
.footer-inner nav a { padding-block: 8px; }
.footer-inner small { font-size: 10px; }
.mobile-break { display: none; }

@media (min-width: 1600px) {
  .hero { min-height: 660px; }
  .hero-photo { object-position: center 15%; }
}
@media (max-width: 1150px) {
  .header-inner { padding-inline: 30px; gap: 20px; }
  .desktop-nav { gap: 17px; }
  .desktop-nav a { font-size: 11px; }
  .brand { font-size: 18px; }
  .shell { width: calc(100% - 72px); }
  .two-column { gap: 27px; }
  .section-heading { gap: 17px; }
  .section-number { width: 58px; height: 58px; flex-basis: 58px; font-size: 27px; }
  .indented-copy { padding-left: 75px; }
  h2 { font-size: 28px; }
  .indented-copy p { font-size: 13px; }
  .desktop-break { display: none; }
  .hero-description .desktop-break { display: initial; }
  .offer-card { padding-left: 105px; padding-right: 20px; }
  .offer-badge { width: 108px; height: 108px; font-size: 12px; }
  .offer-badge strong { font-size: 29px; }
  .offer-price strong { font-size: 60px; }
  .flow-icon { height: 82px; }
  .flow-icon .icon { width: 37px; height: 37px; }
  .growth-flow li:not(:last-child)::after { top: 24px; }
  .photo-section .section-copy { max-width: 55%; }
  .blog h2 { font-size: 26px; }
  .support-options { margin-left: 75px; width: min(740px, calc(100% - 75px)); }
  .system-grid { gap: 30px; }
  .feature-grid li { min-height: 132px; padding-block: 19px 14px; }
  .start .section-copy { max-width: 75%; }
}
@media (max-width: 900px) {
  html { scroll-padding-top: 84px; }
  .header-inner { min-height: 68px; gap: 20px; padding: 10px 24px; }
  .desktop-nav { display: none; }
  .header-button { margin-left: auto; }
  .mobile-menu { display: block; }
  .mobile-menu summary { width: 44px; height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; cursor: pointer; list-style: none; }
  .mobile-menu summary::-webkit-details-marker { display: none; }
  .mobile-menu summary span { width: 22px; height: 1px; background: var(--green); }
  .mobile-menu[open] summary span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .mobile-menu[open] summary span:nth-child(2) { opacity: 0; }
  .mobile-menu[open] summary span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .mobile-menu nav { position: absolute; top: 100%; right: 0; left: 0; padding: 15px 30px 24px; display: grid; background: #fffdf9; border-bottom: 1px solid var(--line); box-shadow: 0 12px 20px rgb(54 69 51 / 7%); }
  .mobile-menu nav a { text-decoration: none; padding: 12px; border-bottom: 1px solid #eeeee5; font-size: 14px; }
  .hero { min-height: 570px; }
  .hero-wash { background: linear-gradient(90deg, rgb(250 246 239 / 93%), rgb(250 246 239 / 80%) 40%, rgb(250 246 239 / 12%) 75%); }
  .hero-description { font-size: 14px; }
  .hero h1 { font-size: 47px; }
  .hero-kicker { font-size: 17px; }
  .two-column { gap: 22px; }
  h2 { font-size: 25px; }
  .section-heading { gap: 13px; }
  .section-number { width: 49px; height: 49px; flex-basis: 49px; font-size: 24px; }
  .indented-copy { padding-left: 62px; }
  .offer-card { padding: 28px 18px; }
  .offer-badge { width: 78px; height: 78px; left: -13px; top: -24px; font-size: 10px; }
  .offer-badge strong { font-size: 23px; }
  .offer-badge strong span { font-size: 11px; }
  .offer-label { font-size: 17px; }
  .offer-card::after { right: -30px; }
  .together .two-column { grid-template-columns: 1fr; gap: 28px; }
  .together .indented-copy { max-width: 590px; }
  .growth-flow { margin-left: 62px; max-width: 570px; }
  .flow-icon { width: 100px; height: 100px; }
  .growth-flow li:not(:last-child)::after { top: 32px; }
  .system-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
  .feature-grid { gap: 8px; }
  .feature-grid li { min-height: 124px; }
  .feature-grid h3 { font-size: 11px; }
  .feature-grid .icon { width: 32px; height: 32px; margin-bottom: 10px; }
  .support-options { margin-left: 62px; width: calc(100% - 62px); }
  .support-options li { flex-direction: column; gap: 8px; text-align: center; }
  .support .section-copy { max-width: 65%; }
  .support::after { background: linear-gradient(90deg, var(--paper) 42%, rgb(250 246 239 / 94%) 55%, rgb(250 246 239 / 24%) 85%); }
  .start .section-copy { max-width: 87%; }
  .closing > p { font-size: 21px; }
  .footer-inner { flex-wrap: wrap; gap: 12px 24px; }
}
@media (max-width: 700px) {
  .plan-features { margin-top: 32px; }
  .plan-features-intro h3 { font-size: 21px; }
  .plan-features-intro .feature-campaign-note { padding: 10px 14px; text-align: left; font-size: 12px; }
  .feature-accordions { gap: 12px; margin-top: 20px; }
  .feature-accordion summary { gap: 12px; padding: 20px 16px; }
  .feature-summary-title { font-size: 15px; }
  .feature-summary-description { font-size: 11px; }
  .feature-accordion-content { margin-inline: 16px; padding-block: 20px; }
  .common-feature-groups { grid-template-columns: 1fr; gap: 24px; }
  .feature-subaccordion summary { padding: 13px 14px; }
  .feature-detail-list { padding: 2px 14px 14px; }
  .feature-scroll-hint { display: block; margin-top: 10px; color: var(--muted); font-size: 11px; }
  html { scroll-padding-top: 77px; }
  body { font-size: 14px; }
  .shell { width: calc(100% - 44px); }
  .header-inner { padding: 9px 16px; min-height: 64px; gap: 10px; }
  .brand { gap: 5px; font-size: 15px; letter-spacing: .02em; }
  .brand .icon { width: 23px; height: 29px; }
  .header-button { min-height: 36px; padding: 7px 13px; font-size: 10px; letter-spacing: .02em; }
  .mobile-menu summary { width: 36px; height: 42px; }
  .hero { min-height: 676px; align-items: end; }
  .hero-photo { height: 420px; top: 0; object-position: 68% center; }
  .hero-wash { background: linear-gradient(0deg, var(--paper) 5%, var(--paper) 25%, rgb(250 246 239 / 97%) 38%, rgb(250 246 239 / 58%) 56%, transparent 74%); }
  .hero-inner { padding: 250px 0 36px; }
  .audience { font-size: 10px; letter-spacing: .08em; margin-bottom: 18px; padding-bottom: 3px; }
  .hero-kicker { font-size: 14px; letter-spacing: .01em; }
  .hero h1 { font-size: clamp(31px, 8.6vw, 49px); letter-spacing: .005em; margin: 4px 0 16px; line-height: 1.5; white-space: nowrap; }
  .hero-description { font-size: 12px; line-height: 2; letter-spacing: .01em; }
  .hero-button { margin: 23px 0 12px; width: 100%; min-width: 0; padding: 15px 16px; min-height: 56px; font-size: 15px; }
  .section { padding-block: 38px; }
  .two-column { grid-template-columns: 1fr; gap: 26px; }
  .section-heading { gap: 13px; margin-bottom: 18px; }
  .section-number { width: 46px; height: 46px; flex-basis: 46px; font-size: 22px; }
  .section-label { font-size: 10px; letter-spacing: .18em; margin: 1px 0 9px; }
  h2 { font-size: clamp(23px, 6.1vw, 30px); line-height: 1.55; letter-spacing: .015em; }
  .indented-copy { padding-left: 59px; }
  .indented-copy p { font-size: 12px; line-height: 1.95; }
  .botanical::before { width: 155px; height: 210px; left: -58px; bottom: -18px; opacity: .6; }
  .device-figure { margin-left: 16px; }
  .device-figure figcaption { font-size: 9px; }
  .about .device-figure { margin-top: 0; }
  .text-link { font-size: 11px; }
  .campaign { padding-bottom: 36px; }
  .campaign h2 { font-size: 28px; }
  .campaign .two-column { gap: 37px; }
  .offer-card { margin-left: 28px; margin-right: 11px; padding: 24px 18px 20px 78px; min-height: 242px; }
  .offer-badge { width: 96px; height: 96px; top: -16px; left: -24px; font-size: 11px; }
  .offer-badge strong { font-size: 27px; }
  .offer-label { font-size: 16px; }
  .offer-price { font-size: 20px; }
  .offer-price strong { font-size: 60px; }
  .offer-price > span { font-size: 26px; }
  .offer-tax { font-size: 12px; margin-bottom: 17px; }
  .offer-content .button { font-size: 13px; gap: 13px; min-height: 47px; }
  .offer-note { font-size: 9px; }
  .offer-card::after { width: 72px; height: 155px; right: -31px; }
  .price-comparison { margin-top: 26px; padding: 26px 16px; gap: 22px; border-radius: 22px; }
  .special-price-kicker { font-size: 10px; }
  .special-price-message h3 { margin-top: 6px; font-size: 18px; line-height: 1.6; }
  .special-price-message h3 span { font-size: 13px; }
  .special-price-message h3 strong { font-size: 23px; }
  .special-price-message > p:not(.special-price-kicker) { font-size: 12px; }
  .regular-plan-summary { padding-top: 22px; }
  .regular-plan-heading { text-align: center; font-size: 12px; }
  .regular-plan-list { grid-template-columns: 1fr; gap: 12px; }
  .regular-plan-list li { min-height: 104px; padding: 14px 12px; }
  .together .two-column { gap: 26px; }
  .growth-flow { margin-left: 0; gap: 14px; }
  .flow-icon { width: 71px; height: 71px; }
  .flow-icon .icon { width: 30px; height: 30px; }
  .growth-flow li:not(:last-child)::after { top: 21px; right: -15px; font-size: 17px; }
  .growth-flow p { font-size: 10px; margin-top: 12px; }
  .photo-section .section-copy { max-width: none; }
  .photo-section .section-photo { position: relative; width: calc(100% - 44px); height: auto; margin: 0 22px; z-index: 0; }
  .photo-section { display: flex; flex-direction: column; }
  .photo-section .shell { order: -1; }
  .photo-section .section-photo { margin-top: 24px; }
  .photo-section .section-photo img { aspect-ratio: 1.65; height: auto; object-fit: cover; border-radius: 4px; }
  .photo-section::after { display: none; }
  .blog { padding-bottom: 22px; }
  .blog h2 { font-size: clamp(21px, 5.5vw, 29px); }
  .blog .section-photo img { object-position: 60% 48%; }
  .system { padding-top: 37px; padding-bottom: 36px; }
  .system-grid { grid-template-columns: 1fr; gap: 21px; }
  .system > .shell > .section-heading { margin-bottom: 24px; }
  .system .device-figure { margin-left: 0; }
  .feature-grid { gap: 9px; }
  .feature-grid li { min-height: 129px; padding: 19px 6px 13px; }
  .feature-grid h3 { font-size: 12px; }
  .feature-grid .icon { width: 34px; height: 34px; }
  .feature-grid h3 small { font-size: 10px; }
  .system::after { width: 178px; height: 224px; right: -66px; top: -16px; opacity: .4; }
  .support .section-photo { margin-top: 24px; }
  .support .section-photo img { aspect-ratio: 1.55; object-position: center 30%; }
  .support-options { width: 100%; margin: 26px 0 0; gap: 7px; }
  .support-options li { padding: 16px 5px; border-radius: 10px; }
  .support-options span { font-size: 10px; }
  .support-options .icon { width: 29px; height: 29px; }
  .start { padding-top: 20px; padding-bottom: 0; }
  .start h2 { font-size: clamp(20px, 5.2vw, 28px); }
  .start .indented-copy { padding-left: 0; }
  .start .indented-copy > p:first-child { padding-left: 59px; font-size: 12px; }
  .start-button { width: 100%; padding: 13px 13px; gap: 11px; flex-wrap: wrap; font-size: 13px; }
  .start-button-label { width: 100%; font-size: 10px; line-height: 1; }
  .start-button strong { font-size: 30px; }
  .start-button .arrow { font-size: 26px; }
  .indented-copy .start-note { text-align: center; font-size: 9px; }
  .start .section-photo { margin: 22px 0 0; width: 100%; }
  .start .section-photo img { aspect-ratio: 1.9; border-radius: 0; object-position: center 62%; }
  .closing { padding: 36px 25px 41px; }
  .closing > p { font-size: 20px; letter-spacing: .01em; line-height: 1.8; }
  .closing > span { font-size: 11px; line-height: 1.9; letter-spacing: .025em; }
  .closing::before, .closing::after { width: 180px; height: 220px; bottom: -68px; opacity: .55; }
  .closing::before { left: -69px; }
  .closing::after { right: -75px; }
  .site-footer { padding: 22px 0; }
  .footer-inner { flex-direction: column; text-align: center; gap: 10px; }
  .footer-inner nav { margin-left: 0; gap: 22px; font-size: 10px; }
  .footer-inner small { font-size: 9px; }
  .mobile-break { display: initial; }
}
@media (max-width: 360px) {
  .header-inner { padding-inline: 12px; gap: 6px; }
  .brand { font-size: 13px; }
  .brand .icon { width: 20px; }
  .shell { width: calc(100% - 36px); }
  .hero-kicker { font-size: 12px; }
  .hero h1 { font-size: 30px; }
  .section-heading { gap: 10px; }
  .section-number { width: 40px; height: 40px; flex-basis: 40px; font-size: 20px; }
  .indented-copy { padding-left: 50px; }
  h2 { font-size: 22px; }
  .campaign h2 { font-size: 25px; }
  .offer-card { padding-left: 56px; padding-right: 10px; }
  .offer-label { font-size: 14px; }
  .offer-price strong { font-size: 52px; }
  .offer-badge { width: 82px; height: 82px; }
  .growth-flow { gap: 12px; }
  .flow-icon { width: 61px; height: 61px; }
  .growth-flow p { font-size: 9px; }
  .growth-flow li:not(:last-child)::after { top: 16px; right: -14px; }
  .start .indented-copy > p:first-child { padding-left: 50px; }
  .start h2 { font-size: 19px; }
  .closing > p { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
  .button:hover { transform: none; }
}
@media print {
  .site-header { position: static; }
  .desktop-nav, .mobile-menu, .header-button, .skip-link { display: none; }
  .hero { min-height: 440px; }
  .section { break-inside: avoid; }
  body { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}
/* 先着枠の段階(initial/extra/closed)で文言を切り替える要素。hiddenの要素は他のdisplay指定より優先して隠す */
[data-fphase][hidden] { display: none !important; }

/* 2026-10-04 新ロゴ(横組み画像)へ差し替え。ヘッダーとフッター */
.brand .brand-logo { display: block; height: 56px; width: auto; }
.footer-inner .footer-logo { display: block; height: 40px; width: auto; }
@media (max-width: 760px) { .brand .brand-logo { height: 46px; } .footer-inner .footer-logo { height: 34px; } }
@media (max-width: 420px) { .brand .brand-logo { height: 40px; } }

/* 2026-10-04 iPadのChromeで、フッターの下に画面数枚分の空白ができる問題の対策。
   閉じたアコーディオン(details)の中身が、閉じているのにページの高さに数えられてしまう挙動への対処。
   閉じている間は中身を描画対象から外す(開いたときの表示は従来どおり)。 */
details:not([open]) > :not(summary) { display: none; }

/* 2026-10-04 01 ABOUT の「よもぎ蒸しマップを見てみる」をボタン化(じゅんちゃん指示) */
.indented-copy .about-site-button { margin-top: 18px; }
@media (max-width: 760px) { .indented-copy .about-site-button { gap: 12px; padding: 14px 22px; letter-spacing: .04em; white-space: nowrap; } }
@media (max-width: 360px) { .indented-copy .about-site-button { font-size: 13px; padding: 13px 16px; gap: 8px; letter-spacing: .02em; max-width: 100%; } }

/* 2026-10-04 公式LINEへの問い合わせ導線(じゅんちゃん指示) */
.button.line-button { margin-top: 22px; background: #06c755; box-shadow: 0 7px 20px rgb(6 199 85 / 12%); }
.button.line-button:hover { background: #05a647; box-shadow: 0 8px 24px rgb(6 199 85 / 22%); }
.start-note.line-note { margin-top: 8px; }

/* 2026-10-04 オプション料金(じゅんちゃん指示) */
.option-fees { margin-top: 26px; }
.option-fee-list { max-width: 560px; margin: 14px auto 0; padding: 0; list-style: none; border: 1px solid rgb(217 221 210 / 80%); border-radius: 16px; background: #fffdfa; }
.option-fee-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 20px; border-top: 1px solid var(--line); }
.option-fee-list li:first-child { border-top: 0; }
.option-fee-list span { color: var(--ink); font-size: 14px; }
.option-fee-list strong { color: var(--green); font-size: 15px; font-weight: 700; white-space: nowrap; }
.option-fee-note { max-width: 560px; margin: 10px auto 0; color: var(--muted, #6b6b6b); font-size: 13px; text-align: left; }
@media (max-width: 420px) { .option-fee-list li { padding: 12px 14px; } .option-fee-list span { font-size: 13px; } }