@charset 'UTF-8';
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;
list-style: none;
}
h1, h2, h3, h4, h5, h6{
font-weight: normal;
}
article, aside, details, figcaption, figure, footer, header, main, menu, nav, section {
display:block;
}
nav 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;
text-decoration: none;
}
ins {
background-color:#ff9;
color:#000;
text-decoration:none;
}
mark {
background-color: #ff9;
color: #000;
font-style: normal;
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;
}
img{
max-width: 100%;
}
sup{
vertical-align: top;
font-size: 1.2em;
font-weight: normal;
}
:root {
}
/*-------------------------------------------------------------------
SLICK.js
-------------------------------------------------------------------*/
.slick-slider
{
position: relative;
display: block;
box-sizing: border-box;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-khtml-user-select: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}
.slick-list
{
position: relative;
display: block;
overflow: hidden;
margin: 0;
padding: 0;
}
.slick-list:focus
{
outline: none;
}
.slick-list.dragging
{
cursor: pointer;
cursor: hand;
}
.slick-slider .slick-track, .slick-slider .slick-list
{
-webkit-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.slick-track
{
position: relative;
top: 0;
left: 0;
display: block;
}
.slick-track:before, .slick-track:after
{
display: table;
content: '';
}
.slick-track:after
{
clear: both;
}
.slick-loading .slick-track
{
visibility: hidden;
}
.slick-slide
{
display: none;
float: left;
height: 100%;
min-height: 1px;
}
[dir='rtl'] .slick-slide
{
float: right;
}
.slick-slide img
{
display: block;
}
.slick-slide.slick-loading img
{
display: none;
}
.slick-slide.dragging img
{
pointer-events: none;
}
.slick-initialized .slick-slide
{
display: block;
}
.slick-loading .slick-slide
{
visibility: hidden;
}
.slick-vertical .slick-slide
{
display: block;
height: auto;
border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
display: none;
}
/*-------------------------------------------------------------------
COLORBOX.js
-------------------------------------------------------------------*/
#colorbox, #cboxOverlay, #cboxWrapper{
overflow: hidden;
position: absolute;
top: 0;
left: 0;
z-index: 9999;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
#colorbox{
overflow: visible;
}
#cboxWrapper {
max-width: none;
}
#cboxOverlay{
position: fixed;
width: 100%;
height: 100%;
}
#cboxMiddleLeft, #cboxBottomLeft{
clear: left;
}
#cboxContent{
position: relative;
}
#cboxLoadedContent{
overflow: auto;
-webkit-overflow-scrolling: touch;
}
#cboxTitle{
margin: 0;
}
#cboxLoadingOverlay, #cboxLoadingGraphic{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{
cursor: pointer;
}
.cboxPhoto{
float: left;
margin: auto;
border: 0;
display: block;
max-width: none;
-ms-interpolation-mode: bicubic;
}
.cboxIframe{
width: 100%;
height: 100%;
display: block;
border: 0;
padding: 0;
margin: 0;
}
#colorbox, #cboxContent, #cboxLoadedContent{
box-sizing: content-box;
}
#cboxOverlay{
background: #000;
opacity: 0.8;
filter: alpha(opacity = 80);
}
#colorbox{
outline: 0;
}
#cboxContent{
overflow: visible;
margin: 0;
padding: 20px 20px 50px;
background: rgba(0,0,0, .7);
}
.cboxIframe{
background: #fff;
}
#cboxError{
padding: 50px;
border: 1px solid #ccc;
}
#cboxLoadedContent{
background: #CCC;
padding: 1px;
}
#cboxLoadingOverlay{
background: #000;
}
#cboxTitle{
position: absolute;
bottom: -30px;
left: 0;
width: 100%;
color: #000;
text-align: center;
}
#cboxCurrent{
position: absolute;
top: -22px;
right: 205px;
text-indent: -9999px;
}
#cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {
outline: 0;
}
#cboxPrevious, #cboxNext{
overflow: visible;
position: absolute;
top: 50%;
padding: 0;
margin: -27px 0 0;
width: 46px;
height: 58px;
background: none;
border: 2px solid #D10110;
text-indent: -9999px;
}
#cboxClose {
position: absolute;
bottom: 10px;
right: 20px;
padding: 0;
margin: 0;
width: 30px;
height: 30px;
background: #555;
border: 1px solid #FFF;
text-indent: -9999px;
}
#cboxClose:after, #cboxClose:before{
content:"";
position: absolute;
top: 50%;
left: 50%;
margin: -1px 0 0 -12px;
width: 24px;
height: 2px;
background: #FFF;
}
#cboxClose:after{
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
#cboxClose:before{
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#cboxPrevious{
left: -55px;
}
#cboxNext{
right: -55px;
background-position: -46px 0;
}
/*===================================================================
------------------
Table Of Contents
------------------
01) general
02) grid
===================================================================*/
/*-------------------------------------------------------------------
01) general
-------------------------------------------------------------------*/
.pc-none{
display: none !important;
}
.cf:before, .cf:after {
content:"";
display:table;
}
.cf:after {
clear:both;
}
.cf {
zoom:1;
}
.txtc{ text-align: center; }
.txtl{ text-align: left; }
.txtr{ text-align: right; }
.fs14{ font-size: 14px; font-size: 1.4rem; }
.fs16{ font-size: 16px; font-size: 1.6rem; }
.fs18{ font-size: 18px; font-size: 1.8rem; }
.fs20{ font-size: 20px; font-size: 2.0rem; }
.mb10{ margin-bottom: 10px!important;}
.mb20{ margin-bottom: 20px!important;}
.mb30{ margin-bottom: 30px!important;}
.yt-wrap{
position: relative;
width: 100%;
height: 0;
padding-top: 56.5%;
}
.yt-wrap iframe{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/*-------------------------------------------------------------------
02) grid
-------------------------------------------------------------------*/
.grid {
*zoom:1;
}
.grid > *{
float: left;
box-sizing: border-box;
}
.grid:after, .grid:before {
content: "";
display: table;
clear: both;
}
.grid .grid__col-01 { width: 4.16666666667%; }
.grid .grid__col-02 { width: 8.33333333333%; }
.grid .grid__col-03 { width:12.5%; }
.grid .grid__col-04 { width: 16.6666666667%; }
.grid .grid__col-048 { width: 20%; }
.grid .grid__col-05 { width: 20.8333333333%; }
.grid .grid__col-06 { width: 25%; }
.grid .grid__col-07 { width: 29.1666666667%; }
.grid .grid__col-08 { width: 33.3333333333%; }
.grid .grid__col-09 { width: 37.5%; }
.grid .grid__col-10 { width: 41.6666666667%; }
.grid .grid__col-11 { width: 45.8333333333%; }
.grid .grid__col-12 { width: 50%; }
.grid .grid__col-13 { width: 54.1666666667%; }
.grid .grid__col-14 { width: 58.3333333333%; }
.grid .grid__col-15 { width: 62.5%; }
.grid .grid__col-16 { width: 66.6666666667%; }
.grid .grid__col-17 { width: 70.8333333333%; }
.grid .grid__col-18 { width: 75%; }
.grid .grid__col-19 { width: 79.1666666667%; }
.grid .grid__col-20 { width: 83.3333333333%; }
.grid .grid__col-21 { width: 87.5%; }
.grid .grid__col-22 { width: 91.6666666667%; }
.grid .grid__col-23 { width: 95.8333333333%; }
.grid .grid__col-24 { width: 100%; }
.grid--gutter{
margin-left: -10px;
margin-right: -10px;
}
.grid--gutter > *{
padding-left: 10px;
padding-right: 10px;
margin-bottom: 20px;
}
/*-------------------------------------------------------------------
03) btn
-------------------------------------------------------------------*/
.btn-01 {
display: block;
width: 242px;
height: 45px;
margin: 0 auto;
}
.btn-01 a{
overflow: hidden;
text-indent: 120%;
white-space: nowrap;
display: block;
width: 242px;
height: 45px;
background: url(../img/top/btn_more_pc.png) 0 0 no-repeat;
}
.btn-01.btn-01--detail a{
background-image: url(../img/game/btn_detail_pc.png);
}
.btn-01.btn-01--app{
width: 450px;
height: 73px;
}
.btn-01.btn-01--app a{
width: 450px;
height: 73px;
background-image: url(../img/game/btn_app_pc.png);
}
.hv{
-webkit-transition: opacity .3s ease;
transition: opacity .3s ease;
}
.hv:hover{
opacity: .6;
}
/*//////////////////////////////////////////////////////////////////
* BREAK 768px
//////////////////////////////////////////////////////////////////*/
.has-dialog {
overflow: hidden;
}
.c-dialog {
position: fixed;
z-index: 9999;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
-webkit-transition: opacity .5s;
transition: opacity .5s;
}
.c-dialog.-closing {
display: none;
}
.c-dialog[aria-hidden = 'false'] {
opacity: 1;
}
.c-dialog__wrap {
-webkit-overflow-scrolling: touch;
overflow-y: auto;
overflow-x: hidden;
position: absolute;
z-index: 2;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('../img/bg_dialog.png');
}
.c-dialog__cnt {
position: absolute;
z-index: 2;
right: 50%;
bottom: 50%;
-webkit-transform: translate(50%, 50%);
-ms-transform: translate(50%, 50%);
transform: translate(50%, 50%);
width: calc(100% - 4rem);
max-width: 960px;
max-height: 100%;
}
.c-dialog__cnt.img {
width: 100%;
max-width: 1400px;
}
.c-dialog__main {
position: relative;
padding: 70px 0 20px;
padding: 7rem 0 2rem;
-webkit-transition: -webkit-transform .5s ease;
transition: -webkit-transform .5s ease;
transition: transform .5s ease;
transition: transform .5s ease, -webkit-transform .5s ease;
width: 100%;
}
[aria-hidden = 'true'] .c-dialog__main {
-webkit-transform: translateY(100px);
-ms-transform: translateY(100px);
transform: translateY(100px);
}
[aria-hidden = 'false'] .c-dialog__main {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
.c-dialog__inr {
overflow: hidden;
position: relative;
/* background: #202020; */
}
.c-dialog__close-bottom {
padding: 0 0 60px;
padding: 0 0 6rem;
text-align: center;
}
.c-dialog__close {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
position: absolute;
z-index: 10;
top: 20px;
top: 2rem;
right: 20px;
right: 2rem;
width: 40px;
width: 4rem;
height: 40px;
height: 4rem;
border: 0;
background: url('data:image/svg+xml;utf8,') no-repeat 0 0 / 100%;
}
.c-dialog iframe {
display: block;
border: none;
width: 100%;
}
/*===================================================================
------------------
Table Of Contents
------------------
01) base
02) header
03) footer
04) mainContents
===================================================================*/
/*-------------------------------------------------------------------
01) base
-------------------------------------------------------------------*/
@font-face {
font-family: 'migmix';
font-style: normal;
font-weight: 400;
src: url('../fonts/migmix-1p-regular.woff2') format('woff2');
}
@font-face {
font-family: 'migmix';
font-style: normal;
font-weight: 700;
src: url('../fonts/migmix-1p-bold.woff2') format('woff2');
}
html{
font-size: 62.5%;
}
body{
font-family: Helvetica , "Helvetica Neue", Arial, Verdana, "Open Sans", "Meiryo UI", "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
font-size: 16px;
font-size: 1.6rem;
line-height: 1.8;
color: #000;
background: #FFF;
letter-spacing: 1px;
}
a{
color: #009de7;
}
#wrapper{
overflow: hidden;
position: relative;
min-width: 960px;
}
.wrapper-top .header{
padding-bottom: 33.33333%;
}
.wrapper-top .header h1{
overflow: hidden;
text-indent: 120%;
white-space: nowrap;
}
.wrapper-top .header .header__bg{
overflow: hidden;
text-indent: 120%;
white-space: nowrap;
background: url(../img/top/bg_main01_pc.jpg) center 0 no-repeat;
background-size: 100%;
}
.wrapper-top .header .header__bg.bg-01{
background-image: url(../img/top/bg_main01_pc.jpg);
}
.wrapper-top .header .header__bg.bg-02{
background-image: url(../img/top/bg_main02_pc.jpg);
}
.wrapper-top .header .header__bg.bg-aplilfool{
background-image: url(../img/top/bg_main_aprilfool_pc.jpg);
}
#loading{
display: block;
position: fixed;
z-index: 100;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #FFF;
}
.migmix {
font-family: migmix, sans-serif;
}
/*-------------------------------------------------------------------
02) header
-------------------------------------------------------------------*/
.header{
position: relative;
width: 100%;
height: 0;
padding-top: 50px;
padding-bottom: 25%;
}
.header .header__inr{
position: absolute;
width: 960px;
top: 65%;
left: 50%;
margin-left: -480px;
text-align: center;
}
.header .header__ttl{
position: relative;
z-index: 2;
line-height: 1.2em;
color: #FFF;
font-size: 50px;
font-size: 5rem;
font-weight: bold;
text-shadow: 0 0 8px #000;
}
.header .header__ttl.hidden{
overflow: hidden;
text-indent: 120%;
white-space: nowrap;
}
.header .header__subttl{
position: relative;
z-index: 2;
line-height: 1.2em;
color: #FFF;
font-size: 18px;
font-size: 1.8rem;
font-weight: bold;
text-shadow: 0 0 10px #000;
}
.header .header__bg{
position: absolute;
top: 50px;
left: 0;
width: 100%;
}
.header .header__bg img{
width: 100%;
height: auto;
}
.header.header--h_215{
padding-bottom: 22.39583%;
margin-bottom: -20px;
}
.header.header--chracter{
padding-bottom: 22.39583%;
margin-bottom: -20px;
}
.header.header--chracter .header__inr{
position: absolute;
z-index: 10;
top: 50%;
left: 50%;
width: 800px;
height: 214px;
margin: -81px 0 0 -400px;
}
.nav-bar{
position: fixed;
z-index: 100;
top: 0;
left: 0;
width: 100%;
background: #00edff;
background: -webkit-linear-gradient(top, #00edff 0%,#0082ff 100%);
background: linear-gradient(to bottom, #00edff 0%,#0082ff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00edff', endColorstr='#0082ff',GradientType=0 );
box-shadow: 0 2px 0 rgba(0,0,0, .3);
}
.nav-bar:before{
position: absolute;
content:"";
z-index: 0;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(../img/bg_nav.png) 0 0 repeat-x;
background-size: 5px 50px;
}
.nav{
overflow: hidden;
position: relative;
width: 900px;
padding: 0 30px;
margin: 0 auto;
}
.nav .nav__list{
position: relative;
}
.nav .nav__list li {
position: relative;
float: left;
margin-right: 20px;
}
.nav .nav__list a{
display: block;
position: relative;
padding: 0 10px;
line-height: 50px;
font-size: 18px;
font-size: 1.8rem;
font-weight: bold;
color: #FFF;
text-shadow: 2px 2px 1px #000;
}
.nav .nav__list a span{
position: relative;
z-index: 2;
}
.nav .nav__list a:before{
content: "";
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height:100%;
width: 100%;
background: url(../img/bg_current.png) center bottom no-repeat;
-webkit-transition: opacity .3s ease;
transition: opacity .3s ease;
opacity: 0;
}
.nav .nav__list a:hover:before{
opacity: 1;
}
.nav .nav__list li.current a:before{
opacity: 1;
}
.nav .nav__list li.top{
margin-right: 26.04167%;
}
.nav .nav__list li.top a{
overflow: hidden;
text-indent: 120%;
white-space: nowrap;
width: 40px;
height: 50px;
padding: 0;
background: url(../img/ico_top.png) center center no-repeat;
}
.nav .nav__list li.top a:before{
content: none;
}
.nav .nav__sns{
position: absolute;
top: 10px;
right: 30px;
}
.sns{
overflow: hidden;
}
.sns li {
position: relative;
float: left;
width: 30px;
height: 30px;
margin-left: 10px;
}
.sns li a{
display: block;
overflow: hidden;
text-indent: 120%;
white-space: nowrap;
width: 30px;
height: 30px;
background-color: #0082ff;
border-radius: 15px;
}
.menu{
display: none;
}
/*-------------------------------------------------------------------
03) footer
-------------------------------------------------------------------*/
.footer{
position: relative;
z-index: 20;
}
.footer .footer__sns{
display: none;
}
.copyright{
position: relative;
z-index: 2;
text-align: center;
color: #FFF;
background: #00b1ff;
}
.copyright .copyright__name{
display: block;
padding: 10px 20px;
font-size: 12px;
font-size: 1.2rem;
}
.copyright .copyright__txt{
display: block;
padding: 20px 20px 10px;
background: rgba(0,0,0, .5);
font-size: 12px;
font-size: 1.2rem;
}
.loading{
display: block;
position: fixed;
z-index: 999;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #FFF;
}
.pagetop {
position: absolute;
z-index: 10;
top: -110px;
right: 20px;
width: 80px;
height: 80px;
-webkit-transition: -webkit-transform .4s;
transition: -webkit-transform .4s;
transition: transform .4s;
transition: transform .4s, -webkit-transform .4s;
}
.pagetop a {
display: block;
overflow: hidden;
text-indent: 120%;
white-space: nowrap;
width: inherit;
height: inherit;
background: url(../img/ar_pagetop.png) center 10px #7fc8ff no-repeat;
background-size: 100%;
border-radius: 40px;
}
.pagetop[data-sticky="true"] {
position: fixed;
top: auto;
bottom: 30px;
}
.pagetop[data-hide="true"] {
-webkit-transform: translateY(200px);
-ms-transform: translateY(200px);
transform: translateY(200px);
}
.bg01{
display: block;
position: absolute;
z-index: 0;
top: 200px;
left: 50%;
width: 700px;
height: 700px;
margin-left: -700px;
background: url(../img/bg_main01.png) 0 0 no-repeat;
/**animation: bgrotate 400s infinite;**/
}
.bg02{
display: block;
position: absolute;
z-index: 0;
bottom: -120px;
right: 50%;
width: 360px;
height: 360px;
margin-right: -600px;
background: url(../img/bg_main02.png) 0 0 no-repeat;
}
@-webkit-keyframes bgrotate{
0% {
-webkit-transform: rotate(0) scale(1);
transform: rotate(0) scale(1);
}
50% {
-webkit-transform: rotate(180deg) scale(1.4);
transform: rotate(180deg) scale(1.4);
}
100% {
-webkit-transform: rotate(360deg) scale(1);
transform: rotate(360deg) scale(1);
}
}
@keyframes bgrotate{
0% {
-webkit-transform: rotate(0) scale(1);
transform: rotate(0) scale(1);
}
50% {
-webkit-transform: rotate(180deg) scale(1.4);
transform: rotate(180deg) scale(1.4);
}
100% {
-webkit-transform: rotate(360deg) scale(1);
transform: rotate(360deg) scale(1);
}
}
/*-------------------------------------------------------------------
04) mainContents
-------------------------------------------------------------------*/
#main{
position: relative;
z-index: 20;
display: block;
}
#mainContents{
display: block;
position: relative;
z-index: 2;
width: 900px;
padding: 20px 30px 100px;
margin: 0 auto;
}
.wrapper-v2 {
min-width: 0 !important;
background: url(../img/bg_v2.jpg) center 0 no-repeat fixed;
background-size: 100%;
}
.header-v2 {
padding: 60px 30px 16px;
}
.header-v2__inr {
position: relative;
max-width: 1030px;
margin: 0 auto;
}
.header-v2__logo {
width: 38.83495%;
height: 90px;
}
.header-v2__sns {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
position: absolute;
bottom: 0;
right: 0;
width: 200px;
text-align: center;
}
.header-v2__sns li {
margin: 0 10px;
}
.header-v2__sns a {
display: block;
width: 30px;
height: 30px;
background-color: #0092f9;
border-radius: 50%;
}
.icon-tw-official {
background: url(../img/icon_official.png) center center no-repeat;
background-size: 100%;
}
.icon-tw-anime {
background: url(../img/icon_official03.png) center center no-repeat;
background-size: 100%;
}
.icon-tw-app {
background: url(../img/icon_official02.png) center center no-repeat;
background-size: 100%;
}
.counter-box {
box-sizing: border-box;
position: absolute;
top: 0;
right: 0;
width: 200px;
height: 100%;
padding: 10px 10px;
margin-right: 230px;
background: #0092f9;
}
.counter-box__ttl {
width: 100px;
margin: 0 auto .1em;
}
.counter-box__table td {
color: #fff;
font-size: 24px;
width: 2em;
padding: 0 0;
line-height: 1;
text-align: center;
}
.counter-box__table td span {
display: block;
min-width: 1.2em;
padding-bottom: 15px;
background: center bottom no-repeat;
background-size: 36px 10px;
}
.counter-box__table td:nth-child(1) span {
background-image: url(../img/countdown/txt_days.png);
}
.counter-box__table td:nth-child(2) span {
background-image: url(../img/countdown/txt_hours.png);
}
.counter-box__table td:nth-child(3) span {
background-image: url(../img/countdown/txt_minutes.png);
}
.counter-box__table td:nth-child(4) span {
background-image: url(../img/countdown/txt_seconds.png);
}
.main-wrap {
overflow: hidden;
max-width: 1030px;
margin: 0 auto;
padding: 0 30px 100px;
}
.main-wrap .main {
float: left;
width: 100%;
}
.main-wrap .main .main-cnts {
margin-right: 230px;
}
.main-wrap .aside {
float: right;
width: 200px;
margin-left: -200px;
}
.tw-timeline {
padding: 50px 10px 10px;
background: url(../img/top/ttl_x.png) 10px 18px #0092ff no-repeat;
background-size: 146px;
}
.tw-timeline__inr {
background: #fff;
}
.tw-timeline .ttl {
text-indent: -.5em;
padding: 10px 10px 5px;
line-height: 1.4;
}
.tw-timeline .line {
display: block;
width: 100%;
padding-top: 15%;
background: url(../img/top/line_tw.png) 0 0 no-repeat;
background-size: 100%;
}
.tw-timeline .line:hover {
opacity: .8;
}
.bnr:not(:first-child) {
margin-top: 10px;
}
.bnr__item {
background: #fff;
}
.bnr__item:not(:first-child) {
margin-top: 10px;
}
.bnr__item img {
vertical-align: bottom;
}
.pickup {
padding: 50px 10px 10px;
background: url(../img/top/ttl_pickup.png) 15px 18px #0092ff no-repeat;
background-size: 176px;
}
.pickup__inr {
padding: 15px;
background: #fff;
}
.pickup__bnr-wrap {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin: 0 -5px -10px;
}
.pickup__bnr-wrap > * {
box-sizing: border-box;
-webkit-box-flex: 0;
-ms-flex: 0 0 50%;
flex: 0 0 50%;
padding: 0 5px 10px;
max-width: 50%;
}
.pickup__bnr-wrap > *.col2 {
-webkit-box-flex: 0;
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%;
}
.pickup__random > * {
display: none;
}
.loading-v2__chr{
position: absolute;
top: 5%;
left: 50%;
width: 80%;
max-width: 1100px;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
opacity: 0;
}
/*===================================================================
------------------
Table Of Contents
------------------
01) top
02) about
03) game
04) character
05) movie
===================================================================*/
/*-------------------------------------------------------------------
01) top
-------------------------------------------------------------------*/
.sect{
overflow: hidden;
position: relative;
margin-bottom: 20px;
z-index: 2;
}
.sect .sect__inr{
padding: 5px;
border: 5px solid #666;
border-radius: 5px;
}
.sect .sect__ttl{
position: relative;
padding: 3px 10px 7px;
margin: -5px 0 10px -5px;
width: 180px;
height: 30px;
background: #666;
color: #FFF;
font-size: 24px;
font-size: 2.4rem;
}
.sect .sect__ttl span{
position: relative;
z-index: 2;
}
.sect .sect__ttl img{
display: block;
}
.sect .sect__ttl:after{
content: "";
position: absolute;
z-index: 0;
top: 0;
right: -40px;
border: 40px solid transparent;
border-top: 40px solid #666;
}
.sect__inr.news-area{
position: relative;
float: left;
width: 540px;
padding: 0;
border: none;
background: none;
}
.sect__inr.news-area .news-area__ttl{
position: relative;
height: 30px;
padding: 5px 0 5px 10px;
line-height: 47px;
margin: 2px 145px 0 0;
color: #FFF;
font-size: 24px;
font-size: 2.4rem;
background: rgba(0,0,0, .5);
border-radius: 4px 0 0 0;
}
.sect__inr.news-area .news-area__ttl:after{
content: "";
position: absolute;
right: -26px;
top: 0;
border-left: 13px solid rgba(0,0,0, .5);
border-bottom: 20px solid rgba(0,0,0, .5);
border-right: 13px solid transparent;
border-top: 20px solid transparent;
}
.sect__inr.news-area .news-area__cont{
padding: 5px;
background: rgba(0,0,0, .5);
border-radius: 0 4px 4px;
}
.sect__inr.news-area .news-area__loading{
color: #FFF;
text-align: center;
}
.sect__inr.news-area .news-area__link .btn{
position: absolute;
top: 0;
right: 0;
width: 130px;
height: 40px;
}
.sect__inr.news-area .news-area__link a{
display: block;
overflow: hidden;
text-indent: 120%;
white-space: nowrap;
width: 130px;
height: 40px;
background: url(../img/top/btn_news.png) 0 0 no-repeat;
}
.sect__inr.news-area .news-area__list{
overflow: hidden;
padding: 20px;
background: rgba(0,0,0, .8);
min-height: 99px;
}
.sect__inr.news-area li{
font-size: 14px;
font-size: 1.4rem;
}
.sect__inr.news-area li time{
display: inline-block;
width: 100px;
float: left;
color: #009de7;
}
.sect__inr.news-area li a{
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-left: 100px;
color: #FFF;
}
.sect__inr.news-area li a:hover{
color: #009de7;
}
.movie-area{
position: relative;
float: right;
width: 330px;
background: rgba(0,0,0, .5);
border: none !important;
}
.movie-area .yt-wrap{
padding-top: 181px;
}
.sect.information-area{
z-index: 1;
padding-top: 60px;
margin-top: -60px;
}
.information{
padding-bottom: 45px;
}
.information .slider{
position: relative;
}
.information .slider .slider__item{
padding: 5px 10px;
box-sizing: border-box;
}
.information .slider .slider__item img{
display: block;
}
.information .slick-dots{
position: absolute;
bottom: -40px;
left: 0;
width: 100%;
padding: 2px 5px;
margin: 10px -5px 0;
text-align: center;
background: #666;
}
.information .slick-dots li{
display: inline-block;
position: relative;
width: 10px;
height: 10px;
margin: 0 5px;
padding: 0;
background: #999;
border: 3px solid #666;
border-radius: 8px;
cursor: pointer;
}
.information .slick-dots li.slick-active{
border-color: #FFF;
}
.information .slick-dots li button{
display: block;
font-size: 0;
line-height: 0;
width: 20px;
height: 20px;
padding: 5px;
cursor: pointer;
color: transparent;
border: 0;
outline: none;
background: transparent;
}
.information .slick-prev, .information .slick-next{
display: block;
position: absolute;
z-index: 2;
top: 0;
left: 0;
font-size: 0;
line-height: 0;
width: 100px;
height: 100%;
padding: 0;
cursor: pointer;
color: transparent;
border: none;
outline: none;
background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
background: linear-gradient(to right, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 );
}
.information .slick-prev:after, .information .slick-next:after{
content: "";
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(../img/ar_slider.png) center center no-repeat;
}
.information .slick-prev:hover:after, .information .slick-next:hover:after{
left: -3px;
}
.information .slick-next{
left: auto;
right: 0;
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
.tw-area.grid--gutter{
}
.timeline{
padding: 10px 10px 20px;
background: url(../img/top/bg_twarea.png) center 0 repeat;
border: 3px solid #FFF;
border-radius: 5px;
box-shadow: 0 2px 1px rgba(0,0,0, .5);
}
.timeline .timeline__hd{
overflow: hidden;
display: block;
padding: 0 0 2px 0;
margin-bottom: 10px;
}
.timeline .timeline__hd img{
display: block;
float: left;
width: 48px;
box-shadow: 1px 1px 0 rgba(0,0,0, .5);
}
.timeline .timeline__hd h3{
margin: 0 0 4px 60px;
padding: 2px 5px;
color: #555;
background: #FFF;
line-height: 18px;
font-size: 14px;
border-radius: 3px;
}
.timeline .timeline__hd span{
display: block;
margin-left: 60px;
padding: 2px 5px;
color: #FFF;
background: #282828;
line-height: 18px;
font-size: 13px;
border-radius: 3px;
color: #009de7;
}
.timeline .timeline__body{
padding: 10px;
margin-bottom: 20px;
background: #FFF;
border: 1px solid #555;
}
.timeline .timeline__body .twitter-timeline{
width: 100%;
}
.sect.about-area .sect__inr{
padding-bottom: 30px;
background: url(../img/top/bg_about.jpg) center 0 no-repeat;
background-size: cover;
}
.sect.about-area .sect__txt{
text-align: center;
color: #FFF;
}
.sect.about-area .sect__txt h3{
font-size: 27px;
font-size: 2.7rem;
}
.sect.about-area .sect__txt p{
font-size: 22px;
font-size: 2.2rem;
}
.sect.game-area .sect__inr{
height: 454px;
background: url(../img/top/bg_game.jpg) center 0 no-repeat;
}
.sect.game-area .game-area__bnr{
overflow: hidden;
box-sizing: border-box;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 83px;
padding: 5px 10px;
background: rgba(0,0,0, .5);
border-radius: 0 0 5px 5px;
}
.qr{
float: right;
width: 480px;
}
.qr li{
float: left;
height: 70px;
padding: 15px 80px 0 0;
background: url(../img/qr_appstore.png) right 0 no-repeat;
}
.qr li a{
display: block;
height: 40px;
}
.qr li a img{
height: 40px;
}
.qr li.gr__gplay{
margin-left: 20px;
background: url(../img/qr_googleplay.png) right 0 no-repeat;
}
.app{
float: left;
width: 380px;
}
.app img{
display: block;
float: left;
width: 70px;
}
.app p{
margin-top: 7px;
margin-left: 80px;
color: #FFF;
line-height: 1.4em;
font-size: 14px;
}
/*-------------------------------------------------------------------
02) about
-------------------------------------------------------------------*/
.cont.cont--about{
width: 906px;
height: 806px;
margin: 0 auto;
padding: 50px 0 0;
background: url(../img/about/bg_cont.png) 0 0 no-repeat;
color: #FFF;
text-align: center;
}
.cont.cont--about .cont__ttl{
font-size: 34px;
font-size: 3.4rem;
margin-bottom: 50px;
}
.cont.cont--about .cont__ttl span{
padding: 0 40px 30px;
border-bottom: 2px solid #FFF;
}
.cont.cont--about .cont__txt p{
margin-bottom: 20px;
}
/*-------------------------------------------------------------------
03) game
-------------------------------------------------------------------*/
.headline-game{
position: relative;
padding-right: 340px;
margin-bottom: 30px;
box-sizing: border-box;
border-style: solid;
border-width: 38px 28px 28px 28px;
-webkit-border-image: url(../img/line_hl.png) 38 28 28 28 repeat;
-o-border-image: url(../img/line_hl.png) 38 28 28 28 repeat;
border-image: url(../img/line_hl.png) 38 28 28 28 fill repeat;
color: #FFF;
}
.headline-game p{
font-size: 14px;
font-size: 1.4rem;
}
.headline-game figure{
position: absolute;
top: 15px;
right: 0;
width: 320px;
}
.headline-game .headline-game__fig{
top:5px;
width: 310px;
}
.no-borderimage .headline-game{
width: 905px;
height: 205px;
border: 0;
background: url(../img/game/bg_hl_noborder_pc.png) 0 0 no-repeat;
}
.no-borderimage .headline-game > *{
display: none;
}
.game-ttl{
width: 497px;
margin: -30px auto 10px;
}
.entry{
height: 239px;
margin-bottom: 20px;
background: url(../img/game/bg_entry.jpg) 0 0 no-repeat;
box-shadow: 0 0 4px rgba(0, 98, 255, 0.5);
}
.entry .btn-01 {
position: relative;
top: 175px;
}
.point{
margin: 0 -5px;
}
.point li{
box-sizing: border-box;
float: left;
width: 50%;
padding: 0 5px;
margin-bottom: 10px;
}
.point li div{
box-shadow: 0 0 4px rgba(0, 98, 255, 0.5);
}
.point li img{
display: block;
}
.game-bnr .game-bnr__inr{
overflow: hidden;
margin-bottom: 10px;
padding: 10px 20px 0;
background: rgba(0,0,0, .3);
border-radius: 6px;
}
.game-bnr .qr, .game-bnr .app{
clear: both;
float: none;
width: 480px;
margin: 0 auto 20px;
}
.game-bnr .app p{
white-space: nowrap;
font-size: 12px;
font-size: 1.2rem;
}
/*-------------------------------------------------------------------
04) CHARACTER
-------------------------------------------------------------------*/
.headline{
position: relative;
margin-bottom: 30px;
box-sizing: border-box;
border-style: solid;
border-width: 38px 28px 28px 28px;
-webkit-border-image: url(../img/line_hl.png) 38 28 28 28 repeat;
-o-border-image: url(../img/line_hl.png) 38 28 28 28 repeat;
border-image: url(../img/line_hl.png) 38 28 28 28 fill repeat;
color: #FFF;
}
.headline p{
font-size: 14px;
font-size: 1.4rem;
}
.no-borderimage .headline{
width: 905px;
height: 205px;
border: 0;
background: url(../img/character/bg_hl_noborder_pc.png) 0 0 no-repeat;
}
.no-borderimage .headline > *{
display: none;
}
.chr-ttl{
width: 255px;
margin: -30px auto 10px;
}
.chr-list .chr-list__item a{
display: block;
box-shadow: 0 0 4px rgba(0, 98, 255, 0.5);
}
.chr-list .chr-list__item a img{
display: block;
}
.headline02{
overflow: hidden;
position: relative;
margin-bottom: 5px;
padding: 10px;
box-sizing: border-box;
border-style: solid;
border-width: 20px;
-webkit-border-image: url(../img/line_cont.png) 20 repeat;
-o-border-image: url(../img/line_cont.png) 20 repeat;
border-image: url(../img/line_cont.png) 20 fill repeat;
color: #FFF;
}
.headline02 figure{
float: left;
width: 150px;
}
.headline02 h2{
margin-left: 160px;
font-size: 18px;
font-size: 1.8rem;
}
.headline02 p{
margin-left: 170px;
font-size: 14px;
font-size: 1.4rem;
}
.headline02 + .main-figure {
margin-top: 74px;
}
.no-borderimage .headline02{
width: 905px;
height: 205px;
border: 0;
padding: 30px;
background: url(../img/character/bg_hl02_noborder_pc.png) 0 0 no-repeat;
}
.utility {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding-right: 240px;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
height: 70px;
}
.switcher {
position: relative;
z-index: 20;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
padding-bottom: 7px;
}
.switcher > * {
cursor: pointer;
position: relative;
display: block;
width: 62px;
height: 62px;
}
.switcher > *.cr img {
opacity: 1;
}
.switcher > * img {
display: block;
opacity: .6;
}
.switcher > *:not(:first-child) {
padding-left: 62px;
}
.switcher > *:not(:first-child)::before {
opacity: 1;
content: "";
position: absolute;
top: 0;
left: 0;
width:50%;
height: 100%;
background: url(../img/character/ico_switch.png) center center no-repeat;
background-size: 100%;
}
.btn-story {
margin-left: auto;
width: 220px;
height: 40px;
border: 0;
background: url(../img/character/btn_story.png) 0 0 no-repeat;
background-size: 100%;
outline: 0;
cursor: pointer;
text-indent: 120%;
overflow: hidden;
white-space: nowrap;
}
.main-figure{
position: relative;
margin-bottom: 20px;
}
.main-figure img {
width: 100%;
display: block;
}
.main-figure__txt {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0, .9);
}
.main-figure__btn {
position: absolute;
z-index: 20;
top: -56px;
right: 0;
width: 220px;
height: 40px;
border: 0;
background: url(../img/character/btn_profile_pc.png) 0 0 no-repeat;
background-size: 100%;
outline: 0;
cursor: pointer;
}
.main-figure__btn[aria-expanded="true"] {
background-position-y: 100%;
}
.prof {
box-sizing: border-box;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-pack: distribute;
justify-content: space-around;
width: 100%;
padding: 15px;
}
.prof__item {
box-sizing: border-box;
-webkit-box-flex: 0;
-ms-flex: 0 0 33.333%;
flex: 0 0 33.333%;
max-width: 33.333%;
padding: 0 8px 16px;
color: #fff;
font-size: 12px;
font-size: 1.2rem;
}
.prof__item p {
margin-bottom: .5em;
line-height: 1.5;
}
.prof__item .name {
font-size: 14px;
font-size: 1.4rem;
text-align: center;
font-weight: bold;
}
.prof--line1 .prof__item {
-webkit-box-flex: 1;
-ms-flex: 1 0 0px;
flex: 1 0 0;
}
.prof--line2 {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.toggle-prof-btn {
position: relative;
z-index: 3;
}
.sect.connect-area .sect__inr{
background: rgba(0,0,0, .7);
}
.connect{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
width: 648px;
margin: -30px 0px 0 230px;
}
.connect li{
box-sizing: border-box;
-webkit-box-flex: 0;
-ms-flex: 0 0 216px;
flex: 0 0 216px;
max-width: 216px;
padding: 0 8px 16px;
}
.connect li a{
overflow: hidden;
text-indent: 120%;
white-space: nowrap;
display: block;
width: 200px;
height: 40px;
background: 0 0 no-repeat;
}
.connect li.connect__movie a{
background-image: url(../img/character/btn_movie.png);
}
.connect li.connect__itunes a{
background-image: url(../img/character/btn_itunes.png);
}
.connect li.connect__animelo a{
background-image: url(../img/character/btn_animelo.png);
}
.connect li.connect__tieup a{
background-image: url(../img/character/btn_tieup.png);
}
.page-nav ul{
overflow: hidden;
width: 630px;
margin: 0 auto;
}
.page-nav li{
float: left;
width: 200px;
}
.page-nav li a, .page-nav li span{
overflow: hidden;
text-indent: 120%;
white-space: nowrap;
display: block;
width: 200px;
height: 40px;
background: 0 0 no-repeat;
}
.page-nav li.page-nav__prev a{
background-image: url(../img/character/btn_prev.png);
}
.page-nav li.page-nav__back{
margin-left: 15px;
}
.page-nav li.page-nav__back a{
background-image: url(../img/character/btn_back.png);
}
.page-nav li.page-nav__next{
margin-left: 15px;
}
.page-nav li.page-nav__next a{
background-image: url(../img/character/btn_next.png);
}
/*-------------------------------------------------------------------
05) movie
-------------------------------------------------------------------*/
.info{
padding: 10px 20px;
margin-bottom: 20px;
background: rgba(0,0,0, .8);
border-radius: 5px;
}
.info p{
color: #FFF;
font-size: 18px;
font-size: 1.8rem;
}
.btn-movie {
display: block;
width: 362px;
height: 45px;
margin: 0 auto;
}
.btn-movie a{
overflow: hidden;
text-indent: 120%;
white-space: nowrap;
display: block;
width: 362px;
height: 45px;
background: url(../img/movie/btn_movie.png) 0 0 no-repeat;
}
.movie-list .movie-list__item{
padding: 20px;
background: #FFF;
border: 1px solid #00C9FF;
box-shadow: 0 0 6px rgba(0, 201, 255, 0.5);
font-size: 14px;
font-size: 1.4rem;
}
.movie-list .movie-list__ttl{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-bottom: 10px;
}
.movie-list .movie-list__fig{
margin-bottom: 5px;
}
.movie-list .movie-list__fig img{
display: block;
}
.movie-list .movie-list__fig a{
display: block;
}
.movie-list .movie-list__link{
overflow: hidden;
margin-bottom: -15px;
}
.movie-list .movie-list__link li{
float: left;
width: 50%;
}
.movie-list .movie-list__link li.col01{
margin-left: 25%;
}
.movie-list .movie-list__link li a{
position: relative;
display: block;
padding: 10px 10px 10px 60px;
color: #000;
}
.movie-list .movie-list__link li a:before{
content: "";
position: absolute;
top: 50%;
left: 20px;
width: 30px;
height: 30px;
margin-top: -15px;
background: url(../img/ico_movie.png) 0 0 no-repeat;
background-size: 30px 60px;
}
.movie-list .movie-list__link li a:hover{
color: #009de7;
}
.movie-list .movie-list__link li.nc a:before{
background-position: 0 -30px;
}
/*===================================================================
------------------
Table Of Contents
------------------
01) sp base
02) sp header
03) sp footer
04) sp mainContents
===================================================================*/
/*===================================================================
------------------
Table Of Contents
------------------
01) sp top
02) sp about
03) sp game
04) sp character
05) sp movie
===================================================================*/
.count-down {
position: fixed;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
z-index: 1000;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(../img/countdown/bg_top.png) center 0 repeat-x, url(../img/countdown/bg.png) #0091da center bottom repeat-x ;
}
.count-down__inr {
text-align: center;
-webkit-box-flex: 0;
-ms-flex: 0 0 1;
flex: 0 0 1;
width: 100%;
}
.count-down__ttl {
width: 500px;
margin: 0 auto .5em;
}
.count-down__table {
max-width: 950px;
margin: 0 auto;
}
.count-down__table td {
color: #fff;
font-size: 160px;
width: 2em;
padding: .1em 0;
line-height: 1;
}
.count-down__table td span {
display: block;
min-width: 1.2em;
padding-bottom: 40px;
background: center bottom no-repeat;
background-size: 142px 40px;
}
.count-down__table td:nth-child(1) span {
background-image: url(../img/countdown/txt_days.png);
}
.count-down__table td:nth-child(2) span {
background-image: url(../img/countdown/txt_hours.png);
}
.count-down__table td:nth-child(3) span {
background-image: url(../img/countdown/txt_minutes.png);
}
.count-down__table td:nth-child(4) span {
background-image: url(../img/countdown/txt_seconds.png);
}
.no-scroll {
overflow: hidden;
}
.cont__ttl {
margin-bottom: 20px;
text-align: center;
font-weight: bold;
font-size: 24px;
font-size: 2.4rem;
color: #FFF;
text-shadow: 0 0 4px #000, 0 0 4px #000;
}
.wrapper-manga-detail .header {
padding-bottom: 0;
}
.wrapper-manga-detail .header .header__ttl {
text-shadow: 0 0 8px #000, 0 0 8px #000;
}
.wrapper-manga-detail .header .header__subttl {
text-shadow: 0 0 8px #000, 0 0 8px #000;
}
.bg01, .bg2 {
display: none;
}
.header {
padding-bottom: 15%;
}
.visual {
text-align: center;
}
.visual--02 {
max-width: 630px;
margin: 0 auto;
}
.link {
text-align: center;
padding: 1em;
font-size: 18px;
font-size: 1.8rem;
font-weight: bold;
}
.link a {
color: #333;
text-decoration: underline;
}
.slider {
box-sizing: border-box;
max-width: 500px;
margin: 0 auto 20px;
}
.slider * {
box-sizing: border-box;
}
.slider__item {
padding: 0 10px;
}
.slider__item a {
display: block;
outline: none;
}
.slider__item a:hover {
opacity: .8;
}
.slider.flex {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.slick-arrow {
position: absolute;
top: 50%;
overflow: hidden;
display: block;
text-indent: 300%;
white-space: nowrap;
width: 40px;
height: 40px;
margin-top: -20px;
background: url(../img/ar_slider.png) 0 0 no-repeat;
background-size: 100%;
border: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: none;
cursor: pointer;
}
.slick-arrow.slick-prev {
margin-left: -40px;
}
.slick-arrow.slick-next {
left: auto;
right: 0;
margin-right: -40px;
background-position: 0 100%;
}
.slick-arrow:hover {
opacity: 0.8;
}
.thumb-grid {
box-sizing: border-box;
padding: 20px 10px 50px;
}
.thumb-grid * {
box-sizing: border-box;
}
.thumb-grid__ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin: 0 -10px -20px;
}
.thumb-grid li {
-webkit-box-flex: 0;
-ms-flex: 0 0 25%;
flex: 0 0 25%;
max-width: 25%;
padding: 0 10px 20px;
}
.thumb-grid li a {
display: block;
position: relative;
}
.thumb-grid li a:hover {
opacity: .8;
}
.thumb-grid li a.new::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(../img/manga/new_01.png) 0 0 no-repeat;
background-size: 100%;
}
.thumb-grid li a img {
display: block;
width: 100%;
}
.sns-buttons {
box-sizing: border-box;
}
.sns-buttons * {
box-sizing: border-box;
}
.sns-buttons ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.sns-buttons li {
padding: 0 10px;
}
.sns-buttons a {
overflow: hidden;
display: block;
text-indent: 120%;
white-space: nowrap;
width: 40px;
height: 40px;
background: 0 0 no-repeat;
background-size: 100%;
}
.sns-buttons a:hover {
opacity: 0.8;
}
.sns-buttons a.tw {
background-image: url(../img/ico_tw.svg);
}
.sns-buttons a.fb {
background-image: url(../img/ico_fb.svg);
}
.sns-buttons a.ln {
background-image: url(../img/ico_ln.svg);
}
.sns-buttons a.hb {
background-image: url(../img/ico_hb.svg);
}
.detail {
max-width: 600px;
margin: 0 auto;
padding-top: 50px;
}
.detail * {
box-sizing: border-box;
}
.detail__img {
position: relative;
opacity: 0;
-webkit-transition: all .3s ease;
transition: all .3s ease;
margin: 0 auto 20px;
max-width: 510px;
}
.detail__img > div {
position: relative;
height: 0;
padding-top: 153%;
}
.detail__img.show {
opacity: 1;
}
.detail__img[data-state="ready"] {
-webkit-transform: translateX(30px);
-ms-transform: translateX(30px);
transform: translateX(30px);
}
.detail__img[data-state="on"] {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
.detail__img[data-state="off"] {
-webkit-transform: translateX(-30px);
-ms-transform: translateX(-30px);
transform: translateX(-30px);
}
.detail__img .img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 1px solid #eee;
}
.detail__img .number{
position: absolute;
z-index: 3;
top: 0;
left: 0;
margin-top: -1.7em;
padding: 0em 0em 0em 8em;
background: #00b1ff;
}
.detail__img .number::after {
content: "";
position: absolute;
top: 0;
left: 100%;
width: 2em;
height: 100%;
background: inherit;
-webkit-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: skewX(-20deg);
-ms-transform: skewX(-20deg);
transform: skewX(-20deg);
}
.detail__img .number .num {
position: relative;
z-index: 2;
color: #fff;
font-size: 24px;
font-size: 2.4rem;
font-weight: bold;
}
.detail__img .number .new {
display: none;
position: absolute;
left: 0;
top: 0;
width: 80px;
height: 80px;
background: url(../img/manga/new_02.png) 0 0 no-repeat;
background-size: 100%;
}
.detail__img .number .new.show {
display: block;
}
.detail__sns {
margin-bottom: 70px;
}
.detail__nav {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin-bottom: 50px;
}
.detail__nav > * {
padding: 0 10px;
width: 180px;
}
.detail__nav a {
overflow: hidden;
display: block;
text-indent: 120%;
white-space: nowrap;
width: 160px;
height: 43px;
background: 0 0 no-repeat;
background-size: 100%;
}
.detail__nav a:hover {
opacity: 0.8;
}
.detail__nav a.next {
background-image: url(../img/manga/btn_next.png);
}
.detail__nav a.prev {
background-image: url(../img/manga/btn_prev.png);
}
.detail__nav a.back {
background-image: url(../img/manga/btn_back.png);
}
.story {
background: transparent;
color: #fff;
}
.story * {
box-sizing: border-box;
}
.story > div {
padding: 20px 20px 80px;
}
.story-bottom {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin-top: 100px;
}
.story-bottom button {
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 160px;
height: 54px;
margin: 0 12px;
background: #808080;
border: 0;
border-radius: 10px;
font-size: 26px;
font-weight: 700;
color: #fff;
}
.story-bottom button:disabled {
pointer-events: none;
color: #B1B1B1;
background: #4D4D4D;
}
.story-bottom button.close {
background: #32B3EF;
}
.story-copy {
margin-top: 30px;
text-align: center;
}
.story-copy p {
font-size: 18px;
}
.story-tab__list {
overflow-x: auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin: 0 -7px 80px;
padding-bottom: 10px;
scrollbar-width: thin;
scrollbar-color: #ccc #555;
}
.story-tab__list::-webkit-scrollbar {
height: 8px;
}
.story-tab__list::-webkit-scrollbar-track{
background-color: #555;
}
.story-tab__list::-webkit-scrollbar-thumb{
background-color: #ccc;
}
.story-tab__btn {
-webkit-box-flex: 0;
-ms-flex: 0 0 214px;
flex: 0 0 214px;
padding: 0 7px;
}
.story-tab__btn button {
cursor: pointer;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
height: 54px;
color: #fff;
border: 0;
border-radius: 1rem;
background: #808080;
font-size: 30px;
font-weight: 700;
font-family: migmix, sans-serif;
}
.story-tab__btn button[aria-selected="true"] {
background-color: #32B3EF;
}
.story-tab__member {
display: none;
}
.story-tab__cnt .cnt > *:not(:first-child) {
margin-top: 20px;
}
.story-tab .ttl {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-bottom: 40px;
font-size: 32px;
font-weight: 700;
font-family: migmix, sans-serif;
}
.story-tab .ttl em {
display: inline-block;
font-style: normal;
-webkit-box-flex: 0;
-ms-flex: 0 0 210px;
flex: 0 0 210px;
margin-right: 20px;
text-align: center;
}
.story-tab .ttl span {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
.talk {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.talk__dt {
-webkit-box-flex: 0;
-ms-flex: 0 0 210px;
flex: 0 0 210px;
}
.talk__dt > div {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin: 0 -1px -6px;
}
.talk__dt > div > div {
text-align: center;
width: 70px;
padding: 0 1px 6px;
}
.talk__dt > div > div img {
display: block;
width: 48px;
margin: 0 auto;
}
.talk__dt > div > div span {
display: block;
margin-top: 5px;
font-size: 10px;
line-height: 1.2;
letter-spacing: 0;
}
.talk__dd {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
margin-left: 20px;
padding-top: .5em;
line-height: 1.5;
}
.talk__dd p {
font-size: 24px;
font-weight: 700;
}
@media only screen and (max-width: 768px){
#cboxContent{
margin: 40px 12px 32px;
overflow: visible;
}
#cboxClose {
top: -38px;
right: 0;
padding: 0;
margin: 0;
width: 32px;
height: 32px;
background-size: 32px;
border: 1px solid #717171;
}
#cboxPrevious, #cboxNext{
margin: -14px 0 0;
width: 30px;
height: 46px;
background-position: 3px center;
background-size: 46px;
border: 1px solid #D10110;
}
#cboxPrevious{
left: -10px;
}
#cboxNext{
right: -10px;
background-position: -20px center;
}
.sp-none{
display: none !important;
}
.pc-none{
display: block !important;
}
.grid > *{
float: none;
width: 100% !important;
}
.grid--gutter{
margin-left: 0px;
margin-right: 0px;
}
.grid--gutter > *{
padding-left: 0px;
padding-right: 0px;
}
/*-------------------------------------------------------------------
03) btn
-------------------------------------------------------------------*/
.btn-01 {
position: relative;
display: block;
width: 85%;
height: 0;
padding-top: 14.375%;
}
.btn-01 a{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(../img/top/btn_more_sp.png) 0 0 no-repeat;
background-size: 100%;
}
.btn-01.btn-01--detail a{
background-image: url(../img/game/btn_detail_sp.png);
}
.btn-01.btn-01--app{
width: 84.375%;
height: 0;
padding-top: 11.40625%;
}
.btn-01.btn-01--app a{
width: 100%;
height: 100%;
background-image: url(../img/game/btn_app_sp.png);
}
.hv:hover{
opacity: 1;
}
.c-dialog__cnt {
width: calc(100% - 20px);
}
.c-dialog__main {
}
.wrapper-v2 {
background-attachment: scroll
}
.header-v2 {
padding: 7.05882% 20px 2.35294%
}
.header-v2__inr {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.header-v2__logo {
position: relative;
-webkit-box-flex: 0;
-ms-flex: 0 0 47.05882%;
flex: 0 0 47.05882%;
width: 47.05882%;
height: 0;
padding-top: 10.58824%;
}
.header-v2__logo img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.header-v2__sns {
display: none;
}
.counter-box {
position: relative;
width: 150px;
padding: 5px 8px 8px;
margin-right: 0
}
.counter-box__ttl {
width: 80px;
}
.counter-box__table td {
font-size: 16px;
}
.counter-box__table td span {
min-width: 1.2em;
padding-bottom: 10px;
background-size: 24px;
}
.main-wrap {
padding: 0 20px 60px;
margin: 0 auto
}
.main-wrap .main {
float: none;
}
.main-wrap .main .main-cnts {
margin-right: 0;
}
.main-wrap .aside {
float: none;
width: 100%;
margin-left: 0;
margin-top: 10px;
}
.tw-timeline {
padding-top: 25px;
background-position: 15px 10px;
background-size: 73px
}
.pickup {
padding-top: 25px;
background-position-y: 10px;
background-size: 78px
}
.pickup__inr {
padding: 6px;
}
.pickup__bnr-wrap {
margin: 0 -3px -6px;
}
.pickup__bnr-wrap > * {
padding: 0 3px 6px;
}
/*-------------------------------------------------------------------
01) sp base
-------------------------------------------------------------------*/
#wrapper{
min-width: 100%;
}
.wrapper-top .header{
padding-bottom: 81.25%;
}
.wrapper-top .header .header__bg.bg-01{
background-image: url(../img/top/bg_main01_sp.jpg);
}
.wrapper-top .header .header__bg.bg-02{
background-image: url(../img/top/bg_main02_sp.jpg);
}
.wrapper-top .header .header__bg.bg-aplilfool{
background-image: url(../img/top/bg_main_aprilfool_sp.jpg);
}
/*-------------------------------------------------------------------
02) sp header
-------------------------------------------------------------------*/
.header{
padding-top: 50px;
padding-bottom: 31.25%;
}
.header .header__inr{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
margin-left: 0;
text-align: center;
}
.header .header__ttl{
overflow: hidden;
text-indent: 120%;
white-space: nowrap;
}
.header .header__subttl{
overflow: hidden;
text-indent: 120%;
white-space: nowrap;
display: block;
}
.header.header--h_215{
padding-bottom: 30.46875%;
margin-bottom: -20px;
}
.header.header--chracter{
padding-bottom: 30.9375%;
margin-bottom: -20px;
}
.header.header--chracter .header__logo{
overflow: hidden;
text-indent: 120%;
white-space: nowrap;
}
.header.header--chracter .header__logo img{
position: static;
}
.nav-bar{
position: fixed;
z-index: 100;
height: 50px;
width: 100%;
min-width: 0;
}
.nav-bar:after{
content: "";
position: absolute;
top: 5px;
left: 0;
width: 160px;
height: 40px;
background: url(../img/logo.png) 0 0 no-repeat;
background-size: 100%;
}
.nav{
display: none;
overflow: hidden;
position: absolute;
width: 100%;
top: 50px;
padding: 0;
background: rgba(0, 150, 255, 0.4);
}
.nav .nav__inr{
}
.nav .nav__list{
position: relative;
left: 0;
float: none;
text-align: center;
}
.nav .nav__list li{
position: relative;
left: 0;
float: none;
margin: 0;
background: rgba(153, 153, 153, 0.8);
}
.nav .nav__list li:nth-child(even){
background: rgba(85, 85, 85, 0.8);
}
.nav .nav__list a{
padding: 0 20px;
line-height: 50px;
}
.nav .nav__list a:before{
content: none;
}
.nav .nav__list li.top{
margin-right: 0;
}
.nav .nav__list li.top a{
overflow: visible;
text-indent: 0;
white-space: normal;
width: auto;
height: 50px;
padding: 0 20px;
background: none;
}
.nav .nav__sns{
overflow: hidden;
position: static;
background: #474747;
}
.sns{
overflow: visible;
position: relative;
left: 50%;
float: left;
padding: 10px 0;
}
.sns li {
position: relative;
left: -50%;
float: left;
width: 50px;
height: 50px;
margin: 0 10px;
}
.sns li a{
width: 50px;
height: 50px;
border-radius: 25px;
}
.menu{
display: block;
position: absolute;
top: 4px;
right: 10px;
width: 47px;
height: 43px;
background: url(../img/bg_menu.png) 0 0 no-repeat;
background-size: 100%;
}
.menu a{
display: block;
width: 47px;
height: 43px;
}
.menu a span{
display: block;
position: absolute;
top: 8px;
left: 12px;
width: 22px;
height: 3px;
background: #FFF;
border-radius: 2px;
box-shadow: 1px 1px 0 rgba(0,0,0, .3);
-webkit-transition: all .3s ease;
transition: all .3s ease;
}
.menu a span:nth-child(2){
top: 14px;
}
.menu a span:nth-child(3){
top: 20px;
}
.menu a.active span:nth-child(1){
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
top: 14px;
}
.menu a.active span:nth-child(2){
left: 20px;
opacity: 0;
}
.menu a.active span:nth-child(3){
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
top: 14px;
}
/*-------------------------------------------------------------------
03) sp footer
-------------------------------------------------------------------*/
.footer .footer__sns{
display: block;
overflow: hidden;
}
.copyright .copyright__name{
padding: 10px 10px;
}
.copyright .copyright__txt{
padding: 20px 10px 10px;
text-align: left;
}
.pagetop{
top: -50px;
right: 10px;
width: 50px;
height: 50px;
}
.bg01{
top: 200px;
left: 50%;
width: 350px;
height: 350px;
margin-left: -350px;
background-size: 100% 100%;
}
.bg02{
display: block;
position: absolute;
z-index: 0;
bottom: -80px;
right: 50%;
width: 180px;
height: 180px;
margin-right: -200px;
background-size: 100% 100%;
}
/*-------------------------------------------------------------------
04) sp mainContents
-------------------------------------------------------------------*/
#mainContents{
width: auto;
padding: 20px 10px 60px;
margin: 0 auto;
}
/*-------------------------------------------------------------------
01) sp top
-------------------------------------------------------------------*/
.sect{
overflow: hidden;
position: relative;
margin-bottom: 20px;
}
.sect .sect__inr{
padding: 0 5px 20px;
background: #333;
}
.sect .sect__ttl{
overflow: hidden;
text-indent: 120%;
white-space: nowrap;
position: relative;
padding: 13.33333% 0 0 0;
margin: -5px -5px 5px;
width: auto;
height: 0;
background: #666 center center no-repeat;
background-size: 100%;
}
.sect .sect__ttl:after{
content: none;
}
.sect .sect__ttl img{
display: inline;
}
.sect__inr.news-area{
float: none;
width: auto;
padding: 0;
background: #666;
border: 5px solid #666;
border-radius: 5px;
}
.sect__inr.news-area .news-area__ttl{
overflow: hidden;
text-indent: 120%;
white-space: nowrap;
position: relative;
padding: 13.33333% 0 0 0;
margin: -5px 0 0;
width: auto;
height: 0;
background: url(../img/top/ttl_news_sp.png) center center no-repeat;
background-size: 100%;
border-radius: 0;
}
.sect__inr.news-area .news-area__ttl:after{
content: none;
}
.sect__inr.news-area .news-area__cont{
padding: 0 ;
border-radius: 0;
}
.sect__inr.news-area .news-area__link {
padding: 10px 10px 10px;
background: #000;
}
.sect__inr.news-area .news-area__link .btn{
display: block;
position: relative;
margin: 0 auto;
width: 85%;
height: 0;
padding-top: 14.375%;
}
.sect__inr.news-area .news-area__link .btn a{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(../img/top/btn_more_sp.png) 0 0 no-repeat;
background-size: 100%;
}
.sect__inr.news-area li{
margin-bottom: 8px;
}
.sect__inr.news-area li time{
display: block;
float: none;
line-height: 1em;
}
.sect__inr.news-area li a{
margin-left: 0;
}
.movie-area{
display: none;
}
.sect.information-area .sect__inr{
background: #FFF;
}
.sect.information-area .sect__ttl{
background-image: url(../img/top/ttl_info_sp.png) ;
}
.information .slick-prev, .information .slick-next{
width: 30px;
background: none;
}
.information .slick-prev:after, .information .slick-next:after{
left: -5px;
background-size: 30px 50px;
}
.tw-area.grid--gutter{
margin-left: 0;
margin-right: 0;
}
.sect.about-area .sect__inr{
padding-bottom: 20px;
}
.sect.about-area .sect__ttl{
background-image: url(../img/top/ttl_about_sp.png) ;
}
.sect.about-area .sect__txt{
padding: 20px 10px 0 ;
}
.sect.about-area .sect__txt h3{
font-size: 2rem;
margin-bottom: 20px;
}
.sect.about-area .sect__txt p{
font-size: 1.6rem;
}
.sect.game-area .sect__inr{
overflow: hidden;
height: 0;
padding: 0 0 285.46713% 0;
background: url(../img/top/bg_game_sp.jpg) center 40px #9ee3ff no-repeat;
background-size: 100%;
}
.sect.game-area .sect__ttl{
background-image: url(../img/top/ttl_game_sp.png) ;
}
.sect.game-area .game-area__bnr{
height: auto;
padding: 10px;
background: rgba(0,0,0, .5);
}
.qr{
overflow: hidden;
float: none;
width: auto;
margin: 0 -5px 5px;
}
.qr li{
float: left;
width: 55%;
height: auto;
padding: 0 5px;
background: none;
box-sizing: border-box;
}
.qr li a{
display: block;
height: auto;
}
.qr li a img{
height: auto;
}
.qr li.gr__gplay{
width: 45%;
margin-left: 0;
background: none;
}
.app{
overflow: hidden;
float: none;
width: auto;
margin-bottom: 10px;
}
.app img{
display: block;
float: left;
width: 50px;
}
.app p{
margin-top: 2px;
margin-left: 60px;
color: #FFF;
line-height: 1.2em;
font-size: 12px;
}
.movie-area-sp .sect__ttl{
background-image: url(../img/top/ttl_movie_sp.png) ;
}
/*-------------------------------------------------------------------
02) sp about
-------------------------------------------------------------------*/
.cont.cont--about{
position: relative;
width: auto;
height: auto;
margin: 0 auto;
padding: 20px 10px 0px;
background: none;
border-style: solid;
border-width: 15px;
-webkit-border-image: url(../img/line_cont_sp.png) 28 repeat;
-o-border-image: url(../img/line_cont_sp.png) 28 repeat;
border-image: url(../img/line_cont_sp.png) 28 fill repeat;
box-sizing: border-box;
}
.cont.cont--about .cont__ttl{
font-size: 2rem;
margin-bottom: 30px;
}
.cont.cont--about .cont__ttl span{
padding: 0 10px 10px;
}
.cont.cont--about .cont__txt{
position: relative;
padding-right: 50%;
text-align: left;
font-size: 1.4rem;
}
.cont.cont--about .cont__txt p{
margin-bottom: 20px;
}
.cont.cont--about .cont__txt:after{
content: "";
position: absolute;
top: 0;
right: -14px;
width: 50%;
height: 100%;
padding-bottom: 24px;
background: url(../img/about/bg_cont_sp.png) 0 0 repeat-y;
background-size: 100%;
}
.no-borderimage .cont.cont--about{
height: 0;
border: 0;
padding: 295.04132% 0 0 0;
background: url(../img/about/bg_cont_noborder_sp.png) 0 0 no-repeat;
background-size: 100%;
}
.no-borderimage .cont.cont--about > *{
display: none;
}
/*-------------------------------------------------------------------
03) sp game
-------------------------------------------------------------------*/
.headline-game{
padding-right: 0;
margin-bottom: 30px;
}
.headline-game p{
font-size: 1.4rem;
}
.headline-game figure{
position: relative;
top: 0;
right: 0;
width: 100%;
margin-top: 10px;
}
.headline-game .headline-game__fig{
top: 0;
width: 100%;
text-align: center;
}
.game-ttl{
overflow: hidden;
text-indent: 120%;
white-space: nowrap;
width: 100%;
height: 0;
padding-top: 15%;
margin: -30px auto 10px;
background: url(../img/game/ttl_01_sp.png) 0 0 no-repeat;
background-size: 100%;
}
.entry{
position: relative;
width: 100%;
height: 0;
padding-top: 78.33333%;
margin-bottom: 20px;
background: url(../img/game/bg_entry_sp.jpg) 0 0 no-repeat;
background-size: 100%;
}
.entry .btn-01 {
position: absolute;
top: auto;
bottom: 4%;
left: 0;
right: 0;
margin: auto;
}
.point{
margin: 0 -5px -10px;
}
.point li{
float: none;
width: auto;
padding: 0 5px;
margin-bottom: 10px;
}
.point li img{
display: block;
width: 100%;
}
.game-bnr .game-bnr__inr{
padding: 10px 10px 0;
}
.game-bnr .qr, .game-bnr .app{
width: auto;
margin: 0 auto 10px;
}
/*-------------------------------------------------------------------
04) sp character
-------------------------------------------------------------------*/
.no-borderimage .headline{
width: 100%;
height: 0;
padding-top: 66.94215%;
background-image: url(../img/character/bg_hl_noborder_sp.png) ;
background-size: 100%;
}
.chr-list{
margin-left: -5px;
margin-right: -5px;
}
.chr-list .chr-list__item{
float: left!important;
width: 50% !important;
padding-left: 5px;
padding-right: 5px;
margin-bottom: 10px;
}
.chr-list .chr-list__item a{
display: block;
box-shadow: 0 0 4px rgba(0, 98, 255, 0.5);
}
.chr-list .chr-list__item a img{
display: block;
}
.utility {
padding-right: 0;
height: auto;
margin-bottom: 20px;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.utility .switcher {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
padding: 0;
}
.utility .switcher + .btn-story {
margin-top: 8.4507%;
}
.switcher {
-webkit-box-flex: 0;
-ms-flex: 0 0 56.33803%;
flex: 0 0 56.33803%;
padding-bottom: 15px;
}
.switcher > * {
width: 35%;
height: auto;
}
.switcher > *:not(:first-child) {
position: relative;
padding-left: 15%;
}
.switcher > *:not(:first-child)::before {
width: 35.71429%;
}
.btn-story {
width: 70.42254%;
height: 0;
padding-top: 13.23944%;
margin-right: auto;
}
.main-figure{
position: relative;
margin-bottom: 0px;
}
.main-figure__cnt {
position: relative;
margin-top: 10px;
padding-bottom: 10px;
}
.main-figure__txt {
box-sizing: border-box;
display: block;
position: relative;
top: 0;
left: 0;
width: 100%;
height: 100%;
margin-top: -2.1978%;
background: none;
border-style: solid;
border-width: 20px;
-webkit-border-image: url(../img/character/bg_profile.png) 28 repeat;
-o-border-image: url(../img/character/bg_profile.png) 28 repeat;
border-image: url(../img/character/bg_profile.png) 28 fill repeat;
border-image-width: 20px 5.12821%;
}
.main-figure__btn {
display: block;
position: relative;
z-index: 1;
top: 0;
width: 100%;
height: 0;
margin: 0 auto;
padding-top: 16.48352%;
background-image: url(../img/character/btn_profile_sp.png);
}
.main-figure__btn[aria-expanded="true"] {
background-position-y: 100%;
}
.prof {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding: 15px;
}
.prof__item {
-webkit-box-flex: 0 !important;
-ms-flex: 0 0 100% !important;
flex: 0 0 100% !important;
max-width: 100% !important;
-webkit-box-ordinal-group: 11;
-ms-flex-order: 10;
order: 10;
font-size: 1.4rem;
}
.prof__item.order-1 {
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
}
.prof__item.order-2 {
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
}
.prof__item.order-3 {
-webkit-box-ordinal-group: 4;
-ms-flex-order: 3;
order: 3;
}
.prof__item.order-4 {
-webkit-box-ordinal-group: 5;
-ms-flex-order: 4;
order: 4;
}
.prof__item.order-5 {
-webkit-box-ordinal-group: 6;
-ms-flex-order: 5;
order: 5;
}
.prof__item.order-6 {
-webkit-box-ordinal-group: 7;
-ms-flex-order: 6;
order: 6;
}
.headline02{
margin-bottom: 20px;
border-style: solid;
border-width: 20px;
-webkit-border-image: url(../img/line_cont_sp.png) 28 repeat;
-o-border-image: url(../img/line_cont_sp.png) 28 repeat;
border-image: url(../img/line_cont_sp.png) 28 fill repeat;
}
.headline02 figure{
float: none;
width: 100px;
margin: 0 auto;
}
.headline02 h2{
margin-left: 0;
font-size: 1.6rem;
text-align: center;
margin-bottom: 10px;
}
.headline02 p{
margin-left: 0;
font-size: 1.4rem;
}
.headline02 + .main-figure {
margin-top: 0;
}
.no-borderimage .headline02{
overflow: visible;
width: auto;
height: auto;
border: 0;
padding: 20px;
margin: 3.30579% 0 30px;
background: url(../img/character/bg_hl02_noborder_mdl_sp.png) center center repeat-y;
background-size: 100%;
}
.no-borderimage .headline02:after, .no-borderimage .headline02:before{
content: "";
position: absolute;
bottom: 100%;
left: 0;
width: 100%;
height: 0;
padding-top: 3.30579%;
background: url(../img/character/bg_hl02_noborder_top_sp.png) center center repeat-y;
background-size: 100%;
}
.no-borderimage .headline02:after{
top: 100%;
bottom: auto;
background-image: url(../img/character/bg_hl02_noborder_btm_sp.png);
}
.sect.connect-area .sect__ttl{
background-image: url(../img/character/ttl_contact_sp.png);
}
.connect{
display: block;
width: auto;
margin: 20px auto 0;
}
.connect li{
max-width: 100%;
}
.connect li:last-child {
padding-bottom: 0;
}
.connect li a{
width: 100%;
height: 0;
padding-top: 14.81481%;
background-size: 100%;
}
.connect li.connect__movie a {
background-image: url(../img/character/btn_movie_sp.png);
}
.connect li.connect__itunes a {
background-image: url(../img/character/btn_itunes_sp.png);
}
.connect li.connect__animelo a {
background-image: url(../img/character/btn_animelo_sp.png);
}
.connect li.connect__tieup a {
background-image: url(../img/character/btn_tieup_sp.png);
}
.page-nav ul{
width: auto;
}
.page-nav li{
float: none;
width: auto;
}
.page-nav li a{
width: 100%;
height: 0;
padding-top: 16.48352%;
background-size: 100%;
}
.page-nav li span{
display: none;
}
.page-nav li.page-nav__prev a{
background-image: url(../img/character/btn_prev_sp.png);
}
.page-nav li.page-nav__back{
margin-left:0;
margin-top: 10px;
}
.page-nav li.page-nav__back a{
background-image: url(../img/character/btn_back_sp.png);
}
.page-nav li.page-nav__next{
margin-left: 0;
margin-top: 10px;
}
.page-nav li.page-nav__next a{
background-image: url(../img/character/btn_next_sp.png);
}
/*-------------------------------------------------------------------
05) sp movie
-------------------------------------------------------------------*/
.info{
padding: 10px;
}
.info p{
font-size: 1.4rem;
}
.btn-movie {
position: relative;
width: auto;
height: 0;
padding-top: 16.72794%;
}
.btn-movie a{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(../img/movie/btn_movie_sp.png) 0 0 no-repeat;
background-size:100%;
}
.movie-list .movie-list__item{
padding: 10px;
}
.movie-list .movie-list__ttl{
text-overflow: normal;
white-space: normal;
margin-bottom: 10px;
}
.movie-list .movie-list__link{
margin-bottom: -10px;
}
.movie-list .movie-list__link li{
float: left;
width: 50%;
}
.movie-list .movie-list__link li a{
position: relative;
display: block;
padding: 10px 0 10px 26px;
font-size: 1.2rem;
}
.movie-list .movie-list__link li a:before{
left: 2px;
width: 20px;
height: 20px;
margin-top: -10px;
background-size: 20px 40px;
}
.movie-list .movie-list__link li.nc a:before{
background-position: 0 -20px;
}
.cont__ttl {
font-size: 2rem;
}
.wrapper-manga-detail .header {
padding-bottom: 0
}
.slider {
max-width: 300px;
margin: 0 auto 30px
}
.slider__item {
padding: 0 10px;
}
.slick-arrow {
width: 30px;
height: 30px;
margin-top: -15px
}
.slick-arrow.slick-prev {
margin-left: -30px;
}
.slick-arrow.slick-next {
margin-right: -30px;
}
.thumb-grid {
padding: 0 0 50px
}
.thumb-grid__ul {
margin: 0 -5px -10px;
}
.thumb-grid li {
-webkit-box-flex: 0;
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%;
padding: 0 5px 10px;
}
.sns-buttons a {
width: 30px;
height: 30px;
}
.detail__sns {
margin-bottom: 30px;
}
.detail__nav {
margin-left: -5px;
margin-right: -5px;
}
.detail__nav > * {
padding: 0 5px;
width: 33.333%;
}
.detail__nav a {
width: 100%;
height: 0;
padding-top: 33.33333%;
}
.detail__nav a.next {
background-image: url(../img/manga/btn_next_sp.png);
}
.detail__nav a.prev {
background-image: url(../img/manga/btn_prev_sp.png);
}
.detail__nav a.back {
background-image: url(../img/manga/btn_back_sp.png);
}
.detail__img .number{
margin-top: -1.7em;
padding: .2em 0em .2em 4em;
}
.detail__img .number .num {
font-size: 2rem;
}
.detail__img .number .new {
width: 60px;
height: 60px;
}
.story > div {
padding: 20px 10px 40px;
}
.story-bottom {
margin-top: 50px
}
.story-bottom button {
width: 80px;
height: 27px;
margin: 0 6px;
border-radius: 4px;
font-size: 13px;
}
.story-copy p {
font-size: 10px;
letter-spacing: 0;
}
.story-tab__list {
margin: 0 -2px 40px;
}
.story-tab__btn {
-webkit-box-flex: 0;
-ms-flex: 0 0 72px;
flex: 0 0 72px;
padding: 0 2px;
}
.story-tab__btn button {
height: 24px;
font-size: 12px;
border-radius: 2px;
}
.story-tab__member {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin: 0 -15px 40px;
}
.story-tab__member > div {
text-align: center;
width: 68px;
padding: 0 2px 6px;
}
.story-tab__member > div img {
display: block;
width: 48px;
margin: 0 auto;
}
.story-tab__member > div span {
display: block;
margin-top: 5px;
font-size: 10px;
line-height: 1.2;
letter-spacing: 0;
}
.story-tab__cnt .cnt > *:not(:first-child) {
margin-top: 20px;
}
.story-tab .ttl {
margin-bottom: 30px;
font-size: 21px;
}
.story-tab .ttl em {
-webkit-box-flex: 0;
-ms-flex: 0 0 92px;
flex: 0 0 92px;
margin-right: 10px;
}
.talk__dt {
-webkit-box-flex: 0;
-ms-flex: 0 0 92px;
flex: 0 0 92px;
}
.talk__dt > div {
margin: 0 -2px -3px;
}
.talk__dt > div > div {
width: 32px;
padding: 0 2px 3px;
}
.talk__dt > div > div span {
display: none;
}
.talk__dd {
margin-left: 10px;
padding-top: .4em;
}
.talk__dd p {
font-size: 12px;
}
}
@media screen and (max-width: 980px) {
.count-down {
background-size: 140%, 260%
}
.count-down__table td {
font-size: 16.32653vw;
}
.count-down__table td span {
background-size: 100px;
}
}
@media screen and (max-width: 768px) {
.count-down__ttl {
width: 50%;
}
.count-down__table {
max-width: 80%;
}
.count-down__table td {
font-weight: bold;
font-size: 12vw;
}
.count-down__table td span {
padding-bottom: 6.66667vw;
background-size: 13.33333vw;
}
}
@media (any-hover: hover) {
.story-bottom button {
-webkit-transition: background-color .25s;
transition: background-color .25s
}
.story-bottom button:hover {
background: #ccc;
}
.story-tab__btn button {
-webkit-transition: background-color .25s;
transition: background-color .25s
}
.story-tab__btn button[aria-selected="false"]:hover {
background-color: #ccc;
}
}