/*よくある質問TOP　個別FAQページ用CSS*/

.page-faq,
.single-faq{
	padding:0 4vw 10vw;
}
h2{
	padding:2vw 0 4vw;
}
.page-faq h1{
	font-size: 6vw;
    padding: 10vw 0;
    text-align: center;
}


.faq_title,
.faq_text{
	padding: 8vw 0 8vw 13vw;
	position:relative;
}
.faq_title{
	font-size: 4.5vw;
}

.faq_title::before,
.faq_text::before,
.faq_results_lists li a::before{
	position: absolute;
	left: 0;
	display:flex;
    justify-content:center;
    align-items:center;
    color:#fff;
    font-weight:bold;
    background-size: contain;
	transform: translateY(-50%);
	border-radius:50%;
}

.faq_title::before,
.faq_text::before{
	width: 10vw;
    height: 10vw;
	font-size:6vw;
}
.faq_title::before,
.faq_results_lists li a::before{
    content: "Q";
    top: 50%;
    background: var(--default-bg);
}
.faq_results_lists li a::before{
    width: 7vw;
    height: 7vw;
}



.faq_text{
	border-top:2px dotted #ddd;
}
.faq_text::before{
    content: "A";
    top: 13vw;
    background: #333;
}

.faq_results_related{
	margin-bottom:6vw;
}

#faq-search {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#faq-search input#faq-search-input {
  border: 1px solid #333333;
  border-radius: 3px;
  padding: 2vw 4vw;
  width: 100%;
  line-height: 2;
  margin: 6vw 0;
}
.faq-search-input_wrapper{
	padding:3vw;
	background:#c7ddf6;
	width:100%;
	border-radius:10px;
	margin-bottom: 6vw;
}

.faq_results_lists li{
	border-top: 1px solid #bbb;
}
.faq_results_lists li:last-of-type {
    border-bottom: 1px solid #bbb;
}




#faq_results_search{
	width:100%;
}

.faq_results_lists li a{
	text-decoration: none;
	color: #2F3E46;
	padding: 4vw 0 4vw 11vw;
	display: flex;
	position:relative;
}





@media screen and (min-width: 600px) {
	.page-faq, .single-faq {
	    padding: 0;
	}
	.page-faq h1 {
	    font-size: 30px;
	    padding:70px 0;
	    text-align:left
	}
	.faq_title {
	    font-size: 24px;
	}

	.faq_title, .faq_text {
	    padding: 60px 0 60px 100px;
	}
	h2{
		padding:30px 0;
	}
	.faq_title::before, .faq_text::before {
	    width: 60px;
	    height: 60px;
	    font-size: 30px;
	}
	.faq_text::before{
    	top: 50%;
    }
    .faq_results_lists li a::before {
	    width: 40px;
	    height: 40px;
	}
	.faq_results_related {
	    margin-bottom: 60px;
	}
	.faq_results_lists li a{
		padding: 25px 60px;
	}
	.faq-search-input_wrapper {
		padding:30px;
		margin-bottom:30px;
	}
	#faq-search input#faq-search-input {
	    padding: 5px 30px;
	    margin: 30px 0;
	    height:60px;
	}
}