@charset "UTF-8";

/* ================================================================================
KV
================================================================================ */
@media print, screen
{

#KV{	background: var(--Cgray5);	}
#KV > .inner
{
	display: flex;	justify-content: center;	align-items: center;
	height: calc(var(--headerH) + 300 * var(--v));
	padding-top: var(--headerH);
}
#KV p
{
	margin-bottom: calc(20 * var(--v));

	color: var(--Ctheme1);
	font-family: var(--Roboto);
	font-size: var(--fzv115);
	font-weight: 100;
	text-align: center;
}
#KV h1
{
	font-size: var(--fzv22);
	font-weight: 300;
	text-align: center;
}

}
@media screen and (max-width: 767px)
{

#KV p{	font-size: var(--fzv60);	}

}


/* ================================================================================
faq
================================================================================ */
@media print, screen
{

#faq{	background: white;	}


#faq .tabs
{
	display: flex;

	display: none !important;

	gap: calc(10 * var(--u));
	border-bottom: 3px solid var(--Ctheme2);
}
#faq .tabs li
{
	display: flex;	justify-content: center;	align-items: center;
	width: calc(135 * var(--u));	height: calc(55 * var(--v));

	padding: 0 calc(5 * var(--u));

	background: var(--Cgray5);
	border-radius: calc(4 * var(--v)) calc(4 * var(--v)) 0 0;

	/* color: white; */
	font-size: calc(14 * var(--v));
	line-height: 1.3;
	text-align: center;

	cursor: pointer;
}
#faq .tabs li[active]
{
	background: var(--Ctheme2);
	color: white;
}


#faq .postList li
{
	border-bottom: 1px solid var(--Cgray3);
}
#faq .postList li:first-child{	border-top: 1px solid var(--Cgray3);	}

#faq .postList .icon
{
	flex-shrink: 0;
	width: calc(50 * var(--v));
}
#faq .postList .icon p
{
	font-family: var(--Roboto);
	font-size: var(--fzv25);
	font-weight: 600;
	text-align: center;
}
#faq .postList .Q .icon p{	color: var(--Ctheme1);	}
#faq .postList .A .icon p{	color: var(--Ctheme2);	}

#faq .postList .Q
{
	padding: calc(25 * var(--v)) calc(10 * var(--v)) calc(25 * var(--v)) 0;
	cursor: pointer;
}
#faq .postList .A{	padding: calc(15 * var(--v)) calc(50 * var(--v)) calc(25 * var(--v)) 0;	}

#faq .postList .Q,
#faq .postList .A
{
	display: flex;	justify-content: space-between;	align-items: center;
	gap: calc(10 * var(--v));
}

#faq .postList .Q .texts,
#faq .postList .A .texts
{	width: 100%;	}

#faq .postList .plus
{
	container-type: inline-size;
	position: relative;

	flex-shrink: 0;
	width: calc(15 * var(--v));	aspect-ratio: 1;
}
#faq .postList .plus::before,
#faq .postList .plus::after
{
	position: absolute;
	top: 50cqw;	left: 0;
	content: "";
	display: block;
	width: 100cqw;	height: 2px;
	background: var(--Cgray1);

	transition: var(--T02);
}
#faq .postList .plus::after{	transform: rotate(90deg);	}

#faq .postList li.ON .plus::before{	transform: rotate(-180deg);	}
#faq .postList li.ON .plus::after{	transform: rotate(0deg);	}

#faq .postList .Q .texts h3,
#faq .postList .A .texts p
{
	font-size: var(--fzv16);
	line-height: 1.7;
	text-align: justify;
}
#faq .postList .Q .texts h3{	font-weight: 500;	}

}
@media screen and (max-width: 767px)
{

#faq .selectWrap
{
	position: relative;

	display: none !important;
}
#faq select
{
	width: 100%;
	padding: 5vw;

	background: white;
	border-radius: 2vw;
	box-shadow: var(--shadow0);

	appearance: none;
}
#faq .selectWrap::after
{
	position: absolute;
	top: 6vw;	right: 5vw;

	content: "";
	display: block;
	width: 3vw;	aspect-ratio: 4/3;
	background: var(--Ctheme2);
	clip-path: polygon(0 0,50% 100%, 100% 0);
}

}






/* ======================================== end ======================================== */