@charset "utf-8";


/**************************
/* トップナビゲーション
**************************/
.hamburger {
    margin: 0px auto 0;
    width: 100%;
    max-width: 1000px;
    display: flex;
    justify-content: space-between;
}

.logo {
    font-size: 40px;
    font-weight: 700;
}

.hamburger .btn-gNav {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 30px;
    height: 24px;
    z-index: 505;
    box-sizing: border-box;
    cursor: pointer;
    -webkit-transition: all 400ms;
    transition: all 400ms;
}

.hamburger .btn-gNav span {
    position: absolute;
    width: 100%;
    height: 4px;
    background: #004ea2;
    border-radius: 10px;
    -webkit-transition: all 400ms;
    transition: all 400ms;
}

.hamburger .btn-gNav span:nth-child(1) {
    top: 0;
}

.hamburger .btn-gNav span:nth-child(2) {
    top: 10px;
}

.hamburger .btn-gNav span:nth-child(3) {
    top: 20px;
}

.hamburger .btn-gNav.open span:nth-child(1) {
    background: #ffffff;
    top: 6px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.hamburger .btn-gNav.open span:nth-child(2),
.hamburger .btn-gNav.open span:nth-child(3) {
    top: 6px;
    background: #ffffff;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}

.hamburger {
    display: none;
}
/**************** メニュー全体のデザイン ****************/
#gnav {
  background: #004ea2;
  color: #fff;
  text-align: center;
  z-index: 5000;
  width:100%;
}

/* メニューを横並びにする */
#gnav ul {
  display: flex;
  justify-content: center;
  width:100%;
}

/**************** ２階層目 以降のメニューは縦並びにする ****************/
#gnav ul ul {
  display: block;
}

/**************** liを下層メニューのulや矢印の基点にする ****************/
#gnav ul li {
  position: relative;
  width: calc(100%/6);
}

/**************** ２階層目を持つliに矢印を設定する ****************/
#gnav ul li.parent::before {
  content: "";
  position: absolute;
  right: 15px;
  top: 28px;
  width: 6px;
  height: 6px;
  border-top: 2px solid #999;
  border-right: 2px solid #999;
  transform: rotate(135deg);
}

/**************** ３階層目を持つliに矢印を設定する ****************/

#gnav ul ul li.parent::before {
  content: "";
  position: absolute;
  right: 15px;
  top: 20px;
  width: 6px;
  height: 6px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
}



/* PC用 */
@media only screen and (min-width:1000px){	
	
	/**************** hoverしたら表示する ****************/
	#gnav li.parent:hover > ul,
	#gnav li.parent ul li:hover > ul,
	#gnav li.parent:active > ul,
	#gnav li.parent ul li:active > ul {
	  visibility: visible;
	  opacity: 1;
	  overflow: visible;
	  width: 210px;
	}
	#gnav li.parent ul li a:hover{ 
		color:#FFFF00;
	}
	/**************** ２・３階層目 共通設定 ****************/
	#gnav li.parent ul {
	  /* 位置指定 */
	  position: absolute;
	  left: 0;
	  top: 55px;
	  z-index: 4;
	  /* デザイン指定 */
	  background-color: #005cbb;
	  width: 100%;
	  /* 最初は非表示にする */
	  visibility: hidden;
	  opacity: 0;
	  /* アニメーション */
	  transition: all 0.3s;
	  z-index: 5000;
	}
	/**************** メニューリンクの設定 ****************/
	#gnav ul li a {
		width: 100%;
		display: block;
		color: #ffffff;
		padding: 15px 5px;
		transition: all 0.3s; /* アニメーションの動きの速度 */
	}
	
	#gnav ul li li a {
	  padding: 15px 5px;
	  height: auto;
	}
	
	#gnav ul li a:hover {
	  color: #ffee00;
	}
	
	
	/**************** 下層メニューのaタグのデザイン ****************/
	#gnav li.parent ul {
	  width: 100%;
	}
	#gnav li.parent ul li {
	  width: 100%;
	}
	#gnav li.parent ul li a {
	  color: #fff;
	  border-bottom: solid 1px rgba(255, 255, 255, 0.6);
	  width: 100%;
	}
	
	#gnav li.parent ul li:last-child > a {
	  border-bottom: none;
	}
	
	#gnav li.parent ul li a:hover,
	#gnav li.parent ul li a:active {
	  background-color: #3577ca;
	}
	
	/**************** ３階層目の位置 ****************/
	#gnav li.parent ul ul {
	  top: 0;
	  left: 182px;
	  background-color: #66adf5;
	}
	
	#gnav li.parent ul ul li a:hover,
	#gnav li.parent ul ul li a:active {
	  background-color: #448ed3;
	}

}


/* モニター幅1000px以下 */
@media only screen and (max-width:1000px){
	
	/**************** hoverしたら表示する ****************/
	#gnav li.parent:hover > ul,
	#gnav li.parent ul li:hover > ul,
	#gnav li.parent:active > ul,
	#gnav li.parent ul li:active > ul {
	  visibility: visible;
	  opacity: 1;
	  overflow: visible;
	  width: 210px;
	}
	#gnav li.parent ul li a:hover{ 
		color:#FFFF00;
	}
	/**************** ２・３階層目 共通設定 ****************/
	#gnav li.parent ul {
	  /* 位置指定 */
	  position: absolute;
	  left: 0;
	  top: 55px;
	  z-index: 4;
	  /* デザイン指定 */
	  background-color: #005cbb;
	  width: 100%;
	  /* 最初は非表示にする */
	  visibility: hidden;
	  opacity: 0;
	  /* アニメーション */
	  transition: all 0.3s;
	  z-index: 5000;
	}
	/**************** メニューリンクの設定 ****************/
	#gnav ul li a {
		width: 100%;
		display: block;
		color: #ffffff;
		padding: 15px 5px;
		transition: all 0.3s; /* アニメーションの動きの速度 */
	}
	
	#gnav ul li li a {
	  padding: 15px 5px;
	  height: auto;
	}
	
	#gnav ul li a:hover {
	  color: #ffee00;
	}
	
	
	/**************** 下層メニューのaタグのデザイン ****************/
	#gnav li.parent ul {
	  width: 100%;
	  z-index: 5000;
	}
	#gnav li.parent ul li {
	  width: 100%;
	}
	#gnav li.parent ul li a {
	  color: #fff;
	  border-bottom: solid 1px rgba(255, 255, 255, 0.6);
	  width: 100%;
	}
	
	#gnav li.parent ul li:last-child > a {
	  border-bottom: none;
	}
	
	#gnav li.parent ul li a:hover,
	#gnav li.parent ul li a:active {
	  background-color: #3577ca;
	}
	
	/**************** ３階層目の位置 ****************/
	#gnav li.parent ul ul {
	  top: 0;
	  left: 182px;
	  background-color: #66adf5;
	}
	
	#gnav li.parent ul ul li a:hover,
	#gnav li.parent ul ul li a:active {
	  background-color: #448ed3;
	}
}


/* スマートフォン 横(ランドスケープ) */
@media only screen and (max-width:640px){
	#gnav{
		display: none;
	}
	.hamburger {
        display: block;
    }
    #gnavHam.open {
        right: 0;
        display: block;
    }
    
    #gnavHam {
        position: fixed;
        top: 0;
        right: -80%;
        width: 80%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.9);
        font-size: 1.2rem;
        box-sizing: border-box;
        z-index: 500;
        padding-top: 50px;
        transition: .2s;
        overflow: auto;
    }
    #gnavHam ul {
	    display: block;
	    width:100%;
	    text-align: left;
	}


	#gnavHam ul li{
	    width:100%;
	    padding:15px 5px;
	    border-top: 1px dotted #424242;
	    padding-left:20px;
	}
	#gnavHam ul li a{
		color:#fff;
		width:100%;
		display: block;
	}
	#gnavHam ul li ul li a{
		width:100%;
		color:#fffdba;
		font-size: 1.0rem;
		font-weight: 200;
		display: block;
	}
    #gnavHam li.parentHam01 ul{
	    display: none;
    }
	#gnavHam li.parentHam02 ul{
	    display: none;
    }
	#gnavHam li.parentHam03 ul{
	    display: none;
    }

}


/* スマートフォン 縦(ポートレート) */
@media only screen and (max-width:480px){
	
}