@charset "utf-8";
/* CSS Document */
* {
	margin:0;
	padding:0;
    text-decoration: none;
}
    *#header {
      width: auto;
	  height:auto;
      padding-top: 5px;
	  padding-bottom: 5px;
      background-color:#FF4745;
}
 *#lead{
	  padding-top: 5px;
	  padding-bottom: 5px;
	  width: 100%;
	  height:auto;
	  color: #ffffff;
	  text-align: center;
	  margin: 0 auto;
      margin-left: auto;
      margin-right: auto;
      background-color:#281D1D; 
	  font-size:15px;
}
*#h1{
	  width:14em;
	  font-size:20px;
	  text-align: center;
	  border: 3px solid;
      margin-left: auto;
      margin-right: auto;
      margin: 5px auto;
	  color: #ffffff;
}
*#map-background{
	  width: 100%;
	  height: 480px;
	  background-color: #474747;
}
*#map{
      height:auto;
      margin-left: auto;
      margin-right: auto;
      margin: 0 auto;
	  color: #ffffff;
}
*#category{
      width: auto;
	  height:55px;
      padding-top: 5px;
	  padding-bottom: 5px;
      background-color:#FF4745;
}
*#cat-table{
	 display: flex;
     justify-content: center;
	 font-size:11px;
}
*#cat-box{
	  float: left;
      width: auto;
	  height:40px;
      padding-top: 5px;
	  padding-bottom: 5px;
	  padding-left: 20px;
	  color: #ffffff;
}
*#nav-cont{
    width: auto;
    height:30px;
    padding-top: 5px;
    padding-bottom: 5px;
    color: #ffffff;
    background-color:#281D1D; 
}
*#nav-table{
    display: flex;
    justify-content: center;
    font-size:11px;
    color: #ffffff;
}
*#nav-box{
    float: left;
    width: auto;
    height:40px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 10px;
    color: #ffffff;
}
*#slider{
	  width: 300px;
      height:136px;
      margin-left: auto;
      margin-right: auto;
      margin: 0 auto;
	  color: #000000;
	  padding-top: 10px;
	  padding-bottom: 10px;
	  margin: 30px auto;
}
.slider {
        position: relative;
}
.slider > li {
    position: absolute;
    list-style: none;
    visibility: hidden;
    animation: anime_slider_fade 8s 0s infinite;
}
.slider > li:nth-of-type(2) {
    animation-delay: 4s;
}
.slider > li:nth-of-type(3) {
    animation-delay: 8s;
}  
@keyframes anime_slider_fade {
    0% {
        visibility: visible;
        opacity: 0;
    }
    15% {
        opacity: 1;
    }
    33.3% {
        opacity: 1;
    }
    48.3% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

#text{
    padding-top: 10px;
    padding-bottom: 10px;
    width: 400px;
    height:auto;
    text-align: left;
    margin-left: auto;
    margin-right: auto;
    margin: 0 auto; 
}
#text-title{
    padding-top: 10px;
    padding-bottom: 10px;
    width: 400px;
    height:auto;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin: 0 auto; 
}

*#exp-top{
    margin: 0 auto;
    width: 320px;
    height:200px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 10px;
    color: #ffffff;
}
*#character-pic{
    float: left;
    width: 320px;
    height: auto;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 10px;
    color: #ffffff;
}

*#footer{
      padding-top: 10px;
	  padding-bottom: 10px;
	  width: 100%;
	  height:auto;
	  color: #ffffff;
	  text-align: center;
	  margin: 0 auto;
	  height:auto;
	  display: inline-block;
      margin-left: auto;
      margin-right: auto;
      background-color:#281D1D; 
}



/* 動画で探すのレイアウト */
*#title-movie{
    padding-top: 10px;
    padding-bottom: 10px;
    font-size:20px;
    width: 400px;
    height:auto;
    color: #ffffff;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin: 15px auto;
    background-color:#281D1D; 
}

*#movie-catch{
    padding-top: 10px;
    padding-bottom: 10px;
    font-size:20px;
    width: 400px;
    height:auto;
    color: #ffffff;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin: 15px auto;
    background-color:#FF4745;
}
*#shop_movie{
    width: 400px;
    height:auto;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin: 20px auto;
}
*#movie-shop-name{
    width: 400px;
    height:auto;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin: 20px auto;
    font-size: large;
}


/* ランキングのレイアウト */
*#picture{
    width: 380px;
    height:254px;
    margin-left: auto;
    margin-right: auto;
    margin: 20px auto;
}
*#title-ranking{
    padding-top: 10px;
    padding-bottom: 10px;
    font-size:20px;
    width: 400px;
    height:auto;
    color: #ffffff;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin: 15px auto;
    background-color:#281D1D; 
}
*#ranking-name{
    padding-top: 10px;
    padding-bottom: 10px;
    font-size:20px;
    width: 400px;
    height:auto;
    color: #ffffff;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin: 15px auto;
    background-color:#FF4745;
}
#ranking-shop{
    width: 400px;
    font-size: larger;
    font-weight: bold;
    height:auto;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin: 0 auto;
}
#ranking-exp{
    padding-top: 10px;
    padding-bottom: 10px;
    width: 400px;
    height:auto;
    text-align: left;
    margin-left: auto;
    margin-right: auto;
    margin: 0 auto; 
}
*#ranking-link{
    padding-top: 10px;
    padding-bottom: 10px;
    border: 2px solid #281D1D;
    width: 250px;
    height:auto;
    color: #ffffff;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin: 0 auto;
}




@media screen and (max-width:400px) {
	
* {
	margin:0;
	padding:0;
	max-width:100%;
  }
  *#header {
      width: auto;
	  height:auto;
      padding-top: 5px;
	  padding-bottom: 5px;
      background-color:#FF4745;
  }
  *#cat-box{
	  float: left;
      width: auto;
	  height:120px;
      padding-top: 5px;
	  padding-bottom: 5px;
	  padding-left: 20px;
	  color: #ffffff;
}
  *#slider{
	  width: 300px;
      height:auto;
      margin-left: auto;
      margin-right: auto;
	  color: #000000;
	  padding-top: 10px;
	  padding-bottom: 10px;
	  margin: 30px auto;
      }
}