@charset "utf-8";
/*
* {box-sizing: border-box;padding: 0;margin: 0;color: #555555;font-family: 'Noto Sans JP', Meiryo, sans-serif;font-size: 16px;line-height: 1.4em;}
html, body{overflow-x: hidden;}
ul{list-style-type : none;}
*/

/* ========================================  main */
.br_specification{word-break: keep-all;}
main *{color : #000000;background-repeat: no-repeat;font-family: 'Noto Sans JP', Meiryo, sans-serif;font-size: 16px;line-height: 1.4em;font-optical-sizing: auto;}
main h1, main h3, main h4, .qa dt, .qa dd:before, .point div, .contact_cta *, .font_size24, .fukudasi, #EYECATCH_LOGO{font-family: 'Noto Sans JP', sans-serif;font-weight : 800;}
.marker{background:linear-gradient(transparent 72%, #a5ce42 72%);font-size: inherit;font-weight: inherit;}
.text_center{text-align : center;}
.text_right{text-align : right;}
.text_color{color : #a9ce43;font-size: inherit;font-weight: inherit;}
.bg_color{background-color : #e8f2cf;}
.bg_gray{background-color : #F5F4F2;}
.max_width_1200{max-width : 1200px;margin : auto;}
.max_width_1070{max-width : 1070px;margin : auto;}
.margin_t_20{margin-top : 20px;}
.margin_t_40{margin-top : 40px;}
.margin_t_50{margin-top : 50px;}
.margin_t_70{margin-top : 70px;}
.margin_t_100{margin-top : 100px;}
.margin_t_150{margin-top : 150px;}
.margin_b_20{margin-bottom : 20px;}
.margin_b_40{margin-bottom : 40px;}
.margin_b_50{margin-bottom : 50px;}
.margin_b_70{margin-bottom : 70px;}
.margin_b_100{margin-bottom : 100px;}
.padding_50{padding : 50px;}
.padding_t_1{padding-top : 1px;}
.display_flex{display : flex;flex-wrap: wrap;}
h3{font-size : 34px;line-height:1.6;}
h4, .font_size24{font-size : 24px;}
.font_size60{font-size : 60px;}
.onlySp {display : none;}
.onlyPc {display : block;}
.open-sans {font-family: "Open Sans", sans-serif;font-optical-sizing: auto;font-weight: 700;font-style: normal;font-variation-settings:"wdth" 100;}
section {padding:0;min-width: inherit;width: 100%}

main {border-top:solid 1px #eee}

/*#EYECATCH*/
#EYECATCH {width:100%;margin:0 auto;height : 360px;background-image : url(../img/main.jpg);max-width: 1100px;background-size: cover;background-position-y: 30%}
#EYECATCH .in {position: relative;}
#EYECATCH_LOGO {z-index:10;top: 20px;left: 20px;position: absolute;}
#EYECATCH_LOGO img {width: 380px}


/*#h1*/
#h1 {background:#e8f2cf}
#h1 .in {position: relative;} 
#h1 .in h1 {padding:25px 0;margin :0;width: 100%;font-size: 36px;}
#h1 .in h1 .fukidasi {display : block;font-size : 19px;font-weight : 700;text-align : center;padding : 12px 0px 0px 0px;position: absolute;top:-30px;width: 210px;height: 65px;background-image : url(../img/fukidasi.png)}
#h1 .in h1 .fukidasi2 {left :250px;}


/*#POINT*/
#POINT .display_flex {justify-content:space-between;}
#POINT+h3 {line-height: 1.4}
#POINT .point{border : 2px #F5F4F2 solid;width : calc((100% - 50px) / 2);background-position : 50% calc(50% + 20px);padding-bottom : 20px;}
#POINT .point span{font-size : 20px;font-weight : bold;display : block;width : 100%;;text-align:center;}
#POINT .point .bg_color {padding:10px 0}
#POINT .point .bg_color span:first-child {display:block;padding-bottom:0;font-size:20px}
#POINT .point .bg_color span:last-child {font-size:23px}

#POINT .point .inner {margin : 20px 50px 10px 50px;background: url(../img/pointBkg1.png);background-repeat: no-repeat;background-size: contain;background-position-x: center}
#POINT .point:last-child .inner {background: url(../img/pointBkg2.png);background-repeat: no-repeat;background-size: contain;background-position-x: center}

#POINT .point ul{list-style-type : none;}



#POINT .point ul li{font-size : 20px;margin-bottom:1em;display:flex;align-items:flex-start;}
#POINT .point ul li:last-child {margin-bottom: 0}
#POINT .point ul li div {font-size:20px;font-weight:700}
#POINT .point ul li div:first-child {margin-right:5px}


/*#CTA*/
#CTA {background: #fff}
#CTA .in {padding:20px 0;background:#f5f4f2}
#CTA .in ul li>span {display:flex;flex-wrap:wrap;align-items:center;justify-content:center}
#CTA .in ul li>span>span {font-size:1.2em}
#CTA .in ul li span a {display:flex;align-items:center;justify-content:space-between;padding:15px;height:75px}
#CTA .in ul li.contact_pc span a div {font-size:26px;display:flex;align-items:center}
#CTA .in ul li.contact_pc span a div img {margin-right:10px;height:45px}
#CTA .in ul li.contact_sp span a {justify-content: center;}
#CTA .in ul li.contact_sp span a div {font-size:42px;display:flex;align-items:center;font-weight:600}
#CTA .in ul li.contact_sp span a div img {margin-right:5px;height:45px}


/*#BANNER*/
#BANNER a {padding:20px 0;background:#f5f4f2;background-image:url(../img/bannerBkg.png);background-size: cover;position:relative;display:block;text-decoration:none}
#BANNER a img {position:absolute;top:20px;right:15px}
#BANNER a h3 {line-height:1.4}


/*#CONTACT*/
#CONTACT{background-color : #F5F4F2;}
.contact_cta{background-color : #F5F4F2;padding : 0px 0px 20px 0px;}
.contact_cta ul{display : flex;flex-wrap : wrap;margin : 20px;justify-content: space-around}
.contact_cta ul li{width : 47%;padding : 0;display : flex;justify-content: center;}
.contact_pc a, .contact_sp a{padding : 10px;text-decoration : none;display : block;margin : 5px 0px 0px 0px;text-align : center;}
/*.contact_pc span:nth-of-type(1), .contact_sp span:nth-of-type(1){display : flex;padding : 0px 20px 0px 0px;}
.contact_pc span:nth-of-type(2), .contact_sp span:nth-of-type(2){display : block;width : 330px;text-align : center;}
*/
.contact_pc span:nth-of-type(1) img, .contact_sp span:nth-of-type(1) img{display : block;margin : auto;}
.arrow_bottom{width : 100%;margin-top: -2px;}
.contact_pc a{background-color : #a8ce43;font-size : 22px;width:100%;}
.contact_pc a:after{content : "";display: inline-block;width: 10px;height: 10px;margin: 0 10px;border-top: 3px solid #474241;border-right: 3px solid #474241;transform: rotate(45deg);}
.contact_sp a{font-size : 22px;background-color : #ffffff;border : 2px #a8ce43 solid;width:100%;}


/* #FAQ */
#FAQ ul li {border:#F5F4F2 solid 2px;border-radius:10px;overflow:hidden;margin-bottom:1.5em}	
#FAQ ul li .question {background: #f5f5f5;padding: 15px;display: flex;align-items: center;position: relative;cursor: pointer;transition: all .3s ease-out;}
#FAQ ul li .question::before {background: #a8ce43;content: "Q";width: 55px;height: 55px;margin: 0 20px 0 0;display: inline-block;border-radius: 50%;font-family: 'Roboto', sans-serif;color: #fff;font-size: 36px;line-height: 55px;text-align: center;	}
#FAQ ul li .question::after {content: "";display: inline-block;width: 10px;height: 10px;margin: 0 10px;transform: rotate(45deg);position: absolute;right: 20px;border-bottom: 3px solid #8cb32c;border-right: 3px solid #8cb32c;border-top: 0px none;border-left: 0px none;top: calc(50% - 10px);}
#FAQ ul li .question:hover {opacity:.7;}
#FAQ ul li .question.open::after {border-top: 3px solid #8cb32c;border-left: 3px solid #8cb32c;border-bottom: 0px none;border-right: 0px none;top: calc(50% + 0px);}	
#FAQ ul li .question .title {width: calc(100% - 80px - 36px);}
#FAQ ul li .question .title span {display: inline-block;background: #fff;padding: 2px 10px;font-size: 13px;color: #648709;border: #ddd solid 1px;	}
#FAQ ul li .question .title h2 {margin-top: 5px;color: #547302;font-size: 19px;font-weight: bold;}
#FAQ ul li .answer {display:none}
#FAQ ul li .answer .in {padding: 15px;display: flex;align-items: center;}
#FAQ ul li .answer .in:before  {background: #ff0033;content: "A";width: 55px;height: 55px;margin: 0 20px 0 0;display: inline-block;border-radius: 50%;font-family: 'Roboto', sans-serif;color: #fff;font-size: 36px;line-height: 55px;text-align: center;	}
#FAQ ul li .answer .in div {width: calc(100% - 80px);line-height: 1.8;font-size:17px;}



@media screen and (max-width: 1300px) {
	/*#EYECATCH*/
	#EYECATCH{height: 330px;background-size: cover;}
	.margin_t_150{margin-top : 40px;}
	.fukidasi{font-size : 16px;padding: 10px 0px 0px 0px;}
	.sp_none{display : none;}

}


@media screen and (max-width: 1070px) {

	h3{font-size : 25px;}
	h4, .font_size24{font-size : 20px;}
	.font_size60{font-size : 40px;}
	.max_width_1070 {width: 95%}
	.wrapper{overflow-x: scroll;}
	.wrapper table{width : 1200px;}

	/*#EYECATCH*/
	#EYECATCH_LOGO {top: 20px;left: 20px;}

	/*#h1*/

	/*#POINT*/
	#POINT .point .inner {margin:20px 25px 10px 25px}

	/*#CTA*/
	#CTA .in ul li>span {max-width: 50%}
	.contact_cta ul{margin : 30px 0px 20px 0px;}
	.contact_cta ul li:nth-of-type(1){border-right: 0px none;margin-bottom : 20px;}
	.contact_cta ul li{width : 100%;padding: 0px 10px 0px 10px;}
	.contact_pc span:nth-of-type(1), .contact_sp span:nth-of-type(1) {padding:0}
	.contact_pc a, .contact_sp a{font-size : 17px;}
	.contact_pc a:after {width: 8px;height: 8px;margin: 0 5px;}	

	/*#BANNER*/
	#BANNER a img {width: 110px}

	/*#CONTACT*/
	/*#FAQ*/
	#FAQ ul li .question:hover {opacity: 1!important}
}



@media screen and (max-width: 850px) {
	* { font-size : 14px;}
	.max_width_1070 {width: 90%}

	/*#EYECATCH*/

	/*#h1*/

	/*#POINT*/
	#POINT .display_flex {display: block}
	#POINT .point {width: 100%}
	#POINT .point:first-child {margin-bottom: 30px}
	#POINT .point ul li{font-size : 16px;}

	/*#CTA*/
	#CTA .in ul li>span {max-width: 80%}
	#CTA .in ul li.contact_pc span a div {font-size:1.9rem}
	#CTA .in ul li.contact_sp span a div {font-size:2.4rem}

	/*#BANNER*/

	/*#CONTACT*/

	/*#FAQ*/
}


@media screen and (max-width: 768px) {
	.margin_t_70 {margin-top : 50px;}
	.padding_50 {padding : 20px;}
	.onlySp {display : block;}
	.onlyPc {display: none}

	/*#EYECATCH*/
	#EYECATCH {height: 300px;background-size: 110%}
	#EYECATCH_LOGO {left:0}
	#EYECATCH_LOGO img {width: 100%;max-width: 280px}

	/*#h1*/
	#h1 .in h1 {font-size:34px;padding:60px 0 40px 0;line-height: 1.6}
	#h1 .in h1 .fukidasi {transform: scale(0.7);top:13px;height: 62px}
	#h1 .in h1 .fukidasi:first-child {left:-28px}
	#h1 .in h1 .fukidasi2 {left:166px}

	/*#POINT*/

	/*#CTA*/
	#CTA .in ul li>span {max-width: 100%}
	#CTA .in ul li span a {height: 70px;width: 60vw}
	#CTA .in ul li.contact_pc span a div {font-size:1.6rem}
	#CTA .in ul li.contact_sp span a div {font-size:2.2rem;letter-spacing: .1em;font-weight: 700}

	/*#BANNER*/

	/*#CONTACT*/
	#CONTACT .margin_t_50 {margin-top : 30px;}

	/*#FAQ*/

}


@media screen and (max-width: 600px) {
	#EYECATCH_LOGO img {max-width: 220px}
	#CTA .in ul li span a {width: 90%}
	#CTA .in ul li.contact_pc span a div {font-size:1.4rem}
}


@media screen and (max-width: 500px) {
	/*#EYECATCH*/
	#EYECATCH {background-size: cover;height: 30vh}
	#EYECATCH_LOGO img {max-width: 160px}

	/*#h1*/
	#h1 .in h1 {font-size:7.33vw;padding-bottom: 30px}
	#h1 .in h1 .fukidasi {font-size:4.66vw;left:calc(4.66vw * 8)}

	/*#POINT*/
	#POINT .point .bg_color span:first-child {font-size:4.33vw}
	#POINT .point .bg_color span:last-child {font-size:5.66vw}
	#POINT .point ul li div {font-size:4.66vw}

	/*#CTA*/
	#CTA h3 {font-size:5vw}
	#CTA .in ul li span a {height: 2em}
	#CTA .in ul li>span>span {font-size:3.66vw}
	#CTA .in ul li.contact_pc span a div {font-size:4.33vw}
	#CTA .in ul li.contact_pc span a div img, #CTA .in ul li.contact_sp span a div img {height: 20px}
	#CTA .in ul li.contact_sp span a div {font-size:6vw}
	#BANNER a img {width: 60px}
	#BANNER a h3 {font-size:4.66vw;margin-bottom: 40px}

	/*#CONTACT*/
	#CONTACT h3 {font-size:5.66vw}


	/*#FAQ*/
	#FAQ ul li {background:#f5f5f5}
	#FAQ ul li .question {padding: 10px;display: block}
	#FAQ ul li .question:before, #FAQ ul li .answer .in:before {width:30px;height: 30px;line-height: 30px;font-size:22px;margin-right: 10px;display: block;}

	#FAQ ul li .question:before {display: block;margin:0 auto 5px auto;text-align: center}
	#FAQ ul li .question .title {width:100%}
	#FAQ ul li .question .title h2 {font-size:3.88vw}
	#FAQ ul li .question .title span {font-size:3vw;text-align: center;margin:0 auto;display: block;width: fit-content;}
	#FAQ ul li .question.open:after,#FAQ ul li .question:after {content:none}
	#FAQ ul li .answer .in {padding: 10px;display: block}
	#FAQ ul li .answer .in:before {margin:0 auto 10px auto}
	#FAQ ul li .answer .in div {width: 100%;}
	#FAQ ul li .answer .in div p, #FAQ ul li .answer .in div p strong {font-size:3.66vw;line-height: 1.6}

}