#NcpModalOverlay{ position:fixed; width:100%; height:100%; top:0; left:0; background:#333; opacity:.6; z-index:1000;}
.ncp-modal-wrapper{ display:none; position:fixed; height:100vh; width:100%; top:0; left:0; right:0; 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 - 84px);}
.ncp-modal-footer{ background:#fff; width:100%; height:84px; max-width:640px; 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.back-btn-sp{ font-size:1.2em; color:#333; width:100%; height:100%; background:inherit; border:none;}
.ncp-modal-header .back-btn.back-btn-pc{ font-size:1.5em; color:#888; padding:3px; display:none; background:inherit; border:none;}
.ncp-modal-header .back-btn.back-btn-pc:hover,
.ncp-modal-header .back-btn.back-btn-pc:focus{ color:#333;}
.ncp-modal-header .modal-title{ display:inline-block; height:100%;}
.ncp-modal-header .modal-title .title-wrapper{ display:flex; height:100%; align-items:center; font-weight:bold; font-size:1.38em;}
/* IE対応 */
@media all and (-ms-high-contrast: none) {
  .ncp-modal-header .back-btn.back-btn-pc{ background:none;}
}

.ncp-modal-parent{ overflow:hidden;}

/* pc */
@media screen and (min-width: 641px) {
  #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{ 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;}
  .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;}
}

/* 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;;}


/* 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);}
}
