@charset "UTF-8";

/*-------------------------------------------
common
-------------------------------------------*/
html {
  font-size: 62.5%;
  overflow: auto;
}

body {
  font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3",
    "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝",
    "ＭＳ 明朝", serif;
  font-size: 1.6rem;
  line-height: 2.3;
  overflow: hidden;
  background-size: auto auto;
  background-color: rgba(255, 255, 255, 1);
  background-image: repeating-linear-gradient(
    135deg,
    transparent,
    transparent 3px,
    rgba(248, 200, 255, 0.21) 3px,
    rgba(248, 200, 255, 0.21) 6px
  );
}

a {
  text-decoration: none;
  color: inherit;
}

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

li {
  display: inline-block;
}

li:not(:first-child)::before {
  content: "｜";
}

.sp {
  display: inline-block;
}

.button {
  position: fixed;
  z-index: 999;
  margin: 0 auto;
  right: 0;
  left: 0;
  bottom: 1%;
  padding: 0 3%;
  animation: btn_icon 2s ease infinite;
}

.sec-title-block {
  text-align: left;
}

.sec-title {
  width: 70%;
  margin-bottom: 8%;
}

.sec1-title {
  margin-top: 10%;
}

.logo {
  width: 7%;
  position: absolute;
  top: 3%;
  left: 2%;
}

/*-------------------------------------------
animation
-------------------------------------------*/

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

@keyframes btn_icon {
  0% {
    transform: translateY(5px);
  }
  20% {
    transform: translateY(-15px);
  }
  40% {
    transform: translateY(5px);
  }
  60% {
    transform: translateY(-15px);
  }
  80% {
    transform: translateY(5px);
  }
  100% {
    transform: translateY(5px);
  }
}

@keyframes bikubiku {
  0% {
    transform: translate(0px, 4px);
  }
  5% {
    transform: translate(0px, -1px);
  }
  10% {
    transform: translate(0px, 2px);
  }
  15% {
    transform: translate(0px, -1px);
  }
  20% {
    transform: translate(0px, 4px);
  }
  25% {
    transform: translate(0px, -1px);
  }
  30% {
    transform: translate(0px, 0px);
  }
}

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

@keyframes floating-y {
  0% {
    transform: translateY(-5%);
  }
  100% {
    transform: translateY(5%);
  }
}

/* アニメーション設定 */
.scr-target {
  /* アニメーション開始から終了までの所要時間 */
  animation-duration: 0.8s;
  /* アニメーションが開始するまでの遅延時間 */
  animation-delay: 0.2s;
  /* アニメーションのループ回数 - infiniteで無限ループ */
  animation-iteration-count: 1;
  /* キーフレームアニメーションで指定したプロパティをアニメーション開始前、終了後に適用するかどうか */
  animation-fill-mode: both;
}
.scr-target[class*="fadeIn"],
.scr-target[class*="zoom"] {
  opacity: 0;
}

/* フェードイン */
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
.anime__fadeIn.is-active {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

/* フェードイン(上から) */
@-webkit-keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.anime__fadeInDown.is-active {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}

/* フェードイン(下から) */
@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 30%, 0);
    transform: translate3d(0, 30%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 30%, 0);
    transform: translate3d(0, 30%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.anime__fadeInUp.is-active {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

/* フェードイン(左から) */
@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.anime__fadeInLeft.is-active {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}

/* フェードイン(右から) */
@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.anime__fadeInRight.is-active {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}

/* ズームイン */
@-webkit-keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  100% {
    opacity: 1;
  }
}
@keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  100% {
    opacity: 1;
  }
}
.anime__zoomIn.is-active {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
}

/* ズームアウト */
@-webkit-keyframes zoomOut {
  from {
    opacity: 0;
    -webkit-transform: scale3d(1.6, 1.6, 1.6);
    transform: scale3d(1.6, 1.6, 1.6);
  }
  100% {
    opacity: 1;
  }
}
@keyframes zoomOut {
  from {
    opacity: 0;
    -webkit-transform: scale3d(1.6, 1.6, 1.6);
    transform: scale3d(1.6, 1.6, 1.6);
  }
  100% {
    opacity: 1;
  }
}
.anime__zoomOut.is-active {
  -webkit-animation-name: zoomOut;
  animation-name: zoomOut;
}

/*-------------------------------------------
FV
-------------------------------------------*/
.fv-wrapper {
  width: 100%;
  max-width: 768px;
  margin: 0 auto;
  position: relative;
}

.fv-video {
  width: 100%;
  height: 133.3333333333vw;
  max-height: calc(768px * 1.3333333333);
}

.iphone {
  position: absolute;
  top: 2%;
  left: 8%;
  width: 70%;
}

.fv-logo {
  width: 30%;
  margin-top: 1%;
  position: absolute;
  z-index: 1;
  right: 0;
}

.fv-deco {
  animation: rotate 1.8s ease-in-out infinite alternate-reverse;
  width: 33%;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
}

.text1 {
  width: 18%;
  position: absolute;
  z-index: 1;
  top: 10%;
  right: 6%;
}

.text2 {
  animation: floating-y 1.8s ease-in-out infinite alternate-reverse;
  width: 93%;
  position: absolute;
  z-index: 1;
  left: 3%;
  bottom: 30px;
  mix-blend-mode: hard-light;
}

/*-------------------------------------------
section1 チャットピアって？
-------------------------------------------*/
.sec1-wrapper {
  width: 100%;
  max-width: 768px;
  margin: 0 auto;
  text-align: center;
}

.sec1-img1 {
  width: 85%;
  margin: 0 0 5%;
}

.sec1-text {
  color: #232323;
  font-size: 3rem;
  font-weight: 500;
}

.sec1-text-emphasis {
  color: #9a0074;
  font-weight: 800;
}

.cost {
  padding: 0 5%;
  margin: 5% 0;
}

/*-------------------------------------------
section2 こんな女性がいます
-------------------------------------------*/
.sec2-wrapper {
  width: 100%;
  max-width: 768px;
  margin: 0 auto 8%;
  text-align: center;
}

.sec2-bg {
  position: relative;
}

.sec-title-block2 {
  position: absolute;
  top: 3%;
}

.sec2-bg video {
  width: 100%;
}

.woman1 {
  position: absolute;
  z-index: 3;
  top: 15%;
  left: 18%;
  width: 65%;
}

.btn {
  animation: poyopoyo 2s ease-out infinite;
  position: absolute;
  z-index: 4;
  top: 54%;
  left: 25%;
  width: 50%;
}

.womans {
  position: absolute;
  z-index: 1;
  top: 17%;
  left: 0%;
  width: 100%;
}

.sec2-text {
  position: absolute;
  bottom: 8%;
  color: #ffffff;
  font-size: 3rem;
}

/*-------------------------------------------
section3 ご利用までの流れ
-------------------------------------------*/
.sec3-wrapper {
  width: 100%;
  max-width: 768px;
  margin: 0 auto;
  text-align: center;
}

.step-contents {
  padding: 0 5% 10%;
}

.step {
  margin-bottom: 10%;
}

.step5 {
  position: relative;
}

.sec3-iphone {
  position: absolute;
  width: 75%;
  left: 12%;
  bottom: 0;
  z-index: 4;
}

.sec3-video {
  position: absolute;
  width: 67%;
  left: 16%;
  bottom: 0.3%;
}

/*-------------------------------------------
section4 安心・安全への取り組み
-------------------------------------------*/
.sec4-wrapper {
  width: 100%;
  max-width: 768px;
  margin: 0 auto;
  text-align: center;
}

.sec4-contents {
  padding: 0 5% 0;
}

.sec4-contents dl {
  margin-bottom: 10%;
  position: relative;
  display: inline-block;
}

.sec4-sub-title {
  margin-bottom: 3%;
}

.sec4-img-title {
  width: 50%;
}

.sec4-column-img {
  width: 100%;
  margin-right: 5%;
  display: flex;
  flex-direction: row;
}

.sec4-column-text {
  width: 280%;
  color: #232323;
  font-size: 2.3rem;
  text-align: left;
}

.sec4-text-emphasis {
  color: #9a0074;
}

.sec4-column {
  display: flex;
  align-items: center;
  line-height: 1.9;
}

/*-------------------------------------------
section5 実際のお客様の声
-------------------------------------------*/
.sec5-wrapper {
  width: 100%;
  max-width: 768px;
  margin: 0 auto;
}

.review {
  margin-bottom: 7%;
}

.review-block {
  padding: 0 5%;
}

.sec5-man {
  width: 50%;
  margin: 0 0 3% 5%;
}

.sec5-review {
  animation: bikubiku 3s cubic-bezier(0.85, 0.005, 0.25, 1) infinite;
  width: 100%;
}

/*-------------------------------------------
section6 無料ポイントプレゼント
-------------------------------------------*/
.sec6-wrapper {
  width: 100%;
  max-width: 768px;
  margin: 0 auto;
  text-align: center;
}

.sec6-contents {
  position: relative;
}

.sec6-img1 {
  padding: 5% 5%;
}

.sec6-img2-container {
  animation: poyopoyo 2s ease-out infinite;
  opacity: 1;
  position: absolute;
  width: 25%;
  top: 30%;
  left: 62%;
}

/*-------------------------------------------
footer
-------------------------------------------*/
.footer-wrapper {
  width: 100%;
  margin: 0 auto;
  text-align: center;
  background-color: #c586b8;
  color: #ffffff;
  line-height: 1.6;
  padding: 3% 5% 20%;
}

.footer-contents {
  font-size: 2.5rem;
  margin-bottom: 3%;
}

.footer-column {
  display: flex;
  justify-content: center;
}

/*-------------------------------------------


ここからresponive


-------------------------------------------*/

/*-------------------------------------------
section1 チャットピアって？
-------------------------------------------*/
@media screen and (max-width: 768px) {
  .sec1-text {
    font-size: 3.7vw;
  }
}

/*-------------------------------------------
section2 こんな女性がいます
-------------------------------------------*/
@media screen and (max-width: 768px) {
  .sec2-text {
    font-size: 4vw;
  }
}

/*-------------------------------------------
section4 安心・安全への取り組み
-------------------------------------------*/
@media screen and (max-width: 768px) {
  .sec4-column-text {
    font-size: 2.6vw;
  }
}

/*-------------------------------------------
footer
-------------------------------------------*/
@media screen and (max-width: 768px) {
  .footer-contents {
    font-size: 3.8vw;
  }
  .footer-text {
    font-size: 2.6vw;
  }
  .footer-wrapper {
    padding: 3% 5% 30%;
  }
}