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


/*------ grouplist (index.html & group) ------*/
.gra{
  width: 100%;
  height: 100px;
  background:-webkit-gradient(linear, left top, left bottom, color-stop(1.00, #fff), color-stop(0.00, #444));
  background: -webkit-linear-gradient(#444, #fff);
  background: -moz-linear-gradient(#444, #fff);
  background: -o-linear-gradient(#444, #fff);
  background: -ms-linear-gradient(#444, #fff);
  background: linear-gradient(#444, #fff);
  opacity: 0.4;
  position: relative;
  bottom:40px;
  z-index: 0;
}
.grouplist_wrap{
  background: rgba(255,255,255,0.5);
  height: 254px;
  margin-top: -259px;
}
.grouplist_wrap .labelstyle_A{
  width: 188px;
  height: 36px;
  position: relative;
  top:-36px;
}
.grouplist{
  max-width: 1020px;
  width: 96%;
  margin: 0 auto;
  position: relative;
  z-index: 9999;
}

.grouplist ul{
  display: flex;
  flex-direction: : row;

}
.grouplist ul li{
  width: 20%;
  height: 158px;
  background: #fff;
  margin-right: 30px;
  -js-display: flex;
  display: flex;
  justify-content: center;
  align-items: center;


  /* box-shadow */
  box-shadow:6px 7px 14px 0px rgba(0, 0, 0, 0.3);
  -moz-box-shadow:6px 7px 14px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow:6px 7px 14px 0px rgba(0, 0, 0, 0.3);
}

.grouplist ul li img:hover{
	opacity: 0.7;
	
}

.grouplist ul li img{
  width: 100%;
  height: auto;
  background: #fff;
  text-align: center;
}

  .grouplist ul li:nth-child(5){
    margin-right: 0;
  }

  .grouplist ul li:nth-child(6){
    display: none;
  }
@media screen and (max-width : 768px) {
  .grouplist_wrap{
    margin-top: 0;
    background: none;
    height: auto;
    margin-bottom: 20px;
  }
  .grouplist{
    width:100%;
    margin: 0 auto;
  }
  .grouplist .labelstyle_A{
    width: 40%;
    height: auto;
    padding: 4px;
    -js-display: flex;
    display: flex;
    justify-content: center;
    align-items: center;
    top:0;
    margin: 0 auto;
    margin-bottom: 20px;
    margin-top: 40px;
  }
  .grouplist ul{
    -js-display: flex;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
  }
  .grouplist ul li{
    width: calc(50% - 20px);
    max-width: 200px;
    height: auto;
    margin-right: 0;
    background: #fff;
    margin:10px;
    overflow: hidden;
  }


  .grouplist ul a:hover{
    opacity: 0.86;
  }
  .grouplist ul li:nth-child(5){
  	margin-right: 8px;
  }

  .grouplist ul li:nth-child(6){
    display: block;
    opacity: 0;
  }

  .grouplist ul li img{
    width: 100%;
  }

  .gra{
    width: 100%;
    height: 110px;
    top:700px;
    position: absolute;
    z-index: 0;
	  opacity: 0.2;
  }


}





/*------ ニュースリリース ------*/
.newsrelease{
  max-width: 1020px;
  width: 96%;
  height: auto;
  background: #fff;
  margin: 0 auto;
  margin-bottom: 44px;
  padding-bottom: 30px;
  position: relative;
  z-index: 9999;
  margin-top: -30px;
}

.newslist{
  margin: 25px 20px;
  margin-bottom: 38px;
  color:#595757;
}
.newslist a{
  color:#595757;
}
.newslist ul{
  width: 100%;
  height: auto;
  padding: 12px 0;
  border-bottom: 1px solid #dbdcdc;
  display: flex;
  flex-direction: row;
}
.newslist ul li:first-child{
  width: 155px;
}

.newslist ul li:last-child{
  width: 825px;
  -js-display: flex;
  display: flex;
  justify-content: flex-start;
  align-items:center;
}
.newsrelease a.btnstyle_A{
  margin-left: 20px;
}


@media screen and (max-width : 768px) {
  /*------ newsrelease (index.html) ------*/
  .newsrelease{
    width: 100%;
    height: auto;
    background: #fff;
    margin: 0 auto;
    margin-bottom: 44px;
    padding-bottom: 30px;
  }

  .newslist{
    width: 96%;
    margin: 25px 2%;
    margin-bottom: 38px;
    color:#595757;
  }
  .newslist ul{
    width: 100%;
    height: auto;
    min-height: 49px;
    border-bottom: 1px solid #dbdcdc;
    display: block;
  }
  .newslist ul li:first-child{
    width: 100%;
    padding-right: 0;
    text-align: left;
    margin-bottom: 5px;
    display: block;
  }

  .newslist ul li:last-child{
    width: 100%;
  }

  .newsrelease a.btnstyle_A{
    margin-left: 0;
    display: flex;
    justify-content: center;
    margin: 0 10%;
  }


}




/*------ 下層ページ ------*/
.sub_container{
  padding: 60px 0;
}

.wrap_page{
  width: 1020px;
  margin: 0 auto;
  background: #fff;
}

.wrap_contents{
  width: 980px;
  margin: 0 auto;
  margin-top: 10px;
  padding-bottom: 40px;
}

#companypage .wrap_contents{
  margin-top: 60px;
  padding-bottom: 80px;
}

.wrap_text{
  width: 960px;
  margin: 0 auto;
}


/*------ company ------*/
.nav_company{
  width: 980px;
  height: 38px;
  margin: 0 auto;
  padding-top: 20px;
}

.nav_company a{
  color:#fff;
  height: 38px;
  width: 100%;
}

.nav_company ul li:hover{
  background: #f5a900;
}

.nav_company nav ul{
  width: 980px;
  height: 38px;
  display: flex;
  flex-direction: row;
  margin: 0 auto;
}




/*------ history ------*/
.history_area{
  margin-top:40px;
  margin-bottom: 40px;
}

.history_area ul{
  width: 960px;
}

.overview_area{
  width: 720px;
}

.overview_area ul li,
.history_area ul li{
  display: flex;
  flex-direction: row;
  padding: 24px 0;
  width: 100%;
}

.overview_area ul li{
  width: auto;
}

.overview_area ul li:first-child,
.history_area ul li:first-child{
  padding-top:0;
  padding-bottom:24px;
}
.deco_01{
  width: 18px;
  height: 2px;
  background: #f5a900;
}
.deco_02{
  width: 8px;
  height: 8px;
  background: #f5a900;
  border-radius: 8px;
}
.ov_left{
  width: 16%;
}
.ov_left{
  display: flex;
  justify-content: flex-start;
  margin-left: -5px;
}

.year p{
  width: 88px;
  height: 28px;
  background: #f5a900;
  color:#fff;
}

.event{
  width: 82%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-left: 2%;
}
.event{
  padding-left: 0;
  padding-right: 2%;
}

.philosophy_area{
  text-align: center;
  line-height: 80px;
}




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




/*------ 下層ページ ------*/
.sub_container{
  padding: 5% 2%;
}
.wrap_page{
  width: 96%;
  margin: 0;
  background: #fff;
  padding: 0 2%;
}
.wrap_contents{
  width: 92%;
  margin: 0;
  padding: 0 4%;
}



/*--company --*/
.history_area ul{
  width: 100%;
}

.overview_area{
  width: 100%;
  margin-left: -2%;
}

.overview_area ul li,
.history_area ul li{
  display: flex;
  flex-direction: row;
  padding: 20px 0;
  width: 100%;
}

.overview_area ul li{
  width: auto;
  padding: 14px 0;

}

.overview_area ul li:first-child{
  padding-top:0;
  padding-bottom:20px;
}
.deco_01{
  width: 10px;
}
.deco_02{
  width: 6px;
  height: 6px;
  padding-right: 1px;
}
.ov_left,
.year{
  width: 30%;
}

.ov_left p,
.year p{
  width: 88px;
  height: 28px;
  background: #f5a900;
  color:#fff;
}

.ov_right,
.event{
  width: 67%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-left: 3%
}

.group_area .ov_left p{
  background:   #0097d7;
}





}