@charset "utf-8";

/*--------------------------------------------------*/
/*		https://
/*		/css/common.css
/*--------------------------------------------------*/
/*		$index
/*--------------------------------------------------*/
/*			$index......目次
/*			$reset......リセットcss
/*			$font.......ウェブフォントcss
/*			$layout.....全体のレイアウト
/*			$parts......共通パーツレイアウト
/*			$header.....ヘッダレイアウト
/*			$footer.....フッタレイアウト
/*--------------------------------------------------*/



/*--------------------------------------------------*/
/*			$slide1
/*--------------------------------------------------*/
#slide1 .slide1-fadeslide{position: relative; overflow: hidden; width: 100%; height: 100%; background-color: transparent;}
#slide1 .slide1-fadeslide:after{content: ""; position: absolute; left: 0; top: 0; z-index: 10; width: 10vw; height: 10vw; border-radius: 50%; box-shadow: 0px 0px 0px 99999px rgba(51,51,51,.5); animation: spotlight 20s linear infinite;}
#slide1 .slide1-fadeslide ul{position: relative; width: 100%; height: 100%;}
#slide1 .slide1-fadeslide li{position: absolute; overflow: hidden; left: 0; top: 0; width: 100%; height: 100%; text-indent: 100%; white-space: nowrap;}
#slide1 .slide1-fadeslide .slide1-1{opacity: 1; z-index: 8; background: url(/images/slide1-1.jpg) no-repeat center center; background-size: cover; animation: fadeslide1 20s ease infinite 8s;}
#slide1 .slide1-fadeslide .slide1-2{opacity: 1; z-index: 6; background: url(/images/slide1-2.jpg) no-repeat center center; background-size: cover; animation: fadeslide2 20s ease infinite 8s;}
#slide1 .slide1-fadeslide .slide1-3{opacity: 1; z-index: 4; background: url(/images/slide1-3.jpg) no-repeat center center; background-size: cover; animation: fadeslide3 20s ease infinite 8s;}
#slide1 .slide1-fadeslide .slide1-4{opacity: 0; z-index: 2; background: url(/images/slide1-4.jpg) no-repeat center center; background-size: cover; animation: fadeslide4 20s ease infinite 8s;}
#slide1 .slide1-logo{-webkit-justify-content: space-between; justify-content: space-between; position: absolute; left: 0; top: 0; z-index: 10000; width: 100%; height: 100%; background-color: #fff; animation: slide1Logo 2s ease forwards 6s;}
#slide1 .slide1-logo .slide1-logo1{opacity: 1; width: 30%; height: 0; background-color: #003d56; transform:skewX(20deg); animation: slide1Logo1 6s ease forwards;}
#slide1 .slide1-logo .slide1-logo2{opacity: 1; width: 30%; height: 0; background-color: #003d56; transform:skewX(20deg); animation: slide1Logo2 6s ease forwards;}
#slide1 .slide1-logo .slide1-logo3{opacity: 1; width: 30%; height: 0; background-color: #009eb8; -webkit-clip-path: polygon(20% 0%, 100% 0%, 40% 100%, 0 30%); clip-path: polygon(20% 0%, 100% 0%, 40% 100%, 0 30%); animation: slide1Logo3 6s ease forwards;}
#slide1 .slide-txt h1{font-size: 4.764vw; font-weight: 300; text-align: center; letter-spacing: .2em;}
#slide1 .slide-txt h2{padding-bottom: 1em; font-size: 2.380vw; font-weight: 300; text-align: center; letter-spacing: .1em;}
#slide1 .slide-txt p{text-align: center;}
@keyframes spotlight{
0%{left: 0; top: 0; width: 10vw; height: 10vw;}
20%{left: 20vw; top: 68vh; width: 20vw; height: 20vw;}
40%{left: 85vw; top: 30vh; width: 15vw; height: 15vw;}
60%{left: 70vw; top: 0vh; width: 15vw; height: 15vw;}
80%{left: 50vw; top: 68vh; width: 20vw; height: 20vw;}
100%{left: 0; top: 0; width: 10vw; height: 10vw;}
}
@keyframes fadeslide1{
0%,80%,100%{opacity: 1;}
20%,40%,60%{opacity: 0;}
}
@keyframes fadeslide2{
0%,20%,100%{opacity: 1;}
40%,60%,80%{opacity: 0;}
}
@keyframes fadeslide3{
0%,20%,40%{opacity: 1;}
60%,80%,100%{opacity: 0;}
}
@keyframes fadeslide4{
0%,80%,100%{opacity: 0;}
20%,40%,60%{opacity: 1;}
}
@keyframes slide1Logo{
0%{z-index: 10000; background-color: #fff;}
100%{z-index: 10; background-color: transparent;}
}
@keyframes slide1Logo1{
0%{opacity: 1; height: 0;}
20%{opacity: 1; height: 100%;}
80%{opacity: 1; height: 100%;}
100%{opacity: .1; height: 100%;}
}
@keyframes slide1Logo2{
0%{opacity: 1; height: 0;}
10%{opacity: 1; height: 0;}
40%{opacity: 1; height: 100%;}
80%{opacity: 1; height: 100%;}
100%{opacity: .1; height: 100%;}
}
@keyframes slide1Logo3{
0%{opacity: 1; height: 0;}
20%{opacity: 1; height: 0;}
30%{opacity: 1; height: 0;}
60%{opacity: 1; height: 80%;}
80%{opacity: 1; height: 80%;}
100%{opacity: .1; height: 80%;}
}


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

}



/*--------------------------------------------------*/
/*			$slide2
/*--------------------------------------------------*/
#slide2{position: relative; overflow: hidden; background: url(/images/slide2.jpg) no-repeat center center; background-size: cover;}
#slide2:after{content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url(/images/slide2-2.png) no-repeat center bottom; background-size: 100% auto; transform: perspective(0) translateZ(0); animation: slide2 5s ease-in-out infinite;}
#slide2 .slide-txt p:not(:last-child){padding-bottom: 1em;}
#slide2 .slide-txt ul{margin-bottom: 1.269vw;}
#slide2 .slide-txt li:not(:last-child){padding-bottom: 1em;}
#slide2 .slide-txt blockquote{display: inline-block; padding: 1.269vw; background-color: rgba(255,255,255,.7); color: #333; -webkit-clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);}

@keyframes slide2{
0%{top: 0; transform: perspective(0) translateZ(0);}
50%{top: 10%; transform: perspective(200px) rotateX(5deg);}
100%{top: 0; transform: perspective(0) translateZ(0);}
}

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

}



/*--------------------------------------------------*/
/*			$slide3
/*--------------------------------------------------*/
#slide3{background: url(/images/slide3.jpg) no-repeat center center; background-size: cover;}
#slide3 .slide-txt .slide-tit dd h1 span:before,#slide3 .slide-txt .slide-tit dd h1 span:after{content: none;}
#slide3 .slide-txt .slide-tit dd h1 span{display: inline-block;}
#slide3 .slide-txt .slide-tit dd h1 span:nth-child(1){opacity:0; left: -1em; top: -1em; transform: rotate(-250deg);}
#slide3 .slide-txt .slide-tit dd h1 span:nth-child(2){opacity:0; left: 1em; top: 1em; transform: rotate(-200deg);}
#slide3 .slide-txt .slide-tit dd h1 span:nth-child(3){opacity:0; left: .5em; top: -.5em; transform: rotate(-300deg);}
#slide3 .slide-txt .slide-tit dd h1 span:nth-child(4){opacity:0; left: 2em; top: -2em; transform: rotate(-350deg);}
#slide3 .slide-txt .slide-tit dd h1 span:nth-child(5){opacity:0; left: .5em; top: .5em; transform: rotate(-150deg);}
#slide3 .slide-txt .slide-tit dd h1 span:nth-child(6){opacity:0; left: -1em; top: 1em; transform: rotate(-100deg);}
#slide3 .slide-txt .slide-tit dd h1 span:nth-child(7){opacity:0; left: -.8em; top: -.8em; transform: rotate(-280deg);}
#slide3 .slide-txt .slide-tit dd h1 span:nth-child(8){opacity:0; left: 2em; top: 1.5em; transform: rotate(-50deg);}
#slide3 .slide-txt .slide-tit dd h1 span:nth-child(9){opacity:0; left: -1em; top: -.5em; transform: rotate(-90deg);}
#slide3 .slide-txt .slide-tit dd h1 span:nth-child(10){left: 1.5em; top: -1.5em; transform: rotate(-300deg);}
#slide3.on .slide-txt .slide-tit dd h1 span:nth-child(1){animation: ordermade1 1s linear forwards;}
#slide3.on .slide-txt .slide-tit dd h1 span:nth-child(2){animation: ordermade2 1s linear forwards;}
#slide3.on .slide-txt .slide-tit dd h1 span:nth-child(3){animation: ordermade3 1s linear forwards;}
#slide3.on .slide-txt .slide-tit dd h1 span:nth-child(4){animation: ordermade4 1s linear forwards;}
#slide3.on .slide-txt .slide-tit dd h1 span:nth-child(5){animation: ordermade5 1s linear forwards;}
#slide3.on .slide-txt .slide-tit dd h1 span:nth-child(6){animation: ordermade6 1s linear forwards;}
#slide3.on .slide-txt .slide-tit dd h1 span:nth-child(7){animation: ordermade7 1s linear forwards;}
#slide3.on .slide-txt .slide-tit dd h1 span:nth-child(8){animation: ordermade8 1s linear forwards;}
#slide3.on .slide-txt .slide-tit dd h1 span:nth-child(9){animation: ordermade9 1s linear forwards;}
#slide3.on .slide-txt .slide-tit dd h1 span:nth-child(10){animation: ordermade10 1s linear forwards;}

@keyframes ordermade1{
0%{opacity: 0; left: -1em; top: -1em; transform: rotate(-250deg);}
100%{opacity: 1; left: 0; top: 0; transform: rotate(0);}
}
@keyframes ordermade2{
0%{opacity: 0;left: 1em; top: 1em; transform: rotate(-200deg);}
100%{opacity: 1; left: 0; top: 0; transform: rotate(0);}
}
@keyframes ordermade3{
0%{opacity: 0;left: .5em; top: -.5em; transform: rotate(-300deg);}
100%{opacity: 1; left: 0; top: 0; transform: rotate(0);}
}
@keyframes ordermade4{
0%{opacity: 0;left: 2em; top: -2em; transform: rotate(-350deg);}
100%{opacity: 1; left: 0; top: 0; transform: rotate(0);}
}
@keyframes ordermade5{
0%{opacity: 0;left: .5em; top: .5em; transform: rotate(-150deg);}
100%{opacity: 1; left: 0; top: 0; transform: rotate(0);}
}
@keyframes ordermade6{
0%{opacity: 0;left: -1em; top: 1em; transform: rotate(-100deg);}
100%{opacity: 1; left: 0; top: 0; transform: rotate(0);}
}
@keyframes ordermade7{
0%{opacity: 0;left: -.8em; top: -.8em; transform: rotate(-280deg);}
100%{opacity: 1; left: 0; top: 0; transform: rotate(0);}
}
@keyframes ordermade8{
0%{opacity: 0;left: 2em; top: 1.5em; transform: rotate(-50deg);}
100%{opacity: 1; left: 0; top: 0; transform: rotate(0);}
}
@keyframes ordermade9{
0%{opacity: 0;left: -1em; top: -.5em; transform: rotate(-90deg);}
100%{opacity: 1; left: 0; top: 0; transform: rotate(0);}
}
@keyframes ordermade10{
0%{opacity: 0;left: 1.5em; top: -1.5em; transform: rotate(-300deg);}
100%{opacity: 1; left: 0; top: 0; transform: rotate(0);}
}


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

}



/*--------------------------------------------------*/
/*			$slide4
/*--------------------------------------------------*/
#slide4{background: url(/images/slide4.jpg) no-repeat center center #0bd; background-size: cover; background-blend-mode: multiply;}
#slide4:before{opacity:0; content: ""; position: absolute; left: 0; top: 0; z-index: 5; width: 100%; height: 100%; background: #fff; filter: blur(100px);}
#slide4.on:before{animation: blur 1s ease-in forwards;}
@keyframes blur{
0%{opacity: 0; filter: blur(100px);}
100%{opacity:1; filter: blur(0);}
}
@media screen and (max-width: 768px) {

}



/*--------------------------------------------------*/
/*			$slide5
/*--------------------------------------------------*/
#slide5{background: url(/images/slide5.jpg) no-repeat center center; background-size: cover;}

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

}