@charset "UTF-8";
.faq {
		padding-top: 182px;
		overflow: hidden;
		position: relative;
}
.faq .logo-bg:before {
		transform: scale(1, -1);
}
.faq .logo-bg:after {
		display: none;
}
.faq .h1 {
		font-weight: 600;
		font-size: 2.675rem;
		text-align: center;
		margin: 0 0 60px 0;
		position: relative;
}
@media only screen and (min-width: 1000px) {
		.faq {
				padding-top: 168px;
				margin-bottom: calc(96px - var(--vspace-small));
		}
		.faq .h1 {
				margin-bottom: 130px;
				line-height: 1.03;
		}
}
.faq .h1:before, .faq .h1:after {
		content: '';
		position: absolute;
		background-repeat: no-repeat;
		background-position: 50% 50%;
		background-size: contain;
		pointer-events: none;
		z-index: 1;
}
.faq .h1 > * {
		display: inline-block;
		vertical-align: top;
		position: relative;
		z-index: 2;
}
.faq .nav {
		font-weight: 600;
		font-size: 24px;
		line-height: normal;
		margin: 0 0 50px 0;
}
.faq .nav .title {
		display: none;
}
.faq .nav .link {
		color: inherit;
		text-decoration: none;
		transition: color 0.5s var(--move-timing);
}
.faq .nav .link.active {
		color: var(--white);
}
.faq-slider-nav {
		overflow: visible !important;
}
.faq-slider-nav .swiper-slide {
		width: auto;
}
.faq-slider-nav .swiper-slide:not(:first-child) {
		padding-left: 15px;
}
.faq-slider-nav .swiper-slide:not(:last-child) {
		padding-right: 15px;
}
.faq-slider-nav .swiper-slide:first-child {
		margin-left: auto;
}
.faq-slider-nav .swiper-slide:last-child {
		margin-right: auto;
}
@media only screen and (min-width: 760px) {
		.faq .logo-bg:before {
				width: 709px;
				top: 35px;
				left: 58.75%;
		}
		.faq .h1 {
				font-size: 10rem;
		}
		.faq .h1:before {
				background-image: url("../img/faq/top-r-desktop.svg");
				width: 16.375rem;
				height: 16.375rem;
				top: 1.65em;
				right: -0.01em;
				transform: translate3d(0, -50%, 0);
		}
		.faq .h1:after {
				background-image: url("../img/faq/top-l-desktop.svg");
				width: 16.375rem;
				height: 16.375rem;
				top: 0.55em;
				left: 1.15em;
				transform: translate3d(0, -52%, 0);
		}
}
@media only screen and (max-width: 759px) {
		.faq .logo-bg:before {
				width: 310px;
				top: 40px;
				left: 45%;
				display: none;
		}
		.faq .h1:after {
				top: 50%;
				left: 0;
				background-image: url("../img/faq/top-l-mobile.svg");
				width: 12.875rem;
				height: 12.875rem;
				transform: translate3d(-40%, -50%, 0);
		}
		.faq .h1:before {
				top: 50%;
				left: 100%;
				background-image: url("../img/faq/top-r-mobile.svg");
				width: 19.375rem;
				height: 19.375rem;
				transform: translate3d(-45%, -70%, 0);
		}
}
.faq-slider .swiper-slide {
		width: 100%;
}
.faq .list {
		list-style: none;
		margin: 0;
		padding: 0;
		font-weight: 500;
		font-size: 18px;
}
.faq .head {
		cursor: pointer;
		user-select: none;
		display: flex;
		align-items: center;
		min-height: 80px;
		position: relative;
		font-weight: 600;
		line-height: 1.3;
		color: var(--white);
		background: var(--block-bg);
		border-style: solid;
		border-color: var(--block-border);
		border-width: 1.33px;
		border-radius: 15px;
		margin: 0;
		padding: 18px 64px 18px 24px;
}
.faq .head:not(:first-child) {
		margin-top: 20px;
}
.faq .head:after {
		content: '';
		position: absolute;
		top: 50%;
		right: 24px;
		background: url("../img/arrow-faq.svg") no-repeat 50% 50%;
		background-size: contain;
		width: 40px;
		height: 40px;
		transform: translate3d(0, -50%, 0) rotate(0deg);
		transition: transform 0.5s var(--move-timing);
}
.faq .head.open:after {
		transform: translate3d(0, -50%, 0) rotate(-180deg);
}
.faq .text {
		background: var(--block-bg);
		border-style: solid;
		border-color: var(--block-border);
		border-width: 0 1.33px 1.33px 1.33px;
		border-radius: 0 0 15px 15px;
		overflow: hidden;
		backface-visibility: hidden;
		transform: translateZ(0);
		margin: -9px 0 0 0;
		padding: 0;
		position: relative;
		--height: 20vh;
		height: 9px;
		transition: height 0.5s var(--move-timing);
}
.faq .text .inner {
		padding: 0 24px 19px 24px;
		opacity: 0;
		transition: opacity 0.5s var(--move-timing);
}
.faq .head.open + .text {
		height: var(--height);
}
.faq .head.open + .text .inner {
		opacity: 1;
}
@media only screen and (min-width: 960px) {
		.faq .grid {
				display: flex;
				align-items: flex-start;
				margin: 0 auto;
				max-width: 1200px;
		}
		.faq .nav {
				flex: 0 0 auto;
				width: 30%;
		}
		.faq .wrap {
				flex: 0 0 auto;
				width: 70%;
		}
		.faq .nav .title {
				font-weight: 500;
				font-size: 16px;
				margin: -4px 0 25px 0;
				display: block;
		}
		.faq-slider-nav, .faq-slider-nav .swiper-wrapper {
				transform: none !important;
				transition: none !important;
				display: block !important;
				width: auto !important;
				height: auto !important;
				margin: 0 !important;
				padding: 0 !important;
		}
		.faq-slider-nav .swiper-slide {
				margin: 0 !important;
				padding: 0 !important;
		}
		.faq-slider-nav .swiper-slide:not(:first-child) {
				margin-top: 12px !important;
		}
}