/* まずはテーブルとTDの基本設定 */
table {
    table-layout: auto;
    width: 100%;
}

/* メニューを含む特定のTDのみを対象 */
td .main_menu {
    width: 100%;
    min-width: 775px; /* コンソールで確認したテーブル幅に設定 */
}

.main_menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    width: 100%;
    gap: 0px; /* 少し間隔 */
    align-items: stretch; /* 高さを揃える */
    box-sizing: border-box; /* 追加: パディングとボーダーを幅に含める */
}

.main_menu li {
    flex: 1  ; /* 均等に広がる */
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0; /* コンテンツが長すぎる場合の対策 */
}

/* メニュー項目の基本スタイル */
.main_menu a,
.main_menu .main_menu-label {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 5px 5px;
    background: linear-gradient(135deg, #c0c0c1, #0d0d0d);
    text-decoration: none;
    font-weight: bold;
    border-radius: 2px;
    transition: all 0.3s ease;
    color: #fff;
    text-shadow: 2px 2px 4px black;
    box-sizing: border-box;
    line-height: 1.4;
    white-space: normal;
    height: 100%;
    min-height: 60px; /* 最低高さを設定 */
    flex-grow: 1;
    width: 100%;
    font-size: smaller;
}

/* ホバー効果 */
.main_menu a:hover,
.main_menu .main_menu-label:hover {
    background: linear-gradient(135deg, #1d1d1d, #1a1a1a);
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

/* 個別の色設定 - クラス名を.main_menu-labelに統一 */
.main_menu li.menu-about-us a,
.main_menu li.menu-about-us .main_menu-label {
    /* color: #C5A01E; */
    color: #fcce27;
}

.main_menu li.menu-yakuin a,
.main_menu li.menu-yakuin .main_menu-label {
    /* color: #C3851E; */
    color: #f8a827;

}

.main_menu li.menu-kiyaku a,
.main_menu li.menu-kiyaku .main_menu-label {
    /* color: #CC5E2F; */
    color: #f8733a;
}

.main_menu li.menu-member a,
.main_menu li.menu-member .main_menu-label {
    /* color: #B33982; */
    color: #f54fb3;
}

.main_menu li.menu-news a,
.main_menu li.menu-news .main_menu-label {
    /* color: #526BBD; */
    color: #a3b8fa;
}

.main_menu li.menu-bulletin a,
.main_menu li.menu-bulletin .main_menu-label {
    /* color: #2B7CA1; */
    color: #47c1fa;
}

.main_menu li.menu-info a,
.main_menu li.menu-info .main_menu-label {
    /* color: #39A075; */
    color: #5bfab8;
}

.main_menu li.menu-youtube a,
.main_menu li.menu-youtube .main_menu-label {
    color: #d5e7e9;
}

/* サブメニュー */
.submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #333;
    list-style: none;
    padding: 0;
    margin: 0;
    z-index: 100;
    border-radius: 0 0 5px 5px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

.submenu li {
    display: block;
    width: 100%;
    flex: none;
}

.submenu li a {
    padding: 12px 8px;
    display: block;
    color: #fff;
    text-decoration: none;
    text-align: center;
    background: #333;
    border-radius: 0;
    min-height: auto;
    height: auto;
}

.submenu li a:hover {
    background: linear-gradient(135deg, #1d1d1d, #1a1a1a);
}

/* ホバー時にサブメニュー表示 */
.main_menu li:hover .submenu {
    display: block;
}

/* サブメニューなしの項目も高さを統一 */
.main_menu .no-submenu a {
    height: 100%;
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* メニューラベル */
.main_menu .main_menu-label {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}