@charset "utf-8";

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html {
  font-size: 100%;
  scroll-behavior: smooth;
}

/* 余白削除 */
body {
  padding: 0;
  margin: 0;
}

a {
  text-decoration: none;
}

img {
  max-width: 100%;
}

li {
  list-style: none;
}

/* fv */
#outer-fv {
  position: relative;
  z-index: 2;
}

.fv-bg {
  max-width: 1920px;
  height: 1300px;
  width: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
}

.inner-wrap {
  position: relative;
  overflow: hidden;
  z-index: 2;
}

.wd1000 {
  max-width: 1000px;
  margin: 0 auto;
}

.fv {
  position: relative;
  margin-bottom: 18%;
}

.top1 {
  width: 96%;
  margin: 4% auto;
}

.top2 {
  width: 65%;
  position: absolute;
  top: 12.5%;
  left: 50%;
  transform: translateX(-50%);
}

.top3 {
  width: 75%;
  position: absolute;
  top: 28%;
  left: 50%;
  transform: translateX(-50%);
}

.top4 {
  width: 100%;
  position: absolute;
  bottom: 3%;
  left: 50%;
  transform: translateX(-50%);
  padding-left: 5%;
}

.top5 {
  width: 100%;
  position: absolute;
  bottom: -11%;
  left: 50%;
  transform: translateX(-50%);
}

/* fadeDown */
.fadeDown {
  opacity: 0;
  transform: translate(-50%, -100px)
}

.fadeDown.is-plus {
  opacity: 1;
  transition-duration: 0.8s;
  transform: translate(-50%, 0);
}

/* fadeUp1,2 */
.fadeUp1 {
  opacity: 0;
  transform: translate(-50%, 100px)
}

.fadeUp1.is-plus {
  opacity: 1;
  transition-duration: 0.8s;
  transform: translate(-50%, 0);
}

.fadeUp2 {
  opacity: 0;
  transform: translate(-50%, 100px)
}

.fadeUp2.is-plus {
  opacity: 1;
  transition-duration: 0.8s;
  transform: translate(-50%, 0);
}

/* pagetop */
.page-top {
  width: 80px;
  position: fixed;
  right: 10px;
  bottom: 20px;
  z-index: 1;
}

/* sec01 */
#outer-sec01 {
  position: relative;
  background-color: #d8ebf8;
}

.inner-sec01 {
  background-color: #fff;
  padding: 8% 0 10%;
}

/* CTA */
.cta-wrap {
  background-color: #56b0ef;
}

.cta-wrap > div {
  width: 95%;
  margin: 0 auto;
  padding: 3% 0;
}

.btn-start {
  position: relative;
}

.btn-start:hover {
  top: 3%; 
  opacity: 0.9;
}

.wave {
  animation-name: wave;
  animation-duration: 2s;
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
}

@keyframes wave {
  0%, 40%, 60%, 80% {
    transform: scale(1.0);
  }
  50%, 70% {
    transform: scale(0.95);
  }
}

.sec01-1 {
  width: 100%;
  margin: 5% auto;
}

.sec01-2 {
  width: 100%;
  margin: 8% auto 5%;
}

.sec01-3 {
  width: 95%;
  margin: 5% auto;
}

/* sec02 */
#outer-sec02 {
  position: relative;
  background-color: #d8ebf8;
}

.inner-sec02 {
  background-color: #fff;
  padding-top: 3%;
}

.sec02-1 {
  max-height: 2101px;
}

/* sec03 */
#outer-sec03 {
  position: relative;
  background-color: #d8ebf8;
}

.inner-sec03 {
  background-color: #fff;
  padding-top: 5%;
  padding-bottom: 5%;
}

.sec03-2 {
  width: 95%;
  margin: 5% auto 0;
}

.sec03-3 {
  width: 89%;
  margin: 5% auto 0;
}

/* sec04 */
#outer-sec04 {
  position: relative;
  background-color: #d8ebf8;
}

.inner-sec04 {
  background-color: #fff;
  padding-top: 5%;
  padding-bottom: 5%;
}

.sec04-1 {
  width: 90%;
  margin: 0 auto;
}

.sec04-2 {
  width: 100%;
  margin: 3% auto 0;
}

/* sec05 */
#outer-sec05 {
  position: relative;
  background-color: #d8ebf8;
}

.inner-sec05 {
  background-color: #fff;
  padding-bottom: 0;
}

.sec05-2 {
  width: 100%;
  margin: 0 auto;
}

.sec05-3 {
  width: 100%;
  max-height: 290px;
}

.sec05-4 {
  width: 100%;
  margin: 0 auto;
}

@media screen and (max-width: 767px) {
  .fv-bg {
    height: 60vh;
  }

  .top5 {
    width: 90%;
  }

  .page-top {
    width: 40px;
    bottom: 10px;
  }

  .inner-sec01 {
    background-color: #fff;
    padding: 10% 0;
  }

  .inner-sec03 {
    background-color: #fff;
  }

  .inner-sec04 {
    background-color: #fff;
  }

  .inner-sec05 {
    background-color: #fff;
  }
}

@media screen and (max-width: 375px) {
  .fv-bg {
    height: 75vh;
  }
}