@charset "utf-8";
/*
Theme Name: tajima
Author: YES-REFORM CO., LTD.
*/

/* Body
========================================== */
html, body{
	width: 100%;
	font-size:62.5%;/*10px*/
}
body {
	color:var(--txt-color);
	line-height:1.8;
	background-color: #fff;
	font-size:1.6rem;
	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
}
@media screen and (max-width: 599px) {
	body{
		word-wrap:break-word;
		font-size: 1.4rem;}
}
@media screen and (min-width: 841px) {.tablet {display:none!important;}}
@media screen and (min-width: 600px) {.sp {display:none!important;}}
@media screen and (max-width: 840px) {.pc {display:none!important;}}

/* header
========================================== */
.headerArea{
	position: relative;
	z-index: 1000;
	position: fixed;
	top:0;
	left: 0;
	width: 100%;
	background-color: rgba(255,255,255,.8);
}
.headerArea .inner{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0 auto;
	width:1200px;
	height:120px;
}
.headerLogo{width: 153px;}
.headerLogo a{display: block;}
.headerLogo img{width: 100%;height: auto;filter: drop-shadow(0 0 3px #fff);}

.headerAddress{
	margin-bottom: 1em;
	text-align: right;}
.headerNavi{
	display: flex;
	align-items: center;
}
.gnav ul{
	display: flex;
	align-items: center;
	margin:0 auto;
	list-style: none;}

.gnav ul li{
	position: relative;
	margin-left: 2em;}

.gnav ul li a{
	line-height: 1.2;
	position: relative;
	display: block;
	width: 100%;
	color: var(--main-color);
	font-weight: 700;
	text-decoration: none;
	text-align: center;
	transition: 0.3s;
}
.gnav ul li.current a,
.gnav ul li a:hover{color: var(--sub-color);}
.headerTel{
	line-height: 1.2;
	margin-left: 2em;
	text-align: center;
}
.headerTel span{
	display: block;
	font-size: 2.6rem;
	color: var(--sub-color);
}

.spBtn{display: none}
.drawerMenu{display: none;}

@media screen and (max-width:1200px){
	.headerArea .inner{
		padding: 0 20px;
		width:100%;
	}
	.headerLogo{width: 160px;}
	.gnav ul li{margin-left: 1em;}
	.headerTel span{font-size: 2.2rem;}
}

@media screen and (max-width:1060px){
	.gnav ul li a{font-size: 1.5rem;}
	.headerTel{margin-left: 1em;}
	.headerTel span{font-size: 1.8rem;}
}

@media screen and (max-width:960px){
	.headerLogo{width: 130px;}
	.gnav ul li{margin-left: 0.6em;}
	.gnav ul li a{font-size: 1.4rem;}
	.headerTel span{font-size: 1.6rem;}
	.headerTel{font-size: 1.2rem;}
}

@media screen and (max-width:840px){
	.headerArea{position: absolute;background: none;}
	.headerArea .inner{
		padding: 0 10px;
		height: 50px;
	}
	.headerLogo{padding-top: 5px;}
	.headerLogo img{height: 40px;width: auto;}
	.headerInfo{display: none;}

	.drawerMenu{
		overflow-y: scroll;
		position: fixed;
		top: 0px;
		left: 0px;
		display: none;
		padding:70px 30px 30px;
		width: 100%;
		height: 100%;
		background-color: var(--main-color);
	}
	.drawerMenu::-webkit-scrollbar{
		width: 10px;
	}
	.drawerMenu::-webkit-scrollbar-track{background: var(--main-color);}
	.drawerMenu::-webkit-scrollbar-thumb {background: var(--main-color);}
	.gnavSp{
		margin-bottom: 40px;
		padding: 0 10px 10px;
		border-bottom: 1px solid #fff;}

	.gnavSp li{margin-bottom: 20px;text-align: center;}
	.gnavSp li a{
		position: relative;
		color: #fff;
		font-optical-sizing: auto;
		font-size: 1.6rem;
		font-weight: 600;
		text-decoration: none;
		text-align: center;
	}
	.spHeaderLogo{margin-bottom: 20px;text-align: center;}
	.spHeaderLogo img{
		width: 153px;height: auto;
	}
	.spAddress{
		margin-bottom: 10px;
		line-height: 1.2;
		color: #fff;text-align: center;}
	.spTel{text-align: center;color: #fff;}
	.spTel a{
		display: block;
		font-weight: bold;
		font-size: 2.4rem;
		text-decoration: none;
		color: #fff;}

	.spBtn{
		position:fixed;
		top: 0;
		right: 0;
		display: inline-block;
		width: 50px;
		height:50px;
		padding: 20px 13px 15px;
		background-color: var(--main-color);
		cursor: pointer;
		z-index: 2000;
	}
	.spBtn::after{
		position: absolute;
		left: 0;
		top: 3px;
		content: "MENU";
		text-align: center;
		width: 50px;
		font-size: 8px;
		color: #fff;
	}
	.spBtn.open::after{content: "CLOSE";}

	.spBtn div {position: relative;}
	.spBtn span {
		display: block;
		position: absolute;
		height: 2px;
		width: 100%;
		background:#fff;
		left: 0;
		-webkit-transition: .3s ease-in-out;
		-moz-transition: .3s ease-in-out;
		transition: .3s ease-in-out;
	}
	.spBtn span:nth-child(1) {top: 0;}
	.spBtn span:nth-child(2) {top: 8px;}
	.spBtn span:nth-child(3) {top: 16px;}
	.spBtn.open span:nth-child(1) {
		top: 8px;
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	.spBtn.open span:nth-child(2) {
		width: 0;
		left: 50%;
	}
	.spBtn.open span:nth-child(3) {
		top: 8px;
		-webkit-transform: rotate(-45deg);
		-moz-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}
}

/* sidebnr
========================================== */
.sideContact{
	z-index: 1001;
	position: fixed;
	top:170px;
	right: 0;
}
.sideContact a{
	position: relative;
	display: block;
	width: 80px;
	height: 250px;
	background-color: rgba(0,64,117,0.8);
	border-radius: 10px 0 0 10px;
	color: #fff;
	letter-spacing: 2px;
	-ms-writing-mode: tb-rl;
	-webkit-writing-mode: vertical-rl;
	-o-writing-mode: vertical-rl;
	writing-mode: vertical-rl;
	text-align: center;
	text-decoration: none;
	transition: .3s;
	max-height: 20em; /*IE対策*/
	transition: 0.3s;}

.sideContact a span{
	position: absolute;
	left: 50%;
	top:50%;
	transform: translate(-50%,-50%);
	height: 100%;
	color: #fff;
	transition: 0.3s;}
.sideContact a:hover{background-color: var(--sub-color);}
.sideContact a:hover span{color: #fff;}


@media screen and (max-width:1200px){
	.sideContact a{
		width: 60px;
		height: 200px;}
}
@media screen and (max-width:960px){
	.sideContact a{
		position: relative;
		width: 60px;
		height: 60px;
	}
	.sideContact a::after{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		content: "";
		width: 30px;
		height: 30px;
		background: url(images/icon_mail.svg) center top/contain no-repeat;
	}
	.sideContact a span{display: none;}
}
@media screen and (max-width:840px){
	.sideContact{display: none;}
}


/* mv
========================================== */
.mvArea{
	position: relative;
	margin-bottom: 80px;}
.mvArea img{width: 100%;height: auto;}

@media screen and (max-width:599px){
	.mvArea{margin-bottom: 0;}
}

/* contents
========================================== */
.contents{
	overflow: hidden;
	margin:0 auto;
	width:100%;}
.contents p+p{margin-top: 1.5em;}
.contentsInner{
	margin:0 auto;
	padding: 0;
	width:1200px;}

@media screen and (max-width:1200px){
	.contentsInner{
		width: 100%;
		padding: 0 30px;}
}

@media screen and (max-width:599px){
	.contentsInner{padding: 0 20px;}
}

/* お悩み
========================================== */
.worriesArea{}
.worriesArea .inner{
	width: 1200px;
	margin: 0 auto;
	padding: 80px 60px;
	background-color: var(--c-grey);
}

.worriesCatch{
	margin-bottom:80px;
	font-weight: 700;
	text-align: center;
}
.worriesCatch .text01{
	position: relative;
	margin: 0 auto;
	width: fit-content;
	font-size: clamp(2.2rem, 2.9vw,2.6rem);
	color: var(--sub-color);
}
.worriesCatch .text01::before{
	content: "";
	position: absolute;
	top: -50px;
	left: -180px;
	background: url(images/intro_hukidashi.png) left top /contain no-repeat;
	width: 175px;
	height:115px;
}
.worriesCatch .text02{
	font-size: clamp(1.8rem, 2.1vw,2.2rem);
	color: var(--main-color);
}
.worriesList{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	margin-bottom: 50px;
}
.worriesList li{
	width: 27.5%;
	overflow: hidden;
	position: relative;
}
.worriesList a{
	position: relative;
	display: block;
	background-color: #fff;
	color: var(--txt-color);
	text-decoration: none;}

.worriesList a::after{
	content: "";
	position: absolute;
	bottom: 25px;
	left: 50%;
	width: 15px;
	height: 15px;
	border-right:2px solid var(--txt-color);
	border-bottom:2px solid var(--txt-color);
	transform: translateX(-50%) rotate(45deg);
	transition: 0.3s;
}
.worriesList a::before {
	z-index: 2;
    content: "";
    position: absolute;
    box-sizing: border-box;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    border: 5px solid transparent;
    transition:0.3s;
}
.worriesList .imgBox{}
.worriesList .imgBox img{
	width: 100%;
	height: auto;
}

.worriesList .txtBox{
	padding: 30px 30px 60px;
	text-align: center;
}
.worriesList .txtBox .ttl{
	line-height: 1.2;
	position: relative;
	margin-bottom: 0.8em;
	padding-bottom: 0.8em;
	font-size: clamp(1.8rem, 2.1vw,2.2rem);
	font-weight: 700;
}
.worriesList .txtBox .ttl::after{
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	width: 8em;
	height: 1px;
	background-color: #929292;
}

.worriesList a:hover img{opacity: 1;}
.worriesList a:hover::before {border: 5px solid var(--sub-color);}
.worriesList a:hover::after{bottom: 15px;}

.worriesMessage{
	margin: 0 auto;
	padding:0.6em 1em;
	width: 80%;
	border: 1px solid var(--sub-color);
	font-weight: 700;
	font-size: clamp(1.8rem, 2.1vw,2.2rem);
	text-align: center;
	color: var(--sub-color);
}

@media screen and (max-width:1200px){
	.worriesArea .inner{width: 100%;padding: 60px 30px;}
	.worriesMessage{width: 100%;}
}

@media screen and (max-width:840px){
	.worriesList li{
		margin-right: 20px;
		width: calc((100% - 40px)/3);
	}
	.worriesList li:last-child{margin-right: 0;}
	.worriesCatch .text01::before{
		top: -30px;
		left: -130px;
		width: 120px;
		height:90px;
	}
	.worriesList .txtBox p{text-align: left;}
	.worriesList .txtBox p br{display: none;}

}
@media screen and (max-width:599px){
	.worriesArea .inner{padding: 50px 20px;}
	.worriesCatch .text01{
		line-height: 1.2;
		text-align: left;
		padding-left:80px;}
	.worriesCatch .text01::before{
		top: 0;
		left: -10px;
		width: 80px;
		height:90px;
	}
	.worriesList{display: block;}
	.worriesList li{
		margin-right: 0;
		margin-bottom: 20px;
		width:100%;
	}
	.worriesList li a{display: flex;}
	.worriesList .txtBox{
		padding: 20px 20px 60px;
		text-align: center;
	}
	.worriesList .imgBox{overflow: hidden;}
	.worriesList .imgBox img{
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	.worriesList a::after{left: 70%;}
	.worriesMessage{text-align: left;}
}
@media screen and (max-width:380px){
	.worriesList li a{flex-direction: column;}
	.worriesList a::after{left: 50%;}
}


/* 新着情報
========================================== */
.newsArea{padding: 80px 0;}
.categoryList{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: 40px;
}
.categoryList li {
    margin: 0 1em 1em 0;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    box-sizing: border-box;
	font-size: 1.4rem;
}
.categoryList li:last-child{margin-right: 0;}
.categoryList li a{
	display: block;
	padding: 0px 1em;
	color: var(--txt-color);
	transition: 0.3s;
	text-decoration: none;}
.categoryList li a:hover,
.categoryList li.current a{background-color: var(--sub-color);color: #fff;}
.tagList{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: 40px;
}
.tagList li {
    margin: 0 1em 1em 0;
    border: 1px solid var(--border-color);
    box-sizing: border-box;
	font-size: 1.4rem;
}
.tagList li:last-child{margin-right: 0;}
.tagList li a{
	display: block;
	padding: 0px 1em;
	color: var(--txt-color);
	transition: 0.3s;
	text-decoration: none;}
.tagList li a:hover,
.tagList li.current a{background-color: var(--main-color);color: #fff;}
.newsList{
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 50px;
}
.newsList li {
	margin-right: 3%;
	margin-bottom: 5%;
	width: calc(94% / 3);
}
.newsList li:nth-child(3n){margin-right: 0;}
.newsList li a{
	position: relative;
	text-decoration: none;
	color: var(--txt-color);
	transition: 0.3s;
}
.newsList .imgBox{
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	margin-bottom: 20px;
}
.newsList .imgBox::before{
	content: "";
	display: block;
}
.newsList .imgBox img{
	z-index: 1;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	object-fit: cover;
	transition: 0.5s;
}
.newsList .imgBox .cate{
	z-index: 2;
	position: absolute;
	top: 0;
	left: 0;
	background-color: #fff;
	color: var(--sub-color);
	padding: 0.2em 1em;
	font-weight: 700;
}
.newsList li .date{
	margin-bottom: 0.2em;
	font-weight: 700;
	color: #929292;
}
.newsList li .txtBox .cate{display: none; color: var(--sub-color);margin-top: 5px;}
.newsList li a:hover{color: var(--sub-color);}
.newsList li a:hover .imgBox img{
	opacity: 1;
	transform: scale(1.1);}

@media screen and (max-width:840px){
	.newsArea{padding: 50px 0;}
}
@media screen and (max-width:599px){
	.categoryList{margin-bottom: 30px;}
	.newsList{display: block;}
	.newsList li{
		margin-right: 0;
		margin-bottom: 10px;
		width:100%;}

	.newsList li a{
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		padding-bottom: 10px;
		border-bottom: 1px solid #d5d4d4;
	}
	.newsList li .imgBox:before{padding-top: 100%;}
	.newsList li .imgBox{width:20%;margin: 0;aspect-ratio: 1/1;}
	.newsList li .imgBox .cate{display: none;}
	.newsList li .txtBox{
		width: 80%;
		padding-left: 10px;
	}
	.newsList li .txtBox .ttl{line-height: 1.2;}
	.newsList li .txtBox .cate{display: block;}
}

/* 選ばれる理由
========================================== */
.strengthArea{
	padding: 80px 0;
}
.strengthList{
	display: flex;
	justify-content: space-around;
	margin-bottom: 60px;
}
.strengthBox{
	width: 30.83333%;
}
.strengthBox .imgBox{
	margin-bottom: 30px;
	background-color: #fff;
	filter: drop-shadow(5px 5px 5px #eee);
}
.strengthBox .imgBox img{
	width: 100%;
	height: auto;
}
.strengthBox .txtBox .ttl{
	margin-bottom: 1.2em;
	text-align: center;
	font-size: clamp(2rem, 2.4vw,2.2rem);
	font-weight: 700;
}
.strengthBox .txtBox .ttl span{
	line-height: 1.2;
	display: block;
	margin-top: 0.3em;
	color: var(--sub-color);
	font-size: 1.8rem;
}


@media screen and (max-width:840px){
	.strengthArea{padding:50px 0;}
}

@media screen and (max-width:599px){
	.strengthList{display: block;}
	.strengthBox{width: 100%;margin-bottom: 20px;}
	.strengthBox .imgBox{width: 60%;filter: none;margin: 0 auto;}
}

/* 修理
========================================== */
.repairArea{padding: 80px 0 30px;}
.repairBnr{margin-bottom: 50px;}
.repairBnr .imgBox{margin-bottom: 50px;}
.repairBnr .imgBox img{
	width: 100%;
	height: auto;
}

.repairMenu{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-top: 50px;
	margin-bottom: 50px;
}
.repairMenu li{
	overflow: hidden;
	position: relative;
	width: calc(100% / 4);}
.repairMenu li a{
	display: block;
	width: 100%;
	padding: 60px 0;
	text-decoration: none;
	background-color: #000;
	color: #fff;
	text-align: center;
}
.repairMenu li .imgBox{
	overflow: hidden;
}
.repairMenu li .imgBox:before{
	content: "";
	display: block;
}
.repairMenu li .imgBox img{
	z-index: 1;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	object-fit: cover;
	transition: 0.5s;
}
.repairMenu li a:hover .imgBox img{
	transform: scale(1.1);
	opacity: 0.6;
}

.repairMenu .ttl{
	z-index: 10;
	line-height: 1.2;
	position: relative;
	padding: 1em 0 1em;
	font-size:clamp(1.8rem, 3vw, 2.2rem);
	font-weight: 700;
}

.repairWrap{margin-bottom: 100px;}
.repairTitle{
	line-height: 1.5;
	font-weight: 700;
	font-size:clamp(1.8rem, 3vw, 2.2rem);
}
.troubleWrap{
	display: flex;
	margin-top: 30px;
	margin-bottom: 60px;
}
.troubleWrap dl{
	box-sizing: border-box;
	border: 1px solid #d5d4d4;
	padding: 20px;}
.troubleWrap.col-3 dl{
	margin-right: 20px;
	width: calc((100% - 40px) /3);
}
.troubleWrap.col-4 dl{
	margin-right: 20px;
	width: calc((100% - 60px) /4);
}

.troubleWrap.col-3 dl:nth-child(3n){margin-right: 0;}
.troubleWrap.col-4 dl:nth-child(4n){margin-right: 0;}

.troubleWrap dt{
	position: relative;
	line-height: 1.2;
	margin-bottom: 1.5em;
	padding-bottom: 0.6em;
	font-size: clamp(1.8rem,3vw,2rem);
	text-align: center;
}
.troubleWrap dt::after{
	content: "";
	position: absolute;
	left: 50%;
	bottom: -0.5em;
	transform: translateX(-50%);
	width: 40px;
	height: 5px;
	background-color: var(--sub-color);
}
.troubleWrap .tel{margin-top: 20px;}
.troubleWrap .tel span{
	display: inline-block;
	color: var(--point-color);font-weight: 600;padding-right: 1em;}

@media screen and (max-width:840px){
	.repairMenu li{width: 50%;}
}
@media screen and (max-width:599px){
	.troubleWrap{
		display: block;
		margin-top: 30px;
		margin-bottom: 40px;
	}
	.troubleWrap.col-3 dl,
	.troubleWrap.col-4 dl{
		margin-right: 0;
		width:100%;
	}
	.troubleWrap.col-3 dl:not(:last-child),
	.troubleWrap.col-4 dl:not(:last-child){
		margin-bottom: 30px;
		padding-bottom: 30px;
		border-bottom: 1px solid #ccc;
	}
}


/* サービス
========================================== */
.serviceArea{padding: 80px 0;}
.serviceList{
	display: flex;
	flex-wrap: wrap;
}

.serviceList li{
	width: calc(100% / 2);
	overflow: hidden;
	position: relative;
}
.serviceList a{
	display: block;
	padding: 50px 0;
	height: 100%;
	background-color: #000;
	text-decoration: none;}

.serviceList .imgBox{
	overflow: hidden;
}
.serviceList .imgBox:before{
	content: "";
	display: block;
}
.serviceList .imgBox img{
	z-index: 1;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	object-fit: cover;
	transition: 0.5s;
}
.serviceList a:hover .imgBox img{
	transform: scale(1.1);
	opacity: 0.6;
}
.serviceList .txtBox{
	z-index: 10;
	position: relative;
	padding:50px;
	color: #fff;
	text-align: center;
}
.serviceList .txtBox .ttl{
	line-height: 1.2;
	position: relative;
	margin-bottom: 1em;
	padding: 1em 0 1em;
	font-size:clamp(1.8rem, 3vw, 2.2rem);
	font-weight: 700;
}
.serviceList .txtBox .ttl::after{
	content: "";
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 6em;
	height: 1px;
	background-color: #fff;
}

@media screen and (max-width:840px){
	.serviceArea{padding:20px 0 50px;}
	.serviceList li{width: 50%;}
	.serviceList a{padding: 20px 0;}
	.serviceList .txtBox{padding:20px;}
	.serviceList .txtBox p{line-height: 1.5;}
}

/* 対応エリア
========================================== */
.areaArea{padding: 80px 0 60px;}
.areaArea .inner{
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 auto 40px;
	width: 1200px;
}
.areaInfo{
	padding: 0 30px;
	width:40%;
	text-align: center;
}
.areaPurpose{
	padding: 0 60px;
	width:40%;}
.areaInfo dt{
	margin-bottom: 20px;
}
.areaInfo .tel{margin-bottom: 1em;}
.areaInfo .tel a{
	color: var(--sub-color);
	font-weight: 700;
	font-size: 3.6rem;
	text-decoration: none;
}
.areaInfo .tel span{
	line-height: 1;
	display: block;
	margin: 0 auto;
	padding:0.2em 0.3em;
	width: fit-content;
	border: 1px solid var(--txt-color);
}

.areaPurpose .ttl{
	margin: 0 auto 1.5em;
	width: fit-content;
	border-bottom: 1px solid var(--txt-color);
	text-align: center;
}
.areaPurpose ul{
	width: 100%;
	text-align: center;
	font-weight: 700;
}
.areaPurpose ul li{padding: 0.2em 1em;}
.areaPurpose ul li+li{
	margin-top: 10px;
}
.areaPurpose ul li:nth-child(1){background-color:#f2b47b;}
.areaPurpose ul li:nth-child(2){background-color:#b0d379;}
.areaPurpose ul li:nth-child(3){background-color:#e5e5e5;}

.areaArea .imgBox img{
	width: 100%;
	height: auto;
}

@media screen and (max-width:1200px){
	.areaArea .inner{width: 100%;}
}
@media screen and (max-width:840px){
	.areaArea{padding:50px 0 0;}
	.areaInfo,
	.areaPurpose{width:50%;}
}

@media screen and (max-width:599px){
	.areaArea{padding:30px 0 0;}
	.areaArea .inner{display: block;}
	/* .areaInfo{width:100%;margin-bottom: 40px;padding: 0 30px;} */
	.areaInfo{display: none;}
	.areaPurpose{width:100%;}

	.areaArea .imgBox{overflow-x:scroll;}
	.areaArea .imgBox::-webkit-scrollbar{
		height: 10px;
	}
	.areaArea .imgBox::-webkit-scrollbar-track{
		background: #F1F1F1;
	}
	.areaArea .imgBox::-webkit-scrollbar-thumb {
		background: var(--main-color);
	}
	.areaArea .imgBox img{width: 750px;}
}


/* よくあるご質問
========================================== */
.faqArea{padding: 60px 0;}
.faqList{}
.faqList dl{
	margin-bottom: 30px;
	padding: 30px;
	border: 1px solid #d5d4d4;
	box-sizing: border-box;
}
.faqList dl dt{
	line-height: 1.5;
	position: relative;
	margin-bottom: 20px;
	padding-left:50px;
	color: var(--sub-color);
	font-size: 1.8rem;
	font-weight: 700;
}
.faqList dl dt::before{
	content: "Q.";
	position: absolute;
	top: -0.3em;
	left: 0;
	font-size: 2.2rem;
}

.faqList dl dd{
	padding-left: 50px;
}

@media screen and (max-width:840px){
	.faqArea{padding:50px 0;}
}

@media screen and (max-width:599px){
	.faqList dl{
		margin-bottom: 20px;
		padding: 20px;
	}
	.faqList dl dt{
		margin-bottom: 10px;
		padding-left:30px;
		font-size: 1.6rem;
	}
	.faqList dl dt::before{
		top: -0.2em;
		font-size: 2rem;
	}
	.faqList dl dd{padding-left:0;}
}

/* コラム
========================================== */
.columnArea{padding: 60px 0;}
.columnList{
	display: flex;
	flex-wrap: wrap;
	gap:40px;
	margin-bottom: 50px;
}
.columnList > li {
	width: calc((100% - 40px *2)/3);
}
.columnList > li a{
	text-decoration: none;
	color: var(--txt-color);
	transition: 0.3s;
}
.columnList .imgBox a{
	position: relative;
	overflow: hidden;
	display: block;
	aspect-ratio: 4 / 3;
	margin-bottom: 20px;
}
.columnList .imgBox a::before{
	content: "";
	display: block;
}
.columnList .imgBox a img{
	z-index: 1;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	object-fit: cover;
	transition: 0.5s;
}

.columnList li .txtBox .ttl{
	line-height: 1.5;
	margin-bottom: 1em;
	font-weight: 500;}
.columnList li .txtBox .cate a{
	line-height: 1.2;
	display: inline-block;
	margin-bottom: .5em;
	padding: .2em .5em;
	color: var(--txt-color);
	border: 1px solid var(--sub-color);
	font-size: 1.4rem;
}
.columnList li .txtBox .tag{
	display: flex;
	gap: .5em;
}
.columnList li .txtBox .tag a{
	line-height: 1.2;
	padding: 0 0.5em;
    text-decoration: none;
    background-color: var(--c-grey);
    color: var(--txt-color);
    transition: 0.3s;
	font-size: 1.4rem;
}
.columnList li .date{
	margin-top: 0.6em;
	font-size: 1.2rem;
	text-align: right;
	color: #929292;
}


.columnList li .txtBox .ttl a:hover{text-decoration: underline;}
.columnList > li a:hover{color: var(--sub-color);}
.columnList li .imgBox a:hover img{
	opacity: 1;
	transform: scale(1.1);}

.columnList li .txtBox .cate a:hover{background-color: var(--sub-color);color: #fff;}
.columnList li .txtBox .tag a:hover{
	background-color: var(--main-color);
	color: #fff;
}


@media screen and (max-width:840px){
	.columnArea{padding:30px 0 50px;}
}
@media screen and (max-width:599px){
	.columnArea{padding:0 0 50px;}
	.columnList{flex-direction: column;gap: 20px;}
	.columnList > li{
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		padding-bottom: 10px;
		width: 100%;
		border-bottom: 1px solid #d5d4d4;
	}
	.columnList li .imgBox:before{padding-top: 100%;}
	.columnList li .imgBox{width:20%;margin: 0;aspect-ratio: 1/1;}
	.columnList li .txtBox{
		width: 80%;
		padding-left: 10px;
	}
	.columnList li .txtBox .ttl{line-height: 1.2;}
	.columnList li .txtBox .cate{display: block;}
	.columnList li .txtBox .cate a,
	.columnList li .txtBox .tag a{font-size: 1.2rem;}
	.columnList li .date{
		margin-bottom: .5em;
		font-size: 1.2rem;}
}

/* footer
========================================== */
footer{overflow: hidden;}
.footerNavi{
	background-color: #f4f7fa;
}
.footerNavi .inner{
	margin: 0 auto;
	padding:80px 60px;
	width: 1200px;
}
.footerNavi .linkListWrap{
	display: flex;
	justify-content: space-between;
	margin-bottom: 50px;
}
.footerNavi .linkListWrap .box{
	/* width: 25%; */
}
.footerNavi .linkList01 + .linkList01{margin-top: 2em;}
.footerNavi .linkList01 li span{
	display: block;
	line-height: 1.3;
	padding-right: 0.5em;
	color: var(--sub-color);
	font-weight: 700;
}
.footerNavi .linkList01 li + li{margin-top: 1em;}
.footerNavi .linkList01 li a{
	line-height: 1.2;
	display: block;
	position: relative;
	padding: 0.3em 40px 0.3em 0;
	text-decoration: none;
	color: var(--txt-color);
}
.footerNavi .linkList01 li a::after{
	content: "";
	position: absolute;
	right: 10px;
	top: 11px;
	background: url(images/icon_arrow.png) right top/contain no-repeat;
	width: 9px;
	height: 7px;
	transition: 0.3s;
}
.footerNavi .linkList01 li a:hover{
	text-decoration: underline;
}
.footerNavi .linkList01 li a:hover::after{right: 0px;}

.footerNavi .linkList01 ul{
	margin-top: 1em;
	padding: 1em 1em 1em 2em;
	border-left: 1px solid var(--sub-color);
}

.footerNavi .linkList02{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	padding: 20px 60px;
	border-top: 1px solid #d5d4d4;
	border-bottom: 1px solid #d5d4d4;
}
.footerNavi .linkList02 li{
	line-height: 1;
	width: 25%;
}
.footerNavi .linkList02 li a{
	display: block;
	margin: 10px 0;
	padding: 0;
	border-left: 1px solid #d5d4d4;
	text-align: center;
	text-decoration: none;
	color: var(--txt-color);
	font-weight: 700;
}
.footerNavi .linkList02 li:nth-child(4n) a,
.footerNavi .linkList02 li:last-child a{border-right: 1px solid #d5d4d4;}
.footerNavi .linkList02 li a:hover{
	text-decoration: underline;
}

@media screen and (max-width: 1200px) {
	.footerNavi .inner{padding: 50px 30px;width: 100%;}
	.footerNavi .linkList02{padding: 20px 0;}
}

@media screen and (max-width: 840px) {
	.footerNavi .inner{padding: 40px 20px;width: 100%;}
	.footerNavi .linkListWrap .box{width: 25%;}
}
@media screen and (max-width: 599px) {
	.footerNavi .linkListWrap{flex-wrap: wrap;}
	.footerNavi .linkListWrap .box{width: 50%;margin-bottom: 30px;}
	/*
	.footerNavi .linkList02 li{width: calc(100% / 3);}
	.footerNavi .linkList02 li:nth-child(4n) a{border-right: none;}
	.footerNavi .linkList02 li:last-child a,
	.footerNavi .linkList02 li:nth-child(3n) a{border-right: 1px solid #d5d4d4;}
	*/
	.footerNavi .linkList02 li{width: calc(100% / 2);}
	.footerNavi .linkList02 li:nth-child(4n) a{border-right: none;}
	.footerNavi .linkList02 li:last-child a,
	.footerNavi .linkList02 li:nth-child(even) a{border-right: 1px solid #d5d4d4;}
}

@media screen and (max-width: 380px) {
	.footerNavi .linkList02 li{width: 50%;}
	.footerNavi .linkList02 li:nth-child(3n) a{border-right: none;}
	.footerNavi .linkList02 li:last-child a,
	.footerNavi .linkList02 li:nth-child(even) a{border-right: 1px solid #d5d4d4;}
}

@media screen and (max-width: 320px) {
	.footerNavi .linkList01 ul {padding:0.5em 1em;}
	.footerNavi .linkList01 li a{
		padding: 0.3em 0.5em 0.3em 0;
	}
	.footerNavi .linkList01 li span{font-size: 1.6rem;}
	.footerNavi .linkList01 li a::after{display: none;}
}

.footerInfo{background-color: var(--main-color);}
.footerInfo .inner{
	display: flex;
	align-items: center;
	margin: 0 auto;
	padding: 50px 0;
	width: 1200px;
	color: #fff;
}
.footerLogo {width: 153px;margin-right: 60px;}
.footerLogo img{width: 100%;height: auto;}

.footerInfo ul{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-left: 50px;
	border-left: 1px solid #d5d4d4;
}
.footerInfo ul li + li{margin-left: 30px;}
.footerInfo ul .tel{
	line-height: 1.5;
	width: 12em;
	text-align: center;}
.footerInfo ul .tel a{
	display: block;
	color: #fff;
	font-size: 2.6rem;
	text-decoration: none;
	text-align: center;
}
.footerInfo ul .contact{width: 280px;}
.footerInfo ul .contact a{
	display: block;
	padding: 1em;
	background-color: #fff;
	border-radius: 10px;
	text-decoration: none;
	text-align: center;
	color: var(--main-color);
	transition: 0.3s;
}
.footerInfo ul .contact a:hover{
	background-color: var(--sub-color);
	color: #fff;
}
.copyright{
	padding: 1em 1em;
	text-align: center;
	color: #fff;
	font-size:1.2rem;}

@media screen and (max-width: 1200px) {
	.footerInfo .inner{padding: 50px 30px;width: 100%;}
}

@media screen and (max-width: 840px) {
	.footerInfo .inner{display: block;padding: 40px 20px 20px;width: 100%;}
	.footerLogo{margin: 0 auto 30px;}
	.footerInfo ul{
		flex-wrap: wrap;
		justify-content: center;
		padding: 0;border: none;}
	.footerInfo ul .address{
		margin-bottom: 20px;
		width: 100%;
		text-align: center;
	}
}

@media screen and (max-width: 599px) {
	.footerInfo ul{display: block;}
	.footerInfo ul li + li{margin-left: 0;}
	.footerInfo ul .tel{margin: 0 auto 20px;}
	.footerInfo ul .contact{margin: 0 auto;}
}
@media screen and (max-width: 320px) {
}


/* pageTop
========================================== */
#pageTop{
	position:fixed;
	line-height: 1;
	right:20px;
	bottom:20px;
	z-index: 100;}
#pageTop a{
	display: block;
	position:relative;
	padding:20px;
	background-color:#fff;
	box-sizing: border-box;
	border: 1px solid var(--main-color);
	color:#fff;
	font-size: 1.2rem;
	text-decoration: none;
	transition: all .3s;
}
#pageTop a::before{
	position:absolute;
	content: "";
	top:17px;
	left:50%;
	margin-left: -4px;
	width: 8px;
	height: 8px;
	border-top: solid 2px var(--main-color);
	border-right: solid 2px var(--main-color);
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
	transition: all .3s;
	}
#pageTop:hover a{background-color: var(--main-color);}
#pageTop:hover a::before{top:13px;border-color: #fff;}
@media screen and (max-width: 1200px) {
	#pageTop{
		right:0;}
}

@media screen and (max-width: 599px) {
	#pageTop{display: none!important}
}

/* breadcrumb
========================================== */
.breadcrumb{
	padding-top: 140px;
	margin: 0 auto 30px;
	max-width: 1080px;
}
.breadcrumb li{
	display: inline;
	list-style-type: none;
	color: var(--txt-color);
	font-size: 1.4rem;}

.breadcrumb li:before {
	content: "/";
	padding: 0 10px;}
.breadcrumb li:first-child:before {content: none;}
.breadcrumb li a{
	text-decoration: none;
	color: #333;}
.breadcrumb li a:hover{text-decoration: underline;}

@media screen and (max-width: 1080px) {
	.breadcrumb{
		max-width: 100%;
		padding:140px 30px 0;}
}
@media screen and (max-width: 840px) {
	.breadcrumb{padding: 60px 30px 0;}
}
@media screen and (max-width: 599px) {
	.breadcrumb{padding: 60px 20px 0;}
	.breadcrumb li{font-size: 1.2rem;}
}

/* subBox
========================================== */
.sectionBox{
	width: 1080px;
	margin:0 auto 130px;}
.subBox{margin-bottom: 80px;}
.subBox:last-of-type{margin-bottom:0;}

@media screen and (max-width: 1080px) {
	.sectionBox{
		width: 100%;
		margin:0 auto 80px;
		padding: 0 30px;}
}

@media screen and (max-width: 599px) {
	.sectionBox{margin:0 auto 60px;padding: 0 20px;}
	.subBox{margin-bottom: 30px;}
}


/* 会社概要
========================================== */
.officeWrap{
	display: flex;
	justify-content: space-between;
}
.officeWrap .box{width: calc((100% - 20px)/2);}
.officeTelList{

}
.officeTelList li{
	line-height: 1.2;
	position: relative;
	padding-left: 30px;
}
.officeTelList li + li{margin-top: 1.5em;}
.officeTelList li::before{
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	background: url(images/icon_tel.svg)left top/contain no-repeat;
	width: 18px;
	height: 18px;
}
.officeTelList li a{
	font-size: 120%;
	text-decoration: none;
	color: var(--txt-color);
}


@media screen and (max-width: 599px) {
	.officeWrap{display: block;}
	.officeWrap .box{width:100%;}
	.officeWrap .box:first-child{margin-bottom: 40px;}
}


/* 事業内容
========================================== */
.businessMenu{
	display: flex;
	margin-top: 60px;
}

.businessMenu dl{
	width: calc((100% - 5.5555%)/2);
	padding:40px 30px;
	background-color: #fff;
	border: 1px solid #d5d4d4;
	box-sizing: border-box;
    filter: drop-shadow(5px 5px 5px #eee);
}

.businessMenu dl:nth-child(1){margin-right: 5.5555%;}

.businessMenu dl dt{
	position: relative;
	padding-bottom: 2em;
	font-size:clamp(1.8rem, 3vw, 2.4rem);
	text-align: center;

}
.businessMenu dl dt::after{
	content: "";
	position: absolute;
	left: 50%;
	bottom: 1em;
	transform: translateX(-50%);
	width: 50px;
	height: 5px;
	background-color:var(--sub-color);
}

.businessMenu dl .imgBox{
	text-align: center;
}
.businessMenu dl .imgBox img{
	max-width: 100%;
	height: auto;
}

@media screen and (max-width: 599px) {
	.businessMenu{
		display: block;
	}
	.businessMenu dl{
		width: 100%;
		padding:30px 20px;
	}
	.businessMenu dl:nth-child(1){margin: 0 0 40px;}
}