* {
 box-sizing: border-box;
}
html, body {
 font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "游ゴシック", "Yu Gothic", YuGothic, Verdana, Meiryo, "M+ 1p", sans-serif;
 position: relative;
}
#main {
 width: 100%;
 min-width: 970px;
 background:#fff url("../images/bg-fin.jpg") no-repeat top center;
}
#main a:hover img {
 opacity: 0.9;
 filter: alpha(opacity=90);
 -ms-filter: "alpha( opacity=70 )";
}
img {
 max-width: 100%;
 height: auto;
}
.clearfix {
 content: '';
 clear: both;
}
.sm-only {
 display: none;
}
.w1050 {
 width: 100%;
 max-width: 1050px;
 margin: 0 auto;
 position: relative;
 z-index: 10;
}
/*Top*/
#top {
 position: relative;
}
#top h1 {
 text-align: center;
 padding-left: 50px;
}
#top h2 {
 text-align: left;
 padding: 0 0 0 80px;
}
#top .uchimura {
 position: absolute;
 top: 180px;
 right: -40px;
 z-index: 1;
}
#top .top-character {
 position: relative;
 top: -220px;
 text-align: center;
 padding-left: 16px;
}

 


/*Bottom*/
#bottom {
 padding: 0 0 80px;
 position: relative;
 z-index: 10;
 background: url("../images/bg-btm-fin.jpg") no-repeat center bottom;
 margin-top: -1000px;
}
.bottom-content {
 background: url("../images/ti-list.png") no-repeat center top;
 position: relative;
 z-index: 0;
 padding-top: 800px;
}


.content-wrap {
 position: absolute;
 bottom: -120px;
 left: 0;
 right: 0;
 margin: 0 auto;
}
.content-wrapp {
 float: left;
}
.content-wrap .kenshi {
 float: left;
 width: 48%;
 text-align: left;
}
.content-wrap .board {
 padding: 0;
 float: left;
 width: 52%;
 text-align: right;
 padding-top: 78px;
}
#bottom .sakura {
 position: absolute;
 top: 343px;
 left: 0;
 right: 0;
 margin: 0 auto;
 width: 100%;
 text-align: center;
}
#clouds {
 position: absolute;
 width: 100%;
 bottom: -35%;
 z-index: 1;
 /*background: url(../images/bottom-bg2.jpg) 10px 130px repeat-x;*/
}
#clouds .cloudR {
 float: right;
 width: 25%;
 text-align: right;
}
#clouds .cloudL {
 float: left;
 width: 30%;
 text-align: left;
}

.bottom-content ul {
 position: relative;
 padding: 260px 0 0 0;
}
#bottom .backnumber-lists {
 padding: 0;
 margin: 38px auto 0 auto;
 display: flex;
 flex-wrap: wrap;
 justify-content: space-between;
 max-width: 966px;
}
#bottom .backnumber-lists li {
 flex: 0 0 483px;
 margin-bottom: 16px;
}
#bottom .backnumber-lists li:hover a img {
 opacity: 0;
 filter: none;
}
#bottom .backnumber-lists li:hover.bn-1 {
 background: url(../images/backnumber-1-hover.png) 0 0 no-repeat;
 background-size: cover;
 display: block;
 opacity: 1;
}
#bottom .backnumber-lists li:hover.bn-2 {
 background: url(../images/backnumber-2-hover.png) top center no-repeat;
 background-size: cover;
 display: block;
 opacity: 1;
}
#bottom .backnumber-lists li:hover.bn-3 {
 background: url(../images/backnumber-3-hover.png) top center no-repeat;
 background-size: cover;
 display: block;
 opacity: 1;
}
#bottom .backnumber-lists li:hover.bn-4 {
 background: url(../images/backnumber-4-hover.png) top center no-repeat;
 background-size: cover;
 display: block;
 opacity: 1;
}
#bottom .backnumber-lists li:hover.bn-5 {
 background: url(../images/backnumber-5-hover.png) top center no-repeat;
 background-size: cover;
 display: block;
 opacity: 1;
}
#bottom .backnumber-lists li:hover.bn-6 {
 background: url(../images/backnumber-6-hover.png) top center no-repeat;
 background-size: cover;
 display: block;
 opacity: 1;
}




/*POPUP*/
.PopUp {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(255,255,255,0.70) url(../images/popup_bg.png);
	background-size: cover;
	z-index: 99999;
	overflow: auto;
	display: none;
 padding: 40px;
}
.PopUp p {
	width: 650px;
	padding: 0;
	margin: auto;
	position: relative;
}
.PopUp p a {
}
.PopUp p strong {
	position: absolute;
	right: 10px;
	top: 10px;
	cursor: pointer;
}


@media only screen and (max-width: 1440px) {
 x#clouds {
  bottom: 10%;
 }
 #clouds .cloudR {
  width: 25%;
 }
 #clouds .cloudL {
  width: 25%;
 }
 x#bottom {
  margin-top: -23%;
 }
 x.bottom-content ul {
  padding: 45% 0 0 0;
 }
}
@media only screen and (max-width: 1024px) {
 #bottom {
  margin-top: -1000px;
  position: relative;
 }
 .bottom-content {
 padding-top :800px;
 }
 .bottom-content ul {
  padding: 50% 0 0 0;
 }

}
@media only screen and (max-width: 970px) {
 #main{min-width: 0;}
 #bottom .backnumber-lists li{flex: 0 0 48%;}
}


@media only screen and (max-width: 768px) {
 #main {
  min-width: 100%;
 }
 #Navi ul.clearfix {
  width: 100%;
  max-width: 100%;
  overflow-x: scroll;
 }
 #top .uchimura {
  width: 37%;
  bottom: 24%;
  top: auto;
  right: 0;
 }
 #top {
  background-size: cover;
  background-position: top left 60%, top center;
 }
 #top h1 {
  padding: 0;
  width: 64%;
  margin: 0 auto;
 }
 #top h2 {
  padding: 0;
  width: 64%;
  margin: 0 auto;
 }

 #top .top-character {
  width: 50%;
  bottom: 0;
  top: auto;
 }


 #bottom {
  margin-top: 0;
  position: relative;
  background: none;
 }

 
  #bottom .bottom-content {
 margin-top: -70vw;
 padding-top :77vw;
 }

 #bottom .content-wrap {
  width: 94%;
  margin: 0 auto;
 }
 #bottom .content-wrap .kenshi {
  bottom: 20%;
  right: 40px;
  width: 45%;
 }
 #bottom #clouds {
  top: -2%;
 }
 
 
 .bottom-content ul {
  padding: 320px 0 0 0;
 }
 x.bottom-content ul.backnumber-lists {
  padding: 600px 0 0 0;
 }
 #bottom .backnumber-lists li {
  flex: 0 0 48%;
 }
 .bottom-content {
  background-size: 250%;
  background-position: top right 50%;
 }
 #clouds {
  bottom: 10%;
 }
 
 
 /*POPUP*/

.PopUp p {
	width: 100%;
}
 .PopUp p strong{ width: 40px; right: 8px; top: 8px;}

 
 
}

@media only screen and (max-width: 426px) {
 
  /*POPUP*/
 .PopUp{padding: 24px;}
.PopUp p {
	width: 100%;
}
 .PopUp p strong{ width: 25px; right: 1px; top: 1px;}
 
 #main {
  background-size: 330%;
 }
 #top {
  padding-bottom: 0;
 }
 #top h1 {
  padding: 10px 0 0 0;
  width: 64%;
  margin: 0 auto;
 }
  #top h2 {
  text-align: center;
   width: 90%;
   margin: auto;
   padding: 0 0 0 1%;
 }
  #top .uchimura {
  width: 40%;
   right: -1%;
   bottom: 8%;
   top: auto;
 }

 #top .top-character {
  width: 60%;
  top: auto;
  bottom: 1%;
 }

 #bottom .content-wrap .kenshi {
  bottom: 8%;
 }
 #bottom {
  overflow: hidden;
  padding: 0;
  margin-top: 0;
 }
 #bottom .bottom-content{ background-size: 240vw;}
 #bottom .content-wrap .board {
  width: 100%;
  float: none;
 }
 #bottom .content-wrap .kenshi {
  width: 50%;
  float: none;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 11%;
  margin: 0 auto;
  overflow: hidden;
  max-height: 33%;
 }
 #bottom .content-wrap .board {
  padding: 0 0 10% 0;
  ;
 }
 #bottom .content-wrap {
  width: 94%;
  margin: 0 auto;
  padding-top: 100px;
 }
 #bottom .backnumber-lists {
  margin: 10px auto 0 auto;
 }
 .bottom-content ul {
  padding: 150px 0 0 0;
  text-align: center;
 }
 #clouds {
  bottom: 10%;
 }
 #nav_footer_rspv {
  position: relative;
 }
 #bottom .backnumber-lists li {
  flex: 0 0 100%;
  text-align: center;
 }
}