:root {
	--inosell-diagnosis-navy: #072c70;
	--inosell-diagnosis-blue: #4770f5;
	--inosell-diagnosis-turquoise: #16c2c2;
	--inosell-diagnosis-ivory: #fffdf8;
}

.inosell-diagnosis-banner-slot,
.inosell-diagnosis-banner-slot *,
.inosell-diagnosis-banner-slot *::before,
.inosell-diagnosis-banner-slot *::after {
	box-sizing: border-box;
}

.inosell-diagnosis-banner-slot {
	width: 100%;
	max-width: 100%;
	min-width: 0;
}

.inosell-diagnosis-banner-slot--desktop {
	/*
	 * 0.1.5〜0.1.9では position: sticky による追従表示（単独固定→重なり回避
	 * のためのstatic化→既存バナー直下への動的2段化、と変遷）を試みたが、
	 * 0.1.9の動的top切り替えが本番のサイドバー内の他要素と干渉し、本バナーが
	 * 背面に隠れる重大な表示崩れを引き起こした。0.1.10ではposition: sticky・
	 * top・transitionをすべて廃止し、他の positioned 要素との重なり順の
	 * トラブルが原理的に起こり得ない、最も安全な static（通常のブロック要素・
	 * サイドバー内の自然な流れ）配置に固定する。z-indexはposition: staticの
	 * 要素には効かない（CSS仕様上そもそも無効）ため設定しない。
	 */
	position: static;
	margin: 0 0 22px;
	/* SANGOのサイドバー幅は768px直後で約217px、1024pxで約291px、1280px以上で
	   約354pxまで変わる。実際の設置幅を基準に内部レイアウトを縮小するため、
	   ビューポート幅ではなくこのスロット自体の幅でコンテナクエリを組む。 */
	container: inosell-diagnosis-sidebar / inline-size;
}

.inosell-diagnosis-banner-slot--mobile {
	display: none;
	container: inosell-diagnosis-inline / inline-size;
	margin: 18px 0 20px;
}

.inosell-diagnosis-banner {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 98px;
	align-items: stretch;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	min-height: 142px;
	overflow: hidden;
	color: var(--inosell-diagnosis-navy);
	background: linear-gradient(135deg, var(--inosell-diagnosis-ivory) 0%, #ffffff 100%);
	border: 2px solid var(--inosell-diagnosis-blue);
	border-radius: 11px;
	box-shadow: 0 5px 16px rgba(14, 46, 105, 0.12);
	text-decoration: none !important;
	cursor: pointer;
	touch-action: manipulation;
	transition:
		transform 0.2s ease,
		box-shadow 0.2s ease;
}

.inosell-diagnosis-banner:visited,
.inosell-diagnosis-banner:hover,
.inosell-diagnosis-banner:active {
	color: var(--inosell-diagnosis-navy);
	text-decoration: none !important;
}

.inosell-diagnosis-banner__copy {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	min-width: 0;
	padding: 14px 0 13px 18px;
}

.inosell-diagnosis-banner__main {
	display: block;
	margin: 0 0 6px;
	font-family:
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		"Hiragino Kaku Gothic ProN",
		"Hiragino Sans",
		"Yu Gothic",
		Meiryo,
		sans-serif;
	font-size: 17px;
	font-weight: 800;
	line-height: 1.5;
	letter-spacing: 0.01em;
}

.inosell-diagnosis-banner__main > span {
	display: block;
	/* nowrapで強制せず、幅が足りない場合だけ自然に折り返す（はみ出し防止の保険） */
	white-space: normal;
	word-break: keep-all;
	overflow-wrap: break-word;
}

.inosell-diagnosis-banner__sub {
	display: block;
	margin: 0 0 9px;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: -0.02em;
	white-space: normal;
	word-break: keep-all;
	overflow-wrap: break-word;
}

.inosell-diagnosis-banner__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 146px;
	min-height: 32px;
	padding: 6px 15px;
	color: #ffffff;
	background: linear-gradient(
		110deg,
		#5366f5 0%,
		#397ff2 46%,
		var(--inosell-diagnosis-turquoise) 100%
	);
	border-radius: 999px;
	box-shadow: 0 5px 12px rgba(34, 103, 211, 0.2);
	font-size: 14px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: 0.02em;
	white-space: nowrap;
	transition: filter 0.2s ease;
}

.inosell-diagnosis-banner__visual {
	position: relative;
	z-index: 1;
	display: block;
	min-width: 0;
	overflow: hidden;
}

.inosell-diagnosis-banner__penguin {
	position: absolute;
	right: 4px;
	bottom: -1px;
	display: block;
	width: 88px;
	max-width: none !important;
	height: auto;
	margin: 0;
}

.inosell-diagnosis-banner--mobile {
	grid-template-columns: minmax(0, 1fr) 58px;
	min-height: 70px;
	border-width: 1.5px;
	border-radius: 9px;
}

.inosell-diagnosis-banner--mobile .inosell-diagnosis-banner__copy {
	display: grid;
	grid-template:
		"main main" auto
		"sub button" auto
		/ minmax(0, 1fr) 108px;
	column-gap: 6px;
	row-gap: 2px;
	align-content: center;
	align-items: center;
	min-height: 67px;
	padding: 7px 0 6px 12px;
}

.inosell-diagnosis-banner--mobile .inosell-diagnosis-banner__main {
	grid-area: main;
	margin: 0;
	font-size: 13px;
	line-height: 1.25;
	letter-spacing: 0;
}

.inosell-diagnosis-banner--mobile .inosell-diagnosis-banner__sub {
	grid-area: sub;
	margin: 0;
	font-size: 8.75px;
	line-height: 1.2;
}

.inosell-diagnosis-banner--mobile .inosell-diagnosis-banner__button {
	grid-area: button;
	min-width: 108px;
	min-height: 28px;
	padding: 5px 7px;
	font-size: 12.5px;
}

.inosell-diagnosis-banner--mobile .inosell-diagnosis-banner__visual {
	position: relative;
	inset: auto;
	width: auto;
}

.inosell-diagnosis-banner--mobile .inosell-diagnosis-banner__penguin {
	right: 2px;
	bottom: -18px;
	width: 58px;
}

@media (hover: hover) and (pointer: fine) {
	.inosell-diagnosis-banner:hover {
		transform: translateY(-3px);
		box-shadow: 0 10px 24px rgba(14, 46, 105, 0.19);
	}

	.inosell-diagnosis-banner:hover .inosell-diagnosis-banner__button {
		filter: brightness(1.07);
	}
}

.inosell-diagnosis-banner:focus-visible {
	outline: 3px solid #145fda;
	outline-offset: 4px;
	box-shadow: 0 0 0 6px rgba(20, 95, 218, 0.2);
}

/*
 * SANGOテーマは768px未満でサイドバーを記事の下へ積み替える（サイドバーが
 * 実質消える）。以前は1100pxで切り替えていたため、768〜1100pxの間で
 * 「本来はサイドバーがあるのに記事内の縦積み版が出る」ズレが発生していた。
 * SANGO側の実際の切り替え幅（768px）に合わせる。768px以上はサイドバー版を
 * 使い、幅が狭い場合は下の`inosell-diagnosis-sidebar`コンテナクエリで内部を縮小する。
 */
@media (max-width: 767px) {
	.inosell-diagnosis-banner-slot--desktop {
		display: none;
	}

	.inosell-diagnosis-banner-slot--mobile {
		display: block;
		position: static;
		width: 100%;
		max-width: 100%;
	}

	.inosell-diagnosis-banner--mobile:active {
		transform: scale(0.985);
		box-shadow: 0 3px 10px rgba(14, 46, 105, 0.14);
		transition-duration: 0.1s;
	}
}

/*
 * サイドバー版が実際に設置される幅（768〜1100px付近で約217〜330px）は、
 * 通常のデスクトップ版（画像98px+ボタン最小146px）には狭すぎることがある。
 * スロット自体の実測幅で縮小し、はみ出しを防ぐ。
 */
@container inosell-diagnosis-sidebar (max-width: 300px) {
	.inosell-diagnosis-banner-slot--desktop .inosell-diagnosis-banner {
		grid-template-columns: minmax(0, 1fr) 70px;
		min-height: 118px;
	}

	.inosell-diagnosis-banner-slot--desktop .inosell-diagnosis-banner__copy {
		padding: 12px 0 11px 14px;
	}

	.inosell-diagnosis-banner-slot--desktop .inosell-diagnosis-banner__main {
		font-size: 14px;
		line-height: 1.4;
	}

	.inosell-diagnosis-banner-slot--desktop .inosell-diagnosis-banner__sub {
		font-size: 10px;
	}

	.inosell-diagnosis-banner-slot--desktop .inosell-diagnosis-banner__button {
		min-width: 104px;
		min-height: 28px;
		padding: 5px 10px;
		font-size: 12px;
	}

	.inosell-diagnosis-banner-slot--desktop .inosell-diagnosis-banner__penguin {
		width: 62px;
		right: 2px;
	}
}

/*
 * バナー自体に十分な横幅がある場合だけ、コピーとボタンを隣接させます。
 * ブラウザ幅ではなく実際の設置幅を基準にするため、中間幅でも崩れません。
 */
@container inosell-diagnosis-inline (min-width: 520px) {
	.inosell-diagnosis-banner--mobile .inosell-diagnosis-banner__copy {
		grid-template:
			"main button" auto
			"sub button" auto
			/ max-content 104px;
		justify-content: start;
		column-gap: 10px;
	}

	.inosell-diagnosis-banner--mobile .inosell-diagnosis-banner__main {
		font-size: 12.5px;
	}

	.inosell-diagnosis-banner--mobile .inosell-diagnosis-banner__main > span {
		display: inline;
	}

	.inosell-diagnosis-banner--mobile .inosell-diagnosis-banner__button {
		min-width: 104px;
		padding-inline: 6px;
		font-size: 12px;
	}
}

@media (max-width: 359px) {
	.inosell-diagnosis-banner--mobile {
		grid-template-columns: minmax(0, 1fr) 48px;
		min-height: 74px;
	}

	.inosell-diagnosis-banner--mobile .inosell-diagnosis-banner__copy {
		grid-template:
			"main main" auto
			"sub button" auto
			/ minmax(0, 1fr) 90px;
		column-gap: 5px;
		min-height: 71px;
		padding-left: 10px;
	}

	.inosell-diagnosis-banner--mobile .inosell-diagnosis-banner__main {
		font-size: 12.5px;
	}

	.inosell-diagnosis-banner--mobile .inosell-diagnosis-banner__sub {
		font-size: 7.5px;
	}

	.inosell-diagnosis-banner--mobile .inosell-diagnosis-banner__button {
		min-width: 90px;
		min-height: 27px;
		padding-inline: 4px;
		font-size: 11.5px;
	}

	.inosell-diagnosis-banner--mobile .inosell-diagnosis-banner__penguin {
		right: 1px;
		bottom: -14px;
		width: 49px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.inosell-diagnosis-banner,
	.inosell-diagnosis-banner__button {
		transition-duration: 0.01ms !important;
	}
}

/*
 * トップページ専用：既存の1段目の帯（.header-info、「【簡単30秒】転職支援
 * サービスに登録する」）の下に並ぶ、2段目のスリムな帯。
 * カード型（--desktop/--mobile）とは別系統の、独立した最小限のコンポーネント。
 * 本番の1段目帯（.header-info a）を実測したところ、エッジツーエッジの
 * グラデーション背景・中央揃えテキスト・10px paddingだったため、同じ配置方式
 * （フルブリード・中央揃え）に合わせている。ただし1段目と完全に密着すると
 * 別々のバナーだと分かりにくいため、margin-topで視覚的な区切りを設けている。
 *
 * 横幅・縦幅とも、banner.jsが1段目（.header-info）の実測サイズを
 * インラインstyleのwidth/heightとして反映し、常にピクセル単位で一致させる
 * （このCSSのwidth/height:100%はJS実行前・JS無効時の初期値）。box-sizing:
 * border-boxのため、JSが設定するheightにはpadding分も含まれる。
 */
.inosell-diagnosis-announcement-bar {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: nowrap;
	gap: 10px;
	width: 100%;
	max-width: 100%;
	height: 52px;
	box-sizing: border-box;
	margin-top: 10px;
	padding: 6px 20px;
	background: linear-gradient(95deg, var(--inosell-diagnosis-blue) 0%, var(--inosell-diagnosis-turquoise) 100%);
	color: #ffffff;
	text-decoration: none !important;
	cursor: pointer;
	touch-action: manipulation;
	transition: filter 0.2s ease;
}

.inosell-diagnosis-announcement-bar:visited,
.inosell-diagnosis-announcement-bar:hover,
.inosell-diagnosis-announcement-bar:active {
	color: #ffffff;
	text-decoration: none !important;
}

.inosell-diagnosis-announcement-bar__text {
	font-family:
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		"Hiragino Kaku Gothic ProN",
		"Hiragino Sans",
		"Yu Gothic",
		Meiryo,
		sans-serif;
	font-size: 15px;
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: 0.01em;
	text-align: center;
	white-space: nowrap;
}

/*
 * PC（768px以上）は1行表示のまま（__line1・__line2ともinlineで連結）。
 * スマホ（767px以下）は自然な折り返し任せにせず、__line2をdisplay:blockに
 * することで「活かしきれていますか？」の直後で必ず改行させる。
 */
.inosell-diagnosis-announcement-bar__line1,
.inosell-diagnosis-announcement-bar__line2 {
	display: inline;
}

/*
 * ペンギンは幅ではなく高さを帯に合わせる（height:100%、widthはauto）。
 * 帯の高さは1段目の実測値に追従するため、ペンギンも常にその内側（padding分を
 * 除いた高さ）に収まり、帯がペンギンによって縦に押し広げられることはない。
 */
.inosell-diagnosis-announcement-bar__penguin {
	display: block;
	width: auto;
	height: 100%;
	max-width: 40px;
	flex-shrink: 0;
}

@media (hover: hover) and (pointer: fine) {
	.inosell-diagnosis-announcement-bar:hover {
		filter: brightness(1.08);
	}
}

.inosell-diagnosis-announcement-bar:focus-visible {
	outline: 3px solid #ffffff;
	outline-offset: -5px;
	box-shadow: 0 0 0 5px rgba(7, 44, 112, 0.35) inset;
}

@media (max-width: 767px) {
	.inosell-diagnosis-announcement-bar {
		padding: 4px 16px;
		gap: 8px;
	}

	.inosell-diagnosis-announcement-bar__text {
		white-space: normal;
		flex: 1 1 auto;
		min-width: 0;
		font-size: 13px;
		line-height: 1.25;
	}

	/* 「活かしきれていますか？」の直後で必ず改行し、2行目を独立させる。 */
	.inosell-diagnosis-announcement-bar__line2 {
		display: block;
	}

	.inosell-diagnosis-announcement-bar__penguin {
		max-width: 30px;
	}

	.inosell-diagnosis-announcement-bar:active {
		filter: brightness(0.95);
		transition-duration: 0.1s;
	}
}

@media (max-width: 359px) {
	.inosell-diagnosis-announcement-bar__text {
		font-size: 11px;
	}

	.inosell-diagnosis-announcement-bar__penguin {
		max-width: 26px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.inosell-diagnosis-announcement-bar {
		transition-duration: 0.01ms !important;
	}
}