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

.page_ttl_wrap {
	background: url("../images/faq/page_ttl_bg.jpg");	
}

.inner_wrap {
	max-width: 900px;
}

.faq {
	padding-block: 5vh;
}

.faq_content {
	max-width: 900px;
	width: 90%;
	margin: 6vh auto;
	display: grid;
	row-gap: 1rem;
}

.faq_content_btn {
	background: #765393;
	border: 3px solid #9F79BF;
	color: #FFF;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50px;
	font-size: clamp(16px,2.2vw,22px);
	font-weight: 500;
	padding: 1rem 1rem;
	position: relative;
	&::after {
		content: '';
		background: url("../images/common/arrow_right.svg") #FFF;
		background-repeat: no-repeat;
		background-size: 6px 11px,contain;
		background-position: left 56% center;
		display: inline-block;
		border-radius: 50px;
		width: 27px;
		height: 27px;
		right: 20px;
		position: absolute;
	}
}

.faq_ttl {
	font-size: clamp(18px,2.5vw,25px);
	font-weight: 600;
	color: #333333;
	position: relative;
	display: flex;
	align-items: stretch;
	&::before {
		content: '';
		background: #9F79BF;
		display: inline-block;
		width: 11px;
		height: auto;
		left: 0px;
		position: relative;
		margin-right: 1rem;
	}
}

.faq-item {
	margin-top: 3vh;
	padding: 1rem;
	background: #FFF;
	border: 1px solid #DBDBDB;
	border-radius: 10px;
}

.faq_mark {
	display: flex;
	align-items: stretch;
	position: relative;
	&::before {
		font-size: clamp(20px,3vw,30px);
		font-weight: bold;
		left: 0px;
		position: absolute;
	}
}

.faq-question {
	font-size: clamp(16px,2.2vw,22px);
	font-weight: 600;
	color: #833B6D;
	border: 0px;
	background: none;
	width: 100%;
	padding-block: 5px;
	padding-inline: 2em 1em;
	cursor: pointer;
	align-items: center;
	text-align: left;
	&::before {
		content: 'Q.';
		color: #D5C9E0;
		top: 6px;
	}
	&::after {
		content: '';
		background: url("../images/faq/acd-open.svg");
		background-repeat: no-repeat;
		background-size: contain;
		display: inline-block;
		width: 2.4vh;
		height: 2.4vh;
		right: 0px;
		position: absolute;
	}
}

.faq-item.is-open .faq-question {
	&::after {
		background: url("../images/faq/acd-close.svg");
		height: 2px;
	}
}

.faq-answer[hidden] {
    display: none;
}

.faq-item.is-open .faq-answer {
    display: flex;
	border-top: 1px solid #DBDBDB;
	padding-block: 2rem;
	margin-top: 2vh;
	&::before {
		content: 'A.';
		color: #CCCCCC;
		top: 20px;
	}
}

.faq-answer {
    overflow: hidden;
    height: 0;
    transition: height .3s ease;
}

.faq-item.is-open .faq-answer {
   .faq-answer_inner {
   		display: grid;
		row-gap: 2vh;
		padding-left: 3em;
		max-width: 717px;
		width: 100%;
		text-align: justify;
   }
}

.faq_list {
	display: grid;
	row-gap: 5px;
	li {
		text-indent: -16px;
		margin-left: 16px;
		&::before {
			content: '●';
			font-size: 10px;
			top: -2px;
			position: relative;
			margin-right: 5px;
		}
	}
}

.faq_btn {
	margin-top: 1rem;
	a {
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		background: #9F79BF;
		color: #FFF;
		border-radius: 8px;
		width: 100%;
		padding: 18px 10px;
		font-size: clamp(16px,2vw,20px);
		font-weight: 500;
		&::after {
			content: '';
			background: url("../images/common/arrow_triangle_right.svg");
			background-repeat: no-repeat;
			background-size: contain;
			display: inline-block;
			width: 16px;
			height: 13px;
			margin-left: 1em;
			position: relative;
		}
	}
}




.faq_message {
	margin-top: 14vh;
}

.message_ttl {
	background: var(--bg-gradient-purple-moz);
	background: var(--bg-gradient-purple-webkit);
	background: var(--bg-gradient-purple);
	color: #FFF;
	font-size: clamp(24px,3vw,32px);
	padding: 2.5% 10px;
	text-align: center;
	width: 100%;
	position: relative;
	&::before {
		content: '';
		background: url("../images/faq/icon_message.png");
		background-repeat: no-repeat;
		background-size: contain;
		display: inline-block;
		width: 15vh;
		height: 14vh;
		left: 16%;
		bottom: 0px;
		position: absolute;
		@media screen and (max-width: 768px) {
			width: 11vw;
			height: 10.5vw;
			left: 18%;
		}
		@media screen and (max-width: 599px) {
			display: none;
		}
	}
}

.faq_message_inner {
	background: #FFF;
	border: 1px solid #DBDBDB;
	position: relative;
	padding: 2rem 3rem 8vh;
}

.message_txt {
	font-size: clamp(16px,2vw,20px);
	font-weight: 500;
	text-align: center;
}

.message_cta {
	max-width: 720px;
	width: 90%;
	margin: 0px auto;
	display: grid;
	row-gap: 1rem;
	margin-top: 3vh;
}