/*　ハンバーガーボタン　*/
.openBtn {
    position: fixed;
    top:10px;
    right:10px;
    width:70px;
    height: 70px;
    display: block;
    z-index:3;
    cursor: pointer;
}
.openBtn img {
    width: 100%;
    height: auto;
}

.closeBtn {
    width:64px;
    height: 64px;
    display: block;
    position: absolute;
    right:15px;
    top:15px;
    background: none;
}
.closeBtn img {
    width: 100%;
    height: auto;
}
.closeBtn {
    border: 0;
    padding: 0;
}
@media screen and (max-width:750px){
    .openBtn {
    width:60px;
    height: 60px;
}
    .closeBtn {
    width:42px;
    height: 42px;
    display: block;
    position: absolute;
    right:15px;
    top:15px;
}
}



/* ========================
   navモーダル
==========================*/




.nav-remodal {
    
    border-radius: 15px;
    text-align: left;
    max-width: 700px!important;
    width:75%!important;
    height:auto!important;
    padding: 0!important;
    overflow: hidden;
}
.nav-remodal .remodalBox {
    /* display: flex; */
    background: url(https://www.xmacaron.com/img/common/nav-bg.png) repeat !important;
    width: 100%;
    height: auto;
}
.nav-remodal button {
    appearance: none;
    border-top:0;
    border-left:0;
    border-right:0;
    cursor: pointer!important;
}

.nav-remodal .remodalBox .nav-logoBox {
    width: 100%;
    height: 192px;
    border-bottom: solid 3px #000;
    position: relative;
    background: url(../img/common/mv_pc.jpg) no-repeat;
    background-size: cover;
    background-attachment: inherit;
    box-sizing: border-box;
}

.nav-remodal .stdBtn {
    width: 300px;
    border-bottom: 3px solid #ddd;
    }

@media screen and (max-width:750px){
    .nav-remodal .remodal-wrapper {
        padding: 0!important;
    }
    .nav-remodal {
        max-width:90%!important;
    width:90%!important;
    height:94%!important;
    padding: 0!important;
        overflow:hidden;
    }
    .nav-remodal .remodalBox {
    display: block;
    background:url(https://www.xmacaron.com/img/common/nav-bg.png) repeat!important;
    width:100%;
    height: 100%;
}
    .nav-remodal .remodalBox .nav-logoBox {
    width:100%;
    height:100px;
    border-bottom:solid 3px #000;
    background:url(../img/common/nav-bg_sp.jpg) no-repeat;
    background-size:cover;
        background-attachment: inherit;
    box-sizing: border-box;  
    }

    
}

/*========= 流体シェイプを動かす ===============*/
.nav-remodal .remodalBox .fluid {
  /*width:53%;
  height: 33%;*/
    max-width:155px;/*横幅*/
  max-height: 155px;/*縦幅*/
  background:#fff;/*背景色*/
  animation: fluidrotate 20s ease 0s infinite;/*アニメーションの設定*/
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    margin:auto;
}

@keyframes fluidrotate {  
    
0%, 100% {
    border-radius: 63% 37% 54% 46%/55% 48% 52% 45%;
}
14% {
    border-radius: 40% 60% 54% 46%/49% 60% 40% 51%;
}
28% {
    border-radius: 54% 46% 38% 62%/49% 70% 30% 51%;
}
42% {
    border-radius: 61% 39% 55% 45%/61% 38% 62% 39%;
}
56% {
    border-radius: 61% 39% 67% 33%/70% 50% 50% 30%;
}
70% {
    border-radius: 50% 50% 34% 66%/56% 68% 32% 44%;
}
84% {
    border-radius: 46% 54% 50% 50%/35% 61% 39% 65%;
}
    
}

@media screen and (max-width:750px){
   .nav-remodal .remodalBox .fluid {
  width:79px;/*横幅*/
  height: 79px;/*縦幅*/
  background:#fff;/*背景色*/
  animation: fluidrotate 20s ease 0s infinite;/*アニメーションの設定*/
    position:absolute;
    left:0;
    right:0;
    margin:auto;
    top:0;
}
    
}

/*========= 流体シェイプを動かす ===============*/
.nav-remodal .remodalBox .fluid-2 {
  /*width:50%;
  height: 30%;*/
    max-width:140px;/*横幅*/
  max-height: 140px;/*縦幅*/
  background:#ffe375;/*背景色*/
  animation: fluidrotate 20s ease 0s infinite;/*アニメーションの設定*/
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    margin:auto;
}

@keyframes fluidrotate {  
    
0%, 100% {
    border-radius: 63% 37% 54% 46%/55% 48% 52% 45%;
}
14% {
    border-radius: 40% 60% 54% 46%/49% 60% 40% 51%;
}
28% {
    border-radius: 54% 46% 38% 62%/49% 70% 30% 51%;
}
42% {
    border-radius: 61% 39% 55% 45%/61% 38% 62% 39%;
}
56% {
    border-radius: 61% 39% 67% 33%/70% 50% 50% 30%;
}
70% {
    border-radius: 50% 50% 34% 66%/56% 68% 32% 44%;
}
84% {
    border-radius: 46% 54% 50% 50%/35% 61% 39% 65%;
}
    
}

@media screen and (max-width:750px){
    .nav-remodal .fluid-2 {
  width:70px;/*横幅*/
  height: 70px;/*縦幅*/
  background:#ffe375;/*背景色*/
  animation: fluidrotate 20s ease 0s infinite;/*アニメーションの設定*/
    position:absolute;
    left:0;
    right:0;
    margin:auto;
    top:0;
}
    
}

/* ちしまのにわロゴ */
.nav-remodal .remodalBox .logo {
    position: absolute;
    left:0;
    right:0;
    margin:auto;
    top:0;
    bottom:0;
    width:14%;
    max-width:140px;
    height: auto;
    z-index: 1
}
@media screen and (max-width:750px){
   .nav-remodal .remodalBox .logo {
    position: absolute;
    left:0;
    right:0;
    margin:auto;
    top:0;
    width:48px;
    height: auto;
    z-index: 1
}
}


.nav-remodal .remodalBox .nav-btnBox {
    width: 100%;
    height: auto;
    padding:5%;
    /* padding-top: 17%; 
    margin-top: 7%;*/
}
.nav-remodal .remodalBox .nav-btnBox > div {
    max-width: 1000px;
    width: 100%;
    /* max-height: 366px; */
    /* height: 100%; */
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    padding: 0;
    /* padding: 25% 0; */
}

.nav-remodal .remodalBox .nav-btnBox > div .navBtn {
    /* max-width: 380px; */
    width: 48%;
    height: auto;
    margin-right: 3%;
    margin-bottom: 4%;
    height: auto;
    display: inline-flex;
    /* margin-top: 8%; */
}
.nav-remodal .remodalBox .nav-btnBox > div .navBtn:nth-child(2n){
    margin-right: 0;
}
.nav-remodal .remodalBox .nav-btnBox > div .navBtn img {
    width: 100%;
    height: auto;
}
.nav-remodal .remodalBox .nav-btnBox ul {
    text-align: center;
}
.nav-remodal .remodalBox .nav-btnBox ul li {
    display: inline;
    margin-right: 30px;
}
.nav-remodal .remodalBox .nav-btnBox ul li:last-child {
    margin-right: 0;
}
.nav-remodal .remodalBox .nav-btnBox ul li span{
    padding-left: 10px;
    font-weight: bold;
}




@media screen and (max-width:750px){
    .nav-remodal .remodalBox .nav-btnBox {
    position:relative;
    width:100%;
        height:100%;
            margin-top: 3%;
    /*padding-top:17%;*/
        margin:0 auto;
        padding:0!important;
        overflow-y: scroll;
        
    }
    .nav-remodal .remodalBox .nav-btnBox > div {
        max-width: 85%;
        max-height: 95%;
    width:100%;
        height: 100%;
    position: absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    margin:auto;
        
        /*background:#ccc;
        border:2px solid #000;
        box-sizing: border-box;*/
        padding:0;
    }
    .nav-remodal .remodalBox .nav-btnBox > div .navBtn{
    max-width:100%;    
    width:100%;
    height: auto;
    margin-right: 0;
    margin-bottom: 7%;
    height: auto;
    display: block;
    }
    .nav-remodal .remodalBox .nav-btnBox ul {
    text-align: left;
    }
    .nav-remodal .remodalBox .nav-btnBox ul li {
    display: inline-block;
    margin-right: 4%;
    }
    
}