/* 枠 */
.case-carousel{ 
  --case-arrow-color: #707070;
  --carousel-gap: 2rem;
  position: relative; 
}

/* トラック：横並び＋スナップ */
.case-carousel .wp-block-query .wp-block-post-template{
  display:flex; gap:var(--carousel-gap); overflow-x:auto;
  padding:.25rem 1rem;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scroll-behavior:smooth;
}

/* 各スライド（カード） */
.case-carousel .wp-block-post-template > .wp-block-post{
  flex:0 0 auto;
  width:82vw;              /* SP：1.2枚見せ */
  max-width:520px;
  scroll-snap-align:start;
}

/* 画像の角丸など（任意） */
.case-carousel .wp-block-post-featured-image img{
  width:100%;
  height:auto;
  display:block;
  border-radius:1.5rem 0.2rem;
}

/* PCで3枚並び */
@media (min-width:1024px){
  .case-carousel .wp-block-query .wp-block-post-template{
    padding-inline:0;                        /* 左右パディングを0に */
  }
  .case-carousel .wp-block-post-template > .wp-block-post{
    width:calc((100% - (2 * var(--carousel-gap))) / 3);
    max-width:none;
  }
}

/* 矢印ボタン（ボタンブロック本体を絶対配置） */
.case-carousel .wp-block-button.js-case-prev,
.case-carousel .wp-block-button.js-case-next{
  position:absolute; top:50%; transform:translateY(-50%);
  z-index:2; background:#fff; border-radius:9999px;
  box-shadow:0 4px 20px rgba(0,0,0,.12);
  width:40px; height:40px; display:grid; place-items:center;
  user-select:none;
}
.case-carousel .wp-block-button.js-case-prev{ left:2rem; }
.case-carousel .wp-block-button.js-case-next{ right:2rem; }

/* 背景・シャドウを削除（親ボタン要素） */
.case-carousel .wp-block-button.js-case-prev,
.case-carousel .wp-block-button.js-case-next{
  background: transparent !important;
  box-shadow: none !important;
}

.case-carousel{  } 

/* 内側リンクにも反映（テーマ側のデフォルトを打ち消し） */
.case-carousel .wp-block-button.js-case-prev .wp-block-button__link,
.case-carousel .wp-block-button.js-case-next .wp-block-button__link{
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0;                 /* クリック面積は親の width/height で確保 */
  line-height: 1;
  color: var(--case-arrow-color) !important;
  transition: none;
}

/* Firefox */
.case-carousel .wp-block-query .wp-block-post-template{
  scrollbar-width: none;  /* ← 非表示 */
  -ms-overflow-style: none; /* 旧Edge/IE 非表示 */
}

/* Chrome / Safari / Edge (Chromium) */
.case-carousel .wp-block-query .wp-block-post-template::-webkit-scrollbar{
  width: 0;
  height: 0;  /* 横スクロールバーを消す */
}

@media (prefers-reduced-motion:reduce){
  .case-carousel .wp-block-post-template{ scroll-behavior:auto; }
}

/* 画像とタイトルを重ねる土台 */
.case-carousel .case-card__media{
  position: relative;
  border-radius: 1.5rem 3px;      /* 角丸は土台に付ける */
  overflow: hidden;          /* 白いタイトルボックスがはみ出さない */
}

/* アイキャッチの素振り */
.case-carousel .case-card__media .wp-block-post-featured-image img{
  display:block;
  width:100%;
  height:auto;
}

/* 重ねるタイトル（左下） */
.case-carousel .case-card__title{
  position: absolute;
  left: 0;
  bottom: 0;
  margin: 0 !important;      /* 見出しのデフォルト余白を無効化 */
  line-height: 1.2;
  max-width: calc(100% - 24px); /* 端からはみ出さない */
}
.case-carousel .case-card__title a{
  display: inline-block;
  background: #fff;
  color: #111;
  font-weight: 700;
  text-decoration: none;
  padding: .5rem .75rem;
  border-radius: 0 0.5rem 0 3px;
  box-shadow: 0 2px 12px rgba(0,0,0,.08);
  font-size: clamp(12px, 1.6vw, 16px); /* お好みで */
}
.case-carousel .case-card__title a:hover{ text-decoration: none; }
.case-carousel .case-card__title a:focus-visible{
  outline: 2px solid var(--case-accent, #0ea5e9);
  outline-offset: 2px;
  border-radius: .6rem;
}

/* 画像下に続くテキストの余白（任意） */
.case-carousel .wp-block-post-excerpt{ margin-top: .75rem; }

/* 修理内容 */
.case-carousel .case-card__repair{
  margin-top:.5rem; color:#333; font-size:.95rem; line-height:1.6;
}
.case-carousel .case-card__repair .label{
  font-weight:700; margin-right:.25rem;
}