@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: 15vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  opacity: .8;
}
#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 .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-txt_sp.svg) no-repeat left bottom / 100%;
  padding-bottom: 35vw;
  margin-bottom: -2.5vw;
}
#reason .reason-inner {
  height: 100%;
  position: relative;
}
#reason .imgBox {
  position: relative;
  z-index: -1;
}
#reason .imgBox figure {
  position: relative;
}
#reason .imgBox figure .fit-img {
  height: 85vw;
  object-position: 0 100%;
}
#reason .imgBox figure::before,
#reason .imgBox figure::after {
  content: '';
  width: 100%;
  height: 52%;
  position: absolute;
  left: 0;
}
#reason .imgBox figure::before {
  clip-path: polygon(100% 0, 0 0, 0 100%);
  background: #FFF;
  top: -1px;
}
#reason .imgBox figure::after {
  clip-path: polygon(100% 100%, 0 0, 0 100%);
  background: var(--color1);
  bottom: 0;
}

@media (max-width: 767px) {
  #reason .imgBox {
    margin: 0 0 60px;
  }
  #reason .imgBox figure {
    margin-top: -6em;
  }
}
@media (min-width: 768px) {
  #reason .reason-inner {
    padding: 10em 0 6em;
  }
  #reason .imgBox {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
  #reason .imgBox figure .fit-img {
    max-height: 49em;
  }
  #reason .imgBox figure::before {
    width: 80%;
    height: 100%;
    clip-path: polygon(0 0, 45% 0, 100% 100%, 0% 100%);
    opacity: .9;
    top: 0;
  }
  #reason .imgBox figure::after {
    width: 36%;
    height: 58%;
    clip-path: polygon(100% 0, 0% 100%, 100% 100%);
    left: auto;
    right: 0;
  }
}
@media (min-width: 992px) {
  #reason {
    background-image: url(img/reason_bg-txt.svg);
    padding-bottom: 10vw;
    margin-bottom: 0;
  }
  #reason .imgBox figure .fit-img {
    max-height: 51em;
  }
}

/* ==========================================================================
   #solution
========================================================================== */
#solution {
  color: var(--white);
  background: var(--color1);
}
#solution .txtBox {
  position: relative;
  z-index: 3;
}
#solution .imgBox {
  position: relative;
  z-index: 2;
}
#solution figure {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
}
#solution .over {
  height: 100%;
  position: relative;
}
#solution .over img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#solution .over::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
}
#solution .txtBox .over::before {
  background: var(--color1);
  opacity: 0.92;
}
#solution .imgBox .over::before {
  background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 20%, rgba(0,0,0,0) 100%);
  opacity: 0.9;
  mix-blend-mode: multiply;
}
#solution .imgBox {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

@media (max-width: 767px) {
  #solution .imgBox .btn {
    width: 100%;
  }
}
@media (max-width: 991px) {
  #solution .over {
    width: 100vw;
    margin-left: calc(((100vw - 100%)/2)*-1);
  } 
  #solution .imgBox {
    min-height: 34em;
  }
}
@media (min-width: 992px) {
  #solution .txtBox .inner-content {
    padding-right: 5em;
  } 
  #solution .imgBox .inner-content {
    padding-left: 5em;
  }
}


.solution-items {
  margin-right: -7px;
  margin-left: -7px;
}
.solution-items li {
  padding: 0 7px;
}
.solution-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);
}
.solution-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);
}
.solution-items li.current span,
.solution-items li:hover span {
  background: var(--white);
  color: var(--color1);
}
.solution-items li.current span::before,
.solution-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) {
  .solution-list {
    margin-top: 7px;
    padding-top: 3.5em;
    position: relative;
  }
  .solution-items {
    width: calc(100% + 14px);
    position: absolute;
    top: 0;
  }
  .solution-items li.current {
    order: -1;
  }
  .solution-items li:not(.current) {
    display: none;
  }
  .solution-items li:not(.current) span {
    background: rgba(55,138,141,0.9);
    border-top: 1px solid rgba(255,255,255,0.1);
  }
  .solution-items li.current span::before,
  .solution-items li:hover span::before {
    width: 10px;
    height: 6px;
    background-image: url(../common/img/icon-arrow-down.svg);
  }
}
@media (min-width: 992px) {
  .solution-items li {
    padding: 0 7px;
    margin-top: 14px;
    display: block !important;
  }
  .solution-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 {
    padding-bottom: 0;
  }
  #casestudy::before {
    bottom: 2.25em;
  }
  #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;
  }
}