@charset "UTF-8";



:root {
  --color-accent: var(--c-cta);
  --color-line:   var(--c-text);
  --color-text:   var(--c-text);

  --fs-catch:     clamp(26px, 3.6vw, 44px);
  --fs-statement: clamp(22px, 2.8vw, 31px);

  --chapter-y: clamp(88px, 12vw, 168px);
}

.fv { padding: 0; }


.container--narrow { max-width: 880px; }

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

.sec {
  position: relative;
  padding-block: var(--chapter-y);
  overflow: hidden;
}
.sec > .container { position: relative; z-index: 2; }

.sec--plain   { background: var(--c-bg); }
.sec--alt     { background: var(--c-surface); }
.sec--works   { background: var(--c-surface-alt); }
.sec--voice   { background: var(--c-surface); }
.sec--faq     { background: var(--c-surface); }
.sec--primary,
.sec--cta     { background: var(--c-primary); }

.wave, .notch, .diag {
  position: absolute;
  left: 0; right: 0;
  width: 100%;
  display: block;
  z-index: 1;
  pointer-events: none;
}
.wave  { height: clamp(58px, 8vw, 116px); }
.notch { height: clamp(52px, 6.6vw, 96px); }
.diag  { height: clamp(48px, 6vw, 86px); }

.wave--fv     { bottom: -1px; }
.wave--fv path{ fill: var(--c-bg); }

.wave--out     { bottom: -1px; }
.wave--out path{ fill: var(--c-bg); }
.sec--works .wave--out path { fill: var(--c-surface); }

.wave--in      { top: -1px; }
.wave--in path { fill: var(--c-bg); }

.notch--top      { top: -1px; }
.notch--top path { fill: var(--c-bg); }
.wave--to-white path { fill: var(--c-surface); }

.notch--v      { top: -1px; }
.notch--v path { fill: var(--c-bg); }

.diag--top       { top: -1px; }
.diag--top path  { fill: var(--c-bg); }
.diag--bottom    { bottom: -1px; }
.diag--bottom path { fill: var(--c-bg); }

.deco {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.dot {
  position: absolute;
  left: var(--x); top: var(--y);
  width: var(--d); height: var(--d);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.dot--a { background: var(--c-primary); }
.dot--b { background: var(--c-primary-soft); }
.dot--c { background: rgba(198, 137, 251, .30); }
.dot--d { background: rgba(255, 255, 255, .32); }
.dot--e { background: rgba(162, 62, 249, .22); }

.poly        { position: absolute; stroke: var(--c-text); opacity: .8; }
.poly circle { fill: var(--c-text); }
.poly--fv-r  { top: 4%;    right: 0; width: clamp(140px, 18vw, 320px); }
.poly--fv-l  { bottom: 6%; left: 0;  width: clamp(130px, 16vw, 300px); }
.poly--rl    { top: 30%;   left: 0;  width: clamp(120px, 15vw, 280px); }

.selbox        { position: absolute; stroke: var(--c-text); opacity: .55; }
.selbox circle { fill: var(--c-text); }
.selbox--fv    { top: 4%;  left: 56%; width: clamp(80px, 9.8vw, 148px); transform: rotate(-9deg); }
.selbox--cta   { bottom: 22%; left: 8%; width: clamp(80px, 10vw, 150px); transform: rotate(7deg); }

.arw          { position: absolute; z-index: 1; pointer-events: none; }
.arw__s       { stroke: var(--c-cta); }
.arw__h       { fill: var(--c-cta); }

.mk {
  position: relative;
  z-index: 0;
  display: inline-block;
  padding-inline: .3em;
  white-space: nowrap;
}
.mk__e {
  position: absolute;
  left: -2%; top: -18%;
  width: 104%; height: 136%;
  z-index: -1;
  stroke: var(--c-mark);
  transform: rotate(-1.6deg);
}
.mk--2 .mk__e { stroke: var(--c-mark); transform: rotate(1.4deg); }

.cap { margin: 0; }
.cap .m-corner {
  --m-corner-dot: var(--c-text);
  font-size: clamp(14px, 1.5vw, 17px);
  font-weight: 500;
  letter-spacing: .18em;
  padding: 14px 32px;
  border-color: var(--c-text);
  color: var(--c-text);
}
.cap--left   { text-align: left; }
.cap--center { text-align: center; }

.burst {
  --burst-shape: polygon(
    50.0% 0.0%, 58.0% 9.8%, 69.1% 3.8%, 72.8% 15.9%, 85.4% 14.6%, 84.1% 27.2%,
    96.2% 30.9%, 90.2% 42.0%, 100.0% 50.0%, 90.2% 58.0%, 96.2% 69.1%, 84.1% 72.8%,
    85.4% 85.4%, 72.8% 84.1%, 69.1% 96.2%, 58.0% 90.2%, 50.0% 100.0%, 42.0% 90.2%,
    30.9% 96.2%, 27.2% 84.1%, 14.6% 85.4%, 15.9% 72.8%, 3.8% 69.1%, 9.8% 58.0%,
    0.0% 50.0%, 9.8% 42.0%, 3.8% 30.9%, 15.9% 27.2%, 14.6% 14.6%, 27.2% 15.9%,
    30.9% 3.8%, 42.0% 9.8%
  );
  position: relative;
  margin: 0;
  padding: 7px;
  background: var(--c-cta);
  transform: rotate(-2.5deg);
  clip-path: var(--burst-shape);
}
.burst__in {
  display: block;
  padding: 38px 42px;
  background: var(--c-text);
  color: var(--c-text-inv);
  font-family: var(--font-round);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.75;
  letter-spacing: .02em;
  text-align: center;
  clip-path: var(--burst-shape);
}
.burst-set {
  display: flex;
  align-items: flex-end;
  gap: 4px;
}
.burst-set .illust--inline { width: clamp(84px, 9vw, 124px); height: auto; }

.cap-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  flex-wrap: wrap;
  margin-bottom: var(--sp-6);
}

.btn-rect {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: 56px;
  padding: 16px 56px 16px 32px;
  border: 0;
  border-radius: 0;
  background: var(--c-text);
  color: var(--c-text-inv);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .06em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .25s ease, box-shadow .25s ease, color .25s ease;
}
.btn-rect__arrow {
  position: absolute;
  right: 24px;
  transition: transform .25s ease;
}
.btn-rect:hover               { background: var(--c-btn); color: var(--c-text-inv); }
.btn-rect:hover .btn-rect__arrow { transform: translateX(5px); }
.btn-rect:focus-visible       { outline: 3px solid var(--c-text); outline-offset: 3px; }

.btn-rect--cta {
  background: var(--c-btn);
  color: var(--c-text-inv);
  box-shadow: var(--shadow-btn);
}
.btn-rect--cta:hover  { background: var(--c-btn-dark); color: var(--c-text-inv); }
.btn-rect--cta:focus-visible { outline-color: var(--c-text); }

.btn-rect--sm { min-height: 48px; padding: 12px 46px 12px 22px; font-size: 13.5px; }
.btn-rect--sm .btn-rect__arrow { right: 18px; }
.btn-rect--lg { min-height: 68px; padding: 20px 70px 20px 40px; font-size: 17px; }
.btn-rect--lg .btn-rect__arrow { right: 30px; }

.h2 {
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .02em;
  font-feature-settings: "palt" 1;
  margin-bottom: var(--sp-5);
}
.h2--mt     { margin-top: var(--sp-5); }
.h2--center { text-align: center; }

.eyebrow--on-primary::after { background: var(--c-text); }
.lead--on-primary { color: var(--c-text); }
.lead--center     { text-align: center; }

.body-block {
  line-height: 1.9;
  letter-spacing: .05em;
  margin-bottom: var(--sp-4);
}
.body-block--last { margin-bottom: 0; }

.todo {
  background: var(--c-accent2);
  color: var(--c-text);
  padding: 1px 5px;
  font-weight: 700;
}

.illust { height: auto; }


.fv__band {
  --pad-l: max(0px, (100% - var(--container)) / 2);
  position: relative;
  background: var(--c-bg);
  padding-top: calc(72px + var(--sp-7));
  padding-bottom: clamp(150px, 21vw, 300px);
  overflow: hidden;
}
.fv__band-inner {
  position: relative;
  z-index: 2;
  min-height: clamp(300px, 34vw, 460px);
}

.fv__right {
  position: absolute;
  top: 0; right: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: clamp(18px, 2.4vw, 30px);
  max-width: min(780px, 70%);
}

.catchbox {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  margin: 0;
  font-size: var(--fs-catch);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .02em;
  font-feature-settings: "palt" 1;
}
.catchbox__l:nth-child(1) { transform: rotate(-0.6deg); }
.catchbox__l:nth-child(2) { transform: rotate(0.5deg);  }
.catchbox__l:nth-child(3) { transform: rotate(-0.35deg); }

.catchbox__l {
  display: inline-block;
  padding: 8px 22px;
  border: 1px solid var(--c-text);
  background: var(--c-surface);
  color: var(--c-text);
}


.fv__floor {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: url("../img/fv-uroko.svg") center / 100% 100% no-repeat;
}

.fv__right { gap: clamp(26px, 3.2vw, 48px); }

.fv__lead {
  margin: 0;
  align-self: stretch;
  font-size: clamp(17px, 1.8vw, 21px);
  font-weight: 500;
  line-height: 1.9;
  letter-spacing: .01em;
  color: var(--c-text);
  text-align: right;
}


.illust--giant {
  --giant-crop: .58;
  --giant-w: min(65vw, 824px);

  width: var(--giant-w);
  left: calc(var(--pad-l) - var(--giant-w) * var(--giant-crop));
  top: 44px;
  z-index: 3;
}


.role-throw { top: 4%;  left: 43%; width: clamp(72px, 8.6vw, 130px); }

.role-climb { top: 7%;  left: auto; right: calc(min(18vw, 320px) * 0.34); width: clamp(38px, 4.4vw, 64px); }

.role-read  { top: 70%; left: calc(var(--pad-l) + 522px); width: clamp(76px, 9vw, 132px); }

.role-scroll{ top: 78%; left: 10%; width: clamp(62px, 7.2vw, 108px); }

.role-peek  { top: 84%; left: 29%; width: clamp(62px, 7vw, 104px); }

.role-point { top: 77%; left: 83%; width: clamp(58px, 6.6vw, 96px); }

.fv__body {
  position: relative;
  background: var(--c-bg);
  padding-block: clamp(40px, 6vw, 84px) clamp(96px, 13vw, 168px);
  overflow: hidden;
}
.fv__body-inner {
  position: relative;
  z-index: 2;
  padding-left: clamp(0px, 8vw, 110px);
}
.statement {
  font-size: var(--fs-statement);
  font-weight: 700;
  line-height: 1.75;
  letter-spacing: .03em;
  font-feature-settings: "palt" 1;
  margin-bottom: var(--sp-5);
}
.fv__note {
  font-size: var(--fs-lead);
  font-weight: 500;
  line-height: 1.9;
  letter-spacing: .01em;
  color: var(--c-text);
  margin-bottom: var(--sp-6);
}
.fv__cta-note { margin-top: var(--sp-3); }

.arw--fv-a { top: -54px; left: 8px; width: clamp(62px, 6.6vw, 96px); transform: rotate(6deg); }
.fv__cta   { position: relative; }
.arw--fv-b { top: -14px; left: 292px; width: clamp(62px, 6.6vw, 96px); transform: rotate(-6deg); }

.illust--fv5  { top: 2%;    left: 1%;   width: clamp(78px, 9vw,   132px); }
.illust--fv6  { bottom: 6%; left: 16%;  width: clamp(72px, 8.2vw, 120px); }
.illust--fv7  { top: 23%;   right: 18%; width: clamp(150px, 19vw, 300px); }
.illust--fv8  { bottom: 4%; right: 3%;  width: clamp(66px, 7.4vw, 108px); }
.illust--fv9  { top: 3%;    right: 5%;  width: clamp(64px, 7.2vw, 104px); }
.illust--fv10 { bottom: 30%; left: 2%;  width: clamp(58px, 6.4vw,  92px); }


.illust--rl1 { top: 6%; right: 4%; width: clamp(90px, 10vw, 150px); }

.cases {
  list-style: none;
  margin: var(--sp-7) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2.4vw, 30px);
}
.case {
  position: relative;
  background: var(--c-surface);
  border-radius: var(--radius-lg);
  padding: var(--sp-6) var(--sp-5) var(--sp-5);
  text-align: center;
  box-shadow: var(--shadow-2);
}
.cases.is-in > .case:nth-child(1) { transform: rotate(-0.7deg); }
.cases.is-in > .case:nth-child(2) { transform: rotate(0.5deg); }
.cases.is-in > .case:nth-child(3) { transform: rotate(-0.4deg); }

.case__num {
  font-size: clamp(34px, 4vw, 52px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: .04em;
  color: var(--c-primary-soft);
  margin-bottom: 6px;
}
.case__curl {
  display: block;
  width: 26px; height: 10px;
  margin: 0 auto var(--sp-4);
  border-bottom: 2px solid var(--c-primary);
  border-right: 2px solid var(--c-primary);
  border-bottom-right-radius: 12px;
  transform: rotate(-14deg);
}
.case__disc { display: none; }
.case__ill {
  position: relative;
  display: block;
  box-sizing: border-box;
  width:  clamp(110px, 12vw, 150px);
  height: clamp(110px, 12vw, 150px);
  object-fit: contain;
  background: var(--c-surface-alt);
  border-radius: 50%;
  margin: 0 auto var(--sp-4);
}
.case:nth-child(1) .case__ill { padding: 9px; }
.case:nth-child(2) .case__ill { padding: 2px; }
.case__flag {
  display: inline-block;
  margin-bottom: var(--sp-2);
  padding: 3px 14px;
  background: var(--c-mark);
  color: var(--c-text-inv);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
}
.case__flag--ghost { visibility: hidden; }
.case__h {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .02em;
  font-feature-settings: "palt" 1;
  margin-bottom: var(--sp-3);
}
.case__b {
  font-size: 14px;
  line-height: 1.9;
  letter-spacing: .04em;
  text-align: left;
  color: var(--c-text-sub);
}
.case__b b { color: var(--c-text); }
.case--now {
  border: 4px solid var(--c-mark);
  padding: calc(var(--sp-6) - 4px) calc(var(--sp-5) - 4px) calc(var(--sp-5) - 4px);
}

.punch {
  margin-top: var(--chapter-y);
  text-align: center;
  font-size: var(--fs-statement);
  font-weight: 700;
  line-height: 1.75;
  letter-spacing: .03em;
  font-feature-settings: "palt" 1;
}
.punch__line {
  display: inline-block;
  padding: 4px 18px;
  --mask-bg-color: var(--c-surface);
}
.punch__line--strong { margin-top: var(--sp-3); }

.aside { margin-top: var(--sp-7); }
.aside__rule { border-top-color: var(--c-text); opacity: .5; }
.aside__grid {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(180px, 26%, 300px);
  gap: var(--sp-5);
  align-items: stretch;
  background:
    linear-gradient(var(--c-surface), var(--c-surface)) padding-box,
    linear-gradient(135deg, var(--c-cta) 0%, var(--c-primary) 52%, var(--c-cta) 100%) border-box;
  border: 3px solid transparent;
  border-radius: var(--radius-lg);
  padding: var(--sp-6) var(--sp-6) var(--sp-5);
  box-shadow: var(--shadow-2);
}
.curl {
  flex: none;
  width: 26px; height: 10px;
  border-bottom: 2px solid var(--c-primary);
  border-right: 2px solid var(--c-primary);
  border-bottom-right-radius: 12px;
  transform: rotate(-14deg);
}
.aside__label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--sp-3);
  color: var(--c-text);
}
.aside__figure {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin: calc(var(--sp-6) * -1) calc(var(--sp-6) * -1) calc(var(--sp-5) * -1) 0;
  padding: var(--sp-6) var(--sp-4) var(--sp-5);
}
.aside__figure::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../img/pattern-shippou.svg") right center / cover no-repeat;
  pointer-events: none;
}
.aside__t {
  max-width: var(--measure);
  font-size: 14.5px;
  line-height: 1.9;
  letter-spacing: .05em;
  margin-bottom: var(--sp-3);
}
.aside__t--last { margin-bottom: 0; font-weight: 700; }
.aside__ill { position: relative; z-index: 1; width: clamp(88px, 10vw, 140px); height: auto; }

.mark[data-mask-bg]::before { content: none; }
.mark[data-mask-bg] {
  background: none;
  background-image: linear-gradient(transparent 62%, var(--c-primary) 62%);
  background-repeat: no-repeat;
  background-size: calc(var(--wipe, 1) * 100%) 100%;
}


.spec-wrap { margin-top: var(--sp-7); }
.spec {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  counter-reset: spec;
  background: transparent;
  font-size: 15px;
  line-height: 1.85;
  letter-spacing: .04em;
}
.spec__c1 { width: 24%; }
.spec__c2 { width: 36%; }
.spec__c3 { width: 40%; }
.spec__cap {
  caption-side: top;
  text-align: left;
  padding-bottom: var(--sp-3);
  font-size: 13.5px;
  color: var(--c-text-sub);
}
.spec thead th {
  background: var(--c-accent2);
  color: var(--c-text);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .06em;
  text-align: left;
  padding: 16px 20px;
  border-bottom: 1px solid var(--c-text);
}
.spec thead th.spec__rowhead { background: transparent; border-bottom-color: var(--c-line); }
.spec thead th.spec__theirs { border-radius: 10px 10px 0 0; }
.spec tbody td.spec__theirs { background: rgba(255, 255, 255, .5); }
.spec tbody tr:last-child td.spec__theirs { border-radius: 0 0 10px 10px; }
.spec tbody th {
  text-align: left;
  font-size: 14px;
  font-weight: 700;
  padding: 18px 20px;
  background: transparent;
  border-bottom: 1px solid var(--c-line);
  vertical-align: top;
  counter-increment: spec;
}
.spec tbody th::before {
  content: counter(spec, decimal-leading-zero);
  display: block;
  margin-bottom: 2px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--c-primary);
}
.spec tbody td {
  padding: 18px 20px;
  border-bottom: 1px solid var(--c-line);
  vertical-align: top;
  color: var(--c-text-sub);
}
.spec tbody tr:last-child th,
.spec tbody tr:last-child td { border-bottom: 0; }

.spec .spec__ours {
  background: var(--c-surface);
  box-shadow:
     14px 0 30px -20px rgba(36, 31, 41, .45),
    -14px 0 30px -20px rgba(36, 31, 41, .45);
}
.spec td.spec__ours {
  color: var(--c-text);
  font-weight: 700;
  border-bottom-color: rgba(36, 31, 41, .08);
}
.spec th.spec__ours {
  background: var(--c-cta);
  color: var(--c-text-inv);
  border-radius: 16px 16px 0 0;
  padding-top: 24px;
}
.spec__shuriken {
  width: 15px;
  height: 15px;
  margin-right: 8px;
  vertical-align: -2px;
  fill: currentColor;
  opacity: .85;
}
.spec tbody tr:last-child td.spec__ours {
  border-radius: 0 0 16px 16px;
  padding-bottom: 28px;
}

.spec tbody tr {
  transition: transform .26s var(--motion-ease, ease);
}
.spec tbody tr:hover { transform: translateY(-3px); }
.spec tbody th,
.spec tbody td { transition: background-color .26s ease, box-shadow .26s ease; }
.spec tbody tr:hover > .spec__theirs { background: var(--c-surface); }
.spec tbody tr:hover > td.spec__ours {
  box-shadow:
     18px 0 34px -20px rgba(36, 31, 41, .55),
    -18px 0 34px -20px rgba(36, 31, 41, .55);
}
@media (prefers-reduced-motion: reduce) {
  .spec tbody tr,
  .spec tbody tr:hover { transform: none; transition: none; }
}
.spec__note {
  margin-top: var(--sp-3);
  font-size: 13px;
  line-height: 1.8;
  color: var(--c-text-sub);
  text-align: left;
}


.myths {
  list-style: none;
  margin: var(--sp-7) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2.4vw, 30px);
}
.myth {
  background: var(--c-bg);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  box-shadow: var(--shadow-2);
}
.myths.is-in > .myth:nth-child(1) { transform: rotate(-0.6deg); }
.myths.is-in > .myth:nth-child(2) { transform: rotate(0.4deg); }
.myths.is-in > .myth:nth-child(3) { transform: rotate(-0.5deg); }

.myth__q {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: .02em;
  font-feature-settings: "palt" 1;
}
.myth__arrow {
  margin: var(--sp-3) 0;
  font-size: 22px;
  font-weight: 700;
  color: var(--c-cta);
}
.myth__a {
  font-size: 14.5px;
  line-height: 1.9;
  letter-spacing: .04em;
  color: var(--c-text-sub);
}
.myth__a b { color: var(--c-text); }

.sumbox {
  position: relative;
  overflow: hidden;
  margin-top: var(--sp-7);
  max-width: 620px;
  margin-inline: auto;
  background:
    linear-gradient(var(--c-surface), var(--c-surface)) padding-box,
    linear-gradient(135deg, var(--c-cta) 0%, var(--c-primary) 52%, var(--c-cta) 100%) border-box;
  border: 3px solid transparent;
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  box-shadow: var(--shadow-2);
}
.sumbox::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../img/pattern-shippou.svg") right center / auto 330px no-repeat;
  opacity: .7;
  pointer-events: none;
}
.sumbox > * { position: relative; }
.sumbox__h {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--sp-3);
  font-size: 17px;
  color: var(--c-text);
}
.sumbox__list { margin: 0; padding-left: 1.2em; }
.sumbox__list li {
  font-size: 15px;
  line-height: 1.9;
  letter-spacing: .04em;
  margin-bottom: 4px;
  list-style: none;
  position: relative;
}
.sumbox__list .nw { white-space: nowrap; }

.sumbox__list li::before {
  content: "";
  position: absolute;
  left: -1.2em; top: .78em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--c-cta);
}
.illust--my1 { bottom: 8%; left: 2%; width: clamp(74px, 8.4vw, 120px); }


.reason__grid {
  margin-top: var(--sp-6);
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}
.incl {
  background: var(--c-surface);
  border-radius: var(--radius-sm);
  padding: var(--sp-5);
  box-shadow: var(--shadow-1);
}
.incl__h {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .1em;
  margin-bottom: var(--sp-3);
}
.incl__list { margin: 0 0 var(--sp-4); padding: 0; list-style: none; }
.incl__list li {
  position: relative;
  padding-left: 1.3em;
  font-size: 14.5px;
  line-height: 1.9;
  letter-spacing: .04em;
  margin-bottom: 6px;
}
.incl__list li::before {
  content: "";
  position: absolute;
  left: 0; top: .78em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--c-primary);
}
.incl__note { font-size: 13px; color: var(--c-text-sub); }

.figures {
  margin: var(--chapter-y) 0 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--c-line);
  border-block: 1px solid var(--c-text);
}
.fig {
  background: var(--c-surface);
  padding: var(--sp-5) var(--sp-4);
}
.fig__t {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--c-text-sub);
  margin-bottom: var(--sp-3);
  min-height: 3.2em;
}
.fig__v {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-price);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0;
  color: var(--c-text);
}
.fig__v--word { font-size: clamp(28px, 3.6vw, 44px); }
.fig__u { font-size: .42em; font-weight: 700; margin-left: .3em; letter-spacing: .04em; white-space: nowrap; }
.fig__n { margin: 0; font-size: 12.5px; line-height: 1.8; color: var(--c-text-sub); }
.figures__note {
  margin-top: var(--sp-3);
  font-size: 13px;
  line-height: 1.8;
  color: var(--c-text-sub);
}


.works__head {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  flex-wrap: wrap;
  margin-bottom: var(--sp-4);
}
.works__lead { color: var(--c-text-sub); }

.works__pre,
.voice__pre {
  max-width: var(--measure);
  margin: 0 0 var(--sp-7);
  font-size: var(--fs-body);
  line-height: 1.9;
  letter-spacing: .04em;
  color: var(--c-text);
}

.voice__pre { margin-top: var(--sp-4); }

.works {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(28px, 4vw, 56px) clamp(20px, 3vw, 40px);
}
.work { position: relative; }
.work__a {
  display: block;
  position: relative;
  text-decoration: none;
  color: inherit;
}
.work__win {
  display: block;
  position: relative;
  height: clamp(300px, 34vw, 440px);
  overflow: hidden;
  background: var(--c-surface);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-1);
}
.work__win img {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: auto;
  transition: transform 6s linear;
}
.work__a:hover .work__win img,
.work__a:focus-visible .work__win img {
  transform: translateY(calc(-100% + clamp(300px, 34vw, 440px)));
}
.work__mark {
  position: absolute;
  right: -18px; bottom: -18px;
  width: clamp(64px, 7vw, 96px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--c-cta);
  color: var(--c-text-inv);
  display: grid;
  place-items: center;
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 700;
  transition: transform .3s var(--motion-ease);
}
.work__a:hover .work__mark { transform: scale(1.08); }
.work__a:focus-visible { outline: 3px solid var(--c-text); outline-offset: 4px; }
.work__cap {
  margin-top: var(--sp-3);
  font-size: 14px;
  letter-spacing: .06em;
  color: var(--c-text-sub);
}
.works__note {
  margin-top: var(--sp-6);
  font-size: 13px;
  color: var(--c-text-sub);
}

.works__own {
  margin-bottom: var(--sp-7);
  padding-bottom: var(--sp-6);
  border-bottom: 1px solid var(--c-line);
  display: grid;
  grid-template-columns: 1fr minmax(0, 46%);
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}
.works__own-t {
  margin: 0;
  font-size: var(--fs-body);
  line-height: 1.9;
  letter-spacing: .04em;
  color: var(--c-text);
}
.works__own-link {
  display: inline-block;
  margin-top: var(--sp-3);
  font-size: 15px;
  letter-spacing: .04em;
  color: var(--c-text);
  text-underline-offset: .3em;
}
.works__own-link::after { content: " ↗"; }
.works__own-fig { position: relative; }

@media (max-width: 767px) {
  .works__own { grid-template-columns: 1fr; gap: var(--sp-5); }
}


.voices {
  list-style: none;
  margin: var(--sp-7) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto 1fr auto;
  gap: clamp(16px, 2.4vw, 30px);
}
.voice {
  position: relative;
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 4;
  row-gap: 0;
  background:
    linear-gradient(var(--c-surface), var(--c-surface)) padding-box,
    linear-gradient(135deg, var(--c-cta) 0%, var(--c-primary) 52%, var(--c-cta) 100%) border-box;
  border: 3px solid transparent;
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  box-shadow: var(--shadow-1);
}
.voice__photo {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--c-primary-soft);
  margin-bottom: var(--sp-4);
}

.voice__h {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: .02em;
  font-feature-settings: "palt" 1;
  margin-bottom: var(--sp-4);
}
.voice__hs { font-size: 13.5px; font-weight: 500; color: var(--c-text-sub); }
.voice__q {
  flex: 1;
  margin: 0 0 var(--sp-4);
  padding: 2px 0;
}
.voice__q p {
  font-size: 14.5px;
  line-height: 1.9;
  letter-spacing: .04em;
}
.voice__by {
  padding-top: var(--sp-3);
  border-top: 1px solid var(--c-line);
  font-size: 12.5px;
  line-height: 1.8;
  color: var(--c-text-sub);
}
.voice__by span { font-weight: 700; color: var(--c-text); }


.illust--fq1 { top: 8%;  left: 2%;  width: clamp(80px, 9vw, 130px); }
.illust--fq2 { bottom: 8%; right: 2%; width: clamp(80px, 9vw, 130px); }

.faq { margin-top: var(--sp-6); }
.wobble {
  display: block;
  width: 100%;
  height: 8px;
  stroke: var(--c-text);
  opacity: .7;
}
.qa { }
.qa summary {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  min-height: 56px;
  padding: var(--sp-4) 44px var(--sp-4) 0;
  position: relative;
  cursor: pointer;
  list-style: none;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary:focus-visible { outline: 3px solid var(--c-text); outline-offset: 2px; }
.qa__q {
  flex: none;
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 700;
  line-height: 1;
  color: var(--c-cta);
}
.qa__t {
  font-size: clamp(15px, 1.7vw, 17px);
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: .03em;
  font-feature-settings: "palt" 1;
  padding-top: 4px;
}
.qa__i {
  position: absolute;
  right: 6px; top: 50%;
  width: 20px; height: 20px;
  transform: translateY(-50%);
}
.qa__i::before, .qa__i::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  background: var(--c-cta);
  transition: transform .3s var(--motion-ease), opacity .3s ease;
}
.qa__i::before { width: 20px; height: 2px; transform: translate(-50%, -50%); }
.qa__i::after  { width: 2px; height: 20px; transform: translate(-50%, -50%); }
.qa[open] .qa__i::after { transform: translate(-50%, -50%) scaleY(0); opacity: 0; }

.qa__a { padding: 0 44px var(--sp-5) calc(clamp(26px, 3vw, 34px) + var(--sp-3)); }
.qa__a p {
  font-size: 14.5px;
  line-height: 1.9;
  letter-spacing: .05em;
  color: var(--c-text-sub);
  margin-bottom: var(--sp-3);
}
.qa__a p:last-child { margin-bottom: 0; }


.sec--cta { padding-bottom: clamp(200px, 26vw, 340px); }
.cta__push {
  margin-top: var(--sp-5);
  text-align: center;
  font-size: var(--fs-lead);
  font-weight: 700;
  line-height: 1.9;
  letter-spacing: .05em;
}
.cta__btn { margin-top: var(--sp-6); text-align: center; }
.cta__safe {
  margin: var(--sp-5) 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
}
.cta__safe li {
  position: relative;
  padding-left: 1.1em;
  font-size: 13.5px;
  letter-spacing: .04em;
}
.cta__safe li::before {
  content: "";
  position: absolute;
  left: 0; top: .62em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--c-text);
}

.finale {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: clamp(150px, 20vw, 260px);
  z-index: 1;
  pointer-events: none;
}
.finale__i { position: absolute; bottom: 0; height: auto; }
.finale__i--1 { left: 4%;  width: clamp(70px, 8vw,   122px); bottom: 2%; }
.finale__i--2 { left: 17%; width: clamp(58px, 6.4vw,  96px); bottom: 34%; }
.finale__i--3 { left: 28%; width: clamp(78px, 8.8vw, 138px); bottom: 0; }
.finale__i--4 { left: 46%; width: clamp(64px, 7.2vw, 108px); bottom: 22%; }
.finale__i--5 { left: 62%; width: clamp(76px, 8.4vw, 132px); bottom: 4%; }
.finale__i--6 { left: 80%; width: clamp(60px, 6.6vw, 100px); bottom: 40%; }


.ft {
  position: relative;
  overflow: hidden;
  background: var(--c-bg);
  padding-block: var(--sp-7) var(--sp-6);
}
.ft__pattern {
  position: absolute;
  inset: 0;
  background: url("../img/pattern-shippou-wide.svg") right center / cover no-repeat;
  opacity: .38;
  pointer-events: none;
}
.ft > .container { position: relative; z-index: 1; }

.ft__rule { border-top-color: var(--c-line-strong); }
.ft__grid {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-6);
  align-items: start;
  margin-top: var(--sp-6);
}

.ft__brand { display: flex; flex-direction: column; gap: var(--sp-4); }
.ft__logo { display: flex; flex-direction: column; gap: 2px; line-height: 1.25; }
.ft__logo-main { font-weight: 700; font-size: 20px; letter-spacing: .1em; }
.ft__logo-sub {
  font-family: var(--font-round);
  font-size: 11.5px; font-weight: 400; letter-spacing: .04em;
  color: var(--c-text-sub);
}
.ft__shuriken {
  width: 18px; height: 18px;
  fill: var(--c-primary);
  opacity: .7;
}

.ft__dl { margin: 0; display: grid; gap: 10px; }
.ft__dl > div {
  display: flex;
  gap: var(--sp-4);
  font-size: 14px;
  line-height: 1.9;
  letter-spacing: .04em;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--c-line);
}
.ft__dl > div:last-child { border-bottom: 0; padding-bottom: 0; }
.ft__dl dt { flex: none; width: 8em; color: var(--c-text-sub); }
.ft__dl dd { margin: 0; }

.ft__link { text-underline-offset: .3em; }
.ft__link::after { content: " ↗"; }

.ft__c {
  margin-top: var(--sp-6);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--c-line);
  font-size: 12.5px;
  letter-spacing: .04em;
  color: var(--c-text-sub);
}


@media (max-width: 768px) {
  :root { --chapter-y: clamp(72px, 14vw, 120px); }

  .hd .btn-rect { display: none; }
  .hd__logo-main { font-size: 18px; }
  .hd__logo-sub  { font-size: 10.5px; }

  .fv__band { padding-top: calc(60px + var(--sp-6)); padding-bottom: 90px; }
  .fv__band-inner { min-height: 0; }
  .fv__right { position: static; align-items: flex-start; max-width: none; }
  .catchbox { align-items: flex-start; font-size: clamp(21px, 7vw, 30px); }
  .fv__lead br { display: none; }
  .catchbox__l { padding: 6px 14px; }
  .fv__lead { margin-top: var(--sp-4); }

  .illust--giant { top: auto; left: auto; right: -12%; bottom: 2%; width: 128px; }
  .role-throw, .role-climb, .role-scroll, .role-point { display: none; }
  .role-read { top: auto; bottom: 118px; left: 4%; width: 74px; }
  .role-peek { top: auto; bottom: 8px;   left: 62%; width: 66px; }
  .fv__lead {
    text-align: left;
    background: var(--c-bg);
    margin-inline: -14px;
    padding: 16px 14px;
  }
  .illust--fv2 { top: auto; bottom: 6px; left: 3%; width: 60px; }
  .illust--fv4 { top: 3%; left: auto; right: 4%; width: 56px; }

  .fv__body-inner { padding-left: 20px; }
  .statement { font-size: clamp(19px, 5.4vw, 24px); }
  .illust--fv6, .illust--fv7, .illust--fv8, .illust--fv9, .illust--fv10 { display: none; }
  .illust--fv5 { top: auto; bottom: 2%; right: 2%; left: auto; width: 84px; }
  .arw--fv-a, .arw--fv-b { display: none; }
  .fv__cta { text-align: center; }
  .fv__cta .btn-rect { width: 100%; }

  .illust--sp-hide { display: none; }
  .finale__i--2, .finale__i--4, .finale__i--6 { display: none; }
  .finale { height: 120px; }
  .finale__i--1 { left: 2%; width: 72px; }
  .finale__i--3 { left: 38%; width: 78px; }
  .finale__i--5 { left: 74%; width: 74px; }

  .dot { max-width: 160px; max-height: 160px; }
  .dot--c, .dot--e { display: none; }
  .selbox { display: none; }

  .cases, .myths, .voices { grid-template-columns: 1fr; }
  .cases.is-in > .case, .myths.is-in > .myth { transform: none; }
  .case__disc { display: none; }
  .reason__grid { grid-template-columns: 1fr; }
  .figures { grid-template-columns: repeat(2, 1fr); }
  .figures { --fs-price: 26px; }
  .fig__t { min-height: 0; }
  .sumbox::before {
    background-size: auto 230px;
    background-position: right bottom;
    opacity: .45;
  }

  .aside__grid { grid-template-columns: 1fr; }
  .aside__figure {
    justify-content: flex-end;
    margin: 0 calc(var(--sp-6) * -1) calc(var(--sp-5) * -1);
    padding: var(--sp-4) var(--sp-5);
  }
  .aside__figure::before {
    background-size: auto 358px;
    background-position: right center;
  }
  .aside__ill { width: 96px; }

  .ft__pattern {
    background-image: url("../img/pattern-shippou-sp.svg");
    background-size: cover;
    background-position: center center;
    opacity: .3;
  }

  .spec, .spec thead, .spec tbody, .spec tr, .spec th, .spec td { display: block; width: auto; }
  .spec thead { display: none; }
  .spec__cap { display: block; width: auto; }
  .spec tbody tr { border-bottom: 1px solid var(--c-text); padding-bottom: var(--sp-3); margin-bottom: var(--sp-3); }
  .spec tbody tr:last-child { border-bottom: 0; margin-bottom: 0; }
  .spec tbody th { width: auto; background: transparent; border-bottom: 0; padding: 0 0 6px; }
  .spec tbody td {
    border-bottom: 0;
    padding: 10px 14px;
    background: var(--c-surface-alt);
    border-radius: var(--radius-sm);
    margin-bottom: 8px;
  }
  .spec tbody td::before {
    content: attr(data-label);
    display: block;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--c-text-sub);
    margin-bottom: 4px;
  }
  .spec tbody td.spec__ours { background: var(--c-primary-soft); }
  .spec tbody td.spec__ours::before { color: var(--c-text); }
  .spec .spec__ours { box-shadow: none; }
  .spec tbody tr:last-child td.spec__ours {
    border-radius: var(--radius-sm);
    padding-bottom: 10px;
  }
  .spec tbody td.spec__theirs { background: var(--c-surface-alt); }
  .spec tbody tr:last-child td.spec__theirs { border-radius: var(--radius-sm); }
  .spec__note { text-align: left; }

  .works { grid-template-columns: 1fr; }
  .work__win { height: 280px; }

  .works__head, .cap-row { flex-direction: column; align-items: flex-start; }
  .burst-set { align-self: flex-end; }

  .cta__btn .btn-rect { width: 100%; }
  .ft__grid { grid-template-columns: 1fr; gap: var(--sp-5); }
  .ft__dl dt { width: 7em; }
}

@media (hover: none) {
  .work.is-in .work__win img {
    animation: work-scroll 16s ease-in-out infinite alternate;
  }
  @keyframes work-scroll {
    0%   { transform: translateY(0); }
    100% { transform: translateY(calc(-100% + 280px)); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .work__win img { transition: none; animation: none !important; }
  .cases.is-in > .case, .myths.is-in > .myth { transition: none; }
}

.losses {
  list-style: none;
  margin: var(--sp-6) 0 0;
  padding: 0;
}

.loss {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: var(--sp-6);
  align-items: center;
  padding: var(--sp-5) 0;
  border-top: 1px solid var(--c-line);
}
.loss:last-child { border-bottom: 1px solid var(--c-line); }

.loss:nth-child(even) { grid-template-columns: 1fr 300px; }
.loss:nth-child(even) .loss__figure { order: 2; }

.loss__figure {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 210px;
}
.loss__figure::before {
  content: "";
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: var(--c-primary-soft);
  opacity: .55;
}
.loss__ill {
  position: relative;
  width: 100%;
  max-width: 230px;
  height: auto;
  display: block;
}

.loss__body { min-width: 0; }

.loss__n {
  margin: 0 0 var(--sp-2);
  font-family: var(--font-sans);
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 900;
  line-height: 1;
  color: var(--c-mark);
  font-feature-settings: 'palt';
}

.loss__h {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .04em;
  font-feature-settings: 'palt';
}

.loss__b {
  margin: 0;
  font-size: var(--fs-body);
  line-height: 1.9;
  letter-spacing: .04em;
  color: var(--c-text);
  max-width: 46em;
}
.loss__b b { font-weight: 700; }

@media (max-width: 768px) {
  .loss,
  .loss:nth-child(even) {
    grid-template-columns: 1fr;
    gap: var(--sp-3);
    padding: var(--sp-5) 0;
  }
  .loss:nth-child(even) .loss__figure { order: 0; }
  .loss__figure { min-height: 0; }
  .loss__figure::before { width: 150px; height: 150px; }
  .loss__ill { max-width: 170px; }
  .loss__n { font-size: 30px; }
}

.steps {
  list-style: none;
  margin: var(--sp-6) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
}

.step {
  position: relative;
  min-width: 0;
}

.step__n {
  position: relative;
  z-index: 1;
  margin: 0 0 var(--sp-4);
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--c-primary-soft);
  border: 2px solid var(--c-primary);
  color: var(--c-text);
  font-family: var(--font-sans);
  font-size: 34px;
  font-weight: 900;
  line-height: 1;
}
.step__n--goal {
  background: var(--c-primary);
  border-color: var(--c-primary);
}

.arw--step {
  position: absolute;
  top: 20px;
  left: 92px;
  width: clamp(44px, 5vw, 66px);
  height: auto;
  z-index: 0;
}

.step__h {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .04em;
  font-feature-settings: 'palt';
  min-height: calc(var(--fs-h3) * 1.6 * 3);
}

.step__b {
  margin: 0;
  font-size: var(--fs-body);
  line-height: 1.9;
  letter-spacing: .04em;
}
.step__b b { font-weight: 700; }

.punch--how { margin-top: var(--sp-6); }

@media (max-width: 768px) {
  .steps {
    grid-template-columns: 1fr;
    gap: var(--sp-5);
  }
  .step__h { min-height: 0; }
  .step__br { display: none; }
  .step__n { width: 60px; height: 60px; font-size: 27px; margin-bottom: var(--sp-3); }
  .arw--step {
    top: 14px;
    left: 68px;
    width: 40px;
    transform: rotate(58deg);
  }
}

.flow {
  list-style: none;
  margin: var(--sp-6) 0 0;
  padding: 0;
}

.flow__i {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-5);
  padding-bottom: var(--sp-6);
}
.flow__i:last-child { padding-bottom: 0; }

.flow__i::before {
  content: '';
  position: absolute;
  left: 23px;
  top: 48px;
  bottom: 0;
  width: 2px;
  background: var(--c-line);
}
.flow__i--last::before { display: none; }

.flow__n {
  position: relative;
  z-index: 1;
  margin: 0;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--c-primary);
  color: var(--c-text);
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
}
.flow__n--goal {
  background: var(--c-cta);
  color: #fff;
}

.flow__body { min-width: 0; padding-top: 6px; }

.flow__h {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .04em;
  font-feature-settings: 'palt';
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
}

.flow__tag {
  font-family: var(--font-round);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--c-text-sub);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-pill);
  padding: 4px 12px;
  white-space: nowrap;
}

.flow__b {
  margin: 0;
  font-size: var(--fs-body);
  line-height: 1.9;
  letter-spacing: .04em;
  max-width: 46em;
}
.flow__b b { font-weight: 700; }

@media (max-width: 768px) {
  .flow__i {
    gap: var(--sp-4);
    padding-bottom: var(--sp-5);
  }
  .case__h { text-align: center; }
  .fv__lead,
  .case__b,
  .spec__note { text-align: justify; }

  .flow__n { width: 40px; height: 40px; font-size: 17px; }
  .flow__i::before { left: 19px; top: 40px; }
  .flow__body { padding-top: 2px; }
  .flow__h {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-2);
  }
}


.price__lab {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  margin: var(--sp-7) 0 var(--sp-3);
  font-size: var(--fs-h3);
  font-weight: 700;
  letter-spacing: .04em;
  font-feature-settings: 'palt';
}
.price__lab-n {
  font-family: var(--font-sans);
  font-size: 1.15em;
  font-weight: 900;
  color: var(--c-primary);
  line-height: 1;
}
.price__desc {
  margin: 0 0 var(--sp-5);
  font-size: var(--fs-body);
  line-height: 1.9;
  letter-spacing: .04em;
  color: var(--c-text-sub);
}

.plans {
  list-style: none;
  margin: 0 0 var(--sp-5);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
  align-items: stretch;
}
.plans--2 { grid-template-columns: repeat(2, 1fr); }

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-md);
  padding: var(--sp-5) var(--sp-4);
  box-shadow: var(--shadow-1);
}

.plan--pick {
  border-color: var(--c-primary);
  border-width: 2px;
  box-shadow: var(--shadow-2);
  padding: calc(var(--sp-5) - 1px) calc(var(--sp-4) - 1px);
}

.plan__flag {
  position: absolute;
  top: -13px;
  left: var(--sp-4);
  margin: 0;
  background: var(--c-primary);
  color: var(--c-text);
  font-family: var(--font-round);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: .08em;
  border-radius: var(--radius-pill);
  padding: 5px 14px;
  white-space: nowrap;
}

.plan__name {
  margin: 0 0 var(--sp-2);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: .04em;
  font-feature-settings: 'palt';
}
.plan__catch {
  margin: 0 0 var(--sp-4);
  font-size: 14.5px;
  line-height: 1.8;
  letter-spacing: .04em;
  color: var(--c-text-sub);
}

.plan__price {
  display: flex;
  align-items: baseline;
  gap: 2px;
  margin: 0;
  font-family: var(--font-sans);
  line-height: 1.1;
}
.plan__num {
  font-size: clamp(28px, 3vw, 36px);
  font-weight: 900;
  letter-spacing: .01em;
}
.plan__unit {
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
}
.plan__tax {
  margin: 6px 0 var(--sp-4);
  font-size: 13px;
  color: var(--c-text-sub);
  letter-spacing: .04em;
}

.plan__spec {
  margin: 0;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--c-line);
  font-size: 14.5px;
  line-height: 1.8;
  letter-spacing: .04em;
}
.plan__spec dt { font-weight: 700; color: var(--c-text-sub); font-size: 13px; }
.plan__spec dd { margin: 2px 0 0; }

.plan__list {
  margin: 0;
  padding: var(--sp-3) 0 0;
  border-top: 1px solid var(--c-line);
  list-style: none;
  font-size: 14.5px;
  line-height: 1.9;
  letter-spacing: .04em;
}
.plan__list li { position: relative; padding-left: 1.2em; }
.plan__list li::before {
  content: "";
  position: absolute;
  left: 0; top: .72em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--c-primary);
}

.plan__note {
  margin: var(--sp-3) 0 0;
  font-size: 13px;
  line-height: 1.8;
  letter-spacing: .04em;
  color: var(--c-text-sub);
}
.plan__note b { color: var(--c-text); font-weight: 700; }

.incl--price { margin-top: var(--sp-4); }
.incl--price .incl__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 var(--sp-4);
}

.aside--price { margin-top: var(--sp-6); }

.opts { margin: 0; }
.opt {
  padding: var(--sp-4) 0;
  border-top: 1px solid var(--c-line);
}
.opt:last-child { border-bottom: 1px solid var(--c-line); }

.opt__h {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-4);
  margin: 0 0 var(--sp-2);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .04em;
  font-feature-settings: 'palt';
}
.opt__p {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 900;
  color: var(--c-primary);
  white-space: nowrap;
}
.opt__b {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.9;
  letter-spacing: .04em;
  color: var(--c-text-sub);
  max-width: 52em;
}

@media (max-width: 768px) {
  .plans,
  .plans--2 { grid-template-columns: 1fr; }
  .plans { gap: var(--sp-5); }
  .incl--price .incl__list { grid-template-columns: 1fr; }
  .price__lab { margin-top: var(--sp-6); font-size: 19px; }
  .opt__h { font-size: 16px; }
  .opt__p { font-size: 17px; }
}

.prof {
  margin-top: var(--sp-6);
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: var(--sp-6);
  align-items: start;
}

.prof__figure { min-width: 0; }

.prof__photo {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-2);
}

.prof__name {
  margin: var(--sp-4) 0 0;
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .06em;
  font-feature-settings: 'palt';
}
.prof__role {
  font-family: var(--font-round);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--c-text-sub);
}

.prof__dl {
  margin: var(--sp-4) 0 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 var(--sp-4);
  font-size: 14px;
  line-height: 1.9;
  letter-spacing: .04em;
}
.prof__dl dt {
  color: var(--c-text-sub);
  padding: 8px 0;
  border-top: 1px solid var(--c-line);
  white-space: nowrap;
}
.prof__dl dd {
  margin: 0;
  padding: 8px 0;
  border-top: 1px solid var(--c-line);
}

.prof__body { min-width: 0; }

.prof__h {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .04em;
  font-feature-settings: 'palt';
}

.prof__t {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-body);
  line-height: 1.9;
  letter-spacing: .04em;
  max-width: 46em;
}
.prof__t--last { margin-bottom: 0; }

@media (max-width: 768px) {
  .prof {
    grid-template-columns: 1fr;
    gap: var(--sp-5);
  }
  .prof__photo { max-width: 220px; }
}

.price__cta {
  margin-top: var(--sp-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  text-align: center;
}
.price__cta-note {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--c-text-sub);
  letter-spacing: .04em;
}

@media (max-width: 768px) {
  .brk br { display: none; }
}


.illust--how1 { top: 20%; right: 1%; width: clamp(60px, 6.4vw, 96px); }

.illust--rs1  { top: 7%;  right: 3%; width: clamp(74px, 8.4vw, 118px); }

.illust--fl1  { top: 9%;  right: 2%; width: clamp(84px, 9.4vw, 136px); }

.illust--pr1  { top: 3%;  right: 3%; width: clamp(66px, 7.2vw, 104px); }

.illust-p {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  display: block;
}
.illust-p__i {
  display: block;
  width: 100%;
  height: auto;
}


.plan__peek {
  position: absolute;
  top: -44px;
  right: -24px;
  width: 78px;
  height: auto;
  z-index: 2;
  pointer-events: none;
}

.step__point {
  position: absolute;
  top: -6px;
  left: 96px;
  width: 74px;
  height: auto;
  z-index: 0;
  pointer-events: none;
}

@media (max-width: 768px) {
  .plan__peek, .step__point { display: none; }
}

@media (max-width: 768px) {
  .illust-p.illust--sp-hide { display: none; }
}

.hd__logo-img {
  display: block;
  width: auto;
  height: 34px;
}
.ft__logo-img {
  display: block;
  width: auto;
  height: 38px;
  align-self: flex-start;
}
@media (max-width: 768px) {
  .hd__logo-img { height: 26px; }
  .ft__logo-img { height: 32px; }
}

.sec--demo {
  background: var(--c-bg);
  padding-block: var(--sp-7);
}

.demo {
  margin: var(--sp-6) auto 0;
  max-width: 900px;
}
.demo__v {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: #12101a;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-2);
}
.demo__cap {
  margin: var(--sp-3) 0 0;
  text-align: center;
  font-size: var(--fs-small);
  line-height: 1.8;
  letter-spacing: .04em;
  color: var(--c-text-sub);
}

@media (max-width: 768px) {
  .sec--demo { padding-block: var(--sp-6); }
  .demo { margin-top: var(--sp-5); }
  .demo__v { border-radius: var(--radius-sm); }
}


@media (max-width: 768px) {

  .aside__grid { padding: var(--sp-4) 18px; }

  .case,
  .myth,
  .voice,
  .incl { padding-left: 18px; padding-right: 18px; }

  .plan { padding-left: 18px; padding-right: 18px; }
  .plan--pick { padding-left: 17px; padding-right: 17px; }

  .flow__i { gap: var(--sp-3); }

  .myth__q, .myth__a { max-width: none; }

  .figures { grid-template-columns: repeat(2, 1fr); }
}



.illust--sp-hero,
.illust--sp-watch,
.illust--sp-point { display: none; }

@media (max-width: 768px) {

  .fv .dot,
  .fv .poly { display: none; }

  .fv .role-read,
  .illust--fv5 { display: none; }

  .fv .role-peek {
    display: block;
    top: 100px;
    right: 6px;
    left: auto;
    bottom: auto;
    width: min(21vw, 92px);
    z-index: 4;
  }

  .illust--giant { display: none; }

  .fv__body .deco { display: none; }

  .illust--sp-hero {
    display: block;
    position: absolute;
    top: 56px;
    left: -48%;
    width: 118vw;
    max-width: none;
    z-index: 1;
  }
  .catchbox,
  .fv__lead { position: relative; z-index: 2; }

  .fv__body { padding-top: 150px; padding-bottom: var(--sp-6); }

  .illust--sp-watch,
  .illust--sp-point { display: block; position: absolute; z-index: 2; }
  .illust--sp-watch { top: 34px; left: 22px;  width: min(30vw, 130px); }
  .illust--sp-point { top: 26px; right: 18px; width: min(30vw, 130px); }
}

@media (max-width: 768px) {
  .fv__band {
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 74%, transparent 96%);
            mask-image: linear-gradient(180deg, #000 0%, #000 74%, transparent 96%);
  }
}

@media (max-width: 768px) {
  .dot,
  .poly { display: none; }
}

.gtoc {
  margin-top: var(--sp-5);
  padding: var(--sp-5);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
}
.gtoc__h {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .1em;
  margin-bottom: var(--sp-4);
}
.gtoc__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(2, 1fr);
}
.gtoc__list li {
  font-size: 14.5px;
  line-height: 1.9;
  letter-spacing: .04em;
  color: var(--c-text-sub);
}
.gtoc__list b { color: var(--c-text); font-weight: 700; }
.gtoc__ch {
  display: block;
  font-weight: 700;
  color: var(--c-text);
  border-bottom: 2px solid var(--c-primary);
  padding-bottom: 2px;
  margin-bottom: 6px;
}
.gtoc__meta {
  margin: var(--sp-4) 0 0;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--c-line);
  font-size: 13px;
  line-height: 1.9;
  color: var(--c-text-sub);
}
.gtoc__meta b { color: var(--c-text); font-weight: 700; }

@media (max-width: 700px) {
  .gtoc { padding: var(--sp-4); }
  .gtoc__list { grid-template-columns: 1fr; gap: var(--sp-3); }
}