@charset "UTF-8";
/* =========================================================
   やましろ内科クリニック 下層ページの枠組み
   （タイトル帯・パンくず・目次・ページ一覧・お知らせ／ブログ）
   本文の装飾は entry.css
   ========================================================= */

/* ---------- タイトル帯 ---------- */
.p-subhero {
	position: relative;
	overflow: hidden;
	padding: calc(var(--h-header) + 72px) 0 76px;
	background: #f4efe8 url(../img/mv-bg.webp) center / cover no-repeat;
}
.p-subhero__inner {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 56px;
	width: min(1200px, 100% - 80px);
	min-height: 150px;
	margin: 0 auto;
}
.p-subhero__body { flex: 1; min-width: 0; }
.p-subhero__label {
	display: inline-block;
	margin-bottom: 14px;
	padding: 1px 16px;
	border: 1px solid var(--c-gold);
	border-radius: 99px;
	background: rgba(255, 255, 255, .6);
	color: #8a6a4b;
	font-size: 13px;
	line-height: 1.8;
	letter-spacing: .1em;
}
.p-subhero__label + .p-subhero__title { margin-top: 0; }
.p-subhero__title {
	margin: 0;
	font-size: max(calc(40 * var(--u)), 30px);
	font-weight: 500;
	line-height: 1.45;
	letter-spacing: .12em;
	word-break: auto-phrase;
}
.p-subhero__en {
	margin-top: 10px;
	color: var(--c-gold);
	font-family: var(--f-en);
	font-size: max(calc(22 * var(--u)), 17px);
	line-height: 1.3;
	letter-spacing: .04em;
}
.p-subhero__mark {
	position: absolute;
	right: -20px;
	top: 50%;
	width: 340px;
	height: auto;
	translate: 0 -46%;
	opacity: .09;
	pointer-events: none;
}
.p-subhero__img { flex: none; width: 440px; margin: 0; }
.p-subhero__img img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 12px; }

/* ---------- パンくず ---------- */
.p-subbc { border-bottom: 1px solid #ebe6df; }
.c-breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	width: min(1200px, 100% - 80px);
	margin: 0 auto;
	padding: 14px 0;
	color: #8c877c;
	font-size: 12px;
	line-height: 1.6;
	letter-spacing: .06em;
}
.c-breadcrumb li + li::before { content: "/"; margin: 0 .9em; color: #c9c4bc; }
.c-breadcrumb a:hover { color: var(--c-brown); }
.c-breadcrumb [aria-current] { color: var(--c-text); }

/* ---------- 本文エリア ---------- */
.l-sub__body { width: min(880px, 100% - 80px); margin: 0 auto; padding: 72px 0 128px; }
.l-sub__body--wide { width: min(1100px, 100% - 80px); }

/* ---------- 横にはみ出す表 ---------- */
.c-entry .wp-block-table.is-scrollable::before {
	content: "← 横にスクロールできます →";
	position: sticky;
	left: 0;
	display: block;
	margin-bottom: 6px;
	color: #8c877c;
	font-size: 12px;
	letter-spacing: .06em;
	text-align: right;
}

/* ---------- 目次 ---------- */
.c-entry > .c-toc { margin-top: 48px; }
.c-entry > .c-toc + * { margin-top: 72px; }
.c-toc { border: 1px solid #e3ded6; border-radius: 8px; background: #fff; letter-spacing: .06em; }
.c-toc__head {
	position: relative;
	display: flex;
	align-items: baseline;
	gap: 14px;
	padding: 20px 64px 20px 30px;
	list-style: none;
	cursor: pointer;
}
.c-toc__head::-webkit-details-marker { display: none; }
.c-toc__en { color: var(--c-gold); font-family: var(--f-en); font-size: 16px; letter-spacing: .04em; }
.c-toc__title { font-size: 17px; font-weight: 700; }
.c-toc__toggle { position: absolute; right: 28px; top: 50%; width: 14px; height: 14px; translate: 0 -50%; }
.c-toc__toggle::before, .c-toc__toggle::after { content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 1.5px; margin-top: -.75px; background: var(--c-gold); transition: rotate .3s; }
.c-toc__toggle::after { rotate: 90deg; }
.c-toc details[open] .c-toc__toggle::after { rotate: 0deg; }
.c-toc__list { margin: 0 30px; padding: 4px 0 22px; border-top: 1px solid #efebe6; }
.c-toc__list > li { border-bottom: 1px dashed #e3ded6; }
.c-toc__list > li:last-child { border-bottom: 0; }
.c-toc__list a { display: flex; gap: 16px; padding: 12px 0; font-size: 15px; line-height: 1.7; }
.c-toc__list a:hover { color: #8a6a4b; }
.c-entry .c-toc a { color: inherit; text-decoration: none; }
.c-entry .c-toc a:hover { color: #8a6a4b; }
.c-toc__num { flex: none; width: 1.8em; color: var(--c-gold); font-family: var(--f-en); font-size: 16px; line-height: 1.6; }
.c-toc__sub { margin: -6px 0 10px calc(1.8em + 16px); }
.c-toc__sub a { position: relative; padding: 4px 0 4px 18px; font-size: 14px; color: #6b655b; }
.c-toc__sub a::before { content: ""; position: absolute; left: 0; top: 1.05em; width: 8px; height: 1px; background: var(--c-gold); }

/* ---------- ページ一覧（丸いボタン型） ---------- */
.c-plinks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.c-plinks__item {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	height: 100%;
	min-height: 62px;
	padding: 12px 18px 12px 26px;
	border: 1.5px solid var(--c-gold);
	border-radius: 32px;
	background: #fff;
	font-size: 14.5px;
	line-height: 1.5;
	letter-spacing: .06em;
	text-decoration: none !important;
	color: var(--c-text) !important;
	transition: background-color .3s;
	word-break: auto-phrase;
}
.c-plinks__item:hover { background: #fdf6ee; }
.c-plinks__item .c-arrow { width: 18px; height: 18px; }
.c-plinks-empty { padding: 16px; border: 1px dashed #d5a062; color: #8c877c; font-size: 13px; }

.p-plist { margin-top: 112px; scroll-margin-top: var(--h-header); }
.p-plist + .p-plist { margin-top: 88px; }
.p-plist__title {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	margin: 0 0 36px;
	font-size: 26px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: .1em;
	text-align: center;
}
.p-plist__en { color: var(--c-gold); font-family: var(--f-en); font-size: 17px; font-weight: 400; letter-spacing: .04em; }
.p-plist--related { padding-top: 72px; border-top: 1px solid #e3ded6; }
.p-plist--related .p-plist__title { font-size: 21px; }

/* ---------- お知らせ一覧 ---------- */
.p-newslist { border-top: 1px dashed #b9b3a8; }
.p-newslist li { border-bottom: 1px dashed #b9b3a8; }
.p-newslist a { display: grid; grid-template-columns: 130px minmax(0, 1fr) 18px; align-items: center; gap: 20px; padding: 26px 8px; font-size: 15px; line-height: 1.8; letter-spacing: .08em; }
.p-newslist time { font-size: 14px; letter-spacing: .04em; color: #6b655b; }
.p-newslist a:hover span { color: #8a6a4b; }
.p-newslist .c-arrow { width: 18px; height: 18px; }

/* ---------- ブログ一覧 ---------- */
.p-bloglist { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px 36px; }
.p-bloglist .c-bcard__img { height: auto; aspect-ratio: 3 / 2; border-radius: 6px; }
.c-bcard__img:empty { background: #f2e6d9 url(../img/logo-mark.svg) center / 72px no-repeat; }

.p-empty { padding: 48px 0; text-align: center; color: #6b655b; }

/* ---------- ページ送り ---------- */
.c-pager { margin-top: 72px; }
.c-pager .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.c-pager .page-numbers { display: flex; align-items: center; justify-content: center; min-width: 46px; height: 46px; padding: 0 14px; border: 1px solid #e3ded6; border-radius: 99px; background: #fff; font-size: 14px; letter-spacing: .04em; }
.c-pager .page-numbers.current { border-color: var(--c-brown); background: var(--c-brown); color: #fff; }
.c-pager .page-numbers.dots { border: 0; background: none; }
.c-pager a.page-numbers:hover { border-color: var(--c-gold); }

/* ---------- 記事 ---------- */
.p-post__head { margin-bottom: 48px; padding-bottom: 28px; border-bottom: 1px solid #e3ded6; }
.p-post__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; color: #6b655b; font-size: 14px; letter-spacing: .04em; }
.p-post__tag { padding: 0 12px; border-radius: 99px; background: var(--c-gold); color: #fff; font-size: 12px; font-weight: 700; line-height: 22px; }
.p-post__title { margin-top: 14px; font-size: 28px; font-weight: 500; line-height: 1.6; letter-spacing: .08em; word-break: auto-phrase; }
.p-post__thumb { margin: 0 0 48px; }
.p-post__thumb img { display: block; width: 100%; height: auto; border-radius: 8px; }
.p-post__nav { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 24px; margin-top: 96px; padding-top: 40px; border-top: 1px solid #e3ded6; }
.p-post__prev a, .p-post__next a { display: block; font-size: 14px; line-height: 1.6; }
.p-post__prev a:hover, .p-post__next a:hover { color: #8a6a4b; }
.p-post__nav small { display: block; margin-bottom: 4px; color: var(--c-gold); font-size: 12px; letter-spacing: .1em; }
.p-post__next { text-align: right; }
.p-post__nav span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.p-post__back .c-btn { width: auto; min-width: 240px; }

/* =========================================================
   1024〜1279px
   ========================================================= */
@media (min-width: 1024px) and (max-width: 1279px) {
	.p-subhero__img { width: 360px; }
	.c-plinks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.p-bloglist { gap: 48px 28px; }
}

/* =========================================================
   スマホ
   ========================================================= */
@media (max-width: 1023px) {
	.p-subhero { padding: calc(var(--h-header) + 34px) 0 40px; }
	.p-subhero__inner { display: block; width: auto; min-height: 0; padding: 0 calc(20 * var(--s)); }
	.p-subhero__label { margin-bottom: 10px; padding: 0 12px; font-size: 11px; }
	.p-subhero__title { font-size: max(calc(25 * var(--s)), 21px); line-height: 1.5; letter-spacing: .1em; }
	.p-subhero__en { margin-top: 6px; font-size: 15px; }
	.p-subhero__mark { right: -50px; width: 200px; translate: 0 -40%; }
	.p-subhero__img { width: 100%; margin-top: 24px; }
	.p-subhero__img img { border-radius: 8px; }

	.c-breadcrumb ol { width: auto; padding: 10px calc(20 * var(--s)); font-size: 11px; }
	.c-breadcrumb li + li::before { margin: 0 .6em; }

	.l-sub__body, .l-sub__body--wide { width: auto; padding: 40px calc(20 * var(--s)) 80px; }

	.c-entry > .c-toc { margin-top: 32px; }
	.c-toc__head { padding: 16px 52px 16px 18px; }
	.c-toc__en { font-size: 14px; }
	.c-toc__title { font-size: 15px; }
	.c-toc__toggle { right: 18px; }
	.c-toc__list { margin: 0 18px; padding-bottom: 14px; }
	.c-toc__list a { gap: 10px; padding: 10px 0; font-size: 14px; }
	.c-toc__num { font-size: 15px; }
	.c-toc__sub { margin-left: calc(1.8em + 10px); }
	.c-toc__sub a { font-size: 13px; }

	.c-plinks { grid-template-columns: 1fr; gap: 10px; }
	.c-plinks__item { min-height: 56px; padding: 10px 16px 10px 22px; font-size: 14px; }

	.p-plist { margin-top: 72px; }
	.p-plist + .p-plist { margin-top: 64px; }
	.p-plist__title { margin-bottom: 24px; font-size: 20px; }
	.p-plist__en { font-size: 15px; }
	.p-plist--related { padding-top: 48px; }
	.p-plist--related .p-plist__title { font-size: 18px; }

	.p-newslist a { grid-template-columns: minmax(0, 1fr) 18px; gap: 4px 14px; padding: 18px 2px; font-size: 14px; line-height: 1.7; }
	.p-newslist time { grid-column: 1 / -1; font-size: 13px; }

	.p-bloglist { grid-template-columns: 1fr; gap: 36px; }

	.c-pager { margin-top: 48px; }
	.c-pager .page-numbers { min-width: 40px; height: 40px; padding: 0 10px; font-size: 13px; }

	.p-post__head { margin-bottom: 32px; padding-bottom: 20px; }
	.p-post__meta { font-size: 13px; }
	.p-post__title { font-size: 20px; }
	.p-post__thumb { margin-bottom: 32px; }
	.p-post__nav { grid-template-columns: 1fr 1fr; gap: 20px 16px; margin-top: 64px; padding-top: 28px; }
	.p-post__back { grid-column: 1 / -1; grid-row: 2; text-align: center; }
	.p-post__back .c-btn { width: 100%; min-width: 0; }
}