/* rua_hp 基本　CSS */
@import url(sanitize.css);*/
@import url('https://fonts.googleapis.com/css?family=Sriracha');*/

body{
        margin: 0;
       padding: 10px;
       text-align: center;
       background-image: url("img/背景.gif");     
       font-size: 14px; /* 文字の大きさを 14px に */    
     }  

.container {
    max-width: 1500px; /* 最大幅を 1500px に */
    margin: 0 auto; /* 左右の余白を auto にして、左右中央揃えに */
    height: 500px;
    display: inline-block;
  /*  border-color: red;
    border-style: double; */
  }
       

#rua{position: absolute;
       top: 6em;
       left: 35em;
}


.x_inst{position: absolute;
         top: 12.5em;
         left: 25px;
         display: flex;
 justify-content: flex-end; 

}



/* ------------------------------------------------------ */ 
/* ナビゲーション  メニュー */
.nav-menu { 
    
         margin: -8em auto; 
       
    }

.menu-list {
 
  display: flex;
  list-style: none;
  justify-content: center; /* メニューアイテムを中央揃えに */
  font-weight: bold;
  font-size: 20px;
  }

.menu-item {
  border-left: 1px solid #fff; /* メニューアイテムの左ボーダー */
  position: relative;
}
.menu-item:last-child {
  border-right: 1px solid #fff; /* 最後のメニューアイテムの右ボーダー */
}

/* メニューアイテムのホバースタイル */
.menu-item:hover .drop-menu-list {
   opacity: 1; /*不透明度を最大に */
  transition: opacity .3s, visibility .3s; /* アニメーション設定 */
  visibility: visible; /* 下層メニューを表示 */
}

.menu-item a {
  align-items: center;
  color: blueviolet; /* メニューアイテム内のリンクテキストの色 */
  display: flex;
  height: 50px;
  justify-content: center;
  text-decoration: none; /* リンクの下線を非表示 */
 
  width: 160px;

}

.nav-menu a:hover{ color:red;}

/* ドロップダウンメニュー */
#drop-menu {
  position: relative; 
  margin-top: 0px;
  height: 15px}

.drop-menu-list {
  background-color: #FFDDFF; /* ドロップダウンメニューの背景色 */
  list-style: none; 
  left: -30;
  opacity: 0; /* 不透明度を最小に */
  position: absolute;
  top: 100%;
  transition: opacity .3s, visibility .3s; /*アニメーション設定 */
  visibility: hidden; /* 下層メニューを非表示 */
  width: max-content;
  z-index: 1;
}

/*#drop-menu-list_no1{margin-top: -10px;}*/

.drop-menu-list a {
position: relative; /*アンダーラインの位置を決めるための基準 */
margin-top: -15px;
}

.drop-menu-list a::after {
position: absolute; /*親要素であるaタグを基準に位置を指定*/
left: 0;            /*アンダーラインを各メニュー（aタグ）の左端に指定*/
content: '';        /*本来は、擬似要素に入るテキストなどを’’内に指定。今回はアンダーラインなので何も記載しない*/
width: 100%;        /*アンダーラインを各aタグの幅に合わせる*/
height: 5px;        /*アンダーラインの高さ（太さ）*/
background: white;/*アンダーラインの色*/
margin-top: 25px;
}


/* --------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------- */

@media only screen and (max-width:800px){
    
/* ナビゲーション  メニュー */


#rua{position: absolute;
       top: 2em;
       left: 23em;
       zoom: 1.5; 
}

/*.nav-menu { position: relative;
         
         margin: -8em auto;       
    }*/
.nav-menu { position: relative;
          left: -50px;
   
          top: 10px;
      
    }


.menu-list {
 
  display: flex;
  list-style: none;
  justify-content: center; /* メニューアイテムを中央揃えに */
  font-weight: bold;
  font-size: 45px;
    }

.menu-item {
  border-left: 1px solid #fff; /* メニューアイテムの左ボーダー */
  position: relative;
  margin-left:  75px ;
}
.menu-item:last-child {
  border-right: 1px solid #fff; /* 最後のメニューアイテムの右ボーダー */
}

/* メニューアイテムのホバースタイル */
.menu-item:hover .drop-menu-list {
   opacity: 1; /*不透明度を最大に */
  transition: opacity .3s, visibility .3s; /* アニメーション設定 */
  visibility: visible; /* 下層メニューを表示 */
}

.menu-item a {
  align-items: center;
  color: blueviolet; /* メニューアイテム内のリンクテキストの色 */
  display: flex;
  height: 50px;
  justify-content: center;
  text-decoration: none; /* リンクの下線を非表示 */ 
  width: 160px;

}

.nav-menu a:hover{ color:red;}

/* ------------------ ドロップダウンメニュー  ----------------------------*/
#drop-menu {
  position: relative; 
  margin-top: 0px;
  height: 15px}

.drop-menu-list {
 /* background-color: #FFDDFF; /* ドロップダウンメニューの背景色 */
   background-color: #FFAD90; /* ドロップダウンメニューの背景色 */
  
  list-style: none; 
  opacity: 0; /* 不透明度を最小に */ 
  transition: opacity .3s, visibility .3s; /*アニメーション設定 */
  visibility: hidden; /* 下層メニューを非表示 */
 /* width: max-content;*/
  z-index: 1;
  width: 400px;
}

.drop-menu-item{
  width: 300px;
  font-size: 50px;
  margin: 30px;}




.drop-menu-list a {
position: relative; /*アンダーラインの位置を決めるための基準 */
width: 300px;
margin-top: 55px;


}

.drop-menu-list a::after {
position: absolute; /*親要素であるaタグを基準に位置を指定*/
left: -30px;            /*アンダーラインを各メニュー（aタグ）の左端に指定*/
content: '';        /*本来は、擬似要素に入るテキストなどを’’内に指定。今回はアンダーラインなので何も記載しない*/
width: 150%;        /*アンダーラインを各aタグの幅に合わせる*/
height: 5px;        /*アンダーラインの高さ（太さ）*/
background: white;/*アンダーラインの色*/
margin-top: 50px;
}



}