/* 自社共通ナビの追加スタイル。default.cssの参照・本文は変更しない。 */
.mobile-nav {
    display: none;
}

@media screen and (max-width: 768px) {
    /* displayの詳細度は低くし、会員ページの既存非表示指定を優先する。 */
    .mobile-nav {
        display: block;
        box-sizing: border-box;
        padding: 0;
        padding: 0 0 env(safe-area-inset-bottom, 0px);
        padding-left: env(safe-area-inset-left, 0px);
        padding-right: env(safe-area-inset-right, 0px);
        border-top: 1px solid #494952;
        background: #11111b;
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
        -webkit-tap-highlight-color: rgba(255, 255, 255, 0.18);
    }
    .mobile-nav .icon_navi_list {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        min-width: 0;
        margin: 0;
        padding: 0;
    }
    .mobile-nav .header_nav_icon {
        width: auto;
        min-width: 0;
        list-style: none;
    }
    .mobile-nav #header-nav-home a,
    .mobile-nav #header-nav-browse a,
    .mobile-nav #header-nav-cart a,
    .mobile-nav #header-nav-signup a,
    .mobile-nav #header-nav-signin a {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        min-height: 64px;
        box-sizing: border-box;
        padding: 7px 2px;
        color: #fff;
        background: none;
        text-align: center;
        text-decoration: none;
        line-height: 1.3;
    }
    .mobile-nav svg {
        display: block;
        width: 24px;
        height: 24px;
        flex: 0 0 24px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
    }
    .mobile-nav-label {
        margin-top: 4px;
        font-size: 12px;
        font-size: clamp(12px, 3.2vw, 13px);
        font-weight: 500;
        overflow-wrap: break-word;
        overflow-wrap: anywhere;
    }
    .mobile-nav #header-nav-browse a {
        font-weight: bold;
        background: #30303b;
    }
    .mobile-nav a:hover,
    .mobile-nav a[aria-expanded="true"] {
        background-color: #40404a;
    }
    .mobile-nav a:focus-visible {
        outline: 2px solid #fff;
        outline-offset: -4px;
    }
    .shop_footer_bottom_block {
        padding-bottom: 85px;
        padding-bottom: calc(var(--mobile-nav-height, calc(65px + env(safe-area-inset-bottom, 0px))) + 20px);
    }
    /* 既存ドロワー内の部品だけを整える。開閉は標準JSが担当する。 */
    #sub-column .mobile-menu-search {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 6px;
        width: 100%;
    }
    /* iOS/Androidの標準フォーム装飾による差を、この検索欄内だけで抑える。 */
    #sub-column .mobile-menu-search input[name="Search"],
    #sub-column .mobile-menu-search button {
        -webkit-appearance: none;
        appearance: none;
        box-sizing: border-box;
        margin: 0;
        font-family: inherit;
        line-height: 1.4;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.15);
    }
    #sub-column .mobile-menu-search input[name="Search"] {
        min-width: 0;
        width: 100%;
        max-width: 100%;
        min-height: 44px;
        padding: 8px;
        border: 1px solid #777;
        border-radius: 3px;
        background: #fff;
        color: #222;
        font-size: 16px;
    }
    #sub-column .mobile-menu-search input[name="Search"]::placeholder {
        color: #666;
        opacity: 1;
    }
    #sub-column .mobile-menu-search button {
        min-width: 52px;
        min-height: 44px;
        padding: 8px;
        border: 1px solid #222;
        border-radius: 3px;
        background: #222;
        color: #fff;
        font-size: 15px;
    }
    #sub-column .category nav ul li a {
        display: flex;
        align-items: center;
        min-height: 44px;
        box-sizing: border-box;
        padding: 10px 8px;
        font-size: 15px;
        line-height: 1.5;
    }
    #sub-column {
        height: calc(100% - 65px);
        height: calc(100% - var(--mobile-nav-height, calc(65px + env(safe-area-inset-bottom, 0px))));
        padding-bottom: 100px;
        padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px));
    }
}