@charset "utf-8";

#about{
	background: url("../img/about/about_bg.jpg") no-repeat bottom center;
	background-size: cover;
	padding: 180px 0 215px;
}
#about h1{
	color: #a0833f;
	font-size: 42px;
	text-align: center;
	margin-bottom: 80px;
	letter-spacing: 0.05em;
}
#about h1 strong{
	color: #000;
	font-size: 60px;
	display: block;
	margin-top: 10px;
	text-align: center;
}
.about_intro{
	margin-bottom: 0px;
}
.about_introimg{
	text-align: center;
	margin-bottom: 110px;
}
.about_member{
	text-align: center;
}
.about_member a{
	background: rgba(17,17,17,0.9);
	border: 2px solid;
	border-image: linear-gradient(to bottom, #dab754, #eccf51, #cdb038) 1;
	color: #FFF;
	font-size: 20px;
	text-decoration: none;
	display: inline-flex;
	width: 90%;
	max-width: 500px;
	height: 120px;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}
.about_member a p strong{
	color: #ffcf44;
	font-size: 30px;
	display: block;
	text-align: center;
}
.about_member a p small{
	font-size: 0.7em;
	display: block;
	text-align: center;
}
.about_member a:hover{
	background: rgba(17,17,17,1);
}
/* about_point */
#about_point{
	background-image: linear-gradient(#090808, #090808 55%, #f7f7f7);
	padding: 50px 0 120px;
}
.point_readtext{
	text-align: center;
	margin-bottom: 50px;
}
.point_readtext p{
	color: #FFF;
	font-size: 18px;
	line-height: 260%;
}
.point_container{
	margin: 0 25px;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.point_container .point_detail{
	background: #FFF;
	border-radius: 10px;
	width: 30.43478260869565%;
	padding: 30px 25px 60px;
}
.point_container .point_detail .point_icon{
	margin-bottom: 15px;
}
.point_container .point_detail h3{
	font-size: 28px;
	font-weight: 500;
	text-align: center;
	margin-bottom: 30px;
}
.point_container .point_detail p{
	font-size: 16px;
	font-weight: 500;
	text-align: center;
}
#about_member{
	background: #f7f7f7;
	padding: 100px 0;
}
.about_memberhead{
	margin-bottom: 50px;
}
.about_memberhead h2{
	width: 90%;
	max-width: 320px;
	margin: 0 auto 20px;
}
.about_memberhead p{
	color: #a0833f;
	font-size: 32px;
	font-weight: 500;
	text-align: center;
}
.about_member_benefit{
	margin: 0 25px 80px;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.about_member_benefit .benefit_detail{
	width: 30.43478260869565%;
}
.about_member_benefit .benefit_detail .benefit_img{
	margin-bottom: 20px;
}
.about_member_benefit .benefit_detail h3{
	color: #a0833f;
	font-size: 24px;
	font-weight: 500;
	text-align: center;
	margin-bottom: 10px;
}
.about_member_benefit .benefit_detail p{
	font-size: 16px;
	font-weight: 500;
	line-height: 180%;
	text-align: center;
}
#faq{
	padding: 100px 0;
}
.center_ttl{
	color: #a0833f;
	font-size: 32px;
	font-weight: 500;
	text-align: center;
	margin-bottom: 50px;
}
.faq_ttl{
	color: #a0833f;
	font-size: 18px;
	font-weight: 500;
	margin-bottom: 5px;
}
.faq_ttl:nth-child(n+2){
	margin-top: 30px;
}
.faq_contents{
	padding: 20px 0;
	border-top: 1px solid #888888;
}
.faq_contents:first-child{
	border: none;
}
.faq_contents span{
	color: #a0833f;
	margin-right: 5px;
}
.faq_contents .question{
	font-size: 16px;
	font-weight: 500;
	cursor: pointer;
}
.faq_contents .answer{
	display: none;
	font-size: 16px;
	margin-left: 40px;
	padding-top: 15px;
	text-indent: -1.2em;
    padding-left: 1.2em;
}
.faq_table ul{
	display:flex;
	flex-direction: column;
}
.faq_table li{
	margin-left:2em;
}
#other{
	background: #f7f7f7;
	padding: 100px 0;
}
#other .note ul li{
	font-size: 15px;
	position: relative;
	padding-left: 1.5em;
	margin-bottom: 10px;
}
#other .note ul li::before{
	content: "●";
	position: absolute;
	left: 0;
}
.cta{
	padding: 100px 0;
}

.card_logo{
	max-width:1000px;
	margin:2em auto 0;
}
.card_logo .read{
	margin:0.5em auto;
}
.card_logo ul{
	display:flex;
	flex-wrap: wrap;
	justify-content: center;
}
.card_logo li{
	margin:0 0.5em;
}
.card_logo li img{
	width:70px;
}

@media screen and (max-width: 768px){
	#about{
		background: url("../img/about/about_bg.jpg") no-repeat bottom center;
		background-size: cover;
		padding: 30px 0 110px;
	}
	#about h1{
		font-size: 24px;
		margin-bottom: 40px;
	}
	#about h1 strong{
		font-size: 30px;
	}
	.about_introimg{
		text-align: center;
		margin-bottom: 50px;
	}
	.about_member a{
		font-size: 18px;
		height: 90px;
	}
	.about_member a p strong{
		font-size: 24px;
	}
	/* point */
	#about_point {
		padding: 40px 0;
	}
	.point_readtext p {
		font-size: 16px;
		line-height: 200%;
	}
	.point_container {
		margin: 0 15px;
	}
	.point_container .point_detail {
		width: 100%;
		padding: 20px 15px 30px;
		margin-bottom: 25px;
	}
	.point_container .point_detail .point_icon {
		margin-bottom: 5px;
	}
	.point_container .point_detail h3 {
		font-size: 20px;
		margin-bottom: 20px;
	}
	
	/* member */
	.about_member_benefit{
		margin-bottom: 20px;
	}
	#about_member {
		padding: 50px 0;
	}
	.about_memberhead h2 {
		width: 60%;
	}
	.about_memberhead p {
		font-size: 24px;
	}
	.about_member_benefit .benefit_detail {
		width: 100%;
		margin-bottom: 25px;
	}
	
	/* faq */
	#faq {
		padding: 50px 10px;
	}
	.center_ttl {
		font-size: 24px;
		margin-bottom: 25px;
	}
	.faq_contents .answer {
		margin-left: 0px;
	}
	
	/* other */
	#other {
		background: #f7f7f7;
		padding: 50px 10px;
	}
	
	/* cta */
	.cta {
		padding: 50px 0;
	}
	
	/* card logo */
	.card_logo li{
		width:28%;
		margin:0 0.5em;
	}
	.card_logo li:nth-child(n+4){
		margin:0.5em 0.5em;
	}
	.card_logo li img{
		width:70px;
	}
}