@charset "utf-8";
/* =========================================================================================================================================== */
/* ヘッダーCSS                                                                                                                                   */
/* =========================================================================================================================================== */
#dummy-header {
    height: 0.1px;
}
@media all {
    /* 全体 */
    #header {
        width: 100%;
        padding: 30px 70px;
        /* <!-- 23.02.27 ここから --> */
        position: absolute;
        /* <!-- 23.02.27 ここまで --> */
        z-index: var(--zindex-header);
        transition: background-color 0.3s ease;
    }
    /* <!-- 23.02.27 ここから --> */
    /*
    #header.scroll {
        background-color: rgba(0,0,0,0.8);
    }
    */
    /* <!-- 23.02.27 ここまで --> */
    .header-inner {
        display: flex;
        justify-content: space-between;
    }
    

    /* ロゴ */
    #header .logo {
        width: 220px;
    }
    #header .logo .black {
        display: none;
    }
    /* 下層ページはスクロール時に黒ロゴ→白ロゴへ切り替え */
    /* <!-- 23.02.27 ここから --> */
    .page-sub #header .logo .white { display: none; }
    .page-sub #header .logo .black { display: block; }
    /* -- スクロールの表示切り替えは無効 
    .page-sub #header.scroll .logo .white { display: block; }
    .page-sub #header.scroll .logo .black { display: none; }
    */
    /* <!-- 23.02.27 ここまで --> */


    /* Gメニューボタン */
    #header .btn-gnavi {
        width: 63px;
        height: 63px;
        background-color: var(--color-black1);
        position: relative;
        z-index: var(--zindex-btn-gnavi);
    }
    #header .btn-gnavi span {
        position: absolute;
        display: block;
        width: 33px;
        height: 1px;
        background-color: var(--color-white);
        margin: auto;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        transition: all 0.5s ease;
    }
    #header .btn-gnavi span::before,
    #header .btn-gnavi span::after {
        content: "";
        display: block;
        width: 100%;
        height: 1px;
        background-color: var(--color-white);
        position: absolute;
        transition: all 0.5s ease;
    }
    #header .btn-gnavi span::before {
        top: -11px;
    }
    #header .btn-gnavi span::after {
        top: 11px;
    }


    /* 【メニュー開】Gメニューボタン */
    .gnavi_open #header .btn-gnavi span {
        height: 0;
    }
    
    .gnavi_open #header .btn-gnavi span::before, 
    .gnavi_open #header .btn-gnavi span::after {
        top: 0;
    }
    .gnavi_open #header .btn-gnavi span::before {
        transform: rotate(45deg);
    }
    .gnavi_open #header .btn-gnavi span::after {
        transform: rotate(-45deg);
    }
}
@media (max-width: 1023px) {
    #header {
        padding: 20px 40px;
    }


    /* ロゴ */
    #header .logo {
        width: 120px;
    }


    /* Gメニューボタン */
    #header .btn-gnavi {
        width: 36px;
        height: 36px;
    }
    #header .btn-gnavi span {
        width: 17px;
    }
    #header .btn-gnavi span::before {
        top: -8px;
    }
    #header .btn-gnavi span::after {
        top: 8px;
    }
}


/* --------------------------- */
/* Gメニュー                     */
/* --------------------------- */
@media all {
    /* 【メニュー開】メニュー */
    .gnavi_open #gnavi {
        overflow-y: scroll;
    }

    /* メニュー */
    #gnavi {
        position: fixed;
        width: 100%;
        left: 0;
        top: 0;
        background-color: var(--color-black1);
        overflow: hidden;
        height: 0;
        transition: all 0.5s ease;
        z-index: var(--zindex-gnavi);
    }
    .gnavi-inner {
        max-width: 322px;
        margin: 0 auto;
        padding-top: 50px;
    }
    #gnavi .menus a {
        color: var(--color-white);
        text-align: center;
    }
    #gnavi .menus ul li a .ja {
        font-size: 22px;
        font-weight: var(--font-weight-bold);
        line-height: 22px;
        padding-bottom: 5px;
    }
    #gnavi .menus ul li a .en {
        font-size: 12px;
        line-height: 12px;
        font-weight: var(--font-weight-bold);
        color: var(--color-gray1);
    }
    #gnavi .menus ul li {
        padding-bottom: 40px;
    }


    /* SNSメニュー */
    #gnavi .sns ul {
        display: flex;
        justify-content: center;
        padding-bottom: 47px;
    }
    #gnavi .sns ul li {
        width: 34px;
        margin: 0 13px;
    }
    #gnavi .sns ul li a {
        vertical-align: middle;
    }
    #gnavi .info {
        text-align: center;
        color: var(--color-white);
    }
    
    /* グループ情報 */
    #gnavi .info a {
        color: var(--color-white);
    }
    #gnavi .info figure {
        width: 175px;
        margin: 0 auto;
        padding-bottom: 19px;
    }
    #gnavi .info .name {
        font-size: 14px;
        font-weight: var(--font-weight-bold);
        color: var(--color-white);
        text-align: center;
        line-height: 1;
        padding-bottom: 8px;
    }
    #gnavi .info .url {
        text-align: center;
        line-height: 1;
        padding-bottom: 19px;
        font-size: 14px;
    }
    #gnavi .info .zip {
        font-size: 14px;
        line-height: 22px;
    }
    #gnavi .info .address {
        font-size: 14px;
        line-height: 22px;
    }
    #gnavi .info .tel {
        font-size: 14px;
        line-height: 22px;
        padding-bottom: 32px;
    }
    #gnavi .banners {
        max-width: 220px;
        margin: 0 auto;
        padding-bottom: 39px;
    }
    #gnavi .banners ul li {
        padding-bottom: 17px;
    }
}
@media (max-width: 1023px) {
    #gnavi .info figure {
        width: 150px;
    }
    #gnavi .menus ul li a .ja {
        font-size: 18px;
        line-height: 18px;
    }
    #gnavi .menus ul li a .en {
        font-size: 10px;
        line-height: 10px;
    }
}