@charset "UTF-8";
/* CSS Document */


/* 共通部分 */
html {
  scroll-behavior: smooth;
}
.fadein {
  opacity: 0;
}


/* sp表示 */
@media screen and (max-width: 767px) {
  .pc {
    display: none;
  }

  /* ヘッダー */
  header {
    position: fixed;
    z-index: 1001;  /* ← これが重要 */
    width: 100%;
    top: 0;
    height: 72px;   /* 100% ではなく固定高にする */
  }
  .header-inner {
    display: flex;
    justify-content: space-between;
    width: 89.3%;
    margin-top: 16px;
    margin-left: 5.3%;
  }
  .header-logo {
    width: 131px;
    z-index: 1002; 
  }
  .header-contents {
    width: 192px;
    display: flex;
    justify-content: space-between;
  }
  .header-button {
    width: 140px;
    filter: drop-shadow(0px 6px 6px rgba(0,0,0,0.16));
    transition: 0.3s;
    z-index: 1002; 
  }
  .header-button:hover {
    opacity: 0.8;
  }
  .hamburger {
    width: 40px;
    height: 40px;
    background-color: #fff;
    border-radius: 100px;
    position: relative;
    box-shadow: 0px 0px 12px 0px rgba(26, 255, 220, 0.44);
    z-index: 1002; 
  }
  .hamburger span {
    /*3本の線を作る*/
  position: absolute;
  transition: all .3s;
  height: 2px;
  background-color: #29C9B1;
  width: 55%;
}
.hamburger span:nth-of-type(1) {
    /*上の線の位置*/
    top: 13px;
    left: 9px;
}
.hamburger span:nth-of-type(2) {
    /*真ん中の線の位置*/
    top: 20px;
    left: 9px;
}
.hamburger span:nth-of-type(3) {
    /*下の線の位置*/
    top: 27px;
    left: 9px;
}
.hamburger.open span:nth-of-type(1) {
    /*openのとき、上の線を右斜めにする*/
    transform: translateY(6.5px) rotate(-45deg);
}
.hamburger.open span:nth-of-type(2) {
    /*真ん中の線を消す*/
    opacity: 0;
}
.hamburger.open span:nth-of-type(3) {
    /*下の線を左斜めにする*/
    transform: translateY(-6.5px) rotate(45deg);
}
nav {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 0;
  background-color: rgb(255 255 255 / 0.85);
  z-index: 1000;               /* ヘッダーより前面に出る */
  overflow: hidden;
  transition: height .3s;
  pointer-events: none;       /* ← 閉じている間はクリックを受けない */
}
nav.open {
  height: 100vh;
  pointer-events: auto;       /* ← 開いたらクリック可 */
}
.header-menu {
  width: 144px;
  height: 188px;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  margin: 120px auto 0;
}
.header-nav1 {
  width: 36px;
}
.header-nav2 {
  width: 108px;
}
.header-nav3 {
  width: 144px;
}
.header-nav4 {
  width: 54px;
}


.fv {
  margin-top: 72px;
}








/* ボタン */
.button {
  width: 89%;
  margin: 6% auto;
  animation: dokidoki 2.5s ease-in-out infinite;
  filter: drop-shadow(0px 6px 6px rgba(0,0,0,0.16));

}
@keyframes dokidoki {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  60% {
    transform: scale(1);
  }
  100% {
    transform: scale(1);
  }
}

/* 特徴 */
.box1 {
  background: url(https://chatlady.co.jp/bg/wp-content/uploads/2025/08/box1-bg-scaled.webp) no-repeat;
  background-size: cover;
  width: 100%;
  padding: 9.6% 0;
}
.box1-title {
  width: 80%;
  margin: 0 auto 7.5%;
}
.box1-contents {
  width: 92%;
  margin: 0 5.3% 2.7%;
  display:flex;
  flex-flow: column;
  gap: 28px;
}

/* 報酬システム */
.box2 {
  background: url(https://chatlady.co.jp/bg/wp-content/uploads/2025/08/box2-bg-1.webp);
  background-size: contain;
  width: 100%;
  padding: 9.6% 0;
}
.box2-title {
  width: 80%;
  margin: 0 auto 7.5%;
}
.box2-sns, .box2-web, .box2-text1, .box2-text2 {
  width: 89%;
  margin: 0 auto 7.5%;
}
.box2-sns, .box2-web {
  filter: drop-shadow(0px 3px 10px rgba(0,0,0,0.16));
}


/* アピールポイント */
.box3 {
  background-color: #29C9B1;
  padding: 2.7%;
}
.box3-wrapper {
  background: url(https://chatlady.co.jp/bg/wp-content/uploads/2025/08/box3-bg.webp);
  background-size: contain;
  border-radius: 30px;
  padding: 9.6% 0;
}
.box3-title {
  width: 80%;
  margin: 0 auto 7.5%;
}
.box3-contents {
  width: 85%;
  margin: 0 auto;
  display:flex;
  flex-flow: column;
  gap: 28px;
}

/* 始め方 */
.box4 {
  background-color: #F6FFFD;
}
.box4-wrapper {
  background: url(https://chatlady.co.jp/bg/wp-content/uploads/2025/08/box4-bg.webp);
  background-size: contain;
  padding: 9.6% 0;
}
.box4-title {
  width: 80%;
  margin: 0 auto 7.5%;
}
.box4-contents {
  width: 89%;
  margin: 0 auto;
  display: flex;
  flex-flow: column;
  gap: 20px;
}
.step1 {
  position: relative;
}
.button2 {
  position: absolute;
  top: 81%;
  right: 0;
  width: 77%;
  filter: drop-shadow(0px 6px 6px rgba(0,0,0,0.16));
}

/* オファー */
.box5 {
  padding: 9.6% 0 19.2%;
}
.box5-wrapper {
  position: relative;
}
.box5-image {
  width: 92%;
  margin-left: 5.3%; 
}
.button3 {
  position: absolute;
  width: 81%;
  top: 76%;
  left: 9.6%;
  animation: dokidoki 2.5s ease-in-out infinite;
  filter: drop-shadow(0px 6px 6px rgba(0,0,0,0.16));
}

/* フッター(pc) */
footer {
  width: 100%;
  height: 110px;
  background-color: #29C9B1;
  padding: 40px 0 32px;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
}
.footer-links {
  font-size: 13px;
  color: #fff;
  margin: 0 auto;
  display: flex;
  gap: 24px;
}
.footer-links a{
  color: #fff;
  text-decoration: none;
}
footer img {
  width: 220px;
  margin: 0 auto;
}
}



/* pc表示 */
@media screen and (min-width: 768px) {
  .sp {
    display: none;
  }
  .pc {
    background-color: #EEFFFC;
  }

  /* ヘッダー(pc) */
header {
  position: fixed;
  z-index: 10;
  width: 94%;
  top: 20px;
  left: 3.1%;
  display: flex;
  justify-content: space-between;
}
.header-logo {
  width: 220px;
}
nav {
  width: 856px;
  height: 68px;
  border-radius: 100px;
  display: flex;
  background-color: #fff;
  box-shadow: 0px 0px 12px 0px rgba(26, 255, 220, 0.36);
}
.header-menu {
  width: 412px;
  margin-top: auto;
  margin-bottom: auto;
  margin-left: 72px;
  display: flex;
  gap: 36px;
}
.header-button {
  width: 318px;
  margin-left: 48px;
  margin-bottom: auto;
  margin-top: auto;
  filter: drop-shadow(0px 6px 6px rgba(0,0,0,0.16));
  transition: 0.3s;
}
.header-button:hover {
  opacity: 0.7;
}


.fv {
  margin-top: 100px;
  background-color: #fff;
}
  .cta {
    padding: 1.9% 0 2.5%;
    margin: 0 auto;
  }
  .pc-contents {
    background-color: #fff;
    max-width: 1280px;
    margin: 0 auto;
  }

  /* ボタン(pc) */
.button {
  width: 38%;
  margin: 0 auto;
  animation: dokidoki 2.5s ease-in-out infinite;
  transition: 0.3s;
  filter: drop-shadow(0px 6px 6px rgba(0,0,0,0.16));
}
.button:hover {
  animation: none;
}
@keyframes dokidoki {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  60% {
    transform: scale(1);
  }
  100% {
    transform: scale(1);
  }
}

/* 特徴(pc) */
.box1 {
  background: url(https://chatlady.co.jp/bg/wp-content/uploads/2025/08/pc-box1-bg.webp);
  background-size: contain;
  background-position-y: 0, 100%;
  width: 100%;
  padding: 6.3% 0;
}
.box1-title {
  width: 32.2%;
  margin: 0 auto 4.4%;
}
.box1-contents {
  width: 74.2%;
  margin: 0 auto;
  display:flex;
  flex-flow: column;
  gap: 48px;
}

/* 報酬システム(pc) */
.box2 {
  background: url(https://chatlady.co.jp/bg/wp-content/uploads/2025/08/pc-box2-bg-1.webp);
  background-size: contain;
  padding: 6.3% 0;
}
.box2-title {
  width: 32%;
  margin: 0 auto 4.4%;
}
.box2-sns, .box2-web {
  width: 80%;
  margin: 0 auto 4.4%;
  filter: drop-shadow(0px 3px 10px rgba(0,0,0,0.16));
}
.box2-text1, .box2-text2 {
  width: 66%;
  margin: 0 auto 4.4%
}

/* アピールポイント(pc) */
.box3 {
  background-color: #29C9B1;
  padding: 3.1%;
}
.box3-wrapper {
  background: url(https://chatlady.co.jp/bg/wp-content/uploads/2025/08/pc-box3-bg.webp);
  background-size: contain;
  border-radius: 56px;
  padding: 6.3% 0;
}
.box3-title {
  width: 37.5%;
  margin: 0 auto 4.4%;
}
.box3-contents {
  width: 85%;
  margin: 0 auto;
  display:flex;
  flex-flow: row wrap;
  justify-content: space-between;
  row-gap: 48px;
}
.box3-contents img {
  width: 47.6%;
}

/* 始め方(pc) */
.box4 {
  background-color: #F6FFFD;
}
.box4-wrapper {
  background: url(https://chatlady.co.jp/bg/wp-content/uploads/2025/08/pc-box4-bg-scaled.webp);
  background-size: contain;
  padding: 6.3% 0;
}
.box4-title {
  width: 32.2%;
  margin: 0 auto 4.4%;
}
.box4-contents {
  width: 66%;
  margin: 0 auto;
  display: flex;
  flex-flow: column;
}
.step1 {
  position: relative;
}
.step2, .step3, .step4 {
  margin-top: -8%;
}
.button2 {
  position: absolute;
  top: 43.2%;
  right: 0;
  width: 36.6%;
  filter: drop-shadow(0px 6px 6px rgba(0,0,0,0.16));
}

/* オファー(pc) */
.box5 {
  padding: 6.3% 0 11.7%;
}
.box5-wrapper {
  position: relative;
}
.box5-image {
  width: 70%;
  margin-left: 17%; 
}
.button3 {
  position: absolute;
  width: 38%;
  top: 66%;
  left: 31%;
  animation: dokidoki 2.5s ease-in-out infinite;
  filter: drop-shadow(0px 6px 6px rgba(0,0,0,0.16));
}

/* フッター(pc) */
footer {
  width: 100%;
  height: 140px;
  background-color: #29C9B1;
  padding: 36px 0 28px;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
}
.footer-links {
  font-size: 14px;
  color: #fff;
  margin: 0 auto;
  display: flex;
  gap: 32px;
}
.footer-links a{
  color: #fff;
  text-decoration: none;
}
footer img {
  width: 330px;
  margin: 0 auto;
}
}