/* ==================================================
   SHOP：最終固定（これだけで決める）
   目的：
   - PC：リード文1行（2つの<p>を横並び）
   - SP：リード文2行＋行間を確実に詰める
   - バナー：枠固定＋85%見え（左右余白）
   - gap / 余白を統一
   - YouTube：画像だけ70%
================================================== */

/* --- ベース --- */
.shop-page{ max-width: 900px; margin: 0 auto; padding: 32px 16px 64px; }
.shop-hero{ position: relative; background:#191970; border-radius:18px; overflow:hidden; margin:0 0 22px; height:auto; }
.shop-panel{ position:relative; z-index:2; padding: 26px 18px 22px; text-align:center; }
.shop-blob{ position:absolute; inset:0; pointer-events:none; z-index:1; }

/* --- リード文：必ずpに当てる（行間が効かない問題を根絶） --- */
.shop-text.shop-lead p{
  margin: 0 0 10px !important;
  line-height: 1.55 !important;
  color: rgba(240,242,245,.70);
}
.shop-text.shop-lead p:last-child{ margin-bottom: 0 !important; }

/* PC：2つのpを横並び＝1行 */
@media (min-width: 769px){
  .shop-text.shop-lead{
    display:flex !important;
    justify-content:center;
    align-items:baseline;
    gap:.35em;
    margin-top: 18px;
  }
  .shop-text.shop-lead p{
    white-space: nowrap;
    font-size: 16px !important;
    line-height: 1.25 !important;   /* ←PCの行間を詰める（1行なので低め） */
    margin: 0 !important;
  }
}

/* SP：2行、行間詰め（ここが「効かない」を終わらせる） */
@media (max-width: 768px){
  .shop-panel{ padding: 18px 14px 16px; }
  .shop-text.shop-lead{ display:block !important; margin-top: 14px; }
  .shop-text.shop-lead p{
    font-size: 14px !important;
    line-height: 1.35 !important;   /* ←SP行間：ここで確定 */
    margin: 0 0 6px !important;     /* ←2行間の隙間 */
  }
  .shop-text.shop-lead p:last-child{ margin-bottom: 0 !important; }
}

/* --- バナー群（間隔） --- */
.shop-banners{
  margin-top: 18px;
  display: grid;
  gap: 12px;                         /* ←標準 */
}
@media (min-width: 769px){
  .shop-banners{ gap: 6px !important; } /* PC：詰める（半分以下） */
}
@media (max-width: 768px){
  .shop-banners{ gap: 10px !important; } /* SP：詰める */
}

/* --- バナー：枠固定＋85%見え（余白はpaddingで作る） --- */
.shop-banners a.shop-banner{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
  transform:none !important;
  padding: 0 7.5% !important;        /* ←85%見え */
}
.shop-banners a.shop-banner img{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  height:auto !important;
  margin:0 !important;
}

/* --- YouTube：画像だけ70% --- */
.shop-panel--youtube a.shop-youtube-banner img{
  display:block !important;
  width:70% !important;
  max-width:70% !important;
  height:auto !important;
  margin:0 auto !important;
}

/* --- 画像ははみ出さない保険 --- */
.shop-page img{ max-width:100% !important; height:auto; display:block; }

/* =========================
   SHOP：blob（回転＋::before周回）参照方式
========================= */

/* 回転アニメ（参照と同じ） */
@keyframes shop_blob_rotate{
  0%{ transform: rotate(0deg); }
  100%{ transform: rotate(360deg); }
}

/* レイヤ */
.shop-blob{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:1;
}

/* 前面 */
.shop-panel{
  position:relative;
  z-index:2;
}

/* 親：中心で回転（ここは transform を “回転専用” にする） */
.shop-blob__item{
  position:absolute;
  left:50%;
  top:50%;
  width:1px;               /* 実体は::beforeに持たせる */
  height:1px;
  animation: shop_blob_rotate linear infinite !important;
  will-change: transform;
}

/* 実体：中心からズラして配置（これが周回する） */
.shop-blob__item::before{
  content:"";
  position:absolute;
  border-radius:50%;
  opacity:.85;
  filter: blur(24px);
  transform: translate(-50%, -50%);
}

/* 1 */
.shop-blob__1{ animation-duration: 35s !important; }
.shop-blob__1::before{
  left: -140px;
  top:  120px;
  width: 360px;
  height: 360px;
  background: radial-gradient(rgba(80,140,200,.65) 0%, rgba(80,140,200,0) 70%);
}

/* 2（逆回転） */
.shop-blob__2{
  animation-duration: 30s !important;
  animation-direction: reverse !important;
}
.shop-blob__2::before{
  left:  230px;
  top: -220px;
  width: 520px;
  height: 520px;
  background: radial-gradient(rgba(160,90,180,.55) 0%, rgba(160,90,180,0) 70%);
}

/* 3 */
.shop-blob__3{ animation-duration: 25s !important; }
.shop-blob__3::before{
  left:  360px;
  top:  210px;
  width: 680px;
  height: 680px;
  background: radial-gradient(rgba(90,180,150,.45) 0%, rgba(90,180,150,0) 70%);
}

/* SP：サイズとオフセットだけ縮小（参照と同じ思想） */
@media (max-width: 768px){

  .shop-blob__1::before{
    left: -60px; top: 60px;
    width: 260px; height: 260px;
  }

  .shop-blob__2::before{
    left: 160px; top: -160px;
    width: 360px; height: 360px;
  }

  .shop-blob__3::before{
    left: 240px; top: 140px;
    width: 520px; height: 520px;
  }
}
/* パフォーマンス安定 */
.shop-blob__item{
  will-change: transform;
}
.shop-blob__item::before{
  will-change: transform;
}

/* =========================
   SHOP：バナーの水色（強制除去）
========================= */
.shop-banners a.shop-banner{
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  border: none !important;
  filter: none !important;
}

.shop-banners a.shop-banner::before,
.shop-banners a.shop-banner::after{
  content: none !important;
  display: none !important;
}

.shop-banners a.shop-banner img{
  filter: none !important;
  box-shadow: none !important;
  outline: none !important;
  border: none !important;
}
/* SHOP：上ブロック全体の天地を詰める */
.shop-panel{
  padding-top: 16px !important;
  padding-bottom: 14px !important;
}
.shop-banners a.shop-banner{
  padding: 0 !important;
}
.shop-banners a.shop-banner{
  display: flex !important;
  justify-content: center;
}

.shop-banners a.shop-banner img{
  width: 70% !important;
  max-width: 70% !important;
  margin: 0 !important;
}
.shop-banners a.shop-banner{
  margin: 4px 0 !important; /* ← ここだけ触る */
}
/* =========================
   SHOP：天地調整（安全）
========================= */
.shop-banners a.shop-banner{
  margin: 4px 0 !important;  /* ここを 2〜6px で微調整 */
}
/* =========================
   SHOP：バナー安定化②（70%はimgで）
========================= */
.shop-banners a.shop-banner{
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.shop-banners a.shop-banner img{
  width: 70% !important;
  max-width: 70% !important;
  height: auto !important;
  margin: 0 !important;
  display: block !important;
}
/* =========================
   SHOP：天地調整（安全）
========================= */
.shop-banners a.shop-banner{
  margin: -10px 0 !important;  /* ここを 2〜6px で微調整 */
}
@media (max-width: 768px){
  .shop-banners{ gap: 5px !important; }
}
@media (min-width: 769px){
  .shop-banners{ gap: 6px !important; }
}
/* =========================
   SHOP：バナー間隔 最終（これだけ）
========================= */

/* <br> が残ってても無効化 */
body.page-id-3051 .shop-banners br{
  display: none !important;
}

/* バナーは縦に並べて、間隔は gap だけで作る */
body.page-id-3051 .shop-banners{
  display: flex !important;
  flex-direction: column !important;
  gap: 30px !important;                 /* ← ここが“天地30px” */
  margin-top: 18px !important;
}

/* marginで間隔を作らない（gapだけにする） */
body.page-id-3051 .shop-banners > a.shop-banner{
  margin: 0 !important;
}

/* バナー画像は歪ませない（今の70%運用ならそのまま） */
body.page-id-3051 .shop-banners > a.shop-banner img{
  display: block !important;
  width: 90% !important;
  height: auto !important;
  margin: 0 auto !important;
}