/* intro
-------------------------------------------------*/
.intro{
	margin: 0 auto 3em;
	padding: 1.8em 1.8em 1.5em;
	border: 1px solid #c6c6c6;
	background: #fff url("https://img21.shop-pro.jp/PA01399/944/etc/bg_intro01.gif?cmsp_timestamp=20171206112612") 100% 0 no-repeat;
	background-size: contain;
}
.intro h2{
	margin: 0 auto 1em;
	font-weight: normal;
	font-size: 1.5em;
	line-height: 1.6;
}
.intro h2 span{
	display: block;
	color: #79591a;
}
.intro .read{
	width: 75%;
	margin-bottom: 1.5em;
}
.intro .btn-kodawari{
	display: inline-block;
}
.intro .btn-kodawari a{
	display: block;
	padding: .5em 2.3em;
	border: 1px solid #79591a;
	color: #79591a;
}
.intro .btn-kodawari a:before{
	content: "\f105";
	margin-right: .5em;
	font-family: FontAwesome;
	font-size: .8em;
	color: #79591a;
	vertical-align: middle;
}
.intro .btn-kodawari a:hover{
	background-color: #79591a;
	color: #fff;
}
.intro .btn-kodawari a:hover:before{
	color: #fff;
}


/* blog
-------------------------------------------------*/
.blog{
	margin: 0 auto 3em;
	text-align: center;
}


/* company
-------------------------------------------------*/
.company{
	display: flex;
	justify-content: space-between;
	flex-direction: row-reverse;
	flex-wrap: wrap;
	margin-bottom: 4em;
}
.company .info{
	width: 48%;
}
.company .info .logo{
	margin-bottom: 1em;
}
.company .info dl{
	margin-bottom: 1em;
}
.company .photo{
	width: 47%;
}



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

/*  phone  */

/*===========================================================================*/
@media screen and (max-width:768px){

	/* intro
	-------------------------------------------------*/
	.intro{
		box-sizing: border-box;
		width: 95%;
		padding: 1.2em 1.2em .8em;
		background-size: 130px;
		background-repeat: repeat-y;
	}
	.intro h2{
		font-size: 1.1em;
		font-weight: bold;
	}
	.intro h2 span{
		display: inline;
	}
	.intro .read{
		width: 85%;
	}
	.intro .btn-kodawari a{
		padding: .5em 1.5em;
	}

	/* blog
	-------------------------------------------------*/
	.blog{
		width: 95%;
	}


	/* company
	-------------------------------------------------*/
	.company{
		width: 95%;
		margin: 0 auto 1em;
	}
	.company .info{
		width: 50%;
		font-size: .9em;
	}
	.company .photo{
		width: 45%;
	}

}


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

/*  phone  */

/*===========================================================================*/
@media screen and (max-width:479px){

	/* intro
	-------------------------------------------------*/
	.intro{
		padding: .8em .8em .5em;
		background-size: 120px;
		background-position: 125% 0;
	}

	/* company
	-------------------------------------------------*/
	.company .info{
		width: 100%;
		margin-bottom: 1em;
	}
	.company .info .logo{
		text-align: center;
	}
	.company .photo{
		width: 100%;
		text-align: center;
	}

}