@charset "utf-8";

/* =====================================================
--------------------------------------------------------
基本設定
--------------------------------------------------------
===================================================== */

p {
	line-height: 24px;
}

main a:not(.c--link-main) {
	color: var(--color-link-text);
}

button {
	transition: opacity 0.5s;
}

label {
	color: var(--color-link-text);
}

label:has([disabled]) {
	color: var(--color-grey-dark);
}

/* 非活性 */
.disabled > p {
	color: var(--color-black);
}

button[disabled] {
	opacity: 0.5;
}

@media (any-hover:hover) {
	main a:hover,
	button:not([disabled]):hover {
		opacity: 0.5;
	}
	button.c--link-main[disabled]:hover {
		background: var(--color-housecom-green);
	}
}

@media screen and (min-width: 1024px) {
	main {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: flex-start;
		gap: 0 52px;
		margin: 0 auto;
		max-width: 1024px;
	}
}










/* =====================================================
--------------------------------------------------------
*NOTE - 見出し
--------------------------------------------------------
===================================================== */

main > h1 {
	width: 100%;
	max-width: 1024px;
	margin: 16px auto;
}

h1 {
	margin: 16px 0 32px;
	padding: 0 16px;
	font-size: 24px;
	font-weight: bold;
}


h2 {
	margin: 32px 0 16px;
	font-size: 20px;
	font-weight: bold;
}

main > h2 {
	width: calc(100% - 32px);
	max-width: 1024px;
	margin: 16px auto;
}

main > h1 + p {
	width: 100%;
	max-width: 1024px;
	margin: 0 auto;
	padding: 0 16px;
	font-size: 16px;
}

/* 注釈 */
.annotation {
	margin-top: 16px;
	font-size: 12px;
	line-height: 24px;
}

.price-place .annotation {
	margin: -16px 0 32px;
}

@media screen and (min-width: 1024px) {
	main > h1 {
		order: -1;
		margin: 64px auto 48px;
		padding: 0;
		width: 100%;
		max-width: 1024px;
		font-size: 28px;
	}
	h1.has-catch {
		margin-bottom: 16px;
	}
	h1.has-catch + p {
		margin: 0 auto;
		padding: 0;
	}
	h2 {
		margin: 48px 0 32px;
		font-size: 24px;
	}
	.annotation[class] {
		font-size: 14px;
	}
	main:has(> .price-category) .annotation {
		margin: 0 auto 24px;
	}
}










/* =====================================================
--------------------------------------------------------
「～を選ぶ」「この条件で検索」（共通）
--------------------------------------------------------
===================================================== */

/* {{ 20251016 追従型に変更 }} */
.proceed {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: center;
	gap: 32px;
	margin: 32px 0 48px;
	width: 100%;
}

.proceed.fixed {
	position: fixed;
	left: 0;
	bottom: 0;
	margin: 0;
	padding: 24px 16px;
	border-top: 2px solid var(--color-grey-origin);
	background: #fff;
	z-index: 1;
}

.proceed > * {
	padding: 12px 16px;
	width: 100%;
	max-width: 342px;
	border-radius: 4px;
	border-width: 2px;
	font-size: 18px;
	font-weight: bold;
	text-align: center;
}

@media screen and (min-width: 1024px) {
	.proceed {
		margin: 48px 0 64px;
	}
	.proceed > * {
		font-size: 20px;
	}
}










/* =====================================================
--------------------------------------------------------
ページ内リンク（共通）
--------------------------------------------------------
===================================================== */

.in-page-link {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-evenly;
	gap: 16px 12px;
	margin: 32px 0;
	padding: 0 16px;
}

.in-page-link a {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	min-height: 48px;
	border-radius: 24px;
	padding: 16px 32px 16px 8px;
	line-height: 1;
}

.in-page-link > a,
main:not(:has(.price)) .in-page-link > li {
	width: calc((100% - 12px) / 2);
}

main:not(:has(.price)) .in-page-link > li {
	max-width: 320px;
}

.in-page-link a::after {
	position: absolute;
	right: 12px;
	font-family: 'icomoon';
	content: "\e94f";
	color: var(--color-black);
	font-size: 20px;
}

@media screen and (min-width:375px) {
	.in-page-link a {
		padding: 16px 32px 16px 16px;
	}
}

@media screen and (min-width: 1024px) {
	.in-page-link {
		justify-content: center;
		gap: 0 32px;
		padding: 0;
	}
	.in-page-link a {
		padding: 16px;
		max-width: 320px;
	}
	.in-page-link > a,
	main:not(:has(.price)) .in-page-link > li {
		font-size: 18px;
	}
	.in-page-link a::after {
		right: 16px;
	}
}



/* [C004] map */
div:has(> .iframe60b) .in-page-link .c--link-main {
	width: 100%;
	background: var(--color-housecom-green);
	font-size: 18px;
	font-weight: bold;
	text-align: center;
}

div:has(> .iframe60b) .in-page-link .c--link-main::after {
	position: absolute;
	right: 16px;
	top: 50%;
	translate: 0 -50%;
	font-family: 'icomoon';
	font-size: 32px;
	font-weight: normal;
	content: '\e961';
}

@media screen and (min-width: 1024px) {
	div:has(> .iframe60b) .in-page-link {
		grid-area: form;
		flex-wrap: nowrap;
		gap: 0 32px;
		margin: 48px 0 0;
		padding: 0;
	}
	div:has(> .iframe60b) .in-page-link > *:nth-of-type(n) {
		width: calc((100% - 32px * 2) / 3);
	}
	div:has(> .iframe60b) .in-page-link .c--link-main {
		order: 1;
	}
}



/* [C012～16] price_pref/city/station/line/now */
main:has(.price-advice):not(:has(.line)) .in-page-link {
	justify-content: center;
	gap: 8px;
	margin: 16px 0 32px;
}

main:has(> .price-category[class]) .in-page-link {
	margin: -8px 0 32px;
}

main:has(.price-advice):not(:has(.line)) .in-page-link li {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	padding: 8px 24px 8px 8px;
	border-radius: 24px;
	border: 1px solid var(--color-grey-origin);
	color: var(--color-link-text);
	line-height: 1;
}

main:has(.price-advice):not(:has(.line)) .in-page-link li::after {
	position: absolute;
	right: 8px;
	color: var(--color-black);
	font-family: 'icomoon';
	font-size: 16px;
	content: "\e94f";
}

main:has(.price-place) .in-page-link li,
main:has(.price-category) .in-page-link li {
	min-width: 140px;
}

@media screen and (min-width:375px) {
	main:has(.price-place) .in-page-link li,
	main:has(.price-category) .in-page-link li {
		width: calc((100% - 8px * 2) / 3);
		max-width: 168px;
		min-width: unset;
	}
}

main:has(.price-advice):not(:has(.line)) .in-page-link li:first-of-type {
	display: none;
}

@media (any-hover) {
	main:has(.price-advice):not(:has(.line)) .in-page-link li:not(.active) {
		transition: opacity 0.5s;
		cursor: pointer;
	}
	main:has(.price-advice):not(:has(.line)) .in-page-link li:not(.active):hover {
		opacity: 0.5;
	}
}

@media screen and (min-width: 768px) {
	main:has(.price-advice):not(:has(.line)) .in-page-link {
		gap: 0;
		width: 100%;
		max-width: 1024px;
		margin: 48px auto;
	}
	main:has(> .price-category[class]) .in-page-link {
		margin-top: 24px;
	}
	main:has(.price-advice):not(:has(.line)) .in-page-link li {
		padding: 8px 0 16px 0;
		border-radius: unset;
		border: none;
		border-bottom: 4px solid var(--color-grey-pale);
		width: 25%;
		max-width: unset;
		color: var(--color-link-text);
		text-align: center;
	}
	main:has(.price-advice):not(:has(.line)) .in-page-link li:first-of-type {
		display: block;
	}
	main:has(.price-advice):not(:has(.line)) .in-page-link li.active {
		border-color: var(--color-housecom-blue);
		color: var(--color-black);
		font-weight: bold;
	}
	main:has(.price-advice):not(:has(.line)) .in-page-link li::after {
		display: none;
	}
}



/* [C011～22] price/ranking/tag */
.annotation + .in-page-link {
	margin-top: 16px;
}

@media screen and (min-width: 1024px) {
	.annotation + .in-page-link {
		margin-top: 48px;
	}
}



/* [C024/026] ldk / facility */
@media screen and (min-width: 1024px) {
	main:has(.u--icon-ldk) .in-page-link {
		margin: 48px 0 40px;
	}
	main:has(.u--icon-house) .in-page-link {
		margin: 0 0 40px;
	}
}









/* =====================================================
--------------------------------------------------------
前回の条件で探す（共通）
--------------------------------------------------------
===================================================== */

.previous-search-condition {
	display: grid;
	justify-content: space-between;
	position: relative;
	margin: 32px auto;
	padding: 8px 16px 16px;
	border-radius: 8px;
	background: rgb(115, 188, 221, 0.25);
}

.previous-search-condition h2 {
	grid-area: 1 / 1 / 2 / 3;
	display: flex;
	align-items: center;
	margin: 0 0 8px;
	font-size: 18px;
	font-weight: bold;
}

.previous-search-condition h2::before {
	margin: 0 8px 0 0;
	font-family: 'icomoon';
	font-size: 32px;
	font-weight: normal;
	content: '\e900';
}

.previous-search-condition a {
	grid-area: 2 / 1 / 3 / 2;
	position: static !important;
	width: fit-content;
	color: var(--color-link-text);
}

.previous-search-condition a::before {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 0;
	content: '';
}

.previous-search-condition span {
	grid-area: 2 / 2 / 3 / 3;
	color: var(--color-grey-dark);
}



@media (any-hover:hover) {
	.previous-search-condition {
		transition: opacity 0.5s;
	}
	.previous-search-condition:hover {
		opacity: 0.5;
	}
	.previous-search-condition a {
		opacity: 1;
	}
}

@media screen and (min-width: 1024px) {
	main > div:has(> .previous-search-condition):not(:has(.time)) {
		width: calc(1024px - 450px - 32px - 90px - 52px);
		margin: 0 auto 0 0;
		align-self: flex-start;
	}
	.previous-search-condition {
		margin: 0;
	}
	/* フリーワード検索 + 前回の条件で探す */
	main > div:has(.previous-search-condition):has(.free-word-search) {
		display: flex;
		flex-flow: row wrap;
		align-items: flex-start;
		width: 100%;
		max-width: 1024px;
		margin: 48px auto;
		gap: 0 calc(100% - 572px - 400px);
	}
	main:has(.tag-all) > div:has(.previous-search-condition):has(.free-word-search) {
		gap: 0 calc(100% - 580px - 400px);
	}
	main > div:has(.previous-search-condition):has(.free-word-search) h2,
	main > div:has(.previous-search-condition):has(.free-word-search) h3 {
		margin-top: 0;
	}
	main > div:has(.previous-search-condition):has(.free-word-search) h3 {
		margin-bottom: 32px;
		font-size: 18px;
	}
	main > div:has(.previous-search-condition):has(.free-word-search) .previous-search-condition {
		order: 1;
		width: 400px;
	}
	main:has(.show-ranking) > div:has(.previous-search-condition):has(.free-word-search) {
		margin: 32px auto 0;
	}
}










/* =====================================================
--------------------------------------------------------
検索窓（共通）
--------------------------------------------------------
===================================================== */

div:has(.free-word-search) h3 {
	margin: 32px 0 16px;
	font-size: 20px;
	font-weight: bold;
}

.free-word-search {
	display: flex;
	justify-content: space-between;
	gap: 0 16px;
}

.free-word-search form {
	display: contents;
}

.free-word-search input {
	width: calc(100% - 90px);
	padding: 16px;
	font-size: 16px;
}

.free-word-search button {
	display: grid;
	place-content: center;
	width: 90px;
	padding: 12px 0;
	border-radius: 4px;
	background: var(--color-housecom-green);
	line-height: 1;
	font-size: 18px;
	font-weight: bold;
}

@media screen and (min-width: 1024px) {
	main > div:has(.previous-search-condition) + div:has(.free-word-search) {
		width: calc(450px + 32px + 90px);
		margin: 0 0 0 auto;
	}
	main:has(.tag-all) .free-word-search {
		gap: 40px;
	}
	/* main > div:has(> .free-word-search) {
		order: -1;
	} */

	.free-word-search {
		justify-content: flex-start;
		gap: 0 32px;
	}
	
	main > div:has(> .free-word-search) h2 {
		margin: 0 0 32px;
	}

	.free-word-search input {
		width: 450px;
		padding: 12px 16px;
	}
}










/* =====================================================
--------------------------------------------------------
沿線選択（JR/地下鉄/私鉄）[C002/004/011/017/022/024/026]
--------------------------------------------------------
===================================================== */

h2:has(+ .line-pref) > span {
	font-size: 14px;
	display: block;
	color: var(--color-grey-dark);
}

h3:has(+ .line-pref) {
	margin: 32px 0 16px;
	font-size: 20px;
	font-weight: bold;
}



/* 都道府県で絞り込む */
.line-pref {
	margin-bottom: 16px;
}

.line-pref select {
	padding: 4px 40px 4px 8px ;
}

.line-pref::before {
	rotate: 0deg;
	width: 14px;
	height: 12px;
	clip-path: polygon(0 0, 100% 0%, 50% 100%);
	background: var(--color-black);
	content: '';
}

.line-pref.show::before {
	rotate: 180deg;
}



/* タブ */
.line > ul {
	display: flex;
}

.line > ul li {
	transition: opacity 0.5s;
	margin: 0 0 16px;
	padding: 0 0 8px;
	width: calc(100% / 3);
	border-bottom: 4px solid var(--color-grey-pale);
	color: var(--color-link-text);
	text-align: center;
	cursor: pointer;
}

.line > ul li.active {
	border-color: var(--color-housecom-blue);
	color: var(--color-black);
	font-weight: bold;
}



/* 中身 */
.line_list {
	display: none;
}

.line_list.active {
	display: flex;
	flex-direction: column;
	gap: 24px 0;
}

.line_list.active > div {
	display: flex;
	gap: 24px 8px;
	color: var(--color-grey-dark);
}

.line_list dt {
	width: 1em;
	font-weight: bold;
}

.line_list dd {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 24px 0;
	width: calc(100% - 1em - 8px);
}

.line_list dd label,
.line_list dd div,
.line_list dd > h4 {
	width: 100%;
	display: flex;
	align-items: center;
	color: var(--color-link-text);
	line-height: 1.25;
}

.line_list dd div h4,
.line_list dd > h4 {
	align-items: center;
	margin: 0.12em 0 -0.12em;
}

.line_list dd label > span:last-of-type,
.line_list dd div > span:last-of-type {
	margin: 0 0 0 auto;
	color: var(--color-grey-dark);
	flex-shrink: 0;
}

.line_list dd > h4.disabled {
	color: var(--color-grey-dark);
}



/* [C002] チェックボックス */
.line_list dt:has([type="checkbox"]) {
	margin: 0.25em 0 0;
}

.line_list dd label [type="checkbox"] {
	margin: 0 8px 0 0;
}

.line_list dd label > *:not(input) {
	margin: 0.175em 0 0;
}

.line_list dd label:has([disabled]) > h3 {
	color: var(--color-grey-dark);
}


/* 選択上限に達した場合（JSで後から disabled にしたもの） */
input[type="checkbox"][data-originally-disabled="false"]:disabled::before {
	border: 1px solid var(--color-grey-origin);
	/* muto 2025.09.08 路線選択でチェックボックス5つ選択してもグレーアウトしない */
	/* background: #fff; */
}

@media (any-hover) {
	.line > ul li:not(.active):hover {
		opacity: 0.5;
	}
}

@media screen and (min-width: 1024px) {
	.line-pref {
		margin-bottom: 24px;
	}
	main:has(.price-advice) .line {
		margin-bottom: 48px;
	}
	h2:has(+ .line-pref) > span {
		font-size: 16px;
		display: inline-block;
		margin: 0 0 0 16px;
	}
	main:has(.price-advice) h3:has(+ .line-pref) {
		/* margin-top: -16px; */
		margin-bottom: 32px;
		font-size: 18px;
	}
	.line > ul li {
		margin: 0 0 32px;
		padding: 0 0 16px;
	}
	.line_list.active > div {
		gap: 24px;
	}
	.line_list dt {
		margin: 0;
		font-size: 18px;
	}
	.line_list dd {
		width: calc(100% - 1em - 32px);
		gap: 24px;
	}
	.line_list dd label,
	.line_list dd > div {
		align-items: flex-start;
		width: calc((100% - 48px) / 3);
	}
	.line_list dd > h4 {
		width: calc((100% - 24px * 2) / 3);
	}
	.line_list dd > div h4 {
		margin: 0.175em 0 0;
	}
	.line_list dd > div span:last-of-type {
		margin: 0.175em 0 0 auto;
	}
}



/* 該当0件（路線） */
.line_list.active > .not-applicable-line {
	position: relative;
	display: block;
	margin: 0 auto;
	padding: 12px 12px 12px 44px;
	width: 100%;
	max-width: 400px;
	border-radius: 4px;
	border: 3px solid var(--color-link-cv);
	color: var(--color-link-cv);
	font-size: 18px;
	font-weight: bold;
	text-align: center;
}

.line_list.active > .not-applicable-line::before {
	position: absolute;
	top: 50%;
	left: 16px;
	translate: 0 -50%;
	color: var(--color-link-cv);
	font-family: 'icomoon';
	font-weight: normal;
	content: '\e93e';
}









/* =====================================================
--------------------------------------------------------
人気エリアを選ぶ [C003/017]
--------------------------------------------------------
===================================================== */

.area {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.area li {
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc((100% - 16px) / 2);
	min-height: 32px;
	border-radius: 4px;
	border: 1px solid var(--color-grey-origin);
	color: var(--color-grey-dark);
	font-size: 16px;
	transition: all 0.5s;
}

.area li h4,
.area li a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

@media screen and (min-width: 1024px) {
	.area li {
		width: calc((100% - 16px * 5) / 6);
	}
}










/* =====================================================
--------------------------------------------------------
都道府県を選ぶ [C003/004/006/009/017/022/024/026]
--------------------------------------------------------
===================================================== */

div:has(> .pref) {
	margin: 0 auto 48px;
}

div:has(> .pref) h2 {
	margin: 32px auto 24px;
}

main:has(.school-data) h2:has(+ .pref) {
	margin-top: 32px;
}

h3:has(+ .pref) {
	margin: 32px 0 24px;
	font-size: 20px;
	font-weight: bold;
}

.pref {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
}

.pref > li {
	width: 100%;
}



/* 地域 */
.pref > li > span {
	display: block;
	text-align: left;
	font-size: 18px;
	font-weight: bold;
}



/* 都道府県 */
.pref > li ul {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	margin: 16px 0 0;
	width: 100%;
}

.pref > li ul li {
	display: flex;
	justify-content: space-between;
	width: calc((100% - 24px) / 2);
	font-size: 16px;
}

.pref h3,
.pref h4 {
	white-space: nowrap;
	color: var(--color-grey-dark);
}




/* 件数 */
.pref > li ul li span {
	color: var(--color-grey-dark);
}

.pref li:hover {
	opacity: 1;
}

@media screen and (min-width: 1024px) {
	div:has(> .pref) {
		margin: 0 auto 64px;
	}
	div:has(.pref) h2 {
		margin: 48px 0 24px;
	}
	main:has(.school-data) h2:has(+ .pref) {
		margin-top: 48px;
	}
	h3:has(+ .pref) {
		font-size: 18px;
	}
	.pref > li {
		width: 100%;
		display: flex;
		align-items: flex-start;
		gap: 0 32px;
	}
	.pref > li > span {
		width: 100px;
		text-align: right;
		font-size: 16px;
	}
	.pref h4 {
		flex-shrink: 0;
	}
	.pref > li ul {
		gap: 24px 32px;
		margin: 0;
		width: calc(100% - 100px - 32px);
	}
	.pref > li ul li {
		width: calc((100% - 32px * 4) / 5);
	}
}










/* =====================================================
--------------------------------------------------------
[C004] map
--------------------------------------------------------
===================================================== */

h2:is(.u--icon-map) {
	display: flex;
	align-items: center;
	gap: 0 8px;
	margin: 24px auto 32px;
	padding: 8px 0 4px 40px;
	font-size: 22px;
}

h2:is(.u--icon-map)::before,
h2:is(.u--icon-map)::after {
	font-size: 32px;
	margin: 0;
}

div:has(> .iframe60b) {
	max-width: 1024px;
	margin: 0 auto;
}

div:has(> .iframe60b) h1 {
	margin: 16px 0;
	justify-self: center;
}

div:has(> .iframe60b) h1 + p {
	margin: 16px 0;
	padding: 0 16px;
	line-height: 24px;
}

main:has(.iframe60b) div:has(.line) h3 {
	margin: 32px 0 16px;
	font-size: 20px;
	font-weight: bold;
}



/* 動画 */
.iframe60b {
	width: 100%;
	aspect-ratio: 16 / 9;
}

@media screen and (min-width: 1024px) {
	h2:is(.u--icon-map) {
		margin: 48px auto 32px;
		font-size: 24px;
		width: 100%;
	}
	div:has(> .iframe60b) {
		display: grid;
		grid-template-columns: auto 400px;
		grid-template-rows: 80px auto auto;
		grid-template-areas: "h1 iframe"
							 "p  iframe"
							 "form form";
							 gap: 0 32px;
		margin: 64px auto 48px;
	}
	div:has(> .iframe60b) h1 {
		grid-area: h1;
		margin: 0;
		padding: 0;
		font-size: 28px;
	}
	div:has(> .iframe60b) h1 + p {
		grid-area: p;
		margin: 16px 0 0;
		padding: 0;
	}
	.iframe60b {
		grid-area: iframe;
	}
	main:has(.iframe60b) > div:has(.previous-search-condition) {
		width: 1024px;
		margin: 0 auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: flex-start;
	}
	main:has(.iframe60b) > div > .previous-search-condition {
		width: 400px;
		order: 1;
	}
	main:has(.iframe60b) > div:has(.free-word-search) h3 {
		font-size: 18px;
		margin: 0 0 32px;
	}
	main:has(.iframe60b) div:has(.line) h3 {
		font-size: 18px;
	}
}










/* =====================================================
--------------------------------------------------------
[C005] time
--------------------------------------------------------
===================================================== */

.time {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 0;
	margin: 32px auto 0;
	width: 100%;
	max-width: 572px;
}

.time p {
	font-size: 20px;
	font-weight: bold;
	width: fit-content;
}

.time p:has(+ input) {
	width: 100%;
}

.time p:has(span) {
	display: contents;
}

.time p span {
	display: inline-block;
	width: fit-content;
}

.time input,
.time .c--select {
	width: 100%;
}

@media screen and (min-width:375px) {
	.time {
		justify-content: space-between;
		gap: 16px 24px;
	}
	.time input {
		/* width: calc(100% - 24px - 20 / 18.5 * 4em); */
		width: calc(100% - 24px - 3.8em);
		min-width: 258px;
	}
	.time .c--select {
		/* width: calc(100% - 24px - 20 / 14 * 7em); */
		width: calc(100% - 24px - 11em);
		min-width: 178px;
	}
}

/* {{-- yonezawa 20251024 チェックFB No.183 対応 --}} */
/* {{-- 駅名入力用のテキストフィールド iPhone用にフォントサイズを指定 --}} */
.time #station_name,
.time [name="station_time"] {
	font-size: 16px;
}

@media screen and (min-width: 1024px) {
	/* div:has(.time) {
		display: grid;
		grid-template-columns: 572px auto;
		grid-template-rows: repeat(2, auto);
		grid-template-areas: "input prev"
							 "submit ...";
		gap: 0 52px;
	} */
	/* div:has(.time) .previous-search-condition {
		grid-area: prev;
		align-self: flex-start;
		margin: 0;
	} */
	.time {
		grid-area: input;
		width: 572px;
		justify-content: space-between;
		gap: 32px;
		/* margin: 0 auto; */
		margin: 48px auto 64px;
	}
	.time p {
		font-size: 24px;
	}
	.time input {
		width: calc(100% - 24px - 5em);
	}
	.time .c--select {
		width: calc(100% - 24px - 11em);
	}
	/* .time + .proceed {
		grid-area: submit;
		margin: 32px auto 0;
	} */
}










/* =====================================================
--------------------------------------------------------
[C006] campus
--------------------------------------------------------
===================================================== */

/* 五十音 */
.syllabary {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	width: 100%;
	max-width: 480px;
}

.syllabary li {
	overflow: hidden;
	width: calc((100% - 24px * 4) / 5);
	aspect-ratio: 1;
	border-radius: 4px;
	border: 1px solid var(--color-grey-origin);
	font-size: 16px;
	line-height: 1;
}

.syllabary li a,
.syllabary li.disabled {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	cursor: pointer;
	background: #fff;
	color: var(--color-link-text);
}

.syllabary li.disabled {
	pointer-events: none;
	cursor: auto;
	background: var(--color-grey-pale);
	color: var(--color-grey-dark);
}

.syllabary > li:empty {
	visibility: hidden;
	pointer-events: none;
	cursor: auto;
}



/* よく検索されています */
.frequently {
	margin: -16px auto 48px;
	padding: 16px;
	width: calc(100% - 32px);
	max-width: 1024px;
	border-radius: 4px;
	border: 1px solid var(--color-grey-origin);
}

.frequently h2 {
	margin: 0 0 16px;
	font-size: 18px;
}

.frequently ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
}

.frequently li {
	width: 100%;
}

.frequently a {
	color: var(--color-link-text);
}

@media screen and (min-width: 425px) {
	.frequently li {
		width: fit-content;
	}
}

@media screen and (min-width: 1024px) {
	/* h2:has(+ .syllabary) {
		margin-top: 0;
	} */
	.syllabary {
		flex-direction: column;
		width: calc(49px * 10 + 24px * 9);
		height: calc(49px * 5 + 24px * 4);
	}
	.syllabary li {
		width: 49px;
		height: 49px;
	}
	.syllabary li.disabled {
		height: 49px;
	}
	.frequently {
		margin-bottom: 64px;
		width: 100%;
	}
}










/* =====================================================
--------------------------------------------------------
ページネーション [C007/008]
--------------------------------------------------------
===================================================== */

main:has(.pagination) h1 {
	margin: 16px auto 32px;
}

.pagination {
	margin: 32px 0 48px;
}

.pagination:has(+ .campus) {
	display: none;
}




/* 表示件数 */
.pagination > p {
	margin: 0 0 16px;
	text-align: center;
}

.pagination > p span {
	font-size: 18px;
	font-weight: bold;
}



/* 最初・前・次・最後 */
.pagination > div {
	display: flex;
	justify-content: flex-end;
	gap: 12px;
	margin: 16px auto;
	width: 100%;
	max-width: 375px;
}

.pagination:not(:has(+ .campus)) > div{
	justify-content: center;
}

.pagination > div a {
	display: flex;
	justify-content: flex-start;
	align-items: end;
	position: relative;
	padding: 16px 8px;
	width: calc((100% - 12px * 3) / 4);
	font-size: 16px;
	line-height: 1;
}

.pagination > div a::before,
.pagination > div a::after {
	position: absolute;
	color: var(--color-black);
	font-family: 'icomoon';
	top: 16px;
	translate: 0;
	font-size: 12px;
}

.pagination > div a.disabled {
	filter: grayscale(100%) invert(10%);
	pointer-events: none;
}

.pagination > div a.to-first {
	justify-content: flex-end;
}

.pagination > div a.to-prev {
	justify-content: flex-end;
	padding: 16px 16px 16px 12px;
}

.pagination > div a.to-next {
	padding: 16px 12px 16px 16px;
}

.pagination > div a.to-first::before,
.pagination > div a.to-last::after {
	content: "\e90e";
}

.pagination > div a.to-prev::before,
.pagination > div a.to-next::after {
	content: "\e90d";
}

.pagination > div a.to-first::before,
.pagination > div a.to-prev::before {
	rotate: 180deg;
}

.pagination > div a.to-first::before {
	left: 8px;
}

.pagination > div a.to-prev::before {
	left: 8px;
}

.pagination > div a.to-next::after {
	right: 8px;
}

.pagination > div a.to-last::after {
	right: 8px;
}

@media screen and (min-width:375px) {
	.pagination > div a {
		padding: 16px 12px;
	}
	.pagination > div a::before,
	.pagination > div a::after {
		font-size: 16px;
	}
	.pagination > div a.to-first::before {
		left: 10px;
	}
	.pagination > div a.to-prev::before {
		left: 12px;
	}
	.pagination > div a.to-next::after {
		right: 12px;
	}
	.pagination > div a.to-last::after {
		right: 10px;
	}
}

@media screen and (min-width: 1024px) {
	main:has(.pagination) h1 {
		margin: 64px auto 48px;
	}
	.pagination > p {
		margin: 0;
	}
	.pagination > p span {
		font-size: 22px;
	}
	.pagination > div {
		gap: 24px;
		margin: 0;
	}
	.pagination > div a {
		width: calc((100% - 24px * 3) / 4);
	}
	.pagination:nth-of-type(n) {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 48px 0 64px;
	}
	.pagination:has(+ .campus) {
		margin: 0 auto 48px;
	}
	.pagination:not(:has(+ .campus)) > div{
		justify-content: flex-end;
	}
}










/* =====================================================
--------------------------------------------------------
[C007] pref / [C008] word
--------------------------------------------------------
===================================================== */

.campus {
	display: flex;
	flex-direction: column;
	gap: 24px 0;
}

.campus li {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	width: 100%;
}

.campus li h2 {
	margin: 0;
	width: calc(100% - 5.5em);
	font-size: 14px;
	font-weight: normal;
}

.campus li h2 a {
	display: inline-flex;
	margin: 0;
	padding: 0;
	color: var(--color-link-text);
}

.campus li p {
	font-size: 12px;
}

.campus li span {
	flex-shrink: 0;
	width: 5.5em;
	color: var(--color-grey-dark);
	text-align: right;
}

@media screen and (min-width: 1024px) {
	.campus li h2 {
		font-size: 22px;
	}
	.campus li span {
		font-size: 18px;
		margin: 2px 0 0;
	}
	.campus li p {
		font-size: 16px;
	}

}










/* =====================================================
--------------------------------------------------------
[C009/010] 学区・校区
--------------------------------------------------------
===================================================== */

.school-list {
	margin-top: -8px;
}

.school-list h2 {
	display: flex;
	align-items: center;
	gap: 0 8px;
	margin: 32px 0 16px;
	padding: 8px 0 4px 40px;
	font-size: 22px;
}

.school-list h2::before,
.school-list h2::after {
	font-size: 32px;
	margin: 0;
}

.school-list ul {
	display: flex;
	flex-direction: column;
	gap: 24px 0;
}

.school-list li {
	display: flex;
	justify-content: space-between;
}

.school-list li span {
	color: var(--color-grey-dark);
}

@media screen and (min-width: 1024px) {
	main:has(.school-list) h1 {
		margin-bottom: 16px;
	}
	.school-list:has(+ .school-list) {
		margin-bottom: 16px;
	}
	.school-list:has(+ .school-data) {
		margin-bottom: 16px;
	}
	.school-list h2 {
		margin: 32px 0 24px;
		font-size: 24px;
	}
	.school-list ul {
		gap: 32px 0;
	}
	.school-list li {
		font-size: 22px;
	}
	.school-list li span {
		font-size: 18px;
	}
}



/* 学区データについて */
.school-data {
	margin-top: 32px;
}

main:has(.pref) .school-data {
	margin-top: -16px;
}

.school-data p:first-of-type {
	display: flex;
	align-items: center;
	gap: 0 4px;
	padding: 16px;
	border: 1px solid var(--color-grey-origin);
	border-bottom: none;
	border-radius: 4px 4px 0 0;
	font-size: 18px;
	font-weight: bold;
}

.school-data p:first-of-type::before {
	font-family: 'icomoon';
	font-size: 30px;
	font-weight: normal;
	content: '\e93e';
}

.school-data p:last-of-type {
	border: 1px solid var(--color-grey-origin);
	border-top: none;
	border-radius: 0 0 4px 4px;
	margin: 0 auto 48px;
	padding: 0 16px 16px;
}

@media screen and (min-width: 1024px) {
	.school-data p:first-of-type {
		margin: 0 auto;
	}
	.school-data p:last-of-type {
		margin: 0 auto 64px;
	}
}










/* =====================================================
--------------------------------------------------------
[C011] price
--------------------------------------------------------
===================================================== */

/* 見出し */
main:has(.price-advice) h1 + p:not(.annotation) {
	font-size: inherit;
}

main:has(.price-advice) h2:is(.u--icon-calculator) {
	display: flex;
	align-items: center;
	gap: 0 8px;
	margin: 32px auto;
	padding: 8px 0 4px 40px;
	font-size: 22px;
}

main:has(.price-advice) h2:is(.u--icon-calculator):has(+ .price) {
	margin: 0;
}

main:has(.price-advice) h2:is(.u--icon-calculator):has(+ .annotation) {
	margin-top: 0;
}

main:has(.price-advice) h2:is(.u--icon-calculator)::before,
main:has(.price-advice) h2:is(.u--icon-calculator)::after {
	font-size: 32px;
	margin: 0;
}

main:has(.price-advice) > h3 {
	margin: 0 auto 24px;
	width: calc(100% - 32px);
	max-width: 1024px;
	font-size: 20px;
	font-weight: bold;
}

@media screen and (min-width: 1024px) {
	main:has(.price-advice) h2:is(.u--icon-calculator) {
		margin-top: 16px;
		width: 100%;
		font-size: 24px;
	}
	main:has(.price-advice) .in-page-link + h2:has(.u--icon-calculator) {
		margin-top: 8px;
	}
	main:has(.price-advice) h2:is(.u--icon-calculator):has(+ .price) {
		margin-bottom: 24px;
	}
	/* main:has(.price-advice) h2:has(.u--icon-calculator):has(+ h3) {
		margin: 48px 0 0;
	} */
	main:has(.price-advice) > h3 {
		margin-bottom: 24px;
		width: 100%;
		font-size: 18px;
	}
	main:has(.price-advice) h2:is(.u--icon-calculator) + .u--inner {
		margin-top: 0;
	}
}



/* 表（共通） */
.price {
	display: flex;
	flex-direction: column;
	gap: 16px 0;
	margin: 24px 0;
}

.annotation + .price.u--inner {
	margin: 16px 0 24px;
}

.price > div:has( > span) {
	display: none;
}

.price h4 a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 18px;
	font-weight: bold;
}

.price h4 a::after {
	content: "\e90d";
	color: var(--color-black);
	font-family: 'icomoon';
	font-size: 16px;
	font-weight: normal;
}

.price table {
	width: 100%;
	height: 100%;
	border-collapse: collapse;
	font-size: 12px;
}

div:not(.price-category) .price th,
.price td {
	width: calc(100% / 4);
	word-break: break-all;
}

.price th {
	padding: 2px;
	height: 100%;
	border: 1px solid var(--color-grey-origin);
	background: var(--color-grey-light);
	font-weight: normal;
	letter-spacing: -1px;
}

.price td {
	border: 1px solid var(--color-grey-origin);
	border-top: none;
	padding: 8px 4px;
	text-align: center;
	font-weight: bold;
}

.price td span {
	font-size: 16px;
}

.price .c--link-sub {
	padding: 8px;
	width: 100%;
	font-size: 16px;
}

@media screen and (min-width: 1024px) {
	.price {
		flex-direction: row;
		justify-content: flex-start;
		gap: 0;
		margin: 0 auto;
	}
	.price:has(+ .price-advice) {
		margin-bottom: 48px;
	}
	.price th {
		height: 24px;
		border-left: none;
	}
	.price > div:has( > span) {
		display: flex;
		align-items: flex-end;
		font-size: 18px;
		font-weight: bold;
	}
	.price > div:has( > span) > span {
		display: flex;
		align-items: center;
		margin-top: 24px;
		padding: 16px 16px;
		width: 200px;
		height: calc(100% - 24px);
		border: 1px solid var(--color-grey-origin);
	}
	.price h4:has(a) {
		display: flex;
		align-items: flex-end;
		width: 200px;
	}
	.price h4 a {
		justify-content: flex-start;
		margin: 0 auto;
		padding: 16px 16px;
		width: 100%;
		height: calc(100% - 24px);
		border: 1px solid var(--color-grey-origin);
	}
	.price:has(+ .price) + .price h4 a {
		height: 100%;
		border-top: none;
	}
	.price h4 a::after {
		display: none;
	}
	.price-place h3 + .price h4 a {
		margin-top: 24px;
	}
	.price > div:has(table) {
		width: calc(100% - 200px - 310px - 32px);
		min-width: 448px;
	}
	.price thead {
		position: relative;
	}
	.price thead::before {
		position: absolute;
		top: 0;
		left: -1px;
		width: 1px;
		height: 100%;
		background: var(--color-grey-origin);
		content: "";
	}
	div:not(.price-category) .price th {
		width: 120px;
	}
	.price td {
		padding: 16px 8px;
		border-left: none;
		font-size: 14px;
	}
	.price td span {
		font-size: 18px;
	}
	.price:has(+ .price) + .price thead {
		display: none;
	}
	.price div:has(.c--link-sub) {
		display: flex;
		align-items: flex-end;
		width: 310px;
		margin: 0 0 0 auto;
	}
}



/* 場所による区分 */
.price-place.active {
	display: block;
}

.price-place > h3 {
	margin: 32px 0 24px;
	font-size: 20px;
	font-weight: bold;
}

.price-place .c--link-sub {
	display: block;
}

.price-place .c--link-sub span.view {
	display: none;
}

@media screen and (min-width: 1024px) {
	.price-place {
		display: none;
	}
	.price-place .c--link-sub span {
		line-height: 1;
	}
	.price-place .c--link-sub span.view {
		display: inline-block;
	}
}



/* カテゴリーによる区分 */
.price-category h3 {
	font-size: 20px;
	font-weight: bold;
}

.price-category .price {
	gap: 24px 0;
}

.price-category .price > h3:not(:first-of-type),
.price-category .price:last-of-type h3 {
	margin: 8px 0 0;
}

.price-category .price table {
	width: 100%;
	max-width: 342px;
}

.price-category .price th {
	width: 82px;
	text-align: center;
}

.price-category .price td {
	width: 92px;
	height: 68px;
}

.price-category .price td:has(a) {
	width: calc(100% - 82px - 92px);
	padding: 0;
	text-align: right;
	vertical-align: bottom;
}

.price-category .price .c--link-sub {
	width: 144px;
}

.price-category .price .c--link-sub span {
	display: block;
	font-size: 14px;
	font-weight: normal;
}

.price-category .price td:not(:has(a)) {
	border: 1px solid var(--color-grey-origin);
}

.price-category .price td:has(a) {
	border: none;
}

@media screen and (min-width: 1024px) {
	.price-category {
		display: none;
	}
	.price-category.active {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		gap: 0 32px;
		margin: 0 auto 48px;
	}
	main:has(.price-category) .annotation + .price.u--inner {
		margin-top: 48px;
	}
	.price-category .price {
		flex-direction: column;
		align-items: flex-start;
		width: calc((100% - 32px) / 2);
	}
	.price-category .price table {
		max-width: unset;
	}
	.price-category .price[class] h3 {
		margin: 0;
	}
	.price-category .price th {
		width: 120px;
		border-left: 1px solid var(--color-grey-origin);
		font-size: 16px;
	}
	.price-category .price td:not(:has(a)) {
		width: 215px;
	}
	.price-category .price td:has(a) {
		width: calc(100% - 120px - 215px);
	}
}



/* ワンポイントアドバイス */
.price-advice {
	margin-bottom: 48px;
}

.price-advice h2,
.price-advice p {
	margin: 0;
	padding: 16px;
	border: 1px solid var(--color-grey-origin);
}

.price-advice h2 {
	margin: 32px 0 0;
	border-radius: 4px 4px 0 0;
	border-bottom: none;
	font-size: 16px;
}

.price-advice p {
	border-radius: 0 0 4px 4px;
	border-top: none;
	padding-top: 0;
}

@media screen and (min-width: 1024px) {
	.price-advice {
		margin: 0 auto 64px;
	}
	main:has(.price-place) .price-advice {
		margin-top: 48px;
	}
	.price-advice h2 {
		font-size: 18px;
		margin: 0;
	}
}










/* =====================================================
--------------------------------------------------------
[C017] ranking
--------------------------------------------------------
===================================================== */

h2:is(.u--icon-crown) {
	display: flex;
	align-items: center;
	padding: 8px 0 4px 40px;
	font-size: 22px;
}

h2:is(.u--icon-crown)::before,
h2:is(.u--icon-crown)::after {
	margin: 0;
	font-size: 32px;
}

main:has(.show-ranking) > .u--inner > h3 {
	margin: 32px 0 16px;
	font-size: 20px;
	font-weight: bold;
}

main:has(.show-ranking) div:has(> .pref) {
	margin-bottom: 0;
}

main:has(.show-ranking) div:has(.line) + h2:is(.u--icon-crown) {
	margin-top: 32px;
}

@media screen and (min-width: 1024px) {
	main:has(.show-ranking) h2:is(.u--icon-crown) {
		font-size: 24px;
	}
	main:has(.show-ranking) > .u--inner > h3 {
		margin: 32px 0 24px;
		font-size: 18px;
	}
	main:has(.show-ranking) div:has(.line) + h2:is(.u--icon-crown) {
		margin-top: 48px;
	}
	h2:is(.u--icon-crown) {
		margin: 0;
	}
}


/* 絞り込む */
.annotation + div {
	margin-top: 8px;
}

.add-conditions {
	border: 1px solid var(--color-grey-origin);
	border-radius: 8px;
	margin: 24px 0;
}

.add-conditions .u--accordion-head {
	font-weight: bold;
}

.add-conditions .u--accordion-head::after {
	right: 16px;
	font-weight: normal;
}

.add-conditions > p {
	padding: 16px;
	margin: 0;
	font-size: 18px;
}

.add-conditions > div {
	padding: 8px 16px 0;

}

/* {{ yonezwa 20251007 実機（Android）検証結果からの修正 }} */
/* {{ ランキングページ表示時に一瞬開く「絞り込む」の内容をデフォルトから非表示にする }} */
.add-conditions:has(+ .show-ranking) > div {
	display: none;
}

.add-conditions > div p {
	width: 100%;
	font-size: 16px;
	font-weight: bold;
}

.add-conditions > div ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 8px 0 16px;
}

.add-conditions > div li:not(:last-of-type)::after {
	display: inline;
	content: "/";
	margin: 0 0 0 8px;
}

@media screen and (min-width: 1024px) {
	main:not(:has(.line)) .add-conditions {
		margin-top: 48px;
	}
	.add-conditions > div p {
		font-size: 18px;
	}
	.add-conditions > div ul:not(:last-of-type) {
		margin-bottom: 24px;
	}
}










/* =====================================================
--------------------------------------------------------
[C017] ranking 1～20位
--------------------------------------------------------
===================================================== */

.show-ranking > li {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 16px 0;
	position: relative;
	margin: 0 0 24px;
	width: 100%;
}

.show-ranking > li:last-of-type {
	margin: 0 0 48px;
}



/* 順位 */
.show-ranking > li > span {
	display: flex;
	flex-direction: column-reverse;
	justify-content: center;
	align-items: center;
	width: 50px;
	border-radius: 8px 0 0 0;
	background: var(--color-housecom-blue);
	color: #fff;
	font-size: 30px;
	font-weight: bold;
}

.show-ranking > li > span:has(.u--icon-crown) {
	padding-top: 40px;
}

.show-ranking > li > span > .u--icon-crown::before,
.show-ranking > li > span > .u--icon-crown::after {
	top: -32px;
	left: -16px;
	color: var(--color-housecom-blue);
	font-size: 32px;
	font-weight: normal;
}

.show-ranking > li > span > .u--icon-crown::before {
	color: var(--color-housecom-blue);
}

.show-ranking > li > span > .u--icon-crown::after {
	color: #fff;
}



/* 画像 */
.show-ranking > li > .cassette {
	z-index: 1;
	width: calc(100% - 50px);
	aspect-ratio: 3 / 2.2;
	border-radius: 0 8px 0 0;
	background: var(--color-grey-pale);
	overflow: hidden;
}

.show-ranking > li > .cassette .cassette_slick,
.show-ranking > li > .cassette .slick-list,
.show-ranking > li > .cassette .slick-track {
	height: 100% !important;
}

.show-ranking .cassette .slick-slide {
	aspect-ratio: 3 / 2.2;
	background: var(--color-grey-pale);
}

.show-ranking > li > .cassette img,
.show-ranking .cassette .slick-slide img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}



/* 情報 */
.show-ranking_info {
	width: 100%;
}

.show-ranking_info h4 {
	text-decoration: underline;
	color: var(--color-link-text);
	margin: 0 0 8px;
	font-size: 18px;
	font-weight: bold;
}

.show-ranking_info p {
	margin: 0 0 4px;
	font-size: 16px;
}

.show-ranking_info_price > span {
	font-size: 18px;
	font-weight: bold;
}

.show-ranking_info_price > span span {
	/* {{ 2025.10.09 括弧が全角のため幅が空きすぎるので削除 }} */
	/* margin: 0 8px 0 0; */
	font-size: 14px;
}

.show-ranking_info div {
	display: flex;
	flex-flow: row wrap;
	margin: 0;
	font-size: 16px;
}

.show-ranking_info div p {
	display: inline-block;
}

.show-ranking_info div p::after {
	margin: 0 0.2em;
	content: "/";
}

.show-ranking_info div ul {
	display: contents;
}

.show-ranking_info div ul li:has(+ li)::after {
	content: "、";
}

.show-ranking_more {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 12px 16px;
}



/* お気に入り・詳細・公開日 */
.show-ranking_more {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	text-align: center;
	border-radius: 4px;
}

.show-ranking_more .u--icon-heart,
.show-ranking_more a {
	width: calc((100% - 16px) / 2);
	height: 48px;
}

.show-ranking_more .u--icon-heart {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	position: relative;
	z-index: 1;
	padding: 0 8px 0 32px;
	border-radius: 4px;
	border: 1px solid var(--color-grey-origin);
	background: #fff;
	color: var(--color-link-text);
	text-align: center;
	/* white-space: nowrap; */
	letter-spacing: -0.4px;
	cursor: pointer;
}

.show-ranking_more .u--icon-heart::before {
	position: absolute;
	left: 8px;
	font-size: 24px;
	color: var(--color-grey-dark);
	content: "\e92a";
}

@media screen and (min-width:375px) {
.show-ranking_more .u--icon-heart {
	padding: 0 12px 0 40px;
}

.show-ranking_more .u--icon-heart::before {
	left: 12px;
	font-size: 24px;
}
}

.show-ranking_more .u--icon-heart.added::before {
	color: var(--color-link-cv);
	content: "\e92b";
}

.show-ranking_more a {
	position: static !important;
	padding: 10px 10px 10px 0;
	color: var(--color-black);
	font-size: 14px;
	font-weight: bold;
	/* {{-- yonezawa 20251030 チェックFB No.63 --}} */
	/* {{-- a要素タップ時の挙動を修正 --}} */
	-webkit-tap-highlight-color: transparent;
}

/* {{-- yonezawa 20251030 チェックFB No.63 --}} */
/* {{-- a要素タップ時の挙動を修正 --}} */
.show-ranking_more a:focus {
	outline: none;
}

.show-ranking_more a::before {
	position: absolute;
	top: 0;
	left: 0;
	translate: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	content: "";
}

/* {{-- yonezawa 20251030 チェックFB No.63 --}} */
/* {{-- a要素タップ時の挙動を修正 --}} */
.show-ranking_more a:active::before {
	animation: tap .5s;
}

@keyframes tap {
	0% {background: #0000;}	
	50% {background: #0001;}	
	100% {background: #0000;}	
}

.show-ranking_more a span {
	display: block;
	position: relative;
	width: 100%;
}

.show-ranking_more a span::after {
	position: absolute;
	top: 50%;
	right: 2px;
	translate: 0 -50%;
	font-family: 'icomoon';
	content: "\e90d";
	font-size: 16px;
	font-weight: normal;
}

.show-ranking_more p {
	width: 100%;
	color: var(--color-grey-dark);
	font-size: 14px;
	text-align: right;
	z-index: -1;
}

.show-ranking > li * {
	transition: opacity 0.5s;
}

@media (any-hover) {
	.show-ranking_more a:hover {
		background: var(--color-housecom-green);
	}
	.show-ranking > li:has(:hover) > .show-ranking_info,
	.show-ranking > li:has(:hover) > .show-ranking_more p {
		opacity: 0.5;
	}
	.show-ranking_more .u--icon-heart:hover::before {
		color: var(--color-link-cv);
	}
}

@media screen and (min-width: 1024px) {
	.show-ranking > li {
		flex-wrap: nowrap;
		justify-content: flex-start;
	}
	.show-ranking > li:last-of-type {
		margin: 0 0 64px;
	}

	.show-ranking > li > span {
		min-width: 72px;
		border-radius: 8px 0 0 8px;
		font-size: 36px;
	}

	.show-ranking > li > .cassette {
		width: 300px;
		border-radius: 0;
		border-top: 1px solid var(--color-grey-origin);
		border-bottom: 1px solid var(--color-grey-origin);
	}

	.show-ranking li h4 {
		font-size: 22px;
		margin: 0 0 24px;
		overflow: auto;
	}

	.show-ranking_info {
		width: calc(100% - 372px - 216px);
		padding: 24px 16px;
		border-top: 1px solid var(--color-grey-origin);
		border-bottom: 1px solid var(--color-grey-origin);
	}

	.show-ranking_info p {
		margin: 0 0 12px;
	}

	.show-ranking_info_price > span {
		font-size: 22px;
	}
	
	.show-ranking_info_price span span {
		font-size: 16px;
	}

	.show-ranking_info div p {
		display: block;
		margin: 0;
	}
	
	.show-ranking_info div p::after,
	.show-ranking_info div ul li:has(+ li)::after {
		content: "";
	}

	.show-ranking_info div ul {
		display: block;
		width: 100%;
	}
	.show-ranking_more {
		width: 216px;
		padding: 24px 32px 24px 0;
		flex-direction: column;
		gap: 12px 0;
		border-radius: 0 8px 8px 0;
		border: 1px solid var(--color-grey-origin);
		border-left: none;
	}
	.show-ranking_more .u--icon-heart,
	.show-ranking_more a {
		width: 100%;
		font-size: 16px;
	}
	.show-ranking_more > p {
		margin: auto 0 0;
	}
}










/* =====================================================
--------------------------------------------------------
[C021] tag
--------------------------------------------------------
===================================================== */

.tag-particular > div,
.tag-lifestyle > div {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.tag-particular h3,
.tag-lifestyle a:has(h3) {
	width: calc((100% - 16px) / 2);
}

@media screen and (min-width: 1024px) {
	main:has(> .tag-particular) > div:has(.previous-search-condition):has(.free-word-search) {
		margin-bottom: 0;
	}
	main:has(> .tag-particular) > div:has(.previous-search-condition):has(.free-word-search):has(> h2) > h2 {
		width: 100%;
		margin: 0 0 32px;
	}
	.tag-particular > div,
	.tag-lifestyle > div {
		gap: 24px;
	}
	
	.tag-particular h3,
	.tag-lifestyle a:has(> h3) {
		width: calc((100% - 24px * 3) / 4);
	}
}



/* こだわり */
.tag-particular h3 a {
	padding: 8px 16px 8px 28px;
	font-size: 16px;
	width: 100%;
}

.tag-particular h3 a::before {
	left: 8px;
	font-family: 'icomoon';
	content: "\e97a";
	font-size: 16px;
}

@media screen and (min-width: 1024px) {
	.tag-particular h3 a {
		padding: 12px 16px 12px 28px;
	}
}


/* ライフスタイル */
.tag-lifestyle a:has(> h3) {
	display: flex;
	flex-direction: column-reverse;
	justify-content: flex-end;
	align-self: flex-start;
	overflow: hidden;
	padding: 0;
}

.tag-lifestyle h3 {
	position: relative;
	width: 100%;
	padding: 8px 8px 8px 28px;
}

.tag-lifestyle h3::before {
	position: absolute;
	top: 50%;
	left: 8px;
	translate: 0 -50%;
	font-family: 'icomoon';
	content: "\e95b";
	font-size: 14px;
	color: var(--color-link-text);
}

.tag-lifestyle > div div {
	aspect-ratio: 2 / 1;
	width: 100%;
	/* 画像の背景色pale→white */
	background: var(--color-grey-pale);
	overflow: hidden;
}

.tag-lifestyle > div div img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media screen and (min-width: 1024px) {
	.tag-lifestyle h3 {
		padding: 12px 8px 12px 24px;
	}
}



/* すべて見る */
.tag-all {
	margin: 32px auto 48px;
	background: #fff;
}

.tag-all_tab {
	position: relative;
	height: fit-content;
}

/* muto 2025.08.26 タグ検索の修正（スクロールボタンを表示） */
.tag-all_prev,
.tag-all_next {
	position: absolute;
	bottom: 0;
	width: 16px;
	height: 100%;
	background: #fff;
	cursor: pointer;
}

.tag-all_prev {
	left: 0;
}

.tag-all_next {
	right: 0;
}

.tag-all_prev::before,
.tag-all_next::before {
	display: grid;
	place-items: center;
	color: var(--color-black);
	font-family: 'icomoon';
	font-size: 16px;
	content: "\e90d";
}

.tag-all_prev::before {
	rotate: 180deg;
}

.tag-all_tab ul {
	display: flex;
	overflow-x: scroll;
	scrollbar-width: none;
}

.tag-all_tab ul::-webkit-scrollbar {
	display: none;
}

.tag-all_tab ul li {
	flex-shrink: 0;
	margin: 0 0 16px;
	padding: 0 0 8px;
	width: calc((100% / 2) - 4px);
	border-bottom: 4px solid var(--color-grey-pale);
	color: var(--color-link-text);
	text-align: center;
	transition: opacity 0.5s;
	cursor: pointer;
}

@media screen and (min-width: 375px) {
	.tag-all_tab ul li {
		width: calc((100% / 3) - 4px);
	}
}

.tag-all_tab ul li.active {
	border-color: var(--color-housecom-blue);
	color: var(--color-black);
	font-weight: bold;
}

.tag-all_tab ul li:not(.active):hover {
	opacity: 0.5;
}

.tag-all_tab ~ dl {
	display: none;
}

.tag-all_tab ~ dl.active {
	display: flex;
	flex-direction: column;
	gap: 24px 0;
}

.tag-all_tab ~ dl.active div {
	display: flex;
	gap: 24px 8px;
	color: var(--color-grey-dark);
}

.tag-all_tab ~ dl dt {
	width: 1em;
	font-weight: bold;
}

.tag-all_tab ~ dl dd {
	display: flex;
	flex-wrap: wrap;
	gap: 24px 0;
	width: calc(100% - 1em - 8px);
}
.tag-all_tab ~ dl dd h3 {
	width: 100%;
}

@media screen and (min-width: 768px) {
	.tag-all_tab ~ dl dd h3 {
		width: calc((100% - 24px * 2) / 3);
	}
}

@media screen and (min-width: 1024px) {
	.tag-all {
		margin: 0 auto 64px;
	}
	.tag-all_tab ul li {
		margin: 0 0 32px;
		padding: 0 0 16px;
	}
	.tag-all_tab ul li {
		width: calc(100% / 6);
	}
	.tag-all_tab ~ dl.active div {
		gap: 24px;
	}
	.tag-all_tab ~ dl div.active {
		gap: 24px;
	}
	.tag-all_tab ~ dl dd {
		width: calc(100% - 1em - 24px);
		flex-direction: row;
		gap: 24px;
	}
}










/* =====================================================
--------------------------------------------------------
[C022] タグ・設備詳細
--------------------------------------------------------
===================================================== */

/* 見出し */
main:has(> .hash) h1 {
	margin: 16px auto;
	padding: 0;
}

.hash {
	position: relative;
	margin: 32px auto;
	padding-left: 40px;
	font-size: 22px;
}

.hash::before {
	position: absolute;
	top: 50%;
	left: 0;
	translate: 0 -50%;
	content: "\e95b";
	color: var(--color-housecom-blue);
	font-family: "icomoon";
	font-size: 32px;
	font-weight: normal;
}

main:has(> .hash) h3,
main:has(.u--icon-ldk) div:not(:has(.free-word-search)):not(:has(.line)) h3,
main:has(.u--icon-house) div:not(:has(.free-word-search)):not(:has(.line)) h3 {
	margin: 32px 0 16px;
	font-size: 20px;
	font-weight: bold;
}



/* 画像 */
main:has(> .hash) .annotation + div {
	margin-top: 16px;
	aspect-ratio: 2 / 1;
	border-radius: 4px;
	/* 画像の背景色pale→white */
	background: var(--color-grey-pale);
	overflow: hidden;
}

main:has(> .hash) .annotation + div img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media screen and (min-width: 1024px) {
	main:has(> .hash) div:has(> h1) {
		display: grid;
		grid-template-columns: 592px 400px;
		grid-template-rows: repeat(3, auto);
		grid-template-areas: "h1 img"
							"p1 img"
							"p2 img";
		gap: 16px 32px;
		margin: 64px auto 16px;
	}
	main:has(> .hash) div:has(> h1) h1 {
		grid-area: h1;
		margin: 0;
		font-size: 28px;
	}
	main:has(> .hash) div:has(> h1):not(:has(div)) h1 {
		grid-area: 1 / 1 / 2 / 3;
	}
	main:has(> .hash) div:has(> h1) p:not(:has([class])) {
		grid-area: p1;
	}
	main:has(> .hash) div:has(> h1):not(:has(div)) p:not(:has([class])) {
		grid-area: 2 / 1 / 3 / 3;
	}
	main:has(> .hash) div:has(> h1) p.annotation {
		grid-area: p2;
		margin: 0;
		font-size: 14px;
	}
	main:has(> .hash) div:has(> h1):not(:has(div)) p.annotation {
		grid-area: 3 / 1 / 4 / 3;
	}
	main:has(> .hash) div:has(> h1) div {
		grid-area: img;
	}
	main:has(> .hash) div:has(> .free-word-search) {
		order: 0;
	}
	.hash[class] {
		display: flex;
		align-items: center;
		gap: 0 8px;
		width: 100%;
		margin: 0 auto;
		font-size: 24px;
	}
	.in-page-link + .hash[class] {
		margin-top: 16px
	}
	main:has(> .hash) h3 {
		font-size: 18px;
		margin: 32px 0;
	}
	main:has(> .hash) h3:has(+ .line-pref),
	main:has(> .hash) h3:has(+ .pref) {
		margin-bottom: 24px;
	}
	main:has(> .hash) div:has(.line):has(+ h2) {
		margin-bottom: 48px;
	}
	main:has(> .hash) .annotation + div {
		margin: 0
	}
	main:has(.u--icon-ldk) div:not(:has(.free-word-search)):not(:has(.line)) h3,
	main:has(.u--icon-house) div:not(:has(.free-word-search)):not(:has(.line)) h3 {
		font-size: 18px;
	}
}










/* =====================================================
--------------------------------------------------------
[C023] ldk
--------------------------------------------------------
===================================================== */

.ldk {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 24px;
	margin: 32px auto 48px;
}

.ldk > li {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: relative;
	padding: 8px;
	border-radius: 4px;
	border: 1px solid var(--color-grey-origin);
	text-align: center;
	width: 100%;
	line-height: 24px;
}

.ldk > li h2 {
	position: static !important;
	margin: 0;
	font-size: 14px;
}

.ldk > li h2 a {
	/* {{-- yonezawa 20251030 チェックFB No.63 --}} */
	/* {{-- a要素タップ時の挙動を修正 --}} */
	-webkit-tap-highlight-color: transparent;
}

/* {{-- yonezawa 20251030 チェックFB No.63 --}} */
/* {{-- a要素タップ時の挙動を修正 --}} */
.ldk > li h2 a:focus {
	outline: none;
}

.ldk > li h2 a::before {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	content: "";
}

/* {{-- yonezawa 20251030 チェックFB No.63 --}} */
/* {{-- a要素タップ時の挙動を修正 --}} */
.ldk > li h2 a:active::before {
	animation: tap .5s;
}

@keyframes tap {
	0% {background: #0000;}	
	50% {background: #0001;}	
	100% {background: #0000;}	
}

.ldk > li h2 span {
	display: block;
	font-size: 16px;
}

.ldk > li p {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	margin: 8px 0 0;
	transition: opacity 0.5s;
	z-index: -1;
	cursor: pointer;
}

@media (any-hover) {
	.ldk > li:has(a:hover) h2 span {
		opacity: 1 !important;
	}
	.ldk > li:has(a:hover) > ul {
		opacity: 0.5;
	}
}

@media screen and (min-width:375px) {
	.ldk > li {
		padding: 16px;
	}
}

@media screen and (min-width: 1024px) {
	.ldk {
		margin: 0 auto 64px;
	}
	.ldk > li {
		width: calc((100% - 24px * 2) / 3);
	}
	.ldk > li h2 span {
		font-size: 18px;
	}
	.ldk > li p {
		font-size: 14px;
	}
}










/* =====================================================
--------------------------------------------------------
[C025] facility
--------------------------------------------------------
===================================================== */

.facility {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin: 0 auto;
	width: calc(100% - 32px);
}

.facility:last-of-type {
	margin-bottom: 48px;
}

p:has(+ .facility) {
	width: 100%;
	max-width: 1024px;
	margin: 32px auto 16px;
	padding: 0 16px;
	font-size: 20px;
	font-weight: bold;
}

.facility h2 {
	width: calc((100% - 16px) / 2);
	margin: 0;
	line-height: 24px;
}

.facility h2 a {
	display: flex;
	flex-direction: column;
	padding: 8px;
	width: 100%;
	height: 100%;
	font-size: 14px;
}

.facility h2 a span {
	display: block;
}

@media screen and (min-width:375px) {
	.facility h2 a {
		padding: 16px;
	}
	.facility h2 a span {
		font-size: 16px;
	}
}

@media screen and (min-width: 1024px) {
	main:has(.facility) h1 {
		margin-bottom: 0;
	}
	p:has(+ .facility) {
		margin: 48px auto 32px;
		padding: 0;
		width: 100%;
		font-size: 24px;
	}
	.facility {
		gap: 24px;
		margin: 0;
		width: 100%;
	}
	.facility:last-of-type {
		margin-bottom: 64px;
	}
	.facility h2 {
		width: calc((100% - 24px * 3) / 4);
	}
	.facility h2 a span {
		font-size: 18px;
	}
}










/* =====================================================
--------------------------------------------------------
[C023] ldk / [C025] facility
--------------------------------------------------------
===================================================== */

body:has(.ldk),
body:has(.facility) {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

body:has(.ldk) footer,
body:has(.facility) footer {
	margin-top: auto;
}










/* =====================================================
--------------------------------------------------------
[C024] ldk / [C026] facility
--------------------------------------------------------
===================================================== */

main:has(.u--icon-ldk) h1 + p {
	font-size: inherit;
}

main:has(.u--icon-ldk) h2.u--icon-ldk,
main:has(.u--icon-house) h2.u--icon-house {
	display: flex;
	align-items: center;
	margin: 32px auto;
	padding: 8px 0 4px 40px;
	font-size: 22px;
}

main:has(.u--icon-ldk) h2.u--icon-ldk::before,
main:has(.u--icon-ldk) h2.u--icon-ldk::after,
main:has(.u--icon-house) h2.u--icon-house::before,
main:has(.u--icon-house) h2.u--icon-house::after {
	font-size: 32px;
	margin: 0;
}

.single::before {
	color: rgb(34, 34, 34);
	content: "\e924";
}

.pair::before {
	color: rgb(34, 34, 34);
	content: "\e925";
}

.family::before {
	content: "\e96a";
}

.family::after {
	content: "\e96b";
}

@media screen and (min-width: 1024px) {
	main:has(.u--icon-ldk) div:has(> .free-word-search),
	main:has(.u--icon-house) div:has(> .free-word-search) {
		order: 0;
		margin-bottom: 8px;
	}
	main:has(.u--icon-ldk) div:has(> .free-word-search) + div .line,
	main:has(.u--icon-house) div:has(> .free-word-search) + div .line {
		margin-top: -8px;
	}
	main:has(.u--icon-ldk) h2.u--icon-ldk,
	main:has(.u--icon-house) h2.u--icon-house {
		width: 100%;
		margin: 48px auto 0;
		font-size: 24px;
	}
	main:has(.u--icon-ldk) h3,
	main:has(.u--icon-house) h3 {
		font-size: 18px;
		margin: 24px 0 32px;
	}
	main:has(.u--icon-ldk) div:has(.line):has(+ h2),
	main:has(.u--icon-house) div:has(.line):has(+ h2) {
		margin-bottom: 24px;
	}
}