@charset "utf-8";

/* =====================================================
--------------------------------------------------------
間取り図の見方
--------------------------------------------------------
===================================================== */

/* 見出し */
hgroup:has(h1) {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 16px 0 32px;
	font-size: 16px;
	text-align: center;
}

hgroup h1 {
	padding-bottom: 8px;
	border-bottom: 1px solid #846046;
	color: #846046;
	font-size: 16px;
	font-weight: bold;
}

@media screen and (min-width:1024px) {
	hgroup:has(h1) {
		margin: 64px 0 48px;
		gap: 4px;
	}
	hgroup h1 {
		padding-bottom: 2px;
		font-size: 24px;
		font-weight: normal;
	}
}



/* 各項目のポイント */
.madori > div {
	margin: 0 auto 16px;
	width: 100%;
	text-align: center;
}

.madori ul {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.madori li {
	padding: 8px;
}

.madori_01,
.madori_03,
.madori_05,
.madori_07 {
	background: #f8f5f5;
}

.madori_02,
.madori_04,
.madori_06 {
	background: #fbf9f4;
}

.madori_other {
	border: 4px solid #f8f5f5;
}

@media screen and (min-width:1024px) {
	.madori > div {
		display: none;
	}
	.madori ul {
		position: relative;
		margin: auto;
		width: 960px;
		height: 740px;
		background: url(/img/support/mikata/madori-pc.png) no-repeat center center / contain;
	}
	.madori li {
		position: absolute;
		padding: 12px;
		background: transparent;
	}
	.madori li.madori_01 {
		top: 105px;
		left: 2px;
		width: 297px;
		height: 197px;
	}
	.madori li.madori_02 {
		top: 10px;
		left: 324px;
		width: 297px;
		height: 220px;
	}
	.madori li.madori_03 {
		top: 90px;
		right: 18px;
		width: 297px;
		height: 195px;
	}
	.madori li.madori_04 {
		bottom: 252px;
		left: 2px;
		width: 297px;
		height: 118px;
	}
	.madori li.madori_05 {
		bottom: 42px;
		left: 2px;
		width: 297px;
		height: 143px;
	}
	.madori li.madori_06 {
		bottom: 42px;
		left: 324px;
		width: 297px;
		height: 118px;
	}
	.madori li.madori_07 {
		bottom: 238px;
		right: 18px;
		width: 297px;
		height: 168px;
	}
	.madori li.madori_other {
		border: none;
		bottom: 39px;
		right: 19px;
		width: 297px;
		height: 160px;
	}
}

.madori p:has(span) {
	display: flex;
	align-items: center;
	gap: 36px;
	position: relative;
	color: #632c06;
	font-weight: bold;
}

.madori p:has(span)::before {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 28px;
	margin: auto;
	width: 20px;
	height: 20px;
	background: url(/img/support/mikata/icon01.png) no-repeat left center / contain;
	content: '';
}

.madori .madori_02 p:has(span)::before {
	background-image: url(/img/support/mikata/icon02.png);
}

.madori .madori_03 p:has(span)::before {
	background-image: url(/img/support/mikata/icon03.png);
}

.madori .madori_04 p:has(span)::before {
	background-image: url(/img/support/mikata/icon04.png);
}

.madori .madori_05 p:has(span)::before {
	background-image: url(/img/support/mikata/icon05.png);
}

.madori .madori_06 p:has(span)::before {
	background-image: url(/img/support/mikata/icon06.png);
}

.madori .madori_07 p:has(span)::before {
	background-image: url(/img/support/mikata/icon07.png);
}

.madori p span {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 24px;
	height: 24px;
	border-radius: 2px;
	background: #632c06;
	color: #fff;
	font-size: 16px;
	font-weight: normal;
	line-height: 16px;
}

.madori p:not(:has(span)) {
	color: var(--color-black);
}

.madori .madori_other > span {
	display: block;
	margin-bottom: 8px;
	color: #632c06;
	font-weight: bold;
}

@media screen and (min-width:1024px) {
	.madori p {
		margin: 0;
	}
	.madori p:has(span) {
		flex-direction: row-reverse;
		gap: 4px;
	}
	.madori p:has(span)::before {
		position: static;
		width: 24px;
		height: 24px;
	}
	.madori p span {
		display: none;
	}
	.madori p:has(span),
	.madori .madori_other p:has(+ p) {
		position: absolute;
		top: -32px;
		left: 0;
		font-weight: bold;
	}
}



/* 間取りの種類 */
hgroup:has(h2) {
	display: flex;
	flex-direction: column;
	margin-bottom: 8px;
}

hgroup .c--head02 {
	margin-bottom: 8px;
}

hgroup:has(h2) p {
	font-size: 12px;
}

.type li {
	overflow: hidden;
	border-radius: 6px;
	border: 1px solid var(--color-housecom-blue);
}

.type h3 {
	padding: 2px 0;
	background: var(--color-housecom-blue);
	color: #fff;
	font-weight: bold;
	text-align: center;
}

.type div {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 8px;
}

.type picture + p {
	color: var(--color-link-text);
}

@media screen and (min-width:1024px) {
	hgroup:has(h2) {
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-end;
		margin-bottom: 16px;
	}
	hgroup .c--head02 {
		margin-bottom: 0;
	}
	.type {
		gap: 48px;
		padding: 24px 0 0 24px;
	}
	.type li {
		overflow: visible;
		position: relative;
		padding: 24px;
		width: calc((100% - 48px) / 2);
	}
	.type h3 {
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		top: -24px;
		left: -24px;
		width: 100px;
		height: 100px;
		border-radius: 50%;
		font-size: 32px;
	}
	.type div {
		gap: 32px;
	}
	.type div > p {
		margin-left: auto;
		width: calc(100% - 72px);
	}
	.type picture {
		text-align: center;
	}
	.type picture + p {
		width: 100%;
	}
}