@charset "utf-8";

/* ----------------------------------------------------------------------------------- provide */
#provide{ background: #fff; }
#provide h2 { font-size: 49px; margin-bottom: 83px;  margin-bottom: 18px; text-align: center;}
#provide h2 span { display: block; color: #009D95; margin: 0 auto 29px; font-weight: 600;}
#provide .provide__sub{ padding-bottom: 3rem; font-size: 20px; text-align: center; line-height: 150%; }

#provide .tab-group{ display: flex; align-items: center; justify-content: center; }
#provide .tab-group li{ cursor: pointer; width: 580px; height: 82px; margin: 0 20px; padding: 20px 10px 24px; font-size: 30px; background: #ECF2F2; border: 3px solid #ECF2F2; text-align: center; border-width: 8px 3px 0 3px; border-style: solid; border-color: #ECF2F2; box-sizing: border-box; }
#provide .tab-group li.is-active{ position: relative; z-index: 1; color: #009C93; background: #fff; border-color: #009C93; }
#provide .tab-group li a{ padding: 0 0 5px; }
#provide .tab-group li:hover a{ border-bottom: 3px solid #009C93; }

#provide .panel-group{ position: relative; margin-top: -3px; padding: 48px 0 0; border-top: 3px solid #009C93; }
#provide .panel-group .panel.is-show{ display: block; }

#provide .check-color{ opacity: 0; appearance: none; }
#provide .provide__check{ display: flex; align-items: center; flex-wrap: wrap; margin-bottom: 48px; }
#provide .provide__check-box{ cursor: pointer; margin: 0 16px 16px 0; display: inline-block; border-radius: 100px; padding: 16px; border: 1px solid #AAAAAA; }

#provide .provide__check-box span{ position: relative; padding-left: 40px; font-size: 18px; }
#provide .provide__check-box span:before,
#provide .provide__check-box span:after{ position: absolute; content: ""; border-radius: 100%; top: 50%; translate: 0 -50%; }
#provide .provide__check-box span:before{ left: 0; width: 30px; height: 30px; border: 4px solid #AAAAAA; }

#provide .provide__check-box.js-change{ border-color: #FCF3EC; background: #FCF3EC; }
#provide .provide__check-box input:checked + span:before{ border-color: #EA6E04; }
#provide .provide__check-box input:checked + span:after{ left: 9px; width: 12px; height: 12px; background: #EA6E04; }

#provide .checked-items span{ display: inline-block; padding: 0 10px 40px; font-size: 30px; color: #EA6E04; }
#provide .provide__contents ul{ align-items: stretch; display: flex; flex-wrap: wrap; }

#provide .provide__contents-box{ position: relative; width: calc(100% / 3 - 2%); margin: 0 3% 40px 0; border: 1px solid #CECECE; box-sizing: border-box; background: #fff; }
#provide .provide__contents-box:nth-of-type(3n){ margin-right: 0; }
#provide .provide__contents-box:hover{ filter: drop-shadow(0px 0px 6px rgba(0,0,0,0.2)); }

#provide .provide__contents-box a{ display: block; padding: 15px; }
#provide .provide__contents-box img{ width: 100%; height: auto; }
#provide .provide__contents-box .text{ padding: 20px 0 0; }
#provide .provide__contents-box .text h3{ margin-bottom: 0; padding: 0 0 10px; font-size: 1.25rem; line-height: 1.5; text-align: left; }
#provide .provide__contents-box .text p{ padding: 0 0 42px; font-size: 16px; font-family: 'Noto-Sans-JP-Regure', sans-serif; line-height: 150%; }

#provide .provide__contents-box .view{ position: absolute; right: 15px; bottom: 15px; text-align: right; }
#provide .provide__contents-box .view small{ font-size: 14px; color: #23347D; }
#provide .provide__contents-box .view .arrow{ transform: rotate(45deg); display: inline-block; width: 7px; height: 7px; border-top: 1px solid #23347D; border-right: 1px solid #23347D; }

#provide .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; }


/* ----------------------------------------------------------------------------------- files.jsp */
#news{ padding-bottom: 120px; }


#contact .flex .txt h3{ font-size: 35px; line-height: 150%; }
#vision .vision p{ width: initial; font-size: 29px; line-height: 165%; margin-bottom: 42px; text-align: center; }
#vision .status h2 { font-size: 49px; margin-bottom: 48px; text-align: center;}
#vision .status h2 .neue { display: block; margin: 0 auto 24px;}
#vision .status h2 .unit { font-size: 30px;}
#vision .status h2 small { font-size: 20px; line-height: 100%;}
#vision .status h2 small.sal_2{padding: 10px 0 0;display: block;}
#vision .status h2 small em { color: #fff;}
#vision .status .data .count .num span,
#vision .status .installations .flex .right .count span,
#vision .status .installations .flex .right .plus span,
#vision .status .installations .flex .right th span{ font-family: -apple-system, "Noto Sans Japanese", "Hiragino Sans", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif; }
#vision .status .installations h3 { font-size: 32px; color: #009D95; text-align: center; margin-bottom: 40px;}
#vision .status .installations h3 .unit { font-size: 24px;}
#vision .status .installations .flex .right .city{ width: 135px; }

#provide .company_box .box .list_box li{width: 18%; margin: 0 1%;}
#provide .company_box .box .list_box img{width: 100%; height: auto;}

#cese h2 { font-size: 49px; margin-bottom: 71px; text-align: center;}
#cese h2 span { display: block; color: #009D95; margin: 0 auto 29px;}
#cese .case li { display: block; width: calc(100% / 4 - 2%); color: #000; margin-right: 2%;}
#cese .case li:last-child { margin-right: 0;}
#cese .case a{ width: 100%; }


@media only screen and (max-width: 1245px) {
	
	#cese .case { display: flex; }
	
}

@media only screen and (max-width: 640px) {
	#vision .status .installations .flex .right th{ width: 18%; }
	#vision .status .installations .flex .right .city{ width: 80px; }
}



@media only screen and (max-width: 768px) {
	
/* ----------------------------------------------------------------------------------- provide */
	#provide h2 { font-size: 20px; margin-bottom: 52px;}
	#provide h2 span { margin-bottom: 10px;}
	#provide .provide__sub{ font-size: 13px; }	
	
	#provide .tab-group li{ padding: 10px 5px 17px; font-size: 16px; height: 45px; }
	#provide .panel-group{ padding: 30px 0 0; }
	
	#provide .provide__check{ margin-bottom: 25px; }
	#provide .provide__check-box{ margin: 0 0 10px; display: block; padding: 12px 10px 9px; width: 100%; }
	#provide .provide__check-box span{ padding-left: 26px; font-size: 14px; }
	#provide .provide__check-box span::before{ width: 20px; height: 20px; border-width: 2px; }
	
	#provide .provide__check-box input:checked + span:after{ left: 5px; width: 10px; height: 10px; }
	
	#provide .checked-items span{ padding: 0 0 20px; font-size: 17px; text-align: center; }
	#provide .provide__contents-box{ width: 100%; height: auto; margin: 0 0 20px; }
	#provide .provide__contents-box .text h3{ font-size: 16px; }
	#provide .provide__contents-box .text p{ padding: 0 0 20px; font-size: 14px; }
	
	#provide .provide__contents-box .view{ position: initial; }
	#provide .provide__contents-box .view small{ font-size: 12px; }
	
	
	#provide .company_box h2{ font-size: 18px; width: 100%; text-align: center; max-width: 200px; padding: 10px 0px; }

	
/* ----------------------------------------------------------------------------------- files.jsp */
	#news{ padding-bottom: 60px; }
	
	#cese .case { display: block; }
	#cese .case a { width: 100%; }
	
	#vision .vision p{ font-size: 17px; line-height: 165%; margin-bottom: 22px; text-align: center; }
	#vision .status h2{ font-size: 20px; margin-bottom: 43px; line-height: 155%; }
	#vision .status h2 .neue { margin-bottom: 30px;}
	#vision .status h2 .unit { font-size: 15px;}
	#vision .status h2 small { font-size: 14px}
	#vision .status .installations h3 { font-size: 22px; margin-bottom: 24px;}
	#vision .status .installations h3 .unit { font-size: 15px;}
	
	#provide .company_box .box .list_box img:nth-child(1){ margin: 0; }
	
	#cese h2 { font-size: 20px; margin-bottom: 33px; text-align: center;}
	#cese h2 span { margin-bottom: 10px;}
	#cese .case li { display: block; width: 100%; margin-bottom: 50px;}
	#cese .case li:last-child { margin-bottom: 0;}

	
}