/* --------------------------------------------
BIZ SIDEBAR — リニューアル対象ページの新デザインサイドバー（共通）

	■ 適用ページ
		#singleCompany … 企業TOP / ES・面接・コラム一覧（sidebar-company.php）
		#singleEs      … ES・面接 詳細（sidebar-es.php）

	■ 中身のブロック（見本 na-seo-company-es-list-mock / na-seo-es-page-mock-v4 準拠）
		.side-card + .same-corp … 同じ企業の人気記事（企業ページ）
		.side-card + .pop-list  … 同業界の人気企業（企業ページ）/ 人気の面接情報（ES詳細）
		.side-card + .app-list  … 就活ハンドブックのおすすめアプリ（ES詳細）
		.side-cta               … 無料で就活相談 / お役立ち資料DL

	■ なぜ独立したファイルか
		company.css は企業ページ限定、es-info.css は他エンジニアの担当領域のため、
		両ページで共通のサイドバーはどちらにも置けない。サイドバーの見た目は
		このファイルだけを見れば分かる状態にしておく。
		幅（300px）・1カラム化・文字サイズの土台は biz-layout.css が持つ。

	■ 注意
		サイドバーの中は本文列（.biz-main-col / .es）の対抗リセットが効かない範囲で、
		style.css のグローバル指定（Noto Sans / line-height:1 / font-weight:400 /
		letter-spacing:.1em）がそのまま当たる。見本どおりにするため、文字まわりは
		各セレクタで都度明示している。
		サイズは html の vw 連動 rem を避けて px 固定。
--------------------------------------------- */

:is( #singleCompany , #singleEs ) .sidebar{
	/* #singleEs 側には新デザインのトークンが無いのでここで定義する
	   （#singleCompany では company.css と同値・上書きしても見た目は変わらない） */
	--ink : #32373c;
	--primary : #d6204e;
	--biz-font : "Zen Maru Gothic" , "Hiragino Maru Gothic ProN" , "Hiragino Kaku Gothic ProN" , Arial , sans-serif;

	font-family : var( --biz-font );
}

/* style.css のグローバルリセットは a / span / div など要素セレクタで
	Roboto・Noto Sans JP を強制するため、クラス側で font-family を書き忘れた要素だけ
	丸ゴシックから外れてしまう（記事タイトルの <a> がそうなっていた）。
	サイドバー配下はまとめて継承に戻し、書き漏れが起きない状態にする。
	:where() で詳細度を上げていないので、個別に別フォントを当てたい箇所
	（順位バッジの RocknRoll One など）は従来どおり詳細度で勝って上書きできる。 */
:is( #singleCompany , #singleEs ) .sidebar :where( a , span , small , b , strong , em , i , p , div , h1 , h2 , h3 , h4 , ul , ol , li , section , article , nav ){
	font-family : inherit;
}

/* 見本の position:sticky。中身が短いのでCTAを追従させる。
	960px以下は1カラムになり本文の下へ回るので解除する（見本と同じ）。 */
@media print , screen and ( width > 960px ){
	:is( #singleCompany , #singleEs ) .sidebar{
		position : sticky;
		top : 18px;
	}
}

/* ===== カードの枠と見出し ===== */
:is( #singleCompany , #singleEs ) .side-card{
	margin-bottom : 20px;
	background : #fff;
	border : 1.5px solid #e4e8ee;
	border-radius : 12px;
	overflow : hidden;
	box-shadow : 0 2px 6px rgba( 50 , 55 , 60 , .04 );
}
:is( #singleCompany , #singleEs ) .side-card h3{
	margin : 0;
	padding : 12px 16px;
	font-family : var( --biz-font );
	font-weight : 900;
	font-size : 15.5px;
	line-height : 1.6;
	color : #fff;
	background : var( --ink );
	letter-spacing : .03em;
}
:is( #singleCompany , #singleEs ) .side-card h3 .ico{
	margin-right : 6px;
}

/* ===== 記事リスト（同じ企業の人気記事） ===== */
:is( #singleCompany , #singleEs ) .same-corp{
	margin : 0;
	padding : 6px 0;
	list-style : none;
}
:is( #singleCompany , #singleEs ) .same-corp li{
	padding : 10px 14px;
	border-bottom : 1px solid #eef0f4;
	font-family : var( --biz-font );
	font-weight : 700;
	font-size : 13px;
	line-height : 1.5;
	letter-spacing : normal; /* style.css body の .1em を打ち消し */
}
:is( #singleCompany , #singleEs ) .same-corp li:last-child{
	border-bottom : none;
}
:is( #singleCompany , #singleEs ) .same-corp li:hover{
	background : #fef5f7;
}
:is( #singleCompany , #singleEs ) .same-corp .ttl{
	display : block;
	font-size : inherit;
	font-weight : inherit;
	line-height : inherit;
	color : var( --ink );
	text-decoration : none;
}
:is( #singleCompany , #singleEs ) .same-corp li:hover .ttl{
	color : var( --primary );
}
:is( #singleCompany , #singleEs ) .same-corp .sub{
	display : block;
	margin-top : 2px;
	font-size : 11px;
	font-weight : 600;
	line-height : 1.5;
	color : #888;
}

/* ===== 順位つきリスト（同業界の人気企業 / 人気の面接情報） ===== */
:is( #singleCompany , #singleEs ) .pop-list{
	margin : 0;
	padding : 0;
	list-style : none;
}
:is( #singleCompany , #singleEs ) .pop-list li{
	display : flex;
	gap : 10px;
	align-items : flex-start;
	padding : 12px 14px;
	border-bottom : 1px solid #eef0f4;
}
:is( #singleCompany , #singleEs ) .pop-list li:last-child{
	border-bottom : none;
}
:is( #singleCompany , #singleEs ) .pop-list li:hover{
	background : #fef5f7;
}
:is( #singleCompany , #singleEs ) .pop-list .rank{
	flex : 0 0 24px;
	height : 24px;
	display : flex;
	align-items : center;
	justify-content : center;
	font-family : "RocknRoll One" , var( --biz-font );
	font-size : 13px;
	line-height : 1;
	color : #666;
	background : #f1f3f6;
	border-radius : 50%;
}
:is( #singleCompany , #singleEs ) .pop-list li:nth-child( 1 ) .rank{ background : var( --primary ); color : #fff; }
:is( #singleCompany , #singleEs ) .pop-list li:nth-child( 2 ) .rank{ background : #888; color : #fff; }
:is( #singleCompany , #singleEs ) .pop-list li:nth-child( 3 ) .rank{ background : #c89b4a; color : #fff; }
:is( #singleCompany , #singleEs ) .pop-list .pt{
	font-family : var( --biz-font );
	font-weight : 700;
	font-size : 13px;
	line-height : 1.5;
	color : var( --ink );
	text-decoration : none;
	letter-spacing : normal;
}
:is( #singleCompany , #singleEs ) .pop-list li:hover .pt{
	color : var( --primary );
}

/* ===== おすすめアプリ =====
	見本はアイコン＋名前だけだが、実際はアプリなのでストアへのボタンを2つ置く
	（共有サイドバーの .app-store-button と同じ導線を新デザインのトンマナで）。 */
:is( #singleCompany , #singleEs ) .app-list{
	padding : 10px 12px;
}
:is( #singleCompany , #singleEs ) .app-item{
	padding : 8px;
}
:is( #singleCompany , #singleEs ) .app-item + .app-item{
	padding-top : 12px;
	border-top : 1px solid #eef0f4;
}
:is( #singleCompany , #singleEs ) .app-item__head{
	display : flex;
	gap : 10px;
	align-items : center;
}
:is( #singleCompany , #singleEs ) .app-thumb{
	flex : 0 0 48px;
	width : 48px;
	height : 48px;
	display : flex;
	align-items : center;
	justify-content : center;
	font-size : 22px;
	line-height : 1;
	background : #f1f3f6;
	border : 1px solid #e4e8ee;
	border-radius : 10px;
}
:is( #singleCompany , #singleEs ) .app-name{
	font-family : var( --biz-font );
	font-weight : 700;
	font-size : 13.5px;
	line-height : 1.4;
	color : var( --ink );
	letter-spacing : normal;
}
:is( #singleCompany , #singleEs ) .app-desc{
	margin-top : 2px;
	font-family : var( --biz-font );
	font-size : 11.5px;
	font-weight : 500;
	line-height : 1.5;
	color : #777;
	letter-spacing : normal;
}
:is( #singleCompany , #singleEs ) .app-btns{
	display : flex;
	gap : 8px;
	margin-top : 10px;
}
/* ストアボタンの欧文もサイドバー本文と同じ Zen Maru Gothic で揃える
	（RocknRoll One は主張が強すぎたため。旧サイドバーの .app-store-button は
	Noto Sans のままでトンマナが合わない）。 */
:is( #singleCompany , #singleEs ) .app-btns a{
	flex : 1;
	display : flex;
	align-items : center;
	justify-content : center;
	height : 30px;
	font-family : var( --biz-font );
	font-size : 12px;
	font-weight : 700;
	line-height : 1;
	color : #fff;
	text-decoration : none;
	letter-spacing : .02em;
	background : var( --primary );
	border-radius : 9999px;
}
:is( #singleCompany , #singleEs ) .app-btns a:hover{
	background : #a8163c;
}

/* ===== CTA（無料で就活相談 / お役立ち資料DL） ===== */
:is( #singleCompany , #singleEs ) .side-cta{
	display : flex;
	gap : 8px;
	margin-bottom : 20px;
}
:is( #singleCompany , #singleEs ) .side-cta a{
	flex : 1;
	display : flex;
	flex-direction : column;
	align-items : center;
	gap : 4px;
	padding : 14px 8px;
	font-family : var( --biz-font );
	font-weight : 900;
	font-size : 13px;
	line-height : 1.4;
	color : #fff;
	text-align : center;
	text-decoration : none;
	border-radius : 10px;
}
:is( #singleCompany , #singleEs ) .side-cta .line{ background : var( --ink ); }
:is( #singleCompany , #singleEs ) .side-cta .doc{ background : var( --primary ); }
:is( #singleCompany , #singleEs ) .side-cta a small{
	padding : 1px 6px;
	font-size : 10px;
	font-weight : 700;
	line-height : 1.6;
	background : rgba( 255 , 255 , 255 , .18 );
	border-radius : 4px;
	opacity : .85;
}