@media screen and (max-width: 768px) {
  html, body{
    overflow-x: visible!important;
  }
}

.scan_guide{
  max-width: 1920px;
  margin: 0 auto;
  caret-color: transparent;
}


.scan_kv{
  background-color: #685BC7;
}

.scan_kv_wrapper{
  display: flex;
  flex-direction: row;
  max-width: clamp(1160px, 80.5555555556vw, 1392px);
  margin: 0 auto;
}

.scan_kv_text{
  width: 40%;
  padding: 1vw 2vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.scan_kv_logo{
  display: flex;
  flex-direction: column;
}

.scan_text_logo{
  width: 86%;
  margin: 0 auto;
}

.scan_app_logo{
  width: 26%;
  margin: 1.8vw auto 2.2vw;
}

.scan_text_area{
  padding: 0 1.4vw;
}

.scan_kv h2{
  color: #C0F2EA;
  font-size: clamp(26px, 2.8vw, 40px);
  line-height: 1.3;
  font-weight: bold;
}

.scan_kv .scan_long_title{
  font-size: clamp(20px, 2vw, 35px);
}

.scan_kv p{
    color: #C0F2EA;
  font-size: clamp(11px, 1.3vw, 15px);
  line-height: 1.5;
  font-weight: bold;
  margin: 2.2vw 0;
}


.scan_app{
  width: 60%;
  margin: 0 auto;
}

.scan_app_btn{
  display: flex;
  gap:8px;
}

.scan_app_btn a{
  transition: all .2s ease;
}

.scan_app_btn a:hover{
  transform: scale(1.04);
}

.scan_apple, .scan_google{
  width: 100%;
}


.scan_app_caution{
  color: #C0F2EA;
  font-size: 7px;
  line-height: 1.3;
  margin-top: 10px;
}


.scan_kv_img{
  width: 60%;
}

@media screen and (max-width: 768px) {

.scan_kv_wrapper{
  display: flex;
  flex-direction: column;
  max-width: clamp(1160px, 80.5555555556vw, 1392px);
  margin: 0 auto;
}

.scan_kv_text{
  width: 100%;
  padding:  4.5vw 3vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.scan_kv_img{
  width: 100%;
}

.scan_kv_logo{
  flex-direction: row-reverse;
  width: 100%;
    align-items: center;
  justify-content: center;
  margin: 20px auto;
}

.scan_text_logo{
  width: 60%;
margin: 0 0 0 16px;
}

.scan_app_logo{
  width: 18%;
  margin: 0;
}

.scan_kv h2{
text-align: center;
font-size: clamp(25px, 6vw, 45px);
}

.scan_kv .scan_long_title{
font-size: clamp(25px, 6vw, 45px);
}


.scan_kv p{
text-align: center;
font-size: clamp(11px, 3vw, 15px);
margin: 4vw 0;
}

.scan_app{
  width: 60%;
  margin: 1vw auto 3vw;
}

}




.scan_content_top {
  padding: 75px 0 60px 0;
  background: #FFD940;
}

.scan_content_top h2 {
  margin: 0 0 0 0;
  padding: 0 0 15px 0;
  line-height: 1.2em;
  font-size: clamp(40px, 5vw, 62px);
  font-weight: 700;
  color: #685BC7;
  text-align: center;
}

.scan_content_top p{
  color: #685BC7;
  font-weight: bold;
  text-align: center;
  font-size: clamp(18px, 3vw, 24px);
  line-height: 1.5em;
  margin-top: 20px;
  padding:0 20px;
} 


.scan-top-button{
  margin: 50px auto 20px;
  text-align: center;
}

.scan-button {
  display: inline-block;
  width: 250px;
  padding: 19px 24px 17px;
  font-size: 17px;
  font-weight: 700;
  text-align: center;
  border-radius: 9999px;
  color: #685bc7;
  box-shadow: inset 0 0 0 2px #685bc7;
  transition: box-shadow 0.3s, transform 0.3s;
  transform: scale3d(1, 1, 1);
  will-change: transform;
}
@media (hover: hover) {
  .scan-button:where(:any-link, :enabled, summary):hover {
    color: #FFD940;
    box-shadow: inset 0 0 0 35px #685bc7;
    transform: scale3d(1.05, 1.05, 1);
  }
}

.scan-button:first-child{
  margin-right: 40px;
}

@media screen and (max-width: 768px) {

  .scan_content_top {
    padding: 75px 10px 60px;
  }

  .scan-button {
    display: inline-block;
    width: 146px;
    padding: 15px 10px;
    line-height: 1.3em;
    border-radius: 30px;
  }
  .scan-button:first-child{
    margin-right: 5px;
  }
}


#scan-trick{
  background: #685BC7;
padding: 30px;
text-align: center;
}

.scan_example{
  padding: 50px 0;
}

.scan_example h2{
  font-size: clamp(26px, 5vw, 45px);
  font-weight: 700;
  color: #FFD940;
  letter-spacing: 1px;
}

.scan_example p{
font-size: 16px;
font-weight: bold;
color: #FFD940;
margin: 30px auto;
font-size: clamp(18px, 3vw, 24px);
line-height: 1.5em;
letter-spacing: 1px;
}

.example_box_outer{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap:40px;
  padding: 50px 20px;
  justify-content: center;
  align-items: normal;
  max-width: 1200px;
  margin: 0 auto;
}

.example_box{
  width: 46%;
  padding: 20px;
  border: #FFD940 solid 3px;
  border-radius: 30px;
}

.example_box p{
  font-size: clamp(17px, 2.5vw, 21px);
  margin: 0 auto 30px;
  height: 2.5em;
  line-height: 1.2em;
  letter-spacing: 1px;
}

.example_box img{
  width: 100%;
}

.scan_example_img{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 15px;
  justify-content: center;
}

.scan_example_img picture{
  position: relative;
  width: 45%;
}

.icon_ok{
  position: relative;
}

.icon_ok::after{
  position: absolute;
  display: inline-block;
  content: '';
  background-image: url(../images/scan_icon_ok.png);
  width: 23%;
  height: 23%;
  top:2%;
  left: 2%;
  background-size:contain;
  background-repeat: no-repeat;
  filter: drop-shadow(2px 2px 4px #444);
}

.icon_ng{
  position: relative;
}

.icon_ng::after{
  position: absolute;
  display: inline-block;
  content: '';
  background-image: url(../images/scan_icon_ng.png);
  width: 23%;
  height: 23%;
  top:2%;
  left: 2%;
  background-size:contain;
  background-repeat: no-repeat;
  filter: drop-shadow(2px 2px 4px #444);
}

.box_margin{
  margin: 25% 0;
}

@media screen and (max-width: 768px) {

  #scan-trick{
  padding: 10px;
  }

  .example_box_outer{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap:40px;
    padding: 30px 20px;
    align-items: center;
  }

  .example_box{
    width: 100%;
    padding: 20px;
    border: #FFD940 solid 3px;
    border-radius: 30px;
  }

  .box_margin{
    margin: 5% 0;
  }

  .example_box p{
    font-size: clamp(16px, 3vw, 18px);
    height: 100%;
    margin: 0 auto 20px;
  }

}

.process_title{
    padding: 75px 20px 60px;
  background: #FFD940;
}

.process_title h2 {
  margin: 0 0 0 0;
  padding: 0 0 15px 0;
  line-height: 1.2em;
  font-size: clamp(40px, 5vw, 62px);
  font-weight: 700;
  color: #685BC7;
  text-align: center;
}

.process_title p{
  color: #685BC7;
  font-weight: bold;
  text-align: center;
  font-size: clamp(18px, 3vw, 24px);
  line-height: 1.5em;
  margin-top: 20px;
}

.process_title .process_caution{
  color: #685BC7;
  font-weight: bold;
  text-align: center;
  font-size: clamp(15px, 3vw, 18px);
  line-height: 1.5em;
  margin-top: 20px;
} 

.scan_process{
  padding: 30px 30px 40px;
text-align: center;
}

.scan_process_card_flow{
  overflow: visible;
}

.scan_process h2{
  font-size: clamp(30px, 5vw, 45px);
  font-weight: 700;
  color: #FFD940;
  margin-bottom: 40px;
  letter-spacing: 1px;
}

.scan_process_card{
  padding: 40px 0 20px;
  max-width: 1300px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  width: 70%;
  justify-content: center;
}

.process_card_inner{
  width: 50%;
}

.process_card_inner img{
  display: inline!important;
  width: 60%;
  padding: 20px;
  filter: drop-shadow(7px 7px 7px rgba(0,0,0,0.2));
}

.process_card_inner video{
  width: 65%;
  padding: 20px;
  border-radius: clamp(32px, 3vw, 45px);
  filter: drop-shadow(7px 7px 7px rgba(0,0,0,0.2));
}

.process_card_inner h3{
  font-size: clamp(25px, 4vw, 35px);
  font-weight: 700;
  color: #FFD940;
  margin-bottom: 40px;
  letter-spacing: 1px;
}

.process_card_inner p{
  padding: 30px;
  text-align: left;
  font-size: clamp(16px, 2vw, 19px);
  color: #FFD940;
  font-weight: bold;
  line-height: 1.3em;
  letter-spacing: 1px;
}

.process_slider_arrow{
  position: relative;
}

.process_slider_arrow::after{
  position: absolute;
  content: url(../images/scan_process_arrow.svg);
  top: 50%;
  right: -10px;
  transform: translateY(-50%);
}

@media screen and (max-width: 768px) {

.scan_process{
  position: relative;
}

  .scan_process_card{
    padding: 40px 0;
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: center;
    gap:10px;
    
  }

  /*
  .flow_scroll{
    width: 20vw;
    position: absolute;
    top: 20vw;
    left: 9.25vw;
    z-index: 1;
  }

  .scan_process_card_flow{
    overflow: auto;
  }
*/

  .scan_process{
    padding: 10px 10px;
  }
  

  .process_card_inner img{
    width: 90%;
    padding: 20px;
    filter: drop-shadow(3px 3px 5px rgba(0,0,0,0.2));
  }

  .process_card_inner video{
    width: 90%;
    padding: 20px;
    border-radius: clamp(35px, 7vw, 45px);
    filter: drop-shadow(3px 3px 5px rgba(0,0,0,0.2));
  }

  .process_card_inner h3{
    margin-bottom: 10px;
  }

  .process_card_inner p{
    padding: 10px;
    font-size: clamp(15px, 2.5vw, 18px);
  }

  .process_slider_arrow::after{
    content: url(../images/scan_process_arrow_sp.svg);
    top: 50%;
    right: -8px;
    transform: translateY(-50%);
  }

}

#scan-function{
  background: #FFD940;
  padding: 100px 30px 120px;
  text-align: center;
}

#scan-function h2{
  font-size: clamp(30px, 5vw, 45px);
  font-weight: 700;
  color: #685BC7;
  margin-bottom: 50px;
}

.scan_function_card{
  max-width: 1200px;
  margin: 0 auto;
}

.function_card_inner{
  padding: 30px 30px 10px;
}

.inner_card_function{
  background-color: #fff;
  border: #685BC7 3px solid;
  border-radius: clamp(30px, 3vw, 45px);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 30px;
  gap:20px 0;
}

.function_card_left,.function_card_right{
  width: 50%;
  padding: 30px;
  height: auto;
}

.function_card_right video{
  width: 53%;
  border-radius: clamp(10px, 1.5vw, 40px);
  filter: drop-shadow(7px 7px 7px rgba(0,0,0,0.2));
}

.function_card_left h3{
  color: #685BC7;
  font-weight: bold;
  font-size: clamp(22px, 3vw, 32px);
  margin-bottom: 30px;
  letter-spacing: 1px;
}

.function_card_left p{
  text-align: center;
  font-size: clamp(16px, 4vw, 21px);
  color: #685BC7;
  font-weight: bold;
  line-height: 1.2em;
  letter-spacing: 1px;
}


.function_card_right img{
  width: 50%;
  margin: 0 auto;
  border-radius: clamp(10px, 1.5vw, 40px);
  filter: drop-shadow(7px 7px 7px rgba(0,0,0,0.1));
}


#scan-function .slick-prev:before{
  content: url(../images/scan_function_arrow_prev.svg);
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left:-20px;
  margin: auto;
  -webkit-transform: rotate(0)!important;
  transform: rotate(0)!important;
  border-bottom: none!important;
  border-left: none!important;
  opacity: 1!important;
}

#scan-function .slick-next:before{
  content: url(../images/scan_function_arrow_next.svg);
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left:-15px;
  margin: auto;
  -webkit-transform: rotate(0)!important;
  transform: rotate(0)!important;
  border-top: none!important;
  border-right: none!important;
  opacity: 1!important;
}

#scan-function .slick-dots li.slick-active button:before{
  background: #685BC7!important;
  opacity: 1!important;
}

#scan-function .slick-slide{
  height: auto!important;
  -webkit-backface-visibility: hidden;
  -webkit-transform-style: preserve-3d;
}

#scan-function .slick-dots{
  bottom: -80px;
}

#scan-function .slick-dots li{
  margin: 0 14px;
}

#scan-function .slick-dots li button{
  width: 10px;
  height: 10px;
}

#scan-function .slick-dots li button:before{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #999;
}

@media screen and (max-width: 768px) {

  #scan-function{
    padding: 60px 10px;
    margin-top: 40px;
  }

  .inner_card_function{
    flex-direction: column;
    padding: 20px 10px;
  }
  
  .function_card_left,.function_card_right{
    width: 100%;
    padding: 10px;
  }

  .function_card_inner{
    padding: 10px;
  }

  .function_card_left{
    height: 100%;
  }

   .function_card_left h3{
    margin-bottom: 10px;
    line-height: 1.1em;
    height: 2.2em;
  }

  .function_card_left p{
    height: 9em;
  }

  .function_card_left.lang_zh p{
    height: 4.5em;
  }

  .function_card_right video{
    border-radius: clamp(13px, 4vw, 30px);
  }

  .function_card_right img{
    border-radius: clamp(13px, 4vw, 30px);
  }

  #scan-function .slick-prev:before{
    content: url(../images/scan_function_arrow_prev_sp.svg);
    top: 0;
    bottom: 0;
    right: 0;
    left:-30px;
    margin: auto;
  }
  
  #scan-function .slick-next:before{
    content: url(../images/scan_function_arrow_next_sp.svg);
    top: 0;
    bottom: 0;
    right: -30px;
    left:0;
    margin: auto;
  }

  #scan-function .slick-dots{
    bottom: -60px;
  }

  #scan-function .slick-dots li button{
    width: 7px;
    height: 7px;
  }
  
  #scan-function .slick-dots li button:before{
    width: 7px;
    height: 7px;
    border-radius: 50%;
  }
}

.image_caution{
  text-align: right;
  max-width: 1200px;
  margin: 0 auto;
  padding-right: 40px;
  font-size: clamp(14px, 2vw, 17px);
}

.image_caution.yellow{
  color: #FFD940;
}

.image_caution.parple{
  color: #685BC7;
}

.scan_process .image_caution{
  padding-right: 2.5vw;
  width: 70%;
}
@media screen and (max-width: 768px) {
  .scan_process .image_caution{
  padding-right: 0px;
  width: 100%;
}
}

.slick-dotted.slick-slider{
  margin-bottom: 0!important;
}

@media screen and (max-width: 768px) {

  .image_caution{
    padding-right: 20px;
  }

  .image_caution.yellow{
    margin-top: 20px;
  }
}