@charset "UTF-8";
/* ================================================
   お知らせ（投稿）専用スタイル
   対象テンプレート: home.php / category.php / index.php / single.php (#NEWS)
   ※このファイルは直接編集します（SCSSからは生成しません）
   ※デザインは構成案のみのため、文字サイズは構成案の実測値に合わせています
   ================================================ */

/* ----------------------------
    一覧レイアウト
---------------------------- */
#NEWS .news__outer {
  display: flex;
  gap: 6.4rem;
  padding-top: 8rem;
}
@media only screen and (max-width: 767px) {
  #NEWS .news__outer {
    flex-direction: column;
    gap: 4rem;
    padding-top: 6rem;
  }
}
#NEWS .news__main {
  width: calc(100% - 26.4rem);
}
@media only screen and (max-width: 767px) {
  #NEWS .news__main {
    width: 100%;
  }
}

/* ----------------------------
    カテゴリ（企業情報ページと同じ体裁）
---------------------------- */
#NEWS .index {
  width: 20rem;
  flex-shrink: 0;
  letter-spacing: -0.05em;
}
@media only screen and (max-width: 767px) {
  #NEWS .index {
    width: 100%;
  }
}
#NEWS .index__title {
  color: #0054a7;
  font-size: 1.6rem;
  line-height: 1;
  margin-bottom: 1.2rem;
}
#NEWS .list--index {
  border-top: 1px solid #DCDDDD;
}
#NEWS .list--index__link {
  display: block;
  position: relative;
  border-bottom: 1px solid #DCDDDD;
  padding: 2rem 3.4rem 2rem 2rem;
  font-size: 1.6rem;
  line-height: 1;
  transition: color 0.3s ease, background 0.3s ease;
}
#NEWS .list--index__link::after {
  content: "";
  width: 0.7rem;
  height: 1.3rem;
  position: absolute;
  top: 50%;
  right: 2rem;
  transform: translateY(-50%);
  background: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 13'%3E%3Cpath d='M1 1.2 5.8 6.5 1 11.8' fill='none' stroke='%232e2e2e' stroke-width='1.5'/%3E%3C/svg%3E") center center/contain no-repeat;
}
#NEWS .list--index__link.is--current {
  color: #0054a7;
  background: #E5EFF9;
}
#NEWS .list--index__link.is--current::after,
#NEWS .list--index__link:hover::after {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 13'%3E%3Cpath d='M1 1.2 5.8 6.5 1 11.8' fill='none' stroke='%230054a7' stroke-width='1.5'/%3E%3C/svg%3E");
}
#NEWS .list--index__link:hover {
  color: #0054a7;
}
/* デフォルト表示制御（768px未満＝スマホ想定） */
#NEWS .u-desktop {
  display: none;
}
#NEWS .u-mobile {
  display: block;
}

/* 768px以上＝PC想定 */
@media screen and (min-width: 768px) {
  #NEWS .u-desktop {
    display: block;
  }
  #NEWS .u-mobile {
    display: none;
  }
}

/* スマホ用プルダウンの簡易スタイリング */
#NEWS .index__select {
  width: 100%;
  padding: 10px 12px;
  font-size: 16px; /* iOSの自動ズーム防止用に16px以上が推奨 */
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
}
/* スマホ用プルダウンのラッパー（矢印の親要素） */
#NEWS .index__select-wrapper {
  position: relative;
  width: 100%;
}

/* 下向き矢印アイコンの追加 */
#NEWS .index__select-wrapper::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 16px;
  width: 8px;
  height: 8px;
  border-right: 2px solid #333; /* 矢印の色 */
  border-bottom: 2px solid #333;
  transform: translateY(-70%) rotate(45deg); /* ＞ を下向き（45度回転）に変更 */
  pointer-events: none; /* 矢印の上をタップしてもセレクトが開くようにする */
}

/* プルダウン本体のスタイリング */
#NEWS .index__select {
  width: 100%;
  padding: 10px 36px 10px 12px; /* 右側に矢印用の余白（36px）を確保 */
  font-size: 16px; /* iOSの自動ズーム防止 */
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
  cursor: pointer;

  /* ブラウザデフォルトの矢印を消去 */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* IE/Old Edgeのデフォルト矢印消去 */
#NEWS .index__select::-ms-expand {
  display: none;
}

/* ----------------------------
    記事一覧
---------------------------- */
#NEWS .list--news__item {
  border-top: 1px solid #DCDDDD;
}
#NEWS .list--news__item:last-child {
  border-bottom: 1px solid #DCDDDD;
}
#NEWS .list--news__link {
  display: block;
  position: relative;
  padding: 1.7rem 4rem 1.6rem 1.6rem;
  transition: background 0.3s ease;
}
#NEWS .list--news__link:hover {
  background: #F8F8F8;
}
#NEWS .list--news__link::after {
  content: "";
  width: 0.7rem;
  height: 1.1rem;
  position: absolute;
  top: 50%;
  right: 1.6rem;
  transform: translateY(-50%);
  background: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 11'%3E%3Cpath d='M1 1 5.8 5.5 1 10' fill='none' stroke='%232e2e2e' stroke-width='1.5'/%3E%3C/svg%3E") center center/contain no-repeat;
}
#NEWS .list--news__head {
  display: flex;
  align-items: center;
  gap: 1.8rem;
}
#NEWS .list--news__date {
  font-size: 1.6rem;
  line-height: 1.625;
  letter-spacing: -0.05em;
}
#NEWS .list--news__cat {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 9.4rem;
  height: 2.6rem;
  padding: 0 1.2rem;
  background: #2e2e2e;
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
}
#NEWS .list--news__title {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.625;
  margin-top: 1.2rem;
  overflow-wrap: anywhere;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media only screen and (max-width: 767px) {
  #NEWS .list--news__link {
    padding: 1.7rem 3rem 1.6rem 0;
  }
  #NEWS .list--news__link::after {
    right: 0.6rem;
  }
  #NEWS .list--news__title {
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
}
#NEWS .news__empty {
  padding: 4rem 0;
  font-size: 1.6rem;
  border-top: 1px solid #DCDDDD;
}

/* ----------------------------
    ページネーション
---------------------------- */
#NEWS .page-numbers {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-top: 4rem;
}
#NEWS .page-numbers li .page-numbers {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.4rem;
  height: 4.4rem;
  border: 1px solid #DCDDDD;
  font-size: 1.6rem;
  line-height: 1;
  transition: background 0.3s ease, color 0.3s ease;
}
#NEWS .page-numbers li .page-numbers:hover {
  background: #F8F8F8;
}
#NEWS .page-numbers li .page-numbers.current {
  background: #2e2e2e;
  border-color: #2e2e2e;
  color: #fff;
}
#NEWS .page-numbers li .prev::before,
#NEWS .page-numbers li .next::before {
  content: "";
  width: 0.7rem;
  height: 1.1rem;
  background: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 11'%3E%3Cpath d='M1 1 5.8 5.5 1 10' fill='none' stroke='%232e2e2e' stroke-width='1.5'/%3E%3C/svg%3E") center center/contain no-repeat;
}
#NEWS .page-numbers li .prev::before {
  transform: scaleX(-1);
}
#NEWS .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ----------------------------
    記事詳細
---------------------------- */
#NEWS.main--single {
  padding-top: 15.8rem;
}
@media only screen and (max-width: 767px) {
  #NEWS.main--single {
    padding-top: 9rem;
  }
}
#NEWS .article--single {
  max-width: 100rem;
  margin-left: auto;
  margin-right: auto;
}
#NEWS .article--single__head {
  display: flex;
  align-items: center;
  gap: 1.8rem;
}
#NEWS .article--single__date {
  font-size: 1.6rem;
  line-height: 1.625;
  letter-spacing: -0.05em;
}
#NEWS .article--single__cat {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 9.4rem;
  height: 2.6rem;
  padding: 0 1.2rem;
  background: #2e2e2e;
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
}
#NEWS .article--single__title {
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 1.4;
  overflow-wrap: anywhere;
  margin-top: 1.2rem;
  padding-bottom: 2.1rem;
  border-bottom: 1px solid #DCDDDD;
}
@media only screen and (max-width: 767px) {
  #NEWS .article--single__title {
    font-size: 2.4rem;
  }
}
#NEWS .article--single__content {
  margin-top: 4.2rem;
  font-size: 1.6rem;
  line-height: 1.75;
  overflow-wrap: anywhere;
}
#NEWS .article--single__content p + p {
  margin-top: 2.8rem;
}
#NEWS .article--single__content a {
  color: #0054a7;
  text-decoration: underline;
}
#NEWS .article--single__content a:hover {
  text-decoration: none;
}
#NEWS .article--single__back {
  max-width: 100rem;
  margin: 6rem auto 0;
  text-align: center;
}
#NEWS .btn--back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 25.6rem;
  height: 5rem;
  background: #2e2e2e;
  color: #fff;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
  transition: background 0.3s ease;
}
#NEWS .btn--back:hover {
  background: #000;
}
#NEWS .btn--back::after {
  content: "";
  width: 0.7rem;
  height: 1.1rem;
  position: absolute;
  top: 50%;
  right: 2.4rem;
  transform: translateY(-50%);
  background: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 11'%3E%3Cpath d='M1 1 5.8 5.5 1 10' fill='none' stroke='%23ffffff' stroke-width='1.5'/%3E%3C/svg%3E") center center/contain no-repeat;
}