@charset "utf-8";

.faq_bg{
	width: 100%;
    background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	z-index: 0;
	margin-bottom: 100px;
}

.faq_bg::after{ 
	content:'';
	position: absolute;
    background: linear-gradient(90deg, rgba(144,197,252,1) 0%, rgba(170,210,252,1) 47%, rgba(214,236,255,1) 100%);
    width: 100%; 
	height: 300px;
    top:0;
    left:0;
    z-index:0;
}

.faq_bg h2{
	position: relative;
	z-index: 1;
	color: #fff;
    margin-top: 120px;
	text-align: center;
    line-height: 1.1em;
    font-weight: 600;
}

.faq_bg h2 span{
	font-size:50%;
　　font-family: 'Oswald', sans-seｒrif;
   font-weight: 400;
}

/*リンクボタン*/
.lbtn-faq {
	display: inline-block;
	vertical-align: 1px;	/* blockの垂直方向の配置 */
	line-height: 0;
	font-weight: 500;
	border-radius: 50px;
	font-size: 90%;
	padding: 7px 4px 9px 4px;
	margin: auto 4px;
	background: rgba(255,255,255,0.8);
	border: 1px solid #e66478;
	color: #e66478;
	/*アニメーションの指定*/
	transition:all 0.3s ease-in-out;
}
.lbtn-faq:hover {background: #e66478; color: #fff;}

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

#faq {margin-bottom: 100px; max-width: 1000px; margin: 0 auto 100px auto;}
#faq header {text-align: center; z-index: 1; margin-bottom: 30px;}
#kahen, #siyou, #kakaku, #deta, #syukka, #osiharai {margin-top: 60px;}

#faq h2 {text-align: center;font-size: 2rem; margin: 80px auto 10px auto;}
#faq ul li h3.title {font-size: 1.2rem; padding-left: 43px; margin: 30px 0 8px;}
#faq ul li h3 span {
	position: absolute;
	top: 26px;
	left: 16px;
	font-size:1.2rem;
	line-height: 0;	/*行間*/
	margin-right: 6px;
	font-weight:600;
	color: #00a0e6;
}

/*サンプル請求ボタン*/
.sample_btn{color:#E9BA00;  padding: 1px 8px; border: 1.5px solid #E9BA00; border-radius: 20px; background: #fff;}

.sample_btn:hover{color: #fff; border: 1.5px solid #E9BA00; background: #E9BA00;}


/*お問合せボタン*/
.contact_btn{color:#FF8F00;  padding: 1px 8px; border: 1.5px solid #FF8F00; border-radius: 20px; background: #fff;}

.contact_btn:hover{color: #fff; border: 1.5px solid #FF8F00; background: #FF8F00;}


/*リンクボタン共通*/
#faq ul li p span {font-weight:500;}
/*#faq ul li p span:before{
	content: "●";
	position: absolute;
	font-size:1rem;
	margin: -2px 0 0 -19px;
	color:rgba(230,100,120,0.5);
}*/

#faq ul li p {color: #000; position: relative; padding-left: 26px;}
#faq ul li p:before {
	content: "A.";
	position: absolute;
	top: 12px;
	left: 0;
	font-size:1.2rem;
	line-height: 0;
	margin-right: 6px;
	font-weight:700;
	color: #e66478;
}

#faq #faq-nav {
	background: #fff;
	z-index: 3;
	/*stickyで固定*/
	position: -webkit-sticky;/*Safari*/
	position: sticky;
	/*固定したい位置*/
	top: 70px;
}

/* ページ内リンクボタンのエリア */

#faq .faq-area {text-align: center; position: relative; z-index: 2; margin-top: 30px;}
#faq .faq-area ul {display: flex; flex-wrap: wrap; justify-content:space-between;}

#faq .faq-area ul li {
	display: inline-block;
	width: 30%;
	vertical-align: top; /* 内容の上下方向の揃え位置 */
	text-align: left;
}
#faq .faq-area ul li a {display: block;}

@media screen and (max-width:768px) {
	#faq .faq-area ul {justify-content: space-evenly;}
	#faq .faq-area ul li {width: 40%; line-height: 1.5;}
}

@media screen and (max-width:430px) {
	#faq .faq-area ul li {width: 100%; font-size: 0.8rem;}
}

/* ページ内リンクボタン */
#faq .faqbtn {
	position:relative;
	color:#333;
	padding: 10px 20px 5px 5px;
	display:inline-block;
	text-decoration: none;
	outline: none;
}

#faq .faqbtn::before,
#faq .faqbtn::after {
	content:'';
	position:absolute;
	z-index:1;
	bottom:0;
	left:0;
	background:#dcdcdc;
	width:100%;
	height:1.5px;
	/*アニメーションの指定*/
	transition:all 0.3s ease-in-out;
}

#faq .faqbtn::after {width:0; background:#666; height:1.5px;} /*線*/
#faq .faqbtn:hover::after {width:100%;}
#faq .faqbtn span::after {	/*矢印*/
	content: '';
	position: absolute;
	top: 1.3em;
	right: 10px;
	width: 7px;
	height: 7px;
	border-bottom: 1px solid #000;
	border-right: 1px solid #000;
	transform: rotate(45deg);
	/*アニメーションの指定*/
	transition:all 0.3s ease-in-out;
}

#faq .faqbtn:hover span::after {top:23px;}

@media screen and (max-width:768px) {
	#faq .faqbtn span::after {top: 0.7em;}
	#faq .faqbtn {padding: 5px 20px 3px 5px;}
	#faq .faqbtn:hover span::after {top:13px;}
}

@media screen and (max-width:430px) {
	#faq .faqbtn:hover span::after {top:12px;}
}

/*===========================================================*/
/* パーツ */
/*===========================================================*/

/*クリックで隠れていた内容が開く -----------------------------------------------------------------------------------------------------------------------------------------------------------*/

/*アコーディオン全体*/
.accordion-area{margin:0 auto;}
.accordion-area section {border-bottom: 1px solid #dcdcdc;}

/*アコーディオンタイトル*/
.title {
	position: relative;/*+マークの位置基準とするためrelative指定*/
	cursor: pointer;
	line-height: 1.5;
	font-weight: 400;
	padding: 16px 50px 16px 15px;
	/*アニメーションの指定*/
	transition:all 0.3s ease-in-out;
}

/*アイコンの矢印*/
.title::before, .title::after{position: absolute; content:'';}
.title::before{
	top:25%;
	right: 15px;
	width: 25px;
	height:25px;
	background: #b4b4b4;
	border-radius: 50%;
}

.title::after{	 
	top: 36%;
	right: 23px;
	width: 9px;
	height: 9px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	transform: rotate(135deg);
}

/*　closeというクラスがついたら形状変化　*/
.title.close::after{top: 43%; transform:rotate(-45deg);}

@media screen and (max-width:430px) {
	.title.close::after{top: 38%;}
	.title::after{top: 33%;}
}

/*アコーディオンで現れるエリア*/
.box {
	font-weight: 400;
	display: none;/*はじめは非表示*/
	background: #f5f5f5;
	padding: 14px 18px;
}