@charset "utf-8";
/* CSS Document */


/*=================================================
共通
==================================================*/
.section_wrap{width: 100%; max-width: 960px; margin: 50px auto 150px; padding: 0 0px;}
.section_wrap .main{width: 100%;}
/*スマホ*/
@media screen and (max-width: 768px) {
    .section_wrap{margin: 15% auto 0; padding: 0 10px; }
    .section_wrap .main{width: 100%;}   
}

/*=================================================
タブ
==================================================*/

/*tabの形状*/
.tab{
	display: flex;
	flex-wrap: wrap;
}
.tab li a{
	display: block;
    font-size:23px;
    font-weight: bold;
	background:#2f88aa;
    color:#FFF;
	margin:0 2px;
	padding:30px 130px;
    position: relative;
}
.tab li a::after{
    content:"";
    width:100%;    
    display: inline-block;
    position: absolute;
    top:81px;
    left:-2px;
    height: 1px;
    padding: 10px 2px; 
    border-bottom:solid 1px #2f88aa;
}
/*liにactiveクラスがついた時の形状*/
.tab li.active a{
	background:#fff;
	padding:30px 120px 35px;
    color:#2f88aa;        
    border-top:solid 1px #2f88aa;
    border-left:solid 1px #2f88aa;  
    border-right:solid 1px #2f88aa;
}
.tab li.active a::after{border-bottom:none;}

.note{padding:14px 0 0; color:#2f88aa; font-weight: bold;}
/*エリアの表示非表示と形状*/
.area {
	display: none;/*はじめは非表示*/
	/*opacity: 0;透過0*/
	background: #fff;
	padding:40px 0px;
}

/*areaにis-activeというクラスがついた時の形状*/
.area.is-active {
    display: block;/*表示*/
    /*animation-name: displayAnime; ふわっと表示させるためのアニメーション
    animation-duration: 1s;
    animation-fill-mode: forwards;*/
}
/*
@keyframes displayAnime{
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
*/

/*スマホ*/
@media screen and (max-width: 980px) {
    /*tabの形状*/
    .tab{display: flex; flex-wrap: wrap; margin: 0 10px; }
    .tab li a{
        display: block;
        font-size:14px;
        font-weight: normal;
        background:#2f88aa;
        color:#FFF;
        margin:0 2px;
        padding:10px 30px;
        position: relative;
    }
    .tab li a::after{
        content:"";
        width:100%;    
        display: inline-block;
        position: absolute;
        top:81px;
        left:-2px;
        height: 1px;
        padding: 10px 2px; 
        border-bottom:none;
    }
    /*liにactiveクラスがついた時の形状*/
    .tab li.active a{
        background:#fff;
        padding:10px 30px 10px;
        color:#2f88aa;        
        border-top:solid 1px #2f88aa;
        border-left:solid 1px #2f88aa;  
        border-right:solid 1px #2f88aa;
    }
    .tab li.active a::after{border-bottom:none;}

    .note{padding:14px 10px 0; color:#2f88aa; font-weight: normal; font-size: 11px;}
    /*エリアの表示非表示と形状*/
    .area {
        display: none;/*はじめは非表示*/
        /*opacity: 0;透過0*/
        background: #fff;
        padding:40px 0px;
    }

    /*areaにis-activeというクラスがついた時の形状*/
    .area.is-active {
        display: block;/*表示*/
        /*animation-name: displayAnime; ふわっと表示させるためのアニメーション
        animation-duration: 1s;
        animation-fill-mode: forwards;*/
    }
}

/* --------------------------------------------------------------------------------------
 営業・製造拠点
--------------------------------------------------------------------------------------- */
.detail_link li a{
	display: block;
    font-size:14px;
    color:#2f88aa;
	margin:0 2px;
    position: relative;
}
/*.detail_link li a:active{pointer-events: none;}*/

/*liにactiveクラスがついた時の形状*/
.detail_link li.active a{
	font-weight: bold;
}

/*エリアの表示非表示と形状*/
.map_area {
	display: none;/*はじめは非表示*/
	/*opacity: 0;透過0*/
	background: #fff;
	padding:0px 20px;
}

/*areaにis-activeというクラスがついた時の形状*/
.map_area.is-active {
    display: block;/*表示*/
}

/*スマホ*/
@media screen and (max-width: 768px) {
    .detail_link li a{
        display: block;
        font-size:3vw;
        color:#2f88aa;
        margin:0 2px;
        position: relative;
    }    
}

/*--------------------------
拠点地図
---------------------------*/
.content_area_map{
    position: relative; 
    display: inline-block;
    width:68%;
    padding:0 2% 0 0;
    vertical-align: top;
    border-right: solid 1px #2f88aa;
}
.content_area_map img{width:100%;}

/*リンク位置*/
#koujou .content_area_map li,
#eigyosyo .content_area_map li,
#honsya .content_area_map li{position: absolute;}
/*〇マークのリンクボタン*/
#koujou .detail_link_maru li a,
#eigyosyo .detail_link_maru li a,
#honsya .detail_link_maru li a{display: block; width: 14px; height: 14px; border-radius: 50%;}


/*本社*/
#honsya .detail_link li:nth-child(1){top:64%; left:32%;}/*本社*/
#honsya .detail_link_maru li:nth-child(1){top:17.2%; left:17.5%;}/*本社〇*/

/*営業所*/
#eigyosyo .content_area_map .detail_link li:nth-child(1){top:75%; left:60%;}/*東京支店*/
#eigyosyo .content_area_map .detail_link li:nth-child(2){top:27%; left:33%;}/*大阪支店*/
#eigyosyo .content_area_map .detail_link li:nth-child(3){top:14%; left:25%;}/*西神戸支店*/
#eigyosyo .content_area_map .detail_link li:nth-child(4){top:50%; left:67%;}/*仙台営業所*/
#eigyosyo .content_area_map .detail_link li:nth-child(5){top:58%; left:65%;}/*北関東営業所*/
#eigyosyo .content_area_map .detail_link li:nth-child(6){top:90.5%; left:51%;}/*名古屋営業所*/
#eigyosyo .content_area_map .detail_link li:nth-child(7){top:36.5%; left:47%;}/*北陸営業所*/
#eigyosyo .content_area_map .detail_link li:nth-child(8){top:21%; left:28%;}/*神戸営業所*/
#eigyosyo .content_area_map .detail_link li:nth-child(9){top:77%; left:27%;}/*広島営業所*/
#eigyosyo .content_area_map .detail_link li:nth-child(10){top:42%; left:12%;}/*北九州営業所*/
#eigyosyo .content_area_map .detail_link li:nth-child(11){top:36%; left:9%;}/*熊本営業所*/

#eigyosyo .content_area_map .detail_link_maru li:nth-child(1){top:63.5%; left:53.1%;}/*〇東京支店*/
#eigyosyo .content_area_map .detail_link_maru li:nth-child(2){top:64.8%; left:33.4%;}/*〇大阪支店*/
#eigyosyo .content_area_map .detail_link_maru li:nth-child(3){top:63%; left:29.3%;}/*〇西神戸支店*/
#eigyosyo .content_area_map .detail_link_maru li:nth-child(4){top:48%; left:62.2%;}/*〇仙台営業所*/
#eigyosyo .content_area_map .detail_link_maru li:nth-child(5){top:60.5%; left:52%;}/*〇北関東営業所*/
#eigyosyo .content_area_map .detail_link_maru li:nth-child(6){top:64.5%; left:40.2%;}/*〇名古屋営業所*/
#eigyosyo .content_area_map .detail_link_maru li:nth-child(7){top:54%; left:44.3%;}/*〇北陸営業所*/
#eigyosyo .content_area_map .detail_link_maru li:nth-child(8){top:64.8%; left:31.1%;}/*〇神戸営業所*/
#eigyosyo .content_area_map .detail_link_maru li:nth-child(9){top:63.7%; left:19.8%;}/*〇広島営業所*/
#eigyosyo .content_area_map .detail_link_maru li:nth-child(10){top:65%; left:11.1%;}/*〇北九州営業所*/
#eigyosyo .content_area_map .detail_link_maru li:nth-child(11){top:72%; left:9.8%;}/*〇熊本営業所*/



/*工場*/
#koujou .content_area_map .detail_link li:nth-child(1){top:66.5%; left:69%;}/*神戸第一工場*/
#koujou .content_area_map .detail_link li:nth-child(2){top:59.5%; left:71%;}/*神戸第二工場*/
#koujou .content_area_map .detail_link li:nth-child(3){top:53%; left:73%;}/*神戸第三工場*/
#koujou .content_area_map .detail_link li:nth-child(4){top:72.5%; left:49.5%;}/*木津工場*/
#koujou .content_area_map .detail_link li:nth-child(5){top:53%; left:21%;}/*播磨工場*/
#koujou .content_area_map .detail_link li:nth-child(6){top:46%; left:16%;}/*市川工場*/
#koujou .content_area_map .detail_link li:nth-child(7){top:58.8%; left:29%;}/*舞子工場*/
#koujou .content_area_map .detail_link li:nth-child(8){top:26.5%; left:54%;}/*西神第一工場*/
#koujou .content_area_map .detail_link li:nth-child(9){top:19%; left:51%;}/*西神第二工場*/


#koujou .content_area_map .detail_link_maru li:nth-child(1){top:49%; left:59.8%;}/*〇神戸第一工場*/
#koujou .content_area_map .detail_link_maru li:nth-child(2){top:49%; left:62.6%;}/*〇神戸第二工場*/
#koujou .content_area_map .detail_link_maru li:nth-child(3){top:43%; left:64%;}/*〇神戸第三工場*/
#koujou .content_area_map .detail_link_maru li:nth-child(4){top:40%; left:56%;}/*〇木津工場*/
#koujou .content_area_map .detail_link_maru li:nth-child(5){top:40.5%; left:41.6%;}/*〇播磨工場*/
#koujou .content_area_map .detail_link_maru li:nth-child(6){top:4.2%; left:31.2%;}/*〇市川工場*/
#koujou .content_area_map .detail_link_maru li:nth-child(7){top:52.5%; left:52.5%;}/*〇舞子工場*/
#koujou .content_area_map .detail_link_maru li:nth-child(8){top:42.5%; left:50.8%;}/*〇西神第一工場*/
#koujou .content_area_map .detail_link_maru li:nth-child(9){top:42%; left:48.5%;}/*〇西神第二工場*/

/*スマホ*/
@media screen and (max-width: 768px) {
    .content_area_map{
    position: relative; 
    display: inline-block;
    width:100%;
    padding:0 10px;
    border-right: none;
    }
    
    /*〇マークのリンクボタン*/
    #koujou .detail_link_maru li a,
    #eigyosyo .detail_link_maru li a,
    #honsya .detail_link_maru li a{display:none;}
    /*本社*/
    #honsya li:nth-child(1){top:39%; left:30%;}/*本社*/

    /*営業所*/
    #eigyosyo .content_area_map li:nth-child(1){top:73%; left:59%;}/*東京支店*/
    #eigyosyo .content_area_map li:nth-child(2){top:26%; left:31%;}/*大阪支店*/
    #eigyosyo .content_area_map li:nth-child(3){top:13%; left:23%;}/*西神戸支店*/
    #eigyosyo .content_area_map li:nth-child(4){top:49%; left:66%;}/*仙台営業所*/
    #eigyosyo .content_area_map li:nth-child(5){top:56%; left:60%;}/*北関東営業所*/
    #eigyosyo .content_area_map li:nth-child(6){top:89%; left:48%;}/*名古屋営業所*/
    #eigyosyo .content_area_map li:nth-child(7){top:35%; left:44%;}/*北陸営業所*/
    #eigyosyo .content_area_map li:nth-child(8){top:20%; left:26%;}/*神戸営業所*/
    #eigyosyo .content_area_map li:nth-child(9){top:75.5%; left:25%;}/*広島営業所*/
    #eigyosyo .content_area_map li:nth-child(10){top:41%; left:8.5%;}/*北九州営業所*/
    #eigyosyo .content_area_map li:nth-child(11){top:34%; left:5%;}/*熊本営業所*/

    /*工場*/
    #koujou .content_area_map li:nth-child(1){top:64.5%; left:66%;}/*神戸第一工場*/
    #koujou .content_area_map li:nth-child(2){top:58%; left:68%;}/*神戸第二工場*/
    #koujou .content_area_map li:nth-child(3){top:51%; left:70%;}/*神戸第三工場*/
    #koujou .content_area_map li:nth-child(4){top:70%; left:49%;}/*木津工場*/
    #koujou .content_area_map li:nth-child(5){top:51%; left:24%;}/*播磨工場*/
    #koujou .content_area_map li:nth-child(6){top:45%; left:18%;}/*市川工場*/
    #koujou .content_area_map li:nth-child(7){top:57%; left:32%;}/*舞子工場*/ 
    #koujou .content_area_map li:nth-child(8){top:24.5%; left:50%;}/*西神第一工場*/
    #koujou .content_area_map li:nth-child(9){top:17%; left:48%;}/*西神第二工場*/
        
    
}



/*--------------------------
拠点情報
---------------------------*/
.content_area_inner{
    display: inline-block;
    width: 31%; 
    vertical-align: top;
}

.content_area_inner .map_area{padding-top:100px; margin-top: -100px;}
/*拠点名*/
.content_area_inner .map_area h4{
    font-size:25px;
    color:#2f88aa;
    margin:0 0 10px;
    display: inline-block
}
.content_area_inner .map_area .torihikisaki{
    padding: 15px 0 0px 20px;
    display: inline-block;
    vertical-align: top;
    margin-top: -5px;
}
/*取引先*/
.content_area_inner .map_area .torihikisaki a{
    padding: 3px 5px 4px 8px;
    font-size:14px;
    border: solid 0.14em #2f88aa;
    border-radius: 10px;
    color: #2f88aa;
}

.content_area_inner .map_area .torihikisaki a::after{
    content: "＞";
    display: inline-block;
    font-size: 12px;
    padding:2px 0 0 5px;
    vertical-align: top;
}
.content_area_inner .map_area .torihikisaki a:hover{
    border: solid 0.14em #2f88aa;
    background: #2f88aa;
    color: #FFF;
}

/*対象地域*/
.content_area_inner .map_area p.taisyo{font-size: 18px; color:#2f88aa; margin-bottom: 10px;}
.content_area_inner .map_area p.taisyo span{font-weight: bold;}

/*TEL*/
.content_area_inner .map_area p.tel{font-size: 20px;}
.content_area_inner .map_area p.tel .tel_txt{color:#2f88aa; padding:0 10px 0 0;}

/*メール*/
.content_area_inner .map_area p.mail{margin:15px 0;}
.content_area_inner .map_area p.mail a{font-size: 14px; display: inline-block;}
.content_area_inner .map_area p.mail a::before{
    content: "";
    display: inline;
    margin-right: 10px;
    padding: 5px 10px;
    background:url("../img/company/head_img_mail.png") no-repeat;
    background-position: center center;
}
/*住所*/
.content_area_inner .map_area p.add{font-size: 15px; marign:10px 0 0 0;}
.content_area_inner .map_area figure{padding: 30px 0 0 0 ;}
/*マップリンクボタン*/
.content_area_inner .map_area p.add span a{
    background: #2f88aa;
    color:#FFF;
    padding :2px 4px;
    border-radius: 3px;
    font-size:12px;
    margin-left: 5px;
    
}

/*スマホ*/
@media screen and (max-width:768px) {
    .content_area_inner{ width: 100%; margin: 20px 0 0 0; padding: 20px 0 0; border-top: 1px solid #2f88aa; }
    .content_area_inner .map_area{padding-top:20px; margin-top: -20px;}
    /*拠点名*/
    .content_area_inner .map_area h4{
        font-size:18px;
        margin:0 0 10px;
    }
    .content_area_inner .map_area .torihikisaki{
        padding: 5px 0 0px 10px;
        display: inline-block;
        vertical-align: top;
        margin-top: 0px;
    }
    /*取引先*/
    .content_area_inner .map_area .torihikisaki a{
        padding: 3px 5px 4px 8px;
        font-size:14px;
        border: solid 0.14em #2f88aa;
        border-radius: 10px;
        color: #2f88aa;
    }

    .content_area_inner .map_area .torihikisaki a::after{
        content: "＞";
        display: inline-block;
        font-size: 12px;
        padding:2px 0 0 5px;
        vertical-align: top;
    }
    .content_area_inner .map_area .torihikisaki a:hover{
        border: solid 0.14em #2f88aa;
        background: #2f88aa;
        color: #FFF;
    }

    /*対象地域*/
    .content_area_inner .map_area p.taisyo{font-size: 14px; color:#2f88aa; margin-bottom: 20px;}
    .content_area_inner .map_area p.taisyo span{font-weight: bold;}

    /*TEL*/
    .content_area_inner .map_area p.tel{font-size: 16px;}
    .content_area_inner .map_area p.tel .tel_txt{color:#2f88aa; padding:0 10px 0 0;}

    /*メール*/
    .content_area_inner .map_area p.mail{margin:20px 0;}
    .content_area_inner .map_area p.mail a{font-size: 14px; display: inline-block;}
    .content_area_inner .map_area p.mail a::before{
        content: "";
        display: inline;
        margin-right: 10px;
        padding: 5px 10px;
        background:url("../img/company/head_img_mail.png") no-repeat;
        background-position: center center;
    }
    .content_area_inner .map_area p.add{font-size: 14px;}
    .content_area_inner .map_area figure{padding: 10px 0 0 0 ;}
}