@charset "UTF-8";

/* コース紹介
======================================================*/
/* 共通
----------------------------------------- */
/* ボタン */
.btn a{
	display: flex;
	border-radius: 10px;
	align-items: center;
	justify-content: center;
	width: 50%;
	height: 100%;
	background: #F58B44;
	color: #fff;
	position: relative;
}
	.btn a::after{
		content: "";
		width: 6px;
		height: 6px;
		border-top: 2px solid #fff;
		border-right: 2px solid #fff;
		-ms-transform: rotate(45deg);
		transform: rotate(45deg);
		margin: 0 0 0 15px;
	}
	.btn.nv a{
		background: #002076;
		width: 100%;
	}

.btn_list{
	display: flex;
	justify-content: center;
}
	.btn_list li{
		width: 380px;
		height: 80px;
		font-size: 18px;
	}
		.btn_list li:not(:last-child){
			margin-right: 40px;
		}
	.btn_list li.icon01 a{
		padding-right: 56px;
		width: 100%;
	}
	.btn_list li.icon01 a::before{
		content: "";
		display: inline-block;
		width: 56px;
		height: 56px;
		margin-right: 15px;
		background: url(../img/top/btn_icon01.png) no-repeat center/100%;
	}
	.btn_list li.btn a::after{
		-ms-transform: rotate(45deg)translateY(-50%);
		transform: rotate(45deg)translateY(-50%);
		position: absolute;
		top: 50%;
		right: 40px;
	}

.btn.check{
	width: 100%;
	height: 80px;
	margin: 0 auto 55px;
}
	.btn.check a::before{
		content: "";
		display: inline-block;
		background: url(../img/course/btn_icon.png) no-repeat center/100%;
		width: 20px;
		height: 20px;
		margin-right: 10px;
	}

.read{
	margin: 0 0 10px;
	color: #002076;
	font-size: 22px;
	text-align: center;
	letter-spacing: .1em;
}

#main sup{
	font-size: 90%;
	padding-right: .3em;
	line-height: 1;
	top: -.5em;
	position: relative;
}

/* コース共通
----------------------------------------- */
.course_wrap{
	border: 1px solid #005DAB;
	margin-bottom: 25px;
}
.course_wrap:last-of-type{
	margin-bottom: 55px;
}
	.course_wrap > dt{
		display: flex;
		align-items: center;
		/* cursor: pointer; */
		letter-spacing: .1em;
		position: relative;
	}
	/* .course_wrap > dt::after{
		content: "";
		display: block;
		width: 10px;
		height: 10px;
		border-bottom: 1px solid #002076;
		border-right: 1px solid #002076;
		-ms-transform: rotate(45deg)translateY(-50%);
		transform: rotate(45deg)translateY(-50%);
		position: absolute;
		top: 48%;
		right: 30px;
	} */
	/* .course_wrap > dt.is_select::after{
		border: none;
		border-top: 1px solid #002076;
		border-left: 1px solid #002076;
		-ms-transform: rotate(45deg)translateY(-50%);
		transform: rotate(45deg)translateY(-50%);
		position: absolute;
		top: 50%;
	} */
		.course_wrap > dt .bg{
			display: flex;
			align-items: center;
			height: 100%;
			background: #E5EEF7;
			padding: 23px 30px;
			max-width: 346px;
			width: 100%;
			color: #005DAB;
			font-size: 20px;
			font-weight: 500;
			flex-shrink: 0;
			line-height: 1.3;
		}
		.course_wrap > dt .number{
			display: flex;
			align-items: center;
			height: 100%;
			background: #005DAB;
			border-radius: 50%;
			width: 26px;
			height: 26px;
			color: #fff;
			justify-content: center;
			margin-right: 10px;
			letter-spacing: 0;
		}
		.course_wrap > dt small{
			font-size: 16px;
			display: block;
		}
		.course_wrap > dt .txt{
			padding: 0 50px 0 25px;
			flex: 1 0 0%;
		}
	.course_wrap > dd{
		display: none;
		border-top: 1px solid #005DAB;
		padding: 35px 65px 0;
	}
.bg_box{
	display: flex;
	background: #F2F6FB;
	border-radius: 10px;
	padding: 25px 30px;
	margin: 0 0 20px;
	font-size: 14px;
}
	.detail_title{
		margin: 0 0 10px;
		font-size: 18px;
		font-weight: 500;
	}
	.bg_box .logo_img{
		margin-bottom: 10px;
	}
	.bg_box .photo_area{
		width: 230px;
		flex-shrink: 0;
		margin-left: 25px;
	}
	.bg_box .photo_area .logo_img{
		text-align: right;
	}
.material_wrap{
	margin: 0 0 55px;
}
	.material{
		background: #002076;
		padding: 3px 0;
		margin: 0 0 15px;
		color: #fff;
		font-size: 20px;
		text-align: center;
	}
	.material span{
		display: inline-block;
		background: #fff;
		padding: 0 10px;
		margin: 0 10px 3px 0;
		color: #002076;
		font-size: 14px;
		vertical-align: middle;
	}
	.material_wrap .txt{
		margin: 0 0 10px;
		font-size: 14px;
		text-align: center;
	}
	.detail_wrap{
		flex: 1 0 0%;
	}
	.detail_wrap .phoot_list{
		margin: -10px 0 20px;
	}
	.img_wrap{
		display: flex;
		margin: 0 0 25px;
	}
	.img_wrap .main_photo{
		width: 47%;
		flex-shrink: 0;
		margin-right: 2.5%;
	}
.phoot_list{
	display: flex;
	flex-wrap: wrap;
	margin: -10px -5px 0 0;
	flex: 1 0 0%;
}
	.phoot_list li{
		margin: 10px 5px 0;
	}
	.phoot_list .col3{
		width: calc((100%/3) - 10px);
		max-width: 124px;
	}
	.phoot_list .col2{
		width: calc((100%/2) - 10px);
		max-width: 210px;
	}
	/* シングル */
	.phoot_list.single{
		justify-content: center;
		margin: -10px 0 25px;
	}

/* ゴアロゴ */
.logo_wrap{
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	margin: 0 0 15px;
}
	.course_wrap dd > .logo_wrap{
		margin-top: -20px;
	}
	.material_wrap .logo_wrap{
		margin-bottom: 25px;
	}

/* 2カラム */
.price_box{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	border: 1px solid #E3E3E3;
	border-radius: 10px;
	padding: 0 30px 25px;
	font-weight: 500;
}
	.price_box dl{
		width: calc((100%/2) - 10px);
		flex-shrink: 0;
		margin: 25px 0 0;
	}
	.price_box dt{
		border-bottom: 1px solid #E3E3E3;
		margin: 0 0 3px;
		color: #002076;
	}
	.price_box dd > div{
		display: flex;
		align-items: center;
	}
	.price_box dd .item{
		background: #EDEDED;
		border-radius: 12px;
		width: 180px;
		margin-right: 8px;
		text-align: center;
		flex-shrink: 0;
	}
	.price_box dd .item .arrow::before{
		content: "";
		display: inline-block;
		width: 0px;
		height: 0px;
		margin: auto;
		border-left: 8px solid #000;
		border-top: 5px solid transparent;
		border-bottom: 5px solid transparent;
		margin: 0 4px 1px;
	}
	.price_box dd .price{
		font-size: 18px;
	}
	.price_box dd .price strong{
		font-size: 28px;
	}
	.price_box dd .price small{
		font-size: 10px;
	}
/* シングル */
.price_box.single{
	display: block;
	max-width: 440px;
	width: 100%;
	margin: 0 auto;
}
	.price_box.single dl{
		display: block;
		width: 100%;
	}
/* 右画像 */
.price_box.quilt{
	max-width: 696px;
	margin: 0 auto;
}
	.price_box.quilt dl{
		width: 100%;
		flex: 1 0 0%;
	}
	.price_box .photo_area{
		max-width: 230px;
		flex-shrink: 0;
		margin: 25px 0 0 25px;
	}


/* コース2 */
#course_02,
#course_02 > dd{
	border-color: #38B8EF;
}
	#course_02 > dt .bg{
		background: #EAF8FE;
		color: #26A5DB;
	}
	#course_02 > dt .number{
		background: #26A5DB;
	}
	#course_02 .bg_box{
		background: #F4FBFE;
	}

/* コース3 */
#course_03,
#course_03 > dd{
	border-color: #E88AB6;
}
	#course_03 > dt .bg{
		background: #FCEBF2;
		color: #AA1B46;
	}
	#course_03 > dt .number{
		background: #AA1B46;
	}
	#course_03 .bg_box{
		background: #FCEBF2;
	}
	#course_03 .bg_box .btn{
		margin-top: 10px;
		width: 262px;
		height: 56px;
	}

/* コース4 */
#course_04,
#course_04 > dd{
	border-color: #80412A;
}
	#course_04 > dt .bg{
		background: #F7EEE9;
		color: #80412A;
	}
	#course_04 > dt .number{
		background: #80412A;
	}
	#course_04 .bg_box{
		background: #F7EEE9;
	}

/* コース4 */
#course_05,
#course_05 > dd{
	border-color: #59ACA0;
}
	#course_05 > dt .bg{
		background: #EEF7F5;
		color: #59ACA0;
	}
	#course_05 > dt .number{
		background: #44A597;
	}
	#course_05 .bg_box{
		background: #F6FBFA;
	}


/* ▼▼▼ 480px〜768px
======================================================*/
@media screen and (max-width: 768px) {

	/* 共通
	----------------------------------------- */
	/* ボタン */
	.btn a{
	width: 100%;
	}
	.btn_list{
		display: block;
	}
		.btn_list li{
			width: 100%;
			height: 64px;
			margin: 0 auto;
			font-size: 16px;
		}
			.btn_list li:not(:last-child){
				margin: 0 auto 20px;
			}
		.btn_list li a{
			padding-right: 8%;
		}
		.btn_list li.icon01 a::before{
			content: "";
			display: inline-block;
			width: 49px;
			height: 49px;
			margin-right: 15px;
		}
		.btn_list li.btn a::after{
			right: 7%;
		}

	.btn.check{
		width: 100%;
		height: 64px;
		margin: 0 auto 30px;
	}
		.btn.check a::before{
			margin-right: 5px;
		}

	.read{
		margin: 0 0 5px;
		font-size: 18px;
	}


	/* コース共通
	----------------------------------------- */
	.course_wrap{
		margin-bottom: 15px;
	}
	.course_wrap:last-of-type{
		margin-bottom: 30px;
	}
		.course_wrap > dt{
			display: block;
		}
		.course_wrap > dt::after{
			display: none;
		}
			.course_wrap > dt .bg{
				height: 100%;
				padding: 10px 20px;
				font-size: 18px;
			}
			.course_wrap > dt .number{
				width: 23px;
				height: 23px;
				margin-right: 10px;
				font-size: 16px;
			}
			.course_wrap > dt small{
				font-size: 16px;
				display: block;
			}
			.course_wrap > dt .txt{
				display: block;
				padding: 10px 30px 10px 15px;
				width: 100%;
				position: relative;
			}
			/* .course_wrap > dt .txt::after{
				content: "";
				display: block;
				width: 8px;
				height: 8px;
				border-bottom: 1px solid #002076;
				border-right: 1px solid #002076;
				-ms-transform: rotate(45deg)translateY(-50%);
				transform: rotate(45deg)translateY(-50%);
				position: absolute;
				top: 48%;
				right: 15px;
			}
			.course_wrap > dt.is_select .txt::after{
				border: none;
				border-top: 1px solid #002076;
				border-left: 1px solid #002076;
				-ms-transform: rotate(45deg)translateY(-50%);
				transform: rotate(45deg)translateY(-50%);
				position: absolute;
				top: 50%;
			} */
		.course_wrap > dd{
			padding: 15px;
		}
	.bg_box{
		display: block;
		padding: 15px 20px;
		margin: 0 0 25px;
	}
		.bg_box .photo_area{
			max-width: 230px;
			width: 100%;
			margin: 20px auto 0;
		}
	.material_wrap{
		margin: 0 0 10px;
	}
		.material{
			padding: 3px 10px;
			margin: 0 0 15px;
			font-size: 18px;
		}
		.material span{
			padding: 0 8px;
			margin: 0 5px 2px 0;
			font-size: 12px;
		}
		.material_wrap .txt{
			margin: 0 0 20px;
			font-size: 14px;
			text-align: left;
		}
		.detail_wrap .phoot_list{
			margin: -10px 0 25px;
		}
		.img_wrap{
			display: block;
			margin: 0 0 25px;
		}
		.img_wrap .main_photo{
			width: 100%;
			flex-shrink: 0;
			margin: 0 0 15px;
		}
	.phoot_list{
		justify-content: center;
		margin: -10px -5px 0;
		flex: 1 0 0%;
	}
		.phoot_list li{
			margin: 10px 5px 0;
		}
		.phoot_list .col3{
			width: calc((100%/2) - 10px);
		}
		.phoot_list .col2{
			width: 100%;
		}
		/* シングル */
		.phoot_list.single{
			justify-content: center;
			margin: -10px 0 25px;
		}

	/* ゴアロゴ */
	.logo_wrap{
		margin: 0 0 15px;
	}
		.course_wrap dd > .logo_wrap{
			margin-top: -5px;
		}
		.logo_wrap p:nth-of-type(1) img{
			width: 110px;
			height: auto;
		}
		.logo_wrap p:nth-of-type(2) img{
			width: 115px;
			height: auto;
		}
		.material_wrap .logo_wrap{
			margin-bottom: 20px;
		}

	/* 2カラム */
	.price_box{
		display: block;
		border-radius: 10px;
		padding: 0 10px 20px;
	}
		.price_box dl{
			width:  100%;
			margin: 20px 0 0;
		}
		.price_box dt{
			border-bottom: 1px solid #E3E3E3;
			margin: 0 0 3px;
			color: #002076;
		}
		.price_box dd > div{
			display: flex;
			align-items: center;
		}
		.price_box dd .item{
			width: 128px;
			margin-right: 5px;
			font-size: 11px;
		}
		.price_box dd .item .arrow::before{
			border-left: 5px solid #000;
			border-top: 3px solid transparent;
			border-bottom: 3px solid transparent;
			margin: 0 2px 1px;
		}
		.price_box dd .price{
			font-size: 14px;
		}
		.price_box dd .price strong{
			font-size: 20px;
		}
		.price_box dd .price small{
			font-size: 10px;
		}
	/* シングル */
	.price_box.single{
		display: block;
		max-width: 440px;
		width: 100%;
		margin: 0 auto;
	}
		.price_box.single dl{
			display: block;
			width: 100%;
		}
	/* 右画像 */
	.price_box.quilt{
		max-width: 696px;
		margin: 0 auto;
	}
		.price_box.quilt dl{
			width: 100%;
		}
		.price_box .photo_area{
			margin: 20px 0 0 25px;
		}


}