/*====================================
お知らせ部分
=====================================*/
.archive-top {
  text-align: center;
}

.archive_h2 {
  margin-top: 28.7rem;
  font-size: 4.0rem;
  margin-bottom: 3rem;
}

.archive-border {
  width: 120rem;
  border-bottom: 0.1rem solid #000;
  margin: 0 auto;
  margin-bottom: 2.0rem;
  box-sizing: border-box;
}

.archive-underborder {
  width: 120rem;
  border-bottom: 0.1rem solid #000;
  margin: 0 auto;
  padding-bottom: 5.0rem;
  box-sizing: border-box;
}

/*====================================
カテゴリー絞り込み用
=====================================*/
.archive-filter {
  display: flex;
  gap: 1.8rem;
  font-size:1.6rem ;
  justify-content: center;
  margin-bottom: 8rem;
}

.archive-filter__link {
  color: #000;
  font-size: 1.6rem;
  text-decoration: none;
}

.archive-filter__link:hover {
  text-decoration: underline;
}

.archive-filter__link.is-active {
  text-decoration: underline;
}


/* Ajax読み込み中 */
.archive-list {
  transition: opacity 0.3s ease;
}

.archive-list.is-loading {
  opacity: 0.4;
  pointer-events: none;
}

/*====================================
archive部分
=====================================*/

.archive-card {
  display: flex;
  align-items: flex-start;
  gap: 5.0rem;
  justify-content: center;

  width: 120rem;
  margin: 0 auto 14.0rem;
}

/* --------------------
   左：画像
-------------------- */

.archive-card__image {
  /*
   * 20260828_橋口修正_代替画像が左上に寄っていた原因は、画像そのものへ中央配置の指定を
   * 書いていたためです。画像を囲う枠へ中央配置を指定することで、代替画像の上下左右に
   * 同じ余白ができ、画像枠の中央へ表示されます。
   */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 45.0rem;
  height: 30.0rem;
  flex-shrink: 0;
  /*画像を縮ませない指定*/
  border: 0.1rem solid #000;
  background-color: #FFEDD4;
  overflow: hidden;

  border-radius: 1rem;
}

.archive-card__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*アイキャッチがない時の画像*/
.archive-card__image .no-image {
  /*
   * 20260828_橋口修正_代替画像を通常のアイキャッチより一回り小さく表示します。
   * object-fit: containにより、画像を切り取らず全体が見える状態で画像枠内へ収めます。
   */
  width: 90%;
  height: auto;
  object-fit: contain;
  display: block;
}


/*
 * 20260828_橋口修正_表示前は画像を透明にして40px下へ移動させておきます。
 * スクロールして画像が画面内へ入るとJavaScriptがis-showを追加し、
 * 1秒かけて元の位置へ上がりながら表示されるフェードアップになります。
 */
.fade-up {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 1s ease,
    transform 1s ease;
}

.fade-up.is-show {
  opacity: 1;
  transform: translateY(0);
}


/* --------------------
   右：記事情報
-------------------- */

.archive-card__body {
  position: relative;
  width: 58.0rem;
  margin-top: 0;
  padding: 0 0 15rem;
  box-sizing: border-box;
}


/* 日付・カテゴリー */
.archive-card__meta h5 {
  display: flex;
  align-items: flex-start;
  /* 上端をそろえる */

  font-size: 2.0rem;

  margin-bottom: 3.5rem;
  /*日付カテゴリーとタイトルの間*/

  margin-top: 0;
  font-weight: 400;
}


/* タイトル */
.archive-card__title {
  margin: 0 0 7.5rem;
  font-size: 3.2rem;
}


/* お知らせタイトルを最大2行で省略する */
.archive-card__title a {
  display: -webkit-box;
  overflow: hidden;
  line-height: 1.4;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}


/* 本文 */
.archive-card__excerpt {
  margin: 0;
  font-size: 1.6rem;

  overflow-wrap: anywhere;
  word-break: break-word;
}


/*====================================
SPとPCの切り替え
=====================================*/
.archive_sp_only {
  display: none;
}

.archive_pc_only {
  display: block;
}

.date_space {
  padding: 0 2rem 0 0;
}


/* --------------------
   続きを読む
-------------------- */

.archive-card__more {
  position: absolute;

  left: 0;
  bottom: 0rem;
  /*続きを読むの位置*/

  display: flex;
  align-items: center;
  gap: 0.8rem;

  color: #000;
  text-decoration: none;

  font-size: 2.4rem;
}


.archive-card__arrow {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 4.5rem;
  height: 4.6rem;
}

/*hoverアクション*/
.archive-card__more:hover {
  transition: .3s;
  transform: translateX(20%);
}

/*====================================
ページネーション
=====================================*/
.pagination-pc {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2.8rem;
  margin: 5rem 0 6.3rem;
}

.pagination-pc a,
.pagination-pc span {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 4.0rem;
  height: 4.0rem;

  color: #000;
  text-decoration: none;

  font-size: 2.4rem;
}

/* 現在のページ */
.pagination-pc .current {
  color: #fff;
  background: #ff8a00;
  border-radius: 50%;
}

/* 前へ・次へ */
.pagination-pc .prev,
.pagination-pc .next {
  width: auto;
  height: auto;

  font-size: 2.4rem;
}

/*SP版のみのページネーション修正用*/
.pagination-sp {
  display: none;
}




/*====================================
SP版
=====================================*/
@media screen and (max-width: 699.98px) {


  /*====================================
お知らせ部分
=====================================*/
  .archive-top {
    text-align: center;
  }

  .archive_h2 {
    margin-top: 5.8rem;
    font-size: 2.4rem;
    margin-bottom: 3rem;
  }

  .archive-border {
    width: 35rem;
    border-bottom: 0.1rem solid #000;
    margin: 0 auto;
    margin-bottom: 2.0rem;
  }

  .archive-underborder {
    width: 35rem;
    border-bottom: 0.1rem solid #000;
    margin: 0 auto;
    padding-bottom: 5.4rem;
    box-sizing: border-box;
  }


  /*====================================
archive部分
=====================================*/

  .archive-card {
    display: block;

    width: 30rem;
    margin: 0 auto;
  }

  /* --------------------
   左：画像
-------------------- */

  .archive-card__image {
    /*
     * 20260828_橋口修正_スマートフォン用CSSでdisplay:blockが再指定され、PC側の中央配置が
     * 上書きされていたため、スマートフォン側もdisplay:flexへ統一して中央配置を維持します。
     */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30rem;
    height: 20rem;
    flex-shrink: 0;
    /*画像を縮ませない指定*/
    border: 0.1rem solid #000;
    background-color: #FFEDD4;
    overflow: hidden;
  }

  .archive-card__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }


  /*アイキャッチがない時の画像*/
  .archive-card__image .no-image {
    /*
   * 20260828_橋口修正_幅30rem・高さ20remのスマートフォン用画像枠に対し、代替画像を
   * 幅25rem・高さ15remにすることで、上下左右へ均等な余白を確保します。
   */
    width: 25rem;
    height: 15rem;
    object-fit: contain;
    display: block;
  }




  /* --------------------
   右：記事情報
-------------------- */

  .archive-card__body {
    width: 29rem;
    padding: 0 0 5rem;
    box-sizing: border-box;
  }


  /* 日付・カテゴリー */
  .archive-card__meta h5 {
    margin-top: 2rem;
    display: block;
    font-size: 2.0rem;
    margin-bottom: 3.5rem;
    /*日付カテゴリーとタイトルの間*/

    font-weight: 400;
  }




  /* タイトル */
  .archive-card__title {
    margin: 0 0 3.5rem;
    font-size: 3.2rem;
  }

  /* 本文 */

  .archive-card__excerpt {
    margin: 0;
    font-size: 1.6rem;
    margin-bottom: 6rem;
    padding-bottom: 10.1rem;
    box-sizing: border-box;

    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /*====================================
SPとPCの切り替え
=====================================*/
  .archive_sp_only {
    display: block;
  }

  .archive_pc_only {
    display: none;
  }

  /* --------------------
   続きを読む
-------------------- */
  .archive-card__more {
    display: flex;
    align-items: center;
    gap: 0.8rem;

    color: #000;
    text-decoration: none;

    font-size: 2.4rem;
    padding-bottom: 10.1rem;
  }

  .archive-card__arrow {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 2.5rem;
    height: 2.5rem;

    font-size: 1.8rem;
  }

  /*hoverアクション*/
  .archive-card__more:hover {
    transition: .3s;
    transform: translateX(20%);
  }


  /*====================================
 SP版のページネーション修正
=====================================*/
.pagination-pc {
  display: none;
}

  /*≪　5 / 8　≫のように
  archive.cssでは、PCでは非表示、SP版だけ表示させます。*/
  .pagination-sp {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.6rem;
    padding: 5rem 0rem 6.3rem;
    box-sizing: border-box;
  }

  .pagination-sp__arrow {
    flex: 0 0 4rem;
    width: 4rem;
    height: 4rem;
    display: grid;
    place-items: center;
    color: #fff;
    background-color: #ff8a00;
    border-radius: 50%;
    text-decoration: none;
  }

  .pagination-sp__status {
    min-width: 7rem;
    text-align: center;
    font-size: 1.6rem;
    white-space: nowrap;
  }

  .pagination-sp__arrow.is-disabled {
    opacity: 0.35;
    pointer-events: none;
  }
}