@charset "UTF-8";
/* CSS Document */



/* FONT size
---------------------------------------------------------------------
[ px ]	[ % ]
10px 	72  %		19px 	136 %
11px 	79  %		20px 	143 %
12px 	86 %		21px 	150 %
13px 	93 %		22px 	158 %
14px 	100 %		23px 	165 %
15px 	108 %		24px 	172 %
16px 	115 %		25px 	179 %
17px 	122 %		26px 	186 %
18px 	129 %
---------------------------------------------------------------------*/


	
	
/* pagetitle_pamphlet
--------------------- */
#pagetitle_pamphlet {
	width: 100%;
}
	#pagetitle_pamphlet .inner {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 360px;
	}
		#pagetitle_pamphlet .inner .titbox {
			padding-top: 60px;
			text-align: center;
		}
			#pagetitle_pamphlet .inner .titbox h1 {
				font-size: 40px;
				font-weight: 700;
				line-height: 1;
				margin-bottom: 10px;
			}
				#pagetitle_pamphlet .inner .titbox h1 span {
					display: block;
					font-size: 16px;
					margin-top: 5px;
					letter-spacing: 0.1em;
				}

			#pagetitle_pamphlet .inner .titbox .en {
				font-size: 22px;
				letter-spacing: 5px;
			}


	
	
/* movie
--------------------- */
#movie {
	width: 100%;
	padding: 0 90px 0 10px;
}
	#movie a.linkbox {
		display: block;
		position: relative;
		overflow: hidden;
		margin-bottom: 10px;
	}
		#movie a.linkbox iframe {
			width: 135%;
			height: 135%;
			aspect-ratio: 16 / 7;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translateY(-50%) translateX(-50%);
			-webkit-transform: translateY(-50%) translateX(-50%);
			z-index: -1;
		}

		#movie a.linkbox .area {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			width: 100%;
			height: 100%;
			aspect-ratio: 16 / 7;
			background: rgba(0,0,0,0.4);
			padding: 0 80px;
			color: #fff;
			position: relative;
			transition: 0.3s;
			-webkit-transition: 0.3s;
		}
		#movie a.linkbox:hover .area {
			background: rgba(0,0,0,0.7);
		}
		#movie a.linkbox .area:before {
			content: "";
			width: 70px;
			height: 100%;
			background: url("../img/btn_youtube.svg") no-repeat center / 100%;
			position: absolute;
			top: 0;
			right: 70px;
			transition: 0.3s;
			-webkit-transition: 0.3s;
		}
		#movie a.linkbox:hover .area:before {
			width: 90px;
			right: 60px;
		}
			#movie a.linkbox .area dl {
				text-align: center;
				padding-top: 10px;
			}
				#movie a.linkbox .area dl dt {
					font-size: 22px;
					font-weight: 700;
					line-height: 1;
				}
				#movie a.linkbox .area dl dd {
					font-size: 80px;
					font-weight: 700;
					line-height: 1;
				}

			#movie a.linkbox .area .text {
				border-left: solid 1px #fff;
				padding-left: 40px;
				margin-left: 30px;
			}
				#movie a.linkbox .area .text h2 {
					font-size: 34px;
					font-weight: 700;
					line-height: 1.3em;
					margin-bottom: 15px;
				}
				#movie a.linkbox .area .text p {
					font-size: 20px;
					font-weight: 700;
					line-height: 1;
				}

	#movie .bnr {
		padding: 70px 0;
		border-bottom: solid 1px #ddd;
	}
		#movie .bnr a {
			display: block;
			max-width: 430px;
			margin: 0 auto;
			transition: 0.3s;
			-webkit-transition: 0.3s;
		}
		#movie .bnr a:hover {
			opacity: 0.7;
		}








/* 1400px */
@media screen and (max-width: 1400px) {


	
	
/* movie
--------------------- */
#movie {
	padding: 0 10px 0 10px;
}





	




}









/* 1160px */
@media screen and (max-width: 1160px) {


	
	
/* pagetitle_pamphlet
--------------------- */
#pagetitle_pamphlet .inner .titbox h1 {
	font-size: 34px;
}
	#pagetitle_pamphlet .inner .titbox h1 span {
		font-size: 14px;
	}


	
	
/* movie
--------------------- */
#movie a.linkbox .area {
	padding: 0 50px;
}
#movie a.linkbox .area:before {
	width: 60px;
	right: 50px;
}
#movie a.linkbox:hover .area:before {
	width: 80px;
	right: 40px;
}
	#movie a.linkbox .area dl dt {
		font-size: 18px;
	}
	#movie a.linkbox .area dl dd {
		font-size: 50px;
	}

	#movie a.linkbox .area .text {
		padding-left: 30px;
		margin-left: 25px;
	}
		#movie a.linkbox .area .text h2 {
			font-size: 28px;
		}
			#movie a.linkbox .area .text h2 br.sp {
				display: block;
			}

		#movie a.linkbox .area .text p {
			font-size: 18px;
		}

	





}

	







/* max 767px */
@media screen and (max-width: 767px) {


	
	
/* pagetitle_pamphlet
--------------------- */
#pagetitle_pamphlet {
	width: 100%;
}
	#pagetitle_pamphlet .inner {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 260px;
	}
		#pagetitle_pamphlet .inner .titbox {
			padding-top: 70px;
			text-align: center;
		}
			#pagetitle_pamphlet .inner .titbox h1 {
				font-size: 22px;
				letter-spacing: 3px;
				padding-bottom: 5px;
			}
				#pagetitle_pamphlet .inner .titbox h1 span {
					font-size: 12px;
				}

			#pagetitle_pamphlet .inner .titbox .en {
				font-size: 16px;
				letter-spacing: 2px;
			}


	
	
/* movie
--------------------- */
#movie a.linkbox iframe {
	width: 177%;
	height: 177%;
	aspect-ratio: 4 / 3;
}

#movie a.linkbox .area {
	display: block;
	aspect-ratio: 4 / 3;
	padding: 0 30px;
}
#movie a.linkbox:hover .area {
	background: rgba(0,0,0,0.3);
}
#movie a.linkbox .area:before {
	width: 50px;
	right: auto;
	left: 30px;
	background: url("../img/btn_youtube.svg") no-repeat center bottom 30px / 100%;
}
#movie a.linkbox:hover .area:before {
	width: 50px;
	right: auto;
	left: 30px;
}
	#movie a.linkbox .area dl {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		text-align: left;
		padding-top: 30px;
		margin-bottom: 15px;
	}
		#movie a.linkbox .area dl dt {
			font-size: 16px;
			margin-right: 8px;
		}
		#movie a.linkbox .area dl dd {
			font-size: 16px;
		}

	#movie a.linkbox .area .text {
		border-left: solid 1px #fff;
		padding-left: 20px;
		margin-left: 0;
	}
		#movie a.linkbox .area .text h2 {
			font-size: 20px;
			font-weight: 700;
			line-height: 1.3em;
			letter-spacing: 0;
			margin-bottom: 12px;
		}
		#movie a.linkbox .area .text p {
			font-size: 14px;
			letter-spacing: 0;
		}

	#movie .bnr {
		padding: 40px 0;
	}
		#movie .bnr a {
			max-width: 90%;
		}
			#movie .bnr a img {
				width: 100%;
				height: auto;
			}







}