/* reservation1.css — HTML document order */

/* ========== 1. Tokens ========== */

:root {
  /* Breakpoints: layout 768 / nav-full 1100（768〜1099は header CTA + ハンバーガー） */
  --bp-layout: 768px;
  --bp-nav-full: 1100px;

  /* Base palette */
  --pine-ink: #051f20;
  --pine-deep: #0b2b26;
  --pine: #163832;
  --pine-mid: #235347;
  --sage: #8eb69b;
  --mist: #daf1de;
  --green-white: #f7fdfb;
  --green-accent-light: #05d298;
  --green-accent-dark: #00A878;

  --bg: var(--green-white);
  --bg-alt: #eeece7;
  --surface: #ffffff;
  --fg: #1c1c1e;
  --fg-2: #3a3a3c;
  --fg-3: #6e6e73;
  --separator: rgba(60, 60, 67, 0.16);
  /* System colors (unchanged) */
  --system-red: #ff4245;
  --system-orange: #ff9230;
  --system-yellow: #ffd600;
  --system-green: #30d158;
  --system-mint: #00dac3;
  --system-cyan: #3cd3fe;
  --system-blue: #0091ff;
  --system-indigo: #6d7cff;
  --system-purple: #db34f2;
  --system-purple-34: #910aa3;
  --system-pink: #ff375f;
  --system-gray: #98989d;
  --action: var(--system-green);
  /* 端点のみ。中間は oklch 色相補間 */
  --grad-warm: linear-gradient(100deg in oklch shorter hue, var(--system-pink) 0%, var(--system-yellow) 100%);
  --grad-cool: linear-gradient(100deg in oklch shorter hue, var(--system-pink) 0%, var(--system-blue) 100%);
  --grad-rise: linear-gradient(100deg in oklch shorter hue, var(--system-pink) 0%, var(--system-purple) 100%);
  --grad-deep: linear-gradient(100deg in oklch shorter hue, var(--system-purple-34) 0%, var(--system-blue) 100%);
  /* 赤→ピンクの短い弧ではなく、スペクトル一周 */
  --grad-gradient: linear-gradient(to right in oklch longer hue, var(--system-red) 0%, var(--system-pink) 100%);

  --ink-soft: var(--fg-2);
  --muted: var(--fg-3);
  --paper-2: var(--bg-alt);
  --band: var(--bg-alt);
  --band-deep: var(--action);
  --accent: var(--action);
  --accent-2: var(--action);
  --line: var(--separator);
  --white: var(--surface);
  --shadow: 4px 18px 25px rgb(from var(--pine-deep) r g b / 14%);
  /* 英字・数字は Inter、日本語は Noto Sans JP にフォールバック */
  --font: "Inter", "Noto Sans JP", "Hiragino Sans", sans-serif;
  /* Type scale: 40 / 28 / 24 / 18 / 16 / 14 */
  --text-40: 40px;
  --text-28: 28px;
  --text-24: 24px;
  --text: 18px;
  --text-16: 16px;
  --text-14: 14px;
  --text-sm: var(--text-16);
  --leading: 1.75;
  --leading-display: 1.25;
  --leading-title: 1.35;
  --leading-label: 1.4;
  --pad-min: 8%;
  --content-max: 70rem;
  --pad-inline: var(--pad-min);
  --measure: 40rem;
}

/* SP：タイプスケールを1トーン下げる（40/28/24/18/16/14 → 28/24/18/16/14/14） */

@media (max-width: 767px) {
  :root {
    --text-40: 28px;
    --text-28: 24px;
    --text-24: 18px;
    --text: 16px;
    --text-16: 14px;
    --text-14: 14px;
  }
}

/* ========== 2. Base ========== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 4.75rem;
}

body {
  margin: 0;
  color: var(--green-white);
  background: var(--pine-ink);
  font-family: var(--font);
  font-size: var(--text);
  font-weight: 400;
  line-height: var(--leading);
  letter-spacing: 0.01em;
}

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

a {
  color: inherit;
}

h1,
h2,
h3 {
  font-family: var(--font);
  font-weight: 700;
  letter-spacing: 0.01em;
  margin: 0 0 0.75rem;
}

h1 {
  font-size: 1.75rem;
  font-size: clamp(1.75rem, 1.05rem + 2.4cqi, 2.75rem);
  line-height: var(--leading-display);
}

h2 {
  font-size: var(--text-40);
  line-height: var(--leading-display);
  letter-spacing: 0.01em;
  margin: 0 0 1.75rem;
}

h3 {
  font-size: var(--text-28);
  line-height: var(--leading-title);
  letter-spacing: 0.01em;
  font-weight: 700;
  margin: 0 0 1rem;
}

p {
  margin: 0 0 1.15rem;
  font-size: var(--text);
  line-height: var(--leading);
  letter-spacing: 0.01em;
}

/* SP下端の余白は .site-footer の padding（固定CTA分）に任せる */

/* ========== 3. Glow ========== */

.site-glow {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.glow {
  position: absolute;
  display: block;
  filter: blur(100px);
  opacity: 0.55;
  will-change: transform;
}

.glow--line {
  border-radius: 999px;
  filter: blur(48px);
}

.glow--a {
  width: 46vmin;
  height: 58vmin;
  top: -18%;
  right: -16%;
  border-radius: 50%;
  background: var(--system-cyan);
  filter: blur(110px);
  opacity: 0.75;
}

.glow--b {
  width: 44vmin;
  height: 36vmin;
  left: -18%;
  top: -6%;
  border-radius: 62% 38% 48% 52%;
  background: var(--system-purple);
  filter: blur(120px);
  opacity: 0.5;
}

.glow--c {
  width: 36vmin;
  height: 36vmin;
  left: 38%;
  top: 8%;
  border-radius: 50%;
  background: var(--green-accent-light);
  filter: blur(115px);
  opacity: 0.78;
}

.glow--d {
  width: 39vmin;
  height: 27vmin;
  right: -8%;
  top: 12%;
  border-radius: 70% 30% 60% 40%;
  background: var(--system-pink);
  filter: blur(105px);
  opacity: 0.7;
}

.glow--e {
  width: 33vmin;
  height: 48vmin;
  left: -12%;
  bottom: -14%;
  border-radius: 45% 55% 40% 60%;
  background: var(--system-blue);
  filter: blur(112px);
  opacity: 0.7;
}

.glow--f {
  width: 38vmin;
  height: 30vmin;
  right: -10%;
  bottom: -8%;
  border-radius: 40% 60% 55% 45% / 55% 40% 60% 45%;
  background: var(--system-mint);
  filter: blur(118px);
  opacity: 0.8;
}

.glow--g {
  width: 27vmin;
  height: 27vmin;
  left: 8%;
  top: 40%;
  border-radius: 50%;
  background: var(--system-yellow);
  filter: blur(118px);
  opacity: 0.8;
}

.glow--h {
  width: 28vmin;
  height: 28vmin;
  right: 18%;
  top: 58%;
  border-radius: 50%;
  background: var(--system-purple);
  filter: blur(118px);
  opacity: 0.5;
}

.glow--i {
  width: 82vmin;
  height: 3.75vmin;
  top: 44%;
  left: -18%;
  background: var(--system-cyan);
  filter: blur(42px);
  opacity: 0.6;
  transform: rotate(-18deg);
}

.glow--j {
  width: 60vmin;
  height: 3vmin;
  top: 14%;
  left: 12%;
  background: var(--system-pink);
  filter: blur(38px);
  opacity: 0.7;
  transform: rotate(-8deg);
}

.glow--k {
  width: 3.4vmin;
  height: 68vmin;
  top: 8%;
  left: 66%;
  background: var(--grad-warm);
  filter: blur(44px);
  opacity: 0.5;
  transform: rotate(119deg);
}

.glow--l {
  width: 19vmin;
  height: 4.5vmin;
  top: 51%;
  right: 24%;
  background: var(--system-orange);
  filter: blur(52px);
  opacity: 0.6;
  transform: rotate(-38deg);
}

.glow--m {
  width: 133vmin;
  height: 2.6vmin;
  bottom: 7%;
  left: 3%;
  background: var(--grad-deep);
  filter: blur(36px);
  opacity: 0.72;
  transform: rotate(186deg);
}

/* ========== 4. Glass variants ========== */

/*
  ガラス（色付き部品）— 骨格の .glass は使わない
  例: class="glass--blue"
*/

.glass--white {
  background: rgb(from var(--green-white) r g b / 12%);
  border: 1px solid rgb(from var(--green-white) r g b / 20%);
  box-shadow:
    inset 0 1px 0 rgb(from var(--green-white) r g b / 18%),
    0 12px 40px rgb(from var(--pine-ink) r g b / 22%);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
}

.glass--blue {
  background: rgb(from var(--system-blue) r g b / 14%);
  border: 1px solid rgb(from var(--system-cyan) r g b / 28%);
  box-shadow:
    inset 0 1px 0 rgb(from var(--system-cyan) r g b / 22%),
    0 12px 40px rgb(from var(--pine-ink) r g b / 22%);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
}

.glass--red {
  background: rgb(from var(--system-pink) r g b / 14%);
  border: 1px solid rgb(from var(--system-red) r g b / 26%);
  box-shadow:
    inset 0 1px 0 rgb(from var(--system-pink) r g b / 22%),
    0 12px 40px rgb(from var(--pine-ink) r g b / 22%);
  backdrop-filter: blur(12px) saturate(165%);
  -webkit-backdrop-filter: blur(12px) saturate(165%);
}

.glass--green {
  background: rgb(from var(--green-accent-light) r g b / 14%);
  border: 1px solid rgb(from var(--system-mint) r g b / 28%);
  box-shadow:
    inset 0 1px 0 rgb(from var(--system-mint) r g b / 20%),
    0 12px 40px rgb(from var(--pine-ink) r g b / 22%);
  backdrop-filter: blur(12px) saturate(155%);
  -webkit-backdrop-filter: blur(12px) saturate(155%);
}

.glass--orange {
  background: rgb(from var(--system-orange) r g b / 13%);
  border: 1px solid rgb(from var(--system-orange) r g b / 28%);
  box-shadow:
    inset 0 1px 0 rgb(from var(--system-orange) r g b / 22%),
    0 12px 40px rgb(from var(--pine-ink) r g b / 22%);
  backdrop-filter: blur(10px) saturate(155%);
  -webkit-backdrop-filter: blur(10px) saturate(155%);
}

.glass--purple {
  background: rgb(from var(--system-purple) r g b / 14%);
  border: 1px solid rgb(from var(--system-indigo) r g b / 28%);
  box-shadow:
    inset 0 1px 0 rgb(from var(--system-purple) r g b / 22%),
    0 12px 40px rgb(from var(--pine-ink) r g b / 22%);
  backdrop-filter: blur(14px) saturate(170%);
  -webkit-backdrop-filter: blur(14px) saturate(170%);
}

/* ========== 5. Layout utilities ========== */

.shell {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--pad-inline);
  container-type: inline-size;
  container-name: shell;
}

.narrow {
  max-width: var(--measure);
  margin: auto;
}

.skip {
  position: absolute;
  left: -999px;
  top: 0;
}

.skip:focus {
  left: 1rem;
  top: 1rem;
  z-index: 100;
  background: var(--white);
  padding: 0.5rem 0.75rem;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.parallax-md {
  --parallax-range: 40px;
}

.parallax-xl {
  --parallax-range: 100px;
}

.parallax-md::before,
.parallax-xl::before {
  transform: translateY(var(--parallax-y, 0px));
}

.section {
  padding-block: clamp(3.25rem, 2.5rem + 2vw, 6.5rem);
  padding-inline: 0;
}

.section-tight {
  padding-block: clamp(2.5rem, 1.5rem + 2vw, 4rem);
  background: var(--pine);
  color: var(--pine-ink);
}

.eyebrow {
  font-size: var(--text-24);
  letter-spacing: 0.14em;
  line-height: var(--leading-label);
  text-transform: uppercase;
  margin-block-end: 5rem;
  margin-inline-start: 2rem;
  font-weight: 700;
  position: relative;
}

.eyebrow::before {
  content: "";
  background: var(--green-accent-light);
  width: 1.25rem;
  height: .25rem;
  position: absolute;
  left: -2rem;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 9999px;
  filter: drop-shadow(0 0 2px var(--green-accent-light));
}

.small {
  font-size: var(--text-14);
  line-height: 1.7;
  letter-spacing: 0.01em;
}

.small.light {
  color: rgb(from var(--green-white) r g b / 72%);
}

.note-block {
  margin-top: 2rem;
  padding: 1.35rem 1.5rem;
  background: rgb(from var(--green-white) r g b / 10%);
  border: 1px solid rgb(from var(--green-white) r g b / 16%);
  backdrop-filter: blur(12px) saturate(220%);
  -webkit-backdrop-filter: blur(12px) saturate(220%);
  border-radius: 1.25rem;
  padding: 1.25rem 1.2rem;
  box-shadow: inset 2px 2px 6px -1px rgb(from var(--mist) r g b / 20%), 6px 7px 35px rgb(from var(--mist) r g b / 20%);
}

.check-list {
  list-style: none;
  margin: 0;
  padding-left: 0;
}

.check-list li {
  position: relative;
  margin-bottom: 0.7rem;
  padding-left: 1.7rem;
}

.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 0;
  background-color: var(--accent);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.2 8.3 6.6 11.7 12.8 4.3' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.2 8.3 6.6 11.7 12.8 4.3' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.two-col {
  display: grid;
  gap: 1.25rem;
  margin-top: 2rem;
}

.wrap {
  overflow-x: auto;
  margin: 1.5rem 0;
  border: 1px solid rgb(from var(--pine) r g b / 12%);
  background: var(--green-white);
  color: var(--pine-ink);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

th,
td {
  padding: 0.8rem 0.9rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.is-hidden {
  display: none;
}

.rise {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.rise.is-in {
  opacity: 1;
  transform: none;
}

.lead {
  max-width: 40rem;
  font-size: var(--text);
  line-height: var(--leading);
  letter-spacing: 0.01em;
}

.check-list.ok li::before {
  background-color: var(--green-accent-light);
}

@media (min-width: 768px) {
  .two-col {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 768px) {
  .shell {
    --content: min(var(--content-max), calc(100% - 2rem - (100% - 768px) * 0.5));
    --pad-inline: max(var(--pad-min), calc((100% - var(--content)) / 2));
  }

  .section:not(.section-tight) {
    padding-block: 14.5%;
  }
}

@media (max-width: 767px) {
  .section {
    padding-block: 16dvh;
  }
}

/* ========== 6. Buttons ========== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.85rem;
  padding: 0.65rem 1.25rem;
  border-radius: 999px;
  background: var(--green-accent-dark);
  color: var(--green-white);
  text-decoration: none;
  font-family: inherit;
  font-size: inherit;
  line-height: 1.3;
  font-weight: 500;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.25s ease, background 0.25s ease;
}

.btn:hover {
  transform: translateY(-1px);
  background: #15574e;
}

.btn-ghost {
  background: transparent;
  border-color: rgb(from var(--grad-gradient) r g b / 10%);
}

.btn-ghost:hover {
  background: rgba(15, 61, 54, 0.06);
}

/* ========== 7. Header / Nav ========== */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  border-radius: 0;
  box-shadow: none;
  border-bottom: 1px solid rgb(from var(--green-white) r g b / 16%);
  /* .glass--white の半透明＋backdrop を使う */
  transform: translateY(-100%);
  transition: transform 0.35s ease;
  pointer-events: none;
}

.site-header.glass--white {
  background: rgb(from var(--green-white) r g b / 10%);
  border-color: rgb(from var(--green-white) r g b / 16%);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
}

.site-header.is-visible {
  transform: translateY(0);
  pointer-events: auto;
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 3.75rem;
}

.brand {
  font-family: var(--font);
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 0.04em;
}

.nav-toggle {
  display: none;
  width: 2.75rem;
  height: 2.75rem;
  margin-left: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--band-deep);
  cursor: pointer;
}

.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  display: block;
  width: 1.25rem;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
}

.nav-toggle-bars {
  position: relative;
}

.nav-toggle-bars::before,
.nav-toggle-bars::after {
  content: "";
  position: absolute;
  left: 0;
  transition: transform 0.2s ease, top 0.2s ease;
}

.nav-toggle-bars::before {
  top: -6px;
}

.nav-toggle-bars::after {
  top: 6px;
}

.site-header.is-open .nav-toggle-bars {
  background: transparent;
}

.site-header.is-open .nav-toggle-bars::before {
  top: 0;
  transform: rotate(45deg);
}

.site-header.is-open .nav-toggle-bars::after {
  top: 0;
  transform: rotate(-45deg);
}

.nav {
  display: none;
  margin-left: auto;
  margin-right: 0.5rem;
  font-size: 0.92rem;
}

.nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.1rem;
}

.nav-cta {
  display: none;
}

/* ヘッダー表示・ナビ展開で共通のデモ（ghost） */
.nav-cta .btn-ghost {
  gap: 0.4em;
  background: rgb(from var(--green-white) r g b / 10%);
  border-color: rgb(from var(--grad-gradient) r g b / 10%);
  color: var(--green-white);
  backdrop-filter: blur(12px) saturate(220%);
  -webkit-backdrop-filter: blur(12px) saturate(220%);
  box-shadow: inset 2px 2px 6px -1px rgb(from var(--mist) r g b / 20%), 6px 7px 35px rgb(from var(--mist) r g b / 20%);
}

.nav-cta .btn-ghost:hover {
  background: rgb(from var(--green-white) r g b / 8%);
  color: var(--green-white);
  border-color: var(--green-white);
}

.nav-list a {
  text-decoration: none;
}

.nav-list a:hover {
  color: var(--accent);
}


/* 768〜1099: brand + CTA + ハンバーガー（ヘッダー限定） */
@media (min-width: 768px) and (max-width: 1099px) {
  .site-header .brand {
    order: 1;
  }

  .site-header .nav {
    order: 2;
    display: flex;
    align-items: center;
    margin-left: auto;
    margin-right: 0;
  }

  .site-header .nav-list {
    display: none;
  }

  .site-header .nav-cta {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 0.55rem;
  }

  .site-header .nav-cta .btn {
    min-height: 2.25rem;
    padding: 0.4rem 0.95rem;
    font-size: 0.9rem;
    white-space: nowrap;
  }

  .site-header .nav-toggle {
    order: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 0.5rem;
    color: var(--green-white);
  }

  /* 展開時は .nav（CTA）が absolute で外れるので、✖️を右端へ */
  .site-header.is-open .nav-toggle {
    margin-left: auto;
  }
}

/* 1100〜: brand + NAVリスト全部 + CTA（ヘッダー限定） */
@media (min-width: 1100px) {
  .site-header .nav {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    margin-left: auto;
  }

  .site-header .nav-list.glass--white {
    background: transparent;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .site-header .nav-cta {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 0.55rem;
  }

  .site-header .nav-cta .btn {
    min-height: 2.25rem;
    padding: 0.4rem 0.95rem;
    font-size: 0.9rem;
    white-space: nowrap;
  }

  .site-header .nav-toggle {
    display: none;
  }
}

/* 〜1099: ハンバーガー展開（フルスクリーン・ヘッダー限定） */
@media (max-width: 1099px) {
  .site-header .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--green-white);
  }

  /* 〜767: トグルを右端に（768〜は CTA の右隣） */
  @media (max-width: 767px) {
    .site-header .nav-toggle {
      margin-left: auto;
    }
  }

  /*
    展開時：フル画面炎＋グラスナビ。
    下部固定 .cta-bar-sp（z-index:100）の上に乗るため、NAV内にも同系CTAを置く。
  */
  .site-header.is-open {
    overflow: visible;
  }

  .site-header.is-open.glass--white {
    background: transparent;
    border: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
  }

  .site-header.is-open .brand,
  .site-header.is-open .nav-toggle {
    position: relative;
    z-index: 1;
  }

  .site-header.is-open .nav {
    display: block;
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    right: 0;
    height: 100dvh;
    margin: 0;
    padding: 3.75rem 8% 1.25rem;
    overflow-x: hidden;
    overflow-y: auto;
    isolation: isolate;
    background: transparent;
    border: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
  }

  /* 背景（炎） */
  .site-header.is-open .nav::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-color: #030406;
    background-image:
      radial-gradient(ellipse 90% 55% at 50% 12%, rgb(from var(--system-green) r g b / 35%), transparent 72%),
      radial-gradient(ellipse 90% 55% at 18% 37%, rgb(from var(--system-red) r g b / 35%), transparent 72%),
      radial-gradient(ellipse 80% 50% at 88% 47%, rgb(from var(--system-blue) r g b / 40%), transparent 73%),
      radial-gradient(ellipse 81% 42% at 48% 77%, rgb(from var(--system-orange) r g b / 49%), transparent 83%);
  }

  /* CTA をナビリストの上に */
  .site-header.is-open .nav-cta {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 0.75rem;
    margin: 1.25rem 0 0;
    justify-content: center;
  }

  .site-header.is-open .nav-cta .btn {
    box-shadow: 0 8px 18px rgba(13, 58, 24, 0.28);
  }

  .site-header.is-open .nav-cta .btn:hover {
    background: var(--pine-mid);
  }

  .site-header.is-open .nav-list {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
    margin-block: 1.25rem 2rem;
    padding: 1.25rem 1.2rem;
    border-radius: 1.25rem;
    background: rgb(from var(--green-white) r g b / 3%);
    backdrop-filter: blur(15px) saturate(130%);
    -webkit-backdrop-filter: blur(15px) saturate(130%);
  }

  .site-header.is-open .nav-list a {
    display: block;
    padding: 0.9rem 0;
  }
}

@media (max-width: 767px) {
  .cta-bar-sp .btn {
    flex: 1;
    white-space: nowrap;
    font-size: 0.92rem;
    padding-inline: 0.65rem;
  }
}

@media (max-width: 1099px) {
  .site-header.is-open .nav-cta .btn {
    flex: 1;
    white-space: nowrap;
    font-size: 0.92rem;
    padding-inline: 0.65rem;
  }
}

/* ========== 8. SP fixed CTA bar ========== */

/* SP専用・画面下固定 CTA（main/shell の外＝contain の影響を受けない） */

.cta-bar-sp {
  display: none;
}

.cta-bar-sp .btn-ghost {
  color: var(--green-white);
}

.cta-bar-sp .btn-ghost:hover {
  background: transparent;
  color: var(--mist);
  border-color: var(--mist);
}

@media (max-width: 767px) {
  .cta-bar-sp {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    gap: 0.75rem;
    margin: 0;
    padding: 0.7rem 1rem calc(0.7rem + env(safe-area-inset-bottom));
    justify-content: center;
  }
}

/* ========== 9. Hero (#top) ========== */

.hero {
  position: relative;
  padding-block: 5.5rem;
  height: 85dvh;
}

.hero-grid {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}

.hero-aside {
  display: grid;
  gap: 3.25rem;
  min-width: 0;
}

.hero-copy {
  position: relative;
  z-index: 1;
  max-width: 34rem;
  container-type: inline-size;
  container-name: hero-copy;
}

.hero-headline {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  width: fit-content;
  max-width: 100%;
  padding: 1.1rem 1.25rem 1.25rem;
  border-radius: 1.25rem;
  margin-block-end: 1.75rem;
  margin-inline: auto;
  box-sizing: border-box;
}

.hero-headline h1 {
  margin-bottom: 1rem;
}

.hero-headline .hero-lead {
  margin: 0;
}

.hero-copy h1 {
  font-size: clamp(13px, 3.9cqi, 20px);
  line-height: 1.35;
  letter-spacing: 0.04em;
  margin-bottom: 1rem;
  font-weight: 700;
  white-space: nowrap;
}

.h1-pill {
  display: inline-block;
  padding: 0.15em 0.6em;
  border-radius: 999px;
  line-height: 1.35;
}

.h1-pill-warm {
  background: var(--grad-warm);
}

.h1-pill-cool {
  background: var(--grad-cool);
}

.brand-mark {
  font-family: var(--font);
  letter-spacing: 0.14em;
  font-size: var(--text-14);
  font-weight: 700;
  line-height: var(--leading-label);
  margin-bottom: 0.75rem;
  color: var(--accent);
}

.hero-lead {
  font-family: var(--font);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.02em;
  max-width: 34rem;
  margin: 0;
}

.hero-lead-main {
  display: inline;
  font-size: 1.75rem;
  font-size: clamp(1.75rem, 1.05rem + 2.4cqi, 2.75rem);
  line-height: 1.25;
}

.hero-lead-accent {
  position: relative;
  display: inline-block;
  font-size: clamp(2rem, 9.5cqi, 3.25rem);
  line-height: 1.15;
  white-space: nowrap;
}

.hero-lead-accent-to,
.hero-lead-accent-from {
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.hero-lead-accent-to {
  background-image: var(--grad-rise);
}

.hero-lead-accent-from {
  position: absolute;
  inset: 0;
  background-image: var(--grad-deep);
  animation: hero-lead-accent-fade 1s ease 1s forwards;
}

.hero-comments {
  position: relative;
  height: 13rem;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
}

.hero-comment {
  --comment-from: 5px;
  position: absolute;
  width: max-content;
  max-width: 13rem;
  margin: 0;
  padding: 0.6rem 0.85rem;
  background: var(--white);
  border-radius: 1rem;
  box-shadow: 0 10px 26px rgba(15, 61, 54, 0.12);
  color: var(--ink-soft);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.5;
  opacity: 0;
  transform: translateY(var(--comment-from));
  animation: hero-comment-play 8.9s ease infinite both;
  animation-delay: 4.1s;
}

.hero-comment::after {
  content: "";
  position: absolute;
  width: 11px;
  height: 11px;
  background: var(--white);
  transform: rotate(45deg);
}

.hero-comment:nth-child(1),
.hero-comment:nth-child(2) {
  --comment-from: -5px;
}

.hero-comment:nth-child(1) {
  top: 0;
  right: 0;
  max-width: 11.5rem;
}

.hero-comment:nth-child(1)::after {
  bottom: -6px;
  right: 1.2rem;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.hero-comment:nth-child(2) {
  top: 1.15rem;
  left: 0;
  max-width: 12.5rem;
  animation-delay: 0.2s;
}

.hero-comment:nth-child(2)::after {
  left: 1.35rem;
  bottom: -6px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.hero-comment:nth-child(3) {
  top: 3.2rem;
  right: 4%;
  animation-delay: 5.4s;
}

.hero-comment:nth-child(3)::after {
  bottom: -6px;
  right: 1.1rem;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.hero-comment:nth-child(4) {
  top: 4.8rem;
  left: 0;
  max-width: 12rem;
  animation-delay: 1.5s;
}

.hero-comment:nth-child(4)::after {
  top: -6px;
  left: 1.2rem;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.hero-comment:nth-child(5) {
  top: 6.6rem;
  left: 16%;
  max-width: 14rem;
  animation-delay: 2.8s;
}

.hero-comment:nth-child(5)::after {
  top: -6px;
  right: 1.15rem;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 3.5rem;
}

/* CTA primary / ghost（hero・SPバー共通。配置差は各コンテナ） */

.hero .cta-row .btn,
.cta-bar-sp .btn {
  box-shadow: 0 8px 18px rgba(13, 58, 24, 0.28);
}

.hero .cta-row .btn:hover,
.cta-bar-sp .btn:hover {
  background: var(--pine-mid);
}

.hero .cta-row .btn-ghost,
.cta-bar-sp .btn-ghost {
  gap: 0.4em;
  background: transparent;
  box-shadow: 0 8px 18px rgba(163, 220, 178, 0.16);
  backdrop-filter: blur(24px) saturate(220%);
}

.hero .cta-row .btn-ghost {
  border-color: var(--mist);
}

.btn-demo-icon {
  width: 1.45em;
  height: auto;
  flex-shrink: 0;
}

.hero .cta-row .btn-ghost:hover {
  background: transparent;
  color: var(--pine-mid);
  border-color: var(--pine-mid);
}

.hero-devices {
  position: relative;
}

.hero-devices::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 78%;
  aspect-ratio: 1;
  right: 4%;
  top: -60%;
  border: 43px solid var(--green-accent-light);
  border-radius: 50%;
  will-change: transform;
  transform: translateY(var(--parallax-y, 0px));
}

.device-mac,
.device-phone {
  margin: 0;
}

.device-mac {
  position: relative;
  width: 100%;
}

.device-mac img,
.device-phone img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 16px 28px rgba(15, 61, 54, 0.28));
}

.device-phone {
  position: absolute;
  right: -1rem;
  bottom: -0.25rem;
  width: min(34%, 9.5rem);
  z-index: 2;
}

.device-mac figcaption,
.device-phone figcaption {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.hero-eyebrow {
  font-size: var(--text-14);
  letter-spacing: 0.14em;
  line-height: var(--leading-label);
  margin-block-end: 3.5rem;
  font-weight: 500;
}

@media (min-width: 768px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 2rem;
  }

  .hero-comments {
    height: 11rem;
  }

  .hero-comment:nth-child(1) {
    top: -18px;
    right: 0;
    max-width: 14rem;
  }

  .hero-comment:nth-child(2) {
    top: 1.2rem;
    left: 6%;
    max-width: 18rem;
  }

  .hero-comment:nth-child(3) {
    top: 3.9rem;
    right: 8%;
    max-width: 15.5rem;
  }

  .hero-comment:nth-child(4) {
    top: 4.7rem;
    left: -30px;
    max-width: 17.5rem;
  }

  .hero-comment:nth-child(5) {
    top: 9.5rem;
    right: 22%;
    left: auto;
    max-width: 16rem;
  }
}

@media (min-width: 768px) {
  .hero-headline {
    padding: 1.35rem 1.6rem 1.5rem;
    border-radius: 1.5rem;
    margin-bottom: 2rem;
  }

  .hero-headline h1,
  .hero-copy h1 {
    font-size: clamp(15px, 4.5cqi, 52px);
    margin-bottom: 1.75rem;
  }
}

@media (max-width: 767px) {
  .hero {
    padding-top: 4.5rem;
    height: unset;
  }

  /* hero 内 CTA は SP では使わない（下固定バーに委譲） */
  .hero .cta-row {
    display: none;
  }

  .hero-copy {
    z-index: 5;
  }

  .hero-comments {
    height: 10rem;
  }

  .hero-comment {
    font-size: 13px;
  }

  .hero-comment:nth-child(1),
  .hero-comment:nth-child(2),
  .hero-comment:nth-child(3),
  .hero-comment:nth-child(4) {
    max-width: calc(50% - 0.7rem);
  }

  .hero-comment:nth-child(1) {
    top: -1.85rem;
    right: 0;
  }

  .hero-comment:nth-child(2) {
    top: 1.15rem;
    left: 0;
  }

  .hero-comment:nth-child(3) {
    top: 3.15rem;
    left: 37%;
  }

  .hero-comment:nth-child(4) {
    top: 7.15rem;
    right: 1%;
    left: auto;
  }

  .hero-comment:nth-child(5) {
    top: 7.6rem;
    left: -2%;
    max-width: 68%;
  }
}

/* ========== 10. Overview ========== */

.overview-split {
  display: grid;
  gap: 1.75rem;
  padding: 2rem;
  background: var(--surface);
  border-radius: 32px;
  outline: 6px solid rgb(from var(--surface) r g b / 21.176%);
}

.overview-split>div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.overview-more {
  align-self: flex-end;
  margin-top: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  background: var(--green-white);
  color: var(--pine);
  border: 1px solid var(--pine);
  box-shadow: 0 8px 18px var(--mist);
  padding: 0.65rem 1.25rem;
  border-radius: 999px;
}

.overview-more:hover {
  color: var(--pine);
}

.overview-label {
  margin: 0 0 0.85rem;
  color: var(--pine-ink);
  font-size: var(--text);
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: var(--leading-label);
}

.overview-text {
  font-size: var(--text-16);
  line-height: var(--leading);
  letter-spacing: 0.01em;
  color: var(--ink-soft);
}

.overview-split p:last-child {
  margin-bottom: 0;
}

@media (min-width: 768px) {
  .overview-split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(2rem, 1rem + 4vw, 5rem);
    align-items: stretch;
  }

  .overview-split>div {
    height: 100%;
  }

  .overview-more {
    margin-top: auto;
    align-self: right;
    font-size: var(--text-16);
  }
}

/* ========== 11. Difference ========== */

.section-intro {
  max-width: none;
  margin-bottom: 0.5rem;
}

#difference .section-intro h2 {
  /* 独立したセクション見出し = 40（グローバル h2 に合わせる） */
  line-height: var(--leading-display);
  letter-spacing: 0.01em;
  margin-bottom: 8rem;
}

.section-intro .lead {
  margin-bottom: 1.15rem;
}

.section-intro .lead:last-child {
  margin-bottom: 0;
}

.grow-steps {
  list-style: none;
  padding: 0;
  margin: 2.75rem 0 0;
  display: grid;
  gap: 5rem;
}

.grow-steps+.small {
  margin-top: 2rem;
}

.grow-steps li {
  position: relative;
  display: grid;
  gap: 1.25rem;
  padding: 9% 3rem;
  border-radius: 32px;
  /* 色・blur は .glass--* */
}

.grow-figure {
  --parallax-back: calc(var(--parallax-y, 0px) * -0.4);
  position: relative;
  margin: 0;
  order: 1;
}

.grow-figure::before {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  filter: drop-shadow(4px 18px 25px rgb(from var(--mist) r g b / 30%));
}

.grow-figure img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(4px 18px 25px rgb(from var(--mist) r g b / 30%));
  transform: translateY(calc(var(--parallax-y, 0px) * -1));
}

.grow-steps li:nth-child(1) .grow-figure::before {
  width: 100%;
  aspect-ratio: 594 / 196;
  right: 0;
  bottom: -1%;
  background: url("./assets/ellipse.svg") center / contain no-repeat;
  transform: translateY(var(--parallax-back, 0px)) rotate(-12deg);
}

.grow-steps li:nth-child(2) .grow-figure::before {
  width: 100%;
  aspect-ratio: 594 / 445;
  left: 0;
  bottom: -3%;
  background: url("./assets/ellipse2.svg") center / contain no-repeat;
  transform: translateY(var(--parallax-back, 0px));
}

.grow-steps li:nth-child(3) .grow-figure::before {
  background: var(--system-orange);
  width: 100%;
  aspect-ratio: 594 / 445;
  left: 0;
  bottom: -5%;
  background: url("./assets/ellipse3.svg") center / contain no-repeat;
  transform: translateY(var(--parallax-back, 0px));
}

.grow-steps li:nth-child(4) .grow-figure::before {
  background: var(--system-purple);
  width: 100%;
  aspect-ratio: 594 / 445;
  left: 0;
  bottom: -5%;
  background: url("./assets/ellipse4.svg") center / contain no-repeat;
  transform: translateY(var(--parallax-back, 0px));
}

.grow-num {
  display: flex;
  align-items: center;
  gap: 0.55em;
  margin-bottom: 0.75rem;
  font-size: var(--text-24);
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: var(--leading-label);
}

.grow-num-mark {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 1.7em;
  height: 1.7em;
  border-radius: 50%;
  color: var(--surface);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
}

.grow-steps li:nth-child(1) .grow-num {
  color: var(--system-pink);
}

.grow-steps li:nth-child(1) .grow-num-mark {
  background: var(--system-pink);
}

.grow-steps li:nth-child(2) .grow-num {
  color: var(--system-cyan);
}

.grow-steps li:nth-child(2) .grow-num-mark {
  background: var(--system-cyan);
}

.grow-steps li:nth-child(3) .grow-num {
  color: var(--system-orange);
}

.grow-steps li:nth-child(3) .grow-num-mark {
  background: var(--system-orange);
}

.grow-steps li:nth-child(4) .grow-num {
  color: var(--system-purple);
}

.grow-steps li:nth-child(4) .grow-num-mark {
  background: var(--system-purple);
}

/* grow-steps 上ではガラスを少し濃く（本文の可読性） */

.grow-steps li.glass--red {
  --grow-glass: var(--system-pink);
}

.grow-steps li.glass--blue {
  --grow-glass: var(--system-cyan);
}

.grow-steps li.glass--orange {
  --grow-glass: var(--system-orange);
}

.grow-steps li.glass--purple {
  --grow-glass: var(--system-purple);
}

.grow-steps li.glass--red,
.grow-steps li.glass--blue,
.grow-steps li.glass--orange,
.grow-steps li.glass--purple {
  background: rgb(from var(--grow-glass) r g b / 18%);
  border-color: rgb(from var(--grow-glass) r g b / 64%);
  backdrop-filter: blur(12px) saturate(220%);
  -webkit-backdrop-filter: blur(12px) saturate(220%);
}

.grow-steps h3 {
  /* H2 配下 → 28 */
  font-size: var(--text-28);
  margin-bottom: 1rem;
  line-height: var(--leading-title);
  letter-spacing: 0.01em;
}

.grow-steps p {
  margin: 0 0 0.85rem;
  font-size: var(--text);
  line-height: var(--leading);
  letter-spacing: 0.01em;
}

.grow-steps p:last-child {
  margin-bottom: 0;
}

@media (max-width: 767px) {
  .grow-steps li {
    padding: 9% 1.5rem;
  }
}

@media (min-width: 768px) {
  .grow-steps li {
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem);
    align-items: center;
    column-gap: clamp(1.5rem, 2vw, 3rem);
  }

  .grow-figure {
    grid-column: 2;
    grid-row: 1 / span 5;
  }

  .grow-num,
  .grow-steps h3,
  .grow-steps li>p {
    grid-column: 1;
  }
}

/* ========== 12. Features ========== */

#features>.shell>h2 {
  margin-bottom: 3rem;
  color: var(--green-white);
}

.feature-grid {
  display: grid;
  counter-reset: feature;
}

#features.section {
  background: rgb(from var(--pine-ink) r g b / 64%);
  backdrop-filter: blur(24px) saturate(200%);
}

.feature {
  display: flex;
  flex-direction: column;
  /* shell の左右パディングを打ち消し、背景をセクション端まで */
  margin-inline: calc(-1 * var(--pad-inline));
  padding-inline: var(--pad-inline);
  padding-block: 6.5rem;
  border: 0;
  background: transparent;
  color: var(--green-white);
  counter-increment: feature;
}

.feature-copy h3 {
  font-size: var(--text-40);
  line-height: var(--leading-display);
  letter-spacing: 0.01em;
  margin: 0 0 1.25rem;
}

.feature-copy p:last-child {
  margin: 0;
  font-size: var(--text);
  line-height: 1.9;
  letter-spacing: 0.01em;
}

.feature-kicker {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 0.45rem;
  font-size: var(--text-14);
  letter-spacing: 0.08em;
  line-height: var(--leading-label);
  color: inherit;
  margin: 0 0 0.55rem;
  font-weight: 700;
  margin-block-end: 1.75rem;
}

.feature-copy .feature-kicker::before {
  content: counter(feature, decimal-leading-zero);
  font-size: var(--text-28);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1;
  color: inherit;
}

.ui-mock {
  margin-top: 3.15rem;
  margin-inline: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: 0.85rem;
  box-shadow: 4px 16px 40px rgb(3 144 45 / 24%);
}

.feature .ui-mock::before {
  transform: none;
}

.ui-assign,
.ui-set {
  position: relative;
  width: 80%;
  border-radius: 0.85rem;
  padding: 2.15rem 0.9rem 0.9rem;
  overflow: hidden;
}

.ui-assign::before,
.ui-set::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 1.35rem;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--line);
}

.ui-assign {
  background: var(--fg);
  border-color: var(--green-accent-dark);
}

.ui-assign::before,
.ui-set::before {
  border-bottom-color: rgb(255 255 255 / 14%);
  background-color: var(--fg);
  background-image:
    radial-gradient(circle at 0.72rem 50%, var(--system-red) 0.28rem, transparent 0.3rem),
    radial-gradient(circle at 1.52rem 50%, var(--system-yellow) 0.28rem, transparent 0.3rem),
    radial-gradient(circle at 2.32rem 50%, var(--system-green) 0.28rem, transparent 0.3rem);
  background-repeat: no-repeat;
}

.ui-alt {
  width: min(100%, 17.5rem);
  aspect-ratio: 9 / 13.2;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 1.75rem 1.75rem 0 0;

  color: var(--pine-ink);
  font-size: 0.68rem;
}

.alt-screen {
  height: 100%;
  padding: 1.5rem 1.7rem 0;
}

.assist-top .alt-user {
  display: grid;
  place-items: center;
  width: 1.55rem;
  height: 1.55rem;
  padding: 0;
  border-radius: 50%;
}

.alt-user svg {
  width: 0.85rem;
  height: 0.85rem;
}

.ui-alt .assist-pick {
  background: var(--surface);
  border-color: rgb(from var(--fg) r g b / 8%);
}

.ui-alt p {
  margin: 0;
  font-size: inherit;
  line-height: 1.45;
}

.alt-notice {
  position: relative;
  margin: 0.15rem 0 0.55rem;
  padding: 0.45rem 1.15rem 0.4rem 0.55rem;
  border-radius: 0.4rem;
  background: var(--mist);
}

.alt-notice strong {
  display: block;
  margin: 0 0 0.2rem;
  font-size: 0.68rem;
  line-height: 1.35;
}

.alt-close {
  position: absolute;
  top: 0.28rem;
  right: 0.4rem;
  color: var(--pine);
  font-size: 0.85rem;
  line-height: 1;
}

.alt-notice p {
  color: var(--pine-deep);
  font-size: 0.6rem;
}

.alt-slot {
  margin-top: 0.28rem;
}

.alt-change {
  display: block;
  margin-top: 0.2rem;
  color: var(--pine);
  font-size: 0.58rem;
  text-align: center;
}

.alt-cal {
  margin-inline: -0.7rem;
  background: var(--surface);
  border-radius: 0.7rem 0.7rem 0 0;
  box-shadow: 0 -1px 0 rgb(from var(--fg) r g b / 6%);
}

.alt-cal-nav {
  display: flex;
  justify-content: space-between;
  padding: 0.4rem 0.65rem 0.15rem;
  color: var(--fg-3);
  font-size: 0.55rem;
}

.alt-cal-grid {
  display: grid;
  grid-template-columns: 1.8rem repeat(7, 1fr);
  text-align: center;
  font-size: 0.5rem;
  line-height: 1.2;
}

.alt-cal-grid span {
  padding: 0.22rem 0;
  border-top: 1px solid rgb(from var(--fg) r g b / 8%);
  border-left: 1px solid rgb(from var(--fg) r g b / 8%);
}

.alt-cal-grid span:nth-child(8n + 1) {
  border-left: 0;
  color: var(--fg-3);
  font-size: 0.46rem;
}

.alt-cal-grid span:nth-child(8n + 3),
.alt-cal-grid span:nth-child(8n + 4),
.alt-cal-grid span:nth-child(8n + 6),
.alt-cal-grid span:nth-child(8n + 7) {
  background: rgb(from var(--system-green) r g b / 18%);
  color: var(--pine);
}

.ui-assist {
  position: relative;
  width: min(100%, 17.5rem);
  aspect-ratio: 9 / 13.2;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 1.75rem 1.75rem 0 0;
  background: #e7ebe4;
  color: var(--pine-ink);
  font-size: 0.68rem;
}

.ui-assist::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgb(88 96 90 / 34%);
  pointer-events: none;
}

.assist-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  padding: 1.5rem 1.7rem 0;
}

.assist-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.assist-top strong {
  font-size: 0.95rem;
  line-height: 1.2;
}

.assist-top span {
  padding: 0.28rem 0.55rem;
  border: 1px solid rgb(from var(--pine-ink) r g b / 35%);
  border-radius: 0.45rem;
  font-size: 0.62rem;
}

.assist-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.2rem;
  list-style: none;
  margin: 0.75rem 0 0.85rem;
  padding: 0;
  text-align: center;
  font-size: 0.52rem;
  line-height: 1.25;
  color: var(--fg-3);
}

.assist-steps li {
  position: relative;
}

.assist-steps i {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 0.95rem;
  height: 0.95rem;
  margin: 0 auto 0.28rem;
  border-radius: 50%;
  background: #cfd3ce;
  color: var(--surface);
  font-style: normal;
  font-size: 0.55rem;
  line-height: 1;
}

.assist-steps li:not(:last-child) i::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 100%;
  width: 2.4rem;
  height: 2px;
  background: #cfd3ce;
  transform: translateY(-50%);
}

.assist-steps .is-done i,
.assist-steps .is-now i {
  background: var(--pine);
}

.assist-steps .is-done i::after {
  background: var(--pine);
}

.assist-steps .is-now {
  color: var(--pine);
  font-weight: 700;
}

.ui-assist .assist-ask,
.ui-alt .assist-ask {
  margin: 0 0 0.4rem;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.4;
}

.assist-pick {
  margin: 0 0 0.7rem;
  padding: 0.5rem 0.65rem 0.45rem;
  border: 1px solid rgb(255 255 255 / 55%);
  border-radius: 0.55rem;
  background: rgb(255 255 255 / 62%);
}

.assist-pick strong {
  display: block;
  font-size: 0.78rem;
  line-height: 1.3;
}

.assist-pick span {
  color: var(--fg-3);
  font-size: 0.6rem;
}

.assist-cal {
  position: absolute;
  right: 0.75rem;
  bottom: 0.45rem;
  left: 0.75rem;
  display: grid;
  grid-template-columns: 1.6rem repeat(4, 1fr);
  align-items: center;
}

.assist-cal i {
  width: 0.72rem;
  height: 0.72rem;
  margin-inline: auto;
  border: 1.5px solid var(--pine);
  border-radius: 50%;
}

.assist-dialog {
  position: absolute;
  z-index: 2;
  right: 1rem;
  bottom: 1.7rem;
  left: 1rem;
  padding: 0.9rem 0.75rem 0.75rem;
  border-radius: 1.05rem;
  background: var(--surface);
  box-shadow: 0 12px 28px rgb(20 32 24 / 16%);
}

.ui-assign .assign-board {
  position: relative;
  display: grid;
  grid-template-columns: 1.4rem 1fr;
  grid-template-rows: repeat(3, 1.35rem);
  gap: 0.45rem 0.55rem;
  align-items: center;
  min-height: 5.2rem;
}

.ui-assign .lane-lab {
  font-size: 0.75rem;
  color: var(--system-gray);
  line-height: 1;
}

.ui-assign .lane-lab:nth-child(1) {
  grid-row: 1;
  grid-column: 1;
}

.ui-assign .lane-lab:nth-child(2) {
  grid-row: 2;
  grid-column: 1;
}

.ui-assign .lane-lab:nth-child(3) {
  grid-row: 3;
  grid-column: 1;
}

.ui-assign .bar {
  position: absolute;
  left: calc(1.4rem + 0.55rem);
  height: 0.75rem;
  border-radius: 2px;
  pointer-events: none;
}

.ui-assign .bar.exist {
  background: var(--band-deep);
}

.ui-assign .bar.ghost {
  background: rgb(from var(--system-green) r g b / 28%);
  box-shadow: inset 0 0 0 1px rgb(from var(--system-green) r g b / 55%);
}

.ui-assign .bar.swap-a {
  top: 0.3rem;
  width: 34%;
  left: calc(1.4rem + 0.55rem);
  animation: assign-swap-a 6.4s ease-in-out infinite;
}

.ui-assign .bar.swap-b {
  top: calc(1.35rem + 0.45rem + 0.3rem);
  width: 42%;
  left: calc(1.4rem + 0.55rem + 16%);
  animation: assign-swap-b 6.4s ease-in-out infinite;
}

.ui-assign .bar.swap-c {
  top: calc((1.35rem + 0.45rem) * 2 + 0.3rem);
  width: 32%;
  left: calc(1.4rem + 0.55rem + 40%);
  animation: assign-swap-c 6.4s ease-in-out infinite;
}

.ui-assist .mock-title {
  margin: 0 0 0.35rem;
  color: var(--pine-ink);
  font-family: var(--font);
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.35;
}

.assist-lead {
  margin: 0 0 0.7rem;
  color: #5f6d64;
  font-size: 0.68rem;
  line-height: 1.55;
}

.ui-assist .mock-btns {
  display: flex;
  gap: 0.45rem;
  margin: 0 0 0.45rem;
}

.ui-assist .mock-btns b {
  flex: 1;
  padding: 0.62rem 0.2rem;
  border-radius: 0.65rem;
  background: var(--green-accent-dark);
  color: var(--surface);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}

.ui-assist .mock-keep {
  display: block;
  padding: 0.55rem 0.3rem;
  border: 1px solid #e3e3e3;
  border-radius: 0.65rem;
  color: #7b8680;
  font-size: 0.64rem;
  line-height: 1.3;
  text-align: center;
}

.ui-set .set-board {
  display: grid;
  grid-template-columns: 1.4rem 1fr;
  gap: 0.45rem 0.55rem;
  align-items: center;
}

.ui-set .set-board span {
  font-size: 0.75rem;
  color: var(--muted);
}

.ui-set .seg {
  display: block;
  height: 1.35rem;
  padding: 0.2rem 0.5rem;
  color: var(--white);
  font-size: 0.75rem;
  font-style: normal;
  line-height: 1.35rem;
  white-space: nowrap;
  border-radius: 2px;
}

.ui-set .s1 {
  background: #2f5d8c;
  width: 62%;
}

.ui-set .s2 {
  background: var(--green-accent-dark);
  width: 32%;
  margin-left: 62%;
}

@media (min-width: 768px) {
  #features>.shell {
    --content: min(var(--content-max), calc(100vw - 2rem - (100vw - 768px) * 0.5));
    --pad-inline: max(var(--pad-min), calc((100vw - var(--content)) / 2));
    position: relative;

  }

  .feature {
    display: grid;
    /* 1・3件目: テキスト | モック */
    grid-template-columns: minmax(0, 485px) 20.8rem;
    grid-template-areas: "copy visual";
    column-gap: clamp(2rem, 1rem + 4vw, 5rem);
    align-items: center;
    justify-content: start;
    padding-block: 12.5rem;
  }

  /* 2・4件目: モック | テキスト（対になるよう右寄せ） */
  .feature:nth-child(even) {
    grid-template-columns: 20.8rem minmax(0, 485px);
    grid-template-areas: "visual copy";
    justify-content: end;
  }

  .feature-copy {
    grid-area: copy;
  }

  .feature-visual {
    grid-area: visual;
    position: relative;
    width: 20.8rem;
    align-self: stretch;
  }

  .feature-copy h3 {
    margin-bottom: 1.5rem;
  }

  .feature .ui-mock {
    position: absolute;
    left: 50%;
    top: 50%;
    margin: 0;
    transform: translate(-50%, -50%) translateY(calc(var(--parallax-y, 0px) * -1));
  }

  .feature .ui-assist,
  .feature .ui-alt {
    width: 17.5rem;
  }

  .feature .ui-assign,
  .feature .ui-set {
    width: 20.8rem;
  }
}

/* ========== 13. More / Rules ========== */

.rules {
  position: relative;
  display: grid;
  gap: 3rem;
  margin-inline: calc(-1 * var(--pad-inline));
  padding-inline: var(--pad-inline);
  padding-block: 3.5rem;
  color: var(--green-white);
}

.rules-title {
  margin: 0 0 2rem;
  font-size: var(--text-24);
  font-weight: 700;
  line-height: var(--leading-display);
  letter-spacing: 0.01em;
  color: inherit;
}

.rules-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.5rem;
}

.rules-list li {
  background: rgb(from var(--green-white) r g b / 10%);
  border: 1px solid rgb(from var(--green-white) r g b / 16%);
  backdrop-filter: blur(12px) saturate(220%);
  -webkit-backdrop-filter: blur(12px) saturate(220%);
  border-radius: 1.25rem;
  padding: 1.25rem 1.2rem;
  box-shadow: inset 2px 2px 6px -1px rgb(from var(--mist) r g b / 20%), 6px 7px 35px rgb(from var(--mist) r g b / 20%);
}

.rules-label {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 1rem;
  margin: 0 0 0.75rem;
  font-size: var(--text);
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: var(--leading-label);
  color: inherit;
}

.rules-num {
  font-size: var(--text-28);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1;
}

.rules-body {
  margin: 0;
  font-size: var(--text-16);
  line-height: 1.9;
  letter-spacing: 0.01em;
  color: inherit;
}

@media (min-width: 768px) {
  .rules {
    padding-block-start: 10rem;
  }

  .rules-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: clamp(1%, 1rem + 4vw, 5rem);
    row-gap: 2.5rem;
  }
}

/* ========== 14. Mid CTA band ========== */

.cta-band {
  padding: 3.5rem 0;
  background: linear-gradient(120deg, var(--pine-ink), var(--pine));
  color: var(--green-white);
}

.cta-band-inner {
  display: grid;
  gap: 0.75rem;
  justify-items: start;
}

.cta-band .btn {
  background: var(--green-white);
  color: var(--pine);
}

.cta-band .btn:hover {
  background: var(--mist);
  color: var(--pine-mid);
}

/* ========== 15. Compare ========== */

.compare th[scope="row"] {
  white-space: nowrap;
  font-weight: 700;
  background: none;
}

.compare thead {
  background: rgb(from var(--pine-ink) r g b / 14%);
}

.compare thead th:last-child,
.compare td:last-child {
  background: var(--green-accent-light);
  font-weight: 500;
}

.compare thead th:last-child {
  font-weight: 700;
}

/* compare 表のみガラス（セクション自体は現行のまま） */

#compare .wrap.glass--green {
  background: rgb(from var(--pine) r g b / 64%);
  border: 1px solid rgb(from var(--system-mint) r g b / 64%);
  border-radius: 1.25rem;
  color: var(--green-white);
  box-shadow:
    inset 0 1px 0 rgb(from var(--system-mint) r g b / 20%),
    0 12px 40px rgb(from var(--pine-ink) r g b / 22%);
  backdrop-filter: blur(12px) saturate(155%);
  -webkit-backdrop-filter: blur(12px) saturate(155%);
}

#compare .compare thead {
  background: rgb(from var(--green-white) r g b / 10%);
  color: var(--green-white);
}

#compare .compare th,
#compare .compare td {
  border-bottom-color: rgb(from var(--green-white) r g b / 14%);
}

#compare .compare th[scope="row"] {
  color: var(--green-white);
}

#compare .compare thead th:last-child,
#compare .compare td:last-child {
  background: rgb(from var(--green-accent-light) r g b / 28%);
  color: var(--green-white);
}

#compare .compare thead th:last-child {
  font-weight: 700;
}

/* ========== 16. Onboarding ========== */

.steps {
  /* --grad-cool と同じ端点・色相補間を、番号＋縦線の一本軸に縦方向で共有 */
  --steps-num-size: 2.5rem;
  --grad-cool-spine: linear-gradient(180deg in oklch shorter hue,
      var(--system-pink) 0%,
      var(--system-blue) 100%);
  --steps-spine-top: 0px;
  --steps-spine-h: 0px;
  --steps-line-top: 0px;
  --steps-line-h: 0px;
  --steps-progress-h: 0px;
  position: relative;
  list-style: none;
  padding: 0;
  margin: 5rem 0 0;
  max-width: none;
}

/* 未到達の縦軸 */

.steps::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: var(--steps-line-top);
  left: calc(var(--steps-num-size) / 2);
  width: 2px;
  height: var(--steps-line-h);
  transform: translateX(-50%);
  background: rgb(from var(--green-white) r g b / 22%);
  pointer-events: none;
}

/* 通過分：全体グラデのスライスを上から見せる */

.steps::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: var(--steps-line-top);
  left: calc(var(--steps-num-size) / 2);
  width: 2px;
  height: var(--steps-progress-h);
  transform: translateX(-50%);
  background-image: var(--grad-cool-spine);
  background-size: 100% var(--steps-spine-h);
  background-position: 0 calc(-1 * (var(--steps-line-top) - var(--steps-spine-top)));
  background-repeat: no-repeat;
  pointer-events: none;
}

.steps li {
  position: relative;
  display: grid;
  grid-template-columns: var(--steps-num-size) minmax(0, 1fr);
  column-gap: 1rem;
  align-items: start;
  padding: 0 0 2.25rem;
  margin-block-end: 3rem;
  color: var(--green-white);
  background: transparent;
  border: 0;
}

.steps li:last-child {
  padding-bottom: 0;
}

.steps-num {
  --num-y: 0px;
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: var(--steps-num-size);
  height: var(--steps-num-size);
  border-radius: 50%;
  border: 1px solid rgb(from var(--green-white) r g b / 28%);
  background: rgb(from var(--pine-ink) r g b / 55%);
  color: var(--green-white);
  font-size: var(--text-16);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  transition: border-color 0.45s ease, color 0.45s ease;
}

/* 番号も同じ spine グラデを位置で切り出す */

.steps li.is-active .steps-num {
  border-color: transparent;
  background-color: transparent;
  background-image: var(--grad-cool-spine);
  background-size: 100% var(--steps-spine-h);
  background-position: center calc(-1 * var(--num-y));
  background-repeat: no-repeat;
  color: var(--green-white);
}

.steps-body {
  --steps-body-pad-top: 1.15rem;
  display: grid;
  gap: 0.45rem;
  min-width: 0;
  max-width: 28rem;
  /* 番号上端と strong 上端を揃える */
  margin-top: calc(-1 * var(--steps-body-pad-top));
  padding: var(--steps-body-pad-top) 1.25rem 1.25rem;
  border-radius: 1.25rem;
  text-align: left;
  background: rgb(from var(--green-white) r g b / 15%);
  border: 1px solid rgb(from var(--green-white) r g b / 20%);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border-radius: 1.25rem;
  padding: 1.25rem 1.2rem;
  box-shadow: inset 2px 2px 6px -1px rgb(from var(--mist) r g b / 20%), 6px 7px 35px rgb(from var(--mist) r g b / 20%);
}

.steps-body strong {
  font-family: var(--font);
  font-size: var(--text-28);
  font-weight: 700;
  line-height: var(--leading-title);
  letter-spacing: 0.01em;
  margin: 0;
}

.steps-body span {
  color: rgb(from var(--green-white) r g b / 72%);
  font-size: var(--text);
  line-height: var(--leading);
  letter-spacing: 0.01em;
}

@media (min-width: 768px) {

  .steps::before,
  .steps::after {
    left: 50%;
  }

  .steps li {
    grid-template-columns: minmax(0, 1fr) var(--steps-num-size) minmax(0, 1fr);
    column-gap: clamp(1.25rem, 2vw, 2.5rem);
    padding-bottom: 3.25rem;
  }

  .steps-num {
    grid-column: 2;
    grid-row: 1;
  }

  .steps-body {
    --steps-body-pad-top: 1.35rem;
    padding: var(--steps-body-pad-top) 1.5rem 1.5rem;
    border-radius: 1.5rem;
  }

  /* 左右交互配置。本文は常に左寄せ */
  .steps li:nth-child(odd) .steps-body {
    grid-column: 1;
    grid-row: 1;
    justify-self: end;
  }

  .steps li:nth-child(even) .steps-body {
    grid-column: 3;
    grid-row: 1;
    justify-self: start;
  }
}

/* ========== 17. Domain ========== */

.domain-block {
  display: grid;
  gap: 2rem;
  align-items: start;
}

.domain-copy {
  min-width: 0;
  max-width: var(--measure);
}

.domain-copy .small {
  margin-top: 1rem;
}

#domain .wrap.glass--green,
#pricing .wrap.glass--green {
  margin: 0;
  background: rgb(from var(--green-white) r g b / 3%);
  border: 1px solid rgb(from var(--system-mint) r g b / 64%);
  border-radius: 1.25rem;
  color: var(--green-white);
  box-shadow:
    inset 1px 1px 5px rgb(from var(--system-mint) r g b / 20%),
    0 0 40px rgb(from var(--green-accent-light) r g b / 22%);
  backdrop-filter: blur(12px) saturate(220%);
  -webkit-backdrop-filter: blur(12px) saturate(220%);
}

#domain .wrap.glass--green thead,
#pricing .wrap.glass--green thead {
  background: rgb(from var(--green-white) r g b / 10%);
}

#domain .wrap.glass--green th,
#domain .wrap.glass--green td,
#pricing .wrap.glass--green th,
#pricing .wrap.glass--green td {
  border-bottom-color: rgb(from var(--green-white) r g b / 14%);
  color: var(--green-white);
}

#domain .wrap.glass--green tbody tr:last-child th,
#domain .wrap.glass--green tbody tr:last-child td,
#pricing .wrap.glass--green tbody tr:last-child th,
#pricing .wrap.glass--green tbody tr:last-child td {
  border-bottom: 0;
}

@media (min-width: 768px) {
  .domain-block {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    column-gap: clamp(2rem, 1rem + 4vw, 5rem);
    align-items: center;
  }

  .domain-copy {
    max-width: none;
  }
}

/* ========== 18. Problems ========== */

#problems .problem-list {
  margin-top: 0;
}

.problem-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid rgb(from var(--green-white) r g b / 16%);
}

.problem-list li {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: 0.85rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid rgb(from var(--green-white) r g b / 16%);
}

.problem-list span {
  font-family: var(--font);
  color: var(--green-accent-light);
  font-size: var(--text-14);
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: var(--leading-label);
  padding-top: 0.25rem;
}

.problem-list p {
  margin: 0;
  font-size: var(--text);
  line-height: var(--leading);
  letter-spacing: 0.01em;
  color: var(--green-white);
}

/* ========== 19. Audience ========== */

.audience-panel {
  max-width: 40rem;
  margin-top: 1.5rem;
  padding: 1.5rem 1.35rem 1.5rem;
  border-radius: 1.25rem;
  color: var(--green-white);
}

.audience-panel .small {
  margin: 1rem 0 0;
}

/* ========== 20. FAQ ========== */

.faq details {
  border-bottom: 1px solid rgb(from var(--green-white) r g b / 16%);
  padding: 1rem 0;
}

.faq summary {
  cursor: pointer;
  font-size: var(--text);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: var(--leading-title);
  list-style: none;
  color: var(--green-white);
}

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

.faq summary::after {
  content: "+";
  float: right;
  color: var(--green-accent-light);
}

.faq details[open] summary::after {
  content: "−";
}

.faq details p {
  margin: 0.85rem 0 0.2rem;
  font-size: var(--text);
  color: rgb(from var(--green-white) r g b / 72%);
  line-height: var(--leading);
  letter-spacing: 0.01em;
}

/* ========== 21. Pricing ========== */

#pricing .wrap.glass--green>p {
  color: rgb(from var(--green-white) r g b / 82%);
}

#pricing .wrap.glass--green .price-table {
  background: rgb(from var(--green-white) r g b / 12%);
  border-color: rgb(from var(--green-white) r g b / 20%);
}

.wrap:has(.price-table) {
  display: table;
  width: auto;
  max-width: 100%;
  padding: 1rem 0.9rem;
  overflow: visible;
}

.wrap:has(.price-table)>p {
  margin: 0 0 0.85rem;
  white-space: normal;
}

.wrap:has(.price-table) .price-table {
  width: 100%;
  border: 1px solid var(--line);
}

.price-table {
  width: auto;
}

.price-table th,
.price-table td {
  white-space: nowrap;
}


/* ========== 22. Closing (#contact) ========== */

.closing-media {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.closing {
  position: relative;
  min-height: 520px;
  display: grid;
  align-items: center;
  overflow: hidden;
  color: var(--green-white);
}

.closing-media {
  position: absolute;
  inset: 0;
}

.closing-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg,
      rgb(from var(--pine-ink) r g b / 88%),
      rgb(from var(--pine) r g b / 55%));
}

.closing-copy {
  position: relative;
  z-index: 1;
  padding-block: 4.5rem;
  max-width: 40rem;
}

/* ========== 23. Footer ========== */

main,
.site-footer {
  position: relative;
  z-index: 2;
}

/* SP（既定）: brand中央・強調太字 / NAV | 規約の2列 / コピー中央 / 固定CTA分余白 */
.site-footer {
  padding: 3rem 0 calc(3rem + 5.5rem);
  border-top: 1px solid rgb(from var(--green-white) r g b / 14%);
  background: rgb(from var(--pine) r g b / 20%);
  color: var(--green-white);
}

.footer-top,
.footer-bottom {
  display: contents;
}

.footer-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 1.25rem;
  row-gap: 1.75rem;
  grid-template-areas:
    "brand brand"
    "nav legal"
    "copy copy";
}

.footer-brand {
  grid-area: brand;
  justify-self: center;
  text-align: center;
  color: var(--green-white);
  text-decoration: none;
  font-weight: 700;
  font-size: var(--text-24);
  letter-spacing: 0.06em;
}

.footer-nav,
.footer-legal {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 0.85rem;
  font-size: var(--text-14);
}

.footer-nav {
  grid-area: nav;
  font-weight: 700;
}

.footer-legal {
  grid-area: legal;
}

.footer-nav a,
.footer-legal a {
  color: rgb(from var(--green-white) r g b / 78%);
  text-decoration: none;
}

.footer-nav a:hover,
.footer-legal a:hover {
  color: var(--green-white);
}

.footer-copy {
  grid-area: copy;
  justify-self: center;
  text-align: center;
  margin: 0;
  color: rgb(from var(--green-white) r g b / 55%);
  font-size: var(--text-14);
}

.footer-copy small {
  font-size: inherit;
}

/* PCのみ切替: 上段 brand | NAV / 下段 規約類 | コピーライト */
@media (min-width: 768px) {
  .site-footer {
    padding-bottom: 3.5rem;
  }

  .footer-top,
  .footer-bottom {
    display: grid;
    gap: 1.25rem;
  }

  .footer-inner {
    grid-template-columns: none;
    grid-template-areas: none;
    gap: 2rem;
  }

  .footer-brand {
    grid-area: auto;
    justify-self: start;
    text-align: left;
    font-weight: 700;
    font-size: inherit;
    letter-spacing: 0.04em;
  }

  .footer-top {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: 2rem;
  }

  .footer-nav {
    grid-area: auto;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.75rem 1.25rem;
  }

  .footer-legal {
    grid-area: auto;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
  }

  .footer-bottom {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 1.5rem;
  }

  .footer-copy {
    grid-area: auto;
    justify-self: end;
    text-align: right;
  }
}

/* ========== 24. Demo modal ========== */

.demo-modal {
  /* top layer の fixed 配置を維持（relative にすると文書内位置へスクロールする） */
  position: fixed;
  inset: 0;
  width: min(95dvw, calc(100% - 2rem));
  max-height: min(92dvh, calc(100% - 2rem));
  margin: auto;
  padding: 5%;
  overflow: auto;
  border-radius: 1.25rem;
  color: var(--green-white);
  backdrop-filter: blur(32px) saturate(95%);
  -webkit-backdrop-filter: blur(32px) saturate(95%);
}

.demo-modal::backdrop {
  background-color: #050508;
  background-image: url("./assets/demo-modal-backdrop.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.demo-modal h2 {
  margin: 0 2.2rem 1.5rem 0;
  font-size: var(--text-28);
  line-height: var(--leading-title);
  letter-spacing: 0.01em;
}

.demo-modal section+section {
  margin-top: 1.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgb(from var(--green-white) r g b / 16%);
}

.demo-panel-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
}

.demo-panel-media {
  display: none;
  margin: 0;
}

.demo-panel-media img {
  width: 100%;
  height: auto;
  display: block;
}

.demo-modal h3 {
  margin: 0;
  font-size: var(--text-24);
  line-height: var(--leading-title);
  letter-spacing: 0.01em;
}

.demo-modal p,
.demo-modal li {
  color: rgb(from var(--green-white) r g b / 82%);
  font-size: var(--text-16);
  line-height: 1.7;
  letter-spacing: 0.01em;
}

.demo-modal p {
  margin: 0;
}

.demo-notes h3 {
  margin-bottom: 0.85rem;
}

.demo-notes p {
  margin-bottom: 1rem;
}

.demo-modal a:not(.btn) {
  color: var(--system-mint);
  font-weight: 500;
}

.demo-admin-login {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.85rem;
  width: 100%;
  margin-top: 0.35rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgb(from var(--green-white) r g b / 16%);
}

.demo-modal ul {
  margin: 0;
  padding-left: 1.2rem;
}

.demo-modal li+li {
  margin-top: 0.65rem;
}

@media (min-width: 768px) {
  .demo-modal {
    width: min(92dvw, 56rem);
    padding: 2.5rem 2.75rem 2.75rem;
  }

  .demo-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(7.5rem, 0.42fr);
    column-gap: 2rem;
    align-items: center;
  }

  .demo-panel-media {
    display: block;
  }

  .demo-panel-user .demo-panel-media {
    max-width: 8.5rem;
    justify-self: end;
  }

  .demo-panel-admin .demo-panel-media {
    max-width: 100%;
    justify-self: stretch;
  }

  .demo-panel-copy {
    gap: 1.5rem;
  }

  .demo-modal section+section {
    margin-top: 2rem;
    padding-top: 2rem;
  }
}

body.is-demo-open {
  overflow: hidden;
  /* iOS 等で showModal 時に先頭へ飛ぶのを防ぐ */
  position: fixed;
  inset-inline: 0;
  width: 100%;
}

.demo-close {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--green-white);
  cursor: pointer;
}

.demo-close::before,
.demo-close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1rem;
  height: 2px;
  background: currentColor;
}

.demo-close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.demo-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

@media (max-width: 767px) {
  .demo-modal::backdrop {
    top: 50%;
    left: 50%;
    width: 100dvh;
    height: 100dvw;
    transform: translate(-50%, -50%) rotate(-90deg);
  }
}

/* ========== 25. Motion / a11y ========== */

@keyframes hero-lead-accent-fade {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes hero-comment-play {
  0% {
    opacity: 0;
    transform: translateY(var(--comment-from));
  }

  5%,
  39% {
    opacity: 1;
    transform: translateY(0);
  }

  44%,
  100% {
    opacity: 0;
    transform: translateY(var(--comment-from));
  }
}

@keyframes hero-drift {
  from {
    transform: scale(1.04) translate3d(0, 0, 0);
  }

  to {
    transform: scale(1.08) translate3d(-1.5%, -1%, 0);
  }
}

@keyframes assign-swap-a {

  0%,
  16% {
    transform: translateY(0);
  }

  30%,
  46% {
    transform: translateY(calc(1.35rem + 0.45rem));
  }

  60%,
  100% {
    transform: translateY(0);
  }
}

@keyframes assign-swap-b {

  0%,
  16% {
    transform: translateY(0);
  }

  30%,
  46% {
    transform: translateY(calc(-1.35rem - 0.45rem));
  }

  60%,
  70% {
    transform: translateY(0);
  }

  84%,
  94% {
    transform: translateY(calc(1.35rem + 0.45rem));
  }

  100% {
    transform: translateY(0);
  }
}

@keyframes assign-swap-c {

  0%,
  70% {
    transform: translateY(0);
  }

  84%,
  94% {
    transform: translateY(calc(-1.35rem - 0.45rem));
  }

  100% {
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {

  .steps::after,
  .steps-num {
    transition: none;
  }

  html {
    scroll-behavior: auto;
  }

  .ui-assign .bar.swap-a,
  .ui-assign .bar.swap-b,
  .ui-assign .bar.swap-c,
  .rise,
  .hero-comment {
    animation: none !important;
    transition: none !important;
    opacity: 1;
    transform: none;
  }

  .hero-lead-accent-from {
    animation: none;
    opacity: 0;
  }

  .site-header {
    transition: none;
  }
}