/*
 * 記事詳細ページ（Figma PC 317:4801 / SP 319:8800）。
 * 左890px本文＋右470pxサイドバー。900px以下で1カラムへ切り替える。
 */
.content-single {
	padding-top: 122px;
	padding-bottom: var(--section-space);
}

.single-layout {
	display: grid;
	margin-top: 54px;
	grid-template-columns: minmax(0, 890fr) minmax(0, 470fr);
	gap: 80px;
	align-items: start;
}

/* ---------- 記事ヘッダー ---------- */

.post-header__meta {
	display: flex;
	margin: 0;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	color: #bababa;
	font-size: 14px;
	line-height: 1.8;
	letter-spacing: 0.04em;
}

.post-header__meta time {
	font-family: var(--font-en);
	font-weight: 600;
}

/* PCデザインではカテゴリーを出さず、日付のみ表示する。 */
.post-header__meta span {
	display: none;
}

.post-header__title {
	margin: 12px 0 0;
	font-size: 42px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.04em;
}

.post-header__tags {
	display: flex;
	margin: 4px 0 0;
	padding: 0;
	flex-wrap: wrap;
	gap: 8px 24px;
	list-style: none;
	font-size: 14px;
	line-height: 1.8;
	letter-spacing: 0.04em;
}

.post-header__image {
	display: block;
	width: 100%;
	margin-top: 40px;
	height: auto;
	object-fit: contain;
	background: #d9d9d9;
}

/* ---------- 目次 ---------- */

.post-index {
	margin-top: 40px;
	padding: 40px 32px;
	border-radius: 12px;
	background: #fff;
	color: var(--color-ink);
}

.post-index__summary {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	cursor: pointer;
	list-style: none;
}

.post-index__summary::-webkit-details-marker {
	display: none;
}

.post-index__label {
	text-transform: uppercase;
	color: var(--color-accent);
	font-family: var(--font-en);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.04em;
}

.post-index__toggle {
	color: var(--color-accent);
	font-family: var(--font-en);
	font-size: 16px;
	line-height: 1.4;
	letter-spacing: 0.04em;
}

.post-index__toggle::after {
	content: "Open +";
}

.post-index[open] .post-index__toggle::after {
	content: "Close -";
}

.post-index__list {
	margin: 20px 0 0;
	padding: 0 0 20px;
	border-bottom: 1px solid rgb(18 17 12 / 20%);
	list-style: none;
}

.post-index__item a {
	text-decoration: none;
}

.post-index__item--h2 {
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid rgb(18 17 12 / 20%);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.8;
	letter-spacing: 0.04em;
}

.post-index__item--h2:first-child {
	margin-top: 0;
}

.post-index__item--h3,
.post-index__item--h4 {
	margin-top: 8px;
	font-size: 14px;
	line-height: 1.8;
	letter-spacing: 0.04em;
}

.post-index__item--h3 {
	padding-left: 12px;
	font-weight: 700;
}

.post-index__item--h4 {
	padding-left: 24px;
}

/* ---------- 本文 ---------- */

.single-body {
	margin-top: 64px;
	font-size: 16px;
	line-height: 1.8;
	letter-spacing: 0.04em;
}

/* 旧記事の背景なし・黒文字段落は、暗色テーマの本文色へ合わせる。 */
.single-body > p.has-black-color:not(.has-background) {
	color: inherit !important;
}

/* 旧記事内の太字・明色テーブルも、背景に合う文字色にする。 */
.single-body :is(strong, b)[style*="color:#000000"] {
	color: inherit !important;
}
.single-body :is(td, th)[style*="background:#ffffff"],
.single-body :is(td, th)[style*="background:#f7fafd"],
.single-body table[style*="background-color:#ededed"] :is(td, th) {
	color: #12110c !important;
}

/* 目次の移動先は固定ヘッダー（PC 82px / SP 60px）の下に20px空ける。
 * ログイン時の管理バー分はWordPressのscroll-padding-topに委ねる。 */
.single-body :is(h2, h3, h4)[id] {
	scroll-margin-top: 102px;
}

@media (max-width: 1160px) {
	.single-body :is(h2, h3, h4)[id] {
		scroll-margin-top: 80px;
	}
}

.single-body > * {
	margin-block: 0;
}

.single-body > * + * {
	margin-top: 32px;
}

.single-body h2 {
	margin-top: 64px;
	color: var(--color-accent);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.8;
	letter-spacing: 0.04em;
}

.single-body h3 {
	font-size: 20px;
	font-weight: 700;
	line-height: 1.8;
	letter-spacing: 0.04em;
}

.single-body h2 + * {
	margin-top: 12px;
}

.single-body h3 + * {
	margin-top: 24px;
}

.single-body a {
	text-decoration: underline;
	text-underline-position: from-font;
}

.single-main {
	min-width: 0;
}

.single-body .wp-block-button:has(.article-cta) {
	max-width: 100%;
	min-width: 0;
}

.single-body .wp-block-buttons:has(.article-cta) {
	background: transparent !important;
}

/* 旧記事CTA：共通ボタンと同じサイズ・色反転・文字送り・矢印。 */
.single-body .wp-block-button__link.article-cta {
	--fill-swap-from-bg: #3498db;
	--fill-swap-from-color: #fff;
	--fill-swap-to-bg: #fff;
	--fill-swap-to-color: #3498db;
	--fill-swap-border: #3498db;
	--fill-swap-arrow-size: 20px;
	display: inline-flex;
	width: 405px;
	max-width: 100%;
	min-height: 76px;
	padding: 16px 40px;
	box-sizing: border-box;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	border: 1px solid #3498db;
	border-radius: 4px;
	background: #3498db !important;
	color: #fff !important;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.04em;
	text-decoration: none;
}

.single-body .article-cta .fill-swap-btn__label {
	height: auto;
	min-width: 0;
}

.single-body .article-cta .fill-swap-btn__label-inner {
	display: grid;
	position: relative;
}

.single-body .article-cta .fill-swap-btn__label-inner > span {
	height: auto;
}

.single-body .article-cta .fill-swap-btn__label-inner > span:last-child {
	position: absolute;
	top: 100%;
	width: 100%;
}

@media (any-hover: hover) {
	.single-body .article-cta:hover .fill-swap-btn__label-inner { transform: translateY(-100%); }
}
.single-body .article-cta:focus-visible .fill-swap-btn__label-inner { transform: translateY(-100%); }

.single-body .article-cta:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 4px;
}

@media (max-width: 899px) {
	.single-body .wp-block-button__link.article-cta {
		min-height: 60px;
		padding: 16px 24px;
		font-size: 16px;
		gap: 16px;
		--fill-swap-arrow-size: 16px;
	}
}

.single-body img {
	width: 100%;
	object-fit: cover;
}

.single-body figure,
.single-body .wp-block-image {
	margin-top: 40px;
}

.single-body h2 + figure,
.single-body h2 + .wp-block-image {
	margin-top: 20px;
}

.single-body figure + *,
.single-body .wp-block-image + * {
	margin-top: 60px;
}

.single-body ul,
.single-body ol {
	padding-left: 24px;
}

/* ---------- 執筆者 ---------- */

.post-author {
	display: grid;
	margin-top: 80px;
	padding: 40px 32px;
	grid-template-columns: 180px minmax(0, 1fr);
	gap: 24px;
	border: 1px solid #656565;
	border-radius: 8px;
	background: var(--color-surface);
}

.post-author__avatar {
	width: 180px;
	height: 180px;
	border-radius: 50%;
	object-fit: cover;
	background: #d9d9d9;
}

.post-author__label {
	margin: 0;
	color: var(--color-accent);
	font-family: var(--font-en);
	font-size: 16px;
	line-height: 1.4;
	letter-spacing: 0.04em;
}

.post-author__role {
	margin: 4px 0 0;
	font-size: 14px;
	line-height: 1.8;
	letter-spacing: 0.04em;
}

.post-author__name {
	margin: 4px 0 0;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.8;
	letter-spacing: 0.04em;
}

.post-author__bio {
	margin-top: 20px;
	font-size: 14px;
	line-height: 1.8;
	letter-spacing: 0.04em;
}

.post-author__bio p {
	margin: 0;
}

/* ---------- 記事内お問い合わせ ---------- */

.post-contact {
	margin-top: 80px;
	padding: 60px 32px 80px;
	border-radius: 12px;
	background: #fff;
	color: var(--color-ink);
	text-align: center;
}

.post-contact__en {
	margin: 0;
	color: var(--color-accent);
	font-family: var(--font-en);
	font-size: 24px;
	font-weight: 600;
	line-height: 1.4;
}

.post-contact__title {
	margin: 4px 0 0;
	font-size: 42px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.04em;
}

.post-contact__lead {
	margin: 40px 0 0;
	font-size: 14px;
	line-height: 1.8;
	letter-spacing: 0.04em;
	text-align: left;
}

.post-contact .contact-form {
	margin-top: 60px;
	text-align: left;
}

/* ---------- サイドバー ---------- */

.post-side {
	display: grid;
	gap: 60px;
}

.post-side__heading {
	margin: 0 0 24px;
	padding-bottom: 16px;
	border-bottom: 1px solid rgb(255 255 255 / 45%);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.8;
	letter-spacing: 0.04em;
}

.side-card-list,
.post-side__downloads {
	display: grid;
	margin: 0;
	padding: 0;
	gap: 16px;
	list-style: none;
}

.side-card a {
	display: block;
	padding: 32px 24px;
	border-radius: 8px;
	background: #fff;
	color: var(--color-ink);
	text-decoration: none;
}

.side-card__meta {
	display: flex;
	margin: 0;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	font-size: 14px;
	line-height: 1.8;
	letter-spacing: 0.04em;
}

.side-card__meta time {
	font-family: var(--font-en);
}

.side-card__meta span {
	color: var(--color-accent);
	text-align: right;
}

.side-card__title {
	display: -webkit-box;
	overflow: hidden;
	margin: 24px 0 0;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.8;
	letter-spacing: 0.04em;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.post-side__keywords {
	display: flex;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
	gap: 8px 12px;
	list-style: none;
	font-size: 16px;
	line-height: 1.8;
	letter-spacing: 0.04em;
}

.post-side__keywords a {
	text-decoration: none;
}

.post-side__banner {
	display: block;
	width: 100%;
	aspect-ratio: 8 / 5;
	object-fit: cover;
	background: #d9d9d9;
}

/* ---------- 900px以下（1カラム） ---------- */

/* ---------- 取材先パネル（インタビュー：Figma PC 15:4545 / SP 15:8377） ---------- */

.post-guest {
	margin-top: 40px;
	padding: 24px 32px;
	border-radius: 12px;
	background: #fff;
	color: var(--color-ink);
}

.post-guest__head {
	display: grid;
	grid-template-columns: 80px minmax(0, 1fr);
	gap: 32px;
	align-items: center;
}

.post-guest__logo {
	display: block;
	width: 80px;
	height: 80px;
	border: 1px solid #bababa;
	object-fit: contain;
	background: #fff;
}

.post-guest__name {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.8;
	letter-spacing: 0.04em;
}

.post-guest__project {
	display: grid;
	margin: 24px 0 0;
	padding-top: 24px;
	grid-template-columns: 128px minmax(0, 1fr);
	gap: 12px;
	border-top: 1px solid rgb(18 17 12 / 20%);
}

.post-guest__project dt {
	display: flex;
	align-items: center;
	border-right: 1px solid rgb(18 17 12 / 20%);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.8;
	letter-spacing: 0.04em;
}

.post-guest__project dd {
	margin: 0;
	font-size: 16px;
	line-height: 1.8;
	letter-spacing: 0.04em;
}

/* ---------- 一覧に戻る（インタビューのみ・PCのみ） ---------- */

.post-backlink {
	display: flex;
	margin: 80px 0 0;
	justify-content: center;
}

.post-backlink a {
	--fill-swap-from-bg: #fff;
	--fill-swap-from-color: var(--color-ink);
	--fill-swap-to-bg: var(--color-ink);
	--fill-swap-to-color: #fff;
	--fill-swap-border: #fff;
	--fill-swap-arrow-size: 16px;

	display: flex;
	width: 405px;
	min-height: 76px;
	padding: 16px 40px;
	align-items: center;
	justify-content: space-between;
	border: 1px solid #fff;
	border-radius: 70px;
	background: #fff;
	color: var(--color-ink);
	font-size: 20px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-decoration: none;
}

/* ---------- サイドカード（インタビュー） ---------- */

.side-card--interview a {
	padding: 32px 24px;
}

.side-card--interview .side-card__title {
	margin-top: 0;
}

.side-card__guest {
	display: flex;
	margin: 24px 0 0;
	align-items: center;
	gap: 16px;
	font-size: 16px;
	line-height: 1.8;
	letter-spacing: 0.04em;
}

/* Figmaの会社アイコン（32×34.75）。灰色の仮置きではなく常時この形。 */
.side-card__logo {
	display: block;
	width: 32px;
	height: auto;
	flex: none;
}


/* ---------- クライアント情報パネル：導入事例（Figma PC 15:3456 / SP 15:7549） ---------- */

.post-guest--work .post-guest__head {
	grid-template-columns: 1fr;
	gap: 0;
}

.post-guest--work .post-guest__summary {
	margin-top: 24px;
	padding: 24px 32px;
	border-radius: 12px;
	background: #f4f6f9;
}

.post-guest__summary-block + .post-guest__summary-block {
	margin-top: 24px;
	padding-top: 24px;
	border-top: 1px solid rgb(18 17 12 / 20%);
}

.post-guest__summary-block h3 {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.8;
	letter-spacing: 0.04em;
}

.post-guest__summary-block ul {
	margin: 8px 0 0;
	padding-left: 24px;
	list-style: disc;
	font-size: 16px;
	line-height: 1.8;
	letter-spacing: 0.04em;
}


/* ---------- ニュース詳細（Figma PC 15:844 / SP 15:5791） ---------- */

/* サイドバーを持たず、890pxの本文が中央に1カラムで並ぶ。 */
.news-single {
	padding-top: 122px;
	padding-bottom: var(--section-space);
}

.news-single__inner {
	width: min(890px, calc(100% - (var(--page-gutter) * 2)));
	margin: 54px auto 0;
}

.post-header--news .post-header__meta {
	color: #bababa;
}

.post-header--news .post-header__meta span {
	display: block;
	margin-right: auto;
	color: var(--color-accent);
	text-align: left;
}

.post-header--news .post-header__title {
	margin-top: 20px;
}

.post-backlink--news a {
	border-radius: 4px;
	background: #fff;
	color: var(--color-ink);
}

@media (max-width: 899px) {
	.single-layout {
		grid-template-columns: 1fr;
		gap: 80px;
	}
}

/* ---------- SP ---------- */

@media (max-width: 899px) {
	/* SPデザインにパンくずはなく、本文が上端から始まる。 */
	.content-single {
		padding-top: 100px;
	}

	.content-single > .breadcrumb {
		display: none;
	}

	.single-layout {
		margin-top: 0;
		gap: 60px;
	}

	.post-header__meta {
		color: #fff;
		font-size: 12px;
		line-height: 1.4;
	}

	.post-header__meta span {
		display: block;
		color: var(--color-accent);
	}

	.post-header__title {
		margin-top: 20px;
		font-size: 20px;
		line-height: 1.6;
	}

	.post-header__tags {
		margin-top: 4px;
		gap: 8px 16px;
		font-size: 12px;
	}

	.post-header__image {
		margin-top: 40px;
	}

	.post-index {
		margin-top: 20px;
		padding: 32px 20px;
	}

	.post-index__label {
		text-transform: capitalize;
		font-size: 16px;
		line-height: 1.8;
	}

	.post-index__toggle {
		text-transform: lowercase;
		font-size: 14px;
	}

	.post-index__item--h2 {
		color: #000;
		font-size: 14px;
	}

	.post-index__item--h3,
	.post-index__item--h4 {
		color: #000;
		margin-top: 12px;
		font-size: 12px;
	}

	.post-index__item--h3 {
		padding-left: 8px;
	}

	.post-index__item--h4 {
		padding-left: 16px;
	}

	.single-body {
		margin-top: 40px;
		font-size: 14px;
	}

	.single-body > * + * {
		margin-top: 24px;
	}

	.single-body h2 {
		margin-top: 48px;
		font-size: 20px;
		line-height: 1.6;
	}

	.single-body h3 {
		font-size: 16px;
	}

	.single-body h3 + * {
		margin-top: 20px;
	}

	.single-body figure,
	.single-body .wp-block-image {
		margin-top: 24px;
	}

	.single-body figure + *,
	.single-body .wp-block-image + * {
		margin-top: 40px;
	}

	/* SPフレームに執筆者欄はないが、E-E-A-T上必要なため縮小して表示する。 */
	.post-author {
		margin-top: 60px;
		padding: 24px 20px;
		grid-template-columns: 100px minmax(0, 1fr);
		gap: 16px;
	}

	.post-author__avatar {
		width: 100px;
		height: 100px;
	}

	.post-author__label {
		font-size: 14px;
	}

	.post-author__role,
	.post-author__bio {
		font-size: 12px;
	}

	.post-author__name {
		font-size: 16px;
	}

	.post-author__bio {
		margin-top: 12px;
	}

	.post-contact {
		margin-top: 60px;
		padding: 39px 20px 60px;
	}

	.post-contact__en {
		font-size: 16px;
		line-height: 1.2;
	}

	.post-contact__title {
		margin-top: 8px;
		font-size: 20px;
		line-height: 1.6;
	}

	.post-contact__lead {
		margin-top: 32px;
		font-size: 12px;
	}

	.post-contact .contact-form {
		margin-top: 35px;
	}

	.post-side {
		gap: 60px;
	}

	.post-side__heading {
		font-size: 16px;
	}

	.side-card-list,
	.post-side__downloads {
		gap: 12px;
	}

	.side-card a {
		padding: 32px 20px;
	}

	.side-card__meta {
		font-size: 12px;
	}

	.side-card__meta time {
		color: #bababa;
	}

	.side-card__title {
		margin-top: 16px;
		font-size: 14px;
		line-height: 1.8;
	}

	.post-side__keywords {
		font-size: 14px;
	}

	.post-side__banner {
		aspect-ratio: 8 / 5;
	}

	/* ---------- インタビュー variant（SP） ---------- */

	.post-guest {
		margin-top: 20px;
		padding: 32px 20px;
	}

	.post-guest__head {
		grid-template-columns: 64px minmax(0, 1fr);
		gap: 20px;
	}

	.post-guest__logo {
		width: 64px;
		height: 64px;
	}

	.post-guest__name {
		font-size: 16px;
	}

	.post-guest__project {
		margin-top: 20px;
		padding-top: 20px;
		grid-template-columns: 1fr;
		gap: 8px;
	}

	.post-guest__project dt {
		border-right: 0;
		font-size: 14px;
	}

	.post-guest__project dd {
		font-size: 14px;
	}

	.post-guest--work .post-guest__summary {
		margin-top: 20px;
		padding: 24px 16px;
	}

	.post-guest__summary-block h3 {
		font-size: 14px;
	}

	.post-guest__summary-block ul {
		padding-left: 18px;
		font-size: 12px;
	}

	.news-single {
		padding-top: 100px;
	}

	.news-single > .breadcrumb {
		display: none;
	}

	.news-single__inner {
		margin-top: 0;
	}

	.post-header--news .post-header__title {
		margin-top: 20px;
	}

	.post-backlink--news a {
		--fill-swap-arrow-size: 12px;
		width: 100%;
		min-height: 60px;
		justify-content: center;
		font-size: 14px;
	}

	.post-backlink--news .fill-swap-btn__arrow {
		position: absolute;
		right: 23px;
		top: calc(50% - 6px);
	}

	/* インタビューのSPフレームには「一覧に戻る」ボタンがない。 */
	.post-backlink {
		display: none;
	}

	/* ニュースのSPフレームにはボタンがある。 */
	.post-backlink--news {
		display: flex;
	}

	.side-card--interview a {
		padding: 32px 20px;
	}

	.side-card__guest {
		margin-top: 20px;
		gap: 8px;
		font-size: 14px;
	}

	.side-card__logo {
		width: 24px;
	}

	/* 資料バナーも入稿画像と同じ8:5を維持する。 */
	.post-side--interview .post-side__banner {
		aspect-ratio: 8 / 5;
	}
}

/* Existing medialist articles author their paragraph gaps with spacer blocks.
 * Preserve those heights without adding the new article layout's margins twice.
 */
.single-medialist .single-body > .wp-block-spacer,
.single-medialist .single-body > .wp-block-spacer + :not(h2):not(h3):not(h4) {
	margin-top: 0;
	margin-bottom: 0;
}

/* Unset guest image: no empty image column. */
.post-guest__head:not(:has(> img)) {
	grid-template-columns: minmax(0, 1fr);
}

/* Per-article writer: optional photo and a full-width biography on SP. */
.post-author--no-image { grid-template-columns: minmax(0, 1fr); }
.post-author__body { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 899px) {
	.post-author { grid-template-columns: 80px minmax(0, 1fr); gap: 0 16px; }
	.post-author__avatar { grid-column: 1; grid-row: 1 / 4; width: 80px; height: 80px; }
	.post-author__body { display: contents; }
	.post-author__label, .post-author__role, .post-author__name { grid-column: 2; overflow-wrap: anywhere; }
	.post-author__bio { grid-column: 1 / -1; margin-top: 20px; font-size: 14px; line-height: 1.8; overflow-wrap: anywhere; }
	.post-author--no-image { grid-template-columns: minmax(0, 1fr); }
	.post-author--no-image .post-author__label,
	.post-author--no-image .post-author__role,
	.post-author--no-image .post-author__name { grid-column: 1; }
}