@charset "UTF-8";

/* ▼▼▼ トップ
=====================================*/
section {
	border: none;
	padding-top: 20px;
	margin-bottom: 20px;
	}
#mainVisual {
	background: url(../img/main_bg.png)no-repeat 0 -29vw;
	background-size: cover;
	padding: 20px 0 ;
	}
	#mainVisual::after {
	height: 77%;
	padding-top: 60px;
	}
	#mainVisual > .container {
		max-width: 950px;
		margin-bottom: 0;
	}
	#mainVisual > .container > p{
		padding-left: 10%;
	}
#main::before {
	content: none!important;
	}
	#main .container {
		max-width: 720px;
		}
/* nav  */
	.nav ul {
		max-width: 1000px;
		}
		.nav ul li{
			width: 13%;
			}
			 .nav  ul li a, .nav ul li.library a {
				font-size: 15px;
				}
				 .nav  ul li img, .nav ul li.library img {
					display: block;
					width: 30px;
					height: 30px;
					margin: 0 auto 5px;
					}
							.nav ul li.library {
								width: 13%;
								padding: 0;
								}
								.nav ul li.library a {
									width: auto;
									height: auto;
									border: none;
									padding: 17px 10px;
									border-radius: 0;
									background: #6a0000;
									pointer-events: none;
									}
									.nav ul li.scroll_block{
										display: block;
										width: 20%;
										padding-left: 10px;
										}
										.nav ul li.scroll_block a{
											display: inline;
											padding: 0;
											margin: 0;
										}
										.nav ul li.scroll_block img{
											width: 206px;
											height: 50px;
											margin: 20px auto;
											}
											.nav ul li.scroll_block img:hover{
												opacity: .7;
											}
#library h2{
	background: #0062B1;
	padding: 3px;
	margin-bottom: 0;
	font-size: 20px;
	color: #fff;
	text-align: center;
	}
	#library .inner{
		background: #e2e2e2;
		padding: 45px 0;
		margin-bottom: 30px;
		text-align: center;
		}
		#library .inner p{
			height: 333px;
			text-align: center;
			position: relative;
			}
			#library .inner p a{
				display: inline;
				}
				#library .inner p img{
					height: 100%;
					}
					#library .inner span{
						position: relative;
						top: -27px;
						right: -27px;
						}
						#library .inner span::after{
							content: "";
							display: block;
							width: 22px;
							height: 22px;
							background: url(../img/library/icon01.svg)no-repeat top center;
							background-size: cover;
							position: absolute;
							right: 0;
							}
							p.download {
								max-width: 270px;
								margin: 0 auto;
								}
								#cboxContent{
									padding: 20px;
									background: none;
								}
	/* 動画 */
	#library .inner video{
		width: 90%;
		background: url(../img/library/tv_cm_3.jpg)no-repeat center center/cover;
	}
	/* .iframe {
		position: relative;
		width: 100%;
		padding-top: 56.25%;
		}
		.iframe-container {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		} */
	/* 準備中 */
	#library .inner .preparation {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 80%;
		padding: 20px;
		margin: 0 auto;
		background: #fff;
	}
	#library .inner .preparation::before {
		display: block;
		content: "準備中のため、しばらくお待ちください。";
		border: 1px solid #000;
		padding: 7px 20px;
		font-size: 130%;
		font-weight: bold;
	}
footer {
	margin-bottom:200px;
}
/* ▼▼▼ 480px〜768px
=====================================*/
@media screen and (max-width: 768px) {
#mainVisual {
	background: url(../img/main_bg.png)no-repeat 0 -20vw;
	background-size: cover;
	padding: 0;
	}
	#mainVisual::after {
		height: 51%;
		padding-top: 8vw;
		font-size: 20px;
		}
		#mainVisual > .container > p {
			padding-left: 0;
		}
	#main  {
		padding: 15px 20px;
		}
		h2::after {
			content: none;
			}
#library h2{
	padding: 5px;
	font-size: 15px;
	}
	#library .inner{
		padding: 25px 0;
		margin-bottom: 20px;
		}
		#library .inner p{
			height: 37vw;
			min-height: 130px
			}
			#library .inner p img{
				height: 100%;
				}
				#library .inner span{
					position: relative;
					top: -25px;
					right: -25px;
					}
					#library .inner span::after{
						width: 20px;
						height: 20px;
						}
						p.download {
							max-width: 65%;
							}
#library .inner iframe {
	width: 80vw;
	height: 45vw;
	margin: 0 auto;
	}
	/* 準備中 */
	#library .inner .preparation{
		width: 90%;
	}
	#library .inner .preparation::before {
		padding: 7px 15px;
		font-size: 14px;;
	}
}