@charset "utf-8";

.btn_confirm {padding:3em 0; text-align:center;}




/***********************************************
	List
***********************************************/

.log-board-wrap {display:block; position:relative;}
.log-board-wrap .empty-list {text-align:center; padding:100px 0; opacity:.5; border:1px solid var(--point_color); border-left-width:0; border-right-width:0;}

.campaign-list-slider {display:block; position:relative;}
.campaign-list-slider + .campaign-list-slider {margin-top:50px;}
.campaign-list-slider .category-title {display:block; position:relative; font-size:20px; margin:10px 0 30px; border-radius:var(--radius);font-weight:bold; color:var(--theme-box-border); text-align:center;font-family: var(--fontS);}
.campaign-list-slider .swiper-button-prev,
.campaign-list-slider .swiper-button-next {display:block; position:absolute; top:0; bottom:0; width:100px; height:100%; text-indent:-999px; overflow:hidden; margin:0; opacity:0;}
.campaign-list-slider .swiper-button-prev {left:0; background:linear-gradient(90deg, var(--shadow_color) 0%, var(--shadow_color2)) 100%;}
.campaign-list-slider .swiper-button-next {right:0; background:linear-gradient(-90deg, var(--shadow_color) 0%, var(--shadow_color2)) 100%;}
.campaign-list-slider .swiper-button-prev.swiper-button-disabled,
.campaign-list-slider .swiper-button-next.swiper-button-disabled {opacity:0;}
.campaign-list-slider .slider {display:block;  position:relative;}
.campaign-list-slider .slider .swiper-slide {width:auto; width:100%; position:relative;     aspect-ratio: 3 / 2;
 transition-property: transform, z-index;
   transition-duration: .5s, 0s;
}
.campaign-list-slider .slider .swiper-wrapper{display: grid;
    gap: 10px;
    grid-template-columns: repeat(3, 1fr);}
.campaign-list {overflow:hidden;}
.campaign-list > .list {margin:0 -10px; text-align:center;}
.campaign-list > .list > li {display:inline-block; width:auto; max-width:50%; box-sizing:border-box;}

.campaign-slider-item {max-width:100%; height:100%;}
.campaign-slider-item .frame {display:flex; position:relative; border-radius:var(--radius); overflow:hidden; width: inherit;
    height: inherit; flex-direction: column;  transition-duration:.5s;}
.campaign-slider-item .frame .pad {display:block; position:relative; width: inherit;
    height: 100%;
transition:0.5s;}

li.swiper-slide:hover{
transform: scale(1.2);
z-index:2;
}


.campaign-slider-item:hover > .frame .pad{
height:60%;
}
.campaign-slider-item:hover > .frame .pad em{
transform:scale(1.5);
	animation: post-ani 15s linear 1;
}

@keyframes post-ani {
    0% {
        transform:scale(1.5) translateX(40px);
    }
    100% {
        transform:scale(1.5) translateX(0px);
    }
}

.campaign-slider-item .frame .pad em{
    width: 100%;
    height: 100%;
    display: block;
    background-position: center;
    background-size: cover;
}
.campaign-slider-item .frame .pic{
height:0px;
transition:0.5s;
background-color:var(--base);
z-index:1;
}
.campaign-slider-item:hover > .frame .pic{
height:40%;
border-top:1px solid var(--theme-box-border);}
.campaign-slider-item .frame .pic,
.campaign-slider-item .frame .pic > * {display:block;}
.campaign-slider-item .frame .pic > em {background:no-repeat 50% 50%; background-size:cover;}
.campaign-slider-item .frame .has-img + .cover {top:70%; background:linear-gradient(0, var(--shadow_color) 0%, var(--shadow_color2)) 100%;}
.campaign-slider-item .frame .has-img + .cover * {color:var(--font_color);}
.campaign-slider-item .frame:hover .has-img + .cover {top:0;}

.campaign-slider-item .frame .pic .cover .list_tag{
margin: 6px 8px;
    display: flex;
    gap: 4px;
}
.campaign-slider-item .frame .pic .cover .list_tag .list_tags{
color:var(--text);
opacity:.6;
}

.campaign-slider-item .frame .pic .cover .list_tag .list_tags::after{
content:"·";
}

.campaign-slider-item .frame .pic .cover .list_tag .list_tags:last-child::after{
display:none;
}

.campaign-slider-item .frame .pic .cover .list_script{
margin: 0px 10px 10px 10px;
color:var(--text);
}
.campaign-slider-item .frame .pic .cover .cover_item_icon{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
margin:0px 10px 4px 10px;
width:calc(100% - 20px);}
.campaign-slider-item .frame .pic .cover .cover_item_icon div{
gap: 2px;
    display: flex;
    margin-top: 6px;
}
.campaign-slider-item .frame .pic .cover .cover_item_icon div i{
border: 1px solid var(--point);
    padding: 10px 11px;
    border-radius: 50%;
background-color:var(--base);
backdrop-filter:blur(4px);
}
.campaign-slider-item .frame .pic .cover > * > * {}

.campaign-slider-item .frame {border:1px solid var(--theme-box-border); background:var(--bg_color);}
.campaign-slider-item .frame .subject {display: block;
    padding: .8em .5em;
    font-size: 2em;
    word-break: break-all;
    position: absolute;
    left: 0px;
    bottom: 0px;
color:var(--base);
text-shadow:0px 0px 6px var(--shadow);
}



@media all and (max-width:1024px) {
	.campaign-list-slider .category-title {font-size:20px; margin:15px 0;}
	.campaign-slider-item .frame .subject {font-size:15px;}
}
@media all and (max-width:640px) {
	.campaign-list-slider .category-title {font-size:18px;}
	.campaign-slider-item .frame .subject {font-size:14px;}
.campaign-list-slider .slider .swiper-wrapper{
grid-template-columns: repeat(2, 1fr);
}
li.swiper-slide:hover{
transform: scale(1);
z-index:2;
}

}
@media all and (max-width:420px) {
.campaign-list-slider .slider .swiper-wrapper{
grid-template-columns: repeat(1, 1fr);
}
li.swiper-slide:hover{
transform: scale(1);
z-index:2;
}
}


/***********************************************
	Viewer
***********************************************/

.campaignViewer {display:block; position:relative; overflow:hidden; min-height:80vh; line-height:1.8; border-radius:var(--radius); overflow:hidden; background:var(--bg_color); z-index:0;     border: 1px solid var(--theme-box-border);
}
.campaignViewer .visual-box {display:block; position:relative; padding-top:70px; padding-bottom:40px;}
.campaignViewer.campaign .visual-box {display:block; position:relative; padding-top:250px; padding-bottom:40px;}
.campaignViewer .visual-box.no-visual {padding-top:100px;}
.campaignViewer .visual-box .bak {position:absolute; top:0; left:0; right:0; bottom:0; background:linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0)) 100%; z-index:-1;}
.campaignViewer .visual-box .bak img {display:block; position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);filter: brightness(0.7);}
.campaignViewer .camp-default-info {display:block; position:relative; padding:0px 40px; word-break:keep-all;}
.campaignViewer .camp-default-info .subj {display:block; position:relative; font-size:40px; font-weight:800; line-height:1.2; 
color:var(--base); text-shadow:0px 0px 4px var(--shadow);     font-family: var(--fontS);
}
.campaignViewer .camp-default-info .script-text{
color:var(--base);
text-shadow:0px 0px 4px var(--shadow);
}
.campaignViewer .camp-default-info .sub-text {display:block; position:relative; font-size:1.2em; margin-bottom:10px;color:var(--base); opacity:.7;}
.campaignViewer .camp-default-info .sub-text .campaign_tag:after{content:"·";}
.campaignViewer .camp-default-info .sub-text .campaign_tag:last-child::after{display:none;}
.campaignViewer .camp-default-info .txt {color:var(--base);text-shadow:0px 0px 4px var(--shadow);font-size:1.1em;}
.campaignViewer .action-box {padding: 5px 15px;
    position: absolute;
    top: 0px;
    right: 0px;
    font-size: 20px; z-index:2;      display:flex; gap: 8px;
    text-shadow: 0px 0px 4px var(--shadow);}
.campaignViewer .action-box a{color:var(--base);}
.campaignViewer .tab-log-content {display:block; position:relative; padding:0 40px 50px;}

@media all and (max-width:820px) {
	.campaignViewer {margin:-80px -20px 0; border-radius:0;}
	.campaignViewer .visual-box {padding-top:200px; padding-bottom:20px;}
	.campaignViewer .camp-default-info {padding:20px;}
	.campaignViewer .tab-log-content {padding:0 20px 50px;}
.campaignViewer .action-box{top:50px;}
}
@media all and (max-width:640px) {
	.campaignViewer .camp-default-info .subj {font-size:30px;}
	.campaignViewer .camp-default-info .sub-text {font-size:15px;}
	.campaignViewer .camp-default-info .txt {font-size:1em;}
}
@media all and (max-width:520px) {
	.campaignViewer {margin:-80px -10px 0;}
	.campaignViewer .camp-default-info {padding:10px;}
	.campaignViewer .tab-log-content {padding:0 10px 30px;}
}

.campaignViewer .tab-log-content .tabs {display:block; position:relative; overflow:hidden; z-index:0; margin-bottom:20px;}
.campaignViewer .tab-log-content .tabs:after {content:""; display:block; position:absolute; left:0; right:0; bottom:0; height:1px; z-index:-1; background:var(--default_color); opacity:.2;}
.campaignViewer .tab-log-content .tabs li {display:block; position:relative; float:left;}
.campaignViewer .tab-log-content .tabs a {display:block; position:relative; font-size:16px; padding:.8em 1em; opacity:.6;}
.campaignViewer .tab-log-content .tabs a:after {content:""; display:block; position:absolute; left:0; right:0; bottom:0; height:0px; background:var(--point_color);}
.campaignViewer .tab-log-content .tabs li + li {margin-left:1.5em;}
.campaignViewer .tab-log-content .tab-content .tab-con {display:none; min-height:300px;}
.campaignViewer .tab-log-content[data-tabs="E"] .tabs a[data-tabs="E"],
.campaignViewer .tab-log-content[data-tabs="C"] .tabs a[data-tabs="C"],
.campaignViewer .tab-log-content[data-tabs="R"] .tabs a[data-tabs="R"] {opacity:1;}
.campaignViewer .tab-log-content[data-tabs="E"] .tabs a[data-tabs="E"]:after,
.campaignViewer .tab-log-content[data-tabs="C"] .tabs a[data-tabs="C"]:after,
.campaignViewer .tab-log-content[data-tabs="R"] .tabs a[data-tabs="R"]:after {height:3px;}
.campaignViewer .tab-log-content[data-tabs="E"] .tab-content .tab-con[data-tabs="E"],
.campaignViewer .tab-log-content[data-tabs="C"] .tab-content .tab-con[data-tabs="C"],
.campaignViewer .tab-log-content[data-tabs="R"] .tab-content .tab-con[data-tabs="R"] {display:block;}

@media all and (max-width:640px) {
	.campaignViewer .tab-log-content .tabs a {font-size:15px;}
}
@media all and (max-width:520px) {
	.campaignViewer .tab-log-content .tabs a {font-size:14px;}
}

.campaignViewer .tab-con .no-data {display:block; position:relative;}
.campaignViewer .tab-con .no-data:after {content:""; display:block; position:absolute; left:0; right:0; bottom:0; height:1px; z-index:-1; background:var(--default_color); opacity:.2;}
.campaignViewer .tab-con .no-data > * {display:block; padding:5em 0 6em; text-align:center; opacity:.6; font-size:14px;}

.campaignViewer .comment-data-box .modify {display:none; border-left:3px solid var(--default_color); padding-left:10px;}
.campaignViewer .comment-data-box.mod .modify {display:block;}

.addEpisodeWrap,
.addCharacterWrap,
.addReviewWrap {display:none !important;}
.addEpisodeWrap.open,
.addCharacterWrap.open,
.addReviewWrap.open {display:block !important;}

.campaign-write-form {display:block; position:relative; padding:20px 0; margin-top:20px; z-index:0;}
.campaign-write-form dl {display:table; width:100%; table-layout:fixed; margin:0;}
.campaign-write-form dl > * {display:table-cell; vertical-align:middle; padding:5px 10px;}
.campaign-write-form dl dt {width:65px;}
.campaign-write-form .control {text-align:center; padding-top:20px;}
.campaign-write-form .control .ui-btn {min-width:200px;}
.campaignViewer .log{color:var(--text);}
.campaignViewer .roll20-log .log {padding:0px; margin-top:10px; border-radius:1em;}
.campaignViewer .roll20-log .log #textchat {color:var(--font_color);}
.campaignViewer .roll20-log .textchatcontainer .message .spacer {background:var(--default_color); opacity:.05;}


/**********************************************
	Episode
**********************************************/

.item-episode {display:block; position:relative; padding:20px 0;}
.item-episode + .item-episode:before {content:""; display:block; position:absolute; left:0; right:0; top:0; height:1px; z-index:-1; background:var(--default_color); opacity:.2;}
.episode-list {display:table; width:100%; table-layout:fixed;}
.episode-list > * {display:table-cell; position:relative; vertical-align:middle;}
.episode-list .thumb {width:220px;}
.episode-list .thumb a {display:block; position:relative; border-radius:var(--radius); overflow:hidden; padding-top:60%;}
.episode-list .thumb a img {display:block; position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover;}
.episode-list .desc .subj {display:block; position:relative; font-size:16px; font-weight:800; margin-bottom:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.episode-list .desc .txt {display:block; opacity:.6; line-height:1.4em;}
.episode-list .desc .date {display:inline-block; vertical-align:middle; margin-top:.5em;}
.episode-list .control {display:inline-block; vertical-align:middle; margin-top:.5em; margin-left:.5em;}
.episode-list .control a {line-height:20px !important; height:20px !important; font-size:11px !important;}
.episode-list .control a + a {margin-left:5px;}

.episode-list .thumb ~ .desc {padding-left:20px;}
.episode-list .thumb ~ .desc .txt { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:4; white-space:normal;    text-overflow: ellipsis;
    overflow: hidden;}


@media all and (max-width:520px) {
	.episode-list .thumb {width:150px;}
	.episode-list .desc .subj {margin-bottom:10px;}
}


/**********************************************
	Character
**********************************************/

.item-character {display:block; position:relative; padding:20px 0;}
.item-character + .item-character:before {content:""; display:block; position:absolute; left:0; right:0; top:0; height:1px; z-index:-1; background:var(--default_color); opacity:.2;}
.character-list {display:table; width:100%; table-layout:fixed;}
.character-list > * {display:table-cell; position:relative; vertical-align:middle;}
.character-list .thumb {width:80px; vertical-align:top;}
.character-list .thumb > * {display:block; position:relative; border-radius:15px; overflow:hidden; padding-top:100%; border-radius:100%; border:1px solid var(--default_color);}
.character-list .thumb > * img {display:block; position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover;}
.character-list .thumb ~ .desc {padding-left:20px;}
.character-list .desc .subj {display:block; position:relative; font-size:16px; font-weight:800; margin-bottom:5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.character-list .desc .txt {display:block; opacity:.6; line-height:1.4em;}
.character-list .desc .date {display:inline-block; vertical-align:middle; margin-top:.5em;}
.character-list .control {display:inline-block; vertical-align:middle; margin-left:.5em; line-height:1;}
.character-list .control a {line-height:20px !important; height:20px !important; font-size:11px !important;}
.character-list .control a + a {margin-left:5px;}


/**********************************************
	Review
**********************************************/

.item-review {display:block; position:relative; padding:20px 0;}
.item-review + .item-review:before {content:""; display:block; position:absolute; left:0; right:0; top:0; height:1px; z-index:-1; background:var(--default_color); opacity:.2;}
.review-list {display:table; width:100%; table-layout:fixed;}
.review-list > * {display:table-cell; position:relative; vertical-align:middle;}
.review-list .name {width:80px; vertical-align:top;}
.review-list .name ~ .desc {padding-left:20px;}
.review-list .desc .txt {display:block; opacity:.6; line-height:1.4em;}
.review-list .desc .date {display:inline-block; vertical-align:middle; margin-top:.5em;}
.review-list .control {display:inline-block; vertical-align:middle; margin-top:.5em; margin-left:.5em;}
.review-list .control a {line-height:20px !important; height:20px !important; font-size:11px !important;}
.review-list .control a + a {margin-left:5px;}