/*共通----------------------------------------------------------------------------------------------------*/

.anniv_mousugu1 {
    font-size: 0.9em;
    display: flex;
    width: 100%;
    padding: 0.3em 0.5em; /*内側の余白*/
    margin: 0.5em 0; /*外側の余白*/
    border-radius: 5px;
    align-items: center;
    background: var(--colorwhite);
}

.mousugu_label {
    color: var(--colorwhite); /*文字色*/
    width: 100px;
    font-size: 0.9em; /*文字サイズ小さめ*/
    padding: 0.1em; /*文字周りの余白*/
    margin: 0.1em 0.6em 0.1em 0; /*外側の余白*/
    border-radius: 0.3em;
}
    .anniversary .mousugu_label {
        background: var(--tagmaincolor2);
    }
    .birthday .mousugu_label {
        background: var(--tagmaincolor1);
    }

.mousugu_text {
    width: calc(100% - 100px);
    padding: 0.1em 0.3em; /*内側の余白*/
    margin: 0.1em; /*外側の余白*/
    border-radius: 5px;
}

.mousugu_text1 {
    display: block;
    width: 100%;
    border-bottom: dotted 1.5px var(--maincolor1);
}

.mousugu_usumoji {
    color: var(--fontcolor2);
}

.mousugu_memo {
    font-size: 0.8em;
    margin-left: 0.5em; /*外側の余白*/
    opacity: 0.6;
}

.anniv_memo {
    width: 90%;
    padding: 0.8em 1.5em; /*内側の余白*/
    margin: 1.5em auto 0 auto; /*外側の余白*/
    border-radius: 15px;
    align-items: center;
    background: var(--colorwhite);
}

/*作品ジャンルタグ*/
.anniv_grouptag {
    display: inline-block;
    background: var(--tagsubcolor4); /*背景色*/
    padding: 0 0.5em; /*文字周りの余白*/
    margin: 0.1em; /*外側の余白*/
    border-radius: 0.3em;/*角の丸み*/
    color: var(--fontcolor2); /*文字色*/
    font-size: 0.75em; /*文字サイズ小さめ*/
}
    .icns .anniv_grouptag {background: var(--tagsubcolor6);}
    .ynbt .anniv_grouptag {background: var(--tagsubcolor2);}

/*もうすぐのみ--------------------------------------------------------------------------------------------*/
.anniv_mousugu {
    background: var(--tagsubcolor5);
    border-radius:10px; /*角丸く*/
    padding: 2em 1em;
}

.anniv_mousugu h2 {
    margin: 0;
    padding: 0;
    text-align: left;
    font-size: 1.1em;
}
/*表--------------------------------------------------------------------------------------*/
.tab-button {
    cursor: pointer;
    display: inline-block;
    width: 80px;
    margin: 1px 0 1px 0; /*外側*/
    padding: 0.8em 0.5em;
    border: 2px solid var(--subcolor1);
    border-radius: 5px;
    background: var(--colorwhite);
    color: var(--fontcolorlink1);
    text-align: center;
    line-height: 1;
    transition: .2s;
}
    /* hover が active 状態には適用されないようにする */
    .tab-button:hover:not(.active) {
        background-color: var(--colortransparent3);
    }
    .tab-button.active {
        background-color: var(--fontcolorlink1);
        color: var(--colorwhite);
    }

.tag-filter {
    padding: 10px;
    display: inline-block;
    margin: 5px;
}
.hidden {
    display: none;
}
.tab-content {
    display: inline-block;
    vertical-align: top;
    width: 100%;
}

/* チェックボックスを非表示にする */
.tag-filter input[type="checkbox"] {
    display: none;
}

/* チェックボックスがチェックされた時のラベルのスタイル */
.tag-filter input[type="checkbox"]:checked + label {
    background: var(--fontcolorbold);  /* チェックされた状態の背景色 */
    color: var(--colorwhite);          /* チェックされた状態の文字色 */
    border-color: var(--fontcolorbold); /* チェックされた状態のボーダー色 */
}

/* ラベルのホバー状態 */
.tag-filter label:hover {
    background-color: var(--colortransparent3); /* ホバー時の背景色 */
}

.tag-filter label {
    font-size: 0.8em;
    cursor: pointer;
    display: inline-block;
    margin: 0.3em 0; /* 外側 */
    padding: 0.7em 0.5em;
    border: 1px solid var(--fontcolorbold);
    border-radius: 5px;
    background: var(--colorwhite);
    color: var(--fontcolorbold);
    text-align: center;
    line-height: 1;
    transition: 0.2s;
}

/* hover 状態で背景色が変わる（active クラスを持っていない場合） */
.tag-filter label:hover:not(.active) {
    background-color: var(--tagsubcolor4);
}

/* チェックボックスがチェックされているとき、active クラスが追加される */
.tag-filter input[type="checkbox"]:checked + label {
    background-color: var(--fontcolorbold);
    color: var(--colorwhite);
    border-color: var(--fontcolorbold);
}

/*スクロールできるようにする*/
.anniv_more {
    max-height: 400px; /* 最大高さを指定 */
    overflow-y: auto;  /* 縦方向にスクロール可能 */
}