@charset "UTF-8";
@media (min-width:599px){ 
.nav_content{display:none;}
#header-outer{position: fixed;width:100%;z-index:100;}

.drawer_hidden {
  display: none;
}
ul#main-nav{
  position: absolute;
  display             : flex;
  width               : 100%;
  list-style-type     : none;
 color: #432;
  height: 2rem;
  }
 ul#main-nav > li{
  border-radius: 15px;
  flex-grow           : 1;
  width               : 25%;
  margin              : 2px;
  padding             : 0px;
  font-size           : 14px;
  line-height         : 30px;
  background          : linear-gradient(0deg, rgba(180, 226, 240, 1), rgba(180, 226, 240,1));
  text-align          : center;
  position            : relative;
  transition          : 0.45s ease-in-out;
  }
 ul#main-nav > li > ul{
  position            : absolute;
  top                 : 30px;
  left                : 0px;
  margin              : 0px;
  padding             : 0px;
  width               : 100%;
  list-style-type     : none;
  }
  ul#main-nav > li > ul > li{
  position            : relative;
   border-radius: 15px;
  left                : -100%;
   margin              : 2px;
  opacity             : 0;
  background          : linear-gradient(0deg, rgba(180, 226, 240, 0.5), rgba(180, 226, 240, 0.5));
  font-size           : 14px;
  line-height         : 30px;
  height              : 0px;
  overflow            : hidden;
  transition          : all 0.45s ease-in-out, opacity 0.45s cubic-bezier(0.88, 0, 0.88, 1);
  }
  ul#main-nav > li > ul > li:nth-child(1){
  transition-delay    : 0.00s;
  }
  ul#main-nav > li > ul > li:nth-child(2){
  transition-delay    : 0.05s;
  }
  ul#main-nav > li > ul > li:nth-child(3){
  transition-delay    : 0.10s;
  }
  ul#main-nav > li > ul > li:nth-child(4){
  transition-delay    : 0.15s;
  }
  ul#main-nav > li > ul > li:nth-child(5){
  transition-delay    : 0.20s;
  }
  ul#main-nav > li > ul > li:nth-child(6){
    transition-delay    : 0.25s;
    }
  
  ul#main-nav > li > ul > li::before{
  content             : '.';
  opacity             : 0;
  }
  ul#main-nav > li:hover{
  background          : linear-gradient(0deg, rgba(180, 226, 240, 0.5), rgba(180, 226, 240,0.5));
  }
  ul#main-nav > li:hover > ul > li{
  left                : 0%;
  opacity             : 1;
  height              : auto;
  background          : linear-gradient(0deg, rgba(180, 226, 240, 0.5), rgba(180, 226, 240, 0.5));
  }
  ul#main-nav li > a{
  /*position            : absolute;*/
  top                 : 0px;
  bottom              : 0px;
  left                : 0px;
  right               : 0px;
  color               : inherit;
  transition          : 0.45s;
      
  }
 ul#main-nav li > a:hover{
  text-decoration     : none;
color:rgba(223, 164, 124,1)
  } 

}

@media (max-width:599px){
#main-nav{display:none;}
/* チェックボックスを非表示にする */
.drawer_hidden {
  display: none;  
}


/* ハンバーガーアイコンの設置スペース */
.drawer_open {
  display: flex;
  height: 60px;
  width: 60px;
  justify-content: center;
  align-items: center;
  position:fixed;
left: 20px;
top:25px;
z-index: 100;/* 重なり順を一番上にする */
  cursor: pointer;
  background-color: rgba(255,255,255,.5);
  border-radius: 50%;
}

/* ハンバーガーメニューのアイコン */
.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.5s;
  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);
}

#drawer_input:checked ~ .drawer_open span::after {
  top: 0;
  transform: rotate(-45deg);
}
  
/* メニューのデザイン*/

.nav_content {padding-top:2rem;
  width: 100vw;
  height: 80vh;
  position:fixed;
  left: 100%; /* メニューを画面の外に飛ばす */
  z-index: 99;
  transition: .5s;
  z-index: 25;
background-color:rgba(255, 255, 255, 0.9);

}
.nav_content,h3{text-align:center;}

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

/*-------new----------*/
ul>a{background-color: rgba(180, 226, 240, 1);
  color: #432;;
  font-size: 1rem;
  line-height: 2rem;
 display: inline-block;
 width:80%;margin:1rem auto 0 auto ;
 cursor: pointer;
border-radius: 15px 15px 15px 15px;



}
.to_1,.to_2,.to_3,.to_4,.to_5{display:none;color: #000;

}

li>a{font-size: 1rem;}

.CN{
position: absolute;
top:40%;
/*background-color: chocolate;*/
width: 100vw;  
height: 50%;
overflow-y: auto;
}  


.ad_nav{
 /* background-color: rgb(99, 30, 210);*/
  width: 100%;
  display: flex;
  justify-content: space-around;
  margin-bottom: 5%;
}
  
.ad_mob{position: relative;
width: 30vw;height: 25vw;

box-shadow: 2px 5px 10px 1px #444;
}
.ad_mob:active{
  box-shadow: 0 0 0 0 #444444;
  }
.ham-wrap{
  width: 100vw;
  height: 70vh;
  position: absolute;
  top:0;
  left:0;
  display: flex;
  flex-direction: column;
}





}