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

@keyframes blink {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@-webkit-keyframes blink {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@keyframes btnHover {
  0% {
    transform: translateX(-100%); }
  100% {
    transform: translateX(0%); } }
@-webkit-keyframes btnHover {
  0% {
    -webkit-transform: translateX(-100%); }
  100% {
    -webkit-transform: translateX(0%); } }
/********************************/
.clear_fix {
  zoom: 1; }

.clear_fix:after {
  content: "";
  display: block;
  clear: both;
  font-size: 0;
  line-height: 0;
  visibility: hidden; }

/********************************/
/*
リセット
/***********************/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  vertical-align: baseline;
  box-sizing: border-box;
}

html {
  line-height: 1;
  /*ビヨヨン効果を無効化する*/
  overscroll-behavior: none;
} 

ol, ul {
  list-style: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle; }

q, blockquote {
  quotes: none; }

q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none; }

a, a:hover {
  text-decoration: none; }

a > img, nav > img, li > img, div > img {
  width: 100%;
  height: auto; }

a img {
  border: none; }

a {
  cursor: pointer;
  text-decoration: none;
  color: #000; }

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block; }

button {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  padding: 0; }

@media screen and (min-width: 769px) {
  .sp_only {
    display: none !important; } }
@media screen and (max-width: 768px) {
 
  .pc_only {
    display: none !important; } }
.clearfix:after {
  font-size: 0; }

.clearfix {
  zoom: 1; }

.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden; }

body {
  position: absolute;
  background-color: #fff;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  font-size: 16px;
  /*font-size: 20px;*/
  font-family: "ヒラギノ角ゴシック Pro W3",Hiragino Kaku Gothic Pro,"メイリオ",Meiryo,Osaka,"MS Pゴシック",MS PGothic,sans-serif;
  font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
  /*font-family:  "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic","Helvetica Neue", "Helvetica", "Hiragino Sans","ヒラギノ角ゴシック Pro W3", "Hiragino Kaku Gothic ProN", "Arial", "Meiryo", sans-serif;*/
  overflow: visible; 
}

body.noscroll{
  /*overflow: hidden;*/
}

@media screen and (max-width: 768px) {
  body {
    font-size: 3.73vw; 
    /*font-size: 4.66vw; */
  } 
}

body * {
  box-sizing: border-box; }

div, h1, h2, h3, h4, h5, ul, ol, li, dl, dt, dd {
  position: relative; }

h1, h2, h3, h4, h5 {
  margin: 0;
  padding: 0;
  line-height: 1; }

p, div, span {
  margin: 0;
  padding: 0;
  line-height: 1.75; }

ul, ol, li, dl, dt, dd {
  margin: 0;
  padding: 0;
  list-style: none;
  line-height: 1; }

img,
a img {
  border: none;
  display: inline-block; }

img {
  width: 100%;
  height: auto; }

h1, h2 {
  /*font-family: 'ヒラギノ角ゴシックW6','Hiragino Sans',sans-serif;
  font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;*/
  font-weight: 600;
   }

  h1 {
    margin-bottom: 2em;
  }
/*color
atugi 
#c30d23;

hiratuka 
background-color: #f39800;

fujisawa
background-color: #004090;

hadano
background-color: #00913a;

*/

.wrapper {
  /*position: relative;*/
  width: 100%;
  /*max-width: 1200px;*/
  max-width: 768px;
  
  /*min-height: 120vw;*/
  /*margin-left: auto;
  margin-right: auto;*/
  
  
  left: 50%;
  transform: translateX(-50%);


  height: 100%;
  position: fixed;
 /* overflow: hidden;*/
  visibility: hidden;
 /* opacity: 0;*/
  transition: opacity 0.3s ease-out;
}

.wrapper.show{
   visibility: visible;
}

.wrapper.init{
  margin: 0 auto;
    transform: none;
    left: auto;
   position: relative;
   opacity: 1;
  
}

 body{
    font-size:28px;
  }

@media screen and (max-width: 768px) {
  .wrapper {
    min-width: 100%;
   /* overflow: hidden;*/
  } 

  body{
    font-size:3.65vw;
  }
}
.sp {
  display: none !important; }

@media screen and (max-width: 768px) {
  .pc {
    display: none !important; }

  .sp {
    display: block !important; } }


@media screen and (min-aspect-ratio: 7/10) and (max-height: 1097px) {
  .wrapper {
    max-width: 70vh;
    min-width: inherit;
    max-height: 120vh;
  } 

  .main.fixed{
    max-width: 70vh;
    min-width: inherit;
    max-height: 120vh;
  }


}

@keyframes blink {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@-webkit-keyframes blink {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@keyframes btnHover {
  0% {
    transform: translateX(-100%); }
  100% {
    transform: translateX(0%); } }
@-webkit-keyframes btnHover {
  0% {
    -webkit-transform: translateX(-100%); }
  100% {
    -webkit-transform: translateX(0%); } }
/********************************/
.clear_fix {
  zoom: 1; }

.clear_fix:after {
  content: "";
  display: block;
  clear: both;
  font-size: 0;
  line-height: 0;
  visibility: hidden; }

/********************************/

body {
/*  background-color: #5fb1e3;*/
  padding: 0;
  margin: 0;
  line-height: 1.35; }

/*@media screen and (min-width: 1200px) {
  body {
    font-size: 16px; } }
@media screen and (max-width: 1199px) {
  body {
    font-size: 1.33vw; } 
}

@media screen and (min-width: 679px) {
  body {
    font-size: 16px; } }
@media screen and (max-width: 678px) {
  body {
    font-size: 2.36vw; } 
}
*/

body.noscroll {
  height: 100%;
  overflow: hidden; }



header{
  position: relative;
}



 /***************************************************
TOP
****************************************************/

.preloader{
   position: absolute;
   display: block;
   left: 50%;
   top: 35vw;
   transform: translate(-50%,-50%);
   width: 15% !important;
   z-index: 50;
   transition: opacity 0.5s ease-out;
   pointer-events: none;
}

.preloader.hide{
  opacity: 0;
}


.top {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: scroll;
}

  
.top.hide {  
  height: 100%;
  overflow: hidden;
}

.top__content{
    /*margin-bottom: 2em;*/
    padding-top: 1.2em;
    padding-top: 0;
    background-color: #fff;
    transition: background-color 0.3s ease-out 0.3s;
}

.top__content.set{
   
}

.top-campain-title{
  width: 100%;
  transition: opacity 0.6s ease-out;
}

.top-campain-title.show{
  opacity: 1;
}

.top-campain-title img{
  display: block;
 
}

img.top-campain-title__main{
  position: relative;
}

img.top-campain-title__catch{
  width: 43.7%;
  left: 40%;
  top: -4%;

}

img.top-campain-title__schedule{
  width: 95.9%;
  left: 2.5%;
  top: 64.5%;
  transition: opacity 0.3s ease-out;
}

img.top-campain-title__schedule.hide{
  opacity: 0;
}

img.top-campain-title__select-modelhouse{
  width: 71.8%;
  left: 15.9%;
  top: 67%;
  transition: opacity 0.3s ease-out 0.3s;
  opacity: 0;
  pointer-events: none;
}

img.top-campain-title__select-modelhouse.show{
  opacity: 1;
  pointer-events: auto;
}




@keyframes top-roling{
  0%{transform: rotate(0);}
  50%{transform: rotate(180deg);}
  100%{transform: rotate(360deg);}
}

.top-slot{
  position: absolute;
  overflow: hidden;
  top: 0;
  background-color: #fff;
  opacity: 0;
  transform: scale(0.5);
  transition: transform 0.6s ease-out;
}



.top-slot.show{
  opacity: 1;
  
}

.top-slot.set{
  transform: scale(1);
}

.top-slot__front{
  transform: translate3D(0,0,0);
 

}

.top-slot__front img{
  position: absolute;
  top: 0;
  display: block;
  opacity: 0;

}

.top-slot__front img.show{
  opacity: 1;
}

img.top-slot__base{
  position: relative;
  opacity: 1;
      width: 100.5%;
    margin-left: -0.25%;
}

img.top-slot__light{
  opacity: 1;
}


.top-campain-title-back{
  position: absolute;
  top: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /*width: 100%;*/
}

.top-campain-title-back>div{
  width: 500%;
  display: flex;
  transition: transform 16s linear;
}

.top-campain-title-back img{
 
  display: block;

}

.top__imageline-box{
   width: 5.55%;
}

/*.top__imageline-1,
.top__imageline-3{
  transform: translateX(79.7%);
  transform: translateX(0);
}

.top__imageline-2,
.top__imageline-4{
  transform: translateX(-79.7%);
  
}*/

.top-campain-title-back.move .top__imageline-1,
.top-campain-title-back.move .top__imageline-3{
  /* transform: translateX(-79.7%);*/
   transform: translateX(-100%);
}

.top-campain-title-back.move .top__imageline-2,
.top-campain-title-back.move .top__imageline-4{
   /*transform: translateX(0);
   transform: translateX(79.7%);*/
   transform: translateX(20.3%)
}

/*.top__imageline-1,
.top__imageline-2,
.top__imageline-3{
  margin-bottom: -0.5px;
}*/

.top-slot__back{
  position: absolute;
  top: 0;
  display: flex;
    justify-content: space-between;
    height: 100%;
    width: 86%;
    margin-left:7%;
    padding-top: 2.5%;
    overflow: hidden;
    background: #fff;

}





.top__discription{
 
  /*font-size: 0.85em;*/
  line-height: 1.75;
  margin-bottom: 2em;
  /*font-size: 0.9em;*/
  
}

.top__manual{
   
}

.top__manual-bar{
  /*margin-bottom: 1em;*/
}

.top__manual-bar img{
  display: block;
}



.top__manual-arrow{
  position: absolute;
  width: 7.16%;
  left: auto;
  right: 3%;
  top: 50%;
  transform: translateY(-50%);
}

.top__manual-arrow img{
  display: block;
  position: absolute;
  top: 0;
  opacity: 0;
}

img.top__manual-open{
  position: relative;
  opacity: 1;
}

.top__entry-title.open .top__manual-open{
  opacity: 0;
}

.top__entry-title.open .top__manual-close{
  opacity: 1;
}

.top__present{
  margin-bottom: 2em;
}

.top__gonext{
  position: relative;
  width: 80%;
  width: 66%;
  margin: 0 auto 1.1em;
  opacity: 0;
  transition: opacity 0.6s ease-out;
  user-select: unset;

}

.top__gonext *{
  user-select:none;
}

.top__gonext.show{
 opacity: 1;
}

.top__entry{
  overflow: hidden;
  border-radius:0 0 0.5em 0.5em;
  height: 0;
  transition: height 0.3s ease-out;
}

.top__entry-clip{
  background-color: #ffdac5;
}


.top__entry-clip img{
  display: block;
}


.top__entry-title{
  border-radius: 0.5em;
  overflow: hidden;
  transition:border-radius 0.15s ease-out 0.15s ;
}

.top__entry-title.open{
  border-radius: 0.5em 0.5em 0 0;
  transition:border-radius 0s ease-out 0s ;
}

.top__entry-discription{
}

.top__entry .top-campain-title__select-modelhouse{
  margin-left: auto;
  margin-right: auto;
  display: block;
}



.top__get{
  border: solid;
  border-color: #00913a;
  /*font-size: 0.85em;*/
  padding: 1em;
  padding-bottom: 6.5em;
  border-radius: 1em;
  color: #00913a;
  margin-bottom: 1.25em;
  overflow: hidden;
}
.top__get-title{
  margin-bottom: 0.75em;
}

.top__get-text1,
.top__get-text2,
.top__get-text3{
  text-align: justify;
}

.top__get-text1{
  border-bottom: solid 1px #00913a;
  padding-bottom: 0.5em;

}

.top__get-text2{
  padding-top: 0.5em;
}

.top__get-text3{
    background-color: #00913a;
    color: #fff;
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    font-size: 1.5em;
    text-align: center;
  }

  .top__get-text3-top{
    border-bottom: solid #fff 2px;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 0.2em;

  }

  .top__get-text3-bottom{
    padding-bottom: 0.1em;
  }

.top__gonext-back{
  display: block;
  position: relative;
}

.top__gonext-text{
    position: absolute;
    top: 0;
    left: 0;
    color: #fff;
    text-align: center;
    width: 100%;
    font-size: 1.2em;
    font-weight: bold;
    line-height: 3;
}

.top__discription img{
  display: block;
}



.info-area{
  padding: 0;
}




.info-area__btn{
  width: 43.7%;
 /* margin-left: auto;
  margin-right: auto;*/
  position: absolute;
    bottom: 5%;
    left: 28.15%;
}



.info-area__yoyaku{
  
}


.info-area__yoyaku img{
  display: block;
}


footer{
  padding-top: 2.5em;
  padding-bottom: 2em;
}



.footer__copy{
  font-size: 0.6em;
  text-align: center;
}

.footer__go-top{

  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 17%;
}

.footer__content{
  padding: 0em 0 1em;

}

.footer__btn{
  display: block;
  width: 89.33%;
  margin: 0 auto;
  margin-bottom: 0.5em;
}

.footer__textbox{
  width: 72.8%;
  margin: 0 auto;
}








.window-guide{
    position: fixed;
    width: 100%;
    height: 100%;
    /*border: solid red 1px;*/
    left: 0;top: 0;
    pointer-events: none;

}

@keyframes modelhouseShowAnimation{
    0%{opacity: 0}
    25%{opacity: 1}
    30%{opacity: 1}
    55%{opacity: 0.3}
    56%{opacity: 0.3}
    95%{opacity: 1}
    100%{opacity: 1}
}

@keyframes modelhouseShowAnimation{
    0%{opacity: 0}
    
    100%{opacity: 1}
}

@keyframes slotPresentBtnMove{
  0%{transform: scale(0.01);}
  20%{transform: scale(1.1);}
  40%{transform: scale(0.95);}
  60%{transform: scale(1.05);}
  80%{transform: scale(0.975);}
  100%{transform: scale(1);}
}

.slot,.modal{
  /*min-height: 142.8vw;*/
}


/*修正*/

.wrapper {
  overflow: visible;
  position: relative;
  transform: none;
  left: 0;
  margin-left: auto;
  margin-right: auto;
  visibility: visible;
}

.wrapper.confirm{
  background-image: url(../img/omikuji/send-bg.png);
  background-size: 100% auto;
  background-repeat: repeat-y;
}

.top{
  position: relative;
  overflow: visible;
  height: auto;
}

.top-campain-title-back {
    position: relative;
}

.top-campain-title-area{
  position: relative;
}

.top__entry{
  height: auto;
  overflow: visible;
}

.top__entry-title {
   border-radius: 0;
}

.top-menu__top,
.top-menu__bottom{
  display: flex;
  justify-content: space-between;
  padding-bottom: 0.1em;
}

.top__header{
  position: fixed;
  top: 0;
   transition: transform 0.3s ease-out;
  transform: translateY(-110%);
  z-index: 101;
}

.header__top img{
  display: block;
}

.top-menu__top{

 
  background-color: #fff;
  padding-top: 2.5%;
}
.top__header.show{
  transform: translateY(0%);
}

.top-menu__bottom{
  /* position: absolute; */
  bottom: 0;
	width: 100%;
  margin-bottom: 2em;
  }

.top-menu__btn{
  width: 23%;
  text-align: center;
}

.top-menu__btn:first-child{
  margin-left: 2%;
}


.top-menu__btn:last-child{
  margin-right: 2%;
}

.top-slot{
  position: relative;
}

.top-campain-title{
  position:relative;
  top: 0;
}

.top__morenaku-present{
  background-color: #fef1e0;
}

.top__morenaku-present img{
  display: block;
}

.top__morenaku-present-discription{
  padding: 0.5em 5%;

}


.top__imageline-top,
.top__imageline-bottom{
  position: absolute;
  top: 6%;
  width: 96.5%;
  left: 1.75%;
}

.top__imageline-bottom{
  top: auto;
  bottom: 21%;
}

.top__image{
  transform: scale(0.01);
  opacity: 0;
  /*transition: opacity 0.3s ease-in;*/
 
}

.wrapper.init .top__image{
  animation: top__image-front-show 1.0s ease-in-out 0s;
  animation-fill-mode: backwards;
  opacity: 1;
  transform: scale(1);
  }

.top__image-back{
  position: relative;
  transition: transform 0.15s ease-out,opacity 0.3s ease-out;
}

.top__image-next,
.top__image-front{
  position: absolute;
  top: 0;
  width: 90%;
  left: 5%;
  top: 6%;
  border-radius: 5%;
  overflow: hidden;
  transform: scale(1);
  transition: transform 0.15s ease-out,opacity 0.3s ease-out;
}

.top__image-next{
  opacity: 0;
  transform: scale(0.01);
}

.top__image-back.hide{
  opacity: 0;
  /*transform: scale(0.01);*/
}

.top__image-front.hide{
  opacity: 0;
  /*transform: scale(0.01);*/
}

.top__image-front.hidden,
.top__image-back.hidden{
  /*visibility: hidden;*/
  transition: none;
  transform: scale(0.01);
}

.top__image-next.show{
  opacity: 1;
  transform: scale(1);
}

.top__image-next.show-end{
  transition: none;
}

.top__imageline-1,
.top__imageline-2,
.top__imageline-3{
  display: flex;
  justify-content: space-between;
}


.top__image-back.show,
.top__image-front.show{
  animation: top__image-front-show 1.0s ease-in-out 0s;
  animation-fill-mode: forwards;
}

@keyframes top__image-front-show{
  0%{ opacity:0;transform: scale(0.01);}
  40%{opacity:1;transform: scale(1.1);animation-timing-function: ease-out;}
  100%{opacity:1;transform: scale(1);}
}


.info{
  font-size:0.55em;
  background:rgba(255,255,255,0.6);
  position:absolute;
  width:100%;
  bottom:0;
      padding: 0.2em 1em;
}

.info div{
  line-height:1.3;
}
    
.maker{

}

.model{
  
  
}

.exhibition{
 font-weight:bold;
}

.entry-end{
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    transition:opacity 0.3s ease-out;
    opacity:0;
    visibility:hidden;
    z-index: 310;
}

.entry-end.show{
  visibility:visible;
  opacity:1;
}

.entry-end.hide{
  opacity:0;
  pointer-events:none;

}

.entry-end .thanks__message{
    margin-bottom: 1em;
    width: 90%;
    margin-left: 5%;
    margin-bottom: 3em;
}

.entry-end__wrap {
    position: relative;
    padding-bottom: 3em;
    background-color: #fff6e6;
    width: 100%;
    height: 100%;
    
}

.entry-end__wrap h1{
    margin-bottom: 3.5em;
}
.present__dedline{
      margin-bottom: 2em;
}

.entry-end__go-enterd{
    width: 70%;
    margin-left: 15%;
    opacity:0;
    transition:opacity 0.3s ease-out 0.6s;
}

.entry-end.show .entry-end__go-enterd{
    opacity:1;
}

.thanks_note-sending {
  margin: 0 auto 2em;
  width: 92%;
}

.thanks_note-annotation img{
      margin-left: 8%;
}

.thanks_note-annotation {
  position: relative;
  margin-bottom: 2em;
  overflow:hidden;
  
}
.thanks_note-gift{
  position: relative;
  left: 6%;
  width: 85%;
}


.wrapper.confirm .present{
  padding: 0 5%;
  background-image: url(../img/omikuji/send-bg.png);
  background-size: 100% auto;
  background-repeat: repeat-y;
}

.wrapper.confirm .present__dedline{
  width: 82%;
  margin: 0 auto 2rem;
}

.wrapper.confirm .present__img{
  width: 95%;
  margin: 0 auto;
}

.wrapper.confirm .present__img img{
  position: absolute;
  left: 0;
  top: 0;
  display: none;
}

.wrapper.confirm .present__img.daikichi img:nth-child(1){
  display: inline-block;
  position: relative;
  left: auto;
  top: auto;
}

.wrapper.confirm .present__img.chukichi img:nth-child(2){
  display: inline-block;
  position: relative;
  left: auto;
  top: auto;
}

.wrapper.confirm .present__img.shokichi img:nth-child(3){
  display: inline-block;
  position: relative;
  left: auto;
  top: auto;
}

.wrapper.confirm .apply__check{
  width: 94%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  margin: 0 auto;
}

.wrapper.confirm .apply__check-box{
  width: 20%;
  cursor: pointer;
}

.wrapper.confirm .apply__checked{
  position: absolute;
  left: 0;
  top: 0;
  display: none;
}

.wrapper.confirm .apply__checked.show{
  display: block;
}

.wrapper.confirm .apply__check-base{
  width: 62%;
  margin-left: 3%;
}

.wrapper.confirm .apply__caution{
  width: 94%;
  margin: 0 auto;
}

.wrapper.confirm .apply__kakunin{
  width: 100%;
  max-width: 768px;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  transition: opacity 0.3s ease-out;
  opacity: 0;
  pointer-events: none;
}

.wrapper.confirm .apply__kakunin.show{
  opacity: 1;
  pointer-events: all;
}

@media screen and (min-aspect-ratio: 7 / 10) and (max-height: 1097px) {
  .wrapper.confirm .apply__kakunin{
    max-width: 70vh;
    min-width: inherit;
    max-height: 120vh;
  }
}

.wrapper.confirm .apply__check-btns{
  width: 70%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  position: absolute;
  left: 50%;
  top: 64%;
  transform: translateX(-50%);
}

.wrapper.confirm .apply__check-btns img{
  width: 48%;
  cursor: pointer;
}

.complete-box.confirm{
  width: 100%;
  height: 100%;
  max-width: 768px;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(255, 255, 255, 0.8);
  z-index: 20;
  display: none;
}

body.complete .complete-box.confirm{
  display: block;
}

@media screen and (min-aspect-ratio: 7 / 10) and (max-height: 1097px) {
  .complete-box.confirm{
    max-width: 70vh;
    min-width: inherit;
    max-height: 120vh;
  }
}

.noid-box.confirm{
  width: 100%;
  max-width: 768px;
  height: 100%;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(255, 255, 255, 0.8);
  z-index: 20;
  display: none;
}

body.no_id .noid-box.confirm{
  display: block;
}

@media screen and (min-aspect-ratio: 7 / 10) and (max-height: 1097px) {
  .noid-box.confirm{
    max-width: 70vh;
    min-width: inherit;
    max-height: 120vh;
  }
}

.noid-box.confirm .noid-box__message{
  text-align: center;
  top: 50%;
  transform: translateY(-50%);
}