.hero{
    padding: 20rem;
}

.hero__content{
    padding: 0;
    margin-bottom: 50rem;
}
.hero__visual-img{
    display: block;
    width: 300rem;
    margin: 0 auto 30rem;
}
.hero__content-title{
    font-size: 26rem;
    width: fit-content;
    margin: 0 auto 65rem;
}

@media screen and (min-width: 600px) {
    .hero__content{
        flex-direction: column;
        max-width: 940rem;
        padding: 20rem;
        margin-bottom: 0;
    }
    .hero__content-flex{
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 80rem;
    }
    .hero__visual-img{
        display: block;
        width: 400rem;
        margin: 0;
    }
    .hero__content-title{
        display: none;
    }
}

.page__content{
    padding: 50rem 20rem;
}
.common__fukidashi{
    margin: 0 auto 50rem;
}
.common__fukidashi-text{
    font-size: 12rem;
    margin: 0 auto;
    font-family: dotgothic16, sans-selif;
}
.common__asterisk-text{
    color: var(--nmBlack);
    font-size: 12rem;
    text-align: center;
    margin-top: 12rem;
    font-family: dotgothic16, sans-selif;
}
.common__asterisk-text::before{
    display: inline-block;
    content: "※";
}
@media screen and (min-width: 600px) {
    .page__content{
        padding: 120rem 20rem;
    }
    .common__fukidashi{
        margin: 0;
        margin-right: 40rem;
        transform: rotate(-5deg);
    }
    .common__fukidashi-text{
        font-size: 18rem;
        margin: 0 auto;
    }
    .common__fukidashi-text--hamburger{
        font-size: 14rem;
        font-family: x8y12pxTheStrongGamer, dotgothic16, sans-serif;
    }
}


.page__list{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 120rem 0 60rem;
    padding: 20rem 0;
}
.page__item{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: calc((100% - 30rem) / 2);
    margin-bottom: 30rem;
    text-shadow: -2rem 2rem 0 var(--nmBlack);
}
.page__item:nth-last-child(-n+2){
    margin-bottom: 0;
}
.page__item-thum{
    position: relative;
    background-color: var(--nmWhite);
    border-radius: 50%;
    width: 100%;
    margin-bottom: 10rem;
    padding: 8rem;
}
.page__item-thum-img{
    display: block;
    width: 100%;
    border-radius: 50%;
    position: relative;
    z-index: 15;
}
.page__item-thum::after{
}
.page__item-title{
    font-size: 16rem;
    text-align: center;
}
.page__item-level{
    font-size: 13rem;
    display: flex;
    margin-bottom: 10rem;
    color: #FFE600;
}
.page__item-level-title{
    margin-right: 10rem;
}
.page__item-text{
    width: 100%;
    display: block;
    width: fit-content;
    font-family: dotgothic16, sans-selif;
    font-size: 12rem;
    font-weight: bold;
    letter-spacing: 0.1em;
}
@media screen and (min-width: 600px) {
    .page__list{
        max-width: 1000rem;
        margin: 0 auto 100rem;
    }
    .page__item{
        transition: .3s all ease;
        width: 300rem;
        margin-bottom: 100rem;
        cursor: url("../img/neo-morisalamd-cursor-hover.png"), auto;
    }
    .page__item:nth-last-child(-n+3){
        margin-bottom: 0;
    }
    .page__item:hover .page__item-title{
        color: #FFC700;
    }
    .page__item:hover .page__item-text{
        color: #FFC700;
    }
    .page__item:hover .page__item-thum{
        display: block;
        width: 300rem;
        height: 300rem;
        background-repeat: no-repeat;
        background-size: contain;
    }
    .page__item-thum{
        position: relative;
        background-color: var(--nmWhite);
        border-radius: 50%;
        width: 300rem;
        height: 300rem;
        margin-bottom: 20rem;
        padding: 10rem;
    }
    .page__item-thum-img{
        position: absolute;
        width: 270rem;
        top: 15rem;
        left: 15rem;
    }
    .page__item-title{
        font-size: 24rem;
    }
    .page__item-level{
        font-size: 20rem;
        margin-bottom: 20rem;
    }
    .page__item-level-title{
        margin-right: 20rem;
    }
    .page__item-text{
        font-size: 16rem;
    }
}

.page--daretoku{
    background-color: var(--nmBlue);
}
.page--kuseimo{
    background-color: var(--nmPurple);
}
.page--morisalike{
    background-color: var(--nmRed);
}
.page__item-thum--daretoku{
    box-shadow: -5px 7px 0px var(--nmBlack);
}
.page__item-thum--daretoku::before{
    content: "";
    position: absolute;
    display: block;
    width: 60rem;
    height: 100rem;
    background-image: url("../img/keychain.png");
    background-repeat: no-repeat;
    background-size: contain;
    transform: rotate(20deg);
    right: -5rem;
    top: -85rem;
    z-index: 20;
}
.page__item-thum--daretoku::after{
    content: "";
    display: block;
    width: 150rem;
    height: 150rem;
    border-radius: 50%;
    background-image: url("../img/kry-light.gif");
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 50;
    opacity: .6;
}
@keyframes cd{
    0%{
        transform:rotate(0);
    }
    100%{
        transform:rotate(360deg);
    }
}
.page__item-thum--morisalike{
    z-index: 10;
    border-radius: 0;
}
.page__item-thum--morisalike::before{
    content: "";
    position: absolute;
    display: block;
    width: 130rem;
    height: 130rem;
    background-image: url("../img/parts-cd-1.png");
    background-repeat: no-repeat;
    background-size: contain;
    top: -30rem;
    left: 11rem;
    transition: .5s all ease;
    animation: 10s linear infinite cd;
}
.page__item-thum--second::before{
    background-image: url("../img/parts-cd-2.png");
}
.page__item-thum--third::before{
    background-image: url("../img/parts-cd-3.png");
}
.page__item-thum-img--morisalike{
    border-radius: 0;
}
@media screen and (min-width: 600px) {
    .page__item:hover .page__item-thum--daretoku{
        transform: scale(0.95);
        box-shadow: none;
    }
    .page__item-thum--daretoku::before{
        width: 80rem;
        height: 170rem;
        transform: rotate(35deg);
        right: -10rem;
        top: -110rem;
        background-image: url("../img/keychain.png");
    }
    .page__item-thum--daretoku::after{
        width: 300rem;
        height: 300rem;
        top: 0;
        left: 0;
    }
    .page__item:hover .page__item-thum--kuseimo::before{
        content: "";
        position: absolute;
        display: block;
        width: 300rem;
        height: 300rem;
        background-image: url("../img/sticker-item-hover.svg");
        background-repeat: no-repeat;
        background-size: contain;
        top: 0;
        left: 0;
        z-index: 80;
    }
    .page__item:hover .page__item-thum--kuseimo{
        background-color: transparent;
        background-image: url("../img/item-parts-hover-ground.svg");
    }
    .hero__visual-img--kuseimo{
        order: 1;
        transform: rotate(-10deg);
    }
    .common__fukidashi--kuseimo{
        order: 2;
        top: 45rem;
        transform: rotate(5deg);
    }
    .common__fukidashi--kuseimo::after{
        background-image: url("../img/parts-pixel-fukidashi-bottom-left.png");
    }
    .page__item:hover .page__item-thum--morisalike{
        background-color: var(--nmWhite);
        background-image: none;
    }
    .page__item-thum--kuseimo::after{
        content: "";
        position: absolute;
        display: block;
        width: 90rem;
        height: 90rem;
        background-image: url("../img/momoandimo-visual.png");
        background-repeat: no-repeat;
        background-size: contain;
        left: 90rem;
        bottom: 30rem;
        z-index: 10;
    }
    .page__item:hover .page__item-thum--kuseimo::after{
        left: 30rem;
        bottom: -30rem;
        transition: .3s all ease;
    }
    .page__item-thum--morisalike::before{
        width: 250rem;
        height: 250rem;
        top: 20rem;
        left: 20rem;
    }
    .page__item:hover .page__item-thum--morisalike::before{
        top: -100rem;
        left: 20rem;
        z-index: 10;
        animation: 3s linear infinite cd;
    }
    .page__item-thum--second::before{
        background-image: url("../img/parts-cd-2.png");
    }
    .page__item-thum--third::before{
        background-image: url("../img/parts-cd-3.png");
    }
}


/* 追加コンテンツ */
.page--buyuroku{
    background-color: var(--nmBlue);
}
.hero__visual-img--buyuroku{
    order: 1;
}
.common__fukidashi--buyuroku{
    order: 2;
    top: -80rem;
    transform: rotate(0deg);
    width: 265rem;
}
.common__fukidashi--buyuroku::after{
    background-image: url("../img/parts-pixel-fukidashi-bottom-left.png");
}

.page__item-thum--buyuroku{
    z-index: 10;
    border-radius: 0;
}
.page__item-thum--buyuroku::before{
    content: "";
    position: absolute;
    display: block;
    width: 130rem;
    height: 130rem;
    background-image: url("../img/game-disc-buyuden.png");
    background-repeat: no-repeat;
    background-size: contain;
    top: -30rem;
    left: 11rem;
    transition: .5s all ease;
    animation: 10s linear infinite cd;
}
.page__item-thum-img--buyuroku{
    border-radius: 0;
}
.page__item-thum--biboroku::before{
    background-image: url("../img/game-disc-biboroku.png");
}
@media screen and (min-width: 600px) {
    .page__item-thum--buyuroku{
        z-index: 10;
        border-radius: 0;
    }
    .page__item-thum--buyuroku::before{
        width: 250rem;
        height: 250rem;
        top: 20rem;
        left: 20rem;
    }
    .page__item:hover .page__item-thum--buyuroku::before{
        top: -100rem;
        left: 20rem;
        z-index: 10;
        animation: 3s linear infinite cd;
    }
    .page__item:hover .page__item-thum--buyuroku{
        background-color: var(--nmWhite);
        background-image: none;
    }
    .page__item-thum-img--buyuroku{
        border-radius: 0;
    }
}