@charset "UTF-8";

#system h3{
	font-size:1.5rem;
	line-height:1.5em;
	
	margin-bottom:20px;
}

#system h3:before{
	width:5px;
	height:20px;
	
	top:7.5px;
}

@media only screen and (min-width: 720px){
	
	#system h3{
		font-size:2.0rem;
		line-height:1.5em;
		
		padding-left:15px;
	}
	
	#system h3:before{
		width:7.5px;
		height:30px;
		
		top:10px;
	}
}

.course div.extra{	
	display:flex;
	flex-flow: row wrap;
	align-items: stretch;
	justify-content: flex-start;
	
	width:100%;
}

.course div.extra div.row{
	width: 150px;
	font-size:1.15rem;
	line-height:20px;
	display:flex;
	flex-flow: row wrap;
	align-items: stretch;
	justify-content: flex-start;
}

.course div.extra div.row p.que{
	width: 60px;
}

.course div.extra div.row p.ans{
	width: calc(100% - 70px);
	font-weight:bold;
	color:#f36;
}

@media only screen and (min-width: 720px){
	
	.course div.extra{
		margin-bottom:20px;
	}
	
	.course div.extra div.row{
		font-size:1.25rem;
		line-height:40px;
	}
	
}

.course-body{
	width:100%;
	
	box-sizing: border-box;
	border:solid 5px #f36;
	border-radius:5px;
}

.course-body h5{
	font-size:1.25rem;
	line-height:30px;
	font-weight:bold;
	
	text-align: center;
	
	background-color:#f36;
	color:#fff;
}

@media only screen and (min-width: 720px){
	
	.course-body h5{
		font-size:1.75rem;
		line-height:50px;
	}
	
}

.course-body div.inner-body{
	display:flex;
	flex-flow: row wrap;
	align-items: stretch;
	justify-content: flex-start;
	
	width:100%;
}

.course-body div.row{
	display:flex;
	flex-flow: row wrap;
	align-items: center;
	justify-content: flex-start;
	
	width:100%;
}

.course-body div.row:nth-child(odd){
	background-color:#fff;
}

.course-body div.row:nth-child(even){
	background-color:#f0f0f0;
}

.course-body div.row p.que{
	width:calc(50% - 60px);
	
	font-size:1.15rem;
	line-height:30px;
	
	text-align: right;
}

@media only screen and (min-width: 720px){
	
	.course-body div.row p.que{
		font-size:1.5rem;
		line-height:60px;
	}
	
}

.course-body div.row p.dot{
	width:120px;
	text-align: center;
}

.course-body div.row p.dot::before{
	display:block;
	content:"・・・・・・";
	letter-spacing: -0.5em;
	
	font-size:1.15rem;
	line-height:30px;
	color:#888;
}

@media only screen and (min-width: 720px){
	
	.course-body div.row p.dot::before{
		font-size:1.25rem;
		line-height:60px;
	}
	
}

.course-body div.row p.ans{
	width:calc(50% - 60px);
	
	font-size:1.15rem;
	line-height:30px;
	
	text-align: left;
	color:#f36;
}

@media only screen and (min-width: 720px){
	
	.course-body div.row p.ans{
		font-size:1.5rem;
		line-height:60px;
	}
	
}

@media only screen and (min-width: 720px){
	
	.course-body div.row{
		width:50%;
	}
	
	.course-body div.row:nth-child(1){
		order:1;
	}
	
	.course-body div.row:nth-child(2){
		order:3;
	}
	
	.course-body div.row:nth-child(3){
		order:5;
	}
	
	.course-body div.row:nth-child(4){
		order:2;
	}
	
	.course-body div.row:nth-child(5){
		order:4;
	}
	
	.course-body div.row:nth-child(6){
		order:6;
	}
	
}

.option-body div.inner{
	width:100%;
	
	box-sizing: border-box;
	border:solid 5px #f36;
	border-radius:5px;
}

.option-body div.inner:nth-child(1){
	margin-bottom:20px;
}

.option-body div.inner h5{
	font-size:1.25rem;
	line-height:30px;
	font-weight:bold;
	
	text-align: center;
	
	background-color:#f36;
	color:#fff;
}

@media only screen and (min-width: 720px){
	
	.option-body div.inner h5{
		font-size:1.75rem;
		line-height:50px;
	}
	
}

.option-body div.inner-body{
	display:flex;
	flex-flow: row wrap;
	align-items: stretch;
	justify-content: flex-start;
	
	width:100%;
}

.option-body div.inner-body ul{
	display:flex;
	flex-flow: row wrap;
	align-items: stretch;
	justify-content: center;
	
	width:100%;
	
	box-sizing: border-box;
	padding:5px;
}

@media only screen and (min-width: 720px){
	
	.option-body div.inner-body ul{
		padding:10px;
	}
	
}

.option-body div.inner-body ul li{
	display:block;
	
	font-size:1.15rem;
	line-height:30px;
	font-weight:bold;
	
	color:#f36;
	
	box-sizing: border-box;
	padding-right:15px;
	
	position: relative;
}

.option-body div.inner-body ul li::after{
	display:block;
	content:"・";
	
	font-size:1.0rem;
	line-height:30px;
	
	position: absolute;
	top:0;
	right:0;
	bottom:0;
	
	margin:auto 0;
}

@media only screen and (min-width: 720px){
	
	.option-body div.inner-body ul li{
		font-size:1.25rem;
		line-height:40px;
	}
	
	.option-body div.inner-body ul li::after{
		font-size:1.0rem;
		line-height:40px;
	}
	
}

.option-body div.row{
	display:flex;
	flex-flow: row wrap;
	align-items: center;
	justify-content: flex-start;
	
	width:100%;
	
	box-sizing: border-box;
	padding:0 10px;
}

.option-body div.row:nth-child(odd){
	background-color:#fff;
}

.option-body div.row:nth-child(even){
	background-color:#f0f0f0;
}

.option-body div.row p.que{
	width:calc(60% - 30px);
	
	font-size:1.15rem;
	line-height:30px;
	font-weight:bold;
	
	text-align: center;
}

@media only screen and (min-width: 720px){
	
	.option-body div.row p.que{
		font-size:1.25rem;
		line-height:60px;
	}
	
}

.option-body div.row p.double{
	font-size:1.15rem;
	line-height:20px;
	
	box-sizing: border-box;
	padding:5px 0;
}

@media only screen and (min-width: 720px){
	
	.option-body div.row p.double{
		font-size:1.25rem;
		line-height:25px;
	}
	
}

.option-body div.row p.que span.note{
	display:block;
	
	font-size:0.8rem;
	line-height:5px;
	margin-top:5px;
}

@media only screen and (min-width: 720px){
	
	.option-body div.row p.que span.note{
		font-size:1.25rem;
		line-height:25px;
		
		margin-top:0;
	}
	
}

.option-body div.row p.que span.extra{
	font-size:0.8rem;
	line-height:15px;
}

@media only screen and (min-width: 720px){
	
	.option-body div.row p.que span.extra{
		font-size:1.25rem;
		line-height:25px;
	}
	
}

.option-body div.row p.extra{
	width:60px;
	text-align: center;
	
	position: relative;
}

.option-body div.row p.limited::before{
	display:block;
	content:"期間限定";
	
	font-size:0.6rem;
	line-height:10px;
	font-weight:bold;
	
	width:32.5px;
	height:32.5px;
	
	text-align: center;
	
	background-color:#f69;
	color:#fff;
	
	box-sizing: border-box;
	padding:5px;
	padding-top:7.5px;
	
	border-radius:50px;
	
	position: absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	
	margin:auto;
	
	opacity: 0.8;
}

@media only screen and (min-width: 720px){
	
	.option-body div.row p.limited::before{
		font-size:1.0rem;
		line-height:20px;
		
		width:50px;
		height:50px;
		
		padding-top:5px;
	}
	
}

.option-body div.row p.popular01::before{
	display:block;
	content:"人気No.1";
	
	font-size:0.6rem;
	line-height:10px;
	font-weight:bold;
	
	width:32.5px;
	height:32.5px;
	
	text-align: center;
	
	background-color:#09f;
	color:#fff;
	
	box-sizing: border-box;
	padding:5px;
	padding-top:7.5px;
	
	border-radius:50px;
	
	position: absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	
	margin:auto;
	
	opacity: 0.8;
}

@media only screen and (min-width: 720px){
	
	.option-body div.row p.popular01::before{
		font-size:1.0rem;
		line-height:20px;
		
		width:50px;
		height:50px;
		
		padding-top:5px;
	}
	
}

.option-body div.row p.popular02::before{
	display:block;
	content:"人気No.2";
	
	font-size:0.6rem;
	line-height:10px;
	font-weight:bold;
	
	width:32.5px;
	height:32.5px;
	
	text-align: center;
	
	background-color:#09f;
	color:#fff;
	
	box-sizing: border-box;
	padding:5px;
	padding-top:7.5px;
	
	border-radius:50px;
	
	position: absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	
	margin:auto;
	
	opacity: 0.8;
}

@media only screen and (min-width: 720px){
	
	.option-body div.row p.popular02::before{
		font-size:1.0rem;
		line-height:20px;
		
		width:50px;
		height:50px;
		
		padding-top:5px;
	}
	
}

.option-body div.row p.popular03::before{
	display:block;
	content:"人気No.3";
	
	font-size:0.6rem;
	line-height:10px;
	font-weight:bold;
	
	width:32.5px;
	height:32.5px;
	
	text-align: center;
	
	background-color:#09f;
	color:#fff;
	
	box-sizing: border-box;
	padding:5px;
	padding-top:7.5px;
	
	border-radius:50px;
	
	position: absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	
	margin:auto;
	
	opacity: 0.8;
}

@media only screen and (min-width: 720px){
	
	.option-body div.row p.popular03::before{
		font-size:1.0rem;
		line-height:20px;
		
		width:50px;
		height:50px;
		
		padding-top:5px;
	}
	
}

.option-body div.row p.ans{
	width:calc(40% - 30px);
	
	font-size:1.15rem;
	line-height:30px;
	
	text-align: right;
	color:#f36;
}

@media only screen and (min-width: 720px){
	
	.option-body div.row p.ans{
		font-size:1.5rem;
		line-height:60px;
	}
	
}

@media only screen and (min-width: 720px){
	
	.option-body div.row{
		width:50%;
	}
	
	.option-body div.row:nth-child(3){
		background-color:#f0f0f0;
	}
	
	.option-body div.row:nth-child(4){
		background-color:#fff;
	}
	
	.option-body div.row:nth-child(7){
		background-color:#f0f0f0;
	}
	
	.option-body div.row:nth-child(8){
		background-color:#fff;
	}
	
	.option-body div.row:nth-child(11){
		background-color:#f0f0f0;
	}
	
	.option-body div.row:nth-child(12){
		background-color:#fff;
	}
	
	.option-body div.row:nth-child(15){
		background-color:#f0f0f0;
	}
	
	.option-body div.row:nth-child(16){
		background-color:#fff;
	}
	
}