/* ========================================
   news-list.css
   お知らせ一覧ページ専用スタイル
   SP基準: 375px / PC基準: 1366px
======================================== */

.nl-page {
  background: #fff;
}

/* ========================================
   FV / ヒーロー（contact.html と同構造）
======================================== */

.nl-hero {
  position: relative;
  background: #e4fcff;
}

/* 海の写真（SP: 通常フロー、コンテナ高さを決定） */
.nl-hero__photo img {
  display: block;
  width: 100%;
  height: auto;
}

/* 波形エリア（absolute: 写真の上、z-index:1） */
.nl-hero__upper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.12));
}

/* 波形 SVG */
.nl-hero__wave {
  display: block;
  width: 100%;
  height: auto;
}

/* タイトルラッパー（波形内 absolute） */
.nl-hero__title-wrap {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  padding-left: 20px;
}

/* タイトル: グラデーションテキスト */
.nl-hero__title {
  font-family: var(--sub-font);
  font-size: var(--fs-26);
  font-weight: 700;
  line-height: 1.4;
  background: var(--bg_gd-color);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ========================================
   パンくずリスト
   pages.css の .breadcrumb を上書き
======================================== */

.nl-breadcrumb-wrap .breadcrumb {
  padding: 24px 20px 0;
  margin-bottom: 40px; /* Figma: 記事一覧まで 40px */
}

/* ========================================
   記事一覧
======================================== */

.nl-content {
  padding-bottom: min(42.67vw, 56px); /* ページャーまでの余白 */
}

/* section_space でカード幅を制御（SP: 335px） */
.nl-list {
  display: flex;
  flex-direction: column;
  gap: 56px; /* Figma: gap 56px */
  list-style: none;
  padding: 0;
  margin: 0 auto;
}

/* ---- カード ---- */
.nl-card {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* カード写真（1:1 正方形, border-radius 上のみ） */
.nl-card__photo {
  margin: 0;
  border-radius: 16px 16px 0 0;
  overflow: hidden;
  background-color: #b3b3b3;
  aspect-ratio: 1 / 1; /* Figma: 335 × 335px */
}

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

/* カード情報エリア */
.nl-card__info {
  background-color: #f6f6f6;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nl-card__date {
  font-size: var(--fs-14);
  font-weight: 400;
  line-height: 1;
  color: var(--text-color);
}

.nl-card__title {
  font-size: var(--fs-14);
  font-weight: 400;
  line-height: 26px;
  color: var(--text-color);
}

/* ========================================
   ページネーション（wp-pagenavi）
======================================== */

.wp-pagenavi {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin: 40px auto min(42.67vw, 160px);
  width: calc(100% - 40px);
}
body .wp-pagenavi a,
body .wp-pagenavi span {
  border: none;
}
/* ページ番号（通常・現在） */
.wp-pagenavi .page,
.wp-pagenavi .current {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  font-size: var(--fs-14);
  font-weight: 700;
  line-height: 1;
  color: var(--text-color);
  text-decoration: none;
}

/* 現在のページ（丸背景） */
.wp-pagenavi .current {
  background-color: var(--main-color);
  border-radius: 12px;
  color: #fff;
}

/* 前へ・次へボタン（絶対配置） */
.wp-pagenavi .previouspostslink,
.wp-pagenavi .nextpostslink {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: 8px;
  display: block;
  font-size: 0; /* テキスト（< >）を非表示 */
  text-decoration: none;
}

.wp-pagenavi .previouspostslink {
  left: 0;
}

.wp-pagenavi .nextpostslink {
  right: 0;
}

/* CSS 矢印アイコン（::before で再現） */
.wp-pagenavi .previouspostslink::before,
.wp-pagenavi .nextpostslink::before {
  content: "";
  display: block;
  width: 7px;
  height: 7px;
  border-top: 2px solid var(--text-color);
  border-right: 2px solid var(--text-color);
  transform-origin: center;
}

.wp-pagenavi .previouspostslink::before {
  transform: rotate(-135deg);
}

.wp-pagenavi .nextpostslink::before {
  transform: rotate(45deg);
}

/* ========================================
   PC（768px以上）
   Figma PC2: 1366px 基準
======================================== */

@media (min-width: 768px) {
  /* ---- ヒーロー: 左（波形）+ 右（写真）分割 ---- */
  /* Figma: 波形 x=0 y=0 w=432 h=430 / 写真 x=403 y=80 w=963 h=350 */

  .nl-hero {
    height: min(31.48vw, 430px); /* 430/1366 */
    background: transparent;
  }

  /* 写真: PC では absolute で右カラムに配置 */
  .nl-hero__photo {
    position: absolute;
    left: min(29.5vw, 403px); /* 403/1366 */
    right: 0;
    top: 80px; /* PCヘッダー高さ */
    bottom: 0;
    z-index: 0;
  }

  .nl-hero__photo picture {
    display: block;
    width: 100%;
    height: 100%;
  }

  .nl-hero__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  /* 波形エリア: PC では左カラムとして相対配置 */
  .nl-hero__upper {
    position: relative; /* SP: absolute → PC: relative（コンテナ高さを決定） */
    width: min(32.87vw, 449px); /* 449/1366 */
    height: min(31.48vw, 430px);
    overflow: visible;
    filter: drop-shadow(4px 0 8px rgba(0, 0, 0, 0.12)); /* 右向きシャドウ */
  }

  .nl-hero__upper picture {
    display: block;
    height: 100%;
  }

  .nl-hero__wave {
    width: 100%;
    height: 100%;
  }

  /* タイトル位置: Figma x=51 y=222 */
  .nl-hero__title-wrap {
    width: min(32.87vw, 449px);
    margin: 0;
    top: min(16.25vw, 222px); /* 222/1366 */
    left: 0;
    right: auto;
    padding-left: min(3.73vw, 51px); /* 51/1366 */
  }

  .nl-hero__title {
    font-size: clamp(1.625rem, 1.064rem + 1.17vw, 1.875rem); /* max 30px */
  }

  /* ---- パンくず: Figma x=183 (section_space 左端と同位置) ---- */
  .nl-breadcrumb-wrap .breadcrumb {
    padding: min(1.17vw, 16px) min(13.54vw, 185px) min(1.46vw, 20px);
    margin-bottom: 0;
  }

  /* ---- 記事一覧: 3カラム ---- */
  /* Figma: 300px × 3 + gap 24px × 2 = 948px (x=209, w=948)              */
  /* section_space の vwベース幅をキャンセルし、nd-article と同じ         */
  /* max-width + padding: 0 20px パターンで左右余白を固定 20px に統一     */
  .nl-content {
    padding-bottom: 0;
  }

  .nl-list {
    display: grid;
    grid-template-columns: repeat(
      auto-fill,
      300px
    ); /* 300px 固定カラム、収まる数だけ自動配置 */
    justify-content: center; /* グリッド全体を中央揃え（端数は左から順に並ぶ） */
    width: auto; /* section_space の width: min(73.2vw, 1000px) を上書き */
    max-width: 988px; /* 948px コンテンツ + 20px padding × 2 */
    padding: 0 20px; /* nd-article と同じ左右余白 */
    gap: 24px;
  }

  .nl-list__item {
    width: 300px;
  }

  /* カード写真: PC でも 1:1 維持（Figma: 300×300） */
  .nl-card__photo {
    aspect-ratio: 1 / 1;
  }

  /* ---- ページネーション: Figma w=279、中央配置 ---- */
  .wp-pagenavi {
    width: 279px;
    gap: 15px;
    margin-top: min(3.66vw, 50px);
    margin-bottom: min(11.71vw, 160px);
  }
}