/* ============================================================
   wp-bridge.css  (WordPress 上で新 LP を出すための最小 CSS)
   - トップの NEWS 帯([denari_news_latest] の出力)を新 LP のトーンに寄せる
   - ログイン中に出る管理バー(#wpadminbar)とページ内リンクの位置を合わせる
   NEWS 帯の HTML は functions.php の denari_news_latest_shortcode() が出す。
   中身は Tailwind のクラス名だが、トップでは Tailwind を読み込まないので、
   タグ構造(section#news > div > a > span/time)でセレクタを書いている。
   ============================================================ */

/* html の背景色(2026-10-31 白い点滅の追加対策)。描画やページ切り替えの隙間に何か見えても、
   白ではなく FV 背景の最上部と同じ淡い水色になるようにする。style-1.css の body { background: #fff } は変えない */
html {
  background-color: #f3f9ff;
}

/* NEWS 帯の外枠(記事が無いときは空になるので非表示) */
.lp-news {
  background: #f5faff;                      /* 新 LP の淡い水色に寄せた帯 */
  border-bottom: 1px solid #d6eaf8;
}
.lp-news:empty { display: none; }

.lp-news #news {
  margin: 0;
  background: transparent !important;
  border: 0 !important;
}
/* 幅はヘッダー(.landing-header_inner__pkt_4)と同じ */
.lp-news #news > div {
  width: min(1440px, 83.5%);
  margin-inline: auto;
  padding-block: 12px;
}
.lp-news #news a {
  display: flex;
  align-items: center;
  gap: 20px;
  color: var(--navy, #081e4d);
  text-decoration: none;
}
.lp-news #news a > span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex: none;
}
/* ラベル「NEWS」: 新 LP のバッジと同じ丸いピル・青地に白(ショートコード側の style="background:#0b1d30" を上書き。2026-10-31 変更) */
.lp-news #news a > span:first-child > span {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--blue, #1157c9) !important;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .14em;
}
.lp-news #news time {
  color: #6b7f9e;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .02em;
}
.lp-news #news a > span:last-child {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--navy, #081e4d);
}
.lp-news #news a > span:last-child::after {
  content: "→";
  margin-left: 10px;
  color: var(--blue, #1157c9);
  font-weight: 700;
  transition: margin-left .3s ease;
}
.lp-news #news a:hover > span:last-child::after { margin-left: 16px; }
/* ホバーは色が青に変わる+「→」が少し動くだけ。下線は出さない(通常時・ホバー時とも。2026-10-31 変更) */
.lp-news #news a:hover > span:last-child {
  color: var(--blue, #1157c9);
  text-decoration: none;
}
.lp-news #news a:focus-visible {
  outline: 2px solid var(--blue, #1157c9);
  outline-offset: 4px;
}
@media (max-width: 1100px) {
  .lp-news #news > div { width: calc(100% - 64px); }
}
@media (max-width: 650px) {
  .lp-news { display: none; }               /* スマホでは NEWS 帯を出さない(2026-10-31) */
  .lp-news #news > div { width: calc(100% - 32px); padding-block: 10px; }
  .lp-news #news a { flex-direction: column; align-items: flex-start; gap: 4px; }
  .lp-news #news a > span:last-child { font-size: 14px; }
}

/* ログイン中(管理バーあり)は、ページ内リンクの着地位置を管理バーの高さぶん下げる */
html:has(#wpadminbar) { scroll-padding-top: 62px; }
@media (max-width: 782px) {
  html:has(#wpadminbar) { scroll-padding-top: 76px; }
}

/* PC ナビの詰め(2026-10-31 追加): ナビに「経営シミュレーション」を足して 6 項目になったため、ロゴ・ナビ・資料ボタンが
   1 行に収まらない幅だけ、ナビの文字と間隔を 1 段小さくする(style-2.css は触らずここで上書き)。
   実測(Chromium・Windows のスクロールバー 17px 込み)で、元の値のままだと 1101〜1250px(12px / 15px)で最大約 45px、
   1251〜1440px(14px / 25〜29px)で最大約 120px はみ出していた。1441px 以上は元の値のままで収まる。 */
@media (max-width:1250px) and (min-width:1101px) {
  .landing-header_navigation__2r1gV {
    font-size: 11px;
    gap: 12px;
  }
}
@media (max-width:1440px) and (min-width:1251px) {
  .landing-header_navigation__2r1gV {
    font-size: 12px;
    gap: 14px;
  }
}

/* ボタンの白点滅対策(2026-10-31 白点滅対策: グラデーション→単色の hover 遷移中に background-color が transparent から始まって背後が透けるのを防ぐ)
   style-2.css の次の要素は、基本状態が「background: linear-gradient(...)」(= background-color は transparent)、
   hover が単色、transition に background を含む。hover した瞬間に画像(グラデーション)は補間できず即座に消え、
   色だけが transparent → 単色へ 0.16〜0.18 秒かけて変わるため、その間ボタンの背後(白)が透けて見える。
   基本状態の下にグラデーションの終端色を敷き、遷移を「青 → 濃い青」にする。グラデーションの見た目は変わらない。
   セレクタは html を前に付けて元の規則より 1 段強くしている(:hover 側は 1 クラス分強いので、hover の色は今までどおり効く)。
   どれもトップだけに出る要素なので、wp-sub.css には書かない。style-2.css は触らない。 */
html .hero-section_primary__E_9_0 {                 /* FV の「資料ダウンロード」(元: linear-gradient(120deg,#075bdb,#0052cc)) */
  background-color: #0052cc;
}
html .benefits-support_downloadButton__eZslY,       /* 補助金セクションの資料ボタン(元: linear-gradient(110deg,#175bc9,#1252bd)) */
html .closing-sections_downloadButton__Qvlrg {      /* 末尾 CONTACT の資料ボタン(同上) */
  background-color: #1252bd;
}
html .technology-case-study_playMark__Ptwnk {       /* 導入事例の動画サムネイル中央の再生マーク(元: linear-gradient(135deg,#0754ce,#163c9c)。サムネイル hover で #1048ab) */
  background-color: #163c9c;
}
