.root-bg
{
    background-image: url("./../img/sp/common/bg_pattern.jpg");
    background-size: 50%;
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
}

.root
{
    position: relative;
}

#kv
{
    position: relative;
    width: 100%;
    height: 573px;
    overflow: hidden;
    text-indent: 110%;
    white-space: nowrap;
    z-index: 1;
}

#kv h1
{
    display: block;
    width: 280px;
    height: 105px;
    background-image: url("./../img/sp/kv/h1.png");
    background-repeat: no-repeat;
    background-size: 280px 105px;
    background-position: 0px 0px;
    position: absolute;
    top: 8px;
    left: 20px;
}

#kv .time
{
    display: block;
    width: 158px;
    height: 36px;
    background-image: url("./../img/sp/kv/time.png");
    background-repeat: no-repeat;
    background-size: 158px 36px;
    background-position: 0px 0px;
    position: absolute;
    top: 120px;
    left: 80px;
    z-index: 4;
}

#kv .img-kv .face
{
    display: block;
    width: 208px;
    height: 260px;
    background-image: url("./../img/sp/kv/face.png");
    background-repeat: no-repeat;
    background-size: 208px 260px;
    background-position: 0px 0px;
    position: absolute;
    top: 153px;
    left: 56px;
    z-index: 3;
}

#kv .img-kv .face_bg
{
    display: block;
    width: 208px;
    height: 260px;
    background-image: url("./../img/sp/kv/face_bg.png");
    background-repeat: no-repeat;
    background-size: 208px 260px;
    background-position: 0px 0px;
    position: absolute;
    top: 153px;
    left: 56px;
}

#kv .img-kv .shout
{
    display: block;
    width: 139px;
    height: 126px;
    background-image: url("./../img/sp/kv/shout.png");
    background-repeat: no-repeat;
    background-size: 139px 126px;
    background-position: 0px 0px;
    position: absolute;
    top: 150px;
    left: 181px;
    z-index: 2;
}

#kv .img-kv .logo
{
    display: block;
    width: 75px;
    height: 57px;
    background-image: url("./../img/sp/kv/logo.png");
    background-repeat: no-repeat;
    background-size: 75px 57px;
    background-position: 0px 0px;
    position: absolute;
    top: 275px;
    left: 227px;
    z-index: 3;
}

#kv .img-kv .movie_logo
{
    display: block;
    width: 108px;
    height: 95px;
    background-image: url("./../img/sp/kv/movie_logo.png");
    background-repeat: no-repeat;
    background-size: 108px 95px;
    background-position: 0px 0px;
    position: absolute;
    top: 460px;
    left: 10px;
    z-index: 5;
}

#kv .img-kv .movie_character
{
    display: block;
    width: 320px;
    height: 228px;
    background-image: url("./../img/sp/kv/movie_character.png");
    background-repeat: no-repeat;
    background-size: 320px 228px;
    background-position: 0px 0px;
    position: absolute;
    top: 337px;
    left: 0;
    z-index: 4;
}

#gacha
{
    position: relative;
    width: 100%;
    z-index: 1;
}

#gacha h2
{
    display: block;
    width: 320px;
    height: 94px;
    background-image: url("./../img/sp/gacha/h2.png");
    background-repeat: no-repeat;
    background-size: 320px 94px;
    background-position: 0px 0px;
    background-color: rgba(0, 13, 47, 0.5);
    overflow: hidden;
    text-indent: 110%;
    white-space: nowrap;
}

#gacha h3
{
    display: block;
    width: 320px;
    height: 571px;
    background-image: url("./../img/sp/gacha/h3.png");
    background-repeat: no-repeat;
    background-size: 320px 571px;
    background-position: 0px 0px;
    overflow: hidden;
    text-indent: 110%;
    white-space: nowrap;
    margin-top: -26px;
}

#gacha h4
{
    display: block;
    width: 239px;
    height: 66px;
    background-image: url("./../img/sp/gacha/ttl_sub.png");
    background-repeat: no-repeat;
    background-size: 239px 66px;
    background-position: 0px 0px;
    margin: 14px auto 0;
    overflow: hidden;
    text-indent: 110%;
    white-space: nowrap;
}

#gacha .time
{
    display: block;
    width: 153px;
    height: 36px;
    background-image: url("./../img/sp/gacha/time.png");
    background-repeat: no-repeat;
    background-size: 153px 36px;
    background-position: 0px 0px;
    margin: 13px auto 12px;
    overflow: hidden;
    text-indent: 110%;
    white-space: nowrap;
}

#gacha .point
{
    display: block;
    width: 210px;
    height: 53px;
    background-image: url("./../img/sp/gacha/ttl_point.png");
    background-repeat: no-repeat;
    background-size: 210px 53px;
    background-position: 0px 0px;
    margin: 0 auto;
    overflow: hidden;
    text-indent: 110%;
    white-space: nowrap;
}

#gacha .wrap
{
    display: block;
    width: 320px;
    height: 1775px;
    background-image: url("./../img/sp/gacha/character/character_bg.png");
    background-repeat: no-repeat;
    background-size: 320px 1775px;
    background-position: 0px 0px;
    position: relative;
    margin: 12px auto 0;
    overflow: hidden;
    text-indent: 110%;
    white-space: nowrap;
}

#gacha .wrap .alternative-dragon
{
    display: block;
    width: 219px;
    height: 249px;
    background-image: url("./../img/sp/gacha/character/alternative_dragon.png");
    background-repeat: no-repeat;
    background-size: 219px 249px;
    background-position: 0px 0px;
    position: absolute;
    top: 17px;
    left: 12px;
}

#gacha .wrap .arthur
{
    display: block;
    width: 198px;
    height: 237px;
    background-image: url("./../img/sp/gacha/character/arthur.png");
    background-repeat: no-repeat;
    background-size: 198px 237px;
    background-position: 0px 0px;
    position: absolute;
    top: 268px;
    left: 100px;
}

#gacha .wrap .shiro-amakusa-tokisada
{
    display: block;
    width: 199px;
    height: 240px;
    background-image: url("./../img/sp/gacha/character/shiro_amakusa_tokisada.png");
    background-repeat: no-repeat;
    background-size: 199px 240px;
    background-position: 0px 0px;
    position: absolute;
    top: 510px;
    left: 19px;
}

#gacha .wrap .ribbon
{
    display: block;
    width: 206px;
    height: 242px;
    background-image: url("./../img/sp/gacha/character/ribbon.png");
    background-repeat: no-repeat;
    background-size: 206px 242px;
    background-position: 0px 0px;
    position: absolute;
    top: 760px;
    left: 94px;
}

#gacha .wrap .sakamoto-ryoma
{
    display: block;
    width: 204px;
    height: 245px;
    background-image: url("./../img/sp/gacha/character/sakamoto_ryoma.png");
    background-repeat: no-repeat;
    background-size: 204px 245px;
    background-position: 0px 0px;
    position: absolute;
    top: 1002px;
    left: 15px;
}

#gacha .wrap .napoleon
{
    display: block;
    width: 225px;
    height: 239px;
    background-image: url("./../img/sp/gacha/character/napoleon.png");
    background-repeat: no-repeat;
    background-size: 225px 239px;
    background-position: 0px 0px;
    position: absolute;
    top: 1251px;
    left: 80px;
}

#gacha .wrap .epoca
{
    display: block;
    width: 213px;
    height: 264px;
    background-image: url("./../img/sp/gacha/character/epoca.png");
    background-repeat: no-repeat;
    background-size: 213px 264px;
    background-position: 0px 0px;
    position: absolute;
    top: 1492px;
    left: 10px;
}

#gacha .detail
{
    width: 100%;
    margin: 14px auto 50px;
    text-align: center;
    color: #fff;
    font-weight: bold;
    font-size: 14px;
}

#gacha .detail a
{
    color: #f5e13d;
    font-weight: bold;
}

#gacha .detail a:hover
{
    color: #fff076;
}

#gacha-about
{
    position: relative;
    z-index: 1;
}

#gacha-about .accordion .accordion-title
{
    background-image: url(./../img/sp/accordion/accordion_first_bg.png);
}

#gacha-about .accordion .accordion-title h2
{
    background-image: url("./../img/sp/gacha/about/h2.png");
    width: 196px;
    background-size: 196px 17px;
    overflow: hidden;
    text-indent: 296px;
    white-space: nowrap;
}

#gacha-about .accordion .accordion-body
{
    background-color: #007;
}

#gacha-about .accordion .accordion-body .temp-content
{
    width: 100%;
    background-image: url("./../img/sp/common/bg_about_pattern.jpg");
    background-size: 50%;
    padding: 22px 0 29px;
}

#gacha-about .accordion .accordion-body .temp-content .shout
{
    display: block;
    width: 261px;
    height: 144px;
    background-image: url("./../img/sp/gacha/about/shout.png");
    background-repeat: no-repeat;
    background-size: 261px 144px;
    background-position: 0px 0px;
    margin: 0 auto;
    overflow: hidden;
    text-indent: 110%;
    white-space: nowrap;
}

#gacha-about .accordion .accordion-body .about-get h3
{
    display: block;
    width: 320px;
    height: 80px;
    background-image: url("./../img/sp/gacha/about/h3_get.png");
    background-repeat: no-repeat;
    background-size: 320px 80px;
    background-position: 0px 0px;
    overflow: hidden;
    text-indent: 110%;
    white-space: nowrap;
}

#gacha-about .accordion .accordion-body .about-get .img
{
    display: block;
    width: 277px;
    height: 420px;
    background-image: url("./../img/sp/gacha/about/img_get.png");
    background-repeat: no-repeat;
    background-size: 277px 420px;
    background-position: 0px 0px;
    margin: 0 auto;
    overflow: hidden;
    text-indent: 110%;
    white-space: nowrap;
}

#gacha-about .accordion .accordion-body .about-use h3
{
    display: block;
    width: 320px;
    height: 80px;
    background-image: url("./../img/sp/gacha/about/h3_use.png");
    background-repeat: no-repeat;
    background-size: 320px 80px;
    background-position: 0px 0px;
    overflow: hidden;
    text-indent: 110%;
    white-space: nowrap;
}

#gacha-about .accordion .accordion-body .about-use .img
{
    display: block;
    width: 277px;
    height: 833px;
    background-image: url("./../img/sp/gacha/about/img_use.png");
    background-repeat: no-repeat;
    background-size: 277px 833px;
    background-position: 0px 0px;
    margin: 0 auto;
    padding: 0 0 32px;
    overflow: hidden;
    text-indent: 110%;
    white-space: nowrap;
}

#play
{
    position: relative;
    width: 100%;
    z-index: 1;
}

#play h2
{
    display: block;
    width: 320px;
    height: 94px;
    background-image: url("./../img/sp/play/h2.png");
    background-repeat: no-repeat;
    background-size: 320px 94px;
    background-position: 0px 0px;
    background-color: rgba(0, 13, 47, 0.5);
    overflow: hidden;
    text-indent: 110%;
    white-space: nowrap;
}

#play h3
{
    display: block;
    width: 320px;
    height: 505px;
    background-image: url("./../img/sp/play/h3.png");
    background-repeat: no-repeat;
    background-size: 320px 505px;
    background-position: 0px 0px;
    overflow: hidden;
    text-indent: 110%;
    white-space: nowrap;
}

#play h4
{
    display: block;
    width: 179px;
    height: 37px;
    background-image: url("./../img/sp/play/ttl_sub.png");
    background-repeat: no-repeat;
    background-size: 179px 37px;
    background-position: 0px 0px;
    margin: 14px auto 25px;
    overflow: hidden;
    text-indent: 110%;
    white-space: nowrap;
}

#play .time
{
    display: block;
    width: 153px;
    height: 36px;
    background-image: url("./../img/sp/play/time.png");
    background-repeat: no-repeat;
    background-size: 153px 36px;
    background-position: 0px 0px;
    margin: 13px auto 12px;
    overflow: hidden;
    text-indent: 110%;
    white-space: nowrap;
}

#play .wrap
{
    overflow: hidden;
    text-indent: 110%;
    white-space: nowrap;
}

#play .wrap .genome_normal
{
    display: block;
    width: 235px;
    height: 356px;
    background-image: url("./../img/sp/play/genome_normal.png");
    background-repeat: no-repeat;
    background-size: 235px 356px;
    background-position: 0px 0px;
    margin: 0 auto 35px;
}

#play .wrap .genome_shinka
{
    display: block;
    width: 269px;
    height: 350px;
    background-image: url("./../img/sp/play/genome_shinka.png");
    background-repeat: no-repeat;
    background-size: 269px 350px;
    background-position: 0px 0px;
    margin: 0 auto;
}

#play .detail
{
    width: 100%;
    margin: 14px auto 50px;
    text-align: center;
    color: #fff;
    font-weight: bold;
    font-size: 14px;
}

#play .detail a
{
    color: #f5e13d;
    font-weight: bold;
}

#play .detail a:hover
{
    color: #fff076;
}

#play-about
{
    position: relative;
    z-index: 1;
}

#play-about .accordion .accordion-title
{
    background-image: url(./../img/sp/accordion/accordion_first_bg.png);
}

#play-about .accordion .accordion-title h2
{
    background-image: url("./../img/sp/play/about/h2.png");
    width: 185px;
    background-size: 185px 17px;
    overflow: hidden;
    text-indent: 285px;
    white-space: nowrap;
}

#play-about .accordion .accordion-body
{
    background-color: #007;
}

#play-about .accordion .accordion-body .temp-content
{
    width: 100%;
    background-image: url("./../img/sp/common/bg_about_pattern.jpg");
    background-size: 50%;
    padding: 22px 0 29px;
}

#play-about .accordion .accordion-body .temp-content .shout
{
    display: block;
    width: 269px;
    height: 144px;
    background-image: url("./../img/sp/play/about/shout.png");
    background-repeat: no-repeat;
    background-size: 269px 144px;
    background-position: 0px 0px;
    margin: 0 auto;
    overflow: hidden;
    text-indent: 110%;
    white-space: nowrap;
}

#play-about .accordion .accordion-body .about-search h3
{
    display: block;
    width: 320px;
    height: 80px;
    background-image: url("./../img/sp/play/about/h3_search.png");
    background-repeat: no-repeat;
    background-size: 320px 80px;
    background-position: 0px 0px;
    overflow: hidden;
    text-indent: 110%;
    white-space: nowrap;
}

#play-about .accordion .accordion-body .about-search .img
{
    display: block;
    width: 278px;
    height: 400px;
    background-image: url("./../img/sp/play/about/img_search.png");
    background-repeat: no-repeat;
    background-size: 278px 400px;
    background-position: 0px 0px;
    margin: 0 auto;
    overflow: hidden;
    text-indent: 110%;
    white-space: nowrap;
}

#play-about .accordion .accordion-body .about-play h3
{
    display: block;
    width: 320px;
    height: 80px;
    background-image: url("./../img/sp/play/about/h3_play.png");
    background-repeat: no-repeat;
    background-size: 320px 80px;
    background-position: 0px 0px;
    overflow: hidden;
    text-indent: 110%;
    white-space: nowrap;
}

#play-about .accordion .accordion-body .about-play .img
{
    display: block;
    width: 278px;
    height: 373px;
    background-image: url("./../img/sp/play/about/img_play.png");
    background-repeat: no-repeat;
    background-size: 278px 373px;
    background-position: 0px 0px;
    margin: 0 auto;
    padding: 0 0 32px;
    overflow: hidden;
    text-indent: 110%;
    white-space: nowrap;
}

#card
{
    position: relative;
    width: 100%;
    overflow: hidden;
    text-indent: 110%;
    white-space: nowrap;
    z-index: 1;
}

#card h2
{
    display: block;
    width: 320px;
    height: 94px;
    background-image: url("./../img/sp/card/h2.png");
    background-repeat: no-repeat;
    background-size: 320px 94px;
    background-position: 0px 0px;
    background-color: rgba(0, 13, 47, 0.5);
}

#card h3
{
    display: block;
    width: 320px;
    height: 559px;
    background-image: url("./../img/sp/card/h3.png");
    background-repeat: no-repeat;
    background-size: 320px 559px;
    background-position: 0px 0px;
}

#card .time
{
    display: block;
    width: 96px;
    height: 36px;
    background-image: url("./../img/sp/card/time.png");
    background-repeat: no-repeat;
    background-size: 96px 36px;
    background-position: 0px 0px;
    margin: 13px auto 12px;
}

#card .shout
{
    display: block;
    width: 260px;
    height: 159px;
    background-image: url("./../img/sp/card/shout.png");
    background-repeat: no-repeat;
    background-size: 260px 159px;
    background-position: 0px 0px;
    margin: 18px 0 22px 52px;
}

#faq
{
    position: relative;
    background-color: #0a3541;
    z-index: 1;
}

#faq .accordion .accordion-title
{
    background-image: url(./../img/sp/accordion/accordion_first_bg.png);
}

#faq .accordion .accordion-title h2
{
    background-image: url("./../img/sp/faq/h2.png");
    width: 207px;
    background-size: 207px 37px;
    overflow: hidden;
    text-indent: 307px;
    white-space: nowrap;
}

#faq .accordion .accordion-body
{
    border-bottom: 0 solid #ffffff;
}

#faq .accordion .accordion-body .about-faq
{
    font-size: 12px;
    line-height: 1.6;
    color: #fff;
}

#faq .accordion .accordion-body .about-faq .question
{
    position: relative;
    background: #00293a;
    padding: 15px 44px 15px 54px;
    box-sizing: border-box;
    min-height: 50px;
    height: auto;
}

#faq .accordion .accordion-body .about-faq .question.hr-bottom
{
    border-bottom: 2px solid #0a3541;
}

#faq .accordion .accordion-body .about-faq .question::before
{
    content: " ";
    display: block;
    width: 34px;
    height: 34px;
    background-image: url("./../img/sp/faq/question.png");
    background-repeat: no-repeat;
    background-size: 34px 34px;
    background-position: 0px 0px;
    position: absolute;
    left: 9px;
    top: 15px;
}

#faq .accordion .accordion-body .about-faq .question::after
{
    content: " ";
    display: block;
    width: 20px;
    height: 20px;
    background-image: url("./../../common/img/sp/accordion/arrow_open.png");
    background-repeat: no-repeat;
    background-size: 20px 20px;
    background-position: 0px 0px;
    position: absolute;
    right: 9px;
    top: 0;
    bottom: 0;
    margin: auto 0;
}

#faq .accordion .accordion-body .about-faq .question.opened::after
{
    display: block;
    width: 20px;
    height: 20px;
    background-image: url("./../../common/img/sp/accordion/arrow_close.png");
    background-repeat: no-repeat;
    background-size: 20px 20px;
    background-position: 0px 0px;
}

#faq .accordion .accordion-body .about-faq .answer
{
    position: relative;
    background: #021923;
    overflow: hidden;
}

#faq .accordion .accordion-body .about-faq .answer p
{
    padding: 15px 44px 15px 54px;
    box-sizing: border-box;
}

#faq .accordion .accordion-body .about-faq .answer p::before
{
    content: " ";
    display: block;
    width: 34px;
    height: 34px;
    background-image: url("./../img/sp/faq/answer.png");
    background-repeat: no-repeat;
    background-size: 34px 34px;
    background-position: 0px 0px;
    position: absolute;
    left: 9px;
    top: 15px;
}

#terms
{
    position: relative;
    z-index: 1;
}

#terms .accordion .accordion-title
{
    background-image: url(./../img/sp/accordion/accordion_second_bg.png);
}

#terms .accordion .accordion-title h2
{
    background-image: url("./../img/sp/terms/h2.png");
    width: 67px;
    background-size: 67px 17px;
    overflow: hidden;
    text-indent: 167px;
    white-space: nowrap;
}

#terms .accordion .accordion-body
{
    background-color: #fff;
}

#terms .accordion .accordion-body .about-terms
{
    padding: 30px 20px 20px;
    overflow: hidden;
    text-align: left;
    font-size: 10px;
    line-height: 1.8em;
}

#terms .accordion .accordion-body .about-terms dt
{
    text-align: center;
    font-weight: bold;
    margin-bottom: 15px;
    font-size: 1.1em;
}

#terms .accordion .accordion-body .about-terms dd
{
    padding: 0 0 10px;
}

#banner
{
    position: relative;
    width: 100%;
    padding: 24px 0 12px;
    background-color: rgba(0, 13, 47, 0.6);
    z-index: 1;
}

#banner .kansou dt
{
    display: block;
    width: 255.5px;
    height: 17px;
    background-image: url("./../img/sp/banner/ttl_kansou.png");
    background-repeat: no-repeat;
    background-size: 255.5px 17px;
    background-position: 0px 0px;
    margin: 0 auto 8px;
    overflow: hidden;
    text-indent: 110%;
    white-space: nowrap;
}

#banner .theater dt
{
    display: block;
    width: 207px;
    height: 39px;
    background-image: url("./../img/sp/banner/ttl_theater.png");
    background-repeat: no-repeat;
    background-size: 207px 39px;
    background-position: 0px 0px;
    margin: 0 auto 8px;
    overflow: hidden;
    text-indent: 110%;
    white-space: nowrap;
}

#banner .xmasbox dt
{
    display: block;
    width: 264px;
    height: 19px;
    background-image: url("./../img/sp/banner/ttl_xmasbox.png");
    background-repeat: no-repeat;
    background-size: 264px 19px;
    background-position: 0px 0px;
    margin: 0 auto 8px;
    overflow: hidden;
    text-indent: 110%;
    white-space: nowrap;
}

#banner .theater dd a,
  #banner .theater dd img, #banner .xmasbox dd a,
  #banner .xmasbox dd img, #banner .kansou dd a,
  #banner .kansou dd img
{
    display: block;
    width: 270px;
    height: 85px;
    margin: 0 auto 19px;
}