/* ============================================================ TOPページ「TOPICS」バナー高解像度画像対応作成日: 2026-09-18 目的: TOPICSバナー画像を高解像度（2倍・3倍）で差し替えても、画面上の表示サイズ（PC:324×220 / SP:320×320）が変わらないようにするための追加CSSです。影響範囲: TOPページ（）内の「.block-top--topics-image」「.block-top--topics-list」にのみ適用されます。クラス名が非常に固有（TOPページの TOPICSセクション専用）のため、他ページ・他パーツの表示には影響しません。前提: このファイルをアップロードするだけでは反映されません。共通ヘッドテンプレート／共通ヘッドテンプレート（ファーストビュー用）（PC・SPどちらも）の内、block_order.cssの読み込み行の直後に下記1行を追加してください。 ============================================================ */ /* PC表示（〜324×220の枠に固定） */ body.page-top .block-top--topics-image { width: 324px; height: 220px; overflow: hidden; } body.page-top .block-top--topics-list img { display: block; width: 100%; height: 100%; object-fit: cover; /* 高解像度画像を、縦横比を保ったまま枠にフィットさせる */ } /* ------------------------------------------------------------ SP表示（2026-09-24 修正）実機確認の結果、SP側は「320px固定」ではなく、2カラムで画面幅に応じて可変する枠に正方形の画像がはめ込まれるレイアウトでした。固定pxで指定すると枠が画面幅からはみ出し、崩れの原因になっていたため、幅は親要素に追従させたまま、 aspect-ratioで正方形（320:320と同じ比率）だけを保つ形に修正しています。 ------------------------------------------------------------ */ @media screen and (max-width: 750px) { body.page-top .block-top--topics-image { width: 100%; height: auto; aspect-ratio: 1 / 1; } }