/* ============================================================================
   ワークスHP ニュース（news.html）— このページ固有の座標
   ----------------------------------------------------------------------------
   共通部分（リセット・スケーリング土台・ヘッダー・Entry/Contact帯・フッター）は
   css/style.css にある。HTML では style.css → このファイルの順で読み込むこと。

   ・仕様書 6.news.txt の2フレームを、この1ファイルに入れてJSで切り替える
     （別ページには遷移しない）。
       ワークスHP_ニュース1 … 一覧（1920×2104）
       ワークスHP_ニュース2 … 記事詳細（1920×2030）
   ・数値はすべて 6.news.txt の実数値。
     ※ 参照画像 assets/sankou/ワークスHP_ニュース1.png（1920×2366）／ニュース2.png
       （1920×2226）は仕様書より1フレームぶん古く、見出しの級数・写真の大きさ・
       余白が異なる。ここでは仕様書（txt）を正としている。
   ・回転装飾は Figma が回転後の外接ボックス基準で left/top を出すため
       45度回転時 W = H = (w + h) / √2 ／ 補正 left = 元left + (W-w)/2 ／ top = 元top + (H-h)/2
     で補正した。各ルールに「元の指定値 → 補正値」を残してある。
   ========================================================================== */
#viewList   { height: 2164px; }
#viewDetail { height: 2090px; }

/* ============================================================================
   共通：背景（news_bg_01 / news_bg_02）
   Rectangle 78 は Figma で上下反転（matrix(1,0,0,-1,0,0)）されているため、
   グラデーションの角度を 180deg → 0deg にして同じ見えにしている。
   ========================================================================== */
.bg-base { left: 0; width: 1920px; background: linear-gradient(0deg, #FBFCFD -6.74%, #EEF5FC 3.3%); }
#viewList   .bg-base { top: 105px; height: 1182px; }
#viewDetail .bg-base { top: 105px; height: 1108px; }

/* ---------- 斜めの装飾バー（5本） ---------- */
.deco { background: var(--grad-navy-bar); transform: rotate(-45deg); }
.deco-11 { width: 872.99px; height: 219.04px; opacity: 0.09; filter: blur(5.5px); border-radius: 201.582px; }
.deco-8  { width: 191.95px; height: 66.27px;  border-radius: 442.493px; }          /* ぼかしなし・不透明 */
.deco-10 { width: 237.11px; height: 57.92px;  opacity: 0.56; filter: blur(5.5px); border-radius: 442.493px; }
.deco-9  { width: 305.75px; height: 55.87px;  opacity: 0.76; filter: blur(5.5px); border-radius: 442.493px; }
.deco-79 { width: 305.75px; height: 55.87px;  opacity: 0.76; filter: blur(5.5px); border-radius: 442.493px; }

/* 一覧（元の指定値 → 補正値） */
#viewList .deco-11 { left: 95.588px;   top: 138.563px; }   /* 146, -138 */
#viewList .deco-8  { left: 672.372px;  top: 183.222px; }   /* 677.04, 125.05 */
#viewList .deco-10 { left: 139.754px;  top: 229.849px; }   /* 154, 154.5 */
#viewList .deco-9  { left: 1414.981px; top: 184.921px; }   /* 1440, 85 */
#viewList .deco-79 { left: 1580.981px; top: 102.921px; }   /* 1606, 3 */

/* 詳細（元の指定値 → 補正値） */
#viewDetail .deco-11 { left: -11.412px;  top: 54.563px;  }  /* 39, -222 */
#viewDetail .deco-8  { left: 761.332px;  top: 110.172px; }  /* 766, 52 */
#viewDetail .deco-10 { left: 32.754px;   top: 145.849px; }  /* 47, 70.5 */
#viewDetail .deco-9  { left: 1414.981px; top: 184.921px; }  /* 1440, 85 */
#viewDetail .deco-79 { left: 1580.981px; top: 102.921px; }  /* 1606, 3 */

/* ============================================================================
   一覧のみ：斜めの角丸マスク＋写真（Mask group / Rectangle 3 / DSC_5122）
   ----------------------------------------------------------------------------
   マスク Rectangle 3：792.08×372.02 @ (794, -179) rotate(-45)
     W = H = (792.08 + 372.02)/√2 = 823.14（Mask group の 823.14×823.14 と一致）
     → left 794 + (823.14-792.08)/2 = 809.531 ／ top -179 + (823.14-372.02)/2 = 46.561
   中の写真 DSC_5132：813.73×543.72 @ (813.23, 27.66)（回転なし・塗りは cover）
     親の rotate(-45deg) を rotate(45deg) で打ち消し、親中心 (1205.571, 232.571)
     まわりの逆回転から、親のボックス基準の left/top を逆算している。
   ========================================================================== */
.news-photo {
  left: 809.531px; top: 46.561px;
  width: 792.08px; height: 372.02px;
  border-radius: 442.493px;
  overflow: hidden;
  transform: rotate(-45deg);
}
.news-photo img {
  position: absolute;
  left: -47.895px; top: -28.239px;
  width: 813.73px; height: 543.72px;
  object-fit: cover;
  transform: rotate(45deg);
}

/* ============================================================================
   ページ見出し
   'Futura PT' は有償フォントのため 'Jost' で代替。要差し替え。
   ========================================================================== */
.pg-h {
  width: 281px; height: 120px;
  font-family: 'Jost', 'Futura PT', 'Noto Sans JP', sans-serif;
  font-size: 60px; line-height: 120px; font-weight: 600;
  letter-spacing: 0.07em; white-space: nowrap; color: var(--navy); margin: 0;
}
.pg-lead {
  width: 740px; height: 37px;
  font-size: 30px; line-height: 36px; font-weight: 350;
  letter-spacing: 0.1em; white-space: nowrap; color: var(--navy); margin: 0;
}
#viewList   .pg-h    { left: 162px; top: 351px; }
#viewList   .pg-lead { left: 162px; top: 471px; }
#viewDetail .pg-h    { left: 206px; top: 155px; }
#viewDetail .pg-lead { left: 206px; top: 275px; }

/* ============================================================================
   一覧：白カード ＋ 3行のリスト
   Frame 70（1313×496 @ 304, 591 / padding 90px 130px）の中に
   Frame 69（1053×316 / gap 34）＝ 行60px ＋ 破線 ＋ 行60px ＋ 破線 ＋ 行60px
   → 内側の左端 434px、1行目 681px、以降 128px ピッチ
   ========================================================================== */
.list-card {
  left: 304px; top: 591px; width: 1313px; height: 496px;
  background: rgba(255, 255, 255, 0.74);
  box-shadow: 0px 0px 70px rgba(0, 27, 68, 0.2);
  border-radius: 40px;
}

/* 1行はリンク（.row-hit）で、タグ・日付・タイトル・丸矢印はその中に入れている。
   中の座標は行の左上からの相対値（SPでそのままカードとして積めるようにするため）。 */
.row-hit { left: 434px; width: 1052px; height: 60px; }
.rh1 { top: 681px; }
.rh2 { top: 809px; }
.rh3 { top: 937px; }
.row-hit > * { position: absolute; }

/* お知らせタグ（Group 21 / 23 / 22 の中の Rectangle 15 は行頭から +10.41px） */
.row-tag {
  left: 0; top: 10.41px;
  width: 157.36px; height: 39.17px;
  background: var(--grad-navy-bar);
  border-radius: 220.351px;
}
.row-tagtxt {
  left: 21px; top: 16.39px;
  width: 102.91px; height: 27.22px;
  font-size: 19.919px; line-height: 27px; font-weight: 500;
  letter-spacing: 0.1em; white-space: nowrap; color: #FFFFFF; margin: 0;
}
/* ブラウザは Figma より 1px 下にテキストを描くため top:-1px */
.row-date {
  left: 187.36px; top: -1px;
  width: 110px; height: 60px;
  font-size: 18px; line-height: 60px; font-weight: 500;
  letter-spacing: 0.1em; white-space: nowrap; color: var(--blue); margin: 0;
}
.row-ttl {
  left: 377.36px; top: -1px; height: 60px;
  font-size: 22px; line-height: 60px; font-weight: 500;
  letter-spacing: 0.1em; white-space: nowrap; color: var(--navy); margin: 0;
}
.rl1 { width: 337px; }
.rl2 { width: 434px; }
.rl3 { width: 480px; }

/* 破線の区切り（Vector 4 / 5） */
.row-sep {
  left: 434px; width: 1053px; height: 0;
  border-top: 1px dashed var(--navy);
  opacity: 0.5;
}
.rs1 { top: 775px; }
.rs2 { top: 903px; }

/* 右端の丸い矢印（Group 138 / 139 / 140）。行の左上からの相対値 */
.row-dot {
  left: 1020px; top: 14px;
  width: 32px; height: 32px;
  background: var(--navy); border-radius: 50%;
}
.row-arw { left: 1034px; top: 23px; width: 5px; height: 14px; }

/* ============================================================================
   詳細：白カード ＋ 記事
   Frame 70（1317×653 @ 287, 360 / padding 130px）の中に
   Frame 71（645×393 / gap 32）＝ 見出し60 ＋ 日付35 ＋ 本文234
   ========================================================================== */
.art-card {
  left: 287px; top: 360px; width: 1317px; height: 653px;
  background: #FFFFFF;
  box-shadow: 0px 0px 70px rgba(0, 27, 68, 0.2);
  border-radius: 40px;
}
.art-ttl {
  left: 623px; top: 490px; width: 645px; height: 60px;
  font-size: 35px; line-height: 60px; font-weight: 500;
  letter-spacing: 0.1em; white-space: nowrap; color: var(--navy); margin: 0;
}
.art-date {
  left: 623px; top: 582px; width: 645px; height: 35px;
  font-size: 18px; line-height: 36px; font-weight: 350;
  letter-spacing: 0.1em; white-space: nowrap; color: var(--blue); margin: 0;
}
.art-body {
  left: 623px; top: 649px; width: 645px; height: 234px;
  font-size: 20px; line-height: 39px; font-weight: 350;
  letter-spacing: 0.1em; white-space: nowrap; color: var(--navy); margin: 0;
}
.art-body a { font-weight: 700; text-decoration: underline; }

/* 記事本文内から公式サイト等へ誘導するボタン(.art-linksスロット経由)。
   .btnは.lbl/.arwが絶対配置の子要素なので文章の流れの中では使えないため、
   同じ見た目をinline-flexで作り直したもの。左位置は.art-bodyと揃えている。 */
.art-link-btn {
  left: 623px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 56px; padding: 0 28px;
  background: var(--navy); border-radius: 117px;
  color: #FFFFFF; font-size: 18px; font-weight: 500;
  letter-spacing: 0.1em; white-space: nowrap; text-decoration: none;
}
.art-link-btn .arw {
  width: 0; height: 0;
  border-left: 9px solid #FFFFFF;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
}

/* ---------- Entry / Contact 帯の縦位置（本体は css/style.css） ---------- */
#viewList   .ec-band  { top: 1287px; }
#viewList   .ec-panel { top: 1360px; }
#viewDetail .ec-band  { top: 1213px; }
#viewDetail .ec-panel { top: 1286px; }

/* ---------- フッターの縦位置（本体は css/style.css） ---------- */
#viewList   .ft { top: 1662px; }
#viewDetail .ft { top: 1588px; }