


/*　　途中で出てくるヘッダナビゲーション
-------------------------------------------------------------------------------------------------------*/



fix-nav {display: none;}

.clone-nav {
	display: block;
	position: fixed;
	padding: 0px 0px 0px 0px;
	margin-top: -5px;
	top: 0;
	left: 0;
	z-index: 999;
	width: 100%;
	transition: .3s;
	transform: translateY(-100%);
	background-color: rgba(39,34,29,1.00);
}

.is-show {
  transform: translateY(0);
}



@media screen and (max-width: 768px) {
	fix-nav {display: none;}
}





/*　　ヘッダ（途中で出てくる）
------------------------------------------------------------------------------------------------------------*/


.header-contents {
	z-index: 99999;
	width: 100%;
	height: 80px;
	top: 0;
	
	display: flex;
	align-items: center;
	justify-content: space-between;
	
	padding: 10px 20px 10px 20px;
}



.header-logo {
	position: relative;
	top: 5px;
	margin: 0;
	padding: 0;
	
	flex-grow: 2;
}


.header-logo img {
	max-width: 100%;
}


.header-contact {
	margin: 0;
	padding: 0 0 0 10px;
	font-size: 24px;
	font-weight: 900;
	text-align: right;
	color: #FFFFFF;
}

.header-contact i{
	margin: 0px 10px 0px 20px;
	font-size: 40px;
}




.header-contact a:link {color: #FFFFFF; text-decoration: none;}
.header-contact a:visited {color: #FFFFFF;}
.header-contact a:hover {color: #96793B;}
.header-contact a:active {color: #96793B;}









/*　　ヘッダメニュー  */



.header-menu {
	text-align: center;
	padding-bottom: 5px;
	letter-spacing: 0.05em;
}


.header-menu ul{
	padding: 0;
	text-align: center;
  position: relative;
	right: 5px;
	
}
	
.header-menu ul li {
  list-style: none;
  margin:0;
  padding: 0 15px;
  font-size:15px;
  float: left;
  position: relative;
	display: inline-block;
  height: 50px;
  line-height: 40px;
	background-color: rgba(39,34,29,1.00);
  color: #FFFFFF;
  text-align:center;
}
	

.header-menu ul li a {
  position: relative;
  color: #FFFFFF;
  display: block;
  text-decoration: none;
}

.header-menu ul li a::after {
  position: absolute;
  bottom: 1px;
  left: -5%;
  content: '';
  width: 110%;
  height: 2px;
	background-color: rgba(187,159,131,1.00);
  transform: scale(0, 1);
  transform-origin: center top;
  transition: transform .3s;
  z-index: 200;
}
	
.header-menu ul li a:hover::after {
  transform: scale(1, 1);
}

		
.header-menu ul li:hover, .header-menu  ul li a:hover {
	background-color: rgba(39,34,29,1.00);
	color: #78725B;
}
	
	
.header-menu * {
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -ms-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}
	





@media screen and (max-width: 1400px){
	
.header-logo { width: 320px; padding: 10px; }
.header-menu ul li {font-size: 13px; letter-spacing: 0.01em;}
.header-contact {
	margin: 0;
	padding: 10px;
	font-size: 16px;
}
	
}


@media screen and (max-width: 1300px){
	

.header-contents {
	padding: 0px 10px;
}
	
.header-logo {width: 270px;}
.header-menu ul li {font-size:13px; letter-spacing: 0.01em; padding: 0 10px;}
.header-contact {
	margin: 0;
	padding: 10px;
	font-size: 16px;
}
	
}


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

.header-contents { display: none; }
	
}







/*----------　下層プルダウン　-----------*/


.header-menu ul li ul {
	position: absolute;
	width: 200px;
	top: 40px; /*親メニューの高さと同じにする*/
	z-index: 100;
	padding-left: 60px;
}
	
.header-menu ul li ul li {
	visibility: hidden;
	overflow: hidden;
	width: 200px;
	height: 0;
	background: rgba(255,255,255,0.9); /*サブメニューの背景色*/
}


	
.header-menu ul li:hover ul li, .header-menu ul li a:hover ul li{
	visibility: visible;
	overflow: visible;
	height: 40px; /*サブメニューの高さ*/
	z-index: 10;
}

	
.header-menu * {
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -ms-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}
	















/*　　スマホ用 ヘッダ
------------------------------------------------------------------------------------------------------------*/


.header-contents-sp { display: none; }

.sp_header_btn { display: none; }


@media screen and (max-width: 768px){
	
.header-contents-sp {
	position: fixed;
	z-index: 99999;
	width: 100%;
	height: 65px;
	top: 0;
	border-bottom: 1px solid #f5f5f5;
	background-color: white;
	
	display: flex;
	align-items: center;
	justify-content: space-between;
	
	padding: 0px 10px;
}
	
.header-contents-sp img{
	max-width: 100%;
}

	
.sp_header_btn {
	position: fixed;
	z-index: 9999;
	width: 100%;
	top: 65px;
	display: flex;
	flex-direction: row;
	
	font-size: 12px;
	}
	
	
.sp_header_btn div a{
	display: block;
	text-decoration: none;
	padding: 3px 0px;
	color: rgba(255,255,255,1.00);
	}
	
	
.sp_header_btn-left {
	flex: 1;
	text-align: center;
	background-color: rgba(191,181,168,1.00);
}

.sp_header_btn-center {
	flex: 1;
	text-align: center;
	background-color: rgba(162,148,132,1.00);
}

.sp_header_btn-right {
	flex: 1;
	text-align: center;
	background-color: rgba(183,170,153,1.00);
}
	
	
}





/*　　スマホ用メニュー
-------------------------------------------------------------------------------------------------------*/



sp-nav.globalMenuSp {display: none}

	

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

.hamburger {
  display : block;
  position: fixed;
	margin: 0 0 0 auto;
  z-index : 999999;
  right : 16px;
  top   : 15px;
  width : 36px;
  height: 36px;
  cursor: pointer;
  text-align: center;
	font-size: 10px;
	background: rgba(255,255,255,1.00);
}
	
.hamburger span {
  display : block;
  position: absolute;
  width   : 18px;
  height  : 2px ;
  left    : 8px;
  background : rgba(102,102,102,1.00);
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition   : 0.3s ease-in-out;
  transition        : 0.3s ease-in-out;
}
	
.hamburger span:nth-child(1) {
  top: 10px;
}
.hamburger span:nth-child(2) {
  top: 16px;
}
.hamburger span:nth-child(3) {
  top: 22px;
}

	
/* ナビ開いてる時のボタン */
.hamburger.active span:nth-child(1) {
  top : 16px;
  left: 8px;
  -webkit-transform: rotate(-45deg);
  -moz-transform   : rotate(-45deg);
  transform        : rotate(-45deg);
}

.hamburger.active span:nth-child(2),
.hamburger.active span:nth-child(3) {
  top: 16px;
  -webkit-transform: rotate(45deg);
  -moz-transform   : rotate(45deg);
  transform        : rotate(45deg);
}

	
	
	

	

	
sp-nav.globalMenuSp {
	display: block;
  position: fixed;
  z-index : 99998;
  top  : 65px;
  left : 0;
  color: #000;
  background: rgba(255,255,255,0.3);
  text-align: center;
  transform: translateX(100%);
  transition: all 0.6s;
  width: 100%;
}

sp-nav.globalMenuSp ul {
  background: rgba(255,255,255,0.80);
  margin: 0 auto;
  padding: 0;
  width: 100%;
	line-height: 2em;
}

sp-nav.globalMenuSp ul li {
  list-style-type: none;
  padding: 0;
  width: 100%;
  border-bottom: 1px solid #fff;
}
sp-nav.globalMenuSp ul li:last-child {
  padding-bottom: 0;
  border-bottom: none;
}
sp-nav.globalMenuSp ul li:hover{
  background : #E4E4E4;
}

sp-nav.globalMenuSp ul li a {
  display: block;
  color: #5F5A55;
  padding: .5em 0;
  text-decoration :none;
}

/* このクラスを、jQueryで付与・削除する */
sp-nav.globalMenuSp.active {
  transform: translateX(0%);
}



	
	

/* ドロップダウン */
	
.tap_open span{
	padding-left: 0px;
}	
	
	
.pulldown {
	display: none;
	}
	

.pulldown li{
	width: 100%;
	background: #D1D1D1;
	border-bottom: #FFFFFF 1px dotted !important;
	}
	
.pulldown li :last-child{
	border-bottom: none !important;
}
	
.pulldown li a{
  display: block;
  color: #525252 !important;
  padding: .5em 0;
  text-decoration :none;
}

	
	

}









	

