html {
    background-color: black;
}

.pc {
    display: block;
}

.sp {
    display: none;
}

#all-wrap {
    display: flex;
    max-width: 1920px;
    margin: 0 auto;
    flex-flow: column;
    justify-content: space-between;
    min-height: 100vh;
    overflow-x: hidden;
}

#main-wrap {
    position: relative;
    flex: 1;
    width: 100%;
    /*padding-top: 100px;*/
    /*ヘッダー分*/
    margin: -120px auto 50px;
    background: URL(/products/tenkassb/image/common/bg.png) no-repeat;
    background-size: 100% auto;
    z-index: 1;
}

.contents-wrap {
    position: relative;
    width: 100%;
    margin: 0 auto;
}

/*ページ共通タイトル*/
.page-title {
    max-width: 811px;
    width: 100%;
    margin: 0 auto;
}

.page-title img {
    width: 100%;
}

/*上部に戻る*/
.page-up-btn {
    position: fixed;
    max-width: 120px;
    width: 100%;
    right: 2%;
    bottom: 5%;
    z-index: 100;
}

/*飾り*/
.cloud {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    z-index: -1;
}

.cloud-right,
.cloud-left {
    position: absolute;
}

.cloud-right {
    max-width: 480px;
    width: 22%;
    top: 45%;
    right: -10%;
    animation: right-move 3s infinite ease-in-out .8s alternate;
}

.cloud-left {
    max-width: 795px;
    width: 41%;
    bottom: 0%;
    left: -15%;
    animation: left-move 3s infinite ease-in-out .8s alternate;
}

/*体験版バナー*/
#trial-wrap {
    position: fixed;
    left: 0;
    bottom: 250px;
    z-index: 200;
}

/*一コマ漫画バナー*/
#manga-wrap {
    position: fixed;
    left: 0;
    bottom: 85px;
    z-index: 200;
}

/*購入バナー*/
#buy-wrap {
    position: fixed;
    left: 0;
    bottom: 10px;
    z-index: 200;
}

.common-unit {
    width: 100%;
    height: 50px;
    line-height: 50px;
    color: white;
    text-align: center;
}

.common-unit:hover {
    opacity: 0.7;
}

.unit-buy {
    margin-top: 17px;
    margin-bottom: 15px;
    font-size: 31px;
    background-color: #45BF00;
}

.unit-products {
    font-size: 21px;
    background-color: #A1A1A1;
}

/*▼共通モーダルウィンドウ*/
.common-modal {
    position: relative;
    margin: 0 auto;
    max-width: 500px;
    width: 100%;
    padding: 10px;
    background: white;
    border-radius: 0.6em;
}

.common-modal a {
    text-decoration: none;
}

p.popup-modal-dismiss {
    width: 100%;
    margin-top: 10px;
    text-align: right;
}

p.popup-modal-dismiss a {
    font-size: 29px;
    line-height: 50px;
    color: #5A5A5A;
}

p.popup-modal-dismiss a:hover {
    opacity: 0.7;
}

/*▲共通モーダルウィンドウ*/

/*▼購入ポップアップ*/
.buy-pop {
    max-width: 972px;
    max-height: 637px;
    padding: 57px 74px;
}

.buy-pop .common-modal a {
    max-width: 825px;
}

.buy-pop .common-modal a+a {
    margin-bottom: 19px;
}

.close-btn {
    position: absolute;
    top: -50px !important;
    right: -50px !important;
}

.banner-wrap {
    position: fixed;
    left: 0;
    bottom: 10px;
    z-index: 200;
}

@keyframes left-move {
    0% {
        transform: translate(0, 0)
    }

    50% {
        transform: translate(-7px, 0)
    }

    100% {
        transform: translate(0, 0)
    }
}

@keyframes right-move {
    0% {
        transform: translate(0, 0)
    }

    50% {
        transform: translate(7px, 0)
    }

    100% {
        transform: translate(0, 0)
    }
}



/******************************************/
#header-sp {
    display: none;
}

#header-wrap {
    width: 1920px;
    height: 236px;
    background: URL(/products/tenkassb/image/common/header.png) no-repeat;
    background-position: left;
    z-index: 100;
}

#header-contents-wrap {
    position: relative;
    width: 1501px;
    height: 209px;
    margin: -28px 0 0 85px;
    background: URL(/products/tenkassb/image/common/header_btn_bg.png) no-repeat;
}

#header-logo {
    position: absolute;
    top: 32px;
    left: 108px;
}

#header-logo:hover {
    opacity: 0.8;
}

#footer-logo img {
    margin: 0 auto;
}

#header-list {
    position: absolute;
    display: flex;
    top: 67px;
    left: 479px;
}

#header-list li+li {
    margin-left: 23px;
}

/******************************************/
/* footer */
#footer-wrap {
    width: 100%;
    color: #fff;
}

#footer-logo {
    display: flex;
    width: 100%;
    margin: 0 auto;
    justify-content: center;
}

#footer-copyright {
    font-size: 15px;
    text-align: center;
}

/******************************************/
@media screen and (max-width: 1501px) {
    #main-wrap {
        margin-top: -170px;
    }

    #header-pc {
        display: none;
    }

    #header-sp {
        display: block;
    }

    #header-wrap {
        position: relative;
        width: 100%;
        /*width: 1501px;
        height: 209px;
        margin: -28px 0 0 85px;*/
        background: URL(/products/tenkassb/image/common/header_sp.png) no-repeat;
        background-size: 100% auto;
    }

    #header-contents-wrap {
        width: 100%;
        margin: 0 auto;
        background: none;
    }

    #header-logo {
        top: 0;
        left: 0;
    }

    #header-logo:hover {
        opacity: 1;
    }

    #toggle-bg {
        position: absolute;
        top: 0;
        right: 0;
    }

    #tg-buttun-1 {
        position: absolute;
        width: 90px;
        top: 5px;
        right: 5px;
        cursor: pointer;
    }

    #tg-buttun-1 img {
        width: 100%;
    }

    #tg-buttun-2 {
        position: absolute;
        top: 15px;
        right: 20px;
    }

    #slide-wrap {
        display: none;
        position: absolute;
        width: 282px;
        height: 420px;
        top: 0;
        right: 0;
        background-color: rgba(0, 0, 0, 0.8);
    }

    #slide-wrap .close {
        position: absolute;
        top: 18px;
        right: 20px;
        font-size: 15px;
        color: #a4a4a4;
    }

    #menu-sp {
        width: 200px;
        height: 270px;
        margin-top: 80px;
        margin-left: 75px;
    }

    #menu-sp li {
        position: relative;
        display: block;
        color: #fff;
        font-size: 24px;
        line-height: 35px;
        text-align: left;
    }

    #menu-sp li+li {
        margin-top: 20px;
    }

    #menu-sp li a:hover {
        opacity: 0.7;
    }

    .inactive {
        pointer-events: none;
        color: gray !important;
    }
}

/******************************************/
@media screen and (max-width: 520px) {
    .buy-wap {
        max-width: 300px;
    }

    .common-unit {
        width: 300px;
    }

    .unit-buy {
        font-size: 20px;
    }
}

/******************************************/
/*SP表示*/
@media screen and (max-width: 428px) {
    .pc {
        display: none;
    }

    .sp {
        display: block;
    }

    #main-wrap {
        margin-top: -250px;
        padding-bottom: 30px;
        background: URL(/products/tenkassb/image/common/bg_sp.png) no-repeat;
    }

    .page-up-btn {
        position: relative;
        margin: 50px auto 0;
    }

    #header-logo {
        max-width: 140px;
    }

    #header-logo img {
        width: 100%;
    }

    #toggle-bg {
        max-width: 82px;
    }

    #toggle-bg img {
        width: 100%;
    }

    #tg-buttun-1 {
        width: 50px;
        top: 0;
        right: 0;
    }

    #slide-wrap {
        width: 100%;
        height: 100vh;
    }

    #menu-sp {
        margin-top: 20%;
        margin-left: 30%;
    }

    #footer-copyright {
        margin: 10px auto;
        font-size: 10px;
    }

    #trial-wrap {
        bottom: 140px;
    }

    #trial-wrap img {
        width: 50%;
    }

    #manga-wrap {
        bottom: 60px;
    }

    #manga-wrap img {
        width: 50%;
    }

    #buy-wrap {
        bottom: 5px;
    }

    .buy-img {
        width: 150px;
    }

    .buy-img img {
        width: 100%;
    }

    .banner-wrap {
        bottom: 0;
    }

    .banner-wrap li {
        width: 150px;
    }

    .banner-wrap li img {
        width: 100%;
    }
}