@charset "utf-8";


.c-new-top-menu .new-menu-list,
.c-new-top-menu .new-menu-list a,
#gnav .c-gnav,
#gnav .c-gnav a,
#gnav .c-gnav .ttl {
    font-family: '明朝', 'メイリオ', Meiryo, sans-serif !important;  
}

/* pc　スマホ共通 */

/*  lineアイコンの設定 */
.line-button svg {
  background-color: white !important;
  color: var(--linegreen) !important;
  font-size: 25px !important;
  border-radius: 50%;
  vertical-align: middle !important;
}



/* PC表示（960px以上）のカスタマイズ */
@media all and (min-width: 960px) {
    
    /* ============================== */
    /* 1. 全体レイアウト：左右２列 */
    /* ============================== */
    .l-header__inner.l-container,
    .l-fixHeader__inner.l-container {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        padding-top: 5px; 
        max-width: 1200px ;      
        width: 100%;    
    }

    /* 固定ヘッダのメニューが左にずれるのを直す */
    .l-fixHeader__inner {
        .header-col-2-master {
            flex-grow: 1;
        }
        .c-gnav {
            justify-content: flex-end;
        }
    }


    /* ============================== */
    /* ロゴ */
    /* ============================== */
    
    .header-col-1 {
        width: 42%; 
        padding-left: 0;     

        .l-header__logo {
            margin-right: 10px;
        }
    }

    /* 固定ヘッダのロゴはswellで小さくなる設定にされているので、ロゴサイズはここで決めることでサイズを合わせる */
    .l-header .c-headLogo,
    .l-fixHeader .c-headLogo {
        height: auto; 
        max-width: 100% ;
    }

    /* ============================== */
    /* 上下メニュー間の余白 */
    /* ============================== */

    .header-col-2-master .c-gnavWrap {
            margin-top: 10px;
        }

    /* ============================== */
    /* 1行目メニュー
    /* ============================== */
    .c-new-top-menu {

        order: 1 !important;
        /* リンクの装飾 */
        a {
            color: var(--text);
            text-decoration: none;
            padding: 5px 0;
            display: block;
            /* 1行目メニューのリンクの右側パディングもゼロにする */
            padding-right: 0 !important;
        }

        /* ボタンのテキスト */
        span {
            font-family: "Noto Sans Jp", 'メイリオ', Meiryo, sans-serif !important;
            font-size: 15px;
            color: var(--main-deeper);
        }

        /* 横並び設定 */
        .new-menu-list {
            list-style: none;
            display: flex;
            justify-content: flex-end;
            padding: 0;
            margin: 0;

            /* 各メニューボタン */
            li {
                margin-left: 5px;
                border-radius: 5px;
                padding: 1px 6px 1px 6px;
                border: 1px solid var(--main-deeper);
                background-color: var(--menu-button);

                /* 1行目メニューの最後の項目のマージンもリセット */
                &:last-child {
                    margin-right: 0 !important;
                }

                /* ボタンのアイコン */
                svg {
                    font-size: 16px;
                    color: var(--main-deeper);
                }
            }
        }
    }

    /* ============================== */
    /* 2行目メニュー
    /* ============================== */

    .header-col-2-master .c-gnav{
         
        > .menu-item > a .ttl {
            font-size: 15px;
        }

        /* メニュー下線（緑色の線）の位置をメニューの下端へ */
         > .menu-item > a::after {
            margin-bottom: -12px;            
        }

        /* ページ遷移直後のメニュー下線のアニメーションを無効化 ただしホバーしていれば有効*/
        >  .-current > a::after {
            transition: none;
        }

        /* サブメニューを角丸にする borderradiusを２か所変える必要がある*/
        .sub-menu {
            width: 8em ;
            border-radius: 8%;
            margin-top: 12px;
    
            &:before{
                border-radius: 8%;
            }
            /* a {
                border-radius:12%;
            } */

            /* サブメニューアイコンの色 */
            a:before{
                color: var(--main-deeper);
            }
        }
    }
    
    
    /* ================================================= */
    /* button */
    /* ================================================= */
    .request-button {
        background-color: var(--main-deeper) !important;
        svg,
        span {
            color: white !important;
        }
    }

    .phone-button {
        svg {
            padding-right: 7px;
        }
    }


/* ================================================= */
/* 検索ボタンの位置調整 */
/* ================================================= */

.c-gnav__sBtn c-plainBtn {
    
    /* 上側に必要なスペースを確保するためのパディングを追加 */
    padding: 0px 12px 110px !important; 
    margin-bottom: 10px;
}

.c-gnav .ttl{
    padding-top: 5px;
}
}


/* スマホ対応 */
@media all and (max-width: 959px) { 

    /* 要素を中央揃えにしつつ、ロゴとボタンを横並びに */
    .header-col-1 {
        display: flex ; 
        align-items: center; 
        justify-content: space-between;
        width: 100%;
    }

    /* ヘッダーメニュー１行目を非表示（２行目はwpが非表示にする） */
    .header-col-2-master > .c-new-top-menu {
        display: none;
    }

    /* メインメニューのスライドイン速度を変更 */
    .p-spMenu__inner {
        transition: transform .25s ease-out ,-webkit-transform .25s ease-out; 
    }

    /* メニューボタンの文字「メニュー」は折り返ししない */
    .c-iconBtn {
        white-space: nowrap;
    }

    
    /* ================================================= */
    /* 固定フッター */
    /* ================================================= */

    #fix_bottom_menu {
        position: fixed !important;
        bottom: 0 !important;
        display: block !important;
        width: 100% !important;
        z-index: 9999;

        /* 全ボタン共通 (子孫要素 .menu_list) */
        .menu_list {
            > * {
                height: 50px;

                /* 文字 */
                span {
                    font-size: 11px !important;
                    padding-top: 3px !important;
                }

                /* swellのアイコン非表示 */
                i {
                    display: none !important;
                }
            }
        }

        /* アイコン (SVG) */
        svg {
            font-size: 20px !important;
        }
    }



    /* ボタン別 */
    .request-button{
        background-color: var(--main-deeper);
        color: var(--menu-button) !important;
    }
    .phone-button{
        background-color: var(--menu-button);
        color:var(--main-deeper) !important; 
    }
    .line-button {
        background-color: var(--menu-button);
        color: var(--main-deeper) !important;
        svg {
            font-size: 28px !important;
        }
    }
    
}