@charset "utf-8";

.mainv{
	background-image: url(../img/faq/mainv.jpg);
}

.faq{
}
.faq_inner{
    padding: 58px 0 137px;
}
.faq_mes{text-align: center;margin: 0 0 83px;}

/* -------------------------------- */
.faq_list{
    margin: 67px 0 112px;
}
.faq_list:last-child{
    margin-bottom: 0px;
}
.faq_list li{
    margin: 0 0 30px;
    border-bottom: 2px solid #f3f2f2;
}
.faq_list_btn{
    background: #f3f2f2;
    font-size: 18px;
    display: block;
    font-weight: 600;
    line-height: 80px;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.faq_list_q{
    position: absolute;
    z-index: 1;
    left: -16px;
    width: 92px;
    top: 0;
    display: block;
    background: #d3052b;
    color: #fff;
    font-size: 30px;
    transform: skewX(14.35deg);
}
.faq_list_q span{
    transform: skewX(-14.35deg);
    display: block;
    margin: 0px 0 0 40px;
}
.faq_list_q_txt{
	position: relative;
	z-index: 1;
	display: block;
	padding: 0 80px 0 101px;
}

.faq_list_q_txt:after,
.faq_list_q_txt:before{
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: auto;
    right: 31px;
    width: 26px;
    height: 0;
    margin: auto;
    border-top: 2px solid #000;
    background: no-repeat;
    transform-origin: unset;

    transition: all 300ms ease;
    -webkit-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
}
.faq_list_q_txt:after{
        transform: rotate(90deg);
}

.faq_list_btn.on  .faq_list_q_txt:before{
        transform: rotate(-90deg);
        opacity: 0;
}
.faq_list_btn.on  .faq_list_q_txt:after{
        transform: rotate(0deg);
}

.faq_list_data{
    position: relative;
    z-index: 1;
    padding: 30px 71px 32px 104px;
    display: none;
}
.faq_list_a{
    font-size: 30px;
    font-weight: 900;
    color: #d3052b;
    position: absolute;
    z-index: 1;
    left: 25px;
    top: 19px;
}
.faq_list_main{
    line-height: 2;
}
.faq_list_main a{
    color: #d3052b;
    text-decoration: underline;
}


@media screen and (min-width: 681px) and (orientation: portrait) ,screen and (min-width: 738px) and (orientation: landscape) {

	.faq_list_btn:hover{
		color: #fff;
	}

	.faq_list_btn:hover .faq_list_q_txt:after,
	.faq_list_btn:hover .faq_list_q_txt:before{
		border-color: #fff;

	}
}

/*---------------------------------------------------------
	スマホ
---------------------------------------------------------*/
@media screen and (max-width: 680px) and (orientation: portrait) ,screen and (max-width: 737px) and (orientation: landscape) {

    .mainv{}

    .faq{}
    .faq_inner{
    padding: 30px 0 59px;
}
    .faq_mes{
    margin: 0 0 42px;
}

    /* -------------------------------- */
    .faq_list{
    margin: 35px 0 60px;
}
    .faq_list:last-child{}
    .faq_list li{
    margin: 0 0 20px;
}
    .faq_list_btn{
    font-size: 14px;
    line-height: 1.8;
}

    .faq_list_q{
    top: 0;
    bottom: 0;
    transform: skewX(-14.35deg);
    font-size: 24px;
    width: 63px;
}
    .faq_list_q span{
    transform: skewX(14.35deg);
    margin: 0px 0 0 24px;
}
    .faq_list_q_txt{
    padding: 15px 47px 15px 76px;
}
    .faq_list_q_txt:after,
    .faq_list_q_txt:before{
    right: 16px;
    width: 16px;
}
    .faq_list_q_txt:after{}
    .faq_list_data{
    padding: 18px 26px 20px 60px;
}
    .faq_list_a{
    font-size: 24px;
    left: 17px;
    top: 11px;
}
    .faq_list_main{}

}