* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}


html {
	font-size: 62.5%;	/* 16px x 0.625 = 10px(=1rem) */
}


body {
	background:#d8d8e8;
}





/*******************************************************************************
[@]header
*******************************************************************************/
div#HEADER_WRAPPER {
	position:relative;
	width:100%;
	padding-top:50px;
}


header h1 {
	width:100%;
	text-align:center;
}

header h1 img {
	width: 90%;
}

@media (min-width: 800px) {	/* スマホ以外 */
	header h1 img {
		width: 60%;
		max-width: 800px;
	}
}


div#HEADER_PR {
	position:absolute;
	top:0;
	left:0;
	width:100%;

	background:rgba(255,255,255, 0.5);
}

#HEADER_PR p {
	padding-left:5px;
	font-size:12px;
	line-height:2em;
	vertical-align:middle;
	color:#666;
}



/*******************************************************************************
[@]
*******************************************************************************/

div#DIV_EXPLANATION_1 {
	max-width: 80rem;
	margin: 2rem auto;

	font-size: 1.8rem;
}

div#DIV_EXPLANATION_2 {
	max-width: 80rem;
	margin: 2rem auto;

	font-size: 1.8rem;
}


div#EXPLAIN {
	max-width: 80rem;
	margin: 2rem auto;

	font-size: 1.8rem;
}


div#DIV_SETTING {
	display: flex;
	justify-content: center;
	align-items: center;
}

select#DIFFICULTY {
	display: inline-block;
	height: 4rem;
	font-size: 3rem;
	margin-right: 2rem;
}

input#BTN_START {
	display: inline-block;
	width: 12rem;
	height: 4rem;

	font-size: 2rem;
	color: #fff;
	background: #e00;
	border: solid 1px #000;
}


div#DIV_PANEL {
	position: relative;
	margin: 0 auto;
}

div#DIV_GRID_SAMPLE {
	position: absolute;
}

div#DIV_TIME {
	position: absolute;
	font-size: 4rem;
}

div#DIV_GRID_WHOLE {
	position: relative;
	margin: 0 auto;
}

div#DIV_GRID {
	position: relative;
}

#DIV_GRID div {
	position: absolute;
	border: solid 1px #222;
}

div#DIV_GRID_EV {

	position: absolute;
	width: 100%;
	height: 100%;
}

div#DIV_COUNTDOWN {

	display: none; /* -> flex */
	align-items: center;
	justify-content: center;

	position: absolute;
	left: 0;
	top: 0;

	font-size: 10rem;
	background: #fff;
}


div#DIV_SCORE {
	display: none;
	text-align: center;
	margin-top: 10rem;
}

div#DIV_SCORE_TIME {
	font-size: 4rem;
}

div#DIV_SCORE_COUNT {
	font-size: 4rem;
}

input#BTN_RESET {
	display: none;
	width: 12rem;
	height: 4rem;
	margin: 2rem;

	font-size: 2rem;
	color: #fff;
	background: #e00;
	border: solid 1px #000;
}


div#DIV_CONF {
	display: none;
	justify-items: center;
	align-content: center;

	position:fixed;
	z-index: 200;

	top:0;
	left:0;
	width:100%;
	height:100%;
	background:rgba(0,0,0,0.6);

	text-align:center;
}

div#DIV_CONF_MSG {
	margin:0.6rem;
	padding:0.3rem;
	color:#000;
	background:#ffc;
	border-radius:0.3rem;

	font-size: 2rem;

}

input#BTN_CONF_RESET,
input#BTN_CONF_CLOSE {
	margin: 1rem;
	font-size: 2rem;
	padding: 0.4rem;
}



/* Social */
svg#SOCIAL_ICON_TWITTER,
svg#SOCIAL_ICON_LINE {
	display: inline-block;
	width: 4rem;
	height: 4rem;
	margin: 1rem;

	cursor: pointer;
}


div.div_ad {
	margin-top: 5rem;
	margin-bottom: 1rem;
	text-align: center;
}




/* 固定広告対応 start ***************************/

#DIV_BTN_AD_CLOSE_MOBILE,
#DIV_BTN_AD_CLOSE_PC_HOR,
#DIV_BTN_AD_CLOSE_PC_VER {
	display: none;
}

/* mobile *****************************/
/* 縦横同じ */
div#DIV_AD_FIXED_MOBILE {
	display: block;

	position: fixed;
	width: 100%;
	top: 0;
	text-align: center;
}

div#DIV_AD_FIXED_PC_HOR {
	display: none;
}

div#DIV_AD_FIXED_PC_VER {
	display: none;
}


/* 広告閉じるボタン */
.div_btn_ad_close {

	position: absolute;
	bottom: -3rem;
	left: calc( 50% - 1.2rem );
	right: auto;

	width: 2.4rem;
	height: 2.4rem;
	border-radius: 50%;
	background: #333;
}
 
.div_btn_ad_close::before,
.div_btn_ad_close::after {

	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 3px;
	height: 2rem;
	background: #fff;
}
 
.div_btn_ad_close::before {
	transform: translate(-50%,-50%) rotate(45deg);
}
 
.div_btn_ad_close::after {
	transform: translate(-50%,-50%) rotate(-45deg);
}


/* PC *********************************/
@media screen and (min-width: 730px) {

	/* 縦向き */
	div#DIV_AD_FIXED_MOBILE {
		display: none;
	}

	div#DIV_AD_FIXED_PC_HOR {
		display: block;

		position: fixed;
		width: 100%;
		top: 0;
		text-align: center;
	}
	div#DIV_AD_FIXED_PC_VER {
		display: none;
	}

	/* 横向きなら書き換え */
	@media (min-aspect-ratio: 1/1) {

		div#DIV_AD_FIXED_PC_HOR {
			display: none;
		}
		div#DIV_AD_FIXED_PC_VER {
			display: block;

			position: fixed;
			top: calc( 50% - 300px );
			right: 0;
		}

		/* 広告閉じるボタン */
		.div_btn_ad_close {
			left: -3rem;
			right: auto;
			top: calc( 50% - 1.2rem );
			bottom: auto;
		}

	}
}

/* 固定広告対応 end ***************************/





/*******************************************************************************
[@]footer
*******************************************************************************/

footer {
	margin-top: 2rem;
	font-size: 1.6rem;

}


div#FOOTER_WRAPPER {
	width:100%;
	background:#e8e8e8;
}

div#FOOTER_MAIN {
	width: 95%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 1rem;
}

div#FOOTER_MENU {
	width: 70%;
}

div#FOOTER_LOGO {
	width: 50%;
	min-width: 280px;
}

#FOOTER_LOGO img {
	width: 100%;
	margin: 3rem 0;
}

div#COPYRIGHT {
	text-align: center;
}


div#FOOTER_MENU {
}

#FOOTER_MENU dt {
	font-weight: bold;
}

#FOOTER_MENU dd {
	margin: 0 0 1rem 0;
	padding: 0;
}