@charset "utf-8";
#mv { position: relative; margin: 0 auto; -webkit-box-sizing: content-box; box-sizing: content-box; }
#mv { border-top: 1px solid #eee; }
#mv .slide-media { position: relative; overflow: hidden; }
#mv .slide-media img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }
#mv .swiper-button-prev,#mv .swiper-button-next { display: grid; place-content: center; width: 6.4rem; height: 6.4rem; cursor: pointer; -webkit-transition: var(--transition); transition: var(--transition); }
#mv .swiper-button-prev::before,#mv .swiper-button-next::before { position: absolute; top: 0; right: 0; bottom: 0; left: 0; content: ""; border-radius: 50%;
    -webkit-box-shadow: .8rem .8rem 1.2rem rgba(0, 0, 0, .05), -.8rem -.8rem 1.2rem #fff;;
            box-shadow: .8rem .8rem 1.2rem rgba(0, 0, 0, .05), -.8rem -.8rem 1.2rem #fff;;
}
#mv .swiper-button-prev::after,#mv .swiper-button-next::after { width: 1.2rem; height: 1.2rem; content: ""; border: solid var(--gry-color); border-width: 3px 3px 0 0; }
#mv .swiper-button-prev::after { margin-left: 0.4rem; -webkit-transform: rotate(-135deg); transform: rotate(-135deg); }
#mv .swiper-button-next::after { margin-right: 0.4rem; -webkit-transform: rotate(45deg); transform: rotate(45deg); }
#mv .swiper-button-disabled { pointer-events: none; opacity: 0; }
/*#mv { margin-bottom: 16rem; }*/
#mv .slide-media { height: 700px; }
@media screen and (max-width: 600px) {
}
@media screen and (min-width: 600px) and (max-width: 899px) {
}
@media screen and (min-width: 900px) and (max-width: 1089px) {
}
@media screen and (min-width: 1090px) and (max-width: 1189px) {
}
@media screen and (min-width: 1190px) and (max-width: 1289px) {
}
@media screen and (min-width: 1290px) and (max-width: 1389px) {
}
@media screen and (min-width: 1390px) and (max-width: 1489px) {
}
@media screen and (min-width: 1490px) and (max-width: 1589px) {
}
@media screen and (min-width: 1590px) and (max-width: 1689px) {
	#mv .slide-media { height: 750px; }
}
@media screen and (min-width: 1690px) {
	#mv .slide-media { height: 800px; }
}

#mv .slide-media img { -webkit-transition: 3s; transition: 3s; }
#mv .slide-media.clip { position: absolute; z-index: 1; top: 0; left: 0; width: 100%;
    -webkit-filter: contrast(1.1);
            filter: contrast(1.1);
    --stroke-width: 1.2rem;
    --out: 2.4rem;
    --in: calc(var(--out) + var(--stroke-width));
    -webkit-clip-path: polygon(var(--out) var(--out), calc(100% - var(--out)) var(--out), calc(100% - var(--out)) calc(100% - var(--out)), var(--out) calc(100% - var(--out)), var(--out) var(--in), var(--in) var(--in), var(--in) calc(100% - var(--in)), calc(100% - var(--in)) calc(100% - var(--in)), calc(100% - var(--in)) var(--in), var(--out) var(--in));
            clip-path: polygon(var(--out) var(--out), calc(100% - var(--out)) var(--out), calc(100% - var(--out)) calc(100% - var(--out)), var(--out) calc(100% - var(--out)), var(--out) var(--in), var(--in) var(--in), var(--in) calc(100% - var(--in)), calc(100% - var(--in)) calc(100% - var(--in)), calc(100% - var(--in)) var(--in), var(--out) var(--in));
}
#mv .swiper-slide { overflow: hidden; }
#mv .swiper-slide[class*=-active] .slide-media.clip img { -webkit-transform: scale(1.2); transform: scale(1.2); }
#mv .swiper-slide[class*=-prev] .slide-media img { -webkit-transform: translateX(80vw); transform: translateX(80vw); }
#mv .swiper-slide[class*=-next] .slide-media img { -webkit-transform: translateX(-80vw); transform: translateX(-80vw); }
#mv .fraction { position: absolute; z-index: 2; bottom: 80px; right: 4%; opacity: 0.7; }
#mv .content { position: absolute; z-index: 2; bottom: 80px; left: 4%; margin: auto; }
#mv .content { pointer-events: none; }
#mv .content-title { font-size: 3rem; line-height: 1.5; color: #fff; margin-bottom: 10px; font-weight: 700; }
#mv .content-text { font-size: 1.6rem; margin: 0 0 20px; color: #fff; font-weight: 700; }
#mv .content-button { font-size: 1.2rem; font-weight: bold; display: inline-block; color: #fff; transition: .3s; }
#mv .content-button::before { display: inline-block; width: 4rem; height: 1px; margin: -2px 1.6rem 0 0; content: ""; vertical-align: middle; background-color: #fff; transition: .3s;}
#mv .content-button:hover::before { width: 6rem; }
#mv .content.anm-started .content-button { pointer-events: auto; }
#mv .box-txt { background: var(--base-color); color: #fff; padding: 5px 20px; font-weight: 700; font-size: 1.2em; }

#mv .fraction { font-weight: bold; line-height: 1.2; color: #fff; font-family:'Roboto Condensed', sans-serif; font-weight:bold; }
#mv .fraction .current { font-size: 3.2rem; display: inline-block; overflow: hidden; line-height: 1.0;  }
#mv .fraction .current .num { display: inline-block; }
#mv .fraction .current .num.anm-started {
    -webkit-animation: mv-fraction 1s var(--easing);
            animation: mv-fraction 1s var(--easing);
}
#mv .fraction .total { vertical-align: 0.5em; }
#mv .fraction .total::before { content: " / "; }
#mv .marker { position: relative; display: inline-block;
-webkit-clip-path: inset(0 100% 0 0);
		clip-path: inset(0 100% 0 0);
}
#mv .marker::after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ""; background-color: #fff; }
#mv .anm-started .marker {
-webkit-animation: mv-marker 1s 0.5s both;
		animation: mv-marker 1s 0.5s both;
}
#mv .anm-started .marker::after {
-webkit-animation: mv-markerBg 1s 0.5s both;
		animation: mv-markerBg 1s 0.5s both;
}
#mv .anm-started .content-text .marker,
#mv .anm-started .content-text .marker::after {
-webkit-animation-delay: 0.6s;
		animation-delay: 0.6s;
}
#mv .anm-started .content-link .marker,
#mv .anm-started .content-link .marker::after {
-webkit-animation-delay: 0.7s;
		animation-delay: 0.7s;
}
#mv .anm-finished .marker {
-webkit-animation: mv-markerHide 0.5s both;
		animation: mv-markerHide 0.5s both;
 }
#mv .anm-finished .marker::after {
-webkit-clip-path: inset(0 0 0 100%);
		clip-path: inset(0 0 0 100%);
}

  @-webkit-keyframes mv-marker {
    60%, 100% {
      -webkit-clip-path: inset(0);
              clip-path: inset(0);
    }
  }

  @keyframes mv-marker {
    60%, 100% {
      -webkit-clip-path: inset(0);

              clip-path: inset(0);
    }
  }
  @-webkit-keyframes mv-markerBg {
    60% {
      -webkit-clip-path: inset(0);
              clip-path: inset(0);
    }
    100% {
      -webkit-clip-path: inset(0 0 0 100%);
              clip-path: inset(0 0 0 100%);
    }
  }
  @keyframes mv-markerBg {
    60% {
      -webkit-clip-path: inset(0);
              clip-path: inset(0);
    }
    100% {
      -webkit-clip-path: inset(0 0 0 100%);
              clip-path: inset(0 0 0 100%);
    }
  }
  @-webkit-keyframes mv-markerHide {
    0% {
      -webkit-clip-path: inset(0);
              clip-path: inset(0);
    }
    100% {
      -webkit-clip-path: inset(0 0 0 100%);
              clip-path: inset(0 0 0 100%);
    }
  }
  @keyframes mv-markerHide {
    0% {
      -webkit-clip-path: inset(0);
              clip-path: inset(0);
    }
    100% {
      -webkit-clip-path: inset(0 0 0 100%);
              clip-path: inset(0 0 0 100%);
    }
  }
  @-webkit-keyframes mv-fraction {
    0%, 100% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
      opacity: 1;
    }
    50% {
      -webkit-transform: translateY(-110%);
              transform: translateY(-110%);
      opacity: 1;
    }
    50.1% {
      -webkit-transform: translateY(110%);
              transform: translateY(110%);
      opacity: 0;
    }
  }
  @keyframes mv-fraction {
    0%, 100% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
      opacity: 1;
    }
    50% {
      -webkit-transform: translateY(-110%);
              transform: translateY(-110%);
      opacity: 1;
    }
    50.1% {
      -webkit-transform: translateY(110%);
              transform: translateY(110%);
      opacity: 0;
    }
  }

@media only screen and (max-width: 1024px) {
	#mv .slide-media { height: max(70vh, 70vw); }
	#mv .content { right: 6rem; left: 6rem; }
	#mv .content-title { font-size: 3.2rem; }
	#mv .content-text { font-size: 1.6rem; margin: 2.4rem 0; line-height: 1.7; }
	#mv .fraction { font-size: 1.2rem; right: 8%; bottom: 40px; }
}
@media only screen and (max-width: 599px) {
	html { font-size: 50%; }
}
@media only screen and (min-width: 600px) and (max-width: 899px) {
    #mv .content-title { font-size: 2.4rem; }
    #mv .content-text { font-size: 1.2rem; margin: 2.4rem 0;
    }
}
@media only screen and (min-width: 1025px) {
	.swiper-button-prev::before, .swiper-button-next::before {
	  -webkit-transition: var(--transition);
	  transition: var(--transition);
	}
	.swiper-button-prev:hover::before, .swiper-button-next:hover::before {
	  -webkit-transform: scale(1.2);
			  transform: scale(1.2);
	}
	#mv .content { left: 8%; }
	#mv .fraction { right: 6%; }
}
@media only screen and (min-width: 600px) {
}

/* アニメーション　画像拡大 zooom */
#mv .img-cover { overflow: hidden; }
#mv .zoom { transform: scale(1.05); }
/* アクティブになったらアニメーション開始 */
#mv .swiper-slide-active .zoom { animation: mvZoom 7s linear forwards; }
@keyframes mvZoom {
  from {
    transform: scale(1.15);
  }
  to {
    transform: scale(1.05);
  }
}

/*-- #mv -------------------------------------------------------------*/
#mv a         { resize: none; }
#mv a:link    { color:#fff; text-decoration: none; }
#mv a:visited { color:#fff; text-decoration: none; }
#mv a:hover   { color:#fff; text-decoration: none; }
#mv a:active  { color:#fff; text-decoration: none; }

.mainCopy { position: absolute; top: 20vh; left: 8%; z-index: 1; }
.mainCopy h2 { color: #fff; font-size: 4.2em; font-weight: 700; line-height: 1.5; }
.mainCopy h4 { color: #fff; font-size: 1.5em; font-weight: 700; line-height: 1.5; }
@media only screen and (max-width: 599px) {
	.mainCopy { position: absolute; top: 10vh; left: 10%; z-index: 1; }
	.mainCopy h2 { color: #fff; font-size: 2.5em; font-weight: 700; line-height: 1.5; }
	.mainCopy h4 { color: #fff; font-size: 0.9em; font-weight: 700; line-height: 1.5; }
}
@media only screen and (min-width: 599px) and (max-width: 899px) {
	.mainCopy { position: absolute; top: 15vh; left: 12%; z-index: 1; }
	.mainCopy h2 { color: #fff; font-size: 4.2em; font-weight: 700; line-height: 1.5; }
	.mainCopy h4 { color: #fff; font-size: 1.2em; font-weight: 700; line-height: 1.5; }
}
/*-- Scroll Down -------------------------------------------------------------*/
.scroll-down { position:absolute; left:2%; bottom:10px; z-index: 100; height: 100vh; background-position: 50% 50%; background-repeat: no-repeat; background-size: cover; }
.scroll-down:after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 80%; background: linear-gradient(180deg,rgba(#000, 0) 0, rgba(#000, .8) 80%, rgba(#000, .8) 100%); }
.scroll-down a { display: inline-block; position: absolute; right: 0; bottom: 0; left: 0; z-index: 2; width: 13px; padding: 10px 10px 110px; color: #fff; font-size: 11px; font-family:'Roboto Condensed', sans-serif; font-weight:bold; line-height: 1; letter-spacing: .2em; text-transform: uppercase; text-decoration: none; writing-mode: vertical-lr; transition: .2s; overflow: hidden; margin: auto; }
.scroll-down a:before { content: ''; position: absolute; bottom: 0; left: 50%; width: 1px; height: 100px; background: #ddd; }
.scroll-down a:after { content: ''; position: absolute; bottom: 0; left: 50%; width: 1px; height: 100px; background: #999; }
.scroll-down a:hover { opacity: .5; }
@media screen and (max-width: 600px) {
	.scroll-down a { font-size: 10px; }
}
#mvScrl a:after { animation: mvScrl01 2.0s cubic-bezier(1, 0, 0, 1) infinite; }
@keyframes mvScrl01 {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  50.1% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}