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

/************************************************************************
  
************************************************************************/
html { color:#fff; }
img { vertical-align:bottom; border:0; }
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; }

* { box-sizing:border-box; }
.pointer-events { pointer-events: none; }


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





/************************************************************************
  body
************************************************************************/
body { background:#f2f7fb; color:#333333; line-height:1; font-size:0; }

/************************************************************************
  
************************************************************************/
.dp-none { display:none; }
p.img { font-size:0 }
h2 { font-size:0; }

a:hover { cursor:pointer !important; }

/************************************************************************
  header
************************************************************************/
header { height:746px; background:url('../img/main_image.jpg') no-repeat top center; position:relative; }
header .contents { position:relative; }

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

header { height:calc(1002/750*100vw); background-image:url('../img/main_image_sp.jpg'); background-color:#ffffff; background-size:100% auto; font-size:0; }

}
/************************************************************************
  .contents
************************************************************************/
.contents { margin:auto; max-width:1000px; height:100%; /*border:1px solid*/ }

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

.contents { max-width:initial; }


}
/************************************************************************
  #movie
************************************************************************/
#movie { margin:auto; width:454px; position:absolute; top:453px; left:280px; display:block; }
#movie figure {  }
#movie a { margin:auto; width:240px; height:139px; background:url('../img/movie.png') no-repeat; display:block; /*background-color:rgba(255,0,0,0.5);*/ }

#update { margin:auto; width:454px; height:76px; background:url('../img/update.png') no-repeat; position:relative; top:-8px; }

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

#movie { width:calc(584/750*100vw); top:calc(689/750*100vw); right:0; left:0; }

#movie a { width:calc(284/750*100vw); height:calc(164/750*100vw); background-image:url('../img/movie_sp.png'); background-size:100% auto; }
#update { width:calc(584/750*100vw); height:calc(91/750*100vw); background-image:url('../img/update.png'); background-size:100% auto; }

}
/************************************************************************
  #DL-btn
************************************************************************/
#DL-btn { margin:auto; padding:0 10px; width:394px; height:76px; background:rgba(255,255,255,0.8); border:1px solid #ffffff; border-radius:4px; display:flex; justify-content:space-between; align-items:center; position:absolute; top:656px; left:302px; }

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

#DL-btn { margin:auto; padding:0; width:calc(600/750*100vw); height:auto; background-color:transparent; border:0; top:calc(948/750*100vw); right:0; left:0; justify-content:space-between; }

#DL-btn li { width:calc(289/750*100vw); height:calc(106/750*100vw); }
#DL-btn a { width:100%; height:100%; display:block; }
#DL-btn a img { display:none; }
#DL-btn .btn-app-store a { background:url('../img/btn_app_store_sp.png') no-repeat; background-size:100% auto; }
#DL-btn .btn-google-play a { background:url('../img/btn_google_play_sp.png') no-repeat; background-size:100% auto; }

}
/************************************************************************
  #Audio-Control
************************************************************************/
#Audio-Control { margin:auto; width:44px; height:145px; background:url('../img/bgm.png') no-repeat; position:absolute; top:0; bottom:0; right:0; display:block; /*background-color:rgba(255,0,0,0.5);*/ }

#Audio-Control button { width:30px; height:45px; font-size:0; position:absolute; right:2px; /*background-color:rgba(255,0,0,0.5);*/ }
#Audio-Control button.on { top:18px; }
#Audio-Control button.off { top:85px; }

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

#Audio-Control { width:calc(250/750*100vw); height:calc(50/750*100vw); background-image:url('../img/bgm_sp.png'); background-size:100% auto; bottom:auto; left:auto; right:0; }

#Audio-Control button { width:calc(90/750*100vw); height:calc(40/750*100vw); top:0 !important; }
#Audio-Control button.on { left:calc(25/750*100vw); }
#Audio-Control button.off { right:calc(25/750*100vw); }

}
/************************************************************************
  nav#menu
************************************************************************/
nav#menu { height:115px; background:#0068b7; display:flex; justify-content:center; align-items:center; }
nav#menu ul { max-width:1000px; display:flex; justify-content:space-between; align-items:center; }
nav#menu ul li { margin-right:-6px; }
nav#menu ul li a { width:206px; height:91px; background-repeat:no-repeat; display:block; }

.nav-introduction a { background-image:url('../img/nav_introduction_off.png'); }
.nav-character a { background-image:url('../img/nav_character_off.png'); }
.nav-new-feature a { background-image:url('../img/nav_new_feature_off.png'); }
.nav-requirements a { background-image:url('../img/nav_requirements_off.png'); }
.nav-campaign a { background-image:url('../img/nav_campaign_off.png'); }

/* hover */
.nav-introduction a:hover { background-image:url('../img/nav_introduction_on.png'); }
.nav-character a:hover { background-image:url('../img/nav_character_on.png'); }
.nav-new-feature a:hover { background-image:url('../img/nav_new_feature_on.png'); }
.nav-requirements a:hover { background-image:url('../img/nav_requirements_on.png'); }
.nav-campaign a:hover { background-image:url('../img/nav_campaign_on.png'); }


.nav-introduction { background-image:url('../img/nav_introduction_on.png'); }
.nav-character { background-image:url('../img/nav_character_on.png'); }
.nav-new-feature { background-image:url('../img/nav_new_feature_on.png'); }
.nav-requirements { background-image:url('../img/nav_requirements_on.png'); }
.nav-campaign { background-image:url('../img/nav_campaign_on.png'); }

/************************************************************************
  main
************************************************************************/
main { background:url('../img/bg_main.png') no-repeat center top fixed; }

/************************************************************************
  #wrapper
************************************************************************/
#wrapper { background:url('../img/bg.png') no-repeat center top; }

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

#wrapper { max-width:100%; overflow:hidden; background:url('../img/bg_sp.png') no-repeat center top; background-size:100% auto; }

}
/************************************************************************
  #introduction
************************************************************************/
#introduction { margin:0 auto; padding:150px 0 120px; }

#introduction h2 { margin:auto auto 90px; width:304px; height:146px; background:url('../img/h2_introduction.png') no-repeat; }
#introduction h3 { margin:auto auto 55px; width:431px; height:95px; background:url('../img/h3_introduction.png') no-repeat; }
#introduction p { margin-bottom:1.5em; text-align:center; line-height:1.8888; font-family:serif; font-size:16px; }
#introduction p:last-child { margin-bottom:0; }

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

#introduction { padding:calc(279/750*100vw) 0 calc((303 - 24)/750*100vw); }
#introduction h2 { margin:auto auto calc(73/750*100vw); width:calc(368/750*100vw); height:calc(176/750*100vw); background-size:100% auto; }
#introduction h3 { margin-bottom:calc(60/750*100vw); width:calc(476/750*100vw); height:calc(113/750*100vw); background:url('../img/h3_introduction_sp.png') no-repeat; background-size:100% auto; }

#introduction p { margin-bottom:1.5em; line-height:calc(50/24); font-size:calc(24/750*100vw); }
#introduction p:last-child { margin-bottom:0; }

}
/************************************************************************
  #character
************************************************************************/
#character { padding-top:80px; }

#character h2 { margin:auto auto 40px; width:245px; height:146px; background:url('../img/h2_character.png') no-repeat; }

.note { font-size:16px; }

/* .slides-nav */
ul.slides-nav { display:flex; justify-content:center; }
ul.slides-nav li { margin-right:10px; width:135px; height:152px; }
ul.slides-nav li:last-child { margin-right:0; }

ul.slides-nav li.current img { background-repeat:no-repeat; display:none; }

ul.slides-nav li.current.icon-cless { background-image:url('../img/icon_cless_on.png'); }
ul.slides-nav li.current.icon-yuri { background-image:url('../img/icon_yuri_on.png'); }
ul.slides-nav li.current.icon-milla { background-image:url('../img/icon_milla_on.png'); }
ul.slides-nav li.current.icon-velvet { background-image:url('../img/icon_velvet_on.png'); }

/* .slides */
.slides { margin-top:-10px; margin-bottom:10px; position:relative; }

/* .slick-slide */
.slick-slide { width:100%; max-width:2000px; }
.slick-slide {  }

/* .slide-arrow */
.slide-arrow { margin:auto; width:162px; height:160px; background:no-repeat center; position:absolute; top:0; bottom:0; display:inline-block; z-index:1; }
.prev-arrow { background-image:url('../img/arrow_prev_on.png'); left:0; }
.next-arrow { background-image:url('../img/arrow_next_on.png'); right:0; }

.slide-arrow:hover img { display:none; }

/* .item */
.slick-slide .item { margin:auto; width:100%; max-width:1000px; height:915px; background:no-repeat center; position:relative; }
.slick-slide .item h3 { background:no-repeat center; position:absolute; }
.slick-slide .item h4 { background:no-repeat center; position:absolute; }
.slick-slide .item p.lines { background:no-repeat center; position:absolute; }
.slick-slide .item .chara-cv { position:absolute; }
.slick-slide .item .chara-cv a { background:no-repeat center; display:block; }
.slick-slide .item .chara-cv a:hover { cursor:pointer; }
.slick-slide .item p.text { width:420px; line-height:1.7333; font-family:serif; position:absolute; font-size:16px; }


/* ====== #cless ====== */
#cless { background-image:url('../img/cless.png'); }

#cless h3 { width:216px; height:72px; background-image:url('../img/cless_h3.png'); top:716px; left:47px; }
#cless h4 { width:193px; height:68px; background-image:url('../img/cless_h4.png'); top:626px; left:47px; }
#cless p.lines { width:549px; height:175px; background-image:url('../img/cless_lines.png'); top:260px; left:0; }
#cless .chara-cv { top:790px; left:47px; }
#cless .chara-cv a { width:156px; height:46px; background-image:url('../img/cless_cv.png'); }
#cless p.text { top:733px; left:29px; }

/* ====== #yuri ====== */
#yuri { background-image:url('../img/yuri.png'); }

#yuri h3 { width:211px; height:73px; background-image:url('../img/yuri_h3.png'); top:716px; left:47px; }
#yuri h4 { width:242px; height:68px; background-image:url('../img/yuri_h4.png'); top:626px; left:47px; }
#yuri p.lines { width:489px; height:112px; background-image:url('../img/yuri_lines.png'); top:300px; left:0; }
#yuri .chara-cv { top:790px; left:47px; }
#yuri .chara-cv a { width:174px; height:46px; background-image:url('../img/yuri_cv.png'); }
#yuri p.text { top:733px; left:29px; }


/* ====== #milla ====== */
#milla { background-image:url('../img/milla.png'); }

#milla h3 { width:129px; height:73px; background-image:url('../img/milla_h3.png'); top:716px; left:47px; }
#milla h4 { width:286px; height:68px; background-image:url('../img/milla_h4.png'); top:626px; left:47px; }
#milla p.lines { width:581px; height:175px; background-image:url('../img/milla_lines.png'); top:260px; left:0; }
#milla .chara-cv { top:790px; left:47px; }
#milla .chara-cv a { width:192px; height:46px; background-image:url('../img/milla_cv.png'); }
#milla p.text { top:733px; left:29px; }


/* ====== #velvet ====== */
#velvet { background-image:url('../img/velvet.png'); }

#velvet h3 { width:359px; height:71px; background-image:url('../img/velvet_h3.png'); top:716px; left:47px; }
#velvet h4 { width:246px; height:68px; background-image:url('../img/velvet_h4.png'); top:626px; left:47px; }
#velvet p.lines { width:477px; height:112px; background-image:url('../img/velvet_lines.png'); top:300px; left:0; }
#velvet .chara-cv { top:790px; left:47px; }
#velvet .chara-cv a { width:174px; height:46px; background-image:url('../img/velvet_cv.png'); }
#velvet p.text { top:733px; left:29px; }

/* ================== #other-character ================== */
#other-character { padding:160px 0 230px; text-align:center; }

#other-character h2 { margin-bottom:85px; width:440px; height:140px; background-image:url('../img/h2_other_character.png'); }

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

#character { padding-top:0; }

.note { margin:auto; width:calc(600/750*100vw); font-size:calc(22/750*100vw); }

/* ul.slides-nav */
ul.slides-nav li { margin-right:calc(10/750*100vw); width:calc(142/750*100vw); height:calc(160/750*100vw); }
ul.slides-nav li:last-child { margin-right:0; }
ul.slides-nav li img { width:100%; }
ul.slides-nav li.current { background-size:100% auto; }

/* .slide-arrow */
.slide-arrow { width:calc(81/750*100vw); height:calc(160/750*100vw); background-size:100% auto; top:calc(299/750*100vw); bottom:auto; }
.slide-arrow img { display:none; }
.prev-arrow:hover { background-image:url('../img/arrow_prev_on_sp.png'); left:0; }
.next-arrow:hover { background-image:url('../img/arrow_next_on_sp.png'); right:0; }

.prev-arrow { background-image:url('../img/arrow_prev_off_sp.png'); left:0; }
.next-arrow { background-image:url('../img/arrow_next_off_sp.png'); right:0; }

/* .slick-slide */
.slick-slide { width:100%; /*max-width:initial;*/ }

/* .item */
.slick-slide .item { width:100%; max-width:initial; height:calc(1030/750*100vw); }
.slick-slide .item h3 { background-size:100% auto; }
.slick-slide .item h4 { background-size:100% auto; }
.slick-slide .item p.text { width:calc(500/750*100vw); line-height:calc(34/22); font-size:calc(22/750*100vw); top:calc(958/750*100vw) !important; left:calc(51/750*100vw) !important; }

.slides { margin-top:calc(-10/750*100vw); }


/* ====== #cless ====== */
#cless { background:url('../img/cless_sp.png') no-repeat center top; background-size:auto 100%; }

#cless h3 { width:calc(206/750*100vw); height:calc(75/750*100vw); top:calc(930/750*100vw); left:calc(36/750*100vw); }
#cless h4 { width:calc(407/750*100vw); height:calc(33/750*100vw); background-image:url('../img/cless_h4_sp.png'); background-size:100% auto; top:calc(881/750*100vw); left:calc(36/750*100vw); }
#cless p.lines { width:calc(474/750*100vw); height:calc(171/750*100vw); background-size:100%; top:calc(546/750*100vw); }
#cless .chara-cv { top:calc(941/750*100vw); left:calc(283/750*100vw); }
#cless .chara-cv a { width:calc(188/750*100vw); height:calc(55/750*100vw); background-size:100% auto; }
#cless p.text {  }

/* ====== #yuri ====== */
#yuri { background:url('../img/yuri_sp.png') no-repeat center top; background-size:auto 100%; }

#yuri h3 { width:calc(214/750*100vw); height:calc(77/750*100vw); top:calc(930/750*100vw); left:calc(36/750*100vw); }
#yuri h4 { width:calc(492/750*100vw); height:calc(34/750*100vw); background-image:url('../img/yuri_h4_sp.png'); background-size:100% auto; top:calc(881/750*100vw); left:calc(36/750*100vw); }
#yuri p.lines { width:calc(464/750*100vw); height:calc(106/750*100vw); background-size:100% auto; top:calc(546/750*100vw); }
#yuri .chara-cv { top:calc(941/750*100vw); left:calc(283/750*100vw); }
#yuri .chara-cv a { width:calc(214/750*100vw); height:calc(55/750*100vw); background-size:100% auto; }
#yuri p.text {  }

/* ====== #milla ====== */
#milla { background:url('../img/milla_sp.png') no-repeat center top; background-size:auto 100%; }

#milla h3 { width:calc(124/750*100vw); height:calc(76/750*100vw); top:calc(930/750*100vw); left:calc(36/750*100vw); }
#milla h4 { width:calc(438/750*100vw); height:calc(33/750*100vw); background-image:url('../img/milla_h4_sp.png'); background-size:100% auto; top:calc(881/750*100vw); left:calc(36/750*100vw); }
#milla p.lines { width:calc(496/750*100vw); height:calc(171/750*100vw); background-size:100% auto; top:calc(546/750*100vw); }
#milla .chara-cv { top:calc(941/750*100vw); left:calc(193/750*100vw); }
#milla .chara-cv a { width:calc(230/750*100vw); height:calc(55/750*100vw); background-size:100% auto; }
#milla p.text {  }

/* ====== #velvet ====== */
#velvet { background:url('../img/velvet_sp.png') no-repeat center top; background-size:auto 100%;; }

#velvet h3 { width:calc(326/750*100vw); height:calc(76/750*100vw); top:calc(930/750*100vw); left:calc(36/750*100vw); }
#velvet h4 { width:calc(441/750*100vw); height:calc(34/750*100vw); background-image:url('../img/velvet_h4_sp.png'); background-size:100% auto; top:calc(881/750*100vw); left:calc(36/750*100vw); }
#velvet p.lines { width:calc(464/750*100vw); height:calc(101/750*100vw); background-size:100% auto; top:calc(546/750*100vw); }
#velvet .chara-cv { top:calc(941/750*100vw); left:calc(375/750*100vw); }
#velvet .chara-cv a { width:calc(206/750*100vw); height:calc(55/750*100vw); background-size:100% auto; }
#velvet p.text {  }


/* ================== #other-character ================== */
#other-character { padding:calc(183/750*100vw) 0 calc(270/750*100vw); }
#other-character h2 { margin-bottom:calc(82/750*100vw); width:calc(418/750*100vw); height:calc(138/750*100vw); background-size:100% auto; }

#other-character p.img { margin:auto; width:calc(594/750*100vw); height:calc(587/750*100vw); background:url('../img/other_character_sp.png') no-repeat; background-size:100% auto; }
#other-character p.img img { display:none; }
}
/************************************************************************
  #new-feature
************************************************************************/
#new-feature { padding:0 0 220px; text-align:center; }

#new-feature h2 { margin:auto auto 130px; width:285px; height:146px; background-image:url('../img/h2_new_feature.png'); }


#new-feature ul { margin:auto; max-width:1000px; }
#new-feature ul li { margin:0 0 195px; width:100%; display:flex; flex-wrap:wrap; }
#new-feature ul li:last-child { margin-bottom:0; }
#new-feature ul li .info { margin:0 40px 0 0; width:380px; text-align:left; }
#new-feature ul li p.text { margin-bottom:1em; line-height:1.625; font-family:serif; font-size:16px; }
#new-feature ul li p.text:last-child { margin-bottom:0; }

#new-feature h3 { margin-bottom:30px; background:no-repeat center; }

#new-feature-01 h3 { width:124px; height:99px; background-image:url('../img/h3_new_feature_01.png'); }
#new-feature-02 h3 { width:136px; height:96px; background-image:url('../img/h3_new_feature_02.png'); }
#new-feature-03 h3 { width:121px; height:99px; background-image:url('../img/h3_new_feature_03.png'); }

#new-feature ul li#new-feature-02 .info { margin:0 0 0 40px; order:2; }
#new-feature ul li#new-feature-02 p.img { order:1; }
#new-feature ul li#new-feature-02 #special-skit { order:3; }

#new-feature h4 { color:#0068b7; line-height:1.625; font-family:serif; font-size:16px; }

#new-feature ul.disc { font-family:serif; font-size:16px; }
#new-feature ul.disc li { margin:auto; line-height:1.625; display:list-item; }
#new-feature ul.disc li:before { content:'●'; margin-right:0.5em; color:#0068b7; } 

/* ====== #special-skit ====== */
#special-skit { padding:50px 0 0; width:100%; }
#special-skit h3 { margin:auto auto 30px; width:899px; height:60px; background-image:url('../img/h3_special_skit.png'); }

#special-skit ul { display:flex; justify-content:space-between; }
#special-skit ul li { margin:auto; width:auto; display:block;  }


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

#new-feature { padding:0 0 calc(230/750*100vw); text-align:center; }

#new-feature h2 { margin:auto auto 130px; width:calc(355/750*100vw); height:calc(176/750*100vw); background-size:100% auto; }

#new-feature h3 { margin:auto auto calc(25/750*100vw); background-size:100% auto; }
#new-feature-01 h3 { width:calc(153/750*100vw); height:calc(119/750*100vw); background-image:url('../img/h3_new_feature_01_sp.png'); }
#new-feature-02 h3 { width:calc(169/750*100vw); height:calc(114/750*100vw); background-image:url('../img/h3_new_feature_02_sp.png'); }
#new-feature-03 h3 { width:calc(141/750*100vw); height:calc(119/750*100vw); background-image:url('../img/h3_new_feature_03_sp.png'); }

#new-feature ul li { margin-bottom:calc(90/750*100vw); }

#new-feature ul li .info { margin:0 auto calc(25/750*100vw); width:calc(650/750*100vw); }
#new-feature ul li .img { margin:auto; width:calc(650/750*100vw); }
#new-feature ul li .img img { width:100%; }

#new-feature ul li#new-feature-02 .info { margin:0 auto calc(25/750*100vw); order:1; }
#new-feature ul li#new-feature-02 p.img { margin:0 auto calc(70/750*100vw); order:2; }
#new-feature ul li#new-feature-02 #special-skit { order:3; }

/* ====== #special-skit ====== */
#special-skit { margin:auto auto calc(90/750*100vw); padding:0 0 calc(60/750*100vw); width:calc(650/750*100vw); background-color:#ffffff; border:2px solid #b4a974; border-radius:0 0 16px 16px; }
#special-skit h3 { margin:auto auto calc(55/750*100vw); padding:calc(25/750*100vw) 0;  width:100%; height:auto; background-color:#e1eaf5; background-image:none; color:#b4a974; border-bottom:1px solid #b4a974; text-align:center; line-height:1; }

#special-skit h3 span.dp-none { line-height:1; display:inline; font-family:serif; font-size:calc(30/750*100vw); }

#special-skit ul { flex-direction:column; }
#special-skit ul li { margin-bottom:calc(40/750*100vw); }

#special-skit ul li img { width:calc(514/750*100vw); }

}
/************************************************************************
  #requirements
************************************************************************/
#requirements { padding:0 0 230px; }
#requirements p.img { margin-bottom:40px; text-align:center; }

#requirements h2 { margin:auto auto 60px; width:342px; height:146px; background-image:url('../img/h2_requirements.png'); }

#requirements h3 { margin-bottom:8px; display:inline-block; font-weight:bold; font-size:18px; }

#requirements .info { padding: 30px 0 0; height: 222px; background: url(../img/bg_requirements.png) no-repeat center; color: #ffffff; font-size: 20px; background-size: auto 100%; }
#requirements strong { color:#ff96af; }
#requirements ul.icon { margin:auto; width:730px; font-family:serif; }
#requirements ul.icon li { margin:0 0 0.9em 30px; line-height:1.35; text-indent:0; }
#requirements ul.icon li::before { content:''; margin-right:0.5em; margin-left:-35px; width:19px; height:20px; background:url('../img/icon_requirements.png') no-repeat; display:inline-block;  }
#requirements ul.icon li:nth-child(1) { order:1; }
#requirements ul.icon li:nth-child(2) { order:3; }
#requirements ul.icon li:nth-child(3) { order:2; }
#requirements ul.icon li:nth-child(4) { order:4; }

#requirements p.note small { font-size:14px; }

/* ul.mark */
#requirements ul.mark { margin:0; display:flex; flex-wrap:wrap; font-size:16px; }
#requirements ul.mark li { margin:0; width:50%; display:flex; }
#requirements ul.mark li::before { content:'●'; margin-right:0; margin-left:0; background-image:none; font-size:8px; display:inline-block; vertical-align:middle; }

#requirements .text { margin:auto; padding:0 0 0 15px; width:691px; height:31px; line-height:1; /*background:url('../img/band_requirements.png') no-repeat;*/ display:flex; align-items:center; font-size:14px; }


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

#requirements { padding:0 0 calc(226/750*100vw); }

#requirements h2 { margin:auto auto calc(63/750*100vw); width:calc(400/750*100vw); height:calc(176/750*100vw); background-size:100% auto; }

#requirements h3 { margin-bottom:calc(5/750*100vw); font-size:calc(24/750*100vw); }


#requirements p.img { margin:0 auto calc(40/750*100vw); width:calc(650/750*100vw); }
#requirements p.img img { width:100%; }
#requirements .info { padding: calc(30/750*100vw) calc(65/750*100vw) 0; height: calc(375/750*100vw); background-image: url(../img/bg_requirements_sp.png); background-size: auto 100%; font-size: calc(20/750*100vw);}

#requirements .text { margin:auto; padding:0 0 0 calc(40/750*100vw); width:calc(590/750*100vw); height:calc(68/750*100vw); line-height:calc(24/16); background-image:url('../img/band_requirements_sp.png'); background-size:100% auto; font-size:calc(16/750*100vw); }

#requirements .note { margin:auto; width:auto; line-height:1.5; font-size:calc(20/750*100vw); }
#requirements p.note small { font-size:calc(20/750*100vw); }


#requirements ul { margin-bottom:calc(30/750*100vw); width:100%; }
#requirements ul li { line-height:calc(34/24); }


#requirements ul.icon { width:auto; }
#requirements ul.icon li:nth-child(1) { order:1; }
#requirements ul.icon li:nth-child(2) { order:2; }
#requirements ul.icon li:nth-child(3) { order:3; }
#requirements ul.icon li:nth-child(4) { order:4; }

#requirements ul.icon li::before { width:calc(19/750*100vw); height:calc(19/750*100vw); background-size:100% auto; }

/* ul.mark */
#requirements ul.mark { display:flex; flex-direction:column;  }
#requirements ul.mark li { width:auto; line-height:1.5; font-size:calc(20/750*100vw); }
}
/************************************************************************
  #campaign
************************************************************************/
#campaign { padding:0 0 230px; }

#campaign h2 { margin:auto auto 65px; width:250px; height:160px; background-image:url('../img/h2_campaign.png'); }

#campaign h3 { margin:auto auto 0; width:1000px; height:80px; background-image:url('../img/h3_campaign.png'); }
#campaign p.img { text-align:center; }
#campaign p.img:first-of-type { margin-bottom:70px; }


/* ====== #click-here ====== */
#click-here { margin:auto auto 90px; width:1000px; display:flex; justify-content:center; align-items:center; }
#campaign h3#h3-campaign-2 { margin:0  25px 0 0; width:595px; height:33px; background-image:url('../img/h3_campaign_2.png'); }
#click-here p.img a:hover { cursor:pointer; }

/* ul.img */
#campaign ul.img { margin:auto auto 95px; padding:17px 10px 20px; width:1000px; background-color:#dde6f1; display:flex; justify-content:space-between; }
#campaign ul.img li { width:188px; }
#campaign ul.img li img { width:100%; height:auto; }

/* #campaign .item */
#campaign .item { margin:auto; padding:0 50px; max-width:1000px; display:none; }
#campaign .item.active { display:block; }
#campaign .item p.img { margin-bottom:30px; }
#campaign .item h4 { margin-bottom:30px; padding:0 0 1em; color:#a1955d; border-bottom:1px solid #a1955d; font-weight:bold; font-family:serif; font-size:24px; }
#campaign .item p.text { margin-bottom:50px; line-height:1.7777; font-size:16px; }
#campaign .item h5 { margin-bottom:30px; font-size:20px; }
#campaign .item h5::before { content:'◆'; margin-right:0.5em; color:#978a49; display:inline-block; font-size:20px; }

/* table */
#campaign .item table { width:100%; border-top:1px solid #cbc4a3; border-left:1px solid #cbc4a3; line-height:1.5; }
#campaign .item table th { padding:25px; width:160px; background-color:#eeece2; border-bottom:1px solid #cbc4a3; border-right:1px solid #cbc4a3; vertical-align:middle; font-size:16px; }
#campaign .item table td { padding:25px; background-color:#ffffff; border-bottom:1px solid #cbc4a3; border-right:1px solid #cbc4a3; vertical-align:middle; font-size:16px; }
#campaign .item table td small { font-size:14px; }

#campaign #info { margin:auto; max-width:1000px; height:926px; background:no-repeat center top; }

#campaign #info.vol1 { height:956px; background-image:url('../img/bg_campaign_1.png'); }
#campaign #info.vol2 { height:1117px; background-image:url('../img/bg_campaign_2.png'); }
#campaign #info.vol3 { height:983px; background-image:url('../img/bg_campaign_3.png'); }
#campaign #info.vol4 { height:956px; background-image:url('../img/bg_campaign_4.png'); }
#campaign #info.vol5 { height:1031px; background-image:url('../img/bg_campaign_5.png'); }

#campaign .item table td ul { margin:0 0 0 8px; }
#campaign .item table td ul li { margin:0 0 0 8px; padding:0 0 0 0; text-indent:-8px; }
/*#campaign .item table td ul li::marker { content:'◆'; margin:0 0.5em 0 0; color:#978a49; vertical-align:middle; font-size:10px; line-height:16px; display:inline-block; }*/
#campaign .item table td ul li::before { content:'◆'; margin:0 0.5em 0 0; color:#978a49;  vertical-align:middle; font-size:10px; display:inline-block; }
#campaign .item table td ul li strong { font-weight:bold; }

#campaign a { color:#0064b3; }
#campaign a:hover { text-decoration:underline; }

#campaign #vol2.item p.text { margin-bottom:30px; }
#campaign #vol2.item p.img { margin-bottom:20px; }


/* .switch */
.switch { margin:auto; padding:0; max-width:935px; display:flex; justify-content:space-between; }
.switch li { width:180px; height:75px; background:no-repeat center; position:relative; top:-35px; }
.switch li.active img { display:none; }

.switch li.vol1 { background-image:url('../img/btn_campaign_vol1_on.png'); }
.switch li.vol2 { background-image:url('../img/btn_campaign_vol2_on.png'); }
.switch li.vol3 { background-image:url('../img/btn_campaign_vol3_on.png'); }
.switch li.vol4 { background-image:url('../img/btn_campaign_vol4_on.png'); }
.switch li.vol5 { background-image:url('../img/btn_campaign_vol5_on.png'); }

/* ============ smart phone ============ */
@media screen and (max-width:750px){
#campaign { padding:0 0 calc(225/750*100vw); }

#campaign h2 { margin:auto auto calc(65/750*100vw); width:calc(310/750*100vw); height:calc(176/750*100vw); background-size:100% auto; }

#campaign h3 { margin:auto auto 0; width:calc(649/750*100vw); height:calc(52/750*100vw); background-size:100% auto; }

#campaign p.img {  }
#campaign p.img:first-of-type { margin:0 auto calc(50/750*100vw); width:calc(650/750*100vw); }
#campaign p.img img { width:100%; }

/* ul.img */
#campaign ul.img { margin:auto auto calc(43/750*100vw); padding:calc(14/750*100vw) calc(7/750*100vw) calc(11/750*100vw); width:calc(650/750*100vw); }
#campaign ul.img li { width:calc(123/750*100vw); }

#campaign .info { margin:auto; width:auto; max-width:initial; height:auto; background-image:none; }

#campaign .wrapper { margin:auto; padding:calc(55/750*100vw) 0; width:calc(650/750*100vw); background-size:100% auto; }

/* .switch */
.switch { margin:0 auto calc(50/750*100vw); max-width:initial; width:calc(578/750*100vw); height:calc(167/750*100vw); flex-wrap:wrap; justify-content:center; }
.switch li { margin-right:calc(19/750*100vw); width:calc(180/750*100vw); height:calc(75/750*100vw); background-size:100% auto;position:static; }
.switch li:nth-child(3n) { margin-right:0; }
.switch li:last-child { margin-right:0; }
.switch li img { width:100%; height:auto; }

/* .item */
#campaign .item { padding:0 calc(50/750*100vw); }
#campaign .item p.img { margin-bottom:calc(40/750*100vw); width:100%; }
#campaign .item p.img img { width:100%; height:auto; }


/* ====== #click-here ====== */
#click-here { margin:auto auto calc(60/750*100vw); width:calc(650/750*100vw); display:flex; flex-direction:column; justify-content:center; align-items:center; }
#campaign h3#h3-campaign-2 { margin:0 0 calc(20/750*100vw) 0; width:auto; height:auto; background-image:none; color:#0058b3; font-weight:bold; font-family:serif; font-size:calc(32/750*100vw); }
#campaign h3#h3-campaign-2 span.dp-none { display:inline; }


#campaign .item h4 { margin-bottom:calc(35/750*100vw); padding:0 0 calc(25/750*100vw); line-height:calc(42/30); font-size:calc(30/750*100vw); }
#campaign .item p.text { margin-bottom:calc(60/750*100vw); line-height:calc(38/22); font-size:calc(20/750*100vw); }

#campaign .item h5 { margin-bottom:calc(25/750*100vw); line-height:calc(28/24); font-size:calc(24/750*100vw); }
#campaign .item h5::before { font-size:calc(22/750*100vw); }

/* .item table */
#campaign .item table { border-top:0; }
#campaign .item table th { padding:calc(15/750*100vw); width:100%; border-top:1px solid #cbc4a3; font-size:calc(24/750*100vw); display:block; }
#campaign .item table td { padding:calc(15/750*100vw); display:block; font-size:calc(24/750*100vw); }
#campaign .item table td small { font-size:calc(20/750*100vw); }

#campaign .item table td ul li::before { color:#0058b3; }

#campaign #info.vol1 .wrapper { height:calc(1372/750*100vw); background-image:url('../img/bg_campaign_1_sp.png'); }
#campaign #info.vol2 .wrapper { height:calc(1770/750*100vw); background-image:url('../img/bg_campaign_2_sp.png'); }
#campaign #info.vol3 .wrapper { height:calc(1439/750*100vw); background-image:url('../img/bg_campaign_3_sp.png'); }
#campaign #info.vol4 .wrapper { height:calc(1277/750*100vw); background-image:url('../img/bg_campaign_4_sp.png'); }
#campaign #info.vol5 .wrapper { height:calc(1430/750*100vw); background-image:url('../img/bg_campaign_5_sp.png'); }

#campaign #info.vol1 { height:auto; background-image:none; }
#campaign #info.vol2 { height:auto; background-image:none; }
#campaign #info.vol3 { height:auto; background-image:none; }
#campaign #info.vol4 { height:auto; background-image:none; }
#campaign #info.vol5 { height:auto; background-image:none; }



}
/************************************************************************
  #artist
************************************************************************/
#artist { padding-bottom:180px; }

#artist h2 { margin:auto auto 60px; width:354px; height:120px; background-image:url('../img/h2_artist.png'); }

#artist h3 { margin-bottom:40px; text-align:center; line-height:1; font-family:serif; font-weight:bold; font-size:34px; }
#artist h3 span { font-size:24px; }
#artist h3 small { margin-bottom:20px; color:#0058b3; display:block; font-size:18px; }

/* .info */
#artist .info { display:flex; justify-content:space-between; font-weight:bold; }
#artist .info p.img {  }
#artist .info p.text { width:480px; line-height:1.7142; font-size:14px; }

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

#artist { padding-bottom:calc(160/750*100vw); }

#artist h2 { margin:auto auto calc(50/750*100vw); width:calc(366/750*100vw); height:calc(124/750*100vw); background-size:100% auto; }

#artist h3 { margin-bottom:calc(35/750*100vw); font-size:calc(42/750*100vw); }
#artist h3 span { font-size:calc(32/750*100vw); }
#artist h3 small { margin-bottom:calc(25/750*100vw); font-size:calc(20/750*100vw); }

/* .info */
#artist .info { justify-content:center; flex-direction:column; }
#artist .info p.img { margin:auto auto calc(50/750*100vw); width:calc(475/750*100vw); }
#artist .info p.img img { width:100%; }
#artist .info p.text { margin:auto; width:calc(650/750*100vw); line-height:1.7142; font-size:14px; }
}


/************************************************************************
  #banner
************************************************************************/
#banner { padding:0 0 180px; text-align:center; }

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

#banner { padding:0 0 calc(173/750*100vw); }
#banner img { margin:auto; width:calc(600/750*100vw); }

}
/************************************************************************
  #footer
************************************************************************/
#footer { height:330px; background-color:#e7ebef; }
#footer .contents { position:relative; display:flex;  justify-content:flex-end; align-items:center; }

#footer .img { position:absolute; bottom:0; left:-170px; }

/* .dl-btn */
.dl-btn { padding:30px; width:393px; height:193px; background-color:rgba(255,255,255,0.8); border-radius:8px; border:1px solid #ffffff; position:relative;  }
.dl-btn ul { height:100%; display:flex; align-items:center; position:relative; }
.dl-btn ul li.btn-app-store { width:181px; position:absolute; left:152px; top:0; cursor:pointer; z-index:100 }
.dl-btn ul li.btn-app-store img { width:100%; }
.dl-btn ul li.btn-google-play { width:181px; position:absolute; left:152px; bottom:0;  }
.dl-btn ul li.btn-google-play img { width:100%; }

.dl-btn ul li.btn-app-store:hover { cursor:pointer; }
.dl-btn ul li.btn-google-play:hover { cursor:pointer; }


.dl-btn ul li a { width:100%; height:100%; display:block; cursor:pointer !important; }
.dl-btn ul li a:hover { cursor:pointer !important; }

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

#footer { height:calc(588/750*100vw); }
#footer .img { margin:auto; bottom:calc(304/750*100vw); left:0; right:0; }
#footer .img img { width:100%; height:auto; }

/* .dl-btn */
.dl-btn { margin:auto; padding:calc(45/750*100vw); width:calc(650/750*100vw); height:auto; position:absolute; top:calc(220/750*100vw); right:0; left:0; }

.dl-btn ul li.game-icon { width:calc(220/750*100vw); }
.dl-btn ul li.game-icon img { width:100%; height:auto; }

.dl-btn ul li.btn-app-store { width:calc(300/750*100vw); height:calc(104/750*100vw); background:url('../img/btn_app_store_sp.png') no-repeat center; background-size:100% auto; left:calc(253/750*100vw); }
.dl-btn ul li.btn-app-store img { display:none; }

.dl-btn ul li.btn-google-play { width:calc(300/750*100vw); height:calc(95/750*100vw); background:url('../img/btn_google_play_sp.png') no-repeat center; background-size:100% auto; left:calc(253/750*100vw); }
.dl-btn ul li.btn-google-play img { display:none; }


}
/************************************************************************
  #scrollUp
************************************************************************/
#scrollUp { margin-bottom:-10px; padding:10px 5px; width:113px; height:113px; background:url('../img/toTop.png') no-repeat right center; background-size:113px; bottom:30px; right:30px; transition:margin-bottom 150ms linear; }

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

#scrollUp { display:none !important; }

}
/************************************************************************
  footer
************************************************************************/
footer { padding:40px 0 30px; background-color:#0058b3; color:#ffffff; text-align:center; font-size:14px; }

footer nav ul { margin-bottom:20px; display:flex; justify-content:center; }
footer nav ul li { line-height:1; }
footer nav ul li::after { content:'|'; margin:0 0.5em; }
footer nav ul li:last-child::after { display:none; }

footer a {  }
footer a:hover { color:#ffffff; text-decoration:underline; }

p.copyright { line-height:calc(18/12); }

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

footer { padding:calc(35/750*100vw) 0 calc(25/750*100vw); height:auto; font-size:calc(24/750*100vw); }

footer nav ul { flex-direction:column; }
footer nav ul li { margin-bottom:1em; }
footer nav ul li::after { display:none; }
}
/************************************************************************
  #layer_board_area
************************************************************************/
#layer_board_area {  }
#layer_board_area p.text { margin-bottom:40px; color:#ffffff; text-align:center; font-family:serif; font-size:18px; }

.layer_board_bg { opacity:0.8 !important; }

.layer_board { margin:auto !important; width:440px; height:325px; display:flex; justify-content:center; align-items:center; top:0; bottom:0; left:0 !important; right:0; }
.layer_board .box {  }

#layer_board_area #logo { margin-bottom:80px; }
#layer_board_area #onoff { margin:auto; width:160px; height:48px; background:url('../img/onoff.png') no-repeat; position:relative; }

#layer_board_area button { width:50px; height:30px; font-size:0; position:absolute; /* background-color:rgba(255,0,0,0.5);*/ top:10px; }
#layer_board_area button.on { left:20px; }
#layer_board_area button.off { right:20px; }

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

#layer_board_area { display:flex; justify-content:center; align-items:center; }

#layer_board_area #logo { margin:auto auto calc(40/750*100vw); width:100%; }
#layer_board_area #logo img { width:70%; max-width:433px; height:auto; }

#layer_board_area p.text { width:auto; line-height:1.5; font-size:calc(18/750*100vw); }

.layer_board { margin:auto !important; width:auto; height:calc(320/750*100vw); top:0; bottom:0; left:0 !important; right:0; display:block }
.layer_board .box {  }



}