@charset "UTF-8";
/**
 * ブログ機能スタイル（TOPカルーセル／一覧／記事詳細）
 * 設置場所: wp-content/themes/proclasskids/css/blog.css
 *
 * クラス名はすべて .pk-blog__ 接頭辞。既存スタイルと衝突しません。
 * 色はサイト既存のブランドカラーに合わせています。変更する場合は下の変数のみ触ってください。
 */

.pk-blog {
	--pk-navy: #2c4356;
	--pk-pink: #ee4c7c;
	--pk-teal: #12bfb4;
	--pk-gray: #7a8894;
	--pk-line: #d5dbe0;

	padding: 80px 0;
	background: #fff;
	color: var(--pk-navy);
}

.pk-blog__inner {
	max-width: 1100px;
	margin: 0 auto;
}

/* ---------- 見出し ---------- */
.pk-blog__head {
	margin: 0 24px 34px;
	text-align: center;
}

.pk-blog__title {
	margin: 0 0 12px;
	font-size: 30px;
	font-weight: 800;
	letter-spacing: 0.02em;
	line-height: 1.4;
}

.pk-blog__lead {
	margin: 0;
	font-size: 14px;
	line-height: 1.8;
	color: var(--pk-gray);
}

/* ---------- カルーセル本体 ---------- */
.pk-blog__stage {
	position: relative;
	padding: 0 60px;
}

.pk-blog__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - 48px) / 3); /* PC: 3枚表示 */
	gap: 24px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding-bottom: 4px;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.pk-blog__track::-webkit-scrollbar {
	display: none;
}

.pk-blog__card {
	scroll-snap-align: start;
}

.pk-blog__link {
	display: block;
	color: inherit;
	text-decoration: none;
}

/* ---------- サムネイル ---------- */
.pk-blog__thumb {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border-radius: 6px;
	background: #eef1f3;
	display: flex;
	align-items: center;
	justify-content: center;
}

.pk-blog__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.pk-blog__link:hover .pk-blog__img {
	transform: scale(1.05);
}

.pk-blog__noimg {
	font-size: 11px;
	letter-spacing: 0.1em;
	color: #aab4bc;
}

/* カテゴリーラベル。カテゴリー追加時はここに1行足して色を割り当てる */
.pk-blog__cat {
	position: absolute;
	top: 0;
	left: 0;
	padding: 5px 12px;
	border-radius: 0 0 6px 0;
	background: var(--pk-teal);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.4;
}

.pk-blog__cat--classroom-report { background: var(--pk-pink); }
.pk-blog__cat--for-parents      { background: var(--pk-navy); }

/* ---------- テキスト ---------- */
.pk-blog__date {
	display: block;
	margin: 13px 0 6px;
	font-size: 12px;
	letter-spacing: 0.04em;
	color: var(--pk-gray);
}

.pk-blog__cardtitle {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.6;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ---------- 矢印 ---------- */
.pk-blog__arrow {
	position: absolute;
	top: 27%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1.5px solid var(--pk-navy);
	border-radius: 50%;
	background: #fff;
	color: var(--pk-navy);
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.pk-blog__arrow:hover:not(:disabled) {
	background: var(--pk-navy);
	color: #fff;
}

.pk-blog__arrow:disabled {
	opacity: 0.28;
	cursor: default;
}

.pk-blog__arrow svg {
	width: 15px;
	height: 15px;
}

.pk-blog__arrow--prev { left: 0; }
.pk-blog__arrow--next { right: 0; }

/* JS が hidden 属性を付けたときに確実に隠す。
   display:flex が UA の [hidden]{display:none} を上書きしてしまうため必須。 */
.pk-blog__arrow[hidden],
.pk-blog__dots[hidden] {
	display: none;
}

/* ---------- ドット ---------- */
.pk-blog__dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 24px;
}

.pk-blog__dot {
	width: 9px;
	height: 9px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--pk-line);
	cursor: pointer;
	transition: width 0.2s ease, background 0.2s ease;
}

.pk-blog__dot[aria-current="true"] {
	width: 24px;
	border-radius: 5px;
	background: var(--pk-pink);
}

/* ---------- 一覧ボタン ---------- */
.pk-blog__more {
	margin-top: 32px;
	text-align: center;
}

.pk-blog__btn {
	display: inline-block;
	padding: 15px 52px;
	border: 1.5px solid var(--pk-navy);
	border-radius: 999px;
	color: var(--pk-navy);
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease;
}

.pk-blog__btn:hover {
	background: var(--pk-navy);
	color: #fff;
}

/* ---------- タブレット ---------- */
@media (max-width: 900px) {
	.pk-blog__track {
		grid-auto-columns: calc((100% - 24px) / 2); /* 2枚表示 */
	}
}

/* ---------- スマートフォン ---------- */
@media (max-width: 640px) {
	.pk-blog {
		padding: 56px 0;
	}
	.pk-blog__title {
		font-size: 22px;
	}
	.pk-blog__stage {
		padding: 0 0 0 20px; /* 右端を見切れさせて「続きがある」ことを示す */
	}
	.pk-blog__track {
		grid-auto-columns: 78%;
		gap: 14px;
		padding-right: 20px;
	}
	.pk-blog__arrow {
		display: none; /* SPはスワイプ操作 */
	}
}

/* =========================================================
   ブログ記事一覧（home.php / archive.php）
   カードの見た目は上の .pk-blog__ クラスをそのまま流用する
   ========================================================= */

.pk-archive {
	--pk-navy: #2c4356;
	--pk-pink: #ee4c7c;
	--pk-teal: #12bfb4;
	--pk-gray: #7a8894;
	--pk-line: #d5dbe0;

	padding: 64px 20px 96px;
	color: var(--pk-navy);
}

.pk-archive__inner {
	max-width: 1100px;
	margin: 0 auto;
}

.pk-archive__head {
	margin-bottom: 48px;
	text-align: center;
}

.pk-archive__en {
	margin: 0 0 8px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.22em;
	color: var(--pk-teal);
}

.pk-archive__title {
	margin: 0;
	font-size: 30px;
	font-weight: 800;
	letter-spacing: 0.02em;
	line-height: 1.4;
}

.pk-archive__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 44px 24px;
}

.pk-archive__desc {
	max-width: 700px;
	margin: 16px auto 0;
	font-size: 14px;
	line-height: 1.9;
	color: var(--pk-gray);
}

.pk-archive__empty {
	text-align: center;
	font-size: 14px;
	color: var(--pk-gray);
}

/* ---------- ページ送り ---------- */
.pk-pager {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 64px;
}

.pk-pager .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 14px;
	border: 1px solid var(--pk-line);
	border-radius: 6px;
	color: var(--pk-navy);
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
}

.pk-pager .page-numbers.current {
	background: var(--pk-navy);
	border-color: var(--pk-navy);
	color: #fff;
}

.pk-pager a.page-numbers:hover {
	border-color: var(--pk-navy);
}

@media (max-width: 900px) {
	.pk-archive__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 640px) {
	.pk-archive {
		padding: 44px 20px 64px;
	}
	.pk-archive__title {
		font-size: 22px;
	}
	.pk-archive__grid {
		grid-template-columns: 1fr;
		gap: 30px;
	}
}

/* =========================================================
   ブログ記事詳細（single.php）
   ========================================================= */

.pk-single {
	--pk-navy: #2c4356;
	--pk-pink: #ee4c7c;
	--pk-teal: #12bfb4;
	--pk-gray: #7a8894;
	--pk-line: #d5dbe0;

	max-width: 1100px;
	margin: 0 auto;
	padding: 0 20px 96px;
	color: var(--pk-navy);
}

/* ---------- パンくず ---------- */
.pk-crumb { padding: 20px 0 32px; }

.pk-crumb__list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 12px;
	color: var(--pk-gray);
}

.pk-crumb__list li { display: flex; align-items: center; gap: 8px; }
.pk-crumb__list li + li:before { content: "/"; color: var(--pk-line); }
.pk-crumb__list a { color: var(--pk-gray); text-decoration: none; }
.pk-crumb__list a:hover { text-decoration: underline; }

.pk-crumb__list li[aria-current] {
	color: var(--pk-navy);
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ---------- 記事ヘッダー ---------- */
.pk-single__head { max-width: 760px; margin: 0 auto 32px; }

.pk-single__cat {
	display: inline-block;
	margin-bottom: 16px;
	padding: 5px 14px;
	border-radius: 4px;
	background: var(--pk-teal);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-decoration: none;
}

.pk-single__title {
	margin: 0 0 18px;
	font-size: 32px;
	font-weight: 800;
	line-height: 1.5;
	letter-spacing: 0.01em;
}

.pk-single__meta {
	display: flex;
	gap: 20px;
	font-size: 13px;
	letter-spacing: 0.04em;
	color: var(--pk-gray);
}

.pk-single__eyecatch { max-width: 900px; margin: 0 auto 48px; }
.pk-single__eyecatch img { display: block; width: 100%; height: auto; border-radius: 8px; }

/* ---------- 本文タイポグラフィ ---------- */
.pk-single__body {
	max-width: 760px;
	margin: 0 auto;
	font-size: 16px;
	line-height: 2;
	letter-spacing: 0.02em;
}

.pk-single__body > *:first-child { margin-top: 0; }
.pk-single__body p { margin: 0 0 1.9em; }

.pk-single__body h2 {
	margin: 3em 0 1.1em;
	padding-bottom: 0.5em;
	border-bottom: 2px solid var(--pk-line);
	font-size: 24px;
	font-weight: 800;
	line-height: 1.5;
}

.pk-single__body h3 {
	margin: 2.6em 0 1em;
	padding-left: 14px;
	border-left: 4px solid var(--pk-pink);
	font-size: 19px;
	font-weight: 700;
	line-height: 1.6;
}

.pk-single__body h4 { margin: 2.2em 0 0.9em; font-size: 17px; font-weight: 700; }
.pk-single__body a { color: #1a73b8; text-decoration: underline; }
.pk-single__body ul,
.pk-single__body ol { margin: 0 0 1.9em; padding-left: 1.6em; }
.pk-single__body li { margin-bottom: 0.6em; }
.pk-single__body img { max-width: 100%; height: auto; border-radius: 6px; }
.pk-single__body figure { margin: 2.4em 0; }
.pk-single__body figcaption { margin-top: 10px; font-size: 13px; color: var(--pk-gray); text-align: center; }

.pk-single__body blockquote {
	margin: 2.4em 0;
	padding: 20px 24px;
	border-left: 4px solid var(--pk-line);
	background: #f6f8f9;
	color: #54636f;
}

.pk-single__body blockquote p:last-child { margin-bottom: 0; }

.pk-single__body table {
	width: 100%;
	margin: 2.4em 0;
	border-collapse: collapse;
	font-size: 15px;
}

.pk-single__body th,
.pk-single__body td { padding: 12px 14px; border: 1px solid var(--pk-line); text-align: left; }
.pk-single__body th { background: #f6f8f9; font-weight: 700; }
.pk-single__body strong { font-weight: 700; }

/* ---------- 記事下CTA ---------- */
.pk-cta {
	max-width: 760px;
	margin: 72px auto 0;
	padding: 36px 32px;
	border: 2px solid var(--pk-navy);
	border-radius: 10px;
	text-align: center;
}

.pk-cta__lead { margin: 0 0 10px; font-size: 20px; font-weight: 800; line-height: 1.5; }
.pk-cta__text { margin: 0 0 24px; font-size: 14px; line-height: 1.9; color: var(--pk-gray); }
.pk-cta__btns { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; }

.pk-cta__btn {
	display: inline-block;
	padding: 14px 34px;
	border: 1.5px solid var(--pk-navy);
	border-radius: 999px;
	color: var(--pk-navy);
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
}

.pk-cta__btn:hover { background: var(--pk-navy); color: #fff; }
.pk-cta__btn--primary { background: var(--pk-pink); border-color: var(--pk-pink); color: #fff; }
.pk-cta__btn--primary:hover { background: #d93e6b; border-color: #d93e6b; color: #fff; }

/* ---------- 前後の記事 ---------- */
.pk-adjacent {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	max-width: 760px;
	margin: 56px auto 0;
}

.pk-adjacent__item {
	display: block;
	padding: 18px 20px;
	border: 1px solid var(--pk-line);
	border-radius: 8px;
	color: inherit;
	text-decoration: none;
}

.pk-adjacent__item:hover { border-color: var(--pk-navy); }
.pk-adjacent__item--next { text-align: right; }

.pk-adjacent__label {
	display: block;
	margin-bottom: 6px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--pk-teal);
}

.pk-adjacent__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.6;
}

/* ---------- 関連記事 ---------- */
.pk-related { margin-top: 88px; }
.pk-related__title { margin: 0 0 32px; font-size: 22px; font-weight: 800; text-align: center; }
.pk-related__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.pk-single__back { margin-top: 64px; text-align: center; }

@media (max-width: 900px) {
	.pk-related__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
	.pk-single { padding: 0 20px 64px; }
	.pk-crumb { padding: 16px 0 24px; }
	.pk-single__title { font-size: 23px; }
	.pk-single__body { font-size: 15.5px; line-height: 1.95; }
	.pk-single__body h2 { font-size: 20px; }
	.pk-single__body h3 { font-size: 17px; }
	.pk-cta { padding: 28px 20px; }
	.pk-cta__lead { font-size: 17px; }
	.pk-cta__btns { flex-direction: column; }
	.pk-adjacent { grid-template-columns: 1fr; }
	.pk-adjacent__item--next { text-align: left; }
	.pk-related__grid { grid-template-columns: 1fr; gap: 28px; }
}

/* ---------- アニメーション抑制設定への配慮 ---------- */
@media (prefers-reduced-motion: reduce) {
	.pk-blog__track {
		scroll-behavior: auto;
	}
	.pk-blog__img {
		transition: none;
	}
}