*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; overflow: clip; }
body {
  font-family: var(--font-body); font-weight: 500; color: var(--color-ink);
  background: var(--color-base); -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%;
}
h1, h2, p, ul, figure { margin: 0; padding: 0; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
em, i { font-style: normal; }
.defs { position: absolute; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--color-orange); outline-offset: 2px; }
.nb { white-space: nowrap; }

.stage {
  height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr);
  background:
    linear-gradient(var(--color-grid) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, var(--color-grid) 1px, transparent 1px) 0 0 / 28px 28px,
    #f6f8fb;
}
.column { position: relative; width: 100%; max-width: var(--col); height: 100dvh; margin-inline: auto; overflow: hidden; background: var(--color-base); }
.rail { display: none; }
.slider { position: relative; z-index: 1; height: 100dvh; overflow-y: auto; overflow-x: hidden; scroll-snap-type: y mandatory; overscroll-behavior: auto; scrollbar-width: none; outline: none; }
.slider::-webkit-scrollbar { display: none; }

.site-header {
  position: absolute; inset: 0 0 auto 0; z-index: 20; height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding-inline: 16px; background: var(--color-base);
  border-bottom: 1px solid var(--color-line);
  transition: background 400ms linear, border-color 400ms linear;
}
.logo { display: block; width: 132px; }
.logo img { display: block; width: 100%; height: auto; }
.header-nav { display: flex; gap: 6px; }
.hb {
  position: relative; display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 12px;
  font-weight: 700; font-size: 13px; letter-spacing: 0.04em; white-space: nowrap; overflow: hidden; isolation: isolate;
  border: 1px solid var(--color-navy); border-radius: 2px; transition: color 300ms linear;
}
.hb--req { color: var(--color-navy); background: var(--color-base); }
.hb--entry { color: #fff; background: var(--color-orange); border-color: var(--color-orange); }
.hb__ar { width: 13px; height: 13px; transition: transform 300ms var(--ease-out); }
.hb::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--color-navy); transform: scaleY(0); transform-origin: 50% 100%; transition: transform 380ms var(--ease-out); }
@media (hover: hover) {
  .hb:hover { color: #fff; }
  .hb:hover::before { transform: none; }
  .hb:hover .hb__ar { transform: translate(2px, -2px); }
}

.column[data-tone="dark"] .site-header { background: var(--color-navy); border-color: var(--color-on-dark-line); }
.column[data-tone="dark"] .logo img { filter: brightness(0) invert(1); }
.column[data-tone="dark"] .hb--req { background: transparent; color: #fff; border-color: #fff; }
.column[data-page="top"] .site-header { background: var(--color-base); border-color: var(--color-line); }
.column[data-page="top"] .logo img { filter: none; }
.column[data-page="top"] .hb--req { background: var(--color-base); color: var(--color-navy); border-color: var(--color-navy); }

.lane {
  position: absolute; left: 0; right: 0; top: var(--header-h); z-index: 15; height: var(--lane-h);
  pointer-events: none; transition: opacity 400ms linear;
}
.lane__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lane__track { fill: none; stroke: var(--color-line); stroke-width: 1; stroke-dasharray: 2 4; }
.lane__line { fill: none; stroke: var(--color-orange); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: stroke-dashoffset 900ms var(--ease-out); }
.lane__head { stroke: var(--color-orange); transition: transform 900ms var(--ease-out); }
.lane__tag {
  position: absolute; left: 23px; top: 3px; display: flex; align-items: baseline; gap: 4px;
  font-family: var(--font-en); font-weight: 500; font-size: 9.5px; letter-spacing: 0.18em; color: var(--color-ink-soft);
  transition: color 400ms linear;
}
.lane__now { font-size: 15px; font-weight: 600; letter-spacing: 0.04em; color: var(--color-orange); }
.column[data-tone="dark"] .lane__track { stroke: var(--color-on-dark-line); }
.column[data-tone="dark"] .lane__tag { color: var(--color-on-dark-soft); }
.column[data-page="top"] .lane { opacity: 0; }

.page {
  position: relative; height: 100dvh; overflow: hidden;
  scroll-snap-align: start; scroll-snap-stop: always;
  font-size: clamp(10.5px, min(1.86dvh, 3.15vw), 15.2px); line-height: 1.85;
  word-break: auto-phrase; background: var(--color-base);
}
@media (min-height: 741px) { .page { font-size: clamp(10.5px, min(1.6dvh, 3.15vw), 15.2px); } }
.page[data-tone="light"] {
  background:
    linear-gradient(var(--color-grid) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, var(--color-grid) 1px, transparent 1px) 0 0 / 24px 24px,
    var(--color-base);
}
.page[data-tone="dark"] { background: var(--color-navy); color: var(--color-on-dark); }
.page__inner {
  position: relative; z-index: 2; height: 100%;
  display: flex; flex-direction: column; justify-content: center; gap: 1em;
  padding: calc(var(--header-h) + var(--lane-h) + 0.4em) 23px calc(46px + 2.2em);
}

.ln { display: block; }
.body { font-weight: 500; }
.body .ln + .ln { margin-top: 0; }
.ttl { font-family: var(--font-head); font-weight: 800; font-size: 1.9em; line-height: 1.38; letter-spacing: 0.02em; margin-bottom: 0.5em; }
.ttl em.up, .fv__copy em.up { color: var(--color-orange); }
.close { font-family: var(--font-head); font-weight: 700; font-size: 1.2em; line-height: 1.7; margin-top: 0.4em; }

.ln.rv { clip-path: inset(0 0 100% 0); transform: translateY(0.6em); opacity: 0; transition: clip-path 700ms var(--ease-out), transform 700ms var(--ease-out), opacity 300ms linear; }
.ln.rv.is-on { clip-path: inset(-0.3em -0.3em -0.3em -0.3em); transform: none; opacity: 1; }

.page--hero { background: var(--color-base); }
.hero__video { position: absolute; left: 0; right: 0; top: var(--header-h); width: 100%; height: calc(100% - var(--header-h)); object-fit: cover; }
.hero__swipe {
  position: absolute; left: 50%; bottom: 22px; z-index: 3; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; background: var(--color-navy); color: #fff;
  font-family: var(--font-en); font-weight: 500; font-size: 11px; letter-spacing: 0.24em;
}
.hero__swipe svg { width: 14px; height: 14px; color: var(--color-orange); animation: rise 1.6s var(--ease-in-out) infinite; }
@keyframes rise { 0% { transform: translate(-4px, 4px); opacity: 0; } 40% { opacity: 1; } 100% { transform: translate(4px, -4px); opacity: 0; } }

.fv__top { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 12px; margin-bottom: 0.4em; }
.fv__en { font-family: var(--font-en); font-weight: 500; font-size: 1.5em; line-height: 1.12; letter-spacing: 0.02em; color: var(--color-navy); align-self: end; padding-bottom: 0.3em; }
.fv__photo { position: relative; width: min(56vw, 27dvh, 270px); aspect-ratio: 1; }
.fv__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%;
  clip-path: polygon(100% 0, 100% 70%, 82% 52%, 34% 100%, 0 100%, 0 66%, 48% 18%, 30% 0); }
.fv__outline { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--color-orange); transform: translate(10px, -8px); overflow: visible; }
.fv__copy { font-family: var(--font-head); font-weight: 800; font-size: 3.05em; line-height: 1.22; letter-spacing: 0.01em; }
.fv__sub { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 1.2em; color: var(--color-navy); margin-bottom: 0.3em; }

.fv__sign { font-family: var(--font-en); font-weight: 500; font-size: 0.85em; letter-spacing: 0.16em; color: var(--color-ink-soft); display: flex; align-items: center; gap: 10px; margin-top: 0.4em; }
.fv__sign::before { content: ""; width: 28px; height: 1px; background: var(--color-orange); }

.fv__photo img { opacity: 0; transform: translate(-14%, 14%); transition: opacity 500ms linear, transform 1000ms var(--ease-out); }
.fv__photo.is-on img { opacity: 1; transform: none; }
.fv__outline { opacity: 0; transition: opacity 600ms linear 300ms, transform 1000ms var(--ease-out) 300ms; transform: translate(-6px, 6px); }
.fv__photo.is-on .fv__outline { opacity: 1; transform: translate(10px, -8px); }

.page--empathy .ttl .q { color: var(--color-orange); }
.voices { display: grid; gap: 0.55em; margin-bottom: 0.6em; }
.voice { --x: 0; padding-left: calc(var(--x) * 1em); }
.voice:nth-child(2) { --x: 1.2; }
.voice:nth-child(3) { --x: 2.4; }
.voice__in {
  position: relative; display: inline-block; padding: 0.42em 0.9em 0.42em 0.9em;
  border: 1px solid var(--color-on-dark-line); font-weight: 500; line-height: 1.6; background: rgb(255 255 255 / 0.04);
}

.voice__in::after { content: ""; position: absolute; right: -1px; top: -7px; width: 12px; height: 7px; background: var(--color-orange); clip-path: polygon(0 100%, 100% 0, 100% 100%); }
.voice { opacity: 0; transform: translate(-10px, 10px); transition: opacity 500ms linear, transform 800ms var(--ease-out); }
.voice.is-on { opacity: 1; transform: none; }
.page--empathy .body { color: var(--color-on-dark-soft); }
.page--empathy .body--close { color: #fff; font-weight: 700; margin-top: 0.3em; }

.page--vision .ttl { font-size: 1.75em; }

.steps { display: grid; gap: 0.5em; align-content: center; }
.step {
  position: relative; display: flex; align-items: baseline; gap: 0.6em; padding: 0.35em 0 0.45em;
  border-bottom: 1px solid var(--color-line); font-weight: 700; line-height: 1.5; letter-spacing: -0.01em;
}
.step:nth-child(2) { margin-left: 0.5em; }
.step:nth-child(3) { margin-left: 1em; }
.step__no { flex: none; font-family: var(--font-en); font-weight: 600; font-size: 0.9em; color: var(--color-orange); letter-spacing: 0.04em; }
.step .dot { display: none; }
.step { opacity: 0; transform: translate(-10px, 8px); transition: opacity 500ms linear, transform 800ms var(--ease-out); }
.step.is-on { opacity: 1; transform: none; }

.page--vision .close { color: var(--color-navy); }

.nextbtn {
  position: absolute; right: 16px; bottom: 14px; z-index: 16;
  display: inline-flex; align-items: center; gap: 12px; padding: 6px 6px 6px 14px; min-height: 46px;
  background: var(--color-navy); color: #fff; overflow: hidden; isolation: isolate;
  font-weight: 700; font-size: 12px; line-height: 1.25; transition: opacity 300ms linear;
}
.nextbtn small { display: block; font-family: var(--font-en); font-weight: 500; font-size: 9px; letter-spacing: 0.24em; color: var(--color-orange); }
.nextbtn__ar { display: grid; place-items: center; width: 34px; height: 34px; background: var(--color-orange); }
.nextbtn__ar svg { width: 16px; height: 16px; animation: rise 1.6s var(--ease-in-out) infinite; }
.nextbtn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--color-orange); transform: scaleX(0); transform-origin: 0 50%; transition: transform 420ms var(--ease-out); }
@media (hover: hover) { .nextbtn:hover::before { transform: scaleX(1); } .nextbtn:hover small { color: #fff; } }
.column[data-tone="dark"] .nextbtn { background: #fff; color: var(--color-navy); }
.column[data-page="top"] .nextbtn, .column.is-last .nextbtn { opacity: 0; pointer-events: none; }

@media (min-width: 960px) {
  .stage { grid-template-columns: minmax(0, 1fr) var(--col) minmax(0, 1fr); }
  .column { box-shadow: 0 0 0 1px var(--color-line), 0 20px 60px rgb(29 48 74 / 0.1); }
  .rail { position: relative; display: grid; place-items: center; height: 100dvh; padding: 32px; }
  .rail__vert { position: absolute; top: 50%; left: 26px; writing-mode: vertical-rl; transform: translateY(-50%); font-family: var(--font-en); font-weight: 500; font-size: 11px; letter-spacing: 0.32em; color: var(--color-ink-soft); }
  .rail__vert--r { left: auto; right: 26px; }
  .rail-logo { display: grid; justify-items: start; gap: 16px; width: min(100%, 300px); }
  .rail-logo__img { width: 100%; height: auto; }
  .rail-logo__en { font-family: var(--font-en); font-weight: 500; font-size: 14px; letter-spacing: 0.28em; }
  .rail-logo__en em { color: var(--color-orange); }
  .rail-logo__jobs { padding-top: 14px; border-top: 1px solid var(--color-line); font-weight: 700; font-size: 14px; line-height: 1.8; }
  .rail-side { width: min(100%, 280px); display: grid; }
  .rail-side__label { font-family: var(--font-en); font-weight: 500; font-size: 12px; letter-spacing: 0.24em; color: var(--color-orange); }
  .rail-side__concept { margin-top: 8px; font-family: var(--font-head); font-weight: 800; font-size: 30px; line-height: 1.35; color: var(--color-navy); }
  .rail-side__page { margin-top: 32px; display: flex; align-items: baseline; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--color-navy); font-family: var(--font-en); font-weight: 500; font-size: 13px; letter-spacing: 0.12em; }
  .rail-side__now { font-size: 40px; line-height: 1; color: var(--color-orange); }
  .rail-side__btns { margin-top: 24px; display: grid; gap: 12px; }
  .btn {
    position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 54px;
    font-weight: 700; font-size: 16px; letter-spacing: 0.08em; border: 1px solid var(--color-navy); overflow: hidden; isolation: isolate; transition: color 300ms linear;
  }
  .btn svg { width: 16px; height: 16px; }
  .btn--line { background: #fff; color: var(--color-navy); }
  .btn--fill { background: var(--color-orange); border-color: var(--color-orange); color: #fff; }
  .btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--color-navy); transform: scaleY(0); transform-origin: 50% 100%; transition: transform 380ms var(--ease-out); }
  .btn:hover { color: #fff; }
  .btn:hover::before { transform: none; }
}

@media (max-height: 620px) {
  .page__inner { gap: 0.75em; }
  .fv__photo { width: min(50vw, 23dvh, 230px); }
  .voices { gap: 0.4em; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

:root { --font-big: "Outfit", "Jost", sans-serif; }

.stage { background: linear-gradient(160deg, #ffffff 0%, #eef2f7 100%); }
.page[data-tone="light"] {
  background:
    radial-gradient(120% 60% at 100% 0%, rgb(244 122 54 / 0.10) 0%, transparent 55%),
    radial-gradient(90% 50% at 0% 100%, rgb(29 48 74 / 0.07) 0%, transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #ffffff 45%, #eef2f7 100%);
}
.page[data-tone="dark"] {
  background:
    linear-gradient(115deg, transparent 38%, rgb(255 255 255 / 0.06) 48%, transparent 58%),
    radial-gradient(80% 50% at 100% 0%, rgb(244 122 54 / 0.18) 0%, transparent 60%),
    linear-gradient(160deg, #2a4466 0%, #1d304a 50%, #15243a 100%);
}

@keyframes drift-up { 0% { transform: translate(-6%, 22%) rotate(-4deg); } 50% { transform: translate(0, 0) rotate(0); } 100% { transform: translate(6%, -22%) rotate(4deg); } }

.fv__top { position: relative; display: block; height: min(31dvh, 62vw, 290px); margin-bottom: 0.2em; }
.fv__big { position: absolute; left: -4px; bottom: -0.12em; z-index: 3; margin: 0;
  font-family: var(--font-big); font-weight: 700; font-size: min(22vw, 106px); line-height: .82; letter-spacing: -0.03em;
  color: transparent; -webkit-text-stroke: 1.5px var(--color-navy); }
.fv__big::first-letter { color: var(--color-orange); -webkit-text-stroke: 0; }
.fv__en { position: absolute; right: 0; bottom: 0; z-index: 3; margin: 0; padding: 0; text-align: right; font-family: var(--font-big); font-weight: 500; font-size: 0.95em; line-height: 1.15; color: var(--color-orange); }
.fv__photo { position: absolute; right: 0; top: 0; width: min(52vw, 26dvh, 250px); }
.fv__photo2 { position: absolute; left: 6%; top: 4%; width: min(30vw, 15dvh, 140px); aspect-ratio: 4 / 5; margin: 0; z-index: 2;
  border-radius: 10px; overflow: hidden; box-shadow: 0 8px 22px rgb(29 48 74 / .18); rotate: -7deg; }
.fv__photo2 img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fv__photo2 { opacity: 0; translate: 0 48px; transition: opacity .5s linear, translate .8s cubic-bezier(.34, 1.56, .64, 1); }
.fv__photo2.is-on { opacity: 1; translate: 0 0; animation: bob 7s ease-in-out 1s infinite alternate; }
@keyframes bob { from { transform: translateY(0); } to { transform: translateY(-8px); } }
.fv__copy { font-size: 2.9em; }

@keyframes flow-up { from { transform: translateY(0); } to { transform: translateY(-50%); } }

.ln.rv { transform: translateY(1.4em); transition: clip-path 600ms cubic-bezier(.22, 1, .36, 1), transform 600ms cubic-bezier(.34, 1.4, .64, 1), opacity 250ms linear; }
.voice, .step { transform: translate(-24px, 24px); transition: opacity 400ms linear, transform 600ms cubic-bezier(.34, 1.4, .64, 1); }

.lane__line { stroke-width: 3.6; stroke: url(#lane-grad); }
.lane__head path { stroke-width: 3.4; }
@media (prefers-reduced-motion: reduce) { .fl, .bg-en, .fv__photo2.is-on { animation: none !important; } }

.fv__big { color: var(--color-navy); -webkit-text-stroke: 0; }
.fv__en { display: none; }

.fv__big { opacity: 1 !important; clip-path: none !important; transform: none !important; }
.fv__big b { display: inline-block; font-weight: inherit; opacity: 0; transform: translate(-0.35em, 0.6em) rotate(-8deg) scale(.8);
  transition: opacity .25s linear, transform .7s cubic-bezier(.34, 1.56, .64, 1); transition-delay: calc(var(--i) * 90ms + 150ms); }
.fv__big.is-on b { opacity: 1; transform: translate(calc(var(--i) * -0.02em), calc(var(--i) * -0.035em)); }  

.fv__photo2 { -webkit-mask-image: radial-gradient(130% 120% at 50% 40%, #000 55%, transparent 100%); mask-image: radial-gradient(130% 120% at 50% 40%, #000 55%, transparent 100%); box-shadow: none; }

.page--fv::before, .page--vision::before, .page--empathy::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-repeat: no-repeat; background-size: 100% 100%; }
.page--fv::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M-10 92 C 20 70, 45 96, 70 70 S 100 40, 115 30 L115 48 C 95 58, 80 88, 55 92 S 15 96, -10 110Z' fill='%231d304a' fill-opacity='.05'/%3E%3Cpath d='M-10 84 C 25 62, 50 88, 75 60 S 105 30, 115 22' fill='none' stroke='%23f47a36' stroke-opacity='.28' stroke-width='.25'/%3E%3Cpath d='M-10 88 C 25 66, 52 92, 77 64 S 106 34, 115 26' fill='none' stroke='%231d304a' stroke-opacity='.14' stroke-width='.2'/%3E%3C/svg%3E"); }
.page--vision::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M-10 100 C 25 80, 50 104, 80 82 S 105 70, 115 64 L115 110 L-10 110Z' fill='%23e3e9f1' fill-opacity='.8'/%3E%3Cpath d='M-10 94 C 25 74, 50 98, 80 76 S 105 64, 115 58' fill='none' stroke='%23f47a36' stroke-opacity='.3' stroke-width='.25'/%3E%3C/svg%3E"); }
.page--empathy::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M-10 30 C 20 10, 50 40, 75 18 S 105 -4, 115 -8' fill='none' stroke='%23ffffff' stroke-opacity='.08' stroke-width='6'/%3E%3Cpath d='M-10 64 C 25 44, 55 76, 80 52 S 108 28, 115 22' fill='none' stroke='%23ffffff' stroke-opacity='.06' stroke-width='10'/%3E%3Cpath d='M-10 100 C 30 82, 60 104, 85 86 S 108 74, 115 70' fill='none' stroke='%23f47a36' stroke-opacity='.25' stroke-width='.3'/%3E%3C/svg%3E"); }

.page--empathy .page__inner { position: relative; }
.page--empathy::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 26px; z-index: 1; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M0 6 C 25 0, 50 12, 75 4 S 100 2, 100 2 L100 10 L0 10Z' fill='%23ffffff' fill-opacity='.10'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%; }

.voices { gap: 0.9em; margin-block: .2em .8em; }
.voice { padding-left: 0; }
.voice__in { font-family: "Zen Kurenaido", var(--font-body); font-size: 1.12em; font-weight: 400; line-height: 1.45; color: #fff;
  border: 0; padding: .55em 2.2em .55em .9em; background: rgb(62 95 140 / .92);
  clip-path: polygon(0 0, calc(100% - 1.4em) 0, 100% 50%, calc(100% - 1.4em) 100%, 0 100%, .5em 50%); }
.voice__in::after { display: none; }
.voice:nth-child(1) .voice__in { rotate: -5deg; }
.voice:nth-child(2) { margin-left: 1.2em; } .voice:nth-child(2) .voice__in { rotate: -3deg; background: rgb(255 255 255 / .16); }
.voice:nth-child(3) { margin-left: .4em; } .voice:nth-child(3) .voice__in { rotate: -6deg; background: var(--color-orange); }
.voice.is-on .voice__in { animation: flag-wave 5s ease-in-out infinite alternate; }
.voice:nth-child(2).is-on .voice__in { animation-duration: 6.5s; } .voice:nth-child(3).is-on .voice__in { animation-duration: 4.2s; }
@keyframes flag-wave { 0% { transform: translate(0, 0); } 100% { transform: translate(4px, -6px); } }

.page--empathy .ttl { margin-bottom: .3em; }

.vband { position: relative; margin: 0 -23px .4em; height: min(22dvh, 44vw, 210px); }
.vband__photo { position: absolute; inset: 0; margin: 0; }
.vband__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block;
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%), linear-gradient(90deg, transparent 0%, #000 18%); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(180deg, #000 55%, transparent 100%), linear-gradient(90deg, transparent 0%, #000 18%); mask-composite: intersect; }
.vband__en { position: absolute; left: 23px; top: 4px; writing-mode: vertical-rl; margin: 0; font-family: var(--font-big); font-weight: 600; font-size: .8em; letter-spacing: .3em; color: var(--color-navy); }
   
.vband__sub { position: absolute; right: 18px; bottom: -14px; width: 26%; aspect-ratio: 1; margin: 0; border-radius: 10px; overflow: hidden; rotate: -6deg;
  border: 3px solid #fff; box-shadow: 0 6px 16px rgb(29 48 74 / .2); }
.vband__sub img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vband { opacity: 0; transition: opacity .6s linear; }
.vband.is-on { opacity: 1; }
.vband .vband__photo img { transform: scale(1.12); transition: transform 1.6s cubic-bezier(.22, 1, .36, 1); }
.vband.is-on .vband__photo img { transform: none; }

.vband .vband__sub { translate: 0 30px; opacity: 0; transition: translate .8s cubic-bezier(.34, 1.56, .64, 1) .7s, opacity .3s linear .7s; }
.vband.is-on .vband__sub { translate: 0 0; opacity: 1; animation: bob 7s ease-in-out 1.6s infinite alternate; }

.steps { gap: .3em; margin-block: .1em; }
.step { gap: .55em; align-items: center; border-bottom: 1px solid var(--color-line); }

 
.step:nth-child(2) { margin-left: .6em; } .step:nth-child(3) { margin-left: 1.2em; }

.page--vision .close { position: relative; }

@keyframes fly-out { 0% { opacity: 0; transform: translate(-30px, 30px) scale(.6); } 25% { opacity: 1; transform: translate(0, 0) scale(1); } 70% { opacity: 1; transform: translate(0, 0) scale(1); } 100% { opacity: 0; transform: translate(60px, -60px) scale(.8); } }
@media (prefers-reduced-motion: reduce) { .voice.is-on .voice__in, .fly-ar.is-on, .vband.is-on .vband__sub { animation: none !important; } }
.fv__big b:first-child { color: var(--color-orange); }

.fv__big.is-on b { transform: none; }                       
        
.page--fv::before { display: none; }                          

.page--empathy::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M-10 104 C 30 86, 60 108, 85 90 S 108 78, 115 74 L115 110 L-10 110Z' fill='%23ffffff' fill-opacity='.05'/%3E%3C/svg%3E"); }

.page--vision::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M-10 104 C 25 86, 50 108, 80 88 S 105 78, 115 72 L115 110 L-10 110Z' fill='%23e3e9f1' fill-opacity='.8'/%3E%3C/svg%3E"); }

.vband__sub { bottom: 8px; width: 22%; }

@media (max-height: 620px) { .vband { height: min(15dvh, 40vw); }  }
@media (max-height: 620px) { .vband { height: 10dvh; margin-bottom: .2em; } .vband__en { font-size: .65em; letter-spacing: .2em; } .page--vision .ttl { margin-bottom: .2em; } }
@media (max-height: 620px) { .page--vision .page__inner { gap: .55em; justify-content: flex-start; } }
@media (max-height: 620px) { .vband__sub { width: auto; height: 86%; bottom: 7%; } .page--vision .page__inner { justify-content: center; } }

:root { --fv-ph: min(46vw, 22dvh, 230px); --fv-big: min(22vw, 106px); }
.fv__top { height: calc(var(--fv-ph) + var(--fv-big) * .86); }
.fv__photo { width: var(--fv-ph); }
.fv__photo2 { width: min(28vw, 13dvh, 130px); top: 2%; }
.fv__big { font-size: var(--fv-big); }
.fv__top { height: calc(var(--fv-ph) + var(--fv-big) * .98); }

.fv__top { flex: none; }
:root { --fv-ph: min(42vw, 17dvh, 210px); }

.voices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; align-items: end; margin: .4em 0 1em; }
.voice { margin: 0 !important; padding: 0; }
.voice:nth-child(1) { margin-top: 2.6em !important; }
.voice:nth-child(2) { margin-top: 1.3em !important; }
.voice__in {
  position: relative; display: flex; align-items: center; min-height: 8.6em; padding: 1.1em .7em .9em .8em; box-sizing: border-box;
  font-family: "Zen Kurenaido", var(--font-body); font-size: 1em; line-height: 1.5; color: #fff; text-align: left; word-break: auto-phrase;
  background: #3e5f8c; border-radius: 4px; clip-path: none; rotate: -7deg;
}

.voice__in::after { content: ""; display: block; position: absolute; right: -10px; top: -12px; width: 30px; height: 30px; background: inherit;
  clip-path: polygon(100% 0, 100% 100%, 0 0); border-radius: 0; }
.voice:nth-child(2) .voice__in { background: rgb(255 255 255 / .18); rotate: -5deg; }
.voice:nth-child(3) .voice__in { background: var(--color-orange); rotate: -8deg; }

.voice { opacity: 0; transform: translate(-18px, 26px); transition: opacity .4s linear, transform .7s cubic-bezier(.34, 1.56, .64, 1); }
.voice.is-on { opacity: 1; transform: none; }
.voice.is-on .voice__in { animation: flag-wave 4.5s ease-in-out infinite alternate; }
@keyframes flag-wave { 0% { transform: translate(0, 0) skewY(0); } 100% { transform: translate(2px, -5px) skewY(-1.5deg); } }

:root { --fv-ph: min(40vw, 16dvh, 200px); }

.voice__in { clip-path: polygon(0 0, 78% 0, 100% 50%, 78% 100%, 0 100%, 9% 50%); border-radius: 0; padding: 1em 1.7em 1em 1.05em; min-height: 7.8em; }
.voice__in::after { display: none; }
.voice:nth-child(1) .voice__in { rotate: -14deg; }
.voice:nth-child(2) .voice__in { rotate: -14deg; }
.voice:nth-child(3) .voice__in { rotate: -14deg; }
.voice:nth-child(1) { margin-top: 0 !important; translate: 0 2.4em; }
.voice:nth-child(2) { margin-top: 0 !important; translate: 0 1.2em; }
.voice:nth-child(3) { translate: 0 0; }
.voices { margin-bottom: 2.4em; column-gap: 2px; }
.voice__in { padding: .95em 2.5em .95em 1.15em; font-size: .94em; line-height: 1.45; min-height: 8.2em; }
.voice__in { font-size: .86em; padding-right: 2.6em; }
@media (max-height: 620px) { :root { --fv-ph: min(34vw, 13dvh, 160px); --fv-big: min(18vw, 84px); } .fv__photo2 { width: min(22vw, 10dvh, 100px); } }
@media (max-height: 620px) { .page--fv .page__inner { gap: .6em; } }
@media (max-height: 620px) { :root { --fv-ph: min(32vw, 11.5dvh, 150px); } }
@media (max-height: 620px) { .page--fv .page__inner { justify-content: flex-start; padding-top: calc(var(--header-h) + var(--lane-h)); } }

.fv__photo { width: min(calc(var(--fv-ph) * 1.6), 62%); aspect-ratio: 1.6; }

 .vband__sub { right: auto; left: 31%; }

.fv__mark { position: absolute; left: -2px; bottom: calc(var(--fv-big) * -0.06); width: calc(100% + 4px); height: calc(var(--fv-big) * 1.05); z-index: 4; overflow: visible; pointer-events: none; }
.fv__mark path { fill: none; stroke: var(--color-orange); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; }
.fv__big.is-on ~ .fv__mark .fv__mark-run { animation: mark-draw .55s cubic-bezier(.65, 0, .35, 1) forwards, mark-fade .5s linear 1.5s forwards; }
.fv__big.is-on ~ .fv__mark .fv__mark-head { animation: mark-draw .2s ease-out .5s forwards; }
@keyframes mark-draw { to { stroke-dashoffset: 0; } }
@keyframes mark-fade { to { opacity: 0; } }

.fv__big b { opacity: 0; transform: translateY(.35em); clip-path: inset(100% 0 0 0); transition: opacity .2s linear, transform .45s cubic-bezier(.22, 1, .36, 1), clip-path .45s cubic-bezier(.22, 1, .36, 1); transition-delay: calc(var(--i) * 70ms + 120ms); }
.fv__big.is-on b { opacity: 1; transform: none; clip-path: inset(-10% -5% -10% -5%); }

.rw { background-image: linear-gradient(90deg, var(--rw-to, var(--color-navy)) 0 50%, var(--rw-from, #b9c2ce) 50% 100%); background-size: 200% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text; color: transparent; transition: background-position .9s cubic-bezier(.65, 0, .35, 1) .55s; }
.ln.is-on .rw { background-position: 0 0; }
.fv__copy .rw { --rw-to: var(--color-orange); --rw-from: #d6dbe2; }

.page--empathy .rw { --rw-to: #ffffff; --rw-from: #5d6e86; font-weight: 700; }

.voice__in { background: #4a5b73; color: #dfe5ee; rotate: 9deg !important; }
.voice:nth-child(2) .voice__in { background: #3f4f66; rotate: 11deg !important; }
.voice:nth-child(3) .voice__in { background: #56677f; rotate: 13deg !important; }
.voice:nth-child(1) { translate: 0 0 !important; }
.voice:nth-child(2) { translate: 0 1.1em !important; }
.voice:nth-child(3) { translate: 0 2.2em !important; }        
.voice.is-on .voice__in { animation: flag-droop 5s ease-in-out infinite alternate; }
@keyframes flag-droop { 0% { transform: translate(0, 0) skewY(0); } 100% { transform: translate(1px, 4px) skewY(2deg); } }
.voices { margin-bottom: 3em; }
.voice { opacity: 0; transform: translate(-10px, -16px); }
.voice.is-on { opacity: 1; transform: none; }

.page--empathy .body--close { position: relative; padding-left: 2.1em; }

.page--empathy .page__inner { position: relative; }

.step { color: #b9c2ce; transition: color .8s ease .35s, opacity .4s linear, transform .6s cubic-bezier(.34, 1.4, .64, 1); }
.step.is-on { color: var(--color-navy); }

@media (prefers-reduced-motion: reduce) { .rw { transition: none; background-position: 0 0; } .fv__mark path { stroke-dashoffset: 0; }  }

.page--empathy .ttl { position: relative; }

@keyframes close-draw { to { stroke-dashoffset: 0; } }

.page--fv::before, .page--vision::before, .page--empathy::before { background-image: none !important; }
.fv__mark-head { display: none; }

.bg-graph { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 78%; z-index: 0; pointer-events: none; overflow: visible; }
.bg-graph__area { fill: var(--g-area, #1d304a); opacity: 0; transition: opacity 1.2s ease .6s; }
.bg-graph__line { fill: none; stroke: var(--g-line, #f47a36); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s cubic-bezier(.65, 0, .35, 1); }
.bg-graph.is-on .bg-graph__area { opacity: var(--g-op, .05); }
.bg-graph.is-on .bg-graph__line { stroke-dashoffset: 0; }
.page--fv { --g-area: #1d304a; --g-op: .045; --g-line: rgb(244 122 54 / .35); }
.page--empathy { --g-area: #ffffff; --g-op: .07; --g-line: rgb(255 255 255 / .22); }
.page--vision { --g-area: #2f6fb3; --g-op: .06; --g-line: rgb(244 122 54 / .3); }
.page__inner { position: relative; z-index: 1; }

.fv__big.is-on ~ .fv__mark .fv__mark-run { animation: mark-draw .5s cubic-bezier(.65, 0, .35, 1) forwards, mark-fade .25s linear .6s forwards; }
.fv__big b { transition-delay: calc(var(--i) * 70ms + 900ms); }

.page.page--empathy { background: radial-gradient(90% 45% at 100% 0%, rgb(255 255 255 / .16) 0%, transparent 70%), linear-gradient(165deg, #4677bd 0%, #2f5b9e 50%, #244a86 100%); }
.column[data-tone="dark"] .site-header { background: #3a6ab0; }
.voice__in { background: rgb(255 255 255 / .16); color: #fff; rotate: -3deg !important; animation: none !important; }
.voice:nth-child(2) .voice__in { background: rgb(255 255 255 / .12); rotate: 2deg !important; }
.voice:nth-child(3) .voice__in { background: rgb(255 255 255 / .16); rotate: -2deg !important; }
.voice:nth-child(n) { translate: 0 0 !important; }
.voices { margin-bottom: 1.4em; }
.page--empathy .rw { --rw-from: #8fa9cf; }
.page--empathy .body--close { padding-left: 0; }

.page--fv::after, .page--empathy::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 9dvh; max-height: 70px; z-index: 0; pointer-events: none; background: var(--sep) !important; border: 0;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 30' preserveAspectRatio='none'%3E%3Cpath d='M0 30 L0 27 C 30 27, 45 22, 62 14 S 88 3, 100 1 L100 30Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 30' preserveAspectRatio='none'%3E%3Cpath d='M0 30 L0 27 C 30 27, 45 22, 62 14 S 88 3, 100 1 L100 30Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
.page--fv { --sep: linear-gradient(165deg, #3d6fb6, #2b5597); }
.page--empathy { --sep: #e4f0fb; }

.page.page--vision { background: linear-gradient(180deg, #e4f0fb 0%, #f3f8fd 55%, #ffffff 100%); }

.step { translate: 0 0 !important; margin-left: 0 !important; }
.step__no { flex: none; font-family: "Jost", sans-serif; font-weight: 500; font-size: .8em; letter-spacing: .08em; color: var(--color-orange); min-width: 1.8em; }

.page--fv { --g-line: rgb(244 122 54 / .22); }
.page--vision { --g-line: rgb(244 122 54 / .2); }
.page--empathy { --g-line: rgb(255 255 255 / .16); }

.vband__sub { rotate: 0deg !important; border: 0 !important; box-shadow: 0 6px 16px rgb(29 48 74 / .12) !important; border-radius: 12px; overflow: hidden; }

.bg-graph { height: 72%; }
.page--fv { --g-op: .05; }
.bg-graph__line { stroke-width: 1.5; }

.bg-graph__line { display: none; }
.page--fv { --g-area: #2f6fb3; --g-op: .08; }
.page--empathy { --g-area: #ffffff; --g-op: .09; }
.page--vision { --g-area: #2f6fb3; --g-op: .08; }
.bg-graph__area { transform-origin: 100% 100%; transform: scaleY(.6); transition: opacity .9s ease .2s, transform 1.2s cubic-bezier(.22, 1, .36, 1) .2s; }
.bg-graph.is-on .bg-graph__area { transform: none; }

.fv__mark { display: none !important; }
.fv__big b { display: inline-block; opacity: 0; transform: translateY(.6em) scale(.4); clip-path: none !important; transition: none !important; transform-origin: 50% 100%; }
.fv__big.is-on b { animation: up-pop .9s cubic-bezier(.3, 0, .3, 1) both; animation-delay: calc(var(--i) * 90ms + 150ms); }
@keyframes up-pop {
  0%   { opacity: 0; transform: translateY(.6em) scale(.4, .3); }
  30%  { opacity: 1; transform: translateY(-.32em) scale(.9, 1.15); }
  48%  { transform: translateY(0) scale(1.12, .84); }
  64%  { transform: translateY(-.12em) scale(.97, 1.05); }
  80%  { transform: translateY(0) scale(1.03, .97); }
  100% { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .fv__big.is-on b { animation: none; opacity: 1; transform: none; } }

.page.page--empathy { background:
  linear-gradient(118deg, transparent 0 18%, rgb(255 255 255 / .09) 27%, transparent 36%, rgb(0 10 40 / .22) 47%, transparent 57%, rgb(255 255 255 / .07) 66%, transparent 74%, rgb(0 10 40 / .18) 86%, transparent 96%),
  linear-gradient(140deg, transparent 0 40%, rgb(255 255 255 / .06) 52%, transparent 60%),
  radial-gradient(70% 38% at 92% 4%, rgb(255 255 255 / .22) 0%, transparent 70%),
  radial-gradient(80% 50% at 0% 100%, rgb(0 10 40 / .3) 0%, transparent 70%),
  linear-gradient(170deg, #2457a6 0%, #17468f 55%, #123b7c 100%); }
.column[data-tone="dark"] .site-header { background: #2356a4; }

.bokeh { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.bk { position: absolute; display: block; width: var(--w); aspect-ratio: 1.25; background: var(--c); opacity: var(--o, .8);
  clip-path: polygon(0 100%, 100% 0, 62% 100%); filter: blur(var(--b, 6px)); animation: bk-float var(--t, 9s) ease-in-out infinite alternate; }
@keyframes bk-float { from { transform: translate(0, 0) rotate(0deg); } to { transform: translate(6px, -10px) rotate(4deg); } }

.page--empathy .bk--1 { --w: 74px; --c: #ffffff; --o: .22; --b: 7px; right: -18px; top: 44%; }
.page--empathy .bk--2 { --w: 110px; --c: #7fb0ee; --o: .3; --b: 9px; left: -40px; bottom: 9%; --t: 11s; }

.page--vision .bk--1 { --w: 70px; --c: #8fbbe8; --o: .45; --b: 6px; right: -16px; top: 46%; }
.page--vision .bk--2 { --w: 54px; --c: #f47a36; --o: .3; --b: 6px; left: -18px; bottom: 12%; --t: 10s; }

@media (prefers-reduced-motion: reduce) { .bk { animation: none; } }

.fv__copy { margin-top: .55em; }

.bokeh { display: none !important; }
.page--empathy .voices { display: block; margin: 1.1em 0 1.3em; padding: 0; }
.emp-mid { display: grid; grid-template-columns: 1fr 27%; gap: 0 10px; align-items: start; margin: 1em 0 1.5em; }
.emp-mid .voices { margin: 0 !important; display: grid !important; grid-template-columns: 1fr !important; gap: .6em !important; }
.page--empathy .voice { translate: 0 0 !important; padding: 0 !important; position: relative; }
.page--empathy .voice__in { display: block; position: relative; font-family: var(--font-body) !important; font-weight: 500 !important; font-size: .9em !important; line-height: 1.55 !important;
  color: var(--color-navy) !important; background: rgb(255 255 255 / .94) !important; clip-path: none !important; rotate: 0deg !important; animation: none !important;
  padding: .55em .8em .55em .9em !important; border-radius: 4px; }

.page--empathy .voice__in::after { content: ""; position: absolute; right: -7px; top: 50%; width: 8px; height: 12px; translate: 0 -50%; background: inherit; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.voice__no { display: block; font-family: "Jost", sans-serif; font-size: .62em; letter-spacing: .16em; color: rgb(255 255 255 / .6); margin-bottom: .25em; }

.emp-photos { position: relative; height: 100%; min-height: 9.5em; }
.ep { position: absolute; margin: 0; border-radius: 4px; overflow: hidden; }
.ep img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ep--1 { right: 0; top: 0; width: 100%; aspect-ratio: 4 / 5; }
.ep--2 { right: 34%; top: 58%; width: 72%; aspect-ratio: 4 / 5; }

.ep { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .8s cubic-bezier(.22, 1, .36, 1); }
.ep--2 { transition-delay: .25s; }
.emp-photos.is-on .ep { opacity: 1; transform: none; }

.bokeh { display: block !important; }
.bk { clip-path: none !important; background: none !important; filter: blur(var(--b, 6px)); opacity: var(--o, .2); }
.bk b { position: absolute; inset: 0; background: var(--c); clip-path: polygon(0 100%, 100% 0, 62% 100%); }

.page--empathy .bk--1 { --w: 50px; --c: #ffffff; --o: .16; --b: 6px; right: 14px; top: 26%; }
.page--empathy .bk--2 { --w: 70px; --c: #ffffff; --o: .1; --b: 8px; left: -24px; bottom: 6%; top: auto; right: auto; }
.page--vision .bk--1 { --w: 52px; --c: #8fbbe8; --o: .35; --b: 6px; right: 10px; top: calc(var(--header-h) + var(--lane-h) + 4px); }
.page--vision .bk--2 { --w: 44px; --c: #f47a36; --o: .16; --b: 6px; left: -10px; bottom: 5%; top: auto; }

.page--empathy .voice, .page--empathy .voice__in { height: auto !important; min-height: 0 !important; width: auto !important; aspect-ratio: auto !important; }
.page--empathy .voice__in { background: rgb(255 255 255 / .13) !important; color: #fff !important; border: 1px solid rgb(255 255 255 / .22); padding: .5em .8em !important; }
.page--empathy .voice__in::after { background: rgb(255 255 255 / .13); right: -8px; }
.voice__no { margin-bottom: .15em; }
.emp-mid .voices { gap: .45em !important; }

.bka { position: absolute; display: block; width: var(--w); aspect-ratio: 129 / 106; color: var(--c); opacity: var(--o, .3); filter: blur(var(--b, 4px));
  animation: bk-float var(--t, 9s) ease-in-out infinite alternate; }
.bka svg { display: block; width: 100%; height: 100%; }

.page--empathy .bk--2 { bottom: 1%; }

.bka { rotate: var(--r, 0deg); }

.bka { aspect-ratio: 1; }

:root { --fv-ph: min(37vw, 14.8dvh, 185px); }
@media (max-height: 620px) { :root { --fv-ph: min(30vw, 11dvh, 140px); } }
.fv__copy { margin-top: .45em; }
.ep--2 { top: auto; bottom: 0; width: 64%; right: 30%; } .emp-photos { min-height: 0; } .ep--1 { width: 92%; }

.fv__big b { color: transparent !important; -webkit-background-clip: text; background-clip: text;
  background-image: linear-gradient(160deg, #3a5a86 0%, #1d304a 55%, #142238 100%); }
.fv__big b:first-child { background-image: linear-gradient(160deg, #ffb07a 0%, #f47a36 50%, #e0581f 100%); }

.fv__copy > .ln:first-child { color: transparent; -webkit-background-clip: text; background-clip: text;
  background-image: linear-gradient(100deg, #1d304a 0%, #2f4f7c 100%); }

.fv__copy .rw { background-image: linear-gradient(90deg, transparent 0 50%, #d6dbe2 50% 100%), linear-gradient(100deg, #f47a36 0%, #ff9b5a 55%, #e0581f 100%);
  background-size: 200% 100%, 100% 100%; background-position: 100% 0, 0 0; background-repeat: no-repeat; }
.ln.is-on .fv__copy .rw, .fv__copy .ln.is-on .rw { background-position: 0 0, 0 0; }

.fv__big b.fv__e { position: relative; background-image: linear-gradient(90deg, #22385a 0 41%, transparent 41%), linear-gradient(180deg, #3a5a86 0%, #1d304a 42%, transparent 42% 61%, #1d304a 61%, #142238 100%); }
.e-ar { position: absolute; left: 47%; top: 40.5%; width: 66%; height: 21.5%; background: linear-gradient(90deg, #ff9b5a, #f47a36 60%, #e0581f);
  clip-path: polygon(0 26%, 58% 26%, 58% 0, 100% 50%, 58% 100%, 58% 74%, 0 74%); }
.fv__big b.fv__e { background-image: linear-gradient(180deg, #3a5a86 0%, #1d304a 50%, #142238 100%), linear-gradient(180deg, #3a5a86 0%, #1d304a 42%, transparent 42% 61%, #1d304a 61%, #142238 100%);
  background-size: 41% 100%, 100% 100%; background-repeat: no-repeat; }

.bka { opacity: 0; transform: translate(-14px, 14px) scale(.55); animation: none; transition: opacity .7s ease, transform 1s cubic-bezier(.22, 1, .36, 1); transition-delay: var(--d, 0ms); }
.page--fv.is-active .bka { opacity: var(--o); transform: none; animation: bk-float var(--t, 9s) ease-in-out 1.8s infinite alternate; }
.fv__big.is-on b { animation-delay: calc(var(--i) * 90ms + 100ms); }
.e-ar { transform-origin: 0 50%; transform: scaleX(0); transition: transform .5s cubic-bezier(.34, 1.56, .64, 1) 1.15s; }
.fv__big.is-on .e-ar { transform: none; }

.shout { display: inline-block; font-weight: 700; font-size: 1.36em; letter-spacing: .02em; line-height: 1.4; color: var(--color-navy); white-space: nowrap; transform-origin: 0 100%; }
.shout__q { font-family: var(--font-head); font-weight: 800; color: var(--color-orange); font-size: 1.18em; }
.shout__q:first-child { margin-left: -.42em; }
.ln.is-on .shout { animation: up-pop .9s cubic-bezier(.3, 0, .3, 1) both .1s; }
.ln:not(.is-on) .shout { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .ln.is-on .shout { animation: none; } }

.shout { display: block; font-family: var(--font-head); font-weight: 800; font-size: 1.42em; line-height: 1.45; letter-spacing: .03em; color: var(--color-navy); margin-top: .3em; }
.shout__q { font-family: inherit; font-weight: inherit; color: inherit; font-size: 1em; }
.shout__q:first-child { margin-left: -.5em; }

.page--empathy .body--close { font-family: var(--font-head); font-weight: 700; font-size: 1.28em; line-height: 1.6; letter-spacing: .03em; color: #fff; }
.page--empathy .body--close .ln { display: block; }
.page--empathy .rw { background: none !important; color: inherit !important; -webkit-text-fill-color: currentColor; font-weight: inherit; }
@media (max-height: 620px) { .shout { font-size: 1.22em; margin-top: .1em; } .page--empathy .body--close { font-size: 1.12em; } }

.page--fv .bg-graph, .page--empathy .bg-graph { display: none; }

.shout { font-size: 1.62em; line-height: 1.35; margin-top: .25em; }
.page--empathy .body--close { font-size: 1.5em; line-height: 1.5; }
.emp-mid { margin: .8em 0 1.1em; }
.page--fv .body + .body { margin-top: .55em; }
@media (max-height: 620px) { .shout { font-size: 1.32em; } .page--empathy .body--close { font-size: 1.24em; } }

:root { --fv-ph: min(35vw, 13.6dvh, 175px); }
@media (max-height: 620px) { :root { --fv-ph: min(28vw, 10dvh, 130px); } }
@media (max-height: 760px) { .bokeh--ar .bka:nth-child(7), .bokeh--ar .bka:nth-child(8) { display: none; } }
.bokeh--ar .bka:nth-child(8) { display: none; }

.page--empathy .page__inner { position: relative; }
.page--empathy .ttl { max-width: 64%; }
.emp-mid { grid-template-columns: 1fr 33%; }
.emp-photos { position: absolute; right: -4px; top: calc(var(--header-h) + var(--lane-h) - .2em); width: 37%; height: 15.5em; min-height: 0; z-index: 2; }
.ep { background: #fff; padding: 4px; border-radius: 6px; box-shadow: 0 10px 24px rgb(5 20 50 / .32); overflow: visible; }
.ep img { border-radius: 3px; }
.ep--1 { right: 0; left: auto; top: 0; bottom: auto; width: 84%; aspect-ratio: 4 / 5; rotate: 4deg; }
.ep--2 { left: 0; right: auto; top: auto; bottom: 0; width: 66%; aspect-ratio: 4 / 5; rotate: -5deg; }

.ep { opacity: 1; transform: none; clip-path: inset(100% 100% 0 0 round 6px); transition: clip-path .9s cubic-bezier(.65, 0, .35, 1); }
.ep img { transform: scale(1.15); transition: transform 1.4s cubic-bezier(.22, 1, .36, 1); }
.ep--2 { transition-delay: .28s; } .ep--2 img { transition-delay: .28s; }
.emp-photos.is-on .ep { clip-path: inset(-20px -20px -30px -20px round 6px); }
.emp-photos.is-on .ep img { transform: none; }
@media (max-height: 620px) { .emp-photos { height: 12.5em; width: 33%; } .page--empathy .ttl { max-width: 66%; } }

.emp-mid { grid-template-columns: 1fr; }
.page--empathy .voice:first-child { margin-right: 38% !important; }
.page--empathy .voice:not(:first-child) .voice__in::after { display: none; }
.emp-photos { height: auto; aspect-ratio: 1 / 1.18; width: 36%; }
@media (max-height: 620px) { .emp-photos { width: 31%; } .page--empathy .voice:first-child { margin-right: 33% !important; } }
.emp-photos { top: auto; margin-top: calc(var(--ttl-h, 5.4em) * -1 - .3em); }

.page--empathy .ttl { position: relative; max-width: none; }
.page--empathy .ttl .emp-photos { position: absolute; top: -.25em; right: -6px; margin: 0; width: 35%; font-size: 1rem; }
@media (max-height: 620px) { .page--empathy .ttl .emp-photos { width: 30%; } }

.hb, .btn { border-radius: 999px !important; }
.hb { padding-inline: .8em; }

.page--empathy .voices .voice:nth-child(n) .voice__in, .page--empathy .voices .voice:nth-child(n) { rotate: 0deg !important; transform: none !important; translate: 0 0 !important; }
.page--empathy .voice:first-child { margin-right: 0 !important; }
.page--empathy .voice__no { display: none; }
.emp-mid .voices { gap: .55em !important; }
.emp-mid { margin-top: 1.6em; }
.page--empathy .voice { display: flex; align-items: flex-end; gap: 8px; }
.page--empathy .voice::before { content: ""; flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: rgb(255 255 255 / .22) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='9' r='4' fill='%23fff' fill-opacity='.85'/%3E%3Cpath d='M4 21c1-4.5 4.5-6 8-6s7 1.5 8 6' fill='%23fff' fill-opacity='.85'/%3E%3C/svg%3E") center / 70% no-repeat; }
.page--empathy .voice__in { display: inline-block !important; border-radius: 14px 14px 14px 4px !important; background: rgb(255 255 255 / .16) !important; border: 0 !important; }
.page--empathy .voice__in::after { display: none !important; }
.page--empathy .voices .voice:nth-child(2) { margin-left: 16px !important; }
.page--empathy .voices .voice:nth-child(3) { margin-left: 32px !important; }

.page--empathy .voices .voice:first-child .voice__in { max-width: 58%; }

.page--empathy .voice { opacity: 0; transition: opacity .5s ease; }
.page--empathy .voice.is-on { opacity: 1; }
.page--empathy .voice .voice__in { transform: translateY(8px) !important; transition: transform .6s cubic-bezier(.22, 1, .36, 1) !important; }
.page--empathy .voice.is-on .voice__in { transform: none !important; }
.page--empathy .voices .voice:first-child .voice__in { max-width: 50%; }

.emp-photos.is-on .ep { clip-path: inset(-80px -80px -80px -80px round 6px); }
.emp-photos.is-on .ep--2 { animation: card-a 7s cubic-bezier(.65, 0, .35, 1) 2.6s infinite; }
.emp-photos.is-on .ep--1 { animation: card-b 7s steps(1, end) 2.6s infinite; }
@keyframes card-a {
  0%, 38% { translate: 0 0; z-index: 3; }
  45%     { translate: 22% -16%; z-index: 3; }
  46%     { z-index: 1; }
  54%, 88% { translate: 0 0; z-index: 1; }
  95%     { translate: 22% -16%; z-index: 1; }
  96%     { z-index: 3; }
  100%    { translate: 0 0; z-index: 3; }
}
@keyframes card-b { 0% { z-index: 2; } 46% { z-index: 4; } 96% { z-index: 2; } 100% { z-index: 2; } }
.ep--1 { z-index: 2; } .ep--2 { z-index: 3; }
@media (prefers-reduced-motion: reduce) { .emp-photos.is-on .ep { animation: none; } }

.page--empathy .ttl .emp-photos { width: 31%; right: -4px; top: -.1em; }
.emp-mid { margin-top: 2.4em; }
.page--empathy .voices .voice:first-child .voice__in { max-width: 47%; }
@media (max-height: 620px) { .page--empathy .ttl .emp-photos { width: 27%; } .emp-mid { margin-top: 1.6em; } }

.page--vision .close { font-size: 1.5em; line-height: 1.5; letter-spacing: .03em; color: var(--color-navy); margin-top: .5em; }
.page--vision .close .ln { display: block; }

.page--vision .step, .page--vision .step.is-on { color: var(--color-navy) !important; font-family: var(--font-head); font-weight: 800; font-size: 1.08em; }

.vband__sub { width: 31% !important; aspect-ratio: 1; padding: 4px; background: #fff; border-radius: 6px !important; box-shadow: 0 10px 22px rgb(29 48 74 / .22) !important; rotate: 3deg !important; overflow: hidden; bottom: -22px; right: 16px; }
.vband__sub img { border-radius: 3px; }

.vband__sub { left: auto !important; right: 16px !important; }

.body .ln.rv, .fv__sub .ln.rv, .fv__sign .ln.rv { clip-path: none !important; transform: none !important; opacity: 0; transition: opacity 1s ease !important; }
.body .ln.rv.is-on, .fv__sub .ln.rv.is-on, .fv__sign .ln.rv.is-on { opacity: 1; }
.vband__sub { width: 27% !important; bottom: 8px !important; top: auto !important; }

.fv__big b.fv__e { background-size: 38.5% 100%, 100% 100%; }
.e-ar { left: 42%; width: 70%; }

.ln.is-on .shout { animation: none !important; }
.ln:not(.is-on) .shout { opacity: 1; }
.shout { margin-top: .75em; }

:root { --fv-ph: min(33vw, 12.6dvh, 165px); }
@media (max-height: 620px) { :root { --fv-ph: min(26vw, 9.2dvh, 120px); } .shout { margin-top: .5em; } }
@media (max-height: 620px) { :root { --fv-ph: min(28vw, 10.5dvh, 130px); } .shout { font-size: 1.2em; margin-top: .45em; } }
@media (max-height: 620px) { .shout { font-size: 1.12em; margin-top: .4em; } }

.fv__photo2 { height: var(--fv-ph) !important; width: auto !important; aspect-ratio: 480 / 596 !important; top: 3px !important; bottom: auto !important; }

.stage-bokeh { display: none; }
@media (min-width: 900px) {
  .stage-bokeh { display: block; position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
  .sbk { position: absolute; display: block; width: var(--w); aspect-ratio: 1; color: var(--c); opacity: var(--o); filter: blur(var(--b)); rotate: var(--r);
    animation: bk-float var(--t, 12s) ease-in-out infinite alternate; }
  .sbk svg { display: block; width: 100%; height: 100%; }
  .stage > .rail, .stage > .column { position: relative; z-index: 1; }
}
@media (prefers-reduced-motion: reduce) { .sbk { animation: none; } }

.fv__big b.fv__e { background-image: linear-gradient(180deg, #3a5a86 0%, #1d304a 50%, #142238 100%), linear-gradient(180deg, #3a5a86 0%, #1d304a 32%, transparent 32% 74%, #1d304a 74%, #142238 100%); }

.site-header { padding-inline: 23px; }
.header-nav { gap: 8px; }
@media (max-width: 374px) { .site-header { padding-inline: 16px; } .logo { width: 118px; } }
.rail-logo { width: auto; }
.rail-logo__img { width: 172px; height: auto; }

.column[data-page="top"] .site-header { background: var(--color-base); border-color: var(--color-line); }

.page--fv .bka { transition-duration: .5s, .7s; }
.fv__big.is-on b { animation-duration: .7s; animation-delay: calc(var(--i) * 60ms + 60ms); }
.e-ar { transition-delay: .75s; }
.page--fv .body .ln.rv, .page--fv .fv__sub .ln.rv, .page--fv .fv__sign .ln.rv { transition: opacity .6s ease !important; }

.ln.rv { transition-duration: 450ms, 450ms, 200ms !important; }
.body .ln.rv, .fv__sub .ln.rv, .fv__sign .ln.rv { transition: opacity .45s ease !important; }
.ep { transition-duration: .7s; } .ep img { transition-duration: 1s; }
.page--empathy .voice { transition-duration: .35s; } .page--empathy .voice .voice__in { transition-duration: .45s !important; }
.step { transition-duration: .35s, .45s !important; }
.vband { transition-duration: .4s; } .vband .vband__photo img { transition-duration: 1.1s; }
.fv__photo, .fv__photo2 { transition-duration: .5s; }

.fv__photo { isolation: isolate; }
.fv__photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(45deg, #e0581f 0%, #f47a36 45%, #ffb07a 100%);
  clip-path: polygon(100% 0, 100% 70%, 82% 52%, 34% 100%, 0 100%, 0 66%, 48% 18%, 30% 0);
  opacity: 0; transform: none; transition: opacity .4s linear .15s, transform .6s cubic-bezier(.22, 1, .36, 1) .15s; }
.fv__photo.is-on::before { opacity: 1; transform: translate(-12px, 12px); }
.fv__photo.is-on::before { transform: translate(-24px, 10px); }

.fv__photo.is-on::before { transform: translate(10px, -8px); }
.fv__outline { transform: none; }
.fv__photo.is-on .fv__outline { transform: translate(-24px, 10px); }

.fv__photo::before { display: none; }
.fv__outline { transform: translate(-6px, 6px); }
.fv__photo.is-on .fv__outline { transform: translate(10px, -8px); }

@media (max-width: 1200px) { .stage-bokeh .sbk:nth-child(8), .stage-bokeh .sbk:nth-child(15) { display: none; } }

@keyframes up-slide { 0% { opacity: 0; transform: translateX(-.45em); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; } }
.fv__big b { transform: translateX(-.45em); }
.fv__big.is-on b { animation: up-slide .6s cubic-bezier(.22, 1, .36, 1) both; animation-delay: calc(var(--i) * 55ms + 40ms); }
.e-ar { transition-delay: .6s; }

.bka, .sbk { filter: none !important; overflow: visible; }

.bka, .sbk { width: calc(var(--w) * 1.28); margin: calc(var(--w) * -0.14); }
.bka svg, .sbk svg { filter: blur(var(--b)); overflow: visible; }

.site-header { padding-right: 14px; }
@media (max-width: 374px) { .site-header { padding-right: 12px; } }

.bka img, .sbk img { display: block; width: 100%; height: 100%; }
.bka, .sbk { color: inherit; }

.bka, .sbk { width: calc(var(--w) + var(--pad) * 2); margin: calc(var(--pad) * -1); aspect-ratio: 1; }