@charset "utf-8";

/* -------------------------------------------------------------------------
	FAQ
========================================================================= */
#faq {}
#faq article.container {
	max-width: 880px;
	padding-bottom: 80px;
	}

#faq section { text-align: center; }
#faq .life { padding-top: 48px; }
#faq .admission { padding-top: 100px; }

#faq .pageTitle { margin-bottom: 32px; }
#faq .pageTitle::before,
#faq .pageTitle::after {
	width: 30px;
	height: 30px;
	top: -2px;
	}
#faq .life .pageTitle::before {
	left: -45px;	
	background: url("../img/icon_fillflower.svg") no-repeat;
	}
#faq .life .pageTitle::after {
	right: -40px;	
	background: url("../img/icon_flower.svg") no-repeat;
	}
#faq .admission .pageTitle::before {
	left: -45px;	
	background: url("../img/icon_star.svg") no-repeat;
	}
#faq .admission .pageTitle::after {
	right: -35px;	
	background: url("../img/icon_triangles.svg") center no-repeat;
	}

#faq .faqList {
	text-align: left;
	counter-reset: count 0;
	}
#faq .question {
	margin-left: 1.8em;
	padding: 35px 25px 10px 0;
	font-size: var(--font-size-large);
	text-indent: -1.8em;
	line-height: 180%;
	}
#faq .question::before {
	content: "Q."counter(count);
	counter-increment: count 1;
	}
#faq .anser {
	height: 0;
	padding-left: 1.8em;
	position: relative;
	transform: translateY(-10px);
	opacity: 0;/*0.5*/
	overflow: hidden;
	line-height: 200%;
	}
#faq .anser::before {
	content: "A.";
	position: absolute;
	top: 0;
	left: 0;
	color: #FFD800;
	font-size: var(--font-size-large);
	}
#faq .anser > ul {
	display: flex;
	flex-direction: column;
	/*gap: 30px;*/
	}
#faq .anser > ul li {
	position: relative;
	padding-left: 1.3em;
	}
#faq .anser > ul li::before {
	content: "●";
	position: absolute;
	top: 0;
	left: 0;
	color: #FFD800;
	}
#faq .anser > ul li a {
	color: var(--def-font-color);
	text-decoration: underline;
	}
#faq .anser > ol {
	list-style-type: none;
	counter-reset: olnum;
	}
#faq .anser > ol li {
	margin-left: 1.5em;
	padding-bottom: 15px;
	text-indent: -1.5em;
	}
#faq .anser > ol li:before {
	counter-increment: olnum;
	content: counter(olnum)'…';
	}

#faq .toggle { display: none; }
#faq .faqLabel {
	width: 100%;
	display: block;
	position: relative;
	z-index: 10;
	cursor: pointer;
	color: var(--accent-color);
	}
#faq .faqLabel::before {
	content: "";
	display: block;
    width: 7px;
    height: 7px;
	margin: auto;
	position: absolute;
	top: 40px;
	/*bottom: 0;*/
	right: 8px;
    border-top: 1px solid var(--accent-color);
    border-right: 1px solid var(--accent-color);
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
	}
#faq .faqLabel,
#faq .anser {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transition: all .3s ease-out;
	}
#faq .toggle:checked + .faqLabel + .anser {
	height: auto;
	margin-bottom: 70px;
	opacity: 1;
	transform: translateY(0);
	transition: all .3s ease-out;
	}
#faq .toggle:checked + .faqLabel { cursor: pointer; }/*default*/
#faq .toggle:checked + .faqLabel::before {
	top: 45px;/*10px*/
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
	}

/* SMARTPHONE ONLY */
@media screen and (max-width: 768px) {
#faq .life { padding-top: 30px; }
#faq .admission { padding-top: 80px; }
#faq .pageTitle { margin-bottom: 5px; }
#faq .anser { padding-left: 0; padding-top: 2.5em; margin-top: -2.5em; }
/*#faq .anser::before { position: relative; }*/
#faq .question {
	margin-left: 1.8em;
	padding: 15px 25px 15px 0;
	}
#faq .faqLabel::before { top: 25px; }
#faq .toggle:checked + .faqLabel + .anser {
	margin-top: 0;
	margin-bottom: 40px;
	}
#faq .toggle:checked + .faqLabel::before { top: 30px; }
}