@charset "utf-8";
/*--基本--*/
:root{
	--font-size:16px;
	--max-width:1200px;
	--color: #372D2D;
	--color-hover: red;
    --lang-active: red;
	--background: #fff;
    --spec-border: #000;
    --btn-color:#fff;
    --btn-color-hover:#D54493;
    --btn-max-w:550px;
    --border-radiue:100px;
}

@media screen and (max-width: 1600px){
	:root{
        --font-size:14px;
    }
}

@media screen and (max-width: 1200px){
	:root{
        --font-size:12px;
    }
}

/*-----------
header
-----------*/
header{z-index: 200;}
header .inner{align-items:flex-start; }
header .language{ border: 2px solid #FFF; padding: .2em 1em; background: #F7F2EC; border-radius: 100px; color: #372D2D; margin-left: auto; font-size: 12px; align-items: center; margin-right: 1em;}
header .language li{line-height: 1; padding: .25em 0;}
header .language li:first-of-type{margin-right: .8em;}
header .language li a{display: block; color: #372D2D; padding: .5em 1em; background: #FFF; border-radius: 100px; margin: 0 .4em;}
header .language li.active a{color: #FFF; background:#372D2D; border-radius: 100px; } 
header .language li a:hover{text-decoration: none; color: #FFF; background:#372D2D; }

.menu_sp{display: none;}

.fabs {top: 0;margin:0 0 1em .5em;right: 0;z-index: 100;}
.fab {display: block;width: 40px; height: 40px;border-radius: 50%;text-align: center;color: white;margin: 0 auto 15px;cursor: pointer;-webkit-transition: all .1s ease-out;transition: all .1s ease-out;position: relative;}
.fab > img {line-height: 60px;transition: all .2s ease-in-out;transition-delay: 2s;}
.fab.share {background: #372D2D;border: 1px solid var(--background);}
.fab:active,
.fab:focus,
.fab:hover {box-shadow: 0 0 4px rgba(255, 255, 255, .14), 0 4px 8px rgba(255, 255, 255, .28);}
.fab:not(:first-child) {width: 2em; height: 2em;margin: 10px auto 0;opacity: 0;}
.fab:not(:first-child) > i {font-size: 18px;line-height: 40px;transition: all .3s ease-in-out;}
.fabs:hover .fab:not(:first-child) {opacity: 1;width: 2em; height: 2em;margin: 10px auto 0;}
.fab:nth-last-child(1) {-webkit-transition-delay: 25ms;transition-delay: 25ms;}
.fab:not(:last-child):nth-last-child(2) {-webkit-transition-delay: 20ms;transition-delay: 20ms;}
.fab:not(:last-child):nth-last-child(3) {-webkit-transition-delay: 40ms;transition-delay: 40ms;}
.fab:not(:last-child):nth-last-child(4) {-webkit-transition-delay: 60ms;transition-delay: 60ms;}
.fab:not(:last-child):nth-last-child(5) {-webkit-transition-delay: 80ms;transition-delay: 80ms;}


.cnt {
    max-width: 1200px;
    margin: 0 auto;
}
.preorder_btn {
    display: block;
    height: 39px;
    line-height: 34px;
    background: linear-gradient(
        90deg,
        rgba(131, 196, 255, 1) 0%,
        rgba(213, 181, 214, 1) 25%,
        rgba(255, 131, 133, 1) 50%,
        rgba(213, 181, 214, 1) 75%,
        rgba(131, 196, 255, 1) 100%
    );
    
    background-size: 200% 100%;
    background-position: 0% 0%;
    filter: hue-rotate(0deg);
    transition: background-position 0.8s cubic-bezier(0.4, 0, 0.2, 1), filter 0.8s ease;    border-radius: 100px;
    padding: 0 2em;
    margin: 0 0 0 .5em;
    color: #FFF;
    border: 2px solid #fff;
}
.preorder_btn:hover {
    background-position: 100% 0%;
    filter: hue-rotate(15deg);
    text-decoration: none;
}

@media screen and (max-width: 768px){
    /*カスタム*/
    header.flex{padding-right: 1%;}
    .btn_nav{
    display: flex;
    background: #FFF;
    border: 1px solid #fff;
    width: 40px;
    height: 40px;
    border-radius: 100px;
    padding: 5px;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 14px;
    right: 2%;
    z-index: 10002;
}
    .btn_nav:hover{cursor: pointer;}
    .btn_nav.active{background: #fff;}
    .btn_nav span{width: 80%; height: 2px; background: #372D2D; display: flex; position: relative; align-items: center;} 
    .btn_nav span::before,
    .btn_nav span::after{content: "";display: block; width: 100%; height: 2px;background:#372D2D;position: absolute;transition: all 0.2s linear;}
    .btn_nav span::before{top: -8px;}
    .btn_nav span::after{bottom: -8px;}
    .btn_nav.active span::before{transform: rotate(-45deg);top: calc(50% - 1px);transition: all 0.2s linear; background: #372D2D; }
    .btn_nav.active span::after{transform: rotate(45deg);bottom: calc(50% - 1px);transition: all 0.2s linear;background: #372D2D; }
    .btn_nav.active span{background: #fff;}

    .btn_nav{
        position: fixed;
        right: 2%;
        z-index: 10002;
    }

    body.menu-open #stickybar {
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease;
    }

    body.menu-open #stickybar {
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease;
    }
    .menu_sp .language_sp{
        margin-top: 50px;
        text-align: center;
        flex-wrap: wrap;
        justify-content: center;
    }

    .preorder_btn { display: none; }
    .language,.fabs{display: none;}

    .menu_backdrop{
        position: fixed;
        inset: 0;
        background: rgba(30, 20, 25, 0.55);
        backdrop-filter: blur(2px);
        z-index: 10000;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.35s ease, visibility 0.35s ease;
    }
    .menu_backdrop.active{
        opacity: 1;
        visibility: visible;
    }
    .menu_sp{
        background: #FFF;
        background-size: 60px auto;
        width: 100%;
        position: fixed;
        left: 0;
        bottom: 0;
        top: auto;
        z-index: 10001;
        border-radius: 28px 28px 0 0;
        box-shadow: 0 -8px 30px rgba(0,0,0,0.18);
        padding: 8px 24px 50px;
        max-height: 40vh;
        overflow-y: auto;
        transform: translateY(100%);
        transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1);
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .menu_sp.active{
        transform: translateY(0);
    }
    .menu_grabber{
        width: 40px;
        height: 4px;
        background: #e3d9d2;
        border-radius: 100px;
        margin: 14px auto 20px;
    }

    /* 言語切替：丸ピル */
    .menu_sp .language_sp{
        margin-top: 0;
        text-align: center;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
    }
    .menu_sp .language_sp li{ padding: 0; border: none; line-height: 1; }
    .menu_sp .language_sp li:first-child{
        width: 100%;
        margin-bottom: .8em;
        letter-spacing: .12em;
        color: #372D2D;
        text-align: center;
    }
    .menu_sp .language_sp li a{
        display: block;
        padding: 12px 22px;
        border-radius: 100px;
        font-weight: 700;
        background: #F7F2EC;
        color: #372D2D;
    }
    .menu_sp .language_sp li.active a{
        color: #fff;
        background: #372D2D;
    }

    .menu_sp .menu_cta{
        margin: 30px auto 0 auto;
        max-width: 100%;
        font-size: 100%;
    }

    .menu_sp .fabs_sp{
        margin-top: 22px;
        justify-content: center;
        gap: 18px;
    }
    .menu_sp .fabs_sp p{
        width: 100%;
        text-align: center;
        letter-spacing: .12em;
        color: #372D2D;
    }
    .menu_sp .fabs_sp a{ width: 42px; margin: 0; }
    .menu_sp .fabs_sp .fab{ opacity: 1; margin: 0; }

    @media (prefers-reduced-motion: reduce) {
        .menu_sp,
        .menu_backdrop,
        body.menu-open header {
            transition: none !important;
        }
    }
}