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

.root
{
    position: relative;
}

#kv
{
    position: relative;
    width: 1000px;
    height: 1164px;
    margin: 0 auto;
    overflow: hidden;
    text-indent: 110%;
    white-space: nowrap;
    z-index: 1;
}

#kv h1
{
    display: block;
    width: 702px;
    height: 238px;
    background-image: url("./../img/pc/kv/h1.png");
    background-repeat: no-repeat;
    background-size: 702px 238px;
    background-position: 0px 0px;
    position: absolute;
    top: 20px;
    left: 50%;
    margin-left: -351px;
}

#kv .time
{
    display: block;
    width: 254px;
    height: 52px;
    background-image: url("./../img/pc/kv/time.png");
    background-repeat: no-repeat;
    background-size: 254px 52px;
    background-position: 0px 0px;
    position: absolute;
    top: 270px;
    left: 50%;
    margin-left: -127px;
    z-index: 4;
}

#kv .img-kv .face
{
    display: block;
    width: 420px;
    height: 540px;
    background-image: url("./../img/pc/kv/face.png");
    background-repeat: no-repeat;
    background-size: 420px 540px;
    background-position: 0px 0px;
    position: absolute;
    top: 302px;
    left: 290px;
    z-index: 3;
}

#kv .img-kv .face_bg
{
    display: block;
    width: 420px;
    height: 540px;
    background-image: url("./../img/pc/kv/face_bg.png");
    background-repeat: no-repeat;
    background-size: 420px 540px;
    background-position: 0px 0px;
    position: absolute;
    top: 302px;
    left: 290px;
}

#kv .img-kv .shout
{
    display: block;
    width: 306px;
    height: 244px;
    background-image: url("./../img/pc/kv/shout.png");
    background-repeat: no-repeat;
    background-size: 306px 244px;
    background-position: 0px 0px;
    position: absolute;
    top: 301px;
    right: 110px;
    z-index: 2;
}

#kv .img-kv .logo
{
    display: block;
    width: 150px;
    height: 114px;
    background-image: url("./../img/pc/kv/logo.png");
    background-repeat: no-repeat;
    background-size: 150px 114px;
    background-position: 0px 0px;
    position: absolute;
    top: 542px;
    right: 147px;
    z-index: 3;
}

#kv .img-kv .movie_logo
{
    display: block;
    width: 216px;
    height: 190px;
    background-image: url("./../img/pc/kv/movie_logo.png");
    background-repeat: no-repeat;
    background-size: 216px 190px;
    background-position: 0px 0px;
    position: absolute;
    top: 937px;
    left: 101px;
    z-index: 5;
}

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

#kv .banner a
{
    display: block;
    width: 800px;
    height: 200px;
    background-image: url("./../img/pc/kv/banner.png");
    background-repeat: no-repeat;
    background-size: 800px 200px;
    background-position: 0px 0px;
    position: absolute;
    top: 1160px;
    left: 50%;
    margin-left: -400px;
}

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

#gacha h2
{
    width: 100%;
    height: 190px;
    background-image: url("./../img/pc/gacha/h2.png");
    background-size: 663px 190px;
    background-position: center center;
    background-repeat: no-repeat;
    margin: 0 auto;
    background-color: rgba(0, 13, 47, 0.5);
    overflow: hidden;
    text-indent: 110%;
    white-space: nowrap;
}

#gacha h3
{
    display: block;
    width: 966px;
    height: 878px;
    background-image: url("./../img/pc/gacha/h3.png");
    background-repeat: no-repeat;
    background-size: 966px 878px;
    background-position: 0px 0px;
    margin: -65px auto 0;
    overflow: hidden;
    text-indent: 110%;
    white-space: nowrap;
}

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

#gacha .point
{
    height: 0;
    overflow: hidden;
    text-indent: 110%;
    white-space: nowrap;
}

#gacha .time
{
    display: block;
    width: 238px;
    height: 52px;
    background-image: url("./../img/pc/gacha/time.png");
    background-repeat: no-repeat;
    background-size: 238px 52px;
    background-position: 0px 0px;
    margin: 18px auto 9px;
    overflow: hidden;
    text-indent: 110%;
    white-space: nowrap;
}

#gacha .wrap
{
    width: 100%;
    height: 2264px;
    background-image: url("./../img/pc/gacha/character/character_bg.png");
    background-size: 1800px 2264px;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
    margin: 0 auto;
    overflow: hidden;
    text-indent: 110%;
    white-space: nowrap;
}

#gacha .wrap .alternative-dragon, #gacha .wrap .arthur, #gacha .wrap .shiro-amakusa-tokisada, #gacha .wrap .ribbon, #gacha .wrap .sakamoto-ryoma, #gacha .wrap .napoleon, #gacha .wrap .epoca
{
    height: 0;
}

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

#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/pc/accordion/accordion_first_bg.png);
}

#gacha-about .accordion .accordion-title h2
{
    background-image: url("./../img/pc/gacha/about/h2.png");
    background-size: 322px 28px;
    overflow: hidden;
    text-indent: 110%;
    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");
    padding: 48px 0 81px;
}

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

#gacha-about .accordion .accordion-body .about-get
{
    position: relative;
}

#gacha-about .accordion .accordion-body .about-get::after
{
    content: " ";
    display: block;
    width: 1000px;
    height: 135px;
    position: absolute;
    top: 0;
    right: 50%;
    margin-right: 350px;
    background-color: #021922;
}

#gacha-about .accordion .accordion-body .about-get h3
{
    position: relative;
    width: 100%;
    height: 135px;
    background-image: url("./../img/pc/gacha/about/h3_get.png");
    background-size: 700px 135px;
    background-position: center center;
    background-repeat: no-repeat;
    margin: 0 auto;
    background-color: #00293a;
    overflow: hidden;
    text-indent: 110%;
    white-space: nowrap;
}

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

#gacha-about .accordion .accordion-body .about-use
{
    position: relative;
}

#gacha-about .accordion .accordion-body .about-use::after
{
    content: " ";
    display: block;
    width: 1000px;
    height: 135px;
    position: absolute;
    top: 0;
    right: 50%;
    margin-right: 350px;
    background-color: #021922;
}

#gacha-about .accordion .accordion-body .about-use h3
{
    position: relative;
    width: 100%;
    height: 135px;
    background-image: url("./../img/pc/gacha/about/h3_use.png");
    background-size: 700px 135px;
    background-position: center center;
    background-repeat: no-repeat;
    margin: 0 auto;
    background-color: #00293a;
    overflow: hidden;
    text-indent: 110%;
    white-space: nowrap;
}

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

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

#play h2
{
    width: 100%;
    height: 190px;
    background-image: url("./../img/pc/play/h2.png");
    background-size: 644px 190px;
    background-position: center center;
    background-repeat: no-repeat;
    margin: 0 auto;
    background-color: rgba(0, 13, 47, 0.5);
    overflow: hidden;
    text-indent: 110%;
    white-space: nowrap;
}

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

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

#play .time
{
    display: block;
    width: 238px;
    height: 52px;
    background-image: url("./../img/pc/play/time.png");
    background-repeat: no-repeat;
    background-size: 238px 52px;
    background-position: 0px 0px;
    margin: 18px auto 14px;
    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: 500px;
    height: 596px;
    background-image: url("./../img/pc/play/genome_normal.png");
    background-repeat: no-repeat;
    background-size: 500px 596px;
    background-position: 0px 0px;
    margin: 0 auto 60px;
}

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

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

#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/pc/accordion/accordion_first_bg.png);
}

#play-about .accordion .accordion-title h2
{
    background-image: url("./../img/pc/play/about/h2.png");
    background-size: 308px 34px;
    overflow: hidden;
    text-indent: 110%;
    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");
    padding: 48px 0 81px;
}

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

#play-about .accordion .accordion-body .about-search
{
    position: relative;
}

#play-about .accordion .accordion-body .about-search::after
{
    content: " ";
    display: block;
    width: 1000px;
    height: 135px;
    position: absolute;
    top: 0;
    right: 50%;
    margin-right: 350px;
    background-color: #021922;
}

#play-about .accordion .accordion-body .about-search h3
{
    position: relative;
    width: 100%;
    height: 135px;
    background-image: url("./../img/pc/play/about/h3_search.png");
    background-size: 700px 135px;
    background-position: center center;
    background-repeat: no-repeat;
    margin: 0 auto;
    background-color: #00293a;
    overflow: hidden;
    text-indent: 110%;
    white-space: nowrap;
}

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

#play-about .accordion .accordion-body .about-play
{
    position: relative;
}

#play-about .accordion .accordion-body .about-play::after
{
    content: " ";
    display: block;
    width: 1000px;
    height: 135px;
    position: absolute;
    top: 0;
    right: 50%;
    margin-right: 350px;
    background-color: #021922;
}

#play-about .accordion .accordion-body .about-play h3
{
    position: relative;
    width: 100%;
    height: 135px;
    background-image: url("./../img/pc/play/about/h3_play.png");
    background-size: 700px 135px;
    background-position: center center;
    background-repeat: no-repeat;
    margin: 0 auto;
    background-color: #00293a;
    overflow: hidden;
    text-indent: 110%;
    white-space: nowrap;
}

#play-about .accordion .accordion-body .about-play .img
{
    display: block;
    width: 700px;
    height: 494px;
    background-image: url("./../img/pc/play/about/img_play.png");
    background-repeat: no-repeat;
    background-size: 700px 494px;
    background-position: 0px 0px;
    margin: 0 auto;
    padding: 0 0 69px;
    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
{
    width: 100%;
    height: 190px;
    background-image: url("./../img/pc/card/h2.png");
    background-size: 674px 190px;
    background-position: center center;
    background-repeat: no-repeat;
    margin: 0 auto;
    background-color: rgba(0, 13, 47, 0.5);
}

#card h3
{
    display: block;
    width: 906px;
    height: 800px;
    background-image: url("./../img/pc/card/h3.png");
    background-repeat: no-repeat;
    background-size: 906px 800px;
    background-position: 0px 0px;
    margin: 0 auto;
}

#card .time
{
    display: block;
    width: 156px;
    height: 52px;
    background-image: url("./../img/pc/card/time.png");
    background-repeat: no-repeat;
    background-size: 156px 52px;
    background-position: 0px 0px;
    margin: 18px auto 14px;
}

#card .shout
{
    display: block;
    width: 906px;
    height: 256px;
    background-image: url("./../img/pc/card/shout.png");
    background-repeat: no-repeat;
    background-size: 906px 256px;
    background-position: 0px 0px;
    margin: 67px auto 94px;
}

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

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

#faq .accordion .accordion-title h2
{
    background-image: url("./../img/pc/faq/h2.png");
    background-size: 430px 34px;
    overflow: hidden;
    text-indent: 110%;
    white-space: nowrap;
}

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

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

#faq .accordion .accordion-body .about-faq .question
{
    position: relative;
    background: #00293a;
    box-sizing: border-box;
    height: auto;
}

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

#faq .accordion .accordion-body .about-faq .question span
{
    position: relative;
    display: block;
    width: 560px;
    margin: 0 auto;
    padding: 28px 0 26px;
}

#faq .accordion .accordion-body .about-faq .question span::before
{
    content: " ";
    display: block;
    width: 52px;
    height: 52px;
    background-image: url("./../img/pc/faq/question.png");
    background-repeat: no-repeat;
    background-size: 52px 52px;
    background-position: 0px 0px;
    position: absolute;
    left: -72px;
    top: 0;
    bottom: 0;
    margin: auto 0;
}

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

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

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

#faq .accordion .accordion-body .about-faq .answer span
{
    position: relative;
    display: block;
    width: 560px;
    margin: 0 auto;
    padding: 28px 0 26px;
}

#faq .accordion .accordion-body .about-faq .answer span::before
{
    content: " ";
    display: block;
    width: 52px;
    height: 52px;
    background-image: url("./../img/pc/faq/answer.png");
    background-repeat: no-repeat;
    background-size: 52px 52px;
    background-position: 0px 0px;
    position: absolute;
    left: -72px;
    top: 17px;
}

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

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

#terms .accordion .accordion-title h2
{
    background-image: url("./../img/pc/terms/h2.png");
    background-size: 118px 32px;
    overflow: hidden;
    text-indent: 110%;
    white-space: nowrap;
}

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

#terms .accordion .accordion-body .about-terms
{
    width: 700px;
    margin: 0 auto;
    padding: 60px 0 50px;
    overflow: hidden;
    text-align: left;
    font-size: 12px;
    line-height: 1.8em;
}

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

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

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

#banner .wrap
{
    width: 1000px;
    height: 240px;
    margin: 0 auto;
    padding: 51px 0;
    box-sizing: border-box;
    text-align: center;
}

#banner .wrap .kansou
{
    display: inline-block;
    margin: 0 10px;
}

#banner .wrap .kansou dt
{
    display: block;
    width: 257px;
    height: 19px;
    background-image: url("./../img/pc/banner/ttl_kansou.png");
    background-repeat: no-repeat;
    background-size: 257px 19px;
    background-position: 0px 0px;
    margin: 0 auto 4px;
    height: 24px;
    background-position: center;
    overflow: hidden;
    text-indent: 110%;
    white-space: nowrap;
}

#banner .wrap .theater
{
    display: inline-block;
    margin: 0 10px;
}

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

#banner .wrap .xmasbox
{
    display: inline-block;
    margin: 0 10px;
}

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

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