@charset "utf-8";


body {
  width: 900px;
  background-color: #bcefff;
  margin: 0 auto;
  padding: 0;
}

footer {
  height: 100px;
}

.main {

  width: 890px;
  height: 100%;
  margin: 0 auto;
  padding: 0;
}

.bigimg {
  text-align: center;
}

.center {
  text-align: center;
}


.dabun {
  font-family: serif;
}

h1 {
  font-size: 60px;
  text-align: center;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

li {
  border-radius: 10px;
  margin-bottom: 20px;
  padding: 5px;
  box-sizing: border-box;
  opacity: 0;
}

.jump {
  font-size: 1.2rem;
  width: 60%;
  margin: 0 auto;
  padding: 10px 0 10px 10px;
  border: 5px groove #88f1ffc0;
  border-radius: 12px;
} 


/* ↓↓↓↓個別の名前設定 ーーーーーーーーーーーーーーーーーーーーーーーーーーー*/

/* 花子 */
.hanakoname {
  background-color: rgb(255, 200, 117);
  width: 7rem;
  text-align: center;
}

.hanako {
  background-color: rgb(255, 200, 117);
}


/* みみ */
.miminame {
  background: #ffbdd3d8;
  width: 9rem;
  text-align: center;
}

.mimi {
  background: #ffbdd3d8;
}


/* アソパソマソ3号 */
.asopasoname {
  background: #5538fd;
  color: #FFF;
  width: 11rem;
  text-align: center;
}

.asopaso {
  background: #5538fd;
}


/* 自衛隊 */
.jieitainame {
  background: #00b82e;
  color: #FFF;
  width: 11rem;
  text-align: center;
}

.jieitai {
  background: #00b82e;
}


/* 毒吐 */
.dokuname {
  background: #fd8bdb;
  color: #FFF;
  width: 6rem;
  text-align: center;
}

.doku {
  background: #fd8bdb;
}


/* みんと */
.mintoname {
  background-color: rgb(63, 188, 204);
  width: 8rem;
  text-align: center;
}

.minto {
  background-color: rgb(63, 188, 204);
}


/* 中学生 */
.chugakuname {
  background-color: rgb(191, 255, 165);
  width: 8rem;
  text-align: center;
}

.chugaku {
  background-color: rgb(191, 255, 165);
}


/* LFA */
.lfaname {
  background-color: rgb(221, 252, 86);
  width: 11rem;
  text-align: center;
}

.lfa {
  background-color: rgb(221, 252, 86);
}


/* 騎士団 */
.kisidanname {
  background: linear-gradient(to right, #2c3aff, rgb(154, 197, 255));
  color: #FFF;
  width: 8rem;
  text-align: center;
}

.kisidan {
  background: linear-gradient(to right, #2c3aff, rgb(154, 197, 255));
}


/* ちょむ */
.chomuname {
  background: linear-gradient(to right, #2cffc0, rgb(178, 248, 178));
  color: #000000;
  width: 8rem;
  text-align: center;
}

.chomu {
  background: linear-gradient(to right, #2cffc0, rgb(178, 248, 178));
}


/*もちミク。 */
.mochiname {
  background-color: rgb(255, 255, 255);
  color: #000000;
  width: 12rem;
  text-align: center;
}

.mochi {
  background-color: rgb(255, 255, 255);
}


/*すぁ */
.suaname {
  background-color: rgb(120, 228, 144);
  color: #000000;
  width: 6rem;
  text-align: center;
}

.sua {
  background-color: rgb(120, 228, 144);
}


/* 本月レオ */
.reoname {
  background: rgb(160, 160, 160);
  width: 8rem;
  text-align: center;
}

.reo {
  background-color: rgb(160, 160, 160);
}

/* 入月なな */
.nananame {
  background: rgb(253, 181, 247);
  width: 8rem;
  text-align: center;
}

.nana {
  background-color: rgb(253, 181, 247);
}

/* 猫餅まろん */
.maronname {
  background: rgb(0, 153, 255);
  width: 8rem;
  text-align: center;
}

.maron {
  background-color: rgb(0, 153, 255);
}


/* つー */
.tuname {
  background: rgb(225, 255, 225);
  width: 17rem;
  text-align: center;
}

.tu {
  background-color: rgb(225,255, 225);

}



/* 50/50 */
.name {
  background: rgb(253, 109, 229);
  width: 7rem;
  text-align: center;
}

.gojuu {
  background-color: rgb(253, 109, 229);

}




/* ↑↑↑↑個別の名前設定ーーーーーーーーーーーーーーーーーーーーーーーーーー */



li:nth-of-type(odd) {
  transform: translateX(200px) translateY(50px);
  transition: opacity .7s, transform .7s;
}

li:nth-of-type(even) {
  transform: translateX(-200px) translateY(50px);
  transition: opacity .7s, transform .7s;
}

li.appear {
  opacity: 1;
  transform: translate(0);
}

.time {
  display: inline;
  padding: 0;
  margin: 0 10px 0 0;
  font-weight: bold;
}

.shout {
  text-align: center;
  font-weight: bold;
  font-size: large;
  padding: 0;
  margin: 0 auto;
}

.container {
  width: 100%;
  max-width: 1024px;
  height: auto;
  display: block;
  margin: auto;
}

video {
  width: 100%;
  max-width: 1024px;
  height: auto;
  display: block;
  margin: auto;
}

audio {
  width: 100%;
  margin: 0 auto;
  padding: 0;
  height: 80px;
}




@media screen and (max-width:768px) {
  /*------------------------------------------------------------------画面サイズが768pxからはここを読み込む*/



  header {
    width: 90%;
    margin: 0 auto;
    padding: 0;
  }

  footer {
    width: 90%;
    margin: 0 auto;
    padding: 0;
  }

  body {
    width: 100%;
    background-color: #bcefff;
    margin: 0 auto;
    padding: 0 0;
  }

  .main {
    font-size: 3vw;
    width: 95%;
    height: 100%;
    margin: 0 auto;
    padding: 0;
  }

  .shout {
    font-size: 30px;
  }



  .container {
    width: 100%;
    max-width: 767px;
    height: auto;
    display: block;
    margin: auto;
  }

  video {
    width: 100%;
    max-width: 767px;
    height: auto;
    display: block;
    margin: auto;
  }

  h1 {
    font-size: 35px;
  }


}

@media screen and (max-width:480px) {
  /*----------------------------------------------------画面サイズが480pxからはここを読み込む*/

  header {
    width: 90%;
    margin: 0 auto;
    padding: 0;
  }

  footer {
    width: 90%;
    margin: 0 auto;
    padding: 0;
  }

  body {
    width: 100%;
    margin: 0 0;
    padding: 0 0;
  }

  .main {
    font-size: 4vw;
    background-color: #bcefff;
    width: 95%;
    height: 100%;
    margin: 0 auto;
    padding: 0;
  }

  h1 {
    font-size: 25px;

  }

  .container {
    width: 100%;
    max-width: 480px;
    height: auto;
    display: block;
    margin: auto;
  }

  video {
    width: 100%;
    max-width: 480px;
    height: auto;
    display: block;
    margin: auto;
  }


}