@charset "utf-8";
/* ==========================================================================
   CORECOLOR 2026 — 下層ページ
   --------------------------------------------------------------------------
   ライター紹介一覧 / ライター詳細 / コレカラについて。
   トップと同じく .p-cc 配下にスコープしてあり、単位は em に統一。
   共通の部品（円・弧文字・SNS・ヘッダー/フッター）は home.css のものを使う。
   ========================================================================== */

/* --------------------------------------------------------------------------
   下層共通
   -------------------------------------------------------------------------- */
.p-cc .l-page { padding: 3.5em 0 6em; background: var(--c-base); }
/* カンプの本文カラムは実測で幅688px（=43em）・中央揃え */
.p-cc .l-page__inner { width: min(92%, 43em); margin-inline: auto; }


/* 現在地のメニュー項目に円が付く（ホバーとまったく同じ表現＝枠線＋塗り） */
.p-cc .c-nav-main__item.is-current > a::before {
	border-color: var(--c-ink); background: var(--c-surface);
}

/* 画面左端に固定して追従するシェアの帯。FVのものと同じ形。
   カンプ再実測（アイコンの高さ18pxを基準に換算。縮尺5.0倍の図）:
     帯の幅50px / 上の余白30px / 下の余白50px / 角丸50px
     矢印12x18px / Shareの文字15px / 矢印〜Shareは約7px / それ以外は約17px */
.p-cc .c-share-rail {
	/* 全体を約80%に（2026-10-06 児島指示）。中の寸法はすべて em なので基準を縮めるだけで比率を保つ */
	font-size: 0.8em;
	/* スクロールに追従して画面の左に固定する（児島さん指示）。高さは画面の30%（2026-10-06 児島指示で50%から変更） */
	position: fixed; top: 30%; transform: translateY(-50%); left: 0; z-index: 30; width: 3.125em;
	display: flex; flex-direction: column; align-items: center; gap: 1.0625em;
	padding: 1.875em 0 3.125em; background: var(--c-surface);
	border: 0.0625em solid var(--c-ink); border-left: 0; border-radius: 0 3.125em 3.125em 0;
}
/* 矢印とShareの間だけ詰める（カンプでは約7px） */
.p-cc .c-share-rail__arrow { display: block; width: 0.75em; height: auto; margin-bottom: -0.625em; }
.p-cc .c-share-rail__label { font-family: var(--font-en); font-size: 0.9375em; font-weight: 700;
	letter-spacing: 0.04em; writing-mode: vertical-rl; }
.p-cc .c-share-rail .c-social--vertical { gap: 1.0625em; }

/* ページ見出し（ライター紹介 / Writers） */
.c-heading--page { display: flex; flex-direction: column; align-items: center; gap: 0.15em;
	margin-bottom: 2.5em; text-align: center; }
.c-heading--page .c-heading__jp { font-size: 1.5625em; font-weight: 700; letter-spacing: 0.06em; }
.c-heading--page .c-heading__en { font-family: var(--font-en); font-size: 1.125em; font-weight: 700;
	letter-spacing: 0.06em; }

/* 円形の矢印ボタン（PREV/NEXT・一覧へもどる）。支給SVGをそのまま使う。
   カンプ実測: 直径は本文（13px）の約4.4倍＝58px */
.c-arrow {
	flex: none; display: block; width: 3.625em; height: 3.625em;
	background: url("../images/arrow-right.svg") no-repeat center / contain;
}
.c-arrow--left { background-image: url("../images/arrow-left.svg"); }
/* 「一覧にもどる」は黒丸に白矢印 */
.c-arrow--fill { background-image: url("../images/arrow-left-fill.svg"); }

/* カンプ実測: 丸と文字のアキは12px、文字は16px相当の太字 */
.c-back { display: inline-flex; align-items: center; gap: 0.75em; font-size: 1em; font-weight: 700; }

/* --------------------------------------------------------------------------
   ライター紹介一覧
   -------------------------------------------------------------------------- */
.p-writers { display: flex; flex-direction: column; }
/* カンプでは1件ごとに下へ細い区切り線が入る */
.p-writers__item { display: grid; grid-template-columns: 9.125em 1fr; gap: 2em;
	padding: 2.25em 0; border-bottom: 0.0625em solid var(--c-ink); }
.p-writers__item:first-child { padding-top: 0; }

.p-writers__avatar { display: block; width: 9.125em; height: 9.125em; overflow: hidden;
	border-radius: 50%; background: var(--c-sunken); }
.p-writers__avatar img { width: 100%; height: 100%; object-fit: cover; }

.p-writers__body { min-width: 0; display: flex; flex-direction: column; }
.p-writers__name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25em 0.9em;
	font-size: 1.375em; font-weight: 700; }
.p-writers__role { font-size: 0.5909em; font-weight: 500; }  /* 13px */
.p-writers__en { font-family: var(--font-en); font-size: 0.6364em; font-weight: 500; } /* 14px */

/* カンプは3行で切れて「…」が付く */
.p-writers__lead-wrap { position: relative; margin-top: 0.9em; }
.p-writers__lead {
	font-size: 0.875em; line-height: 2;
	display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
/* 3行で切れたときだけ、3行目の末尾（「…」の位置）に「MORE…」を重ねる。
   地色で塗り、左側をぼかして下の文字が途中で切れて見えないようにする */
.p-writers__more { display: none; }
.p-writers__lead-wrap.is-clamped .p-writers__more {
	display: block; position: absolute; right: 0; bottom: 0;
	padding-left: 3em; font-family: var(--font-en); font-size: 0.875em; font-weight: 700;
	line-height: 2; letter-spacing: 0.04em;
	text-decoration: underline; text-underline-offset: 0.25em; text-decoration-thickness: 0.06em;
	background: linear-gradient(to right, transparent, var(--c-base) 2.5em);
}
.c-social--writer { margin-top: 1.1em; justify-content: flex-end; gap: 1.1em; }
.c-social--writer .c-social__link svg { width: 1.25em; height: 1.25em; }

.p-writers__empty { text-align: center; }

.c-pagination { margin-top: 3em; }
.c-pagination .nav-links { display: flex; justify-content: center; gap: 0.75em; }
.c-pagination a, .c-pagination span { display: grid; place-items: center; min-width: 2.25em; height: 2.25em;
	padding: 0 0.5em; border: 0.0625em solid var(--c-ink); border-radius: 999em; font-size: 0.875em; }
.c-pagination .current { background: var(--c-ink); color: var(--c-base); border-color: var(--c-ink); }

/* --------------------------------------------------------------------------
   ライター詳細
   -------------------------------------------------------------------------- */
.p-writer__head { text-align: center; }
/* カンプ実測: アバターは直径232px */
.p-writer__avatar { width: 14.5em; height: 14.5em; margin: 0 auto; overflow: hidden;
	border-radius: 50%; background: var(--c-sunken); }
.p-writer__avatar img { width: 100%; height: 100%; object-fit: cover; }
.p-writer__role { margin-top: 1.5em; font-size: 0.8125em; font-weight: 500; }
.p-writer__name { margin-top: 0.35em; font-size: 1.75em; font-weight: 700; letter-spacing: 0.04em; }
.p-writer__en { margin-top: 0.25em; font-family: var(--font-en); font-size: 0.875em; font-weight: 500; }

.p-writer__profile { margin-top: 2.5em; font-size: 0.9375em; line-height: 2.1; }
.p-writer__profile p + p { margin-top: 1.2em; }
.p-writer__links { margin-top: 1.5em; }

.p-writer__works { margin-top: 2.5em; padding-top: 2.5em; border-top: 0.0625em solid var(--c-ink); }
.p-writer__works-title { font-size: 1.125em; font-weight: 700; margin-bottom: 0.4em; }

.p-writer__nav { display: flex; justify-content: space-between; gap: 1.5em;
	margin-top: 2.5em; padding-top: 2.5em; }
.p-writer__nav-link { display: flex; align-items: center; gap: 0.9em; }
.p-writer__nav-label { font-family: var(--font-en); font-size: 1.5em; font-weight: 700;
	letter-spacing: 0.02em; }
.p-writer__nav-body { display: flex; flex-direction: column; line-height: 1.5; }
.p-writer__nav-role { font-size: 0.75em; }
.p-writer__nav-name { font-size: 1em; font-weight: 700; }
.p-writer__nav-en { font-family: var(--font-en); font-size: 0.75em; }
.p-writer__nav-link--next { margin-left: auto; text-align: right; }
.p-writer__nav-link--next .p-writer__nav-body { align-items: flex-end; }

.p-writer__back { margin-top: 3em; text-align: center; }

/* --------------------------------------------------------------------------
   コレカラについて
   -------------------------------------------------------------------------- */
.p-about { position: relative; overflow: hidden; }
/* 背景の大きな薄い円。中心が明るいので放射グラデーションで作る */
.p-about__blob {
	position: absolute; z-index: 0; border-radius: 50%; pointer-events: none;
	background: radial-gradient(circle at 50% 45%, #FBFBF9 0%, #F4F4F1 45%, var(--c-base) 100%);
}
.p-about__blob--a { right: -6em; top: 2em; width: 39em; height: 39em; }
.p-about__blob--b { left: -14em; top: 20em; width: 44em; height: 44em; }
.p-about__inner { position: relative; z-index: 1; }

.p-about__title { font-size: 1.75em; font-weight: 700; letter-spacing: 0.04em; }
.p-about__lead { margin-top: 2em; font-size: 0.9375em; line-height: 2.6; }
.p-about__lead p + p { margin-top: 2.2em; }

.p-about__toc { margin-top: 5em; }
.p-about__toc-title { display: flex; align-items: baseline; gap: 0.75em;
	font-size: 2.375em; font-weight: 700; }
.p-about__toc-title span { font-size: 0.5625em; font-weight: 500; }
/* 目次の図は支給PNG1枚（背景透過）。本文の列幅いっぱいに縮めて置く */
.p-about__toc-img { display: block; width: 100%; height: auto; margin-top: 2.5em; }

/* --------------------------------------------------------------------------
   SP
   -------------------------------------------------------------------------- */
@media (max-width: 769px) {
	/* Shareの帯はSPでも出す（2026-10-06 児島指示・SPカンプ）。画面が狭いので少し小さめに */
	.p-cc .c-share-rail { font-size: 0.7em; }

	.p-writers__item { grid-template-columns: 5.5em 1fr; gap: 1.1em; padding: 1.5em 0; }
	.p-writers__avatar { width: 5.5em; height: 5.5em; }
	.p-writers__name { font-size: 1.125em; gap: 0.2em 0.6em; }
	.p-writers__lead-wrap { margin-top: 0.6em; }
	.p-writers__lead, .p-writers__lead-wrap.is-clamped .p-writers__more { font-size: 0.8125em; line-height: 1.9; }
	.c-social--writer { margin-top: 0.8em; gap: 0.9em; }

	.p-writer__avatar { width: 11em; height: 11em; }
	.p-writer__name { font-size: 1.5em; }
	.p-writer__profile { margin-top: 2em; font-size: 0.875em; line-height: 2.1; }
	/* 1列だと円が画面幅いっぱいになるので2列 */
	.p-cards--three { grid-template-columns: repeat(2, 1fr); }

	/* PREV/NEXT は縦に積み、左揃えにそろえて読みやすくする */
	.p-writer__nav { flex-direction: column; gap: 1.25em; }
	.p-writer__nav-link { justify-content: flex-start; }
	/* row-reverse では flex-start が右端になるので、左に寄せるには flex-end */
	.p-writer__nav-link--next { margin-left: 0; flex-direction: row-reverse;
		justify-content: flex-end; text-align: left; }
	.p-writer__nav-link--next .p-writer__nav-body { align-items: flex-start; }

	/* 背景の円はSPでも出す（児島指示）。PCと同じく右上と左下に、画面幅に対して同じくらいの比率で */
	.p-about__blob--a { right: -7em; top: 3em; width: 21em; height: 21em; }
	.p-about__blob--b { left: -10em; top: 24em; width: 24em; height: 24em; }
}

/* --------------------------------------------------------------------------
   記事アーカイブ（カテゴリー・タグなど）
   --------------------------------------------------------------------------
   TAGSパネルはトップと同じ .l-tagrail + .c-tagpanel を使い回す。
   -------------------------------------------------------------------------- */
/* 弧の下から明るい面→地色のグラデーション（2026-10-08 カンプ） */
.p-archive { padding: 3em 0 0; background: var(--g-glow); }
/* パネルに重ならないよう、カード側を左に空ける（トップの連載コラムと同じ考え方） */
.p-archive__body { padding-left: 12.5em; }
/* TAGSパネルは .l-tagrail の高さに合わせて伸び縮みする。記事が0〜数件の一覧
   （開催前のセミナーなど）だと箱が低すぎてパネルが潰れるので、最低限の高さを持たせる */
.p-archive .l-tagrail { min-height: 40em; }
/* カンプの列幅に近づけるため、TAGSパネルの右に取れるだけ取る
   （1280pxではパネル200pxを引いた残りが上限になる） */
.p-archive__inner { width: min(96%, 68em); margin-inline: auto; }

/* カンプの見出しは英語が主・日本語が従（ライター紹介とは主従が逆） */
.c-heading--archive { display: flex; flex-direction: column; align-items: center; gap: 0.1em;
	text-align: center; }
.c-heading--archive .c-heading__en { font-family: var(--font-en); font-size: 1.5em; font-weight: 700;
	letter-spacing: 0.02em; }
.c-heading--archive .c-heading__jp { font-size: 0.8125em; font-weight: 700; letter-spacing: 0.06em; }

.p-archive__desc { margin-top: 1em; font-size: 0.875em; line-height: 2; text-align: center; }
.p-archive__empty { margin-top: 3em; text-align: center; }

/* カンプ実測（列幅を1としたときの比率）:
     円の直径 0.95 / 列間 0.20
   文字サイズは児島さん指定: 日付13px / 見出し15px / 説明14px
   日付の下に列幅いっぱいの細い罫線が入り、その下に見出しが来る。
   文字は左揃え、円だけ列の中央に置く。 */
.p-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3.5em 2.8em; margin-top: 2.5em; }
/* ライター詳細の「執筆した記事」は3列（カード自体の仕様は記事一覧と同じ） */
.p-cards--three { grid-template-columns: repeat(3, 1fr); }
.p-cards__item { min-width: 0; }
.c-circle--card { display: block; width: 95%; aspect-ratio: 1; margin-inline: auto; }
/* アイキャッチは既定でモノクロ、カード上にマウスが乗るとカラー（2026-10-08 児島指示で全ページ統一）。
   円だけでなくカード全体を判定にして、見出しに乗せたときもカラーになるようにする。 */
.p-cards__item .c-circle__img { filter: grayscale(1); transition: filter .4s ease; }
.p-cards__item:hover .c-circle__img,
.p-cards__item:focus-within .c-circle__img { filter: grayscale(0); }
/* 全体の a:hover{opacity:.7} で薄くならないようにする */
.p-cards__item:hover .c-circle--card { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
	.p-cards__item .c-circle__img { transition: none; }
}
.p-cards__date { display: block; margin-top: 1.6em; padding-bottom: 0.6em;
	font-family: var(--font-en); font-size: 0.8125em; font-weight: 700; letter-spacing: 0.02em;
	border-bottom: 0.0625em solid var(--c-ink); }
/* 見出し・連載名とも2行で切る（児島さん指示）。カードの高さも揃う */
.p-cards__title, .p-cards__series {
	display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.p-cards__title { margin-top: 0.8em; font-size: 0.9375em; font-weight: 700; line-height: 1.75; }
.p-cards__series { margin-top: 0.7em; font-size: 0.875em; line-height: 1.75; }
.p-cards__writer { margin-top: 0.7em; font-size: 0.9375em; }
.p-cards__writer span { margin-right: 0.9em; font-family: var(--font-en); }
.p-cards__item .c-tags { margin-top: 0.6em; gap: 0.2em 0.9em; }
.p-cards__item .c-tags > li { font-size: 0.8125em; font-weight: 700; }

/* ページ送り。2026-10-06 支給の画像に忠実に（数字の大きさ F を基準にした比率で組む）:
     数字 F=1.375em（太字）／数字どうしのアキ ≒1.1F
     「...」は直径0.17Fの丸い点を0.72Fおきに3つ、数字の下端にそろえる
     丸ボタンは直径1.27F・地は明るい色・細い線。山形は太く角の丸い線（直径の約8.5%）
     丸ボタン2つの間だけ狭い（≒0.26F）
   現在のページも画像どおり他と同じ見た目（以前は下線を付けていた） */
.p-archive .c-pagination { margin-top: 4em; padding-bottom: 4em; }
.p-archive .c-pagination .nav-links {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.55em;
}
.p-archive .c-pagination .page-numbers {
	display: block; min-width: auto; height: auto; padding: 0; border: 0; border-radius: 0;
	background: none; font-family: var(--font-en); font-size: 1.375em; font-weight: 700;
	line-height: 1;
}
.p-archive .c-pagination .page-numbers.current { background: none; color: var(--c-ink); }
/* 「...」: 点は文字ではなく背景の丸で描き、数字の下端（ベースライン付近）にそろえる */
.p-archive .c-pagination .dots {
	align-self: center; width: 2.97em; height: 1em; font-size: 1em; color: transparent; overflow: hidden;
	background: radial-gradient(circle, var(--c-ink) 0 0.115em, transparent 0.13em) left bottom 0.03em / 0.99em 0.24em repeat-x;
}

/* 丸ボタン（次へ／最後へ／前へ／最初へ） */
.p-archive .c-pagination__btn {
	/* 上の汎用 .c-pagination a の min-width / padding を打ち消して真円にする */
	position: relative; display: block; width: 1.75em; height: 1.75em;
	min-width: 0; padding: 0; flex: none;
	background: var(--c-panel-light) no-repeat center / 100% 100%;
	border: 0.0625em solid var(--c-ink); border-radius: 50%;
}
/* 山形は太く端の丸い線（画像の形）。SVG を背景に敷く。左向きは下で反転させる */
.p-archive .c-pagination__btn--next,
.p-archive .c-pagination__btn--prev {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M16 11l9 9-9 9' fill='none' stroke='%23211816' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.p-archive .c-pagination__btn--last,
.p-archive .c-pagination__btn--first {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M13 11l9 9-9 9M27 11v18' fill='none' stroke='%23211816' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* 丸ボタン2つの間だけ詰める */
.p-archive .c-pagination__btn + .c-pagination__btn { margin-left: -1.2em; }
/* 左向きは全体を反転させる */
.p-archive .c-pagination__btn--prev,
.p-archive .c-pagination__btn--first { transform: scaleX(-1); }

@media (max-width: 769px) {
	.p-archive { padding-top: 1em; }
	.p-archive__body { padding-left: 0; }
	.p-archive .l-tagrail { min-height: 0; }
	.p-cards { grid-template-columns: repeat(2, 1fr); gap: 2.5em 1.5em; }
	/* SPカンプ（p3）の文字サイズ: 日付・本文とも PC より一回り大きく読ませる */
	.p-cards__date { font-size: 0.875em; }
	.p-cards__title { font-size: 1em; line-height: 1.7; }
	.p-cards__series, .p-cards__writer { font-size: 0.875em; }
	.p-archive .c-pagination { margin-top: 2.5em; padding-bottom: 2.5em; }
	.p-archive .c-pagination .nav-links { flex-wrap: wrap; gap: 0.6em; }
	/* SPはアキ自体が狭い（0.6em）ので、丸ボタン2つの間は詰めずにそのまま */
	.p-archive .c-pagination__btn + .c-pagination__btn { margin-left: 0; }
}

/* --------------------------------------------------------------------------
   記事詳細
   -------------------------------------------------------------------------- */
.p-post__eyecatch { margin: 0 0 2em; }
.p-post__eyecatch img { display: block; width: 100%; height: auto; }

/* 30px / Black（900）。900はWebフォントに含めてあるので合成太字にならない */
.p-post__title { font-size: 1.875em; font-weight: 900; line-height: 1.7; }

.p-post__meta { margin-top: 1.5em; font-size: 0.8125em; line-height: 2; }
.p-post__date { display: block; font-family: var(--font-en); font-weight: 700; }
.p-post__byline span { margin-right: 0.9em; font-family: var(--font-en); }
.p-post__meta .c-tags { margin-top: 0.4em; gap: 0.3em 1.1em; }
.p-post__meta .c-tags > li { font-size: 1em; font-weight: 500; }

.p-post__body { margin-top: 2.5em; font-size: 1em; line-height: 2.4; }
.p-post__body p { margin: 0 0 2em; }
.p-post__body img { height: auto; }
/* 記事冒頭などのリード（本文に class="interviewer" で入っている・271記事）。
   色 #596c7c・太字。上下の罫線は 2026-10-09 児島指示で外した */
.p-post__body .interviewer {
	margin: 2.5em 0; padding: 1.4em 0;
	color: #596c7c; font-weight: 700; line-height: 2;
}
.p-post__body h2 { margin: 2.5em 0 1em; font-size: 1.2857em; font-weight: 700; line-height: 1.7; }
.p-post__body h3 { margin: 2.5em 0 1em; font-size: 1.1429em; font-weight: 700; line-height: 1.7; }
.p-post__body a { text-decoration: underline; text-underline-offset: 0.2em; }
.p-post__body blockquote { margin: 2em 0; padding: 1.25em 1.5em;
	background: var(--c-surface-2); border-radius: 0.75em; }
/* 埋め込み（YouTubeなど）が枠からはみ出さないように */
.p-post__body iframe { max-width: 100%; }

/* カンプ: 上下を細い罫線で挟み、「ラベル＋ピル型のタグ」が1行ずつ。
   ラベル幅はそろえず、ラベルの直後にピルが来る。 */
.p-post__credit {
	display: flex; flex-direction: column; gap: 1.1em;
	margin-top: 3em; padding: 2.2em 0;
	border-top: 0.0625em solid var(--c-ink);
	border-bottom: 0.0625em solid var(--c-ink);
}
.p-post__credit-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5em 1em; }
.p-post__credit dt { font-family: var(--font-en); font-size: 1em; font-weight: 700; }
.p-post__credit dd { margin: 0; }
/* ピル型のタグ */
.c-tagpill {
	display: inline-block; padding: 0.35em 1.1em;
	font-size: 1em; font-weight: 700; line-height: 1.6;
	border: 0.0625em solid var(--c-ink); border-radius: 999em;
}
.c-tagpill:hover { opacity: 1; background: var(--c-white); }

/* カンプ実測: ラベル24px / タイトル13px・行間2.05・3行で切る */
.p-post__nav { display: flex; justify-content: space-between; gap: 1.5em;
	margin-top: 2.5em; padding-top: 2.5em; }
.p-post__nav-link { display: flex; align-items: center; gap: 0.9em; max-width: 22em; }
.p-post__nav-label { flex: none; font-family: var(--font-en); font-size: 1.5em; font-weight: 700;
	letter-spacing: 0.02em; }
.p-post__nav-title { font-size: 0.8125em; font-weight: 500; line-height: 1.8;
	display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.p-post__nav-link--next { margin-left: auto; text-align: right; }

.p-post__back { margin-top: 3em; margin-bottom: 1em; text-align: center; }

@media (max-width: 769px) {
	/* SPは基準が14pxなので、同じ比率を保ったまま小さくなる */
	.p-post__title { font-size: 1.7em; }
	.p-post__body { font-size: 1em; line-height: 2.2; }
	.p-post__eyecatch { margin-bottom: 1.5em; }

	/* PREV/NEXT は縦に積み、左揃えにそろえる */
	.p-post__nav { flex-direction: column; gap: 1.25em; }
	.p-post__nav-link { max-width: none; }
	.p-post__nav-link--next { margin-left: 0; flex-direction: row-reverse;
		justify-content: flex-end; text-align: left; }

	.p-post__credit { grid-template-columns: 1fr; gap: 0.2em; }
	.p-post__credit dt { margin-top: 0.8em; }
}

/* --------------------------------------------------------------------------
   お問い合わせ
   --------------------------------------------------------------------------
   フォームは MW WP Form（出力マークアップは変えられない）。
   .field > label + .input という構造を、カンプの「左にラベル・右に入力欄」に組み直す。
   -------------------------------------------------------------------------- */
/* 30px。記事タイトルと同じ大きさ */
.p-contact__title { font-size: 1.875em; font-weight: 700; }
/* 案内文は太字・グレー（児島さん指定 #727171。トークンの --c-ink-muted とは別の中間グレー） */
.p-contact__lead { margin-top: 1.5em; font-size: 1.125em; font-weight: 700; line-height: 1.6; color: #727171; }

/* 運営会社へのリンク。上下を #000 の0.5pxで挟む（児島さん指定）。
   border-width は 0.5px と書いてもブラウザが1pxに丸めてしまうため、
   背景のグラデーションで線を引く（こちらは端数のまま描かれる）。
   線の太さは拡大縮小させたくないので、ここだけ px を使う。 */
.p-contact__company {
	display: block; margin-top: 2.5em; padding: 1.4em 0;
	background-image: linear-gradient(#000, #000), linear-gradient(#000, #000);
	background-repeat: no-repeat;
	background-position: 0 0, 0 100%;
	background-size: 100% 0.5px, 100% 0.5px;
}
.p-contact__company:hover { opacity: .7; }
.p-contact__company-label { display: block; font-size: 0.8125em; font-weight: 700; color: #1a5d88; }
.p-contact__company-logo { display: block; width: 17.5em; max-width: 100%; height: auto; margin-top: 0.5em; }

.p-contact__form-title { margin-top: 3em; font-size: 0.9375em; font-weight: 700; color: var(--c-ink-muted); }
.p-contact__form { margin-top: 1.5em; }

/* MW WP Form の出力は wpautop に通るため、</label> の直後に空の <p> が入る。
   これがグリッドの2列目を占有してレイアウトが崩れるので消す。 */
.p-contact__form p:empty { display: none; }

/* 入力欄1組。カンプ実測: ラベル列は11em、入力欄との間は2em */
.p-contact__form .field { display: grid; grid-template-columns: 11em 1fr; gap: 0 2em;
	align-items: start; margin-bottom: 2em; }
/* ラベルは「項目名」→「※必須」の順。マークアップ上は必須が先なので order で入れ替える。
   色は案内文と同じ #727171（児島さん指定） */
.p-contact__form .field > label { display: flex; flex-direction: column;
	font-size: 0.9375em; font-weight: 700; line-height: 1.5; color: #727171; }
/* MW WP Form は「必須」バッジだけでなく入力欄にも class="essential" を付ける。
   label の中だけに限定しないと、入力欄の文字まで小さくなる。 */
.p-contact__form label .essential { order: 2; font-size: 0.8em; font-weight: 500; color: inherit; }
.p-contact__form label .essential::before { content: "※"; }
.p-contact__form .input { min-width: 0; }
.p-contact__form input[type="text"],
.p-contact__form input[type="email"],
.p-contact__form textarea {
	width: 100%; padding: 0.7em 0.9em; font: inherit; font-size: 0.9375em; color: var(--c-ink);
	background: var(--c-surface-2); border: 0.0625em solid var(--c-line-arc); border-radius: 0.125em;
}
.p-contact__form textarea { min-height: 15em; resize: vertical; }
.p-contact__form input:focus, .p-contact__form textarea:focus {
	outline: 0.125em solid var(--c-ink); outline-offset: 0.125em;
}
/* 入力例（例)山田花子 など）は出さない（児島さん指示・カンプにも無い）。
   フォーム本体の編集は本番DBに影響するため、表示側で隠している。 */
.p-contact__form .hint { display: none; }
/* エラー表示 */
.p-contact__form .error { display: block; margin-top: 0.4em; font-size: 0.8125em; color: #b32d2e; }

/* 送信ボタン。カンプでは「送信」の右に丸い矢印。
   矢印を ::after の飾りにすると丸を押しても送信されない（「送信」の文字だけが押せた）。
   丸もボタン自身の背景にして、文字と丸のどちらを押しても送信されるようにする */
.p-contact__form .submit { display: flex; justify-content: flex-end; margin-top: 2.5em; }
.p-contact__form .submit input {
	height: 3.625em; padding: 0 4.625em 0 0; font: inherit; font-size: 1em; font-weight: 700; color: #727171;
	background: url("../images/arrow-right.svg") no-repeat right center / 3.625em 3.625em;
	border: 0; cursor: pointer; -webkit-appearance: none; appearance: none;
}
.p-contact__form .submit input:hover { opacity: .7; }

@media (max-width: 769px) {
	.p-contact__form .field { grid-template-columns: 1fr; gap: 0.5em; }
	.p-contact__form textarea { min-height: 11em; }
	.p-contact__company-logo { width: 14em; }
}