@charset "utf-8";

#first_view{
	background-color:#06111a;
	min-height:100vh;
	width:100%;
	position:relative;
	z-index:9;
	color:#fff;
}

h2{
	color:#909090;
	padding-top:85px;
	padding-left:50px;
}

h3{
	font-size:32px;
	text-align:center;
}

#first_view h3{
	margin-top:75px;
}

#first_view h3 span{
	display:block;
	margin-top:10px;
	font-size:16px;
	line-height:28px;
}

#first_view > p{
	text-align:center;
	font-weight:bold;
	margin-top:65px;
	font-size:16px;
	line-height:28px;
}

#first_view ul li{
	text-align:center;
}

#first_view ul li small{
	color:#909090;
	font-size:16px;
	line-height:28px;
}

#first_view ul li .detail{
	font-size:18px;
	line-height:28px;
	margin-top:10px;
}

#first_view ul li .detail span{
	font-size:88px;
	line-height:88px;
}

#first_view ul li .date{
	font-size:12px;
}

#first_view ul li hr{
	width:80px;
	height:6px;
	border:0;
	margin:20px auto 0 auto;
  background: -webkit-linear-gradient(0deg, rgba(48,94,209,1) 20%, rgba(124,222,131,1) 100%);
}

#first_view .comment{
	margin-top:120px;
	text-align:center;
	padding-bottom:130px;
	font-size:16px;
}

#first_view .comment p{
	display:inline-block;
	position:relative;
}

#first_view .comment p span{
	font-size:16px;
}

#first_view .comment p:before{
	content:"";
	display:block;
	position:absolute;
	width:42px;
	height:32px;
	background:url(../image/membership/point02@2x.png)no-repeat center center;
	background-size:cover;
	left:-30px;
	top:-30px;
}

#first_view .comment p:after{
	content:"";
	display:block;
	position:absolute;
	width:42px;
	height:32px;
	background:url(../image/membership/point01@2x.png)no-repeat center center;
	background-size:cover;
	right:-45px;
	bottom:-15px;
}

#merit{
	background-color:#0f1820;
	color:#fff;
	padding-bottom:150px;
}

#merit h3{
	padding-top:110px;
}

#merit h3 span{
	display:block;
	margin-top:10px;
	font-size:16px;
	line-height:28px;
}

#merit .merit_area{
	max-width:800px;
	margin:75px auto 0 auto;
}

#merit .merit_area dl{
	justify-content:flex-start;
	display:flex;
	flex-wrap:wrap;
	font-weight:bold;
	margin-bottom:50px;
}

#merit .merit_area dl dt{
	width:75px;
	font-size:60px;
	line-height:1;
	box-sizing:border-box;
	color: #fff;
}

#merit .merit_area dl dd{
	flex:1;
	font-size:22px;
	line-height:34px;
	padding-left:50px;
}

#merit .merit_area dl:nth-child(1) dt{
	background: -webkit-linear-gradient(270deg, #7cde83 0%, #77d588 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

#merit .merit_area dl:nth-child(2) dt{
	background: -webkit-linear-gradient(270deg, #68bd97 0%, #5faea0 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

#merit .merit_area dl:nth-child(3) dt{
	background: -webkit-linear-gradient(270deg, #4d8eb3 0%, #447fbd 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

#merit .merit_area dl:nth-child(4) dt{
	background: -webkit-linear-gradient(270deg, #3566cc 0%, #305ed1 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

#prosess{
	padding-top:110px;
}

#prosess h3 span{
	display:block;
	margin-top:10px;
	font-size:16px;
	line-height:28px;
}

#prosess ul{
	justify-content:center;
	display:flex;
	flex-wrap:wrap;
	height:450px;
	margin-top:70px;
}

#prosess ul li{
	width:50%;
}

#prosess ul li:first-child{
	background-color:#efefef;
	justify-content:flex-end;
	display:flex;
	flex-wrap:wrap;
}

#prosess ul li:last-child{
	background:url(../image/membership/process_bg.png)no-repeat center left #e2e2e2;
}

#prosess ul li:first-child div{
	width:490px;
}

#prosess ul li:last-child div{
	max-width:490px;
	padding-left:160px;
	box-sizing:border-box;
}

#prosess ul li h4{
	padding-top:50px;
	display:inline-block;
}

#prosess ul li h4 hr{
	width:60px;
	height:3px;
	border:0;
	margin:3px auto 0 auto;
  background: -webkit-linear-gradient(0deg, rgba(48,94,209,1) 20%, rgba(124,222,131,1) 100%);
}

#prosess ul li h5{
	padding-top:35px;
	font-size:22px;
	line-height:35px;
}

#prosess ul li h5 a{
	color:#400dff;
}

#prosess ul li p{
	padding-top:30px;
	font-size:16px;
	line-height:28px;
}

#prosess ul li p a{
	text-decoration:underline;
}

#prosess ul li p span{
	font-size:12px;
	line-height:22px;
}

.end_info{
	text-align:center;
	font-size:16px;
	line-height:28px;
	padding:70px 0;
}

.end_info a{
	color:#400dff;
}

#program_detail{
	background-color:#06111A;
	padding:160px 20px;
	color:#fff;
}

#program_detail h3 span {
	display: block;
	margin-top: 10px;
	font-size: 15px;
	line-height: 22px;
}

#program_detail ul.program_detail_list{
	max-width:870px;
	margin:auto;
}

#program_detail ul.program_detail_list li{
	justify-content:space-between;
	display:flex;
	flex-wrap:wrap;
	margin-top:80px;
}

#program_detail ul.program_detail_list li:nth-child(odd){
	flex-direction: row-reverse;
}

#program_detail ul.program_detail_list li .image_area{
	width:44.82%;
}

#program_detail ul.program_detail_list li .text_area{
	width:44.82%;
}

#program_detail ul.program_detail_list li .text_area dl{
	justify-content:flex-start;
	display:flex;
	flex-wrap:wrap;
	align-items:center;
}

#program_detail ul.program_detail_list li .text_area dl dt{
	font-weight: bold;
	font-size: 60px;
	line-height: 77px;
	letter-spacing: -0.04em;
	text-shadow: 0px 4px 37px rgba(0, 0, 0, 0.25);
	width:80px;
}

#program_detail ul.program_detail_list li .text_area dl dd{
	flex:1;
	font-size: 20px;
	line-height: 30px;
	text-shadow: 1px -1px 19px rgba(0, 0, 0, 0.52);
}

#program_detail ul.program_detail_list li .text_area p{
	font-weight: bold;
	font-size: 16px;
	line-height: 180%;
	letter-spacing: 0.02em;
}

h3.timeline{
	margin-top:100px;
}

.timeline_image{
	text-align:center;
	margin-top:100px;
}

@media all and (max-width: 900px) {

	#prosess ul li p{
		padding-top:20px;
		font-size:14px;
	}


}


@media all and (min-width: 768px) {

	#first_view ul{
		justify-content:space-between;
		display:flex;
		flex-wrap:wrap;
		max-width:800px;
		margin:100px auto 0 auto;
		font-weight:bold;
	}


}

@media all and (max-width: 769px) {
	section{
		padding-left:30px;
		padding-right:30px;
		box-sizing:border-box;
	}

	h2{
		font-size:12px;
	}

	section#prosess{
		padding-left:0;
		padding-right:0;
	}

	#prosess ul li:first-child{
		width:45%;
	}

	#prosess ul li:last-child{
		width:55%;
	}

	#prosess ul li:first-child div{
		box-sizing:border-box;
		padding-left:20px;
	}

	#prosess ul li:last-child div{
		box-sizing:border-box;
		padding-right:20px;
	}

	#prosess ul li h5{
		padding-top:15px;
	}

	#prosess ul li p{
		padding-top:10px;
		font-size:14px;
		line-height:22px;
	}

}

@media all and (max-width: 767px) {

	#first_view{
		padding-bottom:100px;
	}

	#first_view h3{
		margin-top:50px;
	}

	#first_view > p{
		margin-top:50px;
	}

	#first_view ul{
		font-weight:bold;
		margin-top:60px;
	}

	#first_view ul li{
		margin-bottom:70px;
	}

	#first_view ul li hr{
		margin-top:10px;
	}

	#first_view .comment {
		margin-top:110px;
	}

	#first_view .comment p{
		font-size:16px;
		line-height:25px;
	}

	#first_view .comment p:before{
		left:0;
		top:-45px;
	}

	#first_view .comment p:after{
		right:0;
		bottom:-45px;
	}

	#merit{
		padding-bottom:70px;
	}

	#merit .merit_area dl dd{
		padding-left:20px;
		font-size:16px;
	}

	#prosess ul{
		display:block;
		height:auto;
	}

	#prosess ul li h4{
		padding-top:30px;
	}

	#prosess ul li:first-child{
		background:url(../image/membership/sp/process_bg.png)no-repeat center bottom #efefef;
		width:100%;
		padding-bottom:95px;
	}

	#prosess ul li:last-child{
		width:100%;
		background:#e2e2e2;
		padding-bottom:60px;
	}

	#prosess ul li:first-child div,
	#prosess ul li:last-child div{
		padding:0 30px;
	}

	#prosess ul li p{
		font-size:14px;
		line-height:28px;
	}

	h2{
		padding-left:0;
	}

	.end_info{
		font-size:13px;
		line-height:28px;
		padding:20px 0 50px 0;
	}

	#program_detail{
		padding:60px 20px;
	}

	#program_detail ul.program_detail_list li{
		display:block;
		margin-top:60px;
	}

	#program_detail ul.program_detail_list li .image_area{
		width:100%;
	}

	#program_detail ul.program_detail_list li .text_area{
		width:100%;
	}

	#program_detail ul.program_detail_list li .text_area dl dt{
		font-size: 50px;
		line-height: 64px;
	}

	#program_detail ul.program_detail_list li .text_area dl dd{
		font-size: 16px;
		line-height: 24px;
	}

	#program_detail ul.program_detail_list li .text_area p{
		font-size: 13px;
	}

	.timeline_image{
		margin-top:60px;
	}

}

@media all and (max-width: 375px) {


}

@media all and (max-width: 320px) {


}