@charset "utf-8";


/*==ナビゲーション全体の設定*/
nav{
	text-align: center;
	width: 100%;
	margin: 0 auto;
	z-index: 100!important;
}

nav ul{
  list-style: none;
  display: flex;/*ナビゲーションを横並びに*/
  justify-content: flex-end;/*右寄せに*/
}

nav ul ul{
  display: block;/*2階層目以降は横並びにしない*/
}

nav ul li{
	position: relative;/*下の階層のulや矢印の基点にするためliにrelativeを指定*/
	font-size: 20px;/*PC版メニューのフォント数*/
	font-weight: bold;
}

nav ul li a{/*ナビゲーションのリンク設定*/
  display: block;
  text-decoration: none;
  color: #1A1311!important;/*PC版メニューの文字色*/
  padding:20px 20px;
  transition:all .3s;
}

nav ul li li a{
  padding:15px 30px;
}

nav ul li a:hover{
  color:#92C36A!important; /*PC版メニューのホバー色*/
}

@media screen and (max-width:1200px){
	nav ul li{font-size: 17px;}
	nav ul li a{padding: 20px 15px;}
}


/*==矢印の設定-------------------------------------------*/

/*2階層目を持つliの矢印の設定*/
nav ul li.has-child::before{
	content:'';
	position: absolute;
	left:0px;
	top:33px;
	width:6px;
	height:6px;
	border-top: 3px solid #DA573A;
	border-right:3px solid #DA573A;
	transform: rotate(135deg);
}

/*3階層目を持つliの矢印の設定*/
nav ul ul li.has-child::before{
	content:'';
	position: absolute;
	left:6px;
	top:17px;
	width:6px;
	height:6px;
	border-top: 2px solid #a68a62;/*矢印の色：3階層*/
	border-right:2px solid #a68a62;/*矢印の色：3階層*/
	transform: rotate(45deg);
}

/*== 2・3階層目の共通設定 ----------------------------------*/

/*下の階層を持っているulの指定*/
nav li.has-child ul{
	position: absolute;/*絶対配置で位置を指定*/
	left:0;
	top:70px;
	z-index: 4;
	background:#F7F7EB;/*2階層ボタンの背景色*/
	width:250px;
	visibility: hidden;/*はじめは非表示*/
	opacity: 0;
	transition: all .3s;/*アニメーション設定*/
}

/*hoverしたら表示*/
nav li.has-child:hover > ul,
nav li.has-child ul li:hover > ul,
nav li.has-child:active > ul,
nav li.has-child ul li:active > ul{
  visibility: visible;
  opacity: 1;
}

nav li.has-child ul li{
	font-size: 16px!important;/*2階層のフォント数*/
	line-height: 120%!important;
}

/*ナビゲーションaタグの形状*/
nav li.has-child ul li a{
  color: #000;
  border-bottom:solid 1px rgba(255,255,255,0.6);
}

nav li.has-child ul li:last-child > a{
 border-bottom:none;
}

nav li.has-child ul li a:hover,
nav li.has-child ul li a:active{
  background:#FFF;/*2階層ホバー時の背景色*/
}


/*==3階層目-------------------------*/

/*3階層目の位置*/
nav li.has-child ul ul{
  top:0;
  left:250px;
  background:#F4EEE2;/*3階層ボタンの背景色*/
}

nav li.has-child ul ul li a:hover,
nav li.has-child ul ul li a:active{
  background:#EBE0CC;/*3階層ホバー時の背景色*/
}


/*==1000px以下の形状-------------------------------------*/

@media screen and (max-width:1000px){
  nav{
	padding: 0;
	background:#EBE0CC;
  }
  
  nav ul{
    display: block;
  }
  
  nav li.has-child ul,
  nav li.has-child ul ul{
	position: relative;
	left:0;
	top:0;
	width:100%;
	visibility:visible;/*JSで制御するため一旦表示*/
	opacity:1;/*JSで制御するため一旦表示*/
	display: none;/*JSのslidetoggleで表示させるため非表示に*/
	transition:none;/*JSで制御するためCSSのアニメーションを切る*/
}
  
nav ul li a{
  border-bottom:2px solid #FFF;/*スマホメニューに線*/
}

/*矢印の位置と向き*/

nav ul li.has-child::before{
  left:20px;  
}

nav ul ul li.has-child::before{
    transform: rotate(135deg);
  left:20px;
}
    
nav ul li.has-child.active::before{
    transform: rotate(-45deg);
}

}


/*========= ハンバーガーメニュー ===============*/

.hamburger .btn-gNav {
    position: fixed;/*位置固定*/
    top: 10px;
    right: 15px;
    width: 60px;
    height: 60px;
    z-index: 1000!important;
    box-sizing: border-box;
    cursor: pointer;
    -webkit-transition: all 400ms;
    transition: all 400ms;
	background: #92C36A;/*ハンバーガーボタンの背景色*/
	border: solid 1px #FFFFFF;
}

.hamburger .btn-gNav span {
    position: absolute;
	width: 40px;
    height: 5px;
    background: #ffffff;
    border-radius: 10px;
    -webkit-transition: all 400ms;
    transition: all 400ms;
}

.hamburger .btn-gNav span:nth-child(1) {
    top: 10px;
	right: 10px;
}
.hamburger .btn-gNav span:nth-child(2) {
    top: 25px;
	right: 10px;
}
.hamburger .btn-gNav span:nth-child(3) {
    top: 40px;
	right: 10px;
}

.hamburger .btn-gNav.open span:nth-child(1) {
    background: #ffffff;
    top: 6px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.hamburger .btn-gNav.open span:nth-child(2),
.hamburger .btn-gNav.open span:nth-child(3) {
    top: 6px;
    background: #ffffff;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}


.btn-gNav {
    display: none;
}

.gNav .gNav-menu {
    display: flex;
    justify-content: space-between;
}

.gNav .gNav-menu li {
    margin: 0 auto;
    padding: 0 5px;
}

@media screen and (max-width: 1000px) {
    .btn-gNav {
        display: block;
    }

    .gNav {/*スマホ版メニュー--------------------------------*/
        position: fixed;
        top: 0;
        right: -100%;
        width: 100%;
        height: 100%;
        background: #F7F7EB;/*スマホ版メニュー背景色*/
        box-sizing: border-box;
        z-index: 1;
        padding-top: 50px;
        transition: .3s;
    }

    .gNav.open {
        right: 0;
    }

    .gNav .gNav-menu {
        padding: 0;
        width: 100%;
        height: 100%;
        display: block;
        flex-direction: column;
        text-align: center;
        /*justify-content: center;*/
    }

    .gNav .gNav-menu li {
        width: 86%;
        padding: 15px;
        border-bottom: #fff 1px solid;
    }

}


/*========= スマホ版メニュー ===============*/
@media screen and (max-width: 1000px) {
nav ul li{
	font-size: 20px;/*フォント数*/
}
nav ul li a{
	color: #1A1311!important;/*文字色*/
	padding: 20px;
}
nav ul li a:hover{
  color:#ccc!important; /*ホバー色*/
}
nav li.has-child ul li{
	font-size: 16px!important;/*2階層のフォント数*/
	background: #FFF;
	border-bottom: solid 1px #e9e4d3;
}
nav li.has-child ul li a{
	color: #000!important;/*2階層の文字色*/
}
	
nav ul li.has-child::before{
	border-top: 2px solid #a68a62;/*2階層の矢印の色*/
	border-right:2px solid #a68a62;/*2階層の矢印の色*/
}
}

@media screen and (max-width: 400px) {
nav ul li{
	font-size: 16px;/*フォント数*/
}
nav ul li a{
	padding: 10px;
}
}

/*=========　PC非表示 / スマホで表示　===============*/
.nav_top{display: none;} /* TOPボタン非表示 */
.nav_tel{display: none;} /* telボタン非表示 */
.nav_mail{display: none;} /* mailボタン非表示 */

@media screen and (max-width:1000px){
.nav_top{display:block;}

.nav_tel{
	display:block;
	font-size: 16px;
	line-height: 50%;
	font-weight: normal!important;
	padding: 10px 0px 30px;
	text-align: center;
}
.nav_tel img{
	width: 80%;
}
.nav_tel a{
	border: none!important;
	padding: 0px;
	}
	
.nav_mail{
	display:block;
	
	}
.mail_btn{
	font-size: 25px!important;
	padding: 20px 50px;
	}
.mail_btn i{padding-right: 10px;}
}