@charset "utf-8";
body#sub #fullWrap{
	opacity: 0;
	transition: .3s ease;
}
body#sub #fullWrap.active{
	opacity: 1;
}
@keyframes ani {
  from {
	-webkit-mask-position: 0 0;
	mask-position: 0 0;
  }
  to {
	-webkit-mask-position: 100% 0;
	mask-position: 100% 0;
  }
}
@keyframes ani2 {
  from {
	-webkit-mask-position: 100% 0;
	mask-position: 100% 0;
  }
  to {
	-webkit-mask-position: 0 0;
	mask-position: 0 0;
  }
}
@keyframes ani_ie {
  from {
	opacity: 1;
  }
  to {
	opacity: 0;
  }
}
/*-- ▼LOADING▼ --*/
#topLoading{
	position: fixed;
	left: 0px;
	top: 0px;
	right: 0px;
	bottom: 0px;
	min-width: 1240px;
	min-height: 640px;
	z-index: 10000;
}
.topLoading__mask{
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: #000;
	-webkit-mask: url("../images/btn_sprite.png");
	mask: url("../images/btn_sprite.png");
	-webkit-mask-size: 2300% 100%;
	mask-size: 2300% 100%;
}
#topLoading.active .topLoading__mask{
	animation: ani .7s steps(22) .3s both;
}
#cMark{
	width: 95px;
	height: 87px;
	position: absolute;
	margin: auto;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	color: #fff;
	z-index: 2;
	transition: .3s ease;
}
#cMark.active{
	transition-delay: .6s;
	opacity: 0;
}
#cMark:before{
	content: "";
	position: absolute;
	background: url(../images/mark_b_l.svg) no-repeat 0 0 / 100%;
	width: 29px;
	height: 56px;
	top: 0;
	left: 10px;
	transition: .3s ease;
}
#cMark:after{
	content: "";
	position: absolute;
	background: url(../images/mark_b_r.svg) no-repeat 0 0 / 100%;
	width: 29px;
	height: 56px;
	top: 0;
	right: 10px;
	transition: .3s ease;
}
#cMark i {
	background: url(../images/pagetop_icon_in.svg) no-repeat 0 0 / 100%;
	width: 6px;
	height: 24px;
	margin: auto;
	left: 0;
	right: 0;
	top: 10px;
	transform: rotate(180deg);
	position: absolute;
	transition: .3s ease;
}
#cMark span{
	display: block;
	text-align: center;
	position: absolute;
	font-size: 17px;
	bottom: 0;
	width: 100%;
	line-height: 1;
}
#blueBg{
	position: fixed;
	left: 0px;
	top: 0px;
	right: 0px;
	bottom: 0px;
	min-width: 1240px;
	min-height: 640px;
	z-index: 9999;
	transition: .3s ease;
}
.blueBg__mask{
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: url(../images/blue_bg.jpg) no-repeat center / cover;
	-webkit-mask: url("../images/btn_sprite.png");
	mask: url("../images/btn_sprite.png");
	-webkit-mask-size: 2300% 100%;
	mask-size: 2300% 100%;
}
#blueBg.active .blueBg__mask{
	animation: ani .7s steps(22) .3s both;
}
#topWrap{
	opacity: 0;
	transition: .3s;
}
#topWrap.active{
	opacity: 1;
}
/*-- IE --*/
@media all and (-ms-high-contrast: none){
	.topLoading__mask{
		content: "";
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background: #000;
	}
	#topLoading.active .topLoading__mask{
		animation: ani_ie .7s;
	}
	.blueBg__mask{
		content: "";
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background: url(../images/blue_bg.jpg) no-repeat center / cover;
	}
	#blueBg.active .blueBg__mask{
		animation: ani_ie .7s;
	}
}
/*-- ▼BTN ANIMATION▼ --*/
.linkA{ position: relative; }
.linkA:after{
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	background: #000;
	-webkit-mask: url("../images/btn_sprite.png");
	mask: url("../images/btn_sprite.png");
	-webkit-mask-size: 2300% 100%;
	mask-size: 2300% 100%;
	animation: ani .7s steps(22) forwards;
}
.linkA:hover:after {
	animation: ani2 .7s steps(22) forwards;
}
.linkA_2{ position: relative; }
.linkA_2:after{
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	background: #000;
	-webkit-mask: url("../images/btn_sprite.png");
	mask: url("../images/btn_sprite.png");
	-webkit-mask-size: 2300% 100%;
	mask-size: 2300% 100%;
	opacity: .4;
	animation: ani2 .7s steps(22) forwards;
}
.linkA_2:hover:after {
	animation: ani .7s steps(22) forwards;
}
.linkA > span,
.linkA_2 > span,
.linkB > span,
.linkC > span{
	position: relative;
	z-index: 2;
}
.linkB{ position: relative; }
.linkB:before{
	content: "";
	width: 0;
	height: 50%;
	background-color: #1063af;
	top: 0;
	left: 0;
	opacity: .4;
	position: absolute;
	transition: .5s cubic-bezier(0.02, 0.88, 0.58, 1);
	z-index: 1;
}
.linkB:after{
	content: "";
	width: 0;
	height: 50%;
	background-color: #1063af;
	bottom: 0;
	right: 0;
	opacity: .4;
	position: absolute;
	transition: .5s cubic-bezier(0.02, 0.88, 0.58, 1);
	z-index: 1;
}
.linkB:hover:before,
.linkB:hover:after{ width: 100%; }
.linkC{ position: relative; }
.linkC:after{
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	opacity: .4;
	background: #1063af;
	-webkit-mask: url("../images/btn_sprite.png");
	mask: url("../images/btn_sprite.png");
	-webkit-mask-size: 2300% 100%;
	mask-size: 2300% 100%;
	animation: ani .7s steps(22) forwards;
}
.linkC:hover:after {
	animation: ani2 .7s steps(22) forwards;
}

.linkC.isactive:after {
	animation: ani2 .7s steps(22) forwards;
	color:#ece48b;
}

/*-- ▼HEADER-NAV▼ --*/
@media screen and (min-width:769px) {
#index #headIn nav ul li a{
	color: #fff;
	text-decoration: none;
	font-weight: 800;
	line-height: 1;
}
}
#headIn nav ul li a{
	color: #fff;
	text-decoration: none;
	line-height: 1;
}
#headIn nav ul li a span{ transition: .3s ease; }
#headIn nav ul li a:hover span,
#headIn nav ul li a.active span{
	color: #ece48b;
	text-shadow: 0px 0px 10px #2e89e4;
}
.navTw a > span{
	display: block;
	position: relative;
	padding-right: 26px;
}
.navTw a > span:after{
	content: "";
	position: absolute;
	background: url(../images/sns_tw.svg) no-repeat 0 0 / 100%;
	width: 20px;
	height: 17px;
	top: 12px;
	right: 0px;
}
@media screen and (min-width:769px) {
#index .navTw a > span:after{
	background: url(../images/sns_tw_k.svg) no-repeat 0 0 / 100%;
}
}
#headIn .shareBox{
	position: absolute;
	width: 178px;
	height: 24px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}
#headIn .shareBox > h2{
	font-size: 12px;
	margin-right: 14px;
	padding-top: 2px;
}
@media screen and (min-width:769px) {
#index #headIn .shareBox > h2{
	color: #fff;
}
}.shareBox > ul{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}
.shareBox > ul li{
	width: 40px;
	height: 24px;
}
.shareBox > ul li a{
	display: block;
	width: 100%;
	height: 100%;
	position: relative;
	color: #fff;
}
.shareBox > ul li a img{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}
.shareBox > ul li.tw img{
	width: 20px;
	height: 17px;
}
.shareBox > ul li.fb img{
	width: 20px;
	height: 20px;
}
.shareBox > ul li.ln img{
	width: 21px;
	height: 20px;
}
.standBy{
	pointer-events: none;
	opacity: .5;
}
/*-- ▼FOOTER▼ --*/
#bnrArea{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	width: 1184px;
	margin: 0 auto;
}
#bnrArea li{ margin: 0 12px; }
/*-- ▼CONTENTS▼ --*/
.comW{ width: 1160px; margin: 0 auto; }
#movModal{
	overflow: auto;
	position: fixed;
	left: 0px;
	top: 0px;
	right: 0px;
	bottom: 0px;
	min-width: 1240px;
	min-height: 640px;
	z-index: 9999;
	display: none;
	background: rgba(0,0,0,.6);
}
#soundModal{
	overflow: auto;
	position: fixed;
	left: 0px;
	top: 0px;
	right: 0px;
	bottom: 0px;
	min-width: 1240px;
	min-height: 620px;
	z-index: 9999;
	background: rgba(0,0,0,.8);
	display: flex;
	justify-content: center;
	padding-top:100px;
	opacity:0;
	pointer-events:none;
	transition: all 0.5s ease;
}
#soundModal.on {
	pointer-events:auto;
	opacity:1;
}
#movModalIn{
	position: absolute;
	margin: auto;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	width: 920px;
	height: 518px;
}
#soundModalIn{
	position:relative;
	width: 840px;
	padding-bottom:100px;
}
#movModalIn_if{
	width: 100%;
	height: 100%;
}
#movModalIn iframe {
	display: block;
	width: 100%;
	height: 100%;
	position: relative;
	z-index: 1;
}
#soundModalIn_if p {
	margin-bottom:25px;
}
#soundModalIn_if h3 {
	font-size:20px;
	line-height:2;
	margin-bottom:25px;
	border-bottom:1px solid #FFF;
}
#soundModalIn_if p.playBtn {
	margin-bottom:100px;
}
.modalClose{
	width: 120px;
	height: 54px;
	position: absolute;
	top: -20px; 
	right: -120px;
	z-index: 2;
}
.modalClose a{
	display: block;
	width: 100%;
	height: 100%;
	position: relative;
	text-decoration: none;
}
.modalClose a:after{
	content: "CLOSE";
	font-weight: bold;
	font-size: 12px;
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	color: #fff;
	text-shadow: 0px 0px 10px #2e89e4;
}
.modalClose a span:first-child{
	position: absolute;
	display: block;
	width: 120px;
	height: 1px;
	background: #fff;
	top: 16px;
	left: 0;
	transform: rotate(15deg);
}
.modalClose a span:last-child{
	position: absolute;
	display: block;
	width: 120px;
	height: 1px;
	background: #fff;
	top: 16px;
	left: 0;
	transform: rotate(-15deg);
}
.modalClose a span:first-child:before{
	content: "";
	position: absolute;
	width: 0;
	height: 100%;
	background: #2da6e3;
	top: 0;
	right: 0;
	transition: .1s ease-in-out;
}
.modalClose a span:last-child:before{
	content: "";
	position: absolute;
	width: 0;
	height: 100%;
	background: #2da6e3;
	top: 0;
	left: 0;
	transition: .1s ease-in-out;
}
.modalClose a:hover span:first-child:before{
	width: 100%;
}
.modalClose a:hover span:last-child:before{
	transition-delay: .1s;
	width: 100%;
}
#subContWrap{ margin-bottom: 160px; }
#subContWrap > h2{
	text-align: center;
	display: table;
	margin: 0 auto 80px;
	padding: 0 66px;
	position: relative;
	color: #fff;
}
#subContWrap > h2:before{
	content: "";
	background: url(../images/deco01_l.png) no-repeat 0 0 / 100%;
	width: 41px;
	height: 81px;
	position: absolute;
	top: 0;
	left: 0;
}
#subContWrap > h2:after{
	content: "";
	background: url(../images/deco01_r.png) no-repeat 0 0 / 100%;
	width: 41px;
	height: 81px;
	position: absolute;
	top: 0;
	right: 0;
}
#subContWrap > h2 span{
	line-height: 1;
	display: block;
	text-shadow: 0px 0px 10px #2e89e4;
}
#subContWrap > h2 span:first-of-type{ 
	font-size: 42px;
	margin-bottom: 20px;
	padding-top: 2px;
}
#subContWrap > h2 span:last-of-type { font-size: 16px; }
.inTtl_01{
	text-align: center;
	text-shadow: 0px 0px 10px #2e89e4;
	font-size: 28px;
	line-height: 1;
	margin-bottom: 56px;
	position: relative;
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	width: 100%;
}
.inTtl_01:before{
	content: "";
	background-color: rgba(255,255,255,.4);
	height: 1px;
	width: 100%;
}
.inTtl_01:after{
	content: "";
	background-color: rgba(255,255,255,.4);
	height: 1px;
	width: 100%;
}
.inTtl_01 > span{
	white-space: nowrap;
	padding: 0 50px;
	position: relative;
}
.inTtl_01 > span:before{
	content: "";
	background: url(../images/deco_l.svg) no-repeat 0 0 / 100%;
	width: 24px;
	height: 5px;
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	margin: auto;
}
.inTtl_01 > span:after{
	content: "";
	background: url(../images/deco_r.svg) no-repeat 0 0 / 100%;
	width: 24px;
	height: 5px;
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
}

ul.newsList li{
	border: 1px solid rgba(255,255,255,.4);
	background-color: rgba(0,0,0,.4);
	margin-bottom: 24px;
	position: relative;
}
.newsDate { 
	font-size: 16px; color: #ece48b;
	width: 110px;
	position: relative;
	z-index: 2;
	display: block;
}
.newsTitle{ 
	font-size: 16px;  color: #fff;
	width: calc(100% - 110px);
	position: relative;
	z-index: 2;
	display: block;
}
ul.newsList li .newsTitle:after{
	content: "";
	position: absolute;
	width: 1px;
	height: 100%;
	background-color: rgba(255,255,255,.4);
	top: 0;
	left: -12px;
}
ul.newsList li a{
	padding: 40px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	text-decoration: none;
	z-index: 1;
}
ul.newsList li:before{
	content: "";
	background: url(../images/arrow_r.png) no-repeat 0 0 / 100%;
	width: 40px;
	height: 8px;
	position: absolute;
	right: 20px;
	bottom: 20px;
	z-index: 2;
	transition: .3s ease;
	pointer-events: none;
}
ul.newsList li:hover:before{
	transform: translateX(10px);
}
.commentLinks{
	margin-top: 10px;
	display: block;
}
.commentLinks > span{
	margin-bottom: 10px;
}
.commentLinks > span{
	display: inline-block;
}
.commentLinks > span small{
	font-size: 12px;
}
article.newsDetail{
	width: 920px;
	margin: 0 auto 80px;
	padding: 40px;
	border: 1px solid rgba(255,255,255,.4);
	background-color: rgba(0,0,0,.4);
}
article.newsDetail > h3 .newsTitle{
	font-size: 20px;
	width: auto;
}
article.newsDetail > h3{
	border-bottom: 1px solid rgba(255,255,255,.4);
	margin-bottom: 32px;
	padding-bottom: 20px;
}
.newsDetailTxtArea{
	font-size: 16px;
}
.newsDetailTxtArea img,
.newsDetailTxtArea iframe{
	max-width: 100%;
	height: auto;
}
.newsDetailTxtArea img,
.newsDetailTxtArea .ifWrap{
	display: table;
	margin: 0 auto;
}
.newsDetailTxtArea iframe{
	width: 100%;
	height: 100%;
}
.newsDetailTxtArea .ifWrap{
	width: 600px;
	height: 338px;
}
.newsNote{
	border: 1px solid rgba(255,255,255,.4);
	padding: 20px;
	margin-bottom: 40px;
}
.newsNote > h4{
	background-color: #fff;
	color: #000;
	font-weight: 600;
	display: table;
	margin-right: auto;
	line-height: 1;
	padding: 1px 3px;
	margin-bottom: 20px;
}
.newsNote p,
.newsNote img,
.newsNote .ifWrap{ margin-bottom: 30px; }
.y { color: #ebe38b; }
.aLink{
	position: relative;
	display: table;
}
.aLink.posC{ margin: 0 auto; }
.aLink.posR{ margin-left: auto; }
.aLink a{
	text-decoration: none;
	color: #fff;
	font-size: 16px;
	line-height: 1;
	padding: 14px 32px;
	display: block;
	transition: .3s ease;
}
.aLink a:hover{
	transition-delay: .3s;
	color: #ece48b;
}
.backTo{
	display: table;
	margin: 0 auto;
	background-color: rgba(0,0,0,.4);
	position: relative;
}
.backTo:after,
.aLink:after{
	content: "";
	position: absolute;
	width: calc(100% - 2px);
	height: calc(100% - 2px);
	top: 0;
	left: 0;
	pointer-events: none;
	border: 1px solid rgba(255,255,255,.4);
	z-index: 5;
}
.backTo:before{
	content: "";
	background: url(../images/arrow_l.png) no-repeat 0 0 / 100%;
	width: 56px;
	height: 8px;
	position: absolute;
	left: -28px;
	top: 0;
	bottom: 0;
	margin: auto;
	z-index: 2;
	transition: .3s ease;
	pointer-events: none;
}
.backTo:hover:before{ transform: translateX(-10px); }
.backTo a{ 
	padding: 14px 80px;
	text-decoration: none;
	color: #fff;
	font-size: 16px;
	line-height: 1;
	display: block;
}
.oaTxt{
	width: 740px;
	height: 180px;
	background: url(../images/oa_toptxt.png) no-repeat 0 0 / 100%;
	margin: 0 auto 60px;
}
.oaTxt2{
	width: 740px;
	height: 200px;
	background: url(../images/oa_toptxt4.png) no-repeat 0 0 / 100%;
	margin: 0 auto 120px;
}
.introBox{
	width: 920px;
	margin: 0 auto;
}
.introTop{
	margin-bottom: 80px;
}
.introCatch_1{
	background: url(../images/introcatch_1.png) no-repeat 0 0 / 100%;
	width: 765px;
	height: 68px;
	margin-bottom: 30px;
}
.introTxt{
}
.introTxt p{
	color: #fff;
	font-size: 16px;
	line-height: 40px;
}
.introBottom{
	position: relative;
}
.introCatch_2{
	width: 280px;
	height: 574px;
	display: table;
	margin-left: auto;
	position: relative;
}
.introCatch_2 p{
	background: url(../images/introcatch_2.png) no-repeat 0 0 / 100%;
	width: 295px;
	height: 574px;
	position: absolute;
	top: 0;
	right: -14px;
}
#introVs{
	background: url(../images/introvs.png) no-repeat 0 0 / 100%;
	width: 617px;
	height: 612px;
	position: absolute;
	top: -50px;
	left: -80px;
}
.smoke01{
	position: absolute;
	z-index: 1;
	background: url(../images/introcatch_1_bg.png) no-repeat 0 0 / 100%;
	width: 561px;
	height: 259px;
	mix-blend-mode: screen;
	margin: auto;
	right: 0;
	left: 0;
	top: 268px;
}
.smork02{
	position: absolute;
	z-index: 1;
	background: url(../images/introcatch_2_bg.png) no-repeat 0 0 / 100%;
	width: 356px;
	height: 530px;
	mix-blend-mode: screen;
	margin: auto;
	right: 0;
	left: 0;
	top: 788px;
	transform: translateX(338px);
}
ul.movList {
	margin-left: -20px;
	margin-right: -20px;
}
ul.movList li{
	width: calc(50% - 40px);
	margin: 0 20px 40px;
}
ul.epList {
	margin-left: -20px;
	margin-right: -20px;
}
ul.epList li{
	width: calc(33% - 40px);
	margin: 0 20px 40px;
}
.movThumbWrap{
	width: 100%;
	height: 312px;
	border: 1px solid rgba(255,255,255,.4);
	margin-bottom: 20px;
	position: relative;
}
.spThumbWrap{
	width: 100%;
	height: 400px;
	border: 1px solid rgba(255,255,255,.4);
	margin-bottom: 20px;
	position: relative;
}
.movThumb{
	display: block;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	position: relative;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 5;
}
.movThumb > span{
	width: 62px;
	height: 88px;
	line-height: 88px;
	position: absolute;
	margin: auto;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	text-shadow: 0px 0px 10px #2e89e4;
	text-align: center;
	display: block;
	text-decoration: none;
	color: #fff;
	font-size: 17px;
	transition: .3s ease;
	z-index: 2;
	pointer-events: none;
}
.movThumb > span:before{
	content: "";
	position: absolute;
	background: url(../images/deco02_l.svg) no-repeat 0 0 / 100%;
	width: 56px;
	height: 29px;
	top: 0;
	right: 0;
	transition: .3s ease;
}
.movThumb:hover > span{
	color: #ece48b;
}
.movThumb:hover > span:before{
	top: -10px;
}
.movThumb > span:after{
	content: "";
	position: absolute;
	background: url(../images/deco02_r.svg) no-repeat 0 0 / 100%;
	width: 56px;
	height: 29px;
	bottom: 0;
	right: 0;
	transition: .3s ease;
}
.movThumb:hover > span:after{
	bottom: -10px;
}

.epThumbWrap{
	width: 100%;
	height: 199px;
	border: 1px solid rgba(255,255,255,.4);
	margin-bottom: 20px;
	position: relative;
}
.epThumb{
	display: block;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	position: relative;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}
.epThumb > span{
	width: 62px;
	height: 88px;
	line-height: 88px;
	position: absolute;
	margin: auto;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	text-shadow: 0px 0px 10px #2e89e4;
	text-align: center;
	display: block;
	text-decoration: none;
	color: #fff;
	font-size: 17px;
	transition: .3s ease;
	z-index: 2;
	pointer-events: none;
}
.epThumb > span:before{
	content: "";
	position: absolute;
	background: url(../images/deco02_l.svg) no-repeat 0 0 / 100%;
	width: 56px;
	height: 29px;
	top: 0;
	right: 0;
	transition: .3s ease;
}
.epThumb:hover > span{
	color: #ece48b;
}
.epThumb:hover > span:before{
	top: -10px;
}
.epThumb > span:after{
	content: "";
	position: absolute;
	background: url(../images/deco02_r.svg) no-repeat 0 0 / 100%;
	width: 56px;
	height: 29px;
	bottom: 0;
	right: 0;
	transition: .3s ease;
}
.epThumb:hover > span:after{
	bottom: -10px;
}




.txtC{
	text-align: center;
	font-size: 24px;
	margin-bottom: 60px;
	color: #fff;
}
ul.comicsList{
	margin-left: -8px;
	margin-right: -8px;
}
ul.comicsList li{
	width: 180px;
	margin: 0 8px 40px;
}
ul.comicsList li a{
	transition: .4s ease;
	position: relative;
}
.scListBox{
	width: 50%;
}
.scListBox:first-child{
	padding-right: 40px;
}
.scListBox:last-child{
	padding-left: 40px;
}
dl.scList dt{
	font-size: 16px;
	color: #ece48b;
	margin-right: 13px;
	float: left;
	padding-top: 8px;
}
dl.scList dd {
	font-size: 24px;
	margin-bottom: 30px;
}
dl.scList dd span.comment{
	font-size: 13px;
	letter-spacing: 0.03em;
}
ul.charaList{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	width: calc(82% + 40px);
	min-width: 1180px;
	max-width: 1460px;
	margin: 0 auto;
}
ul.charaList li{
	width: calc(25% - 40px);
	height: 320px;
	overflow: hidden;
	position: relative;
	margin: 0 20px;
	margin-bottom: 40px;
}
ul.charaList li:before{
	content: "";
	position: absolute;
	width: 100%;
	height: 240px;
	background: rgba(0,0,0,.8);
	bottom: 0;
	left: 0;
	z-index: 0;
}
ul.charaList li:after{
	content: "";
	position: absolute;
	width: 100%;
	height: 240px;
	background: url(../images/chara_bg.jpg) no-repeat center top / cover;
	-webkit-mask: url("../images/btn_sprite.png");
	mask: url("../images/btn_sprite.png");
	-webkit-mask-size: 2300% 100%;
	mask-size: 2300% 100%;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 1;
	animation: ani2 .5s steps(22) forwards;
}
ul.charaList li:hover:after{
	animation: ani .5s steps(22) forwards;
}
ul.charaList li > h3{
	position: absolute;
	right: 24px;
	top: 40px;
	z-index: 4;
}
ul.charaList li .enTxt{
	color: #2e89e4;
	font-size: 16px;
	position: absolute;
	z-index: 2;
	line-height: 1.5;
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	white-space: nowrap;
	right: 70px;
	top: 100px;
}
ul.charaList li figure{
	position: absolute;
	z-index: 3;
	margin: auto;
	right: 0;
	left: -64px;
	bottom: 0;
	width: 334px;
	transition: .6s cubic-bezier(0.02, 0.88, 0.58, 1);
}
ul.charaList li:hover figure{
	transform: translateX(30px);
}
ul.charaList li a{
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 5;
}
ul.charaList li a:before{
	content: "";
	position: absolute;
	background: url(../images/arrow_r2.png) no-repeat 0 0 / 100%;
	width: 72px;
	height: 8px;
	bottom: 24px;
	right: 24px;
	transition: .3s ease-in-out;
}
ul.charaList li:hover a:before{
	right: 10px;
}
#charaModal{
	overflow: auto;
	position: fixed;
	left: 0px;
	top: 0px;
	right: 0px;
	bottom: 0px;
	min-width: 1240px;
	min-height: 640px;
	z-index: 9999;
	-webkit-overflow-scrolling: touch;
	display: none;
}
#charaModal:before{
	content: "";
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	background: url(../images/blue_bg.jpg) no-repeat center / cover;
	-webkit-mask: url("../images/btn_sprite.png");
	mask: url("../images/btn_sprite.png");
	-webkit-mask-size: 2300% 100%;
	mask-size: 2300% 100%;
	z-index: 1;
}
#charaModalIn{
	width: 1240px;
	margin: 0 auto;
	position: relative;
	z-index: 3;
	padding: 40px 0;
	transition: .3s;
}
#charaModalIn:before{
	content: "";
	width: 40px;
	height: 100%;
	position: absolute;
	background: #000;
	right: 80px;
	top: 0;
	z-index: 1;
}
#charaModalIn:after{
	content: "";
	width: 16px;
	height: 100%;
	position: absolute;
	background: #000;
	right: 144px;
	top: 0;
	z-index: 1;
}
.oneChara{
	position: relative;
	z-index: 2;
	display: none;
}
.oneCharaIn{
	width: 100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	position: relative;
}
.oneChara figure{
	width: 520px;
}
.oneChara figure img{
	margin-left: -48px;
}
#charaDetail{
	width: 1240px;
	height: 640px;
	position: absolute;
	margin: auto;
	top: 0;
	right: 0;
	left: 0;
	pointer-events: none;
}
#charaDetail > h3{
	width: 42px;
	position: absolute;
	top: 40px;
	right: 80px;
}
.charaTxt{
	width: 480px;
	position: absolute;
	top: 70px;
	left: 520px;
}
.charaFace{
	width: 220px;
	display: table;
	margin-left: auto;
}
.charaTxt p{
	margin-bottom: 60px;
	font-size: 16px;
	color: #fff;
	line-height: 40px;
	letter-spacing: 0.03em;
}
.charaTxt p span{
	background: #000;
}
.cvName{
	color: #fff;
	font-size: 16px;
	line-height: 1;
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	white-space: nowrap;
	position: absolute;
	top: 120px;
	right: 144px;
}
.cvName > span{
	margin-bottom: 10px;
}
.charaControl{
	position: relative;
	z-index: 10;
}
.modalClose.chara{
	top: auto;
	bottom: 40px;
	right: 0;
	left: 0;
	margin: auto;
	position: fixed;
	z-index: 3;
}
ul#pager{
	width: calc(100% - 80px);
	height: 66px;
	bottom: 30px;
	right: 0;
	z-index: 2;
	position: fixed;
	left: 0;
	margin: auto;
}
ul#pager li#next{
	float: right;
}
ul#pager li#prev{
	float: left;
}
ul#pager li a{
	display: block;
	width: 66px;
	height: 66px;
	transition: .3s ease;
	transform: translateX(0);
	position: relative;
}
ul#pager li a span{
	position: absolute;
	font-size: 13px;
	color: #fff;
	bottom: 0px;
	display: block;
	width: 100%;
	text-align: center;
}
ul#pager li#next a:before{
	content: "";
	position: absolute;
	width: 66px;
	height: 1px;
	background: #fff;
	top: 11px;
	left: 0;
	transform: rotate(16deg);
}
ul#pager li#next a:after{
	content: "";
	position: absolute;
	width: 66px;
	height: 1px;
	background: #fff;
	top: 29px;
	left: 0;
	transform: rotate(-16deg);
}
ul#pager li#prev a:before{
	content: "";
	position: absolute;
	width: 66px;
	height: 1px;
	background: #fff;
	top: 11px;
	left: 0;
	transform: rotate(-16deg);
}
ul#pager li#prev a:after{
	content: "";
	position: absolute;
	width: 66px;
	height: 1px;
	background: #fff;
	top: 29px;
	left: 0;
	transform: rotate(16deg);
}
#charaModal.active:before{
	animation: ani2 .5s steps(22) .1s both;
}
#charaModal .ba{
	transition: 1.5s ease;
	-webkit-filter: blur(15px);
	-moz-filter: blur(15px);
	filter: blur(15px);
	opacity: 0;
}
#charaModal.active .ba{
	transition-delay: .5s;
	opacity: 1;
	-webkit-filter: blur(0px);
	-moz-filter: blur(0px);
	filter: blur(0px);
}
#charaModal .oa{
	opacity: 0;
	transition: 1.5s ease;
}
#charaModal.active .oa{
	transition-delay: .4s;
	opacity: 1;
}
#charaBox{
	transition: .4s ease-in-out;
	transform: translateX(0px);
	position: relative;
	z-index: 3;
}
.charaEnTxtWrap{
	transition: .4s ease-in-out;
	transform: translateX(0px);
	position: fixed;
	z-index: 2;
	top: -32px;
	left: 0;
	mix-blend-mode: screen;
}
#charaBox.active,
.charaEnTxtWrap.active{
	opacity: 0;
	transform: translateX(-10px);
}
.charaEnTxt{
	color: #2e89e4;
	font-size: 160px;
	pointer-events: none;
	line-height: 1;
}
.charaEnTxt span{
	display: block;
}
/*-- Goods --*/
.goodsLists{
	width: 964px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	margin: 0 auto;
}
.goodsItem{
	width: 180px;
	margin-right: 16px;
	margin-bottom: 34px;
}
.goodsItem:nth-child(5n){
	margin-right: 0;
}
.goodsItem a{
	display: block;
	height: 100%;
	width: 100%;
	text-decoration: none;
	transition: opacity .3s ease-in-out;
}
.goodsItem a:hover{
	opacity: .7;
}
.goodsItem__img{
	margin-bottom: 14px;
}
.goodsItem__img img{
	height: 220px;
	width: 180px;
}
.goodsItem__name{
	color: #fff;
	font-size: 16px;
}
.goodsItemB__img{
	margin-bottom: 14px;
}
.goodsItemB__img img{
	height: 258px;
	width: 180px;
}
article.goodsDetail {
	width: 920px;
	margin: 0 auto 80px;
	padding: 40px;
	border: 1px solid rgba(255,255,255,.4);
	background-color: rgba(0,0,0,.4);
}
.goodsDetail__title {
	border-bottom: 1px solid rgba(255,255,255,.4);
	color: #fff;
	font-size: 20px;
	margin-bottom: 32px;
	padding-bottom: 20px;
}
.goodsDetail__text p {
	font-size: 16px;
	margin-bottom: 40px;
}
.goodsDetail__title a {
	color: #ebe38b;
}
.goodsDetail__title a:hover {
	color: #ebe38b;
	text-decoration: none;
}

.goodsDetail__text__img{
	margin-bottom: 40px;
	max-width: 100%;
}
.detailLink{
	display: table;
	margin: 0 auto;
	position: relative;
}
.detailLink a {
	text-decoration: none;
	color: #fff;
	line-height: 1;
	padding: 14px 50px;
	display: block;
	transition: .3s ease;
}
.detailLink a:hover{
	transition-delay: .3s;
	color: #ece48b;
}
.detailLink:after {
	content: "";
	position: absolute;
	width: calc(100% - 2px);
	height: calc(100% - 2px);
	top: 0;
	left: 0;
	pointer-events: none;
	border: 1px solid rgba(255,255,255,.4);
	z-index: 5;
}
.playBtn{
	display: table;
	margin: 0 auto;
	background-color: rgba(0,0,0,.4);
	position: relative;
}
.playBtn:after{
	content: "";
	position: absolute;
	width: calc(100% - 2px);
	height: calc(100% - 2px);
	top: 0;
	left: 0;
	pointer-events: none;
	border: 1px solid rgba(255,255,255,.4);
	z-index: 5;
		display:block !important;
}
.playBtn a{ 
	padding: 14px 0;
	text-decoration: none;
	color: #fff;
	font-size: 16px;
	line-height: 1;
	display: block;
		width:207px;
		text-align:center;
}
.playBtn .pause {
	display:none;
}


.playBtn_jf{
	display: table;
	margin: 0 auto;
	background-color: rgba(0,0,0,.4);
	position: relative;
}
.playBtn_jf:after{
	content: "";
	position: absolute;
	width: calc(100% - 2px);
	height: calc(100% - 2px);
	top: 0;
	left: 0;
	pointer-events: none;
	border: 1px solid rgba(255,255,255,.4);
	z-index: 5;
		display:block !important;
}
.playBtn_jf a{ 
	padding: 14px 0;
	text-decoration: none;
	color: #fff;
	font-size: 16px;
	line-height: 1;
	display: block;
	width:560px;
	text-align:center;
}
.playBtn_jf .pause {
	display:none;
}

.eventNone {
	pointer-events: none;
}

/* ▼SP-CSS▼ -----------------------------------
-------------------------------------------------*/

@media screen and (max-width:768px) { 
	#topLoading {
		min-width: auto;
		min-height: auto;
	}
	#blueBg {
		min-width: auto;
		min-height: auto;
	}
	#cMark {
		transform: scale(0.8);
	}
	.comW { 
		width: auto;
		padding: 0 20px;
	}
	#subContWrap {
		margin-bottom: 0;
	}
	#bnrArea{ 
		width: auto;
		padding: 0 10px;
		margin-bottom: 40px;
	}
	#bnrArea li {
		width: calc(50% - 10px);
		margin: 0 0 10px;
	}
	#bnrArea li:nth-child(odd){
		margin-right: 5px;
	}
	#bnrArea li:nth-child(even){
		margin-left: 5px;
	}
	#headIn .shareBox{ 
		z-index: 2;
		margin-top: 50px;
	}
	.navTw a > span:after {
		top: 1px;
		right: auto;
		left: 85px;
	}
	#headIn .shareBox{
		position: relative;
		width: auto;
		height: auto;
		display: block;
	}
	#headIn .shareBox > h2 {
		font-size: 14px;
		font-size: 1.4rem;
		margin-right: 0;
		padding-top: 0;
		text-align: center;
	}
	.shareBox > ul  {
		width: 46%;
		min-width: 220px;
		margin: 0 auto;
	}
	.shareBox > ul li {
		width: 33.3%;
		height: auto;
		position: relative;
	}
	.shareBox > ul li:before {
		content: "";
		display: block;
		padding-top: 100%;
	}
	.shareBox > ul li a{
		position: absolute;
		top: 0;
		left: 0;
	}
	.shareBox > ul li.tw img { width: 33%; height: auto; }
	.shareBox > ul li.fb img { width: 33%; height: auto; }
	.shareBox > ul li.ln img { width: 33%; height: auto; }
	#subContWrap > h2:before,
	#subContWrap > h2:after{
		width: 36px;
		height: 71px;
	}
	#subContWrap > h2 span:first-of-type {
		font-size: calc(1em + 4.6vw);
		margin-bottom: 11px;
		padding-top: 4px;
		letter-spacing: 0.08em;
	}
	#subContWrap > h2 span:last-of-type {
		font-size: calc(1em + 0.6vw);
		letter-spacing: 0.1em;
	}
	#subContWrap > h2 {
		margin: 0 auto 60px;
		padding: 0 46px;
	}
	.inTtl_01 {
		font-size: calc(1em + 2vw);
		margin-bottom: 40px;
	}
	.inTtl_01 > span {
		padding: 0 40px;
	}
	.inTtl_01 > span:before,
	.inTtl_01 > span:after {
		width: 23px;
		height: 5px;
	}
	.inTtl_01 > span:before{
		left: -2px;
	}
	.inTtl_01 > span:after{
		right: -2px;
	}
	.txtC {
		font-size: 16px;
		font-size: 1.6rem;
		margin-bottom: 30px;
	}
	ul.comicsList {
		margin-left: auto;
		margin-right: auto;
	}
	ul.comicsList li {
		width: calc(50% - 10px);
		margin: 0 0 20px;
	}
	ul.comicsList li:nth-child(odd){
		margin-right: 10px;
	}
	ul.comicsList li:nth-child(even){
		margin-left: 10px;
	}
	.movList li{
		width: 100% !important;
	}
	.epList li{
		width: 43% !important;
		float: left;
		margin: 0 20px 20px 0 !important;
	}	
	.epList li:nth-child(2n){
		margin: 0 0 20px 0 !important;
	}		
	.movThumbWrap {
		height: auto;
		padding-top: 56.25%;
		margin-bottom: 12px;
	}
	.spThumbWrap {
		height: auto;
		padding-top: 71%;
		margin-bottom: 12px;
	}
	
	.epThumbWrap {
		height: auto;
		padding-top: 55.25%;
		margin-bottom: 12px;
	}
	
	.movThumb > span{
		transform: scale(0.8);
	}
	ul.normalList li > p{
		font-size: 12px;
		font-size: 1.2rem;
	}
	#movModal,
	#soundModal {
		min-width: auto;
		min-height: auto;
	}

	#movModalIn {
		width: 100%;
		height: auto;
		top: 50%;
		transform: translateY(-50%);
		bottom: auto;
		right: auto;
	}
	#soundModalIn {
		width:80%;
	}
	#soundModalIn_if p {
		font-size:1.2rem;
	}
	#soundModalIn_if h3 {
		font-size:1.4rem;
	}
	#soundModalIn_if p.playBtn {
		margin-bottom: 50px;
	}
	#movModalIn_if{
		width: 100%;
		height: auto;
		padding-top: 56.25%;
		position: relative;
	}
	#movModalIn iframe {
		position: absolute;
		top: 0;
		left: 0;
	}
	.modalClose {
		top: auto;
		right: 0;
		bottom: -60px;
		left: 0;
		margin: auto;
	}
	#soundModal .modalClose {
		position: static;
		margin: auto;
	}
	ul.normalList.andW li > h4 {
		font-size: 1.5rem;
		letter-spacing: 0.1em;
		white-space: nowrap;
		line-height: 1;
		margin-bottom: 5px;
	}
	ul.normalList.andW li > p {
		font-size: 1.9rem;
	}
	ul.normalList.andW li > p.comment {
		font-size: 1.4rem;
	}
	.normalBox {
		margin-bottom: 20px;
	}
	ul.normalList li.w100{
		width: 100%;
	}
	ul.normalList li{
		line-height: 2;
	}
	.oaTxt {
		width: calc(100% - 40px);
		height: auto;
		padding-top: 23%;
		margin: 0 auto 40px;
	}
	.oaTxt2 {
		width: calc(100% - 40px);
		height: auto;
		padding-top: 25%;
		margin: 0 auto 80px;
	}
	ul.normalList li > h4 {
		font-size: 15px;
		font-size: 1.5rem;
	}
	#subContWrap > h2.isVer span:first-of-type{
		padding-top: 0;
	}
	.introBox {
		width: auto;
	}
	.introCatch_1 {
		width: 100%;
		height: auto;
		padding-top: 8.8%;
		margin-bottom: 22px;
	}
	.introCatch_1Wrap{
		padding: 0 20px;
	}
	.introTxt {
		padding: 0 20px;
	}
	.introTxt p{
		font-size: 3.6vw;
		line-height: 2.2;
	}
	.introTop {
		margin-bottom: 50px;
	}
	.introCatch_2 {
		width: 44%;
		height: auto;
		z-index: 2;
		margin-right: 17px;
	}
	.introCatch_2 p {
		width: 100%;
		height: auto;
		padding-top: 194.5%;
		position: relative;
		right: 0;
	}
	#introVs {
		width: 67%;
		height: auto;
		padding-top: 66.4%;
		top: 10%;
		left: -50px;
		z-index: 1;
	}
	.smoke01{
		width: 80%;
		height: auto;
		padding-top: 32.2%;
		top: 17.5%;
	}
	.smork02 {
		width: 70%;
		height: auto;
		padding-top: 89.3%;
		mix-blend-mode: screen;
		margin: auto;
		right: 0;
		left: auto;
		top: auto;
		bottom: 24%;
		transform: none;
	}
	.smork01 {
		width: 50%;
		height: auto;
		padding-top: 69.1%;
		mix-blend-mode: screen;
		margin: auto;
		right: auto;
		left: -60px;
		top: 12%;
		transform: none;
	}
	ul.newsList{
		margin-bottom: 40px;
	}
	ul.newsList li{
		margin-bottom: 20px;
	}
	ul.newsList li a {
		padding: 12px;
		display: block;
	}
	ul.newsList li:before {
		background: url(../images/arrow_r.svg) no-repeat 0 0 / 100%;
		width: 33px;
		height: 8px;
		right: 12px;
		bottom: 12px;
	}
	.newsDate {
		font-size: 10px;
		font-size: 1rem;
		width: 100%;
		margin-bottom: 5px;
	}
	.newsTitle {
		font-size: 12px;
		font-size: 1.2rem;
		width: 100%;
		margin-bottom: 10px;
	}
	ul.newsList li .newsTitle:after {
		content: none;
	}
	article.newsDetail {
		width: calc(100% - 24px);
		margin: 0 auto 50px;
		padding: 30px 12px;
	}
	article.newsDetail > h3 .newsTitle {
		font-size: 14px;
		font-size: 1.4rem;
	}
	article.newsDetail > h3 {
		margin-bottom: 22px;
		padding-bottom: 10px;
	}
	.newsDetailTxtArea {
		font-size: 12px;
		font-size: 1.2rem;
		line-height: 2;
	}
	.newsDetailTxtArea .ifWrap {
		width: 100%;
		height: auto;
		position: relative;
		padding-top: 56.25%;
	}
	.newsDetailTxtArea .ifWrap iframe{
		position: absolute;
		top: 0;
		left: 0;
	}
	.newsDetailTxtArea p {
		margin-bottom: 30px;
	}
	.newsNote > h4 {
		margin-bottom: 10px;
	}
	.newsNote p, .newsNote img, .newsNote .ifWrap {
		margin-bottom: 30px;
	}
	.newsNote {
		padding: 12px;
	}
	.newsDetailTxtArea p .iL, .newsDetailTxtArea p .iR {
		display: block;
		margin: 0 auto 20px;
	}
	.newsDetailTxtArea img {
		max-width: 100%;
		height: auto;
		width: auto;
	}
	.t14 {
	font-size: 11px;
}	

	.aLink a {
		font-size: 12px;
		font-size: 1.2rem;
		padding: 12px;
	}
	.backTo{
		margin-bottom: 40px;
	}
	.backTo a {
		padding: 12px 54px;
		font-size: 12px;
		font-size: 1.2rem;
	}
	.scListBox {
		width: 100%;
		margin-bottom: 60px;
	}
	.scListBox:first-child{
		padding-right: 0;
	}
	.scListBox:last-child{
		padding-left: 0;
	}
	dl.scList dt {
		font-size: 13px;
		font-size: 1.3rem;
		margin-right: 0;
		float: none;
		padding-top: 0;
	}
	dl.scList dd {
		font-size: 16px;
		font-size: 1.6rem;
		margin-bottom: 24px;
	}
	dl.scList dd span.comment {
		font-size: 11px;
		font-size: 1.1rem;
		display: block;
	}
	dl.scList dd:last-of-type{
		margin-bottom: 0;
	}
	.commentLinks > span small{
		font-size: 8px;
		font-size: 0.8rem;
	}
	ul.charaList {
		width: 100%;
		display: block;
		max-width: auto;
		min-width: auto;
	}
	ul.charaList li {
		float: left;
		width: calc(50% - 24px);
		height: auto;
		margin-right: 12px;
		margin-left: 12px;
		margin-bottom: 30px;
		padding-top: 43.4%;
	}
	ul.charaList li figure{
		width: 100%;
		left: -21%;
		height:100%;
	}
	ul.charaList li figure img {
		width:auto;
		height:100%;
	}
	ul.charaList li:after {
		height: 74%;
	}
	ul.charaList li:before {
		height: 74%;
	}
	ul.charaList li > h3 {
		right: 6%;
		top: 9%;
		width: 11%;
	}
	ul.charaList li .enTxt {
		font-size: 2.8vw;
		right: 20%;
		top: 34%;
		width: 100%;
	}
	ul.charaList li a:before {
		width: 21%;
		height: auto;
		bottom: 7%;
		right: 6%;
		padding-top: 2.6%;
	}
	#charaModal {
		min-width: auto;
		min-height: auto;
	}
	#charaModal:before {
		background: url(../images/nav_bg.jpg) no-repeat center / cover;
	}
	#charaModalIn{
		width: 100%;
		padding: 40px 0 130px;
	}
	.oneCharaIn{
		display: block;
	}
	.oneChara figure {
		width: 100%;
		margin-bottom: 30px;
	}
	.oneChara figure img {
		margin-left: 0;
	}
	#charaModalIn:before {
		width: 30px;
		right: 24px;
		position: fixed;
	}
	#charaModalIn:after {
		width: 14px;
		position: fixed;
		right: 68px;
	}
	#charaDetail {
		width: 100%;
		height: auto;
		position: initial;
	}
	#charaDetail > h3 {
		width: 30px;
		top: 0px;
		right: 24px;
	}
	.cvName {
		font-size: 14px;
		font-size: 1.4rem;
		top: 50px;
		right: 68px;
	}
	.charaTxt {
		width: 100%;
		position: relative;
		top: auto;
		left: auto;
		padding: 0 20px;
	}
	.charaTxt p {
		margin-bottom: 40px;
		font-size: 13px;
		font-size: 1.3rem;
		line-height: 2.6;
		letter-spacing: 0.1em;
	}
	.charaFace {
		width: 40%;
		display: block;
		margin: 0 auto;
	}
	.charaEnTxtWrap{
		top: 0;
		left: -17px;
	}
	.charaEnTxt {
		font-size: 22.6vw;
		line-height: 1;
		-webkit-writing-mode: vertical-rl;
		-ms-writing-mode: tb-rl;
		writing-mode: vertical-rl;
		white-space: nowrap;
		padding-left: 30px;
	}
	ul#pager{
		width: calc(100% - 40px);
		height: 53px;
		bottom: 20px;
	}
	ul#pager li a{
		width: 40px;
		height: 52px;
	}
	ul#pager li a span{
		font-size: 10px;
		font-size: 1rem;
	}
	ul#pager li#next a:before{
		width: 40px;
		top: 11px;
	}
	ul#pager li#next a:after{
		width: 40px;
		top: 22px;
	}
	ul#pager li#prev a:before{
		width: 40px;
		top: 11px;
	}
	ul#pager li#prev a:after{
		width: 40px;
		top: 22px;
	}
	ul#pager li#next a:hover{
		transform: translateX(0);
	}
	ul#pager li#prev a:hover{
		transform: translateX(0);
	}
	.modalClose.chara {
		bottom: 20px;
		transform: scale(0.8);
	}
	.modalClose.chara a span:first-child,
	.modalClose.chara a span:last-child{
		height: 2px;
	}
	/*-- Goods --*/
	.goodsLists{
		width: auto;
		padding: 0 15px;
	}
	.goodsItem {
		width: calc(50% - 10px);
		margin-right: 5px;
		margin-left: 5px;
		margin-bottom: 34px;
	}
	.goodsItem__img {
		margin-bottom: 10px;
	}
	.goodsItem__img img{
		height: auto;
		width: 100%;
	}
	.goodsItemB__img {
		margin-bottom: 10px;
	}
	.goodsItemB__img img{
		height: auto;
		width: 100%;
	}
	.goodsItem:nth-child(5n) {
		margin-right: 5px;
	}
	.goodsItem__name {
		font-size: 12px;
		font-size: 1.2rem;
	}
	article.goodsDetail {
		width: calc(100% - 24px);
		margin: 0 auto 50px;
		padding: 30px 12px;
	}
	.goodsDetail__title {
		font-size: 14px;
		font-size: 1.4rem;
		margin-bottom: 22px;
		padding-bottom: 10px;
	}
	.goodsDetail__text p {
		font-size: 12px;
		font-size: 1.2rem;
		line-height: 2;
		margin-bottom: 30px;
	}     
	.goodsDetail__text__img {
		margin-bottom: 30px;
	}
		.playBtn{
		margin-bottom: 40px;
	}
	.playBtn a {
		padding: 12px 0;
		font-size: 12px;
		font-size: 1.2rem;
		width:144px;
	}
	.playBtn_jf a {
		padding: 12px 0;
		font-size: 12px;
		font-size: 1.2rem;
		width:340px;
	}

}

}/*-----[[RESPONSIVE END]]-----*/