@charset "utf-8";

/* top */
#top{
	position: relative;
	padding: 40px 0;
}
#top a{
	position: relative;
	display: block;
	margin: 50px auto 30px auto;
	max-width: 380px;
}

.ext-01 h2, .ext-03 h2{margin: 0 auto -50px auto;}
h3{
	position: relative;
	margin: -10px auto 20px auto;
	background-color: #030f57;
	padding: 3px 0;
	width: calc(100% - 40px);
	max-width: 280px;
}
.ext h3{margin: 30px auto 20px auto;background-color: #fff000;}
.chapter01-3 h3{margin: 20px auto;}
h3 img{
	position: relative;
	display: block;
	margin: 0 auto;
	width: auto;
	height: 17px;
}
#hint h3{
	margin: 30px auto 10px auto;
	color: #fff000;
	text-align: center;
	width: 100%;
	max-width: 100%;
}
#hint h3.mtop{margin: 50px auto 10px auto;}
#hint .Img{
	position: relative;
	margin: 10px auto;
	width: 100%;
	max-width: 800px;
}
.chapter01-3 #hint{margin: 30px auto -20px auto;}
#ext .hintArea{margin: 30px auto 0 auto;}

.nazoImg{
	position: relative;
	margin: 0 auto 20px auto;
	width: 100%;
	max-width: 720px;
	border: solid 2px #030f57;
}
.ext .nazoImg{margin: 10px auto 20px auto;}
.ext .mtop{padding-top: 10px;}
#ext p, #ext .cWrap{
	position: relative;
	margin: 0 auto;
	max-width: 720px;
}
#ext .lists{
	position: relative;
	margin: 20px auto 0 auto;
	gap: 20px;
	max-width: 1000px;
}
#ext .lists .listsBlock{
	position: relative;
	margin: 0;
	padding: 20px;
	border-radius: 5px;
	background-color: #FFFDE6;
	max-width: 420px;
}
#ext .lists .listsBlock .Img{width: 100%;}
#ext .lists .listsBlock .ttl{
	position: relative;
	margin: 10px auto;
	background-color: #030f57;
	color: #ffffff;
	text-align: center;
}
#ext .lists .listsBlock .txt{
	position: relative;
	margin: 0 auto;
}
#ext .lists .listsBlock .txt .strong{font-size: .16rem;border-bottom: double 4px;display: block;padding-bottom: 3px;margin-bottom: 10px;color: #2873A1;}
#ext .lists .listsBlock .button.next{margin: 30px auto;}
#ext .attentionArea, #ext .transport{
	position: relative;
	margin: 30px auto;
	border: solid 1px #030f57;
	border-radius: 5px;
	padding-bottom: 10px;
	font-size: .12rem;
	line-height: 1.4em;
	max-width: 650px;
}
#ext .transport{border: none;background-color: #FEE8D1;}
#ext .attentionArea .ttl{
	position: relative;
	margin: 0 auto;
	background-color: #030f57;
	width: calc(100% - 20px);
	max-width: 300px;
	transform: translateY(-10px);
	color: #ffffff;
	text-align: center;
	border-radius: 5px;
	padding: 3px 0;
}
#ext .transport .ttl{
	position: relative;
	margin: 0 auto 15px auto;
	color: #CD751B;
	width: calc(100% - 20px);
	text-align: center;
	padding: 15px 0 3px 0;
	border-bottom: double 4px #CD751B;
}
#ext .attentionArea p, #ext .transport p{
	position: relative;
	padding-left: 1.2em;
	width: calc(100% - 40px);
	margin: 0 auto;
}
#ext .transport p{padding-bottom: 10px;}
#ext .attentionArea p::after, #ext .transport p::after{
	position: absolute;
	top:0;
	left: 0;
	content: '・';
}
#ext .nextN{
	position: relative;
	margin: 60px auto 0 auto;
}
#ext .nextN.Ndisp{display: none;}
.inputArea .caution{
	position: relative;
	margin: -20px auto 20px auto;
}
#ext .hintArea .Img{padding-bottom: 10px;max-width: 800px;margin: 0 auto;}
#ext .att01{
	position: relative;
	margin: 20px auto 0 auto;
	background-color: #C70000;
	padding: 20px 15px;
	color: #ffffff;
}
#ext .att01 .ttl01{
	margin: 0 auto 20px auto;
	border-bottom: solid 1px;
	text-align: center;
	padding-bottom: 3px;
}

ul.stepList{
	position: relative;
	margin: 60px auto 50px auto;
	max-width: 420px;
	gap: 8px;
}
ul.stepList li{
	position: relative;
	margin: 0;
	width: 100%;
}
ul.stepList li a{
	position: relative;
	margin: 0 auto;
	display: block;
	padding: 5px 1.5em;
	background-color: #4a90e6;
	border:solid 1px #4a90e6;
	color: #ffffff;
	text-align: center;
	font-size: .13rem;
	line-height: 1.1em;
}
ul.stepList li a::after{
	position: absolute;
	top:50%;
	right: 3px;
	transform: translateY(-50%);
	content: '\025b6';
	font-size: 70%;
}
ul.stepList li a:hover{
	background-color: #ffffff;
	color: #4a90e6;
}

.hintWrap{
	position: relative;
	margin: 0 auto 20px auto;
	max-width: 960px;
}
.hintWrap .hintBtn{
	position: relative;
	margin: 10px auto 0 auto;
	display: block;
	padding: 2px 2em;
	color: #ffffff;
	text-align: center;
	transition: all .3s ease-out;
	cursor: pointer;
	line-height: 1.3em;
}
.hintWrap.step01 .hintBtn{background: #497eb9;border: solid 1px #497eb9;}
.hintWrap.step02 .hintBtn{background: #519D9F;border: solid 1px #519D9F;}
.hintWrap.step03 .hintBtn{background: #8E5BBD;border: solid 1px #8E5BBD;}
.hintWrap.step04 .hintBtn{background: #A6446C;border: solid 1px #A6446C;}
.hintWrap.stepY .hintBtn{background: #EE0123;border: solid 1px #EE0123;}
.hintWrap.stepext .hintBtn{background: #ED8465;border: solid 1px #ED8465;}
.hintWrap.step01 .hintBtn:hover{background-color: #7EC8DC;}
.hintWrap.step02 .hintBtn:hover{background-color: #86B376;}
.hintWrap.step03 .hintBtn:hover{background-color: #AF8BBD;}
.hintWrap.step04 .hintBtn:hover{background-color: #BB899D;}
.hintWrap.stepY .hintBtn:hover{background-color: #FF4C50;}
.hintWrap.stepext .hintBtn:hover{background-color: #C49587;}
.hintWrap .hintBtn::after{
	position: absolute;
	top:50%;
	right: 5px;
	transform: translateY(-50%);
	content: '▼';
	font-size: 70%;
	transition: all .3s ease-out;
}
.hintWrap .hintBtn.disp::after{transform: translateY(-50%) rotate(-180deg);}
.hintWrap .hintTxt{
	position: relative;
	margin: 0 auto;
	padding: 20px;
	display: none;
	overflow: hidden;
}
.hintWrap.step01 .hintTxt{border-left: solid 1px #497eb9;border-right: solid 1px #497eb9;border-bottom: solid 1px #497eb9;}
.hintWrap.step02 .hintTxt{border-left: solid 1px #519D9F;border-right: solid 1px #519D9F;border-bottom: solid 1px #519D9F;}
.hintWrap.step03 .hintTxt{border-left: solid 1px #8E5BBD;border-right: solid 1px #8E5BBD;border-bottom: solid 1px #8E5BBD;}
.hintWrap.step04 .hintTxt{border-left: solid 1px #A6446C;border-right: solid 1px #A6446C;border-bottom: solid 1px #A6446C;}
.hintWrap.stepY .hintTxt{border-left: solid 1px #DCBA1E;border-right: solid 1px #DCBA1E;border-bottom: solid 1px #DCBA1E;}
.hintWrap.stepext .hintTxt{border-left: solid 1px #C49587;border-right: solid 1px #C49587;border-bottom: solid 1px #C49587;}

.blue{color: #3FB1E7;}
.red{color: #F77398;}

/* ----- pc ----- */
@media screen and (min-width: 641px) {
	
	h3{
		margin: -50px auto 40px auto;
		padding: 8px 0;
		font-size: .18rem;
		max-width: 320px;
	}
	h3 img{height:20px;}
	.chapter01-3 h3{margin: 40px auto;}
	#hint h3{margin: 50px auto 30px auto;}
	#hint h3.mtop{margin: 90px auto 30px auto;}
	
	.chapter01-3 #hint{margin: 50px auto -20px auto;max-width: 540px;}
	.chapter01-3 .attention{margin: -50px auto 0 auto;}
	
	.nazoImg{margin: 20px auto 40px auto;}
	.ext .nazoImg{margin: 20px auto 40px auto;}
	.ext .mtop{margin:  0 auto;max-width: 680px;}
	.ext-01 .caution, .ext-02 .cWrap, .ext-02 p,  .ext-03 p{text-align: center;}
	#ext .lists .listsBlock .txt .strong{font-size: .20rem;}
	#ext .attentionArea, #ext .transport{
		border-radius: 10px;
		padding-bottom: 20px;
		font-size: .14rem;
		line-height: 1.6em;
	}
	#ext .transport{max-width: 400px;font-size: .16rem;}
	#ext .attentionArea .ttl{
		transform: translateY(-15px);
		padding: 5px 0;
	}
	#ext .transport p{padding-bottom: 15px;}
	#ext .nextN{margin: 120px auto 0 auto;}
	.ext-00 .caution{font-size: .15rem;}
	#ext .att01{
		font-size: .16rem;
		line-height: 1.6em;
	}

	ul.stepList{
		margin: 80px auto 50px auto;
		gap: 10px;
	}
	ul.stepList li a{
		padding: 8px 1.5em;
		font-size: .16rem;
		line-height: 1.1em;
	}
	ul.stepList li a::after{right: 7px;}

	.hintWrap .hintBtn{padding: 10px 3em;}
	.hintWrap .hintBtn::after{right: 25px;}
	
	.preBtn{
		position: relative;
		margin: 0 auto;
		max-width: 960px;
	}

}