<style>
/* 1) Reset */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

/* 2) Base */
body {
  font-family: 'Open Sans', sans-serif;
  background: #f2f2f2;
  color: #222;
  position: relative;
  z-index: 0;
}
body::before{
  content:"";
  position:fixed; inset:0; z-index:-1;
  background-image:
    linear-gradient(rgba(255,233,162,.8), rgba(255,233,162,.8)),
    url("https://gigaplus.makeshop.jp/loward/lp/hiroaca2/img/heikei.webp");
  background-repeat: repeat-y;
  background-size: 100% auto;
  background-position: top center;
  opacity:.9;
}

/* 3) Header（HTML登場順） */
.main-banner{ margin:0; padding:0; }
.main-banner img{ display:block; width:100%; height:auto; }

/* 4) 共通セクション */
.section{ max-width:1200px; margin:0 auto; padding:60px 20px; }

/* 5) Intro（共通） */
.intro-box{
  background-color: rgba(255,255,255,.8);
  padding:20px;
  margin-bottom:20px;
  border-radius:10px;
}
.intro-box h3 img{ width:200px; vertical-align:middle; margin:0 10px 10px 0; }

/* 6) NEWラベル（固定pxシンプル版） */
.label-banner-box{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  padding:20px 20px;
  border:3px solid #000;
  border-radius:16px;
  background:#fff;
  box-shadow:6px 6px 0 #000;
  margin-bottom:32px;
  max-width:1150px;
  overflow:visible; /* 飾りを見せる（横スクロールには影響しない） */
}

/* 見出しテキスト */
.label-textwrap{ min-width:0; }
.label-text{
  font-size: 24px;
  font-weight:900;
  line-height:1.3;
  margin:0;
}



/* ---- モディファイア ---- */
.label-banner-box--no-rpad .label-banner-content{ padding-right:0 !important; }


/* ---- ラベルのブレイクポイント ---- */

@media (max-width:625px){

  .label-text{
    font-size:24px;
    line-height:1.4;
    text-wrap:balance;
  }
  .label-banner-box--stack .label-visual{ transform: translate(-50%, -100px) !important; }
}

/* ==== burst（NEWフキダシ） ==== */
.burst-wrap{
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  width: 150px;              /* PC */
  aspect-ratio: 3 / 2;
  vertical-align: middle;
}
.burst-pic{
  position: absolute; inset: 0;
  width: 100% !important; height: 100% !important;
  object-fit: contain; display: block; background: none !important;
}
.burst-text{
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(40px, 15vw, 50px);
  font-weight: 900;
  color: #d90000;
  letter-spacing: 0.02em;
  font-family:'Bangers','Impact',sans-serif;
  white-space: nowrap;
}
@media (max-width:1220px) and (min-width:1024px){
  .burst-wrap{ width: 140px; }
  .burst-text{ font-size: 40px; }
}
@media (max-width:1023px) and (min-width:626px){
  .burst-wrap{ width: 130px; }
  .burst-text{ font-size: 35px; }
}
@media (max-width:625px){
  .burst-wrap{ width: 120px; }
  .burst-text{ font-size: 28px; }
}

/* 7) ラベル画像ブロック */
.label-banner-img{ display:block; margin-bottom:12px; }
.label-banner-img img{ max-width:100%; height:auto; display:block; }

/* 8) グリッド */
.grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap:24px;
  text-align:center;
}
.grid-button{ display:flex; justify-content:center; margin-top:16px; }

/* 9) 商品カード */
.item-card{
  position:relative;
  max-width:340px;
  margin:20px auto;
  background:#fff;
  padding:20px 15px;
  border-radius:10px;
  box-shadow:3px 3px 0 #000;
  display:flex; flex-direction:column; align-items:center;
  border:3px solid #222;
  transition: transform .2s ease, box-shadow .2s ease;
}
.item-card:hover{ transform: translate(-3px,-3px); box-shadow:10px 10px 0 #000; }
.item-card img{ width:100%; height:auto; object-fit:contain; border-radius:6px; }
.item-card h3{ font-size:1.1rem; margin:12px 0 10px; font-weight:bold; text-align:center; }
.item-card .buy-button{ margin-top:auto; align-self:center; }
.item-card .badge{
  position:absolute; top:-20px; left:-8px; /* はみ出し弱め */
  background:red; color:#fff; font-size:20px; font-weight:bold;
  border-radius:50%; width:60px; height:60px;
  display:flex; align-items:center; justify-content:center; z-index:2;
}

/* 10) 購入ボタン */
.buy-button{
  display:inline-block; margin-top:30px; padding:12px 30px;
  background:#ffeb3b; border:3px solid #000; color:#000;
  font-weight:bold; font-family:'Anton',sans-serif;
  text-decoration:none; border-radius:8px;
  box-shadow:3px 3px 0 #000;
  transition: transform .1s ease, box-shadow .1s ease;
}
.buy-button:hover{ transform: translate(2px,2px); box-shadow:1px 1px 0 #000; }

/* 11) スライダー */
.swiper{ width:100%; max-width:700px; margin:0 auto; }
.swiper-slide img{ width:100%; height:auto; display:block; }
.swiper-button-next, .swiper-button-prev{ color:#000; }

/* 12) キャラセクション */
.item-section-deku,
.item-section-bakugo,
.item-section-syoto,
.item-section-tomura,
.item-section-otyako{
  position:relative; text-align:center; padding:60px 20px; color:#fff;
  background-image:
    linear-gradient(rgba(0,0,0,.2), rgba(0,0,0,.2)),
    url('https://gigaplus.makeshop.jp/loward/lp/hiroaca2/img/dot.png');
  background-size:cover; background-repeat:no-repeat; background-position:center;
}
.item-section-deku::before,
.item-section-bakugo::before,
.item-section-syoto::before,
.item-section-tomura::before,
.item-section-otyako::before{
  content:""; position:absolute; inset:0; z-index:0; opacity:.75;
}
.item-section-deku::before{ background-color:#a9b0b7; }
.item-section-bakugo::before{ background-color:#373a36; }
.item-section-syoto::before{ background-color:#a9b0b7; }
.item-section-tomura::before{ background-color:#00837a; }
.item-section-otyako::before{ background-color:#ff671f; }
.item-section-deku > *,
.item-section-bakugo > *,
.item-section-syoto > *,
.item-section-tomura > *,
.item-section-otyako > *{ position:relative; z-index:1; }

/* 13) セクション見出し/本文 */
.item-header h2{ font-size:28px; font-weight:bold; line-height:1.2; margin-bottom:10px; }
.item-header h2 span{ font-size:36px; display:block; }
.item-header .subtitle{ font-size:16px; color:#ccc; margin-bottom:20px; }
.item-content{ position:relative; max-width:900px; margin:0 auto 20px; }
.item-info{ font-size:16px; line-height:2; max-width:800px; margin:0 auto; color:#fff; }



/* 15) 展開店舗（SHOPLIST） */
.shoplist-section{
  position:relative;
  background:rgba(255,255,255,.9);
  background-image:none !important;
  padding:60px 20px 40px;
  margin:0; text-align:center; z-index:2;
}
.shoplist-heading{
  position:relative; display:inline-block;
  padding:10px 24px; margin-bottom:20px;
}
.shoplist-heading-text{
  position:relative; z-index:3;
  font-size:32px; font-weight:900; font-family:'M PLUS 1', sans-serif; color:#fff;
  text-shadow:-1.5px -1.5px 0 #000, 1.5px -1.5px 0 #000, -1.5px 1.5px 0 #000, 1.5px 1.5px 0 #000;
}
.shoplist-heading::after{
  content:""; position:absolute; inset:0; background:red;
  clip-path: polygon(2% 0%, 100% 0%, 98% 100%, 0% 100%); z-index:2;
}
.shoplist-heading::before{
  content:""; position:absolute; top:3px; left:1px;
  width:calc(100% + 4px); height:calc(100% + 4px);
  background:black; clip-path: polygon(2% 0%, 100% 0%, 98% 100%, 0% 100%); z-index:1;
}
.shoplist-text{ font-size:16px; color:#333; line-height:1.6; margin-bottom:0; }

/* 16) NOVELTY */
.novelty-section{
  position:relative; background:#fff; padding:20px 20px 80px; text-align:center;
  font-family:'Bangers','Impact',sans-serif; isolation:isolate;
}
.novelty-section::before{
  content:""; position:absolute; inset:0;
  background-image:url('https://gigaplus.makeshop.jp/loward/lp/hiroaca2/img/noveback-01.webp');
  background-size:cover; background-position:center; opacity:.67; z-index:-1;
}
.framed-title{ position:relative; display:inline-block; margin-bottom:20px; }
.frame-title-bg{ max-width:500px; width:100%; aspect-ratio:2/1; }
.framed-text{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:100%; padding:0 10px; }
.novelty-title{ font-size:5.2rem; color:#d90000; text-shadow:2px 2px #000; margin:0; }
.novelty-text{ font-size:1rem; color:#333; }
.novelty-note{ font-size:.8rem; color:#fff; margin-top:5px; }
.sticker-images{ display:flex; justify-content:center; gap:20px; margin-top:40px; }
.sticker-images img{ width:285px; height:auto; }

/* 17) フッター */
footer{ background:#222; color:#fff; text-align:center; padding:20px; font-size:.8rem; }

/* 18) Responsive: 大→小 */

/* 1024px～（Intro横並び） */
@media screen and (min-width:1024px){
  .intro{
    display:flex; justify-content:space-between; align-items:flex-start; gap:60px;
    position:relative; z-index:1;
  }
  .intro-box{ width:50%; }
  .intro-section-bg{
    position:relative;
    background-color: rgba(255,165,0,.8);
    background-image:none !important;
    padding:60px 20px 40px; margin:0; z-index:2;
  }
}

/* ～1011px（相澤の寄り調整 → もうrightは使わないので無効化してもOK） */
@media (max-width:1011px){
  /* 何もなし：transformで制御 */
}

/* ～1010px（キャラ位置の押し込み） */
@media screen and (max-width:1010px){
  .character-right,
  .character-right.character-aizawa,
  .character-right.character-bakugo{ right:0; }
  .character-left{ left:0; }
  .item-section-deku .character-img.character-right{ right:0; }
}

/* ～899px（NOVELTY縮小） */
@media screen and (max-width:899px){
  .sticker-images{ flex-direction:column; align-items:center; }
  .frame-title-bg{ max-width:300px; }
  .novelty-title{ font-size:3.3rem; }
  .novelty-text{ font-size:1rem; }
}

/* ～837px（ラベル画像中央寄せ） */
@media screen and (max-width:837px){
  .label-banner-img{ margin-left:auto; margin-right:auto; text-align:center; width:fit-content; }
  .label-banner-img picture, .label-banner-img img{ display:block; margin-left:auto; margin-right:auto; }
}

/* ～768px（ラベル回り＆キャラ縮小） */
@media (max-width:768px){
  .item-section-deku .character-img.character-right{ right:0; bottom:0; max-width:120px; position:absolute; }
  .character-right.character-aizawa{ right:0; bottom:0; max-width:120px; position:absolute; }
  .character-img.character-right.slide-in-right.character-bakugo{
    right:0 !important; max-width: clamp(160px, 40vw, 240px) !important; transform:none !important;
  }
}

/* ～655px（縦積み最適化・右余白0は上で定義済み） */
@media (max-width:655px){
  /* 追加の見た目調整があればここに */
}

/* ～615px（見出し縮小） */
@media screen and (max-width:615px){
  .item-header h2 span{ font-size:24px; }
}

/* ～600px（バースト文字だけ縮小追随） */
@media (max-width:600px){
  .burst-wrap{ width:25vw; }
  .burst-text{ font-size: clamp(16px, 8vw, 53px); }
}

/* ～500px（本文縮小） */
@media screen and (max-width:500px){
  .item-info{ font-size:14px; }
}

/* ～428px（より小さい端末での微調整：フォントのみ） */
@media (max-width:428px){
  .label-text{ font-size:18px !important; line-height:1.4 !important; margin:0 !important; text-wrap:balance; }
  .burst-wrap{ width: clamp(110px, 32vw, 140px) !important; }
  .burst-text{ font-size: clamp(18px, 7.8vw, 30px) !important; transform:translate(-50%,-50%) !important; }
}

/* ～390px（さらにタイト） */
@media (max-width:390px){
  .burst-wrap{ width: clamp(100px, 34vw, 130px) !important; }
  .burst-text{ font-size: clamp(16px, 8.8vw, 28px) !important; }
  .label-text{ font-size: clamp(17px, 5.6vw, 20px) !important; }
}

/* ～375px（SE対策） */


/* ～345px（タイトル極小） */
@media screen and (max-width:345px){
  .novelty-title{ font-size:2.3rem; }
}

/* ---- 横余白の保険（見た目は変えずスクロールだけ抑止） ---- */
@supports (overflow-x: clip){ html { overflow-x: clip; } }

/* ---- 画像の基本安定化 ---- */
img, picture { max-width: 100%; height: auto; }

/* ===============================
   1) キャラ画像（共通／個別）
   =============================== */
.character-img{
  position: absolute;
  bottom: 0;                           /* 下基準で統一 */
  width: clamp(280px, 32vw, 520px);    /* 幅ベース；高さは自動 */
  height: auto;
  object-fit: contain;
  z-index: 2;
  pointer-events: none;
}
.character-left { left: 0; right: auto; transform: translateX(0); }
.character-right{ right: 0; left:  auto; transform: translateX(0); }

/* 左キャラ（共通：外へ少し） */
.character-img.character-left.slide-in-left{ transform: translateX(-40px); }      /* PC */
@media (max-width:1220px) and (min-width:1024px){
  .character-img.character-left.slide-in-left{ transform: translateX(-24px); }
}
@media (max-width:1023px) and (min-width:768px){
  .character-img.character-left.slide-in-left{ transform: translateX(-12px); }
}
@media (max-width:767px) and (min-width:626px){
  .character-img.character-left.slide-in-left{ transform: translateX(-10px); }
}
@media (max-width:625px){
  .character-img.character-left.slide-in-left{
    transform: none;
    width: clamp(220px, 58vw, 360px);
  }
}

/* 右キャラ：爆豪（右へ＋少し上） */
.character-img.character-right.slide-in-right.character-bakugo{
  transform: translate(120px, -40px);          /* PC：右120 / 上40 */
  width: clamp(320px, 34vw, 520px);
}
@media (max-width:1220px) and (min-width:1024px){
  .character-img.character-right.slide-in-right.character-bakugo{
    transform: translate(80px, -30px);
    width: clamp(300px, 32vw, 480px);
  }
}
@media (max-width:1023px) and (min-width:768px){
  .character-img.character-right.slide-in-right.character-bakugo{
    transform: translate(48px, -20px);
    width: clamp(280px, 38vw, 440px);
  }
}
@media (max-width:767px) and (min-width:626px){
  .character-img.character-right.slide-in-right.character-bakugo{
    transform: translate(44px, -18px);
    width: clamp(260px, 44vw, 420px);
  }
}
@media (max-width:625px){
  .character-img.character-right.slide-in-right.character-bakugo{
    transform: none;
    width: clamp(220px, 56vw, 360px);
  }
}

/* 右キャラ：相澤（必要なら使用。不要なら削除OK） */
.character-img.character-right.slide-in-right.character-aizawa{
  transform: translateX(72px);                    /* PC */
  width: clamp(320px, 34vw, 500px);
}
@media (max-width:1220px) and (min-width:1024px){
  .character-img.character-right.slide-in-right.character-aizawa{ transform: translateX(48px); }
}
@media (max-width:1023px) and (min-width:768px){
  .character-img.character-right.slide-in-right.character-aizawa{ transform: translateX(20px); }
}
@media (max-width:767px) and (min-width:626px){
  .character-img.character-right.slide-in-right.character-aizawa{ transform: translateX(16px); }
}
@media (max-width:625px){
  .character-img.character-right.slide-in-right.character-aizawa{
    transform: none; width: clamp(220px, 56vw, 360px);
  }
}

/* ===============================
   2) ラベル右の飾り（label-visual）
   =============================== */
.label-visual{
  position: absolute;
  right: 0; top: -70px;
  width: 140px;
  height: auto;
  transform: translateX(40px);      /* 見た目だけ外へ（幅に加算されない） */
  z-index: 10;
  pointer-events: none;
}
@media (max-width:1220px) and (min-width:1024px){
  .label-visual{ width: 120px; transform: translateX(24px); }
}
@media (max-width:1023px) and (min-width:768px){
  .label-visual{ width: 112px; transform: translateX(12px); top: -40px; }
}
@media (max-width:767px) and (min-width:626px){
  .label-visual{ width: 112px; transform: translateX(12px); top: -40px; }
}
/* 625px以下：label-visual を右上に固定（中央寄せをやめる） */
@media (max-width:625px){
  .label-visual{
    left: auto !important;     /* 中央寄せ解除 */
    right: 0 !important;       /* 右端基準 */
    top: -24px !important;     /* 少し上に浮かせる（必要なら -30 ~ -10 で微調整） */
    width: 100px !important;   /* モバイル用の見せ幅（90~112で調整可） */
    transform: translateX(8px) !important; /* ちょい外へ。被るなら 0 ~ 12px */
  }
}

/* ===============================
   3) ラベル本文（label-banner-content）
   =============================== */
/* PC時の逃げ量：画像140 + 張り出し40 + 隙間12 + 内側16 = 208 */
.label-banner-content{
  display: flex;
  align-items: flex-start;     /* 上揃えの方が崩れにくい */
  gap: 16px;
  min-width: 0;
  padding-right: 208px;
  z-index: 1;
}
@media (max-width:1220px) and (min-width:1024px){
  .label-banner-content{ padding-right: 168px; }  /* 16 + 120 + 24 + 8 */
}
@media (max-width:1023px) and (min-width:768px){
  .label-banner-content{ padding-right: 36px; }   /* 16 + 12 + 8（幅ぶんは逃がさない） */
}
@media (max-width:767px) and (min-width:626px){
  .label-banner-content{ padding-right: 36px; }
}
@media (max-width:625px){
  .label-banner-content{
    flex-direction: column; align-items: center;
    gap: 8px; padding-right: 0; text-align: center;
  }
}

/* ===== 横スクロール抑止 + 位置/サイズ 上書きパッチ v1.1（最後に追記） ===== */

/* ① 横スクロール保険（clip → 非対応は hidden にフォールバック） */
html { overflow-x: clip; }
@supports not (overflow-x: clip){
  html, body { overflow-x: hidden; }
}

/* ② 調整パックの押し出し＆サイズを“安全値”に微下げ（上書き） */

/* PC（&#8805;1221px） */
@media (min-width:1221px){
  .character-img.character-left.slide-in-left{
    width: clamp(400px, 20vw, 450px) !important;
    transform: translateX(-100px) !important;      /* -56px → -48px */
  }
  .character-img.character-right.slide-in-right.character-bakugo{
    width: clamp(250px, 15vw, 450px) !important;
    transform: translate(112px, -100px) !important; /* 140px → 112px */
  }
  .character-img.character-right.slide-in-right.character-aizawa{
    width: clamp(150px, 13vw, 150px) !important;
    transform: translateX(72px) !important;        /* 88px → 72px */
  }
}

/* 1024&#8211;1220px */
@media (max-width:1220px) and (min-width:1024px){
  .character-img.character-left.slide-in-left{
    width: clamp(310px, 34vw, 500px) !important;
    transform: translateX(-80px) !important;       /* -40px → -32px */
  }
  .character-img.character-right.slide-in-right.character-bakugo{
    width: clamp(250px, 15vw, 500px) !important;
    transform: translate(85px, -100px) !important; /* 140px → 112px */
  }
  .character-img.character-right.slide-in-right.character-aizawa{
    width: clamp(150px, 13vw, 150px) !important;
    transform: translateX(56px) !important;        /* 64px → 56px */
  }
}

/* 768&#8211;1023px（最も揺れやすい帯） */
@media (max-width:1023px) and (min-width:768px){
  .character-img.character-left.slide-in-left{
    width: clamp(280px, 40vw, 460px) !important;
    transform: translateX(-60px) !important;       /* -16px → -10px */
  }
  .character-img.character-right.slide-in-right.character-bakugo{
    width: clamp(250px, 15vw, 500px) !important;
    transform: translate(50px, -120px) !important; /* 140px → 112px */
  }
  .character-img.character-right.slide-in-right.character-aizawa{
    width: clamp(150px, 13vw, 150px) !important;
    transform: translateX(20px) !important;        /* 24px → 20px */
  }
}

/* 626&#8211;767px（境目吸収） */
@media (max-width:767px) and (min-width:626px){
  .character-img.character-left.slide-in-left{
    width: clamp(280px, 40vw, 460px) !important;
    transform: translateX(-50px) !important;        /* -12px → -8px */
  }
  .character-img.character-right.slide-in-right.character-bakugo{
    width: clamp(250px, 15vw, 500px) !important;
    transform: translate(40px, -100px) !important; /* 140px → 112px */
  }
  .character-img.character-right.slide-in-right.character-aizawa{
    width: clamp(150px, 13vw, 150px) !important;
    transform: translateX(14px) !important;        /* 16px → 14px */
  }
}


    /* ===== 626&#8211;1080px の横余白を確実に消すパッチ（末尾に追記） ===== */

/* 1) まずはこの帯だけ横方向を安全にクリップ（clip非対応はhidden） */
@media (max-width:1080px) and (min-width:626px){
  .label-banner-box,
  .item-section-deku,
  .item-section-bakugo,
  .item-section-syoto,
  .item-section-tomura,
  .item-section-otyako,
  .shoplist-section,
  .novelty-section {
    position: relative;
    overflow-x: clip;
  }
}
@supports not (overflow-x: clip){
  @media (max-width:1080px) and (min-width:626px){
    .label-banner-box,
    .item-section-deku,
    .item-section-bakugo,
    .item-section-syoto,
    .item-section-tomura,
    .item-section-otyako,
    .shoplist-section,
    .novelty-section { overflow-x: hidden; }
  }
}

/* 2) この帯の“押し出し量”をほんの少し弱めて安全側に（見た目はほぼ同じ） */
@media (max-width:1080px) and (min-width:626px){
  /* 右の飾り（ラベル） */
  .label-visual{
    width: 110px !important;
    top: -36px !important;
    right: 0 !important;
    transform: translateX(10px) !important; /* 12→10に微下げ */
  }
  .label-banner-content{ padding-right: 32px !important; } /* 36→32に微下げ */

}		
		/* ===== SP（&#8804;625px）専用・最小オーバーライド ===== */
@media (max-width:625px){
  /* 横スクロール保険（この帯だけ） */
  html { overflow-x: clip; }
  @supports not (overflow-x: clip){
    html, body { overflow-x: hidden; }
  }

  /* 左キャラ デク*/
  .character-img.character-left.slide-in-left{
    left: 0 !important; right: auto !important; bottom: 0 !important;
    width: clamp(150px, 15vw, 200px) !important;  /* ←お好みで調整 */
    height: auto !important;
    transform: translateX(-50px) !important;      /* もっと左へなら -12/-16px など */
  }

  /* 右キャラ：爆豪 */
  .character-img.character-right.slide-in-right.character-bakugo{
    right: 0 !important; left: auto !important; bottom: 0 !important;
    width: clamp(240px, 50vw, 390px) !important;  /* ←お好みで調整 */
    height: auto !important;
    transform: translateX(18px) !important;       /* もっと右へなら 12/16px など */
    /* 少し上げたい時だけ ↓ の1行に変更 → transform: translate(10px, -6px) !important; */
  }

  /* 右キャラ：相澤 */
  .character-img.character-right.slide-in-right.character-aizawa{
    right: 0 !important; left: auto !important; bottom: 0 !important;
    width: clamp(70px, 5vw, 130px) !important;  /* ←お好みで調整 */
    height: auto !important;
    transform: translateX(8px) !important;        /* 右へ寄せ：+、左へ寄せ：- */
    /* 少し上げたい時だけ ↓ の1行に変更 → transform: translate(6px, -6px) !important; */
  }
}
/* ===== &#8805;626px：ラベル画像と被らないための右内余白 ===== */

/* PC基準：画像140 + 張り出し40 + 隙間12 + 内側16 = 208px */
@media (min-width:1221px){
  .label-banner-box .label-banner-content,
  .label-banner-box .label-textwrap,
  .label-banner-box .label-text{
    padding-right: 36px !important;
  }
}

/* 1024&#8211;1220px：画像120 + 張り出し24 + 隙間8 + 内側16 = 168px */
@media (max-width:1220px) and (min-width:1024px){
  .label-banner-box .label-banner-content,
  .label-banner-box .label-textwrap,
  .label-banner-box .label-text{
    padding-right: 36px !important;
  }
}

/* 768&#8211;1023px：幅ぶんは逃がさず “押し出し量(12) + 隙間8 + 内側16 = 36px” */
@media (max-width:1023px) and (min-width:768px){
  .label-banner-box .label-banner-content,
  .label-banner-box .label-textwrap,
  .label-banner-box .label-text{
    padding-right: 36px !important;
  }
}

/* 626&#8211;767px：上と同等（境目のガタつき防止） */
@media (max-width:767px) and (min-width:626px){
  .label-banner-box .label-banner-content,
  .label-banner-box .label-textwrap,
  .label-banner-box .label-text{
    padding-right: 36px !important;
  }
}

    /* ===== SP（&#8804;625px）：#aizawa のラベル画像だけ 右上にさらに寄せる ===== */
@media (max-width:625px){
  /* 右上固定＋もう少し外側へ（値はお好みで 12&#12316;20px 程度） */
  #aizawa .label-visual{
    left: auto !important;
    right: 0 !important;
    top: -120px !important;        /* もう少し上なら -28&#12316;-36px へ */
    width: 130px !important;      /* 90&#12316;112px で微調整可 */
    transform: translateX(16px) !important;  /* ← “さらに右へ” のつまみ（8→16→20） */
  }
}

/* ===== &#8805;626px：ラベル本文を上下センターに ===== */
@media (min-width:626px){
  /* テキスト行・バーストを含む本文ブロックを縦方向中央揃えに */
  .label-banner-content{
    display: flex;
    align-items: center !important;  /* ← ここで flex-start を上書き */
  }
  /* 念のため：内側のラッパもセルフ中央に寄せる */
  .label-textwrap,
  .burst-wrap{
    align-self: center;
  }
}
/* === LP幅がウインドウに合わない日替わりズレの固定パッチ === */

/* 1) スクロールバーの有無で横幅が揺れないように常に溝を確保 */
html { scrollbar-gutter: stable both-edges; }

/* 2) 横スクは出さず、視覚ビューポート幅に合わせる（clip非対応はhidden） */
html { overflow-x: clip; }
@supports not (overflow-x: clip){
  html, body { overflow-x: hidden; }
}

/* 3) フルブリード要素がもし 100vw を使っている時の保険（視覚ビューポート基準に） */
@supports (width: 100svw){
  .main-banner,
  .main-banner img {
    inline-size: 100svw;          /* 100vwの代わりに“見えている幅”を採用 */
    max-inline-size: 100svw;
  }
}

/* 4) 右上ちょい出し系のセクションは、見た目だけはみ出してもレイアウト幅は広げない */
.label-banner-box,
.item-section-deku,
.item-section-bakugo,
.item-section-syoto,
.item-section-tomura,
.item-section-otyako,
.shoplist-section,
.novelty-section { position: relative; overflow-x: clip; }
@supports not (overflow-x: clip){
  .label-banner-box,
  .item-section-deku,
  .item-section-bakugo,
  .item-section-syoto,
  .item-section-tomura,
  .item-section-otyako,
  .shoplist-section,
  .novelty-section { overflow-x: hidden; }
}

/* 5) 小数点の丸め誤差で“1pxの白”が出る帯の保険（中幅が特に出やすい） */
@media (max-width:1080px) and (min-width:626px){
  .label-visual { transform: translateX(10px); }    /* 12→10pxに微弱化（必要なら元に戻してOK） */
  .label-banner-content { padding-right: 32px; }    /* 36→32pxに微弱化（連動） */
}
    
</style>


