/* Top first view: header, photo band, copy, shared foundations and navigation. */
/* 自動生成ファイル：scss/pages/top.scss を Sass（dart-sass 1.77）でコンパイルした出力。直接編集せず SCSS を修正して再コンパイルすること */
@layer base;


@layer base {

  a {
    color: inherit;
    text-decoration: none;
  }


  a:hover {
    color: #2d6fd2;
  }


  @keyframes sunPulse {

    0%,
    100% {
      opacity: 1;
      transform: scale(1);
    }

    50% {
      opacity: 0.75;
      transform: scale(1.08);
    }
  }


  @keyframes scrollDot {
    0% {
      opacity: 0;
      transform: translateX(-50%) translateY(0);
    }

    30% {
      opacity: 1;
    }

    80%,
    100% {
      opacity: 0;
      transform: translateX(-50%) translateY(12px);
    }
  }


  .handwrite-char {
    display: inline-block;
    opacity: 0;
    clip-path: inset(-12% 100% -12% -6%);
    animation: hwChar 0.62s cubic-bezier(0.3, 0.6, 0.25, 1) forwards;
    animation-delay: var(--d);
    animation-play-state: paused;
  }


  @keyframes hwChar {
    0% {
      opacity: 0;
      clip-path: inset(-12% 100% -12% -6%);
      filter: blur(5px);
      transform: translate(-8px, -6px) rotate(-2.5deg);
    }

    55% {
      opacity: 1;
    }

    100% {
      opacity: 1;
      clip-path: inset(-12% -12% -12% -12%);
      filter: blur(0);
      transform: none;
    }
  }


  @keyframes fvRingSpin {
    to {
      transform: translate(-50%, -50%) rotate(360deg);
    }
  }


  @keyframes fvRingSpinRev {
    to {
      transform: translate(-50%, -50%) rotate(-360deg);
    }
  }


  @keyframes fvSweep {
    0% {
      transform: translateX(-30%) skewX(-14deg);
      opacity: 0;
    }

    20% {
      opacity: 0.55;
    }

    60% {
      opacity: 0.3;
    }

    100% {
      transform: translateX(130%) skewX(-14deg);
      opacity: 0;
    }
  }


  @keyframes fvDraw {
    0% {
      stroke-dashoffset: 1;
    }

    100% {
      stroke-dashoffset: 0;
    }
  }


  @keyframes fvTwinkle {

    0%,
    100% {
      opacity: 0.14;
    }

    50% {
      opacity: 0.62;
    }
  }


  @keyframes fvFloat {

    0%,
    100% {
      transform: translateY(0);
    }

    50% {
      transform: translateY(-14px);
    }
  }


  @keyframes fvHalo {
    to {
      transform: translate(-50%, -50%) rotate(360deg);
    }
  }


  @keyframes fvColumn {

    0%,
    100% {
      opacity: 0.12;
      transform: translateY(0) scaleY(1);
    }

    50% {
      opacity: 0.3;
      transform: translateY(-2%) scaleY(1.04);
    }
  }


  @keyframes fvSheenLine {
    0% {
      transform: translateY(-60%);
      opacity: 0;
    }

    30% {
      opacity: 0.8;
    }

    100% {
      transform: translateY(160%);
      opacity: 0;
    }
  }


  @keyframes fvAurora {

    0%,
    100% {
      transform: translate3d(0, 0, 0) scale(1);
      opacity: 0.5;
    }

    50% {
      transform: translate3d(3vw, -2vh, 0) scale(1.12);
      opacity: 0.85;
    }
  }


  @keyframes fvOrbit {
    to {
      transform: rotate(360deg);
    }
  }


  @keyframes fvMoteRise {
    0% {
      transform: translateY(12vh) scale(0.6);
      opacity: 0;
    }

    20% {
      opacity: 0.7;
    }

    80% {
      opacity: 0.5;
    }

    100% {
      transform: translateY(-22vh) scale(1);
      opacity: 0;
    }
  }


  @keyframes fvPrism {

    0%,
    100% {
      opacity: 0.18;
      transform: translateX(0) skewX(-12deg);
    }

    50% {
      opacity: 0.42;
      transform: translateX(2vw) skewX(-12deg);
    }
  }


  @keyframes fvSilkA {

    0%,
    100% {
      transform: translateY(0) skewY(0deg);
    }

    50% {
      transform: translateY(-14px) skewY(-1.2deg);
    }
  }


  @keyframes fvSilkGlow {

    0%,
    100% {
      transform: translate(0, 0) scale(1);
      opacity: 0.7;
    }

    50% {
      transform: translate(6%, -6%) scale(1.15);
      opacity: 1;
    }
  }


  @keyframes fvSilkBead {

    0%,
    100% {
      transform: translate(0, 0);
      opacity: 0.9;
    }

    50% {
      transform: translate(34px, -10px);
      opacity: 0.5;
    }
  }


  @media (prefers-reduced-motion: reduce) {

    #fvDecor * {
      animation: none !important;
    }

}

}


@layer base {

  #siteHeader .header-item {
    position: relative;
    min-width: 0;
  }


  #siteHeader img {
    max-width: 100%;
  }


  #siteHeader .header-dropdown {
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translate(-50%, 8px);
    min-width: 236px;
    padding: 12px 0;
    background: rgba(255, 255, 255, 0.97);
    border: 1px solid rgba(40, 80, 150, 0.14);
    border-radius: 12px;
    box-shadow: 0 28px 60px -28px rgba(11, 36, 82, 0.45);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.28s ease, transform 0.34s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0.28s;
    backdrop-filter: blur(10px);
  }


  #siteHeader .header-item:hover .header-dropdown,
  #siteHeader .header-item:focus-within .header-dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 12px);
  }


  #siteHeader .header-dropdown::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -12px;
    height: 12px;
  }


  #siteHeader .header-dropdown a {
    display: block;
    padding: 11px 24px;
    font-size: 14.5px;
    font-weight: 500;
    letter-spacing: 0.05em;
    color: #16325a;
    white-space: nowrap;
    transition: background 0.22s ease, color 0.22s ease, padding-left 0.25s ease;
  }


  #siteHeader .header-dropdown a:hover {
    background: rgba(45, 111, 210, 0.1);
    color: #2d6fd2;
    padding-left: 30px;
  }


  #siteHeader .header-link {
    color: inherit;
    opacity: 0.92;
    transition: color 0.25s ease;
  }


  #siteHeader .header-link:hover {
    color: #1d55b0;
  }


  #siteHeader .header-link[aria-current=page] {
    color: #1d55b0;
    font-weight: 700;
    opacity: 1;
  }


  #siteHeader .site-header-nav__header-cta {
    position: relative;
    overflow: hidden;
    animation: hdPulse 2.6s ease-out infinite;
    transition: transform 0.4s ease, box-shadow 0.45s ease;
  }


  #siteHeader .site-header-nav__header-cta::after {
    content: "";
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.5), transparent);
    transform: skewX(-16deg);
    animation: hdSheen 3.4s ease-in-out infinite;
    pointer-events: none;
  }


  @keyframes hdSheen {
    0% {
      left: -60%;
    }

    45% {
      left: 130%;
    }

    100% {
      left: 130%;
    }
  }


  @keyframes hdPulse {

    0%,
    100% {
      box-shadow: 0 14px 30px -12px rgba(29, 85, 176, 0.6), 0 0 0 0 rgba(90, 160, 240, 0.5);
    }

    50% {
      box-shadow: 0 14px 30px -12px rgba(29, 85, 176, 0.6), 0 0 0 12px rgba(90, 160, 240, 0);
    }
  }


  @media (prefers-reduced-motion: reduce) {


    #siteHeader .site-header-nav__header-cta,
    #siteHeader .site-header-nav__header-cta::after {
      animation: none;
    }

}


  #siteHeader .site-header-nav__header-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 34px -12px rgba(29, 85, 176, 0.7);
    color: #ffffff;
  }

}


.site-header__link {
  display: flex;
  align-items: center;
  flex: 0 1 auto;
  min-width: 0;
  gap: clamp(8px, 1vw, 14px);
  color: inherit;
}


.site-header__logo-image {
  display: block;
  height: clamp(40px, 4.4vw, 58px);
  width: auto;
}


.site-header__logo-japanese-header-image {
  display: block;
  height: clamp(16px, 1.9vw, 24px);
  width: auto;
  margin-top: 6px;
  image-rendering: auto;
}


.site-header-nav {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: clamp(16px, 2.4vw, 44px);
  font-size: clamp(13.5px, 1.55vw, 17.5px);
  font-weight: 500;
  letter-spacing: 0.05em;
  white-space: nowrap;
}


.site-header-nav__header-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: clamp(30px, 3.2vw, 42px);
  height: clamp(30px, 3.2vw, 42px);
}


.site-header-nav__header-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(120deg, #4d9bef, #1d55b0);
  color: #ffffff;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0.08em;
  box-shadow: 0 14px 30px -12px rgba(29, 85, 176, 0.6);
  padding: clamp(11px, 1.3vw, 16px) clamp(18px, 2.4vw, 34px);
  font-size: clamp(14px, 1.6vw, 18px);
  white-space: nowrap;
  flex: 0 0 auto;
}


.site-header-nav__label {
  display: flex;
  align-items: center;
}


.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 36px;
  height: 84px;
  gap: 24px;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  border-bottom: 1px solid rgba(40, 80, 150, 0.14);
  color: #16325a;
  box-sizing: border-box;
  font-family: "Noto Sans JP", sans-serif;
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}


@layer base {


  

  

  


  #bizRoot .jp-reveal {
    display: inline-flex;
    overflow: hidden;
    padding-bottom: 0.08em;
  }


  #bizRoot .jp-reveal .jp-reveal__char {
    display: inline-block;
    transition: opacity 1s cubic-bezier(0.22, 0.61, 0.36, 1), transform 1.2s cubic-bezier(0.16, 0.84, 0.3, 1), filter 1s ease;
  }


  #bizRoot .jp-reveal.jp-reveal--armed .jp-reveal__char {
    opacity: 0;
    transform: translateY(105%) rotate(3deg);
    filter: blur(6px);
  }


  #bizRoot .jp-reveal.jp-reveal--armed.jp-reveal--visible .jp-reveal__char {
    opacity: 1;
    transform: translateY(0) rotate(0);
    filter: blur(0);
  }


  @media (prefers-reduced-motion: reduce) {

    #bizRoot .jp-reveal .jp-reveal__char {
      opacity: 1 !important;
      transform: none !important;
      filter: none !important;
    }

}

}


@layer base {


  .ghost-en.ghost-en--armed {
    opacity: 0;
    transform: translate(-90px, -82%) !important;
  }


  .ghost-en {
    transition: opacity 2s cubic-bezier(0.22, 0.61, 0.36, 1), transform 2.4s cubic-bezier(0.16, 0.84, 0.3, 1);
  }


  .ghost-en.ghost-en--armed.ghost-en--visible {
    opacity: 1;
    transform: translate(0, -82%) !important;
  }


  @media (prefers-reduced-motion: reduce) {

    .ghost-en {
      opacity: 1;
      transform: translate(0, -82%) !important;
      transition: none;
    }

}


  #companyRoot .jp-reveal {
    display: inline-flex;
    overflow: hidden;
    padding-bottom: 0.08em;
  }


  #companyRoot .jp-reveal .jp-reveal__char {
    display: inline-block;
    transition: opacity 1s cubic-bezier(0.22, 0.61, 0.36, 1), transform 1.2s cubic-bezier(0.16, 0.84, 0.3, 1), filter 1s ease;
  }


  #companyRoot .jp-reveal.jp-reveal--armed .jp-reveal__char {
    opacity: 0;
    transform: translateY(105%) rotate(3deg);
    filter: blur(6px);
  }


  #companyRoot .jp-reveal.jp-reveal--armed.jp-reveal--visible .jp-reveal__char {
    opacity: 1;
    transform: translateY(0) rotate(0);
    filter: blur(0);
  }


  @media (prefers-reduced-motion: reduce) {

    #companyRoot .jp-reveal .jp-reveal__char {
      opacity: 1 !important;
      transform: none !important;
      filter: none !important;
    }

}

}


@layer base {


  @media (prefers-reduced-motion: reduce) {

    #topicsRoot .jp-reveal {
      display: inline-flex;
      overflow: hidden;
      padding-bottom: 0.08em;
    }


    #topicsRoot .jp-reveal .jp-reveal__char {
      display: inline-block;
      transition: opacity 1s cubic-bezier(0.22, 0.61, 0.36, 1), transform 1.2s cubic-bezier(0.16, 0.84, 0.3, 1), filter 1s ease;
    }


    #topicsRoot .jp-reveal.jp-reveal--armed .jp-reveal__char {
      opacity: 0;
      transform: translateY(105%) rotate(3deg);
      filter: blur(6px);
    }


    #topicsRoot .jp-reveal.jp-reveal--armed.jp-reveal--visible .jp-reveal__char {
      opacity: 1;
      transform: translateY(0) rotate(0);
      filter: blur(0);
    }

}


  @media (prefers-reduced-motion: reduce) and (prefers-reduced-motion: reduce) {

    #topicsRoot .jp-reveal .jp-reveal__char {
      opacity: 1 !important;
      transform: none !important;
      filter: none !important;
    }

}

}


@layer base {

  #sideNav ul {
    align-items: flex-end;
    gap: 18px !important;
  }


  #sideNav .side-nav-row:hover .side-nav-label,
  #sideNav .side-nav-row:focus-visible .side-nav-label {
    opacity: 1 !important;
    transform: translateX(0) !important;
  }


  #sideNav .side-nav-row:hover .side-nav-mark,
  #sideNav .side-nav-row:focus-visible .side-nav-mark {
    width: 16px !important;
    height: 1.5px !important;
    border-radius: 2px !important;
    background: #5AA0F0 !important;
  }


  #sideNav .side-nav-row:focus-visible {
    outline: none;
  }


  #sideNav .side-nav-row:focus-visible .side-nav-mark {
    box-shadow: 0 0 0 3px rgba(90, 160, 240, 0.28) !important;
  }


  @media (prefers-reduced-motion: reduce) {


    #sideNav,
    #sideNav * {
      transition: none !important;
    }

}

}


.side-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}


.side-nav__item {
  margin: 0;
}


@layer base {

  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }


  a {
    color: #2560d8;
    text-decoration: none;
  }


  a:hover {
    color: #123a8a;
  }

}


html {
  margin: 0;
  padding: 0;
}


body {
  margin: 0;
  padding: 0;
  background: linear-gradient(180deg, #f4f8fc 0%, #f4f8fc 46%, #f4f8fc 100%) fixed #f4f8fc;
}


body {
  font-family: "Manrope", "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  -webkit-font-smoothing: antialiased;
}


::selection {
  background: #b3d1f2;
  color: #16325a;
}


.top__wrap {
  position: relative;
  z-index: 70;
  background: transparent;
}


.top__wrap-light {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}


.top__sunlight {
  position: absolute;
  left: -16vw;
  top: -20vh;
  width: 90vw;
  height: 96vh;
  background: radial-gradient(closest-side at 22% 22%, #ffffff 0%, #ffffff 26%, rgba(255, 255, 255, 0.85) 48%, rgba(255, 255, 255, 0) 80%);
}


.top__sunglare {
  position: absolute;
  left: -6vw;
  top: -8vh;
  width: 34vw;
  height: 38vh;
  filter: blur(22px);
  background: radial-gradient(closest-side at 30% 28%, #ffffff 0%, #ffffff 45%, rgba(255, 255, 255, 0) 80%);
  animation: sunPulse 5.5s ease-in-out infinite;
}


.top__sunrays {
  position: absolute;
  left: -12vw;
  top: -14vh;
  width: 96vw;
  height: 105vh;
  opacity: 0.72;
  filter: blur(14px);
  background: conic-gradient(from 112deg at 4% 4%, rgba(255, 255, 255, 0) 0deg, rgba(255, 255, 255, 0.9) 7deg, rgba(255, 255, 255, 0) 15deg, rgba(255, 255, 255, 0) 22deg, rgba(255, 255, 255, 0.7) 29deg, rgba(255, 255, 255, 0) 38deg, rgba(255, 255, 255, 0) 46deg, rgba(255, 255, 255, 0.55) 52deg, rgba(255, 255, 255, 0) 61deg, rgba(255, 255, 255, 0) 68deg, rgba(255, 255, 255, 0.35) 73deg, rgba(255, 255, 255, 0) 80deg);
}


.top__scene {
  position: relative;
  min-height: 100svh;
  box-sizing: border-box;
  padding-top: 19svh;
  padding-bottom: 5cm;
}


.top__first-view-top-shade {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 100svh;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(150% 130% at -12% -20%, #bed4ee 0%, rgba(198, 219, 242, 0.82) 26%, rgba(219, 233, 248, 0.45) 48%, rgba(244, 248, 252, 0) 70%);
}


.top__first-view-grid {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 100svh;
  z-index: 1;
  pointer-events: none;
  opacity: 0.5;
  background-image: linear-gradient(rgba(22, 50, 79, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(22, 50, 79, 0.035) 1px, transparent 1px);
  background-size: 96px 96px;
  mask-image: radial-gradient(120% 90% at 20% 30%, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0) 72%);
  -webkit-mask-image: radial-gradient(120% 90% at 20% 30%, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0) 72%);
}


.top__first-view-vignette {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 100svh;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(150% 120% at 50% 45%, transparent 66%, rgba(10, 26, 52, 0.07) 100%);
}


.top__first-view-decor {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 100svh;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}


.top__decor {
  position: absolute;
  left: 0;
  top: 0;
  width: min(52vw, 720px);
  height: min(44vh, 480px);
  pointer-events: none;
  overflow: visible;
}


.top__card {
  position: absolute;
  border-radius: 50%;
}


.top__card--gradient {
  left: 6%;
  top: 10%;
  width: 46%;
  height: 60%;
  background: radial-gradient(circle, rgba(21, 168, 196, 0.18), rgba(21, 168, 196, 0) 68%);
  filter: blur(30px);
  animation: fvSilkGlow 12s ease-in-out infinite;
}


.top__card--tinted {
  left: 34%;
  bottom: 0;
  width: 2px;
  height: 2px;
  background: rgba(77, 155, 239, 0.9);
  animation: fvMoteRise 16s linear infinite;
}


.top__card--bottom {
  left: 52%;
  bottom: 0;
  width: 3px;
  height: 3px;
  background: rgba(21, 168, 196, 0.8);
  animation: fvMoteRise 21s linear infinite 4s;
}


.top__card--left-offset {
  left: 72%;
  bottom: 0;
  width: 2px;
  height: 2px;
  background: rgba(29, 85, 176, 0.8);
  animation: fvMoteRise 18s linear infinite 8s;
}


.top__card--sized {
  left: 86%;
  bottom: 0;
  width: 2px;
  height: 2px;
  background: rgba(77, 155, 239, 0.7);
  animation: fvMoteRise 24s linear infinite 12s;
}


.top__card--shifted {
  left: 62%;
  top: 46%;
  width: min(78vw, 980px);
  height: min(78vw, 980px);
  transform: translate(-50%, -50%);
  background: conic-gradient(from 0deg, rgba(77, 155, 239, 0) 0deg, rgba(77, 155, 239, 0.14) 40deg, rgba(255, 255, 255, 0) 120deg, rgba(29, 85, 176, 0.1) 210deg, rgba(255, 255, 255, 0) 300deg, rgba(77, 155, 239, 0) 360deg);
  filter: blur(34px);
  animation: fvHalo 90s linear infinite;
}


.top__card--filtered {
  left: 8%;
  bottom: 14%;
  width: 22vw;
  height: 22vw;
  max-width: 280px;
  max-height: 280px;
  background: radial-gradient(circle, rgba(77, 155, 239, 0.16), rgba(77, 155, 239, 0) 66%);
  filter: blur(12px);
  animation: fvFloat 13s ease-in-out infinite;
}


.top__card--top-offset {
  right: 6%;
  top: 18%;
  width: 18vw;
  height: 18vw;
  max-width: 240px;
  max-height: 240px;
  background: radial-gradient(circle, rgba(21, 155, 196, 0.13), rgba(21, 155, 196, 0) 66%);
  filter: blur(14px);
  animation: fvFloat 17s ease-in-out infinite 1.6s;
}


.top__icon {
  position: absolute;
  overflow: visible;
}


.top__icon--sized {
  inset: 0;
  width: 100%;
  height: 100%;
}


.top__icon--shifted {
  left: 62%;
  top: 46%;
  width: min(56vw, 700px);
  height: min(56vw, 700px);
  transform: translate(-50%, -50%);
}


.top__shape {
  transform-origin: 0 0;
  animation: fvSilkA 18s ease-in-out infinite;
}


.top__path--first-group:nth-child(1) {
  animation: fvDraw 3.4s cubic-bezier(0.22, 0.61, 0.36, 1) 0.3s forwards;
}


.top__path--first-group:nth-child(2) {
  animation: fvDraw 3.9s cubic-bezier(0.22, 0.61, 0.36, 1) 0.7s forwards;
}


.top__path--second-group:nth-child(1) {
  animation: fvDraw 3.2s cubic-bezier(0.22, 0.61, 0.36, 1) 0.4s forwards;
}


.top__path--second-group:nth-child(2) {
  animation: fvDraw 3.6s cubic-bezier(0.22, 0.61, 0.36, 1) 0.9s forwards;
}


.top__label--overlay {
  position: absolute;
  left: 33%;
  top: 26%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #15a8c4;
  box-shadow: 0 0 16px 4px rgba(21, 168, 196, 0.55);
  animation: fvSilkBead 18s ease-in-out infinite;
}


.top__label--on-sky {
  position: absolute;
  left: 50%;
  top: 0;
  width: 7px;
  height: 7px;
  margin-left: -3.5px;
  border-radius: 50%;
  background: #4d9bef;
  box-shadow: 0 0 18px 4px rgba(77, 155, 239, 0.6);
}


.top__label--tinted {
  position: absolute;
  left: 0;
  top: 50%;
  width: 5px;
  height: 5px;
  margin-top: -2.5px;
  border-radius: 50%;
  background: rgba(21, 168, 196, 0.9);
  box-shadow: 0 0 14px 3px rgba(21, 168, 196, 0.5);
}


.top__label--gradient {
  width: 1px;
  height: 100%;
  background: linear-gradient(180deg, rgba(29, 85, 176, 0) 0%, rgba(29, 85, 176, 0.28) 42%, rgba(29, 85, 176, 0) 100%);
  animation: fvColumn 9s ease-in-out infinite;
}


.top__label--sized {
  width: 1px;
  height: 100%;
  background: linear-gradient(180deg, rgba(29, 85, 176, 0) 0%, rgba(77, 155, 239, 0.24) 55%, rgba(29, 85, 176, 0) 100%);
  animation: fvColumn 11s ease-in-out infinite 1.4s;
}


.top__label--in-row {
  width: 1px;
  height: 100%;
  background: linear-gradient(180deg, rgba(29, 85, 176, 0) 0%, rgba(29, 85, 176, 0.2) 38%, rgba(29, 85, 176, 0) 100%);
  animation: fvColumn 13s ease-in-out infinite 0.7s;
}


.top__label--in-decor {
  width: 1px;
  height: 100%;
  background: linear-gradient(180deg, rgba(29, 85, 176, 0) 0%, rgba(77, 155, 239, 0.26) 60%, rgba(29, 85, 176, 0) 100%);
  animation: fvColumn 10s ease-in-out infinite 2.2s;
}


.top__label--rounded {
  position: absolute;
  left: 24%;
  top: 26%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #4d9bef;
  animation: fvTwinkle 4.2s ease-in-out infinite;
}


.top__label--on-blue {
  position: absolute;
  left: 48%;
  top: 70%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #1d55b0;
  animation: fvTwinkle 5.4s ease-in-out infinite 1.1s;
}


.top__label--bordered {
  position: absolute;
  left: 78%;
  top: 58%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #4d9bef;
  animation: fvTwinkle 6.1s ease-in-out infinite 2.3s;
}


.top__label--top-offset {
  position: absolute;
  left: 66%;
  top: 14%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(29, 85, 176, 0.7);
  animation: fvTwinkle 5s ease-in-out infinite 0.6s;
}


.top__label--delayed:nth-child(1) {
  --d: 0s;
}


.top__label--delayed:nth-child(2) {
  --d: 0.14s;
}


.top__label--delayed:nth-child(4) {
  --d: 0.42s;
}


.top__label--delayed:nth-child(5) {
  --d: 0.56s;
}


.top__label--in-content {
  color: transparent;
  background-clip: text;
}


.top__label--in-content:nth-child(1) {
  --d: 0.98s;
}


.top__label--in-content:nth-child(2) {
  --d: 1.10s;
}


.top__label--navy {
  font-family: "BIZ UDPGothic", "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: clamp(22px, 2.2vw, 30px);
  letter-spacing: 0.02em;
  color: #16325a;
  display: inline-block;
  width: clamp(76px, 7.6vw, 108px);
  text-align: center;
}


.top__label--center {
  font-family: "BIZ UDPGothic", "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: clamp(22px, 2.2vw, 30px);
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  color: #16325a;
  display: inline-block;
  width: clamp(76px, 7.6vw, 108px);
  text-align: center;
}


.top__label--shifted {
  flex: 1;
  height: 100%;
  background: linear-gradient(180deg, #f4f8fc 0%, #f4f8fc 100%);
  transform: translateY(100%);
  will-change: transform;
}


.top__label--relative {
  display: block;
  width: 26px;
  height: 42px;
  border: 1.5px solid rgba(90, 74, 56, 0.3);
  border-radius: 14px;
  position: relative;
}


.top__label--left-offset {
  position: absolute;
  left: 50%;
  top: 8px;
  width: 3px;
  height: 8px;
  border-radius: 2px;
  background: rgba(90, 74, 56, 0.55);
  transform: translateX(-50%);
  animation: scrollDot 1.6s ease-in-out infinite;
}


.top__layer {
  position: absolute;
}


.top__layer--gradient {
  left: -6%;
  top: -8%;
  width: 62vw;
  height: 62vh;
  background: radial-gradient(48% 52% at 40% 40%, rgba(21, 168, 196, 0.16), rgba(21, 168, 196, 0) 70%);
  filter: blur(42px);
  animation: fvAurora 22s ease-in-out infinite;
}


.top__layer--bottom {
  right: -10%;
  bottom: -12%;
  width: 56vw;
  height: 58vh;
  background: radial-gradient(50% 50% at 60% 50%, rgba(29, 85, 176, 0.14), rgba(29, 85, 176, 0) 70%);
  filter: blur(48px);
  animation: fvAurora 28s ease-in-out infinite 3s;
}


.top__layer--shifted {
  left: 62%;
  top: 46%;
  width: min(70vw, 900px);
  height: min(70vw, 900px);
  transform: translate(-50%, -50%);
  animation: fvOrbit 46s linear infinite;
}


.top__layer--top-offset {
  left: 14%;
  top: 6%;
  width: 18vw;
  height: 120%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.55) 45%, rgba(255, 255, 255, 0) 100%);
  filter: blur(16px);
  animation: fvPrism 15s ease-in-out infinite;
}


.top__layer--tinted {
  inset: 0;
  opacity: 0.05;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml");
  background-size: 160px 160px;
}


.top__layer--rounded {
  left: 62%;
  top: 46%;
  width: min(68vw, 860px);
  height: min(68vw, 860px);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px dashed rgba(29, 85, 176, 0.16);
  animation: fvRingSpin 120s linear infinite;
}


.top__layer--bordered {
  left: 62%;
  top: 46%;
  width: min(46vw, 580px);
  height: min(46vw, 580px);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(29, 85, 176, 0.1);
  animation: fvRingSpinRev 160s linear infinite;
}


.top__layer--left-offset {
  left: 0;
  top: 0;
  width: 34%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  animation: fvSweep 11s ease-in-out infinite 2s;
}


.top__row {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  padding: 0 8vw;
  box-sizing: border-box;
}


.top__line {
  height: 1px;
}


.top__line--overlay {
  position: absolute;
  left: 18%;
  top: 0;
  width: min(42vw, 620px);
  background: linear-gradient(90deg, rgba(29, 85, 176, 0), rgba(77, 155, 239, 0.65), rgba(29, 85, 176, 0));
  animation: fvSheenLine 14s cubic-bezier(0.4, 0, 0.2, 1) infinite 3s;
}


.top__line--gradient {
  width: clamp(120px, 14vw, 220px);
  margin-top: clamp(30px, 4.6vh, 54px);
  background: linear-gradient(90deg, rgba(29, 85, 176, 0.55), rgba(29, 85, 176, 0));
}


.top__first-view-accent-a {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.14;
  transition: opacity 1.1s ease;
  background: radial-gradient(64% 84% at 66% 46%, #2d6fd2, transparent 66%);
}


.top__first-view-accent-b {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.1s ease;
  background: radial-gradient(64% 84% at 66% 46%, #3f8f8a, transparent 66%);
}


.top__first-view-accent-c {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.1s ease;
  background: radial-gradient(64% 84% at 66% 46%, #4d9bef, transparent 66%);
}


.top__first-view-accent-d {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.1s ease;
  background: radial-gradient(64% 84% at 66% 46%, #8163c8, transparent 66%);
}


.top__hover-right {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 52vw;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
}


.top__stage-three-d {
  position: absolute;
  left: 38%;
  right: -14vw;
  top: 50%;
  height: min(62vh, 620px);
  transform: translateY(-36%) scale(0.93);
  opacity: 0;
  perspective: 1700px;
  perspective-origin: 30% 50%;
  z-index: 5;
}


.top__tilt-three-d {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: rotateX(-13deg) rotateZ(-7deg);
}


.top__ring-three-d {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}


.top__anchor-a {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  cursor: default;
}


.top__label-a {
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  text-align: center;
  color: #ffffff;
  text-shadow: 0 1px 4px rgba(10, 16, 26, 0.55), 0 4px 18px rgba(10, 16, 26, 0.45);
  transition: opacity 0.4s ease;
}


.top__anchor-b {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  cursor: default;
}


.top__label-b {
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  text-align: center;
  color: #ffffff;
  text-shadow: 0 1px 4px rgba(10, 16, 26, 0.55), 0 4px 18px rgba(10, 16, 26, 0.45);
  transition: opacity 0.4s ease;
}


.top__anchor-c {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  cursor: default;
}


.top__label-c {
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  text-align: center;
  color: #ffffff;
  text-shadow: 0 1px 4px rgba(10, 16, 26, 0.55), 0 4px 18px rgba(10, 16, 26, 0.45);
  transition: opacity 0.4s ease;
}


.top__anchor-d {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  cursor: default;
}


.top__label-d {
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  text-align: center;
  color: #ffffff;
  text-shadow: 0 1px 4px rgba(10, 16, 26, 0.55), 0 4px 18px rgba(10, 16, 26, 0.45);
  transition: opacity 0.4s ease;
}


.top__copy {
  position: relative;
  top: 1.5cm;
  margin: 0 0 0 calc(5vw + 4.5cm);
  z-index: 20;
  text-align: left;
}


.top__copy-in {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1.3s ease 0.2s, transform 1.3s cubic-bezier(0.22, 1, 0.36, 1) 0.2s;
}


.top__title {
  margin: 0;
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
}


.top__content {
  font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: clamp(40px, 6.2vw, 100px);
  line-height: 1.22;
  white-space: nowrap;
  color: transparent;
  background-image: linear-gradient(96deg, #15a8c4 0%, #1a6ba8 34%, #123c72 66%, #0b1f3d 100%);
  -webkit-background-clip: text;
  background-clip: text;
}


.top__content--tracking {
  letter-spacing: 0.01em;
  margin-left: -0.28em;
}


.top__content--spaced {
  letter-spacing: -0.06em;
  margin-left: -0.28em;
}


.top__caption {
  font-size: 0.6em;
}


.top__caption--first-group:nth-child(3) {
  --d: 0.28s;
}


.top__caption--first-group:nth-child(6) {
  --d: 0.70s;
}


.top__caption--second-group:nth-child(3) {
  --d: 1.60s;
}


.top__caption--second-group:nth-child(4) {
  --d: 1.74s;
}


.top__caption--second-group:nth-child(5) {
  --d: 1.88s;
}


.top__keyword-list {
  position: relative;
  top: 0.8cm;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(10px, 1.6vh, 18px);
  margin-top: clamp(26px, 4vh, 44px);
}


.top__keyword-a {
  display: flex;
  align-items: baseline;
  gap: 14px;
  width: max-content;
  cursor: default;
  padding: 6px 16px 6px 10px;
  margin-left: -10px;
  border-radius: 10px;
  background: transparent;
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), background 0.35s ease;
}


.top__keyword-a:hover {
  transform: translateX(8px) scale(1.06);
  transform-origin: left center;
  background: linear-gradient(90deg, rgba(29, 85, 176, 0.16) 0%, rgba(77, 155, 239, 0.09) 58%, rgba(77, 155, 239, 0) 100%);
}


.top__number {
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.26em;
  color: #5e7392;
  font-variant-numeric: tabular-nums;
  display: inline-block;
  width: 26px;
}


.top__education-label {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 12.5px;
  letter-spacing: 0.22em;
  color: #5e7392;
}


.top__keyword-b {
  display: flex;
  align-items: baseline;
  gap: 14px;
  width: max-content;
  cursor: default;
  padding: 6px 16px 6px 10px;
  margin-left: -10px;
  border-radius: 10px;
  background: transparent;
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), background 0.35s ease;
}


.top__keyword-b:hover {
  transform: translateX(8px) scale(1.06);
  transform-origin: left center;
  background: linear-gradient(90deg, rgba(29, 85, 176, 0.16) 0%, rgba(77, 155, 239, 0.09) 58%, rgba(77, 155, 239, 0) 100%);
}


.top__human-resources-label {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 12.5px;
  letter-spacing: 0.22em;
  color: #5e7392;
}


.top__keyword-c {
  display: flex;
  align-items: baseline;
  gap: 14px;
  width: max-content;
  cursor: default;
  padding: 6px 16px 6px 10px;
  margin-left: -10px;
  border-radius: 10px;
  background: transparent;
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), background 0.35s ease;
}


.top__keyword-c:hover {
  transform: translateX(8px) scale(1.06);
  transform-origin: left center;
  background: linear-gradient(90deg, rgba(29, 85, 176, 0.16) 0%, rgba(77, 155, 239, 0.09) 58%, rgba(77, 155, 239, 0) 100%);
}


.top__welfare-label {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 12.5px;
  letter-spacing: 0.22em;
  color: #5e7392;
}


.top__keyword-d {
  display: flex;
  align-items: baseline;
  gap: 14px;
  width: max-content;
  cursor: default;
  padding: 6px 16px 6px 10px;
  margin-left: -10px;
  border-radius: 10px;
  background: transparent;
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), background 0.35s ease;
}


.top__keyword-d:hover {
  transform: translateX(8px) scale(1.06);
  transform-origin: left center;
  background: linear-gradient(90deg, rgba(29, 85, 176, 0.16) 0%, rgba(77, 155, 239, 0.09) 58%, rgba(77, 155, 239, 0) 100%);
}


.top__artificial-intelligence-label {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 12.5px;
  letter-spacing: 0.22em;
  color: #5e7392;
}


.top__business-curtain {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  z-index: 50;
  display: none;
  overflow: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease;
}


.top__story-hint {
  position: fixed;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%);
  z-index: 260;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}


.top__scroll-label {
  font-family: "Inter", sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.34em;
  color: rgba(90, 74, 56, 0.55);
  margin-left: 0.34em;
}


.top__story-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: #ffffff;
  transform: translateX(100%);
  visibility: hidden;
  overflow-y: auto;
  overflow-x: hidden;
  box-shadow: -30px 0 80px rgba(8, 16, 32, 0.28);
  transition: transform 1s cubic-bezier(0.5, 0, 0.2, 1), visibility 1s;
}


.top__lead {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
}


.top__cursor-top {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 50.5%;
  background: #f4f8fc;
  transition: transform 1.2s cubic-bezier(0.77, 0, 0.18, 1);
}


.top__cursor-bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 50.5%;
  background: #f4f8fc;
  transition: transform 1.2s cubic-bezier(0.77, 0, 0.18, 1);
}


.top__lead-number {
  position: absolute;
  left: 0;
  right: 0;
  top: 54%;
  text-align: center;
  color: #463a2c;
  font-family: "Manrope", sans-serif;
  font-weight: 200;
  font-size: clamp(58px, 8vw, 104px);
  letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums;
  transition: opacity 0.7s ease, transform 0.7s ease, filter 0.7s ease;
}


/* ==========================================================================
   FV見出し「教育と福祉の底力になる」の表示修正（PC・SP共通）
   --------------------------------------------------------------------------
   親（.top__content）の background-clip:text は、filter / clip-path / transform を
   持つ子要素（手書き風アニメーションの .handwrite-char）の文字には描画されないため、
   文字色 transparent のまま見出しが消えていた。
   → 各文字に同じグラデーションを持たせ、JS（top.js）が算出する
     --hw-x / --hw-y / --hw-w / --hw-h で親の座標系に合わせて配置し、
     1本の連続したグラデーションに見えるようにする（未算出時も文字単位で表示される）。
   ========================================================================== */
/* 親の background-clip:text は使わない（環境によって子要素の文字を行頭に重ねて描画し、
   文字が重なって見える不具合が出るため。グラデーションは各文字側で描画する） */
.top__content {
  background-image: none;
}

.top__content .handwrite-char {
  color: transparent;
  background-image: linear-gradient(96deg, #15a8c4 0%, #1a6ba8 34%, #123c72 66%, #0b1f3d 100%);
  background-repeat: no-repeat;
  background-size: var(--hw-w, 100%) var(--hw-h, 100%);
  background-position: calc(-1 * var(--hw-x, 0px)) calc(-1 * var(--hw-y, 0px));
  -webkit-background-clip: text;
  background-clip: text;
}

/* 「底力」：マーブル風インク（JSが background-position と hue-rotate を常時変化させる） */
.top__content .handwrite-char.ansC {
  background-image: linear-gradient(118deg, #15a8c4 0%, #1d55b0 22%, #0b1f3d 40%, #1a6ba8 58%, #15a8c4 76%, #123c72 100%);
  background-repeat: repeat;
  background-size: 260% 260%;
  background-position: 50% 50%;
}


/* ==========================================================================
   Responsive (Tablet / SP) — PC表示（1101px以上）には影響しません
   ========================================================================== */
/* FV: 3Dリング（装飾）の右はみ出しで横スクロールが出ていたため横方向のみクリップ（PCの見た目は同一） */
.top__scene {
  overflow-x: clip;
}


@media screen and (max-width: 1100px) {

  /* FV: タブレットはPCレイアウトのまま左余白を詰める */
  .top__copy {
    margin-left: calc(4vw + 2cm);
  }

}


@media screen and (max-width: 900px) {

  /* ---------- FV：見出し → 3Dリング → キーワード の縦並び ---------- */
  .top__scene {
    --fv-fs: clamp(40px, 15vw, 72px); /* SPでキャッチコピーを大きく（390px幅で約58px） */
    --fv-ring-h: min(100vw, 580px); /* 3Dリングの表示枠（index.php のSP用サイズ計算と連動） */
    --fv-pad: 100px;
    min-height: 0;
    padding-top: var(--fv-pad);
    padding-bottom: 56px;
  }

  .top__first-view-top-shade,
  .top__first-view-grid,
  .top__first-view-vignette,
  .top__first-view-decor {
    height: 100%;
  }

  .top__copy {
    top: 0;
    margin: 0 20px;
  }

  .top__content {
    font-size: var(--fv-fs);
  }

  .top__content--tracking,
  .top__content--spaced {
    margin-left: -0.1em;
  }

  .top__line--gradient {
    margin-top: 20px;
  }

  /* リングは見出しの下に配置（JSがtop:50%とtranslateY(-42%)をinlineで付与するため補正） */
  .top__stage-three-d {
    left: 0;
    right: 0;
    top: calc(var(--fv-pad) + 2.44 * var(--fv-fs) + 21px + 0.42 * var(--fv-ring-h)) !important;
    height: var(--fv-ring-h);
    perspective: 1200px;
    perspective-origin: 50% 50%;
  }

  .top__hover-right {
    width: 100%;
  }

  .top__keyword-list {
    top: 0;
    margin-top: calc(var(--fv-ring-h) + 12px);
    gap: 6px;
  }

  .top__keyword-a,
  .top__keyword-b,
  .top__keyword-c,
  .top__keyword-d {
    gap: 12px;
  }


  /* ---------- サイドナビ：右端に寄せ、ラベルは非表示（aria-labelあり） ---------- */
  #sideNav {
    right: 4px !important;
  }

  #sideNav .side-nav-label {
    display: none;
  }

}


@media screen and (max-width: 480px) {

  /* FV キーワード：英字ラベルを縮めて1行に収める */
  .top__education-label,
  .top__human-resources-label,
  .top__welfare-label,
  .top__artificial-intelligence-label {
    font-size: 10.5px;
    letter-spacing: 0.14em;
  }

}


/* ==========================================================================
   SP 調整（2026-10）：FV位置・キーワードタップ・BUSINESS円図・見出しの太さ
   ========================================================================== */
@media screen and (max-width: 900px) {

  /* ---------- FV：小さい画面でも 見出し＋帯＋キーワード が1画面に収まるよう上へ詰める ---------- */
  .top__scene {
    --fv-pad: 84px;
    --fv-ring-h: min(100vw, 580px, 48vh); /* 縦が短い端末では帯も小さく（index.php の高さ計算と連動） */
  }

  .top__stage-three-d {
    top: calc(var(--fv-pad) + 2.44 * var(--fv-fs) + 21px + 0.42 * var(--fv-ring-h) - 44px) !important; /* 2026-10：帯を20px上へ */
  }

  .top__keyword-list {
    margin-top: calc(var(--fv-ring-h) - 36px);
    gap: 0;
  }

  .top__keyword-a,
  .top__keyword-b,
  .top__keyword-c,
  .top__keyword-d {
    padding-top: 4px;
    padding-bottom: 4px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  /* タップ中のキーワード（帯がその写真へ回転） */
  .top__keyword-list > .is-active {
    background: rgba(45, 111, 210, 0.08);
  }

}


@media screen and (max-width: 900px) {

  /* FVキャッチコピーを少し右へ（左の余白を他の要素とそろえる） */
  .top__content--tracking,
  .top__content--spaced {
    margin-left: 0.04em;
  }

}


@media screen and (max-width: 900px) {

  /* FV：キャッチコピー・帯・キーワードをまとめて少し下へ（ヘッダーとの間隔を確保） */
  .top__scene {
    --fv-pad: 88px; /* 2026-10：見出し〜キーワードをまとめて16px上へ（104→88） */
  }

}


/* ==========================================================================
   FV キーワード（PC）：クリックで右の写真帯が該当写真へ回転（JSは index.php）
   クリックできることが分かるようカーソルを指に、選択中はホバーと同じ見た目を維持
   ========================================================================== */
@media screen and (min-width: 1101px) {

  .top__keyword-a,
  .top__keyword-b,
  .top__keyword-c,
  .top__keyword-d {
    cursor: default;   /* 2026-10：クリック不可（マウスオーバーで帯が回転） */
  }

  .top__keyword-list > .is-active {
    transform: translateX(8px) scale(1.06);
    transform-origin: left center;
    background: linear-gradient(90deg, rgba(29, 85, 176, 0.16) 0%, rgba(77, 155, 239, 0.09) 58%, rgba(77, 155, 239, 0) 100%);
  }

}


/* ==========================================================================
   ローディング画面を廃止（どのタイミングでも表示しない。JSは index.php）
   ========================================================================== */
.top__lead {
  display: none !important;
}


/* ==========================================================================
   FV：最初からすべて表示（コピーのフェード・手書き登場演出を行わない）
   ========================================================================== */
.top__copy-in {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}


/* ==========================================================================
   FV：キーワード一覧の見出し「OUR DOMAINS／私たちと事業領域」（全画面幅）
   英字アイブロウ（短い線＋グラデーション文字）＋和文見出しの2段構成
   ========================================================================== */
.top__keyword-heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 14px;
}

.top__keyword-heading-en {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.34em;
  line-height: 1;
  background: linear-gradient(90deg, #1aa3c8 0%, #1d55b0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.top__keyword-heading-en::before {
  content: "";
  flex: none;
  width: 28px;
  height: 1px;
  background: linear-gradient(90deg, #1aa3c8, #1d55b0);
}

.top__keyword-heading-ja {
  font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: clamp(20px, 1.55vw, 24px);
  letter-spacing: 0.1em;
  line-height: 1.3;
  color: #16325a;
}

@media screen and (min-width: 1101px) {

  /* 見出しの分だけキーワードが下がらないよう、一覧を上に詰める */
  .top__keyword-list {
    top: -0.1cm;
  }

}

@media screen and (max-width: 900px) {

  .top__keyword-heading {
    gap: 6px;
    margin: 0 0 10px;
  }

  .top__keyword-heading-en {
    font-size: 10px;
  }

  .top__keyword-heading-ja {
    font-size: 18px;
  }

}


/* ==========================================================================
   FV キーワード（2026-10 再デザイン）：見出しを太く大きく、キーワードは小さく。
   英字ラベルは削除、番号は「点」（ホバー・選択中は線に伸びる）に変更（全画面幅）
   ========================================================================== */
.top__keyword-heading-ja {
  font-weight: 700;
  font-size: clamp(28px, 2.3vw, 36px);
  letter-spacing: 0.06em;
  line-height: 1.25;
}

#kwList {
  gap: clamp(4px, 0.9vh, 10px);
}

#kwList > [id^="kw"] {
  align-items: center;
  gap: 14px;
  padding-top: 5px;
  padding-bottom: 5px;
}

#kwList .top__label--navy {
  font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: clamp(19px, 1.5vw, 23px);
  letter-spacing: 0.14em;
  line-height: 1.4;
  text-indent: 0;
  width: auto;
}

#kwList .top__bullet {
  display: inline-block;
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(90deg, #1aa3c8, #1d55b0);
  transition: width 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

#kwList > [id^="kw"]:hover .top__bullet,
#kwList > .is-active .top__bullet {
  width: 22px;
}

@media screen and (max-width: 900px) {

  .top__keyword-heading-ja {
    font-size: 24px;
  }

}


/* FV キーワード：4つを横一列の「ピル型セグメント」に（全画面幅。見出しは上に）
   通常はすりガラス風の白、PCはマウスオーバー中／SPはタップ中（帯が回転中）にグラデーションで塗りつぶし */
#kwList {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  align-items: stretch;
  width: min(100%, 420px);
}

#kwList > .top__keyword-heading {
  grid-column: 1 / -1;
  margin-bottom: 8px;
}

#kwList > [id^="kw"],
#kwList > [id^="kw"]:hover {
  display: flex;
  justify-content: center;
  align-items: center;
  width: auto;
  margin: 0;
  padding: 14px 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(29, 85, 176, 0.14);
  box-shadow: 0 6px 18px -12px rgba(22, 50, 90, 0.45);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transform: none;
  transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

#kwList .top__bullet {
  display: none;
}

#kwList .top__label--navy {
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-indent: 0.12em;   /* 字間の分だけ中央をそろえる */
  color: #16325a;
  transition: color 0.35s ease;
}

#kwList > .is-active,
#kwList > .is-active:hover {
  background: linear-gradient(135deg, #1aa3c8 0%, #1d55b0 100%);
  border-color: transparent;
  box-shadow: 0 10px 22px -12px rgba(29, 85, 176, 0.75);
  transform: none;
}

#kwList > .is-active .top__label--navy {
  color: #fff;
}

/* マウスのある端末：マウスオーバー中が「選択中」（帯がその写真へ回転） */
@media (hover: hover) and (pointer: fine) {

  #kwList > [id^="kw"]:hover {
    background: linear-gradient(135deg, #1aa3c8 0%, #1d55b0 100%);
    border-color: transparent;
    box-shadow: 0 12px 26px -12px rgba(29, 85, 176, 0.75);
    transform: translateY(-2px);
  }

  #kwList > [id^="kw"]:hover .top__label--navy {
    color: #fff;
  }

}

@media screen and (min-width: 901px) and (max-width: 1100px) {

  /* タブレット：右の写真帯と重ならない幅に */
  #kwList {
    gap: 8px;
    width: min(100%, 352px);
  }

  #kwList .top__label--navy {
    font-size: 15px;
  }

}

@media screen and (max-width: 900px) {

  #kwList {
    gap: 8px;
    width: 100%;
  }

  #kwList > .top__keyword-heading {
    margin-bottom: 6px;
  }

  #kwList > [id^="kw"],
  #kwList > [id^="kw"]:hover {
    padding: 11px 0;
  }

  #kwList .top__label--navy {
    font-size: 15px;
  }

}


/* PC：区切り線〜「私たちの事業領域」〜キーワードをまとめて少し下へ */
@media screen and (min-width: 1101px) {

  .top__line--gradient {
    margin-top: clamp(64px, 8.4vh, 100px);
  }

}


/* FV キーワード：タップしても反応しない（タップ時のハイライト・カーソルも出さない） */
#kwList > [id^="kw"] {
  cursor: default;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}


/* SEO：見出し「採用情報」を1つの語として読ませる（inline-flex だと1文字ずつ分断される）。見た目は不変 */
html #recruit .dummy-sections-recruit__recruit-title {
  display: inline-block !important;
  vertical-align: top;
}


/* FV「OUR DOMAINS」左の短い線を非表示（全画面幅。2026-10-22 SP、10-23 PC・タブレットも） */
.top__keyword-heading-en::before {
  display: none;
}


/* ==========================================================================
   FV見出し「教育・福祉業界の／インフラ企業になる」（2026-10-22 文言・デザイン変更）
   - 太字（Zen Kaku Gothic New 700）＋プロポーショナル詰め（palt）で、
     文字を大きく・密度の高いモダンな見出しに
   - キーワード（教育／福祉／インフラ）を大、つなぎの語を小（約0.56em）にしてリズムを作る
   - グラデーションは深い紺→藍→ティールの3色で落ち着いた高級感に
   ========================================================================== */
.top__content {
  /* ヒラギノ角ゴシック（Mac・iPhone・iPad に標準搭載）。
     搭載されていない環境（Windows・Android）は従来の Zen Kaku Gothic New（Webフォント）で表示 */
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "ヒラギノ角ゴ ProN W3", "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-feature-settings: "palt" 1;
  line-height: 1.16;
}

.top__content--tracking,
.top__content--spaced {
  letter-spacing: 0.01em;
}

.top__content .top__label {
  letter-spacing: -0.02em;
}

.top__content .top__caption {
  font-size: 0.52em;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* 「企業になる」：ひらがなは漢字より字面が小さく、同じ字間でも間延びして見えるため、
   ひらがなの前後を詰めて「業界の」と見た目の字間をそろえる */
.top__content .top__caption--pre-kana {
  letter-spacing: -0.05em;
}

.top__content .top__caption--kana {
  letter-spacing: -0.1em;
}

/* 「福祉」と「業界の」の間を少しあける（6文字目＝「業」） */
.top__content--tracking .top__caption:nth-child(6) {
  margin-left: 0.14em;
}

/* 「インフラ」：カタカナは字面が小さく間延びして見えるため字間を詰める
   （最後の「ラ」の後ろ＝「企業」との間は詰めない） */
.top__content .ansC {
  letter-spacing: -0.11em;
}

.top__content .ansC:nth-child(4) {
  letter-spacing: -0.02em;
}

/* 中黒「・」の左右の空きを詰める */
.top__content .top__caption.top__caption--dot {
  font-size: 0.7em;
  margin: 0 -0.19em 0 -0.21em;
  position: relative;
  top: -0.15em;
}

.top__content .handwrite-char {
  background-image: linear-gradient(100deg, #1696b8 0%, #1d5fae 36%, #14336c 68%, #0a1a38 100%);
}

.top__content .handwrite-char.ansC {
  background-image: linear-gradient(118deg, #17a3c2 0%, #1d55b0 24%, #0b1f3d 44%, #1a6ba8 62%, #17a3c2 80%, #123c72 100%);
}

@media screen and (min-width: 901px) {

  .top__content {
    font-size: clamp(40px, 5.5vw, 104px);
  }

}

/* PC：見出しを大きくするぶん、コピー全体（見出し・事業領域）を少し左へ */
@media screen and (min-width: 1101px) {

  .top__copy {
    margin-left: calc(4vw + 2.4cm);
  }

}

@media screen and (max-width: 900px) {

  .top__scene {
    --fv-fs: min(clamp(40px, 15vw, 76px), calc((100vw - 40px) / 6.9));
  }

}


/* FV キーワード（教育／人材／福祉／AI）のピルを大きく（2026-10-22）
   PC は見出しの拡大に合わせて幅・文字・高さを拡大（右の写真帯にかからない範囲） */
@media screen and (min-width: 1101px) {

  #kwList {
    gap: 12px;
    width: min(100%, clamp(400px, 36vw, 540px));
  }

  #kwList > [id^="kw"],
  #kwList > [id^="kw"]:hover {
    padding: clamp(14px, 1.3vw, 20px) 0;
  }

  #kwList .top__label--navy {
    font-size: clamp(17px, 1.4vw, 21px);
  }

}

@media screen and (max-width: 900px) {

  #kwList > [id^="kw"],
  #kwList > [id^="kw"]:hover {
    padding: 14px 0;
  }

  #kwList .top__label--navy {
    font-size: 17px;
  }

}


/* FV：見出しの左端を「事業領域」ブロック（区切り線・英字・見出し・ピル）の左端にそろえる（PC・タブレット）
   見出しは元デザインの margin-left:-0.28em で左へはみ出していたため打ち消す */
@media screen and (min-width: 901px) {

  .top__content--tracking,
  .top__content--spaced {
    margin-left: 0;
  }

}


/* FV「事業領域」見出し：英字「OUR DOMAINS」を和文の右に並べる（全画面幅。2026-10-23）
   HTML の順序（英字→和文）は変えず、表示順だけ入れ替え。ベースライン揃え */
.top__keyword-heading {
  flex-direction: row;
  align-items: baseline;
  flex-wrap: wrap;
  column-gap: 16px;
}

.top__keyword-heading-ja {
  order: 1;
}

.top__keyword-heading-en {
  order: 2;
}

@media screen and (max-width: 900px) {

  .top__keyword-heading {
    column-gap: 12px;
  }

}


/* FV：「事業領域」のピル（教育／人材／福祉／AI）の横幅をキャッチコピーの横幅にそろえる（全画面幅。2026-10-23）
   コピー全体を見出しの幅（最長行）に縮め、ピルの列をその幅いっぱいに */
.top__copy-in {
  width: fit-content;
  max-width: 100%;
}

#kwList,
.top__keyword-list#kwList {
  width: 100%;
}


/* FV キーワード（教育／人材／福祉／AI）の文字をほんの少し太く（2026-10-23）
   Zen Kaku Gothic New は 500 の次が 700 で太くなりすぎるため、文字色の細い縁取りで微調整 */
#kwList .top__label--navy {
  -webkit-text-stroke: 0.35px currentColor;
}


/* FV「事業領域 OUR DOMAINS」の見出しを少し右へ（2026-10-23） */
#kwList > .top__keyword-heading {
  padding-left: 6px;
}

@media screen and (max-width: 900px) {

  #kwList > .top__keyword-heading {
    padding-left: 4px;
  }

}


/* FV 見出し2行目「インフラ企業になる」を1cm右へ（PC・タブレット。2026-10-23）
   相対移動のため、コピー全体の幅（＝ピルの列の幅）は変えない */
@media screen and (min-width: 901px) {

  .top__content--spaced {
    position: relative;
    left: 1cm;
  }

}

/* 1439px以下は2行目を右へずらすと写真の帯に重なるため、見出しを少しだけ縮小 */
@media screen and (min-width: 901px) and (max-width: 1439px) {

  .top__content {
    font-size: 5.05vw;
  }

}

@media screen and (min-width: 901px) and (max-width: 1000px) {

  .top__content {
    font-size: 4.6vw;
  }

}


/* TOPICS 見出し「ニュース」「IR情報」：他の H2（事業紹介・会社情報）と同じ1文字ずつの登場演出（2026-10-23）
   見出しの監視・クラス付与（jp-reveal--armed / --visible）は TopicsSection.php の既存スクリプトが実施。
   文字ごとの遅延は既存の .topics-section-topics-root__char:nth-child(n) を使用 */
#topicsRoot .jp-reveal {
  overflow: hidden;
  padding-bottom: 0.08em;
}

#topicsRoot .jp-reveal .jp-reveal__char {
  display: inline-block;
  transition: opacity 1s cubic-bezier(0.22, 0.61, 0.36, 1), transform 1.2s cubic-bezier(0.16, 0.84, 0.3, 1), filter 1s ease;
}

#topicsRoot .jp-reveal.jp-reveal--armed .jp-reveal__char {
  opacity: 0;
  transform: translateY(105%) rotate(3deg);
  filter: blur(6px);
}

#topicsRoot .jp-reveal.jp-reveal--armed.jp-reveal--visible .jp-reveal__char {
  opacity: 1;
  transform: translateY(0) rotate(0);
  filter: blur(0);
}

@media (prefers-reduced-motion: reduce) {

  #topicsRoot .jp-reveal .jp-reveal__char {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

}


/* ==========================================================================
   FV キャッチコピーの登場演出（2026-10-23 第3版：トラッキング・イン）
   1. 字間が大きく開いた状態から、各行の中心へ向かってゆっくり文字が集まり、
      ブラーが解けて静かに像を結ぶ（ラグジュアリーブランドで定番の、余韻のある動き）
   2. 2行目は少し遅れて同じ動き
   3. 仕上げに光の帯が文字の上をゆっくり通過（濃い文字の上でだけ明るく見える）
   4. 区切り線が左から伸び、「事業領域」とピルが順に浮かび上がる
   - 開始・終了は index.php が #copyIn に .is-copy-intro / .is-copy-done を付けて制御
   - 他ページから戻ったときは演出なし（index.php がインライン style で最終状態）
   - fill-mode は backwards（終了後は通常のスタイルに戻り、ホバー等に影響しない）
   ========================================================================== */
#copyIn .handwrite-char {
  opacity: 1;
  clip-path: none;
  filter: none;
  animation: fvTrackIn 2.4s cubic-bezier(0.19, 1, 0.22, 1) 0.15s backwards paused;
}

#copyIn .top__content--spaced .handwrite-char {
  animation-delay: 0.5s;
}

/* 行の中心からの位置（--o）：外側の文字ほど遠くから集まる */
#copyIn .top__content--tracking .handwrite-char:nth-child(1) { --o: -3.5; }

#copyIn .top__content--tracking .handwrite-char:nth-child(2) { --o: -2.5; }

#copyIn .top__content--tracking .handwrite-char:nth-child(3) { --o: -1.5; }

#copyIn .top__content--tracking .handwrite-char:nth-child(4) { --o: -0.5; }

#copyIn .top__content--tracking .handwrite-char:nth-child(5) { --o: 0.5; }

#copyIn .top__content--tracking .handwrite-char:nth-child(6) { --o: 1.5; }

#copyIn .top__content--tracking .handwrite-char:nth-child(7) { --o: 2.5; }

#copyIn .top__content--tracking .handwrite-char:nth-child(8) { --o: 3.5; }

#copyIn .top__content--spaced .handwrite-char:nth-child(1) { --o: -4; }

#copyIn .top__content--spaced .handwrite-char:nth-child(2) { --o: -3; }

#copyIn .top__content--spaced .handwrite-char:nth-child(3) { --o: -2; }

#copyIn .top__content--spaced .handwrite-char:nth-child(4) { --o: -1; }

#copyIn .top__content--spaced .handwrite-char:nth-child(5) { --o: 0; }

#copyIn .top__content--spaced .handwrite-char:nth-child(6) { --o: 1; }

#copyIn .top__content--spaced .handwrite-char:nth-child(7) { --o: 2; }

#copyIn .top__content--spaced .handwrite-char:nth-child(8) { --o: 3; }

#copyIn .top__content--spaced .handwrite-char:nth-child(9) { --o: 4; }

@keyframes fvTrackIn {
  0% {
    opacity: 0;
    transform: translateX(calc(var(--o, 0) * 0.2em)) scale(1.04);
    filter: blur(14px);
  }
  55% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: none;
    filter: blur(0);
  }
}

/* 仕上げの光（反射）の演出は 2026-10-23 に削除 */
/* 区切り線：左から伸びる */
#copyIn .top__line--gradient {
  transform-origin: left center;
  animation: fvLineDraw 1.4s cubic-bezier(0.65, 0, 0.35, 1) 0.8s backwards paused;
}

@keyframes fvLineDraw {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* 「事業領域」見出し・ピル：順に浮かび上がる */
#copyIn #kwList > .top__keyword-heading,
#copyIn #kwList > [id^="kw"] {
  animation: fvSoftUp 1.4s cubic-bezier(0.22, 1, 0.36, 1) backwards paused;
}

#copyIn #kwList > .top__keyword-heading { animation-delay: 1s; }

#copyIn #kwList > #kw0 { animation-delay: 1.15s; }

#copyIn #kwList > #kw1 { animation-delay: 1.25s; }

#copyIn #kwList > #kw2 { animation-delay: 1.35s; }

#copyIn #kwList > #kw3 { animation-delay: 1.45s; }

@keyframes fvSoftUp {
  from {
    opacity: 0;
    transform: translateY(14px);
    filter: blur(6px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: blur(0);
  }
}

/* 開始 */
#copyIn.is-copy-intro .handwrite-char,
#copyIn.is-copy-intro .top__line--gradient,
#copyIn.is-copy-intro #kwList > .top__keyword-heading,
#copyIn.is-copy-intro #kwList > [id^="kw"] {
  animation-play-state: running;
}

@media (prefers-reduced-motion: reduce) {

  #copyIn .handwrite-char,
  #copyIn .top__line--gradient,
  #copyIn #kwList > .top__keyword-heading,
  #copyIn #kwList > [id^="kw"] {
    animation: none !important;
  }

}


/* FV：区切り線〜「事業領域」〜ピルをもう少し下へ（PC。2026-10-23） */
@media screen and (min-width: 1101px) {

  .top__line--gradient {
    margin-top: clamp(92px, 11.6vh, 136px);
  }

}


/* FV：キャッチコピー〜事業領域のまとまり全体をもう少し下へ（PC。2026-10-23） */
@media screen and (min-width: 1101px) {

  .top__copy {
    top: calc(1.5cm + clamp(24px, 5vh, 64px));
  }

}


/* FV キャッチコピー（2行とも）を少し左へ（PC・タブレット。2026-10-23）
   位置だけずらす（事業領域・ピルの位置と幅は変えない） */
@media screen and (min-width: 901px) {

  #copyIn .top__title {
    position: relative;
    left: -12px;
  }

}


/* ==========================================================================
   SP（900px以下）FV の余白バランス調整（2026-10-23）
   - ヘッダーとキャッチコピーの間を広げる（24px → 約40px）
   - キャッチコピーを画面幅いっぱいに近づける（左右の余白をそろえる）
   - 区切り線を「帯の下・事業領域の上」へ移動（事業領域の見出しとして機能させる）
   - ピルの列を画面幅いっぱいに（左右 20px でそろえる）
   - FV 下端の余白を少し詰める
   ========================================================================== */
@media screen and (max-width: 900px) {

  .top__scene {
    --fv-pad: 100px;
    --fv-fs: min(clamp(40px, 15vw, 76px), calc((100vw - 40px) / 6.3));
    padding-bottom: 44px;
  }

  #copyIn.top__copy-in {
    width: auto;
  }

  .top__line--gradient {
    margin-top: calc(20px + var(--fv-ring-h) - 22px);
  }

  .top__keyword-list,
  .top__keyword-list#kwList {
    margin-top: 18px;
  }

}


/* ==========================================================================
   FV 事業領域（教育／人材／福祉／AI）：ボタンに見えない、エディトリアル調のデザイン（2026-10-23）
   - 行の上に1本の細い罫線。各項目は「小さな番号（01〜04）＋ラベル」を左揃えで並べる
   - 選択中（PC：マウスオーバー中／SP：タップ中＝帯がその写真へ回転）は
     その項目の上の罫線がグラデーションで左から伸び、番号とラベルが青に
   - 背景・枠・影・浮き上がりはなし（クリックを促すボタンに見せない）
   ========================================================================== */
#kwList {
  counter-reset: fvkw;
}

#kwList > [id^="kw"],
#kwList > [id^="kw"]:hover,
#kwList > .is-active,
#kwList > .is-active:hover {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 6px;
  padding: 14px 0 4px;
  border: 0;
  border-top: 1px solid rgba(22, 50, 90, 0.16);
  border-radius: 0;
  background: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transform: none;
  counter-increment: fvkw;
}

/* 選択中に伸びる罫線 */
#kwList > [id^="kw"]::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 2px;
  background: linear-gradient(90deg, #1aa3c8, #1d55b0);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

#kwList > [id^="kw"]::after {
  content: none;
}

/* 番号 */
#kwList .top__label--navy::before {
  content: counter(fvkw, decimal-leading-zero);
  display: block;
  margin-bottom: 6px;
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.22em;
  line-height: 1;
  color: rgba(22, 50, 90, 0.42);
  transition: color 0.4s ease;
}

#kwList .top__label--navy {
  display: block;
  text-align: left;
  color: #16325a;
  -webkit-text-stroke: 0;
  font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: clamp(16px, 1.3vw, 19px);
  letter-spacing: 0.12em;
  text-indent: 0;
  line-height: 1.3;
  transition: color 0.4s ease;
}

#kwList > .is-active::before {
  transform: scaleX(1);
}

#kwList > .is-active .top__label--navy,
#kwList > .is-active .top__label--navy::before {
  color: #1d55b0;
}

@media (hover: hover) and (pointer: fine) {

  #kwList > [id^="kw"]:hover {
    background: none;
    box-shadow: none;
    transform: none;
  }

  #kwList > [id^="kw"]:hover::before {
    transform: scaleX(1);
  }

  #kwList > [id^="kw"]:hover .top__label--navy,
  #kwList > [id^="kw"]:hover .top__label--navy::before {
    color: #1d55b0;
  }

}

@media screen and (max-width: 900px) {

  #kwList > [id^="kw"],
  #kwList > [id^="kw"]:hover,
  #kwList > .is-active,
  #kwList > .is-active:hover {
    padding-top: 12px;
  }

  #kwList .top__label--navy {
    font-size: 16px;
  }

}


/* FV：「事業領域」の上の区切り線を非表示（全画面幅。2026-10-23）
   位置関係（事業領域の高さ）は変えないよう、領域は残して線だけ消す */
#copyIn .top__line--gradient {
  visibility: hidden;
}


/* FV 事業領域の項目（番号・ラベル）を少し大きく（2026-10-23） */
#kwList .top__label--navy {
  font-size: clamp(18px, 1.55vw, 23px);
}

#kwList .top__label--navy::before {
  font-size: 11.5px;
  margin-bottom: 8px;
}

#kwList > [id^="kw"],
#kwList > [id^="kw"]:hover,
#kwList > .is-active,
#kwList > .is-active:hover {
  padding-top: 16px;
}

@media screen and (max-width: 900px) {

  #kwList .top__label--navy {
    font-size: 18px;
  }

  #kwList .top__label--navy::before {
    font-size: 10.5px;
    margin-bottom: 7px;
  }

  #kwList > [id^="kw"],
  #kwList > [id^="kw"]:hover,
  #kwList > .is-active,
  #kwList > .is-active:hover {
    padding-top: 14px;
  }

}


/* FV 事業領域：番号の右にラベルを並べる（同じ行・ベースライン揃え。2026-10-23） */
#kwList .top__label--navy {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

#kwList .top__label--navy::before {
  display: inline-block;
  margin-bottom: 0;
}

@media screen and (max-width: 900px) {

  #kwList .top__label--navy {
    gap: 6px;
    font-size: 17px;
  }

  #kwList .top__label--navy::before {
    margin-bottom: 0;
    font-size: 10px;
    letter-spacing: 0.12em;
  }

}


/* FV 事業領域の項目をもう一段大きく（2026-10-23） */
#kwList .top__label--navy {
  font-size: clamp(20px, 1.8vw, 27px);
  gap: 12px;
}

#kwList .top__label--navy::before {
  font-size: 12.5px;
}

@media screen and (max-width: 900px) {

  #kwList .top__label--navy {
    font-size: min(19px, 4.9vw);
    gap: 6px;
  }

}


/* ==========================================================================
   FV「事業領域 OUR DOMAINS」見出しのデザイン刷新（2026-10-23）
   - 和文：小さめ・太字（700）・字間を大きく開いたラベル調（下の項目を主役にする）
   - 和文と英字の間に細い縦の罫線
   - 英字：小さく・字間を大きく開いたグラデーション文字
   - 左端は下の項目（01 教育）と揃える
   ========================================================================== */
#kwList > .top__keyword-heading {
  align-items: center;
  column-gap: 18px;
  padding-left: 0;
  margin-bottom: 14px;
}

#kwList .top__keyword-heading-ja {
  font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: clamp(15px, 1.15vw, 17px);
  letter-spacing: 0.3em;
  line-height: 1;
  color: #16325a;
}

#kwList .top__keyword-heading-en {
  position: relative;
  padding-left: 18px;
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.38em;
  line-height: 1;
}

/* 和文と英字の間の細い縦罫線 */
#kwList .top__keyword-heading-en::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 14px;
  transform: translateY(-50%);
  background: rgba(22, 50, 90, 0.25);
}

@media screen and (max-width: 900px) {

  #kwList > .top__keyword-heading {
    column-gap: 14px;
    margin-bottom: 10px;
  }

  #kwList .top__keyword-heading-ja {
    font-size: 15px;
    letter-spacing: 0.26em;
  }

  
  #kwList .top__keyword-heading-en::after {
    height: 12px;
  }

}


/* FV「事業領域」見出しを大きく（2026-10-23 改訂）
   - 和文：ゴシック体（Zen Kaku Gothic New）700、項目（約26px）より一段大きく
   - 文字は深い紺→藍のグラデーションで落ち着いた高級感
   - 英字との間の細い縦罫線・英字の字間は前回の仕様を継続 */
#kwList > .top__keyword-heading {
  align-items: center;
  column-gap: 22px;
  margin-bottom: 18px;
}

#kwList .top__keyword-heading-ja {
  font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: clamp(28px, 2.5vw, 38px);
  letter-spacing: 0.1em;
  line-height: 1.1;
  background: linear-gradient(100deg, #1d55b0 0%, #16325a 55%, #0b1f3d 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

#kwList .top__keyword-heading-en {
  padding-left: 22px;
  font-size: 11px;
  letter-spacing: 0.38em;
}

#kwList .top__keyword-heading-en::after {
  height: 18px;
}

@media screen and (max-width: 900px) {

  #kwList > .top__keyword-heading {
    column-gap: 14px;
    margin-bottom: 12px;
  }

  #kwList .top__keyword-heading-ja {
    font-size: 26px;
    letter-spacing: 0.08em;
  }

  #kwList .top__keyword-heading-en {
    padding-left: 14px;
    font-size: 9.5px;
    letter-spacing: 0.3em;
  }

  #kwList .top__keyword-heading-en::after {
    height: 14px;
  }

}


/* FV「事業領域」見出し：ラグジュアリー調にさらに刷新（2026-10-23 第3案）
   - 和文：ゴシック体（Zen Kaku Gothic New）を細め（500）にし、大きく・字間を広く。
     太字の力強さより「余白と字間で見せる」上質さを優先。色は深い紺の単色
   - 英字：縦罫線をやめ、グラデーションの小さな菱形（◆）を添えたアイブロウに
   - 見出しの右側に、項目の右端まで伸びる極細のヘアラインを引き、ブロック全体を1つの面としてまとめる */
#kwList > .top__keyword-heading {
  position: relative;
  align-items: center;
  column-gap: 20px;
  margin-bottom: 22px;
}

#kwList .top__keyword-heading-ja {
  font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: clamp(30px, 2.7vw, 40px);
  letter-spacing: 0.16em;
  line-height: 1;
  background: none;
  color: #0f2a52;
  -webkit-text-fill-color: currentColor;
}

#kwList .top__keyword-heading-en {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-left: 0;
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.42em;
}

#kwList .top__keyword-heading-en::after {
  content: none;
}

#kwList .top__keyword-heading-en::before {
  content: "";
  display: inline-block;
  flex: none;
  width: 6px;
  height: 6px;
  transform: rotate(45deg);
  background: linear-gradient(135deg, #1aa3c8, #1d55b0);
}

/* 見出し右のヘアライン（英字の後ろから右端まで） */
#kwList > .top__keyword-heading::after {
  content: "";
  order: 3;
  flex: 1 1 40px;
  height: 1px;
  margin-left: 4px;
  background: linear-gradient(90deg, rgba(22, 50, 90, 0.28), rgba(22, 50, 90, 0));
}

@media screen and (max-width: 900px) {

  #kwList > .top__keyword-heading {
    column-gap: 12px;
    margin-bottom: 14px;
    flex-wrap: nowrap;
  }

  #kwList .top__keyword-heading-ja {
    font-size: 26px;
    letter-spacing: 0.12em;
  }

  #kwList .top__keyword-heading-en {
    gap: 7px;
    font-size: 9px;
    letter-spacing: 0.3em;
  }

  #kwList .top__keyword-heading-en::before {
    width: 5px;
    height: 5px;
  }

}


/* FV「事業領域」見出し：B案（2026-10-23 決定）
   和文「事業領域」をゴシック太字・紺の単色で大きく、左にグラデーションの縦バー。英字「OUR DOMAINS」は右に。
   それ以前の見出し装飾（菱形・ヘアライン・縦罫線・グラデーション文字）は打ち消す */
#kwList > .top__keyword-heading {
  position: relative;
  flex-direction: row;
  align-items: center;
  column-gap: 20px;
  padding-left: 18px;
  margin-bottom: 20px;
  --kwh-fs: clamp(30px, 2.6vw, 40px);
}

#kwList > .top__keyword-heading::after,
#kwList .top__keyword-heading-en::before,
#kwList .top__keyword-heading-en::after {
  content: none;
}

#kwList > .top__keyword-heading::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 4px;
  height: calc(var(--kwh-fs) * 1.05);
  transform: translateY(-50%);
  border-radius: 2px;
  background: linear-gradient(180deg, #1aa3c8, #1d55b0);
}

#kwList .top__keyword-heading-ja {
  order: 1;
  font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: var(--kwh-fs);
  letter-spacing: 0.08em;
  line-height: 1.1;
  background: none;
  color: #0f2a52;
  -webkit-text-fill-color: currentColor;
}

#kwList .top__keyword-heading-en {
  order: 2;
  padding-left: 0;
  font-size: 11px;
  letter-spacing: 0.38em;
}

@media screen and (max-width: 900px) {

  #kwList > .top__keyword-heading {
    column-gap: 14px;
    padding-left: 14px;
    margin-bottom: 14px;
    --kwh-fs: 26px;
  }

  #kwList > .top__keyword-heading::before {
    width: 3px;
  }

  #kwList .top__keyword-heading-en {
    font-size: 9.5px;
    letter-spacing: 0.3em;
  }

}


/* FV 事業領域の項目：1案（2026-10-23 決定）
   - 各項目の罫線の左端に短いグラデーションのアクセント（選択中は罫線いっぱいに伸びる）
   - 番号：グラデーションの太字／ラベル：太字 */
#kwList > [id^="kw"],
#kwList > [id^="kw"]:hover,
#kwList > .is-active,
#kwList > .is-active:hover {
  border-top-color: rgba(22, 50, 90, 0.12);
}

#kwList > [id^="kw"]::before {
  right: auto;
  width: 22px;
  transform: none;
  transition: width 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

#kwList > .is-active::before {
  width: 100%;
  transform: none;
}

@media (hover: hover) and (pointer: fine) {

  #kwList > [id^="kw"]:hover::before {
    width: 100%;
    transform: none;
  }

}

#kwList .top__label--navy {
  font-weight: 700;
  letter-spacing: 0.1em;
}

#kwList .top__label--navy::before {
  font-weight: 700;
  font-size: 12px;
  background: linear-gradient(135deg, #1aa3c8, #1d55b0);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

@media screen and (max-width: 900px) {

  #kwList .top__label--navy::before {
    font-size: 10.5px;
  }

}


/* FV「事業領域」見出し：左の縦バーを削除（2026-10-23）。左端は下の項目と揃える */
#kwList > .top__keyword-heading {
  padding-left: 0;
}

#kwList > .top__keyword-heading::before {
  content: none;
}

@media screen and (max-width: 900px) {

  #kwList > .top__keyword-heading {
    padding-left: 0;
  }

}


/* FV「OUR DOMAINS」を少し下へ（和文の下端寄りに。2026-10-23） */
#kwList .top__keyword-heading-en {
  position: relative;
  top: 10px;   /* 和文の下端（ベースライン付近）にそろえる */
}

@media screen and (max-width: 900px) {

  #kwList .top__keyword-heading-en {
    top: 7px;
  }

}


/* FV 事業領域の項目：罫線（＋左端のグラデーションアクセント）を文字の下へ移動（2026-10-23） */
#kwList > [id^="kw"],
#kwList > [id^="kw"]:hover,
#kwList > .is-active,
#kwList > .is-active:hover {
  border-top: 0;
  border-bottom: 1px solid rgba(22, 50, 90, 0.12);
  padding-top: 4px;
  padding-bottom: 14px;
}

#kwList > [id^="kw"]::before {
  top: auto;
  bottom: -1px;
}

@media screen and (max-width: 900px) {

  #kwList > [id^="kw"],
  #kwList > [id^="kw"]:hover,
  #kwList > .is-active,
  #kwList > .is-active:hover {
    padding-top: 2px;
    padding-bottom: 12px;
  }

}

/* 罫線が下に移ったぶん、見出しと項目の間を詰める */
#kwList > .top__keyword-heading { margin-bottom: 20px; }

@media screen and (max-width: 900px) {
 #kwList > .top__keyword-heading { margin-bottom: 13px; }

}


/* FV 事業領域の項目：文字と下の罫線の間を詰める（2026-10-23） */
#kwList > [id^="kw"],
#kwList > [id^="kw"]:hover,
#kwList > .is-active,
#kwList > .is-active:hover {
  padding-bottom: 3px;
}

#kwList .top__label--navy {
  line-height: 1.1;
}

@media screen and (max-width: 900px) {

  #kwList > [id^="kw"],
  #kwList > [id^="kw"]:hover,
  #kwList > .is-active,
  #kwList > .is-active:hover {
    padding-bottom: 3px;
  }

}


/* FV 事業領域の項目：4つの間隔を少し広げる（2026-10-23） */
#kwList.top__keyword-list {
  column-gap: 42px;
}

@media screen and (max-width: 900px) {

  #kwList.top__keyword-list {
    column-gap: 22px;
  }

}


/* FV 事業領域の項目：列全体の幅を広げ、間隔も広げる（2026-10-23）
   PC（1280px以上）：右の写真の帯（左端が画面幅の約47%）の手前まで列を広げる（キャッチコピー幅より狭くはしない）。
   1279px以下は帯が近いため、列はキャッチコピー幅のまま間隔のみ調整（「AI」が帯に隠れないように） */
@media screen and (min-width: 1280px) {

  #kwList.top__keyword-list {
    width: max(100%, calc(43vw - 2.4cm - 12px));
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: clamp(28px, 2.6vw, 46px);
  }

}

@media screen and (min-width: 1101px) and (max-width: 1279px) {

  #kwList.top__keyword-list {
    column-gap: 24px;
  }

}

@media screen and (min-width: 901px) and (max-width: 1100px) {

  #kwList.top__keyword-list {
    column-gap: 16px;
  }

}


/* ==========================================================================
   FV 事業領域（01 教育 / 02 人材 / 03 福祉 / 04 AI）：マウスオーバー時の演出をすべて無効化（2026-11-06）
   上の :hover 指定（下線・文字色・番号・背景など）とカーソル追従の枠も反応しないよう、要素自体をマウス操作の対象外にする
   ========================================================================== */
#kwList > [id^="kw"],
#kwList > [id^="kw"] * {
  pointer-events: none;
}


@keyframes top-photo-turn {
  from { transform: rotateY(0deg); }
  to { transform: rotateY(360deg); }
}

.top__ring-three-d { animation: top-photo-turn 40s linear infinite; }

.top__anchor-a { transform: rotateY(0deg); }

.top__anchor-b { transform: rotateY(-90deg); }

.top__anchor-c { transform: rotateY(-180deg); }

.top__anchor-d { transform: rotateY(-270deg); }

.top__label-a, .top__label-b, .top__label-c, .top__label-d { animation: top-photo-label 40s linear infinite; }

.top__label-b { animation-delay: -30s; }

.top__label-c { animation-delay: -20s; }

.top__label-d { animation-delay: -10s; }

.top__stage-three-d.is-band-paused .top__ring-three-d,
.top__stage-three-d.is-band-paused .top__label-a,
.top__stage-three-d.is-band-paused .top__label-b,
.top__stage-three-d.is-band-paused .top__label-c,
.top__stage-three-d.is-band-paused .top__label-d { animation-play-state: paused; }

@keyframes top-photo-label {
  0% { opacity: 1; }
  1.388889% { opacity: 1; }
  2.777778% { opacity: 1; }
  4.166667% { opacity: 1; }
  5.555556% { opacity: 1; }
  6.944444% { opacity: 1; }
  8.333333% { opacity: 1; }
  9.722222% { opacity: 1; }
  11.111111% { opacity: 1; }
  12.5% { opacity: 1; }
  13.888889% { opacity: 1; }
  15.277778% { opacity: 1; }
  16.666667% { opacity: 1; }
  18.055556% { opacity: 0.12; }
  19.444444% { opacity: 0.12; }
  20.833333% { opacity: 0.12; }
  22.222222% { opacity: 0.12; }
  23.611111% { opacity: 0.12; }
  25% { opacity: 0.12; }
  26.388889% { opacity: 0.12; }
  27.777778% { opacity: 0.12; }
  29.166667% { opacity: 0.12; }
  30.555556% { opacity: 0.12; }
  31.944444% { opacity: 0.12; }
  33.333333% { opacity: 0.12; }
  34.722222% { opacity: 0.12; }
  36.111111% { opacity: 0.12; }
  37.5% { opacity: 0.12; }
  38.888889% { opacity: 0.12; }
  40.277778% { opacity: 0.12; }
  41.666667% { opacity: 0.12; }
  43.055556% { opacity: 0.12; }
  44.444444% { opacity: 0.12; }
  45.833333% { opacity: 0.12; }
  47.222222% { opacity: 0.12; }
  48.611111% { opacity: 0.12; }
  50% { opacity: 0.12; }
  51.388889% { opacity: 0.12; }
  52.777778% { opacity: 0.12; }
  54.166667% { opacity: 0.12; }
  55.555556% { opacity: 0.12; }
  56.944444% { opacity: 0.12; }
  58.333333% { opacity: 0.12; }
  59.722222% { opacity: 0.12; }
  61.111111% { opacity: 0.12; }
  62.5% { opacity: 0.12; }
  63.888889% { opacity: 0.12; }
  65.277778% { opacity: 0.12; }
  66.666667% { opacity: 0.12; }
  68.055556% { opacity: 0.12; }
  69.444444% { opacity: 0.12; }
  70.833333% { opacity: 0.12; }
  72.222222% { opacity: 0.12; }
  73.611111% { opacity: 0.12; }
  75% { opacity: 0.12; }
  76.388889% { opacity: 0.12; }
  77.777778% { opacity: 0.12; }
  79.166667% { opacity: 0.12; }
  80.555556% { opacity: 0.12; }
  81.944444% { opacity: 0.12; }
  83.333333% { opacity: 1; }
  84.722222% { opacity: 1; }
  86.111111% { opacity: 1; }
  87.5% { opacity: 1; }
  88.888889% { opacity: 1; }
  90.277778% { opacity: 1; }
  91.666667% { opacity: 1; }
  93.055556% { opacity: 1; }
  94.444444% { opacity: 1; }
  95.833333% { opacity: 1; }
  97.222222% { opacity: 1; }
  98.611111% { opacity: 1; }
  100% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {

  .top__ring-three-d, .top__label-a, .top__label-b, .top__label-c, .top__label-d { animation-play-state: paused !important; }

}

/* Reserve below-fold space until deferred section styles are ready. */
.top__sections-placeholder { height: 2700px; }

/* FV readiness: reveal once; never show undecoded photos or reset finished copy. */
#copyIn:not(.is-copy-intro):not(.is-copy-done) { visibility: hidden; }
#copyIn.is-copy-done .handwrite-char,
#copyIn.is-copy-done .top__line--gradient,
#copyIn.is-copy-done #kwList > .top__keyword-heading,
#copyIn.is-copy-done #kwList > [id^="kw"] { animation: none !important; }
#copyIn.is-copy-fallback,
#copyIn.is-copy-fallback * { font-family: Arial, "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif !important; }
.top__stage-three-d:not(.is-band-ready) { visibility: hidden; opacity: 0 !important; }
.top__stage-three-d:not(.is-band-ready) .top__ring-three-d,
.top__stage-three-d:not(.is-band-ready) [class^="top__label-"] { animation-play-state: paused; }