@charset "utf-8";

.company-about{}
.company-about .wrapper{padding:82px 0 60px;}
.company-about h2{color:#004ba1;font-weight:bold;text-align:center;margin-bottom:20px;font-size:30px;}
.company-about .text{color:#474747;text-align:center;line-height:2.1;}

.company-outline{padding:60px 0 100px;background:#f6f9fc;}
.company-outline .upper_cont{margin-top:-55px;display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;}
.company-outline .upper_cont .title{width:350px;height:350px;position:relative;}
.company-outline .upper_cont .title > *{position:absolute;top:50%;left:0;width:100%;text-align:center;display:block;}
.company-outline .upper_cont .title span{color:#004ba1;font-size:34px;line-height:38px;margin-top:-36px;}
.company-outline .upper_cont .title h2{margin-top:13px;}

.company-outline table{width:100%;border-top:1px solid #dcdcdc;}
.company-outline th,.company-outline td{line-height:20px;padding:20px 0;border-bottom:1px solid #dcdcdc;}
.company-outline th{width:160px;padding-left:20px;}
.company-outline td{padding-right:20px;}

.company-navi{}
.company-navi ul{display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;margin:0 -16px 38px; }
.company-navi li{width:244px;margin:0 16px;padding:1px;background:#fff;}
.company-navi li a{font-weight:bold;display:block;padding:21px 0;text-align:center;line-height:20px;color:#9f9f9f;text-decoration:none;background:url(../img/icon_off.jpg) 87.5% 50% no-repeat #fff;}

.company-philosophy,
.company-sdgs,
.company-profile,
.company-history{margin-bottom:40px;padding:55px 40px 60px;-webkit-border-radius: 10px;border-radius: 10px;background-color:#fff;
box-shadow:0 5px 5px 0 rgba(0,0,0,0.1);}

.company-philosophy ul{width:630px;padding:52px 0 30px 20px;}
.company-philosophy li{padding:0 0 22px 23px;position:relative;font-size:18px;}
.company-philosophy li::after{content:"○";position:absolute;left:0;top:0;width:23px;height:32px;}

.company-sdgs .upper_cont .title{height:360px;}
.company-sdgs .about{width:610px;padding:60px 20px 30px 20px;}
.company-sdgs .about h3{font-size:18px;font-weight:bold;margin-bottom:20px;}
.company-sdgs .about .text{font-size:15px;margin-bottom:10px;}
.company-sdgs .about .detail{font-size:12px;}
.company-sdgs .about .detail a{display:block;color:#939393;}

.company-sdgs .mark_explain{border-top:1px solid #e5e5e5;}
.company-sdgs .mark_explain .box{padding:30px 20px 30px 25px;border-bottom:1px solid #e5e5e5;display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;}
.company-sdgs .mark_explain .mark{width:325px;}
.company-sdgs .mark_explain ul{display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;}
.company-sdgs .mark_explain li{width:140px;margin-right:20px;}
.company-sdgs .mark_explain .explain{width:610px;padding-left:20px;}
.company-sdgs .mark_explain .explain h4{font-size:20px;font-weight:bold;margin-bottom:10px;}
.company-sdgs .mark_explain .explain p{font-size:15px;}

.company-profile .title{margin-bottom:25px;}
.company-profile .title > span{font-size:34px;color:#004ba1;}
.company-profile .box{}
.company-profile .box .profile{width:600px;float:left;}
.company-profile .box .map{width:380px;float:right;}
.company-profile .box .map > *{width:100%;height:509px;position:relative;}

.company-history .title{margin-bottom:25px;}
.company-history .title > span{font-size:34px;color:#004ba1;}
.company-history td.year,
.company-history td.month{text-align:right;padding-right:0px;}
.company-history td.year{width:80px;}
.company-history td.month{width:44px;padding-right:30px;}



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

.company-about .wrapper{padding:72px 20px 60px;}
.company-about h2{font-size:26px;}
.company-about .text{text-align:left;}

.company-outline{padding-bottom:20px;}

.company-navi ul{margin:0 -10px 30px; }
.company-navi li{width:21%;margin:0 2%;padding:1px;background:#fff;
-webkit-box-sizing: border-box;box-sizing: border-box;}
.company-navi li a{background-position:-100% -100%;}

.company-outline .upper_cont{display:table;}
.company-outline .upper_cont > *{display:table-cell;}
.company-outline .upper_cont .title{width:35%;height:auto;}
.company-outline .upper_cont .title span{font-size:32px;}
.company-outline .upper_cont ul{width:auto;}

.company-philosophy li{font-size:16px;}

.company-sdgs .about{width:auto;}

.company-sdgs .mark_explain .mark{width:300px;margin:0 auto 20px;}
.company-sdgs .mark_explain .mark ul{margin-right:-20px;}
.company-sdgs .mark_explain .on_x ul{margin-right:0;}
.company-sdgs .mark_explain .on_x li{margin:0 auto;}
.company-sdgs .mark_explain .explain{width:auto;padding-left:0px;}
.company-sdgs .mark_explain .explain h4{text-align:center;margin-bottom:10px;}


.company-profile .title{margin-bottom:20px;}
.company-profile .title > span{font-size:26px;}
.company-profile .box{}
.company-profile .box .profile{width:100%;float:none;}
.company-profile .box .map{width:100%;float:none;margin-bottom:20px;}
.company-profile .box .map > *{height:350px;}

.company-history .title{margin-bottom:20px;}
.company-history .title > span{font-size:26px;color:#004ba1;}

}
@media screen and (min-width:768px) {
	.company-navi li a:hover{color:#0065b4;background-image:url(../img/icon_on.jpg);}
	.company-navi li:hover{background: -moz-linear-gradient(left,#004aa0,#01b2ec); 
	background: -webkit-linear-gradient(left,#004aa0,#01b2ec); 
	background: linear-gradient(left,#004aa0,#01b2ec);}
}
@media screen and (max-width:767px) {

.company-about .wrapper{padding:40px 20px 60px;}
.company-about h2{font-size:20px;}
.company-about .text{line-height:1.8;}

.company-navi li{width:46%;margin-bottom:10px;
background: -moz-linear-gradient(left,#004aa0,#01b2ec); 
background: -webkit-linear-gradient(left,#004aa0,#01b2ec); 
background: linear-gradient(left,#004aa0,#01b2ec);}
.company-navi li a{background:#fff;color:#0065b4;}

.company-philosophy,
.company-sdgs,
.company-profile,
.company-history{margin-bottom:30px;padding:45px 20px 40px;}
.company-outline .upper_cont,
.company-outline .upper_cont > *{display:block;}

.company-outline .upper_cont{margin-top:0;}
.company-outline .upper_cont .title{width:100%;}
.company-outline .upper_cont .title > *{position:static;top:auto;left:auto;}
.company-outline .upper_cont .title span{font-size:26px;margin-top:0;}
.company-outline .upper_cont .title h2{margin-top:0px;}
.company-outline .upper_cont ul{padding:30px 0 8px;}
.company-outline .upper_cont li{font-size:15px;}

.company-sdgs .about .detail a{word-break: break-all;}

.company-sdgs .about{padding:30px 0px;}
.company-sdgs .mark_explain .box{padding:30px 0;}
.company-sdgs .mark_explain .mark{width:260px;margin-bottom:10px;}

.company-sdgs .mark_explain li{width:120px;}
.company-sdgs .mark_explain .explain h4{font-size:18px;margin-bottom:5px;}

.company-outline th,
.company-outline td{display:block;width:auto;}
.company-outline th{font-weight:bold;border-color:#fff;padding:10px 10px 0;}
.company-outline td{padding:0 10px 10px;}

.company-history td.year,
.company-history td.month{font-weight:bold;width:auto;display:inline-block;border-color:#fff;padding:10px 10px 0;}
.company-history td.year{padding-right:0px;}
.company-history td.month{padding-left:0px;}


}

@media screen and (max-width:320px) {
	.company-about h2{font-size:18px;}
}