/*--------------------------------------------------------------
#category-top-area
--------------------------------------------------------------*/

/* mobile */
@media (min-width: 300px) {
	
	#category-top-area {
		background: url("img/top_ground.jpg") top center no-repeat;
		-webkit-background-size: 100% 100%;
		background-size: 100% 100%;
	}
	
	#category-top-area p {
		text-align: center;
	}
	
}

/* Small than tablet */
@media (min-width: 768px) {
	
	
	
}


/* Larger than tablet */
@media (min-width: 992px) {
	
	
	
}


/*--------------------------------------------------------------
#question-area
--------------------------------------------------------------*/

/* mobile */
@media (min-width: 300px) {
	
	#question-area {
		margin: 0 0 50px 0;
		padding: 0 10px;
	}
	
	
}

/* Small than tablet */
@media (min-width: 768px) {
	
	#question-area {
		margin: 0 0 100px 0;
		padding: 0 10%;
	}
	
}


/* Larger than tablet */
@media (min-width: 992px) {
	
	
	
}


/*--------------------------------------------------------------
.accordion-area
--------------------------------------------------------------*/

/* mobile */
@media (min-width: 300px) {
	
	/*アコーディオン全体*/
	.accordion-area{
		margin:0;
	}

	.accordion-area li{
		margin: 10px 0;
		position: relative;
	}

	.accordion-area section {
		
	}
	
	/*アコーディオンタイトル*/
	.title {
		position: relative;
		cursor: pointer;
		font-size: 16px;
		font-weight: 600;
		padding: 15px 50px 15px 50px;
		border-radius: 20px;
		transition: all .5s ease;
		background: url("img/icon1.png") no-repeat;
		-webkit-background-size: 25px auto;
		background-size: 25px auto;
		background-color: #FFF;
		background-position: center left 10px;
	}
	
	/*アイコンの＋と×*/
	.title::before,
	.title::after{
		position: absolute;
		content:'';
		width: 15px;
		height: 3px;
		background-color: #F67475;
    }
	
	.title::before{
		top: 48%;
		right: 15px;
		transform: rotate(0deg);
    }
	
	.title::after{    
		top: 48%;
		right: 15px;
		transform: rotate(90deg);
	}
	
	/*　closeというクラスがついたら形状変化　*/
	.title.close::before{
		transform: rotate(45deg);
	}
	
	.title.close::after{
		transform: rotate(-45deg);
	}
	
	/*アコーディオンで現れるエリア*/
	.box {
		display: none;
		margin: 0;
		padding: 15px 20px 30px 50px;
		font-size: 14px;
		font-weight: 500;
		line-height: 1.6;
		background: url("img/icon2.png") no-repeat;
		-webkit-background-size: 25px auto;
		background-size: 25px auto;
		background-position: top 20px left 10px;
	}
	
	.item1 {
		position: absolute;
		top: 0;
		right: -8%;
		width: 3vw;
	}
	
	.item2 {
		position: absolute;
		top: 0;
		left: -8%;
		width: 3vw;
	}
	
}

/* Small than tablet */
@media (min-width: 768px) {
	
	/*アコーディオン全体*/
	.accordion-area{
		margin:0;
	}

	.accordion-area li{
		margin: 10px 0 20px 0;
		position: relative;
	}

	.accordion-area section {
		
	}
	
	/*アコーディオンタイトル*/
	.title {
		position: relative;
		cursor: pointer;
		font-size: 20px;
		font-weight: 600;
		padding: 30px 120px;
		border-radius: 30px;
		transition: all .5s ease;
		background: url("img/icon1.png") no-repeat;
		-webkit-background-size: 35px auto;
		background-size: 35px auto;
		background-color: #FFF;
		background-position: center left 50px;
	}
	
	/*アイコンの＋と×*/
	.title::before,
	.title::after{
		position: absolute;
		content:'';
		width: 15px;
		height: 3px;
		background-color: #F67475;
    }
	
	.title::before{
		top: 48%;
		right: 30px;
		transform: rotate(0deg);
    }
	
	.title::after{    
		top: 48%;
		right: 30px;
		transform: rotate(90deg);
	}
	
	/*　closeというクラスがついたら形状変化　*/
	.title.close::before{
		transform: rotate(45deg);
	}
	
	.title.close::after{
		transform: rotate(-45deg);
	}
	
	/*アコーディオンで現れるエリア*/
	.box {
		display: none;
		margin: 0;
		padding: 30px 100px 30px 120px;
		font-size: 15px;
		font-weight: 500;
		line-height: 1.8;
		background: url("img/icon2.png") no-repeat;
		-webkit-background-size: 35px auto;
		background-size: 35px auto;
		background-position: top 30px left 50px;
	}
	
	.item1 {
		position: absolute;
		top: 0;
		right: -8%;
		width: 3vw;
	}
	
	.item2 {
		position: absolute;
		top: 0;
		left: -8%;
		width: 3vw;
	}
	
}


/* Larger than tablet */
@media (min-width: 992px) {
	
	
	
}