
.menu {
    position: relative;
    width: 100%;
    height: 1em;
    margin: 0px;
    margin-bottom:0px;
    
}

.menu > li {
    float: left;
    width: 20%; /* グローバルナビ4つの場合 */
    height:30px;
    font-size:.8em;
    padding-top:15px;
    background: #cecece;
    text-align: center;
}

.menu > li a {
    display:block;
    color: #333333;
}

.menu > li a:hover {
    color: #333333;
	background: #cecece
}

ul.menu__second-level {
    visibility: hidden;
    opacity: 0;
    z-index: 1;
}

ul.menu__third-level {
    visibility: hidden;
    opacity: 0;
}

ul.menu__fourth-level {
    visibility: hidden;
    opacity: 0;
}

.menu > li:hover {
    background: #cecece;
	border-bottom: solid 2px #c40000;
}

.menu__second-level li {
    border-top: 1px   rgba(7,24,100,1);
    padding:15px 5px 15px;
    line-height:2 10px;
    text-align: left;
    color:#fff;
}

.menu__third-level li {
    border-top: 1px solid #111;
}

.menu__second-level li a:hover {
    background: #cecece;
    color:#C40000;
}

.menu__third-level li a:hover {
    background: #2a1f1f;
}

.menu__fourth-level li a:hover {
    background: #1d0f0f;
}

/* 下矢印 */
.init-bottom:after {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    margin: 0 0 0 15px;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
.menu > li.menu__single {
    position: relative;
}

li.menu__single ul.menu__second-level {
    position: absolute;
    top: 40px;
    width: 100%;
    background: #cecece;
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
}

li.menu__single:hover ul.menu__second-level {
    top: 50px;
    visibility: visible;
    opacity: 1;
}




/* floatクリア */
.menu:before,
.menu:after {
    content: " ";
    display: table;
}

.menu:after {
    clear: both;
}

.menu {
    *zoom: 1;
}

#menu-s{display:none;}
.header {display:none;}

 /*----------ハンガーメニュ➖for PCここまで------------------------*/  


/* 畫面幅800px以下の設定 */
/* --------------ハンガーメニュ➖for スマホここから--------------------------------- */
@media screen and (max-width:800px){
      /* CSSコード */
  /*----ハンガーメニュー-------------*/
  /* CSSコード */
.header {
  display: flex;
  justify-content: right;
  align-items: center;
  padding: 10px 10px;
  background: #fff;
  position:relative;
  top:10px;

}

.logo {
    font-size:10px;
    

    
}

/* ここから下がハンバーガーメニューに関するCSS */
  
/* チェックボックスを非表示にする */
.drawer_hidden {
  display: none;
}

/* ハンバーガーアイコンの設置スペース */
.drawer_open {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  right: 20px;
  z-index: 100;/* 重なり順を一番上にする */
  cursor: pointer;
 

}

/* ハンバーガーメニューのアイコン */
.drawer_open span,
.drawer_open span:before,
.drawer_open span:after {
  content: '';
  display: block;
  height: 3px;
  width: 25px;
  border-radius: 3px;
  background: #333;
  transition: 0.3s;
  position: absolute;
     
  
}


/* 三本線の一番上の棒の位置調整 */
.drawer_open span:before {
  bottom: 8px;
    
    
}

/* 三本線の一番下の棒の位置調整 */
.drawer_open span:after {
  top: 8px;
}

/* アイコンがクリックされたら真ん中の線を透明にする */
#drawer_input:checked ~ .drawer_open span {
  background: rgba(255, 255, 255, 0);
    
     
     
}

/* アイコンがクリックされたらアイコンが×印になように上下の線を回転 */
#drawer_input:checked ~ .drawer_open span::before {
  bottom: 0;
  transform: rotate(45deg);
       background:#fff;
  
   
}

#drawer_input:checked ~ .drawer_open span::after {
  top: 0;
  transform: rotate(-45deg);
     background:#fff;
}
  
/* メニューのデザイン*/
.nav_content {
  width: 100%;
  height: 100%;
  position:fixed;
  bottom:100%;
  left: 0%; /* メニューを画面の外に飛ばす */
  z-index: 99;
  background: rgba(7,24,100,1);
  transition: .5s;
  text-align: left;
  color:aliceblue;
  padding:0 10px;
  line-height:auto;
}
.nav_content a:link{
    color:white;
}
.nav_content a:visited{
    color:lightblue
}

.nav_content a:hover{
    color:#4169e1;
}

/* メニュー黒ポチを消す */
.nav_list {
  list-style: none;
}

.nav_item a {
  color: #fff;
  text-decoration: none;
}

/* アイコンがクリックされたらメニューを表示 */
#drawer_input:checked ~ .nav_content {
  bottom: 0;/* メニューを画面に入れる */
   
  
}