@charset "utf-8";

/* CSS Document */
.pc {
  display: none;
}

body {
  width: 100%;
  margin: 0;
  padding: 0;
  font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo UI", Meiryo, "Yu Gothic", "Noto Sans CJK JP", sans-serif;
}

p {
  margin: 0;
  padding: 0;
}

img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

.logo {
  width: 20%;
  margin: 2% auto;
  padding: 0;
  line-height: 0;
  text-align: center;
}

.page-header {
  padding-bottom: 68px;
}

.shake {
  display: block;
  float: left;
  margin: 10px;
  -webkit-transform-origin: bottom center;
     -moz-transform-origin: bottom center;
      -ms-transform-origin: bottom center;
       -o-transform-origin: bottom center;
          transform-origin: bottom center;
  /*Firefox */
  -webkit-animation: swing linear 2s infinite;
     -moz-animation: swing linear 2s infinite;
  /*Chrome Safari*/
      -ms-animation: swing linear 2s infinite;
  /*Internet Explorer*/
       -o-animation: swing linear 2s infinite;
  /*Opera*/
          animation: swing linear 2s infinite;
}

@-moz-keyframes swing {
  0% {
    -moz-transform: rotate(0deg);
  }

  25% {
    -moz-transform: rotate(10deg);
  }

  50% {
    -moz-transform: rotate(0deg);
  }

  75% {
    -moz-transform: rotate(-10deg);
  }

  100% {
    -moz-transform: rotate(0deg);
  }
}

@-webkit-keyframes swing {
  0% {
    -webkit-transform: rotate(0deg);
  }

  25% {
    -webkit-transform: rotate(10deg);
  }

  50% {
    -webkit-transform: rotate(0deg);
  }

  75% {
    -webkit-transform: rotate(-10deg);
  }

  100% {
    -webkit-transform: rotate(0deg);
  }
}

@-o-keyframes swing {
  0% {
    -o-transform: rotate(0deg);
  }

  25% {
    -o-transform: rotate(10deg);
  }

  50% {
    -o-transform: rotate(0deg);
  }

  75% {
    -o-transform: rotate(-10deg);
  }

  100% {
    -o-transform: rotate(0deg);
  }
}

@-ms-keyframes swing {
  0% {
    -ms-transform: rotate(0deg);
  }

  25% {
    -ms-transform: rotate(10deg);
  }

  50% {
    -ms-transform: rotate(0deg);
  }

  75% {
    -ms-transform: rotate(-10deg);
  }

  100% {
    -ms-transform: rotate(0deg);
  }
}

@keyframes swing {
  0% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(10deg);
  }

  50% {
    transform: rotate(0deg);
  }

  75% {
    transform: rotate(-10deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

/* main visual ---------------------------*/
.mv {
  position: relative;
  top: -68px;
}

.wrap-bg {
  width: 100%;
  background-color: #fefada;
}

.wrap-inner {
  max-width: 92vw;
  width: 92vw;
  margin: 0 auto;
}

.page-nav {
  max-width: 85.334vw;
  width: 85.334vw;
  margin: -4.66vw auto 0;
}

.nav01,.nav02,.nav03 {
  padding-bottom: 10px;
}

.text {
  line-height: 1.6;
  font-size: 3.46666667vw;
}

.page-nav li {
  position: relative;
}

.nav03-memberOnly,.nav04-memberOnly {
  max-width: 19.86666667vw;
  width: 19.86666667vw;
  position: absolute;
  top: 2.4vw;
  left: -5.33333333vw;
}


/* contents ---------------------------*/
.contents01,.contents02,.contents03,.contents04 {
  position: relative;
}

.contents01-text,.contents02-text,.contents03-text,.contents04-text {
  position: absolute;
  left: 5.86666667vw;
}

.ribbon {
  max-width: 84vw;
  width: 84vw;
  position: absolute;
  top: -2.93333333vw;
  left: 50%;
  transform: translateX(-50%);
}

.details_box {
  max-width: 66.66666667vw;
  width: 66.66666667vw;
  border-radius: 2.66666667vw;
  text-align: center;
  background-color: #fff0f5;
}


/* contents01 ---------------------------*/
.contents01 {
  margin-top: 2.93333333vw;
  margin-bottom: 8vw;
}

.contents01-text {
  top: 41.33333333vw;
}

.btn-line {
  max-width: 35.73333333vw;
  width: 35.73333333vw;
  position: absolute;
  bottom: 11.2vw;
  left: 50%;
  transform: translateX(-50%);
}



/* contents02 ---------------------------*/
.contents02 {
  margin-bottom: 10.66666667vw;
}

.contents02-text {
  top: 43.6vw;
  letter-spacing: -0.01em;
}

.contents02-text .point_color {
  color: #e70e5e;
  letter-spacing: 0;
}


.btn-follow {
  max-width: 41.6vw;
  width: 41.6vw;
  position: absolute;
  bottom: 11.2vw;
  left: 50%;
  transform: translateX(-50%);
}



/* contents03 ---------------------------*/
.contents03 {
  margin-bottom: 10.93333333vw;
}

.contents03-text {
  top: 40vw;
}

.contents03 .details_box {
  padding: 5.33333333vw 0 4vw;
}

.contents03 .details_box dt {
  width: 40.26666667vw;
  margin: 0 auto 4vw;
}

.contents03-btn {
  max-width: 66.66666667vw;
  width: 66.66666667vw;
  position: absolute;
  bottom: 6.66666667vw;
  left: 50%;
  transform: translateX(-50%);
}

.btn-about {
  width: 100%;
  margin-bottom: 2.66666667vw;
}

.btn-AppStore,.btn-GooglePlay {
  display: block;
  max-width: 52.8vw;
  width: 52.8vw;
  margin-right: auto;
  margin-left: auto;
}

.btn-AppStore {
  margin-bottom: 2.4vw;
}


/* contents04 ---------------------------*/
.contents04-text {
  top: 37.33333333vw;
}

.contents04 .details_box {
  position: absolute;
  top: 48vw;
  left: 50%;
  padding: 5.33333333vw 0 4.53333333vw;
  transform: translateX(-50%);
}

.contents04 .details_box dt {
  margin-bottom: 4.26666667vw;
  font-size: 4vw;
  font-weight: 600;
}

.bg-pink {
  color: #000;
  font-weight: 600;
  background-color: #ffcbdb;
}

.step li {
  padding-bottom: 7.73333333vw;
  line-height: 1.357;
  font-size: 3.73333333vw;
  background-image: url(../img/triangle.png);
  background-repeat: no-repeat;
  background-position: 50% 77%;
  background-size: 4.53333333vw auto;
}

.step li:last-child {
  padding-bottom: 0;
  background-image: none;
}

.contents04-note {
  padding: 1.73333333vw 0 0;
  line-height: 1.76;
  font-size: 3.46666667vw;
  font-weight: 600;
  text-align: right;
}

.contents04-note a {
  color: #e50054;
  text-decoration: underline;
}


/* contents_information ---------------------------*/
.contents_information {
  padding-top: 15.2vw;
  text-align: center;
}

.information-text,.click {
  line-height: 1.769;
  font-size: 3.46666667vw;
}

.click {
  padding-bottom: 3.2vw;
}

.click a {
  border-bottom: 1px solid #e70e5e;
  color: #e70e5e;
}

.btn-sns {
  max-width: 84vw;
  width: 84vw;
  margin: 0 auto;
  padding-bottom: 13.33333333vw;
}


/* パンくず 修正 ---------------------------*/
.static-breadcrumb a {
  display: flex;

  justify-content: center;
  align-items: center;
}