* {
            margin: 0;
            padding: 0;
        }

        body {
            display: flex;
            flex-direction: column; /* 縦並び */
            justify-content: flex-start;
            align-items: center;
            min-height: 100vh;
            background-color: white;
            position: relative;
            overflow-x: hidden;
        }

        /* 固定背景（スクロール追従） */
        body::before {
            content: "";
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background-size: cover;
            background-position: center;
            pointer-events: none;
            z-index: -1;
        }

        .image-container {
            position: relative;
            width: 100%;
            z-index: 1;
        }

        .responsive-image {
            width: 100%;
            height: auto;
            display: block;
            user-select: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            pointer-events: none;
        }

        .pc-image {
            display: block;
        }

        .mobile-image,
        .tablet-image {
            display: none;
        }

        .tablet-image {
            display: none;
        }

        .button-wrapper {
          width: 100vw;
          max-width: 100vw;
          margin-top: 200px;     /* ヒーロー画像との間隔 */
          margin-bottom: 200px;  /* ボタンの下に空けるスペース */
          padding: 0;
          text-align: center;
        }

        .btn-image {
          display: none;
        }

        .btn-image img {
          width: 100%;           /* 画像を親幅にフィット */
          height: auto;
          display: block;
        }

        .btn-pc,
        .btn-tablet,
        .btn-mobile {
          display: none;
        }

        .responsive-logo {
          width: 80%;
          max-width: 600px;
          height: auto;
          display: block;
          margin: 0 auto;
        }

        .logo-wrapper {
          margin-top: 0px;  /* ← ここで隙間を調整 */
          margin-bottom: 20px;
          text-align: center;
        }

        .copyright {
          color: #454552;
          margin-top: 0px;
          margin-bottom: 20px;
          font-size: 17px;
          width: 100%;
          text-align: center;
        }


        /* PC (1025px以上)  */
        @media (min-width: 1025px) {
          .btn-pc {
            display: block;
          }
        }

        /* モバイル (768px以下) */
        @media (max-width: 768px) {
            body::before {
                }

            .pc-image,
            .tablet-image {
                display: none;
            }

            .mobile-image {
                display: block;
            }

            .store-item,
            .material {
                font-size: 0.8rem !important;
            }

            .btn-mobile {
                display: block;
            }

            .button-wrapper {
              margin-top: 50px;    /* スマホ用に調整（例） */
              margin-bottom: 50px;
            }

            .responsive-logo {
              width: 55%;
              max-width: 600px;
            }

            .logo-wrapper {
              margin-top: 0px;
              margin-bottom: 20px;
            }

            .copyright {
              color: #454552;
              margin-top: 0px;
              margin-bottom: 20px;
              font-size: 10px;
              width: 100%;
              text-align: center;
            }
        }

        /* タブレット (769px以上1024px以下) */
        @media (min-width: 769px) and (max-width: 1024px) {
            .pc-image {
                display: none;
            }

            .mobile-image {
                display: none;
            }

            .tablet-image {
                display: block;
            }

            .btn-tablet {
                display: block;
            }

            .button-wrapper {
              margin-top: 150px;
              margin-bottom: 150px;
            }

            body::before {
                }

            .responsive-logo {
              width: 50%;
              max-width: 700px;
            }

            .logo-wrapper {
              margin-top: 0px;
              margin-bottom: 0px;
            }

            .copyright {
              color: #454552;
              margin-top: 20px;
              margin-bottom: 20px;
              font-size: 20px;
              width: 100%;
              text-align: center;
            }
        }

        @media screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (orientation: portrait),
         screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (orientation: landscape) {
            /* iPad Pro のみを明示的にタブレット扱いにする */
            .pc-image,
            .mobile-image {
                display: none;
            }

            .tablet-image {
                display: block;
            }

            .btn-tablet {
                display: block;
            }

            body::before {
                }
        }


        /* 画像高さを統一してキャプション位置を揃える */
        @media (min-width: 768px) {
            .store-item img {
                height: 300px;
                object-fit: cover;
            }
        }

        /* 店舗特典情報セクション */
        .store-bonus-section {
            width: 90%;
            max-width: 1200px;
            margin: 3rem auto;
            color: #333;
            font-family: "Noto Serif JP", serif;
            line-height: 1.7;
        }

        .store-bonus-section h2 {
            text-align: center;
        }

        .download_logo {
            font-family: "Noto Serif JP", serif;
            font-weight: 400;
            font-style: normal;
            font-size: 1.5rem;
            line-height: 2.1rem;
        }

        .border {
            display: block;
            width: 210px;
            height: 1.5px;
            background: black;
            margin: 0 auto;
        }

        .trial_download_logo {
            font-family: "Noto Serif JP", serif;
            font-weight: 400;
            font-size: 3rem;
            font-style: normal;
            line-height: 5rem;
        }

        .store-block {
            background: rgba(255, 255, 255, 0.85);
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 1.5rem;
            margin-bottom: 2rem;
        }

        /* ---------- 画像グリッド & キャプション ---------- */
        .store-grid {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1rem;
        }

        /* PC (1024px以上) では2列グリッド */
        @media (min-width: 1024px) {
            .store-grid {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                gap: 1rem;
                justify-items: center;
            }
        }

        /* フォントサイズ調整 */
        .store-block h3 { /* base: mobile */
            font-size: 1.5rem; /* ≒24px */
        }

        .store-item p { /* base: mobile */
            font-size: 1rem; /* ≒16px */
        }

        /* タブレット以上の共通設定 */
        @media (min-width: 768px) {
            .store-block h3 { font-size: 2rem; } /* ≒32px (base for tablet)*/
            .store-item p { font-size: 1.25rem; } /* ≒20px */

            .store-grid {
                display: flex;
                flex-direction: row; /* 横並び */
                flex-wrap: wrap;
                justify-content: center;
                align-items: stretch; /* 高さを揃える */
                gap: 1rem;
            }

            /* デフォルトは2列想定 (やや余裕を持たせて折り返し防止) */
            .store-grid > .store-item {
                box-sizing: border-box;
                flex: 0 1 calc(48% - 1rem);
                max-width: calc(48% - 1rem);
            }

            /* 画像が1枚のみの場合は中央寄せ幅を拡大 */
            .store-grid > .store-item:only-child {
                flex: 0 1 60%;
                max-width: 60%;
            }
        }

        /* PC でさらに文字サイズアップ */
        @media (min-width: 1024px) {
            .store-block h3 { font-size: 2.25rem; } /* ≒36px */
            .store-item p { font-size: 1.5rem; }   /* ≒24px */
        }

        .store-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            height: 100%;
        }

        .store-item img {
            width: 100%;
            height: auto;
        }

        .store-item p {
            margin-top: auto; /* 画像高が異なっても下揃え */
            padding-top: 0.3rem;
            color: #000;
            text-shadow: 0 0 3px rgba(255,255,255,0.6);
        }

        .store-item .material {
            font-size: 1.15rem;
            margin-top: 0.15rem;
            color: #000;
            text-shadow: 0 0 3px rgba(255,255,255,0.6);
        }

        .purchase-link {
            display: inline-block;
            padding: 0.5rem 1rem;
            margin-top: 0.75rem;
            background: #036EB8;
            color: #ffffff;
            border-radius: 0.375rem; /* ≒6px */
            text-align: center;
            text-shadow: none;
            transition: background 0.2s ease;
        }

        .purchase-link:hover {
            background: #005bb5;
        }

        /* ---- KeroQ shop style ---- */
        .small-text {
            font-size: 0.8em;
            font-weight: normal;
        }

        .price-info {
            margin-top: 1rem;
            padding: 0.5rem;
            border-radius: 5px;
            width: 100%;
            text-align: center;
        }

        .price-row {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            margin-bottom: 1rem;
        }

        .price-row:last-child { margin-bottom: 0; }

        .price-row p { margin-bottom: 0.5rem; text-align: center; }

        .price-text, .price-special {
            margin-left: 0;
            font-size: 1rem;
        }

        @media (min-width: 769px) {
            .price-text, .price-special { font-size: 1.75rem; }
        }

        .button-group {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.5rem;
            margin-top: 0.5rem;
        }

        .shop-button {
            display: inline-block;
            padding: 8px 16px;
            background: linear-gradient(95deg, #036EB8 0%, #000 100%);
            color: #fff;
            text-decoration: none;
            border: none;
            border-radius: 20px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-bottom: 0.5rem;
            text-align: center;
            box-shadow: 0 0 10px rgba(255, 255, 255, 0.3), 0 0 20px rgba(255, 255, 255, 0.2);
            width: 80%;
        }

        @media (min-width: 769px) {
            .shop-button { padding: 18px 24px; font-size: 22px; border-radius: 24px; margin-bottom: 1rem; }
        }

        .shop-button:hover { background-color: #a01f24; }

        /* 全テキスト光彩 */
        .store-bonus-section h2,
        .store-bonus-section h3,
        .store-bonus-section p {
            text-shadow: 0 0 3px rgba(255,255,255,0.6);
        }

        /* 見出し調整 */
        .store-block h3 {
            font-size: 1.75rem;
            text-align: center;
            margin-bottom: 1rem;
        }

        .store-image {
            cursor: pointer;
            transition: transform 0.2s ease;
        }

        .store-image:hover {
            transform: scale(1.02);
        }

        /* ---------- Lightbox ---------- */
        #lightbox {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.85);
            display: flex;
            justify-content: center;
            align-items: center;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease;
            z-index: 1000;
        }

        #lightbox.active {
            opacity: 1;
            visibility: visible;
        }

@media screen and (min-width: 1025px) {
  body.page-index {
    background-image: url('img/background_pc.webp');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }

  body.page-shop {
    background-image: url('img/background_pc_shop.webp');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }
}

/* デフォルト背景（スマホ用） */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-image: url('img/background_mobile.webp');
  background-size: cover;
  background-position: center;
  pointer-events: none;
  z-index: -1;
}

/* タブレット背景 */
@media (min-width: 769px) and (max-width: 1024px) {
  body::before {
    background-image: url('img/background_tablet.webp');
  }
}

/* PC版 背景切り替え */
@media (min-width: 1025px) {
  body.page-index::before {
    background-image: url('img/background_pc.webp');
  }

  body.page-shop::before {
    background-image: url('img/background_pc_shop.webp');
  }
}