@media(min-width:780px){

    /* モバイル用のメニューを非表示 */
    .header-menu-mobile-container{
        display: none;
    }

    
    /* ヘッダーコンテナ */
    .header-container{
        display: flex;
        column-gap: 12px;
        padding-left: 16px;
        padding-right: 16px;
    }


    /* ロゴとタイトル */
    .logo-title-container{
        display: flex;
        column-gap: 12px;
    }

    /* ロゴ */
    .custom-logo-container{
        /* 垂直中央に配置 */
        display: flex;
        align-items: center;
    }

    /* タイトルとキャッチフレーズ */
    .title-description-container{
        /* 垂直中央に配置 */
        display: flex;
        flex-direction: column;
        justify-content: center;

        /* モバイルで padding-left と padding-rightを設定したのでリセット */
        padding: 0;
    }
    header .site-title{
        text-align: start;
    }
    header .site-description{
        text-align: start;
    }


    /* デスクトップ用のメニューを表示 */
    .header-menu-desktop-container{
        display: flex;
        align-items: center;
    }
    

    /* メニュー */
    ul.header-menu-desktop{
        display: flex;
        flex-wrap: wrap;
        position: relative;
        list-style: none;

        column-gap: 16px;
        row-gap: 4px;
        margin: 0;
        padding: 0;
    }

    /* メニューアイテムの調整 */
    ul.header-menu-desktop li a{
        display: block;

        /* メニューアイテムを透明のボーダーで囲む。レイアウトシフトを防ぐために予めボーダーを確保しておく。 */
        border: 2px solid transparent;
    }
    
    ul.header-menu-desktop li a:hover{
        text-decoration: none;

        /* ホバーした時に、メニューアイテムの下にアンダーラインを表示する。text-decoration: underline; とは違う形のライン */
        border-bottom-color: inherit;
    }

    /* 現在地のメニューアイテムの強調表示。 */
    ul.header-menu-desktop li.current-menu-item a{
        /* 太字にする */
        font-weight: bold;

        /* アンダーラインを表示する */
        /* border-bottom-color: inherit; */
    }

    /* サブメニューアイテム */
    ul.header-menu-desktop ul.sub-menu{
        display: none;
        list-style: none;
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: 6px;
        padding-top: 6px;

        /* サブメニュー項目を改行させない */
        /* サブメニュー項目が画面の右端だった場合、折返して表示されてしまう、２段に分けて表示されてしまう。それの修正 */
        white-space: nowrap;

        /* サブメニューアイテムが要素の裏に隠れるのを防ぐ(z-indexを使った他の要素、背景画像など) */
        z-index: 9;
    }

    /* サブメニューアイテム間の調整 */
    ul.header-menu-desktop ul.sub-menu li{
        margin-bottom: 4px;
    }

    /* 子を持つメニューアイテムをマウスホバーした時にサブメニューを表示する */
    ul.header-menu-desktop li.menu-item-has-children:hover ul.sub-menu{
        display: block;
        position: absolute;
    }
    
    /* 子を持つメニューアイテムをタブキーでフォーカスした時にサブメニューを表示する */
    /* :focus-within　でサブメニュー内のアイテムへフォーカスする */
    ul.header-menu-desktop li.menu-item-has-children:focus-within ul.sub-menu{
        display: block;
        position: absolute;
    }

    /* サブメニューを持つメニューアイテムのアイコン（下矢印） */
    /* > セレクターで直下の子要素を選択。メニュー階層が3以上ある場合、表示されないアイテムの親アイコンが表示されてしまう */
    ul.header-menu-desktop > li.menu-item-has-children > a::after{
        font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f107";
        margin-left: 6px;
    }
}