@charset "utf-8";
/* Google fonts */
@import url(https://fonts.googleapis.com/css?family=Racing+Sans+One);
@import url(https://fonts.googleapis.com/css?family=Alfa+Slab+One);

/* デフォルトスタイルシートのクリア */
*{
	margin:0;
	padding:0;
}

/* へっだー */
header{
	background:#4169e1;
	height:40px;
}
header p{
	color:#ffffff;
	width:450px;
	margin:0 auto;
	padding-top:4px;
	font-size:24px;
	font-family: 'Racing Sans One', cursive;
	letter-spacing:2px;
}
.sizesmall{
	padding-left:15px;
	font-size:12px;
	letter-spacing:1px;
}
/* ふったー */
footer{
	background:#4169e1;
	height:20px;
}

footer p{
	color:#ffffff;
	width:450px;
	margin:0 auto;
	padding-top:3px;
	font-size:12px;
	font-family: 'Racing Sans One', cursive;
	text-align:right;
	letter-spacing:0.5px;
}

/* 本体 */
section{
	width:450px;
	margin:5px auto;
	overflow:hidden;
	border:1px solid #eeeeee;
	background:#f0f8ff;
	border-radius:20px;
	position:relative;
}

/* 全般＆デザインできてないとこのシャッター */
ul{
	
}

ul li{
	list-style:none;
}

ul li a{
	display:block;
	float:left;
	width:205px;
	height:205px;
	box-sizing:border-box;
	margin:10px;
	border:1px solid #eeeeee;
	text-align:center;
	font-size:20px;
	padding-top:66px;
	font-family: 'Racing Sans One', cursive;
	text-decoration:none;
	color:#333333;
	background:url(commingsoon.png);
	border-radius:30px;
}
ul li a img{
	padding-bottom:5px;
}

ul li a:hover{
}


/* デザインできたとこのシャッター */
li:nth-child(1) a{
	background:url(page-image-01.jpg) no-repeat;
	background-size:contain;
}
li:nth-child(2) a{
	background:url(page-image-02.jpg) no-repeat;
	background-size:contain;
}

/* 滑走路ぽいやつ。lineが下ので、line2が上の。 */
.line{
	width:100vw;
	margin:5px auto;
	background:#999999;
	overflow:hidden;
}

.line p{
	background:#999999;
}

.line .p1{
	height:25px;
	width:80vw;
	float:left;
	border-bottom:6px dashed #ffffff;
	color:#ffffff;
	text-align:right;
	font-size:12px;
	letter-spacing:-3px;
	line-height:25px;
	padding-right:2vw;
}
.line .p2{
	height:22px;
	width:80vw;
	float:left;
	color:#ffffff;
	text-align:right;
	font-size:12px;
	letter-spacing:-3px;
	line-height:25px;
	padding-right:2vw;
}
.line .p3{
	width:18vw;
	height:50px;
	margin-top:-28px;
	background:url(27.png);
	float:right;
}
.line2{
	width:100vw;
	margin:5px auto;
	background:#999999;
	overflow:hidden;
}

.line2 p{
	background:#999999;
}

.line2 .p1{
	height:25px;
	width:80vw;
	float:right;
	border-bottom:6px dashed #ffffff;
	color:#ffffff;
	text-align:left;
	font-size:12px;
	letter-spacing:-3px;
	line-height:25px;
	padding-left:2vw;
}
.line2 .p2{
	height:25px;
	width:80vw;
	float:right;
	color:#ffffff;
	text-align:left;
	font-size:12px;
	letter-spacing:-3px;
	line-height:25px;
	padding-left:2vw;
}
.line2 .p3{
	width:18vw;
	height:50px;
	margin-top:3px;
	background:url(09.png) 50% 50%;
	float:left;
}

.hikouki{
	position:absolute;
	width:100vw;
	height:50px;
	top:1015px;
	background:url(hikouki.png) 5% 50% no-repeat;
	transition-property:background;
	transition-duration:0s;
	transition-timing-function:linear;
}

.hikouki:hover{
	background:url(hikouki.png) 120% 50% no-repeat;
	transition-duration:1.5s;
	transition-timing-function:cubic-bezier(1,.07,.49,1.06);
}

.hikouki2{
	position:absolute;
	width:100vw;
	height:50px;
	top:48px;
	background:url(hikouki.png) -50% 50% no-repeat;
	transition-property:background;
	transition-duration:0s;
	transition-timing-function:linear;
}

.hikouki2:hover{
	background:url(hikouki.png) 95% 50% no-repeat;
	transition-duration:2s;
	transition-timing-function:ease-out;
}

/* box */
/* シャッター下から巻き上がる */
#box01{
	position:absolute;
	width:205px;
	margin:10px;
	height:205px;
	border-radius:30px;
	top:0px;
/*	transition-property:top,background;*/
	transition-property:height,background;
	transition-duration:0.5s;
	transition-delay:2s;
	transition-timing-function:ease-in;
	background:url(kaodake2.png) 50% 66px no-repeat ,url(No01.png) 50% 151px no-repeat,url(shutter_royalblue.png);
	box-sizing:border-box;
	cursor: pointer;
}
#box01:hover{
/*	top:315px;*/
	height:0px;
	background:url(kaodake2.png) 50% -139px no-repeat ,url(No01.png) 50% -54px no-repeat,url(shutter_royalblue.png);
	cursor: pointer;
	transition-delay:0s;
}

#box02{
	float:left;
	position:absolute;
	width:205px;
	margin:10px;
	height:205px;
	border-radius:30px;
	top:0px;
	margin-left:235px;
/*	transition-property:top,height;*/
	transition-property:height,background;
	transition-duration:0.5s;
	transition-delay:2s;
	transition-timing-function:ease-in;
	background:url(kaodake2.png) 50% 66px no-repeat ,url(No02.png) 50% 151px no-repeat,url(shutter_royalblue.png);
	box-sizing:border-box;
	cursor: pointer;
}
#box02:hover{
/*	top:315px;*/
	height:0;
	background:url(kaodake2.png) 50% -139px no-repeat ,url(No02.png) 50% -54px no-repeat,url(shutter_royalblue.png);
	transition-delay:0s;
	cursor: pointer;
}

#box03{
	float:left;
	position:absolute;
	width:205px;
	margin:10px;
	height:205px;
	border-radius:30px;
	top:225px;
	margin-left:10px;
/*	transition-property:top, height;*/
	transition-property:height,background;
	transition-duration:0.5s;
	transition-delay:2s;
	transition-timing-function:ease-in;
	background:url(kaodake2.png) 50% 66px no-repeat ,url(No03k.png) 50% 151px no-repeat,url(shutter.png);
	box-sizing:border-box;
	cursor: pointer;
}
#box03:hover{
/*	top:315px;*/
	height:0;
	background:url(kaodake2.png) 50% -139px no-repeat ,url(No03k.png) 50% -54px no-repeat,url(shutter.png);
	transition-delay:0s;
	cursor: pointer;
}
#box04{
	float:left;
	position:absolute;
	width:205px;
	margin:10px;
	height:205px;
	border-radius:30px;
	top:225px;
	margin-left:235px;
/*	transition-property:top, height;*/
	transition-property:height,background;
	transition-duration:0.5s;
	transition-delay:2s;
	transition-timing-function:ease-in;
	background:url(kaodake2.png) 50% 66px no-repeat ,url(No04k.png) 50% 151px no-repeat,url(shutter.png);
	box-sizing:border-box;
	cursor: pointer;
}
#box04:hover{
/*	top:315px;*/
	height:0;
	background:url(kaodake2.png) 50% -139px no-repeat ,url(No04k.png) 50% -54px no-repeat,url(shutter.png);
	transition-delay:0s;
	cursor: pointer;
}

#box05{
	position:absolute;
	width:205px;
	margin:10px;
	height:205px;
	border-radius:30px;
	top:450px;
/*	transition-property:top, height;*/
	transition-property:height,background;
	transition-duration:0.5s;
	transition-delay:2s;
	transition-timing-function:ease-in;
	background:url(kaodake2.png) 50% 66px no-repeat ,url(No05k.png) 50% 151px no-repeat,url(shutter.png);
	box-sizing:border-box;
	cursor: pointer;
}
#box05:hover{
/*	top:540px;*/
	height:0;
	background:url(kaodake2.png) 50% -139px no-repeat ,url(No05k.png) 50% -54px no-repeat,url(shutter.png);
	transition-delay:0s;
	cursor: pointer;
}

#box06{
	float:left;
	position:absolute;
	width:205px;
	margin:10px;
	height:205px;
	border-radius:30px;
	top:450px;
	margin-left:235px;
/*	transition-property:top, height;*/
	transition-property:height,background;
	transition-duration:0.5s;
	transition-delay:2s;
	transition-timing-function:ease-in;
	background:url(kaodake2.png) 50% 66px no-repeat ,url(No06k.png) 50% 151px no-repeat,url(shutter.png);
	box-sizing:border-box;
	cursor: pointer;
}
#box06:hover{
/*	top:540px;*/
	height:0;
	background:url(kaodake2.png) 50% -139px no-repeat ,url(No06k.png) 50% -54px no-repeat,url(shutter.png);
	transition-delay:0s;
	cursor: pointer;
}

#box07{
	float:left;
	position:absolute;
	width:205px;
	margin:10px;
	height:205px;
	border-radius:30px;
	top:675px;
	margin-left:10px;
/*	transition-property:top, height;*/
	transition-property:height,background;
	transition-duration:0.5s;
	transition-delay:2s;
	transition-timing-function:ease-in;
	background:url(kaodake2.png) 50% 66px no-repeat ,url(No07k.png) 50% 151px no-repeat,url(shutter.png);
	box-sizing:border-box;
	cursor: pointer;
}
#box07:hover{
/*	top:540px;*/
	height:0;
	background:url(kaodake2.png) 50% -139px no-repeat ,url(No07k.png) 50% -54px no-repeat,url(shutter.png);
	transition-delay:0s;
	cursor: pointer;
}
#box08{
	float:left;
	position:absolute;
	width:205px;
	margin:10px;
	height:205px;
	border-radius:30px;
	top:675px;
	margin-left:235px;
/*	transition-property:top, height;*/
	transition-property:height,background;
	transition-duration:0.5s;
	transition-delay:2s;
	transition-timing-function:ease-in;
	background:url(kaodake2.png) 50% 66px no-repeat ,url(No08k.png) 50% 151px no-repeat,url(shutter.png);
	box-sizing:border-box;
	cursor: pointer;
}
#box08:hover{
/*	top:540px;*/
	height:0;
	background:url(kaodake2.png) 50% -139px no-repeat ,url(No08k.png) 50% -54px no-repeat,url(shutter.png);
	transition-delay:0s;
	cursor: pointer;
}