@charset "utf-8";

/*
	V1 固定バナーの HTML テキスト側（本番配置名: /assets/n/notice.css）。
	画像（WebP）は背景に敷くだけで、見出し・CTA はすべてここで出す。

	- 画像は max-age=7776000（90日）で CloudFront に載る＝差し替え不可。
	  文言は max-age=3600 の HTML 側にあるので 1時間で反映できる。
	- クラス名・ファイル名に banner / ad / promo / popup を使わない
	  （EasyList にパス名ベースの汎用ルールが実在するため）。接頭辞は ibn（IRBANK notice）。

	■ 寸法はすべて cqw（コンテナ幅の %）で書く
	irbank.net の本文カラム（.cc）は固定幅ではなく可変。実測値:
	  viewport  375 →  336px
	  viewport  768 →  536px
	  viewport 1280 →  978px
	  viewport 1440 → 1100px
	  viewport 1920 → 1467px
	px で組むと 1440 以外の環境で必ず崩れるため、`.ibn` 自身を
	コンテナ（container-type: inline-size）にして、中身を cqw で指定している。
	1cqw = バナー幅の 1%。設計原寸は PC 1100px / SP 336px なので、
	    cqw値 = 設計px ÷ 設計幅 × 100
	画像の縦横比と aspect-ratio を一致させてあるので、拡大縮小しても歪まない。
*/

.ibn {
	container-type: inline-size;
	position: relative;
	display: block;
	overflow: hidden;
	text-decoration: none;
	background-repeat: no-repeat;
	background-position: 0 0;
	background-size: 100% 100%;
	border: 1px solid #dbe4f0;
	border-radius: 10px;
	font-family: "Hiragino Sans", "Noto Sans JP", "Yu Gothic", sans-serif;
	-webkit-font-smoothing: antialiased;

	/*
		既定は SP レイアウト（336×240 設計）。
		max-width は 336 ではなく 460 にする。スマホの本文カラムは端末で幅が違い
		（vp375→336 / vp390→349 / vp414→371 / vp430→386）、336 で頭打ちにすると
		375 以外の端末で中央寄せの余白が出て、見出し・本文と左右がズレる。
		460 なら主要なスマホ幅は width:100% で埋まり、カラム端に揃う。
		タブレット（カラム 460 超）でのみ中央寄せのカードとして出る。
	*/
	width: 100%;
	max-width: 460px;
	margin: 0 auto;
	aspect-ratio: 336 / 240;
}

.ibn:hover {
	border-color: #b9cde8;
	box-shadow: 0 3px 14px rgba(10, 37, 80, 0.13);
}

/*
	見出しと CTA はどちらも絶対配置。
	見出しは上端から、CTA は下端から積む。文言が1行増えても互いの位置が動かない。
*/
.ibn-t {
	position: absolute;
	display: flex;
	flex-direction: column;
}

.ibn-h {
	position: absolute;
	display: block;
	color: #1a2536;
	font-weight: 700;
	letter-spacing: 0.01em;
	word-break: normal;
	overflow-wrap: anywhere;
	line-break: strict;
}

.ibn-h b {
	color: #0057ac;
	font-weight: 700;
	background: linear-gradient(
		transparent 62%,
		#ffe24a 62%,
		#ffe24a 92%,
		transparent 92%
	);
	padding: 0 1px;
}

/*
	CTA ブロックは縦3段。
	  1) ＼8月24日まで完全無料／  … 主訴求
	  2) ボタン（横長）
	  3) 登録すると永久30%OFF…    … 従。1行に収める
	.ibn-r が 1)+2) のまとまり。
*/
.ibn-r {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
}

/* ＼ ／ は文字ではなく擬似要素の斜線で描く（字形がフォントに依存しないように） */
.ibn-f {
	display: inline-flex;
	align-items: center;
	color: #b42318;
	font-weight: 800;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

.ibn-f::before,
.ibn-f::after {
	content: "";
	display: block;
	background: #b42318;
	border-radius: 1px;
	flex: none;
}

.ibn-f::before {
	transform: rotate(-18deg);
}

.ibn-f::after {
	transform: rotate(18deg);
}

.ibn-b {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	background: #0057ac;
	color: #fff;
	font-weight: 700;
	white-space: nowrap;
	flex: none;
}

.ibn-b::after {
	content: "→";
	font-weight: 400;
}

/* 補足は1行固定。文言を伸ばすと横にはみ出すので font-size とセットで見直すこと */
.ibn-d {
	display: block;
	color: #475467;
	font-weight: 500;
	white-space: nowrap;
}

/* ===== SP レイアウト（336×240 設計・既定） ===== */

.ibn-h {
	left: 4.1667cqw; /* 14px */
	top: 3.5714cqw; /* 12px */
	width: 91.6667cqw; /* 308px */
	font-size: 4.1667cqw; /* 14px */
	line-height: 1.48;
}

.ibn-t {
	left: 4.1667cqw; /* 14px */
	bottom: 3.5714cqw; /* 12px */
	width: 91.6667cqw; /* 308px */
	align-items: center;
	gap: 2.0833cqw; /* 7px */
}

.ibn-r {
	gap: 1.4881cqw; /* 5px */
}

.ibn-f {
	font-size: 3.7202cqw; /* 12.5px */
	gap: 2.381cqw; /* 8px */
}

.ibn-f::before,
.ibn-f::after {
	width: 0.5952cqw; /* 2px */
	height: 3.869cqw; /* 13px */
}

.ibn-b {
	font-size: 4.1667cqw; /* 14px */
	padding: 2.6786cqw 4.7619cqw; /* 9px 16px */
	border-radius: 2.0833cqw; /* 7px */
}

.ibn-b::after {
	margin-left: 2.0833cqw; /* 7px */
}

.ibn-d {
	font-size: 2.8274cqw; /* 9.5px */
	line-height: 1.4;
}

/* ===== PC レイアウト（1100×200 設計） ===== */
/*
	切り替えは viewport 960px。実測でカラム幅と見出しサイズを見て決めた値:
	  vp 820 → カラム583 → 見出し11.7px（小さすぎ）
	  vp 900 → カラム655 → 見出し13.1px（まだ小さい）
	  vp 960 → カラム709 → 見出し14.2px ← ここから読める
	  vp1024 → カラム767 → 見出し15.3px
	960 未満は SP レイアウト（460px 上限の中央寄せカード）にする。
*/
@media only screen and (min-width: 960px) {
	.ibn {
		max-width: none;
		aspect-ratio: 1100 / 200;
	}

	.ibn-h {
		left: 4.7273cqw; /* 52px */
		top: 1.6364cqw; /* 18px */
		width: 46.9091cqw; /* 516px */
		font-size: 2cqw; /* 22px */
		line-height: 1.45;
	}

	.ibn-t {
		left: 4.7273cqw; /* 52px */
		bottom: 1.8182cqw; /* 20px */
		width: 46.9091cqw; /* 516px */
		gap: 0.8182cqw; /* 9px */
	}

	.ibn-r {
		gap: 0.5455cqw; /* 6px */
	}

	.ibn-f {
		font-size: 1.2727cqw; /* 14px */
		gap: 0.8182cqw; /* 9px */
	}

	.ibn-f::before,
	.ibn-f::after {
		width: 0.1818cqw; /* 2px */
		height: 1.3636cqw; /* 15px */
	}

	.ibn-b {
		font-size: 1.3636cqw; /* 15px */
		padding: 0.9091cqw 1.6364cqw; /* 10px 18px */
		border-radius: 0.6364cqw; /* 7px */
	}

	.ibn-b::after {
		margin-left: 0.6364cqw; /* 7px */
	}

	.ibn-d {
		font-size: 0.9545cqw; /* 10.5px */
		line-height: 1.5;
	}
}

/* ===== 画像の割り当て（日付サフィックス必須） ===== */

.ibn-c1 {
	background-image: url(/assets/n/i/c1_screening_sp_0802.webp);
}
.ibn-c2 {
	background-image: url(/assets/n/i/c2_dividend_sp_0802.webp);
}
.ibn-c3 {
	background-image: url(/assets/n/i/c3_short_sp_0802.webp);
}
.ibn-c4 {
	background-image: url(/assets/n/i/c4_activist_sp_0802.webp);
}
.ibn-c5 {
	background-image: url(/assets/n/i/c5_officer_sp_0802.webp);
}
.ibn-c6 {
	background-image: url(/assets/n/i/c6_results_sp_0804.webp);
}
/* C7（トップ枠）。2026-08-06 に無料訴求→決算訴求へ差し替え、c6 と同じ
   四半期業績のビジュアルを共有する。無料訴求に戻すなら c1_screening_* に戻す */
.ibn-c7 {
	background-image: url(/assets/n/i/c6_results_sp_0804.webp);
}

@media only screen and (min-width: 960px) {
	.ibn-c1 {
		background-image: url(/assets/n/i/c1_screening_pc_0802.webp);
	}
	.ibn-c2 {
		background-image: url(/assets/n/i/c2_dividend_pc_0802.webp);
	}
	.ibn-c3 {
		background-image: url(/assets/n/i/c3_short_pc_0802.webp);
	}
	.ibn-c4 {
		background-image: url(/assets/n/i/c4_activist_pc_0802.webp);
	}
	.ibn-c5 {
		background-image: url(/assets/n/i/c5_officer_pc_0802.webp);
	}
	.ibn-c6 {
		background-image: url(/assets/n/i/c6_results_pc_0804.webp);
	}
	.ibn-c7 {
		background-image: url(/assets/n/i/c6_results_pc_0804.webp);
	}
}

/* 本文冒頭（記事見出しの直後）に置くときの上下余白 */
.ibn-sec {
	margin: 1.3em 0 1.7em;
}

/* ==================================================================
   運用スイッチ（このファイルは冒頭のPHPが Cache-Control: max-age=300 を返す。
   nginx の設定は不要＝FTPだけで運用できる）

   ここを書き換えて FTP で上げ直すと、HTML のキャッシュに関係なく
   5分で全ページに反映される。デプロイもGTMも要らない。

   ■ 全停止（緊急時）
       .ibn { display: none !important; }

   ■ クリエイティブ単位で止める
       .ibn-c5 { display: none !important; }

   ■ 画像の差し替え
       上の「画像の割り当て」で url() を新しいファイル名に変える。
       画像そのものは max-age=7776000（90日）なので、
       同名で上書きしても差し替わらない。必ず新しい名前でアップする
       （日付サフィックスを _0802 → _0810 のように上げる）。
   ================================================================== */