@charset "utf-8";

/* -----------------------------
	FAQ
-------------------------------- */

.faq-area{
	padding: 0 0 100px;
}

.faq-area .ttl-block {
	text-align: center;
}

.faq-list{
	margin: 60px 0 0;
}

.faq-q{
	display: flex;
    width: 100%;
	align-items: center;
    padding: 30px 20px 30px 30px;
	position: relative;
    cursor: pointer;
	color: #333;
	border-bottom: 1px solid #eee;
}

.faq-q::before, .faq-a::before{
	font: 500 2.2rem / 1 'Cormorant', serif;
	margin: 0 10px 0 0;
    position: absolute;
    left: 30px;
}
.faq-q::before{
	content: 'Q';
    color: var(--green);
}
.faq-a::before{
	content: 'A';
    color: #CFC26C;
	top: 33px;
}

.faq-area .faq-q h3{
	font-size: 1.8rem;
	font-weight: 500;
	padding: 0 0 0 40px;
}

.faq-a{
	display: none;
	background: rgba(207,194,108,.1);
	/*border-bottom: 1px solid #ccc;*/
    /*background: #fff;*/
    padding: 30px 60px 30px 70px;
}

.faq-a{
	line-height: 1.8;
    position: relative;
}

.faq-a p{
	display: inline-block;
	line-height: 2.0;
}

.faq-a-list li::before{
	content: '・';
    display: inline-block;
    color: #BC9E62;
    font-weight: bold;
}

.faq-area img{
	float: right;
	padding: 0 0 0 20px;
}
.faq-area img.normal{
	float: none;
	padding: 0;
}

@media screen and (max-width: 768px){
	.faq-area{
		padding: 0;
	}
	
	.faq-list {
		margin: 20px 0 0;
	}

	.faq-q{
		align-items: flex-start;
		padding: 20px 20px 20px 20px;
		position: relative;
		border-radius: 0;
	}

	.faq-q::before, .faq-a::before{
		font-size: 2rem;
        left: 10px;
		top: 23px;
	}
    .faq-a::before{
        left: 12px;
		top: 25px;
	}
	.faq-area .faq-q h3{
		font-size: 1.6rem;
		line-height: 1.6;
        padding: 0 30px 0 20px;
	}

	.faq-a{
		padding: 20px 20px 20px 40px;
	}

	.accordion-icon{
		right: 0;
	}
	.faq-area img{
		float: none;
		padding: 0 0 10px;
	}
}