html{
	font-size:10px;
}

*{
	font-size: 1.4rem;
	font-family: serif; /* 明朝体フォントファミリーを指定 */
}

body{
	margin:0;
	width:100%;
	height:100%;
}


body > *:not(main),
body > main > * > *
{
	width:100%;
	padding:16px 2%;
}

body > header:first-of-type{
	padding: 0 0 0 2%;
	display: flex;
	justify-content: space-between;
}

body > header:first-of-type a{
	text-decoration: none;
}

body > header:first-of-type > *:first-of-type{
	margin-right: auto;
}

body > header:first-of-type a[class*=icon]{
	font-size: 1.8rem;
	padding: 4px;
	color: #fff;
	display: flex;
	gap:8px;
	align-items: center;
	padding-inline:8px;
}

body > header:first-of-type a[class*=icon]::before{
	font-size: 3rem;
	color: hsl(var(--col-blue),75%,95%);
}

body > header:first-of-type a.icon-phone{
	background: hsl(var(--col-blue),75%,35%);
}

body > header:first-of-type a.icon-mail{
	background: hsl(var(--col-blue),75%,25%);
}

body main > #eyecatch{
	aspect-ratio: 1200/600;
	position: relative;
	background: url(/css/img/index/eyecatch.png);
	background-position: center;
	background-size: cover;
	padding:150px 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

body main > #eyecatch::before{
	position: absolute;
	content: "";
	width: 100%;
	height:100%;
	background-color: hsla(var(--col-blue),75%,25%,.65);
	top:0;
	left: 0;
}

body main > #eyecatch div{
	position: relative;
	z-index: 1;
	width:auto;
}

body main > #eyecatch div::before,
body main > #eyecatch div::after{
	position: absolute;
	top: 50%;
	background: hsl(var(--col-blue),75%,90%);
	content: "";
	height:1px;
	width: 100px;
}

body main > #eyecatch div::before{
	right:100%;
}

body main > #eyecatch div::after{
	left:100%;
}

body main > #eyecatch div > *{
	color: hsl(var(--col-blue),75%,95%);
	text-align: center;
}

body main > #eyecatch div > h1,
body > main > div#bizDescription h2{
	font-size: 3rem;
}

body main > #eyecatch div > h2
{
	font-size: 1.8rem;
}

body > main > div:not(:last-of-type){
	border-top: 1px solid hsl(var(--col-blue),75%,96%);
}

/*-- biz description --*/


body > main > div#bizDescription{
	background: linear-gradient(90deg, hsl(var(--col-blue),75%,94%) 0%, hsl(var(--col-blue),75%,94%) 50%, hsl(var(--col-blue),75%,95%) 50%, hsl(var(--col-blue),75%,95%) 100%);
	/*background: hsl(var(--col-blue),75%,95%); */
	padding-block: 40px;
}

body > main > div#bizDescription :is(h2,div){
	margin-bottom: 24px;
}
body > main > div#bizDescription h2{
	color: hsl(var(--col-blue),75%,70%);
	text-align: center;
}

body > main > div#bizDescription h2 span{
	display: block;
}

body > main > div#bizDescription div{
	width:700px;
	margin-inline:auto;
}


/*--  biz field --*/

body > main > div#bizInfo > div{
	background-position: left center;
    background-size: 65% auto;
    background-repeat: no-repeat;
	padding-block:100px ;
}

body > main > div#bizInfo > div:nth-of-type(even){
	background-position: right center;
}

body > main > div#bizInfo > div > div{
	width:50%;
	margin: 0 0 0 auto;
	padding:60px 40px;
	border-radius: 20px;
}

body > main > div#bizInfo > div:nth-of-type(even) > div{
	margin: 0 auto 0 0;
}

body > main > div#bizInfo > div > div * {
	color: #fff;
}

body > main > div#bizInfo > #build{
	background-image: url('/css/img/index/biz/build.png');
}

body > main > div#bizInfo > #scrap{
	background-image: url('/css/img/index/biz/scrap.png');
}

body > main > div#bizInfo > #reform{
	background-image: url('/css/img/index/biz/reform.png');
}

body > main > div#bizInfo > #renovation{
	background-image: url('/css/img/index/biz/renovation.png');
}

body > main > div#bizInfo > div > div h2{
	font-size: 1.8rem;
	margin-bottom: 32px;
	text-align: center;
    position: relative;
}

body > main > div#bizInfo > div > div h2::after{
    position: absolute;
    width:10%;
    height:1px;
    top:130%;
    left:calc(50% - 5%);
    content: "";
    background: hsl(var(--col),0%,95%);
}


body > main > div#bizInfo > #build > div{
	background: hsla(var(--col-red),100%,30%,.80);
}

body > main > div#bizInfo > #scrap > div{
	background: hsla(var(--col-green),100%,30%,.80);
}

body > main > div#bizInfo > #reform > div{
	background: hsla(var(--col-blue),100%,30%,.80);
}

body > main > div#bizInfo > #renovation > div{
	background: hsla(var(--col-orange),100%,30%,.80);
}


body > main > div#bizInfo > div > div p{
	font-size: 1.6rem;
	text-align: center;
}

body > main > div:is(#contact,#companyInfo){
	padding-block:0;
}

body > main > div:is(#contact,#companyInfo) > div.wrap{
	display: flex;
	justify-content: space-between;
	background: hsl(var(--col-blue),75%,96%);
	padding-block:24px ;
}

body > main > div:is(#companyInfo) > div.wrap{
	background: hsl(var(--col-blue),75%,25%);
}


body > main > div:is(#contact,#companyInfo) > div.wrap > *:not(h2){
	width:45%;
	margin-right: 2.5%;
}

body > main > div:is(#companyInfo) > div.wrap > *:not(h2){
	margin-left: 2.5%;
}

body > main > div:is(#contact,#companyInfo) h2{
	width:50%;
	text-align: center;
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	color: #fff;
	color: hsl(var(--col-blue),75%,70%);
	border-right: 1px solid hsl(var(--col-blue),75%,85%);
}

body > main > div:is(#companyInfo) h2{
	border-right-style: none;
	border-left: 1px solid hsl(var(--col-blue),75%,45%);
}


body > main > div:is(#contact,#companyInfo) h2 > span > span{
	display: block;
	width: 100%;
	font-weight: normal;
	font-size:1.4rem;
	color: hsl(var(--col-blue),75%,70%);
}

body > main > div:is(#companyInfo) h2 > span > span,
body > main > div:is(#companyInfo) h2 > span
{
	color: hsl(var(--col-blue),75%,80%);
}

body > main > div:is(#companyInfo) > div{
	flex-direction: row-reverse;
}

body > main > div:is(#contact,#companyInfo) h2 > span:first-of-type{
	font-size:3rem ;
}

body > main > div:is(#contact,#companyInfo) > :is(h2,.infoWrap){
	margin-bottom: 16px;
}

body > main > div:is(#contact,#companyInfo) .infoWrap > *:not(.jqueryFilterMsg){
	display: flex;
	border-bottom: 1px dotted hsl(var(--col-blue),75%,80%);
	margin-top: -1px;
}

body > main > div:is(#contact,#companyInfo) .infoWrap br{
	margin-block:8px ;
}

body > main > div:is(#companyInfo) .infoWrap > *:not(.jqueryFilterMsg){
	border-bottom: 1px dotted hsl(var(--col-blue),75%,45%);
}

body > main > div:is(#contact,#companyInfo) .infoWrap > * > span{
	padding:8px;
	width:30%;
	color: hsl(var(--col-blue),75%,70%);
}

body > main > div:is(#companyInfo) .infoWrap > * > span{
	color: hsl(var(--col-blue),75%,80%);
}

body > main > div:is(#contact,#companyInfo) .infoWrap > * > span:first-of-type{
	text-align: right;
}

body > main > div:is(#contact,#companyInfo) .infoWrap > * > span:not(:first-of-type){
	width:60%;
	flex-grow: 1;
}

body > main > div:is(#contact,#companyInfo) .infoWrap > * > span.full{
	width:100%;
	border-style:none ;
	text-align: center;
}

body > main > #companyInfo .mapFrame{
	width:100%;
	height: 450px;
}

body > main > div:is(#contact) :is(input[type=text],textarea){
	width:100%;
	border: 1px solid hsl(var(--col-blue),75%,90%);
	padding-block: 16px;
	border-radius: 5px;
}

body > main > div:is(#contact) :is(textarea){
	height:250px;
}

body > main > div:is(#contact) :is(button){
	padding:4px 32px;
}

.loaderWrap{
	z-index: 9999;
	position: fixed;
	top:0;
	left: 0;
	width:100%;
	height:100%;
	background: hsla(var(--col-blue),75%,15%,.95);
	display: flex;
	justify-content: center;
}

.loaderWrap > .inner{
	margin-top: 250px;
	width:100px;
	aspect-ratio: 1/1;
}

.loader,
.loader:before,
.loader:after {
  border-radius: 50%;
  width: 2.5em;
  height: 2.5em;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation: load7 1.8s infinite ease-in-out;
  animation: load7 1.8s infinite ease-in-out;
}
.loader {
  color: #ffffff;
  font-size: 10px;
  margin: 80px auto;
  position: relative;
  text-indent: -9999em;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}
.loader:before,
.loader:after {
  content: '';
  position: absolute;
  top: 0;
}
.loader:before {
  left: -3.5em;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
.loader:after {
  left: 3.5em;
}
@-webkit-keyframes load7 {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }
  40% {
    box-shadow: 0 2.5em 0 0;
  }
}
@keyframes load7 {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }
  40% {
    box-shadow: 0 2.5em 0 0;
  }
}