@charset "utf-8";

/*
	V1「AIに相談する」ブロック。

	- クラス名に banner / ad / promo / popup を使わない
	  （EasyList にパス名・クラス名ベースの汎用ルールが実在するため）。接頭辞は ibai。
	- AI 各社のロゴは使わない。色つきの丸（.ibai-d）だけで見分けがつくようにしている。
	  画像を足すと HTTP リクエストが増え、ロゴの利用条件も各社バラバラになるため。
	- 配色は固定バナー（n.css.php）と揃える。CTA #0057ac / 見出し #091142 / 補足 #475467。

	置き場所は3通り。どれになるかは JS が決める（askai.php の ib_ai_js を参照）。
	  ① PC  … 左サイドバー #chb の中に fixed。dl の直下
	  ② PC  … 縦が足りない画面では本文末尾のカード（.ibai-body）
	  ③ SP  … #chb の中（この幅では static になる）＝企業名の直下に、畳んだ状態で
*/

.ibai {
	box-sizing: border-box;
	display: block;
	width: 170px;
	font-family: inherit;
	line-height: 1.35;
	text-align: left;
}

.ibai *,
.ibai *::before,
.ibai *::after {
	box-sizing: border-box;
}

/* 見出し兼トグル。button の見た目を全部落としてから組み直す */
.ibai-t {
	display: flex;
	align-items: center;
	width: 100%;
	margin: 0 0 6px;
	padding: 0;
	border: 0;
	background: none;
	font-family: inherit;
	font-size: 0.8125rem; /* 13px */
	font-weight: 700;
	letter-spacing: 0.03em;
	color: #091142;
	text-align: left;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

/* 見出しの前の小さな菱形。アイコンフォントも画像も使わずに「AI枠」だと分かる印を出す */
.ibai-t::before {
	content: "";
	display: block;
	flex: 0 0 auto;
	width: 6px;
	height: 6px;
	margin-right: 6px;
	background: #0057ac;
	transform: rotate(45deg);
}

/* 開閉のしるし。既定（開）は ∧、畳むと ∨ */
.ibai-t::after {
	content: "";
	display: block;
	flex: 0 0 auto;
	width: 6px;
	height: 6px;
	margin: 3px 1px 0 auto;
	border-right: 1.5px solid #7a869a;
	border-bottom: 1.5px solid #7a869a;
	transform: rotate(-135deg);
	transition: transform 0.15s ease;
}

.ibai-cl .ibai-t::after {
	margin-top: 0;
	transform: rotate(45deg);
}

.ibai-cl .ibai-p {
	display: none;
}

.ibai-btn {
	display: flex;
	align-items: center;
	width: 100%;
	margin: 0 0 4px;
	padding: 7px 8px;
	border-radius: 5px;
	font-size: 0.75rem; /* 12px */
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

/* 自社導線（β版 IRBANK の LP へ）。ここだけ塗りで、外部 AI より一段強くする */
.ibai-cta {
	/*
		中に <span class="ibai-ofc">公式</span> を挟むので block + text-align:center。
		flex のままだと "IRBANK " / span / "AIに無料相談" が別々の flex item に割れて
		文字間が不揃いになる。
	*/
	display: block;
	text-align: center;
	margin-bottom: 7px;
	padding: 9px 6px;
	background: #0057ac;
	color: #fff;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.ibai-cta::after {
	content: "→";
	margin-left: 5px;
	font-weight: 400;
}

.ibai-cta:hover,
.ibai-cta:focus {
	background: #00478d;
	color: #fff;
}

/* 「公式」の2文字。既定（PC のサイドバー・本文カード）では出さず、SP のバーでだけ出す */
.ibai-ofc {
	display: none;
}

.ibai-sp .ibai-ofc {
	display: inline;
}

.ibai-s {
	margin: 0 0 7px;
	font-size: 0.625rem; /* 10px */
	font-weight: 500;
	line-height: 1.45;
	color: #475467;
	white-space: normal;
}

.ibai-ai {
	background: #fff;
	border: 1px solid #d7dee8;
	color: #344054;
}

.ibai-ai:hover,
.ibai-ai:focus {
	border-color: #0057ac;
	background: #f5f9ff;
	color: #091142;
}

/* 各 AI の識別色。ロゴの代わり */
.ibai-d {
	flex: 0 0 auto;
	width: 7px;
	height: 7px;
	margin-right: 7px;
	border-radius: 50%;
}

.ibai-d-gpt { background: #10a37f; }
.ibai-d-gem { background: #4285f4; }
.ibai-d-cla { background: #d97757; }
.ibai-d-ppx { background: #20808d; }

/*
	MCP（IRBANK Connect）への導線。自社 CTA の直下に置く二次ボタン。
	塗りにしないのは主役が上の CTA だから。枠線だけにして主従を保つ。
*/
.ibai-cn {
	justify-content: center;
	margin-bottom: 6px;
	padding: 8px 6px;
	border: 1px solid #0057ac;
	background: #fff;
	color: #0057ac;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.ibai-cn::after {
	content: "→";
	margin-left: 5px;
	font-weight: 400;
}

.ibai-cn:hover,
.ibai-cn:focus {
	background: #f0f6ff;
	color: #00478d;
	border-color: #00478d;
}

/* 補足は SP でだけ出す。PC のサイドバーは 170px 幅で、1行増やすと収まりが悪くなる */
.ibai-cn-d {
	display: none;
}

.ibai-sp .ibai-cn-d {
	display: block;
	/* 下は「普段使っているAIに聞く」。同じ色・近いサイズなので、離さないと
	   どちらのボタンに掛かる文か分からなくなる */
	margin: -2px 0 18px;
	font-size: 0.75rem; /* 12px */
	font-weight: 400;
	line-height: 1.45;
	color: #667085;
}

/* ===== ① PC（768px 以上）: 左サイドバー #chb の中に固定 ===== */
/*
	既存CSS（ib.min.v4.15.css）が #chb 配下の div に
	  position:absolute / bottom:150px
	を当てているので、両方とも明示して上書きする。詳細度は
	  既存 #chb div      = (1,0,1)
	  ここ #chb .ibai    = (1,1,1)  ← こちらが勝つ

	出すのは「サイドバーに dl があるページ」だけ。トップページ（/）の #chb は
	<div id="chb"><div></div></div> で中身が空で、本文が左端まで広がる（実測）。
	そこへ fixed で置くと本文に重なるので、dl の後続兄弟にだけスタイルを当てる。

	既定は「画面左下に固定」。JS が読み込まれると dl の下端に合わせて top を
	計算し直す。JS 無効でもこの既定値だけで成立する。
*/
@media only screen and (min-width: 768px) {
	#chb .ibai {
		display: none;
	}

	#chb dl ~ .ibai {
		display: block;
		position: fixed;
		left: 1%;
		right: auto;
		top: auto;
		bottom: 20px;
		width: 170px;
		padding-top: 10px;
		/* サイドバー上段（時価・PER・配当…）との境目。線が無いと dl の続きに見える */
		border-top: 1px solid #e0e5eb;
		z-index: 3;
	}

	/*
		フッターに入ったらサイドバーを消す。

		#chb h1 / #chb dl / .ibai はどれも position:fixed なので、ページ最下部まで
		スクロールしてもビューポート上に残り、フッター（#footer・高さ1173px）の上に
		浮いたままになる（実測）。本文が終わったら引っ込むのが自然なので、
		フッターが見え始めたら JS が #chb に .ib-foot を付けて隠す。

		visibility:hidden にするのは、display:none だと fixed 要素の再表示時に
		レイアウトを計算し直す必要があるため。位置はそのままで見た目だけ消す。
	*/
	#chb.ib-foot > h1,
	#chb.ib-foot > .chb-title,
	#chb.ib-foot > dl,
	#chb.ib-foot .ibai {
		visibility: hidden;
	}

	/*
		既存の #chb div{position:absolute; bottom:150px} は中のパネルにも効く。
		そのままだと .ibai-p が親から浮いて高さに含まれず、画面のあらぬ場所に出る
		（実測: .ibai の高さが見出しぶんの 37px しか無く、中身が消えて見えた）。
	*/
	#chb .ibai .ibai-p,
	#chb .ibai .ibai-g {
		position: static;
		bottom: auto;
	}

	/*
		AI 4本は 2列に組む。1列だとブロックが 270px を超え、サイドバーに収めるのに
		ビューポート高 793px 以上が必要になり、MacBook Air 13"（約780px）で
		本文末尾へ落ちてしまう（実測で「一瞬出て消える」状態になった）。
		2列なら約 720px で収まる。1枠 83px しかないのでラベルの「に聞く」は落とす
		（真上に「普段使っているAIに聞く」があるので意味は通る）。
	*/
	#chb dl ~ .ibai .ibai-g {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 4px;
	}

	#chb dl ~ .ibai .ibai-g .ibai-btn {
		margin-bottom: 0;
		padding: 6px 5px;
		font-size: 0.6875rem; /* 11px */
	}

	#chb dl ~ .ibai .ibai-g .ibai-d {
		width: 6px;
		height: 6px;
		margin-right: 5px;
	}

	#chb dl ~ .ibai .ibai-k {
		display: none;
	}

	/* 余白も少しずつ削る（合計で約 20px 稼ぐ） */
	#chb dl ~ .ibai .ibai-cta {
		padding: 8px 6px;
		margin-bottom: 5px;
	}

	#chb dl ~ .ibai .ibai-cn {
		padding: 7px 6px;
		margin-bottom: 5px;
	}

	#chb dl ~ .ibai .ibai-s {
		margin-bottom: 5px;
	}
}

/* ===== ② PC で縦が足りないとき: 本文末尾のカード ===== */
/*
	企業ページはサイドバーの dl が下端 499px まであり、その下にブロック（約 244px）を
	置くにはビューポート高 767px 以上が要る。足りない画面では fixed のままはみ出して
	スクロールしても永久に見えないので、本文フローへ逃がす。
*/
.ibai-body {
	position: static;
	width: auto;
	max-width: 560px;
	margin: 1.5rem 3% 2rem;
	padding: 14px 14px 11px;
	border: 1px solid #e0e5eb;
	border-radius: 8px;
	background: #fff;
}

.ibai-body .ibai-t {
	margin-bottom: 8px;
	font-size: 0.9375rem; /* 15px */
}

.ibai-body .ibai-t::before {
	width: 7px;
	height: 7px;
}

.ibai-body .ibai-btn {
	margin-bottom: 6px;
	padding: 11px 12px;
	font-size: 0.8125rem; /* 13px */
}

.ibai-body .ibai-cta {
	margin-bottom: 9px;
	padding: 13px 10px;
	font-size: 0.875rem; /* 14px */
}

.ibai-body .ibai-s {
	margin-bottom: 9px;
	font-size: 0.75rem; /* 12px */
}

.ibai-body .ibai-d {
	width: 8px;
	height: 8px;
}

/* ===== ③ SP（767px 以下）: 企業名の直下に、畳んだ状態で ===== */
/*
	置き場所は #chb の「中」ではなく「直後の兄弟」。

	🔴 #chb の中に置くと、ブロックに触れただけで #chb:hover が発動し、
	   既存CSS の
	     @media(max-width:768px){ #chb:hover dl{display:block;position:fixed;…} }
	   でサイドバーの数値パネル（時価・PER・配当…）がブロックの上に覆いかぶさる。
	   これは「≡」をタップしてメニューを開くための仕掛けで、hover は祖先に効くため
	   子要素からは打ち消せない。外に出すのが唯一の解。

	#chb はこの幅では position:static・中の dl は非表示なので、
	その直後 ≒ 見出し（7203 トヨタ自動車）の直下＝目次の手前になる。
	main 直下に出るので、#chb 配下に効いている既存の子孫セレクタ
	（#chb div{display:none} / {position:absolute}）からも外れる。

	初期状態は JS が畳む（ibai-cl）。JS が動かない環境では #chb の中に残り、
	既存CSS の #chb div{display:none} で非表示になる（＝出ない。安全側）。
*/
@media only screen and (max-width: 767px) {
	/* 移動前の一瞬を隠す（既存CSS でも消えているが明示しておく） */
	#chb .ibai {
		display: none;
	}

	/*
		【ASK AI とは独立した既存レイアウトの微調整（2026-08-27 オーナー指示）】
		SP の目次（.ccc > .wmx250）は企業名の見出し #chb h1 の真下に 0px で密着していて
		（実測 h1 が y76-107、目次が y107 開始）、右上に固定されている
		#fxbtn（♥／＋追加・y136-210）とも重なっている。少し下げて余白を作る。
		撤去するときはこのブロックも消すこと（ASK AI 本体とは無関係の指定なので）。
	*/
	.ccc > .wmx250 {
		margin-top: 20px;
	}

	.ibai-sp {
		display: block;
		position: static;
		width: auto;
		margin: 10px 2.5% 14px;
		padding: 0;
		border: 1px solid #dbe2ea;
		border-radius: 8px;
		background: #fff;
		overflow: hidden;
	}

	/*
		目次（.ccc > .wmx250）の下に入るときは、親の .ccc が既に width:90% で
		中央寄せされているので左右マージンは要らない。

		上下の間隔は「目次からは離す・次の見出しには寄せる」。実測（SP・決算まとめ）:
		  目次の下 → バー   14px（目次内 dl.sdl の margin-bottom 13.6px と相殺）
		  バー → 会社業績  44px（次の section 直下の h1 が margin-top 43.2px を持ち、
		                        section が margin:0 なのでそれが抜け出して相殺している）
		バーの margin-bottom をいくら減らしても 43.2px 側が勝つので、
		直後の見出しの margin-top を直接詰める。.ibai-sp の隣に限定しているので
		他の見出しには影響しない。
	*/
	.ccc .ibai-sp {
		margin-top: 26px;
		margin-bottom: 0;
		margin-left: 0;
		margin-right: 0;
	}

	.ccc .ibai-sp + section > h1,
	.ccc .ibai-sp + section > h2 {
		margin-top: 22px;
	}

	.ibai-sp .ibai-t {
		margin: 0;
		padding: 13px 14px;
		font-size: 0.9375rem; /* 15px */
	}

	.ibai-sp .ibai-t::before {
		width: 8px;
		height: 8px;
		margin-right: 8px;
	}

	.ibai-sp .ibai-t::after {
		width: 8px;
		height: 8px;
		border-width: 2px;
	}

	/* 畳んでいるときは枠だけの1行。開いたときだけ中身に余白を持たせる */
	.ibai-sp .ibai-p {
		padding: 12px 14px 12px;
		border-top: 1px solid #eef1f5;
	}

	.ibai-sp .ibai-btn {
		margin-bottom: 7px;
		padding: 12px 13px;
		font-size: 0.875rem; /* 14px */
	}

	.ibai-sp .ibai-cta {
		margin-bottom: 10px;
		padding: 14px 10px;
		font-size: 0.9375rem; /* 15px */
	}

	.ibai-sp .ibai-s {
		margin-bottom: 10px;
		font-size: 0.8125rem; /* 13px */
	}

	.ibai-sp .ibai-d {
		width: 9px;
		height: 9px;
		margin-right: 9px;
	}

	.ibai-sp .ibai-cn {
		margin-bottom: 8px;
		padding: 12px 10px;
		font-size: 0.875rem; /* 14px */
	}
}