@charset "UTF-8";

/* ==========================================================================
   MV
========================================================================== */
#mv {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--color1);
  position: relative;
  overflow: hidden;
}
#mv .mv__inner {
  padding: 10vh 6.5vw 0;
}
#mv .mv__inner .ttl {
  font-family: var(--font1);
  letter-spacing: .16em;
}
#mv .mv__inner .copy-img {
  text-align: center;
}
#mv .mv__inner .copy-img img {
  width: 50%;
}
#mv .mv__inner .copy {
  margin-top: 2em;
  line-height: 1.5;
}
#mv .mv__slider {
  position: absolute;
  top: 90px;
  right: 0;
  bottom: 0;
  left: 11.7vw;
}
#mv .mv__slider .clip,
#mv .mv__slider .slick-slider,
#mv .mv__slider .slick-list,
#mv .mv__slider .slick-track {
  width: 100%;
  height: 100%;
}
#mv ul.slick-dots {
  width: 100vw;
  padding: 0 20px;
  display: flex;
  justify-content: flex-end;
  list-style-type: none;
  color: #FFF;
  font-family: var(--font2);
  position: absolute;
  right: 0;
  bottom: 30px;
}
#mv ul.slick-dots li {
  flex-basis: 100%;
  max-width: 117px;
  padding: 0 5px;
  opacity: .5;
  position: relative;
  transition: opacity .2s;
}
#mv ul.slick-dots li:hover,
#mv ul.slick-dots li.slick-active {
  opacity: 1;
}
#mv ul.slick-dots button {
  width: 100%;
  background: none;
  font-size: .75rem;
  line-height: 1;
  text-align: center;
  padding: .75em 0;
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid currentColor;
  outline: none;
}
@media (min-width: 576px) {
  #mv .mv__slider {
    left: 16vw;
  }
}
@media (min-width: 768px) {
  #mv .mv__slider {
    left: 20vw;
  }
  #mv ul.slick-dots {
    bottom: 45px;
  }
}
@media (min-width: 992px) {
  #mv {
    min-height: 650px;
  }
  #mv .mv__inner {
    padding: 10vh 5vw 0;
  }
  #mv .mv__inner .copy {
    font-size: 1.143em;
  }
  #mv .mv__inner .copy-img {
    text-align: left;
  }
  #mv .mv__inner .copy-img img {
    width: 22.5%;
  }
  #mv .mv__slider {
    top: 120px;
    left: 30vw;
  }
  #mv ul.slick-dots {
    bottom: 60px;
  }
}
/* ==========================================================================
   Concept
========================================================================== */
@media (min-width: 768px) {
  #concept .imgBox {
    -ms-flex: 0 0 47%;
    flex: 0 0 47%;
    max-width: 47%;
  }
  #concept .txtBox {
    -ms-flex: 0 0 53%;
    flex: 0 0 53%;
    max-width: 53%;

    padding-left: 7.273%;
  }
  #concept .clip {
    height: 100%;
  }
}

/* ==========================================================================
   Reason
========================================================================== */
#reason .img2 {
  margin-top: -40px;
}
@media (max-width: 767px) {
  #reason .img2 {
    margin-right: calc(((100vw - 100%)/2)*-1);
    margin-left: 25%;
  }
}
@media (min-width: 768px) {
  #reason .txtBox {
    -ms-flex: 0 0 47%;
    flex: 0 0 47%;
    max-width: 47%;

    padding-right: 7.273%;
  }
  #reason .imgBox {
    -ms-flex: 0 0 53%;
    flex: 0 0 53%;
    max-width: 53%;
  }
  #reason .img1 {
    height: 25em;
  }
  #reason .img2 {
    height: 25em;
  }
}
@media (min-width: 992px) {
  #reason .img2 {
    margin-top: -50px;
  }
}

/* ==========================================================================
   Service
========================================================================== */
#service .txtBox {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
#service .img {
  aspect-ratio: 3/2;
}
#service .logo:not(.col-md-4) {
  margin: 1.5rem 0 -1rem;
}
@media (max-width: 767px) {
  #service .logo {
    margin: 1.5rem 0 -1rem;
  }
}
@media (min-width: 768px) {
  #service .img {
    aspect-ratio: 5/3;
  }
}

/* ==========================================================================
   News
========================================================================== */
#news .lists .list .ttl::before,
#news .lists .list a.title_link::before {
  border: 0;
  background-color: #FFF;
  right: 0;
}
@media (min-width: 768px) {
  #news .lists .list .entry__meta {
    margin-bottom: 0;
    flex: 0 0 auto;
  }
  #news .lists .list .txtBox {
    display: flex;
  }
  #news .lists .list .ttl .p {
    font-size: .875rem;
  }
}

/* ==========================================================================
   Contact
========================================================================== */
#contact .contact-menu {
  border-top: 1px solid var(--border1);
}
#contact .contact-menu .item {
  border-bottom: 1px solid var(--border1);
}
#contact .contact-menu .item a {
  padding: 1.75em 0;
}
#contact .contact-menu .item a::before {
  width: 3em;
  height: 3em;
  background-size: 4px;
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%224%22%20height%3D%228%22%20viewBox%3D%220%200%204%208%22%3E%3Cpath%20d%3D%22M15672.521%2C4424.471a.5.5%2C0%2C0%2C1-.38-.825l2.722-3.175-2.722-3.175a.5.5%2C0%2C0%2C1%2C.76-.65l3%2C3.5a.5.5%2C0%2C0%2C1%2C0%2C.65l-3%2C3.5A.5.5%2C0%2C0%2C1%2C15672.521%2C4424.471Z%22%20transform%3D%22translate(-15672.021%20-4416.471)%22%20fill%3D%22%2371675d%22%2F%3E%3C%2Fsvg%3E%0A');
}
#contact .contact-menu .item a span {
  margin-bottom: .75rem;
}
#contact .contact-menu .item a em {
  font-size: 1.125rem;
}
#contact .contact-menu .item a small {
  margin-top: .75rem;
}

@media (min-width: 992px) {
  #contact .contact-menu .item a em {
    font-size: 1.25rem;
  }
  #contact .contact-menu .item a em.num {
    font-family: var(--font2);
    font-size: 1.563rem;
    letter-spacing: .16em;
  }
  #contact .contact-menu .item a small {
    font-size: .875rem;
  }
}