@charset "UTF-8";
#hiro-area { margin: 116px 0 0; height: 60vh; overflow: hidden; background: url(../images/top/hero_img.jpg) no-repeat; background-position: right center; background-size: cover; }

.emergency-box { margin-bottom: 40px; background-color: #ffecec; border: 2px solid #e8373d; }
.emergency-box__title { padding: 3px 10px 2px; background-color: #e8373d; color: #fff; }

.emergency-item { margin: 20px; }
.emergency-item__title { color: #e8373d; font-size: 20px; padding: 10px 0; border-top: 1px dashed #e8373d; }

/*-------------------------------------------------------------- 　information
---------------------------------------------------------------*/
#information { background-color: #e6e6e6; padding: 50px 90px 40px; }

.information__title { font-size: 20px; font-weight: normal; }
.information__en { font-size: 14px; }
.information__archives { margin: 10px 0; font-size: 12px; }

.information-item { margin-bottom: 10px; overflow: hidden; }
.information-item__date { float: left; padding-right: 10px; width: 20%; color: #333; }
.information-item__date:hover { text-decoration: none !important; }
.information-item__title { float: right; width: 80%; }

#banner-area { padding: 40px 80px; background-color: #00245d; }

/*----------------------------------------------------
	media query
----------------------------------------------------*/
/* smart phone
-------------------------------------------------- */
@media only screen and (max-width: 589px) { #hiro-area { margin: 20% 0 0; height: 30vh; }
  /*-------------------------------------------------------------- 　information ---------------------------------------------------------------*/
  #information { padding: 10px; }
  .information-item__date { float: none; width: 100%; }
  .information-item__title { float: none; width: 100%; }
  #banner-area { padding: 20px 80px; } }
/* tablet
-------------------------------------------------- */
@media only screen and (min-width: 590px) and (max-width: 1079px) { /*-------------------------------------------------------------- 　information ---------------------------------------------------------------*/
  #information { padding: 20px 40px; } }
/* pc
-------------------------------------------------- */
@media only screen and (min-width: 1080px) { /*-------------------------------------------------------------- 　information ---------------------------------------------------------------*/ }

/*# sourceMappingURL=top.css.map */