区切り）として描画しているため、子 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 は後読み込み）で反映される。 */ .p-career__memberDescription { line-height: 2; text-align: justify; } /* 確認シートNo.50: NOTE詳細(/media/[slug]) 記事本文。旧テーマは本文段落に `.l-mediaContent>p{margin:24px 0;text-align:justify}`（段落間24px・両端揃え）を意図していた。 だが Payload Lexical の
でラップして出力するため、
直接子セレクタ `.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;
}
/* 確認シートNo.49: NOTE詳細(/media/[slug]) の「記事をシェア」ブロック。
旧テーマ main.css には .p-mediaShare__title / __buttons / __button の各ルールはあるが、
ラッパ .p-mediaShare 自体・アイコン画像(.p-mediaShare__button img)・コピー完了トースト
(.p-mediaShare__copied) のルールが無い。React移植でこれらを追加描画したため、
セクションが本文へ密着し、アイコンが 32px 指定のみで余白/中央寄せが不安定だった。
旧サイトの見た目（本文と関連記事の間に独立ブロックとして表示）に整える。 */
.p-mediaShare {
margin-top: 48px;
}
.p-mediaShare__button img {
width: 32px;
height: 32px;
display: block;
}
.p-mediaShare__copied {
display: inline-flex;
align-items: center;
margin-left: 8px;
font-size: 13px;
line-height: 1;
color: #7a7574;
}
/* 確認シート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%} に倣う。 */
.p-bottomCta {
margin-top: 80px;
}
.p-bottomCta .l-container {
display: flex;
gap: 8px;
justify-content: center;
flex-wrap: wrap;
}
.p-bottomCta__button {
width: 252px;
max-width: 100%;
}
/* [task-343] 実績・メディア本文の画像が「めちゃめちゃ縦長」に伸びる不具合の修正。
原因: main.css の `.l-mediaContent img{width:100%}` は横幅だけ100%にし height:auto が無い。
RichText(RichText.tsx)は Media の width/height を ![]()
の width/height 属性として付与するため、
コンテナ幅に合わせて横が縮んでも height 属性の固定pxが残り、縦横比が壊れて縦に伸びていた
（特に元が縦長/幅狭の画像で顕著）。
対処: width を固定せず(width:auto)・コンテナ幅を上限(max-width:100%)・高さは比率追従(height:auto)にする。
→ 横長スクショ等はこれまで通りほぼ全幅、縦長画像は正しい縦横比の実寸（コンテナ幅上限）で表示される。 */
.l-mediaContent img {
width: auto;
max-width: 100%;
height: auto;
}
/* [task-237] 追従CTA（お問い合わせ・ご相談 / 会社案内ダウンロード）の表示レンジを
「PC と スマホのみ」に限定する。
旧テーマ main.css の設計:
～879px … 画面下部の固定バー（SP）
880px～1023px … 同じ下部バーのまま（padding だけ変わる） ← ここが不要
1024px～ … 画面右の縦向きパネル（PC）
is--spOnly クラスを付けると 880px 以上で消えるが、それだと PC でも消えてしまうため
task-032 で外した経緯がある（SiteFooterArea.tsx のコメント参照）。
結果として中間のタブレット幅だけ「下部バーが出たまま」になっていた。
ここでは 880〜1023px の帯だけを非表示にする。SP(～879px)と PC(1024px～)は従来どおり。
ブレークポイントは端末の物理幅という技術的定数で、運用者が調整する値ではないため CSS に置く。 */
@media (min-width: 880px) and (max-width: 1023.98px) {
.p-fixCta {
display: none;
}
}