@charset "UTF-8";
/* html5doctor.com Reset Stylesheet v1.6.1
Last Updated: 2010-09-17 Author: Richard Clark - http://richclarkdesign.com Twitter: @rich_clark */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none;
}

mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold;
}

del {
  text-decoration: line-through;
}

abbr[title], dfn[title] {
  border-bottom: 1px dotted;
  cursor: help;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #cccccc;
  margin: 1em 0;
  padding: 0;
}

input, select {
  vertical-align: middle;
}

/* [@extend] */
body {
  -webkit-text-size-adjust: 100%;
}

/* [common.scss] */
/*------------------------------------*/
/*[MIXIN]*/
body {
  font-family: 'Lato', 'Noto Sans JP', sans-serif !important;
}

.skewBtn, .gNav li a, .headerNews .newsArea .more a, #index #storyBox .more a, #story #modal .controller .storyNav a, #story #modal .controller .backBtn a, #story #modal .detailSuper .btnPdf a, #goods .rebtn a, #music .rebtn a, #event .rebtn a, #tophe .rebtn a, #special .categoryBtn li a, #special.loginpage .box1 .btn a, #special.loginpage .box2 .followArea .btn a, #special.loginpage .box2 .loginArea .btn a, #special.lstpage .btnMore a, #special.detailpage .btnBack a, #special.shortstory .ssbox.mana .btn a, #special.shortstory .ssbox.sayu .btn a, #special.shortstory .ssbox.mizuha .btn a, #special.shortstory .ssbox.kae .btn a, #special.shortstory .ssbox.kasumi .btn a, #special.shortstory .ssbox.mii .btn a, #special.shortstory .ssbox.mix .btn a, #special.shortstory .btnPlayAll .btn a, #special.shortstory .controller li a {
  position: relative;
  display: block;
  overflow: hidden;
  z-index: 1;
}
.skewBtn::before, .gNav li a::before, .headerNews .newsArea .more a::before, #index #storyBox .more a::before, #story #modal .controller .storyNav a::before, #story #modal .controller .backBtn a::before, #story #modal .detailSuper .btnPdf a::before, #goods .rebtn a::before, #music .rebtn a::before, #event .rebtn a::before, #tophe .rebtn a::before, #special .categoryBtn li a::before, #special.loginpage .box1 .btn a::before, #special.loginpage .box2 .followArea .btn a::before, #special.loginpage .box2 .loginArea .btn a::before, #special.lstpage .btnMore a::before, #special.detailpage .btnBack a::before, #special.shortstory .ssbox.mana .btn a::before, #special.shortstory .ssbox.sayu .btn a::before, #special.shortstory .ssbox.mizuha .btn a::before, #special.shortstory .ssbox.kae .btn a::before, #special.shortstory .ssbox.kasumi .btn a::before, #special.shortstory .ssbox.mii .btn a::before, #special.shortstory .ssbox.mix .btn a::before, #special.shortstory .btnPlayAll .btn a::before, #special.shortstory .controller li a::before {
  display: block;
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  width: 120%;
  height: 100%;
  -webkit-transform: translate(-120%, 0) skew(-20deg);
  -ms-transform: translate(-120%, 0) skew(-20deg);
  transform: translate(-120%, 0) skew(-20deg);
  -webkit-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}
.skewBtn:hover::before, .gNav li a:hover::before, .headerNews .newsArea .more a:hover::before, #index #storyBox .more a:hover::before, #story #modal .controller .storyNav a:hover::before, #story #modal .controller .backBtn a:hover::before, #story #modal .detailSuper .btnPdf a:hover::before, #goods .rebtn a:hover::before, #music .rebtn a:hover::before, #event .rebtn a:hover::before, #special .categoryBtn li a:hover::before, #special.loginpage .box1 .btn a:hover::before, #special.loginpage .box2 .followArea .btn a:hover::before, #special.loginpage .box2 .loginArea .btn a:hover::before, #special.lstpage .btnMore a:hover::before, #special.detailpage .btnBack a:hover::before, #special.shortstory .ssbox.mana .btn a:hover::before, #special.shortstory .ssbox.sayu .btn a:hover::before, #special.shortstory .ssbox.mizuha .btn a:hover::before, #special.shortstory .ssbox.kae .btn a:hover::before, #special.shortstory .ssbox.kasumi .btn a:hover::before, #special.shortstory .ssbox.mii .btn a:hover::before, #special.shortstory .ssbox.mix .btn a:hover::before, #special.shortstory .btnPlayAll .btn a:hover::before, #special.shortstory .controller li a:hover::before, .skewBtn.active::before, .gNav li a.active::before, .headerNews .newsArea .more a.active::before, #index #storyBox .more a.active::before, #story #modal .controller .storyNav a.active::before, #story #modal .controller .backBtn a.active::before, #story #modal .detailSuper .btnPdf a.active::before, #goods .rebtn a.active::before, #music .rebtn a.active::before, #tophe .rebtn a.active::before, #event .rebtn a.active::before, #special .categoryBtn li a.active::before, #special.loginpage .box1 .btn a.active::before, #special.loginpage .box2 .followArea .btn a.active::before, #special.loginpage .box2 .loginArea .btn a.active::before, #special.lstpage .btnMore a.active::before, #special.detailpage .btnBack a.active::before, #special.shortstory .ssbox.mana .btn a.active::before, #special.shortstory .ssbox.sayu .btn a.active::before, #special.shortstory .ssbox.mizuha .btn a.active::before, #special.shortstory .ssbox.kae .btn a.active::before, #special.shortstory .ssbox.kasumi .btn a.active::before, #special.shortstory .ssbox.mii .btn a.active::before, #special.shortstory .ssbox.mix .btn a.active::before, #special.shortstory .btnPlayAll .btn a.active::before, #special.shortstory .controller li a.active::before {
  -webkit-transform: translate(-5%, 0) skew(0);
  -ms-transform: translate(-5%, 0) skew(0);
  transform: translate(-5%, 0) skew(0);
}

.opacityBtn, .headerNews .twt a {
  -webkit-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}
.opacityBtn:hover, .headerNews .twt a:hover {
  opacity: 0.6;
}

.shakeBtn {
  display: block;
}

.shakeBtn:hover {
  -webkit-animation: shakeAction 0.5s forwards linear;
  animation: shakeAction 0.5s forwards linear;
}

@-webkit-keyframes shakeAction {
  0% {
    -webkit-transform: rotate(1.2deg);
    transform: rotate(1.2deg);
  }
  20% {
    -webkit-transform: rotate(-0.8deg);
    transform: rotate(-0.8deg);
  }
  40% {
    -webkit-transform: rotate(0.4deg);
    transform: rotate(0.4deg);
  }
  60% {
    -webkit-transform: rotate(-0.75deg);
    transform: rotate(-0.75deg);
  }
  70% {
    -webkit-transform: rotate(0.375deg);
    transform: rotate(0.375deg);
  }
  80% {
    -webkit-transform: rotate(-0.25deg);
    transform: rotate(-0.25deg);
  }
  90% {
    -webkit-transform: rotate(0.125deg);
    transform: rotate(0.125deg);
  }
  100% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
}
@keyframes shakeAction {
  0% {
    -webkit-transform: rotate(1.2deg);
    transform: rotate(1.2deg);
  }
  20% {
    -webkit-transform: rotate(-0.8deg);
    transform: rotate(-0.8deg);
  }
  40% {
    -webkit-transform: rotate(0.4deg);
    transform: rotate(0.4deg);
  }
  60% {
    -webkit-transform: rotate(-0.75deg);
    transform: rotate(-0.75deg);
  }
  70% {
    -webkit-transform: rotate(0.375deg);
    transform: rotate(0.375deg);
  }
  80% {
    -webkit-transform: rotate(-0.25deg);
    transform: rotate(-0.25deg);
  }
  90% {
    -webkit-transform: rotate(0.125deg);
    transform: rotate(0.125deg);
  }
  100% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
}
.shakeBtnHard, #character #modalbox .charaDetailSuper .voice a {
  display: block;
}

.shakeBtnHard:hover, #character #modalbox .charaDetailSuper .voice a:hover {
  -webkit-animation: shakeActionHard 0.5s forwards linear;
  animation: shakeActionHard 0.5s forwards linear;
}

@-webkit-keyframes shakeActionHard {
  0% {
    -webkit-transform: rotate(2.4deg);
    transform: rotate(2.4deg);
  }
  20% {
    -webkit-transform: rotate(-1.6deg);
    transform: rotate(-1.6deg);
  }
  40% {
    -webkit-transform: rotate(0.8deg);
    transform: rotate(0.8deg);
  }
  60% {
    -webkit-transform: rotate(-1.5deg);
    transform: rotate(-1.5deg);
  }
  70% {
    -webkit-transform: rotate(0.7deg);
    transform: rotate(0.7deg);
  }
  80% {
    -webkit-transform: rotate(-0.5deg);
    transform: rotate(-0.5deg);
  }
  90% {
    -webkit-transform: rotate(0.25deg);
    transform: rotate(0.25deg);
  }
  100% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
}
@keyframes shakeActionHard {
  0% {
    -webkit-transform: rotate(2.4deg);
    transform: rotate(2.4deg);
  }
  20% {
    -webkit-transform: rotate(-1.6deg);
    transform: rotate(-1.6deg);
  }
  40% {
    -webkit-transform: rotate(0.8deg);
    transform: rotate(0.8deg);
  }
  60% {
    -webkit-transform: rotate(-1.5deg);
    transform: rotate(-1.5deg);
  }
  70% {
    -webkit-transform: rotate(0.7deg);
    transform: rotate(0.7deg);
  }
  80% {
    -webkit-transform: rotate(-0.5deg);
    transform: rotate(-0.5deg);
  }
  90% {
    -webkit-transform: rotate(0.25deg);
    transform: rotate(0.25deg);
  }
  100% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
}
/*------------------------------------*/
/*[Z-INDEX]*/
.headerNews {
  z-index: 100;
}

#footerWrapper {
  z-index: 200;
}

#pageEffect {
  z-index: 1000;
}

/*------------------------------------*/
/*[BASE SETTING]*/
body {
  background-color: #FFF;
  overflow-y: scroll;
}

img {
  vertical-align: top;
}

a, a img {
  outline: none;
}

#stage {
  position: relative;
  min-width: 1240px;
  box-sizing: border-box;
  overflow: hidden;
  display: none;
}

.loading {
  position: fixed;
  left: 50%;
  top: 40%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  background: url("../common/img/loading.png") no-repeat;
  -webkit-animation: arrowAnimation 2s linear 0s infinite normal;
  animation: arrowAnimation 2s linear 0s infinite normal;
}

.sec .loading {
  background: url("../common/img/loading_sec.png") no-repeat;
}
.sec #stage {
  border-top: 8px solid #eb58a2;
}
.sec .bgs {
  opacity: 0;
}
.sec #main {
  position: relative;
  width: 840px;
  margin: 0 auto;
  padding-top: 65px;
  -webkit-transform: translate(120px, 0);
  -ms-transform: translate(120px, 0);
  transform: translate(120px, 0);
}
.sec .line {
  background-color: #FFF;
}

.page_ttl {
  position: relative;
  width: 840px;
  min-height: 48px;
  font-size: 56px;
  font-size: 3.5rem;
  line-height: 1;
  font-weight: normal;
  color: #e62e8b;
  text-align: center;
  background: url("../common/img/page_ttl_bg.png") no-repeat;
}

*::selection {
  background: #e62e8b;
  color: #fff;
}

*::-moz-selection {
  background: #e62e8b;
  color: #fff;
}

/*------------------------------------*/
/*[BGS]*/
.bgs {
  position: fixed;
  left: 0;
  top: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  min-width: 1240px;
}
.bgs .line {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: url("../common/img/bg_line.png");
}
.bgs .triangle {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: url("../common/img/bg_triangle.gif");
}
.bgs .arrow {
  position: absolute;
  left: -340px;
  bottom: -200px;
  width: 680px;
  height: 680px;
  background: url("../common/img/bg_arrow.png");
  -webkit-transform: rotate(-50deg);
  -ms-transform: rotate(-50deg);
  transform: rotate(-50deg);
  /*
   -webkit-animation: arrowAnimation 10s linear 0s infinite normal;
       animation: arrowAnimation 10s linear 0s infinite normal;
  */
}
.bgs #bgStar {
  position: absolute;
  left: 0;
  top: 0;
  background: transparent;
}
.bgs .pagebg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 200%;
  -webkit-transform: skew(-60deg);
  -ms-transform: skew(-60deg);
  transform: skew(-60deg);
  overflow: hidden;
}
.bgs .pagebg .inner {
  width: 100%;
  height: 100%;
  -webkit-transform: skew(60deg);
  -ms-transform: skew(60deg);
  transform: skew(60deg);
  overflow: hidden;
}

@-webkit-keyframes arrowAnimation {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
  }
}
@keyframes arrowAnimation {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
  }
}
#pageEffect {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: none;
}
#pageEffect .layer1, #pageEffect .layer2 {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
#pageEffect .layer1 .inner {
  border-radius: 50%;
  opacity: 0.3;
}
#pageEffect .layer2 .inner {
  border-radius: 50%;
}

/*------------------------------------*/
/*[LOGIN]*/
.login .gNav .special a {
  color: #e62e8b;
}
.login .gNav .special a::after {
  content: '';
  display: block;
  position: absolute;
  left: 2px;
  top: 50%;
  margin-top: -9px;
  width: 13px;
  height: 16px;
  background: url("../common/img/nav_icon_login.png") 0 0 no-repeat;
}
.login .gNav .special a:hover, .login .gNav .special a.active {
  color: #FFF;
}
.login .gNav .special a:hover::after, .login .gNav .special a.active::after {
  background: url("../common/img/nav_icon_login_w.png") 0 0 no-repeat;
}
.login .btnLogOut {
  display: block !important;
}

.btnLogOut {
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  cursor: pointer;
  display: none;
}
.btnLogOut:hover {
  opacity: 0.8;
}

#index .btnLogOut {
  position: absolute;
  right: 90px;
}

.sec .btnLogOut {
  position: fixed;
  right: 0;
  top: 8px;
  z-index: 1000;
}

/*------------------------------------*/
/*[Global Nav]*/
.gNav li {
  position: relative;
  width: 240px;
  font-style: italic;
  font-size: 17px;
  font-size: 1.0625rem;
  line-height: 1.7;
  font-weight: normal;
  letter-spacing: 0.1em;
}
.gNav li.special {
  font-size: 17px;
}
.gNav li:first-child {
  margin-top: 15px;
}
.gNav li:not(:first-child) {
  margin-top: 5px;
}
.gNav li span {
  display: block;
  padding: 0 0 0 20px;
}
.gNav li.invalid {
  color: #999;
}
.gNav li a {
  display: block;
  width: 100%;
  color: #000;
  text-decoration: none;
  -webkit-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}
.gNav li a::before {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
}
.gNav li a:hover {
  color: #FFF;
}
.gNav li a.active {
  color: #FFF;
}
.gNav li a.active::before {
  -webkit-transform: translate(-5%, 0) skew(0);
  -ms-transform: translate(-5%, 0) skew(0);
  transform: translate(-5%, 0) skew(0);
}
.gNav li:nth-child(1) a::before, .gNav li:nth-child(6n+1) a::before {
  background-color: #f9ad39;
}
.gNav li:nth-child(2) a::before, .gNav li:nth-child(6n+2) a::before {
  background-color: #43c1f2;
}
.gNav li:nth-child(3) a::before, .gNav li:nth-child(6n+3) a::before {
  background-color: #f06942;
}
.gNav li:nth-child(4) a::before, .gNav li:nth-child(6n+4) a::before {
  background-color: #ef6fb0;
}
.gNav li:nth-child(5) a::before, .gNav li:nth-child(6n+5) a::before {
  background-color: #c6a4d2;
}
.gNav li:nth-child(6) a::before, .gNav li:nth-child(6n+6) a::before {
  background-color: #add444;
}

#secHeader {
  position: absolute;
  left: 40px;
  top: 40px;
}
#secHeader .gNav {
  margin-top: 65px;
}
#secHeader .site_ttl {
  height: 88px;
}

.headerSns .sectionWrapper {
  margin-top: 40px;
}
.headerSns .twtfollow {
  margin-top: 15px;
}
.headerSns .twgt {
  width: 220px;
  height: 273px;
  margin-top: 15px;
  padding: 10px;
  box-sizing: border-box;
  background: white;
  background: rgba(255, 255, 255, 0.7);
}
.headerSns .count {
  margin-top: 15px;
  overflow: hidden;
}
.headerSns .count li {
  float: left;
}
.headerSns .count li:not(first-child) {
  margin-left: 15px;
}

/*------------------------------------*/
/*[HEADER NEWS]*/
.headerNews {
  position: absolute;
  width: 100%;
  height: 50px;
  background: #e62e8b;
  background: rgba(230, 46, 139, 0.8);
  -webkit-transition: all 0.4s ease-out;
  transition: all 0.4s ease-out;
  overflow: hidden;
}
.headerNews .headerNewsInner {
  padding: 0 40px;
  overflow: hidden;
}
.headerNews .headerNewsInner .le {
  float: left;
  padding-top: 17px;
}
.headerNews .headerNewsInner .ri {
  float: right;
  width: 32px;
  padding-top: 9px;
}
.headerNews .newsArea {
  overflow: hidden;
}
.headerNews .newsArea .setion_ttl {
  float: left;
  width: 90px;
}
.headerNews .newsArea .newsAreaMain {
  float: left;
  width: 625px;
  overflow: hidden;
}
.headerNews .newsArea .newsAreaMain li {
  height: 30px;
  font-size: 12px;
  font-size: 0.75rem;
  line-height: 1.7;
  font-weight: normal;
  color: #FFF;
}
.headerNews .newsArea .newsAreaMain a {
  color: #fff;
  text-decoration: none;
}
.headerNews .newsArea .newsAreaMain a:hover {
  text-decoration: underline;
}
.headerNews .newsArea .more {
  float: left;
  -webkit-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
  border: 1px solid #fff;
}
.headerNews .newsArea .more a {
  height: 100%;
  padding: 0 10px;
  background: #fff;
  font-size: 10px;
  font-size: 0.625rem;
  line-height: 1.7;
  font-weight: bold;
  font-style: italic;
  color: #e62e8b;
  text-decoration: none;
  -webkit-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}
.headerNews .newsArea .more a::before {
  background-color: #e62e8b;
}
.headerNews .newsArea .more a:hover, .headerNews .newsArea .more a.active {
  color: #fff;
}
.headerNews .twt {
  background-color: #FFF;
  border-radius: 50%;
}
.headerNews:hover {
  height: 180px;
}

/*------------------------------------*/
/*[FOOTER]*/
#footerWrapper {
  position: fixed;
  left: 0;
  bottom: -40px;
  width: 100%;
  min-width: 1240px;
  min-height: 150px;
}

#links .sectionWrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 0 40px;
  background: #e62e8b;
  background: rgba(230, 46, 139, 0.8);
}
#links .sectionInner {
  display: table;
  padding-bottom: 20px;
}
#links .setion_ttl {
  display: table-cell;
  vertical-align: top;
  width: 160px;
  padding-top: 10px;
}
#links .bnrs {
  display: table-cell;
  vertical-align: top;
  overflow: hidden;
}
#links .bnrs li {
  float: left;
  padding-top: 20px;
}
#links .bnrs li:not(:last-child) {
  margin-right: 20px;
}
#links .bnrs li a:hover {
  opacity: 0.8;
}

#footerbox {
  position: absolute;
  left: 0;
  top: 110px;
  width: 100%;
  height: 80px;
  padding: 0 40px;
  box-sizing: border-box;
  background: #FFF;
}
#footerbox .sectionWrapper {
  width: 100%;
  overflow: hidden;
}
#footerbox .copyrightsArea {
  float: left;
  padding-top: 30px;
}
#footerbox .copyrightsArea small {
  display: block;
  font-size: 12px;
  font-size: 0.75rem;
  line-height: 1.7;
  font-weight: normal;
}
#footerbox .contactArea {
  float: right;
  padding-top: 20px;
  text-align: right;
}
#footerbox .contactArea .txt {
  font-size: 12px;
  font-size: 0.75rem;
  line-height: 1.7;
  font-weight: normal;
}
#footerbox .contactArea .contact {
  font-size: 12px;
  font-size: 0.75rem;
  line-height: 1.7;
  font-weight: normal;
  font-style: normal;
}
#footerbox .contactArea .contact a {
  color: #00a7e9;
  text-decoration: none;
}
#footerbox .contactArea .contact a:hover {
  text-decoration: none;
}

/* indexスタイル */
#index #indexHeader {
  position: absolute;
  left: 40px;
  top: 85px;
  z-index: 50;
}
#index .gNav {
  margin-top: 35px;
}
#index #storyBox .sectionWrapper {
  position: absolute;
  right: 40px;
  top: 90px;
}
#index #storyBox .setion_ttl {
  margin-bottom: 15px;
}
#index #storyBox .image a {
  width: 200px;
  overflow: hidden;
  display: block;
  position: relative;
}
#index #storyBox .image a span {
  display: block;
  position: relative;
}
#index #storyBox .image a::before, #index #storyBox .image a::after, #index #storyBox .image a span::before, #index #storyBox .image a span::after {
  content: '';
  display: block;
  position: absolute;
  pointer-events: none;
}
#index #storyBox .image a::before {
  left: 0;
  top: 0;
  width: 2px;
  height: 0;
  z-index: 1;
  background: #e62e8b;
  background: -moz-linear-gradient(top, #e62e8b 0%, #00a7ea 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e62e8b), color-stop(100%, #00a7ea));
  background: -webkit-linear-gradient(top, #e62e8b 0%, #00a7ea 100%);
  background: -o-linear-gradient(top, #e62e8b 0%, #00a7ea 100%);
  background: -ms-linear-gradient(top, #e62e8b 0%, #00a7ea 100%);
  background: linear-gradient(to bottom, #e62e8b 0%, #00a7ea 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$start-color', endColorstr='$end-color',GradientType=0 );
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
#index #storyBox .image a:hover::before {
  height: 100%;
}
#index #storyBox .image a::after {
  left: 0;
  top: 0;
  width: 0;
  height: 2px;
  background: #e62e8b;
  background: -moz-linear-gradient(left, #e62e8b 0%, #00a7ea 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, #e62e8b), color-stop(100%, #00a7ea));
  background: -webkit-linear-gradient(left, #e62e8b 0%, #00a7ea 100%);
  background: -o-linear-gradient(left, #e62e8b 0%, #00a7ea 100%);
  background: -ms-linear-gradient(left, #e62e8b 0%, #00a7ea 100%);
  background: linear-gradient(to right, #e62e8b 0%, #00a7ea 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$start-color', endColorstr='$end-color',GradientType=1 );
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
#index #storyBox .image a:hover::after {
  width: 100%;
}
#index #storyBox .image a span::before {
  right: 0;
  bottom: 0;
  width: 2px;
  height: 0;
  z-index: 2;
  background: #00a7ea;
  background: -moz-linear-gradient(top, #00a7ea 0%, #e62e8b 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #00a7ea), color-stop(100%, #e62e8b));
  background: -webkit-linear-gradient(top, #00a7ea 0%, #e62e8b 100%);
  background: -o-linear-gradient(top, #00a7ea 0%, #e62e8b 100%);
  background: -ms-linear-gradient(top, #00a7ea 0%, #e62e8b 100%);
  background: linear-gradient(to bottom, #00a7ea 0%, #e62e8b 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$start-color', endColorstr='$end-color',GradientType=0 );
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
#index #storyBox .image a:hover span::before {
  height: 100%;
}
#index #storyBox .image a span::after {
  right: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: #00a7ea;
  background: -moz-linear-gradient(left, #00a7ea 0%, #e62e8b 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, #00a7ea), color-stop(100%, #e62e8b));
  background: -webkit-linear-gradient(left, #00a7ea 0%, #e62e8b 100%);
  background: -o-linear-gradient(left, #00a7ea 0%, #e62e8b 100%);
  background: -ms-linear-gradient(left, #00a7ea 0%, #e62e8b 100%);
  background: linear-gradient(to right, #00a7ea 0%, #e62e8b 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$start-color', endColorstr='$end-color',GradientType=1 );
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
#index #storyBox .image a:hover span::after {
  width: 100%;
}
#index #storyBox .image a img {
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
#index #storyBox .image a:hover img {
  -webkit-transform: scale(1.1, 1.1);
  -ms-transform: scale(1.1, 1.1);
  transform: scale(1.1, 1.1);
}
#index #storyBox .more {
  position: absolute;
  right: 0;
  top: 0;
  -webkit-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}
#index #storyBox .more a {
  height: 100%;
  padding: 0 10px;
  background: #00a7e9;
  font-size: 10px;
  font-size: 0.625rem;
  line-height: 1.7;
  font-weight: bold;
  font-style: italic;
  color: #FFF;
  text-decoration: none;
  -webkit-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}
#index #storyBox .more a::before {
  background-color: #0078ff;
}
#index #storyBox .more a:hover, #index #storyBox .more a.active {
  color: #FFF;
}
#index #pickupBox .sectionWrapper {
  position: absolute;
  right: 40px;
  top: 500px;
  display: none;
}
#index #pickupBox .pickOne {
  margin-top: 0px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.6);
}
#index #pickupBox .image {
  width: 176px;
  height: 176px;
  overflow: hidden;
}
#index #pickupBox .image img {
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
#index #pickupBox .ov {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(249, 173, 57, 0.9);
  opacity: 0;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
#index #pickupBox .ov p {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  font-size: 13px;
  font-size: 0.8125rem;
  line-height: 1.5;
  font-weight: normal;
  color: #FFF;
  text-align: center;
  -webkit-transform: translate(-50%, -50%) scale(1.5);
  transform: translate(-50%, -50%) scale(1.5);
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
#index #pickupBox a {
  display: block;
  position: relative;
}
#index #pickupBox a:hover img {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}
#index #pickupBox a:hover .ov {
  opacity: 1;
}
#index #pickupBox a:hover .ov p {
  -webkit-transform: translate(-50%, -50%) scale(1);
  transform: translate(-50%, -50%) scale(1);
}
#index #main {
  min-height: 1450px;
  padding-top: 80px;
}
#index #main .txt1 {
  width: 37.8%;
  margin: 0 auto;
  padding-left: 120px;
  text-align: center;
}
#index #main .txt1 img {
  max-width: 100%;
}
#index #main .charas {
  position: relative;
  width: 70%;
  max-width: 1600px;
  margin: 0px auto 0 auto;
  padding-top: 92.6%;
}
#index #main .charas .back, #index #main .charas .front {
  position: absolute;
  top: -40px;
  left: 30px;
  width: 90%;
  height: 100%;
}
#index #main .charas .back {
  background: url("../index/img/chara_layer1.png") no-repeat center top;
  background-size: contain;
}
#index #main .charas .front {
  background: url("../index/img/chara_layer2.png") no-repeat center top;
  background-size: contain;
}
#index.opening .bgs .triangle, #index.opening .bgs .arrow, #index.opening .bgs #bgStar {
  display: none;
}
#index.opening #indexHeader .site_ttl, #index.opening #indexHeader .gNav .sectionWrapper, #index.opening #indexHeader .headerSns .sectionWrapper {
  display: none;
}
#index.opening .headerNews {
  display: none;
}
#index.opening #storyBox .sectionWrapper {
  display: none;
}
#index.opening #main .txt1 {
  display: none;
}
#index.opening #main .charas {
  visibility: hidden;
}
#index.opening #footerWrapper {
  display: none;
}

/* Characterスタイル */
#character {
  background-color: #f06942;
  /* [CHARACTER TOP画面] */
  /* [CHARACTER 詳細画面] */
}
#character #stage {
  width: 100%;
}
#character .pagebg .inner {
  background: url("../character/img/bg.png") no-repeat 50% -200px;
  background-size: cover;
}
#character .charaLst {
  width: 720px;
  margin: 60px auto 0 auto;
  -webkit-transform: translate(40px, 0);
  -ms-transform: translate(40px, 0);
  transform: translate(40px, 0);
  overflow: hidden;
}
#character .charaLst li {
  float: left;
  margin: 40px 40px 0 0;
  opacity: 0;
  -webkit-transform: translate(0, 50px);
  -ms-transform: translate(0, 50px);
  transform: translate(0, 50px);
}
#character .charaLst .inner {
  position: relative;
  z-index: 1;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
}
#character .charaLst .image {
  position: relative;
  width: 180px;
  height: 180px;
}
#character .charaLst .image img {
  display: block;
  position: relative;
  z-index: 0;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
#character .charaLst .name {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  text-align: center;
  color: #FFF;
  -webkit-transform: scale(1.5);
  -ms-transform: scale(1.5);
  transform: scale(1.5);
  opacity: 0;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
#character .charaLst .name span {
  width: 180px;
  display: block;
}
#character .charaLst .name .ja {
  padding-top: 60px;
  font-size: 24px;
  font-size: 1.5rem;
  line-height: 1.5;
  font-weight: bold;
}
#character .charaLst .name .en {
  font-size: 12px;
  font-size: 0.75rem;
  line-height: 1.5;
  font-weight: normal;
}
#character .charaLst .name::before {
  content: '';
  display: block;
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
}
#character .charaLst .chara0 .inner {
  background: url("../character/img/index/btn_bg_yellow.gif");
}
#character .charaLst .chara0 .name::before {
  background: rgba(247, 153, 8, 0.8);
}
#character .charaLst .chara1 .inner {
  background: url("../character/img/index/btn_bg_water.gif");
}
#character .charaLst .chara1 .name::before {
  background: rgba(20, 178, 239, 0.7);
}
#character .charaLst .chara2 .inner {
  background: url("../character/img/index/btn_bg_orange.gif");
}
#character .charaLst .chara2 .name::before {
  background: rgba(236, 67, 19, 0.7);
}
#character .charaLst .chara3 .inner {
  background: url("../character/img/index/btn_bg_pink.gif");
}
#character .charaLst .chara3 .name::before {
  background: rgba(235, 75, 156, 0.7);
}
#character .charaLst .chara4 .inner {
  background: url("../character/img/index/btn_bg_purple.gif");
}
#character .charaLst .chara4 .name::before {
  background: rgba(184, 141, 199, 0.7);
}
#character .charaLst .chara5 .inner {
  background: url("../character/img/index/btn_bg_green.gif");
}
#character .charaLst .chara5 .name::before {
  background: rgba(153, 201, 21, 0.7);
}
#character .charaLst .inner:hover .image img {
  -webkit-transform: scale(1.1, 1.1);
  -ms-transform: scale(1.1, 1.1);
  transform: scale(1.1, 1.1);
}
#character .charaLst .inner:hover .name {
  opacity: 1;
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}
#character #modalbox {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 500;
  width: 100%;
  height: 100%;
  min-width: 1240px;
  min-height: 900px;
  overflow: hidden;
  display: none;
}
#character #modalbox .bgWhite {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 300%;
  height: 0;
  background: #FFF;
  -webkit-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  -webkit-transform: translate(-50%, -50%) rotate(-45deg);
  -ms-transform: translate(-50%, -50%) rotate(-45deg);
  transform: translate(-50%, -50%) rotate(-45deg);
}
#character #modalbox .charaDetailSuper {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: none;
}
#character #modalbox .charaDetailSuper .borbox {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1060px;
  padding: 40px;
  border-radius: 20px;
  box-sizing: border-box;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
#character #modalbox .charaDetailSuper .textArea {
  width: 380px;
  margin-left: auto;
}
#character #modalbox .charaDetailSuper .name {
  text-align: right;
}
#character #modalbox .charaDetailSuper .name span {
  display: block;
}
#character #modalbox .charaDetailSuper .name .ja {
  font-size: 64px;
  font-size: 4rem;
  line-height: 1;
  font-weight: normal;
  text-shadow: -1px -1px #fff, 1px -1px #fff, -1px 1px #fff, 1px 1px #fff;
}
#character #modalbox .charaDetailSuper .name .en {
  margin-top: 10px;
  font-size: 24px;
  font-size: 1.5rem;
  line-height: 1;
  font-weight: normal;
  text-shadow: -1px -1px #fff, 1px -1px #fff, -1px 1px #fff, 1px 1px #fff;
}
#character #modalbox .charaDetailSuper .cv {
  margin-top: 10px;
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 1.5;
  font-weight: normal;
  text-align: right;
}
#character #modalbox .charaDetailSuper .profile .section_ttl {
  margin-top: 25px;
}
#character #modalbox .charaDetailSuper .profile .profLst {
  margin-top: 5px;
  overflow: hidden;
}
#character #modalbox .charaDetailSuper .profile .profLst dt, #character #modalbox .charaDetailSuper .profile .profLst dd {
  float: left;
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 1.5;
  font-weight: normal;
}
#character #modalbox .charaDetailSuper .detail .section_ttl {
  margin-top: 25px;
  font-size: 18px;
  font-size: 1.125rem;
  line-height: 1.5;
  font-weight: bold;
  text-shadow: -1px -1px #fff, 1px -1px #fff, -1px 1px #fff, 1px 1px #fff;
}
#character #modalbox .charaDetailSuper .detail .txt {
  margin-top: 10px;
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 1.7;
  font-weight: normal;
  text-shadow: -1px -1px #fff, 1px -1px #fff, -1px 1px #fff, 1px 1px #fff;
}
#character #modalbox .charaDetailSuper .voice {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-500px, 120px);
  -ms-transform: translate(-500px, 120px);
  transform: translate(-500px, 120px);
  display: none;
}
#character #modalbox .charaDetailSuper .image {
  position: absolute;
  left: 50%;
  top: 50%;
}
#character #modalbox .charaDetailSection {
  width: 100%;
  height: 100%;
}
#character #modalbox .borboxWrapper {
  width: 100%;
  height: 100%;
}
#character #modalbox .chara0 .name, #character #modalbox .chara0 .cv span, #character #modalbox .chara0 .profile dt, #character #modalbox .chara0 .detail .section_ttl {
  color: #f79908;
}
#character #modalbox .chara0 .borbox {
  border: 4px solid #f9c13b;
}
#character #modalbox .chara0 .image {
  -webkit-transform: translate(-510px, -320px);
  -ms-transform: translate(-510px, -320px);
  transform: translate(-510px, -320px);
}
#character #modalbox .chara1 .name, #character #modalbox .chara1 .cv span, #character #modalbox .chara1 .profile dt, #character #modalbox .chara1 .detail .section_ttl {
  color: #14b2ef;
}
#character #modalbox .chara1 .borbox {
  border: 4px solid #7fcef4;
}
#character #modalbox .chara1 .image {
  -webkit-transform: translate(-770px, -330px);
  -ms-transform: translate(-770px, -330px);
  transform: translate(-770px, -330px);
}
#character #modalbox .chara2 .name, #character #modalbox .chara2 .cv span, #character #modalbox .chara2 .profile dt, #character #modalbox .chara2 .detail .section_ttl {
  color: #ec4313;
}
#character #modalbox .chara2 .borbox {
  border: 4px solid #f29b76;
}
#character #modalbox .chara2 .image {
  -webkit-transform: translate(-950px, -320px);
  -ms-transform: translate(-950px, -320px);
  transform: translate(-950px, -320px);
}
#character #modalbox .chara3 .name, #character #modalbox .chara3 .cv span, #character #modalbox .chara3 .profile dt, #character #modalbox .chara3 .detail .section_ttl {
  color: #eb4b9c;
}
#character #modalbox .chara3 .borbox {
  border: 4px solid #f19ec2;
}
#character #modalbox .chara3 .image {
  -webkit-transform: translate(-550px, -330px);
  -ms-transform: translate(-550px, -330px);
  transform: translate(-550px, -330px);
}
#character #modalbox .chara4 .name, #character #modalbox .chara4 .cv span, #character #modalbox .chara4 .profile dt, #character #modalbox .chara4 .detail .section_ttl {
  color: #b88dc7;
}
#character #modalbox .chara4 .borbox {
  border: 4px solid #d1bbda;
}
#character #modalbox .chara4 .image {
  -webkit-transform: translate(-480px, -300px);
  -ms-transform: translate(-480px, -300px);
  transform: translate(-480px, -300px);
}
#character #modalbox .chara5 .name, #character #modalbox .chara5 .cv span, #character #modalbox .chara5 .profile dt, #character #modalbox .chara5 .detail .section_ttl {
  color: #99c915;
}
#character #modalbox .chara5 .borbox {
  border: 4px solid #c1db81;
}
#character #modalbox .chara5 .image {
  -webkit-transform: translate(-560px, -350px);
  -ms-transform: translate(-560px, -350px);
  transform: translate(-560px, -350px);
}
#character #modalbox .controller {
  position: absolute;
  right: 20px;
  top: 40px;
  text-align: center;
}
#character #modalbox .controller .close {
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
#character #modalbox .controller .close:hover {
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}
#character #modalbox .controller .thumbs li {
  margin-top: 10px;
}
#character #modalbox .controller .thumbs li:first-child {
  margin-top: 40px;
}
#character #modalbox .bgLT, #character #modalbox .bgRB {
  position: absolute;
  width: 300px;
  height: 300px;
  transform-origin: 50% 50%;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
#character #modalbox .bgLT {
  left: -150px;
  top: -150px;
}
#character #modalbox .bgRB {
  right: -150px;
  bottom: -150px;
}
#character #modalbox .front, #character #modalbox .back {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
#character #modalbox .back {
  opacity: 0.3;
}

/* STAFF&CASTスタイル */
#staffcast {
  background-color: #c6a4d2;
}
#staffcast .pagebg .inner {
  background: url("../staffcast/img/bg.png") no-repeat 50% -200px;
  background-size: cover;
}
#staffcast .scbox {
  margin-top: 100px;
  overflow: hidden;
}
#staffcast .scbox .section_ttl {
  padding-bottom: 20px;
  font-size: 24px;
  font-size: 1.5rem;
  line-height: 1.5;
  font-weight: normal;
  text-align: center;
  background: url("../staffcast/img/ttl_bg.png") no-repeat center bottom;
  opacity: 0;
}
#staffcast .scbox .sbox {
  float: left;
  width: 380px;
  margin-right: 60px;
}
#staffcast .scbox .sbox .sinner {
  margin-top: 30px;
  -webkit-transform: translate(50px, 0);
  -ms-transform: translate(50px, 0);
  transform: translate(50px, 0);
  opacity: 0;
}
#staffcast .scbox .sbox .role {
  display: block;
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 1.5;
  font-weight: normal;
}
#staffcast .scbox .sbox .name {
  display: block;
  font-size: 24px;
  font-size: 1.5rem;
  line-height: 1.5;
  font-weight: normal;
}
#staffcast .scbox .sbox .txt {
  font-size: 12px;
  font-size: 0.75rem;
  line-height: 1.7;
  font-weight: normal;
}
#staffcast .scbox .sbox .staff1 .name_ttl {
  color: #eb4b9c;
}
#staffcast .scbox .sbox .staff2 .name_ttl {
  color: #14b2ef;
}
#staffcast .scbox .cbox {
  float: left;
  width: 400px;
  overflow: hidden;
}
#staffcast .scbox .cbox .cinner {
  width: 150px;
  margin: 30px 0 0 50px;
  float: left;
  -webkit-transform: translate(0, 50px);
  -ms-transform: translate(0, 50px);
  transform: translate(0, 50px);
  opacity: 0;
}
#staffcast .scbox .cbox .role {
  display: block;
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 1.5;
  font-weight: normal;
}
#staffcast .scbox .cbox .name {
  display: block;
  font-size: 24px;
  font-size: 1.5rem;
  line-height: 1.5;
  font-weight: normal;
}
#staffcast .scbox .cbox .chara1 .name_ttl {
  color: #f79908;
}
#staffcast .scbox .cbox .chara2 .name_ttl {
  color: #14b2ef;
}
#staffcast .scbox .cbox .chara3 .name_ttl {
  color: #ec4313;
}
#staffcast .scbox .cbox .chara4 .name_ttl {
  color: #eb4b9c;
}
#staffcast .scbox .cbox .chara5 .name_ttl {
  color: #b88dc7;
}
#staffcast .scbox .cbox .chara6 .name_ttl {
  color: #99c915;
}
#staffcast .scbox .cbox .chara7 .name_ttl {
  color: #d997c5;
}
#staffcast .scbox .cbox .chara8 .name_ttl {
  color: #fc608f;
}
#staffcast .scbox .cbox .chara9 .name_ttl {
  color: #9dadd8;
}
#staffcast .scbox .cbox .chara10 .name_ttl {
  color: #4ddfca;
}

/* STORYスタイル */
#story {
  background-color: #43c1f2;
}
#story #stage {
  width: 100%;
}
#story .pagebg .inner {
  background: url("../story/img/bg.png") no-repeat 50% -200px;
  background-size: cover;
}
#story .lstpage .section_ttl {
  margin-top: 60px;
  padding-bottom: 20px;
  font-size: 24px;
  font-size: 1.5rem;
  line-height: 1.5;
  font-weight: normal;
  text-align: center;
  background: url("../story/img/index/ttl_bg.png") no-repeat center bottom;
  opacity: 0;
}
#story .lstpage .txt {
  margin-top: 20px;
  font-size: 16px;
  font-size: 1rem;
  line-height: 2.2;
  font-weight: normal;
  text-align: center;
  visibility: hidden;
}
#story .lstpage .txt span {
  display: block;
}
#story .lstpage .txt strong {
  font-size: 22px;
  font-size: 1.375rem;
  line-height: 2.2;
  font-weight: normal;
  color: #e62e8b;
}
#story .lstpage .lstBtns {
  overflow: hidden;
}
#story .lstpage .lstBtns li {
  float: left;
  margin-top: 40px;
}
#story .lstpage .lstBtns li:not(:nth-child(4n)) {
  margin-right: 40px;
}
#story .lstpage .lstBtns .lstBtnWrapper {
  position: relative;
  width: 180px;
  height: 180px;
  overflow: hidden;
  box-sizing: border-box;
  background-color: #FFF;
  opacity: 0;
  -webkit-transform: translate(0, 100px);
  -ms-transform: translate(0, 100px);
  transform: translate(0, 100px);
  border-radius: 0;
  -webkit-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}
#story .lstpage .lstBtns .ttlArea {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
#story .lstpage .lstBtns .ttlArea .ttlAreaInner {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}
#story .lstpage .lstBtns .ttlArea .sttl {
  font-size: 18px;
  font-size: 1.125rem;
  line-height: 1.7;
  font-weight: bold;
}
#story .lstpage .lstBtns .ttlArea .sttl span {
  font-size: 24px;
  font-size: 1.5rem;
  line-height: 1.7;
  font-weight: bold;
}
#story .lstpage .lstBtns .ttlArea .ttl_txt {
  width: 160px;
  font-size: 16px;
  font-size: 1rem;
  line-height: 1.5;
  font-weight: bold;
  color: #000;
}
#story .lstpage .lstBtns .ttlArea .btn {
  display: inline-block;
  margin-top: 10px;
  padding: 2px 10px;
  font-size: 12px;
  font-size: 0.75rem;
  line-height: 1.5;
  font-weight: normal;
  color: #fff;
  background: #e62e8b;
}
#story .lstpage .lstBtns .ttlArea::after {
  display: block;
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 50%;
  opacity: 0;
  -webkit-transform: translate(-50%, -50%) scale(1.5);
  -ms-transform: translate(-50%, -50%) scale(1.5);
  transform: translate(-50%, -50%) scale(1.5);
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
#story .lstpage .lstBtns .mana .lstBtnWrapper {
  border: 2px solid #f79908;
}
#story .lstpage .lstBtns .mana .sttl, #story .lstpage .lstBtns .mana .ttl_txt {
  color: #f79908;
}
#story .lstpage .lstBtns .sayu .lstBtnWrapper {
  border: 2px solid #14b2ef;
}
#story .lstpage .lstBtns .sayu .sttl, #story .lstpage .lstBtns .sayu .ttl_txt {
  color: #14b2ef;
}
#story .lstpage .lstBtns .mizuha .lstBtnWrapper {
  border: 2px solid #ec4313;
}
#story .lstpage .lstBtns .mizuha .sttl, #story .lstpage .lstBtns .mizuha .ttl_txt {
  color: #ec4313;
}
#story .lstpage .lstBtns .kae .lstBtnWrapper {
  border: 2px solid #eb4b9c;
}
#story .lstpage .lstBtns .kae .sttl, #story .lstpage .lstBtns .kae .ttl_txt {
  color: #eb4b9c;
}
#story .lstpage .lstBtns .kasumi .lstBtnWrapper {
  border: 2px solid #b88dc7;
}
#story .lstpage .lstBtns .kasumi .sttl, #story .lstpage .lstBtns .kasumi .ttl_txt {
  color: #b88dc7;
}
#story .lstpage .lstBtns .mii .lstBtnWrapper {
  border: 2px solid #99c915;
}
#story .lstpage .lstBtns .mii .sttl, #story .lstpage .lstBtns .mii .ttl_txt {
  color: #99c915;
}
#story .lstpage .lstBtns .haruka .lstBtnWrapper {
  border: 2px solid #d997c5;
}
#story .lstpage .lstBtns .haruka .sttl, #story .lstpage .lstBtns .haruka .ttl_txt {
  color: #d997c5;
}
#story .lstpage .lstBtns .stella .lstBtnWrapper {
  border: 2px solid #ff3366;
}
#story .lstpage .lstBtns .stella .sttl, #story .lstpage .lstBtns .stella .ttl_txt {
  color: #ff3366;
}
#story .lstpage .lstBtns .mana2 .lstBtnWrapper {
  border: 2px solid #f79908;
}
#story .lstpage .lstBtns .mana2 .sttl, #story .lstpage .lstBtns .mana2 .ttl_txt {
  color: #f79908;
}
#story .lstpage .lstBtns .aone .lstBtnWrapper {
  border: 2px solid #fc608f;
}
#story .lstpage .lstBtns .aone .sttl, #story .lstpage .lstBtns .aone .ttl_txt {
  color: #fc608f;
}
#story .lstpage .lstBtns .ruka .lstBtnWrapper {
  border: 2px solid #9dadd8;
}
#story .lstpage .lstBtns .ruka .sttl, #story .lstpage .lstBtns .ruka .ttl_txt {
  color: #9dadd8;
}
#story .lstpage .lstBtns .sango .lstBtnWrapper {
  border: 2px solid #4ddfca;
}
#story .lstpage .lstBtns .sango .sttl, #story .lstpage .lstBtns .sango .ttl_txt {
  color: #4ddfca;
}
#story .lstpage .lstBtns .story1 .ttlArea::after {
  background: url("../story/img/index/lstBtns_story1_img.jpg") no-repeat 50% 50%;
}
#story .lstpage .lstBtns .story2 .ttlArea::after {
  background: url("../story/img/index/lstBtns_story2_img.jpg") no-repeat 50% 50%;
}
#story .lstpage .lstBtns .story3 .ttlArea::after {
  background: url("../story/img/index/lstBtns_story3_img.jpg") no-repeat 50% 50%;
}
#story .lstpage .lstBtns .story4 .ttlArea::after {
  background: url("../story/img/index/lstBtns_story4_img.jpg") no-repeat 50% 50%;
}
#story .lstpage .lstBtns .story5 .ttlArea::after {
  background: url("../story/img/index/lstBtns_story5_img.jpg") no-repeat 50% 50%;
}
#story .lstpage .lstBtns .story6 .ttlArea::after {
  background: url("../story/img/index/lstBtns_story6_img.jpg") no-repeat 50% 50%;
}
#story .lstpage .lstBtns .story7 .ttlArea::after {
  background: url("../story/img/index/lstBtns_story7_img.jpg") no-repeat 50% 50%;
}
#story .lstpage .lstBtns .story8 .ttlArea::after {
  background: url("../story/img/index/lstBtns_story8_img.jpg") no-repeat 50% 50%;
}
#story .lstpage .lstBtns .story9 .ttlArea::after {
  background: url("../story/img/index/lstBtns_story9_img.jpg") no-repeat 50% 50%;
}
#story .lstpage .lstBtns .story10 .ttlArea::after {
  background: url("../story/img/index/lstBtns_story10_img.jpg") no-repeat 50% 50%;
}
#story .lstpage .lstBtns .story11 .ttlArea::after {
  background: url("../story/img/index/lstBtns_story11_img.jpg") no-repeat 50% 50%;
}
#story .lstpage .lstBtns .story12 .ttlArea::after {
  background: url("../story/img/index/lstBtns_story12_img.jpg") no-repeat 50% 50%;
}
#story .lstpage .lstBtns .story13 .ttlArea::after {
  background: url("../story/img/index/lstBtns_story13_img.jpg") no-repeat 50% 50%;
}
#story .lstpage .lstBtns .story14 .ttlArea::after {
  background: url("../story/img/index/lstBtns_story14_img.jpg") no-repeat 50% 50%;
}
#story .lstpage .lstBtns .story15 .ttlArea::after {
  background: url("../story/img/index/lstBtns_story15_img.jpg") no-repeat 50% 50%;
}
#story .lstpage .lstBtns .story16 .ttlArea::after {
  background: url("../story/img/index/lstBtns_story16_img.jpg") no-repeat 50% 50%;
}
#story .lstpage .lstBtns .story17 .ttlArea::after {
  background: url("../story/img/index/lstBtns_story17_img.jpg") no-repeat 50% 50%;
}
#story .lstpage .lstBtns .story18 .ttlArea::after {
  background: url("../story/img/index/lstBtns_story18_img.jpg") no-repeat 50% 50%;
}
#story .lstpage .lstBtns .story19 .ttlArea::after {
  background: url("../story/img/index/lstBtns_story19_img.jpg") no-repeat 50% 50%;
}
#story .lstpage .lstBtns .story20 .ttlArea::after {
  background: url("../story/img/index/lstBtns_story20_img.jpg") no-repeat 50% 50%;
}
#story .lstpage .lstBtns .story21 .ttlArea::after {
  background: url("../story/img/index/lstBtns_story21_img.jpg") no-repeat 50% 50%;
}
#story .lstpage .lstBtns a {
  text-decoration: none;
}
#story .lstpage .lstBtns a:hover .lstBtnWrapper {
  border-radius: 50%;
}
#story .lstpage .lstBtns a:hover .ttlArea::after {
  opacity: 1;
  -webkit-transform: translate(-50%, -50%) scale(1);
  -ms-transform: translate(-50%, -50%) scale(1);
  transform: translate(-50%, -50%) scale(1);
}
#story #modal {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  min-height: 100%;
  border-top: 8px solid #eb58a2;
  box-sizing: border-box;
}
#story #modal .controller {
  position: fixed;
  left: 40px;
  top: 0;
  height: 100%;
  border-left: 2px solid #e62e8b;
}
#story #modal .controller .controllerInner {
  position: absolute;
  left: 0;
  top: 50%;
  -webkit-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%);
}
#story #modal .controller .storyNav {
  margin-top: 50px;
}
#story #modal .controller .storyNav li {
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 1.7;
  font-weight: normal;
}
#story #modal .controller .storyNav li:not(first-child) {
  margin-top: 5px;
}
#story #modal .controller .storyNav a {
  display: block;
  text-decoration: none;
  color: #000;
  -webkit-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}
#story #modal .controller .storyNav a::before {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  background-color: #e62e8b;
}
#story #modal .controller .storyNav a:hover {
  color: #FFF;
}
#story #modal .controller .storyNav a.active {
  color: #FFF;
}
#story #modal .controller .storyNav a.active::before {
  -webkit-transform: translate(-5%, 0) skew(0);
  -ms-transform: translate(-5%, 0) skew(0);
  transform: translate(-5%, 0) skew(0);
}
#story #modal .controller .storyNav span {
  display: block;
  width: 120px;
  padding: 2px 15px;
  box-sizing: border-box;
  background: url("../story/img/detail/nav_arrow.png") no-repeat 0 50%;
}
#story #modal .controller .backBtn {
  margin-top: 20px;
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 1.7;
  font-weight: normal;
}
#story #modal .controller .backBtn a {
  display: block;
  padding: 2px 15px;
  color: #000;
  text-decoration: none;
  -webkit-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}
#story #modal .controller .backBtn a::before {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  background-color: #e62e8b;
}
#story #modal .controller .backBtn a:hover {
  color: #FFF;
}
#story #modal .detailSuper {
  width: 1000px;
  margin: 50px auto 0 auto;
  padding-bottom: 50px;
  -webkit-transform: translate(60px, 0);
  -ms-transform: translate(60px, 0);
  transform: translate(60px, 0);
  overflow: hidden;
  display: none;
}
#story #modal .detailSuper .imgArea {
  float: left;
  width: 560px;
}
#story #modal .detailSuper .txtArea {
  float: left;
  width: 440px;
  padding-top: 30px;
}
#story #modal .detailSuper .story_ttl {
  font-size: 28px;
  font-size: 1.75rem;
  line-height: 1.7;
  font-weight: normal;
  color: #e62e8b;
}
#story #modal .detailSuper .story_ttl span {
  font-size: 35px;
  font-size: 2.1875rem;
  line-height: 1.7;
  font-weight: normal;
}
#story #modal .detailSuper .midashi {
  position: relative;
  font-size: 35px;
  font-size: 2.1875rem;
  line-height: 1.7;
  font-weight: normal;
  -webkit-transform: translate(-20px, 0);
  -ms-transform: translate(-20px, 0);
  transform: translate(-20px, 0);
}
#story #modal .detailSuper .midashi span {
  display: inline-block;
}
#story #modal .detailSuper .komidashi {
  margin-top: 35px;
}
#story #modal .detailSuper .zenkai {
  margin-top: 20px;
  font-size: 16px;
  font-size: 1rem;
  line-height: 1.5;
  font-weight: bold;
  color: #e62e8b;
}
#story #modal .detailSuper .txt {
  margin-top: 10px;
  font-size: 16px;
  font-size: 1rem;
  line-height: 2.2;
  font-weight: normal;
}
#story #modal .detailSuper .txt span {
  display: block;
}
#story #modal .detailSuper .btnPdf {
  display: inline-block;
  margin-top: 30px;
  font-size: 16px;
  font-size: 1rem;
  line-height: 1.7;
  font-weight: normal;
}
#story #modal .detailSuper .btnPdf a {
  display: block;
  background: #00a7e9;
  color: #FFF;
  text-decoration: none;
}
#story #modal .detailSuper .btnPdf a::before {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  background-color: #0078ff;
}
#story #modal .detailSuper .btnPdf span {
  display: block;
  padding: 10px 15px 10px 45px;
  background: url("../story/img/detail/icon_pdf.png") no-repeat 10px 50%;
}
#story #modal .closeBtn {
  position: absolute;
  right: 40px;
  top: 40px;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
#story #modal .closeBtn:hover {
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

/* WORLDスタイル */
#world {
  background-color: #ef6fb0;
}
#world .pagebg .inner {
  background: url("../world/img/bg.png") no-repeat 50% -200px;
  background-size: cover;
}
#world .boxSuper {
  width: 100%;
  margin-top: 60px;
}
#world .boxSuper .boxInner {
  margin-top: 30px;
  overflow: hidden;
}
#world .boxSuper .section_ttl {
  padding-bottom: 20px;
  font-size: 24px;
  font-size: 1.5rem;
  line-height: 1.5;
  font-weight: normal;
  text-align: center;
  background: url("../story/img/index/ttl_bg.png") no-repeat center bottom;
  opacity: 0;
}
#world .boxSuper .imgArea {
  width: 520px;
  opacity: 0;
  -webkit-transform: translate(0, 50px);
  -ms-transform: translate(0, 50px);
  transform: translate(0, 50px);
}
#world .boxSuper .txtArea {
  width: 280px;
  font-size: 16px;
  font-size: 1rem;
  line-height: 2;
  font-weight: normal;
  opacity: 0;
  -webkit-transform: translate(0, 50px);
  -ms-transform: translate(0, 50px);
  transform: translate(0, 50px);
}
#world .boxSuper:first-child .imgArea {
  -webkit-transform: translate(0, 20px);
  -ms-transform: translate(0, 20px);
  transform: translate(0, 20px);
}
#world .boxSuper:first-child .txtArea {
  -webkit-transform: translate(0, 20px);
  -ms-transform: translate(0, 20px);
  transform: translate(0, 20px);
}
#world .imgLeftBox .imgArea {
  float: left;
}
#world .imgLeftBox .txtArea {
  float: right;
}
#world .imgRightBox .imgArea {
  float: right;
}
#world .imgRightBox .txtArea {
  float: left;
}

/* GOODSスタイル */
#goods {
  background-color: #43c1f2;
}
#goods .pagebg .inner {
  background: url("../goods/img/bg.png") no-repeat 50% -200px;
  background-size: cover;
}
#goods .lst {
  display: table;
}
#goods .lst .cellbox {
  display: inline-block;
  width: 264px;
  margin-top: 60px;
  margin-left: 20px;
  background: rgba(255, 255, 255, 0.8);
  border-top: 4px solid #e62e8b;
  vertical-align: top;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
#goods .lst .cellbox:first-child, #goods .lst .cellbox:nth-child(4n) {
  margin-left: 0;
}
#goods .lst .cellbox .image img {
  width: 224px;
  height: auto;
}
#goods .lst .cellbox:hover {
  background: rgba(255, 247, 247, 0.8);
}
#goods .lst .cellbox:hover .image img {
  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
}
#goods .lst .cellbox:hover .image::before {
  height: 100%;
}
#goods .lst .cellbox:hover .image::after {
  width: 100%;
}
#goods .lst .cellbox:hover .image figure::before {
  height: 100%;
}
#goods .lst .cellbox:hover .image figure::after {
  width: 100%;
}
#goods .lst .innerbox {
  position: relative;
  margin: 0 auto;
  padding: 20px;
  overflow: hidden;
}
#goods .lst .innerbox::after {
  content: '';
  display: block;
  position: absolute;
  right: -15px;
  bottom: -15px;
  width: 30px;
  height: 30px;
  background: #e62e8b;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
#goods .lst .txt {
  margin-top: 10px;
  height: 60px;
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 1.7;
  font-weight: normal;
  color: #e62e8b;
}
#goods .lst a {
  color: #e62e8b;
  text-decoration: none;
}
#goods .lst .image {
  position: relative;
  width: 224px;
  height: 158px;
  overflow: hidden;
}
#goods .lst .image figure {
  display: block;
}
#goods .lst .image img {
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
#goods .lst .image::before, #goods .lst .image::after, #goods .lst .image figure::before, #goods .lst .image figure::after {
  content: '';
  display: block;
  position: absolute;
  pointer-events: none;
}
#goods .lst .image::before {
  left: 0;
  top: 0;
  width: 2px;
  height: 0;
  z-index: 1;
  background: #e62e8b;
  background: -moz-linear-gradient(top, #e62e8b 0%, #00a7ea 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e62e8b), color-stop(100%, #00a7ea));
  background: -webkit-linear-gradient(top, #e62e8b 0%, #00a7ea 100%);
  background: -o-linear-gradient(top, #e62e8b 0%, #00a7ea 100%);
  background: -ms-linear-gradient(top, #e62e8b 0%, #00a7ea 100%);
  background: linear-gradient(to bottom, #e62e8b 0%, #00a7ea 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$start-color', endColorstr='$end-color',GradientType=0 );
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
#goods .lst .image::after {
  left: 0;
  top: 0;
  width: 0;
  height: 2px;
  background: #e62e8b;
  background: -moz-linear-gradient(left, #e62e8b 0%, #00a7ea 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, #e62e8b), color-stop(100%, #00a7ea));
  background: -webkit-linear-gradient(left, #e62e8b 0%, #00a7ea 100%);
  background: -o-linear-gradient(left, #e62e8b 0%, #00a7ea 100%);
  background: -ms-linear-gradient(left, #e62e8b 0%, #00a7ea 100%);
  background: linear-gradient(to right, #e62e8b 0%, #00a7ea 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$start-color', endColorstr='$end-color',GradientType=1 );
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
#goods .lst .image figure::before {
  right: 0;
  bottom: 0;
  width: 2px;
  height: 0;
  z-index: 2;
  background: #00a7ea;
  background: -moz-linear-gradient(top, #00a7ea 0%, #e62e8b 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #00a7ea), color-stop(100%, #e62e8b));
  background: -webkit-linear-gradient(top, #00a7ea 0%, #e62e8b 100%);
  background: -o-linear-gradient(top, #00a7ea 0%, #e62e8b 100%);
  background: -ms-linear-gradient(top, #00a7ea 0%, #e62e8b 100%);
  background: linear-gradient(to bottom, #00a7ea 0%, #e62e8b 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$start-color', endColorstr='$end-color',GradientType=0 );
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
#goods .lst .image figure::after {
  right: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: #00a7ea;
  background: -moz-linear-gradient(left, #00a7ea 0%, #e62e8b 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, #00a7ea), color-stop(100%, #e62e8b));
  background: -webkit-linear-gradient(left, #00a7ea 0%, #e62e8b 100%);
  background: -o-linear-gradient(left, #00a7ea 0%, #e62e8b 100%);
  background: -ms-linear-gradient(left, #00a7ea 0%, #e62e8b 100%);
  background: linear-gradient(to right, #00a7ea 0%, #e62e8b 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$start-color', endColorstr='$end-color',GradientType=1 );
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
#goods .rebtn {
  position: relative;
  margin-top: 60px;
  text-align: center;
}
#goods .rebtn a {
  display: inline-block;
  padding: 2px 15px;
  color: #FFF;
  text-decoration: none;
  background: #aaaaaa;
}
#goods .rebtn a::before {
  display: block;
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  background-color: #e62e8b;
  -webkit-transition: all 0.4s ease-out;
  transition: all 0.4s ease-out;
}
#goods .goodsDetail {
  margin-top: 60px;
  padding: 40px;
  background: rgba(255, 255, 255, 0.8);
}
#goods .goodsDetail .goods_ttl {
  font-size: 18px;
  font-size: 1.125rem;
  line-height: 1.5;
  font-weight: normal;
  color: #e62e8b;
}
#goods .goodsDetail .goods_txt {
  margin-top: 20px;
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 1.7;
  font-weight: normal;
  color: #000;
}
#goods .goodsDetail .goods_txt a {
  color: #00a7e9;
  text-decoration: none;
}
#goods .goodsDetail .goods_txt a:hover {
  text-decoration: underline;
}
#goods .goodsDetail .goods_image {
  margin-top: 20px;
  text-align: center;
}

/* MOVIEスタイル */
#movie {
  background-color: #add444;
}
#movie .pagebg .inner {
  background: url("../movie/img/bg.png") no-repeat 50% -200px;
  background-size: cover;
}
#movie .lst {
  display: table;
}
#movie .lst .cellbox {
  display: inline-block;
  width: 264px;
  margin-top: 60px;
  margin-left: 20px;
  background: rgba(255, 255, 255, 0.8);
  border-top: 4px solid #e62e8b;
  vertical-align: top;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
#movie .lst .cellbox:first-child, #movie .lst .cellbox:nth-child(4n) {
  margin-left: 0;
}
#movie .lst .cellbox .image img {
  width: 224px;
  height: auto;
}
#movie .lst .cellbox:hover {
  background: rgba(255, 247, 247, 0.8);
}
#movie .lst .cellbox:hover .image img {
  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
}
#movie .lst .cellbox:hover .image::before {
  height: 100%;
}
#movie .lst .cellbox:hover .image::after {
  width: 100%;
}
#movie .lst .cellbox:hover .image figure::before {
  height: 100%;
}
#movie .lst .cellbox:hover .image figure::after {
  width: 100%;
}
#movie .lst .innerbox {
  position: relative;
  margin: 0 auto;
  padding: 20px;
  overflow: hidden;
}
#movie .lst .innerbox::after {
  content: '';
  display: block;
  position: absolute;
  right: -15px;
  bottom: -15px;
  width: 30px;
  height: 30px;
  background: #e62e8b;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
#movie .lst .txt {
  margin-top: 10px;
  height: 60px;
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 1.7;
  font-weight: normal;
  color: #e62e8b;
}
#movie .lst a {
  color: #e62e8b;
  text-decoration: none;
}
#movie .lst .image {
  position: relative;
  width: 224px;
  height: 126px;
  overflow: hidden;
}
#movie .lst .image figure {
  display: block;
}
#movie .lst .image img {
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
#movie .lst .image::before, #movie .lst .image::after, #movie .lst .image figure::before, #movie .lst .image figure::after {
  content: '';
  display: block;
  position: absolute;
  pointer-events: none;
}
#movie .lst .image::before {
  left: 0;
  top: 0;
  width: 2px;
  height: 0;
  z-index: 1;
  background: #e62e8b;
  background: -moz-linear-gradient(top, #e62e8b 0%, #00a7ea 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e62e8b), color-stop(100%, #00a7ea));
  background: -webkit-linear-gradient(top, #e62e8b 0%, #00a7ea 100%);
  background: -o-linear-gradient(top, #e62e8b 0%, #00a7ea 100%);
  background: -ms-linear-gradient(top, #e62e8b 0%, #00a7ea 100%);
  background: linear-gradient(to bottom, #e62e8b 0%, #00a7ea 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$start-color', endColorstr='$end-color',GradientType=0 );
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
#movie .lst .image::after {
  left: 0;
  top: 0;
  width: 0;
  height: 2px;
  background: #e62e8b;
  background: -moz-linear-gradient(left, #e62e8b 0%, #00a7ea 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, #e62e8b), color-stop(100%, #00a7ea));
  background: -webkit-linear-gradient(left, #e62e8b 0%, #00a7ea 100%);
  background: -o-linear-gradient(left, #e62e8b 0%, #00a7ea 100%);
  background: -ms-linear-gradient(left, #e62e8b 0%, #00a7ea 100%);
  background: linear-gradient(to right, #e62e8b 0%, #00a7ea 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$start-color', endColorstr='$end-color',GradientType=1 );
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
#movie .lst .image figure::before {
  right: 0;
  bottom: 0;
  width: 2px;
  height: 0;
  z-index: 2;
  background: #00a7ea;
  background: -moz-linear-gradient(top, #00a7ea 0%, #e62e8b 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #00a7ea), color-stop(100%, #e62e8b));
  background: -webkit-linear-gradient(top, #00a7ea 0%, #e62e8b 100%);
  background: -o-linear-gradient(top, #00a7ea 0%, #e62e8b 100%);
  background: -ms-linear-gradient(top, #00a7ea 0%, #e62e8b 100%);
  background: linear-gradient(to bottom, #00a7ea 0%, #e62e8b 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$start-color', endColorstr='$end-color',GradientType=0 );
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
#movie .lst .image figure::after {
  right: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: #00a7ea;
  background: -moz-linear-gradient(left, #00a7ea 0%, #e62e8b 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, #00a7ea), color-stop(100%, #e62e8b));
  background: -webkit-linear-gradient(left, #00a7ea 0%, #e62e8b 100%);
  background: -o-linear-gradient(left, #00a7ea 0%, #e62e8b 100%);
  background: -ms-linear-gradient(left, #00a7ea 0%, #e62e8b 100%);
  background: linear-gradient(to right, #00a7ea 0%, #e62e8b 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$start-color', endColorstr='$end-color',GradientType=1 );
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

#movieCbox {
  background: transparent;
  overflow-y: auto;
}

/* MUSICスタイル */
#music {
  background-color: #f9ad39;
}
#music .pagebg .inner {
  background: url("../music/img/bg.png") no-repeat 50% -200px;
  background-size: cover;
}
#music .lst {
  display: table;
}
#music .lst .cellbox {
  display: inline-block;
  width: 264px;
  margin-top: 60px;
  margin-left: 20px;
  background: rgba(255, 255, 255, 0.8);
  border-top: 4px solid #e62e8b;
  vertical-align: top;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
#music .lst .cellbox:first-child, #music .lst .cellbox:nth-child(4n) {
  margin-left: 0;
}
#music .lst .cellbox .image img {
  width: 224px;
  height: auto;
}
#music .lst .cellbox:hover {
  background: rgba(255, 247, 247, 0.8);
}
#music .lst .cellbox:hover .image img {
  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
}
#music .lst .cellbox:hover .image::before {
  height: 100%;
}
#music .lst .cellbox:hover .image::after {
  width: 100%;
}
#music .lst .cellbox:hover .image figure::before {
  height: 100%;
}
#music .lst .cellbox:hover .image figure::after {
  width: 100%;
}
#music .lst .innerbox {
  position: relative;
  margin: 0 auto;
  padding: 20px;
  overflow: hidden;
}
#music .lst .innerbox::after {
  content: '';
  display: block;
  position: absolute;
  right: -15px;
  bottom: -15px;
  width: 30px;
  height: 30px;
  background: #e62e8b;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
#music .lst .txt {
  margin-top: 10px;
  height: 60px;
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 1.7;
  font-weight: normal;
  color: #e62e8b;
}
#music .lst a {
  color: #e62e8b;
  text-decoration: none;
}
#music .lst .image {
  position: relative;
  width: 224px;
  height: 224px;
  overflow: hidden;
}
#music .lst .image figure {
  display: block;
}
#music .lst .image img {
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
#music .lst .image::before, #music .lst .image::after, #music .lst .image figure::before, #music .lst .image figure::after {
  content: '';
  display: block;
  position: absolute;
  pointer-events: none;
}
#music .lst .image::before {
  left: 0;
  top: 0;
  width: 2px;
  height: 0;
  z-index: 1;
  background: #e62e8b;
  background: -moz-linear-gradient(top, #e62e8b 0%, #00a7ea 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e62e8b), color-stop(100%, #00a7ea));
  background: -webkit-linear-gradient(top, #e62e8b 0%, #00a7ea 100%);
  background: -o-linear-gradient(top, #e62e8b 0%, #00a7ea 100%);
  background: -ms-linear-gradient(top, #e62e8b 0%, #00a7ea 100%);
  background: linear-gradient(to bottom, #e62e8b 0%, #00a7ea 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$start-color', endColorstr='$end-color',GradientType=0 );
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
#music .lst .image::after {
  left: 0;
  top: 0;
  width: 0;
  height: 2px;
  background: #e62e8b;
  background: -moz-linear-gradient(left, #e62e8b 0%, #00a7ea 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, #e62e8b), color-stop(100%, #00a7ea));
  background: -webkit-linear-gradient(left, #e62e8b 0%, #00a7ea 100%);
  background: -o-linear-gradient(left, #e62e8b 0%, #00a7ea 100%);
  background: -ms-linear-gradient(left, #e62e8b 0%, #00a7ea 100%);
  background: linear-gradient(to right, #e62e8b 0%, #00a7ea 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$start-color', endColorstr='$end-color',GradientType=1 );
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
#music .lst .image figure::before {
  right: 0;
  bottom: 0;
  width: 2px;
  height: 0;
  z-index: 2;
  background: #00a7ea;
  background: -moz-linear-gradient(top, #00a7ea 0%, #e62e8b 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #00a7ea), color-stop(100%, #e62e8b));
  background: -webkit-linear-gradient(top, #00a7ea 0%, #e62e8b 100%);
  background: -o-linear-gradient(top, #00a7ea 0%, #e62e8b 100%);
  background: -ms-linear-gradient(top, #00a7ea 0%, #e62e8b 100%);
  background: linear-gradient(to bottom, #00a7ea 0%, #e62e8b 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$start-color', endColorstr='$end-color',GradientType=0 );
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
#music .lst .image figure::after {
  right: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: #00a7ea;
  background: -moz-linear-gradient(left, #00a7ea 0%, #e62e8b 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, #00a7ea), color-stop(100%, #e62e8b));
  background: -webkit-linear-gradient(left, #00a7ea 0%, #e62e8b 100%);
  background: -o-linear-gradient(left, #00a7ea 0%, #e62e8b 100%);
  background: -ms-linear-gradient(left, #00a7ea 0%, #e62e8b 100%);
  background: linear-gradient(to right, #00a7ea 0%, #e62e8b 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$start-color', endColorstr='$end-color',GradientType=1 );
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
#music .rebtn {
  position: relative;
  margin-top: 60px;
  text-align: center;
}
#music .rebtn a {
  display: inline-block;
  padding: 2px 15px;
  color: #FFF;
  text-decoration: none;
  background: #aaaaaa;
}
#music .rebtn a::before {
  display: block;
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  background-color: #e62e8b;
  -webkit-transition: all 0.4s ease-out;
  transition: all 0.4s ease-out;
}
#music .musicDetail {
  margin-top: 60px;
  padding: 40px;
  background: rgba(255, 255, 255, 0.8);
}
#music .musicDetail .music_ttl {
  font-size: 18px;
  font-size: 1.125rem;
  line-height: 1.5;
  font-weight: normal;
  color: #e62e8b;
}
#music .musicDetail .music_txt {
  margin-top: 20px;
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 1.7;
  font-weight: normal;
  color: #000;
}
#music .musicDetail .music_txt a {
  color: #00a7e9;
  text-decoration: none;
}
#music .musicDetail .music_txt a:hover {
  text-decoration: underline;
}
#music .musicDetail .music_image {
  margin-top: 20px;
  text-align: center;
}

/* EVENTスタイル */
#event {
  background-color: #f06942;
}
#event .pagebg .inner {
  background: url("../music/img/bg.png") no-repeat 50% -200px;
  background-size: cover;
}
#event .lst {
  display: table;
}
#event .lst .cellbox {
  display: inline-block;
  width: 264px;
  margin-top: 60px;
  margin-left: 20px;
  background: rgba(255, 255, 255, 0.8);
  border-top: 4px solid #e62e8b;
  vertical-align: top;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
#event .lst .cellbox:first-child, #event .lst .cellbox:nth-child(4n) {
  margin-left: 0;
}
#event .lst .cellbox .image img {
  width: 224px;
  height: auto;
}
#event .lst .cellbox:hover {
  background: rgba(255, 247, 247, 0.8);
}
#event .lst .cellbox:hover .image img {
  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
}
#event .lst .cellbox:hover .image::before {
  height: 100%;
}
#event .lst .cellbox:hover .image::after {
  width: 100%;
}
#event .lst .cellbox:hover .image figure::before {
  height: 100%;
}
#event .lst .cellbox:hover .image figure::after {
  width: 100%;
}
#event .lst .innerbox {
  position: relative;
  margin: 0 auto;
  padding: 20px;
  overflow: hidden;
}
#event .lst .innerbox::after {
  content: '';
  display: block;
  position: absolute;
  right: -15px;
  bottom: -15px;
  width: 30px;
  height: 30px;
  background: #e62e8b;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
#event .lst .txt {
  margin-top: 10px;
  height: 60px;
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 1.7;
  font-weight: normal;
  color: #e62e8b;
}
#event .lst a {
  color: #e62e8b;
  text-decoration: none;
}
#event .lst .image {
  position: relative;
  width: 224px;
  height: 126px;
  overflow: hidden;
}
#event .lst .image figure {
  display: block;
}
#event .lst .image img {
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
#event .lst .image::before, #event .lst .image::after, #event .lst .image figure::before, #event .lst .image figure::after {
  content: '';
  display: block;
  position: absolute;
  pointer-events: none;
}
#event .lst .image::before {
  left: 0;
  top: 0;
  width: 2px;
  height: 0;
  z-index: 1;
  background: #e62e8b;
  background: -moz-linear-gradient(top, #e62e8b 0%, #00a7ea 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e62e8b), color-stop(100%, #00a7ea));
  background: -webkit-linear-gradient(top, #e62e8b 0%, #00a7ea 100%);
  background: -o-linear-gradient(top, #e62e8b 0%, #00a7ea 100%);
  background: -ms-linear-gradient(top, #e62e8b 0%, #00a7ea 100%);
  background: linear-gradient(to bottom, #e62e8b 0%, #00a7ea 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$start-color', endColorstr='$end-color',GradientType=0 );
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
#event .lst .image::after {
  left: 0;
  top: 0;
  width: 0;
  height: 2px;
  background: #e62e8b;
  background: -moz-linear-gradient(left, #e62e8b 0%, #00a7ea 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, #e62e8b), color-stop(100%, #00a7ea));
  background: -webkit-linear-gradient(left, #e62e8b 0%, #00a7ea 100%);
  background: -o-linear-gradient(left, #e62e8b 0%, #00a7ea 100%);
  background: -ms-linear-gradient(left, #e62e8b 0%, #00a7ea 100%);
  background: linear-gradient(to right, #e62e8b 0%, #00a7ea 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$start-color', endColorstr='$end-color',GradientType=1 );
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
#event .lst .image figure::before {
  right: 0;
  bottom: 0;
  width: 2px;
  height: 0;
  z-index: 2;
  background: #00a7ea;
  background: -moz-linear-gradient(top, #00a7ea 0%, #e62e8b 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #00a7ea), color-stop(100%, #e62e8b));
  background: -webkit-linear-gradient(top, #00a7ea 0%, #e62e8b 100%);
  background: -o-linear-gradient(top, #00a7ea 0%, #e62e8b 100%);
  background: -ms-linear-gradient(top, #00a7ea 0%, #e62e8b 100%);
  background: linear-gradient(to bottom, #00a7ea 0%, #e62e8b 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$start-color', endColorstr='$end-color',GradientType=0 );
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
#event .lst .image figure::after {
  right: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: #00a7ea;
  background: -moz-linear-gradient(left, #00a7ea 0%, #e62e8b 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, #00a7ea), color-stop(100%, #e62e8b));
  background: -webkit-linear-gradient(left, #00a7ea 0%, #e62e8b 100%);
  background: -o-linear-gradient(left, #00a7ea 0%, #e62e8b 100%);
  background: -ms-linear-gradient(left, #00a7ea 0%, #e62e8b 100%);
  background: linear-gradient(to right, #00a7ea 0%, #e62e8b 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$start-color', endColorstr='$end-color',GradientType=1 );
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
#event .rebtn {
  position: relative;
  margin-top: 60px;
  text-align: center;
}
#event .rebtn a {
  display: inline-block;
  padding: 2px 15px;
  color: #FFF;
  text-decoration: none;
  background: #aaaaaa;
}
#event .rebtn a::before {
  display: block;
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  background-color: #e62e8b;
  -webkit-transition: all 0.4s ease-out;
  transition: all 0.4s ease-out;
}
#event .eventDetail {
  margin-top: 60px;
  padding: 40px;
  background: rgba(255, 255, 255, 0.8);
}
#event .eventDetail .event_ttl {
  font-size: 18px;
  font-size: 1.125rem;
  line-height: 1.5;
  font-weight: normal;
  color: #e62e8b;
}
#event .eventDetail .event_txt {
  margin-top: 20px;
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 1.7;
  font-weight: normal;
  color: #000;
}
#event .eventDetail .event_txt a {
  color: #00a7e9;
  text-decoration: none;
}
#event .eventDetail .event_txt a:hover {
  text-decoration: underline;
}
#event .eventDetail .event_image {
  margin-top: 20px;
  text-align: center;
}

/* SPECIAL スタイル */
#special {
  background-color: #ef6fb0;
}
#special .page_ttl {
  font-size: 48px;
}
#special .pagebg .inner {
  background: url("../special/img/bg.png") no-repeat 50% -200px;
  background-size: cover;
}
#special .section_ttl {
  margin-top: 60px;
  padding-bottom: 20px;
  font-size: 24px;
  font-size: 1.5rem;
  line-height: 1.5;
  font-weight: normal;
  text-align: center;
  background: url("../special/img/ttl_line.png") no-repeat center bottom;
}
#special .section_ttl span {
  display: inline-block;
  min-height: 35px;
  padding-left: 55px;
  background: url("../special/img/icon_person.png") no-repeat;
}
#special .categoryBtn {
  margin-top: 60px;
  text-align: center;
}
#special .categoryBtn li {
  display: inline-block;
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 1.7;
  font-weight: normal;
  font-style: italic;
}
#special .categoryBtn li:not(:first-child) {
  margin-left: 10px;
}
#special .categoryBtn li a {
  display: block;
  padding: 2px 15px;
  color: #FFF;
  text-decoration: none;
  background: #aaaaaa;
}
#special .categoryBtn li a::before {
  display: block;
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  -webkit-transition: all 0.4s ease-out;
  transition: all 0.4s ease-out;
}
#special .categoryBtn li a.active::before {
  -webkit-transform: translate(-5%, 0) skew(0);
  -ms-transform: translate(-5%, 0) skew(0);
  transform: translate(-5%, 0) skew(0);
}
#special .categoryBtn li:nth-child(1) a::before {
  background-color: #e62e8b;
}
#special .categoryBtn li:nth-child(2) a::before {
  background-color: #f9ad39;
}
#special .categoryBtn li:nth-child(3) a::before {
  background-color: #43c1f2;
}
#special .categoryBtn li:nth-child(4) a::before {
  background-color: #f06942;
}
#special .categoryBtn li:nth-child(5) a::before {
  background-color: #ef6fb0;
}
#special .category_ttl {
  width: 200px;
  margin: 60px auto 0 auto;
  text-align: center;
  font-size: 24px;
  font-size: 1.5rem;
  line-height: 1.5;
  font-weight: bold;
}
#special .category_ttl span {
  display: block;
  margin-top: 10px;
  padding-top: 20px;
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 1.7;
  font-weight: normal;
  background: url("../special/img/ttl_line.png") 0 0 no-repeat;
}
#special.loginpage .contentsbox {
  margin-top: 40px;
  padding: 35px;
  background: #FFF;
}
#special.loginpage .box1 {
  margin-bottom: 60px;
  overflow: hidden;
}
#special.loginpage .box1 .txtArea {
  float: left;
  width: 480px;
}
#special.loginpage .box1 .btnArea {
  float: left;
  width: 290px;
}
#special.loginpage .box1 .txt {
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 1.7;
  font-weight: normal;
}
#special.loginpage .box1 .btn {
  -webkit-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
  border: 1px solid #cccccc;
  text-align: center;
}
#special.loginpage .box1 .btn a {
  height: 100%;
  padding: 0 10px;
  background: #fff;
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 1.7;
  font-weight: bold;
  font-style: italic;
  color: #e62e8b;
  text-decoration: none;
  -webkit-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}
#special.loginpage .box1 .btn a::before {
  background-color: #e62e8b;
}
#special.loginpage .box1 .btn a:hover, #special.loginpage .box1 .btn a.active {
  color: #fff;
}
#special.loginpage .box1 .btn a {
  padding: 10px 0;
  font-style: normal;
}
#special.loginpage .box2 {
  position: relative;
  overflow: hidden;
}
#special.loginpage .box2 .followArea, #special.loginpage .box2 .loginArea {
  float: left;
  width: 50%;
}
#special.loginpage .box2 .followArea .txt, #special.loginpage .box2 .loginArea .txt {
  font-size: 18px;
  font-size: 1.125rem;
  line-height: 1.5;
  font-weight: normal;
}
#special.loginpage .box2 .followArea .innerbox {
  margin-top: 30px;
  overflow: hidden;
}
#special.loginpage .box2 .followArea .logo {
  float: left;
  margin-right: 30px;
}
#special.loginpage .box2 .followArea .btn {
  float: left;
  width: 200px;
  -webkit-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
  border: 1px solid #cccccc;
  text-align: center;
}
#special.loginpage .box2 .followArea .btn a {
  height: 100%;
  padding: 0 10px;
  background: #fff;
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 1.7;
  font-weight: bold;
  font-style: italic;
  color: #e62e8b;
  text-decoration: none;
  -webkit-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}
#special.loginpage .box2 .followArea .btn a::before {
  background-color: #e62e8b;
}
#special.loginpage .box2 .followArea .btn a:hover, #special.loginpage .box2 .followArea .btn a.active {
  color: #fff;
}
#special.loginpage .box2 .followArea .btn a {
  padding: 10px 0;
  font-style: normal;
}
#special.loginpage .box2 .loginArea {
  text-align: center;
}
#special.loginpage .box2 .loginArea .btn {
  width: 180px;
  margin: 30px 0 0 102px;
  box-sizing: border-box;
  -webkit-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
  border: 1px solid #e62e8b;
  text-align: center;
}
#special.loginpage .box2 .loginArea .btn a {
  height: 100%;
  padding: 0 10px;
  background: #e62e8b;
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 1.7;
  font-weight: bold;
  font-style: italic;
  color: #fff;
  text-decoration: none;
  -webkit-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}
#special.loginpage .box2 .loginArea .btn a::before {
  background-color: #fff;
}
#special.loginpage .box2 .loginArea .btn a:hover, #special.loginpage .box2 .loginArea .btn a.active {
  color: #e62e8b;
}
#special.loginpage .box2 .loginArea .btn a {
  padding: 10px 0;
  font-style: normal;
}
#special.loginpage .box2::after {
  content: '';
  display: block;
  position: absolute;
  left: 50%;
  top: 0;
  width: 1px;
  height: 100%;
  background: #cccccc;
}
#special.loginpage .error span {
  display: inline-block;
  margin-bottom: 5px;
  padding: 3px;
  font-size: 12px;
  font-size: 0.75rem;
  line-height: 1.5;
  font-weight: normal;
  color: #FFF;
  background: #e62e8b;
}
#special.lstpage .lst {
  display: table;
}
#special.lstpage .lst .cellbox {
  display: inline-block;
  width: 264px;
  margin-top: 60px;
  margin-left: 20px;
  background: rgba(255, 255, 255, 0.8);
  border-top: 4px solid #e62e8b;
  vertical-align: top;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
#special.lstpage .lst .cellbox:first-child, #special.lstpage .lst .cellbox:nth-child(3n+1) {
  margin-left: 0;
}
#special.lstpage .lst .cellbox .image img {
  width: 224px;
  height: auto;
}
#special.lstpage .lst .cellbox:hover {
  background: rgba(255, 247, 247, 0.8);
}
#special.lstpage .lst .cellbox:hover .image img {
  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
}
#special.lstpage .lst .cellbox:hover .image::before {
  height: 100%;
}
#special.lstpage .lst .cellbox:hover .image::after {
  width: 100%;
}
#special.lstpage .lst .cellbox:hover .image span::before {
  height: 100%;
}
#special.lstpage .lst .cellbox:hover .image span::after {
  width: 100%;
}
#special.lstpage .lst .innerbox {
  position: relative;
  margin: 0 auto;
  padding: 20px;
  overflow: hidden;
}
#special.lstpage .lst .innerbox::after {
  content: '';
  display: block;
  position: absolute;
  right: -15px;
  bottom: -15px;
  width: 30px;
  height: 30px;
  background: #e62e8b;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
#special.lstpage .lst .txt {
  margin-top: 10px;
  height: 60px;
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 1.7;
  font-weight: normal;
  color: #e62e8b;
}
#special.lstpage .lst a {
  color: #e62e8b;
  text-decoration: none;
}
#special.lstpage .lst .image {
  position: relative;
  width: 224px;
  overflow: hidden;
}
#special.lstpage .lst .image img {
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
#special.lstpage .lst .image::before, #special.lstpage .lst .image::after, #special.lstpage .lst .image span::before, #special.lstpage .lst .image span::after {
  content: '';
  display: block;
  position: absolute;
  pointer-events: none;
}
#special.lstpage .lst .image span {
  display: block;
}
#special.lstpage .lst .image span::before {
  right: 0;
  bottom: 0;
  width: 2px;
  height: 0;
  z-index: 2;
  background: #00a7ea;
  background: -moz-linear-gradient(top, #00a7ea 0%, #e62e8b 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #00a7ea), color-stop(100%, #e62e8b));
  background: -webkit-linear-gradient(top, #00a7ea 0%, #e62e8b 100%);
  background: -o-linear-gradient(top, #00a7ea 0%, #e62e8b 100%);
  background: -ms-linear-gradient(top, #00a7ea 0%, #e62e8b 100%);
  background: linear-gradient(to bottom, #00a7ea 0%, #e62e8b 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$start-color', endColorstr='$end-color',GradientType=0 );
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
#special.lstpage .lst .image span::after {
  right: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: #00a7ea;
  background: -moz-linear-gradient(left, #00a7ea 0%, #e62e8b 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, #00a7ea), color-stop(100%, #e62e8b));
  background: -webkit-linear-gradient(left, #00a7ea 0%, #e62e8b 100%);
  background: -o-linear-gradient(left, #00a7ea 0%, #e62e8b 100%);
  background: -ms-linear-gradient(left, #00a7ea 0%, #e62e8b 100%);
  background: linear-gradient(to right, #00a7ea 0%, #e62e8b 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$start-color', endColorstr='$end-color',GradientType=1 );
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
#special.lstpage .lst .image::before {
  left: 0;
  top: 0;
  width: 2px;
  height: 0;
  z-index: 1;
  background: #e62e8b;
  background: -moz-linear-gradient(top, #e62e8b 0%, #00a7ea 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e62e8b), color-stop(100%, #00a7ea));
  background: -webkit-linear-gradient(top, #e62e8b 0%, #00a7ea 100%);
  background: -o-linear-gradient(top, #e62e8b 0%, #00a7ea 100%);
  background: -ms-linear-gradient(top, #e62e8b 0%, #00a7ea 100%);
  background: linear-gradient(to bottom, #e62e8b 0%, #00a7ea 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$start-color', endColorstr='$end-color',GradientType=0 );
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
#special.lstpage .lst .image::after {
  left: 0;
  top: 0;
  width: 0;
  height: 2px;
  background: #e62e8b;
  background: -moz-linear-gradient(left, #e62e8b 0%, #00a7ea 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, #e62e8b), color-stop(100%, #00a7ea));
  background: -webkit-linear-gradient(left, #e62e8b 0%, #00a7ea 100%);
  background: -o-linear-gradient(left, #e62e8b 0%, #00a7ea 100%);
  background: -ms-linear-gradient(left, #e62e8b 0%, #00a7ea 100%);
  background: linear-gradient(to right, #e62e8b 0%, #00a7ea 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$start-color', endColorstr='$end-color',GradientType=1 );
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
#special.lstpage .btnMore {
  width: 180px;
  margin: 60px auto;
  -webkit-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
  border: 1px solid #e62e8b;
  text-align: center;
}
#special.lstpage .btnMore a {
  height: 100%;
  padding: 0 10px;
  background: #fff;
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 1.7;
  font-weight: bold;
  font-style: italic;
  color: #e62e8b;
  text-decoration: none;
  -webkit-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}
#special.lstpage .btnMore a::before {
  background-color: #e62e8b;
}
#special.lstpage .btnMore a:hover, #special.lstpage .btnMore a.active {
  color: #fff;
}
#special.lstpage .btnMore a {
  padding: 10px 0;
  font-style: normal;
}
#special.detailpage .detailBox {
  position: relative;
  margin-top: 60px;
  padding: 20px 20px;
  background: rgba(255, 255, 255, 0.8);
}
#special.detailpage .detailBox .txt {
  margin-top: 30px;
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 1.7;
  font-weight: normal;
  color: #000;
}
#special.detailpage .detailBox .txt a {
  color: #00a7e9;
  text-decoration: none;
}
#special.detailpage .detailBox .txt a:hover {
  text-decoration: underline;
}
#special.detailpage .detailBox .image {
  margin-top: 30px;
}
#special.detailpage .detail_ttl {
  font-size: 20px;
  font-size: 1.25rem;
  line-height: 1.5;
  font-weight: bold;
  color: #e62e8b;
}
#special.detailpage .btnBack {
  width: 180px;
  margin: 60px auto;
  -webkit-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
  border: 1px solid #e62e8b;
  text-align: center;
}
#special.detailpage .btnBack a {
  height: 100%;
  padding: 0 10px;
  background: #fff;
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 1.7;
  font-weight: bold;
  font-style: italic;
  color: #e62e8b;
  text-decoration: none;
  -webkit-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}
#special.detailpage .btnBack a::before {
  background-color: #e62e8b;
}
#special.detailpage .btnBack a:hover, #special.detailpage .btnBack a.active {
  color: #fff;
}
#special.detailpage .btnBack a {
  padding: 10px 0;
  font-style: normal;
}
#special.shortstory .ss_ttl {
  display: inline-block;
  padding: 5px 20px;
  font-size: 20px;
  font-size: 1.25rem;
  line-height: 1.5;
  font-weight: normal;
  background: #e62e8b;
  border-radius: 20px;
  color: #FFF;
}
#special.shortstory .ssMain {
  width: 454px;
  margin: 40px auto 0 auto;
}
#special.shortstory .ssbox {
  position: relative;
  margin-top: 10px;
  overflow: hidden;
}
#special.shortstory .ssbox .imgbox {
  width: 160px;
}
#special.shortstory .ssbox .imgbox .charaImage:not(:first-child) {
  margin-top: 10px;
}
#special.shortstory .ssbox .imgbox .charaImage img {
  width: 100%;
  height: auto;
}
#special.shortstory .ssbox .imgbox .audioWrapper {
  width: 140px;
  margin: 10px auto;
}
#special.shortstory .ssbox .imgbox .btn {
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
#special.shortstory .ssbox .imgbox .btn a {
  display: block;
  text-decoration: none;
  text-align: center;
}
#special.shortstory .ssbox .imgbox .btn span {
  display: inline-block;
  min-height: 20px;
  padding: 3px 0 3px 20px;
  box-sizing: border-box;
  background: url("../special/img/shortstory/btn_voice_icon.png") 0 50% no-repeat;
}
#special.shortstory .ssbox .baboxWrapper {
  width: 294px;
}
#special.shortstory .ssbox .baboxWrapper::after {
  content: '';
  display: block;
  position: absolute;
  width: 34px;
  height: 24px;
  top: 40px;
}
#special.shortstory .ssbox .babox {
  width: 260px;
  padding: 15px;
  box-sizing: border-box;
  border-radius: 20px;
}
#special.shortstory .ssbox .babox dt {
  font-size: 20px;
  font-size: 1.25rem;
  line-height: 1.7;
  font-weight: normal;
}
#special.shortstory .ssbox .babox dd {
  font-size: 16px;
  font-size: 1rem;
  line-height: 1.7;
  font-weight: normal;
}
#special.shortstory .ssbox:nth-child(even) .imgbox {
  float: left;
}
#special.shortstory .ssbox:nth-child(even) .baboxWrapper {
  float: right;
}
#special.shortstory .ssbox:nth-child(even) .baboxWrapper::after {
  left: 162px;
}
#special.shortstory .ssbox:nth-child(even) .babox {
  margin-left: 34px;
}
#special.shortstory .ssbox:nth-child(even).mana .baboxWrapper::after {
  background: url("../special/img/shortstory/mana_tsuno_l.png");
}
#special.shortstory .ssbox:nth-child(even).sayu .baboxWrapper::after {
  background: url("../special/img/shortstory/sayu_tsuno_l.png");
}
#special.shortstory .ssbox:nth-child(even).mizuha .baboxWrapper::after {
  background: url("../special/img/shortstory/mizuha_tsuno_l.png");
}
#special.shortstory .ssbox:nth-child(even).kae .baboxWrapper::after {
  background: url("../special/img/shortstory/kae_tsuno_l.png");
}
#special.shortstory .ssbox:nth-child(even).kasumi .baboxWrapper::after {
  background: url("../special/img/shortstory/kasumi_tsuno_l.png");
}
#special.shortstory .ssbox:nth-child(even).mii .baboxWrapper::after {
  background: url("../special/img/shortstory/mii_tsuno_l.png");
}
#special.shortstory .ssbox:nth-child(even).mix .baboxWrapper::after {
  background: url("../special/img/shortstory/mix_tsuno_l.png");
}
#special.shortstory .ssbox:nth-child(odd) .imgbox {
  float: right;
}
#special.shortstory .ssbox:nth-child(odd) .baboxWrapper {
  float: left;
}
#special.shortstory .ssbox:nth-child(odd) .baboxWrapper::after {
  right: 162px;
}
#special.shortstory .ssbox:nth-child(odd).mana .baboxWrapper::after {
  background: url("../special/img/shortstory/mana_tsuno_r.png");
}
#special.shortstory .ssbox:nth-child(odd).sayu .baboxWrapper::after {
  background: url("../special/img/shortstory/sayu_tsuno_r.png");
}
#special.shortstory .ssbox:nth-child(odd).mizuha .baboxWrapper::after {
  background: url("../special/img/shortstory/mizuha_tsuno_r.png");
}
#special.shortstory .ssbox:nth-child(odd).kae .baboxWrapper::after {
  background: url("../special/img/shortstory/kae_tsuno_r.png");
}
#special.shortstory .ssbox:nth-child(odd).kasumi .baboxWrapper::after {
  background: url("../special/img/shortstory/kasumi_tsuno_r.png");
}
#special.shortstory .ssbox:nth-child(odd).mii .baboxWrapper::after {
  background: url("../special/img/shortstory/mii_tsuno_r.png");
}
#special.shortstory .ssbox:nth-child(odd).mix .baboxWrapper::after {
  background: url("../special/img/shortstory/mix_tsuno_r.png");
}
#special.shortstory .ssbox.mana .btn {
  border: 1px solid #f9ad39;
}
#special.shortstory .ssbox.mana .btn a {
  height: 100%;
  padding: 0 10px;
  background: #f9ad39;
  font-size: 18px;
  font-size: 1.125rem;
  line-height: 1.7;
  font-weight: bold;
  font-style: italic;
  color: #fff;
  text-decoration: none;
  -webkit-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}
#special.shortstory .ssbox.mana .btn a::before {
  background-color: #fff;
}
#special.shortstory .ssbox.mana .btn a:hover, #special.shortstory .ssbox.mana .btn a.active {
  color: #f9ad39;
}
#special.shortstory .ssbox.mana .btn a:hover span, #special.shortstory .ssbox.mana .btn a.active span {
  background: url("../special/img/shortstory/btn_voice_icon_maina.png") 0 50% no-repeat;
}
#special.shortstory .ssbox.mana .babox {
  border: 2px solid #fdd35d;
}
#special.shortstory .ssbox.mana .babox dt {
  color: #f9ad39;
}
#special.shortstory .ssbox.sayu .btn {
  border: 1px solid #14b2ef;
}
#special.shortstory .ssbox.sayu .btn a {
  height: 100%;
  padding: 0 10px;
  background: #14b2ef;
  font-size: 18px;
  font-size: 1.125rem;
  line-height: 1.7;
  font-weight: bold;
  font-style: italic;
  color: #fff;
  text-decoration: none;
  -webkit-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}
#special.shortstory .ssbox.sayu .btn a::before {
  background-color: #fff;
}
#special.shortstory .ssbox.sayu .btn a:hover, #special.shortstory .ssbox.sayu .btn a.active {
  color: #14b2ef;
}
#special.shortstory .ssbox.sayu .btn a:hover span, #special.shortstory .ssbox.sayu .btn a.active span {
  background: url("../special/img/shortstory/btn_voice_icon_sayu.png") 0 50% no-repeat;
}
#special.shortstory .ssbox.sayu .babox {
  border: 2px solid #14b2ef;
}
#special.shortstory .ssbox.sayu .babox dt {
  color: #14b2ef;
}
#special.shortstory .ssbox.mizuha .btn {
  border: 1px solid #f06942;
}
#special.shortstory .ssbox.mizuha .btn a {
  height: 100%;
  padding: 0 10px;
  background: #f06942;
  font-size: 18px;
  font-size: 1.125rem;
  line-height: 1.7;
  font-weight: bold;
  font-style: italic;
  color: #fff;
  text-decoration: none;
  -webkit-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}
#special.shortstory .ssbox.mizuha .btn a::before {
  background-color: #fff;
}
#special.shortstory .ssbox.mizuha .btn a:hover, #special.shortstory .ssbox.mizuha .btn a.active {
  color: #f06942;
}
#special.shortstory .ssbox.mizuha .btn:hover span, #special.shortstory .ssbox.mizuha .btn a.active span {
  background: url("../special/img/shortstory/btn_voice_icon_mizuha.png") 0 50% no-repeat;
}
#special.shortstory .ssbox.mizuha .babox {
  border: 2px solid #f29b76;
}
#special.shortstory .ssbox.mizuha .babox dt {
  color: #f06942;
}
#special.shortstory .ssbox.kae .btn {
  border: 1px solid #eb4b9c;
}
#special.shortstory .ssbox.kae .btn a {
  height: 100%;
  padding: 0 10px;
  background: #eb4b9c;
  font-size: 18px;
  font-size: 1.125rem;
  line-height: 1.7;
  font-weight: bold;
  font-style: italic;
  color: #fff;
  text-decoration: none;
  -webkit-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}
#special.shortstory .ssbox.kae .btn a::before {
  background-color: #fff;
}
#special.shortstory .ssbox.kae .btn a:hover, #special.shortstory .ssbox.kae .btn a.active {
  color: #eb4b9c;
}
#special.shortstory .ssbox.kae .btn a:hover span, #special.shortstory .ssbox.kae .btn a.active span {
  background: url("../special/img/shortstory/btn_voice_icon_kae.png") 0 50% no-repeat;
}
#special.shortstory .ssbox.kae .babox {
  border: 2px solid #f19ec2;
}
#special.shortstory .ssbox.kae .babox dt {
  color: #eb4b9c;
}
#special.shortstory .ssbox.kasumi .btn {
  border: 1px solid #b88dc7;
}
#special.shortstory .ssbox.kasumi .btn a {
  height: 100%;
  padding: 0 10px;
  background: #b88dc7;
  font-size: 18px;
  font-size: 1.125rem;
  line-height: 1.7;
  font-weight: bold;
  font-style: italic;
  color: #fff;
  text-decoration: none;
  -webkit-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}
#special.shortstory .ssbox.kasumi .btn a::before {
  background-color: #fff;
}
#special.shortstory .ssbox.kasumi .btn a:hover, #special.shortstory .ssbox.kasumi .btn a.active {
  color: #b88dc7;
}
#special.shortstory .ssbox.kasumi .btn a:hover span, #special.shortstory .ssbox.kasumi .btn a.active span {
  background: url("../special/img/shortstory/btn_voice_icon_kasumi.png") 0 50% no-repeat;
}
#special.shortstory .ssbox.kasumi .babox {
  border: 2px solid #d1bbda;
}
#special.shortstory .ssbox.kasumi .babox dt {
  color: #b88dc7;
}
#special.shortstory .ssbox.mii .btn {
  border: 1px solid #99c915;
}
#special.shortstory .ssbox.mii .btn a {
  height: 100%;
  padding: 0 10px;
  background: #99c915;
  font-size: 18px;
  font-size: 1.125rem;
  line-height: 1.7;
  font-weight: bold;
  font-style: italic;
  color: #fff;
  text-decoration: none;
  -webkit-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}
#special.shortstory .ssbox.mii .btn a::before {
  background-color: #fff;
}
#special.shortstory .ssbox.mii .btn a:hover, #special.shortstory .ssbox.mii .btn a.active {
  color: #99c915;
}
#special.shortstory .ssbox.mii .btn a:hover span, #special.shortstory .ssbox.mii .btn a.active span {
  background: url("../special/img/shortstory/btn_voice_icon_mii.png") 0 50% no-repeat;
}
#special.shortstory .ssbox.mii .babox {
  border: 2px solid #c1db81;
}
#special.shortstory .ssbox.mii .babox dt {
  color: #99c915;
}
#special.shortstory .ssbox.mix .btn {
  border: 1px solid #e62e8b;
}
#special.shortstory .ssbox.mix .btn a {
  height: 100%;
  padding: 0 10px;
  background: #e62e8b;
  font-size: 18px;
  font-size: 1.125rem;
  line-height: 1.7;
  font-weight: bold;
  font-style: italic;
  color: #fff;
  text-decoration: none;
  -webkit-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}
#special.shortstory .ssbox.mix .btn a::before {
  background-color: #fff;
}
#special.shortstory .ssbox.mix .btn a:hover, #special.shortstory .ssbox.mix .btn a.active {
  color: #e62e8b;
}
#special.shortstory .ssbox.mix .btn a:hover span, #special.shortstory .ssbox.mix .btn a.active span {
  background: url("../special/img/shortstory/btn_voice_icon_mix.png") 0 50% no-repeat;
}
#special.shortstory .ssbox.mix .babox {
  border: 2px solid #e62e8b;
}
#special.shortstory .ssbox.mix .babox dt {
  color: #e62e8b;
}
#special.shortstory .btnPlayAll {
  width: 140px;
  margin: 10px auto 60px auto;
}
#special.shortstory .btnPlayAll .btn {
  border: 1px solid #e62e8b;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
#special.shortstory .btnPlayAll .btn a {
  height: 100%;
  padding: 0 10px;
  background: #e62e8b;
  font-size: 18px;
  font-size: 1.125rem;
  line-height: 1.7;
  font-weight: bold;
  font-style: italic;
  color: #fff;
  text-decoration: none;
  -webkit-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}
#special.shortstory .btnPlayAll .btn a::before {
  background-color: #fff;
}
#special.shortstory .btnPlayAll .btn a:hover, #special.shortstory .btnPlayAll .btn a.active {
  color: #e62e8b;
}
#special.shortstory .btnPlayAll .btn a {
  display: block;
  text-decoration: none;
  text-align: center;
}
#special.shortstory .btnPlayAll .btn a:hover span:nth-child(1) {
  background: url("../special/img/shortstory/btn_all_play_over.png") 0 50% no-repeat;
}
#special.shortstory .btnPlayAll .btn a.active span:nth-child(1) {
  display: none;
}
#special.shortstory .btnPlayAll .btn a.active span:nth-child(2) {
  display: inline-block;
}
#special.shortstory .btnPlayAll .btn span {
  display: inline-block;
  min-height: 20px;
  padding: 3px 0 3px 30px;
  box-sizing: border-box;
}
#special.shortstory .btnPlayAll .btn span:nth-child(1) {
  background: url("../special/img/shortstory/btn_all_play.png") 0 50% no-repeat;
}
#special.shortstory .btnPlayAll .btn span:nth-child(2) {
  display: none;
  background: url("../special/img/shortstory/btn_all_stop.png") 0 50% no-repeat;
}
#special.shortstory .controller {
  margin-top: 60px;
  text-align: center;
}
#special.shortstory .controller li {
  display: inline-block;
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 1.7;
  font-weight: normal;
  font-style: italic;
}
#special.shortstory .controller li:not(:first-child) {
  margin-left: 10px;
}
#special.shortstory .controller li a {
  display: block;
  padding: 2px 15px;
  color: #FFF;
  text-decoration: none;
  background: #aaaaaa;
}
#special.shortstory .controller li a::before {
  display: block;
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  -webkit-transition: all 0.4s ease-out;
  transition: all 0.4s ease-out;
  background-color: #e62e8b;
}
#special.interview .interviewWrapper {
  width: 760px;
  margin: 0 auto;
}
#special.interview .midashi {
  display: inline-block;
  margin-top: 40px;
  padding: 0 5px;
  color: #FFF;
  font-size: 16px;
  font-size: 1rem;
  line-height: 1.5;
  font-weight: normal;
}
#special.interview .shutten {
  margin-top: 30px;
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 1.7;
  font-weight: normal;
  text-align: right;
}
#special.interview .question, #special.interview .question2 {
  font-size: 16px;
  font-size: 1rem;
  line-height: 1.5;
  font-weight: bold;
  color: #e62e8b;
}
#special.interview .question2 {
  margin-top: 20px;
}
#special.interview .answer {
  margin-top: 15px;
  overflow: hidden;
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 1.7;
  font-weight: normal;
}
#special.interview .answer dt {
  width: 60px;
  float: left;
}
#special.interview .answer dd {
  float: left;
}
#special.interview .singleImage {
  margin-top: 40px;
  text-align: center;
}
#special.interview .singlebox {
  margin-top: 40px;
}
#special.interview .singlebox .answer dd {
  width: 700px;
}
#special.interview .imgLbox, #special.interview .imgRbox {
  margin-top: 40px;
  overflow: hidden;
}
#special.interview .imgLbox .answerArea, #special.interview .imgRbox .answerArea {
  width: 480px;
}
#special.interview .imgLbox .imageArea, #special.interview .imgRbox .imageArea {
  width: 280px;
}
#special.interview .imgLbox .imageArea img, #special.interview .imgRbox .imageArea img {
  width: 240px;
}
#special.interview .imgLbox .answer dd, #special.interview .imgRbox .answer dd {
  width: 420px;
}
#special.interview .imgLbox .answerArea {
  float: right;
}
#special.interview .imgLbox .imageArea {
  float: left;
}
#special.interview .imgRbox .answerArea {
  float: left;
}
#special.interview .imgRbox .imageArea {
  float: right;
  text-align: right;
}
#special.interview .mana .midashi {
  background: #f9ad39;
}
#special.interview .mana .answer dt {
  color: #f9ad39;
}
#special.interview .sayu .midashi {
  background: #14b2ef;
}
#special.interview .sayu .answer dt {
  color: #14b2ef;
}
#special.interview .mizuha .midashi {
  background: #f06942;
}
#special.interview .mizuha .answer dt {
  color: #f06942;
}
#special.interview .kae .midashi {
  background: #eb4b9c;
}
#special.interview .kae .answer dt {
  color: #eb4b9c;
}
#special.interview .kasumi .midashi {
  background: #b88dc7;
}
#special.interview .kasumi .answer dt {
  color: #b88dc7;
}
#special.interview .mii .midashi {
  background: #99c915;
}
#special.interview .mii .answer dt {
  color: #99c915;
}

#main .musicDetail li {
	padding-top: 10px;
}