@media screen and (min-width:961px) { .spOnly { display:none !important; } }
@media screen and (max-width:960px) { .pcOnly { display:none !important; } }

/* ========================================================================

  /css/style.css

======================================================================== */

html { color:#fff; }
body { font-family:'Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3','メイリオ',Meiryo,'ＭＳ Ｐゴシック',"游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝",sans-serif; color:#fff; min-height:100vh; font-size:16px; }

img { max-width:100%; border:0; vertical-align:bottom; }

/* ============ smart phone ============ */
@media screen and (max-width:960px){
    body{ background:#000; font-size:3.5vw; }
}

/************************************************************************
  body
************************************************************************/
body { min-height:100vh; background:url('../img/contents_bg.png') no-repeat bottom center; background-color:#1b0808; color:#ffffff; background-attachment:fixed; background-position:center bottom; /*background-size:100% auto;*/ font-size:18px; }

/* ============ smart phone ============ */
@media screen and (max-width:750px){

body { background-image:url('../img/contents_bg_sp.png'); }

}

/************************************************************************
  link
************************************************************************/

a:visited { color:#666666; }
a:hover { color:red;
-webkit-transition:0.3s;
-moz-transition:0.3s;
-o-transition:0.3s;
-ms-transition:0.3s;
transition:0.3s;
}

/************************************************************************
  .pc-only
************************************************************************/
.pc-only { display:inherit; }

/* ============ smart phone ============ */
@media screen and (max-width:750px){

.pc-only { display:none; }

}
/************************************************************************
  .sp-only
************************************************************************/
.sp-only { display:none; }

/* ============ smart phone ============ */
@media screen and (max-width:750px){

.sp-only { display:inherit; }

}

/************************************************************************
  .expanding 拡大表示する
************************************************************************/

.expanding {
-moz-transition:-moz-transform 0.2s linear;
-webkit-transition:-webkit-transform 0.2s linear;
-o-transition:-o-transform 0.2s linear;
-ms-transition:-ms-transform 0.2s linear;
transition:transform 0.2s linear;
}

.expanding:hover {
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-o-transform:scale(1.1);
-ms-transform:scale(1.1);
transform:scale(1.1);
}

/************************************************************************
  line
************************************************************************/
#line { margin:auto; /*width:100%; max-width:2000px;*/ max-width:2000px; height:100%; position:relative; z-index:0; overflow:hidden; }

#line::before { content:''; width:100%; height:100%; background:url('../img/bg.png') no-repeat top center; /*background-size:100% auto;*/ position:absolute; top:0; right:0; z-index:0; }

/* ============ smart phone ============ */
@media screen and (max-width:750px){

#line { width:100%; }
#line::before { background:url('../img/bg_sp.png') no-repeat; background-size:100% auto; z-index:auto; }

}
/************************************************************************
  header
************************************************************************/
header { margin:auto; width:100%; max-width:2000px; /*height:calc(1039/2000*100vw); max-height:1029px;*/height:1039px; background:url('../img/main_image.png') no-repeat top center; /*background-size:auto 100%;*/ z-index:-1; position:relative; }

header h1 { display:none; }



/* ============ smart phone ============ */
@media screen and (max-width:750px){

header { height:calc(1015/750*100vw); max-height:1015px; background:url('../img/main_image_sp.png') no-repeat; background-size:100% auto; z-index:1; position:relative; }

}
/************************************************************************
  #movie
************************************************************************/
#movie { margin:auto; width:1000px; display:block; font-size:0; position:relative; left:calc(300/2000*100%); position:absolute; top:0; right:0; height:0; z-index:auto; }
#movie figure { width:458px; height:289px; background:url('../img/movie.png') no-repeat; background-size:100% auto; display:block; position:absolute; top:482px; left:calc((120/1000*100%)* -1); }
#movie a { width:100%; height:100%; display:block;  }

/* ============ smart phone ============ */
@media screen and (max-width:750px){

#movie { width:100%; position:static; }

#movie figure { width:calc(333/750*100%); height:calc(258/750*100vw); background:url('../img/movie_sp.png') no-repeat; background-size:100% auto; top:calc(551/750*100vw); left:calc(408/750*100%); position:absolute; z-index:3; }


}
/************************************************************************
  nav#menu
************************************************************************/
nav#menu { position:relative; top:-110px; }
nav#menu ul { margin:auto; width:971px; display:flex; align-items:flex-end; }
nav#menu ul li { margin-right:calc(25/971*100%); }
nav#menu ul li:last-child { margin-right:0; }

nav#menu ul li img { max-width:100%; height:auto; }

nav#menu ul li img {
-moz-transition:-moz-transform 0.2s linear;
-webkit-transition:-webkit-transform 0.2s linear;
-o-transition:-o-transform 0.2s linear;
-ms-transition:-ms-transform 0.2s linear;
transition:transform 0.3s linear;
}
nav#menu ul li img:hover {
-webkit-transform:scale(1.2);
-moz-transform:scale(1.2);
-o-transform:scale(1.2);
-ms-transform:scale(1.2);
transform:scale(1.2);
}

/* ============ smart phone ============ */
@media screen and (max-width:750px){
nav#menu { display:none; }

}
/************************************************************************
  nav#menu
************************************************************************/
nav#dl-btn { display:none; }

/* ============ smart phone ============ */
@media screen and (max-width:750px){
nav#dl-btn { margin:-13% 0 16%; /*margin:calc((77/750*100vw)* -1) 0 calc(120/750*100%);*/ display:block; position:relative; z-index:1; }

/* ul */
nav#dl-btn ul { margin:auto; width:calc(600/750*100%); display:flex; }
nav#dl-btn ul li { margin:auto; width:calc(288/600*100%); }
}
/************************************************************************
  main
************************************************************************/
main { position:relative; z-index:2; }

/* ============ smart phone ============ */
@media screen and (max-width:750px){
main { z-index:auto; }

main::before {  }

}
/************************************************************************
  #introduction
************************************************************************/
#introduction { margin:50px 0 0; height:1259px; }

#introduction .wrapper { margin:auto; width:1200px; height:100%; background:url('../img/introduction.png') no-repeat top center; background-size:auto 100%; box-sizing:border-box; }

#introduction h2 { margin:0 0 30px calc(22/2000*100%); width:calc(572/1200*100%); max-width:572px; }
#introduction h2 img { max-width:100%; height:auto; }

#introduction .text { margin-left:calc(120/1200*100%);  }
#introduction p { margin-bottom:1.5em; line-height:1.8888; font-size:18px; }

/* ============ smart phone ============ */
@media screen and (max-width:750px){
#introduction { margin:calc(63/750*100vw) 0 calc(63/750*100vw); height:calc(1480/750*100vw); position:relative; }
#introduction .wrapper { padding-top:calc(34/750*100vw); width:100%; background-image:none; }

#introduction h2 { margin:0 0 calc(54/750*100vw); width:calc(572/750*100vw); max-width:572px; position:relative; z-index:2; }

#introduction::before { content:''; width:100%; height:calc(470/750*100vw); background:url('../img/introduction_1_sp.png') no-repeat; background-size:100% auto; display:block; position:absolute; top:0; z-index:0; }
#introduction::after { content:''; width:100%; height:calc(560/750*100vw); background:url('../img/introduction_2_sp.png') no-repeat; background-size:100% auto; display:block; position:absolute; bottom:0; z-index:0; }

#introduction .text { margin:auto; width:calc(557/750*100vw); height:calc(481/750*100vw); background:url('../img/introduction_text_sp.png') no-repeat; background-size:100% auto; font-size:0 !important; position:relative; z-index:2; }
#introduction .text p { font-size:0 !important; }
}
/************************************************************************
  #character
************************************************************************/
#character { margin:308px auto 0; }

#character .wrapper { margin:auto; position:relative; }

#character .h2 { margin:auto; max-width:1000px; position:relative; }

#character h2 { width:404px; position:absolute; top:-116px; right:0; }

#character h3 { display:none; }
#character p.text { line-height:1.875; font-size:16px; }
#character div.box .cv { cursor:pointer; }

/* ====== #joker ====== */
#joker { margin:130px auto 0; height:900px; background:url('../img/joker.png') no-repeat top center; }
#joker div.character { margin-left:calc(729/1662*100%); padding-top:372px; }

#joker h4 { width:455px; }

#joker div.box { padding:166px 0 0 calc(60/933*100%); width:573px; height:333px; background:url('../img/joker_bg.png') no-repeat; background-size:100% auto; box-sizing:border-box; position:relative; top:-17px; }
#joker div.box p.text { margin-bottom:10px; }
#joker div.box .cv { width:221px; position:relative; left:calc((50/573*100%)* -1); }


/* ====== #morgana ====== */
#morgana { margin:110px auto 0; height:900px; background:url('../img/morgana.png') no-repeat top center; }
#morgana h4 { margin:0 0 40px; width:493px; }

#morgana div.character { margin:auto; padding-top:122px; max-width:1000px; }

#morgana div.box { margin:0 0 0; padding:165px 0 0 calc(220/933*100%); width:529px; height:319px; background:url('../img/morgana_bg.png') no-repeat top center; box-sizing:border-box; position:relative; /*top:calc((17/1662*100vw)* -1);*/ top:-17px; }
#morgana div.box p.text { margin-bottom:10px; }
#morgana div.box .cv { width:244px; position:relative; right:-68px; }

/* .note */
#character .note { margin:auto; width:906px; position:relative; top:-94px; }
#character .note p { margin:0 0 112px auto; width:603px; height:103px; background:url('../img/character_note.png') no-repeat; font-size:0; }


/* ====== #other ====== */
#other { height:800px; background:url('../img/other_character.png') no-repeat top center; }

#other div.character { margin-left:calc(847/1662*100%); }
#character #other h3 { width:472px; display:block; }

/* ============ smart phone ============ */
@media screen and (max-width:750px){

#character { margin:0; }
#character .wrapper { width:100%; }

#character h2 { width:calc(549/750*100vw); position:absolute; top:0; right:0; z-index:2; }
#character p.text { line-height:1.4166; font-size:24px; font-size:calc(24/750*100vw); }


/* ====== #joker ====== */
#joker { margin:0 0 calc((170 + 135)/750*100vw); width:100%; height:calc(830/750*100vw); max-height:830px; background:url('../img/joker_sp.png') no-repeat; background-size:100% auto; overflow:hidden; position:relative; top:calc(135/750*100vw); z-index:auto; }
#joker div.character { margin-left:calc(332/750*100vw); padding-top:calc(239/750*100%); width:calc(426/750*100vw); box-sizing:border-box; }

#joker h4 { width:calc(383/750*100vw); }
#joker div.box { padding:calc(149/750*100vw) 0 0 calc(58/750*100vw); width:calc(407/750*100vw); height:calc(417/750*100vw); background:url('../img/joker_bg_sp.png') no-repeat; background-size:100% auto; }

#joker div.box .cv { width:calc(229/750*100vw); position:relative; left:calc((30/407*100vw)* -1); }


/* ====== #morgana ====== */
#morgana { margin:0 0 calc(90/750*100vw); height:calc(600/750*100vw); background:url('../img/morgana_sp.png') no-repeat; background-size:100% auto; }

#morgana h4 { margin:0 0 calc(31/750*100vw) calc(15/750*100vw); width:calc(422/750*100vw); }
#morgana div.box { margin:0 0 0 calc(22/750*100vw); padding:calc(134/750*100vw) 0 0 calc(122/750*100vw); width:calc(403/750*100vw); height:calc(362/750*100vw); background:url('../img/morgana_bg_sp.png') no-repeat; background-size:100% auto; }
#morgana div.character { padding-top:calc(122/1662*100%); }
#morgana div.box .cv { width:calc(244/750*100vw); right:calc((68/750*100vw)* -1); }

/* .note */
#character .note { width:auto; position:static; }
#character .note p { margin:0 0 calc(70/750*100vw) auto; width:100%; height:calc(65/750*100vw); background:url('../img/character_note_sp.png') no-repeat; background-size:100% auto; }

/* ====== #other ====== */
#other { margin-top:0; margin-bottom:calc(160/750*100vw); height:calc(670/750*100vw); max-height:670px; background:url('../img/other_character_sp.png') no-repeat; background-size:100% auto; }
#other div.character { margin-left:calc(322/750*100vw); padding-top:0; }
#character #other h3 { width:calc(404/750*100vw); }

}
/************************************************************************
  #requirements
************************************************************************/
#requirements { margin-top:185px; height:860px; }

#requirements .wrapper { margin:auto; max-width:1450px; height:100%; background:url('../img/requirements.png') no-repeat top center; }

#requirements h2 { margin:0 0 0 calc(382/1662*100%); width:453px; }

/* ============ smart phone ============ */
@media screen and (max-width:750px){
#requirements { margin:0 0 calc(67/750*100vw); height:calc(940/750*100vw); max-height:940px; }
#requirements .wrapper { margin:auto; width:100%; max-width:initial; height:100%; background:url('../img/requirements_sp.png') no-repeat; background-size:100% auto; }

#requirements h2 { margin:0 0 0 calc(22/750*100vw); width:calc(469/750*100vw); }

}
/************************************************************************
  #gallery
************************************************************************/
#gallery { margin-top:120px; height:850px; }

#gallery .wrapper { margin:auto; height:100%; background:url('../img/gallery.png') no-repeat top center; position:relative; }

#gallery h2 { margin:0 0 0 calc(874/1662*100%); width:404px; }

#gallery a { display:block; position:absolute; cursor:pointer; z-index:0; }


/* link */
a.gallery-1 { width:calc(390/1662*100%); height:280px; top:224px; left:calc(442/1662*100%); }
a.gallery-2 { width:calc(390/1662*100%); height:340px; top:504px; left:calc(389/1662*100%); }
a.gallery-3 { width:calc(390/1662*100%); height:280px; top:274px; left:calc(832/1662*100%); }
a.gallery-4 { width:calc(390/1662*100%); height:280px; top:554px; left:calc(777/1662*100%); }

/* ====== pop up ====== */
.gallery-arrow-right { width:74px; height:66px; background:url('../img/next.png') no-repeat 0 0; background-size:contain; display:block; position:absolute; top:50%; z-index:1100; right:30px; cursor:pointer; opacity:0.5; }
.gallery-arrow-right:hover { opacity:1; }

.gallery-arrow-left { width:74px; height:66px; background:url('../img/prev.png') no-repeat 0 0; background-size:contain; display:block; position:absolute; top:50%; z-index:1100; left:30px; cursor:pointer; opacity:0.5; }
.gallery-arrow-left:hover { opacity:1; }

.mfp-image-holder .mfp-close, .mfp-iframe-holder .mfp-close { width:33px; height:31px; background:url(../img/btn_close.png) no-repeat; background-size:100% auto; font-size:0; cursor:pointer; }

/* ============ smart phone ============ */
@media screen and (max-width:750px){
#gallery { margin:0 0 calc(107/750*100vw); height:calc(1110/750*100vw); max-height:1110px; }
#gallery .wrapper { margin:auto; width:100%; max-width:initial; background:url('../img/gallery_sp.png') no-repeat; background-size:100% auto; }

#gallery h2 { margin:0 0 0 calc(309/750*100vw); width:calc(382/750*100vw); }

/* link */
#gallery a { width:calc(418/750*100vw); height:calc(271/750*100vw); }
a.gallery-1 { top:calc(210/750*100vw); left:0; }
a.gallery-2 { top:calc(370/750*100vw); left:calc(280/750*100vw); }
a.gallery-3 { top:calc(640/750*100vw); left:calc(50/750*100vw); }
a.gallery-4 { top:calc(810/750*100vw); left:calc(330/750*100vw); }

/* ====== pop up ====== */
.gallery-arrow-right { width:10vw; height:11vw; right:1vw; }
.gallery-arrow-left { width:10vw; height:11vw; left:1vw; }

.mfp-image-holder .mfp-close, .mfp-iframe-holder .mfp-close { width:calc(67/750*100vw); height:calc(62/750*100vw); }

}
/************************************************************************
  #update
************************************************************************/
#update { margin-top:395px; margin-bottom:100px; text-align:center; }

#update .wrapper { margin:auto; padding:0 calc(((1000 - 850)/2)/2000*100%); width:1000px; height:616px; background:url('../img/update_bg.png') no-repeat top center; box-sizing:border-box; }
#update h2 { margin:auto; width:437px; position:relative; top:-113px; }


#update .info { margin-bottom:40px; }
#update .info::after { content:''; height:0; clear:both; display:block; }

#update .main-part { border-bottom:1px solid #493939; }

#update h3 { padding:0.8em 0; width:calc(230/850*100%); background:#ff0000; border:1px solid #ffffff; font-size:16px; float:left; }
#update .right { padding:0 0 0 calc(40/(850 - 230)*100%); float:left; }

#update ul { margin-bottom:1.5em; }
#update ul li { margin:0 0 1em; font-size:16px; text-align:left; }
#update ul li::before { content:'★'; margin:0 0.5em 0 0; color:rgba(255,255,255,0.5); display:inline; }

#update h4 { margin:0 0 1em; text-align:left; font-size:16px; }

strong { color:#ff0000; }

/* ============ smart phone ============ */
@media screen and (max-width:750px){

#update { margin:0 0 calc(89/750*100vw); text-align:center; }
#update .wrapper { margin:auto; padding:0 calc(((1000 - 850)/2)/2000*100%); width:100%; height:calc(780/750*100vw); max-height:780px; background:url('../img/update_bg_sp.png') no-repeat; background-size:100% auto; }

#update h2 { margin:auto; width:calc(499/750*100vw); position:static; top:0; }
#update h3 { margin:0 0 1em; padding:0.4em 0; width:100%; font-size:26px; font-size:calc(26/750*100vw); float:none; }
#update h4 { margin:0 0 0.5em; font-size:24px; font-size:calc(24/750*100vw); }

#update .right { padding:0; float:none; }

#update .info { margin:auto; width:calc(570/750*100vw); }
#update ul { margin:0 0 0.6em; width:100%; }
#update ul li { margin:0 0 0.3em 1.5em; text-indent:-1.5em;  line-height:1.5; font-size:24px; font-size:calc(24/750*100vw); }
#update ul li::before { content:'★'; margin:0 0.5em 0 0; color:rgba(255,255,255,0.5); font-size:18px; font-size:calc(18/750*100vw); }

}
/************************************************************************
  .pagetop
************************************************************************/
.pagetop { width:calc(119/2000*100%); position:fixed; bottom:30px; right:55px; display:none; z-index:3; }
.pagetop a { height:100%; display:block; position:relative; z-index:3; }

/* ============ smart phone ============ */
@media screen and (max-width:750px){

.pagetop { width:calc(119/750*100vw); bottom:25px; right:25px; }
}
/************************************************************************
  footer
************************************************************************/
footer { padding:30px 0; background-color:#1b0808; text-align:center; position:relative; z-index:0; font-size:12px; }

footer ul { margin:auto auto 1.5em; display:flex; align-items:center; justify-content:center; }
footer ul li { padding:0 1em; border-right:1px solid #ffffff; line-height:1; }
footer ul li:last-child { border-right:0; }

/* ============ smart phone ============ */
@media screen and (max-width:750px){

footer { padding:calc(30/750*100vw) 0;color:#999999; }
footer ul { flex-direction:column; }
footer ul li { padding:0 1em; border-right:0; line-height:1.9166; font-size:24px; font-size:calc(24/750*100vw); }

footer ul li a { color:#999999; }
}