@charset "utf-8";

/*!
 * feature_graph.css
 * グラフエリア①平均給与分布棒グラフ / グラフエリア②求人数棒グラフ
 */

.ftr-graph-area {
	width: 100%;
	max-width: 642px;
	margin: 0 auto 20px;
	padding: 10px;
	box-sizing: border-box;
}

.ftr-graph-title {
	margin: 0 0 8px;
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 500;
	font-size: 18px;
	line-height: 31.5px;
	color: #eb7b7d;
}

.ftr-graph-card--jobs .ftr-graph-title {
	/* 見出しと縦軸の最上段目盛り「3,000件」との間を20pxあける（pc/sp共通） */
	margin-bottom: 20px;
}

.ftr-graph-card {
	position: relative;
	width: 100%;
	box-sizing: border-box;
	border-radius: 2px;
	background: #ffffff;
	padding: 36px 28px 28px;
}

.ftr-graph-bars {
	display: grid;
	align-items: end;
	column-gap: 8px;
	width: 100%;
	/* バー本体(SP最大100px/PC最大150px)＋バー下のラベル(約26px)が収まる高さを
	   確保し、ラベルが下の要素（金額ボックス等）にはみ出さないようにする。
	   SP/PC共通の上限のため大きい方（PC 150+ラベル≒176px）に合わせる
	   （高さはautoのためSPは実際には約126pxまで縮む） */
	max-height: 176px;
}

.ftr-graph-bars--salary {
	grid-template-columns: repeat(6, 1fr);
}

.ftr-graph-bars--jobs {
	grid-template-columns: repeat(5, 1fr);
	/* 職種名ラベルは3行まで折り返すことがあるため、3行分のラベル高さを
	   確保できる高さにする（ftr-graph-bar-labelの高さと対で調整） */
	height: 330px;
	max-height: none;
}

.ftr-graph-bar-col {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	height: 100%;
}

.ftr-graph-bar-break {
	/* 波線（軸破断マーク）。バー本体の高さ（縦軸の値）とは無関係に、
	   トラック上端から一定の位置に固定する（位置は下の個別ルールで指定）。
	   ・職種別求人数グラフ：一番左（rank_no=1）のバーに常に表示
	   ・時給分布グラフ：一番左（先頭）のバー自体の時給階級が
	     2000円以上の場合のみ表示（bar.has_break）
	   デザインはFigma（node-id=176-2713、グラフエリア②求人数棒グラフ 07/07修正）の
	   波線パス（viewBox 0 0 120.456 24）をベースに、
	   線を太く見せるためstroke-widthを5から8に変更したSVGを背景画像として使用する
	   （stroke色は#c4c4c4に変更） */
	display: none;
	position: absolute;
	left: 50%;
	width: 110%;
	height: 10px;
	transform: translate(-50%, -50%);
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20120.456%2024'%20preserveAspectRatio='none'%20fill='none'%3E%3Cpath%20d='M2.2282%2012C8.67264%20-0.666667%2015.1171%20-0.666667%2021.5615%2012C28.006%2024.6667%2034.4504%2024.6667%2040.8949%2012C47.3393%20-0.666667%2053.7838%20-0.666667%2060.2282%2012C66.6726%2024.6667%2073.1171%2024.6667%2079.5615%2012C86.006%20-0.666667%2092.4504%20-0.666667%2098.8949%2012C105.339%2024.6667%20111.784%2024.6667%20118.228%2012'%20stroke='%23c4c4c4'%20stroke-width='8'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.ftr-graph-bars--jobs .ftr-graph-bar-break {
	/* トラック高さ274pxの上から1/4 */
	top: 68.5px;
}

.ftr-graph-bars--salary .ftr-graph-bar-break {
	/* トラック高さ100pxの上から1/3 */
	top: 33.33px;
}

.ftr-graph-bar {
	width: 100%;
	max-width: 95.28px;
	height: var(--bar-h-sp);
	background: #c4c4c4;
	border-radius: 4px;
}

.ftr-graph-bar--peak {
	background: #eb7b7d;
}

.ftr-graph-bar--jobs {
	background: #eb7b7d;
	max-width: 53px;
}

.ftr-graph-bar-label {
	margin: 8px 0 0;
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 400;
	font-size: 11px;
	line-height: 1.4;
	color: #636363;
	text-align: center;
}

.ftr-graph-bars--jobs .ftr-graph-bar-label {
	/* 職種名の長さ・折り返し行数に関わらずラベル領域の高さを固定し、
	   バーの下端（土台）が列ごとにズレないようにする（最大3行、
	   それを超える分は省略記号で切り詰める） */
	height: calc(1.4em * 3);
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}

.ftr-graph-bars--salary .ftr-graph-bar-label {
	/* 画面幅が狭い時に「2400円以上」等の長いラベルだけ折り返し行数が増え、
	   カード外にはみ出さないよう、職種別求人数グラフと同様に
	   最大3行に固定して超過分は省略記号で切り詰める */
	height: calc(1.4em * 3);
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}

.ftr-graph-salary-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	margin-top: 34px;
	padding: 26.66px 24.67px 22.67px;
	background: #ffffff;
	border: 1px solid #eb7b7d;
	border-radius: 8px;
}

.ftr-graph-salary-line {
	/* spは見出し・金額を2行表示（従来通り）。pcのみ一行表示にする（下記media query） */
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

.ftr-graph-salary-label {
	font-weight: bold;
	font-size: 15px;
	color: #2e2d2e;
}

.ftr-graph-salary-value {
	font-weight: bold;
	font-size: 24px;
	color: #eb7b7d;
}

.ftr-graph-salary-unit {
	font-weight: bold;
	font-size: 15px;
	color: #eb7b7d;
}

.ftr-graph-salary-note {
	margin: 0;
	font-size: 12px;
	color: #97999b;
}

.ftr-graph-card--jobs-row {
	display: flex;
	gap: 8px;
}

.ftr-graph-yaxis {
	/* バー本体の高さ（274px、ftr-graph-bars--jobsのラベル予備を除いた
	   実トラック分）と揃え、各目盛り(span)をtop:%で絶対配置する。
	   span内の文字はposition:absoluteで幅に寄与しないため、
	   最長ラベル("3,000件")が収まる幅を明示的に確保し、
	   グラフ(バー)側と文字が重ならないようにする */
	position: relative;
	flex: 0 0 50px;
	width: 50px;
	height: 274px;
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 400;
	font-size: 12px;
	color: #636363;
	white-space: nowrap;
}

.ftr-graph-yaxis span {
	position: absolute;
	left: 0;
	transform: translateY(-50%);
}

.ftr-graph-card--jobs-row .ftr-graph-bars--jobs {
	flex: 1;
}

@media screen and (min-width: 768px) {
	.ftr-graph-area {
		max-width: 718px;
		padding: 10px;
	}

	.ftr-graph-title {
		font-size: 18px;
		font-weight: bold;
	}

	.ftr-graph-card {
		padding: 32px 28px 28px;
	}

	.ftr-graph-card--jobs {
		height: 505px;
		box-sizing: border-box;
	}

	.ftr-graph-bars--jobs {
		height: 376px;
		/* pc: バー間の余白を20pxに */
		column-gap: 20px;
	}

	.ftr-graph-yaxis {
		height: 320px;
	}

	.ftr-graph-bar {
		height: var(--bar-h-pc);
	}

	.ftr-graph-bar--jobs {
		/* pc: バーの幅を80.4pxに */
		max-width: 80.4px;
	}

	.ftr-graph-bar-break {
		/* PC: SPと異なりheightは元デザイン通り19pxのまま */
		height: 19px;
	}

	.ftr-graph-bars--jobs .ftr-graph-bar-break {
		/* PC: トラック高さ320pxの上から1/4 */
		top: 80px;
	}

	.ftr-graph-bars--salary .ftr-graph-bar-break {
		/* PC: トラック高さ150pxの上から1/3 */
		top: 50px;
	}

	.ftr-graph-salary-box {
		margin-top: 24px;
	}

	.ftr-graph-salary-line {
		/* pcは見出し・金額を横並び。長い見出しが折り返した場合も
		   金額と上下中央で揃える */
		flex-direction: row;
		align-items: center;
		white-space: nowrap;
	}

	.ftr-graph-salary-label,
	.ftr-graph-salary-unit {
		font-size: 20px;
		white-space: normal;
	}

	.ftr-graph-salary-value {
		font-size: 32px;
	}
}