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

　●　ヘッダー（グローバルメニュー）
　●　ハンバーガーメニュー

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

/*========================================
　●　ヘッダー（グローバルメニュー）
========================================*/
.headerWrap{/* header分の高さ用 */
 height: 92px;
}

header{
 position: fixed; top: 0; left: 0; z-index: 7000;
 width: 100%;
 height: 92px;
 background: #fefef1;
}

/*------------------------------ グローバルメニュー */
.header--inner{
 display: flex;
  align-items: center;
  justify-content: flex-end;
 width: 100%;
 max-width: 1400px;
 height: 92px;
 margin: 0 auto;
}

header h1{
 position: absolute; top: 15px; left: 0px; z-index: 1;
}

header nav{
 display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/*-------------------- nav詳細1 */
ul.nav_main{
 display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

ul.nav_main li,
ul.nav_sub li{ list-style: none;}

ul.nav_main li a,
ul.nav_sub li a{ transition: all 0.3s ease-out;}
ul.nav_main li a:hover,
ul.nav_sub li a:hover{ opacity: 0.5;}


ul.nav_main li a > span:nth-of-type(1){}
ul.nav_main li a > span:nth-of-type(2){ display: none;}

/*-------------------- nav詳細2 */
ul.nav_sub{
 display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.nav--tel01{
 margin-right: 12px;
 margin-left: 8px;
}

.nav--plan01{
 display: block;
 width: 140px;
 height: 60px;
 color: #fff;
 font-size: 15px;
 text-align: center;
 background: #628f28;
}

.nav--plan01 a{
 display: block;
 padding: 21px 4px 16px 4px;
 height: 100%;
 text-decoration: none;
}

.nav--plan01 a:link   { color: #fff;}
.nav--plan01 a:visited{ color: #fff;}
.nav--plan01 a:hover  { background: #a8c13d;}

/*------------------------------ 翻訳 */
ul.trans{ position: fixed; bottom: 246px; left: 0;}

ul.trans li{ margin-bottom: 1px; line-height: 0; list-style: none;}
ul.trans li a{ transition: all 0.3s ease-out;}
ul.trans li a:hover{ opacity: 0.5;}

/*============================== ■ max-width 1087 */
@media screen and (max-width: 1087px){
.headerWrap{/* header分の高さ用 */
 height: 80px;
}

header{
 height: 80px;
}

/*------------------------------ グローバルメニュー */
.header--inner{ opacity: 0;
 overflow: auto;
 position: fixed; top: 0; left: -100%; z-index: 7800;
  align-items: center;
  flex-direction: column;
  justify-content: flex-start;
 margin-top: 0px;
 padding-bottom: 20px;
 width: 100%;
 height: 100vh;
 background: url("../images/p01top/welcome_bg.png") no-repeat center 80%,#fefef1;
 background-size: 110%;
}

.open.header--inner{ opacity: 1;
 position: fixed; top: 0; left: 0%;
 animation: ani_fade 0.3s ease-out forwards;
}

header h1{ position: absolute; top: 20px; left: calc(50% - 93px);}

header nav{
 display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
 width: 100%;
 max-width: 600px;
 margin-top: 108px;
 margin-bottom: 60px;
}
/*-------------------- nav詳細1 */
ul.nav_main{
 display: flex;
  align-items: center;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: flex-start;
 margin-right: 4%;
 margin-left: 4%;
}

ul.nav_main li{
 background: rgba(254,254,241,0.95);
 border-bottom: 1px solid #37291d;
}

ul.nav_main li a{ display: block; padding: 8px 32px 8px 4px;}

ul.nav_main li a > span:nth-of-type(1){ display: none;}
ul.nav_main li a > span:nth-of-type(2){ display: block;}

/*-------------------- nav詳細2 */
ul.nav_sub{
 display: flex;
  align-items: center;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: flex-start;
 margin-right: 4%;
 margin-left: 4%;
}

ul.nav_sub li{ margin: 20px 0;}

.nav--plan01{}

/*------------------------------ 翻訳 */
ul.trans{
 position: static;
 display: flex;
  flex-wrap: wrap;
  justify-content: center;;
}

ul.trans li{ margin: 1px;}

}/*----- media -----*/


/*============================== ■ max-width 767 */
@media screen and (max-width: 767px){}/*----- media -----*/

/*============================== ■ max-width 520 */
@media screen and (max-width: 520px){
/*------------------------------ グローバルメニュー */
header nav{
 display: flex;
  align-items: center;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-around;
 width: 100%;
 max-width: 600px;
}


ul.nav_main,
ul.nav_sub{ margin-right: 0; margin-left: 0;}

}/*----- media -----*/

/*========================================
　●　ハンバーガーメニュー
========================================*/
/*------------------------------ menulogo */
.memulogo{
 position: fixed; top: 18px; left: 11px; z-index: 7800;
 width: 120px;
}
.memulogo img{ width: 100%;}

.open .memulogo{ z-index: 7000;}

/*------------------------------ ベース */
#js-menumarkWrap{ display: none;}

.menumark{
 position: fixed; top: 10px; right: 0px; z-index: 7900;
 display: none;
 width: 60px;
 height: 60px;
 cursor: pointer;
 letter-spacing: 0;
 background: none;
}


/*-----*/
.menumark span{
 display: block;
 position: absolute;  top: 18px; left: 0px;
 height: 2px;
 width: 42px;
 background: #37291d;
 transition: 0.3s ease-in-out;
}

.menumark span:nth-child(1){
  top: 17px;
}
.menumark span:nth-child(2){
  top: calc(17px + 11px);
}
.menumark span:nth-child(3){
  top: calc(17px + 22px);
}

/*------------------------------ アニメーション */
.open .menumark span:nth-child(1){
  top: calc(17px + 11px);
 transform: rotate(315deg);
}
.open .menumark span:nth-child(2){
  left: 50%;
 width: 0;
}
.open .menumark span:nth-child(3){
  top: calc(17px + 11px);
  transform: rotate(-315deg);
}


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

#js-menumarkWrap{ display: block;}

.menumark{/* 変更部分のみ */
 display: block;
}

}/*----- media -----*/