@charset "UTF-8";
/* CSS Document */

body{
	background:#fffdde;
	background-repeat: repeat;
	background-size: 100%;
}

.slider {
  position: relative;
}
.slider_fade {
  width: 100%;
  position: relative;
	margin:0;
	z-index: 1;
	padding: 0 !important;
	height: 70vw
}

.slider_fade > li {
  position: absolute;
  z-index:10;
  top: 0;
  left: 0;
  opacity: 0;
  width: 100%;
  height: 100vh;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  animation: anime_slider_fade 6s 0s;
  animation-fill-mode: forwards;
}
.slider_fade li:nth-of-type(2) {
  animation-delay: 1s;
}
.slider_fade li:nth-of-type(3) {
  animation-delay: 2s;
}
.slider_fade li:nth-of-type(4) {
  animation-delay: 3s;
}
.slider_fade li:nth-of-type(5) {
  animation-delay: 4s;
}
.slider_fade li:nth-of-type(6) {
  animation-delay: 5s;
}

@keyframes anime_slider_fade {
  0% {
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    100% { opacity: 1 }
}



.slider_fade_2 {
  width: 100%;
  position: absolute;
	margin: 0;
	z-index: 2;
	top:0;
	padding: 0 !important
}

.slider_fade_2 > li {
  position: absolute;
  z-index:10;
  top: 0;
  left: 0;
  opacity: 0;
  width: 100%;
  height: 100vh;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  animation: anime_slider_fade_2 7s 0s;
  animation-fill-mode: forwards;
}
.slider_fade_2 li:nth-of-type(2) {
  animation-delay: 0;
}
.slider_fade_2 li:nth-of-type(3) {
  animation-delay: 2s;
}
.slider_fade_2 li:nth-of-type(4) {
  animation-delay: 3s;
}
.slider_fade_2 li:nth-of-type(5) {
  animation-delay: 4s;
}
.slider_fade_2 li:nth-of-type(6) {
  animation-delay: 5s;
}
.slider_fade_2 li:nth-of-type(7) {
  animation-delay: 6s;
}

@media screen and (min-width:783px) {
.slider_fade_2 li:nth-of-type(7) {
  animation-delay: 5s;
  width: 30%;
	margin: 53% auto 0;
	left: 0;
	right:0;
	list-style: none;
	
}
.slider_fade_2 li:nth-of-type(2) {
  width: 30%;
	margin: 64% auto 0;
	left: 0;
	right:0;
	list-style: none;
	
}
}
@media screen and (max-width:782px) {
 .slider_fade_2 li:nth-of-type(2) {
  width: 90%;
	margin: 130% auto 0;
	left: 0;
	right:0;
	list-style: none;
}
.slider_fade_2 li:nth-of-type(7) {
  animation-delay: 5s;
	width: 90%;
	margin: 122% auto 0;
	left: 0;
	right:0;
	list-style: none
}
.slider_fade {
  width: 100%;
  position: relative;
	margin:0;
	z-index: 1;
	padding: 0 !important;
	height: 130vw;
}
}


@keyframes anime_slider_fade_2 {
  0% {
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    100% { opacity: 1 }
}



.img-wrap {
  overflow: hidden;
  position: relative;
}

.img-wrap:before {
  animation: img-wrap 8s cubic-bezier(.4, 0, .2, 1) forwards;
  background: #fff;
  bottom:40%;
  content: '';
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top:45%;
  z-index: 1;
}
@media screen and (max-width:782px) {
.img-wrap:before {
  animation: img-wrap 8s cubic-bezier(.4, 0, .2, 1) forwards;
  background: #fff;
  bottom:43%;
  content: '';
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top:30%;
}
}


@keyframes img-wrap {
  60% {
    transform: translateX(10%);
  }
  100% {
    transform: translateX(100%);
  }
}


.MV{
  width:100%;
  position: relative;
	padding: 35% 0
}

.image {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  opacity: 0;
  background-size: cover;
  background-position: center center;
  animation: image-switch-animation 6.6s forwards;
animation-fill-mode: forwards !important
}

.src1 {
  background-image: url(../images/top_MV/slide01.png);
}
.src2 {
  background-image: url(../images/top_MV/slide02.png);
}
.src3 {
  background-image: url(../images/top_MV/slide03.png);
}
.src4 {
   background:rgba(0,0,0,0.00);

}


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

.MV{
	padding: 60% 0
}
.src1 {
  background-image: url(../images/top_MV/slide01_sp.png);
}
.src2 {
  background-image: url(../images/top_MV/slide02_sp.png);
}
.src3 {
  background-image: url(../images/top_MV/slide03_sp.png);
}
.src4 {
   background:rgba(0,0,0,0.00);
}
}



@keyframes image-switch-animation {
  0%{ opacity: 0;}
  10%{ opacity: 1;}
  29.5%{ opacity: 1;}
  30%{ opacity: 1;}
  100%{ opacity: 1;}
}

.image:nth-of-type(1) {
  animation-delay: 0s;
}
.image:nth-of-type(2) {
  animation-delay: 1s;
}
.image:nth-of-type(3) {
  animation-delay: 1.5s;
}
.image:nth-of-type(4) {
  animation-delay: 2s;
}
.image:nth-of-type(5) {
  animation-delay: 2.5s;
}






.cls-1 {
fill: none;
stroke: #212a42;
stroke-linecap: round;
stroke-miterlimit:50;
stroke-width: 96.38px;
}

.cls-2 {
fill: #212a42;
}

.fude{
	position: relative;
padding: 50% 0
}
.box{
width:44%;
margin: 0 auto;
	position: absolute;
	left:20%;
	bottom:36%
}


@media screen and (max-width:782px) {
.fude{
	position: relative;
padding: 60% 0
}
.box{
width: 68%;
margin: 0 auto;
	position: absolute;
	left:3%;
	bottom:8%
}
}



#layer_2 path{
fill:none;
stroke:#ffffff;
stroke-width: 200.38px;
stroke-dasharray: 1800px;
stroke-dashoffset: 1800px;
animation: line 3s 2s forwards;
}
@keyframes line{
0%{stroke-dashoffset: 1800px;}
100%{stroke-dashoffset: 0;}
}
@keyframes line {
  0% {
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    100% { opacity: 1 }
}



#layer_2 path.point{
animation: line 1s 2.4s forwards;
}

#layer_1{
mask: url(#out);
stroke: #212a42;
}

#mask path{
fill:none;
stroke:#ffffff;
stroke-width:7;
stroke-dasharray: 1800px;
stroke-dashoffset: 1800px;
animation: line 3s 0.4s forwards;
}
@keyframes line{
0%{stroke-dashoffset: 1800px;}
100%{stroke-dashoffset: 0;}
}


#text{
mask: url(#mask-wrapper);
fill: #212a42;
}


path{
 fill: #212a42;
}