/* 1. 親 Fullwidth ブロック */
.wp-block-swell-blocks-fullwidth.stars {
  margin: 0 !important;
  padding: 0 !important;
  min-height: 100vh !important;  /* ここだけ保持 */
  position: relative !important;  /* 相対配置で内部を制御 */
  overflow: hidden !important;
}

/* 2. .stars コンテナをブロック要素＋相対配置に */
.stars {
  display: block;
  position: relative !important;  /* 流れの中に置く */
  width: 100%;
  height: 100%;                   /* 親の100vhを満たす */
  background: transparent;
  overflow: hidden;
  z-index: 1;                      /* 必要ならテキストより下層に */
}

/* 3. 星（.star）は相対コンテナ基準の絶対配置 */
.stars .star {
  position: absolute;
  top:    0; left: 0;             /* 位置は JS で上書き */
  /* 以下は既存スタイル */
  background-color: rgba(255,255,255,0.8);
  border-radius: 50%;
  box-shadow: 0 0 2px 1px rgba(255,255,255,0.1);
  opacity: 0;
  animation-name: twinkle;
  animation-duration: 8s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

/* 4. コンテンツが .stars の下に来るように */
.wp-block-swell-blocks-fullwidth.stars + * {
  position: relative;
  z-index: 2;  /* .stars より前面に */
}

/* 5. アニメーション定義はそのまま */
@keyframes twinkle {
  0%,100% { opacity: 0; transform: scale(1); }
  50%     { opacity: 0.6; transform: scale(1.1); }
}

/* Fullwidth(map-full) ブロック自体をビューポート幅いっぱいに */
.wp-block-swell-blocks-fullwidth.map-full {
  position: relative !important;
  left: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  width: 100vw !important;
  max-width: none !important;
  padding: 0 !important;
}

/* map-full ブロック内の iframe や埋め込み要素を全幅に */
.wp-block-swell-blocks-fullwidth.map-full iframe,
.wp-block-swell-blocks-fullwidth.map-full embed,
.wp-block-swell-blocks-fullwidth.map-full .your-map-container-selector {
  display: block;
  width: 100% !important;
  height: auto !important; /* 必要なら高さも調整 */
  border: none !important;
}

/* stars ブロックをビューポート中央にぴったり寄せる */
.wp-block-swell-blocks-fullwidth.stars,
.wp-block-swell-blocks-fullwidth.stars.alignfull {
  /* ビューポート幅いっぱいに */
  width: 100vw !important;
  /* 左右マージンを負の半ビューポート幅でリセットし中央寄せ */
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  /* 余白・パディングは既にリセット済みのはず */
}

/* stars ブロックをピクセル単位で中央揃えする */
.wp-block-swell-blocks-fullwidth.stars {
  position: relative !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 100vw !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* — stars 要素自体をビューポート中央に揃える — */
.wp-block-swell-blocks-fullwidth.stars .stars {
  position: relative !important;
  width: 100vw !important; /* ビューポート幅いっぱい */
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  /* これまでの高さ100%はそのまま */
  height: 100% !important;
}

/* SWELL Fullwidth(stars) の .inner-container 内の .stars を中央寄せ */
.wp-block-swell-blocks-fullwidth.stars
  > .wp-block-swell-blocks-fullwidth__inner-container
  > .stars {
  display: block !important;
  position: relative !important;
  width: 100% !important;    /* 幅は100% */
  max-width: 100% !important;/* 上限も100% */
  margin: 0 auto !important;  /* 左右を自動マージンで中央寄せ */
  left: auto !important;      /* left/rightの指定をリセット */
  right: auto !important;
  transform: none !important; /* transform指定をリセット */
}

/* stars 要素をビューポート全幅＋中央揃え */
.stars {
  position: relative !important;
  left: 50% !important;            /* 自分の左端をビューポート中央へ */
  margin-left: -50vw !important;    /* 幅の半分だけ左にずらす */
  width: 100vw !important;          /* ビューポート幅いっぱいに */
  max-width: none !important;       /* 親テーマの制限を解除 */
  padding: 0 !important;
  overflow: hidden !important;
}