@charset "utf-8";
html { overflow: auto; }
body {
	font-size: 14px;
	line-height: 1.8;
}
a { color: #fff; }
a:hover { text-decoration: none; }
.ah { transition: all .4s ease; }
.ah:hover { opacity: 0.7; }
br.pc { display: block; }
br.sp { display: none; }
body#index #fullWrap {
	width: 1280px;
	height: 620px;
}
body#index #inWrap {
	min-width: 1280px;
	min-height: 620px;
	width: 100%;
	height: 100%;
	position: absolute;
	overflow: hidden;
}
body#index #rightArea {
	margin-left: 303px;
	position: relative;
	height: 100%;
	min-height: 620px;
}
.linkA {
	position: relative;
	display: block;
	text-decoration: none;
	transition: .3s ease-in-out;
	z-index: 0;
}
.linkA:hover { color: #fff; }
.linkA:after {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -1;
	content: '';
	background: #000;
	transform-origin: right top;
	transform: scale(0, 1);
	transition: transform .3s;
}
.linkA:hover:after {
	transform-origin: left top;
	transform: scale(1, 1);
}
.linkB {
	position: relative;
	display: block;
	text-align: center;
	text-decoration: none;
	transition: .3s;
	z-index: 0;
}
.linkB:hover { color: #fff; }
.linkB:after {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -1;
	content: '';
	background: #1f1f1f;
	transform-origin: right top;
	transform: scale(0, 1);
	transition: transform .3s;
}
.linkB:hover:after {
	transform-origin: left top;
	transform: scale(1, 1);
}
.linkC {
	position: relative;
	display: block;
	text-align: center;
	text-decoration: none;
	transition: .3s;
	z-index: 0;
}
.linkC:hover { color: #000; }
.linkC:after {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -1;
	content: '';
	background: #fff;
	transform-origin: right top;
	transform: scale(0, 1);
	transition: transform .3s;
}
.linkC:hover:after {
	transform-origin: left top;
	transform: scale(1, 1);
}
.linkinC .link {
	position: relative;
	display: block;
	text-align: center;
	text-decoration: none;
	transition: .3s;
	z-index: 0;
}
.linkinC:hover .link,
.linkinC.active .link { color: #000; }
.linkinC .link:after {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -1;
	content: '';
	background: #fff;
	transform-origin: right top;
	transform: scale(0, 1);
	transition: transform .3s;
}
.linkinC:hover .link:after,
.linkinC.active .link:after {
	transform-origin: left top;
	transform: scale(1, 1);
}
body#index .owl-controls { display: none; }
#loading {
	background: #000;
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: 10000;
}
/* ▼HEADER▼ --------------------------------- 
-------------------------------------------------*/

#menuBtn { display: none; }
header {
	width: 303px;
	box-sizing: border-box;
	position: fixed;
	height: 100%;
	min-height: 570px;
}
header:before {
	content: "";
	background: url(../img/common/symbol02_w.svg) no-repeat 0 0 / 100%;
	width: 37px;
	height: 37px;
	position: absolute;
	left: 34px;
	margin: auto;
	top: 0;
	bottom: 0;
	padding-bottom: 23px;
}
header:after {
	content: "";
	background: url(../img/common/menu.svg) no-repeat 0 0 / 100%;
	width: 23px;
	height: 11px;
	position: absolute;
	left: 41px;
	margin: auto;
	top: 0;
	bottom: -45px;
}
header h1 {
	position: absolute;
	top: 76px;
	left: 39px;
	width: 227px;
	height: 32px;
}
header h1 img { width: 100%; }
header nav {
	position: absolute;
	width: 303px;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
}
header nav > ul { padding-left: 108px; }
header nav > ul li {
	width: 150px;
	height: 30px;
	line-height: 30px;
	font-size: 12px;
	letter-spacing: 0.1em;
}
header nav > ul li a {
	display: block;
	width: 100%;
	height: 100%;
	text-decoration: none;
	color: #fff;
	transition: .6s;
}
header nav > ul li a.active { text-shadow: 0px 0px 6px #15B0C2, 0px 0px 6px #15B0C2; }
header nav > ul li a:hover {
	animation: glitch 1.5s ease infinite;
	text-shadow: 0px 0px 6px #15B0C2, 0px 0px 6px #15B0C2;
}
body#index header nav > ul li {
	opacity: 0;
	transform: translateX(10px);
	transition: .3s ease-in-out;
}
body#index header nav > ul li.active {
	opacity: 1;
	transform: translateX(0);
}
@keyframes glitch {  0%, 20%, 33%, 60%, 64%, 66%, 69%, 73%, 75%, 90%, 93%, 100% {
 transform: skew(0deg);
}
 21%, 81% {
 transform: skew(30deg, 0deg);
}
 22%, 82% {
 transform: skew(-30deg, 0deg);
}
 61% {
 transform: skew(35deg);
}
 62% {
 transform: skew(-15deg, -8deg);
}
 65% {
 transform: skew(15deg, -8deg);
}
 70% {
 transform: skew(-65deg);
}
 74% {
 transform: skew(15deg, -15deg);
}
}
/*header nav > ul li:nth-child(11){
    width: 150px;
    height: 35px;
    line-height: 18px;
    margin-top: 20px;
}
header nav > ul li:nth-child(12){
    margin-top: 26px;
}*/
@keyframes stopRotate { 0% {
 transform:rotateY(0deg);
}
 50% {
 transform:rotateY(360deg);
}
 100% {
 transform:rotateY(360deg);
}
}
header:before {
	display: block;
	animation: stopRotate 4s ease infinite;
}
/* ▼INDEX▼ --------------------------------- 
-------------------------------------------------*/

#topMovie,
#newsMore { display: none; }
#mainVs {
	position: absolute;
	left: 0px;
	top: 0px;
	right: 55%;
	bottom: 0px;
}
#mainVs:before {
	content: "";
	background: #000;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	right: 0;
	z-index: 1;
	transition: .4s cubic-bezier(0.02, 0.88, 0.58, 1);
}
#mainVs.active:before { width: 0; }
#mainVs > span {
	background-image: url(../img/pc/main_vs.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
	position: absolute;
	left: 0;
	top: 7px;
	right: 0;
	bottom: 7px;
	display: block;
}
#mainVs img { display: none; }
#startDate,
#newsArea {
	position: absolute;
	left: 45%;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
}
#startDate p {
	position: absolute;
	background: url(../img/pc/start_date.png) no-repeat 0 0 / 100%;
	width: 351px;
	height: 147px;
	margin: auto;
	top: 0;
	right: 0;
	bottom: -260px;
	left: 0;
	z-index: 1;
}
/*#startDate:after{
    content: "";
    position: absolute;
    background: url(../img/common/symbol02_g.svg) no-repeat 0 0 / 100%;
    width: 282px;
    height: 282px;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 0;
}*/
@keyframes noise-anim {  0% {
 clip: rect(77px, 9999px, 6px, 0);
}
 5% {
 clip: rect(65px, 9999px, 70px, 0);
}
 10% {
 clip: rect(82px, 9999px, 82px, 0);
}
 15% {
 clip: rect(32px, 9999px, 35px, 0);
}
 20% {
 clip: rect(31px, 9999px, 49px, 0);
}
 25% {
 clip: rect(18px, 9999px, 46px, 0);
}
 30% {
 clip: rect(94px, 9999px, 64px, 0);
}
 35% {
 clip: rect(69px, 9999px, 31px, 0);
}
 40% {
 clip: rect(6px, 9999px, 72px, 0);
}
 45% {
 clip: rect(25px, 9999px, 35px, 0);
}
 50% {
 clip: rect(82px, 9999px, 26px, 0);
}
 55% {
 clip: rect(7px, 9999px, 92px, 0);
}
 60% {
 clip: rect(54px, 9999px, 30px, 0);
}
 65% {
 clip: rect(86px, 9999px, 90px, 0);
}
 70% {
 clip: rect(38px, 9999px, 65px, 0);
}
 75% {
 clip: rect(41px, 9999px, 66px, 0);
}
 80% {
 clip: rect(31px, 9999px, 37px, 0);
}
 85% {
 clip: rect(8px, 9999px, 12px, 0);
}
 90% {
 clip: rect(50px, 9999px, 69px, 0);
}
 95% {
 clip: rect(7px, 9999px, 42px, 0);
}
 100% {
 clip: rect(14px, 9999px, 57px, 0);
}
}
@keyframes noise-anim-2 {  0% {
 clip: rect(18px, 9999px, 13px, 0);
}
 5% {
 clip: rect(74px, 9999px, 51px, 0);
}
 10% {
 clip: rect(33px, 9999px, 65px, 0);
}
 15% {
 clip: rect(64px, 9999px, 66px, 0);
}
 20% {
 clip: rect(75px, 9999px, 6px, 0);
}
 25% {
 clip: rect(40px, 9999px, 49px, 0);
}
 30% {
 clip: rect(71px, 9999px, 1px, 0);
}
 35% {
 clip: rect(42px, 9999px, 73px, 0);
}
 40% {
 clip: rect(92px, 9999px, 57px, 0);
}
 45% {
 clip: rect(4px, 9999px, 33px, 0);
}
 50% {
 clip: rect(4px, 9999px, 34px, 0);
}
 55% {
 clip: rect(49px, 9999px, 25px, 0);
}
 60% {
 clip: rect(24px, 9999px, 44px, 0);
}
 65% {
 clip: rect(31px, 9999px, 99px, 0);
}
 70% {
 clip: rect(54px, 9999px, 83px, 0);
}
 75% {
 clip: rect(57px, 9999px, 97px, 0);
}
 80% {
 clip: rect(3px, 9999px, 15px, 0);
}
 85% {
 clip: rect(84px, 9999px, 34px, 0);
}
 90% {
 clip: rect(100px, 9999px, 88px, 0);
}
 95% {
 clip: rect(91px, 9999px, 59px, 0);
}
 100% {
 clip: rect(10px, 9999px, 87px, 0);
}
}
#symBgTop {
	width: 282px;
	height: 282px;
	margin: auto;
	left: 0;
	right: 0;
	top: -50px;
	bottom: 0;
	z-index: 0;
	position: absolute;
	perspective: 564px;
}
#symBgTop span {
	display: block;
	animation: stopRotate 4s 3s ease infinite;
}
#startDate h1 {
	width: 444px;
	height: 62px;
	margin: auto;
	left: 0;
	right: 0;
	top: -60px;
	bottom: 0;
	z-index: 1;
	position: absolute;
}
#startDate h1.active { animation: glitch 1s linear; }
#startDate h1.active:before {
	content: "";
	position: absolute;
	background-image: url(../img/pc/top_mainlogo.png);
	background-size: 100%;
	background-position: 0 0;
	background-repeat: no-repeat;
	width: 444px;
	height: 62px;
	top: 0;
	left: 0;
	clip: rect(0, 900px, 0, 0);
	filter: drop-shadow(2px 2px 2px rgba(35,184,197,1));
	animation: noise-anim .5s linear alternate-reverse;
	opacity: .8;
}
#startDate h1.active:after {
	content: "";
	position: absolute;
	background-image: url(../img/pc/top_mainlogo.png);
	background-size: 100%;
	background-position: 0 0;
	background-repeat: no-repeat;
	width: 444px;
	height: 62px;
	top: 0;
	left: 0;
	clip: rect(0, 900px, 0, 0);
	filter: drop-shadow(2px 2px 2px rgba(274,27,27,1));
	animation: noise-anim-2 1s linear alternate-reverse;
	opacity: .8;
}
/*#startDate:before{
    content: "";
    position: absolute;
    background: url(../img/pc/top_mainlogo.png) no-repeat 0 0 / 100%;
    width: 444px;
    height: 62px;
    margin: auto;
    left: 0;
    right: 0;
    top: -30px;
    bottom: 0;
    z-index: 1;
}*/
#newsArea { z-index: 2; }
#newsTop {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 7px;
	height: 68px;
}
#newsTop h2 {
	position: absolute;
	top: 0;
	left: 0;
	width: 62px;
	height: 21px;
}
#newsTop h2 img {
	width: 27px;
	position: absolute;
	margin: auto;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
}
#newsTop ul {
	height: 100%;
	padding-bottom: 7px;
}
#newsTop ul li {
	position: relative;
	padding-top: 34px;
	font-size: 12px;
	padding-left: 17px;
}
#newsTop ul li span {
	position: absolute;
	font-size: 15px;
	display: block;
	color: #000;
	width: 83px;
	height: 21px;
	line-height: 23px;
	text-align: center;
	background: #fff;
	top: 0;
	left: 62px;
	letter-spacing: 0.03em;
}
#newsTop ul li a {
	text-decoration: none;
	letter-spacing: 0.05em;
	transition: .3s ease;
}
#newsTop ul li a:hover { text-shadow: 0px 0px 6px #15B0C2, 0px 0px 6px #15B0C2; }
#newsList { background: #000; }
/*--NEW CSS↓--*/
#newVisual {
	position: fixed;
	overflow: auto;
	z-index: 9999;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}
#newVisual:before {
	content: "";
	position: fixed;
	width: 100%;
	height: 0;
	background: rgba(0,0,0,.85);
	bottom: 0;
	transition: .4s cubic-bezier(0.02, 0.88, 0.58, 1);
}
#newVisual.active:before { height: 100%; }
#newVisual.active { pointer-events: auto; }
#newVisual > div {
	display: none;
	width: 100%;
	height: 100%;
}
#newVisualIn {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	width: 580px;
	height: auto;
	margin: 0 auto;
	min-height: 100vh;
	min-height: 100%;
	padding: 30px 0;
	position: relative;
	transition: .4s ease-in-out;
	pointer-events: none;
}
#newVisualIn > div > figure {
	width: 580px;
	height: 821px;
	margin: 0 auto 10px;
	background: url(../img/common/new_visual.jpg) no-repeat 0 0 / 100%;
}
#newVisualIn > div > figcaption {
	color: #fff;
	font-size: 16px;
	font-weight: bold;
	text-align: center;
	letter-spacing: 0.05em;
}
/*--NEW-1213 CSS↓--*/

#mvBnr {
	position: fixed;
	overflow: auto;
	z-index: 9999;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}
#mvBnr:before {
	content: "";
	position: fixed;
	width: 100%;
	height: 0;
	background: rgba(0,0,0,.85);
	bottom: 0;
	transition: .4s cubic-bezier(0.02, 0.88, 0.58, 1);
}
#mvBnr.active:before { height: 100%; }
#mvBnr.active { pointer-events: auto; }
#mvBnr > div {
	display: none;
	width: 100%;
	height: 100%;
}
#mvBnrIn { pointer-events: none; }
#mvBnrIn > div > figure {
	width: 800px;
	height: 407px;
	margin: auto;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}
.modalClose {
	width: 60px;
	height: 60px;
	position: fixed;
	margin: auto;
	top: 0;
	bottom: 0;
	right: 60px;
	z-index: 1000000;
	transition: .4s ease-in-out;
	opacity: 0;
	pointer-events: none;
}
.modalClose.active {
	opacity: 1;
	pointer-events: auto;
}
.modalClose a {
	display: block;
	width: 100%;
	height: 100%;
	position: relative;
}
.modalClose a img {
	transition: all .6s;
	width: 100%;
}
.modalClose a:hover img { transform: rotate(360deg); }
/* ▼FOOTER▼ --------------------------------- 
-------------------------------------------------*/

body#index footer #nav,
body#index #copyright,
#bttop,
.shareTxt,
ul.share li.ln,
body#index #fmark { display: none; }
body#index ul#psyLink {
	position: absolute;
	width: 230px;
	height: 110px;
	left: 37px;
	bottom: 0;
}
body#index ul#psyLink li { margin-bottom: 7px; }
body#index ul#psyLink li:last-child { margin-bottom: 0; }
body#index ul#psyLink li a {
	width: 100%;
	background: #FFF;
	display: block;
	height: 30px;
	line-height: 32px;
	color: #000;
	text-decoration: none;
	position: relative;
	font-size: 10px;
	letter-spacing: 0.1em;
	transition: .3s ease;
}
body#index ul#psyLink li a:hover { color: #fff; }
ul#psyLink li a span {
	position: absolute;
	width: 100%;
	height: 100%;
	display: block;
	top: 0;
	left: 0;
	transition: .3s ease;
	padding-left: 8px;
}
ul#psyLink li a span:before {
	content: "";
	position: absolute;
	background: url(../img/common/triangle_r.svg) no-repeat 0 0 / 100%;
	width: 4px;
	height: 6px;
	right: 10px;
	margin: auto;
	top: 0;
	bottom: 0;
	transform: translateX(0);
	transition: .3s ease;
}
ul#psyLink li a:hover span:before {
	background: url(../img/common/triangle_r_w.svg) no-repeat 0 0 / 100%;
	transform: translateX(10px);
}
body#index ul.share {
	position: absolute;
	width: 83px;
	height: 42px;
	right: 20px;
	top: 20px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	z-index: 2;
}
body#index ul.share li {
	background: #000;
	border: 1px solid #1f1f1f;
	width: 42px;
	height: 42px;
}
body#index ul.share li a {
	display: block;
	height: 42px;
}
body#index ul.share li.fb { margin-left: -1px; }
body#index ul.share li.tw a img { width: 17px; }
body#index ul.share li.fb a img {
	width: 8px;
	padding-top: 10px;
}
/* ▼SUB-COMMON▼ --------------------------------- 
-------------------------------------------------*/

.subInCont {
	opacity: 0;
	transform: translateX(20px);
	transition: .3s ease-in-out;
}
.subInCont.active {
	transform: translateX(0);
	opacity: 1;
}
body#sub #fullWrap {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	min-height: 100vh;
}
body#sub footer { margin-top: auto; }
body#sub header ul#psyLink {
	position: absolute;
	width: 230px;
	height: 120px;
	left: 37px;
	bottom: 10px;
}
body#sub header ul#psyLink li { margin-bottom: 7px; }
body#sub header ul#psyLink li:last-child { margin-bottom: 0; }
body#sub header ul#psyLink li a {
	width: 100%;
	background: #FFF;
	display: block;
	height: 30px;
	line-height: 32px;
	color: #000;
	text-decoration: none;
	position: relative;
	font-size: 10px;
	letter-spacing: 0.1em;
	transition: .3s ease;
}
body#sub header ul#psyLink li a:hover { color: #fff; }
body#sub ul.share {
	position: absolute;
	width: 83px;
	height: 42px;
	left: 50%;
	top: 267px;
	margin-left: -42px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	z-index: 2;
}
body#sub ul.share li {
	background: #000;
	border: 1px solid #1f1f1f;
	width: 42px;
	height: 42px;
}
body#sub ul.share li a {
	display: block;
	height: 42px;
}
body#sub ul.share li.fb { margin-left: -1px; }
body#sub ul.share li.tw a img { width: 17px; }
body#sub ul.share li.fb a img {
	width: 8px;
	padding-top: 10px;
}
body#sub #fullWrap {
	min-width: 1280px;
	overflow: hidden;
	position: relative;
}
body#sub #rightArea,
body#sub footer {
	margin-left: 303px;
	overflow: hidden;
}
body#sub footer { position: relative; }
.subCont > h2 {
	position: relative;
	height: 38px;
}
.subCont > h2 span {
	text-align: center;
	color: #000;
	background: #fff;
	padding: 5px 34px;
	font-size: 16px;
	display: inline-block;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 0;
}
footer #nav ul {
	margin: 70px auto 84px;
	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;
}
footer #nav li {
	margin-left: 8px;
	margin-right: 8px;
	position: relative;
}
footer #nav li a {
	color: #fff;
	text-decoration: none;
	font-size: 12px;
	letter-spacing: 0.05em;
	transition: .3s ease;
}
footer #nav li a:hover { opacity: .5; }
body#sub footer ul#psyLink {
	width: 692px;
	height: 30px;
	margin: 0 auto;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	position: absolute;
	left: 0;
	right: 0;
	top: 110px;
}
body#sub footer ul#psyLink li { margin-right: 4px; }
body#sub footer ul#psyLink li:last-child { margin-right: 0; }
body#sub footer ul#psyLink li a {
	width: 230px;
	background: #FFF;
	display: block;
	height: 30px;
	line-height: 30px;
	color: #000;
	text-decoration: none;
	position: relative;
	font-size: 10px;
	letter-spacing: 0.1em;
	transition: .3s ease;
}
body#sub footer ul#psyLink li a:hover { color: #fff; }
#copyright {
	font-size: 11px;
	color: #7e7e7e;
	text-align: center;
	padding-bottom: 40px;
	line-height: 30px;
}
#fmark {
	width: 246px;
	margin: 0 auto 92px;
}
#fmark img { width: 100%; }
#fmark > span { display: none; }
/* ▼SUB-CHARACTER▼ --------------------------------- 
-------------------------------------------------*/

#cl_tab {
	width: 448px;
	padding-top: 30px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	margin: auto;
}
#cl_tab li {
	width: 224px;
	height: 35px;
	background: #fff;
	border: 2px solid #fff;
	position: relative;
	transition: all .3s ease;
}
#cl_tab li:after {
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 3px 0 3px 5px;
	border-color: transparent transparent transparent #fff;
	position: absolute;
	top: 50%;
	right: 13px;
	transform: translateY(-50%);
}
#cl_tab li a {
	display: block;
	font-size: 15px;
	line-height: 33px;
	text-align: center;
	color: #000;
	text-decoration: none;
}
#cl_tab li.active { background: #000; }
#cl_tab li.active a {
	color: #fff;
	pointer-events: none;
}
ol.cl {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	position: relative;
	width: 100%;
	max-width: 1600px;
	height: 568px;
	margin: 0 auto;
	opacity: 0;
	pointer-events: none;
	transition: all .3s ease;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}
ol.cl.active {
	opacity: 1;
	pointer-events: auto;
}
ol.cl li {
	width: 180px;
	position: absolute;
	top: 0;
	margin: auto;
}
ol.cl li img { width: 100%; }
li#chara01 {
	left: 0;
	right: -12%;
	z-index: 8;
}
li#chara02 {
	left: 0;
	right: 12%;
	z-index: 7;
}
li#chara03 {
	left: -59%;
	right: 0;
}
li#chara04 {
	left: 0;
	right: -38%;
	z-index: 5;
}
li#chara05 {
	left: 0;
	right: 36%;
	z-index: 6;
}
li#chara06 {
	left: -82%;
	right: 0;
}
li#chara07 {
	left: 0;
	right: -61%;
}
li#chara08 {
	left: 83%;
	right: 0;
}
/*li#chara09{  }*/
li#chara10 {
	left: 0;
	right: -16%;
	z-index: 8;
}
li#chara11 {
	left: 0;
	right: -54%;
	z-index: 7;
}
li#chara12 {
	left: -55%;
	right: 0;
	z-index: 6;
}
li#chara13 {
	left: -18%;
	right: 0;
	z-index: 5;
}
ol.cl li a { transition: .3s ease-in-out; }
ol.cl:hover li a:not(:hover) { opacity: .5; }
#charaIndexWrap {
	margin-top: 50px;
	padding-bottom: 35px;
}
#charaIndexWrap .owlControl,
#charaDotNav { display: none; }
ul.charaThumb {
	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;
	max-width: 1067px;
	margin: 0 auto 40px;
	position: relative;
}
ul.charaThumb:after {
	content: "";
	width: 100%;
	height: 1px;
	background: #2f2f2f;
	position: absolute;
	bottom: -20px;
	left: 0;
}
ul.charaThumb:last-child:after { display: none; }
ul.charaThumb li {
	width: 525px;
	height: 85px;
	background-size: 100%;
	background-position: 0 0;
	background-repeat: no-repeat;
	position: relative;
	margin-right: 2px;
	margin-left: 2px;
	margin-bottom: 4px;
}
ul#charaThumb02 {
	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;
	max-width: 1600px;
	margin: 0 auto;
}
ul#charaThumb02 li {
	position: relative;
	margin-right: 2px;
	margin-left: 2px;
	margin-bottom: 4px;
}
@media screen and (max-width:1395px) {
ul.charaThumb li {
	width: calc(50% - 8px);
	height: auto;
	padding-top: calc(8.7% - 8px);
	position: relative;
}
ul#charaThumb02 li { width: calc(50% - 8px); }
ul#charaThumb02 li img { width: 100%; }
ul.charaThumb li a {
	display: block;
	width: 100% !important;
	height: 100% !important;
	position: absolute;
	top: 0;
	left: 0;
	background-size: 100% !important;
	background-position: 0 0 !important;
	background-repeat: no-repeat !important;
}
}
ul.charaThumb li a {
	display: block;
	width: 525px;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: #fff;
	transition: .3s ease;
}
ul#charaThumb02 li a {
	background: #fff;
	display: block;
	transition: .3s ease;
}
ul.charaThumb li a:hover,
ul.charaThumb li a.active,
ul#charaThumb02 li a:hover,
ul#charaThumb02 li a.active { background: #777; }
ul.charaThumb li#charaT01 a { background-image: url(../img/pc/chara01_t.png); }
ul.charaThumb li#charaT02 a { background-image: url(../img/pc/chara02_t.png); }
ul.charaThumb li#charaT03 a { background-image: url(../img/pc/chara03_t.png); }
ul.charaThumb li#charaT04 a { background-image: url(../img/pc/chara04_t.png); }
ul.charaThumb li#charaT05 a { background-image: url(../img/pc/chara05_t.png); }
ul.charaThumb li#charaT06 a { background-image: url(../img/pc/chara06_t.png); }
ul.charaThumb li#charaT07 a { background-image: url(../img/pc/chara07_t.png); }
ul.charaThumb li#charaT08 a { background-image: url(../img/pc/chara08_t.png); }
ul.charaThumb li#charaT08 a { background-image: url(../img/pc/chara08_t.png); }
ul.charaThumb li#charaT09 a { background-image: url(../img/pc/chara09_t.png); }
ul.charaThumb li#charaT10 a { background-image: url(../img/pc/chara10_t.png); }
ul.charaThumb li#charaT11 a { background-image: url(../img/pc/chara11_t.png); }
ul.charaThumb li#charaT12 a { background-image: url(../img/pc/chara12_t.png); }
ul.charaThumb li#charaT13 a { background-image: url(../img/pc/chara13_t.png); }
ul.charaThumb li#charaT14 a { background-image: url(../img/pc/chara14_t.png); }
ul.charaThumb li#charaT15 a { background-image: url(../img/pc/chara15_t.png); }
ul.charaThumb li#charaT16 a { background-image: url(../img/pc/chara16_t.png); }
ul.charaThumb li#charaT17 a { background-image: url(../img/pc/chara17_t.png); }
ul.charaThumb li#charaT18 a { background-image: url(../img/pc/chara18_t.png); }
ul.charaThumb li#charaT19 a { background-image: url(../img/pc/chara19_t.png); }
#charaDetailWrap {
	position: relative;
	margin-bottom: 100px;
}
#charaDetailImg figure {
	width: 850px;
	margin: 0 auto;
	height: 853px;
	position: relative;
}
#charaDetailImg figure span {
	position: absolute;
	right: -85px;
	display: block;
	width: 650px;
}
#charaDetailImg figure span img { width: 100%; }
#charaDetailImg02 figure {
	width: 850px;
	margin: 0 auto;
	height: 650px;
	position: relative;
}
#charaDetailImg02 figure span {
	position: absolute;
	right: 60px;
	display: block;
	width: 560px;
	top: 180px;
}
#charaDetailImg02 figure span img { width: 100%; }
#charaPager {
	position: absolute;
	top: 370px;
	left: 0;
	width: calc(100% - 60px);
	height: 20px;
	margin: auto;
	right: 0;
	z-index: 2;
}
#charaPager p { width: 70px; }
#charaPager p img { vertical-align: middle; }
#charaPager .prev { float: left; }
#charaPager .prev a,
#charaPager .next a {
	transition: .2s ease-in-out;
	display: block;
}
#charaPager .prev a:hover { transform: translateX(-10px); }
#charaPager .next a:hover { transform: translateX(10px); }
#charaPager .next { float: right; }
#charaDetailTxt {
	position: absolute;
	width: 850px;
	margin: auto;
	right: 0;
	left: 0;
	top: 0;
}
#charaDetailTxt > h3 {
	font-size: 38px;
	letter-spacing: 0.12em;
	position: absolute;
	top: 230px;
	left: 0;
}
[data-ruby] {
 position: relative;
}
[data-ruby]:before {
	content: attr(data-ruby);
	position: absolute;
	top: -1.3em;
	left: 0;
	right: 0;
	margin: auto;
	font-size: 12px;
	letter-spacing: 0.3em;
}
rt { display: none; }
#cVoice {
	font-size: 18px;
	letter-spacing: 0.3em;
	position: absolute;
	top: 300px;
	left: 0;
}
#cTxt {
	font-size: 15px;
	letter-spacing: 0.1em;
	position: absolute;
	top: 440px;
	left: 0;
	width: 420px;
	line-height: 34px;
}
#cTxt02 {
	font-size: 15px;
	letter-spacing: 0.1em;
	position: absolute;
	top: 515px;
	right: 40px;
	width: 560px;
	line-height: 34px;
}
/* ▼SUB-ON AIR▼ --------------------------------- 
-------------------------------------------------*/

.onair > h2 { margin-bottom: 60px; }
#onairWrap {
	position: relative;
	z-index: 1;
}
.oaBox {
	width: 900px;
	/*width: 80%;
    min-width: 977px;
    max-width: 1200px;*/
	position: relative;
	margin: 0 auto;
}
.oaBox > h3 { margin-bottom: 60px; }
.oaBox > h3 span {
	height: 38px;
	line-height: 38px;
	display: inline-block;
	width: 162px;
	text-align: center;
	color: #000;
	background: #fff;
	font-size: 16px;
}
.oaBox > h3 span:nth-of-type(2) {
	background: #222222;
	color: #fff;
}
.oaBox > h3 { text-align: center; }
#oaTv { margin-bottom: 60px; }
#oaTvTxt {
	background: url(../img/pc/oa_tvtxt.png) no-repeat;
	width: 838px;
	height: 133px;
	margin-bottom: 60px;
	margin-left: 30px;
}
#oaWebTxt {
	background: url(../img/pc/oa_webtxt.png) no-repeat;
	width: 666px;
	height: 166px;
	margin-bottom: 60px;
	margin-left: 30px;
}
.oaTBL table {
	width: 100%;
	font-size: 20px;
}
.oaTBL table tr {
	display: inline-table;
	margin-bottom: 20px;
	position: relative;
	border-bottom: 1px solid #313131;
	width: 100%;
}
.oaTBL table td {
	padding-bottom: 20px;
	width: 33.3%;
}
.oaTBL table td:nth-child(1) { padding-left: 30px; }
.oaTBL table td:nth-child(3) {
	color: #ea0000;
	font-size: 16px;
}
.comSym { position: relative; }
#ceSym {
	position: fixed;
	width: 375px;
	height: 375px;
	top: 0;
	right: 0;
	bottom: 0;
	left: 303px;
	margin: auto;
	z-index: 0;
	min-width: 977px;
}
#ceSym img {
	width: 100%;
	height: 100%;
	opacity: .13;
}
#oaCaution {
	font-size: 13px;
	color: #fff;
	margin-top: 20px;
}
/* ▼SUB-STAFF&CAST▼ --------------------------------- 
-------------------------------------------------*/

#subRightBg {
	position: absolute;
	background: #181818;
	width: calc(50% - 152px);
	height: 100%;
	top: 0;
	right: 0;
	z-index: -1;
}
.scBox > h3 {
	display: block !important;
	width: 0 !important;
	height: 0 !important;
	overflow: hidden !important;
}
#scWrap {
	position: relative;
	z-index: 1;
	width: 90%;
	min-width: 977px;
	max-width: 1200px;
	margin: 0 auto;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	margin-top: 80px;
	margin-bottom: 40px;
}
.scBox { width: 50%; }
#cast { padding-left: 120px; }
#staff { padding-left: 50px; }
.scBox > ul {
	font-size: 16px;
	font-weight: 200;
	letter-spacing: 0.1em;
}
.scBox > ul li { margin-bottom: 20px; }
.spF { margin-top: 50px; }
.scBox > ul li .fontS { font-size: 12px; }
/* ▼SUB-TRAILER▼ --------------------------------- 
-------------------------------------------------*/

#trailerWrap {
	position: relative;
	z-index: 1;
	width: 90%;
	min-width: 977px;
	max-width: 1200px;
	margin: 0 auto;
	margin-top: 85px;
	margin-bottom: 40px;
}
#trailerWrap > ul {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	margin-top: 66px;
}
#trailerWrap > ul li {
	width: 50%;
	height: 300px;
	padding-right: 5px;
	box-sizing: border-box;
	margin-bottom: 70px;
}
#trailerWrap > ul li:nth-child(even) {
	padding-left: 5px;
	padding-right: 0;
}
#trailerWrap > ul li a {
	display: block;
	width: 100%;
	height: 100%;
	background-size: 100%;
	background-position: center center;
	position: relative;
	transition: .3s;
	z-index: 2;
}
#trailerWrap > ul li a:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.5);
	z-index: 1;
	transform-origin: left top;
	transform: scale(1, 1);
	transition: transform .3s ease-in-out;
}
#trailerWrap > ul li a:hover:before {
	transform-origin: right top;
	transform: scale(0, 1);
}
#trailerWrap > ul li a:after {
	content: "";
	position: absolute;
	background: url(../img/common/mov_btn.svg) no-repeat 0 0 / contain;
	width: 48px;
	height: 48px;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	margin: auto;
	z-index: 5;
}
.pvName {
	font-size: 16px;
	min-height: 30px;
	display: flex;
	background: #000;
	max-width: 100%;
}
.pvName > span:nth-of-type(1) {
	padding: 0 30px;
	display: block;
	border: 1px solid #fff;
	border-right: none;
	height: 30px;
	background: #000;
}
.pvName > span:nth-of-type(2) {
	background: #fff;
	display: block;
	color: #000;
	padding: 0 30px;
	box-sizing: border-box;
	word-break: break-all;
	border: 1px solid #fff;
	text-indent: -0.5em;
}
/* ▼SUB-INTRODUCTION▼ --------------------------------- 
-------------------------------------------------*/

ul#isLink {
	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;
}
ul#isLink li a {
	display: block;
	width: 180px;
	height: 38px;
	line-height: 34px;
	background: #000;
	border: 2px solid #fff;
	text-align: center;
	text-decoration: none;
	font-size: 16px;
	position: relative;
	transition: .3s ease;
}
ul#isLink li a:before {
	content: "";
	position: absolute;
	background: url(../img/common/triangle_r_w.svg) no-repeat 0 0 / 100%;
	width: 4px;
	height: 6px;
	right: 14px;
	margin: auto;
	top: 0;
	bottom: 0;
	transform: translateX(0);
	transition: .3s ease;
}
ul#isLink li a.active {
	color: #000;
	background: #fff;
}
ul#isLink li { margin-left: -2px; }
ul#isLink li:first-child { margin-left: 0; }
#introWrap {
	position: relative;
	z-index: 1;
	width: 960px;
	margin: 0 auto;
	margin-top: 85px;
	margin-bottom: 40px;
}
#introTop {
	position: relative;
	height: 295px;
	margin: 70px auto 60px;
}
#introTop p {
	background: url(../img/pc/intro_txt.png) no-repeat;
	width: 348px;
	height: 152px;
	position: absolute;
	margin: auto;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}
#introBgSym {
	position: absolute;
	width: 295px;
	height: 295px;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	z-index: 0;
}
#introBgSym img {
	width: 100%;
	height: 100%;
	opacity: .13;
}
#introWrap > p {
	font-size: 16px;
	font-weight: 200;
	color: #fff;
	line-height: 46px;
	letter-spacing: 0.02em;
}
/* ▼SUB-STORY▼ --------------------------------- 
-------------------------------------------------*/

#storyWrap {
	width: 80%;
	min-width: 940px;
	max-width: 1200px;
	position: relative;
	margin: 85px auto 50px;
}
#storyWrap > dl { color: #fff; }
#storyWrap > dl dt { position: relative; }
#storyWrap > dl dt > span {
	font-size: 30px;
	display: block;
	letter-spacing: 0.04em;
	padding-bottom: 24px;
	position: relative;
	cursor: pointer;
	padding-top: 20px;
	padding-left: 30px;
	padding-right: 30px;
}
#storyWrap > dl dt > span:before {
	content: "";
	position: absolute;
	width: 100%;
	height: 1px;
	background: #2f2f2f;
	bottom: 0;
	left: 0;
}
#storyWrap > dl dt > span:after {
	content: "";
	background: url(../img/common/arrow_wr.svg) no-repeat;
	width: 70px;
	height: 5px;
	position: absolute;
	top: 44px;
	right: 30px;
	transition: .3s ease-in-out;
}
#storyWrap > dl dt:hover > span:after { transform: rotate(90deg); }
#storyWrap > dl dt.active > span:after {
	transform: rotate(90deg);
	margin-top: 50px;
}
#storyWrap > dl dt:before {
	content: "";
	width: 100%;
	height: 1px;
	background: #23b8c5;
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 1;
	transform: scale(0, 1);
	transform-origin: right top;
	transition: transform .3s;
}
#storyWrap > dl dt:hover:before {
	transform-origin: left top;
	transform: scale(1, 1);
}
#storyWrap > dl dt.active:before { transform: scale(1, 1); }
#storyWrap > dl dt:hover > span:after,
#storyWrap > dl dt.active > span:after { transform: rotate(90deg); }
#storyWrap > dl dt > span > span { color: #23b8c5; }
#storyWrap > dl dd {
	font-size: 16px;
	line-height: 43px;
	font-weight: 200;
	letter-spacing: 0.08em;
	padding-top: 24px;
	padding-left: 30px;
	padding-right: 30px;
	padding-bottom: 60px;
}
#storyWrap > dl dd:last-of-type { padding-bottom: 0; }
/*BDDVD*/
#bddvdWrap {
	position: relative;
	z-index: 50;
	font-weight: 500;
	font-size: 16px;
}
#bddvdWrap .bddvds {
	width: 922px;
	margin-right: auto;
	margin-left: auto;
}
#bddvdNav {
	width: 100%;
	display: flex;
	justify-content: space-between;
	padding-bottom: 65px;
}
#bddvdNav li { width: 178px; }
#bddvdNav li a {
	display: block;
	height: 100%;
	text-decoration: none;/*	opacity:0.7;
	transition:all 0.3s ease;*/
}
/*#bddvdNav li a:hover {
	opacity:1;
}*/
#bddvdNav li a .thumb {
	width: 178px;
	border: 1px solid #FFF;
	margin-bottom: 8px;
}
#bddvdNav li a .thumb img {
	width: 176px;
	height: auto;
}
#bddvdNav li a .bdListName {
	height: 26px;
	border: 1px solid #FFF;
	line-height: 26px;
}
#bddvdSpec {
	display: flex;
	justify-content: space-between;
	padding-bottom: 30px;
}
#bddvdSpecImg {
	width: 364px;
	border: 1px solid rgba(255,255,255,1);
	height: 482px;
}
#dvdSpecText {
	width: 550px;
	line-height: 41px;
	font-size: 16px;
}
#bddvdWrap h3 {
	height: 53px;
	background: rgba(255,255,255,1);
	font-size: 16px;
	line-height: 51px;
	color: rgba(0,0,0,1);
	text-align: center;
	margin-bottom: 10px;
}
#bddvdWrap .sp { display: none; }
.salesDate {
	font-size: 20px;
	line-height: 100px;
	text-align: center;
	height: 100px;
}
#dvdSpecText dl { margin: 0 10px; }
#dvdSpecText dt {
	clear: both;
	float: left;
}
#dvdSpecText dt:before { content: '■'; }
#dvdSpecText dt:after { content: '：'; }
#bddvdWrap h4 {
	background: rgba(64,64,64,1);
	height: 60px;
	font-size: 16px;
	line-height: 60px;
	color: rgba(255,255,255,1);
	text-align: center;
}
#bddvdWrap .bddvdSpecialBox {
	border: 1px solid rgba(64,64,64,1);
	padding: 25px 60px 35px;
	line-height: 46px;
	margin-bottom: 20px;
}
.bddvdins { padding-bottom: 30px; }
.bddvdins img {
	width: 100%;
	height: auto;
}
.bddvdtitle {
	font-weight: bold;
	color: #23b8c5;
}
/* ▼SUB-MUSIC▼ --------------------------------- 
-------------------------------------------------*/

.music > h2 { margin-bottom: 60px; }
#musicWrap {
	width: 922px;
	margin: 0 auto;
}
ul#tabLink {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}
ul#tabLink li { width: 456px; }
ul#tabLink li:first-child,
ul#tabLink li:nth-child(2) { margin-right: 10px; }
ul#tabLink li a {
	display: block;
	text-decoration: none;
	width: 100%;
	height: 100%;
	padding: 16px;
	border: 1px solid #2B2B2B;
	color: #fff;
	letter-spacing: 0.1em;
	position: relative;
}
ul#tabLink li a:before {
	content: "";
	position: absolute;
	top: -1px;
	left: -1px;
	width: 0;
	height: 1px;
	background: #fff;
	transition: .3s ease-in-out;
}
ul#tabLink li a:after {
	content: "";
	position: absolute;
	bottom: -1px;
	right: -1px;
	width: 0;
	height: 1px;
	background: #fff;
	transition: .3s ease-in-out;
}
ul#tabLink li a:hover:before,
ul#tabLink li a:hover:after,
ul#tabLink li a.active:before,
ul#tabLink li a.active:after { width: calc(100% + 2px); }
ul#tabLink li a > span:before {
	content: "";
	position: absolute;
	top: -1px;
	left: -1px;
	width: 1px;
	height: 0;
	background: #fff;
	transition: .3s ease-in-out;
}
ul#tabLink li a > span:after {
	content: "";
	position: absolute;
	bottom: -1px;
	right: -1px;
	width: 1px;
	height: 0;
	background: #fff;
	transition: .3s ease-in-out;
}
ul#tabLink li a:hover > span:before,
ul#tabLink li a:hover > span:after,
ul#tabLink li a.active > span:before,
ul#tabLink li a.active > span:after { height: calc(100% + 2px); }
ul#tabLink li a .mOE {
	display: block;
	background: #2B2B2B;
	text-align: center;
	font-size: 10px;
	padding: 2px 0;
	margin-bottom: 10px;
}
ul#tabLink li a .mTtl {
	text-align: center;
	display: block;
	font-size: 18px;
}
ul#tabLink li a .mTtl > span { font-size: 14px; }
#oneMusicWrap { margin-top: 50px; }
#oneMusicWrap > h3 {
	font-size: 24px;
	font-family: "游明朝体", "YuMincho", "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
	text-align: center;
}
#oneMusicWrap > h3 .mSingle {
	font-family: 'Roboto', sans-serif;
	display: inline-block;
	background: #2B2B2B;
	text-align: center;
	font-size: 13px;
	padding: 0px 8px;
	letter-spacing: 0.07em;
	vertical-align: text-top;
	margin-top: 1px;
	margin-left: 18px;
}
#oneMusicWrap > h3 .mTtl { font-size: 34px; }
#mSale {
	text-align: center;
	color: #23b8c5;
	font-size: 17px;
	margin-bottom: 60px;
	font-weight: bold;
}
.oneMusic {
	position: relative;
	margin-bottom: 80px;
}
.oneMusic > h3 {
	position: absolute;
	width: 448px;
	background: #2B2B2B;
	text-align: center;
	font-size: 15px;
	top: 0;
	right: 0;
	letter-spacing: 0.06em;
	font-weight: 400;
	padding: 8px 0;
	line-height: 20px;
}
.oneMusic > figure {
	width: 440px;
	float: left;
}
.oneMusic > .oneMusicTxt {
	width: 448px;
	margin-top: 86px;
	float: right;
}
.oneMusic > figure img { width: 100%; }
.cdIcon {
	color: #000;
	background: #fff;
	font-size: 14px;
	display: block;
	width: 60px;
	line-height: 1.5;
	text-align: center;
	margin-bottom: 10px;
}
.dIcon { width: 170px !important; }
.oneMusicTxt > ul li {
	font-size: 13px;
	border-bottom: 1px solid #2B2B2B;
	margin-bottom: 8px;
	padding-bottom: 8px;
	letter-spacing: 0.06em;
}
.oneMusicTxt > ul { margin-bottom: 30px; }
.supplement {
	font-size: 12px;
	margin-bottom: 26px;
}
#mOfficialLink { margin-bottom: 10px; }
#mOfficialLink a {
	width: 300px;
	background: #FFF;
	display: block;
	height: 40px;
	line-height: 40px;
	color: #000;
	text-decoration: none;
	position: relative;
	font-size: 14px;
	transition: .3s ease;
	margin: 0 auto;
}
#mOfficialLink a:hover { color: #fff; }
#mOfficialLink a span {
	position: absolute;
	width: 100%;
	height: 100%;
	display: block;
	top: 0;
	left: 0;
	transition: .3s ease;
	padding-left: 12px;
}
#mOfficialLink a span:before {
	content: "";
	position: absolute;
	background: url(../img/common/triangle_r.svg) no-repeat 0 0 / 100%;
	width: 4px;
	height: 6px;
	right: 10px;
	margin: auto;
	top: 0;
	bottom: 0;
	transform: translateX(0);
	transition: .3s ease;
}
#mOfficialLink a:hover span:before {
	background: url(../img/common/triangle_r_w.svg) no-repeat 0 0 / 100%;
	transform: translateX(10px);
}
#charaIndexList {
	max-width: 1052px;
	width: 100%;
	margin: auto;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}
#charaIndexList li {
	width: 260px;
	height: 516px;
	margin-right: 4px;
}
#charaIndexList li:last-child { margin-right: 0; }
#charaIndexList li a {
	display: block;
	height: 516px;
	transition: all .3s ease;
}
#charaIndexList li a img {
	width: 100%;
	height: auto;
}
#charaIndexList li a:hover { opacity: 0.7; }