@charset "utf-8";
/*======================
pc
======================*/
.new_app {
	padding: 30px 80px 80px;
	font-weight: 500;
}
h2 {
	font-size: 32px;
	font-weight: 700;
}
p {
	font-size: 16px;
	line-height: 2;
}
.new_app span{
	color: #DB0034;
	font-weight: 700;
}
.nowrap {
	flex-wrap: nowrap;
}
/* リード文 */
.area,
.section_area {
	margin-top: 50px;
}
.area_title { /* h3 */
	color: #867361;
	font-size: 24px;
	font-weight: 700;
	position: relative;
	padding: 20px 20px 20px 40px;
	background: #F8F8F8;
	border-left: 8px solid #EAE5DF;
	margin-bottom: 50px;
}
.area_text {
	align-items: center;
	gap: 30px;
}
.appicon{
	width: 91px;
	height: 91px;
}
.lead_text{
	font-weight: 700;
	color: #DB0034;
	font-size: 24px;
	line-height: 1.75;
}
.lead_image {
	margin: 40px 0 40px;
}

.app_box {
	gap: 22px;
	justify-content: center;
	flex-wrap: wrap;
}
.appstore,
.googleplay{
	background: #F8F8F8;
	align-items: center;
	padding: 20px;
	border-radius: 16px;
	flex-wrap: wrap;
	gap: 15px;
	justify-content: center;
	height: fit-content;
}
.qr_app img,
.qr_app img{
	max-width: 182px;
	max-height: 182px;
	width: auto;
}
.appstore .btn_app a img,
.googleplay .btn_app a img{
	height: 60px;
}
.register_list ol {
	counter-reset: counter-name;
}
.register_list ol li {
    margin: 0; 
	color: #4EC1B8;
    position: relative;
    padding-left: 20px;
	margin-bottom: 20px;
	font-size: 16px;
	font-weight: 700;
}
.register_list ol li:before {
    counter-increment: counter-name;
    content: counter(counter-name) ".";
    color: #867361;
    position: absolute;
    left: 0;
	font-weight: 900;
}
.register_btn_area {
	gap: 40px;
	margin-top: 50px;
	justify-content: center;
}
.register_btn_area a {
	line-height: 1.44;
	padding: 12px 30px;
	width: 317px;
	height: 70px;
}
.register_attention {
	background: #F0EFEC;
	min-height: 52px;
	text-align: center;
	border-radius: 8px;
	padding: 10px 20px;
	margin-top: 50px;
}
.register_text {
	margin: 50px 0 30px;
}
.notes{
	margin-top: 32px;
	font-size: 14px;
	color: #867361;
	line-height: 2;
}

/* 「メンバー新規ご入会の方」のアプリ登録方法 */
.section_title {
	position: relative;
	line-height: 1.25;
	padding-top: 4px;
	margin: 86px 0 50px 81px
}
.section_title::after {
	content: ""; /* 擬似要素を有効化 */
	position: absolute;
	left: 0;
	top: 56px;
	width: 100%; /* 線の幅を要素全体に広げる */
	height: 1px; /* 線の太さ */
	background: repeating-linear-gradient(
	to right,
		#707070, /* 線の開始地点 */
		#707070 6px, /* 線の終了地点(長さ) */
		transparent 6px, /* 透明部分の開始地点(線の後ろから) */
		transparent 11px /* 透明部分の終了地点(0から数える) */
	);
}
.card::before {
	content: "";
	position: absolute;
    top: 0;
    left: -81px;
    display: block;
    width: 60px;
    height: 60px;
	background: #fff url(../img/new_app/card.png) no-repeat;
	background-size: contain;
	border-radius: 50%;
}
.card_enter::before {
	content: "";
	position: absolute;
    top: 0;
    left: -81px;
    display: block;
    width: 60px;
    height: 60px;
	background: #fff url(../img/new_app/card_enter.png) no-repeat;
	background-size: contain;
	border-radius: 50%;
}
.question::before {
	content: "";
	position: absolute;
    top: 0;
    left: -81px;
    display: block;
    width: 60px;
    height: 60px;
	background: #fff url(../img/new_app/question.png) no-repeat;
	background-size: contain;
	border-radius: 50%;
}
.attention {
	background: #8D8D8D;
	border-radius: 50px;
	padding: 18px 30px;
}
.attention p {
	color: #fff;
	line-height: 1.5;
	text-align: center;
}
.step {
	margin: 0 auto;
	margin-top: 50px;
	max-width: 944px;
}
.step p {
	line-height: 1.5;
}
.appeal {
	position: relative;
	margin-top: 63px;
	margin-bottom: 50px;
}
.appeal p{
	font-size: 22px;
	text-align: center;
	line-height: 1.45;
	color: #867361;
}
.appeal::before,
.appeal::after {
	content: ""; /* 擬似要素を有効化 */
	position: absolute;
	left: 0;
	width: 100%; /* 線の幅を要素全体に広げる */
	height: 1px; /* 線の太さ */
	background: repeating-linear-gradient(
	to right,
		#707070, /* 線の開始地点 */
		#707070 2px, /* 線の終了地点(長さ) */
		transparent 2px, /* 透明部分の開始地点(線の後ろから) */
		transparent 7px /* 透明部分の終了地点(0から数える) */
	);
}
.appeal::before{
	top: -30px;
}
.appeal::after {
	top: 62px;
}
.content_box {
	margin-top: 32px;
	background: #fff;
	flex: 1 1 100%;  
}
.content_box_title {
	height: 92px;
}
.content_box_title h3 {
	width: 100%;
	background: #F8F8F8;
	font-size: 20px;
	line-height: 1.4;
	color: #867361;
	font-weight: 700;
    padding-left: 10px;
	padding-right: 10px;
	align-items: center;
}
.content_num {
	background: #4EC1B8;
    padding: 0px 12px 0;
	justify-content: center;
	align-items: center;
}
.content_num p {
	font-size: 20px;
	font-weight: 700;
	color: #fff;
	line-height: 1.2;
}
.content_num p span {
	font-size: 40px;
	font-weight: 700;
	color: #fff;
	margin-left: 2px;
}
.content_text {
	line-height: 1.5;
	align-self: flex-start;
}
.col1 .content_box .content_area {
	padding: 30px;
}
.col1 .content_box .flex img {
	width: 437px;
}
.content_inner {
	gap: 60px;
	justify-content: center;
	margin-top: 40px;
}
.app_img {
	padding-left: 25px;
}
.app_box_inner {
	gap: 22px;
    align-items: center;
	justify-content: center;
}
.app_box_inner .appstore,
.app_box_inner .googleplay {
	flex-direction: column;
}
.app_box_inner .appstore .btn_app,
.app_box_inner .googleplay .btn_app {
    max-width: 160px;
}

.col3,
.col2 {
	gap: 20px;
}
.col3 .content_box {
	min-height: 442px;
	justify-content: space-between;
	flex: 1 1 32%;
}
.col2 .content_box {
	flex: 1 1 49%;
}
.content_area {
	padding: 30px;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start; /* 既存のコンテンツを上揃え */
}
.content_area_row {
	padding: 30px;
	align-items: center;
	justify-content: flex-start; /* 既存のコンテンツを上揃え */
	gap: 40px;
}
.content_area_low {
	min-height: 502px;
}
.content_area_high {
	min-height: 535px;
}
.img_single {
	margin-top: auto; /* 画像を親要素の下端に揃える */
	max-width: 191px;
}
.img_double {
	margin-top: auto; /* 画像を親要素の下端に揃える */
	width: 422px;
}

.faq_box {
	background: #fff;
	border-radius: 20px;
	padding: 30px 40px;
	margin-bottom: 35px;
}
.faq_box_title {
	display: flex;
	align-items: center;
	margin-bottom: 20px;
}
.faq_box_title span {
	font-size: 32px;
	font-weight: 700;
	display: block;
	margin-right: 10px;
	line-height: 1;
	padding-bottom: 5px;
	color: #4EC1B8;
}
.faq_box_title h3{
	font-size: 20px;
	font-weight: 700;
	color: #4EC1B8;
	display: flex;
}
.faq_link {
	color: #BA8B1F;
    text-decoration: underline;
}
.br_pc {
	display: block;
}
.br_tb,
.br_sp {
	display: none;
}

/*======================
tb
======================*/
@media screen and (max-width: 1023px) {
	h2 {
		font-size: 28px;
	}
	.new_app {
		padding: 20px 50px 50px;
	}
	.lead_text {
		flex: 1 1 50%;
	}
	.content_area_row{
		flex-direction: column;
	}
	.register_btn_area a {
		font-size: 16px;
	}
	.appeal::after {
		top: 80px;
	}
	.appeal p{
		font-size: 18px;
	}
	.br_pc,
	.br_tb {
		display: block;
	}
	.br_sp {
		display: none;
	}

}

/*======================
mb
======================*/
@media screen and (max-width: 425px) {
	h2,
	.lead_text {
		font-size: 18px;
	}
	p,
	.register_list ol li {
		font-size: 14px;
		line-height: 1.5;
	}
	.new_app {
		padding: 10px 30px 30px;
	}
	.area_title {
		padding: 15px 15px 15px 20px;
		font-size: 20px;
		margin-bottom: 30px;
	}
	.area_text {
		flex-direction: column;
		gap: 15px;
	}
	.content_text {
		margin-bottom: 30px;
	}
	.content_inner {
		gap: 30px;
		margin-top: 0;
	}
	.register_btn_area {
		flex-direction: column;
	}
	.register_btn_area a {
		width: 100%;
	}
	.appeal p{
		font-size: 16px;
	}
	.content_box_title h3,
	.faq_box_title h3 {
		font-size: 16px;
	}
	.col2 .content_box .content_area {
		min-height: 250px;
	}
	.col3 .content_box .content_area {
		min-height: 350px;
	}
	.content_area_row {
		gap:0;
	}
	.qr_app img,
	.qr_app img{
		max-width: 130px;
		max-height: 130px;
	}
	.br_pc {
		display: none;
	}
	.br_tb,
	.br_sp {
		display: block;
	}
}