@charset "utf-8";

#keyVisual{
	background: url("../img/keyvisual_pc.jpg") no-repeat right center / cover;
}

@media screen and (max-width: 1600px){
	#keyVisual{
		background-position: 50% center;
	}
}
@media screen and (max-width: 1024px){
	#keyVisual{
		background-position: 69% center;
	}
}
@media screen and (max-width: 768px){
	#keyVisual{
		background: url("../img/keyvisual_sp.jpg") no-repeat right center / cover;
	}
}
/* ------------------------------------------------------------------------ */

/* ankerContainer

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

.ankerContainer{
	font-family: "Shippori Mincho", serif;
	background: #fff6eb;
	padding: 24px 20px;
	margin-top: 80px;
}

.ankerContainer ul{
	display: flex;
	justify-content: center;
	align-items: stretch;
	gap: 14px;
	max-width: 1300px;
	margin: 0 auto;
}

.ankerContainer ul li{
	position: relative;
	border-radius: 3px;
	overflow: hidden;
	max-width: 300px;
	width: 50%;
}

.ankerContainer li a{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	color: #282730;
	background: #fff;
	text-align: left;
	font-size: 1.8rem;
	font-weight: 700;
	padding: 7px 15px;
	width: 100%;
	height: 100%;
	line-height: 1.444;
}

.ankerContainer li a:hover{
	opacity: 0.8;
}

	.ankerContainer li a::after{
		content: "";
		display: block;
		position: absolute;
		right: 0;
		bottom: 0;
		width: 36px;
		height: 36px;
		background: #f29018 url("/common/img/icon_arrow.png") no-repeat 15px 12px / 15px 4px;
		color: #fff;
		border-bottom-left-radius: 100%;
		transform: rotate(90deg);
	}

.ankerContainer .pageLead{
	margin-top: 64px;
	line-height: 1.778;
	font-weight: 700;
}

@media screen and (max-width: 1200px){
	.ankerContainer ul{
		flex-wrap: wrap;
	}
}
@media screen and (max-width: 768px){
	.ankerContainer ul li{
		width: calc(100% / 2 - 7px);
	}
}
@media screen and (max-width: 767px){
	.ankerContainer{
		margin-top: 40px;
		padding: 10px;
	}
	.ankerContainer ul{
		gap: 10px;
	}
		.ankerContainer li{
			height: 12vw;
			min-height: 54px;
		}
			.ankerContainer li a{
				font-size: clamp(1.1rem,3.2vw,1.8rem);
				padding: 7px 10px;
			}
				.ankerContainer li a::after{
					background-size: 10px 2px;
					background-position: 7px 6px;
					width: 20px;
					height: 20px;
				}
	
	.ankerContainer .pageLead{
		text-align: left;
		margin-top: 40px;
	}
	
}


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

/* よくあるご質問

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

.sec_faq{
	padding-top: 40px;
	padding-bottom: 160px;
}

.sec_faq .hd02{
	margin-top: 120px;
}

.accordion dl{
	background: #fff;
	border: solid 2px #efedfa;
	border-radius: 4px;
}

.accordion dl + dl{
	margin-top: 16px;
}

.accordion dl dt,
.accordion dl dd{
	font-size: 2rem;
	position: relative;
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
}
	.accordion dl dt::before,
	.accordion dl dd .flex::before{
		display: flex;
		justify-content: center;
		align-items: center;
		font-family: "Roboto", sans-serif;
		font-size: 2.6rem;
		font-weight: 600;
		width: 40px;
		height: 40px;
		border-radius: 50%;
		margin-right: 24px;
		flex-shrink: 0;
	}

.accordion dl dt{
	cursor: pointer;
	text-align: left;
	padding: 30px 70px 30px 32px;
}
	.accordion dl dt::before{
		content: "Q";
		background: #4c4398;
		color: #fff;
	}
	.accordion dl dt .txt{
		padding: 5px 0;
	}


.accordion dl dd{
	display: none;
	line-height: 2;
	text-align: left;
	font-weight: 400;
	padding: 0 32px 24px;
}
.accordion dl dd .flex{
	align-items: flex-start;
	justify-content: flex-start;
}
	.accordion dl dd .flex::before{
		content: "A";
		border: solid 2px #4c4398;
		color: #4c4398;
	}

.dli-plus{
	position: absolute;
	text-align: center;
	top: 34px;
	right: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 30px;
	height: 30px;
}
	.dli-plus::before{
		content: "\2b";
		font-size: 1.714em;
		font-family: "FontAwesome";
		font-weight: 400;
		color: #4c4398;
	}
	.active .dli-plus::before{
		content: "\f068";
	}

@media screen and (max-width: 767px){
	.sec_faq{
		padding-top: 0;
		padding-bottom: 100px;
	}
	.sec_faq .hd02{
		margin-top: 80px;
		font-size: clamp(2rem,5vw,2.5rem);
	}
	.accordion dl dt,
	.accordion dl dd{
		font-size: 1.6rem;
	}
	.accordion dl dt{
		padding: 15px 45px 15px 12px;
	}
	.accordion dl dd{
		padding: 0 12px 15px;
	}
	.accordion dl dt::before,
	.accordion dl dd .flex::before{
		font-size: 2rem;
		margin-right: 10px;
		width: 30px;
		height: 30px;
	}
	.dli-plus{
		top: 17px;
		right: 12px;
	}
	.accordion dl dt .txt{
		padding: 3px 0;
	}
}


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

/* お知らせ

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

.sec_news{
	padding-top: 87px;
}
.sec_news .hd01{
	margin-bottom: 53px;
}

.sec_news a.com-btn{
	max-width: 300px;
}

@media screen and (max-width: 767px){
	.sec_news{
		padding-top: 60px;
	}
}


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

/* クオーレがあって良かった

/* ------------------------------------------------------------------------ */
.sec_about{
	position: relative;
}
	.sec_about::before{
		content: "";
		position: absolute;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 150%;
		height: 1160px;
		background: #efedfa;
		border-radius: 50% 50% 0 0;
	}

.sec_about .bgColor{
	padding-bottom: 56px;
	background: #FFFFFF;
	background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 20%, rgba(239, 237, 250, 1) 20%, rgba(239, 237, 250, 1) 100%);
	margin-top: -21px;
}

.sec_about .contents {
	position: relative;
	z-index: 1;
}

.sec_about .lead{
	color: #4c4398;
	font-size: 2.8rem;
	line-height: 2.143;
	letter-spacing: 0.06em;
	text-align: center;
}
.sec_about .lead .big{
	font-size: 1.5em;
	line-height: 2.381;
	margin-bottom: 12px;
	display: inline-block;
}

.map-swiper{
	margin-top: 86px;
}
.map-swiper .swiper-wrapper{
	transition-timing-function: linear;
	gap: 8px;
}
.map-swiper .swiper-slide{
	border-radius: 4px;
	max-width: 350px;
	overflow: hidden;
}
.map-swiper .swiper-slide:nth-child(odd){
	margin-top: 40px;
}

.map-swiper .swiper-slide::before{
	display: grid;
	content: "画像差し替え予定";
	position: absolute;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.5);
	color: #fff;
	place-content: center;
}

.sec_map{
	position: relative;
	z-index: 1;
	background: #fff;
	padding-top: 92px;
	padding-bottom: 0;
}

.sec_map > .contents{
	max-width: 1600px;
	width: 100%;
}

.sec_map h2{
	position: relative;
	z-index: 1;
}
	.sec_map h2::before{
		content: "";
		display: block;
		width: 100%;
		height: 1px;
		background: #001655;
		position: absolute;
		top: calc(100% / 2);
		left: 0;
		z-index: -1;
	}
	.sec_map h2 span{
		display: grid;
		place-content: center;
		background: #fff;
		padding: 0 14px;
		margin: 0 auto;
	}

.sec_map .noshiro h2 span,
.sec_map .mitane h2 span{
	max-width: 170px;
	width: 50%;;
}
.sec_map .hutatsui h2 span{
	max-width: 194px;
	width: 56%;;
}

.sec_map ul{
	gap: 20px;
}
.sec_map li{
	max-width: 520px;
	width: 100%;
}

.sec_map .map{
	margin-top: 10px;
	width: 100%;
	height: 100%;
	aspect-ratio: 13 / 8;
}
.sec_map .map iframe{
	height: 100%;
	width: 100%;
}

.sec_map li.noshiro h2{
	color: #f26da7;
}
	.sec_map li.noshiro h2::before{
		background: #f26da7;
	}

.sec_map li.hutatsui h2{
	color: #39bfa9;
}
	.sec_map li.hutatsui h2::before{
		background: #39bfa9;
	}

.sec_map li.mitane h2{
	color: #f29018;
}
	.sec_map li.mitane h2::before{
		background: #f29018;
	}

.sec_map a.com-btn{
	max-width: 300px;
}


@media screen and (max-width: 1024px){
	.sec_about::before{
		height: 360px;
	}
	.sec_about .lead .big{
		font-size: 1.3em;
	}
}
@media screen and (max-width: 767px){
	.sec_about::before{
		top: 20px;
		height: 320px;
	}
	.sec_about .bgColor{
		padding-bottom: 36px;
	}
	.sec_about .lead{
		font-size: clamp(1.6rem,4vw,1.8rem);
		margin: 0 -10px;
	}
	.sec_about .lead .big{
		font-size: clamp(1.6rem,5vw,2.3rem);
	}
	.map-swiper{
		margin-top: 40px;
	}
	.map-swiper .swiper-slide{
		max-width: 260px;
	}
	
	.sec_map > .contents{
		flex-direction: column;
		width: calc(100% - 40px);
	}
	
	.sec_map ul{
		gap: 40px;
	}
	
	.sec_map h2{
		font-size: 2.2rem;
	}
}