@charset "utf-8";
.red{
	color : red;
}
.faq .wrap{
	width : 1000px;
}
.page-nav{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	margin-bottom : 100px;
}
.page-nav ul{
	position : relative;
	display : flex;
	flex-wrap : wrap;
	justify-content : space-between;
	width : 100%;
	height : auto;
	padding-left : 25px;
}
.page-nav ul li{
	position : relative;
	display : list-item;
	width : fit-content;
	height : auto;
}
.page-nav ul li a{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	color : #F25700;
	font-size : 20px;
	font-weight : 600;
	left : -25px;
}
.page-nav ul li a::after{
	content : "";
	position : absolute;
	display : block;
	width : 22px;
	height : 22px;
	background : url(../../images/common/menu-item.png)center / contain no-repeat;
	transform : rotate(90deg);
	top : 0;
	right : -25px;
	bottom : 0;
	left : auto;
	margin : auto auto;
	transition : transform 0.5s ease;
}
.page-nav ul li a:hover::after{
	transform : translate(0, 5px) rotate(90deg);
	transition : transform 0.5s ease;
}
.faq-container{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	border-radius : 25px;
	background-color : #FDE4BD;
	padding : 30px;
	margin-bottom : 50px;
}
.faq-container:last-of-type{
	margin-bottom : 0;
}
.faq-container .inner{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	border-radius : 25px;
	background-color : #FFF;
	padding : 30px;
}



.js-accordion-unit{

}

.accordion-item{

}

.accordion-header{
	cursor : pointer;
	padding : 20px 10px;
	display : flex;
	align-items : center;
	position : relative;
}
.accordion-header .q-icon{
	align-self : flex-start;
	color : #F25700;
	font-size : 18px;
	font-weight : bold;
	margin-right : 1em;
}
.accordion-content .a-icon{
	color : #4199B5;
	font-size : 18px;
	font-weight : bold;
	margin-right : 1em;
}
.accordion-header .question-text,
.accordion-content .answer-text{
	text-align : justify;
	font-size : 18px;
	font-weight : 500;
	padding-right : 40px;
}


.toggle-icon{
	position : absolute;
	right : 10px;
	width : 16px;
	height : 2px;
	background-color : var(--font-color);
}

.toggle-icon::before{
	content : "";
	position : absolute;
	width : 2px;
	height : 16px;
	background-color : var(--font-color);
	top : 50%;
	left : 50%;
	transform : translate(-50%, -50%);
	transition : transform 0.3s ease;
}

.accordion-item.is-active .toggle-icon::before{
	transform : translate(-50%, -50%) rotate(90deg);
}

.accordion-content{
	height : 0;
	overflow : hidden;
	visibility : hidden;
	transition : height 0.3s ease-out, opacity 0.3s ease;
	opacity : 0;
}

.accordion-item.is-active .accordion-content{
	visibility : visible;
	opacity : 1;
}

.answer-wrapper{
	padding : 0 10px 15px 10px;
	display : flex;
	align-items : flex-start;
}





/* # =================================================================
#### responsive
# ================================================================= */
/* # =================================================================
#### 1400px
# ================================================================= */
@media screen and (max-width: 1400px){
.faq .wrap{
	width : 90%;
}
}/*** 1400px ***/
/* # =================================================================
#### 1240px
# ================================================================= */
@media screen and (max-width: 1240px){
.faq .wrap{
	width : 800px;
}
}/*** 1240px ***/
/* # =================================================================
#### 1024px
# ================================================================= */
@media screen and (max-width: 1024px){

}/*** 1024px ***/
/* # =================================================================
#### 896px
# ================================================================= */
@media screen and (max-width: 896px){
.page-nav{
	margin-bottom : 50px;
}
.page-nav ul{
	display : grid;
	grid-template-columns : repeat(2, fit-content(100%));
	justify-content : center;
	column-gap : 60px;
	row-gap : 0;
	padding-left : 0;
}
.page-nav ul li{
	width : fit-content;
	margin-bottom : 15px;
}
.page-nav ul li:nth-last-child(-n+2){
	margin-bottom : 0;
}
.page-nav ul li a{
	font-size : 18px;
	width : fit-content;
	left : 0;
}
.faq .wrap{
	width : 100%;
}

}/*** 896px ***/
/* # =================================================================
#### 600px
# ================================================================= */
@media screen and (max-width: 600px){
.faq-container{
	padding : 10px;
}
.faq-container .inner{
	padding : 20px 15px;
}
.accordion-header .question-text,
.accordion-content .answer-text{
	font-size : 16px;
}
.accordion-header .q-icon,
.accordion-content .a-icon{
	margin-right : 0.5em;
}
}/*** 600px ***/
/* # =================================================================
#### 480px
# ================================================================= */
@media screen and (max-width: 480px){

}/*** 480px ***/
/* # =================================================================
#### 320px
# ================================================================= */
@media screen and (max-width: 320px){

}/*** 320px ***/