/* .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 */
.globalMenu .desktop{
    display: none;
}
body:has(.globalMenu:is(.on)){
    height: 100vh;
    overflow: hidden;
}
.globalMenu{
    display: none;
}
.globalMenu:is(.on){
    width: 100%;
    height: 100vh;
    overflow: scroll;
    display: flex;
    flex-wrap: wrap;
    background-color: #E8E8E8;
    padding: 30px 5% 125%;
    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;
    letter-spacing: initial;
    display: flex;
    align-items: center;
    font-size: 4vw;
}
.globalMenu>a[href='/']::before{
    content: "ウェルカム買取査定ナビ（TOP）";
    color: #404040;
}
.globalMenu>button{
    width: fit-content;
    border: none;
    background: none;
    text-align: center;
    margin: 5px auto;
    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-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    position: relative;
    gap: 10px;
    background-color: transparent;
    padding: 0px;
    top: 0px;
}
.globalMenu>div>a{
    width: 48%;
    border: 2px solid #7F7F7F;
    padding: 5px 2px;
    background-color: #ffffff;
    font-weight: bold;
    color: #404040;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 4vw;
}
.globalMenu:not(.service-piano)>div>a[href="/service/lp/roland-service/"]
,.globalMenu:not(.service-piano)>div>a[href="/service/lp/casio-service/"]
,.globalMenu:not(.service-piano)>div>a[href="/service/lp/steinwaysons-service/"]
,.globalMenu:not(.service-piano)>div>a[href="/service/lp/bechstein-service/"]
,.globalMenu>div>a[href="/service/lp/hermes-service/"]
,.globalMenu>div>a[href="/service/lp/burberry-service/"]
{
    display: none;
}
.globalMenu:is(.service-piano)>div>a[href="/service/lp/piano-high-priced-points/"]{
    width: 100%;
}
.globalMenu:is(.service-instrument)>div>a[href="/service/lp/gakki-high-priced-points/"]{
    width: 100%;
}
/* .globalMenu end */

/* TOSHO-breadcrumb start */
.TOSHO-breadcrumb{
    background-color: #ffffba;
    color: #ff5e3a;
    font-weight: bold;
    padding: 2px 2%;
    margin-top: 10px;
}
.TOSHO-breadcrumb a{
    color: inherit !important;
}
/* TOSHO-breadcrumb 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;
        pointer-events: none;
    }
    .globalMenu-logo>a[href^='tel:']>picture>img{
        height: auto;
    }
    .globalMenu-logo>input[type=image]{
        display: none;
    }
    /* .globalMenu-logo end */

    /* .globalMenu start */
    .globalMenu .desktop{
        display: block;
    }
    body:has(.globalMenu:is(.on)){
        height: auto;
        overflow: initial;
    }
    .globalMenu,
    .globalMenu:is(.on){
        height: initial;
        overflow: initial;
        background-color: #ff5e3a;
        margin-right: 0;
        margin-left: auto;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
        gap: 50px;
        position: relative;
        padding: 0px 30px;
    }
    .globalMenu>a{
        width: fit-content;
        border: none;
        padding: 5px 0;
        margin-bottom: 0;
        background: none;
        font-weight: bold;
        color: #ffffff !important;
        position: relative;
    }
    .globalMenu:is(.service-piano,.service-instrument)>a[href="/media/"]
    ,.globalMenu:is(.service-piano,.service-instrument)>a[href="/service/contact/"]
    {
        display:none;
    }
    .globalMenu>a[href='/']{
        font-size: 16px;
    }
    .globalMenu>a[href='/']::before{
        content: none;
    }
    .globalMenu>button{
        width: fit-content;
        border: none;
        text-align: center;
        margin: 0;
        padding: 5px 0;
        font-size: 18px;
        cursor: pointer;
        background:none;
        font-weight: bold;
        color: #ffffff;
        position: relative;
    }
    .globalMenu>button[data-button="その他"]{
        display: none;
    }
    .globalMenu>button::before
    ,.globalMenu>a::before
    {
        content: "";
        display: block;
        width: 1px;
        height: 70%;
        background-color: #ffffff;
        position: absolute;
        top: 50%;
        left: -25px;
        transform: translate(0%,-40%);
    }
    .globalMenu>div{
        display: none;
    }
    .globalMenu:has(button:hover)>div,
    .globalMenu>div:hover{
        flex-direction: column;
        gap: 10px;
        background-color: #fae2d5;
        padding: 20px 15px;
        position: absolute;
        top: 50px;
        left: 50%;
        z-index: 99999;
    }
    .globalMenu:has(button[data-button="買取品目一覧"]:hover)>div[data-list="買取品目一覧"]
    ,.globalMenu>div[data-list="買取品目一覧"]:hover{
        display: flex;
        width: fit-content;
        transform: translateX(calc(-50% - 180px));
    }
    .globalMenu:is(.media):has(button[data-button="買取品目一覧"]:hover)>div[data-list="買取品目一覧"]
    ,.globalMenu:is(.media)>div[data-list="買取品目一覧"]:hover{
        transform: translateX(calc(-50% + 30px));
    }
    .globalMenu:has(button[data-button="買取強化ブランド"]:hover)>div[data-list="買取強化ブランド"]
    ,.globalMenu>div[data-list="買取強化ブランド"]:hover
    {
        display: flex;
        flex-wrap: wrap;
        flex-direction: initial;
        width: 400px;
        transform: translateX(calc(-50% + 100px));
    }
    .globalMenu:is(.service-piano):has(button[data-button="買取強化ブランド"]:hover)>div[data-list="買取強化ブランド"]
    ,.globalMenu:is(.service-piano)>div[data-list="買取強化ブランド"]:hover{
        transform: translateX(calc(-50% - 120px));
    }
    .globalMenu:is(.service-instrument):has(button[data-button="買取可能な楽器の種類"]:hover)>div[data-list="買取可能な楽器の種類"]
    ,.globalMenu:is(.service-instrument)>div[data-list="買取可能な楽器の種類"]:hover{
        display: flex;
        flex-wrap: wrap;
        flex-direction: initial;
        width: 400px;
        transform: translateX(calc(-50% - 120px));
    }
    .globalMenu>div::before,
    .globalMenu>div::after{
        content: "";
        display: block;
        width: 100%;
        --clip-height: 20px;
        --clip-width: 17px;
        --clip-angle-position: 20%;
        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: #fae2d5;
    }
    .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;
        justify-content: flex-start;
        gap: 5px;
        font-size: 16px;
    }
    .globalMenu>div[data-list="買取強化ブランド"]>a
    ,.globalMenu>div[data-list="買取可能な楽器の種類"]>a{
        width: 48%;
    }
    .globalMenu>div>a[href="/service/lp/roland-service/"]
    ,.globalMenu>div>a[href="/service/lp/casio-service/"]
    ,.globalMenu>div>a[href="/service/lp/steinwaysons-service/"]
    ,.globalMenu>div>a[href="/service/lp/bechstein-service/"]
    ,.globalMenu>div>a[href="/service/lp/hermes-service/"]
    ,.globalMenu>div>a[href="/service/lp/burberry-service/"]
    {
        display: flex;
    }
    .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[data-list="買取強化ブランド"]>a::before{
        height: 1px;
    }
    .globalMenu>div[data-list="買取強化ブランド"]>span{
        width: 48%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 5px;
        font-weight: 900;
    }
    .globalMenu>div[data-list="買取強化ブランド"]>span::before{
        content: "";
        background-color: #FC6346;
        display: block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
    }
    /* .globalMenu end */
}

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

    /* TOSHO-breadcrumb start */
    .TOSHO-breadcrumb{
        padding: 2px calc(calc(100% - 1200px) / 2);
    }
    /* TOSHO-breadcrumb end */
}