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

	SPハンバーガーボタン

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

/* ~1321px
------------------------------------ */
@media (min-width: 768px) and (max-width: 1399px) {
  
  /* 追従ナビ */
  .sp_cate_nav {
    display: flex;
    align-items: center;
    z-index: 100;
    background-color: #fff;
    height: 6.24vw;
    position: fixed;
    width: 100%;
  }
  
  /* ロゴ */
  .sp_cate_nav .h_logo {
    position: relative;
    width: 16vw;
    padding: 1.8vw 0;
    margin-left: 2vw;
  }
  .sp_cate_nav .h_logo img {
    width: 100%;
    vertical-align: middle; 
  }
  .sp_cate_nav .h_logo {
    z-index: 9999;
  }
  .logo_text {
    display: none;
  }
  
  /* 開閉ボタン */
	.toggle {
    display: block;
    text-align: center;
    width: 4vw;
    height: 2vw;
    position: absolute;
    right: 2vw;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    cursor: pointer;
    z-index: 9998;
	}
	.trigger,
	.trigger span {
		display: inline-block;
		-webkit-transition: all .4s;
		transition: all .4s;
	}
	.trigger {
		position: relative;
		width: 100%;
		height: 100%;
	}
	.trigger span {
		position: absolute;
		left: 0;
		width: 100%;
		background-color: #000;
	}
	.trigger span:nth-of-type(1) {
		top: 0;
	}
	.trigger span:nth-of-type(2)::after {
		position: absolute;
		top: 0;
		left: 0;
		content: '';
		width: 100%;
		background-color: #000;
		-webkit-transition: all .4s;
		transition: all .4s;
	}
	.trigger span:nth-of-type(3) {
		bottom: 0;
	}

	/* 線の太さ */
	.trigger span,
	.trigger span:nth-of-type(2)::after {
		height: 1px;
	}
	.trigger span:nth-of-type(2) {
		top: 50%;
		margin-top: -1px; /* 太さの半分の値 */
	}
  
  /* MENU */
  .trigger:before {
    content: 'MENU';
    color: #000;
    font-weight: 100;
    letter-spacing: 0.25em;
    padding-right: 5.5vw;
    font-size: 1.3vw;
    top: -0.2vw;
    right: 0;
    position: absolute;
    transform: rotate(0.05deg);
  }
  
  /* CLOSE */
  .trigger.active:before {
    content: 'CLOSE';
    color: #000;
    font-weight: 100;
    letter-spacing: 0.25em;
    padding-right: 4.5vw;
    font-size: 1.3vw;
    top: -0.2vw;
    right: 0;
    position: absolute;
    transform: rotate(0.05deg);
  }
  
  
}


/* SP設定
------------------------------------ */
@media (max-width: 767px) {
  
  /* 追従ナビ */
  .sp_cate_nav {
    z-index: 100;
    background-color: #fff;
    height: 21vw;
    position: fixed;
    width: 100%;
    display: flex;
    align-items: center;
  }
  
  /* ロゴ */
  .sp_cate_nav .h_logo {
    position: relative;
    width: 32vw;
    z-index: 10;
    margin-left: 7vw;
  }
  .sp_cate_nav .h_logo img {
    width: 100%;
  }
  .sp_cate_nav .h_logo {
    z-index: 9999;
  }
  .logo_text {
    display: none;
  }
  
  /* 開閉ボタン */
	.toggle {
    display: block;
    text-align: center;
    width: 9vw;
    height: 5vw;
    position: absolute;
    right: 7vw;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    cursor: pointer;
    z-index: 9998;
	}
	.trigger,
	.trigger span {
		display: inline-block;
		-webkit-transition: all .4s;
		transition: all .4s;
	}
	.trigger {
		position: relative;
		width: 100%;
		height: 100%;
	}
	.trigger span {
		position: absolute;
		left: 0;
		width: 100%;
		background-color: #000;
	}
	.trigger span:nth-of-type(1) {
		top: 0;
	}
	.trigger span:nth-of-type(2)::after {
		position: absolute;
		top: 0;
		left: 0;
		content: '';
		width: 100%;
		background-color: #000;
		-webkit-transition: all .4s;
		transition: all .4s;
	}
	.trigger span:nth-of-type(3) {
		bottom: 0;
	}

	/* 線の太さ */
	.trigger span,
	.trigger span:nth-of-type(2)::after {
		height: 1px;
	}
	.trigger span:nth-of-type(2) {
		top: 50%;
		margin-top: -1px; /* 太さの半分の値 */
	}
  
  /* MENU */
  .trigger:before {
    content: 'MENU';
    color: #000;
    font-weight: 100;
    letter-spacing: 0.25em;
    padding-right: 12vw;
    font-size: 3.1vw;
    top: -0.2vw;
    right: 0;
    position: absolute;
  }
  
  /* CLOSE */
  .trigger.active:before {
    content: 'CLOSE';
    color: #000;
    font-weight: 100;
    letter-spacing: 0.25em;
    padding-right: 3vw;
    font-size: 3.1vw;
    top: -0.5vw;
    right: 8vw;
    position: absolute;
  }
  
  
}




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

	ハンバーガーボタンのアニメーション

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

/* ①オーソドックス
------------------------------------ */
.trigger.active span:nth-of-type(1) {
	-webkit-transform: translateY(8px) scale(0);
	transform: translateY(8px) scale(0);
}
.trigger.active span:nth-of-type(2) {
	-webkit-transform: rotate(-30deg);
	transform: rotate(-30deg);
  background-color: #000000;
}
.trigger.active span:nth-of-type(2)::after {
	-webkit-transform: rotate(60deg);
	transform: rotate(60deg);
  background-color: #000000;
  
}
.trigger.active span:nth-of-type(3) {
	-webkit-transform: translateY(-8px) scale(0);
	transform: translateY(-8px) scale(0);
}




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

	ハンバーガーメニューの中身 PC

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

/* PC設定
------------------------------------ */
@media screen and (min-width: 1400px) {
  
	.toggle {
		display: none;
	}

	/*.toggleWrap {
		display: none;
	}*/
  
  
}




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

	ハンバーガーメニューの中身 SP

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

/* ~1321px
------------------------------------ */
@media (min-width: 768px) and (max-width: 1399px) {
  
  /* ナビ中身 */
	.toggleWrap {
		position: fixed;
		background-color: #ffffff;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		overflow-y:auto;
		z-index: 9997;
		opacity: 0;
		padding: 13vw 20vw 0;
	}

	.animation {
		opacity: 1;
	}

  /* ナビゲーション */
  .toggleWrap .mainNav {
    position: relative;
    text-align: center;
  }
  .toggleWrap .mainNav > li > a {
    position: relative;
    display: inline-block;
    padding: 1vw 0;
    font-size: 2vw;
    font-weight: 500;
  }
  .toggleWrap a.contact {
    position: relative;
    display: inline-block;
    color: #fff;
    font-size: 2vw;
    font-weight: 700;
    text-align: center;
    padding: 2vw 0;
    width: 100%;
    margin-top: 3vw;
    border-radius: 10vw;
    opacity: 1;
    transition-property: opacity, color, background-color, filter;
    transition-duration: 0.3s;
    transition-timing-function: ease-in-out;
    transition-delay: 0s;
    background-color: #B88253;
    border: 5px solid #fff;
  }
  .toggleWrap a.contact:hover {
    background-color: #fff;
    color: #B88253;
    border: 5px solid #B88253;
  }
  .toggleWrap a.contact:before {
    content: '';
    position: absolute;
    background: url(../img/btn_white.png) center top / contain no-repeat;
    width: 4vw;
    height: 1vw;
    top: 50%;
    right: 4vw;
    margin-top: -0.5vw;
  }
  .toggleWrap a.contact:hover:before {
    content: '';
    position: absolute;
    background: url(../img/btn_brown.png) center top / contain no-repeat;
    width: 4vw;
    height: 1vw;
    top: 50%;
    right: 4vw;
    margin-top: -0.5vw;
  }
  
	/* メニューを閉じる時のスタイル
	display:none; を使用せず、opacityを使うとfadeっぽくなる
	-------------------------------------------------------- */
	.hide {
		opacity: 0;
		visibility: hidden;
		overflow: hidden;
	}

	/* アニメーションはメニューの開閉時のみでいいので
	.toggleWrapに書かず、別にclassを用意
	-------------------------------------------------------- */
	.animation {
		-webkit-transition-property: opacity, visibility;
		transition-property: opacity, visibility;
		-webkit-transition-duration: .3s;
						transition-duration: .3s;
		-webkit-transition-timing-function: ease-in;
						transition-timing-function: ease-in;
	}

	/* メニューオープン時のみ、メニューの後ろのコンテンツをスクロールさせない
	iOS safariには別途対応が必要（jQueryに記述）
	-------------------------------------------------------- */
	.no-scroll {
		overflow: hidden;
	}

}

/* SP設定
------------------------------------ */
@media (max-width: 767px) {
  
  /* ナビ中身 */
	.toggleWrap {
		position: fixed;
		background-color: #ffffff;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		overflow-y:auto;
		z-index: 9997;
		opacity: 0;
		padding: 23vw 7vw 0;
	}

	.animation {
		opacity: 1;
	}

  /* ナビゲーション */
  .toggleWrap .mainNav {
    position: relative;
    text-align: center;
    padding: 7vw 0;
  }
  .toggleWrap .mainNav > li > a {
    position: relative;
    display: inline-block;
    padding: 4vw 0;
    font-size: 4.2vw;
    font-weight: 500;
  }
  .toggleWrap a.contact {
    position: relative;
    display: inline-block;
    color: #fff;
    font-size: 4.5vw;
    font-weight: 700;
    text-align: center;
    padding: 3vw 0;
    width: 100%;
    margin-top: 7vw;
    border-radius: 10vw;
    opacity: 1;
    transition-property: opacity, color, background-color, filter;
    transition-duration: 0.3s;
    transition-timing-function: ease-in-out;
    transition-delay: 0s;
    background-color: #B88253;
    border: 5px solid #B88253;
  }
  .toggleWrap a.contact:hover {
    background-color: #fff;
    color: #B88253;
    border: 5px solid #B88253;
  }
  .toggleWrap a.contact:before {
    content: '';
    position: absolute;
    background: url(../img/btn_white.png) center top / contain no-repeat;
    width: 7vw;
    height: 2vw;
    top: 50%;
    right: 7vw;
    margin-top: -1vw;
  }
  .toggleWrap a.contact:hover:before {
    content: '';
    position: absolute;
    background: url(../img/btn_brown.png) center top / contain no-repeat;
    width: 7vw;
    height: 2vw;
    top: 50%;
    right: 7vw;
    margin-top: -1vw;
  }
  
	/* メニューを閉じる時のスタイル
	display:none; を使用せず、opacityを使うとfadeっぽくなる
	-------------------------------------------------------- */
	.hide {
		opacity: 0;
		visibility: hidden;
		overflow: hidden;
	}

	/* アニメーションはメニューの開閉時のみでいいので
	.toggleWrapに書かず、別にclassを用意
	-------------------------------------------------------- */
	.animation {
		-webkit-transition-property: opacity, visibility;
		transition-property: opacity, visibility;
		-webkit-transition-duration: .3s;
						transition-duration: .3s;
		-webkit-transition-timing-function: ease-in;
						transition-timing-function: ease-in;
	}

	/* メニューオープン時のみ、メニューの後ろのコンテンツをスクロールさせない
	iOS safariには別途対応が必要（jQueryに記述）
	-------------------------------------------------------- */
	.no-scroll {
		overflow: hidden;
	}

}