@charset "utf-8";
html{
    overflow: auto;
    font-size: 62.5% !important;
}
body { 
    min-width: 320px;
    overflow: hidden;
}
img{ width: 100%; }
a { color: #fff; }
br.sp{ display: block; }
br.pc{ display: none; }
#fullWrap {
    position: relative;
    padding-top: 56px;
}
.owl-carousel { touch-action: manipulation; }
body#sub .owl-controls{
    display: none;
}
#loading{
	background: #000;
	position: fixed;
	top:0;
	left:0;
	bottom:0;
	right:0;
	z-index: 10000;
}

/* ▼HEADER▼ --------------------------------- 
-------------------------------------------------*/

header nav{
    display: none;
}
header {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9999;
    width: 100%;
    height: 56px;
    background: #000;
}
@keyframes stopRotate {  0% {
 transform:rotateY(0deg);
}
 50% {
 transform:rotateY(360deg);
}
 100% {
 transform:rotateY(360deg);
}
}
header h1 {
    height: 40px;
    width: 40px;
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    perspective: 80px;
}
header h1 a{
    display: block;
    animation: stopRotate 4s ease infinite;
}
#menuBtn {
    height: 56px;
    width: 56px;
    position: absolute;
    top: 0px;
    right: 0px;
}
#menuBtn a {
    display: block;
    height: 56px;
    background: url(../img/common/menu.svg) no-repeat center center / 45%;
}

/* ▼INDEX▼ --------------------------------- 
-------------------------------------------------*/

#top{
    position: relative;
}
#startDate p{
    background: url(../img/sp/start_date.png) no-repeat 0 0 / 100%;
    width: 100%;
    height: auto;
    padding-top: 37%;
}
#newsTop{
    position: relative;
    padding-top: 10%;
    display: -webkit-box;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-bottom: 13%;
}
#newsTop:before{
    content: "";
    position: absolute;
    background: url(../img/common/symbol02_g.svg) no-repeat 0 0 / 100%;
    width: 40%;
    height: auto;
    padding-top: 40%;
    right: -30px;
    z-index: -1;
    top: 0;
}
#newsTop > h2{
    width: 56px;
}
#newsTop > h2 img{
    width: 50%;
    margin: 0 auto;
    display: block;
}
#newsList{
    width: calc(100% - 56px);
}
#newsList > ul li > span{
    background: #FFF;
    height: 15px;
    width: 60px;
    display: block;
    font-size: 10px;
    font-size: 1.2rem;
    line-height: 16px;
    text-align: center;
    color: #000;
    margin-bottom: 10px;
}
#newsList > ul li{
    font-size: 12px;
    font-size: 1.2rem;
    line-height: 1.6em;
    color: #fff;
    margin-bottom: 9%;
    padding-right: 4.6%;
}
#newsList > ul li a{
    text-decoration: none;
}
#newsMore {
    height: 44px;
    width: 100%;
}
#newsMore a {
    background: #FFF;
    text-align: center;
    display: block;
    height: 100%;
    line-height: 44px;
    color: #000;
    text-decoration: none;
    position: relative;
    font-size: 12px;
    font-size: 1.2rem;
    letter-spacing: 0.1em;
}
#newsMore a:before{
    content: "";
    position: absolute;
    background: url(../img/common/arrow.svg) no-repeat 0 0 / 100%;
    width: 16%;
    height: auto;
    padding-top: 1.1%;
    right: 4.6%;
    top: 50%;
    transform: translateY(-50%);
}
.ytWrap{
    padding-top: 56.25%;
    position: relative;
}
.ytWrap iframe {
    position: absolute;
    top: 0;
    right: 0;
    width: 100% !important;
    height: 100% !important;
}
#topMovie{
    margin-bottom: 6%;
}
#symBgTop,
#startDate h1{
    display: none;
}
/*--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-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
    width: 100%;
    height: auto;
    margin: 0 auto;
    min-height: 100vh;
    min-height: 100%;
    padding: 30px 0;
    position: relative;
    pointer-events: none;
}
#newVisualIn > div{
    margin-top: 30px;
}
#newVisualIn > div > figure{
    width: 100%;
    height: auto;
    background: url(../img/common/new_visual.jpg) no-repeat 0 0 / 100%;
    padding-top: 141.5%;
    margin-bottom: 20px;
}
#newVisualIn > div > figcaption {
    color: #fff;
    font-size: 12px;
    font-size: 1.2rem;
    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{
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}
.modalClose{
    width: 40px;
    height: 40px;
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1000000;
    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▼ --------------------------------- 
-------------------------------------------------*/

ul#psyLink{
    padding: 0 4.6%;
}
ul#psyLink li{
    margin-bottom: 4%;
}
ul#psyLink li:last-child{
    margin-bottom: 0;
}
ul#psyLink li a{
    width: 100%;
    background: #FFF;
    display: block;
    height: 100%;
    line-height: 44px;
    color: #000;
    text-decoration: none;
    position: relative;
    font-size: 12px;
    font-size: 1.2rem;
    letter-spacing: 0.1em;
    padding-left: 4.6%;
}
ul#psyLink li a:before{
    content: "";
    position: absolute;
    background: url(../img/common/triangle_r.svg) no-repeat 0 0 / 100%;
    width: 6px;
    height: 8px;
    right: 4.6%;
    top: 50%;
    transform: translateY(-50%);
}
#bttop {
    width: 4.5%;
    margin: 50px auto 0;
}
footer #nav {
    padding: 56px 4.6% 0;
}
footer #nav ul {
    border-top: 1px solid #2F2F2F;
    border-left: 1px solid #2F2F2F;
    display: -webkit-box;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}
footer #nav li {
    width: 50%;
    border-right: 1px solid #2f2f2f;
    border-bottom: 1px solid #2f2f2f;
    position: relative;
    font-size: 13px;
    font-size: 1.3rem;
}
footer #nav li a {
    text-decoration: none;
    display: block;
    height: 48px;
    line-height: 48px;
    padding-left: 8%;
    letter-spacing: 0.04em;
    vertical-align: middle;
}
footer #nav li:before {
    content: '';
    position: absolute;
    left: -1px;
    top: -1px;
    width: 10px;
    height: 1px;
    background-color: #00E5ED;
}
.shareTxt {
    padding-top: 10%;
    color: #FFF;
    text-align: center;
    font-size: 11px;
    font-size: 1.1rem;
}
ul.share{
    display: -webkit-box;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 70%;
    margin: 0 auto;
}
ul.share li{
    width: 33.3%;
    height: auto;
    position: relative;
}
ul.share li:before{
    content: "";
    display: block;
    padding-top: 100%;
}
ul.share li a{
    display: block;
    position: absolute;
    top: 0; 
    left: 0;
    width: 100%;
    height: 100%;
}
ul.share li img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
ul.share li.tw img{
    width: 29%;
}
ul.share li.fb img{
    width: 14%;
}
ul.share li.ln img{
    width: 28%;
}
#footerLogo{
    position: relative;
}
#fmark{
    margin: 23% auto 32%;
    width: 77.8%;
    position: relative;
}
#fmark > span{
    position: absolute;
    width: 50%;
    left: 0;
    right: 0;
    margin: auto;
    z-index: -1;
    top: -130%;
}
#fmark > span{
    display: block;
    perspective: 280px;
}
#fmark > span img{
    animation: stopRotate 4s 3s ease infinite;
}
#fmark a{
    display: block;
    position: relative;
}
@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);
    }
}
@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);
  }
}
#fmark a.active{
    animation: glitch 1s linear;
}
#fmark a.active:before{
    content: "";
    position: absolute;
    background-image: url(../img/sp/foot_logo.png);
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 100%;
    width: 100%;
    height: auto;
    padding-top: 13.8%;
    top: 0;
    left: 0;
    clip: rect(0, 400px, 0, 0);
    filter: drop-shadow(2px 2px 2px rgba(35,184,197,1));
    animation: noise-anim .5s linear alternate-reverse;
    opacity: .8;
}
#fmark a.active:after{
    content: "";
    position: absolute;
    background-image: url(../img/sp/foot_logo.png);
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 100%;
    width: 100%;
    height: auto;
    padding-top: 13.8%;
    top: 0;
    left: 0;
    clip: rect(0, 400px, 0, 0);
    filter: drop-shadow(2px 2px 2px rgba(274,27,27,1));
    animation: noise-anim-2 1s linear alternate-reverse;
    opacity: .8;
}
#copyright {
    font-size: 10px;
    font-size: 1rem;
    color: #7e7e7e;
    padding: 0 8.6% 10%;
}
.cR{
    text-align: center;
}
#footBox{
    position: relative;
}
#footBox:before{
    content: "";
    position: absolute;
    top: -50px;
    left: 4.6%;
    right: 4.6%;
    height: calc(100% + 50px);
    border-left: 1px solid #2f2f2f;
    border-right: 1px solid #2f2f2f;
    pointer-events: none;
}

/* ▼SUB-COMMON▼ --------------------------------- 
-------------------------------------------------*/

.subInCont{
    opacity: 0;
    transform: translateX(20px);
    transition: .3s ease-in-out;
}
.subInCont.active{
    transform: translateX(0);
    opacity: 1;
}
body#sub header ul#psyLink{
    display: none;
}
#rightArea{
    margin-bottom: 56px;
}
.subCont > h2{
    position: relative;
    width: 100%;
    height: 30px;
    margin-top: 26px;
}
.subCont > h2 span{
    text-align: center;
    color: #000;
    background: #fff;
    padding: 2px 20px;
    font-size: 14px;
    font-size: 1.4rem;
    display: inline-block;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
}

/* ▼SUB-CHARACTER▼ --------------------------------- 
-------------------------------------------------*/

#charaIndexWrap{
    padding-top: 60px;
    position: relative;
    margin-bottom: 13%;
}
#charaIndexWrap:before{
    content: "";
    background: url(../img/common/symbol02_g.svg) no-repeat 0 0 / 100%;
    width: 67%;
    height: auto;
    padding-top: 67%;
    position: absolute;
    margin: auto;
    right: 0;
    left: 0;
    opacity: .3;
    top: 27%;
}
#charaIndexWrap .owlControl{
    position: absolute;
    top: 26px;
    left: 0;
    width: calc(100% - 9.2%);
    margin: auto;
    right: 0;
    z-index:500;
}
#charaIndexWrap .owlControl p{
    width: 60px;
}
#charaIndexWrap .owlControl p img{
    vertical-align: middle;
}
#charaIndexWrap .owlControl .prev{
    float: left;
}
#charaIndexWrap .owlControl .next{
    float: right;
}

#cl_tab {
    width: 92%;
    min-width: 315px;
    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: 50%;
    height: 35px;
    background: #fff;
    border: 1px 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: 10px;
    transform: translateY(-50%);
}
#cl_tab li a {
    display: block;
    font-size: 1.2rem;
    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{
    margin-bottom: 30px;
    display: none;
    position: absolute;
    top: 5%;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    pointer-events: none;
    transition: all .3s ease;
}
ol.cl.active {
    opacity: 1;
    pointer-events: auto;
}
ul.charaThumb{
    padding: 0 4.6%;
    position: relative;
}
ol.cl .owl-controls { display: block !important; }
ol.cl .owl-dots { margin-top: 30px; }
ol.cl .owl-dots .owl-dot span {
    width: 8px;
    height: 8px;
    margin: 0 4px;
    background: #313131;
    border-radius: 14px;
    transition: .3s ease;
}
ol.cl .owl-dots .owl-dot.active span { background: #fff; }
ul.charaThumb{
    margin-bottom: 7%;
}

ul.charaThumb li{
    margin-bottom: 4px;
    position: relative;
}
ul.charaThumb li:last-child{
    margin-bottom: 0;
}
ul.charaThumb li:last-child:after {
    content: "";
    width: 100%;
    height: 1px;
    background: #2f2f2f;
    position: absolute;
    bottom: -25.5%;
    left: 50%;
    transform: translateX(-50%);
}
ul.charaThumb:last-child li:last-child:after { display: none; }

ul.charaThumb li a{
    display: block;
    width: 100%;
    height: auto;
    padding-top: 15.1%;
    background-size: 100%;
    background-position: 0 0;
    background-repeat: no-repeat;
    background-color: #fff;
}
ul#charaThumb02 li a img{
    background-color: #fff;
}
ul.charaThumb li a.active,
ul#charaThumb02 li a.active img{
    background-color: #777;
}
ul.charaThumb li#charaT01 a{ background-image: url(../img/sp/chara01_t.png); }
ul.charaThumb li#charaT02 a{ background-image: url(../img/sp/chara02_t.png); }
ul.charaThumb li#charaT03 a{ background-image: url(../img/sp/chara03_t.png); }
ul.charaThumb li#charaT04 a{ background-image: url(../img/sp/chara04_t.png); }
ul.charaThumb li#charaT05 a{ background-image: url(../img/sp/chara05_t.png); }
ul.charaThumb li#charaT06 a{ background-image: url(../img/sp/chara06_t.png); }
ul.charaThumb li#charaT07 a{ background-image: url(../img/sp/chara07_t.png); }
ul.charaThumb li#charaT08 a{ background-image: url(../img/sp/chara08_t.png); }
ul.charaThumb li#charaT09 a{ background-image: url(../img/sp/chara09_t.png); }
ul.charaThumb li#charaT10 a{ background-image: url(../img/sp/chara10_t.png); }
ul.charaThumb li#charaT11 a{ background-image: url(../img/sp/chara11_t.png); }
ul.charaThumb li#charaT12 a{ background-image: url(../img/sp/chara12_t.png); }
ul.charaThumb li#charaT13 a{ background-image: url(../img/sp/chara13_t.png); }
ul.charaThumb li#charaT14 a{ background-image: url(../img/sp/chara14_t.png); }
ul.charaThumb li#charaT15 a{ background-image: url(../img/sp/chara15_t.png); }
ul.charaThumb li#charaT16 a{ background-image: url(../img/sp/chara16_t.png); }
ul.charaThumb li#charaT17 a{ background-image: url(../img/sp/chara17_t.png); }
ul.charaThumb li#charaT18 a{ background-image: url(../img/sp/chara18_t.png); }
ul.charaThumb li#charaT19 a{ background-image: url(../img/sp/chara19_t.png); }

#charaDetailImg{
    position: relative;
}
#charaDetailImg:before {
    content: "";
    background: url(../img/common/symbol02_g.svg) no-repeat 0 0 / 100%;
    width: 67%;
    height: auto;
    padding-top: 67%;
    position: absolute;
    margin: auto;
    right: 0;
    left: 0;
    top: 24%;
    bottom: 0;
    opacity: .3;
}
#charaDetailImg figure,
#charaDetailImg02 figure{
    position: relative;
    z-index: 1;
}
#charaDetailImg02 figure{
    padding: 0 4.6%;
    margin-top: 8%;
}
#charaDetailTxt{
    padding: 0 4.6%;
    margin-top: 6%;
    margin-bottom: 8%;
}
#charaDetailTxt > h3{
    font-size: 34px;
    font-size: 3.4rem;
    letter-spacing: 0.12em;
}
[data-ruby] {
    position: relative;
}
[data-ruby]:before {
    content: attr(data-ruby);
    position: absolute;
    top: -1em;
    left: 0;
    right: 0;
    margin: auto;
    font-size: 10px;
    font-size: 1rem;
    letter-spacing: 0.2em;
}
rt {
    display: none;
}
#cVoice{
    font-size: 17px;
    font-size: 1.7rem;
    letter-spacing: 0.3em;
    margin-bottom: 6%;
}
#cTxt, #cTxt02{
    font-size: 12px;
    font-size: 1.2rem;
    letter-spacing: 0.1em;
    line-height: 2;
}
#charaDetailImg #charaPager {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% - 9.2%);
    height: 20px;
    margin: auto;
    right: 0;
    bottom: 0;
    z-index: 2;
}
#charaDetailImg02 #charaPager{
    position: absolute;
    top: -13%;
    left: 0;
    width: calc(100% - 9.2%);
    height: 20px;
    margin: auto;
    right: 0;
    z-index: 2;
}
#charaPager p{
    width: 60px;
}
#charaPager p img{
    vertical-align: middle;
}
#charaPager .prev{
    float: left;
}
#charaPager .next{
    float: right;
}

/* ▼SUB-ON AIR▼ --------------------------------- 
-------------------------------------------------*/

#onairWrap{
    padding-top: 26px;
}
.oaBox > h3{
    margin-bottom: 9%;
}
.oaBox > h3 span{
    height: 30px;
    line-height: 32px;
    display: inline-block;
    width: 31.2%;
    text-align: center;
    color: #000;
    background: #fff;
    font-size: 14px;
    font-size: 1.4rem;
}
.oaBox > h3 span:nth-of-type(2){
    background: #222222;
    color: #fff;
}
.oaBox > h3{
    text-align: center;
}
#oaTv{
    margin-bottom: 8%;
}
#oaTvTxt{
    background: url(../img/sp/oa_tvtxt.png) no-repeat 0 0 / contain;
    width: 100%;
    height: 0;
    padding-top: 36.7%;
    margin-bottom: 8%;
}
#oaWebTxt{
    background: url(../img/sp/oa_webtxt.png) no-repeat 0 0 / contain;
    width: 100%;
    height: 0;
    padding-top: 27.5%;
    margin-bottom: 8%;
}
.oaTBL{
    padding: 0 4.6%;
}
.oaTBL table{
    width: 100%;
    font-size: 12px;
    font-size: 1.2rem;
}
.oaTBL table td:nth-child(1){
    width: 45%;
}
.oaTBL table td:nth-child(1),
.oaTBL table td:nth-child(2),
.oaTBL table td:nth-child(3){
    display: inline-block;
    margin-bottom: 4%;
}
.oaTBL table td:nth-child(2),
.oaTBL table td:nth-child(3){
    width: 55%;
}
.oaTBL table td:nth-child(3){
    color: #ea0000;
    font-size: 11px;
    font-size: 1.1rem;
    margin-left: 45%;
}
.oaTBL table tr{
    display: inline-table;
    margin-bottom: 4%;
    position: relative;
    border-bottom: 1px solid #313131;
    width: 100%;
}
#ceSym{
    display: none;
}
#oaCaution{
    font-size: 10px;
    font-size: 1.0rem;
    color: #fff;
    margin-top: 14px;
    padding-left: 4.6%;
}

/* ▼SUB-STAFF&CAST▼ --------------------------------- 
-------------------------------------------------*/

.staffcast > h2{
    display: block !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}
.scBox > h3{
    margin-bottom: 9%;
}
.scBox > h3 span{
    height: 30px;
    line-height: 32px;
    display: inline-block;
    width: 31.2%;
    text-align: center;
    color: #000;
    background: #fff;
    font-size: 14px;
    font-size: 1.4rem;
}
.scBox > h3 span:nth-of-type(2){
    background: #222222;
    color: #fff;
}
.scBox > h3{
    text-align: center;
}
#staff{
    margin-bottom: 14%;
}
.scBox > ul{
    padding: 0 4.6%;
    font-size: 12px;
    font-size: 1.2rem;
    letter-spacing: 0.04em;
}
.scBox > ul li{
    margin-bottom: 10px;
}
.spF{
    margin-top: 30px;
}
#subRightBg{
    display: none;
}

/* ▼SUB-TRAILER▼ --------------------------------- 
-------------------------------------------------*/

#trailerWrap{
    margin-top: 8%;
}
#trailerWrap > ul{
    padding: 0 4.6%;
}
#trailerWrap > ul li{
    position: relative;
    margin-bottom: 8%;
}
#trailerWrap > ul li > span{
    padding-top: 56.25%;
    position: relative;
    display: block;
}
#trailerWrap > ul li a {
    display: block;
    width: 100%;
    height: 100%;
    background-size: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    transition: .3s;
    z-index: 2;
}
#trailerWrap > ul li a:after{
    content: "";
    position: absolute;
    background: url(../img/common/mov_btn.svg) no-repeat 0 0 / 100%;
    width: 48px;
    height: 48px;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    z-index: 5;
}
#trailerWrap > ul li a:before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.3);
    z-index: 1;
}
.pvName{
    font-size: 12px;
    font-size: 1.2rem;
    border: 1px solid #fff;
    background: #000;
    left: 0;
    text-align: center;
}
.pvName > span:nth-of-type(1){
    width: 100%;
    display: block;
}
.pvName > span:nth-of-type(2){
    background: #fff;
    display: block;
    color: #000;
    box-sizing: border-box;
}
#cboxContent{
    padding: 70px 0 !important;
}

/* ▼SUB-INTRODUCTION▼ --------------------------------- 
-------------------------------------------------*/

ul#isLink{
    padding-top: 26px;
    display: -webkit-box;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    justify-content: center;
}
ul#isLink li a{
    display: block;
    width: 100%;
    height: 32px;
    line-height: 28px;
    background: #000;
    border:2px solid #fff;
    text-align: center;
    text-decoration: none;
    font-size: 11px;
    font-size: 1.1rem;
    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: 3px;
    height: 5px;
    right: 8px;
    margin: auto;
    top: 0;
    bottom: 0;
    transform: translateX(0);
    transition: .3s ease;
}
ul#isLink li a.active{
    color: #000;
    background: #fff;
}
ul#isLink li{
    width: 33.3%;
    margin-left: -2px;
}
ul#isLink li:first-child{
    margin-left: 0;
}
#introTop{
    position: relative;
    height: 180px;
    margin: 7% auto;
}
#introTop p{
    background: url(../img/sp/intro_txt.png) no-repeat 0 0 / 100%;
    width: 100%;
    height: auto;
    padding-top:24.6%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
#introBgSym{
    position: absolute;
    width: 180px;
    height: 180px;
    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: 12px;
    font-size: 1.2rem;
    font-weight: 400;
    color: #fff;
    letter-spacing: 0.02em;
    padding: 0 4.6%;
    line-height: 2.3em;
}

/* ▼SUB-STORY▼ --------------------------------- 
-------------------------------------------------*/

#storyWrap {
    padding-top: 26px;
}
#storyWrap > dl{
    color: #fff;
}
#storyWrap > dl dt{
    position: relative;
}
#storyWrap > dl dt > span{
font-size: 12px;
    font-size: 1.2rem;
    display: block;
    letter-spacing: 0.04em;
    padding-bottom: 17px;
    position: relative;
    cursor: pointer;
    padding-top: 14px;
    padding-left: 4.6%;
    padding-right: 4.6%;
}
#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 0 0 / 100%;
    width: 50px;
    height: 10px;
    position: absolute;
    top: 23px;
    right: 4.6%;
    transition: .3s ease-in-out;
}
#storyWrap > dl dt.active > span:after{
    opacity: 0;
    transform: translateX(20px);
}
#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.active:before{
    transform-origin: left top;
    transform: scale(1, 1);
}
#storyWrap > dl dt > span > span{
    color: #23b8c5;
}
#storyWrap > dl dd{
    font-size: 12px;
    font-size: 1.2rem;
    letter-spacing: 0.1em;
    line-height: 2;
    font-weight: 200;
    padding-top: 14px;
    padding-left: 4.6%;
    padding-right: 4.6%;
    padding-bottom: 8%;
}
#storyWrap > dl dd:last-of-type{
    padding-bottom: 0;
}
/*BDDVD*/
#bddvdWrap {
	position: relative;
	z-index: 50;
	font-weight:500;
	font-size:13px;
	padding-top:40px;
}

#bddvdWrap .bddvds {

	margin-right: 5%;
	margin-left: 5%;
}
#bddvdNav {
	width: 100%;
	display: flex;
	flex-wrap:wrap;
	padding-bottom: 30px;
}

#bddvdNav li {
	width:calc(100% / 3);
	padding:0 1% 2%;
}
#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:100%;
	border:1px solid #FFF;
	margin-bottom:2%;
}
#bddvdNav li a .thumb img {
	width:100%;
	height:auto;
}
#bddvdNav li a .bdListName {
	height:20px;
	border:1px solid #FFF;
	line-height:20px;
	text-align:center;
}
#bddvdNav li a.active .bdListName {
	background:#FFF;
	color:#000;
}
#bddvdSpec {
	padding-bottom: 30px;
}
#bddvdSpecImg {
	width: 65%;
	border: 1px solid rgba(255,255,255,1);
	margin: 0 auto 15px;
}
#dvdSpecText {
	width: 550px;
	line-height: 250%;
	font-size: 13px;
}
#bddvdWrap h3 {
	height: 40px;
	background: rgba(255,255,255,1);
	font-size: 18px;
	line-height: 38px;
	color: rgba(0,0,0,1);
	text-align: center;
	margin-bottom: 30px;
}
#bddvdWrap .pc {
	display:none;
}
.salesDate {
	font-size: 16px;
	line-height: 60px;
	height: 60px;
}
#dvdSpecText dl {
	margin:0px;
}
#dvdSpecText dt {
	clear:both;
	float:left;
}
#dvdSpecText dt:before {
	content:'■';
}
#dvdSpecText dt:after {
	content:'：';
}
#bddvdWrap h4 {
	background: rgba(64,64,64,1);
	height: 40px;
	font-size: 16px;
	line-height: 40px;
	color: rgba(255,255,255,1);
	text-align: center;
}
#bddvdWrap .bddvdSpecialBox {
	border: 1px solid rgba(64,64,64,1);
	padding: 5%;
	line-height:250%;
	margin-bottom:20px;
}
.bddvdins { padding-bottom: 50px; }
.bddvdins img {
	width:100%;
	height:auto;
}
.bddvdtitle {
    font-weight: bold;
    color: #23b8c5;
}

/* ▼SUB-MUSIC▼ --------------------------------- 
-------------------------------------------------*/

#musicWrap{
    padding: 26px 4.6% 0;
}
ul#tabLink{
    display: -webkit-box;
    display: flex;
}
ul#tabLink li{
    width: 49%;
    margin-bottom: 26px;
}
ul#tabLink li:first-child{
    margin-right: 1%;
}
ul#tabLink li:last-child{
    margin-left: 1%;
}
ul#tabLink li a{
    display: block;
    text-decoration: none;
    width: 100%;
    height: 100%;
    padding: 6px;
    border: 1px solid #2B2B2B;
    color: #fff;
    letter-spacing: 0.06em;
    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.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.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: 8px;
    font-size: 0.8rem;
    padding: 1px 0;
    margin-bottom: 4px;
}
ul#tabLink li a .mTtl{
    text-align: center;
    display: block;
    font-size: 14px;
    font-size: 1.4rem;
    line-height: 1.4;
}
ul#tabLink li a .mTtl > span{
    font-size: 11px;
    font-size: 1.1rem;
    display: block;
}
#oneMusicWrap > h3{
    font-size: 18px;
    font-size: 1.8rem;
    font-family: 'Noto Serif JP', serif;
    text-align: center;
}
#oneMusicWrap > h3 .mSingle{
    font-family: 'Roboto', sans-serif;
    display: block;
    background: #2B2B2B;
    text-align: center;
    font-size: 9px;
    font-size: 0.9rem;
    padding: 0px 8px;
    letter-spacing: 0.07em;
    vertical-align: text-top;
    margin-top: 2px;
    width: 90px;
    margin: 6px auto 0;
}
#oneMusicWrap > h3 .mTtl{
    font-size: 25px;
    font-size: 2.5rem;
}
#mSale{
    text-align: center;
    color: #23b8c5;
    font-size: 14px;
    font-size: 1.4rem;
    margin-top: 10px;
    margin-bottom: 26px;
    font-weight: bold;
}
.oneMusic{
    position: relative;
    margin-bottom: 14px;
}
.oneMusic > h3{
    background: #2B2B2B;
    text-align: center;
    font-size: 12px;
    font-size: 1.2rem;
    letter-spacing: 0.06em;
    font-weight: bold;
    padding: 5px 0;
    line-height: 20px;
    margin-bottom: 20px;
}
.oneMusic > figure{
    width: 80%;
    margin: 0 auto 20px;
}
.cdIcon{
    color: #000;
    background: #fff;
    font-size: 12px;
    font-size: 1.2rem;
    display: block;
    width: 50px;
    line-height: 1.5;
    text-align: center;
    margin-bottom: 10px;
}
.dIcon{
    width: 170px !important;
}
.oneMusicTxt > ul li{
    font-size: 10px;
    font-size: 1rem;
    border-bottom: 1px solid #2B2B2B;
    margin-bottom: 8px;
    padding-bottom: 8px;
    letter-spacing: 0.06em;
}
.oneMusicTxt > ul{
    margin-bottom: 30px;
}
.supplement{
    font-size: 10px;
    font-size: 1rem;
    margin-bottom: 20px;
}
#mOfficialLink a{
    width: 100%;
    background: #000;
    border: 1px solid #2B2B2B;
    display: block;
    height: 100%;
    line-height: 44px;
    color: #fff;
    text-decoration: none;
    position: relative;
    font-size: 12px;
    font-size: 1.2rem;
    letter-spacing: 0.08em;
    padding-left: 4.6%;
}
#mOfficialLink a:before {
    content: "";
    position: absolute;
    background: url(../img/common/triangle_r_w.svg) no-repeat 0 0 / 100%;
    width: 6px;
    height: 8px;
    right: 4.6%;
    top: 50%;
    transform: translateY(-50%);
}