#modal { display: none; position: fixed;  z-index: 999; }
#modal,
#modal .overlay_2,
#modal .overlay { width: 100%; height: 100%; left: 0; top: 0; }

#modal .modal-inner { width: 92%; max-width: 1103px; height: 80%; margin: auto; left: 0; top: 0; bottom: 0; right: 0; position: absolute; z-index: 2; }

#modal.letures .modal-inner{max-width: 826px; max-height: 886px;}
#modal.archive .modal-inner{max-width: 1152px; height: 90%;}
#modal.credit .modal-inner{max-width: 736px; max-height: 686px;}
#modal.my_page .modal-inner{max-width: 939px; height: 90%:;}
#modal.archive.stop_modal .modal-inner{max-height: 752px;}
#modal.news .modal-inner{max-width: 1103px;}
#modal.schedule .modal-inner{max-width:1103px;}
#modal.quiz .modal-inner,
#modal.quiz-page .modal-inner{max-width: 826px; max-height: 1103px; height: 90%;}

#modal .overlay ,
#modal .overlay_2{ z-index: 1; position: absolute; background: rgba(0, 0, 0, 0.7); cursor: pointer; }
#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; }

#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; }


#modal.reservation .modal-inner{max-width: 826px; max-height: 786px;}

#map .pin.pos_box{max-width: 200px; border: 3px solid #00486E; background: #fff; border-radius: 15px;transform: translateX(-50%); top: inherit; opacity: 0; pointer-events: none; transition: 0.5s; width: 22%;}
#map .pos_box.object-near{display: block !important; opacity: 1 !important; pointer-events: auto; transition: 0.5s;}

#map .pos_box_1 { left: 91.3%; bottom: 60.6%;}
#map .pos_box_2 { left: 46.5%; bottom: 73.6%;}
#map .pos_box_3 { left: 50%; bottom: 70.6%;}
#map .pos_box_6 { left: 48%; bottom: 81.6%;}
#map .pos_box_7 { left: 25.5%; bottom: 67.6%;}
#map .pos_box_8 { left: 41.4%; bottom: 78.5%;}

#map .pos_box a{color: #000;padding: 5% 5% 8%;}
#map .pos_box img { display: block; width: 100%; height: auto; margin-bottom: 3%;}
#map .pos_box h2{text-align: center;font-size: 16px; color: #00486E;font-family: 'Noto-Sans-JP-Medium'; line-height: 140%;}
#map .pos_box .link_pos_box{text-align: center;padding: 4% 0 0;}
#map .pos_box .link_pos{display: inline-block; color: #919191; font-size: 14px; position: relative; font-family: 'Noto-Sans-JP-Medium'; padding: 0 6%;}
#map .pos_box .link_pos span{position: absolute; transform: rotateZ(-45deg) translateY(-50%); width: 6px; height: 6px; border-bottom: 1px solid #00486E; border-right: 1px solid #00486E; right: 0px; top: 50%;}


/* ------------------------------------------------------------ slide_modal */

#slide-modal { transition: 0.5s ease-in-out; left: -100%; position: fixed; top: 0; width: 100%; height: 100%; z-index: 999; }
#slide-modal.open { left: 0%; }
#slide-modal .overlay { position: absolute; z-index: 0; width: 100%; height: 100%; left: 0; top: 0; cursor: pointer; }
#slide-modal .inner { max-width: 800px; position: relative; width: 88%; left: 0; top: 0; height: 100%; background: #fff;  }
#slide-modal .inner .close { position: absolute; top: 30px; left: 20px; z-index: 1; }
#slide-modal .inner iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; z-index: 0; }



/* ------------------------------------------------------------ welcome model back btn ------------------------------------------------------------ */
.modal_back-welcome{position: absolute; top: 22px; left: 26px;z-index: 1;background: #FFF;border-radius: 7px; cursor: pointer; width: 90px; box-sizing: border-box; border: 1px solid #D5D5D5; text-align: right; padding: 14px 18px;}
.modal_back-welcome .backbtn { display: flex; justify-content: space-between; align-items: center; color: #000;}
.modal_back-welcome .backbtn:before { content: ''; display: inline-block; width: 9px; height: 9px; border-bottom: 2px solid #00486E; border-left: 2px solid #00486E; transform: rotate(45deg);}



@media only screen and (max-width: 768px) {
	
	#modal.letures .modal-inner{ height: 90%;max-height: 690px;}
	#modal.news .modal-inner{height: 90%;}
	#modal.schedule .modal-inner{height: 90%;}
	#modal.credit .modal-inner{max-height: 560px;}
	#modal.archive.stop_modal .modal-inner{max-height: 100%;}
	#modal.news .modal-inner{height: 80%;}
	#modal .close { width: 30px; height: auto; right: 20px; top: 20px;}
	#modal2 .close { width: 30px; height: auto; right: 20px; top: 20px;}
	#modal2 { height: 70%; }
	#youtube_modal .close { width: 30px; height: auto; }
	
    .modal_back-welcome{ padding: 10px;top: 15px;left: 15px;}
    .modal_back-welcome img{width: 20px;}
    
    
    #modal.reservation .modal-inner{max-height: 90%;}
	
	
	#map .pos_box_6 { left: 48%; bottom: 75.6%;}
	
	#map .pos_box a{color: #000;padding: 5% 5% 8%;}
	#map .pos_box img { display: block; width: 100%; height: auto; margin-bottom: 4%;}
	#map .pos_box h2{font-size: 0.9em;}
	#map .pos_box .link_pos_box{text-align: center;padding: 4% 0 0;}
	#map .pos_box .link_pos{ font-size: 0.7em; padding: 0 6%;}
	#map .pos_box .link_pos span{ width: 4px; height: 4px;}
	
	
}

@media only screen and (min-device-width: 375px) and (max-device-width: 1000px) and (orientation: landscape) {
	.modal_back-welcome{ top: 32px; left: 36px; }
}