@charset "UTF-8";
/* =========================================================
  お知らせ（microCMS）
  トップのNEWS欄・お知らせ一覧・記事詳細で使用
  色・書体は style.css の変数（--navy / --orange など）を使用
========================================================= */

/* ---------------------------------------------------------
  カード（トップ・一覧・関連記事で共通）
--------------------------------------------------------- */
.c-newsGrid {
  display: grid;
  gap: 16px;
}
.c-newsCard { min-width: 0; }
.c-newsCard__link {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  height: 100%;
  padding: 12px;
  border-radius: 10px;
  background: var(--white);
  box-shadow: 0 0 0 1px rgba(7, 40, 86, 0.08);
  transition: box-shadow 0.3s, transform 0.3s;
}
.c-newsCard__link:hover { opacity: 1; box-shadow: 0 0 0 2px var(--orange); }
.c-newsCard__img {
  overflow: hidden;
  border-radius: 6px;
  aspect-ratio: 1200 / 630;
  background: var(--beige);
}
.c-newsCard__img picture { display: block; width: 100%; height: 100%; }
.c-newsCard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.c-newsCard__link:hover .c-newsCard__img img { transform: scale(1.05); }
.c-newsCard__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.c-newsCard__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  font-size: 12px;
  line-height: 1.4;
}
.c-newsCard__meta time {
  font-family: var(--font-en);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--navy);
}
.c-newsCard__cat {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--orange);
  color: var(--white);
  font-size: 11px;
  letter-spacing: 0.06em;
}
.c-newsCard__title {
  display: -webkit-box;
  overflow: hidden;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 0.04em;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

@media (min-width: 768px) {
  .c-newsGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .c-newsCard__link { grid-template-columns: 1fr; gap: 0; padding: 0; overflow: hidden; }
  .c-newsCard__img { border-radius: 0; }
  .c-newsCard__body { gap: 10px; padding: 18px 18px 22px; }
  .c-newsCard__title { font-size: 15px; -webkit-line-clamp: 2; }
}
@media (min-width: 1024px) {
  .c-newsGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.c-newsEmpty {
  grid-column: 1 / -1;
  padding: 40px 20px;
  border-radius: 10px;
  background: var(--white);
  text-align: center;
  font-size: 14px;
  line-height: 1.9;
}

/* 読み込み中（トップ） */
.c-newsCard--skeleton .c-newsCard__img,
.c-newsCard--skeleton .c-newsCard__title,
.c-newsCard--skeleton .c-newsCard__meta {
  border-radius: 4px;
  background: linear-gradient(90deg, #eceae2 0%, #f6f4ee 50%, #eceae2 100%);
  background-size: 200% 100%;
  animation: newsSkeleton 1.4s ease-in-out infinite;
}
.c-newsCard--skeleton .c-newsCard__meta { width: 60%; height: 14px; }
.c-newsCard--skeleton .c-newsCard__title { height: 40px; }
@keyframes newsSkeleton { to { background-position: -200% 0; } }

/* ---------------------------------------------------------
  トップ NEWS欄
--------------------------------------------------------- */
.p-newsTop {
  padding-block: 70px 76px;
  background-color: var(--beige);
  background-image: url("../img/project/menu/bg_pattern_wave_beige.svg");
  background-size: 142px auto;
}
.p-newsTop .c-newsGrid { margin-top: 36px; }
.p-newsTop__more { margin-top: 36px; text-align: center; }
.p-newsTop__more .c-btn { min-width: 260px; }

@media (min-width: 768px) {
  .p-newsTop { padding-block: 100px 110px; }
  .p-newsTop .c-newsGrid { margin-top: 60px; }
  .p-newsTop__more { margin-top: 56px; }
}
@media (min-width: 1024px) {
  .p-newsTop .c-newsGrid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
}

/* ---------------------------------------------------------
  下層ページ共通
--------------------------------------------------------- */
.p-newsPage { padding-top: var(--header-h); }
.p-newsHead {
  padding-block: 40px 44px;
  background: linear-gradient(to bottom, var(--navy) 0, var(--navy-deep) 100%);
}
.p-newsHead .c-head__icon { width: 120px; }
.p-newsHead .c-head__jp { margin-top: 14px; }

.c-breadcrumb { background: var(--cream); font-size: 12px; }
.c-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 0;
  padding-block: 12px;
}
.c-breadcrumb li { display: flex; align-items: center; min-width: 0; }
.c-breadcrumb li + li::before {
  content: "";
  width: 6px;
  height: 6px;
  margin: 0 12px 0 10px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
  flex: none;
}
.c-breadcrumb a { text-decoration: underline; text-underline-offset: 3px; }
.c-breadcrumb span {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

@media (min-width: 768px) {
  .p-newsHead { padding-block: 56px 64px; }
  .p-newsHead .c-head__icon { width: 170px; }
  .p-newsHead .c-head__jp { margin-top: 24px; }
  .c-breadcrumb { font-size: 13px; }
}

/* ---------------------------------------------------------
  お知らせ一覧
--------------------------------------------------------- */
.p-newsList {
  padding-block: 44px 80px;
  background-color: var(--beige);
  background-image: url("../img/project/menu/bg_pattern_wave_beige.svg");
  background-size: 142px auto;
}
.p-newsList__title {
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.08em;
  text-align: center;
}
.c-newsCats { margin: 22px 0 32px; }
.c-newsCats ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.c-newsCats a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 4px 16px;
  border: 1px solid var(--navy);
  border-radius: 999px;
  background: var(--white);
  color: var(--navy);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.c-newsCats a[aria-current="page"] { background: var(--navy); color: var(--white); }

/* ページ送り */
.c-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 44px;
}
.c-pager ol { display: flex; gap: 6px; }
.c-pager a,
.c-pager span,
.c-pager .is-gap {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-family: var(--font-en);
  font-weight: 600;
  font-size: 15px;
}
.c-pager a { background: var(--white); color: var(--navy); }
.c-pager span[aria-current] { background: var(--navy); color: var(--white); }
.c-pager .c-pager__prev,
.c-pager .c-pager__next { position: relative; background: var(--orange); }
.c-pager .c-pager__prev::before,
.c-pager .c-pager__next::before {
  content: "";
  width: 8px;
  height: 8px;
  border-top: 2px solid var(--white);
  border-right: 2px solid var(--white);
}
.c-pager .c-pager__prev::before { transform: translateX(2px) rotate(-135deg); }
.c-pager .c-pager__next::before { transform: translateX(-2px) rotate(45deg); }

@media (min-width: 768px) {
  .p-newsList { padding-block: 64px 120px; }
  .p-newsList__title { font-size: 26px; }
  .c-newsCats { margin: 32px 0 48px; }
  .c-newsCats a { font-size: 14px; }
  .c-pager { margin-top: 64px; }
}

/* ---------------------------------------------------------
  記事詳細
--------------------------------------------------------- */
.p-newsArticle { padding-block: 44px 64px; }
.p-newsArticle__inner { max-width: calc(800px + 40px); }
.p-newsArticle__draft {
  margin-bottom: 20px;
  padding: 10px 14px;
  border-radius: 6px;
  background: #fff3cd;
  font-size: 13px;
}
.p-newsArticle__head { padding-bottom: 20px; border-bottom: 1px dashed var(--line); }
.p-newsArticle__title {
  margin-top: 12px;
  font-weight: 700;
  font-size: 22px;
  line-height: 1.55;
  letter-spacing: 0.06em;
  text-wrap: balance;
}
.p-newsArticle__eyecatch {
  overflow: hidden;
  margin-top: 28px;
  border-radius: 10px;
}
.p-newsArticle__eyecatch img { width: 100%; height: auto; }
.p-newsArticle .c-prose { margin-top: 32px; }
.p-newsArticle__back { margin-top: 48px; text-align: center; }
.p-newsArticle__back .c-btn { min-width: 260px; }

.p-newsRelated {
  padding-block: 56px 80px;
  background-color: var(--beige);
  background-image: url("../img/project/menu/bg_pattern_wave_beige.svg");
  background-size: 142px auto;
}
.p-newsRelated__title {
  margin-bottom: 28px;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.08em;
  text-align: center;
}

@media (min-width: 768px) {
  .p-newsArticle { padding-block: 64px 96px; }
  .p-newsArticle__title { font-size: 28px; }
  .p-newsArticle__eyecatch { margin-top: 36px; }
  .p-newsArticle .c-prose { margin-top: 44px; }
  .p-newsArticle__back { margin-top: 64px; }
  .p-newsRelated { padding-block: 80px 120px; }
  .p-newsRelated__title { margin-bottom: 40px; font-size: 24px; }
}

/* ---------------------------------------------------------
  本文（microCMSのリッチエディタで入力したHTML）
--------------------------------------------------------- */
.c-prose {
  font-size: 15px;
  line-height: 2;
  letter-spacing: 0.05em;
  overflow-wrap: anywhere;
}
.c-prose > * + * { margin-top: 1.4em; }
.c-prose h2 {
  margin-top: 2.4em;
  padding: 10px 0 10px 16px;
  border-left: 6px solid var(--orange);
  background: var(--cream);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.6;
  letter-spacing: 0.06em;
}
.c-prose h3 {
  margin-top: 2em;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--navy);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.6;
}
.c-prose h4 { margin-top: 1.8em; font-weight: 700; font-size: 16px; color: var(--orange); }
.c-prose h2:first-child, .c-prose h3:first-child { margin-top: 0; }
.c-prose a { color: var(--orange); text-decoration: underline; text-underline-offset: 3px; }
.c-prose u { text-decoration: none; }
.c-prose strong { font-weight: 700; background: linear-gradient(transparent 62%, rgba(245, 229, 170, 0.9) 62%); }
.c-prose ul, .c-prose ol { display: grid; gap: 6px; padding-left: 1.4em; }
.c-prose ul { list-style: disc; }
.c-prose ol { list-style: decimal; }
.c-prose li::marker { color: var(--orange); }
.c-prose picture { display: block; }
.c-prose figure img, .c-prose > p img { margin-inline: auto; border-radius: 8px; height: auto; }
.c-prose figcaption { margin-top: 8px; font-size: 13px; color: #6b6b6b; text-align: center; }
.c-prose blockquote {
  padding: 16px 20px;
  border-left: 4px solid var(--beige);
  background: var(--gray-bg);
  font-size: 14px;
}
.c-prose hr { border: 0; border-top: 1px dashed var(--line); }
.c-prose table { display: block; overflow-x: auto; border-collapse: collapse; font-size: 14px; }
.c-prose th, .c-prose td { padding: 10px 14px; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.c-prose th { background: var(--cream); font-weight: 700; white-space: nowrap; }
.c-prose iframe { max-width: 100%; }
.c-prose code { padding: 2px 6px; border-radius: 4px; background: var(--gray-bg); font-size: 0.9em; }

@media (min-width: 768px) {
  .c-prose { font-size: 16px; }
  .c-prose h2 { font-size: 22px; padding-left: 20px; }
  .c-prose h3 { font-size: 19px; }
}

/* 下層ページではスマホ下部ボタンの分だけ余白を確保 */
@media (max-width: 1099px) {
  body.is-sub .l-footer { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
}

/* フッターメニューに「お知らせ」が増えたので6列に */
@media (min-width: 768px) {
  .l-footer__nav { grid-template-columns: repeat(6, auto); gap: 12px 22px; }
}
@media (max-width: 767px) {
  .l-footer__nav { grid-template-columns: repeat(2, auto); }
}