@charset "utf-8";


#main .page-name{ position: relative; color: #2d4f72; text-align: center; padding: 40px 5%; }
#main .page-name .en{ font-size: 30px; line-height: 1.2; color: inherit; font-family: YakuHanMP, 'EB Garamond', 'Cormorant Garamond', 'Noto Serif JP', serif; }
#main .page-name .ttl{ font-size: 22px; line-height: 1.5; color: inherit; font-weight: 400; }
#main .map-body{ margin: 0 auto; padding: 0 5% 90px; text-align: center; }
#main .map-body .map{ max-width: 1153px; margin: 0 auto; }
#main .map-body .navi{ max-width: 580px; margin: 90px auto 0; }
#main .map-body .navi a{ display: block; background: linear-gradient(to bottom, #7b90a6 0%, #405f7f 42%, #2d4f72 72%, #2d4f72 100%); color: #ffffff; text-decoration: none; font-size: 24px; line-height: 1.5; padding: 30px 0; position: relative; }
#main .map-body .navi a .icon-arrow{ position: absolute; right: 0; top: 50%; transform: translate(-30px,-50%) rotate(45deg); width: 13px; height: 13px; border: solid #ffffff; border-width: 1px 1px 0 0; }


@media screen and (max-width: 768px) {
	#main .page-name{ padding: 30px 5%; }
	#main .page-name .en{ font-size: 26px; }
	#main .page-name .ttl{ font-size: 18px; }
	#main .map-body{ padding: 0 5% 15%; }
	#main .map-body .navi{ margin: 5% auto 0; }
	#main .map-body .navi a{ font-size: 16px; padding: 20px 0; }
}




#main .map-body .navi a{ transition: opacity 0.3s; }
#main .map-body .navi a:active{ opacity: 0.7; }
@media (hover: hover){
	#main .map-body .navi a:hover{ opacity: 0.7; }
}