@charset "UTF-8";

/*
=============================================
基本設定　iphon SE の縦構え(portrait)
規定端末：IPhon SE の porterait
=============================================*/
html, body{
overflow: hidden;
}
nav{
position: fixed;
top: 0;
right: auto;
bottom: auto;
left: 0;
z-index: -1;
height: 100vh;
width: 100vw;
background-size: cover;
}
nav img{
height: 100%;
width: 100%;
}

body{
background-color: rgba(83,50,254,1.00);
animation: bg-color 0.3s infinite;
-webkit-animation: bg-color 0.3s infinite;
}
@-webkit-keyframes bg-color {
  0% { background-color: rgba(#2c2ccc); }
  99% { background-color: rgba(83,50,254,1.00); }
  100% { background-color: rgba(80,45,255,1.00); }
}
@keyframes bg-color {
  0% { background-color: rgba(83,50,254,1.00); }
  99% { background-color: rgba(80,45,255,1.00); }
  100% { background-color: rgba(83,50,254,1.00); }
}
header{
display: flex;
justify-content: center;
align-items: center;
text-align: center;
animation-name: ntopiphone5;
animation-delay: 3s;
animation-duration: 2s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
header figure{
display: flex;
justify-content: center;
align-items: center;
text-align: center;
width: 60vw;
height: auto;
}
header figure img{
width: 300px;
height: auto;
padding-top: 140px;
}
aside{
font-family: 'DotGothic16', sans-serif;
font-size: 1rem;
color: #ffffff;
line-height: 1.2;
text-align: start;
padding-left: 5px;
padding-top: 200px;
}
aside h3{
display: flex;
}
aside h3 p{
padding: 0 10px;
}
article{
padding-top: 200px;
font-family: 'DotGothic16', sans-serif;
font-size: 1rem;
color: #ffffff;
line-height: 0.5;
text-align: center;
display: flex;
justify-content: center;
}
article h4{
display: flex;
text-align: center;
}
article h5{
text-align: end;
margin-top:-4px;
}
section{
margin-top: -60px;
padding-bottom: 180px;
font-family: 'DotGothic16', sans-serif;
font-size: 1.3rem;
color: #ffffff;
line-height: 1.5;
text-align: center;
display: block;
justify-content: center;
}
section h6{
padding-left: 10vw;
text-align: start;
padding-top: 60px;
font-size: 1.5rem;
}
section p{
margin-left: 10vw;
font-size: 1.5rem;
text-align: start;
line-height: 2;
width: 200px;
}
section p:nth-of-type(1){
width: 150px;
}
section p:nth-of-type(3){
width: 140px;
}
section p:nth-of-type(1),section p:nth-of-type(4){
padding-top: 30px;
}
section a:active{
background-color: rgba(254,255,0,1.00);
color: rgba(136,7,217,1.00);
}
.p:active~.select::after{
margin-left: 20px;
content: "E";
}
.p:active~.select img{
margin-right: -60px;
padding-left: 30px;
}
.w:active~.select::after{
margin-left: 20px;
content: "S";
}
.w:active~.select img{
margin-right: -60px;
padding-left: 30px;
}
.a:active~.select::after{
margin-left: 20px;
content: "D";
}
.a:active~.select img{
margin-right: -60px;
padding-left: 30px;
}

section a{
margin: 0;
padding: 0;
text-decoration: none;
color: #ffffff;
}
section img{
width: 14px;
height: 20px;
margin-bottom: 6px;
}



@keyframes ntop{
0%{margin-top: 0px;}
5%{margin-top: -130px;}
10%{margin-top: -246px;}
15%{margin-top: -369px;}
20%{margin-top: -492px;}
25%{margin-top: -615px;}
30%{margin-top: -738px;}
35%{margin-top: -861px}
40%{margin-top: -984px;}
45%{margin-top: -1107px;}
50%{margin-top: -1230px;}
55%{margin-top: -1353px;}
60%{margin-top: -1476px;}
65%{margin-top: -1599px;}
70%{margin-top: -1722px;}
75%{margin-top: -1845px;}
80%{margin-top: -1968px;}
85%{margin-top: -2091px;}
90%{margin-top: -2214px;}
95%{margin-top: -2337px;}
100%{margin-top: -2600px;}
}

@keyframes ntopiphone5{
0%{margin-top: 0px;}
5%{margin-top: -67px;}
10%{margin-top: -134px;}
15%{margin-top: -201px;}
20%{margin-top: -268px;}
25%{margin-top: -335px;}
30%{margin-top: -402px;}
35%{margin-top: -469px}
40%{margin-top: -536px;}
45%{margin-top: -603px;}
50%{margin-top: -670px;}
55%{margin-top: -737px;}
60%{margin-top: -804px;}
65%{margin-top: -871px;}
70%{margin-top: -938px;}
75%{margin-top: -1005px;}
80%{margin-top: -1072px;}
85%{margin-top: -1139px;}
90%{margin-top: -1206px;}
95%{margin-top: -1273px;}
100%{margin-top: -1340px;}
}

@keyframes ntopiphone7{
0%{margin-top: 0px;}
5%{margin-top: -75px;}
10%{margin-top: -150px;}
15%{margin-top: -225px;}
20%{margin-top: -300px;}
25%{margin-top: -375px;}
30%{margin-top: -450px;}
35%{margin-top: -525px}
40%{margin-top: -600px;}
45%{margin-top: -675px;}
50%{margin-top: -750px;}
55%{margin-top: -825px;}
60%{margin-top: -900px;}
65%{margin-top: -975px;}
70%{margin-top: -1050px;}
75%{margin-top: -1125px;}
80%{margin-top: -1200px;}
85%{margin-top: -1275px;}
90%{margin-top: -1350px;}
95%{margin-top: -1425px;}
100%{margin-top: -1500px;}
}

@keyframes ntopiphone10{
0%{margin-top: 0px;}
5%{margin-top: -90px;}
10%{margin-top: -180px;}
15%{margin-top: -270px;}
20%{margin-top: -360px;}
25%{margin-top: -450px;}
30%{margin-top: -540px;}
35%{margin-top: -639px}
40%{margin-top: -720px;}
45%{margin-top: -810px;}
50%{margin-top: -900px;}
55%{margin-top: -990px;}
60%{margin-top: -1080px;}
65%{margin-top: -1170px;}
70%{margin-top: -1260px;}
75%{margin-top: -1350px;}
80%{margin-top: -1440px;}
85%{margin-top: -1530px;}
90%{margin-top: -1620px;}
95%{margin-top: -1710px;}
100%{margin-top: -1800px;}
}

@keyframes ntopipadpro{
0%{margin-top: 0px;}
5%{margin-top: -147.5px;}
10%{margin-top: -295px;}
15%{margin-top: -442.5px;}
20%{margin-top: -590px;}
25%{margin-top: -737.5px;}
30%{margin-top: -885px;}
35%{margin-top: -1032.5px}
40%{margin-top: -1180px;}
45%{margin-top: -1327.5px;}
50%{margin-top: -1475px;}
55%{margin-top: -1622.5px;}
60%{margin-top: -1770px;}
65%{margin-top: -1917.5px;}
70%{margin-top: -2065px;}
75%{margin-top: -2212.5px;}
80%{margin-top: -2360px;}
85%{margin-top: -2507.5px;}
90%{margin-top: -2655px;}
95%{margin-top: -2802.5px;}
100%{margin-top: -2950px;}
}

@keyframes ntopfull{
0%{margin-top: 0px;}
5%{margin-top: -175px;}
10%{margin-top: -350px;}
15%{margin-top: -525px;}
20%{margin-top: -700px;}
25%{margin-top: -875px;}
30%{margin-top: -1050px;}
35%{margin-top: -1225px}
40%{margin-top: -1400px;}
45%{margin-top: -1575px;}
50%{margin-top: -1750px;}
55%{margin-top: -1925px;}
60%{margin-top: -2100px;}
65%{margin-top: -2275px;}
70%{margin-top: -2450px;}
75%{margin-top: -2625px;}
80%{margin-top: -2800px;}
85%{margin-top: -2975px;}
90%{margin-top: -3150px;}
95%{margin-top: -3325px;}
100%{margin-top: -3500px;}
}






/*
=============================================
横幅360px以上
想定端末　:iPhon12mini/Androidのportrait
=============================================*/
@media screen and (min-width:360px){
header figure img{
padding-top: 180px;
}	
	
	
	
}
/*横幅360px ここまで*/

/*
=============================================
横幅360px以上
想定端末　:iPhon12のportrait
=============================================*/
@media screen and (min-width:390px){
header figure img{
width: 400px;
}	
aside{
font-size: 1.3rem;
}	
article{
padding-top: 100px;
font-size: 1.3rem;
}
article h5{
margin-top:-5px;
}
section{
margin-top: -70px;
font-size: 1.7rem;
}
section img{
margin-bottom: 12px;
}
header{
animation-name: ntopiphone7;
}
section h6{
font-size: 1.9rem;
}
section p{
font-size: 1.9rem;
line-height: 2.5;
}
	
}
/*横幅390px ここまで*/

/*============================================
高さ800px以上
想定端末　:iPadXのportrait
============================================
*/
@media screen and (min-height:800px){
header figure img{
padding-top: 230px;
width: 350px;
}
aside{
font-size: 1.3rem;
padding-top: 500px;
}
header{
animation-name: ntopiphone10;
}
article{
padding-top: 150px;
font-size: 1.2rem;
}
article h5{
margin-top:-5px;
}
section{
margin-top: -70px;
font-size: 1.6rem;
}
section h6{
font-size: 1.8rem;
}
section p{
font-size: 1.9rem;
line-height: 2.5;
}
section img{
margin-bottom: 12px;
}

}

/*スマートフォン縦（Portrait）ここまで----------------------------*/

/*スマートフォン横（Landscape）ここから----------------------------*/

/*
=============================================
横幅568px以上
想定端末　:iPhonSE(初期)のLandscape
=============================================
*/
@media screen and (min-width:568px){
	
	
	
	
}
/*横幅568px ここまで*/



/*
=============================================
横幅780px以上
想定端末　:iPhon12miniのLandscape
============================================
*/
@media screen and (min-width:780px){
	

}

/*スマートフォン横（Landscape）ここまで----------------------------*/
/*タブレット縦（portrait）ここから----------------------------*/
/*============================================
横幅768px以上
想定端末　:iPad9.7のportrait
============================================
*/
@media screen and (min-width:768px){
header figure img{
padding-top: 250px;
width: 500px;
}
aside{
font-size: 2.3rem;
padding-top: 500px;
}
aside h3 p{
padding: 0 30px;
}
header{
animation-name: ntop;
}
article{
padding-top: 150px;
font-size: 2.3rem;
}
article h5{
margin-top:-11px;
}
section{
margin-top: -120px;
font-size: 3rem;
}
section h6{
font-size: 3rem;
padding-top: 90px;
}
section p{
font-size: 3rem;
}
section img{
width: 24px;
height: 30px;
margin-bottom: 21px;
}

}
/*横幅768px以上かつ高さ500px以上ここまで----------------------------*/


/*タブレット縦（Portrait）ここまで----------------------------*/
/*タブレット横（Landscape）ここから----------------------------*/
/*============================================
横幅1024px以上かつたて構え
想定端末　:iPadproのPortrait
============================================
*/
@media screen and (min-width:1024px) and (orientation:portrait){	
header figure img{
padding-top: 350px;
width: 600px;
}
aside{
font-size: 2.5rem;
}
aside h3 p{
padding: 0 30px;
}
article{
font-size: 3rem;
padding-top: 200px;
}
article h5{
margin-top:-15px;
}
section{
margin-top: -150px;
}
section h6{
padding-top: 120px;
}
header{
animation-name: ntopipadpro;
}


}

/*ipadたて*/
@media screen and (min-width:1024px) and (orientation:landscape){
header{
animation-name: ntop;
padding-top: 0;
}
header figure img{
width: 600px;
padding-top: 140px;
}
aside{
font-size: 2.5rem;
line-height: 1.2;
padding-left: 50px;
padding-top: 300px;
}
aside h3 p{
padding: 0 40px;
}
article{
padding-top: 200px;
font-size: 3rem;
line-height: 0.5;
}
article h5{
margin-top: -15px;
}
section{
margin-top: -170px;
padding-bottom: 70px;
font-size: 4rem;
line-height: 1.5;
}
section h6{
padding-left: 10vw;
padding-top: 130px;
font-size: 3rem;
}
section p{
margin-left: 10vw;
font-size: 3rem;
line-height: 2;
width: 200px;
}
section p:nth-of-type(1){
width: 150px;
}
section p:nth-of-type(3){
width: 140px;
}
section p:nth-of-type(1),section p:nth-of-type(4){
padding-top: 30px;
}
section a:hover{
background-color: rgba(254,255,0,1.00);
color: rgba(136,7,217,1.00);
}
.p:hover~.select::after{
margin-left: 20px;
content: "P";
}
.p:hover~.select img{
margin-right: -60px;
padding-left: 30px;
}
.w:hover~.select::after{
margin-left: 20px;
content: "W";
}
.w:hover~.select img{
margin-right: -60px;
padding-left: 30px;
}
.a:hover~.select::after{
margin-left: 20px;
content: "A";
}
.a:hover~.select img{
margin-right: -60px;
padding-left: 30px;
}

section a{
margin: 0;
padding: 0;
text-decoration: none;
color: #ffffff;
}
section img{
width: 24px;
height: 30px;
margin-bottom: 13px;
}

}





/*タブレット横（Landscape）ここまで----------------------------*/
/*PCここから マウスあり　-----------------------------------------*/
/*============================================
横幅1366px以上
想定端末:PC
============================================
*/
@media screen and (min-width:1366px) {


header{
animation-name: ntop;
padding-top: 0;
}
header figure img{
width: 600px;
padding-top: 140px;
}
aside{
font-size: 2.5rem;
line-height: 1.2;
padding-left: 50px;
padding-top: 330px;
}
aside h3 p{
padding: 0 40px;
}
article{
padding-top: 200px;
font-size: 4rem;
line-height: 0.5;
}
article h5{
margin-top: -20px;
}
section{
margin-top: -205px;
padding-bottom: 70px;
font-size: 4rem;
line-height: 1.5;
}
section h6{
padding-left: 10vw;
padding-top: 130px;
font-size: 3rem;
}
section p{
margin-left: 10vw;
font-size: 3rem;
line-height: 2;
width: 200px;
}
section p:nth-of-type(1){
width: 150px;
}
section p:nth-of-type(3){
width: 140px;
}
section p:nth-of-type(1),section p:nth-of-type(4){
padding-top: 30px;
}
section a:hover{
background-color: rgba(254,255,0,1.00);
color: rgba(136,7,217,1.00);
}
.p:hover~.select::after{
margin-left: 20px;
content: "P";
}
.p:hover~.select img{
margin-right: -60px;
padding-left: 30px;
}
.w:hover~.select::after{
margin-left: 20px;
content: "W";
}
.w:hover~.select img{
margin-right: -60px;
padding-left: 30px;
}
.a:hover~.select::after{
margin-left: 20px;
content: "A";
}
.a:hover~.select img{
margin-right: -60px;
padding-left: 30px;
}

section a{
margin: 0;
padding: 0;
text-decoration: none;
color: #ffffff;
}
section img{
width: 24px;
height: 30px;
margin-bottom: 13px;
}
	

}


/*============================================
横幅1440px以上
想定端末:PC
============================================
*/
@media screen and (min-width:1440px) {
header{
padding-top: 9vh;
}
aside{
padding-top: 300px;
}

}

@media screen and (min-width:1800px) {
header{
padding-top: 13vh;
}
section{
margin-top: -240px;
}
section h6{
padding-top: 200px;
margin-left: 9vw;
}
section p{
padding-left: 9vw;
}
aside{
font-size: 4rem;
}
aside h3 p{
padding: 0 60px;
}
article{
font-size: 5rem;
}
article h5{
margin-top: -25px;
}
header{
animation-name: ntopfull;
}


}