@font-face {
  font-family: "NotoSans";
  src: url("fonts/NotoSansJP-Regular.woff");
}

@font-face {
  font-family: "Hannari";
  src: url("fonts/HannariMincho-Regular.woff");
}

@font-face {
  font-family: "Philosopher-Regular";
  src: url("fonts/Philosopher-Regular.woff");
}

@font-face {
  font-family: "GenShinGothic-Medium";
  src: url("fonts/GenShinGothic-Medium.woff");
}

@font-face {
  font-family: "GenShinGothic-Heavy";
  src: url("fonts/GenShinGothic-Heavy.woff");
}

@font-face {
  font-family: "GenShinGothic-Bold";
  src: url("fonts/GenShinGothic-Bold.woff");
}

@font-face {
  font-family: "Philosopher-Italic";
  src: url("fonts/Philosopher-Italic.woff");
}

.hannari {
  font-family: "Hannari";
}

.notosans {
  font-family: "NotoSans";
}

.philosopher-r {
  font-family: "Philosopher-Regular";
}

.genshingothic-m {
  font-family: "GenShinGothic-Medium";
}

.genshingothic-h {
  font-family: "GenShinGothic-Heavy";
}

.genshingothic-b {
  font-family: "GenShinGothic-Bold";
}

.philosopher-i {
  font-family: "Philosopher-Italic";
}

img {
  pointer-events: none;
  user-select: none;
}

li {
  list-style: none;
}

hr {
  border: 0;
  border-top: 0.1vw solid gray;
}

.line {
  background: linear-gradient(transparent 80%, #b391a2 80%);
}

.inner {
  margin-left: 10%;
  margin-right: 10%;
}

.background {
  position: relative;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 0;
}

.hr {
  position: absolute;
  width: 80%;
}

.top .top-text1 {
  position: absolute;
  color: #63977e;
  letter-spacing: 5px;
}

.top .catch1 {
  line-height: 120%;
}

.top p {
  margin-bottom: 0;
}

.top .catch2 {
  position: absolute;
  font-size: 2vw;
  color: black;
  letter-spacing: 0;
}

.top .top-text2 {
  position: absolute;
}

.top img {
  position: absolute;
  max-width: 100%;
  height: auto;
}

.instagram .insta-icon {
  position: absolute;
  top: 5%;
  width: 70%;
  max-width: 100%;
  height: auto;
  left: 0;
  right: 0;
  margin: 0 auto;
}

.insta-text {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
}

.instagram #flexbox {
  position: absolute;
  display: flex;
  bottom: 6%;
  justify-content: space-between;
  margin: 0 10%;
  left: 0;
  right: 0;
}

.insta-post {
  border: 1px solid darkgray;
  position: relative;
  width: 20%;
  margin: 0 5px;
}

.insta-post .thumbnail {
  width: 100%;
}

.insta-post .content {
  padding: 5%;
}

.insta-post .icon {
  width: 20%;
  margin-right: 5px;
}

.insta-post .name {
  width: 100%;
  margin-right: 5px;
}

.insta-post .text {
  text-align: justify;
}

.insta-post .date {
  text-align: right;
}

.cv .title {
  position: absolute;
  width: 70%;
  max-width: 100%;
  height: auto;
  left: 0;
  right: 0;
  margin: 0 auto;
  text-align: center;
}

.cv .ribbon {
  width: 100%;
}

.samplecv {
  position: absolute;
  width: 30%;
}

.cv-text1 {
  position: absolute;
  right: 10%;
  border-bottom: 0.1vw solid #91b3a2;
  padding-bottom: 2%;
}

.cv-text1 h2 {
  margin: 0 auto;
  font-size: 4vw;
}

.cv-text1 h3 {
  margin: 0 auto;
  font-size: 2.1vw;
}

.cv-text2 {
  position: absolute;
}

.cv-text2 .price1 {
  margin: 0 auto;
  text-decoration: line-through;
}

.cv-text2 .cource {
  margin:0 auto;
}

.cv-text3 {
  position: absolute;
  right: 10%;
}

.cv-text3 .price2 {
  margin:0 auto;
  color: red;
}

.cv-text3 .yen-price2 {
  color: red;
}

.cv-text3 .tax-price2 {
  color: black;
}

.cv-text4 {
  position: absolute;
}

.cv-text4 .cancel1 {
  margin: 0 auto;
  color: #bc0000;
}

.cv-text4 .cancel2 {
  margin: 0 auto;
}

.cv-text5 {
  position: absolute;
}

.button-cv {
  position: absolute;
  right: 10%;
  height: 12.5%;
  border-radius: 10px;
  background: linear-gradient(#afc8bb, 50%, #91b3a2);
  color: white;
  cursor: pointer;
  border: 0;
}

.empathy .title {
  position: absolute;
  top: 5%;
  left: 0;
  right: 0;
  margin: 0 auto;
}

.empathy .ask {
  font-size: 5.5vw;
  letter-spacing: 0.3vw;
  text-align: center;
  color: #63977e;
}

.empathy ul {
  position: absolute;
  top: 33%;
  font-size: 2vw;
  left: 10%;
  padding-inline-start: 0;
}

.empathy li {
  margin-bottom: 7%;
}

.empathy .check {
  width: 3.5%;
  padding-bottom: 0.8%;
  margin-right: 2%;
}

.exhibit {
  position: relative;
}

.exhibit1 .title {
  position: absolute;
  top: 5%;
}

.exhibit1 .cause {
  letter-spacing: 0.1vw;
  text-align: center;
  color: #63977e;
}

.exhibit1 .exhibit-text {
  position: absolute;
}

.exhibit1 .describe {
  margin-bottom: 2.5vw;
}

.exhibit1 .exhibit-sample {
  position: absolute;
}

.arrow {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  text-align: center;
}

.exhibit2 .title {
  position: absolute;
}

.exhibit2 .cause {
  letter-spacing: 0.1vw;
  text-align: center;
  color: #63977e;
}

.exhibit2 .exhibit-text {
  position: absolute;
  top: 25%;
  font-size: 2vw;
  width: 45%;
  right: 10%;
}

.exhibit2 .describe {
  margin-bottom: 2.5vw;
}

.exhibit2 .exhibit-sample {
  position: absolute;
  top: 25%;
  width: 30%;
}

.benefit .title {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
}

.benefit .commitment {
  font-size: 5vw;
  letter-spacing: 0.3vw;
  text-align: center;
  color: #63977e;
}

.benefit .point-title {
  letter-spacing: 0.15vw;
  margin-bottom: 3%;
  display: inline-block;
}

.benefit .point-text {
  border-top: 0.1vw solid gray;
  padding-top: 2%;
}


.benefit .point1 {
  position: absolute;
}

.point1-img {
  position: absolute;
  text-align: center;
}

.point1-img .benefit-img {
  width: 100%;
}

.point1-img .img-describe {
  display: inline-block;
}

.benefit .point2 {
  position: absolute;
}

.point2-img {
  position: absolute;
  text-align: center;
}

.point2-img .benefit-img {
  width: 100%;
}

.point2-img .img-describe {
  display: inline-block;
}

.benefit .point3 {
  position: absolute;
}

.point3-img {
  position: absolute;
  text-align: center;
}

.point3-img .benefit-img {
  width: 100%;
}

.point3-img .img-describe {
  display: inline-block;
}

.benefit .point4 {
  position: absolute;
}

.point4-img {
  position: absolute;
  text-align: center;
}

.point4-img .benefit-img {
  width: 100%;
}

.point4-img .img-describe {
  display: inline-block;
}

.use .title {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
}

.use .howtouse {
  font-size: 5vw;
  letter-spacing: 0.1vw;
  text-align: center;
  color: #63977e;
}

.use .step-title {
  letter-spacing: 0.1vw;
}

.use .step-img {
  position: absolute;
}

.use .step-text {
  position: absolute;
}

.qa .title {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
}

.qa .customer-q {
  font-size: 5vw;
  letter-spacing: 0.1vw;
  text-align: center;
  color: #63977e;
}

.qa .object {
  position: absolute;
  width: 80%;
}

.qa .line-bottom {
  padding-bottom: 3%;
  margin-bottom: 3%;
  border-bottom: 0.1vw solid gray;
}

.qa p {
  margin-bottom: 2vw;
}

.q {
  color: #5d8974;
}

.a {
  color: #9d3e3e;
}

.qa-text {
  position: relative;
  padding-top: 2.5%;
  padding-left: 2%;
}

.flex {
  display: flex;
}

.text-q {
  padding-left: 1.6%;
}

.form .title {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  border-radius: 10px;
  background-color: #f1efed;
  text-align: center;
  width: 80%;
}

.customer-information {
  letter-spacing: 0.7vw;
  margin: 1% 0;
}

.information-form {
  position: absolute;
  border: 1px solid gray;
  border-radius: 10px;
  width: 80%;
  padding: 5%;
}

.information-type {
  display: inline-block;
}

.mandatory {
  border-radius: 0.3vw;
  background-color: red;
  color: white;
  padding: 0.3vw 0.5vw;
}

.any {
  border-radius: 0.3vw;
  background-color: gray;
  color: white;
  padding: 0.3vw 0.5vw;
}

.form .form-design {
  border-radius: 0.3vw;
  border: 1px solid lightgray;
  padding-left: 1%;
}

.form .form-design:focus {
  background-color: #e8fbf5;
}

.form-margin3 {
  margin-bottom: 3.5vw;
}

.pay-form {
  position: absolute;
}

.input-pay {
  position: relative;
  margin-right: 3%;
}

.paymethod {
  margin-bottom: 3vw;
  width: 120%;
}

.button-form {
  position: absolute;
  width: 40%;
  left: 0;
  right: 0;
  margin: 0 auto;
  letter-spacing: 0.5vw;
  font-size: 4vw;
  border-radius: 10px;
  background: linear-gradient(#91b3a2, 40%, #31a169);
  color: white;
  cursor: pointer;
  border: 0;
}

.animated {
  opacity: 0;
}

button:hover {
  background: hsla(180,50%,50%,0.7);
}

.footer-link {
  position: absolute;
  width: 80%;
  text-align: center;
}

footer a {
  color: black;
}

#btn {
  background-color: #afc8bb;
  border: 0;
  border-radius: 5px;
}

#btn:hover {
  background: hsla(180,50%,50%,0.7);
}

#btn:active {
  background: #afc8bb;
}

@media (max-width: 599px) {
  .top {
    background-image: url(img/header_sp.jpg);
    padding-top: 150%;
  }

  .top .top-text1 {
    top: 4%;
  }

  .top .catch1 {
    font-size: 8.66vw;
  }

  .top .catch2 {
    font-size: 4vw;
  }

  .top img {
    bottom: 4%;
    width: 40%;
    right: 10%;
  }

  .top .top-text2 {
    bottom: 4%;
  }

  .top .catch3 {
    font-size: 4vw;
  }
  
  .top .catch4 {
    font-size: 5.1vw;
  }

  .instagram {
    padding-top: 120%;
  }

  .instagram #flexbox {
    overflow-x: scroll;
    top: 23%;
  }

  .insta-text {
    top: 14%;
    font-size: 3.5vw;
  }

  .insta-post .content {
    font-size: 2.5vw;
  }

  .insta-post {
    width: 30%;
    flex-shrink: 0;
  }

  .cv {
    background-image: url(img/cv_sp.jpg);
    padding-top: 80%;
  }

  .cv .title {
    top: 4%;
  }

  .samplecv {
    top: 20%;
  }

  .cv-text1 {
    top: 20%;
  }

  .cv-text2 {
    top: 60%;
    left: 10%;
    right: auto;
  }
  
  .cv-text2 .price1 {
    font-size: 3.5vw;
  }
  
  .cv-text2 .cource {
    font-size: 3.9vw;
  }
  
  .cv-text3 {
    top: 52.5%;
  }
  
  .cv-text3 .price2 {
    font-size: 15vw;
  }
  
  .cv-text3 .yen-price2 {
    font-size: 7vw;
  }
  
  .cv-text3 .tax-price2 {
    font-size: 2.5vw;
  }
  
  .cv-text4 {
    top: 44%;
    left: 43.5%;
  }
  
  .cv-text4 .cancel1 {
    font-size: 3.7vw;
  }
  
  .cv-text4 .cancel2 {
    font-size: 2.5vw;
  }
  
  .cv-text5 {
    top: 35.5%;
    left: 43.5%;
  }
  
  .cv-text5 .capacity {
    font-size: 3vw;
  }
  
  .button-cv {
    top: 77.5%;
    width: 80%;
    letter-spacing: 10px;
    font-size: 4.5vw;
  }

  .empathy {
    background-image: url(img/empathy_sp.jpg);
    padding-top: 82%;
  }

  .empathy ul {
    top: 25%;
    font-size: 3.5vw;
  }

  .empathy li {
    letter-spacing: 2px;
    margin-bottom: 7%;
  }

  .empathy .check {
    width: 4%;
  }

  .exhibit1 {
    background-image: url(img/exhibit1_sp.jpg);
    padding-top: 110%;
  }

  .exhibit1 .cause {
    font-size: 4.4vw;
  }

  .exhibit1 .exhibit-sample {
    top: 15%;
    width: 80%;
    right: auto;
  }

  .exhibit1 .exhibit-text {
    top: 65%;
    font-size: 3.5vw;
    width: 80%;
  }

  .exhibit2 {
    background-image: url(img/exhibit2_sp.jpg);
    padding-top: 110%;
  }

  .exhibit2 .title {
    top: 8%;
  }

  .exhibit2 .cause {
    font-size: 4.4vw;
  }

  .exhibit2 .exhibit-sample {
    top: 18%;
    width: 80%;
  }

  .exhibit2 .exhibit-text {
    top: 68%;
    font-size: 3.5vw;
    width: 80%;
    right: auto;
  }

  .arrow {
    top: 48%;
  }
  
  .img-arrow {
    width: 30%;
  }

  .benefit {
    background-image: url(img/benefit_sp.jpg);
    padding-top: 420%;
  }

  .benefit .point-title {
    font-size: 4.4vw;
  }

  .benefit .title {
    top: 1%;
  }

  .benefit .point-text {
    font-size: 3.5vw;
  }

  .benefit .point1 {
    top: 5.75%;
    width: 80%;
  }

  .use .describe {
    padding-bottom: 5%;
    border-bottom: 0.1vw solid gray;
  }

  .point1-img {
    top: 13.5%;
    width: 80%;
  }

  .point1-img .img-describe {
    font-size: 3vw;
  }

  .benefit .point2 {
    top: 29.75%;
    width: 80%;
  }
  
  .point2-img {
    top: 37.5%;
    width: 80%;
  }
  
  .point2-img .img-describe {
    font-size: 3vw;
  }

  .benefit .point3 {
    top: 53.75%;
    width: 80%;
  }
  
  .point3-img {
    top: 60.5%;
    width: 80%;
  }
  
  .point3-img .img-describe {
    font-size: 3vw;
  }

  .benefit .point4 {
    top: 76.75%;
    width: 80%;
  }
  
  .point4-img {
    top: 84.5%;
    width: 80%;
  }
  
  .point4-img .img-describe {
    font-size: 3vw;
  }

  .pc {
    display: none;
  }

  .use {
    background-image: url(img/use_sp.jpg);
    padding-top: 370%;
  }

  .use .title {
    top: 1%;
  }

  .use .step-title {
    font-size: 4.4vw;
    margin-bottom: 58%;
  }
  
  .use .describe {
    font-size: 3.5vw;
    padding-bottom: 7%;
    border-bottom: 0.1vw solid gray;
  }
  
  .use .step-img {
    width: 80%;
  }
  
  .use .step-text {
    width: 80%;
  }

  .use .s1img {
    top: 6.7%;
  }
  
  .use .s1 {
    top: 4%;
  }
  
  .use .s2img {
    top: 26.7%;
  }
  
  .use .s2 {
    top: 24%;
  }
  
  .use .s3img {
    top: 45.2%;
  }
  
  .use .s3 {
    top: 42.5%;
  }
  
  .use .s4img {
    top: 65.2%;
  }
  
  .use .s4 {
    top: 62.5%;
  }
  
  .use .s5img {
    top: 85.2%;
  }
  
  .use .s5 {
    top: 82.5%;
  }

  .s5 .describe {
    padding-bottom: 0;
    border-bottom: 0;
  }

  .qa {
    background-image: url(img/Q&A_sp.jpg);
    padding-top: 272%;
  }

  .qa .title {
    top: 1.5%;
  }

  .qa .object {
    font-size: 3.5vw;
  }

  .q {
    font-size: 6vw;
  }
  
  .a {
    font-size: 6vw;
  }

  .qa1 {
    top: 6%;
  }
  
  .qa2 {
    top: 23.1%;
  }
  
  .qa3 {
    top: 38.25%;
  }
  
  .qa4 {
    top: 55.35%;
  }
  
  .qa5 {
    top: 71.75%;
  }
  
  .qa6 {
    top: 86.9%;
  }

  .form {
    background-image: url(img/form.jpg);
    padding-top: 275%;
  }

  .form .title {
    top: 2%;
  }

  .information-form {
    font-size: 3.5vw;
  }

  .mandatory {
    font-size: 3vw;
  }

  .any {
    font-size: 3vw;
  }

  .form .form-design {
    height: 6.5vw;
    width: 100%;
    margin-top: 1%;
  }

  .information-form {
    top: 8%;
  }

  .customer-information {
    font-size: 4.5vw;
  }

  .form .pay {
    top: 75%;
  }

  .form-margin7 {
    margin-bottom: 10.5vw;
  }

  .pay-form {
    top: 81%;
  }

  .button-form {
    top: 94%;
    height: 3%;
  }

  .input-pay {
    top: 0.55vw;
    width: 3.5vw;
    height: 3.5vw;
  }
  
  .pay-text {
    font-size: 3.5vw;
  }

  footer {
    background-image: url(img/footer.jpg);
    padding-top: 10%;
  }

  .footer-link {
    font-size: 2.8vw;
    top: 10%;
  }
  
  #btn {
    margin-top: 0.5vw;
  }
}

@media (min-width: 600px) and (max-width: 1024px) {
  .top {
    background-image: url(img/header_sp.jpg);
    padding-top: 150%;
  }

  .top .top-text1 {
    top: 4%;
  }

  .top .catch1 {
    font-size: 9.42vw;
  }

  .top .catch2 {
    font-size: 4vw;
  }

  .top img {
    bottom: 4%;
    width: 40%;
    right: 10%;
  }

  .top .top-text2 {
    bottom: 4%;
  }

  .top .catch3 {
    font-size: 4vw;
  }
  
  .top .catch4 {
    font-size: 5.1vw;
  }

  .instagram {
    padding-top: 100%;
  }

  .insta-text {
    top: 15%;
    font-size: 3.5vw;
  }

  .instagram #flexbox {
    overflow-x: scroll;
    top: 24%;
  }

  .insta-post {
    width: 30%;
    flex-shrink: 0;
  }

  .insta-post .content {
    font-size: 2.1vw;
  }

  .cv {
    background-image: url(img/cv_sp.jpg);
    padding-top: 80%;
  }

  .cv .title {
    top: 4%;
  }

  .samplecv {
    top: 20%;
  }

  .cv-text1 {
    top: 20%;
  }

  .cv-text2 {
    top: 60%;
    left: 10%;
    right: auto;
  }
  
  .cv-text2 .price1 {
    font-size: 3.5vw;
  }
  
  .cv-text2 .cource {
    font-size: 3.9vw;
  }
  
  .cv-text3 {
    top: 52.5%;
  }
  
  .cv-text3 .price2 {
    font-size: 15vw;
  }
  
  .cv-text3 .yen-price2 {
    font-size: 7vw;
  }
  
  .cv-text3 .tax-price2 {
    font-size: 2.5vw;
  }
  
  .cv-text4 {
    top: 44%;
    left: 43.5%;
  }
  
  .cv-text4 .cancel1 {
    font-size: 3.7vw;
  }
  
  .cv-text4 .cancel2 {
    font-size: 2.5vw;
  }
  
  .cv-text5 {
    top: 35.5%;
    left: 43.5%;
  }
  
  .cv-text5 .capacity {
    font-size: 3vw;
  }
  
  .button-cv {
    top: 77.5%;
    right: 10%;
    width: 80%;
    letter-spacing: 10px;
    font-size: 4.5vw;
  }

  .empathy {
    background-image: url(img/empathy_sp.jpg);
    padding-top: 82%;
  }

  .empathy ul {
    top: 25%;
    font-size: 3.5vw;
  }
  
  .empathy li {
    letter-spacing: 3px;
    margin-bottom: 7%;
  }
  
  .empathy .check {
    width: 4%;
  }

  .exhibit1 {
    background-image: url(img/exhibit1_sp.jpg);
    padding-top: 110%;
  }

  .exhibit1 .cause {
    font-size: 4.4vw;
  }

  .exhibit1 .exhibit-sample {
    top: 15%;
    width: 80%;
    right: auto;
  }

  .exhibit1 .exhibit-text {
    top: 65%;
    font-size: 3.5vw;
    width: 80%;
  }
  
  .exhibit2 {
    background-image: url(img/exhibit2_sp.jpg);
    padding-top: 110%;
  }

  .exhibit2 .title {
    top: 8%;
  }

  .exhibit2 .cause {
    font-size: 4.4vw;
  }

  .exhibit2 .exhibit-sample {
    top: 18%;
    width: 80%;
  }

  .exhibit2 .exhibit-text {
    top: 68%;
    font-size: 3.5vw;
    width: 80%;
    right: auto;
  }

  .arrow {
    top: 48%;
  }
  
  .img-arrow {
    width: 30%;
  }

  .benefit {
    background-image: url(img/benefit_sp.jpg);
    padding-top: 420%;
  }

  .benefit .point-title {
    font-size: 4.4vw;
  }

  .benefit .title {
    top: 1%;
  }

  .benefit .point-text {
    font-size: 3.5vw;
  }

  .benefit .point1 {
    top: 5.75%;
    width: 80%;
  }

  .point1-img {
    top: 13.5%;
    width: 80%;
  }

  .point1-img .img-describe {
    font-size: 3vw;
  }

  .benefit .point2 {
    top: 29.75%;
    width: 80%;
  }
  
  .point2-img {
    top: 37.5%;
    width: 80%;
  }
  
  .point2-img .img-describe {
    font-size: 3vw;
  }

  .benefit .point3 {
    top: 53.75%;
    width: 80%;
  }
  
  .point3-img {
    top: 60.5%;
    width: 80%;
  }
  
  .point3-img .img-describe {
    font-size: 3vw;
  }

  .benefit .point4 {
    top: 76.75%;
    width: 80%;
  }
  
  .point4-img {
    top: 84.5%;
    width: 80%;
  }
  
  .point4-img .img-describe {
    font-size: 3vw;
  }

  .pc {
    display: none;
  }

  .use {
    background-image: url(img/use_sp.jpg);
    padding-top: 370%;
  }

  .use .title {
    top: 1%;
  }

  .use .step-title {
    font-size: 4.4vw;
    margin-bottom: 58%;
  }
  
  .use .describe {
    font-size: 3.5vw;
    padding-bottom: 7%;
    border-bottom: 0.1vw solid gray;
  }
  
  .use .step-img {
    width: 80%;
  }
  
  .use .step-text {
    width: 80%;
  }

  .use .s1img {
    top: 6.7%;
  }
  
  .use .s1 {
    top: 4%;
  }
  
  .use .s2img {
    top: 26.7%;
  }
  
  .use .s2 {
    top: 24%;
  }
  
  .use .s3img {
    top: 45.2%;
  }
  
  .use .s3 {
    top: 42.5%;
  }
  
  .use .s4img {
    top: 65.2%;
  }
  
  .use .s4 {
    top: 62.5%;
  }
  
  .use .s5img {
    top: 85.2%;
  }
  
  .use .s5 {
    top: 82.5%;
  }

  .s5 .describe {
    padding-bottom: 0;
    border-bottom: 0;
  }

  .qa {
    background-image: url(img/Q&A_sp.jpg);
    padding-top: 272%;
  }

  .qa .title {
    top: 1.5%;
  }

  .qa .object {
    font-size: 3.5vw;
  }

  .q {
    font-size: 6vw;
  }
  
  .a {
    font-size: 6vw;
  }

  .qa1 {
    top: 6%;
  }
  
  .qa2 {
    top: 23.1%;
  }
  
  .qa3 {
    top: 38.25%;
  }
  
  .qa4 {
    top: 55.35%;
  }
  
  .qa5 {
    top: 71.75%;
  }
  
  .qa6 {
    top: 86.9%;
  }

  .form {
    background-image: url(img/form.jpg);
    padding-top: 275%;
  }

  .form .title {
    top: 2%;
  }

  .information-form {
    font-size: 3.5vw;
  }

  .mandatory {
    font-size: 3vw;
  }

  .any {
    font-size: 3vw;
  }

  .form .form-design {
    height: 6.5vw;
    width: 100%;
    margin-top: 1%;
  }

  .information-form {
    top: 8%;
  }

  .customer-information {
    font-size: 4.5vw;
  }

  .form .pay {
    top: 75%;
  }

  .form-margin7 {
    margin-bottom: 10.5vw;
  }

  .pay-form {
    top: 81%;
  }

  .button-form {
    top: 94%;
    height: 3%;
  }

  .input-pay {
    top: 0.55vw;
    width: 3.5vw;
    height: 3.5vw;
  }
  
  .pay-text {
    font-size: 3.5vw;
  }

  footer {
    background-image: url(img/footer.jpg);
    padding-top: 10%;
  }

  .footer-link {
    font-size: 2.8vw;
    top: 10%;
  }
  
  #btn {
    margin-top: 0.5vw;
  }
}

@media (min-width: 1025px) {
  .top {
    background-image: url(img/header.jpg);
    padding-top: 66.7%;
  }

  .top .top-text1 {
    top: 6%;
    right: 10%;
  }

  .top .catch1 {
    font-size: 5vw;
  }

  .top .catch2 {
    font-size: 2vw;
  }

  .top img {
    top: 33.3%;
    right: 15%;
    width: 30%;
  }

  .top .top-text2 {
    right: 10%;
    top: 80%;
  }

  .top .catch3 {
    font-size: 2.5vw;
  }
  
  .top .catch4 {
    font-size: 3.2vw;
  }

  .br-sp {
    display: none;
  }

  .instagram {
    padding-top:60%;
  }

  .insta-text {
    top: 20%;
    font-size: 2.5vw;
  }

  .instagram #flexbox {
    top: 31%;
  }

  .insta-post .content {
    font-size: 1.1vw;
  }

  .cv {
    background-image: url(img/cv.jpg);
    padding-top: 60%;
  }

  .cv .title {
    top: 5%;
  }
  
  .samplecv {
    top: 30%;
  }
  
  .cv-text1 {
    top: 30%;
  }
  
  .cv-text2 {
    top: 50%;
    right: 38.5%;
  }
  
  .cv-text2 .price1 {
    font-size: 2vw;
  }
  
  .cv-text2 .cource {
    font-size: 2.2vw;
  }
  
  .cv-text3 {
    top: 45%;
  }
  
  .cv-text3 .price2 {
    font-size: 8vw;
  }
  
  .cv-text3 .yen-price2 {
    font-size: 4vw;
  }
  
  .cv-text3 .tax-price2 {
    font-size: 2vw;
  }
  
  .cv-text4 {
    top: 80%;
    right: 25%;
  }
  
  .cv-text4 .cancel1 {
    font-size: 3vw;
  }
  
  .cv-text4 .cancel2 {
    font-size: 2.1vw;
  }
  
  .cv-text5 {
    top: 80%;
    left: 14%;
  }
  
  .cv-text5 .capacity {
    font-size: 2.1vw;
  }
  
  .button-cv {
    top: 65.5%;
    width: 46.5%;
    letter-spacing: 7px;
    font-size: 3.6vw;
  }

  .empathy {
    background-image: url(img/empathy.jpg);
    padding-top: 60%;
  }

  .empathy ul {
    top: 33%;
    font-size: 2vw;
  }
  
  .empathy li {
    letter-spacing: 3px;
    margin-bottom: 5%;
  }
  
  .empathy .check {
    width: 3.5%;
  }

  .exhibit1 {
    background-image: url(img/exhibit1.jpg);
    padding-top: 40%;
  }

  .exhibit1 .cause {
    font-size: 3.5vw;
  }

  .exhibit1 .exhibit-sample {
    background-image: url(img/exhibit-sample1.jpg);
    top: 25%;
    width: 30%;
    right: 10%;
  }

  .exhibit1 .exhibit-text {
    top: 25%;
    font-size: 2vw;
    width: 45%;
  }
  
  .exhibit2 {
    background-image: url(img/exhibit2.jpg);
    padding-top: 40%;
  }

  .exhibit2 .title {
    top: 15%;
  }

  .exhibit2 .cause {
    font-size: 3.5vw;
  }

  .exhibit2 .exhibit-sample {
    top: 35%;
    width: 30%;
  }

  .exhibit2 .exhibit-text {
    top: 35%;
    font-size: 2vw;
    width: 45%;
    right:10%;
  }

  .arrow {
    top: 45%;
  }
  
  .img-arrow {
    width: 25%;
  }

  .benefit {
    background-image: url(img/benefit.jpg);
    padding-top: 145%;
  }

  .benefit .point-title {
    font-size: 3.5vw;
  }

  .benefit .title {
    top: 4%;
  } 

  .benefit .point-text {
    font-size: 2vw;
  }

  .benefit .point1 {
    top: 16%;
    width: 43%;
  }

  .point1-img {
    top: 16%;
    width: 31%;
    right: 10%;
  }

  .point1-img .img-describe {
    font-size: 1.75vw;
  }

  .benefit .point2 {
    top: 37%;
    width: 43%;
    right: 10%;
  }
  
  .point2-img {
    top: 37%;
    width: 31%;
  }
  
  .point2-img .img-describe {
    font-size: 1.75vw;
  }

  .benefit .point3 {
    top: 58%;
    width: 43%;
  }
  
  .point3-img {
    top: 58%;
    right: 10%;
    width: 31%;
  }
  
  .point3-img .img-describe {
    font-size: 1.75vw;
  }

  .benefit .point4 {
    top: 79%;
    width: 43%;
    right: 10%;
  }
  
  .point4-img {
    top: 79%;
    width: 31%;
  }
  
  .point4-img .img-describe {
    font-size: 1.75vw;
  }

  .use {
    background-image: url(img/use.jpg);
    padding-top: 140%;
  }

  .use .title {
    top: 4%;
  }

  .use .step-title {
    font-size: 3.5vw;
    letter-spacing: 0.1vw;
    margin-bottom: 11%;
  }
  
  .use .describe {
    font-size: 2vw;
  }
  
  .use .step-img {
    position: absolute;
    width: 35%;
  }
  
  .use .step-text {
    position: absolute;
    right: 10%;
    width: 39.6%;
    padding-left: 5%;
    padding-bottom: 4.2%;
    padding-top: 1%;
    border-left: 0.1vw solid gray;
  }

  .use .s1img {
    top: 13%;
  }
  
  .use .s1 {
    top: 11.9%;
  }
  
  .use .step1-2 {
    top: 27%;
  }
  
  .use .s2img {
    top: 30.5%;
  }
  
  .use .s2 {
    top: 29.4%;
  }
  
  .use .step2-3 {
    top: 44.5%;
  }
  
  .use .s3img {
    top: 48%;
  }
  
  .use .s3 {
    top: 46.9%;
  }
  
  .use .step3-4 {
    top: 62%;
  }
  
  .use .s4img {
    top: 65.5%;
  }
  
  .use .s4 {
    top: 64.4%;
    padding-bottom: 1.228%;
  }
  
  .use .step4-5 {
    top: 79.5%;
  }
  
  .use .s5img {
    top: 83%;
  }
  
  .use .s5 {
    top: 81.9%;
    padding-bottom: 7.172%;
  }

  .qa {
    background-image: url(img/Q&A.jpg);
    padding-top: 165%;
  }

  .qa .title {
    top: 4%;
  }

  .qa .object {
    font-size: 2vw;
  }

  .q {
    font-size: 4vw;
  }
  
  .a {
    font-size: 4vw;
  }

  .qa1 {
    top: 12%;
  }
  
  .qa2 {
    top: 27.7%;
  }
  
  .qa3 {
    top: 41.5%;
  }
  
  .qa4 {
    top: 57.2%;
  }
  
  .qa5 {
    top: 71%;
  }
  
  .qa6 {
    top: 86.7%;
  }

  .form {
    background-image: url(img/form.jpg);
    padding-top: 167%;
  }

  .information-form {
    font-size: 2vw;
  }

  .information-type {
    width: 25%;
  }

  .customer-information {
    font-size: 3vw;
  }

  .form .title {
    top: 3%;
  }

  .form .form-design {
    margin-left: 1vw;
    height: 4.5vw;
    width: 33%;
  }

  .information-form {
    top: 11%;
  }

  .form .input-municipalities {
    width: 65%;
  }
  
  .form .input-apartment {
    width: 65%;
  }
  
  .form .input-email {
    width: 65%;
  }

  .form .pay {
    top: 70%;
  }

  .form-margin7 {
    margin-bottom: 7vw;
  }

  .pay-form {
    top: 77%;
  }

  .button-form {
    top: 91%;
    height: 5%;
  }

  .input-pay {
    top: 0.3vw;
    width: 2vw;
    height: 2vw;
  }
  
  .pay-text {
    font-size: 2vw;
  }

  footer {
    background-image: url(img/footer.jpg);
    padding-top: 5%;
  }

  .footer-link {
    font-size: 1.5vw;
    top: 30%;
  }  
}