@charset "utf-8";

/* ===============================
NEWS PAGE
=============================== */

.news-page{
  padding:120px 0 0;
}

/* タイトル */
.news-page .news-page__head{
  text-align:center;
  margin-bottom:60px;
  margin-top:150px;
}

.news-page .news-page__title-en{
  font-family:"Karla";
  font-size:62px;
  font-weight:700;
  line-height:100%;
  color:#0186ED;
}

.news-page .news-page__title-ja{
  font-family:"Hiragino Kaku Gothic ProN", sans-serif;
  font-size:18px;
  font-weight:600;
  letter-spacing:0.05em;
  color:#0186ED;
}

/* リスト */
.news-page .news-page__list{
  margin-top:40px;
}

/* アイテム */
.news-page .news-page__item{
  display:block;
  padding:24px 0;
  border-bottom:1px solid #e5e5e5;
  text-decoration:none;
}

/* 上段 */
.news-page .news-page__meta{
  display:flex;
  align-items:center;
  gap:16px;
}

/* 日付 */
.news-page .news-page__date{
  font-family:"Karla";
  font-size:16px;
  color:#ADADAD;
  transition:0.3s;
}

/* カテゴリ */
.news-page .news-page__cat{
  font-family:"Hiragino Kaku Gothic ProN", sans-serif;
  background:#0186ED;
  color:#fff;
  padding:4px 10px;
  border-radius:16px;
  font-size:14px;
  font-weight:600;
}

/* タイトル */
.news-page .news-page__text{
  margin-top:10px;
  font-size:16px;
  font-weight:600;
  color:#484848;
  transition:0.3s;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* hover */
.news-page .news-page__item:hover .news-page__text,
.news-page .news-page__item:hover .news-page__date{
  color:#0186ED;
}

/* ===============================
ペジネーション
=============================== */

.news-page .news-page__pagination{
  margin-top:60px;
  display:grid;
  grid-template-columns:120px auto 120px;
  align-items:center;
  justify-content:center;
  column-gap:20px;
}

.news-page .news-page__pagination-side{
  display:flex;
  align-items:center;
  gap:10px;
}

.news-page .news-page__pagination-side--left{
  justify-content:flex-end;
}

.news-page .news-page__pagination-side--right{
  justify-content:flex-start;
}

.news-page .news-page__pagination-center{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}

.news-page .news-page__pagination .page-numbers{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  border:2px solid #0186ED;
  border-radius:100px;
  font-family:"Karla";
  font-weight:700;
  font-size:25px;
  line-height:100%;
  color:#0186ED;
  text-decoration:none;
  transition:0.3s;
}

.news-page .news-page__pagination .page-numbers.current{
  background:#0186ED;
  color:#fff;
}

.news-page .news-page__pagination a.page-numbers:hover{
  background:#0186ED;
  color:#fff;
}

.news-page .news-page__pagination .first,
.news-page .news-page__pagination .last{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family:"Karla";
  font-weight:500;
  font-size:20px;
  line-height:100%;
  color:#0186ED;
  text-decoration:none;
}

.news-page .news-page__pagination .prev,
.news-page .news-page__pagination .next{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:20px;
  height:20px;
  text-decoration:none;
  font-weight: 500;
  font-size: 27px;
}

.news-page .news-page__pagination .arrow{
  width:7px;
  height:12px;
  display:block;
  background:#0186ED;
  clip-path:polygon(0 0, 100% 50%, 0 100%);
}

.news-page .news-page__pagination .arrow-prev{
  transform:rotate(180deg);
}

.news-page .news-page__pagination .is-placeholder{
  visibility:hidden;
  pointer-events:none;
}

.news-page .news-page__pagination a,
.news-page .news-page__pagination span{
  color:#0186ED;
  font-family:"Karla";
}
/* ===============================
追記（First / Last）
=============================== */

.news-page .news-page__pagination .first,
.news-page .news-page__pagination .last{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin:0 5px;
  font-family:"Karla";
  font-weight:500;
  font-size:20px;
  line-height:100%;
  color:#0186ED;
  text-decoration:none;
}

/* hover */
.news-page .news-page__pagination .first:hover,
.news-page .news-page__pagination .last:hover{
  opacity:0.7;
}

/* ===============================
CONTACT
=============================== */

.news-page .contact-banner{
  margin-top:120px;
  background:#10559b;
  transition:all 0.3s ease-out;
}

.news-page .contact-banner:hover{
  background:#484848;
}

.news-page .contact-banner__inner{
  position:relative;
}

.news-page .contact-img-wrap{
  position:relative;
}

/* 共通 */
.news-page .contact-img,
.news-page .contact-img--hover{
  width:100%;
  display:block;
}

/* 通常 */
.news-page .contact-img{
  position:relative;
  z-index:1;
  transition:opacity 0.3s ease-out;
}

/* ▼ここが修正ポイント */
.news-page .contact-img--hover{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;     /* ←これ追加 */
  z-index:2;
  opacity:0;
  transition:opacity 0.3s ease-out;
}

/* 切替 */
.news-page .contact-banner:hover .contact-img--hover{
  opacity:1;
}

.news-page .contact-banner:hover .contact-img{
  opacity:1;
}
/* ===============================
SP
=============================== */

@media(max-width:768px){

  .news-page{
    padding:80px 0 0;
  }

  .news-page .news-page__title-en{
    font-size:36px;
  }

  .news-page .news-page__title-ja{
    font-size:12px;
    letter-spacing:0;
  }

  .news-page .news-page__pagination{
    grid-template-columns:90px auto 90px;
    column-gap:12px;
  }

  .news-page .news-page__pagination .first,
  .news-page .news-page__pagination .last{
    font-size:16px;
  }

  .news-page .news-page__pagination .page-numbers{
    width:36px;
    height:36px;
    font-size:20px;
  }
    
.news-page .news-page__head {
  text-align: center;
  margin-bottom: 60px;
  margin-top: 60px;
}    
    
.news-page .contact-banner__inner{
        padding:0;
    }
    
}