@charset "UTF-8";

/* Common
============================ */
.sugoroku {
    color: #132232;
    line-height: 1.3;
}
.sugoroku img {
    display: block;
    width: 100%;
    pointer-events: none;
    -webkit-touch-callout: none;
    user-select: none;
}
.sugoroku a {
    text-decoration: none;
}

@media screen and (min-width:1025px) {
    .sugoroku {
        background: linear-gradient(180deg, rgba(0, 141, 160, 1) 0%, rgba(241, 231, 214, 1) 100%);
        /* height: 100vh;
        overflow: hidden; */
        display: flex;
        font-size: 1.093vw;
    }
    .pc-only {
        text-align: center;
    }
    .sp-only {
        display: none!important;
    }
}
@media screen and (max-width:1024px) {
    .sugoroku {
        background: #F1E7D6;
        font-size: 3.482vw;
    }
    .pc-only {
        display: none!important;
    }
}

/* Hero
============================ */
@media screen and (min-width:1025px) {
    .sugoroku__hero {
        width: 53.359vw;
        background: url(/static/moritakachisato/fanclub/feature/sugoroku/img/bg_pc.png) no-repeat top left / cover;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* gap: 1.328vw; */
        padding-top: 3.75vw;
    }
    .sugoroku__title {
        width: 17.678vw;
    }
    .sugoroku__title-sub {
        width: 25.215vw;
    }
}
@media screen and (max-width:1024px) {
    .sugoroku__hero {
        padding-top: 7.567vw;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .sugoroku__title {
        width: 56.288vw;
    }
    .sugoroku__title-sub {
        width: 80.288vw;
    }
}

/* Section Common
============================ */
@media screen and (min-width:1025px) {
    .sugoroku__content {
        width: 31.406vw;
        background: #F1E7D6;
        padding: 3.75vw 1.25vw 0;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .sugoroku__content::-webkit-scrollbar {
        display: none;
    }
}
@media screen and (max-width:1024px) {
    .sugoroku__content {
        padding-top: 3.243vw;
        background: url(/static/moritakachisato/fanclub/feature/sugoroku/img/bg_sp.png) no-repeat top left / contain;
    }
}
.sugoroku__lead {
    position: relative;
}
.sugoroku__lead::after {
    display: block;
    content: '';
    height: 1vw;
    width: 5vw;
    background: url(/static/moritakachisato/fanclub/feature/sugoroku/img/stars.png) no-repeat top left / contain;
    position: absolute;
    bottom: -28%;
    left: 50%;
    transform: translateX(-50%);
}
@media screen and (max-width:1024px) {
    .sugoroku__lead::after {
        height: 16vw;
        width: 98%;
        background: url(/static/moritakachisato/fanclub/feature/sugoroku/img/notes_sp1.png) no-repeat top left / contain;
        bottom: -19%;
    }
}
.sugoroku__lead-text {
    text-align: center;
    color: #000;
}
.sugoroku__section {
    margin-top: 4.14vw;
    background: #fff;
    border: 3px solid #AE1D29;
    border-radius: 1vw;
    box-shadow: 5px 5px #132232;
}
.sugoroku__section-title {
    width: 10.907vw;
    font-size: 1.25vw;
    line-height: 2;
    text-align: center;
    color: #F1E7D6;
    background: #AE1D29;
    box-shadow: 2px 2px #132232;
    border-radius: .2vw;
    position: absolute;
    top: -1.3vw;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
}
.sugoroku__section-title::before {
    display: inline-block;
    content: '';
    height: 3vw;
    position: absolute;
    top: -1vw;
    left: -3%;
}
#howto .sugoroku__section-title::before {
    width: 5vw;
    background: url(/static/moritakachisato/fanclub/feature/sugoroku/img/howto.png) no-repeat top left / cover;
}
#about .sugoroku__section-title::before {
    width: 7vw;
    background: url(/static/moritakachisato/fanclub/feature/sugoroku/img/about.png) no-repeat top left / cover;
    left: -1vw;
}
#caution .sugoroku__section-title::before {
    height: 2vw;
    width: 3vw;
    background: url(/static/moritakachisato/fanclub/feature/sugoroku/img/caution.png) no-repeat top left / cover;
    top: -.5vw;
}
@media screen and (max-width:1024px) {
    .sugoroku__section {
        width: 90.796%;
        border-radius: 3vw;
    }
    .sugoroku__section-title {
        width: 34.73vw;
        font-size: 3.98vw;
        border-radius: .8vw;
        top: -4vw;
    }
    #howto .sugoroku__section-title::before {
        height: 9vw;
        width: 15vw;
        top: -3vw;
        left: -1vw;
    }
    #about .sugoroku__section-title::before {
        height: 10vw;
        width: 23vw;
        top: -3.5vw;
        left: -4vw;
    }
    #caution .sugoroku__section-title::before {
        height: 7vw;
        width: 12vw;
        top: -2.5vw;
        left: -2vw;
    }
}

/* How to 
============================ */
@media screen and (min-width:1025px) {
    #howto {
        border: none;
    }
    #howto::before {
        display: inline-block;
        content: '';
        height: 4.3vw;
        width: 29.2vw;
        background: url(/static/moritakachisato/fanclub/feature/sugoroku/img/notes_pc1.png) no-repeat top left / cover;
        position: absolute;
        top: -17%;
        left: 0;
    }
    #howto::after {
        display: inline-block;
        content: '';
        height: 7vw;
        width: 7vw;
        background: url(/static/moritakachisato/fanclub/feature/sugoroku/img/dice1.png) no-repeat top left / contain;
        position: absolute;
        bottom: 30%;
        left: -19%;
        z-index: -1;
    }
}
@media screen and (max-width:1024px) {
    #howto {
        margin: 14.945vw auto 0;
    }
}
.sugoroku__howto-content {
    padding: 2.734vw 1.484vw 1.484vw;
    display: flex;
    flex-direction: column;
    gap: 1.25vw;
    position: relative;
    z-index: 1;
}
@media screen and (min-width:1025px) {
    .sugoroku__howto-content {
        background: #fff;
        border-radius: 1vw;
        border: 3px solid #AE1D29;
    }
}
.sugoroku__howto-text {
    padding-left: 1.2vw;
    position: relative;
}
.sugoroku__howto-text::before {
    display: inline-block;
    content: '';
    height: 1.366vw;
    width: .781vw;
    background: url(/static/moritakachisato/fanclub/feature/sugoroku/img/note.png) no-repeat top left / cover;
    position: absolute;
    top: 0;
    left: 0;
}
.sugoroku__howto-text--bold {
    font-weight: bold;
}
@media screen and (max-width:1024px) {
    .sugoroku__howto-content {
        padding: 8.706vw 5.721vw 4.726vw 4.726vw;
        gap: 3.98vw;
    }
    .sugoroku__howto-text {
        padding-left: 3.5vw;
    }
    .sugoroku__howto-text::before {
        height: 4.35vw;
        width: 2.487vw;
    }
}

/* About
============================ */
@media screen and (min-width:1025px) {
    #about::before {
        display: block;
        content: '';
        height: 4vw;
        width: 30vw;
        background: url(/static/moritakachisato/fanclub/feature/sugoroku/img/notes_pc2.png) no-repeat top left / contain;
        position: absolute;
        top: -20%;
        left: -3%;
    }
}
@media screen and (max-width:1024px) {
    #about {
        margin: 10.701vw auto 0;
    }
}
.sugoroku__about-content {
    padding: 3.281vw 1.328vw 1.718vw;
    display: flex;
    flex-direction: column;
    gap: 1.875vw;
}
@media screen and (max-width:1024px) {
    .sugoroku__about-content {
        padding: 10.447vw 4.228vw 5.218vw;
        gap: 5.97vw;
    }
}
.sugoroku__sub-title {
    font-size: 1.093vw;
    line-height: 2.285;
    text-align: center;
    color: #008DA0;
    background: #fff;
    border: 1px solid;
    border-radius: .2vw;
    position: relative;
    z-index: 10;
}
.sugoroku__sub-title span {
    display: block;
    width: 100%;
    background: #fff;
    border-radius: .2vw;
}
.sugoroku__sub-title::before {
    display: block;
    content: '';
    inset: 0;
    border: 1px solid;
    border-radius: .2vw;
    position: absolute;
    transform: translate(1%, 10%);
    z-index: -1;
}
.sugoroku__about-text {
    padding-top: 1.25vw;
}
@media screen and (max-width:1024px) {
    .sugoroku__sub-title {
        font-size: 3.482vw;
        border-radius: 1vw;
    }
    .sugoroku__sub-title span {
        border-radius: 1vw;
    }
    .sugoroku__sub-title::before {
        border-radius: 1vw;
    }
    .sugoroku__about-text {
        padding-top: 3.98vw;
    }
}

/* Caution
============================ */
#caution::before {
    display: block;
    content: '';
    height: 4vw;
    width: 30vw;
    background: url(/static/moritakachisato/fanclub/feature/sugoroku/img/notes_pc2.png) no-repeat top left / contain;
    position: absolute;
    top: -20%;
    left: -3%;
}
@media screen and (min-width:1025px) {
    #caution {
        border: none;
        box-shadow: none;
    }
    #caution::after {
        display: inline-block;
        content: '';
        height: 7vw;
        width: 7vw;
        background: url(/static/moritakachisato/fanclub/feature/sugoroku/img/dice2.png) no-repeat top left / contain;
        position: absolute;
        bottom: -22%;
        right: -22%;
        z-index: -1;
    }
    .sugoroku__coution-content {
        padding: 3.281vw 1.171vw 2.109vw;
        background: #fff;
        border-radius: 1vw;
        border: 3px solid #AE1D29;
        box-shadow: 5px 5px #132232;
    }
}
.sugoroku__coution-text {
    padding-left: 1.2vw;
    position: relative;
}
.sugoroku__coution-text::before {
    display: inline-block;
    content: '※';
    position: absolute;
    top: 0;
    left: 0;
}
@media screen and (max-width:1024px) {
    #caution {
        margin: 11.27vw auto 0;
    }
    #caution::before {
        height: 3.616vw;
        width: 3.666vw;
    }
    #caution::after {
        height: 9.764vw;
        width: 13.451vw;
    }
    .sugoroku__coution-content {
        padding: 10.447vw 3.731vw 6.716vw;
    }
    .sugoroku__coution-text {
        padding-left: 3.5vw;
    }
}


/* button
============================ */
.sugoroku__button-container {
    padding-top: 1.484vw;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.sugoroku__button {
    display: block;
    width: 22.343vw;
    margin: 0 auto;
    font-size: .937vw;
    font-weight: bold;
    line-height: 1.2;
    text-align: center;
    color: #fff;
    background: #008DA0;
    border-radius: 3vw;
    box-shadow: 2px 2px #132232;
    padding: 1vw 0;
    transition: .3s all;
}
.sugoroku__button--fanclub {
    background: #008DA0;
}
.sugoroku__button--game {
    background: #AE1D29;
}
.sugoroku__button:hover {
    box-shadow: none;
    transform: translateY(2px);
}
@media screen and (max-width:1024px) {
    .sugoroku__button-container {
        padding-top: 7.213vw;
        gap: 1.5rem;
    }
    .sugoroku__button {
        width: 71.144vw;
        font-size: 2.985vw;
        border-radius: 5vw;
    }
    .sugoroku__button--fanclub,
    .sugoroku__button--game {
        padding: 2.8vw 0;
    }
}

/* footer 
============================ */
.sugoroku__footer {
    padding: 1.25vw 0 3.125vw;
    font-size: .781vw;
    text-align: center;
    color: #008DA0;
}
@media screen and (max-width:1024px) {
    .sugoroku__footer {
        padding: 3.233vw 0 12.686vw;
        font-size: 2.487vw;
    }
}

/* fade in animation
============================ */
.fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.8s ease,
    transform 0.8s ease;
}
.fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}