/* BLOG archive and article pages */
html {
	scrollbar-width: none;
}

html::-webkit-scrollbar {
	width: 0;
	height: 0;
}

.blog-archive,
.blog-single {
	--blog-navy: #0d3155;
	--blog-blue: #087caf;
	--blog-line: #d9d5c9;
	color: #172435;
}
.blog-archive { --blog-paper: #fbfaf6; background: var(--blog-paper); }
/* 2026-10-03 ユーザー指示：記事（BLOG詳細）ページの背景色を#faf9f6へ変更。一覧（.blog-archive）は従来どおり。 */
.blog-single { --blog-paper: #faf9f6; background: var(--blog-paper); }

.blog-hero {
	position: relative;
	min-height: clamp(350px, 33vw, 440px);
	display: grid;
	place-items: center;
	overflow: hidden;
	isolation: isolate;
	background: #e8f2f6;
}

.blog-hero__world,
.blog-single-visual span {
	position: absolute;
	inset: 0;
	background: url('../../images/column-world.webp') center 44% / cover no-repeat;
}

.blog-hero__world::after,
.blog-single-visual span::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(255,255,255,.78), rgba(255,255,255,.62) 48%, rgba(255,255,255,.77)), linear-gradient(0deg, rgba(251,250,246,.98), transparent 35%, rgba(255,255,255,.18));
}

.blog-hero__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 3rem;
}

.blog-hero__copy { text-align: center; justify-self: center; }
.blog-hero__copy h1 {
	font-family: var(--font-logo);
	font-size: clamp(4.4rem, 9vw, 8rem);
	font-weight: 500;
	line-height: .85;
	letter-spacing: .025em;
	color: var(--blog-navy);
}
.blog-hero__kicker {
	margin-bottom: .9rem;
	font-family: var(--font-serif);
	font-size: clamp(1rem, 1.4vw, 1.25rem);
	letter-spacing: .28em;
	color: var(--blog-navy);
}
.blog-hero__copy > p:last-child {
	margin-top: 1.6rem;
	font-family: var(--font-serif);
	font-size: clamp(.95rem, 1.2vw, 1.08rem);
	letter-spacing: .12em;
}
.blog-hero__words {
	font-family: var(--font-logo);
	font-size: .84rem;
	line-height: 2;
	letter-spacing: .15em;
	color: rgba(13,49,85,.66);
}

.blog-archive__breadcrumb,
.blog-single__breadcrumb { padding-top: 1rem; padding-bottom: 1rem; }
.blog-archive__breadcrumb .breadcrumb,
.blog-single__breadcrumb .breadcrumb { margin: 0; }

.blog-category-nav {
	border-block: 1px solid var(--blog-line);
	background: rgba(251,250,246,.92);
}
.blog-category-nav__scroll {
	display: flex;
	align-items: stretch;
	justify-content: center;
	min-height: 62px;
	overflow-x: auto;
	scrollbar-width: none;
}
.blog-category-nav__scroll::-webkit-scrollbar { display: none; }
.blog-category-nav a {
	position: relative;
	display: grid;
	place-items: center;
	min-width: 112px;
	padding: .9rem 1.35rem;
	font-family: var(--font-logo);
	font-size: .86rem;
	letter-spacing: .04em;
	white-space: nowrap;
	color: #334458;
}
.blog-category-nav a::after {
	content: '';
	position: absolute;
	left: 20%; right: 20%; bottom: -1px;
	height: 2px;
	background: var(--blog-blue);
	transform: scaleX(0);
	transition: transform .25s ease;
}
.blog-category-nav a:hover::after,
.blog-category-nav a:focus-visible::after,
.blog-category-nav a.is-active::after { transform: scaleX(1); }
.blog-category-nav a.is-active { color: var(--blog-blue); font-weight: 700; }

.blog-archive__body { padding-top: clamp(3.5rem, 7vw, 6rem); padding-bottom: clamp(5rem, 9vw, 8rem); }
.blog-archive__body {
	transition: opacity .22s ease, transform .22s ease;
}
.blog-archive__body.is-loading {
	opacity: .35;
	transform: translateY(5px);
	pointer-events: none;
}
.blog-section-heading {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding-bottom: .8rem;
	border-bottom: 1px solid var(--blog-line);
}
.blog-section-heading h2 {
	font-family: var(--font-logo);
	font-size: clamp(1.45rem, 2.2vw, 2rem);
	font-weight: 500;
	letter-spacing: .04em;
	color: #18283b;
}
.blog-section-heading span { font-size: .75rem; color: #6c7480; letter-spacing: .08em; }

.blog-featured__link {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(320px, .85fr);
	gap: clamp(2rem, 5vw, 5rem);
	align-items: center;
	padding: clamp(1.75rem, 4vw, 3.6rem) 0;
}
.blog-featured__media,
.blog-card__media,
.blog-article__eyecatch,
.blog-related article > a > div { overflow: hidden; background: #d9e6ea; }
.blog-featured__media { aspect-ratio: 16 / 9; }
.blog-featured__media img,
.blog-card__media img,
.blog-article__eyecatch img,
.blog-related article img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s ease; }
.blog-card__meta { display: flex; align-items: center; gap: .8rem; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .04em; color: #596576; }
.blog-category { display: inline-flex; align-items: center; min-height: 25px; padding: .25rem .65rem; background: #e5f3f7; color: #075d7f; font-family: var(--font-body); font-weight: 700; letter-spacing: .06em; }
.blog-featured__content h3 { margin-top: 1rem; font-family: var(--font-serif); font-size: clamp(1.7rem, 3vw, 2.65rem); font-weight: 500; line-height: 1.5; color: #16293e; }
.blog-featured__content p { margin-top: 1.25rem; color: #59616d; line-height: 1.9; }
.blog-read-more { display: inline-flex; gap: .7rem; align-items: center; margin-top: 1.4rem; padding-bottom: .25rem; border-bottom: 1px solid currentColor; color: #075f8c; font-family: var(--font-logo); font-size: .78rem; font-weight: 600; letter-spacing: .12em; }
.blog-read-more i { font-style: normal; transition: transform .25s ease; }
.blog-featured__link:hover .blog-featured__media img,
.blog-featured__link:focus-visible .blog-featured__media img,
.blog-card a:hover .blog-card__media img,
.blog-card a:focus-visible .blog-card__media img { transform: scale(1.035); }
.blog-featured__link:hover .blog-read-more i,
.blog-card a:hover .blog-read-more i { transform: translateX(5px); }

.blog-pickup-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 320px); gap: clamp(2.5rem, 5vw, 5rem); align-items: start; }
.blog-featured__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.25rem, 2.5vw, 2rem); padding-top: 2rem; }
.blog-featured__grid .blog-card__media { aspect-ratio: 16 / 10; }
.blog-featured__grid .blog-card h3 { font-size: clamp(1.05rem, 1.45vw, 1.35rem); }
.blog-featured__grid .blog-card p { display: none; }
.blog-discovery { display: grid; gap: 1rem; padding-top: 3.4rem; }
.blog-discovery__title { font-family: var(--font-serif); font-size: 1.15rem; font-weight: 600; letter-spacing: .06em; color: var(--blog-navy); }
.blog-discovery .blog-search { border: 1px solid var(--blog-line); background: #fff; }
.blog-discovery .blog-search input { padding: .9rem 1rem; font-size: .9rem; }
.blog-discovery .blog-search button { width: 48px; background: var(--blog-navy); color: #fff; }
.blog-discovery__tags { padding-top: 1.25rem; border-top: 1px solid var(--blog-line); }
.blog-discovery__tags > div { display: flex; flex-wrap: wrap; gap: .55rem; }
.blog-discovery__tags a { padding: .55rem .8rem; border-radius: 4px; background: #f0efeb; color: #35475a; font-size: .72rem; transition: color .2s ease, background-color .2s ease; }
.blog-discovery__tags a:hover,
.blog-discovery__tags a:focus-visible { background: var(--blog-navy); color: #fff; }
.blog-discovery__tags a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

.blog-latest { margin-top: clamp(3.5rem, 7vw, 6.5rem); }
.blog-category-nav--latest { margin-bottom: clamp(2.75rem, 5vw, 4.5rem); border-inline: 0; }
.blog-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 3vw, 2.75rem); padding-top: 2.5rem; }
.blog-card a { display: flex; flex-direction: column; height: 100%; }
.blog-card__media { aspect-ratio: 16 / 9; margin-bottom: 1rem; }
.blog-card h3 { margin-top: .8rem; font-family: var(--font-serif); font-size: clamp(1.15rem, 1.6vw, 1.5rem); font-weight: 600; line-height: 1.55; color: #172a3e; }
.blog-card p { margin-top: .75rem; color: #646c77; font-size: .9rem; line-height: 1.75; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.blog-card .blog-read-more { margin-top: auto; padding-top: 1.1rem; align-self: flex-start; }
.blog-empty { padding: 5rem 1rem; text-align: center; }
.blog-empty h2 { font-family: var(--font-serif); font-size: 1.6rem; font-weight: 500; }
.blog-empty p { margin-top: .8rem; color: #66707c; }
.blog-archive .navigation.pagination { margin-top: 4rem; }
.blog-archive .nav-links { display: flex; justify-content: center; gap: .45rem; }
.blog-archive .page-numbers { display: grid; place-items: center; min-width: 38px; height: 38px; border: 1px solid var(--blog-line); color: #465466; font-size: .82rem; }
.blog-archive .page-numbers.current { background: var(--blog-navy); border-color: var(--blog-navy); color: #fff; }

/* Single */
.blog-single-visual { position: relative; height: clamp(150px, 17vw, 220px); overflow: hidden; }
.blog-single-visual span::after { background: linear-gradient(90deg, rgba(255,255,255,.35), rgba(255,255,255,.55)), linear-gradient(0deg, rgba(251,250,246,.7), transparent 55%); }
.blog-article-header { max-width: 980px; padding-top: clamp(2rem, 3.5vw, 3.25rem); padding-bottom: clamp(1.75rem, 3vw, 2.5rem); }
.blog-article-header h1 { max-width: 24ch; margin-top: 1rem; font-family: var(--font-serif); font-size: clamp(2rem, 4.2vw, 3.6rem); font-weight: 600; line-height: 1.45; color: #14283d; }
.blog-article-header__foot { display: flex; align-items: center; gap: 1rem; margin-top: 1.5rem; }
.blog-author { display: inline-flex; align-items: center; gap: .65rem; color: #435064; font-size: .82rem; }
.blog-author img { width: 34px; height: 34px; border-radius: 50%; }
.blog-reviewer { color: #667282; font-size: .78rem; }
.share-links { display: flex; align-items: center; gap: .8rem; }
.share-links .eyebrow { color: #667282; }
.share-links a { display: grid; place-items: center; min-width: 34px; height: 34px; padding-inline: .35rem; border: 1px solid #cad1d5; color: #243b53; font-size: .68rem; }

.blog-single__layout { max-width: 980px; padding-bottom: clamp(4rem, 8vw, 7rem); }
.blog-article { min-width: 0; }
.blog-article__eyecatch { aspect-ratio: 16 / 9; margin: 0 0 2.5rem; }
.blog-toc--inline { margin: 2.5rem 0 3.5rem; padding: clamp(1.5rem, 3vw, 2.25rem); border: 1px solid var(--blog-line); background: rgba(255,255,255,.58); }
.blog-toc summary,
.blog-sidebar-toc summary { position: relative; padding-right: 2.25rem; list-style: none; cursor: pointer; }
.blog-toc summary::-webkit-details-marker,
.blog-sidebar-toc summary::-webkit-details-marker { display: none; }
.blog-toc summary::after,
.blog-sidebar-toc summary::after { content: '−'; position: absolute; top: 50%; right: .15rem; translate: 0 -50%; font-family: var(--font-display); font-size: 1.15rem; font-weight: 400; color: var(--blog-blue); }
.blog-toc:not([open]) summary::after,
.blog-sidebar-toc:not([open]) summary::after { content: '+'; }
.blog-toc--inline > summary { font-family: var(--font-serif); font-size: 1.35rem; color: var(--blog-navy); }
.blog-toc--inline[open] > summary { margin-bottom: 1rem; }
.blog-toc summary:focus-visible,
.blog-sidebar-toc summary:focus-visible { border-radius: 2px; outline: 2px solid var(--color-focus); outline-offset: 4px; }
.blog-toc ol { display: grid; gap: .6rem; }
.blog-toc a { display: flex; gap: .9rem; align-items: baseline; color: #31485f; font-size: .9rem; line-height: 1.55; }
.blog-toc a > span { flex: 0 0 auto; font-family: var(--font-mono); color: var(--blog-blue); font-size: .72rem; }
.blog-toc__h3 { padding-left: 2rem; }
.blog-toc__h3 a { color: #5b6876; font-size: .82rem; }

/* 2026-10-02 開閉式TOC：+/-表示・クリック開閉は既存の[open]/:not([open])セレクタ（上記）が
   そのまま機能する（ネイティブdetails/summary、JS不要）。ここではJS読み込み時だけ、
   開閉の高さを滑らかにするための上書き（is-animatedはblog.jsが付与）。 */
.blog-toc .blog-toc__panel { overflow: hidden; }
.blog-toc.is-animated .blog-toc__panel {
	display: block;
	max-height: 0;
	visibility: hidden;
	transition: max-height .2s ease, visibility 0s linear .2s;
}
.blog-toc.is-animated[open] .blog-toc__panel {
	max-height: var(--toc-panel-height, 640px);
	visibility: visible;
	transition: max-height .2s ease, visibility 0s linear;
}
@media (prefers-reduced-motion: reduce) {
	.blog-toc.is-animated .blog-toc__panel { transition: none; }
}

/* 2026-10-02 左右吹き出し：既存libre_memberを話者として再利用する[libre_balloon]／libre/balloonブロック。
   2026-10-03 背景色をメンバー既定色／ブロック個別指定で変えられるよう、CSS変数化
   （PHP側が.libre-balloonへ style="--libre-balloon-bg:#xxxxxx"を出力。未指定時は#f8f8f6）。
   2026-10-03 レイアウト変更：アイコン＋名前を縦積みの列にし、吹き出しをその横（leftなら右、
   rightなら左）に配置する形へ変更。吹き出しの最大幅はコンテナ依存のパーセンテージに頼らず
   px固定の上限（520px）を必ず持たせ、祖先要素の幅が不定な状況でも暴走して全幅化しないようにする。 */
.blog-single .blog-article__body .libre-balloon { display: flex; align-items: flex-start; gap: 14px; margin: 1.75rem 0; max-width: 100%; }
.blog-single .blog-article__body .libre-balloon--right { flex-direction: row-reverse; }
.blog-single .blog-article__body .libre-balloon__person { display: flex; flex-direction: column; align-items: center; gap: .3rem; flex: 0 0 auto; width: 60px; }
.blog-single .blog-article__body .libre-balloon__avatar { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.blog-single .blog-article__body .libre-balloon__avatar--empty { display: grid; place-items: center; background: #dceaf0; font-family: var(--font-serif); font-size: 1.4rem; color: var(--blog-navy); }
.blog-single .blog-article__body .libre-balloon__name { max-width: 100%; font-family: var(--font-serif); font-size: .74rem; font-weight: 600; line-height: 1.3; color: var(--blog-navy); text-align: center; overflow-wrap: anywhere; }
.blog-single .blog-article__body .libre-balloon__bubble {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	max-width: 520px;
	margin-top: .3rem;
	padding: 1.1rem 1.35rem;
	border: 1px solid #dfe3da;
	border-radius: 16px;
	background: var(--libre-balloon-bg, #f8f8f6);
	line-height: 1.8;
	font-size: .95rem;
	color: #2c3b4a;
	overflow-wrap: anywhere;
	box-sizing: border-box;
}
.blog-single .blog-article__body .libre-balloon__bubble > :first-child { margin-top: 0; }
.blog-single .blog-article__body .libre-balloon__bubble > :last-child { margin-bottom: 0; }
.blog-single .blog-article__body .libre-balloon__bubble::before {
	content: '';
	position: absolute;
	top: 16px;
	width: 14px;
	height: 14px;
	background: var(--libre-balloon-bg, #f8f8f6);
	transform: rotate(45deg);
}
.blog-single .blog-article__body .libre-balloon--left .libre-balloon__bubble::before {
	left: -7px;
	border-inline-start: 1px solid #dfe3da;
	border-block-end: 1px solid #dfe3da;
}
.blog-single .blog-article__body .libre-balloon--right .libre-balloon__bubble::before {
	right: -7px;
	border-inline-end: 1px solid #dfe3da;
	border-block-end: 1px solid #dfe3da;
}
@media (max-width: 767px) {
	.blog-single .blog-article__body .libre-balloon { gap: 10px; }
	.blog-single .blog-article__body .libre-balloon__person { width: 50px; }
	.blog-single .blog-article__body .libre-balloon__name { font-size: .68rem; }
	.blog-single .blog-article__body .libre-balloon__avatar,
	.blog-single .blog-article__body .libre-balloon__avatar--empty { width: 50px; height: 50px; font-size: 1.15rem; }
	.blog-single .blog-article__body .libre-balloon__bubble { max-width: min(100%, 460px); padding: .95rem 1.1rem; font-size: .92rem; }
}

.blog-single .blog-article__body {
	--libre-section-label: 'SECTION';
	max-width: 820px;
	margin-inline: auto;
	counter-reset: libre-article-section;
	color: #26384a;
	font-size: clamp(1rem, 1.2vw, 1.08rem);
	line-height: 1.95;
	overflow-wrap: anywhere;
}
.blog-single .blog-article__body > * + * { margin-top: 1.65rem; }
.blog-single .blog-article__body p { margin-bottom: 0; }
.blog-single .blog-article__body p + p { margin-top: 1.25rem; }

/* Editorial section heading: numbering and label are generated without changing the H2 markup. */
.blog-single .blog-article__body h2 {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 5rem;
	margin-top: clamp(5rem, 9vw, 6.75rem);
	padding: .15rem 0 1.35rem clamp(4.75rem, 8vw, 6.25rem);
	border-bottom: 1px solid color-mix(in srgb, var(--blog-blue) 34%, transparent);
	background: radial-gradient(circle, var(--blog-blue) 0 4px, transparent 4.5px) right bottom / 9px 9px no-repeat;
	font-family: var(--font-serif);
	font-size: clamp(1.9rem, 3vw, 2.15rem);
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: .015em;
	color: #142d48;
	counter-increment: libre-article-section;
	scroll-margin-top: calc(var(--header-height, 96px) + 2rem);
}
.blog-single .blog-article__body h2::before {
	content: counter(libre-article-section, decimal-leading-zero);
	position: absolute;
	top: .1rem;
	left: 0;
	font-family: var(--font-logo);
	font-size: clamp(2.6rem, 4.8vw, 3.75rem);
	font-weight: 400;
	line-height: 1;
	letter-spacing: .02em;
	color: color-mix(in srgb, var(--blog-blue) 48%, white);
}
.blog-single .blog-article__body h2::after {
	content: var(--libre-section-label);
	order: -1;
	margin-bottom: .45rem;
	font-family: var(--font-display);
	font-size: .7rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .2em;
	color: var(--blog-blue);
}
.blog-single .blog-article__body h3 {
	margin-top: clamp(3.25rem, 6vw, 4.25rem);
	padding: .2rem 0 .2rem 1.25rem;
	border-left: 4px solid var(--blog-blue);
	font-family: var(--font-serif);
	font-size: clamp(1.45rem, 2.25vw, 1.65rem);
	font-weight: 600;
	line-height: 1.55;
	letter-spacing: .01em;
	color: #17324e;
	scroll-margin-top: calc(var(--header-height, 96px) + 2rem);
}
.blog-single .blog-article__body h4 {
	display: flex;
	align-items: flex-start;
	gap: .8rem;
	margin-top: clamp(2.5rem, 4.5vw, 3.25rem);
	font-family: var(--font-serif);
	font-size: clamp(1.18rem, 1.8vw, 1.35rem);
	font-weight: 600;
	line-height: 1.6;
	color: #203a53;
	scroll-margin-top: calc(var(--header-height, 96px) + 2rem);
}
.blog-single .blog-article__body h4::before {
	content: '';
	flex: 0 0 2rem;
	margin-top: .78em;
	border-top: 2px solid var(--blog-blue);
}
.blog-single .blog-article__body :is(h2, h3, h4) + * { margin-top: clamp(1.65rem, 3.5vw, 2.5rem); }

.blog-single .blog-article__body :is(ul, ol) {
	display: grid;
	gap: .65rem;
	padding-left: 1.55rem;
}
.blog-single .blog-article__body ul > li::marker { color: var(--blog-blue); font-size: .85em; }
.blog-single .blog-article__body ol > li::marker { color: var(--blog-blue); font-family: var(--font-mono); font-weight: 700; }
.blog-single .blog-article__body li > :is(ul, ol) { margin-top: .65rem; }

.blog-single .blog-article__body blockquote {
	position: relative;
	margin-inline: 0;
	padding: 2.4rem clamp(1.4rem, 4vw, 2.4rem) 1.75rem;
	border: 0;
	background: #f2f4f5;
	color: #425568;
}
.blog-single .blog-article__body blockquote::before {
	content: '\201C';
	position: absolute;
	top: .35rem;
	left: 1.1rem;
	font-family: Georgia, serif;
	font-size: 3rem;
	line-height: 1;
	color: color-mix(in srgb, var(--blog-blue) 42%, white);
}
.blog-single .blog-article__body blockquote > :first-child { margin-top: 0; }
.blog-single .blog-article__body blockquote cite {
	display: block;
	margin-top: 1rem;
	color: #687481;
	font-size: .82rem;
	font-style: normal;
}

.blog-single .blog-article__body :is(.libre-point, .libre-note, .libre-warning) {
	position: relative;
	margin-block: clamp(2.5rem, 5vw, 3.5rem);
	padding: 2.9rem clamp(1.25rem, 4vw, 2rem) 1.6rem;
	border: 1px solid #cfe4ec;
	border-radius: 8px;
	background: #f1f8fb;
}
.blog-single .blog-article__body :is(.libre-point, .libre-note, .libre-warning)::before {
	position: absolute;
	top: 1rem;
	left: clamp(1.25rem, 4vw, 2rem);
	font-family: var(--font-display);
	font-size: .75rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .16em;
	color: var(--blog-blue);
}
.blog-single .blog-article__body .libre-point::before { content: 'POINT'; }
.blog-single .blog-article__body .libre-note::before { content: 'NOTE'; }
.blog-single .blog-article__body .libre-warning {
	border-color: #efd7d5;
	background: #fff4f3;
}
.blog-single .blog-article__body .libre-warning::before { content: '\26A0  注意'; color: #a94d48; }
.blog-single .blog-article__body :is(.libre-point, .libre-note, .libre-warning) > :first-child { margin-top: 0; }
.blog-single .blog-article__body :is(.libre-point, .libre-note, .libre-warning) > :last-child { margin-bottom: 0; }

.blog-single .blog-article__body :is(figure, .wp-block-image) { max-width: 100%; }
.blog-single .blog-article__body img {
	display: block;
	max-width: 100%;
	height: auto;
	margin-inline: auto;
	border-radius: 6px;
}
.blog-single .blog-article__body :is(figcaption, .wp-element-caption, .wp-block-image figcaption) {
	margin-top: .55rem;
	color: #707b86;
	font-size: .78rem;
	line-height: 1.65;
	text-align: center;
}
.blog-single .blog-article__body a {
	color: #066e9b;
	text-decoration-line: underline;
	text-decoration-color: color-mix(in srgb, currentColor 42%, transparent);
	text-decoration-thickness: 1px;
	text-underline-offset: .22em;
	transition: color .18s ease, text-decoration-color .18s ease;
}
.blog-single .blog-article__body a:hover { color: #034e72; text-decoration-color: currentColor; }
.blog-single .blog-article__body a:focus-visible { border-radius: 2px; outline: 2px solid var(--color-focus); outline-offset: 3px; }
/* 2026-10-02 「この記事の結論」BOX改善（CSSのみ。検出・変換ロジック／post_contentは無変更）。
   「記事を開いて最初に読めば概要が分かる」要点BOXとして、タイトル／本文／余白の階層を
   はっきりさせる。原色・警告色・強い影は使わず、Libre BLOGの白〜アイボリー×ネイビーの
   世界観（既存の--blog-navy/--blog-blue）のまま。 */
.libre-article-conclusion {
	margin: clamp(2rem, 5vw, 3rem) 0;
	padding: clamp(1.25rem, 3vw, 2.25rem);
	border: 1px solid #d8ddd6;
	border-left: 3px solid var(--blog-navy);
	border-radius: 14px;
	background: #f7f8f6;
}
.libre-article-conclusion__title {
	display: flex;
	align-items: center;
	gap: .6rem;
	margin: 0 0 1.1rem !important;
	padding-bottom: .85rem;
	border-bottom: 1px solid #dde2db;
	font-family: var(--font-serif);
	font-size: clamp(1.1rem, 2vw, 1.3rem);
	font-weight: 600;
	color: var(--blog-navy);
}
/* チェックのアイコンは装飾のみ（情報はテキストの「この記事の結論」側で担保）。 */
.libre-article-conclusion__title::before {
	content: '✓';
	display: inline-grid;
	place-items: center;
	flex: 0 0 auto;
	width: 1.5em;
	height: 1.5em;
	border-radius: 50%;
	background: var(--blog-navy);
	color: #fff;
	font-size: .62em;
	font-weight: 700;
}
.libre-article-conclusion ul,
.libre-article-conclusion ol { display: grid; gap: .7rem; margin: 0; padding: 0; list-style: none; }
.libre-article-conclusion li { position: relative; padding-left: 1.6rem; line-height: 1.8; }
.libre-article-conclusion li::before { content: '✓'; position: absolute; left: 0; top: .1em; color: var(--blog-blue); font-weight: 700; }
@media (max-width: 767px) {
	.libre-article-conclusion { padding: clamp(1.1rem, 5vw, 1.5rem); }
	.libre-article-conclusion__title { font-size: 1.05rem; }
}
.blog-single .blog-article__body .libre-faq-heading { --libre-section-label: 'FAQ'; }
.blog-single .blog-article__body .libre-faq-question { margin-top: 1.25rem; padding: 1.2rem 1.25rem 1.2rem 3.5rem; border: 1px solid #d6dde0; border-bottom: 0; background: #f8f9f7; }
.blog-single .blog-article__body .libre-faq-question::before { content: 'Q.'; position: absolute; left: 1.15rem; top: 1.05rem; color: var(--blog-blue); font-family: var(--font-serif); font-size: 1.25rem; }
.blog-single .blog-article__body .libre-faq-answer { margin-top: 0; padding: 1.25rem 1.25rem 1.25rem 3.5rem; border-inline: 1px solid #d6dde0; background: #fff; }
.blog-single .blog-article__body .libre-faq-answer:last-of-type { border-bottom: 1px solid #d6dde0; }
.blog-article__tags { display: flex; flex-wrap: wrap; gap: .65rem; max-width: 820px; margin: 3.5rem auto 0; padding-top: 1.5rem; border-top: 1px solid var(--blog-line); }
.blog-article__tags a { color: #526273; font-size: .8rem; }
.blog-article__share { display: flex; justify-content: flex-end; max-width: 820px; margin: 3.5rem auto 0; padding-top: 1.5rem; border-top: 1px solid var(--blog-line); }
.blog-article__share .share-links { margin: 0; padding: 0; border: 0; }

.libre-author-card { max-width: 820px; margin: clamp(3.5rem, 7vw, 5rem) auto 0; padding: clamp(2rem, 4vw, 3rem); border: 1px solid #e1ded5; border-radius: 12px; background: #f5f5f3; }
.libre-author-card__label { margin-bottom: 1.5rem; font-family: var(--font-serif); font-size: 1rem; font-weight: 600; letter-spacing: .08em; color: var(--blog-navy); }
.libre-author-card__header { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.libre-author-card__person { display: flex; align-items: center; gap: 1.1rem; min-width: 0; }
.libre-author-card__avatar { flex: 0 0 auto; width: 72px; height: 72px; border-radius: 50%; object-fit: cover; }
.libre-author-card__avatar--empty { display: grid; place-items: center; background: #dceaf0; font-family: var(--font-serif); font-size: 1.75rem; color: var(--blog-navy); }
.libre-author-card__info { display: grid; gap: .25rem; min-width: 0; }
.libre-author-card__name { overflow-wrap: anywhere; font-family: var(--font-serif); font-size: 1.4rem; line-height: 1.35; color: #142d48; }
.libre-author-card__position { font-size: .8rem; color: #667282; }
.libre-author-card__expertise { font-size: .74rem; color: #76818d; }
.libre-author-card__bio { margin-top: 1.6rem; color: #425366; font-size: .92rem; line-height: 1.85; overflow-wrap: anywhere; }
.libre-author-card__link { display: inline-flex; align-items: center; justify-content: center; gap: .8rem; flex: 0 0 auto; min-height: 46px; padding: .75rem 1.1rem; border: 1px solid var(--blog-navy); border-radius: 999px; color: var(--blog-navy); font-size: .78rem; transition: color .25s ease, background-color .25s ease; }
.libre-author-card__link i { font-style: normal; transition: transform .25s ease; }
.libre-author-card__link:hover,
.libre-author-card__link:focus-visible { background: var(--blog-navy); color: #fff; }
.libre-author-card__link:hover i,
.libre-author-card__link:focus-visible i { transform: translateX(3px); }
.libre-author-card__link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.libre-author-card__socials { display: flex; flex-wrap: wrap; gap: .55rem 1rem; margin-top: 1.25rem; }
.libre-author-card__socials a { color: var(--blog-blue); font-family: var(--font-logo); font-size: .75rem; text-decoration: underline; text-underline-offset: .25em; }

/* Member article archive */
.blog-member-hero { min-height: auto; padding: clamp(2.5rem, 6vw, 5rem) 0; place-items: stretch; }
.blog-member-hero__inner { position: relative; z-index: 1; }
.blog-member-hero__inner .breadcrumb { margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.blog-member-profile { display: flex; align-items: center; gap: clamp(1.5rem, 3vw, 2.5rem); }
.blog-member-profile__avatar { flex: 0 0 auto; width: clamp(96px, 12vw, 144px); height: clamp(96px, 12vw, 144px); border-radius: 50%; object-fit: cover; }
.blog-member-profile__avatar--empty { display: grid; place-items: center; background: #dceaf0; font-family: var(--font-serif); font-size: clamp(2rem, 4vw, 3.5rem); color: var(--blog-navy); }
.blog-member-profile__kicker { margin-bottom: .5rem; font-family: var(--font-logo); font-size: .75rem; letter-spacing: .16em; color: var(--blog-blue); }
.blog-member-profile h1 { font-family: var(--font-serif); font-size: clamp(2.4rem, 5vw, 4.5rem); font-weight: 600; line-height: 1.15; color: var(--blog-navy); }
.blog-member-profile__position { margin-top: .55rem; color: #526273; }
.blog-member-profile__expertise { margin-top: .35rem; color: #657484; font-size: .86rem; }
.blog-member-profile__bio { max-width: 760px; margin-top: 2rem; color: #33475b; line-height: 1.9; overflow-wrap: anywhere; }
.blog-member-articles { padding-top: clamp(3.5rem, 7vw, 6rem); }

.blog-sidebar { position: sticky; top: calc(var(--header-height, 96px) + 1.5rem); display: grid; gap: 2rem; }
.blog-search { display: grid; grid-template-columns: 1fr 42px; border: 1px solid var(--blog-line); background: #fff; }
.blog-search input { min-width: 0; padding: .8rem .9rem; border: 0; background: transparent; font-size: .82rem; }
.blog-search button { border: 0; background: var(--blog-blue); color: #fff; font-size: 1.1rem; }
.blog-sidebar__section { padding-top: 1.1rem; border-top: 1px solid var(--blog-line); }
.blog-sidebar__section h2 { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: .8rem; font-family: var(--font-logo); font-size: 1.25rem; font-weight: 500; letter-spacing: .05em; color: #1c334c; }
.blog-sidebar__section h2 small { font-family: var(--font-body); font-size: .65rem; font-weight: 400; color: #7a828b; }
.blog-sidebar__section ul li { border-bottom: 1px solid #e6e2d9; }
.blog-sidebar__section ul a { display: flex; justify-content: space-between; gap: .7rem; padding: .65rem .2rem; color: #35475a; font-size: .78rem; }
.blog-sidebar-toc ol { display: grid; gap: .55rem; }
.blog-sidebar-toc > summary { font-family: var(--font-logo); font-size: 1.25rem; font-weight: 500; letter-spacing: .05em; color: #1c334c; }
.blog-sidebar-toc[open] > summary { margin-bottom: .8rem; }
.blog-sidebar-toc a { display: flex; gap: .65rem; color: #4c5b6c; font-size: .75rem; line-height: 1.55; }
.blog-sidebar-toc a > span { flex: 0 0 auto; color: var(--blog-blue); font-family: var(--font-mono); font-size: .65rem; }
.blog-sidebar-toc a.is-active { color: var(--blog-blue); font-weight: 700; }
.blog-sidebar-recent ol { display: grid; gap: .8rem; }
.blog-sidebar-recent li a { display: grid; grid-template-columns: 70px 1fr; gap: .7rem; align-items: center; color: #273c52; font-size: .74rem; line-height: 1.45; }
.blog-sidebar-recent img,
.blog-sidebar-recent__fallback { width: 70px; aspect-ratio: 16 / 10; object-fit: cover; background: url('../../images/column-world.webp') center / cover; }
.blog-sidebar-recent time { display: block; margin-top: .3rem; color: #87909a; font-family: var(--font-mono); font-size: .62rem; }
.blog-sidebar-cta { min-height: 150px; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.3rem; background: linear-gradient(rgba(6,39,75,.45), rgba(6,39,75,.76)), url('../../images/column-world.webp') center / cover; color: #fff; }
.blog-sidebar-cta span { font-family: var(--font-serif); font-size: 1.2rem; }
.blog-sidebar-cta small { margin-top: .65rem; font-size: .7rem; letter-spacing: .12em; }

.blog-related { padding-top: clamp(3.5rem, 7vw, 6rem); padding-bottom: 4rem; border-top: 1px solid var(--blog-line); }
.blog-related--inline { max-width: 820px; margin: clamp(3.5rem, 7vw, 5rem) auto 0; padding-bottom: 0; }
.blog-related__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; margin-top: 2rem; }
.blog-related article > a > div { aspect-ratio: 16 / 9; }
.blog-related time { display: block; margin-top: .75rem; font-family: var(--font-mono); color: #77818d; font-size: .66rem; }
.blog-related h3 { margin-top: .45rem; font-family: var(--font-serif); font-size: 1.1rem; font-weight: 600; line-height: 1.55; color: #1e3349; }
.blog-article-cta { max-width: 820px; margin: clamp(3.5rem, 7vw, 5rem) auto 0; padding: clamp(2rem, 5vw, 3.5rem); border: 1px solid #cbd7dc; background: #f7f8f5; text-align: center; }
.blog-article-cta__eyebrow { margin: 0 0 .8rem; color: var(--blog-blue); font-family: var(--font-mono); font-size: .7rem; letter-spacing: .18em; }
.blog-article-cta h2 { margin: 0; font-family: var(--font-serif); font-size: clamp(1.45rem, 3vw, 2rem); color: var(--blog-navy); }
.blog-article-cta > p:not(.blog-article-cta__eyebrow) { max-width: 560px; margin: 1rem auto 0; color: #536273; line-height: 1.8; }
.blog-article-cta a { display: inline-flex; align-items: center; justify-content: center; gap: 1.5rem; min-width: min(100%, 260px); margin-top: 1.5rem; padding: .9rem 1.4rem; background: var(--blog-navy); color: #fff; font-size: .85rem; }
.blog-back { padding-bottom: 5rem; text-align: center; }
.blog-back a { display: inline-block; padding-bottom: .3rem; border-bottom: 1px solid currentColor; color: #31516d; font-size: .82rem; letter-spacing: .08em; }

@media (max-width: 1023px) {
	.blog-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.blog-pickup-layout { grid-template-columns: minmax(0, 1fr) 250px; gap: 2.5rem; }
	.blog-single__layout { grid-template-columns: minmax(0, 1fr) 240px; gap: 2.5rem; }
	.blog-hero__words { display: none; }
	.blog-hero__inner { grid-template-columns: 1fr; }
}

@media (max-width: 899px) {
	.blog-pickup-layout { grid-template-columns: 1fr; }
	.blog-discovery { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding-top: 0; }
	.blog-single__layout { grid-template-columns: 1fr; }
	.blog-sidebar { position: static; }
	.blog-sidebar-toc { display: none; }
}

@media (max-width: 767px) {
	.blog-hero { min-height: 280px; }
	.blog-hero__copy h1 { font-size: clamp(3.7rem, 20vw, 5.4rem); }
	.blog-hero__kicker { font-size: .78rem; }
	.blog-hero__copy > p:last-child { margin-top: 1rem; font-size: .85rem; }
	.blog-category-nav__scroll { justify-content: flex-start; padding-inline: 1rem; }
	.blog-category-nav a { min-width: auto; padding-inline: 1.1rem; }
	.blog-featured__link { grid-template-columns: 1fr; gap: 1.5rem; }
	.blog-featured__grid { grid-template-columns: 1fr; }
	.blog-discovery { grid-template-columns: 1fr; }
	.blog-featured__content h3 { font-size: 1.65rem; }
	.blog-card-grid { grid-template-columns: 1fr; }
	.blog-card p { -webkit-line-clamp: 2; }
	.blog-section-heading { align-items: flex-end; }
	.blog-section-heading h2 { font-size: 1.35rem; }
	.blog-single-visual { height: 128px; }
	.blog-article-header { padding-top: 2rem; }
	.blog-article-header h1 { font-size: 1.9rem; }
	.blog-article-header__foot { align-items: flex-start; flex-direction: column; }
	.libre-author-card { padding: 1.4rem; }
	.libre-author-card__header { align-items: stretch; flex-direction: column; gap: 1.35rem; }
	.libre-author-card__avatar { width: 64px; height: 64px; }
	.libre-author-card__link { width: 100%; }
	.blog-member-profile { align-items: flex-start; }
	.blog-member-profile__avatar { width: 88px; height: 88px; }
	.blog-related__grid { grid-template-columns: 1fr; }
	.blog-related article > a { display: grid; grid-template-columns: 120px 1fr; gap: 1rem; }
	.blog-related article > a > div { grid-row: span 2; }
	.blog-related time { margin-top: 0; align-self: end; }
	.blog-related h3 { align-self: start; }
	.blog-single .blog-article__body { max-width: 100%; line-height: 1.9; }
	.blog-single .blog-article__body > * + * { margin-top: 1.45rem; }
	.blog-single .blog-article__body h2 {
		min-height: 0;
		margin-top: 4.5rem;
		padding: 2.15rem 0 1.15rem;
		font-size: clamp(1.65rem, 7.2vw, 1.95rem);
		line-height: 1.5;
	}
	.blog-single .blog-article__body h2::before {
		top: .1rem;
		font-size: 1.65rem;
	}
	.blog-single .blog-article__body h2::after {
		position: absolute;
		top: .55rem;
		left: 3rem;
		margin: 0;
		font-size: .64rem;
	}
	.blog-single .blog-article__body h3 {
		margin-top: 3.25rem;
		padding-left: 1rem;
		font-size: clamp(1.35rem, 5.8vw, 1.55rem);
	}
	.blog-single .blog-article__body h4 {
		margin-top: 2.5rem;
		font-size: clamp(1.12rem, 4.8vw, 1.3rem);
	}
	.blog-single .blog-article__body h4::before { flex-basis: 1.5rem; }
	.blog-single .blog-article__body :is(.libre-point, .libre-note, .libre-warning) {
		padding: 2.75rem 1.15rem 1.4rem;
	}
}

@media (max-width: 420px) {
	.blog-archive__body { padding-inline: 1rem; }
	.blog-featured__content h3 { font-size: 1.45rem; }
	.blog-article-header h1 { font-size: 1.7rem; }
	.share-links { gap: .45rem; }
	.share-links a { min-width: 30px; height: 30px; font-size: .6rem; }
	.blog-toc--inline { padding: 1.2rem; }
	.blog-single .blog-article__body h2 { margin-top: 4rem; }
	.blog-member-profile { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
	.blog-featured__media img,
	.blog-card__media img,
	.blog-read-more i { transition: none; }
}

/* 2026-09-24 レスポンシブ総点検：SPの検索入力はiOS自動ズーム回避のため16px。 */
@media (max-width: 767px){.blog-search input{font-size:16px}}