@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;400;700&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
  font-family: 'Noto Sans JP', sans-serif;
}

body {
  background: #3B3838
}

.sidebar {
  position: fixed;
  left: 0; 
  background: rgba(64, 167, 35);
  width: 20vw;
  height: 100%;
}

.sidebar header {
  font-size: 2vh;
  color: #fff;
  text-align: center;
  line-height: 4vh;
  background: rgb(37, 122, 52);
  user-select: none;
}

.sidebar ul img {
  height: 2vh;
}

.sidebar li a {
display: block;
height: 100%;
width: 100%;
line-height: 5vh;
font-size: 2vh;
color: #fff;
padding-left: 0.5vw;
border-top: 1px solid rgba(255, 255, 255, 0.1);
border-bottom: 1px solid black;
transition: 0.5s;
}

.sidebar li ul { 
list-style: none;
display: none;
/*padding: 0px 0px 0px 0px;*/
margin: -4.5vh 0 0 15vw;
/*background: rgb(4, 102, 213);*/
z-index: 2;
width:100%;
height:auto;
}

.sidebar li:hover>ul {
display: block;
animation: appear .5s ease;
position: absolute;
padding-left: 0.5vw;
}

.sidebar ul li:hover a {
background: rgb(122, 213, 4);
padding-left: 2vw;
border-left: solid 6px rgb(159, 184, 0);

}

.sidebar ul li li:hover a {
background: rgb(159, 184, 0);
padding-left: 1vw;
}

/*
.sidebar ul a {
  display: block;
  height: 100%;
  width: 100%;
  line-height: 5vh;
  font-size: 2vh;
  color: #fff;
  padding-left: 2vw;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid black;
}

ul li:hover a {
  padding-left: 3vw;
}

.sidebar ul a i {
  margin-right: 1vw;
}
*/

.sidebar img {
  height:2vh;
}

.main {
  height: 100%;
  margin-left: 20vw;
  overflow: hidden;
}

.main header {
  height: 20vh;
  width: 100%;
  z-index: 1;
  background: url("../img/field_s.png");
  background-size: cover;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
}

.main header::after {
  content: '';
  background-color: rgba(255,255,255,0.4);
  position: absolute;
  left: 20vw;
  right: 0;
  top: 0;
  bottom: 80vh;
}

.main header h1 {
  color: black;
  font-weight: bold;
  font-size: 2.5vw;
  position: relative;
  z-index: 1;
  text-shadow:1px 1px 0 #FFF, -1px -1px 0 #FFF,
              -1px 1px 0 #FFF, 1px -1px 0 #FFF,
              0px 1px 0 #FFF,  0-1px 0 #FFF,
              -1px 0 0 #FFF, 1px 0 0 #FFF;
}    

.main article {
  height: 80vh;
  z-index: 1;
}

.main footer {
  display: none;
}

iframe {
  /*aspect-ratio:16 / 9;*/
  width: 100%;
  height: 100%;
  text-align:  center;
  border: none;
  }

.video {
  position: relative;
  width:100%; /* 横幅は100%にしておく(ここを変えたい場合は実装コード2の方法を確認してください) */
  height:0; /* 高さは0にしておく(padding-topで高さを指定するため) */
  padding-top: 56.25%; /* 高さを指定(16:9) */
}
  
/* YouTube埋め込み用のiframe */
.video iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* topスライドショー */
.img-frame{
  position: relative;
  width: 80vw;
  aspect-ratio:16 / 9;
  /*height: 100%;*/
  overflow: hidden;
  margin: 0 auto;
}
.img-01, .img-02, .img-03, .img-04 {
  position: absolute;
  top:0%;
  left:0%;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  text-align: center;
}



.img-01{
  background-image: url("../img/top_illust_1.PNG");
  animation: slide-animation-01 30s infinite;
}
.img-02{
  background-image: url('../img/top_illust_2.PNG');
  animation: slide-animation-02 30s infinite;
}
.img-03{
  background-image: url('../img/top_illust_3.PNG');
  animation: slide-animation-03 30s infinite;
}
.img-04{
  background-image: url('../img/top_illust_4.PNG');
  animation: slide-animation-04 30s infinite;
}

@keyframes slide-animation-01 {
  0% {opacity: 1;}
  8% {opacity: 1;}
  17% {opacity: 1;}
  25% {opacity: 0}
  33% {opacity: 0;}
  42% {opacity: 0;}
  50% {opacity: 0;}
  58% {opacity: 0;}
  67% {opacity: 0}
  75% {opacity: 0;}
  83% {opacity: 0;}
  92% {opacity: 0}
  100% {opacity: 1;}
}
@keyframes slide-animation-02 {
  0% {opacity: 0;}
  8% {opacity: 0;}
  17% {opacity: 0;}
  25% {opacity: 1}
  33% {opacity: 1;}
  42% {opacity: 1;}
  50% {opacity: 0;}
  58% {opacity: 0;}
  67% {opacity: 0}
  75% {opacity: 0;}
  83% {opacity: 0;}
  92% {opacity: 0}
  100% {opacity: 0;}
}
@keyframes slide-animation-03 {
  0% {opacity: 0;}
  8% {opacity: 0;}
  17% {opacity: 0;}
  25% {opacity: 0}
  33% {opacity: 0;}
  42% {opacity: 0;}
  50% {opacity: 1;}
  58% {opacity: 1;}
  67% {opacity: 1}
  75% {opacity: 0;}
  83% {opacity: 0;}
  92% {opacity: 0}
  100% {opacity: 0;}
}
@keyframes slide-animation-04 {
  0% {opacity: 0;}
  8% {opacity: 0;}
  17% {opacity: 0;}
  25% {opacity: 0}
  33% {opacity: 0;}
  42% {opacity: 0;}
  50% {opacity: 0;}
  58% {opacity: 0;}
  67% {opacity: 0}
  75% {opacity: 1;}
  83% {opacity: 1;}
  92% {opacity: 1}
  100% {opacity: 0;}
}

/*サイドバー無しの時のナビゲーション*/
#menu {
  width: 100vw;
  height: 5vh;
  padding: 0;
  margin: 0;
  list-style-type: none;
  background: rgb(37, 122, 52);
  display: flex;
  align-items: center;
}
#menu li {
  width: 14vw;
  float: left;
  padding: 0;
  margin: 0vh 0;
}
#menu li a {
  width: 14vw;
  height: 4vh;
  color: #fff;
  font-size: 1.5vw;
  font-weight: bold;
  margin: 0;
  padding: 0px 0;
  text-decoration: none;
  display: block;
  text-align: center;
}
#menu li a:hover {
  background: rgba(64, 167, 35);
}

@media (max-width: 980px) {
  .sidebar {
    /*position: static;*/
    display: none;
  }

  .main {
    margin-left: 0vw;
  }

  .main header::after {
    left: 0vw;
    bottom: 90vh;
  }

  .main header {
    height: 10vh;
  }

  .main article {
    height: 87vh;
  }

  .main footer {
    height: 3vh;
  }

  .main footer {
    display: block;
  }

  .profile img {
    max-width: 30vw;
}     

  }
  /* 
    .main article {
      height: 80vh;
      z-index: 1;
    }
  
    .main footer {
      height: 20vh;
    }



    .block-2 {
      flex-direction: column;
      height: 60vh;
    }
   
    .box-3 {
      flex-basis: 80%;
      */