/* Main Vusual Img Box
---------------------------------------------------------- */
#visualImgBox .active {

	display: block;
	z-index: 15;

}

#visualImgBox div {

	display: none;
	position: absolute;
	top: 0;
	left: 0;

}

#visualImgBox div img {

	width: 100%;
	display: block;

}

/* MainVisualMovie
---------------------------------------------------------- */
#mainVisualMovie {

	display: block;
	overflow: hidden;
	position: absolute;
	z-index: 25;
	background-color: #ffffff;
	background-image: url(/img/common/background-knm.gif);
	background-color: #ffffff !important;
	background-position: center;
	width: 100%;
	left: 50%;
	transform: translateX(-50%);

}

#mainVisualMovie .video-js {

	width: 100%;

}

#topMain .movieIconBox {

	position: absolute;
	bottom: 0;
	right: 120px;

}

#topMain .movieIconBox a {

	margin-left: 0.5em;

}

#topMain .movieIconBox a:last-of-type span {

	margin-left: 0.1em;
	font-size: 0.7em;

}

#imgButtonBox ul.thumnail-button li.active a {

	color: #b60014;

}

#imgButtonBox span.actionButton {

	cursor: pointer;
	display: inline-block;
	width: 20px;
	height: 22px;
	background-image: url(/img/common/btn_stop.png);
	background-repeat: no-repeat;
	background-position: center;
	vertical-align: bottom;
	transition: all .3s ease-in-out;

}

@media (min-width:769px) {

	/* TOP画像部分 CSS
	---------------------------------------------------------- */
	#topMain {

		max-height: 600px;
		width: 100%;
		max-width: 1200px;
		min-width: 980px;
		position: relative;
		padding-bottom: 2em;
		margin-bottom: 0.5em;

	}

	#topMain .title {

		position: absolute;
		display: block;

		top: 50%;
		transform: translateY(-50%);

		left: calc((100% - 980px) / 2 + 1em);
		left: -webkit-calc((100% - 980px) / 2 + 3em);

	}


	#topMain .title span {

		font-family: "メイリオ", Meiryo;
		color: #555555;
		font-weight: normal;
		font-size: 30px;
		line-height: 1.8em;
		text-shadow: 0px 0px 15px #ffffff, 10px 0px 15px #ffffff, 10px 10px 15px #ffffff, 0px 10px 15px #ffffff, -10px 0px 15px #ffffff, -10px -10px 15px #ffffff, 0px -10px 15px #ffffff, 10px -10px 15px #ffffff, -10px 10px 15px #ffffff;
		z-index: 50;

	}

	/* Main Vusual Img Box
	---------------------------------------------------------- */
	#visualImgBox {

		padding-top: 46%;

	}

	#visualImgBox div img.mobileImg {

		display: none;

	}

	/* トップ画像・サムネイルボタン
	---------------------------------------------------------- */
	#imgButtonBox {

		padding-left: 1em;
		position: absolute;
		bottom: 0;
		width: 100%;
		max-width: 980px;
		text-align: left;

	}

	#imgButtonBox ul.thumnail-button {

		display: inline-flex;
		margin: 0px auto;
		padding: 0px;
		z-index: 10;

	}

	#imgButtonBox ul.thumnail-button li {

		margin-right: 5px;
		color: #a0a0a0;
		font-size: 1em;
		line-height: 1.3em;
		display: inline-block;

	}

	#imgButtonBox ul.thumnail-button li a {

		display: inline-block;
		color: #a0a0a0;
		text-decoration: none;
		transition: all .3s ease-in-out;

	}

	#imgButtonBox ul.thumnail-button li a:hover {

		color: #000000;

	}

	/* KNM メインビジュアル・動画
	---------------------------------------------------------- */
	#mainVisualMovie {

		height: 551px;

	}

	#mainVisualMovie .main-movieBox {

		max-width: 1200px;

	}

	#mainVisualMovie .video-js {

		max-width: 1200px;
		height: 551.25px;

	}

	#topMain .movieIconBox {

		display: inline-block;
		width: 980px;
		position: absolute;
		bottom: 0em;
		transform: translateX(-50%);
		left: 50%;
		text-align: right;

	}

	#topMain .movieIconBox a {

		margin-left: 0.5em;

	}

	#topMain .movieIconBox a:last-of-type span {

		margin-left: 0.1em;
		font-size: 0.7em;

	}

}

@media (max-width:768px) {

	/* TOP画像部分 CSS
	---------------------------------------------------------- */
	#topMain {

		width: 100%;
		position: relative;

	}

	#topMain .title {

		position: absolute;
		display: block;

		width: 90%;

		left: 50%;
		bottom: 2em;
		transform: translateX(-50%);
		z-index: 50;

	}

	#topMain .title span {

		font-size: 18px;
		font-family: "メイリオ", Meiryo;
		color: #555555;

		line-height: 1.6em;

		font-weight: normal;
		text-shadow: 0px 0px 15px #ffffff, 10px 0px 15px #ffffff, 10px 10px 15px #ffffff, 0px 10px 15px #ffffff, -10px 0px 15px #ffffff, -10px -10px 15px #ffffff, 0px -10px 15px #ffffff, 10px -10px 15px #ffffff, -10px 10px 15px #ffffff;

	}

	/* Main Vusual Img Box
	---------------------------------------------------------- */
	#visualImgBox {

		padding-top: 100%;

	}

	#visualImgBox div img.desktopImg {

		display: none;

	}

	#visualImgBox div img.mobileImgBox {

		z-index: 20;
		position: relative;
		overflow: hidden;
		margin: 0px;
		width: 100%;
		padding: 0px;
		padding-top: 100%;

	}

	#imgButtonBox {
		
		display: flex;
		text-align: center;
		margin: 0.5em 0;
		padding: 0 1em;
		justify-content: space-between;

	}

	#imgButtonBox .thumnail-button {

		display: flex;
		list-style-type: none;
		width: 100%;
		justify-content: space-between;
		padding: 0;
		padding-right: 2em;

	}

	#imgButtonBox span.actionButton {
		padding: 0.5em;
		height: unset;
		width: 1em;
	}

	/* KNM メインビジュアル・動画
	---------------------------------------------------------- */
	#mainVisualMovie {

		height: 100vw;

	}

	#mainVisualMovie .main-movieBox {

		max-width: 100vw;

	}

	#mainVisualMovie .video-js {

		height: 100vw;

	}

	#topMain .movieIconBox {

		bottom: 0.5em;
		right: 0.5em;
		z-index: 50;

	}

	#topMain .movieIconBox a:not(:last-of-type) {

		display: none;

	}

	#topMain .movieIconBox a:last-of-type {

		padding: 0.5em 1em;
		border: 1px solid #d1d1d1;
		display: block;

	}

	#topMain .movieIconBox a:last-of-type i, #topMain .movieIconBox a:last-of-type span {

		font-size: 1em;

	}

	/* 表示させないもの
	---------------------------------------------------------- */
	#mainVisualMovie,
	#topMain .movieIconBox {

		display: none;

	}

}