@charset "utf-8";

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

/** Thumb Frame */
.trpg-card-frame {display:block; position:relative; width:100%; z-index:0;}
.trpg-card-frame .pad {position:relative; z-index:-1;}
.trpg-card-frame .pic {display:block; position:absolute; top:0; left:0; right:0; bottom:0; overflow:hidden; background:transparent; border:none;
	-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);
}
.trpg-card-frame button.pic {width:100%; height:100%;}
.trpg-card-frame .pic > em {display:block; position:absolute; top:50%; left:50%; width:100%; height:100%; transform:translate(-50%, -50%); -webkit-transform:translate(-50%, -50%); background:no-repeat 50% 50%; background-size:cover;}
.trpg-card-frame .pic.over > em {transform:translate(-50%, -50%) scale(1.1); -webkit-transform:translate(-50%, -50%) scale(1.1);}
.trpg-card-frame .pic .cover {display:block; position:absolute; left:0; right:0; bottom:0; top:0; font-size:16px; overflow:hidden;  transform:translateY(100%); -webkit-transform:translateY(100%); transition:.3s all; -webkit-transition:.3s all;}
.trpg-card-frame .pic .cover > * {display:table; width:100%; height:100%; table-layout:fixed;}
.trpg-card-frame .pic .cover > * > * {display:table-cell; vertical-align:middle; text-align:center;}
.trpg-card-frame .pic .cover .subject,
.trpg-card-frame .pic .cover .sub-subject {display:block; position:relative;font-size:1em; line-height:1.2; padding:0; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.trpg-card-frame .pic .cover .sub-subject {display:inline-block; font-size:.8em; margin:.5em 0 0; padding:.2em;}

.trpg-card-frame a.pic:hover > em {transform:translate(-50%, -50%) scale(1); -webkit-transform:translate(-50%, -50%) scale(1); opacity:.1;}
.trpg-card-frame .pic .cover.fix,
.trpg-card-frame a.pic:hover .cover {transform:translate(0); -webkit-transform:translate(0);}

@media all and (max-width:740px) {
	.trpg-card-frame .pic .cover {font-size:15px;}
}
@media all and (max-width:540px) {
	.trpg-card-frame .pic .cover{font-size:14px;}
}
@media all and (max-width:430px) {
	.trpg-card-frame .pic .cover {font-size:13px;}
}


/***********************************************
	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:5px; box-sizing:border-box;}
@media all and (max-width:480px) {
	.trpg-card-list li {max-width:100%; width:100% !important;}
}


/***********************************************
	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; }
}