@charset "UTF-8";
body {
  background-color: #f1eed3;
}

main {
  overflow-x: hidden;
}

.inner {
  max-width: 620px;
  margin: 0 auto;
}

img {
  width: 100%;
}

.sect1-btn {
  display: inline-block;
  max-width: 40%;
  position: relative;
}
@media screen and (min-width: 700px) {
  .sect1-btn {
    max-width: 310px;
  }
}

.sect5-btn {
  position: relative;
}

.base-box {
  width: 100%;
  display: inline-block;
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}

.text-box {
  width: 100%;
  position: absolute;
  top: -5px;
  left: -5px;
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}

.sect1-btn:active .black-box,
.sect5-btn:active .black-box {
  -webkit-transform: translate(5px, 5px);
          transform: translate(5px, 5px); /* 黒い四角を少し押し込む */
}

/* ボタンがクリックされたときのアニメーション */
.swiper_container {
  width: 90%;
}

.sect1 {
  position: relative;
  margin: 0 auto;
}

.sect1__deco {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* 飾りでクリックを邪魔しない */
}
.sect1__deco img {
  position: absolute;
  z-index: 2;
}
.sect1__deco .lt {
  width: 40%;
  top: 0;
  left: 0;
}
@media screen and (min-width: 700px) {
  .sect1__deco .lt {
    max-width: 240px;
    left: calc(50% - 200px);
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
}
.sect1__deco .rt1 {
  width: 14%;
  top: 2%;
  right: 25%;
  -webkit-animation: sway1 1s ease-in-out infinite alternate;
          animation: sway1 1s ease-in-out infinite alternate;
}
@media screen and (min-width: 700px) {
  .sect1__deco .rt1 {
    max-width: 100px;
    right: 0;
    left: calc(50% + 60px);
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
}
@-webkit-keyframes sway1 {
  0% {
    -webkit-transform: translateX(-2px) rotate(-6deg);
            transform: translateX(-2px) rotate(-6deg);
  }
  100% {
    -webkit-transform: translateX(2px) rotate(6deg);
            transform: translateX(2px) rotate(6deg);
  }
}
@keyframes sway1 {
  0% {
    -webkit-transform: translateX(-2px) rotate(-6deg);
            transform: translateX(-2px) rotate(-6deg);
  }
  100% {
    -webkit-transform: translateX(2px) rotate(6deg);
            transform: translateX(2px) rotate(6deg);
  }
}
.sect1__deco .rt2 {
  width: 24%;
  top: 0;
  right: 1%;
  -webkit-animation: sway2 1s ease-in-out infinite alternate;
          animation: sway2 1s ease-in-out infinite alternate;
  -webkit-animation-delay: 1.2s;
          animation-delay: 1.2s;
}
@media screen and (min-width: 700px) {
  .sect1__deco .rt2 {
    max-width: 150px;
    right: 0;
    left: calc(50% + 160px);
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
}
@-webkit-keyframes sway2 {
  0% {
    -webkit-transform: translateX(-5px) rotate(-6deg);
            transform: translateX(-5px) rotate(-6deg);
  }
  100% {
    -webkit-transform: translateX(5px) rotate(6deg);
            transform: translateX(5px) rotate(6deg);
  }
}
@keyframes sway2 {
  0% {
    -webkit-transform: translateX(-5px) rotate(-6deg);
            transform: translateX(-5px) rotate(-6deg);
  }
  100% {
    -webkit-transform: translateX(5px) rotate(6deg);
            transform: translateX(5px) rotate(6deg);
  }
}
.sect1__deco .lb {
  width: 27%;
  top: 58%;
  left: -2%;
  -webkit-animation: spin 3s linear infinite;
          animation: spin 3s linear infinite;
}
@media screen and (min-width: 700px) {
  .sect1__deco .lb {
    max-width: 170px;
    left: calc(50% - 320px);
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
}
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
.sect1__deco .rb {
  width: 42%;
  top: 49%;
  right: -2%;
}
@media screen and (min-width: 700px) {
  .sect1__deco .rb {
    max-width: 270px;
    right: 0;
    left: calc(50% + 200px);
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
}

.sect1__photo {
  position: absolute;
  top: 6%;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 100%;
  max-width: 620px;
  height: 55%;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.sect1__photo img {
  height: 100%;
  width: auto;
  -o-object-fit: cover;
     object-fit: cover;
}

.sect1__btn {
  width: 100%;
  padding-top: 20px;
  padding-bottom: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.sect2 {
  margin: 0 auto 70px;
  padding-inline: 10px;
  position: relative;
}
@media screen and (min-width: 700px) {
  .sect2 {
    margin-bottom: 100px;
  }
}

.sect2__deco {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.sect2__deco img {
  position: absolute;
  width: 12%;
  max-width: 80px;
  left: 6%;
  -webkit-animation: floatLeftRight 2s ease-in-out infinite;
          animation: floatLeftRight 2s ease-in-out infinite;
}
@media screen and (min-width: 700px) {
  .sect2__deco img {
    left: calc(50% - 280px);
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
}
.sect2__deco .deco1 {
  top: 10%;
}
.sect2__deco .deco2 {
  top: 36%;
}
.sect2__deco .deco3 {
  top: 60%;
}

.sect2-bottomdeco {
  position: absolute;
  width: 32%;
  max-width: 225px;
  right: 2%;
  bottom: -16%;
}
@media screen and (min-width: 700px) {
  .sect2-bottomdeco {
    right: 0;
    left: calc(50% + 200px);
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    bottom: -19%;
  }
}

@-webkit-keyframes floatLeftRight {
  0% {
    -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg);
  }
  50% {
    -webkit-transform: rotate(5deg);
            transform: rotate(5deg);
  }
  100% {
    -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg);
  }
}

@keyframes floatLeftRight {
  0% {
    -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg);
  }
  50% {
    -webkit-transform: rotate(5deg);
            transform: rotate(5deg);
  }
  100% {
    -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg);
  }
}
.sect3 {
  position: relative;
  margin: 0 auto;
  padding-inline: 10px;
  max-width: 750px;
  margin-bottom: 20px;
}
.sect3 video {
  width: 88%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: 2;
  overflow: hidden;
}
@media screen and (min-width: 700px) {
  .sect3 video {
    width: 680px;
  }
}

.sect4 {
  position: relative;
  margin: 0 auto;
  padding-inline: 10px;
  max-width: 750px;
  background-position: 20px;
  padding-top: 50px;
  padding-bottom: 60px;
}

.sect4__slider {
  width: 88%;
  height: 56vw;
  position: absolute;
  top: 67px;
  left: 54%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  overflow: hidden;
}
@media screen and (min-width: 700px) {
  .sect4__slider {
    width: 630px;
    height: 433px;
    top: 80px;
  }
}
.sect4__slider img {
  display: block;
  width: 100%;
  height: auto;
}

.sect4__swiper {
  width: 100%;
  height: 100%;
}

.sect4__slide {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.sect4__slide img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.sect4-pagination {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 15px;
}
@media screen and (min-width: 700px) {
  .sect4-pagination {
    gap: 25px;
  }
}
.sect4-pagination .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
}
@media screen and (min-width: 700px) {
  .sect4-pagination .swiper-pagination-bullet {
    width: 15px;
    height: 15px;
  }
}
.sect4-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: #00a0e9;
}

.sect5 {
  position: relative;
  padding-top: 60vw;
}
@media screen and (min-width: 700px) {
  .sect5 {
    padding-top: 400px;
  }
}
.sect5 .deco1 {
  position: absolute;
  width: 30%;
  max-width: 200px;
  top: 30vw;
  left: 0.5rem;
}
@media screen and (min-width: 700px) {
  .sect5 .deco1 {
    top: 11rem;
    left: calc(50% - 12rem);
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
}
.sect5 .deco2 {
  position: absolute;
  width: 20%;
  max-width: 140px;
  top: 50vw;
  left: calc(50% - 2rem);
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
@media screen and (min-width: 700px) {
  .sect5 .deco2 {
    top: 19rem;
  }
}
.sect5 .deco3 {
  position: absolute;
  width: 10%;
  max-width: 70px;
  top: 45vw;
  right: 1rem;
}
@media screen and (min-width: 700px) {
  .sect5 .deco3 {
    top: 19rem;
    right: calc(50% - 20rem);
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
}

.deco_rainbow {
  position: absolute;
  top: 0;
  width: 140%;
  left: 70%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
@media screen and (min-width: 700px) {
  .deco_rainbow {
    left: 50%;
    max-width: 800px;
  }
}

.sect5__contents {
  margin-top: 15%;
}
@media screen and (min-width: 700px) {
  .sect5__contents {
    margin-top: 60px;
  }
}

.sect5__content {
  position: relative;
  padding-bottom: 20%;
}
@media screen and (min-width: 700px) {
  .sect5__content {
    padding-bottom: 100px;
  }
}

.day1 {
  background-color: #ffeea7;
}
.day1 .sect5_deco1 {
  position: absolute;
  top: -3%;
  right: 14%;
  width: 10%;
}
@media screen and (min-width: 700px) {
  .day1 .sect5_deco1 {
    width: 70px;
    right: 0;
    left: calc(50% + 240px);
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
}
.day1 .sect5__deco2 {
  position: absolute;
  width: 35%;
  height: auto;
  left: 0;
  top: 55%;
  z-index: 10;
}
@media screen and (min-width: 700px) {
  .day1 .sect5__deco2 {
    max-width: 200px;
    left: calc(50% - 240px);
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    top: 550px;
  }
}

.day2 {
  background-color: #ffdaa7;
}
.day2 .sect5_deco1 {
  position: absolute;
  top: -3%;
  right: 14%;
  width: 14%;
}
@media screen and (min-width: 700px) {
  .day2 .sect5_deco1 {
    width: 90px;
    right: 0;
    left: calc(50% + 200px);
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
}
.day2 .sect5__deco2 {
  position: absolute;
  width: 35%;
  height: auto;
  left: 0;
  top: 55%;
  z-index: 10;
}
@media screen and (min-width: 700px) {
  .day2 .sect5__deco2 {
    max-width: 200px;
    left: calc(50% - 240px);
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    top: 550px;
  }
}

.day3 {
  background-color: #dfffa7;
}
.day3 .sect5_deco1 {
  position: absolute;
  top: -3%;
  right: 8%;
  width: 20%;
}
@media screen and (min-width: 700px) {
  .day3 .sect5_deco1 {
    width: 140px;
    right: 0;
    left: calc(50% + 220px);
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
}
.day3 .sect5__deco2 {
  position: absolute;
  width: 35%;
  height: auto;
  left: 0;
  top: 53%;
  z-index: 10;
}
@media screen and (min-width: 700px) {
  .day3 .sect5__deco2 {
    max-width: 200px;
    left: calc(50% - 240px);
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    top: 530px;
  }
}
.day3 .sect5__photo {
  top: 28%;
}
.day3 .sect5-btn {
  top: 66%;
}
@media screen and (min-width: 700px) {
  .day3 .sect5-btn {
    top: 646px;
  }
}

.deco_wave {
  position: absolute;
  top: -10%;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 100%;
}
@media screen and (min-width: 700px) {
  .deco_wave {
    height: 85px;
    top: -80px;
  }
}
.deco_wave img {
  height: 100%;
}

.deco_wave.orange {
  position: absolute;
  top: 90%;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 100%;
}
@media screen and (min-width: 700px) {
  .deco_wave.orange {
    height: 85px;
    top: 92%;
  }
}
.deco_wave.orange img {
  height: 100%;
}

.sect5__photo {
  position: absolute;
  width: 95%;
  height: auto;
  top: 26%;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  max-width: 620px;
}
.sect5__photo img {
  border-radius: 40px;
}

.sect5-btn {
  position: absolute;
  width: 40%;
  right: 5%;
  top: 62%;
}
@media screen and (min-width: 700px) {
  .sect5-btn {
    max-width: 260px;
    left: calc(50% + 160px);
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    top: 646px;
  }
}

.sect6 {
  background-color: #f3e3d7;
  position: relative;
  padding-top: 20px;
  padding-bottom: 100px;
}
@media screen and (min-width: 700px) {
  .sect6 {
    padding-bottom: 140px;
  }
}

.step1 {
  position: relative;
}
.step1 .deco1 {
  position: absolute;
  width: 30%;
  top: 0;
  left: 1%;
  max-width: 180px;
  z-index: 2;
}
@media screen and (min-width: 700px) {
  .step1 .deco1 {
    left: calc(50% - 220px);
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
}
.step1 .deco2 {
  position: absolute;
  width: 30%;
  bottom: -4%;
  right: 3%;
  max-width: 180px;
  z-index: 2;
}
@media screen and (min-width: 700px) {
  .step1 .deco2 {
    right: 0;
    left: calc(50% + 200px);
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
}
.step1 .sect6-photo1 {
  top: 5%;
  height: 70%;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.step1 .sect6-photo1 img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.step2 {
  position: relative;
}
.step2 .deco3 {
  position: absolute;
  width: 32%;
  top: 4%;
  left: 2%;
  max-width: 180px;
  z-index: 2;
}
@media screen and (min-width: 700px) {
  .step2 .deco3 {
    left: calc(50% - 220px);
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
}
.step2 .deco4 {
  position: absolute;
  width: 33%;
  bottom: 24%;
  right: 1%;
  max-width: 200px;
  z-index: 2;
}
@media screen and (min-width: 700px) {
  .step2 .deco4 {
    right: 0;
    left: calc(50% + 200px);
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
}
.step2 .sect6-photo2 {
  top: 15%;
  height: 51%;
}

.step3 {
  position: relative;
}
.step3 .deco5 {
  position: absolute;
  z-index: 2;
  width: 42%;
  top: 3%;
  left: 0;
  max-width: 250px;
}
@media screen and (min-width: 700px) {
  .step3 .deco5 {
    left: calc(50% - 220px);
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
}
.step3 .deco6 {
  position: absolute;
  z-index: 2;
  width: 57%;
  bottom: 25%;
  right: 0;
  max-width: 300px;
}
@media screen and (min-width: 700px) {
  .step3 .deco6 {
    right: 0;
    left: calc(50% + 170px);
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    max-width: 400px;
  }
}
.step3 .sect6-photo3 {
  top: 15%;
  height: 43%;
}

.sect6-photo1,
.sect6-photo2,
.sect6-photo3 {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 90%;
  overflow: hidden;
  max-width: 560px;
}
@media screen and (min-width: 700px) {
  .sect6-photo1,
  .sect6-photo2,
  .sect6-photo3 {
    height: 530px;
  }
}

.sect7 {
  background-color: #eed4e6;
  position: relative;
  padding-top: 25%;
  padding-bottom: 10%;
}
@media screen and (min-width: 700px) {
  .sect7 {
    padding-top: 150px;
    padding-bottom: 100px;
  }
}

.sect7_title {
  position: absolute;
  top: -5rem;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 100%;
  max-width: 620px;
}
@media screen and (min-width: 700px) {
  .sect7_title {
    top: -8rem;
  }
}

.sect7__slider {
  margin: 0 auto;
  width: 90%;
  overflow: hidden;
  position: relative;
}

.sect7__prev,
.sect7__next {
  width: 25px;
  height: 25px;
  top: calc(50% - 1rem);
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
@media screen and (min-width: 700px) {
  .sect7__prev,
  .sect7__next {
    width: 40px;
    height: 40px;
    top: calc(50% - 3rem);
  }
}
.sect7__prev::after,
.sect7__next::after {
  display: none;
}

.sect7__prev {
  background: url(../img/prev-icon.webp) no-repeat center center/contain;
  left: 0;
}

.sect7__next {
  background: url(../img/next-icon.webp) no-repeat center center/contain;
  right: 0;
}

.sect8 {
  padding-top: 15%;
  margin: 0 auto;
  position: relative;
}
@media screen and (min-width: 700px) {
  .sect8 {
    padding-top: 80px;
  }
}
.sect8 .deco1 {
  width: 13%;
  max-width: 90px;
  position: absolute;
  top: -40px;
  left: 10%;
  z-index: 2;
}
@media screen and (min-width: 700px) {
  .sect8 .deco1 {
    top: -60px;
    left: calc(50% - 200px);
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
}
.sect8 .deco2 {
  position: absolute;
  width: 23%;
  max-width: 150px;
  top: -30px;
  left: 70%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  z-index: 2;
}
@media screen and (min-width: 700px) {
  .sect8 .deco2 {
    top: -30px;
    left: calc(50% + 140px);
  }
}
.sect8 .deco3 {
  position: absolute;
  width: 11%;
  max-width: 68px;
  top: -30px;
  right: 5%;
}
@media screen and (min-width: 700px) {
  .sect8 .deco3 {
    right: 0;
    left: calc(50% + 260px);
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
}

.sect8__head {
  position: relative;
}
.sect8__head .deco4 {
  position: absolute;
  width: 10%;
  max-width: 62px;
  right: 5%;
  top: 0;
}
@media screen and (min-width: 700px) {
  .sect8__head .deco4 {
    right: 0;
    left: calc(50% + 250px);
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    top: 10px;
  }
}

.faq-li {
  margin: 0 auto;
  width: 98%;
}
.faq-li.is-open .faq-q::after {
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}

.faq-q {
  width: 100%;
  padding-bottom: 2px;
  position: relative;
}
.faq-q::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 14px;
  width: 10px;
  height: 10px;
  background: url(../img/qa-arrow.webp) no-repeat center center/contain;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
  margin-top: 3px;
}
@media screen and (min-width: 700px) {
  .faq-q::after {
    width: 15px;
    height: 15px;
    top: 55%;
  }
}

.faq-a {
  display: none;
}

footer {
  text-align: center;
  margin-inline: auto;
  margin-bottom: 100px;
  background-color: #b6d6c0;
  position: relative;
}
footer img {
  display: inline-block;
  max-width: 650px;
}
footer .footer_deco {
  position: absolute;
  top: -2px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
@media screen and (min-width: 700px) {
  footer .footer_deco {
    height: 20px;
  }
}

.btn__fixed {
  position: fixed;
  bottom: 0px;
  width: 100%;
  height: 100px;
  z-index: 10;
  background-color: #f097b8;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.btn-fixed {
  z-index: 20;
  display: inline-block;
  max-width: 300px;
  -webkit-animation: float 2.5s ease-in-out infinite;
          animation: float 2.5s ease-in-out infinite;
  margin-left: 10px;
}
@media screen and (min-width: 700px) {
  .btn-fixed {
    max-width: 25%;
  }
}
@-webkit-keyframes float {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(-10px);
            transform: translateY(-10px); /* 上にふわっと */
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@keyframes float {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(-10px);
            transform: translateY(-10px); /* 上にふわっと */
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}