/**
 * 下層固定ページ（Layouts/default.php・default_freeform.php）専用の補完スタイル
 *
 * header は /start/assets/css/style.min-2.css の指定で、デスクトップ幅では
 * 常時（特定の幅レンジ限定ではなく無条件で）左20vw幅の固定サイドバーになる仕様。
 * 同じstyle.min-2.css内で .content-wrap には
 *   .content-wrap{width:calc(100% - 20vw);margin-left:20vw}
 *   @media (max-width:1023px) and (orientation:portrait){
 *     .content-wrap{width:calc(100% - 0vw);margin-left:0}
 *   }
 * という対応オフセットが無条件で組み込まれているが（examination配下のページで
 * 重ならないのはこのため）、/start/css/style.css 側の .c-page-sub__base には
 * 同等の対応が存在しない。.content-wrap と全く同じロジックで .c-page-sub__base
 * にもオフセットを効かせる。theme/start/ 側に置き、htdocs/start/ 配下（元の納品物）は変更しない。
 */
.c-page-sub__base {
	width: calc(100% - 20vw);
	margin-left: 20vw;
}
@media screen and (max-width: 1023px) and (orientation: portrait) {
	.c-page-sub__base {
		width: 100%;
		margin-left: 0;
	}
}

/**
 * 過去メモ: 以前ここに、examination-system-link-listの外部リンクアイコン崩れと
 * bodyのfont-size/line-height崩れに対する上書きCSSがあった。
 * どちらも原因は `theme/start/css/bge_style.css` が旧fitplusテーマ流用の
 * 別物（normalize.css一式＋サイト全体向けbody基本スタイル込みの5820行ファイル）に
 * すり替わっていたことだったため、同ファイルをBurgerEditor本体の正しい既定CSS
 * （app/Plugin/BurgerEditor/webroot/css/bge_style.css の内容）に置き換えて
 * 根本修正した。この上書きは不要になったため削除。
 */

/**
 * BurgerEditor「タイトル（title-h2）」ブロックの色付き見出し（.bge-title-h2 + .yellbg等）
 *
 * 上記の通りbge_style.cssを正しい既定CSSに差し替えたことで、旧ファイルに紛れ込んでいた
 * この見出し装飾（背景色付きバー＋白文字）も同時に失われた。定義自体は
 * htdocs/start/css/bge_style.css（読み取り専用の元納品物、参照のみ・変更しない）に
 * 残っていたため、それを元にテーマ側で復元する。
 * bge_style.cssは読み込み順が最後になるため、`body[data-path]`を前置して詳細度を上げ、
 * 読み込み順に関わらず確実に適用されるようにする。
 * 背景画像はhtdocs/start/img/bg-h3*.png（元納品物、絶対パスでそのまま参照）。
 *
 * 追記: bge_style.cssを公式の既定CSSに差し替えたことで、そちらに含まれる汎用の
 * `[data-bgb] h2{text-align:center}` と `[data-bgb] h2:after{...}`（装飾用の短い下線）が
 * 新たに効くようになった（旧ファイルにはこの汎用ルールが無かったため、今まで問題にならなかった）。
 * 元の見出しは左揃え・下線なしなので、ここで明示的に打ち消す。
 *
 * 追記2: この h2 全般への上書きのうち、色・サイズ・余白を決めるルールだけが、
 * `.title-interview`（就職データ/Voiceの見出し等、htdocs/start/css/style.css の
 * `.title-interview{...}` で個別にスタイルされているh2）にも `body[data-path]` の
 * 詳細度ブースト経由で勝ってしまい、意図しない見た目になる事故があった。そのルールだけ
 * `.title-interview` を除外し、style.css側の元々のスタイルに委ねる。
 * 一方 `::after`（bge_style.cssが付与する装飾用の短い下線を消すため）と
 * `:first-child`（先頭要素の上余白リセット）は `.title-interview` 側に対応する記述が
 * 無く、除外すると下線が復活してしまうため、これら2つは`.title-interview`も含め
 * 全h2に適用したままにする。
 */
body[data-path] .bge-contents h2:not(.title-interview),
body[data-path] .c-content-main h2:not(.title-interview) {
	margin: 1em 0 20px;
	padding: 7px 20px;
	font-size: 2.6rem;
	font-weight: 500;
	line-height: 1.8;
	letter-spacing: .075em;
	text-align: left;
}
body[data-path] .bge-contents h2::after,
body[data-path] .c-content-main h2::after {
	content: none;
}
/*
 * .title-interview は text-align を指定していないため、除外した結果
 * bge_style.cssの `[data-bgb] h2{text-align:center}` が復活してしまう。
 * text-align だけ個別に打ち消す（色・サイズ等 style.css側の値はそのまま活かす）。
 */
body[data-path] .bge-contents h2.title-interview,
body[data-path] .c-content-main h2.title-interview {
	text-align: left;
}
body[data-path] .bge-contents h2:first-child,
body[data-path] .c-content-main h2:first-child {
	margin-top: 0;
}
body[data-path] .bge-contents .bge-title-h2,
body[data-path] .c-content-main .bge-title-h2 {
	margin-top: 0;
}
body[data-path] .bluebg {
	background: url(/start/img/bg-h3.png) repeat left top;
	color: #fff;
}
body[data-path] .redbg {
	background: url(/start/img/bg-h3-4.png) repeat left top;
	color: #fff;
}
body[data-path] .red2bg {
	background: url(/start/img/bg-h3-5.png) repeat left top;
	color: #fff;
}
body[data-path] .yellbg {
	background: url(/start/img/bg-h3-1.png) repeat left top;
	color: #fff;
}
body[data-path] .greebg {
	background: url(/start/img/bg-h3-2.png) repeat left top;
	color: #fff;
}
@media screen and (max-width: 767px) {
	body[data-path] .bge-contents h2:not(.title-interview),
	body[data-path] .c-content-main h2:not(.title-interview) {
		font-size: 5.33333vw;
		padding: 8px 15px;
	}
}

/**
 * h2と全く同じ理由（bge_style.cssを正しい既定CSSに差し替えたことで、そちらに含まれる
 * 汎用の `[data-bgb] h3{background:#f6f6f6;border:1px solid #eee;box-shadow:...}`
 * （グレーの箱型デザイン）が新たに効くようになった）で、h3見出し
 * （下線＋左端の水色アクセント線というサイト本来のデザイン、htdocs/start/css/style.css
 * の `.bge-contents h3` 等）も同様に上書きされてしまう。h2と同じく
 * `body[data-path]` で詳細度を上げて確実に元のデザインを復元する。
 */
body[data-path] .bge-contents h3,
body[data-path] .c-content-main h3 {
	font-size: 2.4rem;
	line-height: 1.8;
	margin: 1em 0 25px;
	padding: 0 0 6px;
	color: #06294a;
	border-bottom: 2px solid #0b3a4e;
	position: relative;
	font-weight: 500;
	letter-spacing: .075em;
	background: none;
	box-shadow: none;
	overflow: visible;
}
body[data-path] .bge-contents h3::after,
body[data-path] .c-content-main h3::after {
	content: "";
	display: block;
	width: 50px;
	height: 2px;
	background: #86cce9;
	position: absolute;
	bottom: -2px;
	left: 0;
}
body[data-path] .bge-contents h3:first-child,
body[data-path] .c-content-main h3:first-child {
	margin-top: 0;
}
@media screen and (max-width: 767px) {
	body[data-path] .bge-contents h3,
	body[data-path] .c-content-main h3 {
		font-size: 5.3333333333vw;
	}
	body[data-path] .bge-contents h3::after,
	body[data-path] .c-content-main h3::after {
		width: 8vw;
	}
}

/**
 * h2・h3と全く同じ理由で、h4・h5・h6もbge_style.cssの汎用スタイル
 * （h4: 左端バー装飾の::after、h5: 点線border-bottom、h6: 左端border+グレー背景の箱）
 * に上書きされてしまう。同様に `body[data-path]` で詳細度を上げて
 * htdocs/start/css/style.css 本来のデザインを復元する。
 */
body[data-path] .bge-contents h4,
body[data-path] .c-content-main h4 {
	font-size: 2.2rem;
	font-weight: bold;
	color: #213c55;
	line-height: 1.8;
	margin: 1em 0;
	padding-left: 18px;
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 0;
	position: relative;
	border: none;
	overflow: visible;
}
body[data-path] .bge-contents h4::before,
body[data-path] .c-content-main h4::before {
	content: "";
	display: block;
	width: 6px;
	top: 6px;
	bottom: 6px;
	left: 0;
	position: absolute;
	background: url(/start/img/bg-h5.png) repeat left center/100% 100%;
}
body[data-path] .bge-contents h4::after,
body[data-path] .c-content-main h4::after {
	content: none;
}
body[data-path] .bge-contents h4:first-child,
body[data-path] .c-content-main h4:first-child {
	margin-top: 0;
}
@media screen and (max-width: 767px) {
	body[data-path] .bge-contents h4,
	body[data-path] .c-content-main h4 {
		font-size: 4.8vw;
		padding-left: 15px;
	}
}

body[data-path] .bge-contents h5,
body[data-path] .c-content-main h5 {
	font-size: 2rem;
	line-height: 1.8;
	font-weight: bold;
	margin: 1em 0;
	color: #149cd5;
	padding: 0;
	border-bottom: none;
	overflow: visible;
}
body[data-path] .bge-contents h5:first-child,
body[data-path] .c-content-main h5:first-child {
	margin-top: 0;
}
body[data-path] .bge-contents h5 span,
body[data-path] .c-content-main h5 span {
	color: #111;
	font-weight: normal;
}
@media screen and (max-width: 767px) {
	body[data-path] .bge-contents h5,
	body[data-path] .c-content-main h5 {
		font-size: 4.2666666667vw;
	}
}

body[data-path] .bge-contents h6,
body[data-path] .c-content-main h6 {
	font-size: 1.7rem;
	line-height: 1.8;
	font-weight: bold;
	margin: 1em 0;
	color: #213c55;
	border: none;
	background: none;
	padding: 0;
	overflow: visible;
}
body[data-path] .bge-contents h6:first-child,
body[data-path] .c-content-main h6:first-child {
	margin-top: 0;
}
@media screen and (max-width: 767px) {
	body[data-path] .bge-contents h6,
	body[data-path] .c-content-main h6 {
		font-size: 4.2666666667vw;
	}
}

/**
 * 本文中のリスト（ul）で、ネイティブの ::marker（黒丸）が消えずに残る問題
 * （例: /juken/career/ の内定企業一覧、/juken/fit_tech/ の箇条書き等）
 *
 * 原因: BurgerEditorViewEventListener（app/Plugin/BurgerEditor/Event/BurgerEditorViewEventListener.php）
 * が `theme/start/css/bge_style.css` を自動読み込みしており、これは
 * `$this->BcBaser->scripts()` の中で出力されるため layout-fix.css より後に読み込まれる。
 * 同ファイルには BurgerEditor既定の `[data-bgb] ul li{list-style-type:disc; ...}`
 * （詳細度 0,1,2）があり、htdocs/start/css/style.css の
 * `.c-content-main ul > li{list-style:none}`（同じく詳細度 0,1,2）と詳細度が同点のため、
 * 読み込み順で後勝ちして黒丸が残ってしまう。
 * layout-fix.cssでは `body[data-path]` を前置して詳細度を上げ、読み込み順に関わらず
 * 確実に list-style: none を効かせる（自前の ::before 画像アイコンはそのまま活きる）。
 */
body[data-path] .bge-contents ul > li,
body[data-path] .c-content-main ul > li {
	list-style: none;
}

/**
 * 特待（奨学）制度ページ（/juken/examination/tokutai.html）で
 * .examination-check-text-box 配下のスタイル（padding-left・text-align・
 * .__custom-accent の強調表示など）が期待通りに効かない問題
 *
 * `<div class="examination-check-text-box">` 自体は実在するが（DevTools確認済み）、
 * その直下に **無クラスの `<span>` が1つ余分に入れ子** になっており、この `<span>`
 * が `<p>`（ブロック要素）を子に持っている（examination_tokutai.md の実データ参照）。
 * インライン要素であるはずの `<span>` がブロック要素を子に持つ構成はCSS上
 * 想定外で、ブラウザはこのspanを暗黙的に複数の匿名ボックスに分割して描画するため、
 * `.examination-check-text-box`（外側のdiv自体）に対するCSS（padding-left・
 * text-align等）は本来問題なく効くはずだが、内部の`<span>`〜`<p>`部分の見た目が
 * 意図通りにまとまらない。
 * HTML側は管理画面の保存内容をそのまま尊重し変更しないため、この内側の無クラス
 * <span> を `display: block` にして正規のブロックボックスとして扱わせ、匿名ボックス
 * 分割による見た目の崩れを緩和する（根本的にはCKEditor側でこの余分な<span>ラップを
 * 外す修正が本筋）。
 */
body[data-path] .examination-check-text-box > span {
	display: block;
}
body[data-path] .tokutai-content-block .__custom-accent {
	color: #1697ff;
	font-weight: 600;
	font-size: 1.4em;
	display: inline-block;
	margin-top: 0em;
}

/**
 * fit_girlsページ（/juken/fit_girls/）のインタビューブロックのみ、
 * `.interview-sttl` の次に続く無クラスの本文<p>（引用文）に
 * bge_style.cssの汎用 `[data-bgb] p{margin:1em 0}` の余白が入ってしまい、
 * 見た目が崩れる。このページのこの箇所だけ余白を除外する
 * （他ページの同様のインタビューブロックは対象外、`body[data-path*="fit_girls"]`で
 * このページに限定）。
 */
body[data-path*="fit_girls"] .bge-contents .interview-sttl + p,
body[data-path*="fit_girls"] .c-content-main .interview-sttl + p {
	margin: 0;
}
/*
 * `.interview-sttl`（例:「株式会社 ゼンリン 内定」）自体はstyle.css側で背景色・
 * paddingは指定されているがmarginは指定していないため、
 * bge_style.cssの `[data-bgb] p{margin:1em 0}` がそのまま効いてしまう。
 * 同じくfit_girlsページに限定してキャンセルする。
 */
body[data-path*="fit_girls"] .bge-contents .interview-sttl,
body[data-path*="fit_girls"] .c-content-main .interview-sttl {
	margin: 0;
}