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

　●　ヘッダー（グローバルメニュー）
　●　ハンバーガーメニュー（＋h1）
　●　navアニメーション

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


/*========================================
　●　ヘッダー（グローバルメニュー）
========================================*/
.headerWrap{}
header{}

/*------------------------------ グローバルメニュー */
.header--inner{}
header nav{}

/*-------------------- nav詳細1 */
ul.navMain{
 display: flex;
  align-items: flex-end;
  flex-direction: column;
 padding-top: 28px;
 padding-bottom: 12px;
 font-size: 17px;
 line-height: 1;
}

ul.navMain li:not(.spnav){
 width: 100%;
 padding-right: 4px;
 color: var(--main-ac_pink);
 line-height: 1.8;
 list-style: none;
 text-align: right;
}

ul.navMain li:not(.spnav) a::after{
 display: inline-block;
 width: calc(1.0em + 0.25em);
 content: "■";
 padding-left: 0.25em;
}

ul.navMain li:not(.spnav) a:hover::after{
 color: var(--main-green);
}

ul.navMain li.spnav{ display: none;}

ul.navMain li a{ text-decoration: none;}
ul.navMain li a:link,
ul.navMain li a:visited{ color: var(--main-ac_pink);}
ul.navMain li a:hover{ font-weight: bold;}

/*-------------------- nav詳細2 */
.navSub{
 display: flex;
  flex-direction: column;
 width: 100%;
 margin-bottom: 12px;
 color: var(--main-brown);
}

.nav--tel{
 margin-bottom: 16px;
 font-size: 18px;
 text-align: center;
}
.nav--tel img{
 width: 100%;
 max-width: 219px;
}

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

.nav--payment{
 width: 100%;
 max-width: calc(100% - 8px);
 margin-left: auto;
 margin-right: auto;
}

.nav--payment a{
 display: flex;
  justify-content: center;
  align-items: center;
 padding: 12px 4px;
 color: #fff;
 font-weight: bold;
 line-height: 1.2;
 text-align: center;
 text-decoration: none;
 background: #e75163;
 border-radius: 10px;
 transition: 0.3s ease-in-out;
}

.nav--payment a:hover{ background: var(--main-brown);}

/*============================== ■ max-width 960 */
@media screen and (max-width: 960px){
/*------------------------------ 全体 */
.headerWrap{
 position: fixed; top: 0; left: 0; z-index: 10000;
 width: 100%;
 height: 80px;
}

header{
 width: 100%;
 height: 80px;
 background: var(--main-pink);
}

/*------------------------------ グローバルメニュー */
.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: var(--main-ac_pink);
 background: #f8edef;
}

.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: 148px;
 padding-bottom: 12px;
}

/*-------------------- 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: 500px;
 margin-bottom: 16px;
 margin-right: 0;
 margin-left: 0;
}

ul.navMain li:not(.spnav){
 margin-bottom: 12px;
 padding-top: 4px;
 padding-bottom: 8px;
 padding-left: 0;
 padding-right: 4px;
 text-align: left;
 border-bottom: 2px dotted var(--main-ac_pink);
}

ul.navMain li:not(.spnav) a::before{
 display: inline-block;
 width: 1.5em;
 content: "■";
 padding-right: 0.5em;
}

ul.navMain li:not(.spnav) a:hover::before{ color: var(--main-green);}

ul.navMain li:not(.spnav) a::after{ display: none;}

ul.navMain li:not(.spnav) a{ display: block;}

ul.navMain li.spnav{
 position: absolute; top: 64px; left: calc(50% - 110px); z-index: 1000;
 display: block;
 width: 220px;
}

/*-------------------- 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{ text-align: center;}

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

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

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

/*========================================
　●　ハンバーガーメニュー（＋h1）
========================================*/
/*------------------------------ h1 */
header h1{
 position: static;
 padding-top: 112px;
 padding-bottom: 16px;
 padding-right: 3px;
 font-size: 24px;
 text-align: center;
 background: var(--main-pink);
 border-bottom: 3px solid var(--main-green);
}

header h1 img{ width: 100%; height: 100%; max-width: 220px;}


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

.menumark{
 position: fixed; top: 11px; right: 4px; z-index: 7900;
 display: none;
 width: 60px;
 height: 60px;
 cursor: pointer;
 letter-spacing: 0;
 background: none;
 background: #fff;
 border-radius: 50%;
}

/*-----*/
.menumark span{
 display: block;
 position: absolute;  top: 18px; left: 9px;
 height: 3px;
 width: 42px;
 transition: 0.3s ease-in-out;
}

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

/*------------------------------ アニメーション */
.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 960 */
@media screen and (max-width: 960px){
#js-menumarkWrap{}

header h1{
 position: absolute; top: 12px; left: 4px; z-index: 1000;
 width: 176px;
 padding-top: 0px;
 padding-bottom: 0px;
 padding-right: 0px;
 font-size: 16px;
 background: none;
 border-bottom: none;
}

/*-----*/
header .open h1{}

.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 960 */
@media screen and (max-width: 960px){
ul.navMain li{
 opacity: 1;
 animation: none;
}

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

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