@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; }
}

/************************************************************************
  gothic
************************************************************************/
.yu-min { font-family:"游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif; }
/************************************************************************
  body
************************************************************************/
body { background-color:#000f1f; line-height:1; font-size:0; }

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

a { color:#b29a3e; }
a:hover { cursor:pointer !important; }
.mb60 { margin-bottom:60px !important; }

a.pe-none { pointer-events:none; }

.flex { display:flex; }

hr { display:none; }

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

.mb60 { margin-bottom:calc(60px * 0.7) !important; }
}
/************************************************************************
  header
************************************************************************/
header { margin-bottom:0; height:751px; background:url('../img/main_image.png') no-repeat top center transparent; background-size:auto 100%; font-size:0; }
header .contents { position:relative; }
header h1 { width:460px; height:275px; background:url('../img/logo.png') no-repeat; position:absolute; top:307px; left:270px; }

/* #btn-off */
#btn-off { width:159px; height:136px; background:url('../img/btn_off.png') no-repeat; font-size:0; position:absolute; top:570px; left:416px; }
#btn-off:hover { background-image:url('../img/btn_on.png'); }

/* #update */
#update { display:none; }

/* animation */
h1.main-logo { -webkit-animation: 0.5s forwards ease-in :slideLeft; animation: 0.5s forwards ease-in :slideLeft; animation-delay: 0.5s; }
.logo { -webkit-animation: 0.5s forwards ease-in :slideLeft; animation: 0.5s forwards ease-in :slideLeft; animation-delay: 0.5s; }

.light { margin:auto; top:325px; left:160px; }
.lightEffect { -webkit-animation: 1.6s ease-in-out light; animation: 1.6s ease-in-out light; animation-delay: 1.4s; }

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

header { margin-bottom:calc(20/750*100vw); padding-top:0; height:calc(919/750*100vw); background:url('../img/main_image_sp.png') no-repeat; background-size:100% auto; }
header h1 { margin:auto; width:calc(480/750*100vw); height:calc(287/750*100vw); background-size:100% auto; top:calc(350/750*100vw); right:0; left:0; }

header::before { display:none; }

/* #update */
#update { width:calc(731/750*100vw); position:absolute; bottom:0; display:block; }
#update img { width:100%; }

#btn-off { display:none; }

/* animation */
.light { width:calc((600/750*100vw) / 3); height:calc((588/750*100vw) / 3); top:calc(390/750*100vw); left:0; }
}
/************************************************************************
  #movie
************************************************************************/
#movie { display:none; }

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

#movie { margin:auto; width:calc((374/750*100vw) /2); height:calc((225/750*100vw)/2);  display:block; position:absolute; top:calc(673/750*100vw); right:0; left:0; }
#movie a { width:100%; height:100%; background:url('../img/movie_sp.png') no-repeat; background-size:100% auto; display:block; }

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

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

#bg {  }
#bg-fix { background-image:none; }

}
/************************************************************************
  #menu
************************************************************************/
#menu { padding:15px 0; width:100%; background-color:#000000; border-bottom:1px solid #4a4734; position:relative; }

#menu ul { display:flex; }
#menu ul li {  }
#menu ul li a { width:202px; height:92px; background-repeat:no-repeat; display:block; }
#menu ul li a:hover img { display:none; }

#menu ul li.nav-introduction a { background-image:url('../img/nav_introduction_on.png'); }
#menu ul li.nav-character a { background-image:url('../img/nav_character_on.png'); }
#menu ul li.nav-new-system a { background-image:url('../img/nav_new_system_on.png'); }
#menu ul li.nav-field a { background-image:url('../img/nav_field_on.png'); }
#menu ul li.nav-update-info a { background-image:url('../img/nav_update_info_on.png'); }

#menu.fixed-header { position:fixed; top:0; left:0; z-index:500; }

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

#menu { display:none; }

}
/************************************************************************
  #download
************************************************************************/
#download { display:none; }

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

#download { display:block; }
#download ul { margin:auto; width:calc(600/750*100vw); display:flex; justify-content:space-between; }
#download ul li { width:calc(288/750*100vw); }
#download ul li img { width:100%; }


}
/************************************************************************
  main
************************************************************************/
main { margin:auto auto 0; }

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

}
/************************************************************************
  .contents
************************************************************************/
.contents { margin:auto; width:1000px; height:100%; }

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

.contents { width:100%; }

}
/************************************************************************
  .column
************************************************************************/
.column {  }

.column h2 { margin:auto auto 70px; text-align:center; }
.column h2 img { width:100%; }
.column h3 { margin:auto auto 50px; text-align:center; }
.column h3 img { width:100%; }

.column p { text-align:center; line-height:1.7894; font-size:18px; }
.column p small { font-size:16px; }
.column a { color:#b29a3e; font-weight:bold; }
.column strong { font-weight:bold; }

.column p.txt {
text-shadow:0 0 2px #000000,0 0 2px #000000,0 0 2px #000000,0 0 2px #000000,0 0 2px #000000,0 0 2px #000000,0 0 3px #000000,0 0 2px #000000,0 0 2px #000000,0 0 2px #000000,0 0 2px #000000,0 0 2px #000000,0 0 2px #000000,0 0 2px #000000,0 0 2px #000000,0 0 2px #000000;
}

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

.column {  }
.column p { margin-right:auto; margin-left:auto; line-height:calc(36/22); font-size:calc(24/750*100vw); }

}
/************************************************************************
  #introduction
************************************************************************/
#introduction { padding:120px 0 530px; background:url('../img/bg_introduction.png') no-repeat center bottom; }

#introduction h2 { width:calc(1214px /2); }
#introduction h3 { width:calc(1618px /2); }

#introduction p { margin-bottom:1.5em; line-height:calc(38.42 / 20.17); font-family:"ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif; font-size:20px; }

#introduction p.txt {  }
#introduction p.txt img { width:calc(1594px / 2); }

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

#introduction { padding:calc(130/750*100vw) 0 calc(472/750*100vw); background-image:url('../img/bg_introduction_sp.png'); background-size:100% auto; }

#introduction h2 { margin-bottom:calc(75/750*100vw); width:calc(607/750*100vw); }
#introduction h3 { margin-bottom:calc(55/750*100vw); width:calc(713/750*100vw); }

#introduction p.txt img { width:calc((1262 / 2)/750*100vw); }

}
/************************************************************************
  #character
************************************************************************/
#character { margin:0 0 -239px; padding:140px 0 0; height:2209px; background:url('../img/bg_character.png') no-repeat top center; }
#character h2 { margin:0 auto; width:calc(1214px /2); }

#character .character { position:relative; box-sizing:border-box; }

#character h3 { background-repeat:no-repeat; background-size:100% auto; position:absolute; }
#character p.text { margin:0; background-repeat:no-repeat; background-size:100% auto; font-size:0; position:absolute; }
#character .chara-cv { background-repeat:no-repeat; background-size:100% auto; position:absolute; }
#character .chara-cv:hover { cursor:pointer; }

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

#character { margin-bottom:0; padding-top:calc(107/750*100vw); height:calc(1630/750*100vw); background-image:url('../img/bg_character_sp.png'); background-size:100% auto; }

#character h2 { width:calc(607/750*100vw); }

#character .character {  }

}
/************************************************************************
  #nekoko
************************************************************************/
#nekoko { height:841px; }
#nekoko h3 { width:calc(790px / 2); height:calc(324px / 2); background-image:url('../img/nekoko_h3.png'); top:421px; left:450px; }
#nekoko .text { width:calc(1054px / 2); height:calc(356px / 2); background-image:url('../img/nekoko_text.png'); top:212px; left:464px; }
#character .chara-cv { width:calc(320px / 2); height:calc(100px / 2); background-image:url('../img/nekoko_cv.png'); top:562px; left:472px; }

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

#nekoko { height:calc(680/750*100vw); }

#nekoko h3 { width:calc(424/750*100vw); height:calc(143/750*100vw); background-image:url('../img/nekoko_h3_sp.png'); top:calc(358/750*100vw); left:calc(310/750*100vw); }
#nekoko .text { width:calc(424/750*100vw); height:calc(159/750*100vw); background-image:url('../img/nekoko_text_sp.png'); top:calc(156/750*100vw); left:calc(310/750*100vw); }
#nekoko .chara-cv { width:calc(172/750*100vw); height:calc(49/750*100vw); top:calc(485/750*100vw); left:calc(330/750*100vw); }

}
/************************************************************************
  #garambarrel
************************************************************************/
#garambarrel { height:820px; }
#garambarrel h3 { width:calc(874px / 2); height:calc(228px / 2); background-image:url('../img/garambarrel_h3.png'); top:309px; left:-6px; }
#garambarrel .text { width:calc(1134px / 2); height:calc(362px / 2); background-image:url('../img/garambarrel_text.png'); top:72px; left:-16px; }
#garambarrel .chara-cv { width:calc(362px / 2); height:calc(100px / 2); background-image:url('../img/garambarrel_cv.png'); top:425px; left:-6px; }

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

#garambarrel { height:calc(685/750*100vw); }

#garambarrel h3 { width:calc(459/750*100vw); height:calc(144/750*100vw); top:calc(274/750*100vw); left:0; }
#garambarrel .text { width:calc(462/750*100vw); height:calc(159/750*100vw); top:calc(82/750*100vw); left:calc(12/750*100vw); }
#garambarrel .chara-cv { width:calc(196/750*100vw); height:calc(49/750*100vw); top:calc(401/750*100vw); left:calc(25/750*100vw); }

}
/************************************************************************
  #new-system
************************************************************************/
#new-system { padding:150px 0 0; position:relative; top:-150px; }

#new-system h2 { margin-bottom:50px; width:calc(1214px /2); }
#new-system h3 { width:calc(544px /2); }

#new-system p.txt { padding:20px 0 65px; background:url('../img/bg_new_system.png') no-repeat top center; }
#new-system p.txt img { width:calc(1247px /2); }

/* #slider */
#slider { margin:auto auto 50px; width:779px; }
.slick-dots li.slick-active button { background-color:#ffffff; }
.slick-arrow { font-size:0; opacity:0.5; top:45%; }
.slick-arrow::before { font-size:0; }
.slick-arrow:hover { opacity:1; }

.slick-prev { left:-65px; }

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

#new-system { padding-top:0; position:static; }

#new-system h2 { margin-bottom:calc(45/750*100vw); width:calc(607/750*100vw); }
#new-system h3 { margin-bottom:calc(40/750*100vw); width:calc(266/750*100vw); }

#new-system p.txt { padding:calc(30/750*100vw) 0 calc(40/750*100vw); width:calc(617/750*100vw); height:calc(221/750*100vw); background-image:url('../img/bg_new_system_sp.png'); background-size:100% auto; line-height:calc(40/24); }

#new-system p.txt img { width:calc((832 / 2)/750*100vw); }

/* #slider */
#slider { margin:auto auto calc(100/750*100vw); width:calc(650/750*100vw); }
#slider img { width:100%; }

}
/************************************************************************
  #field
************************************************************************/
#field { padding:140px 0 0; }

#field h2 { margin-bottom:50px; width:calc(1214px /2); }

#field p { margin-bottom:40px; }
#field p.text img { width:calc(512px /2); }

/* ul.graphic-list */
#field ul.graphic-list { margin:auto; width:779px; display:flex; flex-wrap:wrap; }
#field ul.graphic-list li { width:386px; }
#field ul.graphic-list li img { width:100%; }

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

#field { padding:calc(165/750*100vw) 0 0; }

#field h2 { margin-bottom:calc(50/750*100vw); width:calc(607/750*100vw); }
#field p { margin-bottom:calc(40/750*100vw); }

#field p.text img { width:calc(347/750*100vw); }

#field ul.graphic-list { width:calc(702/750*100vw); }
#field ul.graphic-list li { width:calc(349/750*100vw); }

}
/************************************************************************
  #update-info
************************************************************************/
#update-info { padding:140px 0 130px; }
#update-info .contents { width:1012px; }

#update-info h2 { margin-bottom:50px; width:calc(1214px /2); }
#update-info h3 { margin:0; width:309px; height:47px; background:url('../img/h3_update_info.png') no-repeat; color:#dcdacb; font-size:16px; display:flex; justify-content:center; align-items:center; }
#update-info h4 { margin-bottom:1em; font-size:16px; }

/* .box */
#update-info .box { padding:30px 70px 50px; background:url('../img/bg_update_info.png') repeat-y; position:relative; top:40px; }
#update-info .box::before { content:''; width:100%; height:40px; background:url('../img/bg_update_info_top.png') no-repeat; display:block; position:absolute; top:-40px; left:0; }
#update-info .box::after { content:''; width:100%; height:40px; background:url('../img/bg_update_info_bottom.png') no-repeat; display:block; position:absolute; bottom:-40px; left:0; }

/* .flex */
#update-info .flex { width:100%; justify-content:space-between; }

/* .info */
#update-info .info { margin:0; width:500px; }

/* #update-info ul */
#update-info ul { margin:0 0 30px; padding:15px 0 0; }
#update-info ul:last-child { margin-bottom:0; }
#update-info ul li { margin-bottom:1em; font-size:16px; }
#update-info ul li:last-child { margin-bottom:0; }
#update-info ul li::before { content:''; margin:0 10px 0 0; width:15px; height:15px; background:url('../img/icon_update_info.png') no-repeat; background-size:100% auto; display:inline-block; }
#update-info ul li strong { color:#aea387; font-weight:normal; }

/* hr.line */
hr.line { margin:40px 0 ; height:1px; background:url('../img/line.png'); border:0; display:block; }

/* ============ smart phone ============ */
@media screen and (max-width:750px){
#update-info { padding:calc(150/750*100vw) 0 calc(150/750*100vw); }
#update-info .contents { width:100%; }

#update-info h2 { margin-bottom:calc(55/750*100vw); width:calc(607/750*100vw); }
#update-info h3 { margin-bottom:calc(40/750*100vw); width:calc(698/750*100vw); height:calc(69/750*100vw); background-image:url('../img/h3_update_info_sp.png'); background-size:100% auto; letter-spacing:0.2em; font-size:calc(30/750*100vw); }
#update-info h4 { margin-bottom:calc(20/750*100vw); font-size:calc(24/750*100vw); }

/* .box */
#update-info .box { margin:auto; padding:0; width:calc(698/750*100vw); background-image:none; position:static; }
#update-info .box::before { display:none; }
#update-info .box::after { display:none; }

/* .flex */
#update-info .flex { margin-bottom:calc(50/750*100vw); width:100%; flex-direction:column; }
#update-info .flex:last-child { margin-bottom:0; } 

/* .info */
#update-info .info { width:100%; }

/* #update-info ul */
#update-info ul { margin:0 0 30px; padding:0; }
#update-info ul:last-child { margin-bottom:0; }
#update-info ul li { margin-bottom:1em; font-size:calc(24/750*100vw); }
#update-info ul li::before { margin-right:calc(20/750*100vw); width:calc(22/750:100vw); height:calc(22/750:100vw); vertical-align:middle; }
/* hr.line */
hr.line { display:none; }

}
/************************************************************************
  #banner
************************************************************************/
#banner { padding:0 0 150px; }

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

#banner { padding:0 0 calc(150/750*100vw); }
#banner p a img { /*width:calc(711/750*100vw);*/ width:80%; }

}
/************************************************************************
  .pagetop
************************************************************************/
.pagetop { width:104px; 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 { display:none !important; }

}
/************************************************************************
  footer
************************************************************************/
footer { padding:40px 0 30px; background-color:#000306; color:#999999; border-top:solid 1px #292f32; text-align:center; font-size:12px; box-sizing:border-box; }

footer .contents {  }

footer nav ul { margin-bottom:10px; 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 { color:#999999; }
footer a:visited { color:#999999; }
footer a:hover { color:#ffffff; text-decoration:underline; }

footer p img { margin-bottom:20px; }
p.copyright { line-height:calc(18/12); }

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

footer { padding:calc(70/750*100vw) 0 calc(50/750*100vw); font-size:calc(24/750*100vw); }
footer .contents { width:auto; flex-direction:column; }

footer nav ul { margin-bottom:calc(30/750*100vw); flex-direction:column; justify-content:center; }
footer nav ul li { margin-bottom:1em; text-align:center; }
footer nav ul li::after { display:none; }

footer nav#SNS ul { flex-direction:row; }
footer nav#SNS ul li { margin-right:calc(40/750*100vw); }
footer nav#SNS ul li:last-child { margin-right:0; }

p.copyright { margin-bottom:calc(50/750*100vw); text-align:center; }
}

/************************************************************************
  #layer_board_area
************************************************************************/
#layer_board_area {  }

#layer_board_area .layer_board { margin:auto; width:100%; max-width:964px; max-height:542.25px; position:absolute; top:0; bottom:0; right:0; left:0; }
#layer_board_area .layer_board iframe { width:100%; height:100%; }

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

#layer_board_area .layer_board { width:calc(700/750*100vw); height:calc((700*0.5624)/750*100vw); }

}