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

  company_nav.css　会社案内ベース

*****************************************************************************/

#leftBox {
    width: calc(((100% / 12) * 9) - 40.01px);
}

#rightBox {
    width: calc(((100% / 12) * 3.5) - 40.01px);
}

.flex-gap-20 {
    margin-left: 0px;
    margin-right: 0px;
}

p#topicPath {
  font-size: 75%;
  margin-top: 170px;
}

.sub_nav_box{
  max-width: 960px;
  margin-right:auto;
  margin-left: auto;
  margin-bottom: 2em;
}

.subnav_ttl{
  font-size: 1em;
  color: #0451ae;
  font-weight: bold;
}

.sub_nav_company{
  max-width: 960px;
  margin-right:auto;
  margin-left: auto;
  font-size: 0.85em;
  font-weight: bold;
  background-color: #344C96;
  border-radius: 5px;
  color: #FFF;
  text-align: center;
  height: auto;
}

.sub_nav_company a{
  color: #FFF;
}

.subnav_ul{
  clear: both;
  display: flex;
  flex-wrap: wrap;
}

.subnav_1,.subnav_2,.subnav_3,.subnav_4,.subnav_5{
  width: 20%;
/*
  padding: 10px;
*/
  position: relative;
  border-right: dotted 1px #FFF;
  border-bottom: dotted 1px #FFF;
}

.subnav_6,.subnav_7,.subnav_8,.subnav_9,.subnav_10{
  width: 20%;
/*
  padding: 10px 5px;
*/
  position: relative;
  border-right: dotted 1px #FFF;
}

.subnav_10{
  line-height: 3 !important;
}


.sub-nav{
  visibility: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  width: 100%;
  position: absolute;
  top: -1000px;
  left: 0px;
  font-size: 0.7em;
}

.subnav_1,.subnav_2,.subnav_3,.subnav_4,.subnav_5,.subnav_6,.subnav_7,.subnav_8,.subnav_9{
  line-height: 40px !important;
}

.subnav_2:hover .sub-nav {
  visibility: visible;
  transition: none;
  background-color:#3668A9;
  z-index: 1;
  top: auto;
  opacity: 1;
}

.subnav_3:hover .sub-nav {
  visibility: visible;
  transition: none;
  background-color:#3668A9;
  z-index: 1;
  top: auto;
  opacity: 1;
}

.sub-nav-li{
  width: 100% !important;
  border-bottom: solid 1px #FFF;
  height: 40px !important;
  line-height: 40px !important;
  background-color:#3668A9;
  z-index: 1;
}

.sub-nav-li:hover {
    background-color: #5067A1;
    transition: none;
    position: relative;
}

.sub-nav-li-a{
  height: 40px !important;
}

.underline{
  background: linear-gradient(transparent 75%, #c1e0ff 75%);
  font-weight: bold;
}


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

  .sub-width-limitter {
    padding-top: 0px;
}
}

@media only screen and (max-width : 800px) {
    body > main #mainPara {
        width: 100%;
        padding: 10px;
    }
    body > main #mainPara img {
        width: 100%;
    }

    body > div.main-contents {
        display: block;
        margin: 0;
    }

    body > main #leftBox,
    body > main #rightBox {
        padding: 10px;
        width: 100%;
        margin: 0;
    }
}


/*==768px以下の形状*/

@media screen and (max-width:768px){
	
  .sub_nav_box{
    margin-bottom: 10px;
  }
  
  .sub_nav_company{
		padding: 0;
    height: auto;
    display: inline-block;
    border-radius: 0;
    background-color: #344C96;
    color: #fff;
	/* background-color: #f1f1f1;
    color: #344C96; */
    font-size: 0.9em;
	}
  
  .sub_nav_company a{
    color: #fff;
    font-weight: bold;
  }
	
	.sub_nav_company ul{
		display: block;
	}
  
  
  .subnav_1,.subnav_2,.subnav_3,.subnav_4,.subnav_5,.subnav_6,.subnav_7,.subnav_8,.subnav_9,.subnav_10{
  line-height: 30px !important;
}
  
.subnav_1,.subnav_2,.subnav_3,.subnav_4,.subnav_5,.subnav_8{
  float: left;
  width: 25%;
  padding: 5px 5px;
  position: relative;
  border-right: solid 1px #FFF;
  border-bottom: solid 1px #FFF;
  font-size: 0.9em;
  }

.subnav_6,.subnav_7{
  float: left;
  width: 25%;
  padding: 5px 1px;
  position: relative;
  border-right: solid 1px #FFF;
  border-bottom: solid 1px #FFF;
  font-size: 0.9em;
  }  
  
  .subnav_10,.subnav_9{
  float: left;
  width: 50%;
  padding: 5px 5px;
  position: relative;
  border-right: solid 1px #FFF;
  border-bottom: solid 1px #FFF;
  font-size: 0.9em;
  }  
}
  


@media only screen and (max-width : 500px) {
  
.width-limitter {
  width: 100%;
  margin: 0 auto;
  padding-left: 10px;
  padding-right: 10px;
}

p#topicPath {
    margin-top: 155px;
}
  
  section{
    width: 96%;
    margin: 0 auto;
  }
  
  #leftBox {
    width: 100%;
}
  
  #rightBox{
    width: 100%;
  }
  
  #leftBox p {
    font-size: 100%;
    line-height: 2;
}
  
.sub_nav_company {
    padding: 0;
    height: auto;
    display: inline-block;
    border-radius: 0;
    background-color: #344C96;
    color: #fff;
	/* background-color: #e3e3e3;
    color: #344C96; */
    font-size: 0.8em;
}
  
  .sub-nav-li {
    width: 100% !important;
    border-bottom: solid 1px #FFF;
    height: 40px !important;
    line-height: 40px !important;
    background-color:#3668A9;
	/* background-color:#E0DEDE; */
    z-index: 1;
}

.sub-nav-li-a{
/*
  	color: #fff !important;
*/
}

  .subnav_8,.subnav_4{
    border-right: none;
  }
  
  .subnav_10,.subnav_9{
    border-bottom: none;
  }

}