/**
 * ページレイアウト（layout）＋メインコンテンツ（content）。
 *
 * Figma: main（node 902:17566）
 * - sidebar=none: PC 934:18227 / SP 1005:33120
 * - sidebar=left（開閉なし・PC show）: 902:17565
 * - sidebar=right（archive・PC 開閉・既定 show=false）: 934:16577 / 934:17458
 * - SP sticky top（show false/true）: 1005:31664 / 934:18485（left/right 同見た目）
 *
 * content__* はページ全体の領域名（コンポーネント内 __head 等とは別名前空間）。
 */

/* -------------------------------------------------------------------------- */
/* content（本文カラム）                                                       */
/* -------------------------------------------------------------------------- */

.content {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	background: var(--wp--preset--color--base-white, #fff);
	/* 全幅ブロックのはみ出しを許容 */
	overflow: visible;
}

.content__inner {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	width: 100%;
	gap: var(--wp--custom--organism--lg);
}

.content__head,
.content__body,
.content__foot {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	box-sizing: border-box;
	width: 100%;
	padding-block: 0;
}

/* TODO(handoff): content__excerpt は仮のクラス名。文字サイズと行間のみ本文と分ける。 */
.content__excerpt {
	margin: 0;
	font-size: var(--wp--preset--font-size--text-lg);
	line-height: var(--wp--custom--line-height--wide);
}

/* 1カラム（sidebar=none） */
.content[data-sidebar="none"] {
	padding-block: var(--wp--custom--organism--md);
}

.content[data-sidebar="none"] .content__head,
.content[data-sidebar="none"] .content__body:where(:not(.content__body--list)),
.content[data-sidebar="none"] .content__foot {
	padding-inline: var(--wp--custom--organism--xs);
}

/* 固定ページの 1カラム（1column.html）は本文の左右余白なし。content__foot は上のまま */
.content.content--1column .content__head,
.content.content--1column .content__body {
	padding-inline: 0;
}

/*
 * 1カラムの本文の直下ブロック（インサーターで足した段落・見出し・画像など）は左右に molecule/rg（PC・SP）。
 * 本文は constrained で、コアが直下に margin-inline: auto !important を付けるため、幅を縮めて中央に置く。
 * 全幅で作るもの（パターンのルート・alignfull / alignwide・Yoast の FAQ ブロック）は除く。SP の main の左右余白は 0（下の SP の節）。
 */
.content.content--1column .content__body > .wp-block-post-content > :where(:not(.alignfull, .alignwide, .section-feature, .section-chart, .section-repeat, .wp-block-yoast-faq-block)) {
	max-width: calc(100% - (var(--wp--custom--molecule--rg) * 2));
}

/* 2カラムの content__* 左右余白は PC のみ（SP は main の molecule/rg のみ） */
@media (min-width: 768px) {
	/* 2カラム左：pl organism/sm / pr organism/xs */
	.layout[data-sidebar="left"] .content .content__head,
	.layout[data-sidebar="left"] .content .content__body:where(:not(.content__body--list)),
	.layout[data-sidebar="left"] .content .content__foot {
		padding-inline-start: var(--wp--custom--organism--sm);
		padding-inline-end: var(--wp--custom--organism--xs);
	}

	/* 左・開閉あり: 閉じ時は左右 xs、開き時は上記（pl sm / pr xs） */
	.layout[data-sidebar="left"][data-sidebar-toggle="both"][data-sidebar-show="false"] .content .content__head,
	.layout[data-sidebar="left"][data-sidebar-toggle="both"][data-sidebar-show="false"] .content .content__body:where(:not(.content__body--list)),
	.layout[data-sidebar="left"][data-sidebar-toggle="both"][data-sidebar-show="false"] .content .content__foot {
		padding-inline: var(--wp--custom--organism--xs);
	}

	/* 2カラム右・開閉あり: 閉じ時左右 xs、開き時 pl xs / pr sm */
	.layout[data-sidebar="right"][data-sidebar-toggle="both"] .content .content__head,
	.layout[data-sidebar="right"][data-sidebar-toggle="both"] .content .content__body:where(:not(.content__body--list)),
	.layout[data-sidebar="right"][data-sidebar-toggle="both"] .content .content__foot {
		padding-inline: var(--wp--custom--organism--xs);
	}

	.layout[data-sidebar="right"][data-sidebar-toggle="both"][data-sidebar-show="true"] .content .content__head,
	.layout[data-sidebar="right"][data-sidebar-toggle="both"][data-sidebar-show="true"] .content .content__body:where(:not(.content__body--list)),
	.layout[data-sidebar="right"][data-sidebar-toggle="both"][data-sidebar-show="true"] .content .content__foot {
		padding-inline-start: var(--wp--custom--organism--xs);
		padding-inline-end: var(--wp--custom--organism--sm);
	}

	/* 開閉なし右: 開き時と同じ pl xs / pr sm */
	.layout[data-sidebar="right"][data-sidebar-toggle="sp"] .content .content__head,
	.layout[data-sidebar="right"][data-sidebar-toggle="sp"] .content .content__body:where(:not(.content__body--list)),
	.layout[data-sidebar="right"][data-sidebar-toggle="sp"] .content .content__foot {
		padding-inline-start: var(--wp--custom--organism--xs);
		padding-inline-end: var(--wp--custom--organism--sm);
	}
}

.layout[data-sidebar="left"] .content {
	padding-block: var(--wp--custom--organism--md);
}

.layout[data-sidebar="right"] .content {
	padding-block: var(--wp--custom--organism--md);
}

.content__body > .wp-block-post-content,
.content__body > .entry-content {
	width: 100%;
}

/*
 * 一覧（archive / home / archive-events）：カードの線を画面端・サイドバーの線まで通すため左右余白は 0。
 * 上の 1カラム・2カラムの padding-inline は :where(:not(.content__body--list)) で外している（詳細度は変えない。
 * 1カラムの指定はメディアクエリの外にあり、SP の 0 と同じ詳細度で後勝ちさせているため）。
 * カード以外（ページ送り・0 件の文言）は、外す前と同じ位置に戻す。
 */
.content__body--list :is(.wp-block-query-pagination, .wp-block-query-no-results) {
	box-sizing: border-box;
	padding-inline: var(--wp--custom--organism--xs);
}

/* 関連カード用の見出し。間隔は本文の h2 と同じく、続く見出しの上に付ける。 */
.content__foot > .wp-block-heading {
	margin-block-start: var(--wp--custom--organism--xxs);
	margin-block-end: 0;
}

.content__foot > .wp-block-heading:first-child {
	margin-block-start: 0;
}

.content__foot > .card-list {
	margin-block-start: var(--wp--custom--molecule--rg);
}

/* 写真のヒーロー（sumida-cc/photo-hero）のあるページは main の上下の余白を 0（PC・SP）。 */
main.content:has(.photo-hero) {
	padding-block: 0;
}

/*
 * トップ（front-page.html）：セクション（front-section）が上・左右の余白を持つため、main の上の余白とセクションの間隔は 0。
 * 最後のセクション〜CTA の余白は main の下の余白（organism/xxl。Figma の main の padding と同じ。PC・SP）。
 */
.content.content--front {
	padding-block: 0 var(--wp--custom--organism--xxl);
}

.content--front > .content__inner {
	gap: 0;
}

/*
 * リード（404 の案内文・検索結果の件数の文）。Figma の text-md 18px は theme.json の text-lg。
 */
.content__lead {
	margin: 0;
	padding-block: var(--wp--custom--molecule--rg);
	color: var(--wp--preset--color--base-black);
	font-size: var(--wp--preset--font-size--text-lg);
	line-height: var(--wp--custom--line-height--x-wide);
}

.content__lead > p {
	margin: 0;
}

/*
 * 404（404.html）。Figma 3235:56724：main の上は 0、__body の上下が 160px、HOME ボタンの上が organism/sm。
 * __body の上下は Figma の organism/xxl（160px）だが、theme.json の organism/xxl は PC で 360px になるため、
 * PC で 160px になる organism/md にする。下の余白（CTA まで）は 1カラムのほかのページと同じ main の padding。
 */
.content.content--404 {
	padding-block-start: 0;
}

.content--404 > .content__inner {
	gap: 0;
}

.content--404 .content__body {
	align-items: center;
	padding-block: var(--wp--custom--organism--md);
}

.content--404 .content__lead {
	box-sizing: border-box;
	width: 100%;
	max-width: 60rem;
	text-align: center;
}

.content--404 .content__body > .search-form {
	margin-block-start: var(--wp--custom--organism--xxs);
}

.content--404 .content__foot {
	padding-block-start: var(--wp--custom--organism--sm);
}

/*
 * 検索結果（search.html）。Figma 3235:58575：リード（__head）の直後にカードの並び（__body）。
 * リードの幅はカードの並びと同じ（content__head の左右の余白）。0件・未入力のときはリードの下に検索フォーム（左揃え）。
 */
.content--search > .content__inner {
	gap: 0;
}

/* 見出しの無い下層ページのカードが先頭に来るときは、本文の下端からの距離を関連カードの見出しまでとそろえる。 */
.content__foot > .card-list--category-page:first-child {
	margin-block-start: 0;
}

/* about の子孫のページの「トップへ戻る」（下層ページのカードの下・中央） */
.content__foot > .content__back {
	display: flex;
	justify-content: center;
	margin-block-start: var(--wp--custom--organism--sm);
}

@media (min-width: 768px) {
	.content__back-break {
		display: none;
	}
}

/* SP の関連カードは main の左右余白（molecule/rg）を打ち消して画面の全幅（外側の線は card.css で消す）。 */
@media (max-width: 767px) {
	.content__foot > .card-list {
		box-sizing: border-box;
		width: calc(100% + (var(--wp--custom--molecule--rg) * 2));
		max-width: none;
		margin-inline: calc(var(--wp--custom--molecule--rg) * -1);
	}
}

/*
 * 本文の直下ブロックの間隔は、続く要素の margin-block-start に付ける。
 * margin-block-end はコアと同じ 0。左右の align 用マージンは触らない。
 * カラムやグループの内側はコアの blockGap に任せる。
 * カードリンクはラッパーのない a.card-link なので同じ対象に含める。
 * 投稿エディタのキャンバスは .is-root-container.wp-block-post-content。
 */
.content__body :is(.wp-block-post-content, .entry-content) > :is([class*="wp-block-"], a.card-link),
.editor-styles-wrapper .is-root-container.wp-block-post-content > :is([class*="wp-block-"], a.card-link) {
	margin-block-start: var(--wp--custom--molecule--rg);
	margin-block-end: 0;
}

/*
 * ギャラリーの横並びは、フロントだけ wp-block-* の無いラッパー（div.gallery）で包まれる。
 * 上の :is() に足すと詳細度が上がり見出しの間隔を上書きするため、別に書く。
 */
.content__body :is(.wp-block-post-content, .entry-content) > div.gallery[data-ui="gallery"] {
	margin-block-start: var(--wp--custom--molecule--rg);
	margin-block-end: 0;
}

.content__body :is(.wp-block-post-content, .entry-content) > div.gallery[data-ui="gallery"]:first-child {
	margin-block-start: 0;
}

.content__body :is(.wp-block-post-content, .entry-content) > h2[class*="wp-block-"],
.editor-styles-wrapper .is-root-container.wp-block-post-content > h2[class*="wp-block-"] {
	margin-block-start: var(--wp--custom--organism--xxs);
}

.content__body :is(.wp-block-post-content, .entry-content) > h3[class*="wp-block-"],
.editor-styles-wrapper .is-root-container.wp-block-post-content > h3[class*="wp-block-"] {
	margin-block-start: var(--wp--custom--molecule--xxl);
}

.content__body :is(.wp-block-post-content, .entry-content) > h4[class*="wp-block-"],
.editor-styles-wrapper .is-root-container.wp-block-post-content > h4[class*="wp-block-"] {
	margin-block-start: var(--wp--custom--molecule--lg);
}

/*
 * 目次・HTML アンカーの移動先の見出し。固定ヘッダーに隠れないよう、その高さ分を空ける。
 * scroll-padding-top は使わない（events のセクションと同じく移動先の要素で取る）。
 */
.content__body :is(h2, h3)[id] {
	scroll-margin-top: var(--content-anchor-offset, calc(var(--site-header-height) + var(--wp--custom--molecule--rg, 1.5rem)));
}

.content__body :is(h2, h3)[id]:focus:not(:focus-visible) {
	outline: none;
}

/* SP はヘッダーの下にサイドバーのバー（約 54px）と開閉ボタン（約 28px）が固定で出るため、その分も空ける */
@media (max-width: 767px) {
	.layout:has(.layout__sidebar [data-ui="sidebar"]) .content__body {
		--content-anchor-offset: calc(var(--site-header-height) + 5.5rem);
	}
}

/* 編集画面の本文キャンバスだけ左右を molecule/rg。表示側の余白は変えない。 */
.editor-styles-wrapper .is-root-container.wp-block-post-content {
	box-sizing: border-box;
	padding-inline: var(--wp--custom--molecule--rg);
}

/* 本文先頭は上を 0。先頭が見出しでもこちらを優先する。 */
.content__body :is(.wp-block-post-content, .entry-content) > :is([class*="wp-block-"], a.card-link):first-child,
.editor-styles-wrapper .is-root-container.wp-block-post-content > :is([class*="wp-block-"], a.card-link):first-child {
	margin-block-start: 0;
}

/*
 * YouTube・Vimeo の埋め込みは本文の幅いっぱい・16:9。
 * 縦横比のクラス（wp-has-aspect-ratio）はエディタがプレビューを取得したときに付くため、
 * 取得前に保存した・取得に失敗した埋め込みにはクラスが無く、iframe の width / height 属性（500×281）のままになる。
 * クラスがあるときはコアの ::before の高さと同じ値になるので、併用しても高さは変わらない。
 */
.wp-block-embed:is(.is-provider-youtube, .is-provider-vimeo) .wp-block-embed__wrapper {
	position: relative;
	aspect-ratio: 16 / 9;
}

.wp-block-embed:is(.is-provider-youtube, .is-provider-vimeo) .wp-block-embed__wrapper > iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/*
 * 区切り線。3スタイルとも色は line-grey、線は 1px（色の設定 UI は theme.json で出さない）。
 * コアの theme.css（.wp-block-separator の border-bottom 2px）に勝つよう hr で詳細度を足す。
 * 線の長さ（デフォルトの 100px）と、ドットに線を引かない指定（border: none）はコアのまま。
 */
hr.wp-block-separator {
	color: var(--wp--preset--color--line-grey);
	border-bottom-width: var(--wp--custom--border-width--thin);
	border-bottom-color: var(--wp--preset--color--line-grey);
}

/*
 * useRootPaddingAwareAlignments 由来の .has-global-padding が
 * main（.content）の padding-inline と二重にならないよう打ち消し。
 * ルート左右 padding は theme.json で 0。万一クラスが残っても 0 にする。
 */
.content .has-global-padding {
	padding-inline: 0;
}

@media (max-width: 767px) {
	/*
	 * SP の左右余白は main（.content）のみ molecule/rg。
	 * セクション側の padding-inline は 0（全幅ブロック用）。
	 */
	.content {
		padding-inline: var(--wp--custom--molecule--rg);
		padding-block: var(--wp--custom--organism--sm);
		overflow: visible;
	}

	.content[data-sidebar="none"] {
		padding-block: var(--wp--custom--organism--sm);
	}

	.content__inner {
		gap: var(--wp--custom--organism--xxs);
	}

	.content[data-sidebar="none"] .content__head,
	.content[data-sidebar="none"] .content__body,
	.content[data-sidebar="none"] .content__foot,
	.layout[data-sidebar="left"] .content .content__head,
	.layout[data-sidebar="left"] .content .content__body,
	.layout[data-sidebar="left"] .content .content__foot,
	.layout[data-sidebar="right"] .content .content__head,
	.layout[data-sidebar="right"] .content .content__body,
	.layout[data-sidebar="right"] .content .content__foot {
		padding-inline: 0;
	}

	.layout[data-sidebar="left"] .content,
	.layout[data-sidebar="right"] .content {
		padding-block: var(--wp--custom--organism--sm);
	}

	/* 一覧は main の左右余白も 0（Figma SP はカードが 393 の全幅）。 */
	.content:has(> .content__inner > .content__body--list) {
		padding-inline: 0;
	}

	.content__body--list :is(.wp-block-query-pagination, .wp-block-query-no-results) {
		padding-inline: var(--wp--custom--molecule--rg);
	}

	/*
	 * 1カラムの固定ページは main の左右余白も 0（パターン・写真のヒーローは PC と同じく画面の全幅）。
	 * 本文の直下ブロックは上の max-width で、content__head・content__foot は自分の padding で molecule/rg。
	 * content__foot の関連カードは負のマージンでこの padding を打ち消して全幅のまま。
	 */
	.content.content--1column {
		padding-inline: 0;
	}

	.content.content--1column .content__head,
	.content.content--1column .content__foot {
		padding-inline: var(--wp--custom--molecule--rg);
	}

	.content.content--front {
		padding-block: 0 var(--wp--custom--organism--xxl);
		padding-inline: 0;
	}

	/* 404 の SP：余白はほかの 1カラムのページと同じ（main の padding と content__inner の gap）。案内文は左揃え。 */
	.content.content--404 {
		padding-block-start: var(--wp--custom--organism--sm);
	}

	.content--404 > .content__inner {
		gap: var(--wp--custom--organism--xxs);
	}

	.content--404 .content__body {
		align-items: stretch;
		padding-block: 0;
	}

	.content--404 .content__lead {
		max-width: none;
		padding-block: 0;
		text-align: start;
	}

	.content--404 .content__foot {
		padding-block-start: 0;
	}

	/* 検索結果の SP：一覧なので main の左右余白は 0（カードは全幅）。リードとフォームは molecule/rg の内側に。 */
	.content.content--search .content__head {
		padding-inline: var(--wp--custom--molecule--rg);
	}
}

/* -------------------------------------------------------------------------- */
/* layout（2カラム殻）                                                         */
/* -------------------------------------------------------------------------- */

.layout {
	display: flex;
	align-items: flex-start;
	width: 100%;
	background: var(--wp--preset--color--base-white, #fff);
}

.layout[data-sidebar="left"] {
	justify-content: space-between;
}

/* -------------------------------------------------------------------------- */
/* layout: sidebar=left・開閉なし（page / single）                               */
/* -------------------------------------------------------------------------- */

.layout[data-sidebar="left"][data-sidebar-toggle="sp"] .layout__sidebar {
	box-sizing: border-box;
	flex: 0 0 30%;
	width: 30%;
	max-width: 30%;
	align-self: stretch;
	position: relative;
	border-inline-end: var(--wp--custom--border-width--thin, 1px) solid var(--wp--preset--color--line-grey, #9e9e9e);
}

/* ページヘッダーの戻るリンクを複製し、サイドバー左下にも置く。SP は開いているときだけ */
.layout__sidebar > .page-header__back {
	position: absolute;
	z-index: 2;
	left: var(--wp--custom--molecule--lg);
	bottom: var(--wp--custom--molecule--lg);
}

.layout[data-sidebar="left"][data-sidebar-toggle="sp"] .layout__content {
	flex: 1 1 70%;
	width: 70%;
	max-width: 70%;
	min-width: 0;
}

.layout[data-sidebar="left"][data-sidebar-toggle="sp"] .layout__sidebar-bar,
.layout[data-sidebar="left"][data-sidebar-toggle="sp"] .layout__sidebar-toggle {
	display: none;
}

.layout[data-sidebar="left"][data-sidebar-toggle="sp"] .layout__sidebar-panel {
	display: block;
	position: sticky;
	top: 0;
	box-sizing: border-box;
	width: 100%;
	padding-block-start: var(--wp--custom--organism--md);
	padding-block-end: var(--wp--custom--organism--rg);
	padding-inline: var(--wp--custom--molecule--lg);
}

/* -------------------------------------------------------------------------- */
/* layout: sidebar=left・開閉あり（2column-left-toggle）                         */
/* -------------------------------------------------------------------------- */

/* hidden だとスクロールコンテナになり、中の sticky（パネル・開閉ボタン）が効かないため clip。 */
.layout[data-sidebar="left"][data-sidebar-toggle="both"] {
	overflow-x: clip;
}

.layout[data-sidebar="left"][data-sidebar-toggle="both"] .layout__content,
.layout[data-sidebar="left"][data-sidebar-toggle="both"] .layout__sidebar {
	transition:
		flex-basis 0.5s ease,
		width 0.5s ease,
		max-width 0.5s ease;
}

.layout[data-sidebar="left"][data-sidebar-toggle="both"][data-sidebar-show="true"] .layout__content {
	flex: 1 1 70%;
	width: 70%;
	max-width: 70%;
	min-width: 0;
}

.layout[data-sidebar="left"][data-sidebar-toggle="both"][data-sidebar-show="true"] .layout__sidebar {
	box-sizing: border-box;
	flex: 0 0 30%;
	width: 30%;
	max-width: 30%;
	align-self: stretch;
	position: relative;
	border-inline-end: var(--wp--custom--border-width--thin, 1px) solid var(--wp--preset--color--line-grey, #9e9e9e);
	overflow: visible;
}

.layout[data-sidebar="left"][data-sidebar-toggle="both"][data-sidebar-show="false"] .layout__content {
	flex: 1 1 auto;
	width: 100%;
	max-width: none;
	min-width: 0;
}

.layout[data-sidebar="left"][data-sidebar-toggle="both"][data-sidebar-show="false"] .layout__sidebar {
	box-sizing: border-box;
	flex: 0 0 0;
	width: 0;
	max-width: 0;
	align-self: stretch;
	position: relative;
	border-inline-end: var(--wp--custom--border-width--thin, 1px) solid var(--wp--preset--color--line-grey, #9e9e9e);
	overflow: visible;
}

.layout[data-sidebar="left"][data-sidebar-toggle="both"] .layout__sidebar-bar,
.layout[data-sidebar="left"][data-sidebar-toggle="both"] .layout__sidebar-toggle--sp {
	display: none;
}

.layout[data-sidebar="left"][data-sidebar-toggle="both"] .layout__sidebar-panel {
	box-sizing: border-box;
	width: 100%;
	min-width: 12rem;
	padding-block-start: var(--wp--custom--organism--md);
	padding-block-end: var(--wp--custom--organism--rg);
	padding-inline: var(--wp--custom--molecule--lg);
	position: sticky;
	top: 0;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition:
		opacity 0.5s ease,
		visibility 0.5s ease;
}

.layout[data-sidebar="left"][data-sidebar-toggle="both"][data-sidebar-show="false"] .layout__sidebar-panel {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

/*
 * PC トグル（左）: 左カラムの右端（仕切り側）上。
 * 閉じ: translateX(100%) でライン外／開き: translateX(0)。
 */
.layout[data-sidebar="left"][data-sidebar-toggle="both"] .layout__sidebar-toggle--pc {
	display: block;
	position: sticky;
	top: 0;
	z-index: 2;
	order: -1;
	align-self: flex-end;
	width: auto;
	height: 0;
	overflow: visible;
	transform: translateX(100%);
	transition: transform 0.5s ease;
}

.layout[data-sidebar="left"][data-sidebar-toggle="both"][data-sidebar-show="true"] .layout__sidebar-toggle--pc {
	transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
	.layout[data-sidebar="left"][data-sidebar-toggle="both"] .layout__content,
	.layout[data-sidebar="left"][data-sidebar-toggle="both"] .layout__sidebar,
	.layout[data-sidebar="left"][data-sidebar-toggle="both"] .layout__sidebar-panel,
	.layout[data-sidebar="left"][data-sidebar-toggle="both"] .layout__sidebar-toggle--pc {
		transition: none;
	}
}

/* -------------------------------------------------------------------------- */
/* layout: sidebar=right・開閉なし（2column-right）                              */
/* -------------------------------------------------------------------------- */

.layout[data-sidebar="right"] {
	justify-content: space-between;
}

.layout[data-sidebar="right"][data-sidebar-toggle="sp"] .layout__content {
	flex: 1 1 70%;
	width: 70%;
	max-width: 70%;
	min-width: 0;
}

.layout[data-sidebar="right"][data-sidebar-toggle="sp"] .layout__sidebar {
	box-sizing: border-box;
	flex: 0 0 30%;
	width: 30%;
	max-width: 30%;
	align-self: stretch;
	position: relative;
	border-inline-start: var(--wp--custom--border-width--thin, 1px) solid var(--wp--preset--color--line-grey, #9e9e9e);
}

.layout[data-sidebar="right"][data-sidebar-toggle="sp"] .layout__sidebar-bar,
.layout[data-sidebar="right"][data-sidebar-toggle="sp"] .layout__sidebar-toggle {
	display: none;
}

.layout[data-sidebar="right"][data-sidebar-toggle="sp"] .layout__sidebar-panel {
	display: block;
	position: sticky;
	top: 0;
	box-sizing: border-box;
	width: 100%;
	padding-block-start: var(--wp--custom--organism--md);
	padding-block-end: var(--wp--custom--organism--rg);
	padding-inline: var(--wp--custom--molecule--lg);
}

/* -------------------------------------------------------------------------- */
/* layout: sidebar=right・開閉あり（archive）                                    */
/* -------------------------------------------------------------------------- */

/*
 * PC 右サイドバー開閉（0 ↔ 30%、0.5s）。
 * 閉じ時は overflow:visible でコーナータブを本文側へ出す。
 * パネルのはみ出しは .layout の overflow-x で抑える。
 */
/* hidden だとスクロールコンテナになり、中の sticky（パネル・開閉ボタン）が効かないため clip。 */
.layout[data-sidebar="right"][data-sidebar-toggle="both"] {
	overflow-x: clip;
}

.layout[data-sidebar="right"][data-sidebar-toggle="both"] .layout__content,
.layout[data-sidebar="right"][data-sidebar-toggle="both"] .layout__sidebar {
	transition:
		flex-basis 0.5s ease,
		width 0.5s ease,
		max-width 0.5s ease;
}

.layout[data-sidebar="right"][data-sidebar-toggle="both"][data-sidebar-show="true"] .layout__content {
	flex: 1 1 70%;
	width: 70%;
	max-width: 70%;
	min-width: 0;
}

.layout[data-sidebar="right"][data-sidebar-toggle="both"][data-sidebar-show="true"] .layout__sidebar {
	box-sizing: border-box;
	flex: 0 0 30%;
	width: 30%;
	max-width: 30%;
	align-self: stretch;
	position: relative;
	border-inline-start: var(--wp--custom--border-width--thin, 1px) solid var(--wp--preset--color--line-grey, #9e9e9e);
	overflow: visible;
}

.layout[data-sidebar="right"][data-sidebar-toggle="both"][data-sidebar-show="false"] .layout__content {
	flex: 1 1 auto;
	width: 100%;
	max-width: none;
	min-width: 0;
}

.layout[data-sidebar="right"][data-sidebar-toggle="both"][data-sidebar-show="false"] .layout__sidebar {
	box-sizing: border-box;
	flex: 0 0 0;
	width: 0;
	max-width: 0;
	align-self: stretch;
	position: relative;
	border-inline-start: var(--wp--custom--border-width--thin, 1px) solid var(--wp--preset--color--line-grey, #9e9e9e);
	overflow: visible;
}

.layout[data-sidebar="right"][data-sidebar-toggle="both"] .layout__sidebar-bar,
.layout[data-sidebar="right"][data-sidebar-toggle="both"] .layout__sidebar-toggle--sp {
	display: none;
}

.layout[data-sidebar="right"][data-sidebar-toggle="both"] .layout__sidebar-panel {
	box-sizing: border-box;
	width: 100%;
	min-width: 12rem;
	padding-block-start: var(--wp--custom--organism--md);
	padding-block-end: var(--wp--custom--organism--rg);
	padding-inline: var(--wp--custom--molecule--lg);
	position: sticky;
	top: 0;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition:
		opacity 0.5s ease,
		visibility 0.5s ease;
}

.layout[data-sidebar="right"][data-sidebar-toggle="both"][data-sidebar-show="false"] .layout__sidebar-panel {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

/*
 * PC は開閉ボタンもパネルと一緒に sticky。aside を縦の flex にし、ボタンは高さ 0 で先頭に置く
 * （パネルを押し下げない）。幅はボタンの幅（align-self）で、translateX はその幅で動く。
 */
@media (min-width: 768px) {
	.layout[data-sidebar="right"][data-sidebar-toggle="both"] .layout__sidebar,
	.layout[data-sidebar="left"][data-sidebar-toggle="both"] .layout__sidebar {
		display: flex;
		flex-direction: column;
	}

	/*
	 * タグが多く画面より高くなるため、sticky のパネルは画面の高さまでにして中でスクロール。
	 * パネルの端まで来たらページのスクロールに引き継ぐ（auto）。contain だとページの最後まで進めない。
	 */
	.layout[data-sidebar="right"][data-sidebar-toggle="both"] .layout__sidebar-panel,
	.layout[data-sidebar="left"][data-sidebar-toggle="both"] .layout__sidebar-panel {
		max-height: 100dvh;
		overflow-y: auto;
		overscroll-behavior-y: auto;
	}
}

.layout[data-sidebar="right"][data-sidebar-toggle="both"] .layout__sidebar-toggle--pc {
	display: block;
	position: sticky;
	top: 0;
	z-index: 2;
	order: -1;
	align-self: flex-start;
	width: auto;
	height: 0;
	overflow: visible;
	transform: translateX(-100%);
	transition: transform 0.5s ease;
}

.layout[data-sidebar="right"][data-sidebar-toggle="both"][data-sidebar-show="true"] .layout__sidebar-toggle--pc {
	transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
	.layout[data-sidebar="right"][data-sidebar-toggle="both"] .layout__content,
	.layout[data-sidebar="right"][data-sidebar-toggle="both"] .layout__sidebar,
	.layout[data-sidebar="right"][data-sidebar-toggle="both"] .layout__sidebar-panel,
	.layout[data-sidebar="right"][data-sidebar-toggle="both"] .layout__sidebar-toggle--pc {
		transition: none;
	}
}

@media (max-width: 767px) {
	.layout[data-sidebar="left"],
	.layout[data-sidebar="right"] {
		flex-direction: column;
		align-items: stretch;
		overflow-x: visible;
	}

	/* PC の overflow-x:hidden（開閉あり）は sticky を潰すので、SP では打ち消す */
	.layout[data-sidebar="left"][data-sidebar-toggle="both"],
	.layout[data-sidebar="right"][data-sidebar-toggle="both"] {
		overflow-x: visible;
	}

	/* SP: DOM が content→sidebar でもサイドバーを上に */
	.layout[data-sidebar="right"] .layout__sidebar {
		order: -1;
	}

	/*
	 * SP は常に幅 100%。
	 * PC の 30% / width:0 より詳細度を上げて打ち消す（toggle=sp / both × show）。
	 */
	.layout[data-sidebar="left"] .layout__sidebar,
	.layout[data-sidebar="left"] .layout__content,
	.layout[data-sidebar="right"] .layout__sidebar,
	.layout[data-sidebar="right"] .layout__content,
	.layout[data-sidebar="left"][data-sidebar-toggle="sp"] .layout__sidebar,
	.layout[data-sidebar="left"][data-sidebar-toggle="sp"] .layout__content,
	.layout[data-sidebar="right"][data-sidebar-toggle="sp"] .layout__sidebar,
	.layout[data-sidebar="right"][data-sidebar-toggle="sp"] .layout__content,
	.layout[data-sidebar="left"][data-sidebar-toggle="both"][data-sidebar-show="false"] .layout__sidebar,
	.layout[data-sidebar="left"][data-sidebar-toggle="both"][data-sidebar-show="true"] .layout__sidebar,
	.layout[data-sidebar="left"][data-sidebar-toggle="both"][data-sidebar-show="false"] .layout__content,
	.layout[data-sidebar="left"][data-sidebar-toggle="both"][data-sidebar-show="true"] .layout__content,
	.layout[data-sidebar="right"][data-sidebar-toggle="both"][data-sidebar-show="false"] .layout__sidebar,
	.layout[data-sidebar="right"][data-sidebar-toggle="both"][data-sidebar-show="true"] .layout__sidebar,
	.layout[data-sidebar="right"][data-sidebar-toggle="both"][data-sidebar-show="false"] .layout__content,
	.layout[data-sidebar="right"][data-sidebar-toggle="both"][data-sidebar-show="true"] .layout__content {
		flex: none;
		width: 100%;
		max-width: none;
		min-width: 0;
		transition: none;
	}

	.layout[data-sidebar="left"] .layout__sidebar,
	.layout[data-sidebar="right"] .layout__sidebar {
		/* header 下 sticky（固定ヘッダー高さは parts 配線後に調整） */
		position: sticky;
		top: 0;
		z-index: 40;
		border-inline-end: none;
		border-inline-start: none;
		border-block-end: var(--wp--custom--border-width--thin, 1px) solid var(--wp--preset--color--line-grey, #9e9e9e);
		background: var(--wp--preset--color--base-white, #fff);
		overflow: visible;
	}

	/*
	 * PC 側の position:relative（戻るリンクの基準、開閉時の幅 0）より詳細度を上げて sticky に戻す。
	 */
	.layout[data-sidebar="left"][data-sidebar-toggle="sp"] .layout__sidebar,
	.layout[data-sidebar="right"][data-sidebar-toggle="sp"] .layout__sidebar,
	.layout[data-sidebar="left"][data-sidebar-toggle="both"][data-sidebar-show="false"] .layout__sidebar,
	.layout[data-sidebar="left"][data-sidebar-toggle="both"][data-sidebar-show="true"] .layout__sidebar,
	.layout[data-sidebar="right"][data-sidebar-toggle="both"][data-sidebar-show="false"] .layout__sidebar,
	.layout[data-sidebar="right"][data-sidebar-toggle="both"][data-sidebar-show="true"] .layout__sidebar {
		position: sticky;
	}

	.layout[data-sidebar="left"] .layout__sidebar-bar,
	.layout[data-sidebar="right"] .layout__sidebar-bar,
	.layout[data-sidebar="left"][data-sidebar-toggle="sp"] .layout__sidebar-bar,
	.layout[data-sidebar="left"][data-sidebar-toggle="both"] .layout__sidebar-bar,
	.layout[data-sidebar="right"][data-sidebar-toggle="sp"] .layout__sidebar-bar,
	.layout[data-sidebar="right"][data-sidebar-toggle="both"] .layout__sidebar-bar {
		display: none;
	}

	.layout[data-sidebar="left"] .layout__sidebar-title,
	.layout[data-sidebar="right"] .layout__sidebar-title {
		flex: 1 1 auto;
		min-width: 0;
	}

	.layout[data-sidebar="left"] .layout__heading,
	.layout[data-sidebar="right"] .layout__heading {
		margin: 0;
		font-size: var(--wp--preset--font-size--large, 1.25rem);
		font-weight: 700;
		line-height: 1.4;
		color: var(--wp--preset--color--base-black, #000);
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	/*
	 * SP トグル: aside の border-bottom 直下（領域外）・右端 atom/rg。
	 * bottom:0 + translateY(100%) で、開閉でサイドバー高さが変わっても下辺に追従。
	 */
	.layout[data-sidebar="left"] .layout__sidebar-toggle,
	.layout[data-sidebar="left"] .layout__sidebar-toggle--sp,
	.layout[data-sidebar="left"][data-sidebar-toggle="sp"] .layout__sidebar-toggle,
	.layout[data-sidebar="left"][data-sidebar-toggle="both"] .layout__sidebar-toggle--sp,
	.layout[data-sidebar="right"] .layout__sidebar-toggle,
	.layout[data-sidebar="right"] .layout__sidebar-toggle--sp,
	.layout[data-sidebar="right"][data-sidebar-toggle="sp"] .layout__sidebar-toggle,
	.layout[data-sidebar="right"][data-sidebar-toggle="both"] .layout__sidebar-toggle--sp {
		display: block;
		position: absolute;
		bottom: 0;
		right: var(--wp--custom--atom--rg, 0.5rem);
		z-index: 1;
		width: auto;
		height: auto;
		transform: translateY(100%);
		transition: none;
	}

	.layout[data-sidebar="left"] .layout__sidebar-toggle--pc,
	.layout[data-sidebar="right"] .layout__sidebar-toggle--pc,
	.layout[data-sidebar="left"][data-sidebar-toggle="both"] .layout__sidebar-toggle--pc,
	.layout[data-sidebar="left"][data-sidebar-toggle="both"][data-sidebar-show="true"] .layout__sidebar-toggle--pc,
	.layout[data-sidebar="left"][data-sidebar-toggle="both"][data-sidebar-show="false"] .layout__sidebar-toggle--pc,
	.layout[data-sidebar="right"][data-sidebar-toggle="both"] .layout__sidebar-toggle--pc,
	.layout[data-sidebar="right"][data-sidebar-toggle="both"][data-sidebar-show="true"] .layout__sidebar-toggle--pc,
	.layout[data-sidebar="right"][data-sidebar-toggle="both"][data-sidebar-show="false"] .layout__sidebar-toggle--pc {
		display: none;
		transform: none;
	}

	/* フォールバック: 万一 p で包まれた場合も余白を出さない */
	.layout[data-sidebar="left"] .layout__sidebar-toggle > p,
	.layout[data-sidebar="right"] .layout__sidebar-toggle > p {
		margin: 0;
	}

	/*
	 * SP パネル: ドロワーサブメニューと同様 max-height + fade（0.5s）。
	 * 初期はタイトルバーのみ（パネル折りたたみ）。
	 */
	.layout[data-sidebar="left"] .layout__sidebar-panel,
	.layout[data-sidebar="right"] .layout__sidebar-panel {
		display: block;
		position: static;
		padding: 0;
		min-width: 0;
		overflow: hidden;
		max-height: 0;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition:
			max-height 0.5s ease,
			opacity 0.5s ease,
			visibility 0.5s ease;
	}

	.layout[data-sidebar="left"][data-sidebar-show="true"] .layout__sidebar-panel,
	.layout[data-sidebar="right"][data-sidebar-show="true"] .layout__sidebar-panel {
		max-height: 40rem;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}

	/*
	 * 閉じたときはパネルごと畳まず、.sidebar__title だけ残す。
	 */
	.layout[data-sidebar="left"][data-sidebar-show="false"] .layout__sidebar-panel,
	.layout[data-sidebar="right"][data-sidebar-show="false"] .layout__sidebar-panel,
	.layout[data-sidebar="left"][data-sidebar-toggle="both"][data-sidebar-show="false"] .layout__sidebar-panel,
	.layout[data-sidebar="right"][data-sidebar-toggle="both"][data-sidebar-show="false"] .layout__sidebar-panel {
		max-height: none;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		overflow: visible;
	}

	/* 開閉あり（アーカイブ）はタグが多いので、開いたパネルは画面に収まる高さで縦にスクロール */
	.layout[data-sidebar="left"][data-sidebar-toggle="both"][data-sidebar-show="true"] .layout__sidebar-panel,
	.layout[data-sidebar="right"][data-sidebar-toggle="both"][data-sidebar-show="true"] .layout__sidebar-panel {
		max-height: calc(100dvh - var(--site-header-height, 0px) - 4rem);
		overflow-y: scroll;
		overscroll-behavior-y: contain;
	}

	.layout[data-sidebar="left"][data-sidebar-show="false"] .layout__sidebar-panel,
	.layout[data-sidebar="right"][data-sidebar-show="false"] .layout__sidebar-panel,
	.layout[data-sidebar="left"][data-sidebar-show="true"] .layout__sidebar-panel,
	.layout[data-sidebar="right"][data-sidebar-show="true"] .layout__sidebar-panel {
		padding-block-start: var(--wp--custom--atom--xxl, 1rem);
		padding-block-end: var(--wp--custom--atom--xxl, 1rem);
	}

	/*
	 * タイトル以外（画像・本文・タグ）は開閉でフェード。display では遷移できない。
	 */
	.layout .sidebar__inner,
	.layout .sidebar__head,
	.layout .sidebar__inner > :not(.sidebar__head),
	.layout .sidebar__head > :not(.sidebar__title) {
		transition:
			max-height 0.5s ease,
			opacity 0.5s ease,
			visibility 0s linear,
			gap 0.5s ease,
			padding 0.5s ease,
			border-width 0.5s ease;
	}

	.layout .sidebar__inner > :not(.sidebar__head),
	.layout .sidebar__head > :not(.sidebar__title) {
		overflow: hidden;
		max-height: 80rem;
		opacity: 1;
		visibility: visible;
	}

	.layout[data-sidebar-show="false"] .sidebar__inner,
	.layout[data-sidebar-show="false"] .sidebar__head {
		gap: 0;
	}

	.layout[data-sidebar-show="false"] .sidebar__inner > :not(.sidebar__head),
	.layout[data-sidebar-show="false"] .sidebar__head > :not(.sidebar__title) {
		max-height: 0;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		margin-block: 0;
		padding-block: 0;
		border-block-width: 0;
		transition:
			max-height 0.5s ease,
			opacity 0.5s ease,
			visibility 0s linear 0.5s,
			padding 0.5s ease,
			border-width 0.5s ease;
	}

	/*
	 * page-header が画面内（data-scrolled=false）の間は出さない。
	 * 出たあと（true）はヘッダーの直下に固定し、JS が translateY でスライドする。
	 * -100% では下にはみ出す開閉ボタンが残るため、隠れ位置はさらに 3rem 上げる。
	 */
	.layout__sidebar > .page-header__back {
		position: static;
		padding-inline: var(--wp--custom--molecule--lg);
		padding-block-end: var(--wp--custom--molecule--lg);
	}

	.layout[data-sidebar-show="false"] .layout__sidebar > .page-header__back {
		display: none;
	}

	.layout[data-sidebar="left"] .layout__sidebar:not([data-scrolled="true"]),
	.layout[data-sidebar="right"] .layout__sidebar:not([data-scrolled="true"]) {
		display: none;
		transform: translateY(calc(-100% - 3rem));
	}

	.layout[data-sidebar="left"][data-sidebar-toggle="sp"] .layout__sidebar[data-scrolled="true"],
	.layout[data-sidebar="right"][data-sidebar-toggle="sp"] .layout__sidebar[data-scrolled="true"],
	.layout[data-sidebar="left"][data-sidebar-toggle="both"][data-sidebar-show="false"] .layout__sidebar[data-scrolled="true"],
	.layout[data-sidebar="left"][data-sidebar-toggle="both"][data-sidebar-show="true"] .layout__sidebar[data-scrolled="true"],
	.layout[data-sidebar="right"][data-sidebar-toggle="both"][data-sidebar-show="false"] .layout__sidebar[data-scrolled="true"],
	.layout[data-sidebar="right"][data-sidebar-toggle="both"][data-sidebar-show="true"] .layout__sidebar[data-scrolled="true"] {
		display: block;
		position: fixed;
		top: var(--site-header-height);
		inset-inline: 0;
		z-index: 90;
		width: 100%;
		transform: translateY(0);
	}

	@media (prefers-reduced-motion: reduce) {
		.layout[data-sidebar="left"] .layout__sidebar-panel,
		.layout[data-sidebar="right"] .layout__sidebar-panel,
		.layout .sidebar__inner,
		.layout .sidebar__head,
		.layout .sidebar__inner > :not(.sidebar__head),
		.layout .sidebar__head > :not(.sidebar__title) {
			transition: none;
		}
	}
}

/*
 * SP の固定問い合わせ（creator・受け付け ON）。
 * 境界はサイドバーと同じ（スクロール量が page-header の高さを超えたら data-scrolled=true）。
 */
.fixed-footer {
	display: none;
}

@media (max-width: 767px) {
	body:has(.fixed-footer) .layout {
		padding-block-end: 4.5rem;
	}

	.fixed-footer {
		display: flex;
		position: fixed;
		z-index: 80;
		inset-inline: 0;
		bottom: 0;
		justify-content: center;
		align-items: center;
		box-sizing: border-box;
		padding-block: var(--wp--custom--atom--rg, 0.5rem);
		padding-block-end: max(var(--wp--custom--atom--rg, 0.5rem), env(safe-area-inset-bottom, 0px));
		padding-inline: var(--wp--custom--atom--rg, 0.5rem);
		background-color: rgb(255 255 255 / var(--wp--custom--opacity--70));
		transform: translateY(100%);
		transition: transform 0.35s ease-out;
		pointer-events: none;
	}

	.fixed-footer[data-scrolled="true"] {
		transform: translateY(0);
		transition-timing-function: ease-in-out;
		pointer-events: auto;
	}

	/* サイドバー展開中は、スクロール前と同じく画面下へ隠す */
	body:has(.layout[data-sidebar-show="true"]) .fixed-footer {
		transform: translateY(100%);
		transition-timing-function: ease-out;
		pointer-events: none;
	}

	.fixed-footer .wp-block-button {
		width: auto;
		max-width: 100%;
	}

	.fixed-footer .btn {
		max-width: min(100%, 18.375rem);
	}
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
	.fixed-footer {
		transition: none;
	}
}