
html{
    width: 100%;
}
body{
    width: 100%;
    background-color: #881C21;
    margin: 0 auto;
}
img.page1img{
    width: 100%;
    margin-top: 5vw;
}
img.hosiw{
    margin-top: 3vw;
    width: 90%;
    position: absolute;
    margin-left: 5vw;
}
img.about{
    width: 12vw;
    position: relative; 
    margin-top: 8vw;
    left: 4vw;
}
img.guest{
    width: 12vw;
    position: relative;
    left:-1vw;
}
img.interview{
    width: 20vw;
    right: 5vw;
    position: relative;
}
img.webcm{
    width: 15vw;
    right: -69vw;
    position: relative;
    bottom:6vw;
}
img.kirakira2{
    margin-top: 12vw;
    width: 86%;
    margin-left: 7vw;
    position: relative;
}
img.aabout{
    width: 30vw;
    margin-top: 18vw;
    margin-left: -58vw;
    position: absolute;
}
img.eventtheme{
    width: 30vw;
    margin-left: 15vw;
    margin-bottom: 3vw;
}
img.challenge{
    width: 40vw;
    margin-left: 30vw;
}
img.waku{
    margin-top: 16vw;
    margin-left: -57vw;
    width: 74vw;
    position: absolute;
}
h6{
    position: relative;
    max-width: 54vw;
    margin-top: 15vw;
    margin-left: 23vw;
    text-align: justify; 
    width: 100%;
}
img.kirakira2-2{
    margin-top: 10vw;
    width: 86%;
    margin-left: 7vw;
}
img.kirakira3{
    margin-top: 10vw;
    width: 86%;
    margin-left: 7vw;
    position: absolute;
}
img.gguest{
    position: relative;
    width: 30vw; 
    margin-top: 17vw;
    margin-left: 35vw;
}
img.card2{
    width: 80vw;
    margin-left: 10vw;
}
img.tko{
    width: 60vw;
    margin-left: 18vw;
}
h5{
    max-width: 54vw;
    margin-top: 15vw;
    margin-left: 23vw;
    text-align: justify; 
    width: 100%; 
    color:#ffffff
}
img.ggest{
    margin-top: 0vw;
    width: 80vw;
    position: absolute;
}
img.kirakira3-2{
    margin-top: -10vw;
    width: 86%;
    margin-left: 7vw;
}
p{
    position: relative;
    max-width: 61vw;
    text-align: justify;
    margin-left: 30vw;
    top: -40vw;
    margin-top: 5%;
    width: 100%;
    color:#ffffff
}
img.iinterview{
    margin-top: 10vw;
    width: 40vw;
    margin-left: 30vw;
}
img.shortt1{
    margin-top: 7vw;
    width: 96%;
    margin-left: 2vw;
    position: absolute;
}
img.shortt2{
    margin-top: -26vw;
    width: 96%;
    margin-left: 2vw;
    position: absolute;
}
img.shortt3{
    margin-top: -38vw;
    width: 96%;
    margin-left: 2vw;
    position: absolute;
}
img.shortt4{
    margin-top: -33vw;
    width: 96%;
    margin-left: 2vw;
    position: absolute;
}
img.shortt5{
    margin-top: -27vw;
    width: 96%;
    margin-left: 2vw;
    position: absolute;
}
img.shortt6{
    margin-top: -35vw;
    width: 96%;
    margin-left: 2vw;
    position: absolute;
}
img.t1{
    width: 10vw;
    margin-left: 7vw;
    position: relative;
    margin-top: 16vw;
}
img.hosi2{
    margin-top: 0vw;
    width: 96vw;
    margin-bottom: -60vw;
    position: absolute;
}
img.t2{
    width: 10vw;
    margin-left: 7vw;
    position: relative;
    margin-top: -18vw;
}
img.hosi3{
    margin-top: 0vw;
    width: 96vw;
    margin-bottom: -100vw;
    position: absolute;
}
img.t3{
    width: 10vw;
    margin-left: 7vw;
    position: relative;
    margin-top: -29vw;
}
img.hosi4{
    margin-top: 0vw;
    width: 96vw;
    margin-bottom: -130vw;
    position: absolute;
}
img.t4{
    width: 10vw;
    margin-left: 7vw;
    position: relative;
    margin-top: -23vw;
}
img.hosi5{
    margin-top: 2vw;
    width: 96vw;
    margin-bottom: -170vw;
    position: absolute;
}
img.t5{
    width: 10vw;
    margin-left: 7vw;
    position: relative;
    margin-top: -16vw;
}
img.hosi6{
    margin-top: 2vw;
    width: 96vw;
    margin-bottom: -210vw;
    position: absolute;
}
img.t6{
    width: 10vw;
    margin-left: 7vw;
    position: relative;
    top: -25vw;
}
img.hosi7{
    margin-top: 2vw;
    width: 96vw;
    margin-bottom: -250vw;
    position: absolute;
}
img.hosiy{
    margin-left: 2vw;
    width: 96%;
    position: absolute;
    margin-top: -32vw;
}
.wwebccm{
    width: 30vw;
    left: 35vw;
    position: absolute;
    margin-top: 10vw;
}
video{
    width:79vw;
    height:auto;
    position:relative;
    top:15vw;
    left:12vw;


}
h1{
    font-weight:bold;
    font-size:1.5rem;
    color:#ffffff;
    text-align: center;
    position:relative;
    bottom:-27vw;
  }
img.kirakira5{
    width: 86%;
    margin-left: 7vw;
}
img.kirakira5-2{
    margin-top: 50vw;
    width: 86%;
    margin-left: 7vw;
}
img.kirakira6{
    margin-top: 10vw;
    width: 86%;
    margin-left: 7vw;
}
img.otherevent{
    left: 32vw;
    margin-top: 21vw;
    width: 40vw;  
    position: absolute;
}
img.spade{
    margin-top: 20vw;
    width: 30vw;
    margin-left: 5vw;
}
img.diamond{
    margin-top: 20vw;
    width: 26vw;
    margin-left: 1vw;
}
img.clover{
    margin-top: 20vw;
    width: 26vw;
    margin-left: 1vw;
}
img.kirakira6-2{
    margin-top: 24vw;
    margin-bottom: 10vw;
    width: 86%;
    margin-left: 7vw;
}
header {
    padding:10px;
    background: #ffffff00;
  }
  
  #nav-drawer {
    position: relative;
  }
  
  /*チェックボックス等は非表示に*/
  .nav-unshown {
    display:none;
  }
  
  /*アイコンのスペース*/
  #nav-open {
    display: inline-block;
    width: 30px;
    height: 22px;
    vertical-align: middle;
  }
  
  /*ハンバーガーの形をCSSで表現*/
  #nav-open span, #nav-open span:before, #nav-open span:after {
    position: absolute;
    height: 3px;/*線の太さ*/
    width: 25px;/*長さ*/
    border-radius: 3px;
    background: #ffffff;
    display: block;
    content: '';
    cursor: pointer;
  }
  #nav-open span:before {
    bottom: -8px;
  }
  #nav-open span:after {
    bottom: -16px;
  }
  
  /*閉じる用の薄黒箇所*/
  #nav-close {
    display: none;
    position: fixed;
    z-index: 99;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #106A8F;
    opacity: 0;
    transition: .3s ease-in-out;
  }
  
  /*メニューの中身*/
  #nav-content {
    overflow: auto;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 90%;
    max-width: 298px;/*最大幅（お好みで調整を）*/
    height: 100%;
    background: #106A8F;
    transition: .3s ease-in-out;
    -webkit-transform: translateX(-105%);
    transform: translateX(-105%);
  }
  .moji10{
    font: inherit;
    color:#ffffff;
    line-height:14vw;
  }
  .header10{
      font: inherit;
      font-weight:bold;
      color:#090446;
      line-height:18vw;
  }
  /*チェックがついたら表示させる*/
  #nav-input:checked ~ #nav-close {
    display: block;
    opacity: .5;
  }
  
  #nav-input:checked ~ #nav-content {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
    box-shadow: 6px 0 25px rgba(0,0,0,.15);
  }
  
  .header-logo-menu{
   text-align: center;
   display: flex;
   display: -moz-flex;
   display: -o-flex;
   display: -webkit-flex;
   display: -ms-flex;
   flex-direction: row;
   -moz-flex-direction: row;
   -o-flex-direction: row;
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
  }
  
  /*ロゴやサイトタイトルをセンタリング*/
  .logo-area{
      margin-left:37vw;
      
    }