/***** ドロップダウンメニュー *****/

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


/* ロゴ */
.custom-logo-container{
    display: flex;
    justify-content: center;
}


/* タイトルとキャッチフレーズ */
.title-description-container{
    padding-left: 16px;
    padding-right: 16px;
}
header .site-title{
    text-align: center;
}
header .site-description{
    text-align: center;
}


/* モバイル用のメニューを表示 */
.header-menu-mobile-container{
    display: block;
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 4px;
}

/* モバイルメニュー用のスタイル、トグルアイコンをタップするまでは非表示 */
ul.header-menu-dropdown-mobile{
    display: none;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* メニューアイテムの上下の間隔を空ける。 */
ul.header-menu-dropdown-mobile li a{
    display: block;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    
    padding-top: 11px;
    padding-bottom: 10px;
    padding-left: 12px;
    padding-right: 12px;
}

/* タップ、ホバー時のアンダーラインを非表示 */
ul.header-menu-dropdown-mobile li a:hover,
ul.header-menu-dropdown-mobile li a:active{
    text-decoration: none;
}

/* サブメニュー、階層 */
/* リストアイテムのデフォルトの●マークなどを削除 */
ul.header-menu-dropdown-mobile ul.sub-menu{
    list-style: none;
    padding: 0;
    padding-left: 16px;
}

/* モバイルメニューのトグル */
.toggle-header-menu{
    display: block;
    text-align: center;
    font-size: 1.2rem;
    padding-bottom: 4px;
}

/* モバイルメニュートグルの為の input type checkbox を非表示 */
#baumkupen-input-toggle-header-menu{
    display: none;
}

/* トグルをタップした時にメニューアイテム一覧を表示。もう一度タップすると非表示 */
#baumkupen-input-toggle-header-menu:checked ~ * ul.header-menu-dropdown-mobile{
    display: block;
}

/* トグルのアイコン、下矢印アイコン */
.toggle-header-menu::after{
    font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f0d7";
}

/* トグルをタップしてメニューを開いている間、トグルアイコンが上矢印に変わる */
#baumkupen-input-toggle-header-menu:checked ~ .toggle-header-menu::after{
    font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f0d8";
}

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