/* ==========================================================
   日本ルミカラー コーチング — コーポレートサイト（配色は coaching-service-lp に合わせる）
   ========================================================== */
:root {
  --primary: #2F6B57;        /* ディープグリーン（LPの主色） */
  --primary-dark: #1E4A3C;
  --primary-bright: #6DAA8F;  /* ルミのからだの色 */
  --primary-pale: #EAF1EC;
  --text: #23282A;
  --surface: #fff;
  --muted: #FBF8F3;          /* 生成り（LPの地） */
  --dark: #183029;           /* 深い緑 */
  --pink: #A9D8C1;           /* 見出しのフラッシュ色（明るいミント） */
  --accent: #E8A33D;         /* 山吹：装飾のみ（文字色には使わない） */
  --yellow: #E8A33D;
  --green: #6DAA8F;
  --gutter: 2.22vw;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --en: "Figtree", "Noto Sans JP", Arial, sans-serif;
  --ja: "Noto Sans JP", "Figtree", sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0; background: var(--muted); color: var(--text);
  font-family: var(--ja); font-feature-settings: "palt" 1; letter-spacing: .02em;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
body.is-loading { overflow: hidden; }
/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p { margin: 0; }
ul { list-style: none; margin: 0; padding: 0; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* ---------- logo（雲が気づきと光へほどけていくマーク＋社名） ---------- */
.logo { --logo-cloud: #F4F8F3; --logo-line: #CFE5DA; --logo-dot: #8CC2A9; display: inline-flex; align-items: center; gap: 12px; color: #fff; line-height: 1; }
.logo__mark { width: 70px; height: 27px; flex: none; }
.logo__text { display: flex; flex-direction: column; gap: 5px; font-family: var(--ja); font-weight: 700; font-size: 20px; letter-spacing: .08em; white-space: nowrap; }
.logo__text small { font-family: var(--en); font-weight: 600; font-size: 10px; letter-spacing: .32em; text-transform: uppercase; opacity: .75; }
.logo--light { color: #fff; }

/* ---------- common atoms ---------- */
.pill { display: inline-block; font-family: var(--en); font-weight: 600; font-size: 14px; color: #fff; background: var(--primary); border-radius: 99px; padding: 4px 12px; letter-spacing: 0; }
.arrow { display: inline-grid; place-items: center; width: 30px; height: 22px; border-radius: 99px; background: var(--primary); position: relative; transition: transform .4s var(--ease-out); }
.arrow::before { content: ""; width: 10px; height: 10px; background: #fff; clip-path: polygon(0 42%, 60% 42%, 35% 12%, 50% 0, 100% 50%, 50% 100%, 35% 88%, 60% 58%, 0 58%); }
.arrow--solid { background: #fff; }
.arrow--solid::before, .arrow--blue::before { background: var(--primary); }
.arrow--blue { background: var(--primary-pale); }
.arrow--up { transform: rotate(-90deg); }
.more { display: inline-flex; align-items: center; gap: 12px; font-family: var(--en); font-weight: 600; font-size: 17px; letter-spacing: 0; cursor: pointer; }
.more__label { position: relative; }
.more__label::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease-out); }
.more:hover .more__label::after, a:hover .more .more__label::after { transform: scaleX(1); transform-origin: left; }
.more .arrow { overflow: hidden; transition: width .45s var(--ease-out), transform .45s var(--ease-out), background .3s; }
.more .arrow::before { transition: transform .45s var(--ease-out); }
.more:hover .arrow, a:hover .more .arrow { width: 44px; background: var(--primary-bright); }
.more__label { transition: color .3s; }
.more:hover .more__label, a:hover .more .more__label { color: var(--primary); }
.more--light:hover .more__label, a:hover .more--light .more__label { color: #fff; }
.more--light:hover .arrow, a:hover .more--light .arrow { background: var(--primary-pale); }
.more:hover .arrow::before, a:hover .more .arrow::before { animation: arrowLoop .55s var(--ease-out); }
@keyframes arrowLoop { 0% { transform: translateX(0); } 45% { transform: translateX(18px); opacity: 0; } 46% { transform: translateX(-18px); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } }
.more--light { color: #fff; }
.more--light .arrow { background: #fff; }
.more--light .arrow::before { background: var(--primary); }
.chip { display: inline-flex; align-items: center; gap: 12px; border: 1px solid rgba(255,255,255,.5); border-radius: 99px; padding: 10px 12px 10px 22px; font-family: var(--en); font-size: 14px; font-weight: 600; color: #fff; transition: background .3s, color .3s; }
.chip .arrow { width: 22px; height: 22px; background: #fff; }
.chip .arrow::before { background: var(--primary); }
.chip:hover { background: #fff; color: var(--primary); }
button.chip { font-family: var(--ja); font-weight: 700; }
.chip:hover .arrow { background: var(--primary); }
.chip:hover .arrow::before { background: #fff; }

/* grayscale placeholder */
.ph { position: relative; overflow: hidden; background: linear-gradient(135deg, #d6d6d6, #9d9d9d); filter: grayscale(1); display: grid; place-items: center; }
.ph::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(45deg, rgba(255,255,255,.08) 0 14px, transparent 14px 28px); }
.ph::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.35), transparent 55%); }
.ph span { position: relative; z-index: 1; font-family: var(--en); font-weight: 600; font-size: 13px; letter-spacing: .2em; color: rgba(255,255,255,.9); border: 1px solid rgba(255,255,255,.7); padding: 4px 10px; border-radius: 4px; }
.ph--round { border-radius: 50%; }

/* ---------- reveal (generic) ---------- */
.reveal { opacity: 0; transform: translateY(40px); transition: opacity .9s var(--ease-out), transform 1.1s var(--ease-out); }
.reveal.is-in { opacity: 1; transform: none; }

/* ==========================================================
   Loader（初回だけ。html.is-opening のときだけ表示し、2回目以降は読み込み画面なしで始める）
   ========================================================== */
.loader { position: fixed; inset: 0; z-index: 100; background: var(--primary); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; overflow: hidden; transition: opacity .8s var(--ease-io) .1s, visibility 0s linear .9s; }
body.is-loaded .loader { opacity: 0; visibility: hidden; pointer-events: none; }
.loader__stage { position: relative; width: 140px; height: 150px; }
/* とことこ：画面の左から中央まで歩いてくる */
.loader__walk { position: absolute; inset: 0; transform: translateX(-62vw); }
.loader.is-walk .loader__walk { animation: loaderWalk 1.5s cubic-bezier(.3, .55, .45, 1) both; }
@keyframes loaderWalk { from { transform: translateX(-62vw); } to { transform: none; } }
.loader__hop { width: 100%; height: 100%; transform-origin: 50% 92%; }
.loader.is-walk .loader__hop { animation: loaderToko .3s ease-in-out 5 both; }
@keyframes loaderToko {
  0%, 100% { transform: translateY(0) rotate(-6deg) scale(1.03, .97); }
  50% { transform: translateY(-11px) rotate(6deg) scale(.98, 1.03); }
}
/* ポン：縮んで、跳ねて、着地する */
.loader.is-walk.is-jump .loader__hop { animation: loaderPon .75s cubic-bezier(.3, .8, .4, 1) both; }
@keyframes loaderPon {
  0% { transform: scale(1.18, .8); }
  30% { transform: translateY(-78px) scale(.9, 1.12); }
  55% { transform: translateY(-86px) scale(1); }
  82% { transform: translateY(0) scale(1.16, .84); }
  100% { transform: none; }
}
.loader__rumi { width: 100%; }
.loader__pop { position: absolute; left: 50%; top: 18%; width: 0; height: 0; }
.loader__pop i { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); opacity: 0; transform: rotate(calc(var(--k) * 60deg)) translateY(0) scale(.4); }
.loader__pop i:nth-child(1) { --k: 0; } .loader__pop i:nth-child(2) { --k: 1; background: #fff; } .loader__pop i:nth-child(3) { --k: 2; }
.loader__pop i:nth-child(4) { --k: 3; background: #fff; } .loader__pop i:nth-child(5) { --k: 4; } .loader__pop i:nth-child(6) { --k: 5; background: #A9D8C1; }
.loader.is-jump .loader__pop i { animation: loaderSpark .7s var(--ease-out) .22s both; }
@keyframes loaderSpark {
  0% { opacity: 0; transform: rotate(calc(var(--k) * 60deg)) translateY(-10px) scale(.4); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: rotate(calc(var(--k) * 60deg)) translateY(-82px) scale(1); }
}
.logo--loader { opacity: 0; transform: translateY(12px); transition: opacity .6s var(--ease-out) .3s, transform .8s var(--ease-out) .3s; }
.loader.is-jump .logo--loader { opacity: 1; transform: none; }
.logo--loader .logo__mark { width: 88px; height: 34px; }
.logo--loader .logo__text { font-size: 24px; }
html:not(.is-opening) .loader { display: none; }

/* ==========================================================
   Header
   ========================================================== */
.header { position: fixed; inset: 0 0 auto; z-index: 50; color: #fff; transition: transform .6s var(--ease-out), color .3s, background .3s; }
.header__inner { height: 88px; display: flex; align-items: center; gap: 24px; padding: 0 40px; border-bottom: 1px solid rgba(255,255,255,.22); transition: border-color .3s; }
.header .logo { padding-right: 24px; margin-right: 0; border-right: 1px solid rgba(255,255,255,.3); height: 40px; color: inherit; }
.header__nav { display: flex; align-items: center; gap: 22px; font-family: var(--ja); font-weight: 700; font-size: 14px; letter-spacing: .06em; white-space: nowrap; }
.header__nav a { position: relative; }
.header__nav a:not(.header__cta)::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .4s var(--ease-out); }
.header__nav a:not(.header__cta):hover::after { transform: scaleX(1); transform-origin: left; }
.header__nav--sub { margin-left: auto; gap: 22px; }
.header__cta { background: #fff; color: var(--primary); padding: 9px 18px; border-radius: 99px; transition: background .3s, color .3s; }
.header__cta:hover { background: var(--accent); color: var(--primary-dark); }
.header.is-hidden { transform: translateY(-100%); }
.header.is-solid { background: rgba(251,248,243,.92); backdrop-filter: blur(10px); color: var(--text); }
.header.is-solid .header__inner { border-color: transparent; }
.header.is-solid .logo { --logo-cloud: #6DAA8F; --logo-line: #2F6B57; --logo-dot: #6DAA8F; border-color: rgba(0,0,0,.12); color: var(--primary-dark); }
.header.is-solid .header__cta { background: var(--primary); color: #fff; }
.header__menu { display: none; width: 44px; height: 44px; border-radius: 50%; background: #fff; margin-left: auto; position: relative; }
.header__menu span { position: absolute; left: 14px; right: 14px; height: 2px; background: var(--primary); }
.header__menu span:first-child { top: 18px; } .header__menu span:last-child { top: 24px; }
body.is-loading .header { transform: translateY(-100%); }
body.is-loaded .header { transition-delay: 0s, 0s, 0s; }

/* ==========================================================
   Hero (sticky + clip to orb)
   ========================================================== */
.hero { position: relative; height: 360vh; z-index: 3; }
.hero, .hero__sticky { pointer-events: none; }
.hero__sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.hero__visual { position: absolute; inset: 0; background: #2F6B57; clip-path: circle(var(--clip-r, 150vmax) at 50% var(--clip-y, 50%)); will-change: clip-path; }
.hero__visual canvas { width: 100%; height: 100%; display: block; }
.hero__shade { position: absolute; inset: 0; background: radial-gradient(circle at 50% 55%, transparent 40%, rgba(10,40,30,.28)); pointer-events: none; }
/* ring around orb */
.hero__visual::after { content: ""; position: absolute; left: 50%; top: var(--clip-y, 50%); width: calc(var(--clip-r, 150vmax) * 2); height: calc(var(--clip-r, 150vmax) * 2); transform: translate(-50%, -50%); border-radius: 50%; box-shadow: inset 0 0 0 5px rgba(255,255,255,.55), inset 0 0 0 9px rgba(47,107,87,.45), inset 0 0 0 12px rgba(255,255,255,.35), inset 0 0 30px 16px rgba(255,255,255,.35), 0 0 0 10px rgba(47,107,87,.12), 0 0 0 11px rgba(47,107,87,.35); opacity: var(--ring-o, 0); pointer-events: none; }

.hero__headings { position: absolute; inset: 0; color: #fff; pointer-events: none; }
.hero__title { position: absolute; top: 50%; left: 50%; width: 95.56vw; transform: translate(-50%, calc(-50% - var(--exit, 0) * 120px + var(--hpar, 0px))); opacity: calc(var(--title-in, 0) * (1 - var(--exit, 0))); text-align: center; font-family: var(--ja); font-weight: 700; font-size: 6.4vw; line-height: 1.32; letter-spacing: .04em; white-space: nowrap; text-shadow: 0 4px 30px rgba(10,40,30,.25); filter: blur(calc((1 - var(--title-in, 0)) * 16px)); }
.hero__title-line { display: block; }
.hero__ja { position: absolute; left: var(--gutter); bottom: 9vh; translate: 0 calc(var(--hpar, 0px) * 0.5); font-weight: 700; font-size: 1.5vw; line-height: 1.5; opacity: calc(1 - var(--exit, 0)); display: grid; gap: .5em; }
.hero__ja-line { display: flex; align-items: center; gap: .6em; overflow: hidden; }
.hero__ja-line::before { content: ""; flex: none; width: .7em; height: .7em; background: var(--accent); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.hero__ja-line { clip-path: inset(0 0 -10% 0); }
.hero__ja-line { transform: translateY(calc((1 - var(--ja-in, 0)) * 100%)); opacity: var(--ja-in, 0); transition: transform 1.1s var(--ease-out) calc(var(--i) * .18s), opacity 1.1s var(--ease-out) calc(var(--i) * .18s); }
.hero.is-ja .hero__ja-line { --ja-in: 1; }

/* ---------- mascot：ガイドキャラクター「ルミ」（描画と表情は css/lumi.css） ---------- */
.mascot { position: absolute; width: 84px; pointer-events: none; }
.mascot svg { display: block; width: 100%; overflow: visible; }
.mascot--hero { right: 28px; bottom: 28px; width: 110px; opacity: 0; transform: translateY(40px) scale(.6); transition: opacity .6s, transform .9s cubic-bezier(.34, 1.56, .64, 1); }
.hero.is-ja .mascot--hero { opacity: calc(1 - var(--exit, 0)); transform: none; }
/* ふわふわ上下する（ルミ全体） */
.mascot > svg, .edge-chara > svg { animation: bob 2.4s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes bob { 0%, 100% { transform: translateY(0) scaleY(1); } 50% { transform: translateY(-6px) scaleY(1.03); } }
@keyframes sway { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
body.is-paused *, body.is-paused *::before, body.is-paused *::after { animation-play-state: paused !important; }
/* decorative loops stop while their section is off screen */
.is-offscreen *, .is-offscreen *::before, .is-offscreen *::after { animation-play-state: paused !important; }
/* heavy layers are not even rasterised while their section is away */
.is-offscreen .contour-bg, .is-offscreen #heroCanvas { display: none; }

/* ==========================================================
   Business
   ========================================================== */
.business { position: relative; z-index: 2; margin-top: -170vh; min-height: 170vh; display: grid; grid-template-columns: 1fr 1fr; align-items: end; padding: 0 var(--gutter) 12vh; }
.business__line { position: absolute; left: 50%; top: 20vh; bottom: 0; width: 1px; background: #c9ccd0; transform-origin: top; transform: scaleY(var(--line, 0)); }
.business__col { position: relative; }
.business__col--right { text-align: right; }
.business__title { font-family: var(--en); font-weight: 600; font-size: 6.2vw; line-height: .98; letter-spacing: -.05em; margin: 22px 0 22px; }
.business__title span { display: block; }
.is-primary { color: var(--primary); }
.business__lead { font-size: 2.3vw; line-height: 1.55; font-weight: 500; margin-bottom: 44px; }
.business .reveal { transition-delay: .1s; }
.business .business__col--right.reveal { transition-delay: .25s; }

/* ==========================================================
   Section heading (big EN)
   ========================================================== */
.section-heading { font-family: var(--en); font-weight: 600; font-size: 13.9vw; line-height: .86; letter-spacing: -.055em; }
.section-heading > span { display: block; width: fit-content; }
.section-heading--light { color: #fff; }
.section-heading .indent { margin-left: 7.9vw; }

/* typo motion: per-char */
.typo .ch { display: inline-block; }
.typo .w { display: inline-block; white-space: nowrap; }
[data-typo="highlight"] .ch { color: rgba(35,40,42,.2); }
[data-typo="highlight"].is-active .ch { animation: toAccent .5s var(--ease-out) forwards; animation-delay: var(--d); }
@keyframes toAccent { from { color: rgba(35,40,42,.2); } to { color: var(--primary); } }
[data-typo="flash"].is-active .ch { animation: flash 1.2s var(--ease-io) both; animation-delay: var(--d); }
@keyframes flash { 0% { color: #fff; } 35% { color: var(--pink); } 100% { color: var(--pink); } }
.platforms [data-typo="flash"]:nth-child(2).is-active .ch { animation-name: flashBack; }
@keyframes flashBack { 0% { color: #fff; } 40% { color: var(--pink); } 100% { color: #fff; } }
[data-typo="contour"] .ch { color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.75); transition: color .7s var(--ease-out), -webkit-text-stroke-color .7s; transition-delay: var(--d); }
[data-typo="contour"].is-active .ch { color: #fff; -webkit-text-stroke-color: transparent; }
.ch.rise { transform: translateY(110%); opacity: 0; transition: transform 1s var(--ease-out), opacity .8s; transition-delay: var(--d); }
.is-active .ch.rise { transform: none; opacity: 1; }

/* ==========================================================
   Selected Projects
   ========================================================== */
.work { position: relative; z-index: 2; padding: 22vh 3.26vw 24vh var(--gutter); translate: 0 var(--sink, 0px); }
.work .section-heading { margin-bottom: 7vh; }
.work__body { display: grid; grid-template-columns: 35.4vw 1fr; gap: 0; }
.work__side { position: sticky; top: 120px; align-self: start; padding-right: 3vw; }
.work__lead { font-size: 22px; font-weight: 700; line-height: 1.7; color: var(--primary-dark); margin-bottom: 28px; }
.work__filter { font-size: 16px; font-weight: 500; }
.work__filter button { display: block; padding: 7px 0 7px 18px; color: #555; position: relative; text-align: left; transition: color .3s; }
.work__filter button::before { content: ""; position: absolute; left: 0; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--primary); transform: scale(0); transition: transform .3s var(--ease-out); }
.work__filter button:hover, .work__filter button.is-active { color: var(--primary); font-weight: 700; }
.work__filter button.is-active::before { transform: scale(1); }
.work__filter button:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }
.work__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px 4.2vw; }
.work-card .card__title { font-size: 22px; margin: 14px 0 8px; }
.work-card .card__tags, .work-card .card__title, .work-card .card__who, .work-card .card__desc { margin-left: 16px; margin-right: 16px; }
.work-card .card__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 22px; }
.work-card .card__tags .card__tag { margin: 0; font-family: var(--ja); font-weight: 700; }
.card__prog { font-size: 12px; font-weight: 700; color: #7A8783; }
.card__who { font-size: 13px; font-weight: 700; color: var(--primary); margin-bottom: 10px; }
.work-card .card__desc { color: #666; }
.lens__rear .card__who, .lens__rear .card__prog { color: #fff; }
.card { display: block; }
.card__media { aspect-ratio: 1; border-radius: 8px; overflow: hidden; }
.media-img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(.88) saturate(.55) contrast(.96); transition: transform 1.2s var(--ease-out), filter .5s ease; }
.card:hover > .card__media .media-img { transform: scale(1.035); filter: grayscale(.72) saturate(.65) contrast(.98); }
.interview__list .media-img, .feed__grid .media-img { filter: saturate(.98) contrast(.98); }
.interview__list .card:hover > .card__media .media-img, .feed__grid .card:hover > .card__media .media-img { filter: saturate(1.04) contrast(1); }
.card__media .ph { width: 100%; height: 100%; transition: transform 1.2s var(--ease-out); }
.card:hover .card__media .ph { transform: scale(1.05); }
.card__tag { display: inline-block; margin-top: 24px; font-family: var(--en); font-size: 12px; font-weight: 600; color: var(--primary); border: 1px solid var(--primary); padding: 2px 11px; border-radius: 99px; background: #fff; }
.card__title { font-size: 23px; font-weight: 700; line-height: 1.45; margin: 18px 0 14px; letter-spacing: .03em; }
.card__desc { font-size: 14px; line-height: 1.7; color: #555; letter-spacing: .03em; }
.work__grid .card { opacity: 0; transform: translateY(60px); transition: opacity 1s var(--ease-out), transform 1.2s var(--ease-out); }
.work__grid .card.is-in { opacity: 1; transform: none; }
.work__grid .card:nth-child(even) { transition-delay: .12s; }
.work__grid .card.is-filtered { display: none; }
.work__grid .card.is-settled { transition: none; transition-delay: 0s; }
.work-card { padding-bottom: 28px; }

/* ==========================================================
   Client Stories
   ========================================================== */
.contour-bg { position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image:
    repeating-radial-gradient(circle at 12% 25%, transparent 0 22px, rgba(255,255,255,.07) 22px 23px),
    repeating-radial-gradient(circle at 80% 15%, transparent 0 26px, rgba(255,255,255,.06) 26px 27px),
    repeating-radial-gradient(circle at 60% 85%, transparent 0 30px, rgba(255,255,255,.05) 30px 31px);
  -webkit-mask-image: radial-gradient(circle at 12% 25%, #000 0 14%, transparent 22%), radial-gradient(circle at 80% 15%, #000 0 16%, transparent 24%), radial-gradient(circle at 60% 85%, #000 0 18%, transparent 26%);
  mask-image: radial-gradient(circle at 12% 25%, #000 0 14%, transparent 22%), radial-gradient(circle at 80% 15%, #000 0 16%, transparent 24%), radial-gradient(circle at 60% 85%, #000 0 18%, transparent 26%);
  }
.interview { position: relative; z-index: 3; color: #fff; pointer-events: none; }
.interview__body { pointer-events: auto; }
/* stage overlaps the last screen of the previous section; its sticky layer holds the rising panel */
/* stage starts one screen before Stories ends (overlap 100vh): rise 100vh → cards come up under the heading right away */
.pull-stage { position: relative; height: 300vh; margin-top: -100vh; pointer-events: none; }
.pull-sticky { position: sticky; top: 0; height: 100vh; overflow: visible; }
.pull-panel { position: absolute; left: 0; right: 0; top: 0; height: 100vh; background: var(--dark); transform: translate3d(0, var(--pp, 100vh), 0); will-change: transform; display: flex; align-items: flex-start; justify-content: center; padding-top: 18vh; }
.pull-panel .contour-bg { overflow: hidden; }
.pull-edge { position: absolute; left: 0; width: 100%; height: 320px; top: -319px; display: block; pointer-events: none; }
.pull-edge path { fill: var(--dark); }
.mascot--pull { width: 110px; left: 0; top: 0; z-index: 3; opacity: var(--po, 1); transform: translate3d(calc(var(--px, 50vw) - 55px), calc(var(--py, 100vh) - 118px), 0) rotate(var(--pr, 0deg)); }
/* the body slides over the pinned heading: its first screen is see-through */
.interview__body { position: relative; background: linear-gradient(to bottom, transparent 0, transparent 100vh, var(--dark) 100vh); padding: 0 0 18vh; display: flow-root; margin-top: -100vh; min-height: 100vh; }
/* the sticky panel ends 100vh below the body's top: the body must reach that far, or the panel spills over Programs */
.interview__heading { position: relative; opacity: calc(1 - var(--hf, 0)); text-align: center; font-family: var(--en); font-weight: 600; font-size: 12vw; line-height: 1; letter-spacing: -.05em; color: #3F6356; white-space: nowrap; }
.interview__list { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 5.1vw; padding: 0 9.8vw; margin-top: 3vh; }
.interview__list .card:nth-child(2) { margin-top: 80px; }
.interview__list .card:nth-child(3) { margin-top: 150px; }
.interview__list .card__media { aspect-ratio: 331 / 203; position: relative; }
.interview__list .card__media::after { content: ""; position: absolute; inset: 0; background: var(--primary); opacity: 0; transition: opacity .5s var(--ease-out); mix-blend-mode: multiply; }
.interview__list .card__date { display: block; margin-top: 18px; font-size: 13px; font-weight: 700; color: #A3BAB0; }
.interview__list .card__title { font-size: 20px; line-height: 1.5; margin: 8px 0 12px; }
.interview__list .card__title::before { display: none; }
.interview__list .card__desc { color: #BFD0C8; font-size: 14px; line-height: 1.85; }
.interview__list .card .card__tags { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 12px; font-size: 12px; color: #9DB5AB; }

/* ==========================================================
   Our Products
   ========================================================== */
.platforms { position: relative; z-index: 2; overflow: clip; background: var(--primary); color: #fff; padding: max(28vh, 200px) var(--gutter) 20vh; }
.platforms__head { display: flex; align-items: flex-end; gap: 4vw; margin-bottom: 10vh; }
.platforms__head .section-heading { font-size: 11.5vw; padding-top: .12em; }
.platforms__desc { font-weight: 700; font-size: 15px; line-height: 1.75; padding-bottom: 2vw; }
.platforms__list { border-top: 1px solid rgba(255,255,255,.25); position: relative; }
.platforms__highlight { position: absolute; left: 0; right: 0; top: 0; height: var(--hh, 0px); transform: translateY(var(--hy, 0px)); background: rgba(255,255,255,.08); opacity: 0; transition: transform .5s var(--ease-out), height .5s var(--ease-out), opacity .3s; pointer-events: none; }
.platforms__list.is-hover .platforms__highlight { opacity: 1; }
.platform { z-index: 1; }
.platform { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; padding: 30px 0 30px; border-bottom: 1px solid rgba(255,255,255,.25); position: relative; overflow: hidden; cursor: pointer; }
.platform__icon { width: 14px; height: 14px; background: #fff; transition: transform .6s var(--ease-out); }
.platform:hover .platform__icon { transform: rotate(180deg) scale(1.3); }
.platform__name { font-family: var(--ja); font-weight: 700; font-size: 30px; letter-spacing: .02em; }
.platform__sub { display: block; font-family: var(--ja); font-size: 13px; font-weight: 500; opacity: .85; margin-top: 8px; letter-spacing: .02em; }
.platforms__list .platform { opacity: 0; transform: translateX(-40px); transition: opacity .9s var(--ease-out), transform 1s var(--ease-out); }
.platforms__list .platform.is-in { opacity: 1; transform: none; }

/* ==========================================================
   Studio Notes — pinned horizontal scroll w/ circle mask
   ========================================================== */
.latest { position: relative; z-index: 2; height: 320vh; background: var(--primary); }
.latest__sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.latest__layer { position: absolute; inset: 0; display: flex; align-items: center; }
.latest__layer--base { background: #fff; }
.latest__layer--circle { background: var(--primary); clip-path: circle(var(--r, 200vmax) at var(--cx, 100%) 50%); }
.latest__track { display: flex; align-items: baseline; white-space: nowrap; padding-left: 100vw; transform: translate3d(var(--tx, 0px), 0, 0); will-change: transform; }
.latest__word { font-family: var(--en); font-weight: 600; font-size: 15vw; letter-spacing: -.05em; line-height: 1; margin-right: .22em; color: var(--text); }
.latest__word.is-primary { color: var(--primary); }
.latest__char { display: inline-block; transform: translate3d(0, var(--cy, 0px), 0); }
.latest__word.is-outline { color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.28); }
.latest__word.is-next { position: relative; color: #66AC9A; -webkit-text-fill-color: currentColor; -webkit-text-stroke: 0; filter: drop-shadow(0 0 8px rgba(118,205,210,.34)); animation: nextWorldGlow 2.8s ease-in-out infinite; }
.latest__word.is-next .latest__char, .latest__sp .is-next { background: linear-gradient(105deg, #2F6B57 0%, #69A996 22%, #EFFFFA 40%, #8DD5E7 52%, #FFFFFF 60%, #58A58E 77%, #2F6B57 100%); background-size: 240% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; animation: nextWorldShimmer 3.6s ease-in-out infinite; }
.latest__word.is-next::before, .latest__word.is-next::after { content: ""; position: absolute; z-index: 2; width: .055em; height: .055em; background: #fff; clip-path: polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%); filter: drop-shadow(0 0 8px rgba(127,218,230,.9)); animation: nextWorldSpark 2.4s ease-in-out infinite; }
.latest__word.is-next::before { left: 16%; top: 4%; }
.latest__word.is-next::after { right: 19%; bottom: 8%; animation-delay: -1.15s; }
@keyframes nextWorldShimmer { 0%, 100% { background-position: 100% 50%; } 50% { background-position: 0 50%; } }
@keyframes nextWorldGlow { 50% { filter: drop-shadow(0 0 18px rgba(118,205,210,.58)); } }
@keyframes nextWorldSpark { 0%, 100% { opacity: .2; transform: scale(.55) rotate(0deg); } 45% { opacity: 1; transform: scale(1.65) rotate(90deg); } }
.latest__dot { display: inline-block; width: 3.4vw; height: 3.4vw; border-radius: 50%; margin-left: -.1em; }
.mascot--fly { width: 150px; left: 0; top: 0; transform: translate3d(var(--mx, -200px), var(--my, 30vh), 0) rotate(var(--mr, 0deg)); }

/* ==========================================================
   Feeds (News / Seminar / Blog)
   ========================================================== */
.feeds { position: relative; z-index: 2; background: #fff; padding: 12vh 9.8vw 16vh; }
.feed + .feed { border-top: 1px solid #ddd; margin-top: 60px; padding-top: 60px; }
.feed__title { font-family: var(--en); font-weight: 600; font-size: 40px; letter-spacing: -.03em; margin-bottom: 34px; }
.feed__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5.1vw; }
.feed__grid .card__media { aspect-ratio: 331 / 186; }
.feed__grid .card__title { font-size: 20px; line-height: 1.5; margin: 14px 0 12px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.feed__grid .card__date { font-family: var(--en); font-size: 14px; color: #666; }
.feed__grid .card__meta { display: inline-block; margin-top: 12px; font-size: 12px; font-weight: 700; color: var(--primary); border: 1px solid var(--primary); border-radius: 99px; padding: 3px 12px; }
.feed__grid .card__meta--on { background: var(--primary); color: #fff; margin-right: 6px; }
/* ==========================================================
   Message（代表メッセージ：coaching-service-lp のコーチ紹介より）
   ========================================================== */
.message { position: relative; z-index: 2; background: radial-gradient(circle at 84% 16%, rgba(162,211,226,.28), transparent 34%), linear-gradient(145deg, #F6F9F5 0%, #E8F3F1 58%, #F8F5EC 100%); padding: 16vh 9.8vw 22vh; }
.label { display: flex; align-items: baseline; gap: 14px; margin-bottom: 20px; }
.label__en { font-family: var(--en); font-weight: 600; font-size: 15px; letter-spacing: .1em; color: var(--primary); }
.label__ja { font-size: 13px; font-weight: 700; color: #6B7773; }
.message__head { margin-bottom: 64px; }
.message__ttl { font-size: 40px; line-height: 1.55; letter-spacing: .03em; color: var(--primary-dark); }
.message__inner { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.3fr); gap: 72px; align-items: start; }
.message__aside { position: sticky; top: 120px; }
.message__photo { position: relative; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; margin: 0; border: 1px solid #6C9985; border-radius: 6px; background: #F3F7FA; }
.message__photo img { position: absolute; width: 190%; max-width: none; height: auto; left: -45%; top: -12%; }
.profile { margin-top: 26px; }
.profile__name { font-size: 24px; color: var(--primary-dark); }
.profile__name span { display: block; margin-top: 6px; font-size: 14px; font-weight: 400; color: #5C6466; }
.profile__role { margin: 14px 0; font-size: 14px; color: #5C6466; }
.profile > p:not(.profile__role) { font-size: 15px; line-height: 1.9; }
.profile__list { margin-top: 22px; padding: 8px 20px; border-radius: 8px; background: #fff; }
.profile__list li { position: relative; padding: 14px 0 14px 18px; font-size: 15px; }
.profile__list li + li { border-top: 1px solid #CBD9C5; }
.profile__list li::before { content: ""; position: absolute; left: 0; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--accent); }
.profile__list b { color: var(--primary); }
.message__story { font-size: 16px; line-height: 2.05; }
.message__story p + p { margin-top: 20px; padding-top: 20px; border-top: 1px solid #DDCFAB; }
.message__story .em { margin: 28px 0; padding: 18px 22px; border: 0; border-radius: 8px; background: #EAF0E4; font-size: 21px; font-weight: 700; line-height: 1.8; color: var(--primary-dark); }
.message__story .em + p { border: 0; padding-top: 0; }
.message__sign { text-align: right; font-weight: 700; color: var(--primary-dark); }

/* ==========================================================
   ガイドのルミ：左下でセクションごとにひとこと
   ========================================================== */
.guide { position: fixed; left: 18px; bottom: 18px; z-index: 40; display: flex; align-items: flex-end; gap: 6px; pointer-events: none; opacity: 0; transform: translateY(40px) scale(.7); transform-origin: 20% 100%; transition: opacity .4s, transform .6s cubic-bezier(.34, 1.56, .64, 1); }
.guide.is-show { opacity: 1; transform: none; }
.guide__btn { pointer-events: auto; width: 84px; padding: 0; filter: drop-shadow(0 8px 14px rgba(10,40,30,.18)); }
.guide.is-show .guide__btn > .guide__char > svg { animation: bob 2.4s ease-in-out infinite; transform-origin: 50% 100%; }
.guide__btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 50%; }
.guide__char { display: block; }
.guide__bubble { position: relative; max-width: 270px; margin-bottom: 52px; padding: 12px 16px; border-radius: 18px 18px 18px 4px; background: #fff; color: var(--primary-dark); font-size: 14px; font-weight: 500; line-height: 1.65; box-shadow: 0 10px 26px rgba(10,40,30,.16); transform-origin: 0 100%; transition: opacity .3s, transform .4s cubic-bezier(.34, 1.56, .64, 1); }
.guide__bubble b { color: var(--primary); }
.guide__bubble.is-hide { opacity: 0; transform: scale(.6); }
html.is-modal-open .guide, html.is-menu-open .guide { opacity: 0; }

/* ==========================================================
   Curved section tops
   ========================================================== */
.curve { position: absolute; left: 0; width: 100%; height: 120px; top: -119px; display: block; }
.company .curve path { fill: var(--primary); }
.careers .curve path { fill: var(--dark); }
.contact .curve path { fill: var(--primary); }

/* ==========================================================
   Company
   ========================================================== */
.company { position: relative; z-index: 3; background: var(--primary); color: #fff; padding: 10vh var(--gutter) 22vh; text-align: center; }
.company__bg { position: absolute; inset: 0; pointer-events: none; overflow: clip; }
.company__sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.company__word { position: absolute; left: var(--gutter); top: 50%; font-family: var(--en); font-weight: 600; font-size: 22vw; letter-spacing: -.05em; line-height: 1; color: rgba(255,255,255,.07); white-space: nowrap; transform: translateY(calc(-50% + (var(--cpar, .5) - .5) * 16vh)); }
.company__heart { position: absolute; left: 50%; top: 50%; width: 46vw; transform: translate(calc(-50% + 14vw), -46%); fill: none; stroke: rgba(255,255,255,.14); stroke-width: 1; overflow: visible; }
.company__heart-line { stroke-dasharray: 700; stroke-dashoffset: calc(700 * (1 - var(--draw, 0))); }
.company__heart-ring { transform-box: view-box; transform-origin: 50% 50%; opacity: 0; animation: heartRing 2.2s var(--ease-io) infinite; }
.company__heart-ring--2 { animation-delay: .25s; }
@keyframes heartRing { 0% { transform: scale(1); opacity: 0; } 12% { opacity: .9; } 60%, 100% { transform: scale(1.22); opacity: 0; } }
.company__inner { position: relative; padding-top: 22vh; }
.company__block { margin-bottom: 70px; }
.company__block small, .careers small, .company__catch small, .company__values small { display: block; font-family: var(--en); font-weight: 600; font-size: 13px; letter-spacing: .08em; margin-bottom: 18px; }
.company__block small span, .company__values small span { display: block; margin-top: 6px; font-family: var(--ja); font-size: 12px; font-weight: 500; letter-spacing: .1em; opacity: .8; }
.company__block h3 { font-size: 38px; line-height: 1.5; }
.company__catch { margin-bottom: 110px; }
.company__catch h2 { font-size: 52px; line-height: 1.5; letter-spacing: .04em; }
.company__plus { position: relative; max-width: 900px; margin: 0 auto 110px; padding: 54px 56px 50px; overflow: hidden; border-radius: 8px 48px 8px 48px; background: rgba(15,55,43,.34); border: 1px solid rgba(255,255,255,.24); text-align: left; box-shadow: 0 30px 70px rgba(14,46,37,.18); }
.company__plus::before { content: "Definition"; position: absolute; right: 28px; top: 18px; font-family: var(--en); font-size: 13px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.42); }
.company__plus::after { content: "+"; position: absolute; right: 34px; bottom: -48px; font: 600 190px/1 var(--en); color: rgba(255,255,255,.055); }
.company__plus-label { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 22px; color: #F7D59B; font-size: 14px; font-weight: 700; letter-spacing: .08em; }
.company__plus-label::before { content: ""; width: 34px; height: 2px; background: var(--accent); }
.company__plus-text { position: relative; z-index: 1; max-width: 720px; font-size: clamp(21px, 2.15vw, 32px); font-weight: 500; line-height: 1.8; letter-spacing: .03em; }
.company__plus-text b { color: #F7D59B; background: none; font-weight: 700; }
.company__values { max-width: 980px; margin: 0 auto 130px; text-align: left; }
.company__values > small { padding-left: 6px; }
.company__values ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; overflow: hidden; border: 1px solid rgba(255,255,255,.25); border-radius: 24px; background: rgba(255,255,255,.18); }
.company__values li { position: relative; display: grid; grid-template-columns: 54px 1fr; align-items: center; gap: 4px; min-height: 118px; padding: 24px 28px; background: rgba(21,66,52,.86); color: #fff; font-size: 17px; font-weight: 600; line-height: 1.7; }
.company__values li:last-child { grid-column: 1 / -1; }
.company__values li b { align-self: stretch; display: flex; align-items: flex-start; padding-top: 3px; font-family: var(--en); font-size: 13px; letter-spacing: .12em; color: #F7D59B; }
.company__sub { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 0 auto 34px; max-width: 980px; font-size: 26px; }
.company__sub::before, .company__sub::after { content: ""; flex: 1; height: 1px; background: rgba(255,255,255,.3); }
.members { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; max-width: 980px; margin: 0 auto; text-align: left; }
.member { position: relative; display: flex; flex-direction: column; padding: 0 0 24px; overflow: hidden; border-radius: 8px 30px 8px 8px; background: #F8F5EF; color: var(--text); box-shadow: 0 22px 60px rgba(12,45,35,.18); }
.member::before { content: ""; position: absolute; z-index: 2; top: 0; right: 0; width: 42px; height: 42px; border-radius: 0 0 0 28px; background: var(--accent); }
.member__photo { aspect-ratio: 4 / 3; overflow: hidden; background: #E9EEEA; }
.member__photo .ph { width: 100%; height: 100%; }
.member__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; transition: transform .7s var(--ease-out), filter .5s; }
.member:hover .member__photo img { transform: scale(1.035); }
.member__role { margin: 22px 24px 0; font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--primary); }
.member__name { margin: 3px 24px 0; font-size: 24px; color: var(--primary-dark); }
.member__catch { margin: 12px 24px 22px; font-size: 14px; line-height: 1.8; color: #555; }
.member__btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; margin: auto 24px 0; padding: 10px 10px 10px 18px; border: 1px solid rgba(47,107,87,.45); border-radius: 6px; color: var(--primary); font-size: 14px; font-weight: 700; transition: background .3s, color .3s; }
.member__btn .arrow { width: 26px; height: 20px; }
.member__btn:hover { background: var(--primary); color: #fff; }
.member__btn:hover .arrow { background: #fff; }
.member__btn:hover .arrow::before { background: var(--primary); }

/* ==========================================================
   Careers
   ========================================================== */
.careers { position: relative; z-index: 4; background: var(--dark); color: #fff; padding: 22vh var(--gutter) 30vh; text-align: center; overflow: visible; }
.careers small { font-size: 26px; font-weight: 500; margin-bottom: 30px; }
.careers h2 { font-size: 38px; line-height: 1.5; margin-bottom: 34px; }
.careers p { font-size: 15px; line-height: 2; margin-bottom: 40px; }
.careers .careers__terms { margin-top: -22px; font-size: 14px; font-weight: 700; letter-spacing: .04em; }
.careers .careers__terms span { display: inline-block; }
.careers .chip { position: relative; min-height: 58px; padding: 14px 14px 14px 26px; overflow: hidden; border: 0; border-radius: 8px; background: #F7F2E9; color: var(--primary-dark); box-shadow: 0 16px 40px rgba(0,0,0,.24); }
.careers .chip::before { content: "Open Positions"; margin-right: 14px; padding-right: 18px; border-right: 1px solid rgba(47,107,87,.24); font: 600 11px/1 var(--en); letter-spacing: .12em; text-transform: uppercase; color: var(--primary); }
.careers .chip:hover { color: #fff; background: var(--primary); transform: translateY(-2px); }
.rings { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.rings i { animation-duration: 9s !important; position: absolute; left: 50%; top: 50%; border: 1.5px solid rgba(255,255,255,.16); box-shadow: 0 0 40px rgba(109,170,143,.14), inset 0 0 40px rgba(109,170,143,.08); border-radius: 50%; transform: translate(-50%, -50%) scale(var(--s, 1)); animation: ring 8s linear infinite; }
.rings i:nth-child(1) { width: 36vw; height: 36vw; } .rings i:nth-child(2) { width: 60vw; height: 60vw; animation-delay: -1.8s; } .rings i:nth-child(3) { width: 84vw; height: 84vw; animation-delay: -3.6s; } .rings i:nth-child(4) { width: 108vw; height: 108vw; animation-delay: -5.4s; } .rings i:nth-child(5) { width: 132vw; height: 132vw; animation-delay: -7.2s; }
@keyframes ring { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.45); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.25); } }

/* ==========================================================
   Contact
   ========================================================== */
.contact { position: relative; z-index: 5; background: var(--primary); color: #fff; padding: 12vh 0 18vh; overflow: hidden; overflow: clip; overflow-clip-margin: 120px; }
.contour-bg--blue { opacity: .6; }
.contact__stage { position: relative; height: 900px; max-width: 1440px; margin: 0 auto; }
.contact__balloon { position: absolute; left: 26%; top: 20px; width: 34%; transform: translate3d(0, var(--by, 0px), 0) rotate(var(--br, -8deg)); filter: drop-shadow(0 30px 40px rgba(0,0,0,.25)); }
.contact__balloon svg { display: block; width: 100%; }
.contact__title { position: absolute; left: 2.6%; top: 150px; font-family: var(--en); font-weight: 600; font-size: 13.4vw; letter-spacing: -.045em; line-height: 1; white-space: nowrap; }
.contact__hand { position: absolute; border-radius: 45% 55% 40% 60% / 50% 45% 55% 50%; }
.contact__hand img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.95) contrast(.9); opacity: .22; mix-blend-mode: luminosity; }
.contact__hand--l { left: -4%; bottom: 40px; width: 36%; height: 380px; transform: translateX(var(--hl, 0px)) rotate(-12deg); }
.contact__hand--r { right: -4%; top: 400px; width: 36%; height: 320px; transform: translateX(var(--hr, 0px)) rotate(8deg); }
.bubble { position: absolute; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #fff; background: radial-gradient(circle at 35% 30%, rgba(122,178,152,.96), rgba(79,140,115,.95) 50%, rgba(47,107,87,.97)); box-shadow: inset 0 0 40px rgba(255,255,255,.25), 0 20px 60px rgba(10,40,30,.25); transition: transform .6s cubic-bezier(.34, 1.56, .64, 1); animation: bubble 6s ease-in-out infinite; }
.bubble--contact, .bubble--dl { text-shadow: 0 1px 10px rgba(10,40,30,.28); }
.bubble:hover { transform: scale(1.06); }
.bubble small { font-family: var(--en); font-weight: 600; font-size: 14px; margin-bottom: 10px; }
.bubble strong { font-size: 34px; margin-bottom: 14px; }
.bubble span { font-size: 22px; line-height: 1.7; margin-bottom: 20px; }
.bubble .arrow { width: 34px; height: 26px; }
.bubble--contact { width: 386px; height: 386px; left: 24%; top: 330px; }
.bubble--dl { width: 330px; height: 330px; left: 50%; top: 440px; animation-delay: -2s; background: radial-gradient(circle at 35% 30%, rgba(140,194,169,.95), rgba(63,127,103,.92) 60%, rgba(38,92,74,.95)); }
.bubble--career { width: 270px; height: 270px; left: 38%; top: 680px; padding: 0 24px; background: radial-gradient(circle at 35% 30%, #fff, #F3EEE6 60%, #E4DED4); color: var(--text); animation-delay: -4s; }
@keyframes bubble { 0%, 100% { translate: 0 0; } 33% { translate: 6px -10px; } 66% { translate: -6px 6px; } }

/* ==========================================================
   Footer
   ========================================================== */
.footer { position: relative; z-index: 5; background: var(--dark); color: #fff; padding: 90px 5.7vw 80px; font-family: var(--en); }
.footer__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 70px; }
.footer__brand { display: flex; align-items: center; gap: 24px; }
.footer__brand .logo { font-size: 34px; }
.footer__pagetop { display: inline-flex; gap: 12px; align-items: center; font-weight: 600; }
.footer__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 64px 0; }
.footer__social { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 28px; font-size: 20px; font-weight: 700; }
.footer__social span { opacity: .45; cursor: default; }
.footer__col button { padding: 0; text-align: left; font-family: var(--ja); }
.footer__col { border-left: 1px solid rgba(255,255,255,.15); padding-left: 32px; display: flex; flex-direction: column; gap: 16px; }
.footer__col h4 { font-size: 19px; font-weight: 600; margin-bottom: 10px; }
.footer__col h4.mt { margin-top: 12px; }
.footer__col a, .footer__col button { font-size: 15px; font-weight: 600; color: rgba(255,255,255,.5); transition: color .3s; }
.footer__col a:hover, .footer__col button:hover { color: #fff; }
.footer__col h4, .footer__col a, .footer__col button, .footer__legal { font-family: var(--ja); }
.footer__col--big { border-left: 1px solid rgba(255,255,255,.15); }
.footer__col--big a { font-size: 19px; color: #fff; }
.footer__legal { grid-column: 1 / 3; display: flex; flex-direction: column; gap: 10px; font-size: 13px; font-weight: 600; color: rgba(255,255,255,.5); }
.footer__legal p { margin-top: 90px; color: #fff; font-size: 15px; }
.footer__legal { grid-column: 1 / 2; grid-row: 2; }
.footer__col--others { grid-column: 2; grid-row: 2; }
.footer__cta { grid-column: 3; grid-row: 2; }
.footer__cta { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding-left: 32px; }
.footer__btn { display: inline-flex; align-items: center; gap: 12px; background: var(--primary); border-radius: 99px; padding: 16px 32px 16px 20px; font-weight: 600; transition: background .3s; }
.footer__btn:hover { background: #3F8069; }
.footer__btn i { width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.35); }


/* ==========================================================
   Work card lens (hover): a ring follows the pointer and reveals
   a blue "rear" copy of the card inside it
   ========================================================== */
.work-card { position: relative; }
.work-card .card__media { aspect-ratio: 4 / 3; }
.lens { position: absolute; inset: 0 0 auto; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 8px; pointer-events: none; z-index: 2; }
/* the lens stays on the picture: the copy underneath is never covered while reading */
.lens__rear { position: absolute; inset: 0; background: var(--primary); color: #fff; border-radius: 8px; clip-path: circle(var(--lr, 0px) at var(--lx, 50%) var(--ly, 50%)); }
.lens__rear .card__media--rear .ph { filter: grayscale(1) brightness(.9); transform: scale(1.18); transform-origin: var(--lx, 50%) var(--ly, 50%); }
.lens__rear .card__media--rear { position: relative; }
.lens__rear .card__media--rear::after { content: ""; position: absolute; inset: 0; background: var(--primary-bright); opacity: .5; border-radius: 8px; mix-blend-mode: multiply; }
.lens__rear .card__tag { background: transparent; color: #fff; border-color: #fff; }
.lens__rear .card__desc { color: rgba(255,255,255,.85); }
.lens__ring { position: absolute; left: var(--lx, 50%); top: var(--ly, 50%); width: calc(var(--lr, 0px) * 2); height: calc(var(--lr, 0px) * 2); transform: translate(-50%, -50%); border-radius: 50%; box-shadow: inset 0 0 0 4px rgba(255,255,255,.6), inset 0 0 18px 8px rgba(255,255,255,.35), 0 0 0 1px rgba(47,107,87,.5), 0 12px 30px rgba(10,40,30,.25); }
@media (hover: none) { .lens { display: none; } }

/* ==========================================================
   Edge character: peeks in from the side of a section
   ========================================================== */
.edge-chara { position: absolute; width: 120px; z-index: 4; pointer-events: none; transition: transform 1s cubic-bezier(.34, 1.56, .64, 1); }
.edge-chara--right { right: 0; top: 64%; transform: translateX(110%) rotate(-18deg); }
.edge-chara--left { left: 0; top: 30%; transform: translateX(-110%) rotate(18deg); }
.edge-chara--right.is-peek { transform: translateX(38%) rotate(-18deg); }
.edge-chara--left.is-peek { transform: translateX(-38%) rotate(18deg); }
.feeds { overflow: clip; }
.work { overflow-x: clip; }


/* ==========================================================
   Jobs: grayscale photos drifting around the copy
   ========================================================== */
.careers { overflow: clip; overflow-clip-margin: 130px; }
.career-floats { position: absolute; inset: 0; pointer-events: none; }
.float-card { position: absolute; width: var(--w); aspect-ratio: 4 / 3; transform: translate(-50%, -50%) translateY(calc(var(--jp, 0) * var(--depth) * -140px)); }
.float-card__inner { width: 100%; height: 100%; border-radius: 14px; overflow: hidden; box-shadow: 0 24px 50px rgba(0,0,0,.35); animation: drift var(--dur) ease-in-out infinite; animation-delay: var(--delay); opacity: 0; transition: opacity 1.2s var(--ease-out); }
.careers.is-in .float-card__inner { opacity: .9; }
.float-card__inner .ph { width: 100%; height: 100%; }
.float-card__inner .media-img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) brightness(.7) contrast(.9); }
@keyframes drift {
  0%, 100% { transform: translate(0, 0) rotate(-3deg); }
  25% { transform: translate(14px, -18px) rotate(2deg); }
  50% { transform: translate(-6px, -30px) rotate(4deg); }
  75% { transform: translate(-16px, -10px) rotate(-1deg); }
}
.careers__inner { position: relative; z-index: 1; }

/* ==========================================================
   Feeds: image wipes up, copy follows (staggered per card)
   ========================================================== */
.feed__title { overflow: hidden; }
.feed__title .ch { display: inline-block; transform: translateY(110%); transition: transform 1.3s var(--ease-out); transition-delay: calc(var(--i) * .06s); }
.feed.is-in .feed__title .ch { transform: none; }
/* fade-up: opacity + short rise + blur clearing, triggered per card as it enters */
.feed__grid .card { opacity: 0; transform: translate3d(0, 32px, 0); filter: blur(10px); transition: opacity 1.2s cubic-bezier(.25, .46, .45, .94), transform 1.4s cubic-bezier(.22, 1, .36, 1), filter 1.2s cubic-bezier(.25, .46, .45, .94); transition-delay: var(--fd, 0s); }
.feed__grid .card.is-shown { opacity: 1; transform: none; filter: none; }
.feed__grid .card__media .ph { transform: scale(1.08); transition: transform 1.8s cubic-bezier(.22, 1, .36, 1); transition-delay: var(--fd, 0s); }
.feed__grid .card.is-shown .card__media .ph { transform: scale(1); }
.feed__grid .card.is-shown:hover .card__media .ph { transform: scale(1.05); transition-delay: 0s; transition-duration: 1.2s; }
.feed__grid .card:hover .card__title { color: var(--primary); }
.feed__grid .card__title { transition: color .3s; }


/* ==========================================================
   コーチング版で追加した要素
   ========================================================== */
.company__data { max-width: 760px; margin: 0 auto 110px; text-align: left; border-top: 1px solid rgba(255,255,255,.3); }
.company__data div { display: grid; grid-template-columns: 9em 1fr; gap: 16px; padding: 18px 8px; border-bottom: 1px solid rgba(255,255,255,.3); font-size: 15px; line-height: 1.7; }
.company__data dt { font-weight: 700; }
.company__data dd { margin: 0; }
.footer__disclaimer { margin-top: 8px; font-size: 12px; font-weight: 500; line-height: 1.7; font-family: var(--ja); }
.footer .logo .logo__mark { width: 88px; height: 34px; }
.footer .logo .logo__text { font-size: 24px; }



/* ==========================================================
   Programs：行をクリックすると、ルミが案内する詳細モーダルが開く
   ========================================================== */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.platform { outline: none; }
.platform:focus-visible { box-shadow: inset 0 0 0 2px #fff; }
.platform__more { display: inline-flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 700; white-space: nowrap; }
.platform__plus { position: relative; width: 38px; height: 38px; border-radius: 50%; background: #fff; transition: transform .5s cubic-bezier(.34, 1.56, .64, 1), background .3s; }
.platform__plus::before, .platform__plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; margin: -1px 0 0 -7px; background: var(--primary); border-radius: 2px; }
.platform__plus::after { transform: rotate(90deg); }
.platform:hover .platform__plus { transform: rotate(90deg) scale(1.12); background: var(--accent); }
.platforms__compare { display: flex; width: fit-content; align-items: center; gap: 10px; margin-top: 18px; padding: 8px 10px 8px 18px; border: 1px solid rgba(255,255,255,.55); border-radius: 99px; color: #fff; font-weight: 700; font-size: 13px; transition: background .3s, color .3s; }
.platforms__compare:hover { background: #fff; color: var(--primary); }
.platforms__compare .arrow { width: 26px; height: 20px; }

html.is-modal-open, html.is-modal-open body { overflow: hidden; }
.svc-modal { padding: 0; border: 0; background: transparent; max-width: none; max-height: none; width: 100%; height: 100%; overflow: hidden; color: var(--text); }
.svc-modal[open] { display: grid; place-items: center; }
.svc-modal::backdrop { background: rgba(12, 28, 23, .55); animation: svcFade .35s ease both; }
.svc-modal.is-closing::backdrop { animation: svcFade .26s ease reverse both; }
.svc-modal__inner { position: relative; width: min(760px, calc(100vw - 48px)); max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); overflow-y: auto; overscroll-behavior: contain; background: var(--muted); border-radius: 28px; box-shadow: 0 40px 90px rgba(0, 0, 0, .3); animation: svcIn .55s cubic-bezier(.34, 1.4, .64, 1) both; }
.svc-modal.is-closing .svc-modal__inner { animation: svcOut .26s ease-in both; }
@keyframes svcFade { from { opacity: 0; } }
@keyframes svcIn { from { opacity: 0; transform: translateY(48px) scale(.94); } }
@keyframes svcOut { to { opacity: 0; transform: translateY(32px) scale(.96); } }
.svc-modal__close { position: sticky; top: 14px; z-index: 5; display: block; width: 44px; height: 44px; margin: 14px 14px -58px auto; border-radius: 50%; background: #fff; box-shadow: 0 6px 16px rgba(0,0,0,.15); transition: transform .4s cubic-bezier(.34, 1.56, .64, 1); }
.svc-modal__close:hover { transform: rotate(90deg); }
.svc-modal__close span { position: absolute; left: 13px; right: 13px; top: 21px; height: 2px; background: var(--primary); border-radius: 2px; }
.svc-modal__close span:first-child { transform: rotate(45deg); } .svc-modal__close span:last-child { transform: rotate(-45deg); }

/* ---------- モーダルの共通パーツ ---------- */
.svc[hidden] { display: none; }
.svc-modal button:focus-visible, .svc-modal a:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.svc-modal__foot { padding: 26px 40px 34px; background: #EAF0E4; text-align: center; font-size: 12px; line-height: 1.8; color: #555; }
.svc-modal__cta { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 14px; padding: 16px 18px 16px 30px; border-radius: 99px; background: var(--primary); color: #fff; font-weight: 700; font-size: 16px; transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), background .3s; }
.svc-modal__cta:hover { transform: translateY(-2px); background: var(--primary-dark); }
.svc__next-btn { display: inline-flex; align-items: center; gap: 10px; margin-top: 14px; padding: 12px 14px 12px 26px; border: 2px solid var(--primary); border-radius: 999px; background: var(--primary); color: #fff; font-size: 15px; font-weight: 700; letter-spacing: .04em; transition: background-color .2s; }
.svc__next-btn .arrow { background: #fff; width: 26px; height: 20px; }
.svc__next-btn .arrow::before { background: var(--primary); }
.svc__next-btn:hover { background: var(--primary-dark); }
.svc__next-btn--sub { background: #fff; color: var(--primary); }
.svc__next-btn--sub .arrow { background: var(--primary); }
.svc__next-btn--sub .arrow::before { background: #fff; }
.svc__next-btn--sub:hover { background: var(--primary-pale); }
.sp-only { display: none; }

/* ---------- プログラム詳細：ルミとたどる体験ストーリー（coaching-service-lp の css/extend.css より） ---------- */
.svc-modal--story .svc-modal__inner { width: min(1000px, calc(100vw - 40px)); background: #FBF8F3; border-radius: 22px; }
.svc-modal--story .svc__head { position: relative; background: transparent; color: #245542; padding: 48px 42px 20px; }
.svc-modal--story .svc__step { padding: 0 36px 0 0; font-size: 12px; font-weight: 700; letter-spacing: .06em; }
.svc-modal--story .svc__ttl { margin-top: 10px; font-size: 34px; line-height: 1.5; letter-spacing: .02em; }
.svc-modal--story .svc__ruby { display: block; margin: 0; font-size: 14px; font-weight: 500; opacity: .85; }
.svc-modal--story .svc__lead { margin-top: 12px; font-size: 17px; font-weight: 700; line-height: 1.9; }
.svc-modal--story .svc__body { padding: 12px 44px 40px; font-size: 16px; line-height: 1.85; }
.story-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: center; }
.story-hero__image { width: 100%; height: auto; border-radius: 20px; }
.story-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; padding: 12px 24px 20px; }
.story-chips li { padding: 6px 14px; border-radius: 30px; background: #E4EDDF; font-size: 12px; color: #245542; font-weight: 700; }
.story-heading { width: fit-content; margin: 32px 0 18px; padding: 2px 12px; background: #F6EACC; color: #245542; font-size: 21px; border-radius: 4px 16px 16px 4px; }
.story-note { font-size: 12px; color: #5C6466; text-align: center; }
.story-check { display: grid; gap: 10px; }
.story-check li { display: flex; gap: 12px; align-items: flex-start; }
.story-check svg { flex: 0 0 22px; width: 22px; height: 22px; margin-top: 4px; }
.story-flow { position: relative; display: grid; gap: 18px; padding-left: 24px; }
.story-flow::before { content: ""; position: absolute; left: 5px; top: 24px; bottom: 30px; border-left: 2px dashed #D8BB7B; }
.story-flow > li { position: relative; display: grid; grid-template-columns: 145px minmax(0, 1fr); gap: 24px; align-items: center; padding: 20px 26px; background: #fffdf8; border: 1px solid #E5EADD; border-radius: 18px; }
.story-flow > li::before { content: ""; position: absolute; left: -25px; top: 28px; width: 10px; height: 10px; border-radius: 50%; background: #B58E4D; border: 2px solid #FBF8F3; }
.story-flow__visual { text-align: center; }
.story-flow__tag { display: inline-block; padding: 2px 18px; background: var(--primary); color: #fff; border-radius: 30px; font-size: 14px; font-weight: 700; }
.story-art { display: block; width: 100%; height: auto; object-fit: contain; }
.story-flow .story-art { height: 100px; margin-top: 6px; }
.story-flow h4 { font-size: 23px; color: #245542; margin-bottom: 6px; }
.story-flow h4 small { display: block; margin-top: 4px; font-size: 16px; color: #245542; letter-spacing: .02em; }
.story-flow p { font-size: 16px; }
.story-flow > .story-flow__night { background: #284C54; color: #FBF8F3; border-color: #284C54; }
.story-flow__night h4 { color: #FBF8F3; }
.story-flow__night .story-flow__tag { background: #E4EBD9; color: #244C40; }
.story-night-art { position: relative; height: 106px; margin-top: 6px; }
.story-night-art__moon { position: absolute; left: 18%; top: 4px; width: 30px; height: 30px; border-radius: 50%; box-shadow: 8px 6px 0 0 #EBD393; transform: rotate(-20deg); }
.story-night-art__lumi { position: absolute; left: 50%; bottom: 0; width: 76px; transform: translateX(-30%); }
.story-gifts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px; }
.story-gifts > li { padding: 20px 18px; background: #FFFEFA; border: 1px solid #D9C598; border-radius: 7px 14px 14px 7px; box-shadow: 3px 4px 0 #EFE5D0; }
.story-gifts h4 { font-size: 17px; color: #245542; margin: 10px 0 6px; }
.story-gifts p { font-size: 15px; }
.story-paper { display: block; width: 27px; height: 33px; border: 2px solid #719C83; border-radius: 3px; background: repeating-linear-gradient(transparent 0 5px, #ACC5AE 5px 6px, transparent 6px 9px) center / 14px 22px no-repeat; }
.story-speech { display: flex; align-items: center; gap: 18px; margin-top: 28px; padding: 16px 24px; border-radius: 20px; background: #F6EDD8; }
.story-speech__lumi { flex: 0 0 72px; width: 72px; }
.story-speech p { font-size: 16px; }
.story-next { text-align: center; margin-top: 20px; }
.story-next--multi { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.story-next--multi .svc__next-btn { margin-top: 0; }
.story-next--sub { margin-top: 12px; }
.story-booking { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.story-booking--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.story-booking li { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px; border: 1px solid #DCE4D7; border-radius: 12px; text-align: center; font-weight: 700; color: #245542; }
.story-booking b { color: #245542; font-size: 20px; font-family: var(--en); }
.story-booking small { display: block; margin-top: 4px; font-size: 14px; font-weight: 400; color: #515C56; line-height: 1.6; }
.story-self { display: grid; grid-template-columns: minmax(0, 1fr) 96px minmax(0, 1fr); align-items: stretch; max-width: 680px; margin: 0 auto; padding: 8px 0; }
.story-self__me { display: flex; flex-direction: column; justify-content: center; padding: 26px 22px; border-radius: 40% 40% 36% 36% / 30% 30% 28% 28%; text-align: center; }
.story-self__me--social { background: #DDE8E8; }
.story-self__me--origin { background: #DFE9CE; }
.story-self b { font-size: 18px; color: #245542; }
.story-self p { font-size: 15px; margin-top: 8px; }
.story-self__gap { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; }
.story-self__gap::before { content: ""; position: absolute; top: 12%; bottom: 12%; left: 50%; border-left: 2px dashed var(--accent); }
.story-self__gap-mark { position: relative; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: #FFFDFA; border: 2px solid var(--accent); color: #245542; font-weight: 700; font-size: 16px; }
.story-self__gap p { position: relative; margin: 0; padding: 2px 6px; background: #FFFDFA; color: #245542; font-size: 14px; font-weight: 700; line-height: 1.5; white-space: nowrap; }
.story-caption { margin: 18px 0 0; text-align: center; color: #245542; font-size: 16px; }
.story-prerequisite { padding: 10px 18px; border-radius: 10px; background: #F6EACC; color: #245542; }
.story-support { border: 1px solid #D9BC78; border-radius: 18px; padding: 26px; margin-top: 28px; background: #FFFDF6; }
.story-support h3 { font-size: 22px; color: #245542; margin-bottom: 12px; }
.story-support ol { display: flex; position: relative; justify-content: space-between; gap: 8px; margin: 24px 0 12px; padding: 0; list-style: none; }
.story-support ol::before { content: ""; position: absolute; top: 18px; left: 18px; right: 18px; height: 2px; background: #AAC7AC; }
.story-support li { position: relative; width: 36px; height: 36px; display: grid; place-items: center; background: var(--primary); color: #fff; border-radius: 50%; font-family: var(--en); font-weight: 600; }
.story-compare-head { text-align: center; }
.story-overview { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 620px; margin: 20px auto 0; gap: 16px; }
.story-overview img { height: 100px; }
.story-overview b { display: block; font-size: 16px; margin-top: 8px; }
.story-compare { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.story-compare__card { min-width: 0; display: flex; flex-direction: column; padding: 18px; background: #FFFEFA; border: 1px solid #CBDCC8; border-radius: 16px; }
.story-compare__card header { min-height: 140px; }
.story-compare__card header img { height: 90px; }
.story-compare__card h3 { font-size: 21px; color: #245542; }
.story-compare__card dl { margin: 14px 0; }
.story-compare__card dt { color: #245542; font-size: 14px; font-weight: 700; }
.story-compare__card dd { margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid #E3E9DD; font-size: 15px; }
.story-compare__card .svc__next-btn { margin-top: auto; justify-content: center; padding: 10px; }
@media (min-width: 768px) {
  .story-gifts--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .story-gifts--5 > li:first-child { grid-column: span 2; }
}

/* ---------- 採用：募集中の職種 ---------- */

/* ---------- メンバー紹介（coaching-service-lp のコーチ紹介モーダルより） ---------- */
.member-modal .svc-modal__inner { width: min(1040px, calc(100vw - 32px)); background: #FBF8F3; border-radius: 20px; color: #245542; }
.coach-modal__content { position: relative; padding: 16px 40px 36px; }
.coach-modal__grid { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 40px; }
.coach-modal__identity { position: sticky; top: 64px; align-self: start; text-align: center; border-right: 1px solid #D4DFD6; padding-right: 32px; }
.coach-modal__photo { aspect-ratio: 1; border-radius: 16px; overflow: hidden; }
.coach-modal__photo .ph { width: 100%; height: 100%; }
.coach-modal__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.coach-modal__label { font-family: var(--en); font-weight: 600; font-size: 12px; letter-spacing: .15em; margin: 22px 0 8px; }
.coach-modal__identity h2 { font-size: 28px; line-height: 1.5; }
.coach-modal__kana { margin-top: 4px; font-size: 14px; color: #52675D; }
.coach-modal__role { font-size: 15px; font-weight: 700; line-height: 1.8; margin-top: 12px; }
.coach-modal__tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 14px; }
.coach-modal__tags li { padding: 4px 10px; border-radius: 999px; background: #E5EEE5; font-size: 13px; line-height: 1.6; }
.coach-modal__body { min-width: 0; color: #283C34; padding-top: 44px; }
.coach-modal__foot { margin-top: 40px; padding-top: 28px; border-top: 1px solid #D4DFD6; text-align: center; }
.coach-modal__cta { display: inline-flex; align-items: center; gap: 12px; padding: 16px 20px 16px 30px; border-radius: 999px; background: var(--primary); color: #fff; font-weight: 700; font-size: 16px; }
.coach-modal__cta:hover { background: var(--primary-dark); }
.coach-modal__back { display: block; width: min(100%, 340px); min-height: 48px; margin: 16px auto 0; border: 1px solid var(--primary); border-radius: 24px; padding: 12px 22px; font-size: 16px; color: #245542; }
.coach-modal__back:hover { background: #E5EEE5; }
.cp-headline { font-size: 26px; font-weight: 700; line-height: 1.6; color: #245542; }
.cp-intro { margin-top: 20px; font-size: 16px; line-height: 1.95; }
.cp-points { padding: 18px 20px; margin: 20px 0 0; border-radius: 12px; background: #EAF0E8; }
.cp-points li { position: relative; padding-left: 22px; font-size: 16px; line-height: 1.75; font-weight: 700; color: #245542; }
.cp-points li + li { margin-top: 6px; }
.cp-points li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.cp-note { margin-top: 8px; font-size: 13px; color: #5C6466; }
.cp-chapter { margin-top: 44px; }
.cp-chapter h3, .cp-box h3, .cp-values h3, .cp-qa h3 { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; font-size: 19px; font-weight: 700; color: #245542; }
.cp-chapter h3::before { content: ""; flex: 0 0 24px; height: 3px; border-radius: 2px; background: var(--accent); }
.cp-chapter h3::after, .cp-box h3::after, .cp-values h3::after, .cp-qa h3::after { content: ""; flex: 1; height: 1px; background: #CFDBD3; }
.cp-chapter p { font-size: 16px; line-height: 2; }
.cp-chapter p + p { margin-top: 14px; }
.cp-quote { padding: 14px 18px; border-left: 3px solid var(--primary); background: #FFFDFA; font-weight: 700; color: #245542; }
.cp-sign { margin-top: 24px !important; text-align: right; font-size: 15px; font-weight: 700; color: #245542; }
.cp-box, .cp-values, .cp-qa { margin-top: 48px; }
.cp-box { padding: 24px 24px 22px; border-radius: 14px; background: #FFFDFA; border: 1px solid #D9E3DA; }
.cp-check { margin: 0 0 14px; }
.cp-check li { position: relative; padding: 10px 0 10px 30px; font-size: 16px; line-height: 1.7; border-bottom: 1px dashed #D5DFD6; }
.cp-check li::before { content: ""; position: absolute; left: 4px; top: 15px; width: 14px; height: 8px; border-left: 2.5px solid var(--primary); border-bottom: 2.5px solid var(--primary); transform: rotate(-45deg); }
.cp-box > p { font-size: 16px; line-height: 1.9; }
.cp-values ol { margin: 0; padding: 0; list-style: none; counter-reset: cpv; display: grid; gap: 12px; }
.cp-values li { counter-increment: cpv; position: relative; padding: 16px 18px 16px 58px; border-radius: 12px; background: #EAF0E8; font-size: 16px; line-height: 1.85; }
.cp-values li::before { content: counter(cpv); position: absolute; left: 16px; top: 16px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--primary); color: #fff; font: 600 14px/1 var(--en); }
.cp-values b { display: block; margin-bottom: 2px; font-size: 17px; color: #245542; }
.cp-qa dl { margin: 0; display: grid; gap: 14px; }
.cp-qa dt { position: relative; padding-left: 34px; font-size: 16px; font-weight: 700; color: #245542; line-height: 1.7; }
.cp-qa dd { position: relative; margin: 4px 0 0; padding: 0 0 14px 34px; border-bottom: 1px solid #E1E8E1; font-size: 16px; line-height: 1.9; }
.cp-qa dt::before, .cp-qa dd::before { position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font: 600 13px/1 var(--en); }
.cp-qa dt::before { content: "Q"; background: var(--primary); color: #fff; }
.cp-qa dd::before { content: "A"; background: #F3E3C2; color: #8A5B12; top: 3px; }

@media (max-width: 767px) {
  .sp-only { display: inline; }
  .pc-br { display: none; }
  .svc-modal--story .svc-modal__inner, .member-modal .svc-modal__inner { width: 100%; }
  .svc-modal--story .svc__head { padding: 30px 20px 0; }
  .svc-modal--story .svc__ttl { font-size: 28px; margin-top: 12px; }
  .svc-modal--story .svc__step { min-height: 26px; padding-right: 50px; }
  .svc-modal--story .svc__lead { font-size: 16px; }
  .story-hero { grid-template-columns: 1fr; gap: 16px; }
  .story-hero__image { max-height: 220px; object-fit: cover; }
  .story-chips { padding: 16px 20px 8px; gap: 7px; }
  .story-chips li { padding: 5px 10px; }
  .svc-modal--story .svc__body { padding: 12px 20px 28px; }
  .story-heading { font-size: 19px; margin-top: 28px; }
  .story-flow { padding-left: 17px; gap: 16px; }
  .story-flow::before { left: 3px; }
  .story-flow > li { grid-template-columns: 76px minmax(0, 1fr); gap: 12px; padding: 16px 12px; }
  .story-flow > li::before { left: -20px; }
  .story-flow__tag { padding: 3px 10px; font-size: 12px; }
  .story-flow .story-art { height: 76px; }
  .story-night-art { height: 82px; }
  .story-night-art__lumi { width: 56px; }
  .story-flow h4 { font-size: 20px; }
  .story-flow p, .story-flow h4 small { font-size: 15px; }
  .story-gifts { grid-template-columns: 1fr; gap: 12px; }
  .story-gifts > li { padding: 16px 14px; }
  .story-speech { padding: 14px 12px; gap: 10px; }
  .story-speech__lumi { flex-basis: 50px; width: 50px; }
  .story-speech p { font-size: 15px; }
  .story-booking, .story-booking--4 { grid-template-columns: 1fr; gap: 8px; }
  .story-booking li { flex-direction: row; text-align: left; gap: 16px; }
  .story-self { grid-template-columns: 1fr; }
  .story-self__me { padding: 20px 18px; border-radius: 28px; }
  .story-self__gap { flex-direction: row; padding: 10px 0; }
  .story-self__gap::before { top: 0; bottom: 0; }
  .story-self__gap-mark { width: 52px; height: 52px; }
  .story-support { padding: 20px 16px; }
  .story-support h3 { font-size: 20px; }
  .story-support li { width: 30px; height: 30px; }
  .story-support ol::before { top: 15px; }
  .story-overview { gap: 6px; }
  .story-overview img { height: 72px; }
  .story-overview b { font-size: 14px; }
  .story-compare { grid-template-columns: 1fr; }
  .story-compare__card header { display: flex; align-items: center; min-height: 0; justify-content: space-between; }
  .story-compare__card header img { width: 84px; height: 68px; }
  .story-compare__card dl { display: grid; grid-template-columns: 6em minmax(0, 1fr); gap: 0 10px; }
  .story-compare__card dt, .story-compare__card dd { margin: 0; padding: 10px 0; border-bottom: 1px solid #E3E9DD; }
  .story-next--multi .svc__next-btn { width: 100%; justify-content: center; }
  .svc-modal--story .svc__next-btn { max-width: 100%; padding: 12px 18px; font-size: 15px; }
  .svc-modal__cta { width: 100%; justify-content: center; }
  .coach-modal__content { padding: 16px 20px 30px; }
  .coach-modal__grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .coach-modal__identity { position: static; display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 16px; align-items: start; text-align: left; padding: 0 50px 0 0; border: 0; }
  .coach-modal__label { margin: 0 0 4px; }
  .coach-modal__identity h2 { font-size: 23px; }
  .coach-modal__role { margin-top: 6px; }
  .coach-modal__tags { justify-content: flex-start; margin-top: 10px; }
  .coach-modal__body { padding-top: 0; }
  .cp-headline { font-size: 22px; }
  .cp-chapter { margin-top: 36px; }
  .cp-chapter h3, .cp-box h3, .cp-values h3, .cp-qa h3 { font-size: 18px; gap: 10px; }
  .cp-box { padding: 20px 16px; }
  .cp-values li { padding: 14px 14px 14px 50px; }
  .cp-values li::before { left: 12px; top: 14px; }
  .coach-modal__cta { width: 100%; justify-content: center; padding: 15px 18px; font-size: 15px; }
}
@media (max-width: 374px) {
  .svc-modal--story .svc__head { padding-inline: 16px; }
  .svc-modal--story .svc__body { padding-inline: 14px; }
  .svc-modal--story .svc__ttl { font-size: 25px; }
  .story-flow > li { grid-template-columns: 62px minmax(0, 1fr); padding-inline: 10px; gap: 10px; }
}

@media (max-width: 1023.98px) {
  .platform { grid-template-columns: 28px 1fr; }
  .platform__more { grid-column: 2; margin-top: 12px; font-size: 13px; }
  .platform__plus { width: 30px; height: 30px; }
  /* SP: a bottom sheet */
  .svc-modal[open] { place-items: end center; }
  .svc-modal__inner { width: 100%; max-height: 92vh; max-height: 92dvh; border-radius: 24px 24px 0 0; animation: svcSheet .4s cubic-bezier(.22, 1, .36, 1) both; }
  .svc-modal.is-closing .svc-modal__inner { animation: svcSheetOut .26s ease-in both; }
  @keyframes svcSheet { from { transform: translateY(100%); } }
  @keyframes svcSheetOut { to { transform: translateY(100%); } }
  .svc-modal__foot { padding: 22px 18px calc(26px + env(safe-area-inset-bottom)); }
  .svc-modal__foot br { display: none; }
  .svc-modal__cta { font-size: 15px; padding: 14px 16px 14px 24px; }
}

/* ==========================================================
   SP menu：右からスライドイン
   ========================================================== */
.header__menu span { transition: transform .35s var(--ease-out), top .35s var(--ease-out); }
.drawer { position: fixed; inset: 0; z-index: 90; visibility: hidden; pointer-events: none; transition: visibility 0s linear .5s; }
.drawer.is-open { visibility: visible; pointer-events: auto; transition-delay: 0s; }
.drawer__backdrop { position: absolute; inset: 0; background: rgba(12, 28, 23, .5); opacity: 0; transition: opacity .4s ease; }
.drawer.is-open .drawer__backdrop { opacity: 1; }
.drawer__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(88vw, 420px); background: var(--primary); color: #fff; display: flex; flex-direction: column; padding: 0 24px calc(28px + env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; transform: translate3d(100%, 0, 0); transition: transform .5s cubic-bezier(.22, 1, .36, 1); box-shadow: -20px 0 50px rgba(0, 0, 0, .18); }
.drawer.is-open .drawer__panel { transform: none; }
.drawer__head { display: flex; align-items: center; justify-content: space-between; height: 72px; flex: none; }
.drawer__close { width: 44px; height: 44px; border-radius: 50%; background: #fff; position: relative; }
.drawer__close span { position: absolute; left: 13px; right: 13px; top: 21px; height: 2px; background: var(--primary); }
.drawer__close span:first-child { transform: rotate(45deg); } .drawer__close span:last-child { transform: rotate(-45deg); }
.drawer__list { margin-top: 12px; border-top: 1px solid rgba(255, 255, 255, .22); }
.drawer__list li { border-bottom: 1px solid rgba(255, 255, 255, .22); opacity: 0; transform: translate3d(24px, 0, 0); transition: opacity .45s ease, transform .5s cubic-bezier(.22, 1, .36, 1); }
.drawer.is-open .drawer__list li { opacity: 1; transform: none; transition-delay: calc(.12s + var(--i, 0) * .04s); }
.drawer__list a { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 16px 4px; }
.drawer__list b { font-weight: 700; font-size: 18px; letter-spacing: .06em; }
.drawer__list small { font-family: var(--en); font-weight: 600; font-size: 12px; opacity: .6; }
.drawer__cta { display: grid; gap: 10px; margin-top: 28px; }
.drawer__btn { display: block; text-align: center; padding: 15px; border-radius: 99px; border: 1px solid rgba(255, 255, 255, .6); font-weight: 700; font-size: 15px; }
.drawer__btn--main { background: #fff; color: var(--primary); border-color: #fff; }
html.is-menu-open, html.is-menu-open body { overflow: hidden; }
@media (min-width: 1200px) { .drawer { display: none; } }

/* ==========================================================
   SP（〜1023px）：大きな横移動を外し、安定した縦の物語にする。
   390px幅では各章の軽量な完了スクロールだけを戻す。
   ========================================================== */
.is-sp main *, .is-sp main *::before, .is-sp main *::after,
.is-sp .footer *, .is-sp .header__inner * { animation: none !important; transition: none !important; }
.is-sp .reveal, .is-sp .work__grid .card, .is-sp .platforms__list .platform,
.is-sp .feed__grid .card { opacity: 1 !important; transform: none !important; filter: none !important; }
.is-sp .feed__grid .card__media .ph { transform: none; }
.is-sp .ch.rise, .is-sp .feed__title .ch { transform: none !important; opacity: 1 !important; }
.is-sp [data-typo="highlight"] .ch { color: var(--primary); }
.is-sp [data-typo="flash"] .ch { color: var(--pink); }
.is-sp .platforms [data-typo="flash"]:nth-child(2) .ch { color: #fff; }
.is-sp [data-typo="contour"] .ch { color: #fff; -webkit-text-stroke-color: transparent; }
/* hero: one plain screen */
.is-sp .hero { height: 100vh; height: 100svh; }
.is-sp .hero__sticky { position: relative; }
.is-sp .hero__visual { clip-path: none; }
.is-sp .hero__visual::after { display: none; }
.is-sp .hero__title { opacity: 1 !important; filter: none !important; transform: translate(-50%, -50%) !important; }
.is-sp .hero__ja { opacity: 1 !important; translate: none !important; }
.is-sp .hero__ja-line { transform: none !important; opacity: 1 !important; }
.is-sp .mascot--hero { opacity: 1 !important; transform: none !important; }
.is-sp .business { margin-top: 0; padding-top: 14vh; padding-bottom: 12vh; }
.is-sp .work { translate: none; }
/* Client Voices: a plain dark block, heading on top */
.is-sp .pull-stage { height: auto; margin-top: 0; }
.is-sp .pull-sticky { position: relative; height: auto; }
.is-sp .pull-panel { position: relative; height: auto; transform: none; padding: 12vh 0 6vh; }
.is-sp .pull-edge, .is-sp .mascot--pull { display: none; }
.is-sp .interview__heading { opacity: 1; }
.is-sp .interview__body { margin-top: 0; background: var(--dark); }
.is-sp .interview__list { margin-top: 0; }
/* the pinned horizontal headline is motion only */
.is-sp .latest { display: none; }
.is-sp .company__heart-line { stroke-dashoffset: 0; }
.is-sp .company__heart-ring { display: none; }
.is-sp .company__word { transform: translateY(-50%); }
.is-sp .rings { display: none; }
.is-sp .float-card { transform: translate(-50%, -50%); }
.is-sp .float-card__inner { opacity: .9 !important; }
.is-sp .contact__balloon { transform: translate3d(-50%, 0, 0) rotate(-8deg); }
.is-sp .edge-chara--right { transform: translateX(38%) rotate(-18deg); }
.is-sp .edge-chara--left { transform: translateX(-38%) rotate(18deg); }
.is-sp .work__sky i { animation: cloudDrift 14s ease-in-out infinite !important; }
.is-sp .work__sky i:nth-child(even) { animation-delay: -6s !important; animation-duration: 18s !important; }

/* ==========================================================
   Responsive
   ========================================================== */
@media (max-width: 1023.98px) {
  :root { --gutter: 4.27vw; }
  .header__inner { height: 72px; padding: 0 16px; }
  .header__nav { display: none; }
  .header .logo { border: 0; }
  .logo__mark { width: 58px; height: 22px; }
  .logo__text { font-size: 18px; }
  .mascot--hero { width: 84px; right: 16px; bottom: 20px; }
  .company__data div { grid-template-columns: 1fr; gap: 4px; padding: 14px 4px; font-size: 14px; }
  .hero__title-line > span { display: block; }
  .footer__top { flex-wrap: wrap; gap: 28px 16px; }
  .footer__brand { flex-wrap: wrap; gap: 12px 20px; }
  .footer__pagetop { white-space: nowrap; }
  .footer__pagetop { margin-left: auto; }
  .header__menu { display: block; }
  .hero__title { width: 92vw; font-size: 9.8vw; line-height: 1.38; letter-spacing: .03em; }
  .hero__ja { left: 50%; bottom: auto; top: calc(50% + 27vw); transform: translateX(-50%); width: max-content; max-width: 92vw; font-size: 3.7vw; line-height: 1.6; gap: .35em; }
  .hero { height: 280vh; }
  .business { grid-template-columns: 1fr; gap: 10vh; margin-top: -180vh; min-height: 0; padding-top: 132vh; align-content: start; }
  .business__line { display: none; }
  .business__col--right { text-align: left; }
  .business__title { font-size: 13vw; }
  .business__lead { font-size: 5vw; }
  .section-heading { font-size: 20vw; }
  .work__body { grid-template-columns: 1fr; }
  .work__grid { grid-template-columns: 1fr; }
  .interview__heading { font-size: 18vw; white-space: normal; }
  .pull-edge { height: 200px; top: -199px; }
  .mascot--pull { width: 84px; transform: translate3d(calc(var(--px, 50vw) - 42px), calc(var(--py, 100vh) - 90px), 0) rotate(var(--pr, 0deg)); }
  .pull-panel { padding-top: 16vh; }
  .interview__list, .feed__grid { grid-template-columns: 1fr; gap: 48px; }
  .interview__list .card:nth-child(n) { margin-top: 0; }
  .platforms__head { flex-direction: column; align-items: flex-start; }
  .platforms__head .section-heading { font-size: 20vw; }
  .platform__name { font-size: 24px; }
  .latest__word { font-size: 26vw; }
  .feeds { padding: 10vh 4.27vw; }
  .company__block h3, .careers h2 { font-size: 24px; }
  .contact__stage { height: 1000px; }
  .contact__balloon { left: 20%; width: 60%; }
  .contact__title { font-size: 21vw; white-space: normal; top: 120px; left: 4%; line-height: .95; }
  .bubble--contact { width: 280px; height: 280px; left: 4%; top: 400px; }
  .bubble--dl { width: 250px; height: 250px; left: auto; right: 2%; top: 600px; }
  .bubble--career { width: 200px; height: 200px; left: 10%; top: 780px; }
  .bubble strong { font-size: 24px; }
  .contact__hand { display: none; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__legal { grid-column: 1 / -1; order: 9; }
  .footer__cta, .footer__social { grid-column: 1 / -1; }
  .footer__legal, .footer__col--others, .footer__cta { grid-row: auto; }
  .footer__col--others { grid-column: auto; }
}

/* header collapses before the nav runs out of room */
@media (max-width: 1199.98px) {
  .header__nav { display: none; }
  .header__menu { display: block; }
  .header .logo { border: 0; }
}

/* ---------- SP layout tuned to the reference's mobile rhythm ---------- */
@media (max-width: 1023.98px) {
  .business { text-align: center; justify-items: center; }
  .business__col, .business__col--right { text-align: center; }
  .business__lead br { display: none; }
  .work { padding: 16vh 4.27vw 26vh; }
  .work__body { grid-template-columns: 1fr; }
  .work__filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 36px; font-size: 13px; }
  .work__grid { gap: 56px; }
  .work-card .card__media { aspect-ratio: 16 / 9; }
  .work-card .card__title { font-size: 20px; }
  .edge-chara { width: 84px; }
  .interview__list .card__media::before { width: 64px; height: 64px; margin: -32px 0 0 -32px; font-size: 13px; }
    .feed__grid { display: grid; grid-auto-flow: column; grid-auto-columns: 74vw; grid-template-columns: none; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -4.27vw; padding: 0 4.27vw 8px; scrollbar-width: none; }
  .feed__grid::-webkit-scrollbar { display: none; }
  /* horizontal swipe only: no inner vertical scroll, vertical swipes go to the page */
  .feed__grid { overflow-y: hidden; overscroll-behavior-x: contain; touch-action: pan-x pan-y; }
  .feed__grid .card { scroll-snap-align: start; }
  .feed__grid { scroll-padding-inline: 4.27vw; }
  .feed__title { font-size: 30px; }
  .float-card { width: calc(var(--w) * .5); }
  .careers { padding: 20vh 4.27vw 26vh; }
  .careers small { font-size: 20px; }
  .careers p br { display: none; }
  /* keep drifting photos above and below the copy on narrow screens */
  .float-card:nth-child(1) { left: 14% !important; top: 7% !important; }
  .float-card:nth-child(2) { left: 84% !important; top: 12% !important; }
  .float-card:nth-child(3) { left: 50% !important; top: 4% !important; }
  .float-card:nth-child(4) { left: 86% !important; top: 90% !important; }
  .float-card:nth-child(5) { left: 16% !important; top: 92% !important; }
  .float-card:nth-child(6) { left: 52% !important; top: 97% !important; }
  .latest { height: 240vh; }
}
@media (hover: none) { /* tablets: two columns instead of one oversized card per row */
@media (min-width: 600px) and (max-width: 1023.98px) {
  .work__grid { grid-template-columns: 1fr 1fr; gap: 48px 24px; }
  .interview__list { grid-template-columns: 1fr 1fr; gap: 40px 24px; padding: 0 6vw; }
  .interview__list .card:nth-child(2) { margin-top: 60px; }
  .feed__grid { grid-auto-columns: 44vw; }
}
}

/* ---------- SP: lower sections follow the reference's mobile flow ---------- */
@media (max-width: 1023.98px) {
  .feeds { padding-bottom: 20vh; }

  /* about */
  .company { padding: 6vh 4.27vw 16vh; }
  .company__inner { padding-top: 8vh; }
  .company__word { top: 22%; font-size: 30vw; }
  .company__heart { width: 86vw; transform: translate(-50%, -40%); }
  .company__block { margin-bottom: 48px; }
  .company__block p { margin-top: 24px; font-size: 13px; }
  .company__block p br { display: none; }

  /* jobs: four photos, kept inside the section */
  .careers { overflow: clip; overflow-clip-margin: 0px; padding: 30vh 4.27vw 34vh; }
  .float-card:nth-child(3), .float-card:nth-child(6) { display: none; }
  .float-card:nth-child(1) { left: 22% !important; top: 12% !important; }
  .float-card:nth-child(2) { left: 76% !important; top: 9% !important; }
  .float-card:nth-child(4) { left: 78% !important; top: 80% !important; }
  .float-card:nth-child(5) { left: 24% !important; top: 84% !important; }

  /* contact: title, balloon and bubbles in one vertical flow */
  .contact { padding: 10vh 0 14vh; }
  .contact__stage { height: auto; display: flex; flex-direction: column; align-items: center; padding: 0 4.27vw; }
  .contact__balloon { left: 50%; top: -10px; width: 64vw; transform: translate3d(-50%, var(--by, 0px), 0) rotate(var(--br, -8deg)); }
  .contact__title { position: relative; left: auto; top: auto; margin: 70px 0 34px; font-size: 20vw; text-align: center; }
  .bubble { position: relative; left: auto !important; right: auto !important; top: auto !important; }
  .bubble--contact { width: 250px; height: 250px; align-self: flex-start; }
  .bubble--dl { width: 220px; height: 220px; align-self: flex-end; margin-top: -54px; }
  .bubble--career { width: 210px; height: 210px; align-self: flex-start; margin: -40px 0 0 8%; }
  .bubble--career strong { font-size: 18px; }
  .bubble--career span { max-width: 150px; line-height: 1.5; }
  .bubble strong { font-size: 22px; margin-bottom: 10px; }
  .bubble span { font-size: 16px; margin-bottom: 14px; }

  /* footer: nav, buttons side by side, social, legal */
  .footer { padding: 64px 6.4vw 56px; }
  .footer__top { margin-bottom: 44px; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 40px 20px; }
  .footer__col, .footer__col--big { border-left: 0; padding-left: 0; gap: 14px; }
  .footer__col h4 { font-size: 16px; margin-bottom: 4px; }
  .footer__col a { font-size: 13px; }
  .footer__col--big a { font-size: 16px; }
  .footer__cta { order: 6; grid-column: 1 / -1; flex-direction: row; padding-left: 0; gap: 10px; }
  .footer__btn { flex: 1; justify-content: center; padding: 12px 10px; font-size: 13px; white-space: nowrap; font-family: var(--ja); }
  .footer__btn i { width: 24px; height: 24px; }
  .footer__social { order: 7; grid-column: 1 / -1; font-size: 20px; }
  .footer__legal { order: 8; grid-column: 1 / -1; }
  .footer__legal p { margin-top: 28px; font-size: 12px; }
}

/* ---------- SP：今回追加したセクション（ストーリー・メッセージ・理念・メンバー・ガイド） ---------- */
@media (max-width: 1023.98px) {
  .work__side { position: static; width: 100%; min-width: 0; padding: 0; }
  .work__lead { font-size: 18px; margin-bottom: 18px; }
  .work__filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 36px; font-size: 13px; }
  .work__filter button { padding: 7px 14px; border: 1px solid #E4DED4; border-radius: 99px; background: #fff; color: #555; }
  .work__filter button::before { display: none; }
  .work__filter button.is-active { background: var(--primary); border-color: var(--primary); color: #fff; }
  .work-card .card__title { font-size: 19px; }
  .work-card .card__tags, .work-card .card__title, .work-card .card__who, .work-card .card__desc { margin-left: 4px; margin-right: 4px; }
  .platforms { padding-top: 18vh; }
  .platform__name { font-size: 22px; }

  .message { padding: 12vh 4.27vw 16vh; }
  .message__head { margin-bottom: 40px; }
  .message__ttl { font-size: 21px; word-break: auto-phrase; }
  .message__inner { grid-template-columns: 1fr; gap: 36px; }
  .message__aside { position: static; max-width: 440px; width: 100%; margin: 0 auto; }
  .message__photo { max-width: 320px; margin-inline: auto; }
  .message__story { font-size: 15px; line-height: 2; }
  .message__story .em { font-size: 18px; padding: 16px; }

  .company__catch { margin-bottom: 64px; }
  .company__catch h2 { font-size: 26px; }
  .company__plus { margin-bottom: 56px; padding: 24px 18px; border-radius: 18px; }
  .company__plus::before { right: 18px; top: 14px; font-size: 10px; }
  .company__plus-text { font-size: 16px; }
  .company__plus-text br { display: none; }
  .company__values { margin-bottom: 72px; }
  .company__values ol { grid-template-columns: 1fr; border-radius: 16px; }
  .company__values li, .company__values li:last-child { grid-column: auto; min-height: 0; grid-template-columns: 40px 1fr; gap: 8px; padding: 18px 16px; font-size: 14px; }
  .company__values li b { font-size: 17px; }
  .company__sub { font-size: 20px; margin-bottom: 24px; }
  .company__data { margin-bottom: 72px; }
  .members { grid-template-columns: 1fr; gap: 14px; }
  .member { display: grid; grid-template-columns: 104px minmax(0, 1fr); column-gap: 14px; padding: 12px; border-radius: 14px; }
  .member::before { width: 28px; height: 28px; }
  .member__photo { grid-row: 1 / 5; aspect-ratio: 1; border-radius: 10px; }
  .member__role { margin: 0; }
  .member__name { margin: 2px 0 0; font-size: 19px; }
  .member__catch { margin: 6px 0 12px; font-size: 13px; }
  .member__btn { justify-self: start; margin: 0; padding: 8px 8px 8px 14px; border-radius: 5px; font-size: 13px; }

  .guide { left: 10px; bottom: 12px; }
  .guide__btn { width: 60px; }
  .guide__bubble { max-width: min(250px, calc(100vw - 96px)); margin-bottom: 38px; padding: 10px 13px; font-size: 13px; }
  .guide__phrase { display: inline-block; } /* 文節ごとに折り返す。枠の幅は js/main.js が文章量に合わせて詰める */
  .footer__social { font-size: 17px; }
}
@media (max-width: 599.98px) {
  .guide { left: auto; right: 8px; bottom: 8px; flex-direction: row-reverse; }
  .guide__btn { width: 52px; }
  .guide__bubble { display: block; max-width: min(250px, calc(100vw - 76px)); margin: 0 0 42px; padding: 9px 12px; border-radius: 17px 17px 4px 17px; font-size: 12px; line-height: 1.58; transform-origin: 100% 100%; }
  .careers .chip { width: 100%; justify-content: center; padding: 14px 16px; }
  .careers .chip::before { display: none; }
}
@media (max-width: 1023.98px) and (min-width: 600px) {
  .members { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .member { display: flex; }
  .member__photo { aspect-ratio: 4 / 3; }
  .member__role { margin-top: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
.edge-chara--feeds { top: 30%; }
.member__photo--okudaira img { object-position: 50% 0; transform: scale(1.7); transform-origin: 50% 12%; }
.story-note--origin { margin-top: 10px; text-align: left; color: inherit; opacity: .8; }

/* ---------- トップのお知らせ欄：一覧へ／リンクのない予定 ---------- */
.feeds__all { display: flex; justify-content: center; margin-top: 64px; }
.feed__grid a.card { display: block; }
.feed__grid .card--static { cursor: default; }
.feed__grid .card__meta--soon { background: var(--accent); border-color: var(--accent); color: var(--primary-dark); margin-right: 6px; }
.company__more { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: -64px 0 110px; }
@media (max-width: 1023.98px) { .feeds__all { margin-top: 44px; } .company__more { margin: -40px 0 72px; } }
@media (min-width: 1024px) { .bubble--career strong { font-size: 26px; } }
/* Programs：ホバーで大きくなる＋が右端に詰まらないよう、右に余白 */
.platform { padding-right: 28px; }
@media (max-width: 1023.98px) { .platform { padding-right: 12px; } }
@media (max-width: 1023.98px) { .lens { aspect-ratio: 16 / 9; } }
@media (max-width: 1023.98px) { .bubble.bubble--career strong { font-size: 19px; white-space: nowrap; } }

/* ---------- 2026-10 調整：採用ボタン・結果プラス・行動基準・コーチ紹介 ---------- */
/* 採用ボタン：ホバーで緑になっても「Open Positions」が読めるように */
.careers .chip:hover::before { color: #CFE5DA; border-right-color: rgba(255,255,255,.35); }
/* 「結果プラス」とは：余白を広げて、ゆったり読めるように */
.company__plus { padding: 76px 84px 72px; }
.company__plus-label { font-size: 24px; margin-bottom: 26px; }
.company__plus::before { right: 36px; top: 26px; }
/* 行動基準・在り方：見出しを大きく */
.company__values small { font-size: 13px; margin-bottom: 24px; }
.company__values small span { margin-top: 10px; font-size: 24px; font-weight: 700; letter-spacing: .08em; opacity: 1; }
.company__values li { font-size: 18px; }
.company__values li b { font-size: 15px; }
/* 代表メッセージ：LP のコーチ紹介に合わせ、段落の区切り線をなくす */
.message__story p + p { padding-top: 0; border-top: 0; }
@media (max-width: 1023.98px) {
  .company__plus { padding: 40px 24px 36px; }
  .company__plus-label { font-size: 20px; margin-bottom: 18px; }
  .company__values small span { font-size: 19px; }
  .company__values li, .company__values li:last-child { font-size: 15px; }
}
.member__photo--shimazaki img { object-position: 40% 50%; }
/* 井澤：PC・タブレットの 4:3 枠は横長、SP の正方形枠は正方形の写真（index.html の picture） */
.member__photo--izawa picture { display: contents; }
.member__photo--izawa img { object-position: 50% 50%; }

/* Value：メンバーのカードと同じ見た目（クリーム地＋右上の山吹）で、01〜05 を1枚ずつ */
.company__values ol { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; padding: 0; margin: 0; list-style: none; overflow: visible; border: 0; border-radius: 0; background: none; }
.company__values li, .company__values li:last-child { grid-column: span 2; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; min-height: 0; padding: 30px 26px 30px; overflow: hidden; border-radius: 8px 30px 8px 8px; background: #F8F5EF; color: var(--primary-dark); box-shadow: 0 22px 60px rgba(12,45,35,.18); font-size: 18px; font-weight: 700; line-height: 1.7; }
.company__values li:nth-child(n+4) { grid-column: span 3; }
.company__values li::before { content: ""; position: absolute; top: 0; right: 0; width: 42px; height: 42px; border-radius: 0 0 0 28px; background: var(--accent); }
.company__values li b { align-self: auto; display: block; padding: 0 0 12px; border-bottom: 2px solid var(--accent); font-family: var(--en); font-size: 34px; font-weight: 700; line-height: 1; letter-spacing: .04em; color: var(--primary); }
@media (max-width: 1023.98px) {
  .company__values ol { grid-template-columns: 1fr; gap: 12px; }
  .company__values li, .company__values li:last-child, .company__values li:nth-child(n+4) { grid-column: auto; flex-direction: row; align-items: center; gap: 16px; padding: 18px 48px 18px 18px; border-radius: 8px 22px 8px 8px; font-size: 15px; }
  .company__values li::before { width: 28px; height: 28px; border-radius: 0 0 0 20px; }
  .company__values li b { flex: none; padding: 0 0 6px; font-size: 24px; }
}

/* ==========================================================
   MY PLUS JOURNEY — Phase 1
   Existing sections keep their structure; these layers give the scroll a
   continuous story from fog, to core, to route, to the next world.
   ========================================================== */

/* Hero: soft foreground fog + the label that appears with the inner crystal */
.hero__visual canvas { position: relative; z-index: 0; }
.hero__mist { position: absolute; z-index: 1; inset: 0; overflow: hidden; opacity: var(--fog, 1); pointer-events: none; will-change: opacity, transform; }
.hero__mist i { position: absolute; display: block; border-radius: 50%; filter: blur(18px); background: radial-gradient(ellipse at center, rgba(232,244,238,.34) 0, rgba(220,238,229,.2) 42%, rgba(220,238,229,0) 72%); transform: scale(calc(.84 + var(--fog, 1) * .22)); }
.hero__mist i:nth-child(1) { left: -12vw; top: 7vh; width: 64vw; height: 50vh; }
.hero__mist i:nth-child(2) { right: -15vw; top: 20vh; width: 58vw; height: 55vh; }
.hero__mist i:nth-child(3) { left: 18vw; right: 16vw; bottom: -22vh; height: 52vh; }
.hero__shade { z-index: 2; }
.hero__core-label { position: absolute; z-index: 3; left: 50%; top: calc(var(--clip-y, 50%) + 9.7vh); padding: 7px 11px; transform: translate(-50%, 16px); border: 1px solid rgba(255,255,255,.42); border-radius: 99px; background: rgba(24,48,41,.34); opacity: var(--core-o, 0); color: #fff; font-family: var(--en); font-size: 10px; font-weight: 600; letter-spacing: .16em; text-shadow: 0 3px 14px rgba(10,40,30,.3); white-space: nowrap; backdrop-filter: blur(5px); }
.hero__route-start { position: absolute; z-index: 1; left: 50%; top: 66%; bottom: 0; width: 28px; transform: translateX(-50%); opacity: var(--route-o, 0); pointer-events: none; }
.hero__route-start::before { content: ""; position: absolute; left: 50%; top: 0; width: 11px; height: 11px; transform: translate(-50%,-50%) rotate(45deg); background: var(--accent); box-shadow: 0 0 0 7px rgba(232,163,61,.13); }
.hero__route-start i { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; transform: translateX(-50%) scaleY(var(--route-o, 0)); transform-origin: top; background: linear-gradient(var(--accent), rgba(255,255,255,.65) 55%, rgba(255,255,255,0)); }

/* Business: trial session and program read as one continuous direction. */
.business::before { content: ""; position: absolute; z-index: 0; left: 4vw; right: 4vw; bottom: 34vh; height: 28vh; background: linear-gradient(90deg, rgba(47,107,87,.035), rgba(47,107,87,.13)); clip-path: polygon(0 18%,84% 18%,84% 0,100% 50%,84% 100%,84% 82%,0 82%); pointer-events: none; }
.business__col, .business__line { z-index: 1; }
.business__line { bottom: 48vh; }

/* Programs: three existing modal triggers become checkpoints on one route */
.platforms__journey { position: relative; max-width: 1120px; margin: 0 auto; padding-bottom: 20px; }
.platforms__route { position: absolute; z-index: 0; inset: 10px 0 80px; width: 100%; height: calc(100% - 90px); overflow: visible; pointer-events: none; }
.platforms__route path { fill: none; stroke: rgba(247,213,155,.78); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--route, 0)); vector-effect: non-scaling-stroke; }
.platforms__list { z-index: 1; display: grid; gap: 76px; border: 0; }
.platforms__highlight { display: none; }
.platform { width: 54%; min-height: 164px; grid-template-columns: 44px minmax(0,1fr) auto; gap: 8px; padding: 26px 26px 26px 24px; overflow: visible; border: 1px solid rgba(255,255,255,.28); border-radius: 8px 32px 8px 8px; background: rgba(20,67,53,.7); box-shadow: 0 24px 58px rgba(13,48,37,.2); backdrop-filter: blur(7px); }
.platform[data-point="2"] { margin-left: auto; }
.platform::after { display: none; }
.platform__icon { align-self: start; margin-top: 31px; background: #F7D59B; }
.platform__chapter { display: block; margin-bottom: 13px; color: #F7D59B; font: 600 11px/1.35 var(--en); letter-spacing: .13em; }
.platform__chapter small { display: block; margin-top: 6px; color: rgba(255,255,255,.7); font-family: var(--ja); font-size: 11px; font-weight: 500; letter-spacing: .06em; }
.platform__sub { max-width: 560px; line-height: 1.7; }
.platforms__destination { position: relative; z-index: 1; width: 54%; min-height: 150px; margin: 80px 0 0 auto; padding: 30px 190px 24px 30px; overflow: hidden; border-top: 1px solid rgba(255,255,255,.3); text-align: left; }
.platforms__destination::before { content: ""; position: absolute; right: 22px; top: 12px; width: 132px; aspect-ratio: 1; border: 1px solid rgba(247,213,155,.34); border-radius: 50%; background: repeating-radial-gradient(ellipse at center, transparent 0 20px, rgba(255,255,255,.08) 21px 22px, transparent 23px 37px); transform: rotate(-10deg); box-shadow: 0 0 38px rgba(163,206,190,.08); }
.platforms__destination::after { content: ""; position: absolute; right: 67px; top: 9px; width: 38px; height: 134px; border: 1px solid rgba(255,255,255,.16); border-top: 0; border-bottom: 0; border-radius: 50%; transform: rotate(-10deg); }
.platforms__destination span, .platforms__destination b { position: relative; z-index: 1; }
.platforms__destination span { display: block; color: #F7D59B; font: 600 11px/1 var(--en); letter-spacing: .16em; }
.platforms__destination b { display: block; margin-top: 10px; font-size: 24px; font-weight: 700; }
.platforms__destination small { display: block; margin-top: 14px; color: #F7D59B; font: 500 14px/1.5 var(--en); letter-spacing: .08em; }
.work-card .media-img, .work-card:hover > .card__media .media-img { filter: none; }

/* Horizontal chapter: preserve the pinned mask, but make it the route itself */
.latest__sticky::after { content: ""; position: absolute; z-index: 0; left: -3%; right: -3%; top: 55%; height: 2px; background: linear-gradient(90deg, transparent, rgba(47,107,87,.35) 12%, rgba(232,163,61,.8) 70%, transparent); transform: rotate(-3deg); }
.latest__layer { z-index: 1; }
.latest__arrow { flex: none; margin-right: .22em; color: var(--accent); font-family: var(--en); font-size: 7vw; line-height: 1; }
.latest__sp { display: none; }
.mascot--fly { z-index: 2; filter: drop-shadow(0 12px 14px rgba(18,61,48,.18)); }
.mascot--fly::before { content: ""; position: absolute; z-index: -1; right: 82%; top: 58%; width: 76px; height: 2px; background: linear-gradient(90deg, transparent, rgba(47,107,87,.44)); box-shadow: 13px -14px 0 -0.5px rgba(47,107,87,.25), 4px 14px 0 -0.5px rgba(232,163,61,.42); transform-origin: right; animation: runLines .72s ease-in-out infinite; }
@keyframes runLines { 50% { transform: scaleX(.62); opacity: .5; } }

/* Contact: a quiet horizon hints that the journey can become a real journey. */
.contact__stage > * { z-index: 1; }
.contact__horizon { position: absolute; z-index: 0 !important; left: -8%; right: -8%; bottom: -34px; height: 190px; overflow: hidden; pointer-events: none; }
.contact__horizon::before { content: ""; position: absolute; right: 9%; top: 24px; width: 210px; aspect-ratio: 1; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; background: repeating-radial-gradient(ellipse at center, transparent 0 25px, rgba(255,255,255,.08) 26px 27px, transparent 28px 48px); transform: rotate(-9deg); }
.contact__horizon::after { content: ""; position: absolute; right: calc(9% + 74px); top: 25px; width: 62px; height: 206px; border: 1px solid rgba(255,255,255,.16); border-top: 0; border-bottom: 0; border-radius: 50%; transform: rotate(-9deg); }
.contact__horizon i { position: absolute; left: 0; right: 0; top: 82px; height: 220px; border-top: 2px solid rgba(255,255,255,.3); border-radius: 50% 50% 0 0; transform: rotate(-2deg); }
.contact__horizon span { position: absolute; z-index: 1; right: 18%; top: 75px; width: 12px; height: 12px; background: var(--accent); clip-path: polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%); filter: drop-shadow(0 0 9px rgba(232,163,61,.7)); }

@media (max-width: 1023.98px) {
  .hero__mist i:nth-child(1) { left: -35vw; width: 105vw; }
  .hero__mist i:nth-child(2) { right: -42vw; width: 105vw; }
  .hero__mist i:nth-child(3) { left: -10vw; right: -10vw; }
  .hero__core-label { font-size: 9px; }
  .hero__route-start { display: none; }

  .business { grid-template-rows: auto 84px auto; gap: 3vh; }
  .business::before { left: 50%; right: auto; top: calc(50% - 74px); bottom: auto; width: 74px; height: 148px; transform: translateX(-50%); background: linear-gradient(180deg, rgba(47,107,87,.03), rgba(47,107,87,.12)); clip-path: polygon(18% 0,82% 0,82% 73%,100% 73%,50% 100%,0 73%,18% 73%); }
  .business__line { display: none; }
  .business__col--left { grid-row: 1; }
  .business__col--right { grid-row: 3; }

  .platforms__journey { padding-left: 46px; }
  .platforms__route { left: 10px; top: 0; bottom: 90px; width: 28px; height: calc(100% - 90px); }
  .platforms__list { gap: 28px; }
  .platform { width: 100%; min-height: 0; margin: 0 !important; grid-template-columns: 28px minmax(0,1fr); padding: 22px 18px; border-radius: 7px 22px 7px 7px; }
  .platform__icon { margin-top: 27px; }
  .platform__more { grid-column: 2; }
  .platforms__destination { width: 100%; min-height: 130px; margin-top: 42px; padding: 24px 118px 18px 0; }
  .platforms__destination::before { right: 2px; width: 108px; }
  .platforms__destination::after { right: 39px; width: 32px; height: 110px; }
  .platforms__destination b { font-size: 20px; }

  .is-sp .latest { display: block; height: auto; padding: 12vh 4.27vw; background: #fff; }
  .is-sp .latest__sticky { display: none; }
  .latest__sp { display: grid; gap: 12px; color: var(--primary-dark); font-family: var(--en); font-size: 11vw; font-weight: 600; line-height: 1; letter-spacing: -.04em; }
  .latest__sp i { color: var(--accent); font-style: normal; }
  .latest__sp strong { color: var(--primary); font-weight: 600; }

  .contact__horizon { bottom: -94px; height: 210px; }
  .contact__horizon i { top: 86px; }
  .contact__horizon::before { right: 3%; width: 172px; }
  .contact__horizon::after { right: calc(3% + 60px); width: 52px; height: 170px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero { --fog: .18; --core-o: 1; --route-o: 0; }
  .business, .platforms { --journey: 1; --route: 1; }
  .new-world-map::before, .new-world-map::after, .new-world-map i, .new-world-map span, .mascot--fly::before { animation: none; }
}

/* ==========================================================
   MY PLUS JOURNEY — Phase 2
   Clear sky, a geometric new world, the origin story and the compass.
   ========================================================== */

/* Stories: the air clears into an unmistakable, soft blue sky. */
.work { overflow: hidden; background: linear-gradient(180deg, #FBF8F3 0%, #C5E7F7 18%, #91CDEB 48%, #D5EDEB 100%); }
.work > :not(.work__sky) { position: relative; z-index: 1; }
.work__sky { position: absolute; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; }
.work__sky::before { content: ""; position: absolute; left: -12vw; right: -12vw; top: 7vh; height: 70vh; background: radial-gradient(ellipse at 20% 28%, rgba(255,255,255,.98) 0 12%, transparent 34%), radial-gradient(ellipse at 72% 12%, rgba(255,255,255,.9) 0 9%, transparent 29%), radial-gradient(ellipse at 52% 58%, rgba(255,255,255,.5), transparent 36%), linear-gradient(180deg, rgba(185,222,235,.58), transparent 76%); filter: blur(5px); }
.work__sky::after { content: ""; position: absolute; left: -9vw; top: 25vh; width: 38vw; height: 15vw; border-radius: 50%; background: radial-gradient(circle at 22% 58%, rgba(255,255,255,.62) 0 21%, transparent 22%), radial-gradient(circle at 43% 38%, rgba(255,255,255,.8) 0 26%, transparent 27%), radial-gradient(circle at 68% 57%, rgba(255,255,255,.58) 0 25%, transparent 26%); filter: blur(5px); opacity: .75; }
.work__sky i { --cloud-r: -5deg; --cloud-x: 18px; position: absolute; width: 32vw; height: 13vw; border-radius: 50%; background: radial-gradient(circle at 16% 62%, rgba(255,255,255,.74) 0 21%, transparent 22%), radial-gradient(circle at 38% 39%, rgba(255,255,255,.96) 0 27%, transparent 28%), radial-gradient(circle at 62% 51%, rgba(255,255,255,.82) 0 30%, transparent 31%), radial-gradient(circle at 84% 66%, rgba(255,255,255,.62) 0 20%, transparent 21%); filter: blur(3px); opacity: .82; transform: rotate(var(--cloud-r)); animation: cloudDrift 14s ease-in-out infinite; }
.work__sky i:first-child { right: -2vw; top: 5%; }
.work__sky i:nth-child(2) { --cloud-r: 4deg; --cloud-x: -14px; left: 31vw; top: 21%; width: 21vw; height: 9vw; opacity: .58; animation-duration: 18s; animation-delay: -7s; }
.work__sky i:nth-child(3) { --cloud-r: 3deg; right: 7vw; top: 38%; width: 27vw; height: 11vw; opacity: .72; animation-duration: 16s; animation-delay: -4s; }
.work__sky i:nth-child(4) { --cloud-r: -2deg; --cloud-x: -22px; left: -7vw; top: 55%; width: 38vw; height: 15vw; opacity: .68; animation-duration: 19s; animation-delay: -10s; }
.work__sky i:nth-child(5) { --cloud-r: 5deg; right: -10vw; top: 72%; width: 35vw; height: 14vw; opacity: .74; animation-duration: 17s; animation-delay: -6s; }
.work__sky i:nth-child(6) { --cloud-r: -4deg; --cloud-x: -12px; left: 24vw; top: 89%; width: 24vw; height: 10vw; opacity: .6; animation-duration: 20s; animation-delay: -13s; }
@keyframes cloudDrift { 0%, 100% { transform: translate3d(0,0,0) rotate(var(--cloud-r)); } 50% { transform: translate3d(var(--cloud-x),-10px,0) rotate(var(--cloud-r)); } }
.journey-chapter { display: flex; align-items: center; gap: 14px; margin-bottom: 34px; color: #71817B; font-size: 12px; font-weight: 700; letter-spacing: .08em; }
.journey-chapter::after { content: ""; width: 74px; height: 1px; background: rgba(47,107,87,.28); }
.journey-chapter span { color: var(--primary); font: 600 11px/1 var(--en); letter-spacing: .16em; }
.work-card__point { position: absolute; z-index: 2; left: 12px; top: 12px; padding: 7px 10px; border: 1px solid rgba(255,255,255,.68); border-radius: 99px; background: rgba(21,57,46,.64); color: #fff; font: 600 9px/1 var(--en); letter-spacing: .12em; backdrop-filter: blur(5px); }

/* Client Voices: the hauled panel opens into a moving geometric world. */
.new-world-map { position: absolute; inset: 0; overflow: hidden; opacity: .72; pointer-events: none; }
.new-world-map::before, .new-world-map::after { content: ""; position: absolute; inset: -18%; background-image: linear-gradient(rgba(150,196,179,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(150,196,179,.08) 1px, transparent 1px); background-size: 72px 72px; transform: perspective(700px) rotateX(58deg) rotateZ(-12deg) translateY(10%); animation: newWorldGrid 18s linear infinite; }
.new-world-map::after { inset: -8%; background: linear-gradient(125deg, transparent 0 44%, rgba(232,163,61,.28) 44.1% 44.35%, transparent 44.45%), linear-gradient(35deg, transparent 0 68%, rgba(163,206,190,.22) 68.1% 68.35%, transparent 68.45%); transform: none; animation: newWorldSweep 12s ease-in-out infinite alternate; }
.new-world-map i { position: absolute; border: 1px solid rgba(163,206,190,.24); box-shadow: inset 0 0 28px rgba(163,206,190,.035), 0 0 30px rgba(46,117,94,.04); transform: rotate(45deg); animation: newWorldFloat 9s ease-in-out infinite alternate; }
.new-world-map i:first-child { left: 7%; top: 24%; width: 16vw; height: 16vw; }
.new-world-map i:nth-child(2) { right: 13%; top: 17%; width: 11vw; height: 11vw; border-radius: 50%; animation-delay: -3s; }
.new-world-map i:nth-child(3) { left: 59%; bottom: 11%; width: 18vw; height: 7vw; transform: skew(-24deg); animation-delay: -6s; }
.new-world-map span { position: absolute; z-index: 1; left: 50%; top: 55%; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: -31vw -16vh 0 1px rgba(163,206,190,.46), -20vw 17vh 0 rgba(255,255,255,.42), -8vw -22vh 0 rgba(255,255,255,.3), 12vw -13vh 0 1px rgba(232,163,61,.62), 23vw 19vh 0 rgba(163,206,190,.48), 35vw -2vh 0 rgba(255,255,255,.34), 3vw 24vh 0 rgba(232,163,61,.42); animation: newWorldParticles 5.5s ease-in-out infinite alternate; }
.new-world-map span::before, .new-world-map span::after { content: ""; position: absolute; left: 50%; top: 50%; border: 1px solid rgba(247,213,155,.26); transform: translate(-50%,-50%) rotate(45deg); }
.new-world-map span::before { width: 18vw; height: 18vw; }
.new-world-map span::after { width: 9vw; height: 9vw; border-color: rgba(163,206,190,.28); border-radius: 50%; }
@keyframes newWorldGrid { to { background-position: 72px 72px, 72px 72px; } }
@keyframes newWorldSweep { to { transform: translate3d(3%, -2%, 0) scale(1.04); opacity: .72; } }
@keyframes newWorldFloat { to { translate: 0 -20px; rotate: 9deg; } }
@keyframes newWorldParticles { to { transform: translate3d(12px,-16px,0) scale(1.18); opacity: .68; } }
.interview__chapter { position: absolute; z-index: 1; left: 50%; top: 11vh; display: flex; align-items: center; gap: 12px; transform: translateX(-50%); color: rgba(255,255,255,.58); font-size: 11px; font-weight: 700; letter-spacing: .08em; white-space: nowrap; }
.interview__chapter span { color: #F7D59B; font: 600 10px/1 var(--en); letter-spacing: .15em; }
.interview__heading { z-index: 1; }

/* Message: keep the founder story simple and editorial. */
.message { overflow: hidden; }
.message::before { display: none; }

/* MVV: existing heart becomes the centre of a quiet compass */
.company__compass { position: absolute; left: calc(50% + 14vw); top: 50%; width: min(26vw, 360px); aspect-ratio: 1; transform: translate(-50%,-50%); border: 1px solid rgba(255,255,255,.13); border-radius: 50%; }
.company__compass::before { content: ""; position: absolute; left: 50%; top: 50%; width: 66px; height: 66px; transform: translate(-50%,-50%); border: 1px solid rgba(255,255,255,.58); border-radius: 50%; background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.95), rgba(221,245,240,.48) 27%, rgba(176,220,209,.18) 55%, rgba(255,255,255,.07) 70%), linear-gradient(135deg, rgba(196,239,255,.35), rgba(244,218,255,.24) 48%, rgba(255,229,169,.24)); box-shadow: inset -8px -8px 18px rgba(132,196,181,.2), inset 8px 6px 16px rgba(255,255,255,.34), 0 0 24px rgba(255,255,255,.15); backdrop-filter: blur(3px); }
.company__compass::after { content: ""; position: absolute; inset: 18%; border: 1px dashed rgba(255,255,255,.14); border-radius: 50%; }
.company__compass i { position: absolute; left: 50%; top: 4%; bottom: 4%; width: 1px; background: linear-gradient(rgba(247,213,155,.65), rgba(255,255,255,.08) 26%, rgba(255,255,255,.08) 74%, rgba(247,213,155,.65)); }
.company__compass i:nth-child(2) { transform: rotate(90deg); }
.company__compass span { position: absolute; left: 50%; top: calc(50% + 48px); transform: translateX(-50%); color: rgba(255,255,255,.68); font: 600 9px/1 var(--en); letter-spacing: .16em; white-space: nowrap; }
.company__compass b { position: absolute; color: #F7D59B; font: 600 9px/1 var(--en); }
.company__compass b:nth-of-type(1) { left: 50%; top: 8px; transform: translateX(-50%); }
.company__compass b:nth-of-type(2) { right: 10px; top: 50%; transform: translateY(-50%); }
.company__compass b:nth-of-type(3) { left: 50%; bottom: 8px; transform: translateX(-50%); }
.company__compass b:nth-of-type(4) { left: 10px; top: 50%; transform: translateY(-50%); }
.company__chapter { display: inline-flex; align-items: center; gap: 13px; margin-bottom: 58px; color: rgba(255,255,255,.72); font-size: 12px; font-weight: 700; letter-spacing: .07em; }
.company__chapter::before { content: ""; width: 10px; height: 10px; background: #F7D59B; clip-path: polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%); }
.company__chapter span { color: #F7D59B; font: 600 10px/1 var(--en); letter-spacing: .16em; }

/* Careers: one route passes through the field of possible companions */
.careers__route { position: absolute; z-index: 0; inset: 10% -8%; overflow: hidden; pointer-events: none; }
.careers__route i { position: absolute; left: -4%; right: -4%; top: 54%; height: 46%; border: 1px solid rgba(247,213,155,.2); border-radius: 50%; transform: rotate(-5deg); }
.careers__route span { position: absolute; right: 19%; top: 51%; width: 9px; height: 9px; transform: rotate(45deg); background: var(--accent); box-shadow: 0 0 0 9px rgba(232,163,61,.08); }

@media (max-width: 1023.98px) {
  .work { background: linear-gradient(180deg, #FBF8F3 0%, #C5E7F7 16%, #91CDEB 50%, #D5EDEB 100%); }
  .work__sky i { width: 52vw; height: 24vw; }
  .journey-chapter { margin-bottom: 24px; font-size: 11px; }
  .work-card__point { left: 9px; top: 9px; font-size: 8px; }
  .interview__chapter { top: 12vh; }
  .new-world-map::before { background-size: 42px 42px; }
  .company__compass { left: 64%; width: 48vw; }
  .company__compass::before { width: 52px; height: 52px; }
  .company__chapter { margin-bottom: 38px; }
  .careers__route { inset: 8% -30%; }
}

@media (max-width: 599.98px) {
  .journey-chapter { align-items: flex-start; flex-direction: column; gap: 7px; }
  .journey-chapter::after { display: none; }
  .interview__chapter { top: 10vh; flex-direction: column; gap: 6px; }
  .company__compass { left: 68%; width: 64vw; opacity: .82; }
  .company__compass span { top: calc(50% + 39px); }
}

/* ==========================================================
   SP final pass — turn the desktop journey into a calm vertical story.
   ========================================================== */
@media (max-width: 599.98px) {
  /* One extra viewport turns the static SP hero into a fog-to-core chapter. */
  .is-sp .hero { height: 182vh; height: 182svh; }
  .is-sp .hero__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; }
  .is-sp .hero__title { opacity: calc(1 - var(--exit, 0)) !important; transform: translate(-50%, calc(-50% + var(--sp-title-y, 0px))) !important; }
  .is-sp .hero__ja { opacity: calc(1 - var(--exit, 0)) !important; transform: translateX(-50%) translateY(var(--sp-ja-y, 0px)) !important; }
  .is-sp .mascot--hero { opacity: calc(1 - var(--exit, 0)) !important; }
  .is-sp .hero__visual canvas { transform: translate3d(0, var(--sp-core-y, 0px), 0); transform-origin: 50% 50%; will-change: transform; }
  .is-sp .hero__visual::after { display: block; left: 50%; border: 1px solid rgba(255,255,255,.76); box-shadow: inset 0 0 0 5px rgba(255,255,255,.18), inset 0 0 28px rgba(217,247,255,.38), 0 0 0 1px rgba(18,68,54,.42), 0 0 28px rgba(196,238,246,.3); }
  .is-sp .hero__visual::before { content: ""; position: absolute; z-index: 2; left: 50%; top: calc(var(--clip-y, 50%) + var(--clip-r, 118px)); bottom: 0; width: 1px; background: linear-gradient(180deg, rgba(229,252,255,.76), rgba(255,255,255,.08)); opacity: var(--ring-o, 0); transform: translateX(-50%); }
  .hero__title { width: 88vw; font-size: clamp(34px, 9.2vw, 42px); line-height: 1.42; text-shadow: 0 3px 3px rgba(8,32,25,.46), 0 10px 30px rgba(8,32,25,.58); }
  .hero__ja { top: calc(50% + 38vw); width: 88vw; max-width: none; font-size: 13px; }
  .hero__core-label { top: calc(var(--clip-y, 50%) + 28vw); padding: 5px 9px; transform: translate(-50%,0); font-size: 8px; }

  .is-sp .business { padding: 12vh 6vw 14vh; gap: 24px; }
  .is-sp .business::after { content: ""; position: absolute; z-index: 0; left: 10vw; right: 10vw; top: 50%; height: 1px; background: linear-gradient(90deg, transparent, rgba(47,107,87,.32) 15%, rgba(47,107,87,.32) 85%, transparent); pointer-events: none; }
  .business__title { margin: 18px 0; font-size: clamp(44px, 12.2vw, 52px); }
  .business__lead { margin-bottom: 30px; font-size: 17px; line-height: 1.72; }

  /* Lightweight fade-ups use the existing intersection observer. */
  .is-sp .reveal, .is-sp .work__grid .card, .is-sp .platforms__list .platform { opacity: 0 !important; transform: translate3d(0, 28px, 0) !important; filter: blur(5px) !important; transition: opacity .72s ease, transform .88s cubic-bezier(.22,1,.36,1), filter .72s ease !important; }
  .is-sp .reveal.is-in, .is-sp .work__grid .card.is-in, .is-sp .platforms__list .platform.is-in { opacity: 1 !important; transform: none !important; filter: none !important; }

  .work { padding: 14vh 6vw 18vh; }
  .work .section-heading { margin-bottom: 6vh; font-size: 18vw; }
  .work__grid { gap: 48px; }
  .work__filter { width: calc(100% + 12vw); max-width: none; min-width: 0; flex-wrap: nowrap; gap: 8px; margin: 0 -6vw 32px; padding: 0 6vw 10px; overflow-x: auto; overflow-y: hidden; scroll-padding-inline: 6vw; scroll-snap-type: x proximity; scrollbar-width: none; }
  .work__filter::-webkit-scrollbar { display: none; }
  .work__filter li { flex: none; scroll-snap-align: start; }
  .work__filter button { white-space: nowrap; }
  .work__sky i { width: 58vw; height: 28vw; }
  .work__sky i:first-child { right: -18vw; top: 4%; }
  .work__sky i:nth-child(2) { left: 7vw; top: 20%; width: 46vw; height: 21vw; }
  .work__sky i:nth-child(3) { right: -8vw; top: 37%; width: 54vw; height: 25vw; }
  .work__sky i:nth-child(4) { left: -18vw; top: 54%; width: 66vw; height: 30vw; }
  .work__sky i:nth-child(5) { right: -17vw; top: 71%; width: 62vw; height: 28vw; }
  .work__sky i:nth-child(6) { left: 7vw; top: 88%; width: 48vw; height: 22vw; }
  .is-sp .work-card { overflow: hidden; padding-bottom: 24px; border: 1px solid rgba(47,107,87,.1); border-radius: 18px; background: rgba(255,255,255,.88); box-shadow: 0 18px 48px rgba(52,91,79,.1); backdrop-filter: blur(6px); }
  .is-sp .work-card > .card__media { border-radius: 17px 17px 0 0; }
  .is-sp .work-card .card__desc { color: #52655E; }
  .is-sp .work-card > .card__media .media-img { filter: none !important; }

  /* Rumi pulls the moving geometric world into Client Voices. */
  .is-sp .pull-stage { position: relative; overflow: visible; }
  .is-sp .pull-sticky { overflow: visible; }
  .is-sp .pull-panel { min-height: 218px; padding: 7vh 6vw 2vh; opacity: var(--sp-pull-o, 0); transform: translate3d(0, var(--sp-pull-y, 176px), 0) !important; will-change: transform, opacity; }
  .is-sp .pull-edge { display: block; top: -148px; height: 149px; }
  .is-sp .mascot--pull { display: block; width: 72px; opacity: var(--po, 0); }
  .is-sp .mascot--pull > svg { animation: bob 2.4s ease-in-out infinite !important; }
  .interview__chapter { top: 4vh; }
  .interview__heading { font-size: 15vw; line-height: 1.05; }
  .new-world-map span { top: 60%; }
  .is-sp .new-world-map::before { animation: newWorldGrid 18s linear infinite !important; }
  .is-sp .new-world-map::after { animation: newWorldSweep 12s ease-in-out infinite alternate !important; }
  .is-sp .new-world-map i { animation: newWorldFloat 9s ease-in-out infinite alternate !important; }
  .is-sp .new-world-map span { animation: newWorldParticles 5.5s ease-in-out infinite alternate !important; }
  .interview__list { padding: 0 6vw; gap: 34px; }
  .interview__body { margin-top: -30px; padding-bottom: 5vh; }

  .platforms { padding: 15vh 6vw 14vh; }
  .platforms__head { gap: 28px; margin-bottom: 8vh; }
  .platforms__head .section-heading { font-size: 18vw; }
  .platforms__desc { padding: 0; }
  .platforms__journey { padding-left: 32px; }
  .platforms__route { display: none; }
  .platforms__list::before { content: ""; position: absolute; left: -18px; top: 8px; bottom: -52px; width: 2px; border-radius: 2px; background: linear-gradient(180deg, rgba(247,213,155,.35), #F7D59B 34%, rgba(247,213,155,.72)); transform: scaleY(var(--route, 0)); transform-origin: top; }
  .platforms__list::after { content: ""; position: absolute; left: -22px; bottom: -52px; width: 8px; height: 8px; border-right: 2px solid #F7D59B; border-bottom: 2px solid #F7D59B; opacity: var(--route, 0); transform: rotate(45deg) scale(var(--route, 0)); }
  .platform { grid-template-columns: 24px minmax(0,1fr); padding: 20px 16px; }
  .platform::before { content: ""; position: absolute; left: -18px; top: 35px; width: 18px; height: 1px; background: rgba(247,213,155,.72); opacity: var(--route, 0); transform: scaleX(var(--route, 0)); transform-origin: left; }
  .platform__name { font-size: 20px; }
  .platform__sub { font-size: 12px; }

  /* Vertical scrolling carries the words horizontally, as it does on desktop. */
  .is-sp .latest { height: 270vh; height: 270svh; min-height: 0; padding: 0; overflow: clip; background: #fff; }
  .is-sp .latest__sticky { display: block; position: sticky; inset: auto; top: 0; height: 100vh; height: 100svh; overflow: hidden; pointer-events: none; }
  .is-sp .latest__layer { display: none; }
  .is-sp .latest__layer--base { display: flex; background: radial-gradient(circle at 78% 32%, rgba(174,226,233,.28), transparent 28%), linear-gradient(180deg, #fff, #F7FBFA); }
  .is-sp .latest__track { padding-left: 86vw; }
  .is-sp .latest__word { flex: none; font-size: 26vw; margin-right: .24em; }
  .is-sp .latest__arrow { font-size: 13vw; margin-right: .28em; }
  .is-sp .latest__word.is-next .latest__char { animation: nextWorldShimmer 3.6s ease-in-out infinite !important; }
  .is-sp .latest__word.is-next::before, .is-sp .latest__word.is-next::after { animation: nextWorldSpark 2.4s ease-in-out infinite !important; }
  .is-sp .latest__word.is-next::after { animation-delay: -1.15s !important; }
  .is-sp .latest__sticky::after { top: 60%; }
  .is-sp .mascot--fly { display: block; width: 68px; opacity: var(--sp-run-o, 0); }
  .is-sp .mascot--fly > svg { animation: bob 1.25s ease-in-out infinite !important; }
  .is-sp .mascot--fly::before { animation: runLines .72s ease-in-out infinite !important; }
  .latest__sp { display: none; }

  .message { padding: 11vh 6vw 14vh; }
  .message__ttl br { display: none; }
  .message__photo { max-width: 290px; }

  .company { padding-inline: 6vw; }
  .company__chapter { align-items: flex-start; margin-bottom: 32px; text-align: left; }
  .company__compass { left: 76%; top: 34%; width: 58vw; opacity: .42; }
  .company__block h3 { font-size: clamp(28px, 7.6vw, 34px); line-height: 1.62; }
  .company__block + .company__block h3 br { display: none; }
  .company__block small { font-size: 15px; }
  .company__block small span { margin-top: 8px; font-size: 13px; }
  .company__catch, .company__block, .company__plus, .company__values, .company__data, .company__more, .members { position: relative; z-index: 1; }

  /* Jobs reuses the desktop rings and balances the photo field around the centre. */
  .careers { padding: 27vh 6vw 29vh; }
  .careers h2 { font-size: 23px; }
  .is-sp .rings { display: block; inset: 12% -76%; }
  .is-sp .rings i { animation: ring 9s linear infinite !important; }
  .is-sp .float-card { transform: translate(-50%, -50%) translateY(calc(var(--jp, 0) * var(--depth) * -72px)) !important; }
  .is-sp .float-card__inner { animation: drift var(--dur) ease-in-out infinite !important; animation-delay: var(--delay) !important; }
  .float-card:nth-child(1) { left: 28% !important; top: 11% !important; }
  .float-card:nth-child(2) { left: 72% !important; top: 9% !important; }
  .float-card:nth-child(4) { left: 72% !important; top: 87% !important; }
  .float-card:nth-child(5) { left: 28% !important; top: 89% !important; }
  .careers__route { inset: 13% -42%; }
  .careers__route i { animation: jobsRoute 8s ease-in-out infinite alternate !important; }
  .careers__route span { animation: jobsMarker 6s ease-in-out infinite alternate !important; }

  .contact { padding-bottom: 18vh; }
  .contact__stage { padding-inline: 6vw; }
  .contact__title { margin-top: 64px; font-size: 19vw; }
  .contact__horizon { left: -22%; right: -22%; bottom: -72px; height: 170px; }
  .contact__horizon i { top: 72px; }
  .contact__horizon::before { right: 13%; top: 14px; width: 138px; }
  .contact__horizon::after { right: calc(13% + 48px); top: 15px; width: 42px; height: 136px; }
  .contact__horizon span { right: 26%; top: 66px; }

  .footer { padding-bottom: 96px; }
  .footer__legal p { padding-right: 58px; }
}

@keyframes jobsRoute { to { transform: rotate(3deg) scale(1.05); } }
@keyframes jobsMarker { to { transform: translate3d(-42vw, 30px, 0) rotate(225deg); } }

/* Feedback pass: clearer emphasis and full-screen phone transitions. */
/* Safari versions with prefixed backdrop filtering keep the same treatment. */
.header.is-solid { -webkit-backdrop-filter: blur(10px); }
.hero__core-label, .work-card__point { -webkit-backdrop-filter: blur(5px); }
.platform { -webkit-backdrop-filter: blur(7px); }
.company__compass::before { -webkit-backdrop-filter: blur(3px); }
@media (max-width: 599.98px) { .is-sp .work-card { -webkit-backdrop-filter: blur(6px); } }
/* Do not use overflow:hidden on ancestors of sticky scenes: it changes their scroll container. */
@supports not (overflow: clip) {
  .platforms, .feeds, .careers { overflow: hidden; }
  .company__bg, .is-sp .latest { overflow: visible; }
}
@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
  .latest__word.is-next .latest__char, .latest__sp .is-next { background: none; color: #66AC9A; -webkit-text-fill-color: currentColor; }
}
.message__story .em { width: fit-content; max-width: 100%; margin: 22px 0; padding: 10px 14px; background: #fffdf5; color: #153E31; border: 0; box-shadow: none; text-shadow: none; }
.message__story .em span { background: linear-gradient(transparent 68%, #F5D58B 68% 92%, transparent 92%); box-decoration-break: clone; -webkit-box-decoration-break: clone; padding-bottom: .08em; }
@media (min-width: 1024px) {
  .message__story .em { width: 100%; background: #fff; }
}
.company__catch > small, .company__block > small { font-size: 24px; margin-bottom: 24px; }
.company__block > small span { font-size: 24px; font-weight: 700; opacity: 1; margin-top: 10px; }
@media (min-width: 1024px) { .interview__body { padding-bottom: 9vh; } }
@media (max-width: 599.98px) {
  .is-sp .hero { height: 320vh; height: 320svh; }
  .is-sp .business { margin-top: -22vh; margin-top: -22svh; padding-top: 6vh; padding-bottom: 3.5vh; }
  .is-sp .work { padding-top: 14vh; }
  .is-sp .hero__visual { clip-path: circle(var(--clip-r, 150vmax) at 50% 50%); }
  .is-sp .hero__visual::before { display: none; }
  .is-sp .hero__core-label { top: calc(50% + 23vw); }
  .is-sp .work-card .card__tags, .is-sp .work-card .card__title, .is-sp .work-card .card__who, .is-sp .work-card .card__desc { margin-left: 14px; margin-right: 14px; }
  .is-sp .interview__list .card > :not(.card__media) { margin-left: 10px; margin-right: 10px; }
  .is-sp .pull-stage { height: 310vh; margin-top: -40vh; }
  .is-sp .pull-sticky { position: sticky; top: 0; height: 100vh; }
  .is-sp .pull-panel { height: calc(100vh + 2px); min-height: 0; padding-top: 16vh; }
  .is-sp .interview__chapter { top: 9vh; opacity: calc(1 - var(--sp-heading-fade, 0)); }
  .is-sp .mascot--pull { transform: translate3d(calc(var(--px, 50vw) - 36px), calc(var(--py, 100vh) - 82px), 0); }
  .is-sp .interview__body { margin-top: -170vh; background: linear-gradient(transparent 0 70vh, var(--dark) 70vh); padding-bottom: 5vh; min-height: 170vh; }
  .is-sp .interview__heading { opacity: calc(1 - var(--hf, 0)); }
  .is-sp .platforms { padding-bottom: 9.3vh; }
  .is-sp .latest__layer--circle { display: flex; background: var(--primary); }
  .is-sp .company__heart { left: 50%; top: 50%; width: 86vw; transform: translate(-50%, -50%); }
  .is-sp .company__compass { left: 50%; top: 50%; width: 58vw; opacity: .65; }
  .company__catch > small, .company__block > small, .company__block > small span { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 599.98px) {
  .is-sp .hero { height: 100vh; height: 100svh; }
  .is-sp .business { margin-top: 0; }
  .is-sp .hero__visual { clip-path: none; }
  .is-sp .pull-stage { height: auto; margin-top: 0; background: var(--dark); }
  .is-sp .pull-sticky { position: relative; height: auto; }
  .is-sp .pull-panel { height: auto; min-height: 190px; opacity: 1; transform: none !important; }
  .is-sp .interview__body { margin-top: 0; background: var(--dark); min-height: 0; }
  .is-sp .latest { height: auto; padding: 10vh 6vw; }
  .is-sp .latest__sticky { display: none; }
  .is-sp .latest__sp { display: grid; }
}

@media (prefers-reduced-motion: reduce) {
  .is-sp .work__sky i, .is-sp .new-world-map::before, .is-sp .new-world-map::after,
  .is-sp .new-world-map i, .is-sp .new-world-map span, .is-sp .rings i,
  .is-sp .float-card__inner, .is-sp .careers__route i, .is-sp .careers__route span,
  .is-sp .mascot--pull > svg, .is-sp .mascot--fly > svg, .is-sp .mascot--fly::before,
  .is-sp .latest__word.is-next, .is-sp .latest__word.is-next .latest__char,
  .is-sp .latest__word.is-next::before, .is-sp .latest__word.is-next::after { animation: none !important; }
  .is-sp .reveal, .is-sp .work__grid .card, .is-sp .platforms__list .platform { opacity: 1 !important; transform: none !important; filter: none !important; }
}
/* Approved SVG wordmark: header/footer only; keep intrinsic proportions. */
.logo .brand-logo { display: block; width: 144px; height: auto; flex: none; }
.header a.logo { height: auto; flex-shrink: 0; }
.footer .logo .brand-logo { width: 210px; }
@media (max-width: 1023.98px) {
  .header .logo .brand-logo { width: 120px; }
  .footer .logo .brand-logo { width: 190px; }
}