/**
 * 匠パーツ（Takumi Parts） — parts stylesheet.
 *
 * One file for every part, loaded on every page (small, cached):
 *   1. ボックス装飾・見出し装飾（ブロックスタイル is-style-box-* / is-style-head-*）
 *   2. お客様の声 [reviews]
 *   3. 装飾アニメ文字 [fancy_text] / [fancy_row]
 *   4. LINE風チャット [chat] / [chat_l] / [chat_r]
 *   5. Lottie [lottie] / [lottie_row] / [lottie_list] / [lottie_features]
 *
 * The look lives here. The HTML only carries the values that change per use
 * (width, colors, gaps …) as CSS custom properties, e.g. style="--ss-w:40px".
 * Theme tokens (--color-accent, --space-3 …) are used when the theme defines
 * them, with the same values as fallbacks.
 */

/* =========================================================
   1a. ボックス装飾（リスト / 段落 / グループ / 引用 などを囲む）
   ========================================================= */

/* --- 共通ベース --- */
.is-style-box-tape,
.is-style-box-sticky,
.is-style-box-soft,
.is-style-box-accent,
.is-style-box-frame,
.is-style-box-line,
.is-style-box-grad,
.is-style-box-label,
.is-style-box-stitch,
.is-style-box-glass,
.is-style-box-note,
.is-style-box-check {
	position: relative;
	margin-block: 2em;
	padding: 1.5em 1.6em;
	/* テープや影がはみ出て見えるように */
	overflow: visible;
}

/* ボックスを直接リストに適用したとき、マーカーが枠内に収まるよう左余白を確保 */
ul[class*="is-style-box-"],
ol[class*="is-style-box-"] {
	padding-left: 2.9em;
}

/* ボックス内の最初/最後の要素の余白を詰めて、枠との間隔を均一に */
[class*="is-style-box-"] > :first-child {
	margin-top: 0;
}
[class*="is-style-box-"] > :last-child {
	margin-bottom: 0;
}

/* --- 1. マスキングテープでメモを貼った風 --- */
.is-style-box-tape {
	background: #fffef7;
	border: 1px solid #ece7d5;
	border-radius: 3px;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.is-style-box-tape::before,
.is-style-box-tape::after {
	content: "";
	position: absolute;
	top: -13px;
	width: 92px;
	height: 27px;
	background: rgba(150, 190, 150, 0.42);
	border-left: 1px dashed rgba(0, 0, 0, 0.06);
	border-right: 1px dashed rgba(0, 0, 0, 0.06);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.is-style-box-tape::before {
	left: 22px;
	transform: rotate(-5deg);
}

.is-style-box-tape::after {
	right: 22px;
	transform: rotate(4deg);
}

/* --- 2. 付箋メモ（少し傾き＋めくれた角） --- */
.is-style-box-sticky {
	background: linear-gradient(180deg, #fff9c4, #fff1a8);
	border-radius: 2px;
	box-shadow: 2px 5px 14px rgba(0, 0, 0, 0.14);
	transform: rotate(-1deg);
}

.is-style-box-sticky::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	border-width: 0 0 24px 24px;
	border-style: solid;
	border-color: transparent transparent rgba(0, 0, 0, 0.12) transparent;
	border-bottom-right-radius: 2px;
}

/* --- 3. やわらかカード（角丸＋ふんわり影） --- */
.is-style-box-soft {
	background: var(--color-bg-alt, #f6f7f9);
	border-radius: 16px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.07);
}

/* --- 4. 左アクセントバー（お知らせ・ポイント向け） --- */
.is-style-box-accent {
	padding-left: 1.5em;
	background: #f4f7ff;
	background: color-mix(in srgb, var(--color-accent, #2563eb) 7%, #fff);
	border-left: 5px solid var(--color-accent, #2563eb);
	border-radius: 0 var(--radius, 8px) var(--radius, 8px) 0;
}

ul.is-style-box-accent,
ol.is-style-box-accent {
	padding-left: 3em;
}

/* --- 5. 上品な二重枠 --- */
.is-style-box-frame {
	padding: 1.7em 1.8em;
	background: #fff;
	border: 1px solid var(--color-accent, #2563eb);
	border-radius: var(--radius, 8px);
}

/* 内側の線は ::after（::before はラベル用に空けてある） */
.is-style-box-frame::after {
	content: "";
	position: absolute;
	inset: 5px;
	border: 1px solid color-mix(in srgb, var(--color-accent, #2563eb) 40%, #fff);
	border-radius: calc(var(--radius, 8px) - 3px);
	pointer-events: none;
}

ul.is-style-box-frame,
ol.is-style-box-frame {
	padding-left: 3.1em;
}

/* --- 6. 囲み線＋外側の影（シンプルなコンテンツ枠） --- */
.is-style-box-line {
	background: #fff;
	border: 1px solid #ccc;
	border-radius: var(--radius, 8px);
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
}


/* =========================================================
   1b. 見出し装飾（h1〜h5 共通・ブロックスタイル）
   em 基準なので各見出しサイズに追従する。
   ========================================================= */

/* --- 1. 左バー＋下線（王道・読みやすい） --- */
.is-style-head-bar {
	padding: 0.05em 0 0.3em 0.7em;
	border-left: 6px solid var(--color-accent, #2563eb);
	border-bottom: 2px solid var(--color-border, #e5e7eb);
}

/* --- 2. アクセント下線（短い色線＋全幅の細線） --- */
.is-style-head-underline {
	position: relative;
	padding-bottom: 0.35em;
	border-bottom: 3px solid var(--color-border, #e5e7eb);
}

.is-style-head-underline::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -3px;
	width: 2.4em;
	height: 3px;
	background: var(--color-accent, #2563eb);
}

/* --- 3. リボン（塗りつぶし・立体感） --- */
.is-style-head-ribbon {
	display: inline-block;
	padding: 0.35em 1em;
	color: #fff;
	background: var(--color-accent, #2563eb);
	border-radius: 4px;
	box-shadow: 0 3px 0 rgba(0, 0, 0, 0.22);
}

.is-style-head-ribbon a {
	color: #fff;
}

/* --- 4. 隅かぎ括弧（和モダン・お洒落） --- */
.is-style-head-brackets {
	position: relative;
	padding: 0.4em 0.9em;
}

.is-style-head-brackets::before,
.is-style-head-brackets::after {
	content: "";
	position: absolute;
	width: 0.7em;
	height: 0.7em;
	border-color: var(--color-accent, #2563eb);
	border-style: solid;
}

.is-style-head-brackets::before {
	top: 0;
	left: 0;
	border-width: 2px 0 0 2px;
}

.is-style-head-brackets::after {
	right: 0;
	bottom: 0;
	border-width: 0 2px 2px 0;
}

/* --- 5. ドット下線（やわらかい印象） --- */
.is-style-head-dotted {
	padding-bottom: 0.35em;
	border-bottom: 3px dotted color-mix(in srgb, var(--color-accent, #2563eb) 60%, #fff);
}

/* --- 6. ドットバッジ（先頭に丸＋ハロー） --- */
.is-style-head-badge {
	position: relative;
	padding-left: 1.1em;
}

.is-style-head-badge::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.28em;
	width: 0.5em;
	height: 0.5em;
	border-radius: 50%;
	background: var(--color-accent, #2563eb);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-accent, #2563eb) 20%, #fff);
}

/* =========================================================
   1c. 追加ボックス（v1.1.0）
   色は var(--color-accent)。色クラス（1f）がブロック単位で上書きする。
   グラデーションの2色目は --tp-c2。
   ========================================================= */

/* --- 7. グラデ枠 --- */
.is-style-box-grad {
	border: 2px solid transparent;
	border-radius: 14px;
	background:
		linear-gradient(#fff, #fff) padding-box,
		linear-gradient(120deg, var(--color-accent, #2563eb), var(--tp-c2, #a855f7)) border-box;
}

/* --- 8. ラベル枠（ラベルの既定は POINT。ラベルの見た目は 1e） --- */
.is-style-box-label {
	background: #fff;
	border: 2px solid var(--color-accent, #2563eb);
	border-radius: 10px;
}

/* --- 9. ステッチ（内側に縫い目の点線） --- */
.is-style-box-stitch {
	background: color-mix(in srgb, var(--color-accent, #2563eb) 8%, #fff);
	border-radius: 12px;
	outline: 2px dashed color-mix(in srgb, var(--color-accent, #2563eb) 45%, #fff);
	outline-offset: -8px;
}

/* --- 10. グラス（淡いグラデ＋白いフチ） --- */
.is-style-box-glass {
	background: linear-gradient(135deg,
		color-mix(in srgb, var(--color-accent, #2563eb) 9%, #fff),
		color-mix(in srgb, var(--tp-c2, #a855f7) 9%, #fff));
	border: 1px solid #fff;
	border-radius: 16px;
	box-shadow:
		0 10px 28px color-mix(in srgb, var(--color-accent, #2563eb) 16%, transparent),
		inset 0 1px 0 #fff;
}

/* --- 11. ノート（罫線） ---
   罫線の間隔＝行の高さ（1.9em）。段落の間の余白で線とずれる所はあるが、雰囲気重視。 */
.is-style-box-note {
	line-height: 1.9;
	background-color: #fff;
	background-image: repeating-linear-gradient(
		to bottom,
		transparent 0,
		transparent calc(1.9em - 1px),
		color-mix(in srgb, var(--color-accent, #2563eb) 18%, #fff) calc(1.9em - 1px),
		color-mix(in srgb, var(--color-accent, #2563eb) 18%, #fff) 1.9em
	);
	background-origin: content-box;
	border-left: 4px double #f2a7a7;
	border-radius: 4px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

/* --- 12. チェックリスト（リストの点がチェックに） --- */
.is-style-box-check {
	background: color-mix(in srgb, var(--color-accent, #2563eb) 6%, #fff);
	border: 1px solid color-mix(in srgb, var(--color-accent, #2563eb) 25%, #fff);
	border-radius: 12px;
}

ul.is-style-box-check,
ol.is-style-box-check,
.is-style-box-check ul,
.is-style-box-check ol {
	list-style: none;
}

ul.is-style-box-check,
ol.is-style-box-check {
	padding-left: 1.6em;
}

.is-style-box-check ul,
.is-style-box-check ol {
	padding-left: 0;
}

.is-style-box-check li {
	position: relative;
	padding-left: 1.8em;
}

.is-style-box-check li::before,
p.is-style-box-check::after {
	content: "\2713";
	position: absolute;
	left: 0;
	top: 0.3em;
	width: 1.3em;
	height: 1.3em;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--color-accent, #2563eb);
	color: #fff;
	font-size: 0.85em;
	font-weight: 700;
	line-height: 1;
}

/* 段落に使ったときは、左にチェックを1つ */
p.is-style-box-check {
	padding-left: 3.2em;
}

p.is-style-box-check::after {
	left: 1.3em;
	top: 1.85em;
}

/* =========================================================
   1d. 追加見出し（v1.1.0）
   ========================================================= */

/* --- 7. 塗り吹き出し --- */
.is-style-head-balloon {
	position: relative;
	padding: 0.5em 0.9em;
	color: #fff;
	background: var(--color-accent, #2563eb);
	border-radius: 8px;
}

.is-style-head-balloon::after {
	content: "";
	position: absolute;
	left: 1.4em;
	bottom: -10px;
	border: 10px solid transparent;
	border-bottom: 0;
	border-top-color: var(--color-accent, #2563eb);
}

/* --- 8. 枠線の吹き出し（しっぽは枠の色＋白の2枚重ね） --- */
.is-style-head-balloon-line {
	position: relative;
	padding: 0.45em 0.9em;
	color: color-mix(in srgb, var(--color-accent, #2563eb) 75%, #000);
	background: #fff;
	border: 2px solid var(--color-accent, #2563eb);
	border-radius: 10px;
}

.is-style-head-balloon-line::before,
.is-style-head-balloon-line::after {
	content: "";
	position: absolute;
	border-style: solid;
	border-color: transparent;
	border-bottom-width: 0;
}

.is-style-head-balloon-line::before {
	left: 1.3em;
	bottom: -12px;
	border-width: 12px 11px 0;
	border-top-color: var(--color-accent, #2563eb);
}

.is-style-head-balloon-line::after {
	left: calc(1.3em + 3px);
	bottom: -8px;
	border-width: 9px 8px 0;
	border-top-color: #fff;
}

/* --- 9. グラデ吹き出し --- */
.is-style-head-balloon-grad {
	position: relative;
	padding: 0.5em 1.1em;
	color: #fff;
	background: linear-gradient(90deg, var(--color-accent, #2563eb), var(--tp-c2, #a855f7));
	border-radius: 2em;
}

.is-style-head-balloon-grad::after {
	content: "";
	position: absolute;
	left: 1.8em;
	bottom: -9px;
	border: 9px solid transparent;
	border-bottom: 0;
	border-top-color: var(--color-accent, #2563eb);
}

.is-style-head-balloon a,
.is-style-head-balloon-grad a {
	color: #fff;
}

/* --- 10. ラベル付き見出し（ラベルの既定は CHECK。見た目は 1e） --- */
.is-style-head-label {
	position: relative;
	padding-top: 1.75em;
	padding-bottom: 0.35em;
	border-bottom: 2px solid var(--color-accent, #2563eb);
}

/* --- 11. グラデ下線 --- */
.is-style-head-grad-under {
	padding-bottom: 0.4em;
	border-bottom: 4px solid;
	border-image: linear-gradient(90deg, var(--color-accent, #2563eb), var(--tp-c2, #a855f7)) 1;
}

/* --- 12. 左グラデバー --- */
.is-style-head-grad-bar {
	padding: 0.15em 0 0.15em 0.75em;
	border-left: 6px solid;
	border-image: linear-gradient(180deg, var(--color-accent, #2563eb), var(--tp-c2, #a855f7)) 1;
}

/* --- 13. 消えていく下線 --- */
.is-style-head-fade {
	padding-bottom: 0.45em;
	background: linear-gradient(90deg, var(--color-accent, #2563eb), transparent) left bottom / 100% 3px no-repeat;
}

/* --- 14. マーカー（蛍光ペン）。1行ごとに下半分へ色を引く ---
   文字の長さに合わせるため幅は文字ぶん（display:table）。色を選ぶとその色の淡い版。 */
.is-style-head-marker {
	display: table;
	line-height: 1.5;
	padding: 0 0.2em;
	background: repeating-linear-gradient(
		to bottom,
		transparent 0,
		transparent 0.7em,
		var(--tp-marker, #fde68a) 0.7em,
		var(--tp-marker, #fde68a) 1.28em,
		transparent 1.28em,
		transparent 1.5em
	);
}

/* display:table でも「中央揃え／右揃え」が効くように */
.is-style-head-marker.has-text-align-center {
	margin-inline: auto;
}

.is-style-head-marker.has-text-align-right {
	margin-inline-start: auto;
}

.is-style-head-marker[class*="tp-c-"] {
	--tp-marker: color-mix(in srgb, var(--color-accent, #2563eb) 30%, #fff);
}

/* =========================================================
   1e. ラベル（tp-label-*）
   ボックス（マスキングテープ以外）と「ラベル付き見出し」に、枠の上の小さな札を付ける。
   ラベルの文字は --tp-label。ラベル枠／ラベル付き見出しは、指定が無ければ POINT／CHECK。
   ========================================================= */
.tp-label-point     { --tp-label: "POINT"; }
.tp-label-check     { --tp-label: "CHECK"; }
.tp-label-memo      { --tp-label: "MEMO"; }
.tp-label-pointja   { --tp-label: "ポイント"; }
.tp-label-caution   { --tp-label: "注意"; }
.tp-label-summary   { --tp-label: "まとめ"; }
.tp-label-recommend { --tp-label: "おすすめ"; }
.tp-label-hint      { --tp-label: "ヒント"; }
.tp-label-none      { --tp-label: none; }

/* 外側のブロックのラベル文字を、中の装飾が受け継がないように */
[class*="is-style-box-"]:not([class*="tp-label-"]),
[class*="is-style-head-"]:not([class*="tp-label-"]) {
	--tp-label: initial;
}

.is-style-box-label::before,
[class*="is-style-box-"][class*="tp-label-"]:not(.is-style-box-tape)::before {
	content: var(--tp-label, "POINT");
	position: absolute;
	inset: 0 auto auto 1.1em;
	transform: translateY(-50%);
	width: auto;
	height: auto;
	padding: 0.2em 1.1em;
	border: 0;
	border-radius: 999px;
	background: var(--color-accent, #2563eb);
	box-shadow: none;
	color: #fff;
	font-size: 0.78rem;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.06em;
	white-space: nowrap;
	z-index: 1;
}

/* ラベルの分だけ上の余白を広げる */
.is-style-box-label:not(.tp-label-none),
[class*="is-style-box-"][class*="tp-label-"]:not(.is-style-box-tape):not(.tp-label-none) {
	padding-top: 2em;
}

.is-style-head-label::before {
	content: var(--tp-label, "CHECK");
	position: absolute;
	top: 0;
	left: 0;
	padding: 0.15em 0.9em;
	border-radius: 4px;
	background: var(--color-accent, #2563eb);
	color: #fff;
	font-size: 0.55em;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.06em;
}

.is-style-head-label.tp-label-none {
	padding-top: 0;
}

/* =========================================================
   1f. 色（tp-c-*）
   ブロックに付けると、そのブロックの中だけアクセントカラーを差し替える
   （既存の装飾もアクセントカラーで描いているので、そのまま色が変わる）。
   --tp-c2 はグラデーションの2色目。
   ========================================================= */
.tp-c-blue   { --color-accent: #2563eb; --tp-c2: #7c3aed; }
.tp-c-navy   { --color-accent: #1e3a8a; --tp-c2: #2563eb; }
.tp-c-teal   { --color-accent: #0d9488; --tp-c2: #0891b2; }
.tp-c-green  { --color-accent: #16a34a; --tp-c2: #0d9488; }
.tp-c-orange { --color-accent: #ea580c; --tp-c2: #f59e0b; }
.tp-c-red    { --color-accent: #dc2626; --tp-c2: #f97316; }
.tp-c-pink   { --color-accent: #db2777; --tp-c2: #a855f7; }
.tp-c-purple { --color-accent: #7c3aed; --tp-c2: #db2777; }
.tp-c-gold   { --color-accent: #b7791f; --tp-c2: #eab308; }
.tp-c-gray   { --color-accent: #475569; --tp-c2: #94a3b8; }

/* tp-c-custom = 自由に選んだ色（1.2.0）。色そのものは表示時に PHP が
   style="--color-accent:…;--tp-c2:…" として付ける（inc/decorations.php）。
   クラスは下の「色を選んだときだけ」のルールを効かせるための目印。 */

/* アクセントカラーを使っていない装飾も、色を選んだときだけその色に。
   セレクタを3段にして、テーマがエディター用に読み込む古い装飾CSSより強くしている。 */
.is-style-box-tape[class*="tp-c-"][class]::before,
.is-style-box-tape[class*="tp-c-"][class]::after {
	background: color-mix(in srgb, var(--color-accent) 38%, transparent);
}

.is-style-box-sticky[class*="tp-c-"][class] {
	background: linear-gradient(180deg,
		color-mix(in srgb, var(--color-accent) 14%, #fff),
		color-mix(in srgb, var(--color-accent) 22%, #fff));
}

.is-style-box-soft[class*="tp-c-"][class] {
	background: color-mix(in srgb, var(--color-accent) 8%, #fff);
}

.is-style-box-line[class*="tp-c-"][class] {
	border-color: var(--color-accent);
}

/* =========================================================
   1g. ラインをグラデーションに（tp-grad-line・1.2.0）
   今までの見出し4種（左バー＋下線／アクセント下線／ラベル付き／ドット下線）の線を、
   1色目（--color-accent）→2色目（--tp-c2）のグラデーションにする。
   クラスが無ければ今までどおり。テーマのエディター用CSSより強くするため3段。
   ========================================================= */

/* 左バー＋下線：枠線を透明にして、同じ位置に背景でバー（縦グラデ）と下線（横グラデ）を描く */
.is-style-head-bar.tp-grad-line[class] {
	border-left-color: transparent;
	border-bottom-color: transparent;
	background:
		linear-gradient(180deg, var(--color-accent, #2563eb), var(--tp-c2, #a855f7)) left top / 6px 100% no-repeat border-box,
		linear-gradient(90deg, var(--color-accent, #2563eb), var(--tp-c2, #a855f7)) left bottom / 100% 2px no-repeat border-box;
}

/* アクセント下線：左の短い色線をグラデに（少し長くして色の変化を見せる） */
.is-style-head-underline.tp-grad-line[class]::after {
	width: 4em;
	background: linear-gradient(90deg, var(--color-accent, #2563eb), var(--tp-c2, #a855f7));
}

/* ラベル付き：下線をグラデに */
.is-style-head-label.tp-grad-line[class] {
	border-image: linear-gradient(90deg, var(--color-accent, #2563eb), var(--tp-c2, #a855f7)) 1;
}

/* ドット下線：点線の形に切り抜いたグラデを、元の線の位置に重ねる */
.is-style-head-dotted.tp-grad-line[class] {
	position: relative;
	border-bottom-color: transparent;
}

.is-style-head-dotted.tp-grad-line[class]::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -3px;
	height: 3px;
	background: linear-gradient(90deg, var(--color-accent, #2563eb), var(--tp-c2, #a855f7));
	-webkit-mask: radial-gradient(circle at 1.5px 1.5px, #000 1.4px, transparent 1.6px) 0 0 / 6px 3px repeat-x;
	mask: radial-gradient(circle at 1.5px 1.5px, #000 1.4px, transparent 1.6px) 0 0 / 6px 3px repeat-x;
}

/* =========================================================
   2. お客様の声（[reviews] ショートコード）
   ========================================================= */
.reviews-section {
	margin-block: var(--space-4, 2.5rem);
}

.reviews-title {
	text-align: center;
	margin: 0 0 var(--space-3, 1.5rem);
}

/* サマリーバッジ（平均★＋件数） */
.reviews-badge {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6em;
	margin: 0 auto var(--space-3, 1.5rem);
}

.reviews-badge-score {
	display: inline-flex;
	align-items: center;
	gap: 0.25em;
	padding: 0.3em 1em;
	border-radius: 999px;
	background: #f5b301;
	color: #4a3500;
	font-weight: 700;
	font-size: 1.05rem;
	box-shadow: 0 2px 8px rgba(245, 179, 1, 0.35);
}

.reviews-badge-star {
	font-size: 1.1em;
	line-height: 1;
}

.reviews-badge-count {
	color: var(--color-text-muted, #5b5b5b);
	font-size: 0.9rem;
}

.reviews-grid {
	display: grid;
	grid-template-columns: repeat(var(--reviews-cols, 3), minmax(0, 1fr));
	gap: var(--space-3, 1.5rem);
	align-items: stretch;
}

.review-card {
	display: flex;
	flex-direction: column;
	gap: 0.85em;
	margin: 0;
	padding: 1.6em 1.5em 1.4em;
	background: var(--color-bg, #ffffff);
	border: 1px solid var(--color-border, #e5e7eb);
	border-radius: 14px;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.07);
	position: relative;
	overflow: hidden;
	transition: transform var(--transition, 0.2s ease), box-shadow var(--transition, 0.2s ease);
}

/* Accent bar along the top edge of each card (--reviews-bar overrides it). */
.review-card::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 4px;
	background: var(--reviews-bar, linear-gradient(90deg, var(--color-accent, #2563eb), var(--color-accent-dark, #1d4ed8)));
}

/* Decorative opening quote mark. */
.review-card::after {
	content: "\201C";
	position: absolute;
	top: 0.18em;
	right: 0.35em;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 4.5rem;
	line-height: 1;
	color: var(--color-accent, #2563eb);
	opacity: 0.12;
	pointer-events: none;
}

.review-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
}

.review-stars {
	display: flex;
	gap: 0.08em;
	font-size: 1.15rem;
	letter-spacing: 0.02em;
	line-height: 1;
}

.review-star {
	color: #d8dce3;
}

.review-star.is-filled {
	color: #f5b301;
}

.review-body {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 1rem;
	line-height: 1.85;
	color: var(--color-text, #1a1a1a);
	flex: 1 1 auto;
	white-space: pre-line;
}

/* Left quote line — controllable color/gradient via --reviews-quote (falls
   back to the accent color). Higher specificity so the theme's blockquote
   border does not leak in. */
.review-card .review-body {
	position: relative;
	border-left: 0;
	padding-left: var(--space-3, 1.5rem);
}

.review-card .review-body::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.15em;
	bottom: 0.15em;
	width: 4px;
	border-radius: 2px;
	background: var(--reviews-quote, var(--color-accent, #2563eb));
}

.review-author {
	display: flex;
	align-items: center;
	gap: 0.75em;
	margin-top: auto;
	padding-top: 0.6em;
	border-top: 1px solid var(--color-border, #e5e7eb);
}

.review-avatar {
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.25rem;
	font-weight: 700;
	color: #fff;
	overflow: hidden;
	background: var(--review-av);
}

.review-avatar--img {
	object-fit: cover;
}

.review-author-meta {
	display: flex;
	flex-direction: column;
	line-height: 1.4;
	min-width: 0;
}

.review-name {
	font-weight: 700;
	color: var(--color-text, #1a1a1a);
}

.review-role {
	font-size: 0.85rem;
	color: var(--color-text-muted, #5b5b5b);
}

/* --- stars="boxed"：星を金枠チップに --------------------------------- */
.reviews-grid.has-boxed-stars .review-stars {
	gap: 0.3em;
}

.reviews-grid.has-boxed-stars .review-star {
	width: 1.7em;
	height: 1.7em;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1.5px solid #f0c24b;
	border-radius: 6px;
	background: #fffdf5;
	color: #e6b52e;
	font-size: 0.95rem;
}

.reviews-grid.has-boxed-stars .review-star.is-filled {
	background: #f5b301;
	border-color: #f5b301;
	color: #fff;
}

/* --- style="colorful"：1枚ずつ色違い -------------------------------- */
.reviews-style-colorful .review-card::before {
	background: var(--reviews-bar, var(--card-accent, var(--color-accent, #2563eb)));
}

.reviews-style-colorful .review-card::after {
	color: var(--card-accent, var(--color-accent, #2563eb));
	opacity: 0.14;
}

/* --- style="soft"：やわらかいパステルカード ------------------------- */
.reviews-style-soft .review-card {
	background: var(--color-bg-alt, #f6f7f9);
	border-color: transparent;
	box-shadow: none;
}

.reviews-style-soft .review-card:hover {
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);
}

.reviews-style-soft .review-author {
	border-top-color: rgba(0, 0, 0, 0.08);
}

/* --- style="outline"：ミニマルな枠線のみ ---------------------------- */
.reviews-style-outline .review-card {
	box-shadow: none;
}

.reviews-style-outline .review-card::before {
	display: none;
}

.reviews-style-outline .review-card:hover {
	transform: translateY(-2px);
	border-color: var(--color-accent, #2563eb);
	box-shadow: none;
}

/* --- style="gold"：五つ星に映える上品なゴールド調 ------------------- */
.reviews-style-gold .review-card {
	background: #fffdf7;
	border-color: #efe2c2;
}

.reviews-style-gold .review-card::before {
	background: var(--reviews-bar, linear-gradient(90deg, #f5b301, #e08c1a));
}

.reviews-style-gold .review-card::after {
	color: #d99a17;
}

.reviews-style-gold .review-author {
	border-top-color: #efe2c2;
}

/* Tablet: 4-up → 2-up, 3-up → 2-up. */
@media (max-width: 900px) {
	.reviews-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Phone: single column. */
@media (max-width: 600px) {
	.reviews-grid {
		grid-template-columns: 1fr;
	}
}

/* =========================================================
   3. 装飾アニメ文字（[fancy_text] / [fancy_row]）
   丸ポップ体＋二重フチ（後ろ=白フチ／前=色）で、漢字が潰れず
   ステッカー風。色・動き・光沢・キラキラを属性で指定。
   ========================================================= */
.fancy-text {
	--fancy-fill: #ef3b32;
	--fancy-outline: #ffffff;
	--fancy-ow: 0.11em;
	position: relative;
	display: inline-block;
	font-family: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Rounded Mplus 1c", sans-serif;
	font-weight: 900;
	line-height: 1.35;
	letter-spacing: 0.05em;
	font-size: 2.4rem;
	filter: drop-shadow(0 4px 5px rgba(0, 0, 0, 0.3));
}

.fancy-text > .fancy-b,
.fancy-text > .fancy-f {
	display: block;
}

.fancy-text > .fancy-b {
	position: absolute;
	left: 0;
	top: 0;
	color: var(--fancy-outline);
	-webkit-text-stroke: var(--fancy-ow) var(--fancy-outline);
	paint-order: stroke fill;
	z-index: 0;
}

/* The outline layer gets its text from data-t (1.3.0), so the words are in the
   HTML only once. Older markup (text inside .fancy-b) still works. */
.fancy-text > .fancy-b[data-t]::before {
	content: attr(data-t);
}

.fancy-text > .fancy-f {
	position: relative;
	z-index: 1;
	color: var(--fancy-fill);
}

/* Color presets */
.fancy-c-red    { --fancy-fill: #ef3b32; }
.fancy-c-green  { --fancy-fill: #06c755; }
.fancy-c-blue   { --fancy-fill: #2e8be6; }
.fancy-c-pink   { --fancy-fill: #ff5aa2; }
.fancy-c-orange { --fancy-fill: #ff8412; }
.fancy-c-purple { --fancy-fill: #8a5cf0; }
.fancy-c-black  { --fancy-fill: #2b2b2b; }

/* Gold: gradient fill with a sweeping highlight */
.fancy-c-gold > .fancy-f {
	color: #e6a92a;
	background: linear-gradient(100deg, #f7dd82, #e3a52b 45%, #fff7d2 50%, #e3a52b 55%, #bd7d1c);
	background-size: 250% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: seo-fancy-shine 3.2s linear infinite;
}

/* Optional shine sweep for any solid color */
.fancy-shine > .fancy-f {
	background: linear-gradient(100deg, var(--fancy-fill) 42%, #ffffff 50%, var(--fancy-fill) 58%);
	background-size: 250% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: seo-fancy-shine 3.2s linear infinite;
}

/* Motions */
.fancy-float  { animation: seo-fancy-float 3s ease-in-out infinite; }
.fancy-bounce { animation: seo-fancy-bounce 2.4s cubic-bezier(0.28, 0.84, 0.42, 1) infinite; }
.fancy-pop    { animation: seo-fancy-pop 1.8s ease-in-out infinite; }
.fancy-wiggle { animation: seo-fancy-wiggle 2.6s ease-in-out infinite; }

@keyframes seo-fancy-float  { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes seo-fancy-bounce { 0%, 100% { transform: translateY(0); } 20% { transform: translateY(-15px); } 35% { transform: translateY(0); } 50% { transform: translateY(-6px); } 62% { transform: translateY(0); } }
@keyframes seo-fancy-pop    { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes seo-fancy-wiggle { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes seo-fancy-shine  { 0% { background-position: 150% 0; } 100% { background-position: -50% 0; } }

/* Per-use values (attributes) arrive as CSS variables. These rules come after
   the motions above so the delay is not reset by their animation shorthand. */
.fancy-text.fancy-sized   { font-size: var(--fancy-size, 2.4rem); }
.fancy-text.fancy-delayed { animation-delay: var(--fancy-delay, 0s); }
.fancy-text.fancy-faded   { opacity: var(--fancy-opacity, 1); }

/* gradient="#a,#b" — paints the front layer only (the outline stays white).
   Three classes deep so it beats the gold / shine fills above. */
.fancy-text.fancy-grad > .fancy-f {
	background: var(--fancy-grad);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: var(--fancy-grad-c);
}

.fancy-text.fancy-grad-anim > .fancy-f {
	background-size: 250% 100%;
	animation: seo-fancy-shine 3.2s linear infinite;
}

/* Inside a heading on phones, fancy text without size= follows the heading
   size instead of its own 2.4rem (size= wins via .fancy-sized). */
@media (max-width: 782px) {
	h1 .fancy-text,
	h2 .fancy-text,
	h3 .fancy-text {
		font-size: 1.3em;
	}
}

/* [fancy_row] — several parts side by side, centered with an even gap. */
.fancy-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fancy-row-gap, 14px);
	justify-content: center;
	align-items: center;
}

.fancy-row.fancy-row-nowrap    { flex-wrap: nowrap; }
.fancy-row.fancy-row-j-left    { justify-content: flex-start; }
.fancy-row.fancy-row-j-right   { justify-content: flex-end; }
.fancy-row.fancy-row-j-between { justify-content: space-between; }
.fancy-row.fancy-row-a-top      { align-items: flex-start; }
.fancy-row.fancy-row-a-bottom   { align-items: flex-end; }
.fancy-row.fancy-row-a-baseline { align-items: baseline; }

/* Sparkle (キラキラ) */
.fancy-sp {
	position: relative;
	display: inline-block;
}

.fancy-sp .fancy-s {
	position: absolute;
	color: #fff6b0;
	font-size: 0.66em;
	font-style: normal;
	text-shadow: 0 0 12px rgba(255, 205, 60, 1), 0 0 5px rgba(255, 255, 255, 0.95);
	pointer-events: none;
	z-index: 3;
}

/* The ✦ itself is generated (1.3.0) so it isn't read as part of a heading. */
.fancy-sp .fancy-s:empty::before {
	content: "\2726";
}

.fancy-sp .fancy-s1 { top: -0.3em;  right: -0.2em;  animation: seo-fancy-twinkle 1.4s ease-in-out infinite; }
.fancy-sp .fancy-s2 { bottom: -0.08em; left: -0.24em; font-size: 0.5em; animation: seo-fancy-twinkle 1.4s ease-in-out 0.5s infinite; }
.fancy-sp .fancy-s3 { top: 0.2em; right: -0.34em; font-size: 0.42em; animation: seo-fancy-twinkle 1.4s ease-in-out 0.95s infinite; }

@keyframes seo-fancy-twinkle {
	0%, 100% { transform: scale(0) rotate(0); opacity: 0; }
	45% { transform: scale(1.3) rotate(90deg); opacity: 1; }
	70% { transform: scale(0.85) rotate(140deg); opacity: 0.85; }
}

/* =========================================================
   4. LINE風チャット吹き出し（[chat] / [chat_l] / [chat_r]）
   ========================================================= */
.chat {
	max-width: var(--chat-max, 600px);
	margin: 1.6em auto;
	padding: 1.1em 0.9em;
	background: var(--chat-area-bg, #e9edf3);
	border-radius: 16px;
}

.chat-row {
	display: flex;
	align-items: flex-start;
	gap: 0.5em;
	margin: 0.9em 0;
}

.chat-row.chat-right {
	flex-direction: row-reverse;
}

.chat-avatar {
	flex: 0 0 auto;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	object-fit: cover;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-weight: 700;
	font-size: 1.1rem;
	overflow: hidden;
	background: var(--chat-av, #cfd6e0);
}

.chat-main {
	max-width: 74%;
	display: flex;
	flex-direction: column;
}

.chat-right .chat-main {
	align-items: flex-end;
}

.chat-name {
	font-size: 0.72rem;
	color: #5b6b7a;
	margin: 0 0.35em 0.2em;
}

/* Bubble color lives on the row (--chat-bg), so a per-row color override works. */
.chat-left  { --chat-bg: #ffffff; }
.chat-right { --chat-bg: #06c755; }

.chat-bubble {
	position: relative;
	padding: 0.6em 0.85em;
	border-radius: 16px;
	line-height: 1.65;
	font-size: 0.98rem;
	word-break: break-word;
	background: var(--chat-bg, #ffffff);
}

.chat-left .chat-bubble {
	color: #1a1a1a;
	border-top-left-radius: 4px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.chat-right .chat-bubble {
	color: #ffffff;
	border-top-right-radius: 4px;
}

/* Bubble tails (colored to match the bubble). */
.chat-left .chat-bubble::before {
	content: "";
	position: absolute;
	top: 9px;
	left: -6px;
	border: 6px solid transparent;
	border-right-color: var(--chat-bg, #ffffff);
	border-left: 0;
}

.chat-right .chat-bubble::before {
	content: "";
	position: absolute;
	top: 9px;
	right: -6px;
	border: 6px solid transparent;
	border-left-color: var(--chat-bg, #06c755);
	border-right: 0;
}

@media (max-width: 480px) {
	.chat-main {
		max-width: 78%;
	}
	.chat-avatar {
		width: 40px;
		height: 40px;
	}
}

/* 吹き出しが画面に入ると「ポン」と登場（.chat-anim は JS が付与＝JS無しなら常に表示） */
.chat.chat-anim .chat-row {
	opacity: 0;
	transform: translateY(14px) scale(0.85);
	transition: opacity 0.45s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.chat.chat-anim .chat-row.is-in {
	opacity: 1;
	transform: none;
}

/* =========================================================
   5. Lottie（[lottie] / [lottie_row] / [lottie_list] / [lottie_features]）
   ========================================================= */
.ss-lottie {
	width: var(--ss-w, 220px);
	max-width: 100%;
	margin: 0 auto;
	line-height: 0;
}

.ss-lottie.ss-lottie-left {
	margin: 0;
}

.ss-lottie.ss-lottie-right {
	margin: 0 0 0 auto;
}

/* inline=yes — sits on the line of a heading / paragraph. */
/* vertical-align: middle centers on the Latin x-height, which sits ~2px below the
   middle of Japanese characters (the text looked a little high next to the icon).
   The box's baseline is its bottom (svg + line-height 0), so lowering it by
   half its width and raising it by 0.38em puts its center on the middle of the
   kanji/kana (≈0.38em above the baseline in Hiragino / Noto Sans JP / Yu Gothic).
   The bundled animations are all square, so height = --ss-w. */
.ss-lottie.ss-lottie-inline {
	display: inline-block;
	margin: 0 0.25em;
	vertical-align: middle;
	vertical-align: calc(0.38em - var(--ss-w, 220px) / 2);
}

/* At the very start of a line: no left margin, and pull the icon left by the
   blank canvas on its left (--ss-lead = fraction of the width), so the drawing
   lines up with the text edge. */
.ss-lottie.ss-lottie-inline.ss-lead {
	margin-left: calc(var(--ss-w, 0px) * var(--ss-lead, 0) * -1);
}

/* [lottie_row] — icon + text side by side. */
.ss-lottie-row {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--ss-gap, 16px);
	flex-wrap: wrap;
}

.ss-lottie-row.ss-lottie-row-right { flex-direction: row-reverse; }
.ss-lottie-row.ss-lottie-row-top   { flex-direction: column; }
.ss-lottie-row.ss-lottie-row-a-top    { align-items: flex-start; }
.ss-lottie-row.ss-lottie-row-a-bottom { align-items: flex-end; }

.ss-lottie-row-icon {
	flex: 0 0 auto;
	line-height: 0;
}

.ss-lottie-row-text {
	flex: 1 1 0;
	min-width: 0;
}

/* [lottie_list] — one icon per line. */
.ss-lottie-list {
	display: flex;
	flex-direction: column;
	gap: var(--ss-row-gap, 12px);
}

.ss-lottie-list-item {
	display: flex;
	align-items: center;
	gap: var(--ss-gap, 12px);
}

.ss-lottie-list.ss-lottie-list-a-top .ss-lottie-list-item    { align-items: flex-start; }
.ss-lottie-list.ss-lottie-list-a-bottom .ss-lottie-list-item { align-items: flex-end; }

.ss-lottie-list-icon {
	flex: 0 0 auto;
	line-height: 0;
}

.ss-lottie-list-text {
	flex: 1 1 0;
	min-width: 0;
}

/* [lottie_features] — icon + title + text cards; columns set the minimum
   card width (3 → 190px, 2 → 250px, 4 → 150px) and the grid wraps itself. */
.ss-lottie-features {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: var(--ss-gap, 1.2rem);
}

.ss-lottie-features.ss-lottie-features-2 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.ss-lottie-features.ss-lottie-features-4 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

.ss-lottie-feature {
	text-align: center;
	padding: 1.5em 1.2em;
	border: 1px solid #e5e7eb;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}

.ss-lottie-feature .ss-lottie-feature-icon {
	margin: 0 auto 0.7em;
	line-height: 0;
}

/* Two classes + element: beats the theme's own heading / paragraph rules. */
.ss-lottie-feature h3.ss-lottie-feature-title {
	margin: 0 0 0.3em;
	font-size: 1.15em;
}

.ss-lottie-feature p.ss-lottie-feature-desc {
	margin: 0;
	color: #5b5b5b;
	font-size: 0.95em;
}