@charset "UTF-8";
body.lp {
  background-image: url("../img/lp/body-bg-turf.png");
  background-repeat: repeat;
}
body.lp main {
  background-image: url("../img/lp/main-bg.png");
  /* ========================================================
        1. line-cta-line__pc.png: 右に少しスライドして戻るモーション
        ======================================================== */
  /* ========================================================
        LINEボタン & メールアドレス登録ボタン: 拡大縮小モーション
        ======================================================== */
  /* 画像のはみ出し防止 */
}
body.lp main .regist-sect {
  margin: 0 auto;
  position: relative;
  background-color: #ff0;
}
body.lp main .regist-sect h2 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
body.lp main .regist-sect .line-regist {
  margin: 40px 0 20px;
}
body.lp main .fv {
  position: relative;
}
body.lp main .fv .regist-wrap {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
body.lp main .second-sect {
  background: url("../img/lp/lp-about-matome__bg.png") no-repeat top center / 100% auto;
}
body.lp main .line-regist.wide .caption {
  display: inline-block;
  /* transformを適用可能にする */
  animation: slideRightLoop 1s ease-in-out infinite;
}
@keyframes slideRightLoop {
  0%,
  100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(10px);
    /* スライド幅（必要に応じて調整） */
  }
}
body.lp main .line-regist.narrow a,
body.lp main .mail-regist a {
  display: inline-block;
  /* transformを効かせるため必須 */
  transform-origin: center center;
  animation: pulseLoop 1.8s ease-in-out infinite !important;
}
body.lp main .line-regist.narrow a img,
body.lp main .mail-regist a img {
  display: block;
  max-width: 100%;
  height: auto;
}
@keyframes pulseLoop {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.04);
    /* 動きを強めたい場合は 1.06〜1.08 に調整 */
  }
}
body.lp footer .gloval-nav {
  display: none;
}
body.lp footer .sub-contents-nav li:last-child {
  display: none;
}
/* ///// PC ///// */
@media screen and (min-width: 751px) {
  body.lp main {
    margin-top: 50px;
    padding: 0 0 30px 0;
  }
  body.lp main * img {
    width: 100%;
    height: auto;
  }
  body.lp main .regist-sect {
    padding: 30px;
    border: 8px solid var(--color-key);
    border-radius: 70px;
    width: 780px;
  }
  body.lp main .regist-sect h2 {
    top: -90px;
    width: 700px;
  }
  body.lp main .regist-sect .line-regist {
    margin: 40px 0 20px;
  }
  body.lp main .regist-sect .line-regist.wide {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
  }
  body.lp main .regist-sect .line-regist.wide .caption {
    margin-right: var(--inner-gap-wide);
    display: block;
    width: 530px;
  }
  body.lp main .regist-sect .line-regist.wide .qr {
    flex: 1;
    border: 2px solid var(--color-border);
    padding: 5px;
  }
  body.lp main .regist-sect .line-regist.narrow {
    display: none;
  }
  body.lp main .fv {
    margin-bottom: 280px;
  }
  body.lp main .fv h1 img {
    border-radius: 10px 10px 0 0;
  }
  body.lp main .fv .regist-wrap {
    bottom: -220px;
    width: 780px;
  }
  body.lp main .first-sect {
    margin: 0 auto 30px;
    width: 800px;
  }
  body.lp main .about {
    padding: 30px 30px 0 30px;
  }
  body.lp main .about h2 {
    margin: 0 auto 30px;
    width: 600px;
  }
  body.lp main .about ol li:not(:last-of-type) {
    margin-bottom: 30px;
  }
  body.lp main .second-sect {
    padding: 30px 0;
  }
  body.lp main .faq {
    padding: 30px;
  }
  body.lp main .faq h2 {
    margin: 0 auto 30px;
    width: 600px;
  }
  body.lp main .faq ul li:not(:last-of-type) {
    margin-bottom: 30px;
  }
  body.lp main .third-sect h3 {
    margin-bottom: 80px;
  }
  body.lp footer {
    border-radius: 10px 10px 0 0;
  }
}
/* ///// スマホ ///// */
@media screen and (max-width: 750px) {
  body.lp main {
    border-radius: 0;
    width: 100%;
  }
  body.lp main .regist-sect {
    padding: 3vw;
    border: 5px solid var(--color-key);
    border-radius: 6vw;
    width: 94%;
  }
  body.lp main .regist-sect h2 {
    top: -10vw;
    width: 100%;
  }
  body.lp main .regist-sect .line-regist {
    margin: 5vw 0 2vw;
  }
  body.lp main .regist-sect .line-regist.wide {
    display: none;
  }
  body.lp main .fv {
    margin-bottom: 27vw;
  }
  body.lp main .fv h1 img {
    border-radius: 10px 10px 0 0;
  }
  body.lp main .fv .regist-wrap {
    bottom: -23vw;
    width: 94%;
  }
  body.lp main .first-sect {
    margin: 0 auto 3vw;
    width: 94%;
  }
  body.lp main .about {
    padding: 3vw 3vw 0 3vw;
  }
  body.lp main .about h2 {
    margin: 0 auto 3vw;
    width: 90%;
  }
  body.lp main .about ol li:not(:last-of-type) {
    margin-bottom: 2vw;
  }
  body.lp main .second-sect {
    padding: 3vw 0;
  }
  body.lp main .faq {
    padding: 3vw;
  }
  body.lp main .faq h2 {
    margin: 0 auto 3vw;
    width: 90%;
  }
  body.lp main .faq ul li:not(:last-of-type) {
    margin-bottom: 2vw;
  }
  body.lp main .third-sect h3 {
    margin-bottom: 8vw;
  }
  body.lp footer {
    margin-top: 0;
  }
}