@charset "UTF-8";

/* ------------------------------------------------
       よくある質問    
--------------------------------------------------- */

.index .faq-wrap{
	margin-bottom: 60px
}
.faq-wrap dl{
	box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
}
.faq-wrap dl+dl{margin-top:20px;}

.faq-wrap dl dt{
	padding:0 80px 0 40px;
	position: relative;
    cursor: pointer;
	clip-path: polygon(4% 0, 100% 0, 100% 100%, 0 100%, 0 40%);
	background: linear-gradient(to right, #dd1312, #b10100);
	background: -moz-linear-gradient(left, #dd1312, #b10100);
	background: -webkit-linear-gradient(left, #dd1312, #b10100);
	min-height:80px;
	display: flex;
	align-items: center;
	color:#fff
}
.faq-wrap dl dt::after{
    position: absolute;
    content:'';
    display: inline-block;
    width:20px;
    height:20px;
	border-top:2px solid #fff;
	border-right:2px solid #fff;
	transform: rotate(135deg);
    top:0;
    bottom:0;
    margin:auto;
    right:30px;
    transition: transform 0.3s;
}
.faq-wrap dl dt.open::after {
    transform: rotate(315deg); 
}


.faq-wrap dl dd{
    background: #fff;
    margin:0;
    display: none;
}
.faq-wrap dl dd >div{
		display: flex;
		padding:20px 20px 20px 40px;

}

.faq-wrap dl .qa{
	width:50px;
	height:50px;
	background: #fff;
	font-size:3.0rem;
	font-family: "Noto Serif JP", serif;
	font-weight: 900;
	line-height: 1;
	border-radius: 50%;
	color:#000;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 20px
}
.faq-wrap dl dd .qa{
	color:#dd1312;
		background: linear-gradient(to right, #e9be44, #f4eeb0 50%, #e9be44);
	background: -moz-linear-gradient(left, #e9be44, #f4eeb0 50%, #e9be44);
	background: -webkit-linear-gradient(left, #e9be44, #f4eeb0 50%, #e9be44);
}

@media (max-width: 768px) {
	.index .faq .cont-inn{
		padding-bottom: 8vw
	}

	.index .faq-wrap{
		margin-bottom: 6vw
	}
	.faq-wrap dl+dl{margin-top:4vw;}

	.faq-wrap dl dt{
		padding:2vw 8vw 2vw 4vw;
		min-height:16vw;
	}
	.faq-wrap dl dt::after{
		width:3vw;
		height:3vw;
		border-top:2px solid #fff;
		border-right:2px solid #fff;
		top:0;
		bottom:0;
		margin:auto;
		right:4vw;
		transition: transform 0.3s;
	}


	.faq-wrap dl dd{
		background: #fff;
		margin:0;
		display: none;
	}
	.faq-wrap dl dd >div{
			display: flex;
			padding:2vw 8vw 2vw 4vw;

	}
	.faq-wrap dl .txt{
		width:calc(100% - 10vw)
		}
	.faq-wrap dl .qa{
		width:8vw;
		height:8vw;
		background: #fff;
		font-size:4vw;
		font-family: "Noto Serif JP", serif;
		font-weight: 900;
		line-height: 1;
		border-radius: 50%;
		color:#000;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 2vw
	}
	.faq-wrap dl dd .qa{
		color:#dd1312;
			background: linear-gradient(to right, #e9be44, #f4eeb0 50%, #e9be44);
		background: -moz-linear-gradient(left, #e9be44, #f4eeb0 50%, #e9be44);
		background: -webkit-linear-gradient(left, #e9be44, #f4eeb0 50%, #e9be44);
	}

	
}