/* =====================================================================================
 * 【案件レイヤ】swell-compat.css — SWELL痕跡マークアップ互換CSS(自作・最小限)
 *
 * 方針M-3(docs/handover/20260702_newtheme_migration_plan.md):
 *   DB(post_content)に残るSWELL由来クラスの「見た目」を、SWELL本体なしで復元する。
 *   SWELL本体CSSのコピーではない。本番(SWELL稼働中)ページの computed style を
 *   CDP/CSSOMで実測(2026-07-03)し、同じ挙動を自作コードで再現した。
 *
 * 実装対象 = DB全数スキャンで実使用が確認できたクラスのみ(母集団=P0確定表+
 * 全投稿class集計。outputs/p0_migration_20260702/ 参照):
 *   A. alignfull 全幅ブレイクアウト(30)
 *   B. swell-block-fullWide(28)+__inner(31)+l-container(4)+pc/sp-py-*(48)
 *   C. ボタン: swell-block-button(7)+is-style-btn_normal(2)+is-style-more_btn(5)
 *      +blue_(2)+-size-l(3)
 *   D. アコーディオン: swell-block-accordion一式(1記事・details/summary静的マークアップ)
 *   E. インライン装飾: swl-marker(2,507!)+mark_blue/yellow/orange・
 *      has-swl-main-color(59)/has-swl-deep-01-color・u-fz-xs/s/l/xl・
 *      pc-only/sp-only・has-border.-border01/-border03
 *
 * 実装しないもの(本番実測で「無装飾」を確認済=互換不要):
 *   is-style-circle-list / times-list / note-list / good_box / bad_box
 *   (本番でもSWELLのリスト装飾CSSは配信されておらず素のdisc表示だった)
 *   is-style-stripes の縞々はコア wp-block-library 由来=新テーマでも配信済みで対応不要。
 *
 * 記事リライトでSWELL記法を廃止したら、対応する章を削除していく(段階的縮小予定)。
 * ===================================================================================== */

/* =====================================================
 * A. alignfull 全幅ブレイクアウト
 *    本文コンテナ(.site-main__inner max-width:720)の中から
 *    ビューポート全幅へ抜け出す。本番SWELLと同じ left+100vw 方式。
 *    100vw はスクロールバー幅を含むため body 側で横方向を clip
 *    (本番も body{overflow-x:clip} だった)。
 * ===================================================== */
body {
	overflow-x: clip;
}

.entry-content .alignfull {
	position: relative;
	left: calc(50% - 50vw);
	width: 100vw;
	max-width: 100vw;
}

/* fullWide内側でさらにalignfullを使った場合は「内側幅いっぱい」まで(本番同等) */
.swell-block-fullWide__inner .alignfull {
	left: calc(0px - var(--nsc-fw-inner-pad, 0px));
	width: calc(100% + var(--nsc-fw-inner-pad, 0px) * 2);
	max-width: none;
}

/* コアのグループ/カバーをalignfullにした場合の内側整え(本番同等・article_size=800px) */
.alignfull > .wp-block-group__inner-container,
.alignfull > .wp-block-cover__inner-container {
	margin: 0 auto;
	max-width: 800px;
}

/* =====================================================
 * B. swell-block-fullWide(フルワイドセクション)
 *    contentSize:full      → __inner 素(端まで全幅)
 *    contentSize:container → __inner.l-container(1200px+左右pad中央寄せ)
 *    contentSize:article   → __inner.l-article(記事カラム幅に一致)
 *    pcPadding/spPadding   → pc-py-N・sp-py-N(0/2em/4em・ブレイクポイント960px)
 *    ※コメント内に「アスタリスク直後のスラッシュ」を書くとコメントが早期終了し、
 *      直後の:rootルールが不正セレクタに巻き込まれ破棄される(2026-07-03に実際に発生・
 *      cmx CSSと同型のバグ)。クラス名の列挙は区切りに「・」を使うこと。
 * ===================================================== */
:root {
	--nsc-container: 1200px;
	--nsc-pad-container: 48px;
}

@media (max-width: 959.98px) {
	:root {
		--nsc-pad-container: 4vw;
	}
}

.swell-block-fullWide {
	position: relative;
	padding: 2rem 0;
}

/*
 * バンド間の垂直リズム(本番実測を再現・単位は2rem=32px固定):
 *   - fullWideと空段落スペーサはSWELL期と同じ margin-bottom 2em リズムを持つ
 *   - fullWide直後のfullWideは margin-top -2rem で相殺→密着(gap 0)
 *   - 空段落(h=0)を挟むと、マージンが空要素を突き抜けて合成され計32pxのギャップ
 *     (連続空段落でも32pxのまま)=本番と同じ機構
 */
.entry-content > .swell-block-fullWide,
.entry-content > p:empty {
	margin-bottom: 2rem;
}

.entry-content > .swell-block-fullWide + .swell-block-fullWide {
	margin-top: -2rem;
}

/*
 * 本文末尾の白帯撲滅(嶋崎FB 2026-07-03・サイト全体):
 *   - 本文最後に連発する空段落スペーサ(SWELL期の残骸・/profile/末尾に8連発等)は
 *     マージンが積み上がりフッター前に大きな白帯を作る→末尾に連続する空段落は非表示
 *   - 最後の実要素のmargin-bottomも除去(バンドで終わるページはフッターに密着)
 *   途中の空段落スペーサ(セクション間の32pxリズム)は後続に実要素があるため対象外。
 */
.entry-content > p:empty:not(:has(~ :not(p:empty))) {
	display: none;
}

.entry-content > :not(p:empty):not(:has(~ :not(p:empty))) {
	margin-bottom: 0;
}

/* 末尾がfullWideバンドのページ: バンド内最終要素のmargin-bottom(下の2remリズム)が
   padding0のfullWideを突き抜けて合成されfooter手前に白帯を作る(/profile/末尾CTAで
   32px実測・ダーク節同士の間に白線)→末尾要素内のinner最終子も0にする。
   inner内はページ由来のインラインstyle/scriptタグが実要素の後に続くため
   :last-childでは取れない=「style/script以外の最終子」を:has()で選ぶ */
.entry-content > :not(p:empty):not(:has(~ :not(p:empty))) .swell-block-fullWide__inner > :not(style):not(script):not(:has(~ :not(style):not(script))) {
	margin-bottom: 0;
}

@media (min-width: 960px) {
	.pc-py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
	.pc-py-20 { padding-top: 2rem !important; padding-bottom: 2rem !important; }
	.pc-py-40 { padding-top: 4rem !important; padding-bottom: 4rem !important; }
}

@media (max-width: 959.98px) {
	.sp-py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
	.sp-py-20 { padding-top: 2rem !important; padding-bottom: 2rem !important; }
	.sp-py-40 { padding-top: 4rem !important; padding-bottom: 4rem !important; }
}

.swell-block-fullWide__inner {
	position: relative;
	z-index: 1;
	padding: 0 var(--nsc-fw-inner-pad, 0);
}

/* fullWide内の直下要素は2remリズム(本番同等・本番は16px基準の2em=32px) */
.swell-block-fullWide__inner > * {
	margin-bottom: 2rem;
}

.swell-block-fullWide__inner.l-container {
	--nsc-fw-inner-pad: var(--nsc-pad-container);
	margin-left: auto;
	margin-right: auto;
	max-width: calc(var(--nsc-container) + var(--nsc-fw-inner-pad) * 2);
}

/* contentSize:article(著者情報blog_parts 1335/3057 等)。
   本番SWELLではl-article=800px中央寄せだったが、新テーマでは記事カラム
   (site-main__inner: max-width 720px/padding 20px)に正確に一致させる */
.swell-block-fullWide__inner.l-article {
	--nsc-fw-inner-pad: 20px;
	margin-left: auto;
	margin-right: auto;
	max-width: 720px;
}

/* =====================================================
 * C. ボタン(swell-block-button)
 *    使用実態: btn_normal=「blue_ -size-l」の立体ピル型2箇所(meta-ad-safezone)
 *              more_btn=白背景+グレー枠+右矢印 5箇所(同記事)
 * ===================================================== */
.swell-block-button {
	--the-icon-size: 1.1em;
	text-align: center;
}

.swell-block-button .swell-block-button__link {
	display: inline-block;
	text-align: center;
	text-decoration: none;
	font-size: var(--the-fz, 1em);
}

.swell-block-button__img {
	display: none !important;
}

/* SWELLのボタン色クラス(DB実使用はblue_のみ) */
.blue_ {
	--the-btn-color: #338df4;
}

/* 立体ボタン(is-style-btn_normal) */
.is-style-btn_normal {
	--the-btn-radius: 80px;
	--the-min-width: 80%;
	--the-padding: 1em 1.5em;
}

.is-style-btn_normal .swell-block-button__link {
	background-color: var(--the-btn-color, #ea4341);
	color: #fff;
	font-weight: 700;
	padding: var(--the-padding);
	min-width: var(--the-min-width);
	border-radius: var(--the-btn-radius);
	box-shadow: 0 2px 2px rgba(0, 0, 0, .1), 0 4px 8px -4px rgba(0, 0, 0, .2);
	transition: box-shadow .25s;
}

.is-style-btn_normal .swell-block-button__link:hover {
	box-shadow: 0 4px 12px rgba(0, 0, 0, .1), 0 12px 24px -12px rgba(0, 0, 0, .2);
	opacity: 1;
}

[class*="is-style-btn_"].-size-l {
	--the-min-width: 100%;
	--the-padding: 1em 1.5em;
}

@media (min-width: 600px) {
	[class*="is-style-btn_"].-size-l {
		--the-min-width: 80%;
	}
}

/* もっと見るボタン(is-style-more_btn) */
.is-style-more_btn {
	--the-fz: .9em;
	--the-width: auto;
	--the-min-width: 80%;
	--the-padding: .75rem 3em;
	display: block;
	margin: 0 auto 2em;
	padding: 2px 0;
	position: relative;
	text-align: center;
}

@media (min-width: 600px) {
	.is-style-more_btn {
		--the-min-width: 64%;
	}
}

.is-style-more_btn img {
	display: none;
}

.is-style-more_btn .swell-block-button__link {
	background: #fff;
	box-shadow: 0 0 0 1px #dcdcdc;
	color: #666;
	display: inline-block;
	font-size: var(--the-fz);
	min-width: var(--the-min-width);
	width: var(--the-width);
	padding: var(--the-padding);
	position: relative;
	text-decoration: none;
	transition: box-shadow .25s, background-color .25s, color .25s;
}

/* 右端の矢印はCSS描画チェブロン(§4-4: 疑似要素の文字content不使用) */
.is-style-more_btn .swell-block-button__link::after {
	content: "";
	position: absolute;
	right: 1.1em;
	top: 50%;
	width: .42em;
	height: .42em;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	transform: translateY(-50%) rotate(45deg);
	transition: transform .25s;
}

.is-style-more_btn .swell-block-button__link:hover {
	background-color: #ea4341;
	box-shadow: none;
	color: #fff;
}

.is-style-more_btn .swell-block-button__link:hover::after {
	transform: translateX(4px) translateY(-50%) rotate(45deg);
}

/* =====================================================
 * D. アコーディオン(swell-block-accordion)
 *    マークアップは details/summary の静的HTML=開閉はブラウザ標準機能で動く。
 *    +/-アイコンはCSS描画(icomoonフォントは持ち込まない)。
 * ===================================================== */
.swell-block-accordion__item + .swell-block-accordion__item {
	margin-top: .5em;
}

.swell-block-accordion__title {
	align-items: center;
	background: hsla(0, 0%, 78%, .15);
	cursor: pointer;
	display: flex;
	font-weight: 400;
	justify-content: space-between;
	padding: 1em;
	position: relative;
	list-style: none;
}

.swell-block-accordion__title::-webkit-details-marker {
	display: none;
}

.swell-block-accordion__title .swell-block-accordion__label {
	flex: 1 1 auto;
	font-size: inherit;
	font-weight: inherit;
	margin: 0;
	padding: 0 1em 0 0;
	word-break: break-all;
}

.swell-block-accordion__icon {
	flex: 0 0 auto;
	width: 1em;
	height: 1em;
	position: relative;
}

.swell-block-accordion__icon i {
	display: block;
	position: absolute;
	inset: 0;
}

/* +/-はバー2本のCSS描画 */
.swell-block-accordion__icon i::before,
.swell-block-accordion__icon i.icon-plus::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	background: currentColor;
}

.swell-block-accordion__icon i::before {
	width: .85em;
	height: 2px;
	transform: translate(-50%, -50%);
}

.swell-block-accordion__icon i.icon-plus::after {
	width: 2px;
	height: .85em;
	transform: translate(-50%, -50%);
}

/* 閉時=+のみ・開時=-のみ */
.swell-block-accordion__icon .__icon--opened {
	display: none;
}

details[open] > summary .swell-block-accordion__icon .__icon--closed {
	display: none;
}

details[open] > summary .swell-block-accordion__icon .__icon--opened {
	display: block;
}

.swell-block-accordion__body {
	padding: 1em;
}

/* =====================================================
 * E. インライン装飾ユーティリティ
 * ===================================================== */

/* 蛍光マーカー(下36%を塗る線形グラデ・DB2,507箇所) */
.swl-marker {
	display: inline;
	padding: 2px;
}

.mark_blue {
	background: linear-gradient(transparent 64%, #b7e3ff 0);
}

.mark_yellow {
	background: linear-gradient(transparent 64%, #fcf69f 0);
}

.mark_orange {
	background: linear-gradient(transparent 64%, #ffddbc 0);
}

/* インライン文字色(SWELLパレット由来) */
.has-swl-main-color {
	color: #ea4341 !important;
}

.has-swl-deep-01-color {
	color: #e44141 !important;
}

.has-black-color {
	color: #000 !important;
}

/* フォントサイズ(DB実使用: xs/s/l/xl) */
.u-fz-xs {
	font-size: .75em !important;
}

.u-fz-s {
	font-size: .9em !important;
}

.u-fz-l {
	font-size: 1.25em !important;
}

.u-fz-xl {
	font-size: 1.6em !important;
}

/* PC/SP出し分け(SWELLのブレイクポイント=600px)
   ※ profile/message は旧swell_meta_cssが768px基準だったため
      pages/<slug>.css 側で .entry-content .sp-only を詳細度上げで上書きしている */
@media (min-width: 600px) {
	.sp-only {
		display: none !important;
	}
}

@media (max-width: 599.98px) {
	.pc-only {
		display: none !important;
	}
}

/* 枠線ユーティリティ(DB実使用: -border01/-border03) */
.has-border {
	padding: 1.5em;
}

.has-border.-border01 {
	border: solid 1px #ea4341;
}

.has-border.-border03 {
	border: dashed 2px hsla(0, 0%, 78%, .5);
}

div.has-background,
p.has-background {
	padding: 1.5em;
}

/* ボックス/グループ内の本文リズム(本番同等・1em) */
.swell-block-accordion__body > *,
.wp-block-group__inner-container > *,
.entry-content div[class*="is-style-"] > * {
	margin-bottom: 1em;
}