@charset "utf-8";
/*全体の設定
-------------------------------------------*/
html{
  font-size:80%;
  scroll-behavior: smooth;

}
body{
  margin-top:60px;
  padding:0;
  width:100%;
  height:400px;
}
a:hover{
  ;

}
a:active{
  color:rgb(93, 150, 244);
}
a{
  text-decoration:none;
  color:#fff;
  font-weight: bold;
}
img{

}
/*HEADER　設定
--------------------------------------------*/
#header{
  width:100%;
  height:60px;
  display:flex;
  justify-content: space-between;
  z-index: 111;
  background-image: url(images/red-bg.jpeg);
  background-size: cover;
  align-items:center;
  position:fixed;
  top:0;


}
.logo{
  width:10%;
  height:30px;



}
#nav{
  width:90%;
  height:100px;
  align-items: center;
  margin-left: ;
  margin-top:4%;




}
#nav ul{
  display:flex;
  justify-content:space-between;
  width:80%;
  align-items:center;
  margin-left: 10%;



}
#nav ul li{
  list-style:none;
  font-size: 20px;
  margin: 0 1%;
}

.info-twitter{
  height:62px;
  width:10%;
  padding-top:30px;
  padding-right:20px;


}
h1{
  border-bottom:1px solid black;
  margin-top:70px;
  margin:70px 5% 1% 5%;
  width:100%;
}

.profile{
  display:flex;
  justify-content:space-around;
  width:90%;
  margin:5%;
  padding:2%;

  margin-top:%;
}




#person{
    filter: drop-shadow(20px 20px  rgba(0,0,0,0.6));
    padding:10px;
    margin:10px;
     }
table{
  width: 100%;
  border-spacing: 0;
  margin:10px;
  margin-top:30px;
}

table th{
  border-bottom: solid 2px #fb5144;
  padding: 10px 0;
  width:12%;
}

table td{
  border-bottom: solid 2px #ddd;
  text-align: center;
  padding: 10px 0;
}
#mheader{
  visibility: hidden;
}
/*-----------------------------------*/
@media (max-width:480px) {
   .profile{
     flex-direction: column;
     align-items: flex-end;
   }
   table{
     max-width:480px;
   }
   #header{
     visibility: hidden;
   }
   #mheader{
     visibility:visible;
   }
   /* bager menu */

   #mheader #navi {
     transition: all .6s;
     overflow-y: auto;
     padding-top: 40px;
     width: 300px;
     height: 100vh;
     z-index: 200;
     top: 0;
     right: -320px;
     background-color: #fff;
     position: fixed;
   }
   #mheader #navi li{
     padding:20px;
     font-size:18px;
     border-bottom:1px solid honeydew;
     list-style:none;

   }
   #mheader #navi li a{
    text-decoration:none;
    color:#000;
   }

   #mheader .nav_btn {
     width: 44px;
     height: 44px;
     z-index: 300;
     top: 7px;
     right: 7px;
     cursor: pointer;
     position: absolute;
   }

   .hamburger_line {
     transition: all .6s;
     width: 34px;
     height: 2px;
     left: 5px;
     background-color: #000;
     position: absolute;
   }

   .hamburger_line1 { top: 10px; }
   .hamburger_line2 { top: 21px; }
   .hamburger_line3 { top: 32px; }

   .nav_bg {
     opacity: 0;
     transition: all .6s;
     width: 100vw;
     height: 100vh;
     z-index: 100;
     top: 0;
     left: 0;
     visibility: hidden;
     background-color: #000;
     cursor: pointer;
     position: fixed;
   }

   /* 表示された時用のCSS */
   .nav_open #mheader #navi { right: 0; }

   .nav_open .nav_bg {
     opacity: .8;
     visibility: visible;
   }

   .nav_open .hamburger_line1 {
     transform: rotate(45deg);
     top: 20px;
   }

   .nav_open .hamburger_line2 {
     width: 0;
     left: 50%;
   }

   .nav_open .hamburger_line3 {
     transform: rotate(-45deg);
     top: 20px;
   }
}