@charset "UTF-8";

/*================================================
 *  25053 追加ここから over_write
 ================================================*/
/* 1920 ==>>10px */
.over_write {
  font-size: 0.5208333vw;
}

@media screen and (max-width: 750px) {

  /* 750 ==>>10px */
  .over_write {
    font-size: 1.33333vw;
  }
}

/*================================================
 *  about
 ================================================*/
.loop_swiper .swiper-wrapper {
  transition-timing-function: linear;
}


#about {
  background: url(../../assets/img/over/about_bg.png) no-repeat center bottom/cover;
  height: 119em;
  position: relative;
}

/* loop_swiper */
#about .loop_swiper {
  padding-top: 4em;
}

#about .loop_swiper .swiper-slide,
#about .loop_swiper .swiper-slide img {
  width: 203em;
}

#about .loop_swiper .swiper-slide {
  margin-right: 5em;
}

/* about_catch */
.about_catch {
  position: absolute;
  width: 62em;
  top: 20em;
  left: 7em;
}

.about_catch h2 {
  width: 22em;
  margin: 0 auto 8em;
}

.about_catch h2 .about_ttl02 {
  width: 18rem;
  margin: 3rem auto 0;
  display: block;
}

.about_catch p {
  font-size: 2.8em;
  color: #fff;
}

@media screen and (max-width: 750px) {
  #about {
    background: url(../../assets/img/over/about_bg_sp.png) no-repeat center top/cover;
    height: 148em;
  }

  #about .loop_swiper {
    padding-top: 4em;
  }

  #about .loop_swiper .swiper-slide,
  #about .loop_swiper .swiper-slide img {
    width: 150em;
  }

  #about .loop_swiper .swiper-slide {
    margin-right: 3em;
  }

  .about_catch {
    width: 63em;
    top: 15em;
    left: 50%;
    transform: translateX(-50%);
  }

  .about_catch h2 {
    width: 17em;
    margin: 0 auto 50em;
  }

  .about_catch h2 .about_ttl02 {
    width: 14em;
    margin: 3em auto 0;
  }

}

/*================================================
 *  about
 ================================================*/
#osusume {
  position: relative;
  padding: 7em 0 10em;
}

#osusume::before {
  position: absolute;
  content: "";
  width: 100%;
  height: calc(100% + 7em);
  left: 0;
  top: -7em;
  background: url(../../assets/img/over/osusume_bg.png) no-repeat center/cover;
  z-index: -1;
}

#osusume h2 {
  width: 55em;
  margin: 0 auto 6em;
}

#osusume ul {
  display: flex;
  justify-content: center;
}

#osusume ul li {
  width: 28em;
  margin-right: -4em;
  position: relative;
}

#osusume ul li:nth-child(even) {
  margin-top: 11em;
}

#osusume ul li:nth-child(2) {
  z-index: -1;
}


#osusume ul li:nth-child(5) {
  z-index: -1;
}

/* loop_swiper */
#osusume .loop_swiper {
  padding-top: 7em;
}

#osusume .loop_swiper .swiper-slide,
#osusume .loop_swiper .swiper-slide img {
  width: 196em;
}



@media screen and (max-width: 750px) {
  #osusume {
    padding: 10em 0 9em;
  }

  #osusume::before {
    height: calc(100% + 14em);
    top: -14em;
    background: url(../../assets/img/over/osusume_bg_sp.png) no-repeat center/cover;
  }

  #osusume h2 {
    width: 55em;
    margin: 0 auto 7.5em;
  }

  #osusume ul {
    position: relative;
    width: 66.6em;
    height: 68em;
    margin: 0 auto;
    display: block;
  }

  #osusume ul li {
    width: 29em;
    margin-right: 0;
    position: absolute;
  }

  #osusume ul li:nth-child(even) {
    margin-top: 0;
  }

  #osusume ul li:nth-child(1) {
    top: 1em;
    left: -1em;
  }

  #osusume ul li:nth-child(2) {
    top: 0;
    right: 3em;
    z-index: 1;
  }

  #osusume ul li:nth-child(3) {
    top: 50%;
    left: 46%;
    transform: translate(-50%, -50%);
  }

  #osusume ul li:nth-child(4) {
    bottom: 0;
    left: 0em;
    z-index: -1;
  }

  #osusume ul li:nth-child(5) {
    bottom: 7em;
    right: 0;
  }

  #osusume .loop_swiper .swiper-slide,
  #osusume .loop_swiper .swiper-slide img {
    width: 160em;
  }
}


/*================================================
 *  support
 ================================================*/
#support {
  background: url(../../assets/img/over/support_bg.png) no-repeat center top/cover;
  height: 100%;
  position: relative;
  padding: 10em 0;
}


#support h3 {
  width: 16.8em;
  margin-left: 20em;
}

#support h2 {
  width: 25em;
  margin: 7em auto 4em;
}

#support p {
  width: 80.5em;
  margin: 0 auto 15em;
}

#support ul {
  width: 132em;
  margin: 0 auto;
}

#support ul li {
  width: 64em;
}

#support ul li:not(:first-child) {
  margin-top: -36em;
}

#support ul li:nth-child(even) {
  margin-left: auto;
}

#support ul li:nth-child(1) span {
  height: 54em;
}

#support ul li:nth-child(2) span {
  height: 82.4em;
}

#support ul li:nth-child(3) span {
  height: 84.3em;
}

#support ul li:nth-child(4) span {
  height: 57.5em;
}

@media screen and (max-width: 750px) {
  #support {
    background: url(../../assets/img/over/support_bg_sp.png) no-repeat center top/cover;
    padding: 10em 0;
  }

  #support h3 {
    width: 12.5em;
    margin-left: 7em;
  }

  #support h2 {
    width: 25em;
    margin-bottom: 7em;
  }

  #support p {
    width: 44em;
    margin: 0 auto 4em;
  }

  #support ul {
    width: 61em;
  }

  #support ul li {
    width: 100%;
  }

  #support ul li:not(:first-child) {
    margin-top: 5em;
  }
}



/*================================================
 *  ani
 ================================================*/

/* fadeup */
.fadeup {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.8s ease;
}

.fadeup.started {
  opacity: 1;
  transform: translateY(0px);
}


.zoom img {
  opacity: 0;
  -webkit-transform-origin: 50% 80%;
  transform-origin: 50% 80%;
  -webkit-transition: opacity .4s ease, -webkit-transform 0s .4s cubic-bezier(0.54, 0.35, 0.17, 1.32);
  transition: opacity .4s ease, -webkit-transform 0s .4s cubic-bezier(0.54, 0.35, 0.17, 1.32);
  transition: opacity .4s ease, transform 0s .4s cubic-bezier(0.54, 0.35, 0.17, 1.32);
  transition: opacity .4s ease, transform 0s .4s cubic-bezier(0.54, 0.35, 0.17, 1.32), -webkit-transform 0s .4s cubic-bezier(0.54, 0.35, 0.17, 1.32);
  -webkit-transform: translateY(0.5rem) scale(0.6);
  transform: translateY(0.5rem) scale(0.6);
}

.zoom.started img {
  opacity: 1;
  -webkit-transform: translateY(0) scale(1);
  transform: translateY(0) scale(1);
  -webkit-transition: opacity .4s ease, -webkit-transform .4s cubic-bezier(0.54, 0.35, 0.17, 1.32);
  transition: opacity .4s ease, -webkit-transform .4s cubic-bezier(0.54, 0.35, 0.17, 1.32);
  transition: opacity .4s ease, transform .4s cubic-bezier(0.54, 0.35, 0.17, 1.32);
  transition: opacity .4s ease, transform .4s cubic-bezier(0.54, 0.35, 0.17, 1.32), -webkit-transform .4s cubic-bezier(0.54, 0.35, 0.17, 1.32);
}

.delay02-pc,
.delay02 {
  transition-delay: 0.2s;
}

.delay03-pc,
.delay03 {
  transition-delay: 0.3s;
}

.delay04-pc,
.delay04 {
  transition-delay: 0.4s;
}

.delay06 {
  transition-delay: 0.6s;
}


/* fadeLeft-width */
.fadeLeft-width span {
  display: block;
  width: 0;
  overflow: hidden;
  transition: width 1s ease;
  transition-delay: 1s;
}

.fadeLeft-width.started span {
  width: 100%;
}

.fadeLeft-width span img {
  display: block;
  height: 100%;
  width: auto;
  max-width: unset;
}



@media screen and (max-width: 750px) {}



/*================================================
 *  about
 ================================================*/


@media screen and (max-width: 750px) {}