/* 配色・角丸は clinic-card-tool / clinic-cv-table のトークンと同値にそろえる */
.mas {
	/* 罫線・構造 */
	--mas-rule: #333333;
	--mas-frame-line: #E5E5E5;
	--mas-row-line: #ECECEC;
	/* 文字 */
	--mas-text: #333333;
	--mas-text-2: #555555;
	--mas-text-3: #767676;
	/* 薄面 */
	--mas-tint: #F7F7F7;
	--mas-wash: #FCFCFC;
	/* コーラル */
	--mas-accent: #E07B5A;
	--mas-accent-line: #F0D3C6;
	/* CTA（固定） */
	--mas-cta: #E63535;
	--mas-cta-hover: #C92D2D;
	/* 角丸 */
	--mas-radius: 3px;
	--mas-radius-sm: 2px;
	--mas-radius-pill: 999px;

	--mas-surface: #fff;
	--mas-sub: var(--mas-text-2);
	--mas-muted: var(--mas-text-3);
	--mas-line: var(--mas-row-line);
	--mas-line-strong: var(--mas-frame-line);
	--mas-surface-soft: var(--mas-tint);
	--mas-accent-bg: #FDF4F0;
	--mas-accent-dark: #B35C3C;
	--mas-soft-bg: #FDF8F6;
	--mas-soft-line: #F3E2DA;
	--mas-pill: 999px;

	max-width: 720px;
	margin: 0 auto;
	color: var(--mas-text);
	font-size: 15px;
	line-height: 1.7;
}

.mas *,
.mas *::before,
.mas *::after {
	box-sizing: border-box;
}

.mas .mas__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.mas .mas__panel {
	background: var(--mas-surface);
	border: 1px solid var(--mas-soft-line);
	border-radius: 20px;
	padding: 20px 16px;
}

.mas .mas__title {
	font-size: 18px;
	font-weight: 700;
	margin: 0 0 14px;
	line-height: 1.5;
}

.mas button:focus-visible,
.mas input:focus-visible,
.mas a:focus-visible,
.mas [tabindex]:focus-visible {
	outline: 2px solid var(--mas-accent);
	outline-offset: 2px;
}

/* 現在地 */

.mas .mas__geo {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	min-height: 50px;
	border: 0;
	border-radius: var(--mas-pill);
	background: var(--mas-cta);
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
}

.mas .mas__geo:hover {
	background: var(--mas-cta-hover);
}

.mas .mas__geo[disabled] {
	opacity: .6;
	cursor: default;
}

.mas .mas__geo-icon {
	width: 18px;
	height: 18px;
	flex: none;
	display: block;
}

.mas .mas__geo-note:empty {
	display: none;
}

.mas .mas__geo-note {
	font-size: 13px;
	color: var(--mas-sub);
	margin: 8px 0 0;
}

/* 検索 */

.mas .mas__search {
	position: relative;
	margin: 8px 0 0;
}

.mas .mas__search-label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

.mas .mas__search-input {
	width: 100%;
	min-height: 46px;
	padding: 0 18px;
	border: 1px solid var(--mas-soft-line);
	border-radius: var(--mas-pill);
	font-size: 15px;
	background: var(--mas-surface);
	color: inherit;
}

.mas .mas__suggest {
	position: absolute;
	z-index: 20;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	margin: 0;
	padding: 4px;
	list-style: none;
	background: var(--mas-surface);
	border: 1px solid var(--mas-soft-line);
	border-radius: 14px;
	box-shadow: 0 6px 18px rgba(51, 51, 51, .08);
}

.mas .mas__suggest button {
	display: block;
	width: 100%;
	text-align: left;
	padding: 8px 10px;
	border: 0;
	background: transparent;
	border-radius: 10px;
	cursor: pointer;
	font-size: 15px;
	color: inherit;
}

.mas .mas__suggest button:hover {
	background: var(--mas-surface-soft);
}

.mas .mas__suggest-sub {
	display: block;
	font-size: 12px;
	color: var(--mas-sub);
}

/* ショートカット */

.mas .mas__shortcuts {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 12px 0 0;
}

.mas .mas__shortcuts-label {
	font-size: 12px;
	color: var(--mas-muted);
}

.mas .mas__chip {
	border: 1px solid var(--mas-soft-line);
	background: var(--mas-surface);
	border-radius: var(--mas-pill);
	padding: 6px 16px;
	font-size: 13px;
	min-height: 36px;
	cursor: pointer;
	color: inherit;
	transition: background .2s, border-color .2s;
}

.mas .mas__chip:hover {
	background: var(--mas-accent-bg);
}

.mas .mas__chip.is-on {
	border-color: var(--mas-accent);
	background: var(--mas-accent-bg);
	color: var(--mas-accent-dark);
	font-weight: 700;
}

.mas .mas__chip--on {
	border-color: var(--mas-accent);
	background: var(--mas-accent-bg);
	color: var(--mas-accent-dark);
}

.mas .mas__chip-x {
	margin-left: 4px;
}

/* 地方・都道府県 */

.mas .mas__regions {
	margin: 18px 0 0;
	border-top: 1px solid var(--mas-soft-line);
}

.mas .mas__loading {
	font-size: 14px;
	color: var(--mas-sub);
	padding: 14px 0;
	margin: 0;
}

.mas .mas__region-head {
	display: flex !important;
	text-align: left;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	min-height: 52px;
	padding: 12px 2px;
	border: 0;
	border-bottom: 1px solid var(--mas-soft-line);
	background: transparent;
	font-size: 16px;
	cursor: pointer;
	color: inherit;
}

.mas .mas__region-meta {
	font-size: 13px;
	color: var(--mas-sub);
	display: flex;
	align-items: center;
	gap: 6px;
}

.mas .mas__region-meta::after {
	content: "";
	width: 8px;
	height: 8px;
	border-right: 2px solid var(--mas-muted);
	border-bottom: 2px solid var(--mas-muted);
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform .15s;
}

.mas .mas__region.is-open .mas__region-meta::after {
	transform: rotate(-135deg) translate(-2px, -2px);
}

.mas .mas__prefs {
	display: none;
	gap: 8px;
	padding: 6px 0 14px 4px;
	border-bottom: 1px solid var(--mas-soft-line);
}

.mas .mas__region.is-open .mas__prefs {
	display: grid;
}

.mas .mas__pref {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 46px;
	padding: 6px 16px;
	border: 1px solid var(--mas-soft-line);
	border-radius: var(--mas-pill);
	background: var(--mas-surface);
	cursor: pointer;
	transition: border-color .2s, background .2s;
}

.mas .mas__pref:hover {
	background: var(--mas-accent-bg);
}

.mas .mas__pref:has(input:checked) {
	border-color: var(--mas-accent);
	background: var(--mas-accent-bg);
	box-shadow: 0 0 0 1px var(--mas-accent);
}

/* ブラウザ標準の四角い見た目をやめ、丸いチェックに作り替える */
.mas .mas__pref input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	width: 20px;
	height: 20px;
	flex: none;
	margin: 0;
	padding: 0;
	position: relative;
	border: 1.5px solid #DFD9D6;
	border-radius: 50%;
	background: var(--mas-surface);
	cursor: pointer;
	transition: background .18s, border-color .18s;
}

.mas .mas__pref input[type="checkbox"]:checked {
	background: var(--mas-accent);
	border-color: var(--mas-accent);
}

.mas .mas__pref input[type="checkbox"]:checked {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-6.5' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 20px 20px;
}

.mas .mas__pref input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--mas-accent);
	outline-offset: 2px;
}

.mas .mas__pref-name {
	flex: 1;
	font-size: 15px;
}

.mas__pref:has(input:checked) .mas__pref-name,
.mas .mas__pref:has(input:checked) .mas__pref-meta {
	color: var(--mas-accent-dark);
	font-weight: 700;
}

.mas .mas__pref-meta {
	font-size: 12px;
	color: var(--mas-sub);
}

/* 実行ボタン */

.mas .mas__submit-wrap {
	margin: 16px 0 0;
}

.mas .mas__submit {
	width: 100%;
	min-height: 52px;
	border: 0;
	border-radius: var(--mas-pill);
	background: var(--mas-cta);
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
}

.mas .mas__submit:hover:not([disabled]) {
	background: var(--mas-cta-hover);
}

.mas .mas__submit[disabled] {
	background: var(--mas-surface);
	border: 1px solid var(--mas-soft-line);
	color: var(--mas-text-3);
	font-weight: 500;
	cursor: default;
}


/* 結果 */

.mas .mas__results {
	margin: 24px 0 0;
	padding: 16px 0 0;
	border-top: 2px solid var(--mas-line);
}

.mas .mas__selected {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 10px;
}

.mas .mas__sorts {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 14px;
}

.mas .mas__cards {
	display: grid;
	gap: 10px;
}

.mas .mas__card {
	border: 1px solid var(--mas-frame-line);
	border-radius: 6px;
	padding: 16px;
	background: var(--mas-surface);
}

/* テーマの装飾が入らないよう素の状態に戻す */
.mas .mas__card p {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	text-align: left;
	line-height: 1.5;
}

.mas .mas__card p::before,
.mas .mas__card p::after {
	content: none;
}

/* 上部 */
.mas .mas__card-head {
	display: flex;
	align-items: center;
	gap: 14px;
}

.mas .mas__thumb {
	width: 60px;
	height: 60px;
	flex: none;
	border: 1px solid var(--mas-row-line);
	border-radius: 4px;
	background: var(--mas-surface);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.mas .mas__thumb--empty {
	background: var(--mas-tint);
	border-color: transparent;
}

.mas .mas__thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	padding: 4px;
}

.mas .mas__card-body {
	flex: 1;
	min-width: 0;
}

.mas .mas__name {
	font-size: 17px;
	font-weight: 700;
	line-height: 1.35;
	margin: 0 0 3px;
}

.mas .mas__url,
.mas .mas__url:link,
.mas .mas__url:visited,
.mas .mas__url:hover,
.mas .mas__url:focus,
.mas .mas__url:active {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 12px;
	color: #1976D2;
	text-decoration: none;
	cursor: pointer;
	min-width: 0;
}

.mas .mas__url span {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
}

.mas .mas__url:hover span {
	text-decoration: underline;
}

.mas .mas__url .mas__ico {
	margin-top: 0;
	color: #1976D2;
}

.mas .mas__badge {
	flex: none;
	align-self: flex-start;
	font-size: 10px;
	color: var(--mas-text-3);
	border: 1px solid var(--mas-row-line);
	border-radius: 2px;
	padding: 1px 5px;
	line-height: 1.6;
}

/* 料金：線2本で挟んで独立させる */
.mas .mas__price {
	margin: 14px 0 0;
	background: var(--mas-tint);
	border-radius: 4px;
	padding: 4px 14px;
}

.mas .mas__price-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	min-height: 40px;
	padding: 6px 0;
	border-bottom: 1px solid #ECE9E4;
}

.mas .mas__price-row:last-child {
	border-bottom: 0;
}

.mas .mas__price-label {
	display: flex;
	align-items: center;
	gap: 7px;
	flex: 1;
	min-width: 0;
	font-size: 13px;
	color: var(--mas-text);
	line-height: 1.5;
}

.mas .mas__price .mas__ico {
	margin-top: 0;
}


.mas .mas__price-value {
	flex: none;
	white-space: nowrap;
	text-align: right;
}

.mas .mas__price-count {
	font-size: 15px;
	font-weight: 700;
	color: var(--mas-accent);
	margin-right: 1px;
}

.mas .mas__price-num {
	font-size: 19px;
	font-weight: 700;
	color: var(--mas-accent);
	line-height: 1.2;
	letter-spacing: -.01em;
}

.mas .mas__price-tax {
	display: inline-block;
	width: 3.4em;
	font-size: 11px;
	color: var(--mas-text-2);
	text-align: left;
	margin-left: 2px;
}

.mas .mas__price-stale {
	font-size: 14px;
	color: var(--mas-text-2);
}

/* 補助情報：2列 */
.mas .mas__metas {
	display: grid;
	gap: 9px;
	margin: 14px 0 0;
	padding: 0 14px;
}

.mas .mas__meta {
	display: flex;
	align-items: flex-start;
	gap: 7px;
	font-size: 13px;
	line-height: 1.55;
	min-width: 0;
}

.mas .mas__ico {
	flex: none;
	margin-top: 3px;
	color: #9A9A9A;
}

.mas .mas__muted {
	color: var(--mas-text-2);
}

.mas .mas__note {
	font-size: 12px;
	color: var(--mas-text-2);
	margin: 10px 0 0;
	line-height: 1.6;
}

.mas .mas__cta,
.mas .mas__cta:link,
.mas .mas__cta:visited,
.mas .mas__cta:hover,
.mas .mas__cta:focus,
.mas .mas__cta:active {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 50px;
	margin: 14px 0 0;
	border-radius: 4px;
	background: var(--mas-cta);
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	border: 0;
	box-shadow: none;
	cursor: pointer;
	transition: background .25s;
}

.mas .mas__cta:hover {
	background: var(--mas-cta-hover);
}

.mas .mas__cta::after,
.mas .mas__cta::before {
	content: none;
}

/* テーマのボタン指定が [hidden] を打ち消してしまうため、明示的に隠す */
.mas [hidden],
.mas .mas__more:empty {
	display: none !important;
}

/* テーマのボタン装飾を打ち消す */
.mas button {
	font-family: inherit;
	line-height: 1.5;
	text-align: left;
	appearance: none;
	-webkit-appearance: none;
}

.mas .mas__geo,
.mas .mas__submit,
.mas .mas__more {
	text-align: center;
}

.mas .mas__geo::before,
.mas .mas__geo::after,
.mas .mas__submit::before,
.mas .mas__submit::after {
	content: none;
}

.mas .mas__geo {
	gap: 8px;
}

.mas .mas__region-head {
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.mas .mas__region-name {
	flex: 1;
	text-align: left;
}

.mas .mas__region-meta {
	flex: none;
	white-space: nowrap;
}

/* SWELLのコンテンツ幅の余白を打ち消す */
.mas p,
.mas li {
	margin: 0;
}

.mas ul {
	margin: 0;
	list-style: none;
}

.mas .mas__suggest {
	padding: 4px;
}

/* :has に対応していないブラウザでも、選択状態がチェックの色で分かるようにする */
@supports not (selector(:has(*))) {
	.mas .mas__pref {
		background: var(--mas-surface);
	}
}

@media (max-width: 480px) {
	.mas .mas__row {
		flex-wrap: wrap;
	}

	.mas .mas__row-label {
		width: 4.8em;
	}

	.mas .mas__name {
		font-size: 16px;
	}
}

@media (max-width: 520px) {
	.mas .mas__name {
		font-size: 16px;
	}

	.mas .mas__price-num {
		font-size: 26px;
	}
}