@charset "UTF-8";

/* ============================================================
   c-barchart : 縦棒グラフ（売上高）コンポーネント
   ------------------------------------------------------------
   ・セレクタは .c-barchart 名前空間のみ。既存のどの要素にも当たりません
   ・既存CSSの削除・書き換えは不要（このファイルを追記/別読み込みするだけ）
   ・値やサイズは CSS変数 と HTML の data-* で制御
   ============================================================ */

.c-barchart {
	/* ---- 調整用パラメータ ---- */
	--barchart-count: 9;            /* 棒の本数（JSが自動で上書き） */
	--barchart-height: 300px;       /* プロット領域の高さ */
	--barchart-axis-w: 34px;        /* 縦軸ラベルの幅 */
	--barchart-gap: 8px;            /* 縦軸ラベルとプロットの間隔 */
	--barchart-bar-w: 60%;          /* 1カラム内での棒の幅 */
	--barchart-bar-max: 40px;       /* 棒の最大幅 */
	--barchart-line: #B9D6F0;       /* 目盛線 */
	--barchart-label: #2C64A5;      /* 縦軸ラベル・数値 */
	--barchart-x-label: #4A4A4A;    /* 横軸ラベル */
	--barchart-arrow: #EE8B2E;      /* 線モードのときの矢印の色 */
	--barchart-arrow-offset: 26px;  /* 棒の頂点から矢印までの距離（線モード / fitモード） */
	--barchart-arrow-top: 12%;      /* 画像モードの位置（プロット領域に対する%） */
	--barchart-arrow-left: 4%;
	--barchart-arrow-w: 90%;        /* 画像モードの幅 */
	--barchart-font: "Oswald", sans-serif; /* 数字用フォント */

	position: relative;
	width: 100%;
	max-width: 490px;
	margin: 0 auto;
}

/* 既存リセットの有無に依存しないための自己完結スタイル */
.c-barchart,
.c-barchart *,
.c-barchart *::before,
.c-barchart *::after { box-sizing: border-box; }
.c-barchart ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.c-barchart p { margin: 0; }

.c-barchart__inner {
	display: flex;
	align-items: flex-end;
	gap: var(--barchart-gap);
}

/* ---- 縦軸 ---- */
.c-barchart__axis-y {
	position: relative;
	flex: 0 0 var(--barchart-axis-w);
	width: var(--barchart-axis-w);
	height: var(--barchart-height);
}
.c-barchart__axis-y li {
	position: absolute;
	right: 0;
	transform: translateY(50%);
	font-family: var(--barchart-font);
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1;
	color: var(--barchart-label);
	white-space: nowrap;
}
.c-barchart__axis-y .c-barchart__unit {
	bottom: 100%;
	margin-bottom: 12px;
	transform: none;
}

/* ---- プロット領域 ---- */
.c-barchart__plot {
	position: relative;
	flex: 1 1 auto;
	height: var(--barchart-height);
}

/* 目盛線（JSが縦軸ラベルと同じ位置に生成） */
.c-barchart__grid {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	pointer-events: none;
}
.c-barchart__grid span {
	position: absolute;
	left: 0;
	right: 0;
	height: 1px;
	background-color: var(--barchart-line);
}

/* ---- 棒 ---- */
.c-barchart__bars {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: grid;
	grid-template-columns: repeat(var(--barchart-count), 1fr);
	align-items: end;
}
.c-barchart__bars > li {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	height: 100%;
}
.c-barchart__bar {
	position: relative;
	width: var(--barchart-bar-w);
	max-width: var(--barchart-bar-max);
	height: 0; /* JSでアニメーション */
	background-color: var(--barchart-label);
}
.c-barchart__num {
	position: absolute;
	left: 50%;
	bottom: calc(100% + 6px);
	transform: translateX(-50%);
	font-family: var(--barchart-font);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.1;
	color: var(--barchart-label);
	white-space: nowrap;
}
.c-barchart__num small {
	display: block;
	font-family: inherit;
	font-size: 0.625rem;
}

/* 棒の色（左→右で濃く／既存 box--08 と同じ配色） */
.c-barchart__bars > li:nth-child(1) .c-barchart__bar { background-color: #55BFD3; }
.c-barchart__bars > li:nth-child(2) .c-barchart__bar { background-color: #4C9DB5; }
.c-barchart__bars > li:nth-child(3) .c-barchart__bar { background-color: #438DC3; }
.c-barchart__bars > li:nth-child(4) .c-barchart__bar { background-color: #2C64A5; }
.c-barchart__bars > li:nth-child(5) .c-barchart__bar { background-color: #133F91; }
.c-barchart__bars > li:nth-child(6) .c-barchart__bar { background-color: #092965; }
.c-barchart__bars > li:nth-child(7) .c-barchart__bar { background-color: #062255; }
.c-barchart__bars > li:nth-child(8) .c-barchart__bar { background-color: #031D4E; }
.c-barchart__bars > li:nth-child(9) .c-barchart__bar { background-color: #02163D; }

/* ---- 矢印 ---- */
.c-barchart__arrow {
	position: absolute;
	top: 0;
	left: 0;
	transform-origin: 0 50%;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.6s ease;
}
.c-barchart__arrow.is-show { opacity: 1; }

/* (A) 画像モード：既存の c08_01.svg をそのまま使う場合 */
.c-barchart__arrow--img {
	top: var(--barchart-arrow-top, 12%);
	left: var(--barchart-arrow-left, 4%);
	width: var(--barchart-arrow-w, 90%);
	height: auto;
	transform-origin: center center;
}
.c-barchart__arrow--img img {
	display: block;
	width: 50%;
	height: auto;
	max-width: none;
}
/* fit モードのときは JS が left/top/width/rotate を設定する */
.c-barchart__arrow--img[data-arrow-mode="fit"] {
	top: 0;
	left: 0;
	width: 0;
	transform-origin: 0 50%;
}

/* (B) 線モード：画像を使わずCSSで描く場合（img を入れなければ自動でこちら） */
.c-barchart__arrow--line {
	width: 0;
	height: 3px;
	background-color: var(--barchart-arrow);
}
.c-barchart__arrow--line::after {
	content: "";
	position: absolute;
	left: 100%;
	top: 50%;
	transform: translateY(-50%);
	border-style: solid;
	border-width: 7px 0 7px 12px;
	border-color: transparent transparent transparent var(--barchart-arrow);
}

/* ---- 横軸 ---- */
.c-barchart__axis-x {
    display: grid;
    grid-template-columns: repeat(var(--barchart-count), 1fr);
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--barchart-x-label);
    text-align: right;
    width: 90%;
	margin: 5px 10px 0 auto !important;
}

/* 連結目標 */
.c-barchart__future {
	position: relative;
}
.c-barchart__future::after {
    content: "(連結目標)";
    position: absolute;
    left: 0;
    bottom: 0;
    font-size: 14px;
    transform: translate(-25%, -130%);
    white-space: nowrap;
}

/* ---- SP ---- */
@media (max-width: 768px) {
	.c-barchart {
		--barchart-height: 210px;
		--barchart-axis-w: 10px;
		--barchart-gap: 5px;
		--barchart-bar-max: 22px;
		--barchart-arrow-offset: 18px;
		--barchart-arrow-top: 12%;   /* 画像モードのSP位置。実機を見ながら調整 */
		--barchart-arrow-left: 4%;
		--barchart-arrow-w: 90%;
		max-width: 310px;
	}
	.c-barchart__axis-y li { font-size: 0.5rem; }
	.c-barchart__num {
		bottom: calc(100% + 4px);
		font-size: 0.625rem;
	}
	.c-barchart__num small { font-size: 0.5rem; }
	.c-barchart__bars > li:last-child .c-barchart__num {
		left: auto;
		right: 0;
		transform: none;
	}
	.c-barchart__axis-x { font-size: 0.5rem; }
	.c-barchart__arrow--line { height: 2px; }
	.c-barchart__arrow--line::after { border-width: 5px 0 5px 9px; }
	.c-barchart__future::after {
		font-size: 10px;
	}
}

/* ---- モーション設定を尊重 ---- */
@media (prefers-reduced-motion: reduce) {
	.c-barchart__arrow { transition: none; }
}