/* フェーズ5: JS挙動をReactへ移植（ThemeBehaviors）。ここは移植の補助オーバーライド。 */

/* [task-335] 目次(lwptoc)の装飾は **テーマ本体 main.css の `.lwptoc …` 群が正**（全幅グレー箱・
   濃色太字リンク・トグル非表示など）。以前ここへ LuckyWP プラグインCSS(lwptoc-light 等)を移植したが、
   セレクタ特異度が高く後読みのため、テーマ本来の目次スタイルを打ち消して見た目が別物になっていた。
   → プラグインCSSの移植は撤去し、テーマの `.lwptoc` に委ねる（必要なマークアップは MediaToc.tsx が出す）。
   目次生成=lib/toc.ts、見出しアンカー(#lwptocN)=components/RichText.tsx。 */

/* mainFadeIn: ThemeBehaviors が js-layoutMain の is--hide を外して opacity 0→1 でフェードイン
   （.l-layout__main は main.css で transition:opacity .7s を持つ）。
   一般ユーティリティ .is--hide{display:none} が main に効いて消えるのを防ぎ、opacityベースに固定。 */
.l-layout__main.is--hide {
  display: block !important;
  /* フェードインは main.css の layoutMainIn（JS を待たずに CSS だけで表示する） */
}

/* 未移植のスクロール出現系クラスが残っていても隠れないように可視化（保険） */
.js-reveal, [data-inview] { opacity: 1 !important; transform: none !important; }

/* task-197: トップ(/)＝実績ページを直接開いた際、ヘッダー現在地の上辺4px黒バーが
   出ないという指摘。真因の大半は .next キャッシュ/古い dev サーバーによる旧コード配信で、
   現行コード(SiteHeader.tsx は is-current を正しく付与／main.css の .is-current span::before も
   一致)ではクリーンビルドで正しく表示される。
   ただし初期(非fixed)状態のトップでは header 背景が透明・バーが y=0(画面最上端)に来るため、
   トランジション/ハイドレーション途中に一瞬消えて見えうる。ここでは既存ルールと同値
   (translateY(0)=表示) を高specificityかつ !important で再宣言し、
   「現在地の項目には必ず上辺4px黒バーが出る」ことを状態非依存で保証する（他ページの挙動は不変）。 */
.l-header .l-header__navItem.is-current span::before {
  transform: translateY(0) !important;
}

/* 確認シートNo.4: TOP実績カードの担当者名リンク(/member/...)が、カード全面を覆う
   .p-topProjects__overlayLink(z-index:3)にクリックを奪われ、事例ページへ遷移してしまう。
   氏名リンクは既に position:relative なので z-index を上げて前面化し、クリックを取り戻す。 */
.p-topProjects__author span a { z-index: 4; }

/* 確認シートNo.1: TOP FVの大きな数字（累計支援企業数800社以上 / 累計プロジェクト数1,000以上 /
   累計売上貢献額4,200億以上 等）。旧テーマでは .p-topHero__achievementItemNumber に font-family の
   明示が無く body(Noto Sans JP)を継承していたため、他ページの実績数字（.p-nice__featureNumber,
   .p-memberHistory__year, .p-career__giveItemNumber など＝すべて "Public Sans"）と欧文フォントが
   食い違い、旧サイトと見た目が異なっていた。FV数字も欧文/数字の共通フォント "Public Sans" に統一する。
   （"Public Sans"/"Noto Sans JP" のWebフォント自体は layout.tsx の <head> で Google Fonts 読み込み） */

/* 確認シートNo.23/No.44: 採用情報(/career) メンバー詳細の本文（.p-career__memberDescription）。
   旧テーマは `.p-career__memberDescription p{line-height:2;text-align:justify}` と
   `.p-career__memberDescription p+p{margin-top:16px}` で「行間2・両端揃え・段落間16px」を意図していた。
   だが現行のReact移植では本文を <p> でなく <div class="p-career__memberDescription"> 直下の
   テキスト（<br>区切り）として描画しているため、子 p を対象にした旧ルールがどれも一致せず、
   本文が body 既定(line-height:1.8) かつ text-align 未指定(左寄せ)になっていた。
   → No.44(行間が旧サイトと違う)= line-height 1.8→2、No.23(右端の改行ラインが揃わない)= 両端揃え無し が原因。
   div 自身へ旧 p ルールと同値(line-height:2 / text-align:justify)を当てて旧サイトに一致させる。
   セレクタは .p-career__memberDescription 単体で main.css の p 子セレクタと同 specificity のため
   後勝ち（override は後読み込み）で反映される。 */

/* 確認シートNo.50: NOTE詳細(/media/[slug]) 記事本文。旧テーマは本文段落に
   `.l-mediaContent>p{margin:24px 0;text-align:justify}`（段落間24px・両端揃え）を意図していた。
   だが Payload Lexical の <RichText> は本文全体を <div class="payload-richtext"> でラップして出力するため、
   直接子セレクタ `.l-mediaContent>p` / `>ul` / `>ol` / `>*:first-child` / `>*:last-child` が
   すべて一致しなくなり、段落が destyle 既定の margin:0（＝上下余白なし）＋左寄せになっていた。
   （font-size:16px / line-height:2 は子孫セレクタ `.l-mediaContent p` なので一致し効いている）
   → No.50(文字サイズ・行間が旧サイトと違う)の実体は「段落間の余白が潰れて詰まって見える＋右端がラギング」。
   ラッパ .payload-richtext を挟んだ形へ旧 直接子ルールを再適用して旧サイトの版面に戻す。 */
.l-mediaContent .payload-richtext > p {
  margin: 24px 0;
  text-align: justify;
}
.l-mediaContent .payload-richtext > ul,
.l-mediaContent .payload-richtext > ol {
  margin: 24px 0;
}
.l-mediaContent .payload-richtext > *:first-child {
  margin-top: 0;
}
.l-mediaContent .payload-richtext > *:last-child {
  margin-bottom: 0;
}

/* ===== シェアバー（src/components/cms/ShareButtons.astro）=====
   実績詳細と記事詳細で共通。見た目はここだけで決める。本文と著者情報の後に 1 本だけ置く */
.p-mediaShare__title{margin:0 0 24px;font-family:var(--font-copy);font-size:var(--fs-18);font-weight:var(--fw-bold);line-height:1.4}
.p-mediaShare__buttons{display:flex;gap:4px}
/* ds-allow:raw-button -- シェアバー（ShareButtons）のアイコンの枠。行動のボタンではない */
.p-mediaShare__button{flex:1 1 0;display:flex;align-items:center;justify-content:center;height:48px;border:var(--border);border-radius:var(--r-pill);
  background:var(--color-bg);transition:border-color .35s var(--ease)}
.p-mediaShare__button:hover{border-color:var(--color-line-strong)}
.p-mediaShare__button img{display:block;width:32px;height:32px}
.p-mediaDetail__share,.p-casePost__infoSection{margin-top:64px}

/* 確認シートNo.6: 旧TOP最下部の2CTAボタン(.p-bottomCta)。旧テーマ main.css に .p-bottomCta の
   定義が無い(未コンパイル)ため、ヒーローの .p-topHero__cta 相当のレイアウトを補う。
   ヒーロー: .p-topHero__cta{display:flex;gap:8px} / .p-topHero__ctaButton{width:252px;max-width:100%} に倣う。 */

/* [task-343→修正] 実績・メディア本文の画像の幅制御。
   本番WP(renewal0829 main.css)は `.l-mediaContent img{width:100%}` で本文画像を**一律フル幅**にしている
   （width属性やsize-full/medium指定に関わらず常にコンテナ幅いっぱい＝これが本番のデフォルト挙動）。
   task-343 で「縦長画像が縦に伸びる」不具合を直す際、height:auto を足すだけで足りたのに width:auto まで
   足してしまい、**原寸幅がコンテナ未満の画像がフル幅にならず小さいまま**になる回帰を生んでいた。
   対処: 本番同様 width:100%（＝常にフル幅）に戻し、縦伸び対策の height:auto は維持する。
   RichText/ImageBlockView は Media の width/height を <img> 属性に付けるため、height:auto が無いと
   縦横比が壊れる（＝task-343の縦伸び）。width:100% + height:auto で「フル幅かつ比率追従」を満たす。 */
.l-mediaContent img {
  width: 100%;
  max-width: 100%;
  height: auto;
}

/* [目次フォント] 本番WPは LuckyWP TOCプラグインCSS `.lwptoc-baseItems .lwptoc_items{font-size:90%}` で
   目次の第1階層(大項目)を本文16px×90%=約14.4pxに縮めている。新サイトはこのプラグインCSSを読み込まず
   テーマCSS(main.css)だけを流用しているため第1階層が本文16pxのまま大きく出る差異があった。
   本番プラグインの該当ルールを移植して第1階層を本番に合わせる（第2階層14px・タイトル16pxは main.css で一致済み）。 */
.l-mediaContent .lwptoc-baseItems .lwptoc_items {
  font-size: 90%;
}

/* 目次の箱は角丸。記事詳細・実績詳細で同じ見た目（ページの CSS で上書きしない） */
.l-mediaContent .lwptoc .lwptoc_i{overflow:hidden;border-radius:var(--r-card)}

/* [E-79] SPナビ開閉修正: 旧テーマはJSで inline height を測って開いていたが、Reactは is--open クラスのみ。
   is--open 時に container/wrap の height を開く（閉は base の height:0）。max-height+overflow-y で高さは抑制。
   ・サービス詳細のアンカーナビ(.c-sidebarNav__wrap)  … ①
   ・NOTE一覧の下固定カテゴリ絞り込みナビ(.p-mediaSidebar__container) … ③ */

/* [#79][RUN005/T-11] /download 本文リストの行送りが旧より詰まり、下の資料サムネイル画像が
   約2行分ズレていた問題。
   旧テーマ main.css は本文を `.l-download__content > p{line-height:2}` /
   `.l-download__content ul{margin:8px 0}` / `.l-download__content li+li{margin-top:4px}` /
   `.l-download__content p+p{margin-top:24px}` で組んでいる（段落間・リスト行間の余白）。
   だが Payload Lexical の <RichText>（disableContainer 未指定）は本文を
   <div class="payload-richtext"> でラップして出力するため、No.50(NOTE本文)と同様に
   段落・リストの隣接/直下関係が1枚のラッパで断たれ、段落間 margin(24px) と
   リスト前後の余白(8px)が潰れて全体が上に詰まっていた。
   → ラッパ .payload-richtext を挟んだ形へ旧 main.css と同値の余白を再適用して版面を旧へ戻す。
   値は main.css からの写し（line-height:2 / p 段落間 24px / ul 上下 8px / li+li 4px）で、
   旧サイトへ近づける方向のみ（新規デザインの追加ではない）。 */

/* [#174/#215] メディア記事の Q&A・強調ボックスの Gutenberg 色クラス/背景色を忠実再現。
   移行時に段落の color/background が Lexical に残らないため（convertHTMLToLexical が捨てる）、
   色付き <p> は生HTML保持ブロック(.block-html・wpHtmlBlock.ts splitColoredParagraphs)として保持し、
   ここで Gutenberg 定番パレットの実色を当てる。値は WP core 既定パレット準拠。
   基準ページ(/media/knowledge/11057・11070)で実測して微調整すること（旧サイトが子テーマで
   パレットを上書きしている可能性あり）。inline style="background-color:#…"(#f3f3f3/#312a27 等)は
   生HTMLに保持されそのまま効くため列挙不要＝has-background にはボックスの余白/角丸だけ与える。 */
/* ds-allow:raw-color -- 記事本文（旧CMS）の色クラス。WordPress 既定パレットの色をそのまま出す */
.l-mediaContent .block-html .has-vivid-cyan-blue-color { color: #0693e3; }
/* ds-allow:raw-color -- 記事本文（旧CMS）の色クラス。WordPress 既定パレットの色をそのまま出す */
.l-mediaContent .block-html .has-vivid-cyan-blue-background-color { background-color: #0693e3; }
/* ds-allow:raw-color -- 記事本文（旧CMS）の色クラス。WordPress 既定パレットの色をそのまま出す */
.l-mediaContent .block-html .has-cyan-bluish-gray-color { color: #abb8c3; }
/* ds-allow:raw-color -- 記事本文（旧CMS）の色クラス。WordPress 既定パレットの色をそのまま出す */
.l-mediaContent .block-html .has-cyan-bluish-gray-background-color { background-color: #abb8c3; }
.l-mediaContent .block-html .has-white-color { color: var(--color-text-on-dark); }
.l-mediaContent .block-html .has-white-background-color { background-color: var(--color-bg); }
.l-mediaContent .block-html .has-black-color { color: var(--color-text); }
.l-mediaContent .block-html .has-black-background-color { background-color: var(--color-bg-dark); }
/* has-background = 色付きボックスのレイアウト（余白・角丸）。背景色自体は inline style で個別指定される。 */
.l-mediaContent .block-html p.has-background {
  /* 旧サイト実測（/media/knowledge/11057 の Q&Aボックス）: padding 22.5px 42.75px */
  padding: 22.5px 42.75px;
  border-radius: var(--r-inner);
}
/* 親 <p> が文字色指定のとき、内側 <strong> も同色を継ぐ（Q：/A：の白/シアン文字） */
.l-mediaContent .block-html p.has-text-color strong { color: inherit; }
/* font-size / text-align プリセット（旧 core 既定・要 vdiff 採寸） */
.l-mediaContent .block-html .has-small-font-size { font-size: var(--fs-13); }
.l-mediaContent .block-html .has-large-font-size { font-size: var(--fs-40); }
.l-mediaContent .block-html .has-text-align-center { text-align: center; }
.l-mediaContent .block-html .has-text-align-left { text-align: left; }

/* 「リンクをコピー」のお知らせ（src/scripts/site.ts の initCopy） */
.p-mediaShare__button.js-copy{position:relative}
.p-mediaShare__toast{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);padding:6px 10px;border-radius:var(--r-inner);
  background:var(--color-bg-dark);color:var(--color-text-on-dark);font-size:var(--fs-12);line-height:1.4;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .2s}
.p-mediaShare__toast:empty{padding:0}
.p-mediaShare__button.is--copied .p-mediaShare__toast{opacity:1}

/* ---------- 記事詳細（NOTE）・実績詳細で共通の見た目 ----------
   2 つのページはそろえる。ここだけを直し、note-contact.css・case.css で上書きしない（このファイルが最後に読まれる）
   見出し：h1 32／28px・本文の h2 24／20px（上下に線）・h3 20／18px・「関連する〜」28／24px。本文の行間は 200%
   右の列：PC 320px・上から 96px で止まる */
:is(.p-mediaDetail__title,.p-casePost__main > .p-casePost__pageHead .p-casePost__heading){font-size:var(--fs-32)}
:is(.p-mediaDetail__content,.p-casePost__content) h2{margin:72px 0 28px;padding:24px 0;border-top:1px solid var(--color-line);border-bottom:1px solid var(--color-line);font-size:var(--fs-24)}
:is(.p-mediaDetail__content,.p-casePost__content) h3{font-size:var(--fs-20)}
/* 目次のリンクで飛んだ見出しは、上から 96px で止まる */
:is(.p-mediaDetail__content,.p-casePost__content) :is(h2,h3,h4)[id]{scroll-margin-top:96px}
:is(.p-mediaDetail__content,.p-casePost__content) :is(p,li,dd,td,th,blockquote){line-height:2}
:is(.p-mediaDetail__relatedTitle,.p-caseRelated__title){font-size:var(--fs-28)}
@media(min-width:960px){
  :is(.p-mediaSidebar,.p-casePost__aside){width:320px;flex:none;top:96px}
}
@media(max-width:959px){
  :is(.p-mediaDetail__title,.p-casePost__main > .p-casePost__pageHead .p-casePost__heading){font-size:var(--fs-28)}
  :is(.p-mediaDetail__content,.p-casePost__content) h2{margin-top:56px;padding:20px 0;font-size:var(--fs-20)}
  :is(.p-mediaDetail__content,.p-casePost__content) h3{font-size:var(--fs-18)}
  :is(.p-mediaDetail__relatedTitle,.p-caseRelated__title){font-size:var(--fs-24)}
}

/* 記事本文の FAQ（body.ts で共通のアコーディオン .c-accList.block-faq に変換）：前後の余白 */
.l-mediaContent .c-accList.block-faq{margin:48px 0}
/* 答えの段落：本文の段落の余白（上下 24px）を打ち消して、共通のアコーディオンと同じ 12px に */
.l-mediaContent .c-acc__text p{margin:0}
.l-mediaContent .c-acc__text p + p{margin-top:12px}

/* Article summary and compact author information share the original outlined box. */
.p-mediaDetail__whatKnows { position: relative; margin: 64px 0 48px; padding: 28px 24px; border: 1px solid var(--color-line-strong); background: var(--color-bg); }
.p-mediaDetail__whatKnowsTitle { position: absolute; left: -1px; top: 0; transform: translateY(-100%); margin: 0; padding: 10px 16px; background: var(--color-bg-dark); color: var(--color-text-on-dark); font-size: var(--fs-14); line-height: 1.3; font-weight: var(--fw-bold); }
.p-mediaDetail__whatKnowsList { margin: 0; padding: 0; list-style: none; }
.p-mediaDetail__whatKnowsList li { position: relative; margin: 0; padding-left: 40px; line-height: 1.65; font-weight: var(--fw-bold); }
.p-mediaDetail__whatKnowsList li + li { margin-top: 12px; }
.p-mediaDetail__whatKnowsList li::before { content: ''; position: absolute; left: 5px; top: .5em; width: 14px; height: 8px; border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); }
.p-mediaDetail__summaryAuthors { border-top: 1px solid var(--color-line-strong); margin-top: 24px; padding-top: 20px; }
.p-mediaDetail__summaryAuthorHeading { margin: 0 0 12px; font-weight: var(--fw-bold); }
.p-mediaDetail__summaryAuthor { display: flex; align-items: center; gap: 16px; color: inherit; text-decoration: none; }
.p-mediaDetail__summaryAuthor + .p-mediaDetail__summaryAuthor { margin-top: 20px; }
.p-mediaDetail__summaryAuthorPhoto { flex: 0 0 72px; width: 72px; height: 72px; border-radius: 50%; object-fit: cover; }
.p-mediaDetail__summaryAuthorText { flex: 1; min-width: 0; }
.p-mediaDetail__summaryAuthorName { margin: 0 0 4px; font-size: var(--fs-14); font-weight: var(--fw-bold); }
.p-mediaDetail__summaryAuthorBio { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; margin: 0; font-size: var(--fs-13); line-height: 1.8; overflow-wrap: anywhere; }
.p-mediaDetail__summaryAuthor:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
@media (max-width: 767px) { .p-mediaDetail__whatKnows { padding: 24px; margin: 64px 0 36px; } }