@charset "utf-8";
/* ===================================================================
   news.css — お知らせ一覧／詳細
   =================================================================== */

/* ==============================
   一覧
   ============================== */
.newslist {
  padding: clamp(40px, 6vw, 72px) var(--pad-inline) clamp(48px, 7vw, 88px);
}

.newslist__inner {
  max-width: var(--container);
  margin-inline: auto;
}

.newslist__items {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.newslist__item {
  background: var(--color-white);
  border-left: 5px solid;
  border-image: linear-gradient(180deg, var(--color-navy), var(--color-red-dark)) 1;
  transition: transform .25s ease, box-shadow .25s ease;
}

.newslist__item:hover {
  transform: translateX(4px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .1);
}

.newslist__link {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.4vw, 26px);
  padding: clamp(18px, 2.4vw, 24px) clamp(20px, 3vw, 30px);
}

.newslist__date {
  flex: 0 0 auto;
  font-weight: 700;
  font-size: clamp(13px, 1.3vw, 15px);
  color: var(--color-navy);
  letter-spacing: .04em;
}

.newslist__title {
  font-size: clamp(14px, 1.5vw, 17px);
  line-height: 1.7;
  flex: 1 1 auto;
}

/* 添付・外部リンクのしるし */
.newslist__badge {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  padding: 3px 8px;
  color: var(--color-white);
  background: var(--color-navy);
}

.newslist__badge--pdf {
  background: var(--color-red);
}

/* 記事がないとき */
.newslist__empty {
  background: var(--color-white);
  padding: clamp(40px, 6vw, 64px) 24px;
  text-align: center;
  font-size: clamp(14px, 1.4vw, 16px);
  color: var(--color-ink);
}

/* ==============================
   ページャ
   ============================== */
.pager {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: clamp(36px, 5vw, 56px);
}

.pager__item {
  min-width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-inline: 12px;
  background: var(--color-white);
  color: var(--color-ink);
  font-weight: 700;
  font-size: 14px;
  transition: background-color .2s ease, color .2s ease;
}

.pager__item:hover {
  background: var(--color-gray);
}

.pager__item.is-current {
  background: var(--color-navy);
  color: var(--color-white);
  pointer-events: none;
}

.pager__item.is-disabled {
  opacity: .35;
  pointer-events: none;
}

/* ==============================
   詳細
   ============================== */
.newsdetail {
  padding: clamp(40px, 6vw, 72px) var(--pad-inline) clamp(48px, 7vw, 88px);
}

.newsdetail__inner {
  max-width: 880px;
  margin-inline: auto;
  background: var(--color-white);
  padding: clamp(28px, 4.5vw, 64px);
  border-top: 5px solid;
  border-image: linear-gradient(90deg, var(--color-red), var(--color-navy)) 1;
}

.newsdetail__meta {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: clamp(12px, 1.2vw, 14px);
  font-weight: 700;
  color: var(--color-navy);
  letter-spacing: .04em;
  margin-bottom: 14px;
}

.newsdetail__updated {
  color: var(--color-gray);
}

.newsdetail__title {
  font-family: var(--font-title);
  font-size: clamp(20px, 2.6vw, 30px);
  font-weight: 700;
  line-height: 1.5;
  margin: 0 0 clamp(24px, 3.5vw, 36px);
  padding-bottom: clamp(18px, 2.5vw, 26px);
  border-bottom: 1px solid var(--color-bg-gray);
}

/* --- 本文（管理画面のWYSIWYGが出力するHTML） --- */
.newsdetail__body {
  font-size: clamp(14px, 1.5vw, 16px);
  line-height: 2;
}

.newsdetail__body > * + * {
  margin-top: 1.4em;
}

.newsdetail__body h2 {
  font-size: clamp(17px, 2vw, 22px);
  font-weight: 700;
  padding-left: 14px;
  border-left: 4px solid;
  border-image: linear-gradient(180deg, var(--color-navy), var(--color-red-dark)) 1;
  line-height: 1.5;
}

.newsdetail__body h3 {
  font-size: clamp(15px, 1.8vw, 19px);
  font-weight: 700;
  color: var(--color-navy);
  line-height: 1.6;
}

.newsdetail__body h4 {
  font-size: clamp(14px, 1.6vw, 17px);
  font-weight: 700;
}

.newsdetail__body a {
  color: var(--color-navy);
  text-decoration: underline;
  text-underline-offset: .2em;
}

.newsdetail__body a:hover {
  color: var(--color-red);
}

.newsdetail__body ul,
.newsdetail__body ol {
  padding-left: 1.6em;
}

.newsdetail__body ul {
  list-style: disc;
}

.newsdetail__body ol {
  list-style: decimal;
}

.newsdetail__body li + li {
  margin-top: .5em;
}

.newsdetail__body blockquote {
  margin-inline: 0;
  padding: 1em 1.4em;
  background: var(--color-bg-gray);
  border-left: 4px solid var(--color-gray);
  font-size: .95em;
}

.newsdetail__body hr {
  border: 0;
  height: 1px;
  background: var(--color-bg-gray);
}

.newsdetail__body table {
  width: 100%;
  border-collapse: collapse;
  font-size: .95em;
}

.newsdetail__body th,
.newsdetail__body td {
  border: 1px solid var(--color-bg-gray);
  padding: .7em 1em;
  text-align: left;
  vertical-align: top;
}

.newsdetail__body th {
  background: var(--color-bg-gray);
  font-weight: 700;
  white-space: nowrap;
}

.newsdetail__body img {
  height: auto;
}

/* --- 添付ファイル・関連リンク --- */
.newsdetail__attachments {
  margin-top: clamp(32px, 4.5vw, 48px);
  padding-top: clamp(24px, 3.5vw, 32px);
  border-top: 1px solid var(--color-bg-gray);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.newsdetail__file {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  align-self: flex-start;
  padding: 14px 22px;
  background: var(--color-bg-gray);
  font-weight: 700;
  font-size: clamp(13px, 1.4vw, 15px);
  transition: background-color .2s ease, color .2s ease;
}

.newsdetail__file:hover {
  background: var(--color-navy);
  color: var(--color-white);
}

.newsdetail__file::before {
  content: "PDF";
  font-size: 11px;
  letter-spacing: .06em;
  background: var(--color-red);
  color: var(--color-white);
  padding: 3px 7px;
}

.newsdetail__file--link::before {
  content: "LINK";
  background: var(--color-navy);
}

/* --- 前後の記事・一覧へ戻る --- */
.newsnav {
  max-width: 880px;
  margin: clamp(32px, 4.5vw, 48px) auto 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  align-items: center;
}

.newsnav__side {
  font-size: clamp(12px, 1.3vw, 14px);
  color: var(--color-ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.newsnav__side:hover {
  color: var(--color-red);
}

.newsnav__side--next {
  text-align: right;
}

.newsnav__back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 14px 30px;
  background: var(--color-ink);
  color: var(--color-white);
  font-weight: 700;
  font-size: clamp(13px, 1.4vw, 15px);
  letter-spacing: .06em;
  white-space: nowrap;
  transition: background-color .2s ease;
}

.newsnav__back:hover {
  background: var(--color-navy);
}

/* ==============================
   トップページ「お知らせ一覧を見る」
   ============================== */
.news__more {
  display: flex;
  justify-content: center;
  margin-top: -30px;
  margin-bottom: 56px;
}

.news__more-link {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 16px 40px;
  background: var(--color-white);
  color: var(--color-ink);
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(14px, 1.5vw, 17px);
  letter-spacing: .06em;
  border-bottom: 3px solid transparent;
  transition: color .25s ease, background-color .25s ease;
}

.news__more-link:hover {
  background: var(--color-navy);
  color: var(--color-white);
}

/* ==============================
   レスポンシブ
   ============================== */
@media (width <=760px) {
  .newslist__link {
    flex-wrap: wrap;
    gap: 8px 12px;
  }

  .newslist__title {
    flex: 1 0 100%;
    order: 3;
  }

  .newslist__arrow {
    margin-left: auto;
  }

  .newsnav {
    grid-template-columns: 1fr;
  }

  .newsnav__side,
  .newsnav__side--next {
    text-align: center;
  }

  .newsnav__back {
    order: -1;
  }

  .news__more {
    margin-top: -20px;
    margin-bottom: 40px;
  }
}

/* ===================================================================
   お知らせページのメインビジュアル
   通常の下層ページ（min-height: calc(100vh - 200px)）より
   大幅に低くし、一覧・詳細をすぐ読める高さにしています
   =================================================================== */
.business__hero.business__hero--news {
  min-height: 0;
  height: auto;
  align-items: center;
}

.business__hero--news .business__hero-inner {
  padding-block: clamp(22px, 3.2vw, 40px);
}

.business__hero--news .business__hero-title {
  margin-bottom: 4px;
  font-size: clamp(1.35rem, 1rem + 1.8vw, 2.4rem);
}

.business__hero--news .business__hero-lead {
  font-size: clamp(12px, 0.7rem + .4vw, 1rem);
  letter-spacing: .08em;
}

@media (width <=760px) {
  .business__hero.business__hero--news {
    min-height: 0;
    padding-top: 0;
  }

  .business__hero--news .business__hero-inner {
    padding-block: 18px;
  }
}

/* ===================================================================
   一覧の矢印（白背景のためインラインSVGを currentColor で表示）
   =================================================================== */
.newslist__arrow {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  color: var(--color-navy);
  transition: transform .25s ease;
}

.newslist__link:hover .newslist__arrow {
  transform: translateX(4px);
}

/* ===================================================================
   トップページ「お知らせ一覧を見る」
   矢印は非オンマウス時も見えるよう、文字色に追従させています
   =================================================================== */
.news__more-link .icon-arrow {
  color: var(--color-navy);
  transition: color .25s ease, transform .25s ease;
}

.news__more-link:hover .icon-arrow {
  color: var(--color-white);
  transform: translateX(4px);
}