@charset "utf-8";

/* =====================================================
--------------------------------------------------------
家と冒険LP
--------------------------------------------------------
===================================================== */

/* ページ上部 */
.head01 {
	margin-bottom: 24px;
	background: #4c4542;
}

.head01 hgroup {
	padding: 12px 0;
	color: #fff;
	font-family: "Noto Serif JP", serif;
	text-align: center;
}

.head01 hgroup h1 {
	font-size: 18px;
}

.head01 hgroup p {
	font-size: 12px;
	line-height: 2;
}

@media screen and (min-width:1024px) {
	.head01 {
		margin-bottom: 64px;
	}
	.head01 hgroup {
		padding: 24px 0;
	}
	.head01 hgroup h1 {
		margin-bottom: 8px;
		font-size: 24px;
	}
	.head01 hgroup p {
		font-size: 16px;
	}
}



/* リード文 */
.lead {
	font-size: 12px;
	text-align: center;
	line-height: 2;
}

.lead span {
	display: block;
}

@media screen and (min-width:1024px) {
	.lead {
		font-size: 16px;
	}
	.lead span {
		display: inline;
	}
}



/* 動画紹介 */
.introduction h2 {
	margin-bottom: 24px;
	font-family: "Noto Serif JP", serif;
	font-size: 12px;
	text-align: center;
}

.introduction > ul {
	display: flex;
	flex-flow: row wrap;
	gap: 12px;
	margin-bottom: 24px;
}

.introduction > ul > li {
	width: calc((100% - 12px) / 2);
}

.introduction_thumbnail {
	position: relative;
	margin-bottom: 12px;
	width: 100%;
	aspect-ratio: 111 / 73;
}

.introduction_thumbnail.room-303 {
	background: url(/img/support/ietobouken/303_thumb.jpg) no-repeat center / cover;
}

.introduction_thumbnail.room-206 {
	background: url(/img/support/ietobouken/206_thumb.jpg) no-repeat center / cover;
}

.introduction_thumbnail > div {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 2px;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 50%;
	margin: auto;
}

.introduction_thumbnail > div p {
	color: #fff;
	font-family: "Noto Serif JP", serif;
	font-size: 12px;
	text-align: center;
}

.introduction_thumbnail > div p span {
	display: block;
	font-size: 10px;
}

.introduction_detail {
	position: relative;
	padding: 12px 6px 16px;
}

.introduction_detail h3 {
	margin-bottom: 16px;
	font-family: "Noto Serif JP", serif;
	font-size: 16px;
	text-align: center;
}

.introduction_detail h3 span {
	display: block;
	margin-bottom: 4px;
	font-size: 12px;
}

.introduction_detail ul {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-bottom: 16px;
	text-align: center;
	font-size: 12px;
}

.introduction_detail p {
	margin-bottom: 16px;
	font-size: 12px;
	text-align: center;
}

.introduction_detail p span {
	display: block;
}

.introduction_detail dl {
	font-size: 10px;
}

.introduction_detail dt {
	margin-bottom: 12px;
	text-align: center;
}

.introduction_detail > span {
	display: block;
	position: absolute;
	right: -6px;
	top: 0;
	width: 1px;
	height: 100%;
	background: var(--color-black);
}

.introduction_caution {
	margin-bottom: 64px;
	padding-left: 1em;
	font-size: 12px;
	text-indent: -1em;
}

@media screen and (min-width:1024px) {
	.introduction {
		margin-bottom: 140px;
	}
	.introduction h2 {
		margin-bottom: 72px;
		font-size: 24px;
	}
	.introduction > ul {
		margin: 0 auto 64px;
		justify-content: space-between;
		width: 960px;
	}
	.introduction > ul > li {
		width: 440px;
	}
	.introduction_thumbnail {
		margin-bottom: 48px;
	}
	.introduction_thumbnail > div p {
		font-size: 24px;
	}
	.introduction_thumbnail > div p span {
		font-size: 16px;
	}
	.introduction_detail {
		padding: 0;
	}
	.introduction_detail h3 {
		display: none;
	}
	.introduction_detail > span {
		display: none;
	}
	.introduction_detail p {
		margin: 0 0 48px;
		font-size: 16px;
	}
	.introduction_detail p span {
		display: inline;
		font-size: 20px;
	}
	.introduction_detail ul {
		flex-flow: row wrap;
		justify-content: center;
		gap: 8px 22px;
		margin-bottom: 8px;
		font-size: 18px;
	}
	.introduction_detail dl {
		margin: auto;
		width: calc(100% - 64px);
		font-size: 12px;
	}
	.introduction_detail dt {
		display: flex;
		justify-content: space-between;
		align-items: center;
		text-align: left;
	}
	.introduction_detail dt::after {
		width: calc(100% - 3em);
		height: 1px;
		background: var(--color-black);
		content: '';
	}
	.introduction_detail dd {
		padding: 0;
		line-height: 1.5;
	}
	.introduction_caution {
		margin: 0 auto 120px;
		width: 900px;
		font-size: 14px;
	}
}



/* スタイル紹介 */
.introduction_style h3 {
	margin-bottom: 16px;
	font-family: "Noto Serif JP", serif;
	font-size: 16px;
	text-align: center;
}

.introduction_style h3 span {
	display: block;
	margin-bottom: 4px;
	font-size: 12px;
}

.introduction_style h4 {
	margin-bottom: 12px;
	font-family: "Noto Serif JP", serif;
	font-size: 14px;
	text-align: center;
}

.introduction_style h4 img {
	display: none;
}

.introduction_style p:not(:has(span)) {
	display: none;
}

.introduction_style div:has(img) {
	position: relative;
	margin-bottom: 12px;
}

.introduction_style div:has(img)::after {
	position: absolute;
	top: 50%;
	left: 50%;
	translate: -50% -50%;
	width: 50%;
	height: auto;
	content: '';
}

.introduction_style.brooklyn div:has(img)::after {
	background: url(/img/support/ietobouken/logo-brooklyn_white.png) no-repeat center / contain;
	aspect-ratio: 31 / 13;
	content: '';
}

.introduction_style.botanical div:has(img)::after {
	background: url(/img/support/ietobouken/logo-botanical_white.png) no-repeat center / contain;
	aspect-ratio: 3 / 1;
	content: '';
}

.introduction_style p:has(span) {
	margin-bottom: 20px;
	font-size: 12px;
	line-height: 1.6;
	text-align: center;
}

.introduction_style p:has(span) span:nth-of-type(1) {
	display: none;
}

.introduction_style p:has(span) span:nth-of-type(2) {
	display: block;
}

.introduction_feel {
	margin-bottom: 20px;
	font-family: "Noto Serif JP", serif;
	font-size: 12px;
	line-height: 2;
	text-align: center;
}

.introduction_feel span {
	display: block;
}

@media screen and (min-width:1024px) {
	.introduction_style {
		display: flex;
		flex-direction: column;
	}
	.introduction_style p:has(span) + img {
		order: 6;
	}
	.introduction_style h3 {
		order: 4;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 2px;
		margin-bottom: 16px;
		font-family: "Noto Serif JP", serif;
		font-size: 24px;
	}
	.introduction_style h3 span {
		font-size: 16px;
	}
	.introduction_style h4 {
		order: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 20px;
		margin-bottom: 40px;
		font-size: 24px;
	}
	.introduction_style h4 img {
		display: block;
	}
	.introduction_style.brooklyn h4 img {
		width: 109px;
	}
	.introduction_style.botanical h4 img {
		width: 136px;
	}
	.introduction_style p:not(:has(span)) {
		order: 2;
		display: block;
		margin-bottom: 40px;
		font-size: 15px;
		text-align: left;
	}
	.introduction_style div:has(img) {
		order: 3;
		margin-bottom: 24px;
	}
	.introduction_style div:has(img)::after {
		display: none;
	}
	.introduction_style p:has(span) {
		margin-bottom: 30px;
		order: 5;
	}
	.introduction_style p:has(span) span:nth-of-type(1) {
		display: block;
	}
	.introduction_style p:has(span) span:nth-of-type(2) {
		display: inline;
	}
	.introduction_feel {
		font-size: 18px;
		margin-bottom: 64px;
	}
	.introduction_feel span {
		display: inline;
	}
}



/* 特徴 */
.feature h2 {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 24px;
	height: 48px;
	background: url('/img/support/ietobouken/feature.png') no-repeat center / contain;
	font-family: "Noto Serif JP", serif;
	font-size: 16px;
	text-align: center;
}

.feature > p {
	margin-bottom: 32px;
	font-size: 12px;
	line-height: 2;
	text-align: center;
}

.feature > p span {
	display: block;
}

.feature h3 {
	margin-bottom: 12px;
	font-family: "Noto Serif JP", serif;
	font-size: 16px;
	text-align: center;
}

.feature h3 span {
	display: block;
	font-size: 12px;
}

.feature li {
	margin-bottom: 32px;
}

.feature_caution[class] {
	font-size: 12px;
}

@media screen and (min-width:1024px) {
	.feature {
		margin-bottom: 144px;
	}
	.feature h2 {
		height: 127px;
		font-size: 32px;
	}
	.feature h3 {
		display: none;
	}
	.feature > p {
		font-size: 16px;
	}
	.feature > p:has(+ ul) {
		margin-bottom: 56px;
	}
	.feature > p > span {
		display: inline;
	}
	.feature img {
		display: block;
		margin: auto;
	}
	.feature_caution[class] {
		font-size: 14px;
	}
}



/* エリア紹介 */
div:has( > .area-kitaayase) {
	background: #4c4542;
}

.area-kitaayase {
	padding: 24px 16px 32px;
}

.area-kitaayase hgroup {
	margin-bottom: 16px;
	color: #fff;
	font-family: "Noto Serif JP", serif;
	text-align: center;
}

.area-kitaayase hgroup h2 {
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin-bottom: 12px;
	font-size: 29px;
	line-height: 1;
}

.area-kitaayase hgroup span {
	font-size: 10px;
}

.area-kitaayase > div {
	padding: 32px 24px;
	background: #fff;
	font-family: "Noto Serif JP", serif;
}

.area-kitaayase h3 {
	margin-bottom: 16px;
	font-size: 14px;
	text-align: center;
}

.area-kitaayase > div div {
	margin-bottom: 16px;
}

.area-kitaayase p {
	font-size: 12px;
	line-height: 1.6;
}

@media screen and (min-width:1024px) {
	.area-kitaayase {
		margin-bottom: 92px;
		padding: 56px 0 104px;
	}
	.area-kitaayase hgroup {
		margin-bottom: 48px;
	}
	.area-kitaayase hgroup h2 {
		font-size: 56px;
	}
	.area-kitaayase hgroup h2 span {
		font-size: 16px;
	}
	.area-kitaayase hgroup p {
		font-size: 22px;
	}
	.area-kitaayase > div {
		position: relative;
		margin: 0 auto;
		padding: 72px 48px 64px;
		max-width: 960px;
	}
	.area-kitaayase > div::before {
		position: absolute;
		top: 0;
		right: 48px;
		padding: 16px 24px;
		background: #a78047;
		color: #fff;
		font-family: 'Century Gothic', sans-serif;
		font-size: 28px;
		letter-spacing: 0.2em;
		content: 'KITA AYASE';
	}
	.area-kitaayase h3 {
		margin-bottom: 40px;
		font-size: 24px;
		text-align: left;
	}
	.area-kitaayase > div div {
		columns: 2;
		column-gap: 32px;
		margin-bottom: 64px;
	}
	.area-kitaayase > div p {
		margin-top: 0;
		font-size: 14px;
		line-height: 2.2;
	}
	.area-kitaayase > div p:has(img),
	.area-kitaayase > div p:has(img) + p {
		margin-top: 32px;
	}
	.area-kitaayase > div p.space {
		margin-top: 1em;
	}
}



/* ライフスタイルが変わるワンルーム賃貸 */
.lifestyle h2 {
	margin-bottom: 24px;
	font-family: "Noto Serif JP", serif;
	font-size: 24px;
	text-align: center;
}

.lifestyle h2 span {
	display: block;
}

.lifestyle h2 + img {
	display: block;
	margin: 0 auto 32px;
	width: 178px;
}

.lifestyle p {
	margin-bottom: 32px;
	font-family: "Noto Serif JP", serif;
	font-size: 13px;
	text-align: center;
}

.lifestyle p span {
	display: block;
}

@media screen and (min-width:1024px) {
	.lifestyle {
		display: flex;
		flex-direction: column;
		margin-bottom: 48px;
	}
	.lifestyle h2 {
		order: 2;
		font-size: 32px;
	}
	.lifestyle h2 span {
		display: inline;
	}
	.lifestyle h2 + img {
		order: 1;
		width: 225px;
	}
	.lifestyle p {
		order: 3;
		font-size: 18px;
		line-height: 2.2;
	}
	.lifestyle > p span {
		display: inline;
	}
}



/* リンク */
.lifestyle-link {
	margin: 0 auto;
	width: 100%;
	max-width: 750px;
	background: var(--color-grey-light);
}

@media screen and (min-width:1024px) {
	.lifestyle-link {
		position: relative;
		padding: 56px 0;
		max-width: 100%;
	}
	.lifestyle-link::before,
	.lifestyle-link::after {
		display: block;
		position: absolute;
		left: 0;
		width: 100%;
		height: 120px;
		background: #fff;
		content: '';
	}
	.lifestyle-link::before {
		top: -1px;
		clip-path: polygon(0 0, 100% 0, 0 100%);
	}
	.lifestyle-link::after {
		bottom: -1px;
		clip-path: polygon(0 0, 100% 100%, 0 100%);
	}
	.lifestyle-link a {
		display: block;
		position: relative;
		z-index: 1;
		margin: 0 auto 144px;
		max-width: 960px;
	}
}