@charset "utf-8";

/* ----------------------------------------------------------------------------------- about */
#about{ padding: 125px 0; background: #E8F4F6; }
#about .btn-box{ margin: 0 auto; }


/* ----------------------------------------------------------------------------------- ev-items */
#ev-items .cach{ padding: 0 0 55px; }
#ev-items .cach .sec-ttl{ font-size: 46px; line-height: 150%; font-family: 'Noto-Sans-JP-Bold', sans-serif; }
#ev-items .cach .sec-ttl.center{ text-align: center; }
#ev-items .cach .sec-ttl small{ display: block; padding: 15px 0 0; font-size: 13px; line-height: 150%; font-family: 'Noto-Sans-JP-Medium', sans-serif; }
#ev-items .cach .sec-ttl sup{ position: relative; top: -10px; font-size: 13px; }
#ev-items .cach .sec-ttl .sec-ttl__en{ display: block; padding: 0 0 10px; font-weight: 600; font-size: 20px; color: #009C93; font-family: "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif; }
#ev-items .cach p{ padding: 40px 0 0; font-size: 16px; line-height: 200%; }

#ev-items .btn-box{ width: 480px;  padding: 0 0 55px; text-align: center; }
#ev-items .btn-box a{ display: flex; align-items: center; justify-content: center; width: 100%; height: 80px; color: #fff; border-radius: 100px; background: #CE1717; text-align: center; line-height: 150%; font-size: 21px; }
#ev-items .btn-box a:hover{ opacity: .8; }
#ev-items .btn-box p{ padding: 15px 0 0; font-size: 17px; font-weight: 400; }


/* ----------------------------------------------------------------------------------- point */
#point{ padding: 150px 0 155px; }
#point .cach{ padding: 0; }
#point .cach .sec-ttl{ font-size: 45px; }

#point .point{ padding: 85px 0 100px; border-bottom: 1px solid #D5D5D5; }
#point .point:last-of-type{ padding-bottom: 0; border: none; }
#point .point .caption{ padding-top: 1rem; }

#point .flex-box{ display: flex; align-items: flex-start; justify-content: space-between; }
#point .box-l{ width: 48%; }
#point .box-r{ width: 48%; }

#point .point__ttl{ display: flex; align-items: center; padding: 0 0 45px; }
#point .point__ttl img{ width: 76px; height: auto; }
#point .point__ttl h3{ padding-left: 25px; font-size: 32px; line-height: 150%; color: #009C93; }

#point .point__list li{ position: relative; margin: 0 0 40px; padding: 0 0 0 55px; font-size: 20px; line-height: 150%; }
#point .point__list li:last-of-type{ margin: 0; }
#point .point__list li:before{ position: absolute; top: 0; left: 0; content: ""; width: 37px; height: 32px; background: url(/product/category/automotive/electric/electric-icn-01.svg) center/cover no-repeat; }
#point .point__list li p{  }
#point .point__list li small{ display: inline-block; padding: 1rem 0 0; }
#point .point__list li small

#point .illustration{ margin: 40px 0 0; padding: 25px 45px 30px; border: 1px solid #D5D5D5; }
#point .illustration img{ width: 100%; height: auto; }
#point .illustration dl{ margin: 40px 0 0; display: flex; align-items: center; border: 1px solid #F4F4F4; }
#point .illustration dt{ width: 25%; padding: 24px 10px; box-sizing: border-box; font-size: 22px; text-align: center; background: #F4F4F4; }
#point .illustration dd{ display: flex; align-items: center; width: 75%; padding: 17px 2%; box-sizing: border-box; }
#point .illustration dd p{ padding: 0 10px 0 0; font-size: 18px; }
#point .illustration dd ul{ display: flex; align-items: center; }
#point .illustration dd li{ margin: 0 20px; font-size: 16px; }
#point .illustration dd li img{ width: 30px; height: auto; margin: 0 10px 0 0; vertical-align: middle; }

#point .illustration .example{ padding: 20px 0 0; text-align: right; font-size: 15px; line-height: 150%; }
#point .illustration .example small{ display: block; font-size: 14px; }
#point note{ padding: 13px 0 0; display: inline-block; font-size: 13px; line-height: 150%; }

#point .sample{ width: 35%; position: relative; padding: 30px; border: 1px solid #D5D5D5; }
#point .sample:before,
#point .sample:after{ position: absolute; content: ""; top: 50%; translate: 0 -50%; clip-path: polygon(0 0, 100% 50%, 0 100%); }
#point .sample:before{ z-index: 1; right: -20px; width: 20px; height: 40px; background: #fff; }
#point .sample:after{ right: -22px; width: 22px; height: 43px; background: #D5D5D5; }

#point .sample h5{ font-size: 24px; font-family: 'Noto-Sans-JP-Bold', sans-serif; text-align: center; }
#point .sample-list{ padding: 45px 0 0; }
#point .sample-list li{ position: relative; font-size: 20px; margin-bottom: 15px; padding: 0 0 0 20px; line-height: 150%; }
#point .sample-list li:before{ position: absolute; content: ""; left: 0; top: 7px; width: 10px; height: 10px; background: #009C92; border-radius: 100px; }
#point .sample-list li:last-of-type{ margin-bottom: 0; }

#point .pointA .point__list,
#point .pointB .point__list{ padding: 0 0 60px; }
#point .illustration{ padding: 60px 0 0; }


/* ----------------------------------------------------------------------------------- effect */
#effect{ overflow: hidden; position: relative; margin: 0 0 60px; padding: 120px 0; background: #E8F4F6; }
#effect .bg-ttl{ white-space: nowrap; position: absolute; top: -70px; width: 100%; font-size: 200px; color: #DBF0F0; text-align: center; font-family: "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif; font-weight: 700; }

#effect .cach{ position: relative; z-index: 1; }
#effect .effect-article{ position: relative; z-index: 1; }
#effect .effect:not(:last-of-type){ padding: 0 0 100px; }

#effect .effect__ttlbox{ position: relative; text-align: center; }
#effect .effect__ttlbox:after{ position: absolute; content: ""; bottom: 36px; left: 50%; translate: -50% 0; width: 27px; height: 35px; clip-path: polygon(0 0, 100% 0, 50% 100%); background: #009C93; }
#effect .effect__ttl{ display: inline-block; margin: 0 auto 60px; padding: 10px; background: #009C93; border-radius: 100px; }

#effect .effect__ttl .num{ float: left; display: flex; flex-wrap: wrap; flex-direction: column; justify-content: center; align-items: center; width: 69px; height: 69px; color: #009C93; border-radius: 100%; background: #fff; font-size: 20px; }
#effect .effect__ttl .num span:first-of-type{ font-size: 15px; }
#effect .effect__ttl .num span:last-of-type{ font-size: 32px; font-family: "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif; font-weight: 600; }
#effect .effect__ttl h3{ float: left; padding: 20px 10px 0; color: #fff; font-size: 28px; }


#effect .effect__box{ padding: 30px 40px; background: #fff; border-radius: 30px; filter: drop-shadow(10px 10px 0px rgba(0,0,0,0.1)); }
#effect .flex-box{ display: flex; align-items: flex-start; justify-content: space-between; }
#effect .box-before{ width: 43%; }
#effect .box-after{ width: 43%; }

#effect .box-middle{ position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 8%; /* padding: 11% 0; */ text-align: center; }

#effect .effect__box{ position: relative; }
#effect .effect__box:before,
#effect .effect__box:after{ position: absolute; content: ""; left: 50%; translate: -50% 0; width: 1px; height: 20%; border: 1px dashed #707070; }
#effect .effect__box:before{ top: 16px; }
#effect .effect__box:after{ bottom: 16px; }
#effect .box-middle img{ width: 55px; height: auto; }

#effect h4{ width: 220px; margin: 0 auto; padding: 15px; font-size: 24px; color: #fff; text-align: center; border-radius: 50px;}
#effect .effect-list{ padding: 25px 0 0; }
#effect .effect-list li{ position: relative; margin: 0 0 30px; padding-left: 30px; }
#effect .effect-list li:last-of-type{ margin: 0; }
#effect .effect-list li:after{ position: absolute; left: 0; top: 6px; content: ""; width: 18px; height: 18px; border-radius: 100%; }
#effect .effect-list li p{ font-size: 18px; line-height: 150%; }

#effect .reference{ width: 200px; margin: 30px 0 0 auto; border-radius: 10px; border: 2px solid #EA6E04; color: #EA6E04; font-size: 15px; text-align: center; }
#effect .reference a{ display: flex; align-items: center;  }
#effect .reference span{ padding: 13px 10px; background: #FDEEE0; border-radius: 10px 0 0 10px; color: #EA6E04; }
#effect .reference p{ padding: 13px 10px; color: #EA6E04; }

#effect picture{ display: block; width: 866px; margin: 60px auto 0; }
#effect picture img{ width: 100%; height: auto; filter: drop-shadow(5px 5px 4px rgba(0,0,0,0.1)); }

#effect .box-before h4{ background: #A0A0A0; }
#effect .box-before .effect-list li:after{ background: #A0A0A0; }

#effect .box-after h4{ background: #EA6E04; }
#effect .box-after .effect-list li:after{ background: #EA6E04; }



/* ----------------------------------------------------------------------------------- cese */
#cese{ padding-bottom: 5rem; }
#cese .cese-inner{ margin: 0 auto; max-width: 1245px; }
#cese .flex{ display: flex; align-items: flex-start; justify-content: space-between; }
#cese .divide-layout__item{ margin-left: 3.22321%; width: 30.05641%; }
#cese  a{ text-decoration: none; color: #333; transition: color .2s ease-in-out; }

#cese .elem-pic-block__holder img{ width: 100%; height: auto; }

#cese .elem-pic-block__txt-container{ margin-top: 1.25rem; }
#cese .elem-heading-lv5{ margin: 1.25rem auto 1.25rem; }
#cese [class^="elem"]:first-child{ margin-top: 0; }
#cese .elem-heading-lv5 h5 { font-size: 1.3rem; line-height: 150%; }

#cese .elem-pic-block__txt-body{ margin-top: .625rem; }
#cese .elem-tags-list__unordered li{ padding: 5px 10px; }
#cese .elem-meta-list__item{ margin-right: .7rem; }
#cese .elem-meta-list{ padding: 1.5rem 0; }
#cese .elem-paragraph { padding: 0 0 1rem;  }
#cese .elem-paragraph p{ line-height: 150%; font-size: 1rem; }

#cese .view{ color: #263e8b; }
#cese .icon-right-arrow{ width: .75em; height: .75em; margin-left: .3em; fill: #263e8b; transition: fill .2s ease-in-out; }

#cese a:hover .elem-heading-lv5 h5,
#cese a:hover .view{ color: #009e96; }
#cese a:hover .icon-right-arrow{ fill: #009e96; }
#cese a:hover .elem-pic-block__holder img{ opacity: 0.8; }



/* ----------------------------------------------------------------------------------- related-article */
#related-article{ margin-bottom: 5rem; }
#related-article .divide-layout[data-sp="column2"]{ display: flex; flex-wrap: wrap; margin: 0 auto; max-width: 1245px; }
#related-article .elem-heading-lv2 .elem-heading-lv2__heading-container{ padding-top: 1.25rem; }
#related-article .divide-layout[data-sp="column2"].divide-layout--column-4 .divide-layout__item{ margin-top: 2.0625rem; margin-left: 3.22321%; }

#related-article .elem-pic-block--vertical .elem-pic-block__pic-container + .elem-pic-block__txt-container{ margin-top: 1.25rem; }
#related-article .elem-paragraph p{ color: #666; transition: color .2s ease-in-out; }
#related-article .divide-layout__item .elem-pic-block__txt-body, .divide-layout__item .elem-pic-block__txt-footer{ margin-top: .625rem; }

#related-article .elem-btn .elem-btn__container{ position: relative; display: block; padding: .9375rem 3.125rem .9375rem 1.25rem; max-width: 19.4375rem; border: 1px solid #263e8b; transition: background .2s ease-in-out; color: #263e8b; }
#related-article .elem-btn .elem-btn__container{ color: #263e8b; }
#related-article .elem-btn .elem-btn__container .elem-btn__holder span { font-weight: 600; }
#related-article .elem-btn .icon-right-arrow { position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); right: 1.25rem; width: 1em; height: 1em; fill: #263e8b; }
#related-article .elem-paragraph .test{ color: #666!important; font: 1em/1.72 -apple-system,"Noto Sans Japanese","Hiragino Sans","ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-serif!important; }

#related-article .elem-btn .elem-btn__container:hover{ color: #fff; }
#related-article .elem-btn:hover .icon-right-arrow{ fill: #fff; }
#related-article .elem-btn:hover .elem-btn__container{ border-color: #009e96;  }


/* ----------------------------------------------------------------------------------- files.jsp */
#news{ padding: 100px 0!important; }

#contact{ padding: 50px 3rem; }
#contact .flex .txt{ width: 57%; margin: 0 1rem 0 0; }
#contact .flex a{ width: 40%; margin-left: 0; margin-top: 0; }
#contact .flex .txt h3{ font-size: 35px; line-height: 150%; }


#tie-up.company_box{max-width: 1500px; padding: 120px 50px 0;margin: 0 auto;}
#tie-up.company_box .box{border-top: 2px solid #d5d5d5; border-bottom: 2px solid #d5d5d5; position: relative;}
#tie-up.company_box h2{left: 50%;transform: translate(-50%,-50%);-webkit-transform: translate(-50%,-50%); font-size: 24px;background: #000; color: #fff; position: absolute; padding: 13px 54px; }
#tie-up.company_box .box .list_box{ display: flex; justify-content: center; align-items: center; padding: 75px 0 70px;}
#tie-up.company_box .box .list_box li{width: 16%;}
#tie-up.company_box .box .list_box li:not(:last-child){margin: 0 4% 0 0;}
#tie-up.company_box .box .list_box li img{ width: 100%; height: auto; }
#tie-up.company_box .comment { font-size: 14px; color: #333; line-height: 220%; padding: 30px 0 0;}



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

	
/* ----------------------------------------------------------------------------------- point */
	#point .illustration dt{ width: 16%; font-size: 15px;  }
	#point .illustration dd{ width: 84%; }
	#point .illustration dd ul{ width: 100%; }
	#point .illustration dd li{ font-size: 14px; }
	#point .illustration dd p{ width: 150px; font-size: 15px; }
	#point note{ font-size: 11px; }

	
}

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

	#contact .flex .txt{ width: 100%; margin: 0 0 2rem; padding: 50px 1rem; }
	#contact .flex .txt h3{ margin-bottom: 23px; }
	#contact .flex a{ width: 100%; }

}

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

	#tie-up.company_box{ padding: 120px 0 0; }
	#tie-up.company_box .box .list_box{ flex-wrap: wrap; }
	#tie-up.company_box .box .list_box li{ width: calc(100% / 3 - 7%); }

}


@media only screen and (max-width: 1100px) {	
		
	#point .illustration{ margin: 20px 0 0; padding: 25px 5%; }
	#point .illustration dl{ display: block; margin: 20px 0 0; }
	#point .illustration dt{ width: 100%; padding: 14px 10px; }
	#point .illustration dd{ width: 100%; display: block; padding: 19px 5%; }
	#point .illustration dd p{ width: 100%; padding: 0 0 15px; text-align: center; }
	
	#point .sample-list li{ font-size: 15px; }
	
}





@media only screen and (max-width: 768px) {
		
	
/* ----------------------------------------------------------------------------------- fv */
	#fv{ padding: 7vh 0; }
	#fv .flex{ display: block; }
	#fv h2{ width: 100%; margin: 0; padding: 0 0 20px; font-size: 30px; }
	#fv h2 span{ font-size: 15px; }
	#fv .fv-item,
	.availability #fv .fv-item{ position: initial; width: 100%; }


/* ----------------------------------------------------------------------------------- about */
	#about{ padding: 60px 0; }
	
	
/* ----------------------------------------------------------------------------------- ev-items */
	#ev-items .cach{ padding: 0 0 35px; }
	#ev-items .cach .sec-ttl{ font-size: 22px; }
	#ev-items .cach .sec-ttl .sec-ttl__en{ font-size: 15px; }
	#ev-items .cach p{ padding: 15px 0 0; font-size: 14px; }
	#ev-items .cach .sec-ttl small{ font-size: 12px; }
	
	#ev-items .btn-box{ width: 100%; padding: 0 0 35px; }
	#ev-items .btn-box a{ width: 100%; height: 60px; }


/* ----------------------------------------------------------------------------------- point */
	#point{ padding: 60px 0 30px; }
	#point .cach{ padding: 0 0 15px; }
	#point .point{ padding: 30px 0; }
	#point .flex-box{ display: block; }
	
	#point .box-l{ margin-bottom: 20px; width: 100%; }
	#point .box-r{ width: 100%!important; }
	
	#point .point__ttl{ padding: 0 0 25px; }
	#point .point__ttl img{ width: 50px; }
	#point .point__ttl h3{ padding-left: 15px; font-size: 16px; }
	
	#point .pointA .point__list, #point .pointB .point__list{ padding: 0 0 30px; }
	#point .illustration{ padding: 30px 0 0; }
	#point .point__list li{ margin: 0 0 20px; padding: 0 0 0 36px; font-size: 15px;  }
	#point .point__list li::before{ top: 5px; width: 24px; height: 19px; }
	#point .point__list li p{ }
	
	#point .illustration dd ul{ flex-wrap: wrap; width: 100%; }
	#point .illustration dd li{ width: 42%; margin: 0 10px 10px; }
	#point .illustration dd li img{ width: auto; height: 20px; }
	#point .illustration .example{ padding: 15px 0 0; font-size: 12px; }
	
	#point .sample{ padding: 20px 5%; }
	#point .sample::before, #point .sample::after{ display: none; }
	#point .sample h5{ font-size: 19px; }
	#point .sample-list{ padding: 25px 0 0; }


/* ----------------------------------------------------------------------------------- effect */
	#effect{ margin: 0 0 30px; padding: 60px 0; }	
	#effect .bg-ttl{ top: -40px; font-size: 100px; }
	
	#effect .effect:not(:last-of-type){ padding: 0 0 50px; }
	#effect .effect__ttl{ display: flex; align-items: center; margin: 0 auto 30px; padding: 10px 5px; }
	#effect .effect__ttlbox::after{ bottom: -18px; width: 22px; height: 24px; }
	#effect .effect__ttl .num{ width: 50px; height: 50px; font-size: 12px; }
	#effect .effect__ttl .num span:first-of-type{ font-size: 12px; }
	#effect .effect__ttl .num span:last-of-type{ font-size: 28px; }
	#effect .effect__ttl h3{ width: calc(100% - 60px); padding: 0 0 0 10px; text-align: left; font-size: 16px; line-height: 150%; }
	
	#effect .effect__box{ padding: 30px 5%; border-radius: 20px; }
	#effect .flex-box{ display: block; }
	
	#effect .box-before,
	#effect .box-after{ width: 100%; }
	#effect h4{ width: 70%; padding: 11px; font-size: 19px; }
	  
	#effect .effect-list{ padding: 15px 0 0; }
	#effect .effect-list li{ margin: 0 0 10px; padding-left: 20px; }
	#effect .effect-list li::after{ width: 12px; height: 12px; }
	#effect .effect-list li p{ font-size: 14px; }
	
	#effect .effect__box::before,
	#effect .effect__box::after{ display: none; }
	
	#effect .box-middle{ position: relative; left: initial; translate: none; width: 100%; padding: 20px 0; }
	#effect .box-middle::before,
	#effect .box-middle::after{ position: absolute; content: ""; top: 50%; translate: 0 -50%; width: 28%; height: 1px; border: 1px dashed #707070; }
	#effect .box-middle::before{ left: 10px; }
	#effect .box-middle::after{ left: initial; right: 10px; }
	#effect .box-middle img{ width: 35px; transform: rotate(90deg); }
	
	#effect .reference{ width: 170px; font-size: 12px; }
	#effect .reference span,
	#effect .reference p{ padding: 10px; }
	
	#effect picture{ width: 100%; margin: 30px auto 0; }
	
	
/* ----------------------------------------------------------------------------------- cese */
	#cese .cese-inner{ max-width: 90%; }
	#cese .flex{ display: block; }
	#cese .divide-layout__item{ width: 100%; margin: 0 0 4rem; }	
	#cese .elem-tags-list__unordered li{ padding: 2px 10px 5px; }
	
	

/* ----------------------------------------------------------------------------------- related-article */

  #related-article .divide-layout[data-sp="column2"].divide-layout--column-4 .divide-layout__item { margin-left: 3.22321%; width: 46.7365%; }


/* ----------------------------------------------------------------------------------- files.jsp */
	#news{ padding: 60px 0; }
	
	#contact{ padding: 50px 0rem; }
	#contact .flex .txt{ padding: 0; }
	
	#tie-up.company_box { max-width: 800px; padding-top: 80px}
	#tie-up.company_box h2 { width: 100%;  max-width: 300px; text-align: center; font-size: 19px; }
	#tie-up.company_box .box .list_box{ flex-wrap: wrap; padding: 75px 0 40px;}
	#tie-up.company_box .box .list_box li:not(:last-child){margin: 0 0 0 0;}
	#tie-up.company_box .box .list_box li:nth-child(1){margin: 0 10% 5% 0;}
	#tie-up.company_box .box .list_box li:nth-child(2){margin: 0 0 5%;}
	#tie-up.company_box .box .list_box li:nth-child(3){margin: 0 10% 5% 0;}
	#tie-up.company_box .box .list_box li:nth-child(4) {margin: 0 0 5%;}
	#tie-up.company_box .box .list_box li{width: 40%;}
	
	#tie-up.company_box h5{ font-size: 18px; padding: 20px 10px; }
	
	
}