.headerLeft {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px 0px;
}

.headerRightLower {
    display: flex;
    /* flex-wrap: wrap-reverse; */
    justify-content: flex-end;
    flex-direction: column;
}

.searchBox {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    column-gap: 20px;
}

.main-nav {
    margin: 0px auto 10px;
}


@media screen and (min-width: 992px) {

    .main-nav .gyosei>a,
    .main-nav .shigoto>a,
    .main-nav .kenko>a,
    .main-nav .kosodate>a,
    .main-nav .kurashi>a {
        background-image: none;
        padding: 4px 0;
        line-height: 1.3;
    }

    .main-nav .gyosei.is-open>a,
    .main-nav .shigoto.is-open>a,
    .main-nav .kenko.is-open>a,
    .main-nav .kosodate.is-open>a,
    .main-nav .kurashi.is-open>a {
        background-image: none;
    }
}


/* 検索コンテナ */
.site-header-lower .searchContainer {
    align-self: flex-end;
    pointer-events: auto;
    background-color: #fffffff0;
    /* padding: 10px; */
    border-radius: 8px;
    /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); */
    margin: 0 10px 10px 0;
    /* width: 450px; */
}

/* --- 「キーワードでさがす」の見出し --- */
.site-header-lower .searchContainer h2 {
    color: #333;
    margin: 0;
    font-weight: 600;
}

/* --- Googleカスタム検索フォーム全体 --- */
#cse-search-box-floating,
#cse-search-box {
    display: flex;
    width: 100%;
}

/* --- 検索入力欄 --- */
#cse-search-box-floating #tmp_query_floating,
#cse-search-box #tmp_query {
    flex-grow: 1;
    border: 2px solid #404040;
    background-color: #fff;
    padding: 6px 12px;
    border-radius: 500px 0 0 500px;
    outline: none;
    transition: border-color 0.3s, box-shadow 0.3s;
    margin: 0;
    /* height: 42px; */
}

/* --- 検索入力欄にフォーカスした時 --- */
#cse-search-box-floating #tmp_query_floating:focus,
#cse-search-box #tmp_query:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.15);
}

/* --- 検索ボタン --- */
#cse-search-box-floating #submit,
#cse-search-box #submit {
    border: none;
    background-color: #404040;
    color: white;
    padding: 8px 18px;
    cursor: pointer;
    border-radius: 0 500px 500px 0;
    transition: background-color 0.3s;
    height: 42px;
}

/* --- 検索ボタンにマウスを乗せた時 --- */
#cse-search-box-floating #submit:hover,
#cse-search-box #submit:hover {
    background-color: #404040;
}

/* --- ボタン風メニュー (searchMenu1, searchMenu2共通) --- */
.searchMenu1 ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.searchMenu2 ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    padding: 0;
    margin: 0 0 15px 0;
    list-style: none;
}

/* searchMenu2が最後の場合、下の余白をなくす */
.searchContainer .searchMenu2:last-child ul {
    margin-bottom: 0;
}

.searchMenu1 li,
.searchMenu2 li {
    margin: 0;
}

.searchMenu1 li a,
.searchMenu2 li a {
    display: block;
    background-color: #FEDF8F;
    color: #333;
    padding: 6px 20px;
    /* ボタンの高さを縮小 */
    text-decoration: none;
    border-radius: 30px;
    font-weight: 500;
    transition: background-color 0.3s, color 0.3s, transform 0.2s;
    font-size: 1.4rem;
}

.searchMenu2 li a {
    border: solid 2px #30818A;
    color: #30818A;
    background-color: #FFF;
    padding: 5px 10px;
    text-align: center;
}

/* --- ボタンにマウスを乗せた時 --- */
.searchMenu1 li a:hover,
.searchMenu2 li a:hover {
    background-color: #30818A;
    color: #fff;
    transform: translateY(-1px);
    /* 浮き上がりを少しに */
}

/* --- 注目キーワード (存在する場合) --- */
#search_trend_word {
    margin-bottom: 15px;
}

/* 注目ワードがsearchMenu2の後にくる場合は、searchMenu2のulのmargin-bottomを0にする */
.searchMenu1+#search_trend_word+.searchMenu2 ul {
    margin-bottom: 0;
}

#search_trend_word_ttl {
    color: #555;
    font-size: 1.4rem;
}

#search_trend_word p {
    margin: 0px;
}

#search_trend_word p a {
    color: #555;
    text-decoration: none;
    margin: 0 5px;
    background-color: #eee;
    padding: 5px 8px;
    cursor: pointer;
    border-radius: 500px;
}

#search_trend_word p a:hover {
    text-decoration: underline;
}

/* --- フローティング検索メニュー --- */
.floating-search-container {
    position: fixed;
    top: 50%;
    right: 0;
    /* 変更: コンテナ全体を動かすため、初期位置をパネルが隠れる位置に設定 */
    transform: translate(calc(490px - 40px), -50%);
    z-index: 998;
    display: flex;
    align-items: center;

    /* 初期状態は非表示 */
    visibility: hidden;
    opacity: 0;
    /* 変更: transformのアニメーションを追加し、表示/非表示のtransitionを調整 */
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out, visibility 0s 0.3s;
}

/* 表示状態のスタイル */
.floating-search-container.is-visible {
    visibility: visible;
    opacity: 1;
    /* 変更: visibilityの遅延をなくすように調整 */
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

/* 開閉ボタン */
.floating-search-toggle {
    cursor: pointer;
    background-color: #404040;
    color: white;
    border: none;
    border-radius: 6px 0 0 6px;
    box-shadow: -2px 2px 8px rgba(0, 0, 0, 0.15);
    transition: background-color 0.3s;
    /* 変更: orderプロパティでボタンをパネルの左側に配置 */
    order: 0;
    pointer-events: all;
    width: 40px;
    height: 200px;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.floating-search-toggle:hover {
    background-color: #5a5a5a;
}

/* ボタン内のテキストspanは不要になるので非表示に */
.floating-search-toggle span {
    display: none;
}

/* 開閉パネル */
.floating-search-panel {
    width: 450px;
    background-color: #fffffff5;
    border-radius: 0px 0px 0px 6px;
    box-shadow: 8px 0px 12px rgba(0, 0, 0, 0.2);
    border: 1px solid #ddd;
    border-right: none;
    max-height: 90vh;
    overflow-y: auto;
    /* 追加: orderプロパティでパネルをボタンの右側に配置 */
    order: 1;
}

/* 変更: is-openクラスが付与された際、コンテナ全体を移動させてパネルを表示 */
.floating-search-container.is-open {
    transform: translate(0, -50%);
}

/* 複製した検索コンテナのスタイル調整 */
.floating-search-panel .searchContainer {
    margin: 0;
    width: 100%;
    box-shadow: none;
    padding: 16px;
    background-color: #FFF;
    border-radius: 0;
    box-sizing: border-box;
}

.floating-search-panel .searchContainer h2 {
    color: #333;
    margin: 0;
    font-weight: 600;
}

.floating-search-panel .searchContainer .searchBox {
    justify-content: flex-start;
    flex-wrap: wrap;
    row-gap: 10px;
    margin-bottom: 10px;
}

.floating-search-panel .searchContainer .searchBox #top_search_keyword {
    width: 100%;
}

.floating-search-panel .searchContainer .searchBox .searchMenu1 {
    order: 2;
}

.site-header-lower .searchContainer .is-hidden-in-header {
    display: none;
}


/* レスポンシブ対応 (モバイル向け) */
@media (max-width: 992px) {
    #supportNavMenu ul {
        flex-wrap: wrap;
        row-gap: 14px;
        justify-content: flex-start;
    }

    .headerLeft {
        padding: 0;
    }

    .site-logo {
        width: calc(100% - 90px);
        margin-left: 10px;
        margin-bottom: 12px;
        margin-top: 15px;
    }

    .site-logo span img {
        width: 100%;
    }

    .site-header-lower .searchContainer {
        width: 100%;
        margin: 20px 0;
        box-sizing: border-box;
    }

    .site-header-lower .searchContainer form {
        flex-direction: column;
    }

    .floating-search-toggle {
        height: 38px;
    }

    .floating-search-panel {
        width: calc(100% - 40px);
    }

    .floating-search-container {
        transform: translate(calc(100% - 40px), -50%);
    }
}

/* ===============================================
   下層ページの「いざというとき」メニュー表示制御
   =============================================== */
.izaSection {
    display: none;
}

@media (max-width: 992px) {
    .main-nav {
        margin: 0px auto;
        line-height: 1.6rem;
    }

    .main-nav>ul>li>a::after,
    .mega-menu-column ul li a,
    .main-nav>ul>li>a {
        font-size: 1.6rem;
    }

    .izaSection {
        display: block;
    }

    .main-nav .iza-menu h2 {
        font-size: 1.6rem;
    }

    /* ulをグリッドコンテナに設定 */
    .iza-menu>ul {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
        list-style: none;
        padding: 0;
        max-width: 400px;
        margin: 0 auto;
    }

    .iza-menu>ul li {
        margin-bottom: 0px;
    }

    .iza-menu>ul a {
        display: block;
        position: relative;
        padding: 6px 0px;
        padding-left: 43px;
        background-color: #FFF;
        border-radius: 500px;
        text-decoration: none;
        font-weight: 600;
        border: solid 2px #D1384C;
        pointer-events: auto;
        font-size: 1.6rem;
        color: #333;
    }

    .iza-menu>ul a::before {
        content: '';
        position: absolute;
        left: 15px;
        top: 50%;
        transform: translateY(-50%);
        width: 20px;
        height: 20px;
        border-radius: 50%;
        box-sizing: border-box;
        background-color: #d1384c;
    }

    .iza-menu>ul a::after {
        content: '';
        position: absolute;
        left: 21px;
        top: 50%;
        width: 7px;
        height: 7px;
        border-top: 2px solid #FFF;
        border-right: 2px solid #FFF;
        transform: translateY(-50%) rotate(45deg);
        box-sizing: border-box;
    }

}