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

/*modal
==================*/
.mdl-contents-open
,.cts-mdl-open{
  cursor: pointer;
}
.mdl-contents{
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100dvh;
  overflow: hidden;
  background: rgba(0,0,0,.6);
  z-index: calc(infinity);
}
#mdl-pay.mdl-contents
,#mdl-payment.mdl-contents{
  background: rgba(0,0,0,.8);
}
#mdl-gallery.mdl-contents{
  background: #1C1C1C;
}
.mdl-thread-contents{
  background: #FFEFD0;
}
.modal-contents-wrap{
  -ms-align-items: center;
  align-items: center;
  padding: min(130px,25vw) min(30px,4vw) min(50px,10vw);
  height: 100%;
  overflow-y: scroll;
}
.js-mdl-close:not(.button){
  position: absolute;
  top: min(35px,5vw);
  right: min(20px,3vw);
  width: min(12vw,63px);
  aspect-ratio:1;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -ms-align-items: center;
  align-items: center;
  justify-content: center;
  z-index: 10;
  cursor: pointer;
  background: var(--base-clr);
  border-radius: 100vmax;
}
.js-mdl-close.gld{
  background: var(--clr-gld);
}
.js-mdl-close button{
  width: 40%;
  height: 1.5px;
  background: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  rotate:45deg;
  border-radius: 2px;
  translate:-50% -50%;
}
.js-mdl-close button::after{
  content: "";
  width: 100%;
  height: 1.5px;
  background:#fff;
  position: absolute;
  transform: rotate(90deg);
  top: 0;
  left: 0;
  border-radius: 2px;
}
.js-mdl-close.wht{
  background: #fff;
}
.js-mdl-close.wht button
,.js-mdl-close.wht button::after{
  background: var(--base-clr);
}