@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Libre+Barcode+39+Extended+Text&display=swap');
@import url('./js/colpick.css');

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

/** Thumb Frame */



.ticket-frame {display:block; position:relative; width:100%; z-index:0;}
.ticket-frame .pad {position:relative; z-index:-1;}
.ticket-frame .ticket-link {display:block; position:absolute; top:0; left:0; right:0; bottom:0; z-index:0;}
.ticket-frame .ticket-inner,
.ticket-frame .ticket-inner > * {display:block; position:absolute; top:0; left:0; right:0; bottom:0;}
.ticket-frame .ticket-inner img {display:block; position:absolute; object-fit:cover; top:0; left:50%; max-width:inherit; height:100%; transform:translateX(-50%); -webkit-transform:translateX(-50%); filter:drop-shadow(0 0 20px rgba(0,0,0,0.1)); mask:url(./img/ticket.svg); mask-size:contain; mask-clip:border-box; mask-repeat: no-repeat; mask-position:50% 50%; -webkit-mask:url(./img/ticket.svg); -webkit-mask-size:contain; -webkit-mask-clip:border-box; -webkit-mask-repeat:no-repeat; -webkit-mask-position:50% 50%;}
.ticket-frame .ticket-inner svg {display:block; position:absolute; top:0; left:0; width:100%; height:100%; z-index:-1;}
.ticket-frame .ticket-inner {transition:.4s; transform-style:preserve-3d; -webkit-transition:.4s; -webkit-transform-style:preserve-3d;}
.ticket-frame .ticket-inner > * {width:100%; height:100%; overflow:hidden; backface-visibility:hidden;}

.ticket-frame .ticket-inner {perspective:1100px;}
.ticket-frame .ticket-link .ticket-visual {transform:rotateY(180deg); -webkit-transform:rotateY(180deg);}
.ticket-frame:not(.fix) .ticket-link:hover .ticket-inner {transform:rotateY(180deg); -webkit-transform:rotateY(180deg);}

.ticket-frame .ticket-detail .txt {display:block; position:relative; height:100%; padding:25px 15px 80px; box-sizing:border-box;}
.ticket-frame .ticket-detail .txt hr {display:block; position:relative; margin:0; height:1px; clear:both; border:none;}
.ticket-frame .ticket-detail .txt .top {font-size:11px; font-weight:100; overflow:hidden; opacity:.7;}
.ticket-frame .ticket-detail .txt .top > * {display:block; float:left;}
.ticket-frame .ticket-detail .txt .top > * + * {float:right;}
.ticket-frame .ticket-detail .txt .top > * + *:before {content:"no.";}
.ticket-frame .ticket-detail .txt .line-box {display:block; position:absolute; top:50px; left:15px; right:15px; bottom:75px; border:1px solid transparent; overflow:hidden;}
.ticket-frame .ticket-detail .txt .tit {display:block; position:relative; overflow:hidden; padding:20px 10px 10px;}
.ticket-frame .ticket-detail .txt .tit:before {content:"Title."; display:block; font-size:12px; position:absolute; top:10px; left:10px; opacity:.7;}
.ticket-frame .ticket-detail .txt .tit div {display:table; width:100%; box-sizing:border-box;}
.ticket-frame .ticket-detail .txt .tit div > p {display:table-cell; text-align:center; vertical-align:middle; height:5.6em; padding:.5em 0; font-size:1.4em;}
.ticket-frame .ticket-detail .txt .tit div strong {max-height:4.5em; overflow:hidden; line-height:1.4em; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;}
.ticket-frame .ticket-detail .txt .info {display:block; position:relative; padding:10px;}
.ticket-frame .ticket-detail .txt .info p {display:table; width:100%; table-layout:fixed; position:relative;}
.ticket-frame .ticket-detail .txt .info p > * {display:table-cell; vertical-align:top; padding:.4em 0; text-align:left; font-weight:100; font-size:12px; line-height:1.4em;}
.ticket-frame .ticket-detail .txt .info p strong {width:4.5em;}
.ticket-frame .ticket-detail .txt .review {display:block; position:relative; padding:10px; max-height:4.5em; text-align:left; font-weight:100; font-size:12px; overflow:hidden; line-height:1.4em; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;}
.ticket-frame .ticket-detail .txt .barcode {display:block; position:absolute; left:0; right:0; bottom:30px; text-align:center; font-family:'Libre Barcode 39 Extended Text', cursive; font-size:40px; font-weight:100;}

.colpick_full,
.colpick_full * {transition:none; -webkit-transition:none;}

@media all and (max-width:520px) {
	.ticket-frame .ticket-detail .txt .tit {padding:10px; height:100%; box-sizing:border-box;}
	.ticket-frame .ticket-detail .txt .tit div {height:100%;}
	.ticket-frame .ticket-detail .txt .tit div > p {height:auto; font-size:1.1em;}
	.ticket-frame .ticket-detail .txt .tit ~ * {display:none;}
}

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

.log-board-wrap {position:relative; margin:0 auto; text-align:center;}
.trpg-card-list {display:block; position:relative; text-align:center; padding:20px 0; overflow:hidden;}
.trpg-card-list li {display:inline-block; position:relative; max-width:50%; padding:10px 5px; box-sizing:border-box;}



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

#bo_v .title {font-weight:800; text-align:center; padding:0 0 1em; font-size:25px;}
#bo_v .review {margin:10px 0; }
#bo_v .log {padding:15px; background:#f1f1f1; margin-top:10px; border-radius:1em; color:#333;}

.title-box {display:table; position:relative; width:100%; table-layout:fixed;}
.title-box > * {display:table-cell; vertical-align:middle;}
.title-box .thumb-box {width:380px;}
.title-box .thumb {display:block; position:relative;}
.title-box .thumb:before {content:""; display:block; position:relative; padding-top:60%;}
.title-box .thumb > * {display:block; position:absolute; top:0; left:0; right:0; bottom:0; overflow:hidden; border-radius:1em; background:no-repeat 50% 50%; background-size:cover;
	-webkit-box-shadow:0 0 20px 0 rgba(0,0,0,0.1);
	-moz-box-shadow:0 0 20px 0 rgba(0,0,0,0.1);
	box-shadow:0 0 20px 0 rgba(0,0,0,0.1);
}

.title-box .con {padding-left:2em; vertical-align:top;}
.title-box .title-info dl + dl {margin-top:5px;}
.title-box .title-info dl {display:table; width:100%; table-layout:fixed;}
.title-box .title-info dl > * {display:table-cell; vertical-align:top; padding:.2em;}
.title-box .title-info dl dt {width:5em;}

@media all and (max-width:790px) {
	#bo_v .title {font-size:20px;}
	.title-box,
	.title-box > * {display:block;}
	.title-box .thumb-box {width:640px; max-width:100%; margin:0 auto 3em;}
	.title-box .con {padding-left:0;}
}


@media print {
	#h_header, .copyright, .btn_confirm {display: none !important; }
}