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


/* Modal Window for YouTube
=========================================================================================== */

#ModalYouTubeCover {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #fff;
	z-index: 100;
}

#ModalYouTube {
	display: none;
	position: absolute;
	padding: 50px;
	z-index: 102;
}

#ModalYouTube .Inner {
	position: relative;
	background-color: #000;
	box-shadow: 0 0 35px rgba(0, 0, 0, .4);
	-moz-box-shadow: 0 0 35px rgba(0, 0, 0, .4);
	-webkit-box-shadow: 0 0 35px rgba(0, 0, 0, .4);
	-o-box-shadow: 0 0 35px rgba(0, 0, 0, .4);
	-ms-box-shadow: 0 0 35px rgba(0, 0, 0, .4);
}

#ModalYouTube iframe {
	display: block;
	width: 100%;
}

#ModalYouTube .Title {
	height: 50px;
	background-color: #f2f2f2;
	overflow: hidden;
}

#ModalYouTube .Title p {
	display: table-cell;
	height: 50px;
	padding: 0 80px 0 20px;
	vertical-align: middle;
	font-size: 90%;
	font-weight: bold;
	line-height: 130%;
	color: #575757;
}

#ModalYouTube .BtnClose {
	position: absolute;
	right: 0;
	bottom: 0;
	line-height: 130%;
}

#ModalYouTube .BtnClose a {
	display: table-cell;
	min-width: 50px;
	height: 30px;
	padding: 20px 5px 0;
	font-size: 76%;
	text-align: center;
	background-image: url(/res/image/jp/r1/icon/icon_close_hd.gif);
	background-position: center 7px;
	background-repeat: no-repeat;
	background-size: 16px 16px;
	-moz-background-size: 16px 16px;
	-webkit-background-size: 16px 16px;
	-o-background-size: 16px 16px;
	-ms-background-size: 16px 16px;
	vertical-align: middle;
}

#ModalYouTube .BtnClose a:link,
#ModalYouTube .BtnClose a:visited {
	color: #fff;
	background-color: #e60027;
	text-decoration: none;
}
#ModalYouTube .BtnClose a:hover,
#ModalYouTube .BtnClose a:active {
	color: #fff;
	background-color: #b1000e;
	text-decoration: none;
}

.ImgOnlyStyle .ModalYouTubeLink {
	position: relative;
	display: inline-block;
}

/*
.ImgOnlyStyle .ModalYouTubeLink:before {
	content: "";
	position: absolute;
	z-index: 1;
	width: 50px;
	height: 50px;
	top: 50%;
	left: 50%;
	margin: -25px 0 0 -25px;
	background-color: #e60027;
	opacity: .5;
	border-radius: 50%;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	-o-border-radius: 50%;
	-ms-border-radius: 50%;
}
.ImgOnlyStyle .ModalYouTubeLink:after {
	content: "";
	position: absolute;
	z-index: 1;
	width: 36px;
	height: 36px;
	top: 50%;
	left: 50%;
	margin: -18px 0 0 -18px;
	background-color: #e60027;
	border-radius: 50%;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	-o-border-radius: 50%;
	-ms-border-radius: 50%;
}
.PC .ImgOnlyStyle .ModalYouTubeLink:hover:before,
.PC .ImgOnlyStyle .ModalYouTubeLink:active:before,
.PC .ImgOnlyStyle .ModalYouTubeLink:hover:after,
.PC .ImgOnlyStyle .ModalYouTubeLink:active:after {background-color: #b1000e;}
*/

.ImgOnlyStyle .ModalYouTubeLink:after {
	content: "Play";
	position: absolute;
	display: block;
	z-index: 1;
	width: 80px;
	height: 60px;
	top: 51%;
	left: 50%;
	margin: -40px 0 0 -40px;
	padding-top: 70px;
	background: url(../image/icon_play.png) no-repeat center center;
    background-size:60px;
	box-sizing: border-box;
	text-align: center;
	color: #fff;
	font-size: 140%;
    text-shadow: 
    black 1px 2px 10px, black -1px 2px 10px,
    black 1px -2px 10px, black -1px -2px 10px;
}

.ImgOnlyStyle .ModalYouTubeLink span {
	position: relative;
	display: block;
}
.ImgOnlyStyle .ModalYouTubeLink span:after {
	content: "";
	position: absolute;
	z-index: 2;
	width: 0;
	height: 0;
	top: 50%;
	left: 50%;
	margin: -9px 0 0 -3px;
	border-left: solid 9px #fff;
	border-top: solid 9px transparent;
	border-bottom: solid 9px transparent;
}





/* Modal Window for Images
=========================================================================================== */

#ModalImageCover {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #fff;
	z-index: 100;
}

#ModalImageLoader {
	display: none;
	position: absolute;
	top: 0;
	left: 50%;
	width: 32px;
	height: 32px;
	margin-left: -16px;
	z-index: 101;
}

#ModalImage {
	display: none;
	position: absolute;
	padding: 50px;
	z-index: 102;
}

#ModalImage .Inner {
	position: relative;
	box-shadow: 0 0 35px rgba(0, 0, 0, .4);
	-moz-box-shadow: 0 0 35px rgba(0, 0, 0, .4);
	-webkit-box-shadow: 0 0 35px rgba(0, 0, 0, .4);
	-o-box-shadow: 0 0 35px rgba(0, 0, 0, .4);
	-ms-box-shadow: 0 0 35px rgba(0, 0, 0, .4);
}

#ModalImage img {
	width: 100%;
	height: auto;
}

#ModalImage .Title {
	height: 50px;
	background-color: #f2f2f2;
	overflow: hidden;
}

#ModalImage .Title p {
	display: table-cell;
	height: 50px;
	padding: 0 80px 0 20px;
	vertical-align: middle;
	font-size: 90%;
	font-weight: bold;
	line-height: 130%;
	color: #575757;
}

#ModalImage .BtnClose {
	position: absolute;
	right: 0;
	bottom: 0;
	line-height: 130%;
}

#ModalImage .BtnClose a {
	display: table-cell;
	min-width: 50px;
	height: 30px;
	padding: 20px 5px 0;
	font-size: 76%;
	text-align: center;
	background-image: url(/res/image/jp/r1/icon/icon_close_hd.gif);
	background-position: center 7px;
	background-repeat: no-repeat;
	background-size: 16px 16px;
	-moz-background-size: 16px 16px;
	-webkit-background-size: 16px 16px;
	-o-background-size: 16px 16px;
	-ms-background-size: 16px 16px;
	vertical-align: middle;
}

#ModalImage .BtnClose a:link,
#ModalImage .BtnClose a:visited {
	color: #fff;
	background-color: #e60027;
	text-decoration: none;
}
#ModalImage .BtnClose a:hover,
#ModalImage .BtnClose a:active {
	color: #fff;
	background-color: #b1000e;
	text-decoration: none;
}


/* YouTube Box
=========================================================================================== */

.YouTubeBox {
	margin: 0 0 20px;
	background-color: #363434;
}

.YouTubeBox .Movie {
	display: inline-block;
	width: 66.66666666%;
	overflow: hidden;
	vertical-align: middle;
	font-size: 1px;
	line-height: 0;
}

.YouTubeBox .Inner {
	display: inline-block;
	width: 33.33333333%;
	padding: 15px 0 5px;
	vertical-align: middle;
}

.YouTubeBox .Inner h2,
.YouTubeBox .Inner h3,
.YouTubeBox .Inner h4 {
	margin: 0 10% 10px;
	padding: 0;
	font-size: 110%;
	font-style: normal;
	font-weight: bold;
	line-height: 140%;
	color: #fff;
	background-image: none;
}

.YouTubeBox .Inner .TextStyle1,
.YouTubeBox .Inner .TextStyle2 {
	margin: 0 10% 10px;
	color: #fff;
}

.YouTubeBox .Inner .TopBorderSet {
	padding-top: 10px;
	border-top: solid 1px #555;
}

.YouTubeBox em,
.YouTubeBox strong {
	font-style: normal;
	line-height: 140%;
	color: #fff;
}
.YouTubeBox .Inner .TextStyle1 em,
.YouTubeBox .Inner .TextStyle1 strong,
.YouTubeBox .Inner .TextStyle2 em,
.YouTubeBox .Inner .TextStyle2 strong {font-size: 133%;}

.YouTubeBox .Inner .ButtonStyle1 {margin: 0 10% 10px;}

.YouTubeBox .Inner .ButtonStyle1 a {
	min-width: 123px;
	margin-bottom: 0;
}



/* for print
=========================================================================================== */

@media print {

	#ModalYouTubeCover,
	#ModalImageCover {
		width: 100% !important;
		height: 100% !important;
		top: 0 !important;
	}
	@-moz-document url-prefix() {
		#ModalYouTubeCover,
		#ModalImageCover {position: fixed;}
	}

	#ModalYouTube,
	#ModalImage {
		width: 100% !important;
		height: 100% !important;
		top: 0 !important;
		left: 0 !important;
		padding: 0 !important;
	}

	#ModalYouTube .Inner {
		width: 853px !important;
		height: 530px !important;
		margin: 300px auto 0 !important;
	}

	#ModalImage .Inner {
		max-width: 865px !important;
		height: auto !important;
		margin: 300px auto 0 !important;
	}

	#ModalYouTube .Movie,
	#ModalYouTube .Movie iframe {
		width: 853px !important;
		height: 480px !important;
	}

}





/* for RWD
=========================================================================================== */



/* for - 994px
=========================================================================================== */

@media screen and (max-width: 994px) {

	/* ------ YouTube Box ------ */

	.OptionRWD.JS .YouTubeBox .Movie {
		position: relative;
		padding-bottom: 37.125%; /* 56.25% x 66% */
		height: 0;
		overflow: hidden;
	}

	.OptionRWD.JS .YouTubeBox .Movie iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	.OptionRWD.JS .YouTubeBox .Inner h2,
	.OptionRWD.JS .YouTubeBox .Inner h3,
	.OptionRWD.JS .YouTubeBox .Inner h4 {font-size: 100%;}

	.OptionRWD.JS .YouTubeBox .Inner .TextStyle1 em,
	.OptionRWD.JS .YouTubeBox .Inner .TextStyle1 strong,
	.OptionRWD.JS .YouTubeBox .Inner .TextStyle2 em,
	.OptionRWD.JS .YouTubeBox .Inner .TextStyle2 strong {font-size: 120%;}

}



/* for - 767px
=========================================================================================== */

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

	/* --- Modal Window for YouTube --- */

	.OptionRWD.JS #ModalYouTube {padding: 50px 0;}

	.OptionRWD.JS #ModalYouTube .Title p {font-size: 83%;}


	/* ------ Modal Window for Images ------ */

	.OptionRWD.JS #ModalImage {padding: 50px 0;}

	.OptionRWD.JS #ModalImage .Title p {font-size: 83%;}


	/* ------ YouTube Box ------ */

	.OptionRWD.JS .YouTubeBox .Movie {
		display: block;
		width: auto;
		padding-bottom: 56.25%;
	}

	.OptionRWD.JS .YouTubeBox .Inner {
		display: block;
		width: auto;
	}

	.OptionRWD.JS .YouTubeBox .Inner h2,
	.OptionRWD.JS .YouTubeBox .Inner h3,
	.OptionRWD.JS .YouTubeBox .Inner h4,
	.OptionRWD.JS .YouTubeBox .Inner .TextStyle2,
	.OptionRWD.JS .YouTubeBox .Inner .ButtonStyle1 {margin: 0 15px 10px;}

	.OptionRWD.JS .YouTubeBox .Inner .ButtonStyle1 a {min-width: 130px;}

}



/* for - 579px
=========================================================================================== */

@media screen and (max-width: 579px) {

	/* ------ YouTube Box ------ */

	.OptionRWD.JS .YouTubeBox .Inner h2,
	.OptionRWD.JS .YouTubeBox .Inner h3,
	.OptionRWD.JS .YouTubeBox .Inner h4 {font-size: 90%;}

	.OptionRWD.JS .YouTubeBox .Inner .TextStyle1 em,
	.OptionRWD.JS .YouTubeBox .Inner .TextStyle1 strong,
	.OptionRWD.JS .YouTubeBox .Inner .TextStyle2 em,
	.OptionRWD.JS .YouTubeBox .Inner .TextStyle2 strong {font-size: 108%;}

}