@charset "utf-8";

/* ==========================================================================
   News（アーカイブ／詳細）
   Figma: News一覧 5383:3179 / News modal 5383:3895 / SP 5383:8949
   PC 1025px+ / Tab -1024px / SP -767px
   ========================================================================== */

.news {
  width: 100%;
  padding: 0 0 12rem;
}

/* 見出し ---------------------------------------------------------------- */
.news__head {
  display: flex;
  flex-direction: column;
  gap: 4rem;
  width: 100%;
  /* 左右は .news__layout の padding-left と同じ比率（120/1440） */
  padding: 4rem 8.3333% 0;
  margin-bottom: 6rem;
}

.news__head-title {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* custom_breadcrumbs() が返す .breadcrumbsWrap は素通しにする
   （中の .breadcrumbs に style.css のスタイルが当たる） */
.news__head .breadcrumbsWrap {
  width: 100%;
}

.news .pageTitle {
  font-size: 4.8rem;
  line-height: 1.28;
  font-weight: 400;
  color: #192E34;
}

.news__filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem;
  padding: 0;
  list-style: none;
}

/* 2カラム（左：一覧／右：詳細パネル） ---------------------------------- */
/* 左右カラムは比率のみで組む（絶対値を混ぜると幅が狭いときに破綻するため）。
   1440基準：左余白120 / 一覧540 / 溝120 / パネル660（右端まで）＝ 100%
     padding-left  120 / 1440 = 8.3333%
     column-gap    120 / 1320（＝コンテンツボックス）= 9.0909%
     一覧 : パネル = 540 : 660 = 9 : 11 → 9fr : 11fr
   minmax(0, …) は中身が長いときにカラムが押し広がるのを防ぐため。 */
.news__layout {
  display: grid;
  grid-template-columns: minmax(0, 9fr) minmax(0, 11fr);
  column-gap: 9.0909%;
  padding-left: 8.3333%;
  align-items: start;
}

/* 一覧 ------------------------------------------------------------------ */
.news__list {
  width: 100%;
  border-top: 1px solid #FFFFFF;
}

.news__item {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 4rem 0;
  border-bottom: 1px solid #FFFFFF;
  color: #192E34;
  text-decoration: none;
  transition: color 0.3s;
}

.news__item:hover,
.news__item.is-current {
  color: #5EA7AF;
}

/* 日付＋カテゴリーを横並び（2026-11-13） */
.news__item-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .8rem 1.6rem;
}

.news__item-date {
  font-size: 1.6rem;
  line-height: 1.28;
  white-space: nowrap;
  color: inherit;
}

.news__item-title {
  font-size: 2.4rem;
  line-height: 1.4;
  font-weight: 400;
  color: inherit;
}

/* 詳細パネル ------------------------------------------------------------ */
.news__panel-wrap {
  width: 100%;
  /* position:sticky に可動域を与えるため、グリッド行の高さ（＝一覧の高さ）まで伸ばす。
     .news__layout が align-items:start なので、ここで stretch し直す必要がある。 */
  align-self: stretch;
}

.news__panel {
  position: sticky;
  /* 既定は画面最上部に吸着。ヘッダーが出ている間だけ下にずらす（下の .is-header-visible）。
     切り替えは assets/js/news.js が .header の .header__hidden を監視して行う。 */
  top: 0;
  width: 100%;
  background: #FFFFFF;
  opacity: 1;
  transform: translateX(0);
  /* top の transition はヘッダー（style.css の .header：0.5s ease）に合わせる */
  transition: opacity 0.3s ease, transform 0.3s ease, top 0.5s ease;
}

/* 実際にスクロールするのは内側。ヒントを外側に絶対配置で固定できるようにするため。 */
.news__panel-scroll {
  max-height: 100vh;
  overflow-y: auto;
  /* パネル幅に対する比率（1440基準：60/660）。縦も同じ値になる（%は幅基準） */
  padding: 9.0909%;
  transition: max-height 0.5s ease;
}

/* ヘッダー表示中：ヘッダー（8rem）の下に潜って中身が隠れないようにする。
   SPは詳細ページがページごとスクロールなので、高さに触らないようPCだけに閉じる
   （.is-header-visible は詳細度が高く、SP側の解除指定に勝ってしまうため）。 */
@media screen and (min-width: 768px) {
  .news__panel.is-header-visible {
    top: 8rem;
  }

  .news__panel.is-header-visible .news__panel-scroll {
    max-height: calc(100vh - 8rem);
  }
}

/* パネル内スクロールバー（Chrome/Safari） */
.news__panel-scroll::-webkit-scrollbar {
  width: 0.4rem;
}

.news__panel-scroll::-webkit-scrollbar-thumb {
  background: #90999A;
  border-radius: 0.4rem;
}

.news__panel-scroll::-webkit-scrollbar-track {
  background: transparent;
}

/* スクロールヒント
   まだ下に続きがある間だけ JS が .has-scroll を付ける（最下部まで読んだら消える）。
   白地からのグラデーションで「まだ続く」ことを示し、Scroll ラベルと下向き矢印を添える。 */
.news__panel-hint {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem;
  height: 10rem;
  padding-bottom: 1.6rem;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 55%, #FFFFFF 100%);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  pointer-events: none;
}

.news__panel.has-scroll .news__panel-hint {
  opacity: 1;
  visibility: visible;
}

.news__panel-hint-label {
  font-size: 1.2rem;
  letter-spacing: 0.05em;
  color: #192E34;
}

.news__panel-hint svg {
  animation: newsHintBounce 1.6s ease-in-out infinite;
}

@keyframes newsHintBounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(0.4rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .news__panel-hint svg {
    animation: none;
  }
}

.news__panel.is-swapping {
  opacity: 0;
  transform: translateX(4rem);
}

/* 詳細（パネル・単体ページ共通） ---------------------------------------- */
.news__detail {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  width: 100%;
}

.news__detail-head {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.news__detail-date {
  font-size: 1.6rem;
  line-height: 1.28;
  color: #192E34;
}

.news__detail-title {
  font-size: 2.4rem;
  line-height: 1.4;
  font-weight: 400;
  color: #192E34;
}

/* サムネイル（Figmaの詳細では タグ → 画像 → 本文 の順） */
.news__detail-thumb {
  width: 100%;
}

.news__detail-thumb figure,
.news__detail-thumb picture {
  display: block;
  width: 100%;
}

.news__detail-thumb img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.news__detail-body {
  font-size: 1.4rem;
  line-height: 1.8;
  letter-spacing: 0.03em;
  color: #192E34;
}

.news__detail-body > * + * {
  margin-top: 2.4rem;
}

.news__detail-body h2 {
  font-size: 2rem;
  line-height: 1.4;
  font-weight: 400;
  margin-top: 4rem;
}

.news__detail-body h3 {
  font-size: 1.6rem;
  line-height: 1.6;
  font-weight: 400;
  margin-top: 3.2rem;
}

.news__detail-body a {
  color: #5EA7AF;
  text-decoration: underline;
}

.news__detail-body img {
  display: block;
  width: 100%;
  height: auto;
}

.news__detail-body ul,
.news__detail-body ol {
  padding-left: 1.5em;
}

.news__detail-body li + li {
  margin-top: 0.8rem;
}

/* ページネーション ------------------------------------------------------ */
.pagination {
  margin-top: 4rem;
}

.pagination__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.6rem;
  list-style: none;
  padding: 0;
}

.pagination__item a,
.pagination__item span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.2rem;
  height: 3.2rem;
  border: 1px solid #90999A;
  border-radius: 4rem;
  font-size: 1.4rem;
  letter-spacing: 0.05em;
  color: #192E34;
  text-decoration: none;
  transition: border-color 0.3s, color 0.3s;
}

.pagination__item a:hover {
  border-color: #5EA7AF;
  color: #5EA7AF;
}

.pagination__item .current {
  border-color: #5EA7AF;
  color: #5EA7AF;
}

.pagination__item .dots {
  border-color: transparent;
}

/* 外部記事リンクカード（ブロック / ショートコード） --------------------
   Figma: 外部記事リンク 5383:8288（PC） / 5383:8967（SP）
   ---------------------------------------------------------------------- */
.link-card {
  display: flex;
  /* 画像をカードの高さいっぱいに伸ばす（Figma 5383:8290：画像が枠に密着） */
  align-items: stretch;
  gap: 2rem;
  width: 100%;
  /* 設計の 122px（枠1px＋画像120＋枠1px）を下限にして、
     タイトルが1行でもカードが潰れないようにする */
  min-height: 12rem;
  padding-right: 2rem;
  border: 1px solid #5EA7AF;
  background: transparent;
  color: #192E34;
  text-decoration: none;
  transition: color 0.3s;
}

.link-card:hover {
  color: #5EA7AF;
}

.link-card__thumb {
  flex: 0 0 18rem;
  width: 18rem;
  /* 高さは align-items:stretch でカードに合わせる（固定しない） */
  overflow: hidden;
}

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

.link-card__body {
  display: flex;
  flex-direction: column;
  /* カードの高さの中で上下中央に置く */
  justify-content: center;
  align-items: flex-start;
  gap: 0.8rem;
  flex: 1 1 auto;
  min-width: 0;
  padding: 2rem 0;
  word-break: break-word;
}

.link-card__date {
  font-size: 1.6rem;
  line-height: 1.28;
  white-space: nowrap;
  color: inherit;
}

.link-card__title {
  font-size: 1.6rem;
  line-height: 1.6;
  color: inherit;
}

/* 単体ページ ------------------------------------------------------------ */
.news--single {
  padding-bottom: 12rem;
}

/* パンくずの末尾（カテゴリー＋記事タイトル）
   右パネルで別の記事に切り替えたとき、assets/js/news.js がこの中身を書き換える。
   display:contents にして、中の要素が .breadcrumbs の flex アイテムとして
   そのまま並ぶ（gap がちゃんと効く）ようにしている。 */
.breadcrumbs__tail {
  display: contents;
}

/* 詳細ページの「News」ラベルは h1 ではなくアーカイブへのリンク */
.news--single .pageTitle a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s;
}

.news--single .pageTitle a:hover {
  color: #5EA7AF;
}

.no-post {
  padding: 6rem 12rem;
  font-size: 1.6rem;
  color: #192E34;
}

/* Tab ------------------------------------------------------------------- */

/* SP -------------------------------------------------------------------- */
@media screen and (max-width: 767px) {
  .news {
    padding-bottom: 8rem;
  }

  .news__head {
    gap: 3rem;
    padding: 2.4rem 3rem 0;
    margin-bottom: 4rem;
  }

  /* パンくずは折り返す（記事タイトルまで出るので1行に収まらない） */
  .news__head .breadcrumbs {
    flex-wrap: wrap;
    row-gap: 0.4rem;
  }

  .news__head .breadcrumbs .current {
    min-width: 0;
  }

  /* SPの文字サイズ：サイト標準の .pageTitle(3rem＝390pxで30px) に合わせる */
  .news .pageTitle {
    font-size: 3rem;
  }

  .news__layout {
    display: block;
    padding-left: 0;
    padding-right: 0;
  }

  .news__list {
    padding: 0 3rem;
  }

  .news__item {
    padding: 3rem 0;
  }

  .news__item-date {
    font-size: 1.4rem;
  }

  .news__item-title {
    font-size: 1.8rem;
  }

  .news__detail-date {
    font-size: 1.4rem;
  }

  .news__detail-title {
    font-size: 2rem;
  }

  .news__detail-body h2 {
    font-size: 1.8rem;
  }

  .link-card__date {
    font-size: 1.4rem;
  }

  .link-card__title {
    font-size: 1.4rem;
  }

  /* パネルはSPでは出さない（行クリックで詳細ページへ遷移する） */
  .news__panel-wrap {
    display: none;
  }

  /* 詳細ページ（Figma: News modal/SP 5383:8949）
     一覧・「News」ラベル・カテゴリー絞り込みは出さず、詳細だけを見せる */
  .news--single {
    padding-bottom: 8rem;
  }

  .news--single .news__list,
  .news--single .news__head-title,
  .news--single .pagination {
    display: none;
  }

  .news--single .news__panel-wrap {
    display: block;
  }

  .news--single .news__panel {
    position: static;
    background: transparent;
  }

  .news--single .news__panel-scroll {
    max-height: none;
    overflow: visible;
    padding: 0 3rem;
  }

  .news__panel-hint {
    display: none;
  }

  .news__detail {
    gap: 3rem;
  }

  /* 外部記事リンクは縦積み（Figma SP variant 5383:8967） */
  .link-card {
    flex-direction: column;
    align-items: stretch;
    gap: 2rem;
    min-height: 0;
    padding-right: 0;
  }

  .link-card__thumb {
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
  }

  .link-card__body {
    padding: 0 2rem 1rem;
  }

  .pagination {
    margin-top: 3rem;
  }

  .no-post {
    padding: 4rem 3rem;
  }
}