@charset "UTF-8";

/* Menu ******************************/

:root {
    --menu-color-0 : #8FBC8F; 
}

/* スマホ用メニュー表示ボタン */

#hiddenmenu {
    display : none;
    text-align: center;
    margin : 0;
    padding : 0;
    touch-action : none;
    cursor : pointer;
}

.hm {
    background-color : skyblue;
    color : white;
    font-size : 2rem;
    height: 100%;
    margin : 0;
    padding : 10px;
}

/* スマホ用メニュー本体 */

#mainmenu {
    transition : left 0.5s ease;
    display : none;
}
  
#mainmenu.open {
    position : fixed;
    left : 0px;
}

.hnav {
    text-align : left;
    margin : 0 10px 0 auto;
}

nav.hnav ul {
    display : flex;
    flex-direction: column;
    margin: 5px 0px;
    padding-left : 0; /* 左の余白をリセットして綺麗に揃える */
    background-color : skyblue;
}

nav.hnav ul li {
    display: flex; /* 💡 コロンのタイポを修正 */
    justify-content: center; /* 💡 親のli側でも中央揃えを担保 */
    align-items: center;     /* 💡 親のli側でも中央揃えを担保 */
    font-family: sans-serif;
    background-color: white;
    height: 50px;
    width: 150px;
    margin: 5px 5px;
    padding: 0; /* 💡 aタグがはみ出さないように0に修正 */
    list-style-type : none;
    transition: background-color 0.5s ease; 
}

/* メニュー内のリンク共通設定（横メニュー・スマホ共通） */
ul a {
    display : flex; /* 💡 中央揃え（justify/align）を効かせるために必須 */
    justify-content : center;
    align-items : center;
    width: 100%;
    height : 100%;
    text-decoration : none;
    color: black;
    font-size : 1em;
}

nav.hnav ul li a{
    justify-content : flex-start;
    padding : 0 1rem
}

nav.hnav ul li:hover {
    background-color : blue;
}

nav.hnav ul li:hover a {
    color : white;
}

.menu {
    /* display : flex; */
    flex-direction : column;
}

/* Other menu system */

/* 横並びのメニュー */

#hormenu {
}

.hmenu {
    background-color : skyblue;
    display: flex;
    list-style: none;
    padding: 2px 5px;
    margin: 0;
    gap: 12px; /* ボタン同士の間隔 */
}

/* 子要素（liタグをボタン風にする） */
ul.hmenu li {
    display : flex;
    flex : 1 1 calc(100% / 7);
    text-align: center;
    list-style-type : none;
    /* 1. 縁（ボーダー）をつける */
    border: 2px solid #333333; 
    
    /* 2. 内側に余白を作ってボタンの形にする */
    padding: 0; /* 💡 はみ出し防止のため0にし、aタグの広がりを優先 */
    
    /* 3. 角を少し丸くしてボタンらしくする */
    border-radius: 4px; 
    
    /* 4. その他の見た目調整 */
    background-color: #ffffff; 
    color: #333333;            
    cursor: pointer;           
    font-weight: bold;         
    
    /* アニメーションを滑らかにする設定 */
    transition: all 0.2s ease; 
}

/* 横並びメニュー用aタグの個別微調整 */
ul.hmenu li a {
    padding: 8px; /* 💡 ボタンの余白はaタグ側に持たせるとタップ領域が広がります */
}

/* マウスを乗せたとき（ホバー時）の演出 */
.hmenu li:hover {
    background-color : #333333; /* 背景色と文字色を反転させる */
}

.hmenu li:hover a {
    color : white;
}

/* メディアクエリ設定（スマホ縦向き用） */
@media screen and (max-width : 736px) and (orientation: portrait){
    #hormenu {
        display : none;
    }
      
    #mainmenu {
        display : block;
        float : left;
        position : fixed;
        left : -300px;
    }
      
    #hiddenmenu {
        display : block;
        position : sticky;
        top : 0px;
        max-width : 100%;
        height : 4em;
    }
} /* 💡 余分だった最後の } を1つ削除しました */