@charset "UTF-8";

:root{
	--color-primary: #7F716C;
	--color-primary-rgb: 127,113,108;
	--color-secondary: #674730;
	--color-secondary-rgb: 103,71,48;
	--color-contrast: #fff;
	--color-contrast-rgb: 255,255,255;
	--color-accent: #399EB3;
	--color-accent-rgb: 57,158,179;
	--color-accent-light: #82BDC9;
	--color-accent-light-rgb: 130,189,201;
	--color-accent-lighten: #B2D8DF;
	--color-accent-lighten-rgb: 178,216,223;
	--color-accent-dark: #B6CBCF;
	--color-accent-dark-rgb: 182,203,207;
	--color-txt: #595757;
	--color-txt-rgb: 89,87,87;
	--color-txt-gray: #999;
	--color-txt-gray-rgb: 153,153,153;
	--color-link: #1a1a1a;
	--color-link-rgb: 26,26,26;
	--color-bg: #E9E4DB;
	--color-bg-rgb: 233,228,219;
	--color-bg-light: #F6F3ED;
	--color-bg-light-rgb: 246,243,237;
	--color-caution: #FB4242;
	--transition-default: all 0.4s ease; 
}


/* !foundation */
/* --------------------------- */
html,body {
	-webkit-font-feature-settings: "palt" 1;
	font-feature-settings: "palt" 1;
	-webkit-font-variant-ligatures:none;
	font-variant-ligatures:none;
}
body {
	color: var(--color-txt);
	background: var(--color-contrast);
	overflow-x: hidden;
	position: relative;
	text-align: center;
}
* {
	box-sizing: border-box;
}
a,
a img {
	color: var(--color-primary);
	transition: var(--transition-default);
}
a img {
	opacity: 1;
	transform: translate3d(0, 0, 0);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
a:visited {
	color: rgba(var(--color-primary-rgb), .875);
}
a:hover {
	color: var(--color-accent);
	text-decoration: none;	
}
a:hover img {
	opacity: 0.6;
}
a.noborder {
	text-decoration: none;
}
img {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}
hr {
	border: 0;
	height: 1px;
	background-image: linear-gradient(90deg, rgba(var(--color-tertiary-rgb),0) 0%, rgba(var(--color-tertiary-rgb),1) 50%, rgba(var(--color-tertiary-rgb),0) 100%);
	margin: 5rem auto;
	clear: both;
	mix-blend-mode: multiply;
}
.btn,
.btn:visited {
	width: fit-content;
	display: block;
	text-align: center;
	text-decoration: none;
	padding: 0.625em 1.25em 0.75em;
	color: var(--color-contrast);
	background-color: var(--color-accent);
	border-radius: 100vmax;
}
.btn:hover {
	background-color: oklch(from var(--color-accent) calc(l + 0.075) c h);
	color: var(--color-contrast);
}
.btnMore {
	margin-inline: auto;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.5em;
	
	&::after {
		content: "";
		display: block;
		width: 25px;
		height: 12px;
		background: url('../imgs/icon_arrow_right.svg') center center no-repeat;
		background-size: 100% auto;
		opacity: 0.5;
		transition: opacity 0.4s ease, translate 0.4s ease;
	}
	&:hover::after {
		opacity: 1;
		translate: 0.25em 0;
	}
}
label.btn {
	transition: var(--transition-default);
	cursor: pointer;
}

/* material
--------------------------- */
.clearFloat {
	clear: both;
}
.alignleft {
	float: left;
	margin: 0.375em 1.75em 1.75em 0;
}
.alignright {
	float: right;
	margin: 0.375em 0 1.75em 1.75em;
}
.aligncenter {
	clear: both;
	display: block;
	margin: 0.375em auto;
	text-align: center!important;
}
.sp,
.checkEl,
.gNavBg {
	display: none;
}
.flexCont {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
ul[class],ol[class] {
	list-style: none;
	margin: 0 auto;
	padding: 0;
}
.clearfix:before,
.clearfix:after {
	content: " ";
	display: table;
}
.clearfix:after {
	clear: both;
}
.tate {
	-webkit-font-feature-settings: 'palt' 0;
	font-feature-settings: 'palt' 0;
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
}
/* !font */
/* --------------------------- */
.wf-zen-kaku-gothic-new-medium, body {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  font-style: normal;
}
.wf-zen-kaku-gothic-new-bold, h1, h2, h3, h4, h5, h6, strong {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  font-style: normal;
}
.wf-source-serif-b {
  font-family: "Source Serif 4", serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}
.wf-source-serif-bk, .contactTel, .pagetop, .topContTitle {
  font-family: "Source Serif 4", serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-style: normal;
}


.txtSdw {
	text-shadow: 0 0 40px rgba(var(--color-accent-rgb),.9),0 0 30px rgba(var(--color-accent-rgb),.9),0 0 20px rgba(var(--color-accent-rgb),.9),0 0 10px rgba(var(--color-accent-rgb),.9);
}
.txtSdwMin {
	text-shadow: 0 0 20px rgba(var(--color-accent-rgb),.9),0 0 15px rgba(var(--color-accent-rgb),.9),0 0 10px rgba(var(--color-accent-rgb),.9),0 0 5px rgba(var(--color-accent-rgb),.9);
}
.capsS {
	font-size: 0.8em;
}
.capsL {
	font-size: 1.5em;
}
.shadow {
	filter: drop-shadow(0 0 20px rgba(var(--color-primary-rgb), .875));
}
/* !layout */
/* --------------------------- */
.layout {
	display: grid;
	grid-template-columns: 350px 1fr;
	gap: 3.75rem;
	background-color: var(--color-bg-light);
}
main {
	width: min(946px, 100%);
	margin-inline: auto;
	padding: 7rem 0;
	justify-self: end;
}

/* !header */
/* --------------------------- */
.gHeader {
	position: sticky;
	top: 0;
	align-self: start;
	max-height: 100vh;
	overflow-y: auto;
	background-color: var(--color-contrast);
	border-radius: 0 0 30px 0;
	box-shadow: 0 0 8px 5px rgba(0,0,0,.1);
	padding: 3.5rem 3rem 5rem;
	margin-bottom: 3rem;
}
.siteTitle {
	margin: 0 0 6rem;
	
	a {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		gap: 0.875rem;
		
		.lp & {
			pointer-events: none;
		}
	}
}
ul.gNavList {
	width: fit-content;
	font-size: 1em;
	line-height: 1.125;
	text-align: left;
	margin-bottom: 2rem;
	
	li:not(:last-of-type)::after {
		content: "";
		display: block;
		width: 100%;
		height: 2px;
		background: url('../imgs/border_horizontal.png') center center no-repeat;
		background-size: 100% auto;
	}
	
	a {
		display: block;
		text-decoration: none;
		padding: 1em 0;
		color: var(--color-link);
		
		&:hover {
			background-color: var(--color-bg-light);
		}
	}
	.about & li:nth-of-type(1) a,
	.renovate & li:nth-of-type(2) a,
	.post-type-archive-works & li:nth-of-type(3) a,
	.post-type-archive-faq & li:nth-of-type(4) a,
	.other & li:nth-of-type(5) a,
	.for-builders & li:nth-of-type(6) a {
		color: var(--color-accent);
	}
}
.contactCont {
	font-size: 1.5em;
	margin: 5rem auto 0;
	
	dt {
		font-size: 0.75em;
		line-height: 1;
		font-weight: 700;
		color: var(--color-accent);
		margin: 0 auto 1em;
	}
	dd {
		margin: 0 auto;
	}
	.contactTel {
		width: fit-content;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 1.875em;
		line-height: 1;
		margin: 0 auto 0.4em;
		text-decoration: none;
		color: var(--color-accent);
		gap: 0.25em;
		position: relative;
		
		img {
			width: 0.8em;
		}
		
		&:hover img {
			opacity: 1;
		}
		&::before {
			content: "";
			display: block;
			width: calc(100% + 1em);
			height: calc(100% + 0.5em);
			position: absolute;
			top: 50%;
			left: 50%;
			translate: -50% -50%;
			background-color: rgba(var(--color-primary-rgb), 0);
			border-radius: 3em;
			transition: background-color 0.3s ease;
			z-index: -1;
		}
		&:hover::before {
			background-color: var(--color-bg-light);
		}
	}
	.contactMail {
		width: fit-content;
		margin: 0 auto;
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 0.75em;
		font-size: 0.875rem;
		line-height: 1.125;
		color: var(--color-accent);
		text-decoration: none;
		border: solid 1px var(--color-accent-dark);
		border-radius: 100vmax;
		padding: 0.75em 2em;
		background-color: rgba(var(--color-accent-lighten-rgb), .125);
		
		&:hover {
			border-color: var(--color-accent);
			background-color: rgba(var(--color-accent-lighten-rgb), .25);
			
			& img {
				opacity: 1;
			}
		}
	}
	.gNav & {
		font-size: 1em;
		margin-top: 0;
	}
}

/* !footer */
/* --------------------------- */
.gFooter {
	background: var(--color-primary);
	color: var(--color-contrast);
	padding: 4rem 1.25rem 1.5rem 4rem;
}
.footerTitle {
	margin: 0 auto 3.375rem;
	text-align: left;
	
	a {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		gap: 1.125rem;
		
		.lp & {
			pointer-events: none;
		}
	}
}
ul.footerNavList {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 1.875rem;
	margin: 0 0 1.875em;
	font-size: 1em;
	line-height: 1;
	
	a {
		text-decoration: none;
		color: var(--color-contrast);
		position: relative;
		
		&::before {
			content: "";
			display: block;
			width: calc(100% + 1.5em);
			height: calc(100% + 0.5em);
			background-color: rgba(var(--color-contrast-rgb), 0);
			border-radius: 100vmax;
			position: absolute;
			top: 50%;
			left: 50%;
			translate: -50% -50%;
			transition: background-color 0.3s ease;
		}
		&:hover::before {
			background-color: rgba(var(--color-contrast-rgb), .1);
		}
	}
}
.copyright {
	display: block;
	text-align: right;
	font-size: 0.75em;
	letter-spacing: 0.1em;
}
ul.txtNav {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	font-size: 0.75em;
	margin: 2em 2em 6em;
	
	li {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	a {
		display: block;
		padding: 0 1em;
		text-decoration: none;
	}
	li:not(:last-of-type)::after {
		content: "";
		display: block;
		width: 1px;
		height: 1em;
		background-color: rgba(var(--color-primary-rgb),.5);
	}
	
	.gFooter & {
		justify-content: flex-start;
		margin: 0 0 3em -1em;
		
		a {
			color: var(--color-contrast);
		}
		li:not(:last-of-type)::after {
			background-color: rgba(var(--color-contrast-rgb),.5);
		}
	}
	
	.gNav & {
		display: none;
	}
	
	main & {
		position: absolute;
		top: 0;
		right: 0;
	}
}
.pagetop {
	position: fixed;
	right: 2rem;
	bottom: 3rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	font-size: 1.125em;
	line-height: 1.25;
	width: 6em;
	height: 6em;
	background-color: var(--color-accent);
	color: var(--color-contrast);
	text-decoration: none;
	border-radius: 50%;
	box-shadow: 0 4px 4px 0 rgba(0,0,0,.25);
	z-index: 1000;
	
	&:hover {
		color: var(--color-contrast);
		translate: 0 2px;
		box-shadow: 0 2px 2px 0 rgba(0,0,0,.5);
	}
}

.invisible {
	opacity: 0;
	translate: 0 3rem;
}
.visible {
	opacity: 1;
	transition: opacity 0.6s ease 0.2s, translate 0.6s ease;
	translate: 0 0;
}

/* !top */
/* --------------------------- */
.home .layout {
	background-color: transparent;
}
.home main {
	position: relative;
	width: 100%;
	
	&::before {
		content: "";
		display: block;
		width: 90vw;
		height: auto;
		aspect-ratio: 1030 / 750;
		background-color: var(--color-bg-light);
		z-index: -10;
		position: absolute;
		top: 0;
		right: 0;
		pointer-events: none;
		border-radius: 0 0 0 6rem;
	}
}
.heroImg {
	position: relative;
	width: 100%;
	height: auto;
	aspect-ratio: 1030 / 750;
	display: flex;
	justify-content: flex-end;
	align-items: flex-end;
	margin: 0 0 max(8rem, 10vw) auto;
	padding: 0 3rem 6.375rem;
	border-radius: 3rem 0 0 3rem;
	overflow: hidden;
	
	&::before, &::after {
		content: "";
		display: block;
		width: 100%;
		height: 100%;
		pointer-events: none;
		position: absolute;
		top: 0;
		left: 0;
		background-image: url('../imgs/top_hero_img.jpg');
		background-position: 0 0;
		background-repeat: no-repeat;
		background-size: cover;
		z-index: -5;
		opacity: 0;
		transition: opacity 2.0s ease;
	}
	.loaded &::before, .loaded &::after {
		opacity: 1;
		filter: blur(0);
	}
	&::after {
		background-image: url('../imgs/top_hero_bubble.png');
		z-index: -1;
		filter: blur(16px);
		transition: opacity 2.0s ease 1.4s, filter 2.0s ease 1.8s;
	}
	
	.lp & {
		border-radius: 3rem;
	}
	
	.lp &::before, &::after {
		z-index: 1;
	}
}
.heroCatch {
	margin: 0;
	line-height: 1;
	opacity: 0;
	translate: 3rem 0;
	transition: opacity 0.8s ease 2.4s, translate 0.8s ease 2.4s;
	
	.loaded & {
		opacity: 1;
		translate: 0 0;
	}
	
	.lp & {
		position: relative;
		z-index: 10;
	}
}
.topIntro {
	width: min(1090px, 100%);
	margin: 0 auto;
	color: var(--color-accent);
	padding: 10rem 0 5rem;
	position: relative;
	
	img {
		aspect-ratio: 1 / 1;
		border-radius: 50%;
		position: absolute;
		top: 0;
		left: 50%;
		
		&.topIntroImg01 {
			width: 16.4%;
			translate: -130% -50%;
		}
		
		&.topIntroImg02 {
			width: 22.8%;
			translate: -190% 0%;
		}
		
		&.topIntroImg03 {
			width: 30.3%;
			translate: 75% 25%;
		}
	}
}
.topIntroTitle {
	margin: 0 auto 0.6em;
	font-size: 2.25em;
	line-height: 1.5;
	font-weight: 500;
}
.topIntroTxt {
	font-size: 1em;
	line-height: 1.875;
	margin: 0 auto;
}
.topContWrap {
	position: relative;
	padding: 12rem 0 7.5rem;
	
	&::before, &::after {
		content: "";
		display: block;
		width: 100%;
		position: absolute;
		top: 0;
		right: 0;
		z-index: -2;
	}
	&::before {
		content: "";
		display: block;
		width: 90vw;
		height: calc(100% + 15rem);
		background-color: var(--color-bg-light);
		z-index: -4;
		pointer-events: none;
		border-radius: 6rem 0 0 6rem;
	}
	&::after {
		width: 100%;
		height: auto;
		aspect-ratio: 1116 / 302;
		background: url('../imgs/top_cont_bubble.svg') 0 0 no-repeat;
		background-size: 100% auto;
		translate: 3rem -50%;
	}
}
.topCont {
	width: min(925px, 90%);
	position: relative;
	margin: 0 auto 3rem;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 3rem;
	padding: 0 3rem 3rem;
	
	&::before {
		content: "";
		display: block;
		width: 100%;
		height: 75%;
		background-color: var(--color-bg);
		position: absolute;
		right: 0;
		bottom: 0;
		border-radius: 1.875rem;
		z-index: -1;
	}
	
	&:last-of-type {
		flex-direction: row-reverse;
	}
}
.topContBody {
	color: var(--color-primary);
	width: 100%;
}
.topContTitle {
	font-size: 1.5em;
	line-height: 1;
	text-align: left;
	margin: 0 0 0.5em;
}
.topContTxt {
	font-size: clamp(0.75em, 1.25cqw, 1.25em);
	line-height: 1.7;
	text-align: left;
	margin: 0 0 1em;
}
.topContImg {
	max-width: 45%;
	box-shadow: 4px 4px 4px rgba(0,0,0,.1);
	border-radius: 1.25rem;
	overflow: hidden;
	border: solid var(--color-contrast) 0.75rem;
	
	img {
		width: 100%;
	}
}
.topNews {
	position: relative;
	background-color: var(--color-accent-light);
	border-radius: 2.5rem 0 0 0;
	padding: 6.75rem 0 7rem;
	margin: 0 auto 4.5rem;
	color: var(--color-contrast);
	
	&::after {
		content: "";
		display: block;
		width: 111%;
		height: auto;
		aspect-ratio: 1209 / 337;
		background: url('../imgs/top_news_bubble.svg') 0 0 no-repeat;
		background-size: cover;
		position: absolute;
		bottom: 0;
		left: 0;
		translate: -5% 50%;
		pointer-events: none;
		z-index: 10;
	}
}
.topNewsTitle {
	width: fit-content;
	font-size: 1.5em;
	line-height: 1;
	letter-spacing: 0.15em;
	text-indent: 0.15em;
	font-weight: 500;
	margin: 0 auto 1em;
	
	&::after {
		content: "";
		display: block;
		width: 100%;
		height: auto;
		aspect-ratio: 220 / 8;
		background: url('../imgs/border_news.png') center center no-repeat;
		background-size: 100% auto;
		margin-top: 0.75rem;
	}
}
ul.newsList {
	width: fit-content;
	max-width: 30em;
	font-size: 1em;
	line-height: 1.375;
	text-align: left;
	letter-spacing: -0.04em;
	margin: 0 auto 2em;
	
	li {
		display: grid;
		grid-template-columns: 5em 1fr;
		gap: 1em;
		margin-bottom: 0.75em;
		position: relative;
		
		&::before {
			content: "";
			display: block;
			width: calc(100% + 1.5em);
			height: calc(100% + 0.625em);
			background-color: oklch(from var(--color-accent) calc(l + 0.075) c h);
			position: absolute;
			top: 0;
			left: 0;
			z-index: 1;
			pointer-events: none;
			opacity: 0;
			translate: -0.75em -0.3125em;
			border-radius: 0.25em;
			transition: opacity 0.4s ease;
		}
		&:has(a:hover)::before {
			opacity: 1;
		}
	}
	time {
		position: relative;
		letter-spacing: 0.06em;
		z-index: 10;
	}
	a {
		position: relative;
		z-index: 10;
		display: block;
		color: var(--color-contrast);
		text-decoration: none;
	}
	.content & a {
		color: var(--color-accent);
		
		&:hover {
			color: var(--color-contrast);
		}
	}
}
.topWorks {
	padding: 0 2rem;
	margin: 0 auto 7.5rem;
	color: var(--color-accent);
}
.topWorksTitle {
	position: relative;
	z-index: 20;
	font-size: 1.5em;
	line-height: 1.5;
	letter-spacing: 0.19em;
	text-indent: 0.19em;
	margin: 0 auto 2em;
	
	.wf-source-serif-b {
		font-size: 2em;
		letter-spacing: 0.03em;
		text-indent: 0.03em;
	}
}
.worksWrap {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2.375rem 4.5rem;
	margin: 0 auto 2rem;
	
	.content & {
		margin: 4.5rem auto;
	}
}
.worksItem {
}
.worksItemTitle {
	font-size: 1.125em;
	line-height: 1.25;
	font-weight: 500;
	margin: 0 auto 1em;
	color: var(--color-accent);
}
.worksItemImg {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
	
	figure {
		margin: 0;
		
		img {
			width: 100%;
			border-radius: 1.25rem;
		}
		
		&.worksAfter::after {
			content: "";
			display: block;
			width: 33px;
			height: 24px;
			background: url('../imgs/icon_point.png') center center no-repeat;
			background-size: 100% auto;
			position: absolute;
			top: 0;
			right: 0;
			translate: 25% -100%;
		}
	}
	figcaption {
		margin: 0 auto;
		height: 3rem;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		
		.worksBefore & {
			font-size: 1em;
			line-height: 1;
			color: var(--color-txt-gray);
		}
		
		.worksAfter & {
			width: fit-content;
			font-size: 1.5em;
			line-height: 1;
			font-weight: 900;
			
			&::after {
				content: "";
				display: block;
				width: 120%;
				height: auto;
				aspect-ratio: 130 / 8;
				background: url('../imgs/border_after.png') center center no-repeat;
				background-size: 100% auto;
				margin-top: 0.375rem;
			}
		}
	}
}
.topOthersWrap {
	padding: 0 2rem;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25rem;
	margin: 0 auto 9rem;
}
.topOthers:nth-of-type(even) {
	translate: 0 3.5rem;
}
.topOthers a {
	display: block;
	background-color: var(--color-accent-lighten);
	border-radius: 5.625rem;
	overflow: hidden;
	padding-top: 3.5rem;
	text-decoration: none;
	position: relative;
	
	&:hover {
		background-color: oklch(from var(--color-accent-lighten) calc(l + 0.015) c h);
	}
}
.topOthersTitle {
	font-size: 1.25em;
	line-height: 1;
	letter-spacing: 0.05em;
	text-indent: 0.05em;
	color: var(--color-contrast);
	margin: 0 auto 0.7em;
}
.topOthersTxt {
	font-size: 0.875em;
	line-height: 1.715;
	margin: 0 auto 1.5em;
}
.topOthersImg {
	overflow: hidden;
	
	img {
		width: 100%;
	}
	a:hover & img {
		opacity: 1;
		scale: 1.1;
	}
}

/* !lower */
/* --------------------------- */
.pageTitile {
	color: var(--color-accent);
	font-size: 1.5em;
	line-height: 1;
	letter-spacing: 0.1em;
	text-indent: 0.1em;
	margin: 0 auto 2.5em;
	
	.wf-source-serif-b {
		font-size: 2em;
		display: block;
		letter-spacing: 0.03em;
		text-indent: 0.03em;
		margin-bottom: 0.6em;
	}
	
	&::before {
		content: "";
		display: block;
		width: 100%;
		height: auto;
		aspect-ratio: 974 / 14;
		background: url('../imgs/page_heading_border.png') center center no-repeat;
		background-size: 100% auto;
		margin-bottom: 3.5em;
	}
	
	.lp &::before {
		display: none;
	}
}
.pageIntro {
	margin: 0 auto 4.5rem;
}
.pageIntroImg {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.875rem;
	margin-bottom: 4rem;
	
	img {
		width: 100%;
		border-radius: 1.25rem;
	}
}
.pageIntroTitle {
	margin: 0 auto 1em;
	font-size: 2em;
	line-height: 1.6875;
	font-weight: 500;
	color: var(--color-accent);
}
.pageIntroTxt {
	font-size: 1em;
	line-height: 1.875;
	margin: 0 auto;
	color: var(--color-primary);
}
.content {
	padding: 4.5rem 0;
}

/* !about */
/* --------------------------- */
.aboutCont {
	background-color: var(--color-accent-light);
	border-radius: 1.25rem;
	margin: 0 auto 7rem;
	padding: 4.5rem 7.75rem;
	color: var(--color-contrast);
	
	.pageIntroTitle,
	.pageIntroTxt {
		color: var(--color-contrast);
	}
	.pageIntroTxt,.pageIntroImg {
		margin-bottom: 2.625rem;
	}
}
.aboutContName {
	font-size: 0.9375em;
	line-height: 1.75;
	margin: 0 auto;
	
	b {
		font-size: 1.333em;
		font-weight: 500;
	}
}
.aboutPoint {
	margin: 0 auto 4.5rem;
}
ol.aboutPointList {
	position: relative;
	counter-reset: aboutNum;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2rem;
	margin: 3rem auto 3rem;
	
	li {
		counter-increment: aboutNum;
		position: relative;
		
		&::before {
			font-family: "Source Serif 4", serif;
			font-size: 3em;
			line-height: 1;
			font-weight: 700;
			color: var(--color-accent);
			content: counter(aboutNum, decimal-leading-zero);
			display: flex;
			justify-content: center;
			align-items: center;
			width: 2em;
			height: 2em;
			background-color: var(--color-contrast);
			border-radius: 50%;
			margin: 0 auto 0.25em;
		}
		
		&:not(:last-of-type)::after {
			content: "";
			position: absolute;
			top: 3rem;
			right: -1rem;
			width: 4px;
			height: 54px;
			background: url('../imgs/border_vertical.png') center center no-repeat;
			background-size: auto 100%;
			translate: -50% -50%;
		}
		
		h3 {
			font-size: min(1.375vw, 20px);
			line-height: 1.5;
			font-weight: 500;
			margin: 0 auto 0.3em;
			color: var(--color-accent);
		}
		
		p {
			font-size: clamp(10px, 0.875vw, 14px);
			line-height: 1.75;
			margin: 0;
			color: var(--color-primary);
		}
	}
}

/* !renovate */
/* --------------------------- */
.renovateDetailWrap {
	margin: 4.5rem auto 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 3.125rem;
}
.renovateDetail {
	container-type: inline-size;
}
.renovateDetailTitle {
	font-size: clamp(12px, 7.625cqi, 22px);
	line-height: 1;
	text-align: left;
	font-weight: 500;
	color: var(--color-accent);
	margin: 0 auto 0.625em;
}
.renovateDetailCat {
	display: block;
	width: fit-content;
	margin: 0.625em auto 0 0;
	font-size: 0.5454em;
	background-color: var(--color-contrast);
	padding: 0.5em 0.625em;
	border: solid 1px #d9d9d9;
	border-radius: 0.5em;
}
.renovateDetailImg {
	display: block;
	width: 100%;
	margin: 0 auto 0.75rem;
	border-radius: 1.25rem;
}
.renovateDetailTxt {
	font-size: clamp(10px, 5cqi, 14px);
	line-height: 1.64;
	text-align: justify;
	color: var(--color-primary);
	margin: 0;
}
ul.renovatePoint {
	container-type: inline-size;
	margin: 4.5rem auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 1.5em 2.5em;
	font-size: 1.25em;
	line-height: 1;
	font-weight: 700;
	
	li {
		color: var(--color-accent-light);
		min-width: 14em;
		background-color: var(--color-contrast);
		padding: 1.375em 0;
		border-radius: 100vmax;
		border: solid 1px var(--color-accent-dark);
	}
}

.wp-pagenavi {
	margin: 4.5rem auto 4.5rem;
	font-size: 0.875em;
	line-height: 1;
	font-weight: 700;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.5em;
	
	.page, .current, .previouspostslink, .nextpostslink {
		color: var(--color-txt-gray);
		background-color: var(--color-contrast);
		display: flex;
		justify-content: center;
		align-items: center;
		width: 2em;
		height: 2.875em;
		text-decoration: none;
		padding-bottom: 0.125em;
		
		&:hover {
			background-color: var(--color-accent-dark);
			color: var(--color-contrast);
		}
	}
	.current {
		background-color: var(--color-accent-dark);
		color: var(--color-contrast);
	}
	.previouspostslink {
		margin-right: 1em;
	}
	.nextpostslink {
		margin-left: 1em;
	}
}

/* !faq */
/* --------------------------- */
.faqCont {
	position: relative;
	background-color: var(--color-accent-light);
	border-radius: 1.25rem;
	padding: 3rem 2.625rem;
	margin: 0 auto 4.5rem;
	display: grid;
	gap: 1.5rem;
}
.faqItem {
	background: var(--color-contrast);
	border-radius: 0.875rem;
	padding: 1.25rem;
}
.faqItemTitle {
	position: relative;
	margin: 0 0 0.625em;
	padding-bottom: 1em;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 1.25rem;
	font-size: 1em;
	line-height: 1.25;
	text-align: left;
	font-weight: 500;
	color: var(--color-primary);
	
	&::before {
		content: "Q";
		flex-shrink: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 1.5em;
		font-family: "Source Serif 4", serif;
		font-optical-sizing: auto;
		font-weight: 900;
		color: var(--color-contrast);
		width: 2em;
		height: 2em;
		background-color: #d6d6d6;
		border-radius: 50%;
	}
	
	&::after {
		content: "";
		display: block;
		width: 100%;
		height: auto;
		aspect-ratio: 844 / 3;
		background: url('../imgs/faq_border.png') center center no-repeat;
		background-size: 100% auto;
		position: absolute;
		bottom: 0;
		left: 0;
	}
}
.faqItemBody {
	display: grid;
	grid-template-columns: 3rem 1fr;
	gap: 1.25rem;
	align-items: center;
	position: relative;
	&::before {
		content: "A";
		font-size: 3em;
		line-height: 1;
		text-align: center;
		font-family: "Source Serif 4", serif;
		font-optical-sizing: auto;
		font-weight: 900;
		color: var(--color-accent-light);
		width: 1em;
		height: 1em;
	}
	
	p {
		font-size: 1em;
		line-height: 1.625;
		text-align: justify;
		font-weight: 700;
		color: var(--color-accent);
		margin: 0;
	}
}

/* !other */
/* --------------------------- */
.otherServiceWrap {
	margin: 3rem auto 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2.8125rem;
	container-type: inline-size;
}
.otherService {
	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 4;
	gap: 1rem;
}
.otherServiceTitle {
	font-size: clamp(12px, 2.25cqw, 22px);
	line-height: 1;
	text-align: left;
	font-weight: 500;
	color: var(--color-accent);
	margin: 0 auto 0 0;
}
.otherServiceImg {
	display: block;
	width: 100%;
	margin: 0 auto 0.75rem;
	border-radius: 1.25rem;
}
.otherServiceTxt {
	font-size: clamp(10px, 1.5cqw, 15px);
	line-height: 1.64;
	text-align: justify;
	color: var(--color-primary);
	margin: 0;
}
ul.otherServiceList {
	font-size: clamp(10px, 1.375cqw, 14px);
	line-height: 1.25;
	text-align: left;
	color: var(--color-primary);
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: flex-start;
	align-content: start;
	gap: 0.5em 1em;
	background-color: var(--color-contrast);
	border-radius: 0.75rem;
	padding: 1em;
	
	li {
		margin: 0;
		
		&::before {
			content: "";
			display: inline-block;
			width: 1em;
			height: 1em;
			background-color: var(--color-accent-light);
			border-radius: 50%;
			vertical-align: -0.175em;
			margin-right: 0.125em;
		}
	}
}

/* !for-builders */
/* --------------------------- */
.featuresContWrap {
	counter-reset: featuresNum;
	
	&::before {
		content: "";
		display: block;
		width: 100%;
		height: auto;
		aspect-ratio: 966 / 3;
		background: url('../imgs/features_border.png') center center no-repeat;
		background-size: 100% auto;
		margin-bottom: 2rem;
	}
}
.featuresCont {
	margin: 0 0 2rem;
	counter-increment: featuresNum;
	position: relative;
	
	&::before {
		content: counter(featuresNum, decimal-leading-zero);
		font-size: 8em;
		line-height: 1;
		position: absolute;
		top: 50%;
		left: 0.375em;
		translate: 0 calc(-50% - 0.1375em);
		color: var(--color-accent-lighten);
		font-family: "Source Serif 4", serif;
		font-optical-sizing: auto;
		font-weight: 300;
		font-style: normal;
		pointer-events: none;
	}
	
	&::after {
		content: "";
		display: block;
		width: 100%;
		height: auto;
		aspect-ratio: 966 / 3;
		background: url('../imgs/features_border.png') center center no-repeat;
		background-size: 100% auto;
		margin-top: 2rem;
	}
}
.featuresTitle {
	font-size: 1.75em;
	line-height: 1.25;
	text-align: left;
	color: var(--color-accent);
	margin: 0 0 0.5em 14.5rem;
}
.featuresTxt {
	font-size: 1em;
	line-height: 1.4375;
	text-align: left;
	color: var(--color-primary);
	margin: 0 0 0 14.5rem;
}
ul.checkList {
	margin: 2em auto;
	width: fit-content;
	font-size: 1.75em;
	line-height: 1.25;
	text-align: left;
	color: var(--color-primary);
	
	li {
		margin-bottom: 0.75em;
		padding-left: 1.75em;
		position: relative;
		
		&::before {
			content: "";
			display: block;
			width: 1em;
			height: 1em;
			border: solid 1px rgba(var(--color-primary-rgb), .5);
			background: var(--color-contrast);
			position: absolute;
			top: 50%;
			left: 0;
			translate: 0 -50%;
		}
		&::after {
			content: "";
			display: block;
			width: 0.75em;
			height: 0.4375em;
			border-bottom: solid 6px var(--color-accent);
			border-left: solid 6px var(--color-accent);
			position: absolute;
			top: 50%;
			left: 0.25em;
			translate: 0 -80%;
			rotate: -45deg;
		}
	}
}
/* !company */
/* --------------------------- */
.companyPorfile {
	width: fit-content;
	margin: 4.5rem auto;
	display: grid;
	grid-template-columns: auto 1fr;
	font-size: 1.125em;
	line-height: 1.25;
	
	dt, dd {
		margin: 0;
		padding-top: 1em;
		padding-bottom: 1em;
		border-bottom: solid 1px rgba(var(--color-primary-rgb), .25);
	}
	dt {
		color: var(--color-accent);
		padding-right: 3em;
		padding-left: 3em;
		white-space: nowrap;
		letter-spacing: 0.04em;
		text-indent: 0.04em;
	}
	dd {
		text-align: left;
		padding-right: 3em;
		color: var(--color-primary);
	}
}
.companyAddress {
	font-size: 1.125em;
	line-height: 1.25;
	margin: 3rem auto;
	color: var(--color-primary);
}
.mapWrap iframe {
	max-width: 100%;
}

/* !sitemap */
/* --------------------------- */
ul.sitemapList {
	width: fit-content;
	font-size: 1.125em;
	line-height: 1.25;
	text-align: left;
	
	li {
		border-bottom: solid 1px rgba(var(--color-primary-rgb), .25);
		
		a {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			gap: 0.5em;
			padding: 1em 1em 1em 0.5em;
			text-decoration: none;
			
			&::before {
				content: "";
				display: block;
				width: 0.5em;
				height: 0.5em;
				border-right: solid 3px var(--color-accent);
				border-bottom: solid 3px var(--color-accent);
				rotate: -45deg;
				transition: translate 0.4s ease;
			}
			&:hover::before {
				translate: 0.2em 0;
			}
		}
	}
}

/* !privacy */
/* --------------------------- */
.privacyWrap {
	width: min(700px, 85vw);
	margin-inline: auto;
}
.privacyTxt {
	font-size: 1em;
	line-height: 1.875;
	text-align: justify;
	color: var(--color-primary);
	margin: 0 0 1.5em;
	
	&.name {
		text-align: right;
	}
}


/* !contact */
/* --------------------------- */
.contactForm {
	width: min(788px, 85vw);
	margin: 0 auto 3rem;
}
.formItem {
	display: grid;
	grid-template-columns: 14em 1fr;
	margin-bottom: 1rem;
	font-size: 1em;
	line-height: 1.375;
}
.formLabel {
	width: 100%;
	min-height: 2em;
	display: grid;
	grid-template-columns: 3em 1fr;
	align-items: center;
	align-self: start;
	color: var(--color-accent);
	
	.required {
		display: block;
		margin-right: auto;
		font-size: 0.875em;
		line-height: 1;
		letter-spacing: 0.05em;
		text-indent: 0.05em;
		background-color: var(--color-caution);
		color: var(--color-contrast);
		padding: 0.375em 0.5em 0.4375em;
		border-radius: 0.25em;
	}
}
.formBody {
	color: var(--color-primary);
	text-align: left;
	
	input[type=text], input[type=email], input[type=tel], textarea {
		background-color: var(--color-contrast);
		border: solid 1px rgba(var(--color-txt-gray-rgb), .5);
		padding: 0.5em;
		border-radius: 0.625em;
		width: 100%;
		
		&.p-postal-code {
			width: 12em;
		}
	}
	
	textarea {
		height: 16em;
	}
	
	&.radioLabel label {
		display: block;
		padding: 0.375em;
	}
	
	&.formGrid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 1.5rem;
		
		span.nameLabel {
			display: inline-block;
			width: 2em;
			font-size: 0.875em;
			text-align: center;
			margin-right: 0.5em;
		}
		
		input[type=text] {
			width: calc(100% - 2.25rem);
		}
	}
}
.formButtons button {
	outline: none;
	cursor: pointer;
	border: none;
}
.wpcf7-response-output {
	padding: 1em;
	border-radius: 0.5em;
}


.postCont {
	margin: 0 auto 4.5rem;
}
.postHeader {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: var(--color-accent);
	padding: 1rem 1.375rem 1rem;
	margin: 0 0 2rem;
	
	&::before,&::after {
		content: "";
		display: block;
		width: 100%;
		height: auto;
		aspect-ratio: 966 / 3;
		background: url('../imgs/features_border.png') center center no-repeat;
		background-size: 100% auto;
		position: absolute;
		left: 0;
	}
	&::before {
		top: 0;
	}
	&::after {
		bottom: 0;
	}
}
.postTitle {
	font-size: 2em;
	line-height: 1.25;
	text-align: left;
	font-weight: 600;
	margin: 0;
}
.postInfo {
	background-color: var(--color-contrast);
	padding: 0.5em 0.75em;
	color: var(--color-primary);
	border-radius: 100vmax;
}
.postBody {
	position: relative;
	padding: 0 1.5rem 3rem;
	margin: 0 auto 3rem;
	line-height: 1.625;
	text-align: left;
	
	&::after {
		content: "";
		display: block;
		width: 100%;
		height: auto;
		aspect-ratio: 966 / 3;
		background: url('../imgs/features_border.png') center center no-repeat;
		background-size: 100% auto;
		position: absolute;
		left: 0;
		bottom: 0;
	}
}
.postNav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
	
	.gotoList {
		position: absolute;
		top: 50%;
		left: 50%;
		translate: -50% -50%;
	}
	
	a[rel=next] {
		margin-left: auto;
	}
}

/* !sp */
/* --------------------------- */
@media screen and (max-width:768px) {
	/* !sp common */
	/* --------------------------- */
	.floatLeft,
	.floatRight,
	.alignleft,
	.alignright {
		display: block;
		text-align: center;
		float: none;
		margin: 16px auto;
	}
	.nosp {
		display: none;
	}
	.sp {
		display: block;
	}
	.flexCont {
		display: block;
	}
	/* !sp layout */
	/* --------------------------- */
	html {
		font-size: clamp(14px, 3.8vw, 18px);
	}
	.layout {
		display: grid;
		grid-template-columns: 1fr;
		gap: 0;
	}
	main {
		max-width: 100vw;
		overflow-x: hidden;
		padding: 6rem 1.5rem 4.5rem;
		
		ul.txtNav {
			display: none;
		}
	}
	/* !sp header */
	/* --------------------------- */
	.gHeader {
		position: fixed;
		padding: 0 0.75rem;
		width: 100%;
		border-radius: 0;
		z-index: 2000;
		height: 3.5rem;
	}
	.siteTitle {
		font-size: 0.875em;
		line-height: 2;
		margin: auto 0;
		height: 100%;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	.siteTitle a {
		gap: 0.5rem;
		
		.sitelogo {
			width: auto;
			height: 2.75rem;
		}
	}
	.siteTitle .sitelogo {
		max-width: 25%;
	}
	.toggle {
		position: fixed;
		top: 0;
		right: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		gap: 0.5rem;
		width: 3.5rem;
		height: 3.5rem;
		background-color: var(--color-primary);
		cursor: pointer;
		z-index: 2100;
		
		.lp & {
			display: none;
		}
	}
	.toggle .bar {
		width: 56%;
		height: 2%;
		background-color: var(--color-contrast);
		transition: scale 0.2s ease-in-out, rotate 0.2s ease-in-out;
		pointer-events: none;
	}
	#gNav:checked ~ .toggle .bar:nth-of-type(1) {
		rotate: 45deg;
		translate: 0 0.575rem;
	}
	#gNav:checked ~ .toggle .bar:nth-of-type(2) {
		scale: 0 1;
	}
	#gNav:checked ~ .toggle .bar:nth-of-type(3) {
		rotate: -45deg;
		translate: 0 -0.575rem;
	}
	.gNav {
		position: fixed;
		top: 3.5rem;
		left: 0;
		width: calc(100% - 3.5rem);
		background: var(--color-contrast);
		z-index: 2100;
		overflow: hidden;
		translate: -10% 0;
		transition: translate 0.2s ease-in-out, opacity 0.2s ease-in-out;
		padding: 0.75rem 0 2rem;
		pointer-events: none;
		opacity: 0;
		box-shadow: 0 7px 14px rgba(var(--color-primary-rgb), .05);
		border-radius: 0 0 2.5rem 0;
	}
	#gNav:checked ~ .layout .gNav {
		translate: 0 0;
		pointer-events: auto;
		opacity: 1;
	}
	ul.gNavList {
		flex-direction: column;
		margin: 0 auto 1.5rem;
		font-size: 1.125rem;
		line-height: 1;
		text-align: center;
		letter-spacing: 0.01em;
		text-indent: 0.01em;
		gap: 0;
	}
	ul.gNavList li {
		width: 100%;
	}
	ul.gNavList a {
		width: 100%;
		padding: 1.25em 0;
	}
	ul.gNavList a::after {
		display: none;
	}
	.gNav .headerContact {
		width: fit-content;
		margin-inline: auto;
	}
	.gNavBg {
		display: block;
		width: 100%;
		height: 100%;
		background-color: rgba(var(--color-link-rgb), .75);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 100;
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.2s ease-in-out;
	}
	#gNav:checked ~ .gNavBg {
		pointer-events: auto;
		opacity: 1;
		transition: opacity 0.4s ease-in-out;
	}
	.gNav ul.txtNav {
		display: flex;
		font-size: 0.875em;
		justify-content: center;
		margin: 1.5rem auto 0;
	}
	/* !sp footer */
	/* --------------------------- */
	.gFooter {
		position: relative;
		padding: 2rem 1rem;
		z-index: 1100;
		
		ul.txtNav {
			font-size: 0.7125em;
			margin: 0 auto 3em;
		}
	}
	.footerTitle {
		margin: 0 auto 2rem;
	}
	.pagetop {
		right: 1rem;
		bottom: auto;
		top: 100lvh;
		translate: 0 -150%;
		font-size: 0.875em;
		width: 5em;
		height: 5em;
	}
	ul.footerNavList {
		margin: 0 auto 3em;
		width: fit-content;
		font-size: 0.9375em;
		text-align: left;
		display: grid;
		grid-template-columns: auto auto;
		gap: 1.25rem 1.5rem;
	}
	
	/* !sp top */
	/* --------------------------- */
	.home main {
		padding: 4.5rem 0;
		position: relative;
		
		&::before {
			width: 97.5%;
			aspect-ratio: 1030 / 1210;
			border-radius: 0 0 0 3.5rem;
		}
	}
	.heroImg {
		width: 95%;
		padding: 0 1.5rem 3rem;
		aspect-ratio: 1030 / 1030;
	}
	.heroCatch {
		max-width: 90%;
	}
	.topIntro {
		padding: 5rem 0 5rem;
		
		img.topIntroImg01 {
			width: 20.5%;
		}
		
		img.topIntroImg02 {
			width: 28.5%;
		}
		
		img.topIntroImg03 {
			width: 37.875%;
			translate: 66% 10%;
		}
	}
	.topIntroTitle {
		font-size: 1.75em;
	}
	.topContWrap {
		padding: 6rem 0 3rem;
		&::before {
			width: 100%;
			border-radius: 0;
		}
		&::after {
			translate: 0 -50%;
		}
	}
	.topCont, .topCont:last-of-type{
		flex-direction: column-reverse;
		padding: 0 1.5rem 1.5rem;
		gap: 1rem;
	}
	.topContTitle {
		font-size: 2em;
		margin: 0 0 0.25em;
	}
	.topContBody {
	}
	.topContTxt {
		font-size: 1.125em;
	}
	.topContImg {
		max-width: 100%;
	}
	.topNews {
		border-radius: 0;
		padding: 3rem 1.5rem 7rem;
	}
	.topWorksTitle {
		font-size: 1.25em;
	}
	.worksWrap {
		grid-template-columns: 1fr;
	}
	.topOthersWrap {
		padding: 0 3rem;
		grid-template-columns: 1fr;
		gap: 2rem;
	}
	.topOthers:nth-of-type(even) {
		translate: 0 0;
	}
	.topOthers a {
		padding-top: 2rem;
		border-radius: 3rem;
	}
	/* !sp lower */
	/* --------------------------- */
	.pageTitile {
		font-size: 1.375em;
		
		.wf-source-serif-b {
			font-size: 1.375em;
			line-height: 1.25;
		}
	}
	.pageIntroImg {
		grid-template-columns: 1fr;
	}
	.pageIntroTitle {
		font-size: 1.625em;
		line-height: 1.5;
	}
	.pageIntroTxt {
		font-size: 0.875em;
		line-height: 1.75;
	}
	.content .worksWrap {
		margin: 3rem auto;
	}
	/* !sp about */
	/* --------------------------- */
	.aboutCont {
		padding: 1.5rem 2.5rem;
		
		.pageIntroTxt,.pageIntroImg {
			margin-bottom: 1.75rem;
		}
	}
	ol.aboutPointList {
		grid-template-columns: repeat(2, 1fr);
		
		li:nth-of-type(2)::after {
			display: none;
		}
		li {
			h3 {
				font-size: min(4vw, 20px);
			}
			
			p {
				font-size: clamp(10px, 2.625vw, 14px);
			}
		}
	}
	/* !sp renovate */
	/* --------------------------- */
	.renovateDetailWrap {
		grid-template-columns: 1fr;
		gap: 2.5rem;
		padding: 0 3rem;
	}
	ul.renovatePoint {
		margin: 3rem auto;
		font-size: 0.875em;
		gap: 1.5em 1em;
		
		li {
			min-width: 12.5em;
			padding: 1.25em 0;
		}
	}
	/* !sp faq */
	/* --------------------------- */
	.faqCont {
		padding: 1.5rem 1.5rem;
		margin: 0 auto 3rem;
		gap: 0.75rem;
	}
	.faqItem {
		border-radius: 0.75rem;
		padding: 0.875rem;
	}
	.faqItemTitle {
		gap: 0.75rem;
		
		&::before {
			font-size: 1.375em;
		}
	}
	.faqItemBody {
		gap: 0.75rem;
		grid-template-columns: 2.75rem 1fr;
		
		&::before {
			font-size: 2.75em;
		}
	}
	/* !sp other */
	/* --------------------------- */
	.otherServiceWrap {
		grid-template-columns: 1fr;
		gap: 2rem;
		padding: 0 3rem;
	}
	.otherService {
		gap: 0.75rem;
	}
	.otherServiceTitle {
		font-size: clamp(16px, 7.5cqw, 22px);
	}
	.otherServiceTxt {
		font-size: clamp(12px, 5cqw, 16px);
	}
	ul.otherServiceList {
		font-size: clamp(10px, 4.75cqw, 14px);
	}
	/* !sp for-builders */
	/* --------------------------- */
	.featuresCont {
		padding-top: 7.5rem;
		
		&::before {
			top: 0;
			left: 50%;
			translate: -50% -15%;
		}
	}
	.featuresTitle,
	.featuresTxt {
		margin-left: 0;
	}
	.featuresTitle {
		font-size: 1.5em;
	}
	ul.checkList {
		font-size: 1.5em;
	}
	/* !sp company */
	/* --------------------------- */
	.companyPorfile {
		font-size: 1em;
		line-height: 1.375;
		
		dt {
			padding-right: 1em;
			padding-left: 1em;
		}
		dd {
			padding-right: 1em;
		}
	}
	.privacyTxt {
		font-size: 0.875em;
	}
	/* !sp contact */
	/* --------------------------- */
	.formItem {
		grid-template-columns: 1fr;
		gap: 0.5rem;
		font-size: 16px;
	}
	.formLabel {
		justify-content: start;
		text-align: left;
		gap: 0.5em;
		grid-template-columns: auto 1fr;
		
		.required {
			font-size: 0.75em;
		}
	}
}