/* 7つの特典と3つのサポートページ */

.page-template-page-member-benefits #content.site-content {
	flex-direction: column;
}

/* ヒーロー背景 */
.member-benefits-hero {
	background-image: url('../img/member-benefits/hero.jpg');
	background-size: cover;
	background-position: center top;
}

/* ============================================
   特典07: 全幅カード
   ============================================ */
.member-benefits-item--full {
	flex: 0 0 100% !important;
}

/* ============================================
   特典内ボタン
   ============================================ */
.member-benefits-btn-wrap {
	margin-top: 16px;
	margin-bottom: 24px;
}

.member-benefits-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	background: #4da487;
	color: #fff;
	font-size: 15px;
	font-weight: bold;
	padding: 12px 56px 12px 24px;
	border-radius: 50px;
	text-decoration: none;
	transition: opacity 0.2s;
}

.member-benefits-btn:hover {
	opacity: 0.85;
	color: #fff;
}

.member-benefits-btn-arrow {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	width: 28px;
	height: 28px;
	background: rgba(255, 255, 255, 0.35);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.member-benefits-btn-arrow::after {
	content: '›';
	font-size: 20px;
	line-height: 28px;
	color: #fff;
	display: block;
	text-align: center;
	width: 100%;
}

/* ============================================
   3つのサポートラップ
   ============================================ */
.member-benefits-features-wrap {
	background: #fef5f0;
}

/* ============================================
   入会フォームボタン
   ============================================ */
.member-benefits-join-wrap {
	background: #fff;
}

.member-benefits-join-wrap .section-inner {
	padding-top: 52px;
	padding-bottom: 52px;
	text-align: center;
}

.member-benefits-join-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	background: #4da487;
	color: #fff;
	font-size: 20px;
	font-weight: bold;
	padding: 20px 80px;
	border-radius: 50px;
	text-decoration: none;
	min-width: 360px;
	transition: opacity 0.2s;
}

.member-benefits-join-btn:hover {
	opacity: 0.85;
	color: #fff;
}

/* ============================================
   レスポンシブ
   ============================================ */
@media screen and (max-width: 768px) {

	.member-benefits-item--full {
		flex: 0 0 100% !important;
	}

	.member-benefits-join-btn {
		min-width: 0;
		width: calc(100% - 40px);
		font-size: 17px;
		padding: 18px 60px;
	}
}