@charset "UTF-8";
.fit-img {
  height: 70vw;
  max-height: 24rem;
}
@media (min-width: 992px) {
  .fit-img {
    height: 29.283vw;
  }
}
/* ==========================================================================
   MV
========================================================================== */
#mv {
  background: var(--color1);
  color: var(--white);
  position: relative;
  z-index: 1;
  overflow: hidden;
}
#mv .mv__inner {
  margin-top: 68px;
  height: calc(100vh - 68px);
  min-height: 365px;
  padding-top: 15vh;
  padding-bottom: 2.5vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
}
#mv .mv__inner .arrow-label {
  padding-left: 2rem;
}
#mv .mv__inner .arrow-label::before {
  left: 0;
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2221.275%22%20height%3D%223.867%22%20viewBox%3D%220%200%2021.275%203.867%22%3E%3Cpath%20d%3D%22M-20020.725%2C344.818H-20042v-1h18.725l-2.3-2.133.68-.734Z%22%20transform%3D%22translate(20042%20-340.951)%22%20fill%3D%22%23fff%22%20opacity%3D%220.801%22%2F%3E%3C%2Fsvg%3E%0A');
}
#mv .mv__inner .ttl {
  margin-top: 1rem;
  margin-bottom: 1rem;
  line-height: 1.5;
}
#mv .huge {
  font-size: 12.5vw;
  white-space: nowrap;
  line-height: 1.25;
  opacity: .3;
}
#mv .bg-video {
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  overflow: hidden;
}
#mv .bg-video::before {
  content: '';
  display: block;
  background: rgba(108, 108, 108, 0.3);
  mix-blend-mode: multiply;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transition: .6s cubic-bezier(.39, .575, .565, 1);
}
#mv .bg-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 767px) {
  #mv .mv__inner .ttl {
    font-size: 1.5rem;
    margin-top: .75rem;
    margin-bottom: .75rem;
  }
  #mv .mv__inner .h4 {
    font-size: 1rem;
  }
}
@media (min-width: 768px) {
  #mv .bg-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
/* ==========================================================================
   #reason
========================================================================== */
#reason {
  background: url(img/reason_bg.jpg) no-repeat left bottom / 100%;
  padding-bottom: 4rem;
  margin-bottom: -4rem;
}

#reason .imgBox {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-end;
  gap: .75rem;
  margin-bottom: 3rem;
}
#reason .imgBox figure .fit-img {
  height: 100%;
  max-height: initial;
}
#reason .imgBox figure.img1 {
  width: min(16em, 30%);
  aspect-ratio: 1/1;
  transform: translateY(60%);
}
#reason .imgBox figure.img2 {
  width: min(21.75em, 54%);
  aspect-ratio: 9/11;
}
#reason .imgBox figure.img3 {
  width: min(24em, 60%);
  aspect-ratio: 3/2;
  margin-left: auto;
}
@media (min-width: 768px) {
  #reason .reason-inner {
    padding: 10em 0 6em;
  }
}
@media (min-width: 992px) {
  #reason .txtBox {
    padding-top: 2rem;
  }
  #reason .imgBox {
    margin-top: 2rem;
    margin-bottom: 5rem;
  }
}

/* ==========================================================================
   #service
========================================================================== */
#service {
  color: var(--white);
  background: var(--color1);
  border-radius: 2rem;
  overflow: hidden;
}
#service .txtBox {
  position: relative;
  z-index: 3;
}
#service .imgBox {
  position: relative;
  z-index: 2;
}
#service .imgBox {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
#service .over img {
  width: 100%;
  height: 100%;
  object-fit: cover;
} 
@media (max-width: 767px) {
  #service .imgBox .btn {
    width: 100%;
  }
}
@media (max-width: 991px) {
  #service .over {
    width: 100vw;
    height: 24rem;
    margin-left: calc(((100vw - 100%)/2)*-1);
  } 
}
@media (min-width: 992px) {
  #service {
    border-radius: 3rem;
  }
  #service .txtBox .inner-content {
    padding-right: 5em;
  } 
  #service .over {
    height: 100%;
    margin-right: -3rem;
  } 
}


.service-items {
  margin-right: -7px;
  margin-left: -7px;
}
.service-items li {
  padding: 0 7px;
}
.service-items li span {
  display: block;
  font-weight: 700;
  line-height: 1.5;
  padding: 1em 3.5em 1em 1.5em;
  cursor: pointer;
  position: relative;
  transition: 0.2s cubic-bezier(0.61, 1, 0.88, 1);
}
.service-items li span::before {
  content: '';
  display: block;
  width: 20px;
  height: 4px;
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2219.139%22%20height%3D%223.848%22%20viewBox%3D%220%200%2019.139%203.848%22%3E%3Cpath%20d%3D%22M-20022.859%2C344.818H-20042v-1h16.779l-2.086-2.152.719-.7Z%22%20transform%3D%22translate(20041.998%20-340.97)%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  right: 1.5em;
  top: 50%;
  transform: translateY(-50%);
  transition: 0.2s cubic-bezier(0.61, 1, 0.88, 1);
}
.service-items li.current span,
.service-items li:hover span {
  background: var(--white);
  color: var(--color1);
}
.service-items li.current span::before,
.service-items li:hover span::before {
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2219.139%22%20height%3D%223.848%22%20viewBox%3D%220%200%2019.139%203.848%22%3E%3Cpath%20d%3D%22M-20022.859%2C344.818H-20042v-1h16.779l-2.086-2.152.719-.7Z%22%20transform%3D%22translate(20041.998%20-340.97)%22%20fill%3D%22%23378A8D%22%2F%3E%3C%2Fsvg%3E');
}



@media (max-width: 991px) {
  .service-list {
    margin-top: 7px;
    padding-top: 3.5em;
    position: relative;
  }
  .service-items {
    width: calc(100% + 14px);
    position: absolute;
    top: 0;
  }
  .service-items li.current {
    order: -1;
  }
  .service-items li:not(.current) {
    display: none;
  }
  .service-items li:not(.current) span {
    background: rgba(55,138,141,0.9);
    border-top: 1px solid rgba(255,255,255,0.1);
  }
  .service-items li.current span::before,
  .service-items li:hover span::before {
    width: 10px;
    height: 6px;
    background-image: url(../common/img/icon-arrow-down.svg);
  }
}
@media (min-width: 992px) {
  .service-items li {
    padding: 0 7px;
    margin-top: 14px;
    display: block !important;
  }
  .service-items span {
    border: 1px solid var(--white);
    border-radius: 3em;
  }
}


/* ==========================================================================
   #casestudy
========================================================================== */
#casestudy {
  position: relative;
}
#casestudy::before {
  content: '';
  display: block;
  background: var(--l-gray);
  position: absolute;
  top: 50%;
  right: 0;
  bottom: 0;
  left: 0;
}
#casestudy .viewmore {
  margin: 40px 0 30px;
}
@media (min-width: 768px) {
  #casestudy .viewmore {
    margin: 50px 0 0;
  }
}

/* ==========================================================================
   #news
========================================================================== */
#news .news {
  position: relative;
}
#news .news-block .lists, #news .news-block ul.s_eirList {
  margin-top: 15px;
  margin-bottom: 0;
}
@media (min-width: 992px) {
  #news .news-block .lists, #news .news-block ul.s_eirList {
    margin-top: 0;
  }
  #news .lists .list, #news .news-block ul.s_eirList li.s_eirList_item {
    padding: 1em 0;
    flex-wrap: wrap;
  }
  #news .lists .list a {
    display: block;
  }
  #news .lists .list .ttlBox, #news .news-block ul.s_eirList li.s_eirList_item .s_eirList_item_titleBox {
    flex: 0 0 100%;
    margin-top: .4em;
  }
}

/* ==========================================================================
   #recruit
========================================================================== */
#recruit {
  background: url(img/recruit_bg-txt.svg) no-repeat 2% 41% / 85%;
}
#recruit .fit-img {
  object-position: 50% 100%;
}
@media (max-width: 991px) {
  #recruit .fit-img {
      height: 50vw;
      max-height: 18rem;
  }
}

@media (min-width: 768px) {
  #recruit {
    background-position: 2% 10%;
    background-size: 85%;
  }
}
@media (min-width: 992px) {
  #recruit {
    background-size: 60%;
  }
  #recruit .row {
    padding-top: 3em;
    padding-bottom: 3em;
  }
}

/* ==========================================================================
   #corporate
========================================================================== */
#corporate {
  background: url(img/corporate_bg-txt.svg) no-repeat 98% 41% / 85%;
}
@media (max-width: 991px) {
  #corporate .fit-img {
      height: 50vw;
      max-height: 18rem;
  }
}

@media (min-width: 768px) {
  #corporate {
    background-position: 98% 10%;
    background-size: 85%;
  }
}
@media (min-width: 992px) {
  #corporate {
    background-size: 60%;
  }
  #corporate .row {
    padding-top: 3em;
    padding-bottom: 3em;
  }
}