@charset "UTF-8";

/* FONT */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600;700&family=Noto+Serif+JP:wght@200;300;400;500&display=swap');

/* COMMON RESET */
html {
  box-sizing: border-box;
}
*, *::before, *::after {
  box-sizing: inherit;
}
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, dialog, figure, footer, header,
hgroup, menu, nav, section,
time, mark, audio, video, button {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent;
}
input::placeholder{
	color: #ccc;
}
input::-ms-input-placeholder{
	color: #ccc;
}
input:-ms-input-placeholder{
	color: #ccc;
}
li {
  list-style: none;
}
a {
  text-decoration: none;
}

/* SETTING */
:root {
  /* COLOR */
  --color-base: #000;
  --color-theme: #C1272D;
  --color-border: #251E1C;

  /* FONT FAMILY */
  --font-base: "Noto Sans JP", "游ゴシック", 游ゴシック体, YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  --font-mincho: "Noto Serif JP", "游明朝体", "YuMincho", "Yu Mincho", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "Times New Roman", serif;

  /* FONT WEIGHT */
  --font-weight-extraLight: 200;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semiBold: 600;
  --font-weight-bold: 700;
  --font-weight-extraBold: 800;
  --font-weight-black: 900;

  --letter-spacing: .05em;

  --delay: .05s;
  --transition: .3s;
  --opacity: .7;

  --wrap: 1620px;
  --wide-wrap: 1820px;

  --space: calc((100vw - var(--wrap))/2);
  --wide-space: calc((100vw - var(--wide-space))/2);

  /* ANIMATION */
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-cubic: cubic-bezier(0.33, 1, 0.68, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-quad: cubic-bezier(0.11, 0, 0.5, 0);

  /* PX - SETTING */
  --px1: calc(100vw / 1920);
  
  /* LAYOUT */
  --px300: clamp(150px, calc(var(--px1) * 300), 300px);
  --px250: clamp(125px, calc(var(--px1) * 250), 250px);
  --px200: clamp(100px, calc(var(--px1) * 200), 200px);
  --px150: clamp(75px, calc(var(--px1) * 150), 150px);
  --px120: clamp(60px, calc(var(--px1) * 120), 120px);
  --px100: clamp(50px, calc(var(--px1) * 100), 100px);
  --px80: clamp(40px, calc(var(--px1) * 80), 80px);
  --px70: clamp(35px, calc(var(--px1) * 70), 70px);
  --px60: clamp(30px, calc(var(--px1) * 60), 60px);
  --px50: clamp(30px, calc(var(--px1) * 50), 50px);
  --px40: clamp(30px, calc(var(--px1) * 40), 40px);

  /* FONT SIZE */
  --px64: clamp(48px, calc(var(--px1) * 64), 64px);
  --px58: clamp(42px, calc(var(--px1) * 58), 58px);
  --px54: clamp(40px, calc(var(--px1) * 54), 54px);
  --px48: clamp(36px, calc(var(--px1) * 48), 48px);
  --px42: clamp(32px, calc(var(--px1) * 42), 42px);
  --px38: clamp(30px, calc(var(--px1) * 38), 38px);
  --px36: clamp(28px, calc(var(--px1) * 36), 36px);
  --px32: clamp(24px, calc(var(--px1) * 32), 32px);
  --px30: clamp(22px, calc(var(--px1) * 30), 30px);
  --px28: clamp(20px, calc(var(--px1) * 28), 28px);
  --px24: clamp(18px, calc(var(--px1) * 24), 24px);
  --px20: clamp(16px, calc(var(--px1) * 20), 20px);
  --px18: clamp(16px, calc(var(--px1) * 18), 18px);
  --px16: clamp(14px, calc(var(--px1) * 16), 16px);
  --px14: clamp(12px, calc(var(--px1) * 14), 14px);
  --px12: clamp(10px, calc(var(--px1) * 12), 12px);

  /* CUSTOM */
  --side-content-width: 150px;
}

/* SCROLL ANIMATION */
.split .split-text {
  opacity: 0;
  translate: 0 100%;
}
.split.scrollIn .split-text {
  opacity: 1;
  translate: 0;
  transition:
  opacity .7s var(--ease-in-quad) calc(var(--delay) * var(--index)),
  translate 1.3s var(--ease-out-quart) calc(var(--delay) * var(--index));
}
.fadeIn {
  opacity: 0;
  translate: 0 13%;
  transition: 
  opacity 1.3s var(--ease-out-cubic),
  translate 1.3s var(--ease-out-quint);
}
.fadeIn.scrollIn {
  opacity: 1;
  translate: 0;
}
.fadeInl {
  opacity: 0;
  translate: -13% 0;
  transition: 
  opacity 1.3s var(--ease-out-cubic),
  translate 1.3s var(--ease-out-quint);
}
.fadeInl.scrollIn {
  opacity: 1;
  translate: 0;
}
.fadeInr {
  opacity: 0;
  translate: 13% 0;
  transition: 
  opacity 1.3s var(--ease-out-cubic),
  translate 1.3s var(--ease-out-quint);
}
.fadeInr.scrollIn {
  opacity: 1;
  translate: 0;
}
.blur {
  opacity: 0;
  filter: blur(1em);
  /*scale: 1.1;*/
  transition:
  scale 1s var(--ease-out-quart),
  opacity 1.3s var(--ease-out-quart),
  filter 1s var(--ease-out-quart);
}
.blur.scrollIn {
  opacity: 1;
  filter: blur(0);
  /*scale: 1;*/
}
.zoomIn {
  opacity: 0;
  transform: scale(.8);
  transition: .8s var(--ease-out-quart);
}
.zoomIn.scrollIn {
  opacity: 1;
  transform: scale(1);
}
.clear_from_top.ef,
.inner-clear_from_top.ef > * {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.3s ease;
}
.clear_from_bottom.ef,
.inner-clear_from_bottom.ef > * {
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1.3s ease;
}
.clear_from_left.ef,
.inner-clear_from_left.ef > * {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.3s ease;
}
.clear_from_right.ef,
.inner-clear_from_right.ef > * {
  clip-path: inset(0 0 0 100%);
  transition: clip-path 1.3s ease;
}
.clear_from_lefttop.ef,
.inner-clear_from_lefttop.ef > * {
  clip-path: inset(0 100% 100% 0);
  transition: clip-path 1.3s ease;
}
.clear_from_righttop.ef,
.inner-clear_from_righttop.ef > * {
  clip-path: inset(0 100% 0 100%);
  transition: clip-path 1.3s ease;
}
.clear_from_leftbottom.ef,
.inner-clear_from_leftbottom.ef > * {
  clip-path: inset(100% 100% 0 0);
  transition: clip-path 1.3s ease;
}
.clear_from_rightbottom.ef,
.inner-clear_from_rightbottom.ef > * {
  clip-path: inset(100% 0 0 100%);
  transition: clip-path 1.3s ease;
}
.clear_from_top.ef.scrollIn,
.clear_from_bottom.ef.scrollIn,
.clear_from_left.ef.scrollIn,
.clear_from_right.ef.scrollIn,
.clear_from_lefttop.ef.scrollIn,
.clear_from_righttop.ef.scrollIn,
.clear_from_leftbottom.ef.scrollIn,
.clear_from_rightbottom.ef.scrollIn,
.inner-clear_from_top.ef.scrollIn > *,
.inner-clear_from_bottom.ef.scrollIn > *,
.inner-clear_from_left.ef.scrollIn > *,
.inner-clear_from_right.ef.scrollIn > *,
.inner-clear_from_lefttop.ef.scrollIn > *,
.inner-clear_from_righttop.ef.scrollIn > *,
.inner-clear_from_leftbottom.ef.scrollIn > *,
.inner-clear_from_rightbottom.ef.scrollIn > * {
  clip-path: inset(0);
}

/* COMMON */
h1,h2,h3,h4,h5,h6,p,span,a,div {
  letter-spacing: var(--letter-spacing);
}
html {
  scroll-behavior: smooth;
}
body {
  color: var(--color-base);
  font-family: var(--font-base);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing);
  /* word-break: auto-phrase; */
}
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
}
.wide-wrap {
  width: 100%;
  max-width: var(--wide-wrap);
  margin: 0 auto;
}
a {
  display: inline-block;
  color: var(--color-base);
  font-family: var(--font-base);
  transition: var(--transition);
  &:hover {
    opacity: var(--opacity);
  }
}
section {
  position: relative;
}
span {
  display: inline-block;
}
img {
  max-width: 100%;
  max-height: 100%;
  vertical-align: middle;
  transition: var(--transition);
}
.flex {
  display: flex;
  flex-wrap: wrap;
}
.grid {
  display: grid;
}
.center {
  text-align: center;
}
.inline-block {
  display: inline-block;
}
.ps-re {
  position: relative;
}
.ps-ab {
  position: absolute;
}
.sr-only {
  position: absolute;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border-width: 0;
  white-space: nowrap;
}
.tab-only {
  display: none;
}
.sp-only {
  display: none;
}
.sp-small-only {
  display: none;
}
.pagetop {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  right: 50px;
  bottom: 50px;
  width: 60px;
  height: 60px;
  background: var(--color-theme);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: var(--transition);
  &.active {
    opacity: 1;
    visibility: visible;
  }
  &:hover {
    opacity: .7;
  }
}
.pagetop::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-left: 2px solid #fff;
  border-top: 2px solid #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -25%) rotate(45deg);
}


/* HEADER */
body:has(.recruit-top-content) .header-recruit.common {
  display: none;
}
body:has(.recruit-top-content) {
  overflow: clip;
}
body:has(.recruit-page-content) {
  overflow: clip;
}
body:has(.recruit-top-content) .header-recruit {
  position: relative;
  top: auto;
  left: auto;
}
body:has(.recruit-top-content) .header-recruit.is-fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
}

.header-recruit {
  width: 100%;
  position: fixed;
  top: 0;
  left: auto;
  z-index: 100;
  background: #fff;
  border-bottom: 1px solid var(--color-border);

  & a {
    font-weight: var(--font-weight-semiBold);
  }
  & .header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--px40) var(--px30);
    transition: padding var(--transition);
  }
  & .header-logo {
    
  }
  & .header-logo-link {
    display: flex;
    align-items: center;
    gap: var(--px20);
  }
  & .header-nav {
    
  }
  & .header-nav-list {
    display: flex;
    align-items: center;
    gap: var(--px30);
  }
  & .header-nav-item {
    
  }
  & .header-nav-item__link {
    font-size: var(--px18);
    line-height: 1;
  }
  & .header-nav-item__link.btn {
    font-size: var(--px24);
    color: #fff;
    background: var(--color-base);
    padding: .4em 1.25em;
  }
  & .header-nav-item--menu-only,
  & .header-nav-item__en,
  & .header-subnav {
    display: none;
  }
}
.header-recruit a:hover {
  text-decoration: none;
}
.header-recruit.over {
  & .header-inner {
    padding: 20px;
  }
  & .header-logo-link {
    img.logo {
      max-width: 150px;
    }
    img.tag {
      max-width: 60px;
    }
  }
  & .header-nav-list {
    gap: var(--px20);
  }
  & .header-nav-item__link {
    font-size: var(--px16);
  }
}
/* ハンバーガー */
.hamburger {
  display: none;
  font-size: 10px;
  width: 4em;
  height: 2em;
  background: none;
  border: none;
  cursor: pointer;
  position: relative;
}
.hamburger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: #000;
  transition: var(--transition) ease;
}
.hamburger span:nth-child(1) {
  top: 0;
}
.hamburger span:nth-child(2) {
  top: 50%;
  transform: translateY(-50%);
}
.hamburger span:nth-child(3) {
  bottom: 0;
}
.hamburger.is-open span:nth-child(1) {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}
.hamburger.is-open span:nth-child(2) {
  opacity: 0;
}
.hamburger.is-open span:nth-child(3) {
  bottom: 50%;
  transform: translateY(50%) rotate(-45deg);
}


/* FOOTER */
.footer-recruit {
  border-top: 1px solid var(--color-border);
}
.footer-recruit a:hover {
  text-decoration: none;
}
.footer-inner {
  
}
.footer-entry {
  width: 100%;
}
.footer-entry-link {
  width: 100%;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--px200);
  border-bottom: 1px solid var(--color-border);
}
.footer-entry-link p {
  font-family: var(--font-mincho);
  font-size: 115px;
  font-weight: var(--font-weight-medium);
  line-height: 1;
  letter-spacing: .1em;
  padding-left: 13%;
  position: relative;
  top: -5px;
}
.footer-entry-link__btn {
  width: 75px;
  height: 75px;
  background: var(--color-base);
  border: 1px solid var(--color-base);
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.footer-entry-link__btn img {
  width: 100%;
  max-width: 65%;
}
.footer-bottom {
  width: 100%;
  display: flex;
  align-items: center;
}
.footer-logo {
  width: 700px;
}
.footer-logo-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--px20);
}
.footer-bottom-wrap {
  width: calc(100% - 700px);
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 20px var(--px100);
  padding: var(--px40) var(--px30);
  border-left: 1px solid var(--color-border);
}
.footer-bottom-wrap__left p {
  font-size: var(--px20);
  line-height: 2; 
}
.footer-bottom-wrap__right p {
  font-size: var(--px20);
  font-weight: var(--font-weight-regular);
}
.footer-bottom-wrap__right-flex {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px var(--px30);
  margin-top: var(--px40);
}
.footer-bottom-wrap__right-flex a {
  font-size: var(--px18);
  font-weight: var(--font-weight-regular);
  border-bottom: 1px solid var(--color-base);
}
p.copyright {
  font-size: var(--px12);
  line-height: 1;
}

/* TOP */
.recruit-top-fv {
  background: var(--color-base);
  padding-top: 50px;
}
.recruit-top-fv__wrap {
  width: 100%;
  height: auto;
  max-height: 330px;
  aspect-ratio: 182 / 33;
  background: #fff;
  padding: 20px;
  position: relative;
}
.recruit-top-fv__wrap-logo {
  width: 100%;
  max-width: 574px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.recruit-top-fv__wrap-logo.sp-only {
  display: none;
}
.recruit-top-fv__wrap .img {
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0;
  right: 0;
}
.recruit-top-fv__wrap .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.recruit-top-fv__copy {
  margin-top: 50px;
  margin-bottom: 95px;
}
.recruit-top-fv__copy img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.recruit-top-fv__subcopy {
  width: 100%;
  max-width: 510px;
  margin-inline: auto;
}
.rectuit-top-fv__flex {
  margin-top: var(--px200);
}
.rectuit-top-fv__flex-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--px200);
}
.rectuit-top-fv__flex-wrap {
  
}
.rectuit-top-fv__flex-wrap.left {
  padding: 0 0 0 var(--side-content-width);
}
.rectuit-top-fv__flex-wrap.right {
  
}
.rectuit-top-fv__flex-wrap p {
  color: #fff;
  font-size: var(--px20);
  line-height: 3.8;
}
.recruit-top-slider {
  width: 100%;
  height: 1000px;
  overflow: hidden;
  pointer-events: none;
}
.recruit-top-slider .swiper-wrapper {
  display: flex;
  flex-direction: column;
  height: auto;
  transition: none;
  animation: recruitSliderScroll 60s linear infinite;
}
.recruit-top-slider .swiper-slide {
  height: auto;
  display: flex;
  flex-shrink: 0;
}
.recruit-top-slider .swiper-slide img {
  width: 50%;
  height: auto;
  display: block;
}
.recruit-top-slider .swiper-slide.is-right img {
  margin-left: auto;
}
@keyframes recruitSliderScroll {
  from { transform: translateY(0); }
  to   { transform: translateY(-33.333%); }
}
.recruit-main-content {
  display: grid;
  grid-template-columns: 150px 1fr 150px;
  border-bottom: 1px solid var(--color-border);
}
.recruit-main-content.border-top {
  border-top: 1px solid var(--color-border);
}
.company .recruit-main-content {
  border-bottom: none;
}
.recruit-main-content a:hover {
  text-decoration: none;
}
.recruit-main-side {
  overflow: hidden;
}
.recruit-main-side.sticky {
  overflow: visible;
  padding-bottom: var(--px40);
}
.recruit-main-side.sticky > * {
  position: sticky;
  top: 120px;
}
.recruit-main-side.left {
  & .recruit-main-side__text-en {
    transform: translateX(-45px);
  }
}
.recruit-main-side.right {
  & h2 {
    margin-left: auto;
  }
  & .recruit-main-side__text-en {
    transform: rotate(180deg) translateX(-25px);
    margin-left: auto;
  }
}
.recruit-main-side h2 {
  writing-mode: vertical-rl;
  font-family: var(--font-mincho);
  font-size: 90px;
  font-weight: var(--font-weight-extraLight);
  letter-spacing: .15em;
}
.recruit-main-side__text-en {
  display: block;
  writing-mode: vertical-rl;
  font-family: var(--font-mincho);
  font-size: 130px;
  font-weight: var(--font-weight-medium);
  line-height: 1;
  white-space: nowrap;
  margin-bottom: var(--px300);
}
.recruit-main-side:has(.marquee-en) {
  position: relative;
}
.marquee-en {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  animation: marquee-en-up 80s linear infinite;
}
@keyframes marquee-en-up {
  to { transform: translateY(-50%); }
}
.recruit-main-side.right .marquee-en {
  animation-direction: reverse;
}
.recruit-main-side__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--px20);
  margin-top: var(--px60);
}
.recruit-main-side__link p {
  writing-mode: vertical-rl;
  font-size: var(--px24);
}
.recruit-main-center {
  border-left: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
}
.recruit-main-center__content {
  
}
.recruit-main-center__content-top {
  margin-top: var(--px50);
  height: 550px;
  border-top: 1px solid var(--color-border);
  position: relative;
}
.recruit-main-center__content-top::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-border);
  opacity: 27%;
  z-index: 1;
  mix-blend-mode: multiply;
  transition: opacity var(--transition);
}
.recruit-main-center__content:has(.recruit-main-center__content-bottom-link:hover) .recruit-main-center__content-top::before {
  opacity: 3%;
}
.recruit-main-center__content-top .img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.recruit-main-center__content-top-text {
  font-size: var(--px32);
  color: #fff;
  letter-spacing: .1em;
  text-align: right;
  position: absolute;
  top: var(--px50);
  right: var(--px30);
  z-index: 2;
  transition: text-shadow var(--transition);
}
.recruit-main-center__content:has(.recruit-main-center__content-bottom-link:hover) .recruit-main-center__content-top-text {
  text-shadow: 1px 1px 3px rgba(0, 0, 0, .5);
}
.recruit-main-center__content-bottom {
  
}
.recruit-main-center__content-bottom-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--px30);
  border-bottom: 1px solid var(--color-border);
}
.recruit-main-center__content-bottom-link.border-none {
  border-bottom: none;
}
.recruit-main-center__content-bottom-link__text {
  
}
.recruit-main-center__content-bottom-link__text h3 {
  display: flex;
  align-items: center;
  gap: var(--px30);
  font-size: var(--px32);
  font-weight: var(--font-weight-semiBold);
  margin-bottom: 1.5em;
}
.recruit-main-center__content-bottom-link__text h3 .num {
  font-family: var(--font-mincho);
  font-size: var(--px70);
  font-weight: var(--font-weight-regular);
  line-height: 1;
}
.recruit-main-center__content-bottom-link__text .en {
  font-family: var(--font-mincho);
  font-size: var(--px18);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0;
}
.recruit-main-center__content-btn {
  width: 45px;
  height: 45px;
  background: var(--color-base);
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.recruit-main-center__content-btn img {
  width: 100%;
  max-width: 65%;
}
.recruit-main-center__content-btn02 {
  width: 80px;
  height: 80px;
  background: #fff;
  border: 1px solid #fff;
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: background-color var(--transition);
}
.recruit-main-center__content-btn02 img {
  width: 100%;
  max-width: 22px;
}
.recruit-main-center__content-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: stretch;
}
.recruit-main-center__content-grid-item {
  display: flex;
  flex-direction: column;
  position: relative;
}
.recruit-main-center__content-grid-item__trigger {
  position: absolute;
  inset: 0;
  z-index: 2;
  cursor: pointer;
}
.recruit-main-center__content-grid-item__trigger:focus-visible {
  outline: 2px solid var(--color-theme);
  outline-offset: -4px;
}
.recruit-main-center__content-grid-item:nth-child(odd) {
  border-right: 1px solid var(--color-border);
}
.recruit-main-center__content-grid-item__top {
  margin-top: var(--px50);
  height: 500px;
  position: relative;
  border-top: 1px solid var(--color-border);
}
.recruit-main-center__content-grid-item__top::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-border);
  opacity: 27%;
  z-index: 1;
  mix-blend-mode: multiply;
  transition: opacity var(--transition);
}
.recruit-main-center__content-grid-item:hover .recruit-main-center__content-grid-item__top::before {
  opacity: 3%;
}
.recruit-main-center__content-grid-item__top .img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.recruit-main-center__content-grid-item__bottom {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.recruit-main-center__content-grid-item__bottom-link {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--px30);
  border-bottom: 1px solid var(--color-border);
}
.recruit-main-center__content-grid-item__bottom-link.border-none {
  border-bottom: none;
}
.recruit-main-center__content-grid-item__bottom-link__text {
  
}
.recruit-main-center__content-grid-item__bottom-link__text h4 {
  font-family: var(--font-mincho);
  font-size: var(--px42);
  margin-bottom: .5em;
}
.recruit-main-center__content-grid-item__bottom-link__text p {
  font-size: var(--px28);
  font-weight: var(--font-weight-medium);
}
.recruit-belt {
  margin-block: var(--px50);
}
.recruit-belt-inner {
  position: relative;
}
.recruit-belt-img {
  height: 650px;
  overflow: hidden;
}
.recruit-belt-img::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-border);
  opacity: 27%;
  z-index: 1;
  mix-blend-mode: multiply;
  transition: opacity var(--transition);
}
.recruit-belt-img img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.recruit-belt-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}
.recruit-textslider {
  overflow: hidden;
}
.recruit-textslider__track {
  display: flex;
  width: max-content;
  animation: recruitTextSlider 80s linear infinite;
  padding-block: var(--px50);
}
.recruit-textslider__img {
  max-width: 1120px;
  margin-right: var(--px80);
}
.recruit-textslider__img img {
  display: block;
  height: auto;
}
@keyframes recruitTextSlider {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.recruit-top-content .company {
  background: var(--color-base);
  overflow: hidden;

  & .recruit-main-content {
    
  }
  & .recruit-main-center {
    border: none;
  }
  & .recruit-main-side.right {
    position: relative;
  }
  & .recruit-main-side.right .recruit-main-side__text-en {
    position: absolute;
    top: 50%;
    transform: translateY(-50%) rotate(180deg) translateX(-25px);
  }
}
.recruit-top-content .company > * {
  color: #fff;
}
.recruit-main-center__content-flex {
  display: flex;
  padding-block: var(--px50);
}
.recruit-main-center__content-flex-wrap {
  width: 50%;
}
.recruit-main-center__content-flex-wrap.left {
  
}
.recruit-main-center__content-flex-wrap.right {
  max-width: 610px;
  padding-left: var(--px70);
}
.recruit-main-center__content-flex-wrap h4 {
  font-size: var(--px32);
  line-height: 1.7;
  margin-bottom: 1em;
}
.recruit-main-center__content-flex-wrap p {
  font-size: var(--px20);
  font-weight: var(--font-weight-regular);
  line-height: 2;
}
.recruit-main-center__content-flex-wrap .img {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 81 / 50;
}
.recruit-main-center__content-flex-wrap .img::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-border);
  opacity: 27%;
  z-index: 1;
  mix-blend-mode: multiply;
}
.recruit-main-center__content-flex-wrap .img img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.recruit-main-center__content-flex-link {
  width: fit-content;
  display: flex;
  align-items: center;
  gap: var(--px30);
  margin-top: var(--px60);
}
.recruit-main-center__content-flex-link p {
  color: #fff;
  font-size: var(--px24);
  font-weight: var(--font-weight-medium);
}
.recruit-main-center__content-flex-link:hover .recruit-main-center__content-btn02 {
  background-color: var(--color-base);
  & img {
    filter: brightness(0) invert(1);
  }
}

/* RECRUIT PAGE */
.recruit-page-content {
  padding-top: 120px;
}
.recruit-page-fv {
  width: 100%;
  padding-inline: var(--px40);
  padding-block: var(--px60) var(--px40);
}
.recruit-page-fv__img {
  width: 100%;
  height: 550px;
  margin-bottom: var(--px60);
  position: relative;
}
.recruit-page-fv__img.mb30 {
  margin-bottom: var(--px30);
}
.recruit-page-fv__img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.recruit-page-fv__intro {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.recruit-page-fv__intro-wrap {
  
}
.recruit-page-fv__intro-wrap p {
  font-size: var(--px20);
  font-weight: var(--font-weight-regular);
  line-height: 2;
}
.recruit-page-title {
  writing-mode: vertical-rl;
  font-family: var(--font-mincho);
  font-size: 90px;
  font-weight: var(--font-weight-light);
  letter-spacing: .15em;
  text-shadow: 1px 1px 3px #fff;
  display: flex;
  flex-direction: column;
  margin-top: -2.4em;
  position: relative;
  z-index: 2;
}
.recruit-page-title.v2 {
  margin-top: -2em;
}
.recruit-page-title__en {
  font-size: var(--px16);
  font-weight: var(--font-weight-medium);
  margin-left: 1.2em;
}
.recruit-page-fv__intro-title {
  font-size: var(--px32);
  margin-bottom: var(--px60);
}
.recruit-page-fv__intro-title-num {
  font-family: var(--font-mincho);
  font-size: var(--px70);
  line-height: 1;
}
.recruit-page-fv__intro-title-en {
  font-family: var(--font-mincho);
  font-size: var(--px20);
  font-weight: var(--font-weight-semiBold);
}
.recruit-page-fv__intro-title-flex {
  display: flex;
  align-items: center;
  gap: var(--px20);
  margin-bottom: 10px;
}
/* SERVICE MODAL */
dialog:not([open]) {
  display: none;
}
.service-modal {
  --swiper-navigation-color: #fff;
  --swiper-pagination-color: var(--color-base);
  --swiper-pagination-bullet-inactive-color: var(--color-base);
  width: min(900px, 90vw);
  margin: auto;
  background: #fff;
  opacity: 0;
  transition:
    opacity var(--transition) ease,
    display var(--transition) allow-discrete,
    overlay var(--transition) allow-discrete;
}
.service-modal[open] {
  opacity: 1;
}
@starting-style {
  .service-modal[open] {
    opacity: 0;
  }
}
.service-modal::backdrop {
  background: rgba(0, 0, 0, 0);
  transition:
    background-color var(--transition) ease,
    display var(--transition) allow-discrete,
    overlay var(--transition) allow-discrete;
}
.service-modal[open]::backdrop {
  background: rgba(0, 0, 0, .7);
}
@starting-style {
  .service-modal[open]::backdrop {
    background: rgba(0, 0, 0, 0);
  }
}
.service-modal__inner {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: var(--px30);
  position: relative;
  overflow: visible;
}
.service-modal__close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: var(--px60);
  height: var(--px60);
  border-radius: 50%;
  background: var(--color-base);
  cursor: pointer;
}
.service-modal__close span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50%;
  height: 2px;
  background: #fff;
}
.service-modal__close span:nth-child(1) {
  transform: translate(-50%, -50%) rotate(45deg);
}
.service-modal__close span:nth-child(2) {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.service-modal__gallery {
  display: flex;
  align-items: center;
  gap: var(--px20);
}
.service-modal__slider {
  flex: 1;
  min-width: 0;
}
.service-modal__slider .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
}
.service-modal__slider .swiper-slide img {
  max-width: 100%;
  max-height: 70vh;
  width: auto;
  height: auto;
}
.service-modal__gallery .swiper-button-prev,
.service-modal__gallery .swiper-button-next {
  position: static;
  margin: 0;
  transform: none;
  flex-shrink: 0;
  width: var(--px50);
  height: var(--px50);
  background: var(--color-base);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.service-modal__gallery .swiper-navigation-icon {
  width: auto;
  height: var(--px20);
}
.service-modal__inner .swiper-pagination {
  position: static;
}

/* BREADCRUMB */
.breadcrumb__items {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.breadcrumb__item {
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(0, 0, 0, 0.5);
  font-size: var(--px14);
  font-weight: var(--font-weight-bold);
  line-height: 1;
}
.breadcrumb__item + .breadcrumb__item::before {
  content: "";
  width: .35em;
  height: .35em;
  border-top: 1px solid var(--color-base);
  border-right: 1px solid var(--color-base);
  transform: rotate(45deg);
}
.breadcrumb__link {
  color: var(--color-base);
}
.breadcrumb__link:hover {
  opacity: var(--opacity);
  text-decoration: none;
}
.recruit-page-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 40px 20px;
  justify-content: space-between;
}
.recruit-page-breadcrumb.mt {
  margin-top: var(--px60);
}
/* ページ内リンク */
.page-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px var(--px30);
}
.page-nav__link {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--px16);
  font-weight: var(--font-weight-bold);
  line-height: 1;
}
.page-nav__link:hover {
  opacity: var(--opacity);
  text-decoration: none;
}
.page-nav__icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-base);
  position: relative;
}
.page-nav__icon img {
  display: block;
  width: 100%;
  max-width: 40%;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* COMPANY */
.company-overview {
  
}
.recruit-main-center__content-overview {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding: var(--px100) 20px var(--px150);
}
.company-overview-flex {
  display: flex;
  align-items: flex-start;
  gap: var(--px70);
  margin-bottom: var(--px70);
}
.company-overview-table {
  flex: 1;
  min-width: 0;
}
.company-overview-table__row {
  display: flex;
  align-items: stretch;
}
.company-overview-table__label,
.company-overview-table__data {
  padding-block: 1.4em;
  font-size: var(--px18);
  line-height: 1.6;
}
.company-overview-table__label {
  flex: 0 0 clamp(120px, 25%, 250px);
  border-bottom: 1px solid var(--color-theme);
  font-weight: var(--font-weight-medium);
}
.company-overview-table__row:first-child .company-overview-table__label {
  border-top: 1px solid var(--color-theme);
}
.company-overview-table__data {
  flex: 1;
  min-width: 0;
  padding-left: var(--px30);
  border-bottom: 1px solid #c8c8c8;
  font-weight: var(--font-weight-regular);
}
.company-overview-table__row:first-child .company-overview-table__data {
  border-top: 1px solid #c8c8c8;
}
.company-overview__img {
  flex: 0 0 430px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.company-overview__img img {
  display: block;
  width: 100%;
  height: auto;
}
.gmap {
  width: 100%;
  height: 600px;
  aspect-ratio: 16 / 9;
  position: relative;
}
.gmap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
 }
 .compnay-overview-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: var(--px60);
   margin-top: var(--px70);
 }
 .company-overview-wrap {
   min-width: 0;
 }
.company-overview-wrap__title {
  font-size: var(--px24);
  padding-bottom: .8em;
}
.company-overview-wrap .gmap {
  width: 100%;
  height: 400px;
  margin-top: var(--px40);
}
/* HISTORY */
.company-history {
  background: var(--color-base);
  color: #fff;
}
.company-history .recruit-main-center {
  border: none;
}
.recruit-main-center__content-hitory {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding: var(--px100) 20px;
}
.company-history-list {
  --history-year-w: 135px;
  --history-dot: 10px;
  --history-lead: 70px;
  position: relative;
}
.company-history-item {
  display: grid;
  grid-template-columns: var(--history-year-w) 1fr;
  align-items: start;
  position: relative;
}
.company-history-item:first-child::before {
  content: "";
  position: absolute;
  top: calc(var(--px20) * -1);
  left: var(--history-year-w);
  height: var(--px20);
  border-left: 1px solid var(--color-theme);
}
.company-history-item:last-child .company-history-body {
  padding-bottom: var(--px40);
}
.company-history-year {
  color: var(--color-theme);
  font-family: var(--font-mincho);
  font-size: 42px;
  line-height: 1;
  white-space: nowrap;
}
.company-history-body {
  position: relative;
  border-left: 1px solid var(--color-theme);
  padding-left: calc(var(--history-lead) + 15px);
  padding-bottom: var(--px60);
}
.company-history-body::before {
  content: "";
  position: absolute;
  top: 1.3em;
  left: -1px;
  width: var(--history-dot);
  height: var(--history-dot);
  border-radius: 50%;
  background: #fff;
  transform: translate(-50%, -50%);
}
.company-history-body::after {
  content: "";
  position: absolute;
  top: 1.3em;
  left: 0;
  width: var(--history-lead);
  border-top: 1px dotted #fff;
}
.company-history-text {
  font-size: var(--px18);
  font-weight: var(--font-weight-regular);
  line-height: 2;
}
.company-history-img {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  max-width: 456px;
}
.company-history-img img {
  display: block;
  width: 100%;
  height: auto;
}
/* CANDITATE */
.candidate {
  
}
.recruit-main-center__content-candidate {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding: var(--px100) 20px var(--px120);
}
.cnaditate-flex {
  display: flex;
  align-items: center;
}
.candidate-flex-wrap.left {
  width: 60%;
}
.candidate-flex-wrap.right {
  width: 40%;
}
.candidate-copy {
  font-family: var(--font-mincho);
  font-size: var(--px58);
  font-weight: var(--font-weight-medium);
  line-height: 1.3;
  letter-spacing: .1em;
  margin-bottom: .8em;
}
.candidate-flex-wrap p {
  font-size: var(--px18);
  line-height: 2;
}
.candidate-flex-wrap .img {
  padding-left: var(--px70);
}
.candidate-flex-wrap .img img {
  width: 100%;
  height: 100%;
}
.candidate-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: var(--px30);
}
.canditate-item {
  display: flex;
  align-items: center;
  gap: .6em;
  padding: .6em 1em;
  background: linear-gradient(to right, #e6e6e6, #fff);
  font-size: var(--px18);
  font-weight: var(--font-weight-bold);
  line-height: 1.6;
}
.canditate-item::before {
  content: "";
  flex-shrink: 0;
  width: 10px;
  height: 2px;
  background: var(--color-theme);
}
/* BENEFITS */
.benefits {
  background: var(--color-base);
  color: #fff;
}
.benefits .recruit-main-center {
  border: none;
}
.recruit-main-center__content-benefits {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding: var(--px150) 20px var(--px150);
}
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--px24);
}
.benefits-grid-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid #fff;
  padding: var(--px40) var(--px30) 20px;
  color: #fff;
}
.benefits-grid-item__icon {
  display: grid;
  place-items: center;
  
}
.benefits-grid-item__icon img {
  width: 100%;
  max-width: 120px;
  height: 100px;
}
.benefits-grid-item__title {
  font-size: var(--px24);
  font-weight: var(--font-weight-semiBold);
  margin-top: 1.5em;
}
.benefits-grid-item__text {
  margin-top: .6em;
  font-size: var(--px18);
  font-weight: var(--font-weight-regular);
  line-height: 2;
}
/* SCHEDULE */
.schedule {
  
}
.recruit-main-center__content-schedule {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding: var(--px120) 20px;
}
.schedule-flex {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--px120);
}
.schedule-flex-wrap.left {
  flex: 0 0 32%;
  max-width: 390px;
  position: sticky;
  top: 120px;
}
.schedule-flex-wrap.right {
  flex: 1;
  min-width: 0;
}
.schedule-profile img {
  display: block;
  width: 100%;
  height: auto;
}
.schedule-profile__caption {
  margin-top: 1.5em;
  font-size: var(--px14);
  font-weight: var(--font-weight-bold);
  line-height: 1.8;
}
.schedule-title {
  font-size: var(--px24);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--px60);
}
.schedule-list {
  --schedule-time-w: 120px;
  --schedule-tick: 70px;
}
.schedule-item {
  position: relative;
  display: grid;
  grid-template-columns: var(--schedule-time-w) 1fr;
  align-items: start;
  font-size: var(--px24);
  border-left: 1px solid var(--color-theme);
  padding-left: calc(var(--schedule-tick) + 8px);
  padding-bottom: var(--px60);
}
.schedule-item:last-child {
  padding-bottom: 0;
  border-left-color: transparent;
}
.schedule-item:last-child::after {
  content: "";
  position: absolute;
  top: 0;
  left: -1px;
  height: .6em;
  border-left: 1px solid var(--color-theme);
}
.schedule-item::before {
  content: "";
  position: absolute;
  top: .55em;
  left: 0;
  width: var(--schedule-tick);
  border-top: 1px solid var(--color-theme);
}
.schedule-item__time {
  font-size: var(--px24);
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
}
.schedule-item__title {
  font-size: var(--px20);
  font-weight: var(--font-weight-bold);
  line-height: 1.5;
}
.schedule-item__text {
  margin-top: .5em;
  font-size: var(--px18);
  line-height: 2;
}
/* FAQ */
.faq {
  
}
.recruit-main-center__content-faq {
  
}
.faq-top {
  width: 100%;
  max-width: 1240px;
  margin-inline: auto;
  padding: var(--px100) 20px;
}
.faq-top p {
  font-size: var(--px18);
  font-weight: var(--font-weight-light);
  line-height: 2;
  text-align: center;
}
.faq-content {
  width: 100%;
}
.faq-item {
  width: 100%;
  border-top: 1px solid var(--color-border);
}
.faq-item__inner {
  box-sizing: border-box;
  width: 100%;
  max-width: 1400px;
  margin-inline: auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: var(--px30);
}
.faq-item__q {
  padding: var(--px40) 20px;
  cursor: pointer;
  list-style: none;
}
.faq-item__q::-webkit-details-marker {
  display: none;
}
.faq-item__question {
  font-size: var(--px20);
  line-height: 1.6;
}
.faq-item__a {
  display: block;
  padding-bottom: var(--px40);
  padding-left: 7%;
}
.faq-item__answer {
  font-size: var(--px18);
  font-weight: var(--font-weight-regular);
  line-height: 2;
}
.faq-item__mark {
  flex-shrink: 0;
  width: 30px;
}


/* RESPONSIVE */
@media screen and (max-width: 1860px) {
  .wide-wrap {
    padding: 0 20px;
  }
  .rectuit-top-fv__flex-inner {
    gap: var(--px100);
  }
  .recruit-top-slider {
    max-width: 750px;
  }
  .rectuit-top-fv__flex-wrap.left {
    padding: 0;
  }
  .recruit-main-center__content-top {
    height: 450px;
  }
  .recruit-belt-img {
    height: 550px;
  }
  .recruit-main-center__content-grid-item__top {
    height: 400px;
  }
}

@media screen and (max-width: 1660px) {
  .wrap {
    padding: 0 20px;
  }
  .footer-bottom {
    flex-direction: column;
    padding-top: var(--px60);
  }
  .footer-bottom-wrap {
    width: 100%;
    justify-content: center;
    border: none;
  }
  .footer-logo {
    width: 100%;
    max-width: 700px;
  }
  .footer-logo-link {
    & img.logo {
      max-width: 250px;
    }
    & img.tag {
      max-width: 120px;
    }
  }
  .recruit-top-fv__wrap-logo {
    max-width: 30vw;
  }
  .recruit-top-fv__wrap-logo img.tag {
    width: 6vw;
    max-width: 90px;
    min-width: 25px;
  }
  .recruit-top-fv__copy {
    margin-top: var(--px50);
    margin-bottom: var(--px80);
  }
  .recruit-top-slider {
    max-width: 700px;
    height: 800px;
  }
  .rectuit-top-fv__flex {
    margin-top: var(--px150);
  }
  .recruit-page-fv__img {
    height: 450px;
  }
  .recruit-page-title {
    font-size: 72px;
  }
  .recruit-page-breadcrumb {
    margin-top: 30px;
  }
  .recruit-page-title__en {
    margin-left: 1em;
  }
  .gmap {
    height: 400px;
  }
  .company-overview-wrap .gmap {
    height: 300px;
  }
}

@media screen and (max-width: 1400px) {
  .footer-entry-link {
    height: 160px;
    gap: var(--px150);
  }
  .footer-entry-link p {
    font-size: 90px;
  }
  .footer-entry-link__btn {
    width: 65px;
    height: 65px;
  }
  .recruit-main-content {
    grid-template-columns: 100px 1fr 100px;
  }
  .recruit-main-side h2 {
    font-size: 64px;
  }
  .recruit-main-side__text-en {
    font-size: 82px;
  }
  .recruit-main-side.left {
    & .recruit-main-side__text-en {
      transform: translateX(-35px);
    }
  }
  .recruit-main-side.right {
    & .recruit-main-side__text-en {
      transform: rotate(180deg) translateX(-15px);
    }
  }
  .recruit-main-side.sticky > * {
    top: 100px;
  }
  .recruit-main-side__link {
    gap: 10px;
  }
  .recruit-main-side__link p {
    font-size: var(--px20);
  }
  .recruit-main-center__content-btn {
    width: 35px;
    height: 35px;
  }
  .recruit-main-center__content-top {
    height: 350px;
  }
  .recruit-main-center__content-btn02 {
    width: 60px;
    height: 60px;
  }
  .recruit-belt-img {
    height: 400px;
  }
  .recruit-main-center__content-grid-item__top {
    height: 300px;
  }
  .recruit-main-center__content-grid-item__bottom-link__text h4 {
    font-size: var(--px36);
  }
  .recruit-main-center__content-grid-item__bottom-link__text p {
    font-size: var(--px24);
  }
  .recruit-textslider__track {
    padding-block: var(--px40);
  }
  .recruit-textslider__img {
    max-width: 800px;
  }
  .recruit-top-slider {
    max-width: 500px;
  }
  .recruit-top-fv {
    padding-top: var(--px50);
  }
  .company-overview__img {
    flex: 0 0 330px;
  }
  .company-history-img {
    max-width: 400px;
  }
  .schedule-flex-wrap.left {
    top: 100px;
  }
}


@media screen and (max-width: 1280px) {
  .recruit-page-content {
    padding-top: 100px;
  }
  .recruit-page-fv__img {
    height: 300px;
  }
  .recruit-page-title {
    font-size: 54px;
  }
  .company-overview__img {
    flex: 0 0 280px;
  }
  .gmap {
    height: 300px;
  }
  .company-overview-wrap .gmap {
    height: 250px;
  }
  .company-history-img {
    max-width: 300px;
  }
  .company-history-year {
    font-size: 36px;
  }
  .cnaditate-flex {
    flex-direction: column;
    gap: var(--px40);
    max-width: 600px;
    margin-inline: auto;
  }
  .candidate-flex-wrap.left {
    width: 100%;
  }
  .candidate-flex-wrap.right {
    width: 100%;
    max-width: 500px;
  }
  .candidate-flex-wrap .img {
    padding-left: 0;
  }
  .benefits-grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: 600px;
    margin-inline: auto;
  }
  .schedule-flex {
    gap: var(--px80);
  }
  .schedule-list {
    --schedule-time-w: 80px;
    --schedule-tick: 50px;
  }
}


@media screen and (max-width: 991px) {
  .hamburger {
    display: block;
  }
  .header-recruit {
    & .header-inner {
      padding: 20px;
    }
    & .header-logo-link {
      img.logo {
        max-width: 150px;
      }
      img.tag {
        max-width: 60px;
      }
    }
    & .header-logo,
    & .hamburger {
      position: relative;
      z-index: 110;
    }
    & .header-nav {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      width: min(380px, 85vw);
      background: #fff;
      box-shadow: -10px 0 40px rgba(0, 0, 0, .1);
      z-index: 90;
      overflow-y: auto;
      padding: 100px 32px 48px;
      transform: translateX(100%);
      visibility: hidden;
      transition: transform var(--transition) ease, visibility var(--transition) ease;
    }
    & .header-nav.is-open {
      transform: translateX(0);
      visibility: visible;
    }
    & .header-nav-list {
      flex-direction: column;
      align-items: flex-start;
      gap: var(--px30);
    }
    & .header-nav-item {
      width: 100%;
    }
    & .header-nav-item--menu-only {
      display: block;
    }
    & .header-nav-item__link {
      font-size: var(--px24);
    }
    & .header-nav-item__link:not(.btn) {
      display: block;
    }
    & .header-nav-item__en {
      display: block;
      font-size: var(--px12);
      font-weight: var(--font-weight-medium);
      letter-spacing: .1em;
      color: #888;
      margin-top: .4em;
    }
    & .header-subnav {
      display: flex;
      flex-direction: column;
      gap: .85em;
      margin-top: 1em;
      padding-left: .5em;
      border-left: 1px solid #888;
    }
    & .header-subnav-item__link {
      font-size: var(--px16);
      color: #888;
    }
  }
  .header-recruit.over {
    & .header-logo-link {
      img.logo {
        max-width: 150px;
      }
      img.tag {
        max-width: 60px;
      }
    }
    & .header-nav-item__link {
      font-size: var(--px24);
    }
    & .header-nav-list {
      gap: var(--px30);
    }
  }
  .recruit-top-fv__subcopy {
    max-width: 400px;
  }
  .rectuit-top-fv__flex {
    margin-top: var(--px100);
  }
  .rectuit-top-fv__flex-inner {
    flex-direction: column;
    gap: var(--px60);
  }
  .rectuit-top-fv__flex-wrap p {
    line-height: 3;
  }
  .recruit-top-slider {
    height: 500px;
  }
  .recruit-main-content {
    display: flex;
  }
  .recruit-main-side:has(.marquee-en) {
    display: none;
  }
  .recruit-main-side {
    width: 70px;
  }
  .recruit-main-center {
    width: calc(100% - 70px);
  }
  .recruit-main-side h2 {
    font-size: 42px;
  }
  .recruit-main-side.sticky > * {
    top: 80px;
  }
  .recruit-main-center__content-top {
    height: 250px;
  }
  .recruit-main-center__content-top-text {
    font-size: var(--px24);
  }
  .recruit-main-center__content-bottom-link__text h3 {
    font-size: var(--px24);
    margin-bottom: 1em;
  }
  .recruit-main-center__content-bottom-link__text h3 .num {
    font-size: var(--px48);
  }
  .recruit-main-center__content-bottom-link__text .en {
    font-size: var(--px16);
  }
  .recruit-belt-img {
    height: 300px;
  }
  .recruit-main-center__content-btn {
    width: 30px;
    height: 30px;
  }
  .recruit-main-side__link p {
    font-size: var(--px18);
  }
  .recruit-main-center__content-grid-item__top {
    height: 200px;
  }
  .recruit-main-center__content-grid-item__bottom-link {
    padding: 20px;
  }
  .recruit-main-center__content-grid-item__bottom-link__text h4 {
    font-size: var(--px24);
  }
  .recruit-textslider__img {
    max-width: 500px;
  }
  .recruit-top-content .company {
    & .recruit-main-side.right {
      display: none;
    }
  }
  .recruit-main-center__content-flex-wrap.left {
    width: 100%;
    max-width: 600px;
  }
  .recruit-main-center__content-flex-wrap.right {
    width: 100%;
    padding-inline: 20px;
  }
  .recruit-main-center__content-flex {
    flex-direction: column;
    align-items: center;
    gap: var(--px40);
  }
  .recruit-main-center__content-flex-link {
    margin-inline: auto;
    margin-top: var(--px40);
  }
  .footer-entry-link {
    height: 120px;
    gap: var(--px80);
  }
  .footer-entry-link p {
    font-size: 64px;
    padding-left: 0;
  }
  .footer-entry-link__btn {
    width: 50px;
    height: 50px;
  }
  .footer-logo-link {
    & img.logo {
      max-width: 180px;
    }
    & img.tag {
      max-width: 80px;
    }
  }
  .footer-bottom-wrap__left p {
    font-size: var(--px16);
  }
  .footer-bottom-wrap__right p {
    font-size: var(--px16);
  }
  .footer-bottom-wrap__right-flex a {
    font-size: var(--px16);
  }
  p.copyright {
    font-size: var(--px12);
  }
  .recruitment .recruit-main-center {
    margin-right: 20px;
  }
  .service .recruit-main-center {
    margin-left: 20px;
  }
  .recruit-page-fv__intro {
    flex-direction: column-reverse;
  }
  .recruit-page-title {
    writing-mode: initial;
    margin-top: 0;
    margin-bottom: .3em;
  }
  .recruit-page-title__en {
    margin-left: 0;
    margin-bottom: .5em;
  }
  .company-overview-flex {
    flex-direction: column;
  }
  .company-overview-table {
    width: 100%;
  }
  .company-overview__img {
    width: 100%;
    flex-direction: row;
    flex: 0;
  }
  .company-overview__img img {
    min-width: 0;
  }
  .compnay-overview-grid {
    grid-template-columns: 1fr;
  }
  .company-history-list {
    --history-year-w: 120px;
    --history-dot: 10px;
    --history-lead: 50px;
  }
  .company-history-img {
    position: static;
    margin-top: 10px;
  }
  .company-history-year {
    font-size: 32px;
    line-height: 1.3;
  }
  .recruit-page-content {
    padding-top: 60px;
  }
  .recruit-page-fv__img {
    height: 250px;
  }
  .recruit-page-title {
    font-size: 42px;
  }
  .company-overview-flex {
    margin-bottom: 5px;
  }
  .recruit-page-fv {
    padding-inline: 20px;
  }
  .recruit-page-fv .wrap {
    padding: 0;
  }
  .recruit-page-fv__intro-title-num {
    font-size: var(--px42);
  }
  .recruit-page-fv__intro-title {
    font-size: var(--px28);
  }
  .recruit-page-fv__intro-title-en {
    font-size: var(--px16);
  }
  .recruit-page-title.v2 {
    margin-top: 0;
  }
  .page-nav__icon {
    width: 20px;
    height: 20px;
  }
  .candidate-copy {
    font-size: var(--px42);
  }
  .benefits-grid-item__icon img {
    max-width: 100px;
    max-height: 80px;
  }
  .schedule-flex-wrap.left {
    top: 80px;
  }
  .faq-item__q {
    padding: 20px 0;
  }
  .faq-item__mark {
    width: 20px;
  }
  .faq-item__inner {
    gap: 10px;
  }
  .faq-item__a {
    padding-bottom: 20px;
    padding-left: 0;
  }
  .compnay-overview .recruit-main-center {
    margin-right: 20px;
  }
  .candidate .recruit-main-center {
    margin-right: 20px;
  }
  .schedule .recruit-main-center {
    margin-right: 20px;
  }
  .faq .recruit-main-center {
    margin-left: 20px;
  }
}


@media screen and (max-width: 767px) {
  .service-modal__gallery .swiper-button-prev,
  .service-modal__gallery .swiper-button-next {
    display: none;
  }
  .header-recruit {
    & .header-nav {
      width: 100%;
    }
  }
  .recruit-top-fv__wrap-logo {
    display: none;
  }
  .recruit-top-fv__wrap-logo.sp-only {
    display: block;
    margin-bottom: 20px;
  }
  .recruit-top-fv__wrap-logo {
    max-width: 180px;
  }
  .recruit-top-fv__wrap-logo img.tag {
    min-width: 60px;
  }
  .recruit-top-fv__copy {
    margin-bottom: var(--px50);
  }
  .recruit-top-fv__subcopy {
    max-width: 300px;
  }
  .rectuit-top-fv__flex {
    margin-top: var(--px80);
  }
  .recruit-main-content {
    flex-direction: column;
  }
  .recruit-main-side {
    width: 100%;
  }
  .recruit-main-side h2 {
    writing-mode: initial;
    padding-block: .3em;
    padding-left: .3em;
    border-bottom: 1px solid var(--color-border);
    font-size: var(--px42);
  }
  .company .recruit-main-side h2 {
    border: none;
  }
  .recruit-main-side.sticky {
    padding-bottom: 0;
    position: static;
  }
  .recruit-main-side.sticky > * {
    position: static;
  }
  .recruit-main-center {
    width: calc(100% - 40px);
    margin-inline: auto;
  }
  .service .recruit-main-content {
    flex-direction: column-reverse;
  }
  .recruit-main-center__content-top {
    margin-top: var(--px40);
  }
  .recruit-main-side__link {
    display: none;
  }
  .recruit-main-center__content-flex {
    padding-top: 20px;
    gap: 20px;
  }
  .recruit-main-center__content-flex-wrap h4 {
    margin-bottom: .8em;
  }
  .footer-entry-link {
    gap: var(--px60);
  }
  .footer-entry-link p {
    font-size: 54px;
    top: -2px;
  }
  .recruit-top-content .company {
    padding-top: 20px;
  }
  .rectuit-top-fv__flex-wrap p {
    font-size: var(--px18);
    line-height: 2;
  }
  .recruit-main-center__content-top-text {
    font-size: var(--px20);
    right: 10px;
    top: var(--px80);
  }
  .recruit-main-center__content-bottom-link {
    padding: 10px;
  }
  .recruit-main-center__content-bottom-link__text h3 {
    font-size: var(--px20);
    line-height: 1.4;
    gap: 10px;
  }
  .recruit-main-center__content-bottom-link__text h3 .num {
    font-size: var(--px36);
  }
  .recruit-main-center__content-flex-wrap h4 {
    font-size: var(--px28);
  }
  .recruit-belt {
    margin-block: var(--px40);
  }
  .gmap {
    height: 200px;
  }
  .company-history {
    padding-top: 20px;
  }
  .company-history .recruit-main-content {
    flex-direction: column-reverse;
  }
  .company-history .recruit-main-side h2 {
    border: none;
  }
  .recruit-main-center__content-hitory {
    padding: var(--px100) 0;
  }
  .company-history-text {
    font-size: var(--px16);
    line-height: 1.7;
    position: relative;
    top: .6em;
  }
  .company-history-img {
    margin-top: 15px;
  }
  .company-overview-table__label, .company-overview-table__data {
    padding-block: 1em;
    font-size: var(--px16);
  }
  .company-overview-wrap__title {
    font-size: var(--px20);
    padding-bottom: .5em;
  }
  .company-overview-wrap .gmap {
    height: 150px;
    margin-top: 10px;
  }
  .recruit-page-fv__img {
    height: 200px;
  }
  .recruit-top-slider {
    height: 400px;
  }
  .recruit-page-fv__intro-title-flex {
    gap: 10px;
  }
  .recruit-page-fv__intro-title {
    font-size: var(--px24);
  }
  .recruit-page-fv__intro-title-num {
    font-size: var(--px32);
  }
  .candidate-copy {
    font-size: var(--px32);
  }
  .canditate-item {
    font-size: var(--px16);
  }
  .benefits-grid-item__title {
    margin-top: 1em;
  }
  .benefits-grid-item__text {
    font-size: var(--px16);
    line-height: 1.7;
  }
  .benefits {
    padding-top: 20px;
  }
  .benefits .recruit-main-content {
    flex-direction: column-reverse;
  }
  .benefits .recruit-main-side h2 {
    border: none;
  }
  .recruit-main-center__content-benefits {
    padding-top: var(--px40);
  }
  .faq .recruit-main-content {
    flex-direction: column-reverse;
  }
  .schedule-flex {
    flex-direction: column;
  }
  .schedule-flex-wrap.left {
    position: static;
    flex: 0;
    max-width: 300px;
    margin-inline: auto;
  }
  .schedule-list {
    --schedule-tick: 20px;
  }
  .schedule-item {
    grid-template-columns: 1fr;
  }
  .schedule-item__body {
    margin-top: 6px;
  }
  .schedule-item__text {
    font-size: var(--px16);
    line-height: 1.7;
  }
  .faq-item__a .faq-item__inner {
    align-items: flex-start;
  }
  .faq-item__a .faq-item__mark {
    position: relative;
    bottom: -6px;
  }
}


@media screen and (max-width: 540px) {
  .recruit-main-center__content-top {
    height: 200px;
  }
  .recruit-belt-img {
    height: 200px;
  }
  .recruit-main-center__content-grid {
    grid-template-columns: 1fr;
  }
  .recruit-main-center__content-grid-item:nth-child(odd) {
    border: none;
  }
  .company-history-list {
    --history-year-w: 80px;
    --history-dot: 8px;
    --history-lead: 30px;
  }
  .company-history-year {
    font-size: 24px;
    line-height: 1.7;
  }
  .company-overview-table__row {
    flex-direction: column;
  }
  .company-overview-table__row:first-child .company-overview-table__label {
    border-top: none;
  }
  .company-overview-table__row:first-child .company-overview-table__data {
    border-top: none;
  }
  .company-overview-table__data {
    padding-left: 0;
  }
  .recruit-page-fv__img {
    height: 150px;
  }
  .recruit-top-slider {
    height: 350px;
  }
  .recruit-main-center__content-bottom-link__text h3 .num {
    font-size: var(--px32);
  }
  .recruit-main-center__content-top-text {
    font-size: var(--px16);
  }
  .benefits-grid {
    grid-template-columns: 1fr;
  }
  .benefits-grid-item__icon img {
    max-width: 80px;
    max-height: 60px;
  }
  .company-overview__img {
    flex-direction: column;
  }
}