@charset "UTF-8";


/*--------------------------------
	　企画一覧content.html
--------------------------------*/

/* タグリスト---------------------------- */

.tag-list_wrap {
    display: flex;
    align-items: stretch;
}

/* タイトル---------------------------- */

.content-ttl {
    width: 46%;
    height: 11vw;
    position: relative;
    display: flex;
    margin-left: 4%;
}

.content-ttl_img {
    height: 100%;
    width: calc(100%/4);
}

.content-ttl_img img {
    height: 100%;
    width: 100%;
    object-fit: contain;
}

.content-ttl_text {
    font-size: clamp(11px, 3.6vw, 25px);
    font-weight: 600;
    position: absolute;
    bottom: 2%;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    text-align: center;
    text-shadow:
        2px 2px 0px var(--bg-color),
        -2px 2px 0px var(--bg-color),
        2px -2px 0px var(--bg-color),
        -2px -2px 0px var(--bg-color),
        2px 0px 0px var(--bg-color),
        0px 2px 0px var(--bg-color),
        -2px 0px 0px var(--bg-color),
        0px -2px 0px var(--bg-color);
}

/* タグ絞り込みリスト--------------------- */

.sort-list {
    display: flex;
    width: 50%;
    flex-wrap: wrap;
    right: 0;
    z-index: 1;
    padding: 1em 1em .5em;
    color: var(--text-color);
    font-size: .8rem;
    height: auto;
    background: var(--content-bg);
    border-radius: 0.5em;
    align-content: center;
}

.sort-tag {
    display: block;
    margin: 0 0.3em .5em;
    padding: .3em;
    border-radius: 0.3em;
    font-weight: 600;
    background-color: var(--bg-color-sub);
    color: var(--text-color-sub);
    width: calc(calc(100% - calc(0.6em* 4))/4);
    transform: rotate(0.03deg);
}

#tag_all:checked~.common-content [for="tag_all"],
#tag_online-real:checked~.common-content [for="tag_online-real"],
#tag_real:checked~.common-content [for="tag_real"],
#tag_online:checked~.common-content [for="tag_online"],
#tag_real-part:checked~.common-content [for="tag_real-part"],
#tag_dojin:checked~.common-content [for="tag_dojin"],
#tag_book:checked~.common-content [for="tag_book"],
#tag_event:checked~.common-content [for="tag_event"],
#tag_fair:checked~.common-content [for="tag_fair"],
#tag_dojinevent:checked~.common-content [for="tag_dojinevent"],
#tag_limited-goods:checked~.common-content [for="tag_limited-goods"],
#tag_new-book:checked~.common-content [for="tag_new-book"],
#tag_melon:checked~.common-content [for="tag_melon"],
#tag_fromagee:checked~.common-content [for="tag_fromagee"],
#tag_melon-froma:checked~.common-content [for="tag_melon-froma"],
#tag_allage:checked~.common-content [for="tag_allage"],
#tag_adult:checked~.common-content [for="tag_adult"],
#tag_allage-adultage:checked~.common-content [for="tag_allage-adultage"],
#tag_end:checked~.common-content [for="tag_end"] {
    background-color: #efcd78;
    color: #3d0000;
}


/* 企画一覧--------------------- */

.content-list {
    display: flex;
    flex-wrap: wrap;
    margin-top: 5%;
    background: var(--content-bg);
    backdrop-filter: blur(5px);
    padding: 5% 4%;
}

.content-item_img {
    position: relative;
}

.content-item_ttl {
    display: -webkit-box;
    margin: .5em 0;
    overflow: hidden;
    font-weight: bold;
    font-size: 1.5em;
    line-height: 1.3;
    letter-spacing: .05em;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.content-item_date {
    font-size: max(1vw, 0.8em);
    font-weight: 600;
    width: fit-content;
    padding: 0.3em 0;
    margin: 0 0 0 auto;
}

.content-item_desc {
    font-size: 1em;
    line-height: 1.5;
}

.content-item .tag_wrap {
    font-size: 0.8em;
    justify-content: flex-end;
    padding: 0.5em 0 0;
}


.tag:where(.allage-adultage,.allage,.adult){
    border: none;
}

.tag.allage-adultage{
    background: orange;
    color: #fff;
}

.tag.allage-adultage::before{
    content: "一般&成年";
}

.tag.allage{
    background: var(--bg-color-sub);
    color:  var(--text-color-sub);
}

.tag.allage::before{
    content: "一般";
}

.tag.adult{
    background: red;
    color: #fff;
}

.tag.adult::before{
    content: "成年";
}


@media screen and (min-width:426px) {
    .content-item {
        width: calc(calc(100% - calc(4% * 3))/3);
        margin:0 2% 5% 2%;
    }
}

@media screen and (max-width:768px) {
    .tag-list_wrap {
        flex-direction: column-reverse;
    }

    .sort-list {
        width: 100%;
    }

    h1.content-ttl {
        width: 100%;
        margin: 0 0 4%;
        height: 23vw;
    }

    .content-item {
        width: calc(calc(100% - calc(4% * 2))/2);  
        margin:0 2% 5% 2%;   
    }

}

@media screen and (max-width:425px) {
    .content-item {
        width: 96%;
        margin-bottom: 5%;
    }



    .sort-tag {
        width: calc(calc(100% - calc(0.6em* 2))/2);
    }


}

/*--------------------------------
	　サイドメニュー
--------------------------------*/

.side-nav {
    bottom: 10px;
    top: auto;
}

@media screen and (max-width: 425px) {
    .side-nav {
        bottom: 0;
        justify-content: flex-end;
        width: 95%;
    }
}

/*--------------------------------
	　ソート機能
--------------------------------*/
#tag_online-real:checked~.content-list .sort-target:not([data-category~="通販&店舗"]),
#tag_real:checked~.content-list .sort-target:not([data-category~="店舗限定"]),
#tag_online:checked~.content-list .sort-target:not([data-category~="通販限定"]),
#tag_real-part:checked~.content-list .sort-target:not([data-category~="一部店舗限定"]),
#tag_dojin:checked~.content-list .sort-target:not([data-category~="同人"]),
#tag_book:checked~.content-list .sort-target:not([data-category~="商業"]),
#tag_event:checked~.content-list .sort-target:not([data-category~="イベント"]),
#tag_fair:checked~.content-list .sort-target:not([data-category~="フェア"]),
#tag_dojinevent:checked~.content-list .sort-target:not([data-category~="同人イベント"]),
#tag_limited-goods:checked~.content-list .sort-target:not([data-category~="限定グッズ"]),
#tag_new-book:checked~.content-list .sort-target:not([data-category~="新刊"]),
#tag_melon:checked~.content-list .sort-target:not([data-category~="男性向け"]),
#tag_fromagee:checked~.content-list .sort-target:not([data-category~="女性向け"]),
#tag_melon-froma:checked~.content-list .sort-target:not([data-category~="共通"]),
#tag_allage:checked~.content-list .sort-target:not([data-category~="一般"]),
#tag_adult:checked~.content-list .sort-target:not([data-category~="成年"]),
#tag_allage-adultage:checked~.content-list .sort-target:not([data-category~="一般&成年"]),
#tag_end:checked~.content-list .sort-target:not([data-category~="開催終了"]) {
    display: none;
}


.sort-target[data-category~="開催終了"] {
    visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
}

#tag_end:checked~.content-list .sort-target[data-category~="開催終了"] {
    visibility: inherit;
    position: relative;
}