@charset "utf-8";

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



/* --------------------
 * mainview
 */
#mainview {
	clear: both;
}
	#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;
			text-align: center;
		}
			#mainview_wrap .ttl .sub {
				display: block;
				margin-top: -40px;
				font-size: 143%;
				line-height: 1.10;
			}
			#mainview_wrap .ttl .main {
				display: block;
				padding-top: 18px;
				font-size: 286%;
				line-height: 1.10;
			}
		/* mainview : scroll */
		#mainview_wrap .scroll {
			position: absolute;
			left: 50%;
			bottom: 24px;
			z-index: 1;
			display: none;
			width: 69px;
			height: 69px;
		}
			#mainview_wrap .scroll a {
				display: block;
				width: 69px;
				height: 69px;
				margin-left: -34px;
				background-image: url(/liberala/asset/img/body/btn_scroll.png);
				background-repeat: no-repeat;
				background-size: 69px auto;
			}
		/* 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: 2px;
				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); }
				}



/* --------------------
 * contents
 */
.contents {}
	.contents_wrap {}

		/* --------------------
		 * contents : overview
		 */
		#overview {}


		/* --------------------
		 * contents : movie
		 */
		#movie {
			clear: both;
			margin-top: 54px;
		}


		/* --------------------
		 * contents : keyword
		 */
		#keyword {
			margin-top: 32px;
			padding-bottom: 26px;
			background-image: url(/liberala/asset/img/body/bg_lightgray.png);
			background-repeat: left top;
			background-size: 72px auto;
		}
			#keyword h4 {
				display: block;
				padding-top: 32px;
				font-size: 129%;
				font-weight: bold;
				text-align: center;
			}
			#keyword ul {
				padding: 0 140px;
				padding-top: 8px;
				text-align: center;
			}
				#keyword li {
					display: inline-block;
					padding: 0 18px;
				}
					#keyword li a {
						font-size: 86%;
						color: #0000c9;
						line-height: 1.833;
						text-decoration: underline;
						white-space: nowrap;
					}


		/* --------------------
		 * contents : model
		 */
		#model {

		}
			/* model : header */
			#model .header {
				padding-top: 52px;
				line-height: 1.10;
				text-align: center;
			}
				#model .header .en {
					display: block;
					font-size: 216%;
				}
				#model .header .jp {
					display: block;
					font-size: 93%;
				}

			/* model : article */
			#model .article {

			}
				#model .item {
					clear: both;
					position: relative;
					box-sizing: border-box;
					-moz-box-sizing: border-box;
					-webkit-box-sizing: border-box;
					display: table;
					width: 100%;
					height: 216px;
					padding-left: 360px;
					padding-right: 35px;
					margin-top: 27px;
					border: 1px solid #dbdbdb;
				}
					/* image */
					#model .item .img {
						position: absolute;
						left: 0;
						top: 0;
						display: block;
						width: 325px;
					}
					/* context */
					#model .item .context {
						display: table-cell;
						vertical-align: middle;
					}
						#model .item .ttl {

						}
							#model .item .ttl .label {
								font-size: 158%;
								font-weight: bold;
								vertical-align: middle;
							}
							#model .item .ttl .icon {
								padding: 4px 12px;
								background-color: #343434;
								font-size: 86%;
								font-weight: bold;
								color: #fff;
								vertical-align: middle;
							}
						#model .item .txt {
							padding-top: 8px;
							font-size: 93%;
							line-height: 1.538;
						}
						/* link */
						#model .item .link {
							display: table;
							width: 250px;
							height: 45px;
							margin-top: 12px;
							float: right;
						}
							#model .item .link a {
								display: table-cell;
								background-color: #0000c9;
								text-align: center;
								vertical-align: middle;
							}
							#model .item .link a:hover {
								text-decoration: none;
							}
								#model .item .link a span {
									font-size: 108%;
									padding-bottom: 1px;
									padding-right: 20px;
									background-image: url(/liberala/asset/img/body/ico_link.png);
									background-repeat: no-repeat;
									background-position: right;
									background-size: 7px auto;
								}


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


		/* --------------------
		 * contents : book
		 */
		#book {
			margin-top: 100px;
		}


		/* --------------------
		 * contents : library
		 */
		#library {
			margin-top: 25px;
		}


		/* --------------------
		 * contents : backorder
		 */
		#backorder {
			padding-top: 56px;
			padding-bottom: 28px;
		}



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



/* --------------------
 * modal
 */
#modal {
	/*display: block;*/
}
	#modal_wrap {}

		.modal {
			clear: both;
			display: none;
			box-sizing: border-box;
			-moz-box-sizing: border-box;
			-webkit-box-sizing: border-box;
			width: 1000px;
			height: 700px;
			margin: 0 auto;
			background-color: #000;
			border: 3px solid #fff;
			border-radius: 3px;
			-moz-border-radius: 3px;
			-webkit-border-radius: 3px;
		}
			.modal_wrap {
				position: relative;
			}
				/* modal : header */
				.modal .header {
					display: table;
					box-sizing: border-box;
					-moz-box-sizing: border-box;
					-webkit-box-sizing: border-box;
					width: 100%;
					padding-left: 46px;
					padding-right: 74px;
					padding-top: 46px;
				}
					.modal .header .img {
						display: table-cell;
						width: 400px;
						height: 200px;
						vertical-align: middle;
					}
					.modal .header .content {
						display: table-cell;
						padding-left: 48px;
						vertical-align: middle;
					}
						.modal .header .content .ttl {
							font-size: 172%;
							font-weight: bold;
						}
						.modal .header .content  p {
							margin-top: 16px;
							font-size: 100%;
							line-height: 1.286;
						}
				/* modal : article */
				.modal .article {
					position: relative;
					padding-left: 46px;
					padding-right: 74px;
				}
					.modal .article .lead {
						height: 36px;
						padding-top: 36px;
						font-size: 108%;
						font-weight: bold;
					}
					.modal .article .content {
						height: 340px;
						margin-left: -18px;
						overflow: hidden;
					}
						.modal .article .content_wrap {

						}
							.modal .article .content .item {
								width: 160px;
								margin-left: 18px;
								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;
												-moz-transition: -moz-transform 0.4s ease-out;
												-webkit-transition: -webkit-transform 0.4s ease-out;
												-o-transition: -o-transform 0.4s ease-out;
												-ms-transition: -ms-transform 0.4s ease-out;
												transition: transform 0.4s ease-out;
											}
											.modal .article .content .item a:hover dt span {
												-webkit-transform: scale(1.10);
												-moz-transform: scale(1.10);
												-o-transform: scale(1.10);
												-ms-transform: scale(1.10);
												transform: scale(1.10);
											}
										.modal .article .content .item dd {
											display: block;
											height: 50px;
											padding-top: 10px;
											font-size: 93%;
										}
					.modal .article .scroll {
						position: absolute;
						right: 33px;
						top: 72px;
						display: block;
						width: 10px;
						height: 340px;
						background-color: #454545;
					}
						.modal .article .scroll_wrap {
							position: relative;
						}
							.modal .article .scroll span {
								position: absolute;
								left: 0;
								top: 0;
								display: block;
								width: 10px;
								height: 100px;
								background-color: #00f;
								cursor: pointer;
							}
							.modal .article .scroll span.blur {
								cursor: default;
							}
				/* modal : cloase */
				.modal .close {
					position: absolute;
					right: 28px;
					top: 28px;
					display: block;
					width: 20px;
					height: 20px;
					background-image: url(/liberala/asset/img/body/btn_close.png);
					background-repeat: no-repeat;
					background-size: auto 20px;
					cursor: pointer;
				}