@charset "utf-8";

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



/* --------------------
 * headline
 */
#headline {
	position: relative;
}
	#headline_wrap {
		position: relative;
		z-index: 2;
		background-color: #373737;
	}
		#headline .ttl {
			position: relative;
			color: #fff;
		}
		#headline .ttl:after {
			content: '';
			position: absolute;
			right: 16px;
			top: 30px;
			display: block;
			width: 14px;
			height: 10px;
			background-image: url(/liberala/sp/asset/img/body/icon_down_white.png);
			background-repeat: no-repeat;
			background-size: 14px auto;
		}
		#headline .ttl.focus:after {
			background-image: url(/liberala/sp/asset/img/body/icon_up_white.png);
		}

	/* headline : navi */
	#headline_navi {
		position: absolute;
		left: 0;
		top: 56px;
		z-index: 5;
		display: none;
		width: 100%;
		margin-top: 14px;
		background-color: #373737;
	}
		#headline_navi .article {
			padding: 0 15px;
		}
			#headline_navi .article li {
				border-top: 1px solid #888;
			}
				#headline_navi .article li a {
					position: relative;
					display: block;
				}
				#headline_navi .article li a:after {
					content: '';
					position: absolute;
					right: 5px;
					top: 22px;
					display: block;
					width: 9px;
					height: 16px;
					background-image: url(/liberala/sp/asset/img/body/arrow_next_l.png);
					background-repeat: no-repeat;
					background-size: contain;
				}
					#headline_navi .article li a span {
						display: table;
						height: 58px;
					}
						#headline_navi .article li a i {
							display: table-cell;
							font-style: normal;
							color: #cecece;
							vertical-align: middle;
						}
						#headline_navi .article li a i.en {
							padding-left: 5px;
							font-size: 16px;
						}
						#headline_navi .article li a i.jp {
							padding-left: 11px;
							font-size: 11px;
							font-weight: bold;
						}



/* --------------------
 * mainview
 */
#mainview {

}
	#mainview_wrap {
		padding-bottom: 15px;
	}
		#mainview .ttl {
			padding-top: 24px;
			font-size: 16px;
			font-weight: bold;
			line-height: 21px;
			text-align: center;
		}
		#mainview .txt {
			display: block;
			padding: 0 30px;
			padding-top: 14px;
			font-size: 11px;
			line-height: 14px;
			text-align: justify;
		}



/* --------------------
 * article
 */
#article {
	background-color: #000;
}
	#article_wrap {
		display: block;
		color: #fff;
	}

		/* header */
		#article .header {
			display: table;
			width: 100%;
			height: 105px;
		}
			#article .header .ttl {
				display: table-cell;
				line-height: 1.05;
				text-align: center;
				vertical-align: middle;
			}
				#article .header .ttl .en {
					display: block;
					font-size: 26px;
				}
				#article .header .ttl .jp {
					display: block;
					padding-top: 8px;
					font-size: 15px;
					font-weight: bold;
				}

		/* article */
		#article .article {
			clear: both;
			position: relative;
			overflow: hidden;
		}
			/* article : header */
			.article_header {
				display: table;
				width: 100%;
				height: 70px;
				padding: 0 15px;
			}
				.article_header .ttl {
					display: table-cell;
					border-top: 1px solid #808080;
					line-height: 1.10;
					text-align: center;
					vertical-align: middle;
				}
					.article_header .ttl .en {
						display: block;
						font-size: 17px;
						color: #bfbfbf;
					}
					.article_header .ttl .jp {
						display: block;
						padding-top: 4px;
						font-size: 12px;
						color: #8f8f8f;
					}
			.article_header.none {
				display: block;
				width: auto;
				height: 33px;
				border-top: 1px solid #808080;
				padding: 0;
				margin: 0 15px;
			}

			/* article : container */
			.article_container {
				width: 100%;
				margin-bottom: 25px;
			}
				.article_container .container_wrap {

				}
					/* article : item */
					.article_container .item {
						position: relative;
						margin-left: 6px;
						float: left;
					}
						.article_container .item_wrap {
							position: relative;
							display: block;
						}
							.article_container .item .img {
								display: block;
								width: 100%;
							}
								.article_container .item .img span {
									display: block;
									background-repeat: no-repeat;
									background-position: center;
									background-size: cover;
									opacity: 0;
								}
							.article_container .item .content {
								height: 70px;
								text-align: center;
								line-height: 1.05;
							}
								.article_container .item .icon {
									display: block;
									padding-top: 16px;
									font-size: 12px;
								}
								.article_container .item .name {
									display: block;
									padding-top: 6px;
									font-size: 17px;
								}
						.article_container .item_cover {
							position: absolute;
							left: 0;
							top: 0;
							z-index: 1;
							width: 100%;
						}

			/* article : aside */
			.article_aside {
				clear: both;
			}
				.article_aside ul {

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

		/* article : footer */
		#article .footer {
			clear: both;
			margin: 0 15px;
			padding-top: 10px;
			padding-bottom: 62px;
			border-bottom: 1px solid #808080;
		}
			#article .footer ul {
				display: table;
				width: 100%;
			}
				#article .footer li {
					display: table-cell;
					width: 50%;
					vertical-align: top;
				}
				#article .footer li.prev {
					padding-right: 6px;
				}
				#article .footer li.next {
					padding-left: 6px;
				}
					#article .footer li a {
						position: relative;
						display: table;
						width: 100%;
					}
					#article .footer li a:after {
						content: '';
						position: absolute;
						top: 19px;
						display: block;
						width: 7px;
						height: 12px;
						background-repeat: no-repeat;
						background-size: contain;
					}
					#article .footer li.prev a:after {
						left: 10px;
						background-image: url(/liberala/sp/asset/img/body/arrow_prev_m.png);
					}
					#article .footer li.next a:after {
						right: 10px;
						background-image: url(/liberala/sp/asset/img/body/arrow_next_m.png);
					}
						#article .footer li a span {
							display: table-cell;
							height: 50px;
							background-color: #0000c9;
							border-radius: 3px;
							-moz-border-radius: 3px;
							-webkit-border-radius: 3px;
							vertical-align: middle;
						}
							#article .footer li a span i {
								display: block;
								font-style: normal;
							}
							#article .footer li.prev a span i {
								padding-left: 30px;
							}
							#article .footer li.next a span i {
								padding-left: 15px;
							}
							#article .footer li a span i.en {
								font-size: 15px;
							}
							#article .footer li a span i.en.small {
								font-size: 12px;
							}
							#article .footer li a span i.jp {
								font-size: 12px;
								font-weight: bold;
							}