/**
 * SWELL 互換レイヤー
 *
 * 移行済みコンテンツに残る SWELL のクラス名を、コンテンツを変換せずに表示するためのCSS。
 * 色・サイズ・余白はすべて theme.json のトークン（--wp--preset--* / --wp--custom--*）を参照する。
 * .has-swl-deep-0N-color は theme.json のパレット slug から自動生成されるためここには書かない。
 *
 * 長期的には block.json の styles に登録し直し、safari 側のクラス名へ寄せる。
 */

/* ------------------------------------------------------------
 * インライン書式
 * ---------------------------------------------------------- */

/* マーカー（189） */
.swl-marker.mark_yellow {
	/* ライトは黄色をそのまま、ダークは半透明で敷く（theme.json の custom.marker / custom.dark.marker） */
	background: linear-gradient(transparent 55%, var(--wp--custom--marker) 55%);
}

/* インラインリスト（64）: data-icon = circle / triangle / close / doubleCircle */
.swl-inline-list {
	display: inline-block;
	padding-inline-start: 1.25em;
	position: relative;
}
.swl-inline-list::before {
	inset-inline-start: 0;
	position: absolute;
}
.swl-inline-list[data-icon="circle"]::before { content: "○"; color: var(--wp--preset--color--swl-deep-02); }
.swl-inline-list[data-icon="doubleCircle"]::before { content: "◎"; color: var(--wp--preset--color--swl-deep-03); }
.swl-inline-list[data-icon="triangle"]::before { content: "△"; color: var(--wp--preset--color--swl-deep-04); }
.swl-inline-list[data-icon="close"]::before { content: "×"; color: var(--wp--preset--color--swl-deep-01); }

/* ------------------------------------------------------------
 * 表のセルアイコン（73）
 * aria-hidden の装飾要素。意味は隣のテキストに依存しているため、
 * 将来的にはテキスト（○/△/× を本文に書く等）へ変換すること。
 * ---------------------------------------------------------- */
/* 塗りの部品はセルの直下だけでなく、文字の span の内側に入っていることもある。
   セルを重なりの基準（isolation）にして、塗りをセル内・文字の下（z-index: -1）に収める */
.wp-block-table td:has(.swl-cell-bg),
.wp-block-table th:has(.swl-cell-bg) {
	isolation: isolate;
	position: relative;
}
.swl-cell-bg {
	display: grid;
	inset: 0;
	place-items: center;
	pointer-events: none;
	position: absolute;
	z-index: -1;
}
/* 色の指定（--the-cell-bg）があればアイコンの有無に関係なくセルを塗る */
.swl-cell-bg { background-color: var(--the-cell-bg, transparent); }
.swl-cell-bg[data-icon]::before {
	font-size: var(--wp--preset--font-size--xx-large);
	line-height: 1;
	opacity: 0.25;
}
.swl-cell-bg[data-icon-size="m"]::before { font-size: var(--wp--preset--font-size--x-large); }
.swl-cell-bg[data-icon-type="obj"]::before { opacity: 1; }
.swl-cell-bg[data-icon="circle"]::before { content: "○"; color: var(--wp--preset--color--swl-deep-02); }
.swl-cell-bg[data-icon="doubleCircle"]::before { content: "◎"; color: var(--wp--preset--color--swl-deep-03); }
.swl-cell-bg[data-icon="triangle"]::before { content: "△"; color: var(--wp--preset--color--swl-deep-04); }
.swl-cell-bg[data-icon="close"]::before { content: "×"; color: var(--wp--preset--color--swl-deep-01); }
.swl-cell-bg[data-text-color="white"] ~ *,
td:has(.swl-cell-bg[data-text-color="white"]) {
	color: var(--wp--preset--color--contrast);
}
/* 濃い色のセル（赤など）は文字色 contrast だと AA に届かないので、指定どおり黒に。 */
.swl-cell-bg[data-text-color="black"] ~ *,
td:has(.swl-cell-bg[data-text-color="black"]) {
	color: var(--wp--preset--color--black);
}

/* ------------------------------------------------------------
 * core/list
 * ---------------------------------------------------------- */
.is-style-list-simple-main,
.is-style-good_list,
.is-style-bad_list,
.is-style-check_list,
.is-style-triangle_list {
	list-style: none;
	padding-inline-start: var(--wp--preset--spacing--40);
}
.is-style-list-simple-main > li,
.is-style-good_list > li,
.is-style-bad_list > li,
.is-style-check_list > li,
.is-style-triangle_list > li {
	position: relative;
}
.is-style-list-simple-main > li::before,
.is-style-good_list > li::before,
.is-style-bad_list > li::before,
.is-style-check_list > li::before,
.is-style-triangle_list > li::before {
	inset-inline-start: calc(-1 * var(--wp--preset--spacing--30));
	position: absolute;
}
.is-style-list-simple-main > li::before { content: "・"; color: var(--wp--preset--color--main); font-weight: 700; }
.is-style-good_list > li::before { content: "○"; color: var(--wp--preset--color--swl-deep-02); }
.is-style-bad_list > li::before { content: "×"; color: var(--wp--preset--color--swl-deep-01); }
.is-style-check_list > li::before { content: "✓"; color: var(--wp--preset--color--swl-deep-03); }
.is-style-triangle_list > li::before { content: "▸"; color: var(--wp--preset--color--main); }

/* 注釈リスト（※付きの小さな文字） */
.is-style-note_list {
	color: var(--wp--preset--color--contrast-soft);
	font-size: var(--wp--preset--font-size--small);
	list-style: none;
	padding-inline-start: var(--wp--preset--spacing--30);
}
.is-style-note_list > li {
	position: relative;
}
.is-style-note_list > li::before {
	content: "※";
	inset-inline-start: calc(-1 * var(--wp--preset--spacing--30));
	position: absolute;
}

/* 番号付き（丸数字） */
ol.is-style-num_circle { counter-reset: safari-num; padding-inline-start: var(--wp--preset--spacing--50); }
ol.is-style-num_circle > li { counter-increment: safari-num; }
ol.is-style-num_circle > li::before {
	background: var(--wp--preset--color--main);
	border-radius: 50%;
	color: var(--wp--preset--color--base);
	content: counter(safari-num);
	font-size: var(--wp--preset--font-size--xs);
	height: 1.5em;
	inset-inline-start: calc(-1 * var(--wp--preset--spacing--40));
	line-height: 1.5em;
	text-align: center;
	top: 0.3em;
	width: 1.5em;
}

/* 横並び */
.-list-flex {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--50);
}

/* ------------------------------------------------------------
 * core/columns: スマホで2列（19）
 * ---------------------------------------------------------- */
/* 48.8125rem = core/columns が縦積みになる 781px */
@media (max-width: 48.8125rem) {
	.wp-block-columns.mobile-2column {
		flex-wrap: wrap !important;
	}
	.wp-block-columns.mobile-2column > .wp-block-column {
		flex-basis: calc(50% - var(--wp--style--block-gap) / 2) !important;
	}
}

/* ------------------------------------------------------------
 * core/paragraph
 * ---------------------------------------------------------- */
.is-style-para-mark2,
.is-style-para-mark6,
.is-style-para-icon-mark2,
.is-style-para-icon-mark3,
.is-style-para-icon-mark4 {
	padding-inline-start: var(--wp--preset--spacing--40);
	position: relative;
}
.is-style-para-mark2::before,
.is-style-para-mark6::before,
.is-style-para-icon-mark2::before,
.is-style-para-icon-mark3::before,
.is-style-para-icon-mark4::before {
	inset-inline-start: 0;
	position: absolute;
}
.is-style-para-mark2::before { content: "▶"; color: var(--wp--preset--color--main); font-size: var(--wp--preset--font-size--xs); top: 0.35em; }
.is-style-para-mark6::before { content: "■"; color: var(--wp--preset--color--main); }
.is-style-para-icon-mark2::before { content: "✓"; color: var(--wp--preset--color--swl-deep-03); font-weight: 700; }
.is-style-para-icon-mark3::before { content: "!"; color: var(--wp--preset--color--swl-deep-04); font-weight: 700; }
.is-style-para-icon-mark4::before { content: "?"; color: var(--wp--preset--color--swl-deep-02); font-weight: 700; }

/* アイコン付きボックス */
.is-style-icon_announce,
.is-style-icon_info,
.is-style-big_icon_caution,
.is-style-big_icon_memo {
	border-inline-start: var(--wp--custom--border-width--thick) solid currentColor;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
}
.is-style-icon_announce { background: var(--wp--preset--color--swl-pale-04); border-color: var(--wp--preset--color--swl-deep-04); }
.is-style-icon_info { background: var(--wp--preset--color--swl-pale-02); border-color: var(--wp--preset--color--swl-deep-02); }
.is-style-big_icon_caution { background: var(--wp--preset--color--swl-pale-01); border-color: var(--wp--preset--color--swl-deep-01); }
.is-style-big_icon_memo { background: var(--wp--preset--color--base-soft); border-color: var(--wp--preset--color--main); }
.is-style-icon_announce::before,
.is-style-icon_info::before,
.is-style-big_icon_caution::before,
.is-style-big_icon_memo::before {
	font-weight: 700;
	margin-inline-end: var(--wp--preset--spacing--20);
}
.is-style-icon_announce::before { content: "📢"; }
.is-style-icon_info::before { content: "ℹ"; color: var(--wp--preset--color--swl-deep-02); }
.is-style-big_icon_caution::before { content: "⚠"; color: var(--wp--preset--color--swl-deep-01); }
.is-style-big_icon_memo::before { content: "✎"; color: var(--wp--preset--color--main); }

/* ストライプ背景 */
.is-style-bg_stripe {
	background: repeating-linear-gradient(
		-45deg,
		var(--wp--preset--color--base-soft) 0 0.25rem,
		var(--wp--preset--color--base) 0.25rem 0.5rem
	);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
}

/* ------------------------------------------------------------
 * core/table
 * ---------------------------------------------------------- */
/* 列の多い表は潰さずに横スクロールさせる（SWELL の swlScrollable 相当。属性はHTMLに出力されない） */
.wp-block-table table:has(tr > :nth-child(5)) {
	min-width: 40rem;
}

.wp-block-table.is-style-simple td,
.wp-block-table.is-style-simple th,
.wp-block-table.is-style-regular td,
.wp-block-table.is-style-regular th {
	border: var(--wp--custom--border-width--thin) solid var(--wp--preset--color--line);
	padding: var(--wp--preset--spacing--20);
}
.wp-block-table.is-style-regular thead th,
.wp-block-table.is-style-regular thead td {
	background: var(--wp--preset--color--main);
	color: var(--wp--preset--color--base);
}
.wp-block-table.is-style-simple thead th,
.wp-block-table.is-style-simple thead td {
	border-bottom-width: var(--wp--custom--border-width--thick);
}
/* WordPress 標準のストライプ表は奇数行を #f0f0f0 で固定して塗るので、ダークでも読めるようテーマの色に置き換える */
.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
	background-color: var(--wp--preset--color--base-strong);
}
.wp-block-table.is-style-stripes {
	border-bottom-color: var(--wp--preset--color--line);
}

/* 1列目を見出しセル風に */
.wp-block-table.td_to_th_ tbody td:first-child {
	background: var(--wp--preset--color--base-soft);
	font-weight: 700;
}
.wp-block-table.is-thead-centered thead :is(th, td) { text-align: center; }
.wp-block-table.is-all-centered :is(th, td) { text-align: center; }
.wp-block-table.is-all-centered--va :is(th, td) { text-align: center; vertical-align: middle; }

/* ------------------------------------------------------------
 * core/image
 * ---------------------------------------------------------- */
.wp-block-image.size_xs { max-width: 40%; margin-inline: auto; }
.wp-block-image.size_s { max-width: 60%; margin-inline: auto; }
.wp-block-image.is-style-border img { border: var(--wp--custom--border-width--thin) solid var(--wp--preset--color--line); }
.wp-block-image.is-style-shadow img,
.wp-block-image.is-style-img-shadow-s img { box-shadow: 0 0.125rem 0.5rem color-mix(in srgb, var(--wp--preset--color--contrast) 20%, transparent); }

/* ------------------------------------------------------------
 * ユーティリティ（ステップブロック内で使用）
 * ---------------------------------------------------------- */
.u-fz-l { font-size: var(--wp--preset--font-size--large); }
.u-bg-main { background-color: var(--wp--preset--color--main); color: var(--wp--preset--color--base); }

/* ------------------------------------------------------------
 * 変換で生成するクラス（tools/convert.php）
 * ---------------------------------------------------------------- */

/* loos/dl → core/group.safari-dl。見出し語（dt 相当）の下に説明が続く */
.safari-dl > .safari-dl__term {
	border-inline-start: var(--wp--custom--border-width--thick) solid var(--wp--preset--color--main);
	padding-inline-start: var(--wp--preset--spacing--20);
}
.safari-dl > .safari-dl__term + * {
	margin-block-start: var(--wp--preset--spacing--20);
}

/* loos/review → core/group.safari-review の商品名 */
.safari-review__name {
	font-size: var(--wp--preset--font-size--large);
}

/* ------------------------------------------------------------
 * Rinker（yyi-rinker）の商品ボックス（2026-10-05、4案から C「Amazon を主役に」を採用）
 * Rinker の CSS は div.yyi-rinker-contents ... なので body を付けて上書きする。
 * - 価格（Creators API で取得）を大きく、取得日時（規約上必要）は小さく薄く
 * - Amazon を幅いっぱいの黄色ボタンにして先頭へ。楽天・Yahoo は枠線だけの控えめなボタン
 * - スマホは「左に画像・右に商品名と価格・下にボタン」で縦の長さを詰める
 * 色はすべて theme.json のトークン。黄色ボタンの黒文字はライト 18:1 / ダーク 14:1。
 * ---------------------------------------------------------------- */
body div.yyi-rinker-contents {
	background: var(--wp--preset--color--base-soft);
	border: var(--wp--custom--border-width--thin) solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--medium);
	box-shadow: none;
	color: var(--wp--preset--color--contrast);
}
/* Rinker の設定で出る追加 CSS の白い太枠（3px #f5f5f5）をやめる。外枠は上の .yyi-rinker-contents で引く */
body div.yyi-rinker-contents div.yyi-rinker-box {
	border: 0;
	padding: var(--wp--preset--spacing--30);
}
/* 商品画像は白背景のものが多いので、白い台紙に載せる（contrast はライト配色で黒になるので使わない） */
body div.yyi-rinker-contents div.yyi-rinker-image {
	background: var(--wp--preset--color--white);
	border-radius: var(--wp--custom--radius--small);
	padding: var(--wp--preset--spacing--10);
}
/* 商品名は2行まで（長い型番で箱が縦に伸びないように） */
body div.yyi-rinker-contents div.yyi-rinker-title a {
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	color: var(--wp--preset--color--contrast);
	display: -webkit-box;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	line-height: var(--wp--custom--line-height--tight);
	overflow: hidden;
}
body div.yyi-rinker-contents div.yyi-rinker-title a:hover {
	color: var(--wp--preset--color--main);
	text-decoration: underline;
}
body div.yyi-rinker-contents div.yyi-rinker-detail,
body div.yyi-rinker-contents div.yyi-rinker-detail .price-box,
body div.yyi-rinker-contents div.yyi-rinker-detail .free-text,
body div.yyi-rinker-contents div.yyi-rinker-detail .free-text .count-in {
	color: var(--wp--preset--color--contrast-soft);
}
body div.yyi-rinker-contents div.yyi-rinker-detail .brand {
	font-size: 0.75rem;
	letter-spacing: var(--wp--custom--letter-spacing--label);
}
body div.yyi-rinker-contents div.yyi-rinker-detail .price-box {
	margin-top: 0.25rem;
}
body div.yyi-rinker-contents div.yyi-rinker-detail .price {
	color: var(--wp--preset--color--contrast);
	display: block;
	font-size: 1.5rem;
	font-weight: 800;
	line-height: var(--wp--custom--line-height--tight);
}
/* 価格の取得日時（Amazon の規約で表示が必要なので消さない） */
body div.yyi-rinker-contents div.yyi-rinker-detail .price_at,
body div.yyi-rinker-contents div.yyi-rinker-detail .price_at + span {
	font-size: 0.6875rem;
}
/* ボタン: Amazon を先頭・幅いっぱい、ほかは横並びの枠線ボタン */
body div.yyi-rinker-contents ul.yyi-rinker-links {
	display: flex;
	flex-flow: row wrap;
	gap: 0.5rem;
}
/* li.amazonlink 等（クラス3つ）より強くするため [class] を付ける */
body div.yyi-rinker-contents ul.yyi-rinker-links li[class] {
	background: transparent;
	border: var(--wp--custom--border-width--thin) solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--small);
	box-shadow: none;
	flex: 1 1 auto;
	margin: 0;
	text-align: center;
}
/* 塗り（Rinker の追加 CSS の li.amazonlink a 等）は消す */
body div.yyi-rinker-contents ul.yyi-rinker-links li a {
	background: transparent;
	color: var(--wp--preset--color--contrast);
	font-size: 0.8125rem;
}
body div.yyi-rinker-contents ul.yyi-rinker-links li a:hover {
	opacity: 1;
	text-decoration: underline;
}
body div.yyi-rinker-contents ul.yyi-rinker-links li[class]:hover {
	border-color: var(--wp--preset--color--main);
}
body div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink {
	background: var(--wp--preset--color--marker-yellow);
	border-color: var(--wp--preset--color--marker-yellow);
	flex-basis: 100%;
	order: -1;
}
body div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink a {
	color: var(--wp--preset--color--black);
	font-size: 1rem;
	font-weight: 800;
	padding-block: 0.625rem;
}
body div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink:hover {
	border-color: var(--wp--preset--color--marker-yellow);
	box-shadow: var(--wp--preset--shadow--glow);
}

/* スマホ: 画像を左、商品名と価格を右、ボタンを下に幅いっぱい（info の中身をボックスの格子に並べる） */
@media (max-width: 37.5rem) {
	body div.yyi-rinker-contents div.yyi-rinker-box {
		align-items: start;
		column-gap: var(--wp--preset--spacing--30);
		display: grid;
		grid-template-columns: 6.5rem 1fr;
		row-gap: 0.25rem;
	}
	body div.yyi-rinker-contents div.yyi-rinker-image {
		box-sizing: border-box;
		grid-column: 1;
		grid-row: 1 / span 2;
		margin: 0;
		min-width: 0;
		width: 6.5rem;
	}
	body div.yyi-rinker-contents div.yyi-rinker-image img {
		height: auto;
		max-width: 100%;
	}
	body div.yyi-rinker-contents div.yyi-rinker-info {
		display: contents;
	}
	body div.yyi-rinker-contents div.yyi-rinker-title,
	body div.yyi-rinker-contents div.yyi-rinker-detail {
		grid-column: 2;
		margin: 0;
		text-align: left;
	}
	body div.yyi-rinker-contents ul.yyi-rinker-links {
		grid-column: 1 / -1;
		margin-top: var(--wp--preset--spacing--10);
	}
	/* Rinker 本体が 420px 以下でボタンを width: 100% の縦積みにするので、楽天・Yahoo は横に並べ直す */
	body div.yyi-rinker-contents ul.yyi-rinker-links li[class] {
		width: auto;
	}
}