@charset "utf-8";
/*---------- 共通 ---------*/
#lower_layer h3{font-family: 'Noto-Sans-JP-Medium'; font-size: 22px; line-height: 150%;}
#lower_layer h3 span{font-size: 69px; line-height: 103%; display: inline-block; letter-spacing: 0.05em; padding: 0 0 9px;}
#lower_layer p.tt_title{font-size: 32px; line-height: 144%; color: #fff;font-family: 'Noto-Sans-JP-Bold';}

#lower_layer h4{font-size: 32px; line-height: 144%; color: #fff;font-family: 'Noto-Sans-JP-Medium'; text-align: center;}
#lower_layer .text_box p{line-height: 207%;}
#lower_layer .text_box p:not(:first-child){padding: 33px 0 0;}

/* ------------------------------------------------------------ #reasons ------------------------------------------------------------ */
#reasons{padding: 104px 0 0;}
#reasons p.tt_title{padding: 50px 0 0;}
#reasons .box_list{padding: 84px 0 0;}
#reasons .box_list .box{ justify-content: space-between;}
#reasons .box_list .box:not(:first-child){margin: 100px 0 0 ;}
#reasons .box_list .img{width: 530px; height: auto;}
#reasons .box_list .text_box{width: 530px; height: auto;}
#reasons .box_list .text_box h4{font-size: 32px; display: flex; text-align: left;align-items: center;}
#reasons .box_list .text_box h4 span{font-size: 71px; display:block; padding: 0 30px 0 0; letter-spacing: 0.05em;}
#reasons .box_list .text_box .tt_box{padding: 20px 0 0;}
#reasons .box_list .animate__fadeInLeft{ -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft;animation-timing-function: ease-in-out;  animation-duration:0.6s;}


@-webkit-keyframes fadeInLeft {
	from { opacity: 0; -webkit-transform: translate3d(-10%, 0, 0); transform: translate3d(-10%, 0, 0); }
	to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
}
@keyframes fadeInLeft {
	from { opacity: 0; -webkit-transform: translate3d(-10%, 0, 0); transform: translate3d(-10%, 0, 0); }

	to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
}

#reasons .box_list .animate__fadeInRight{ -webkit-animation-name: fadeInRight; animation-name: fadeInRight;animation-timing-function: ease-in-out;  animation-duration:0.6s;}

@-webkit-keyframes fadeInRight {
	from { opacity: 0; -webkit-transform: translate3d(10%, 0, 0); transform: translate3d(10%, 0, 0); }

	to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
}
@keyframes fadeInRight {
	from { opacity: 0; -webkit-transform: translate3d(10%, 0, 0); transform: translate3d(10%, 0, 0); }

	to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
}




/* ------------------------------------------------------------ #about ------------------------------------------------------------ */
#about{padding: 122px 0 0;}
#about .bg_white{background: #fff; padding: 76px 0 87px;}
#about .bg_white h3{color: #000;}
#about .bg_white h3 span{color: #000;}
#about .bg_white .box_list{padding: 46px 0 0;}
#about .bg_white .box_list .box{ justify-content: space-between;}
#about .bg_white .box_list .box:not(:first-child){margin: 50px 0 0 ;}
#about .bg_white .box_list .text_box{width: 530px; height: auto;}
#about .bg_white .box_list .img{width: 530px;}
#about .bg_white .box_list .text_box h4{font-size: 32px; text-align: left;color: #000;font-family: 'Noto-Sans-JP-Bold';}
#about .bg_white .box_list .text_box .tt_box{padding: 20px 0 0;}
#about .bg_white .box_list .text_box .tt_box p{color: #000;}

/* ------------------------------------------------------------ .discernment ------------------------------------------------------------ */
.discernment{background: url(../images/reason/about_bg_1.jpg) no-repeat left center; background-size: cover; padding: 100px 0;}
.discernment .discernment_inner{width: 1300px; padding: 0 50px; margin: 0 auto}
#lower_layer .discernment .box h3{font-size: 32px;font-family: 'Noto-Sans-JP-Bold';}
.discernment .box{width: 570px; margin: 0 0 0 auto;}
.discernment .box p{padding: 31px 0 0;}

/* ------------------------------------------------------------ #our ------------------------------------------------------------ */
#our{padding: 95px 0 0;}
#our h3{text-align: center;}
#our .box_list{padding: 33px 0 0 ; width:1100px; margin: 0 auto;}
#our .box_list .box{padding: 42px 49px 38px 29px; align-items: center; justify-content: space-between;}
#our .box_list .box:not(:last-child){border-bottom: 1px dotted #fff; }
#our .box_list .img{width: 270px; height: auto; text-align: center;}
#our .box_list .img img{padding: 33px 0 0;}
#our .box_list .img h4{display: flex; align-items: center; font-size: 22px; text-align: left;}
#our .box_list .img h4 span{display: block; font-size: 58px; margin: 0 20px 0 0;letter-spacing: 0.05em;}
#our .box_list .text_box{width: 669px; height: auto;}

#our .cta_link{justify-content: center; padding: 58px 0 0;}
#our .cta_link a{background: #fff; border-radius: 1000px; color: #000; line-height: 140%; width: 337px; font-family: 'Noto-Sans-JP-Medium'; font-size: 20px; text-align: center; padding: 23px 0 23px; position:relative;}
#our .cta_link a:before{content: ""; width: 16px; height: 16px; top: 50%; transform: translateY(-50%) rotateZ(-45deg); position: absolute; border-bottom: 1px solid #000; border-right: 1px solid #000; right: 25px;}
#our .cta_link a.line{ padding: 23px 0 23px 30px; margin: 0 22px 0 0 ;}
#our .cta_link a.line:after{content: ""; display: block; width: 46px; height: 46px; background: url(../images/common/line_icn.png) no-repeat center center; background-size: 100%; top: 50%; transform: translateY(-50%); position: absolute; left: 34px;}

/* ------------------------------------------------------------ #brands ------------------------------------------------------------ */
#brands{padding: 86px 0 99px;}
#brands .box_list ul{flex-wrap: wrap; padding: 31px 0 0;justify-content: space-between;}
#brands .box_list ul li{margin: 0 0 23px 0; width: 23.8%; height: auto;}
#brands .box_list ul li:not(:nth-child(4n)){margin-right: 17px;}
#brands .box_list p{font-size: 12px;}

@media only screen and (max-width: 768px) {
	
	/*---------- 共通 ---------*/
	#fv.lower_layer .video_box { padding: 230px 0 0; }
	#lower_layer h3{ font-size: 16px; text-align: center;}
	#lower_layer h3 span{font-size: 35px; padding: 0 0 9px;}
	#lower_layer p.tt_title{font-size: 16px;font-family: 'Noto-Sans-JP-Medium';}
	
	#lower_layer h4{font-size: 32px; }
	#lower_layer .text_box p { line-height: 200%; }
	#lower_layer .text_box p:not(:first-child){padding: 20px 0 0;}
	
	#reasons .box_list .animate__fadeInLeft{ -webkit-animation-name: fadeInLeft_sp; animation-name: fadeInLeft_sp;animation-timing-function: ease-in-out; animation-duration:0.6s;}


	@-webkit-keyframes fadeInLeft_sp {
		from { opacity: 0; -webkit-transform: translate3d(0, 10%, 0); transform: translate3d(0, 10%, 0); }
		to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
	}
	@keyframes fadeInLeft_sp {
		from { opacity: 0; -webkit-transform: translate3d(0, 10%, 0); transform: translate3d(0, 10%, 0); }
		to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
	}
	
	#reasons .box_list .animate__fadeInRight{ -webkit-animation-name: fadeInRight_sp; animation-name: fadeInRight_sp;animation-timing-function: ease-in-out;  animation-duration:0.6s;}
	
	@-webkit-keyframes fadeInRight_sp {
		from { opacity: 0; -webkit-transform: translate3d(0, 10%, 0); transform: translate3d(0, 10%, 0); }
		to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
	}
	@keyframes fadeInRight_sp {
		from { opacity: 0; -webkit-transform: translate3d(0, 10%, 0); transform: translate3d(0, 10%, 0); }
		to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
	}
	
	
	/* ------------------------------------------------------------ #reasons ------------------------------------------------------------ */
	#reasons h3{display: none;}
	#reasons{padding: 30px 0 0;}
	#reasons p.tt_title{padding: 0;}
	#reasons .box_list{padding: 30px 0 0;}
	#reasons .box_list .img{width: 100%; height: auto;}
	#reasons .box_list .box{ justify-content: space-between;}
	#reasons .box_list .box:not(:first-child){margin: 40px 0 0 ;}
	#reasons .box_list .text_box{width: 100%; height: auto;}
	#reasons .box_list .text_box h4{font-size:20px; display: flex; text-align: left;align-items: center;line-height: 135%; padding: 12px 0 0;}
	#reasons .box_list .text_box h4 span{font-size: 38px; display:block; padding: 0 14px 0 0;}
	#reasons .box_list .text_box .tt_box{padding: 10px 0 0;}
	
	/* ------------------------------------------------------------ #about ------------------------------------------------------------ */
	#about{padding: 30px 0 0;}
	#about .bg_white{padding: 38px 0 30px;}
	#about .bg_white .box_list{padding: 20px 0 0;}
	#about .bg_white .box_list .box{ justify-content: space-between;}
	#about .bg_white .box_list .box:not(:first-child){margin: 30px 0 0 ;}
	#about .bg_white .box_list .text_box{width: 100%; height: auto;}
	#about .bg_white .box_list .img{width: 100%;}
	#about .bg_white .box_list .text_box h4{font-size: 16px; padding: 20px 0 0;}
	#about .bg_white .box_list .text_box .tt_box{padding: 10px 0 0;}
	
	#about .box_list .animate__fadeInLeft{ -webkit-animation-name: fadeInLeft_sp; animation-name: fadeInLeft_sp;animation-timing-function: ease-in-out;  animation-duration:0.6s;}
	@-webkit-keyframes fadeInLeft_sp {
		from { opacity: 0; -webkit-transform: translate3d(0, 10%, 0); transform: translate3d(0, 10%, 0); }
		to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
	}
	@keyframes fadeInLeft_sp {
		from { opacity: 0; -webkit-transform: translate3d(0, 10%, 0); transform: translate3d(0, 10%, 0); }
		to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
	}
	
	#about .box_list .animate__fadeInRight{ -webkit-animation-name: fadeInRight_sp; animation-name: fadeInRight_sp;animation-timing-function: ease-in-out;  animation-duration:0.6s;}
	
	@-webkit-keyframes fadeInRight_sp {
		from { opacity: 0; -webkit-transform: translate3d(0, 10%, 0); transform: translate3d(0, 10%, 0); }
		to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
	}
	@keyframes fadeInRight_sp {
		from { opacity: 0; -webkit-transform: translate3d(0, 10%, 0); transform: translate3d(0, 10%, 0); }
		to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
	}
	
	/* ------------------------------------------------------------ .discernment ------------------------------------------------------------ */
	.discernment{background: no-repeat; padding: 0 0;}
	.discernment .title_box{background: url(../images/reason/about_bg_1.jpg) no-repeat left center; background-size: cover; width: 100%; padding: 0 5%; text-align: right;}
	.discernment .discernment_inner{width: 100%; padding: 0; margin: 0 auto;}
	#lower_layer .discernment .box h3{font-size: 16px; text-align: left; padding: 58px 0 59px; display: inline-block;}
	.discernment .box{width: 100%; margin: 0 0 0 auto;}
	.discernment .text_box{width: 90%; height: auto; margin: 0 auto;}
	.discernment .box p{padding: 19px 0 0;}
	
	/* ------------------------------------------------------------ #our ------------------------------------------------------------ */
	#our{padding: 50px 0 0;}
	#our h3{text-align: center;}
	#our .box_list{padding: 33px 0 0 ; width:100%; margin: 0 auto;}
	#our .box_list .box{padding: 16px 0 16px 0; align-items: center; justify-content: space-between;}
	#our .box_list .img{width: 100%; height: auto; text-align: center;display: flex ; flex-direction: row-reverse;align-items: center; justify-content: flex-end; padding: 0 0 0 15px;}
	#our .box_list .img img{padding:0; width: 61px; height: auto;}
	#our .box_list .img h4{display: flex; align-items: center; font-size: 16px; text-align: left;padding: 0 0 0 20px;}
	#our .box_list .img h4 span{display: block; font-size: 40px; margin: 0 13px 0 0;}
	#our .box_list .text_box{width: 100%; height: auto; padding: 20px 0 0;}
	
	#our .cta_link{ padding: 30px 0 0;}
	#our .cta_link a{width: 252px; font-size: 13px; padding: 19px 0 18px; margin: 0 auto;}
	#our .cta_link a:before{content: ""; width: 12px; height: 12px; right: 25px;}
	#our .cta_link a.line{ padding: 19px 0 18px; margin: 0 auto 19px;}
	#our .cta_link a.line:after{ width: 34px; height: 34px; left: 26px;}
	
	/* ------------------------------------------------------------ #brands ------------------------------------------------------------ */
	#brands{padding: 86px 0 50px;}
	#brands .box_list ul{flex-wrap: wrap; padding: 30px 0 0; flex-direction: row;}
	#brands .box_list ul li{margin: 0 0 2% 0;width: 32%;margin-right: 2%;}
	#brands .box_list ul li:not(:nth-child(4n)){margin-right: 2%;}
	#brands .box_list ul li:nth-child(3n){margin-right: 0%;}
	#brands .box_list p{font-size: 12px;}
}