@charset "utf-8";

/*===================================================

    Company common

===================================================*/
/*  contents
---------------------------------------------------*/
.category{
    background:url(../images/feature/category.jpg) no-repeat center top;
    background-size:auto 100%;
    }

/*===================================================

    for PC

===================================================*/
@media(min-width:769px){
	.contents .wrapper{
		width:1160px;
		margin:0 auto;
	}
	#reason01{
		padding: 100px 0 100px;
		width: 100%;
		background-color: #fff;
	}
	#reason02{
		padding: 100px 0 100px;
		width: 100%;
		background-color: #F1EDE9;
	}
	#reason03{
		padding: 100px 0 100px;
		width: 100%;
		background-color: #fff;
	}
	.reason__inner{
		margin: 0 auto;
		width: 1160px;
		text-align: left;
	}
	.reason__inner__title{
		margin-top: -100px;
		padding-top: 100px;
		margin-bottom: 7px;
		font-size: 24px;
		font-weight: 500;
		line-height: 1.1em;
		color: #000;
	}
	.reason__inner__title__number{
		margin-left: 2px;
		width: 22px;
		height: 22px;
		border-radius: 50%;
		font-size: 18px;
		line-height: 23px;
		font-family: Questrial;
		color: #fff;
		text-align: center;
		vertical-align: 10%;
		display: inline-block;
	}
	.reason__inner__title__number--1{
		background-color: #9c1;
	}
	.reason__inner__title__number--2{
		background-color: #F76677;
	}
	.reason__inner__title__number--3{
		background-color: #F7CC11;
	}
	.reason__inner__copy{
		margin-bottom: 25px;
		padding-bottom: 20px;
		font-size: 32px;
		line-height: 1.6em;
		color: #000;
		position: relative;
	}
	.reason__inner__copy::before{
		content: '';
		bottom: 0;
		left: 3px;
		width: 35px;
		height: 2px;
		position: absolute;
	}
	.reason__inner__copy--1::before{
		background-color: #9c1;
	}
	.reason__inner__copy--2::before{
		background-color: #F76677;
	}
	.reason__inner__copy--3::before{
		background-color: #F7CC11;
	}
	.reason__inner__text{
		width: 660px;
		font-size: 16px;
		line-height: 1.9em;
		color: #000;
		text-align: justify;
		float: left;
	}
	.reason__inner__photo{
		margin-top: 5px;
		width: 430px;
		float: right;
	}
	.reason__inner__photo img{
		width: 100%;
	}
}

.sp{
	display: none;
}
	
/*===================================================

    for SP

===================================================*/
@media(max-width:768px){
	.sp{
		display: block;
	}
	.contents .wrapper{
		width:auto;
		margin:0 auto;
	}
	#reason01{
		padding: 30px 4% 4%;
		width: auto;
		background-color: #fff;
	}
	#reason02{
		padding: 30px 4% 4%;
		width: auto;
		background-color: #F1EDE9;
	}
	#reason03{
		padding: 30px 4% 4%;
		width: auto;
		background-color: #fff;
	}
	.reason__inner{
		margin: 0 auto;
		width: 100%;
		text-align: left;
	}
	.reason__inner__title{
		margin-top: -60px;
		padding-top: 60px;
		margin-bottom: 7px;
		font-size: 14px;
		font-weight: 500;
		line-height: 1.1em;
		color: #000;
	}
	.reason__inner__title__number{
		margin-left: 2px;
		width: 16px;
		height: 16px;
		border-radius: 50%;
		font-size: 10px;
		line-height: 16px;
		font-family: Questrial;
		color: #fff;
		text-align: center;
		vertical-align: 18%;
		display: inline-block;
	}
	.reason__inner__title__number--1{
		background-color: #9c1;
	}
	.reason__inner__title__number--2{
		background-color: #F76677;
	}
	.reason__inner__title__number--3{
		background-color: #F7CC11;
	}
	.reason__inner__copy{
		margin-bottom: 20px;
		padding-bottom: 15px;
		font-size: 20px;
		line-height: 1.6em;
		color: #000;
		text-align: justify;
		position: relative;
	}
	.reason__inner__copy::before{
		content: '';
		bottom: 0;
		left: 0;
		width: 50px;
		height: 1px;
		position: absolute;
	}
	.reason__inner__copy--1::before{
		background-color: #9c1;
	}
	.reason__inner__copy--2::before{
		background-color: #F76677;
	}
	.reason__inner__copy--3::before{
		background-color: #F7CC11;
	}
	.reason__inner__text{
		width: auto;
		font-size: 14px;
		line-height: 1.8em;
		color: #000;
		text-align: justify;
		float: none;
	}
	.reason__inner__photo{
		margin-top: 10px;
		width: 100%;
		float: noen;
	}
	.reason__inner__photo img{
		width: 100%;
	}
}


/*===================================================

    for vertical SP

===================================================*/
@media(max-width:480px) {

}