@charset "UTF-8";
/* ══ バナースライダー（トップ画像）══
   front/banner_slider.php から読み込まれる共通スタイル。
   以前は各ページのHTMLに直接書き出していたが、
   毎回同じ数KBが本文に混ざるので外に出した。
   店舗ごとに変えたいときは、店舗の custom.css で
   下の CSS 変数を上書きする（例: .mg-hero-frame{--slider-max-width:100%}）。 */

/* ═══ バナースライダー ═══
   カスタマイズはここのCSS変数を変更してください */
:root {
  --slider-max-width: 1080px;
  --slider-radius: 12px;
  --slider-aspect-pc: 16 / 5;
  --slider-aspect-sp: 4 / 3;
  --slider-gap: 24px;
  --catch-color: #111827;
  --sub-color: #6b7280;
  --catch-size: 20px;
  --sub-size: 13px;
  --dot-color: #e8d5da;
  --dot-active: #c05070;
}

.bn-slider-wrap {
  max-width: var(--slider-max-width);
  margin: 0 auto var(--slider-gap);
  padding: 0 16px;
  box-sizing: border-box;
}
.bn-slider {
  position: relative;
  border-radius: var(--slider-radius);
  overflow: hidden;
  background: #f3f4f6;
}
.bn-slides {
  display: flex;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}
.bn-slide {
  flex: 0 0 100%;
  min-width: 0;
}
.bn-slide a,
.bn-slide-inner {
  display: block;
  text-decoration: none;
  color: inherit;
}
/* PC画像 */
.bn-img-pc {
  width: 100%;
  aspect-ratio: var(--slider-aspect-pc);
  object-fit: cover;
  display: block;
}
/* SP画像 — デフォルト非表示 */
.bn-img-sp {
  display: none;
  width: 100%;
  aspect-ratio: var(--slider-aspect-sp);
  object-fit: cover;
}
/* テキストエリア */
.bn-text {
  padding: 14px 18px 16px;
  background: #fff;
}
.bn-catch {
  font-size: var(--catch-size);
  font-weight: 700;
  color: var(--catch-color);
  line-height: 1.4;
  margin-bottom: 4px;
}
.bn-sub {
  font-size: var(--sub-size);
  color: var(--sub-color);
  line-height: 1.6;
}
/* 矢印ボタン */
.bn-arrow {
  position: absolute;
  /* .bn-slider（画像の箱）に対して上下中央。
     以前は未定義の変数を使っていて、画像の上から15%の高さに出ていた。 */
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 36px; height: 36px;
  background: rgba(255,255,255,0.85);
  border: none; border-radius: 50%;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  transition: background 0.15s;
}
.bn-arrow:hover { background: #fff; }
.bn-arrow-prev { left: 10px; }
.bn-arrow-next { right: 10px; }
/* ドット */
.bn-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 10px 0 4px;
  background: #fff;
}
.bn-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--dot-color);
  border: none; cursor: pointer;
  padding: 0;
  transition: background 0.2s, transform 0.2s;
}
.bn-dot.active {
  background: var(--dot-active);
  transform: scale(1.3);
}
/* SP対応 */
@media (max-width: 600px) {
  .bn-img-sp { display: block; }
  .bn-img-pc { display: none; }
  .bn-slider-wrap { padding: 0 10px; }
  .bn-catch { font-size: calc(var(--catch-size) * 0.85); }
  .bn-arrow { width: 30px; height: 30px; }
}