/*タブの形状（サイト全体のダーク＋ネオングリーン基調に調整）*/
/*タブの背景を透過に*/
/*タブの余白部分の背景・枠をなくす*/
.tab {
    display: flex;
    flex-wrap: wrap;
    background: none;
    border-radius: 8;
    margin-bottom: 0;
    padding: 0;
}

/*liの余白やリストスタイルもリセット*/
.tab li {
    list-style: none;
}

/*タブボタンも透過 */
/*タブボタンの左右marginも0に*/
.tab li a {
    display: block;
    background: rgba(0, 40, 0, 0.6);
    color: #00ff41;
    margin: 0;
    padding: 10px 20px;
    border-radius: 8px 8px 0 0;
    border: 2px solid #00ff41;
    border-bottom: none;
    text-decoration: none;
    font-weight: bold;
    box-shadow: 0 0 8px rgba(0, 255, 65, 0.2);
    transition: background 0.2s, color 0.2s;
}
/*ホバー時も透過感を維持*/
.tab li a:hover {
    background: rgba(0, 51, 0, 0.7);
    color: #33ff66;
}
/*liにactiveクラスがついた時の形状*/
/*アクティブ時も透過 */
.tab li.active a {
    background: rgba(0, 8, 0, 0.8);
    color: #00ff41;
    border-bottom: 2px solid rgba(0, 8, 0, 0.8);
    box-shadow: 0 0 12px #00ff41;
    z-index: 2;
}

/*エリアの表示非表示と形状（ダーク＋グリーン基調）*/
/*エリアの背景も透過に */
.area {
    display: none; /*はじめは非表示*/
    opacity: 0; /*透過0*/
    background: rgba(0, 40, 0, 0.5);
    color: #00ff41;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 0 15px rgba(0, 255, 65, 0.15);
    border: 2px solid #00ff41;
    /* border-top: none; */
    padding: 40px 24px;
    font-size: 1.1rem;
}

/*areaにis-activeというクラスがついた時の形状*/
.area.is-active {
    display: block; /*表示*/
    animation-name: displayAnime; /*ふわっと表示させるためのアニメーション*/
    animation-duration: 2s;
    animation-fill-mode: forwards;
}

@keyframes displayAnime {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}