/*---------- header search (PCのみ) ----------*/
/* 入れ子CSSは旧ブラウザ(iOS17.1以前・Chrome119以前)で丸ごと無効になるため、フラットなセレクタで書く */

.header_search_toggle {
    width: 18px;
    height: 34px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
}

.header_top_wrap .right .header_search_toggle img {
    width: 18px;
    height: 34px;
}

.header_top_wrap .right .header_search_toggle .icon_close {
    display: none;
}

.header_area.is-search-open .header_top_wrap .right .header_search_toggle .icon_open {
    display: none;
}

.header_area.is-search-open .header_top_wrap .right .header_search_toggle .icon_close {
    display: block;
}

.header_search_panel {
    position: absolute;
    top: 100%;
    right: 32px;
    z-index: 10;
    width: 455px;
    height: 44px;
    background: #fff;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

.header_area.is-search-open .header_search_panel {
    opacity: 1;
    visibility: visible;
}

.header_search_panel form {
    display: flex;
    align-items: center;
    height: 100%;
}

.header_search_panel .header_search_input {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0 0 0 13px;
    border: none;
    outline: none;
    background: transparent;
    color: #001b5b;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 14px;
    font-weight: 700;
}

.header_search_panel .header_search_input::placeholder {
    color: #aaa;
    opacity: 1;
}

.header_search_panel .header_search_submit {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 100%;
    padding: 0 13px;
    border: none;
    background: none;
    cursor: pointer;
}

.header_search_panel .header_search_submit img {
    width: 14px;
    height: auto;
}

@media screen and (max-width: 768px) {
    .header_search_panel {
        display: none;
    }
}