/* .globalMenu-logo start */
.globalMenu-logo{
    display: flex;
    justify-content: space-between;
    margin: 3px auto;
    width: 98%;
}
.globalMenu-logo>*:has(img[src='/piano/images/logo.png']){
    width: 35%;
    margin-right: 45%;
}
.globalMenu-logo>*:has(img[src='/piano/images/logo.png'])>a{
    display: flex;
}
.globalMenu-logo>*:has(img[src='/piano/images/logo.png'])>a>img{
    width: 100%;
}
.globalMenu-logo>a[href^='tel:']{
    display: block;
    width: 10%;
}
.globalMenu-logo>a[href^='tel:']>picture>img{
    width: 100%;
    height: 100%;
}
.globalMenu-logo>input[type=image]{
    display: block;
    width: 10%;
}
/* .globalMenu-logo end */

/* .globalMenu start */
body:has(.globalMenu:is(.on)){
    height: 100vh;
    overflow: hidden;
}
.globalMenu{
    display: none;
}
.globalMenu:is(.on){
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    background-color: #E8E8E8;
    padding: 30px 5% 100%;
    z-index: 999;
}
.globalMenu>a{
    width: 100%;
    border: 2px solid #7F7F7F;
    padding: 10px;
    margin-bottom: 10px;
    background-color: #ffffff;
    font-weight: bold;
    color: #404040;
    background-image: url(/image/toppage/globalMenu-triangle-mobile.png);
    background-repeat: no-repeat;
    background-position: top 50% right 5%;
    background-size: 18px;
    text-decoration: none;
}
.globalMenu>a[href='/']{
    color: transparent;
}
.globalMenu>a[href='/']::before{
    content: "ウェルカム買取査定ナビ（TOP）";
    color: #404040;
    position: absolute;
}
.globalMenu>button{
    width: fit-content;
    border: none;
    background: none;
    text-align: center;
    margin: 20px auto 10px;
    color: #404040;
    font-weight: bold;
    padding: 0;
    background-image: linear-gradient(to bottom,transparent 0 55%,#FC6346 55% 85%,transparent 85% 100%);
    font-size: 18px;
}
.globalMenu>div{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    position: relative;
    gap: 10px;
    background-color: transparent;
    padding: 0px;
    top: 0px;
}
.globalMenu>div>a{
    width: 46%;
    border: 2px solid #7F7F7F;
    padding: 0 10px;
    background-color: #ffffff;
    font-weight: bold;
    color: #404040;
    display: flex;
    flex-direction: row;
    align-items: center;
    text-decoration: none;
}
.globalMenu>div>a::before{
    content: "";
    background-color: initial;
    display: block;
    width: 30px;
    height: 40px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}
.globalMenu>div>a:nth-of-type(1)::before{
    background-image: url(/image/toppage/globalMenu-piano.png);
}
.globalMenu>div>a:nth-of-type(2)::before{
    background-image: url(/image/toppage/globalMenu-guitar.png);
}
/* .globalMenu end */

@media (min-width: 768px){
    /* .globalMenu-logo start */
    .globalMenu-logo{
        max-width: 1200px;
        align-items: center;
    }
    .globalMenu-logo>*:has(img[src='/piano/images/logo.png']){
        width: 260px;
        margin-right: auto;
    }
    .globalMenu-logo>a[href^='tel:']{
        width: 350px;
    }
    .globalMenu-logo>a[href^='tel:']>picture>img{
        height: auto;
    }
    .globalMenu-logo>input[type=image]{
        display: none;
    }
    /* .globalMenu-logo end */

    /* .globalMenu start */
    body:has(.globalMenu:is(.on)){
        height: auto;
        overflow: initial;
    }
    .globalMenu,
    .globalMenu:is(.on){
        max-width: 280px;
        margin-right: 0;
        margin-left: auto;
        margin-bottom: 15px;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center;
        position: relative;
        padding: 5px 30px;
        border-radius: 8px;
        background-color: initial;
    }
    .globalMenu>a{
        width: fit-content;
        border: none;
        padding: 5px 10px;
        margin-bottom: 0;
        background: none;
        font-weight: bold;
        color: inherit !important;
    }
    .globalMenu>a[href='/']::before{
        content: none;
    }
    .globalMenu>button{
        width: fit-content;
        border: none;
        text-align: center;
        margin: 0;
        padding: 0;
        font-size: 18px;
        cursor: pointer;
        background:none;
        padding-left: 8px;
        padding-right: 35px;
        font-weight: bold;
        color: inherit;
        position: relative;
    }
    .globalMenu>button::after{
        content: "";
        display: block;
        width: 13px;
        height: 21px;
        background-color: #FC6346;
        clip-path: polygon(
            0% 0%,
            100% 0%,
            50% 100%
        );
        position: absolute;
        top: 50%;
        right: 0%;
        transform: translate(-100%,-40%);
    }
    .globalMenu>div{
        display: none;
    }
    .globalMenu:has(button:hover)>div,
    .globalMenu>div:hover{
        display: flex;
        width: 250px;
        flex-direction: column;
        gap: 10px;
        background-color: #E8E8E8;
        padding: 20px 15px;
        position: absolute;
        top: 55px;
        right: 0;
        z-index: 99999;
    }
    .globalMenu>div::before,
    .globalMenu>div::after{
        content: "";
        display: block;
        width: 100%;
        --clip-height: 20px;
        --clip-width: 17px;
        --clip-angle-position: 75%;
        position: absolute;
        top: 0;
        left: 0;
        transform: translateY(-100%);
    }
    .globalMenu>div::before{
        clip-path:
            polygon(
                var(--clip-angle-position) 0,
                calc(var(--clip-angle-position) + var(--clip-width) / 2) var(--clip-height),
                100% var(--clip-height),100% 100%,
                0 100%,0 var(--clip-height),
                calc(var(--clip-angle-position) - var(--clip-width) / 2) var(--clip-height)
            );
        padding-top: calc(var(--clip-height));
        background-color: #E8E8E8;
    }
    .globalMenu>div::after{
        height: var(--clip-height);
    }
    .globalMenu>div>a{
        width: 100%;
        border: none;
        border-bottom:2px solid #ffffff;
        padding: 5px 10px;
        background-color: transparent;
        color: #000000;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 5px;
    }
    .globalMenu>div>a:hover{
        color: #FC6346;
    }
    .globalMenu>div>a::before{
        content: "";
        background-color: #FC6346;
        display: block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
    }
    .globalMenu>div>a:nth-of-type(1)::before,
    .globalMenu>div>a:nth-of-type(2)::before{
        background-image: none;
    }
    /* .globalMenu end */
}

@media (min-width: 1200px){
    /* .globalMenu start */
    .globalMenu,
    .globalMenu:is(.on){
        margin-right: calc(calc(100% - 1200px) / 2);
        margin-left: auto;
    }
    /* .globalMenu end */
}