/* TOP */
/* ============================================ */

/* 英語見出しの共通ヘッドライン（Reasons / Service / Works / Company / News / Contact） */
.top-headline {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  @media (width <= 896px) {
    gap: 8px;
  }
}
.top-headline__en {
  font-family: var(--font_en);
  font-weight: 800;
  font-size: clamp(3.5rem, -0.4375rem + 7.0313vw, 6.875rem); /* 110~56(1664~896) */
  line-height: 1;
  letter-spacing: .02em;
  color: var(--font_c);
  @media (width <= 896px) {
    font-size: min(56px, ((56 / 375) * 100vw));
  }
}
.top-headline__jp {
  position: relative;
  display: inline-block;
  font-size: calc((16 / 16) * 1rem); /* 16px */
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--main_c);
  @media (width <= 896px) {
    font-size: calc((12 / 16) * 1rem); /* 12px */
    margin-left: .8em;
  }
}
.top-headline__jp-icon {
  display: block;
  position: absolute;
  top: -10px;
  left: -28px;
  width: 52px;
  height: 52px;
  pointer-events: none;
  clip-path: polygon(
    101.85% 16.68%,
    89.81% 16.68%,
    54.63% 16.68%,
    54.63% 77.79%,
    101.85% 77.79%,
    101.85% 107.42%,
    -2.78% 107.42%,
    -2.78% -10.17%,
    101.85% -10.17%
  );
  @media (width <= 896px) {
    top: -15px;
    left: -10px;
    width: 40px;
    height: 40px;
    clip-path: polygon(
      103.19% 41.44%,
      91.01% 41.44%,
      55.36% 41.44%,
      55.36% 88.63%,
      103.19% 88.63%,
      103.19% 108.83%,
      -2.81% 108.83%,
      -2.81% -10.31%,
      103.19% -10.31%
    );
  }
  img {
    display: block;
    width: 100%;
    height: 100%;
  }
}
.top-headline--left {
  flex-shrink: 0;
  align-items: flex-start;
  text-align: left;
}


/* ============================================ */
/* FV */
/* ============================================ */
.top-fv {
  position: relative;
  &::before {
    @media (width <= 896px) {
      content: "";
      display: block;
      width: 100%;
      height: min(900px, 100%);
      background: linear-gradient(168deg, #F7F8F3 0%, #F7F8F3 45%, transparent 50%);
      position: absolute;
      top: 0;
      left: 0;
      z-index: 2;
    }
  }
}
.top-fv__wrap {
  position: relative;
}
.top-fv__visual { /* 2354/1178 */
  container-type: inline-size;
  width: min(2354px, ((2354 / 1920) * 100vw));
  height: min(1178px, ((1178 / 1920) * 100vw));
  position: absolute;
  top: 100px;
  right: max(-352px, ((-352 / 1920) * 100vw));
  z-index: 1;
  /* PCはスクロールでAbout→Reasonsの背面へ固定追従するため、後続の要素（Reasons全体など）より下に置く */
  @media (width > 896px) {
    z-index: 0;
  }
  @media (width <= 1320px) {
    top: 80px;
  }
  @media (width <= 896px) { /* 1046/895 */
    width: calc((523 / 375) * 100vw);
    height: calc((447.5 / 375) * 100vw);
    top: min(280px, (280 / 375) * 100vw);
    right: calc((-96 / 375) * 100vw);
    /* PCのスクロール移動（top.jsでインラインに付くtransform）はスマホでは完全に解除する。
       PCで移動中に画面幅を縮めた場合など、JS側の解除が追いつかない場合でもメインビジュアルの位置に固定する */
    transform: none !important;
  }
  img {
    width: 100%;
    max-width: none;
  }
}
.top-fv__visual-circle { /* fv_circle_04（center: 1715/476） */
  position: absolute;
  top: calc((39 / 2354) * 100cqw);
  left: calc((1278 / 2354) * 100cqw);
  width: calc((874 / 2354) * 100cqw);
  height: calc((874 / 2354) * 100cqw);
  @media (width <= 896px) { /* fv_circle_04 sp（center: 692.6/366.6） */
    display: block;
    top: calc((86.217 / 1046) * 100cqw);
    left: calc((412.217 / 1046) * 100cqw);
    width: calc((560.783 / 1046) * 100cqw);
    height: calc((560.783 / 1046) * 100cqw);
  }
  &::before,
  &::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--main_c) 35%, transparent);
  }
  &::after {
    opacity: 0;
  }
}
.top-fv__visual-circle-ring {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--main_c) 35%, transparent);
  opacity: 0;
}
.top-fv__visual-blur,
.top-fv__visual-center,
.top-fv__visual-dot,
.top-fv__visual-bean,
.top-fv__visual-sprout,
.top-fv__visual-photo {
  position: absolute;
  img {
    width: 100%;
    height: 100%;
    max-width: none;
  }
  @media (width <= 896px) {
    display: none;
  }
}
.top-fv__visual-blur.--blur01 { /* 361/360.5 */
  top: calc((37 / 2354) * 100cqw);
  left: calc((1735 / 2354) * 100cqw);
  width: calc((361 / 2354) * 100cqw);
  height: calc((360.5 / 2354) * 100cqw);
  @media (width <= 896px) { /* 251.633/251.284 */
    display: block;
    top: calc((34 / 1046) * 100cqw);
    left: calc((652 / 1046) * 100cqw);
    width: calc((251.633 / 1046) * 100cqw);
    height: calc((251.284 / 1046) * 100cqw);
  }
}
.top-fv__visual-blur.--blur02 { /* 543/543 */
  top: calc((-40 / 2354) * 100cqw);
  left: calc((942 / 2354) * 100cqw);
  width: calc((543 / 2354) * 100cqw);
  height: calc((543 / 2354) * 100cqw);
  @media (width <= 896px) { /* 378.495/378.495 */
    display: block;
    top: calc((275 / 1046) * 100cqw);
    left: calc((76 / 1046) * 100cqw);
    width: calc((378.495 / 1046) * 100cqw);
    height: calc((378.495 / 1046) * 100cqw);
  }
}
.top-fv__visual-blur.--blur03 { /* 361/360.5 */
  top: calc((437 / 2354) * 100cqw);
  left: calc((1174 / 2354) * 100cqw);
  width: calc((361 / 2354) * 100cqw);
  height: calc((360.5 / 2354) * 100cqw);
  @media (width <= 896px) { /* 251.633/251.284 */
    display: block;
    top: calc((444 / 1046) * 100cqw);
    left: calc((650 / 1046) * 100cqw);
    width: calc((251.633 / 1046) * 100cqw);
    height: calc((251.284 / 1046) * 100cqw);
  }
}
.top-fv__visual-blur.--blur04 { /* 386.5/386.5 sp: 非表示（figmaのspデザインに存在しないため） */
  top: calc((500 / 2354) * 100cqw);
  left: calc((647 / 2354) * 100cqw);
  width: calc((386.5 / 2354) * 100cqw);
  height: calc((386.5 / 2354) * 100cqw);
}
.top-fv__visual-center.--center01 { /* 438/438 */
  top: calc((257 / 2354) * 100cqw);
  left: calc((1496 / 2354) * 100cqw);
  width: calc((438 / 2354) * 100cqw);
  height: calc((438 / 2354) * 100cqw);
  @media (width <= 896px) { /* 281.033/281.033 */
    display: block;
    top: calc((229.092 / 1046) * 100cqw);
    left: calc((552.091 / 1046) * 100cqw);
    width: calc((281.033 / 1046) * 100cqw);
    height: calc((281.033 / 1046) * 100cqw);
  }
}
.top-fv__visual-center.--center02 { /* 438/438 */
  top: calc((257 / 2354) * 100cqw);
  left: calc((1496 / 2354) * 100cqw);
  width: calc((438 / 2354) * 100cqw);
  height: calc((438 / 2354) * 100cqw);
  @media (width <= 896px) { /* 281.033/281.033 */
    display: block;
    top: calc((229.092 / 1046) * 100cqw);
    left: calc((552.091 / 1046) * 100cqw);
    width: calc((281.033 / 1046) * 100cqw);
    height: calc((281.033 / 1046) * 100cqw);
  }
}
.top-fv__visual-center.--center03 { /* 178/178 */
  top: calc((387 / 2354) * 100cqw);
  left: calc((1626 / 2354) * 100cqw);
  width: calc((178 / 2354) * 100cqw);
  height: calc((178 / 2354) * 100cqw);
  @media (width <= 896px) { /* 114.21/114.21 */
    display: block;
    top: calc((312.503 / 1046) * 100cqw);
    left: calc((635.503 / 1046) * 100cqw);
    width: calc((114.21 / 1046) * 100cqw);
    height: calc((114.21 / 1046) * 100cqw);
  }
}
.top-fv__visual-dot.--dot { /* 26/26 */
  top: calc((463 / 2354) * 100cqw);
  left: calc((1702 / 2354) * 100cqw);
  width: calc((26 / 2354) * 100cqw);
  height: calc((26 / 2354) * 100cqw);
  @media (width <= 896px) { /* 16.682/16.682 */
    display: block;
    top: calc((361.267 / 1046) * 100cqw);
    left: calc((684.267 / 1046) * 100cqw);
    width: calc((16.682 / 1046) * 100cqw);
    height: calc((16.682 / 1046) * 100cqw);
  }
}
.top-fv__visual-bean.--bean01 { /* 859.5/594 */
  top: calc((584 / 2354) * 100cqw);
  left: calc((0 / 2354) * 100cqw);
  width: calc((859.5 / 2354) * 100cqw);
  height: calc((594 / 2354) * 100cqw);
  @media (width <= 896px) { /* 599.11/414.04 */
    display: block;
    top: calc((422.956 / 1046) * 100cqw);
    left: calc((1.315 / 1046) * 100cqw);
    width: calc((599.11 / 1046) * 100cqw);
    height: calc((414.044 / 1046) * 100cqw);
  }
}
.top-fv__visual-photo.--photo01 { /* 545/469 */
  top: calc((494 / 2354) * 100cqw);
  left: calc((45 / 2354) * 100cqw);
  width: calc((545 / 2354) * 100cqw);
  height: calc((469 / 2354) * 100cqw);
  @media (width <= 896px) { /* 379.889/326.914 */
    display: block;
    top: calc((383.222 / 1046) * 100cqw);
    left: calc((53.682 / 1046) * 100cqw);
    width: calc((379.889 / 1046) * 100cqw);
    height: calc((326.914 / 1046) * 100cqw);
  }
}
.top-fv__visual-bean.--bean02 { /* 331/235.5 */
  top: calc((19 / 2354) * 100cqw);
  left: calc((1127 / 2354) * 100cqw);
  width: calc((331 / 2354) * 100cqw);
  height: calc((235.5 / 2354) * 100cqw);
  @media (width <= 896px) { /* 212.324/151.065 */
    display: block;
    top: calc((162 / 1046) * 100cqw);
    left: calc((296.676 / 1046) * 100cqw);
    width: calc((212.324 / 1046) * 100cqw);
    height: calc((151.065 / 1046) * 100cqw);
  }
}
.top-fv__visual-photo.--photo02 { /* 262/285 */
  top: calc((27 / 2354) * 100cqw);
  left: calc((1048 / 2354) * 100cqw);
  width: calc((262 / 2354) * 100cqw);
  height: calc((285 / 2354) * 100cqw);
  @media (width <= 896px) { /* 168.063/182.817 */
    display: block;
    top: calc((167.132 / 1046) * 100cqw);
    left: calc((246 / 1046) * 100cqw);
    width: calc((168.063 / 1046) * 100cqw);
    height: calc((182.817 / 1046) * 100cqw);
  }
}
.top-fv__visual-bean.--bean03 { /* 438/384.5 */
  top: calc((532 / 2354) * 100cqw);
  left: calc((933 / 2354) * 100cqw);
  width: calc((438 / 2354) * 100cqw);
  height: calc((384.5 / 2354) * 100cqw);
  @media (width <= 896px) { /* 281.815/247.392 */
    display: block;
    top: calc((646.608 / 1046) * 100cqw);
    left: calc((484.642 / 1046) * 100cqw);
    width: calc((281.815 / 1046) * 100cqw);
    height: calc((247.392 / 1046) * 100cqw);
  }
}
.top-fv__visual-photo.--photo03 { /* 402/278.5 */
  top: calc((577 / 2354) * 100cqw);
  left: calc((1046 / 2354) * 100cqw);
  width: calc((402 / 2354) * 100cqw);
  height: calc((278.5 / 2354) * 100cqw);
  @media (width <= 896px) { /* 258.652/179.19 */
    display: block;
    top: calc((675.562 / 1046) * 100cqw);
    left: calc((557.348 / 1046) * 100cqw);
    width: calc((258.652 / 1046) * 100cqw);
    height: calc((179.19 / 1046) * 100cqw);
  }
}
.top-fv__visual-bean.--bean04 { /* 405/377 */
  top: calc((20 / 2354) * 100cqw);
  left: calc((1943 / 2354) * 100cqw);
  width: calc((405 / 2354) * 100cqw);
  height: calc((377 / 2354) * 100cqw);
  @media (width <= 896px) { /* 269.372/250.749 */
    display: block;
    top: calc((16 / 1046) * 100cqw);
    left: calc((776.61 / 1046) * 100cqw);
    width: calc((269.372 / 1046) * 100cqw);
    height: calc((250.749 / 1046) * 100cqw);
  }
}
.top-fv__visual-sprout.--bean04 { /* 433.5/300 */
  top: calc((215 / 2354) * 100cqw);
  left: calc((1906 / 2354) * 100cqw);
  width: calc((433.5 / 2354) * 100cqw);
  height: calc((300 / 2354) * 100cqw);
  @media (width <= 896px) { /* 288.328/199.535 */
    display: block;
    top: calc((142.698 / 1046) * 100cqw);
    left: calc((752 / 1046) * 100cqw);
    width: calc((288.328 / 1046) * 100cqw);
    height: calc((199.535 / 1046) * 100cqw);
  }
}
.top-fv__visual-bean.--bean05 { /* 141.5/98.5 */
  top: calc((356 / 2354) * 100cqw);
  left: calc((1399 / 2354) * 100cqw);
  width: calc((141.5 / 2354) * 100cqw);
  height: calc((98.5 / 2354) * 100cqw);
  @media (width <= 896px) { /* 94.114/65.514 */
    display: block;
    top: calc((315.479 / 1046) * 100cqw);
    left: calc((503 / 1046) * 100cqw);
    width: calc((94.114 / 1046) * 100cqw);
    height: calc((65.514 / 1046) * 100cqw);
  }
}
.top-fv__visual-sprout.--bean05 { /* 127/83.5 */
  top: calc((329 / 2354) * 100cqw);
  left: calc((1418 / 2354) * 100cqw);
  width: calc((127 / 2354) * 100cqw);
  height: calc((83.5 / 2354) * 100cqw);
  @media (width <= 896px) { /* 84.47/55.537 */
    display: block;
    top: calc((295.521 / 1046) * 100cqw);
    left: calc((519.637 / 1046) * 100cqw);
    width: calc((84.47 / 1046) * 100cqw);
    height: calc((55.537 / 1046) * 100cqw);
  }
}
.top-fv__visual-bean.--bean06 { /* 122.5/121 */
  top: calc((544 / 2354) * 100cqw);
  left: calc((1861 / 2354) * 100cqw);
  width: calc((122.5 / 2354) * 100cqw);
  height: calc((121 / 2354) * 100cqw);
  @media (width <= 896px) { /* 81.477/80.479 */
    display: block;
    top: calc((410.521 / 1046) * 100cqw);
    left: calc((792.284 / 1046) * 100cqw);
    width: calc((81.477 / 1046) * 100cqw);
    height: calc((80.479 / 1046) * 100cqw);
  }
}
.top-fv__visual-sprout.--bean06 { /* 120/93.5 */
  top: calc((571 / 2354) * 100cqw);
  left: calc((1828 / 2354) * 100cqw);
  width: calc((120 / 2354) * 100cqw);
  height: calc((93.5 / 2354) * 100cqw);
  @media (width <= 896px) { /* 79.814/62.188 */
    display: block;
    top: calc((428.479 / 1046) * 100cqw);
    left: calc((764.335 / 1046) * 100cqw);
    width: calc((79.814 / 1046) * 100cqw);
    height: calc((62.188 / 1046) * 100cqw);
  }
}
.top-fv__visual-bean.--bean07 { /* 88.5/70.5 */
  top: calc((547 / 2354) * 100cqw);
  left: calc((1503 / 2354) * 100cqw);
  width: calc((88.5 / 2354) * 100cqw);
  height: calc((70.5 / 2354) * 100cqw);
  @media (width <= 896px) { /* 58.863/46.891 */
    display: block;
    top: calc((414.516 / 1046) * 100cqw);
    left: calc((557.172 / 1046) * 100cqw);
    width: calc((58.863 / 1046) * 100cqw);
    height: calc((46.891 / 1046) * 100cqw);
  }
}
.top-fv__visual-sprout.--bean07 { /* 60/62.5 */
  top: calc((533 / 2354) * 100cqw);
  left: calc((1505 / 2354) * 100cqw);
  width: calc((60 / 2354) * 100cqw);
  height: calc((62.5 / 2354) * 100cqw);
  @media (width <= 896px) { /* 39.907/41.57 */
    display: block;
    top: calc((403.205 / 1046) * 100cqw);
    left: calc((559.502 / 1046) * 100cqw);
    width: calc((39.907 / 1046) * 100cqw);
    height: calc((41.57 / 1046) * 100cqw);
  }
}
.top-fv__visual-bean.--bean08 { /* 96/59.5 */
  top: calc((438 / 2354) * 100cqw);
  left: calc((1751 / 2354) * 100cqw);
  width: calc((96 / 2354) * 100cqw);
  height: calc((59.5 / 2354) * 100cqw);
  @media (width <= 896px) { /* 61/38 */
    display: block;
    top: calc((345.042 / 1046) * 100cqw);
    left: calc((719.121 / 1046) * 100cqw);
    width: calc((61 / 1046) * 100cqw);
    height: calc((38 / 1046) * 100cqw);
  }
}
.top-fv__visual-sprout.--bean08 { /* 67/55 */
  top: calc((423 / 2354) * 100cqw);
  left: calc((1758 / 2354) * 100cqw);
  width: calc((67 / 2354) * 100cqw);
  height: calc((55 / 2354) * 100cqw);
  @media (width <= 896px) { /* 42/35 */
    display: block;
    top: calc((333.042 / 1046) * 100cqw);
    left: calc((724.121 / 1046) * 100cqw);
    width: calc((42 / 1046) * 100cqw);
    height: calc((35 / 1046) * 100cqw);
  }
}
.top-fv__visual-bean.--bean09 { /* 53.5/32 */
  top: calc((471 / 2354) * 100cqw);
  left: calc((1624 / 2354) * 100cqw);
  width: calc((53.5 / 2354) * 100cqw);
  height: calc((32 / 2354) * 100cqw);
  @media (width <= 896px) { /* 35.584/21.284 */
    display: block;
    top: calc((364.967 / 1046) * 100cqw);
    left: calc((634.651 / 1046) * 100cqw);
    width: calc((35.584 / 1046) * 100cqw);
    height: calc((21.284 / 1046) * 100cqw);
  }
}
.top-fv__visual-sprout.--bean09 { /* 45.5/35 */
  top: calc((457 / 2354) * 100cqw);
  left: calc((1610 / 2354) * 100cqw);
  width: calc((45.5 / 2354) * 100cqw);
  height: calc((35 / 2354) * 100cqw);
  @media (width <= 896px) { /* 30.263/23.279 */
    display: block;
    top: calc((355.656 / 1046) * 100cqw);
    left: calc((625.34 / 1046) * 100cqw);
    width: calc((30.263 / 1046) * 100cqw);
    height: calc((23.279 / 1046) * 100cqw);
  }
}

/* FV ビジュアル：登場後のループ演出（GSAPで.is-floating付与後に発火） */
.top-fv__visual-circle,
.top-fv__visual-bean,
.top-fv__visual-sprout,
.top-fv__visual-photo {
  will-change: transform, opacity;
}
/* 波紋は3本用意し、5s周期を3等分（約1.67s間隔）でずらして広がり始める */
.top-fv__wrap.is-floating .top-fv__visual-circle::before {
  animation: fv-ripple 5s ease-out infinite;
}
.top-fv__wrap.is-floating .top-fv__visual-circle::after {
  animation: fv-ripple 5s ease-out 1.67s infinite;
}
.top-fv__wrap.is-floating .top-fv__visual-circle-ring {
  animation: fv-ripple 5s ease-out 3.33s infinite;
}
.top-fv__wrap.is-floating .top-fv__visual-bean.--bean01,
.top-fv__wrap.is-floating .top-fv__visual-photo.--photo01 { animation: fv-sway 6s ease-in-out infinite; }
.top-fv__wrap.is-floating .top-fv__visual-bean.--bean02,
.top-fv__wrap.is-floating .top-fv__visual-photo.--photo02 { animation: fv-sway 7s ease-in-out .5s infinite; }
.top-fv__wrap.is-floating .top-fv__visual-bean.--bean03,
.top-fv__wrap.is-floating .top-fv__visual-photo.--photo03 { animation: fv-sway 5.5s ease-in-out 1s infinite; }
.top-fv__wrap.is-floating .top-fv__visual-bean.--bean04 { animation: fv-float 8s ease-in-out infinite; }
.top-fv__wrap.is-floating .top-fv__visual-bean.--bean05 { animation: fv-sway 6.5s ease-in-out .3s infinite; }
.top-fv__wrap.is-floating .top-fv__visual-bean.--bean06 { animation: fv-float 7s ease-in-out .8s infinite; }
.top-fv__wrap.is-floating .top-fv__visual-bean.--bean07 { animation: fv-sway 5s ease-in-out 1.2s infinite; }
.top-fv__wrap.is-floating .top-fv__visual-bean.--bean08 { animation: fv-float 6s ease-in-out .5s infinite; }
.top-fv__wrap.is-floating .top-fv__visual-bean.--bean09 { animation: fv-sway 5.5s ease-in-out infinite; }
.top-fv__wrap.is-floating .top-fv__visual-sprout.--bean04 { animation: fv-float 8s ease-in-out infinite; }
.top-fv__wrap.is-floating .top-fv__visual-sprout.--bean05 { animation: fv-sway 6.5s ease-in-out .3s infinite; }
.top-fv__wrap.is-floating .top-fv__visual-sprout.--bean06 { animation: fv-float 7s ease-in-out .8s infinite; }
.top-fv__wrap.is-floating .top-fv__visual-sprout.--bean07 { animation: fv-sway 5s ease-in-out 1.2s infinite; }
.top-fv__wrap.is-floating .top-fv__visual-sprout.--bean08 { animation: fv-float 6s ease-in-out .5s infinite; }
.top-fv__wrap.is-floating .top-fv__visual-sprout.--bean09 { animation: fv-sway 5.5s ease-in-out infinite; }

@keyframes fv-ripple {
  0% { transform: scale(.85); opacity: .9; }
  70% { opacity: .15; }
  100% { transform: scale(1.45); opacity: 0; }
}
@keyframes fv-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@keyframes fv-sway {
  0%, 100% { transform: translate(0, 0); }
  33% { transform: translate(4px, -6px); }
  66% { transform: translate(-3px, -3px); }
}
@media (prefers-reduced-motion: reduce) {
  .top-fv__wrap.is-floating .top-fv__visual-circle::before,
  .top-fv__wrap.is-floating .top-fv__visual-circle::after,
  .top-fv__wrap.is-floating .top-fv__visual-circle-ring,
  .top-fv__wrap.is-floating .top-fv__visual-bean,
  .top-fv__wrap.is-floating .top-fv__visual-sprout,
  .top-fv__wrap.is-floating .top-fv__visual-photo {
    animation: none;
  }
}

.top-fv__inner {
  width: calc((1664 / 1920) * 100%);
  margin-inline: auto;
  container-type: inline-size;
  position: relative;
  z-index: 5;
  padding: 160px 0 600px;
  @media (width <= 1367px) {
    padding: 120px 0 480px;
  }
  @media (width <= 896px) {
    padding: 80px 0 calc((400 / 375) * 100vw);
  }
}
.top-fv__catch {
  display: flex;
  flex-direction: column;
  gap: 40px;
  @media (width <= 1320px) {
    gap: 24px;
  }
  @media (width <= 896px) {
    gap: 12px;
  }
}
.top-fv__ttl {
  font-family: var(--font_display);
  font-weight: 900;
  font-size: clamp(2.25rem, 0.9615rem + 3.4188vw, 4rem); /* 64~36(1664~896) */
  line-height: 1.6;
  letter-spacing: .03em;
  color: var(--font_c);
  text-shadow: 0 0 16px #fff, 0 0 16px #fff, 0 0 16px #fff;
  @media (width <= 896px) {
    font-size: min(52px, ((36 / 335) * 100cqw));
    line-height: 1.4;
    letter-spacing: 2px;
  }
}
.top-fv__lead {
  word-break: keep-all;
  font-size: var(--fs_mm); /* 20~16(1664~896) */
  font-weight: 600;
  line-height: 1.8;
  color: var(--font_c);
  text-shadow: 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff;
  @media (width <= 896px) {
    font-size: min(20px, ((16 / 335) * 100cqw));
    line-height: 2.2;
  }
}
/* お知らせバー（撤去のためコメントアウト。行内の注記コメントは入れ子にならないよう // に置換）
.top-fv__news {
  position: absolute;
  left: max(64px, ((64 / 1920) * 100vw));
  bottom: 64px;
  width: min(882px, 100% - 128px);
  z-index: 20;
  @media (width <= 896px) {
    left: 16px;
    bottom: 20px;
    width: min(600px, 100% - 32px);
  }
}
.top-news {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 24px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 0 10px color-mix(in srgb, #000 15%, transparent);
  color: var(--font_c);
  @media (width <= 896px) {
    gap: 6px;
    padding: 10px 12px;
    border-radius: 4px;
  }
  &:hover {
    @media (hover: hover) {
      opacity: 1;
      box-shadow: 0 4px 16px color-mix(in srgb, var(--main_c) 20%, transparent);
      .top-news__date {
        color: var(--main_c);
      }
      .top-news__txt {
        color: var(--main_c);
        text-decoration: underline;
        text-underline-offset: .2em;
      }
      .top-news__arrow {
        translate: 4px 0;
      }
    }
  }
}
.top-news__head {
  flex-shrink: 0;
  font-size: calc((16 / 16) * 1rem); // 16px
  font-weight: 600;
  color: var(--main_c);
  @media (width <= 896px) {
    display: none;
  }
}
.top-news__bar {
  flex-shrink: 0;
  width: 1px;
  height: 18px;
  background: var(--line_c);
  @media (width <= 896px) {
    display: none;
  }
}
.top-news__date {
  flex-shrink: 0;
  font-family: var(--font_en);
  font-size: calc((14 / 16) * 1rem); // 14px
  font-weight: 800;
  letter-spacing: .06em;
  transition: color .3s ease-out;
  @media (width <= 896px) {
    font-size: calc((10 / 16) * 1rem); // 10px
    letter-spacing: 1px;
  }
}
.top-news__label {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 80px;
  padding: 4px 16px;
  border: 1px solid var(--main_c);
  border-radius: 100px;
  font-size: calc((12 / 16) * 1rem); // 12px
  font-weight: 900;
  letter-spacing: .08em;
  color: var(--main_c);
  @media (width <= 896px) {
    min-width: auto;
    padding: 2px 10px;
    font-size: calc((10 / 16) * 1rem); // 10px
    letter-spacing: 1px;
  }
}
.top-news__txt {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: calc((14 / 16) * 1rem); // 14px
  line-height: 1.8;
  letter-spacing: .06em;
  transition: all .3s ease-out;
  @media (width <= 896px) {
    font-size: calc((10 / 16) * 1rem); // 10px
    letter-spacing: 1px;
  }
  @media (width <= 480px) {
    flex-basis: 100%;
  }
}
*/
.top-fv__scroll {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  filter: drop-shadow(0 0 10px #fff) drop-shadow(0 0 10px #fff) drop-shadow(0 0 10px #fff) drop-shadow(0 0 10px #fff) drop-shadow(0 0 10px #fff) drop-shadow(0 0 10px #fff) drop-shadow(0 0 10px #fff);
  position: absolute;
  right: clamp(16px, 2vw, 40px);
  bottom: 20px;
  z-index: 3;
  @media (width <= 896px) {
    filter: drop-shadow(0 0 6px #fff) drop-shadow(0 0 6px #fff) drop-shadow(0 0 6px #fff) drop-shadow(0 0 6px #fff) drop-shadow(0 0 6px #fff);
    bottom: 80px;
  }
}
.top-fv__scroll-txt {
  writing-mode: vertical-rl;
  font-family: var(--font_en);
  font-size: calc((12 / 16) * 1rem); /* 12px */
  font-weight: 800;
  letter-spacing: .1em;
  line-height: 1;
  color: var(--font_c);
  @media (width <= 896px) {
    font-size: calc((10 / 16) * 1rem); /* 10px */
  }
}
.top-fv__scroll-line {
  --scroll-line-h: 102px;
  display: block;
  width: 1px;
  height: var(--scroll-line-h);
  background: color-mix(in srgb, var(--font_c) 30%, transparent);
  margin-right: 2px;
  position: relative;
  @media (width <= 896px) {
    --scroll-line-h: 135px;
    margin-right: 3px;
  }
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 7px;
    height: 7px;
    background: var(--main_c);
    border-radius: 50%;
    animation: scrollDown 2s ease-in-out infinite;
  }
}

@keyframes scrollDown {
  0% { opacity: 0; transform: translateX(-3px) translateY(-100%); }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { opacity: 0; transform: translateX(-3px) translateY(var(--scroll-line-h)); }
}

/* ============================================ */
/* About（私たちについて） */
/* ============================================ */
.top-about {
  padding: 304px 0 256px;
  position: relative;
  @media (width <= 896px) {
    padding: 72px 0 calc((360 / 375) * 100vw);
  }
}
.top-about__inner {
  display: flex;
  gap: 40px;
  @media (width <= 1025px) {
    flex-direction: column;
    gap: 48px;
    display: block;
  }
}
.top-about__label {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  z-index: 2;
  @media (width <= 1025px) {
    position: absolute;
    top: 72px;
    right: 10px;
    z-index: 20;
  }
}
.top-about__label-icon {
  display: block;
  width: 52px;
  height: 52px;
  margin-bottom: -24px;
  pointer-events: none;
  clip-path: polygon(
    -2.78% 100%,
    28.70% 100%,
    28.70% 36.11%,
    71.30% 36.11%,
    71.30% 100%,
    100.93% 100%,
    100.93% -0.93%,
    -2.78% -0.93%
  );
  img {
    display: block;
    width: 100%;
    height: 100%;
  }
  @media (width <= 896px) {
    width: 40px;
    height: 40px;
    margin-bottom: -20px;
  }
}
.top-about__label-txt {
  writing-mode: vertical-rl;
  font-size: calc((16 / 16) * 1rem); /* 16px */
  font-weight: 600;
  letter-spacing: .1em;
  line-height: 1.2;
  color: var(--main_c);
  @media (width <= 896px) {
    font-size: calc((12 / 16) * 1rem); /* 12px */
    letter-spacing: 1px;
  }
}
.top-about__content {
  container-type: inline-size;
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 802px;
  @media (width <= 1025px) {
    max-width: inherit;
    margin-inline: calc(50% - 50vw);
    padding-right: 12px;
    padding-left: calc(50vw - 50%);
  }
  &::before {
    content: "";
    display: block;
    width: 120cqw;
    height: 120cqw;
    border-radius: 50%;
    background: radial-gradient(circle closest-side at center, #fff, transparent);
    z-index: -1;
    position: absolute;
    top: calc(50% - 60cqw);
    left: calc(50% - 60cqw);
    @media (width <= 896px) {
      width: 100vw;
      height: calc(100% + 144px);
      border-radius: 0;
      background: linear-gradient(180deg, transparent 0%, var(--bg_c) 10%, var(--bg_c) 90%, transparent 100%);
      top: -72px;
      left: 0;
      right: 0;
      bottom: 0;
    }
  }
}
.top-about__ttl {
  font-family: var(--font_display);
  font-weight: 900;
  font-size: clamp(1.75rem, 0.2917rem + 2.6042vw, 3rem); /* 48~28(1664~896) */
  line-height: 1.6;
  color: var(--font_c);
  text-shadow: 0 0 16px #fff, 0 0 16px #fff, 0 0 16px #fff;
  @media (width <= 896px) {
    font-size: min(28px, ((28 / 375) * 100vw));
  }
}
.top-about__txt {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-top: 64px;
  @media (width <= 896px) {
    gap: 16px;
    margin-top: 24px;
  }
}
.top-about__p {
  font-size: var(--fs_mm); /* 20~16 */
  line-height: 2.6;
  color: var(--font_c);
  text-shadow: 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff;
  @media (width <= 896px) {
    font-size: calc((16 / 16) * 1rem); /* 16px */
  }
}
.top-about__btn {
  margin-top: 80px;
  @media (width <= 896px) {
    margin-top: 32px;
  }
}
.top-about__visual { /* 2354/1178 */
  width: min(1000px, ((1000 / 1920) * 100vw));
  aspect-ratio: 2354 / 1178;
  position: absolute;
  top: 160px;
  right: max(-60px, ((-60 / 1920) * 100vw));
  z-index: 1;
  @media (width <= 896px) { /* 393/332 */
    width: calc((393 / 375) * 100vw);
    aspect-ratio: 393 / 332;
    top: auto;
    right: auto;
    bottom: calc((25 / 375) * 100vw);
    left: calc((12 / 375) * 100vw);
  }
  /* top.jsで複製したFVビジュアル（スマホのみ表示。PCはFVビジュアル本体をスクロールで移動させる） */
  .top-fv__wrap {
    display: none;
    height: 100%;
    @media (width <= 896px) {
      display: block;
    }
  }
  .top-fv__visual {
    top: 0;
    right: auto;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

/* ============================================ */
/* Reasons */
/* ============================================ */
.top-reasons {
  position: relative;
  @media (width <= 896px) {
    margin-top: 16px;
  }
}
.top-reasons__circle { /* 2434/2098 */
  width: 2434px;
  height: 2098px;
  background: radial-gradient(63.29% 34.29% at 30.48% 4.88%, #D7FFEF 0%, #2B883A 65%), #72A97A;
  background-blend-mode: soft-light, normal;
  -webkit-mask-image: url(../images/top/reasons_circle.svg);
  mask-image: url(../images/top/reasons_circle.svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  position: absolute;
  top: -80px;
  left: max(-180px, ((-180 / 1920) * 100vw));
  z-index: 1;
  @media (width <= 896px) { /* 1069/1313 */
    width: 1069px;
    height: 1313px;
    -webkit-mask-image: url(../images/top/reasons_circle_sp.svg);
    mask-image: url(../images/top/reasons_circle_sp.svg);
    top: 200px;
    left: calc(50% - 534.5px);
  }
  @media (width <= 480px) {
    top: 500px;
  }
  @media (width <= 375px) {
    top: 860px;
  }
}
.top-reasons__container {
  color: #fff;
  padding: 128px calc((96 / 1856) * 100cqw) 0;
  position: relative;
  @media (width <= 896px) {
    padding: 64px 24px 0;
  }
  &::before {
    content: "";
    display: block;
    width: 100%;
    height: calc(100% + ((400 / 1920) * 100vw));
    background: var(--sub_c);
    border-radius: 24px;
    position: absolute;
    top: 0;
    left: 0;
  }
}
.top-reasons__inner {
  position: relative;
  z-index: 2;
}
.top-reasons__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 48px;
  @media (width <= 1025px) {
    flex-direction: column;
    align-items: center;
    gap: 28px 24px;
  }
}
.top-reasons .top-headline__en,
.top-reasons .top-headline__jp {
  color: #fff;
}
.top-reasons .top-headline__en {
  @media (width <= 896px) {
    font-size: calc((48 / 16) * 1rem); /* 48px */
  }
}
.top-reasons .top-headline__jp-icon {
  filter: brightness(0) invert(1);
}
.top-reasons .top-headline--left {
  @media (width <= 896px) {
    align-items: center;
    text-align: center;
  }
}
.top-reasons__sub {
  max-width: 816px;
  font-size: var(--fs_mm); /* 20~16 */
  line-height: 1.8;
  @media (width <= 1025px) {
    max-width: 100%;
  }
}
.top-reasons__cards {
  margin-top: clamp(48px, 5vw, 64px);
  display: flex;
  flex-direction: column;
  gap: 48px;
  @media (width <= 896px) {
    margin-top: 32px;
    gap: 32px;
  }
}
.top-reasons__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  @media (width <= 896px) {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}
.top-reason__card {
  display: flex;
  flex-direction: column;
}
.top-reason__card-bar {
  position: relative;
  display: flex;
  justify-content: center;
  &::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    border-top: 1px dashed #fff;
  }
}
.top-reason__card-label {
  position: relative;
  z-index: 1;
  display: inline-flex;
  justify-content: center;
  min-width: 120px;
  padding: 5px 16px;
  background: #fff;
  border-radius: 100px;
  color: var(--main_c);
  font-family: var(--font_en);
  font-size: calc((14 / 16) * 1rem); /* 14px */
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: capitalize;
  @media (width <= 896px) {
    min-width: 92px;
    padding: 4px 16px;
    font-size: calc((10 / 16) * 1rem); /* 10px */
  }
}
.top-reason__card-body {
  margin-top: 32px;
  margin-inline: auto;
  width: calc(100% - 64px);
  @media (width <= 896px) {
    margin-top: 24px;
    margin-inline: 0;
    width: 100%;
  }
}
.top-reason__card-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  @media (width <= 896px) {
    gap: 8px;
  }
}
.top-reason__card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  img {
    width: 120px;
    @media (width <= 896px) {
      width: 60px;
    }
  }
}
.top-reason__card-ttl {
  word-break: keep-all;
  font-weight: 400;
  font-size: var(--fs_xl); /* 40~28 */
  text-align: center;
  @media (width <= 896px) {
    font-size: calc((24 / 16) * 1rem); /* 24px */
  }
}
.top-reason__card-txt {
  margin-top: 24px;
  font-size: var(--fs_m); /* 16~14 */
  line-height: 1.8;
  letter-spacing: .06em;
  @media (width <= 896px) {
    margin-top: 16px;
    font-size: calc((14 / 16) * 1rem); /* 14px */
    letter-spacing: 1px;
  }
}
.top-reason__card--wide .top-reason__card-txt {
  word-break: keep-all;
  text-align: center;
  @media (width <= 896px) {
    word-break: normal;
    text-align: left;
  }
}

/* ============================================ */
/* Service */
/* ============================================ */
.top-service {
  position: relative;
}
.top-service__circle { /* 1404/1633 */
  width: 1404px;
  height: 1633px;
  background: #fff;
  -webkit-mask-image: url(../images/top/service_circle.svg);
  mask-image: url(../images/top/service_circle.svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  position: absolute;
  bottom: -240px;
  left: min(480px, ((480 / 1920) * 100vw));
  z-index: -1;
  @media (width <= 896px) { /* 740/860 */
    width: 740px;
    height: 860px;
    -webkit-mask-image: url(../images/top/service_circle_sp.svg);
    mask-image: url(../images/top/service_circle_sp.svg);
    bottom: -200px;
    left: calc((-32 / 375) * 100vw);
  }
}
.top-service__blur {
  position: absolute;
  img {
    width: 100%;
    max-width: none;
  }
  &.top-service__blur--01 {
    width: min(354px, (354 / 1920) * 100vw);
    bottom: -160px;
    right: calc((320 / 1920) * 100vw);
    @media (width <= 896px) {
      width: 150px;
      right: calc((-16 / 375) * 100vw);
    }
  }
  &.top-service__blur--02 {
    width: min(620px, (620 / 1920) * 100vw);
    bottom: -420px;
    left: calc((360 / 1920) * 100vw);
    @media (width <= 896px) {
      width: 320px;
      bottom: -300px;
      left: calc((-72 / 375) * 100vw);
    }
  }
}
.top-service__inner {
  padding-top: 64px;
  position: relative;
  z-index: 2;
  @media (width <= 896px) {
    padding-top: 48px;
  }
}
.top-service__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  @media (width <= 896px) {
    gap: 24px;
    padding-inline: 10px;
  }
}
.top-service .top-headline__en,
.top-service .top-headline__jp {
  color: #fff;
}
.top-service .top-headline__jp-icon {
  filter: brightness(0) invert(1);
}
.top-service__sub {
  font-size: var(--fs_mm); /* 20~16 */
  line-height: 1.8;
  color: #fff;
}
.top-service__box {
  position: relative;
  margin-top: clamp(2rem, -0.333rem + 4.167vw, 4rem); /* 64~32(1664~896) */
  border-radius: 24px;
  overflow: clip;
  background: #fff;
  padding: clamp(2.5rem, -1.583rem + 7.292vw, 6rem) clamp(1.25rem, -2.271rem + 9.896vw, 6rem); /* 96~40 96~20(1664~896) */
  @media (width <= 896px) {
    background: transparent;
    padding: 0;
    border-radius: 0;
  }
}
.top-service__bgs {
  position: absolute;
  inset: 0;
  z-index: 0;
  @media (width <= 896px) {
    display: none;
  }
}
.top-service__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .6s ease-out;
  &.is-active {
    opacity: 1;
  }
}
.top-service__box::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(72deg, color-mix(in srgb, #000 60%, transparent) 49.5%, transparent 90.29%);
  @media (width <= 896px) {
    display: none;
  }
}
.top-service__list {
  position: relative;
  z-index: 1;
  @media (width <= 896px) {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
}
.top-service__item {
  border-top: 1px dashed #fff;
  color: #fff;
  &:last-child {
    border-bottom: 1px dashed #fff;
  }
  @media (width <= 896px) {
    border: none;
    &:last-child {
      border-bottom: none;
    }
  }
}
.top-service__item-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 40px 24px;
  position: relative;
  isolation: isolate;
  color: inherit;
  background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, #000 70%, transparent) 50%, transparent 100%);
  transition: opacity .3s ease-out, background .3s ease-out;
  opacity: .4;
  @media (width > 896px) {
    background: none;
    &::before {
      content: '';
      position: absolute;
      inset: 0;
      z-index: -1;
      background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--main_c) 70%, transparent) 50%, transparent 100%);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .6s ease-out;
    }
  }
  @media (width <= 896px) {
    padding: 28px 8px;
    position: relative;
    z-index: 1;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 24px;
    width: 100%;
    opacity: 1;
    border-radius: 16px;
    overflow: clip;
    background: #23331d;
    &::before {
      content: '';
      position: absolute;
      inset: 0;
      z-index: -1;
      background-size: cover;
      background-position: center;
    }
    &::after {
      content: '';
      position: absolute;
      inset: 0;
      z-index: -1;
      background:
        radial-gradient(85% 100% at 90% 0%, color-mix(in srgb, var(--main_c) 45%, transparent), transparent 62%),
        linear-gradient(180deg, color-mix(in srgb, #000 45%, transparent), color-mix(in srgb, #000 78%, transparent));
    }
    &:hover {
      background: #23331d;
    }
  }
  &:hover {
    @media (hover: hover) {
      opacity: 1;
      @media (width > 896px) {
        &::before {
          transform: scaleX(1);
        }
      }
      .top-service__item-arrow::after {
        translate: 3px 0;
      }
    }
  }
}
.top-service__item.is-active .top-service__item-link {
  opacity: 1;
}
@media (width <= 896px) {
  .top-service__item:nth-child(1) .top-service__item-link::before { background-image: url(../images/top/service_bg_web.webp); }
  .top-service__item:nth-child(2) .top-service__item-link::before { background-image: url(../images/top/service_bg_ad.webp); }
  .top-service__item:nth-child(3) .top-service__item-link::before { background-image: url(../images/top/service_bg_system.webp); }
  .top-service__item:nth-child(4) .top-service__item-link::before { background-image: url(../images/top/service_bg_photo.webp); }
}
.top-service__item-main {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 32px;
  flex: 1;
  min-width: 0;
  @media (width <= 896px) {
    display: grid;
    grid-template-columns: 20px 1fr;
    column-gap: 16px;
    row-gap: 8px;
    align-items: start;
    width: 100%;
    padding-right: 56px;
  }
}
.top-service__item-dot {
  flex-shrink: 0;
  display: inline-flex;
  width: 20px;
  img {
    width: 100%;
    height: auto;
  }
  @media (width <= 896px) {
    grid-column: 1;
    grid-row: 1 / -1;
  }
}
.top-service__item-ttl {
  font-size: clamp(1.25rem, 0.375rem + 1.5625vw, 2rem); /* 32~20(1664~896) */
  font-weight: 600;
  @media (width <= 896px) {
    grid-column: 2;
  }
}
.top-service__item-txt {
  flex: 1;
  min-width: 240px;
  font-size: clamp(0.875rem, 0.5833rem + 0.5208vw, 1.125rem); /* 18~14(1664~896) */
  line-height: 1.8;
  color: color-mix(in srgb, #fff 88%, transparent);
  @media (width <= 896px) {
    grid-column: 2;
    font-size: calc((14 / 16) * 1rem); /* 14px */
    min-width: 100%;
  }
}
.top-service__item-arrow {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  background: #2c2c2c;
  -webkit-mask-image: url(../images/common/btn_mark.svg);
  mask-image: url(../images/common/btn_mark.svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  transition: background-color .3s ease-out;
  @media (width <= 896px) {
    width: 40px;
    height: 40px;
    position: absolute;
    right: 20px;
    bottom: 20px;
    z-index: 1;
    background-color: var(--main_c);
  }
  &::after {
    content: "";
    display: block;
    width: 24px;
    height: 24px;
    background-color: #fff;
    -webkit-mask-image: url(../images/common/arrow_right_white.svg);
    mask-image: url(../images/common/arrow_right_white.svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    transition: translate .3s ease-out;
    @media (width <= 896px) {
      width: 18px;
      height: 18px;
    }
  }
}
.top-service__item.is-active .top-service__item-arrow {
  background-color: var(--main_c);
}
.top-service__btn {
  margin-top: 64px;
  text-align: center;
  @media (width <= 896px) {
    margin-top: 32px;
  }
  .common-arrow__btn {
    justify-content: center;
  }
}

/* ============================================ */
/* Works */
/* ============================================ */
.top-works {
  position: relative;
}
.top-works__inner {
  padding-top: 272px;
  @media (width <= 896px) {
    padding-top: 160px;
  }
}
.top-works__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 48px;
  @media (width <= 1025px) {
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }
  .top-headline--left {
    @media (width <= 1025px) {
      align-items: center;
    }
  }
}
.top-works__sub {
  max-width: 816px;
  font-size: var(--fs_mm); /* 20~16 */
  line-height: 1.8;
  @media (width <= 1025px) {
    max-width: 100%;
  }
}
.top-works__filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px 16px;
  margin-top: 64px;
  @media (width <= 896px) {
    justify-content: flex-start;
    gap: 4px;
    margin-top: 32px;
  }
}
.top-works__tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 120px;
  padding: calc((6 / 14) * 1em) calc((16 / 14) * 1em);
  background: var(--main_c);
  border-radius: 9999px;
  color: #fff;
  font-size: clamp(0.75rem, 0.6042rem + 0.2604vw, 0.875rem); /* 14~12(1664~896) */
  font-weight: 900;
  letter-spacing: .08em;
  transition: background .3s ease-out;
  @media (width <= 896px) {
    min-width: 0;
  }
  &:hover {
    @media (hover: hover) {
      opacity: 1;
      background: var(--font_c);
    }
  }
}
.top-works__tag--active {
  background: var(--font_c);
}
.top-works__empty {
  padding: 64px 0;
  color: var(--font_c);
  font-size: .9375rem;
  line-height: 1.8;
  @media (width <= 896px) {
    padding: 40px 0;
  }
}
.top-works__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 48px;
  @media (width <= 1025px) {
    display: block;
    gap: 0;
    margin-inline: calc(50% - 50vw);
    padding-inline: 20px;
    margin-top: 24px;
  }
  /* PCはJS側でdestroy:trueにするため、track/listをdisplay:contentsにしてグリッドを維持 */
  /* Splideコア側に .splide.is-initialized:not(.is-active) .splide__list{display:block} という
     詳細度の高いルールがあり、destroy状態だと display:block で上書きされてしまうため !important で対抗 */
  @media (width > 1025px) {
    .splide__track,
    .splide__list {
      display: contents !important;
    }
  }
  &.splide {
    visibility: visible;
  }
  .splide__track {
    @media (width <= 1025px) {
      padding-bottom: 8px;
      overflow: visible!important;
    }
  }
  .splide__slide {
    @media (width <= 1025px) {
      width: min(320px, ((300 / 375) * 100vw));
    }
  }
}
.top-work__card {
  background: #fff;
  border-radius: 16px;
  overflow: clip;
  height: 100%;
  transition: box-shadow .3s ease-out;
  @media (hover: hover) {
    &:has(.top-work__card-link:hover) {
      box-shadow: 0 0 20px 0 color-mix(in srgb, var(--main_c) 40%, transparent);
    }
  }
}
.top-work__card-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  padding-bottom: clamp(1.5rem, 0.333rem + 2.083vw, 2.5rem); /* 40~24(1664~896) */
  &:hover {
    @media (hover: hover) {
      opacity: 1;
      .top-work__card-more {
        color: var(--main_c);
      }
      .top-work__card-more-circle {
        background-color: var(--font_c);
      }
      .top-work__card-more-circle::after {
        translate: 3px 0;
      }
      .top-work__card-thumb img {
        scale: 1.08;
      }
    }
  }
}
.top-work__card-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    aspect-ratio: 532 / 299;
    transition: scale .4s ease-out;
  }
}
.top-work__card-detail {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: clamp(1.5rem, 0.333rem + 2.083vw, 2.5rem) clamp(1.5rem, 0.917rem + 1.042vw, 2rem); /* 40~24 32~24(1664~896) */
  border-top: 1px solid var(--bg_c);
  @media (width <= 896px) {
    gap: 8px;
  }
}
.top-work__card-labels {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  @media (width <= 896px) {
    gap: 4px;
  }
}
.top-work__card-label {
  display: inline-flex;
  align-items: center;
  padding: calc((4/ 12) * 1em) calc((16 / 12) * 1em);
  background: var(--bg_c);
  border: 1px solid var(--main_c);
  border-radius: 9999px;
  color: var(--main_c);
  font-size: calc((12 / 16) * 1rem); /* 12px */
  font-weight: 900;
  letter-spacing: .08em;
}
.top-work__card-dl {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.top-work__card-client {
  font-size: var(--fs_m); /* 16~14 */
  font-weight: 600;
  line-height: 1.8;
  letter-spacing: .06em;
  color: var(--main_c);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.top-work__card-ttl {
  font-size: var(--fs_mm); /* 20~16 */
  font-weight: 600;
  line-height: 1.8;
  color: var(--font_c);
}
.top-work__card-txt {
  margin-top: 16px;
  font-size: var(--fs_m); /* 16~14 */
  line-height: 1.8;
  letter-spacing: .06em;
  color: var(--font_c);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  @media (width <= 896px) {
    margin-top: 4px;
  }
}
.top-work__card-more {
  width: calc(100% - clamp(3rem, 1.8333rem + 2.0833vw, 4rem)); /* 64~48(1664~896) */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 16px;
  border-top: 1px dashed var(--main_c);
  font-size: var(--fs_m); /* 16~14 */
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--font_c);
  transition: color .3s ease-out;
  margin-top: auto;
  margin-inline: auto;
}
.top-work__card-more-circle {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background-color: var(--main_c);
  -webkit-mask-image: url(../images/common/btn_mark.svg);
  mask-image: url(../images/common/btn_mark.svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  transition: background-color .3s ease-out;
  @media (width <= 896px) {
    width: 32px;
    height: 32px;
  }
  &::after {
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    background-color: #fff;
    -webkit-mask-image: url(../images/common/arrow_right_white.svg);
    mask-image: url(../images/common/arrow_right_white.svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    transition: translate .3s ease-out;
    @media (width <= 896px) {
      width: 14px;
      height: 14px;
    }
  }
}
.top-works__btn {
  margin-top: 48px;
  display: flex;
  justify-content: center;
  @media (width <= 896px) {
    margin-top: 32px;
  }
  .common-arrow__btn {
    justify-content: center;
  }
}

/* ============================================ */
/* Company */
/* ============================================ */
.top-company {
  position: relative;
}
.top-company__img {
  width: min(714px, 50%);
  aspect-ratio: 714 / 519;
  container-type: inline-size;
  position: absolute;
  top: 80px;
  right: calc((32 / 1920) * 100vw);
  @media (width <= 896px) {
    width: min(328px, 90%);
    top: 48px;
    right: max(-16px, ((-16 / 375) * 100vw));
  }
  img {
    width: 100%;
    max-width: none;
  }
}
.top-company__bean {
  width: calc((714 / 714) * 100cqw);
  height: calc((474 / 714) * 100cqw);
  position: absolute;
  bottom: 0;
  left: 0;
}
.top-company__photo {
  width: calc((378 / 714) * 100cqw);
  height: calc((367 / 714) * 100cqw);
  position: absolute;
  top: 0;
  left: calc((125 / 714) * 100cqw);
}
.top-company__blur {
  position: absolute;
  img {
    width: 100%;
    max-width: none;
  }
  &.top-company__blur--01 {
    width: min(480px, (480 / 1920) * 100vw);
    top: 280px;
    right: calc((600 / 1920) * 100vw);
    @media (width <= 896px) {
      width: 200px;
      top: 160px;
      right: auto;
      left: calc((-32 / 375) * 100vw);
    }
  }
  &.top-company__blur--02 {
    width: min(344px, (344 / 1920) * 100vw);
    top: 360px;
    right: calc((840 / 1920) * 100vw);
    @media (width <= 896px) {
      width: 110px;
      top: 250px;;
      right: auto;
      left: calc((-80 / 375) * 100vw);
    }
  }
}
.top-company__inner {
  position: relative;
  z-index: 1;
  padding-top: 256px;
  @media (width <= 896px) {
    padding-top: 280px;
  }
}
.top-company__lead {
  margin-top: 64px;
  font-family: var(--font_display);
  font-weight: 900;
  font-size: var(--fs_xxl); /* 48~32 */
  line-height: 1.6;
  color: var(--font_c);
  @media (width <= 896px) {
    margin-top: 24px;
    font-size: min(32px, ((32 / 375) * 100vw));
  }
}
.top-company__body {
  display: flex;
  align-items: flex-end;
  gap: clamp(2rem, -4.417rem + 11.458vw, 7.5rem); /* 120~32(1664~896) */
  margin-top: 48px;
  @media (width <= 1025px) {
    flex-direction: column;
    align-items: stretch;
    margin-top: 40px;
  }
}
.top-company__stats {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  @media (width <= 767px) {
    grid-template-columns: 1fr;
  }
  @media (width <= 896px) {
    display: block;
    grid-template-columns: none;
    margin-inline: calc(50% - 50vw);
    padding-inline: 20px;
  }
  /* PCはJS側でdestroy:trueにするため、track/listをdisplay:contentsにしてグリッドを維持 */
  /* Splideコア側に .splide.is-initialized:not(.is-active) .splide__list{display:block} という
     詳細度の高いルールがあり、destroy状態だと display:block で上書きされてしまうため !important で対抗 */
  @media (width > 896px) {
    .splide__track,
    .splide__list {
      display: contents !important;
    }
  }
  &.splide {
    visibility: visible;
  }
  .splide__track {
    @media (width <= 896px) {
      padding-bottom: 8px;
      overflow: visible !important;
    }
  }
  .splide__slide {
    @media (width <= 896px) {
      width: min(260px, ((260 / 375) * 100vw));
    }
  }
}
.top-company__stat {
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 0.333rem + 2.083vw, 2.5rem); /* 40~24(1664~896) */
  padding: clamp(2rem, 0.833rem + 2.083vw, 3rem) clamp(1.5rem, 0.917rem + 1.042vw, 2rem); /* 48~32 32~24(1664~896) */
  border-inline: 1px dashed var(--main_c);
  margin-right: -1px;
  height: 100%;
  @media (width <= 896px) {
    border-inline: 1px dashed var(--main_c);
    border-block: none;
    margin-right: -1px;
    margin-bottom: 0;
  }
}
.top-company__stat-block {
  display: flex;
  flex-direction: column;
  gap: clamp(0.5rem, -0.083rem + 1.042vw, 1rem); /* 16~8(1664~896) */
}
.top-company__stat-label {
  font-size: clamp(0.875rem, 0.1458rem + 1.3021vw, 1.5rem); /* 24~14(1664~896) */
  font-weight: 600;
  color: var(--main_c);
}
.top-company__stat-num {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  font-family: var(--font_en);
  font-weight: 800;
  font-size: clamp(2.75rem, 1.2917rem + 2.6042vw, 4rem); /* 64~44(1664~896) */
  line-height: 1;
  color: var(--main_c);
}
.top-company__stat-num--stack {
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}
.top-company__stat-unit {
  font-family: var(--font_normal);
  font-size: calc((20 / 16) * 1rem); /* 20px */
  font-weight: 600;
  color: #0d0d0d;
  padding-bottom: 9px;
}
.top-company__stat-num--stack .top-company__stat-unit {
  padding-bottom: 0;
}
.top-company__stat-desc {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.top-company__stat-strong {
  font-size: calc((18 / 16) * 1rem); /* 18px */
  font-weight: 600;
  line-height: 1.8;
  color: var(--font_c);
}
.top-company__stat-txt {
  font-size: var(--fs_m); /* 16~14 */
  line-height: 1.8;
  letter-spacing: .06em;
  color: var(--font_c);
}
.top-company__btn {
  flex-shrink: 0;
  padding-bottom: 8px;
  @media (width <= 1025px) {
    align-self: center;
  }
}

/* ============================================ */
/* News */
/* ============================================ */
.top-newsinfo {
  position: relative;
}
.top-newsinfo__inner {
  display: flex;
  gap: clamp(40px, 8vw, 120px);
  padding-top: 256px;
  @media (width <= 1025px) {
    flex-direction: column;
    gap: 16px;
    padding-top: 142px;
  }
}
.top-newsinfo__head {
  flex-shrink: 0;
}
.top-newsinfo__content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 32px;
}
.top-newsinfo__list {
  width: 100%;
}
.top-newsinfo__empty {
  width: 100%;
  color: var(--font_c);
  @media (width <= 896px) {
    margin-top: 16px;
  }
}
.top-newsinfo-item {
  border-top: 1px dashed var(--line_c);
  &:last-child {
    border-bottom: 1px dashed var(--line_c);
  }
}
.top-newsinfo-item__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 28px 24px;
  color: var(--font_c);
  @media (width <= 896px) {
    flex-wrap: wrap;
    gap: 8px;
    padding: 24px 38px 24px 8px;
  }
  &::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: linear-gradient(90deg, color-mix(in srgb, #fff 0%, transparent) 0%, color-mix(in srgb, #fff 56%, transparent) 10%, color-mix(in srgb, #fff 80%, transparent) 20%, #fff 50%, color-mix(in srgb, #fff 56%, transparent) 90%, color-mix(in srgb, #fff 0%, transparent) 100%);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .6s ease-out;
  }
  > * {
    position: relative;
    z-index: 1;
  }
  &:hover {
    @media (hover: hover) {
      opacity: 1;
      &::before {
        transform: scaleX(1);
      }
      .top-newsinfo-item__date {
        color: var(--main_c);
      }
      .top-newsinfo-item__txt {
        color: var(--main_c);
        text-decoration: underline;
        text-underline-offset: .2em;
      }
      .top-newsinfo-item__arrow {
        translate: 4px 0;
      }
    }
  }
}
.top-newsinfo-item__date {
  flex-shrink: 0;
  width: 7em;
  font-family: var(--font_en);
  font-size: clamp(0.625rem, 0.3333rem + 0.5208vw, 0.875rem); /* 14~10(1664~896) */
  font-weight: 800;
  letter-spacing: .06em;
  transition: color .3s ease-out;
}
.top-newsinfo-item__label {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 80px;
  padding: calc((8 / 12) * 1em) calc((12 / 12) * 1em);
  background: #fff;
  border: 1px solid var(--main_c);
  border-radius: 100px;
  color: var(--main_c);
  font-size: clamp(0.625rem, 0.4792rem + 0.2604vw, 0.75rem); /* 16~12(1664~896) */
  font-weight: 900;
  letter-spacing: .08em;
  line-height: 1;
}
.top-newsinfo-item__txt {
  flex: 1;
  min-width: 0;
  font-size: var(--fs_m); /* 16~14 */
  line-height: 1.8;
  letter-spacing: .06em;
  transition: all .3s ease-out;
  @media (width <= 896px) {
    flex-basis: 100%;
    min-width: 100%;
  }
}
.top-newsinfo-item__new {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: calc((4 / 12) * 1em) calc((14 / 12) * 1em);
  background: var(--cv_c);
  border-radius: 9999px;
  color: #fff;
  font-family: var(--font_en);
  font-size: calc((12 / 16) * 1rem); /* 12px */
  font-weight: 800;
  letter-spacing: .06em;
}
.top-newsinfo-item__arrow {
  flex-shrink: 0;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  color: var(--main_c);
  transition: translate .3s ease-out;
  @media (width <= 896px) {
    width: 20px;
    height: 20px;
    position: absolute;
    top: 50%;
    right: 8px;
    translate: 0 -50%;
  }
  svg {
    width: 100%;
    height: 100%;
  }
}
.top-newsinfo__btn {
  .common-arrow__btn {
    justify-content: center;
  }
}


/* ============================================ */
/* Contact（お問い合わせ） */
/* ============================================ */

.top-contact {
  position: relative;
}
.top-contact__circle--green { /* 1777/2250 */
  width: max(1777px, ((1777 / 1920) * 100vw));
  height: max(2250px, ((2250 / 1920) * 100vw));
  background: radial-gradient(49.34% 31.15% at 49.55% -0.1%, #D7FFEF 0%, #2B883A 100%);
  -webkit-mask-image: url(../images/common/contact_circle_green.svg);
  mask-image: url(../images/common/contact_circle_green.svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  position: absolute;
  top: 88px;
  right: calc((600 / 1920) * 100vw);
  z-index: -1;
  @media (width <= 896px) { /* 598/710 */
    width: max(598px, ((598 / 375) * 100vw));
    height: max(710px, ((710 / 375) * 100vw));
    -webkit-mask-image: url(../images/common/contact_circle_green_sp.svg);
    mask-image: url(../images/common/contact_circle_green_sp.svg);
    top: 140px;
    right: calc((-20 / 375) * 100vw);
  }
}
.top-contact__circle--white { /* 3494/3011 */
  width: max(3494px, ((3494 / 1920) * 100vw));
  height: max(3011px, ((3011 / 1920) * 100vw));
  background: #fff;
  -webkit-mask-image: url(../images/common/contact_circle_white.svg);
  mask-image: url(../images/common/contact_circle_white.svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  position: absolute;
  top: 128px;
  right: calc((-320 / 1920) * 100vw);
  z-index: 0;
  @media (width <= 896px) { /* 1176/950 */
    width: max(1176px, ((1176 / 375) * 100vw));
    height: max(950px, ((950 / 375) * 100vw));
    -webkit-mask-image: url(../images/common/contact_circle_white_sp.svg);
    mask-image: url(../images/common/contact_circle_white_sp.svg);
    top: 154px;
    right: max(-310px, ((-310 / 375) * 100vw));
  }
}
.top-contact__blur {
  position: absolute;
  img {
    width: 100%;
    max-width: none;
  }
}
.top-contact__blur--01 {
  width: min(390px, (390 / 1920) * 100vw);
  top: 300px;
  right: calc((640 / 1920) * 100vw);
  @media (width <= 896px) {
    width: 158px;
    top: 150px;
    right: calc((96 / 375) * 100vw);
  }
}
.top-contact__blur--02 {
  width: min(270px, (270 / 1920) * 100vw);
  top: 428px;
  right: calc((300 / 1920) * 100vw);
  @media (width <= 896px) {
    width: 106px;
    top: 280px;
    right: calc((-28 / 375) * 100vw);
  }
}
.top-contact__blur--03 {
  width: min(538px, (538 / 1920) * 100vw);
  top: 740px;
  right: calc((620 / 1920) * 100vw);
  @media (width <= 896px) {
    width: 280px;
    top: 320px;
    right: calc((-56 / 375) * 100vw);
  }
}
.top-contact__img {
  width: min(591px, 45%);
  container-type: inline-size;
  aspect-ratio: 591 / 430;
  position: absolute;
  top: 128px;
  right: calc((214 / 1920) * 100vw);
  @media (width <= 896px) {
    width: min(296px, 85%);
    top: 108px;
    right: max(-96px, ((-96 / 375) * 100vw));
  }
  img {
    width: 100%;
    max-width: none;
  }
}
.top-contact__bean {
  width: calc((591 / 591) * 100cqw);
  height: calc((393 / 591) * 100cqw);
  position: absolute;
  bottom: 0;
  left: 0;
}
.top-contact__photo {
  width: calc((314 / 591) * 100cqw);
  height: calc((304 / 591) * 100cqw);
  position: absolute;
  top: 0;
  left: calc((100 / 591) * 100cqw);
}
.top-contact__inner {
  position: relative;
  z-index: 1;
  padding-top: 480px;
  @media (width <= 896px) {
    padding-top: 318px;
  }
}
.top-contact__body {
  display: flex;
  justify-content: space-between;
  gap: clamp(2rem, 0.833rem + 2.083vw, 3rem); /* 48~32(1664~896) */
  margin-top: 64px;
  @media (width <= 1025px) {
    flex-direction: column;
    align-items: center;
  }
  @media (width <= 896px) {
    margin-top: 40px;
  }
}
.top-contact__dl {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 48px;
  @media (width <= 896px) {
    gap: 16px;
  }
}
.top-contact__ttl {
  word-break: keep-all;
  font-family: var(--font_display);
  font-weight: 900;
  font-size: clamp(2.25rem, 0.9615rem + 3.4188vw, 4rem); /* 64~36(1664~896) */
  line-height: 1.6;
  letter-spacing: .03em;
  color: var(--font_c);
  @media (width <= 896px) {
    font-size: min(36px, ((36 / 375) * 100vw));
  }
}
.top-contact__txt {
  margin-top: 40px;
  font-size: var(--fs_mm); /* 20~16 */
  line-height: 1.8;
  color: var(--font_c);
}
.top-contact__actions {
  flex-shrink: 0;
  width: 498px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 32px;
  @media (width <= 896px) {
    width: 100%;
    max-width: 315px;
  }
}
.top-contact__more .common-arrow__btn {
  justify-content: center;
}


/* ============================================ */
/* Recruit（バナー） */
/* ============================================ */
.top-recruit {
  padding: 128px 0 48px;
  position: relative;
  @media (width <= 896px) {
    padding: 80px 0 40px;
  }
  &::before {
    @media (width <= 896px) {
      content: "";
      display: block;
      width: 100%;
      height: calc(100% + 200px);
      background: #fff;
      position: absolute;
      bottom: 0;
      left: 0;
    }
  }
}
.top-recruit__link {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 1000px;
  min-height: 240px;
  margin-inline: auto;
  padding: 96px 20px 16px;
  border-radius: 10px;
  overflow: clip;
  box-shadow: 0 0 20px color-mix(in srgb, #45b3b3 40%, transparent);
  color: #fff;
  transition: box-shadow .3s ease-out;
  @media (width <= 896px) {
    min-height: 200px;
    padding: 80px 14px 14px;
  }
  &:hover {
    @media (hover: hover) {
      opacity: 1;
      box-shadow: 0 6px 28px color-mix(in srgb, #45b3b3 55%, transparent);
      .top-recruit__bg img {
        scale: 1.04;
      }
      .top-recruit__circle {
        background-color: var(--main_c);
      }
      .top-recruit__circle-icon {
        background-color: #fff;
      }
    }
  }
}
.top-recruit__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  &::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, color-mix(in srgb, #fff 60%, transparent) 26%, color-mix(in srgb, #000 60%, transparent) 100%);
    mix-blend-mode: multiply;
  }
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    transition: scale .5s ease-out;
    @media (width <= 896px) {
      width: 150%;
      height: 150%;
    }
  }
}
.top-recruit__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
  text-align: center;
  text-shadow: 0 0 10px color-mix(in srgb, #000 80%, transparent);
}
.top-recruit__ttl {
  font-family: var(--font_display);
  font-weight: 900;
  font-size: var(--fs_l); /* 32~24 */
  letter-spacing: .08em;
}
.top-recruit__txt {
  font-size: clamp(0.625rem, 0.4792rem + 0.2604vw, 0.75rem); /* 16~12(1664~896) */
  font-weight: 600;
  line-height: 1.8;
  letter-spacing: .06em;
}
.top-recruit__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  width: min(710px, 100%);
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed #fff;
}
.top-recruit__btn-txt {
  font-size: var(--fs_m); /* 16~14 */
  font-weight: 600;
  letter-spacing: .06em;
}
.top-recruit__circle {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background-color: #fff;
  transition: background-color .3s ease-out;
  -webkit-mask-image: url(../images/common/btn_mark.svg);
  mask-image: url(../images/common/btn_mark.svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  @media (width <= 896px) {
    width: 32px;
    height: 32px;
  }
}
.top-recruit__circle-icon {
  width: 18px;
  height: 18px;
  background-color: var(--main_c);
  transition: background-color .3s ease-out;
  -webkit-mask-image: url(../images/common/icon_blank.svg);
  mask-image: url(../images/common/icon_blank.svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  @media (width <= 896px) {
    width: 14px;
    height: 14px;
  }
}


/* GSAP導入アニメーション：初期表示のちらつき防止 */
/* ============================================ */
/* JS実行前後で見た目が変わらないよう、GSAPが gsap.from() で
   アニメーションさせる要素をあらかじめ非表示にしておく。
   .js は head.php 内の同期スクリプトで <html> に付与される。
   reduced-motionやGSAP読み込み失敗時はtop.js側でopacityを戻す。 */
.js .top-fv__ttl,
.js .top-fv__lead,
/* .js .top-fv__news, */
.js .top-fv__visual-dot,
.js .top-fv__visual-center,
.js .top-fv__visual-circle,
.js .top-fv__visual-bean,
.js .top-fv__visual-sprout,
.js .top-fv__visual-photo,
.js .top-fv__visual-blur,
.js .top-about__ttl,
.js .top-headline__en,
.js .top-headline__jp,
.js .top-company__lead,
.js .top-contact__ttl {
  opacity: 0;
}