/*
  TOP "opening" section (FV + Results + transition into the existing
  Service section). Loaded on index.html only, after tokens.css,
  site-header.css and opening-fonts.css.

  Renamed from the Astra source to avoid colliding with ../style.css,
  which is also loaded on index.html:
    .container -> .opening-container  (different max-width in style.css)
    .hero      -> .opening-hero       (style.css already defines .hero
                                        for the old image-based hero)
  All other selectors/tokens are unprefixed and match the Astra source
  1:1 (verified against style.css: no other name collisions), so this
  becomes the shared design-token base for later phases.
*/
.opening-container { width: calc(100% - var(--page-gutter)*2); max-width: var(--container-width); margin-inline: auto; }

/* One optical environment, extending behind the impact panel. */
.opening { position: relative; isolation: isolate; overflow: clip; background: #fff; }
.ambient-light {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse at 84% 21%, rgba(213,229,254,.3), transparent 43%),
    radial-gradient(ellipse at 39% 75%, rgba(221,222,254,.25), transparent 34%);
}
.flow-light {
  position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0;
  mask-image: linear-gradient(180deg,#000 0%,#000 79%,transparent 97%);
}
.flow-object {
  position: absolute; display: block; aspect-ratio: 3/2; height: auto; max-width: none;
  mix-blend-mode: multiply; transform-origin: center;
  mask-image: linear-gradient(180deg,#000 84%,transparent);
}
.flow-object--front { left: -1%; top: -18px; width: 104%; transform: rotate(0deg); }
.flow-object--back { left: -7%; top: 400px; width: 92%; transform: rotate(10deg); opacity: .12; filter: blur(1.5px); }
.flow-light canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; }
.flow-light.is-ready canvas { opacity: 1; }
.flow-light.is-ready .flow-fallback { visibility: hidden; }
.flow-light.is-fallback .flow-object--front { animation: flow-front var(--duration-flow) ease-in-out infinite alternate; }
.flow-light.is-fallback .flow-object--back { animation: flow-back 31000ms ease-in-out infinite alternate; }
.flow-light.is-motion-paused .flow-object { animation-play-state: paused; }
@keyframes flow-front { from{translate:0 0;scale:1} to{translate:var(--flow-drift-x) var(--flow-drift-y);scale:var(--flow-scale)} }
@keyframes flow-back { from{translate:0 0;scale:1} to{translate:calc(var(--flow-drift-x)*-1.2) calc(var(--flow-drift-y)*-.65);scale:var(--flow-scale-back)} }
.copy-clearance {
  position: absolute; top: 150px; left: 0; width: 64%; height: 440px; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(255,255,255,.87), rgba(255,255,255,.72) 46%, transparent 95%);
  mask-image: linear-gradient(180deg, transparent, #000 20%, #000 75%, transparent);
}

/* Two deliberately different typographic roles, with an aligned left edge. */
.opening-hero { position: relative; z-index: 2; height: clamp(670px,49vw,780px); padding-top: var(--header-height); display: flex; align-items: center; }
.hero-copy { position: relative; margin-top: -20px; z-index: 2; }
.eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 30px; font-family: var(--font-jp); font-size: 14px; font-weight: 400; letter-spacing: .075em; color: #515e76; }
.eyebrow > span { width: 18px; height: 1px; background: var(--gradient); }
.opening-hero h1 { margin: 0 0 30px; font-family: var(--op-font-heading); font-size: var(--font-hero); font-weight: var(--weight-hero-main); font-feature-settings: "palt"; font-kerning: normal; white-space: nowrap; }
.headline-first { display: block; width: max-content; font-size: var(--font-hero-lead); font-weight: var(--weight-hero-lead); line-height: 1.35; letter-spacing: .012em; margin: 0 0 12px; background: var(--gradient-type); background-clip: text; -webkit-background-clip: text; color: transparent; }
.headline-main { display: block; font-size: 1em; font-weight: var(--weight-hero-main); line-height: 1.42; letter-spacing: -.032em; color: #111c35; }
.hero-subtitle { margin: 0; font-family: var(--op-font-heading); font-size: clamp(16px,1.35vw,20px); font-weight: 400; line-height: 1.9; letter-spacing: .045em; color: #566179; }
.hero-subtitle span { display: inline-block; white-space: nowrap; }
.hero-bottom { position: absolute; bottom: 35px; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; }
.scroll-link { display: flex; align-items: center; gap: 14px; font-family: var(--font-latin); font-size: 11px; letter-spacing: .15em; color: #7583a0; }
.scroll-icon { display: grid; place-items: center; width: 20px; height: 35px; font-size: 21px; transition: transform var(--duration-hover); }
.scroll-link:hover .scroll-icon { transform: translateY(4px); }
.motion-toggle {
  display: grid; place-items: center; width: 35px; height: 35px;
  background: rgba(255,255,255,.55); border: 1px solid rgba(132,154,205,.25); border-radius: 50%;
  font-family: Arial,sans-serif; font-size: 12px; color: #7180a3; cursor: pointer; backdrop-filter: blur(8px);
}
.motion-toggle:hover { border-color: var(--accent-blue); }
.motion-toggle[hidden] { display: none; }

/* Impact: one floating glass surface; illumination is local to the hovered third. */
.results { position: relative; z-index: 3; }
.results-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 24px; }
.results-heading h2 { margin: 0; font-family: var(--op-font-heading); font-size: 16px; font-weight: 500; letter-spacing: .06em; color: #40516e; }
.results-heading > span { font-family: var(--font-latin); font-size: 11px; letter-spacing: .18em; color: #8693b4; }
.results-frame { position: relative; isolation: isolate; }
.results-frame::before {
  content: ""; position: absolute; z-index: -1; inset: 14px -6px -12px;
  background: radial-gradient(ellipse 25% 60% at var(--light-x,50%) 55%, rgba(149,145,254,.35), rgba(128,185,255,.19) 55%, transparent 100%);
  filter: blur(22px); opacity: 0; transition: opacity 500ms var(--easing);
}
.results-panel {
  position: relative; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); margin: 0;
  border: 1px solid rgba(178,193,221,.35);
  border-radius: var(--radius-panel);
  background: linear-gradient(120deg, rgba(255,255,255,.79), rgba(255,255,255,.55) 52%, rgba(255,255,255,.74));
  box-shadow: 0 22px 60px -28px rgba(46,69,123,.2), inset 0 1px 0 #fff, inset 0 -1px 0 rgba(255,255,255,.85);
  backdrop-filter: blur(19px) saturate(1.12);
  overflow: hidden;
}
.results-panel::before { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 30px rgba(255,255,255,.6); border-radius: inherit; }
.result { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-height: 234px; padding: 27px var(--metric-padding) 49px; }
.result + .result::before {
  content: ""; position: absolute; left: 0; top: 42px; bottom: 44px; width: 1px;
  background: linear-gradient(180deg, transparent, rgba(151,173,211,.37) 18%, rgba(151,173,211,.37) 83%, transparent);
}
.result::after {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; pointer-events: none;
  background: radial-gradient(ellipse 75% 100% at var(--hover-x,50%) var(--hover-y,55%), rgba(250,253,255,.73), rgba(210,227,255,.64) 42%, rgba(224,217,255,.52) 90%);
  box-shadow: inset 0 0 0 1px rgba(121,139,253,.45), inset 0 1px 0 rgba(255,255,255,.8), inset 0 0 28px rgba(161,172,252,.15);
  transition: opacity 450ms var(--easing);
}
.result dt { order: 2; min-height: 25px; margin-top: 10px; font-family: var(--op-font-heading); font-size: 15px; font-weight: 400; line-height: 1.65; letter-spacing: .025em; color: #52617a; }
.result dd { margin: 0; white-space: nowrap; line-height: 1; }
.metric { display: inline-block; white-space: nowrap; font-family: var(--font-number); font-size: clamp(68px,6.35vw,98px); font-weight: 500; line-height: 1; letter-spacing: var(--tracking-number); font-variant-numeric: lining-nums proportional-nums; color: #172d54; transition: color 450ms; }
.number { font: inherit; letter-spacing: inherit; }
.unit { display: inline; margin-left: .06em; font-family: var(--op-font-heading); font-size: .32em; font-weight: 500; letter-spacing: -.045em; vertical-align: baseline; color: inherit; }
.plus { display: inline; margin-left: .015em; font-family: var(--font-number); font-size: 1.08em; font-weight: 500; letter-spacing: -.03em; color: inherit; }
.result-line { position: absolute; left: var(--metric-padding); right: var(--metric-padding); bottom: 33px; height: 1px; background: rgba(156,178,221,.22); }
.result-line::after {
  content: ""; position: absolute; left: 0; top: -1px; width: 0; height: 3px; border-radius: 4px;
  background: linear-gradient(90deg,#607cff,#9664ee); box-shadow: 0 0 11px rgba(109,132,250,.38); opacity: 0;
  transition: width 700ms var(--easing), opacity 400ms;
}
@media (hover:hover) and (pointer:fine) {
  .results-frame:hover::before { opacity: 1; }
  .result:hover::after { opacity: 1; }
  .result:hover .metric { color: #203f86; }
  .result:hover .result-line::after { opacity: 1; width: 73%; }
}
/* 実績→転職者の声のつなぎ幅。TOP後半側(.stories-sectionの上padding)と合わせて調整するため、
   共通の--section-spacingではなく専用の高さを持つ(FV/実績自体のデザインは変更しない)。 */
/* Quick nav: FV直下の目的別2入口(転職・キャリア相談 / 企業の方)。実績パネルと同じガラス表現で控えめに。 */
.quick-nav { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; margin-top: 6px; margin-bottom: 64px; }
.quick-card {
  position: relative; display: grid; grid-template-columns: minmax(0,1fr) auto; grid-template-areas: "label arrow" "title arrow" "desc desc"; column-gap: 16px;
  padding: 26px 30px 28px; border: 1px solid rgba(178,193,221,.35); border-radius: var(--radius-panel);
  background: linear-gradient(120deg, rgba(255,255,255,.79), rgba(255,255,255,.55) 52%, rgba(255,255,255,.74));
  box-shadow: 0 22px 60px -28px rgba(46,69,123,.2), inset 0 1px 0 #fff; backdrop-filter: blur(19px) saturate(1.12);
  transition: border-color var(--duration-hover), box-shadow var(--duration-hover), transform var(--duration-hover) var(--easing);
}
.quick-card:hover { border-color: var(--border-hover); box-shadow: 0 26px 60px -26px rgba(46,69,123,.28), inset 0 1px 0 #fff; transform: translateY(-2px); }
.quick-label { grid-area: label; margin-bottom: 8px; font-family: var(--font-latin); font-size: 11px; letter-spacing: .18em; color: #8693b4; }
.quick-title { grid-area: title; font-family: var(--font-heading); font-size: clamp(20px,1.9vw,24px); font-weight: 700; line-height: 1.45; color: var(--navy); }
.quick-desc { grid-area: desc; margin-top: 10px; font-size: 14px; line-height: 1.8; color: var(--secondary-text); }
.quick-arrow { grid-area: arrow; align-self: center; font-family: var(--font-latin); font-size: 20px; color: var(--accent-blue); transition: transform var(--duration-hover) var(--easing); }
.quick-card:hover .quick-arrow { transform: translateX(5px); }
.approx { display: inline; margin-right: .1em; font-family: var(--font-heading); font-size: .3em; font-weight: 500; letter-spacing: 0; vertical-align: baseline; color: inherit; }

.section-transition { position: relative; z-index: 1; height: 64px; background: linear-gradient(180deg, transparent, #fff 91%); }
@media (max-width: 760px) { .section-transition { height: 32px; } }

@media (min-width: 1680px) {
  .flow-object--front { left: -3%; width: 106%; }
  .flow-object--back { top: 450px; }
  .hero-copy { margin-top: -12px; }
}
@media (max-width: 1120px) {
  .opening-hero { --font-hero: clamp(3.4rem,5.8vw,4.1rem); --metric-padding: 30px; height: 660px; }
  .metric { font-size: 76px; }
  .result { min-height: 210px; }
  .result dt { font-size: 14px; }
  .flow-object--front { top: 42px; left: -8%; width: 118%; }
  .flow-object--back { top: 415px; width: 112%; left: -18%; }
  .copy-clearance { width: 72%; top: 120px; }
}
@media (max-width: 900px) {
  .metric { font-size: 66px; }
  .result { padding-inline: 24px; }
}
@media (max-width: 760px) {
  .opening { --flow-drift-x: 2px; --flow-drift-y: -3px; --flow-scale: 1.008; --flow-scale-back: 1.006; --section-spacing: 105px; --radius-panel: 16px; }
  .opening-hero { --font-hero: clamp(2.05rem,10vw,4.1rem); height: 680px; align-items: flex-start; padding-top: 162px; }
  .hero-copy { margin-top: 0; }
  .eyebrow { font-size: 12px; letter-spacing: .015em; gap: 8px; margin-bottom: 25px; }
  .eyebrow > span { width: 13px; }
  .opening-hero h1 { margin-bottom: 24px; }
  .headline-first { margin-bottom: 11px; letter-spacing: .012em; }
  .headline-main { line-height: 1.5; letter-spacing: -.04em; }
  .hero-subtitle { font-size: 16px; letter-spacing: .01em; line-height: 1.95; }
  .hero-bottom { bottom: 30px; }
  .flow-object--front { top: 206px; left: -43%; width: 200%; }
  .flow-object--back { top: 482px; left: -55%; width: 172%; opacity: .1; }
  .flow-light { opacity: var(--flow-mobile-opacity); mask-image: linear-gradient(180deg,transparent,#000 20%,#000 81%,transparent 97%); }
  .copy-clearance { top: 82px; width: 100%; height: 340px; background: linear-gradient(180deg,#fff 38%,rgba(255,255,255,.9) 68%,transparent); mask-image: none; }
  .results-heading { margin-bottom: 21px; gap: 10px; }
  .results-heading h2 { font-size: 12px; letter-spacing: 0; line-height: 1.7; }
  .results-heading > span { font-size: 10px; letter-spacing: .1em; white-space: nowrap; }
  .results-panel { backdrop-filter: blur(12px); }
  .result { align-items: center; --metric-padding: 12px; min-height: 174px; padding: 24px 4px 34px; }
  .metric { font-size: clamp(35px,10.5vw,62px); letter-spacing: -.03em; }
  .unit { font-size: .31em; margin-left: .025em; }
  .plus { font-size: 1em; margin-left: 0; }
  .result dt { font-size: 13px; line-height: 1.55; letter-spacing: 0; min-height: 40px; margin-top: 10px; text-align: center; }
  .result dt span { display: block; }
  .result + .result::before { top: 31px; bottom: 31px; }
  .result-line { bottom: 22px; }
  .results-frame::before { display: none; }
}
@media (max-width: 360px) {
  .flow-object--front { top: 280px; }
  .eyebrow { font-size: 11px; }
  .hero-subtitle { font-size: 15px; }
  .results-heading > span { display: none; }
  .metric { font-size: 35px; }
  .unit { font-size: .3em; }
}
@media (prefers-reduced-motion: reduce) {
  .opening, .opening *, .opening *::before, .opening *::after { animation: none !important; transition: none !important; }
}

@media (max-width: 760px) {
  .quick-nav { grid-template-columns: minmax(0,1fr); gap: 14px; margin-bottom: 44px; }
  .quick-card { padding: 20px 22px 22px; }
  .quick-title { font-size: 20px; }
  .quick-desc { margin-top: 8px; font-size: 13.5px; }
}
@media (max-width: 480px) {
  .result:last-child dt { font-size: 12px; letter-spacing: 0; }
}