@charset "utf-8";
/* CSS Document */

/* --------------------------------------------------------------------------------------
 グローバルメニュー
--------------------------------------------------------------------------------------- */
ul.g_nav{
	width: 100%;
	max-width: 1200px;
	margin:20px auto 0 auto;
	
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	
}

ul.g_nav li{
	width: 16.6%;
	border-right: 2px solid #fff;
	text-align: center;
	font-size: 20px;
}
ul.g_nav li:last-child{border: none;}

ul.g_nav li a.button {
	display: inline-block;
	width: 100%;
	height: 42px;
	line-height: 42px;
	
	position: relative;
	z-index: 2; 
 background-color: #C9391C;
 color: #fff;
 overflow: hidden;
}

ul.g_nav li.on a{ background-color: #F29600; }

/* マウスオーバー効果PCのみ */
@media screen and (min-width: 769px) {
ul.g_nav li a.button::before,
ul.g_nav li a.button::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: '';
}
ul.g_nav li a.button,
ul.g_nav li a.button::before,
ul.g_nav li a.button::after {
  -webkit-transition: all .3s;
  transition: all .3s;
}

ul.g_nav li a.button:hover {
  color: #fff;
}
ul.g_nav li a.button::after {
  top: -100%;
  width: 100%;
  height: 100%;
}
ul.g_nav li a.button:hover::after {
  top: 0;
  background-color: #F29600;
}
}


/* SP ///////////////////////////////////////////////////// */
@media screen and (max-width: 768px) {
ul.g_nav{}	
ul.g_nav li{	width: 33.3%; font-size: 14px; margin: 0;}
ul.g_nav li:nth-child(3){	border: none;}
ul.g_nav li:nth-child(n + 4) { margin-top: 0; }

ul.g_nav li a.button {
	height: 30px;
	line-height: 30px;
	}
}


/* --------------------------------------------------------------------------------------
 事業案内メニュー
--------------------------------------------------------------------------------------- */
/* PC ///////////////////////////////////////////////////// */
@media screen and (min-width: 769px) {
#work_contents ul.w_nav{}
#work_contents ul.w_nav li{ margin-top: 2px; font-size: 18px;}
	
#work_contents ul.w_nav li a{
	display: block;
	position:relative;
	padding: 12px 0px 12px 35px;
	background: #E5E5E6;
}
#work_contents ul.w_nav li a:hover{ background: #AED4E9; }
#work_contents ul.w_nav li.on a{ background-color: #AED4E9; }
	
#work_contents ul.w_nav li a:before{
	content:''; 
	display:block; 
	position:absolute; 
	top:16px; 
	left:16px; 
	height:0; 
	width:0; 
	border-top: 6px solid transparent;
	border-right: 7px solid transparent;
	border-bottom: 6px solid transparent;
	border-left: 9px solid #000;
}

#work_contents .work_menu .banner01{
	text-align: center;
	margin-top: 2px;
	font-size: 18px;
	}
#work_contents .work_menu .banner01 a{
	display: block;
	background: #E5DFAC;
	padding: 18px 0px 18px 0px;
}	
#work_contents .work_menu .banner01 a:hover{ background: #AED4E9; }
#work_contents .work_menu .banner01_on a{ background-color: #AED4E9; }
	
}

/* SP ///////////////////////////////////////////////////// */
@media screen and (max-width: 768px) {
#work_contents ul.w_nav{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}
#work_contents ul.w_nav li{ font-size: 14px;}
#work_contents ul.w_nav li a{
	display: block;
	position:relative;
	padding: 4px 20px 4px 16px;
}
#work_contents ul.w_nav li a:before{
	content:''; 
	display:block; 
	position:absolute; 
	top:6px; 
	left:0; 
	height:0; 
	width:0; 
	border-top: 6px solid transparent;
	border-right: 7px solid transparent;
	border-bottom: 6px solid transparent;
	border-left: 9px solid #000;
}
	
#work_contents ul.w_nav li.on a{ color: #C9391C; }
	
#work_contents .work_menu .banner01{
	margin-top: 10px;
	font-size: 14px;
	}
#work_contents .work_menu .banner01 a{
	display: block;
	position:relative;
	padding: 4px 20px 4px 16px;
}

#work_contents .work_menu .banner01 a:before{
	content:''; 
	height:0; 
	width:0; 
	display:block; 
	border:5px transparent solid; 
	border-right-width:0; 
	border-left-color:#000; 
	position:absolute; 
	top:8px; 
	left:8px;
}
 
#work_contents .work_menu .banner01 a:after{
	content:''; 
	height:2px; 
	width:10px; 
	display:block; 
	background:#000; 
	position:absolute; 
	top:12px; 
	left:0px;
}
#work_contents .work_menu .banner01_on a{ color: #C9391C; }
}







