@charset "UTF-8";
:root {
  --color-070c33: #070C33;
  --color-0055e6: #0055E6;
  --color-0045bb: #0045BB;
  --color-1a2792: #1A2792;
  --color-1d223e: #1D223E;
  --color-181e40: #181E40;
  --color-191e36: #191E36;
  --color-f2f2f2: #F2F2F2;
  --color-ffffff: #FFFFFF;
  --color-bg-darkest: var(--color-070c33);
  --color-bg-blue: var(--color-1a2792);
  --color-bg-navy: var(--color-1d223e);
  --color-bg-dark: var(--color-181e40);
  --color-bg-mid: var(--color-191e36);
  --color-bg-light: var(--color-f2f2f2);
  --color-accent: var(--color-0055e6);
  --color-accent-dark: var(--color-0045bb);
  --color-white: var(--color-ffffff);
  --font-family-mono: 'DM Mono', monospace;
  --font-family-sans-jp: 'IBM Plex Sans JP', sans-serif;
  --font-family-dm-mono: var(--font-family-mono);
  --font-family-ibm-plex-sans-jp: var(--font-family-sans-jp);
  --font-style-italic: italic;
  --font-style-normal: normal;
  --font-weight-light: 300;
  --font-weight-normal: normal;
  --font-weight-medium: 500;
  --font-weight-400: 400;
  --font-weight-300: 300;
  --font-size-10: 10px;
  --font-size-12: 12px;
  --font-size-14: 14px;
  --font-size-16: 16px;
  --font-size-18: 18px;
  --font-size-22: 22px;
  --font-size-24: 24px;
  --font-size-28: 28px;
  --font-size-30: 30px;
  --font-size-32: 32px;
  --font-size-36: 36px;
  --font-size-42: 42px;
  --font-size-54: 54px;
  --font-size-68: 68px;
  --character-spacing-0: 0px;
  --character-spacing-1-08: 1.08px;
  --character-spacing-1-32: 1.32px;
  --character-spacing-2-16: 2.16px;
  --character-spacing-2-2: 2.2px;
  --character-spacing-2-8: 2.8px;
  --character-spacing-3-8: 3.8px;
  --character-spacing-4-2: 4.2px;
  --line-spacing-16: 16px;
  --line-spacing-24: 24px;
  --line-spacing-30: 30px;
  --line-spacing-32: 32px;
  --line-spacing-38: 38px;
  --line-spacing-42: 42px;
  --line-spacing-44: 44px;
  --line-spacing-47: 47px;
  --line-spacing-56: 56px;
  --line-spacing-71: 71px;
  --line-spacing-84: 84px;
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 48px;
  --space-xl: 80px;
  --space-2xl: 120px;
  --space-3xl: 160px;
  --z-below: -1;
  --z-base: 0;
  --z-content: 2;
  --z-overlay: 10;
  --z-header: 100;
  --z-modal: 300;
  --ease-default: 0.3s ease;
  --ease-slow: 0.75s ease;
}

.main--top .training__label span,
.main--top .benefit__label span, .main--top .positions__label span, .main--top .explore__label span, .main--top .make-vision__label span, .main--top .new_mobility__label span {
  writing-mode: vertical-rl;
  transform: rotate(0deg);
  font-family: var(--font-family-mono);
  font-style: var(--font-style-italic);
  font-size: 104px;
  color: var(--color-accent);
  white-space: nowrap;
  padding: 0 24px;
}

.main--top .training__label,
.main--top .benefit__label, .main--top .positions__label, .main--top .explore__label, .main--top .make-vision__label, .main--top .new_mobility__label {
  width: 135px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  z-index: 19;
}

.interviews__marquee-track, .footer__marquee-track {
  display: flex;
  gap: 48px;
  width: max-content;
  white-space: nowrap;
  animation: marqueeScroll 22s linear infinite;
  border-bottom: 1px solid rgb(255, 255, 255);
  padding-bottom: 15px;
}
.interviews__marquee-track span, .footer__marquee-track span {
  font-family: var(--font-family-mono);
  font-style: var(--font-style-italic);
  font-weight: var(--font-weight-light);
  font-size: clamp(64px, 9vw, 112px);
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--color-accent);
}

.main--dev-interview .development__btn-item-left .btn-learn, .main--training .training-content .development__btn-item-left .btn-learn, .main--training .training-content__map-zoom .btn-learn, .main--top .training__card-body-left .btn-learn,
.main--top .benefit__card-body-left .btn-learn, .main--top .explore .btn, .main--top .make-vision .btn, .btn-learn, .btn, .main--top .training .btn-all-jobs .btn,
.main--top .benefit .btn-all-jobs .btn, .main--top .positions__card-left .btn, .btn--sqr {
  display: inline-flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding: 0 20px;
  width: 100%;
  height: 48px;
  border: 2px solid var(--color-white);
  border-radius: 100px;
  color: var(--color-white);
  font-family: var(--font-family-mono);
  font-style: var(--font-style-italic);
  font-size: var(--font-size-18);
  letter-spacing: var(--character-spacing-1-32);
  text-decoration: none;
  transition: color 0.4s ease;
  z-index: 1;
}
.main--dev-interview .development__btn-item-left .btn-learn::before, .main--training .training-content .development__btn-item-left .btn-learn::before, .main--training .training-content__map-zoom .btn-learn::before, .main--top .training__card-body-left .btn-learn::before,
.main--top .benefit__card-body-left .btn-learn::before, .main--top .explore .btn::before, .main--top .make-vision .btn::before, .btn-learn::before, .btn::before, .main--top .training .btn-all-jobs .btn::before,
.main--top .benefit .btn-all-jobs .btn::before, .main--top .positions__card-left .btn::before, .btn--sqr::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background: var(--color-accent);
  transition: width 0.4s ease;
  z-index: -1;
}
.main--dev-interview .development__btn-item-left .btn-learn::after, .main--training .training-content .development__btn-item-left .btn-learn::after, .main--training .training-content__map-zoom .btn-learn::after, .main--top .training__card-body-left .btn-learn::after,
.main--top .benefit__card-body-left .btn-learn::after, .main--top .explore .btn::after, .main--top .make-vision .btn::after, .btn-learn::after, .btn::after, .main--top .training .btn-all-jobs .btn::after,
.main--top .benefit .btn-all-jobs .btn::after, .main--top .positions__card-left .btn::after, .btn--sqr::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  width: 18px;
  height: 16px;
  background-image: url("./../img/common/icon/arrow.svg");
  background-repeat: no-repeat;
  background-position: center;
  transition: transform 0.3s ease;
}
.main--dev-interview .development__btn-item-left .btn-learn:hover, .main--training .training-content .development__btn-item-left .btn-learn:hover, .main--training .training-content__map-zoom .btn-learn:hover, .main--top .training__card-body-left .btn-learn:hover,
.main--top .benefit__card-body-left .btn-learn:hover, .main--top .explore .btn:hover, .main--top .make-vision .btn:hover, .btn-learn:hover, .btn:hover, .main--top .training .btn-all-jobs .btn:hover,
.main--top .benefit .btn-all-jobs .btn:hover, .main--top .positions__card-left .btn:hover, .btn--sqr:hover {
  color: var(--color-white);
}
.main--dev-interview .development__btn-item-left .btn-learn:hover::before, .main--training .training-content .development__btn-item-left .btn-learn:hover::before, .main--training .training-content__map-zoom .btn-learn:hover::before, .main--top .training__card-body-left .btn-learn:hover::before,
.main--top .benefit__card-body-left .btn-learn:hover::before, .main--top .explore .btn:hover::before, .main--top .make-vision .btn:hover::before, .btn-learn:hover::before, .btn:hover::before, .main--top .training .btn-all-jobs .btn:hover::before,
.main--top .benefit .btn-all-jobs .btn:hover::before, .main--top .positions__card-left .btn:hover::before, .btn--sqr:hover::before {
  width: 100%;
}
.main--dev-interview .development__btn-item-left .btn-learn:hover::after, .main--training .training-content .development__btn-item-left .btn-learn:hover::after, .main--training .training-content__map-zoom .btn-learn:hover::after, .main--top .training__card-body-left .btn-learn:hover::after,
.main--top .benefit__card-body-left .btn-learn:hover::after, .main--top .explore .btn:hover::after, .main--top .make-vision .btn:hover::after, .btn-learn:hover::after, .btn:hover::after, .main--top .training .btn-all-jobs .btn:hover::after,
.main--top .benefit .btn-all-jobs .btn:hover::after, .main--top .positions__card-left .btn:hover::after, .btn--sqr:hover::after {
  transform: translateY(-50%) translateX(5px);
}
@media screen and (max-width: 767px) {
  .main--dev-interview .development__btn-item-left .btn-learn, .main--training .training-content .development__btn-item-left .btn-learn, .main--training .training-content__map-zoom .btn-learn, .main--top .training__card-body-left .btn-learn,
  .main--top .benefit__card-body-left .btn-learn, .main--top .explore .btn, .main--top .make-vision .btn, .btn-learn, .btn, .main--top .training .btn-all-jobs .btn,
  .main--top .benefit .btn-all-jobs .btn, .main--top .positions__card-left .btn, .btn--sqr {
    width: 275px;
    height: 34px;
    margin: 0 auto;
    font-size: 16px;
    color: var(--color-white);
    background: var(--color-accent);
  }
}

.main--top .training .btn-all-jobs .btn,
.main--top .benefit .btn-all-jobs .btn, .main--top .positions__card-left .btn, .btn--sqr {
  height: 80px;
  border-radius: 0;
}
.main--top .training .btn-all-jobs .btn::after,
.main--top .benefit .btn-all-jobs .btn::after, .main--top .positions__card-left .btn::after, .btn--sqr::after {
  border: 1px solid var(--color-white);
  width: 80px;
  height: 30px;
  border-radius: 100px;
}
@media screen and (max-width: 767px) {
  .main--top .training .btn-all-jobs .btn,
  .main--top .benefit .btn-all-jobs .btn, .main--top .positions__card-left .btn, .btn--sqr {
    display: flex;
    height: 50px;
    font-style: normal;
  }
}

html {
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
}

*, :after, :before {
  background-repeat: no-repeat;
  box-sizing: inherit;
}

:after, :before {
  text-decoration: inherit;
  vertical-align: inherit;
}

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

audio:not([controls]) {
  display: none;
  height: 0;
}

hr {
  overflow: visible;
}

article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary {
  display: block;
}

summary {
  display: list-item;
}

small {
  font-size: 80%;
}

[hidden], template {
  display: none;
}

abbr[title] {
  border-bottom: 1px dotted;
  text-decoration: none;
}

a {
  background-color: transparent;
  -webkit-text-decoration-skip: objects;
}

a:active, a:hover {
  outline-width: 0;
}

code, kbd, pre, samp {
  font-family: monospace, monospace;
}

b, strong {
  font-weight: bolder;
}

dfn {
  font-style: italic;
}

mark {
  background-color: #ff0;
  color: #000;
}

sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

input {
  border-radius: 0;
}

[role=button], [type=button], [type=reset], [type=submit], button {
  cursor: pointer;
}

[disabled] {
  cursor: default;
}

[type=number] {
  width: auto;
}

[type=search][type=search]::-webkit-search-cancel-button, [type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

textarea {
  overflow: auto;
  resize: vertical;
}

button, input, optgroup, select, textarea {
  font: inherit;
}

optgroup {
  font-weight: 700;
}

button {
  overflow: visible;
}

[type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner, button::-moz-focus-inner {
  border-style: 0;
  padding: 0;
}

[type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner, button:-moz-focusring {
  outline: 1px dotted;
}

[type=reset], [type=submit], button, html [type=button] button, select {
  text-transform: none;
}

button, input, select, textarea {
  background-color: transparent;
  border-style: none;
  color: inherit;
}

select::-ms-expand {
  display: none;
}

select::-ms-value {
  color: currentColor;
}

legend {
  border: 0;
  color: inherit;
  display: table;
  max-width: 100%;
  white-space: normal;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

[type=search] img {
  border-style: none;
  vertical-align: bottom;
}

progress {
  vertical-align: baseline;
}

svg:not(:root) {
  overflow: hidden;
}

audio, canvas, progress, video {
  display: inline-block;
}

@media screen {
  [hidden~=screen] {
    display: inherit;
  }
  [hidden~=screen]:not(:active):not(:focus):not(:target) {
    position: absolute !important;
    clip: rect(0 0 0 0) !important;
  }
}
[aria-busy=true] {
  cursor: progress;
}

[aria-controls] {
  cursor: pointer;
}

[aria-disabled] {
  cursor: default;
}

::-moz-selection {
  background-color: #b3d4fc;
  color: #000;
  text-shadow: none;
}

::selection {
  background-color: #b3d4fc;
  color: #000;
  text-shadow: none;
}

ul, ol {
  list-style: none;
}

a {
  text-decoration: none;
}

img {
  max-width: 100%;
  vertical-align: bottom;
}

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

body {
  color: var(--color-white);
  font-family: var(--font-family-sans-jp);
}

.pc {
  display: block;
}

.sp {
  display: none;
}

@media screen and (max-width: 767px) {
  .pc {
    display: none;
  }
  .sp {
    display: block;
  }
  .p10 {
    padding: 0 10px;
  }
}
.text-body-bold-jp {
  font-family: var(--font-family-sans-jp);
  font-style: var(--font-style-normal);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-18);
  line-height: var(--line-spacing-30);
  letter-spacing: var(--character-spacing-1-08);
  color: var(--color-white);
}

.text-display-mono {
  font-family: var(--font-family-mono);
  font-style: var(--font-style-italic);
  font-weight: var(--font-weight-light);
  font-size: var(--font-size-32);
  line-height: var(--line-spacing-42);
  letter-spacing: var(--character-spacing-0);
  color: var(--color-white);
}

.text-sub-mono {
  font-family: var(--font-family-mono);
  font-style: var(--font-style-italic);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-22);
  line-height: var(--line-spacing-30);
  letter-spacing: var(--character-spacing-1-32);
  color: var(--color-white);
}

.text-body-wide-jp {
  font-family: var(--font-family-sans-jp);
  font-style: var(--font-style-normal);
  font-weight: var(--font-weight-normal);
  font-size: var(--font-size-22);
  line-height: var(--line-spacing-44);
  letter-spacing: var(--character-spacing-2-2);
  color: var(--color-white);
}

.text-caption-jp {
  font-family: var(--font-family-sans-jp);
  font-style: var(--font-style-normal);
  font-weight: var(--font-weight-normal);
  font-size: var(--font-size-14);
  line-height: var(--line-spacing-24);
  letter-spacing: var(--character-spacing-0);
  color: var(--color-white);
}

.text-body-jp {
  font-family: var(--font-family-sans-jp);
  font-style: var(--font-style-normal);
  font-weight: var(--font-weight-normal);
  font-size: var(--font-size-18);
  line-height: var(--line-spacing-32);
  letter-spacing: var(--character-spacing-0);
  color: var(--color-white);
}

.text-small-jp {
  font-family: var(--font-family-sans-jp);
  font-style: var(--font-style-normal);
  font-weight: var(--font-weight-normal);
  font-size: var(--font-size-14);
  line-height: var(--line-spacing-30);
  letter-spacing: var(--character-spacing-0);
  color: var(--color-white);
}

.text-hero-mono {
  font-family: var(--font-family-mono);
  font-style: var(--font-style-italic);
  font-weight: var(--font-weight-light);
  font-size: var(--font-size-54);
  line-height: var(--line-spacing-71);
  letter-spacing: var(--character-spacing-0);
  color: var(--color-white);
}

.text-heading-jp {
  font-family: var(--font-family-sans-jp);
  font-style: var(--font-style-normal);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-28);
  line-height: var(--line-spacing-56);
  letter-spacing: var(--character-spacing-2-8);
  color: var(--color-white);
}

.text-heading-mono {
  font-family: var(--font-family-mono);
  font-style: var(--font-style-italic);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-36);
  line-height: var(--line-spacing-47);
  letter-spacing: var(--character-spacing-2-16);
  color: var(--color-white);
}

.text-body-airy-jp {
  font-family: var(--font-family-sans-jp);
  font-style: var(--font-style-normal);
  font-weight: var(--font-weight-normal);
  font-size: var(--font-size-18);
  line-height: var(--line-spacing-38);
  letter-spacing: var(--character-spacing-0);
  color: var(--color-white);
}

.text-display-jp {
  font-family: var(--font-family-sans-jp);
  font-style: var(--font-style-normal);
  font-weight: var(--font-weight-normal);
  font-size: var(--font-size-42);
  line-height: var(--line-spacing-84);
  letter-spacing: var(--character-spacing-4-2);
  color: var(--color-white);
}

@keyframes marqueeScroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
@keyframes typingCaretBlink {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
@keyframes floating-y {
  0% {
    transform: translateY(-10%);
  }
  100% {
    transform: translateY(10%);
  }
}
.js-fade {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--ease-slow), transform var(--ease-slow);
}
.js-fade.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.js-fade-delay-1 {
  transition-delay: 0.15s;
}

.js-fade-delay-2 {
  transition-delay: 0.3s;
}

.js-fade-delay-3 {
  transition-delay: 0.45s;
}

.js-title-typing {
  position: relative;
  display: inline-block;
  min-height: 1em;
}
.js-title-typing.is-typing::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0.9em;
  margin-left: 2px;
  border-right: 1px solid currentColor;
  vertical-align: -0.08em;
  animation: typingCaretBlink 1s linear infinite;
}

.target {
  animation: floating-y 1.8s ease-in-out infinite alternate-reverse;
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  background-color: var(--color-070c33);
  background-image: linear-gradient(90deg, var(--color-1a2792) 20%, var(--color-070c33) 100%);
  transition: background 0.4s ease, backdrop-filter 0.4s ease;
  isolation: isolate;
}
.header--scrolled {
  background-color: rgba(7, 12, 51, 0.88);
  background-image: none;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.header.is-open {
  background-color: rgba(7, 12, 51, 0.96);
  background-image: none;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.header__inner {
  padding: 20px 60px;
  display: flex;
  gap: 30px;
  justify-content: space-between;
  align-items: center;
}
.header__logo {
  display: flex;
  align-items: center;
  position: relative;
  z-index: 3;
}
.header__logo a {
  display: flex;
  align-items: center;
}
.header__logo a img {
  width: 100px;
  height: 28px;
}
.header__logo a span {
  font-family: var(--font-family-dm-mono);
  font-style: var(--font-style-italic);
  font-size: var(--font-size-22);
  margin-left: 10px;
}
.header__toggle {
  display: none;
}
.header__nav {
  padding-right: 10%;
}
.header__nav-list {
  font-family: var(--font-family-dm-mono);
  font-size: var(--font-size-18);
  line-height: var(--line-spacing-30);
  display: flex;
  gap: 40px;
  align-items: center;
}
.header__nav-item a {
  color: var(--color-ffffff);
  letter-spacing: var(--character-spacing-1-32);
  position: relative;
  padding-bottom: 3px;
}
.header__nav-item a::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 2px;
  background: var(--color-ffffff);
  transition: width 0.4s ease;
}
.header__nav-item a:hover {
  opacity: 1;
}
.header__nav-item a:hover::before {
  width: 100%;
}
@media screen and (max-width: 767px) {
  .header__nav-item a::before {
    display: none;
  }
}

@media screen and (max-width: 767px) {
  .header__inner {
    padding: 14px 16px;
    gap: 16px;
  }
  .header__logo a img {
    width: 82px;
    height: auto;
  }
  .header__logo a span {
    font-size: 14px;
    margin-left: 8px;
  }
  .header__toggle {
    width: 44px;
    height: 44px;
    background-color: rgba(255, 255, 255, 0.06);
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    position: relative;
    z-index: 4;
  }
  .header__toggle span {
    display: block;
    width: 33px;
    height: 2px;
    background: var(--color-ffffff);
    transition: transform 0.25s ease, opacity 0.25s ease;
  }
  .header__nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    min-height: 100vh;
    min-height: 100dvh;
    height: 100vh;
    height: 100dvh;
    padding: 96px 0px 24px;
    background-color: #070C33;
    z-index: 2;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0.25s ease;
  }
  .header__nav-list {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    font-size: 24px;
    border-top: 1px solid rgb(255, 255, 255);
  }
  .header__nav-item {
    width: 100%;
    border-bottom: 1px solid rgb(255, 255, 255);
  }
  .header__nav-item a {
    display: block;
    width: 100%;
    padding: 20px 50px;
    position: relative;
  }
  .header__nav-item a::after {
    content: "";
    display: block;
    background-image: url("./../img/common/icon/arrow-rgt.svg");
    background-repeat: no-repeat;
    background-position: center;
    width: 18px;
    height: 16px;
    right: 20px;
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
  }
  .header.is-open .header__nav {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .header.is-open .header__toggle span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }
  .header.is-open .header__toggle span:nth-child(2) {
    opacity: 0;
  }
  .header.is-open .header__toggle span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }
  .header__btn-grp {
    display: flex;
    gap: 16px;
    align-items: center;
    flex-direction: column;
    padding: 50px 0;
  }
  .header__btn {
    width: 80%;
    padding: 20px 0;
    font-size: 18px;
    line-height: 1.5;
    text-align: center;
    border-radius: 3px;
    color: var(--color-ffffff);
    font-weight: bold;
  }
  .header .btn-entry {
    background-color: #181E40;
    background-image: linear-gradient(to right, var(--color-accent) 50%, transparent 50%);
    background-size: 200% 100%;
    background-position: right center;
    border: 1px solid var(--color-ffffff);
    transition: background-position 0.4s ease, color 0.4s ease;
  }
  .header .btn-entry:hover {
    background-position: left center;
  }
  .header .btn-saiyo {
    background-color: var(--color-ffffff);
    background-image: linear-gradient(to right, var(--color-accent) 50%, transparent 50%);
    background-size: 200% 100%;
    background-position: right center;
    color: #0045bb;
    transition: background-position 0.4s ease, color 0.4s ease;
  }
  .header .btn-saiyo:hover {
    background-position: left center;
    color: var(--color-ffffff);
  }
  .header .btn-casual {
    background-color: #0055e6;
    background-image: linear-gradient(to right, var(--color-0045bb) 50%, transparent 50%);
    background-size: 200% 100%;
    background-position: right center;
    transition: background-position 0.4s ease;
  }
  .header .btn-casual:hover {
    background-position: left center;
  }
}
.entry-btn {
  position: fixed;
  right: 0;
  top: 50px;
  color: aliceblue;
  z-index: 999;
  writing-mode: vertical-rl;
  width: 70px;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ffffff;
  border-right: none;
  font-size: 18px;
  background-color: #191E36;
  background-image: linear-gradient(to bottom, var(--color-0045bb) 50%, transparent 50%);
  background-size: 100% 200%;
  background-position: bottom center;
  transition: background-position 0.4s ease;
}
.entry-btn:hover {
  background-position: top center;
}

@media screen and (max-width: 767px) {
  .entry-btn {
    display: none;
  }
}
.footer {
  background: radial-gradient(circle at top left, rgba(0, 85, 230, 0.28), transparent 32%), linear-gradient(135deg, #1a2792 0%, #0c103f 48%, #070c33 100%);
  overflow: hidden;
}
.footer__hero {
  position: relative;
}
.footer__hero-image {
  height: min(44vw, 520px);
  min-height: 280px;
  width: 100vw;
  overflow: hidden;
}
.footer__hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.9) brightness(1.08);
}
.footer__faq {
  position: relative;
  z-index: 1;
  width: min(62%, 664px);
  height: 120px;
  margin: -32px auto 0;
  padding: 18px 26px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  overflow: hidden;
  background-color: var(--color-181e40);
  background-image: linear-gradient(to right, var(--color-accent) 50%, transparent 50%);
  background-size: 200% 100%;
  background-position: right center;
  transition: background-position 0.4s ease;
}
.footer__faq:hover {
  background-position: left center;
}
.footer__faq-title {
  font-family: var(--font-family-ibm-plex-sans-jp);
  font-size: clamp(26px, 3.2vw, 36px);
  font-weight: 500;
  letter-spacing: var(--character-spacing-2-16);
  line-height: 1;
}
.footer__faq-title small {
  font-size: var(--font-size-18);
  font-weight: 400;
  letter-spacing: var(--character-spacing-0);
}
.footer__faq-subtitle {
  font-family: var(--font-family-ibm-plex-sans-jp);
  font-size: var(--font-size-18);
  font-weight: 500;
  letter-spacing: 0.14em;
}
.footer__main {
  position: relative;
  padding: 62px 0px 28px;
}
.footer__main::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 85, 230, 0.06) 0, rgba(0, 85, 230, 0.06) 1px, transparent 1px, transparent 100%), linear-gradient(rgba(255, 255, 255, 0.03) 0, rgba(255, 255, 255, 0.03) 1px, transparent 1px, transparent 100%);
  background-size: 180px 100%, 100% 180px;
  pointer-events: none;
  opacity: 0.22;
}
.footer__cta, .footer__bottom, .footer__copyright, .footer__marquee {
  position: relative;
  z-index: 1;
}
.footer__cta {
  max-width: 664px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 14px;
}
.footer__cta-link {
  min-height: 120px;
  padding: 24px 28px;
  border: 1px solid rgba(91, 127, 255, 0.55);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  overflow: hidden;
  background-size: 200% 100%;
  background-position: right center;
  transition: background-position 0.4s ease, border-color 0.25s ease;
}
.footer__cta-link:hover {
  background-position: left center;
}
.footer__cta-link span:first-child {
  font-family: var(--font-family-ibm-plex-sans-jp);
  font-size: clamp(18px, 1.7vw, 24px);
  font-weight: 500;
  letter-spacing: 0.08em;
}
.footer__cta-link--light {
  background-color: #F2F2F2;
  background-image: linear-gradient(to right, var(--color-ffffff) 50%, transparent 50%);
  color: var(--color-0045bb);
  border-color: rgba(255, 255, 255, 0.95);
}
.footer__cta-link--light .footer__cta-icon {
  border-color: currentColor;
}
.footer__cta-link--light .footer__cta-icon::before {
  background-image: url("./../img/common/icon/arrow.svg");
  filter: brightness(0) saturate(100%) invert(21%) sepia(87%) saturate(4268%) hue-rotate(216deg) brightness(95%) contrast(105%);
}
.footer__cta-link--primary {
  background-color: var(--color-0045bb);
  background-image: linear-gradient(to right, var(--color-0055e6) 50%, transparent 50%);
  color: var(--color-ffffff);
}
.footer__cta-icon {
  width: 80px;
  height: 30px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 999px;
  flex-shrink: 0;
  position: relative;
}
.footer__cta-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 18px;
  height: 16px;
  background: url("./../img/common/icon/arrow.svg") center/contain no-repeat;
}
.footer__marquee {
  margin-top: 84px;
  overflow: hidden;
}
.footer__bottom {
  margin-top: 5px;
  padding-top: 26px;
  display: grid;
  grid-template-columns: minmax(220px, 1.2fr) minmax(0, 2fr) minmax(180px, 0.9fr);
  gap: 32px;
  align-items: start;
  max-width: 1035px;
  margin: 0 auto;
  margin-bottom: 80px;
}
.footer__brand-link {
  display: inline-flex;
  flex-direction: column;
  gap: 10px;
}
.footer__brand-link img {
  width: 96px;
  height: auto;
  display: block;
}
.footer__brand-link span {
  font-family: var(--font-family-dm-mono);
  font-style: var(--font-style-italic);
  font-size: var(--font-size-18);
  letter-spacing: var(--character-spacing-1-32);
}
.footer__nav-list {
  display: flex;
  flex-wrap: wrap;
  gap: 35px;
}
.footer__nav-list a {
  font-family: var(--font-family-dm-mono);
  font-size: var(--font-size-14);
  letter-spacing: var(--character-spacing-1-32);
  opacity: 0.8;
  position: relative;
  padding-bottom: 3px;
}
.footer__nav-list a::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 1px;
  background: var(--color-ffffff);
  transition: width 0.4s ease;
}
.footer__nav-list a:hover {
  opacity: 1;
}
.footer__nav-list a:hover::before {
  width: 100%;
}
.footer__nav-item {
  width: 45%;
}
.footer__links {
  display: grid;
  gap: 14px;
  justify-items: end;
}
.footer__links a {
  font-family: var(--font-family-ibm-plex-sans-jp);
  font-size: 12px;
  letter-spacing: 0.08em;
  position: relative;
  padding-bottom: 2px;
}
.footer__links a::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 1px;
  background: var(--color-ffffff);
  transition: width 0.4s ease;
}
.footer__links a:hover {
  opacity: 1;
}
.footer__links a:hover::before {
  width: 100%;
}
.footer__copyright {
  margin-top: 28px;
  font-family: var(--font-family-dm-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  max-width: 1035px;
  margin: 0 auto;
}

@media screen and (max-width: 1024px) {
  .footer__faq {
    width: calc(100% - 80px);
  }
  .footer__main {
    padding: 56px 32px 24px;
  }
  .footer__cta {
    max-width: none;
  }
  .footer__bottom {
    grid-template-columns: 1fr;
  }
  .footer__links {
    display: flex;
    justify-content: space-around;
  }
}
@media screen and (max-width: 767px) {
  .footer__brand-link {
    display: flex;
    gap: 14px;
    justify-content: center;
    align-items: center;
    flex-direction: row;
  }
  .footer__brand-link span {
    font-size: 12px;
  }
  .footer__hero {
    padding: 0;
  }
  .footer__hero-image {
    height: 240px;
    min-height: 240px;
  }
  .footer__faq {
    width: calc(100% - 32px);
    margin-top: 40px;
    max-height: 100px;
  }
  .footer__faq-title {
    font-size: 24px;
  }
  .footer__faq-subtitle {
    font-size: 11px;
  }
  .footer__main {
    padding: 42px 0px 22px;
  }
  .footer__cta {
    grid-template-columns: 1fr;
    padding: 0 20px;
  }
  .footer__cta-link {
    min-height: 76px;
    padding: 18px 18px 18px 20px;
  }
  .footer__cta-link span:first-child {
    font-size: 16px;
  }
  .footer__cta-icon {
    width: 50px;
    height: 20px;
  }
  .footer__marquee {
    margin-top: 52px;
  }
  .footer__marquee-track {
    gap: 28px;
  }
  .footer__marquee-track span {
    font-size: 54px;
  }
  .footer__bottom {
    margin-top: 38px;
    gap: 24px;
  }
  .footer__nav-list {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    border-top: 1px solid rgb(255, 255, 255);
  }
  .footer__nav-list li {
    width: 100%;
    border-bottom: 1px solid rgb(255, 255, 255);
  }
  .footer__nav-list li a {
    display: block;
    width: 100%;
    padding: 20px 50px;
    position: relative;
    opacity: 1;
    font-size: 18px;
  }
  .footer__nav-list li a::after {
    content: "";
    display: block;
    background-image: url("./../img/common/icon/arrow-rgt.svg");
    background-repeat: no-repeat;
    background-position: center;
    width: 18px;
    height: 16px;
    right: 20px;
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
  }
  .footer__copyright {
    margin-top: 20px;
    text-align: center;
    font-size: 10px;
  }
}
.btn-learn {
  border-color: var(--color-accent);
  max-width: 208px;
  color: var(--color-accent);
}
.btn-learn::before {
  background: var(--color-accent);
}
.btn-learn::after {
  background-image: url("./../img/common/icon/arrow-blue.svg");
}
.btn-learn:hover {
  color: var(--color-white);
}
.btn-learn:hover::after {
  background-image: url("./../img/common/icon/arrow.svg");
}

.video-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.video-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.video-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 9, 32, 0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.video-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(100%, 960px);
}
.video-modal__close {
  position: absolute;
  top: -44px;
  right: 0;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-white);
  font-size: 24px;
  line-height: 1;
  z-index: 1;
}
.video-modal__frame {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  background: #000;
  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.45);
}
.video-modal__iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
@media screen and (max-width: 767px) {
  .video-modal {
    padding: 16px;
  }
  .video-modal__close {
    top: -40px;
    width: 34px;
    height: 34px;
  }
}

.main {
  padding-top: 70px;
}

.code {
  z-index: 11;
  width: 100%;
}
.code pre {
  width: 100%;
  margin: 0;
}
.code code {
  font-family: var(--font-family-mono);
  font-style: var(--font-style-normal);
  font-size: var(--font-size-28);
  line-height: var(--line-spacing-44);
  color: var(--color-white);
  display: block;
  width: 100%;
}
.code .comment {
  color: var(--color-accent);
  font-family: var(--font-family-sans-jp);
  font-weight: 500;
  font-size: 24px;
  line-height: var(--line-spacing-16);
}

.boxes {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: url("./../img/top/bg-box.png");
  background-repeat: repeat;
  background-position: center top;
  background-size: auto;
  background-attachment: fixed;
  pointer-events: none;
}

.main--top .top {
  min-height: 100vh;
  background-color: var(--color-070c33);
}
.main--top .top__inner {
  display: grid;
  min-height: calc(100vh - 70px);
  position: relative;
}
.main--top .top__content {
  position: absolute;
  top: 60%;
  left: 30px;
  transform: translate(0, -58%);
}
.main--top .top__sub-title {
  font-family: var(--font-family-dm-mono);
  font-style: var(--font-style-italic);
  font-size: var(--font-size-18);
  line-height: var(--line-spacing-30);
  letter-spacing: var(--character-spacing-1-32);
  margin-bottom: 20px;
}
.main--top .top__sub-title span {
  color: var(--color-ffffff);
}
.main--top .top__main-title {
  font-family: var(--font-family-dm-mono);
  font-style: var(--font-style-italic);
  font-weight: var(--font-weight-300);
  font-size: clamp(56px, 7vw, 96px);
  line-height: 1.05;
  letter-spacing: var(--character-spacing-0);
}
.main--top .top__code pre {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
}
.main--top .top__code code {
  font-family: var(--font-family-dm-mono);
  font-style: var(--font-style-normal);
  font-size: var(--font-size-14);
  line-height: var(--line-spacing-24);
  letter-spacing: var(--character-spacing-0);
  color: rgba(255, 255, 255, 0.35);
  display: block;
}
.main--top .top__code code .comment {
  white-space: pre-line;
}
.main--top .top__imgs {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100vh;
}
.main--top .top__img-item {
  --hero-panel-delay: 0s;
  flex: 1;
  overflow: hidden;
  position: relative;
  background: linear-gradient(90deg, #0f184f 0%, #070c33 100%);
}
.main--top .top__img-item::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(26, 39, 146, 0.92) 0%, rgba(7, 12, 51, 0.98) 100%);
  transform: translateX(0);
  transition: transform 0.95s cubic-bezier(0.22, 1, 0.36, 1) var(--hero-panel-delay);
}
.main--top .top__img-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 0.7s ease calc(var(--hero-panel-delay) + 0.7s), transform 1.1s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--hero-panel-delay) + 0.7s);
}
.main--top .top__img-item.is-visible::before {
  transform: translateX(-100%);
}
.main--top .top__img-item.is-visible.top__img-item--ltr::before {
  transform: translateX(100%);
}
.main--top .top__img-item.is-visible img {
  opacity: 1;
  transform: scale(1);
}
.main--top .top .js-hero-panel.js-fade-delay-1 {
  --hero-panel-delay: 0.35s;
}
.main--top .top .js-hero-panel.js-fade-delay-2 {
  --hero-panel-delay: 0.20s;
}
.main--top .top .js-hero-panel.js-fade-delay-3 {
  --hero-panel-delay: 0.35s;
}
.main--top .new_mobility {
  position: relative;
  display: flex;
  overflow: hidden;
  background: linear-gradient(90deg, var(--color-070c33) 20%, var(--color-1a2792) 100%);
}
.main--top .new_mobility__label {
  position: relative;
  z-index: 2;
}
.main--top .new_mobility__inner {
  position: relative;
  z-index: 2;
  padding: 150px 0;
  max-width: 793px;
  max-height: 1500px;
  height: 1500px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.main--top .new_mobility__text {
  padding: 100px 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.main--top .new_prospects {
  background: var(--color-070c33);
  z-index: 5;
  position: relative;
}
.main--top .make-vision {
  background: linear-gradient(90deg, var(--color-1a2792) 20%, var(--color-070c33) 100%);
  display: flex;
  padding: 25rem 0;
  position: relative;
  z-index: 8;
}
.main--top .make-vision__inner {
  position: relative;
}
.main--top .make-vision .icon-top,
.main--top .make-vision .icon-bottom {
  position: absolute;
}
.main--top .make-vision .icon-top {
  top: 8%;
  right: 10%;
  z-index: 0;
}
.main--top .make-vision .icon-bottom {
  bottom: 15%;
  right: 25%;
  z-index: -1;
}
.main--top .make-vision .icon-bottom img {
  position: relative;
  max-width: 435px;
}
.main--top .make-vision__profile {
  max-width: 435px;
}
.main--top .make-vision__details {
  display: flex;
  flex-wrap: wrap;
  max-width: 1140px;
  align-items: center;
  margin-left: 160px;
  position: relative;
  top: -50px;
  justify-content: space-between;
}
.main--top .make-vision__text p {
  margin: 50px 0;
  font-size: 18px;
  max-width: 554px;
  width: 100%;
}
.main--top .make-vision__title {
  font-family: var(--font-family-ibm-plex-sans-jp);
  font-weight: var(--font-weight-300);
  font-size: var(--font-size-42);
  line-height: var(--line-spacing-56);
  letter-spacing: var(--character-spacing-0);
  color: var(--color-ffffff);
  margin-left: 160px;
  margin-bottom: 35px;
}
.main--top .make-vision__body {
  font-family: var(--font-family-ibm-plex-sans-jp);
  font-size: var(--font-size-18);
  line-height: var(--line-spacing-38);
  letter-spacing: var(--character-spacing-0);
  margin-bottom: 40px;
}
.main--top .make-vision__img {
  overflow: hidden;
}
.main--top .make-vision__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.8s ease;
}
.main--top .explore {
  background: linear-gradient(90deg, var(--color-1a2792) 20%, var(--color-070c33) 100%);
  padding: 12rem 0;
}
.main--top .explore__inner {
  position: relative;
}
.main--top .explore__title {
  font-family: var(--font-family-ibm-plex-sans-jp);
  font-weight: var(--font-weight-300);
  font-size: var(--font-size-42);
  line-height: var(--line-spacing-56);
  letter-spacing: var(--character-spacing-0);
  margin-bottom: 35px;
}
.main--top .explore__cards {
  margin-left: 10%;
  display: grid;
  border-bottom: 2px solid var(--color-ffffff);
}
.main--top .explore .btn {
  max-width: 283px;
}
.main--top .explore__card {
  background: linear-gradient(90deg, var(--color-070c33) 20%, var(--color-1a2792) 100%);
  padding: 50px 0px 50px 40px;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(32px, 62vw, 150px);
  align-items: start;
  transition: background-color 0.3s ease;
  border-top: 2px solid var(--color-ffffff);
  width: 100%;
}
.main--top .explore__card-left {
  width: 25%;
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.main--top .explore__card-right {
  width: 60%;
}
.main--top .explore__card-heading {
  font-family: var(--font-family-dm-mono);
  font-style: var(--font-style-italic);
  font-size: var(--font-size-36);
  letter-spacing: var(--character-spacing-2-2);
  line-height: 1.1;
}
.main--top .explore__card-heading span {
  display: inline-block;
  margin-top: 12px;
  font-size: var(--font-size-14);
  font-family: var(--font-family-ibm-plex-sans-jp);
  font-style: normal;
  font-weight: 500;
}
.main--top .explore__card-img {
  min-width: 0;
  overflow: hidden;
  display: grid;
  gap: 24px;
}
.main--top .explore__card-img img {
  max-width: 100%;
  width: 710px;
  object-position: center;
  height: auto;
  display: block;
  transition: transform 0.6s ease;
  height: clamp(280px, 32vw, 400px);
}
.main--top .explore__card-text {
  font-family: var(--font-family-ibm-plex-sans-jp);
  font-size: var(--font-size-18);
  line-height: var(--line-spacing-30);
  margin-bottom: 36px;
  flex: 1;
  max-width: 42em;
}
.main--top .explore__card-link {
  font-family: var(--font-family-dm-mono);
  font-style: var(--font-style-italic);
  font-size: var(--font-size-14);
  letter-spacing: var(--character-spacing-1-32);
  color: var(--color-0055e6);
  transition: letter-spacing 0.3s ease;
}
.main--top .explore__stat {
  background: var(--color-0055e6);
  color: var(--color-ffffff);
  padding: 24px 28px;
  display: flex;
  /* justify-content: space-between; */
  align-items: center;
  gap: 111px;
  margin-bottom: 10px;
  width: 100%;
  min-height: 180px;
  max-width: 550px;
  border-radius: 10px;
}
.main--top .explore__stat-bar {
  font-family: var(--font-family-dm-mono);
  font-size: var(--font-size-16);
  letter-spacing: var(--character-spacing-1-32);
  flex-shrink: 0;
  display: flex;
  height: 100%;
}
.main--top .explore__stat-grp {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
}
.main--top .explore__stat-value {
  font-family: var(--font-family-ibm-plex-sans-jp);
  font-weight: bold;
  font-size: 110px;
  letter-spacing: var(--character-spacing-0);
  color: var(--color-ffffff);
  display: flex;
  align-items: baseline;
}
.main--top .explore__stat-value span {
  font-size: var(--font-size-54);
  margin-left: 4px;
}
.main--top .explore__stat-label {
  font-family: var(--font-family-ibm-plex-sans-jp);
  font-size: var(--font-size-14);
  line-height: var(--line-spacing-24);
  letter-spacing: var(--character-spacing-0);
}
.main--top .explore__card--data .explore__card-right {
  display: grid;
  gap: 24px;
  max-width: 550px;
}
.main--top .explore__card-right {
  min-width: 0;
}
.main--top .positions {
  padding: 135px 0 120px;
  background: linear-gradient(90deg, var(--color-1a2792) 20%, var(--color-070c33) 100%);
}
.main--top .positions__inner {
  position: relative;
}
.main--top .positions__cards {
  display: grid;
  margin-left: 10%;
}
.main--top .positions__card:hover .positions__card-thumb img {
  transform: scale(1.04);
}
.main--top .positions__card-body {
  padding: 36px 0 40px 0px;
  display: flex;
  flex-wrap: wrap;
  gap: 95px;
}
.main--top .positions__card-thumb {
  margin-bottom: 45px;
  overflow: hidden;
}
.main--top .positions__card-thumb img {
  max-width: 455px;
  max-height: 480px;
  transition: transform 0.5s ease;
}
.main--top .positions__card-right {
  width: 100%;
  max-width: 752px;
}
.main--top .positions__card-left .btn {
  font-style: normal;
  font-size: 24px;
}
.main--top .positions__card-item {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  outline: none;
}
.main--top .positions__card-item:last-child {
  margin-bottom: 0;
}
.main--top .positions__card-item:hover .positions__card-hover::before, .main--top .positions__card-item:focus-visible .positions__card-hover::before, .main--top .positions__card-item:focus-within .positions__card-hover::before {
  transform: translateX(0);
  transition: transform 0.5s ease;
}
.main--top .positions__card-item:hover .positions__card-text, .main--top .positions__card-item:focus-visible .positions__card-text, .main--top .positions__card-item:focus-within .positions__card-text {
  color: var(--color-ffffff);
  border-top-color: rgb(255, 255, 255);
}
.main--top .positions__card-item:hover .positions__card-hover-copy, .main--top .positions__card-item:focus-visible .positions__card-hover-copy, .main--top .positions__card-item:focus-within .positions__card-hover-copy {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.main--top .positions__card-text {
  position: relative;
  z-index: 3;
  font-family: var(--font-family-ibm-plex-sans-jp);
  font-size: var(--font-size-28);
  margin-bottom: 0;
  flex: 1;
  border-top: 1px solid rgb(255, 255, 255);
  padding: 12px 20px 30px 16px;
  height: 160px;
  display: flex;
  flex-direction: column;
  gap: 17px;
  transition: color 0.3s ease, border-top-color 0.3s ease;
}
.main--top .positions__card-text span {
  font-family: var(--font-family-dm-mono);
  font-style: var(--font-style-italic);
  font-size: 16px;
  transition: color 0.3s ease;
}
.main--top .positions__card-title {
  transform: translateX(20);
  transition: transform 0.5s ease;
}
.main--top .positions__card-hover {
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 16px 20px 16px;
  z-index: 2;
  pointer-events: none;
}
.main--top .positions__card-hover::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-0055e6);
  transform: translateX(-100%);
  transition: transform 0.45s ease;
  z-index: -1;
}
.main--top .positions__card-hover-arrow {
  position: absolute;
  top: 16px;
  right: 18px;
  width: 13px;
  height: 13px;
  border-top: 2px solid var(--color-ffffff);
  border-right: 2px solid var(--color-ffffff);
  opacity: 0;
  visibility: hidden;
  transform: rotate(45deg) translate(-6px, 6px);
  transition: opacity 0.25s ease 0.2s, visibility 0.25s ease 0.2s, transform 0.3s ease 0.2s;
}
.main--top .positions__card-hover-arrow {
  position: absolute;
  top: 50%;
  left: 15px;
  width: 13px;
  height: 13px;
  border-top: 2px solid var(--color-ffffff);
  border-right: 2px solid var(--color-ffffff);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-18px) rotate(45deg);
  transition: opacity 0.25s ease 0.15s, visibility 0.25s ease 0.15s, transform 0.35s ease 0.15s;
}
.main--top .positions .brd-btm {
  border-bottom: 1px solid rgb(255, 255, 255);
}
.main--top .positions__card-item:hover .positions__card-hover-arrow, .main--top .positions__card-item:focus-visible .positions__card-hover-arrow, .main--top .positions__card-item:focus-within .positions__card-hover-arrow {
  opacity: 1;
  visibility: visible;
  transform: translateX(20px) rotate(45deg);
}
.main--top .positions__card-item:hover .positions__card-title, .main--top .positions__card-item:focus-visible .positions__card-title, .main--top .positions__card-item:focus-within .positions__card-title {
  position: relative;
  transform: translateX(50px);
  transition: opacity 0.3s ease 0.15s, visibility 0.3s ease 0.15s, transform 0.4s ease 0.15s;
}
.main--top .positions__card-hover-copy {
  display: grid;
  gap: 10px;
  min-width: 0;
  opacity: 0;
  visibility: hidden;
  margin-left: 50px;
  top: 100px;
  position: absolute;
  transform: translateX(-50px);
  transition: opacity 0.3s ease 0.15s, visibility 0.3s ease 0.15s, transform 0.4s ease 0.15s;
}
.main--top .positions__card-hover-label {
  display: none;
}
.main--top .positions__card-hover-title {
  display: none;
}
.main--top .positions__card-hover-desc {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-ffffff);
}
.main--top .positions__card-arrow {
  font-family: var(--font-family-dm-mono);
  font-size: var(--font-size-22);
  color: var(--color-0055e6);
  align-self: flex-end;
  transition: opacity 0.3s ease 0.15s, visibility 0.3s ease 0.15s, transform 0.4s ease 0.15s;
}
.main--top .positions__training {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 60px;
}
.main--top .training,
.main--top .benefit {
  background: linear-gradient(90deg, var(--color-1a2792) 20%, var(--color-070c33) 100%);
  padding: 135px 0px 120px 0px;
}
.main--top .training__inner,
.main--top .benefit__inner {
  position: relative;
}
.main--top .training__cards,
.main--top .benefit__cards {
  display: grid;
  margin-left: 10%;
}
.main--top .training__cards p,
.main--top .benefit__cards p {
  margin-bottom: 30px;
}
.main--top .training__card-body,
.main--top .benefit__card-body {
  display: flex;
  max-height: 100%;
  position: relative;
  cursor: pointer;
}
.main--top .training__card-body-left,
.main--top .benefit__card-body-left {
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 50px;
  background-color: #ececec;
  background-image: linear-gradient(to right, var(--color-ffffff) 50%, transparent 50%);
  background-size: 200% 100%;
  background-position: right center;
  transition: background-position 0.4s ease;
}
.main--top .training__card-body-left img,
.main--top .benefit__card-body-left img {
  max-width: 140px;
  max-height: 110px;
}
.main--top .training__card-body-left .btn-learn,
.main--top .benefit__card-body-left .btn-learn {
  border: 2px solid var(--color-0055e6);
  max-width: 208px;
  color: var(--color-0055e6);
}
.main--top .training__card-body-left .btn-learn::after,
.main--top .benefit__card-body-left .btn-learn::after {
  background-image: url("./../img/common/icon/arrow-blue.svg");
}
.main--top .training__card-body-left .btn-learn:hover,
.main--top .benefit__card-body-left .btn-learn:hover {
  color: var(--color-ffffff);
}
.main--top .training__card-body-left .btn-learn:hover::after,
.main--top .benefit__card-body-left .btn-learn:hover::after {
  background-image: url("./../img/common/icon/arrow.svg");
}
.main--top .training__card-body-right,
.main--top .benefit__card-body-right {
  width: 50%;
  max-height: 360px;
  overflow: hidden;
}
.main--top .training__card-body-right img,
.main--top .benefit__card-body-right img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform 0.3s ease;
}
.main--top .training__card-body:hover .training__card-body-left,
.main--top .training__card-body:hover .benefit__card-body-left,
.main--top .benefit__card-body:hover .training__card-body-left,
.main--top .benefit__card-body:hover .benefit__card-body-left {
  background-position: left center;
}
.main--top .training__card-body:hover .training__card-body-right img,
.main--top .training__card-body:hover .benefit__card-body-right img,
.main--top .benefit__card-body:hover .training__card-body-right img,
.main--top .benefit__card-body:hover .benefit__card-body-right img {
  transform: scale(1.1);
}
.main--top .training .btn-all-jobs,
.main--top .benefit .btn-all-jobs {
  text-align: center;
  padding: 130px 0;
}
.main--top .training .btn-all-jobs p,
.main--top .benefit .btn-all-jobs p {
  margin-bottom: 30px;
  font-family: var(--font-family-ibm-plex-sans-jp);
  font-size: var(--font-size-24);
  line-height: var(--line-spacing-0);
}
.main--top .training .btn-all-jobs .btn,
.main--top .benefit .btn-all-jobs .btn {
  border: none;
  max-width: 892px;
  height: 140px;
  margin: 0 auto;
  padding: 0 115px;
  font-size: 32px;
  font-style: normal;
  cursor: pointer;
  background-color: var(--color-0055e6);
  background-image: linear-gradient(to right, #006AF5 50%, transparent 50%);
  background-size: 200% 100%;
  transition: background-position 0.4s ease, color 0.4s ease;
}
.main--top .training .btn-all-jobs .btn::after,
.main--top .benefit .btn-all-jobs .btn::after {
  right: 115px;
}
.main--top .training .btn-all-jobs .btn:hover,
.main--top .benefit .btn-all-jobs .btn:hover {
  color: var(--color-ffffff);
}

.interviews {
  padding: 0;
  overflow: hidden;
}
.interviews__marquee-track {
  border-bottom: none;
}
.interviews__inner {
  padding: 0 60px;
}
.interviews__head {
  margin-bottom: 28px;
}
.interviews__title {
  font-family: var(--font-family-dm-mono);
  font-style: var(--font-style-italic);
  font-weight: var(--font-weight-300);
  font-size: var(--font-size-42);
  line-height: var(--line-spacing-84);
  letter-spacing: var(--character-spacing-4-2);
  letter-spacing: var(--character-spacing-0);
  text-align: center;
}
.interviews__nav-btn {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  width: 60px;
  height: 60px;
  background-image: url("./../img/common/icon/icon-round-arrow.svg");
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: border-color 0.3s ease, background-color 0.3s ease, opacity 0.3s ease;
}
.interviews__nav-btn:hover {
  opacity: 0.8;
}
.interviews__nav-btn.is-disabled {
  opacity: 0.35;
  cursor: default;
}
.interviews__nav-btn--prev {
  left: clamp(28px, 14vw, 250px);
  transform: translateY(-50%) rotate(180deg);
}
.interviews__nav-btn--next {
  right: clamp(28px, 14vw, 250px);
}
.interviews__viewport {
  position: relative;
}
.interviews__track {
  margin: 0 -17px;
}
.interviews__track .slick-list {
  overflow: visible;
}
.interviews__track .slick-track {
  display: flex;
  align-items: flex-start;
}
.interviews__track .slick-slide {
  height: auto;
  padding: 0 120px;
}
.interviews__track .slick-slide > div {
  height: 100%;
}
.interviews__track .slick-active .interviews__item-img img {
  filter: brightness(1);
}
.interviews__track .slick-active.is-active .interviews__item {
  opacity: 1;
}
.interviews__track .slick-active.is-active .interviews__item .interviews__item-img img {
  filter: brightness(1);
}
.interviews__item {
  display: flex;
  flex-direction: column;
  width: 100%;
  opacity: 0.5;
  transition: opacity 0.3s ease;
}
.interviews.is-active .interviews__item {
  opacity: 1;
}
.interviews.is-active .interviews__item .interviews__item-img img {
  filter: brightness(1);
}
.interviews__item-img {
  overflow: hidden;
  position: relative;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
}
.interviews__item-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(0.9);
  transition: transform 0.7s ease, filter 0.35s ease;
}
.interviews__video-trigger {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
}
.interviews__item:hover .interviews__item-img img {
  transform: scale(1.04);
  filter: brightness(1);
}
.interviews__item-play {
  display: none;
  position: absolute;
  inset: 0;
  margin: auto;
  width: 72px;
  height: 72px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  pointer-events: none;
  transition: transform 0.25s ease, background-color 0.25s ease;
}
.interviews__item-play::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 0;
  height: 0;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-left: 18px solid rgba(255, 255, 255, 0.95);
  transform: translateX(4px);
}
.interviews__video-trigger:hover .interviews__item-play {
  transform: scale(1.06);
  background: rgba(0, 85, 230, 0.5);
}
.interviews__item-body {
  padding: 14px 0px 0 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.interviews__item-tag {
  font-family: var(--font-family-dm-mono);
  font-style: var(--font-style-italic);
  font-size: var(--font-size-14);
  letter-spacing: var(--character-spacing-1-32);
  color: var(--color-0055e6);
  margin-bottom: 12px;
}
.interviews__item-name {
  font-family: var(--font-family-dm-mono);
  font-style: var(--font-style-italic);
  font-size: var(--font-size-22);
  letter-spacing: var(--character-spacing-1-32);
  margin-bottom: 20px;
}
.interviews__item-text {
  font-family: var(--font-family-ibm-plex-sans-jp);
  font-size: 18px;
  line-height: 1.8;
  letter-spacing: 0.04em;
  margin-bottom: 0;
  text-align: center;
}
.interviews__item-link {
  font-family: var(--font-family-dm-mono);
  font-style: var(--font-style-italic);
  font-size: var(--font-size-14);
  letter-spacing: var(--character-spacing-1-32);
  color: var(--color-0055e6);
  transition: letter-spacing 0.3s ease;
}
.interviews__item-link:hover {
  letter-spacing: 3px;
}

.interviews__cross {
  background-image: url("./../img/top/bg-box02.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-repeat: repeat-y;
  background-color: #181E40;
  /* Full height */
  height: 100%;
  /* Create the parallax scrolling effect */
  background-attachment: fixed;
}

.crosstalk {
  padding: 80px 0 160px;
}
.crosstalk__title {
  font-family: var(--font-family-dm-mono);
  font-style: var(--font-style-italic);
  font-weight: var(--font-weight-300);
  font-size: var(--font-size-42);
  letter-spacing: var(--character-spacing-0);
  margin-bottom: 48px;
  text-align: center;
}
.crosstalk__grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
}
.crosstalk__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 50px;
  border-top: 1px solid rgb(255, 255, 255);
  cursor: pointer;
  background-image: linear-gradient(to right, #0045BB 50%, transparent 50%);
  background-size: 200% 100%;
  background-position: right center;
  transition: background-position 0.4s ease;
}
.crosstalk__item:hover {
  background-position: left center;
}
.crosstalk__item-inverse {
  flex-direction: row-reverse;
  border-bottom: 1px solid rgb(255, 255, 255);
  background-image: linear-gradient(to left, #0045BB 50%, transparent 50%);
  background-size: 200% 100%;
  background-position: left center;
  transition: background-position 0.4s ease;
}
.crosstalk__item-inverse:hover {
  background-position: right center;
}
.crosstalk__item-imgs {
  max-width: 50%;
  overflow: hidden;
}
.crosstalk__item-imgs img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease, filter 0.3s ease;
}
.crosstalk__item-arrow {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border-top: 2px solid var(--color-ffffff);
  border-right: 2px solid var(--color-ffffff);
  transform: rotate(45deg);
  margin-right: 25px;
  transition: transform 0.3s ease;
}
.crosstalk .arrow-2nd {
  transform: rotate(-135deg);
  margin-left: 25px;
}
.crosstalk__item-tag {
  font-family: var(--font-family-dm-mono);
  font-style: var(--font-style-italic);
  font-size: var(--font-size-36);
  letter-spacing: var(--character-spacing-1-32);
  color: var(--color-0055e6);
}
.crosstalk__item-title {
  font-family: var(--font-family-ibm-plex-sans-jp);
  font-size: var(--font-size-18);
  line-height: var(--line-spacing-44);
  letter-spacing: var(--character-spacing-2-2);
  margin-bottom: 16px;
  font-weight: normal;
}
.crosstalk__item:hover .crosstalk__item-tag {
  color: var(--color-ffffff);
}
.crosstalk__item:hover .crosstalk__item-title {
  color: var(--color-ffffff);
}
.crosstalk__item:hover .crosstalk__item-arrow {
  transform: rotate(45deg) translateX(5px);
}
.crosstalk__item:hover .arrow-2nd {
  transform: rotate(-135deg) translateX(5px);
}
.crosstalk__item:hover .crosstalk__item-imgs img {
  transform: scale(1.05);
  filter: brightness(0.75);
}

@media screen and (max-width: 1024px) {
  .explore {
    padding: 96px 0;
  }
  .explore__cards {
    margin-left: 0%;
  }
  .explore__card {
    padding: 36px 24px;
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .explore__card-left {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 48px;
  }
  .explore__card-right {
    width: 100%;
  }
  .explore__card-left {
    max-width: none;
  }
  .explore__card-img img {
    height: 320px;
  }
  .explore__stat {
    min-height: 140px;
  }
  .explore__stat-value {
    font-size: 84px;
  }
  .interviews__inner {
    padding: 0 24px;
  }
  .interviews__track {
    margin: 0 -10px;
  }
  .interviews__track .slick-slide {
    padding: 0 10px;
  }
  .interviews__nav-btn {
    top: 160px;
  }
  .interviews__nav-btn--prev {
    left: 18px;
  }
  .interviews__nav-btn--next {
    right: 18px;
  }
  .interviews__item-text {
    font-size: 16px;
  }
}
@media screen and (max-width: 767px) {
  .main--top .top {
    min-height: auto;
  }
  .main--top .top__inner {
    min-height: auto;
    display: flex;
    flex-direction: column;
  }
  .main--top .top__imgs {
    height: 100vh;
  }
  .main--top .top__content {
    left: 10px;
  }
  .main--top .top__sub-title {
    font-size: 12px;
    line-height: 1.6;
    margin-bottom: 10px;
  }
  .main--top .top__main-title {
    font-size: 42px;
    line-height: 0.98;
    margin-bottom: 0;
  }
  .main--top .new_mobility__boxes {
    margin-left: 0;
  }
  .main--top .new_mobility__inner {
    padding: 125px 0;
    max-width: none;
    height: 800px;
  }
  .main--top .new_mobility .code pre {
    padding: 0;
  }
  .main--top .new_mobility .code code {
    font-size: 14px;
    line-height: 1.9;
    padding: 0 38px;
  }
  .main--top .new_mobility .code .comment {
    font-size: 14px;
    white-space: pre-line;
  }
  .main--top .make-vision__label,
  .main--top .explore__label,
  .main--top .positions__label,
  .main--top .training__label,
  .main--top .benefit__label {
    position: relative;
    width: auto;
    margin: 0 0 14px;
    top: auto;
    font-size: 18px;
  }
  .main--top .make-vision__label span,
  .main--top .explore__label span,
  .main--top .positions__label span,
  .main--top .training__label span,
  .main--top .benefit__label span {
    writing-mode: horizontal-tb;
    transform: none;
    font-size: 18px;
    line-height: 1;
    padding: 0;
    letter-spacing: 0.02em;
  }
  .main--top .make-vision {
    padding: 40px 0px;
  }
  .main--top .make-vision .icon-top,
  .main--top .make-vision .icon-bottom {
    width: 95%;
  }
  .main--top .make-vision .icon-top img,
  .main--top .make-vision .icon-bottom img {
    width: 100%;
  }
  .main--top .make-vision .icon-top {
    top: 440px;
    right: 10px;
  }
  .main--top .make-vision .icon-bottom {
    bottom: 0px;
    right: 12px;
  }
  .main--top .make-vision__title {
    margin-left: 0;
    margin-bottom: 10px;
    font-size: 22px;
    line-height: 1.5;
    text-align: center;
  }
  .main--top .make-vision__details {
    justify-content: center;
    margin: 0 auto;
    margin-left: 0px;
    gap: 20px;
    margin-top: 20px;
    top: 0;
  }
  .main--top .make-vision__text p {
    margin: 0px 0 15px;
    font-size: 14px;
    line-height: 1.9;
  }
  .main--top .make-vision__profile {
    display: flex;
    gap: 12px;
    flex-direction: column;
    align-items: center;
  }
  .main--top .make-vision__profile img {
    width: 275px;
    height: auto;
    object-fit: cover;
  }
  .main--top .make-vision__profile span {
    font-size: 12px;
    line-height: 1.6;
  }
  .main--top .make-vision__btn {
    width: 275px;
    max-width: 100%;
    margin: 30px auto;
  }
  .main--top .explore {
    padding: 50px 0;
  }
  .main--top .explore__cards {
    margin-left: 0%;
  }
  .main--top .explore__title {
    margin-bottom: 20px;
    font-size: 20px;
    line-height: 1.5;
    text-align: center;
    font-style: normal;
  }
  .main--top .explore__card {
    display: flex;
    flex-direction: column;
    padding: 24px 0px;
    gap: 20px;
    align-items: center;
  }
  .main--top .explore__card-left {
    gap: 18px;
    width: 100%;
  }
  .main--top .explore__card-left .btn {
    height: 44px;
    font-size: 14px;
    padding: 0 18px;
  }
  .main--top .explore__card-right {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
  .main--top .explore .btn {
    width: 275px;
    max-width: 100%;
    margin: 30px auto;
  }
  .main--top .explore__card-heading {
    font-size: 28px;
    text-align: center;
  }
  .main--top .explore__card-text {
    font-size: 15px;
    line-height: 1.8;
    text-align: center;
  }
  .main--top .explore__card-img {
    gap: 16px;
  }
  .main--top .explore__card-img img {
    width: 100%;
    height: auto;
  }
  .main--top .explore__stat {
    width: 335px;
    padding: 15px 60px 15px 30px;
    min-height: 90px;
    gap: 14px;
  }
  .main--top .explore__stat-bar {
    font-size: 16px;
  }
  .main--top .explore__stat-grp {
    align-items: flex-start;
  }
  .main--top .explore__stat-value {
    font-size: 56px;
  }
  .main--top .explore__stat-value span {
    font-size: 28px;
  }
  .main--top .positions,
  .main--top .training,
  .main--top .benefit {
    padding: 72px 0;
  }
  .main--top .positions__inner {
    padding: 0 10px;
  }
  .main--top .positions__cards {
    margin-left: 0;
  }
  .main--top .positions__card-img {
    font-size: 14px;
    line-height: 1.9;
  }
  .main--top .positions__card-body {
    padding: 20px 0 0;
    flex-direction: column;
    gap: 24px;
  }
  .main--top .positions__card-thumb {
    margin-bottom: 20px;
  }
  .main--top .positions__card-thumb img {
    width: 100%;
    max-width: none;
    max-height: none;
  }
  .main--top .positions__card-left .btn {
    height: 56px;
    font-size: 14px;
  }
  .main--top .positions__card-text {
    font-size: 18px;
    line-height: 1.7;
    padding-top: 12px;
    padding-bottom: 12px;
  }
  .main--top .positions__card-text span {
    display: inline-block;
    margin-bottom: 6px;
    font-size: 13px;
  }
  .main--top .positions__card-item {
    margin-bottom: 12px;
  }
  .main--top .positions__card-item:hover .positions__card-text, .main--top .positions__card-item:focus-visible .positions__card-text, .main--top .positions__card-item:focus-within .positions__card-text {
    opacity: 1;
  }
  .main--top .positions__card-hover {
    display: none;
  }
  .main--top .positions__card-detail {
    display: flex;
    gap: 10px;
    background: var(--color-0055e6);
  }
  .main--top .positions__card-copy {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 15px 15px 15px 20px;
    margin-right: 30px;
  }
  .main--top .positions__card-label {
    font-size: 11px;
    line-height: 1.9;
  }
  .main--top .positions__card-title {
    font-size: 18px;
    line-height: 1.5;
    font-family: var(--font-family-ibm-plex-sans-jp);
  }
  .main--top .positions__card-desc {
    font-size: 14px;
    line-height: 1.9;
    font-family: var(--font-family-ibm-plex-sans-jp);
  }
  .main--top .positions__card-arrow {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    border-top: 2px solid var(--color-ffffff);
    border-right: 2px solid var(--color-ffffff);
    transform: rotate(45deg);
    margin-left: 4px;
    position: absolute;
    top: 45%;
    right: 20px;
    display: flex;
  }
  .main--top .positions__card:hover .main--top .positions__card-arrow {
    transform: translateX(8px);
  }
  .main--top .training__inner,
  .main--top .benefit__inner {
    padding: 0 16px;
  }
  .main--top .training__cards,
  .main--top .benefit__cards {
    margin-left: 0;
    text-align: center;
  }
  .main--top .training__cards > p,
  .main--top .benefit__cards > p {
    font-size: 14px;
    line-height: 1.9;
    margin-bottom: 20px;
  }
  .main--top .training__card-body,
  .main--top .benefit__card-body {
    height: auto;
    flex-direction: column-reverse;
    justify-content: flex-start;
  }
  .main--top .training__card-body-right,
  .main--top .benefit__card-body-right {
    width: 100%;
  }
  .main--top .training__card-body-right img,
  .main--top .benefit__card-body-right img {
    width: 100%;
    max-width: none;
    max-height: none;
    display: block;
  }
  .main--top .training__card-body-left,
  .main--top .benefit__card-body-left {
    width: 100%;
    min-height: 124px;
    gap: 18px;
    padding: 18px 16px;
  }
  .main--top .training__card-body-left img,
  .main--top .benefit__card-body-left img {
    max-width: 68px;
    max-height: 68px;
  }
  .main--top .training__card-body-left .btn-learn,
  .main--top .benefit__card-body-left .btn-learn {
    max-width: 80%;
    height: 44px;
    font-size: 14px;
    padding: 0 18px;
    color: var(--color-ffffff);
  }
  .main--top .training__card-body-left .btn-learn::after,
  .main--top .benefit__card-body-left .btn-learn::after {
    right: 20px;
    background-image: url(./../img/common/icon/arrow.svg);
  }
  .main--top .training .btn-all-jobs,
  .main--top .benefit .btn-all-jobs {
    padding: 56px 16px 0;
  }
  .main--top .training .btn-all-jobs p,
  .main--top .benefit .btn-all-jobs p {
    font-size: 14px;
    line-height: 1.9;
    margin-bottom: 18px;
  }
  .main--top .training .btn-all-jobs .btn,
  .main--top .benefit .btn-all-jobs .btn {
    height: 64px;
    max-width: none;
    padding: 0 24px;
    font-size: 14px;
  }
  .main--top .training .btn-all-jobs .btn::after,
  .main--top .benefit .btn-all-jobs .btn::after {
    right: 20px;
  }
  .interviews {
    padding: 56px 0;
  }
  .interviews__inner {
    padding: 0 20px;
  }
  .interviews__title {
    font-size: 34px;
    line-height: 1.3;
  }
  .interviews__item {
    flex-direction: column;
    margin-bottom: 30px;
    opacity: 1;
  }
  .interviews__item-img {
    height: 220px;
  }
  .interviews__item-play {
    width: 56px;
    height: 56px;
  }
  .interviews__item-play::before {
    border-top-width: 10px;
    border-bottom-width: 10px;
    border-left-width: 15px;
  }
  .interviews__item-body {
    padding-top: 12px;
  }
  .interviews__item-text {
    font-size: 14px;
    line-height: 1.7;
    text-align: left;
  }
  .interviews__nav-btn {
    top: 136px;
    width: 38px;
    height: 38px;
    font-size: 16px;
  }
  .interviews__nav-btn--prev {
    left: 2px;
  }
  .interviews__nav-btn--next {
    right: 2px;
  }
  .crosstalk {
    padding: 0;
    padding-bottom: 80px;
  }
  .crosstalk__inner {
    padding: 0;
  }
  .crosstalk__grid {
    gap: 50px;
  }
  .crosstalk__title {
    font-size: 34px;
    line-height: 1.3;
    margin-bottom: 24px;
    text-align: center;
  }
  .crosstalk__item, .crosstalk__item-inverse {
    flex-direction: column;
    gap: 0;
  }
  .crosstalk__item-imgs {
    max-width: none;
    width: 100%;
  }
  .crosstalk__item-imgs img {
    max-width: none;
  }
  .crosstalk__item-body {
    width: 100%;
    padding: 20px 10px;
    background: var(--color-0055e6);
    color: var(--color-ffffff);
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .crosstalk__item-tag {
    font-size: 18px;
    line-height: 1.6;
    color: var(--color-ffffff);
  }
  .crosstalk__item-title {
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-ffffff);
    letter-spacing: normal;
  }
  .crosstalk__item-text {
    font-size: 14px;
    line-height: 1.8;
    margin-bottom: 16px;
  }
  .crosstalk__item-arrow {
    width: 16px;
    height: 16px;
    margin-right: 10px;
  }
}
.main--future {
  --future-sticky-offset: 110px;
  position: relative;
  background: linear-gradient(90deg, var(--color-070c33) 20%, var(--color-1a2792) 100%);
}
.main--future .future-top {
  position: relative;
  overflow: hidden;
}
.main--future .future-top__inner {
  display: grid;
  min-height: calc(100vh - 70px);
  position: relative;
  z-index: 2;
  padding: 30px 0 120px 30px;
}
.main--future .future-top__title {
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-500);
  font-family: var(--font-family-ibm-plex-sans-jp);
  color: var(--color-ffffff);
  letter-spacing: var(--character-spacing-1-08);
}
.main--future .future-top__body {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: space-between;
  margin-top: 110px;
  margin-left: 160px;
}
.main--future .future-top-intro {
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-300);
  font-family: var(--font-family-ibm-plex-sans-jp);
  letter-spacing: 0.1em;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.main--future .future-top-intro span {
  font-size: var(--font-size-24);
  color: var(--color-ffffff);
}
.main--future .future-top-intro .positions p {
  letter-spacing: 0.1em;
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-300);
  font-family: var(--font-family-ibm-plex-sans-jp);
  color: var(--color-ffffff);
}
.main--future .future-top-intro .positions p span {
  font-size: var(--font-size-18);
  margin-top: 10px;
}
.main--future .future-top-img {
  max-width: 70%;
  overflow: hidden;
}
.main--future .future-top-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.main--future .future-top-text {
  font-size: var(--font-size-42);
  font-weight: var(--font-weight-400);
  font-family: var(--font-family-ibm-plex-sans-jp);
  color: var(--color-ffffff);
  margin-left: 160px;
  letter-spacing: 0.12em;
  line-height: 1.6;
  position: relative;
  margin-bottom: 140px;
}
.main--future .future-top-text p {
  position: absolute;
  top: -100px;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media screen and (max-width: 768px) {
  .main--future .future-top__inner {
    padding: 30px 0;
    min-height: auto;
  }
  .main--future .future-top__title {
    padding: 0 20px 30px;
  }
  .main--future .future-top__body {
    margin-top: 0;
    margin-left: 0;
    flex-direction: column-reverse;
  }
  .main--future .future-top-intro {
    padding: 0px 50px 35px;
    font-size: var(--font-size-12);
  }
  .main--future .future-top-intro span {
    font-size: var(--font-size-18);
  }
  .main--future .future-top-intro .positions p {
    font-size: var(--font-size-10);
  }
  .main--future .future-top-intro .positions p span {
    margin-top: 5px;
    font-size: var(--font-size-14);
  }
  .main--future .future-top-img {
    max-width: 100%;
  }
  .main--future .future-top-text {
    padding: 0 50px 30px;
    font-size: var(--font-size-18);
    line-height: 2;
    margin-left: 50px;
  }
  .main--future .future-top-text p {
    top: 0px;
  }
}
.main--future .future-content {
  position: relative;
  z-index: 1;
}
.main--future .future-content__inner {
  display: flex;
  align-items: flex-start;
  gap: 135px;
  min-height: calc(100vh - 70px);
  position: relative;
  padding: 120px 0;
  background: linear-gradient(-90deg, var(--color-070c33) 20%, var(--color-1a2792) 100%);
}
.main--future .future-content .side-menu {
  width: 25%;
  align-self: flex-start;
  position: sticky;
  top: var(--future-sticky-offset);
}
.main--future .future-content .side-menu-title {
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-medium);
  font-family: var(--font-family-ibm-plex-sans-jp);
  letter-spacing: 0.2em;
  color: var(--color-ffffff);
  padding: 10px 0 10px 30px;
}
.main--future .future-content .side-menu-list ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.main--future .future-content .side-menu-list ul li {
  padding: 10px 0;
  padding-left: 30px;
  letter-spacing: var(--character-spacing-0);
  width: 100%;
  border-bottom: 1px solid var(--color-0055e6);
}
.main--future .future-content .side-menu-list ul li a {
  display: inline-block;
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-medium);
  font-family: var(--font-family-ibm-plex-sans-jp);
  color: var(--color-0055e6);
  border-bottom: 1px solid var(--color-0055e6);
  transition: color var(--ease-default), border-color var(--ease-default);
}
.main--future .future-content .side-menu-list ul li a.is-active {
  color: var(--color-ffffff);
  border-bottom-color: var(--color-ffffff);
}
.main--future .future-content .side-menu-list ul li a:hover {
  color: var(--color-ffffff);
  border-bottom: 1px solid var(--color-ffffff);
}
.main--future .future-content .side-menu-list ul li a:last-child {
  border-bottom: none;
  margin-bottom: 0;
}
.main--future .future-content .side-menu-list ul li:first-child {
  border-top: 1px solid var(--color-0055e6);
}
.main--future .future-content-main {
  width: 80%;
  max-width: 778px;
}
.main--future .future-content-main-item {
  scroll-margin-top: calc(var(--future-sticky-offset) + 30px);
}
.main--future .future-content-main-item:not(:last-child) {
  margin-bottom: 120px;
}
.main--future .future-content-main-item-title h2 {
  font-size: var(--font-size-28);
  font-weight: var(--font-weight-medium);
  font-family: var(--font-family-ibm-plex-sans-jp);
  color: var(--color-ffffff);
  letter-spacing: 0.12em;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-ffffff);
}
.main--future .future-content-main-item-body p {
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-400);
  font-family: var(--font-family-ibm-plex-sans-jp);
  color: var(--color-ffffff);
  line-height: var(--line-spacing-38);
  padding: 16px 0;
}
.main--future .future-content-main-item-body img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  padding: 50px 0;
  display: block;
}
@media screen and (max-width: 768px) {
  .main--future .future-content__inner {
    flex-direction: column;
    align-items: center;
    gap: 50px;
    padding: 50px 0 100px;
  }
  .main--future .future-content-main {
    width: 100%;
    padding: 0 10px;
  }
  .main--future .future-content-main-item:not(:last-child) {
    margin-bottom: 10px;
  }
  .main--future .future-content-main-item-title h2 {
    font-size: var(--font-size-18);
    letter-spacing: 0.1em;
  }
  .main--future .future-content-main-item-body img {
    padding: 30px 40px;
  }
  .main--future .future-content-main-item-body p {
    font-size: var(--font-size-14);
    line-height: 2;
  }
}

.main--culture {
  --culture-sticky-offset: 110px;
  position: relative;
}
.main--culture .culture-top {
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, var(--color-070c33) 20%, var(--color-1a2792) 100%);
}
.main--culture .culture-top__inner {
  display: grid;
  min-height: 365px;
  position: relative;
  z-index: 2;
  padding: 30px 0 120px 30px;
}
.main--culture .culture-top__title {
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-500);
  font-family: var(--font-family-ibm-plex-sans-jp);
  color: var(--color-ffffff);
  letter-spacing: var(--character-spacing-1-08);
}
.main--culture .culture-top__body {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: space-between;
  margin-top: 110px;
  margin-left: 160px;
}
.main--culture .culture-top-intro {
  font-size: var(--font-size-68);
  font-weight: var(--font-weight-500);
  font-style: var(--font-style-italic);
  font-family: var(--font-family-dm-mono);
  color: var(--color-ffffff);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.main--culture .culture-top-intro span {
  font-size: var(--font-size-24);
  font-weight: var(--font-weight-500);
  font-family: var(--font-family-ibm-plex-sans-jp);
  font-style: var(--font-style-normal);
  color: var(--color-ffffff);
}
.main--culture .culture-top-img {
  max-width: 681px;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 0;
}
.main--culture .culture-top-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media screen and (max-width: 768px) {
  .main--culture .culture-top__inner {
    min-height: auto;
    padding: 22px 0 0;
  }
  .main--culture .culture-top__title {
    padding: 0 14px;
    font-size: 16px;
    line-height: 1.35;
    letter-spacing: 0.08em;
    position: relative;
    z-index: 3;
  }
  .main--culture .culture-top__body {
    position: relative;
    margin-top: 0;
    margin-left: 0;
    flex-direction: column-reverse;
    justify-content: flex-start;
    gap: 0;
    min-height: 290px;
  }
  .main--culture .culture-top-intro {
    position: absolute;
    z-index: 3;
    padding: 56px 14px 0;
    font-size: 37px;
    line-height: 1.08;
    letter-spacing: 0.04em;
    top: 0;
  }
  .main--culture .culture-top-intro span {
    margin-top: 10px;
    font-size: var(--font-size-18);
    line-height: 1.35;
    letter-spacing: 0.08em;
  }
  .main--culture .culture-top-img {
    max-width: none;
    width: 100%;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
  }
  .main--culture .culture-top-img img {
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center bottom;
  }
}
.main--culture .office-branches {
  padding: 88px 0 140px;
  position: relative;
  background: linear-gradient(-90deg, var(--color-070c33) 20%, var(--color-1a2792) 100%);
}
.main--culture .office-branches__description {
  max-width: 1120px;
  margin: 0 auto 74px;
  padding: 0 30px;
  color: var(--color-ffffff);
  font-family: var(--font-family-ibm-plex-sans-jp);
  font-size: var(--font-size-18);
  line-height: 2.2;
  letter-spacing: 0.02em;
}
.main--culture .office-branches__description p + p {
  margin-top: 26px;
}
.main--culture .office-branches__inner {
  max-width: 1120px;
  margin: 0 auto;
}
.main--culture .office-branches__cards {
  position: relative;
}
.main--culture .office-branches__card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 100px;
  position: relative;
  min-height: 392px;
  padding: 80px 0;
  overflow: visible;
}
.main--culture .office-branches__card-inverse {
  flex-direction: row-reverse;
}
.main--culture .office-branches__card-left {
  flex: 0 1 54%;
  min-width: 0;
  position: relative;
  z-index: 2;
}
.main--culture .office-branches__card-right {
  flex: 0 0 min(42%, 420px);
  z-index: 3;
}
.main--culture .office-branches__card-heading {
  margin: 0 0 26px;
  display: inline-flex;
  align-items: center;
  padding-right: 18px;
  font-size: var(--font-size-28);
  font-weight: var(--font-weight-medium);
  font-family: var(--font-family-ibm-plex-sans-jp);
  color: var(--color-ffffff);
  letter-spacing: 0.12em;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-ffffff);
  width: 100%;
  position: relative;
  z-index: 2;
}
.main--culture .office-branches__details, .main--culture .office-branches__details-box {
  color: rgb(255, 255, 255);
  font-family: var(--font-family-ibm-plex-sans-jp);
  font-size: var(--font-size-18);
  line-height: 2.15;
  letter-spacing: 0;
}
.main--culture .office-branches__details {
  max-width: 100%;
  margin-bottom: 34px;
}
.main--culture .office-branches__details-box {
  max-width: 100%;
  padding: 24px 28px 26px;
  background: rgba(255, 255, 255, 0.15);
}
.main--culture .office-branches__details-box h5 {
  margin: 0 0 14px;
  color: var(--color-ffffff);
  font-family: var(--font-family-ibm-plex-sans-jp);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-500);
  letter-spacing: 0.08em;
}
.main--culture .office-branches__card-img {
  aspect-ratio: 1/1;
  width: 435px;
}
.main--culture .office-branches__card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.main--culture .office-branches__card-link {
  margin-top: 24px;
}
@media screen and (max-width: 1024px) {
  .main--culture .office-branches__card {
    gap: 24px;
    padding: 40px 10px 36px;
  }
  .main--culture .office-branches__card::before {
    left: 34px;
    right: 34px;
  }
  .main--culture .office-branches__card-left {
    flex-basis: 58%;
  }
  .main--culture .office-branches__card-right {
    flex-basis: 36%;
  }
}
@media screen and (max-width: 767px) {
  .main--culture .office-branches {
    padding: 54px 0 80px;
  }
  .main--culture .office-branches__description {
    margin-bottom: 42px;
    padding: 0 20px;
    font-size: var(--font-size-14);
    line-height: 2;
  }
  .main--culture .office-branches__description p br {
    display: none;
  }
  .main--culture .office-branches__description p + p {
    margin-top: 18px;
  }
  .main--culture .office-branches__inner {
    padding: 0 10px;
  }
  .main--culture .office-branches__card {
    flex-direction: column;
    min-height: 0;
    padding: 24px 0px 24px;
  }
  .main--culture .office-branches__card::before {
    top: 41px;
    left: 18px;
    right: 18px;
  }
  .main--culture .office-branches__card-left, .main--culture .office-branches__card-right {
    flex: 0 0 100%;
    width: 100%;
  }
  .main--culture .office-branches__card-right {
    margin-top: 20px;
  }
  .main--culture .office-branches__card-heading {
    margin-bottom: 20px;
    padding-right: 12px;
    font-size: var(--font-size-18);
  }
  .main--culture .office-branches__details, .main--culture .office-branches__details-box {
    font-size: var(--font-size-14);
    line-height: 1.95;
  }
  .main--culture .office-branches__details {
    max-width: none;
    margin-bottom: 20px;
  }
  .main--culture .office-branches__details-box {
    max-width: none;
    padding: 18px 16px 20px;
  }
  .main--culture .office-branches__card-img {
    max-width: 355px;
    width: 100%;
    height: 220px;
    margin: 0 auto;
    border-width: 3px;
  }
  .main--culture .office-branches__card-link {
    margin-top: 18px;
  }
}
.main--culture .base-caption li {
  font-size: var(--font-size-16);
  margin-left: 20px;
}
.main--culture .base-caption li::before {
  content: "※";
  display: inline-block;
  margin-right: 8px;
  margin-left: -20px;
}
.main--culture .base-caption li:first-child {
  padding-bottom: 15px;
}
@media screen and (max-width: 767px) {
  .main--culture .base-caption li {
    font-size: var(--font-size-12);
  }
}
.main--culture .culture-btn {
  margin-top: 120px;
}
.main--culture .culture-btn .benefit__inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.main--culture .culture-btn li {
  min-width: 0;
}
.main--culture .culture-btn a {
  display: grid;
  grid-template-columns: minmax(180px, 245px) minmax(0, 1fr);
  min-height: 194px;
  color: var(--color-0055e6);
  text-decoration: none;
  overflow: hidden;
  border-radius: 3px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.main--culture .culture-btn a:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.18);
}
.main--culture .culture-btn a:hover img {
  transform: scale(1.015);
}
.main--culture .culture-btn a:hover p {
  background-position: left center;
}
.main--culture .culture-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1);
  transition: transform 0.3s ease;
}
.main--culture .culture-btn p {
  margin: 0;
  padding: 24px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  font-family: var(--font-family-ibm-plex-sans-jp);
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-500);
  letter-spacing: 0.08em;
  line-height: 1.5;
  background-color: #ececec;
  background-image: linear-gradient(to right, var(--color-ffffff) 50%, transparent 50%);
  background-size: 200% 100%;
  background-position: right center;
  transition: background-position 0.4s ease;
}
.main--culture .culture-btn p::after {
  content: "";
  flex: 0 0 72px;
  width: 72px;
  height: 24px;
  border: 2px solid var(--color-0055e6);
  border-radius: 999px;
  background-image: url("./../img/common/icon/arrow-blue.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px 14px;
}
@media screen and (max-width: 1024px) {
  .main--culture .culture-btn .benefit__inner {
    grid-template-columns: 1fr;
  }
  .main--culture .culture-btn a {
    grid-template-columns: minmax(180px, 280px) minmax(0, 1fr);
  }
}
@media screen and (max-width: 767px) {
  .main--culture .culture-btn {
    margin-top: 48px;
  }
  .main--culture .culture-btn .benefit__inner {
    gap: 12px;
    max-height: none;
  }
  .main--culture .culture-btn li {
    height: 128px;
  }
  .main--culture .culture-btn a {
    grid-template-columns: 128px minmax(0, 1fr);
    min-height: 128px;
    height: 128px;
  }
  .main--culture .culture-btn img {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
  }
  .main--culture .culture-btn p {
    min-width: 0;
    height: 100%;
    padding: 0 16px 0 20px;
    font-size: 16px;
    line-height: 1.4;
    gap: 14px;
  }
  .main--culture .culture-btn p::after {
    flex-basis: 58px;
    width: 58px;
    height: 22px;
    background-size: 16px 12px;
  }
}

.main--position {
  --position-sticky-offset: 110px;
  position: relative;
  background: linear-gradient(90deg, var(--color-070c33) 20%, var(--color-1a2792) 100%);
}
.main--position .position-top {
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, var(--color-070c33) 20%, var(--color-1a2792) 100%);
}
.main--position .position-top__inner {
  display: grid;
  min-height: 365px;
  position: relative;
  z-index: 2;
  padding: 30px 0 120px 30px;
}
.main--position .position-top__title {
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-500);
  font-family: var(--font-family-ibm-plex-sans-jp);
  color: var(--color-ffffff);
  letter-spacing: var(--character-spacing-1-08);
}
.main--position .position-top__body {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: space-between;
  margin-top: 110px;
  margin-left: 160px;
}
.main--position .position-top-intro {
  font-size: var(--font-size-68);
  font-weight: var(--font-weight-500);
  font-style: var(--font-style-italic);
  font-family: var(--font-family-dm-mono);
  color: var(--color-ffffff);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.main--position .position-top-intro span {
  font-size: var(--font-size-24);
  font-weight: var(--font-weight-500);
  font-family: var(--font-family-ibm-plex-sans-jp);
  font-style: var(--font-style-normal);
  color: var(--color-ffffff);
}
.main--position .position-top-img {
  max-width: 681px;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 0;
}
.main--position .position-top-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media screen and (max-width: 768px) {
  .main--position .position-top {
    min-height: 220px;
  }
  .main--position .position-top__inner {
    min-height: 220px;
    padding: 12px 0 0;
  }
  .main--position .position-top__title {
    padding: 0 14px;
    font-size: 15px;
    line-height: 1.3;
    letter-spacing: 0.08em;
    position: relative;
    z-index: 3;
  }
  .main--position .position-top__body {
    position: relative;
    margin-top: 0;
    margin-left: 0;
    flex-direction: column-reverse;
    justify-content: flex-start;
    gap: 0;
    min-height: 178px;
  }
  .main--position .position-top-intro {
    position: absolute;
    z-index: 3;
    top: 34px;
    left: 0;
    padding: 0 14px;
    font-size: 34px;
    line-height: 1.06;
    letter-spacing: 0.04em;
    max-width: 220px;
  }
  .main--position .position-top-intro span {
    margin-top: 12px;
    font-size: 18px;
    line-height: 1.3;
    letter-spacing: 0.08em;
  }
  .main--position .position-top-img {
    max-width: none;
    width: 100%;
    position: absolute;
    right: 0;
    left: auto;
    bottom: 0;
    top: auto;
    z-index: 1;
    overflow: hidden;
  }
  .main--position .position-top-img::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
  }
  .main--position .position-top-img img {
    width: 100%;
    height: 178px;
    object-fit: cover;
    object-position: 100% center;
  }
}
.main--position .position-content {
  position: relative;
  z-index: 1;
}
.main--position .position-content__inner {
  display: flex;
  align-items: flex-start;
  gap: 135px;
  min-height: calc(100vh - 70px);
  position: relative;
  padding: 120px 0;
  background: linear-gradient(-90deg, var(--color-070c33) 20%, var(--color-1a2792) 100%);
}
.main--position .position-content .side-menu {
  width: 25%;
  align-self: flex-start;
  position: sticky;
  top: var(--position-sticky-offset);
}
.main--position .position-content .side-menu-title {
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-medium);
  font-family: var(--font-family-ibm-plex-sans-jp);
  letter-spacing: 0.2em;
  color: var(--color-ffffff);
  padding: 10px 0 10px 30px;
}
.main--position .position-content .side-menu-list ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.main--position .position-content .side-menu-list ul li {
  padding: 10px 0;
  padding-left: 30px;
  letter-spacing: var(--character-spacing-0);
  width: 100%;
  border-bottom: 1px solid var(--color-0055e6);
}
.main--position .position-content .side-menu-list ul li a {
  display: inline-block;
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-medium);
  font-family: var(--font-family-ibm-plex-sans-jp);
  color: var(--color-0055e6);
  border-bottom: 1px solid var(--color-0055e6);
  transition: color var(--ease-default), border-color var(--ease-default);
}
.main--position .position-content .side-menu-list ul li a.is-active {
  color: var(--color-ffffff);
  border-bottom-color: var(--color-ffffff);
}
.main--position .position-content .side-menu-list ul li a:hover {
  color: var(--color-ffffff);
  border-bottom: 1px solid var(--color-ffffff);
}
.main--position .position-content .side-menu-list ul li a:last-child {
  border-bottom: none;
  margin-bottom: 0;
}
.main--position .position-content .side-menu-list ul li:first-child {
  border-top: 1px solid var(--color-0055e6);
}
.main--position .position-content-main {
  width: 80%;
}
.main--position .position-content-main-item {
  scroll-margin-top: calc(var(--position-sticky-offset) + 30px);
}
.main--position .position-content-main-item:not(:last-child) {
  margin-bottom: 120px;
}
.main--position .position-content-main-item-title {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 16px;
  padding-right: 160px;
}
.main--position .position-content-main-item-title h2 {
  font-size: var(--font-size-28);
  font-weight: var(--font-weight-medium);
  font-family: var(--font-family-ibm-plex-sans-jp);
  color: var(--color-ffffff);
  letter-spacing: 0.12em;
}
.main--position .position-content-main-item-title .btn-kyuzin {
  max-width: 208px;
  max-height: 34px;
  font-size: var(--font-size-16);
  font-style: normal;
}
.main--position .position-content-main-item-title .btn-kyuzin::after {
  background-image: url("./../img/common/icon/icon-trgt-blank.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 21px 17px;
}
.main--position .position-content-main-item-body p {
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-400);
  font-family: var(--font-family-ibm-plex-sans-jp);
  color: var(--color-ffffff);
  line-height: var(--line-spacing-38);
  padding: 40px 0 0;
}
.main--position .position-content-main-item-body img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.main--position .position-content-main-item-body-lists {
  background: linear-gradient(90deg, var(--color-070c33) 20%, var(--color-1a2792) 100%);
  padding: 0px;
}
.main--position .position-content-main-item-body-list {
  padding: 100px 160px 100px 50px;
  border-bottom: 1px solid var(--color-ffffff);
}
.main--position .position-content-main-item-body-title {
  font-size: var(--font-size-28);
  font-weight: var(--font-weight-medium);
  font-family: var(--font-family-ibm-plex-sans-jp);
  color: var(--color-ffffff);
  letter-spacing: 0.1em;
}
.main--position .position-content-main-item-body-body p {
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-400);
  font-family: var(--font-family-ibm-plex-sans-jp);
  color: var(--color-ffffff);
  line-height: var(--line-spacing-38);
  padding: 40px 0 0 0;
}
.main--position .position-content-main .btn-grp {
  text-align: center;
  padding-top: 40px;
}
.main--position .position-content-main .btn-grp .btn-kyuzin-sqr {
  max-width: 456px;
  height: 80px;
  max-height: 100%;
  font-size: var(--font-size-24);
  font-style: normal;
  border-radius: 0;
}
.main--position .position-content-main .btn-grp .btn-kyuzin-sqr::after {
  background-image: url("./../img/common/icon/icon-trgt-blank.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 21px 17px;
}
@media screen and (max-width: 768px) {
  .main--position .position-content__inner {
    flex-direction: column;
    align-items: center;
    gap: 50px;
    padding: 0 0 100px;
  }
  .main--position .position-content-main {
    width: 100%;
  }
  .main--position .position-content-main-item:not(:last-child) {
    margin-bottom: 10px;
  }
  .main--position .position-content-main-item-title {
    padding: 55px 10px 20px;
    flex-wrap: wrap;
  }
  .main--position .position-content-main-item-title h2 {
    font-size: var(--font-size-22);
    font-weight: var(--font-weight-400);
    letter-spacing: 0em;
  }
  .main--position .position-content-main-item-title .btn-kyuzin {
    background: none;
    width: 135px;
    height: 29px;
    font-size: var(--font-size-14);
    font-weight: var(--font-weight-medium);
    background: none;
    margin: 0;
  }
  .main--position .position-content-main-item-body {
    padding-left: 10px;
  }
  .main--position .position-content-main-item-body-list {
    padding: 40px 10px 50px 40px;
  }
  .main--position .position-content-main-item-body-title {
    font-size: var(--font-size-18);
    padding: 10px 0 0;
  }
  .main--position .position-content-main-item-body p {
    font-size: var(--font-size-14);
    letter-spacing: 0em;
    line-height: 2;
    padding: 15px 0 0;
  }
  .main--position .position-content-main .btn-grp {
    text-align: center;
    padding-top: 40px;
  }
  .main--position .position-content-main .btn-grp .btn-kyuzin-sqr {
    max-width: 275px;
    height: 50px;
    max-height: 100%;
    font-size: var(--font-size-18);
    background: none;
  }
  .main--position .position-content-main .btn-grp .btn-kyuzin-sqr::after {
    background-image: url("./../img/common/icon/icon-trgt-blank.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 21px 17px;
  }
}

.main--crosstalk {
  --future-sticky-offset: 110px;
  position: relative;
  background: linear-gradient(90deg, var(--color-070c33) 20%, var(--color-1a2792) 100%);
}
.main--crosstalk .font-color-pink {
  color: #A36AB1;
}
.main--crosstalk .font-color-green {
  color: #669F51;
}
.main--crosstalk .font-color-yellow {
  color: #AF9653;
}
.main--crosstalk .font-color-blue {
  color: #0055E6;
}
.main--crosstalk .crosstalk-top {
  position: relative;
  overflow: hidden;
}
.main--crosstalk .crosstalk-top__inner {
  display: grid;
  min-height: calc(100vh - 70px);
  position: relative;
  z-index: 2;
  padding: 30px 0 74px 0;
}
.main--crosstalk .crosstalk-top__title {
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-500);
  font-family: var(--font-family-ibm-plex-sans-jp);
  color: var(--color-ffffff);
  letter-spacing: var(--character-spacing-1-08);
  padding-left: 30px;
}
.main--crosstalk .crosstalk-top__body {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: space-between;
  margin-top: 65px;
  margin-left: 0;
}
@media screen and (max-width: 768px) {
  .main--crosstalk .crosstalk-top__body > div {
    order: 2;
  }
  .main--crosstalk .crosstalk-top__body > p {
    order: 1;
  }
}
.main--crosstalk .crosstalk-top__mvtitle {
  max-width: 1120px;
  width: 100%;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .main--crosstalk .crosstalk-top__mvtitle {
    padding-left: 10px;
  }
}
.main--crosstalk .crosstalk-top__mvtitle .subtitle {
  font-size: 22px;
}
@media screen and (max-width: 768px) {
  .main--crosstalk .crosstalk-top__mvtitle .subtitle {
    font-size: 12px;
  }
}
.main--crosstalk .crosstalk-top__mvtitle .maintitle {
  font-size: 82px;
  font-family: var(--font-family-dm-mono);
  font-weight: var(--font-style-normal);
  font-style: var(--font-style-italic);
  line-height: 1;
  margin-bottom: 25px;
}
@media screen and (max-width: 768px) {
  .main--crosstalk .crosstalk-top__mvtitle .maintitle {
    font-size: 37px;
  }
}
.main--crosstalk .crosstalk-top__copy {
  max-width: 1120px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: flex-end;
  font-size: 40px;
  letter-spacing: 0.1em;
}
@media screen and (max-width: 768px) {
  .main--crosstalk .crosstalk-top__copy {
    font-size: 18px;
    padding-right: 10px;
  }
}
.main--crosstalk .crosstalk-top-intro {
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-300);
  font-family: var(--font-family-ibm-plex-sans-jp);
  letter-spacing: 0.1em;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.main--crosstalk .crosstalk-top-intro span {
  font-size: var(--font-size-24);
  color: var(--color-ffffff);
}
.main--crosstalk .crosstalk-top-intro .positions p {
  letter-spacing: 0.1em;
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-300);
  font-family: var(--font-family-ibm-plex-sans-jp);
  color: var(--color-ffffff);
}
.main--crosstalk .crosstalk-top-intro .positions p span {
  font-size: var(--font-size-18);
  margin-top: 10px;
}
.main--crosstalk .crosstalk-top-text {
  font-size: var(--font-size-42);
  font-weight: var(--font-weight-400);
  font-family: var(--font-family-ibm-plex-sans-jp);
  color: var(--color-ffffff);
  margin-left: 160px;
  letter-spacing: 0.12em;
  line-height: 1.6;
  position: relative;
  margin-bottom: 140px;
}
.main--crosstalk .crosstalk-top-text p {
  position: absolute;
  top: -100px;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media screen and (max-width: 768px) {
  .main--crosstalk .crosstalk-top__inner {
    padding: 30px 0;
    min-height: auto;
  }
  .main--crosstalk .crosstalk-top__title {
    padding: 0 20px 30px 37px;
    font-size: 14px;
    text-indent: -27px;
  }
  .main--crosstalk .crosstalk-top__body {
    margin-top: 0;
    margin-left: 0;
    flex-direction: column-reverse;
    gap: 15px;
  }
  .main--crosstalk .crosstalk-top-intro {
    padding: 0px 50px 35px;
    font-size: var(--font-size-12);
  }
  .main--crosstalk .crosstalk-top-intro span {
    font-size: var(--font-size-18);
  }
  .main--crosstalk .crosstalk-top-intro .positions p {
    font-size: var(--font-size-10);
  }
  .main--crosstalk .crosstalk-top-intro .positions p span {
    margin-top: 5px;
    font-size: var(--font-size-14);
  }
  .main--crosstalk .crosstalk-top-img {
    max-width: 100%;
  }
  .main--crosstalk .crosstalk-top-text {
    padding: 0 50px 30px;
    font-size: var(--font-size-18);
    line-height: 2;
    margin-left: 50px;
  }
  .main--crosstalk .crosstalk-top-text p {
    top: 0px;
  }
}
.main--crosstalk .crosstalk-content {
  position: relative;
  z-index: 1;
}
.main--crosstalk .crosstalk-content__inner {
  padding: 130px 0 0;
  background: linear-gradient(-90deg, var(--color-070c33) 20%, var(--color-1a2792) 100%);
}
@media screen and (max-width: 768px) {
  .main--crosstalk .crosstalk-content__inner {
    flex-direction: column;
    align-items: center;
    gap: 50px;
    padding: 50px 10px 100px;
  }
}
.main--crosstalk .crosstalk-member {
  max-width: 1120px;
  width: 100%;
  margin: 0 auto;
}
.main--crosstalk .crosstalk-member__read {
  font-size: 18px;
  line-height: 2;
}
@media screen and (max-width: 768px) {
  .main--crosstalk .crosstalk-member__read {
    font-size: 14px;
  }
}
.main--crosstalk .crosstalk-member__intro {
  display: flex;
  justify-content: flex-start;
  gap: 160px;
  margin-top: 90px;
}
@media screen and (max-width: 980px) {
  .main--crosstalk .crosstalk-member__intro {
    flex-direction: column;
    gap: 30px;
  }
}
@media screen and (max-width: 768px) {
  .main--crosstalk .crosstalk-member__intro {
    margin-top: 50px;
  }
}
.main--crosstalk .crosstalk-member__intro .member-title h3 {
  font-family: var(--font-family-dm-mono);
  font-size: 36px;
  font-weight: var(--font-style-normal);
  font-style: var(--font-style-italic);
  letter-spacing: 0.06em;
}
.main--crosstalk .crosstalk-member__intro .member-title h3 span {
  display: block;
  font-family: var(--font-family-ibm-plex-sans-jp);
  font-style: normal;
  font-size: 14px;
}
@media screen and (max-width: 768px) {
  .main--crosstalk .crosstalk-member__intro .member-title h3 {
    text-align: center;
    font-size: 22px;
  }
}
.main--crosstalk .crosstalk-member__intro .member-list li {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 30px;
}
@media screen and (max-width: 768px) {
  .main--crosstalk .crosstalk-member__intro .member-list li {
    flex-direction: column;
    gap: 20px;
  }
}
.main--crosstalk .crosstalk-member__intro .member-list li:not(:first-child) {
  margin-top: 60px;
}
.main--crosstalk .crosstalk-member__intro .member-list__thum {
  max-width: 229px;
  min-width: 229px;
}
.main--crosstalk .crosstalk-member__intro .member-list__info p {
  font-size: 14px;
}
@media screen and (max-width: 768px) {
  .main--crosstalk .crosstalk-member__intro .member-list__info .job-position {
    text-align: center;
  }
}
.main--crosstalk .crosstalk-member__intro .member-list__info .name {
  margin-top: 5px;
}
.main--crosstalk .crosstalk-member__intro .member-list__info .name span:nth-child(1) {
  font-size: 26px;
  font-weight: 700;
  margin-right: 10px;
}
@media screen and (max-width: 768px) {
  .main--crosstalk .crosstalk-member__intro .member-list__info .name {
    text-align: center;
  }
  .main--crosstalk .crosstalk-member__intro .member-list__info .name span:nth-child(1) {
    font-size: 24px;
    margin-right: 4px;
  }
}
.main--crosstalk .crosstalk-member__intro .member-list__info .job {
  display: flex;
  justify-content: flex-start;
  margin-top: 10px;
}
.main--crosstalk .crosstalk-member__intro .member-list__info .job span {
  display: block;
  min-width: 72px;
}
.main--crosstalk .crosstalk-member__intro .member-list__info .job span:nth-child(1) {
  text-align: right;
}
.main--crosstalk .crosstalk-member__intro .member-list__info .job-pre {
  display: flex;
  justify-content: flex-start;
  margin-top: 5px;
}
.main--crosstalk .crosstalk-member__intro .member-list__info .job-pre span {
  display: block;
  min-width: 72px;
}
.main--crosstalk .crosstalk-member__intro .member-list__info .job-pre span:nth-child(1) {
  text-align: right;
}
.main--crosstalk .crosstalk-content-main {
  padding-top: 120px;
  padding: 120px 160px 0;
}
.main--crosstalk .crosstalk-content-main article:not(:first-child) {
  margin-top: 120px;
}
@media screen and (max-width: 1350px) {
  .main--crosstalk .crosstalk-content-main {
    padding: 120px 30px 0;
  }
}
@media screen and (max-width: 768px) {
  .main--crosstalk .crosstalk-content-main {
    padding: 60px 10px 0;
  }
  .main--crosstalk .crosstalk-content-main article:not(:first-child) {
    margin-top: 60px;
  }
}
.main--crosstalk .crosstalk-flex {
  display: flex;
  justify-content: flex-start;
  gap: 42px;
  position: relative;
}
.main--crosstalk .crosstalk-flex .crosstalk-side {
  max-width: 60%;
}
.main--crosstalk .crosstalk-flex .crosstalk-img-side {
  max-width: 40%;
  align-self: flex-start;
  position: sticky;
  top: var(--future-sticky-offset);
}
.main--crosstalk .crosstalk-flex.reversible .crosstalk-side {
  order: 2;
}
.main--crosstalk .crosstalk-flex.reversible .crosstalk-img-side {
  order: 1;
}
@media screen and (max-width: 768px) {
  .main--crosstalk .crosstalk-flex {
    flex-direction: column;
  }
  .main--crosstalk .crosstalk-flex .crosstalk-side {
    max-width: 100%;
  }
  .main--crosstalk .crosstalk-flex .crosstalk-img-side {
    max-width: 82%;
    margin: 0 auto;
    position: static;
  }
  .main--crosstalk .crosstalk-flex.reversible .crosstalk-side {
    order: 1;
  }
  .main--crosstalk .crosstalk-flex.reversible .crosstalk-img-side {
    order: 2;
  }
}
.main--crosstalk .crosstalk-thema span {
  font-size: 30px;
  font-family: var(--font-family-dm-mono);
  font-weight: var(--font-style-normal);
  font-style: var(--font-style-italic);
  letter-spacing: 0.02em;
}
.main--crosstalk .crosstalk-thema span span {
  margin-right: 5px;
}
@media screen and (max-width: 768px) {
  .main--crosstalk .crosstalk-thema span {
    font-size: 23px;
  }
}
.main--crosstalk .crosstalk-thema h3 {
  font-size: 28px;
  font-weight: normal;
  letter-spacing: 0.1em;
  border-top: 1px solid #fff;
  padding-top: 24px;
}
@media screen and (max-width: 768px) {
  .main--crosstalk .crosstalk-thema h3 {
    font-size: 18px;
    padding-top: 18px;
  }
}
.main--crosstalk .crosstalk-section {
  margin-top: 60px;
}
@media screen and (max-width: 768px) {
  .main--crosstalk .crosstalk-section {
    margin-top: 30px;
  }
}
.main--crosstalk .crosstalk-section__title {
  position: relative;
  padding-left: 50px;
  font-size: 18px;
}
.main--crosstalk .crosstalk-section__title::before {
  content: "";
  display: block;
  width: 38px;
  height: 1px;
  background-color: #fff;
  position: absolute;
  top: 12px;
  left: 0;
}
@media screen and (max-width: 768px) {
  .main--crosstalk .crosstalk-section__title {
    padding-left: 30px;
    font-size: 14px;
  }
  .main--crosstalk .crosstalk-section__title::before {
    top: 10px;
    width: 22px;
  }
}
.main--crosstalk .crosstalk-section__dec {
  display: flex;
  justify-content: flex-start;
  gap: 10px;
  margin-top: 40px;
}
.main--crosstalk .crosstalk-section__dec p {
  font-size: 18px;
  line-height: 2;
}
@media screen and (max-width: 768px) {
  .main--crosstalk .crosstalk-section__dec {
    margin-top: 25px;
  }
  .main--crosstalk .crosstalk-section__dec p {
    font-size: 14px;
  }
}
.main--crosstalk .crosstalk-section__name {
  font-size: 18px;
  font-weight: 700;
}
.main--crosstalk .crosstalk-section__name.name-2people span {
  display: block;
  line-height: 1;
}
.main--crosstalk .crosstalk-section__name.name-2people span:not(:first-child) {
  margin-top: 2px;
}
.main--crosstalk .crosstalk-section__1columnImg {
  max-width: 831px;
  width: 100%;
  margin: 60px auto 0;
}
@media screen and (max-width: 768px) {
  .main--crosstalk .crosstalk-section__1columnImg {
    margin: 30px auto 0;
  }
}
.main--crosstalk .crosstalk__grid {
  padding-bottom: 220px;
  margin-top: 240px;
}
.main--crosstalk .crosstalk__grid .crosstalk__item-body {
  padding-left: 160px;
}
@media screen and (max-width: 768px) {
  .main--crosstalk .crosstalk__grid .crosstalk__item-body {
    padding-left: 15px;
    justify-content: space-between;
  }
}
.main--crosstalk .crosstalk__grid .crosstalk__item-body .crosstalk__item-tag {
  color: #fff;
}
.main--crosstalk .crosstalk__grid .crosstalk__item-body .crosstalk__item-tag span {
  font-size: 20px;
  display: block;
}
@media screen and (max-width: 768px) {
  .main--crosstalk .crosstalk__grid .crosstalk__item-body .crosstalk__item-tag {
    font-size: 22px;
  }
  .main--crosstalk .crosstalk__grid .crosstalk__item-body .crosstalk__item-tag span {
    font-size: 14px;
  }
}
.main--crosstalk .crosstalk__grid .crosstalk__item-title {
  margin-top: 22px;
  margin-bottom: 0;
  line-height: 1.8;
}
@media screen and (max-width: 768px) {
  .main--crosstalk .crosstalk__grid {
    padding-bottom: 0px;
    margin-top: 100px;
    margin-left: 0px;
  }
  .main--crosstalk .crosstalk__grid .crosstalk__item-title {
    margin-top: 10px;
  }
}

.main--training {
  --training-sticky-offset: 110px;
  position: relative;
  background: linear-gradient(90deg, var(--color-070c33) 20%, var(--color-1a2792) 100%);
}
.main--training .training-top {
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, var(--color-070c33) 20%, var(--color-1a2792) 100%);
}
.main--training .training-top__inner {
  display: grid;
  min-height: 365px;
  position: relative;
  z-index: 2;
  padding: 30px 0 120px 30px;
}
.main--training .training-top__title {
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-500);
  font-family: var(--font-family-ibm-plex-sans-jp);
  color: var(--color-ffffff);
  letter-spacing: var(--character-spacing-1-08);
}
.main--training .training-top__body {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: space-between;
  margin-top: 110px;
  margin-left: 160px;
}
.main--training .training-top-intro {
  font-size: var(--font-size-68);
  font-weight: var(--font-weight-500);
  font-style: var(--font-style-italic);
  font-family: var(--font-family-dm-mono);
  color: var(--color-ffffff);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.main--training .training-top-intro span {
  font-size: var(--font-size-24);
  font-weight: var(--font-weight-500);
  font-family: var(--font-family-ibm-plex-sans-jp);
  font-style: var(--font-style-normal);
  color: var(--color-ffffff);
}
.main--training .training-top-img {
  max-width: 681px;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 0;
}
.main--training .training-top-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media screen and (max-width: 768px) {
  .main--training .training-top {
    min-height: 220px;
  }
  .main--training .training-top__inner {
    min-height: 220px;
    padding: 12px 0 0;
  }
  .main--training .training-top__inner p {
    font-size: var(--font-size-14);
  }
  .main--training .training-top__title {
    padding: 0 14px;
    font-size: 15px;
    line-height: 1.3;
    letter-spacing: 0.08em;
    position: relative;
    z-index: 3;
  }
  .main--training .training-top__body {
    position: relative;
    margin-top: 0;
    margin-left: 0;
    flex-direction: column-reverse;
    justify-content: flex-start;
    gap: 0;
    min-height: 178px;
  }
  .main--training .training-top-intro {
    position: absolute;
    z-index: 3;
    top: 34px;
    left: 0;
    padding: 0 14px;
    font-size: 34px;
    line-height: 1.06;
    letter-spacing: 0.04em;
    max-width: 220px;
  }
  .main--training .training-top-intro span {
    margin-top: 0px;
    font-size: 18px;
    line-height: 1.3;
    letter-spacing: 0.08em;
  }
  .main--training .training-top-img {
    max-width: none;
    width: 100%;
    position: absolute;
    right: 0;
    left: auto;
    bottom: 0;
    top: auto;
    z-index: 1;
    overflow: hidden;
  }
  .main--training .training-top-img::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
  }
  .main--training .training-top-img img {
    width: 100%;
    height: 178px;
    object-fit: cover;
    object-position: 100% center;
  }
}
.main--training .map-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 16px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.main--training .map-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.main--training .map-modal__backdrop {
  position: absolute;
  inset: 0;
  background: #000000;
}
.main--training .map-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(100%, 1400px);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.main--training .map-modal__close {
  position: absolute;
  top: 8px;
  right: 0;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  color: var(--color-ffffff);
  font-size: 40px;
  line-height: 1;
  cursor: pointer;
}
.main--training .map-modal__frame {
  width: 100%;
  max-height: 100%;
  overflow: auto;
  background: #000000;
  -webkit-overflow-scrolling: touch;
}
.main--training .map-modal__image {
  width: 100%;
  height: auto;
  min-width: 960px;
  display: block;
}
@media screen and (min-width: 769px) {
  .main--training .map-modal {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  .main--training .map-modal__dialog {
    padding-top: 40px;
  }
  .main--training .map-modal__frame {
    width: 100%;
  }
}
.main--training .training-content {
  background: linear-gradient(-90deg, var(--color-070c33) 20%, var(--color-1a2792) 100%);
}
.main--training .training-content__inner {
  max-width: 1140px;
  margin-left: 160px;
  padding: 130px 0 150px;
}
.main--training .training-content__inner p {
  font-family: var(--font-family-ibm-plex-sans-jp);
  font-size: var(--font-size-18);
  line-height: var(--line-spacing-38);
  letter-spacing: var(--character-spacing-0);
}
.main--training .training-content__map {
  margin-bottom: 60px;
  margin-left: 160px;
}
.main--training .training-content__map-title {
  font-size: var(--font-size-24);
  font-weight: var(--font-weight-500);
  font-family: var(--font-family-ibm-plex-sans-jp);
  color: var(--color-ffffff);
  letter-spacing: var(--character-spacing-1-08);
  margin-bottom: 10px;
}
.main--training .training-content__map-image {
  position: relative;
  background-color: #000000;
  overflow-x: scroll;
  overflow-y: hidden;
  cursor: url("/recruit/career/ad/002/assets/img/common/icon/icon-hover.svg") 60 45, grab;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.82) rgba(255, 255, 255, 0.12);
  scrollbar-gutter: stable;
  padding: 20px 20px 12px 12px;
  transform: rotateX(180deg);
}
.main--training .training-content__map-image:active {
  cursor: url("/recruit/career/ad/002/assets/img/common/icon/icon-hover.svg") 60 45, grabbing;
}
.main--training .training-content__map-image.is-dragging {
  cursor: url("/recruit/career/ad/002/assets/img/common/icon/icon-hover.svg") 60 45, grabbing;
}
.main--training .training-content__map-image img {
  width: auto;
  min-width: 1400px;
  max-width: none;
  height: auto;
  max-height: 1225px;
  object-fit: initial;
  display: block;
  transform: rotateX(180deg);
}
.main--training .training-content__map-image::-webkit-scrollbar {
  height: 6px;
}
.main--training .training-content__map-image::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 999px;
}
.main--training .training-content__map-image::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.82);
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.18);
}
.main--training .training-content__map-image::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.96);
}
.main--training .training-content__map-scrollbar {
  position: relative;
  width: 100%;
  height: 6px;
  margin-top: 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  overflow: hidden;
}
.main--training .training-content__map-scrollbar-thumb {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  min-width: 48px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.15);
}
.main--training .training-content__map-zoom {
  display: none;
  margin-top: 16px;
}
.main--training .training-content__map-zoom .btn-learn {
  background: none;
  border: 2px solid var(--color-ffffff);
  max-width: 208px;
  font-style: normal;
  color: var(--color-ffffff);
}
.main--training .training-content__map-zoom .btn-learn::after {
  background-image: url("./../img/common/icon/arrow-zoom.svg");
}
.main--training .training-content__map-zoom .btn-learn:hover {
  color: var(--color-ffffff);
}
@media screen and (max-width: 768px) {
  .main--training .training-content__map {
    margin-left: 0;
  }
  .main--training .training-content__map-title {
    font-size: 18px;
  }
  .main--training .training-content__map-image {
    cursor: default;
    overflow: hidden;
    transform: none;
    padding: 10px;
  }
  .main--training .training-content__map-image:active {
    cursor: default;
  }
  .main--training .training-content__map-image img {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: auto;
    max-height: none;
    transform: none;
  }
  .main--training .training-content__map-zoom {
    display: block;
    text-align: center;
  }
  .main--training .training-content__map-scrollbar {
    display: none;
  }
}
.main--training .training-content .development__btn {
  margin: 150px 0 0;
  padding-bottom: 160px;
}
.main--training .training-content .development__btn-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
}
.main--training .training-content .development__btn-title {
  font-size: clamp(30px, 3.1vw, 36px);
  font-weight: var(--font-weight-500);
  font-style: var(--font-style-italic);
  font-family: var(--font-family-dm-mono);
  line-height: 1.2;
  color: var(--color-1a2792);
}
.main--training .training-content .development__btn-title span {
  display: block;
  margin-top: 12px;
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-400);
  font-style: var(--font-style-normal);
  font-family: var(--font-family-ibm-plex-sans-jp);
  line-height: 1.6;
  color: var(--color-1a2792);
}
.main--training .training-content .development__btn-item {
  display: flex;
  max-height: 100%;
  min-height: 360px;
  position: relative;
  cursor: pointer;
  max-width: 1140px;
  margin: 0 auto;
}
.main--training .training-content .development__btn-item-left {
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
  background-color: #ececec;
  background-image: linear-gradient(to right, var(--color-ffffff) 50%, transparent 50%);
  background-size: 200% 100%;
  background-position: right center;
  transition: background-position 0.4s ease;
}
.main--training .training-content .development__btn-item-left img {
  max-width: 140px;
  max-height: 110px;
}
.main--training .training-content .development__btn-item-left .btn-learn {
  border: 2px solid var(--color-0055e6);
  font-size: 14px;
  color: var(--color-0055e6);
  background: none;
}
.main--training .training-content .development__btn-item-left .btn-learn::after {
  background-image: url("./../img/common/icon/arrow-blue.svg");
}
.main--training .training-content .development__btn-item-left .btn-learn:hover {
  color: var(--color-ffffff);
}
.main--training .training-content .development__btn-item-left .btn-learn:hover::after {
  background-image: url("./../img/common/icon/arrow.svg");
}
.main--training .training-content .development__btn-item-right {
  width: 50%;
  max-height: 360px;
  overflow: hidden;
}
.main--training .training-content .development__btn-item-right img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform 0.3s ease;
}
.main--training .training-content .development__btn-item:hover .development__btn-item-left {
  background-position: left center;
}
.main--training .training-content .development__btn-item:hover .development__btn-item-right img {
  transform: scale(1.1);
}
@media screen and (max-width: 768px) {
  .main--training .training-content .development__btn {
    margin-top: 36px;
  }
  .main--training .training-content .development__btn-copy {
    gap: 18px;
    max-width: none;
  }
  .main--training .training-content .development__btn-title {
    font-size: 23px;
  }
  .main--training .training-content .development__btn-title span {
    margin-top: 10px;
    font-size: 12px;
  }
  .main--training .training-content .development__btn-item {
    min-height: 0;
    max-height: 188px;
  }
  .main--training .training-content .development__btn-item-left, .main--training .training-content .development__btn-item-right {
    width: 100%;
  }
  .main--training .training-content .development__btn-item-left {
    padding: 32px 14px;
    justify-content: flex-start;
  }
  .main--training .training-content .development__btn-item-right {
    max-height: none;
  }
  .main--training .training-content .development__btn-item-right img {
    height: 240px;
  }
  .main--training .training-content .development__btn .btn-learn {
    max-width: 148px;
    font-size: 14px;
  }
  .main--training .training-content .development__btn .btn-learn::after {
    right: 10px;
    padding: 0 10px;
    background-image: url("./../img/common/icon/arrow-blue-sp.svg");
  }
}
@media screen and (max-width: 768px) {
  .main--training .training-content {
    padding: 0 10px;
  }
  .main--training .training-content__inner {
    margin-left: 0;
    padding: 72px 0 96px;
  }
  .main--training .training-content__inner p {
    font-size: var(--font-size-14);
    line-height: 2;
  }
}

.main--dev-interview {
  --dev-interview-sticky-offset: 110px;
  position: relative;
  background: linear-gradient(90deg, var(--color-070c33) 20%, var(--color-1a2792) 100%);
}
.main--dev-interview .dev-interview-top {
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, rgba(7, 12, 51, 0.96) 15%, rgba(26, 39, 146, 0.94) 100%);
}
.main--dev-interview .dev-interview-top__inner {
  min-height: calc(100vh - 70px);
  position: relative;
  z-index: 2;
  padding: 28px 5.5vw 78px 28px;
}
.main--dev-interview .dev-interview-top__eyebrow {
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-500);
  font-family: var(--font-family-ibm-plex-sans-jp);
  color: var(--color-ffffff);
  letter-spacing: var(--character-spacing-1-08);
  line-height: 1.4;
}
.main--dev-interview .dev-interview-top__hero {
  width: min(100%, 1180px);
  margin-left: clamp(80px, 9vw, 130px);
  margin-top: 66px;
  display: flex;
  flex-wrap: wrap;
  column-gap: clamp(28px, 4vw, 72px);
  row-gap: 38px;
  align-items: flex-end;
}
.main--dev-interview .dev-interview-top__copy {
  width: 100%;
  color: var(--color-ffffff);
}
.main--dev-interview .dev-interview-top__headline {
  font-family: var(--font-family-dm-mono);
  font-size: var(--font-size-68);
  font-style: var(--font-style-italic);
  font-weight: var(--font-weight-500);
  letter-spacing: 0.08em;
  line-height: 1;
  color: var(--color-ffffff);
  white-space: nowrap;
}
.main--dev-interview .dev-interview-top__subheadline {
  font-family: var(--font-family-ibm-plex-sans-jp);
  font-size: var(--font-size-24);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.12em;
  color: var(--color-ffffff);
  line-height: 1.5;
}
.main--dev-interview .dev-interview-top__profile {
  flex: 0 1 320px;
  color: var(--color-ffffff);
  padding-bottom: 4px;
}
.main--dev-interview .dev-interview-top__profile-role, .main--dev-interview .dev-interview-top__profile-en, .main--dev-interview .dev-interview-top__profile-romaji {
  font-family: var(--font-family-ibm-plex-sans-jp);
  font-weight: var(--font-weight-300);
  color: var(--color-ffffff);
  letter-spacing: 0.12em;
}
.main--dev-interview .dev-interview-top__profile-role {
  font-size: var(--font-size-18);
  line-height: 1.8;
}
.main--dev-interview .dev-interview-top__profile-name {
  margin-top: 6px;
  font-family: var(--font-family-ibm-plex-sans-jp);
  font-size: var(--font-size-24);
  font-weight: var(--font-weight-400);
  letter-spacing: 0.1em;
  color: var(--color-ffffff);
  line-height: 1.4;
}
.main--dev-interview .dev-interview-top__profile-en {
  margin-top: 8px;
  font-size: var(--font-size-16);
  line-height: 1.8;
}
.main--dev-interview .dev-interview-top__profile-romaji {
  margin-top: 8px;
  font-size: var(--font-size-18);
  line-height: 1.7;
}
.main--dev-interview .dev-interview-top__photo {
  flex: 1 1 620px;
  width: min(100%, 720px);
  margin: 0;
  margin-left: auto;
  overflow: hidden;
}
.main--dev-interview .dev-interview-top__photo img {
  width: 100%;
  aspect-ratio: 1.75/1;
  object-fit: cover;
  object-position: center;
  display: block;
}
@media screen and (max-width: 1024px) {
  .main--dev-interview .dev-interview-top__hero {
    margin-left: clamp(32px, 5vw, 56px);
  }
}
@media screen and (max-width: 768px) {
  .main--dev-interview .dev-interview-top__inner {
    min-height: auto;
    padding: 18px 0 40px;
  }
  .main--dev-interview .dev-interview-top__eyebrow {
    padding: 0 16px;
    font-size: 14px;
    letter-spacing: 0.08em;
  }
  .main--dev-interview .dev-interview-top__hero {
    width: 100%;
    margin-top: 28px;
    margin-left: 0;
    flex-direction: column;
    flex-wrap: nowrap;
    row-gap: 22px;
    align-items: stretch;
  }
  .main--dev-interview .dev-interview-top__copy {
    padding: 0 16px;
  }
  .main--dev-interview .dev-interview-top__headline {
    white-space: normal;
    font-size: var(--font-size-36);
    line-height: 1.08;
  }
  .main--dev-interview .dev-interview-top__subheadline {
    margin-top: 14px;
    font-size: 16px;
  }
  .main--dev-interview .dev-interview-top__photo {
    flex: none;
    width: calc(100% - 32px);
  }
  .main--dev-interview .dev-interview-top__photo img {
    aspect-ratio: 1.28/1;
  }
  .main--dev-interview .dev-interview-top__profile {
    flex: none;
    padding: 0 0 0 35px;
  }
  .main--dev-interview .dev-interview-top__profile-role {
    font-size: 12px;
    line-height: 1.7;
  }
  .main--dev-interview .dev-interview-top__profile-name {
    font-size: var(--font-size-18);
  }
  .main--dev-interview .dev-interview-top__profile-en {
    font-size: 10px;
    line-height: 1.7;
  }
  .main--dev-interview .dev-interview-top__profile-romaji {
    font-size: var(--font-size-14);
  }
}
.main--dev-interview .dev-interview-content {
  position: relative;
  z-index: 1;
  background: linear-gradient(-90deg, var(--color-070c33) 20%, var(--color-1a2792) 100%);
}
.main--dev-interview .dev-interview-content__inner {
  position: relative;
  padding: 64px 0 120px;
}
.main--dev-interview .dev-interview-content-main {
  width: min(100%, 1120px);
  margin: 0 auto;
}
.main--dev-interview .dev-interview-content-main-title {
  margin-bottom: 56px;
  font-family: var(--font-family-ibm-plex-sans-jp);
  font-size: var(--font-size-42);
  font-weight: var(--font-weight-medium);
  line-height: 1.75;
  letter-spacing: 0.08em;
  color: var(--color-ffffff);
}
.main--dev-interview .dev-interview-content-main-item {
  scroll-margin-top: calc(var(--dev-interview-sticky-offset) + 30px);
  display: flex;
  align-items: flex-start;
  gap: 0 70px;
}
.main--dev-interview .dev-interview-content-main-item:not(:last-child) {
  margin-bottom: 84px;
}
.main--dev-interview .dev-interview-content-main-item-body .dev-interview-content-main-item-title {
  width: 100%;
}
.main--dev-interview .dev-interview-content-main-item-body .dev-interview-content-main-item-title h2 {
  width: fit-content;
  margin-bottom: 10px;
  font-size: var(--font-size-30);
  font-weight: var(--font-weight-400);
  font-family: var(--font-family-dm-mono);
  font-style: var(--font-style-italic);
  color: var(--color-0055e6);
  letter-spacing: 0.16em;
  line-height: 1.2;
}
.main--dev-interview .dev-interview-content-main-item-body-title {
  padding-top: 24px;
  padding-bottom: 12px;
  border-top: 1px solid rgb(255, 255, 255);
  font-size: var(--font-size-28);
  font-weight: var(--font-weight-medium);
  font-family: var(--font-family-ibm-plex-sans-jp);
  color: var(--color-ffffff);
  letter-spacing: 0.08em;
  line-height: 1.55;
}
.main--dev-interview .dev-interview-content-main-item-body p {
  padding-top: 12px;
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-400);
  font-family: var(--font-family-ibm-plex-sans-jp);
  color: var(--color-ffffff);
  line-height: 2.15;
  letter-spacing: 0.02em;
}
.main--dev-interview .dev-interview-content-main-item-img {
  flex: 0 0 477px;
  margin-top: 0;
}
.main--dev-interview .dev-interview-content-main-item-img img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}
.main--dev-interview .dev-interview-content-main-item:nth-of-type(even) .dev-interview-content-main-item-img {
  order: 1;
}
.main--dev-interview .dev-interview-content-main-item:nth-of-type(even) .dev-interview-content-main-item-body {
  order: 2;
}
.main--dev-interview .dev-interview-content-main-item:last-child {
  margin-bottom: 0;
  display: block;
}
.main--dev-interview .dev-interview-content-main-item:last-child .dev-interview-content-main-item-body {
  display: block;
}
.main--dev-interview .dev-interview-content-main-item:last-child .dev-interview-content-main-item-img {
  width: min(100%, 830px);
  margin: 34px auto 0;
}
.main--dev-interview .dev-interview-content-main .flex-inverse {
  flex-direction: row-reverse;
}
.main--dev-interview .development__btn {
  margin: 150px 0 0;
  padding-bottom: 160px;
}
.main--dev-interview .development__btn-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
}
.main--dev-interview .development__btn-title {
  font-size: clamp(30px, 3.1vw, 36px);
  font-weight: var(--font-weight-500);
  font-style: var(--font-style-italic);
  font-family: var(--font-family-dm-mono);
  line-height: 1.2;
  color: var(--color-1a2792);
}
.main--dev-interview .development__btn-title span {
  display: block;
  margin-top: 12px;
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-400);
  font-style: var(--font-style-normal);
  font-family: var(--font-family-ibm-plex-sans-jp);
  line-height: 1.6;
  color: var(--color-1a2792);
}
.main--dev-interview .development__btn-item {
  display: flex;
  max-height: 100%;
  min-height: 360px;
  position: relative;
  cursor: pointer;
  max-width: 1140px;
  margin: 0 auto;
}
.main--dev-interview .development__btn-item-left {
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
  background-color: #ececec;
  background-image: linear-gradient(to right, var(--color-ffffff) 50%, transparent 50%);
  background-size: 200% 100%;
  background-position: right center;
  transition: background-position 0.4s ease;
}
.main--dev-interview .development__btn-item-left img {
  max-width: 140px;
  max-height: 110px;
}
.main--dev-interview .development__btn-item-left .btn-learn {
  border: 2px solid var(--color-0055e6);
  font-size: 14px;
  color: var(--color-0055e6);
  background: none;
}
.main--dev-interview .development__btn-item-left .btn-learn::after {
  background-image: url("./../img/common/icon/arrow-blue.svg");
}
.main--dev-interview .development__btn-item-left .btn-learn:hover {
  color: var(--color-ffffff);
}
.main--dev-interview .development__btn-item-left .btn-learn:hover::after {
  background-image: url("./../img/common/icon/arrow.svg");
}
.main--dev-interview .development__btn-item-right {
  width: 50%;
  max-height: 360px;
  overflow: hidden;
}
.main--dev-interview .development__btn-item-right img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform 0.3s ease;
}
.main--dev-interview .development__btn-item:hover .development__btn-item-left {
  background-position: left center;
}
.main--dev-interview .development__btn-item:hover .development__btn-item-right img {
  transform: scale(1.1);
}
@media screen and (max-width: 768px) {
  .main--dev-interview .development__btn {
    margin-top: 0px;
    padding: 0 10px 140px;
  }
  .main--dev-interview .development__btn-copy {
    gap: 18px;
    max-width: none;
  }
  .main--dev-interview .development__btn-title {
    font-size: 23px;
  }
  .main--dev-interview .development__btn-title span {
    margin-top: 10px;
    font-size: 12px;
  }
  .main--dev-interview .development__btn-item {
    min-height: 0;
    max-height: 188px;
  }
  .main--dev-interview .development__btn-item-left, .main--dev-interview .development__btn-item-right {
    width: 100%;
  }
  .main--dev-interview .development__btn-item-left {
    padding: 32px 14px;
    justify-content: flex-start;
  }
  .main--dev-interview .development__btn-item-right {
    max-height: none;
  }
  .main--dev-interview .development__btn-item-right img {
    height: 240px;
  }
  .main--dev-interview .development__btn .btn-learn {
    max-width: 148px;
    font-size: 14px;
  }
  .main--dev-interview .development__btn .btn-learn::after {
    right: 10px;
    padding: 0 10px;
    background-image: url("./../img/common/icon/arrow-blue-sp.svg");
  }
}
@media screen and (max-width: 768px) {
  .main--dev-interview__inner {
    margin-left: 0;
    padding: 72px 0 96px;
  }
  .main--dev-interview__inner p {
    font-size: var(--font-size-14);
    line-height: 2;
  }
}
@media screen and (max-width: 768px) {
  .main--dev-interview .dev-interview-content {
    padding: 0 10px;
  }
  .main--dev-interview .dev-interview-content__inner {
    padding: 40px 0 72px;
  }
  .main--dev-interview .dev-interview-content-main {
    width: 100%;
  }
  .main--dev-interview .dev-interview-content-main-title {
    margin-bottom: 34px;
    font-size: var(--font-size-18);
    line-height: 1.65;
  }
  .main--dev-interview .dev-interview-content-main-item {
    display: flex;
    flex-direction: column;
  }
  .main--dev-interview .dev-interview-content-main-item:not(:last-child) {
    margin-bottom: 48px;
  }
  .main--dev-interview .dev-interview-content-main-item-body {
    display: flex;
    flex-direction: column;
  }
  .main--dev-interview .dev-interview-content-main-item-body .dev-interview-content-main-item-title {
    width: 100%;
  }
  .main--dev-interview .dev-interview-content-main-item-body .dev-interview-content-main-item-title h2 {
    font-size: 23px;
    letter-spacing: 0;
  }
  .main--dev-interview .dev-interview-content-main-item-body-title {
    width: 100%;
    flex: none;
    font-size: var(--font-size-18);
    line-height: 1.6;
    padding-bottom: 10px;
  }
  .main--dev-interview .dev-interview-content-main-item-body img {
    width: 100%;
    max-width: 275px;
    margin: 0 auto;
    padding-top: 25px;
    padding-bottom: 35px;
  }
  .main--dev-interview .dev-interview-content-main-item-body p {
    width: 100%;
    flex: none;
    padding-top: 0;
    font-size: var(--font-size-14);
    line-height: 2;
  }
  .main--dev-interview .dev-interview-content-main-item-img {
    flex: none;
    width: min(100%, 275px);
    margin: 0 auto;
  }
  .main--dev-interview .dev-interview-content-main-item-img img {
    padding: 0;
  }
  .main--dev-interview .dev-interview-content-main-item:last-child .dev-interview-content-main-item-img {
    width: min(100%, 335px);
    margin: 18px auto 0;
  }
  .main--dev-interview .dev-interview-content-main .flex-inverse {
    flex-direction: column;
  }
}/*# sourceMappingURL=style.css.map */