/**
 * NcpModal
 *
 * @author    furuyama
 * @copyright NeoStateJapan Inc.
 *
 * @version 1.2.3
 */

 .ncp-modal--overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color:rgba(0,0,0,.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 1000;
}
/* pc */
@media screen and (min-width: 641px) {
  .ncp-modal--overlay {
    transition: .25s;
  }
}

.ncp-modal-wrapper {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  width: 100%;
  z-index: 1001;
}
.ncp-modal-wrapper form {
  display: initial;
}
.ncp-modal{ height:100%; background:#fff; box-shadow:0px 0px 12px -1px #333;}
.ncp-modal-header{ width:100%; height:56px; box-shadow:0px 0px 6px -2px #333;}
.ncp-modal-body{ height:calc(100% - 56px); overflow-y:auto; padding-top:16px; -webkit-overflow-scrolling:touch;}
.ncp-modal-body.has-footer {
  height: calc(100% - 56px - 64px);
}

/* フッタ */
.ncp-modal-footer {
  background: #fff;
  width: 100%;
  max-width: 640px;
  min-height: 64px;
  border-top: 1px solid #ddd;
  padding: 1rem;
  position: fixed;
  z-index: 1001;
}

/* IE対応 */
@media all and (-ms-high-contrast: none) {
  .ncp-modal{ overflow-y:scroll;}
  .ncp-modal-body.has-footer{ padding-bottom:84px;}
  .ncp-modal-footer{ position:absolute; bottom:0px;}
}

.ncp-modal-header .block-back{ display:inline-block; width:4rem; height:100%; vertical-align:top;}
.ncp-modal-header .block-back .back-btn-wrapper{ display:flex; width:100%; height:100%; justify-content:center; align-items:center;}
.ncp-modal-header .back-btn {
  width: 40px;
  height: 40px;
  background: inherit;
  border: none;
  border-radius: 50%;
}
.ncp-modal-header .back-btn.back-btn-sp {
  font-size: 1.2em;
  color: #333;
}
.ncp-modal-header .back-btn.back-btn-pc {
  display: none;
  justify-content: center;
  align-items: center;
  font-size: 1.5em;
  color: #888;
  padding: 3px;
}
.ncp-modal-header .back-btn.back-btn-pc:hover,
.ncp-modal-header .back-btn.back-btn-pc:focus,
.ncp-modal-header .back-btn.back-btn-mt-main:hover,
.ncp-modal-header .back-btn.back-btn-mt-main:focus
 {
  color: #333;
  background-color: #f2f2f2 !important;
}
.ncp-modal-header .modal-title{ display:inline-block; height:100%;}
.ncp-modal-header .modal-title .title-wrapper {
  display: flex;
  align-items: center;
  height: 100%;
  font-size: 1.2em;
}
/* IE対応 */
@media all and (-ms-high-contrast: none) {
  .ncp-modal-header .back-btn.back-btn-pc{ background:none;}
}


/**
 * 各ブラウザでモーダルの背景が動かないようにする対策
 */
body.ncp-modal-parent {
  position: fixed;
  left: 0;
  right: 0;
  /* v140 bodyScrollLock導入より削除
  width: 100%;
  height: 100%;
  left: 0;
  */
}


/* pc */
@media screen and (min-width: 993px) {

  #NcpModalOverlay {
    transition: .2s;
  }

  .ncp-modal-wrapper {
    top: 5%;
    max-width: 640px;
    max-height: 84%;
    margin: auto;
    transition: .25s;
    transition-property: opacity;
    box-shadow: 0px -1px 32px #555;
  }

  .ncp-modal-wrapper.ncp-modal-l {
    top: 3%;
    max-width: 820px;
    max-height: 94%;
  }
  .ncp-modal-wrapper.ncp-modal-l .ncp-modal-footer {
    max-width: 820px;
  }

  .ncp-modal-wrapper.ncp-modal-x {
    top: 0;
    left: 0;
    max-width: 100%;
    max-height: 100%;
  }
  .ncp-modal-wrapper.ncp-modal-x .ncp-modal-footer {
    max-width: 100%;
  }

  .ncp-modal{ min-width:480px;}
  .ncp-modal-header .block-back{ float:right; margin-right:5px;}
  .ncp-modal-header .back-btn.back-btn-sp{ display:none;}
  .ncp-modal-header .back-btn.back-btn-pc{ display:flex; cursor: pointer;}
  .ncp-modal-wrapper:not(.ncp-modal-mt-main) .ncp-modal-header .modal-title .title-wrapper {
    padding-left: 15px;
  }

  .modal-load-area{ padding-bottom:40%;}
}

/* sp */
@media screen and (max-width: 640px) {
  .ncp-modal-body {
    padding-bottom: 64px;
  }
  .ncp-modal-footer {
    bottom: 0;
  }

  @supports (padding-bottom: constant(safe-area-inset-bottom)) {
    .ncp-modal-body {
      --safe-area-inset-bottom: constant(safe-area-inset-bottom);
      padding-bottom: calc(64px + var(--safe-area-inset-bottom));
    }
  }
  @supports (padding-bottom: env(safe-area-inset-bottom)) {
    .ncp-modal-body {
      --safe-area-inset-bottom: env(safe-area-inset-bottom);
      padding-bottom: calc(64px + var(--safe-area-inset-bottom));
    }
  }
}


/* loading */
.modal-load-area{ display:flex; justify-content:center; align-items:center; width:100%; height:calc(100% - 56px); position:absolute; top:56px; left:0; right:0; background:rgb(255,255,255); margin-top:8px;;}
@media screen and (max-width: 640px) {
  .modal-load-area{ top:-56px;}
}
/* loading(text) */
.load-text {
  color:rgb(0,0,0); font-family:Arial; font-size:44px; text-decoration:none; font-weight:normal; font-style:normal; float:left;
  animation-name:bounce_spinningTextG;
    -o-animation-name:bounce_spinningTextG;
    -ms-animation-name:bounce_spinningTextG;
    -webkit-animation-name:bounce_spinningTextG;
    -moz-animation-name:bounce_spinningTextG;
  animation-duration:1.89s;
    -o-animation-duration:1.89s;
    -ms-animation-duration:1.89s;
    -webkit-animation-duration:1.89s;
    -moz-animation-duration:1.89s;
  animation-iteration-count:infinite;
    -o-animation-iteration-count:infinite;
    -ms-animation-iteration-count:infinite;
    -webkit-animation-iteration-count:infinite;
    -moz-animation-iteration-count:infinite;
  animation-direction:normal;
    -o-animation-direction:normal;
    -ms-animation-direction:normal;
    -webkit-animation-direction:normal;
    -moz-animation-direction:normal;
  transform:scale(.3);
    -o-transform:scale(.3);
    -ms-transform:scale(.3);
    -webkit-transform:scale(.3);
    -moz-transform:scale(.3);
}
.load-text.text1{
  animation-delay:0.08s;
    -o-animation-delay:0.08s;
    -ms-animation-delay:0.08s;
    -webkit-animation-delay:0.08s;
    -moz-animation-delay:0.08s;
}
.load-text.text2{
  animation-delay:0.27s;
    -o-animation-delay:0.27s;
    -ms-animation-delay:0.27s;
    -webkit-animation-delay:0.27s;
    -moz-animation-delay:0.27s;
}
.load-text.text3{
  animation-delay:0.46s;
    -o-animation-delay:0.46s;
    -ms-animation-delay:0.46s;
    -webkit-animation-delay:0.46s;
    -moz-animation-delay:0.46s;
}
.load-text.text4{
  animation-delay:0.67s;
    -o-animation-delay:0.67s;
    -ms-animation-delay:0.67s;
    -webkit-animation-delay:0.67s;
    -moz-animation-delay:0.67s;
}
.load-text.text5{
  animation-delay:0.88s;
    -o-animation-delay:0.88s;
    -ms-animation-delay:0.88s;
    -webkit-animation-delay:0.88s;
    -moz-animation-delay:0.88s;
}
.load-text.text6{
  animation-delay:1.07s;
    -o-animation-delay:1.07s;
    -ms-animation-delay:1.07s;
    -webkit-animation-delay:1.07s;
    -moz-animation-delay:1.07s;
}
.load-text.text7{
  animation-delay:1.26s;
    -o-animation-delay:1.26s;
    -ms-animation-delay:1.26s;
    -webkit-animation-delay:1.26s;
    -moz-animation-delay:1.26s;
}
.load-text.text8{
  animation-delay:1.45s;
    -o-animation-delay:1.45s;
    -ms-animation-delay:1.45s;
    -webkit-animation-delay:1.45s;
    -moz-animation-delay:1.45s;
}
.load-text.text9{
  animation-delay:1.64s;
    -o-animation-delay:1.64s;
    -ms-animation-delay:1.64s;
    -webkit-animation-delay:1.64s;
    -moz-animation-delay:1.64s;
}
.load-text.text10{
  animation-delay:1.83s;
    -o-animation-delay:1.83s;
    -ms-animation-delay:1.83s;
    -webkit-animation-delay:1.83s;
    -moz-animation-delay:1.83s;
}
@keyframes bounce_spinningTextG{
  0%{ transform:scale(1); color:rgb(0,0,0);}
  100%{ transform:scale(.3) rotate(90deg); color:rgb(255,255,255); }
}
@-o-keyframes bounce_spinningTextG{
  0%{ -o-transform:scale(1); color:rgb(0,0,0);}
  100%{ -o-transform:scale(.3) rotate(90deg); color:rgb(255,255,255);}
}
@-ms-keyframes bounce_spinningTextG{
  0%{ -ms-transform:scale(1); color:rgb(0,0,0);}
  100%{ -ms-transform:scale(.3) rotate(90deg); color:rgb(255,255,255);}
}
@-webkit-keyframes bounce_spinningTextG{
  0%{ -webkit-transform:scale(1); color:rgb(0,0,0);}
  100%{ -webkit-transform:scale(.3) rotate(90deg); color:rgb(255,255,255);}
}
@-moz-keyframes bounce_spinningTextG{
  0%{ -moz-transform:scale(1); color:rgb(0,0,0);}
  100%{ -moz-transform:scale(.3) rotate(90deg); color:rgb(255,255,255);}
}



/******************************************************
 *
 * Materializeメインカラムサイズ
 *
 *****************************************************/
.ncp-modal-wrapper .back-btn-mt-main {
  display: none;
}
.ncp-modal-wrapper.ncp-modal-mt-main .ncp-modal {
  box-shadow: none;
}
.ncp-modal-wrapper.ncp-modal-mt-main .ncp-modal-header {
  box-shadow: 6px 0px 6px -2px #333;
}

/* pc */
@media screen and (min-width: 993px) {
  body:not(.one-column) .ncp-modal-wrapper.ncp-modal-mt-main {
    top: 0 !important;
    left: 300px;
    max-height: 100% !important;
    max-width: calc(100% - 300px) !important;
    box-shadow: -1px 0 0 #ddd;
    transition: none !important;
  }
  /* 戻るボタン */
  .ncp-modal-wrapper.ncp-modal-mt-main .ncp-modal-header .block-back {
    float: inherit;
  }
  .ncp-modal-wrapper.ncp-modal-mt-main .ncp-modal-header .back-btn-mt-main {
    display: block;
    width: 40px;
    height: 40px;
    font-size: 1.2em;
    color: #333;
    background: inherit;
    border: none;
  }
  .ncp-modal-wrapper.ncp-modal-mt-main .ncp-modal-header .back-btn.back-btn-pc,
  .ncp-modal-wrapper.ncp-modal-mt-main .ncp-modal-header .back-btn.back-btn-sp {
    display: none;
  }
  .ncp-modal-mt-main .ncp-modal-body {
    padding-left: 32px;
    padding-right: 32px;
  }
}


/******************************************************
 *
 * ダークモード
 *
 *****************************************************/
:root {

  /* 背景色 */
  --dark-bg-color: #252525;
}

/* BG */
[data-mode='dark'] .ncp-modal--overlay {
  background-color: rgba(255,255,255,.04)
}

[data-mode='dark'] .ncp-modal-wrapper {
  box-shadow: none;
}

[data-mode='dark'] .modal-load-area,
[data-mode='dark'] .ncp-modal {
  background-color: var(--dark-bg-color);
}

[data-mode='dark'] .ncp-modal-header .back-btn.back-btn-pc:hover,
[data-mode='dark'] .ncp-modal-header .back-btn.back-btn-pc:focus {
  color: #aaa!important;
}

[data-mode='dark'] .ncp-modal-footer {
  background-color: var(--dark-bg-color);
  border-color: #333;
}

[data-mode='dark'] body:not(.one-column) .ncp-modal-wrapper.ncp-modal-mt-main {
  box-shadow: -1px 0 0 rgba(255, 255, 255, .08);
}
[data-mode='dark'] .ncp-modal-wrapper.ncp-modal-mt-main .ncp-modal-header .back-btn-mt-main,
[data-mode='dark'] .ncp-modal-header .back-btn.back-btn-pc:hover,
[data-mode='dark'] .ncp-modal-header .back-btn.back-btn-pc:focus,
[data-mode='dark'] .ncp-modal-header .back-btn.back-btn-mt-main:hover,
[data-mode='dark'] .ncp-modal-header .back-btn.back-btn-mt-main:focus {
  color: #e8e8e8 !important;
}
[data-mode='dark'] .ncp-modal-header .back-btn.back-btn-pc:hover,
[data-mode='dark'] .ncp-modal-header .back-btn.back-btn-pc:focus,
[data-mode='dark'] .ncp-modal-header .back-btn.back-btn-mt-main:hover,
[data-mode='dark'] .ncp-modal-header .back-btn.back-btn-mt-main:focus {
  background-color: #333 !important;
}