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


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

	font-family: sans-serif;
}


body {
	background:#ecb;
}





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


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

header h1 img {
	width: 60%;
}

@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;
}



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


article {
	max-width: 800px;
	margin: 0 auto;
}


h2 {
	font-size: 3.6rem;
	text-align: center;
}

h3.h_level {
	font-size: 2.8rem;
}


ul.div_stage_list {
	display: flex;
	flex-wrap: wrap;

	margin-bottom: 3rem;
}

.div_stage_list li {

	display: block;
	list-style: none;
	margin: 0.2rem;
	padding: 0;

	width: 8rem;
	height: 3.6rem;
	line-height: 3.6rem;

	font-weight: bold;
	font-size: 2rem;
	text-align: center;

	background: #fff;
}

.div_stage_list a {
	text-decoration: none;
	display: block;
	width: 100%;
	height: 100%;
	background: #fff;
}


div.div_stage_list {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

.div_stage_list a:visited {
	background: #eee;
}




div#DIV_EXPLAIN_1,
div#DIV_EXPLAIN_2 {
	margin-top: 1rem;
	margin-bottom: 4rem;

	width: 98%;
	max-width: 64rem;

	background: #e8e8e8;
	border: solid 3px #444;
	border-radius: 1rem;
	color: #444;
	font-size: 1.8rem;
	padding: 2rem;
}

#DIV_EXPLAIN h2 {
	text-align: center;
}


div#DIV_TO_STAGE_LIST {
	cursor: pointer;
	user-select: none;

	width: 30rem;
	padding: 0.5rem;
	margin: 2rem auto;
	text-align: center;
	font-size: 3rem;
	font-weight: bold;
	background: #026;
	border-radius: 0.5rem;
	color: #fff;

}

h2#H2_STAGE_LIST {
	width: 100%;
	padding: 0.5rem;
	margin: 2rem auto;

	text-align: center;
	font-size: 3rem;
	font-weight: bold;
	color: #fff;

	background: #026;
	border-radius: 0.5rem;

}


div.div_ad {
	width: 100%;
	height: 250px;
	margin: 4rem 0;
}






/*******************************************************************************
[@]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;
}










/* 固定広告対応 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 ***************************/