#work #Sub{
position: sticky;
z-index: 200;
width: 100%;
background:#fff;
padding: 2em 0;

}

@media screen and (min-width: 768px) {
#work #Sub{
top: 80px;
}
}

@media all and (max-width: 999px) {
#work #Sub{
top: 60px;
}
}

@media all and (max-width: 767px) {
#work #Sub{
top: 46px !important;
}
}

.openbtn,
.has-btn{
border:solid 2px #fff;
border-radius: 10px;
box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.2);
}


.g1 .has-btn,
.o-btn1{
background: rgba(225, 139, 79, 1);
}

.g2 .has-btn,
.o-btn2{
background: rgba(212, 78, 128, 1);
}

.g3 .has-btn,
.o-btn3{
background: rgba(189, 211, 101, 1);
}
.g4 .has-btn,
.o-btn4{
background: rgba(62, 141, 190, 1);
}

@media all and (max-width: 767px) {
.has-btn{
border:none;
box-shadow:none;
border-radius: 5px;
}
}



/*========= ナビゲーションドロップダウンのためのCSS ===============*/


#subnav{
position: sticky;
top: 0;
z-index: 100;
width: 100%;
	background:#fff;
	color:#fff;
	text-align: center;
}

#subnav > ul{
	list-style: none;
	display: flex;
	justify-content: space-between;
	position: relative;
}
#subnav > ul li{
width: 23%;
}

#subnav ul ul{
	display: block;
	justify-content: center;
}
#subnav ul ul li{
	width: auto;
}


@media screen and (min-width: 768px) {
#subnav ul ul{
	display: flex;
}

#subnav li.has-child .g1 ul{
border: solid 4px rgba(225, 139, 79, 1);
}
#subnav li.has-child .g2 ul{
border: solid 4px rgba(212, 78, 128, 1);
}
#subnav li.has-child .g3 ul{
border: solid 4px rgba(189, 211, 101, 1);
}
#subnav li.has-child .g4 ul{
border: solid 4px rgba(62, 141, 190, 1);
}

#subnav li.has-child ul:before {
  content: "";
  position: absolute;
  top: -24px;
  margin-left: -15px;
  border: 12px solid transparent;
  z-index: 2;
}

#subnav li.has-child ul:after {
  content: "";
  position: absolute;
  top: -30px;
  margin-left: -17px;
  border: 14px solid transparent;
  z-index: 1;
}


#subnav li.has-child .g1 ul:before,
#subnav li.has-child .g1 ul:after {
  left: 12%;
  border-bottom: 12px solid rgba(225, 139, 79, 1);
}

#subnav li.has-child .g2 ul:before,
#subnav li.has-child .g2 ul:after{
  left: 37%;
  border-bottom: 12px solid rgba(212, 78, 128, 1);
}

#subnav li.has-child .g3 ul:before,
#subnav li.has-child .g3 ul:after {
  left: 63%;
  border-bottom: 12px solid rgba(189, 211, 101, 1);
}

#subnav li.has-child .g4 ul:before,
#subnav li.has-child .g4 ul:after {
  left: 88%;
  border-bottom: 12px solid rgba(62, 141, 190, 1);
}
}


/*ナビゲーションのリンク設定*/
#subnav ul li a{
	display: block;
	text-decoration: none;
	color: #fff;
padding:.7em 0;
transition:all .3s;
font-size: 160%;
}

#subnav ul li li a{
padding:.8em 1em;
font-size: 120%;
}

#subnav ul li a:hover{
	color:#fff;	
}

@media screen and (min-width: 768px) {
#subnav li.has-child ul{
	position: absolute;
	left:0;
	top:90px;
	z-index: 4;
	background:#fff;
	width:100%;
	visibility: hidden;
	opacity: 0;
	transition: all .3s;
box-sizing: border-box;
border-radius: 20px;
padding: 2em 0;
}



/*hoverしたら表示*/
#subnav li.has-child:hover ul,
#subnav li.has-child ul li:hover ul,
#subnav li.has-child:active ul,
#subnav li.has-child ul li:active ul{
  visibility: visible;
  opacity: 1;
}

/*ナビゲーションaタグの形状*/
#subnav li.has-child ul li a{
	color: #333;
	border-bottom:solid 1px rgba(255,255,255,0.6);
}

#subnav li.has-child ul li:last-child > a{
	border-bottom:none;
   }

.g1 ul li a:hover,
.g1 ul li a:active
{
color: rgba(225, 139, 79, 1) !important;
}
.g2 ul li a:hover,
.g2 ul li a:active
{
color: rgba(212, 78, 128, 1) !important;
}
.g3 ul li a:hover,
.g3 ul li a:active
{
color: rgba(189, 211, 101, 1) !important;
}
.g4 ul li a:hover,
.g4 ul li a:active
{
color: rgba(62, 141, 190, 1) !important;
}




.openbtn{
display: none;
}
.closebtn{
display: none !important;
}

}


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

@media all and (max-width: 767px) {
.g-nav{
    position:fixed;
	z-index: -1;
	opacity: 0;
	top:0;
	left:0;
	width:100%;
    height: 100vh;
	transition: all 0.3s;
    pointer-events: none; 
}
.g-nav.panelactive{
	opacity: 1;
	z-index:100;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
	background:#fff;
}
.g-nav .has-btn{
margin:5em auto 0; 
width: 80%;
}

/*ナビゲーション*/
.g-nav ul{
    display: none;
    position: absolute;
    z-index: -1;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    width: 100%;
    pointer-events: none; 
}

.g-nav.panelactive ul {
    display: block;
    z-index: 999;
    pointer-events: auto;
}

/*リストのレイアウト設定*/
.g-nav li{
	list-style: none;
    text-align: center; 
}
#subnav ul li a {
font-size: 200% !important;
}
.g-nav li a{
	text-decoration: none;
	padding:10px;
	display: block;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: bold;
font-size: 200% !important;
}

.g-nav li a:hover{
	color: #333 !important;
}

.g1 li a{
color: rgba(225, 139, 79, 1) !important;
}
.g2 li a{
color: rgba(212, 78, 128, 1) !important;
}
.g3 li a{
color: rgba(189, 211, 101, 1) !important;
}
.g4 li a{
color: rgba(62, 141, 190, 1) !important;
}




.closebtn,
.openbtn{
display: block;
cursor: pointer;
z-index: 9999;
}
.openbtn{
font-size: 130%;
padding: .5em 0;
white-space: nowrap;
}
.closebtn{
position: absolute;
width: 30px;
height: 30px;
top:5px;
right:5px;
background-image: url(../images/close_btn.svg) ;
background-repeat: no-repeat;
background-size: contain;
}
.closebtn span
{
display: block;
text-indent:100%;
white-space:nowrap;
overflow:hidden;
}
}