* {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

html {
  width: 100%;
  min-width: 320px;
  background-color: black;
}
html body {
  width: 100%;
  min-width: 320px;
}
html body header {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 650px;
  background-image: url(../img/bg_header.png);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
}
html body header div.fig_root {
  position: absolute;
  width: 0px;
  height: 0px;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  margin: auto auto 0 auto;
}
html body header div.fig_cutie {
  display: none;
  position: absolute;
  background-image: url(../cutie/034.png);
  bottom: 16px;
  right: -60px;
  width: 300px;
  height: 300px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
html body header div.fig_avatar {
  display: none;
  position: absolute;
  background-image: url(../avatar/005.png);
  bottom: 16px;
  left: -60px;
  width: 300px;
  height: 300px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
html body header .fence {
  position: absolute;
  bottom: 60px;
  width: 100%;
  height: 36px;
  background-image: url(../img/fence.png);
  background-repeat: repeat no-repeat;
  background-size: contain;
}
html body header .wall {
  position: absolute;
  bottom: 0px;
  width: 100%;
  height: 60px;
  background-image: url(../img/wall.png);
  background-repeat: repeat;
  background-size: contain;
}
html body header .container p.icn_kayac {
  position: absolute;
  left: 10px;
  top: 10px;
  width: 35px;
  height: 35.5px;
  z-index: 10;
}
html body header .container p.icn_kayac img {
  width: 35px;
  height: 35.5px;
}
html body header .container div.fig_flare {
  position: absolute;
  left: 50px;
  top: 12.5px;
  background-image: url(../img/fig_flare.png);
  width: 217px;
  height: 204.5px;
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 8;
}
html body header .container h1 {
  position: absolute;
  left: 20px;
  top: 10px;
  background-image: url(../img/ttl_main.png);
  width: 261px;
  height: 195px;
  background-size: contain;
  background-repeat: no-repeat;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  z-index: 9;
}
html body header .container p.txt_end_message {
  position: absolute;
  left: 0;
  top: 208px;
  z-index: 11;
  width: 100%;
  height: 130px;
  text-align: center;
}
html body header .container p.txt_end {
  position: absolute;
  left: 0;
  bottom: 22px;
  z-index: 10;
  width: 100%;
  height: 17px;
  text-align: center;
}

html body section, html body footer {
  position: relative;
  width: 100%;
  background-color: black;
}
html body section div.line, html body footer div.line {
  position: absolute;
  width: 100%;
  height: 6px;
  background-image: url(../img/line.png);
  background-repeat: repeat no-repeat;
  background-size: contain;
}
html body section p, html body footer p {
  color: #ffffff;
  font-size: 11px;
  line-height: 1.5;
}

html body section#ending {
  height: 280px;
  background-image: url(../img/bg_ending.png);
  background-color: #0DCCFF;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: auto 100%;
  overflow: hidden;
}
html body section#ending h2 {
    white-space: nowrap;
    text-indent: 100%;
    overflow: hidden;
}
html body section#ending div.movie {
  position: absolute;
  left: 26px;
  top: 80px;
  width: 265px;
  height: 149px;
}
html body section#ending div.movie iframe {
  zoom: 0.5;
}

html body section#newspaper{
  height: 330px;
  background-image: url(../img/bg_newspaper.png);
  background-color: #ECB45E;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: auto 100%;
  overflow: hidden;
}
html body section#newspaper h2 {
    white-space: nowrap;
    text-indent: 100%;
    overflow: hidden;
}
html body section#newspaper .list{
  position: absolute;
  top: 85px;
  left: 75px;
}

html body section#newspaper li{
  list-style: none;
  text-align: center;
}

html body section#newspaper li img{
  width: 160px;
}

html body section#episode{
  height: 320px;
  background-image: url(../img/bg_pattern.png);
  background-size: 37.5px;
  background-repeat: repeat;
  background-color: #98091d;
}
html body section#episode h2 {
  position: absolute;
  left: 61.75px;
  top: 30px;
  background-image: url(../img/ttl_episode.png);
  width: 196.5px;
  height: 53px;
  background-size: contain;
  background-repeat: no-repeat;
  white-space: nowrap;
  text-indent: 100%;
  overflow: hidden;
}
html body section#episode .txt_episode {
  position: absolute;
  top: 110px;
  left: 10px;
}
html body section#episode .txt_episode img{
  width: 300px;
  height: 77.719px;
}
html body section#episode .btn {
  position: absolute;
  top: 220px;
  left: 55px;
}
html body section#episode .btn img {
  width: 200px;
}
html body section#episode .kiriko {
  position: absolute;
  top: 243px;
  right: 9px;
}
html body section#episode .kiriko img {
  width: 50px;
}


html body section#about {
  height: 441px;
  background-image: url(../img/bg_pattern.png);
  background-size: 37.5px;
  background-repeat: repeat;
  background-color: #0952A8;
}
html body section#about h2 {
  position: absolute;
  left: 10px;
  top: 30px;
  background-image: url(../img/ttl_about.png);
  width: 296.5px;
  height: 57px;
  background-size: contain;
  background-repeat: no-repeat;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}
html body section#about p.txt_main {
  position: absolute;
  left: 10px;
  top: 105px;
  width: 300px;
  height: 105px;
}
html body section#about div.movie {
  position: absolute;
  left: 10px;
  top: 230px;
  width: 300px;
  height: 183.5px;
}
html body section#about div.movie iframe {
  zoom: 0.5;
}
html body section#position {
  height: 414px;
  background-image: url(../img/bg_pattern.png);
  background-size: 37.5px;
  background-repeat: repeat;
  background-color: #129565;
}
html body section#position div.fig_characters {
  position: absolute;
  width: 100%;
  height: 188px;
  top: 167.5px;
  background-image: url(../img/fig_characters.png);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 561.5px 188px;
}
html body section#position h2 {
  position: absolute;
  left: 60px;
  top: 30px;
  background-image: url(../img/ttl_position.png);
  width: 202px;
  height: 56.5px;
  background-size: contain;
  background-repeat: no-repeat;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}
html body section#position p.txt_main {
  position: absolute;
  position: absolute;
  left: 10px;
  top: 95px;
  width: 300px;
  height: 105px;
}
html body section#position div.fig_position {
  position: absolute;
  left: 90px;
  top: 152.5px;
  background-image: url(../img/fig_position.png);
  width: 145px;
  height: 244px;
  background-size: contain;
  background-repeat: no-repeat;
}
html body section#school {
  height: 395px;
  background-image: url(../img/bg_pattern.png);
  background-size: 37.5px;
  background-repeat: repeat;
  background-color: #252525;
}
html body section#school h2 {
  position: absolute;
  left: 7px;
  top: 30px;
  background-image: url(../img/ttl_school.png);
  width: 312.5px;
  height: 27px;
  background-size: contain;
  background-repeat: no-repeat;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}
html body section#school p.txt_main {
  position: absolute;
  position: absolute;
  left: 10px;
  top: 70px;
  width: 300px;
  height: 50px;
}
html body section#school div.list {
  position: absolute;
  left: 15px;
  top: 145px;
  background-image: url(../img/bg_list.png);
  width: 136px;
  height: 232.5px;
  background-size: contain;
  background-repeat: no-repeat;
}
html body section#school div.list div.fig_map {
  position: absolute;
  left: 25px;
  top: -10px;
  background-image: url(../img/fig_map.png);
  width: 85px;
  height: 67px;
  background-size: contain;
  background-repeat: no-repeat;
}
html body section#school div.list div.inner {
  position: absolute;
  left: 5px;
  top: 65px;
  width: 126px;
  height: 157.5px;
  overflow: scroll;
}
html body section#school div.list div.inner p {
  color: black;
  font-size: 8px;
}
html body section#school div.list div.inner p.bold {
  font-weight: bold;
}
html body section#school div.fig_school {
  position: absolute;
  left: 165px;
  top: 140px;
  background-image: url(../img/fig_school.png);
  width: 145px;
  height: 244px;
  background-size: contain;
  background-repeat: no-repeat;
}
html body section#team {
  height: 531px;
  background-image: url(../img/bg_pattern.png);
  background-size: 37.5px;
  background-repeat: repeat;
  background-color: #FD4D06;
}
html body section#team h2 {
  position: absolute;
  left: 2px;
  top: 24px;
  background-image: url(../img/ttl_team.png);
  width: 297.5px;
  height: 27px;
  background-size: contain;
  background-repeat: no-repeat;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}
html body section#team h3.match {
  position: absolute;
  left: 17.5px;
  top: 65px;
  background-image: url(../img/sub_match.png);
  width: 116px;
  height: 60px;
  background-size: contain;
  background-repeat: no-repeat;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}
html body section#team p.txt_match {
  position: absolute;
  position: absolute;
  left: 17.5px;
  top: 145px;
  width: 145px;
  height: 125px;
}
html body section#team div.fig_match {
  position: absolute;
  left: 180px;
  top: 65px;
  background-image: url(../img/fig_match.gif);
  width: 112.5px;
  height: 200px;
  background-size: contain;
  background-repeat: no-repeat;
}
html body section#team div.bg_match {
  position: absolute;
  left: 175px;
  top: 60px;
  background-image: url(../img/bg_list.png);
  width: 136px;
  height: 232.5px;
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  left: 176px;
  top: 61.5px;
  width: 121px;
  height: 208.5px;
}
html body section#team h3.skill {
  position: absolute;
  left: 17.5px;
  top: 305px;
  background-image: url(../img/sub_skill.png);
  width: 153.5px;
  height: 38px;
  background-size: contain;
  background-repeat: no-repeat;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}
html body section#team p.txt_skill {
  position: absolute;
  position: absolute;
  left: 17.5px;
  top: 360px;
  width: 145px;
  height: 125px;
}
html body section#team div.fig_skill {
  position: absolute;
  left: 180px;
  top: 295px;
  background-image: url(../img/fig_skill.gif);
  width: 113px;
  height: 200px;
  background-size: contain;
  background-repeat: no-repeat;
}
html body section#team div.bg_skill {
  position: absolute;
  left: 175px;
  top: 290px;
  background-image: url(../img/bg_list.png);
  width: 136px;
  height: 232.5px;
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  left: 176px;
  top: 291.5px;
  width: 121px;
  height: 208.5px;
}
html body section#practice {
  height: 367.5px;
  background-image: url(../img/bg_practice.png);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
}
html body section#practice h2 {
  position: absolute;
  left: 75px;
  top: 30px;
  background-image: url(../img/ttl_practice.png);
  width: 171.5px;
  height: 57px;
  background-size: contain;
  background-repeat: no-repeat;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}
html body section#practice h3 {
  position: absolute;
  left: 10px;
  top: 105px;
  background-image: url(../img/sub_practice.png);
  width: 151px;
  height: 39.5px;
  background-size: contain;
  background-repeat: no-repeat;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}
html body section#practice p.txt_main {
  position: absolute;
  position: absolute;
  left: 17.5px;
  top: 150px;
  width: 145px;
  height: 125px;
  font-size: 10px;
}
html body section#practice div.fig_practice {
  position: absolute;
  left: 180px;
  top: 110px;
  background-image: url(../img/fig_practice.gif);
  width: 113px;
  height: 200.5px;
  background-size: contain;
  background-repeat: no-repeat;
}
html body section#practice div.bg_practice {
  position: absolute;
  left: 175px;
  top: 105px;
  background-image: url(../img/bg_list.png);
  width: 136px;
  height: 232.5px;
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  left: 176px;
  top: 106.5px;
  width: 121px;
  height: 208.5px;
}
html body section#practice div.icn_practice {
  position: absolute;
  left: 50px;
  top: 275px;
  background-image: url(../img/icn_practice.png);
  width: 73px;
  height: 71px;
  background-size: contain;
  background-repeat: no-repeat;
}
html body section#character {
  height: 377px;
  background-image: url(../img/bg_pattern.png);
  background-size: 37.5px;
  background-repeat: repeat;
  background-color: #FA485E;
}
html body section#character div.fig_items {
  position: absolute;
  width: 100%;
  height: 170.5px;
  top: 25px;
  background-image: url(../img/fig_items.png);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 785.5px 170.5px;
}
html body section#character div.fig_favorite {
  position: absolute;
  left: 120px;
  top: 15px;
  background-image: url(../img/fig_favorite.png);
  width: 192.5px;
  height: 185px;
  background-size: contain;
  background-repeat: no-repeat;
}
html body section#character h3.favorite {
  position: absolute;
  left: 10px;
  top: 40px;
  background-image: url(../img/sub_favorite.png);
  width: 154px;
  height: 40.5px;
  background-size: contain;
  background-repeat: no-repeat;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}
html body section#character p.txt_favorite {
  position: absolute;
  position: absolute;
  left: 10px;
  top: 90px;
  width: 180px;
  height: 105px;
  font-size: 10px;
}
html body section#character h3.drama {
  position: absolute;
  left: 107.5px;
  top: 220px;
  background-image: url(../img/sub_drama.png);
  width: 198.5px;
  height: 40px;
  background-size: contain;
  background-repeat: no-repeat;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}
html body section#character p.txt_drama {
  position: absolute;
  position: absolute;
  left: 107.5px;
  top: 270px;
  width: 200px;
  height: 105px;
  font-size: 10px;
}
html body section#character div.fig_drama {
  position: absolute;
  left: 15px;
  top: 220px;
  background-image: url(../img/fig_drama.png);
  width: 88.5px;
  height: 123.5px;
  background-size: contain;
  background-repeat: no-repeat;
}
html body footer {
  position: relative;
  overflow: hidden;
  height: 595px;
  background-color: #000000;
}
html body footer div.fig_kyujo {
  position: absolute;
  width: 100%;
  height: 293.5px;
  background-image: url(../img/fig_kyujo.png);
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: cover;
}
html body footer div.fig_root {
  position: absolute;
  width: 0px;
  height: 0px;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  margin: auto auto 0 auto;
}
html body footer div.fig_biggirl {
  position: absolute;
  background-image: url(../cutie/036.png);
  transform: scale(-1, 1);
  left: 30px;
  bottom: 40px;
  width: 250px;
  height: 380px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
html body footer .fence {
  position: absolute;
  top: 479px;
  width: 100%;
  height: 36px;
  background-image: url(../img/fence.png);
  background-repeat: repeat no-repeat;
  background-size: contain;
}
html body footer .wall {
  position: absolute;
  top: 515px;
  width: 100%;
  height: 80px;
  background-image: url(../img/wall.png);
  background-repeat: repeat;
  background-size: contain;
}
html body footer h2 {
  position: absolute;
  left: 75px;
  top: 25px;
  background-image: url(../img/ttl_player.png);
  width: 179.5px;
  height: 56.5px;
  background-size: contain;
  background-repeat: no-repeat;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}
html body footer div.fig_player {
  position: absolute;
  left: 60px;
  top: 90px;
  background-image: url(../img/fig_player.png);
  width: 205px;
  height: 367.5px;
  background-size: contain;
  background-repeat: no-repeat;
}
html body footer p.copyright {
  position: absolute;
  left: 0;
  top: 530px;
  width: 320px;
  height: 50px;
  position: absolute;
  text-align: center;
  font-size: 10px;
}
html body footer p.copyright a {
  color: #fff;
}
html body header .container,
html body section .container,
html body footer .container {
  position: relative;
  width: 320px;
  height: 100%;
  margin: 0 auto;
}

html body footer.simple {
  overflow: visible;
  height: 150px;
}
html body footer.simple .fence {
  top: -36px;
  height: 36px;
}
html body footer.simple .wall {
  top: 0px;
  height: 150px;
}
html body footer.simple .back_btn {
  position: absolute;
  top: 22px;
  left: 60px;
}
html body footer.simple .back_btn img {
  width: 200px;
}
html body footer.simple .copyright {
  top: 90px;
}

html body .container2 {
  position: relative;
  min-width: 310px;
  max-width: 600px;
  height: 100%;
  margin: 0 auto;
  padding: 0 5px;
}