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

　●　ヘッダー（グローバルメニュー）
　●　グローバルメニュー（pcスクロール時のみ）
　●　ハンバーガーメニュー（＋h1）
　●　navアニメーション

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


/*========================================
　●　ヘッダー（グローバルメニュー）
========================================*/
.headerWrap{/* header分の高さ用 */
 position: relative;
 height: 285px;
 background: var(--main-green);
}

header{
 position: absolute; top: 0; left: 0; z-index: 10;
 width: 100%;
 height: 100%;
 margin-left: auto;
 margin-right: auto;
 color: #fff;
 font-size: 22px;
 background:
  url("../images/bgdeco/deco_line01.png") repeat-x center top,
  url("../images/bgdeco/bg_sedots01.png") repeat-x center top,
  var(--main-green);
}

/*------------------------------ グローバルメニュー */
.header--inner{
 display: flex;
  align-items: center;
 width: 100%;
 height; 285px;
 max-width: 1280px;
 margin: 0 auto;
 padding-top: 10px;
}

header nav{
 display: flex;
  flex-direction: column-reverse;
 width: 100%;
}

/*-------------------- nav詳細1 */
ul.navMain{
 display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  justify-content: center;
 line-height: 1;
}

ul.navMain li{
 width: 148px;
 color: #fff;
 font-size: 21px;
 list-style: none;
 border-right: 2px dotted var(--main-yegreen);
}
ul.navMain li img{ width: 100%;}

ul.navMain li:last-of-type{ border: none;}

/*-----*/
ul.navMain li a{
 display: block;
 text-align: center;
 text-decoration: none;
 filter: invert(26%) brightness(300%) contrast(300%) saturate(0%);
}
ul.navMain li a:link,
ul.navMain li a:visited{ color: #fff;}
ul.navMain li a:hover{ color: var(--main-yellow); filter: none;}

/*-------------------- nav詳細2 */
.navSub{
 position: relative;
 display: flex;
  align-items: center;
  align-self: flex-end;
  flex-wrap: wrap;
 width: 100%;
 height: 148px;
}

.nav--tel{
 position: absolute; top: 60px; left: calc(50% + 274px);

}
.nav--tel img{ width: 100%; max-width: 208px;}

.nav--tel a[href^="tel:"] {
 pointer-events: none;
 text-decoration: none;
}

/*============================== ■ max-width 1087 */
@media screen and (max-width: 1087px){
/*------------------------------ 全体 */
.headerWrap{
 height: 80px;
}

header{
 position: fixed; top: 0; z-index: 10000;
 height: 80px;
 background: #fff;
 border-bottom: 2px solid var(--main-green);
}

/*------------------------------ グローバルメニュー */
.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;
 color: #fff;
 background:
  url("../images/bgdeco/deco_line01.png") repeat-x center top,
  url("../images/bgdeco/bg_sedots03.png") repeat-y 50% top / 1280px,
  var(--main-green);
}

.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-direction: column;
  flex-wrap: wrap;
  justify-content: center;
 width: 100%;
 height: auto;
 margin-top: 124px;
 padding-bottom: 12px;
 background: rgba(76,172,38,0.7);
}

/*-------------------- nav詳細1 */
ul.navMain{
 display: flex;
  align-items: flex-start;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
 width: calc(100% - 16px);
 max-width: 750px;
 margin-bottom: 16px;
 margin-right: 0;
 margin-left: 0;
}

ul.navMain li{
 height: auto;
 margin: 0 0 12px 0;
}

/*-----*/
ul.navMain li{ border-right: none;}


/*-------------------- nav詳細2 */
.navSub{
 display: flex;
  align-items: center;
  flex-direction: column;
 width: calc(100% - 16px);
 max-width: 500px;
 height: auto;
 margin-left: auto;
 margin-right: auto;
 padding-top: 16px;
 padding-bottom: 16px;
 padding-left: 8px;
 padding-right: 8px;
 border: 1px solid var(--main-yegreen);
}

.nav--tel{
 position: static;
 text-align: center;
}


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

/*============================== ■ max-width 767 */
@media screen and (max-width: 767px){
/*------------------------------ グローバルメニュー */
.header--inner{
 padding-bottom: 80px;
 background:
  url("../images/bgdeco/deco_line01.png") repeat-x center top,
  var(--main-green);
}
}/*----- media -----*/

/*============================== ■ max-width 520 */
@media screen and (max-width: 520px){
.nav--tel a[href^="tel:"] {
 pointer-events: auto;
}

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


/*========================================
　●　グローバルメニュー（pcスクロール時のみ）
========================================*/
.nav_pcScroll{
 display: none;
 position: fixed; top: 0px; left: 0; z-index: 0;
 width: 100%;
 height: 112px;
 opacity: 0;
 color: #fff;
 font-size: 18px;
 background: var(--main-green);
 border-bottom: 2px solid var(--main-yegreen);
}

.scrolled.nav_pcScroll{
 display: block;
 position: fixed; top: 0; left: 0; z-index: 10000;
 width: 100%;
 opacity: 1;
 animation: ani-nav_pcScroll 0.6s ease-out forwards;
}

@keyframes ani-nav_pcScroll{
  0% { opacity: 0; transform: translateY(-10px)}
100% { opacity: 1; transform: translateY(0px)}
}

.nav_pcScroll--inner{
 display: flex;
  align-items: center;
  justify-content: center;
 width: 100%;
 max-width: 1280px;
 height: 100%;
 margin: 0 auto;
}

/*-------------------- nav詳細1（ul.navMain 参考） */
.nav_pcScrollMain{
 position: relative;
 display: flex;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
 line-height: 1;
 margin-top: 36px;
}

.nav_pcScrollMain li{
 width: auto;
 margin: 0 12px 0 12px;
 color: var(--main-textcolor);
 font-family: 'Kiwi Maru','Noto Sans JP', sans-serif;
 font-size: 19px;
 list-style: none;
}

.nav_pcScrollMain li.tel01_scroll{ position: absolute; top: -36px; right: 0;}
.nav_pcScrollMain li.tel01_scroll img{ width: calc(208px * 0.8);}


/*-----*/
.nav_pcScrollMain li a{
 display: flex;
  align-items: center;
  flex-direction: column;
 width: 100%;
 height: 52px;
 text-align: center;
 text-decoration: none;
 transition: all 0.2s ease-out;
}

.nav_pcScrollMain li a:link,
.nav_pcScrollMain li a:visited{ color: #fff;}
.nav_pcScrollMain li a:hover{ color: var(--main-yellow);}

.nav_pcScrollMain li a span{
 display: block;
}

.u-1gyou a{
 padding-top: 12px;
}

/*-----*/
.nav_pcScrollMain li a:after{
 display: flex;
  align-items: center;
 width: 0;
 height: 100%;
 padding-top: 11px;
 content: '';
 border-bottom: 3px solid rgba(0,0,0,0);
 transition: all 0.3s ease;
}

.nav_pcScrollMain li a:hover:after{
 width: 100%;
 border-bottom: 3px solid var(--main-yellow);
}


/*============================== ■ max-width 1087 */
@media screen and (max-width: 1087px){
.nav_pcScroll,
.scrolled.nav_pcScroll{ display: none; position: fixed; top: 0; left: 0; z-index: 0;}

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

/*========================================
　●　ハンバーガーメニュー（＋h1）
========================================*/
/*------------------------------ h1 */
header h1{
 position: absolute; top: 76px; left: calc(50% - 570px); z-index: 10000;
 font-family: 'Kiwi Maru','Noto Sans JP', sans-serif;
 font-size: 24px;
}

.h1_logo{
 position: absolute; top: 45px; left: calc(50% - 240px); z-index: 10000;
 width: 100%;
 max-width: 480px;
}


.h1_logo img{ width: 100%;}

/*------------------------------ h1（PCスクロール：なし） */

/*------------------------------ ハンバーガーベース */
#js-menumarkWrap{}

.menumark{
 position: fixed; top: 11px; 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;
 transition: 0.3s ease-in-out;
}

.menumark span:nth-child(1){
 top: 17px;
 background: var(--main-yellow);
}
.menumark span:nth-child(2){
 top: calc(17px + 11px);
 background: var(--main-blue);
}
.menumark span:nth-child(3){
 top: calc(17px + 22px);
 background: var(--main-yegreen);
}

/*------------------------------ アニメーション */
.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: 56px; left: 24px; z-index: 10000; color: var(--main-textcolor); font-size: 16px;}

.h1_logo{
 position: fixed; top: 6px; left: 8px; z-index: 10000;
 width: calc(400px * 0.6);
}

/*-----*/

.open h1{ position: fixed; top: 83px; left: calc(50% - 104px); z-index: 10000; color: #fff;}

.open .h1_logo{ position: fixed; top: 28px; left: calc(50% - 120px); z-index: 10000;}


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

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

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

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

/*========================================
　●　navアニメーション
========================================*/
ul.navMain li{
 opacity: 0;
 animation: ani-navli 2.0s ease-out forwards;
}

@keyframes ani-navli{
  0% {opacity: 0;}
100% {opacity: 1;}
}

.navSub{
 opacity: 0;
 animation: ani-navSub 1.6s ease-out forwards;
 animation-delay: 0s;
}

@keyframes ani-navSub{
  0% {opacity: 0;}
100% {opacity: 1;}
}

/*============================== ■ max-width 1087 */
@media screen and (max-width: 1087px){
ul.navMain li{
 opacity: 1;
 animation: none;
}

.navSub{
 opacity: 1;
 animation: none;
}

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