@charset "UTF-8";
/* =======================================================
   中津まさデンタルクリニック ブログ一覧ページ
   カードグリッドデザイン
   ======================================================= */

@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@700;900&display=swap');

:root{
	--mc-teal:      #01939B;
	--mc-teal-light:#52C2D0;
	--mc-navy:      #03162F;
	--mc-gold:      #C8960C;
	--mc-rose:      #D97CA0;
	--mc-bg:        #F5F9FA;
	--mc-card-bg:   #FFFFFF;
	--mc-text:      #33454C;
	--mc-text-muted:#7C8D93;
}

.blog-archive,
.blog-archive *,
.blog-sidebar-wrap,
.blog-sidebar-wrap *{
	box-sizing: border-box;
}
.blog-archive,
.blog-sidebar-wrap{
	max-width: 100vw;
	overflow-x: hidden;
}

/* -------------------------------------------------------
   全体の背景・見出し
   ------------------------------------------------------- */

.blog-archive{
	background: var(--mc-bg);
	padding: 48px 0 64px;
}

.blog-archive__heading{
	max-width: 1100px;
	margin: 0 auto 8px;
	padding: 0 20px;
	font-family: "Zen Maru Gothic", "ヒラギノ角ゴ Pro W3", sans-serif;
	font-weight: 900;
	font-size: 28px;
	color: var(--mc-navy);
	letter-spacing: .04em;
}

.blog-archive__lead{
	max-width: 1100px;
	margin: 0 auto 32px;
	padding: 0 20px;
	color: var(--mc-text-muted);
	font-size: 14px;
}

/* サイトの波型（スキャロップ）モチーフを一覧の区切りにも使用 */
.blog-archive__wave{
	max-width: 1100px;
	margin: 0 auto 40px;
	padding: 0 20px;
}
.blog-archive__wave span{
	display: block;
	height: 18px;
	background-image: radial-gradient(circle at 9px 0, transparent 9px, var(--mc-teal-light) 9.5px);
	background-size: 18px 18px;
	background-repeat: repeat-x;
	background-position: bottom;
	opacity: .55;
}


/* -------------------------------------------------------
   カードグリッド
   ------------------------------------------------------- */

.blog-grid{
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 20px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
}

@media (max-width: 900px){
	.blog-grid{ grid-template-columns: repeat(2, 1fr); gap: 24px; }
}
@media (max-width: 600px){
	.blog-grid{ grid-template-columns: 1fr; gap: 20px; }
	.blog-archive__heading{ font-size: 22px; }
}

.blog-card{
	display: flex;
	flex-direction: column;
	background: var(--mc-card-bg);
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 2px 10px rgba(3,22,47,0.07);
	transition: transform .25s ease, box-shadow .25s ease;
	text-decoration: none;
	color: inherit;
}

.blog-card:hover,
.blog-card:focus-visible{
	transform: translateY(-6px);
	box-shadow: 0 16px 30px rgba(3,22,47,0.16);
}
.blog-card:focus-visible{
	outline: 3px solid var(--mc-teal);
	outline-offset: 2px;
}

/* サムネイル：画像サイズがバラバラでも同じ比率で揃える */
.blog-card__thumb{
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: linear-gradient(135deg, var(--mc-teal-light), var(--mc-teal));
}
.blog-card__thumb img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s ease;
}
.blog-card:hover .blog-card__thumb img{
	transform: scale(1.07);
}

/* サムネイル未設定時のプレースホルダー（歯のアイコン） */
.blog-card__thumb--empty{
	display: flex;
	align-items: center;
	justify-content: center;
}
.blog-card__thumb--empty svg{
	width: 48px;
	height: 48px;
	opacity: .85;
}

/* カテゴリバッジ：サムネイル左下に重ねる */
.blog-card__cat{
	position: absolute;
	left: 12px;
	bottom: 12px;
	display: inline-block;
	padding: 4px 12px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	color: #fff;
	letter-spacing: .03em;
	box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}
.blog-card__cat--0{ background: var(--mc-teal); }
.blog-card__cat--1{ background: var(--mc-gold); }
.blog-card__cat--2{ background: var(--mc-navy); }
.blog-card__cat--3{ background: var(--mc-rose); }

.blog-card__body{
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 18px 18px 20px;
}

.blog-card__date{
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: var(--mc-text-muted);
	margin-bottom: 8px;
}
.blog-card__date svg{ width: 13px; height: 13px; flex: none; }

.blog-card__title{
	font-family: "Zen Maru Gothic", "ヒラギノ角ゴ Pro W3", sans-serif;
	font-weight: 700;
	font-size: 17px;
	line-height: 1.5;
	color: var(--mc-navy);
	margin: 0 0 10px;

	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.blog-card__excerpt{
	font-size: 13px;
	line-height: 1.8;
	color: var(--mc-text);
	margin: 0 0 14px;
	flex: 1;

	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.blog-card__more{
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 13px;
	font-weight: 700;
	color: var(--mc-teal);
}
.blog-card__more svg{
	width: 14px;
	height: 14px;
	transition: transform .2s ease;
}
.blog-card:hover .blog-card__more svg{
	transform: translateX(4px);
}


/* -------------------------------------------------------
   サイドバー（新着記事・検索・アーカイブ・カテゴリー・画像など）
   register_sidebar() が各ウィジェットを
   <div class="sidebar-wrapper"><h5 class="sidebar-title">…</h5>…</div>
   で自動的に包む仕様を利用してスタイルを当てる。
   ------------------------------------------------------- */

.blog-sidebar-wrap{
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 20px 60px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	align-items: start;
}
@media (max-width: 900px){
	.blog-sidebar-wrap{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px){
	.blog-sidebar-wrap{ grid-template-columns: 1fr; }
}

.blog-sidebar-wrap .sidebar-wrapper{
	background: var(--mc-card-bg);
	border-radius: 16px;
	padding: 20px 22px;
	box-shadow: 0 2px 10px rgba(3,22,47,0.06);
}

.blog-sidebar-wrap .sidebar-title{
	font-family: "Zen Maru Gothic", "ヒラギノ角ゴ Pro W3", sans-serif;
	font-size: 15px;
	font-weight: 700;
	color: var(--mc-navy);
	margin: 0 0 14px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--mc-teal-light);
}

.blog-sidebar-wrap ul{
	list-style: none;
	margin: 0;
	padding: 0;
}
.blog-sidebar-wrap ul li{
	list-style: none;
	border-bottom: 1px dashed #e2e8ea;
}
.blog-sidebar-wrap ul li:last-child{
	border-bottom: none;
}
.blog-sidebar-wrap ul li a{
	display: block;
	padding: 9px 2px;
	font-size: 13px;
	color: var(--mc-text);
	text-decoration: none;
	transition: color .2s ease, padding-left .2s ease;
}
.blog-sidebar-wrap ul li a:hover{
	color: var(--mc-teal);
	padding-left: 6px;
}

/* 検索ウィジェット */
.blog-sidebar-wrap .search-form,
.blog-sidebar-wrap form[role="search"]{
	display: flex;
	gap: 6px;
}
.blog-sidebar-wrap input[type="search"],
.blog-sidebar-wrap input[type="text"]{
	flex: 1;
	min-width: 0;
	border: 1px solid #dbe4e6;
	border-radius: 999px;
	padding: 8px 14px;
	font-size: 13px;
}
.blog-sidebar-wrap input[type="submit"]{
	border: none;
	background: var(--mc-teal);
	color: #fff;
	border-radius: 999px;
	padding: 8px 16px;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	transition: background .2s ease;
}
.blog-sidebar-wrap input[type="submit"]:hover{
	background: var(--mc-navy);
}

/* 画像ウィジェット（スタッフ写真など）：カードいっぱいに収める */
.blog-sidebar-wrap img{
	display: block;
	width: 100%;
	height: auto;
	border-radius: 12px;
	margin: 4px 0;
}

/* カテゴリーの年別・カテゴリー一覧をピル風に */
.blog-sidebar-wrap .sidebar-wrapper ul li a{
	display: flex;
	justify-content: space-between;
}


/* -------------------------------------------------------
   ページネーション
   ------------------------------------------------------- */

.blog-archive .navigation{
	max-width: 1100px;
	margin: 48px auto 0;
	padding: 0 20px;
}
.blog-archive .nav-links{
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}
.blog-archive .page-numbers{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 10px;
	border-radius: 999px;
	background: #fff;
	color: var(--mc-navy);
	text-decoration: none;
	font-size: 14px;
	font-weight: 700;
	box-shadow: 0 1px 4px rgba(3,22,47,0.08);
	transition: background .2s ease, color .2s ease;
}
.blog-archive .page-numbers.current{
	background: var(--mc-teal);
	color: #fff;
}
.blog-archive .page-numbers:hover:not(.current){
	background: var(--mc-teal-light);
	color: #fff;
}