@charset "utf-8";

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

body {
  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%;
  vertical-align: bottom;
}

.logo {
  width: 186px;
  margin: 42px auto 30px;
  padding: 0;
  line-height: 0;
  text-align: center;
}

a:hover {
  opacity: 0.8;
}

/*#main {
    overflow: hidden;
}*/

.sp {
  display: none;
}

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

.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: -40px;
}

.main-visual {
  margin-top: -40px;
}

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

.wrap-inner {
  max-width: 960px;
  width: 100%;
  margin: 0 auto;
}

.page-nav {
  display: flex;
  max-width: 900px;
  width: 93.75%;
  margin: -10.417% auto 0;

  justify-content: space-between;
}

.page-nav li {
  max-width: 210px;
  width: 23.334%;
  position: relative;
}

.nav03-memberOnly,.nav04-memberOnly {
  max-width: 120px;
  width: 57.143%;
  position: absolute;
  top: -20px;
  left: -20px;
}

.text {
  line-height: 1.875;
  font-size: 16px;
}


/* contents ---------------------------*/
.contents {
  max-width: 960px;
}

.contents01,.contents02,.contents03,.contents04 {
  position: relative;
}

.contents01-text,.contents02-text,.contents03-text,.contents04-text {
  position: absolute;
  left: 7.08333333%;
}

.ribbon {
  max-width: 519px;
  width: 54.0625%;
  position: absolute;
  top: -4.01%;
  left: 5.209%;
}

.details_box {
  max-width: 270px;
  width: 100%;
  border-radius: 20px;
  text-align: center;
  background-color: #fff0f5;
}

.details_box dt img {
  width: auto;
}

@media screen and (max-width: 900px) {
  .contents01-text,.contents02-text,.contents03-text,.contents04-text {
    font-size: 14px;
  }
}



/* contents01 ---------------------------*/
.contents01 {
  margin-bottom: 77px;
  padding-top: 7.293%;
}

.contents01-text {
  bottom: 14.424%;
}


.btn-line {
  max-width: 148px;
  width: 15.41666667%;
  position: absolute;
  right: 14.167%;
  bottom: 15.385%;
}



/* contents02 ---------------------------*/
.contents02 {
  margin-bottom: 77px;
}


.contents02-text {
  bottom: 12.05%;
}


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


.btn-follow {
  max-width: 148px;
  width: 15.41666667%;
  position: absolute;
  right: 18.75%;
  bottom: 21.085%;
}



/* contents03 ---------------------------*/
.contents03 {
  margin-bottom: 77px;
}

.contents03-text {
  bottom: 10.756%;
}

.contents03 .details_box {
  padding: 4.45% 0 7.41%;
}

.contents03 .details_box dt {
  margin-bottom: 5.556%;
}

.contents03-btn {
  max-width: 270px;
  width: 28.125%;
  position: absolute;
  top: 12.1%;
  right: 7.813%;
}

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

.btn-AppStore,.btn-GooglePlay {
  display: block;
  max-width: 206px;
  width: 76.2962963%;
  margin-right: auto;
  margin-left: auto;
}

.btn-AppStore {
  margin-bottom: 3.704%;
}


/* contents04 ---------------------------*/


.contents04-text {
  bottom: 37.094%;
}

.contents04 .details_box {
  position: absolute;
  top: 13.064%;
  right: 7.813%;
  padding: 2.084% 0 1.564%;
}

.contents04 .details_box dt {
  margin-bottom: 5.19%;
  font-size: 16px;
  font-weight: 600;
}

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

.step li {
  padding-bottom: 8.89%;
  line-height: 1.6;
  font-size: 15px;
  background-image: url(../img/triangle.png);
  background-repeat: no-repeat;
  background-position: 50% 77%;
  background-size: 18px auto;
}

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

@media screen and (max-width: 900px) {
  .step li {
    font-size: 13px;
  }
}

.contents04-note {
  padding: 13px 30px 0;
  font-size: 16px;
  font-weight: 600;
  text-align: right;
}

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

.contents04-note a:hover {
  text-decoration: none;
}


/* contents_information ---------------------------*/
.contents_information {
  padding-top: 56px;
  text-align: center;
}

.information-text,.click {
  line-height: 1.88;
  font-size: 18px;
}

.click {
  padding-bottom: 37px;
}

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

.btn-sns {
  max-width: 630px;
  width: 65.625%;
  margin: 0 auto;
  padding-bottom: 100px;
}

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

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