@charset "UTF-8";

:root {
  --color-blue: #0075de;
  --color-btn-blue: #0182f3;
  --color-green: #2bb9b0;
  --color-green2: #14ae5c;
  --color-orange: #e8442e;
  --color-orange2: #ffa629;
  --color-red: #d62828;
  --color-red2: #f24822;
  --color-yellow: #ffcd29;
  --color-black: #000;
  --color-white: #fff;
  --color-gray: #f6f6f6;
}

html {
  overflow-x: clip;
  font-size: 62.5%;
  scroll-behavior: smooth;
  scroll-padding-top: 8rem;
  @media (max-width: 740px) {
    font-size: calc(10 / 390 * 100vw);
    scroll-padding-top: 6rem;
  }
}

body {
  font-family: "Noto Sans JP", sans-serif;
  -webkit-font-feature-settings: "palt" 1;
  font-feature-settings: "palt" 1;
  color: var(--color-black);
  background: var(--color-gray);
  overflow-x: clip;
  position: relative;
  font-size: 1.6rem;
}

#bg {
  width: 100%;
  height: 100%;
  background-image: url("../img/common/bg.png");
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
}

img {
  max-width: 100%;
  height: auto;
}

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

@media (any-hover: hover) {
  a:hover {
    text-decoration: none;
    color: inherit;
  }
}

.sp_only {
  display: none;
}
@media (max-width: 740px) {
  .pc_only {
    display: none;
  }
  .sp_only {
    display: inherit;
  }
}

/* ヘッダー */
#header {
  width: 100%;
  z-index: 999;
  top: 0;
  position: fixed;
  background-color: var(--color-white);
}
#header .headWrap {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 100px 0 32px;
  @media (max-width: 740px) {
    height: 6rem;
    padding: 0 1.5rem;
  }
}

#header .headerLogo {
  line-height: 1;
  @media (max-width: 740px) {
    width: 28rem;
    img {
      width: 100%;
    }
  }
}

#header .headerNavi .naviList {
  display: flex;
  margin-bottom: 0;
  gap: 0px 50px;
  height: 100%;
  align-items: center;
}

#header .headerNavi .naviList .listItem {
  font-weight: 500;
  color: var(--color-black);
  position: relative;
  font-size: 1.6rem;
  height: 100%;
  transition: 0.3s;
  display: flex;
  align-items: center;
  gap: 5px;
}

#header .headerNavi .naviList .listItem.pdf::after {
  content: "";
  mask-image: url("../img/common/pdf.svg");
  width: 20px;
  height: 20px;
  background: var(--color-black);
  mask-size: contain;
}

#header .headerNavi .naviList .listItem a {
  height: 100%;
  display: flex;
  align-items: center;
  transition: all 0.3s;
}

#header .headerNavi .naviList .listItem.contact a {
  width: 140px;
  height: 35px;
  background: var(--color-btn-blue);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 500px;
  font-size: 1.5rem;
  font-weight: 700;
  border: solid 2px var(--color-btn-blue);
}

@media (any-hover: hover) {
  #header .headerNavi .naviList .listItem a:hover {
    color: var(--color-blue);
  }

  #header .headerNavi .naviList .listItem.contact a:hover {
    background: var(--color-white);
  }
}

.headerMenu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--color-white);
  overflow-y: scroll;
  @media (min-width: 741px) {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  &.active {
    opacity: 1;
    visibility: visible;
  }
  .headerMenu__content {
    background: url(../img/common/bg_contact.png);
    position: relative;
    z-index: 2;
    @media (min-width: 741px) {
      width: 96%;
      max-width: 1400px;
      padding: 90px 30px 50px;
      border-radius: 20px;
    }
    @media (max-width: 740px) {
      padding: 5.8rem 2rem 2rem;
    }
  }
  .headerMenu__inner {
    max-width: 1050px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 60px 100px;
    @media (max-width: 1095px) {
      gap: 60px 20px;
    }
    @media (max-width: 740px) {
      flex-direction: column;
      gap: 0;
    }
  }
  .headerMenu__list,
  .headerMenu__sub {
    display: flex;
    flex-direction: column;
    gap: 8px;
    line-height: 2;
    @media (max-width: 740px) {
      gap: 0;
    }
  }
  .headerMenu__sub {
    @media (max-width: 740px) {
      padding: 3rem 0;
      a {
        display: inline-block;
        padding: 1rem 0;
        line-height: 1;
      }
    }
  }
  .headerMenu__item {
    @media (max-width: 740px) {
      border-bottom: 1px solid var(--color-white);
    }
  }
  .headerMenu__link {
    @media (max-width: 740px) {
      font-size: 2rem;
      display: inline-block;
      padding: 2rem 0;
      line-height: 1;
    }
  }

  .headerMenu__accordion__title {
    position: relative;
    @media (max-width: 740px) {
      &::before,
      &::after {
        content: "";
        width: 2rem;
        height: 0.3rem;
        position: absolute;
        right: 0;
        top: 50%;
        background-color: var(--color-white);
        transition: transform 0.3s;
      }
      &::before {
        transform: translateY(-50%) rotate(-180deg);
      }
      &::after {
        transform: translateY(-50%) rotate(-90deg);
      }
      &.active {
        &::before,
        &::after {
          transform: translateY(-50%) rotate(0deg);
        }
      }
    }
  }

  .headerMenu__accordion__content {
    @media (max-width: 740px) {
      height: 0;
      transition: height 0.3s;
      overflow: hidden;
    }
  }

  .headerMenu__accordion__list {
    display: flex;
    flex-direction: column;
    padding-top: 8px;
    @media (max-width: 740px) {
      padding: 1rem 0 2rem;
      gap: 1rem;
    }
  }
  .headerMenu__accordion__item {
    @media (min-width: 741px) {
      a {
        &::before {
          content: "ー ";
        }
      }
    }
  }
  .headerMenu__bottom {
    width: 100%;
    padding-top: 50px;
    border-top: 1px solid var(--color-white);
    @media (max-width: 740px) {
      padding-top: 0;
      border-top: none;
    }
  }
  .headerMenu__add {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    line-height: 1.6;
  }
  .headerMenu__heading {
    font-size: 2rem;
  }
  .headerMenu__copyright {
    text-align: right;
    line-height: 2.2;
    margin-top: 60px;
    @media (max-width: 740px) {
      margin-top: 3rem;
      text-align: center;
    }
    small {
      font-size: 1.2rem;
      @media (max-width: 740px) {
        font-size: 1rem;
      }
    }
  }
  .headerMenu__close {
    position: absolute;
    width: 30px;
    height: 30px;
    cursor: pointer;
    top: 25px;
    right: 20px;
    @media (max-width: 740px) {
      display: none;
    }
    &::before,
    &::after {
      content: "";
      width: 35px;
      height: 3px;
      background: var(--color-white);
      position: absolute;
      top: 50%;
      left: 50%;
    }
    &::before {
      transform: translate(-50%, -50%) rotate(45deg);
    }
    &::after {
      transform: translate(-50%, -50%) rotate(-45deg);
    }
  }
  .overlay {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
  }
  a {
    transition: opacity 0.3s;
    @media (any-hover: hover) {
      &:hover {
        opacity: 0.7;
      }
    }
  }
}

button {
  border: none;
  outline: none;
}

button:focus {
  border: none;
  outline: none;
}

.menu,
.menu span {
  display: inline-block;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  box-sizing: border-box;
}

.menu {
  position: absolute;
  top: 0;
  right: 10px;
  width: 80px;
  height: 80px;
  z-index: 200;
  bottom: 0;
  margin: auto;
  background: none;
  cursor: pointer;
}

.menu.active {
  top: 0;
  opacity: 0;
}

.menu span {
  position: absolute;
  left: 0;
  height: 4px;
  background-color: var(--color-black);
  z-index: 10;
}

.menu span:nth-of-type(1) {
  top: 25px;
  width: 36px;
  left: 0;
  right: 0;
  margin: auto;
}

.menu span:nth-of-type(2) {
  top: 40px;
  width: 24px;
  left: 0;
  right: -10px;
  margin: auto;
}

.menu span:nth-of-type(3) {
  top: 55px;
  width: 36px;
  left: 0;
  right: 0;
  margin: auto;
}

.menu.active span:nth-of-type(1) {
  transform: translateY(10px) rotate(45deg);
  background-color: var(--color-white);
}

.menu.active span:nth-of-type(2) {
  display: none;
}

.menu.active span:nth-of-type(3) {
  transform: translateY(-20px) rotate(-45deg);
  background-color: var(--color-white);
}

@media (max-width: 1280px) {
  #header .headerNavi .naviList {
    gap: 0px 20px;
  }
}

@media (max-width: 1140px) {
  #header .headerNavi .naviList .listItem {
    display: none;
  }
}

@media (max-width: 740px) {
  #header {
    padding: 0px;
  }
  #header h1 a {
    max-width: 30rem;
    left: 0.5rem;
  }

  #header .headerNavi {
    display: none;
  }

  .menu {
    width: 6rem;
    height: 6rem;
    right: 0;
  }

  .menu span {
    height: 0.4rem;
  }

  .menu span:nth-of-type(1) {
    top: 1.4rem;
    width: 3.6rem;
  }

  .menu span:nth-of-type(2) {
    top: 2.8rem;
    width: 2.4rem;
    right: -1rem;
  }

  .menu span:nth-of-type(3) {
    top: 4.2rem;
    width: 3.6rem;
  }

  .menu.active span:nth-of-type(1) {
    transform: translateY(1rem) rotate(45deg);
  }

  .menu.active span:nth-of-type(3) {
    transform: translateY(-1.8rem) rotate(-45deg);
  }
}

.fixed-switch {
  position: fixed;
  z-index: 999;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s,
    visibility 0.3s;
  &.show {
    opacity: 1;
    visibility: visible;
  }
  @media (max-width: 740px) {
    right: unset;
    top: unset;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
  }
  .fixed-switch__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6em;
    width: 4rem;
    height: 25rem;
    background-color: var(--color-green);
    color: var(--color-white);
    writing-mode: vertical-rl;
    font-weight: 500;
    letter-spacing: 0.2em;
    border-radius: 1rem 0 0 1rem;
    transition: opacity 0.3s;
    @media (max-width: 740px) {
      width: 30rem;
      height: 4rem;
      font-size: 1.6rem;
      border-radius: 1rem 1rem 0 0;
      writing-mode: unset;
      letter-spacing: 0.05em;
    }
    &::after {
      content: "";
      width: 1.5rem;
      height: 0.8rem;
      background: url(../img/common/arrow2.svg) no-repeat center center / 100%;
    }
    @media (any-hover: hover) {
      &:hover {
        opacity: 0.7;
      }
    }
  }
}

/*メインスライド*/
#mainSlide {
  width: 100%;
  padding: 80px 0 0;
  position: relative;
}

#mainSlide .whiteBg {
  position: absolute;
  top: 80px;
  left: 0;
  height: calc(100% - 80px);
  z-index: 2;
  width: calc(100vw * 720 / 1440);
  /* background: linear-gradient(270.12deg, rgba(255, 255, 255, 0) 69.5%, rgba(255, 255, 255, 0.95) 99.87%), linear-gradient(270deg, rgba(255, 255, 255, 0) 6.25%, #ffffff 62.62%); */
}

#mainSlide .whiteBg p {
  position: absolute;
  left: calc(100vw * 73 / 1440);
  bottom: calc(100vw * 140 / 1440);
  font-size: calc(100vw * 76 / 1440);
  font-weight: 700;
  line-height: 120%;
  margin-bottom: 0;
  color: var(--color-white);
}

@keyframes zoomUp {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.15);
  }
}
#mainSlide .swiper-slide-active .swiper-img,
#mainSlide .swiper-slide-duplicate-active .swiper-img,
#mainSlide .swiper-slide-prev .swiper-img {
  animation: zoomUp 12s linear 0s normal both;
}
#mainSlide .swiper-slide img {
  height: auto;
  width: 100%;
}

#mainSlide .recruitBox {
  position: absolute;
  bottom: -44px;
  right: calc(100vw * 100 / 1440);
  z-index: 2;
}

.recruitBox a {
  display: flex;
}

.recruitBox .txtArea {
  background: var(--color-green);
  border: solid 3px var(--color-green);
  color: var(--color-white);
  display: flex;
  flex-direction: column;
  width: 21.7rem;
  justify-content: center;
  padding-top: 0.5rem;
  padding-left: 1.9rem;
  transition: 0.3s;
}

.recruitBox .txtArea .tit {
  font-size: 3.2rem;
  font-weight: 700;
  letter-spacing: 10%;
  line-height: 120%;
  margin-bottom: 0;
}

.recruitBox .txtArea .jp {
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 2;
  position: relative;
  margin-bottom: 0;
}

.recruitBox .txtArea .jp span {
  mask-image: url("../img/common/arrow.svg");
  background: var(--color-white);
  width: 18px;
  height: 10px;
  mask-size: cover;
  display: inline-block;
  margin-left: 7px;
  transition: 0.3s;
}

.recruitBox .imgArea {
  overflow: hidden;
}

.recruitBox .imgArea img {
  height: 10rem;
  transition: 0.3s;
}

@media (any-hover: hover) {
  .recruitBox a:hover .txtArea {
    background: var(--color-white);
    color: var(--color-green);
  }
  .recruitBox a:hover .txtArea .jp span {
    background: var(--color-green);
    margin-left: 12px;
  }
  .recruitBox a:hover .imgArea img {
    transform: scale(1.1);
  }
}

@media (max-width: 740px) {
  #mainSlide {
    padding: 6rem 0 0;
    position: relative;
  }

  #mainSlide .whiteBg {
    top: 6rem;
    left: -6.5rem;
    height: calc(100% - 15rem);
    width: 100%;
  }

  #mainSlide .whiteBg p {
    left: 9.1rem;
    bottom: 2.8rem;
    font-size: 3.9rem;
    white-space: nowrap;
  }

  #mainSlide .swiper-img img {
    width: 100%;
    height: 36.5rem;
    object-fit: cover;
    object-position: 26% center;
  }

  #mainSlide .recruitBox {
    width: calc(100% - 2rem);
    bottom: 0;
    right: 0;
    left: 1rem;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.2));
  }

  .recruitBox .txtArea {
    width: 17.8rem;
    padding-top: 0.3rem;
    padding-left: 1.5rem;
    flex-shrink: 0;
  }

  .recruitBox .txtArea .tit {
    font-size: 2.5rem;
  }

  .recruitBox .txtArea .jp {
    font-size: 1.3rem;
  }

  .recruitBox .txtArea .jp span {
    width: 1.5rem;
    height: 0.8rem;
    mask-size: contain;
    margin-left: 0.7rem;
  }

  .recruitBox .imgArea {
    width: 100%;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}

/*製品・事業内容*/
#service {
  width: 100%;
  padding: 94px 0 74px;
  position: relative;
}

#service .chooseBox {
  position: absolute;
  right: 100px;
  top: 176px;
  background: var(--color-white);
  border-radius: 20px;
  padding: 60px 50px 48px 67px;
  z-index: 2;
}

#service .chooseBox .tit {
  font-size: 3.6rem;
  font-weight: 700;
  line-height: 140%;
  color: var(--color-btn-blue);
  margin-bottom: 23px;
}

#service .chooseBox .txt {
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 2;
  margin-bottom: 32px;
}

.moreBtn {
  width: 240px;
  height: 60px;
  background: var(--color-btn-blue);
  color: var(--color-white);
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  font-weight: 500;
  font-family: "Inter", sans-serif;
  position: relative;
  border: solid 3px var(--color-btn-blue);
  transition: 0.3s;
}

.moreBtn span {
  mask-image: url("../img/common/arrow2.svg");
  background: var(--color-white);
  width: 16px;
  height: 11px;
  mask-size: cover;
  position: absolute;
  right: 16px;
  transition: 0.3s;
}

#service .serviceSlider {
  padding-top: 50px;
  margin-bottom: 94px;
}

#service .serviceSlider .swiper-slide {
  width: 475px;
  height: 475px;
  overflow: hidden;
  border-radius: 40px;
  transition: 0.9s;
  margin-right: 50px;
}

#service .serviceSlider .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#service .serviceSlider .swiper-slide-active {
  transform: translateY(-50px);
}

#service .serviceWrap {
  width: 100%;
  max-width: 1286px;
  margin: 0 auto;
  padding: 0 20px;
}

.commonTit {
  font-size: 6.4rem;
  font-weight: 500;
  letter-spacing: 3px;
  line-height: 64px;
  font-family: "Inter", sans-serif;
  margin-bottom: 36px;
  text-transform: uppercase;
  white-space: nowrap;
}

.commonTit span {
  font-size: 2rem;
  font-weight: 500;
  line-height: 35px;
  font-family: "Noto Sans JP", sans-serif;
  margin-left: 20px;
}

#service .serviceWrap .serviceBox {
  display: grid;
  grid-template-columns: 1fr 570px;
  gap: 32px;
}

#service .serviceWrap .serviceBox .txtArea {
  width: 100%;
  max-width: 552px;
}

#service .serviceWrap .serviceBox .txtArea p {
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 250%;
  text-align: justify;
  margin-bottom: 36px;
}

#service .serviceWrap .serviceBox .linkArea ul {
  margin-bottom: 0;
  margin-top: -25px;
}

#service .serviceWrap .serviceBox .linkArea ul li {
  border-bottom: 1px solid #cdcdcd;
}

.arrowBtn {
  display: block;
  font-size: 2.4rem;
  font-weight: 500;
  line-height: 40px;
  border-bottom: 1px solid #cdcdcd;
  position: relative;
  padding: 19px 0 20px;
  transition: 0.3s;
  span {
    position: absolute;
    mask-image: url("../img/common/arrow2.svg");
    background: var(--color-btn-blue);
    right: 19px;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 20px;
    height: 14px;
    mask-size: contain;
    mask-repeat: no-repeat;
    transition: 0.3s;
  }
}

#service .object {
  position: absolute;
  width: 1440px;
  transform: translate(-50%, 0%);
  top: 0;
  left: 50%;
  z-index: -1;
}

#service .object span {
  content: url("../img/top/object1.png");
  position: absolute;
  left: 91px;
  top: 267px;
}

@media (any-hover: hover) {
  .arrowBtn:hover {
    padding-left: 10px;
    span {
      right: 9px;
    }
  }

  .moreBtn:hover {
    background: var(--color-white);
    color: var(--color-btn-blue);
  }

  .moreBtn:hover span {
    background: var(--color-btn-blue);
    right: 9px;
  }
}

@media (max-width: 1170px) {
  #service .serviceWrap .serviceBox {
    grid-template-columns: 1fr calc(100vw * 570 / 1170);
  }

  #service .serviceWrap .serviceBox .linkArea ul li {
    font-size: calc(100vw * 26 / 1170);
  }
  #service .chooseBox {
    right: 20px;
    padding: calc(100vw * 60 / 1170) calc(100vw * 50 / 1170) calc(100vw * 48 / 1170) calc(100vw * 67 / 1170);
  }
  #service .chooseBox .tit {
    font-size: calc(100vw * 36 / 1170);
    margin-bottom: calc(100vw * 23 / 1170);
  }
  #service .chooseBox .txt {
    font-size: calc(100vw * 18 / 1170);
    margin-bottom: 32px;
  }
}

@media (max-width: 740px) {
  #service {
    padding: 2rem 0 4rem;
  }

  #service .chooseBox {
    position: inherit;
    right: auto;
    top: auto;
    background: none;
    border-radius: 0px;
    padding: 0 1rem;
    margin-bottom: 6rem;
  }

  #service .chooseBox .tit {
    font-size: 3.6rem;
    margin-bottom: 1.8rem;
  }

  #service .chooseBox .txt {
    font-size: 1.6rem;
    text-align: justify;
    margin-bottom: 1.8rem;
  }

  .moreBtn {
    width: 24rem;
    height: 6rem;
    font-size: 2rem;
    margin: 0 auto;
  }

  .moreBtn span {
    width: 1.6rem;
    height: 1.1rem;
    right: 1.6rem;
    mask-repeat: no-repeat;
  }

  #service .serviceSlider {
    padding-top: 0px;
    padding-left: 1rem;
    margin-bottom: 2.3rem;
  }

  #service .serviceSlider .swiper-slide {
    width: 22.8rem;
    height: 22.8rem;
    border-radius: 10px;
    margin-right: 1rem;
  }

  #service .serviceSlider .swiper-slide-active {
    transform: translateY(0px);
  }

  #service .serviceWrap {
    padding: 0 1rem;
  }

  .commonTit {
    font-size: 5.2rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 120%;
    margin-bottom: 2.3rem;
  }

  .commonTit span {
    font-size: 2rem;
    line-height: 3.5rem;
    display: block;
    margin-left: 0px;
  }

  #service .serviceWrap .serviceBox {
    grid-template-columns: 1fr;
    gap: 0;
  }

  #service .serviceWrap .serviceBox .txtArea {
    max-width: 100%;
    display: contents;
  }

  #service .serviceWrap .serviceBox .txtArea p {
    font-size: 1.6rem;
    line-height: 2;
    margin-bottom: 0px;
  }

  #service .serviceWrap .serviceBox .linkArea {
    order: 2;
    margin-bottom: 2.3rem;
  }

  #service .serviceWrap .serviceBox .moreBtn {
    order: 3;
  }

  #service .serviceWrap .serviceBox .linkArea ul {
    margin-bottom: 0;
    margin-top: 0;
  }

  .arrowBtn {
    font-size: 2.4rem;
    line-height: 4rem;
    padding: 2rem 0;
  }

  .arrowBtn span {
    right: 1.5rem;
    width: 1.5rem;
    height: 1.1rem;
    mask-size: contain;
  }

  #service .object {
    width: 39rem;
  }

  #service .object span {
    left: -32rem;
    top: 60.8rem;
    width: 51.1rem;
  }
}

#recruit {
  width: 100%;
  background: var(--color-white);
  position: relative;
  z-index: 1;
  padding-top: 57px;
  margin-bottom: 77px;
}

#recruit .recruitWrap {
  width: 100%;
  max-width: 1260px;
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: 1.5fr 1fr;
}

#recruit .recruitWrap .moreBtn {
  margin-left: auto;
}

#recruit .recruitImg {
  width: 100%;
  height: 400px;
  background-image: url("../img/top/recruitImg.jpg");
  background-size: cover;
  background-position: center;
}

@media (max-width: 740px) {
  #recruit {
    padding-top: 3rem;
    margin-bottom: 6rem;
    background: none;
    display: grid;
  }

  #recruit .recruitWrap {
    padding: 0 0;
    grid-template-columns: 1;
    display: contents;
  }

  #recruit .commonTit {
    margin-left: 1rem;
  }

  #recruit .recruitWrap .moreBtn {
    order: 3;
  }

  #recruit .recruitImg {
    order: 2;
    height: 21.4rem;
    margin-bottom: 25px;
  }
}

/*お知らせ*/
#news {
  width: 100%;
  padding: 0 20px;
  position: relative;
  z-index: 1;
  margin-bottom: 147px;
}

#news .newsWrap {
  width: 100%;
  max-width: 1340px;
  margin: 0 auto;
  background: var(--color-white);
  border-radius: 10px;
  padding: 45px 43px 46px 59px;
  display: grid;
  grid-template-columns: 1fr 1.7fr;
  gap: 0 20px;
}

.moreBtn2 {
  text-decoration: underline;
  font-size: 1.6rem;
  font-weight: 500;
  position: relative;
  width: fit-content;
}

.moreBtn2 span {
  mask-repeat: no-repeat;
  height: 9px;
  mask-size: contain;
  mask-image: url("../img/common/arrow.svg");
  background: var(--color-black);
  width: 16px;
  position: absolute;
  top: 4px;
  bottom: 0;
  right: -34px;
  margin: auto;
  transition: 0.3s;
}

#news .newsWrap .newsList a {
  display: flex;
  align-items: baseline;
  gap: 0 40px;
  position: relative;
  border-bottom: solid 1px #d9d9d9;
  padding: 25px 0;
}

#news .newsWrap .newsList a:last-child {
  border-bottom: none;
}

#news .newsWrap .newsList .tit {
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 2;
  text-align: justify;
  margin-bottom: 0;
  transition: 0.3s;
}

#news .newsWrap .newsList .date {
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 2;
  margin-bottom: 0;
  color: var(--color-blue);
  flex-shrink: 0;
}

@media (any-hover: hover) {
  .moreBtn2:hover span {
    right: -39px;
  }

  #news .newsWrap .newsList a:hover .tit {
    color: var(--color-btn-blue);
  }
}

@media (max-width: 740px) {
  #news {
    padding: 0 1rem;
    margin-bottom: 7.1rem;
  }

  #news .newsWrap {
    border-radius: 0px;
    padding: 0;
    grid-template-columns: 1fr;
    gap: 0 0px;
    background: none;
  }

  #news .newsWrap .txtArea {
    display: contents;
  }

  .moreBtn2 {
    order: 3;
    font-size: 1.6rem;
    display: table;
    margin-left: auto;
  }

  .moreBtn2 span {
    height: 0.9rem;
    width: 1.6rem;
    top: 0.4rem;
    right: -3.4rem;
  }

  #news .moreBtn2 {
    margin-right: 3.4rem;
  }

  #news .newsWrap .newsList a {
    padding: 1.1rem 0;
    flex-direction: column;
  }

  #news .newsWrap .newsList .tit {
    max-width: unset;
    font-size: 1.6rem;
    padding-right: 0px;
  }

  #news .newsWrap .newsList .date {
    font-size: 1.6rem;
    position: inherit;
    right: auto;
  }
}

/*会社概要*/
#company {
  width: 100%;
  padding: 0 20px;
  position: relative;
  margin-bottom: 200px;
}

#company .companyWrap {
  width: 100%;
  max-width: 1245px;
  margin: 0 auto;
}

#company .companyWrap .companyBox {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 0 20px;
}

#company .companyWrap .companyBox .txtArea {
  max-width: 465px;
}

#company .companyWrap .companyBox .txtArea p {
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 2;
  text-align: justify;
  margin-bottom: 96px;
}

#company .companyWrap .companyBox .imgArea {
  margin-top: -100px;
}

#company .companyWrap .companyBox .imgArea img {
  border-radius: 20px;
}

#company .object {
  position: absolute;
  width: 1440px;
  transform: translate(-50%, 0%);
  top: 0;
  left: 50%;
  z-index: -1;
}

#company .object span {
  content: url("../img/top/object2.png");
  position: absolute;
  left: 530px;
  top: 10px;
}

@media (max-width: 1020px) {
  #company .companyWrap .companyBox .imgArea {
    margin-top: 0px;
  }
}

@media (max-width: 740px) {
  #company {
    padding: 0 1rem;
    margin-bottom: 6.3rem;
  }

  #company .companyWrap .companyBox {
    grid-template-columns: 1fr;
    gap: 0 0px;
  }

  #company .companyWrap .companyBox .txtArea {
    max-width: 100%;
    display: contents;
  }

  #company .companyWrap .companyBox .txtArea p {
    font-size: 1.6rem;
    margin-bottom: 2.4rem;
  }

  #company .companyWrap .companyBox .imgArea {
    margin-top: 0;
    order: 2;
    margin-bottom: 2.9rem;
  }

  #company .companyWrap .companyBox .moreBtn {
    order: 3;
  }

  #company .object {
    width: 39rem;
  }

  #company .object span {
    width: 48.3rem;
    left: 21.1rem;
    top: 14rem;
  }
}

/*お問い合わせ*/
#contact {
  width: 100%;
  padding: 104px 20px 67px;
  background: url("../img/common/bg_contact.png");
}

#contact .contactWrap {
  width: 100%;
  max-width: 1202px;
  margin: 0 auto;
  text-align: right;
}

#contact .contactWrap .commonTit {
  color: var(--color-white);
  text-align: center;
}

#contact .contactWrap .commonTit span {
  display: block;
}

#contact .contactWrap .contactBox {
  display: flex;
  gap: 0 60px;
  margin-bottom: 43px;
}

#contact .contactWrap .contactBox a {
  width: 100%;
  max-width: 570px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 140px;
  background: var(--color-white);
  border-radius: 10px;
  flex-direction: column;
  position: relative;
}

#contact .contactWrap .contactBox a::before {
  content: "";
  width: 100%;
  height: 100%;
  border: solid 0px var(--color-blue);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  border-radius: 10px;
  transition: 0.2s;
}

#contact .contactWrap .contactBox a .tel {
  color: var(--color-blue);
  font-size: 40px;
  font-weight: 700;
  line-height: 100%;
  display: flex;
  align-items: center;
  padding-top: 10px;
  margin-bottom: 0;
}

#contact .contactWrap .contactBox a .tel span {
  mask-image: url("../img/common/tel.svg");
  width: 41px;
  height: 41px;
  background: var(--color-blue);
  mask-size: contain;
  display: inline-block;
  margin-right: 15px;
}

#contact .contactWrap .contactBox a .sub {
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  color: var(--color-blue);
  margin-top: 7px;
}

#contact .contactWrap .contactBox a .form {
  color: var(--color-blue);
  font-size: 3.2rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  margin-bottom: 0;
}

#contact .contactWrap .contactBox a .form .icon {
  mask-image: url("../img/common/form.svg");
  width: 49px;
  height: 49px;
  background: var(--color-blue);
  mask-size: cover;
  display: inline-block;
  margin-right: 15px;
}

#contact .contactWrap .contactBox a .form .txt {
  text-align: left;
  padding-top: 0.2em;
}

#contact .contactWrap .contactBox a .form .txt-min {
  display: block;
  font-size: 1.5rem;
  margin-top: 0.8rem;
}

#contact .contactWrap .moreBtn2 {
  color: var(--color-white);
  margin-right: 34px;
}

#contact .contactWrap .moreBtn2 span {
  background: var(--color-white);
}

@media (any-hover: hover) {
  #contact .contactWrap .contactBox a:hover::before {
    border-width: 3px;
    width: 98%;
    height: 92%;
  }
}
@media (max-width: 1050px) {
  #contact .contactWrap .contactBox {
    gap: 0 10px;
  }

  #contact .contactWrap .contactBox a .form .icon {
    width: calc(100vw * 49 / 1050);
    height: calc(100vw * 49 / 1050);
  }

  #contact .contactWrap .contactBox a .form {
    font-size: calc(100vw * 32 / 1050);
  }

  #contact .contactWrap .contactBox a .tel {
    font-size: calc(100vw * 40 / 1050);
  }

  #contact .contactWrap .contactBox a .tel span {
    width: calc(100vw * 41 / 1050);
    height: calc(100vw * 41 / 1050);
  }
}

@media (max-width: 740px) {
  #contact {
    padding: 7.6rem 1rem 7.4rem;
  }

  #contact .contactWrap .contactBox {
    flex-wrap: wrap;
    gap: 2rem 0px;
    margin-bottom: 4.3rem;
  }

  #contact .contactWrap .contactBox a {
    max-width: 37rem;
    height: 10rem;
  }

  #contact .contactWrap .contactBox a::before {
    content: none;
  }

  #contact .contactWrap .contactBox a .tel {
    font-size: 4rem;
    padding-top: 0.5rem;
  }

  #contact .contactWrap .contactBox a .tel span {
    width: 4.1rem;
    height: 4.1rem;
    margin-right: 1rem;
  }

  #contact .contactWrap .contactBox a .sub {
    font-size: 1.4rem;
    margin-top: 0.4rem;
  }

  #contact .contactWrap .contactBox a .form {
    font-size: 2.6rem;
    font-weight: 900;
  }

  #contact .contactWrap .contactBox a .form .icon {
    width: 4.8rem;
    height: 4.8rem;
    margin-right: 1rem;
  }

  #contact .contactWrap .moreBtn2 {
    margin-right: 3.4rem;
  }
}

/*フッター*/
#footer {
  width: 100%;
  padding: 88px 20px 31px;
}

#footer .footerWrap {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
}

#footer .footerWrap .footerBox {
  display: grid;
  grid-template-columns: 1fr 1.8fr;
  gap: 20px;
  border-bottom: solid 1px #d9d9d9;
  margin-bottom: 18px;
  padding-bottom: 80px;
}

#footer .footerWrap h1 {
  margin-bottom: 13px;
}

#footer .footerWrap .footerBox .txtArea .address {
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 2;
  margin-bottom: 12px;
}

#footer .footerWrap .footerBox .txtArea .tel {
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 150%;
  margin-bottom: 0;
}

#footer .footerWrap .copy {
  font-size: 1.2rem;
  font-weight: 400;
  display: block;
  text-align: right;
  line-height: 35px;
  margin-bottom: 0;
}

#footer .footerWrap .footerBox .navList {
  display: flex;
  gap: 0 90px;
  margin-bottom: 0;
  @media (max-width: 1000px) {
    gap: 0 20px;
  }
}

#footer .footerWrap .footerBox .navList ul {
  margin-bottom: 0;
}

#footer .footerWrap .footerBox .navList ul li {
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 2;
  margin-bottom: 13px;
}

#footer .footerWrap .footerBox .navList ul li.f-nav-item--sub {
  margin-bottom: 4px;
  a {
    &::before {
      content: "ー ";
      color: #898989;
    }
  }
}

#footer .footerWrap .footMenu2 {
  display: flex;
  gap: 0 44px;
  justify-content: flex-end;
  margin-right: 19px;
  margin-bottom: 17px;
}

#footer .footerWrap .footMenu2 li {
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 2;
  margin-bottom: 0;
}

#footer a {
  transition: color 0.3s;
  @media (any-hover: hover) {
    &:hover {
      color: var(--color-blue);
    }
  }
}

@media (max-width: 740px) {
  #footer {
    padding: 6.3rem 1rem 6rem;
  }

  #footer .footerWrap .footerBox {
    grid-template-columns: 1fr;
    gap: 0px;
    border: none;
    padding-bottom: 0;
    margin-bottom: 5rem;
  }

  #footer .footerLogo {
    margin-bottom: 0;
    text-align: center;
    img {
      width: 31.4rem;
    }
  }

  #footer .footerWrap .footerBox .txtArea h1 a {
    max-width: 31.4rem;
  }

  #footer .footerWrap .footerBox .txtArea .address {
    font-size: 1.6rem;
    margin-bottom: 0.9rem;
    text-align: center;
  }

  #footer .footerWrap .footerBox .txtArea .tel {
    font-size: 1.6rem;
    text-align: center;
  }

  #footer .footerWrap .copy {
    font-size: 1.2rem;
    text-align: left;
  }

  #footer .footerWrap .footerBox .navList {
    display: none;
  }

  #footer .footerWrap .footMenu2 {
    display: none;
  }
}

/* 下層共通 */

.inner {
  max-width: 122rem;
  padding-left: 1rem;
  padding-right: 1rem;
  margin-left: auto;
  margin-right: auto;
  &.inner--s {
    max-width: 92rem;
  }
}

.title1 {
  font-size: 4.4rem;
  font-weight: bold;
  line-height: 1.5;
  letter-spacing: 0.04em;
  @media (max-width: 740px) {
    font-size: 3.2rem;
  }
  &.title1--large {
    font-size: 4.8rem;
    @media (max-width: 740px) {
      font-size: 3.2rem;
    }
  }
  .title1__sub {
    font-size: 2.4rem;
    font-weight: bold;
  }
}

.title2 {
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.4;
  @media (max-width: 740px) {
    font-size: 1.8rem;
  }
  &::before {
    content: attr(data-en);
    display: block;
    font-size: 6.4rem;
    line-height: 1;
    letter-spacing: 0.04em;
    margin-bottom: 1rem;
    font-family: "Inter", sans-serif;
    text-transform: uppercase;
    @media (max-width: 740px) {
      font-size: 4.8rem;
      font-weight: bold;
    }
  }
  &.title2--center {
    text-align: center;
  }
}

.title3 {
  font-size: 3.2rem;
  font-weight: bold;
  line-height: 1.5;
  color: var(--color-blue);
  @media (max-width: 740px) {
    font-size: 2.4rem;
  }
  .title3__min {
    font-size: 1.6rem;
    vertical-align: text-top;
    position: relative;
    top: 0.3em;
  }
  .fz20 {
    @media (max-width: 740px) {
      font-size: 1.8rem;
    }
  }
}

.font-poppins {
  font-family: "Poppins", sans-serif;
}

.bold {
  font-weight: bold;
}

.t-center {
  text-align: center;
}

.blue {
  color: var(--color-blue);
}

.orange {
  color: var(--color-orange);
}
.red {
  color: var(--color-red);
}

.yellow {
  color: var(--color-yellow);
}

.green {
  color: var(--color-green);
}

.fz16 {
  font-size: 1.6rem;
}

.fz18 {
  font-size: 1.8rem;
  line-height: 1.4;
}

.fz20 {
  font-size: 2rem;
  line-height: 1.4;
  font-weight: bold;
}

.fz24 {
  font-size: 2.4rem;
  line-height: 1.5;
  @media (max-width: 740px) {
    font-size: 2rem;
  }
}

.mb8 {
  margin-bottom: 0.8rem;
}

.mb10 {
  margin-bottom: 1rem;
}

.mb20 {
  margin-bottom: 2rem;
}

.mb24 {
  margin-bottom: 2.4rem;
}

.mb32 {
  margin-bottom: 3.2rem;
  @media (max-width: 740px) {
    margin-bottom: 2.4rem;
  }
}

.mb40 {
  margin-bottom: 4rem;
  @media (max-width: 740px) {
    margin-bottom: 3rem;
  }
}

.mb60 {
  margin-bottom: 6rem;
  @media (max-width: 740px) {
    margin-bottom: 4rem;
  }
}

.column-list {
  border-top: 1px solid #cdcdcd;
  .column-list__item {
    padding: 4rem 0;
    border-bottom: 1px solid #cdcdcd;
    display: flex;
    align-items: center;
    gap: 4rem;
    @media (max-width: 740px) {
      padding: 3rem 0;
      flex-direction: column;
      gap: 2rem;
    }
    .column-list__txt {
      .title3 {
        margin-bottom: 3.2rem;
        @media (max-width: 740px) {
          margin-bottom: 2rem;
        }
      }
    }
    .column-list__img {
      width: 36rem;
      overflow: hidden;
      border-radius: 1rem;
      flex-shrink: 0;
      @media (max-width: 740px) {
        width: 100%;
      }
    }
  }
  .column-list__sublist {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1em;
    margin-top: 1.6rem;
    p {
      font-weight: bold;
    }
  }
  &.column-list--column1 {
    .column-list__item {
      display: block;
      padding: 6rem 0;
      @media (max-width: 740px) {
        padding: 4rem 0;
      }
      .radius-box {
        + p {
          margin-top: 2.4rem;
        }
        .bold.mb8 {
          line-height: 1.4;
        }
      }
    }
  }
}

.subpage {
  padding-top: 10rem;
  line-height: 1.8;
  @media (max-width: 740px) {
    padding-top: 7rem;
  }
  + #footer {
    background-color: var(--color-white);
  }
}

.subpage-header {
  .subpage-header__box {
    border-radius: 2rem;
    background: url(../img/common/bg_contact.png);
    max-width: calc(100% - 4rem);
    margin: 0 auto 1.5rem;
    @media (max-width: 740px) {
      border-radius: 1rem;
      padding: 5rem 0 4rem;
      max-width: calc(100% - 2rem);
    }
    .inner {
      height: 25rem;
      display: flex;
      align-items: center;
      @media (max-width: 740px) {
        height: 10rem;
      }
    }
  }
  .subpage-header__title {
    font-size: 5.2rem;
    line-height: 1.2;
    font-weight: bold;
    letter-spacing: 0.08em;
    color: var(--color-white);
    position: relative;
    @media (max-width: 740px) {
      font-size: 4rem;
    }
    &::before {
      content: attr(data-ja);
      display: block;
      font-size: 2rem;
      font-weight: bold;
      margin-bottom: 0.2em;
      min-height: 1rem;
      @media (max-width: 740px) {
        font-size: 1.6rem;
        min-height: unset;
      }
    }
    &::after {
      content: attr(data-en);
      display: block;
      font-size: 2rem;
      font-weight: 400;
      font-family: "Inter", sans-serif;
      line-height: 1.4;
      letter-spacing: 0.04em;
      margin-top: 0.5em;
      text-transform: uppercase;
      @media (max-width: 740px) {
        font-size: 1.6rem;
      }
    }
  }
  .breadcrumbs {
    font-size: 1.2rem;
    color: #333;
    > span {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5em;
      span,
      a {
        &:not(:first-child) {
          &::before {
            content: "ー";
            margin-right: 0.5em;
          }
        }
      }
    }
    a {
      @media (any-hover: hover) {
        &:hover {
          color: var(--color-blue);
        }
      }
    }
  }
}

.contents-wrapper {
  .contents-wrapper__inner {
    @media (min-width: 1021px) {
      display: grid;
      grid-template-columns: 30rem 1fr;
    }
    .side-area {
      position: relative;
      z-index: 2;
      @media (max-width: 1020px) {
        display: none;
      }
    }
    .side-nav {
      position: sticky;
      top: 2rem;
      padding: 10rem 0 12rem;
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
      line-height: 1.4;
      letter-spacing: 0.04em;
      .side-nav__item {
        a {
          display: block;
          font-size: 1.5rem;
          padding-left: 1.6rem;
          position: relative;
          &::before {
            content: "";
            width: 0.8rem;
            height: 0.8rem;
            background: var(--color-blue);
            position: absolute;
            left: 0;
            top: 54%;
            transform: translateY(-50%);
            border-radius: 50%;
            opacity: 0;
            transition: opacity 0.3s;
          }
          @media (any-hover: hover) {
            &:hover {
              color: var(--color-blue);
            }
          }
        }
        &.active {
          a {
            font-weight: bold;
            color: var(--color-blue);
            &::before {
              opacity: 1;
            }
          }
        }
      }
    }
  }
  .contents-main {
    position: relative;
    z-index: 1;
    section,
    article {
      padding: 10rem 0 12rem;
      position: relative;
      z-index: 2;
      @media (max-width: 740px) {
        padding: 6rem 0 8rem;
      }
      &::before {
        width: 100vw;
        height: 100%;
        position: absolute;
        z-index: -1;
        top: 0;
        left: calc(50% - (50vw + 15rem));
        @media (max-width: 1020px) {
          left: -1rem;
        }
      }
      .title1 {
        margin-bottom: 4.4rem;
        @media (max-width: 740px) {
          margin-bottom: 3rem;
        }
      }
      &.pt-min {
        padding-top: 4rem;
        @media (max-width: 740px) {
          padding-top: 2rem;
        }
        .title2 {
          margin-bottom: 4.4rem;
          @media (max-width: 740px) {
            margin-bottom: 3rem;
          }
        }
      }
      &.bg-blue {
        &::before {
          content: "";
          background-color: rgba(234, 239, 244, 0.6);
        }
      }
      &.bg-white {
        &::before {
          content: "";
          background-color: rgba(255, 255, 255, 0.6);
        }
        .interview-card {
          background-color: #ebf7f9;
          .interview-card__img {
            background-color: var(--color-white);
          }
        }
      }
    }
  }
}

/* 会社概要 */

.company-desc {
  background-image: url(../img/top/object2.png);
  background-size: 59rem auto;
  background-position: left calc(50% + 33rem) top 12.8rem;
  background-repeat: no-repeat;
  padding: 8rem 0 10rem;
  @media (max-width: 740px) {
    padding: 6rem 0 8rem;
    background-size: 40rem auto;
    background-position: left calc(50% + 20rem) top 10rem;
  }
  .title1 {
    margin-bottom: 4rem;
    @media (max-width: 740px) {
      margin-bottom: 2rem;
    }
  }
  p {
    line-height: 2.7;
    font-size: 2rem;
    margin-bottom: 8rem;
    @media (max-width: 740px) {
      line-height: 2;
      font-size: 1.8rem;
      margin-bottom: 6rem;
    }
  }
}

.company-slider {
  overflow-x: hidden;
  display: flex;
  .slider-content {
    flex-shrink: 0;
    width: 252rem;
    padding-right: 2rem;
    display: flex;
    gap: 2rem;
    animation: loopslide 30s linear infinite;
    @media (max-width: 740px) {
      width: 100rem;
      padding-right: 1rem;
      gap: 1rem;
    }
    .slider-content__item {
      overflow: hidden;
      border-radius: 1rem;
    }
  }
}

@keyframes loopslide {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

.philosophy {
  padding-bottom: 6rem !important;
  @media (max-width: 740px) {
    padding-bottom: 4rem !important;
  }
  .title2 {
    margin-bottom: 4.4rem;
    @media (max-width: 740px) {
      margin-bottom: 3rem;
    }
  }
}

.emblem {
  .title2 {
    margin-bottom: 4.4rem;
  }
  .emblem-box {
    display: flex;
    gap: 4rem;
    border-radius: 1rem;
    background-color: var(--color-white);
    padding: 4rem;
    @media (max-width: 740px) {
      flex-direction: column;
      gap: 2rem;
      padding: 2rem;
    }
    .emblem-box__img {
      width: 30rem;
      flex-shrink: 0;
      @media (max-width: 740px) {
        width: 60%;
        margin: 0 auto;
      }
    }
  }
}

.overview {
  .title2 {
    margin-bottom: 4.4rem;
    @media (max-width: 740px) {
      margin-bottom: 3rem;
    }
  }
  .overview-list {
    display: grid;
    grid-template-columns: 26rem 1fr;
    border-top: 1px solid #cdcdcd;
    line-height: 1.6;
    @media (max-width: 740px) {
      grid-template-columns: 1fr;
    }
    .overvie-list__title {
      font-weight: bold;
      padding: 2.4rem 2rem;
      border-bottom: 1px solid #cdcdcd;
      @media (max-width: 740px) {
        padding: 2rem 1rem 1.6rem;
        border-bottom: none;
      }
    }
    .overview-list__txt {
      padding: 2.4rem 2rem 2.4rem 0;
      border-bottom: 1px solid #cdcdcd;
      font-weight: 500;
      @media (max-width: 740px) {
        padding: 0 1rem 2rem;
      }
    }
  }
  .add-list {
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
  }
}

.add {
  .add__title {
    font-weight: bold;
    letter-spacing: 0.08em;
    margin-bottom: 0.8rem;
  }
  .add__text {
    font-weight: 500;
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.5rem;
  }
}

.btn-add {
  color: var(--color-blue) !important;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  &::before {
    content: "";
    width: 1.4rem;
    height: 1.4rem;
    background-image: url(../img/common/icon_pin.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }
  @media (any-hover: hover) {
    &:hover {
      text-decoration: underline;
    }
  }
}

.history {
  .title2 {
    margin-bottom: 6rem;
    @media (max-width: 740px) {
      margin-bottom: 4rem;
    }
  }
  .history-list {
    padding-left: 4rem;
    padding-bottom: 1rem;
    position: relative;
    display: grid;
    grid-template-columns: 18rem 1fr;
    gap: 3rem 0;
    position: relative;
    @media (max-width: 740px) {
      padding: 0;
      grid-template-columns: 1fr;
      gap: 1rem 0;
    }
    &::before {
      content: "";
      width: 1px;
      height: calc(100% - 2rem);
      background-color: #cdcdcd;
      position: absolute;
      left: 4.3rem;
      bottom: 0;
      @media (max-width: 740px) {
        left: 0.3rem;
      }
    }
    .history-year {
      font-size: 2.2rem;
      line-height: 1.2;
      font-weight: bold;
      padding-left: 6rem;
      position: relative;
      @media (max-width: 740px) {
        padding-left: 2rem;
      }
      &::before {
        content: "";
        width: 0.7rem;
        height: 0.7rem;
        background-color: #cdcdcd;
        border-radius: 50%;
        position: absolute;
        left: 0;
        top: 1.3rem;
      }
    }
    .history-content {
      font-weight: 500;
      @media (max-width: 740px) {
        padding: 0 0 1rem 2rem;
      }
    }
  }
}

.access {
  .title2 {
    margin-bottom: 4.4rem;
    @media (max-width: 740px) {
      margin-bottom: 3rem;
    }
  }
  .access-list {
    display: flex;
    flex-direction: column;
    gap: 4rem;
    @media (max-width: 740px) {
      gap: 3rem;
    }
    .access-list__item {
      &:not(:last-child) {
        padding-bottom: 4rem;
        border-bottom: 1px solid #cdcdcd;
        @media (max-width: 740px) {
          padding-bottom: 3rem;
        }
      }
      .add {
        margin-bottom: 2.4rem;
        @media (max-width: 740px) {
          margin-bottom: 2rem;
        }
      }
      .map {
        iframe {
          width: 100%;
          height: 35rem;
          @media (max-width: 740px) {
            height: 20rem;
          }
        }
      }
    }
  }
}

/* business */

.business-content {
  .business-content__img {
    max-width: 80rem;
    margin: 0 auto 2rem;
  }
  .business-list {
    display: flex;
    flex-direction: column;
    gap: 6rem;
    counter-reset: business-card;
    @media (max-width: 740px) {
      gap: 2rem;
    }
    .business-list__item {
      counter-increment: business-card;
    }
  }
  .business-card {
    display: flex;
    align-items: center;
    gap: 4rem;
    padding: 4rem 3.6rem;
    border-radius: 1rem;
    background-color: var(--color-white);
    border: 2px solid var(--color-white);
    transition: border-color 0.3s;
    @media (any-hover: hover) {
      &:hover {
        border-color: var(--color-blue);
        .moreBtn2 {
          color: var(--color-blue);
          span {
            background-color: var(--color-blue);
          }
        }
      }
    }
    @media (max-width: 740px) {
      flex-direction: column;
      gap: 2rem;
      padding: 2.4rem;
    }
    .business-card__img {
      width: 30rem;
      flex-shrink: 0;
      overflow: hidden;
      border-radius: 1rem;
      @media (max-width: 740px) {
        width: 100%;
      }
    }
    .business-card__txt {
      width: 100%;
      .title3 {
        color: var(--color-black);
        margin-bottom: 2.4rem;
        @media (max-width: 740px) {
          margin-bottom: 1.6rem;
        }
        &::before {
          content: counter(business-card, decimal-leading-zero);
          font-size: 2.2rem;
          color: var(--color-blue);
          margin-right: 0.5rem;
          @media (max-width: 740px) {
            font-size: 1.8rem;
          }
        }
      }
      .moreBtn2 {
        margin: 4rem 4rem 0 auto;
        pointer-events: none;
        transition: color 0.3s;
        @media (max-width: 740px) {
          margin-top: 2rem;
        }
      }
    }
  }
}

.reasons {
  .title2 {
    margin-bottom: 4.4rem;
    @media (max-width: 740px) {
      margin-bottom: 3rem;
    }
  }
}

.works-area {
  background-color: rgba(234, 239, 244, 0.6);
  padding: 10rem 0;
  @media (max-width: 740px) {
    padding: 6rem 0;
  }
  .title2 {
    margin-bottom: 4rem;
    @media (max-width: 740px) {
      margin-bottom: 3rem;
    }
  }
  .moreBtn {
    margin: 3rem auto 0;
  }
}

.worksSlider {
  padding-bottom: 6rem;
  @media (max-width: 740px) {
    padding-bottom: 4rem;
  }
  .swiper-slide {
    padding: 0 2rem;
    height: auto;
    @media (max-width: 740px) {
      padding: 0 0.5rem;
    }
  }
  .swiper-pagination {
    bottom: 0;
  }
  .swiper-prev,
  .swiper-next {
    width: 1.6rem;
    height: 3rem;
    border-bottom: 1px solid var(--color-blue);
    cursor: pointer;
    position: relative;
    &::before {
      content: "";
      width: 1.6rem;
      height: 1.2rem;
      mask-position: center;
      mask-repeat: no-repeat;
      mask-size: contain;
      background-color: var(--color-blue);
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: 0;
      transition: all 0.3s;
    }
  }
  .swiper-prev {
    &::before {
      mask-image: url(../img/common/arrow-back.svg);
    }
    @media (any-hover: hover) {
      &:hover {
        &::before {
          left: -0.5rem;
        }
      }
    }
  }
  .swiper-next {
    &::before {
      mask-image: url(../img/common/arrow2.svg);
    }
    @media (any-hover: hover) {
      &:hover {
        &::before {
          left: 0.5rem;
        }
      }
    }
  }
  .works-controller {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0 3rem;
    margin-top: 3rem;
    .swiper-pagination {
      position: static;
      width: fit-content;
      padding-bottom: 8px;
    }
  }
}

.works-card {
  border-radius: 1rem;
  padding: 2.4rem 2.4rem 4.8rem;
  background-color: var(--color-white);
  height: 100%;
  @media (max-width: 740px) {
    padding: 2rem 2rem 3rem;
  }
  .works-card__img {
    overflow: hidden;
    border-radius: 1rem;
    position: relative;
    margin-bottom: 1.6rem;
    .works-category {
      position: absolute;
      left: 2rem;
      bottom: 2rem;
      background-color: var(--color-blue);
      color: var(--color-white);
      padding: 0.8rem 1.5rem;
      border-radius: 2rem;
      font-size: 1.5rem;
      font-weight: 500;
      line-height: 1;
      @media (max-width: 740px) {
        font-size: 1.3rem;
        padding: 0.6rem 1rem;
        left: 1rem;
        bottom: 1rem;
      }
    }
  }
  .works-card__txt {
    .works-card__title {
      font-size: 2.4rem;
      font-weight: bold;
      line-height: 1.5;
      margin-bottom: 1.6rem;
      @media (max-width: 740px) {
        font-size: 2rem;
      }
    }
    .works-tag {
      display: flex;
      flex-wrap: wrap;
      gap: 0 1em;
      .works-tag__item {
        font-weight: 500;
        font-size: 1.4rem;
        @media (max-width: 740px) {
          font-size: 1.3rem;
        }
        &::before {
          content: "#";
        }
      }
    }
  }
}

.business-info {
  .title1 {
    margin-bottom: 4rem;
  }
  .business-info__txt {
    font-size: 1.8rem;
    font-weight: 500;
    line-height: 2.2;
    @media (max-width: 740px) {
      line-height: 2;
    }
  }
  .list-column3 {
    margin-top: 4rem;
  }
  .radius-box {
    margin-top: 5.5rem;
    @media (max-width: 740px) {
      margin-top: 4rem;
    }
  }
}

.list-column2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  @media (max-width: 740px) {
    grid-template-columns: repeat(1, 1fr);
  }
}

.list-column3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
  @media (max-width: 740px) {
    grid-template-columns: repeat(1, 1fr);
    width: 90%;
    margin-left: auto;
    margin-right: auto;
  }
  .list-column3__img {
    border-radius: 1rem;
    overflow: hidden;
    margin-bottom: 1rem;
    img {
      width: 100%;
    }
  }
  .list-column3__title {
    font-size: 1.8rem;
    line-height: 1.5;
    font-weight: 500;
    text-align: center;
    .list-column3__title__sub {
      display: block;
      font-size: 1.5rem;
    }
  }
}

.radius-box {
  border-radius: 1rem;
  padding: 4rem;
  @media (max-width: 740px) {
    padding: 2.4rem 2rem;
    &.sp-p0 {
      padding-left: 0;
      padding-right: 0;
    }
  }
  &.radius-box--white {
    background-color: var(--color-white);
  }
  &.radius-box--blue {
    background-color: #eaeff4;
  }
  &:has(.product-title) {
    padding-top: 2.4rem;
  }
  + .title3 {
    margin-top: 8rem;
    @media (max-width: 740px) {
      margin-top: 6rem;
    }
  }
}

.check-list {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  .check-list__item {
    font-size: 2rem;
    font-weight: 500;
    line-height: 1.2;
    display: flex;
    gap: 1.5rem;
    &::before {
      content: "";
      width: 2rem;
      height: 2rem;
      background-image: url(../img/common/icon_check.svg);
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      flex-shrink: 0;
      margin-top: 0.3rem;
    }
    span {
      font-weight: 500;
    }
    .min {
      display: block;
      font-size: 1.6rem;
    }
  }
}

.sp-scroll {
  @media (max-width: 740px) {
    overflow-x: auto;
    &::-webkit-scrollbar {
      width: 5px;
      height: 5px;
    }
    &::-webkit-scrollbar-track {
      background: var(--color-gray);
    }

    /* つまみ部分 */
    &::-webkit-scrollbar-thumb {
      background: var(--color-blue);
      border-radius: 10px;
    }
    .sp-scroll__item {
      min-width: 700px;
      padding-bottom: 0.6rem;
    }
  }
}

.strength,
.products,
.flow {
  .title2 {
    margin-bottom: 4.4rem;
    @media (max-width: 740px) {
      margin-bottom: 3rem;
    }
  }
}

.product-title {
  font-size: 2.4rem;
  font-weight: bold;
  color: var(--color-blue);
  padding: 0 1rem 2rem;
  margin-bottom: 4rem;
  border-bottom: 1px solid var(--color-blue);
  line-height: 1.4;
  @media (max-width: 740px) {
    font-size: 2rem;
    padding: 0 0 1.6rem;
    margin-bottom: 3rem;
  }
}

.product-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6rem;
  @media (max-width: 740px) {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .product-list__item {
    &:not(:last-child) {
      position: relative;
      &::before {
        content: "";
        width: 1px;
        height: 100%;
        background-color: #cdcdcd;
        position: absolute;
        right: -3rem;
        top: 0;
      }
    }
    @media (max-width: 740px) {
      &:not(:last-child) {
        &::before {
          display: none;
        }
      }
    }
  }
  p {
    line-height: 1.5;
  }
}

.product-info {
  display: grid;
  grid-template-columns: 14rem 1fr;
  font-size: 1.3rem;
  line-height: 1.3;
  width: calc(100% - 2rem);
  margin-left: auto;
  margin-right: auto;
  @media (max-width: 740px) {
    grid-template-columns: 10rem 1fr;
    width: 100%;
  }
  .product-info__title {
    font-weight: 500;
    background-color: #d8ecff;
    border-top: 1px solid #b9b9b9;
    border-right: 1px solid #b9b9b9;
    text-align: center;
    padding: 0.6rem;
  }
  .product-info__txt {
    background-color: var(--color-white);
    padding: 0.6rem 1.2rem;
    border-top: 1px solid #b9b9b9;
  }
}

.system-box {
  padding: 4rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4rem;
  @media (max-width: 740px) {
    padding: 2rem;
    grid-template-columns: 1fr;
  }
  &.system-box--blue {
    background-color: #eaeff4;
  }
  &.system-box--yellow {
    background-color: #fcfceb;
  }
  .system-box__item {
    &:not(:last-child) {
      position: relative;
      &::after {
        content: "";
        width: 1.6rem;
        height: 3.6rem;
        background-color: var(--color-blue);
        clip-path: polygon(0 0, 100% 50%, 0 100%);
        position: absolute;
        right: -3rem;
        top: 50%;
        transform: translateY(-50%);
        @media (max-width: 740px) {
          width: 3.6rem;
          height: 1.6rem;
          clip-path: polygon(0 0, 100% 0, 50% 100%);
          right: unset;
          left: 50%;
          transform: translateX(-50%);
          top: unset;
          bottom: -3rem;
        }
      }
    }
    .img {
      + p {
        min-height: 2.8em;
        margin: 2rem 0;
        @media (max-width: 740px) {
          min-height: unset;
          margin: 1rem 0;
        }
      }
    }
    p {
      font-size: 2rem;
      font-weight: 500;
      line-height: 1.4;
      @media (max-width: 740px) {
        font-size: 1.8rem;
      }
    }
    .txt {
      display: flex;
      flex-direction: column;
      gap: 0.8rem;
      margin: 2rem 0;
      @media (max-width: 740px) {
        margin: 1rem 0;
      }
    }
  }
}

.title3.system-title {
  text-align: center;
  position: relative;
  color: var(--color-orange);
  margin: 3rem 0 4.5rem;
  &::after {
    content: "";
    width: 3.6rem;
    height: 1.6rem;
    background-color: var(--color-orange);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -2.4rem;
  }
}

.flow-list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2.4rem;
  @media (max-width: 740px) {
    grid-template-columns: repeat(1, 1fr);
  }
  .flow-list__item {
    border-radius: 1rem;
    background-color: #0075de;
    color: var(--color-white);
    padding: 2rem 1rem 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    position: relative;
    @media (max-width: 740px) {
      flex-direction: row;
      padding: 1.6rem 2rem;
    }
    .icon {
      width: 8rem;
      height: 8rem;
      border-radius: 50%;
      overflow: hidden;
      @media (max-width: 740px) {
        width: 6rem;
        height: 6rem;
      }
    }
    .flow-list__title {
      font-size: 2rem;
      font-weight: bold;
      line-height: 1.2;
      writing-mode: vertical-rl;
      -webkit-writing-mode: vertical-rl;
      letter-spacing: 0.08em;
      @media (max-width: 740px) {
        writing-mode: horizontal-tb;
        -webkit-writing-mode: horizontal-tb;
      }
    }
    &:not(:last-child) {
      &::after {
        content: "";
        width: 1.6rem;
        height: 3.6rem;
        background-color: #cdcdcd;
        clip-path: polygon(0 0, 100% 50%, 0 100%);
        position: absolute;
        right: -2.2rem;
        top: 50%;
        transform: translateY(-50%);
        @media (max-width: 740px) {
          width: 3.6rem;
          height: 1.6rem;
          clip-path: polygon(0 0, 100% 0, 50% 100%);
          right: unset;
          left: 50%;
          transform: translateX(-50%);
          top: unset;
          bottom: -2.2rem;
        }
      }
    }
  }
}

.voice-card {
  background-color: rgba(157, 214, 224, 0.2);
  display: flex;
  align-items: center;
  gap: 4rem;
  @media (max-width: 740px) {
    flex-direction: column;
    gap: 2rem;
  }
  .voice-card__img {
    width: 30rem;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 1rem;
    @media (max-width: 740px) {
      width: 100%;
    }
  }
}

/* contact-area */

.contact-area {
  max-width: 100rem;
  margin-left: auto;
  margin-right: auto;
  padding: 8rem 0 12rem;
  @media (max-width: 740px) {
    padding: 6rem 0 10rem;
  }
  .contact-area__txt {
    font-weight: 500;
  }
  .contact-info {
    border-radius: 1rem;
    background-color: var(--color-white);
    padding: 2rem 3rem;
    line-height: 1.5;
    @media (max-width: 740px) {
      padding: 2rem;
    }
    .contact-info__title {
      margin-bottom: 1.5rem;
      @media (max-width: 740px) {
        margin-bottom: 1rem;
      }
    }
    .contact-info__txt {
      padding-left: 2rem;
      @media (max-width: 740px) {
        padding-left: 1.8rem;
      }
      &:not(:last-child) {
        padding-bottom: 2rem;
        margin-bottom: 2rem;
        border-bottom: 1px solid #cdcdcd;
      }
      p {
        font-weight: 500;
      }
      .tel {
        font-size: 2rem;
        .fz16 {
          margin-left: 0.2em;
        }
      }
      .notes {
        font-size: 1.4rem;
        font-weight: normal;
      }
    }
  }

  .wpcf7-checkbox,
  .wpcf7-radio {
    display: flex;
    flex-wrap: wrap;
    gap: 27px;
  }

  .wpcf7-list-item-label span {
    font-weight: 500;
  }

  .wpcf7-list-item input[type="checkbox"],
  .wpcf7-list-item input[type="radio"] {
    display: none;
  }

  .wpcf7-list-item input[type="checkbox"] + span {
    display: inline-block;
    line-height: 1;
    cursor: pointer;
    padding-left: 3rem;
    position: relative;
  }

  .wpcf7-list-item input[type="checkbox"] + span::before {
    position: absolute;
    top: -2px;
    left: 0;
    width: 2rem;
    height: 2rem;
    content: "";
    background-color: var(--color-white);
    background-position: center;
    background-repeat: no-repeat;
    outline: 1px solid var(--color-black);
    border-radius: 2px;
  }

  .wpcf7-list-item input[type="checkbox"]:checked + span::before {
    background-image: url(../img/common/icon_checkbox.svg);
  }

  .birth-not-valid-tip {
    display: none !important;
  }

  .wpcf7-not-valid-tip,
  .other-not-valid-tip,
  .birth-not-valid-tip {
    font-size: 1.4rem;
    font-weight: 500;
    padding: 8px 0 0 6px;
    color: var(--color-red);
    position: relative;
    @media (max-width: 768px) {
      font-size: 1.2rem;
      padding-left: 0;
    }
  }
  .wpcf7-form-control-wrap:has(.wpcf7-not-valid-tip) {
    input,
    select,
    textarea {
      outline: 1px solid var(--color-red);
      background-color: rgba(218, 61, 0, 0.05);
    }
    .wpcf7-list-item input[type="checkbox"] + span::before,
    .wpcf7-list-item input[type="radio"] + span::before {
      border-color: var(--color-red) !important;
      background-color: rgba(218, 61, 0, 0.05);
    }
  }
  .wpcf7-spinner {
    display: none;
  }
}

.contact-form {
  padding-top: 8rem;
  @media (max-width: 740px) {
    padding-top: 6rem;
  }
  input,
  textarea,
  select,
  option {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 16px;
  }
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  textarea,
  select {
    width: 100%;
    max-width: 45rem;
    padding: 1.4rem 2rem;
    border-radius: 0.5rem;
    outline: 1px solid #cdcdcd;
    background-color: var(--color-white);
    border: none;
    font-weight: 500;
    line-height: 1.4;
    @media (max-width: 740px) {
      padding: 1.4rem 1rem;
    }
    &::placeholder {
      font-weight: 500;
    }
    &:focus {
      outline: 1px solid var(--color-black);
    }
  }
  textarea {
    max-width: 100%;
  }
}

.select-wrap {
  position: relative;
  width: 100%;
  max-width: 45rem;
  &::after {
    content: "";
    width: 1rem;
    height: 0.8rem;
    background-color: var(--color-black);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    position: absolute;
    right: 1.6rem;
    top: 2.2rem;
    pointer-events: none;
  }
  select {
    appearance: none;
  }
}

.form-list {
  display: grid;
  grid-template-columns: 25rem 1fr;
  margin-bottom: 6rem;
  @media (max-width: 740px) {
    grid-template-columns: 1fr;
    margin-bottom: 4rem;
  }
  .form-list__title {
    padding: 5rem 0;
    font-size: 1.8rem;
    font-weight: 500;
    line-height: 1.6;
    border-bottom: 1px solid #cdcdcd;
    position: relative;
    @media (max-width: 740px) {
      padding: 2rem 0 1.6rem;
      border-bottom: none;
    }
    &.required {
      &::after {
        content: "※";
        color: var(--color-red);
        font-size: 1.4rem;
        margin-left: 0.8em;
      }
    }
  }
  .form-list__input {
    padding: 4rem 0;
    border-bottom: 1px solid #cdcdcd;
    @media (max-width: 740px) {
      padding: 0 0 2rem;
    }
  }
}

.form-add {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.form-zip {
  display: flex;
  align-items: center;
  gap: 2rem;
  input[type="text"],
  input[type="tel"] {
    max-width: 30rem;
    @media (max-width: 740px) {
      max-width: 24rem;
    }
  }
  span {
    text-decoration: underline;
    flex-shrink: 0;
    font-size: 1.4rem;
    line-height: 1.4;
    text-decoration: underline;
  }
}

.form-address {
  input[type="text"] {
    max-width: 100%;
  }
}

.form-privacy {
  width: fit-content;
  margin: 0 auto;
  a {
    font-weight: 500;
    text-decoration: underline;
    transition: opacity 0.3s;
    @media (any-hover: hover) {
      &:hover {
        opacity: 0.7;
      }
    }
  }
}

.form-btns {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2rem 3.2rem;
  margin-top: 4rem;
}

.form-btn {
  width: 24rem;
  position: relative;
  &::after {
    content: "";
    width: 1.6rem;
    height: 1.2rem;
    background-color: var(--color-white);
    mask-size: cover;
    mask-repeat: no-repeat;
    mask-position: center;
    position: absolute;
    transition: 0.3s;
    top: 50%;
    transform: translateY(-50%);
  }
  a,
  input {
    display: block;
    width: 100%;
    text-align: center;
    padding: 2rem;
    font-size: 2rem;
    line-height: 1;
    border-radius: 0.5rem;
    cursor: pointer;
    border: 3px solid;
    color: var(--color-white);
    font-weight: 500;
    transition: 0.3s;
  }
  &.form-btn--submit {
    a,
    input {
      border-color: var(--color-btn-blue);
      background-color: var(--color-btn-blue);
    }
    &::after {
      mask-image: url(../img/common/arrow2.svg);
      right: 1.6rem;
    }
    @media (any-hover: hover) {
      &:hover {
        &::after {
          right: 1rem;
          background-color: var(--color-btn-blue);
        }
        a,
        input {
          background-color: var(--color-white);
          color: var(--color-btn-blue);
        }
      }
    }
  }
  &.form-btn--back {
    a,
    input {
      border-color: var(--color-black);
      background-color: var(--color-black);
    }
    &::after {
      mask-image: url(../img/common/arrow-back.svg);
      left: 1.6rem;
    }
    @media (any-hover: hover) {
      &:hover {
        &::after {
          left: 1rem;
          background-color: var(--color-black);
        }
        a,
        input {
          background-color: var(--color-white);
          color: var(--color-black);
        }
      }
    }
  }
}

.recaptcha-notes {
  text-align: center;
  margin-top: 8rem;
  @media (max-width: 740px) {
    text-align: left;
  }
  a {
    text-decoration: underline;
  }
}

.page-confirm {
  .form-list__input {
    @media (min-width: 741px) {
      padding: 5rem 0;
    }
  }
}

.page-thanks {
  .title1 {
    margin-bottom: 8rem;
    @media (max-width: 740px) {
      margin-bottom: 4rem;
    }
  }
  .contact-area__txt {
    margin-bottom: 6rem;
  }
  .moreBtn {
    margin: 0 auto;
  }
}

/* works */

.page-works {
  background: var(--color-white);
}

.works-top {
  padding: 6rem 0 4rem;
  @media (max-width: 740px) {
    padding: 4rem 2rem 2rem;
  }
}

.anker-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0 2.4rem;
  @media (max-width: 1200px) {
    grid-template-columns: repeat(2, 1fr);
  }
  @media (max-width: 740px) {
    grid-template-columns: repeat(1, 1fr);
  }
  .anker-list__link {
    display: block;
    padding: 2rem 2.4rem 2rem 0;
    height: 100%;
    border-bottom: 1px solid #cdcdcd;
    font-size: 1.7rem;
    line-height: 1.4;
    font-weight: 500;
    position: relative;
    transition: 0.3s;
    &::after {
      content: "";
      width: 0.7rem;
      height: 0.7rem;
      border-bottom: 2px solid var(--color-black);
      border-right: 2px solid var(--color-black);
      position: absolute;
      right: 1rem;
      top: 2.5rem;
      transform: rotate(45deg);
      transition: 0.3s;
    }
    @media (any-hover: hover) {
      &:hover {
        color: var(--color-btn-blue);
        border-color: var(--color-btn-blue);
        &::after {
          border-color: var(--color-btn-blue);
        }
      }
    }
  }
}

.works-content {
  padding: 8rem 0 12rem;
  @media (max-width: 740px) {
    padding: 6rem 0 8rem;
  }
  .title1 {
    margin-bottom: 4.4rem;
    @media (max-width: 740px) {
      margin-bottom: 3rem;
    }
  }
  &.bg-white {
    background-color: var(--color-white);
    .works-card {
      background-color: #eaeff4;
    }
  }
  &.bg-blue {
    background-color: #eaeff4;
  }
}

.policy-area {
  padding: 8rem 0 12rem;
  @media (max-width: 740px) {
    padding: 6rem 0 10rem;
  }
  .inner {
    max-width: 102rem;
  }
  .column-list {
    border-top: none;
    .column-list__item {
      &:first-child {
        padding-top: 0;
      }
    }
    a {
      word-break: break-all;
      text-decoration: underline;
      transition: 0.3s;
      @media (any-hover: hover) {
        &:hover {
          color: var(--color-blue);
        }
      }
    }
  }
}

.sitemap {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4rem;
  @media (max-width: 740px) {
    grid-template-columns: repeat(1, 1fr);
    gap: 0;
  }
  .accordion {
    border-bottom: 1px solid #cdcdcd;
  }
  .accordion__title {
    position: relative;
    cursor: pointer;
    &::before,
    &::after {
      content: "";
      width: 1.5rem;
      height: 0.3rem;
      background-color: var(--color-blue);
      border-radius: 0.3rem;
      position: absolute;
      right: 2rem;
      top: 50%;
      transition: transform 0.4s;
    }
    &::before {
      transform: translateY(-50%) rotate(-180deg);
    }
    &::after {
      transform: translateY(-50%) rotate(-90deg);
    }
    &.active {
      &::before {
        transform: translateY(-50%) rotate(0deg);
      }
      &::after {
        transform: translateY(-50%) rotate(0deg);
      }
    }
  }
  .accordion__content {
    height: 0;
    overflow: hidden;
    transition: height 0.4s;
  }
  .accordion__list {
    padding: 0 5rem 3.2rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    @media (max-width: 740px) {
      padding: 0 2rem 2rem;
    }
  }
  .accordion-link {
    font-size: 1.8rem;
    font-weight: 500;
    line-height: 1.4;
    transition: color 0.3s;
    @media (any-hover: hover) {
      &:hover {
        color: var(--color-blue);
      }
    }
  }
}

.sitemap-btn {
  display: block;
  padding: 2.4rem 5rem 2.4rem 2rem;
  font-weight: 500;
  font-size: 2rem;
  line-height: 1.4;
  transition:
    color 0.3s,
    border-color 0.3s;
  border-bottom: 1px solid #cdcdcd;
  @media (any-hover: hover) {
    &:hover {
      color: var(--color-blue);
      border-color: var(--color-blue);
    }
  }
  @media (max-width: 740px) {
    padding: 2rem 2rem 2rem 1rem;
  }
  &:not(.sitemap-btn--noarrow) {
    position: relative;
    &::after {
      content: "";
      width: 1.6rem;
      height: 1.2rem;
      background: var(--color-blue);
      mask-size: cover;
      mask-repeat: no-repeat;
      mask-position: center;
      mask-image: url(../img/common/arrow2.svg);
      position: absolute;
      right: 2rem;
      top: 50%;
      transform: translateY(-50%);
    }
  }
  &.sitemap-btn--noarrow {
    width: fit-content;
    border-bottom: none;
  }
}

/* news */

.news-area {
  padding: 8rem 0 12rem;
  @media (max-width: 740px) {
    padding: 6rem 0 10rem;
  }
  .inner {
    max-width: 102rem;
  }
  .pagination {
    margin-top: 6rem;
    .nav-links {
      display: flex;
      justify-content: center;
      gap: 1.6rem;
      width: fit-content;
      margin: 0 auto;
      padding: 0 12rem;
      position: relative;
      @media (max-width: 740px) {
        padding: 0 8rem;
      }
      .page-numbers {
        display: block;
        font-weight: 500;
        text-align: center;
        padding: 0.5rem 0;
        &:not(.prev),
        &:not(.next),
        &:not(.dots) {
          min-width: 1.4em;
        }
        &.current {
          color: var(--color-blue);
          border-bottom: 1px solid var(--color-blue);
        }
        &.prev {
          position: absolute;
          left: 0;
          top: 0;
          padding-left: 3rem;
          &::before {
            content: "";
            width: 1.6rem;
            height: 1.2rem;
            background: var(--color-blue);
            mask-size: cover;
            mask-repeat: no-repeat;
            mask-position: center;
            mask-image: url(../img/common/arrow-back.svg);
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
          }
        }
        &.next {
          position: absolute;
          right: 0;
          top: 0;
          padding-right: 3rem;
          &::after {
            content: "";
            width: 1.6rem;
            height: 1.2rem;
            background: var(--color-blue);
            mask-size: cover;
            mask-repeat: no-repeat;
            mask-position: center;
            mask-image: url(../img/common/arrow2.svg);
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
          }
        }
      }
      a {
        @media (any-hover: hover) {
          transition: color 0.3s;
          &:hover {
            color: var(--color-blue);
          }
        }
      }
    }
  }
}

.news-list {
  .news-list__link {
    border-bottom: 1px solid #cdcdcd;
    padding: 2rem 5rem 2rem 0;
    display: flex;
    gap: 0 2.4rem;
    transition:
      color 0.3s,
      border-color 0.3s;
    position: relative;
    @media (max-width: 740px) {
      padding: 1.6rem 4rem 1.6rem 0;
      flex-direction: column;
    }
    &::after {
      content: "";
      width: 1.6rem;
      height: 1.2rem;
      background: var(--color-blue);
      mask-size: cover;
      mask-repeat: no-repeat;
      mask-position: center;
      mask-image: url(../img/common/arrow2.svg);
      position: absolute;
      right: 1.6rem;
      top: 50%;
      transform: translateY(-50%);
      @media (max-width: 740px) {
        right: 1rem;
      }
    }
    @media (any-hover: hover) {
      &:hover {
        color: var(--color-blue);
        border-color: var(--color-blue);
      }
    }
  }
  .news-list__date {
    font-weight: 500;
    flex-shrink: 0;
  }
}

.page-detail {
  .breadcrumbs-area {
    margin-top: 4rem;
    @media (max-width: 740px) {
      margin-top: 2rem;
    }
  }
}

.detail-area {
  padding: 8rem 0 12rem;
  @media (max-width: 740px) {
    padding: 6rem 0 10rem;
  }
  .inner {
    max-width: 102rem;
  }
  .detail-date {
    font-weight: bold;
    color: var(--color-blue);
    margin-bottom: 2.4rem;
    @media (max-width: 740px) {
      margin-bottom: 1.6rem;
      line-height: 1.6;
    }
  }
  .detail-title {
    font-size: 4.4rem;
    font-weight: 500;
    margin-bottom: 2.4rem;
    @media (max-width: 740px) {
      font-size: 3.2rem;
      margin-bottom: 3rem;
      line-height: 1.4;
    }
  }
  .detail-content {
    p,
    figure,
    ul,
    ol,
    h2,
    h3,
    h4 {
      margin-bottom: 2.4rem;
      @media (max-width: 740px) {
        margin-bottom: 1.6rem;
      }
    }
    h2,
    h3,
    h4 {
      margin-top: 4rem;
      line-height: 1.8;
      font-weight: 500;
      @media (max-width: 740px) {
        margin-top: 3rem;
      }
    }
    figure {
      img {
        border-radius: 1rem;
      }
    }
    figcaption {
      font-size: 1.4rem;
      margin-top: 0.8rem;
    }
    h2 {
      font-size: 2.8rem;
      color: var(--color-blue);
      @media (max-width: 740px) {
        font-size: 2.4rem;
      }
    }
    h3 {
      font-size: 2.4rem;
      padding-bottom: 1rem;
      border-bottom: 1px solid rgba(185, 185, 185, 1);
      color: var(--color-blue);
      @media (max-width: 740px) {
        font-size: 2rem;
      }
    }
    h4 {
      font-size: 2rem;
      @media (max-width: 740px) {
        font-size: 1.8rem;
      }
    }
    ul {
      li {
        padding-left: 1em;
        position: relative;
        &::before {
          content: "・";
          position: absolute;
          left: 0;
          top: 0;
        }
      }
    }
    ol {
      counter-reset: item;
      li {
        padding-left: 1.6em;
        position: relative;
        &::before {
          content: counter(item, decimal-leading-zero) ".";
          counter-increment: item;
          position: absolute;
          left: 0;
          top: 0;
        }
      }
    }
  }
  .moreBtn {
    margin: 6rem auto 0;
  }
}

/* 採用情報 */

.recruit-red {
  color: var(--color-red2);
}
.recruit-orange {
  color: var(--color-orange2);
}
.recruit-yellow {
  color: var(--color-yellow);
}
.recruit-green {
  color: var(--color-green2);
}

.recruit-page {
  #header {
    .headerLogo {
      a {
        display: flex;
        align-items: center;
        gap: 2rem;
        width: 47.6rem;
        @media (max-width: 1380px) {
          width: 24rem;
          gap: 1rem;
        }
        @media (max-width: 1380px) {
          width: 22rem;
        }
      }
      .headerLogo__sub {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 13rem;
        height: 3.4rem;
        border-radius: 0.5rem;
        outline: 1px solid #cdcdcd;
        font-size: 1.8rem;
        line-height: 1;
        font-weight: 500;
        flex-shrink: 0;
        @media (max-width: 1380px) {
          width: 10rem;
          font-size: 1.6rem;
        }
        @media (max-width: 740px) {
          width: 8rem;
          height: 2.8rem;
          font-size: 1.2rem;
        }
      }
    }
    .headerNavi .naviList .listItem a {
      @media (any-hover: hover) {
        &:hover {
          color: var(--color-green) !important;
        }
      }
    }
    .headerNavi .naviList .listItem.contact a {
      background-color: var(--color-green);
      border-color: var(--color-green);
      @media (any-hover: hover) {
        &:hover {
          background-color: var(--color-white);
        }
      }
    }
  }
  .fixed-switch {
    .fixed-switch__btn {
      background-color: var(--color-blue);
    }
  }
  .subpage-header {
    .subpage-header__box {
      background: var(--color-green);
    }
  }
  .title3 {
    color: var(--color-green);
  }
  .moreBtn {
    background-color: var(--color-green);
    border-color: var(--color-green);
    @media (any-hover: hover) {
      &:hover {
        background-color: var(--color-white);
        color: var(--color-green);
        border-color: var(--color-green);
        span {
          background-color: var(--color-green);
        }
      }
    }
  }
  .arrowBtn {
    span {
      background-color: var(--color-green);
    }
    @media (any-hover: hover) {
      &:hover {
        color: var(--color-green);
        border-color: var(--color-green);
      }
    }
  }
  .contents-wrapper {
    .contents-wrapper__inner {
      .side-nav {
        .side-nav__item {
          a {
            &::before {
              background-color: var(--color-green);
            }
            @media (any-hover: hover) {
              &:hover {
                color: var(--color-green);
              }
            }
          }
          &.active {
            a {
              color: var(--color-green);
            }
          }
        }
      }
    }
  }
  .anker-list {
    @media (min-width: 741px) {
      grid-template-columns: repeat(3, 1fr);
    }
    .anker-list__link {
      @media (any-hover: hover) {
        &:hover {
          color: var(--color-green);
          border-color: var(--color-green);
          &::after {
            border-color: var(--color-green);
          }
        }
      }
    }
  }
  .position {
    height: 3rem;
    display: flex;
    align-items: center;
    width: fit-content;
    padding: 0 1.5rem;
    border-radius: 2rem;
    background-color: var(--color-green);
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1;
    color: var(--color-white);
    margin-bottom: 1.4rem;
  }
  .form-btn {
    &.form-btn--submit {
      a,
      input {
        border-color: var(--color-green);
        background-color: var(--color-green);
      }
      @media (any-hover: hover) {
        &:hover {
          &::after {
            right: 1rem;
            background-color: var(--color-green);
          }
          a,
          input {
            background-color: var(--color-white);
            color: var(--color-green);
          }
        }
      }
    }
  }
  #contact {
    background: var(--color-green);
  }
  #contact .contactWrap .contactBox a .form {
    color: var(--color-green);
    .icon {
      background: var(--color-green);
    }
  }
  #contact .contactWrap .contactBox a::before {
    border-color: var(--color-green);
  }
}

.page-recruit {
  .fv {
    position: relative;
    z-index: 3;
    .fv__img {
      border-radius: 2rem;
      overflow: hidden;
      width: 97vw;
      margin: 0 auto;
      @media (max-width: 740px) {
        width: 96vw;
        height: 100vw;
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
    }
    .fv__title {
      position: absolute;
      left: 6.9vw;
      bottom: 6vw;
      z-index: 2;
      color: var(--color-white);
      font-size: 1.25vw;
      font-weight: 500;
      @media (max-width: 740px) {
        font-size: 2rem;
        left: 3rem;
        bottom: 2rem;
      }
      &::before {
        content: attr(data-en);
        display: block;
        font-size: 5.5vw;
        font-family: "Inter", sans-serif;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        margin-bottom: 1vw;
        line-height: 1;
        @media (max-width: 740px) {
          font-size: 5.5rem;
        }
      }
    }
    .recruitBox {
      position: absolute;
      right: 2.8vw;
      bottom: -4rem;
      @media (max-width: 740px) {
        width: 90%;
        right: unset;
        left: 50%;
        transform: translate(-50%, 100%);
        bottom: -2rem;
      }
      .txtArea {
        background: var(--color-blue);
        border-color: var(--color-blue);
        .tit {
          font-size: 2.8rem;
          letter-spacing: 0.04em;
          @media (max-width: 740px) {
            font-size: 2.3rem;
          }
        }
        .jp {
          letter-spacing: 0.1em;
        }
      }
      @media (any-hover: hover) {
        a:hover {
          .txtArea {
            background: var(--color-white);
            color: var(--color-blue);
            .jp span {
              background: var(--color-blue);
            }
          }
        }
      }
    }
  }
}

.recruit-info {
  padding: 10rem 0 0;
  position: relative;
  z-index: 2;
  @media (max-width: 740px) {
    padding-top: 16rem;
  }
  .recruit-info__inner {
    max-width: 148rem;
    padding: 0 1rem;
    margin: 0 auto;
    min-height: 66rem;
    position: relative;
  }
  .images {
    position: absolute;
    width: 37rem;
    height: 100%;
    top: 0;
    @media (max-width: 740px) {
      display: none;
    }
    &.images--left {
      left: calc(50% - 74rem);
    }
    &.images--right {
      right: calc(50% - 74rem);
    }
    .img {
      position: absolute;
      border-radius: 1rem;
      overflow: hidden;
    }
    .img--left1 {
      width: 18rem;
      top: 0;
      left: 0;
    }
    .img--left2 {
      width: 16rem;
      top: 23.7rem;
      right: 0;
    }
    .img--left3 {
      width: 20rem;
      top: 48.5rem;
      left: 5rem;
    }
    .img--right1 {
      width: 18rem;
      top: 4.6rem;
      right: 0.5rem;
    }
    .img--right2 {
      width: 16rem;
      top: 30rem;
      left: 0;
    }
    .img--right3 {
      width: 25rem;
      top: 53rem;
      right: 0;
    }
  }
  .content {
    max-width: 60rem;
    margin: 0 auto;
    .info-title {
      font-size: 3.6rem;
      line-height: 1.4;
      margin-bottom: 4rem;
      letter-spacing: 0.1em;
      @media (max-width: 740px) {
        font-size: 3rem;
      }
    }
    .info-txt {
      display: flex;
      flex-direction: column;
      gap: 3.2rem;
      p {
        line-height: 2;
        font-weight: 500;
      }
    }
  }
}

.recruit-works {
  padding: 10rem 0 16rem;
  @media (max-width: 740px) {
    padding: 6rem 0 10rem;
  }
  .inner {
    position: relative;
    z-index: 1;
  }
  .obj {
    position: absolute;
    z-index: -1;
    width: 67rem;
    top: -46rem;
    left: -20rem;
    @media (max-width: 740px) {
      width: 46rem;
      top: -12rem;
      left: -26rem;
    }
  }
  .recruit-works__inner {
    display: flex;
    align-items: flex-end;
    gap: 10rem;
    @media (max-width: 740px) {
      flex-direction: column;
      gap: 4rem;
    }
  }
  .txt {
    width: 100%;
    max-width: 57rem;
    @media (max-width: 740px) {
      max-width: 100%;
    }
    p {
      line-height: 2.5;
      font-weight: 500;
      margin-bottom: 6rem;
      @media (max-width: 740px) {
        line-height: 2;
        margin-bottom: 4rem;
      }
    }
  }
  .img {
    width: 100%;
    max-width: 57rem;
    border-radius: 4rem;
    overflow: hidden;
    @media (max-width: 740px) {
      max-width: 100%;
      border-radius: 2rem;
    }
  }
}

.recruit-strength {
  padding: 10rem 0 16rem;
  border-radius: 4rem;
  background-color: var(--color-green);
  position: relative;
  z-index: 2;
  @media (max-width: 740px) {
    padding: 6rem 0 8rem;
    border-radius: 2rem;
  }
  .commonTit {
    color: var(--color-white);
    margin-bottom: 4.4rem;
  }
  .strength-list {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 4.4rem 2rem;
    counter-reset: item;
    @media (max-width: 740px) {
      grid-template-columns: repeat(1, 1fr);
    }
    .strength-item {
      grid-column: span 2;
      border-radius: 1rem;
      background-color: var(--color-white);
      padding: 6rem 2rem 4rem;
      display: flex;
      align-items: center;
      flex-direction: column;
      gap: 1.6rem;
      position: relative;
      @media (max-width: 740px) {
        grid-column: unset;
        width: 100%;
        padding: 4rem 1rem 3rem;
      }
      &::before {
        content: counter(item, decimal-leading-zero);
        counter-increment: item;
        width: 6rem;
        height: 6rem;
        border-radius: 50%;
        background-color: var(--color-green);
        outline: 2px solid var(--color-white);
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "Poppins", sans-serif;
        font-size: 2.7rem;
        font-weight: 900;
        color: var(--color-white);
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: -2rem;
        line-height: 1;
        letter-spacing: 0.04em;
        @media (max-width: 740px) {
          width: 5rem;
          height: 5rem;
          font-size: 2.2rem;
        }
      }
      .strength-item__title {
        font-size: 2.8rem;
        font-weight: bold;
        line-height: 1.4;
        text-align: center;
        @media (max-width: 740px) {
          font-size: 2.4rem;
        }
      }
      p {
        line-height: 1.6;
      }
      &.strength-item--large {
        grid-column: span 3;
        @media (max-width: 740px) {
          grid-column: unset;
        }
      }
    }
  }
  .video {
    max-width: 90rem;
    margin: 6rem auto 0;
    border-radius: 2rem;
    overflow: hidden;
  }
}

.recruit-interview {
  padding: 10rem 0 12rem;
  position: relative;
  @media (max-width: 740px) {
    padding: 6rem 0 8rem;
  }
  &::before {
    content: "";
    width: 100%;
    height: calc(100% + 4rem);
    background-color: #eaeff4;
    position: absolute;
    left: 0;
    top: -4rem;
    z-index: -1;
  }
  .title2 {
    margin-bottom: 4.4rem;
    @media (max-width: 740px) {
      margin-bottom: 3rem;
    }
  }
  .interviewSlider {
    overflow: visible;
    margin-left: -2rem;
    margin-right: -2rem;
    @media (max-width: 740px) {
      margin-left: -1rem;
      margin-right: -1rem;
      overflow-x: hidden;
    }
    .swiper-slide {
      max-width: 94rem;
      padding: 0 2rem;
      @media (max-width: 740px) {
        padding: 0 2rem;
      }
    }
    .swiper-pagination {
      position: static;
      margin-top: 3.6rem;
      @media (max-width: 740px) {
        margin-top: 2rem;
      }
      .swiper-pagination-bullet-active {
        background-color: var(--color-green);
      }
    }
  }
  .moreBtn {
    margin: 4rem auto 0;
  }
}

.interview-card {
  border-radius: 1rem;
  padding: 4rem;
  background-color: var(--color-white);
  display: flex;
  align-items: center;
  gap: 4rem;
  @media (max-width: 740px) {
    padding: 2rem;
    flex-direction: column;
    gap: 2rem;
  }
  .interview-card__img {
    width: 30rem;
    height: 20rem;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 1rem;
    background-color: rgba(157, 214, 224, 0.2);
    @media (max-width: 740px) {
      width: 100%;
      height: auto;
      aspect-ratio: 3 / 2;
    }
    img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
  }
  .interview-card__txt {
    width: 100%;
    .interview-card__title {
      font-size: 2.4rem;
      line-height: 1.5;
      font-weight: bold;
      margin-bottom: 2.4rem;
      @media (max-width: 740px) {
        font-size: 2rem;
        margin-bottom: 1.6rem;
      }
    }
    .interview-card__name {
      font-size: 1.4rem;
    }
    .moreBtn2 {
      margin: 2.4rem 3rem 0 auto;
    }
  }
  @media (any-hover: hover) {
    &:hover {
      .moreBtn2 {
        span {
          right: -3.9rem;
        }
      }
    }
  }
}

.recruit-benefit {
  padding: 10rem 0 12rem;
  background-color: var(--color-white);
  @media (max-width: 740px) {
    padding: 6rem 0 8rem;
  }
  .commonTit {
    margin-bottom: 4.4rem;
    @media (max-width: 740px) {
      margin-bottom: 3rem;
    }
  }
}

.benefit-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6rem 8rem;
  @media (max-width: 740px) {
    grid-template-columns: repeat(1, 1fr);
  }
  .benefit-item {
    @media (max-width: 740px) {
      padding: 0 1rem;
    }
    &:not(:last-child) {
      position: relative;
      &::after {
        content: "";
        width: 1px;
        height: 100%;
        background-color: #cdcdcd;
        position: absolute;
        right: -4rem;
        top: 0;
        @media (max-width: 740px) {
          width: 100%;
          height: 1px;
          right: unset;
          top: unset;
          left: 0;
          bottom: -3rem;
        }
      }
    }
    .img {
      border-radius: 1rem;
      overflow: hidden;
      margin-bottom: 1.6rem;
    }
    .benefit-item__title {
      text-align: center;
      font-size: 2.8rem;
      color: var(--color-green);
      font-weight: bold;
      line-height: 1.4;
      margin-bottom: 1.6rem;
      @media (max-width: 740px) {
        font-size: 2.4rem;
      }
    }
  }
}

.recruit-data {
  padding: 10rem 0 12rem;
  background-color: #eaeff4;
  .data-list {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 2rem;
    @media (max-width: 900px) {
      grid-template-columns: 1fr;
    }
    .data-list__item {
      @media (min-width: 901px) {
        grid-column: span 2;
      }
      &.data-list__item--large {
        @media (min-width: 901px) {
          grid-column: span 3;
        }
      }
    }
  }
  .data-hidden {
    height: 0;
    transition: height 0.5s;
    overflow: hidden;
    .data-hidden__inner {
      padding-top: 2rem;
    }
  }
  .data-more {
    margin: 2rem auto 0;
    width: 24rem;
    height: 6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-green);
    border-bottom: 2px solid var(--color-green);
    font-size: 2rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: 0.3s;
    position: relative;
    &::before,
    &::after {
      content: "";
      width: 1.2rem;
      height: 2px;
      background-color: var(--color-green);
      position: absolute;
      top: 50%;
      right: 1rem;
      transition: transform 0.3s;
    }
    &::before {
      transform: rotate(-90deg);
    }
    &::after {
      transform: rotate(-180deg);
    }
    &.active {
      &::before,
      &::after {
        transform: rotate(0deg);
      }
    }
  }
}

.data-card {
  border-radius: 2rem;
  background-color: var(--color-white);
  padding: 4rem;
  height: 100%;
  min-height: 34rem;
  @media (max-width: 740px) {
    padding: 2rem;
    min-height: unset;
  }
  .data-card__title {
    background-color: var(--color-green);
    border-radius: 0.5rem;
    text-align: center;
    font-size: 2.4rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    color: var(--color-white);
    padding: 1rem;
    line-height: 1;
    margin-bottom: 2rem;
    @media (max-width: 740px) {
      font-size: 2rem;
    }
  }
  .data-card__icon {
    height: 6rem;
    text-align: center;
    margin-bottom: 1rem;
    @media (max-width: 740px) {
      height: 5rem;
    }
    img {
      height: 100%;
      object-fit: contain;
    }
  }
  .data-card__num {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 0.5rem;
    white-space: nowrap;
    .font-poppins {
      font-size: 8.8rem;
      line-height: 1;
      font-weight: bold;
      @media (max-width: 740px) {
        font-size: 6rem;
      }
    }
    .unit {
      font-size: 4.8rem;
      font-weight: bold;
      line-height: 1.6;
      @media (max-width: 740px) {
        font-size: 3rem;
      }
    }
  }
  &.data-card--large {
    .data-card__title {
      margin-bottom: 4rem;
      @media (max-width: 740px) {
        margin-bottom: 2rem;
      }
    }
    .data-card__icon {
      height: 15rem;
      margin-bottom: 2rem;
      @media (max-width: 740px) {
        height: 10rem;
      }
      + .data-card__graph-num {
        gap: 4rem;
        @media (max-width: 740px) {
          gap: 3rem;
        }
        .data-card__graph-num__item {
          position: relative;
          &:not(:last-child) {
            &::after {
              content: "";
              width: 1px;
              height: 100%;
              background-color: #cdcdcd;
              position: absolute;
              right: -2rem;
              top: 0;
              @media (max-width: 740px) {
                right: -1.5rem;
              }
            }
          }
        }
      }
    }
  }
  .data-card__graph-num {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 2rem;
    @media (max-width: 740px) {
      gap: 1rem;
      margin-bottom: 1rem;
    }
    .data-card__num-value {
      .data-card__num {
        .font-poppins {
          font-size: 5rem;
          @media (max-width: 740px) {
            font-size: 4rem;
          }
        }
        .unit {
          font-size: 3rem;
          @media (max-width: 740px) {
            font-size: 2.4rem;
          }
        }
      }
    }
  }

  .data-card__num-wrap {
    .data-card__num-title {
      text-align: center;
      font-weight: bold;
      line-height: 1;
      font-size: 2rem;
      margin-bottom: 1rem;
      @media (max-width: 740px) {
        font-size: 1.8rem;
      }
    }
  }
  .data-card__column2 {
    display: flex;
    justify-content: center;
    gap: 3rem;
    margin-bottom: 1rem;
    .data-card__num {
      .font-poppins {
        font-size: 7rem;
        @media (max-width: 740px) {
          font-size: 6rem;
        }
      }
      .unit {
        font-size: 3rem;
        @media (max-width: 740px) {
          font-size: 2.4rem;
        }
      }
    }
  }
  .data-card__graph {
    height: 13.8rem;
    min-width: 13rem;
    display: flex;
    align-items: flex-end;
    margin-bottom: 2rem;
    @media (max-width: 740px) {
      min-width: 10rem;
    }
    .data-card__graph__item {
      height: calc(var(--value) / var(--full) * 100%);
      flex: 1;
    }
  }
  .recruit-yellow {
    .data-card__graph {
      .data-card__graph__item {
        background-color: var(--color-yellow);
      }
    }
  }
  .recruit-orange {
    .data-card__graph {
      .data-card__graph__item {
        background-color: var(--color-orange2);
      }
    }
  }
  .recruit-red {
    .data-card__graph {
      .data-card__graph__item {
        background-color: var(--color-red2);
      }
    }
  }
}

.job-info {
  padding: 12rem 0 10rem;
  @media (max-width: 740px) {
    padding: 6rem 0 8rem;
  }
  .job-info__inner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2rem;
    @media (max-width: 740px) {
      flex-direction: column;
      gap: 4rem;
    }
    .txt {
      max-width: 57rem;
      p {
        line-height: 2.5;
        margin-bottom: 6rem;
        @media (max-width: 740px) {
          line-height: 2;
          margin-bottom: 4rem;
        }
      }
    }
    .arrowDown {
      display: flex;
      align-items: center;
      height: 7.4rem;
      font-size: 2.4rem;
      font-weight: 500;
      border-bottom: 1px solid #cdcdcd;
      position: relative;
      transition:
        color 0.3s,
        border-color 0.3s;
      @media (max-width: 740px) {
        height: 6rem;
        font-size: 2rem;
      }
      &::after {
        content: "";
        width: 1rem;
        height: 1rem;
        border-bottom: 3px solid var(--color-green);
        border-right: 3px solid var(--color-green);
        transform: rotate(45deg);
        position: absolute;
        right: 2rem;
        top: 50%;
        transform: translateY(-55%) rotate(45deg);
      }
      @media (any-hover: hover) {
        &:hover {
          color: var(--color-green);
          border-color: var(--color-green);
        }
      }
    }
    .img {
      max-width: 55rem;
      border-radius: 4rem;
      overflow: hidden;
      @media (max-width: 740px) {
        max-width: 100%;
        border-radius: 2rem;
      }
    }
  }
}

.job-content {
  .job-content__img {
    border-radius: 2rem;
    overflow: hidden;
    margin-bottom: 2rem;
    @media (max-width: 740px) {
      border-radius: 1rem;
    }
  }
  .column-list {
    border-top: none;
    margin-bottom: 8rem;
    @media (max-width: 740px) {
      margin-bottom: 4rem;
    }
    .column-list__item {
      align-items: flex-start;
      .column-list__txt {
        padding-top: 0.5rem;
      }
    }
  }
}

.interview-info {
  padding: 8rem 0 6rem;
  @media (max-width: 740px) {
    padding: 6rem 0 4rem;
  }
  .title1 {
    margin-bottom: 6rem;
    @media (max-width: 740px) {
      margin-bottom: 4rem;
      font-size: 3rem;
    }
  }
}

.interview-content {
  .interview-num {
    font-family: "Inter", sans-serif;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 1.8rem;
    letter-spacing: 0.04em;
    line-height: 1.5;
    margin-bottom: 4rem;
    @media (max-width: 740px) {
      margin-bottom: 2rem;
    }
    .green {
      font-size: 2.4rem;
      font-weight: bold;
      margin-left: 0.5rem;
    }
  }
  .interview-header {
    display: flex;
    align-items: center;
    gap: 3.6rem;
    margin-bottom: 4rem;
    @media (max-width: 740px) {
      gap: 2rem;
      align-items: flex-start;
    }
    .img {
      width: 12rem;
      height: 12rem;
      border-radius: 1rem;
      overflow: hidden;
      flex-shrink: 0;
      background-color: #e4f0f2;
      @media (max-width: 740px) {
        width: 8rem;
        height: 8rem;
      }
    }
    .title3 {
      color: var(--color-black);
      margin-bottom: 6.8rem;
      @media (max-width: 740px) {
        margin-bottom: 2rem;
      }
    }
  }
  .interview-list {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }
  .interview-faq {
    border-radius: 1rem;
    background-color: var(--color-white);
    padding: 3rem;
    @media (max-width: 740px) {
      padding: 2.4rem 2rem;
    }
    .interview-faq__title {
      font-size: 2.4rem;
      font-weight: bold;
      line-height: 1.4;
      color: var(--color-green);
      padding-bottom: 2rem;
      margin-bottom: 2rem;
      border-bottom: 1px solid var(--color-green);
      @media (max-width: 740px) {
        font-size: 2rem;
        padding-bottom: 1.6rem;
        margin-bottom: 1.6rem;
      }
    }
  }
  &.bg-white {
    .interview-faq {
      background-color: #eaeff4;
    }
  }
}

.requirements-content {
  padding: 8rem 0 12rem;
  @media (max-width: 740px) {
    padding: 6rem 0 8rem;
  }
  .requirements-box {
    border-radius: 2rem;
    padding: 8rem 2rem;
    background-color: var(--color-white);
    @media (max-width: 740px) {
      padding: 4rem 2rem 6rem;
    }
    .requirements-box__inner {
      max-width: 100rem;
      margin-left: auto;
      margin-right: auto;
    }
    .requirements-box__title {
      font-size: 2.8rem;
      font-weight: 500;
      line-height: 1.4;
      margin-bottom: 5rem;
      @media (max-width: 740px) {
        font-size: 2.4rem;
        margin-bottom: 4rem;
      }
    }
  }
  .requirements-list {
    display: grid;
    grid-template-columns: 19rem 1fr;
    border-top: 1px solid #cdcdcd;
    @media (max-width: 740px) {
      grid-template-columns: 1fr;
    }
    .requirements-list__title {
      font-weight: bold;
      padding: 2rem 0;
      border-bottom: 1px solid #cdcdcd;
      @media (max-width: 740px) {
        padding-bottom: 1rem;
        border-bottom: none;
      }
    }
    .requirements-list__txt {
      padding: 2rem 0;
      border-bottom: 1px solid #cdcdcd;
      @media (max-width: 740px) {
        padding-top: 0;
      }
    }
  }
  .moreBtn {
    margin: 5rem auto 0;
    @media (max-width: 740px) {
      margin-top: 4rem;
    }
  }
}

.page-entry {
  .moreBtn {
    margin: 0 auto 6rem;
  }
  .form-birthday {
    display: flex;
    align-items: center;
    gap: 3rem;
    @media (max-width: 740px) {
      gap: 2rem;
    }
    &:has(.wpcf7-not-valid-tip) {
      .wpcf7-not-valid-tip {
        display: none !important;
      }
      + .birth-not-valid-tip {
        display: block !important;
      }
    }
    .form-birthday__item {
      display: flex;
      align-items: center;
      gap: 1rem;
      input {
        width: 8rem;
        padding-right: 0.6rem;
        @media (max-width: 740px) {
          width: 7rem;
        }
      }
      &.form-birthday__item--year {
        input {
          width: 10rem;
          @media (max-width: 740px) {
            width: 8rem;
          }
        }
      }
      .unit {
        font-weight: 500;
      }
    }
  }
}

/* 404 */

.page-notfound {
  .notfound-area {
    padding: 12rem 0 10rem;
    @media (max-width: 740px) {
      padding: 6rem 0 8rem;
    }
  }
  .moreBtn {
    margin: 0 auto;
  }
}