@charset "utf-8";

/*リンクボタン*/
.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;}
#faq header {text-align: center; z-index: 1; margin-bottom: 30px;}
#kahen, #siyou, #kakaku, #deta, #syukka, #osiharai {margin-top: 60px;}

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

#faq ul li p span {font-weight:700; color: #e66478; padding-left: 18px;}
#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;
}