@charset "utf-8";

.modal_overlay { display: none; z-index: 9998; position: fixed; width: 100%; height: 100%; background: url(../images/common/bg_modal.png) center/cover; cursor: pointer; }
#modal { display: none; width: 90%; max-width: 600px; /* height: 63%;  */ height: 90%; max-height: 1100px ; margin: auto; left: 0; top: 0; bottom: 0; right: 0; position: fixed; z-index: 9999; }
#modal.toen_modal{height: 90%;/*  max-height: 850px; */}
#modal .close { position: absolute; z-index: 1; right: 50px; top: 40px; cursor: pointer; }
#modal iframe { border-radius: 10px; position: relative; z-index: 0; width: 100%; height: 100%; left: 0; top: 0; border: none; }
#modal.youtube{height: 52vw;max-height: 632px;}
#modal.youtube .close{display: none;}
#modal.salon{max-width: 760px;}

#modal2 { display: none; width: 92%; max-width: 640px; height: 600px; margin: auto; left: 0; top: 0; bottom: 0; right: 0; position: fixed; z-index: 9999; }
#modal2 .close { position: absolute; z-index: 1; right: 50px; top: 40px; cursor: pointer; }

#event_modal{display: none; position: fixed; z-index: 9999; left: 0; top: 0; bottom: 0; right: 0;}
#event_modal .bg_color{width: 100%; max-width: 740px; height: 90%;max-height: 1020px; margin: auto; left: 0; top: 0; bottom: 0; right: 0; position: absolute;  padding: 20px;}
#event_modal .bg_box{background:  url(../images/gashapon/bg_2.jpg) no-repeat center center; background-size: cover;width: 100%; height: 100vh; opacity: 0.5; position: absolute; top: 0px; left: 0px; }
#event_modal .bg_white{background: #fff; overflow: scroll; height: 100%; border-radius: 20px;}
#event_modal .img_2{width: 841px; height: auto; position: absolute; top: -155px; left: 49%;transform: translateX(-50%);-webkit-transform: translateX(-50%);}
#event_modal .result{ margin: 0 auto; padding: 43px 6% 51px;}
#event_modal .result .hdr{background: url(../images/gashapon/bg_1.png) no-repeat center bottom; background-size: cover; padding: 82px 0 0 ;width: 500px; margin: 0 auto 25px;}
#event_modal .result .hdr h2{text-align: center;font-size: 30px;font-family: "source-han-sans-japanese", sans-serif; font-weight: 500; text-align: center; line-height: 160%;}
#event_modal .result .hdr h2 span{font-size: 44px; font-weight: 400;}
#event_modal .result .main .box{}
#event_modal .result .main .img{padding: 0 0 22px;}
#event_modal .result .main .box h3{text-align: center;font-size: 30px;font-family: "source-han-sans-japanese", sans-serif; font-weight: 500; border: 4px solid; border-image: linear-gradient(90deg,  #fac7e7,#c3a8eb,#a1d7ee) 1; padding: 17px 0; margin: 0 0 25px;}
#event_modal .result .main .box p{line-height: 180%; margin: 0 0 50px;}
#event_modal .result .main .box .clos{display: block;border: 1px solid #000; width: 240px; margin: 0 auto; padding: 10px 0;text-decoration: none;font-family: "source-han-sans-japanese", sans-serif; font-weight: 500; font-style: normal; text-align: center; border-radius: 50px; color: #000;}

#sound{padding: 82px 0 0; }
#sound h3{font-size: 23px;font-family: 'Noto-Sans-JP-Medium'; text-align: center;}
#sound img{width: 134px; height: auto; margin: 52px auto 64px; display: block;}
#sound .sound_box{text-align: center;}
#sound .sound_box audio{width: 288px; height: 39px;}
@media only screen and (max-width: 640px) {

#modal.event{height: 60%;}
	#modal .close { width: 30px; height: auto; right: 30px; top: 30px;}
	#modal2 .close { width: 30px; height: auto; right: 30px; top: 30px;}
	#modal2 { height: 70%; }
	#modal .close{width: 24px;height: auto;}
	
/* 	#event_modal{display: block; } */
	#event_modal .bg_color{padding: 10px;width: 90%;height: 66%;}
	#event_modal .img_2{width: 100%; height: auto; top: -20%; left: 49%;}
	#event_modal .result{  padding: 21px 5% 25px;}
	#event_modal .result .hdr{padding: 41px 0 0 ;width: 100%; margin: 0 auto 12px; max-width: 245px;}
	#event_modal .result .hdr h2{font-size: 15px;}
	#event_modal .result .hdr h2 span{font-size: 24px; }
	#event_modal .result .main .img{padding: 0 0 11px; width: 100%;}
	#event_modal .result .main .img img{width: 100%; height: auto;	}
	#event_modal .result .main .box h3{font-size: 15px; padding: 8px 0; margin: 0 0 12px;}
	#event_modal .result .main .box p{font-size: 13px; margin: 0 0 25px;}
	#event_modal .result .main .box .clos{width: 100%; margin: 0 auto; padding: 10px 0;font-size: 13px; max-width: 130px;}

	#modal.sound{height: 46%;}
	#sound{padding: 15% 0 5%; }
	#sound h3{font-size: 18px;}
	#sound img{width: 30%; margin: 35px auto 40px; }
	#sound .sound_box audio{width: 100%; height: 39px;}
}