@charset "UTF-8";
/* ==========================================================
   奥飛騨冬物語 TOP — news セクション（2026-08-05新カンプ / y8808–9638・高さ830）
   PC版のみ・座標は2xマスター実測（design20260805_news.png 1365×830）
   背景=淡青 #ecf3f9。筆記体Newsは白（news_white_pc.png）で「お知らせ」見出しの背後に重なる
   ========================================================== */

.news {
  position: relative;
  width: var(--canvas);
  height: 830px;
  background: var(--color-pale);
}

/* 白スクリプト News（旧金アセットを白に再着色。228×81 @104,62＝実測フィット err0.08） */
.news__script {
  position: absolute;
  left: 104px;
  top: 62px;
  margin: 0;
  width: 228px;
  height: 81px;
  background-image: url(../../img/script/news_white_pc.png);
}

/* 見出し お知らせ（青・スクリプトの前面） */
.news__title {
  position: absolute;
  left: 124px;
  top: 114px;
  margin: 0;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 40px;
  line-height: 1;
  letter-spacing: 0.05em;
  color: var(--color-blue);
  white-space: nowrap;
}

/* 左リード 3行 */
.news__lead {
  position: absolute;
  left: 125px;
  margin: 0;
  font-family: var(--font-jp);
  font-weight: 500;
  /* 2026-09-02 サイズ相殺の是正: カンプ字面19.1px(1x)＝fs21.1px相当（同一文言の行帯40vs38.3(2x)・
     グリフbbox（開20.5/報21.1）でも整合）。幅は行別lsで再一致（下） */
  font-size: 21.1px;
  line-height: 1;
  letter-spacing: 0.8px;
  color: var(--color-ink);
  white-space: nowrap;
}
.news__lead--1 { top: 184px; }
/* 2行目は全て漢字＋の＝カンプ書体の漢字送りが広いぶんだけトラッキングで補正（実測 w161） */
.news__lead--2 { top: 226px; letter-spacing: 2.6px; }  /* 2026-09-02 21.1px化に伴い再実測（comp w160/1x） */
.news__lead--3 { top: 268px; }

/* お知らせリスト（右カラム）— 罫線は #37393c 25%（実測 rgb(190,197,203) on #ecf3f9） */
.news__list {
  position: absolute;
  left: 529px;
  top: 134px;
  width: 711px;
}
.news__item {
  position: relative;
  height: 156px;
  border-top: 1px solid rgba(55, 57, 60, 0.25);
}
.news__item:last-child {
  height: 157px;
  border-bottom: 1px solid rgba(55, 57, 60, 0.25);
}

/* 日付（カンプ実測 ink x530.5–612.0 w81.5 / 字面高11.0）
   2026-09-02 文字組み修正: 16px/ls0 は字面高12.5・1字ink7.88px＝カンプ比+13.6%／+22%。
   総インク幅がたまたま近く幅照合では気づけなかった。14px/ls0.06em で字面・総幅とも一致 */
.news__date {
  position: absolute;
  left: 0;
  /* 14px化で line-height:1 の行箱が2px縮み字面が1.25px上がるぶんを戻す（実測: 34pxのままだと
     字面 y171.5–182.0 でカンプ y172.5–183.5 から-1.25px上。35.25pxでΔ±0.25） */
  top: 35.25px;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.06em;
  color: var(--color-ink);
  white-space: nowrap;
}

/* 記事タイトル */
.news__item-title {
  position: absolute;
  left: 101px;
  /* line-height を 1→1.2 にしたぶん top を半レディング分（2.15px）戻し、
     字の位置はカンプのまま保つ（2026-08-27 CMS連動対応） */
  top: 28.85px;
  margin: 0;
  font-family: var(--font-jp);
  font-weight: 500;
  /* 2026-09-02 サイズ再点検: 行帯比較では-7%に見えたが同一グリフ（を・ル）のbbox比較で
     comp実効20.7〜22.3px＝21.5pxで正のため据え置き（帯の低さは文字列組成の差だった） */
  font-size: 21.5px;
  line-height: 1.2;
  letter-spacing: -0.041em;
  color: var(--color-ink);
  /* 実記事はタイトル長が不定。1行に保ち、溢れたら省略記号にする */
  width: 610px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 抜粋2行（行ごとにカンプ実測幅へトラッキング補正: カンプ ink 1行目 w332.5 / 2行目 w537.5） */
.news__dummy {
  position: absolute;
  left: 101px;
  top: 69px;
  margin: 0;
  font-family: var(--font-jp);
  font-weight: 500;
  /* 2026-09-02 サイズ再点検: 同一グリフ（飛・厳）のbbox比較で comp実効17.0〜17.5px＝17pxで正のため据え置き */
  font-size: 17px;
  line-height: 31px;
  /* 2026-09-02 文字組み修正: CMS描画(main.js)は l1/l2 spanを作らないため、実記事は
     ls0＝カンプ比で1行あたり最大+28.5px広く出ていた。カンプ行別トラッキング
     （1行目+0.012em/2行目-0.0505em）の文字数加重平均 -0.028em を要素側に持たせる。
     静的markupは子span側が勝つのでカンプ再現は不変 */
  letter-spacing: -0.028em;
  color: var(--color-ink);
  /* 実記事は本文長が不定。折り返しを許可し、カンプと同じ2行で打ち切る。
     セクション高830px・item高156pxを動かさないためにクランプが要る（2026-08-27） */
  /* 2026-09-03: 右端の矢印はカンプにあるが市岡さん判断で「不要」＝非表示が確定仕様。
     矢印回避のための幅詰め(610→580)も撤回して610へ戻す。.news__arrow のCSS定義は
     復活時のために残置（マークアップ・main.jsから要素を出していないので描画されない） */
  width: 610px;
  white-space: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.news__dummy-l1 { letter-spacing: 0.012em; }
.news__dummy-l2 { letter-spacing: -0.0505em; } /* 2026-09-02: w540.0→537.5（カンプ実測 w537.5）へ微調整 */

/* 右端の細→矢印（14×13・軸1px＋45°シェブロン。カンプ実測 x1217–1230 / 軸y212） */
.news__arrow {
  position: absolute;
  right: 9px;
  top: 72px;
  width: 14px;
  height: 13px;
}
.news__arrow::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 14px;
  height: 1px;
  background: var(--color-ink);
}
.news__arrow::after {
  content: "";
  position: absolute;
  left: 3.8px;
  top: 2px;
  width: 8px;
  height: 8px;
  border-top: 1px solid var(--color-ink);
  border-right: 1px solid var(--color-ink);
  transform: rotate(45deg);
}

/* 一覧ボタン（u-btn 290×60・中央寄せ。カンプ実測: ラベル ink x627–728 / y702–719） */
.news__btn {
  position: absolute;
  left: 538px;
  top: 681px;  /* 2026-08-19 市岡さん指示: ボタン上余白をPC50px/SP45pxに統一（カンプのばらつき補正） */
  padding-bottom: 6px; /* ラベルを3px上げてカンプの光学中央に合わせる */
  /* 2026-09-02 文字組み修正: u-btn共通の 20px/0.2em ではラベルink w111.0＝カンプ比+9.0px。
     カンプ実測（ink x627–729 w102.0 / 字面高17.5）は 19px/0.16em 相当 */
  font-size: 19px;
  letter-spacing: 0.16em;
  text-indent: 0;
}

/* ==========================================================
   SP（設計幅393px / 2026-08-05 SPカンプ top_sp_server.jpg 実測）

   セクション枠 1x y6400–7265（高さ865＝支給基準画像と同じ切り）。
   うち上19pxは白の余白で、淡青ベタ帯は y6419–7265（高さ846）。
   白19pxは border-top で作る＝絶対配置の子は padding box 基準なので、
   子の top は全て「淡青帯の上端(6419)からの相対値」のまま書ける。
   PCの2カラムを縦1列へ再構築し、
   リスト1件は「記事タイトル→抜粋3行→日付＋矢印」の順（PCは日付が上／SPは下）。

   【罠1・字詰め】カンプの和文は仮名がプロポーショナル詰め（漢字送り≒1em／仮名≒0.8em）。
     Zen Old Mincho には palt / pwid が無く、font-feature-settings も
     font-variant-east-asian: proportional-width も効かない（実測で確認済み）。
     そのためPC版と同じ「行ごとに letter-spacing を入れて行末インク位置を合わせる」方式で寄せる。
     行内の字送りは最大±3px残る（カンプ実測との差＝許容。詳細は _review の照合ログ）。
   【罠2・文字サイズ】PCカンプ／SPカンプのインク高比 ×PC実装値で算出し、
     実レンダのインク箱（幅・高さ・中心）がカンプと一致するまで詰めた実測値。丸めないこと。
   【罠3・ボタン】.u-btn のSP共通指定（214×45）は sp.css にあり news.css より後に読まれる。
     同詳細度では sp.css が勝つので、ボタンの上書きは .news .news__btn（詳細度2）で行う。
   ========================================================== */
@media (max-width: 767px) {

  .news {
    width: var(--canvas);
    height: 895px;  /* 2026-08-20 市岡さん指示: ボタン下の余白が窮屈（44px）→+30で74pxに */
    border-top: 19px solid var(--color-white); /* activities 直後の白余白19px */
  }

  /* 白スクリプト News（PC用の透過PNGをそのまま縮小。アセットは全面がインク＝ボックス＝カンプink） */
  .news__script {
    left: 26.5px;
    top: 33px;
    width: 99px;
    height: 35.2px;
  }

  /* 見出し お知らせ（カンプ ink x28.0–125.5 / y58.0–80.5・高さ22.5） */
  .news__title {
    left: 26.5px;
    top: 55.9px;
    font-size: 24.66px;
    letter-spacing: 0.0426em;
  }

  /* リード（カンプは2行組み。PCの3行のうち2行目＝lead--2 と 3行目＝lead--3 を
     同じ top で横に並べて1行に見せる。lead--3 の left 137px はカンプ実測「最」の位置） */
  .news__lead {
    line-height: 1;
    font-size: 14.85px;
  }
  .news__lead--1 { left: 26.5px; top: 103.1px; letter-spacing: -0.0162em; }
  .news__lead--2 { left: 26.5px; top: 131.1px; letter-spacing: 0.0559em; }
  .news__lead--3 { left: 137px;  top: 131.1px; letter-spacing: -0.0227em; }

  /* リスト（カンプ罫線 x26–367＝left26/width341 / 上端y177 / 1件175.5px。
     罫線色はPCと同じ rgba(55,57,60,.25)。
     本文はカンプ書体より左サイドベアリングが狭いので、子要素側で +0.5px 戻してインクを合わせる） */
  .news__list {
    left: 26px;
    top: 177px;
    width: 341px;
  }
  .news__item { height: 175.5px; }
  .news__item:last-child { height: 175.5px; }

  /* 記事タイトル（カンプ ink 幅277.5・高さ16 / 罫線から +23.0） */
  .news__item-title {
    left: 0.5px;
    /* PCと同じ考え方で半レディング分（1.83px）戻す */
    top: 19.08px;
    /* 2026-09-02 サイズ再点検: 同一グリフ（イ）bbox比較で comp実効≒18.7px＝18.3pxで正のため据え置き */
    /* 2026-09-16 横山さんメモ「SP：お知らせ…の文字サイズに圧迫感」→ 18.3→16px・字詰め -0.0917→-0.02em。
       行ボックス高 21.96→19.2px の差の半分(1.38px)だけ top を下げて行の中心を据え置く（タイトルは1行クランプ） */
    font-size: 16px;
    line-height: 1.2;
    letter-spacing: -0.02em;
    width: 340.5px;
  }

  /* 抜粋3行（行送り22px。カンプ ink 1行目 w274 / 2行目 w338.5 / 3行目 w103）
     2行目と3行目は字詰めが違うので u-sp-br で改行し .news__dummy-l3 に分離した。
     PCでは u-sp-br が display:none＝改行されず、l3 は l2 のクラスも併記しているので表示不変 */
  .news__dummy {
    left: 0.5px;
    top: 51px;
    font-size: 14.34px;
    /* 2026-09-01 横山さん指示「行間を空ける」: 22px（比1.53）→25px（比1.74）。
       3行で 66→75px、日付(top136.63)との空きは 19.6→10.6px でぶつからない */
    line-height: 25px;
    /* 2026-09-02 文字組み修正: CMS描画は l1/l2/l3 spanを作らないため実記事は ls0＝
       送り14.34px/字で、カンプの行別送り（14.17/13.57/12.54）の文字数加重平均13.62px/字より
       +0.72px/字広い。要素側に -0.05em（=-0.717px）を持たせる。静的markupは子span優先で不変 */
    letter-spacing: -0.05em;
    /* SPカンプは3行組み */
    width: 340.5px;
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }
  .news__dummy-l1 { letter-spacing: -0.0117em; }
  .news__dummy-l2 { letter-spacing: -0.054em; }
  /* 3行目「を」の左サイドベアリングがカンプより広いぶんを戻す */
  .news__dummy-l3 { margin-left: -1.5px; letter-spacing: -0.1255em; }

  /* 日付（カンプ ink x27.0–109.0・高さ12 / 罫線から +140.0。PCの16pxより小さい） */
  .news__date {
    left: 0.5px;
    top: 136.63px;
    font-size: 14.4px;
    letter-spacing: 0.0494em;
  }

  /* 矢印（カンプ 軸 x353.5–367.0 @罫線+145 / シェブロン 幅7.5×高さ11） */
  .news__arrow {
    right: 0;
    top: 139px;
    width: 13.5px;
    height: 11px;
  }
  .news__arrow::before {
    left: 0;
    top: 5px;
    width: 13.5px;
  }
  .news__arrow::after {
    left: 4.1px;
    top: 1.6px;
    width: 7.8px;
    height: 7.8px;
  }

  /* 一覧を見る（カンプ ピル x93.0–307.5 / y738.0–782.5＝sp.cssの214×45と一致。
     ピル中心はページ中心より3.5px右＝カンプどおり。PC用の text-indent:0 は
     SPの letter-spacing 0.14em に合わせて打ち消す） */
  .news .news__btn {
    left: 93px;
    top: 776px;  /* 2026-08-19 市岡さん指示: ボタン上余白をPC50px/SP45pxに統一（カンプのばらつき補正） */
    padding-bottom: 3px;
    letter-spacing: 0.14em;
    text-indent: 0.14em;
  }
}

/* ==========================================================
   【2026-10-08 HEROU定例 10/7（横山さん）】お知らせ一覧の本文「文字が続くときは2段でいいと思うんだけど、
   文字がないのにこうやって空いちゃってる」＝本文が短い時だけ詰める［文字起こし 09:05:01〜09:05:23］
   旧: 1件の高さを固定（PC 156px／SP 175.5px）し本文を絶対配置 → 本文が1行だと下（SPは日付の上）が1〜2行分空く
   新: 本文を流れに戻し、1件の高さを中身に合わせる。リストと「一覧を見る」ボタンも流れに戻して、セクション高も追従させる。
       本文が PC 2行／SP 3行（クランプの上限）の時は、旧と寸法が1pxも変わらないように余白を引き直した:
         PC 1件 = 罫1 + 上69 + 本文31×2 + 下24 = 156（最後の件は下罫+1で157）／リスト上134・ボタン上78・下89 → 830
         SP 1件 = 罫1 + 上51 + 本文25×3 + 日付の上10.63 + 日付14.4 + 下23.47 = 175.5／白19 + 上177・ボタン上72.5・下55 → 895
       タイトル・日付（PC）は従来どおり件の中の絶対配置。戻す時はこのブロックを消すだけ
   ========================================================== */
.news { display: flow-root; height: auto; padding-bottom: 89px; }   /* flow-root＝リストの上余白が欄の外へ相殺で漏れないように */
.news__list { position: relative; left: auto; top: auto; margin: 134px 0 0 529px; }
.news__item,
.news__item:last-child { height: auto; padding: 69px 0 24px; }
.news__dummy { position: relative; left: auto; top: auto; margin-left: 101px; }
.news .news__btn { position: relative; left: auto; top: auto; margin: 78px 0 0 538px; }
@media (max-width: 767px) {
  .news { height: auto; padding-bottom: 55px; }
  .news__list { margin: 177px 0 0 26px; }
  /* SPは日付が本文の下。HTML（main.js の差し込みも）は 日付→タイトル→本文 の順なので、縦並びの順番で 本文→日付 にする */
  .news__item,
  .news__item:last-child { display: flex; flex-direction: column; padding: 51px 0 23.47px; }
  .news__dummy { order: 1; margin-left: 0.5px; }
  .news__date { order: 2; }
  .news__date { position: relative; left: 0.5px; top: auto; display: block; margin-top: 10.63px; }
  .news .news__btn { left: auto; top: auto; margin: 72.5px 0 0 93px; }
}

/* ==========================================================
   【2026-10-16b HEROU定例 10/16（横山さん）】SP TOP お知らせの並び「普通のニュースだと日付が来てタイトルが来てる」
   「タイトルの前に（日付を）持って」「順番を変えてください」［文字起こし 09:14:32〜09:14:54］
   旧（10/8）: タイトル（絶対配置）→ 本文 → 日付。新: 日付 → タイトル → 本文（HTML・main.js の差し込みはもともとこの順＝CSS だけ）。
   PC は日付が左・タイトルが右で既にこの順、/news/ の一覧も 日付→タイトル なので SP の TOP だけ。
   1件の高さは本文3行の時に従来と同じ 175.5px（罫1 + 上22.43 + 日付14.4 + 間8 + タイトル19.2 + 間12 + 本文75 + 下23.47）
   戻す時はこのブロックを消す
   ========================================================== */
@media (max-width: 767px) {
  .news__item,
  .news__item:last-child { padding: 22.43px 0 23.47px; }
  .news__date { order: 0; margin-top: 0; }
  .news__item-title { position: relative; left: 0.5px; top: auto; order: 1; margin-top: 8px; }
  .news__dummy { order: 2; margin-top: 12px; }
}