:root {
      --content-max-mobile: 750px;
      /* 750pxアートボード書き出しを想定 */
      --pc-image-width: 500px;
      /* PC時に画像を縮小して見せる幅 */
      --gap: 24px;
      --bg-color: #fff;
      --text-color: #222;
      --footer-bg: #28b7b0;
      --footer-text: #eee;
    }

    * {
      box-sizing: border-box;
    }

    html,
    body {
      margin: 0;
      padding: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
      color: var(--text-color);
      background: var(--bg-color);
      line-height: 1.6;
    }

    img {
      max-width: 100%;
      height: auto;
      display: block;
    }

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

    .lp-wrap {
      width: min(100%, var(--content-max-mobile));
      margin-inline: auto;
      padding: 0;
    }

    /* 画像セクション。750px書き出し画像を順に積む想定 */
    .lp-section {
      margin-block: 0;
    }

    .lp-image {
      width: 100%;
      max-width: var(--content-max-mobile);
      margin-inline: auto;
    }

    /* ▼PCだけ縮めて見せる */
    @media (min-width: 960px) {
      .lp-wrap {
        width: min(100%, calc(var(--pc-image-width) + 32px));
      }

      .lp-image {
        max-width: var(--pc-image-width);
      }
    }

    /* ボタン（画像書き出し想定） */
    .btn {
      display: inline-block;
      will-change: transform;
      transition: transform .25s ease, filter .25s ease;
    }

    .btn img {
      display: block;
      width: 100%;
      height: auto;
    }

    .btn:hover {
      transform: translateY(-2px) scale(1.02);
    }

    /* ふわふわアニメーション（常時ゆらぎ） */
    @keyframes floaty {
      0% {
        transform: translateY(0);
      }

      50% {
        transform: translateY(-6px);
      }

      100% {
        transform: translateY(0);
      }
    }

    .fuwafuwa {
      animation: floaty 3s ease-in-out infinite;
    }

    /* 動きを苦手とするユーザー配慮 */
    @media (prefers-reduced-motion: reduce) {
      .fuwafuwa {
        animation: none;
      }

      .btn {
        transition: none;
      }
    }

    /* PCレイアウト */
    @media (min-width: 960px) {
      body {
        position: relative;
        /* 背景：画像 + 明るさオーバーレイ（グラデ合成） */
        background-image: linear-gradient(rgba(255, 255, 255, 0.60), rgba(255, 255, 255, 0.60)), url("../images/bg.jpeg");
        background-size: cover;
        background-position: center;
        background-attachment: fixed;
      }
    }

    /* 本文の幅は500px相当にして、750px画像を小さく見せる */
    .lp-wrap {
      width: min(100%, calc(var(--pc-image-width) + 32px));
    }

    .lp-image {
      max-width: var(--pc-image-width);
    }

    /* ボタン画像も本文幅にフィット */
    .btn--block {
      display: block;
      width: 100%;
    }

    /* フッター */
    footer {
      padding: 24px 16px;
      background: var(--footer-bg);
      color: var(--footer-text);
      text-align: center;
      font-size: 14px;
    }

    /* KVボタンの重ね配置 */
    .kv-wrap {
      position: relative;
    }

    /* ▼ スマホ（共通）の値 */
    .kv-section--cta .kv-btn {
      bottom: 51px;
    }

    /* ▼ PC */
    @media (min-width: 960px) {
      .kv-section--cta .kv-btn {
        bottom: 62px;
      }
    }

    .kv-btn {
      position: absolute;
      left: 50% !important;
      transform: translateX(-50%) !important;
      bottom: 70px;
      width: 80%;
      max-width: 500px;
      text-align: center;
      display: block;
    }

    @media (min-width: 960px) {
      .kv-btn {
        bottom: 90px;
        width: 70%;
        max-width: 380px;
      }
    }

    .kv-btn img {
      animation: floaty 3s ease-in-out infinite;
      will-change: transform;
    }

    .fixed-cta {
      display: none;
    }

    @media (min-width: 960px) {
      .fixed-cta {
        display: block;
        position: fixed;
        right: 24px;
        bottom: 24px;
        width: 300px;
        z-index: 999;
        animation: floaty 3s ease-in-out infinite;
      }

      .fixed-cta img {
        width: 100%;
        height: auto;
        display: block;
      }
    }

    /* ===== 前フッター（ロゴ＋HP/LINE） ===== */
    .pre-footer {
      background: #e9e9e9;
      /* グレー背景 */
      color: #6a6460;
      /* 文字色（画像と同系） */
      padding: 24px 0;
    }

    /* これを上書き */
    .pre-footer__inner {
      display: grid;
      grid-template-columns: auto auto;
      /* 左:ロゴ / 右:リンク */
      align-items: center;
      gap: 24px;
      justify-content: center;
    }

    .pre-footer__brand {
      display: flex;
      align-items: center;
      gap: 14px;
      text-decoration: none;
      color: inherit;
      min-height: 56px;
    }

    .pre-footer__brand img {
      height: 46px;
      width: auto;
      object-fit: contain;
      filter: grayscale(1) opacity(.75);
    }

    /* 右側リンク（縦並び） */
    .pre-footer__links {
      display: flex;
      flex-direction: column;
      gap: 18px;
      align-items: flex-start;
    }

    .pre-footer__link {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      text-decoration: none;
      color: #6a6460;
      font-weight: 700;
      font-size: clamp(18px, 2.2vw, 18px);
      /* 画像の雰囲気に寄せた大きめ文字 */
    }

    .pre-footer__link:hover {
      opacity: .85;
    }

    .pre-ic {
      width: 32px;
      height: 32px;
      display: inline-block;
    }

    /* SP: ロゴ→リンクの縦積みで中央寄せ */
    @media (max-width: 600px) {
      .pre-footer__inner {
        justify-content: center;
        text-align: left;
      }

      .pre-footer__brand {
        justify-content: center;
        width: 100%;
      }
    }

    /*youtube*/
    .youtube-wrap {
      position: relative;
      width: 100%;
      max-width: var(--content-max-mobile);
      /* 750px幅内に収める */
      margin: 0 auto 24px;
      padding-bottom: 56.25%;
      /* 16:9の比率を保つ */
      height: 0;
      overflow: hidden;
      border-radius: 0;
      /* 角丸は好みで */
    }

    .youtube-wrap iframe {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      border-radius: 0;
    }


    /* youtube調整用の変数*/
:root{
  --video-width-sp: 92%;   /* スマホ時 動画の横幅％ */
  --video-top-sp:  20%;    /* スマホ時 画像の上端からの位置％ */

  --video-width-pc: 100%;  /* PC時 動画の横幅％（本文幅いっぱいなら100） */
  --video-top-pc:   18%;   /* PC時 同上 */
}

.img-video-stack{
  position: relative;
  max-width: var(--content-max-mobile);
  margin: 0 auto;
}
@media (min-width:960px){
  .img-video-stack{ max-width: var(--pc-image-width); }
}

/* 上に重なる動画ボックス（位置は％で微調整） */
.video-on-image{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: var(--video-width-sp);
  top: var(--video-top-sp);
  aspect-ratio: 16 / 9;   /* 角丸なし＆比率固定 */
  overflow: hidden;
}
@media (min-width:960px){
  .video-on-image{
    width: var(--video-width-pc);
    top: var(--video-top-pc);
  }
}

.video-on-image iframe{
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  display: block;
}


/* srice02_06.png の上にボタンを重ねる用 */
.img-btn-stack{
  position: relative;
  max-width: var(--content-max-mobile);
  margin: 0 auto;
}
@media (min-width:960px){
  .img-btn-stack{
    max-width: var(--pc-image-width);
  }
}

/* ボタンの位置（％で位置調整できる） */
.stack-btn{
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  bottom: 40%;
  width: 90%;
  max-width: 360px;
  display: block;
  text-align: center;
  z-index: 20;
}
/* スマホだけ位置調整 */
@media (max-width: 959px){
  .stack-btn{
    bottom: 37% !important;  
  }
}
.stack-btn img{
  width: 100%;
  height: auto;
  display: block;
}
/* ふわふわは画像に適用（anchor 側はオフ） */
.stack-btn.fuwafuwa{ animation: none; }         /* ← 衝突回避 */
.stack-btn img{ animation: floaty 3s ease-in-out infinite; }

/* ホバー時は画像だけをちょい浮かせる（中央寄せは維持） */
.stack-btn:hover{ transform: translateX(-50%) !important; }
.stack-btn:hover img{ transform: translateY(-4px) scale(1.02); }

/* 動きを苦手とするユーザー配慮（既存に合わせて） */
@media (prefers-reduced-motion: reduce){
  .stack-btn img{ animation: none; }
  .stack-btn:hover img{ transform: none; }
}