@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:25px; margin:20px 0;}
.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:hover,
.campaign-list-slider .swiper-button-next:hover {opacity:1;}
.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; max-width:80%;}

.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%; padding:10px;}
.campaign-slider-item .frame {display:block; position:relative; border-radius:20px; overflow:hidden;
	-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
	-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
}
.campaign-slider-item .frame .pad {display:block; position:relative;}
.campaign-slider-item .frame .pic,
.campaign-slider-item .frame .pic > * {display:block; position:absolute; top:0; left:0; right:0; bottom:0;}
.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 > * {display:table; width:100%; height:100%; table-layout:fixed;}
.campaign-slider-item .frame .pic .cover > * > * {display:table-cell; text-align:center; vertical-align:middle;}

.campaign-slider-item .frame {border:1px solid var(--point_color); background:var(--bg_color);}
.campaign-slider-item.img-frame .frame {border-width:0;}
.campaign-slider-item .frame .subject {display:block; padding:1em; font-size:16px; word-break:break-all; text-align:center;}



@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;}
}
@media all and (max-width:420px) {
	.campaign-list > .list > li {max-width:100%;}
}


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

.campaignViewer {display:block; position:relative; overflow:hidden; min-height:80vh; line-height:1.8; border-radius:3em; overflow:hidden; background:var(--bg_color); z-index:0;
	-webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.2);
	-moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.2);
	box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.2);
}
.campaignViewer .visual-box {display:block; position:relative; padding-top:350px; 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%);}
.campaignViewer .camp-default-info {display:block; position:relative; padding:20px 40px; text-shadow: 0px 0px 10px var(--shadow_color); word-break:keep-all;}
.campaignViewer .camp-default-info .subj {display:block; position:relative; font-size:40px; font-weight:800; line-height:1.2; margin-bottom:.3em;}
.campaignViewer .camp-default-info .sub-text {display:block; position:relative; font-size:18px; margin-bottom:10px; opacity:.6;}
.campaignViewer .camp-default-info .txt {font-size:14px;}
.campaignViewer .action-box {padding:15px 0;}
.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;}
}
@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 .roll20-log .log {padding:20px; 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:15px; 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;  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.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 {height:2.8em; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; white-space:normal;}


@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;}