@charset "UTF-8";

/* toshin */
.header__lv1-util .contactBox > P.toshintext {
  margin-bottom: 20px;
}
/* toshin end */

.header__lv1 h1 {
  position: relative;
}
.header__lv1 h1 .label-hazard {
  position: absolute;
  bottom: 0;
  left: 3.5%;
  font-size: 3vw;
}
.hazard-newsBox {
  padding:60px 0;
  border-top: 9px solid #4b575e;
}
.hazard-newsBox section {
  margin:0 0 40px;
}
.hazard-newsBox section:last-child {
  margin:0;
}
.hazard-newsList {
  width:96%;
  max-width: 1200px;
  margin:0 auto;
  background:#f2f2f2;
}
.hazard-newsList h2 {
  padding:20px 20px 10px;
  font-size:30px;
  font-weight: bold;
  color:#000;
}
.hazard-newsList h2.level-red {
  background:#ff0000;
}
.hazard-newsList h2,
.hazard-newsList h2.level-yellow {
  background:#ffc000;
}
.hazard-newsList h2.level-green {
  background:#92d050;
}
.hazard-newsList .date {
  margin:10px 20px 20px 0;
  text-align: right;
}
.hazard-newsList .cont {
  padding:0 20px 20px;
}

/* 続きを読む */
.grad-wrap {
    position: relative;
}

.grad-wrap + .grad-wrap {
    margin-top: 40px;
}

.grad-trigger {
    /*ボタンのスタイルはご自由にどうぞ*/
    z-index: 2;
    position: absolute;
    right: 0;
    bottom: 0px;
    left: 0;
    width: 148px;
    margin: auto;
    padding: .5em 0;
    border-radius: 2px;
    background: #009e8f;
    color: #fff;
    font-size: 1rem;
    text-align: center;
    cursor: pointer;
    transition: .2s ease;
    box-shadow: 0 0 3px rgba(0,0,0,.3);
}

.grad-trigger:hover {
    background: #fff;
    color: #009e8f;
}

.grad-trigger::after {
    content: "続きを読む" /*クリック前のボタンのラベル*/
}

.grad-trigger .fa {
    margin-right: .5em;
}

.grad-item {
    position: relative;
    overflow: hidden;
}

.grad-item.is-hide {
    height: 160px; /*隠した後の高さ*/
}

.grad-item::before {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    content: "";
    width: 100%;
    height: 40px; /*グラデーションで隠す高さ*/
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 50%, rgba(255, 255, 255, 0.9) 50%, #fff 100%);
    background: linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 50%, rgba(255, 255, 255, 0.9) 50%, #fff 100%);
}

.grad-trigger.is-show {
    bottom: -2em;
}

.grad-trigger.is-show::after {
    content: "閉じる" /*クリック後にボタンのラベルを変える*/
}

.grad-trigger.is-show + .grad-item::before {
    display: none;
}


@media screen and (min-width: 1200px) {
  .header__lv1 h1 .label-hazard {
    font-size: 38px;
  }
}

@media screen and (max-width: 768px) {
  .header__lv1 h1 .label-hazard {
    bottom: -5px;
  }
  .hazard-newsList h2 {
    padding:10px 10px 5px;
    font-size:24px;
  }
  .hazard-newsList .date {
    margin:10px 10px 10px 0;
  }
  .hazard-newsList .cont {
    padding:0 10px 20px;
  }
}