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

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

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


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

header{
 position: fixed; top: 0px; left: 0; z-index: 7000;
 width: 100%;
 height: 90px;
 color: #fff;
 background: #38211a;
 transition: all 0.1s ease-out;
}

header.fixed{}

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

header nav{
 display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
 height: 90px;
}

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

ul.nav_main li{
 margin: 0 11px 0 11px;
 padding: 18px 0 16px 0;
 font-size: 18px;
 list-style: none;
}

ul.nav_main li a{
 display: block;
 width: 100%;
 height: 100%;
 text-decoration: none;
 transition: all 0.2s ease-out;
}

ul.nav_main li a:link   { color: #fff;}
ul.nav_main li a:visited{ color: #fff;}
ul.nav_main li a:hover  {
 opacity: 0.6;
}

ul.nav_main li.spnav01{
 display: none;
}

/*-------------------- nav詳細2 */
ul.nav_sub{}

.nav--tel{
 position: absolute; top: 18px; right: 114px;
 display: flex;
 width: 320px;
}

.nav--plan{
 display: flex;
  align-items: center;
  justify-content: center;
 width: 112px;
 height: 100%;
 background: #778b26;
}

.nav--plan a{
 display: flex;
  align-items: center;
  justify-content: center;
 width: 100%;
 height: 100%;
}
.nav--plan a{}
.nav--plan a:hover{/* background: #6b5d7c;*/}

ul.nav_sub li{ list-style: none;}
ul.nav_sub li a{
 transition: all 0.3s ease-out;
}
ul.nav_sub li a:hover{}


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

header{ height: 90px;}

header.fixed{}

/*------------------------------ グローバルメニュー */
.header--inner{ opacity: 0;
 overflow: auto;
 position: fixed; top: 0; left: 100%; z-index: 7800;
 display: flex;
  align-items: flex-start;
  justify-content: center;
 margin-top: 0px;
 padding-bottom: 10px;
 width: 100%;
 height: 100vh;
 background: #44245d;
}

.open.header--inner{ opacity: 1;
 position: fixed; top: 0; left: 0%;
 animation: ani_fade 0.3s ease-out forwards;
}
header nav{
 display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
 width: 100%;
 height: auto;
 max-width: 600px;
 margin-top: 120px;
}

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

ul.nav_main li{
 width: 100%;
 margin: 0 0 0 0;
 border-bottom: 1px solid #1c2644;
}

ul.nav_main li a{}
ul.nav_main li a:hover{}

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

ul.nav_main li.spnav01{
 position: absolute; top: 36px; left: calc(50% - 112px);
 display: block;
 width: calc(189px * 1.0);
 margin: 0;
 padding: 0;
 border-bottom: none;
}

ul.nav_main li.spnav01 img{ width: 100%;}

/*-------------------- 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{}

.nav--tel{
 position: static;
 display: flex;
  align-items: center;
  flex-direction: column;
 width: auto;
}

.nav--tel img{ width: auto; margin: 4px 0;}

.nav--plan{
 display: flex;
  align-items: center;
  justify-content: center;
 position: static;
 width: 185px;
 margin-bottom: 20px;
}

.nav--plan a{
 padding: 10px 0;
}

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

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

/*========================================
　●　ハンバーガーメニュー
========================================*/
/*------------------------------ h1 */
header h1{
 position: absolute; top: 6px; left: 16px; z-index: 10000;
 width: 189px;
}
header h1 img{ width: 100%;}

header .open h1{ z-index: -1;}

/*------------------------------ ベース */
#js-menumarkWrap{}

.menumark{
 position: fixed; top: 15px; 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: #fff;
 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{}

header h1{
 position: fixed; top: 16px; left: 7px; z-index: 10000;
 width: calc(189px * 0.8);
 transition: all 0.1s ease-out;
}

.open h1{ position: fixed; top: 16px; left: 7px; z-index: 6000;}

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

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