/* 服じまい CTA・追従バナー
   サイトの配色（--rd--c--*）は上書きしない。CTA専用色だけを足す。 */

:root{
	--fj-cta: 201 74 24;
	--fj-cta-dark: 166 59 18;
	--fj-sec: var(--rd--c--secondary, 38 118 95);
	--fj-line: 214 222 217;
}

/* ---------- ボタン ---------- */
.fj-btn{
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	overflow: hidden;
	background: rgb(var(--fj-cta));
	color: #fff;
	text-decoration: none;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
	padding: 13px 28px;
	transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.fj-btn:hover,
.fj-btn:focus{
	background: rgb(var(--fj-cta-dark));
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 7px 16px rgb(var(--fj-cta) / .3);
}
.fj-btn:active{ transform: translateY(0); }
.fj-btn .fj-ar{
	font-size: .9em;
	transition: transform .22s ease;
}
.fj-btn:hover .fj-ar{ transform: translate(3px, -3px); }
.fj-btn::after{
	content: "";
	position: absolute;
	top: 0;
	left: -55%;
	width: 35%;
	height: 100%;
	background: linear-gradient(100deg, transparent, rgb(255 255 255 / .3), transparent);
	transform: skewX(-20deg);
	animation: fj-shine 4.2s ease-in-out 1.2s 2;
}
@keyframes fj-shine{
	0%{ left: -55%; }
	24%{ left: 130%; }
	100%{ left: 130%; }
}

/* ---------- 最初のh2の上 ----------
   本文の囲み（figure.mb-fig）と同じ寸法に合わせる。
   地と罫の色だけ変えて、本文の図と見分けがつくようにする。 */
.fj-cta-lead{
	margin: 2em 0;
	padding: 1.2em 1.3em;
	border: 1px solid rgb(var(--fj-cta) / .22);
	border-left: 3px solid rgb(var(--fj-cta));
	background: rgb(var(--fj-cta) / .04);
}
.fj-cta-lead p{
	margin: 0 0 14px;
	font-size: 16px;
	line-height: 1.9;
}

/* ---------- 途中 ---------- */
p.fj-cta-mid{ font-size: 16px; line-height: 1.9; }
p.fj-cta-mid a{
	color: rgb(var(--fj-cta));
	font-weight: 700;
	text-decoration: none;
	background: linear-gradient(rgb(var(--fj-cta) / .5), rgb(var(--fj-cta) / .5)) 0 100% / 100% 2px no-repeat;
	padding-bottom: 2px;
	transition: background-size .3s ease;
}
p.fj-cta-mid a:hover{
	background-image: linear-gradient(rgb(var(--fj-cta)), rgb(var(--fj-cta)));
}

/* ---------- まとめのあと ----------
   主役はここ1つ。上端の色罫で本文の囲みと区別する。 */
.fj-cta-end{
	margin: 2.4em 0 0;
	padding: 1.3em 1.4em 1.4em;
	border: 1px solid rgb(var(--fj-cta) / .22);
	border-top: 3px solid rgb(var(--fj-cta));
	background: #fff;
}
.fj-cta-end .fj-nm{
	font-size: 20px;
	font-weight: 700;
	line-height: 1.55;
	margin: 0 0 10px;
}
.fj-cta-end .fj-de{
	font-size: 16px;
	line-height: 1.9;
	margin: 0 0 8px;
}
.fj-cta-end .fj-cond{
	font-size: 14px;
	line-height: 1.8;
	color: #5d6b64;
	margin: 0 0 20px;
	padding-top: 10px;
	border-top: 1px dashed rgb(var(--fj-cta) / .3);
}
.fj-cta-end .fj-cond em{
	font-style: normal;
	font-weight: 700;
	color: inherit;
}
.fj-cta-end .fj-asof{
	font-size: 13px;
	color: #8d978f;
	margin: 14px 0 0;
}

/* 残り2社は箱の外。地の文に戻して主役と差をつける */
.fj-others{
	margin: 1.1em 0 0;
	font-size: 15px;
	line-height: 2;
	color: #4d5a53;
}
.fj-others a{
	color: rgb(var(--fj-sec));
	font-weight: 700;
	text-decoration: none;
	border-bottom: 1px solid rgb(var(--fj-sec) / .4);
	transition: border-color .2s ease;
}
.fj-others a:hover{ border-bottom-color: rgb(var(--fj-sec)); }

.fj-px-wrap{ height: 0; overflow: hidden; }
.fj-px{ border: 0; position: absolute; }

/* ---------- 追従バナー 共通 ---------- */
.fj-bn{ position: relative; }
.fj-bn[hidden]{ display: none; }
.fj-bn img{ display: block; height: auto; }
.fj-bn-x{
	position: absolute;
	top: -10px;
	right: -10px;
	width: 26px;
	height: 26px;
	padding: 0;
	border: 1px solid rgb(var(--fj-line));
	border-radius: 50%;
	background: #fff;
	color: #5d6b64;
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 1px 4px rgb(0 0 0 / .14);
	z-index: 2;
}
.fj-bn-x:hover{ background: #f4f6f4; }

/* ---------- PC: サイドバー追従 ---------- */
.fj-bn-side{
	display: none;
	margin: 18px auto 0;
	width: 300px;
	max-width: 100%;
}
.fj-bn-side img{ width: 300px; max-width: 100%; }

@media (min-width: 782px){
	.fj-bn-side:not([hidden]){ display: block; }
}

/* ---------- PC: サイドバーが無い記事は画面右下に固定 ---------- */
.fj-bn-fix{
	display: none;
	position: fixed;
	right: 16px;
	bottom: 16px;
	/* テーマ実測: ポップアップ994・ドロワー994・上に戻る992。その下に置く */
	z-index: 989;
	padding: 8px;
	width: 316px;
	background: rgb(255 255 255 / .96);
	border: 1px solid rgb(var(--fj-line));
	box-shadow: 0 4px 16px rgb(0 0 0 / .14);
	opacity: 0;
	transform: translateY(8px);
	transition: opacity .28s ease, transform .28s ease;
}
.fj-bn-fix img{ width: 300px; max-width: 100%; }
.fj-bn-fix.is-in{ opacity: 1; transform: none; }
.fj-bn-fix .fj-bn-x{ top: -11px; right: -11px; }

@media (min-width: 782px){
	.fj-bn-fix:not([hidden]){ display: block; }
}

/* ---------- スマホ: 画面下に固定 ---------- */
.fj-bn-sp{
	display: none;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	/* テーマ実測: ポップアップ994・ドロワー994・上に戻る992。その下に置く */
	z-index: 990;
	padding: 6px 0 calc(6px + env(safe-area-inset-bottom, 0px));
	background: rgb(255 255 255 / .96);
	border-top: 1px solid rgb(var(--fj-line));
	box-shadow: 0 -2px 10px rgb(0 0 0 / .08);
	text-align: center;
	transform: translateY(100%);
	transition: transform .28s ease;
}
.fj-bn-sp img{ margin: 0 auto; width: 320px; max-width: 100%; }
.fj-bn-sp .fj-bn-x{
	top: -13px;
	right: 8px;
}
.fj-bn-sp.is-in{ transform: translateY(0); }

@media (max-width: 781px){
	.fj-bn-sp:not([hidden]){ display: block; }
	/* テーマの「上に戻る」ボタンは、テーマ自身の変数で持ち上げる */
	body.fj-bn-sp-on{ --diver--sticky--position--bottom: 74px; }
}

@media (prefers-reduced-motion: reduce){
	.fj-btn,
	.fj-btn .fj-ar,
	p.fj-cta-mid a,
	.fj-bn-sp,
	.fj-bn-fix{ transition: none; }
	.fj-btn::after{ animation: none; display: none; }
}