@charset "UTF-8";
/* =========================================================
   Knowledge Suite+ TOP スライダー用
   「SFA 早期導入キャンペーン」メインビジュアル（1スライド分）

   - すべて #ksc-mv の中だけに効くように書いています（KS+ TOPの既存CSSと干渉しない）
   - 画像はキャンペーンLP（/ksplus/campaign/images/）のものを参照
   - 単位はpx指定（TOPのrem指定・html{font-size:62.5%}の影響を受けない）
   ========================================================= */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&family=Roboto:wght@400;500;600;700;800;900&display=swap");

/* スライドの幅（TOPのメイン領域の幅）に合わせてレイアウトを切り替えるため、
   画面幅ではなく #ksc-mv 自身の幅で判定する（コンテナクエリ） */
#ksc-mv {
	/* 幅と高さの両方で判定（TOPのスライダーは高さが決まっているので size にしている）
	   ※スライドの高さが決まっていない場所に置くと高さ0になるので注意 */
	container-type: size;
	container-name: kscmv;
	height: 100%; /* スライダーの高さいっぱいに広げる */
	--ksc-blue: #1E4FCC;
	--ksc-red: #E8412A;
	--ksc-radius: 8px;
	--ksc-bd: 2px;
	--ksc-shadow-btn: -3px 5px 12px rgba(0, 0, 0, .22);
	--ksc-shadow-badge: -4px 6px 10px rgba(0, 0, 0, .25);
	width: 100%;
	color: #222935;
	font-family: "Roboto", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
	font-size: 16px;
	line-height: 1.6;
	letter-spacing: normal;
	text-align: left;
	-webkit-font-smoothing: antialiased;
}

/* SP（画面幅767px以下）はスライダーの高さが決まっていない場合があるので、幅だけで判定 */
@media (max-width: 767px) {
	#ksc-mv { container-type: inline-size; }
}

/* ---------- 既存CSSの影響を打ち消すリセット（この中だけ） ----------
   id（#ksc-mv）で囲んでいるので、TOPページの p / img / a などの一般的な指定より優先されます。
   個別の指定は「#ksc-mv .クラス名」で、このリセットよりさらに優先されます。 */
#ksc-mv,
#ksc-mv *,
#ksc-mv *::before,
#ksc-mv *::after { box-sizing: border-box; }
#ksc-mv :is(p, span, small, a, img) {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	text-decoration: none;
}
#ksc-mv div { margin: 0; }
#ksc-mv img { max-width: none; height: auto; vertical-align: middle; }
#ksc-mv a:hover,
#ksc-mv a:visited { opacity: 1; }

/* ---------- button ---------- */
#ksc-mv .ksc-btns {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px 24px;
}

/* 共通：テキスト中央＋右端にシェブロン */
#ksc-mv .ksc-btn {
	--btn-bg: var(--ksc-blue);
	--btn-color: #fff;
	--btn-border: var(--ksc-blue);
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 300px;
	min-height: 54px;
	padding: 11px 48px 9px; /* 和文の上寄りを補正して文字を1px下げる（全ボタン共通ルール） */
	border: var(--ksc-bd) solid var(--btn-border);
	border-radius: 999px;
	background: var(--btn-bg);
	color: var(--btn-color);
	box-shadow: var(--ksc-shadow-btn);
	font-size: 17px;
	font-weight: 900;
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
#ksc-mv .ksc-btn::after {
	content: "";
	position: absolute;
	right: 24px;
	top: 50%;
	width: 9px;
	height: 9px;
	border-top: 1.5px solid currentColor;
	border-right: 1.5px solid currentColor;
	transform: translateY(-50%) rotate(45deg);
	transition: right .2s ease;
}

/* 種類（色の組み合わせ） */
#ksc-mv .ksc-btn--blue { --btn-bg: var(--ksc-blue); --btn-color: #fff; --btn-border: var(--ksc-blue); }
#ksc-mv .ksc-btn--blueLine { --btn-bg: #fff; --btn-color: var(--ksc-blue); --btn-border: var(--ksc-blue); }

/* ---------- hover（塗り⇔線の色反転＋矢印を右へ） ---------- */
@media (hover: hover) {
	#ksc-mv .ksc-btn:hover::after { right: 18px; }

	#ksc-mv .ksc-btn--blue:hover { --btn-bg: #fff; --btn-color: var(--ksc-blue); }
	#ksc-mv .ksc-btn--blueLine:hover { --btn-bg: var(--ksc-blue); --btn-color: #fff; }
}

/* =========================================================
   MV
   ========================================================= */
#ksc-mv .ksc-mv__inner {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	/* スライダーの高さがこのスライドより高い場合も、下に空白を作らず上下中央に配置 */
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 100%;
	padding: 56px 24px var(--mv-gap); /* ボタンの下も上（白四角との間）と同じ間隔に */
	padding-right: 120px;/*メニューが左にある関係で左寄りに */
	background: #fff;
}
/* モザイク（003と同じ素材）。デザインの1200px幅を基準に中央から配置し、
   画面が広くても文字エリアとのかかり方が変わらないようにする */
#ksc-mv .ksc-mv__inner::before,
#ksc-mv .ksc-mv__inner::after {
	content: "";
	position: absolute;
	z-index: -1;
	pointer-events: none;
	background-repeat: no-repeat;
	background-size: contain;
}
/* 右上：デザインから書き出したモザイク（透明度込み）を、1200pxフレームの右上に合わせて配置 */
#ksc-mv .ksc-mv__inner::before {
	left: calc(50% + (600px - var(--mv-r-w, 962px) + var(--mv-r-x, 312px)) * var(--mv-s, 1)); /* --mv-r-x で左右位置を調整 */
	top: var(--mv-r-y, 0px);
	width: calc(var(--mv-r-w, 962px) * var(--mv-s, 1));
	aspect-ratio: 962 / 497;
	background-image: url("/ksplus/campaign/images/mv_mosaic_tr.png");
}
/* 左下：デザインから書き出したモザイク（透明度込み）を、1200pxフレームの左下に合わせて配置 */
#ksc-mv .ksc-mv__inner::after {
	left: calc(50% - (600px + var(--mv-l-x, 422px)) * var(--mv-s, 1)); /* --mv-l-x で左右位置を調整（プラスで左へ） */
	bottom: var(--mv-l-y, 0px);
	width: calc(var(--mv-l-w, 997px) * var(--mv-s, 1));
	aspect-ratio: 997 / 497;
	background-image: url("/ksplus/campaign/images/mv_mosaic_bl.png");
}

/* 月桂樹・白四角・ボタンの間隔はすべて --mv-gap で統一 */
#ksc-mv .ksc-mv__inner { --mv-gap: 28px; }
#ksc-mv .ksc-mv__achieve {
	display: flex;
	justify-content: center;
	margin-bottom: var(--mv-gap);
}
#ksc-mv .ksc-mv__achieve img { width: 660px; }

/* stage: card + device + buttons */
/* 白い枠と文字はページ全体に対して中央。PC画像は枠の右側に重ねる */
#ksc-mv .ksc-mv__stage {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--mv-gap);
	width: 700px;
	max-width: 100%;
	margin: 0 auto;
}

#ksc-mv .ksc-mv__card {
	position: relative;
	z-index: 1;
	width: 100%;
	padding: 26px 32px 24px;
	border-radius: var(--ksc-radius);
	background: rgba(255, 255, 255, .72);
	text-align: center;
}

#ksc-mv .ksc-mv__h1 { margin: 0; font-size: inherit; font-weight: inherit; line-height: inherit; }
#ksc-mv .ksc-mv__lead,
#ksc-mv .ksc-mv__title { display: block; }
#ksc-mv .ksc-mv__lead { font-size: 20px; font-weight: 700; }
#ksc-mv .ksc-mv__title {
	margin-top: 2px;
	font-size: 38px;
	font-weight: 900;
	line-height: 1.3;
	letter-spacing: .02em;
	color: #000;
}

#ksc-mv .ksc-mv__price { margin-top: 18px; }
#ksc-mv .ksc-mv__regular {
	display: inline-block;
	position: relative;
	font-size: 30px;
	font-weight: 700;
	line-height: 1.2;
	color: #202020;
}
#ksc-mv .ksc-mv__regular::after {
	content: "";
	position: absolute;
	left: -2px;
	right: -2px;
	top: 52%;
	height: 2px;
	background: var(--ksc-red);
}

/* 4行（リード・タイトル・通常価格・キャンペーン価格）は常に中央揃え。
   付箋・PC画像・バッジは文字の流れから外して、変数で後から位置調整できるようにする */
#ksc-mv .ksc-mv__campaign {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	width: fit-content;
	margin: -10px auto 0; /* 通常価格との距離を詰める */
	color: #000;
	font-weight: 900;
	line-height: 1;
}
/* 付箋：価格の左上に配置（--eien-x / --eien-y で調整） */
#ksc-mv .ksc-mv__eien {
	position: absolute;
	right: calc(100% + var(--eien-x, -50px));
	top: var(--eien-y, 0px);
	width: var(--eien-w, 125px);
	max-width: none;
	filter: drop-shadow(var(--ksc-shadow-badge)); /* 100社バッジと同じ左下の影 */
}
#ksc-mv .ksc-mv__month { margin: 0 8px 12px 0; font-size: 38px; font-weight: 700; white-space: nowrap; }
#ksc-mv .ksc-mv__num {
	font-size: 108px;
	font-weight: 800;
	color: #F3451F;
	letter-spacing: -.02em;
}
/* 「,」だけ小さく */
#ksc-mv .ksc-mv__comma { margin: 0 .02em; font-size: .6em; }
#ksc-mv .ksc-mv__unit {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin: 0 0 10px 4px;
	font-size: 40px;
	font-weight: 700;
}
#ksc-mv .ksc-mv__unit small { margin-bottom: 4px; font-size: 13px; font-weight: 700; }

/* PC・タブレット：白四角の中は左揃え（LPと同じ）
   「永年適用」の赤ラベルは、HTMLを変えずに「月額」の ::before で表示する */
@container kscmv (min-width: 768px) {
	#ksc-mv .ksc-mv__visual { --device-x: -234px; }
	#ksc-mv .ksc-mv__card { padding: 26px 44px 24px; text-align: left; }
	#ksc-mv .ksc-mv__campaign { justify-content: flex-start; margin: -4px 0 0; } /* 通常価格の下を少し空ける */
	#ksc-mv .ksc-mv__eien { display: none; }
	#ksc-mv .ksc-mv__stage { width: 660px; }
	#ksc-mv .ksc-mv__title { font-size: 39px; }
	#ksc-mv .ksc-mv__regular { font-size: 28px; }
	#ksc-mv .ksc-mv__num { font-size: 90px; }
	#ksc-mv .ksc-mv__unit { font-size: 37px; }
	#ksc-mv .ksc-mv__month { position: relative; margin: 0 10px 12px 0; font-size: 36px; font-weight: 800; }
	#ksc-mv .ksc-mv__month::before {
		content: "永年適用";
		position: absolute;
		left: 0;
		bottom: calc(100% + 6px);
		padding: 2px 6px 1px;
		background: #F3451F;
		color: #fff;
		font-size: 14px;
		font-weight: 700;
		line-height: 1.4;
		letter-spacing: .04em;
		white-space: nowrap;
	}
}

/* PC画像：白四角の右に重ねる（--device-x / --device-y で調整） */
#ksc-mv .ksc-mv__visual {
	position: absolute;
	z-index: 2;
	left: calc(100% + var(--device-x, -124px));
	bottom: calc(54px + var(--mv-gap) + var(--device-y, -28px)); /* ボタン高さ＋間隔分を上げて白四角の下端に揃える */
}
#ksc-mv .ksc-mv__device { display: block; width: 290px; max-width: none; }
#ksc-mv .ksc-mv__badge {
	position: absolute;
	left: var(--badge-x, 50px);
	top: var(--badge-y, -130px);
	width: 170px;
	filter: drop-shadow(var(--ksc-shadow-badge));
}

#ksc-mv .ksc-mv__btns { justify-content: center; width: max-content; max-width: calc(100cqw - 48px); }

/* 大きい画面：スライドが広いときは段階的に拡大（モザイクも同じ倍率）。
   スライダーの高さに収まる場合だけ拡大するよう、高さも条件にしている */
@container kscmv (min-width: 1300px) and (min-height: 590px) {
	#ksc-mv .ksc-mv__inner { --mv-s: 1.08; }
	#ksc-mv .ksc-mv__achieve,
	#ksc-mv .ksc-mv__stage { zoom: 1.08; }
}
@container kscmv (min-width: 1440px) and (min-height: 625px) {
	#ksc-mv .ksc-mv__inner { --mv-s: 1.16; }
	#ksc-mv .ksc-mv__achieve,
	#ksc-mv .ksc-mv__stage { zoom: 1.16; }
}
@container kscmv (min-width: 1600px) and (min-height: 680px) {
	#ksc-mv .ksc-mv__inner { --mv-s: 1.28; }
	#ksc-mv .ksc-mv__achieve,
	#ksc-mv .ksc-mv__stage { zoom: 1.28; }
}
@container kscmv (min-width: 1800px) and (min-height: 730px) {
	#ksc-mv .ksc-mv__inner { --mv-s: 1.4; }
	#ksc-mv .ksc-mv__achieve,
	#ksc-mv .ksc-mv__stage { zoom: 1.4; }
}

/* 画面幅が狭い（ブラウザを拡大した）ときも、PCのレイアウトを崩さずに全体を縮小して収める。
   PC画像を枠の下に回すと高さが増えて空白ができるため、縦積みはSP（767px以下）だけにする */
@container kscmv (min-width: 768px) and (max-width: 1079px) {
	#ksc-mv .ksc-mv__achieve,
	#ksc-mv .ksc-mv__stage { zoom: .88; }
}
@container kscmv (min-width: 768px) and (max-width: 959px) {
	#ksc-mv .ksc-mv__achieve,
	#ksc-mv .ksc-mv__stage { zoom: .79; }
}
@container kscmv (min-width: 768px) and (max-width: 859px) {
	#ksc-mv .ksc-mv__achieve,
	#ksc-mv .ksc-mv__stage { zoom: .7; }
}

/* SPはPC画像を枠の下に回す */
@container kscmv (max-width: 767px) {
	#ksc-mv .ksc-mv__visual { position: relative; left: auto; bottom: auto; margin: -8px 0 0; }
	#ksc-mv .ksc-mv__badge { left: auto; right: -40px; top: -24px; }

}


/* ---------- SP ---------- */
@container kscmv (max-width: 767px) {
	#ksc-mv .ksc-btns { flex-direction: column; align-items: stretch; gap: 12px; }
	#ksc-mv .ksc-btn { min-width: 0; width: 100%; min-height: 54px; }

	#ksc-mv .ksc-mv__inner { padding: 28px 16px var(--mv-gap); }
	#ksc-mv .ksc-mv__inner::before { left: auto; right: -120px; top: 0; width: 560px; }
	/* 月桂樹（7,500社）の後ろだけモザイクを薄くして文字を読みやすく */
	#ksc-mv .ksc-mv__inner::before {
		-webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .3) 0, rgba(0, 0, 0, .3) 70px, #000 140px);
		mask-image: linear-gradient(180deg, rgba(0, 0, 0, .3) 0, rgba(0, 0, 0, .3) 70px, #000 140px);
	}
	#ksc-mv .ksc-mv__inner::after { left: -140px; bottom: 0; width: 580px; }

	#ksc-mv .ksc-mv__achieve img { width: 100%; max-width: 400px; }
	#ksc-mv .ksc-mv__stage { width: 100%; margin: 0; }
	#ksc-mv .ksc-mv__card { padding: 20px 12px 18px; }
	#ksc-mv .ksc-mv__lead { font-size: 17px; }
	#ksc-mv .ksc-mv__title { font-size: 31px; letter-spacing: .02em; }
	#ksc-mv .ksc-mv__price { margin-top: 20px; }
	#ksc-mv .ksc-mv__regular { font-size: 30px; }
	/* SPは価格の左に余白がないので、付箋は価格の左上に出す */
	#ksc-mv .ksc-mv__inner { --mv-gap: 20px; }
	#ksc-mv .ksc-mv__campaign { margin-top: 8px; }
	/* SPもPCと同じく、斜めの付箋ではなく「月額」の上に赤ラベル */
	#ksc-mv .ksc-mv__eien { display: none; }
	#ksc-mv .ksc-mv__month::before {
		content: "永年適用";
		position: absolute;
		left: 50%;
		transform: translateX(-50%); /* ラベルの中央に「月額」が来るように */
		bottom: calc(100% + 4px);
		padding: 1px 5px 0;
		background: #F3451F;
		color: #fff;
		font-size: 11px;
		font-weight: 700;
		line-height: 1.5;
		letter-spacing: .04em;
		white-space: nowrap;
	}
	#ksc-mv .ksc-mv__month { position: relative; margin: 0 10px 7px 0; font-size: 22px; } /* 赤ラベルが「2」にかからないよう右を空ける */
	#ksc-mv .ksc-mv__num { font-size: 70px; }
	#ksc-mv .ksc-mv__unit { margin-bottom: 7px; font-size: 26px; }
	#ksc-mv .ksc-mv__unit small { font-size: 10px; }
	#ksc-mv .ksc-mv__visual { margin: 0; padding-right: 30px; }
	#ksc-mv .ksc-mv__device { width: 260px; }
	#ksc-mv .ksc-mv__badge { left: auto; right: -3px; top: -45px; width: 120px; } /* PCの右上角を隠す */
}