@charset "utf-8";

.sp-only{ display: none; }
h3{text-align: center; position: relative; font-size: 24px; letter-spacing: 0.1em; font-family: futura-pt, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Meiryo, メイリオ, Osaka, "MS PGothic", arial, helvetica, sans-serif; font-style: normal; font-weight: 400; padding: 0 0 42px;}
h3 span{font-size: 34px; letter-spacing: 0.18em; display: inline-block; line-height: 160%; padding: 0 0 20px;}
h3:before{content: ""; display: block; width: 105px; height: 2px; background: #000; position: absolute; bottom: 0px; left: 50%; transform: translateX(-50%);}
.link_box{text-align: center; width: 470px; margin: 0 auto;}
.link_box p{display: inline-block; position: relative; padding: 0 29px; font-size: 20px; line-height: 160%; letter-spacing: 0.03em; font-weight: 600;}
.link_box p:before,
.link_box p:after{content: ""; display: block; width: 22px; height: 2px; background: #000; position: absolute; top: 50%;}
.link_box p:before{left: 0px; transform: translateY(-50%) rotateZ(50deg);}
.link_box p:after{right: 0px; transform: translateY(-50%) rotateZ(-50deg);}
.link_box .link_btn{display: inline-block; padding: 24px 0 0;}
.link_box .link_tt{ display: inline-block; border-bottom: 1px solid #000; font-size: 16px; letter-spacing: 0.05em; line-height: 188%; padding: 0 0 4px; margin: 32px 0 0;;}


.flex{display: flex; flex-wrap: wrap;}

/* #fv */
#fv h3.happy-h{padding: 102px 0 0; font-size: 29px; text-align: center; letter-spacing: 0.18em; line-height: 136%;}
#fv h3:before{display: none;}
#fv .flex{justify-content: center; padding: 46px 0 0;}
#fv .flex li{text-align: center; line-height: 155%; letter-spacing: 0.044em; font-size: 22px; padding: 0 60px;}
#fv .flex li:not(:last-child){border-right: 1px solid #000;}
#fv .link_box{padding: 68px 0 0;}

/* #about */
#about{padding: 133px 0 0;} 
#about .flex{padding: 47px 0 0; gap: 16px;}
#about .flex img{width: calc(100% / 4 - 12px); height: auto;}
#about p{padding: 26px 0 0; letter-spacing: 0.12em; font-size: 16px; line-height: 188%;}
#about .img_5{padding: 75px 0 0;}
#about .img_5 img{width: 100%; height: auto;}


/* #members */
#members{padding: 106px 0 0;}
#members .box_list{padding: 63px 0 0;}
#members .box_list .box:not(:last-child){padding: 0 0 106px;}
#members .box_list .box .title_box{display: flex; align-items: center; justify-content: flex-start; padding: 0px;}
#members .box_list .box .title_box p{border-left: 1px solid #000; text-align: center; font-size: 17px; padding: 0 0 0 20px; width: auto; line-height: 100%;}
#members .box_list .box .title_box p span{font-family: futura-pt, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Meiryo, メイリオ, Osaka, "MS PGothic", arial, helvetica, sans-serif; font-style: normal; font-weight: 400; font-size: 48px; line-height: 100%;}
#members .box_list .box .title_box h4{font-size: 33px; letter-spacing: 0.1em; padding: 0 0 0 28px; line-height: 140%;}
#members .box_list .box p{font-size: 16px; line-height: 188%; padding: 49px 0 0;}
#members .box_list .box .img{padding: 62px 0 0;}
#members .box_list .box .img img{width: 100%; height: auto;}
#members .box_list .box .flex {gap: 0 27px;}
#members .box_list .box .flex .img{width: calc(100% / 3 - 18px); height: auto; padding: 49px 0 0;}


/* #point_get */
#point_get{padding: 178px 0 0;}
#point_get h3{font-size: 17px; letter-spacing: 0.044em;}
#point_get h3 span{font-size: 33px; line-height: 160%; letter-spacing: 0.054em;}
#point_get h3:before{display: none;}
#point_get .box{padding: 11px 0 0;}
#point_get .box h4{text-align: center; font-size: 19px; font-weight: 600;}
#point_get .box .flex{gap: 0 25px; padding: 28px 0 0;}
#point_get .box .flex img{width: calc(100% / 4 - 19px); height: auto; display: block;}


/* #login_box */
#login_box{padding: 168px 0 0;}
#login_box h3{font-size: 27px; letter-spacing: 0.18em; padding: 0px 0 26px; line-height: 100%;}
#login_box h3 span{font-size: 48px; line-height: 173%; letter-spacing: 0.1em; font-family: futura-pt, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Meiryo, メイリオ, Osaka, "MS PGothic", arial, helvetica, sans-serif; font-style: normal; font-weight: 400; padding: 0px;}
#login_box h3:before{display: none;}
/* ------------------------------------------------------------ mobile ------------------------------------------------------------ */
@media only screen and (max-width: 640px) {
	
	.sp-only{ display: block; }
	
	h3{font-size: 18px; padding: 0 0 22px;}
	h3 span{ font-size: 24px; padding: 0 0 12px;}
	h3:before{ width: 70px; height: 1px;}
	.link_box{width: 100%;}
	.link_box p{ padding: 0 20px; font-size: 16px;}
	.link_box p:before,
	.link_box p:after{width: 18px; height: 1px;}
	.link_box .link_btn{padding: 14px 0 0;}
	.link_box .link_tt{font-size: 13px; padding: 0 0 2px; margin: 20px 0 0;}
	
	
	.flex{display: flex; flex-wrap: wrap;}
	
	/* #fv */
	#fv h3.happy-h{padding: 51px 0 0; font-size: 20px;}
	#fv .flex{; padding: 15px 0 0;}
	#fv .flex li{width: calc(100% / 3); font-size:13px; padding: 0 8px;}
	#fv .flex li:first-child{padding: 0 8px 0 0;}
	#fv .flex li:last-child{padding: 0 0 0 8px;}
	#fv .link_box{padding: 34px 0 0;}
	
	/* #about */
	#about{padding: 66px 0 0;} 
	#about .flex{padding: 30px 0 0; gap: 20px;}
	#about .flex img{width: calc(100% / 2 - 10px); height: auto; display: block;}
	#about p{padding: 18px 0 0; font-size: 13px;}
	#about .img_5{padding: 38px 0 0;}
	
	
	/* #members */
	#members{padding: 53px 0 0;}
	#members .box_list{padding: 30px 0 0;}
	#members .box_list .box:not(:last-child){padding: 0 0 53px;}
	#members .box_list .box .title_box p{font-size: 12px; padding: 0 0 0 15px; width: auto; line-height: 130%;}
	#members .box_list .box .title_box p span{ font-size: 32px;}
	#members .box_list .box .title_box h4{font-size: 20px; padding: 0 0 0 16px; width: calc(100% - 55px);}
	#members .box_list .box p{font-size: 13px; padding: 18px 0 0;}
	#members .box_list .box .img{padding: 31px 0 0;}
	#members .box_list .box .flex {gap: 20px 0; width: 60%; margin: 0 auto; padding: 30px 0 0;}
	#members .box_list .box .flex .img{width: 100%; height: auto; padding: 0;}
	
	
	/* #point_get */
	#point_get{padding: 70px 0 0;}
	#point_get h3{font-size: 14px; line-height: 160%;}
	#point_get h3 span{font-size: 22px;}
	#point_get .box{padding: 5px 0 0;}
	#point_get .box h4{font-size: 16px;}
	#point_get .box .flex{gap: 20px; padding: 18px 0 0;}
	#point_get .box .flex img{width: calc(100% / 2 - 10px);}
	
	
	/* #login_box */
	#login_box{padding: 85px 0 0;}
	#login_box h3{font-size: 18px; padding: 0px 0 18px;}
	#login_box h3 span{font-size: 28px; }
}