@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');

:root {
  --black: #282828;
  --red: #b93532;
  --yellow: #e6d056;
  --soft-yellow: #efe6a9;
  --line: #d9d9d9;
  --max: 1000px;
}

html { box-sizing: border-box; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
*, *::before, *::after { box-sizing: inherit; }
body { margin: 0; color: var(--black); background: #fff; font-family: "Noto Sans JP", "Yu Gothic", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; line-height: 1.75; }
img { display: block; max-width: 100%; height: auto; border: 0; }
a { color: inherit; text-decoration: none; transition: .2s ease-out;}
@media (min-width: 641px) {
  a:hover { opacity: 0.7;}
}
#container { width: 100%; overflow: hidden;}

.site-header { position: absolute; top: 16px; left: 24px; z-index: 50; display: flex; align-items: center; gap: 16px; }
.header-logo { width: clamp(128px, 16vw, 254px); }
.header-actions, .hero-buttons, .cta-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pill { display: inline-flex; align-items: center; justify-content: center; min-width: 240px; min-height: 60px; padding: 12px 24px; border-radius: 999px; }
.pill-dark { background: var(--black); }
.pill-red { background: var(--red); }
.header-actions .pill { min-width: initial; min-height: initial; }
.header-actions .pill img { max-width: 106px; }

.section { position: relative; }
.container { position: relative; z-index: 5; width: min(calc(100% - 48px), var(--max)); margin: 0 auto; }
.decor, .dot, .hero-deco, .hero-people, .team-text, .interview-en, .interview-person, .cta-person { position: absolute; pointer-events: none; user-select: none; }
.dot { --dot-min: 32px; --dot-fluid: 4.685vw; z-index: 0; width: max(var(--dot-min), var(--dot-fluid)); max-width: none; height: auto; transform-origin: center; }
.dot-y { --dot-min: 32px; --dot-fluid: 4.685vw; }
.dot-r { --dot-min: 28px; --dot-fluid: 4.100vw; }

.hero { min-height: 100svh; height: 100svh; padding: 0; background: #fff; isolation: isolate; }
.hero::before { content: ""; position: absolute; inset: 0 0 auto; z-index: 0; width: 100%; min-width: 1366px; height: 135svh; background: url("../img/mv_bg.webp") bottom center / cover; mix-blend-mode: luminosity; pointer-events: none; }
.why::after { content: ""; position: absolute; inset: auto 0 0; z-index: 1; height: 220px; background: linear-gradient(180deg, rgba(255,255,255,0), #fff 72%); pointer-events: none; }
.hero-deco { z-index: 1; max-width: none; }
.hero-stage .hero-deco-left { top: -10%; left: -26%; width: 32.5%; min-width: 200px;}
.hero-stage .hero-deco-right { top: 50%; right: -30%; width: 37.4%; min-width: 200px;}
.hero-inner { width: 80%; min-height: 100svh; display: flex; align-items: center; justify-content: center; padding: 40px 0; }
.hero-stage { position: relative; z-index: 5; width: min(90vw, calc(155.87svh - 124.7px)); max-height: calc(100svh - 80px); aspect-ratio: 1082.193 / 694.263; }
.hero-title { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; margin: 0; }
.hero-title img { width: 100%; height: 100%; object-fit: contain; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hero-title svg { display: block; width: 100%; height: 100%; }
.hero-title-svg .title-letter { transform-box: fill-box; transform-origin: center; }
body.is-loading .hero-title-svg .title-letter { opacity: 0; transform: scale(1.34); animation: heroTitleLetterIn .58s cubic-bezier(.16, 1, .3, 1) forwards; animation-delay: var(--letter-delay, 0s); }
body.is-loading .site-header,
body.is-loading .hero-stage .hero-deco,
body.is-loading .hero-stage .hero-person { opacity: 0; transform: translateY(18px) scale(.92); }
body.is-loading .hero > .dot { opacity: 0; transform: scale(0); }
body.is-loading.is-hero-parts-ready .site-header,
body.is-loading.is-hero-parts-ready .hero-stage .hero-deco,
body.is-loading.is-hero-parts-ready .hero-stage .hero-person { animation: heroPartsIn 2s cubic-bezier(.16, 1, .3, 1) forwards; animation-delay: var(--hero-intro-delay, 0s); }
body.is-loading.is-hero-parts-ready .hero > .dot { animation: dotPopIn .68s cubic-bezier(.34, 1.56, .64, 1) both; animation-delay: var(--hero-intro-delay, 0s); }
.js-scroll-reveal.is-scroll-hidden.decor { opacity: 0; transform: translateY(18px) scale(.92); }
.js-scroll-reveal.is-scroll-hidden.dot { opacity: 0; transform: scale(0); }
.js-scroll-reveal.is-scroll-in.decor { animation: heroPartsIn 2s cubic-bezier(.16, 1, .3, 1) both; animation-delay: var(--scroll-reveal-delay, 0s); }
.js-scroll-reveal.is-scroll-in.dot { animation: dotPopIn .68s cubic-bezier(.34, 1.56, .64, 1) both; animation-delay: var(--scroll-reveal-delay, 0s); }

@keyframes heroTitleLetterIn {
  0% { opacity: 0; transform: scale(1.34); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes heroPartsIn {
  0% { opacity: 0; transform: translateY(18px) scale(.92); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes dotPopIn {
  0% { opacity: 0; transform: scale(0); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes heroPeopleSlideIn {
  0% { opacity: 0; transform: translateX(110%) scale(.98); }
  72% { opacity: 1; transform: translateX(-2%) scale(1); }
  100% { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes honestyTitleShake {
  0%, 78%, 100% { transform: translate(0, 0) rotate(0deg); }
  80% { transform: translate(-1px, 1px) rotate(-.8deg); }
  81.5% { transform: translate(1px, -1px) rotate(.8deg); }
  83% { transform: translate(-1px, -1px) rotate(.5deg); }
  84.5% { transform: translate(1px, 1px) rotate(-.5deg); }
  86% { transform: translate(-1px, 0) rotate(-.4deg); }
  87.5% { transform: translate(1px, 0) rotate(.4deg); }
  89% { transform: translate(0, 0) rotate(0deg); }
}

@keyframes honestyPersonIn {
  0% { opacity: 0; transform: translateX(var(--honesty-person-x, -50%)) translateY(42px) scale(.92); }
  100% { opacity: 1; transform: translateX(var(--honesty-person-x, -50%)) translateY(0) scale(1); }
}

@keyframes whyQuestionZoomOut {
  0% { opacity: 0; transform: translateX(-50%) scale(3); }
  100% { opacity: 1; transform: translateX(-50%) scale(1); }
}

@keyframes teamPhotoPulse {
  0%, 72%, 100% { transform: scale(1); }
  84% { transform: scale(1.1); }
}

@keyframes teamPhotoIn {
  0% { opacity: 0; transform: translateY(82px) scale(.96); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes conditionStatPulse {
  0%, 28%, 100% { transform: scale(1); }
  16% { transform: scale(1.3); }
}

@keyframes interviewCardSlideIn {
  0% { opacity: 0; transform: translate(var(--interview-card-x, 0), var(--interview-card-y, 0)); }
  100% { opacity: 1; transform: translate(0, 0); }
}

@keyframes footerPersonSlideIn {
  0% { opacity: 0; transform: translateY(120%) scale(.98); }
  72% { opacity: 1; transform: translateY(-3%) scale(1); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes wipeImageIn {
  100% { opacity: 1; }
}

@keyframes wipeBlockLtr {
  0% { transform-origin: left center; transform: scaleX(0); }
  45% { transform-origin: left center; transform: scaleX(1); }
  46% { transform-origin: right center; transform: scaleX(1); }
  100% { transform-origin: right center; transform: scaleX(0); }
}

@keyframes wipeBlockRtl {
  0% { transform-origin: right center; transform: scaleX(0); }
  45% { transform-origin: right center; transform: scaleX(1); }
  46% { transform-origin: left center; transform: scaleX(1); }
  100% { transform-origin: left center; transform: scaleX(0); }
}

@media (prefers-reduced-motion: reduce) {
  body.is-loading .hero-title-svg .title-letter,
  body.is-loading .site-header,
  body.is-loading .hero > .dot,
  body.is-loading .hero-stage .hero-deco,
  body.is-loading .hero-stage .hero-person,
  .js-scroll-reveal.is-scroll-hidden.decor,
  .js-scroll-reveal.is-scroll-hidden.dot,
  .js-scroll-reveal.is-scroll-in.decor,
  .js-scroll-reveal.is-scroll-in.dot,
  .js-hero-people-reveal.is-hero-people-hidden,
  .js-hero-people-reveal.is-hero-people-in,
  .js-team-photo-reveal.is-team-photo-hidden,
  .js-team-photo-reveal.is-team-photo-in,
  .js-honesty-person-reveal.is-honesty-person-hidden,
  .js-honesty-person-reveal.is-honesty-person-in,
  .js-why-question-reveal.is-why-question-hidden,
  .js-why-question-reveal.is-why-question-in,
  .js-interview-card-reveal.is-interview-card-hidden,
  .js-interview-card-reveal.is-interview-card-in,
  .js-footer-person-reveal.is-footer-person-hidden,
  .js-footer-person-reveal.is-footer-person-in,
  .honesty-title,
  .team-photo,
  .condition-stats img,
  .js-wipe-reveal.is-wipe-hidden > img,
  .js-wipe-reveal.is-wipe-in > img { animation: none; opacity: 1; transform: none; filter: none; }
  .js-wipe-reveal::before { animation: none; opacity: 0; }
}

.hero-change { position: relative; z-index: 5; }
.change { position: relative; padding: 0; }
.lattice { position: relative;}
.lattice::before { content: ""; position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; background: #FFF url("../img/lattice.webp") top center repeat; pointer-events: none; }
.change::after { content: ""; position: absolute; right: 0; bottom: 0; z-index: -1; width: 42%; height: 260px; background: #EAC2C1; border-top-left-radius: 50px; pointer-events: none; }
.change-stage { position: relative; width: min(100%, 1600px); margin: 0 auto; padding-top: clamp(56px, 14vw, 200px); padding-bottom: max(240px, 20vw); }
.change-inner { min-height: 0; }
.copy-line-wrap { display: block; width: fit-content; max-width: 100%; }
.copy-line-wrap-02 { margin-top: 10px; }
.copy-line { max-width: 100%; }
.copy-line-02 { margin-top: 0; }
.wipe-reveal { position: relative; overflow: hidden; --wipe-delay: 0s; --wipe-text-delay: .4s; --wipe-duration: .88s; }
.wipe-reveal > img { display: block; }
.js-wipe-reveal::before { content: ""; position: absolute; inset: 0; z-index: 2; background: #222; opacity: 0; transform: scaleX(0); pointer-events: none; }
.js-wipe-reveal.is-wipe-hidden > img { opacity: 0; }
.js-wipe-reveal.is-wipe-in > img { opacity: 0; animation: wipeImageIn .01s step-end forwards; animation-delay: var(--wipe-text-delay); }
.js-wipe-reveal.is-wipe-in::before { opacity: 1; animation: wipeBlockLtr var(--wipe-duration) cubic-bezier(.76, 0, .24, 1) forwards; animation-delay: var(--wipe-delay); }
.js-wipe-reveal.wipe-reveal-rtl.is-wipe-in::before { animation-name: wipeBlockRtl; }
@media (prefers-reduced-motion: reduce) {
  .js-wipe-reveal.is-wipe-hidden > img,
  .js-wipe-reveal.is-wipe-in > img { animation: none; opacity: 1; transform: none; filter: none; }
  .js-wipe-reveal::before { animation: none; opacity: 0; }
}
.hero-buttons { margin-top: 28px; }
.hero-people { right: -1%; bottom: 0; z-index: 4; width: clamp(360px, 45.39%, 760px); max-width: none; transform-origin: right bottom; }
.js-hero-people-reveal.is-hero-people-hidden { opacity: 0; transform: translateX(110%) scale(.98); }
.js-hero-people-reveal.is-hero-people-in { animation: heroPeopleSlideIn 1.05s cubic-bezier(.16, 1, .3, 1) both; }
.hero-person { z-index: 3; max-width: none; }
.hero-stage .hero-person-01 { top: 28.4%; left: -8%; width: clamp(74px, 10.6%, 132px); }
.hero-stage .hero-person-02 { top: 57%; left: -6%; width: clamp(48px, 6.7%, 96px); }
.hero-stage .hero-person-03 { top: 15%; right: -2%; width: clamp(46px, 6%, 88px); }
.hero-stage .hero-person-04 { top: 18%; right: -6%; width: clamp(40px, 4.4%, 64px); }
.hero-stage .hero-person-05 { bottom: 2%; right: 30%; width: clamp(60px, 7.5%, 108px); }
.hero-stage .hero-person-06 { bottom: 2%; right: 24%; width: clamp(44px, 5.2%, 78px); }
.change .hero-person-07 { top: 22.1%; left: 5.3%; width: clamp(42px, 5.56%, 96px); }
.change .hero-person-08 { top: 2.9%; left: 28.8%; width: clamp(48px, 7.76%, 132px); }
.change .hero-person-09 { top: 10.2%; right: 34.2%; width: clamp(44px, 7.03%, 120px); }
.change .hero-person-10 { top: 2.2%; right: 16.8%; width: clamp(42px, 6.73%, 116px); }
.change .hero-person-11 { top: 34.1%; right: 18.6%; width: clamp(40px, 6.44%, 112px); }
.change .hero-person-12 { top: 28.8%; right: 2.4%; width: clamp(66px, 10.62%, 172px); }
.change .hero-person-13 { top: 61.8%; left: 5.7%; width: clamp(40px, 5.71%, 100px); }
.change .hero-person-14 { top: 68.2%; right: 57.2%; width: clamp(42px, 6.15%, 108px); }
.hero-dot-01 { --dot-min: 40px; --dot-fluid: 5.857vw; top: -20px; right: max(34px, calc(50% - 645px)); }
.hero-dot-02 { --dot-min: 22.5px; --dot-fluid: 3.294vw; top: 26%; right: max(-20px, calc(50% - 784px)); }
.hero-dot-03 { --dot-min: 48px; --dot-fluid: 7.028vw; top: 77%; left: max(-24px, calc(50% - 710px)); }
.hero-dot-04 { --dot-min: 11px; --dot-fluid: 1.611vw; top: 10%; left: calc(50% - 355px); }
.hero-dot-05 { --dot-min: 13px; --dot-fluid: 1.903vw; top: 90%; right: calc(50% - 510px); }
.hero-dot-06 { --dot-min: 9px; --dot-fluid: 1.203vw; top: 86%; right: calc(50% - 410px); }
.change-dot-01 { --dot-min: 12px; --dot-fluid: 1.757vw; bottom: 6%; left: 12%; }
.change-dot-02 { --dot-min: 11px; --dot-fluid: 1.611vw; top: 50%; right: 10%; }
.change-dot-03 { --dot-min: 32px; --dot-fluid: 4.685vw; top: 54%; right: 4%; }
.change-dot-04 { --dot-min: 41px; --dot-fluid: 6.003vw; right: 8%; bottom: 5%; }
.change-dot-05 { --dot-min: 31px; --dot-fluid: 4.539vw; top: 16%; left: calc(50% - 110px); }
.honesty { min-height: 908px; padding: 120px 0 110px; }
.honesty-inner { display: grid; grid-template-columns: 1fr minmax(170px,260px) 1fr; grid-template-rows: 260px 280px 260px; align-items: center; min-height: 800px; }
.honesty-title-wrap { position: relative; grid-column: 2; grid-row: 1 / 4; align-self: stretch;}
.honesty-title { width: 165px; margin: 0 auto; transform-origin: center; animation: honestyTitleShake 1.5s ease-in-out infinite; }
.honesty-person { --honesty-person-x: -50%; position: absolute; left: 50%; bottom: -30px; width: 224px; max-width: 150vw; transform: translateX(var(--honesty-person-x)); transform-origin: center bottom; }
.js-honesty-person-reveal.is-honesty-person-hidden { opacity: 0; transform: translateX(var(--honesty-person-x, -50%)) translateY(42px) scale(.92); }
.js-honesty-person-reveal.is-honesty-person-in { animation: honestyPersonIn 2s cubic-bezier(.16, 1, .3, 1) 1s both; }
.scribble { position: relative; width: min(290px, 100%); aspect-ratio: 1 / 0.95; }
.scribble-bg, .scribble-text { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.scribble-text { inset: 20% 18%; width: 64%; height: 60%; }
.scribble-01 { grid-column: 1; grid-row: 1; justify-self: center; margin-left: 20%;}
.scribble-02 { grid-column: 1; grid-row: 2; justify-self: center; width: min(320px, 100%); margin-right: 30%; margin-top: 30%;}
.scribble-03 { grid-column: 3; grid-row: 2; justify-self: center; width: min(350px, 100%); }

.why { padding: 120px 0 230px;}
.why-inner { min-height: 0; z-index: 2;}
.why-title-wrap { width: min(676px, 78vw); margin: 0 auto; }
.why-title { width: 100%; margin: 0; }
.why-check { width: min(520px, 92vw); margin: 32px auto 0; }
.why-check ul { display: inline-grid; gap: 24px; margin: 0; padding: 0; text-align: left; list-style: none; font-size: clamp(20px, 2vw, 30px); font-weight: 900; line-height: 1.55; }
.why-text-wrap { display: block; width: fit-content; max-width: 100%; }
.why-text { max-width: 100%; }
.why-main { position: relative; width: 100vw; min-height: clamp(360px, 42.826vw, 500px); margin-left: 50%; transform: translateX(-50%); z-index: 0; }
.why-main::before { content: ""; position: absolute; top: 0; right: -10%; z-index: -1; width: 100%; height: 150%; background: url("../img/why_bg.webp") top right no-repeat; background-size: contain; pointer-events: none; }
.why-question { position: absolute; top: clamp(30px, 4.392vw, 60px); left: 50%; transform: translateX(-50%); transform-origin: center; z-index: 5; width: min(847px, 72vw); max-width: none; }
.js-why-question-reveal.is-why-question-hidden { opacity: 0; transform: translateX(-50%) scale(3); }
.js-why-question-reveal.is-why-question-in { animation: whyQuestionZoomOut .72s cubic-bezier(.16, 1, .3, 1) both; }
.why-girl { position: absolute; right: 0; bottom: -20vw; z-index: 4; width: min(566px, 20vw); max-width: none; transform-origin: right bottom; }
.why-message { position: relative; z-index: 6; text-align: center; }
.why-message .wipe-reveal { display: block; width: fit-content; max-width: 100%; margin: 0 auto; }
.why-message .wipe-reveal + .wipe-reveal { margin-top: 10px; }
.why-message img { margin: 0 auto; max-width: 100%;}
.why-message img + img { margin-top: 10px; }
.why-person { --person-min: 40px; --person-fluid: 5.857vw; z-index: 3; width: max(var(--person-min), var(--person-fluid)); max-width: none; }
.why-person-01 { --person-min: 59px; --person-fluid: 8.638vw; top: -50px; left: calc(50% - 46.484vw); }
.why-person-02 { --person-min: 44px; --person-fluid: 6.442vw; top: -80px; left: calc(50% - 35.798vw); }
.why-person-03 { --person-min: 62.5px; --person-fluid: 9.150vw; top: clamp(100px, 24vw, 200px); left: calc(50% - 40.484vw); }
.why-person-04 { --person-min: 47px; --person-fluid: 6.881vw; top: clamp(228px, 33.382vw, 456px); left: calc(50% - 31.845vw); }
.why-person-05 { --person-min: 47px; --person-fluid: 6.881vw; top: clamp(30px, 4.283vw, 100px); left: calc(50% + 30.426vw); }
.why-person-06 { --person-min: 62px; --person-fluid: 9.077vw; top: clamp(167.5px, 33.807vw, 300px); left: calc(50% + 23.972vw); }
.why-person-07 { --person-min: 41px; --person-fluid: 6.003vw; top: clamp(256px, 37.482vw, 512px); left: calc(50% + 40.333vw); }
.why-person-08 { --person-min: 57px; --person-fluid: 8.345vw; top: clamp(498.5px, 72.987vw, 700px); left: calc(50% - 42.167vw); }
.why-person-09 { --person-min: 60px; --person-fluid: 8.710vw; top: clamp(640px, 93.704vw, 950px); left: calc(50% - 42.231vw); }
.why-person-10 { --person-min: 37px; --person-fluid: 5.417vw; top: clamp(576px, 84.334vw, 1152px); left: calc(50% + 30.163vw); }
.why-dot-01 { --dot-min: 46px; --dot-fluid: 6.735vw; top: 170px; left: max(-18px, calc(50% - 700px)); }
.why-dot-02 { --dot-min: 42px; --dot-fluid: 6.149vw; top: 0; right: max(-24px, calc(50% - 690px)); }
.why-dot-03 { --dot-min: 10px; --dot-fluid: 1.464vw; top: 80px; right: max(100px, calc(50% - 300px)); }
.why-dot-04 { --dot-min: 9px; --dot-fluid: 1.318vw; top: 180px; right: calc(50% - 580px); }
.why-dot-05 { --dot-min: 9px; --dot-fluid: 1.318vw; top: 540px; left: calc(50% - 535px); }
.why-dot-06 { --dot-min: 32px; --dot-fluid: 3.757vw; top: 100px; left: max(120px, calc(50% - 600px)); }
.why-dot-07 { --dot-min: 11px; --dot-fluid: 1.611vw; bottom: 160px; right: calc(50% - 380px); }
.why-dot-08 { --dot-min: 10px; --dot-fluid: 1.464vw; bottom: 160px; left: calc(50% - 420px); }

.team { padding: 0; background: var(--soft-yellow); z-index: 4; }
.team-dot-01 { --dot-min: 75px; --dot-fluid: 10.981vw; top: -42px; right: calc(50% - 410px); }
.team-dot-02 { --dot-min: 29px; --dot-fluid: 4.246vw; top: 130px; left: calc(50% - 440px); }
.team-inner { display: flex; align-items: flex-start; justify-content: center; }
.team-text { position: absolute; left: 50%; bottom: -10%; z-index: 1; width: min(1380px, 112vw); max-width: none; transform: translateX(-50%); }
.team-photo { position: relative; z-index: 3; width: min(980px, 94vw); margin-top: -96px; transform-origin: center bottom; animation: teamPhotoPulse 2.4s ease-in-out infinite; }
.js-team-photo-reveal.is-team-photo-hidden { opacity: 0; transform: translateY(82px) scale(.96); animation: none; }
.js-team-photo-reveal.is-team-photo-in { animation: teamPhotoIn .95s cubic-bezier(.16, 1, .3, 1) both, teamPhotoPulse 2.4s ease-in-out .95s infinite; }

.interview { position: relative; padding: 130px 0 110px; background: #FFF; z-index: 10; }
.interview-dot-y-01 { --dot-min: 12px; --dot-fluid: 1.757vw; top: 300px; right: max(16px, calc(50% - 180px)); }
.interview-dot-y-02 { --dot-min: 17px; --dot-fluid: 2.489vw; top: 260px; right: calc(50% - 500px); }
.interview-dot-y-03 { --dot-min: 14px; --dot-fluid: 2.050vw; top: 540px; left: calc(50% - 530px); }
.interview-dot-r-01 { --dot-min: 9px; --dot-fluid: 1.318vw; top: 300px; left: max(10px, calc(50% - 600px)); }
.interview-dot-r-02 { --dot-min: 28px; --dot-fluid: 4.100vw; top: 300px; right: calc(50% - 440px); }
.interview-en { top: 100px; left: 50%; width: min(1160px, 108vw); transform: translateX(-50%); }
.section-title img { margin: 0 auto; }
.interview-title img { width: min(410px, 74vw); margin-left: 105px; }
.interview-layout { position: relative; min-height: 1180px; margin-top: 50px; }
.interview-card { position: absolute; z-index: 5; width: 460px; padding: 40px 30px 40px; border: 14px solid var(--black); background: var(--yellow); color: var(--black); }
.js-interview-card-reveal.is-interview-card-hidden { opacity: 0; }
.js-interview-card-reveal.is-interview-card-in { animation: interviewCardSlideIn .86s cubic-bezier(.16, 1, .3, 1) both; }
.interview-card h3 { margin: 0 0 18px; font-size: 24px; font-weight: 900; line-height: 1.5; }
.interview-card p { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.9; }
.interview-card p + p { margin-top: 12px; }
.card-profile { padding-top: 8px; font-size: 12px !important; font-weight: 900; }
.card-profile em { font-size: 18px !important; font-style: normal; }
.interview-card-01 { --interview-card-x: -110vw; --interview-card-y: 0; top: 0; left: 130px; }
.interview-card-02 { --interview-card-x: 110vw; --interview-card-y: 0; top: 160px; right: -80px; }
.interview-card-03 { --interview-card-x: 0; --interview-card-y: 80vh; top: 530px; left: 120px; }
.interview-person { z-index: 4; }
.interview-person-01 { left: -207px; bottom: -445px; width: 272px; }
.interview-person-02 { right: -46px; bottom: -502px; width: 298px; }
.interview-person-03 { right: -364px; top: 106px; width: 372px; }

.conditions { padding: 0 0 120px; z-index: 0; }
.conditions-title { position: relative; display: flex; justify-content: center; align-items: center; height: 278px; margin: 0 calc(50% - 50vw); background: url("../img/conditions.webp") center bottom / cover; }
.condition-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; max-width: 940px; margin: 55px auto 70px; padding: 0; list-style: none; }
.condition-stats li { display: flex; align-items: center; justify-content: center; min-height: 125px; padding: 0 26px; border-right: 1px solid var(--line); }
.condition-stats li:nth-child(2) img { animation-delay: .2s; }
.condition-stats li:nth-child(3) img { animation-delay: .4s; }
.condition-stats li:nth-child(4) img { animation-delay: .6s; }
.condition-stats li:last-child { border-right: 0; }
.condition-stats img { display: block; max-height: 116px; transform-origin: center; animation: none; }
.condition-stats.is-condition-stats-in img { animation: conditionStatPulse 3.2s ease-in-out infinite; }
.condition-table-wrap { max-width: 900px; margin: 0 auto; }
.condition-table { width: 100%; border-collapse: collapse; font-size: 18px; }
.condition-table tr { border-top: 1px solid #bdbdbd; }
.condition-table tr:last-child { border-bottom: 1px solid #bdbdbd; }
.condition-table th, .condition-table td { padding: 22px 18px; text-align: left; vertical-align: top; }
.condition-table th { width: 190px; font-weight: 900; }

.cta { padding: 70px 0 150px; }
.cta-inner { display: flex; justify-content: center; }
.cta-box { position: relative; width: min(920px, 100%); padding: 82px 70px 70px; border: 18px solid var(--yellow); background: #fff; text-align: center; }
.cta-title { width: min(660px, 100%); margin: 0 auto; }
.cta-text { width: min(450px, 80vw); margin: 18px auto 0; }
.cta-actions { justify-content: center; margin: 36px 0 42px; }
.company-info { display: grid; grid-template-columns: 120px 1fr; gap: 0 22px; max-width: 560px; margin: 0 auto; text-align: left; font-size: 16px; line-height: 1.7; }
.company-info dt { border-right: 2px solid #222222; font-weight: 900; }
.company-info dd { margin: 0; }
.company-info dd ul { margin-left: 0; padding-left: 1.5em;}
.company-info dt:not(:first-of-type), .company-info dd:not(:first-of-type) { padding-top: 16px;}
.cta-person-01 { right: max(-40px, calc(50% - 510px)); top: -24px; z-index: 7; width: 195px; }
.cta-person-02 { left: max(-124px, calc(50% - 610px)); bottom: 74px; z-index: 7; width: 271px; }
.cta-dot-01 { --dot-min: 29px; --dot-fluid: 4.246vw; left: max(20px, calc(50% - 450px)); bottom: 70px; }
.cta-dot-02 { --dot-min: 11px; --dot-fluid: 1.611vw; right: max(60px, calc(50% - 640px)); top: 330px; }

.site-footer { position: relative; display: grid; place-items: center; min-height: 270px; padding: 80px 24px; background: #222222; color: #fff; text-align: center; z-index: 10; }
.footer-logo { width: 254px; margin-bottom: 48px; z-index: 1; }
.footer-person { position: absolute; bottom: -343px; right: -43px; width: 555px; transform-origin: center bottom; }
.js-footer-person-reveal.is-footer-person-hidden { opacity: 0; transform: translateY(120%) scale(.98); }
.js-footer-person-reveal.is-footer-person-in { animation: footerPersonSlideIn 1.05s cubic-bezier(.16, 1, .3, 1) both; }
.copyright { margin: 0; font-size: 15px; font-weight: 500; z-index: 1; }

@media (min-width: 1367px) {
  .conditions-bg { background-size: min(100vw, 1800px) auto; }
}

@media (max-width: 1024px) {
  .site-header { width: calc(100% - 32px); }
  .hero { min-height: 100svh; height: 100svh; padding-bottom: 0; }
  .hero-stage { width: min(88vw, calc(155.87svh - 124.7px)); }
  .change::after { width: 90%;}
  .change-stage { padding-top: 160px; padding-bottom: 0; }
  .hero-people { position: relative; right: auto; bottom: auto; width: min(620px, 92vw); margin: 40px auto 0; }
  .hero-stage .hero-deco-left { top: -40%; left: -26%;}
  .hero-stage .hero-deco-right { top: 60%; right: -30%;}
  .hero-stage .hero-person-01 { top: -45%; left: 25%;}
  .hero-stage .hero-person-02 { top: -10%; left: 5%;}
  .hero-stage .hero-person-03 { top: -40%; right: 20%;}
  .hero-stage .hero-person-04 { top: 110%; right: 70%;}
  .hero-stage .hero-person-05 { bottom: -40%; right: 20%;}
  .hero-stage .hero-person-06 { bottom: -40%; right: 10%;}
  .change .hero-person-07 { top: 5%; left: 5.3%; }
  .change .hero-person-11 { top: 50.1%; right: 4.6%; }
  .change .hero-person-12 { top: 12.8%; right: 1.4%; }
  .change .hero-person-14 { top: 56.2%; right: 20.2%; }

  .why-girl {  bottom: clamp(-100px, -40vw, -500px); }
  .why-person-01 { top: -80px; }
  .why-person-02 { top: -130px; }
  .why-person-03 { top: 0; left: calc(50% - 40.484vw); }
  .why-person-04 { top: -30px; left: calc(50% - 11.845vw); }
  .why-person-05 { top: -50px; }
  .why-person-06 { left: calc(50% + 33.972vw); }
  .why-person-07 { top: clamp(350px, 37.482vw, 512px); left: calc(50% - 45.333vw); }
  .why-person-08 { top: clamp(498.5px, 72.987vw, 700px); left: calc(50% - 42.167vw); }
  .why-person-09 { top: 82%; left: calc(50% - 32.231vw); }
  .why-person-10 { top: 85%; left: calc(50% + 30.163vw); }

  .interview-layout { display: grid; grid-template-columns: 1fr; gap: 28px; min-height: 0; margin-top: 48px; }
  .interview-card { position: relative; inset: auto; width: min(620px, 80%); margin: 0 auto; border-width: 6px; }
  .interview-card-01 { margin-right: 0;}
  .interview-card-02 { margin-left: 0;}
  .interview-card-03 { margin-left: 0;}
  .interview-person { width: min(140px, 55vw);}
  .interview-person-01 { left: -105px; bottom: 0; z-index: -1; }
  .interview-person-02 { right: -126px; bottom: -40px; }
  .interview-person-03 { right: -156px; top: auto; bottom: 0; width: min(160px, 55vw); }

  .condition-stats { grid-template-columns: repeat(2, 1fr); max-width: 620px; }
  .condition-stats li:nth-child(2) { border-right: 0; }
  .condition-stats li:nth-child(1), .condition-stats li:nth-child(2) { border-bottom: 1px solid var(--line); }

  .site-footer { min-height: 220px; padding: 62px 20px; }
  .footer-person { bottom: -143px; right: -63px; width: 255px;}
  .copyright { font-size: 10px; }
}

@media (max-width: 640px) {
  body { line-height: 1.7; }
  .sp { display: block;}
  .container { width: calc(100% - 28px); }
  .site-header { top: 12px; align-items: flex-start; gap: 12px; }
  .header-logo { width: 180px; flex: 0 0 auto; }
  .header-actions { justify-content: flex-end; gap: 8px; }
  .pill { min-width: 220px; min-height: 50px; }
  .hero { min-height: 80svh; height: 80svh; padding: 0; }
  .hero::before { min-width: initial; height: 110svh; background-size: auto 100%;}
  .hero-inner { min-height: 80svh; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 40px 0; }
  .hero-stage { width: min(96vw, calc(155.87svh - 124.7px)); }
  .hero-title { margin: 0; }
  .change::after { width: 90%; height: 160px;}
  .change-inner { min-height: auto; }
  .hero-change { width: 94vw; }
  .hero-buttons { margin-top: 22px; }
  .honesty { min-height: initial; padding: 78px 0; }
  .honesty-inner { min-height: initial; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: auto;}
  .honesty-title { width: 30vw; }
  .honesty-person { --honesty-person-x: 0; position: relative; left: auto; bottom: auto; transform: translateX(var(--honesty-person-x)); width: 160%; margin: 0 -30%;}
  .scribble { width: 33vw }
  .scribble-01 { margin-left: 0;}
  .scribble-02 { margin-right: 0;}
  .why { min-height: initial; padding: 86px 0 180px; }
  .why-title-wrap { width: 92vw; }
  .why-main { min-height: 330px; }
  .why-girl { bottom: 0; width: min(566px, 30vw); }
  .why-message { width: 92vw; margin: -24px auto 0; }
  .team-photo { width: 115vw; max-width: none; margin-top: -28px; }
  .team-text { width: 130vw; }
  .interview { padding: 40px 0 70px; }
  .interview-title img { width: min(360px, 84vw); margin-left: 0; }
  .interview-card { padding: 22px 20px; }
  .interview-card h3 { font-size: 18px; }
  .interview-card p { font-size: 14px; }
  .conditions-title img { width: 100px;}
  .conditions-title { height: 170px; background-size: cover; }
  .condition-stats { gap: 0; margin: 36px auto 46px; }
  .condition-stats li { min-height: 110px; padding: 16px; }
  .condition-table, .condition-table tbody, .condition-table tr, .condition-table th, .condition-table td { display: block; width: 100%; }
  .condition-table th { padding: 18px 0 4px; }
  .condition-table td { padding: 0 0 18px; font-size: 14px; }
  .cta { padding: 0 0 90px; }
  .cta-box { padding: 42px 20px 34px; border-width: 10px; }
  .cta-actions { margin: 28px 0 32px; }
  .company-info { grid-template-columns: 70px 1fr; gap: 10px 14px; font-size: 13px; }
  .cta-person-01 { right: -10px; top: -80px; width: 70px; }
  .cta-person-02 { left: -50px; bottom: -54px; width: 120px; }

  .footer-person { width: 360px;}
}