/*!
Theme Name: モージャマ
Description: メンズ脱毛の比較サイト「モージャマ」の表示テーマ。データ・管理画面・検索・比較・診断・ショートコードはプラグイン「モージャマ コア」側にあり、このテーマは表示だけを担当します。テーマを削除してもデータは失われません。運営者名などは「モージャマ > サイト情報」で設定します。
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mojama
Tags: blog, custom-menu, translation-ready
*/

/**
 * デザイントークンは assets/css/tokens.css にある（先に読み込まれる）。
 * このファイルはレイアウトと部品の見た目を持つ。
 *
 * **クラス名の衝突に注意。**
 * プラグインが生成するHTMLとテーマのCSSは同じクラス名を共有しているため、
 * 新しいクラスを足すときは tokens.css に同名が無いか確認すること。
 * （色を宣言しないクラスは、同名のグローバル定義から色を継承してしまう）
 */

/* ===================================================== ヘッダー */
.mjm-header {
	background: #fff;
	border-bottom: 1px solid var(--line);
	position: sticky;
	top: 0;
	z-index: 50;
}

.mjm-header .hd {
	display: flex;
	align-items: center;
	gap: 20px;
	height: 60px;
}

.mjm-header .logo {
	display: flex;
	align-items: center;
	gap: 9px;
	text-decoration: none;
	flex-shrink: 0;
}

.mjm-header .logo .mk {
	width: 32px;
	height: 32px;
	border-radius: 8px;
	background: var(--navy);
	color: #fff;
	display: grid;
	place-items: center;
	font-weight: 800;
	font-size: 17px;
}

.mjm-header .logo b {
	font-size: 17px;
	letter-spacing: .04em;
	display: block;
	line-height: 1.2;
	color: var(--txt);
}

.mjm-header .logo small {
	font-size: 10px;
	color: var(--muted);
}

.mjm-header .gn {
	display: flex;
	align-items: center;
	gap: 18px;
	flex: 1;
	min-width: 0;
}

.mjm-header .gn a,
.mjm-header .gbtn {
	font-size: 13.5px;
	text-decoration: none;
	padding: 4px 0;
	border-bottom: 2px solid transparent;
	white-space: nowrap;
	color: var(--txt);
}

.mjm-header .gn > a:hover,
.mjm-header .gbtn:hover {
	color: var(--accent);
	border-bottom-color: var(--accent);
}

/* 口コミはこのサイトの中心。まとめずに出し、少しだけ目立たせる */
.mjm-header .gl.is-core {
	font-weight: 700;
	color: var(--navy);
}

/* ------------------------------------------------- まとめた項目（探す／知る）
 * **JavaScriptが無くても開くこと。**
 * マウスは :hover、キーボードは :focus-within で開く。
 * JavaScriptは、触る操作のための押して開く動きと、
 * Escape・外側を押したときに閉じる動きを足すだけ。
 */
.mjm-header .gi {
	position: relative;
	display: flex;
	align-items: center;
}

.mjm-header .gbtn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: 0;
	border: 0;
	border-bottom: 2px solid transparent;
	cursor: pointer;
	font-family: inherit;
	font-weight: 500;
}

/* 開く向きの印 */
.mjm-header .gbtn .cv {
	width: 7px;
	height: 7px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform .15s;
}

.mjm-header .gbtn[aria-expanded="true"] .cv {
	transform: translateY(1px) rotate(225deg);
}

.mjm-header .sub {
	position: absolute;
	top: 100%;
	left: -14px;
	min-width: 248px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 10px;
	box-shadow: 0 6px 24px rgba(16, 40, 64, .13);
	padding: 7px;
	display: none;
	z-index: 60;
}

/* マウスを乗せている間（JavaScriptの有無によらず） */
.mjm-header .gi:hover > .sub {
	display: block;
}

/*
 * JavaScriptが無いときのキーボード操作。
 *
 * **JavaScriptがあるときは使わない。**
 * Escapeで閉じたあとボタンに焦点を戻すので、:focus-within が残っていると
 * その場で開き直してしまい、閉じられなくなる。
 */
.mjm-header:not(.js-nav) .gi:focus-within > .sub {
	display: block;
}

/* JavaScriptがあるときは、押した状態だけで開閉する */
.mjm-header .gbtn[aria-expanded="true"] + .sub {
	display: block;
}

/*
 * ヘッダーとメニューの間に隙間があると、斜めに動かしたときに閉じてしまう。
 * 見えない帯で橋渡しする。
 */
.mjm-header .sub::before {
	content: "";
	position: absolute;
	top: -10px;
	left: 0;
	right: 0;
	height: 10px;
}

.mjm-header .sub a {
	display: block;
	padding: 9px 12px;
	border-radius: 7px;
	border-bottom: 0;
	white-space: normal;
}

.mjm-header .sub a:hover {
	background: var(--bg);
	color: var(--txt);
}

.mjm-header .sub a b {
	display: block;
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.5;
}

.mjm-header .sub a span {
	display: block;
	font-size: 11.5px;
	color: var(--muted);
	line-height: 1.5;
}

.mjm-header .tools {
	display: flex;
	gap: 8px;
}

.mjm-header .tool {
	display: flex;
	align-items: center;
	gap: 6px;
	border: 1px solid var(--line);
	background: #fff;
	border-radius: 999px;
	padding: 6px 13px;
	font-size: 12.5px;
	text-decoration: none;
	color: var(--txt);
}

.mjm-header .tool:hover {
	border-color: var(--navy);
}

.mjm-header .tool .n {
	background: var(--navy);
	color: #fff;
	border-radius: 999px;
	min-width: 19px;
	height: 19px;
	display: grid;
	place-items: center;
	font-size: 11px;
	font-weight: 700;
}

@media (max-width: 1100px) {
	.mjm-header .gn { gap: 14px; }
	.mjm-header .gn > a,
	.mjm-header .gbtn { font-size: 12.5px; }

	/*
	 * キャッチコピーを畳む。
	 * ロゴの横幅のほとんどがこの一行で、ここが残っているとナビとツールが近づく。
	 * サイト名は残るので、どこにいるかは分かる。
	 */
	.mjm-header .logo small { display: none; }
}

/* 狭い画面ではナビを1段下げ、横スクロールで全項目に到達できるようにする
   （display:none にするとモバイルからナビに触れなくなる） */
@media (max-width: 900px) {
	.mjm-header .hd {
		flex-wrap: wrap;
		height: auto;
		padding-top: 11px;
		gap: 12px;
	}
	.mjm-header .gn {
		order: 3;
		width: 100%;
		flex: none;
		gap: 0;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		border-top: 1px solid var(--line);
		margin: 0 -16px;
		padding: 0 16px;
		scrollbar-width: none;
	}
	.mjm-header .gn::-webkit-scrollbar { display: none; }
	.mjm-header .gn a { padding: 11px 13px; font-size: 13px; }
	.mjm-header .gn > a:first-child { padding-left: 0; }
	.mjm-header .tools { margin-left: auto; }
	.mjm-header .tools .lb { display: none; }

	/*
	 * 狭い画面では、まとめを解いて全項目を1列に出す。
	 *
	 * 指で押して開くメニューにすると、項目に届くまで2回押させることになる。
	 * display:contents で入れ子を外し、今までどおり横スクロールで全部に届かせる。
	 */
	.mjm-header .gi,
	.mjm-header .sub { display: contents; }

	.mjm-header .gbtn { display: none; }

	/*
	 * 口コミを先頭に出す。
	 * 1列に並べると5番目になり、横スクロールしないと見えない。
	 * このサイトの中心なので、最初に目に入る位置に置く。
	 */
	.mjm-header .gl.is-core { order: -1; padding-left: 0; }

	.mjm-header .sub a {
		padding: 11px 13px;
		border-radius: 0;
		white-space: nowrap;
	}

	/* 1列に並べるので、説明文は省く */
	.mjm-header .sub a span { display: none; }
	.mjm-header .sub a b { display: inline; font-weight: 400; font-size: 13px; }
	.mjm-header .sub::before { content: none; }
}

/* ===================================================== パンくず */
.mjm-crumbs {
	background: #fff;
	border-bottom: 1px solid var(--line);
	font-size: 12px;
}

.mjm-crumbs ol {
	list-style: none;
	margin: 0;
	padding: 9px 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	color: var(--muted);
}

.mjm-crumbs li + li::before {
	content: "›";
	margin-right: 6px;
	color: var(--faint);
}

.mjm-crumbs a {
	color: var(--muted);
	text-decoration: none;
}

.mjm-crumbs a:hover { color: var(--accent); }

/* ===================================================== ヒーロー */
.mjm-hero {
	background: linear-gradient(160deg, var(--navy) 0%, var(--navy-l) 100%);
	color: #fff;
	padding: 30px 0;
}

.mjm-hero h1 {
	font-size: 28px;
	margin: 0 0 10px;
	line-height: 1.4;
}

.mjm-hero .h1sub {
	display: block;
	font-size: 15px;
	font-weight: 500;
	opacity: .85;
	margin-top: 5px;
}

.mjm-hero-lead {
	margin: 0 0 18px;
	font-size: 14px;
	opacity: .92;
	max-width: 44em;
}

.mjm-hero .top {
	display: flex;
	gap: 7px;
	margin-bottom: 10px;
	flex-wrap: wrap;
}

@media (max-width: 900px) {
	.mjm-hero h1 { font-size: 22px; }
	.mjm-hero .h1sub { font-size: 13.5px; }
}

/* ===================================================== 統計ブロック */
.stats {
	display: flex;
	background: #fff;
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow);
	flex-wrap: wrap;
}

.stat {
	flex: 1;
	min-width: 150px;
	padding: 14px 18px;
	border-right: 1px solid var(--line);
	color: var(--txt);
}

.stat:last-child { border-right: 0; }
.stat .l { font-size: 11.5px; color: var(--muted); }
.stat .v { font-size: 23px; font-weight: 800; line-height: 1.3; }
.stat .v.sm { font-size: 15px; padding-top: 5px; }
.stat .v small { font-size: 12px; font-weight: 500; color: var(--muted); }

.mjm-area-intro .note {
	font-size: 11.5px;
	color: var(--muted);
	padding: 12px 0 0;
	margin: 0;
}

/* ===================================================== カード */
.mjm-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 15px;
}

@media (max-width: 900px) {
	.mjm-cards { grid-template-columns: 1fr; }
}

.card {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 17px;
	display: flex;
	flex-direction: column;
	box-shadow: var(--shadow);
	height: 100%;
	color: var(--txt);
}

.card .axis {
	display: inline-block;
	background: var(--navy);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	border-radius: 5px;
	padding: 3px 9px;
	margin-bottom: 12px;
	align-self: flex-start;
}

.card .top {
	display: flex;
	gap: 7px;
	margin-bottom: 10px;
	flex-wrap: wrap;
}

.bname {
	font-size: 17px;
	font-weight: 700;
	margin: 0 0 3px;
	line-height: 1.45;
	color: var(--txt);
}

.bname a { text-decoration: none; }
.bname a:hover { color: var(--accent); }

.boper {
	font-size: 11.5px;
	color: var(--faint);
	margin: 0 0 12px;
}

.card .reason {
	font-size: 12px;
	color: var(--muted);
	background: #F2F8F7;
	border-left: 2px solid var(--teal);
	padding: 8px 10px;
	border-radius: 0 5px 5px 0;
	margin: 11px 0;
	line-height: 1.6;
}

.card .reason b { color: var(--teal); }

.card .feats {
	list-style: none;
	padding: 0;
	margin: 11px 0 14px;
	font-size: 12.5px;
}

.card .feats li {
	display: flex;
	gap: 7px;
	margin-bottom: 5px;
	color: var(--muted);
	line-height: 1.55;
}

.card .feats .ck {
	color: var(--teal);
	font-weight: 700;
	flex-shrink: 0;
}

.cfoot {
	margin-top: auto;
	display: flex;
	gap: 8px;
	align-items: center;
	padding-top: 6px;
}

.vdate {
	font-size: 11px;
	color: var(--faint);
	margin: 9px 0 0;
	text-align: right;
}

/* ===================================================== 料金＋施術範囲 */
.pwc { margin: 4px 0 6px; }

.pwc-name {
	font-size: 11.5px;
	color: var(--muted);
	margin: 0;
}

.pwc-amt {
	font-size: 25px;
	font-weight: 800;
	color: var(--accent);
	line-height: 1.2;
	margin: 0;
}

.pwc-amt.na {
	font-size: 14px;
	font-weight: 500;
	color: var(--faint);
}

.pwc-amt small {
	font-size: 12px;
	color: var(--muted);
	font-weight: 500;
}

/* 施術範囲。金額と必ずセットで出るので、金額の直下に固定して見せる */
.pwc-cov {
	font-size: 11.5px;
	color: var(--muted);
	background: var(--bg);
	border-radius: 5px;
	padding: 6px 9px;
	margin: 7px 0 4px;
	line-height: 1.5;
}

.pwc-eff {
	font-size: 12px;
	color: var(--muted);
	margin: 0;
}

.pwc-eff b { color: var(--txt); }
.pwc-eff .s { font-size: 11.5px; display: block; }

/* ===================================================== 見出し・セクション */
.mjm-main section > h2 {
	font-size: 20px;
	margin: 0 0 6px;
}

.mjm-main section > h3,
.mjm-main .th {
	font-size: 15px;
	margin: 18px 0 8px;
}

.mjm-kv th {
	background: #F7FAFC;
	width: 150px;
	color: var(--muted);
	font-size: 12px;
}

.mjm-hours td { text-align: center; }

/* ===================================================== 2カラムパネル */
.two {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

@media (max-width: 900px) {
	.two { grid-template-columns: 1fr; }
}

.ph { margin: 0 0 3px; font-size: 16px; }
.pd { color: var(--muted); font-size: 12.5px; margin: 0 0 14px; }
.tiny { font-size: 11.5px; color: var(--faint); margin: 12px 0 0; }
.chip.is-empty { color: var(--faint); background: var(--bg); }

/* ===================================================== 店舗一覧 */
.shops {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
}

@media (max-width: 900px) {
	.shops { grid-template-columns: 1fr; }
}

.shop {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 8px;
	padding: 14px;
	box-shadow: var(--shadow);
}

.shop .h {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	margin-bottom: 4px;
}

.shop .nm {
	font-weight: 700;
	font-size: 14.5px;
	margin: 0;
	flex: 1;
}

.shop .nm a { text-decoration: none; }
.shop .nm a:hover { color: var(--accent); }

.shop .br { font-size: 11.5px; color: var(--faint); margin: 0 0 8px; }

.shop dl {
	margin: 0;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 3px 10px;
	font-size: 12.5px;
}

.shop dt { color: var(--muted); white-space: nowrap; }
.shop dd { margin: 0; }

.shop .unk {
	color: var(--faint);
	font-size: 12px;
	background: var(--bg);
	border-radius: 5px;
	padding: 6px 9px;
	margin: 8px 0 0;
}

.shop .unk a { color: var(--teal); }
.shop .lk { margin: 10px 0 0; }
.shop .lk a { font-size: 12.5px; text-decoration: none; color: var(--teal); font-weight: 700; }

.lk a { color: var(--teal); text-decoration: none; font-weight: 700; }
.shop .lk { display: flex; gap: 14px; flex-wrap: wrap; }

/* 市区町村ごとのまとめ。東京都は131院あるため、
   ひと続きの一覧にすると目的の店舗にたどり着けない */
.mjm-city {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	margin-bottom: 10px;
	box-shadow: var(--shadow);
}

.mjm-city > summary {
	display: flex;
	align-items: baseline;
	gap: 10px;
	padding: 13px 17px;
	cursor: pointer;
	font-weight: 700;
	font-size: 14.5px;
}

.mjm-city > summary .c {
	font-size: 12px;
	color: var(--muted);
	font-weight: 400;
}

.mjm-city[open] > summary { border-bottom: 1px solid var(--line); }
.mjm-city .shops { padding: 14px 17px; }
.mjm-city .shop { box-shadow: none; }

/* ===================================================== 検索 */
.mjm-search-head {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	margin-bottom: 12px;
}

.mjm-hits { margin: 0; font-size: 14px; }
.mjm-hits b { font-size: 20px; color: var(--accent); }
.mjm-sort { margin-left: auto; font-size: 12.5px; color: var(--muted); }
.mjm-sort select { padding: 6px 10px; border: 1px solid var(--line); border-radius: 7px; background: #fff; }

.mjm-applied {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 14px;
}

.mjm-open-filters {
	display: none;
	width: 100%;
	border: 1px solid var(--line);
	background: #fff;
	border-radius: 8px;
	padding: 11px;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	margin-bottom: 12px;
	color: var(--txt);
}

.mjm-search-body {
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: 20px;
	align-items: start;
}

.mjm-filters {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 16px;
	box-shadow: var(--shadow);
	position: sticky;
	top: 72px;
}

.mjm-filters fieldset {
	border: 0;
	padding: 0;
	margin: 0 0 16px;
}

.mjm-filters legend {
	font-size: 12px;
	font-weight: 700;
	color: var(--muted);
	padding: 0;
	margin-bottom: 7px;
}

.mjm-filters select {
	width: 100%;
	padding: 9px;
	border: 1px solid var(--line);
	border-radius: 7px;
	background: #fff;
	font-size: 13px;
}

.mjm-filters label {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 13px;
	padding: 4px 0;
	cursor: pointer;
	color: var(--txt);
}

.mjm-filters label em {
	margin-left: auto;
	font-style: normal;
	font-size: 11px;
	color: var(--faint);
}

.mjm-reset {
	width: 100%;
	border: 1px solid var(--line);
	background: #fff;
	border-radius: 7px;
	padding: 9px;
	font-size: 12.5px;
	cursor: pointer;
	color: var(--muted);
}

.mjm-zero {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 22px;
	box-shadow: var(--shadow);
}

.mjm-sugg {
	display: grid;
	gap: 9px;
	margin-top: 12px;
}

@media (max-width: 900px) {
	.mjm-search-body { grid-template-columns: 1fr; }
	.mjm-open-filters { display: block; }
	.mjm-filters { display: none; position: static; }
	.mjm-filters.open { display: block; }
}

/* ===================================================== 診断
 * 見出しタグを使わず p に見出し用のクラスを当てている。
 * ページ内に埋め込んだときに見出しの階層を壊さないため。
 */
.mjm-start {
	display: block;
	width: 100%;
	background: #fff;
	border: 2px solid var(--teal);
	border-radius: var(--radius);
	padding: 18px;
	cursor: pointer;
	text-align: left;
	box-shadow: var(--shadow);
	color: var(--txt);
}

.mjm-start b { display: block; font-size: 16px; margin-bottom: 3px; }
.mjm-start span { font-size: 12.5px; color: var(--muted); }

.mjm-prog { margin: 16px 0; }
.mjm-step { font-size: 11.5px; color: var(--muted); margin: 6px 0 0; text-align: right; }

.qtitle { font-size: 23px; font-weight: 700; margin: 0 0 8px; line-height: 1.5; }
.rtitle { font-size: 25px; font-weight: 700; margin: 0 0 6px; }
.rcname { font-size: 17px; font-weight: 700; margin: 0 0 2px; }
.whyh { font-size: 12px; color: var(--teal); margin: 0 0 6px; font-weight: 700; }
.yah { font-size: 13px; margin: 0 0 10px; color: var(--muted); display: flex; align-items: center; font-weight: 700; }
.afth { font-size: 16px; font-weight: 700; margin: 0 0 10px; }

@media (max-width: 900px) {
	.qtitle { font-size: 19px; }
}

/* ===================================================== 条件別 */
.mjm-axes {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
}

@media (max-width: 900px) {
	.mjm-axes { grid-template-columns: 1fr; }
}

.mjm-axis {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 15px 17px;
	text-decoration: none;
	display: block;
	box-shadow: var(--shadow);
	color: var(--txt);
}

.mjm-axis:hover { border-color: var(--teal); }
.mjm-axis b { display: block; font-size: 15px; margin-bottom: 3px; }
.mjm-axis .n { font-size: 12px; color: var(--accent); font-weight: 700; }
.mjm-axis .c { display: block; font-size: 11.5px; color: var(--muted); margin-top: 6px; line-height: 1.6; }

.mjm-criteria { margin-bottom: 18px; }
.mjm-criteria-h { font-size: 12px; color: var(--muted); font-weight: 700; margin: 0 0 6px; }
.mjm-criteria p { margin: 0 0 6px; font-size: 14px; }

/* ===================================================== 地域の入口 */
.mjm-region { margin-bottom: 20px; }

.mjm-region-h {
	font-size: 14px;
	margin: 0 0 8px;
	display: flex;
	align-items: baseline;
	gap: 8px;
}

.mjm-region-h a { text-decoration: none; }
.mjm-region-h a:hover { color: var(--accent); }
.mjm-region-h .c { font-size: 11.5px; color: var(--muted); font-weight: 400; }

/* ===================================================== 更新履歴 */
.mjm-updates { list-style: none; padding: 0; margin: 0; }

.mjm-update {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 17px 19px;
	box-shadow: var(--shadow);
	margin-bottom: 13px;
}

.mjm-update.is-high { border-left: 3px solid var(--accent); }

.mjm-update-meta {
	display: flex;
	gap: 8px;
	align-items: center;
	font-size: 12px;
	color: var(--muted);
	margin-bottom: 7px;
	flex-wrap: wrap;
}

.mjm-update-h { font-size: 16px; margin: 0 0 9px; }

.mjm-diff {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 5px 12px;
	background: var(--bg);
	border-radius: 7px;
	padding: 11px 13px;
	font-size: 12.5px;
	margin: 0 0 11px;
}

.mjm-diff dt { color: var(--muted); white-space: nowrap; font-weight: 700; }
.mjm-diff dd { margin: 0; }

.mjm-update-detail { font-size: 13.5px; color: var(--muted); }
.mjm-update-detail p { margin: 0 0 8px; }

/* ===================================================== 部位ページ */
.mjm-part-lead { font-size: 15px; margin-bottom: 8px; }

.mjm-blocks { display: grid; gap: 12px; }

.mjm-block {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 8px;
	padding: 15px 17px;
	box-shadow: var(--shadow);
}

.mjm-block h3 { font-size: 15px; margin: 0 0 5px; }
.mjm-block p { margin: 0; font-size: 13.5px; color: var(--muted); line-height: 1.8; }

.mjm-flow { counter-reset: step; list-style: none; padding: 0; margin: 0; }

.mjm-flow li {
	counter-increment: step;
	position: relative;
	padding: 0 0 16px 42px;
	border-left: 2px solid var(--line);
	margin-left: 13px;
}

.mjm-flow li:last-child { border-left-color: transparent; padding-bottom: 0; }

.mjm-flow li::before {
	content: counter(step);
	position: absolute;
	left: -14px;
	top: 0;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--navy);
	color: #fff;
	display: grid;
	place-items: center;
	font-size: 12.5px;
	font-weight: 700;
}

.mjm-flow b { display: block; font-size: 14.5px; margin-bottom: 3px; }
.mjm-flow span { font-size: 13px; color: var(--muted); line-height: 1.8; }

.mjm-faq details {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 8px;
	padding: 13px 16px;
	margin-bottom: 9px;
	box-shadow: var(--shadow);
}

.mjm-faq summary { font-weight: 700; cursor: pointer; font-size: 14.5px; }
.mjm-faq p { margin: 10px 0 0; font-size: 13.5px; color: var(--muted); line-height: 1.85; }

/* ===================================================== 本文（固定ページ） */
.mjm-editorial { font-size: 15px; }
.mjm-editorial h2 { font-size: 20px; margin: 34px 0 10px; }
.mjm-editorial h3 { font-size: 16px; margin: 24px 0 8px; }
.mjm-editorial p { margin: 0 0 14px; line-height: 1.9; }
.mjm-editorial ul,
.mjm-editorial ol { margin: 0 0 16px; padding-left: 1.4em; line-height: 1.9; }
.mjm-editorial a { color: var(--teal); }
.mjm-editorial table { width: 100%; border-collapse: collapse; margin-bottom: 16px; }
.mjm-editorial th,
.mjm-editorial td { border: 1px solid var(--line); padding: 9px 12px; text-align: left; font-size: 13.5px; }
.mjm-editorial th { background: #F7FAFC; }

/* ===================================================== サイトマップ */
.mjm-links {
	list-style: none;
	padding: 0;
	margin: 0 0 16px;
	display: flex;
	flex-wrap: wrap;
	gap: 7px 16px;
}

.mjm-links a { font-size: 13.5px; color: var(--teal); text-decoration: none; }
.mjm-links a:hover { text-decoration: underline; }

/* ===================================================== 投稿一覧 */
.mjm-postlist { display: grid; gap: 12px; }

.mjm-postcard {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 17px;
	box-shadow: var(--shadow);
}

.mjm-postcard h2 { font-size: 17px; margin: 0 0 6px; }
.mjm-postcard h2 a { text-decoration: none; }
.mjm-postcard p { margin: 0; font-size: 13.5px; color: var(--muted); }

.mjm-searchform { display: flex; gap: 8px; max-width: 420px; }

.mjm-searchform input {
	flex: 1;
	padding: 10px 12px;
	border: 1px solid var(--line);
	border-radius: 7px;
	font-size: 14px;
}

.mjm-searchform button {
	background: var(--navy);
	color: #fff;
	border: 0;
	border-radius: 7px;
	padding: 10px 20px;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
}

/* ===================================================== トップページの注記 */
.topnote {
	background: #F1F5F8;
	border-radius: 8px;
	padding: 13px 16px;
	font-size: 12.5px;
	color: var(--muted);
	margin-bottom: 16px;
	line-height: 1.85;
}

.topnote p { margin: 0; }
.topnote a { color: var(--teal); }

/* ===================================================== フッター */
.mjm-footer {
	background: var(--navy);
	color: #fff;
	padding: 30px 0 20px;
	margin-top: 20px;
}

.mjm-footer .fcols {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	padding-bottom: 20px;
	border-bottom: 1px solid rgba(255, 255, 255, .14);
}

.mjm-footer .fc { display: flex; flex-direction: column; gap: 7px; }

.mjm-footer .fc b {
	font-size: 11.5px;
	color: rgba(255, 255, 255, .55);
	letter-spacing: .06em;
	margin-bottom: 2px;
}

.mjm-footer .fc a {
	color: rgba(255, 255, 255, .88);
	text-decoration: none;
	font-size: 12.5px;
}

.mjm-footer .fc a:hover { color: #fff; text-decoration: underline; }

@media (max-width: 760px) {
	.mjm-footer .fcols { grid-template-columns: repeat(2, 1fr); gap: 22px 16px; }
}

.mjm-footer .disc {
	background: rgba(0, 0, 0, .18);
	border-radius: 7px;
	padding: 12px 15px;
	font-size: 11.5px;
	color: rgba(255, 255, 255, .75);
	margin-top: 16px;
	line-height: 1.7;
}

.mjm-footer .disc a { color: #9FD6CD; }

.mjm-footer .fmeta {
	font-size: 11.5px;
	color: rgba(255, 255, 255, .6);
	line-height: 1.9;
	margin-top: 16px;
}

.mjm-footer .fsnap { color: #FFD79A; }

/* =====================================================================
   口コミ（ユーザー一次情報DB）
   ---------------------------------------------------------------------
   公式情報と見た目で区別する。利用者の申告であることが
   ひと目で分かるよう、公式データの表とはカードの質感を変えている。
   ===================================================================== */

.bdg.rv { background: #7A4B1F; }
.bdg.src { background: #6B5522; }

/* ---------------------------------------------------- 評価サマリー */
.mjm-rv-summary {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 20px;
	box-shadow: var(--shadow);
	margin-bottom: 18px;
}

.mjm-rv-head {
	display: flex;
	gap: 24px;
	align-items: flex-start;
	flex-wrap: wrap;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--line);
}

.mjm-rv-count .n { font-size: 30px; font-weight: 800; line-height: 1.1; }
.mjm-rv-count .u { font-size: 14px; font-weight: 700; margin-left: 2px; }
.mjm-rv-count .l { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; }

.mjm-rv-overall { flex: 1; min-width: 200px; }
.mjm-rv-overall .v { font-size: 34px; font-weight: 800; color: var(--accent); line-height: 1.1; }
.mjm-rv-overall .l { font-size: 12px; color: var(--muted); margin-left: 8px; }
.mjm-rv-overall .c { display: block; font-size: 11.5px; color: var(--faint); margin-top: 4px; line-height: 1.6; }
.mjm-rv-overall.is-few .l { font-size: 14px; font-weight: 700; color: var(--txt); margin: 0; }

.mjm-rv-source {
	font-size: 12px;
	color: var(--muted);
	margin: 12px 0 0;
	line-height: 1.7;
}

.mjm-rv-source .c { display: block; font-size: 11.5px; color: var(--faint); }

.mjm-rv-h { font-size: 14px; margin: 18px 0 9px; }

/* 棒グラフ。CSSだけで描いている（JavaScript不要） */
.mjm-rv-bars,
.mjm-rv-dist {
	list-style: none;
	padding: 0;
	margin: 0;
}

.mjm-rv-bars li,
.mjm-rv-dist li {
	display: grid;
	grid-template-columns: 8.5em 1fr 3em;
	gap: 10px;
	align-items: center;
	margin-bottom: 7px;
	font-size: 13px;
}

.mjm-rv-dist li { grid-template-columns: 6em 1fr 3em 4em; }

.mjm-rv-bars .lb,
.mjm-rv-dist .lb { color: var(--muted); }

.mjm-rv-bars .bar,
.mjm-rv-dist .bar {
	background: var(--bg);
	border-radius: 999px;
	height: 10px;
	overflow: hidden;
}

.mjm-rv-bars .fill,
.mjm-rv-dist .fill {
	display: block;
	height: 100%;
	background: var(--teal);
	border-radius: 999px;
}

.mjm-rv-dist .fill { background: var(--navy-l); }

.mjm-rv-bars .vv,
.mjm-rv-dist .vv { font-weight: 800; text-align: right; }
.mjm-rv-bars .vv.na { font-weight: 400; color: var(--faint); }
.mjm-rv-dist .n { font-size: 11.5px; color: var(--faint); text-align: right; }

.mjm-rv-note {
	background: #FFF8E8;
	border: 1px solid #F0DFB4;
	border-left: 3px solid #D19A2E;
	border-radius: 7px;
	padding: 11px 14px;
	font-size: 12px;
	color: #6B5522;
	line-height: 1.8;
	margin: 14px 0 0;
}

@media (max-width: 600px) {
	.mjm-rv-bars li { grid-template-columns: 7em 1fr 2.6em; font-size: 12.5px; }
	.mjm-rv-dist li { grid-template-columns: 5em 1fr 2.6em 3.4em; font-size: 12.5px; }
}

/* ------------------------------------------------------------ ロゴ
 * 各社の正規ロゴが登録されていればそれを、無ければ頭文字の印を出す。
 * **印はロゴではない。** 行を見分けるための目印なので、控えめに置く。
 */
.mjm-logo-img,
.mjm-logo-mark {
	display: block;
	border-radius: 10px;
	object-fit: contain;
	background: #fff;
}

.mjm-logo-img { border: 1px solid var(--line); }

/* ------------------------------------------------------ 口コミ1件 */
.mjm-rv-item {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 16px 18px;
	box-shadow: var(--shadow);
	margin-bottom: 12px;
}

/* 一覧（施設をまたぐ）では、どの施設の口コミかを左に固定して読ませる */
.mjm-rv-item.has-brand {
	display: grid;
	grid-template-columns: 190px 1fr;
	gap: 18px;
}

.mjm-rv-side .lg { display: block; margin-bottom: 8px; }

.mjm-rv-side .bn {
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.5;
	margin: 0;
}

.mjm-rv-side .bc {
	font-size: 11.5px;
	color: var(--muted);
	margin: 2px 0 10px;
}

.mjm-rv-side .more {
	font-size: 11.5px;
	color: var(--teal);
	font-weight: 700;
	text-decoration: none;
	line-height: 1.6;
	display: inline-block;
}

.mjm-rv-side .more:hover { text-decoration: underline; }

.mjm-rv-item-head {
	display: flex;
	gap: 10px;
	align-items: center;
	flex-wrap: wrap;
	margin-bottom: 10px;
}

.mjm-rv-item-head time {
	margin-left: auto;
	font-size: 11.5px;
	color: var(--faint);
}

/*
 * 星。
 *
 * 0.5刻みで塗る。四捨五入すると 3.5 と 3.9 が同じ見た目になり、
 * 数字と印象が食い違う。
 */
.mjm-rv-stars-view { display: inline-flex; gap: 1px; font-size: 16px; line-height: 1; }
.mjm-rv-stars-view .s { color: var(--line); }
.mjm-rv-stars-view .s.on { color: #F5A623; }
.mjm-rv-stars-view .s.half {
	background: linear-gradient(90deg, #F5A623 50%, var(--line) 50%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.mjm-rv-score {
	font-weight: 800;
	font-size: 16px;
	color: var(--txt);
	flex-shrink: 0;
}

.mjm-rv-item-head .sv {
	font-size: 11px;
	color: #6B5522;
	background: #FFF8E8;
	border-radius: 4px;
	padding: 2px 8px;
}

.mjm-rv-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 10px;
	align-items: center;
	font-size: 12px;
}

.mjm-rv-brand,
.mjm-rv-shop { color: var(--teal); text-decoration: none; font-weight: 700; }
.mjm-rv-brand:hover,
.mjm-rv-shop:hover { text-decoration: underline; }

.mjm-rv-item-ratings {
	list-style: none;
	padding: 0;
	margin: 0 0 10px;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.mjm-rv-item-ratings li {
	background: var(--bg);
	border-radius: 6px;
	padding: 4px 10px;
	font-size: 12px;
}

.mjm-rv-item-ratings .lb { color: var(--muted); }
.mjm-rv-item-ratings .vv { font-weight: 800; margin-left: 5px; }

/*
 * 事実の札。
 *
 * 拾い読みするときに効くのは本文より先にこの並びなので、
 * 表形式をやめて横一列の札にした。入っていない項目は札ごと出さない。
 */
.mjm-rv-facts {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 10px;
	padding: 0;
}

.mjm-rv-facts li {
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: 999px;
	padding: 4px 11px;
	font-size: 12px;
	line-height: 1.6;
	white-space: nowrap;
}

.mjm-rv-facts .k { color: var(--muted); margin-right: 5px; }
.mjm-rv-facts .v { font-weight: 700; }

.mjm-rv-body { font-size: 13.5px; line-height: 1.9; margin: 0 0 10px; }

.mjm-rv-hidden {
	font-size: 12px;
	color: var(--muted);
	background: var(--bg);
	border-radius: 6px;
	padding: 9px 12px;
	margin: 0 0 10px;
	line-height: 1.7;
}

.mjm-rv-foot {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
	font-size: 11.5px;
	color: var(--faint);
	margin: 0;
}

.mjm-rv-foot .sv { color: #6B5522; }

/* --------------------------------------------------- 口コミの比較表
 * 「順位」は口コミ件数の多い順という意味で、当サイトの評価ではない。
 * 表の下の注記と必ずセットで出すこと。
 */
.mjm-rank .cmp th,
.mjm-rank .cmp td { vertical-align: middle; }

.mjm-rank .rk {
	width: 58px;
	text-align: center;
	font-weight: 700;
	color: var(--muted);
}

.mjm-rank .mjm-crown { font-size: 19px; line-height: 1; }
.mjm-rank .mjm-crown.r1 { color: #E8B320; }
.mjm-rank .mjm-crown.r2 { color: #9AA7B2; }
.mjm-rank .mjm-crown.r3 { color: #C08A52; }

.mjm-rank .nmh { min-width: 190px; }

.mjm-brandcell {
	display: flex;
	align-items: center;
	gap: 10px;
}

.mjm-brandcell .lg { flex: none; }

.mjm-brandcell .tx a {
	font-weight: 700;
	text-decoration: none;
	color: var(--txt);
	line-height: 1.45;
	display: block;
}

.mjm-brandcell .tx a:hover { color: var(--accent); text-decoration: underline; }
.mjm-brandcell .tx .sub { display: block; font-size: 11px; color: var(--muted); }

/* 評価の数値。総合だけ背景を付けて、拾い読みの起点にする */
.mjm-sc { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; white-space: nowrap; }
.mjm-sc .st { color: #F5A623; font-size: 12px; }

.mjm-sc.is-strong {
	background: #FFF6E6;
	border: 1px solid #F3DCA9;
	border-radius: 7px;
	padding: 5px 11px;
	font-size: 15px;
}

.mjm-sc.is-strong .st { font-size: 14px; }

.mjm-rank .dt { width: 128px; }

.mjm-rank-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	background: var(--navy);
	color: #fff;
	text-decoration: none;
	border-radius: 7px;
	padding: 8px 12px;
	font-size: 12.5px;
	font-weight: 700;
	white-space: nowrap;
}

.mjm-rank-btn:hover { background: var(--navy-d); }

@media (max-width: 720px) {
	/* 左の施設名を固定して、横に送っても何の行か分かるようにする */
	.mjm-rv-item.has-brand { grid-template-columns: 1fr; gap: 12px; }

	/*
	 * 1列目はロゴの実寸にあわせる。
	 * px で決め打ちすると、呼び出し側が大きさを変えたときに文字と重なる。
	 */
	.mjm-rv-side {
		display: grid;
		grid-template-columns: auto 1fr;
		gap: 2px 11px;
		align-items: center;
		padding-bottom: 12px;
		border-bottom: 1px solid var(--line);
	}

	.mjm-rv-side .lg { grid-row: span 2; margin: 0; }
	.mjm-rv-side .bc { margin: 0; }
	.mjm-rv-side .more { grid-column: 1 / -1; margin-top: 6px; }

	.mjm-rv-facts li { white-space: normal; }
}

/* ------------------------------------------------------ 一覧の操作 */
.mjm-rv-filters {
	display: flex;
	flex-direction: column;
	gap: 9px;
	margin-bottom: 14px;
}

.mjm-rv-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	align-items: center;
}

.mjm-rv-filter .lb {
	font-size: 11.5px;
	color: var(--muted);
	font-weight: 700;
	min-width: 3.6em;
}

.mjm-rv-filter .chip { font-size: 12.5px; padding: 5px 11px; text-decoration: none; }
.mjm-rv-filter .chip.is-on { background: var(--navy); color: #fff; border-color: var(--navy); }
.mjm-rv-filter .chip.is-on .c { color: rgba(255, 255, 255, .75); }

.mjm-rv-total { font-size: 12px; color: var(--muted); margin: 0 0 10px; }

.mjm-rv-pager {
	display: flex;
	gap: 10px;
	align-items: center;
	justify-content: center;
	margin: 16px 0;
}

.mjm-rv-pager .chip { text-decoration: none; }
.mjm-rv-pageno { font-size: 12.5px; color: var(--muted); }

/* ------------------------------------------------------ 投稿フォーム
 *
 * 設問が多いので、1問ずつ枠で区切って番号を振る。
 * 「あと何問あるか」「いまどこを答えているか」が分かる状態にする。
 *
 * 配色はサイトの色をそのまま使う（番号と送信はネイビー、必須は強調色）。
 * このフォームだけ別の色にすると、同じサイトに見えなくなる。
 */
.mjm-rv-open {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 14px 18px;
	box-shadow: var(--shadow);
	margin-top: 18px;
}

.mjm-rv-open > summary {
	font-weight: 700;
	cursor: pointer;
	font-size: 14.5px;
}

/* 単独で置かれたとき（投稿ページ）は、フォーム全体をカードにする */
.mjm-rv-formwrap > .mjm-rv-form > .mjm-rv-intro { margin-bottom: 14px; }

/* アイコン。文字と同じ色・同じ大きさで並ぶようにする */
.mjm-rv-form .mjm-ic,
.mjm-rv-intro .mjm-ic {
	width: 1.05em;
	height: 1.05em;
	flex: none;
	vertical-align: -.16em;
}

/* --------------------------------------------------------- 上部の案内 */
.mjm-rv-intro {
	display: flex;
	align-items: center;
	gap: 14px;
	background: linear-gradient(180deg, #EEF4FA 0%, #E7EFF7 100%);
	border: 1px solid #D6E3EF;
	border-radius: var(--radius);
	padding: 16px 18px;
}

.mjm-rv-intro .ic {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	flex: none;
	border-radius: 50%;
	background: var(--navy);
	color: #fff;
}

.mjm-rv-intro .ic .mjm-ic { width: 22px; height: 22px; }

.mjm-rv-intro .tx b {
	display: block;
	font-size: 18px;
	line-height: 1.5;
	color: var(--navy);
}

.mjm-rv-intro .tx span {
	display: block;
	font-size: 12.5px;
	color: var(--muted);
	line-height: 1.7;
}

/* ------------------------------------------------------------ 設問の枠 */
.mjm-rv-sec {
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: #fff;
	padding: 4px 16px 16px;
	margin: 12px 0 0;
}

.mjm-rv-form legend {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 14.5px;
	font-weight: 700;
	padding: 0;
	margin: 14px 0 12px;
	/* legend は float できないので、幅いっぱいに置く */
	width: 100%;
}

/* 設問の番号 */
.mjm-rv-form legend .no {
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	flex: none;
	border-radius: 50%;
	background: var(--navy);
	color: #fff;
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1;
}

.mjm-rv-form legend .tt { line-height: 1.4; }

/*
 * 必須・任意のしるし。
 *
 * クラス名に mjm- を付けている。素の .opt はテーマの診断で
 * 「幅いっぱいの選択肢カード」に使っており、名前がぶつかると
 * 見出しが1文字ずつ折り返して崩れる。
 */
.mjm-rv-req,
.mjm-rv-opt {
	display: inline-block;
	width: auto;
	font-size: 11px;
	font-weight: 700;
	border-radius: 4px;
	padding: 2px 8px;
	line-height: 1.6;
	flex: none;
}

.mjm-rv-req { background: var(--accent); color: #fff; }
.mjm-rv-opt { background: var(--bg); color: var(--muted); border: 1px solid var(--line); }

.mjm-rv-field { display: block; margin: 12px 0; }

.mjm-rv-field .lb {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 700;
	margin-bottom: 5px;
	color: var(--txt);
}

.mjm-rv-field .lb .mjm-ic { color: var(--navy-l); }

.mjm-rv-field .hint,
.mjm-rv-form .hint {
	display: block;
	font-size: 11.5px;
	color: var(--muted);
	margin-top: 5px;
	line-height: 1.7;
}

.mjm-rv-form input[type="text"],
.mjm-rv-form input[type="number"],
.mjm-rv-form input[type="month"],
.mjm-rv-form select,
.mjm-rv-form textarea {
	width: 100%;
	border: 1px solid var(--line);
	border-radius: 8px;
	padding: 11px 13px;
	font-size: 15px;
	font-family: inherit;
	color: var(--txt);
	background: #fff;
	-webkit-appearance: none;
	appearance: none;
}

.mjm-rv-form textarea { line-height: 1.8; resize: vertical; min-height: 120px; }

/*
 * 開く向きの印。
 *
 * appearance:none で枠を自前にすると、ブラウザの矢印も一緒に消える。
 * 矢印が無い select は入力欄と見分けが付かないので、必ず自前で置く。
 * .mjm-rv-sel の中の select には、親が疑似要素で矢印を置いている。
 */
.mjm-rv-form select:not(.mjm-rv-sel select) {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%235A6B7B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 13px center;
	background-size: 12px 12px;
	padding-right: 34px;
}

.mjm-rv-form input:focus-visible,
.mjm-rv-form select:focus-visible,
.mjm-rv-form textarea:focus-visible {
	outline: 2px solid var(--navy-l);
	outline-offset: 1px;
	border-color: var(--navy-l);
}

/* ------------------------------------------- アイコン付きの選択（施設・店舗） */
.mjm-rv-sel {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	border: 1px solid var(--line);
	border-radius: 8px;
	padding: 0 12px;
	background: #fff;
}

.mjm-rv-sel:focus-within {
	border-color: var(--navy-l);
	outline: 2px solid var(--navy-l);
	outline-offset: 1px;
}

.mjm-rv-sel > .mjm-ic {
	width: 20px;
	height: 20px;
	color: var(--navy);
}

.mjm-rv-sel select {
	border: 0;
	padding: 12px 26px 12px 0;
	background: transparent;
}

.mjm-rv-sel select:focus-visible { outline: 0; }

/* 開く向きの印。select の見た目を自前で作っているので、印も自前で置く */
.mjm-rv-sel::after {
	content: "";
	position: absolute;
	right: 14px;
	width: 9px;
	height: 9px;
	border-right: 2px solid var(--muted);
	border-bottom: 2px solid var(--muted);
	transform: translateY(-3px) rotate(45deg);
	pointer-events: none;
}

.mjm-rv-fixed {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 700;
	font-size: 15px;
	margin: 0;
	border: 1px solid var(--line);
	border-radius: 8px;
	padding: 12px 14px;
	background: var(--bg);
}

.mjm-rv-fixed .mjm-ic { width: 20px; height: 20px; color: var(--navy); }

.mjm-rv-form .unitbox { display: flex; align-items: stretch; gap: 0; }

.mjm-rv-form .unitbox input { border-radius: 8px 0 0 8px; }

.mjm-rv-form .unitbox .unit {
	display: grid;
	place-items: center;
	font-size: 14px;
	font-weight: 700;
	color: var(--muted);
	white-space: nowrap;
	border: 1px solid var(--line);
	border-left: 0;
	border-radius: 0 8px 8px 0;
	background: var(--bg);
	padding: 0 12px;
	min-width: 46px;
}

.mjm-rv-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px 16px;
}

/* --------------------------------------------------------- 部位の選択 */
.mjm-rv-checks {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 9px;
}

.mjm-rv-checks label {
	display: flex;
	align-items: center;
	gap: 9px;
	border: 1px solid var(--line);
	border-radius: 8px;
	padding: 12px 13px;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	background: #fff;
	transition: border-color .15s, background .15s;
}

.mjm-rv-checks label:hover { border-color: var(--navy-l); }

.mjm-rv-checks input {
	width: 18px;
	height: 18px;
	flex: none;
	accent-color: var(--navy);
	margin: 0;
}

.mjm-rv-checks label:has(input:checked) {
	border-color: var(--navy);
	background: #EEF3F8;
	color: var(--navy);
}

.mjm-rv-checks label:has(input:focus-visible) {
	outline: 2px solid var(--navy-l);
	outline-offset: 1px;
}

/* ------------------------------------------------------------- 評価 */
.mjm-rv-stars {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	background: var(--bg);
	border-radius: 8px;
	padding: 9px 12px;
	margin-top: 8px;
}

.mjm-rv-stars .lb {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 13.5px;
	font-weight: 700;
	min-width: 9.5em;
}

.mjm-rv-stars .lb .mjm-ic { color: var(--navy); width: 18px; height: 18px; }

.mjm-rv-stars .stars { display: flex; gap: 6px; margin-left: auto; }

.mjm-rv-stars label { cursor: pointer; }

/*
 * ラジオは隠すが、読み上げと操作は残す。
 * display:none にすると、キーボードで選べなくなる。
 */
.mjm-rv-stars input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.mjm-rv-stars .st {
	display: grid;
	place-items: center;
	width: 46px;
	height: 40px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: #fff;
	font-size: 14px;
	font-weight: 700;
	color: var(--muted);
	transition: border-color .15s, background .15s, color .15s;
}

.mjm-rv-stars label:hover .st { border-color: var(--navy-l); color: var(--navy); }

.mjm-rv-stars input:checked + .st {
	background: var(--navy);
	border-color: var(--navy);
	color: #fff;
}

.mjm-rv-stars input:focus-visible + .st {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

/* ------------------------------------------------------- 文字数の表示 */
.mjm-rv-counter {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin: 6px 0 0;
}

.mjm-rv-counter .hint { margin-top: 0; }

.mjm-rv-counter output {
	margin-left: auto;
	font-size: 12px;
	color: var(--faint);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.mjm-rv-counter output.is-near { color: var(--accent); font-weight: 700; }

/* --------------------------------------------------------- ハニーポット
 * 人には見せない。display:none だと埋めない機械があるため、位置で隠す。
 */
.mjm-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.mjm-rv-privacy {
	background: #F1F5F8;
	border-radius: 8px;
	padding: 13px 15px;
	font-size: 12px;
	color: var(--muted);
	line-height: 1.85;
	margin: 14px 0 0;
}

.mjm-rv-privacy b { display: block; color: var(--txt); margin-bottom: 3px; }

.mjm-rv-submit {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	background: var(--navy);
	color: #fff;
	border: 0;
	border-radius: 10px;
	padding: 16px 32px;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	margin-top: 14px;
	width: 100%;
	box-shadow: var(--shadow);
}

.mjm-rv-submit .mjm-ic { width: 20px; height: 20px; }

.mjm-rv-submit:hover { background: var(--navy-d); }

.mjm-rv-submit:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.mjm-rv-ok {
	background: var(--teal-l);
	border: 1px solid var(--teal);
	border-left: 3px solid var(--teal);
	border-radius: 7px;
	padding: 12px 15px;
	font-size: 13px;
	color: var(--teal);
	margin-bottom: 16px;
	font-weight: 700;
}

/* ------------------------------------------------------- 狭い画面 */
@media (max-width: 720px) {
	.mjm-rv-checks { grid-template-columns: repeat(2, 1fr); }
	.mjm-rv-grid { grid-template-columns: 1fr; }

	.mjm-rv-intro { gap: 11px; padding: 14px; }
	.mjm-rv-intro .ic { width: 38px; height: 38px; }
	.mjm-rv-intro .ic .mjm-ic { width: 19px; height: 19px; }
	.mjm-rv-intro .tx b { font-size: 16px; }

	.mjm-rv-sec { padding: 2px 13px 14px; }

	/*
	 * 評価は縦に積む。横並びのままだと、項目名と数字が
	 * どちらも潰れて押しにくくなる。
	 */
	.mjm-rv-stars { gap: 7px; }
	.mjm-rv-stars .lb { min-width: 0; width: 100%; }
	.mjm-rv-stars .stars { margin-left: 0; width: 100%; }
	.mjm-rv-stars .st { width: 100%; height: 44px; }
	.mjm-rv-stars label { flex: 1; }

	.mjm-rv-counter { flex-direction: column; gap: 4px; }
	.mjm-rv-counter output { margin-left: 0; }
}

/* ===================================================== 余白の調整 */
.mjm-main .wrap > section:first-child { padding-top: 30px; }
.mjm-brand-actions { max-width: 460px; margin: 10px 0 40px; }