/*
 * IR 情報 (第二弾) 用 CSS。pages.css の後に読み込む (template-ir-page.php のページだけ)。
 *   左メニュー付きの共通レイアウト / タブ / よくある質問 / IR カレンダー / 株式情報 / DX に関する取り組み
 *
 * Figma: andfactoryHPデザイン_2026 > IR情報 (5425-83004)
 * モードで値が変わる変数 (--af-fs-16 など) は pages.css の :root で定義している。
 */

/* ------------------------------------------------------------------
 * レイアウト (Figma: IR NEWS > wrapper)
 *   PC: 左メニュー 210px + 本文。メニューの上は 64px、本文の各セクションは上下 72px
 *   SP: メニューを本文の上に横並び
 * ---------------------------------------------------------------- */
.ir-layout {
	padding: 72px var(--af-gutter);
}

.ir-layout__inner {
	display: flex;
	align-items: flex-start;
	gap: 40px;
	max-width: var(--af-content-max);
	margin: 0 auto;
}

.ir-layout__main {
	flex: 1 1 0;
	min-width: 0;
}

/* ------------------------------------------------------------------
 * 左メニュー (Figma: Tab > assets/TabButton)
 * ---------------------------------------------------------------- */
.ir-nav {
	flex: none;
	width: 210px;
	padding-top: 64px;
}

.ir-nav__list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ir-nav__link {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 20px 16px;
	border-radius: 8px;
	font-size: var(--af-fs-16);
	font-weight: 700;
	line-height: var(--af-lh-16);
	color: var(--af-fg-sub);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.2s;
}

.ir-nav__dot {
	flex: none;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--af-border-sub);
}

.ir-nav__link:hover {
	background: var(--af-bg-inset);
}

.ir-nav__link.is-current {
	background: var(--af-bg-accent);
	color: var(--af-fg);
}

.ir-nav__link.is-current .ir-nav__dot {
	background: var(--af-fg-accent);
}

/* ------------------------------------------------------------------
 * セクション
 * ---------------------------------------------------------------- */
.ir-section {
	display: flex;
	flex-direction: column;
	gap: 40px;
	padding: 72px 0;
}

/* 見出しから内容まで layout/content-gap (DX に関する取り組み) */
.ir-section--wide {
	gap: var(--af-content-gap);
}

.ir-heading {
	min-height: 48px;
}

/* 表やリストの上の見出し (Figma: heading/default 26px) */
.ir-subheading {
	margin: 0;
	font-size: var(--af-fs-26);
	font-weight: 700;
	line-height: var(--af-lh-36);
	color: var(--af-fg);
}

.ir-block {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 32px;
}

.ir-block > * {
	max-width: 100%;
}

.ir-text,
.ir-note,
.ir-prose {
	margin: 0;
	font-size: var(--af-fs-16);
	font-weight: 500;
	line-height: var(--af-lh-28);
	color: var(--af-fg);
	overflow-wrap: anywhere;
}

.ir-text a,
.ir-prose a,
.ir-table a,
.faq__a-text a {
	color: var(--af-fg-accent);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.ir-text a:hover,
.ir-prose a:hover,
.ir-table a:hover,
.faq__a-text a:hover {
	text-decoration: none;
}

/* 段落の間は 1 行ぶん空ける (Figma: 段落の頭に空行) */
.ir-prose {
	display: flex;
	flex-direction: column;
	gap: var(--af-lh-28);
}

.ir-prose p {
	margin: 0;
}

/* ------------------------------------------------------------------
 * タブ (Figma: 丸いボタン。選択中は青地に白文字、それ以外は灰色の枠)
 * ---------------------------------------------------------------- */
.ir-tabs__list {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ir-tabs__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 120px;
	padding: 11px 12px;
	border: 1px solid var(--af-border);
	border-radius: 999px;
	font-size: var(--af-fs-16);
	font-weight: 700;
	line-height: var(--af-lh-16);
	color: var(--af-fg);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.2s;
}

.ir-tabs__link:hover {
	background: var(--af-bg-inset);
}

.ir-tabs__link.is-current {
	border-color: var(--af-bg-accent-emphasis);
	background: var(--af-bg-accent-emphasis);
	color: #fff;
}

/* ------------------------------------------------------------------
 * 表 (Figma: 株主メモ。見出しセルは灰色地)
 * ---------------------------------------------------------------- */
.ir-table {
	width: 100%;
	border: 1px solid var(--af-border-sub);
	border-collapse: collapse;
	font-size: 14px;
	line-height: 28px;
	color: var(--af-fg);
}

.ir-table tr + tr {
	border-top: 1px solid var(--af-border-sub);
}

.ir-table th,
.ir-table td {
	padding: 14px 24px;
	text-align: left;
	vertical-align: middle;
	overflow-wrap: anywhere;
}

.ir-table th {
	width: min(283px, 40%);
	background: var(--af-bg-inset);
	font-weight: 700;
	color: var(--af-fg-sub);
}

.ir-table td {
	font-weight: 500;
}

/* ------------------------------------------------------------------
 * 株式情報
 * ---------------------------------------------------------------- */
/* タブ・株主メモ・株価情報の間 (layout/content-gap: PC 64px / SP 40px) */
.ir-stock {
	gap: var(--af-content-gap);
}

.ir-stock .ir-block {
	width: 100%;
}

/* ------------------------------------------------------------------
 * 社長メッセージ (/ir/message/)
 * Figma: IR情報 | DXに関する取り組み (5425:84859) の非表示の「社長メッセージ」。写真と文章を横に並べ、狭いときは縦に積む
 * ---------------------------------------------------------------- */
.president {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	gap: 32px 48px;
}

/* 写真は細め (ヤンさんのイメージ)。文章側を広くして、キャッチを「〜通じ、／〜ともに歩む／企業へ」の 3 行に収める */
.president__photo {
	flex: 0 1 320px;
	min-width: 240px;
	aspect-ratio: 450 / 479;
	overflow: hidden;
	border-radius: 8px;
	background: var(--af-bg-inset);
}

.president__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.president__body {
	flex: 1 1 0;
	min-width: 320px;
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.president__catch {
	margin: 0;
	font-size: 32px;
	font-weight: 700;
	line-height: var(--af-lh-48);
	color: var(--af-fg-accent);
}

.president__phrase {
	display: inline-block;
}

/* 段落の間は 1 行ぶん空ける (両角さんのデザイン 6232:16996、2026-11-09。PC 28px / SP 24px) */
.president__text {
	display: flex;
	flex-direction: column;
	gap: var(--af-lh-28);
	font-size: var(--af-fs-16);
	font-weight: 500;
	line-height: var(--af-lh-28);
	color: var(--af-fg);
}

.president__text p {
	margin: 0;
}

.president__name {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 4px;
	margin: 0;
}

.president__position {
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	color: var(--af-fg-sub);
}

.president__person {
	font-size: var(--af-fs-26);
	font-weight: 700;
	line-height: var(--af-lh-36);
	color: var(--af-fg);
}

/* ------------------------------------------------------------------
 * よくある質問 (Figma: AccordionPanel)
 * ---------------------------------------------------------------- */
.faq {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.faq__item {
	border: 1px solid var(--af-border-sub);
	border-radius: 8px;
	overflow: hidden;
}

.faq__item[open] {
	border-color: var(--af-bg-accent);
	background: var(--af-bg-accent);
}

.faq__q {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 24px;
	list-style: none;
	cursor: pointer;
	font-size: var(--af-fs-16);
	font-weight: 700;
	line-height: var(--af-lh-28);
	color: var(--af-fg);
}

.faq__q::-webkit-details-marker {
	display: none;
}

.faq__q:hover {
	background: var(--af-bg-inset);
}

.faq__item[open] .faq__q:hover {
	background: transparent;
}

.faq__q-text {
	flex: 1 1 0;
	min-width: 0;
}

/* 「Q.」「A.」 (Figma: icon 24px の中に 18px の文字) */
.faq__mark {
	flex: none;
	width: 24px;
	font-size: 18px;
	font-weight: 700;
	line-height: 24px;
	text-align: center;
	color: var(--af-fg-accent-ondark);
}

.faq__mark--a {
	color: var(--af-fg-accent);
}

.faq__icon {
	flex: none;
	width: 16px;
	height: 16px;
}

.faq__icon--close,
.faq__item[open] .faq__icon--open {
	display: none;
}

.faq__item[open] .faq__icon--close {
	display: block;
}

.faq__a {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	margin: 0 16px 16px;
	padding: 24px;
	border-radius: 8px;
	background: var(--af-bg);
}

.faq__a-text {
	flex: 1 1 0;
	min-width: 0;
	font-size: 14px;
	font-weight: 500;
	line-height: 28px;
	color: var(--af-fg);
	overflow-wrap: anywhere;
}

/* ------------------------------------------------------------------
 * IR カレンダー (Figma: table 1 + 年ごとの TableRow)
 * ---------------------------------------------------------------- */
.ir-calendar {
	gap: var(--af-content-gap);
}

.ir-calendar__chart img {
	display: block;
	width: 100%;
	height: auto;
}

.ir-calendar__year {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.ir-calendar__list {
	margin: 0;
}

.ir-calendar__row {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 77px;
	padding: 16px 8px;
	border-top: 1px solid var(--af-border-sub);
}

.ir-calendar__date {
	flex: none;
	width: 256px;
	font-size: var(--af-fs-16);
	font-weight: 700;
	line-height: var(--af-lh-16);
	color: var(--af-fg-accent);
}

.ir-calendar__text {
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
	font-size: 14px;
	font-weight: 500;
	line-height: 28px;
	color: var(--af-fg);
}

/* ------------------------------------------------------------------
 * DX に関する取り組み (Figma: DX推進の指標管理の表)
 * ---------------------------------------------------------------- */
/* 指標管理の表 (本文の table.comTable をそのまま使う) */
.dx-table table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
	line-height: 28px;
	color: var(--af-fg);
}

.dx-table th,
.dx-table td {
	padding: 24px;
	text-align: left;
	vertical-align: middle;
	overflow-wrap: anywhere;
}

.dx-table thead th {
	height: 84px;
	background: var(--af-bg-accent-emphasis);
	font-size: 16px;
	font-weight: 500;
	color: #fff;
}

.dx-table thead th + th {
	border-left: 1px solid #fff;
}

.dx-table thead th:nth-child(1) {
	width: 180px;
}

.dx-table thead th:nth-child(2) {
	width: 240px;
}

.dx-table tbody th {
	border-bottom: 1px solid #fff;
	background: var(--af-bg-accent);
	font-weight: 700;
	color: var(--af-fg-accent);
	white-space: nowrap;
}

.dx-table tbody td {
	height: 160px;
	border-right: 1px solid var(--af-border-sub);
	border-bottom: 1px solid var(--af-border-sub);
	background: var(--af-bg);
	font-weight: 500;
}

.dx-table ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ------------------------------------------------------------------
 * 業績・財務情報 (Figma: 凡例 + グラフ・表の 2 列)
 * ---------------------------------------------------------------- */
.ir-perf {
	gap: var(--af-content-gap);
}

.ir-perf__legend {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ir-perf__legend li {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 18px;
	font-weight: 700;
	line-height: 24px;
	color: var(--af-fg);
}

/* XJ-Storage のグラフの色 (Figma: categorical/accessibility-*) */
.ir-perf__swatch {
	flex: none;
	width: 24px;
	height: 24px;
}

.ir-perf__swatch--q1 {
	background: #da3490;
}

.ir-perf__swatch--q2 {
	background: #e8871a;
}

.ir-perf__swatch--q3 {
	background: #5144d3;
}

.ir-perf__swatch--q4 {
	background: #00c0c7;
}

.ir-perf__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--af-content-gap);
}

.ir-perf__item {
	display: flex;
	flex-direction: column;
	gap: 32px;
	min-width: 0;
}

/* 単位 (「(百万円)」)。Figma には無いが、数値の意味が変わるので見出しの横に小さく出す */
.ir-perf__unit {
	margin-left: 8px;
	font-size: 14px;
	font-weight: 500;
	color: var(--af-fg-sub);
	white-space: nowrap;
}

.ir-perf__graph {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 210 / 167;
}

.ir-perf__table-wrap {
	overflow-x: auto;
}

/* 列幅は均等 (先頭の 1Q〜4Q 列だけ 69px)。年度は「2023」「/08」の 2 行に折り返す (Figma どおり) */
.ir-perf__table {
	width: 100%;
	table-layout: fixed;
	border-collapse: collapse;
	font-size: 14px;
	line-height: 28px;
	color: var(--af-fg);
	font-variant-numeric: tabular-nums;
	overflow-wrap: anywhere;
}

.ir-perf__table th,
.ir-perf__table td {
	height: 56px;
	/* 左右 16px (デザイナー指摘 2026-10-13: 全セル space/16 に統一。PC・SP 共通) */
	padding: 0 16px;
	text-align: left;
	vertical-align: middle;
}

/* 1 行目 (年度) は濃い地に白文字 (Figma: background/emphasis #343434)。文字は 14px (2026-10-13 修正) */
.ir-perf__table thead th,
.ir-perf__table thead td {
	background: var(--af-fg);
	font-size: 14px;
	font-weight: 500;
	color: #fff;
}

.ir-perf__table thead > tr > * + * {
	border-left: 1px solid #fff;
}

.ir-perf__table thead td {
	width: 69px;
}

.ir-perf__table tbody th {
	border-bottom: 1px solid var(--af-border-sub);
	border-left: 1px solid var(--af-border-sub);
	background: var(--af-bg-inset);
	font-weight: 700;
}

.ir-perf__table tbody td {
	border-right: 1px solid var(--af-border-sub);
	border-bottom: 1px solid var(--af-border-sub);
	background: var(--af-bg);
	font-weight: 500;
	/* 数字は途中で折り返さない (入りきらない幅では .ir-perf__table-wrap が横スクロール) */
	white-space: nowrap;
}

.ir-perf__notes {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

/* ご利用上の注意 (Figma: heading/xs 18px + 本文) */
.ir-caution {
	display: flex;
	flex-direction: column;
	gap: 16px;
	color: var(--af-fg);
}

.ir-caution__title {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	line-height: 24px;
}

.ir-caution__list {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--af-fs-16);
	font-weight: 500;
	line-height: var(--af-lh-28);
}

/* ------------------------------------------------------------------
 * IR トップ (Figma: IR情報 | IRトップ)
 * ---------------------------------------------------------------- */
/* 見出し + 右に「一覧を見る」 */
.ir-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.ir-top-list {
	gap: var(--af-content-gap);
}

/* SP 用の一覧の下のボタン (PC では見出しの横) */
.ir-more {
	display: none;
}

/* トップメッセージ (Figma: 淡い青のカード、右に写真) */
.ir-message {
	display: flex;
	overflow: hidden;
	border-radius: 16px;
	background: var(--af-bg-accent);
}

.ir-message__body {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 48px;
	padding: 56px var(--af-card-py);
}

.ir-message__text {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.ir-message__head {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.ir-message__eyebrow {
	font-size: var(--af-fs-16);
	font-weight: 700;
	line-height: 20px;
	letter-spacing: 0.24em;
	color: var(--af-fg);
}

.ir-message__title {
	margin: 0;
	font-size: var(--af-fs-36);
	font-weight: 900;
	line-height: var(--af-lh-48);
	letter-spacing: 0.2em;
	color: var(--af-fg);
}

.ir-message__catch {
	font-size: var(--af-fs-26);
	font-weight: 700;
	line-height: var(--af-lh-36);
	color: var(--af-fg);
}

.ir-message__photo {
	display: block;
	flex: none;
	width: 412px;
}

.ir-message__photo img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 500px;
	object-fit: cover;
}

/* 関連ページのカード (Figma: 淡い青、角丸 16px) */
.ir-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 32px;
}

.ir-card {
	display: flex;
	flex-direction: column;
	gap: 32px;
	padding: 32px;
	border-radius: 16px;
	background: var(--af-bg-accent);
}

.ir-card__title {
	margin: 0;
	font-size: var(--af-fs-26);
	font-weight: 700;
	line-height: var(--af-lh-36);
	color: var(--af-fg-accent);
}

.ir-card__links {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 18px;
}

.ir-card__links a {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 14px;
	font-weight: 700;
	line-height: 20px;
	color: var(--af-fg-sub);
	text-decoration: none;
}

.ir-card__links a:hover {
	color: var(--af-fg-accent);
}

.ir-card__links img {
	flex: none;
	width: 16px;
	height: 16px;
}

/* ------------------------------------------------------------------
 * IR ニュース / IR ライブラリ / 株主総会 (Figma: プルダウン | 縦線 | 丸いボタン + 書類の一覧)
 * ---------------------------------------------------------------- */
.ir-library {
	gap: var(--af-content-gap);
}

.ir-controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 32px;
}

/* 見出し (「2026年8月期・3Q」) と一覧 */
.ir-docs {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.ir-notice {
	gap: 32px;
}

.ir-notice__text {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/* ------------------------------------------------------------------
 * <= 1024px: 左メニューを本文の上に横並び (Figma SP の配置)
 *   Figma は PC 1440px と SP しか無い。この幅で左に 250px 取ると本文が 470px まで狭まり、
 *   DX の表などが潰れるため、タブレットでも SP と同じ配置にする
 * ---------------------------------------------------------------- */
@media (max-width: 1024px) {
	.ir-layout {
		padding: 0 var(--af-gutter);
	}

	.ir-layout__inner {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	/* Figma SP: 上は layout/content-gap、間隔 8px × 12px */
	.ir-nav {
		width: auto;
		padding-top: var(--af-content-gap);
	}

	.ir-nav__list {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 8px 12px;
	}
}

/* ------------------------------------------------------------------
 * <= 768px: SP
 * ---------------------------------------------------------------- */
@media (max-width: 768px) {
	/* 社長メッセージ: 写真を上、文章を下に */
	.president__photo,
	.president__body {
		flex: 1 1 100%;
		min-width: 0;
		max-width: none;
	}

	.president__catch {
		font-size: 24px;
	}

	.ir-section--wide {
		padding: 40px 0;
	}

	.ir-tabs__list {
		gap: 12px 16px;
	}

	/* プルダウンは 1 行に単独、縦線は出さない */
	.ir-controls {
		flex-direction: column;
		align-items: stretch;
		gap: 24px;
	}

	.ir-controls .ir-year:not(:last-child)::after {
		display: none;
	}

	.ir-table th,
	.ir-table td {
		display: block;
		width: auto;
	}

	.ir-calendar__row {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}

	.ir-calendar__date {
		width: auto;
	}

	.ir-perf__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	/* 数字に合わせて列幅を決める (固定幅のままだと狭い端末で数字が入りきらない) */
	.ir-perf__table {
		table-layout: auto;
	}

	/* IR トップ: 「一覧を見る」は一覧の下へ、トップメッセージは写真を上に、カードは 1 列 */
	.ir-head__more {
		display: none;
	}

	.ir-more {
		display: inline-flex;
		align-self: center;
	}

	.ir-message {
		flex-direction: column-reverse;
	}

	.ir-message__body {
		padding: 40px 32px 32px;
	}

	.ir-message__photo {
		width: 100%;
		aspect-ratio: 290 / 242;
	}

	/* SP は横長に切り抜いた画像 (top-message-sp) に切り替わる */
	.ir-message__photo img {
		min-height: 0;
	}

	.ir-cards {
		grid-template-columns: minmax(0, 1fr);
	}

	/* 指標管理の表は種別ごとのまとまりに縦積み (Figma SP: 見出し行なし、まとまりの間 32px) */
	.dx-table thead {
		display: none;
	}

	.dx-table table,
	.dx-table tbody,
	.dx-table tr,
	.dx-table th,
	.dx-table td {
		display: block;
		width: auto;
		height: auto;
	}

	/* PC の高さ 160px (.dx-table tbody td) は詳細度が高いので、ここで外す。外さないと長い内容がはみ出す
	 * (デザイナー指摘 2026-10-13) */
	.dx-table tbody td {
		height: auto;
	}

	.dx-table tbody th:not(:first-child),
	.dx-table tbody tr:not(:first-child) th {
		margin-top: 32px;
	}

	.dx-table tbody td {
		border-left: 1px solid var(--af-border-sub);
	}
}

/* Figma の SP フレーム (幅 476px) より狭い端末では、表の左右の余白を 8px に詰める (16px のままだと数字が入りきらない) */
@media (max-width: 480px) {
	.ir-perf__table th,
	.ir-perf__table td {
		padding: 0 8px;
	}
}