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

	- page_title
	- inquiry
	- qa

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

/*----------------------------------------
	page_title
-----------------------------------------*/
#page_title {
	position: relative;
	width: 100%;
	padding: min(8.5vw,136px) 0 min(8.31vw,133px);
}

#page_title::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	border-right: 19.37vw solid var(--bg-color01);
	border-bottom: 19.37vw solid transparent;
	z-index: -1;
}

#page_title h1 {
	width: min(80vw,1280px);
	margin: 0 auto;
}

@media screen and (max-width: 1200px) {
	#page_title h1 {
		width: min(80vw,960px);
	}
}

@media screen and (max-width: 768px) {
	#page_title {
		padding: 15.63vw 0 14.38vw;
	}
	#page_title::before {
		border-right: 30vw solid var(--bg-color01);
		border-bottom: 30vw solid transparent;
	}
	#page_title h1 {
		width: 90%;
	}
}

/*----------------------------------------
	inquiry
-----------------------------------------*/
#inquiry {
	width: 960px;
	margin: 0 auto;
}

#inquiry dd {
	display: flex;
	justify-content: flex-end;
	margin-top: min(3.12vw,50px);
}

#inquiry dd a {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	width: 360px;
	padding: 25px 0 27px;
	border-radius: 36px;
	border: 1px solid var(--link-color01);
	background: var(--txt-color00);
	overflow: hidden;
}

#inquiry dd a::before {
	content: "";
	position: absolute;
	top: calc(50% - 8px);
	left: 28px;
	width: 16px;
	height: 16px;
	background: url(../../img/c_arrow01.svg) no-repeat left top;
	animation: btn-left-arrow_back 0.2s cubic-bezier(0.8, 0, 0.2, 1);
	opacity: 0;
}

#inquiry dd a:hover::before {
	left: 28px;
	animation: btn-left-arrow 0.2s cubic-bezier(0.8, 0, 0.2, 1);
	opacity: 1;
}

#inquiry dd a::after {
	content: "";
	position: absolute;
	top: calc(50% - 8px);
	right: 28px;
	width: 16px;
	height: 16px;
	background: url(../../img/c_arrow01.svg) no-repeat left top;
	animation: btn-right-arrow_back 0.2s cubic-bezier(0.8, 0, 0.2, 1);
	opacity: 1;
}

#inquiry dd a:hover::after {
	right: 28px;
	animation: btn-right-arrow 0.2s cubic-bezier(0.8, 0, 0.2, 1);
	opacity: 0;
}

@media screen and (max-width: 1200px) {
	#inquiry {
		width: min(80vw,960px);
	}
}

@media screen and (max-width: 768px) {
	#inquiry {
		width: 90%;
	}
	#inquiry dd {
		margin-top: 8.38vw;
	}
	#inquiry dd a {
		width: 60vw;
		padding: 3.75vw 0;
		border-radius: 6vw;
	}
	#inquiry dd a::before {
		content: none;
		animation: none;
	}
	#inquiry dd a:hover::before {
		animation: none;
		opacity: 0;
	}
	#inquiry dd a::after {
		top: calc(50% - 1.31vw);
		right: 4.75vw;
		width: 2.62vw;
		height: 2.62vw;
		background-size: cover;
		animation: none;
	}
	#inquiry dd a:hover::after {
		right: 4.75vw;
		animation: none;
		opacity: 1;
	}
}

/*----------------------------------------
	qa
-----------------------------------------*/
#qa {
	width: 960px;
	margin: min(6.25vw,100px) auto 0;
	border-bottom: 1px solid var(--bg-color03);
}

#qa > li {
	border-top: 1px solid var(--bg-color03);
}

#qa > li > dl > dt {
	padding: min(2.25vw,36px) 0;
	cursor: pointer;
}

#qa > li > dl > dt span {
	display: block;
	position: relative;
	padding-right: 30px;
}

#qa > li > dl > dt span::before {
	content: "";
	position: absolute;
	top: calc(50% - 0.5px);
	right: 0;
	width: 20px;
	height: 1px;
	background: var(--txt-color01);
}

#qa > li > dl > dt span::after {
	content: "";
	position: absolute;
	top: calc(50% - 10px);
	right: 9px;
	width: 1px;
	height: 20px;
	background: var(--txt-color01);
}

#qa > li > dl > dt.questions.active span::after {
	display: none;
}

#qa > li > dl > dd {
	height: 100%;
	margin-right: 30px;
}

#qa > li > dl > dd > p + ul {
	margin-top: min(1.5vw,24px);
}

#qa > li > dl > dt.questions.active + dd.answers {
	margin: 0 30px min(2.25vw,36px) 0;
	transition: all 0.3s cubic-bezier(0.45, 0, 0.55, 1) 0s;
}

#qa > li > dl > dd.answers {
	max-height: 0;
	overflow: hidden;
	transition: all 0.3s cubic-bezier(0.45, 0, 0.55, 1) 0s;
}

@media screen and (max-width: 1200px) {
	#qa {
		width: min(80vw,960px);
	}
}

@media screen and (max-width: 768px) {
	#qa {
		width: 90%;
		margin-top: 15vw;
	}
	#qa > li > dl > dt {
		padding: 6.5vw 0;
	}
	#qa > li > dl > dt span {
		padding-right: 15vw;
	}
	#qa > li > dl > dt span::before {
		width: 5vw;
	}
	#qa > li > dl > dt span::after {
		top: calc(50% - 2.5vw);
		right: 2.25vw;
		height: 5vw;
	}
	#qa > li > dl > dd {
		margin-right: 15vw;
	}
	#qa > li > dl > dd > p + ul {
		margin-top: 5vw;
	}
	#qa > li > dl > dt.questions.active + dd.answers {
		margin: 0 15vw 6.5vw 0;
	}
}