:root {
      --w: 960px;       /* PC幅 */
      --h: 360px;       /* PC高さ */
      --dot-size: 12px; /* ドット直径 */
      --dot-gap: 12px;  /* ドット間隔 */
      --dot-color: rgba(255,255,255,.55);  /* 非アクティブ */
      --dot-active: #ffffff;               /* アクティブ */
      --dot-focus: #60a5fa;                /* キーボードフォーカス枠 */
    }

    body {
        margin: 0 auto;
        background-color: white;
        font-family: system-ui, -apple-system, "Segoe UI", Roboto, Noto Sans JP, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
//      background: #0f172a; /* 濃紺の背景でバナーが映える */
//      color: #e5e7eb;
//      display: grid; 
//      place-items: start center;
//      gap: 12px;
    }

    .banner_prd {
      position: relative;
      width: var(--w); height: var(--h);
      border-radius: 14px;
      overflow: hidden;
      background: #111827;
      box-shadow: 0 8px 24px rgba(0,0,0,.35);
      isolation: isolate; /* 重なり順の安定化 */
      width:90%;
      margin: 0 auto;
    }

    /* 画像レイヤ */
    .banner_prd img {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      object-fit: cover;
      opacity: 0;
      transition: opacity .45s ease;
      will-change: opacity;
    }
    .banner_prd img.is-active { opacity: 1; }

    /* 左端ドットのコンテナ（横並び） */
    .dots {
      position: absolute;
      left: 12px;
      bottom: 12px;          /* 下に配置 */
      display: flex;
      flex-direction: row;   /* ✅ 横並び */
      gap: 12px;

      padding: 8px 10px;
      border-radius: 999px;
      background: rgba(0,0,0,.25);
    }

    /* ドットはボタンで実装（アクセシブル） */
    .dot {
      appearance: none;
      width: var(--dot-size); height: var(--dot-size);
      border-radius: 50%;
      border: 0;
      background: var(--dot-color);
      padding: 0; margin: 0;
      cursor: pointer;
      position: relative;
      transition: transform .15s ease, background .15s ease;
    }
    .dot[aria-current="true"] {
      background: var(--dot-active);
      transform: scale(1.15);
    }
    .dot:hover { background: rgba(255,255,255,.8); }
    .dot:focus-visible {
      outline: 2px solid var(--dot-focus);
      outline-offset: 2px;
    }

    /* 画面下にキャプション（番号や説明を置きたい場合） */
    .caption {
      position: absolute;
      left: 56px; right: 16px; bottom: 12px;
      color: #f9fafb;
      text-shadow: 0 1px 2px rgba(0,0,0,.6);
      font-weight: 600;
      letter-spacing: .02em;
      display: flex; align-items: center; justify-content: space-between;
      pointer-events: none;
    }

    /* 矢印ナビ（任意・キーボードも対応するのでマウスだけの人向け） */
    .nav {
      position: absolute; inset: 0;
      display: flex; align-items: center; justify-content: space-between;
      pointer-events: none; /* ボタンだけクリック可にするため、子要素側で復活 */
    }
    .nav .arrow {
      pointer-events: auto;
      margin: 0 12px;
      width: 40px; height: 40px;
      border-radius: 999px; border: 1px solid rgba(255,255,255,.35);
      background: rgba(0,0,0,.3);
      color: #fff;
      display: grid; place-items: center;
      cursor: pointer;
      transition: background .15s ease, border-color .15s ease;
    }
    .nav .arrow:hover { background: rgba(0,0,0,.45); border-color: rgba(255,255,255,.55); }
    .nav .arrow:focus-visible { outline: 2px solid var(--dot-focus); outline-offset: 2px; }

    /* レスポンシブ：幅を画面に合わせる */
    @media (max-width: 1024px) {
      :root { --w: 92vw; --h: 40vw; } /* アスペクト比は用途に合わせて調整可 */
    }
    @media (max-width: 640px) {
      :root { --w: 100vw; --h: 48vw; }
      .dots { left: 8px; }
      .caption { left: 48px; right: 12px; font-size: 14px; }
    }