@charset "UTF-8";
/* ==========================================================================
   Sara Styles v1.4.0  — ライター沙羅（サラ）記事用装飾 / SWELL
   接頭辞: sr-
   コンセプト: 会員制ラウンジのメニューカード × 赤ペン添削
     ・面はオーベルジーヌ（深い葡萄色）、強調はルージュ（口紅の赤）
     ・シャンパンゴールドは細い線にだけ使う（面には使わない）
     ・見出しと名前は明朝、本文はSWELLの設定フォントのまま
   ========================================================================== */

:root {
	--sr-ink: #2b1a22;            /* オーベルジーヌ：h2・濃い面 */
	--sr-rouge: #b3123a;          /* ルージュ：強調・判定・ボタン */
	--sr-rouge-deep: #8e0e2e;     /* ボタンhover */
	--sr-champagne: #c9a66b;      /* 細線専用 */
	--sr-champagne-text: #86683a; /* 文字に使うときのシャンパン */
	--sr-powder: #f8f0f1;         /* ボックス背景 */
	--sr-line: #e6d8db;           /* 罫線 */
	--sr-smoke: #6e5e64;          /* 補足テキスト */
	--sr-white: #fff;
	--sr-mincho: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", serif;
	--sr-radius: 4px;
}

/* --------------------------------------------------------------------------
   0. 共通：パーツ内の余白リセット
   -------------------------------------------------------------------------- */
:is(.sr-lead, .sr-judge, .sr-vs__col, .sr-redpen, .sr-warn, .sr-note, .sr-check,
	.sr-app__verdict, .sr-summary, .sr-message) > :last-child {
	margin-bottom: 0 !important;
}
:is(.sr-lead, .sr-judge, .sr-vs__col, .sr-redpen, .sr-warn, .sr-note, .sr-check,
	.sr-app__verdict, .sr-summary, .sr-message) p {
	margin: 0 0 .8em;
}
:is(.sr-vs, .sr-check, .sr-summary) ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* --------------------------------------------------------------------------
   1. 見出し（SWELLの見出し装飾を上書き）
      SWELLのブロック内見出し・FAQ・セクション用見出しは対象外
   -------------------------------------------------------------------------- */
body :is(.post_content, .editor-styles-wrapper) h2:where(:not([class*="swell-block-"]):not(.faq_q):not(.p-postList__title):not([class*="sr-"]):not(.is-style-section_ttl)) {
	position: relative;
	margin: 3.2em 0 1.4em;
	padding: 1em 1.2em 1em 1.5em;
	background: var(--sr-ink);
	color: var(--sr-white);
	border: 0;
	border-radius: 0;
	box-shadow: none;
	outline: 1px solid rgba(201, 166, 107, .6);
	outline-offset: -6px;
	font-family: var(--sr-mincho);
	font-weight: 800;
	font-size: 1.35em;
	line-height: 1.5;
	letter-spacing: .04em;
}
body :is(.post_content, .editor-styles-wrapper) h2:where(:not([class*="swell-block-"]):not(.faq_q):not(.p-postList__title):not([class*="sr-"]):not(.is-style-section_ttl))::before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: auto;
	width: 6px;
	height: auto;
	margin: 0;
	background: var(--sr-rouge);
	border: 0;
	border-radius: 0;
	box-shadow: none;
	opacity: 1;
	transform: none;
}
body :is(.post_content, .editor-styles-wrapper) h2:where(:not([class*="swell-block-"]):not(.faq_q):not(.p-postList__title):not([class*="sr-"]):not(.is-style-section_ttl))::after {
	content: none;
}

body :is(.post_content, .editor-styles-wrapper) h3:where(:not([class*="swell-block-"]):not(.faq_q):not(.p-postList__title):not([class*="sr-"]):not(.is-style-section_ttl)) {
	position: relative;
	margin: 2.6em 0 1.1em;
	padding: 0 0 .55em;
	background: none;
	color: var(--sr-ink);
	border: 0;
	border-bottom: 1px solid var(--sr-line);
	border-radius: 0;
	box-shadow: none;
	font-family: var(--sr-mincho);
	font-weight: 800;
	font-size: 1.2em;
	line-height: 1.55;
	letter-spacing: .03em;
}
body :is(.post_content, .editor-styles-wrapper) h3:where(:not([class*="swell-block-"]):not(.faq_q):not(.p-postList__title):not([class*="sr-"]):not(.is-style-section_ttl))::before {
	content: "";
	display: block;
	position: absolute;
	top: auto;
	bottom: -1px;
	left: 0;
	right: auto;
	width: 3.5em;
	height: 3px;
	margin: 0;
	background: var(--sr-rouge);
	border: 0;
	border-radius: 0;
	opacity: 1;
	transform: none;
}
body :is(.post_content, .editor-styles-wrapper) h3:where(:not([class*="swell-block-"]):not(.faq_q):not(.p-postList__title):not([class*="sr-"]):not(.is-style-section_ttl))::after {
	content: none;
}

body :is(.post_content, .editor-styles-wrapper) h4:where(:not([class*="swell-block-"]):not(.faq_q):not(.p-postList__title):not([class*="sr-"])) {
	position: relative;
	margin: 2em 0 .9em;
	padding: 0 0 0 1.15em;
	background: none;
	color: var(--sr-ink);
	border: 0;
	font-weight: 700;
	font-size: 1.05em;
	line-height: 1.6;
}
body :is(.post_content, .editor-styles-wrapper) h4:where(:not([class*="swell-block-"]):not(.faq_q):not(.p-postList__title):not([class*="sr-"]))::before {
	content: "";
	display: block;
	position: absolute;
	top: .62em;
	left: .1em;
	width: 7px;
	height: 7px;
	margin: 0;
	background: var(--sr-rouge);
	border: 0;
	border-radius: 0;
	transform: rotate(45deg);
}
body :is(.post_content, .editor-styles-wrapper) h4:where(:not([class*="swell-block-"]):not(.faq_q):not(.p-postList__title):not([class*="sr-"]))::after {
	content: none;
}

/* --------------------------------------------------------------------------
   2. テキスト装飾（マーカー・赤字・金額）
   -------------------------------------------------------------------------- */
.sr-mk {
	background: linear-gradient(transparent 62%, rgba(179, 18, 58, .16) 62%);
	font-weight: 700;
}
.sr-mk-gold {
	background: linear-gradient(transparent 62%, rgba(201, 166, 107, .32) 62%);
	font-weight: 700;
}
.sr-red {
	color: var(--sr-rouge);
	font-weight: 700;
}
.sr-price {
	display: inline-block;
	margin: 0 .15em;
	padding: .05em .6em;
	border: 1px solid var(--sr-champagne);
	border-radius: 2px;
	color: var(--sr-champagne-text);
	font-family: var(--sr-mincho);
	font-weight: 800;
	font-size: .95em;
	line-height: 1.6;
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   3. 導入リード  .sr-lead
   -------------------------------------------------------------------------- */
.sr-lead {
	margin: 0 0 2em;
	padding: .2em 0 .2em 1.1em;
	border-left: 3px solid var(--sr-rouge);
	font-size: 1.05em;
	line-height: 1.9;
}

/* --------------------------------------------------------------------------
   4. 沙羅の辛口ジャッジ  .sr-judge（このサイトの看板パーツ）
      判子の文字は data-stamp で変更可（未指定は「辛口」）
      .is-pass … 判子をシャンパン色に（合格・おすすめ）
   -------------------------------------------------------------------------- */
.sr-judge {
	position: relative;
	margin: 2.4em 0;
	padding: 1.4em 1.4em 1.3em;
	background: var(--sr-white);
	border: 1px solid var(--sr-line);
	border-top: 3px solid var(--sr-ink);
}
.sr-judge__title {
	margin: 0 0 .7em !important;
	padding-right: 4.8em;
	color: var(--sr-ink);
	font-family: var(--sr-mincho);
	font-weight: 800;
	font-size: 1.12em;
	line-height: 1.5;
}
.sr-judge::after {
	content: "辛口";
	position: absolute;
	top: -.9em;
	right: 1em;
	display: grid;
	place-items: center;
	width: 4.4em;
	height: 4.4em;
	border: 3px double var(--sr-rouge);
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	color: var(--sr-rouge);
	font-family: var(--sr-mincho);
	font-weight: 800;
	font-size: .95em;
	line-height: 1.2;
	letter-spacing: .08em;
	text-align: center;
	transform: rotate(-12deg);
	pointer-events: none;
}
.sr-judge[data-stamp]::after {
	content: attr(data-stamp);
}
.sr-judge.is-pass::after {
	border-color: var(--sr-champagne-text);
	color: var(--sr-champagne-text);
}

/* --------------------------------------------------------------------------
   5. 安売りする子 vs 稼ぐ子  .sr-vs
   -------------------------------------------------------------------------- */
.sr-vs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
	margin: 2em 0;
	border: 1px solid var(--sr-line);
}
.sr-vs__col {
	padding: 1.1em 1.2em 1.2em;
}
.sr-vs__col--ng {
	background: #f6f4f5;
	color: var(--sr-smoke);
}
.sr-vs__col--ok {
	background: var(--sr-white);
	border-left: 1px solid var(--sr-line);
}
.sr-vs__head {
	margin: -1.1em -1.2em 1em !important;
	padding: .6em 1.2em;
	font-family: var(--sr-mincho);
	font-weight: 800;
	font-size: 1.02em;
	text-align: center;
}
.sr-vs__col--ng .sr-vs__head {
	background: #e9e4e6;
	color: var(--sr-smoke);
}
.sr-vs__col--ok .sr-vs__head {
	background: var(--sr-ink);
	color: var(--sr-white);
}
.sr-vs li {
	position: relative;
	margin: 0 0 .6em;
	padding-left: 1.5em;
	line-height: 1.7;
}
.sr-vs li:last-child {
	margin-bottom: 0;
}
.sr-vs li::before {
	position: absolute;
	top: 0;
	left: 0;
	font-weight: 700;
}
.sr-vs__col--ng li::before {
	content: "×";
	color: #9b8d92;
}
.sr-vs__col--ok li::before {
	content: "○";
	color: var(--sr-rouge);
}

/* --------------------------------------------------------------------------
   6. 鉄則リスト  ol.sr-rules（順番に意味がある・優先順位があるときに使う）
   -------------------------------------------------------------------------- */
.sr-rules {
	counter-reset: sr-rule;
	list-style: none;
	margin: 2em 0;
	padding: 0;
}
.sr-rules > li {
	counter-increment: sr-rule;
	position: relative;
	margin: 0;
	padding: 1em 0 1em 4.6em;
	border-bottom: 1px solid var(--sr-line);
	line-height: 1.8;
}
.sr-rules > li:first-child {
	border-top: 1px solid var(--sr-line);
}
.sr-rules > li::before {
	content: "鉄則" counter(sr-rule);
	position: absolute;
	top: 1.05em;
	left: 0;
	width: 3.8em;
	color: var(--sr-rouge);
	font-family: var(--sr-mincho);
	font-weight: 800;
	font-size: .95em;
	line-height: 1.8;
	white-space: nowrap;
}
.sr-rules__ttl {
	display: block;
	color: var(--sr-ink);
	font-weight: 700;
}

/* --------------------------------------------------------------------------
   7. 沙羅の赤ペン添削  .sr-redpen（プロフィール文などのビフォーアフター）
      <del>消す言葉</del><ins>直した言葉</ins>
   -------------------------------------------------------------------------- */
.sr-redpen {
	margin: 2.2em 0;
	padding: 1.2em 1.3em 1.3em;
	background: var(--sr-white);
	border: 1px dashed var(--sr-rouge);
	line-height: 2;
}
.sr-redpen__label {
	display: inline-block;
	margin: 0 0 .8em !important;
	padding: 0 .7em;
	background: var(--sr-rouge);
	color: var(--sr-white);
	font-family: var(--sr-mincho);
	font-weight: 800;
	font-size: .92em;
	line-height: 1.9;
}
.sr-redpen del {
	color: var(--sr-smoke);
	text-decoration: line-through;
	text-decoration-color: var(--sr-rouge);
	text-decoration-thickness: 2px;
}
.sr-redpen ins {
	margin-left: .2em;
	color: var(--sr-rouge);
	font-weight: 700;
	text-decoration: none;
	background: none;
}
.sr-redpen__note {
	position: relative;
	padding-left: 1.3em;
	color: var(--sr-rouge);
	font-size: .94em;
}
.sr-redpen__note::before {
	content: "↳";
	position: absolute;
	left: 0;
}

/* --------------------------------------------------------------------------
   8. 注意・補足ボックス
      .sr-warn … これだけはやめて（ルージュ）
      .sr-note … 知っておくと得（シャンパン）
   -------------------------------------------------------------------------- */
.sr-warn,
.sr-note {
	margin: 2em 0;
	padding: 1.1em 1.3em 1.2em;
	line-height: 1.85;
}
.sr-warn {
	background: var(--sr-powder);
	border-left: 4px solid var(--sr-rouge);
}
.sr-note {
	background: var(--sr-white);
	border: 1px solid var(--sr-line);
	border-left: 4px solid var(--sr-champagne);
}
.sr-warn__ttl,
.sr-note__ttl {
	margin: 0 0 .5em !important;
	font-weight: 700;
	line-height: 1.6;
}
.sr-warn__ttl {
	color: var(--sr-rouge);
}
.sr-note__ttl {
	color: var(--sr-champagne-text);
}

/* --------------------------------------------------------------------------
   9. チェックリスト  .sr-check（身だしなみ・持ち物など）
   -------------------------------------------------------------------------- */
.sr-check {
	margin: 2em 0;
	padding: 1.2em 1.3em 1.3em;
	background: var(--sr-powder);
}
.sr-check__ttl {
	margin: 0 0 .8em !important;
	color: var(--sr-ink);
	font-family: var(--sr-mincho);
	font-weight: 800;
	font-size: 1.05em;
}
.sr-check li {
	position: relative;
	margin: 0 0 .55em;
	padding-left: 1.8em;
	line-height: 1.7;
}
.sr-check li:last-child {
	margin-bottom: 0;
}
.sr-check li::before {
	content: "";
	position: absolute;
	top: .3em;
	left: 0;
	width: 1.05em;
	height: 1.05em;
	background: var(--sr-white);
	border: 1.5px solid var(--sr-ink);
}
.sr-check li::after {
	content: "";
	position: absolute;
	top: .38em;
	left: .36em;
	width: .35em;
	height: .65em;
	border: solid var(--sr-rouge);
	border-width: 0 2.5px 2.5px 0;
	transform: rotate(45deg);
}

/* --------------------------------------------------------------------------
   10. 表  テーブルブロックの「追加CSSクラス」に sr-table
   -------------------------------------------------------------------------- */
.sr-table {
	margin: 2em 0;
	overflow-x: auto;
}
.sr-table table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--sr-line);
	font-size: .95em;
}
.sr-table :is(th, td) {
	padding: .75em .9em;
	border: 1px solid var(--sr-line);
	line-height: 1.6;
	vertical-align: middle;
}
.sr-table thead :is(th, td) {
	background: var(--sr-ink);
	color: var(--sr-white);
	font-family: var(--sr-mincho);
	font-weight: 800;
	text-align: center;
	border-color: var(--sr-ink);
}
.sr-table tbody tr > :first-child {
	background: var(--sr-powder);
	color: var(--sr-ink);
	font-weight: 700;
}

/* --------------------------------------------------------------------------
   11. ハイクラスアプリ紹介カード  .sr-app
       順位: .sr-app--1 / --2 / --3 （無指定は番号のみ）
   -------------------------------------------------------------------------- */
.sr-app {
	margin: 2.6em 0;
	background: var(--sr-white);
	border: 1px solid var(--sr-line);
}
.sr-app__head {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: .2em 1em;
	padding: 1em 1.2em;
	border-bottom: 1px solid var(--sr-line);
}
.sr-app__rank {
	grid-row: span 2;
	display: flex;
	align-items: baseline;
	justify-content: center;
	box-sizing: border-box;
	padding-top: .95em;
	width: 3em;
	height: 3em;
	border: 1px solid var(--sr-ink);
	border-radius: 50%;
	color: var(--sr-ink);
	font-family: var(--sr-mincho);
	font-weight: 800;
	font-size: 1em;
	line-height: 1;
}
.sr-app__rank::after {
	content: "位";
	font-size: .6em;
	margin-left: .05em;
}
.sr-app--1 .sr-app__rank {
	background: var(--sr-rouge);
	border-color: var(--sr-rouge);
	color: var(--sr-white);
}
.sr-app--2 .sr-app__rank {
	background: var(--sr-ink);
	color: var(--sr-white);
	outline: 1px solid var(--sr-champagne);
	outline-offset: -4px;
}
.sr-app--3 .sr-app__rank {
	border-color: var(--sr-champagne-text);
	color: var(--sr-champagne-text);
}
.sr-app__name {
	margin: 0 !important;
	color: var(--sr-ink);
	font-family: var(--sr-mincho);
	font-weight: 800;
	font-size: 1.25em;
	line-height: 1.4;
}
.sr-app__catch {
	margin: 0 !important;
	color: var(--sr-smoke);
	font-size: .9em;
	line-height: 1.5;
}
.sr-app__body {
	display: grid;
	grid-template-columns: minmax(0, 42%) 1fr;
	gap: 1.2em;
	padding: 1.2em;
}
.sr-app__img {
	margin: 0 !important;
}
.sr-app__img img {
	display: block;
	width: 100%;
	height: auto;
}
.sr-app__spec {
	margin: 0 !important;
}
.sr-app__spec > div {
	display: grid;
	grid-template-columns: 6.5em 1fr;
	gap: .8em;
	padding: .5em 0;
	border-bottom: 1px dotted var(--sr-line);
	font-size: .93em;
	line-height: 1.6;
}
.sr-app__spec > div:first-child {
	padding-top: 0;
}
.sr-app__spec dt {
	margin: 0;
	color: var(--sr-smoke);
	font-weight: 400;
}
.sr-app__spec dd {
	margin: 0;
	color: var(--sr-ink);
	font-weight: 700;
}
.sr-app__verdict {
	margin: 0 1.2em 1.2em;
	padding: 1em 1.1em;
	background: var(--sr-powder);
	line-height: 1.8;
}
.sr-app__verdict-ttl {
	margin: 0 0 .4em !important;
	color: var(--sr-rouge);
	font-family: var(--sr-mincho);
	font-weight: 800;
}
.sr-app__cta {
	margin: 0 !important;
	padding: 0 1.2em 1.4em;
	text-align: center;
}

/* --------------------------------------------------------------------------
   12. ボタン  .sr-btn（a でも span でも可）  （単独で置くときは p.sr-btn-wrap で囲む）
       .sr-btn--sub … 枠線だけの控えめボタン
   -------------------------------------------------------------------------- */
.sr-btn-wrap {
	margin: 2em 0;
	text-align: center;
}
.post_content .sr-btn,
.sr-btn {
	display: inline-block;
	box-sizing: border-box;
	width: 100%;
	max-width: 420px;
	padding: 1em 1.6em;
	background: var(--sr-rouge);
	border: 1px solid var(--sr-rouge);
	border-radius: var(--sr-radius);
	color: var(--sr-white);
	font-weight: 700;
	font-size: 1.02em;
	line-height: 1.5;
	letter-spacing: .05em;
	text-align: center;
	text-decoration: none;
	box-shadow: 0 3px 0 var(--sr-rouge-deep);
	transition: background-color .2s, transform .2s, box-shadow .2s;
}
.post_content .sr-btn:hover,
.sr-btn:hover {
	background: var(--sr-rouge-deep);
	color: var(--sr-white);
	transform: translateY(2px);
	box-shadow: 0 1px 0 var(--sr-rouge-deep);
}
.post_content .sr-btn--sub,
.sr-btn--sub {
	background: var(--sr-white);
	border-color: var(--sr-ink);
	color: var(--sr-ink);
	box-shadow: none;
}
.post_content .sr-btn--sub:hover,
.sr-btn--sub:hover {
	background: var(--sr-ink);
	color: var(--sr-white);
	transform: none;
	box-shadow: none;
}
.sr-btn:focus-visible {
	outline: 3px solid var(--sr-champagne);
	outline-offset: 3px;
}
/* 広告リンク span.jsl-custom-label（data-id で商標へ飛ぶ）
   ボタンの外側・内側どちらに置いても下線・装飾を打ち消す */
.sr-btn,
.jsl-custom-label:has(.sr-btn) {
	cursor: pointer;
}
:is(.sr-btn, .sr-btn-wrap, .sr-app__cta, .sr-cta__btn, .sr-top3__links) .jsl-custom-label,
.jsl-custom-label:has(.sr-btn),
.jsl-custom-label .sr-btn,
.sr-btn.jsl-custom-label {
	text-decoration: none !important;
	border-bottom: 0 !important;
	background-image: none !important;
	box-shadow: none;
}
:is(.sr-btn-wrap, .sr-cta__btn) > .jsl-custom-label,
.jsl-custom-label:has(> .sr-btn) {
	display: inline-block;
	width: 100%;
	max-width: 420px;
	padding: 0;
	background-color: transparent;
}
:is(.sr-btn-wrap, .sr-cta__btn) > .jsl-custom-label .sr-btn {
	width: 100%;
	max-width: none;
}
.jsl-custom-label .sr-btn {
	box-shadow: 0 3px 0 var(--sr-rouge-deep);
}
.jsl-custom-label .sr-btn--sub {
	box-shadow: none;
}

/* --------------------------------------------------------------------------
   13. まとめ・締めのメッセージ
       .sr-summary … 記事末のまとめ箇条
       .sr-message … 沙羅から読者への締めのひとこと
   -------------------------------------------------------------------------- */
.sr-summary {
	margin: 2em 0;
	padding: 1.3em 1.4em 1.4em;
	border: 1px solid var(--sr-ink);
	outline: 1px solid var(--sr-champagne);
	outline-offset: -5px;
}
.sr-summary__ttl {
	margin: 0 0 .8em !important;
	color: var(--sr-ink);
	font-family: var(--sr-mincho);
	font-weight: 800;
	font-size: 1.08em;
	text-align: center;
}
.sr-summary li {
	position: relative;
	margin: 0 0 .6em;
	padding-left: 1.2em;
	line-height: 1.75;
}
.sr-summary li:last-child {
	margin-bottom: 0;
}
.sr-summary li::before {
	content: "";
	position: absolute;
	top: .72em;
	left: .1em;
	width: 6px;
	height: 6px;
	background: var(--sr-rouge);
	transform: rotate(45deg);
}

.sr-message {
	margin: 2.4em 0;
	padding: 1.5em 1.5em 1.3em;
	background: var(--sr-powder);
	font-family: var(--sr-mincho);
	font-weight: 600;
	font-size: 1.05em;
	line-height: 2;
}
.sr-message__sign {
	margin: .6em 0 0 !important;
	color: var(--sr-rouge);
	font-weight: 800;
	text-align: right;
}

/* --------------------------------------------------------------------------
   14. スマホ
   -------------------------------------------------------------------------- */
@media (max-width: 599px) {
	body :is(.post_content, .editor-styles-wrapper) h2:where(:not([class*="swell-block-"]):not(.faq_q):not(.p-postList__title):not([class*="sr-"]):not(.is-style-section_ttl)) {
		margin-top: 2.6em;
		padding: .85em 1em .85em 1.25em;
		font-size: 1.18em;
	}
	body :is(.post_content, .editor-styles-wrapper) h3:where(:not([class*="swell-block-"]):not(.faq_q):not(.p-postList__title):not([class*="sr-"]):not(.is-style-section_ttl)) {
		font-size: 1.1em;
	}

	.sr-lead {
		font-size: 1em;
	}
	.sr-judge {
		padding: 1.2em 1.1em 1.1em;
	}
	.sr-judge::after {
		width: 3.9em;
		height: 3.9em;
		font-size: .85em;
		right: .6em;
	}
	.sr-judge__title {
		padding-right: 4em;
		font-size: 1.05em;
	}

	.sr-vs {
		grid-template-columns: 1fr;
	}
	.sr-vs__col--ok {
		border-left: 0;
		border-top: 1px solid var(--sr-line);
	}

	.sr-rules > li {
		padding-left: 0;
		padding-top: 2.6em;
	}
	.sr-rules > li::before {
		top: .9em;
	}

	.sr-app__head {
		padding: .9em 1em;
	}
	.sr-app__name {
		font-size: 1.12em;
	}
	.sr-app__body {
		grid-template-columns: 1fr;
		padding: 1em;
	}
	.sr-app__spec > div {
		grid-template-columns: 5.8em 1fr;
	}
	.sr-app__verdict {
		margin: 0 1em 1em;
	}
	.sr-app__cta {
		padding: 0 1em 1.2em;
	}

	.sr-table table {
		min-width: 520px;
	}

	.sr-message {
		padding: 1.2em 1.1em 1.1em;
		font-size: 1em;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sr-btn {
		transition: none;
	}
}

/* ==========================================================================
   v1.1.0 追加：パパ活アプリ比較記事用パーツ
   ========================================================================== */

/* --------------------------------------------------------------------------
   15. 太字の装飾
       <b class="sr-yl"> … 重要（黄色の下線）
       <b class="sr-rd"> … 注意（赤文字）
   -------------------------------------------------------------------------- */
.sr-yl {
	background: linear-gradient(transparent 60%, #ffe46e 60%);
	font-weight: 700;
}
.sr-rd {
	color: var(--sr-rouge);
	font-weight: 700;
}
/* 目次などに読ませる区切り文字を見た目だけ隠す */
.sr-vh {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   16. 独自デザイン見出し（クラスに sr- を含む h2〜h4）の共通リセット
       SWELLの見出し装飾を消してから各デザインを当てる
   -------------------------------------------------------------------------- */
body :is(.post_content, .editor-styles-wrapper) :is(h2, h3, h4)[class*="sr-"] {
	position: relative;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	outline: 0;
	color: var(--sr-ink);
	letter-spacing: .02em;
}
body :is(.post_content, .editor-styles-wrapper) :is(h2, h3, h4)[class*="sr-"]::before,
body :is(.post_content, .editor-styles-wrapper) :is(h2, h3, h4)[class*="sr-"]::after {
	content: none;
}

/* --------------------------------------------------------------------------
   17. 押さえておくべきアプリ3選  .sr-top3
   -------------------------------------------------------------------------- */
.sr-top3 {
	margin: 2em 0 2.6em;
	padding: 1.5em 1.2em 1.3em;
	background: var(--sr-powder);
}
.sr-top3__ttl {
	margin: 0 0 .4em !important;
	color: var(--sr-ink);
	font-family: var(--sr-mincho);
	font-weight: 800;
	font-size: 1.25em;
	line-height: 1.5;
	text-align: center;
}
.sr-top3__lead {
	margin: 0 0 1.4em !important;
	color: var(--sr-smoke);
	font-size: .93em;
	line-height: 1.7;
	text-align: center;
}
.sr-top3__list {
	display: grid;
	gap: 1.2em;
}
.sr-top3__card {
	position: relative;
	padding: 1.3em 1.3em 1.3em;
	background: var(--sr-white);
	border: 1px solid var(--sr-line);
}
.sr-top3__card.is-main {
	border: 2px solid var(--sr-rouge);
}
.sr-top3__badge {
	position: absolute;
	top: -.85em;
	left: 1em;
	padding: .1em .8em;
	background: var(--sr-rouge);
	color: var(--sr-white);
	font-size: .78em;
	font-weight: 700;
	line-height: 1.7;
}
.sr-top3__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: .2em 1em;
	margin: 0 0 .7em;
	padding: 0 0 .6em;
	border-bottom: 1px solid var(--sr-line);
}
.sr-top3__name {
	margin: 0 !important;
	color: var(--sr-ink);
	font-family: var(--sr-mincho);
	font-weight: 800;
	font-size: 1.35em;
	line-height: 1.4;
}
.sr-stars {
	white-space: nowrap;
	font-size: 1.05em;
	letter-spacing: .08em;
	line-height: 1.4;
}
.sr-stars__label {
	margin-right: .4em;
	color: var(--sr-smoke);
	font-size: .72em;
	letter-spacing: 0;
}
.sr-stars .is-on {
	color: var(--sr-rouge);
}
.sr-stars .is-off {
	color: #dccdd1;
}
.sr-top3__catch {
	margin: 0 0 .6em !important;
	color: var(--sr-rouge);
	font-weight: 700;
	line-height: 1.6;
}
.sr-top3__text {
	margin: 0 0 1.1em !important;
	font-size: .95em;
	line-height: 1.85;
}
.sr-top3__links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .7em 1.4em;
	margin: 0 !important;
}
.post_content .sr-top3__links .sr-btn,
.sr-top3__links .sr-btn {
	flex: 0 1 300px;
	padding: .8em 1.2em;
}
.post_content a.sr-top3__more,
a.sr-top3__more {
	color: var(--sr-ink);
	font-size: .9em;
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   18. 表の順位・適合度
       <span class="sr-rank sr-rank--1">1</span> … 「位」は自動で付く
       <span class="sr-fit">◎</span> / sr-fit--mid（○）/ sr-fit--low（△）
       横に広い表は sr-table sr-table--wide（1列目がスクロール中も固定）
   -------------------------------------------------------------------------- */
.sr-rank {
	display: inline-flex;
	align-items: baseline;
	justify-content: center;
	box-sizing: border-box;
	width: 2.4em;
	height: 2.4em;
	margin: 0 0 .35em;
	padding-top: .6em;
	background: var(--sr-white);
	border: 1px solid var(--sr-ink);
	border-radius: 50%;
	color: var(--sr-ink);
	font-family: var(--sr-mincho);
	font-weight: 800;
	font-size: .9em;
	line-height: 1;
}
.sr-rank::after {
	content: "位";
	font-size: .62em;
}
.sr-rank--1 {
	background: var(--sr-rouge);
	border-color: var(--sr-rouge);
	color: var(--sr-white);
}
.sr-rank--2 {
	background: var(--sr-ink);
	color: var(--sr-white);
	outline: 1px solid var(--sr-champagne);
	outline-offset: -4px;
}
.sr-rank--3 {
	border-color: var(--sr-champagne-text);
	color: var(--sr-champagne-text);
}
.sr-table td .sr-rank + b,
.sr-table td .sr-rank + a {
	display: block;
}
.sr-table a {
	color: var(--sr-ink);
}
.sr-fit {
	display: inline-block;
	margin-right: .25em;
	color: var(--sr-rouge);
	font-weight: 800;
	font-size: 1.15em;
	line-height: 1;
}
.sr-fit--mid {
	color: var(--sr-champagne-text);
}
.sr-fit--low {
	color: var(--sr-smoke);
}
.sr-table--wide table {
	min-width: 980px;
	table-layout: auto;
}
.sr-table--wide :is(th, td):first-child {
	position: sticky;
	left: 0;
	z-index: 1;
	min-width: 7.5em;
	text-align: center;
}
.sr-table--wide thead :is(th, td):first-child {
	z-index: 2;
}
.sr-table--wide tbody td:first-child {
	box-shadow: 2px 0 0 var(--sr-line);
}
.sr-scroll-hint {
	display: none;
	margin: 0 0 .4em !important;
	color: var(--sr-smoke);
	font-size: .8em;
	text-align: right;
}

/* --------------------------------------------------------------------------
   19. 目的別アプリ診断  [sr_diagnosis]
   -------------------------------------------------------------------------- */
.sr-diag {
	margin: 2em 0 2.4em;
	background: var(--sr-white);
	border: 1px solid var(--sr-line);
	border-top: 3px solid var(--sr-ink);
}
.sr-diag__top {
	padding: 1.1em 1.3em .9em;
	border-bottom: 1px solid var(--sr-line);
}
.sr-diag__ttl {
	margin: 0 0 .7em !important;
	color: var(--sr-ink);
	font-family: var(--sr-mincho);
	font-weight: 800;
	font-size: 1.12em;
	line-height: 1.5;
}
.sr-diag__bar {
	height: 4px;
	background: #efe4e6;
	overflow: hidden;
}
.sr-diag__bar span {
	display: block;
	width: 0;
	height: 100%;
	background: var(--sr-rouge);
	transition: width .3s;
}
.sr-diag__count {
	margin: .4em 0 0 !important;
	color: var(--sr-smoke);
	font-size: .8em;
	text-align: right;
}
.sr-diag__body {
	padding: 1.3em;
}
.sr-diag__q {
	min-width: 0;
	margin: 0 0 1.6em;
	padding: 0;
	border: 0;
}
.sr-diag.is-ready .sr-diag__q {
	display: none;
	margin: 0;
}
.sr-diag.is-ready .sr-diag__q.is-active {
	display: block;
}
.sr-diag__q:focus {
	outline: none;
}
.sr-diag__qtext {
	display: block;
	width: 100%;
	margin: 0 0 1em;
	padding: 0;
	color: var(--sr-ink);
	font-weight: 700;
	font-size: 1.05em;
	line-height: 1.6;
}
.sr-diag__qnum {
	margin-right: .5em;
	color: var(--sr-rouge);
	font-family: var(--sr-mincho);
	font-weight: 800;
}
.sr-diag__opts {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: .7em;
}
.sr-diag__opt {
	-webkit-appearance: none;
	appearance: none;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	width: 100%;
	min-height: 3.4em;
	margin: 0;
	padding: .8em 1em;
	background: var(--sr-white);
	border: 1px solid #cdbcc1;
	border-radius: var(--sr-radius);
	color: var(--sr-ink);
	font: inherit;
	font-size: .95em;
	line-height: 1.5;
	text-align: left;
	cursor: pointer;
	transition: border-color .2s, background-color .2s;
}
.sr-diag__opt:hover,
.sr-diag__opt.is-selected {
	background: var(--sr-powder);
	border-color: var(--sr-rouge);
}
.sr-diag__opt.is-selected {
	box-shadow: inset 4px 0 0 var(--sr-rouge);
}
.sr-diag__opt:focus-visible,
.sr-diag__back:focus-visible,
.sr-diag__restart:focus-visible {
	outline: 3px solid var(--sr-champagne);
	outline-offset: 2px;
}
.sr-diag__nav {
	display: none;
}
.sr-diag.is-ready .sr-diag__nav {
	display: block;
	margin-top: 1em;
}
.sr-diag__back,
.sr-diag__restart {
	-webkit-appearance: none;
	appearance: none;
	padding: .3em 0;
	background: none;
	border: 0;
	color: var(--sr-smoke);
	font: inherit;
	font-size: .88em;
	text-decoration: underline;
	cursor: pointer;
}
.sr-diag__back[hidden] {
	display: none;
}
.sr-diag__rlabel {
	margin: 0 0 1em !important;
	color: var(--sr-ink);
	font-family: var(--sr-mincho);
	font-weight: 800;
	font-size: 1.15em;
	text-align: center;
}
.sr-diag__rlist {
	display: grid;
	gap: .8em;
	margin: 0 0 1em !important;
	padding: 0 !important;
	list-style: none !important;
}
.sr-diag__ritem {
	margin: 0 !important;
	padding: 1em 1.1em 1.1em;
	background: var(--sr-white);
	border: 1px solid var(--sr-line);
}
.sr-diag__ritem::before {
	content: none !important;
}
.sr-diag__ritem.is-main {
	border: 2px solid var(--sr-rouge);
}
.sr-diag__rtag {
	display: inline-block;
	margin-bottom: .4em;
	padding: 0 .7em;
	background: var(--sr-smoke);
	color: var(--sr-white);
	font-size: .78em;
	font-weight: 700;
	line-height: 1.8;
}
.sr-diag__ritem.is-main .sr-diag__rtag {
	background: var(--sr-rouge);
}
.sr-diag__rname {
	margin: 0 0 .3em !important;
	color: var(--sr-ink);
	font-family: var(--sr-mincho);
	font-weight: 800;
	font-size: 1.2em;
	line-height: 1.4;
}
.sr-diag__rtext {
	margin: 0 0 .9em !important;
	font-size: .93em;
	line-height: 1.75;
}
.post_content .sr-diag__ritem .sr-btn,
.sr-diag__ritem .sr-btn {
	max-width: none;
	padding: .75em 1em;
	font-size: .95em;
}
.sr-diag__rnote {
	margin: 0 0 .8em !important;
	padding: .9em 1em;
	background: var(--sr-powder);
	font-size: .92em;
	line-height: 1.8;
}

/* --------------------------------------------------------------------------
   20. 目的別アプリ選択フロー  .sr-fmap
   -------------------------------------------------------------------------- */
.sr-fmap {
	display: grid;
	gap: 1.2em;
	margin: 2em 0;
}
.sr-fmap__group {
	background: var(--sr-white);
	border: 1px solid var(--sr-line);
}
.sr-fmap__head {
	margin: 0 !important;
	padding: .7em 1.1em;
	background: var(--sr-ink);
	color: var(--sr-white);
	font-family: var(--sr-mincho);
	font-weight: 800;
	font-size: 1.02em;
	line-height: 1.5;
}
.sr-fmap__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 2.4em minmax(0, 18em);
	align-items: center;
	gap: .7em;
	padding: 1em 1.1em;
}
.sr-fmap__row + .sr-fmap__row {
	border-top: 1px solid var(--sr-line);
}
.sr-fmap__need {
	margin: 0 !important;
	color: var(--sr-ink);
	font-weight: 700;
	line-height: 1.6;
}
.sr-fmap__arrow {
	position: relative;
	display: block;
	width: 100%;
	height: 2px;
	background: var(--sr-rouge);
}
.sr-fmap__arrow::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 0;
	width: 8px;
	height: 8px;
	border-top: 2px solid var(--sr-rouge);
	border-right: 2px solid var(--sr-rouge);
	transform: translateY(-50%) rotate(45deg);
}
.sr-fmap__apps {
	display: flex;
	flex-wrap: wrap;
	gap: .4em;
}
.post_content a.sr-fmap__app,
.sr-fmap__app {
	flex: 1 1 6em;
	display: block;
	padding: .55em .6em;
	background: var(--sr-powder);
	border: 1px solid var(--sr-rouge);
	color: var(--sr-rouge);
	font-weight: 700;
	font-size: .92em;
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .2s, color .2s;
}
.post_content a.sr-fmap__app:hover,
a.sr-fmap__app:hover {
	background: var(--sr-rouge);
	color: var(--sr-white);
}

/* --------------------------------------------------------------------------
   21. アプリ選定ステップ（カード型）
       h3.sr-step-h ＋ 直後の段落 p.sr-step-body
   -------------------------------------------------------------------------- */
body :is(.post_content, .editor-styles-wrapper) h3.sr-step-h {
	display: flex;
	align-items: center;
	gap: .9em;
	margin: 2em 0 0;
	padding: .9em 1.1em;
	background: var(--sr-powder);
	border: 1px solid var(--sr-line);
	border-bottom: 0;
	font-family: var(--sr-mincho);
	font-weight: 800;
	font-size: 1.12em;
	line-height: 1.5;
}
.sr-step-h__num {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 4.6em;
	height: 4.2em;
	background: var(--sr-rouge);
	color: var(--sr-white);
	font-size: .68em;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: 0;
	white-space: nowrap;
}
.sr-step-h__num em {
	font-style: normal;
	font-size: 2em;
	line-height: 1;
}
body :is(.post_content, .editor-styles-wrapper) p.sr-step-body {
	margin: 0 !important;
	padding: 1.1em 1.3em 1.3em;
	background: var(--sr-white);
	border: 1px solid var(--sr-line);
	border-top: 1px dashed #d8c5ca;
	line-height: 1.9;
}

/* --------------------------------------------------------------------------
   22. 出会うまでのステップ（進んでいくタイムライン型）
       h3.sr-flow-h.is-1〜is-6 ＋ 直後の段落 p.sr-flow-body（最後だけ is-last）
   -------------------------------------------------------------------------- */
body :is(.post_content, .editor-styles-wrapper) h3.sr-flow-h {
	min-height: 2.7em;
	margin: 0;
	padding: .15em 0 .8em 3.7em;
	font-family: var(--sr-mincho);
	font-weight: 800;
	font-size: 1.12em;
	line-height: 1.55;
}
body :is(.post_content, .editor-styles-wrapper) h3.sr-flow-h.is-1 {
	margin-top: 2em;
}
body :is(.post_content, .editor-styles-wrapper) h3.sr-flow-h::before {
	content: "";
	position: absolute;
	top: 1em;
	bottom: 0;
	left: calc(1.24em - 1px);
	width: 2px;
	background: #e3d3d7;
}
body :is(.post_content, .editor-styles-wrapper) h3.sr-flow-h::after {
	content: "";
	display: block;
	width: 100%;
	max-width: 12em;
	height: 4px;
	margin-top: .55em;
	background: linear-gradient(to right, var(--sr-rouge) var(--sr-p, 0%), #eadde0 var(--sr-p, 0%));
}
.sr-flow-h.is-1 { --sr-p: 16.67%; }
.sr-flow-h.is-2 { --sr-p: 33.33%; }
.sr-flow-h.is-3 { --sr-p: 50%; }
.sr-flow-h.is-4 { --sr-p: 66.67%; }
.sr-flow-h.is-5 { --sr-p: 83.33%; }
.sr-flow-h.is-6 { --sr-p: 100%; }
.sr-flow-h__num {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.48em;
	height: 2.48em;
	background: var(--sr-ink);
	border-radius: 50%;
	color: var(--sr-white);
	font-size: 1em;
	line-height: 1;
}
.sr-flow-h.is-6 .sr-flow-h__num {
	background: var(--sr-rouge);
}
body :is(.post_content, .editor-styles-wrapper) p.sr-flow-body {
	margin: 0 0 0 1.39em !important;
	padding: .1em 0 2.2em 2.75em;
	border-left: 2px solid #e3d3d7;
	line-height: 1.9;
}
body :is(.post_content, .editor-styles-wrapper) p.sr-flow-body.is-last {
	border-left-color: transparent;
	padding-bottom: .5em;
}

/* --------------------------------------------------------------------------
   23. ランキングの商標見出し  h3.sr-app-h（sr-app-h--1〜3 で順位色）
   -------------------------------------------------------------------------- */
body :is(.post_content, .editor-styles-wrapper) h3.sr-app-h {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	column-gap: .9em;
	margin: 3.2em 0 1.2em;
	padding: 0 0 .8em;
	border-bottom: 2px solid var(--sr-ink);
	font-size: 1em;
	line-height: 1.4;
	scroll-margin-top: 90px;
}
.sr-app-h__rank {
	grid-row: span 2;
	display: flex;
	align-items: baseline;
	justify-content: center;
	box-sizing: border-box;
	width: 3em;
	height: 3em;
	padding-top: .9em;
	background: var(--sr-white);
	border: 1px solid var(--sr-ink);
	border-radius: 50%;
	color: var(--sr-ink);
	font-family: var(--sr-mincho);
	font-weight: 800;
	font-size: 1.05em;
	line-height: 1;
}
.sr-app-h__rank::after {
	content: "位";
	font-size: .6em;
}
.sr-app-h--1 .sr-app-h__rank {
	background: var(--sr-rouge);
	border-color: var(--sr-rouge);
	color: var(--sr-white);
}
.sr-app-h--2 .sr-app-h__rank {
	background: var(--sr-ink);
	color: var(--sr-white);
	outline: 1px solid var(--sr-champagne);
	outline-offset: -4px;
}
.sr-app-h--3 .sr-app-h__rank {
	border-color: var(--sr-champagne-text);
	color: var(--sr-champagne-text);
}
.sr-app-h__name {
	color: var(--sr-ink);
	font-family: var(--sr-mincho);
	font-weight: 800;
	font-size: 1.35em;
	line-height: 1.4;
}
.sr-app-h__sub {
	margin-top: .2em;
	color: var(--sr-smoke);
	font-weight: 700;
	font-size: .85em;
	line-height: 1.55;
}

/* --------------------------------------------------------------------------
   24. 口コミ  .sr-reviews > .sr-review
   -------------------------------------------------------------------------- */
.sr-reviews {
	display: grid;
	gap: 1em;
	margin: 1.4em 0 2em;
}
.sr-review {
	padding: 1.1em 1.2em 1.2em;
	background: var(--sr-white);
	border: 1px solid var(--sr-line);
	border-left: 3px solid var(--sr-champagne);
}
.sr-review__meta {
	display: flex;
	align-items: center;
	gap: .7em;
	margin-bottom: .7em;
}
.sr-review__avatar {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 2.4em;
	height: 2.4em;
	background: var(--sr-powder);
	border: 1px solid #e9d6db;
	border-radius: 50%;
	color: var(--sr-rouge);
	font-family: var(--sr-mincho);
	font-weight: 800;
	line-height: 1;
}
.sr-review__who {
	margin: 0 !important;
	color: var(--sr-ink);
	font-weight: 700;
	font-size: .95em;
	line-height: 1.4;
}
.sr-review__who span {
	display: block;
	color: var(--sr-smoke);
	font-weight: 400;
	font-size: .82em;
}
.sr-review__rate {
	margin-left: auto;
	padding: .1em .7em;
	border: 1px solid var(--sr-champagne);
	border-radius: 2px;
	color: var(--sr-champagne-text);
	font-size: .78em;
	font-weight: 700;
	line-height: 1.7;
	white-space: nowrap;
}
.sr-review__text {
	position: relative;
	margin: 0 !important;
	padding-left: 1.5em;
	font-size: .95em;
	line-height: 1.85;
}
.sr-review__text::before {
	content: "“";
	position: absolute;
	top: -.15em;
	left: 0;
	color: #dfc6cc;
	font-family: var(--sr-mincho);
	font-size: 2em;
	line-height: 1;
}

/* --------------------------------------------------------------------------
   25. 目的別の最適解  p.sr-best（段落ブロックの追加CSSクラス）
   -------------------------------------------------------------------------- */
body :is(.post_content, .editor-styles-wrapper) p.sr-best {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .4em .8em;
	margin: 0 0 1em;
	padding: .75em 1em;
	background: var(--sr-powder);
	border: 1px solid var(--sr-rouge);
	color: var(--sr-ink);
	font-weight: 700;
	line-height: 1.6;
}
.sr-best__label {
	display: inline-block;
	padding: .1em .7em;
	background: var(--sr-rouge);
	color: var(--sr-white);
	font-family: var(--sr-mincho);
	font-weight: 800;
	font-size: .82em;
	line-height: 1.7;
}

/* --------------------------------------------------------------------------
   26. よくある質問  h3.sr-faq-q ＋ p.sr-faq-a
   -------------------------------------------------------------------------- */
body :is(.post_content, .editor-styles-wrapper) h3.sr-faq-q {
	margin: 1.8em 0 0;
	padding: .9em 1em .9em 3.3em;
	background: var(--sr-powder);
	font-weight: 700;
	font-size: 1.05em;
	line-height: 1.6;
}
body :is(.post_content, .editor-styles-wrapper) h3.sr-faq-q::before,
body :is(.post_content, .editor-styles-wrapper) p.sr-faq-a::before {
	position: absolute;
	left: .9em;
	display: grid;
	place-items: center;
	width: 1.8em;
	height: 1.8em;
	color: var(--sr-white);
	font-family: var(--sr-mincho);
	font-weight: 800;
	font-size: .95em;
	line-height: 1;
}
body :is(.post_content, .editor-styles-wrapper) h3.sr-faq-q::before {
	content: "Q";
	top: .8em;
	background: var(--sr-ink);
}
body :is(.post_content, .editor-styles-wrapper) p.sr-faq-a {
	position: relative;
	margin: 0 !important;
	padding: 1em 1em 1.1em 3.3em;
	border: 1px solid var(--sr-line);
	border-top: 0;
	line-height: 1.85;
}
body :is(.post_content, .editor-styles-wrapper) p.sr-faq-a::before {
	content: "A";
	top: 1.05em;
	background: var(--sr-rouge);
}

/* --------------------------------------------------------------------------
   27. 即切りリスト  .sr-nglist
   -------------------------------------------------------------------------- */
.sr-nglist {
	margin: 1.4em 0 2em;
	padding: .8em 1.3em;
	background: var(--sr-white);
	border: 2px solid var(--sr-rouge);
}
.sr-nglist ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.sr-nglist li {
	position: relative;
	margin: 0;
	padding: .6em 0 .6em 2em;
	border-bottom: 1px dashed #ecdade;
	line-height: 1.7;
}
.sr-nglist li:last-child {
	border-bottom: 0;
}
.sr-nglist li::before {
	content: "×";
	position: absolute;
	top: .78em;
	left: 0;
	display: grid;
	place-items: center;
	width: 1.35em;
	height: 1.35em;
	background: var(--sr-rouge);
	border-radius: 50%;
	color: var(--sr-white);
	font-weight: 700;
	font-size: .85em;
	line-height: 1;
}

/* --------------------------------------------------------------------------
   28. v1.1.0 パーツのスマホ表示
   -------------------------------------------------------------------------- */
@media (max-width: 599px) {
	.sr-top3 {
		padding: 1.3em .9em 1em;
	}
	.sr-top3__ttl {
		font-size: 1.12em;
	}
	.sr-top3__card {
		padding: 1.2em 1em 1.1em;
	}
	.sr-top3__name {
		font-size: 1.2em;
	}
	.sr-top3__links {
		flex-direction: column;
		align-items: stretch;
		text-align: center;
	}
	.post_content .sr-top3__links .sr-btn,
	.sr-top3__links .sr-btn {
		flex: none;
		max-width: none;
	}

	.sr-scroll-hint {
		display: block;
	}
	.sr-table--wide :is(th, td):first-child {
		min-width: 6.5em;
	}

	.sr-diag__top,
	.sr-diag__body {
		padding-left: 1em;
		padding-right: 1em;
	}
	.sr-diag__opts {
		grid-template-columns: 1fr;
	}

	.sr-fmap__row {
		grid-template-columns: 1fr;
		gap: .5em;
	}
	.sr-fmap__arrow {
		width: 2px;
		height: 1.3em;
		margin-left: 1.2em;
	}
	.sr-fmap__arrow::after {
		top: auto;
		right: auto;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%) rotate(135deg);
	}

	body :is(.post_content, .editor-styles-wrapper) h3.sr-step-h {
		padding: .8em .9em;
		font-size: 1.05em;
	}
	body :is(.post_content, .editor-styles-wrapper) p.sr-step-body {
		padding: 1em 1em 1.1em;
	}

	body :is(.post_content, .editor-styles-wrapper) h3.sr-flow-h {
		font-size: 1.05em;
	}
	body :is(.post_content, .editor-styles-wrapper) p.sr-flow-body {
		margin-left: 1.3em !important;
		padding-left: 2.58em;
	}

	.sr-app-h__name {
		font-size: 1.18em;
	}
	.sr-app-h__rank {
		width: 2.8em;
		height: 2.8em;
		padding-top: .85em;
	}

	body :is(.post_content, .editor-styles-wrapper) h3.sr-faq-q,
	body :is(.post_content, .editor-styles-wrapper) p.sr-faq-a {
		padding-left: 3em;
	}
	body :is(.post_content, .editor-styles-wrapper) h3.sr-faq-q::before,
	body :is(.post_content, .editor-styles-wrapper) p.sr-faq-a::before {
		left: .7em;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sr-diag__bar span,
	.sr-diag__opt,
	a.sr-fmap__app {
		transition: none;
	}
}
.sr-table--wide td:nth-child(2) {
	min-width: 13em;
}

/* 口コミの星評価（v1.1.1） */
.sr-review__stars {
	margin-left: auto;
	font-size: .92em;
	letter-spacing: .04em;
}

/* ==========================================================================
   v1.2.0 追加：商標ロゴ・広告カード
   ロゴ画像は200×200pxを表示サイズに合わせて縮小表示（高解像度画面でもにじまない）
   ========================================================================== */
.sr-logo {
	display: block;
	box-sizing: border-box;
	flex: 0 0 auto;
	width: 64px;
	height: 64px;
	max-width: none;
	margin: 0;
	object-fit: contain;
	background: var(--sr-white);
	border: 1px solid var(--sr-line);
	border-radius: 12px;
}

/* 3選カードの見出し（ロゴ＋名前＋星） */
.sr-top3__head {
	align-items: center;
	justify-content: flex-start;
	flex-wrap: nowrap;
	gap: .9em;
}
.sr-top3__head .sr-logo {
	width: 72px;
	height: 72px;
}
.sr-top3__title {
	display: flex;
	flex-direction: column;
	gap: .2em;
	min-width: 0;
}
.sr-top3__links > .jsl-custom-label {
	flex: 0 1 300px;
	width: auto;
}
.sr-top3__links > .jsl-custom-label .sr-btn {
	width: 100%;
	max-width: none;
}

/* 比較表の1列目（順位・ロゴ・名前） */
.sr-table td .sr-logo {
	width: 48px;
	height: 48px;
	margin: .2em auto .35em;
	border-radius: 10px;
}

/* 商標紹介の広告カード  .sr-cta */
.sr-cta {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: .8em 1.2em;
	margin: 0 0 2em;
	padding: 1.1em 1.2em;
	background: var(--sr-powder);
	border: 1px solid var(--sr-line);
}
.sr-cta .sr-logo {
	grid-row: span 2;
	width: 88px;
	height: 88px;
}
.sr-cta__name {
	margin: 0 0 .2em !important;
	color: var(--sr-ink);
	font-family: var(--sr-mincho);
	font-weight: 800;
	font-size: 1.12em;
	line-height: 1.4;
}
.sr-cta__catch {
	margin: 0 !important;
	color: var(--sr-smoke);
	font-size: .88em;
	line-height: 1.6;
}
.sr-cta__btn {
	margin: 0 !important;
}
.sr-cta__btn > .jsl-custom-label {
	max-width: 340px;
}
.post_content .sr-cta__btn .sr-btn,
.sr-cta__btn .sr-btn {
	padding: .8em 1.2em;
}

/* 診断結果のロゴ */
.sr-diag__rhead {
	display: flex;
	align-items: center;
	gap: .8em;
	margin-bottom: .5em;
}
.sr-diag__rhead .sr-logo {
	width: 56px;
	height: 56px;
	border-radius: 10px;
}
.sr-diag__rhead .sr-diag__rname {
	margin: 0 !important;
}

@media (max-width: 599px) {
	.sr-top3__head .sr-logo {
		width: 60px;
		height: 60px;
	}
	.sr-top3__links > .jsl-custom-label {
		flex: none;
		width: 100%;
	}
	.sr-table td .sr-logo {
		width: 40px;
		height: 40px;
	}
	.sr-cta {
		grid-template-columns: auto minmax(0, 1fr);
		padding: 1em;
	}
	.sr-cta .sr-logo {
		grid-row: auto;
		width: 64px;
		height: 64px;
	}
	.sr-cta__btn {
		grid-column: 1 / -1;
	}
	.sr-cta__btn > .jsl-custom-label {
		max-width: none;
	}
}

/* ==========================================================================
   v1.3.0 角丸の統一（見出しは対象外）
   --sr-r-lg … 大きな箱 / --sr-r-md … カード・表 / --sr-r-sm … 小さなラベル
   ========================================================================== */
:root {
	--sr-r-lg: 16px;
	--sr-r-md: 12px;
	--sr-r-sm: 6px;
	--sr-r-pill: 999px;
}

/* 大きな箱 */
.sr-top3,
.sr-diag,
.sr-cta,
.sr-judge,
.sr-summary,
.sr-message,
.sr-nglist,
.sr-check,
.sr-redpen,
.sr-app {
	border-radius: var(--sr-r-lg);
}
.sr-diag,
.sr-app {
	overflow: hidden;
}

/* カード・ボックス */
.sr-top3__card,
.sr-review,
.sr-diag__ritem,
.sr-warn,
.sr-note,
.sr-app__verdict,
.sr-diag__rnote {
	border-radius: var(--sr-r-md);
}
body :is(.post_content, .editor-styles-wrapper) p.sr-best {
	border-radius: var(--sr-r-md);
}

/* 中に見出し帯がある箱は角からはみ出さないよう切り抜く */
.sr-vs,
.sr-fmap__group {
	border-radius: var(--sr-r-md);
	overflow: hidden;
}

/* 見出しとつながるカードは下側だけ丸める */
body :is(.post_content, .editor-styles-wrapper) p.sr-step-body,
body :is(.post_content, .editor-styles-wrapper) p.sr-faq-a {
	border-radius: 0 0 var(--sr-r-md) var(--sr-r-md);
}

/* 小さなラベル・チップ・ボタン */
.sr-top3__badge,
.sr-diag__rtag,
.sr-best__label,
.sr-price,
.post_content a.sr-fmap__app,
.sr-fmap__app,
.sr-review__rate {
	border-radius: var(--sr-r-pill);
}
.sr-redpen__label {
	border-radius: var(--sr-r-sm);
	padding: 0 .8em;
}
.sr-step-h__num {
	border-radius: 10px;
}
.sr-check li::before {
	border-radius: 4px;
}
.sr-diag__opt {
	border-radius: var(--sr-r-md);
}
.sr-diag__bar,
.sr-diag__bar span {
	border-radius: var(--sr-r-pill);
}
.post_content .sr-btn,
.sr-btn {
	border-radius: var(--sr-r-pill);
}

/* 表：外枠を figure 側に移して角丸にする（スクロール・1列目固定はそのまま） */
.sr-table {
	border: 1px solid var(--sr-line);
	border-radius: var(--sr-r-md);
}
.sr-table table {
	border: 0;
	margin: 0;
}
.sr-table tr > :first-child {
	border-left: 0;
}
.sr-table tr > :last-child {
	border-right: 0;
}
.sr-table thead tr:first-child > * {
	border-top: 0;
}
.sr-table tbody tr:last-child > * {
	border-bottom: 0;
}

/* ==========================================================================
   v1.4.0 目的別アプリ選択フロー（ツリー型）  .sr-tree
   問い → 3つの目的 → 2つのケース → アプリ（ページ内の解説へ移動）
   ========================================================================== */
.sr-tree {
	margin: 2em 0;
	padding: 1.6em 1.2em 1.4em;
	background: var(--sr-powder);
	border-radius: var(--sr-r-lg);
}
.sr-tree__root {
	position: relative;
	padding-bottom: 1.6em;
	text-align: center;
}
.sr-tree__root::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 2px;
	height: 1.6em;
	background: var(--sr-champagne);
	transform: translateX(-50%);
}
.sr-tree__q {
	display: inline-flex;
	align-items: center;
	gap: .7em;
	margin: 0 !important;
	padding: .85em 1.6em;
	background: var(--sr-ink);
	border-radius: var(--sr-r-md);
	outline: 1px solid rgba(201, 166, 107, .6);
	outline-offset: -5px;
	color: var(--sr-white);
	font-family: var(--sr-mincho);
	font-weight: 800;
	font-size: 1.08em;
	line-height: 1.5;
}
.sr-tree__q-mark {
	flex: none;
	display: grid;
	place-items: center;
	width: 1.8em;
	height: 1.8em;
	background: var(--sr-rouge);
	border-radius: 50%;
	font-size: .85em;
	line-height: 1;
}
.sr-tree__branches {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1em;
	padding-top: 1.4em;
}
.sr-tree__branches::before {
	content: "";
	position: absolute;
	top: 0;
	left: calc((100% - 2em) / 6);
	right: calc((100% - 2em) / 6);
	height: 2px;
	background: var(--sr-champagne);
}
.sr-tree__branch {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 0 .8em .9em;
	background: var(--sr-white);
	border: 1px solid var(--sr-line);
	border-radius: var(--sr-r-md);
}
.sr-tree__branch::before {
	content: "";
	position: absolute;
	top: -1.4em;
	left: 50%;
	width: 2px;
	height: 1.4em;
	background: var(--sr-champagne);
	transform: translateX(-50%);
}
.sr-tree__branch::after {
	content: "";
	position: absolute;
	top: -5px;
	left: 50%;
	width: 8px;
	height: 8px;
	background: var(--sr-champagne);
	border-radius: 50%;
	transform: translateX(-50%);
}
.sr-tree__label {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .45em;
	margin: 0 -.8em .9em !important;
	padding: 1em .8em .85em;
	border-bottom: 2px solid var(--sr-ink);
	color: var(--sr-ink);
	font-family: var(--sr-mincho);
	font-weight: 800;
	font-size: .98em;
	line-height: 1.45;
	text-align: center;
}
.sr-tree__icon {
	flex: none;
	display: grid;
	place-items: center;
	width: 2.2em;
	height: 2.2em;
	background: var(--sr-powder);
	border-radius: 50%;
	font-size: .95em;
	line-height: 1;
}
.sr-tree__need {
	position: relative;
	margin: 0 0 .7em !important;
	padding-bottom: 1em;
	color: var(--sr-ink);
	font-weight: 700;
	font-size: .9em;
	line-height: 1.55;
	text-align: center;
}
.sr-tree__need::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 50%;
	border-top: 7px solid var(--sr-rouge);
	border-right: 6px solid transparent;
	border-left: 6px solid transparent;
	transform: translateX(-50%);
}
.sr-tree__apps {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: .5em;
}
.post_content a.sr-tree__app,
.sr-tree__app {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .4em;
	padding: .65em .3em .55em;
	background: var(--sr-white);
	border: 1px solid #e8dadd;
	border-radius: var(--sr-r-md);
	color: var(--sr-ink);
	font-weight: 700;
	font-size: .8em;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	transition: border-color .2s, box-shadow .2s;
}
.post_content a.sr-tree__app:hover,
a.sr-tree__app:hover {
	border-color: var(--sr-rouge);
	box-shadow: inset 0 0 0 1px var(--sr-rouge);
	color: var(--sr-rouge);
}
a.sr-tree__app:focus-visible {
	outline: 3px solid var(--sr-champagne);
	outline-offset: 2px;
}
.sr-tree__app .sr-logo {
	width: 48px;
	height: 48px;
	border-radius: 10px;
}
.sr-tree__or {
	display: flex;
	align-items: center;
	gap: .6em;
	margin: .9em 0 !important;
	color: var(--sr-champagne-text);
	font-family: var(--sr-mincho);
	font-weight: 600;
	font-size: .78em;
}
.sr-tree__or::before,
.sr-tree__or::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--sr-line);
}

@media (max-width: 599px) {
	.sr-tree {
		padding: 1.3em .9em 1.1em;
	}
	.sr-tree__q {
		padding: .8em 1.1em;
		font-size: 1em;
	}
	.sr-tree__branches {
		grid-template-columns: 1fr;
		gap: 1.4em;
	}
	.sr-tree__branches::before {
		content: none;
	}
	.sr-tree__label {
		flex-direction: row;
		justify-content: center;
	}
	.sr-tree__app .sr-logo {
		width: 52px;
		height: 52px;
	}
	.post_content a.sr-tree__app,
	.sr-tree__app {
		font-size: .85em;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sr-tree__app {
		transition: none;
	}
}
.sr-tree__app span {
	white-space: nowrap;
	letter-spacing: -.02em;
}