@charset "utf-8";
/* -----------------------------------------------------------
    about
-------------------------------------------------------------- */

.no-wrap{
    white-space: nowrap;
}

#wrapper {
    overflow: clip;
}


/* -----------------------------
	com-pagetitle-area
-------------------------------- */
.com-pagetitle-area .geometry-img.geometry04{
	top: 1170px;
}
.com-pagetitle-area .geometry-img.geometry05{
	top: 1010px;
}
.com-pagetitle-area .geometry-img.geometry06{
	top: 1480px;
}
@media screen and (max-width: 768px){

}

/* -----------------------------------------------------------
    contact
-------------------------------------------------------------- */
.contact-area{
    width: 100%;
	position: relative;

	margin: 100px 0 0;
}
.contact-area .inner1400{
		background: #F2F2F2;
	padding: 70px 50px 70px;
}
.contact-area .top-box .sp-img{
	display: none;
}

.contact-area .top-box .inner1400 {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.contact-area .top-box .inner1400:nth-child(2){
	margin: 20px auto 0;
}


/*電話*/
.contact-area .tel-area{
	text-align: center;
	border: solid 1px var(--line-black);
	flex: 1;
	margin: 0 50px 0 0;
	padding: 10px 0 10px;
}
.contact-area .tel-area .txt{
	font-size: 1.8rem;
	font-weight: bold;
	margin: 0 30px 0 0;
}
.contact-area .tel-area .num{
	font-size: 3.2rem;
	font-weight: 500;
	font-family: var(--en);
	line-height: 1;
	letter-spacing: 0;
}
.contact-area .tel-area .num::before {
    content: "\f879";
    font: 900 2.4rem / 1 var(--webicon);
	margin: 0 10px 0 0;
}

.contact-area .tel-area .sub{
	background: #333;
	color: #fff;
	margin: 0 5px 0 0;
	padding: 0 2px;
}

/*ボタン*/
.contact-area .btn-area{
	display: flex;
	justify-content: space-between;
}
.contact-area .btn-area li{
	width: 400px;
	box-shadow: 0px 10px 30px rgb(0 0 0 / 16%);
	transition: all .5s;
}
.contact-area .btn-area li a{
	position: relative;
	display: flex;
	align-items: center;
	padding: 15px 20px;
	min-height: 120px;
	/* box-shadow: 3px 3px 10px rgba(0,0,0,.2); */
	transition: all .5s;
	padding: 15px 20px 15px 75px;
	gap: 20px;
}

.contact-area .btn-area li:hover{
	box-shadow: none;
	transition: all .5s;
}
.contact-area .btn-area li a:hover::after{
	right: 10px;
}
.contact-area .btn-area .icon{
	/* width: 50px; */
	text-align: center;
}
.contact-area .btn-area .icon img{
	width: 40px;
}
.contact-area .btn-area .txt-area{
	width: calc(100% - 80px);
	font-size: 2.6rem;
	font-weight: 500;
	line-height: 1.3;
}
.contact-area .btn-area .txt-area span{
	font-size: 1.5rem;
	display: block;
}
.contact-area .btn-area li .txt-area span{
	color: #06C755;
	
}
.contact-area .btn-area li.rese .txt-area span{
	color: #3A85E6;
	
}

/*ボタン：web予約*/
.contact-area .btn-area li.rese a{
	background: #fff;
	padding: 15px 20px 15px 60px;
	border: solid 1px var(--line-black);
}
.contact-area .btn-area li.rese .icon img{
	width: 40px;
}
/*ボタン：line*/
.contact-area .btn-area li.line{
	margin: 0 40px 0 0;
}
.contact-area .btn-area li.line a{
	background: #fff;
	border: solid 1px var(--line-black);
}
.contact-area .left-area .btn-area li.line .icon img{
	width: 50px;
	margin: 0 0 0 -5px;
}

@media screen and (max-width: 1600px){
	.contact-area .btn-area li{
		width: 350px;
	}
	.contact-area .btn-area li.line{
		margin: 0 20px 0 0;
	}
	.contact-area .btn-area li a{
		padding: 15px 20px 15px 30px;
	}
	.contact-area .btn-area li.rese a{
		padding: 15px 20px 15px 30px;
	}
	.contact-area .tel-area{
		margin: 0 20px 0 0;
	}
	.contact-area .btn-area .txt-area{
		font-size: 2.2rem;
	}
}

@media screen and (max-width: 768px){

	.contact-area{
		padding: 50px 0 25px;
		margin: 0 0 0;
	}

	.contact-area .top-box .inner1400{
		display: block;
		padding: 40px 20px 30px;
	}
	.contact-area .top-box .inner1400:nth-child(2){
		margin: 20px auto 0;
	}
	.contact-area .catch-s{
		margin: 10px 0 0;
		text-align: center;
	}
	.contact-area .tel-area{
		margin: 0 0 20px;
		background: #fff;
		border: none;
		padding: 11px 0px;
	}
	.contact-area .tel-area .num{
		line-height: 1;
	}
	.contact-area .tel-area .timewrap{
		font-size: 1.2rem;
		padding: 10px 0 0;
	}
	/*SNS*/
	.contact-area .btn-area .icon img{
		width: 39px;
		margin: 0 0 0 0;
	}
	.contact-area .btn-area li.rese .icon img{
		width: 39px;
	}

	.contact-area .btn-area{
		display: block;
	}
	.contact-area .btn-area li{
		width: 100%;
		margin: 0 0 20px 0 !important;
	}
	.contact-area .btn-area .txt-area{
		font-size: 2.2rem;
	}
	.contact-area .btn-area li a,
	.contact-area .btn-area li.rese a{
		min-height: 80px;
		padding: 20px 0px 20px 40px;
		justify-content: flex-start;
	}
	.contact-area .top-box .sp-link{
		text-align: center;
		padding: 15px 0 0;
	}
	.contact-area .top-box .sp-link a::before{
		display: inline-block;
		content: "\f105";
		font-family: 'FontAwesome';
		padding: 0 8px 0 0;
		color: #F0353C;
	}	
}

/* -----------------------------
	.souzoku-service-area
-------------------------------- */
.souzoku-service-area{
	margin: 110px 0 0;

}
.souzoku-service-block{
	display: flex;
		border-top: solid 1px var(--line-black);
	padding: 80px 0 80px 50px;
	margin: 30px 0 0;
}
.souzoku-service-block.declaration{
	padding: 80px 0 0 50px;
}
.souzoku-service-area > div img{
	margin: 0 80px 0 0;
	object-fit: cover;
	width: 450px;
}
.souzoku-service-area .catch-m{
	margin: 20px 0 0;
	font-size: 3.4rem;
}
.souzoku-service-area .basic-txt{
	margin: 20px 0 0;
}
.souzoku-service-area .service-block{
	margin: 20px 0 0;
}
.souzoku-service-area ul{
	display: flex;
	flex-wrap: wrap;
	margin: 20px 0 0;
}
.souzoku-service-area ul li{
	width: calc(100% / 3);
	line-height: 2;
	white-space: nowrap;
}
.souzoku-service-area .btn-more{
	margin: 30px 0 0;
}

@media screen and (max-width: 768px){
	.souzoku-service-area{
		margin: 60px 0 0;
	}
	.souzoku-service-area > div{
		display: block;
		padding: 0 20px 0;
	}
	.souzoku-service-block{
		padding: 20px 0 0;
	}
	.souzoku-service-block.declaration{
		padding: 20px 0 0;
	}
	.souzoku-service-block .section-ttl{
		margin: 60px 0 0 150px;
	}
	.souzoku-service-area ul{
		flex-direction: column;
	}

	.souzoku-service-area > div img{
		margin: 0;
		width: 140px;
		height: 140px;
		position: absolute;
	}
	.souzoku-service-area .section-ttl{
		padding: 0 0 0;
	}
	.souzoku-service-area .section-ttl .jp{
		margin: 0 0 0;
	}
	.souzoku-service-area .catch-m{
		margin: 60px 0 0;
		font-size: 2rem;
	}
	.souzoku-service-area .basic-txt{
		display: none;
	}
	.souzoku-service-area .btn-more{
		margin: 20px 0 0;
	}
	.souzoku-service-area .btn-more a{
		margin: 0 auto;
	}
}

/* -----------------------------
	reason-area
-------------------------------- */
.reason-area{
	margin: 120px 0 0;
}
.reason-area .inner1400{
	border-top: solid 1px var(--line-black);
	padding: 100px 0 0;
}
.reason-area .txt-area .catch-m{
	margin: 30px 0 0;
}
.reason-area .txt-area .basic-txt{
	margin: 30px 0 0;
}
.reason-area ul{
	display: flex;
	flex-wrap: wrap;
	gap: 70px;
	justify-content: center;
	margin: 50px 0 0;
}
.reason-area ul li{
	width: calc((100% / 3) - 60px);
}
.reason-area ul li .num{
	font-family: var(--en);
	color: var(--orange);
	font-size: 2.3rem;
	line-height: 1;
}
.reason-area ul li img{
	width: 100%;
	height: 300px;
	object-fit: cover;
}
.reason-area ul li .catch-s{
	text-align: center;
	padding: 20px 0 0;
	font-weight: 400;
}
.reason-area ul li .basic-txt{
	padding: 20px 0 0;
}

.note-block{
	margin: 80px 0 0;
	border: solid 1px var(--line-black);
	padding: 50px;
	position: relative;
	background: #fff;
	display: flex;
	align-items: center;
}
.note-block::before{
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	right: 0;
	background: var(--orange);
	    transform: rotate(-1.5deg);
	z-index: -1;
}
.note-block .basic-txt{
	margin: 20px 0 0;
}
.note-block img{
	margin: 0 50px 0 0;
	height: 350px;
	width: 500px;
	object-fit: cover;
}

@media screen and (max-width: 768px){
	.reason-area{
		margin: 40px 0 0;
	}
	.reason-area .inner1400{
		padding: 40px 20px;
	}
	.reason-area .txt-area .basic-txt{
		margin: 20px 0 0;
	}
	.reason-area ul{
		margin: 20px 0 0;
		flex-direction: column;
		gap: 20px;
	}
	.reason-area ul li{
		width: 100%;
	}
	.reason-area ul li .num{
		font-size: 1.6rem;
	}
	.reason-area ul li img{
	}
	.reason-area ul li .catch-s{
		text-align: left;
        font-size: 2rem;
        font-weight: 500;
	}
	.reason-area ul li .basic-txt{
	}
	
	.note-block{
		width: 100%;
		padding: 20px;
		display: block;
		margin: 40px 0 0;
	}	
	.note-block::before{

	}
	.note-block::after{
	}
	.note-block .basic-txt{
	}
	.note-block img{
		margin: 0 0 10px;
		width: 100%;
		height: 230px;
		object-position: top;
	}

}

/* -----------------------------
	com-feature-area
-------------------------------- */
.com-feature-area .geometry07{
	top: 500px;
}
.com-feature-area .geometry01{
	top: 1160px;
}
.com-feature-area .geometry03{
	top: 3000px;
}
.com-feature-area .geometry12{
	top: 2420px;
}
.com-feature-area .geometry04{
	top: 3000px;
}
@media screen and (max-width: 768px){

}

/* -----------------------------
	voice-area
-------------------------------- */
.voice-area{
	margin: 150px 0 0;
	position: relative;
}
.voice-area .block{
	display: flex;
	flex-wrap: wrap;
}

.voice-block{
	margin: 30px 0 0;
}
.voice-area .block:nth-child(n + 2){
	margin: 30px 0 0;
}
.voice-area .block > div{
	border: solid 1px var(--line-black);
	padding: 50px;
	background: rgba(255, 255, 255, 0.9);
}
.voice-area .block .catch-s{

}
.before-box{
	background: var(--light-blue);
	padding: 30px;
	position: relative;
	margin: 20px 0 0;
}
.after-box{
	border: solid 1px var(--orange);
	margin: 20px 0 0;
	padding: 30px;
	position: relative;
	background: rgba(255, 255, 255, 0.9);
}
.voice-area .block .title{
	background: var(--orange);
	color: #fff;
	padding: 2px 10px;
	display: inline-block;
	border-radius: 50px;
	position: absolute;
	top: -10px;
}
.voice-area .before-box .title{
	background: var(--blue);
}

.voice-area .geometry01{
	right: -100px;
	bottom: 0;
	width: 600px;
}
.voice-area .geometry07{
	left: -100px;
	top: 1820px;
	width: 300px;
}

.voice-area .geometry03{
	right: 0;
    top: 4360px;
}

@media screen and (max-width: 768px){
	.voice-area{
		margin: 40px 0 0;
	}
	.voice-area .block{
	}

	.voice-block{
	}
	.voice-area .block:nth-child(n + 2){
	}
	.voice-area .block > div{
		padding: 20px;
	}
	.voice-area .block .catch-s{
	}
	.before-box{
		padding: 30px 15px 15px;
	}
	.after-box{
		padding: 30px 15px 15px;
	}
	.voice-area .block .title{
	}
	.voice-area .before-box .title{
	}	
	
	.voice-area .geometry01{
		right: 0;
        bottom: auto;
        top: 1650px;
        width: 200px;
	}
	.voice-area .geometry07{
		left: -30px;
        top: 2830px;
        width: 120px;
	}

	.voice-area .geometry03{
		right: 0;
    top: 5950px;
		width: 60px;
	}
}