body {
  text-align:center;
  margin: auto;
  background-color:#87d9ff;
}
#back {
  margin:auto;
  background-image:url("../img/bg_gara.jpg");
  background-position:top center;
}
.container {
  background-color:#87d9ff;
  background-image:url("../img/bg.jpg");
  background-position:top center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  text-align:center;
  width:980px;
  margin:auto;
}
@media screen and (max-width:780px) {
#back {
  max-width:100%;
}
.container {
  background-size: 100%;
  width:100%;
}
}

/* ****************** header ******************* */
#header {
  margin:auto;
  text-align:center;
  display:inline-block;
  vertical-align:top;
}
#logo {
  display:inline-block;
  vertical-align:top;
}
#logo img{
  height:180px;
}
#menu{
  height:140px;
}
#menu li{
  display:inline-block;
  vertical-align:top;
  width:120px;
}
.smenu{
  display:none;
}
@media screen and (max-width:780px) {
#header {
}
#logo {
  width:90%;
}
#menu{
  z-index:998;
  display:none;
  position:fixed;
  top:0;
  margin:auto;
  text-align:center;
  height:240px;
  width:370px;
}
#menu li img{
  width:80px;
}
.smenu{
  z-index:1;
  display:inline-block;
  position:fixed;
  top:0;
  right:0;
  margin:5px 15px;
  font-size:4em;
  font-weight:bold;
}
.rem {
  z-index:1;
  display:inline-block;
  position:fixed;
  top:160px;
  right:0px;
  font-size:4em;
  font-weight:bold;
  border:1px solid red;
}

/*.smenu:active{
  animation: navi 3s linear infinite;
  margin: 1rem 0 !important;
}
@keyframes navi {
 0% { transform: translateY(0) }
 25% { transform: translateY(5px) }
 50% { transform: translateY(10px) }
 75% { transform: translateY(50px) }
 100% { transform: translateY(50px) }
}*/

}

/* ****************** slider ******************* */
.bxslider {
}
.slide-wrap {
  margin:auto;
  text-align:center;
  width:980px;
}
@media screen and (max-width:780px) {
.slide-wrap {
  width:auto;
}
}



/* ****************** loadimg ******************* */

#loader-bg {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background: #000;
  z-index: 1;
  padding-bottom:30%;
}
#loader {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  margin-top: -100px;
  margin-left: -100px;
  text-align: center;
  color: #fff;
  z-index: 999;
}
@media screen and (max-width:780px) {

}

/* ****************** toppage ******************* */
.pagetop {
  position: fixed;
  bottom: 20px;
  right: 20px;
  animation: pagetop01 3s linear infinite;
  transform-origin: 50% 50%;
  margin: 1rem 0 !important;
}
@keyframes pagetop01 {
 0% { transform: translateY(0) }
 25% { transform: translateY(-15px) }
 50% { transform: translateY(0) }
 75% { transform: translateY(-15px) }
 100% { transform: translateY(0) }
}
@media screen and (max-width:780px) {
.pagetop {
  bottom: 5px;
  right: 5px;
}
.pagetop img{
  width:60px;
}
}

/* ****************** MOVIE ******************* */
.movie {
  margin:auto;
  width:500px;
}
@media screen and (max-width:780px) {
.movie {
  margin:auto;
  width:100%;
}
}
/* ****************** SNS ******************* */
.SNS-link {
  width:480px;
  height:500px;
  margin:20px 0;
  display:inline-block;
  vertical-align:top;
}
.tittle {
  width:350px;
  margin:auto;
}

.twitter-follow-button{
  margin:10px;
}
.twitter {
  width:430px;
  height:480px;
  overflow:scroll;
  display:inline-block;
  vertical-align:top;
  margin:30px auto;
}
.snsetc li{
  display:inline-block;
  vertical-align:top;
  margin:10px;
}
.icon {
  width:600px;
  margin:10px 0;
  display:inline-block;
  vertical-align:top;
}
@media screen and (max-width:980px) {
.SNS-link {
  width:350px;
  height:500px;
  margin:0;
}
.twitter {
  width:315px;
  height:380px;
}
.twitter-follow-button{
  margin:30px;
}
.icon {
  width:350px;
  margin:40px 0 30px ;
}
}

/* ****************** footer ******************* */

#foot{
  margin:10px auto;
  background-color:white;
  padding:20px;
}
#foot span{
  font-size:0.7em;
}

@media screen and (max-width:780px) {

}

/* ****************** bg_character ******************* */
.bganimation {
  position:fixed;
  top:0;
  right:0;
  left:0;
  z-index:-9999;
  height: 550px;
  width: 980px;
  margin: auto;
  padding-bottom:50px;
  background-repeat: no-repeat;
  background-position: center top;
}
.bgchara {
  margin-right:300px;
  display:inline-block;
  width:318px;
  height:584px;
  background-image:url("../img/chara_01.png");
  background-repeat: no-repeat;
  animation: bgc 5s linear infinite;
  transform-origin: bottom left;
}
@keyframes bgc {
 0% { transform: translateX(0) }
 25% { transform: translateX(-120px) }
 50% { transform: translateX(-150px) }
 75% { transform: translateX(-110px) }
 100% { transform: translateX(0) }
}
.bgchara02 {
  display:inline-block;
  width:179px;
  height:282px;
  margin-left:800px;
  background-image:url("../img/chara_02.png");
  animation: bgc2 13s linear infinite;
  transform-origin: bottom right;
}
@keyframes bgc2 {
 0% { transform: rotate(0deg) }
 5% { transform: rotate(35deg) }
 10% { transform: rotate(0deg) }
 15% { transform: rotate(0deg) }
 20% { transform: rotate(0deg) }
 25% { transform: rotate(35deg) }
 30% { transform: rotate(0deg) }
 35% { transform: rotate(0deg) }
 40% { transform: rotate(0deg) }
 45% { transform: rotate(0deg) }
 50% { transform: rotate(40deg) }
 55% { transform: rotate(0deg) }
 60% { transform: rotate(0deg) }
 65% { transform: rotate(0deg) }
 70% { transform: rotate(0deg) }
 75% { transform: rotate(0deg) }
 80% { transform: rotate(25deg) }
 85% { transform: rotate(40deg) }
 90% { transform: rotate(40deg) }
 95% { transform: rotate(25deg) }
 100% { transform: rotate(0deg) }
}
@media screen and (max-width:780px) {
.bganimation {
  display:none;
}
}

/* ****************** lucky_chance ******************* */

.banner2 {
  margin:20px auto;
}
@media screen and (max-width:780px) {
.banner{
  width:95%;
}
.banner2{
  width:95%;
}
.banner img{
  width:85%;
}
.banner2 img{
  width:85%;
}
}

/** ABOUT US ****************************************/
#aboutus{
	margin:60px auto;
	background:rgba(255,255,255,0.95);
	padding:60px 0;
}
#aboutus .about-ttl{
	font-size:3em;
	font-weight:bold;
	margin-bottom:30px;
}
#aboutus table{
	display:inline-block;
	margin:auto;
}
#aboutus table th{
	padding:1em 2em;
	display:flex;
	align-items:flex-start;
	white-space:nowrap;
}
#aboutus table td{
	padding:1em 2em;
}

@media(max-width:767px){
	#aboutus table{font-size:1.25em;}
	#aboutus table th{padding:1em;}
	#aboutus table td{padding:1em;}
}