@charset "utf-8";


/* アニメーション削除 */
.header__container,
.header__nav-container,
.header__nav-lists,
.header__logo-container,
.header__logo,
.header__menu-container,
.header__menu-item,
.header__menu-category,
.shotnavi_menu,
.header__dropdown-lists,
.hamburger-menu,
.header__dropdown-category,
.header__first_column,
.header__second_column,
.header__third_column,
.header__product-category,
.lheader__dropdown-list,
.hamburger__menu-container,
.hamburger-icon,
.hamburger-lines,
.hamburger__line,
.hamburger__line-01,
.hamburger__line-02,
.hamburger__line-03,
.hamburger__menu-title,
.hamburger__menu-lists,
.hamburger__menu-item,
.hamburger__menu-category,
.hamburger__dropdown_lists,
.hamburger__dropdown_list {
    opacity: 1;
    transform: none;
}

/* 共通ヘッダー */
#header {
    width: 100%;
    height: 80px;
    background-color: #000;
    color: #FFF;
    position: fixed;
    z-index: 100;
    display: flex;
    align-items: center;
}


.header__nav-container {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 0 2vw 0 3vw;
}

.header__nav-lists {
    display: flex;
    align-items: center;
    width: 100%;
    margin: 0;
    padding: 0;
}

.header__logo-container {
    width: 150px;
}

.header__menu-container {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 1;
    font-size: 1.5rem;
}

.header__menu-item {
    list-style: none;
    width: auto;
    height: auto;
    padding: 0 2vw;
    position: relative;
    transition: all .3s;
}

.header__menu-category,
.header__menu-container a,
.header__menu-item a,
.header__dropdown_list a,
.hamburger__menu-category,
.hamburger__menu-container a,
.hamburger__menu-item a,
.hamburger__dropdown_list a {
    text-decoration: none;
    color: #fff;
}

.header__menu-category:hover,
.header__menu-container a:hover,
.header__menu-title:hover,
.header__menu-item a:hover,
.header__dropdown_list a:hover {
    color: #9FA3A9;
}

.header__menu-item:not(:first-child)::before {
    content: "";
    width: 1px;
    height: 100%;
    background-color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    transition: all .3s;
}

.shotnavi_menu::before {
    border-top: 2px solid #fff;
    border-left: 2px solid #fff;
    content: '';
    display: block;
    width: 6px;
    height: 6px;
    transform: rotate(225deg);
    position: absolute;
    right: 1vw;
    top: calc(50% - 5px);
}

.header__dropdown-lists {
    display: none;
    list-style: none;
    width: max-content;
    position: absolute;
    top: 0;
    left: 0;
    padding: 15px;
    box-shadow: 0 5px 12px rgba(ß0, 0, 0, 0.15);
    text-align: left;
    background-color: #030303;
    opacity: 0;
    /* visibility: hidden;
    opacity: 0;
    list-style: none;
    width: max-content;
    position: absolute;
    top: 0;
    left: 0;
    padding: 15px;
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.15);
    text-align: left;
    background-color: #030303;
    transition: opacity .1s ease-in-out, visibility 5s ease-in-out; */
}

.shotnavi_menu:hover+.header__dropdown-lists,
.header__dropdown-lists:hover {
    display: flex;
    opacity: 1;
    visibility: visible;
}

.header__product-category {
    width: auto;
    height: auto;
    display: block;
    color: #9FA3A9;
    font-size: 1.6rem;
    border-bottom: 1px solid #fff;
    padding: 10px 0;
    align-self: flex-start;
}

.header__dropdown-list {
    color: #fff;
    height: auto;
    position: relative;
    justify-content: left;
    /* padding: 5px 0; */
    padding: 0; /* 上下のpaddingを削除 */}
}

.header__dropdown-list:hover {
    color: #9FA3A9;
}

.header__first_column,
.header__second_column,
.header__third_column {
    padding: 20px;
}

@media screen and (min-width: 801px) {
    .hamburger__menu-container {
        display: none;
        cursor: pointer;
    }
}

@media screen and (max-width: 800px) {

    /*  ハンバーガーメニューの表示 */
    .header__menu-container {
        display: none;
    }

    .hamburger__menu-container {
        display: block;
    }

    /* デザイン */
    .hamburger-icon {
        display: flex;
        align-items: center;
        cursor: pointer;
    }

    .hamburger-lines {
        display: flex;
        flex-direction: column;
        margin: 0;
        padding: 0;
        cursor: pointer;
    }

    .hamburger-lines .hamburger__line {
        width: 30px;
        height: 3px;
        border-radius: 2px;
        transition: all 0.3s ease;
        background-color: #FFF;
    }

    .hamburger-lines .hamburger__line:nth-of-type(1),
    .hamburger-lines .hamburger__line:nth-of-type(2) {
        margin-bottom: 5px;
    }

    /* ハンバーガーが開いた時 */
    .hamburger-icon.open #hamburger__line-01 {
        transform: rotate(45deg);
        position: relative;
        top: 8px;
    }

    .hamburger-icon.open #hamburger__line-02 {
        opacity: 0;
    }

    .hamburger-icon.open #hamburger__line-03 {
        transform: rotate(-45deg);
        position: relative;
        top: -8px;
    }

    .hamburger__menu-title {
        color: white;
        margin: auto 10px;
        align-items: center;
        justify-content: center;
    }

    /* メニュー一覧 */
    .hamburger__menu-lists {
        display: none;
        list-style: none;
        width: 150px;
        background-color: #030303;
        padding: 10px;
        position: absolute;
        right: 0;
        margin-top: 0;
    }

    .hamburger__menu-lists.active {
        display: block;
    }

    .hamburger__menu-item {
        margin: 30px auto 30px 0;
    }


    /* ドロップダウンメニュー */
    .hamburger__dropdown_lists {
        display: none;
        list-style: none;
        background-color: #030303;
        width: auto;
        position: absolute;
        top: 50px;
        right: 0;
        padding: 5px;
        text-align: left;
    }

    .hamburger__dropdown_list {
        height: auto;
        padding: 5px 0;
    }

    .hamburger__menu-container a,
    .hamburger__menu-item a,
    .hamburger__dropdown_list a {
        text-decoration: none;
    }

    .hamburger__menu-container a:hover,
    .hamburger__menu-title:hover,
    .hamburger__menu-item a:hover,
    .hamburger__dropdown_list a:hover {
        color: #9FA3A9;
    }

    .h_shotnavi_menu:hover+.hamburger__dropdown_lists,
    .hamburger__dropdown_lists:hover {
        display: flex;
        opacity: 1;
        visibility: visible;
    }

    .header__first_column,
    .header__second_column,
    .header__third_column {
        width: max-content;
        padding: 5px;
        font-size: 14px;
    }

}