@charset "UTF-8";
/* membership.css */

/* ===== 各クラス・コースについて ===== */
#sec_membership .wrap {
	width: fit-content;
}

.head_box {
	width: fit-content;
	min-width: 15em;
	display: block;
	text-align: left;
	position: relative;
	padding: .5em 1.25em;
	color: #fff;
	background-color: red;
}
.head_box:after {
	content: "";
	width: 20%;
	height: 100%;
	display: block;
	position: absolute;
	top:   0;
	right: 0;
	background-image: url(../../img/membership/head_bg_icon.svg);
	background-repeat: no-repeat;
	background-position: left center;
	background-size: cover;
	z-index: 1;
	mix-blend-mode: overlay;
	opacity: .7;
}
.box_yellow { background-color:#bf9c50; }
.box_blue   { background-color:#070a4a; }
.box_red    { background-color:#a0141a; }

/* dl */
.about_membership div {
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
	justify-content: flex-start;
	padding-top: 20px;
}
.about_membership dt  {
	width: fit-content;
	min-width: 10em;
	text-align: center;
	color: #fff;
	border-radius: 30px;
	margin-left:  2em;
	margin-right: 1em;	
}
.about_membership dd  {
	font-weight: 500;
}
/* まとめテキスト */
.enjoy_soccer {
	line-height: 1.5;
	letter-spacing: .2em;
	text-align: center;
}


/* ===== 入会までの流れ ===== */
.p_fit {
	width: fit-content;
	max-width: 630px;
	margin-left:  auto;
	margin-right: auto;
}
.p_fit * {
	line-height: 1.7;
	font-weight: 500;
}
.p_fit p {
	margin-bottom: .75em;
}


.step_card {
	width: 100%;
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
	justify-content: flex-start;
}
.step_card + .step_card {
	margin-top: 60px;
}
.step_card .num {
	width: fit-content;
	font-size: min(7vw,70px);
	line-height: 1;
	margin-right: .5em;
}
.step_card .num small {
	font-size: min(3.6vw,36px);
	display: block;
}
/* 文章 */
.step_card .cont_wrap {
	width: 100%;
}
.step_card h4 {
	width: 100%;
	text-align: left;
	margin-bottom:  .75em;
	padding-bottom: .75em;
	border-bottom: 4px solid #070a4a;
}
/* ボタン */
.step_card .btn a {
	margin-left: 0;
}

/* ===== FaQ ===== */
#sec_faq .num {
	font-size: min(5vw,50px);
	min-width: 2.2em;
	text-align: center;
	letter-spacing: .05em;
}


/* ===== 各カテゴリーの活動や会費について（コースページへのリンク） ===== */
.actlink_wrap {
	width: 100%;
	max-width: 900px;
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	justify-content: space-between;
	margin-left:  auto;
	margin-right: auto;
}
.actlink_wrap a {
	width: calc(100%/3 - 3%);
	font-weight: bold;
	display: block;
	position: relative;
	padding: 1em;
	color: #fff;
	text-align: center;
	opacity: 1;
	transition: opacity .3s;
}
.actlink_wrap a:hover {
	opacity: .7;
}

.actlink_wrap a:after {
	content: "";
	width:  25%;
	height: 100%;
	display: block;
	position: absolute;
	top:   0;
	right: 0;
	background-image: url(../../img/membership/head_bg_icon.svg);
	background-repeat: no-repeat;
	background-position: left center;
	background-size: cover;
	z-index: 1;
	mix-blend-mode: overlay;
	opacity: .7;
}





@media screen and (max-width:850px) {
	/* ===== 各クラス ===== */
	#sec_membership h2 {
		margin-bottom: 1em;
	}
	.about_membership div:first-of-type {
		padding-top:    10px;
		padding-bottom: 15px;
	}
	.about_membership div + div {
		padding-top:    15px;
		padding-bottom: 10px;
		border-top:  1px solid #070a4a;
	}
	.about_membership div {
		font-size: 13px;
		position: relative;
	}
	.about_membership div:after {
		content: "";
		width: 1px;
		height: 100%;
		display: block;
		position: absolute;
		top:   0;
		left: 6.5em;
		background-color: #070a4a;
	}
	.about_membership dt {
		min-width: 6.5em;
		text-align: left;
		position: relative;
		align-self: center;
		margin-left: 0;
		color: #070a4a;
		border-radius: 0;
		background-color: transparent;
	}
	#sec_membership dd {
		line-height: 1.5;
	}

	/* ===== 入会までの流れ ===== */
	.step_card .num {
		font-size: 30px;
	}
	.step_card .num small {
		font-size: 16px;	
	}
	.step_card + .step_card {
		margin-top: 30px;
	}

	/* ===== FaQ ===== */
	#sec_faq .num {
		font-size: 20px;
		padding-top: 2px;
	}



	/* ===== 各カテゴリーの活動や会費について（コースページへのリンク） ===== */
	@media screen and (max-width:499px) {
		.actlink_wrap {
			flex-wrap: wrap;
		}
		.actlink_wrap a {
			width: 100%;
		}
		.actlink_wrap a + a {
			margin-top: 10px;
		}
		.actlink_wrap a:after {
			width: 17%;
		}
	}
}