@charset "utf-8";
/* CSS Document */
#keyVisual{
	background: url("../img/keyvisual_pc.webp") no-repeat 9vw center / cover;
}

.flexBox{
	display: flex;
	justify-content: space-between;
	align-items: stretch;
}

.hd02{
	font-size: 4rem;
	color: var(--color-base);
	line-height: 1.2;
	padding-bottom: 20px;
}

#contentsBlock > [id^="sec_"]{
	padding: 160px 0;
}

@media screen and (max-width: 1440px){
	#keyVisual{
		background-position: 14% center;
	}
}
@media screen and (max-width: 1200px){
	.flexBox{
		flex-wrap: wrap;
	}
}
@media screen and (max-width: 820px){
	#keyVisual{
		background-position: 48% center;
	}
	#contentsBlock > [id^="sec_"]{
		padding: 80px 0;
	}
	.hd02{
		font-size: 2.8rem;
		padding-bottom: 10px;
	}
}
@media screen and (max-width: 767px){
	#keyVisual{
		background-image: url("../img/keyvisual_sp.webp");
		background-position: right center;
	}
}



/* ------------------------------------------------------------------------ */

/*  会社概要

/* ------------------------------------------------------------------------ */

#contentsBlock #sec_message{
	padding-top: 0;
	padding-bottom: 60px;
}
#sec_message .imageBox{
	background: url("../img/img_company_01.webp") no-repeat top center / contain;
	aspect-ratio: 1015/650;
	width: calc(53% + (100vw - 1200px) / 2);
	max-width: calc(53% + 360px);
	margin-right: max(calc(50% - 50vw), -360px);
}
#sec_message .imageBox.sp{
	display: none;
}

#sec_message .degree{
	margin-top: 30px;
}
#sec_message .name{
	font-size: 2.8rem;
	font-weight: 700;
	margin-top: 10px;
}

#sec_message .txtBox{
	font-size: 1.8rem;
	font-weight: 500;
	width: 45%;
	text-align: left;
}

#sec_message .txtArea{
	margin-top: 30px;
}

#sec_message .txtArea p{
	line-height: 1.889;
}

#sec_message .txtArea p + p{
	margin-top: 1em;
}


@media screen and (max-width: 1200px){
	#sec_message .txtBox,
	#sec_message .imageBox{
		width: 100%;
	}
	#sec_message .imageBox{
		margin-top: 50px;
		margin-right: -20px;
		margin-left: auto;
		max-width: 1015px;
	}
	#sec_message .imageBox.sp{
		display: block;
	}
	#sec_message .imageBox.pc{
		display: none;
	}
}
@media screen and (max-width: 820px){
	#contentsBlock #sec_message{
		padding: 0;
	}
	#sec_message .txtBox{
		font-size: 1.6rem;
	}
	#sec_message .imageBox{
		margin-top: 20px;
	}
	#sec_message .name{
		font-size: 2rem;
	}
	#sec_message .txtArea{
		margin-top: 20px;
	}

}

/* ------------------------------------------------------------------------ */

/*  事業所

/* ------------------------------------------------------------------------ */

#contentsBlock #sec_base{
	background: #F0F0F0;
	background: linear-gradient(180deg, rgba(240, 240, 240, 1) 50%, rgba(255, 255, 255, 1) 50%);
	padding-bottom: 100px;
}

#sec_base > .contents.flex{
	gap: 90px;
}

#sec_base .ttl-sub{
	flex-shrink: 0;
}

#sec_base .mapBox{
	max-width: 960px;
	aspect-ratio: 960/780;
	width: calc(100% - 160px);
	overflow: hidden;
}

#sec_base .mapBox iframe{
	width: 100%;
	height: 100%;
}

@media screen and (max-width: 1200px){
	#sec_base .mapBox{
		margin-right: -20px;
	}
}
@media screen and (max-width: 820px){
	#contentsBlock #sec_base{
		padding-top: 30px;
		padding-bottom: 0;
	}
	#sec_base > .contents.flex{
		align-items: flex-end;
		flex-direction: column;
		gap: 0;
	}
	#sec_base .ttl-sub{
		width: 100%;
	}
	#sec_base .mapBox{
		aspect-ratio: 710 / 880;
		width: 100%;
		max-height: 500px;
	}
}
@media screen and (max-width: 767px){
	.tblStyle01 th{
		width: 90px;
	}
}


/* ------------------------------------------------------------------------ */

/*  私たちのサービス

/* ------------------------------------------------------------------------ */
#contentsBlock #sec_services{
	padding-top: 100px;
}
#sec_services .flexBox{
	flex-wrap: nowrap;
	flex-direction: row;
	align-items: flex-end;
}

#sec_services .flexBox + .flexBox{
	margin-top: 150px;
}

#sec_services .imageBox{
	background: url("../img/img_services_01_pc.webp") no-repeat top center / contain;
	aspect-ratio: 1210/440;
	width: calc(100% + (100vw - 1200px) / 2);
	max-width: calc(67% + 360px);
	margin-left: max(calc(50% - 50vw), -360px);
}

#sec_services .layer{
	display: block;
	width: 100%;
	height: 100%;
	background: var(--color-base);
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	transform: skewX(164deg);
}

#sec_services .txtBox{
	font-size: 1.8rem;
	font-weight: 500;
	height: 260px;
	width: 522px;
	text-align: left;
	margin-right: 40px;
	margin-bottom: -50px;
	margin-left: -15%;
	position: relative;
	z-index: 10;
	flex-shrink: 0;
}
	#sec_services .txtBox .inner{
		display: block;
		color: #fff;
		padding: 100px 20px 34px 30px;
		width: 100%;
		height: 100%;
	}

#sec_services .link{
	color: #fff;
	position: absolute;
	bottom: 20px;
	right: 50px;
}
	#sec_services .link .icon-wrap .circle-bg,
	#sec_services .link .icon-wrap .arrow{
		fill: #fff;
	}
	#sec_services .link .icon-wrap .circle{
		stroke: #fff;
	}

#sec_services .label{
	font-size: 2.8rem;
	background: #fff;
	color: var(--color-base);
	position: absolute;
	top: 20px;
	left: 15px;
	transform: skewX(164deg);
	max-width: 340px;
	width: 90%;
	padding: 7px 20px;
}
	#sec_services .label span{
		display: block;
		transform: skewX(-164deg);
	}

#sec_services .box-repair.flexBox{
	flex-direction: row-reverse;
}
#sec_services .box-repair .imageBox{
	background-image: url("../img/img_services_02_pc.webp");
	margin-left: 0;
	margin-right: max(calc(50% - 50vw), -360px);
}
#sec_services .box-repair .txtBox{
	margin-left: 40px;
	margin-right: -15%;
}
#sec_services .box-repair .label{
	right: -33px;
	left: auto;
}

#sec_services .box-insurance .imageBox{
	background-image: url("../img/img_services_03_pc.webp");
}

@media screen and (max-width: 1024px){
	#sec_services .flexBox{
		flex-wrap: wrap;
	}
	#sec_services .flexBox + .flexBox{
		margin-top: 80px;
	}
	#sec_services .imageBox{
		width: 100%;
	}
	#sec_services .txtBox{
		margin: -10% -20px 0 auto;
		max-width: 522px;
		width: 90%;
		min-height: 280px;
	}
	#sec_services .txtBox .inner{
		background: #FFFFFF;
		background: linear-gradient(90deg, rgba(255, 255, 255, 0) 50px, rgba(195, 0, 47, 1) 50px);
	}
	
	#sec_services .box-repair .txtBox{
		margin: -10% auto 0 -20px;
	}
	#sec_services .box-repair .txtBox .inner{
		background: #FFFFFF;
		background: linear-gradient(90deg, rgba(195, 0, 47, 1) 50px, rgba(255, 255, 255, 0) 50px);
		padding-right: 30px;
	}
}

@media screen and (max-width: 820px){
	#contentsBlock #sec_services{
		padding-top: 80px;
		padding-bottom: 0;
	}
	#sec_services .flexBox + .flexBox{
		margin-top: 60px;
	}
	#sec_services .txtBox{
		font-size: 1.6rem;
		margin-top: -27%;
		height: auto;
		min-height: inherit;
	}
	#sec_services .txtBox .inner{
		padding: 80px 20px 24px;
	}
	#sec_services .imageBox{
		background: url("../img/img_services_01_sp.webp") no-repeat center / contain;
		aspect-ratio: 710 / 548;
	}
	#sec_services .label{
		font-size: 2rem;
		width: 80%;
		left: 12px;
	}
	
	#sec_services .link{
		right: 20px;
	}
	
	#sec_services .box-repair .txtBox a{
		padding: 80px 30px 64px 20px;
	}
	#sec_services .box-repair .imageBox{
		background-image: url("../img/img_services_02_sp.webp");
	}
	#sec_services .box-repair .txtBox{
		margin-top: -27%;
	}
	#sec_services .box-repair .label{
		text-align: right;
		padding-right: 40px;
		right: -30px;
	}
	#sec_services .box-repair .link{
		right: 40px;
	}
	
	#sec_services .box-insurance .imageBox{
		background-image: url("../img/img_services_03_sp.webp");
	}
}

@media screen and (max-width: 500px){
	#sec_services .box-repair .label{
		right: -32px;
	}
}
@media screen and (max-width: 375px){
	#sec_services .box-repair .label{
		padding-right: 20px;
	}
}