.page-how {
  --ground: #edf0f4; --ground-2: #e4e8ee; --paper: #f7f9fb;
  --ink: var(--ink-true); --ink-2: var(--ink-true-2); --ink-3: var(--ink-true-3);
  --rule: var(--rule-true); --steel: var(--rule-steel);
  --night: #090d12;
  --wide: 102%;
  background: var(--ground);
}
.page-how .site-head::before { background: var(--ground); box-shadow: 0 1px 0 rgba(30, 48, 70, .14); transition: opacity .7s linear; }
.page-how .site-head.on-dark::before { background: var(--night); box-shadow: 0 1px 0 var(--night-rule); }
.page-how ::selection { background: #cfdcef; color: var(--ink); }
.page-how :focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
.page-how .end :focus-visible { outline-color: var(--blue-lt); }
.page-how .under { font-size: clamp(18px, 1.22vw, 23px); line-height: 1.45; letter-spacing: -.006em; color: var(--ink-2); max-width: 31em; text-wrap: pretty; }
.page-how .body { font-size: clamp(16px, 1.02vw, 19.5px); line-height: 1.55; color: var(--ink-2); max-width: 34em; text-wrap: pretty; }
.page-how .small { font-size: clamp(15px, .95vw, 17px); line-height: 1.5; color: var(--ink-3); text-wrap: pretty; }
.ln { display: block; }

.hw { position: relative; background: var(--ground); }
.hw-stage { position: relative; }
.hw-scene { position: relative; height: 100vh; height: 100svh; min-height: 640px; max-height: 1300px; background: #c9cfd6; }
.hw-scene .frame > .hw-plate { position: absolute; inset: 0; width: 100%; height: 100%; }
.hw-scene .frame > .hw-o, .hw-g4 > .hw-o, .hw-fig .frame > .hw-fo, .hw-fig .hw-g4 > .hw-fo {
  position: absolute; inset: auto; left: var(--x); top: var(--y); width: var(--w); height: auto; max-width: none; object-fit: fill; pointer-events: none; }
.hw-scene .frame > .hw-o { opacity: 0; }
.hw-g4 { position: absolute; inset: 0; transform-origin: 50.5% 70.5%; transform: scale(var(--g4s, 1.28)); }
.hw-scene .hw-g4 { opacity: 0; }
.obj-b [data-set="a"], .obj-a [data-set="b"] { display: none !important; }
.hw-scene .frame > .hw-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hw-scene .frame > .hw-clip { position: absolute; inset: auto; height: auto; object-fit: fill; pointer-events: none; opacity: 0; display: block; }
.hw-sig, .hw-fsig { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.hw-sig { opacity: 0; }
.hw-sig__rule { fill: none; stroke: #20262e; stroke-opacity: .55; stroke-width: 3.2; }
.hw-sig__ink { fill: none; stroke: #101722; stroke-width: 4.6; stroke-linecap: round; stroke-linejoin: round; }

html.no-js .hw-fig .hw-type { display: none; }
.hw-ill { padding: 7px 10px 6px; background: rgba(247, 249, 251, .82); color: var(--ink-3); }
.hw-ill > i { box-shadow: 0 0 0 1px rgba(61, 56, 16, .25); }
.hw-sky { position: absolute; left: 0; top: 0; width: 100%; height: 45%; pointer-events: none; mix-blend-mode: color;
  background: linear-gradient(180deg, rgba(84, 108, 136, .66) 0%, rgba(88, 112, 140, .54) 55%, rgba(92, 116, 142, .28) 88%, rgba(96, 118, 144, 0) 100%); }
.hw-fig .hw-g4 { --g4s: 1.7; }
.hw-type { position: absolute; left: 0; top: 0; width: 6336px; height: 2688px; transform-origin: 0 0; transform: scale(var(--pk, .3)); pointer-events: none; }
.hw-page { position: absolute; left: 0; top: 0; width: 600px; height: 860px; transform-origin: 0 0; padding: 44px 46px 0; color: #1d2530; font-family: var(--sans);
  -webkit-font-smoothing: antialiased; transform: matrix3d(1.36233221,0.0695722605,0,9.5293786e-05,0.0246413494,1.05288841,0,-3.69391002e-05,0,0,1,0,2777,878,0,1); }
.hp-k { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 20px; letter-spacing: .12em; text-transform: uppercase; color: #4f5965;
  padding-bottom: 14px; border-bottom: 4px solid #1d2530; }
.hp-h { margin-top: 24px; font-size: 50px; line-height: 1.04; letter-spacing: -.028em; font-weight: 400; color: #0b1118; }
.hp-t { width: 100%; margin-top: 30px; border-collapse: collapse; font-size: 34px; color: #1f2832; }
.hp-t th { font-family: var(--mono); font-weight: 500; font-size: 19px; letter-spacing: .1em; text-transform: uppercase; color: #4f5965; text-align: right; padding: 0 0 10px; border-bottom: 2px solid #9aa6b3; }
.hp-t td { padding: 13px 0 12px; border-bottom: 2px solid #d0d7df; text-align: right; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.hp-t td:first-child, .hp-t th:first-child { text-align: left; font-size: 30px; }
.hp-t td:nth-child(3) { color: var(--improved-s); font-weight: 500; }
.hp-t .hp-tot td { border-bottom: 0; border-top: 10px double #1d2530; padding-top: 16px; font-weight: 500; color: #0b1118; font-size: 38px; }
.hp-t .hp-tot td:first-child { font-size: 34px; }
.hp-t .hp-tot td:nth-child(3) { color: var(--improved-s); }
.hp-src { margin-top: 22px; font-family: var(--mono); font-size: 18px; letter-spacing: .04em; color: #4f5965; }
.hp-save { display: flex; justify-content: space-between; align-items: baseline; margin-top: 18px; padding: 12px 16px 10px; background: rgba(8, 122, 142, .08);
  color: var(--improved-s); font-size: 30px; letter-spacing: -.01em; }
.hp-save b { font-size: 40px; font-weight: 500; font-variant-numeric: tabular-nums; }
.hp-k i { display: inline-block; width: 13px; height: 13px; margin-right: 10px; vertical-align: 1px; background: var(--mark); box-shadow: 0 0 0 1px rgba(61, 56, 16, .25); }

.hw-first { position: absolute; z-index: 4; left: 0; right: 0; top: calc(var(--head) + clamp(34px, 5.4vh, 70px)); padding: 0 var(--gut);
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(24px, 3vw, 64px); align-items: end; pointer-events: none; }
.hw-first a { pointer-events: auto; }
.hw-lead { font-size: clamp(48px, 5.1vw, 100px); color: var(--ink); text-wrap: balance; }
.hw-first__side .under { font-size: clamp(17px, 1.12vw, 21px); color: var(--ink-2); margin-bottom: 4px; }
.hw-first__side .btn { margin-top: 22px; }

.hw-ill { position: absolute; z-index: 4; left: var(--gut); top: calc(100svh - 46px); color: var(--ink-3); }
.hw-ill > i { box-shadow: 0 0 0 1px rgba(61, 56, 16, .25); }

.hw-rail { position: relative; padding: clamp(56px, 6vw, 110px) var(--gut) clamp(40px, 4vw, 80px); display: grid; gap: clamp(40px, 4.4vw, 84px); border-top: 1px solid var(--steel); }
.hw-t { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); column-gap: clamp(28px, 3vw, 64px); align-items: center; color: var(--ink); }
.hw-fig { margin: 0; }
.hw-fig__scene { aspect-ratio: 2.25 / 1; height: auto; background: #c9cfd6; }
.hw-t .num { font-size: 12px; color: var(--ink-3); }
.hw-t .lv3 { margin: 10px 0 12px; color: var(--ink); font-size: clamp(24px, 1.9vw, 34px); }
.hw-t .small { color: var(--ink-2); max-width: 26em; }
.hw-bar { display: none; }

.hw-track { display: none; }
.hw-scene .frame > .hw-o, .hw-scene .hw-g4 { display: none; }
@media print, screen and (min-width: 1024px) and (min-height: 600px) and (prefers-reduced-motion: no-preference) {
:where(.js) .hw:not(.is-unpinned) .hw-stage { position: sticky; top: 0; height: 100vh; overflow: hidden; z-index: 1; background: #c9cfd6;
  display: grid; grid-template-rows: minmax(0, 1fr) minmax(var(--rail-h, auto), auto); grid-template-columns: minmax(0, 1fr); }
:where(.js) .hw:not(.is-unpinned) .hw-scene { position: relative; grid-area: 1 / 1; height: auto; min-height: 0; max-height: none; }
:where(.js) .hw:not(.is-unpinned) .hw-ill { position: relative; grid-area: 1 / 1; align-self: end; justify-self: start; top: auto; left: auto; margin: 0 0 16px var(--gut); }
:where(.js) .hw:not(.is-unpinned) .hw-rail { position: relative; grid-area: 2 / 1; align-self: end; z-index: 5; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0;
  padding: 0 var(--gut); background: var(--ground); min-height: var(--rail-min, 196px); }
:where(.js) .hw:not(.is-unpinned) .hw-fig { display: none; }
:where(.js) .hw:not(.is-unpinned) .hw-t { display: block; padding: 20px clamp(14px, 1.4vw, 28px) 26px 0; color: var(--ink-3); transition: color .45s var(--ease); }
:where(.js) .hw:not(.is-unpinned) .hw-t + .hw-t { padding-left: clamp(14px, 1.4vw, 28px); border-left: 1px solid var(--rule); }
:where(.js) .hw:not(.is-unpinned) .hw-t .lv3 { margin: 8px 0 10px; color: inherit; font-size: var(--lv3); }
:where(.js) .hw:not(.is-unpinned) .hw-t .num { color: inherit; transition: color .45s var(--ease); }
:where(.js) .hw:not(.is-unpinned) .hw-t .small { opacity: 0; transform: translateY(6px); transition: opacity .45s var(--ease), transform .55s var(--ease); }
:where(.js) .hw:not(.is-unpinned) .hw-t.is-on { color: var(--ink); }
:where(.js) .hw:not(.is-unpinned) .hw-t.is-on .small { opacity: 1; transform: none; }
:where(.js) .hw:not(.is-unpinned) .hw-bar { display: block; position: absolute; top: -2px; left: var(--gut); width: calc((100% - 2 * var(--gut)) / 4); height: 3px; background: var(--ink);
  transform-origin: 0 50%; transform: translateX(calc(var(--bar, 0) * 100%)) scaleX(var(--bar-on, 0)); pointer-events: none; }
:where(.js) .hw:not(.is-unpinned) .hw-scene .frame > .hw-o, :where(.js) .hw:not(.is-unpinned) .hw-g4, :where(.js) .hw:not(.is-unpinned) .hw-sig { will-change: opacity, transform; }
:where(.js) .hw:not(.is-unpinned) .hw-track { display: block; height: calc(var(--step, 75vh) * 4); }
:where(.js) .hw:not(.is-unpinned) .hw-track i { display: block; height: var(--step, 75vh); }
:where(.js) .hw:not(.is-unpinned) .hw-scene .frame > .hw-o, :where(.js) .hw:not(.is-unpinned) .hw-scene .hw-g4 { display: block; }
}

.need { position: relative; padding: clamp(96px, 9vw, 176px) var(--gut) clamp(80px, 7vw, 130px); border-top: 1px solid var(--rule); }
.need__head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(24px, 3vw, 64px); align-items: end; margin-bottom: clamp(36px, 3.6vw, 64px); }
.need__head .lv2 { white-space: nowrap; }
.need__head .under { margin-bottom: .3em; }
.rows4 { margin: 0; border-top: 1px solid var(--steel); }
.rows4__r { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(24px, 3vw, 64px); align-items: baseline; padding: 20px 0 21px; border-bottom: 1px solid var(--rule); }
.rows4 dt { font-size: clamp(20px, 1.4vw, 26px); letter-spacing: -.016em; line-height: 1.2; color: var(--ink); font-stretch: var(--wide); }
.rows4 dd { margin: 0; font-size: clamp(16px, 1.02vw, 19px); line-height: 1.5; color: var(--ink-2); max-width: 36em; text-wrap: pretty; }.need__data { margin-top: 26px; margin-left: calc((100% - clamp(24px, 3vw, 64px)) * 5 / 12 + clamp(24px, 3vw, 64px)); color: var(--ink-3); max-width: 38em; }

.after { position: relative; display: grid; grid-template-columns: minmax(0, calc(66.667vw - var(--gut))) minmax(0, 1fr); align-items: start;
  padding: clamp(96px, 9vw, 176px) var(--gut) clamp(80px, 7vw, 132px); border-top: 1px solid var(--rule); overflow: hidden; min-height: calc(min(22vw, 44vh) * .9 + 520px); }
.after::after { content: ''; position: absolute; z-index: 1; top: 0; bottom: 0; left: 66.667vw; width: 1px; background: var(--rule); pointer-events: none; }
.after__sheet { position: absolute; z-index: 0; left: 66.667vw; right: 0; top: 0; bottom: 0; pointer-events: none; }
.after__main { position: relative; z-index: 1; padding-right: clamp(32px, 3.4vw, 64px); }
.after__side { position: relative; z-index: 1; padding-left: clamp(28px, 2.5vw, 48px); }
.after__side .lv2 { font-size: clamp(30px, 2.25vw, 44px); letter-spacing: -.02em; }
.after__rows { margin-top: clamp(36px, 3.4vw, 60px); }
.after__rows .rows4__r { grid-template-columns: minmax(0, 14em) minmax(0, 1fr); }
.after__1 { margin-top: clamp(20px, 1.8vw, 30px); color: var(--ink); }
.after__2 { margin-top: 16px; }
.after__mk { left: 0; top: 0; bottom: 0; width: 66.667vw; --mkw: min(22vw, 44vh);
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 200px), transparent calc(100% - 10px)); mask-image: linear-gradient(180deg, #000 calc(100% - 200px), transparent calc(100% - 10px)); }
.after__mk svg { left: calc(66.667vw - var(--mkw) - 1.4vw); bottom: -1.5vw; }

.page-how main > .after, .page-how main > .hw-end { will-change: transform; }

.hw-end__words { position: relative; z-index: 2; padding: clamp(120px, 10vw, 190px) var(--gut) clamp(60px, 5vw, 96px); }
.hw-end .lv1 { color: #fff; }
.hw-end__btn { margin-top: clamp(30px, 3.8vh, 48px); }
.hw-end .end__mark { opacity: .105; transition: none; }
.hw-end .site-foot--inside { position: relative; left: auto; right: auto; bottom: auto; }

@media (max-width: 1180px) {
  .hw-first, .need__head { grid-template-columns: minmax(0, 1fr); }
  .need__head { row-gap: 16px; }
  .hw-first__side { margin-top: 22px; }
  .after { display: block; }
  .after::after, .after__sheet { display: none; }
  .after__main { padding-right: 0; }
  .after__side { padding: 44px var(--gut) 48px; margin: clamp(48px, 7vw, 80px) calc(-1 * var(--gut)) 0; background: var(--sheet-w); }
}
@media (max-width: 760px) {
  .page-how .site-head::before { opacity: 1; }
  .page-how .small { font-size: 16px; }
  .hw-scene { height: auto; min-height: 0; aspect-ratio: auto; height: min(118vw, 88svh); }
  .hw-scene.scene { --fx: .42 !important; }
  .hw-first { top: calc(var(--head) + 26px); }
  .hw-lead { font-size: clamp(42px, 11.4vw, 56px); }
  .hw-lead .ln { display: inline; }
  .hw-first__side .under { font-size: 17px; }
  .hw-ill { top: auto; bottom: auto; position: absolute; left: var(--gut); margin-top: -30px; }
  .hw-rail { padding: 40px var(--gut) 24px; gap: 44px; }
  .hw-t { grid-template-columns: minmax(0, 1fr); row-gap: 18px; }
  .hw-fig { margin: 0 calc(-1 * var(--gut)); }
  .hw-fig__scene { aspect-ratio: 1.12 / 1; }
  .hw-fig__scene.scene { --fx: .5 !important; --fy: .64 !important; }
  .rows4__r, .after__rows .rows4__r { grid-template-columns: minmax(0, 1fr); row-gap: 6px; }
  .need__data { margin-left: 0; }
  .need__head .lv2 { white-space: normal; text-wrap: balance; }
  .after { min-height: 0; padding-bottom: 96vw; }
  .after__mk { width: auto; right: 0; top: auto; height: 100vw; --mkw: 92vw; }
  .after__mk svg { left: 4vw; bottom: 0; }
  .hw-end__words { padding: 104px var(--gut) 72px; }
}
:is(.hw-sig, .hw-fsig).is-plane { mix-blend-mode: multiply; filter: blur(.3px); }
:is(.hw-sig, .hw-fsig).is-plane .hw-sig__ink { stroke: #1a2742; }
:is(.hw-sig, .hw-fsig).is-plane .hw-sig__rule { stroke: #2a313b; stroke-opacity: .5; }
.hw-scene .frame > .hw-pen3d { display: block; }