@charset "UTF-8";

/* =========================================================
   記事サイドバーCTA ＋ 本文内イベントカルーセル
   受験お役立ち記事（single-information）と大学別記事（single-preparation）で共用
   ※ マークアップは component/common/sidebar-cta.php /
     component/common/event-carousel.php 側にある
========================================================= */

/* =========================================================
   サイドバーCTA
   ※ .single-news-sidebar-cta 配下のみに適用（他テンプレに影響なし）
========================================================= */

.single-news-sidebar-relations.single-news-sidebar-cta {
	/* 受験相談：--bg-blue_renewal（受験相談系） */
	--sc-counseling: var(--bg-blue_renewal);
	/* LINE：component/common/ctas.php の .line と同系統 */
	--sc-line: #31c755;
	--sc-line-bg: #f2faf4;
	/* クイックチェック：quick-check.jp のブランドカラー（button-primary / blue-700） */
	--sc-qc: #65ccc9;
	width: 300px;
	position: relative;
	background: transparent;
	padding: 0;
}

.single-news-sidebar-cta .single-news-sidebar-list {
	position: sticky;
	top: 84px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* ---------- 共通リセット（既存 .single-news-sidebar-relations の指定を打ち消す） ---------- */
.single-news-sidebar-cta p {
	font-size: inherit;
	border-bottom: none;
	padding: 0;
	margin: 0;
}

.single-news-sidebar-cta a {
	display: block;
	color: inherit;
	font-size: inherit;
	text-decoration: none;
}

.single-news-sidebar-cta a:hover {
	text-decoration: none;
}

/* ---------- カード共通（白地） ---------- */
.single-news-sidebar-cta .sidebar-card {
	background: #fff;
	border-radius: 8px;
	padding: 20px 18px;
}

.single-news-sidebar-cta .sidebar-card-text {
	font-size: 13px;
	color: var(--text-1st);
	line-height: 1.8;
}

/* ---------- 受験相談カード ---------- */
.single-news-sidebar-cta .sidebar-card-consul {
	text-align: center;
}

.single-news-sidebar-cta .sidebar-card-title {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-size: 20px;
	font-weight: bold;
	color: var(--text-1st);
	line-height: 1.4;
	margin-bottom: 14px;
}

/* ヘッダーと同じ btn_counseling_icon.png を白抜きにして円形の地色に乗せる */
.single-news-sidebar-cta .sidebar-icon-circle {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--sc-counseling);
}

.single-news-sidebar-cta .sidebar-icon-circle img {
	width: 24px;
	height: auto;
	filter: brightness(0) invert(1);
}

/* 3列のメリット（縦罫線で区切る） */
.single-news-sidebar-cta .sidebar-points {
	display: flex;
	list-style: none;
	margin: 18px 0;
	padding: 0;
}

.single-news-sidebar-cta .sidebar-points li {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	font-weight: bold;
	line-height: 1.5;
	color: var(--text-1st);
}

.single-news-sidebar-cta .sidebar-points li + li {
	border-left: 1px solid var(--border-light_renewal);
}

.single-news-sidebar-cta .sidebar-points svg {
	color: var(--sc-counseling);
	stroke: var(--sc-counseling);
}

.single-news-sidebar-cta .sidebar-btn-consul {
	display: block;
	width: 100%;
	padding: 14px;
	border-radius: 9999px;
	background: var(--sc-counseling);
	font-size: 15px;
	font-weight: bold;
	line-height: 1.4;
	letter-spacing: 0.05em;
	color: #fff;
	text-align: center;
	transition: opacity 0.2s ease;
}

.single-news-sidebar-cta .sidebar-btn-consul:hover {
	opacity: 0.8;
	color: #fff;
}

/* ---------- LINEカード（カード全体がリンク） ---------- */
/* 補足テキストは2行目でアイコン下まで使い、矢印は全体の上下中央に置く */
.single-news-sidebar-cta .sidebar-line-card {
	display: grid;
	grid-template-columns: auto 1fr auto;
	grid-template-areas:
		"icon texts arrow"
		"note note  arrow";
	align-items: center;
	column-gap: 10px;
	padding: 16px 12px;
	border: 1px solid var(--border-light_renewal);
	border-radius: 8px;
	background: var(--sc-line-bg);
	transition: opacity 0.2s ease;
}

.single-news-sidebar-cta .sidebar-line-card:hover {
	opacity: 0.8;
}

.single-news-sidebar-cta .sidebar-line-icon {
	grid-area: icon;
	width: 44px;
	height: 44px;
	border-radius: 11px;
}

.single-news-sidebar-cta .sidebar-line-texts {
	grid-area: texts;
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.single-news-sidebar-cta .sidebar-line-lead {
	font-size: 12px;
	line-height: 1.5;
	color: var(--text-2nd);
}

.single-news-sidebar-cta .sidebar-line-title {
	font-size: 13px;
	font-weight: bold;
	line-height: 1.5;
	color: var(--text-1st);
}

.single-news-sidebar-cta .sidebar-line-note {
	grid-area: note;
	font-size: 11px;
	line-height: 1.5;
	color: var(--text-2nd);
	margin-top: 6px;
}

.single-news-sidebar-cta .sidebar-line-arrow {
	grid-area: arrow;
	color: var(--text-2nd);
}

/* ---------- クイックチェック ---------- */
/* quick-check.jp のロゴ（https://quick-check.jp/public/images/logo.png） */
.single-news-sidebar-cta .sidebar-logo-qc {
	width: auto;
	height: 24px;
	margin-bottom: 14px;
}

.single-news-sidebar-cta .sidebar-card-title-qc {
	font-size: 15px;
	font-weight: bold;
	color: var(--text-1st);
	line-height: 1.5;
	margin-bottom: 8px;
}

.single-news-sidebar-cta .sidebar-features {
	display: flex;
	flex-direction: column;
	gap: 10px;
	list-style: none;
	margin: 18px 0;
	padding: 0;
}

.single-news-sidebar-cta .sidebar-features li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--text-1st);
}

.single-news-sidebar-cta .sidebar-features svg {
	flex-shrink: 0;
	color: var(--sc-qc);
	stroke: var(--sc-qc);
}

.single-news-sidebar-cta .sidebar-link-qc {
	font-size: 15px;
	font-weight: bold;
	line-height: 1.4;
	color: var(--sc-qc);
	text-align: center;
	transition: opacity 0.2s ease;
}

.single-news-sidebar-cta .sidebar-link-qc:hover {
	opacity: 0.7;
	color: var(--sc-qc);
}

/* ---------- 合格率バナー（TOPページと同じ画像を使用） ---------- */
.single-news-sidebar-cta .sidebar-rate {
	display: block;
	line-height: 0;
	transition: opacity 0.2s ease;
}

.single-news-sidebar-cta .sidebar-rate:hover {
	opacity: 0.8;
}

.single-news-sidebar-cta .sidebar-rate img {
	width: 100%;
	height: auto;
}

/* ---------- サイドバー目次 ---------- */
.single-news-sidebar-cta .sidebar-toc {
	background: var(--bg-gray_renewal);
	border-radius: 8px;
	padding: 16px 18px;
}

.single-news-sidebar-cta .sidebar-toc-title {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	font-weight: bold;
	color: var(--text-1st);
	margin-bottom: 10px;
}

.single-news-sidebar-cta .sidebar-toc ol {
	list-style: decimal;
	padding-left: 18px;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.single-news-sidebar-cta .sidebar-toc li {
	font-size: 13px;
	line-height: 1.6;
	color: var(--text-2nd);
}

.single-news-sidebar-cta .sidebar-toc a {
	display: inline;
	color: var(--text-1st);
}

.single-news-sidebar-cta .sidebar-toc a:hover {
	color: var(--bg-blue_renewal);
	text-decoration: underline;
}

/* 見出しが無い記事では目次ブロックごと非表示 */
.single-news-sidebar-cta .sidebar-toc.is-empty {
	display: none;
}

/* ------------------------------
   本文内のイベントカルーセル
   ------------------------------ */
/* flex:1 の本文カラムは min-width:auto のままだとスライダーの中身に押し広げられるため、
   縮小を許可してカラム幅を保つ */
.singe-news-content {
	min-width: 0;
}

/* 記事カラム幅に合わせる（トップは850px固定のため上書き） */
.single-inarticle-event {
	width: 100%;
	padding: 24px 0 8px;
}

.single-inarticle-event .page-event-title {
	font-size: 22px;
	text-align: left;
}

.single-inarticle-event .splide-container-event {
	width: 100%;
	padding: 16px 0 0;
}

@media (min-width: 320px) and (max-width: 1023px) {
	.single-inarticle-event {
		padding: 16px 0 0;
	}
	.single-inarticle-event .page-event-title {
		font-size: 20px;
	}
	.single-inarticle-event .splide-container-event {
		padding: 12px 0 0;
	}
}

/* 記事内ではステータスバッジ（受付中・満員御礼など）とサブタイトルは出さず、タイトルだけにする */
.single-inarticle-event .page-event-status,
.single-inarticle-event .page-event-card-subtitle {
	display: none;
}

/* 本文用の .single-news-contents p / li のスタイルがカード内に効いてしまうため打ち消す
   （line-height:1.8・margin-bottom:24px が効くと日付バッジが縦に間延びする） */
.single-news-contents .single-inarticle-event p {
	margin: 0;
	line-height: 1.8;
}

.single-news-contents .single-inarticle-event li {
	list-style: none;
}

.single-news-contents .single-inarticle-event .page-event-card-time-week {
	font-size: 13px;
	padding-top: 6px;
}

.single-news-contents .single-inarticle-event .page-event-card-time-time {
	font-size: 15px;
}

.single-news-contents .single-inarticle-event .page-event-card-title {
	font-size: 14px;
}

.single-news-contents .single-inarticle-event .page-event-card-empty p {
	font-size: 15px;
	line-height: 1.8;
}