@charset "UTF-8";

html, body {
}

body.noscroll{
  touch-action: manipulation;
  overscroll-behavior-y: contain;
  overscroll-behavior-y: none; 
  touch-action: manipulation;
}

@-webkit-keyframes blink_animation {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes blink_animation {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/*
リセット
/***********************/
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;
}

html {
  line-height: 1;
}

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 {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  border: none;
  padding: 0;
}
.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%;
  overflow: visible;
}

body * {
  -webkit-box-sizing: border-box;
          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.5;
}

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;
  display: block;
}

#wrapper {
  position: relative;
  width: 100%;
  height: auto;
}

.sp {
  display: none !important;
}
@keyframes blink_animation {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
body {
  font-size: 1.335vw;
  font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

.wrapper {
  position: relative;
  overflow: hidden;
  width: 100%;
  /*height: 100%;
  max-width: 768px;*/
  margin: 0 auto;
}



@media screen and (min-width: 769px) {
  body {
    font-size: 1.33vw; 
    } 
}

@media screen and (min-width: 1200px) {
  body {
    font-size: 16px; 
    } 
}

@media screen and (max-width: 768px) {
  body {
    font-size: 2vw; 
    } 
  }
body.noscroll {
  /*height: 100%;
  overflow: hidden; */
}

.block1,
.block2,
.block3{
  width: 100%;
  max-width: 768px;
  margin: 0 auto;
  width: min(65dvh, 100vw);
}

.block2 {
  position: relative;
}

.block2_btn {
  position: absolute;
  top: 47.7%;
  left: 10%;
  width: 81%;
}

.block3__pagetop {
  width: 15%;
  position: absolute;
  top: 44%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.card-block{
  height: 100%;
  padding-bottom: 0;
}

.card-area{
  position: relative;
  top: 0dvh;
  left: 0;
  width: 100%;
  height: 100%;
  width: min(65dvh, 100vw);
  height:min(170vw,100dvh);
  max-width: 768px;
  margin: 0 auto;
  /*border:solid red 1px;*/
  overflow: hidden;
  background-image:url(../img/card-bg.jpg);
  background-size: cover;
}

/* イベント表示 */
    .before {display: none;}

    /* 背景が表示される */
    .before.active {
    display: block;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background-color: rgba(240, 240, 240, 0.8);
    width: 100vw;
    width: min(65dvh, 100vw);
    height: 100vh;
    z-index: 3000;
    }

    .before.active img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 90%;
    max-width: 600px;
    }

    .after {display: none;}

      .after.active {
      display: block;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      background-color: rgba(60, 60,  60, 0.5);
      width: 100vw;
      width: min(65dvh, 100vw);
      height: 100vh;
      z-index: 3000;
      }

      .after.active img {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        width: 90%;
        max-width: 600px;
      }




.card-title{
  width: 85%;
  margin: 0 auto;
}

.num-area{
  --aspect: 1.4;
  width: min(65dvh, 100vw);
  width: min(65dvh, 57vw);
  width: 79%;
  max-width: 768px;
  display: flex;
  font-size: 1.7em;
  font-size: min(calc(2.1dvh * var(--aspect)), calc(100vw * var(--aspect) * 0.75));
  font-weight: bold;
  position: absolute;
  left: 50%;
  top: 0;
  top: 14dvh;
  text-align: left;
  transform: translateX(-50%);
  color: #603f29;
}

#card-num{
  width: 1.8em;
  border-radius: 0.3em;
  text-align: center;
  background-color: #fff;
}

#card-num.show{
  background-color: yellow;
}

.num-inner{
  margin-left:0.5em ;
}

.timer-area{
  --aspect: 1.4;
  width: min(65dvh, 100vw);
  width: min(65dvh, 57vw);
  width: 86%;
  max-width: 768px;
  display: flex;
  justify-content: flex-end;
  font-size: 1.7em;
  font-size: min(calc(2.1dvh * var(--aspect)), calc(100vw * var(--aspect) * 0.75));
  font-weight: bold;
  position: absolute;
  left: 50%;
  top: 0;
  top: 14dvh;
  text-align: right;
  transform: translateX(-50%);
  color: #603f29;
}

.timer-inner{
  margin-right: 0.5em;
}

#timer{
  width: 3.6em;
  border-radius: 0.3em;
  text-align: center;
  background-color: #fff;
}


.first-stage{

}

.second-stage{

}

.third-stage{

}

.test-btns{
  display: none !important;
}

.third-stage.container{
  /*width: min(65dvh, 100vw);*/
  height: min(calc(54dvh * var(--aspect)) * 0.83, calc(100vw * var(--aspect)* 0.83));
  width: 84%;
  left: 7%;
  top: 52%;
}

.second-stage.container{
 
  height: min(calc(56dvh * var(--aspect)* 0.8), calc(100vw * var(--aspect)* 0.8));
  width: 90%;
  left: 5%;
  top: 52%;

}


.container{
  --aspect:1.4;

  width: min(100%);
  height:min(calc(48dvh * var(--aspect)), calc(100vw * var(--aspect) * 0.75));
  /*border:solid blue 1px;*/
  position:absolute;
  top:55%;
  transform:translateY(-50%);
  opacity:0;
  visibility:hidden;
}

.container.show{
  opacity:1;
  visibility:visible;
}

@media screen and (min-width: 1200px) {
  /* main {
    width: 100%;

    margin:0 auto;
  } */
}

.item{
/*border:solid green 1px;*/
width:25%;
height:calc(33.3%);
width: 23%;
height: calc(30.3%);
position:absolute;
transition:0.5s cubic-bezier(0.16, 1, 0.3, 1) 0s;
transition-property: left,top;
visibility:hidden;

}

.item__card:before{
  content: " ";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  transition: none;
  background-color:red;
  filter: blur(0.5em);
  transform: scale(0.8);
  opacity: 0;
}

.item.card-A .item__card:before,
.item.card-B .item__card:before,
.item.card-C .item__card:before,
.item.card-D .item__card:before,
.item.card-E .item__card:before,
.item.card-F .item__card:before,
.item.card-G .item__card:before,
.item.card-H .item__card:before,
.item.card-I .item__card:before,
.item.card-J .item__card:before,
.item.card-K .item__card:before,
.item.card-L .item__card:before,
.item.card-M .item__card:before,
.item.card-N .item__card:before,
.item.card-O .item__card:before{
  animation: cardShadow 0.8s ease-out forwards;
}

.container .card-A .item__card:before{
  animation-delay:0.4s;
}

.container .card-B .item__card:before{
  background-color:yellow;
  animation-delay:0.8s;
}

.container .card-C .item__card:before{
  background-color:blue;
  animation-delay:1.2s;
}

.container .card-D .item__card:before{
  background-color:green;
  animation-delay:1.6s;
}

.container .card-E .item__card:before{
  background-color:orange;
  animation-delay:2s;
}

.container .card-F .item__card:before{
  background-color:deeppink;
  animation-delay:2.4s;
}

.container .card-G .item__card:before{
  background-color:gold;
  animation-delay:2.8s;
}

.container .card-H .item__card:before{
  background-color:blueviolet;
  animation-delay:3.2s;
}

.container .card-I .item__card:before{
  background-color:greenyellow;
  animation-delay:3.6s;
}

.container .card-J .item__card:before{
  background-color:lightsalmon;
  animation-delay:4s;
}

.container .card-K .item__card:before{
  background-color: turquoise;
  animation-delay:4.4s;
}

.container .card-L .item__card:before{
  background-color: tomato;
  animation-delay:4.8s;
}

.container .card-M .item__card:before{
  background-color: indigo;
  animation-delay:5.2s;
}

.container .card-N .item__card:before{
  background-color: violet;
  animation-delay:5.6s;
}

.container .card-O .item__card:before{
  background-color: teal;
  animation-delay:6s;
}

@keyframes cardShadow{
  0%{transform: scale(0.8);opacity: 1;}
  60%{transform: scale(1.07);opacity: 1;}
  80%{transform: scale(1.07);opacity: 1;}
  100%{transform: scale(1.07);opacity: 0;}
}

.item.show{
  visibility:visible;
}

.item.notransition{
  transition:none;
}

.item.match .item__card{
  transform:scale(1.1);
  filter:drop-shadow(0.05em 0.05em 0.1em,rgba(0,0,0,0.7));
  opacity:0;
}

.third-stage .item{
  width: 16.66%;
  height:20%;
  display:block;
}

.second-stage .item{
  width: 20%;
  height:25%;
}

.item__card{
  /*border:solid red 1px;*/
  width:90%;
  height:calc(90%);
  left:5%;
  top:5%;
  /*background-color:white;*/
  transition:opacity 0.2s ease-out 0.2s,transform 0.4s ease-out,filter 0.2s ease-out;
  transition-delay:0.4s;
}

.card-back{
  transition:transform 0.2s ease-out;
}

.card-front{
  transition:transform 0.2s ease-out 0.2s;
  transform:rotateY(-90deg)
}

.item__card.open-move .card-back,
.item__card.open .card-back{
  transform: rotateY(90deg);
}

.item__card.open-move .card-front,
.item__card.open .card-front{
  transform:rotateY(0deg)
}

.card-back,
.card-front{
  position:absolute;
  top:0;
  left:0;
}

.card-front{
  position:relative;
}

.item.notransition .item__card{
  transition:none;
}

.item.notransition .card-back,
.item.notransition .card-front{
  transition:none;

}



.row1{
  top:0%;
}



.row2{
  top:33.33%;
  top: 30.33%;
}

.third-stage .row2{
  top:20%;
}

.second-stage .row2{
  top:25%;
}

.row3{
  top:66.66%;
  top: 60.66%;
}

.third-stage .row3{
  top:40%;
}

.second-stage .row3{
  top:50%;
}

.row4{
  top:75%; 
}

.third-stage .row4{
  top:60%;
}

.second-stage .row4{
  top:75%;
}

.third-stage .row5{
  top:80%;
}

.column1{
  left:0%;
}

.column2{
  left:25%;
}

.second-stage  .column2{
  left:20%;
}

.third-stage .column2{
  left:16.67%;
}


.column3{
  left:50%;
}
.second-stage  .column3{
  left:40%;
}

.third-stage .column3{
  left:33.33%;
}



.column4{
  left:75%;
}

.second-stage  .column4{
  left:60%;
}

.third-stage .column4{
  left:50%;
}



.second-stage  .column5{
  left:80%;
}

.third-stage .column5{
  left:66.67%;
}

.third-stage .column6{
  left:83.33%;
}

main h1 {
  position: absolute;
  top: 0;
  left: 0;
}

.second-stage .item21,
.second-stage .item22,
.second-stage .item23,
.second-stage .item24,
.second-stage .item25,
.second-stage .item26,
.second-stage .item27,
.second-stage .item28,
.second-stage .item29,
.second-stage .item30{
  display:none;
}

.first-stage .item13,
.first-stage .item14,
.first-stage .item15,
.first-stage .item16,
.first-stage .item17,
.first-stage .item18,
.first-stage .item19,
.first-stage .item20,
.first-stage .item21,
.first-stage .item22,
.first-stage .item23,
.first-stage .item24,
.first-stage .item25,
.first-stage .item26,
.first-stage .item27,
.first-stage .item28,
.first-stage .item29,
.first-stage .item30{
  display:none;
}

.ui{
  position:absolute;
  width:100%;
  height:100%;
  left:0;top:0;
  pointer-events:auto;
  background-image: url(../img/ui-bg.png);
  background-repeat: repeat-x;
  background-size: 24% auto;
  background-position: center bottom;
  /*background-color:rgba(255,0,0,0.3);*/
}

.ui.disactive{
  pointer-events:none; 
  background-color:transparent;
  background-color:rgba(255,0,0,0);
}

.start-btn,
.retry-btn,
.notice-btns,
.levelup-btn{
  width: 80%;
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  pointer-events:auto;
}

.start-btn{
  width: 90%;
  left: 51%;
  top: auto;
  bottom: -1%;
  transform: translateX(-50%);
}

.start-btn img{
  position: relative;
}

.start-btn .hand{
  width: 12%;
  position: absolute;
  top: 25%;
  left: 40%;
  pointer-events: none;
  animation: hand 1s ease-out infinite;
}

.start-btn .hand img{
  animation: hand2 1s ease-out infinite;
}

@keyframes hand{
  0%{transform: translateY(100%); opacity: 1;}
  40%{opacity: 1;}
  80%{opacity: 1;}
  100%{transform: translateY(0%);opacity: 1;}
}

@keyframes hand2{
  0%{opacity: 0;}
  40%{opacity: 1;}
  80%{opacity: 1;}
  100%{opacity: 0;}
}

.start-btn.hide,
.retry-btn.hide{
  opacity:0;
  pointer-events:none !important;
}

.notice-btns,
.levelup-btn{
  border:none;
  background:transparent;
  pointer-events:none;
}

.tutorial{
  width: 90%;
  position: absolute;
  left: 50%;
  top: 54%;
  transform: translate(-50%, -50%);
}

.tutorial.hide{
  opacity: 0;
}

.fail-btn,
.clear-btn,
.complete-btn,
.over-btn{
  position:absolute;
  left:0;
  top:0;
  opacity:0;
  transition:opacty 0.3s ease-out;
}

.complete-btn{
  width: 115%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.fail-btn{
  position:relative;
}

.fail-btn.show,
.clear-btn.show,
.complete-btn.show,
.over-btn.show{
  opacity:1;
  pointer-events:auto;
  z-index: 10;

}

.fail-btn.show{
  transition: none;
  animation: roll2 0.6s ease-in-out forwards;
}

.fail-btn {
  visibility: hidden;
}

@keyframes roll2{
  0%{transform: scale(1);}
  40%{transform: scale(0.9);}
  60%{transform: scale(1.05);}
  80%{transform: scale(0.95);}
  100%{transform: scale(1);}
}

.clear-btn.show{
  transition: none;
  animation: popup 0.3s ease-in-out forwards;
}

@keyframes popup{
  0%{transform: scale(0.00001);}
  80%{transform: scale(1.2);}
  100%{transform: scale(1);}
}


.effect-area{
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

.effect-bg{
  width: 205%;
  position: absolute;
  left: 50%;
  top: 50%;
  transition: transform 1s ease-out,opacity 0.2s ease-out;
  transform:scale(0.00001) translate(-50%, -50%);
  transform-origin: left top;
  opacity: 0;
}

.effect-area.active .effect-bg{
  transform: scale(1) translate(-50%, -50%);
  opacity: 1;
}

.effect-area.active .effect-bg img{
  transition: none;
  animation: roll 10s linear infinite;
}

@keyframes roll{
  0%{transform: rotate(0);}
  100%{transform: rotate(360deg);}
}

.effect-star-area{
  width: 125%;
  height: 288%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: opacity 0.5s ease-out;
  opacity: 0;
  pointer-events: none;
}

.effect-star-area.show{
  opacity: 1;
}

.effect-star{
  position: absolute;
  transition: none;
}

.effect-star-area.show .effect-star{
  animation: star 2s ease-out infinite;
}

.effect-star.bg{
  width: 100%;
animation: none !important;

}

.s1{
  width: 10%;
  left: 12%;
  top: 16%;
}

.s2{
  width: 6%;
  left: 60%;
  top: 18%;
  animation-duration: 1s !important;
  animation-delay: 0.5s !important;
}

.s3{
  width: 15%;
  left: 77%;
  top: 21%;
  animation-duration: 1.5s !important;
  animation-delay: 0.25s !important;
}

.s4{
  width: 8%;
  left: -1%;
  top: 39%;
  animation-duration: 1.6s !important;
}

.s5{
  width: 10%;
  left: 88%;
  top: 81%;
  animation-duration: 1s !important;
  animation-delay: 0.25s !important;
}

.s6{
  width: 12%;
  left: -3%;
  top: 19%;
  animation-duration: 1.5s !important;
  animation-delay: 0.5s !important;
}

.s7{
  width: 8%;
  left: 35%;
  top: 18%;
  animation-duration: 2s !important;
  animation-delay: 0.3s !important;
}

.s8{
  width: 12%;
  left: 40%;
  top: 22%;
  animation-duration: 1.2s !important;
  animation-delay: 0.25s !important;
}

.s9{
  width: 9%;
  left: 90%;
  top: 39%;
  animation-duration: 1s !important;
  animation-delay: 0.3s !important;
}

.s10{
  width: 13%;
  left: 82%;
  top: 15%;
}

.s11{
  width: 7%;
  left: 68%;
  top: 46%;
  animation-duration: 1.7s !important;
  animation-delay: 0.25s !important;
}

.s12{
  width: 8%;
  left: 71%;
  top: 59%;
  animation-duration: 0.9s !important;
  animation-delay: 0.5s !important;
}

.s13{
  width: 8%;
  left: 71%;
  top: 59%;
  animation-duration: 1.1s !important;
}

.s14{
  width: 10%;
  left: 47%;
  top: 70%;
  animation-duration: 1.4s !important;
  animation-delay: 0.3s !important;
}

.s15{
  width: 8%;
  left: 32%;
  top: 79%;
  animation-duration: 0.9s !important;
  animation-delay: 0.3s !important;
}

.s16{
  width: 10%;
  left: 17%;
  top: 48%;
  animation-duration: 1.2s !important;
  animation-delay: 0.1s !important;
}

.s17{
  width: 12%;
  left: 70%;
  top: 39%;
  animation-duration: 1.6s !important;
  animation-delay: 0.2s !important;
}

.s18{
  width: 12%;
  left: 78%;
  top: 61%;
  animation-duration: 1.4s !important;
  animation-delay: 0.4s !important;
}

.s19{
  width: 12%;
  left: 20%;
  top: 66%;
  animation-duration: 1.7s !important;
  animation-delay: 0.05s !important;
}

.s20{
  width: 12%;
  left: 66%;
  top: 74%;
  animation-delay: 0.1s !important;
}

@keyframes star{
  0%{transform: scale(0.25);}
  50%{transform: scale(1.3);}
  100%{transform: scale(0.25);}
}

.levelup-btn{
  width: 70%;
  opacity:0;
  transition:opacty 0.3s ease-out;
  pointer-events: none;
}

.levelup-btn.show{
  animation: zoom 0.3s ease-out forwards;
}

@keyframes zoom{
  0%{transform:translate(-50%,-50%) scale(2); opacity: 0;}
  80%{transform:translate(-50%,-50%)  scale(0.8); opacity: 1;}
  100%{transform:translate(-50%,-50%)  scale(1); opacity: 1;}
}

.levelup-btn.active{
  pointer-events:auto;
}

.retry-btn{
  width: 80%;
  /*top:calc(50% + 4em);*/
  opacity:0;
  transition:opacity 0.3s ease-out;
  pointer-events:none;
}

.retry-pic,
.retry-pic2{
  width: 95%;
  position: absolute;
  left: 50%;
  top: 143%;
  transform: translate(-50%, -50%);
  opacity: 0;
}

.retry-pic.show,
.retry-pic2.show{
  opacity: 1;
}

.retry-btn.show{
  opacity:1;
  pointer-events:auto;
   
}

.retry-btn.show img {
  animation: roll2 0.6s ease-in-out forwards;
}


.retry-btn.noactive{
  pointer-events: none;
}

.get-pic{
  width: 100%;
  position: absolute;
  left: 50%;
  top: 45%;
  transition: transform 0.5s ease-in-out;
  transform: translate(-50%, -50%) scale(1.2);
  opacity: 0;
  pointer-events: none;
}

.get-pic.show{
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  pointer-events: all;
}

.get-btn{
  width: 90%;
  position: absolute;
  left: 51%;
  top: auto;
  bottom: -1.6%;
  bottom: -1%;
  transform: translateX(-50%);
  display: none;
}

.get-btn.show{
  display: block;
}

.test-btns{
  position:absolute;
  border:solid blue 2px;
  left:50%;
  bottom:1em;
  transform:translate(-50%,0%);
  pointer-events:auto;
  font-size:1.5rem;
  display:flex;
  justify-content:space-between;
}

.test-btns li:first-child{
  margin-right:1em;
}
.test-btns li:last-child{
  margin-left:1em;
}

/*test用*/
.test-name{
  position:absolute;
  left:0;
  top:0;
  font-size:2em;
  filter:drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white);
  display: none;
}

@media screen and (max-width: 768px) {
  .container{
    top: 53%;
  }
  .second-stage.container{
 
    height: min(calc(65dvh * var(--aspect)* 0.8), calc(100vw * var(--aspect)* 0.8));
    width: 100%;
    left: 0%;
    top: 52%;

  }

  .third-stage.container{
    height: min(calc(65dvh * var(--aspect)* 0.8), calc(100vw * var(--aspect)* 0.8));
    width: 96%;
    left: 2%;
    top: 52%;
  }

  .timer-area{

    width: min(65dvh, 57vw);
    max-width: 200px;
    font-size: 4vw;
    font-size: min(4vw ,14px);
    top: min(14dvh,25.5vw);
  }

  .num-area{
    
    width: min(65dvh, 57vw);
    max-width:200px;
    font-size: min(4vw ,14px);
    top: min(14dvh,25.5vw);
  }

  .tutorial {
    width: 90%;
  }

  .card-area{

  height:min(170vw,107dvh);

}

    .before.active img {
        width: 90vw;
        max-width: 315px;
    }

    .after.active img {
        width: 90vw;
        max-width: 315px;
    }



}