@charset "utf-8";
.faqList { 
	background: #FFF;
	border-radius: 8px;
	margin-bottom: 16px;
	border: 1px solid #dcdcdc;
}
.faqList dt {
	position: relative;
	-webkit-transition: all .3s ease;
	transition: all .3s ease;
}
.faqList dd { display: none; position: relative; }
.faqList dt::before { color: #ED6A50; }
.faqList dt::before,
.faqList dd::before { position: absolute; left: 16px; }

.faqList dt span{
    display: inline-block;
    border-right: none;
    border-top: none;
    position: absolute;
    right: 16px;
    top: calc(50% - 8px);
    width: 12px;
    aspect-ratio: 1;
    transition: all .3s ease;
    transform: rotate(-45deg);
}
.faqList dt.open span{
    transform: rotate(135deg);
}
.faqList dt span:before{
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    border-bottom: 2px solid #ccc;
    border-left: 2px solid #ccc;
    box-sizing: border-box;
    transform: translate(10%, -10%);
	transition: all .3s ease;
}

.faqList dt.open::after { transform: rotate(135deg); }
/* en */
.faqList.en dt::before { content: 'Q:'; }
.faqList.en dd::before { content: 'A:' }
/* zh-tw */
.faqList.zh-tw dt::before { content: '???:';}
.faqList.zh-tw dd::before { content: '��?:' }

#faq footer #supportNav,
#faq footer .facebook {display: none;}

@media screen and (min-width: 900px) {
	/* pc */
	.sp { display: none !important; }
	#faq #wrap { padding: 70px 0 45px; }
	#faq #gnav { display: none; }
	#faq header h1 a { background-size: contain; }


	.faqList dt {
		font-size: 20px;
        padding: 16px 48px 16px 48px;
		cursor: pointer;
	}
	.faqList dt::after {
		width: 10px;
		height: 10px;
		right: 0;
		top: 50%;
		margin: -4px 0 0;
	}
	.faqList dt:hover,
	.faqList dt:hover::before { color: #ED6A50; }
	.faqList dt:hover span::before { border-color: #ED6A50; }
	.faqList dd {
        padding: 0 16px 16px 48px;
	}

}

@media screen and (max-width: 900px) {
	/* sp */
	.pc { display: none !important; }
	#faq #wrap { padding-bottom: 50px; }
	.faqList { border-bottom: 1px solid #ddd; }
	.faqList dt {
		font-size: 16px;
        padding: 16px 40px 16px 40px;
	}
	.faqList dt span {
		width: 10px;
	}
	.faqList dd {
		font-size: 13px;
        padding: 0 16px 16px 40px;
	}
	.faqList dt::after {
		width: 7px;
		height: 7px;
		right: 0;
		top: 23px;
	}
	.faqList dt.open::after { top: 26px; }
}