@charset "utf-8";

/* ----------------------------------------
 * CSS | LIBELARA BLACK
 * /sp/catalog/css/article.css
 * ---------------------------------------- */



/* --------------------
 * mainview
 */
#mainview {
	clear: both;
	background-color: #000;
}
	#mainview_wrap {
		position: relative;
		overflow: hidden;
	}
		/* mainview : title */
		#mainview_wrap .ttl {
			position: absolute;
			left: 0;
			top: 50%;
			z-index: 1;
			display: block;
			width: 100%;
			font-weight: normal;
			color: #fff;
			line-height: 1.05;
			text-align: center;
		}
			#mainview_wrap .ttl .sub {
				display: block;
				margin-top: -20px;
				font-size: 12px;
			}
			#mainview_wrap .ttl .main {
				display: block;
				padding-top: 9px;
				font-size: 22px;
			}
		/* mainview : loader */
		#mainview_wrap .loader {
			position: absolute;
			left: 0;
			top: 0;
			z-index: 1;
			width: 100%;
		}
		/* mainview : progress */
		#mainview_wrap .progress {
			position: absolute;
			left: 0;
			top: 0;
			z-index: 1;
			display: none;
			width: 100%;
		}
			#mainview_wrap .progress  span {
				display: block;
				height: 1px;
				background-color: #0000c9;
			}
		/* mainview : bg */
		#mainview_wrap .bg {
			position: relative;
		}
			#mainview_wrap .bg ul {

			}
				#mainview_wrap .bg li {
					position: absolute;
					left: 0;
					top: 0;
					z-index: 0;
					display: none;
					width: 100%;
					background-repeat: no-repeat;
					background-position: center;
					background-size: cover;
				}
				#mainview_wrap .bg li.animation {
					animation : splash_size 5s ease-out;
					-moz-animation : splash_size 5s ease-out;
					-webkit-animation : splash_size 5s ease-out;
					-ms-animation : splash_size 5s ease-out;
				}
				@keyframes splash_size {
					0% { transform: scale(1.15); }
					100% { transform: scale(1); }
				}
				@-moz-keyframes splash_size {
					0% { transform: scale(1.15); }
					100% { transform: scale(1); }
				}
				@-webkit-keyframes splash_size {
					0% { transform: scale(1.15); }
					100% { transform: scale(1); }
				}
				@-ms-keyframes splash_size {
					0% { transform: scale(1.15); }
					100% { transform: scale(1); }
				}



/* --------------------
 * overview
 */
#overview {}



/* --------------------
 * movie
 */
#movie {
	background-color: #000;
}


/* --------------------
 * keyword
 */
#keyword {
	background-image: url(/liberala/sp/asset/img/body/bg_lightgray.png);
	background-repeat: left top;
	background-size: 43px auto;
}
	#keyword_wrap {
		padding-top: 24px;
		padding-bottom: 24px;
	}
		#keyword h4 {
			display: block;
			font-size: 17px;
			font-weight: bold;
			text-align: center;
		}
		#keyword ul {
			padding-top: 14px;
			text-align: center;
		}
			#keyword li {
				display: inline-block;
				padding: 0 12px;
			}
				#keyword li a {
					font-size: 12px;
					color: #0000c9;
					line-height: 25px;
					text-decoration: underline;
					white-space: nowrap;
				}


/* --------------------
 * model
 */
#model {
	background-color: #202020;v
}
	#model_wrap {
		position: relative;
		padding-bottom: 37px;
	}
		/* model : header */
		#model .header {
			padding-top: 24px;
			padding-bottom: 22px;
			color: #fff;
			line-height: 1.05;
			text-align: center;
		}
			#model .header .en {
				display: block;
				font-size: 22px;
			}
			#model .header .jp {
				display: block;
				padding-top: 6px;
				font-size: 10px;
				font-weight: bold;
			}

		/* model : article */
		#model .article {
			overflow: hidden;
		}
			#model .article_wrap {

			}
				#model .item {
					padding: 0 45px;
					float: left;
				}
					#model .item_wrap {
						position: relative;
					}
						/* image */
						#model .item .img {
							display: block;
							width: 100%;
						}
							#model .item .img span {
								display: block;
								background-repeat: no-repeat;
								background-position: center;
								background-size: cover;
								opacity: 0;
							}
						#model .item .icon {
							position: absolute;
							left: 0;
							top: 0;
							padding: 4px 10px;
							background-color: #343434;
							font-size: 12px;
							font-weight: bold;
							color: #fff;
						}
						/* context */
						#model .item .context {
							padding-top: 11px;
						}
							#model .item .ttl {
								font-size: 15px;
								font-weight: bold;
								color: #fff;
								line-height: 20px;
							}
							#model .item .txt {
								padding-top: 9px;
								font-size: 11px;
								color: #fff;
								line-height: 14px;
								text-align: justify;
							}
							/* link */
							#model .item .btn {
								margin-top: 15px;
							}

		/* model : aside */
		#model .aside {
			clear: both;
		}
			#model .aside ul {

			}
				#model .aside li {
					position: absolute;
					top: 0;
					z-index: 3;
					display: block;
					width: 30px;
					height: 50px;
					background-color: rgba(0,0,201,0.7);
				}
				#model .aside li.prev {
					left: 0;
					/*left: -30px;*/
				}
				#model .aside li.next {
					right: 0;
					/*right: -30px;*/
				}
					#model .aside li span {
						display: block;
						width: 30px;
						height: 50px;
						background-repeat: no-repeat;
						background-size: auto 14px;
					}
					#model .aside li.prev span {
						background-image: url(/liberala/sp/asset/img/body/icon_prev_white.png);
						background-position: 8px;
					}
					#model .aside li.next span {
						background-image: url(/liberala/sp/asset/img/body/icon_next_white.png);
						background-position: 11px;
					}


/* --------------------
 * recommend
 */
#recommend {
	margin-top: 26px;
}


/* --------------------
 * book
 */
#book {}


/* --------------------
 * library
 */
#library {}


/* --------------------
 * stock
 */
#stock {}


/* --------------------
 * backorder
 */
#backorder {}



/* --------------------
 * modal
 */
#modal {}
	#modal_wrap {}

		.modal {
			clear: both;
			display: none;
		}
			.modal_wrap {
				position: relative;
				padding-top: 60px;
			}

				/* modal : header */
				.modal .header {
					display: block;
					width: 100%;
					padding: 0 15px;
				}
					.modal .header .img {
						display: block;
					}
					.modal .header .content {
						display: block;
						padding-top: 16px;
						padding-bottom: 24px;
						border-bottom: 1px solid #939393;
					}
						.modal .header .content .ttl {
							font-size: 20px;
							font-weight: bold;
						}
						.modal .header .content  p {
							margin-top: 14px;
							font-size: 12px;
							line-height: 16px;
							text-align: justify;
						}

				/* modal : article */
				.modal .article {
					position: relative;
					padding-top: 22px;
				}
					.modal .article .lead {
						padding: 0 15px;
						padding-bottom: 10px;
						font-size: 15px;
						font-weight: bold;
					}
					.modal .article .content {
						padding: 0 11px;
					}
						.modal .article .content_wrap {

						}
							.modal .article .content .item {
								width: 33%;
								padding: 0 4px;
								float: left;
							}
								.modal .article .content .item_wrap {

								}
								.modal .article .content a:hover {
									text-decoration: none;
								}
									.modal .article .content .item dl {
										display: block;
									}
										.modal .article .content .item dt {
											display: block;
											width: 100%;
											height: 120px;
											background-color: #1a1a1a;
											overflow: hidden;
										}
											.modal .article .content .item dt span {
												display: block;
												width: 100%;
												height: 120px;
												background-repeat: no-repeat;
												background-size: cover;
											}
										.modal .article .content .item dd {
											display: block;
											height: 44px;
											padding-top: 6px;
											font-size: 12px;
											line-height: 16px;
										}

				/* modal : footer */
				.modal .footer {
					clear: both;
					padding: 0 11px;
					padding-bottom: 26px;
				}
					.modal .footer_wrap {
						width: 33%;
						margin: 0 auto;
					}
						.modal .footer a {
							display: table;
							box-sizing: border-box;
							-moz-box-sizing: border-box;
							-webkit-box-sizing: border-box;
							width: 100%;
							height: 40px;
							padding: 0 4px;
						}
							.modal .footer a span {
								display: table-cell;
								border: 2px solid #9e9e9f;
								font-size: 15px;
								font-weight: bold;
								color: #9e9e9f;
								text-align: center;
								vertical-align: middle;
							}

				/* modal : close */
				.modal .close {
					position: absolute;
					right: 15px;
					top: 16px;
					display: block;
					width: 30px;
					height: 30px;
					background-image: url(/liberala/sp/asset/img/body/btn_close.png);
					background-repeat: no-repeat;
					background-position: center;
					background-size: auto 18px;
					cursor: pointer;
				}