@charset "utf-8";
/* CSS Document */

/*共通　hide-areaはじめ隠す*/
.m-hide-area{
  display: none;
}

.m-hide-area.active{
  overflow-y: auto;
  display: block;
}

/************************************************************************************************/
/*ナビゲーションパネル*/
.navpnl-bk{
  /*ナビパネル　hide-areaはじめ隠す*/
  position:fixed;/*position:fixed;にし、z-indexの数値を大きくして前面へ*/
  /*ハンバーガーメニューより下に表示*//*z-index: 50;*/
  z-index: 30;
  background-color: rgba(0, 0 ,0, 0.5);
  /*ナビパネルウィンドウ自体の位置*/
  top:0;
  right:0;
  width:100%;
  height: 100vh;/*ナビの高さ100vh 100%*/
}

/*hide-areaはじめ隠す*/
.navpnl-hide-area{
    display: none;
    animation : sp-fadeOut .2s;
     animation-fill-mode: both;
}

.navpnl-hide-area.active{
display: block;
/*navpnl-bkでposition:fixed;*/
overflow-y: auto;/*これを外すと子階層でスクロールバーが表示されない*/
animation : sp-fadeIn .2s;
animation-fill-mode: both;
}

@keyframes sp-fadeIn{
    0%{opacity: 0}
    100%{opacity: 1}
}

@keyframes sp-fadeOut{
    0%{opacity: 1}
    100%{opacity: 0}
}

/***********************************/
/*スクロールバーカスタマイズ(Firefox、iOS Safariは効かない)*/
.navpnl-bk::-webkit-scrollbar {
  width: 5px;
}

.navpnl-bk::-webkit-scrollbar-track {
  background-color: #FAF9F7;
}

.navpnl-bk::-webkit-scrollbar-thumb {
  background-color: #6B6550;
  border-radius: 8px;
}

/*ナビパネル END*/
/************************************************************************************************/

/*.m-modal{}*/
.m-bk {
    background: #E5E5E5;
    position:fixed;
    /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
    z-index: 999;
    /*モーダルウィンドウの位置*/
	top:0;
	left:0;
	/*left: auto;
   right: auto;*/
	width:100%;
	height: 100vh;/*ナビの高さ100vh 100%*/
    /*min-height: 100vh;*/
}

.m-container{
    position: relative;
    margin: 2em auto;/*1em*/
    width:96%;
    max-width:980px;
    height: auto;
}

@media (max-width:767.88px){
.m-container{
    margin: 0 auto;
    width:100%;
    height: 100%;
    /*min-height: 100vh;*/
    }
}
/*<!--modal-active open close on off -->*/
/*バッテンボタン*/
.m-close{
    position: absolute;/* fixed absolute*/
    cursor: pointer;
    top: 16px;/*1em*/
    right: 24px;/*1.5em*/
    width: 36px;
    height: 36px;
    border-radius: 100%;
    background-color: rgba(0,0,0,0);
}

.m-close::after, .m-close::before{
  content: "";
  display: block;/*inline-block*/
  width:45%;
  height:3px;
  border-radius: 3px;
  background-color: #595959;
  position: absolute;
  top: 50%;
  left: 27.5%;
  transform: translateY(-50%);
}

.m-close::before{
    transform:rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
}

.m-close::after{
    transform:rotate(45deg);
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
}

@media (any-hover: hover) {
  .m-close:hover{
  background-color: rgba(232, 232, 230, .8);
  }
}

.m-close:active{
    background: #ebebeb;/*e5e5e5*/
}

.m-closeBtn{
    display: block;
    margin: 0 auto;
    margin-top: 5em;/*8 10em*/
    border-radius:200px;
    background-color: #5484B0;
    border-style: none;
    color: #ffffff;
    padding: 0.8em 1.7em 0.9em;/*0.5em 2em*/
    cursor: pointer;
    font-size: 0.75em;/* 0.875em 14px*/
    font-weight: 500;
    letter-spacing: 0.1em;
   /* color: var(--color-maintext);*/
    -webkit-tap-highlight-color: transparent;/*強調をなくす*/
}

@media (any-hover: hover) {
  .m-closeBtn:hover{
      opacity: 0.8;
  }
}

.m-closeBtn:active{
    opacity: 0.8;
    transform: translate(1px,2px);    
}