/* ============================================================
 * 当社オーバーライド層 — React 版 (michibiku.co.jp) の実装値へ寄せる
 * (docs/wordpress-migration/post-release-qa-fix-plan.md)
 *
 * main.css は先方所有・受領で上書きされるため一切編集せず、
 * ここで後勝ちさせる。各ルールに対応する QA# と React 側の
 * 出典 (コンポーネント:行) を必ず併記すること。
 * ============================================================ */

/* ---- Phase 1 ---- */

/* QA#68/#71/#75: main.css:3163 の .case-body strong { color:#009250 } は React に存在しない
   装飾 (components/ 全体で strong への指定ゼロ)。インライン color の無い strong 45箇所+
   が緑化し、h4>strong では h4 の緑 #6ABD85 まで潰していた。継承に戻す。 */
.case-body strong,
.interview-single-body strong {
  color: inherit;
}

/* QA#64: 課題/効果パネルは React の SP 値 (64px) が焼き込まれている。
   PC は CasePoint/index.tsx:106 SectionLabel = width:150px / min-height:62px、
   右テキスト SectionContent (index.tsx:119-126) = padding-left:24px。 */
@media (min-width: 769px) {
  .fXpDtg,
  .htoMey {
    width: 150px;
    min-height: 62px;
  }

  .hWoTSy {
    padding-left: 24px;
  }
}

/* QA#76: ヘッダーのナビ ul。React (NavBar.tsx:238-244 Ul) は align-items:center。
   main.css の .dFEQjA は未指定 (=stretch) のため、高さの違う子が混在すると
   アイコン・CTA の縦位置がずれる。 */
.dFEQjA {
  align-items: center;
}

/* ---- Phase 2 ---- */

/* QA#59: body の復元。main.css:682-688 に連結された HERP/LinkedIn/FB/Twitter の CSS が
   body{font:-apple-system系; line-height:1; color:#1c1e21; background:transparent} と
   html{font:…12px…} を後勝ちで宣言し全ページを汚染している。React の実値
   (_app.tsx:21 の createGlobalStyle、実測 computed: lh 24px / #313232 / #fff) へ戻す。
   HERP CSS を必要とするテンプレートは無い (v3 で /recruit/ は外部 HERP へ redirect)。 */
html {
  font-size: 16px;
}

body {
  font-family: 'ヒラギノ角ゴシック ProN', 'Helvetica Neue', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #313232;
  background: #fff;
}

/* QA#76/#78: ヘッダーを React NavBar.tsx の実値へ。
   - Right/Ul: gap は clamp(4px, 3vw, 48px) の可変 (L347-351 / L238-244)
   - Li: 高さ 48px・padding なし (間隔は gap が持つ) (L246-252)
   - ラベル: 14px w700 (L206-211。v3 は 12.5px!important に縮小していた)
   - CTA: ul 外の ButtonGroup (gap 12px) + ButtonItem 160×43 (L313-323) */
.hUyXUu {
  display: flex;
  align-items: center;
  gap: clamp(4px, 3vw, 48px);
}

.sc-c335336f-4 {
  gap: clamp(4px, 3vw, 48px) !important;
} /* v3 の gap:8px!important を上書き */

.NHFCq {
  padding: 0;
}

.sc-c335336f-1 {
  font-size: 14px !important;
} /* v3 の 12.5px!important を上書き */

.michibiku-nav-cta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.michibiku-nav-cta__item {
  width: 160px;
  height: 43px;
}

.michibiku-nav-cta__item > a {
  width: 100%;
  height: 100%;
}

/* QA#77: /case/ 一覧カードを React (pages/case/index.tsx) の実値へ。
   v3 の上書き群 (main.css:3716-3742) が React 値から乖離していた。 */
.sc-174d2cc5-5.URqGM {
  padding: 0 24px; /* CaseContent: padding-left/right 24px (L140-145。v3 は 0) */
  margin-top: 24px;
}

h3.sc-174d2cc5-7.eBHfRD {
  font-size: 24px; /* Title: 24px / lh 36px (L155-159。v3 は 20px/1.5) */
  line-height: 36px;
}

.sc-76b4fe46-2.gxgloV,
.sc-76b4fe46-3.PmmTs {
  font-size: 14px; /* CaseLabels PC 値 (CaseLabels/index.tsx:61-82。v3 は 12px) */
}

.sc-76b4fe46-4.gygkxV > div {
  font-size: 14px;
}

.sc-174d2cc5-8.hASVIA {
  margin-bottom: 0; /* 行間は .hwekcS の gap 64px が持つ (二重計上 50px を解消) */
}

@media screen and (min-width: 1024px) {
  .sc-174d2cc5-8.hASVIA {
    max-width: 410px; /* Case: width 410px (L161-169。v3 は 390px) */
  }
}

/* 一覧を 3 列にするための行コンテナ幅。main.css:2965 の .jrUfIF > div { width:95% } だと
   1440px 幅でも 1231px となり、React の 3 列幅 (410×3 + 24×2 = 1278px = max-width と同値)
   に届かず 2 列に落ちる。詳細度 (0,2,0)+子結合子で 95% 指定 (0,1,1) に勝たせる */
.jrUfIF > .post-type-archive-case-inner {
  width: 100%;
}

/* ---- Phase 3 ---- */

/* QA#67: 事例詳細のラベル行と SNS シェア。React PC (CasePc.tsx:223-230
   HorizontalContainer) は row / space-between / align-items:flex-start / gap 24px で
   同一行、SNS はラベル 1 行目と天揃え。SP (CaseSp.tsx:52-60) は SNS が上の別段。
   DOM は SNS → ラベルの順のまま、PC は row-reverse で SNS を右端に置く。 */
.michibiku-case-meta {
  display: flex;
  flex-direction: column; /* SP: SNS (DOM 先頭) が上段 = React SP と同じ */
}

@media (min-width: 769px) {
  .michibiku-case-meta {
    flex-direction: row-reverse; /* SNS (DOM 先頭) が右端・ラベルが左 */
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
  }
}

/* ---- Phase 4 ---- */

/* QA#72/#74 関連: エントリーブックの SP はテーブル見出し行を出さない
   (React BodyContentSp の th { display:none } と同じ。1番目=PC用テーブルの
   非表示切替は site-overrides.js の toggleTables が行う) */
@media (max-width: 768px) {
  .fqKnjU th {
    display: none;
  }
}

/* The production React view switches to mobile only below 768px. The received
   bundle applies several mobile rules at 768px inclusive, so explicitly restore
   the desktop component geometry at that boundary and above. */
@media (min-width: 768px) {
  .kwRNGF {
    flex-direction: row;
    align-items: stretch;
    height: 100%;
    padding: 80px 30px 125px 80px;
  }

  .deqmPO {
    width: auto;
    max-width: none;
    flex-basis: 57%;
  }

  .deqmPO > div {
    display: block;
  }

  .enxSSq {
    width: auto;
    flex-basis: 43%;
    margin-top: 0;
    padding: 70px 0 0 10px;
  }

  .kwRNGF img[alt="logo"] {
    width: 265px;
    height: 40px;
  }

  .kHHVYg {
    width: auto;
    max-width: none;
    margin-top: 32px;
    font-size: 32px;
    line-height: 48px;
    letter-spacing: 1px;
  }

  .bQeIgt {
    width: auto;
    max-width: none;
  }

  .hfdguE {
    padding: 120px 0;
  }

  .iIlTid {
    font-size: 32px;
    line-height: 1.5;
  }

  .jUDhaV {
    margin-bottom: 48px;
  }

  .michibiku-reasons {
    flex-flow: row wrap;
    gap: 0;
    margin-top: 48px;
    margin-bottom: 48px;
  }

  .michibiku-reason-card {
    flex: 0 0 410px;
    width: 410px;
    max-width: none;
    margin: 0;
    align-items: center;
  }

  .michibiku-reason-card > span {
    display: block;
    width: auto;
  }

  .foSJPu {
    font-size: 24px;
    line-height: 36px;
  }

  .btJgwF {
    width: 346.67px;
    height: 224px;
    font-size: 16px;
    line-height: 32px;
  }
}

/* ---- Phase 5 ---- */

/* QA#73: 1024-1280px 帯 (拡大表示で入りやすい帯) を React 仕様へ。
   React は wrapper (eZEqHR) の min-width:1280px + overflow-x:auto で PC レイアウトを
   維持して横スクロールさせる。main.css:1381 の @media(max-width:1280px) がこれを
   min-width:0 に殺すため、1024 以上では復元する (1024 未満は WP のレスポンシブを維持)。
   ヘッダーも React の切替点 (<1024 で SP) に合わせ、1024-1100 帯でデスクトップ表示に戻す
   (main.css:1348 は 1100 以下でハンバーガー化しており React より 76px 早い)。 */
@media (min-width: 1024px) and (max-width: 1280px) {
  .eZEqHR {
    min-width: 1280px;
    overflow-x: auto;
  }

  .hUyXUu {
    display: flex !important; /* main.css の display:none !important を上書き */
  }

  .menu-button {
    display: none !important;
  }

  /* v3 の main.jrUfIF{width:90%} だと 1280px キャンバスで 1152px となり
       /case/ の 3 列 (1278px) に届かない。React TheMain は全幅 (padding 80px 0) */
  main.sc-174d2cc5-15.jrUfIF {
    width: 100%;
  }
}

/* ---- パフォーマンス (SEO 監査 P4 / P8b) ---- */

/* ヒーロー背景: 表示幅に対して過大な 2880px 幅 (488KB) を配信していた。
   PC は 1600px / 26KB、モバイルは 900px / 15KB の候補を使う。 */
.p-hero__bg {
  background-image: url('../images/opt/main-visual-1600.webp');
}

/* PC 用の 2880px 幅 (488KB) をモバイルにも配信していた。
   モバイル幅では 900px 版 (実測 60KB 前後) で視覚的に同等。
   main.css は先方所有のため、ここで media query 上書きする。 */
@media (max-width: 767px) {
  .p-hero__bg {
    background-image: url('../images/opt/main-visual-900.webp');
  }
}

/* モバイルは .p-hero 自体も別途 2x 画像を背景に持つ (main.css:4053 の
   @media(max-width:768px) 内でグラデーションと多重指定)。こちらを上書きしないと
   結局 488KB を取得してしまうため、同じ多重背景の形で 900w 版に差し替える。 */
@media (max-width: 767px) {
  .p-hero {
    background-image: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.62) 0%,
        rgba(255, 255, 255, 0.42) 55%,
        rgba(255, 255, 255, 0.38) 100%
      ),
      url('../images/opt/main-visual-900.webp');
  }
}

/* サービス動画は操作されるまで外部 iframe を生成しない。React 版の画像・寸法を
   そのまま使い、初期表示の通信・Cookie・メインスレッド負荷だけを抑える。 */
.michibiku-video-placeholder {
  position: relative;
  width: 100%;
  max-width: 588px;
  aspect-ratio: 16 / 9;
  overflow: visible;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.michibiku-video-placeholder > picture,
.michibiku-video-placeholder > picture > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.michibiku-video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  cursor: pointer;
  transform: translate(-50%, -50%);
}

.michibiku-video-play img {
  display: block;
  width: 120px;
  height: 120px;
}

.michibiku-video-play:focus-visible {
  outline: 3px solid #126f96;
  outline-offset: 4px;
}

/* React reference: 57/43 columns use the full 1440px container. A late rule
   in the received bundle added a 48px gap and 80px right inset, shrinking the
   video from 555px to 514px at the same viewport. */
@media (min-width: 1024px) {
  .kwRNGF {
    gap: 0;
    padding: 80px 30px 125px 80px;
  }

  .deqmPO {
    max-width: none;
  }
}

/* React 版 CardSmallWrapper / CardSmall のPC寸法。移植元main.cssで削られた
   410pxカード幅と、追加された左右paddingを安定した意味クラスで復元する。 */
.michibiku-reasons {
  width: min(1230px, 100%);
  max-width: 1230px;
  padding: 0;
  flex-flow: row wrap;
}

.michibiku-reason-card {
  flex: 0 0 410px;
  width: 410px;
}

/* Lighthouse accessibility: retain the visual hierarchy with AA text contrast. */
.fuOcTC {
  color: #126f96;
}

.kSweyL, .cMmjyp {
  color: #5f6263;
}

@media (max-width: 767px) {
  .michibiku-video-placeholder {
    width: min(334px, calc(100vw - 40px));
    flex-shrink: 0;
  }

  .michibiku-video-play {
    padding: 0;
  }

  .michibiku-video-play img {
    width: 50px;
    height: 50px;
  }

  .hfdguE {
    gap: 32px;
  }

  .michibiku-reasons {
    width: 100%;
    max-width: 335px;
    padding: 0;
    margin: 0;
    flex-direction: column;
    gap: 32px;
  }

  .michibiku-reason-card {
    flex: 0 0 auto;
    width: 100%;
    max-width: 335px;
    gap: 0;
  }

  .michibiku-reason-card > span {
    display: flex;
    width: 100%;
    min-height: 223px;
    margin-bottom: 32px;
    align-items: center;
    justify-content: center;
  }

  .michibiku-reason-card .bupaVt {
    width: 100%;
    margin: 0;
  }

  .michibiku-reason-card .foSJPu {
    width: 100%;
    font-size: 22px;
    line-height: 1.4;
  }

  .michibiku-reason-card .btJgwF {
    width: 100%;
    height: auto;
    margin-top: 16px;
    font-size: 16px;
    line-height: 28px;
  }

  .p-hero__no1-note {
    font-size: 10px;
    line-height: 1.5;
  }
}

/* 企業ロゴ帯の無限アニメーション: 画面に出ている間ずっと GPU が動く。
   OS で「視差効果を減らす」を選んでいる利用者には止める (INP とバッテリーの配慮)。 */
@media (prefers-reduced-motion: reduce) {
  .sc-af49d6ed-0,
  [class*='logo-marquee'],
  [class*='scroll-x'] {
    animation: none !important;
  }
}

/* 企業ロゴ帯 (マーキー) の背景: 原寸 15016x1894 / 610KB を、表示高 432px に対して
   そのまま配信していた。比率を保った 4123x520 (151KB) に差し替える。
   表示時の描画幅は 15016*(432/1894) = 4123*(432/520) = 3425px で**完全に同一**のため、
   キーフレーム (background-position -4436px) のズレも生じない。 */
.eQPWJv {
  background-image: url('../images/opt/bg-003-520h.webp');
}

/* ---- 本文画像の縦横比 (2026-08-30) ----
   当社パッチの退行修正。サイクル9 で CLS 対策として本文画像に width/height 属性を
   注入したが、main.css:  article.case-single img / news-single / interview-single-article
   には width:90% / max-width:600px / object-fit:cover があり **height の指定が無い**。
   その結果 height 属性が presentational hint として効き、
     幅  … max-width で 600px に縮む
     高さ… 属性値のまま (例 630px)
   となって比が崩れ、object-fit:cover で画像の一部が切れていた。
   実測 /case/shikigaku/: 自然比 945x630 (1.5) に対し描画 600x630 (0.95)。
   現行 React 版は属性が無いため height:auto となり 351x234 (1.5) で正しい。

   width/height 属性を付けたら height:auto をセットで指定する、が原則
   (属性は「比を先に伝えて CLS を防ぐ」ためのもので、寸法の固定ではない)。
   アイキャッチはインライン style で height:auto を持つため元から影響を受けていない。
   main.css は先方所有のためここで上書きする。 */
article.case-single img,
article.news-single img,
article.interview-single-article img {
  height: auto;
}

/* ---- ヘッダー CTA「お問い合わせ」の枠と地色 (2026-08-30) ----
   現行サイトとの差分修正。受領テーマ v2 (c0f7257) が main.css:4312-4318 で

     a.sc-1496dfe0-6      { border: 1.5px solid #5ab483 !important; color: #5ab483 !important }
     .sc-1496dfe0-9,
     .sc-1496dfe0-10      { padding:0 !important; height:auto !important;
                            border:none !important; background:transparent !important }

   を入れており、React の Button 実装 (main.css:15,10 の .hFDrGt / .ePtmWM が原本)
     -9 … グラデーション枠 (padding:1px の下地)
     -10… 白の塗り (line-height:48px)
   を両方消して「単色枠・地色なし」のボタンに作り替えていた。

   これは v2 当時 CTA が li.sc-c335336f-6 配下にあり、同ブロックの 36px 縮小ハック
   (main.css:4300-4311) で二重枠が潰れて見えたことへの対処と思われる。QA#78 で CTA を
   ul の外 (.michibiku-nav-cta) へ出して縮小ハックの適用外にした時点で不要になったが、
   この 2 本はクラス単独セレクタのため残り続けていた。

   実測 (1440px / トップ):
     現行 https://michibiku.co.jp/  -9 160x50 グラデーション枠 + -10 白地   → 白いピル
     WP   修正前                     -9/-10 とも背景なし・a に単色枠 160x43 → 素通し
   トップはヘッダーが透過 (position:absolute) のため、地色が無いと背後の
   ヒーロー画像が透けて現行サイトと明確に異なって見える。

   main.css は先方所有 (取り込みは無改変が原則) のためここで打ち消す。
   .michibiku-nav-cta 配下に限定し、他の -9/-10 利用箇所には影響させない。
   a 側の color は残す: 文字は -8 の background-clip:text で描くため見えないが、
   グラデーション文字が使えない環境ではこの色にフォールバックする。 */
.michibiku-nav-cta a.sc-1496dfe0-6 {
  border: 0 !important; /* 現行: border なし (枠は -9 のグラデーションが描く) */
}

.michibiku-nav-cta .sc-1496dfe0-9 {
  padding: 1px !important; /* main.css:15 .hFDrGt の原本値 */
  background: linear-gradient(225deg, #6abd85 0%, #6abd85 0.01%, #69bd86 0.02%, #20a3d9 100%) !important;
  border-radius: inherit;
}

.michibiku-nav-cta .sc-1496dfe0-10 {
  background: #fff !important; /* main.css:10 .ePtmWM の原本値 */
  border-radius: inherit;
}

/* ---- /security/ サイバー攻撃対策サイトシール (2026-09-02) ----
   GMO サイバーセキュリティ byイエラエのサイトシールをフッターから
   セキュリティページ「その他…の取り組み」の 1 項目へ移設したときに追加。

   掲示枠は常時描く。GMO の許可ドメイン外 (localhost / 検証用 CloudFront) では
   シール画像が返らないため、枠まで隠すと「どこに何が載るのか」が分からなくなる。
   枠だけ先にある状態を正とする。

   体裁はテーマ既存のトークンで組む。白地・角丸 4px・影 2px 2px 4px rgba(49,50,50,.1)
   はフッターの掲示プレート (main.css の .chxjvh / .fWzxhz — ISMS バッジと、移設前の
   シールが使っていたもの) と同値。輪郭の rgb(225,227,230) は main.css がパンくずの
   区切り線などに使っている中間グレー。白背景の上でも枠として読めるよう 1px 足す。

   高さは 72px で固定する。シール画像は公式スクリプトが src を差し込むまで
   display:none なので、固定しておかないと表示された瞬間に後続が動く。
   (移設時点から固定済みで、この変更でも 0 のまま維持する。) */
.michibiku-siteseal {
  align-self: flex-start; /* 枠をシールの幅に収める (親は flex column) */
  margin-top: 16px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 126px; /* シール 100px + 左右 padding 12px + 枠線 1px = 表示前後で同じ幅 */
  height: 72px; /* 表示前後で高さを変えない (CLS 対策) */
  padding: 0 12px;
  border: 1px solid rgb(225, 227, 230);
  border-radius: 4px;
  background: #fff;
  box-shadow: 2px 2px 4px rgba(49, 50, 50, 0.1);
  /* 公式スクリプトは img へ display:inline を直接書き込む。行ボックスの
     leading が入ると確保した高さを超えるため、この節だけ leading を殺す。 */
  line-height: 0;
}

#csi_siteseal_image {
  max-width: 100%;
  height: auto;
}

@media (max-width: 768px) {
  /* 縦積みになると見出しとアイコンが中央寄せになるので、枠も中央に置く。 */
  .michibiku-siteseal {
    align-self: center;
  }
}

/* ---- ヒーローバナー背景の配信形式 (2026-09-02) ----
   main.css の .p-hero__banner は背景に 1727x544 の PNG (564KB) を指定していた。
   この規則はクリティカル CSS へ inline されるため初期 viewport で必ず取得され、
   指針の「初期viewport内の画像合計 250KB以下」を単体で超えていた
   (Lighthouse の "Improve image delivery" 397.9KiB もこれ)。

   実測 (表示サイズ 863x272 へ縮小して比較):
     PNG  564,044 bytes
     WebP  23,156 bytes  最大チャンネル差 9 / 255 (閾値 24 超の画素 0)
     AVIF  10,832 bytes  最大チャンネル差 10 / 255 (同上)

   画像は滑らかな淡いグラデーションで、可視の劣化なく 96-98% 削減できる。
   下の linear-gradient は main.css の 2 枚目のレイヤーをそのまま維持する。
   image-set() 非対応の環境ではこの宣言ごと無効になり、main.css の PNG 指定に
   落ちるだけなので、フォールバックは cascade が担保する。 */
/* main.css は max-width:768px で背景をグラデーションだけに差し替え、意図的に
   この図版を出していない。無条件に上書きすると mobile に図版が復活してしまうため、
   図版を使う desktop 側だけに限定する。 */
@media (min-width: 769px) {
  .p-hero__banner {
    background-image:
      image-set(
        url('../images/hero/fv-burnner-bg@2x.avif') type('image/avif'),
        url('../images/hero/fv-burnner-bg@2x.webp') type('image/webp'),
        url('../images/hero/fv-burnner-bg@2x.png') type('image/png')
      ),
      linear-gradient(146.84deg, #fafeff 24.26%, #ddf1f7 100%);
  }
}

/* ---- 資料ダウンロードボタンのアイコン比率 (2026-09-02) ----
   index/bg-001.webp は 120x101 (比 1.188) だが、CSS が width を % で与える一方
   height は width/height 属性の 20px が使われ、29x20 (比 1.45) に潰れていた
   (Lighthouse "Displays images with incorrect aspect ratio")。
   width/height 属性を付けたら height:auto をセットで指定する、の原則どおりに直す。 */
.p-hero__btn-icon,
.LgSbC {
  height: auto;
}

/* ---- ヘッダーナビ「ミチビク社について」の字面 (2026-09-02) ----
   main.css:4320 の

     .dropdown-toggle { … font: inherit; }

   は font ショートハンドなので、font-weight / font-size / line-height をまとめて
   継承値へ戻す。ボタンに付いている .iJaoVV (main.css: font-size:14px;
   font-weight:700; line-height:14px) と詳細度が同じでソース順が後のため、
   隣のリンク 4 本が 700 / 14px なのにプルダウンボタンだけ 400 になっていた
   (検証環境で実測)。

   ボタンの UA 既定フォントを消す目的自体は正しいので font:inherit は残し、
   打ち消されたぶんだけ戻す。値は .iJaoVV と同一で、乖離したら
   tests/wp-media-accessibility.test.js が落ちる。 */
.dropdown-toggle {
  font-size: 14px;
  font-weight: 700;
  line-height: 14px;
}

/* ---- グローバルヘッダーのロゴの垂直中央 (2026-09-03) ----
   ロゴ img (.bcIEDd) は main.css では display:inline のまま。インラインの
   replaced element は baseline の上に乗るので、親 <a> の行ボックスには
   descender ぶんの余白が下に付く。実測では <a> が 42px、ロゴが 36px で
   下に 6px。<a> 自体は flex 親 (.dNIWlQ) が中央へ置くため、結果として
   中のロゴだけがヘッダー中心から 3.5px 上へずれていた (1440 / 390 とも)。

   インラインの行ボックスから外せば解消する。display:block と display:flex は
   実測で同一 (ズレ -0.5px = 80px ヘッダーと 36px ロゴの端数)。img は replaced
   element なので align-items は効かず、効いているのは display の変更のほう。
   意図が読めるよう block を使う。vertical-align:middle は 390px で 1.81px
   残るため採らない。 */
.bcIEDd {
  display: block;
}