/*▼レスポンシブ全体レイアウト*/
@media screen and (max-width:1280px) {
	/*▼ヘッダーレイアウト*/
	.header-in{
		width: 100%;
	}
	.logo{
		width: 50%;
	}
	nav{
		width: 50%;
	}
	/*▲ヘッダーレイアウト*/
	.mainimg img{
		width: 100%;
	}
	.img img{
		width: 100%;
		height: auto;
	}
	/*▼パンくずレイアウト*/
	.breadcrumbs{
		width: 100%;
	}
	/*▲パンくずレイアウト*/
	/*▼コンテンツレイアウト*/
	article{
		width: 960px;
		margin: 0 auto;
		background: #faf9f5;
		padding:100px 60px 100px 60px;
	}
	/*▲コンテンツレイアウト*/
	/*▼フッターレイアウト*/
	.footer-in{
		width: 100%;
	}
	/*▲フッターレイアウト*/
}

@media screen and (max-width:960px) {
	/*▼ヘッダーレイアウト*/
	.logo{
		width: 50%;
	}
	header nav{
		display: none;
	}
	#sp-menu-button{
		display: block;
		width: 40px;
		height: 40px;
		background: rgba(94,73,78,0.7);
		position: fixed;
		right: 40px;
		top: 30px;
		text-align: center;
		z-index: 100;
	}
	#sp-menu-button span{
		display: inline-block;
		width: 25px;
		height: 2px;
		background-color: #faf9f5;
		z-index: 2;
		position: relative;
		}
	#sp-menu-button span:nth-of-type(1) {
		top: -5px;
	}
	#sp-menu-button span:nth-of-type(2) {
		top: -10px;
	}
	#sp-menu-button span:nth-of-type(3) {
		bottom: 15px;
	}
	#sp-menu-button span {
		display: inline-block;
		transition: all .4s; /* クリックしてからの動作時間 */
	}

	#sp-menu-button.active{
		cursor : pointer;
	}
	#nav.active{
		display: block;
		width: 100%;
		height: 80%;
		background: rgba(255,255,255,0.9);
		position: fixed;
		top:0;
		right: 0;
		z-index: 3;
		}
	#nav.active ul{
		width: 100%;
		z-index: 4;
		flex-direction: column;
	}
	#nav.active ul li{
		margin-bottom: 1em;
	}
	#nav.active ul li a{
		color: #4b3a24;
		z-index: 5;
	}
	#nav.active ul li a:hover{
		color:#FAA21F;
	}
	/* ここで数字を変えて傾きなどを調節 */
	#sp-menu-button.active span:nth-of-type(1) {
	-webkit-transform: translateY(10px) rotate(-45deg);
	transform: translateY(10px) rotate(-45deg);
	}
	#sp-menu-button.active span:nth-of-type(2) {
	opacity: 0;
	}
	#sp-menu-button.active span:nth-of-type(3) {
	-webkit-transform: translateY(-12px) rotate(45deg);
	transform: translateY(-12px) rotate(45deg);
	}
	/*▲ヘッダーレイアウト*/

	/*▼コンテンツレイアウト*/
	article{
		width: 100%;
		margin: 0 auto;
		background: #faf9f5;
		padding:100px 60px 100px 60px;
	}	
	/*▲コンテンツレイアウト*/
}


@media screen and (max-width:600px) {
	/*▼ヘッダーレイアウト*/
	.header-in{
		height: 100px;
		padding: 0 0 0 15px;
	}
	.logo{
		margin: 34px 0 34px 0;
	}
	.breadcrumbs ol{
		padding: 15px 0 15px 15px;
	}
	article{
		padding:50px 15px 50px 15px;
	}
	#sp-menu-button{
		width: 40px;
		height: 40px;
		position: fixed;
		right: 15px;
		top: 30px;
	}
	h1{
		font-size: 1.5em;
		font-weight: bold;
		color: #5e494e;
	}
	h2{
		font-size: 1.5em;
		font-weight: bold;
		color: #5e494e;
		margin-top: 50px;
	}
	.page-top{
		position: fixed;
		right: 15px;
		bottom: 15px;
	}
}