#myTabs {
    display: flex;
    flex-wrap: nowrap;
    background-color: #ffffff;   /*タブの背景*/
    border-color: #000000;
    border-bottom: none;
    border-bottom-color: transparent;
/*    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 影を追加 */
/*    z-index: 900; */
}

#myTabs .nav-item {
    display: flex; /* Flexboxを有効化 */
    justify-content: center; /* 横方向の中央揃え */
    align-items: center; /* 縦方向の中央揃え */
    text-align: center; /* テキストの中央揃え */
    flex: 1 0 25%; /* 各タブがコンテナの25%の幅を取るように設定 */
    border-left: 1px solid #fff; /* 左側のボーダー */
    border-right: 1px solid #fff; /* 右側のボーダー */
    
   /* background-color: #fff000; */
    background: linear-gradient(45deg, black, #808080); 
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
}

.nav-link {
    color: #ffffff; 
    border-color: #000000;
    display: flex; /* Flexboxを有効化 */
    justify-content: center; /* 横方向の中央揃え */
    align-items: center; /* 縦方向の中央揃え */
    width: 100%; /* リンクがタブの幅全体を占めるように設定 */
    flex-direction: column; /* 子要素を縦方向に並べる */
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    border-bottom: none;
    border-bottom-color: transparent;
    /* その他のスタイル */
}

.nav-link.active {
    color: #ffffff; 
    border-color: #ffffff;
    display: flex; /* Flexboxを有効化 */
    justify-content: center; /* 横方向の中央揃え */
    align-items: center; /* 縦方向の中央揃え */
    width: 100%; /* リンクがタブの幅全体を占めるように設定 */
    flex-direction: column; /* 子要素を縦方向に並べる */
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    border-bottom: none;
    border-bottom-color: transparent;
    /* その他のスタイル */
}




.nav-link .material-icons {
    margin-right: 8px; /* アイコンとテキストの間に余白を設定 */
    color: #ffffff;
}

.material-icons {
        color: #0000cc; /* ここで指定した色が全てのアイコンに適用されます */
        }

.nav-link.active .material-icons {
    color: #0000cc; /* アクティブ状態での色 */
}



#myTabs .nav-item:hover {
    transform: translateY(-2px); /* ホバー時にタブを少し上に動かす */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* ホバー時に影を濃くする */
}