@charset "utf-8";
#modal{padding: 35px 26px 0px;}
#modal h1{font-size: 30px; text-align: center;font-family: 'Noto-Sans-JP-Bold'; line-height: 180%;}
#modal .modal_inner{}
#modal .youtube{padding: 45% 0 0; position: relative; width: 80%; height: auto; margin: 30px auto 0;}
#modal .youtube iframe{width: 100%; height: 100%; position: absolute; top: 0px;}
#modal .img_box{width: 80%; height: auto;margin: 30px auto 0;}
#modal .img_box img{width: 100%; height: auto;}
#modal p.text{width: 80%; margin: 0 auto; line-height: 200%; padding: 30px 0 0; font-size: 16px;}
#modal .main_box{position: relative; width: 80%; max-width: 580px; height: auto; margin: 30px auto 0;}
#modal .main_box img{width: 100%;}
/* #modal .main_box:before{content: ""; display: block; width: 100%; height: auto; padding: 56.25% 0 0; background: #000;} */

#modal .flex_link{display: flex;align-items: center; padding: 56px 0 0;}
#modal .flex_link a{ display: block; position: relative; text-decoration: none; border-radius: 150px; background: #ed6454; position: relative; z-index: 1;text-align: center; padding: 13px 0 14px;box-shadow: 0 4px 0 #a03529; transition: 0.5s;}
#modal .flex_link a.thumb-hover{ transform: translateY(4px); box-shadow: none;}
#modal .flex_link a span{font-size: 17px; display: inline-block;color: #fff; line-height: 180%; font-family: 'Noto-Sans-JP-Medium';}



#modal.modal_company_bulletin .flex_link a{width: 47%; margin-bottom: 21px; }
#modal.modal_company_bulletin .flex_link{display: flex;align-items: center;flex-wrap: wrap; padding: 34px 0 0;width: 80%; margin: 0 auto;}
#modal.modal_company_bulletin .flex_link a:not(:nth-child(2n)){margin-right: 6%;}
#modal.modal_company_bulletin .flex_link a.link_1 span{background: url(../images/map/welcome/icn_10.svg) no-repeat center left; background-size: 19px; padding: 0 10px 0 35px;line-height: 125%;}
#modal.modal_company_bulletin .flex_link a.link_2 span{background: url(../images/map/welcome/icn_11.svg) no-repeat center left; background-size: 18px; padding: 0 10px 0 35px;line-height: 125%;}
#modal.modal_company_bulletin .flex_link a.link_3 span{background: url(../images/map/welcome/icn_9.svg) no-repeat center left; background-size: 25px; padding: 0 10px 0 30px;line-height: 125%;}
#modal.modal_company_bulletin .flex_link a.link_4 span{background: url(../images/map/welcome/icn_8.svg) no-repeat center left; background-size: 20px; padding: 0 10px 0 30px;line-height: 125%;}


@media only screen and (max-width: 768px) {
	#modal{padding: 30px 5% 0;}
	#modal h1{font-size: 20px; }
	#modal .youtube{margin: 20px auto 0; padding: 45% 0 0;}
	#modal .img_box{margin: 20px auto 0; }
	 
	#modal .flex_link{display: flex; flex-wrap: wrap; padding: 28px 0 0;}
	#modal .flex_link a{ padding: 9px 0 10px;}
	#modal .flex_link a span{font-size: 13px;}
	#modal .main_box{width: 100%; margin: 20px auto 0;}
	#modal p.text{width: 100%; font-size: 14px; padding: 20px 0 0;}

	
	/* ------------------------ example ------------------------ */
	#modal.modal_company_bulletin .flex_link a{width: 49%; margin-bottom: 5%;}
	#modal.modal_company_bulletin .flex_link{width: 100%; padding: 28px 0 0;}
	#modal.modal_company_bulletin .flex_link a:not(:nth-child(2n)){margin-right: 2%;}
	#modal.modal_company_bulletin .flex_link a span{line-height: 140%; font-size: 11px;}
	#modal.modal_company_bulletin .flex_link a span br{display: inline-block;}
	#modal.modal_company_bulletin .flex_link a.link_1 span{background: url(../images/map/welcome/icn_10.svg) no-repeat center left; background-size: 19px; padding: 0 5px 0px 27px; }
	#modal.modal_company_bulletin .flex_link a.link_2 span{background: url(../images/map/welcome/icn_11.svg) no-repeat center left; background-size: 18px; padding: 0 5px 0px 27px;}
	#modal.modal_company_bulletin .flex_link a.link_3 span{background: url(../images/map/welcome/icn_9.svg) no-repeat center left; background-size: 25px; padding: 0 5px 0px 30px;}
	#modal.modal_company_bulletin .flex_link a.link_4 span{background: url(../images/map/welcome/icn_8.svg) no-repeat center left; background-size: 20px; padding: 0 5px 0px 27px;}
}