/* タブコンテナ全体のスタイル */
.tab-container {
    width: 100%;
    max-width: 700px;
    margin: 30px auto 150px;
    font-family: sans-serif;
}

/* タブナビゲーションのスタイル */
.tab-nav {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
    justify-content: flex-end;
    gap: 12px;
}

/* 各タブアイテムのスタイル */
.tab-item {
    padding: 10px 20px;
    cursor: pointer;
    background-color: #FFF;
    border: 3px solid #2E7BB9;
    border-radius: 5px;
    position: relative;
    transition: background-color 0.3s;
}

.tab-item:hover {
    background-color: #e2e2e2;
}

/* アクティブなタブのスタイル */
.tab-item.active {
    background-color: #FFE32B;
}


/* タブコンテンツのコンテナ */
.tab-content-container {
    /* border-width: 3px; */
    border-style: solid;
    border-image: linear-gradient(135deg, #9dfbd3, #45d4fb) 3;
    padding: 20px;
    background-color: #FFF;
}

/* 各タブコンテンツのスタイル */
.tab-content {
    display: none;
    /* デフォルトでは非表示 */
}

/* アクティブなコンテンツのスタイル */
.tab-content.active {
    display: block;
    /* アクティブなものだけ表示 */
}

/* --- 768px以下：タブレット・スマートフォン --- */
@media (max-width: 768px) {
    .tab-container {
        margin: 30px auto 65px;
    }

    .tab-content-container {
        padding: 0px;
    }
}

/* レスポンシブ対応: 画面幅が480px以下の場合 */
@media screen and (max-width: 480px) {
    .tab-item {
        /* タブの横幅を100%にして、縦に並べる */
        flex-grow: 1;
        text-align: center;
    }
}