@charset "utf-8";

/* =====================================================
--------------------------------------------------------
雑多（共通）
--------------------------------------------------------
===================================================== */

/* インナー幅の上下余白 */
.u--inner:not(:is(.footer)) {
	padding-top: 16px;
	padding-bottom: 16px;
}

@media screen and (min-width:1024px) {
	.u--inner:not(:is(.footer)) {
		padding-top: 32px;
		padding-bottom: 32px;
	}
}



/* 詳細を囲う背景色 */
.detail {
	background: var(--color-grey-light);
}

.detail:has(.announce) {
	padding-top: 16px;
}

@media screen and (min-width:1024px) {
	.detail:has(.announce) {
		padding-top: 32px;
	}
}



/* お知らせ */
.announce {
	/* margin: 0 16px 16px 16px; */
	margin: 0 auto 16px;
	padding: 8px;
	width: calc(100% - 32px);
	max-width: 1024px;
	border: 1px solid var(--color-link-cv);
	color: var(--color-link-cv);
	font-weight: bold;
	word-break: break-word;
	overflow-wrap: break-word;
}

@media screen and (min-width:768px) {
	.announce {
		width: calc(100% - 48px);
	}
}

@media screen and (min-width:1024px) {
	.announce {
		margin: 0 auto;
		padding: 16px;
		width: 100%;
		text-align: center;
	}
	.announce:has(+ .announce) {
		margin-bottom: 16px;
	}
}



/* 見出し */
.head02-shop {
	margin-bottom: 16px;
	padding-left: 32px;
	font-size: 18px;
	font-weight: bold;
}

.head02-shop::before,
.head02-shop::after {
	font-size: 24px;
}

@media screen and (min-width:1024px) {
	.head02-shop {
		padding-left: 40px;
		font-size: 24px;
	}
	.head02-shop::before,
	.head02-shop::after {
		font-size: 32px;
	}
	.overview .head02-shop {
		display: none;
	}
}



/* テーブルリスト */
.detail_info {
	margin-bottom: 16px;
	width: 100%;
}

.detail_info tbody {
	display: flex;
	flex-flow: row wrap;
	column-gap: 16px;
	border-radius: 8px;
	border: 1px solid var(--color-grey-origin);
	background: #fff;
}

.detail_info tr {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	gap: 0 16px;
	width: 100%;
}

.detail_info tr:not(:last-of-type) {
	border-bottom: 1px solid var(--color-grey-origin);
}

.detail_info th {
	padding: 16px 0 16px 16px;
	width: calc(5em + 16px);
	text-align: left;
}

.detail_info th span {
	display: block;
}

.detail_info td {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	gap: 8px;
	padding: 16px 16px 16px 0;
	width: calc(100% - 5em - 32px);
	word-break: break-word;
	overflow-wrap: anywhere;
}

.detail_info td:has(.c--link-cv) {
	justify-content: space-between;
}

.detail_info a:not(:is(.c--link-cv)) {
	color: var(--color-link-text);
}

.detail_info .u--icon-arrow {
	position: relative;
	padding-right: 16px;
	color: var(--color-link-text);
	cursor: pointer;
}

.detail_info .u--icon-arrow::before {
	position: absolute;
	top: 50%;
	right: 0;
	translate: 0 -50%;
	color: var(--color-link-text);
	font-size: 12px;
}

.detail_info .c--link-cv {
	justify-content: flex-start;
	padding: 4px 8px;
	width: auto;
	min-height: unset;
	font-size: 12px;
}

.detail_info .u--icon-phone {
	padding-left: 24px;
}

.detail_info .u--icon-phone::before {
	left: 8px;
}

.detail_info_station li a:nth-of-type(1) {
	margin-right: 4px;
}

.detail_info .parking iframe {
	padding: 16px;
	width: 100%;
	height: 100%;
}

@media (any-hover:hover) {
	.detail_info a:not(:is(.c--link-cv)):hover,
	.detail_info .u--icon-arrow:hover {
		text-decoration: underline;
	}
}

@media screen and (min-width:1024px) {
	.detail_info tr {
		gap: 0 8px;
	}
	.detail_info tr.half,
	.detail_info tr.half + * {
		width: calc((100% - 16px) / 2);
	}
	.detail_info tr.takken,
	.detail_info tr:last-of-type {
		position: relative;
	}
	.detail_info tr.takken::before,
	.detail_info tr:last-of-type::before {
		position: absolute;
		top: -1px;
		left: 0;
		width: 100%;
		height: 1px;
		background: var(--color-grey-origin);
		content: '';
	}
	.detail_info tr:has(+ tr .u--icon-phone) {
		border-bottom: none;
	}
	.detail_info tr:has(.u--icon-phone),
	.detail_info tr:has(.u--icon-phone) + * {
		border-top: 1px solid var(--color-grey-origin);
	}
	.detail_info tr:nth-last-of-type(2):is(.half):not(:has(+.half)) {
		border-bottom: none;
	}
	.detail_info th {
		padding-left: 24px;
		width: calc(7em + 16px);
	}
	.detail_info td {
		width: calc(100% - 7em - 24px);
	}
	.overview .detail_info th {
		padding-left: 16px;
		width: calc(5em + 16px);
	}
	.overview .detail_info td {
		width: calc(100% - 5em - 24px);
	}
	.detail_info .c--link-cv {
		flex-flow: column nowrap;
		font-size: 14px;
		cursor: pointer;
	}
	.detail_info .u--icon-phone {
		display: none;
	}
}










/* =====================================================
--------------------------------------------------------
この店舗にお問い合わせ（共通）
--------------------------------------------------------
===================================================== */

.contact {
	margin: 0 auto;
	width: 100%;
	max-width: 1024px;
}

.contact > p {
	display: none;
}

.contact > div {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-items: center;
	gap: 16px 48px;
	padding: 16px;
	background: var(--color-housecom-blue-light);
}

.contact > div > div {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-items: center;
	gap: 0 16px;
	width: 100%;
}



/* メールフォームへ */
.contact .c--link-cv-primary {
	justify-content: center;
	padding: 0;
	width: 100%;
}

.contact .c--link-cv-primary > span {
	display: flex;
	align-items: center;
	margin: 0 auto;
	padding: 8px 0;
	min-height: 60px;
	position: relative;
}

.contact .c--link-cv-primary > span:not(:is(.u--icon-mail)) {
	font-size: 20px;
}

.contact .c--link-cv-primary > span:not(:is(.u--icon-mail))::after {
	position: absolute;
	top: 50%;
	right: -8px;
	translate: 0 -50%;
	width: 1px;
	height: 100%;
	background: #fff;
	content: '';
}

.contact .c--link-cv-primary > span:is(.u--icon-mail) {
	justify-content: center;
	min-width: calc(100% - 78px);
	font-size: 18px;
}

.contact .c--link-cv-primary > span:is(.u--icon-mail)::before {
	margin-right: 8px;
	color: #fff;
	font-size: 24px;
}

@media screen and (min-width:375px) {
	.contact .c--link-cv-primary > span {
		padding: 8px 16px;
	}
	.contact .c--link-cv-primary > span:not(:is(.u--icon-mail))::after {
		right: 0;
	}
	.contact .c--link-cv-primary > span:is(.u--icon-mail)::before {
		margin-right: 16px;
	}
}

@media screen and (min-width:768px) {
	.contact > div {
		padding: 16px 24px;
	}
	.contact > div > div {
		justify-content: flex-end;
	}
	.contact > div > div,
	.contact .c--link-cv-primary {
		max-width: 320px;
	}
}



/* 電話番号・来店予約・シェアアイコン */
.contact .u--icon-phone {
	display: none;
}

.contact .c--link-cv {
	padding: 0 12px 0 40px;
	width: auto;
	font-size: 18px;
	cursor: pointer;
}

.contact .c--link-cv::before,
.contact .c--link-cv::after {
	left: 12px;
	color: var(--color-link-cv);
	font-size: 24px;
}

.contact_share {
	display: flex;
	justify-content: center;
	gap: 4px;
	font-size: 32px;
}

.contact:is(.no-rental) .contact_share {
	width: 100%;
}

@media (any-hover:hover) {
	.contact .c--link-cv-primary:hover > span:not(:is(.u--icon-mail))::after {
		background: var(--color-link-cv)
	}
	.contact .c--link-cv-primary:hover > .u--icon-mail::before{
		color: var(--color-link-cv);
	}
	.contact .c--link-cv:hover::before,
	.contact .c--link-cv:hover::after {
		color: #fff;
	}
}

@media screen and (min-width:375px) {
	.contact_share {
		gap: 16px;
	}
}

@media screen and (min-width:1024px) {
	.contact > p {
		display: block;
		padding: 8px;
		width: 100%;
		background: var(--color-housecom-blue);
		color: #fff;
		font-size: 20px;
		font-weight: bold;
		text-align: center;
	}
	.contact > div {
		justify-content: space-between;
		gap: 32px;
		padding: 24px;
	}
	.overview .contact > div > div {
		justify-content: space-between;
		gap: 16px ;
		max-width: calc(100% - 32px - 296px);
	}
	.contact > div > div {
		justify-content: flex-end;
		gap: 0 16px;
		max-width: calc(100% - 32px - 296px);
	}
	.overview .contact .u--icon-phone {
		margin: 0;
	}

	.contact .u--icon-phone {
		margin-right: 16px;
	}
	.contact .c--link-cv-primary {
		width: 296px;
	}
	.contact .c--link-cv-primary > span:is(.u--icon-mail) {
		width: calc(100% - 80px);
		max-width: unset;
	}
	.contact .c--link-cv-primary > span:is(.u--icon-mail)::before {
		margin-right: 8px;
	}
	.contact .u--icon-phone {
		display: block;
		color: var(--color-link-cv);
		font-size: 32px;
		font-weight: bold;
		text-align: right;
	}
	.contact .u--icon-phone::before {
		margin-right: 8px;
		color: var(--color-link-cv);
	}
	.contact:is(.no-rental) .contact_share {
		width: fit-content;
	}
}



/* 特別仕様 */
.overview .contact {
	margin: 0 calc(50% - 50vw) 16px calc(50% - 50vw);
	width: 100vw;
}

@media screen and (min-width:1024px) {
	.overview .contact {
		margin: 0 0 16px 0;
		width: 100%;
	}
	.overview .contact:is(.no-rental) > div > div {
		width: 100%;
		max-width: unset;
	}
	#bukken + .contact {
		margin-top: -8px;
		margin-bottom: 32px;
	}
	.detail + .contact {
		padding: 32px 0;
	}
}










/* =====================================================
--------------------------------------------------------
拡大表示（共通）
--------------------------------------------------------
===================================================== */

.dialog::backdrop {
	opacity: 0.5;
	background: var(--color-black);
}

.dialog {
	display: block;
	opacity: 0;
	top: calc(50% - 24px);
	left: 50%;
	z-index: -1;
	translate: -50% -50%;
	width: 100%;
	max-width: 864px;
	border: none;
	background: transparent;
}

.dialog:has(.parking) {
	height: 90%;
}

.dialog[open] {
	opacity: 1;
	z-index: 1;
}

@media screen and (min-width:1024px) {
	.dialog:has(.parking) {
		max-width: 1024px;
	}
}


/* {{yonezawa 20250929 shop詳細ページ dialog内のカルーセル画像の縦並びを横並びに変更}} */
#dialog_shop_image .cassette_slick {
	display: flex;
}

/* 虫眼鏡 */
.cassette_caption + .u--icon-zoom {
	display: none;
}

@media screen and (min-width:1024px) {
	.cassette_caption + .u--icon-zoom {
		display: block;
	}
}

	.cassette_caption + .u--icon-zoom::after {
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	bottom: 4px;
	right: 4px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.6);
	font-family: 'icomoon';
	font-size: 24px;
	content: '\e985';
	cursor: pointer;
}



/* 閉じる */
.dialog div:has(.dialog-close) {
	margin: 0 auto 10px;
	width: calc(100% - 64px);
	line-height: 0;
	text-align: right;
}

.dialog-close {
	display: inline-block;
	position: relative;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: #fff;
	cursor: pointer;
}

.dialog-close::before {
	position: absolute;
	top: 50%;
	left: 50%;
	translate: -50% -50%;
	font-size: 32px;
	font-family: 'icomoon';
	content: '\e92d';
}



/* 中身 */
.dialog div:is(.cassette) {
	margin: 0 auto;
	width: calc(100% - 64px);
	height: fit-content;
	background: #fff;
	font-size: 24px;
}

.dialog div:is(.parking) {
	margin: 0 auto;
	padding: 24px;
	width: calc(100% - 64px);
	height: calc(100% - 58px);
	background: #fff;
}

/* ストリートビューのペグマンを表示されるように */
.dialog div:is(.parking) .gm-style img {
	max-height: unset;
}

.dialog div:is(.parking) > div {
	margin-bottom: 8px;
	width: 100%;
	height: calc(100% - 2em);
}

.dialog div:is(.parking) > span {
	font-size: 12px;
}

/* スライダー */
.dialog .slick-slide {
	height: fit-content;
	background: var(--color-grey-pale);
}

.dialog .cassette_prev {
	left: -32px;
	width: 32px;
	border-radius: 8px 0 0 8px;
	background: #fff;
}

.dialog .cassette_next {
	right: -32px;
	width: 32px;
	border-radius: 0 8px 8px 0;
	background: #fff;
}

@media screen and (min-width:1024px) {
	.dialog .cassette {
		width: 800px;
		max-width: unset;
	}
	.cassette_caption + .u--icon-zoom::after {
		bottom: 10px;
		right: 10px;
	}
	.dialog .slick-slide {
		height: 600px;
	}
}










/* =====================================================
--------------------------------------------------------
追従（共通）
--------------------------------------------------------
===================================================== */

.floating {
	display: flex;
	flex-direction: row;
	justify-content: center;
	gap: 8px;
	position: fixed;
	z-index: 3;
	left: 0;
	bottom: 0;
	padding: 8px 16px;
	width: 100%;
	background: #fff;
}

.floating a {
	flex-direction: column;
	padding-left: 40px;
	width: calc((100% - 8px) / 2);
}

.floating a::before {
	left: 4px;
	font-family: 'icomoon';
	font-size: 24px;
}

.floating a:nth-of-type(1)::before {
	content: '\e928';
}

.floating a:nth-of-type(2)::before {
	content: '\e927';
}

.floating a > span {
	font-size: 10px;
}

/* 追従を最下部表示しているときに、余白を確保する */
body:has(.floating) footer {
	margin-bottom: 75px;
}

@media screen and (min-width:375px) {
	.floating a {
		padding-left: 48px;
	}
	.floating a::before {
		left: 16px;
	}
	.floating a > span {
		font-size: 12px;
	}
}

@media screen and (min-width:768px) {
	.floating {
		display: none;
	}
	/* 追従を最下部表示しているときに、余白を確保する */
	body:has(.floating) footer {
		margin-bottom: 0;
	}
}









/* =====================================================
--------------------------------------------------------
上部
--------------------------------------------------------
===================================================== */

/* 見出し */
.summary hgroup {
	margin-bottom: 16px;
    word-break: break-all;
}

.summary hgroup h1 {
	margin-bottom: 16px;
	font-size: 24px;
	font-weight: bold;
}

.summary hgroup .summary_catch {
	margin-bottom: 8px;
	font-weight: bold;
}



/* ページ内リンク */
.summary_nav {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: center;
	gap: 8px;
}

.summary_nav li {
	width: calc((100% - 8px) / 2);
}

.summary_nav li a {
	position: relative;
	width: 100%;
	padding-left: 8px;
	padding-right: 24px;
	border-radius: 24px;
	font-size: 14px;
	line-height: 1;
	word-break: keep-all;
	overflow-wrap: break-word;
}

.summary_nav li a::after {
	position: absolute;
	top: 50%;
	right: 8px;
	translate: 0 -50%;
	color: var(--color-black);
	font-family: 'icomoon';
	content: '\e94f';
}

@media screen and (min-width:375px) {
	.summary_nav {
		gap: 16px;
	}
	.summary_nav li {
		width: calc((100% - 16px) / 2);
	}
}

@media screen and (min-width:768px) {
	.summary_nav li {
		width: calc((100% - 16px * 3) / 4);
	}
	.summary_nav:has(li:nth-child(5)) {
		gap: 8px;
	}
	.summary_nav:has(li:nth-child(5)) li {
		width: calc((100% - 8px * 4) / 5);
	}
}

@media screen and (min-width:1024px) {
	.summary h1 {
		font-size: 28px;
	}
	.summary_nav {
		gap: 32px;
	}
	.summary_nav li {
		width: calc((100% - 32px * 3) / 4);
	}
	.summary_nav li a {
		padding-right: 32px;
		font-size: 18px;
	}
}










/* =====================================================
--------------------------------------------------------
基本情報
--------------------------------------------------------
===================================================== */

.overview {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	gap: 16px;
	margin-left: auto;
	margin-right: auto;
	padding-bottom: 16px;
	width: 100%;
	max-width: 1024px;
}

.overview > div {
	width: 100%;
}

@media screen and (min-width:768px) {
	.overview {
		padding: 32px 24px 24px;
	}
}

@media screen and (min-width:1024px) {
	.overview {
		padding-left: 0;
		padding-right: 0;
	}
}



/* 連動型のslick */
/* {{-- yonezawa 20251031 店舗ページ slickサムネイルの微調整 --}} */
/* {{-- yonezawa 20251031 現在はMAX9枚 --}} */
.room-interlock > div {
	margin-bottom: 10px;
	/* カード枚数計測用 */
	--listCount: 0;
	/* ビューポートサイズ微調整用（translateで移動させる数値） */
	--viewWidth: 0;
	/* 店舗 最小幅 */
	--shopMinWidth: 0;
	/* 店舗 最大幅 */
	--shopMaxWidth: 0;
}

/* 以下、サムネイル数ごとにそれぞれを調整 */
main:has(#staff)  .detail-thumb-cassette .slick-track:has(> li:nth-child(10)) {
	--listCount: 10;
	--viewWidth: 1vw;
	--shopMinWidth: 2px;
	--shopMaxnWidth: 4px;
}

main:has(#staff)  .detail-thumb-cassette .slick-track:has(> li:nth-child(11)) {
	--listCount: 11;
}

main:has(#staff)  .detail-thumb-cassette .slick-track:has(> li:nth-child(12)) {
	--listCount: 12;
	--viewWidth: 3vw;
}

main:has(#staff)  .detail-thumb-cassette .slick-track:has(> li:nth-child(13)) {
	--listCount: 13;
}

main:has(#staff)  .detail-thumb-cassette .slick-track:has(> li:nth-child(14)) {
	--listCount: 14;
}

main:has(#staff)  .detail-thumb-cassette .slick-track:has(> li:nth-child(15)) {
	--listCount: 15;
}

main:has(#staff)  .detail-thumb-cassette .slick-track:has(> li:nth-child(16)) {
	--listCount: 16;
}

main:has(#staff)  .detail-thumb-cassette .slick-track:has(> li:nth-child(17)) {
	--listCount: 17;
}

main:has(#staff)  .detail-thumb-cassette .slick-track:has(> li:nth-child(18)) {
	--listCount: 18;
    --shopMinWidth: -26px;
    --shopMaxnWidth: -23px;
}

main:has(#staff)  .detail-thumb-cassette .slick-track:has(> li:nth-child(19)) {
	--listCount: 19;
	--shopMinWidth: -24px;
    --shopMaxnWidth: -20px;
}

main:has(#staff)  .detail-thumb-cassette .slick-track:has(> li:nth-child(20)) {
	--listCount: 20;
	--shopMinWidth: -20px;
	--shopMaxnWidth: -18px;
}

main:has(#staff)  .detail-thumb-cassette .slick-track:has(> li:nth-child(21)) {
	--listCount: 21;
    --shopMinWidth: -16px;
    --shopMaxnWidth: -12px;
}

main:has(#staff) .detail-thumb-cassette .slick-track {
	scale: 1.145;
	transform-origin: 0 0;

	/* {{-- yonezawa 20251031 部屋ページslickサムネイルを調整 --}} */
	/* {{-- yonezawa 20251027 ここから上記を使用して計算する --}} */
	translate: calc(var(--listCount) * -.25 * 8px + clamp(var(--shopMinWidth), var(--viewWidth), var(--shopMaxnWidth))) 0;
}

@media screen and (max-width: 374px) {
	main:has(#staff) .detail-thumb-cassette .slick-track {
		translate: calc(var(--listCount) * -.25 * 8px - clamp(8px, var(--viewWidth), 12px)) 0;
	}
}

.room-interlock .slick-track:not(:has(.slick-cloned)) {
	margin: 20px auto 0 !important;
	transform: none !important;
	/* translate: -8px 0!important; */
	transform-origin: bottom center !important;
}

.room-interlock > .cassette .slick-slide {
	height: 275px;
	background: var(--color-grey-pale);
}

.room-interlock > .cassette .slick-slide img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.detail-thumb-cassette {
	padding-left: 16px;
}

.detail-thumb-cassette .slick-slide {
	margin: 0 4px;
	background: var(--color-grey-pale);
	/* {{-- yonezawa 20251029 店舗ページ 店舗画像のアスペクト比を調整 --}} */
	/* height: 74px; */
	/* aspect-ratio: 1 / 1; */
}

.detail-thumb-cassette .slick-slide img {
	width: 100%;
	/* height: 74px; */
	height: 100%;
	object-fit: contain;
}

.detail-thumb-cassette .slick-current {
	position: relative;
}

.detail-thumb-cassette .slick-current::after {
	position: absolute;
	width: 100%;
	height: 100%;
	border: 3px solid var(--color-housecom-blue);
	content: '';
}

.detail-thumb-cassette .cassette_prev,
.detail-thumb-cassette .cassette_next {
	display: none !important;
}

@media screen and (min-width:768px) {
	.overview > div:has(.cassette) {
		width: 320px;
	}
	.room-interlock > .cassette .slick-slide {
		height: 234px;
	}
	.detail-thumb-cassette {
		padding-left: 0;
	}
	/* {{-- yonezawa 20251029 店舗ページ 店舗画像のアスペクト比を調整 --}} */
	main:has(#staff) .detail-thumb-cassette .slick-track {
		scale: 1;
		translate: 0;
	}
	.room-interlock .slick-track:not(:has(.slick-cloned)) {
		margin: 0 auto !important;
	}
}



/* slickサムネイルの調整用（JS連動） */
:not(.over) .detail-thumb-cassette .slick-track {
	margin: 0;
}

.over .detail-thumb-cassette .slick-track {
	display: flex;
	translate: -11.5vw 0;
	width: fit-content;
}

.over .detail-thumb-cassette .slick-slide {
	float: none;
}

@media screen and (min-width: 768px) {
	.over .detail-thumb-cassette .slick-track {
		translate: 0;
	}
}



/* テーブルリスト */
.overview .detail_info {
	margin-bottom: 0;
}

.overview > .detail_info {
	margin-left: 16px;
	margin-right: 16px;
}



/* 画像がない場合
.overview:not(:has(.cassette)) .contact {
	margin: 0 calc(50% - 50vw) 16px calc(50% - 50vw);
	width: 100vw;
} */



/* 問い合わせボタンを含む場合の特別仕様 */
.overview > div:has(.contact) {
	margin-left: 16px;
	margin-right: 16px;
	width: calc(100% - 32px);
	max-width: 1024px;
}

@media screen and (min-width:375px) {
	.overview > div:has(.contact) {
		margin-left: 0;
		margin-right: 0;
	}
}

@media screen and (min-width:768px) {
	.overview > div:has(.contact),
	.overview > .detail_info {
		width: 100%;
	}
	.overview > .detail_info {
		margin-left: 0;
		margin-right: 0;
	}
}

.overview > .detail_info .map {
	padding: 0;
	width: 100%;
	overflow: hidden;
}

/* {{-- muto 2025.10.15 GoogleMapの地図表記をiframeからGoogleMapAPIを使ったものに修正 --}} */
/* .overview > .detail_info .map iframe */
.overview > .detail_info .map div:has(> .map_canvas) {
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 3;
}

@media screen and (min-width:1024px) {
	.overview > div:has(.contact) {
		margin: 0;
		width: calc(100% - 16px - 320px);
	}
	/* 画像がない場合 */
	.overview:not(:has(.cassette)) > div:has(.contact) {
		width: 100%;
	}
	.overview .detail_info {
		margin-left: 0;
		margin-right: 0;
		width: 100%;
	}
	/* .overview > .detail_info .map iframe */
	.overview > .detail_info .map div:has(> .map_canvas) {
		aspect-ratio: unset;
		height: 300px;
	}
}

.overview > .detail_info .map .map_canvas {
	width: 100%;
	height: 100%;
}

/* ストリートビューのペグマンを表示されるように */
.overview > .detail_info .map .map_canvas .gm-style img {
	max-height: unset;
}










/* =====================================================
--------------------------------------------------------
特徴
--------------------------------------------------------
===================================================== */

/* タグ */
.feature-tag {
	display: flex;
	flex-flow: row wrap;
	align-items: flex-start;
	gap: 16px;
	margin-bottom: 16px;
}

.feature-tag li {
	width: calc((100% - 16px) / 2);
	border-radius: 4px;
	border: 1px solid var(--color-grey-origin);
	background: #fff;
	font-size: 16px;
	text-align: center;
}

.feature-tag li a {
	position: relative;
	padding: 8px 8px 8px 32px;
	width: 100%;
	height: 100%;
	color: var(--color-link-text);
}

.feature-tag li a::before {
	position: absolute;
	top: 50%;
	left: 8px;
	translate: 0 -50%;
	color: var(--color-link-text);
}

@media (any-hover:hover) {
	.feature-tag li a:hover {
		opacity: 0.5;
	}
}

@media screen and (min-width:1024px) {
	.feature-tag {
		gap: 24px;
		margin-bottom: 24px;
	}
	.feature-tag li {
		width: calc((100% - 72px) / 4);
	}
	.feature-tag li a {
		padding: 16px 24px 16px 32px;
	}
}



/* アピールポイント */
.feature-appeal {
	display: flex;
	flex-flow: row wrap;
	align-items: flex-start;
	gap: 16px;
}

.feature-appeal li {
	position: relative;
	width: 100%;
	padding: 8px;
	border-radius: 4px;
	border: 1px solid var(--color-grey-origin);
	background: #fff;
}

.feature-appeal li > div:has(img) {
	float: left;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-right: 8px;
	width: 100px;
	height: 100px;
	background: var(--color-grey-pale);
}

.feature-appeal li > div:has(img) img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.feature-appeal li > p {
	overflow: hidden;
	text-align: justify;
	text-align-last: left;
	word-break: break-word;
	overflow-wrap: break-word;
}

.feature-appeal li > p::after {
	display: flow-root;
}

.feature-appeal li.show > p {
	overflow: visible;
	height: auto;
}

.feature-appeal li > p .feature-appeal_catch {
	display: block;
	margin-bottom: 8px;
	font-weight: bold;
}

.feature-appeal li > p > .feature-appeal_catch + span {
	display: inline-block;

	/* {{ yonezawa 20251007 作業リスト 米澤 No.16 }} */
	/* 店舗詳細ページ : 親要素からはみ出すテキストを修正 */
	width: 100%;
}

.feature-appeal li.show > p > .feature-appeal_catch + span {
	display: inline !important;
}

.feature-appeal li > div:has(.u--accordion-head) {
	margin-top: 8px;
	text-align: right;
}

.feature-appeal li .u--accordion-head {
	padding-right: 16px;
	color: var(--color-link-text);
}

.feature-appeal li .u--accordion-head::after {
	color: var(--color-black);
}

@media screen and (min-width:1024px) {
	.feature-appeal li {
		width: calc((100% - 32px) / 3);
		font-size: 14px;
	}
}










/* =====================================================
--------------------------------------------------------
掲載中の取り扱い物件
--------------------------------------------------------
===================================================== */

.j_widget_wrap + div {
	/* margin: 16px auto 0; */
	text-align: center;
}

.j_widget_wrap + div a {
	padding: 12px 40px 12px 16px;
}

.j_widget_wrap + div .c--link-main::before {
	right: 16px;
}

/* @media screen and (min-width:1024px) {
	.j_widget_wrap + div {
		margin-top: 24px;
	}
} */










/* =====================================================
--------------------------------------------------------
お知らせ
--------------------------------------------------------
===================================================== */

.post {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	gap: 24px 8px;
	overflow-y: scroll;
	padding: 16px;
	height: 348px;
	border-radius: 8px;
	background: #fff;
}

.post > div {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-right: 8px;
	padding: 4px;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 0 8px 4px var(--color-grey-light);
}

.post > .post_account {
	position: relative;
	padding-right: 16px;
	color: var(--color-link-text);
	font-size: 12px;
}

.post > .post_account::before {
	position: absolute;
	top: 50%;
	right: 0;
	translate: 0 -50%;
	font-family: 'icomoon';
	font-size: 10px;
	content: '\e90d';
}

.post > .post_follow {
	display: inline-flex;
	position: relative;
	padding: 4px 8px 4px 24px;
	border-radius: 4px;
	border: 2px solid var(--color-black);
	background: var(--color-black);
	color: #fff;
	font-size: 12px;
	font-weight: bold;
	text-align: center;
	transition: all 0.5s;
}

.post > .post_follow::before {
	position: absolute;
	top: 50%;
	left: 4px;
	translate: 0 -50%;
	font-family: 'icomoon';
	font-size: 16px;
	font-weight: normal;
	content: "\e932";
}

.post > ul {
	width: 100%;
}

.post > ul li {
	margin-bottom: 8px;
	padding: 24px;
	border-radius: 4px;
	background: #fff;
	border: 1px solid var(--color-grey-origin);
}

@media (any-hover:hover) {
	.post > .post_follow:hover {
	background: #fff;
	color:var(--color-black);
	}
}

@media screen and (min-width:1024px) {
	.post {
		gap: 24px 16px;
		margin: 0;
		padding: 24px;
	}
	.post > div {
		width: 100px;
		height: 100px;
	}
	.post > .post_account {
		font-size: 16px;
	}
	.post > .post_account::before {
		font-size: 12px;
	}
	.post > .post_follow {
		padding-left: 32px;
		font-size: 16px;
	}
	.post > .post_follow::before {
		font-size: 24px;
	}
	.c--flex-1-2:has(.post) div:not(:is(.post)) {
		display: flex;
		flex-flow: row wrap;
		gap: 16px 24px;
	}
}










/* =====================================================
--------------------------------------------------------
スタッフコメント
--------------------------------------------------------
===================================================== */

.staff {
	align-items: flex-start;
}

.staff li {
	/*
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	gap: 16px;
	*/
	padding: 16px;
	border-radius: 8px;
	border: 1px solid var(--color-grey-origin);
	background: #fff;

	/* {{yonezawa 20250919 レイアウト改変のため追加}} */
	--img_size: 100px;
	display: grid;
	gap: 8px;
	grid-template-columns: 1fr calc(var(--img_size) + 8px);
	grid-template-rows: calc(var(--img_size) + 8px) repeat(3, auto);
	grid-template-areas:
		"name img"
		"msg  msg"
		"more more"
		"list list";
}


/* {{yonezawa 20250919 レイアウト改変のため追加}} */
.staff li:has(.staff_catch:empty) {
	grid-template-rows: calc(var(--img_size) + 8px) auto;
	grid-template-areas:
		"name img"
		"list list";
	gap: 0;
}

.staff li:has(.u--accordion-head[style="display: none;"]):not(:has(dt)) {
	grid-template-rows: calc(var(--img_size) + 8px) auto;
	grid-template-areas:
		"name img"
		"msg msg";
	gap: 0;
}

.staff li:has(.staff_catch:empty):has(.u--accordion-head[style="display: none;"]):not(:has(dt)) {
	grid-template-rows: calc(var(--img_size) + 8px);
	grid-template-areas:
		"name img";
	gap: 0;
}

.staff li:has(.staff_catch:empty) dl,
.staff li:has(.u--accordion-head[style="display: none;"]):not(:has(dt)) .staff_catch {
	margin: 8px 0 0;
}

.staff li > dl:not(:has(dt)) {
	display: none;
}


/* 名前 */
.staff li div:has(h3) {
	display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    width: 100%;

	/* {{yonezawa 20250919 レイアウト改変のため削除}} */
    /* flex-direction: row; */
	/* justify-content: space-between; */
	/* margin-bottom: 16px; */

	/* {{yonezawa 20250919 レイアウト改変のため追加}} */
	grid-area: name;
    align-items: center;
}

.staff li h3 {
	display: flex;
	flex-direction: column;
	gap: 4px 0;
	font-size: 16px;
	font-weight: bold;

	/* {{yonezawa 20250919 レイアウト改変のため追加}} */
	width: 100%;
	white-space: nowrap;
	letter-spacing: calc(1em / 8);
	text-align: center;
}

.staff li h3 span {
	color: var(--color-grey-dark);
	font-size: 12px;
}



/* タグ */
.staff li .staff_tag {
	display: flex;
	align-items: center;
	gap: 8px;

	/* {{yonezawa 20250919 レイアウト改変のため追加}} */
	/* flex-flow: row wrap; */
	/* justify-content: flex-end; */

	/* {{yonezawa 20250919 レイアウト改変のため追加}} */
	justify-content: center;
	flex-direction: row;
	width: 100%;
}

.staff li .staff_tag span {
	padding: 4px 8px;
	background: var(--color-grey-light);

	/* {{yonezawa 20250919 レイアウト改変のため追加}} */
	text-align: center;
}

.staff li .staff_tag span:empty {
	display: none;
}



/* 画像 */
.staff li div:has(img) {
	display: flex;
	align-items: center;
	background: var(--color-grey-pale);

	/* {{yonezawa 20250919 レイアウト改変のため削除}} */
	/* float: right; */
	/* justify-content: center; */
	/* width: 100px; */
	/* height: 100px; */
	/* margin: 0 0 0 16px; */

	/* {{yonezawa 20250919 レイアウト改変のため追加}} */
	grid-area: img;
	justify-content: center;
	width: 100%;
	height: CALC(var(--img_size) + 8px);
}

.staff li div:has(img) img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}



/* コメント */
.staff li .staff_catch {
	text-align: justify;
	text-align-last: left;

	/* {{yonezawa 20250919 レイアウト改変のため削除}} */
	/* width: calc(100% - 16px - 100px); */

	/* {{yonezawa 20250919 レイアウト改変のため追加}} */
	grid-area: msg;
	word-break: break-word;
	overflow-wrap: break-word;
}

/* {{yonezawa 20250919 レイアウト改変のため削除}} */
/*
.staff li .staff_catch::after {
	display: flow-root;
}
*/

/* {{yonezawa 20250919 レイアウト改変のため追加}} */
.staff li .staff_catch:empty,
.staff li .staff_catch:empty + div:has(> .u--accordion-head) {
    display: none;
}

.staff li .staff_text {
	width: 100%;
}



/* もっと見る */
.staff li div:has(.u--accordion-head) {
	display: flex;
	flex-direction: column-reverse;
	align-items: center;
	width: 100%;

	/* {{yonezawa 20250919 レイアウト改変のため追加}} */
	grid-area: more;
}

.staff li .u--accordion-head {
	width: fit-content;
	padding-right: 24px;
	color: var(--color-link-text);

	/* {{yonezawa 20250919 レイアウト改変のため削除}} */
	/* margin: 8px 0; */
}

.staff li .u--accordion-head::after {
	color: var(--color-black);
	font-size: 16px;
}


/* 一問一答 */
.staff li dl {
	display: flex;
	flex-flow: row wrap;
	gap: 8px 16px;
	width: 100%;

	/* {{yonezawa 20250919 レイアウト改変のため追加}} */
	grid-area: list;
}

.staff li dl dt {
	width: 5em;
	color: var(--color-grey-dark);
}

.staff li dl dd {
	width: calc(100% - 16px - 5em);
}

@media screen and (min-width:1024px) {
	/* {{yonezawa 20250919 レイアウト改変のため追加}} */
	.staff li {
		--img_size: 120px;
		/* grid-template-columns: 1fr 128px; */
		/* grid-template-rows: 128px repeat(3, auto); */
	}


	/* {{yonezawa 20250919 レイアウト改変のため追加}} */
	/* .staff li:has(.staff_catch:empty) {
		grid-template-rows: 128px auto;
	} */

	/* {{yonezawa 20250919 レイアウト改変のため追加}} */
	.staff li div:has(h3) {
		flex-direction: row;
		justify-content: space-between;
	}

	.staff li h3 {
		font-size: 20px;
		align-items: center;

		/* {{yonezawa 20250919 レイアウト改変のため削除}} */
		/* flex-direction: row; */

		/* {{yonezawa 20250919 レイアウト改変のため追加}} */
		justify-content: center;
		width: 65%;
	}
	.staff li h3 span {
		font-size: 14px;

		/* {{yonezawa 20250919 レイアウト改変のため削除}} */
		/* padding-left: 16px; */
	}
	.staff li .staff_tag {
		gap: 16px;

		/* {{yonezawa 20250919 レイアウト改変のため追加}} */
		width: clamp(10em, 35%, 12em);
		flex-direction: column;
	}
	.staff li div:has(img) {

		/* {{yonezawa 20250919 レイアウト改変のため削除}} */
		/* width: 120px; */
		/* height: 120px; */

		/* {{yonezawa 20250919 レイアウト改変のため追加}} */
		height: calc(var(--img_size) + 8px);
	}
	.staff li .staff_catch {
		/* {{yonezawa 20250919 レイアウト改変のため削除}} */
		/* width: calc(100% - 16px - 120px); */
	}
	.staff li dl {
		gap: 16px;
	}
	.staff li dl dt {
		width: 100px;
	}
	.staff li dl dd {
		width: calc(100% - 16px - 100px);
	}
}










/* =====================================================
--------------------------------------------------------
リフォーム施工実績一覧
--------------------------------------------------------
===================================================== */

.reform-work > li {
	display: flex;
	flex-flow: row wrap;
	gap: 0 16px;
	justify-content: center;
	align-items: center;
	border-radius: 8px;
	border: 1px solid var(--color-grey-origin);
	background: #fff;
}

.reform-work > li > div:has(h3) {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 16px;
	width: 100%;
	border-radius: 8px 8px 0 0;
	background: var(--color-grey-light);
}

.reform-work > li h3 {
	font-weight: bold;
}

.reform-work > li h3 + span {
	margin: 0 0 0 auto;
	font-size: 12px;
}

.reform-work > li > div {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	gap: 16px;
	padding: 16px;
	width: 100%;
}

.reform-work > li > div > div {
	width: 100%;
	max-width: 340px;
}

.reform-work > li > div > div .slick-slide {
	/* 画像の背景色pale→white */
	background: var(--color-grey-pale);
	aspect-ratio: 11 / 9;
}

.reform-work > li > div > div .slick-slide img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.reform-work > li > div > dl {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	padding: 16px 0;
	width: 100%;
	max-width: 340px;
	border-radius: 0 0 8px 0;
	color: var(--color-grey-dark);
	font-size: 14px;
}

.reform-work > li > div > dl dt {
	position: relative;
	width: 4em;
}

.reform-work > li > div > dl dt::after {
	position: absolute;
	top: 50%;
	right: 0;
	translate: 0 -50%;
	content: "：";
}

.reform-work > li > div > dl dd {
	width: calc(100% - 5em);
}

@media screen and (min-width:768px) {
	.reform-work > li {
		width: calc((100% - 24px) / 2);
	}
	.reform-work > li > div > div {
		width: 160px;
		max-width: unset;
	}
	.reform-work > li > div > dl {
		width: calc(100% - 16px - 160px);
	}
}

@media screen and (min-width:1024px) {
	.reform-work > li > div > div {
		width: 220px;
	}
	.reform-work > li > div > dl {
		width: calc(100% - 16px - 220px);
		min-width: 220px;
	}
}























/* =====================================================
--------------------------------------------------------
来店・内見予約・ご相談
--------------------------------------------------------
===================================================== */

.reservation {
	margin: -32px auto 0;
	padding: 16px 0;
	width: 100%;
	max-width: 1024px;
}

main:has(.summary) .reservation {
	background: var(--color-grey-light);
}

.reservation h2 {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	padding: 16px 16px 16px 24px;
	background-color: var(--color-link-cv);
	color: #fff;
	font-size: 16px;
	font-weight: bold;
}

.reservation h2::before {
	position: absolute;
	top: 50%;
	right: 16px;
	translate: 0 -50%;
	color: #fff;
	font-size: 24px;
}

.reservation h2 span {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 50%;
	left: 16px;
	translate: 0 -50%;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #fff;
	color: var(--color-link-cv);
	font-size: 14px;
}

@media screen and (min-width:375px) {
	.reservation h2 {
		min-height: calc(50px + 32px);
		padding-left: 40px;
		font-size: 18px;
	}
	.reservation h2 span {
		width: 50px;
		height: 50px;
	}
}

.reservation > div:has(.calendar) {
	margin-bottom: 16px;
	padding: 16px 24px 24px 24px;
	border: 5px solid var(--color-link-cv);
	background: #fff;
}

.reservation > div:has(.calendar) > p {
	margin-bottom: 16px;
	font-weight: bold;
}

@media screen and (min-width:1024px) {
	.reservation {
		margin: 0 auto;
		padding: 32px 0;
	}
	.reservation h2 {
		padding: 16px;
		font-size: 24px;
	}
	.reservation h2::before {
		right: 212px;
	}
	.reservation h2 span {
		left: 212px;
	}
	.reservation > div:has(.calendar) {
		padding-top: 24px;
	}
	.reservation > div:has(.calendar) > p {
		margin-bottom: 24px;
		font-size: 18px;
		text-align: center;
	}
}



/* カレンダーのみ表示するページ用 */
main:not(:has(.summary)) .reservation {
	margin-top: 0;
}

.reservation h1 {
	margin: 0 auto 16px auto;
	padding-left: 32px;
	width: calc(100% - 16px * 2);
	font-size: 18px;
	font-weight: bold;
}

.reservation h1::before,
.reservation h1::after {
	font-size: 24px;
}

main:not(:has(.summary)) .reservation > div:has(.calendar) {
	margin: 0 auto 16px auto;
	padding: 0;
	width: calc(100% - 16px * 2);
	border: none;
}

@media screen and (min-width:768px) {
	.reservation h1,
	main:not(:has(.summary)) .reservation > div:has(.calendar) {
		width: calc(100% - 24px * 2);
	}
}

@media screen and (min-width:1024px) {
	.reservation h1 {
		padding-left: 40px;
		width: 1024px;
		font-size: 24px;
	}
	main:not(:has(.summary)) .reservation > div:has(.calendar) {
		width: 1024px;
	}
	.reservation h1::before,
	.reservation h1::after {
		font-size: 32px;
	}
	.reservation > div:has(.calendar) > p {
		text-align: left;
	}
}



/* 注意 */
.reservation_caution {
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin: 0 auto;
	padding: 0 16px 16px 16px;
	width: 100%;
	max-width: 400px;
	min-height: 128px;
	background: var(--color-housecom-blue);
	color: #fff;
}

.reservation_caution > * {
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	max-width: 664px;
}

.reservation_caution p:has(.reservation_caution_dot) {
	display: flex;
	align-items: center;
	position: relative;
	margin-bottom: 16px;
	padding-left: 32px;
	height: 24px;
	font-size: 10px;
}

.reservation_caution p:has(.reservation_caution_dot)::before {
	position: absolute;
	top: 0;
	left: 0;
	width: 24px;
	height: 24px;
	background: var(--color-grey-origin);
	content: "";
}

.reservation_caution .u--icon-attention {
	position: relative;
	margin-bottom: 8px;
	padding-left: 28px;
	font-size: 14px;
	font-weight: bold;
}

.reservation_caution .u--icon-attention::after {
	position: absolute;
	top: 50%;
	left: 0;
	translate: 0 -50%;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	margin-right: 4px;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: #fff;
	content: '';
}

.reservation_caution .u--icon-attention::before {
	z-index: 1;
	width: 24px;
	text-align: center;
	font-weight: bold;
}

.reservation_caution p:not(:has(span)) {
	font-size: 12px;
}

@media screen and (min-width:768px) {
	.reservation_caution {
		max-width: unset;
	}
}

@media screen and (min-width:1024px) {
	.reservation_caution p:has(.reservation_caution_dot) {
		font-size: 12px;
	}
	.reservation_caution p:has(.reservation_caution_dot)::before {
		margin-top: -2px;
	}
	.reservation_caution .u--icon-attention {
		font-size: 16px;
	}
	.reservation_caution p:not(:has(span)) {
		font-size: 14px;
	}
}



/* 電話 */
.reservation_tel {
	margin-left: auto;
	margin-right: auto;
	padding-left: 16px;
	padding-right: 16px;
	width: 100%;
	max-width: 1024px;
	text-align: center;
}

.reservation_tel p {
	margin-bottom: 16px;
	font-size: 16px;
	font-weight: bold;
}

.reservation_tel p span {
	display: block;
}

.reservation_tel .c--link-cv-primary {
	padding: 12px 32px 12px 48px;
	width: fit-content;
	min-width: 280px;
	font-size: 18px;
}

.reservation_tel .c--link-cv-primary span {
	font-size: 14px;
}

.reservation_tel .c--link-cv-primary::before {
	left: 16px;
	font-size: 24px;
}

@media screen and (min-width:768px) {
	.reservation_tel {
		padding-left: 24px;
		padding-right: 24px;
	}
	.reservation_tel p {
		font-size: 18px;
	}
	.reservation_tel .c--link-cv-primary {
		margin-bottom: 8px;
		padding: 0 0 0 48px;
		border: none;
		background: transparent;
		color: var(--color-link-cv);
		font-size: 32px;
	}
	.reservation_tel .c--link-cv-primary::before {
		left: 0;
		color: var(--color-link-cv);
		font-size: 32px;
	}
	.reservation_tel .c--link-cv-primary span {
		display: none;
	}
}

@media screen and (min-width:1024px) {
	.reservation_tel {
		padding-left: 0;
		padding-right: 0;
	}
}












/* =====================================================
--------------------------------------------------------
カレンダー
--------------------------------------------------------
===================================================== */

.calendar {
	display: flex;
	flex-flow: row wrap;
	gap: 0 24px;
	margin: 0 auto;
	padding: 8px 16px 16px 16px;
	width: 100%;
	max-width: 400px;
	/* min-height: 320px; */
	border-radius: 4px 4px 0 0;
	background: var(--color-housecom-blue);
	font-weight: bold;
}

.calendar > div {
	order: 2;
	padding: 16px 8px 8px 8px;
	width: 100%;
	border-radius: 4px;
	background: #fff;
}


/* {{ yonezawa 20251007 実機検証結果からの修正 }} */
/* {{ SPで表示されるポップアップのカレンダーはCSSではなくJSのみで制御するので }} */
/* {{ .todayによる表示変更についてのコードは削除 }} */
/* .calendar > div:not(:has(.today)) { */
	/* display: none; */
/* } */



/* 年と月 */
.calendar_year-month {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 16px;
	line-height: 1;
}

.calendar_month {
	font-size: 24px;
}



/* 週と日 */
.calendar_week,
.calendar_date {
	display: flex;
	flex-flow: row wrap;
	gap: 4px;
}

.calendar_week {
	margin-bottom: 8px;
}

.calendar_week > * {
	width: calc((100% - 24px) / 7);
	font-size: 12px;
	text-align: center;
}

.calendar_week > *:first-of-type {
	color: var(--color-link-cv);
}

.calendar_week > *:last-of-type {
	color: var(--color-link-text);
}

.calendar_date > * {
	display: flex;
	justify-content: center;
	align-items: center;
	width: calc((100% - 24px) / 7);
	color: var(--color-link-text);
	aspect-ratio: 1;
}



/* 1日より前、最終日より後 */
.calendar_date > *:not(.first ~ *):not(.first),
.calendar_date > *:is(.last) ~ * {
	color: transparent !important;
}




/* 今日より前（過ぎた日） */
.calendar_date:has(.today) > *:not(.today ~ *):not(.today) {
	color: var(--color-grey-origin);
}



/* 選択不可 */
.calendar_date > *:is(.disabled) {
	background: var(--color-grey-pale);
	color: var(--color-black);
}

.calendar_date:has(.today) > *:not(.today ~ *):not(.today):is(.disabled),
.calendar_date > *:not(.first ~ *):not(.first):is(.disabled),
.calendar_date > *:is(.last) ~ *:is(.disabled) {
	background: transparent;
}



/* タブ切り替え（SP） */
.calendar-tab {
	order: 1;
	display: flex;
	flex-direction: row;
	gap: 5px;
	margin-bottom: 16px;
	width: 100%;
}

.calendar-tab li {
	opacity: 0.6;
	width: 100%;
	border-bottom: 1px solid #fff;
	color: #fff;
	font-size: 18px;
	text-align: center;
	cursor: pointer;
}

.calendar-tab li.show {
	opacity: 1;
	position: relative;
	border-bottom: 2px solid #fff;
	color: #fff;
}

.calendar-tab li.show::after {
	position: absolute;
	bottom: -7px;
	left: 50%;
	translate: -50% 0;
	width: 10px;
	height: 5px;
	clip-path: polygon(0 0,100% 0%,50% 100%);
	background: #fff;
	content: '';
}

.calendar-tab li span {
	margin-left: 4px;
	font-size: 24px;
}

.cal-panel-second{
	display: none;
}

.calendar .calendar-panel[hidden] {
	 display: none;
}


@media (any-hover:hover) {
	.calendar_date > a {
		cursor: pointer;
	}
	.calendar_date > a:hover {
		background: var(--color-housecom-blue-light);
	}
	/* .calendar_date > *:not([class]):not(:not(.today ~ *)):not(:is(.last ~ *)),
	.calendar_date > *:is(.today):not(.disabled),
	.calendar_date > *:is(.last):not(.disabled),
	.calendar_date:not(:has(.today)) > *:is(.first):not(.disabled),
	.calendar_date:not(:has(.today)) > *:is(.first ~ *):not(.last ~ *):not(.disabled) {
		cursor: pointer;
	}
	.calendar_date > *:not([class]):not(:not(.today ~ *)):not(:is(.last ~ *)):hover,
	.calendar_date > *:is(.today):not(.disabled):hover,
	.calendar_date > *:is(.last):not(.disabled):hover,
	.calendar_date:not(:has(.today)) > *:is(.first):not(.disabled):hover,
	.calendar_date:not(:has(.today)) > *:is(.first ~ *):not(.last ~ *):not(.disabled):hover {
		background: var(--color-housecom-blue-light);
	} */
}

@media screen and (min-width:768px) {
	.calendar {
		padding: 32px;
		max-width: unset;
		/* min-height: 500px; */
		border-radius: 0;
	}
	.calendar > div {
		padding: 32px 24px 16px;
		width: calc((100% - 24px) / 2);
	}
	.calendar_year-month {
		margin-bottom: 24px;
	}

	/* {{ yonezawa 20251007 実機検証結果からの修正 }} */
	/* {{ SPで表示されるポップアップのカレンダーはCSSではなくJSのみで制御するので }} */
	/* {{ .todayによる表示変更についてのコードは削除 }} */
	/* .calendar > div:not(:has(.today)) { */
		/* display: block; */
	/* } */

	.calendar_month {
		font-size: 40px;
	}
	.calendar_week,
	.calendar_date {
		gap: 8px 24px;
		margin-bottom: 16px;
		font-size: 18px;
	}
	.calendar_week > *,
	.calendar_date > * {
		width: calc((100% - 144px) / 7);
	}
	.calendar-tab {
		display: none;
	}
	.cal-panel-second{
		display: block;
	}
}










/* =====================================================
--------------------------------------------------------
ぱんくず
--------------------------------------------------------
===================================================== */

main:has(.summary) .breadcrumb {
	position: relative;
	width: 100%;
	max-width: 1024px;
	background: var(--color-grey-light);
}

main:has(.summary) .breadcrumb::before {
	position: absolute;
	top: 0;
	left: 0;
	margin: 0 calc(50% - 50vw);
	width: 100vw;
	height: 100%;
	background: var(--color-grey-light);
	content: '';
}