@charset "utf-8";

/* =======================================
	reset
======================================= */
html,body,div,span,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;font-weight:normal;}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}ul{list-style:none !important}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle}

* {-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-o-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;}


/* =======================================
	common
======================================= */
html {height:100%;}
body{
	position:relative;
	width:100%;
	height:100%;
	margin:0 auto;
	text-align:center;
	color:white;
	font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
	font-size:18px;
	line-height:150%;
	background:black url("bg.jpg") no-repeat center center;
	background-size:auto 100%;
}

img {max-width:100%;height:auto;vertical-align:bottom;}
table {width:100%;}
tr, td {vertical-align:top;}

a {
	outline:none;
	text-decoration:underline;
	-webkit-transition:all 0.3s ease;
	-moz-transition:all 0.3s ease;
	-o-transition:all 0.3s ease;
	transition:all  0.3s ease;
}
a:link {color:white;text-decoration:none;}
a:visited {color:white;text-decoration:none;}
a:hover {color:#cc0033;text-decoration:none;}
a:active {text-decoration:none;}

#head {
	width:100%;
	height:auto;
	position:absolute;
	margin:auto;
	top:5vh;
	left:0;
	right:0;
}

.logo {
	margin:0 auto;
	width:236px;
	height:93px;
	margin:0 auto;
}

.introduction {
	width:685px;
	height:118px;
	margin:2em auto 0;
}

#foot {
	width:100%;
	position:absolute;
	margin:auto;
	bottom:10vh;
	left:0;
	right:0;
}

.information {
	margin:0 auto 5vh;
	width:201px;
	height:49px;
}

#timer {
	margin:0 auto;
	width:auto;
	font-size:4em;
	font-weight:bold;
	letter-spacing:2px;
}

#egg {
	width:150px;
	height:150px;
	position:absolute;
	margin:auto;
	top:48%;
	left:0;
	right:0;
}


/* =======================================
	smartphone
======================================= */
@media screen and ( max-width:767px ){

#head {
	top:5vh;
}

.logo {
	width:50%;
	max-width:236px;
	height:auto;
	max-height:93px;
	margin:0 auto;
}

.introduction {
	width:90%;
	max-width:685px;
	height:auto;
	max-height:118px;
	margin:2em auto 0;
}

#foot {
	bottom:6vh;
}

.information {
	width:40%;
	max-width:201px;
	height:auto;
	max-height:49px;
	margin:0 auto 2vh;
}

#timer {
	font-size:12vw;
}

#egg {
	width:36%;
}

}

@media screen and ( max-width:896px ) and (orientation: landscape) {

.logo {
	width:24%;
}

.introduction {
	width:40%;
	margin:1em auto 0;
}

.information {
	width:20%;
	margin:0 auto 3vh;
}

#foot {
	bottom:8vh;
}

#timer {
	font-size:6vw;
}

#egg {
	width:12%;
}

}


/* =======================================
	TABLET
======================================= */
@media screen and (orientation: portrait) and (min-width: 768px) {

.introduction {
	margin:1em auto 0;
}

#egg {
	top:60%;
	width:150px;
}

#timer {
	font-size:8vw;
}

}