@charset "utf-8";

#mainvisual {
  margin:0 auto;
    text-align: left;
    overflow: hidden;
    position: relative;
    z-index: 3;
}
#mainvisual .swiper-wrapper{width:100vw;height:100vh;}
#mainvisual .slide-img{position:absolute;top:0;left:0;z-index:1;width:100vw;height:100vh;}
#mainvisual #mv01 .slide-img{background:url(../img/top/mv-pc01.jpg) no-repeat center center / cover;}
#mainvisual #mv02 .slide-img{background:url(../img/top/mv-pc02.jpg) no-repeat center center / cover;}
#mainvisual #mv03 .slide-img{background:url(../img/top/mv-pc03.jpg) no-repeat center center / cover;}
@keyframes zoomUp {
  0% {
    transform: scale(1.25);
  }
  100% {
    transform: scale(1);
  }
}

.swiper-slide-active .slide-img,
.swiper-slide-duplicate-active .slide-img,
.swiper-slide-prev .slide-img{
  animation: zoomUp 10s linear 0s 1 normal both;
}
#mainvisual .slide-img img{
  display: block;
}
#mainvisual blockquote{
  position: absolute;
  z-index: 10;
  display: block;
  bottom:12%;
  left:15%;
  margin: 0;
  width:90%;
  }
#mainvisual blockquote h2{
  color:#fff;
  /*font-size: 100px;*/
  font-size: 10vh;
  line-height: 110%;
  font-family: 'myfont', sans-serif;
  font-weight:normal;
  margin:20px auto;}
#mainvisual blockquote h3{font-size: 20px;font-size: 2vh;line-height: 160%;font-weight: normal;}
#mainvisual blockquote a.link-btn{
  text-align: center;
  max-width:512px;
  height:126px;
  margin-top:30px;
  display: block;
  background:rgba(255,255,255,0.8);
  border-radius: 10px;
  border: 1px solid #707070;
  padding-top:30px;
  font-size:23px;
  line-height:150%;
  color:#000;
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .9);
}
#mainvisual blockquote a.link-btn p{ font-weight: bold;}
#mainvisual blockquote a.link-btn small{font-size:15px;}
.swiper-pagination-bullet-active {
    opacity: 1;
    background: #fff;
}
.swiper-button-prev, .swiper-container-rtl .swiper-button-next{
    background: url(../img/y-left.svg) no-repeat center center / 60px auto;
    width:60px;
    height:60px;
    left: 15px;
    right: auto;}
  .swiper-button-next, .swiper-container-rtl .swiper-button-prev {
    background: url(../img/y-right.svg) no-repeat center center / 60px auto;
    width:60px;
    height:60px;
    right: 15px;
    left: auto;
    display: none;
  }

  .marquee {
  width:100%;
  padding:0.5em 0;
  overflow:hidden;
  background-color:#f6f6f6;
  margin-bottom:10px;
  position:relative;
  }

  .marquee p:after {
  content:"";
  white-space:nowrap;
  padding-right:0px;
  }

  .marquee p {
  margin:0;
  font-size:12px;
  padding-left:375px;
  display:inline-block;
  white-space:nowrap;
  	-webkit-animation-name:marquee;
  	-webkit-animation-timing-function:linear;
  	-webkit-animation-duration:25s;
  	-webkit-animation-iteration-count:infinite;
  	-moz-animation-name:marquee;
  	-moz-animation-timing-function:linear;
  	-moz-animation-duration:25s;
  	-moz-animation-iteration-count:infinite;
  	-ms-animation-name:marquee;
  	-ms-animation-timing-function:linear;
  	-ms-animation-duration:25s;
  	-ms-animation-iteration-count:infinite;
  	-o-animation-name:marquee;
  	-o-animation-timing-function:linear;
  	-o-animation-duration:25s;
  	-o-animation-iteration-count:infinite;
  	animation-name:marquee;
  	animation-timing-function:linear;
  	animation-duration:25s;
  	animation-iteration-count:infinite;
  }
  @-webkit-keyframes marquee {
    from   { -webkit-transform: translate(0%);}
    99%,to { -webkit-transform: translate(-100%);}
  }
  @-moz-keyframes marquee {
    from   { -moz-transform: translate(0%);}
    99%,to { -moz-transform: translate(-100%);}
  }
  @-ms-keyframes marquee {
    from   { -ms-transform: translate(0%);}
    99%,to { -ms-transform: translate(-100%);}
  }
  @-o-keyframes marquee {
    from   { -o-transform: translate(0%);}
    99%,to { -o-transform: translate(-100%);}
  }
  @keyframes marquee {
    from   { transform: translate(0%);}
    99%,to { transform: translate(-100%);}
  }

  .marquee {display: none;}

@media screen and (max-width:1520px) {
#mainvisual #mv01 blockquote h3 br.pc-none{display: block;}
}

@media screen and (max-width:1439px) {
  .marquee {
      position: absolute;
      z-index: 5;
      top: 83px;
      background: rgba(255,255,255,0.45);
      color: #070304;
      padding: 5px 5px 5px 0;
      display: block;
  }
}

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

  #mainvisual #mv01 .slide-img{background:url(../img/top/mv-sp01.jpg) no-repeat center center / cover;}
  #mainvisual #mv02 .slide-img{background:url(../img/top/mv-sp02.jpg) no-repeat center center / cover;}
  #mainvisual #mv03 .slide-img{background:url(../img/top/mv-sp03.jpg) no-repeat center center / cover;}
  .swiper-button-next, .swiper-container-rtl .swiper-button-prev,.swiper-button-prev, .swiper-container-rtl .swiper-button-next {display: none;}
  #mainvisual blockquote{bottom:20%;left:25px;}
  #mainvisual blockquote h2{font-size: 48px;}
  #mainvisual blockquote h3 {font-size:12px;}
  #mainvisual blockquote a.link-btn{
    width:100%;
    max-width: 330px;
    height:79px;
    padding-top:15px;
    font-size:14px;
  }
  #mainvisual blockquote a.link-btn small{font-size:10px;}
  #mainvisual #mv03 blockquote h2 small{font-size:25px;}
}

@media screen and (max-width:371px) {
    #mainvisual blockquote h2{margin: 50% auto;}
  #mainvisual #mv01 blockquote h2{margin: 60% auto 40%;}
}

@media screen and (max-width:321px) {
  #mainvisual blockquote a.link-btn{font-size:12px;}
  #mainvisual blockquote a.link-btn small{font-size:9px;}
  #mainvisual #mv01 blockquote h2 {font-size: 40px;}
}