:root{
    --nmBlue: #219ebc;
    --nmPurple: #662e9b;
    --nmBlack: #000000;
    --nmWhite: #FFFFFF;
    --nmLightBlue: #00cecb;
    --nmGreen: #33FF00;
    --nmRed: #ea3546;
    --nmOrange: #f86624;
    --nmYellow: #f9c80e;
}

@font-face {
	font-family: 'x8y12pxTheStrongGamer';
	src: url("../fonts/x8y12pxTheStrongGamer.ttf");
}

html {
    font-family: x8y12pxTheStrongGamer, ab-megadot9, dotgothic16, sans-selif;
    font-style: normal;
    letter-spacing: 0.1em;
    font-weight: 400;
    font-size: calc(100vw / 375);
    color: var(--nmWhite);
}

body {
    line-height: 1.5;
    cursor: url("../img/neo-morisalamd-cursor.png"),auto;
    margin: 0;
}

a {
    cursor: url("../img/neo-morisalamd-cursor-hover.png"), auto;
}

.page{
    padding: 28rem 0 0;
}

@media screen and (min-width: 600px) {
    :root{
    }
    
    html {
        font-size: 1px;
    }
    
    .page{
        min-width: 1100rem;
    }
}

.background {
    position: fixed;
    width: 100%;
    height: 100vh;
    z-index: 200;
    background: linear-gradient(180deg, #00FFFB 70%, #00dbff 90%);
    transition: transform 1s ease-in-out;
    transform: translateY(0%);
}

.background::after {
    position: relative;
    display: block;
    content: "";
    width: 100%;
    height: 100%;
    top: -350px;
    background-image: url("../img/sea.png");
    background-repeat: repeat-x;
}

.background::before {
    position: relative;
    display: block;
    content: "";
    width: 250rem;
    height: 250rem;
    z-index: 300;
    top: 40px;
    background-image: url("../img/ningyo-3.gif");
    background-repeat: no-repeat;
    background-size: contain;
    margin: 0 auto;
}

.active {
    transform: translateY(100%);
}
.inactive {
    transform: translateY(200%);
}
.inactive::before {
    background-image: url("../img/ningyo-2.gif");
}

.bubble{
    display: block;
}

@keyframes fadeIn {
    from {
    opacity: 0;
    }
    to {
    opacity: 1;
    }
}

.bubble::before {
    position: absolute;
    display: block;
    content: "";
    z-index: 250;
    top: 45%;
    left: 50%;
    width: 200rem;
    height: 200rem;
    background-image: url("../img/sea-bubble2.gif");
    background-repeat: no-repeat;
    background-size: contain;
    animation: fadeIn 0.2s ease forwards;
}

.bubble::after{
    position: absolute;
    display: block;
    content: "";
    z-index: 250;
    top: 20%;
    left: 0%;
    width: 200rem;
    height: 200rem;
    background-image: url("../img/sea-bubble.gif");
    background-repeat: no-repeat;
    background-size: contain;
    animation: fadeIn 0.5s ease forwards;
}


@media screen and (min-width: 600px) {
    .background {
        top: 100px;
        background: linear-gradient(180deg, #00FFFB 30%, #00dbff 100%);
    }
    .background::after {
        top: -630px;
    }
    .background::before {
        width: 400rem;
        height: 400rem;
        top: -100px;
    }
    .bubble::after{
        left: 30%;
    }
    .bubble::before{
        left: auto;
        right: 30%;
    }
}

.black__ribbon-sp{
    width: 100vw;
    overflow: hidden;
    display: flex;
    background-color: var(--nmBlack);
    padding: 10rem;
}

.black__ribbon-sp-img{
    display: block;
    width: 100%;
    animation: loop 30s -15s linear infinite;
}
.black__ribbon-sp-img2{
    display: block;
    width: 100%;
    animation: loop2 30s linear infinite;
}
.black__ribbon-pc{
    display: none;
}

@keyframes loop {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(-100%);
    }
    }

    @keyframes loop2 {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-200%);
    }
}

@media screen and (min-width: 600px) {
    .black__ribbon-sp{
        display: none;
    }
    .black__ribbon-pc{
        min-width: 1100rem;
        width: 100vw;
        overflow: hidden;
        display: flex;
        background-color: var(--nmBlack);
        padding: 10rem;
    }
    
    .black__ribbon-pc-img{
        display: block;
        width: 100%;
        animation: loop 60s -30s linear infinite;
    }
    .black__ribbon-pc-img2{
        display: block;
        width: 100%;
        animation: loop2 60s linear infinite;
    }
}

.page__content{
    position: relative;
    padding: 20rem 20rem 40rem;
}
.page__title{
    font-size: 24rem;
    width: fit-content;
    text-shadow: 0 3rem 0 var(--nmBlack);
}
.page__title-link{
    display: block;
    width: fit-content;
    margin: 0 auto 45rem;
}
@media screen and (min-width: 600px) {
    .page__content{
        padding: 0 20rem 120rem;
    }
    .page__title{
        font-size: 32rem;
        width: fit-content;
        margin-bottom: 100rem;
    }
    .page__title-link{
        margin-bottom: 100rem;
    }
}

.header{
    padding: 10rem;
    margin-bottom: 40rem;
}
.header-title{
    width: fit-content;
    font-size: 20rem;
    text-align: center;
    margin: 0 auto;
    text-shadow: 0 3rem 0 var(--nmBlack);
}
.hero{
    position: relative;
}
.hero__content{
    padding: 50rem 0 30rem;
}
.hero__title-group{
    width: 100%;
    padding: 0 30rem;
}
.hero__title-sub-text{
    font-size: 16rem;
    margin-bottom: 25rem;
}
.hero__title{
    margin: 0 auto;
    width: 220rem;
}
.hero__title-img{
    display: block;
    width: 100%;
}
.hero__visual-sp{
    display: block;
    width: 100%;
}
@media screen and (min-width: 600px) {
    .header{
        padding: 50rem;
        margin-bottom: 70rem;
    }
    .header-title{
        font-size: 30rem;
    }
    .hero{
        padding: 0;
        max-height: 900rem;
    }
    .hero__content{
        padding: 40rem 80rem;
        display: flex;
        align-items: center;
        max-width: 1400rem;
        margin: 0 auto;
    }
    .hero__title-group{
        width: 80%;
        position: relative;
        top: -50rem;
        padding: 0;
    }
    .hero__title-sub-text{
        font-size: 28rem;
        position: relative;
        margin-bottom: 32rem;
        text-shadow: 0 3rem 0 var(--nmBlack);
    
    }
    .hero__title{
        position: relative;
        top: 0;
        width: 80%;
    }
    .hero__title-img{
        width: 100%;
    }
    .hero__visual-pc{
        display: block;
        width: 100%;
    }
}


.hamburger__button{
    display: block;
    content: "";
    position: fixed;
    top: 30rem;
    right: 10rem;
    background-size: contain;
    background-repeat: no-repeat;
    width: 70rem;
    height: 130rem;
    z-index: 98;
    transition: .3s all ease;
}
.hamburger__button-open{
    background-image: url("../img/hamburger-button-sp.png");
}
.hamburger__button-close{
    background-image: url("../img/hamburger-button-sp-close.png");
    position: fixed;
    top: 29rem;
}
.hamburger__button--cross{
    top: -2rem;
    background-image: url("../img/hamburger-button-sp-cross.png");
}
.hamburger__none{
    display: block;
}
.hamburger__button--display{
    display: block;
}
.hamburger__menu{
    position: absolute;
    opacity: 0;
    max-height: 0;
    transition: all .8s ease;
    background-color: var(--nmLightBlue);
    width: 100%;
    top: 0;
    left: 0;
}
.hamburger__menu--defolt{
    display: none;
}
.hamburger__menu--open{
    width: 100%;
    padding: 20rem;
    z-index: 95;
    opacity: 1;
    height: fit-content;
    min-height: 110vh;
    display: block;
}

.hamburger__title{
    width: fit-content;
    margin: 0 auto 20rem;
    padding: 20rem;
    font-size: 24rem;
    text-shadow: 0 3rem 0 var(--nmBlack);
}
.hamburger__list{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 0 auto 30rem;
    padding: 20rem;
}
.hamburger__item{
    width: fit-content;
    display: flex;
    align-items: center;
    z-index: 30;
    margin-bottom: 20rem;
}
.hamburger__item--kuseimo{
}
.hamburger__item--morisalike{

}
.hamburger__item--daretoku{
}
.hamburger__item--contact{

}
.hamburger__item-img{
    content: "";
    display: block;
    width: 130rem;
    background-repeat: no-repeat;
    background-size: contain;
    padding: 20rem;
}

.hamburger__item-img--kuseimo{
    height: 145rem;
    transform: rotate(-15deg);
    background-image: url("../img/kuseimo-visual.png");
}
.hamburger__item-img--morisalike{
    order: 1;
    height: 110rem;
    transform: rotate(15deg);
    background-image: url("../img/morisalike-visual.png");
}
.hamburger__item-img--daretoku{
    order: 1;
    height: 142rem;
    background-image: url("../img/daretoku-visual.png");
}
.hamburger__item-img--contact{
    order: 1;
    height: 93rem;
    background-image: url("../img/contact-visual.png");
}
.hamburger__item-text{
    width: 100%;
    color: var(--nmBlack);
}

/* 追加コンテンツ用 */
.hamburger__item--buyuroku{
}
.hamburger__item-img--buyuroku{
    height: 133rem;
    background-image: url("../img/buyuroku-visual.png");
}

@media screen and (min-width: 600px) {
    .hamburger__button{
        left: 50rem;
        width: 120rem;
        height: 180rem;
    }
    .hamburger__button-open{
        background-image: url("../img/hamburger-button-pc.png");
    }
    .hamburger__button-close{
        background-image: url("../img/hamburger-button-pc-close.png");
        position: fixed;
        top: 25rem;
    }
    .hamburger__button--cross{
        top: -6rem;
        background-image: url("../img/hamburger-button-pc-cross.png");
    }
    .hamburger__button:hover{
        cursor: url("../img/neo-morisalamd-cursor-hover.png"), auto;
    }
    .hamburger__menu{
    }
    .hamburger__title{
        width: fit-content;
        margin: 0 auto 100rem;
        padding: 20rem;
        font-size: 45rem;
        text-shadow: 0 3rem 0 var(--nmBlack);
    }
    
    .hamburger__list{
        max-width: 1240rem;
        margin: 0 auto 100rem;
        position: relative;
    }
    .hamburger__item{
        width: 20%;
    }
    .hamburger__item:hover{
        cursor: url("../img/neo-morisalamd-cursor-hover.png"), auto;
    }
    .hamburger__item--kuseimo{
    }
    .hamburger__item--morisalike{
    }
    .hamburger__item--daretoku{
    }
    .hamburger__item--contact{
    }

    .hamburger__item--buyuroku{
    }

    .hamburger__item-img{
        display: block;
        width: 100%;
    }
    .hamburger__item-img--kuseimo{
        transition: .3s all ease;
        height: 225rem;
        background-image: url("../img/kuseimo-visual.png");
    }
    .hamburger__item-img--morisalike{
        transition: .3s all ease;
        height: 200rem;
        background-image: url("../img/morisalike-visual.png");
    }
    .hamburger__item-img--daretoku{
        transition: .3s all ease;
        height: 250rem;
        background-image: url("../img/daretoku-visual.png");
    }
    .hamburger__item-img--contact{
        transition: .3s all ease;
        height: 155rem;
        background-image: url("../img/contact-visual.png");
    }
    .hamburger__item-img--buyuroku{
        transition: .3s all ease;
        height: 225rem;
        transform: rotate(-15deg);
        background-image: url("../img/buyuroku-visual.png");
    }
    .hamburger__item:hover .hamburger__item-img--kuseimo{
        background-image: url("../img/kuseimo-visual.gif");
        transform: scale(1.1);
    }
    .hamburger__item:hover .hamburger__item-img--morisalike{
        background-image: url("../img/morisalike-visual.gif");
        transform: scale(1.1);
    }
    .hamburger__item:hover .hamburger__item-img--daretoku{
        background-image: url("../img/daretoku-visual.gif");
        transform: rotate(-10deg) scale(1.1);
    }
    .hamburger__item:hover .hamburger__item-img--contact{
        background-image: url("../img/contact-visual.gif");
        transform: rotate(10deg) scale(1.2);
    }
    .hamburger__item:hover .hamburger__item-img--buyuroku{
        background-image: url("../img/buyuroku-visual.gif");
        transform: scale(1.1);
    }
    .hamburger__menu--open{
        min-height: 100vh;
    }
}




.common__fukidashi::before{
    content: "";
    background-image: url("../img/parts-pixel-fukidashi-top.png");
    background-repeat: no-repeat;
    background-size: contain;
    width: inherit;
    height: 22rem;
    display: block;
    position: absolute;
    top: -21rem;
    left: -8rem;
}
.common__fukidashi{
    position: relative;
    content: "";
    width: 280rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0;
    background-color: var(--nmWhite);
    border-left: 8rem solid var(--nmBlack);
    border-right: 8rem solid var(--nmBlack);
    padding: 10rem 20rem;
}
.common__fukidashi::after{
    content: "";
    background-image: url("../img/parts-pixel-fukidashi-bottom.png");
    background-repeat: no-repeat;
    background-size: contain;
    width: inherit;
    display: block;
    position: absolute;
    height: 45rem;
    left: -8rem;
    bottom: -44rem;
}
.common__fukidashi-text{
    width: 100%;
    display: block;
    color: var(--nmBlack);
    text-align: center;
    font-size: 12rem;
    font-family: dotgothic16, sans-serif;
}
.common__asterisk-text{
    width: 100%;
    display: block;
    color: var(--nmBlack);
    text-align: center;
    font-size: 12rem;
    font-family: dotgothic16, sans-serif;
    margin-top: 10rem;
}
.salfgirl__img{
    display: block;
    width: 85rem;
    margin-left: auto;
    position: relative;
    top: -20rem;
    right: 20rem;
}
@media screen and (min-width: 600px) {
    .salfgirl{
        padding: 0;
        position: absolute;
        width: 10%;
        right: 40%;
        margin-left: auto;
        top: auto;
        bottom: 210rem;
    }
    .common__fukidashi{
        position: relative;
        top: 0;
        left: 0;
    }
    .common__fukidashi-text{
        font-size: 16rem;
    }
    .salfgirl__img{
        width: 100rem;
        margin-left: auto;
        position: relative;
        top: -20rem;
        right: -260rem;
    }
}

.sns__list{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
    margin: 0 auto;
    padding: 20rem;
}
.hamburger__menu .sns__list--ham{
    display: none;
}
.sns__item{
    width: calc((100% - 10rem)/2);
    margin-bottom: 10rem;
}
.sns__link{
    width: fit-content;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    font-size: 16rem;
}
.sns__item-img{
    display: block;
    content: "";
    width: 65rem;
    height: 65rem;
    background-repeat: no-repeat;
    background-size: contain;
    margin-right: 10rem;
    margin-bottom: 5rem;
    box-shadow: -5px 7px 0px var(--nmBlack);
}
.sns__item-img--instagram{
    background-image: url("../img/sp-sns-instagram.gif");
}
.sns__item-img--suzuri{
    background-image: url("../img/sp-sns-suzuri.gif");
}
.sns__item-img--radio{
    background-image: url("../img/sp-sns-spotify.gif");
}
.sns__item-img--morisara{
    background-image: url("../img/morisara-face.png");
}

.sns__item-text{
    font-size: 14rem;
    color: var(--nmWhite);
    text-shadow: 0 2rem 0 var(--nmBlack);
}

@media screen and (min-width: 600px) {
    .sns__list{
        margin:0 auto;
        flex-wrap: nowrap;
        max-width: 420rem;
    }
    .hamburger__menu .sns__list--ham{
        display: flex;
    }
    .sns__item{
        width: calc((100% - 80rem)/5);
    }
    .sns__link{
        flex-direction: column;
        align-items: center;
        font-size: 18rem;
        cursor: url("../img/neo-morisalamd-cursor-hover.png"), auto;
    }
    .sns__item-img{
        width: 90rem;
        height: 90rem;
        margin-right: 0;
    }
    .sns__item-img--instagram{
        background-image: url("../img/sp-sns-instagram.png");
    }
    .sns__item-img--suzuri{
        background-image: url("../img/sp-sns-suzuri.png");
    }
    .sns__item-img--radio{
        background-image: url("../img/sp-sns-spotify.png");
    }
    .sns__link:hover .sns__item-img{
        position: relative;
        left: -5rem;
        top: 7rem;
        box-shadow: none;
    }
    .sns__link:hover .sns__item-img--instagram{
        transition: .3s all ease;
        background-image: url("../img/sp-sns-instagram.gif");
    }
    .sns__link:hover .sns__item-img--twitter{
        background-image: url("../img/sp-sns-twitter.gif");
    }
    .sns__link:hover .sns__item-img--suzuri{
        background-image: url("../img/sp-sns-suzuri.gif");
    }
    .sns__link:hover .sns__item-img--radio{
        background-image: url("../img/sp-sns-spotify.gif");
    }
    .sns__item:hover .sns__item-text{
        display: block;
        color: var(--nmGreen);
    }
}


.footer{
    background-color: var(--nmPurple);
}
.footer__list{
    padding: 25rem 20rem 30rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.footer__item{
    width: fit-content;
    margin-bottom: 20rem;
    font-size: 14rem;
    text-shadow: 0 3rem 0 var(--nmBlack);
}
.footer__item:last-of-type{
    margin-bottom: 0;
}
.footer__copyright{
    font-size: 8rem;
    padding: 10rem;
    font-family: dotgothic16, sans-serif;;
    background-color: var(--nmBlack);
    text-align: center;
    letter-spacing: 0.2em;
}
@media screen and (min-width: 600px) {
    .footer__list{
        padding: 50rem;
    }
    .footer__item{
        margin-bottom: 40rem;
        font-size: 18rem;
        transition: .2s all ease;
    }
    .footer__item:hover{
        color: var(--nmGreen);
        cursor: url("../img/neo-morisalamd-cursor-hover.png"), auto;
    }
    .footer__copyright{
        font-size: 14rem;
        padding: 20rem;
    }
}
.page-top__button{
    display: block;
    position: fixed;
    right: 2vw;
    z-index: 99;
    transition: .3s all ease;
}
.page-top__button--defolt{
    bottom: -35vw;
}
.page-top__button--defolt::before{
    content: "";
    background-image: url("../img/top-woman.png");
    width: 60rem;
    height: 120rem;
    background-repeat: no-repeat;
    background-size: contain;
    display: block;
}
.page-top__button--click{
    content: "";
    background-image: url("../img/top-woman-click.png");
    width: 65rem;
    height: 130rem;
    background-repeat: no-repeat;
    background-size: contain;
    display: block;
    transition: all .5s ease;
}
.page-top__button--show{
    display: block;
    bottom: 5vw;
}

@media screen and (min-width: 600px) {
    .page-top__button{
        right: 4vw;
        transition: .5s all ease;
    }
    .page-top__button:hover{
        transform: scale(1.1);
    }
    .page-top__button:hover{
        cursor: url("../img/neo-morisalamd-cursor-hover.png"), auto;
    }
    .page-top__button--defolt{
    }
    .page-top__button--defolt::before{
        width: 100rem;
        height: 200rem;
    }
    .page-top__button--click{
        width: 100rem;
        height: 200rem;
        transition: all .5s ease;
    }
}
.hamburger__menu .sns__list{
    padding: 0;
}
.salfgirl--hamburger{
    position: relative;
    bottom: 140rem;
}
.common__fukidashi--hamburger::before{
    width: 100%;
    top: -12rem;
    left: 0;
}
.common__fukidashi--hamburger{
    width: 50%;
    border-width: 3rem;
    margin: 0 auto;
}
.common__fukidashi--hamburger::after{
    width: 105%;
    left: -3rem;
}
.common__fukidashi-text--hamburger{
    font-size: 10rem;
}
@media screen and (min-width: 600px) {
    .sns__list--hamburger{
        margin: 0;
        bottom: 30rem;
        left: 80rem;
        width: 400rem;
        margin-right: auto;
    }
    .salfgirl--hamburger{
        position: absolute;
        width: 200rem;
        margin: auto;
        top: auto;
        right: 220rem;
        bottom: 150rem;
    }
    .common__fukidashi--hamburger{
        position: absolute;
        width: 200rem;
        right: 30rem;
    }
    .salfgirl__img--hamburger{
        width: 70rem;
        right: -33rem;
        top: 100rem;
    }
    .common__fukidashi-text--hamburger{
        font-size: 10rem;
        font-family: x8y12pxTheStrongGamer, dotgothic16, sans-serif;
    }
}

.button__group{
    display: flex;
    flex-direction: column;
    width: fit-content;
    margin: 0 auto 100rem;
}
.top__button{
    color: var(--nmBlack);
    font-size: 16rem;
    background-color: var(--nmWhite);
    padding: 8rem 30rem 10rem;
    border: 5rem solid var(--nmBlack);
    border-radius: 10rem;
    box-shadow: -5px 7px 0px var(--nmBlack);
    margin-bottom: 45rem;
    text-align: center;
}
.top__button:last-of-type{
    margin-bottom: 0;
}
.page__button{
    color: var(--nmBlack);
    font-size: 14rem;
    background-color: var(--nmWhite);
    padding: 8rem 30rem 10rem;
    width: fit-content;
    border: 5rem solid var(--nmBlack);
    border-radius: 10rem;
    box-shadow: -5px 7px 0px var(--nmBlack);
    font-family: 'DotGothic16';
    font-weight: bold;
}

@media screen and (min-width: 600px) {
    .button__group{
        flex-direction: row;
        margin: 0 auto 120rem;
    }
    .top__button{
        font-size: 20rem;
        margin: 0;
        cursor: url("../img/neo-morisalamd-cursor-hover.png"), auto;
        margin-right: 50rem;
    }
    .top__button:last-of-type{
        margin-right: 0;
    }
    .page__button{
        color: var(--nmBlack);
        font-size: 16rem;
        background-color: var(--nmWhite);
        padding: 15rem 30rem;
        width: fit-content;
        border: 5rem solid var(--nmBlack);
        border-radius: 10rem;
        box-shadow: -5px 7px 0px var(--nmBlack);
        margin: 0;
        margin-right: 40rem;
    }
    .top__button:hover{
        background-color: var(--nmGreen);
        color: var(--nmWhite);
        box-shadow: none;
        position: relative;
        left: -5rem;
        top: 7rem;
    }
    .page__button:hover{
        background-color: var(--nmGreen);
        color: var(--nmWhite);
        box-shadow: none;
        position: relative;
        left: -5rem;
        top: 7rem;
    }
}

.pc__none{
    display: block;
}
.sp__none{
    display: none;
}
.list-item--three{
    margin-right: 350rem;
}
.hero__under-arrow{
    content: "";
    background-image: url("../img/under-arrow.png");
    width: 70rem;
    height: 60rem;
    background-size: contain;
    background-repeat: no-repeat;
    display: block;
    margin: 0 auto;
}
@media screen and (min-width: 600px) {
    .pc__none{
        display: none;
    }
    .sp__none{
        display: block;
    }
    .hero__under-arrow{
        transition: .3s all ease;
        cursor: url("../img/neo-morisalamd-cursor-hover.png"), auto;
    }
    .hero__under-arrow:hover{
        transform: scale(0.95);
        background-image: url("../img/under-arrow-hover.png");
    }
}
.display__none{
    display: none;
}
.fix{
    position: fixed;
    top: 0;
    z-index: 99;
}

.contents__item-new-badge{
    display: block;
    position: relative;
}
.contents__item-new-badge::after{
    content: "";
    display: block;
    position: absolute;
    top: 0rem;
    left: -10rem;
    background-image: url("../img/new-post.gif");
    width: 65rem;
    height: 65rem;
    background-size: contain;
    background-repeat: no-repeat;
    transform: rotate(-15deg);
    z-index: 30;
}
.contents__item-new-badge--morisalike::after{
    background-image: url("../img/new-post-purple.gif");
}
.contents__item-new-badge--hamburger::after{
    width: 30rem;
    height: 30rem;
}
@media screen and (min-width: 600px) {
    .contents__item-new-badge::after{
        top: 10rem;
        left: 0rem;
        width: 100rem;
        height: 100rem;
    }
    .contents__item-new-badge--hamburger::after{
        width: 100rem;
        height: 100rem;
    }
}

.latest-insta{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30rem;
    background-color: var(--nmYellow);
}
.latest-insta__bg-img{
    display: block;
    width: 100%;
    z-index: 100;
    position: relative;
}
.latest-insta__title{
    font-size: 18rem;
    font-family: ab-megadot9, sans-selif;
    margin-bottom: 30rem;
    text-shadow: 0 3rem 0 var(--nmBlack);
}
.latest-insta__list{
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 30rem;
}
.latest-insta__item{
    width: 100%;
    height: 300rem;
    background-color: var(--nmWhite);
    box-shadow: -5px 7px 0px var(--nmBlack);
}
.latest-insta__link{
    padding: 15rem;
    display: block;
    width: 100%;
    height: 100%;
}
.latest-insta__link-text{
    font-size: 10rem;
    color: var(--nmBlack);
    font-family: dotgothic16, sans-serif;
    font-weight: bold;
}
.latest-insta__img{
    display: block;
    width: 100%;
    height: 100%;
    margin-bottom: 10rem;
    object-fit: cover;
}
.latest-insta__inactive-text{
    font-size: 16rem;
    color: var(--nmBlack);
    font-family: dotgothic16, sans-serif;
    font-weight: bold;
    text-align: center;
    padding: 20rem 20rem 40rem;
}
@media screen and (min-width: 600px) {
    .latest-insta{
        padding: 60rem 0 100rem;
    }
    .latest-insta__bg-img{
        display: block;
        width: 50%;
        margin: 0 auto;
    }
    .latest-insta__title{
        font-size: 28rem;
        margin-bottom: 40rem;
    }
    .latest-insta__list{
        max-width: 1100rem;
        margin: 0 auto;
        grid-template-columns: repeat(3, 1fr);
    }
    .latest-insta__item:hover{
        position: relative;
        left: -5rem;
        bottom: -7rem;
        box-shadow: none;
    }
    .latest-insta__link-text{
        padding: 10rem;
        font-size: 14rem;
    }
}
.display__none {
    display: none;
}



.black__ribbon--radio{
    padding-top: 0;
}