/*-----------------------------------

	intro

-----------------------------------*/
#intro .text{
	width: 60%;
}
#intro .img{
	width: 30%;
	margin-right: 5%;
}
#intro .character{
	right: -60%;
	bottom: -20px;
	width: 260px;
}

#intro h3:before,
#intro h3:after{
	position: absolute;
}
#intro h3:before{
	content: url("../images/deco_star_y.svg");
	width: 50px;
	left: -30px;
	top: -40px;
}
#intro h3:after{
	content: url("../images/deco_star_o.svg");
	width: 25px;
	left: -50px;
	top: 10px;
}

#intro h3 span{
	line-height: 6.8rem;
	background: #fff;
	display: inline-block;
	margin-top: 20px;
	padding: 5px 15px;
}
@media screen and (max-width: 980px){

	#intro .text,
	#intro .img{
		float: none!important;
	}
	#intro .text{
		width: 100%;
		margin-right:0;
	}
	#intro .img{
		width: 50%;
		max-width: 268px;
		margin: 30px auto 30px!important;
	}
}
@media screen and (max-width: 740px) {
	#intro h3{
		margin-left: 2%;
	}
	#intro h3 span {
	  line-height: 3.6rem;
	  background: #fff;
	  display: inline-block;
	  margin-top: 10px;
	  padding: 5px 15px;
	}
	#intro h3::before {
	  width: 30px;
	  left: 0;
	  top: -15px;
	}
	#intro h3::after {
	  width: 15px;
	  left: -10px;
	  top: -15px;
	}

	#intro .character {
		width: 90%;
		max-width: 200px;
	}
}
/*-----------------------------------

	flow

-----------------------------------*/
#flow .point_list.point_list li img {
	width: 100%;
	margin: 20px auto;
	display: block;
}
#flow .point_list.point_list li .num{
	width: 60px!important;
	top:0;
	left: 0;
	margin: 0;
}
#flow .character{
	right: -10%;
	top: -120px;
}
@media screen and (max-width: 980px){
	#flow .character {
		position: static;
		width: 60%;
		margin: 30px auto 0;
		text-align: center;
	}
	#flow .point_list.point_list{
		width: 90%;
		max-width: 640px;
		margin: 0 auto;
	}
	#flow .point_list.point_list li {
		width: 100%;
		margin: 20px auto;
		display: block;
	}
	#flow .point_list.point_list li .num{
		width: 60px!important;
		top:0;
		left: 0;
		margin: 0;
	}
}
/*-----------------------------------

	faq

-----------------------------------*/
#faq .character{
	right: -10%;
	top: -160px;
	width: 260px;
}
@media screen and (max-width: 980px){
	#faq .character {
	  position: static;
	  width: 60%;
	  margin: 30px auto 0;
	text-align: center;
	}
}

#faq dl{
	background: #fff;
	margin-top: 20px;
	border-radius: 10px;
}

#faq dl .icon{
	width: 21px;
	background: #ffa700;
	padding: 5px;
	border-radius: 5px;
	margin-right: 10px;
}

/*-----------------------------------

	accordion_list

-----------------------------------*/
.accordion_list dt {
	cursor:pointer;
	padding: 20px 2.5%;
}
.accordion_list dd{
	display: none;
	padding: 0 2.5% 20px;
}
.accordion_list .accordion_title{
	width: 90%;
	font-size: 1.8rem;
	line-height: 2.8rem;
	float: left;
	padding-left: 5%;
	position: relative;
	box-sizing: border-box;
}
.accordion_list .accordion_title::before {
	width: 4%;
	max-width: 30px;
	position: absolute;
	left: 0;
}
#faq .accordion_title::before {
  content: url("../images/icon_q.svg");
}
.accordion_list .accordion_icon {
	content: url("../images/icon_arrow_bk.svg");
	transform:rotate(90deg); 
	width: 15px;
	float: right;
	margin: 10px 10px 0 0 ;
	transition: all .4s;
}
.accordion_list .accordion_icon.active{
	transform:rotate(270deg); 
}
@media screen and (max-width: 740px){
	.accordion_list .accordion_title {
	  width: 90%;
	  font-size: 1.4rem;
	  line-height: 2.1rem;
		padding-left: 30px;
	}
	.accordion_list .accordion_title::before {
		width: 20px;
	}
	.accordion_list .accordion_icon {
		width: 10px;
	}
}