/*----------mixIn----------*/
.bdBox {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
/*----------mixIn-END----------*/
@font-face {
  font-family: 'OOGIEBOO';
  src: url('../font/OOGIEBOO.eot') format('eot');
  src: url('../font/OOGIEBOO.woff') format('woff'), url('../font/OOGIEBOO.ttf') format('truetype');
}
@font-face {
  font-family: 'OOGIEBOO';
}
.intro-page .page-content-box-inner img {
  max-width: 100%;
}
.play-page .page-content-box-inner,
.page-scroll .page-content-box-inner {
  width: 100%;
  height: 100%;
  overflow: scroll;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
.page-style .page-content-box {
  background: url("../img/bento-bg.png") no-repeat top center;
  background-size: contain;
}
.play-header {
  margin-bottom: 3%;
}
.play-header .play-btn-list {
  padding-left: 6%;
}
.play-header .play-btn-list li {
  display: inline-block;
}
.play-header .play-btn-list li img {
  height: 23.1px;
  width: auto;
}
@media screen and (min-height: 920px) and (max-width: 1279px) {
  .play-header .play-btn-list li img {
    width: auto;
    height: 28px;
  }
}
@media screen and (min-height: 920px) and (min-width: 1280px) {
  .play-header .play-btn-list li img {
    width: auto;
    height: 35px;
  }
}
@media screen and (min-height: 640px) and (max-height: 799px) and (min-width: 1024px) {
  .play-header .play-btn-list li img {
    width: auto;
    height: 24.5px;
  }
}
@media screen and (min-height: 800px) and (max-height: 827px) and (min-width: 1024px) {
  .play-header .play-btn-list li img {
    width: auto;
    height: 28px;
  }
}
@media screen and (min-height: 828px) and (max-height: 919px) and (min-width: 1024px) {
  .play-header .play-btn-list li img {
    width: auto;
    height: 31.5px;
  }
}
.play-section-area {
  margin-bottom: 2em;
}
.play-section-area img {
  width: 100%;
}
.play-section-title {
  height: 28px;
}
.play-section-title img {
  height: 100%;
  width: auto;
}
@media screen and (max-width: 959px) {
  .play-section-title img {
    height: 3vh;
  }
}
.play-content img {
  width: 100%;
  height: auto;
}
.page-content-box {
  /*
	 height:75%;
	 width: 100%;
*/

  width: 541.2px;
  height: 464.64000000000004px;
  margin: auto;
  padding: 2.5% 2%;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.page-content-box .page-content-box-inner {
  font-family: 'OOGIEBOO';
  line-height: 1.4;
  font-size: 10px;
  color: #310404;
  -webkit-text-size-adjust: 100%;
  /*
		@media screen and (max-width: 959px) 
		{
			height: 100%;
		}
*/

  /*
		 p
		 {
			 margin-bottom: 1em;
			 em
			 {
				 font-size: 1.4em;
			 }
		}
*/

}
@media screen and (min-height: 920px) and (max-width: 1279px) {
  .page-content-box {
    width: 656px;
    height: 563.2px;
  }
}
@media screen and (min-height: 920px) and (min-width: 1280px) {
  .page-content-box {
    width: 820px;
    height: 704px;
  }
}
@media screen and (min-height: 640px) and (max-height: 799px) and (min-width: 1024px) {
  .page-content-box {
    width: 574px;
    height: 492.79999999999995px;
  }
}
@media screen and (min-height: 800px) and (max-height: 827px) and (min-width: 1024px) {
  .page-content-box {
    width: 656px;
    height: 563.2px;
  }
}
@media screen and (min-height: 828px) and (max-height: 919px) and (min-width: 1024px) {
  .page-content-box {
    width: 738px;
    height: 633.6px;
  }
}
.page-content-box .intro-text {
  width: 90%;
}
@media screen and (max-width: 959px) {
  .page-content-box .intro-text {
    width: 90%;
  }
}
.page-content-box .intro-text img {
  width: 100%;
  height: auto;
}
.page-content-box .page-title {
  width: 26%;
  padding-left: 1%;
  margin-bottom: 1%;
  /*
		 @media screen and (max-width: 959px) 
		 {
			 height: 3%;
			 width: auto;
			 margin-bottom: 1%;
		 }
*/

}
.page-content-box .page-title img {
  width: 100%;
  height: auto;
}
.game-title {
  position: absolute;
  height: 27%;
  top: -4%;
  left: -23%;
  /*
	@media screen and (min-width: 961px) 
	{
		height: 16%;
		left: 4%;
		img
		{
			height: 100%;
			width: auto;
		}
	}
	@media screen and (max-width: @break-tablet) 
	 {
		 width: 20%;
		 img
		 {
			 width: 100%;
			 height: auto;
		 }
	 }
*/

}
.game-title img {
  width: auto;
  height: 100%;
}
/*-------------
TopPage-CSS
-------------*/
.top-content-box-wrap {
  position: relative;
}
.top-content-box-wrap .top-content-box-shadow {
  position: absolute;
  bottom: -6%;
  text-align: center;
  width: 100%;
}
.top-content-box-wrap .top-content-box-shadow .shadow-layer {
  display: inline-block;
  width: 639.5400000000001px;
  height: 289.08000000000004px;
  background: url("../img/shadow-top.png") no-repeat top center;
  background-size: contain;
}
@media screen and (min-height: 920px) and (max-width: 1279px) {
  .top-content-box-wrap .top-content-box-shadow .shadow-layer {
    width: 775.2px;
    height: 350.40000000000003px;
  }
}
@media screen and (min-height: 920px) and (min-width: 1280px) {
  .top-content-box-wrap .top-content-box-shadow .shadow-layer {
    width: 969px;
    height: 438px;
  }
}
@media screen and (min-height: 640px) and (max-height: 799px) and (min-width: 1024px) {
  .top-content-box-wrap .top-content-box-shadow .shadow-layer {
    width: 678.3px;
    height: 306.59999999999997px;
  }
}
@media screen and (min-height: 800px) and (max-height: 827px) and (min-width: 1024px) {
  .top-content-box-wrap .top-content-box-shadow .shadow-layer {
    width: 775.2px;
    height: 350.40000000000003px;
  }
}
@media screen and (min-height: 828px) and (max-height: 919px) and (min-width: 1024px) {
  .top-content-box-wrap .top-content-box-shadow .shadow-layer {
    width: 872.1px;
    height: 394.2px;
  }
}
.top-content-box {
  /*
 height:75%;
 width: 100%;
*/

  width: 790.6800000000001px;
  height: 473.22px;
  background: url("../img/top-content-bgEn.png") no-repeat top center;
  background-size: contain;
  margin: auto;
  position: relative;
  /*
 @media screen and (max-width: 959px) 
 {
	 background-size: cover;
 }
*/

}
@media screen and (min-height: 920px) and (max-width: 1279px) {
  .top-content-box {
    width: 958.4000000000001px;
    height: 573.6px;
  }
}
@media screen and (min-height: 920px) and (min-width: 1280px) {
  .top-content-box {
    width: 1198px;
    height: 717px;
  }
}
@media screen and (min-height: 640px) and (max-height: 799px) and (min-width: 1024px) {
  .top-content-box {
    width: 838.5999999999999px;
    height: 501.9px;
  }
}
@media screen and (min-height: 800px) and (max-height: 827px) and (min-width: 1024px) {
  .top-content-box {
    width: 958.4000000000001px;
    height: 573.6px;
  }
}
@media screen and (min-height: 828px) and (max-height: 919px) and (min-width: 1024px) {
  .top-content-box {
    width: 1078.2px;
    height: 645.3000000000001px;
  }
}
.top-content-box .movie-area {
  position: absolute;
  left: 55%;
  top: 33%;
}
.top-content-box .movie-area img {
  height: 95.04px;
}
@media screen and (min-height: 920px) and (max-width: 1279px) {
  .top-content-box .movie-area img {
    width: auto;
    height: 115.2px;
  }
}
@media screen and (min-height: 920px) and (min-width: 1280px) {
  .top-content-box .movie-area img {
    width: auto;
    height: 144px;
  }
}
@media screen and (min-height: 640px) and (max-height: 799px) and (min-width: 1024px) {
  .top-content-box .movie-area img {
    width: auto;
    height: 100.8px;
  }
}
@media screen and (min-height: 800px) and (max-height: 827px) and (min-width: 1024px) {
  .top-content-box .movie-area img {
    width: auto;
    height: 115.2px;
  }
}
@media screen and (min-height: 828px) and (max-height: 919px) and (min-width: 1024px) {
  .top-content-box .movie-area img {
    width: auto;
    height: 129.6px;
  }
}
.top-content-box .movie-area .mouse-hover {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
}
.top-content-box .news-section {
  position: absolute;
  width: 210.54000000000002px;
  left: 17%;
  top: 59%;
}
@media screen and (min-height: 920px) and (max-width: 1279px) {
  .top-content-box .news-section {
    width: 255.20000000000002px;
  }
}
@media screen and (min-height: 920px) and (min-width: 1280px) {
  .top-content-box .news-section {
    width: 319px;
  }
}
@media screen and (min-height: 640px) and (max-height: 799px) and (min-width: 1024px) {
  .top-content-box .news-section {
    width: 223.29999999999998px;
  }
}
@media screen and (min-height: 800px) and (max-height: 827px) and (min-width: 1024px) {
  .top-content-box .news-section {
    width: 255.20000000000002px;
  }
}
@media screen and (min-height: 828px) and (max-height: 919px) and (min-width: 1024px) {
  .top-content-box .news-section {
    width: 287.1px;
  }
}
.top-content-box .news-section .news-section-title {
  text-align: right;
}
.top-content-box .news-section .news-section-title img {
  width: auto;
  height: 24.42px;
}
@media screen and (min-height: 920px) and (max-width: 1279px) {
  .top-content-box .news-section .news-section-title img {
    width: auto;
    height: 29.6px;
  }
}
@media screen and (min-height: 920px) and (min-width: 1280px) {
  .top-content-box .news-section .news-section-title img {
    width: auto;
    height: 37px;
  }
}
@media screen and (min-height: 640px) and (max-height: 799px) and (min-width: 1024px) {
  .top-content-box .news-section .news-section-title img {
    width: auto;
    height: 25.9px;
  }
}
@media screen and (min-height: 800px) and (max-height: 827px) and (min-width: 1024px) {
  .top-content-box .news-section .news-section-title img {
    width: auto;
    height: 29.6px;
  }
}
@media screen and (min-height: 828px) and (max-height: 919px) and (min-width: 1024px) {
  .top-content-box .news-section .news-section-title img {
    width: auto;
    height: 33.300000000000004px;
  }
}
.top-content-box .news-section .news-section-info {
  width: 166.32000000000002px;
  height: 67.32000000000001px;
  overflow: hidden;
  font-family: 'OOGIEBOO';
  font-size: 24px;
  color: #020003;
  padding-left: 10%;
  margin-top: .5em;
  line-height: 1;
}
@media screen and (min-height: 920px) and (max-width: 1279px) {
  .top-content-box .news-section .news-section-info {
    width: 201.60000000000002px;
    height: 81.60000000000001px;
  }
}
@media screen and (min-height: 920px) and (min-width: 1280px) {
  .top-content-box .news-section .news-section-info {
    width: 252px;
    height: 102px;
  }
}
@media screen and (min-height: 640px) and (max-height: 799px) and (min-width: 1024px) {
  .top-content-box .news-section .news-section-info {
    width: 176.39999999999998px;
    height: 71.39999999999999px;
  }
}
@media screen and (min-height: 800px) and (max-height: 827px) and (min-width: 1024px) {
  .top-content-box .news-section .news-section-info {
    width: 201.60000000000002px;
    height: 81.60000000000001px;
  }
}
@media screen and (min-height: 828px) and (max-height: 919px) and (min-width: 1024px) {
  .top-content-box .news-section .news-section-info {
    width: 226.8px;
    height: 91.8px;
  }
}
.top-content-box .bunner-list {
  position: absolute;
  left: 42%;
  top: 66%;
}
.top-content-box .bunner-list li {
  display: inline-block;
  position: relative;
}
.top-content-box .bunner-list li .making-icon {
  position: absolute;
  top: -80%;
  left: 0;
}
.top-content-box .bunner-list li .making-icon img {
  width: 100%;
  height: auto;
}
.top-content-box .bunner-list a img {
  height: 34.980000000000004px;
  width: auto;
}
@media screen and (min-height: 920px) and (max-width: 1279px) {
  .top-content-box .bunner-list a img {
    width: auto;
    height: 42.400000000000006px;
  }
}
@media screen and (min-height: 920px) and (min-width: 1280px) {
  .top-content-box .bunner-list a img {
    width: auto;
    height: 53px;
  }
}
@media screen and (min-height: 640px) and (max-height: 799px) and (min-width: 1024px) {
  .top-content-box .bunner-list a img {
    width: auto;
    height: 37.099999999999994px;
  }
}
@media screen and (min-height: 800px) and (max-height: 827px) and (min-width: 1024px) {
  .top-content-box .bunner-list a img {
    width: auto;
    height: 42.400000000000006px;
  }
}
@media screen and (min-height: 828px) and (max-height: 919px) and (min-width: 1024px) {
  .top-content-box .bunner-list a img {
    width: auto;
    height: 47.7px;
  }
}
.top-content-box .ouen-page-link {
  position: absolute;
  right: 0;
  top: 42%;
}
.top-content-box .ouen-page-link img {
  height: 67.98px;
  width: auto;
}
@media screen and (min-height: 920px) and (max-width: 1279px) {
  .top-content-box .ouen-page-link img {
    width: auto;
    height: 82.4px;
  }
}
@media screen and (min-height: 920px) and (min-width: 1280px) {
  .top-content-box .ouen-page-link img {
    width: auto;
    height: 103px;
  }
}
@media screen and (min-height: 640px) and (max-height: 799px) and (min-width: 1024px) {
  .top-content-box .ouen-page-link img {
    width: auto;
    height: 72.1px;
  }
}
@media screen and (min-height: 800px) and (max-height: 827px) and (min-width: 1024px) {
  .top-content-box .ouen-page-link img {
    width: auto;
    height: 82.4px;
  }
}
@media screen and (min-height: 828px) and (max-height: 919px) and (min-width: 1024px) {
  .top-content-box .ouen-page-link img {
    width: auto;
    height: 92.7px;
  }
}
/*-------------
TopPage-CSS-END
-------------*/
/*-------------
OuenPage-CSS
-------------*/
.ouen-bento-list {
  padding-left: 11%;
  padding-right: 2.5%;
}
.ouen-bento-list li {
  margin-bottom: 2em;
}
.ouen-bento-list li img {
  max-width: 100%;
}
/*-------------
OuenPage-CSS-END
-------------*/
/*-------------
gameView-CSS
-------------*/
.game-view-menu {
  padding-left: 11%;
  margin-bottom: 2em;
}
.game-view-menu li {
  display: inline-block;
}
.game-view-menu li img {
  height: 29.700000000000003px;
  width: auto;
}
@media screen and (min-height: 920px) and (max-width: 1279px) {
  .game-view-menu li img {
    width: auto;
    height: 36px;
  }
}
@media screen and (min-height: 920px) and (min-width: 1280px) {
  .game-view-menu li img {
    width: auto;
    height: 45px;
  }
}
@media screen and (min-height: 640px) and (max-height: 799px) and (min-width: 1024px) {
  .game-view-menu li img {
    width: auto;
    height: 31.499999999999996px;
  }
}
@media screen and (min-height: 800px) and (max-height: 827px) and (min-width: 1024px) {
  .game-view-menu li img {
    width: auto;
    height: 36px;
  }
}
@media screen and (min-height: 828px) and (max-height: 919px) and (min-width: 1024px) {
  .game-view-menu li img {
    width: auto;
    height: 40.5px;
  }
}
.game-view-area {
  padding: 0 8%;
}
.game-view-area .game-view {
  margin-bottom: 2em;
}
.game-view-area img {
  width: 100%;
}
/*-------------
gameView-CSS-END
-------------*/