@charset "UTF-8";
/* =========================================================
   KG（キロテープ）独自スタイル

   ・スクマネ標準（common.css）やモック（style.css / sp.css / overwrite.css）で
     足りない部分・調整したい部分をここに追記する。
   ・全ページで読み込まれる。layout-kg.html の CSS の最後で読み込むため、
     account.css 〜 overwrite.css より後に適用される（同じ詳細度なら後勝ち）。
   ・編集元はこのファイル。編集後は /resource/css/original-sample.css へ
     アップロードすること。
   ========================================================= */

/* ---------------------------------------------------------
   ページタイトル（h1.page-header）と本文の重なり対策

   ■ 現象
   下層ページ全般で、ページタイトル直下の本文（STEPナビ・フォーム・テーブル等）が
   タイトルの下線に食い込んで表示される。

   ■ 原因
   ・common.css（スクマネ標準）  .content-header { margin-bottom: 50px }
   ・style.css:906             .content-header { margin-bottom: 0 }  ← 標準を打ち消している
   ・style.css:4360            .page-header::before（斜めストライプ画像）
                               position: relative; top: 1rem
   ・style.css:4375            .page-header::after（下線）
                               position: absolute; bottom: -1rem
   ::before と ::after はどちらも .content-header のボックスから 1rem 下にはみ出す。
   一方でスクマネ標準ページの .content 直下は上マージンを持たない要素が来るため、
   下余白 0 だとタイトルに重なってしまう。

   ■ 対応
   .content-header に下余白を戻す。下線のさらに下に余白を取ることで全ページまとめて回避する。
   ※トップページは .page-detail-top .content-header { display: none } のため影響なし。
   --------------------------------------------------------- */
.content-header {
  margin-bottom: clamp(9rem, 6rem + 3vw, 18rem);
}

/* ---------------------------------------------------------
   ページ個別の打ち消し

   本文が独自に十分な上余白を持っているページでは、上記の下余白が
   二重になって間延びするため打ち消す。

   ・キロテープビジョン（/page/vision）
       本文先頭の .p-vision-mvv が padding-top を約175px持っているため、
       .content-header の下余白は不要。

   ページ固有のクラスは .content-wrapper に page-detail-<ページのURL> の形で
   付与される（body 側は body-page-detail-<ページのURL>）。
   他のページでも同様に打ち消したい場合はセレクタを追加すること。
   --------------------------------------------------------- */
.page-detail-vision .content-header {
  margin-bottom: 0;
}