@charset "UTF-8";
/* ==========================================================
  lp.css
========================================================== */
/* ====================
  @BASE
===================== */
body {
    background-color: #f6f1d6;
    color: #000;
    font-family: "ヒラギノ角ゴ ProN W3", "ヒラギノ角ゴ ProN W6", Hiragino Kaku Gothic ProN, Hiragino Kaku Gothic ProB, "Yu Gothic", YuGothic,  Arial, "メイリオ", Meiryo, sans-serif;
    font-size: 2.4rem;
    font-weight: normal;
    line-height: 1.5;
    vertical-align: baseline;
    overflow-x: hidden;
}

@media screen and (min-width: 768px) {
    body {
        background: url("../images/bg_pattern.jpg") repeat 0 0;
        background-attachment: fixed;
        min-width: 1200px;
    }
}

@media screen and (max-width: 767px) {
    body {
        width: 767px;
        min-width: 767px;
    }

    body::before {
        background: url("../images/bg_pattern.jpg") repeat 0 0;
        content: "";
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        padding-bottom: 108px;
        z-index: -1;
    }
}

::-moz-selection {
    background: #92dcd0 !important;
}

::selection {
    background: #92dcd0 !important;
}

img {
    width: 100%;
    max-width: 100%;
    height: auto;
    line-height: 1;
}

#wrap {
    width: 100%;
    position: relative;
}

#wrap::before, #wrap::after {
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: contain;
    content: "";
    display: block;
    position: fixed;
}

#wrap::before {
    background-image: url("../images/parts_dragon.png");
    width: 453px;
    height: 1036px;
    top: 0;
    left: 0;
}

#wrap::after {
    background-image: url("../images/parts_tiger.png");
    width: 436px;
    height: 932px;
    bottom: 0;
    right: 0;
}

#loading {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
}

#loading .load-content {
    width: 540px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}

#loading .bg-loading {
    background: url("../images/bg_pattern.jpg") repeat 0 0;
    width: 100%;
    height: 100%;
    position: absolute;
}

#loading .bg-loading::before, #loading .bg-loading::after {
    content: "";
    display: block;
    background-repeat: repeat-x;
    background-size: contain;
    width: 100%;
    height: 180px;
    position: absolute;
}

#loading .bg-loading::before {
    background: url("../images/bg_loading_top.png");
    top: 0;
}

#loading .bg-loading::after {
    background: url("../images/bg_loading_bottom.png");
    bottom: 0;
}

#main {
    background: url("../images/bg_main.png") no-repeat center 0;
    position: relative;
    z-index: 1;
}

@media screen and (min-width: 768px) {
    #main {
        margin: 0 0 70px;
    }
}

@media screen and (max-width: 767px) {
    #main {
        background: url("../images/bg_main_sp.png") no-repeat center 0;
        margin: 0 0 70px;
    }
}

#main .main-item {
    position: absolute;
    top: 0;
}

#main h1 {
    width: 540px;
    transform: translateX(-50%);
}

@media screen and (min-width: 768px) {
    #main .main-item.chara {
        width: 1300px;
        left: 50%;
        margin-left: -700px;
    }

    #main .main-item.effect-back {
        width: 1200px;
        left: 50%;
        transform: translateX(-50%);
    }

    #main .main-item.effect-front {
        width: 1800px;
        left: 50%;
        transform: translateX(-50%);
    }

    #main .main-item.lead {
        width: 540px;
        top: 585px;
        left: 30px;
    }

    #main .main-item.lead .lead-01 {
        width: 462px;
    }

    #main .main-item.lead .lead-02 {
        width: 206px;
        margin: -25px 0 0 40px;
    }

    #main .main-item.lead .lead-03 {
        width: 470px;
        margin: -52px 0 0 75px;
    }

    #main .main-item.catch {
        width: 160px;
        top: 40px;
        right: 30px;
    }

    #main .main-item.catch .catch-01 {
        width: 88px;
        margin: 0 0 0 70px;
    }

    #main .main-item.catch .catch-02 {
        width: 88px;
        margin: -174px 70px 0 0;
    }

    #main .main-item.btn {
        width: 230px;
        top: 575px;
        right: 30px;
    }

    #main h1 {
        top: 200px !important;
        left: 50%;
    }

    #main .youtube {
        width: 768px;
        margin: 0 auto;
        padding: 825px 0 0;
    }

    #main .youtube .title {
        padding: 0 105px;
    }
}

@media screen and (min-width: 1400px) {
    #main .main-item.lead {
        left: 50%;
        margin-left: -670px;
    }

    #main .main-item.catch {
        left: 50%;
        margin-left: 505px;
    }

    #main .main-item.btn {
        left: 50%;
        margin-left: 440px;
    }
}

@media screen and (max-width: 767px) {
    #main .main-item.chara, #main .main-item.effect-back, #main .main-item.effect-front {
        left: 0;
    }

    #main .main-item.lead {
        width: 685px;
        top: 1022px;
        left: 25px;
    }

    #main .main-item.lead .lead-01 {
        width: 580px;
    }

    #main .main-item.lead .lead-02 {
        width: 265px;
        margin: -32px 0 0 40px;
    }

    #main .main-item.lead .lead-03 {
        width: 590px;
        margin: -64px 0 0 75px;
    }

    #main .main-item.catch {
        width: 138px;
        top: 20px;
        right: 20px;
    }

    #main .main-item.catch .catch-01 {
        width: 76px;
        margin: 0 0 0 62px;
    }

    #main .main-item.catch .catch-02 {
        width: 76px;
        margin: -145px 62px 0 0;
    }

    #main .main-item.btn {
        width: 253px;
        top: 820px;
        left: 20px;
        z-index: 2;
    }

    #main .main-item.btn img.hover_on {
        display: none !important;
    }

    #main h1 {
        top: 360px !important;
        left: 50%;
    }

    #main .youtube {
        padding: 1330px 0 0;
    }

    #main .youtube .title {
        padding: 0 25px;
    }
}

section {
    position: relative;
    z-index: 1;
}

section h2, section h3 {
    position: relative;
}

@media screen and (min-width: 768px) {
    section h2 {
        width: 70%;
        margin: 0 auto;
    }

    section h3 {
        width: 70%;
        margin: 10px auto 10px;
    }

    section .btn {
        width: 476px;
        margin: 28px auto 0;
    }

    section .btn-l {
        width: 945px;
        margin: 0 auto;
    }
}

@media screen and (max-width: 767px) {
    section h2 {
        width: 95%;
        margin: 0 auto;
    }

    section h3 {
        margin: 10px 0 20px;
    }

    section .btn {
        width: 90%;
        margin: 0 auto;
    }

    section .btn img.hover_on {
        display: none !important;
    }

    section .btn-l {
        width: 90%;
        margin: 0 auto;
    }

    section .btn-l img.hover_on {
        display: none !important;
    }
}

section .chara-left, section .chara-right {
    position: absolute;
}

@media screen and (min-width: 768px) {
    section .chara-left, section .chara-right {
        left: 50%;
    }
}

section .inner {
    position: relative;
    z-index: 2;
}

@media screen and (min-width: 768px) {
    section .inner {
        width: 1000px;
        margin: 0 auto;
    }
}

section#section-card {
    background: url("../images/bg_section_card.png") no-repeat center 0;
}

section#section-card .chara-left {
    width: 660px;
}

section#section-card .chara-right {
    width: 700px;
}

section#section-card .card-area .return {
    display: none;
}

@media screen and (min-width: 768px) {
    section#section-card {
        padding: 165px 0 250px;
    }

    section#section-card .chara-left {
        top: 0;
        margin-left: -856px;
    }

    section#section-card .chara-right {
        top: 56px;
        margin-left: 198px;
    }

    section#section-card .card-area {
        position: relative;
        padding: 20px 0 0;
    }

    section#section-card .card-area .return {
        position: absolute;
        width: 94px;
        top: 0px;
        left: 50%;
        margin-left: 170px;
        display: block;
        cursor: pointer;
    }

    section#section-card ul {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: distribute;
        justify-content: space-around;
    }

    section#section-card ul li {
        width: 310px;
        -ms-flex-preferred-size: 310px;
        flex-basis: 310px;
    }

    section#section-card ul li:nth-child(2) {
        margin: 50px 0 0;
    }

    section#section-card ul li:nth-child(3) {
        margin: 100px 0 0;
    }
}

@media screen and (max-width: 767px) {
    section#section-card {
        background: url("../images/bg_section_card_sp.png") no-repeat center 0;
        padding: 645px 0 165px;
    }

    section#section-card .chara-left {
        top: 25px;
        left: -160px;
        z-index: 2;
    }

    section#section-card .chara-right {
        top: 10px;
        right: -200px;
    }

    section#section-card ul {
        padding: 20px 0 0;
    }

    section#section-card ul li {
        margin: -20px 0 0;
    }
}

section#section-new-element .chara-left {
    width: 820px;
}

section#section-new-element .chara-right {
    width: 840px;
}

@media screen and (min-width: 768px) {
    section#section-new-element {
        margin: -260px 0 0;
    }

    section#section-new-element .chara-left {
        top: 0px;
        margin-left: -840px;
    }

    section#section-new-element .chara-right {
        top: 0;
        margin-left: 50px;
    }

    section#section-new-element .contents-01 {
        padding: 195px 0 95px;
    }

    section#section-new-element .contents-02, section#section-new-element .contents-03 {
        padding: 0 0 95px;
    }
}

@media screen and (max-width: 767px) {
    section#section-new-element {
        margin: -150px 0 0;
    }

    section#section-new-element .chara-left {
        left: -37px;
        top: 43px;
    }

    section#section-new-element .chara-right {
        display: none;
    }

    section#section-new-element .contents-01 {
        padding: 690px 0 100px;
    }

    section#section-new-element .contents-02, section#section-new-element .contents-03 {
        padding: 0 0 100px;
    }
}

section#section-new-element .action-area {
    position: relative;
}

section#section-new-element .action-area ul {
    width: 900px;
    padding: 75px 0 15px;
    margin: 0 auto;
    display: -ms-flexbox;
    display: flex;
}

section#section-new-element .action-area ul li:first-child {
    -ms-flex-preferred-size: 248px;
    flex-basis: 248px;
}

section#section-new-element .action-area ul li:nth-child(2) {
    -ms-flex-preferred-size: 340px;
    flex-basis: 340px;
    margin: 40px 0 0 -70px;
}

section#section-new-element .action-area ul li:last-child {
    -ms-flex-preferred-size: 460px;
    flex-basis: 460px;
    margin: 76px 0 0 -80px;
}

@media screen and (max-width: 767px) {
    section#section-new-element .action-area ul {
        width: 707px;
        padding: 65px 0 35px;
    }

    section#section-new-element .action-area ul li:nth-child(2) {
        margin: 110px 0 0 -95px;
    }

    section#section-new-element .action-area ul li:last-child {
        margin: 310px 0 0 -190px;
    }
}

section#section-new-element .action-area > p {
    position: absolute;
}

section#section-new-element .action-area > p.hand {
    width: 300px;
}

section#section-new-element .action-area > p.hand img {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

section#section-new-element .action-area > p.hand img.on {
    opacity: 0;
}

@media screen and (min-width: 768px) {
    section#section-new-element .action-area > p.icon {
        top: 15px;
        left: 132px;
    }

    section#section-new-element .action-area > p.hand {
        top: 345px;
        left: 40px;
    }

    section#section-new-element .action-area > p.text {
        width: 430px;
        top: 415px;
        left: 298px;
    }
}

@media screen and (max-width: 767px) {
    section#section-new-element .action-area > p.icon {
        top: 0;
        left: 100px;
    }

    section#section-new-element .action-area > p.hand {
        top: 75px;
        left: 370px;
    }

    section#section-new-element .action-area > p.text {
        top: 565px;
        left: -90px;
    }
}

section#section-new-element .ss {
    width: 767px;
    margin: 0 auto;
}

section#section-new-element .contents-03 {
    text-align: center;
    z-index: 3;
}

section#section-new-element .contents-03 .fire {
    position: absolute;
}

section#section-new-element .contents-03 .youtube-area {
    position: relative;
}

section#section-new-element .contents-03 .youtube-area .yt-mask {
    overflow: hidden;
}

section#section-new-element .contents-03 .youtube-area .yt-mask iframe {
    width: 101%;
    height: 101%;
    position: absolute;
    top: 50%;
    left: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%);
}

@media screen and (min-width: 768px) {
    section#section-new-element .contents-03 .fire {
        width: 1260px;
        top: 0;
        left: 50%;
        margin-left: -630px;
    }

    section#section-new-element .contents-03 .youtube-area {
        height: 470px;
    }

    section#section-new-element .contents-03 .youtube-area ul {
        width: 440px;
        display: -ms-flexbox;
        display: flex;
        position: absolute;
        top: 0;
        left: -65px;
        z-index: 2;
    }

    section#section-new-element .contents-03 .youtube-area ul li {
        -ms-flex-preferred-size: 220px;
        flex-basis: 220px;
    }

    section#section-new-element .contents-03 .youtube-area ul li:last-child {
        margin: 30px 0 0;
    }

    section#section-new-element .contents-03 .youtube-area .yt-mask {
        position: absolute;
        width: 703px;
        height: 395px;
        border: 3px solid #b9a877;
        top: 65px;
        right: -60px;
    }
}

@media screen and (max-width: 767px) {
    section#section-new-element .contents-03 .fire {
        width: 1260px;
        position: absolute;
        top: 0;
        left: 50%;
        margin-left: -630px;
    }

    section#section-new-element .contents-03 .youtube-area {
        margin: 0 0 20px;
    }

    section#section-new-element .contents-03 .youtube-area ul {
        padding: 0 17px;
        display: -ms-flexbox;
        display: flex;
    }

    section#section-new-element .contents-03 .youtube-area ul li {
        -ms-flex-preferred-size: 367px;
        flex-basis: 367px;
    }

    section#section-new-element .contents-03 .youtube-area ul li:last-child {
        margin: 65px 0 0;
    }

    section#section-new-element .contents-03 .youtube-area .yt-mask {
        width: 693px;
        height: 390px;
        border: 4px solid #b9a877;
        margin: 30px auto 0;
        position: relative;
    }
}

section#section-new-element .more-area {
    background: url("../images/bg_more_area.jpg") repeat 0 0;
    padding: 110px 0 100px;
    position: relative;
}

section#section-new-element .more-area::before, section#section-new-element .more-area::after {
    content: "";
    display: block;
    background-repeat: no-repeat;
    background-size: contain;
    width: 768px;
    height: 500px;
    position: absolute;
}

section#section-new-element .more-area::before {
    background: url("../images/parts_more_left.png");
    bottom: 0;
    left: 0;
}

section#section-new-element .more-area::after {
    background: url("../images/parts_more_right.png");
    top: 0;
    right: 0;
}

section#section-new-element .more-area .fire {
    width: 1050px;
    position: absolute;
    top: -185px;
    left: 50%;
    margin-left: -460px;
    z-index: 2;
}

section#section-new-element .more-area .h2-05-wrap {
    width: 920px;
    height: 190px;
    margin: 0 auto;
    position: relative;
}

section#section-new-element .more-area .h2-05-wrap .bg-brush {
    position: absolute;
    top: 15px;
    left: 0;
}

section#section-new-element .more-area .h2-05-wrap h2 {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

section#section-new-element .more-area .btn-l {
    margin: -40px auto 0;
}

@media screen and (max-width: 767px) {
    section#section-new-element .more-area::before, section#section-new-element .more-area::after {
        width: 620px;
        height: 410px;
    }

    section#section-new-element .more-area .h2-05-wrap {
        left: 50%;
        transform: translateX(-50%);
    }

    section#section-new-element .more-area .h2-05-wrap .bg-brush {
        top: 32px;
        left: 0;
    }

    section#section-new-element .more-area .h2-05-wrap h2 {
        width: 80%;
    }

    section#section-new-element .more-area .btn-l {
        margin: 0 auto;
    }
}

section#section-new-element .campaign-area {
    padding: 85px 0 10px;
}

section#section-new-element .campaign-area h2 {
    width: 100%;
    margin: 0 auto 20px;
}

section#section-new-element .campaign-area .img-tweet {
    width: 768px;
    margin: 0 auto;
    border: 3px solid #b9a877;
}

@media screen and (max-width: 767px) {
    section#section-new-element .campaign-area {
        padding: 95px 0 75px;
    }

    section#section-new-element .campaign-area .img-tweet {
        width: 702px;
        margin: 0 auto 15px;
    }
}

section#section-cv {
    background: url("../images/bg_bottom_grade.png") repeat-x center bottom, url("../images/bg_cv.png") no-repeat center 0;
    padding: 175px 0 100px;
}

section#section-cv .chara-left {
    width: 700px;
}

section#section-cv .chara-right {
    width: 690px;
}

@media screen and (min-width: 768px) {
    section#section-cv .chara-left {
        top: 50px;
        margin-left: -890px;
    }

    section#section-cv .chara-right {
        top: 0;
        margin-left: 138px;
    }

    section#section-cv h3 {
        width: 800px;
        margin: -10px auto 0;
    }
}

@media screen and (max-width: 767px) {
    section#section-cv {
        padding: 650px 0 50px;
    }

    section#section-cv .chara-left {
        top: 70px;
        left: -210px;
        z-index: 2;
    }

    section#section-cv .chara-right {
        top: 0;
        right: -130px;
    }

    section#section-cv h3 {
        margin: -10px 0 0;
    }

    section#section-cv .btn-l {
        margin: -50px auto 0;
    }

    section#section-cv .housing {
        padding: 0 20px;
    }
}

.bnr-area {
    background: url("../images/bg_bnr_area.png") repeat 0 0;
    padding: 50px 0;
    position: relative;
    z-index: 1;
}

.bnr-area .bnr {
    width: 709px;
    margin: 0 auto;
}

@media screen and (min-width: 768px) {
    .bnr-area .bnr a:hover {
        transition: .2s;
        opacity: 0.85;
    }
}

footer {
    background: #fff;
    padding: 60px 0 50px;
    position: relative;
    z-index: 1;
}

footer .sns {
    font-size: 0;
    text-align: center;
    margin: 0 0 32px;
}

footer .sns li {
    width: 106px;
    height: auto;
    margin: 0 16px;
    display: inline-block;
}

footer .sega {
    width: 210px;
    margin: 0 auto;
}

footer .copyright {
    font-size: 20px;
    line-height: 1.65;
    max-height: 100%;
    padding: 0 40px;
    margin: 20px 0 0;
}

footer .copyright a {
    color: #000;
    text-decoration: underline;
}

footer .copyright a:hover {
    text-decoration: none;
}

footer .copyright .txtgray {
    color: #888;
}

footer .copyright .txtgray a {
    color: #888;
}

@media screen and (min-width: 768px) {
    footer {
        background: #fff;
        padding: 60px 0 55px;
    }

    footer .sns {
        margin: 0 0 28px;
    }

    footer .sns li {
        width: 46px;
        margin: 0 10px;
    }

    footer .sns li a:hover {
        opacity: 0.85;
    }

    footer .sega {
        width: 104px;
    }

    footer .sega a:hover {
        opacity: 0.85;
    }

    footer .copyright {
        font-size: 12px;
        text-align: center;
        margin: 30px 0 0;
    }

    footer .copyright a {
        color: #000;
        text-decoration: underline;
    }

    footer .copyright a:hover {
        text-decoration: none;
    }
}

.mfp-close:hover, .mfp-close:focus {
    background: url("/assets/images/common/btn_close_d.png") no-repeat 0 0;
    background-size: contain;
    opacity: 0.8;
}

.mfp-iframe-scaler {
    padding-top: 56.5%;
}