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

.disable{
  pointer-events: none
}

html{
  scroll-behavior: smooth;
}
body{
  line-height: 1.6;
  line-break: anywhere;
  font-size: 16px;
  font-family: sans-serif;
}
img {
  vertical-align: bottom;
  max-width: 100%;
  margin: 0;
}
h1{
  text-align: center;
}
h3{
  font-size: 34px;
}
section{
  padding: 0 0 30px;
}
section > h2{
  font-family: "corporate-logo-ver2", sans-serif;
  font-weight: 700;
  font-style: normal;
  text-align: center;
  margin: 20px 0;
  font-size: 40px;
  padding: 60px 0 20px;
  margin: 0;
  line-height: 1.3;
}
main{
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  background-color: #ffffff;
  box-shadow: 0px 0px 10px -5px #666666;
}
#container::before {
  content: "";
  width: 100%;
  height: 100vh;
  position: fixed;
  background: linear-gradient(150deg, #efbcd3 0%, #9dd2df 100%);
  opacity: 0.5;
  z-index: -1;
  animation: Grad 10s infinite alternate;
}
@keyframes Grad {
  0% {-webkit-filter: hue-rotate(0deg);filter: hue-rotate(0deg);}
  100% {-webkit-filter: hue-rotate(360deg);filter: hue-rotate(360deg);}
}
.inner{
  width: 90%;
  margin: 0 auto;
}
.anchor{
  display: block;
  text-align: center;
  font-weight: bold;
  text-decoration: underline;
  margin-top: 30px;
  font-size: 20px;
}
.blue-link{
  text-decoration: underline;
  color: #0066ff;
}
.txt-link{
  display: block;
  text-align: right;
  text-decoration: underline;
}
.mv h1 img{
  width: 88%;
  margin-top: 45px;
}
.mv h2{
  font-size: 18px;
  font-weight: bold;
  color: #a3a3a3;
  padding: 5px 30px;
  text-align: center;
  line-height: 1.4;
}
.mv p{
  text-align: center;
  font-size: 22px;
  color: #666666;
  font-weight: bold;
  margin: 15px 0;
}
.mv p span{
  color: #e50034;
}
.mv .note{
  display: block;
  text-align: center;
  margin-top: -10px;
  margin-bottom: 30px;
  color: #a3a3a3;
}
.mv .move{
  animation: move 1s ease-in-out forwards;
  animation-iteration-count: 2;
}
@keyframes move {
  0% {transform: scale(1.0, 1.0) translate(0, 0);}
  15% {transform: scale(0.98, 0.9) translate(0, 5px);}
  30% {transform: scale(1.02, 1.0) translate(0, 8px);}
  50% {transform: scale(0.98, 1.05) translate(0, -8px);}
  70% {transform: scale(1.0, 0.9) translate(0, 5px);}
  100% {transform: scale(1.0, 1.0) translate(0, 0);}
  0%, 100% {opacity: 1;}
}
#howto{
  background-color: #def1f7;
  padding-bottom: 40px;
}
#howto h2{
  color: #5ab9d5;
  padding: 50px 0 30px;
}
#howto table{
  margin-top: -10px;
}
#howto table tr{
  background-color: #ffffff;
  border-top: 15px solid #def1f7;
}
#howto table th{
  width: 22%;
  padding: 25px;
  text-align: center;
}
#howto table td{
  border-left: solid 1px #5ab9d5;
  padding: 25px;
}
#howto table td span{
  display: block;
  font-family: "corporate-logo-ver2", sans-serif;
  color: #521b85;
  line-height: 1.4;
  margin-bottom: 10px;
}
#howto table td .step2{
  font-size: 24px;
}
#howto table td .step3{
  font-size: 20px;
}
#howto table td .step3:nth-of-type(2){
  margin-top: 20px;
}
#howto .txt-link{
  margin-top: 10px;
}
#course h2 span{
  font-size: 28px;
  display: block;
}
#course h3{
  font-size: 24px;
  font-weight: bold;
  margin-top: 15px;
}
#course p{
  font-size: 18px;
}
#course .btn{
  display: block;
  border-radius: 100px;
  padding: 15px 0;
  text-align: center;
  margin: 15px auto 50px;
  font-weight: bold;
  font-size: 18px;
  border: 2px #000000 solid;
  width: 90%;
}
#course dl dt{
  font-size: 20px;
}
#course dl dd{
  font-size: 18px;
}
#visumo h2{
  color: #00acca;
}
#visumo p{
  text-align: center;
  color: #555555;
  margin-bottom: 20px;
}
#giftee{
  margin-top: 60px;
}
#giftee a{
  display: block;
  margin: 0 auto 10px;
  text-align: center;
  background: #de4538;
  color: #ffffff;
  padding: 10px 0;
  width: 40%;
  border-radius: 20px;
  font-size: 20px;
}
#giftee p{
  padding: 20px 0;
  width: 90%;
  margin: 0 auto;
  font-size: 20px;
}
#giftee .txt{
  color: #555555;
  font-size: 16px;
}
#guide{
  margin-bottom: 30px;
}
#guide h4{
  color: #5ab9d5;
  background-color: #eef8fb;
  padding: 5px 20px;
  margin: 30px 0 20px;
  font-size: 18px;
  font-weight: bold;
}
#guide h5{
  margin: 10px 0;
  font-weight: bold;
}
#guide li{
  margin-bottom: 5px;
}
#guide .txt-link{
  margin: 10px 0 30px;
}
#pagetop {
  display: none;
  position: fixed;
  right: 20px;
  bottom: 20px;
}
#pagetop .button {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(120,204,204,0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}
#pagetop .button .arrow{
  display: block;
  height: 10px;
  width: 10px;
  border-top: 2px solid #ffffff;
  border-right: 2px solid #ffffff;
  transform: translateY(20%) rotate(-45deg);
}
footer{
  text-align: center;
  padding: 30px 0;
}
@media screen and (max-width: 769px) {
  body{
	font-size: 4vw;
  }
  section > h2{
    font-size: 9vw;
  }
  h3{
    font-size: 8vw;
  }
  .mv h2{
    font-size: 4vw;
    padding: 0 20px;
  }
  .mv p{
    font-size: 5vw;
  }
  #howto table th{
    padding: 25px 15px;
  }
  #howto table td .step2{
    font-size: 6vw;
  }
  #howto table td .step3{
    font-size: 5vw;
  }
  #howto table td p{
    font-size: 4vw;
  }
  #course h2 span{
    font-size: 6vw;
  }
  #course h3{
    font-size: 5.2vw;
  }
  #course p{
    font-size: 4vw;
  }
  #course .btn{
    font-size: 4.2vw;
    width: 95%;
    margin-bottom: 30px;
  }
  #course dl dt{
    font-size: 4.4vw;
  }
  #course dl dd{
    font-size: 4.2vw;
  }
  #visumo p{
    font-size: 3.6vw;
  }
  #giftee p{
    font-size: 4.4vw;
  }
  #giftee .txt{
    font-size: 4vw;
    padding-bottom: 0;
  }
  #giftee a{
    width: 55%;
    font-size: 4.8vw;
  }
  .anchor{
    font-size: 5vw;
  }
}