@charset "utf-8";


#youtube_area{
	width:100%;
	height:100%;
	position:fixed;
	z-index:1000;
	top:-100%;
	left:0;
}

#youtube_area_bg{
	width:100%;
	height:100%;
	background:url(../images_message/bg_youtube.png) repeat;
	position:absolute;
	top:0;
	left:0;
	display:none;
}

#youtube_area_inner{
	position:relative;
	width:864px;
	height:486px;
	left:50%;
	top:50%;
	background:#111;
	margin-left:-432px;
	margin-top:-243px;
	display:none;
}

#youtube_close{
	width:80px;
	height:80px;
	position:absolute;
	top:-90px;
	right:-90px;
	background:url(../images_message/btn_close.png) 0 0 no-repeat;
	cursor:pointer;
}

#youtube_player{
	position:absolute;
	top:0;
	left:0;
	width:864px;
	height:486px;	
}

#youtube_player iframe{
	background:#111111;
}

/*
 responsive start
================================================================== */
@media screen and (max-width: 960px){
	
#youtube_area_inner{
	position:relative;
	width:90%;
	height:auto;
	left:0%;
	margin-left:auto;
	margin-right:auto;
	top:50%;
	margin-top:-140px;
}

#youtube_close{
	width:40px;
	height:40px;
	position:absolute;
	top:-45px;
	right:0px;
	background:url(../images_message/btn_close.png) 0 0 no-repeat;
	background-size:40px 40px;
}

#youtube_player{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:486px;
}


}

/*
for tablet
================================================================== */
@media screen and (max-width: 768px){
	
#youtube_area_inner{
	position:relative;
	width:90%;
	height:auto;
	left:0%;
	margin-left:auto;
	margin-right:auto;
	top:50%;
	margin-top:-280px;
}

#youtube_close{
	width:40px;
	height:40px;
	position:absolute;
	top:-45px;
	right:0px;
	background:url(../images_message/btn_close.png) 0 0 no-repeat;
	background-size:40px 40px;
}

#youtube_player{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:390px;
}

}

/*
for smartphone
================================================================== */
@media screen and (max-width: 640px){
	
#youtube_area_inner{
	position:relative;
	width:90%;
	height:auto;
	left:0%;
	margin-left:auto;
	margin-right:auto;

	top:50%;
	margin-top:-100px;
}

#youtube_close{
	width:40px;
	height:40px;
	position:absolute;
	top:-45px;
	right:0px;
	background:url(../images_message/btn_close.png) 0 0 no-repeat;
	background-size:40px 40px;
}

#youtube_player{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:auto;
}

}