.tab-container {
    width: 100%;
    max-width: 500px;
    margin: auto;
}

.tab-buttons {
    display: flex;
    border-bottom: 1px solid #aaa; /* タブの下の線 */
    background-color: white;
    position: relative;
}

.tab-button {
    background-color: #ddd;
    border: 1px solid #aaa;
    padding: 10px 20px;
    cursor: pointer;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom: none; /* タブの下線を削除 */
    position: relative;
    top: 1px; /* 1px 上に浮かせる */
    border-bottom: 2px solid gray; /* 非アクティブなタブはグレーの線 */
}

.tab-button.active {
    background-color: white;
    border-bottom: 1px solid white; /* アクティブなタブの下線を白にして見えなくする */
    position: relative;
    top: 1px; /* アクティブなタブを少し上にして、コンテンツとピッタリ合わせる */
    z-index: 2;
    border-bottom: 2px solid white; /* アクティブなタブは白線で繋げる */
}

.no-tab {
    border-bottom: 1px solid #aaa; /* アクティブなタブの下線を白にして見えなくする */
    flex-grow: 1; /* 残りのスペースをすべて使う */
    max-width: 500px; /* 500px 以内に収める */
}

.tab-content {
    display: none;
    padding: 20px;
    background-color: white;
    border: 1px solid #aaa;
    border-top: none; /* コンテンツの上の線を削除 */
    position: relative;
    z-index: 1;
    margin-top: -1px; /* コンテンツの位置を上げて、タブと完全に繋げる */
    border-top: 2px solid gray; /* コンテンツの上に線を引く */
}

.tab-content.active {
    display: block;
    border-top: 2px solid white; /* アクティブなタブの部分は白線で消す */
}

.tab-button {
    border-bottom: 2px solid gray; /* 非アクティブなタブはグレーの線 */
}

.tab-button.active {
    border-bottom: 2px solid white; /* アクティブなタブは白線で繋げる */
}

.tab-content {
    border-top: none; /* タブ部分と繋がるように */
}

.tab-content.active {
    border-top: 2px solid white; /* アクティブなタブの部分は白線で消す */
}