@charset "UTF-8";
/* =======================================================
   オンピーノ コラム（/column/ 配下専用）
   既存の common.css / sitestyle.css の後に読み込む
   色：ピンク #eb346c / #ed487a、ブルー #29abe2、オレンジ #ffa72a
======================================================= */

/* ---------- ページタイトル帯 ---------- */
.colPageHead {
	background: #fdeef3;
	padding: 36px 0 32px;
	text-align: center;
	margin-top: 10px;
}
.colPageHead .colPageTitle {
	font-size: 28px;
	color: #eb346c;
	letter-spacing: 0.1em;
	line-height: 1.3;
}
.colPageHead .colPageTitle span {
	display: block;
	font-size: 13px;
	color: #e8a1b7;
	letter-spacing: 0.2em;
	margin-top: 6px;
	font-weight: bold;
}

/* ---------- パンくず ---------- */
.colBreadcrumb {
	font-size: 12px;
	color: #888;
	padding: 14px 0;
}
.colBreadcrumb ol { display: flex; flex-wrap: wrap; }
.colBreadcrumb li { font-size: 12px; }
.colBreadcrumb li + li::before {
	content: "＞";
	margin: 0 8px;
	color: #bbb;
}
.colBreadcrumb a { color: #eb346c; text-decoration: none; }
.colBreadcrumb a:hover { text-decoration: underline; }

/* ---------- 共通：幅 ---------- */
.colMain {
	padding: 10px 0 70px;
}
.colArticleWrap {
	max-width: 800px;
	margin: 0 auto;
}

/* ---------- コラム一覧（TOP） ---------- */
.colLead {
	font-size: 14px;
	text-align: center;
	margin: 10px 0 36px;
}
.colList {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px 24px;
}
.colCard a {
	display: block;
	height: 100%;
	background: #fff;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 2px 10px rgba(235, 52, 108, 0.12);
	color: #555;
	text-decoration: none;
	transition: transform .2s, box-shadow .2s;
}
.colCard a:hover {
	transform: translateY(-3px);
	box-shadow: 0 6px 18px rgba(235, 52, 108, 0.2);
}
.colCard .colCardThumb {
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: #f6f6f6;
}
#wrapper .colCard .colCardThumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.colCard .colCardBody { padding: 16px 18px 20px; }
.colCard .colCardDate { font-size: 12px; color: #999; }
.colCard .colCardTitle {
	font-size: 16px;
	line-height: 1.5;
	color: #333;
	margin: 6px 0 8px;
}
.colCard .colCardExcerpt {
	font-size: 13px;
	line-height: 1.7;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ---------- 記事ヘッダー ---------- */
.colArticle h1.colTitle {
	font-size: 26px;
	line-height: 1.5;
	color: #333;
	margin: 10px 0 12px;
}
.colMeta {
	font-size: 13px;
	color: #999;
	margin-bottom: 18px;
}
.colMeta time + time { margin-left: 14px; }
.colMeta .colMetaLabel { margin-right: 4px; }
.colEyecatch { margin: 0 0 28px; }
#wrapper .colEyecatch img,
#wrapper .colFigure img { border-radius: 8px; }

/* ---------- 本文 ---------- */
.colBody {
	font-size: 16px;
	line-height: 1.95;
	color: #444;
}
.colBody p { font-size: 16px; line-height: 1.95; margin: 0 0 1.4em; }
.colBody strong { font-weight: bold; }
.colBody a { color: #29abe2; text-decoration: underline; }
.colBody a:hover { opacity: .75; }

.colBody h2 {
	font-size: 22px;
	line-height: 1.5;
	color: #fff;
	background: #ed487a;
	border-radius: 6px;
	padding: 12px 18px;
	margin: 56px 0 24px;
	scroll-margin-top: 20px;
}
.colBody h3 {
	font-size: 19px;
	line-height: 1.5;
	color: #333;
	border-left: 5px solid #ed487a;
	border-bottom: 1px solid #f5c3d5;
	padding: 4px 0 8px 12px;
	margin: 40px 0 18px;
	scroll-margin-top: 20px;
}
.colFigure { margin: 0 0 24px; }

/* 箇条書き */
.colBody ul.colList-disc { margin: 0 0 1.4em; }
.colBody ul.colList-disc li {
	position: relative;
	padding-left: 1.3em;
	margin-bottom: .5em;
	font-size: 16px;
	line-height: 1.8;
}
.colBody ul.colList-disc li::before {
	content: "";
	position: absolute;
	left: .2em;
	top: .7em;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #ed487a;
}

/* チェックリスト */
.colCheck {
	background: #fff8ec;
	border: 2px solid #ffa72a;
	border-radius: 10px;
	padding: 22px 24px 12px;
	margin: 0 0 1.6em;
}
.colCheck li {
	position: relative;
	padding-left: 32px;
	margin-bottom: 12px;
	font-size: 16px;
	line-height: 1.7;
	font-weight: bold;
	color: #333;
}
.colCheck li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 1px;
	width: 22px;
	height: 22px;
	line-height: 22px;
	text-align: center;
	border-radius: 4px;
	background: #ffa72a;
	color: #fff;
	font-size: 14px;
}

/* ポイントボックス */
.colPoint {
	position: relative;
	background: #fdeef3;
	border-radius: 10px;
	padding: 30px 24px 18px;
	margin: 28px 0 1.6em;
}
.colPoint::before {
	content: "POINT";
	position: absolute;
	top: -12px;
	left: 20px;
	background: #eb346c;
	color: #fff;
	font-size: 12px;
	font-weight: bold;
	letter-spacing: .1em;
	padding: 3px 12px;
	border-radius: 20px;
}
.colPoint p { margin-bottom: .6em; }

/* 表 */
.colTableWrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin: 0 0 1.6em;
}
.colTable {
	width: 100%;
	min-width: 560px;
	border-collapse: collapse;
	font-size: 15px;
}
.colTable th, .colTable td {
	border: 1px solid #f5c3d5;
	padding: 12px 14px;
	line-height: 1.6;
	font-size: 15px;
	vertical-align: middle;
}
.colTable thead th {
	background: #ed487a;
	color: #fff;
	font-weight: bold;
	text-align: center;
}
.colTable thead th:empty { background: #fff; border-color: #fff #f5c3d5 #f5c3d5 #fff; }
.colTable tbody th {
	background: #fdeef3;
	color: #333;
	font-weight: bold;
	text-align: left;
	width: 26%;
	white-space: nowrap;
}
.colTable td strong { color: #eb346c; }
.colTable-price { min-width: 0; }
.colTable-price tbody th { width: 42%; white-space: normal; }
.colTable .colNote { display: block; font-size: 12px; color: #888; margin-top: 2px; }

/* 向いている人ボックス */
.colFit {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin: 0 0 1.6em;
}
.colFitBox {
	border-radius: 10px;
	padding: 18px 20px;
	border: 2px solid #ed487a;
	background: #fff;
}
.colFitBox.is-blue { border-color: #29abe2; }
.colFitBox h4 {
	font-size: 16px;
	color: #eb346c;
	margin-bottom: 10px;
}
.colFitBox.is-blue h4 { color: #29abe2; }
.colFitBox p { font-size: 15px; line-height: 1.8; margin: 0; }

/* オンピーノの場合（定義リスト） */
.colSpec { margin: 0 0 1.6em; border-top: 1px solid #f5c3d5; }
.colSpec > div {
	display: flex;
	border-bottom: 1px solid #f5c3d5;
	padding: 16px 0;
}
.colSpec dt {
	flex: 0 0 140px;
	font-weight: bold;
	color: #eb346c;
	font-size: 15px;
}
.colSpec dd { flex: 1; font-size: 15px; line-height: 1.8; }
.colSpec dd p { font-size: 15px; margin: 0 0 .4em; }

/* テキストリンクボタン（料金を見る など） */
.colMoreLink { text-align: right; margin: -0.6em 0 1.6em; }
.colBody .colMoreLink a {
	display: inline-block;
	color: #eb346c;
	font-weight: bold;
	text-decoration: none;
	border-bottom: 2px solid #f5c3d5;
	padding-bottom: 2px;
}
.colBody .colMoreLink a::before { content: "▶ "; font-size: 12px; }

/* 保護者の声 */
.colBody .colVoiceHead {
	font-size: 18px;
	font-weight: bold;
	color: #333;
	border-left: 5px solid #29abe2;
	padding: 2px 0 2px 12px;
	margin: 36px 0 4px;
}
.colVoices { margin: 0 0 1.6em; }
.colVoice {
	background: #f4fbfe;
	border-radius: 10px;
	padding: 18px 22px 8px;
	margin-bottom: 14px;
}
.colVoice h4 {
	font-size: 16px;
	color: #29abe2;
	margin-bottom: 8px;
	line-height: 1.5;
}
.colVoice p { font-size: 15px; line-height: 1.85; }
.colVoiceSource { font-size: 13px; color: #888; margin: 0 0 12px; }

/* ---------- CTA ---------- */
.colCtaBtn { text-align: center; margin: 28px 0 36px; }
.colBody .colCtaBtn a,
.colCtaBtn a {
	display: inline-block;
	min-width: 300px;
	max-width: 100%;
	box-sizing: border-box;
	background: #ffa72a;
	color: #fff;
	font-size: 17px;
	font-weight: bold;
	text-decoration: none;
	padding: 16px 40px 16px 32px;
	border-radius: 40px;
	box-shadow: 0 4px 0 #e08a0c;
	position: relative;
	transition: transform .1s, box-shadow .1s;
}
.colCtaBtn a::after {
	content: "";
	position: absolute;
	right: 20px;
	top: 50%;
	width: 8px;
	height: 8px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	transform: translateY(-50%) rotate(45deg);
}
.colCtaBtn a:hover { transform: translateY(2px); box-shadow: 0 2px 0 #e08a0c; opacity: 1; }
.colCtaBtn small { display: block; font-size: 12px; color: #888; margin-top: 10px; }

.colCtaBox {
	background: #fdeef3;
	border: 3px solid #ed487a;
	border-radius: 14px;
	padding: 28px 24px 8px;
	margin: 40px 0 20px;
	text-align: center;
}
.colCtaBox .colCtaCopy {
	font-size: 18px;
	font-weight: bold;
	color: #eb346c;
	line-height: 1.6;
	margin-bottom: .5em;
}
.colCtaBox p { font-size: 15px; }
.colCtaBox .colCtaBtn { margin: 18px 0 20px; }
.colCtaTel { font-size: 14px; color: #555; margin-bottom: 16px; }
.colCtaTel a { color: #eb346c; font-weight: bold; font-size: 20px; text-decoration: none; }

/* ---------- 目次 ---------- */
.colToc {
	border: 2px solid #f5c3d5;
	border-radius: 10px;
	padding: 20px 26px 14px;
	margin: 0 0 30px;
	background: #fff;
}
.colToc .colTocTitle {
	font-size: 16px;
	font-weight: bold;
	color: #eb346c;
	margin-bottom: 10px;
}
.colToc ol { counter-reset: toc; }
.colToc > ol > li {
	counter-increment: toc;
	font-size: 15px;
	line-height: 1.7;
	margin-bottom: 8px;
	padding-left: 1.8em;
	position: relative;
}
.colToc > ol > li::before {
	content: counter(toc) ".";
	position: absolute;
	left: 0;
	color: #eb346c;
	font-weight: bold;
}
.colToc ol ol { margin: 4px 0 0; }
.colToc ol ol li {
	font-size: 14px;
	line-height: 1.7;
	padding-left: 1em;
	position: relative;
	margin-bottom: 2px;
}
.colToc ol ol li::before { content: "-"; position: absolute; left: 0; color: #bbb; }
.colToc a { color: #555; text-decoration: none; }
.colToc a:hover { color: #eb346c; text-decoration: underline; }

/* ---------- 記事下 ---------- */
.colBackList { text-align: center; margin: 40px 0 0; }
.colBackList a {
	display: inline-block;
	border: 2px solid #eb346c;
	color: #eb346c;
	font-weight: bold;
	font-size: 15px;
	text-decoration: none;
	padding: 10px 36px;
	border-radius: 30px;
}
.colBackList a:hover { background: #eb346c; color: #fff; }

/* =======================================================
   タブレット
======================================================= */
@media screen and (max-width: 980px) {
	.colArticleWrap { padding: 0 20px; }
	.colList { grid-template-columns: repeat(2, 1fr); }
}

/* =======================================================
   スマホ
======================================================= */
@media screen and (max-width: 748px) {
	.colPageHead { padding: 26px 0 22px; }
	.colPageHead .colPageTitle { font-size: 22px; }
	.colBreadcrumb { padding: 10px 0; }
	.colArticleWrap { padding: 0 16px; }
	.colMain { padding-bottom: 50px; }
	.colList { grid-template-columns: 1fr; gap: 20px; }

	.colArticle h1.colTitle { font-size: 21px; }
	.colBody, .colBody p { font-size: 15px; line-height: 1.9; }
	.colBody h2 { font-size: 18px; padding: 10px 14px; margin: 44px 0 20px; }
	.colBody h3 { font-size: 16.5px; margin: 32px 0 14px; }
	.colBody ul.colList-disc li, .colCheck li { font-size: 15px; }
	.colCheck { padding: 18px 16px 8px; }
	.colPoint { padding: 26px 18px 14px; }
	.colToc { padding: 16px 18px 10px; }
	.colToc > ol > li { font-size: 14px; }
	.colToc ol ol li { font-size: 13px; }

	.colTable { min-width: 0; }
	.colTable th, .colTable td { font-size: 13px; padding: 9px 8px; }
	.colTable tbody th { width: 28%; white-space: normal; }
	.colFit { grid-template-columns: 1fr; }
	.colSpec > div { display: block; padding: 14px 0; }
	.colSpec dt { margin-bottom: 4px; }

	.colCtaBtn a, .colBody .colCtaBtn a { min-width: 0; width: 100%; font-size: 16px; padding: 15px 36px 15px 24px; }
	.colCtaBox { padding: 22px 16px 6px; }
	.colCtaBox .colCtaCopy { font-size: 16px; }
}