/* ==========================================================================
   Base
============================================================================= */
body { min-width: 1200px; }
body#top { background-color: #000; }
header { height: 70px; position: relative; z-index: 1001; }
#wrapper { overflow:hidden; background: #c00; }
#footer { top: 100%; width: 100%; position: relative; background: #000; min-height: 280px; padding: 30px 0 20px; z-index: 2000; }
#content { color: #fff; width: 100%; margin: 0 auto; }
.ttl { margin-top: 50px; position: relative; left: 50%; margin-left: -600px; width: 1200px; }
.ttl img { opacity: 0;  }

.bg-cont { background: url(../img/common/bg-cont.png) top center no-repeat #c00; }

.cbox:before { display: block; position: absolute; right: -22px; top: -19px; height: 40px; width: 40px; content: ""; background: url(../img/common/cbox.png) no-repeat; }


/* ==========================================================================
   Menu
============================================================================= */

.menu-new { position: absolute; z-index: 1002; width: 120px; height: 40px; pointer-events : none; }
.menu-new img { width: 90px; height: 30px; }
.menu03-new { left: 50%; top:20px; margin-left: -150px; }
.menu04-new { left: 50%; top:20px; margin-left: 0px; }
.menu05-new { left: 50%; top:20px; margin-left: 140px; }
.menu06-new { left: 50%; top:20px; margin-left: 430px; }


/* ==========================================================================
   Top
============================================================================= */

body#top #wrapper {  }
body#top #content { min-height: 1200px; }

#main-content { height: 820px; }
.main { width: 100%; position: absolute; min-width: 1200px; z-index: 1001; }
.main img { position: absolute; }

.chara01 { left: 50%; top: 58px; margin-left: -192px; }
.chara02 { right: 50%; top: 326px; margin-right: -60px; }
.chara03 { left: 50%; top: 48px; margin-left: -380px; }
.chara04 { left: 50%; top: 77px; margin-left: -664px; }
.chara05 { left: 50%; top: -38px; margin-left: -104px; }
.chara06 { left: 50%; top: 416px; margin-left: 75px; }
.chara07 { left: 50%; top: 124px; margin-left: 60px; }

.logo01 { left: 50%; margin-left: -600px; top: 500px; }
.date { left: 50%; margin-left: -63px; top: 750px; }
.pslogo { left: 50%; margin-left: 180px; top: 767px; }

.date-sp { display: none; }
.pslogo-sp { display: none; }



.movie { display: block; position: absolute; top: 615px; left: 50%; z-index: 1; margin-left: -560px; background: url(../img/top/movie-anim03.gif) no-repeat; background-size: 268px 150px; }
.movie img { width: 268px; }

.news-wrap { position: relative; z-index: 1001; margin: 0 auto; text-align: left; background: #fff; border-top: #cc0000 solid 1px; border-bottom: #cc0000 solid 1px;  }
.news-wrap .cbox:before { display: none; }
.news-inner { width: 1200px; margin: 0 auto; position: relative; }
.news-ttl { margin-top: -70px; margin-left: -30px; position: absolute; }
.news-more { position: absolute; right: 20px; height: 40px; padding: 10px 20px; line-height: 20px; cursor: pointer; color: #000; font-weight: bold; color: #cc0000; }
.news-more:hover { color: #cc6600; }
.news { height: 40px; background: rgba(255, 255, 255, 0.5); z-index: 1; line-height: 20px; padding: 10px 0; color: #000; }
.news-date { width: 140px; display: inline-block; text-align: right; border-right: #c00 solid 1px; padding-right: 10px; }
.news-text { width: 900px; display: inline-block; margin-left: 20px; }
.news-text a,.news-text a:link,.news-text a:hover,.news-text a:visited,.news-text a:active { color: #c00; font-weight: bold; }


#under-content { position: relative; z-index: 1001; }
.under-content-inner { margin: 0 auto; z-index: 1; position: relative; padding-top: 20px; }
.under-content-inner:after { content: ""; clear: both; display: block; height: 0; visibility: hidden; }

.banner-area { margin: 0 auto 0; width: 1200px; padding: 20px 0 40px; display: flex; flex-wrap: wrap; justify-content: space-between; }
.banner-area a { width: 49%; display: block; background: #900; padding: 10px; margin-bottom: 10px; }
.banner-area a img { width: 100%; }
.banner-area a:hover { opacity: 0.8; }


.main-sp { display: none; }


/* top renew common */


.common-btn a { margin-top: 10px; position: relative; text-decoration: none; display: block; text-align: center; background: #ff5; width: 200px; height: 32px; line-height: 32px; color: #c00; border-radius: 16px; font-weight: 800; transition: 0.3; box-shadow: 0 3px 0 #ed6; }
.common-btn a:hover { transition: 0.3; top: -2px; box-shadow: 0 5px 0 #ed6; }
.common-btn a:active { top: 3px; box-shadow: none; }


/* top renew video */

.video-wrap {
    top: 0;
    left: 0;
    width: 100%;
    height: 1000px;
    position: absolute;
    z-index: 1000;
    font-size: 0;
    overflow: hidden;
    background: url(../img/top/main02.jpg) top center no-repeat #000;
    min-width: 1200px;
}

#video {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
}

.video-wrap:before {
  content: '';
  position: absolute;
  z-index: 1001;
  width: 100%;
  height: 400px;
  background: #ff5;
  left: 0;
  top: 818px;
  transform: skewY(-3deg);
}
.video-wrap:after {
  content: '';
  position: absolute;
  z-index: 1001;
  width: 100%;
  height: 400px;
  background: #c00;
  left: 0;
  top: 830px;
  transform: skewY(-2deg);
}


/* top renew gallery */

.top-gallery-wrapper {
	width: 100%;
	text-align: center;
}


.top-gallery-wrapper-inner {
	width: 1200px;
	text-align: center;
	margin: 0 auto;
	padding-bottom: 50px;
}

.top-gallery-wrapper-inner .common-btn a {
	margin: 10px auto;
}


.top-gallery-wrapper-content {
	display: flex;
	flex-wrap: nowrap;
	margin-bottom: 20px;
}

.top-gallery-wrapper-content-box {
	display: block;
	position: relative;
	padding: 10px;
	height: 100%;
}

.top-gallery-wrapper-content-box:nth-child(2n) {
	margin-left: 40px;
}
.top-gallery-wrapper-content-box:before {
	content: "";
	display: block;
	background: #900;
	position: absolute;
	transform: skewY(3deg);
	width: 100%;
	height: 100%;
	z-index: -1;
	margin: -10px;
}

.top-gallery-wrapper-content-box-text {
	margin-bottom: 5px;
}

.top-gallery-wrapper-content-ttl {
 font-size: 28px;
 font-weight: bold;
 text-shadow: #c00 2px 2px 0px, #c00 -2px 2px 0px, #c00 2px -2px 0px, #c00 -2px -2px 0px;
 position: relative;
 margin-bottom: 20px;
 text-align: left;
}


/* top renew story */

.top-story-wrapper {
	transform: skewY(6deg);
	overflow: hidden;
	height: 400px;
	position: relative;
}

.top-story-bg {
	background: #ff5;
	transform: skewY(7deg);
	height: 100px;
	display: block;
	position: relative;
	margin-bottom: -85px;
}

.top-story-wrapper-inner {
	background: url(../img/bg02.jpg) center no-repeat #fff;
	background-size: 100%;
	transform: skewY(-6deg);
	height: 2500px;
	margin-top: -1000px;
}

.top-story-wrapper-content{
	width: 1200px;
	margin: 0 auto 0;
	padding-top: 1020px;
	text-align: left;
	color: #fff;
	position: relative;
}

.top-story-wrapper-content p {
	text-shadow: black 1px 1px 2px, black -1px 1px 2px, black 1px -1px 2px, black -1px -1px 2px;
	font-size: 20px;
}

.top-story-wrapper-content-ttl {
 font-size: 28px;
 font-weight: bold;
 text-shadow: #c00 2px 2px 0px, #c00 -2px 2px 0px, #c00 2px -2px 0px, #c00 -2px -2px 0px;
 position: relative;
 margin-bottom: 20px;
}

/* top renew line */

.top-line01-wrapper {
	transform: rotate(6deg);
	width: 120%;
	height: 170px;
	left: -10%;
	background:url(../img/line01.jpg);
	position: relative;
	z-index: 10;
}

.top-line02-wrapper {
	transform: rotate(-6deg);
	width: 120%;
	height: 170px;
	left: -10%;
	background:url(../img/line01.jpg);
	position: relative;
	z-index: 10;
}
/* top renew character */

.top-character-wrapper {
	background: url(../img/top/chara-bg.png) top center no-repeat;
	background-size: 100%;
}
.top-character-wrapper-inner {}
.top-character-wrapper-content {
	width: 1200px;
	margin: 0 auto;
	text-align: left;
	color: #fff;"
}
.top-character-wrapper-content-chara-wrapper {
	position: relative;
}

.top-character-wrapper-content-ttl {
 font-size: 28px;
 font-weight: bold;
 text-shadow: #c00 2px 2px 0px, #c00 -2px 2px 0px, #c00 2px -2px 0px, #c00 -2px -2px 0px;
 position: relative;
 z-index: 10;
 margin-bottom: 20px;
}

.top-character-wrapper-content-chara-img {
	position: absolute;
}

.top-character-wrapper-content-chara-img-c01 { width: 60%; top: -50%; left: 5%; }
.top-character-wrapper-content-chara-img-c02  { width: 80%; top: -10%; left: -24%; }
.top-character-wrapper-content-chara-img-c03 { width: 55%; top: -10%; left: -5%; }
.top-character-wrapper-content-chara-img-c04 { width: 80%; top: -10%; left: -24%; }
.top-character-wrapper-content-chara-img-c05 { width: 70%; top: -20%; left: -10%; }
.top-character-wrapper-content-chara-img-c06 { width: 50%; }
.top-character-wrapper-content-chara-img-c07 { width: 50%; top: -20%; left: 10%; }
.top-character-wrapper-content-chara-img-c08 { width: 45%; top: -10%; left: 10%; }
.top-character-wrapper-content-chara-img-c09 { width: 55%; top: -5%; left: -10%; }
.top-character-wrapper-content-chara-img-c10 { width: 60%; top: -30%; left: -10%; }
.top-character-wrapper-content-chara-img-c11 { width: 70%; top: -10%; left: 0; }
.top-character-wrapper-content-chara-img-c12 { width: 70%; top: -5%; left: -10%; }
.top-character-wrapper-content-chara-img-c13 { width: 45%; top: -10%; left: -0; }
.top-character-wrapper-content-chara-img-c14 { width: 30%; top: -20%; left: 10%; }
.top-character-wrapper-content-chara-img-c15 { width: 28%; top: -10%; left: 10%; }
.top-character-wrapper-content-chara-img-c16 { width: 30%; top: -10%; left: 10%; }
.top-character-wrapper-content-chara-img-c17 { width: 40%; top: -10%; left: 0; }
.top-character-wrapper-content-chara-img-c18 { width: 50%; top: -10%; left: -5%; }
.top-character-wrapper-content-chara-img-c19 { width: 110%; top: -50%; left: -45%; }
.top-character-wrapper-content-chara-img-c20 { width: 60%; top: -10%; left: -10%; }
.top-character-wrapper-content-chara-img-c21 { width: 40%; top: 0; left: 5%; }
.top-character-wrapper-content-chara-img-c22 { width: 30%; top: -10%; left: 10%; }
.top-character-wrapper-content-chara-img-c23 { width: 50%; top: 0; left: 10%; }
.top-character-wrapper-content-chara-img-c24 { width: 60%; top: -10%; left: -10%; }
.top-character-wrapper-content-chara-img-c25 { width: 70%; top: -45%; left: -15%; }
.top-character-wrapper-content-chara-img-c26 { width: 90%; top: -100%; left: -15%; }
.top-character-wrapper-content-chara-img-c27 { width: 50%; top: -20%; }
.top-character-wrapper-content-chara-img-c91 { width: 50%; top: -20%; left: 0; }
.top-character-wrapper-content-chara-img-c92 { width: 45%; top: -20%; left: -5%; }
.top-character-wrapper-content-chara-img-c93 { width: 60%; top: -30%; }


.top-character-wrapper-content-chara-bg {
	margin-left: -20px;
	position: absolute;
}

.top-character-wrapper-content-chara-box {
	background: url(../img/characters/common/text-bg.png);
	position: relative;
	left: 50%;
	width: 680px;
	height: 440px;
	margin-left: -100px;
}


.top-character-wrapper-content-chara-name {
	position: absolute;
	margin-top: -60px;
}

.top-character-wrapper-content-chara-cv {
	display: none;
	width: 400px;
	height: 20px;
	position: absolute;
	top: 120px;
	left: 170px;
	font-size: 16px;
	font-weight: 800;
}

.top-character-wrapper-content-chara-text {
	width: 400px;
	position: absolute;
	top: 150px;
	left: 170px;
	display: none;
}

.top-character-wrapper-content-chara-box .common-btn {
	position: absolute;
	top: 300px;
	left: 170px;
}

.top-character-wrapper-content-chara-select-wrapper {
	display: flex;
	flex-wrap: wrap;
	position: relative;
	background: #c00;
	transform: skewY(-6deg);
	text-align: center;
	z-index: 10;
	justify-content: flex-start;
}


.top-character-wrapper-content-chara-select-chara-box {
  transition: 0.3s;
  height: 120px;
  overflow: hidden;
	width: 75px;
  background: #fff;
  margin-bottom: 5px;
  margin-right: 5px;
}

.top-character-wrapper-content-chara-select-chara-box:hover {
  background: #900;
}

.top-character-wrapper-content-chara-select-ip  {
}

.top-character-wrapper-content-chara-select-ip img {
  transform: skewX(6deg);
  width: 140px;
  margin-left: -10px;
  margin-top:  -10px;
}

.top-character-wrapper-content-chara-select-box-chara {
  cursor: pointer;
}

.top-character-wrapper-content-chara-select-box-chara img {
  transform: skewX(6deg);
  width: 140px;
  transition: 0.3s;
  margin-left: -40px;
  margin-top:  -10px;
}

.top-character-wrapper-content-chara-select-box-chara img:hover {
  width: 160px;
  margin-left: -50px;
  margin-top: -20px;
}

/* top renew system */

.top-system-wrapper {
	background: #ff5;
	position: relative;
	transform: skewY(6deg);
	padding: 20px 0;
	margin-bottom: 100px;
}

.top-system-wrapper-inner {
	background: #c00;
	transform: skewY(-1deg);
	background: url(../img/top/content-bg.png);
	background-size: 100%;
	height: 100%;
}

.top-system-wrapper-content {
	transform: skewY(-5deg);
	width: 1200px;
	margin: 0 auto;
	text-align: left;
	color: #fff;
	padding: 100px 0;
}

.top-system-wrapper-content-ttl {
	font-size: 28px;
	font-weight: bold;
	position: relative;
	z-index: 10;
	text-shadow: #c00 2px 2px 0px, #c00 -2px 2px 0px, #c00 2px -2px 0px, #c00 -2px -2px 0px;
	margin-bottom: 20px;
}

/* top renew system section */


.top-system-section {
	width: 1200px;
	margin: 0 auto 60px 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}


.top-system-section:nth-child(2n+1) {
	flex-direction:row-reverse;
}

.top-system-section-text-wrapper {
}


.top-system-section-ttl {
	font-size: 34px;
	font-weight: 800;
	width: 590px;
}

.top-system-section-text {
	width: 590px;
}

.top-system-section-text span {
	color: #ff5;
}

.top-system-section-pics-wrapper {
}

.top-system-section-pics {
	background: #900;
	transform: skewY(3deg);
}

.top-system-section-pics img {
	display: block;
	transform: skewY(-3deg);
	margin: 10px;
	width: 570px;
}

.top-system-section-link {
	width: 590px;
	display: flex;
	flex-wrap: wrap;
}

.top-system-section-link .common-btn {
	flex: 1;
}

/* top product system */


.top-product-wrapper {
}

.top-product-wrapper-inner {
}

.top-product-wrapper-content {
	width: 1200px;
	margin: 0 auto;
}

.top-product-wrapper-content-box {
	display: flex;
	flex-wrap: nowrap;
}

.top-product-wrapper-content-box-cont {
	width: 33%;
	border-left: #ff5 solid 1px;
	height: 360px;
	text-align: center;
}

.top-product-wrapper-content-box-cont .common-btn a {
	margin: 10px auto 0;
}


.top-product-wrapper-content-box-cont:nth-child(1) {
	border-left: none;
}

.top-product-wrapper-content-box-cont-ttl {
	color: #ff5;
	font-size: 32px;
	font-weight: bold;
}

.top-product-wrapper-content-box-cont-text {
	padding: 0 20px;
}

.top-product-wrapper-content-tresure {
	width: 1200px;
	margin: 100px auto 100px;
	text-align: left;
}

.top-product-wrapper-content-tresure-inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.top-product-wrapper-content-tresure-img {
	width: 590px;
}
.top-product-wrapper-content-tresure-img img {
	width: 100%;
}

.top-product-wrapper-content-tresure .common-btn a {}

.top-product-wrapper-content-tresure-text {
	text-align: left;
	width: 590px;
}


.top-product-wrapper-content-game-spec {
	background: #900;
	border-radius: 10px;
	margin-bottom: 50px;
}

.game-spec {
	padding-top: 10px;
	width: 1200px;
	margin: 0 auto;
}
.game-spec table {
	width: 100%;
	border-spacing: 0px 6px;
	text-align: center;
}
.game-spec th {
	border-right: #fff solid 1px;
}
.game-spec td {
}
.game-spec th, .game-spec td {
	padding: 2px 8px;
	font-size: 14px;
}

.game-spec-img {
	width: 300px;
	padding: 20px;
	margin: 0 auto;
}


.game-spec-cp {
	text-decoration: none;
	background: #ff5;
	color: #c00;
	border-radius: 4px;
	padding: 5px 10px;
	text-align: center;
	margin: 10px;
	position: relative;
	box-shadow: 0 3px 0 #ed6;
}

.game-spec-cp:hover {
	transition: 0.3;
	top: -2px;
	box-shadow: 0 5px 0 #ed6;
	cursor: pointer;
}

.game-spec-cp:active {
	top: 3px;
	box-shadow: none;
}


.game-spec-cp span {
	font-weight: bold;
	font-size: 18px;
}

.game-spec-cp-icon {
	width: 160px;
	text-align: center;
	line-height: 50px;
	display: inline-block;
	float: left;
	border-right:#c00 solid 1px;
	font-weight: bold;
	font-size: 18px;
}

.game-spec-cp-text {
	display: inline-block;
}
.game-spec-cp-text-tokuten {
	display: block;
	background: #c00;
	color: #fff;
}

.icon-psstore {
	width: 40px;
}



/* ==========================================================================
   Story
============================================================================= */
body#story #wrapper { background: url(../img/bg02.jpg) top center no-repeat; background-size: 100%; }
body#story #content { }

.story-section-sp { display: none; }

.story-section-wrapper {
	background: #c00;
}

.story-section {
	width: 1200px;
	margin: 0 auto;
	min-height: 1200px;
	padding-bottom: 100px;
}

.story-section-inner {
	position: relative;
	z-index: 1002;
}

.story-section-content {
	background: url(../img/story/story-image.png) top center no-repeat;
	height: 3370px;
}

.story-section-content-inner {
	width: 1160px;
	margin: 0 auto;
}

.story-section-images { position: absolute; }

.story-section-text { z-index: 1; }

.story-section-text01 { top: 50px; }
.story-section-text02 { top: 380px; }
.story-section-text03 { top: 560px; }
.story-section-text04 { top: 810px; }
.story-section-text05 { top: 1140px; }
.story-section-text06 { top: 1570px; }
.story-section-text07 { top: 1700px; }
.story-section-text08 { top: 1900px; }
.story-section-text09 { top: 2140px; }
.story-section-text10 { top: 2460px; }

.story-section-pics {  }

.story-section-pics01 { top: 0; }
.story-section-pics01-1 { top: 0;opacity: 0; }
.story-section-pics02 { top: 200px; }
.story-section-pics03 { top: 720px; }
.story-section-pics04 { top: 1300px; }
.story-section-pics05 { top: 1800px; }
.story-section-pics06 { top: 2100px; }
.story-section-pics07 { top: 2120px; }
.story-section-pics08 { top: 2600px; }

.ttl-wrapper {
	min-height: 400px;
}


.story-section-wrapper:before {
  content: '';
  position: absolute;
  z-index: 1001;
  width: 100%;
  height: 400px;
  background: #ff5;
  left: 0;
  top: 460px;
  transform: skewY(-3deg);
  min-width: 1200px;
}
.story-section-wrapper:after {
  content: '';
  position: absolute;
  z-index: 1001;
  width: 100%;
  height: 500px;
  background: #c00;
  left: 0;
  top: 472px;
  transform: skewY(-2deg);
  min-width: 1200px;
}



.story-section section { margin-top: 40px; }
.story-section section img.story-text { }

/* ==========================================================================
   Outline
============================================================================= */
body#outline #wrapper { background: url(../img/bg03.jpg) center center no-repeat fixed; background-size: cover; }
body#outline #content {}
.outline-section { padding-bottom: 300px; min-height: 1200px; width: 1200px; margin: 0 auto; }
.outline-section section { text-align: left; margin-bottom: 100px; opacity: 0; }
.outline-section-img-sp { display: none; }

section.outline-section-p1 { background: url(../img/outline/sec01.png) top left no-repeat; width: 1200px; height: 780px; position: relative; }
.outline-section-p1-inner { width: 740px; position: relative; top: 280px; left: 320px; color: #fff; font-size: 18px; text-shadow: 2px 0px 0px rgba(231, 0,0, 1),2px 2px 0px rgba(231, 0,0, 1),0px 2px 0px rgba(231, 0,0, 1),0px 0px 2px rgba(231, 0,0, 1),0px 0px 2px rgba(231, 0,0, 1),0px 0px 2px rgba(231, 0,0, 1),0px 0px 2px rgba(231, 0,0, 1); }
.outline-section-p1-inner p { }
.outline-section-p1-inner img { width: 730px; margin-top: 10px; border: #fff solid 4px; }

section.outline-section-p2 { background: url(../img/outline/sec02.png) top left no-repeat; width: 1200px; height: 1130px; position: relative; }
.outline-section-p2-inner { width: 860px; position: relative; top: 400px; left: 150px; color: #fff; font-size: 18px; text-shadow: 2px 0px 0px rgba(231, 0,0, 1),2px 2px 0px rgba(231, 0,0, 1),0px 2px 0px rgba(231, 0,0, 1),0px 0px 2px rgba(231, 0,0, 1),0px 0px 2px rgba(231, 0,0, 1),0px 0px 2px rgba(231, 0,0, 1),0px 0px 2px rgba(231, 0,0, 1); }
.outline-section-p2-inner p { margin-bottom: 10px; }
.outline-section-p2-inner img { width: 730px; }

section.outline-section-p3 { background: url(../img/outline/sec03.png) top left no-repeat; width: 1200px; height: 1130px; position: relative; }
.outline-section-p3-inner { width: 860px; position: relative; top: 410px; left: 150px; color: #fff; font-size: 18px; text-shadow: 2px 0px 0px rgba(231, 0,0, 1),2px 2px 0px rgba(231, 0,0, 1),0px 2px 0px rgba(231, 0,0, 1),0px 0px 2px rgba(231, 0,0, 1),0px 0px 2px rgba(231, 0,0, 1),0px 0px 2px rgba(231, 0,0, 1),0px 0px 2px rgba(231, 0,0, 1); }
.outline-section-p3-inner p { margin-bottom: 10px; }
.outline-section-p3-inner img { width: 730px; }


/* ==========================================================================
   Characters
============================================================================= */
body#characters #wrapper { background: url(../img/bg04.jpg) center center no-repeat fixed; background-size: cover; }

.characters-new { position: absolute; z-index: 3; width: 120px; height: 40px; }
.characters-new img { width: 120px; height: 40px; }

.chara-new { position: absolute; width: 120px; height: 40px; z-index: 10; margin:-170px 0 0 60px; }
.chara-new img { width: 120px; height: 40px; z-index: 1; left: 0; }

.characters-section { min-height: 1500px; width: 1200px; margin: 0 auto; position: relative; }
.characters-section a { z-index: 1; }
.characters-section a:hover {　}
.characters-section img { opacity: 0; }
.characters-section-sp { display: none; }

.characters-c { position: absolute; }
.characters-c01 { left: 000px; top: 0px; }
.characters-c02 { left: 200px; top: 0px; }
.characters-c03 { left: 400px; top: 0px; }
.characters-c04 { left: 600px; top: 0px; }
.characters-c05 { left: 800px; top: 0px; }
.characters-c06 { left: 100px; top: 220px; }
.characters-c07 { left: 300px; top: 220px; }
.characters-c08 { left: 500px; top: 220px; }
.characters-c09 { left: 700px; top: 220px; }
.characters-c10 { left: 900px; top: 220px; }
.characters-c11 { left: 000px; top: 440px; }
.characters-c12 { left: 200px; top: 440px; }
.characters-c91 { left: 400px; top: 440px; }
.characters-c92 { left: 600px; top: 440px; }
.characters-c93 { left: 800px; top: 440px; }
.characters-c13 { left: 100px; top: 660px; }
.characters-c14 { left: 300px; top: 660px; }
.characters-c15 { left: 500px; top: 660px; }
.characters-c16 { left: 700px; top: 660px; }
.characters-c17 { left: 900px; top: 660px; }
.characters-c18 { left: 000px; top: 880px; }
.characters-c19 { left: 200px; top: 880px; }
.characters-c20 { left: 400px; top: 880px; }
.characters-c21 { left: 600px; top: 880px; }
.characters-c22 { left: 800px; top: 880px; }
.characters-c23 { left: 100px; top: 1100px; }
.characters-c24 { left: 300px; top: 1100px; }
.characters-c25 { left: 500px; top: 1100px; }
.characters-c26 { left: 700px; top: 1100px; }
.characters-c27 { left: 900px; top: 1100px; }


.characters-section-img01 { left: 0; top:-92px; position: relative; z-index: 0; opacity: 0; display: none;}

.jikkyou-btn { position: absolute; left: 50%; margin-left: 310px; margin-top: -100px; }
.jikkyou-btn a:hover { display: block; opacity: 0.8; }


/* ==========================================================================
   Character
============================================================================= */
body#character #wrapper { height: 100%; position: relative; background-size: 100%; }

.character-wrapper { width: 1200px; margin: 0 auto; min-height: 1000px;}
.character-all { position: relative; height: 1000px; z-index: 2; opacity: 0; }
.character-all-c { position: absolute; }


.character-all-c01 { margin-top: -140px; left: 120px; z-index: 1; }
.character-all-c01-bg { margin-top: -140px; left: 100px; }
.character-all-c02 { margin-top: 20px; left: -460px; z-index: 1; }
.character-all-c02-bg { margin-top: 20px; left: -480px; }
.character-all-c03 { margin-top: 60px; left: -140px; z-index: 1; }
.character-all-c03-bg { margin-top: 60px; left: -160px; }
.character-all-c04 { margin-top: 80px; left: -620px; z-index: 1; }
.character-all-c04-bg { margin-top: 80px; left: -640px; }
.character-all-c05 { margin-top: -40px; left: -200px; z-index: 1; }
.character-all-c05-bg { margin-top: -40px; left: -220px; }
.character-all-c06 { margin-top: 60px; left: -180px; z-index: 1; }
.character-all-c06-bg { margin-top: 60px; left: -200px; }
.character-all-c07 { margin-top: 0px; left: 100px; z-index: 1; }
.character-all-c07-bg { margin-top: 0px; left: 80px; }
.character-all-c08 { margin-top: 60px; left: 180px; z-index: 1; }
.character-all-c08-bg { margin-top: 60px; left: 160px; }
.character-all-c09 { margin-top: 80px; left: -150px; z-index: 1; }
.character-all-c09-bg { margin-top: 80px; left: -170px; }
.character-all-c10 { margin-top: -120px; left: -180px; z-index: 1; }
.character-all-c10-bg { margin-top: -120px; left: -200px; }
.character-all-c11 { margin-top: 80px; left: -80px; z-index: 1; }
.character-all-c11-bg { margin-top: 80px; left: -100px; }
.character-all-c12 { margin-top: 80px; left: -200px; z-index: 1; }
.character-all-c12-bg { margin-top: 80px; left: -220px; }
.character-all-c13 { margin-top: 80px; left: 0; z-index: 1; }
.character-all-c13-bg { margin-top: 80px; left: -20px; }
.character-all-c14 { margin-top: 40px; left: 160px; z-index: 1; }
.character-all-c14-bg { margin-top: 40px; left: 140px; }
.character-all-c15 { margin-top: 70px; left: 160px; z-index: 1; }
.character-all-c15-bg { margin-top: 70px; left: 140px; }
.character-all-c16 { margin-top: 70px; left: 230px; z-index: 1; }
.character-all-c16-bg { margin-top: 70px; left: 210px; }
.character-all-c17 { margin-top: 80px; left: -40px; z-index: 1; }
.character-all-c17-bg { margin-top: 80px; left: -60px; }
.character-all-c18 { margin-top: 20px; left: -160px; z-index: 1; }
.character-all-c18-bg { margin-top: 20px; left: -180px; }
.character-all-c19 { margin-top: -100px; left: -600px; z-index: 1; }
.character-all-c19-bg { margin-top: -100px; left: -620px; }
.character-all-c20 { margin-top: 20px; left: -380px; z-index: 1; }
.character-all-c20-bg { margin-top: 20px; left: -400px; }
.character-all-c21 { margin-top: 0px; left: -100px; z-index: 1; }
.character-all-c21-bg { margin-top: 0px; left: -120px; }
.character-all-c22 { margin-top: 70px; left: 140px; z-index: 1; }
.character-all-c22-bg { margin-top: 70px; left: 120px; }
.character-all-c23 { margin-top: 70px; left: 120px; z-index: 1; }
.character-all-c23-bg { margin-top: 70px; left: 100px; }
.character-all-c24 { margin-top: 40px; left: -160px; z-index: 1; }
.character-all-c24-bg { margin-top: 40px; left: -180px; }
.character-all-c25 { margin-top: -140px; left: -170px; z-index: 1; }
.character-all-c25-bg { margin-top: -140px; left: -190px; }
.character-all-c26 { margin-top: -340px; left: -120px; z-index: 1; }
.character-all-c26-bg { margin-top: -340px; left: -140px; }
.character-all-c27 { margin-top: 40px; left: 70px; z-index: 1; }
.character-all-c27-bg { margin-top: 40px; left: 50px; }
.character-all-c91 { margin-top: 0px; left: -20px; z-index: 1; }
.character-all-c91-bg { margin-top: 0px; left: -40px; }
.character-all-c92 { margin-top: 0px; left: -20px; z-index: 1; }
.character-all-c92-bg { margin-top: 0px; left: -40px; }
.character-all-c93 { margin-top: -60px; left: -20px; z-index: 1; }
.character-all-c93-bg { margin-top: -60px; left: -40px; }

body.c01 #wrapper { background: url(../img/characters/common/bg-san.jpg); }
body.c02 #wrapper { background: url(../img/characters/common/bg-tou.jpg); }
body.c03 #wrapper { background: url(../img/characters/common/bg-ato.jpg); }
body.c04 #wrapper { background: url(../img/characters/common/bg-sen.jpg); }
body.c05 #wrapper { background: url(../img/characters/common/bg-nin.jpg); }
body.c06 #wrapper { background: url(../img/characters/common/bg-har.jpg); }
body.c07 #wrapper { background: url(../img/characters/common/bg-doa.jpg); }
body.c08 #wrapper { background: url(../img/characters/common/bg-kag.jpg); }
body.c09 #wrapper { background: url(../img/characters/common/bg-ato.jpg); }
body.c10 #wrapper { background: url(../img/characters/common/bg-sen.jpg); }
body.c11 #wrapper { background: url(../img/characters/common/bg-san.jpg); }
body.c12 #wrapper { background: url(../img/characters/common/bg-tou.jpg); }
body.c13 #wrapper { background: url(../img/characters/common/bg-har.jpg); }
body.c14 #wrapper { background: url(../img/characters/common/bg-o01.jpg); }
body.c15 #wrapper { background: url(../img/characters/common/bg-doa.jpg); }
body.c16 #wrapper { background: url(../img/characters/common/bg-doa.jpg); }
body.c17 #wrapper { background: url(../img/characters/common/bg-rio.jpg); }
body.c18 #wrapper { background: url(../img/characters/common/bg-san.jpg); }
body.c19 #wrapper { background: url(../img/characters/common/bg-san.jpg); }
body.c20 #wrapper { background: url(../img/characters/common/bg-sen.jpg); }
body.c21 #wrapper { background: url(../img/characters/common/bg-nya.jpg); }
body.c22 #wrapper { background: url(../img/characters/common/bg-kag.jpg); }
body.c23 #wrapper { background: url(../img/characters/common/bg-tou.jpg); }
body.c24 #wrapper { background: url(../img/characters/common/bg-nin.jpg); }
body.c25 #wrapper { background: url(../img/characters/common/bg-yor.jpg); }
body.c26 #wrapper { background: url(../img/characters/common/bg-yor.jpg); }
body.c27 #wrapper { background: url(../img/characters/common/bg-nio.jpg); }
body.c91 #wrapper { background: url(../img/characters/common/bg-o02.jpg); }
body.c92 #wrapper { background: url(../img/characters/common/bg-o02.jpg); }
body.c93 #wrapper { background: url(../img/characters/common/bg-o02.jpg); }



.character-sub { position: absolute; margin-left: -100px; margin-top: -240px; }
.character-text-wrap { color: #fff; text-align: left; position: absolute; top: 300px; left: 50%; margin-left: -20px; z-index: 1; background: #c00; width: 580px; padding: 20px; box-shadow: 10px 10px 0px rgba(0,0,0,0.3); border:#ff5 solid 1px; }

.character-name { position: absolute; margin: -170px 0 0 -130px; }
.character-cv { font-weight: bold; height: 60px; font-size: 24px; margin-bottom: 20px; display: inline-block; width: 49%; position: relative; }
.character-cv img { width: 60px; display: inline-block; float: left; margin-right: 10px; }
.character-cv-name { display: inline-block; float: left; }
.character-cv span { font-size: 12px; }
.character-cv a { display: block; font-size: 12px; color: #c00; background: #ff5; height: 20px; line-height: 20px; border-radius: 10px; text-align: center; }
.character-cv a:hover { opacity: 0.8; }
.character-from { display: inline-block; font-size: 16px; font-weight: 800; width: 49%; text-align: right; position: relative; float: right; }
.character-from img { width: 200px; position: absolute; margin-top: -160px; right: -20px; }
.character-text { margin-bottom: 20px; }


.character-gal { display: flex; justify-content: space-between; background: #900; padding: 10px;}


.character-ss { background: #c00; display: block; }
.character-ss a { display: block; position: relative; }
.character-ss a:hover { opacity: 0.8; }
.character-ss a img { width: 240px; height: 135px; display: block; }

.character-mov { background: #c00; display: block; }
.character-mov a { display: block; position: relative; }
.character-mov a:before { content: ''; background: url(../img/characters/common/mov-hover.png); width: 240px; height: 135px; position: absolute; left: 0; }
.character-mov a:after { display: block; position: absolute; right: -20px; top: -20px; height: 40px; width: 40px; content: ""; background: url(../img/common/cbox.png) no-repeat; }
.character-mov a:hover { opacity: 0.8; }
.character-mov a img { width: 240px; height: 135px; display: block; }

.character-skill-ttl { position: relative; margin: 10px 0 -10px -50px; }
.character-skill-box { background: #900; padding: 10px; font-size: 14px; }
.character-skill-box:after { content: ""; display: block; clear: both; }
a.character-skill-box-img { position: relative; display: block; margin-left: 10px; }
a.character-skill-box-img:hover { opacity: 0.8; }


.character-skill-name { display: block; font-size: 24px; font-weight: 800; color: #ff5; }



.character-allow { position: fixed; top: 50%; z-index: 10; width: 100%; }
.allow-l { position: absolute; display: block; background: url(../img/common/allow-L.png) no-repeat; width: 50px; height: 50px; }
.allow-r { position: absolute; display: block; background: url(../img/common/allow-R.png) no-repeat; width: 50px; height: 50px; left: 1150px; }


.character-text-pick { background: #c00; width: 280px; padding: 10px 20px 20px; position: absolute; z-index: 2; top: 600px; left: 50px; box-shadow: 10px 10px 0px rgba(0,0,0,0.3); border:#ff5 solid 1px; font-size: 14px; }

.c21 .character-text-pick { top: 640px; left: 100px; }
.c14 .character-text-pick { top: 640px; }
.c02 .character-text-pick { top: 500px; }
.c25 .character-text-pick { top: 500px; }

.character-text-pick-ttl { position: absolute; margin-top: -89px; width: 240px; }
a.character-text-pick-img { position: relative; display: block; margin-top: 8px; }
a.character-text-pick-img:hover { opacity: 0.8; }
a.character-text-pick-link { margin-top: 8px; font-weight: 800; display: block; font-size: 12px; color: #c00; background: #ff5; height: 20px; line-height: 20px; border-radius: 10px; width: 100%; text-align: center; }
a.character-text-pick-link:hover { opacity: 0.8; }


.content-bg { height: 100%; width: 100%; position: absolute; background: url(../img/top/chara-bg.png) top center no-repeat; background-size: 100%; z-index: 2; background-position: 0 500px; }
body#character #content:before { content: ''; position: absolute; z-index: 1; width: 100%; height: 400px; background: #ff5; left: 0; top: 800px; transform: skewY(-3deg); min-width: 1200px; }
body#character #content:after { content: ''; position: absolute; z-index: 1; width: 100%; height: 100%; background: #c00; left: 0; top: 820px; transform: skewY(-2deg); min-width: 1200px; }


/* ==========================================================================
   CV_msg
============================================================================= */

#characters_msg { min-width: auto; background: #cc0000; color: #fff; }
#characters_msg #wrapper { text-align: left; box-sizing: border-box; border: #c00 solid 3px; }
#characters_msg #base_cast{ width:100%; position:relative; padding:10px 0 40px; box-sizing: border-box; border: #ff0 solid 3px; }
#characters_msg #base_cast .cvmsg_base_inner{ position:relative; z-index:20; width:92%; padding:3% 0; margin:0 auto 0; }
#characters_msg .cvmsg_stil{ display:block; width:130px; float:left; }
#characters_msg #base_cast .cvmsg_text{ font-size:15px; line-height:1.6; }
#characters_msg h4{ font-weight:800; font-size:18px; color:#ffc; display:block; margin-top:10px; margin-bottom:5px; }
#characters_msg .cvmsg_head{ position:relative; margin-bottom:20px; border-bottom:1px solid #ff0; padding:0 0 20px; }
#characters_msg .cvmsg_name{ display:block; margin-left:20px; margin-top:24px; position:relative; float:left; }
#characters_msg .cvmsg_name .cvmsg_tit{ font-size:12px; display:block; margin-bottom:7px; line-height:1.5; }
#characters_msg .cvmsg_name .cvmsg_tit span{ font-size:20px; font-weight:800; display:block; margin-bottom:0px; }
#characters_msg .cvmsg_name .cvmsg_cont{ font-size:35px; font-weight:800; display:block; line-height: 1; }
#characters_msg .cvmsg_btn_img{ width:170px; margin:15px -3px 0 0; }
#characters_msg .cvmsg_btn_img img{ width:100% }


/* ==========================================================================
   System
============================================================================= */
body#system #wrapper { background: url(../img/system/img01.jpg) center top no-repeat #c00; background-size: 100%; }

.system-section-wrapper { margin-bottom: 100px; }

/*.system-section-wrapper:before {
  content: '';
  position: absolute;
  z-index: 1001;
  width: 100%;
  height: 400px;
  background: #ff5;
  left: 0;
  top: 460px;
  transform: skewY(-3deg);
  min-width: 1200px;
}
.system-section-wrapper:after {
  content: '';
  position: absolute;
  z-index: 1001;
  width: 100%;
  height: 500px;
  background: #c00;
  left: 0;
  top: 472px;
  transform: skewY(-2deg);
  min-width: 1200px;
}*/

.system-section { min-height: 1200px; margin: 0 auto; position: relative; z-index: 1020; }
.system-section .system-section-inner { opacity: 0; }

.system-menu-wrap { margin: 0 auto 60px; text-align: center; width: 1200px; }
.system-menu { width: 480px; height: 58px; display: inline-block; margin-bottom: 10px; }
.system-menu01 { background: url(../img/system/menu01.png) no-repeat; margin-left: 0px; }
.system-menu02 { background: url(../img/system/menu02.png) no-repeat; margin-left: -20px; }
.system-menu03 { background: url(../img/system/menu03.png) no-repeat; margin-left: 0px; }
/*.system-menu04 { background: url(../img/system/menu04-off.png) no-repeat; margin-left: -20px; }*/
.system-menu-wrap a:hover { opacity: 0.8; }

.system-ttl { position: relative; z-index: 1; margin-left: -40px; }

.system-sub { position: relative;  z-index: 1; pointer-events: none; }
.system-sub2 { position: relative; z-index: 1; pointer-events: none; margin-left: -20px; margin-bottom: 10px; }

.system-cont-maintext { text-align: left; font-size: 18px; margin: 10px auto; }

/*#system-cont-wrap02 .top-system-wrapper { transform: skewY(-6deg); }
#system-cont-wrap02 .top-system-wrapper-inner { transform: skewY(1deg); }
#system-cont-wrap02 .top-system-wrapper-content { transform: skewY(5deg); }*/



body#system #system-cont-wrap03 .top-system-wrapper-content { padding-bottom: 0; }
body#system .top-system-wrapper { margin-bottom: -100px; }
body#system .ttl-wrapper { min-height: 330px; }
body#system .flex-caption { text-align: left; padding: 10px; }
body#system .flexslider { max-width: 1000px; margin: 0 auto 45px; background: #900; border-color: #900; border-width: 20px; }
body#system .top-system-wrapper-content { padding: 0 0 100px; }
body#system .top-system-section-ttl { color: #ff5; }

/* ==========================================================================
   Product
============================================================================= */
 body#product #wrapper { background: url(/stars/img/bg08.jpg) center center no-repeat fixed; background-size: cover; }

.product-section-wrapper { width:1200px; margin: 0 auto; position: relative; }

.product-section { min-height: 1200px; text-align: center; }
.product-section .product-section-inner { padding-top: 50px; }

#product .ttl { text-align: center; margin-top: 120px; }

.product-ttl { position: absolute; left: 20px; z-index: 1; margin-top: -100px; margin-left: -20px; pointer-events : none; }

.product-cont-wrap {  }
.product-cont-border { border: #c00 solid 5px; background: #cc0000; width: 1000px; margin: 50px auto 200px; box-shadow: 10px 10px 0 rgba(0,0,0,0.3);}
.product-cont { padding: 80px 50px 30px; color: #fff; border: #fe9 solid 3px; }
.product-cont-inner {  }
.product-cont-inner .cbox:before { display: none; }


.product-cont-text { text-align: left; }
.product-cont-text-line {  }
.product-cont-text-line span { width: 160px; display: inline-block; font-weight: 800; }
.product-cont-left { float: left; }
.product-cont-right { float: right; }
.product-cont-text-item { display: block; font-weight: 800; margin-bottom: 20px; width: 100%; }

.product-cont-text-item-list { width: 70%; display: inline-block; float: left; font-size: 130%; }
.product-cont-yukemuri { border-radius: 4px; text-align: center; padding: 10px 0; display: inline-block; width: 28%; color: #ff5; float: right; }
.product-cont-yukemuri a { display: block; }
.product-cont-yukemuri img { width: 100%; }



.product-cont-three { width: 31%; display: inline-block; margin-right: 2.5%; margin-bottom: 30px; text-align: left; }
.product-cont-three:nth-child(3n) { margin-right: 0; }
a.product-cont-tenpo-link,.product-cont-tenpo-link { color: #ff5; font-weight: 800; text-decoration: none; text-align: left; display: block; }
a.product-cont-tenpo-link:hover { opacity: 0.8; }
a.product-cont-tenpo-link img,.product-cont-tenpo-link img { width: 100%; }
a.product-cont-tenpo-link span,.product-cont-tenpo-link span { font-size: 80%; font-weight: 100; display: block; line-height: 1.2; }
#product-cont-wrap04 a.product-cont-tenpo-link p { font-size: 130%; }
#product-cont-wrap05 .product-cont-tenpo-link span { font-size: 60%; }

.product-cont-tenpo-store { background: #fff; border-radius: 4px; padding: 2% 5% 5%; color: #000; min-height: 100px; margin-top: 5px; }
.product-cont-tenpo-store p { font-size: 80%; }
.product-cont-tenpo-store .product-btn a { width: 100%; }
.product-cont-tenpo-store-icon { background: #c00; color: #fff; border-radius: 20px; font-size: 60%; line-height: 1; padding: 5px; }

.product-cont-syokai-link01 { position: absolute; width: 350px; height: 500px; margin-left: 600px; }
.product-cont-syokai-text { text-align: left; font-size: 12px; margin-top: 10px; text-shadow: 0px 0px 3px #000; }


.product-btn a { margin-top: 10px; position: relative; text-decoration: none; display: block; text-align: center; background: #ff5; width: 200px; height: 48px; line-height: 48px; color: #c00; border-radius: 4px; font-weight: 800; transition: none; box-shadow: 0 3px 0 #ed6; }
.product-btn a:hover { top: -4px; box-shadow: 0 7px 0 #ed6; }
.product-btn a:active { top: 3px; box-shadow: none; }
.product-btn .cbox:before { display: none; }

#product-cont-wrap03 .product-cont { padding: 0; }
#product-cont-wrap03 .product-cont img { width: 100%; }
#product-cont-wrap03 p { position: absolute; }
#product-cont-wrap04 .product-cont-inner { text-align: left; }
#product-cont-wrap05 .product-cont-inner { text-align: left; }
#product-cont-wrap06 .product-cont-inner { text-align: left; }
#product-cont-wrap03 .product-cont-syokai-text { position: absolute; width: 500px; height: 70px; text-align: left; font-size: 12px; margin-top: -70px; margin-left: 10px; text-shadow: 0px 0px 3px #000; }


#product-cont-wrap01 .product-btn a,#product-cont-wrap02 .product-btn a { margin: 0; }

/* ==========================================================================
   DLC
============================================================================= */
body#dlc #wrapper { background: url(../img/bg06.jpg) center top no-repeat; background-size: 100%; }
body#dlc #content {}

.dlc-section-wrapper {
	background: #c00;
}

#dlc .ttl-wrapper {
	text-align: center;
}

#dlc .ttl-wrapper img {
	margin-top: 80px;
}

.dlc-section-wrapper:before {
  content: '';
  position: absolute;
  z-index: 1001;
  width: 100%;
  height: 400px;
  background: #ff5;
  left: 0;
  top: 460px;
  transform: skewY(-3deg);
  min-width: 1200px;
}
.dlc-section-wrapper:after {
  content: '';
  position: absolute;
  z-index: 1001;
  width: 100%;
  height: 500px;
  background: #c00;
  left: 0;
  top: 472px;
  transform: skewY(-2deg);
  min-width: 1200px;
}

.dlc-section {
	text-align: center;
	padding: 0 0 100px;
	min-height: 800px;
	margin: 0 auto;
	width: 1180px;
}

.dlc-section-inner {_}
.dlc-section-content {
	position: relative;
	z-index: 1002;
	padding-bottom: 50px;
}


.dlc-section-menu {
	width: 20%;
	float: left;
	margin-right: 4%;
}

.dlc-section-menu-ttl {
	text-align: center;
	color: #fff;
	font-size: 18px;
	font-weight: bold;
	line-height: 50px;
	border-radius: 4px;
}

.dlc-section-menu-topic a {
	display: block;
	background: #600;
	line-height: 30px;
	border-radius: 15px;
	margin-bottom: 20px;
	color: #fff;
}

.dlc-section-menu-topic a:hover {
	opacity: 0.8;
}

.dlc-section-menu-list {
	border-bottom: #900 solid 1px;
	text-align: center;
	font-size: 18px;
	font-weight: bold;
	line-height: 50px;
}

.dlc-section-menu-list a {
	display: block;
	border-radius: 4px;
	margin: 10px 0;
}
.dlc-section-menu-list a:hover,.dlc-section-menu-list a.current {
	background: #900;
	display: block;
	border-radius: 4px;
	margin: 10px 0;
}



.dlc-section-cont {
	width: 70%;
	float: left;
	border-left: #900 solid 1px;
	padding-left: 4%;
	background: #c00;
}
.dlc-section-cont-section {
	padding-bottom: 50px;
	border-bottom: #900 solid 1px;
	margin-bottom:  50px;
}


.dlc-section-cont-border {
	padding: 20px;
	background: #900;
	margin-top: 10px;
}

.dlc-section-cont-border img {
	width: 100%;
}

.dlc-section-cont-table {
	width: 100%;
}
.dlc-section-cont-table th {
	padding: 10px 20px;
	border-bottom: #f33 solid 1px;
}
.dlc-section-cont-table td {
	padding: 10px 20px;
	border-bottom: #f33 solid 1px;
}

.dlc-section-cont-head {
	text-align: left;
	border-bottom: #ff5 solid 1px;
	margin-bottom: 30px;
}


.dlc-section-cont-date {
	display: inline-block;
	text-align: left;
	background: #ff5;
	border-radius: 15px;
	line-height: 30px;
	color: #c00;
	font-weight: bold;
	padding: 0 10px;
	margin-bottom: 5px;
}

.dlc-section-cont-title {
	display: block;
	font-size: 30px;
	font-weight: bold;
	line-height: 50px;
	color: #ff5;
}

.dlc-section-cont-cost {
	background: #000;
	padding: 10px 20px;
	border: #fff solid 1px;
	display: inline-block;
	font-size: 18px;
	line-height: 20px;
	float: right;
	color: #fff;
}

.dlc-section-cont-text {
	text-align: left;
	display: block;
}

.dlc-section-cont-text h3,h4,h5 {
	color: #ff5;
}

.dlc-section-cont-attend {
	font-size: 12px;
}

.dlc-new { position: absolute; width: 120px; height: 40px; z-index: 10; margin: -20px 0 0 -20px; }
.dlc-new img { width: 120px; height: 40px; z-index: 1; left: 0; }



/* ==========================================================================
   update
============================================================================= */


body#update #wrapper { background: url(../img/bg06.jpg) center top no-repeat; background-size: 100%; }
body#update #content {}

.update-section-wrapper {
	background: #c00;
}

#update .ttl-wrapper {
	text-align: center;
}

#update .ttl-wrapper img {
	margin-top: 80px;
}

.update-section-wrapper:before {
  content: '';
  position: absolute;
  z-index: 1001;
  width: 100%;
  height: 400px;
  background: #ff5;
  left: 0;
  top: 460px;
  transform: skewY(-3deg);
  min-width: 1200px;
}
.update-section-wrapper:after {
  content: '';
  position: absolute;
  z-index: 1001;
  width: 100%;
  height: 500px;
  background: #c00;
  left: 0;
  top: 472px;
  transform: skewY(-2deg);
  min-width: 1200px;
}

.update-section {
	text-align: center;
	padding: 0 0 100px;
	min-height: 800px;
	margin: 0 auto;
	width: 980px;
}

.update-section-inner {_}
.update-section-content {
	position: relative;
	z-index: 1002;
	padding-bottom: 50px;
}



.update-section-cont {
	width: 100%;
	padding-left: 4%;
	background: #c00;
}
.update-section-cont-section {
	padding-bottom: 50px;
	border-bottom: #900 solid 1px;
	margin-bottom:  50px;
}


.update-section-cont-border {
	padding: 20px;
	background: #900;
	margin-top: 10px;
}

.update-section-cont-border img {
	width: 100%;
}

.update-section-cont-table {
	width: 100%;
}
.update-section-cont-table th {
	padding: 10px 20px;
	border-bottom: #f33 solid 1px;
}
.update-section-cont-table td {
	padding: 10px 20px;
	border-bottom: #f33 solid 1px;
}

.update-section-cont-head {
	text-align: left;
	border-bottom: #ff5 solid 1px;
	margin-bottom: 30px;
}


.update-section-cont-date {
	display: inline-block;
	text-align: left;
	background: #ff5;
	border-radius: 15px;
	line-height: 30px;
	color: #c00;
	font-weight: bold;
	padding: 0 10px;
	margin-bottom: 5px;
}

.update-section-cont-title {
	display: block;
	font-size: 30px;
	font-weight: bold;
	line-height: 50px;
	color: #ff5;
}

.update-section-cont-text {
	text-align: left;
	display: block;
}

.update-section-cont-text h3,h4,h5 {
	color: #fff;
}

.update-section-cont-attend {
	font-size: 12px;
}

/* ==========================================================================
   steam
============================================================================= */


body#steam #wrapper { background: url(../img/bg06.jpg) center top no-repeat; background-size: 100%; }
body#steam #content {}

.steam-section-wrapper {
	background: #c00;
}

#steam .ttl-wrapper {
	text-align: center;
}

#steam .ttl-wrapper img {
	margin-top: 80px;
}

.steam-section-wrapper:before {
  content: '';
  position: absolute;
  z-index: 1001;
  width: 100%;
  height: 400px;
  background: #ff5;
  left: 0;
  top: 460px;
  transform: skewY(-3deg);
  min-width: 1200px;
}
.steam-section-wrapper:after {
  content: '';
  position: absolute;
  z-index: 1001;
  width: 100%;
  height: 500px;
  background: #c00;
  left: 0;
  top: 472px;
  transform: skewY(-2deg);
  min-width: 1200px;
}

.steam-section {
	text-align: center;
	padding: 0 0 100px;
	min-height: 800px;
	margin: 0 auto;
}

.steam-section-inner {
	width: 100%;
	background: url(../img/steam/steam-main.png) top center no-repeat;
	position: relative;
	min-height: 800px;
	z-index: 9999;
}
.steam-section-content {
	position: relative;
	z-index: 1002;
	padding-bottom: 50px;
	padding-top: 600px;
	width: 980px;
	margin: 0 auto;
}



.steam-section-cont {
	width: 100%;
	padding-left: 4%;
	background: #c00;
}
.steam-section-cont-section {
	margin: 50px 0;
}


.steam-section-cont-border {
	padding: 20px;
	background: #900;
	margin-top: 10px;
}

.steam-section-cont-border img {
	width: 100%;
}

.steam-section-cont-table {
	width: 100%;
}
.steam-section-cont-table th {
	padding: 10px 20px;
	border-bottom: #f33 solid 1px;
}
.steam-section-cont-table td {
	padding: 10px 20px;
	border-bottom: #f33 solid 1px;
}

.steam-section-cont-head {
	text-align: left;
	border-bottom: #ff5 solid 1px;
	margin-bottom: 30px;
}


.steam-section-cont-date {
	display: inline-block;
	text-align: left;
	background: #ff5;
	border-radius: 15px;
	line-height: 30px;
	color: #c00;
	font-weight: bold;
	padding: 0 10px;
	margin-bottom: 5px;
}

.steam-section-cont-title {
	display: block;
	font-size: 30px;
	font-weight: bold;
	line-height: 50px;
	color: #ff5;
}

.steam-section-cont-text {
	text-align: left;
	display: block;
}

.steam-section-cont-text h3,h4,h5 {
	color: #fff;
}

.steam-section-cont-attend {
	font-size: 12px;
}


.steam-contents-section {
	width: 100%;
	margin: 0 auto 60px 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}


.steam-contents-section:nth-child(2n+1) {
	flex-direction:row-reverse;
}

.steam-contents-section-text-wrapper {
	width: 48%;
}


.steam-contents-section-ttl {
	font-size: 26px;
	line-height: 1.2;
	font-weight: 800;
	padding-bottom: 10px;
	color: #ff5;
}

.steam-contents-section-text {
}
.steam-section-cont-border ul {
	list-style: none;
}
.steam-section-cont-border table {
	border-collapse: collapse;
	width: 100%;

}
.steam-section-cont-border table th,.steam-section-cont-border table td {
	padding: 1% 2%;
	border: 1px solid #fff;
}

.steam-section-cont-border table tbody th {
	width: 20%;
}

.steam-contents-section-text span {
	color: #ff5;
}

.steam-contents-section-pics-wrapper {
	width: 48%;
}

.steam-contents-section-pics {
	background: #900;
	transform: skewY(3deg);
}

.steam-contents-section-pics a {
	display: block;
	transform: skewY(-3deg);
	margin: 10px;
	width: 95%;
	margin: 0 auto;
}

.steam-contents-section-pics a img {
	width: 100%;
}

.steam-logo {
	width: 20%;
	display: inline-block;
	float: left;
	margin-right: 3%;
	padding-top: 20px;
}

.steam-btn {
	width: 34%;
	display: inline-block;
	float: right;
	border-left: 1px solid #fff;
	text-align: center;
	height: 30px;
}

.steam-btn .common-btn {
	width: 100%;
	margin: 0 auto;
	vertical-align: middle;
}

.steam-btn .common-btn a {
	width: 240px;
	margin: 0 auto;
	font-size: 14px;
	line-height: 22px;
	height: 22px;
}

.steam-text {
	padding-top: 20px;
	width: 40%;
	display: inline-block;
	float: left;
	text-align: left;
	line-height: 1.3;
	height: 90px;
	font-size: 90%;
}











/* ==========================================================================
   Gallery
============================================================================= */
body#gallery #wrapper { background: url(../img/bg07.jpg) center top no-repeat; background-size: 100%; }
body#gallery #content {}

.gallery-section-wrapper {
	background: #c00;
}


.gallery-section {
	text-align: center;
	padding: 0 0 100px;
	min-height: 800px;
	margin: 0 auto;
	width: 1180px;
}

.gallery-section-inner {}
.gallery-section-content {
	position: relative;
	z-index: 1002;
}
.gallery-section-content-box-ttl {
	color: #fff;
	font-size: 20px;
	font-weight: bold;
	text-align: left;
	border-bottom: #fff solid 1px;
	margin-bottom: 40px;
}

.gallery-section-content-box {
	margin-bottom: 40px;
}

.gallery-section-content-box-flex {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}




.gallery-section-wrapper:before {
  content: '';
  position: absolute;
  z-index: 1001;
  width: 100%;
  height: 400px;
  background: #ff5;
  left: 0;
  top: 460px;
  transform: skewY(-3deg);
  min-width: 1200px;
}
.gallery-section-wrapper:after {
  content: '';
  position: absolute;
  z-index: 1001;
  width: 100%;
  height: 500px;
  background: #c00;
  left: 0;
  top: 472px;
  transform: skewY(-2deg);
  min-width: 1200px;
}




.gallery-section ul { }
.gallery-section ul li { margin-bottom: 10px; margin-left: 10px; }
.gallery-section ul li { width: 230px; display: inline-block; padding: 10px; background: #fff; transition: box-shadow 0.4s; }
.gallery-section ul li:hover { box-shadow: inset 0 0 0 5px #cc0000; background: #ffeeee; }
.gallery-section ul li a { display: block; }

.gallery-section ul li img { width: 210px; }


.gallery-movie-ttl { z-index: 1; }
.gallery-movie-cont { width: 990px; position: relative; margin: 0 auto; padding-bottom: 10px; /*width: 1100px; height: 700px; background: url(../img/gallery/movie-bg.png) no-repeat; margin: 40px auto;*/ }

.gallery-movie-cont2 { width: 370px; }
.gallery-movie-cont:before {
	content: "";
	display: block;
	background: #900;
	position: absolute;
	transform: skewY(3deg);
	width: 100%;
	height: 100%;
	z-index: -1;
}
.gallery-section-content-box-s {
	margin-left: 5px;
	margin-bottom: 40px;
}
.gallery-section-content-box-s:nth-child(2n) {
}

.gallery-movie-cover {
	background: #000;
	margin: 0 5px;
}

.gallery-movie-cover:before {
	content: "";
	background: url(../img/common/mov-cover.png) no-repeat;
	position: absolute;
	width: 100%;
	height: 100%;
	pointer-events : none;
}

.gallery-movie-cover:hover {
	opacity: 0.8;
}

.jikkyou-cont .gallery-movie-cover:before {
	display: none;
}


.gallery-movie-cont iframe { margin: 0 auto; }
.gallery-movie-text { color: #fff; }

.gallery-ss-ttl { margin: 50px auto 10px; }

.gallery-new { position: absolute; z-index: 1020; pointer-events: none; }
.gallery-new img { width: 100px; margin-top: -20px; margin-left: -20px; }


/* ==========================================================================
   Yoyaku
============================================================================= */
body#yoyaku { min-width: 100%; }
body#yoyaku #wrapper { background: url(../img/bg04.jpg) center center no-repeat fixed; background-size: cover; }
body#yoyaku #content { width: 100%; height: 100%; }

.yoyaku-ttl { margin: 10px ; }
.yoyaku-item { font-size: 30px; font-weight: bold; }
.yoyaku-img { }
a.yoyaku-link { background: #c00; border-radius: 4px; color: #fff; text-decoration: none; line-height: 30px; display: block; height: 30px; width: 480px; margin: 30px auto; }
a.yoyaku-link:hover { color: #ffa; }
a.yoyaku-link:active,a.yoyaku-link:link { color: #fff; }


.yoyaku-table { text-align: left; background: #eee; width: 90%; margin: 5px auto 30px; border-radius: 4px; }
.yoyaku-table th { border-right: #ccc solid 1px; width: 30%; padding: 10px; background: #c00; color: #fff; }

.yoyaku-table td { font-weight: bold; padding: 10px; background: #fff; }

.yoyaku-table a,.yoyaku-table a:link { color: #fff; }
.yoyaku-table a:hover,.yoyaku-table a:active { color: #ffa; }



/* ==========================================================================
   etc
============================================================================= */
.index-new { position: absolute; z-index: 11; pointer-events: none; margin-left: 20px; top: 80px; }
.index-new img { width: 100px; margin-top: 130px; }






/* ------------------------------------- audio.js ------------------------------------- */

.audiojs audio {
}
/*　プレイヤー（再生バー）　*/
.audiojs {
width: 60px;
height: 30px;
background: none;
overflow: hidden;
font-family: monospace;
font-size: 12px; 
-webkit-box-shadow: none;
-moz-box-shadow: none; 
-o-box-shadow: none;
box-shadow: none;
}
/*　再生・停止ボタン　*/
.audiojs .play-pause {
width: 28px;
height: 28px;
padding: 0;
margin: 0;
float: left;
overflow: hidden;
border: 1px solid #BDBDBD; 
border-radius: 15px;
}
/*　再生・停止ボタンなどの p 要素　*/
.audiojs p {
display: none;
width: 28px;
height: 28px;
margin: 0px;
cursor: pointer;
}
.audiojs .play {
display: block;
}
/*　進行状態・ロードの状態を表示する部分（薄いグレー）　*/
.audiojs .scrubber {
position: relative;
float: left;
width: 30px;
background: #CCC;
height: 4px;
margin: 12px 0 0 0px;
border-top: 0;
border-left: 0px;
border-bottom: 0px;
overflow: hidden;
}
/*　進行状態を表示するバーの部分(再生ボタンより少し暗い青)　*/
.audiojs .progress {
position: absolute;
top: 0px;
left: 0px;
height: 4px;
width: 0px;
background: #698D9C; 
z-index: 1; 
/* background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ccc),
color-stop(0.5, #ddd), color-stop(0.51, #ccc), color-stop(1, #ccc)); 
background-image: -moz-linear-gradient(center top, #ccc 0%, #ddd 50%, #ccc 51%, #ccc 
100%); */
}
/* ロード状態を表示するバーの部分（薄いグレー） */
.audiojs .loaded {
position: absolute;
top: 0px;
left: 0px;
height: 4px;
width: 0px;
background: #CCC; 
/* background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #222),
color-stop(0.5, #333), color-stop(0.51, #222), color-stop(1, #222));
background-image: -moz-linear-gradient(center top, #222 0%, #333 50%, #222 51%, #222
100%); */
}
/*　現在の再生時間/総再生時間　フォント　*/
.audiojs .time {
float: left;
height: 30px;
line-height: 30px;
margin: 0px 0px 0px 8px;
padding: 0px 0px 0px 0px;
border-left: none;
color: #666;
text-shadow: none;
display: none;
}
/*　現在の再生時間　フォント　*/
.audiojs .time em {
padding: 0px 2px 0px 0px;
color: #666;
font-style: normal;
display: none;
}
/*　時間　/の部分　*/
.audiojs .time strong {
padding: 0px 0px 0px 2px;
font-weight: normal;
display: none;
}
.audiojs .error-message {
float: left;
display: none;
margin: 0px 10px;
height: 28px;
width: 200px;
overflow: hidden;
line-height: 28px;
white-space: nowrap;
color: #fff; 
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
-icab-text-overflow: ellipsis;
-khtml-text-overflow: ellipsis;
-moz-text-overflow: ellipsis;
-webkit-text-overflow: ellipsis;
}
.audiojs .error-message a {
color: #eee;
text-decoration: none;
padding-bottom: 1px;
border-bottom: 1px solid #999;
white-space: wrap;
}
/*　再生ボタン　*/
.audiojs .play {
background: url(../img/common/start.png) center center no-repeat;
margin-left: 1.45px;
}
/*　読み込み中ボタン　*/
.audiojs .loading {
/*background: url("$1") center center no-repeat;*/
display: none;
}
/*　エラーボタン　*/
.audiojs .error {
/*background: url("$1") center center no-repeat;*/
display: none;
}
/*　停止ボタン　*/
.audiojs .pause {
background: url(../img/common/stop.png) center center no-repeat;
}
.playing .play, .playing .loading, .playing .error {
display: none;
}
.playing .pause {
display: block;
}
.loading .play, .loading .pause, .loading .error {
display: none;
}
.loading .loading {
display: block;
}
.error .time, .error .play, .error .pause, .error .scrubber, .error .loading {
display: none;
}
.error .error {
display: block;
}
.error .play-pause p {
cursor: auto;
}
.error .error-message {
display: block;
}
/*　再生している曲の情報　*/
.track-details {
clear: both;
height: 28px;
width: 200px;
padding: 0px 6px;
background: #FFF;
color: #3A3A3A;
font-size: 10px;
line-height: 28px;
}
.track-details:before {
content: '♬ Now Playing: ';
}

.audiojs {
	position: absolute;
	right: 0;
	z-index: 9999;
	background: #c00;
	border-radius: 23px;
	padding: 5px;
	width: 120px;
	height: 40px;
	box-sizing: border-box;
	overflow: visible !important;
}

/*.audiojs:before {
	content: "テーマBGM";
	display: block;
	left: -70px;
	position: absolute;
	font-size: 12px;
	color: #ff5;
	line-height: 30px;
}
*/

.audiojs p {
	width: 109px;
}

.audiojs .play-pause {
	background: #ff5;
	border: none;
	width: 109px;
	height: 29px;
}

.audiojs .progress {
	background: #990;
}
.audiojs .loaded {
	background: #fff;
	border-radius: 2px;
}

.scrubber {
	display: none;
}


/* --------------------------------- audio.js ここまで --------------------------------- */




/* ==========================================================================
   for SP
============================================================================= */

@media screen and (max-width: 480px) {
  body { background-color: transparent; min-width: 100%; }
  body#top #wrapper { background-image: none; width: 100%; overflow: hidden; }
  header { height: auto; position: relative; z-index: 1002; }
  #content { width:100%; overflow: hidden; }
  .date-sp { width: 30%; display: block; position: absolute; z-index: 1002; left: 70%; margin-top: -7%; }
	.pslogo-sp { width: 100%; display: block; position: relative; z-index: 1002; }

  /*----------------------------------------
    common
  ----------------------------------------*/
	header:before {
	  content: '';
	  position: absolute;
	  z-index: 1;
	  width: 100%;
	  height: 100%;
	  background: #ff5;
	  left: 0;
	  transform: skewY(-3deg);
	  top: 12px;
	  clear: both;
	}
	header:after {
	  content: '';
	  position: absolute;
	  z-index: 1;
	  width: 100%;
	  height: 100%;
	  background: #c00;
	  left: 0;
	  transform: skewY(-2deg);
	  top: 7px;
	  clear: both;
	}
  .ttl-wrapper { min-height: auto; }
	.ttl { margin-top: 10%; margin-left: 0; left: 0; width: auto; padding-bottom: 10%; }
  .ttl img { width: 100%; min-width: 300px; }
  #cboxTitle { font-size: 10px; }
	#cboxCurrent { font-size: 10px; }
  /*----------------------------------------
    menu
  ----------------------------------------*/
  #commonHeadbar {  }
  .menu-new { z-index: 1; width: 90px; height: 30px; pointer-events: none; }
  .menu-new img { width: 90px; height: 30px; }
  .menu03-new { position: absolute; left: 58%; margin-top: 20%; margin-left: 0; }
  .menu04-new { position: absolute; left: -2%; margin-top: 29%; margin-left: 0; }
  .menu05-new { position: absolute; left: 29%; margin-top: 29%; margin-left: 0; }
  .menu06-new { position: absolute; left: -2%; margin-top: 38%; margin-left: 0; }

  /*----------------------------------------
    top
  ----------------------------------------*/
  #main-content { height: auto; }
  .main { display: none; }
  .main-sp { display: block; position: relative; }
  .main-sp div { display: block; position: relative; }
  .main-sp img { width: 100%; }

	.main-sp:before {
	  content: '';
	  position: absolute;
	  z-index: 1001;
	  width: 100%;
	  height: 200px;
	  background: #ff5;
	  left: 0;
	  transform: skewY(-3deg);
	  top: 95%;
	}
	.main-sp:after {
	  content: '';
	  position: absolute;
	  z-index: 1001;
	  width: 100%;
	  height: 200px;
	  background: #c00;
	  left: 0;
	  transform: skewY(-2deg);
	  top: 96%;
	}

/*	.main-sp div:before {
	  content: '';
	  position: absolute;
	  z-index: 1001;
	  width: 100%;
	  height: 100px;
	  background: #ff5;
	  left: 0;
	  transform: skewY(-3deg);
	  top: -85px;
	}
	.main-sp div:after {
	  content: '';
	  position: absolute;
	  z-index: 1001;
	  width: 100%;
	  height: 100px;
	  background: #c00;
	  left: 0;
	  transform: skewY(-2deg);
	  top: -90px;
	}*/


  .video-wrap { background: none; height: 75%; min-width: 100%; }
	.video-wrap:before { display: none; }
  .video-wrap:after { display: none; }
  .news-wrap { width: 100%; }
  .news-inner { width: auto; }
  .news-ttl { margin-left: -60px; }
  .news { height: auto; line-height: 30px; padding: 5px 10px; background: #fff; }
  .news-more { right: 0; }
  .news-date { margin-left: 0px; width: auto; display: inline-block; float: none; background:#c00; width: 80px; text-align: center; font-size: 12px; text-align: center; color: #fff; border-radius: 4px; line-height: 18px; border-right: none; padding: 0;}
  .news-text { display: block; float: none; margin-left: 0px; width: auto; font-size: 12px; line-height: 18px; }
  .movie { top: auto; margin: 0 auto; position: relative; left: auto; width: 90%; background-size: 100%; }
  .movie img { width: 100%; }
  .under-content-inner { width:100%; padding-top: 10%; }
  .twitter-widget { width: 100%; float: none; }
  .game-spec { margin-top: 20px; float: none; height: auto; width: 100%; }
  .game-spec table,.game-spec td ,.game-spec th { font-size: 10px; }
  .game-spec th, .game-spec td { padding: 5px; }
  .game-spec-cp { padding: 10px; }
  .game-spec-cp span { font-size: 18px; line-height: 16px; display: block; }
  .game-spec-cp-text { width: 78%; margin-bottom: 0; }
  .game-spec-cp-icon { line-height: 20px; font-size: 14px; float: none; width: 100%; margin-bottom: 5px; border-bottom:#c00 solid 1px; border-right: none; }
  .icon-psstore { width: 8%; float: left; }
  .banner-area { width: 90%; padding-bottom: 0; }
  .banner-area a { width: 100%; }
  .banner-area img { width: 100%; }
  .index-new { position: relative; margin-left: 0; top: auto; left: auto; zoom: 1; }
  .index-new img { position: absolute; width: 100px; left: auto; margin-top: 86px; margin-left: -45px; }


	.top-gallery-wrapper-inner {
		width:100%;
	}
	.top-gallery-wrapper-content { width: 90%; margin: 0 auto; }
	.top-gallery-wrapper-content-ttl { zoom:0.7; margin-left: 5%; }
	.top-gallery-wrapper-content-box {  }
	.top-gallery-wrapper-content-box iframe { width: 100%; height: 100%; }
	.top-gallery-wrapper-content-box-text { font-size: 10px; margin-bottom: 0; }
	.top-gallery-wrapper-content-box:nth-child(2n) { margin-left: 2%; }
	.top-gallery-wrapper-inner .common-btn a { margin: 10px auto; }
	.top-story-bg { margin-bottom: -90px; }
	.top-story-wrapper { height: 360px; }
	.top-story-wrapper-content-ttl { zoom:0.7; }
	.top-story-wrapper-inner { background-size: 300%; width: 100%; }
	.top-story-wrapper-content { width: 90%; }
	.top-story-wrapper-content .common-btn a { margin: 0 auto; }
	.top-story-wrapper-content p { font-size: 14px; margin-bottom: 20px; }
	.top-line01-wrapper { zoom:0.5; }
	.top-character-wrapper { background: none; padding-bottom: 20%; }
	.top-character-wrapper-content-chara-wrapper { display: none; }
	.top-character-wrapper-content-chara-select-wrapper { background: none; }
	.top-character-wrapper-content { width: 90%; zoom:0.7; }
	.top-system-wrapper { padding: 10px 0; margin-bottom: 0; }
	.top-system-section { width: 100%; }
	.top-system-wrapper {  }
	.top-system-wrapper-content { width: 90%; padding: 0; }
	.top-system-wrapper-content-ttl { zoom:0.7; width: 100%; }
	.top-system-section-ttl { zoom:0.7; width: 100%; }
	.top-system-section-text { width: 100%; }
	.top-system-section-left { width: 100%; }
	.top-system-section-right { width: 100%; margin-left: 0; }
	.top-system-section-pics img { width: 93%; }
	.top-system-section-link { width: 100%; }
	.top-system-section-link .common-btn a { margin: 0 auto; }
	.top-product-wrapper-content { width: 100%; }
	.top-product-wrapper-content-box { display: block; }
	.top-product-wrapper-content-box-cont { width: 100%; border:none; height: auto; margin-top: 30px; }
	.top-product-wrapper-content-box-cont img { width: 100%; }
	.top-product-wrapper-content-box-cont-ttl { font-size: 24px; text-align: center; margin-top: 20px; }
	.top-product-wrapper-content-box-cont-text { font-size: 12px; }
	.top-product-wrapper-content-tresure-text hr { margin: 10px auto; }
	.top-product-wrapper-content-tresure { width: 90%; margin: 0 auto; }
	.top-product-wrapper-content-tresure-img  { width: 100%; }
	.top-product-wrapper-content-tresure-img img { width: 100%; }
	.top-product-wrapper-content-tresure-inner { display: block; }
	.top-product-wrapper-content-game-spec { margin: 40px 10px 10px 10px; }
	.top-product-wrapper-content-tresure-text { width: 100%; font-size: 12px; }
	.top-product-wrapper-content-tresure-text .common-btn a { margin: 10px auto; }
	.game-spec-img { width: 100%; }
	.game-spec-img { display: none; }
	.game-spec { margin-bottom: 50px; }
  /*----------------------------------------
    Story
  ----------------------------------------*/
  body#story #wrapper { background-size: auto 100%; }
  /*body#story::before { background:url(../img/bg02.jpg) no-repeat top center; background-size: auto 100%; display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; padding-bottom: 108px; content: ""; z-index: -1; }*/
  .story-section { display: none; }
  .story-section-sp { position: relative; z-index: 1002; min-height: 800px; font-weight: bold; font-size: 17px; padding: 50px 0 100px; margin: 0 auto; display: block; width: 90%; color: #fff; text-shadow: 1px 0px 2px rgba(0, 0, 0, 1),1px 1px 2px rgba(0, 0, 0, 1),0px 1px 2px rgba(0, 0, 0, 1),0px 0px 2px rgba(0, 0, 0, 1),-1px 0px 2px rgba(0, 0, 0, 1),-1px -1px 2px rgba(0, 0, 0, 1),0px 0px 2px rgba(0, 0, 0, 1); }
	.story-section-wrapper { position: relative; background: url(../img/story/story-image.png); background-size: 100% 0; }
	.story-section-wrapper:before { display: none; }
	.story-section-wrapper:after { display: none; }
  /*----------------------------------------
    Outline
  ----------------------------------------*/
  body#outline #wrapper { background:none; }
  body#outline::before { background:url(../img/bg03.jpg) no-repeat top center; background-size: auto 100%; display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; padding-bottom: 108px; content: ""; z-index: -1; }
  .outline-section { width: 100%; padding-bottom: 100px; }
  .outline-section section { width: 100%; }
  .outline-section-img-sp { display: block; width: 100%; }
  section.outline-section-p1,section.outline-section-p2,section.outline-section-p3 { background:none; height: auto; }
  .outline-section-img-sp img { width: 100%; }
  .outline-section-p1-inner ,.outline-section-p2-inner,.outline-section-p3-inner { background: #fff; width: 100%; left: auto; top: auto; font-size: 12px; padding: 20px; color: #300; text-shadow:none; border-bottom: rgba(0, 0, 0, 0.3) solid 6px; background-clip: padding-box; } .outline-section-p1-inner img { width: 100%; }
  .outline-section .flexslider { margin-bottom: 40px; }

  /*----------------------------------------
    Characters
  ----------------------------------------*/
  body#characters #wrapper { background:none; }
  body#characters::before { background:url(../img/bg04.jpg) no-repeat top center; background-size: auto 100%; display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; padding-bottom: 108px; content: ""; z-index: -1; }
  .character-wrapper { width: auto; }
  .characters-section { width: 100%; min-height: auto; padding-bottom: 50px; margin-left: 5%; padding-top: 5%; }
  .characters-section a { z-index: 0; }
  .characters-c { position: relative; width: 40%; display:inline-block; margin-left: -10%; margin-top: -10%; }
  .characters-c img { width: 100%;}
  .characters-c01 { top: auto; left: auto; }
  .characters-c02 { top: auto; left: auto; }
  .characters-c03 { top: auto; left: auto; }
  .characters-c04 { top: auto; left: auto; }
  .characters-c05 { top: auto; left: auto; }
  .characters-c06 { top: auto; left: auto; }
  .characters-c07 { top: auto; left: auto; }
  .characters-c08 { top: auto; left: auto; }
  .characters-c09 { top: auto; left: auto; }
  .characters-c10 { top: auto; left: auto; }
  .characters-c11 { top: auto; left: auto; }
  .characters-c12 { top: auto; left: auto; }
  .characters-c13 { top: auto; left: auto; }
  .characters-c14 { top: auto; left: auto; }
  .characters-c15 { top: auto; left: auto; }
  .characters-c16 { top: auto; left: auto; }
  .characters-c17 { top: auto; left: auto; }
  .characters-c18 { top: auto; left: auto; }
  .characters-c19 { top: auto; left: auto; }
  .characters-c20 { top: auto; left: auto; }
  .characters-c21 { top: auto; left: auto; }
  .characters-c22 { top: auto; left: auto; }
  .characters-c23 { top: auto; left: auto; }
  .characters-c24 { top: auto; left: auto; }
  .characters-c25 { top: auto; left: auto; }
  .characters-c26 { top: auto; left: auto; }
  .characters-c27 { top: auto; left: auto; }
  .characters-c91 { top: auto; left: auto; }
  .characters-c92 { top: auto; left: auto; }
  .characters-c93 { top: auto; left: auto; }
  .characters-section-img01 { position: relative; width: 100%; padding-bottom: 20px; left: auto; top: auto; }
  .characters-section-img01 img { width: 100%; }

  .chara-new { margin: -58% 0 0 20%; width: 60px; height: 20px; z-index: 10; pointer-events : none; }
  .chara-new img {  width: 100%; height: 100%; margin: 0; }

	.jikkyou-btn { position: relative; right: 0; left: auto; margin-left: 50%; margin-top: -20%; margin-bottom: 10%; width: 50%; }
	.jikkyou-btn img { width: 100%; }

  /*----------------------------------------
    Character
  ----------------------------------------*/
  body#character #wrapper { background-size: 200%; background-repeat: no-repeat; background-position: 0 4%; }
  body#character #content:before { top: 20%; }
  body#character #content:after { top: 20.5%; }
  .character-wrapper {  }
  .content-bg { background-size: 200%; background-position: 0 10%; }


  .character-all { height: auto; }
  .character-text-wrap { position: relative;  width: 94%; top: 0; left: 3%; margin-left: 0; margin-top: 0; margin-bottom: 40px; padding: 3%; }
  .character-text-pic { }
  .character-sub { position: absolute; margin: -48% 0 0 -4%; }
  .character-sub img { width: 80%; }
  .character-name { position: absolute; margin: -36% 0 0 -24%;  }
  .character-name img { width: 100%; }
  .character-cv { width: 60%; font-size: 18px; }
  .character-text {  }
  .character-gal { zoom:0.6; }
  .character-skill-box img { width: 50%; }
  .character-skill-name { font-size: 18px; }
  .character-from { position: relative; width: 40%; margin-top: 0; font-size: 10px; }
  .character-from img { display: none; }
  .allow-r { left: 100%; margin-left: -50px; }
  .character-ss { }

	.character-text-pick { position: relative; top: 0; width: 94%; left: 3%; margin-bottom: 50px; }
	.character-text-pick a { text-align: center; width: 240px; margin: 8px auto 0; }
	.character-text-wrap {  }
	a.character-text-pick-link { width: 100%; height: 30px; line-height: 30px; }

	.c21 .character-text-pick { top: 0; left: 3%; }
	.c14 .character-text-pick { top: 0; }
	.c02 .character-text-pick { top: 0; }
	.c25 .character-text-pick { top: 0; }


  .character-all-c img { width: 80%; }

  .character-all-c01 { position: relative; width: 180%; margin: -30% 0 -70% 0; top: 0; left: -5%; }
  .character-all-c01-bg { width: 180%; margin: 0 0 0 -10px; top: 0; left: -5%; }

  .character-all-c02 { position: relative; width: 260%; margin: -6% 0 0 0; top: 0; left: -90%; }
  .character-all-c02-bg { width: 260%; margin: 0 0 0 -10px; top: 0; left: -90%; }

  .character-all-c03 { position: relative; width: 180%; margin: 8% 0 -50% 0; top: 0; left: -20%; }
  .character-all-c03-bg { width: 180%; margin: 0 0 0 -10px; top: 0; left: -20%; }

  .character-all-c04 { position: relative; width: 240%; margin: 4% 0 -30% 0; top: 0; left: -80%; }
  .character-all-c04-bg { width: 240%; margin: 0 0 0 -20px; top: 0; left: -80%; }

  .character-all-c05 { position: relative; width: 200%; margin: -10% 0 0 0; top: 0; left: -40%; }
  .character-all-c05-bg { width: 200%; margin: 0 0 0 -20px; top: 0; left: -40%; }

  .character-all-c06 { position: relative; width: 160%;  margin: 6% 0 -6% 0; top: 0; left: -35%; }
  .character-all-c06-bg { width: 160%; margin: 0 0 0 -20px; top: 0; left: -35%; }

  .character-all-c07 { position: relative; width: 150%; margin: -10% 0 -60% 0; top: 0; left: 4%; }
  .character-all-c07-bg { width: 150%; margin: 0 0 0 -20px; top: 0; left: 4%; }

  .character-all-c08 { position: relative; width: 140%; margin: 4% 0 -60% 0; top: 0; left: 3%; }
  .character-all-c08-bg { width: 140%; margin: 0 0 0 -20px; top: 0; left: 3%; }

  .character-all-c09 { position: relative; width: 160%; margin: 4% 0 -40% 0; top: 0; left: -30%; }
  .character-all-c09-bg { width: 160%; margin: 0 0 0 -20px; top: 0; left: -30%; }

  .character-all-c10 { position: relative; width: 210%; margin: -30% 0 -20% 0; top: 0; left: -40%; }
  .character-all-c10-bg { width: 210%; margin: 0 0 0 -20px; top: 0; left: -40%; }

  .character-all-c11 { position: relative; width: 240%; margin: 4% 0 -80% 0; top: 0; left: -30%; }
  .character-all-c11-bg { width: 240%; margin: 0 0 0 -20px; top: 0; left: -30%; }

  .character-all-c12 { position: relative; width: 240%; margin: 4% 0 -30% 0; top: 0; left: -50%; }
  .character-all-c12-bg { width: 240%; margin: 0 0 0 -20px; top: 0; left: -50%; }

  .character-all-c13 { position: relative; width: 150%; margin: 4% 0 -100% 0; top: 0; left: -10%; }
  .character-all-c13-bg { width: 150%; margin: 0 0 0 -20px; top: 0; left: -10%; }

  .character-all-c14 { position: relative; width: 90%; margin: -4% 0 0 0; top: 0; left: 20%; padding-bottom: 10%; }
  .character-all-c14-bg { width: 90%; margin: 0 0 0 -20px; top: 0; left: 20%; }

  .character-all-c15 { position: relative; width: 100%; margin: 4% 0 -80% 0; top: 0; left: 10%; }
  .character-all-c15-bg { width: 100%; margin: 0 0 0 -20px; top: 0; left: 10%; }

  .character-all-c16 { position: relative; width: 100%; margin: 4% 0 -80% 0; top: 0; left: 18%; }
  .character-all-c16-bg { width: 100%; margin: 0 0 0 -20px; top: 0; left: 18%; }

  .character-all-c17 { position: relative; width: 140%; margin: 4% 0 -80% 0; top: 0; left: -12%; }
  .character-all-c17-bg { width: 140%; margin: 0 0 0 -20px; top: 0; left: -12%; }

  .character-all-c18 { position: relative; width: 180%; margin: -8% 0 -40% 0; top: 0; left: -40%; }
  .character-all-c18-bg { width: 180%; margin: 0 0 0 -20px; top: 0; left: -40%; }

  .character-all-c19 { position: relative; width: 370%; margin: -30% 0 -90% 0; top: 0; left: -140%; }
  .character-all-c19-bg { width: 370%; margin: 0 0 0 -20px; top: 0; left: -140%; }

  .character-all-c20 { position: relative; width: 200%; margin: -2% 0 0 0; top: 0; left: -50%; }
  .character-all-c20-bg { width: 200%; margin: 0 0 0 -20px; top: 0; left: -50%; }

  .character-all-c21 { position: relative; width: 130%; margin: -10% 0 0 0; top: 0; left: -10%; padding-bottom: 20%; }
  .character-all-c21-bg { width: 130%; margin: 0 0 0 -20px; top: 0; left: -10%; }

  .character-all-c22 { position: relative; width: 100%; margin: 4% 0 -60% 0; top: 0; left: 10%; }
  .character-all-c22-bg { width: 100%; margin: 0 0 0 -20px; top: 0; left: 10%; }

  .character-all-c23 { position: relative; width: 160%; margin: 4% 0 0 0; top: 0; left: 10%; }
  .character-all-c23-bg { width: 160%; margin: 0 0 0 -20px; top: 0; left: 10%; }

  .character-all-c24 { position: relative; width: 180%; margin: 4% 0 -60% 0; top: 0; left: -40%; }
  .character-all-c24-bg { width: 180%; margin: 0 0 0 -20px; top: 0; left: -40%; }

  .character-all-c25 { position: relative; width: 240%; margin: -34% 0 -60% 0; top: 0; left: -50%; }
  .character-all-c25-bg { width: 240%; margin: 0 0 0 -20px; top: 0; left: -50%; }

  .character-all-c26 { position: relative; width: 280%; margin: -90% 0 0 0; top: 0; left: -40%; }
  .character-all-c26-bg { width: 280%; margin: 0 0 0 -20px; top: 0; left: -40%; }

  .character-all-c27 { position: relative; width: 170%; margin: -2% 0 -80% 0; top: 0; left: -10%; }
  .character-all-c27-bg { width: 170%; margin: 0 0 0 -20px; top: 0; left: -10%; }

  .character-all-c91 { position: relative; width: 150%; margin: -4% 0 -30% 0; top: 0; left: -20%; }
  .character-all-c91-bg {  width: 150%; margin: 0 0 0 -20px; top: 0; left: -20%; }
  .character-all-c92 { position: relative; width: 130%; margin: -4% 0 -60% 0; top: 0; left: -16%; }
  .character-all-c92-bg { width: 130%; margin: 0 0 -60% -20px; top: 0; left: -16%; }
  .character-all-c93 { position: relative; width: 200%; margin: -20% 0 -20% 0; left: -20%; }
  .character-all-c93-bg { width: 200%; margin: 0 0 0 -20px; top: 0; left: -20%; }





  /*----------------------------------------
    CV_msg
  ----------------------------------------*/
  #characters_msg #base_cast{ width:100%; position:relative;padding:10px 0; }
  #characters_msg #base_cast .cvmsg_base_inner{ position:relative; z-index:20; width:92%; padding:3% 0; margin:0 auto 0; }
  #characters_msg .cvmsg_stil{ display:block; width:40%; float:left; }
  #characters_msg #base_cast .cvmsg_text{ font-weight:normal; }
  #characters_msg h4{ font-weight:800; font-size:18px; color:#ffc; display:block; margin-top:20px; margin-bottom:10px; }
  #characters_msg .cvmsg_head{ position:relative; margin-bottom:3%; border-bottom:1px solid #ff0; padding:0 0 5%; }
  #characters_msg .cvmsg_name{ display:block; margin-left:4%; position:relative; bottom:0px; width:50%; float:left; margin-top:10%; }
  #characters_msg .cvmsg_name .cvmsg_tit{ font-size:11px; }
  #characters_msg .cvmsg_name .cvmsg_tit span{ font-size:18px; font-weight:800; display:block; margin-bottom:0px; }
  #characters_msg .cvmsg_name .cvmsg_cont{ font-size:24px; font-weight:800; display:inline-block; line-height: 1; }
  #characters_msg .cvmsg_btn_img{ width:80%; margin:3px 0 0; }
  #characters_msg .cvmsg_btn_img img{ width:100% }

  /*----------------------------------------
    System
  ----------------------------------------*/
  body#system #wrapper { background:none; }
  body#system .content { background:url(../img/system/img01.jpg) no-repeat top center; background-size: 200%; display: block; top: 0; left: 0; width: 100%; height: 100%; content: ""; z-index: -1; }
	.system-section { padding-bottom: 100px; width: 100%; }
  .system-menu-wrap { position: relative; text-align: center; width: auto; margin-bottom: 40px; }
  .system-menu { width: 100%; background-size: 100%; margin: 0; }

  .system-section-wrapper { margin-bottom: 40px; }

  .system-cont-maintext { font-size: 16px; }

  .system-ttl { margin-left: -20%; }
  .system-ttl img { width: 100%; }

  .system-sub2 { margin-left: -10%; }
  .system-sub2 img { width: 80%; }
  body#system .ttl-wrapper { min-height: auto; }
	body#system .flex-caption { padding: 5px; font-size: 14px; }
  body#system .flexslider { border-width: 10px; }
   /*----------------------------------------
    Product
  ----------------------------------------*/
  .product-section-wrapper { width: 100%; }
  .product-section {}
  .product-section .product-section-inner { padding-top: 0; }
  .product-cont {  }
  .product-cont-border { width: 100%; margin-bottom: 20%; }
  .product-cont { padding: 6%; }
  .product-cont-inner { position: relative; }
	.product-cont-inner img { width: 100%; }
  .product-cont-text-line span { display: block; }
  .product-cont-left { float: none; }
  .product-cont-right { float: none; }
  .product-btn { padding-top: 10px; }
  .product-btn a { width: 100%; }
  body#product hr { margin-top: 10px; margin-bottom: 10px; }
  .product-cont-text-item-list { font-size: 90%; width: 100%; float: none; }
  .product-cont-yukemuri { width: 100%; float: none; }
  .product-ttl { zoom: 0.5; left: -10%; margin-top: -140px;  }
  .product-cont-three { margin-right: 1%; width: 48%; vertical-align: top; }
  .product-cont-three:nth-child(3n) { margin-right: 1%; }
  .product-cont-three:nth-child(2n) { margin-right: 0; }
  .product-cont-tenpo-link { font-size: 80%; }
  #product .ttl { margin-bottom: 5%; margin-top: 10%; }
  #product .ttl img { width: 80%; }
  #product-cont-wrap03 .product-cont-syokai-text { font-size: 10px; height: 50px; margin-top: -50px; }
  .product-cont-syokai-link01 { width: 50%; margin-left: 50%; height: 50%; }

  /*----------------------------------------
    Gallery
  ----------------------------------------*/
  body#gallery #wrapper { background:none; }
  body#gallery .content { background:url(../img/bg07.jpg) no-repeat top center; background-size: 100%; display: block; top: 0; left: 0; width: 100%; height: 100%; content: ""; z-index: -1; }
  #gallery .cbox:before { display: none; }
  .gallery-section-content-box-flex { display: block; }
  .gallery-section { width: 100%; padding: 40px 0 0; min-height: 400px ; }
  .gallery-section section { width: 100%; }
  .gallery-section { width: 100%; background-size: 100%; }
  .gallery-movie-ttl img { width: 80%; }
  .gallery-section-content-box-ttl { margin-bottom: 5%; margin-top: 5%; }
  .gallery-movie-cont { height: 100%; width: 100%; margin-bottom: 0; background: #900; border-bottom: #c00 solid 1px; padding: 3%; }
  .gallery-movie-cont:before { display: none; }
  .gallery-movie-text { padding-bottom: 0; display: inline-block; font-size: 14px; }
  .gallery-movie-cover { width: 140px; display: inline-block; margin: 0;  }
  .gallery-movie-cover img { width: 140px; }
  .gallery-movie-cover:before { display: none; }

  .gallery-section-wrapper { width: 100%; overflow: hidden; background: none; position: relative; }
	.gallery-section-wrapper:before { top: 14px; min-width: auto; z-index: 1001; }
	.gallery-section-wrapper:after { top: 22px; min-width: auto; z-index: 1002; }
	.gallery-section-content-box-s { margin-left: 0; margin-bottom: 0; text-align: left; }
	.gallery-section-inner { background: #c00; padding-bottom: 50px; }
	.gallery-section-content { position: relative; z-index: 1010; }
  .yoyaku-ttl img { width: 100%; }

	.gallery-new img {
		width: 80px;
	}
  /*----------------------------------------
    DLC
  ----------------------------------------*/
  body#dlc #wrapper { background:none; }
  body#dlc .content { background:url(../img/bg06.jpg) no-repeat top center; background-size: 100%; display: block; top: 0; left: 0; width: 100%; height: 100%;content: ""; z-index: -1; }
  #dlc .cbox:before { display: none; }
  .dlc-section-wrapper { width: 100%; overflow: hidden; background: none; position: relative; }
	.dlc-section-wrapper:before { top: 14px; min-width: auto; z-index: 1001; }
	.dlc-section-wrapper:after { top: 22px; min-width: auto; z-index: 1002; }
	.dlc-section-content { padding-top: 40px; z-index: 1010; }
  .dlc-section { width: 100%; padding: 0 0 50px; min-height: 400px ; }
  #dlc .ttl-wrapper img { margin-top: 0; }
  .dlc-section-menu { display: block; float: none; width: 100%; margin: 0 auto 20px; width: 90%; font-size: 14px; }
  .dlc-section-menu-list { line-height: 30px; }
  .dlc-section-menu-list a { margin: 5px 0; }
  .dlc-section-menu-list a:hover, .dlc-section-menu-list a.current { margin: 5px 0; }
  .dlc-section-cont { display: block; flex: none; width: 100%; border-left: none; padding-right: 4%; font-size: 12px; }
  .dlc-section-cont img { width: 100%; }
  .dlc-section-cont-border { padding: 10px; }
  .dlc-section-cont-title { font-size: 16px; line-height: 20px; padding: 5px 0; }
  .dlc-section-cont-cost { font-size: 12px; line-height: 20px; padding: 0 5px; margin-bottom: 3px; }
  .dlc-section-cont-table th,.dlc-section-cont-table td { font-size: 12px; padding: 3px; }
	.dlc-section-menu-topic a { font-size: 9px; width: 90%; margin: 0 auto 20px; line-height: 1; padding: 10px; border-radius: 40px; }
  /*----------------------------------------
    update
  ----------------------------------------*/
  body#update #wrapper { background:none; }
  body#update .content { background:url(../img/bg06.jpg) no-repeat top center; background-size: 100%; display: block; top: 0; left: 0; width: 100%; height: 100%;content: ""; z-index: -1; }
  #update .cbox:before { display: none; }
  .update-section-wrapper { width: 100%; overflow: hidden; background: none; position: relative; }
	.update-section-wrapper:before { top: 14px; min-width: auto; z-index: 1001; }
	.update-section-wrapper:after { top: 22px; min-width: auto; z-index: 1002; }
	.update-section-content { padding-top: 40px; z-index: 1010; }
  .update-section { width: 100%; padding: 0 0 50px; min-height: 400px ; }
  #update .ttl-wrapper img { margin-top: 0; }
  .update-section-cont { display: block; flex: none; width: 100%; border-left: none; padding-right: 4%; font-size: 12px; }
  .update-section-cont img { width: 100%; }
  .update-section-cont-border { padding: 10px; }
  .update-section-cont-title { font-size: 16px; line-height: 20px; padding: 5px 0; }
  .update-section-cont-cost { font-size: 12px; line-height: 20px; padding: 0 5px; margin-bottom: 3px; }
  .update-section-cont-table th,.dlc-section-cont-table td { font-size: 12px; padding: 3px; }

  /*----------------------------------------
    steam
  ----------------------------------------*/
  body#steam #wrapper { background:none; }
  body#steam .content { background:url(../img/bg06.jpg) no-repeat top center; background-size: 100%; display: block; top: 0; left: 0; width: 100%; height: 100%;content: ""; z-index: -1; }
  #steam .cbox:before { display: none; }
  .steam-section-wrapper { width: 100%; overflow: hidden; background: none; position: relative; padding-top: 50px; }
	.steam-section-wrapper:before { top: 14px; min-width: auto; z-index: 1001; }
	.steam-section-wrapper:after { top: 22px; min-width: auto; z-index: 1002; }
	.steam-section-content { padding-top: 0; z-index: 1010; width: 100%; padding-bottom: 0; }
  .steam-section { width: 100%; padding: 0 0 50px; min-height: 50%; background-color: #c00; }
  .steam-section-main-sp { display: block; width: 100%; }
	.steam-section-inner { background-image: none; }
  #steam .ttl-wrapper img { margin-top: 0; }
  .steam-section-cont { display: block; flex: none; width: 100%; border-left: none; padding-right: 4%; font-size: 12px; }
  .steam-section-cont img { width: 100%; }
  .steam-section-cont-border { padding: 10px; }
  .steam-section-cont-border table th, .steam-section-cont-border table td { font-size: 12px; }

	.steam-contents-section-pics-wrapper { width: 100%; margin-bottom: 20px; }
	.steam-contents-section-text-wrapper { width: 100%; }
	.steam-contents-section-ttl { font-size: 18px; }
	.steam-logo { width: 28%; }
	.steam-text { width: 66%; height: auto; }
	.steam-btn { width: 100%; clear: both; float: none; border:none; margin-top: 10px; }

}

@media screen and (max-width: 361px) {
  .character-gal { zoom:0.5; }
  .audiojs { zoom:0.8; }
  body#system .content { background-size: 240%; }
}

@media screen and (max-width: 321px) {
  .menu-new { z-index: 1; width: 60px; height: 20px; }
  .menu-new img { width: 60px; height: 20px; }
  .character-text { font-size: 14px; }
  .character-cv { font-size: 14px; }
  .character-cv a { font-size: 10px; }
  .gallery-movie-text { font-size: 12px; }
}