@charset "UTF-8";
/* CSS Document */

/* ----------------------------------------------------------------------
固定背景
---------------------------------------------------------------------- */
.sticky-contents{
	position: relative;
}
.sticky-contents .sticky-bg{
	position: absolute;
	width: 100%;
	height: 100%;
	inset: 0 auto auto 0;
	z-index: -1;
}
.sticky-contents .sticky-bg:before{
	content: '';
	display: block;
	width: 100%;
	height: 100vh;
	position: sticky;
	top: 0;
	background: url(../img/common/sticky-bg2@2x.webp);
	background-size: cover;
}


/* ----------------------------------------------------------------------
メインビジュアル
---------------------------------------------------------------------- */
#mv{
	position:relative;
}

#mv .img-box:before{
	content: '';
	display: block;
	width: 38%;
	height:77rem;
	position: absolute;
	left: 0;
	z-index: -1;
	bottom: 0%;
	background-image: url(../img/top/mv-back@2x.webp);
	background-size: cover;
	background-position: center;
}


#mv .img-box{
	width: 80%;
	max-width: 153rem;
	height: 94rem;
	margin-left: auto;
	background-color: #fff;
}
#mv .img-box > ul{
	width: 100%;
	height: 100%;
	overflow: hidden;
}
#mv .img-box > ul *{
	height: 100%;
}
#mv .img-box > ul img{
	object-fit: cover;
}

#mv .mozi{
	position: absolute;
	top: 51.9%;
	left: 5%;
	max-width: 100%;
	max-width: 71rem;
	width: 76%;
}

#mv .mv-tel{
	position: absolute;
	font-size: 4rem;
	letter-spacing: 0.05em;
	align-items: center;
	color: #fff;
	padding: 0.1em 1.7em 0.2em;
	background: #e2942d;
	border-radius: 1.3rem;
	right: 2.5%;
	bottom: 15%;
}

.mv-tel:before {
	content: '';
	display: block;
	width: 0.9em;
	aspect-ratio: 1;
	position: absolute;
	inset: 50% calc(100% + -2.4em) auto auto;
	transform: translatey(-45%);
	background: url(../img/mv-tel.svg) no-repeat center;
}

#mv .mv-mail{
	position: absolute;
	font-size: 4rem;
	letter-spacing: 0.05em;
	align-items: center;
	color: #fff;
	padding: 0.1em 1.7em 0.2em;
	background: #e2942d;
	border-radius: 1.3rem;
	right: 2.5%;
	bottom: 4.3%;
}

.mv-mail:before {
	content: '';
	display: block;
	width: 0.9em;
	aspect-ratio: 1;
	position: absolute;
	inset: 50% calc(100% + -2.4em) auto auto;
	transform: translatey(-45%);
	background: url(../img/mv-mail.svg) no-repeat center;
}

@media (max-width: 1440px) {
	#mv .logo1{
		left:2.6%;
	}

	#mv .logo2{
		left:2.6%;
	}

	#mv .mozi{
		top:56%;
	}

	@media (max-width: 1024px) {
		#mv .logo1{
			width:16rem;
		}

		#mv .logo2{
			width: 14.7rem;
			top: 13%;
		}

		#mv .mv-tel{
			font-size:3rem;
			bottom:12%;
		}

		#mv .mv-mail{
			font-size:3rem;
		}

		#mv .mozi{
			top:62.4%;
			width:63%;
		}

		@media (max-width: 840px) {
			#mv .mozi {
				top: 61%;
				width: 55%;
			}

			#mv .img-box{
				height:65rem;
			}

			#mv .img-box:before {
				height:55rem;
			}

			#mv .logo1{
				width:13rem;
			}

			#mv .logo2{
				width: 12.7rem;
			}

			#mv .mv-tel{
				font-size:2.6rem;
				bottom:14%;
			}

			#mv .mv-mail{
				font-size:2.6rem;
			}

			@media (max-width: 520px) {
				#mv {
					padding-top: 0;
				}

				#mv .img-box {
					height: 49rem;
					width: 100%;
					background-position: 58%;
				}

				#mv .mozi {
					top: 60%;
                    width: 87%;
                    z-index: 2;
				}

				#mv .img-box:before {
					height: auto;
					width: 65%;
					z-index: 1;
					aspect-ratio: 1444 / 1297;
				}

				#mv .logo1 {
					width: 11rem;
					top:2.5%;
				}

				#mv .logo2 {
					width: 15rem;
					top: 2.5%;
					left: 34%;
				}

				@media (max-width: 375px) {

				}
			}
		}
	}
}



/* ----------------------------------------------------------------------
キャンペーン
---------------------------------------------------------------------- */
#campain .ttl-box{
	margin:0 auto;
	padding:14rem 0;
}

#campain .img-box{
	margin: 0 auto;
	max-width: 78.1rem;
	width: 100%;
	/* aspect-ratio: 758 / 256; */
	height: 26.6rem;
}

@media (max-width: 1440px) {

	@media (max-width: 1024px) {
		#campain .ttl-box {
			padding: 13rem 0;
		}

		@media (max-width: 840px) {
			#campain .ttl-box {
				padding: 9rem 0;
			}

			#campain .img-box{
				width: 82%;
				height: 22.6rem;
			}

			@media (max-width: 520px) {
				#campain .ttl-box {
					padding: 5rem 0;
				}

				#campain .img-box {
					width: 90%;
					height: 11rem;
				}

				@media (max-width: 375px) {

				}
			}
		}
	}
}



/* ----------------------------------------------------------------------
アバウト
---------------------------------------------------------------------- */
#about{
	background-image: url("../img/top/about-img@2x.webp");
	width: 100%;
	/* 	aspect-ratio: 1920 / 1082; */
	height:108rem;
	background-size: cover;
	background-position: center;

	display: grid;
	place-items: end start;
	position:relative;
}

#about .common-sttl{
	margin: 0 2.1em 0.5em;
}

#about .txt-box{
	background-color:#fff;
	padding:10rem 11rem 10rem 14rem;
}

#about h2{
	font-size: 5rem;
	line-height: 1.5;
	letter-spacing: 0.13em;
	font-weight: 600;
	padding-bottom: 6%;
}

#about .txt{
	font-size: 2rem;
	letter-spacing: 0.13em;
	line-height: 1.8;
}

@media (max-width: 1440px) {
	#about .txt-box{
		background-color:#fff;
		padding:7rem 8rem 7rem 11rem;
	}

	@media (max-width: 1024px) {
		#about{
			height:94rem;
		}

		#about h2{
			font-size:4rem;
		}

		#about .txt{
			font-size: 1.7rem;
		}

		@media (max-width: 840px) {
			#about .txt-box{
				padding:5rem 5rem 5rem 8rem;
			}

			#about{
				height:74rem;
			}

			#about h2{
				font-size:3.5rem;
			}

			#about .txt{
				font-size: 1.5rem;
			}

			@media (max-width: 520px) {
				#about .txt {
					font-size: 1.4rem;
					text-align: center;
					margin: 0 auto;
				}

				#about .txt-box {
					padding: 4rem 4rem;
				}

				#about h2 {
					font-size: 2.5rem;
					text-align: center;
				}

				#about .common-sttl {
					margin: 0 auto 0.5em;
				}

				#about {
					height: 84rem;
				}

				@media (max-width: 375px) {

				}
			}
		}
	}
}


/* ----------------------------------------------------------------------
アワーサービス
---------------------------------------------------------------------- */
#our-service{
	text-align:center;
	background-image: url("../img/top/our-service-back@2x.webp");
	width: 100%;
	height:60rem;
	background-size: cover;
	background-position: center;

	display: grid;
	place-items: end;
	position:relative;
}

#our-service .inner{
	max-width: 999rem;
	width: 94%;
	background-color: #fff;
}

#our-service .txt-box{
	padding:14rem 0 19rem;
}

#our-service h2{
	font-size:6rem;
	letter-spacing: 0.16em;
	font-weight: 600;
	padding-bottom: 0.4em;
	line-height: 1.1;
}

#our-service .txt{
	font-size: 2rem;
	line-height: 1.2;
	letter-spacing: 0.15em
}

@media (max-width: 1440px) {
	#our-service{
		height:50rem;
	}

	#our-service .txt-box {
		padding: 12rem 0 15rem;
	}

	@media (max-width: 1024px) {
		#our-service{
			height:41.5rem;
		}

		#our-service .txt-box {
			padding: 10rem 0 13rem;
		}

		#our-service h2 {
			font-size: 5rem;
		}

		#our-service .txt {
			font-size: 1.7rem;
		}

		@media (max-width: 840px) {
			#our-service{
				height:37rem;
			}

			#our-service .txt-box {
				padding: 9rem 0 12rem;
			}

			#our-service h2 {
				font-size: 4rem;
			}

			#our-service .txt {
				font-size: 1.5rem;
			}

			@media (max-width: 520px) {
				#our-service {
					height: 40rem;
				}

				#our-service .txt-box {
					padding: 8rem 0 14.5rem;
				}

				#our-service h2 {
					font-size: 3rem;
				}

				#our-service .txt {
					font-size: 1.4rem;
					width: 80%;
					margin: 0 auto;
				}

				@media (max-width: 375px) {

				}
			}
		}
	}
}

/* ----------------------------------------------------------------------
トピックス
---------------------------------------------------------------------- */
#topics .inner {
	max-width: 157.7rem;
}

#topics .ttl-box{
	width: fit-content;
	max-width: 26%;
	position: absolute;
	top: -27%;
	left: 7%;
}

#topics .inner .ttl-box .sticky-ttl{
	position: sticky;
	top: 10rem;
	font-size: 4rem;
	line-height: 1;
	letter-spacing: 0.1em;
	padding: 0.6em 0 0.6em;
}
#topics .inner .ttl-box .sticky-ttl:before{
	content: 'Topics';
	display: block;
	font-family: "Oswald", serif;
	font-size: 325%;
	color: #216d2a;
	opacity: .17;
	position: absolute;
	inset: 50% auto auto 50%;
	transform: translate(-50% , -63%);
}

#topics{
	position:relative;
}

#topics .flex-box{
	display:flex;
	align-items:center;
	justify-content:center;
	width:100%;
	color:#fff;
}

#topics .box1, 
#topics .box2, 
#topics .box3 {
	width: calc(100% / 3);
}

#topics .box1{
	background-image: url("../img/top/topics-img01@2x.webp");
	width: 100%;
	height:47.3rem;
	background-size: cover;
	background-position: center;

	position: relative;
	display: grid;
	place-items: center;
}

#topics .box2{
	background-image: url("../img/top/topics-img02@2x.webp");
	width: 100%;
	height:47.3rem;
	background-size: cover;
	background-position: center;

	position: relative;
	display: grid;
	place-items: center;
}

#topics .box3{
	background-image: url("../img/top/topics-img03@2x.webp");
	width: 100%;
	height:47.3rem;
	background-size: cover;
	background-position: center;

	position: relative;
	display: grid;
	place-items: center;
}

#topics .txt-box1,
#topics .txt-box2,
#topics .txt-box3{
	width:fit-content;
	margin:0 auto;
}

#topics .midashi{
	text-align:center;
	font-size:3.5rem;
	font-weight:500;
}

#topics .line{
	display:block;
	border-bottom: 1px solid #fff;
	width: 40%;
	margin: 1.5em auto;
}

#topics .txt{
	font-size:1.7rem;
	padding-bottom:1.5em;
	width: 86%;
	margin: 0 auto;
}

#topics .btn{
	width: 8em;
	aspect-ratio: 1;
	border-radius: 50%;
	border: 1px solid #fff;
	background: url(../img/common/arrow-wh.svg) no-repeat center / 25%;
	display:block;
	margin:0 auto;
}

@media (max-width: 1440px) {
	#topics .inner .ttl-box .sticky-ttl {
		font-size: 3.5rem;
	}

	#topics .ttl-box {
		top: -23%;
		left: 5%;
	}

	@media (max-width: 1024px) {
		#topics .inner .ttl-box .sticky-ttl {
			font-size: 2.7rem;
		}

		#topics .ttl-box {
			top: -19%;
		}

		#topics .midashi{
			font-size:3rem;
		}

		#topics .txt{
			font-size:1.5rem;
		}

		#topics .btn{
			width:7rem;
		}

		#topics .box1 ,#topics .box2 ,#topics .box3{
			height:38rem;
		}

		@media (max-width: 840px) {
			#topics .inner .ttl-box .sticky-ttl {
				font-size: 2.3rem;
			}

			#topics .ttl-box {
				top: -16%;
			}

			#topics .midashi{
				font-size:2.2rem;
			}

			#topics .txt{
				font-size:1.4rem;
			}

			#topics .box1 ,#topics .box2 ,#topics .box3{
				height:34rem;
			}

			#topics .line{
				margin:1em auto;
			}

			@media (max-width: 520px) {
				#topics .flex-box{
					flex-direction:column;
				}

				#topics .ttl-box {
					max-width: 60%;
				}

				#topics .ttl-box {
					top: -8%;
					left:22.7%;
				}

				@media (max-width: 375px) {

				}
			}
		}
	}
}

/* ----------------------------------------------------------------------
サービス
---------------------------------------------------------------------- */
#service{
	padding: 13rem 0;
}
#service .inner{
	max-width: 157.7rem;
	align-items: stretch;
}
#service .inner .ttl-box{
	width: fit-content;
	max-width: 26%;
	position: relative;
}
#service .inner .ttl-box .sticky-ttl{
	position: sticky;
	top: 10rem;
	font-size: 4rem;
	line-height: 1;
	letter-spacing: 0.1em;
	padding: 0.6em 0 0.6em;
}
#service .inner .ttl-box .sticky-ttl:before{
	content: 'Service';
	display: block;
	font-family: "Oswald", serif;
	font-size: 325%;
	color: #216d2a;
	opacity: .17;
	position: absolute;
	inset: 50% auto auto 50%;
	transform: translate(-50% , -63%);
}
#service .inner .service-list{
	width: 71.5%;
}
#service .inner .service-list .service-item{
	font-size: 2rem;
	line-height: 1.5;
	letter-spacing: 0.1em;
	padding: 0 1.5em 3.5em;
	margin-bottom: 3.5em;
	border-bottom: 1px solid #333;
	align-items: center;
}
#service .inner .service-list .service-item:last-child{
	padding-bottom: 0;
	margin-bottom: 0;
	border-bottom: none;
}
#service .inner .service-list .service-item .txt-box{
	width: 49%;
}
#service .inner .service-list .service-item .txt-box > h3{
	font-size: 175%;
	font-weight: 600;
	line-height: 1;
	margin-bottom: .8em;
	color: #295b31;
}
#service .inner .service-list .service-item .txt-box .common-btn01{
	margin-top: 2em;
}
#service .inner .service-list .service-item .txt-box{
	width: 49%;
}
#service .inner .service-list .service-item .img-box{
	width: 49%;
	height:29.4rem;
	overflow: hidden;
	background-color: #e1e1e1;
}

@media (max-width: 1440px) {
	#service .inner .ttl-box .sticky-ttl {
		font-size: 3.5rem;
	}

	@media (max-width: 1024px) {
		#service .inner .service-list .service-item .img-box {
			height: 23rem;
		}

		#service .inner .service-list .service-item .txt-box > h3 {
			font-size: 163%;
		}

		#service .inner .service-list {
			width: 74.5%;
		}

		#service .inner .ttl-box .sticky-ttl {
			font-size: 2.7rem;
		}

		#service .inner .service-list .service-item {
			font-size: 1.7rem;
		}

		.common-btn01 .btn {
			width: 5em;
		}

		@media (max-width: 840px) {
			#service .inner .service-list .service-item .img-box {
				height: 21rem;
			}

			#service .inner .ttl-box .sticky-ttl {
				font-size: 2.3rem;
			}

			#service .inner .service-list .service-item {
				font-size: 1.4rem;
			}

			#service {
				padding: 9rem 0;
			}

			@media (max-width: 520px) {
				#service .inner .service-list {
					width: 100%;
				}

				#service .flex-wrap {
					flex-direction: column;
					justify-content: center;
					align-items: center;
				}

				#service .inner .ttl-box {
					padding-bottom:2em;
					max-width: 50%;
				}

				#service .inner .service-list .service-item .img-box {
					width: 100%;
					height: 18rem;
				}

				#service .inner .service-list .service-item .txt-box {
					width: 100%;
				}

				#service .inner .service-list .service-item .txt-box .common-btn01 {
					margin-top: 1.5em;
					margin-bottom: 1.5em;
				}

				#service .inner .service-list .service-item {
					padding: 0 0 3.5em;
				}

				@media (max-width: 375px) {

				}
			}
		}
	}
}

/* ----------------------------------------------------------------------
ニュース
---------------------------------------------------------------------- */
#news{
	padding: 13rem 0;
}
#news .inner{
	align-items: center;
	row-gap: 3rem;
}
#news .inner .ttl-block{
	width: fit-content;
	max-width: 32%;
	color: #fff;
}
#news .inner .ttl-block .ttl-box > h2{
	font-size: 6rem;
	line-height: 1;
	letter-spacing: 0.1em;
}
#news .inner .ttl-block .common-btn01{
	margin-top: 3em;
}
#news .inner .news-list{
	width: 67%;
}
#news .inner .news-list .news-item{
	border-bottom: 1px solid #fff;
	color: #fff;
}
#news .inner .news-list .news-item a{
	font-size: 2.5rem;
	line-height: 1;
	letter-spacing: 0.1em;
	padding: 1em 0.4em;
	align-items: center;
	position: relative;
}
#news .inner .news-list .news-item a .ttl{
	width: calc(100% - 7em);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
#news .inner .news-list .news-item a .btn{
	width: .5em;
}

@media (max-width: 840px) {
	#news .inner .ttl-block {max-width: 100%;}
	#news .inner .news-list {width: 100%;}

	@media (max-width: 520px) {
		#news .inner .ttl-block .ttl-box > h2 {font-size: 4.5rem;}
		#news .inner .ttl-block .common-btn01 {margin-top: 4em;}
		#news .inner .news-list .news-item a {font-size: 1.6rem;padding: 3.4em 0.4em 2em;}
		#news .inner .news-list .news-item a .date{position: absolute;inset: 2em auto auto 0.4em;}
		#news .inner .news-list .news-item a .ttl{width: calc(100% - 1em);}

	}
}