/*
 * =====================================================
 *
 * [news]
 * お知らせ一覧
 *
 * 対応HTML：
 * /news/index.php
 *
 * =====================================================
 */


/*
 * -----------------------------------------------------
 * ページ全体
 * -----------------------------------------------------
 */

body.news .mainArtCnt {
  padding-bottom: 0;
}

body.news #firstVox > .secInner {
  padding-bottom: 110px;
}


/*
 * -----------------------------------------------------
 * lowerBase-top.phpの縦書き「News」の右側へ配置
 * -----------------------------------------------------
 */

body.news.index .newsArchive {
  padding-left: clamp(90px, 8vw, 125px);
}

body.news.index .newsArchive > .cnt {
  width: 100%;
  max-width: none;
}


/*
 * =====================================================
 *
 * [newsGrid]
 * お知らせカード一覧
 *
 * =====================================================
 */

body.news.index .newsGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 64px 28px;
  width: 100%;
  margin: 0;
  padding: 0;
}


/*
 * =====================================================
 *
 * [newsCard]
 * お知らせカード
 *
 * =====================================================
 */

body.news.index .newsCard {
  position: relative;
  min-width: 0;
  margin: 0;
  padding: 0;
}

body.news.index .newsCardLink {
  position: relative;
  display: block;
  width: 100%;
  color: #27231f;
  text-decoration: none;
}


/*
 * -----------------------------------------------------
 * カテゴリ
 * -----------------------------------------------------
 */

body.news.index .newsCardCategory {
  position: absolute;
  top: -13px;
  left: 0;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 108px;
  min-height: 34px;
  margin: 0;
  padding: 6px 16px;
  border-radius: 3px;
  background: #e9ad00;
  color: #27231f;
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.035em;
  box-sizing: border-box;
}


/*
 * -----------------------------------------------------
 * サムネイル
 * -----------------------------------------------------
 */

body.news.index .newsCardImage {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 0.82;
  margin: 0 0 18px;
  overflow: hidden;
  background: #f2f1ed;
  border: 1px solid #d8d4ce;
  box-sizing: border-box;
}

body.news.index .newsCardImage img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/*
 * 画像がない場合でもMOSらしい見た目にする
 */

body.news.index .newsCardImage::before {
  content: "MOS";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0;
  color: #e7ad4f;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(3.8rem, 4.2vw, 5.8rem);
  font-weight: 700;
  letter-spacing: -0.08em;
  transform: translate(-50%, -50%);
}


/*
 * -----------------------------------------------------
 * 日付
 * -----------------------------------------------------
 */

body.news.index .newsCardDate {
  display: block;
  margin: 0 0 10px;
  color: #5f5a54;
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.025em;
}


/*
 * -----------------------------------------------------
 * タイトル
 * -----------------------------------------------------
 */

body.news.index .newsCardTitle {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding: 0;
  color: #27231f;
  font-size: 1.55rem;
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: 0.025em;
}

body.news.index .newsCardArrow {
  flex: 0 0 auto;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.9rem;
  line-height: 1.45;
}


/*
 * =====================================================
 *
 * [newsPagination]
 * ページネーション
 *
 * =====================================================
 */

body.news.index .newsPagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 21px;
  margin-top: 80px;
}

body.news.index .newsPagination a,
body.news.index .newsPagination span {
  color: #27231f;
  text-decoration: none;
}

body.news.index .newsPaginationNumber,
body.news.index .newsPaginationArrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 6px;
  border-radius: 50%;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.8rem;
  font-weight: 400;
  line-height: 1;
  box-sizing: border-box;
}

body.news.index .newsPaginationNumber.is-current {
  background:
    linear-gradient(
      135deg,
      #ffb000 0%,
      #ff8c00 48%,
      #f15a00 100%
    );
  color: #fff;
}

body.news.index .newsPaginationArrow {
  min-width: auto;
  width: auto;
  border-radius: 0;
  font-size: 2.6rem;
}

body.news.index .newsPaginationArrow.is-disabled {
  opacity: 0.35;
  pointer-events: none;
}

body.news.index .newsPaginationEllipsis {
  font-size: 2rem;
  line-height: 1;
}


/*
 * =====================================================
 *
 * hover
 *
 * =====================================================
 */

@media only screen and (hover: hover) and (pointer: fine) and (min-width: 768px) {

  body.news.index .newsCardImage img {
    transition:
      transform 0.35s ease,
      opacity 0.35s ease;
  }

  body.news.index .newsCardTitle,
  body.news.index .newsPagination a {
    transition: opacity 0.25s linear;
  }

  body.news.index .newsCardLink:hover .newsCardImage img {
    transform: scale(1.04);
  }

  body.news.index .newsCardLink:hover .newsCardTitle,
  body.news.index .newsPagination a:hover {
    opacity: 0.6;
  }

}


/*
 * =====================================================
 *
 * タブレット
 *
 * =====================================================
 */

@media only screen and (max-width: 1100px) {

  body.news.index .newsArchive {
    padding-left: 70px;
  }

  body.news.index .newsGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 55px 24px;
  }

}


/*
 * =====================================================
 *
 * スマートフォン
 *
 * =====================================================
 */

@media only screen and (max-width: 767px) {

  body.news #firstVox > .secInner {
    padding-bottom: 75px;
  }


  /*
   * 縦書きタイトル分の左余白を解除
   */

  body.news.index .newsArchive {
    padding-left: 0;
  }


  /*
   * 2列表示
   */

  body.news.index .newsGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 42px 14px;
  }


  /*
   * カテゴリ
   */

  body.news.index .newsCardCategory {
    top: -8px;
    min-width: 76px;
    min-height: 25px;
    padding: 4px 9px;
    font-size: 1rem;
  }


  /*
   * 画像
   */

  body.news.index .newsCardImage {
    margin-bottom: 12px;
    aspect-ratio: 1 / 0.78;
  }

  body.news.index .newsCardImage::before {
    font-size: 3rem;
  }


  /*
   * 日付・タイトル
   */

  body.news.index .newsCardDate {
    margin-bottom: 5px;
    font-size: 1rem;
  }

  body.news.index .newsCardTitle {
    gap: 4px;
    font-size: 1.2rem;
    line-height: 1.65;
  }

  body.news.index .newsCardArrow {
    font-size: 1.4rem;
  }


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

  body.news.index .newsPagination {
    gap: 10px;
    margin-top: 55px;
  }

  body.news.index .newsPaginationNumber,
  body.news.index .newsPaginationArrow {
    min-width: 34px;
    height: 34px;
    font-size: 1.5rem;
  }

  body.news.index .newsPaginationArrow {
    min-width: auto;
    font-size: 2.2rem;
  }

  body.news.index .newsPaginationEllipsis {
    font-size: 1.6rem;
  }

}


/*
 * =====================================================
 *
 * 小さいスマートフォン
 *
 * =====================================================
 */

@media only screen and (max-width: 480px) {

  body.news.index .newsGrid {
    grid-template-columns: 1fr;
    gap: 45px;
  }

  body.news.index .newsCardImage {
    aspect-ratio: 1 / 0.68;
  }

}