@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,1000&family=Noto+Sans+TC:wght@100..900&family=Noto+Serif+TC:wght@900&display=swap');
body{
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  flex-direction: column;
  background: #ad39ff;
  width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
  font-family: 'Noto Sans TC';
}
section{
  width: 100%;
  display: flex;
  justify-content: center;
  overflow-x: hidden;
  flex-direction: column;
  align-items: center;
}
.keyvisual{
  align-items: center;
}
.kvbg{
  width: 100%;
}
.kvspace{
  width: 100vw;
  position: absolute;
  top: 0;
}
.kvitemboardiv{
  width: 52%;
  position: absolute;
  transform: translate(14%, -35%);
}
.kvitemboard{
  width: 100%;
}
.kvitemgroup{
  width: 100vw;
  height: 100%;
  position: absolute;
	display: flex;
	justify-content: center;
  overflow-x: hidden;
  align-items: flex-start;
  animation: kvintro 5s ease-in-out 1;
  transform: scale(1);
  top: calc(100vw * -0.04);
  left: 4vw;
  opacity: 1;
}
@keyframes kvintro {
  0%,10% {
    opacity: 0;
    transform: scale(0.1);
  }
  30%,100% {
    opacity: 1;
    transform: scale(1);
  }
}


.kvitemgroup img{
  position: absolute;
  animation: itemfloat 1s ease-in-out infinite;
}
.kvitemgroup img.kvitem01{
  width: 7%;
  transform: translate(-310%, 115%);
  animation-delay: -0.2s;
}
.kvitemgroup img.kvitem02{
  width: 7%;
  transform: translate(-370%, 240%);
  animation-delay: -0.8s;
}
.kvitem03.leup{
  width: 10%;
  transform: rotate(82deg) translate(15%, 400%);
  animation-delay: -0.5s;
}
.kvitem03.ledom{
  width: 13%;
  transform: rotate(17deg) translate(-165%, 360%);
  animation-delay: -0.7s;
}
.kvitem03.rigup{
  width: 13%;
  transform: translate(125%, 40%);
  animation-delay: -0.3s;
}
.kvitem03.rigdom{
  width: 10%;
  transform: translate(190%, 380%) rotate(68deg);
  animation-delay: -0.5s;
}
.kvitemgroup img.kvitem04{
  width: 10%;
  transform: translate(210%, 185%);
  animation-delay: -0.4s;
}
.kvitemgroup img.kvitem05{
  width: 15%;
  transform: translate(250%, 60%);
  animation-delay: -0.6s;
}
.kvitemgroup img.kvitem06{
  width: 10%;
  transform: translate(320%, 190%);
  animation-delay: -0.9s;
}
.kvitemgroup img.kvitem07{
  width: 10%;
  transform: translate(-300%, 190%);
  animation-delay: -0.3s;
}
.kvitemgroup img.kvitem08{
  width: 10%;
  transform: translate(-430%, 150%);
  animation-delay: -0.7s;
}
.kvitemgroup img.kvitem09{
  width: 15%;
  transform: translate(-275%, 280%);
  animation-delay: -0.2s;
}
.kvitem99{
  width: 5%;
}
.kvitem99.it99a{
  transform: translate(720%, 640%);
  animation-delay: -0.6s;
}
.kvitem99.it99b{
  transform: translate(890%, 420%) rotate(-10deg);
  filter: hue-rotate(-50deg);
  animation-delay: -0.9s;
}
.kvitem99.it99c{
  transform: translate(-920%, 125%) rotate(5deg);
  animation-delay: -0.2s;
}

@keyframes itemfloat {
  0%,100% {
    margin-top: 0vw;
  }
  50% {
    margin-top: -1vw;
  }
}


.kv_slogan_s{
  position: absolute;
  font-size: 1.5vw;
  font-weight: 400;
  top:3.5vw;
  color: #fcfeec;
  letter-spacing: 5px;
  padding: 0.6vw 1vw;
  border: 3px solid #fcfeec;
  border-radius: 50px;
  line-height: 1;
  background: linear-gradient(to bottom,#fdcb95,#d95e98,#ac5ac7);
  text-shadow: 5px 5px 5px rgba(0, 0, 0, 0.6);
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
  animation: kvsloganin 5s ease-in-out 1;
}
@keyframes kvsloganin {
  0%,30% {
    opacity: 0;
  }
  50%,100% {
    opacity: 1;
  }
}
.kvtitle{
  position: absolute;
  width: 40vw;
  top: 8vw;
  animation: kvtitle 5s ease-in-out 1;
}

@keyframes kvtitle {
  0% {
    transform: scale(0.1);
  }
  10%,100% {
    transform: scale(1);
  }
}

.kv_slogan_s2{
  position: absolute;
  font-size: 1.8vw;
  font-weight: 1000;
  letter-spacing: 0.5vw;
  color: #fcfeec;
  width: 35vw;
  text-align: center;
  transform: translate(0, -125%);
  text-shadow: 5px 5px 8px rgba(0, 0, 0, 0.5);
  animation: kvsloganin 5s ease-in-out 1;
}

.kv_slogan_s2:after,.kv_slogan_s2::before {
  content: "";
  width: 0;
  height: 0;
  border-bottom: 0.7vw solid transparent;
  border-left: 25vw solid #fffbe1;
  position: absolute;
  bottom: -1vw;
  left: 0;   
  animation: kvsloganinleft 5s ease-in-out 1;
}
@keyframes kvsloganinleft {
  0%,45% {
    left: -100vw;   
  }
  55%,100% {
    left: 0;   
  }
}
.kv_slogan_s2::before {
  transform: scale(-1) rotate(2deg);
  left: unset;
  right: 0;
  bottom: -1.5vw;
  animation: kvsloganinright 5s ease-in-out 1;
}
@keyframes kvsloganinright {
  0%,50% {
    right: -100vw;   
  }
  60%,100% {
    right: 0;   
  }
}
.kvlogo{
  position: absolute;
  width: 10vw;
  top: 29vw;
}
/*** 區塊02 ***/
.classinforbox{
  margin-top: -20vw;
  padding-bottom: 5vw;
}
.bgblock{
  position: absolute;
  width: 65vw;
  z-index: -1;
}
.bgblock01{
  transform: rotate(90deg);
  left: -28%;
  top: 80vw;
}
.bgblock02{
  right: 0;
  top:60vw;
}
.bgblock03{
  right: 0;
  top:69.5vw;
}
.bgblock04{
  right: 0;
  top:79vw;
}

.bgblock05{
  transform: rotate(90deg);
  right: -28%;
  top: 145vw;
}

.bgblock06{
  transform: rotate(90deg);
  left: -28%;
  top: 210vw;
}


.sc_title{
  z-index: 1;
  border-radius: 100px;
  border: 5px solid #550b65;
  background: linear-gradient(to bottom,#fedd83,#e74f96);
  width: 57vw;
  height: 6vw;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 10px 10px 0 #550b65;
}
.fourlevtext {
  line-height: 1;
  font-weight: 800;
  letter-spacing: 5px;
  font-style: italic;
  font-size: 2.8vw;
  color: #fff;
  text-shadow:
    -2px  0   #550b65,
     2px  0   #550b65,
     0   -2px #550b65,
     0    2px #550b65,
    -2px -2px #550b65,
     2px -2px #550b65,
    -2px  2px #550b65,
     2px  2px #550b65;
  display: block;
  position: absolute;
  margin-top: -0.5vw;
  margin-left: -1vw;
}
.fourlevtext.l2 {
  transform: translate(4px, 3px);
  color: #550b65;
  text-shadow:unset;
}
.fourlevtext.l3 {
  transform: translate(8px, 6px);
  color: #37063f;
  text-shadow:unset;
}
.fourlevtext.l4 {
  transform: translate(10px, 9px);
  color: #000;
  text-shadow:unset;
}
.bicobox{
  display: flex;
  justify-content: center;
  align-items: center;
  transform: rotate(5deg) scaleX(1.3);
}
.bico{
  font-size: 7vw;
  margin-top: -4vw;
  margin-left: -0.5vw;
  text-shadow: unset;
  left: 17vw;
}

.contenttextbox{
  width: 65vw;
  background: linear-gradient(to bottom, #ffffff, #fffac1);
  text-align: center;
  margin-top: -2vw;
  border-radius: 20px;
  padding: calc(2vw - 5px) 0 5px 5px;
  color: #540b63;
  letter-spacing: 2px;
  font-weight: 600;
  font-size: 1.5vw;
}
.contenttextbox p{
  margin: 1vw;
  padding-bottom: 1vw;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.contenttextbox p::after{
  content: "";
  width: 95%;
  height: 3px;                 /* 線粗 */
  background: repeating-linear-gradient(
    to right,
    #dbcacb 0 10px,                /* 點(或短線)的長度：2px */
    transparent 10px 20px        /* 間距：6px（8-2） */
  );
  position: absolute;
  bottom: 0;
  left: 1vw;
}
.contenttextbox p:first-child::after,
.contenttextbox p:last-child::after,
.contenttextbox p:nth-last-child(2)::after,
.contenttextbox p:nth-last-child(3)::after{
  display: none;
}
.contenttextbox.l2{
  background: #ddcee0;
}
.contenttextbox.l3{
  background: #bb9dc1;
}
.contenttextbox.l4{
  background: #986da1;
}
.contenttextbox.l5{
  background: #763c82;
}
.contenttextbox.l6{
  background: #540b63;
}
.boxtext{
  font-size: 2.5vw;
  font-weight: 700;
  padding: 1vw;
  line-height: 1;
  padding: 0.5vw 0.8vw 0.8vw 0.8vw;
  margin-left: 1vw;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.boxtext01{
  border: 2px solid #540b63;
  background: #fff;
}

.cardtextstyle label{
  letter-spacing: 5px;
  font-weight: 900;
  background: linear-gradient(to right,#fcc97c,#cb549c);
  background-clip: text;
  color: transparent;
}
.cardtextstyle label:first-of-type{
    position: absolute;
    color: #000;
    text-shadow:
    -2px  2px   #000,
     2px  2px   #000,
     0   -2px #000,
     0    2px #000,
    -2px -2px #000,
     2px -2px #000,
    -2px  2px #000,
     2px  2px #000;
}
.cardtextstyle label:last-of-type{
    transform: translate(-1px,-1px);
}
.pointget a{
  width: 8px;
  height: 8px;
  background: #fff;
  border: 2px solid #540b63;
  display: block;
  position: absolute;
}
.pointget a:nth-child(1){
  top:-6px; left:-6px;
}
.pointget a:nth-child(2){
  top:-6px; right:-6px;
}

.pointget a:nth-child(3){
  left:-6px;
}

.pointget a:nth-child(4){
  right:-6px;
}

.pointget a:nth-child(5){
  bottom:-6px; left:-6px;
}

.pointget a:nth-child(6){
  bottom:-6px; right:-6px;
}
.contentbox{
  position: relative;
}
.bgitempaper{
  position: absolute;
  width: 10vw;
  z-index: 10;
  bottom: -3vw;
  left: -5vw;
  animation: paperflay 5s ease-in-out infinite;
}
@keyframes paperflay {
  0% {
    opacity: 0;
    width: 7vw;
    bottom: 4vw;
    left: -5vw;
  }
  30%,70% {
    opacity: 1;
    width: 10vw;
    bottom: -3vw;
    left: -5vw;
    
  }
  100% {
    opacity: 0; 
    width: 12vw;
    bottom: -8vw;
    left: -2vw;
  }
}

/* 立即加入GO */
.gobtn{
  width: 25vw;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 3vw 0 6vw 0;
  background: linear-gradient(to bottom,#00d7cf,#6b8add);
  border-radius: 50px 0 50px 0 ;
  position: relative;
  text-decoration: none;
}
.gobtn span{
  font-size: 3vw;
  font-weight: 600;
  color: #fff;
  line-height: 1;
  padding: 1.2vw 0 1.5vw 0;
  text-shadow:
    -1px  0   #550b65,
     1px  0   #550b65,
     0   -1px #550b65,
     0    1px #550b65,
    -1px -1px #550b65,
     1px -1px #550b65,
    -1px  1px #550b65,
     1px  1px #550b65;
}
.gobtn img{
  width: 1.2vw;
  margin-left: 0.7vw;
  margin-top: 0.5vw;
}
.gobtn .btnpointer{
  width: 3vw;
  position: absolute;
  right: 2vw;
  bottom: -1vw;
  animation: pointermove 1s ease-in-out infinite;
}
@keyframes pointermove {
  0%,100% {
    right: 2vw;
    bottom: -1vw;
  }
  50% {
    right: 3vw;
    bottom: 0vw;
  }
}
.sc_title.title02{
  position: relative;
  padding: 1vw 0;
  margin-bottom: 2vw;
}
.title02item{
  width: 10vw;
  right:0;
  position: absolute;
  bottom: -1vw;
}

.classcategorygroup{
  width: 75%;
  justify-content: center;
}
.categoryitem{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
  margin-top: 1.5vw;
}
.classgllybg,.classgllyimg,.boxtext02,.classgllyhover{
  position: absolute;
}
.classgllyimg{
  width: 8vw;
  top: -1vw;
}
.classgllyhover,.classgllyhover_,.classgllybg{
  width: 100%;
}

.boxtext02{
  border: 2px solid #540b63;
  width: 70%;
  position: absolute;
  transform: translateY(-0.5vw);
  margin: 0;
}

.classgllyhover{
  display: none;
}
.categoryitemamg01{
  cursor: pointer;
}
.classcategorygroup:not(:has(~ .classcategorygroup)) .categoryitemamg01:not(:has(~ .categoryitemamg01)) .categoryitemamg02{
  transform: rotate(-5deg);
}
.sc_title.title03{
  margin: 2vw 0;
}
.sc_title.title03 .bicobox{
  transform: rotate(10deg);
  position: relative;
}
.sc_title.title03 .bico{
  left: 14vw;
  top: -3vw;
}

.classlistblock ul,.classlistblock li{
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 1.7vw;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 3px;
}
.classlistblock li{
  padding: 1vw 2vw;
  margin: 2vw 0;
  border-radius: 50px;
  background: #540b63;
  color: #fff;
  width: fit-content;
  padding-right: 0;
  margin-left: 5vw;
  position: relative;
}
.classlistblock li span{
  padding: 0.6vw 1vw calc(0.6vw + 1px) 1vw;
  background:linear-gradient(to right,#f2ec90,#fefdf2);
  margin-left: 1vw;
  padding-right: 2vw;
  border-radius: 0 50px 50px 0;
  color: #540b63;
}
.classlistblock li::before{
  content: "";
  display: block;
  background: url("../img/listicon.png") no-repeat;
  background-size: contain;
  width: 4vw;
  height: 4vw;
  position: absolute;
  top: -0.2vw;
  left: -5vw;
}
.classlistblock li:hover::before{
  animation: classlistblockhover 0.3s ease-in-out 1;
}
@keyframes classlistblockhover {
  0%,100% {
    transform: scaleX(1);
  }
  50% {
    transform: scaleX(-1);
  }
}
.awardpromtext{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.awardpromtext .boxtext{
  position: unset;
  width: fit-content;
  margin: 2vw 0;
}


/* 紫色區塊 */
.bgbar{
  width: 105%;
  height: 15vw;
  background: url(../img/sc03bg.png) no-repeat;
  background-size: 110%;
  background-position: center;
}
.bbbottom{
    transform: scale(-1);
    margin-top: -8vw;
    z-index: -1;
}
.sectionBox{
  width: 100%;
  background:radial-gradient(ellipse at center,#ec7aac 0% ,#540b63 70%);
  margin-top: -8vw;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.title04item{
  width: 5vw;
  right: 40vw;
  position: absolute;
  transform: translateY(1.5vw);
  animation: title04itemmove 3s ease-in-out infinite;
}
@keyframes title04itemmove {
  0%,100% {
    right: 11vw;
  }
  50% {
    right: 40vw;
  }
}

.yourpointsection .contenttextbox p{
  justify-content: flex-start;
  padding-left: 5vw;
}
.yourpointsection .contenttextbox p span{
  font-size: 1.8vw;
  font-weight: 800;
  position: relative;
}
.yourpointsection .contenttextbox p span::after{
  content: "";
  background: url("../img/underline.png") no-repeat;
  background-size: contain;
  position: absolute;
  display: block;
  width: 8vw;
  height: 0.5vw;
  left: 2vw;
}

.yourpointsection .contenttextbox p:nth-last-child(2)::after,
.yourpointsection .contenttextbox p:nth-last-child(3)::after{
  display: unset;
}

.yourpointsection .contenttextbox p:nth-child(n+4){
  padding-left: 17.5vw;
  color: #403c3b;
}
.yourpointsection .contenttextbox p:is(:nth-child(4), :nth-child(7), :nth-child(11)) {
  font-weight: 800;
  color: #540b63;
}

.yourpointsection .bgitempaper {
    position: absolute;
    width: 13vw;
    z-index: 10;
    bottom: 1vw;
    left: -3vw;
    transform: rotate(80deg);
    animation: flash 0.5s ease infinite;
}
.yourpointsection .bgitempaper.item02 {
    width: 10vw;
    bottom: 6vw;
    left: 5vw;
    transform: rotate(155deg);
    animation: flash 0.5s ease infinite;
    animation-delay: -0.2s;
}
@keyframes flash {
  0%,100%  { opacity: 0.6; }
  50% { opacity: 1; }
}


.title05item{
    width: 7vw;
    right: 10vw;
    position: absolute;
    animation: flash 1s steps(1) infinite;
}
.title05{
  margin: 2vw 0;
}
.yourbilblebox{
  width: 50vw;
  margin: 3vw;
  margin-top: 5vw;
}
.youritem{
  padding: 1vw 2vw;
  position: relative;
  padding-bottom: 8vw;
}

.youritem:nth-child(n+3){
  padding-bottom: 0;
}

.youritem h4{
  position: absolute;
  width: fit-content;
  padding: 1vw 2vw;
  background: linear-gradient(to right,#ee4e89,#fec26d);
  border: #5a0d64 3px solid;
  border-radius: 50px;
  color: #fff;
  font-weight: 700;
  font-size: 1.8vw;
  letter-spacing: 3px;
  text-shadow:
    -1px  0   #550b65,
     1px  0   #550b65,
     0   -1px #550b65,
     0    1px #550b65,
    -1px -1px #550b65,
     1px -1px #550b65,
    -1px  1px #550b65,
     1px  1px #550b65;
  top: -4vw;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
}
.yrtextbox{
  background: linear-gradient(to bottom, #fffffe, #f2eb8d);
  border-radius: 10px;
  font-size: 1.5vw;
  font-weight: 500;
  letter-spacing: 5px;
  color: #540b63;
  padding: 1.5vw;
  padding-top: 3.5vw;
  box-shadow: inset -5px -5px 8px rgba(0, 0, 0, 0.5);
  margin-top: -3vw;
  z-index: -1;
}
.awardlist{
  background: url(../img/bgblock.png);
  background-size: 70%;
  padding-top: 8vw;
  margin-top: -8vw;
  z-index: -2;
  padding-bottom: 3vw;
}

.title06{
  margin: 2vw 0;
}
.awardlist .classlistblock li{
  margin-left: 0;
}

.awardlist .classlistblock li::before{
  display: none;
}
.boxtext03,.boxtext04,.boxtext05{
  border: 3px solid #540b63;
  width: 70%;
  position: absolute;
  transform: translateY(-0.5vw);
  margin: 0;
}
.awardlist .pointget a {
    width: 12px;
    height: 12px;
    border: 3px solid #540b63;
}

.awardlist .pointget a:nth-child(1){
  top:-7px; left:-7px;
}
.awardlist .pointget a:nth-child(2){
  top:-7px; right:-7px;
}
.awardlist .pointget a:nth-child(3){
  left:-7px;
}
.awardlist .pointget a:nth-child(4){
  right:-7px;
}
.awardlist .pointget a:nth-child(5){
  bottom:-7px; left:-7px;
}
.awardlist .pointget a:nth-child(6){
  bottom:-7px; right:-7px;
}

.cardtextstyle.boxtext03 label:last-of-type,
.cardtextstyle.boxtext04 label:last-of-type,
.cardtextstyle.boxtext05 label:last-of-type{
  color: #fff;
  text-shadow:
  -1px  0   #000,
    1px  0   #000,
    0   -1px #000,
    0    1px #000,
  -1px -1px #000,
    1px -1px #000,
  -1px  1px #000,
    1px  1px #000;
}
.cardtextstyle.boxtext03{
  background: #ef70b6 ;
}
.cardtextstyle.boxtext04,
.cardtextstyle.boxtext05{
  background: #540b63 ;
  border-color: #fff;
  border-width: 2px;
}
.cardtextstyle.boxtext04 label,
.cardtextstyle.boxtext05 label{
  font-weight: 500;
  letter-spacing: 10px;
  font-size: 1.8vw;
  padding: 0.5vw 1vw;
}
.cardtextstyle.boxtext05 label{
  padding: 0.5vw 3vw;
}
.cardtextstyle.boxtext04{
  transform: rotate(-2deg);
  margin-left: -20vw;
  margin-top: 0;
}

.cardtextstyle.boxtext05{
  transform: rotate(2deg);
  margin-right: -20vw;
  margin-top: 0;
}
.cardtextstyle.boxtext05 li{
  list-style: none;
  display: inline-block;
  font-size: 2.5vw;
  font-weight: 800;
}
/*** 報名區塊 ***/
.formSection{
  padding-top: 2vw;
}
.formBox{
	background: #ad39ff;
	width: 100%;
	display: flex;
	justify-content: center;
}
.form{
  background-color: #fff;
  border-radius: 30px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
  width: 50vw;
  /* height: calc(50vw); */
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.formnote{
	display: flex;
	flex-direction: column;
	align-items: center;
}

.formiframe{
	width: 45vw;/*不能更大*/
	overflow: hidden;
	height: 1400px;
}
.formiframe iframe{
	width: 108%;
  height: 2000px;
  transform: translate(-45px, -70px);
  overflow: hidden;
}

.formBox h2{
  text-align: center;
}
.notext{
  width: calc(100% - 100px);
  margin: 20px auto;
  padding: 20px;
  color: #999;
  font-size: 12px;
  line-height: 1.2em;
  border-radius: 10px;
  border: 2px dashed #ccc;
}
.notext h3{
    text-align: center;
    font-size: 20px;
    margin-bottom: 15px;
    color: #6b4e3b;
		line-height: 25px;
}
.notext ul{
  list-style-type: cjk-ideographic;
}
.notext ul ul{
  list-style-type:lower-alpha; 
}
.notext ul ul ul {
    list-style-type: decimal;
}

/* footer */
.footer img{
  width: 20vw;
  margin: 2vw 0;
}
.msbr{
  display: none;
}

/*mouse*/
.mouseIcon{
  display: flex;
  align-items: center;
  flex-direction: column;
  top: 34vw;
  position: absolute;
  opacity: 0.8;
}
.mouseintro{
  margin-bottom: 5px;
  width: 2.3vw;
}
.mouseIcon span{
  font-size: 1vw;
  color: #fffbe1;
  z-index: 1;
  font-weight: bold;
}
.mouseIcon::after{
  content: "";
  display: block;
  width: 0.6vw;
  height: 0.6vw;
  background: rgba(200,84,84,0.4);
  border-radius: 50px;
  position: absolute;
  transform: translateY(0.7vw);
  animation: 1s mousegogo ease-in-out infinite;
}
.mouseIcon::before{
  content: "";
  display: block;
  width: 0.6vw;
  height: 1.3vw;
  background: #fffbe1;
  border-radius: 50px;
  position: absolute;
  transform: translateY(0.7vw);
  }
@keyframes mousegogo {
  0%,30% {
    transform: translateY(0.7vw);
  }
  100% {
    transform: translateY(1.3vw);
  }
}

.floatbtn{
  position: fixed;
  z-index: 99;
  width: fit-content;
  right:2vw;
  bottom: 3vw;
  width: 8vw;
  height: 8vw;
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.4) , 
        inset 2px 2px 10px 0px rgba(0, 0, 0, 0.4);

}
.floatbtn a{
  display: flex;
  align-items: center;
  flex-direction: column;
  text-decoration: none;
  color: #fff;
  line-height: 1.3;
  letter-spacing: 2px;
  font-size: 1.5vw;
  font-weight: 600;
  text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.8);
}
.floatbtn img{
  width: 1.5vw;
  margin-top: 0.3vw;
}
@media (max-width: 1490px) {
	.form {
    width: 60vw;
	}
	.formiframe {
			width: 55vw;
			height: 1400px;
	}
}

@media (max-width: 1450px) {
	.form {
    width: 65vw;
	}
	.formiframe {
			width: 60vw;
			height: 1400px;
	}
  .fourlevtext{
    font-size: 2.5vw;
    text-shadow:
      -1px  0   #550b65,
       1px  0   #550b65,
       0   -1px #550b65,
       0    1px #550b65,
      -1px -1px #550b65,
       1px -1px #550b65,
      -1px  1px #550b65,
       1px  1px #550b65;
  }
  .fourlevtext.l2 {
    transform: translate(4px, 4px);
  }
  .fourlevtext.l3 {
    transform: translate(6px, 5px);
  }
  .fourlevtext.l4 {
    transform: translate(8px, 6px);
  }
  .bicobox {
    transform: scaleX(2) rotate(5deg);
  }
  .bico {
    font-size: 5vw;
    left: 10.8vw;
    margin-top: -2vw;
  }
  .contenttextbox p:first-child{
    padding-top: 2vw;
  }
  .boxtext {
    font-size: 2.2vw;
  }
  .sc_title.title03 .bicobox {
    transform: rotate(8deg);
  }
  .classinforbox {
    padding-bottom: 7vw;
    margin-top: -15vw;
  }
}
@media (max-width: 1130px) {
	.form {
    width:80vw;
	}
	.formiframe {
			width: 75vw;
			height: 1400px;
	}
  .contenttextbox p:first-child{
    padding-top: 3vw;
  }
  .boxtext {
    font-size: 2vw;
  }
  .classinforbox {
    padding-bottom: 10vw;
  }
}

@media (max-width: 900px) {
	.form {
    width:90vw;
	}
	.formiframe {
			width: 85vw;
			height: 1400px;
	}
  .boxtext {
    font-size: 1.7vw;
  }
  .classinforbox {
    padding-bottom: 12vw;
  }
  .formiframe iframe {
    height: 1480px;
  }
}
@media (max-width: 600px) {
  body{
    overflow-x: clip;
    touch-action: pan-y;
    overscroll-behavior-x: none;
  }
  .mouseintro {
      width: 6vw;
  }
  .mouseIcon span {
    font-size: 2vw;
  }
  .mouseIcon {
    top: 135vw;
  }
  .mouseIcon::before {
    transform: translateY(2vw);
    width: 1.2vw;
    height: 3.5vw;
  }
  .mouseIcon::after {
    width: 2vw;
    height: 2vw;
  }

  @keyframes mousegogo {
    0%,30% {
      transform: translateY(1.7vw);
    }
    100% {
      transform: translateY(4vw);
    }
  }

  .form {
    width: 90vw;
  }
  .formiframe {
      width: 80vw;
      height: 1400px;
      margin-top: 3vw;
  }
  .formiframe iframe {
      width: 120%;
      transform: translate(-40px, -70px);
      height: 1480px;
  }
  .notext {
    width: calc(100% - 30px);
  }
  .kvitemgroup {
    transform-origin: center 40%;
    left: 0;
  }
  .kvitemgroup img.kvitem01 {
    width: 15vw;
    transform: translate(-120%, 135%);
  }
  .kvitemgroup img.kvitem02 {
    width: 18vw;
    transform: translate(-230%, 280%);
  }
  .kvitem03.leup {
    width: 25vw;
    transform: translate(-150%, 105%) rotate(82deg);
  }
  .kvitem03.ledom {
    width: 25vw;
    transform: translate(-156%, 460%) rotate(17deg);
  }
  .kvitem03.rigup {
    width: 25vw;
    transform: translate(160%, 110%);
  }
  .kvitem03.rigdom {
    width: 25vw;
    transform: translate(160%, 470%) rotate(68deg);
  }
  .kvitemgroup img.kvitem04 {
    width: 20vw;
    transform: translate(225%, 290%);
  }
  .kvitemgroup img.kvitem05 {
    width: 20vw;
    transform: translate(50%, 90%);
  }
  .kvitemgroup img.kvitem06 {
    width: 23vw;
    transform: translate(40%, 400%);
  }
  .kvitemgroup img.kvitem07 {
    width: 20vw;
    transform: translate(-90%, 500%) rotate(45deg);
  }
  .kvitemgroup img.kvitem08 {
    width: 15vw;
    transform: translate(-60%, 50%) rotate(-65deg);
  }
  .kvitemgroup img.kvitem09 {
    width: 27vw;
    transform: translate(125%, 60%);
  }
  .kvitem99 {
    width: 15vw;
  }
  .kvitem99.it99a {
    transform: translate(200%, 720%);
  }
  .kvitem99.it99b {
    transform: translate(315%, 20%) rotate(-10deg);
  }
  .kvitem99.it99c {
    transform: translate(-170%, 10%) rotate(5deg);
  }
  .sc_title {
    width: 85vw;
    height: 10vw;
    box-shadow: 5px 5px 0 #550b65;
    border: 3px solid #550b65;
  }
  .fourlevtext {
    font-size: 3.8vw;
    letter-spacing: 3px;
    text-shadow:
      -1px  0   #550b65,
       1px  0   #550b65,
       0   -1px #550b65,
       0    1px #550b65,
      -1px -1px #550b65,
       1px -1px #550b65,
      -1px  1px #550b65,
       1px  1px #550b65;
  }
  .fourlevtext.l2 {
      transform: translate(2px, 2px);
  }
  .fourlevtext.l3 {
    transform: translate(3px, 3px);
  }
  .fourlevtext.l4 {
    transform: translate(4px, 4px);
  }
  .cardtextstyle label {
    letter-spacing: 3px;
  }
  .cardtextstyle label:first-of-type {
    position: absolute;
    color: #000;
    text-shadow:
    -1px  1px   #000,
     1px  1px   #000,
     0   -1px   #000,
     0    1px   #000,
    -1px -1px   #000,
     1px -1px   #000,
    -1px  1px   #000,
     1px  1px   #000;
  }
  .bico {
    font-size: 7vw;
    left: 16.5vw;
  }
  .contenttextbox {
    width: 85vw;
    padding: calc(2vw - 1px) 0 3px 3px;
    font-size: 2.7vw;
  }
  .contentbox {
    margin-left: -6vw;
  }
  .boxtext {
    font-size: 4vw;
    padding: 1vw 1.8vw 2vw 1.8vw;
    line-height: 1.5;
  }
  .gobtn {
    width: 65vw;
    border-radius: 30px 0 30px 0;
  }
  .gobtn span {
    font-size: 7vw;
    padding: 3.2vw 0 4.5vw 0;
  }
  .gobtn img {
    width: 5.2vw;
    margin-left: 2.7vw;
    margin-top: 0;
  }
  .gobtn .btnpointer {
    width: 8vw;
    margin-right: 8vw;
  }
  .classgllyimg {
    width: 15vw;
    top: -2vw;
  }
  .classcategorygroup {
    width: 100%;
    padding-top: 6vw;
  }
  .classcategorygroup .boxtext {
    font-size: 4vw;
    padding: 0.5vw 0 1vw 0;
    margin-bottom: 0;

  }
  .boxtext02 {
    border: 1px solid #540b63;
    width: 93%;
  }
  .classgllyhover, .classgllyhover_, .classgllybg {
      width: 125%;
  }

  .classcategorygroup .pointget a {
    width: 6px;
    height: 6px;
    border: 1px solid #540b63;
  }
  .classcategorygroup .pointget a:nth-child(1){
    top:-4px; left:-4px;
  }
  .classcategorygroup .pointget a:nth-child(2){
    top:-4px; right:-4px;
  }

  .classcategorygroup .pointget a:nth-child(3){
    left:-4px;
  }

  .classcategorygroup .pointget a:nth-child(4){
    right:-4px;
  }

  .classcategorygroup .pointget a:nth-child(5){
    bottom:-4px; left:-4px;
  }

  .classcategorygroup .pointget a:nth-child(6){
    bottom:-4px; right:-4px;
  }

  .sc_title.title03 .bico {
    font-size: 10vw;
    left: 28vw;
    top: -8vw;
  }
  .classlistblock li {
    font-size: 2.7vw;
  }
  .classinforbox {
    padding-bottom: 25vw;
  }
  .yourpointsection .contenttextbox p span {
    font-size: 3.2vw;
  }
  .yourpointsection .contenttextbox p {
    padding-left: 2vw;
  }
  .yourpointsection .contenttextbox p span::after {
    width: 17vw;
    height: 3.5vw;
    left: 3vw;
  }
  .contenttextbox p::after {
    height: 2px;
  }
  .yourpointsection .contenttextbox p:nth-child(n+4) {
    padding-left: 11vw;
  }
  .yourbilblebox {
    width: 80vw;
  }
  .youritem h4 {
    font-size: 5vw;
  }
  .yrtextbox {
    font-size: 5vw;
    padding: 6vw;
    padding-top: 10vw;
  }
  .youritem:nth-child(n+3) {
    padding-bottom: 8vw;
  }
  .msbr{
    display: unset;
  }
  .pcbr{
    display: none;
  }
  .awardpromtext .boxtext03.boxtext {
    padding: 1vw 2.8vw 2vw 3.8vw;
  }
    
  .cardtextstyle.boxtext04 label, .cardtextstyle.boxtext05 label {
    letter-spacing: 4px;
    font-size: 3.5vw;
    padding: 0.5vw 1vw 0.3vw 1vw;
  }
  .cardtextstyle.boxtext05 li{
    font-size: 5vw;
  } 
 
  .awardpromtext .boxtext {
    margin: 4vw 0;
  }
  .footer img {
    width: 45vw;
    margin: 5vw 0;
  }
  .classinforbox {
    margin-top: 75vw;
  }
  .kvtitle {
    width: 93vw;
    top: 45vw;
  }
  .kv_slogan_s {
    font-size: 4.5vw;
    top: 33vw;
    letter-spacing: 3px;
    padding: 1.6vw 3vw;
    border: 2px solid #fcfeec;
    text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.6);
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
  }
  .kv_slogan_s2 {
    transform: unset;
    width: 70vw;
    top: 80vw;
    font-size: 5vw;
  }
  .kv_slogan_s2:after, .kv_slogan_s2::before {
    border-bottom: 2vw solid transparent;
    border-left: 60vw solid #fffbe1;
    bottom: -3vw;
  }
  .kv_slogan_s2::before {
    transform: scale(-1) rotate(0deg);
    bottom: -3.5vw;
  }
  .kvlogo {
    width: 30vw;
    top: 93vw;
  }
  .kvitemboardiv {
    width: 100%;
    transform: translate(0%, 85%);
    overflow: hidden;
  }
  .kvitemboard {
    width: 110%;
    transform: translate(6%, 10%) rotate(10deg);
  }
  .fourlevtext {
    font-size: 5vw;
  }
  .title01 .fourlevtext {
    font-size: 3.8vw;
  }
  .title04item {
    width: 8vw;
    transform: translateY(3.5vw);
  }
  .floatbtn {
    right: 25vw;
    bottom: 10vw;
    width: 20vw;
    height: 20vw;
    border: 2px solid #fff;
  }
  .floatbtn img {
    width: 4vw;
    margin-top: 1.2vw;
  }
  .floatbtn a {
    font-size: 3.5vw;
  }
}