/* --------------------------------------------
COMPANY — 新デザイン
	企業TOP        : single-company.php        ( /campus/es-info/{id}/ )
	ES/面接/コラム : company-section-list.php ( /campus/es-info/{id}/es|interview|column/ )
	企業ヘッダー   : template-parts/company-info-card.php ( .biz-corp-head )
	選択タブ       : template-parts/company-tabs.php      ( .biz-company-tabs )
	いずれも is_singular( 'company' ) で lib/assets.php から読み込む。
	フォント( Zen Maru Gothic / Klee One / RocknRoll One )も lib/assets.php で
	company ページ限定 enqueue。

	★ ページの土台は assets/styles/campus/biz-layout.css が持つ（共有）:
	   ページ全体の余白 / .columns02 の2カラムグリッド / パンくずの位置揃え /
	   サイドバーの幅と内部の文字サイズ / 960pxでの1カラム化。
	   レイアウトやサイドバーを調整する場合はこのファイルではなく biz-layout.css を編集する。
	   ここには company ページ固有の見た目だけを書く。
--------------------------------------------- */

#singleCompany{
	--paper : #fafbfc;
	--ink : #32373c;
	--primary : #d6204e;
	--primary-dark : #a8163c;
	--yellow : #ffe566;
	--pink : #ffd1e3;
	--cyan : #bfe6ff;
	--green : #c8ea96;
	--tape : #ffe27a;
	--soft-shadow : 0 2px 6px rgba( 50 , 55 , 60 , .08 );
	--biz-font : "Zen Maru Gothic" , "Hiragino Maru Gothic ProN" , "Hiragino Kaku Gothic ProN" , Arial , sans-serif;

	background-color : #f6f8fb;
	font-family : "Zen Maru Gothic" , "Hiragino Maru Gothic ProN" , "Hiragino Kaku Gothic ProN" , Arial , sans-serif;
	color : var( --ink );
}

/* 本文列 — 企業TOPと一覧でレイアウトを揃える。
	モックの html,body 基本設定( 17px / 600 / 1.85 )は本文列に限定して適用
	（サイドバー・ヘッダー・フッターへ波及させない） */
#singleCompany .biz-main-col{
	grid-column : 1;
	grid-row : 1;
	min-width : 0;
	/* この要素自体は div なので、style.css のグローバルリセット（div に
	   Roboto / Noto Sans JP）が当たる。中の要素は下の対抗リセットで
	   font-family:inherit にしてあるため、ここを直さないと本文列ぜんぶが
	   Noto Sans を継承してしまう（モックの Zen Maru Gothic にならない）。
	   親の .columns02 も同じリセットで Noto Sans になっているので
	   inherit では拾えない。フォントを直接指定する。 */
	font-family : var( --biz-font );
	font-size : 17px;
	font-weight : 600;
	line-height : 1.85;
	letter-spacing : normal; /* style.css body の .1em を打ち消し（モックは指定なし） */
}
/* リンク色はテーマ既定ではなく本文の色を継承させる。
	:where() で詳細度を (1,1,0) に落としてあるのが要点。素の `a` セレクタだと (1,1,1) になり、
	個別に色を指定するクラス（.lock-cta の白文字、.biz-company-tabs__item の #666 など）が
	すべて負けて色が効かなくなる。 */
#singleCompany .biz-main-col :where( a ){
	color : inherit;
}

/* style.css のグローバルリセット（ほぼ全要素に font-family:Noto Sans /
	line-height:1 / font-weight:400 / transition:.2s を強制）への対抗リセット。
	モックは body の 17px/600/1.85 と Zen Maru Gothic を全要素が継承する前提の
	ため、要素セレクタ由来の上書きをここで継承に戻す。
	:where() で詳細度を (1,1,0) に抑えてあるので、後続の個別クラス指定
	（.es-q の Klee One、.cnt の RocknRoll One、各所の line-height 等）が勝つ。 */
/* ※ コラム一覧のカード（.campus-grid 配下）は campus_renew.css の共通コンポーネント
	（.post_co）をそのまま使うので、この対抗リセットの対象から外す。
	   外さないと font-weight / line-height を inherit で潰してしまい、
	   タイトル・説明・日付の文字組みが崩れる。
	   除外は :not( :where( … ) ) で書く。素の :not( .campus-grid * ) だと :not() が
	   引数の詳細度(0,1,0)を持ち込んで選択子が (1,2,0) になり、単一クラスの個別指定
	   （#singleCompany .es-q の Klee One など＝(1,1,0)）を軒並み潰してしまう。 */
#singleCompany .biz-main-col :where( h1 , h2 , h3 , h4 , h5 , h6 , p , a , b , strong , i , em , small , span , div , section , article , nav , table , tbody , tr , th , td , ul , ol , li ):not( :where( .campus-grid * ) ){
	font-family : inherit;
	font-weight : inherit;
	line-height : inherit;
	letter-spacing : inherit;
	transition : none;
}
/* モックでは b/strong はブラウザ既定の太字（body 600 に対して 700） */
#singleCompany .biz-main-col :where( b , strong ){
	font-weight : 700;
}

/* パンくず（モックの .crumb 相当）。
	.columns02 の外＝.biz-main-col 配下ではないので、上記の対抗リセットとは別に
	ここでも style.css のグローバルリセットを打ち消す。 */
#singleCompany .breadcrumb{
	font-family : var( --biz-font ); /* .biz-main-col と同じ理由（div へのグローバルリセット対策） */
	font-size : 13px;
	font-weight : 600;
	line-height : 1.85;
	letter-spacing : normal;
	color : #555;
	/* margin ショートハンドにすると biz-layout.css の margin-inline:auto
	   （本文列との左端揃え）を打ち消してしまうため上下方向のみ指定する。 */
	margin-block : 6px 14px;
}
#singleCompany .breadcrumb :where( span , a , meta ){
	font-family : inherit;
	font-size : inherit;
	font-weight : inherit;
	line-height : inherit;
	letter-spacing : inherit;
	transition : none;
}
#singleCompany .breadcrumb a{
	color : #555;
	text-decoration : underline wavy 1px;
}
/* 項目の区切り「＞」 */
#singleCompany .biz-crumb__item + .biz-crumb__item::before{
	content : "＞";
	margin : 0 .2em;
	color : #999;
}

/* ===== 企業ヘッダー ===== */
#singleCompany .biz-corp-head{
	background : #fff;
	border : 2px solid var( --ink );
	border-radius : 18px;
	padding : 22px 26px;
	box-shadow : 0 4px 14px rgba( 50 , 55 , 60 , .08 );
}
#singleCompany .biz-corp-head__row{
	display : grid;
	grid-template-columns : 88px 1fr;
	gap : 20px;
	align-items : center;
}
#singleCompany .biz-corp-head__logo{
	width : 88px;
	height : 88px;
	border-radius : 18px;
	background : #f1f3f6;
	border : 2px solid var( --ink );
	display : flex;
	align-items : center;
	justify-content : center;
	font-family : "RocknRoll One";
	font-size : 30px;
	color : var( --primary );
	box-shadow : var( --soft-shadow );
}
/* 企業アイコンを登録した場合。ロゴは余白込みで作られていることが多いので枠いっぱいには広げず contain で収める */
#singleCompany .biz-corp-head__logo.has-image{
	background : #fff;
	overflow : hidden;
	padding : 6px;
}
#singleCompany .biz-corp-head__logo img{
	width : 100%;
	height : 100%;
	object-fit : contain;
	display : block;
}
#singleCompany .biz-corp-head__name{
	font-weight : 900;
	font-size : 28px;
	line-height : 1.3;
	margin : 0 0 4px;
	color : var( --ink );
}
#singleCompany .biz-corp-head__name .hl{
	background : linear-gradient( transparent 60% , var( --yellow ) 60% );
	padding : 0 3px;
}
#singleCompany .biz-corp-head__tags{
	display : flex;
	flex-wrap : wrap;
	gap : 6px;
	margin-top : 6px;
}
#singleCompany .biz-meta-tag{
	display : inline-block;
	font-weight : 700;
	font-size : 12.5px;
	background : #fff;
	border : 1.5px solid var( --ink );
	border-radius : 9999px;
	padding : 3px 12px;
}
#singleCompany .biz-meta-tag.pink{ background : var( --pink ); }
#singleCompany .biz-meta-tag.cyan{ background : var( --cyan ); }
#singleCompany .biz-meta-tag.green{ background : var( --green ); }

#singleCompany .biz-corp-head__desc{
	margin-top : 16px;
	font-size : 14.5px;
	font-weight : 600;
	line-height : 1.85;
	color : #444;
	border-top : 1.5px dotted #c7cfd9;
	padding-top : 14px;
}
#singleCompany .biz-corp-head__desc p{
	margin : 0 0 .8em;
}
#singleCompany .biz-corp-head__desc p:last-child{
	margin-bottom : 0;
}

/* 基本情報テーブル */
#singleCompany .biz-corp-head__basic{
	margin-top : 14px;
}
#singleCompany .biz-sub-h{
	display : inline-block;
	font-weight : 900;
	font-size : 14px;
	padding : 3px 12px;
	background : var( --ink );
	color : #fff;
	border-radius : 9999px;
	margin : 0 0 10px;
}
#singleCompany .biz-basic-tbl{
	width : 100%;
	border-collapse : collapse;
	font-size : 14px;
}
#singleCompany .biz-basic-tbl tr{
	border-bottom : 1.5px solid #f1f1f4;
}
#singleCompany .biz-basic-tbl tr:last-child{
	border-bottom : none;
}
#singleCompany .biz-basic-tbl th{
	width : 128px;
	padding : 9px 8px;
	text-align : left;
	font-weight : 700;
	color : #666;
	font-size : 12.5px;
	letter-spacing : .04em;
}
#singleCompany .biz-basic-tbl td{
	padding : 9px 8px;
	font-weight : 700;
	color : var( --ink );
}
/* 値に添える補足バッジ（モックの .ext）。現状は設立の「創業◯年」だけが使う。 */
#singleCompany .biz-basic-tbl td .ext{
	display : inline-block;
	margin-left : 4px;
	padding : 1px 8px;
	font-family : "Klee One";
	font-weight : 600;
	font-size : 11.5px;
	color : #666;
	background : #f1f3f6;
	border-radius : 9999px;
}

/* ===== 選択タブ ===== */
#singleCompany .biz-company-tabs{
	margin-top : 18px;
	display : flex;
	gap : 0;
	border-bottom : 3px solid var( --ink );
	overflow-x : auto;
}
#singleCompany .biz-company-tabs__item{
	flex : 0 0 auto;
	font-weight : 900;
	font-size : 15.5px;
	padding : 12px 22px;
	background : #fff;
	border : 2px solid var( --ink );
	border-bottom : none;
	border-radius : 14px 14px 0 0;
	margin-right : -2px;
	color : #666;
	text-decoration : none;
	position : relative;
	top : 3px;
	cursor : pointer;
	white-space : nowrap;
}
#singleCompany .biz-company-tabs__item.is-active{
	background : var( --ink );
	color : #fff;
	z-index : 2;
}
#singleCompany .biz-company-tabs__item .cnt{
	font-family : "RocknRoll One";
	font-size : 11px;
	background : var( --primary );
	color : #fff;
	padding : 1px 8px;
	border-radius : 9999px;
	margin-left : 6px;
	vertical-align : 1.5px;
}
#singleCompany .biz-company-tabs__item.is-active .cnt{
	background : var( --yellow );
	color : var( --ink );
}

/* 「当サイトについて」だけは <button>（ページ遷移せずパネルを開閉する）。
	見た目は他タブと揃えたいので、ボタン既定のスタイルを打ち消す。 */
#singleCompany .biz-company-tabs__about{
	-webkit-appearance : none;
	appearance : none;
	font-family : inherit;
	line-height : inherit;
	margin-left : 0;
}

/* ===== 当サイトについて パネル（template-parts/company-tabs.php） =====
	開くと本文（タブより後ろの兄弟要素）を hidden にして入れ替える＝ assets/scripts/campus/company.js。
	本文側が display:flex 等を持っていても隠れるよう、hidden を効かせておく。 */
#singleCompany [hidden]{
	display : none !important;
}
#singleCompany .biz-about-panel{
	margin-top : 24px;
	padding : 26px 28px 30px;
	background : #fff;
	border : 2px solid var( --ink );
	border-radius : 16px;
	box-shadow : var( --soft-shadow );
}
#singleCompany .biz-about-panel__h{
	margin : 0 0 18px;
	font-size : 21px;
	font-weight : 900;
	border-bottom : 3px dotted var( --primary );
	padding-bottom : 10px;
}
#singleCompany .biz-about-panel__body h3{
	margin : 22px 0 8px;
	font-size : 16.5px;
	font-weight : 900;
	color : var( --primary-dark );
}
#singleCompany .biz-about-panel__body h3:first-child{
	margin-top : 0;
}
#singleCompany .biz-about-panel__body p{
	margin : 0 0 12px;
	font-size : 15.5px;
	line-height : 1.9;
}

@media screen and ( max-width : 640px ){
	#singleCompany .biz-about-panel{
		padding : 20px 18px 24px;
	}
}

/* ===== 一覧ボックス（company-section-list.php） ===== */
#singleCompany .biz-section-body{
	padding-top : 16px;
}

/* 絞り込みチップ（卒業年度・職種）。選択中は .on。
	モックの .filter-bar と同じ見た目。並び替えセレクトは未実装のため右側は空。
	チップは <a>（GETパラメータ grad / occ でページ遷移する）ので、
	テーマ既定のリンク色・下線を打ち消しておく。 */
#singleCompany .filter-bar{
	display : flex;
	flex-wrap : wrap;
	gap : 10px;
	align-items : center;
	padding : 14px 18px;
	background : #fff;
	border : 2px solid var( --ink );
	border-radius : 0 14px 14px 14px;
	box-shadow : 0 3px 8px rgba( 50 , 55 , 60 , .06 );
}
#singleCompany .filter-bar .ttl{
	margin-right : 6px;
	font-weight : 900;
	font-size : 13px;
	color : #666;
}
#singleCompany .filter-bar .chip{
	padding : 5px 14px;
	font-weight : 700;
	font-size : 13px;
	color : #444;
	text-decoration : none;
	background : #fff;
	border : 1.5px solid #c7cfd9;
	border-radius : 9999px;
}
#singleCompany .filter-bar .chip:hover{
	color : var( --primary );
	border-color : var( --primary );
}
#singleCompany .filter-bar .chip.on{
	color : #fff;
	background : var( --primary );
	border-color : var( --primary );
}
/* ページネーション（paginate_links の出力。.current が現在ページ、.dots が「…」） */
#singleCompany .pagi{
	display : flex;
	flex-wrap : wrap;
	justify-content : center;
	gap : 6px;
	margin : 36px auto 0;
	font-weight : 700;
}
#singleCompany .pagi a,
#singleCompany .pagi span{
	min-width : 38px;
	height : 38px;
	display : inline-flex;
	align-items : center;
	justify-content : center;
	padding : 0 10px;
	font-size : 14px;
	color : var( --ink );
	text-decoration : none;
	background : #fff;
	border : 1.5px solid var( --ink );
	border-radius : 8px;
}
#singleCompany .pagi a:hover{
	color : var( --primary );
	border-color : var( --primary );
}
#singleCompany .pagi .current{
	color : #fff;
	background : var( --primary );
	border-color : var( --primary );
}
#singleCompany .pagi .dots{
	background : transparent;
	border : none;
}
#singleCompany .biz-result-meta{
	margin : 18px 0 12px;
	font-weight : 700;
	font-size : 14px;
	color : #444;
	display : flex;
	align-items : center;
	gap : 10px;
}
#singleCompany .biz-result-meta b{
	color : var( --primary );
	font-size : 18px;
	font-family : "RocknRoll One";
	font-weight : 400;
}
#singleCompany .biz-section-empty{
	padding : 24px;
	font-size : 14px;
	color : #888;
	background : #fff;
	border : 2px solid var( --ink );
	border-radius : 14px;
	margin-top : 16px;
}

/* ===== ESカード ===== */
#singleCompany .biz-es-list{
	display : flex;
	flex-direction : column;
	gap : 14px;
}
/* padding-top は「バッジの下端（カード上端から約22px）＋余白」で決める。
	バッジは絶対配置（top:-10px）でカードの上辺にまたがるため、上余白が足りないと
	アイコン・氏名にバッジが接触して詰まって見える。 */
#singleCompany .biz-es-card{
	background : #fff;
	border : 2px solid var( --ink );
	border-radius : 14px;
	box-shadow : 0 3px 10px rgba( 50 , 55 , 60 , .08 );
	padding : 32px 20px 16px;
	position : relative;
	transition : transform .15s ease;
}
#singleCompany .biz-es-card:hover{
	transform : translateY( -2px );
	box-shadow : 0 6px 16px rgba( 50 , 55 , 60 , .14 );
}
/* カード全面の当たり判定（company-section-list.php の .biz-es-card__overlay）。
	絶対配置の .es-cta より上に置く。CTAボタン自体は下の z-index でさらに上に出すので、
	ボタンのホバー表現は従来どおり効く（遷移先はどちらも同じ）。 */
#singleCompany .biz-es-card__overlay{
	position : absolute;
	inset : 0;
	z-index : 2;
	border-radius : 14px;
}
#singleCompany .lock-cta ,
#singleCompany .open-cta{
	position : relative;
	z-index : 3;
}
#singleCompany .biz-es-card .badge{
	position : absolute;
	top : -10px;
	left : 18px;
	color : #fff;
	font-weight : 900;
	font-size : 12px;
	padding : 3px 12px;
	border : 1.5px solid var( --ink );
	border-radius : 9999px;
	letter-spacing : .04em;
}
#singleCompany .biz-es-card .badge.es{ background : var( --ink ); }
#singleCompany .biz-es-card .badge.es::before{ content : "📝 "; }
#singleCompany .biz-es-card .badge.interview{ background : var( --primary ); }
#singleCompany .biz-es-card .badge.interview::before{ content : "🎤 "; }

#singleCompany .es-head{
	display : grid;
	grid-template-columns : 54px 1fr;
	gap : 14px;
	align-items : center;
	margin-bottom : 10px;
}
#singleCompany .es-avatar{
	width : 54px;
	height : 54px;
	border-radius : 50%;
	background : #e8eef5;
	border : 2px solid var( --ink );
	display : flex;
	align-items : center;
	justify-content : center;
	overflow : hidden;
}
/* アイコン画像そのものが正円なので、枠（54pxの丸）いっぱいに敷く。
	object-fit:cover なので画像の縦横比が変わっても崩れない。 */
#singleCompany .es-avatar img{
	display : block;
	width : 100%;
	height : 100%;
	object-fit : cover;
}
/* 投稿者の見出し。名前は出さずデモグラだけを書く（「27卒・文系・女性」）。
	以前はここに仮名を出して卒年・性別を small の括弧書きで添えていたが、
	名前を廃止したのでこの1行が見出しそのものになる。 */
#singleCompany .es-author{
	font-weight : 900;
	font-size : 16.5px;
	color : var( --ink );
	line-height : 1.35;
}
#singleCompany .es-meta{
	display : flex;
	flex-wrap : wrap;
	gap : 5px;
	margin-top : 6px;
}
#singleCompany .es-meta .m{
	font-weight : 700;
	font-size : 11.5px;
	background : #f1f3f6;
	color : #555;
	padding : 2px 9px;
	border-radius : 9999px;
}

/* 質問プレビュー */
#singleCompany .es-q{
	background : #fffbe5;
	border : 1.5px solid #e8d886;
	border-left : 4px solid var( --primary );
	border-radius : 8px;
	padding : 10px 14px;
	font-family : "Klee One";
	font-weight : 700;
	font-size : 15px;
	line-height : 1.6;
	color : var( --ink );
	margin-bottom : 10px;
}
#singleCompany .es-q::before{
	content : "Q. ";
	color : var( --primary );
	font-family : "RocknRoll One";
	font-size : 13px;
	margin-right : 4px;
}
#singleCompany .es-a{
	font-family : "Klee One";
	font-size : 14.5px;
	line-height : 1.85;
	color : #444;
	font-weight : 500;
	padding : 0 4px;
	margin : 0;
	display : -webkit-box;
	-webkit-line-clamp : 3;
	-webkit-box-orient : vertical;
	overflow : hidden;
}

/* 続き（非ログイン: ブラー＋中央CTA） */
#singleCompany .es-more{
	position : relative;
	margin-top : 4px;
	min-height : 96px;
}
#singleCompany .es-a-blur{
	font-family : "Klee One";
	font-size : 14.5px;
	line-height : 1.85;
	color : #444;
	font-weight : 500;
	padding : 0 4px;
	margin : 0;
	filter : blur( 5px );
	user-select : none;
	pointer-events : none;
	display : -webkit-box;
	-webkit-line-clamp : 3;
	-webkit-box-orient : vertical;
	overflow : hidden;
	-webkit-mask-image : linear-gradient( 180deg , #000 40% , transparent 100% );
	mask-image : linear-gradient( 180deg , #000 40% , transparent 100% );
}
#singleCompany .es-cta{
	position : absolute;
	inset : 0;
	display : flex;
	flex-direction : column;
	align-items : center;
	justify-content : center;
	gap : 9px;
	background : linear-gradient( 180deg , rgba( 255 , 255 , 255 , .1 ) 0% , rgba( 255 , 255 , 255 , .55 ) 100% );
}
#singleCompany .es-cta .cta-text{
	margin : 0;
	font-weight : 900;
	font-size : 13.5px;
	color : var( --ink );
	text-align : center;
	line-height : 1.5;
	text-shadow : 0 0 6px #fff , 0 0 12px #fff;
}
#singleCompany .es-cta .cta-text b{
	color : var( --primary );
}
#singleCompany .lock-cta{
	background : var( --primary );
	color : #fff;
	font-weight : 900;
	font-size : 14px;
	padding : 10px 22px;
	border-radius : 9999px;
	border : 2px solid var( --ink );
	box-shadow : 3px 3px 0 var( --ink );
	text-decoration : none;
	white-space : nowrap;
}
#singleCompany .lock-cta::after{ content : " →"; }
#singleCompany .lock-cta small{
	font-size : 10.5px;
	font-weight : 700;
	background : var( --yellow );
	color : var( --ink );
	padding : 1px 7px;
	border-radius : 9999px;
	margin-right : 6px;
}

/* 続き（ログイン済: 詳細ページへ） */
#singleCompany .es-open{
	margin-top : 12px;
	text-align : center;
}
#singleCompany .open-cta{
	display : inline-block;
	background : #fff;
	color : var( --primary );
	border : 2px solid var( --primary );
	font-weight : 900;
	font-size : 14px;
	border-radius : 9999px;
	padding : 9px 28px;
	text-decoration : none;
	box-shadow : 2px 2px 0 var( --ink );
}
#singleCompany .open-cta:hover{
	background : var( --primary );
	color : #fff;
}

/* ===== データで見るセクション（企業TOP） ===== */
#singleCompany .biz-stats{
	margin-top : 16px;
}
/* 見出しは flex にしない。flex にすると .hl がブロック化して、
	2行に折り返したとき黄色ラインが要素全体の 60% 位置に1本だけ引かれてしまう。 */
#singleCompany .biz-stats__h{
	margin : 0 0 4px;
	font-weight : 900;
	font-size : 21px;
	line-height : 1.6;
	color : var( --ink );
}
#singleCompany .biz-stats__h .hl{
	display : inline;
	background : linear-gradient( transparent 60% , var( --yellow ) 60% );
	padding : 0 3px;
	/* 折り返した各行それぞれに下線を引く */
	-webkit-box-decoration-break : clone;
	box-decoration-break : clone;
}
#singleCompany .biz-stats__note{
	margin : 0 0 14px;
	font-weight : 600;
	font-size : 12.5px;
	color : #777;
}
#singleCompany .biz-stats__note b{
	color : var( --primary );
}

/* ハイライト数値カード */
#singleCompany .biz-stat-cards{
	display : grid;
	grid-template-columns : repeat( 3 , 1fr );
	gap : 10px;
	margin-bottom : 14px;
}
#singleCompany .biz-stat-card{
	background : #fff;
	border : 2px solid var( --ink );
	border-radius : 14px;
	padding : 14px 10px 12px;
	text-align : center;
	box-shadow : var( --soft-shadow );
	position : relative;
}
#singleCompany .biz-stat-card .lbl{
	font-weight : 700;
	font-size : 11.5px;
	color : #666;
	display : block;
	line-height : 1.4;
}
#singleCompany .biz-stat-card .num{
	font-family : "RocknRoll One";
	font-size : 30px;
	color : var( --primary );
	line-height : 1.2;
	display : block;
	margin-top : 4px;
}
#singleCompany .biz-stat-card .num small{
	font-size : 13px;
	color : var( --ink );
	font-family : "Zen Maru Gothic";
	font-weight : 900;
	margin-left : 2px;
}
#singleCompany .biz-stat-card.ink .num{
	color : var( --ink );
}
#singleCompany .biz-stat-card .tape{
	position : absolute;
	top : -8px;
	left : 50%;
	transform : translateX( -50% ) rotate( -2deg );
	background : var( --tape );
	opacity : .85;
	width : 52px;
	height : 14px;
	border-radius : 2px;
}

/* パネルグリッド */
#singleCompany .biz-stats__grid{
	display : grid;
	grid-template-columns : 1fr 1fr;
	gap : 14px;
}
#singleCompany .biz-stat-panel{
	background : #fff;
	border : 2px solid var( --ink );
	border-radius : 14px;
	overflow : hidden;
	box-shadow : var( --soft-shadow );
	display : flex;
	flex-direction : column;
}
#singleCompany .biz-stat-panel .p-head{
	background : var( --ink );
	color : #fff;
	font-weight : 900;
	font-size : 14px;
	padding : 9px 16px;
	letter-spacing : .03em;
	display : flex;
	align-items : center;
	gap : 6px;
}
#singleCompany .biz-stat-panel .p-head .src{
	margin-left : auto;
	font-size : 10px;
	font-weight : 700;
	background : rgba( 255 , 255 , 255 , .2 );
	padding : 1px 8px;
	border-radius : 9999px;
	letter-spacing : .02em;
	white-space : nowrap;
}
#singleCompany .biz-stat-panel .p-head .src.orig{
	background : var( --primary );
}
#singleCompany .biz-stat-panel .p-body{
	padding : 16px 18px;
	flex : 1;
	position : relative;
	/* 注記を枠内の下端へ送るための土台（下の .p-foot-note の margin-top:auto が効くようにする）。
	   justify-content は指定しない。中身の位置は従来どおり上寄せのまま。 */
	display : flex;
	flex-direction : column;
}
#singleCompany .p-foot-note{
	font-weight : 600;
	font-size : 10.5px;
	color : #999;
	margin : 10px 0 0;
	line-height : 1.5;
	/* パネルは同じ行の高さに揃うため、中身の量が違うと注記の位置がばらついて
	   チグハグに見える。余った高さを上に寄せて、注記は必ず枠内の下端に置く。 */
	margin-top : auto;
}
/* データ未取得のパネルは中身が注記だけ無い状態なので、枠の高さいっぱいに広げて中央に置く */
#singleCompany .biz-data-pending{
	flex : 1;
}

/* 横棒グラフ */
#singleCompany .biz-hbar{
	display : flex;
	flex-direction : column;
	gap : 11px;
}
#singleCompany .biz-hbar .row{
	display : grid;
	grid-template-columns : 110px 1fr 44px;
	gap : 10px;
	align-items : center;
}
#singleCompany .biz-hbar .lbl{
	font-weight : 700;
	font-size : 12.5px;
	color : var( --ink );
	line-height : 1.3;
}
#singleCompany .biz-hbar .track{
	height : 16px;
	background : #f1f3f6;
	border-radius : 9999px;
	border : 1.5px solid #dfe4ea;
	overflow : hidden;
}
#singleCompany .biz-hbar .fill{
	height : 100%;
	border-radius : 9999px;
	background : var( --primary );
}
#singleCompany .biz-hbar .row:nth-child( 2 ) .fill{ background : #e2547a; }
#singleCompany .biz-hbar .row:nth-child( 3 ) .fill{ background : #ec7f9d; }
#singleCompany .biz-hbar .row:nth-child( 4 ) .fill{ background : #f3a8bd; }
#singleCompany .biz-hbar .row:nth-child( 5 ) .fill{ background : #f9cdd9; }
#singleCompany .biz-hbar .val{
	font-family : "RocknRoll One";
	font-size : 13px;
	color : var( --primary );
	text-align : right;
}

/* ドーナツ */
#singleCompany .biz-donut-wrap{
	display : flex;
	justify-content : space-around;
	align-items : flex-start;
	gap : 8px;
	flex-wrap : wrap;
}
#singleCompany .biz-donut-item{
	text-align : center;
}
#singleCompany .biz-donut-item .donut{
	width : 104px;
	height : 104px;
	border-radius : 50%;
	margin : 0 auto;
	position : relative;
	display : flex;
	align-items : center;
	justify-content : center;
	border : 2px solid var( --ink );
}
#singleCompany .biz-donut-item .donut::after{
	content : "";
	position : absolute;
	inset : 16px;
	background : #fff;
	border-radius : 50%;
	border : 2px solid var( --ink );
}
#singleCompany .biz-donut-item .donut .c{
	position : relative;
	z-index : 1;
	font-family : "RocknRoll One";
	font-size : 17px;
	color : var( --ink );
	line-height : 1.15;
	text-align : center;
}
#singleCompany .biz-donut-item .donut .c small{
	display : block;
	font-family : "Zen Maru Gothic";
	font-weight : 700;
	font-size : 9.5px;
	color : #777;
}
#singleCompany .biz-donut-item .cap{
	font-weight : 900;
	font-size : 12.5px;
	margin-top : 8px;
	color : var( --ink );
}
#singleCompany .biz-donut-item .legend{
	display : flex;
	justify-content : center;
	gap : 10px;
	margin-top : 5px;
	flex-wrap : wrap;
}
#singleCompany .biz-donut-item .legend span{
	font-weight : 700;
	font-size : 10.5px;
	color : #666;
	display : inline-flex;
	align-items : center;
	gap : 4px;
}
#singleCompany .biz-donut-item .legend i{
	width : 9px;
	height : 9px;
	border-radius : 2px;
	display : inline-block;
	border : 1px solid var( --ink );
}

/* 大学ランキング（ゲーティング付き） */
#singleCompany .biz-uni-list{
	list-style : none;
	margin : 0;
	padding : 0;
	display : flex;
	flex-direction : column;
	gap : 8px;
}
#singleCompany .biz-uni-list li{
	display : grid;
	grid-template-columns : 26px 1fr auto;
	gap : 10px;
	align-items : center;
	font-weight : 700;
	font-size : 13.5px;
}
#singleCompany .biz-uni-list .rank{
	width : 26px;
	height : 26px;
	display : flex;
	align-items : center;
	justify-content : center;
	font-family : "RocknRoll One";
	font-size : 12px;
	background : #f1f3f6;
	border : 1.5px solid var( --ink );
	border-radius : 50%;
	color : #666;
}
#singleCompany .biz-uni-list li:nth-child( 1 ) .rank{
	background : var( --primary );
	color : #fff;
}
#singleCompany .biz-uni-list li:nth-child( 2 ) .rank{
	background : #8a93a0;
	color : #fff;
}
#singleCompany .biz-uni-list li:nth-child( 3 ) .rank{
	background : #c89b4a;
	color : #fff;
}
#singleCompany .biz-uni-list .cnt2{
	font-family : "RocknRoll One";
	font-size : 12px;
	color : #888;
}
#singleCompany .biz-uni-locked{
	position : relative;
	margin-top : 10px;
	border-radius : 10px;
	overflow : hidden;
	/* 高さはぼかす行数（4位以下の大学の数）で決まるが、重ねる中身（文言＋ボタン）は
	   行数に関係なく一定なので、2行程度だと入りきらず overflow:hidden で切れる。
	   オーバーレイが収まるだけの高さを最低限確保しておく。 */
	min-height : 124px;
}
#singleCompany .biz-uni-locked .biz-uni-list{
	filter : blur( 5px );
	user-select : none;
	pointer-events : none;
}
#singleCompany .biz-uni-locked .biz-uni-list li:nth-child( -n + 3 ) .rank{
	background : #f1f3f6;
	color : #666;
}
#singleCompany .biz-uni-locked .overlay{
	position : absolute;
	inset : 0;
	display : flex;
	flex-direction : column;
	align-items : center;
	justify-content : center;
	gap : 8px;
	/* 文言が折り返した場合にボタンが縁に貼り付かないよう内側に余白を持たせる */
	padding : 12px 14px;
	background : linear-gradient( 180deg , rgba( 255 , 255 , 255 , .35 ) , rgba( 255 , 255 , 255 , .75 ) );
}
#singleCompany .biz-uni-locked .overlay p{
	margin : 0;
	font-weight : 900;
	font-size : 12.5px;
	color : var( --ink );
	text-align : center;
	line-height : 1.5;
}
#singleCompany .biz-uni-locked .overlay b{
	color : var( --primary );
}
#singleCompany .biz-uni-locked .overlay a{
	background : var( --primary );
	color : #fff;
	font-weight : 900;
	font-size : 12.5px;
	padding : 8px 18px;
	border-radius : 9999px;
	border : 2px solid var( --ink );
	box-shadow : 2px 2px 0 var( --ink );
	text-decoration : none;
}

/* 働き方データ */
/* 働き方データは公開されている項目だけを並べるため、中身の量が企業ごとに変わる。
	上下に auto マージンを置いて、注記より上の余white を均等に分け、数値を中央に見せる。
	（.p-foot-note の margin-top:auto と併用すると余白が3等分され注記が浮くので、
	  このパネルでは注記側の auto を打ち消す） */
#singleCompany .biz-stat-panel.is-work .biz-work-nums{
	margin-block : auto;
}
#singleCompany .biz-stat-panel.is-work .p-foot-note{
	margin-top : 10px;
}
#singleCompany .biz-work-nums{
	display : grid;
	grid-template-columns : 1fr 1fr;
	gap : 10px;
}
/* 公開されている項目が1つだけのとき、2列のままだと左半分に寄って欠けたように見える */
#singleCompany .biz-work-nums.is-single{
	grid-template-columns : 1fr;
}
#singleCompany .biz-work-num{
	background : #f8fafc;
	border : 1.5px dashed #c7cfd9;
	border-radius : 10px;
	padding : 12px 10px;
	text-align : center;
}
#singleCompany .biz-work-num .lbl{
	font-weight : 700;
	font-size : 11px;
	color : #666;
	display : block;
	line-height : 1.4;
}
#singleCompany .biz-work-num .num{
	font-family : "RocknRoll One";
	font-size : 24px;
	color : var( --ink );
	display : block;
	margin-top : 3px;
}
#singleCompany .biz-work-num .num small{
	font-size : 12px;
	font-family : "Zen Maru Gothic";
	font-weight : 900;
}

/* ===== 記事プレビュー（企業TOP）＆コラム一覧 ===== */
#singleCompany .biz-top-preview{
	margin-top : 24px;
}
#singleCompany .tp-h{
	display : flex;
	align-items : center;
	gap : 8px;
	margin : 0 0 12px;
	font-weight : 900;
	font-size : 17px;
	color : var( --ink );
}
#singleCompany .tp-list{
	display : grid;
	grid-template-columns : 1fr 1fr;
	gap : 10px;
}
/* コラム一覧のカード（.campus-grid / .post_co は campus_renew.css の共通コンポーネント）。
	素の .campus-grid は全幅ページ用の3列なので、本文列（最大約840px）では2列にする。
	カード自体の見た目は共通コンポーネント側に任せ、ここでは並びだけ調整する。 */
#singleCompany .campus-grid{
	grid-template-columns : 1fr 1fr;
	gap : 32px 20px;
}
@media screen and ( width <= 768px ){
	#singleCompany .campus-grid{
		grid-template-columns : 1fr;
	}
}
#singleCompany .tp-item{
	background : #fff;
	border : 2px solid var( --ink );
	border-radius : 12px;
	padding : 13px 16px;
	text-decoration : none;
	display : block;
	box-shadow : var( --soft-shadow );
}
#singleCompany .tp-item:hover{
	background : #fef5f7;
}
#singleCompany .tp-badge{
	font-weight : 900;
	font-size : 10.5px;
	color : #fff;
	background : var( --primary );
	border-radius : 9999px;
	padding : 2px 10px;
	display : inline-block;
	margin-bottom : 6px;
}
#singleCompany .tp-badge.es{ background : var( --ink ); }
#singleCompany .tp-badge.column{ background : #5a8f3c; }
#singleCompany .tp-ttl{
	font-weight : 900;
	font-size : 14px;
	line-height : 1.5;
	color : var( --ink );
	display : block;
}
#singleCompany .tp-sub{
	font-weight : 600;
	font-size : 11px;
	color : #888;
	display : block;
	margin-top : 4px;
}
#singleCompany .tp-more{
	margin-top : 14px;
	text-align : center;
}
#singleCompany .tp-more a{
	display : inline-block;
	background : #fff;
	color : var( --primary );
	border : 2px solid var( --primary );
	font-weight : 900;
	font-size : 14px;
	border-radius : 9999px;
	padding : 9px 28px;
	text-decoration : none;
	box-shadow : 2px 2px 0 var( --ink );
}
#singleCompany .tp-more a:hover{
	background : var( --primary );
	color : #fff;
}

/* モックの 640px ブレークポイント: 縮小調整 */
@media screen and ( width <= 640px ){
	#singleCompany .biz-main-col{
		font-size : 16px;
	}
	#singleCompany .biz-stats__h{
		font-size : 19px;
	}
	/* カードは3枚なのでスマホでも3列。2列だと1枚だけ次の行に余るため */
	#singleCompany .biz-stat-cards{
		gap : 8px;
	}
	#singleCompany .biz-stat-card{
		padding : 14px 6px 12px;
	}
	#singleCompany .biz-stat-card .num{
		font-size : 24px;
	}
	/* パネルは2列だと横幅が足りず見出し・中身が詰まるのでスマホでは1列 */
	#singleCompany .biz-stats__grid{
		grid-template-columns : 1fr;
		gap : 12px;
	}
	#singleCompany .biz-stat-panel .p-head{
		padding : 9px 12px;
		font-size : 13.5px;
	}
	#singleCompany .biz-stat-panel .p-body{
		padding : 14px;
	}
	#singleCompany .biz-hbar .row{
		grid-template-columns : 92px 1fr 40px;
	}
	#singleCompany .biz-corp-head{
		padding : 18px 18px;
	}
	#singleCompany .biz-corp-head__row{
		grid-template-columns : 64px 1fr;
		gap : 14px;
	}
	#singleCompany .biz-corp-head__logo{
		width : 64px;
		height : 64px;
		border-radius : 14px;
		font-size : 22px;
	}
	#singleCompany .biz-corp-head__name{
		font-size : 21px;
	}
	#singleCompany .biz-company-tabs__item{
		padding : 10px 14px;
		font-size : 13.5px;
	}
	#singleCompany .biz-company-tabs__item .cnt{
		font-size : 10px;
	}
	#singleCompany .biz-es-card{
		padding : 32px 16px 14px;
	}
	#singleCompany .es-head{
		grid-template-columns : 48px 1fr;
		gap : 10px;
	}
	#singleCompany .es-avatar{
		width : 48px;
		height : 48px;
	}
	#singleCompany .es-author{
		font-size : 15px;
	}
	#singleCompany .es-cta .cta-text{
		font-size : 12px;
	}
	#singleCompany .lock-cta{
		font-size : 13px;
		padding : 9px 18px;
	}
	#singleCompany .tp-list{
		grid-template-columns : 1fr;
	}
}

/* ===== データ未取得プレースホルダー =====
	データ源が未整備の統計・値が空のACFフィールドに表示する「データ取得中…」。 */
#singleCompany .biz-data-pending{
	display : flex;
	align-items : center;
	justify-content : center;
	min-height : 120px;
	font-weight : 700;
	font-size : 13px;
	color : #a5adb8;
	letter-spacing : .05em;
}
#singleCompany .biz-stat-card .pending{
	display : block;
	margin-top : 10px;
	padding-bottom : 6px;
	font-weight : 700;
	font-size : 11.5px;
	color : #a5adb8;
}
#singleCompany .biz-work-num .pending{
	display : block;
	margin-top : 10px;
	padding-bottom : 4px;
	font-weight : 700;
	font-size : 11px;
	color : #a5adb8;
}
/* スマホではパネルが1列＝横長になるので、空きパネルの高さを詰める */
@media screen and ( width <= 640px ){
	#singleCompany .biz-data-pending{
		min-height : 84px;
	}
}