/* モーダル */

#modal{
	position: fixed;
	left: 0;
	top: 0;
	z-index: 1000;
	display: none;
}
#modal .back{
	position: absolute;
	left: 0;
	top: 0;
	background-color: rgba(0,0,0,0.8);
}

#modal .inner{
	position: relative;
	top: 100px;
	width: calc(92% - 40px);
	width: -webkit-calc(92% - 40px);
	width: -moz-calc(92% - 40px);

	height: calc(100vh - 190px);
	height: -webkit-calc(100vh - 190px);
	height: -moz-calc(100vh - 190px);
	/*
	height: calc(100% - 40px);
	height: -webkit-calc(100% - 40px);
	height: -moz-calc(100% - 40px);
	*/
	margin: 0 auto;
	padding: 20px;
	background: rgba(88,89,92, 1);
	/*background: rgba(88,89,92, 0.90);*/
	border-radius: 20px;
	overflow: hidden;
}

#modal .set{
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	width: 100%;
	height: 45vw;
	margin: auto;
}

#modal .set .controls {
	position: relative;
	width: calc(100% - 40px);
	width: -webkit-calc(100% - 40px);
	width: -moz-calc(100% - 40px);
	height: 100%;
}

#modal .set .controls .next {
	position: absolute;
	right: 20px;
	top: 50%;
	margin-top: -41px;
}
#modal .set .controls .next .image {
	position: relative;
	width: 60px;
	height: auto;
}
#modal .set .controls .next .sback{
	position: absolute;
	left:18px;
	top:18px;
	width: 48px;
	height: 48px;
	/*background-color: #f00;*/
}
#modal .set .controls .prev {
	position: absolute;
	left: 20px;
	top: 50%;
	margin-top: -41px;
}
#modal .set .controls .prev .image{
	position: relative;
	width: 60px;
	height: auto;
}
#modal .set .controls .prev .sback{
	position: absolute;
	right:18px;
	top:18px;
	width: 48px;
	height: 48px;
	/*background-color: #000000;*/
}
#modal .set .controls li {
	list-style-type: none;
}

#modal .close {
	position: absolute;
	left: 20px;
	top: 0px;
	width: calc(100% - 40px);
	width: -webkit-calc(100% - 40px);
	width: -moz-calc(100% - 40px);
	margin: auto;
}
#modal .close a {
	display: block;
	width: 47px;
	height: 47px;
	float: right;
}


#modal .set .page {
	position: absolute;
	left: 0px;
	right: 0px;
	top: 0px;
	bottom: 0px;
	margin: auto;
	width: calc(100% - 40px);
	width: -webkit-calc(100% - 40px);
	width: -moz-calc(100% - 40px);
	height: auto;
	/*width: 1000px;*/
	/*height: 580px;*/
}

#modal .set .page .inn{
	position: relative;
	margin-left: auto;
	margin-right: auto;
	/*
	background-color: #fff;
	border-width: 20px;
	border-style: solid;
	border-color: #fff;
	*/
}
#modal .set .page .inn .image img{
	width: 100%;
}
#modal .set .page .videoarea, #modal .set .page .videoarea1 {
	/*
	background-color: #fff;
	position: absolute;
	border: 5px solid #fff;
	box-sizing: border-box;
	*/
}

#modal .set .page .videoarea iframe, #modal .set .page .htmlarea1 iframe {
	display: block;
}

#modal .set .page .inn iframe {
	position: relative;
}


#modal .set .page .inn .modal_video {
	position: relative;
}



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

	#modal .set .page .inn .modal_video {
		top: 30px;
	}

	#modal .set .controls {
		position: relative;
		left: 20px;
		width: calc(100% - 80px);
		width: -webkit-calc(100% - 80px);
		width: -moz-calc(100% - 80px);
		/*height: 40px;*/
	}

	#modal .set .controls .next .sback{
		width: 38px;
		height: 38px;
	}

	#modal .close a{
		display: block;
		width: 30px;
		height: 30px;
		float: right;
	}


}

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

	#modal .set .page {
		position: absolute;
		left: 0px;
		right: 0px;
		top: 0px;
		bottom: unset;
		margin: auto;
		width: calc(100% - 40px);
		width: -webkit-calc(100% - 40px);
		width: -moz-calc(100% - 40px);
		height: auto;
	}

	#modal .set .controls .next{
		position: absolute;
		right: 0;
		top: 50%;
		margin-top: -6vw;
	}
	#modal .set .controls .prev{
		position: absolute;
		left: 0;
		top: 50%;
		margin-top: -6vw;
	}

	#modal .set .controls .next .image{
		position: relative;
		top: 0;
		bottom: 0;
		width: 45px;
		height: auto;
		margin: auto;
	}
	#modal .set .controls .next .image img{
		/*width: 13vw;*/
	}

	#modal .set .controls .prev .image{
		position: relative;
		top: 0;
		bottom: 0;
		width: 45px;
		height: auto;
		margin: auto;
	}
	#modal .set .controls .prev .image img{
		/*width: 13vw;*/
	}

	#modal .set .page .inn .modal_video {
		top: 0px;
	}


	#modal .close {
		top: 0px;
	}

	#modal .inner{
		top: 110px;
		padding: 10px 20px;
	}


}


/* デバイスが横向きの場合のスタイルを記述 */
@media (orientation: landscape) and (max-width: 980px){

	#modal .set .page {
		height: 100%;
	}

	#modal .set .controls {
		height: 110%;
	}

	#modal .set .controls .next .image {
		position: relative;
		width: 40px;
		height: auto;
	}
	#modal .set .controls .prev .image{
		position: relative;
		width: 40px;
		height: auto;
	}

	#modal .close {
		top: -10px;
	}

	#modal .close a {
		display: block;
		width: 30px;
		height: 30px;
		float: right;
	}

}



#modal-overlay, #modal-overlay-multi {
	z-index: 999; 
	display: none;
	position: fixed; 
	top: 0; 
	left: 0; 
	width: 100%; 
	height: 100vh; 
	background-color: rgba( 255,255,255, 0.5 ); 
} 

#modal-content, #modal-content-multi { 
	position: fixed; 
	/*display: none;*/
	z-index: 9999; 
	/*
	width: 910px; 
	height: 360px; 
	*/
	margin: 0; 
	padding: 0; 
	background: #000000; 
} 

#vimeoPlayer iframe {
	width: 100% !important;
	height: 100% !important;
	top: 0;
	left: 0;
	position: absolute;
}
#vimeoPlayerMulti iframe {
	width: 100% !important;
	height: 100% !important;
	top: 0;
	left: 0;
	position: absolute;
}

.button-link { 
}

.button-link:hover { 
  cursor: pointer ; 
}

.css_btn_class {
    font-size:16px;
    font-family:Arial;
    font-weight:normal;
    -moz-border-radius:8px;
    -webkit-border-radius:8px;
    border-radius:8px;
    border:1px solid #d83526;
    padding:9px 18px;
    text-decoration:none;
    background:-moz-linear-gradient( center top, #fe1a00 5%, #ce0100 100% );
    background:-ms-linear-gradient( top, #fe1a00 5%, #ce0100 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fe1a00', endColorstr='#ce0100');
    background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #fe1a00), color-stop(100%, #ce0100) );
    background-color:#fe1a00;
    color:#ffffff;
    display:inline-block;
    text-shadow:1px 1px 0px #b23e35;
     -webkit-box-shadow:inset 1px 1px 0px 0px #f29c93;
     -moz-box-shadow:inset 1px 1px 0px 0px #f29c93;
     box-shadow:inset 1px 1px 0px 0px #f29c93;
}
.css_btn_class:hover {
    background:-moz-linear-gradient( center top, #ce0100 5%, #fe1a00 100% );
    background:-ms-linear-gradient( top, #ce0100 5%, #fe1a00 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ce0100', endColorstr='#fe1a00');
    background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #ce0100), color-stop(100%, #fe1a00) );
    background-color:#ce0100;
}
.css_btn_class:active {
    position:relative;
    top:1px;
}





a.modal-close { 
	position:absolute;
	/*top:2px;*/
	top:-64px;
	right:10px;
	color:#b29c33;
	font-size:30px;
	line-height:1;
	font-weight:bold;
	text-decoration:none
	/*display:none;*/
}
a.modal-close:hover { 
	cursor:pointer
}