/* ================================================================
   配色
   いま有効：温白色（warm white）
   セージグリーンに戻すときは、下の :root を丸ごと
   style.sage.backup.css の :root と入れ替えてください。
   ================================================================ */
:root {
  /* 地色・面 */
  --bg:#FCFAF6;
  --btn-bg:#FFFDFA;
  --header-bg:rgba(252,250,246,.93);
  --ivory:#FAF7F2;
  --soft:#F1EBE3;
  --band2:#F2EDE5;
  --grad-a:#FDFBF7;
  --grad-b:#F3EDE5;
  --grad-c:#FBF8F2;

  /* 文字 */
  --ink:#3E362E;
  --text-soft:#5F564C;
  --muted:#6E655C;
  --on-accent:#fff;

  /* アクセント（茶） */
  --accent:#75675A;
  --accent-fill:#4E443D;
  --accent-fill-hover:#362F29;
  --accent-dark:#514639;
  --accent-dark2:#3A322C;
  --wash:#9C8B79;
  --numbg:#8A7B6C;

  /* 罫線 */
  --line:#E7E1D8;
  --edge:#9A8875;
  --rule:#BEAD9B;
  --script:#EDE6DC;

  /* オープン告知バー */
  --bar-bg:#3E362E;
  --bar-ink:#F4EFE7;
  --bar-label:#C7BAA9;
  --bar-sub:#DAD2C7;
  --pill-bg:#F0EAE1;
  --pill-ink:#4A3F33;

  /* 姿勢の図 */
  --fig-base:#D6CCC0;
  --fig-tick:#CCC0B3;

  /* 書体 */
  --serif:'Noto Serif JP',"Hiragino Mincho ProN","Yu Mincho",serif;
  --sans:'Noto Sans JP',"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  --latin:'Cormorant Garamond',Georgia,serif;
  --line-green:#06c755;
  color-scheme:light
}

/* 姿勢の図（SVG）— 色はトークンから */
.posture .p-title{font-family:var(--serif);font-size:16px;letter-spacing:1.5px;fill:var(--ink)}
.posture .p-sub{font-family:var(--sans);font-size:13px;fill:var(--muted)}
.posture .p-base{stroke:var(--fig-base);stroke-width:1.4;stroke-dasharray:4 5}
.posture .p-baselabel{font-family:var(--latin);font-size:12px;letter-spacing:1.4px;fill:var(--wash)}
.posture .p-tick{stroke:var(--fig-tick);stroke-width:1;stroke-dasharray:3 3}
.posture .p-curve{fill:none;stroke:var(--accent);stroke-width:2.2;stroke-linecap:round}
.posture .p-dot{fill:var(--ivory);stroke:var(--accent);stroke-width:2}
.posture .p-label{font-family:var(--sans);font-size:14px;fill:var(--muted)}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:130px
}

body {
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  font-weight:400;
  -webkit-font-smoothing:antialiased
}

img {
  max-width:100%;
  display:block
}

button,a {
  -webkit-tap-highlight-color:transparent
}

a {
  color:inherit;
  text-decoration:none
}

button {
  font:inherit;
  cursor:pointer
}

button:focus-visible,a:focus-visible,summary:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:5px
}

/* ---------- header ---------- */

.header {
  height:108px;
  padding:0 5%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  background:var(--header-bg);
  position:sticky;
  top:env(safe-area-inset-top,0px);
  z-index:10;
  backdrop-filter:blur(14px)
}

.logo {
  display:block;
  width:152px;
  flex:none
}

.logo img {
  width:100%;
  height:auto
}

nav {
  display:flex;
  align-items:center;
  gap:32px
}

nav>a {
  display:flex;
  flex-direction:column;
  gap:3px;
  align-items:center
}

nav>a span {
  font-family:var(--latin);
  font-size:23px;
  color:var(--accent);
  line-height:1
}

nav>a small {
  font-size:12px;
  color:var(--muted)
}

nav>a:hover {
  opacity:.65
}

/* ---------- buttons ---------- */

.button {
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  border:1px solid var(--edge);
  border-radius:999px;
  background:var(--btn-bg);
  color:var(--accent);
  font-size:14px;
  letter-spacing:.06em;
  padding:19px 30px;
  transition:background .2s,color .2s
}

.button:hover {
  background:var(--soft);
  color:var(--accent-dark)
}

.button .arrow {
  font-size:25px;
  line-height:1;
  font-family:Georgia,serif
}

.button .label {
  display:inline-flex;
  align-items:center;
  gap:11px
}

.line-mark {
  width:20px;
  height:20px;
  border-radius:5px;
  background:var(--line-green);
  flex:none;
  padding:3px
}

.header-book {
  padding:14px 27px;
  min-width:176px;
  gap:20px
}

.primary {
  min-width:300px;
  padding:22px 32px
}

/* ---------- hero ---------- */

.hero {
  position:relative;
  display:grid;
  grid-template-columns:43% 57%;
  padding:0 3% 0 5%;
  background:var(--bg)
}

.hero-copy {
  padding:78px 0 90px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  position:relative;
  z-index:1
}

.eyebrow {
  font-size:12px;
  letter-spacing:.2em;
  font-weight:400;
  color:var(--accent);
  margin:0 0 32px
}

h1,h2,h3 {
  font-family:var(--serif);
  font-weight:400;
  text-wrap:balance;
  word-break:auto-phrase;
  line-break:strict
}

p,dd,li,summary,figcaption {
  text-wrap:pretty;
  line-break:strict
}

p,dt,dd,li,summary,figcaption,.button .label,.hero-signature,.hero-sub {
  word-break:auto-phrase
}

h1 {
  font-size:clamp(40px,4.2vw,64px);
  line-height:1.65;
  letter-spacing:.16em;
  margin:0 0 22px
}

.hero-sub {
  font-size:13px;
  letter-spacing:.14em;
  color:var(--muted);
  margin:0 0 26px
}

.openbar {
  background:var(--bar-bg);
  color:var(--bar-ink);
  text-align:center;
  padding:calc(20px + env(safe-area-inset-top,0px)) 20px 20px
}

.openbar-main {
  margin:0;
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:16px;
  flex-wrap:wrap
}

.openbar-date {
  font-family:var(--serif);
  font-size:clamp(28px,5vw,38px);
  line-height:1.15;
  letter-spacing:.06em
}

.openbar-label {
  font-family:var(--latin);
  font-size:clamp(21px,3.6vw,28px);
  letter-spacing:.24em;
  color:var(--bar-label)
}

.openbar-sub {
  margin:12px 0 0;
  font-size:13px;
  line-height:1.9;
  letter-spacing:.08em;
  color:var(--bar-sub)
}

.openbar-note {
  margin:16px 0 0
}

.openbar-note a {
  display:inline-block;
  background:var(--pill-bg);
  color:var(--pill-ink);
  font-size:13px;
  letter-spacing:.12em;
  padding:10px 24px;
  border-radius:999px;
  transition:background .2s
}

.openbar-note a:hover {
  background:var(--btn-bg)
}

.hero-description {
  font-size:16px;
  line-height:2.2;
  letter-spacing:.06em;
  margin:0 0 30px
}

.hero-teaser {
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:15px 2px;
  margin:0 0 34px;
  font-size:13px;
  letter-spacing:.05em;
  line-height:2
}

.hero-teaser s {
  color:var(--muted);
  margin-right:5px
}

.hero-teaser b {
  font-family:var(--serif);
  font-weight:400;
  font-size:21px;
  letter-spacing:.02em;
  color:var(--ink)
}

.hero-note {
  font-size:12px;
  line-height:2;
  color:var(--muted);
  margin:18px 0 0;
  max-width:33em
}

.hero-visual {
  position:relative;
  min-height:650px;
  overflow:hidden;
  border-radius:0 0 0 140px
}

.hero-visual img {
  height:100%;
  width:100%;
  position:absolute;
  object-fit:cover;
  object-position:65% center
}

.hero-bottom {
  grid-column:1/-1;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:27px 0 48px;
  color:var(--muted)
}

.hero-signature {
  font-family:var(--latin);
  font-size:25px;
  font-style:italic;
  letter-spacing:.015em;
  color:var(--wash)
}

.hero-bottom a {
  display:flex;
  align-items:center;
  gap:16px;
  font-size:12px;
  letter-spacing:.13em
}

.scroll-line {
  display:inline-block;
  background:var(--rule);
  width:1px;
  height:35px
}

/* ---------- section frame ---------- */

.section {
  max-width:1440px;
  margin:0 auto;
  padding:115px 8%
}

.section-head {
  text-align:center;
  margin-bottom:55px
}

.section-head .eyebrow {
  margin-bottom:16px
}

.section-head h2 {
  margin:0 0 17px
}

h2 {
  font-size:34px;
  line-height:1.85;
  letter-spacing:.09em;
  margin:0 0 32px
}

.small-english {
  font-family:var(--latin);
  font-size:23px;
  font-style:italic;
  color:var(--wash)
}

.english-title {
  font-family:var(--latin);
  font-size:clamp(34px,4.7vw,64px);
  font-style:italic;
  line-height:1.2;
  color:var(--wash);
  margin:0 0 42px
}

.footnotes {
  margin:26px auto 0;
  display:grid;
  gap:9px;
  max-width:760px;
  font-size:12px;
  line-height:2;
  color:var(--muted)
}

.footnotes p {
  margin:0
}

.footnotes a {
  color:var(--accent);
  border-bottom:1px solid var(--line)
}

/* ---------- opening offer ---------- */

.offer-panel {
  border:1px solid var(--edge);
  border-radius:48px;
  background:var(--ivory);
  display:grid;
  grid-template-columns:1fr 1fr;
  padding:20px 30px
}

.offer {
  padding:40px 30px;
  text-align:center
}

.offer+.offer {
  border-left:1px solid var(--line)
}

.offer dt {
  font-size:13px;
  letter-spacing:.14em;
  color:var(--muted)
}

.offer dd {
  margin:0
}

.offer .was {
  margin-top:18px;
  font-size:13px;
  color:var(--muted);
  text-decoration:line-through;
  letter-spacing:.05em
}

.offer .now {
  font-family:var(--serif);
  font-size:clamp(38px,5vw,52px);
  line-height:1.25;
  letter-spacing:.02em;
  font-variant-numeric:tabular-nums
}

.offer .now small {
  font-size:17px;
  letter-spacing:.08em;
  margin-left:3px
}

.offer .cond {
  margin-top:10px;
  font-size:12px;
  letter-spacing:.05em;
  color:var(--muted)
}

/* ---------- concept ---------- */

.concept {
  max-width:none;
  position:relative;
  text-align:center;
  background:linear-gradient(155deg,var(--grad-a),var(--grad-b) 65%,var(--grad-c));
  padding-top:110px;
  padding-bottom:110px;
  border-radius:120px 0 120px 0
}

.section-label .eyebrow {
  margin-bottom:20px
}

.concept-copy {
  max-width:760px;
  margin:0 auto
}

.concept-copy p {
  font-size:16px;
  line-height:2.5;
  margin:0 0 20px;
  letter-spacing:.035em
}

.concept-copy p:last-child {
  margin-bottom:0
}

.concept-copy .turn {
  font-family:var(--serif);
  font-size:clamp(19px,2.2vw,23px);
  line-height:2.2;
  letter-spacing:.07em;
  color:var(--ink)
}

.concept-figure {
  margin:56px auto 0;
  max-width:1000px
}

.concept-figure img {
  border-radius:90px 0 90px 0
}

.concept-figure img {
  width:100%;
  height:auto;
  aspect-ratio:16/10;
  object-fit:cover
}

/* ---------- promises ---------- */

.promises {
  display:grid;
  gap:96px
}

.promise {
  display:grid;
  grid-template-columns:1.15fr 1fr;
  gap:6%;
  align-items:center
}

.promise:nth-child(even) {
  grid-template-columns:1fr 1.15fr
}

.promise:nth-child(even) .promise-visual,
.promise:nth-child(even) .chartbox {
  order:2
}

.promise-visual img {
  border-radius:0 90px 0 90px
}

.promise:nth-child(even) .promise-visual img,
.promise:nth-child(even) .chartbox {
  border-radius:90px 0 90px 0
}

.promise-visual {
  position:relative
}

.promise-visual img {
  width:100%;
  height:auto;
  aspect-ratio:4/3.4;
  object-fit:cover
}

.promise-english {
  font-family:var(--latin);
  font-size:26px;
  color:var(--accent);
  font-style:italic;
  display:block;
  margin-bottom:14px;
  line-height:1
}

.promise h3 {
  font-size:26px;
  line-height:1.9;
  letter-spacing:.06em;
  margin:0 0 20px
}

.promise p {
  font-size:16px;
  line-height:2.1;
  color:var(--text-soft);
  margin:0 0 14px
}

.promise p:last-child {
  margin-bottom:0
}

.promise .aside {
  font-size:13px;
  line-height:2;
  color:var(--muted)
}

.chartbox {
  aspect-ratio:4/3.4;
  border:1px solid var(--line);
  border-radius:0 90px 0 90px;
  background:var(--ivory);
  padding:42px 34px;
  display:flex;
  align-items:center;
  justify-content:center
}

.chartbox svg {
  width:100%;
  height:auto;
  max-width:360px
}

/* ---------- trial flow ---------- */

.flow {
  list-style:none;
  margin:0 auto;
  padding:0;
  max-width:880px;
  display:grid
}

.flow li {
  display:grid;
  grid-template-columns:auto 1fr;
  gap:32px;
  align-items:start;
  padding:34px 0;
  border-top:1px solid var(--line)
}

.flow li:last-child {
  border-bottom:1px solid var(--line)
}

.step {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  width:72px
}

.number {
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--latin);
  font-size:27px;
  color:var(--on-accent);
  background:var(--numbg);
  border-radius:50%;
  width:52px;
  height:52px;
  font-variant-numeric:tabular-nums
}

.step small {
  font-family:var(--latin);
  font-size:11px;
  letter-spacing:.24em;
  color:var(--muted)
}

.flow h3 {
  font-size:21px;
  letter-spacing:.05em;
  margin:6px 0 12px
}

.flow p {
  font-size:15px;
  line-height:2.1;
  color:var(--text-soft);
  margin:0
}

.bring {
  max-width:880px;
  margin:34px auto 0;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:20px;
  align-items:start;
  background:var(--ivory);
  border-radius:32px;
  padding:28px 34px
}

.bring dt {
  font-size:12px;
  letter-spacing:.18em;
  color:var(--accent);
  white-space:nowrap;
  padding-top:7px
}

.bring dd {
  margin:0;
  font-size:14px;
  line-height:2.1;
  color:var(--text-soft)
}

/* ---------- price ---------- */

.plans {
  max-width:900px;
  margin:0 auto;
  border:1px solid var(--edge);
  border-radius:48px;
  padding:14px 48px
}

.plan {
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px 28px;
  align-items:baseline;
  padding:36px 0;
  border-bottom:1px solid var(--line)
}

.plans .plan:last-child {
  border-bottom:0
}

.plan-name {
  font-family:var(--serif);
  font-size:24px;
  letter-spacing:.09em;
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap
}

.tag {
  font-family:var(--sans);
  font-size:11px;
  letter-spacing:.14em;
  color:var(--accent);
  border:1px solid currentColor;
  border-radius:999px;
  padding:3px 12px
}

.plan-for {
  grid-column:1;
  font-size:14px;
  line-height:2;
  color:var(--muted);
  margin:0;
  max-width:34em
}

.plan-amount {
  grid-row:1/3;
  grid-column:2;
  text-align:right;
  font-family:var(--serif);
  font-size:30px;
  letter-spacing:.02em;
  white-space:nowrap;
  font-variant-numeric:tabular-nums
}

.plan-amount small {
  display:block;
  font-family:var(--sans);
  font-size:12px;
  letter-spacing:.08em;
  color:var(--muted);
  margin-top:8px
}

.firsttime {
  max-width:900px;
  margin:0 auto 26px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:32px;
  overflow:hidden
}

.firsttime-item {
  background:var(--ivory);
  padding:30px 28px;
  text-align:center
}

.firsttime-item .k {
  margin:0;
  font-size:13px;
  letter-spacing:.12em;
  color:var(--muted)
}

.firsttime-item .v {
  margin:12px 0 0;
  font-family:var(--serif);
  font-size:30px;
  letter-spacing:.02em;
  font-variant-numeric:tabular-nums
}

.firsttime-item .v small {
  font-size:15px;
  margin-left:2px
}

.firsttime-item .n {
  margin:8px 0 0;
  font-size:12px;
  letter-spacing:.04em;
  color:var(--accent)
}

/* ---------- faq ---------- */

.faq {
  max-width:880px;
  margin:0 auto;
  border-top:1px solid var(--line)
}

.faq details {
  border-bottom:1px solid var(--line)
}

.faq summary {
  cursor:pointer;
  list-style:none;
  display:grid;
  grid-template-columns:1fr 28px;
  gap:16px;
  align-items:center;
  padding:26px 0;
  font-size:16px;
  letter-spacing:.04em;
  line-height:1.9
}

.faq summary::-webkit-details-marker {
  display:none
}

.faq summary::after {
  content:"+";
  font-family:var(--latin);
  font-size:30px;
  line-height:1;
  color:var(--accent);
  text-align:center;
  transition:transform .2s
}

.faq details[open] summary::after {
  transform:rotate(45deg)
}

.faq .answer {
  margin:0;
  padding:0 60px 28px 0;
  font-size:15px;
  line-height:2.2;
  color:var(--text-soft)
}

/* ---------- access ---------- */

.access-table {
  max-width:820px;
  margin:0 auto;
  display:grid;
  grid-template-columns:7em 1fr;
  border-top:1px solid var(--line)
}

.access-table dt {
  padding:22px 0;
  border-bottom:1px solid var(--line);
  font-size:12px;
  letter-spacing:.18em;
  color:var(--muted)
}

.access-table dd {
  padding:22px 0;
  border-bottom:1px solid var(--line);
  margin:0;
  font-size:15px;
  line-height:2
}

.access-table dd a {
  border-bottom:1px solid var(--line)
}

.maplink {
  display:inline-flex;
  align-items:center;
  gap:12px;
  margin:30px auto 0;
  font-size:13px;
  letter-spacing:.1em;
  color:var(--accent);
  border-bottom:1px solid var(--edge);
  padding-bottom:4px
}

.center {
  text-align:center
}

/* ---------- origin ---------- */

.origin {
  background:linear-gradient(155deg,var(--grad-c),var(--grad-b) 65%,var(--grad-a));
  border-radius:0 120px 0 120px;
  max-width:1440px;
  margin:0 auto;
  padding:86px 8%
}

.origin-inner {
  max-width:860px;
  margin:0 auto;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:48px;
  align-items:start
}

.origin .glyph {
  position:sticky;
  top:150px
}

.glyph {
  font-family:'Noto Serif KR',var(--serif);
  font-size:78px;
  line-height:1;
  color:var(--ink);
  text-align:center
}

.glyph small {
  display:block;
  font-family:var(--latin);
  font-size:13px;
  font-style:italic;
  letter-spacing:.2em;
  color:var(--accent);
  margin-top:14px
}

.origin-copy {
  display:grid;
  gap:14px
}

.origin p {
  margin:0;
  font-size:15px;
  line-height:2.3;
  letter-spacing:.03em
}

.origin p b {
  font-weight:500;
  color:var(--ink)
}

.origin .creed {
  margin-top:10px;
  padding-top:22px;
  border-top:1px solid var(--line);
  font-family:var(--serif);
  font-size:17px;
  line-height:2.1;
  letter-spacing:.06em;
  color:var(--ink)
}

/* ---------- invitation ---------- */

.invitation {
  position:relative;
  text-align:center;
  overflow:hidden;
  background:var(--band2);
  padding:90px 24px 100px;
  margin-top:115px
}

.invitation .eyebrow {
  margin-bottom:24px
}

.invitation h2 {
  font-size:36px;
  margin:0 0 20px
}

.invitation p:not(.eyebrow) {
  font-size:16px;
  line-height:2;
  margin:0 auto 30px;
  max-width:36em
}

.invitation .primary {
  background:var(--accent-fill);
  color:var(--on-accent);
  border-color:var(--accent-fill)
}

.invitation .primary:hover {
  background:var(--accent-fill-hover);
  border-color:var(--accent-fill-hover);
  color:var(--on-accent)
}

.invitation .small-print {
  font-size:12px;
  color:var(--muted);
  line-height:2;
  margin:26px auto 0;
  max-width:34em
}

.invitation-script {
  position:absolute;
  right:-25px;
  bottom:-22px;
  font-family:var(--latin);
  font-size:110px;
  font-style:italic;
  letter-spacing:-.03em;
  color:var(--script);
  pointer-events:none;
  z-index:0
}

.invitation>*:not(.invitation-script) {
  position:relative;
  z-index:1
}

/* ---------- footer ---------- */

footer {
  padding:43px 5%;
  display:flex;
  align-items:center;
  gap:30px;
  flex-wrap:wrap
}

.footer-logo {
  width:170px;
  flex:none
}

.footer-logo img {
  width:100%;
  height:auto
}

.footer-social {
  display:flex;
  gap:12px;
  margin-left:auto
}

.iconbtn {
  width:40px;
  height:40px;
  display:inline-flex;
  border-radius:11px;
  transition:opacity .2s
}

.iconbtn:hover {
  opacity:.75
}

.iconbtn svg {
  width:100%;
  height:100%;
  display:block
}

footer>span {
  font-size:12px;
  color:var(--muted)
}

footer>small {
  font-family:var(--latin);
  letter-spacing:.14em;
  font-size:12px;
  color:var(--muted)
}

/* ---------- responsive ---------- */

@media(min-width:1600px) {
  .hero-visual {
    min-height:760px
  }
  .hero-copy {
    padding-left:6%
  }
  .hero {
    grid-template-columns:45% 55%
  }
}

@media(max-width:1180px) {
  nav {
    gap:22px
  }
  nav>a span {
    font-size:20px
  }
  .header-book {
    min-width:0;
    padding:13px 20px;
    gap:14px
  }
}

@media(max-width:1050px) {
  nav>a:nth-of-type(3) {
    display:none
  }
  .hero {
    grid-template-columns:45% 55%
  }
  .hero-copy {
    padding:60px 15px 60px 0
  }
  h1 {
    font-size:42px
  }
  .openbar {
  background:var(--bar-bg);
  color:var(--bar-ink);
  text-align:center;
  padding:calc(20px + env(safe-area-inset-top,0px)) 20px 20px
}

.openbar-main {
  margin:0;
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:16px;
  flex-wrap:wrap
}

.openbar-date {
  font-family:var(--serif);
  font-size:clamp(28px,5vw,38px);
  line-height:1.15;
  letter-spacing:.06em
}

.openbar-label {
  font-family:var(--latin);
  font-size:clamp(21px,3.6vw,28px);
  letter-spacing:.24em;
  color:var(--bar-label)
}

.openbar-sub {
  margin:12px 0 0;
  font-size:13px;
  line-height:1.9;
  letter-spacing:.08em;
  color:var(--bar-sub)
}

.openbar-note {
  margin:16px 0 0
}

.openbar-note a {
  display:inline-block;
  background:var(--pill-bg);
  color:var(--pill-ink);
  font-size:13px;
  letter-spacing:.12em;
  padding:10px 24px;
  border-radius:999px;
  transition:background .2s
}

.openbar-note a:hover {
  background:var(--btn-bg)
}

.hero-description {
    font-size:16px;
    letter-spacing:0
  }
  .hero-visual {
    min-height:600px;
    border-bottom-left-radius:100px
  }
  .primary {
    min-width:270px;
    padding:20px 25px
  }
  .section {
    padding-left:6%;
    padding-right:6%
  }
  .promise {
    gap:6%
  }
  .plans {
    padding-left:34px;
    padding-right:34px
  }
}

@media(max-width:820px) {
  .promise,.promise:nth-child(even) {
    grid-template-columns:1fr;
    gap:30px
  }
  .promise:nth-child(even) .promise-visual,
  .promise:nth-child(even) .chartbox {
    order:0
  }
  .promise-visual img,.promise:nth-child(even) .promise-visual img {
    border-radius:0 70px 0 70px
  }
  .chartbox {
    border-radius:0 70px 0 70px;
    padding:24px 16px
  }
}

@media(max-width:700px) {
  html {
    scroll-padding-top:100px
  }
  .openbar {
    padding:calc(18px + env(safe-area-inset-top,0px)) 7% 18px
  }
  .openbar-main {
    gap:12px
  }
  .openbar-sub {
    font-size:12px
  }
  .header {
    height:84px;
    padding:0 6%;
    gap:12px
  }
  .logo {
    width:112px
  }
  nav {
    gap:0
  }
  nav>a {
    display:none
  }
  .header-book {
    min-width:0;
    padding:11px 16px;
    gap:12px;
    font-size:13px
  }
  .header-book .arrow {
    display:none
  }
  .hero {
    display:flex;
    flex-direction:column;
    padding:0
  }
  .hero-copy {
    order:1;
    padding:30px 8% 38px;
    background:var(--bg)
  }
  .hero-copy .eyebrow {
    margin-bottom:15px;
    font-size:12px;
    letter-spacing:.1em
  }
  h1 {
    font-size:clamp(31px,8.5vw,42px);
    line-height:1.6;
    letter-spacing:.1em;
    margin-bottom:16px
  }
  .openbar {
  background:var(--bar-bg);
  color:var(--bar-ink);
  text-align:center;
  padding:calc(20px + env(safe-area-inset-top,0px)) 20px 20px
}

.openbar-main {
  margin:0;
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:16px;
  flex-wrap:wrap
}

.openbar-date {
  font-family:var(--serif);
  font-size:clamp(28px,5vw,38px);
  line-height:1.15;
  letter-spacing:.06em
}

.openbar-label {
  font-family:var(--latin);
  font-size:clamp(21px,3.6vw,28px);
  letter-spacing:.24em;
  color:var(--bar-label)
}

.openbar-sub {
  margin:12px 0 0;
  font-size:13px;
  line-height:1.9;
  letter-spacing:.08em;
  color:var(--bar-sub)
}

.openbar-note {
  margin:16px 0 0
}

.openbar-note a {
  display:inline-block;
  background:var(--pill-bg);
  color:var(--pill-ink);
  font-size:13px;
  letter-spacing:.12em;
  padding:10px 24px;
  border-radius:999px;
  transition:background .2s
}

.openbar-note a:hover {
  background:var(--btn-bg)
}

.hero-description {
    font-size:16px;
    margin-bottom:24px;
    line-height:2
  }
  .hero-description br {
    display:none
  }
  .hero-teaser {
    margin-bottom:28px
  }
  .hero-copy .primary {
    width:100%;
    max-width:370px;
    min-width:0;
    padding:19px 18px
  }
  .button {
    gap:14px
  }
  .button .label {
    gap:9px
  }
  .hero-visual {
    min-height:0;
    height:clamp(280px,82vw,405px);
    order:0;
    margin-left:6%;
    width:94%;
    border-radius:0 0 0 75px
  }
  .hero-visual img {
    object-position:63% center
  }
  .hero-note {
    max-width:none
  }
  .hero-bottom {
    order:2;
    padding:22px 8% 32px;
    gap:20px
  }
  .hero-signature {
    font-size:19px;
    max-width:215px;
    line-height:1.35;
    text-wrap:balance
  }
  .hero-bottom a {
    gap:9px;
    font-size:12px;
    letter-spacing:.03em;
    max-width:130px
  }
  .scroll-line {
    height:27px;
    flex-shrink:0
  }
  .section {
    padding:70px 7%
  }
  .section-head {
    margin-bottom:36px
  }
  .section-head h2,h2 {
    font-size:26px;
    line-height:1.8
  }
  .small-english {
    font-size:22px
  }
  .concept {
    border-radius:65px 0 65px 0
  }
  .section-label .eyebrow {
    font-size:12px;
    margin-bottom:18px
  }
  .english-title {
    font-size:37px;
    max-width:320px;
    margin:0 auto 30px
  }
  .concept-copy p {
    font-size:16px;
    line-height:2.2;
    letter-spacing:0
  }
  .concept-copy br {
    display:none
  }
  .concept-figure {
    margin-top:40px
  }
  .concept-figure img {
    border-radius:50px 0 50px 0
  }
  .firsttime {
    grid-template-columns:1fr;
    border-radius:24px
  }
  .firsttime-item {
    padding:24px 20px
  }
  .offer-panel {
    grid-template-columns:1fr;
    border-radius:34px;
    padding:10px 22px
  }
  .offer {
    padding:30px 4px
  }
  .offer+.offer {
    border-left:0;
    border-top:1px solid var(--line)
  }
  .promises {
    gap:64px
  }
  .promise h3 {
    font-size:22px;
    line-height:1.85
  }
  .flow li {
    grid-template-columns:auto 1fr;
    gap:20px;
    padding:28px 0
  }
  .step {
    width:56px
  }
  .number {
    width:44px;
    height:44px;
    font-size:23px
  }
  .flow h3 {
    font-size:19px;
    margin-top:2px
  }
  .bring {
    grid-template-columns:1fr;
    gap:10px;
    padding:24px 24px;
    border-radius:24px
  }
  .plans {
    border-radius:32px;
    padding:8px 24px
  }
  .plan {
    grid-template-columns:1fr;
    padding:28px 0;
    gap:6px
  }
  .plan-amount {
    grid-row:auto;
    grid-column:1;
    text-align:left;
    font-size:27px
  }
  .plan-amount small {
    display:inline;
    margin-left:10px
  }
  .plan-for {
    order:3
  }
  .faq summary {
    font-size:15px;
    grid-template-columns:1fr 24px;
    padding:22px 0
  }
  .faq .answer {
    padding-right:24px;
    font-size:14px
  }
  .access-table {
    grid-template-columns:1fr;
    gap:0
  }
  .access-table dt {
    padding:20px 0 0;
    border-bottom:0
  }
  .access-table dd {
    padding:8px 0 20px
  }
  .origin {
    border-radius:0 65px 0 65px;
    padding:60px 7%
  }
  .origin-inner {
    grid-template-columns:1fr;
    gap:24px;
    text-align:center
  }
  .glyph {
    font-size:64px
  }
  .invitation {
    padding:65px 8% 80px;
    margin-top:70px
  }
  .invitation h2 {
    font-size:28px
  }
  .invitation .primary {
    min-width:0;
    width:100%;
    max-width:370px;
    padding:20px 18px
  }
  .invitation-script {
    font-size:69px;
    bottom:-12px;
    right:-15px
  }
  footer {
    padding:34px 8%;
    gap:16px
  }
  .footer-social {
    margin-left:0
  }
  .origin .glyph {
    position:static
  }
  .footer-logo {
    width:150px
  }
  footer>small {
    width:100%;
    margin-left:0
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  * {
    transition:none!important
  }
}

nav>a.is-current span {
  color:var(--accent-dark)
}

nav>a.is-current small {
  color:var(--ink)
}


/* ================================================================
   旧配色：セージグリーン（カーキ）
   戻す場合は、ファイル先頭の :root { ... } を丸ごと消して、
   下の :root { ... } のコメント記号（スラッシュとアスタリスク）を外してください。
   ほかは一切さわらなくて大丈夫です。
   ----------------------------------------------------------------
:root {
  --bg:#fff;
  --btn-bg:#fff;
  --header-bg:#ffffffed;
  --ivory:#fafbf7;
  --soft:#e5ece1;
  --band2:#f0f4eb;
  --grad-a:#fbfcf9;
  --grad-b:#f0f4eb;
  --grad-c:#f9faf6;

  --ink:#424b43;
  --text-soft:#5b665b;
  --muted:#707b70;
  --on-accent:#fff;

  --accent:#698263;
  --accent-fill:#698263;
  --accent-fill-hover:#455c40;
  --accent-dark:#405a39;
  --accent-dark2:#536c4d;
  --wash:#8d9f85;
  --numbg:#a8b99c;

  --line:#dbe3d6;
  --edge:#93a68a;
  --rule:#a8b7a3;
  --script:#dce5d5;

  --bar-bg:#424b43;
  --bar-ink:#eef3ec;
  --bar-label:#b9cdb2;
  --bar-sub:#cfdcca;
  --pill-bg:#e5ece1;
  --pill-ink:#3b5237;

  --fig-base:#c3cfbe;
  --fig-tick:#b9c7b2;

  --serif:'Noto Serif JP',"Hiragino Mincho ProN","Yu Mincho",serif;
  --sans:'Noto Sans JP',"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  --latin:'Cormorant Garamond',Georgia,serif;
  --line-green:#06c755;
  color-scheme:light
}
   ================================================================ */