/*
 * 姉妹サイト（くすの木債務整理相談所）への案内
 *
 * 画面左下に常時表示する小さなカード。2026-10-02 新設。
 * ・左下は既存の固定要素が無く空いているため、本文を隠さずに置ける。
 * ・z-index は 2000。ヘッダー（3000）より下＝スマホでドロワーを開くと隠れる。
 *   お問い合わせページのLINEモーダル（100000）より下＝モーダルが必ず前に出る。
 * ・配色は白地＋緑アクセント。オレンジ（#ff6a00）はお問い合わせCTA専用なので使わない。
 * ・ブレークポイントは既存CSSに合わせて 769px / 1080px（モバイルファースト）。
 *
 * 【閉じた状態の扱い】
 * JSが <html> に .ksn-sister-dismissed を付ける。要素が描画される前に判定するため、
 * 一瞬表示されてから消える「ちらつき」が起きない。
 * JSが動かない環境では付かない＝カードは表示されたまま（リンクとしては機能する）。
 */

.c-sister {
	position: fixed;
	left: 10px;
	bottom: 10px;
	z-index: 2000;
	max-width: 62vw;
	background-color: #fff;
	border: 1px solid #dfdcd7;
	border-left: 4px solid #5fb423;
	border-radius: 8px;
	box-shadow: 0 4px 16px rgba(24, 45, 9, .14);
	transition: opacity .3s, transform .3s;
}

html.ksn-sister-dismissed .c-sister {
	display: none;
}

/* 閉じるボタンを押した直後のフェードアウト */
.c-sister.is-hidden {
	opacity: 0;
	transform: translateY(8px);
	pointer-events: none;
}

.c-sister__link {
	display: block;
	padding: 9px 30px 9px 12px;
	color: #182d09;
	text-decoration: none;
	transition: background-color .3s;
	border-radius: 0 8px 8px 0;
}

.c-sister__link:hover,
.c-sister__link:focus-visible {
	background-color: #eff8e9;
}

.c-sister__lead {
	display: block;
	color: #7f745e;
	font-size: 11px;
	font-weight: 400;
	line-height: 1.4;
}

.c-sister__name {
	display: block;
	margin-top: 2px;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.4;
}

/* 「→」はCSSで描く（画像を1枚増やさないため） */
.c-sister__arrow {
	display: inline-block;
	width: .42em;
	height: .42em;
	margin-left: .4em;
	border-top: 2px solid #5fb423;
	border-right: 2px solid #5fb423;
	transform: translateY(-.1em) rotate(45deg);
}

.c-sister__close {
	position: absolute;
	top: 0;
	right: 0;
	width: 28px;
	height: 28px;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0 8px 0 8px;
	cursor: pointer;
	transition: background-color .3s;
}

.c-sister__close:hover,
.c-sister__close:focus-visible {
	background-color: #eff8e9;
}

/* ×印もCSSで描く */
.c-sister__close::before,
.c-sister__close::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 11px;
	height: 1.5px;
	margin: -0.75px 0 0 -5.5px;
	background-color: #7f745e;
}

.c-sister__close::before {
	transform: rotate(45deg);
}

.c-sister__close::after {
	transform: rotate(-45deg);
}

/* キーボード操作時に見やすくする */
.c-sister__link:focus-visible,
.c-sister__close:focus-visible {
	outline: 2px solid #5fb423;
	outline-offset: 2px;
}

@media (min-width: 48.0625em) {
	.c-sister {
		left: 16px;
		bottom: 16px;
		max-width: 280px;
	}

	.c-sister__link {
		padding: 11px 34px 11px 14px;
	}

	.c-sister__lead {
		font-size: 12px;
	}

	.c-sister__name {
		font-size: 14px;
	}
}

@media (min-width: 67.5em) {
	.c-sister {
		left: 24px;
		bottom: 24px;
		max-width: 300px;
	}
}

/* 動きを減らす設定の利用者にはアニメーションを出さない */
@media (prefers-reduced-motion: reduce) {

	.c-sister,
	.c-sister__link,
	.c-sister__close {
		transition: none;
	}
}

/* 印刷時は不要 */
@media print {
	.c-sister {
		display: none;
	}
}