@charset "UTF-8";
/* ==========================================================
   飛騨ほおのき平スキー場 TOP — news セクション（NEWS & TOPICS）
   1440px カンプ実測。y=2887–3752（高さ865px）
   ========================================================== */

.news {
  /* 【2026-09-01 A-1/T-15・C-2】カンプのNEWS帯は上半分が白で、下半分から
     EXPERIENCE の青ウォッシュが立ち上がる。旧実装の一律 #FAFAFA を撤去。
     実測（左右ガター平均）: y3440 (255,255,255) / y3620 (246,250,253) /
     y3700 (237,245,252) / y3740 (235,244,252) */
  /* 【2026-09-02 A-1c/top】旧・グラデ近似は撤去。ウォッシュは main::before の画像タイル。 */
  background: transparent;
  padding-bottom: 56px; /* 【2026-09-02 A-1c】一覧ボタンを+25した分を相殺（EXPERIENCE開始位置は不変） */
  overflow: hidden;
}

/* ---- 見出し ---- */
/* 【2026-09-01 A-1/T-13・系統①】
   カンプ実測: "NEWS & TOPICS" ink x87-330（幅244）・y3062-3098
   旧実装:                      ink x86-305（幅220）・y2978-3011（font-size 45.9px）
   → font-size 45.9 × 244/220 ≈ 51px ／ 見出し位置は 83px 下（padding-top 85 → 168）。
   和文ラベル「お知らせ」は 8/31カンプに存在する（ink x353-416・y3074-3088・ほぼ黒）ので
   2026-07-29「修正内容1.pdf」由来の display:none を撤去して差し戻す。 */
.news__head {
  display: flex;
  align-items: center;
  gap: 18.6px; /* 【2026-09-02 A-1c】和ラベルink左端を spec x351.3 に合わせた実測値 */
  padding: 136.3px 0 0 84px; /* 【2026-09-03 A-1c/top R4】168→136.3（.herotop を2887→2918.7 に伸ばした 31.7px を相殺。NEWS の絶対 y は不変） */
}
.news__title {
  font-size: 53.57px;       /* 【2026-09-02 A-1c】spec実値（旧51px） */
  line-height: 1;
  letter-spacing: -0.015em; /* spec実値（旧0） */
  color: var(--color-primary);
}
.news__label {
  display: inline;
  font-size: 17px;          /* spec実値（旧15.5px） */
  line-height: 1;
  letter-spacing: 0.11em;   /* spec実値（旧0.05em） */
  color: var(--color-text);
}

/* ---- カード横並び（カルーセル風・右で見切れ） ---- */
.news__carousel {
  margin-top: 37px;
  padding-left: 84px;
  overflow: hidden;
}
.news__list {
  display: flex;
  gap: 40px;
}
.news__card {
  flex: 0 0 280px;
  width: 280px;
}
.news__card-link {
  display: block;
  color: inherit;
}
/* 【2026-09-03 A-1c/top R3】サムネの角丸。spec のクリップパス #130-134 は
   x84/404/724/1044/1364・y3147.6・280×280 で pts=8＝角丸矩形。
   半径はカンプ実測（サブピクセル円フィット・radius_fit2）:
     カンプ  1枚目 28.10 / 2枚目 27.28 / 3枚目 27.98（rms 0.13-0.40px）
     同じ計測を border-radius:24px の実装に当てると 24.68 / 23.72 / 24.52
     ＝カードごとの系統誤差 +0.68 / -0.28 / +0.52 を差し引くと 27.42 / 27.56 / 27.46
   → r = 27.5px（3枚のばらつき 0.14px）。旧実装は角丸なし。
   ※SPカンプのサムネ（clip #153/#154・194.8×194.8）は pts=4＝角丸なし＝SPでは0に戻す。 */
.news__thumb {
  width: 280px;
  height: 280px;
  overflow: hidden;
  border-radius: 27.5px;
}
.news__thumb img {
  width: 280px;
  height: 280px;
  object-fit: cover;
  object-position: center;
}

.news__card-title {
  margin-top: 26px;
  /* 【2026-09-02 A-1c/top R2】折返し位置の修正。
     spec 枠幅280 / カンプ1行目=「自然の地形をそのまま活かした斜面。」(17字)。
     実測（実フォント）: 17字の advance = 280.33px。うち末尾1字ぶんの letter-spacing
     0.07em×17px = 1.19px は CSS だけが足す分（イラレは行末に字送りを置かない）＝
     280.33 - 1.19 = 279.14 が本来の行長で 280 に収まる。CSS は行分割時に末尾の
     字送りも数えるため 0.33px 足りず 15字で折り返していた。
     枠を 1px 広げて（280→281）カンプと同じ17字で折り返させる。均等割付の伸びは
     281-280.33=0.67px（行全体）＝カンプの右端 x361 に対し実装 +1px 以内。 */
  width: 281px;
  font-family: var(--font-jp-yakuhan); /* カンプは約物半角（句読点のみ半角） */
  font-size: 17px;        /* 【2026-09-02 A-1c】spec実値（旧15.3px） */
  letter-spacing: 0.07em; /* spec実値（旧0） */
  text-align: justify;    /* spec just=FULLJUSTIFY（最終行はカンプ同様ナチュラル） */
  line-height: 27px;
  color: #2d2d2d; /* 修正内容1.pdf(2026-07-29): カード内テキストは無彩色#2d2d2dへ（SPカンプ実測で裏取り済み） */
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
/* 【2026-09-01 A-1/T-16・系統①】カンプのカード構成は
   「本文2行 →［青塗りバッジ（白文字）＋日付］が同一行」。
   旧実装は「タイトル → 本文 → 白地＋濃色枠線バッジ → 日付（別行）」だったので、
   ・本文（.news__excerpt）はカンプに無いので非表示
   ・バッジは 2026-07-29「修正内容1.pdf」由来の白地＋枠線をやめて塗り＋白文字へ
     （カンプ実測: バッジ塗り rgb(22,92,226)=#165ce2・ink x85-153・y3536-3557）
   ・日付をバッジと同じ行へ（カンプ実測: 日付 ink x165-237・y3542-3551）
   に戻す。SPは別途カンプ準拠のため下の @media で元の縦積みを維持する。 */
.news__excerpt {
  display: none;
  margin-top: 21px;
  font-family: var(--font-jp-yakuhan);
  font-size: 13.5px;
  line-height: 23px;
  color: #2d2d2d;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.news__meta {
  display: flex;
  align-items: center;
  gap: 12px; /* カンプ実測: バッジ右端153 → 日付ink左端165 */
  /* 【2026-09-02 A-1c/top R2】25→31。カンプのバッジ ink y3536-3558（spec図形 y3536.7 h22）に対し
     実装は y3530.6 で 6px 高かった（PIL実測）。下の .news__more で同量を相殺し、
     「一覧を見る」ボタン上端 y3622（カンプ実測 y3622-3623）は動かさない。 */
  margin-top: 31px;
}
/* 【2026-09-02 A-1c】spec図形: バッジ 70×22（#165ce2）。文字は spec実値 11px / 0.11em。 */
.news__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--color-primary);
  border-radius: 999px;
  background: var(--color-primary);
  font-size: 11px;
  letter-spacing: 0.11em;
  line-height: 1;
  color: var(--color-white);
}
.news__date {
  display: inline-block;
  font-size: 13px;        /* 【2026-09-02 A-1c】spec実値（旧11.7px） */
  line-height: 1;
  letter-spacing: 0.07em; /* spec実値（旧0.02em） */
  color: #2d2d2d;
}

/* ---- 一覧を見る ボタン（1440中央） ---- */
.news__more {
  /* 【2026-09-02 A-1c】カンプのボタン上端 y3623／旧実装 y3598（実測25px高い） */
  /* 【2026-09-02 A-1c/top R2】70→64。.news__meta を +6 した分の相殺（ボタン位置は不変）。 */
  margin-top: 64px;
}
.news__more-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 300px;
  height: 70px; /* spec図形 300×70 */
  margin: 0 auto;
  /* 【2026-09-01 A-1/C-1】2026-08-02の暫定対処（#0081DF→#0D62A3）は撤去。
     カンプのアクセント #165CE2 は白文字 5.73:1 で基準を満たすため primary に一本化。 */
  background: var(--color-primary);
  border-radius: 6px;
  color: var(--color-white);
}
.news__more-text {
  font-size: 17px;        /* 【2026-09-02 A-1c】spec実値（旧15.3px） */
  letter-spacing: 0.05em; /* spec実値（旧0.1em） */
}
.news__more-icon {
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-primary);
}
.news__more-icon svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
}

/* ========================= SP ========================= */
/* SPカンプ実測 spec_sp_news.json（393px幅・y3161–3743）が正 */
@media (max-width: 768px) {
  .news {
    /* 【2026-09-02 A-1c/top】48→17。NEWS見出しはカンプ一致（y3137）だが、
       EXPERIENCE 以降が31px下へずれていた（カンプ 見出しink y3645／旧実装 y3676・実測）。 */
    padding-bottom: 17px;
    /* 【2026-09-02 A-1c/top】旧・グラデ近似は撤去。ウォッシュは main::before の画像タイル。 */
    background: transparent;
  }
  .news__head {
    padding: 45px 0 0 20px;
    gap: 10px; /* 見出し拡大ぶんを詰めて和ラベルink左端を spec x193.8 に戻す */
  }
  .news__title {
    font-size: 34.19px;       /* 【2026-09-02 A-1c】spec実値（旧32.5px） */
    letter-spacing: -0.015em; /* spec実値 */
  }
  .news__label {
    display: inline;
    font-size: 15px;          /* spec実値（旧13px） */
    line-height: 1;
    letter-spacing: 0.11em;   /* spec実値（旧0.18em） */
    color: var(--color-text); /* spec #2d2d2d（旧#949494） */
  }
  .news .news__carousel {
    /* 詳細度up: animation.css(後読み)の scroll-padding-left:84px に勝つ */
    margin-top: 15px; /* 見出しbox(32.5px)込みでサムネ上端=カンプy93に合わせる */
    padding-left: 20px;
    scroll-padding-left: 20px;
  }
  .news__list {
    gap: 27px;
  }
  .news .news__list::after {
    /* animation.css(後読み)の width:44px に勝つため詳細度を上げる */
    width: 20px; /* 末尾スナップ余白（PC44の縮小） */
  }
  .news__card {
    flex: 0 0 195px;
    width: 195px;
  }
  .news__thumb,
  .news__thumb img {
    width: 195px;
    height: 195px;
  }
  /* 【2026-09-03 A-1c/top R3】SPカンプのサムネは角丸なし（clip pts=4・実測 inset=1px一定） */
  .news__thumb { border-radius: 0; }
  .news__card-title {
    /* 【2026-09-02 A-1c/top R2】SPカンプの1行目は「自然の地形をそのまま活かした斜」(15字)で
       実装と一致済み＝PCで入れた幅+1px の細工は不要。カード幅(195px)へ戻す。 */
    width: auto;
    margin-top: 17px;
    font-size: 12px;         /* 【2026-09-02 A-1c】spec実値（旧11.5px） */
    line-height: 18.79px;    /* spec実値（旧19px） */
    letter-spacing: 0.07em;  /* spec実値（旧0.12em） */
  }
  .news__excerpt {
    margin-top: 15px;
    font-size: 9.8px;
    line-height: 16px;
    letter-spacing: 0.12em;
  }
  /* 【2026-09-02 A-1c】spec図形: SPバッジ 64.1×20.1。文字は 10.06px / 0.11em。 */
  .news__pill {
    margin-top: 15px;
    width: 64.1px;
    height: 20.1px;
    padding: 0;
    font-size: 10.06px;
    letter-spacing: 0.11em;
  }
  /* 【2026-09-02 A-1c/top R2】margin-top を PC(31) から 3.7 へ。
     カンプ実測（comp/top_sp.png 列走査 x=50）: バッジ上端 y3450-3470。
     修正前の実装は y3471.3（PILとDOM両方で一致）＝+21。本文2行の行送り18.79は一致済みなので
     メタ行の間隔だけを詰める。 */
  .news__meta { gap: 9.2px; margin-top: 3.7px; } /* spec: バッジ右端84.4 → 日付ink左端93.6 */
  .news__date {
    margin-top: 5px;
    font-size: 10px;        /* 【2026-09-02 A-1c】spec実値（旧11px） */
    letter-spacing: 0.07em; /* spec実値 */
  }
  .news__more {
    /* 【2026-09-02 A-1c/top R2】30→51。上の .news__meta を 21px 詰めた分をそのまま戻し、
       「一覧を見る」ボタン以降（EXPERIENCE 見出しインク y3645＝カンプ一致）を動かさない。 */
    margin-top: 51px;
  }
  .news__more-btn {
    width: 266px;
    height: 62px;
    border-radius: 4px;
  }
  .news__more-text {
    font-size: 15.03px;     /* 【2026-09-02 A-1c】spec実値（旧13.3px） */
    letter-spacing: 0.05em; /* spec実値 */
  }
  .news__more-icon {
    right: 13px;
    width: 21.5px;
    height: 21.5px;
  }
  .news__more-icon svg {
    width: 13px;
    height: 13px;
  }
}

/* 【2026-09-17 修正】トップのお知らせはスライダーをやめ、4件を固定で並べる（PC 4列／SP 2列） */
.news__nav { display: none; }
.news__carousel { padding-left: 84px; padding-right: 84px; overflow: visible; }
.news__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; }
.news__card { flex: none; width: auto; }
.news__thumb, .news__thumb img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
.news .news__list::after { display: none; }
@media (max-width: 768px) {
  .news .news__carousel { padding: 0 20px; }
  .news__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 20px; }
  .news__card { width: auto; }
  .news__thumb, .news__thumb img { width: 100%; height: auto; }
}

/* 【2026-09-17 深夜3】お知らせ見出し: 1文字だけの折返しを避ける（均等2行＋語単位の折返し） */
.news__card-title { text-wrap: balance; line-break: strict; }
.news__card-title .nb { display: inline-block; }