/* ==========================================
       1. 基本リセット & 共通スタイル
       ========================================== */
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
  font-family: "Zen Kaku Gothic New","Helvetica Neue",  sans-serif;
  color: #fff;
  overflow-x: hidden;

  /* ==========================================
     追加：PC用の全体背景画像設定
     ========================================== */
  background-image: url('../images/back.jpg'); /* ここに背景画像のパスを指定 */
  background-size: cover;       /* 画面全体に隙間なく画像を広げる */
  background-position: center;  /* 画像の中心を画面の中央に合わせる */
  background-repeat: no-repeat; /* 画像をリピート（繰り返し）させない */
  background-attachment: fixed; /* 【重要】スクロールしても背景画像をその場に固定する */
}

a {
  color: #fff;
}

    /* ==========================================
       2. 全体レイアウト（PC基準）
       ========================================== */
    /* メインコンテナ：PCでは画面中央に最大幅を指定して配置 */
    .app-container {
      position: relative;
      width: 100%;
      max-width: 640px; /* 中央コンテンツエリアの幅（お好みで調整） */
      margin: 0 auto;  /* 左右中央寄せ */
      background-color: #221e1c;
      /* 影の不透明度を 0.8 から 0.25（25%）に下げて薄くします */
      box-shadow: 0 0 40px rgba(0, 0, 0, 0.25);
      min-height: 100vh;
    }

    /* ==========================================
       3. 中央背景の固定動画エリア
       ========================================== */
    /* 動画を「中央エリアの幅の中だけ」に固定表示するための仕組み */
    .fixed-video-wrapper {
      position: absolute; /* 親要素（.app-container）に対して絶対配置 */
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none; /* 下の要素のクリックを邪魔しない */
      z-index: 1;           /* コンテンツ（z-index: 2）の下に配置 */
    }

    /* ビデオタグ本体：常に画面いっぱいに広がりつつ固定（fixed） */
    .fixed-video {
      position: fixed; /* 画面に対して固定（スクロールしても動かない） */
      top: 0;
      width: 100%;
      max-width: 640px; /* 親（.app-container）と同じ幅に制限することで、はみ出さない */
      height: 100vh;
      object-fit: cover; /* 比率を保ったままエリア全体をカバー */
    }

    /* 動画の上に薄いオーバーレイを重ねて文字を読みやすくする場合（任意） */
    .video-overlay {
      position: fixed;
      top: 0;
      width: 100%;
      max-width: 640px;
      height: 100vh;
      background: rgba(0, 0, 0, 0.6); /* 黒の40%透過マスク */
      z-index: 2;
    }

    /* ==========================================
       4. スクロールするコンテンツエリア
       ========================================== */
    .scroll-content {
      position: relative;
      z-index: 3; /* ビデオやオーバーレイより上に重ねる */
      width: 100%;
    }

    /* 各セクションの基本スタイル（デモ用） */
    section {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      min-height: 100vh; /* 各セクションを画面いっぱいの高さにする */
      padding: 40px 20px;
      text-align: center;
    }

    /* テキストカード（背景透過などで動画を見せる） */
    .content-box {
      background: #7e6159;
      border: 1px solid #7e6159;
      padding: 40px 30px;
      border-radius: 8px;
      backdrop-filter: blur(4px); /* 背景をほんのりぼかす */
      max-width: 90%;
    }

    /* テキストカード（背景透過などで動画を見せる） */
    .content-box2 {
      background: rgba(227, 197, 149, 0.6);
      border: 1px solid rgba(227, 197, 149, 0.6);
      padding: 40px 30px;
      border-radius: 8px;
      backdrop-filter: blur(4px); /* 背景をほんのりぼかす */
      max-width: 90%;
      margin-top: 50px;
    }

    h1 {
      font-size: 2.5rem;
      margin-bottom: 20px;
      letter-spacing: 0.1em;
    }

    h2 {
      font-size: 1.5rem;
      margin-bottom: 10px;
      letter-spacing: 0.1em;
    }

    h3 {
      font-size: 1.2rem;
      margin-bottom: 10px;
      letter-spacing: 0.1em;
      text-align: left;
    }

    p {
      font-size: 1rem;
      line-height: 1.8;
      margin-bottom: 20px;
    }

    .btn {
      display: inline-block;
      padding: 12px 30px;
      background: #fff;
      color: #000;
      text-decoration: none;
      font-weight: bold;
      border-radius: 50px;
      transition: background 0.3s;
    }

    .btn:hover {
      background: #ccc;
    }

    /* ==========================================
       5. スマートフォン（SP）向けのレスポンシブ設定
       ========================================== */
    @media screen and (max-width: 640px) {
      /* SP時は横幅いっぱいに表示 */
      .app-container {
        max-width: 100%;
        box-shadow: none;
      }
      
      /* 固定動画の最大幅制限も100%に解除 */
      .fixed-video,
      .video-overlay {
        max-width: 100%;
        left: 0;
      }
    }

    /* ==========================================
   6. 追加：商品リストパーツ（画像とテキストの横並び）
   ========================================== */
.product-list {
  width: 100%;
  max-width: 500px; /* パーツ全体の最大幅 */
  margin: 0 auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 30px; /* 商品ごとの間隔 */
}

.product-item {
  display: flex;
  align-items: center; /* 縦方向の中央揃え */
  gap: 20px; /* 画像とテキストの間隔 */
}

/* 商品画像エリア */
.product-img-wrapper {
  width: 140px;  /* 画像の横幅（お好みで調整） */
  flex-shrink: 0; /* 画像が潰れないように固定 */
}

.product-img-wrapper img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1; /* 正方形を維持 */
  object-fit: cover;
}

/* 商品情報エリア */
.product-info {
  flex-grow: 1;
  text-align: left; /* 左寄せ */
}

.product-name {
  font-size: 1.25rem;
  font-weight: bold;
  margin-bottom: 4px;
  letter-spacing: 0.05em;
}

.product-price {
  font-size: 0.95rem;
  color: #ccc;
  margin-bottom: 12px;
}

/* 商品専用のWeb Storeボタン */
.btn-store {
  display: inline-block;
  padding: 6px 16px;
  background: #fff;
  color: #000;
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: bold;
  border: 1px solid #fff;
  border-radius: 50px;
  transition: all 0.3s;
}

.btn-store:hover {
  background: transparent;
  color: #fff;
}

/* ==========================================
   7. 追加：PC版の画面左上固定ロゴ
   ========================================== */
.fixed-side-logo {
  position: fixed;   /* 画面に対して完全に固定（スクロールしても動かない） */
  top: 40px;         /* 上からの余白 */
  left: 40px;        /* 左からの余白 */
  z-index: 10;       /* 背景画像や中央エリアよりも手前に重ねる */
  width: 240px;      /* ロゴ画像の横幅（適宜調整してください） */
  pointer-events: none; /* 万が一中央エリアと被ってもクリックを邪魔しない */
}

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

/* ==========================================
   スマートフォン（SP）向けのレスポンシブ設定
   ========================================== */
@media screen and (max-width: 640px) {
  /* （中略：既存のapp-containerなどの設定） */

  /* スマホ環境では、画面左上の固定ロゴを非表示にする */
  .fixed-side-logo {
    display: none;
  }
}

/* ==========================================
   中央エリア内の画像をはみ出させない設定
   ========================================== */
.scroll-content img {
  max-width: 100%; /* 親要素の幅（最大640px）を超えないようにする */
  height: auto;     /* 縦横比を保ったまま縮小する */
  display: block;   /* 画像の下にできる謎の隙間を防ぐ */
  margin: 0 auto;   /* 必要に応じて画像を中央寄せにする */
}

img {
  margin-bottom: 20px!important;
 }