@charset "UTF-8";

.is_active{display: block !important;}
.stop_scroll{position: fixed;width: 100%;}
.zoom_in{animation: zoomIn 0.3s ease-in-out forwards !important;}

	@keyframes zoomIn{
from{-webkit-transform: scale(0.5)}
to{-webkit-transform: scale(1.0)}
	}

#modal{display: none;overflow: auto;-webkit-overflow-scrolling: touch;width: 100vw;height: 100vh;top: 0;left: 0;position: fixed;z-index: 9999999}
#modal .inner{display: table;width: 100%;height:100%;}
#modal .modalBlack{display: table-cell;background: rgba(255,255,255,0.6);text-align: center;vertical-align: middle;}

#modal .modalwindow{
	position: relative;
	display: inline-block;
	text-align: left;
	max-width: 1000px;
	min-width: 600px;
	cursor: auto;
	box-shadow: rgba(0,0,0,0.3) 1px 1px 5px 3px;
	background: #fff;
	border-radius: var(--px10);
}

#modal .page{
	display: none;
	padding: var(--px30) var(--px25) var(--px50);
}

#modal .page .name{
	text-align: center;
	font-size: var(--px24);
	font-weight: bold;
	margin-bottom: var(--px20);
}

#modal .page .comment{
	font-size: var(--px18);
	margin-top: var(--px30);
	line-height: 1.5;
}

#modal .btn.top a{display: none;}
#modal .btn.top{
	display: none;
	position: absolute;
	top: 10px;
	right: 10px;
	padding: 10px;
	border-radius: 20px;
	background: #fff;
}

#modal .btn.bottom a{display: inline-block;}
#modal .btn.bottom{
	text-align: center;
}

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

	#modal .page{
		padding: 4vw 3.33vw 6.67vw;
	}

	#modal .page .name{
		font-size: 3.5vw;
		margin-bottom: 2.67vw;
	}

	#modal .page .comment{
		font-size: 3.5vw;
		margin-top: 4vw;
	}

	#modal .modalwindow{
		max-width: 90%;
		min-width: 90%;
		border-radius: 2vw;
	}

	}/* --- max-width:768px */

.youtubeWrap {
    width: 100%;
    padding-bottom: 56.25%;
    height: 0;
    position: relative;
}

.youtubeWrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}