@charset "UTF-8";
html { width: 100% }
body {
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;
    height: 100%;
    width: 100%;
    line-height: 1.3em;
    background-color: #000!important;
    position: relative
}

@media (min-width:427px) {
body { font-size: 18px }
}

@media (max-width:426px) {
body { font-size: 16px }
}
body.modal-Open_notsc {
    overflow: hidden;
    height: 1000px;
    overflow-y: scroll
}

@media (max-width:426px) {
body img { max-width: 100% }
}

@media (min-width:427px) {
.pc { display: block }
}

@media (max-width:426px) {
.pc { display: none }
}

@media (min-width:427px) {
.sp { display: none }
}

@media (max-width:426px) {
.sp { display: block }
}

@media (min-width:427px) {
a {
    -webkit-transition: all .3s 0s ease;
    transition: all .3s 0s ease
}
a:hover { opacity: .8 }
}
h2 { text-align: center }
.contents {
    width: 100%;
    height: 100%;
    position: relative
}

@media (min-width:427px) {
.contents {
    padding: 20px 40px 40px;
    min-width: 1300px;
    min-height: 100vh
}
}

.fixed {
    position: fixed;
    width: 100%;
    height: 100%
}
.bgi_fixed {
    width: 100vw;
    height: 100%;
    top: 0;
    position: fixed
}

@media (min-width:427px) {
.bgi_fixed {
    background-size: cover;
    background-position: top center;
    -webkit-box-sizing: content-box;
    box-sizing: content-box
}
}

@media (max-width:426px) {
.bgi_fixed {
    background-size: 100% auto;
    background-size: 900px;
    background-position: top center
}
}
.tabw .bgi_fixed { min-height: auto }

@media (min-width:427px) {
.mainarea {
    width: 1030px;
    /* margin-left: 24%; */
    margin-left: 16%;
    padding-top: 80px;
    padding-bottom: 200px
}
}

@media (max-width:426px) {
.mainarea { padding-top: 80px }
}

@media (min-width:427px) {
.modal { cursor: pointer }
}

@media (min-width:427px) and (min-width:427px) {
.modal {
    -webkit-transition: all .3s 0s ease;
    transition: all .3s 0s ease
}
.modal:hover { opacity: .8 }
}
.pager {
    margin: auto;
    overflow: hidden
}

@media (min-width:427px) {
.pager {
    margin-top: 60px;
    width: 400px
}
}

@media (max-width:426px) {
.pager {
    margin-top: 30px;
    width: 320px;
    height: 100px;
}
}
.pager li { float: left }

@media (max-width:426px) {
.pager li { height: 25px }
}

@media (max-width:426px) {
.pager .prev { width: 68px }
}

@media (max-width:426px) {
.pager .next { width: 66px }
}
.navigation { display: none }
#infscr-loading { display: none!important }
abbr, address, article, aside, audio, b, blockquote, body, caption, cite, code, dd, del, dfn, dialog, div, dl, dt, em, fieldset, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, p, pre, q, samp, section, small, span, strong, sub, sup, table, tbody, td, tfoot, th, thead, time, tr, ul, var, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    vertical-align: baseline;
    background: 0 0;
    background-repeat: no-repeat;
    font-weight: 400
}
body { line-height: 1em }
article, aside, dialog, figure, footer, header, hgroup, nav, section { display: block }
nav ul { list-style: none }
blockquote, q { quotes: none }
blockquote:after, blockquote:before, q:after, q:before {
    content: '';
    content: none
}
a {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: 0 0;
    text-decoration: none
}
ins {
    background-color: #ff9;
    color: #000;
    text-decoration: none
}
mark {
    background-color: #ff9;
    color: #000;
    font-style: italic;
    font-weight: 700
}
del { text-decoration: line-through }
abbr[title], dfn[title] {
    border-bottom: 1px dotted #000;
    cursor: help
}
table {
    border-collapse: collapse;
    border-spacing: 0
}
hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0
}
input, select {
    vertical-align: middle;
    border-radius: 0
}
::-moz-selection {
background:rgba(255,255,255,0)
}
::selection { background: rgba(255,255,255,0) }
:focus { outline: 0 }
a, button {
    outline: 0;
    border: none;
    cursor: pointer
}
a:hover, button:hover { outline: 0 }
a:disabled, button:disabled, input:disabled { pointer-events: none }
*, :after, :before {
    margin: 0;
    padding: 0;
    list-style: none;
    background-repeat: no-repeat;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    vertical-align: inherit;
    vertical-align: bottom
}
em, i { font-style: normal }

/*
@media (min-width:427px) {
.character_bgi {
    background-image: url(../image/HP_PC_character_bg.png);
    width: 100vw;
    height: 100%;
    top: 0;
    position: fixed
}
}

@media (max-width:426px) {
.character_bgi {
    background-image: url(../image/HP_SP_character_bg.png);
    width: 100vw;
    height: 100%;
    top: 0;
    position: fixed
}
}
*/

@media (min-width:427px) {
#character h2 { margin-bottom: 70px }
}

@media (max-width:426px) {
#character h2 { margin-bottom: 20px }
}

@media (min-width:427px) {
#character .mainarea { padding-bottom: 30px }
}
#character .chara_list {
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    overflow: hidden;
    margin: auto
}

@media (min-width:427px) {
#character .chara_list {
    width: 940px;
    height: 2550px;
}
}

@media (max-width:426px) {
#character .chara_list { width: 310px }
}
#character .chara_list li {
    float: left;
    position: relative;
    opacity: 0;
    -webkit-transform: translateY(100px);
    -ms-transform: translateY(100px);
    transform: translateY(100px)
}

@media (min-width:427px) {
#character .chara_list li {
    height: 262px;
    margin-right: 20px;
    margin-bottom: 20px
}
}

@media (max-width:426px) {
#character .chara_list li {
    width: 100px;
    height: 156px;
    margin-right: 5px!important;
    margin-bottom: 20px!important
}
}
#character .chara_list li a { opacity: 1 }

@media (min-width:427px) {
#character .chara_list li img { width: 172px }
}

@media (min-width:427px) {
#character .chara_list li:nth-child(5n) { margin-right: 0 }
#character .chara_list li:nth-child(n+40) { margin-bottom: 0 }
}

@media (max-width:426px) {
#character .chara_list li:nth-child(3n) { margin-right: 0!important }
#character .chara_list li:nth-child(n+43) { margin-bottom: 0!important }
}

#character .chara_list li.fadeIn01 {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    cursor: pointer;
    -webkit-transition: all 1.5s .2s ease;
    transition: all 1.5s .2s ease
}
#character .chara_list li.fadeIn02 {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    cursor: pointer;
    -webkit-transition: all 1.5s .4s ease;
    transition: all 1.5s .4s ease
}
#character .chara_list li.fadeIn03 {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    cursor: pointer;
    -webkit-transition: all 1.5s .6s ease;
    transition: all 1.5s .6s ease
}
#character .chara_list li.fadeIn04 {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    cursor: pointer;
    -webkit-transition: all 1.5s .8s ease;
    transition: all 1.5s .8s ease
}
#character .chara_list li.fadeIn05 {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    cursor: pointer;
    -webkit-transition: all 1.5s 1s ease;
    transition: all 1.5s 1s ease
}
#character .chara_list li.fadeIn06 {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    cursor: pointer;
    -webkit-transition: all 1.5s 1.2s ease;
    transition: all 1.5s 1.2s ease
}
#character .chara_list li.fadeIn07 {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    cursor: pointer;
    -webkit-transition: all 1.5s 1.4s ease;
    transition: all 1.5s 1.4s ease
}
#character .chara_list li.fadeIn08 {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    cursor: pointer;
    -webkit-transition: all 1.5s 1.6s ease;
    transition: all 1.5s 1.6s ease
}
#character .chara_list li.fadeIn09 {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    cursor: pointer;
    -webkit-transition: all 1.5s 1.8s ease;
    transition: all 1.5s 1.8s ease
}
#character .chara_list li.fadeIn010 {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    cursor: pointer;
    -webkit-transition: all 1.5s 2s ease;
    transition: all 1.5s 2s ease
}

#character .chara_list li.cv:after {
    content: "";
    position: absolute;
    display: block;
    background-image: url(../img/character_btVoice.png);
    background-size: cover
}

@media (min-width:427px) {
#character .chara_list li.cv:after {
    width: 40px;
    height: 40px;
    right: 10px;
    bottom: 60px
}
}

@media (max-width:426px) {
#character .chara_list li.cv:after {
    width: 25px;
    height: 25px;
    right: 5px;
    bottom: 37px
}
}

@media (min-width:427px) {
#character .chara_list li.cv:after {
    -webkit-transition: all .3s 0s ease;
    transition: all .3s 0s ease
}
#character .chara_list li.cv:after:hover {
opacity:.8
}
}

.chara-frame_sp {
    width: 310px;
    margin: auto
}
.chara-frame_sp a { display: block }
.chara-frame_sp .chara_cv {
    width: 50%;
    margin: auto;
    margin-top: 20px
}

@media (max-width:426px) {
#character_detail h2 { margin-bottom: 20px }
}
#character_detail .pager { margin-top: 40px }
#character_detail .pager .top {
    width: 139px;
    margin: 0 22px
}
#character_detail .pager .top img { padding-top: 5px }
#character_detail .pager .next img { padding-top: 1px }

@media (min-width:427px) {
.download_bgi { background-image: url(../img/download_bgi.jpg) }
}

@media (max-width:426px) {
.download_bgi { background-image: url(../img/download_bgi_sp.png) }
}

@media (min-width:427px) {
#download h2 { margin-bottom: 70px }
}

@media (max-width:426px) {
#download h2 { margin-bottom: 20px }
}

@media (min-width:427px) {
#download .mainarea { padding-bottom: 30px }
}
#download .download_wrap {
    margin: auto;
    overflow: hidden;
  display: flex;
  justify-content: space-between;
flex-wrap: wrap;
}

@media (min-width:427px) {
#download .download_wrap { width: 950px }
}

@media (max-width:426px) {
#download .download_wrap { width: 320px }
}
#download .download_wrap ul {
    float: left;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: contain
}

@media (min-width:427px) {
#download .download_wrap ul {
    width: 450px;
    height: 308px;
    font-size: 15px;
    padding-top: 286px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  margin: 0 0 45px 0;
}
}
@media (max-width:426px) {
  #download .download_wrap ul {
  margin-bottom: 30px;
}
}
@media (min-width:427px) {
#download .download_wrap ul:nth-last-child(2),
#download .download_wrap ul:last-child{
 margin-bottom: 0!important;
  }
}
@media (max-width:426px) {
#download .download_wrap ul:nth-last-child(2),
#download .download_wrap ul:last-child{
 margin-bottom: 0!important;
  }
}

@media (max-width:426px) {
#download .download_wrap ul {
    width: 155px;
    font-size: 11px;
    padding-top: 295px
}
}
#download .download_wrap ul li { text-align: center }

@media (min-width:427px) {
#download .download_wrap ul li a { cursor: pointer }
}

@media (max-width:426px) {
#download .download_wrap ul li { margin-top: 10px }
}
#download .download_wrap ul li.left { margin-left: 50px }
#download .download_wrap ul li.center { margin-left: 40px }
#download .download_wrap ul li.right { margin-left: 40px }
#download .download_wrap ul a {
    color: red;
    padding-bottom: 2px;
    border-bottom: solid 1px red
}

@media (max-width:426px) {
#download .download_wrap ul a { display: inline-block }
}

@media (min-width:427px) {
#download .download_wrap ul.download01 {
    background-image: url(../img/download_wallpaper01.png)
}
}

@media (max-width:426px) {
#download .download_wrap ul.download01 {
    background-image: url(../img/download_wallpaper01_sp.png)
}
}

@media (min-width:427px) {
#download .download_wrap ul.download02 {
    background-image: url(../img/download_wallpaper02.png)
}
}

@media (max-width:426px) {
#download .download_wrap ul.download02 {
    background-image: url(../img/download_wallpaper02_sp.png)
}
}

@media (min-width:427px) {
#download .download_wrap ul.download03 {
    background-image: url(../img/download_wallpaper03.png)
}
}

@media (max-width:426px) {
#download .download_wrap ul.download03 {
    background-image: url(../img/download_wallpaper03_sp.png)
}
}

@media (min-width:427px) {
#download .download_wrap ul.download04 { background-image: url(../img/download_wallpaper04.png) }
}

@media (max-width:426px) {
#download .download_wrap ul.download04 { background-image: url(../img/download_wallpaper04_sp.png) }
}

@media (min-width:427px) {
#download .download_wrap ul.download05 {
    background-image: url(../img/download_wallpaper05.png)
}
}

@media (max-width:426px) {
#download .download_wrap ul.download05 {
    background-image: url(../img/download_wallpaper05_sp.png)
}
}
@media (min-width:427px) {
#download .download_wrap ul.download06 {
    background-image: url(../img/download_wallpaper06.png)
}
}

@media (max-width:426px) {
#download .download_wrap ul.download06 {
    background-image: url(../img/download_wallpaper06_sp.png)
}
}
.footer { padding: 0 5px }

@media (min-width:427px) {
.footer {
    position: fixed;
    bottom: 20px;
    left: 40px;
    right: 40px;
    margin: auto
}
}

@media (max-width:426px) {
.footer {
    width: 100%;
    position: relative;
    text-align: center;
    margin-bottom: 15px
}
}

@media (min-width:427px) {
.footer .tenda img { width: 81px }
}

@media (max-width:426px) {
.footer .tenda img { width: 60px }
}

@media (min-width:427px) {
.footer .copy {
    position: absolute;
    right: 0;
    top: 0
}
}

@media (max-width:426px) {
.footer .copy { margin-top: 5px }
}

@media (min-width:427px) {
.footer .copy img { width: 132px }
}

@media (max-width:426px) {
.footer .copy img { width: 100px }
}

@media (min-width:427px) {
.btPageTop {
    display: none;
    position: fixed;
    bottom: 60px;
    right: 3%
}
}

@media (min-width:427px) and (min-width:427px) {
.btPageTop { width: 50px }
}

@media (max-width:426px) {
.btPageTop {
    width: 100%;
    text-align: center;
    margin: 40px 0
}
}

@media (min-width:427px) {
.btPageTop img { width: 100% }
}

@media (max-width:426px) {
.btPageTop img { width: 35px }
}
.tabw .footer {
    width: 95%;
    position: absolute;
    bottom: 30px
}
#gamestart {
    min-height: 100vh;
    padding-top: 90px;
    /*background-image: url(../img/gamestart_bgi_sp.png);*/
    background-image: url(../image/HP_SP_bg.png);
    background-position: top center;
    background-size: cover
}
#gamestart h2 { 
    margin-bottom: 20px;
    margin-top: -30px; 
}
#gamestart .btn_wrap {
    width: 85%;
    margin: auto;
    overflow: hidden
}
#gamestart .btn_wrap li {
    float: left;
    width: 49%;
    /*margin-bottom: 5px*/
    margin-bottom: 20px
}
#gamestart .btn_wrap li:nth-child(odd) { margin-right: 2% }
.small_h header { position: absolute }

#gamestart .sp_close {
    width: 30%;
    margin: auto;
}

@media (min-width:427px) {
header {
    left: 40px;
    top: 30px;
    position: fixed;
    z-index: 9997;
    width: 90%;
}
}

@media (max-width:426px) {
header {
    width: 100%;
    height: 100%
}
header.on {
    position: fixed;
    top: 0;
    background-color: #000;
    z-index: 9999
}
header.on h1 { display: none }
}

@media (min-width:427px) {
header h1 {
    margin-bottom: 20px;
    margin-left: -24px
}
}

@media (max-width:426px) {
header h1 {
    width: 70px;
    position: fixed;
    padding: 10px;
    z-index: 9998;
    -webkit-box-sizing: content-box;
    box-sizing: content-box
}
}

@media (min-width:427px) {
header h1 img { width: 320px }
}

/*
@media (max-width:426px) {
header h1 img { width: 246px }
}
*/
/*
@media (max-width:426px) {
header .nav {
    display: none;
    width: 320px;
    height: 385px;
    text-align: center;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    background-color: #000;
    background-image: url(../img/menu_sp_line.png); 
    background-size: 320px;
    background-position: bottom center;
}
}*/
/* header li { overflow: hidden } */

@media (min-width: 427px){
.nav{
    top: 30px;
    left: 800px;
    display: flex;
    position: absolute;
}
}

@media (max-width:426px) {
.nav{
    margin-left: 60px;
    margin-top: -45px;
    display: flex;
}
}

@media (min-width:427px) {
header li {    
    float: left;
    margin-right: -40px;
}
}

@media (max-width:426px) {
header li {
    height: 22px;
    margin-bottom: 45.6px
}
}
/*
@media (min-width:427px) {
header h1.logo img { width: 20% }
}

@media (max-width:426px) {
header h1.logo img { width: 10% }
}
*/
/*
@media (min-width:427px) {
 .character_header { 
     position: absolute;
     z-index: 100;
}
}
*/

.index_header { 
    position: absolute;
    z-index: 100;
}
/*
@media (min-width:427px) {
.index_header h1.logo img { 
    width: 55%;
    margin-left: 50px;
    margin-top:50px;
}
}
*/
@media (max-width:426px) {
.index_header h1.logo img { 
    width: 30%;
    margin-top: 50px; 
    margin-left: 230px;
}
}

@media (max-width:426px) {
.index_header .nav {
    margin-left: 30px;
    margin-top: -150px;
    /*display: flex;*/
}
}

@media (max-width:426px) {
.index_header ul.nav img { 
    width: 70px;
}
}

.character_header { 
    position: absolute;
    z-index: 100;
}

@media (max-width:426px) {
.character_header .nav {
    margin-left: 50px;
    margin-top: -42px; 
}
}

@media (min-width:427px) {
.character_header h1.logo img { 
    margin-left: 50px;
    margin-top: 50px; 
}
}

@media (max-width:426px) {
.character_header h1.logo img { 
    width: 40px;
    margin-top:10px;
    margin-left: 10px;
}
}

@media (max-width:426px) {
.character_header ul.nav img { 
    width: 60px;
}
}

/*
@media (min-width:427px) {
header li.menu_home img { width: 80% }
}

@media (max-width:426px) {
header li.menu_home img { width: 50% }
}

@media (min-width:427px) {
header li.menu_news img { width: 80% }
}

@media (max-width:426px) {
header li.menu_news img { width: 70% }
}

@media (min-width:427px) {
header li.menu_story img { width: 80% }
}

@media (max-width:426px) {
header li.menu_story img { width: 70% }
}
*/

/*
@media (min-width:427px) {
header li.menu_system img { width: 81px }
}

@media (max-width:426px) {
header li.menu_system img { width: 95px }
}
*/
/*
@media (min-width:427px) {
header li.menu_character img { width: 80% }
}

@media (max-width:426px) {
header li.menu_character img { width: 70% }
}
*/
/*
@media (min-width:427px) {
header li.menu_shop img { width: 55px }
}

@media (max-width:426px) {
header li.menu_shop img { width: 66px }
}

@media (min-width:427px) {
header li.menu_download img { width: 127px }
}

@media (max-width:426px) {
header li.menu_download img { width: 147px }
}
*/
/*
@media (min-width:427px) {
header li.active img { margin-top: -19px }
header li a:hover { opacity: 1 }
header li a:hover img { margin-top: -19px }
}*/
.menu_sp_btn {
    width: 44px;
    position: fixed;
    top: 0;
    right: 0;
    padding: 10px;
    -webkit-box-sizing: content-box;
    box-sizing: content-box
}

@media (min-width:427px) {
.menu_sp_btn { display: none }
}
.menu_sp_btn.open { z-index: 9998 }
.menu_sp_btn.close {
    z-index: 9999;
    display: none
}

@media (min-width:427px) {
.background-wrap {
    position: fixed;
    top: 0;
    left: 0;
    overflow: hidden;
    min-width: 100%;
    min-height: 100%
}
}
.background-movie { position: relative }
#bgndVideo {
    width: 100%;
    height: 100%
}
.background-cover {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(../img/top_bgi_line.png);
    background-repeat: repeat
}
#slideshow {
    position: relative;
    width: 100%
}
#slideshow li {
    position: absolute;
    height: 500px;
    margin: 0;
    padding: 0;
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover
}

@media (min-width:427px) {
#base {
    background-image: url(../image/HP_PC_bg.png);
    background-size: 100%;
}
}

@media (max-width:426px) {
#base {
    background-image: url(../image/HP_SP_bg.png);
    background-size: 100%;
}
}

@media (min-width:427px) {
#base_character {
    background-image: url(../image/HP_PC_bg.png);
    background-size: 100%;
    height: 1410px;
}
}

@media (max-width:426px) {
#base_character {
    background-image: url(../image/HP_SP_bg.png);
    background-size: 100%;
}
}

#home {
    width: 100%;
    height: 100%;
    min-height: 100vh
}

@media (min-width:427px) {
#home {
    height: 2400px;
    max-width: 1600px;
    margin: auto;
}
}

@media (max-width:426px) {
#home { 
    max-width: 426px;
    margin: auto;
}
}

@media (min-width:427px) {
#home_story {
    max-width: 1600px;
    margin: auto;
}
}

@media (min-width:427px) {
#home .contents {
    background-image: url(../image/HP_PC_mainvisual.png);
    background-size: 100%;
    display: flex;
    /*position: absolute; フレキシブルにする場合はここを外すけどメニューとか動かない*/
}
}

@media (max-width:426px) {
#home .contents {
    background-image: url(../image/HP_SP_mainvisual.png);
    background-size: 100%;
    display: flex;
    position: absolute;
}
}

.small_h #home { min-height: 850px }
#home h1.sp {
    width: 100%;
    text-align: center;
    margin: -50px 0 25px
}
#home h1.sp img {
    width: 234px;
    margin-left: 30px
}

@media (min-width:427px) {
#home .btGameStart {
    position: absolute;
    top: 450px;
    right: 100px
}
}

@media (max-width:426px) {
#home .btGameStart { 
    margin-top: 290px; 
    margin-left: 15px;
}
#home .btGameStart a { display: block }
}
#home .btGameStart img { width: 90% }


@media (min-width:427px) {
#home .newsarea {
    width: 510px;
    position: absolute;
    bottom: 70px;
    background-size: 518px;
    background-image: url(../img/top_newsarea_pc.png)
}
}

@media (max-width:426px) {
#home .newsarea {
    height: 50px;
    background-size: cover;
    background-image: url(../img/top_newsarea_sp.png)
}
}
#home .newsarea a {
    color: #fff;
    line-height: 1.1em;
    border-bottom: solid 1px #fff;
    display: inline-block
}
#home .newsarea div {
    overflow: hidden;
    -webkit-box-sizing: content-box;
    box-sizing: content-box
}

@media (min-width:427px) {
#home .newsarea div {
    max-width: 350px;
    font-size: 13px;
    line-height: 1.3em;
    padding: 16px 0 13px 113px
}
}

@media (max-width:426px) {
#home .newsarea div {
    font-size: 10px;
    line-height: 1.3em;
    padding: 19px 6px 16px 65px
}
}
#home .newsarea div time { display: block }

@media (min-width:427px) {
#home .newsarea div time {
    float: left;
    margin-right: 1em
}
}

@media (max-width:426px) {
#home .newsarea div time {
    margin-right: .5em;
    float: left
}
}

@media (min-width:427px) {
#home .newsarea div h2 {
    float: left;
    font-size: 13px
}
}

@media (max-width:426px) {
#home .newsarea div h2 {
    font-size: 12px;
    float: left
}
}

@media (min-width:427px) {
#home .top_bn {
    position: absolute;
    top: 770px;
    left: 50px;
}
}

@media (max-width:426px) {
#home .top_bn {
    position: absolute;
    top: 420px;
}
}

@media (min-width:427px) {
#home .top_bn ul { 
    align-items: center; 
    /*
    display: -webkit-flex; 
    display: flex;

    margin: auto;
    overflow: hidden;
    justify-content: space-between;
    flex-wrap: wrap;
    */
}
#home .top_bn li { margin-bottom: 8px; float: left; width: 100%; }
#home .top_bn li:last-child { margin-bottom: 0 }
}
 /* #home .top_bn li img { width: 100% } */
#home .sp_story {
    padding-top: 50px;
    background-color: #000;
    background-image: url(../img/story_bgi_sp.png);
    background-repeat: no-repeat;
    background-position: top -50px center;
    background-size: 100%
}
#home .sp_story p { margin: auto }
#home .sp_story .yt {
    width: 75%;
    margin-bottom: 50px
}
#home .sp_story h2 { margin-bottom: 30px }
#home .sp_story .txt { width: 90% }
#home .sp_story .top_bn {
    width: 75%;
    margin: auto;
    margin-top: 70px
}
#home .sp_story .top_bn li { margin-bottom: 1em }
#home .sp_story .top_bn li:last-child { margin-bottom: 0; }
.tabw #home { background-repeat: repeat }
.tabw #home .btGameStart { margin-top: 80vh }
.modal-overlay {
    display: none;
    width: 100vw;
    height: 100%;
    position: fixed;
    top: 0;
    background-color: rgba(49,6,6,.85);
    z-index: 9998
}
.modal-contents {
    display: none;
    height: 100%;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 9998;
    overflow-y: scroll;
    -ms-overflow-style: none
}
.modal-contents::-webkit-scrollbar {
display:none
}
.modal-frame {
    display: none;
    margin-top: 50px
}
.modal-btn {
    display: none;
    width: 100%;
    text-align: center;
    position: absolute;
    /*margin-top: 30px*/

}
/*.modal-btn img { width: 77px }*/
.modal-btn img { width: 100px }

@media (min-width:427px) {
.modal-btn img { cursor: pointer }
}

@media (min-width:427px) and (min-width:427px) {
.modal-btn img {
    -webkit-transition: all .3s 0s ease;
    transition: all .3s 0s ease
}
.modal-btn img:hover { opacity: .8 }
}
.modal-gs {
    height: 740px;
    width: 1200px;
    padding-bottom: 70px;
    background-image: url(../image/HP_PC_gamestart_frame.png);
    background-repeat: no-repeat;
    background-size: 100%
}
.modal-gs h2 { margin: 5px 0 55px }
.modal-gs .modal-wrap {
    /*width: 700px; ※全部の登録が済んだら*/
    width: 700px;
    margin: auto;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: flex-end;
}
.modal-gs .modal-wrap .modal-qr {
    text-align: center;
    margin-left: 7px;
    /*float: left;
    margin-right: 50px*/
}
.modal-gs .modal-wrap .modal-qr:nth-child(-n+5) { margin-top: 100px }
.modal-gs .modal-wrap .modal-qr:nth-child(n+6) { margin-top: 31px }
/*.modal-gs .modal-wrap .modal-qr:nth-child(5n) { margin-right: 0 }
.modal-gs .modal-wrap .modal-qr:nth-child(n+6) { margin-top: 40px }
.modal-gs .modal-wrap .modal-qr:nth-child(7) { margin-left:-4px;}
.modal-gs .modal-wrap .modal-qr:nth-child(8) { margin-left:-3px;}*/
.modal-gs .modal-wrap .modal-qr dt { margin-bottom: 10px }
.modal-yt {
    height: 360px;
    width: 640px;
    text-align: center
}
.modal-chara {
    height: 610px;
    width: 910px;
    margin: auto;
    margin-bottom: 70px;
    margin-top: 50px;
    overflow: hidden
}

@media (min-width:427px) {
.modal-chara .chara_name {
    width: 490px;
    margin-right: 40px;
    float: left
}
.modal-chara .chara_name img { width: 100% }
}
.modal-chara .chara_wrap {
    margin-top: 160px;
    float: left
}
.modal-chara .chara_wrap p { text-align: center }
.modal-chara .chara_wrap .chara_cv { margin-top: 20px }

@media (min-width:427px) {
.modal-chara .chara_wrap .chara_cv { cursor: pointer }
}

@media (min-width:427px) and (min-width:427px) {
.modal-chara .chara_wrap .chara_cv {
    -webkit-transition: all .3s 0s ease;
    transition: all .3s 0s ease
}
.modal-chara .chara_wrap .chara_cv:hover { opacity: .8 }
}

@media (min-width:427px) {
.news_bgi { background-image: url(../image/HP_PC_news_bg.png);background-size: 100%; }
}

@media (max-width:426px) {
.news_bgi { background-image: url(../image/HP_SP_news_bg.png);background-size: 100%; }
}

@media (min-width:427px) {
#news h2 { margin-bottom: 20px }
}

@media (max-width:426px) {
#news h2 { margin-bottom: 40px }
}

@media (min-width:427px) {
#news section {
    width: 990px;
    margin: auto
}
}
#news section .news_title {
    /* border-bottom: solid 1px #666; */
    word-wrap: break-word
}

@media (min-width:427px) {
#news section .news_title { padding: 10px 0 }
}

@media (max-width:426px) {
#news section .news_title { padding-bottom: 20px }
}
#news section .news_title time { background-color: #b39241; color:black}
/*
@media (min-width:427px) {
#news section .news_title time { font-size: 14px }
}

@media (max-width:426px) {
#news section .news_title time {
    font-size: 10px;
    margin-left: 2%;
    margin-bottom: 1em
}
}*/
#news section .news_title h3 {
    font-weight: 700;
    color: #fff;
    margin-top: 1em;
    line-height: 1.3em
}

@media (min-width:427px) {
#news section .news_title h3 { font-size: 20px }
}

@media (max-width:426px) {
#news section .news_title h3 {
    font-size: 12px;
    width: 96%;
    margin: auto;
    margin-top: 1em
}
}
/* #news section .news_txt { border-bottom: solid 1px #666 } */

@media (min-width:427px) {
#news section .news_txt {
    padding: 30px 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
}

@media (max-width:426px) {
#news section .news_txt { margin: 20px 0 }
}
#news section .news_txt .image {
    text-align: center;
    position: relative
}
#news section .news_txt .image:before {
    content: "";
    width: 100%;
    height: 100%;
    display: block;
    /*background-image: url(../img/news_frame.png);*/
    background-size: cover;
    background-repeat-y: repeat;
    vertical-align: middle
}
#news section .news_txt .image span {
    width: 99.5%;
    height: 99%;
    display: block;
    overflow: hidden;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto
}
/*@media (max-width: 426px){
    #news section .news_txt .image span {
        /* border: solid 1px #b39241; 
        background-color: #000;
    }
/*}*/

@media (min-width:427px) {
#news section .news_txt .image {
    margin-right: 30px;
    min-width: 450px;
    height: 290px;
    width: 640px;
    overflow: hidden
}
}

@media (max-width:426px) {
#news section .news_txt .image {
    height: 175px;
    margin-bottom: 20px
}
}
#news section .news_txt .image img {
    width: 100%;
    height: auto;
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
#news section .news_txt .txt {
    line-height: 1.8em;
    color: #fff;
    position: relative;
    
    border-bottom: solid 1px #666;
}
#news section .news_txt .txt iframe { display: none }

@media (min-width:427px) {
#news section .news_txt .txt {
    /*width: 510px;*/
    width: 900px;
    font-size: 15px
}
}

@media (max-width:426px) {
#news section .news_txt .txt {
    width: 96%;
    font-size: 12px;
    margin: auto
}
}
#news section .news_txt .txt a {
    color: cyan;
    border-bottom: solid 1px cyan;
    padding-bottom: 2px
}
#news section .news_txt .txt p { word-wrap: break-word }

@media (max-width:426px) {
#news section .news_txt .txt p { margin-bottom: 20px }
}
#news section .news_txt .txt .readmore {
    /*display: none;*/
    color: cyan;
    border-bottom: none
}

@media (min-width:427px) {
#news section .news_txt .txt .readmore {
    font-size: 15px;
    /*
    position: absolute;
    left: 0;
    bottom: -.5em
    */
    /*text-align: right;*/
    margin-left: 750px;
}
}

@media (max-width:426px) {
#news section .news_txt .txt .readmore {
    font-size: 10px;
    text-align: right;
    margin-bottom: 20px
}
}
#news section .news_txt .txt .readmore.on { display: block }

@media (min-width:427px) {
.newspost h2 { margin-bottom: 20px }
}

@media (max-width:426px) {
.newspost h2 { margin-bottom: 40px }
}
.newspost section .news_title {
    /*border-bottom: solid 1px #666;*/
    word-wrap: break-word
}

@media (min-width:427px) {
.newspost section .news_title { padding: 30px 0 }
}

@media (max-width:426px) {
.newspost section .news_title { padding-bottom: 20px }
}
.newspost section .news_title time { background-color: #b39241; color: black}

@media (min-width:427px) {
.newspost section .news_title time {
    /*font-size: 14px;
    padding: 30px 0*/
    padding: 5px 10px;
}
}

@media (max-width:426px) {
.newspost section .news_title time {
    font-size: 10px;
    margin-left: 2%;
    margin-bottom: 1em
}
}
.newspost section .news_title h3 {
    font-weight: 700;
    color: #fff;
    margin-top: 1em;
    line-height: 1.3em
}

@media (min-width:427px) {
.newspost section .news_title h3 { font-size: 20px }
}

@media (max-width:426px) {
.newspost section .news_title h3 {
    font-size: 12px;
    width: 96%;
    margin: auto;
    margin-top: 23px
}
}

@media (min-width:427px) {
.newspost section .news_txt {
    padding: 30px 0;
    border-bottom: solid 1px #666
}
}

@media (max-width:426px) {
.newspost section .news_txt { margin-bottom: 30px }
}
.newspost section .news_txt .image {
    text-align: center;
    margin: auto;
    overflow: hidden
}

@media (min-width:427px) {
.newspost section .news_txt .image { max-width: 950px }
}

@media (max-width:426px) {
.newspost section .news_txt .image { padding: 20px 0 }
}
.newspost section .news_txt .image img {
    width: 100%;
    height: auto;
    padding: 1px;
    vertical-align: middle;
    /*background-image: url(../img/news_frame.png);*/
    background-size: cover;
    background-repeat-y: repeat
}
.newspost section .news_txt .txt {
    line-height: 1.8em;
    color: #fff;
    margin-top: 30px;
    position: relative
}

@media (min-width:427px) {
.newspost section .news_txt .txt { font-size: 15px }
}
@media (min-width: 427px) {
#news section .news_txt .txt p {
    max-height: 11em;
    overflow: hidden;}
}
@media (max-width: 426px){
#news section .news_txt .txt p {
    margin-bottom: 20px;
    max-height: 5em;
    overflow: hidden;}
}
@media (max-width:426px) {
.newspost section .news_txt .txt {
    width: 96%;
    font-size: 12px;
    margin: auto
}
.newspost section .news_txt .txt iframe { width: 100% }
}
.newspost section .news_txt .txt p { word-wrap: break-word }
.newspost section .news_txt .txt a {
    color: cyan;
    border-bottom: solid 1px cyan;
    padding-bottom: 2px
}

@media (min-width:427px) {
.newspost .pager .top {
    width: 105px;
    margin: 0 66px
}
}

@media (max-width:426px) {
.newspost .pager .top {
    width: 84px;
    margin: 0 51px
}
}
.newspost .pager .top img { width: 100% }

@media (min-width:427px) {
.newspost .pager .top img { padding-top: 2px }
}

@media (max-width:426px) {
.newspost .pager .top img { padding-top: 5px }
}
/*
@media (min-width:427px) {
.story_bgi { background-image: url(../image/HP_PC_story_bg.png) }
}
@media (max-width:426px) {
.story_bgi { background-image: url(../image/HP_SP_story_bg.png) }
}
*/
.newspost .pager .next img { padding-top: 1px }
/*.story_bgi { background-image: url(../img/story_bgi.jpg) }*/
#story h2 { margin-bottom: 90px }
#story p {
    text-align: center;
    opacity: 0;
    -webkit-transform: translateY(100px);
    -ms-transform: translateY(100px);
    transform: translateY(100px);
    -webkit-transition: all 1.5s .5s ease;
    transition: all 1.5s .5s ease
}
#story p.fadeIn {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0)
}

@media (min-width:427px) {
.system_bgi { background-image: url(../img/system_bgi.png) }
}

@media (max-width:426px) {
.system_bgi { background-image: url(../img/system_bgi_sp.png) }
}

@media (min-width:427px) {
#system .mainarea {
    width: 100%;
    max-width: 1030px
}
}
#system .wrap {
    position: relative;
    opacity: 0;
    -webkit-transform: translateY(100px);
    -ms-transform: translateY(100px);
    transform: translateY(100px);
    -webkit-transition: all 1.5s .5s ease;
    transition: all 1.5s .5s ease
}

@media (min-width:427px) {
#system .wrap { width: 1030px }
}
#system .wrap h3 {
    text-align: center;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto
}

@media (min-width:427px) {
#system .wrap h3 { width: 472px }
}

@media (max-width:426px) {
#system .wrap h3 img { width: 240px }
}

@media (min-width:427px) {
#system .wrap.cont_01 { margin-top: 80px }
}

@media (max-width:426px) {
#system .wrap.cont_01 { margin-top: 34px }
}

@media (min-width:427px) {
#system .wrap.cont_01 h3 { top: -14px }
}

@media (max-width:426px) {
#system .wrap.cont_01 h3 { top: -14px }
}

@media (min-width:427px) {
#system .wrap.cont_01 p { margin-left: -97px }
}

@media (max-width:426px) {
#system .wrap.cont_02 { margin-top: 40px }
}

@media (min-width:427px) {
#system .wrap.cont_02 h3 { top: -14px }
}

@media (max-width:426px) {
#system .wrap.cont_02 h3 { top: -50px }
}

@media (min-width:427px) {
#system .wrap.cont_02 p {
    margin-top: 90px;
    margin-left: -90px
}
}

@media (min-width:427px) {
#system .wrap.cont_03 { margin-top: -30px }
}

@media (max-width:426px) {
#system .wrap.cont_03 { margin-top: 60px }
}

@media (min-width:427px) {
#system .wrap.cont_03 h3 { top: 160px }
}

@media (max-width:426px) {
#system .wrap.cont_03 h3 { top: -10px }
}

@media (min-width:427px) {
#system .wrap.cont_03 p { margin-left: -154px }
}

@media (min-width:427px) {
#system .wrap.cont_04 { margin-top: -450px }
}

@media (max-width:426px) {
#system .wrap.cont_04 { margin-top: -120px }
}

@media (min-width:427px) {
#system .wrap.cont_04 p { margin-left: -320px }
}

@media (min-width:427px) {
#system .bgi {
    opacity: 0;
    -webkit-transform: translateY(100px);
    -ms-transform: translateY(100px);
    transform: translateY(100px);
    -webkit-transition: all 1.5s .5s ease;
    transition: all 1.5s .5s ease;
    position: absolute;
    right: 0;
    top: 1610px
}
}
#system .fadeIn {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0)
}
#system .mainarea { padding-bottom: 0 }

@media (max-width:426px) {
#system .btPageTop { margin-top: 0 }
}

@media (min-width:427px) {
#story_contents .mainarea {
    width: 1030px;
    margin-left: 0;
    padding: 0;
}
}

@media (max-width:426px) {
#story_contents .mainarea { padding-top: 0px }
}

@media (min-width:427px) {
#story_contents {
  /*padding: 20px 40px 40px;*/
  min-width: 1300px;
  min-height: 100vh
}
}

@media (min-width:427px) {
#character {
  max-width: 1600px;
  margin: auto;
}
}

@media (min-width:427px) {
#character .frame {
  position: absolute;
  overflow: hidden;
  float: left;
  width: 1080px;
  height: 690px;
  left: 270px;
  top: 170px;
}
}

@media (max-width:426px) {
#character .frame {
    position: absolute;
    overflow: hidden;
    float: left;
    /*width: 270px;*/
    width: 300px;
    /*height: 200px;*/
    height: 220px;
    top: 40px;
    left: 20px;
    /*object-fit: contain;*/
}
}

@media (min-width:427px) {
#character .prev {
    cursor:pointer;
    position: absolute;
    width: 80px;
    height: 100px;
    left: 240px;
    top: 450px;
    z-index: 100;
}
}

@media (max-width:426px) {
#character .prev {
    cursor:pointer;
    position: absolute;
    width: 30px;
    left: 10px;
    top: 190px;
    z-index: 100;
    /*object-fit: contain;*/
}
}

@media (min-width:427px) {
#character .next {
    cursor:pointer;
    position: absolute;
    width: 80px;
    height: 100px;
    left: 1290px;
    top: 450px;
    z-index: 100;
}
}

@media (max-width:426px) {
#character .next {
    cursor:pointer;
    position: absolute;
    width: 30px;
    left: 290px;
    top: 190px;
    z-index: 100;
    /*object-fit: contain;*/
}
}

@media (min-width:427px) {
#character .gallery {
    position: absolute;
    left: -1086px;
    width: 17376px;
}
}

@media (max-width:426px) {
#character .gallery {
    position: absolute;
    /*
    left: -275px;
    width: 4400px;*/
    left: -305px;
    width: 4880px;
}
}

@media (min-width:427px) {
#character .gallery li {
    display: inline-block;
    width: 1080px;
}
}

@media (max-width:426px) {
#character .gallery li {
    display: inline-block;
    /*width: 270px;*/
    width: 300px;
}
}

@media (min-width:427px) {
#character .chara_pop_list {
    position: absolute;
    left: 0px;
    height: 500px;
    width: 1600px;
}
}

@media (max-width:426px) {
#character .chara_pop_list {
    background-image: url(../image/HP_SP_bg.png);
    position: absolute;
    left: 0px;
    height: 250px;
    width: 100%;
    min-width: 300px;
}
}
    /*
@media (min-width:427px) {
#character .chara_pop_list ul {
    margin-left: 200px;
}
}

@media (max-width:426px) {
#character .chara_pop_list ul {
    margin-left: 40px;
}
}
*/
@media (min-width:427px) {
#character .chara_pop_list ul {
    margin-left: 200px;
    list-style-type: none;
    display: flex;
    flex-wrap: wrap;
}
}

@media (max-width:426px) {
#character .chara_pop_list ul {
    margin-left: 50px;
    list-style-type: none;
    display: flex;
    flex-wrap: wrap;
}
}

@media (max-width:426px) {
#character .chara_pop_list img {
    width: 70%;
}
}

@media (min-width:427px) {
#character .chara_pop_list li { cursor:pointer; }
}

@media (max-width:426px) {
#character .chara_pop_list li { width: 60px; }
}

@media (min-width:427px) {
#character .chara_pop_list_footer {
    left:0px; 
    margin-top:430px;
    position: absolute;
}
}

@media (max-width:426px) {
#character .chara_pop_list_footer {
    left:0px; 
    margin-top:230px;
    position: absolute;
}
}

/*# sourceMappingURL=style.css.map */