*{box-sizing:border-box;margin:0;padding:0}*::before,*::after{box-sizing:border-box}html{height:100%;-webkit-text-size-adjust:100%}body{margin:0;min-height:100%;line-height:1.6;text-align:justify}img,picture,video,canvas,svg{display:block;max-width:100%;height:auto}p,h1,h2,h3,h4,h5,h6,ul,ol,figure,blockquote,dl,dd{margin:0;overflow-wrap:break-word}ul,ol{padding:0;list-style:none}a{color:inherit;text-decoration:inherit}hr{height:0;color:inherit;border-top-width:1px}button,input,textarea,select{font:inherit;color:inherit;background:transparent;border:1px solid transparent;padding:0;margin:0}button{cursor:pointer}textarea{resize:vertical}::placeholder{opacity:1;color:#aaa}:focus-visible{outline:2px solid var(--focus-color,#fff);outline-offset:2px}#root,#__next{isolation:isolate}:where(svg:not([fill])){fill:currentColor}

/* 基本設定 */
body {
    font-family: "Zen Kaku Gothic New", sans-serif;
    background-color: #fff;
    color: #331e1e;
    position: relative;
    font-weight: 500;
    font-size: 1rem;
    font-feature-settings: "palt";
}

a:hover {
    opacity: 0.7;
}

/* ヘッダー */
.header {
    position: fixed;
    top: calc(80 / 750 * 100vw);
    left: 0;
    width: 100vw;
    height: calc(100 / 750 * 100vw);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 calc(40 / 750 * 100vw);
    z-index: 2000;
}


.logo{
    opacity: 0;
    width: 0;
}
.logo.show {
    display: block;
    opacity: 1;
    transition: opacity 0.5s;
    width: 100%;
}

.shoplink {
    display: none;
    position: relative;
    top:calc(-40 / 750 * 100vw);
}

.active {
    & .logo {
        display: none;
    }

    & .shoplink {
        display: block;
    }
}

.logo img,
.shoplink img {
    height: calc(100 / 750 * 100vw);
    width: auto;
}

/*scroll*/
#riyu,
#hint,
#easy,
#faq-s{
    scroll-margin-top: calc(260 / 750 * 100vw);
}
/* nav */
.menu-trigger-outer {
    position: relative;
    background-color: #fff;
    border-radius: 50%;
    z-index: 2100;
}

.menu-trigger {
    position: relative;
    cursor: pointer;
    z-index: 2200;
    padding: calc(22 / 750 * 100vw) 0;

    & .menu-trigger-inner {
        position: relative;
        width: calc(55 / 750 * 100vw);
        height: calc(55 / 750 * 100vw);
        margin: 0 calc(22 / 750 * 100vw);
    }

    & span {
        display: inline-block;
        transition: all 0.3s;
        position: absolute;
        left: 0;
        width: calc(55 / 750 * 100vw);
        height: calc(4 / 750 * 100vw);
        background-color: #e40011;
        margin: calc(4 / 750 * 100vw) 0;

        &:nth-of-type(1) {
            top: 0;
        }

        &:nth-of-type(2) {
            top: calc(22 / 750 * 100vw);
        }

        &:nth-of-type(3) {
            bottom: 0;
        }
    }
}

.menu-trigger.active span:nth-of-type(1) {
    transform: translateY(calc(22 / 750 * 100vw)) rotate(315deg);
}

.menu-trigger.active span:nth-of-type(2) {
    opacity: 0;
}

.menu-trigger.active span:nth-of-type(3) {
    transform: translateY(calc(-22 / 750 * 100vw)) rotate(45deg);
}

.modal-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(255, 255, 198, 0.95);
    z-index: 1090;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;

    &.open {
        opacity: 1;
        visibility: visible;
    }

    & ul {
        list-style: none;
        text-align: center;
        display: flex;
        flex-direction: column;
        
        & li a {
            white-space: nowrap;
            color: #e50012;
            text-decoration: none;
            font-size: 1.4rem;
            font-weight: 700;
            display: block;
            padding: 2vh 0;
        }
    }
}

/* 動線確保ボタン */
.sateif {
    width: calc(680 / 750 * 100vw);
    margin: 0 auto calc(60 / 750 * 100vw);
    opacity: 0;

    &.active {
        opacity: 1;
    }
}

.container{
    width: calc(680 / 750 * 100vw);
    max-width: 1000px;
    margin: auto;
}

section {
    margin-bottom: calc(60 / 375 * 100vw);
}

/* フッター */
.footer {
    width: calc(680 / 750 * 100vw);
  max-width: 1000px;
    margin: 0 auto;
    text-align: center;
    padding: 40px 0;
    font-size: 12px;
    font-weight: 400;
}
.footer-nav{
    margin-bottom: 1.5rem;
    & ul{
        display: flex;
  flex-wrap: wrap;
        & li{
            width: 50%;
            margin-bottom: .2rem;
            & a{
                padding: .2rem .8rem;
            }
        }
    }
}


.forsp {
    display: block;
}

.forpc {
    display: none;
}

@media screen and (min-width: 601px) {
    .header {
        top: calc(55 / 750 * 100vw);
        height: calc(50 / 750 * 100vw);
    }
    
    .shoplink{
        top:calc(-30 / 750 * 100vw);
    }

    .logo img,
    .shoplink img {
        height: calc(50 / 750 * 100vw);
    }

    .menu-trigger {
        padding: calc(11 / 750 * 100vw) 0;

        & .menu-trigger-inner {
            width: calc(27.5 / 750 * 100vw);
            height: calc(27.5 / 750 * 100vw);
            margin: 0 calc(11 / 750 * 100vw);
        }

        & span {
            width: calc(27.5 / 750 * 100vw);
            height: calc(2 / 750 * 100vw);
            margin: calc(2 / 750 * 100vw) 0;

            &:nth-of-type(2) {
                top: calc(11 / 750 * 100vw);
            }
        }
    }

    .menu-trigger.active span:nth-of-type(1) {
        transform: translateY(calc(11 / 750 * 100vw)) rotate(315deg);
    }

    .menu-trigger.active span:nth-of-type(3) {
        transform: translateY(calc(-11 / 750 * 100vw)) rotate(45deg);
    }

    section{
        margin-bottom: calc(60 / 1000 * 100vw);
    }
    .footer {
    padding: 65px 0;
}
    /*scroll*/
#riyu,
#hint,
#easy,
#faq-s{
    scroll-margin-top: calc(110 / 750 * 100vw);
}
    
    .footer-nav{
    & ul{
        justify-content: center;
        & li{
            width: auto;
        }
    }
}

    .forsp {
        display: none;
    }

    .forpc {
        display: block;
    }
}

@media screen and (min-width: 811px) {
    .header {
        top: 60px;
        left: 50%;
        transform: translateX(-50%);
        width: 90%;
        max-width: 1000px;
        height: 65px;
        padding: 0;
    }

    .shoplink{
        top:-30px;
    }
    .logo img,
    .shoplink img {
        height: 65px;
    }

    .menu-trigger {
        padding: 14.5px 0;

        & .menu-trigger-inner {
            width: 36px;
            height: 36px;
            margin: 0 14.5px;
        }

        & span {
            width: 36px;
            height: 2px;
            margin: 1px 0;

            &:nth-of-type(2) {
                top: 16px;
            }
        }
    }

    .menu-trigger.active span:nth-of-type(1) {
        transform: translateY(16px) rotate(315deg);
    }

    .menu-trigger.active span:nth-of-type(3) {
        transform: translateY(-16px) rotate(45deg);
    }

    .modal-menu {
        top: -45px;
        height: 35px;
        border-radius: 17.5px;

        & ul {
            flex-direction: row;

            & li a {
                font-size: 1.7vw;
                padding: 0 10px;
            }
        }
    }
    
        section{
        margin-bottom: 60px;
    }
    
        /*scroll*/
#riyu,
#hint,
#easy,
#faq-s{
    scroll-margin-top: 175px;
}

}
@media screen and (min-width: 1011px) {
        .modal-menu {

        & ul {

            & li a {
                font-size: 16px;
            }
        }
    }
}