/* ============================
   SP(～800px): kvを“正方形”に固定
   ============================ */
@media (max-width: 800px) {
  /* まず、JSが高さを付けがちな所を無効化 */
  body.home .c-kv,
  body.home .c-kv[style*="height"] {
    height: auto !important;
  }

  /* 親(=内側)を正方形にして箱を決める */
  body.home .c-kv .c-kv__inner,
  body.home .c-kv .c-kv__inner[style] {
    position: relative !important;
    height: auto !important;
    aspect-ratio: 1 / 1;            /* ここで正方形 */
    overflow: hidden !important;
  }

  /* 中身（動画/スライダー）は箱に100%フィット */
  body.home .c-kv .c-kv__movie,
  body.home .c-kv .c-kv__slider_wrapper,
  body.home .c-kv .c-kv__movie[style],
  body.home .c-kv .c-kv__slider_wrapper[style],
  body.home .c-kv .swiper,
  body.home .c-kv .swiper-wrapper,
  body.home .c-kv .swiper-slide {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
  }

  /* 画像はそのまま利用（トリミングはobject-fitで） */
  body.home .c-kv .swiper-slide img,
  body.home .c-kv .c-kv__slider_wrapper .kv-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 80% !;
  }

  /* SPで動画を見せないなら（任意） */
  /* body.home .c-kv .c-kv__movie {
    display: none !important;
  } */
}

/* PC/タブレット(801px～)は既存ロジック維持 */
@media (min-width: 801px) {
  body.home .c-kv .c-kv__inner { aspect-ratio: auto; }
}

/* =========================
   SP(～800px) KV：ロゴ＋コピーのレイアウトを安定化
   ========================= */
@media (max-width: 800px) {
  /* ---- 可変値：ここだけ触れば全体のバランスを微調整 ---- */
  :root {
    --kv-copy-offset-y: 70%;                    /* 40–65%で好みに調整 */
    --kv-gap: clamp(6px, 2.4vw, 14px);
    --kv-logo-h: 80px;                          /* ← ロゴは“縦サイズ指定”で安定 */
    --kv-h1: clamp(20px, 4.2vw, 28px);
    --kv-body: clamp(16px, 3.5vw, 20px);
    --kv-maxw: 280px;                           /* テキストブロックの最大幅 */
    --kv-zoom: 1.12;  /* 1.03～1.12くらいが実用域 */
  }

  /* 中央やや下：正確なセンタリング＆幅をクランプ */
  body.home .c-kv .c-kv__slider_wrapper .kv-copy {
    position: absolute !important;
    left: 50%;
    top: var(--kv-copy-offset-y);
    transform: translate(-50%, -50%);
    width: min(92%, var(--kv-maxw));
    padding: 0 8px;
    text-align: center !important;
    line-height: 1.55;
  }

    /* 画像タグのスライド両対応 */
  body.home .c-kv .swiper-slide img,
  body.home .c-kv .c-kv__slider_wrapper .kv-slide img {
    transform: scale(var(--kv-zoom));
    transform-origin: center center;
    will-change: transform;
    /* 既存styleに負ける場合 */
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
  }

  /* はみ出し防止（保険） */
  body.home .c-kv .c-kv__slider_wrapper,
  body.home .c-kv .swiper,
  body.home .c-kv .swiper-slide {
    overflow: hidden !important;
  }

    /* ====== A) <img class="kv-logo" src="...svg"> 版 ====== */
  body.home .kv-copy .kv-logo {
    height: var(--kv-logo-h);
    width: auto;                 /* ← 幅は自動で比率維持 */
    display: inline-block;
    margin: 0 auto var(--kv-gap);
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.35));
  }

  /* ====== B) .marbb-miraicare 疑似要素 版 ====== */
  .marbb-miraicare {
    width: min(92%, var(--kv-maxw));
    height: var(--kv-logo-h);
    margin: 0 auto var(--kv-gap) !important;
    position: relative;
  }
  .marbb-miraicare::before {
    content: "";
    position: absolute; inset: 0;
    display: block;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }

  /* 見出し／本文 */
  body.home .kv-copy .kv-heading {
    font-size: var(--kv-h1) !important;
    font-weight: 600;
    letter-spacing: .06em;
    line-height: 1.25;
    text-shadow: 0 2px 6px rgba(0,0,0,.35);
    margin: 0 0 calc(var(--kv-gap) - 2px);
  }
  body.home .kv-copy .kv-text {
    font-size: var(--kv-body) !important;
    line-height: 1.8;
    text-shadow: 0 2px 6px rgba(0,0,0,.35);
    margin: 2em auto .5em auto;
  }

  /* 既存のサイズ指定を衝突回避でリセット */
  .c-kv .c-kv__slider_wrapper .kv-copy { font-size: initial; }
  .c-kv .c-kv__slider_wrapper .kv-copy .kv-text {
    font-size: var(--kv-body) !important;
}

  /* 左右の白グラデで“抜け”を抑えたい場合（任意） */
  .c-kv .c-kv__slider_wrapper::before {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(255,255,255,.35), rgba(255,255,255,0) 30%, rgba(255,255,255,0) 70%, rgba(255,255,255,.35));
    pointer-events: none;
  }
}

/* ===== Front Page only (scoped by body.home) ===== */

/* セクションの占有高さと基準を持たせる */
body.home .c-kv{
  position: relative;
  min-height: calc(var(--vh, 1vh) * 100);
}
@media (max-width: 800px) {
body.home .c-kv{
  min-height: auto !important;
}
}

body.home .c-kv .c-kv__inner{
  position: relative;      /* 絶対配置の子の基準 */
  overflow: hidden;        /* ヒーロー内で切り抜き */
  height: calc(var(--vh, 1vh) * 100);
}

/* 絶対配置の子（既存設計を活かす） */
body.home .c-kv .c-kv__movie,
body.home .c-kv .c-kv__slider_wrapper{
  position: absolute;
  inset: 0;
  width: 100%;
  height: calc(var(--vh, 1vh) * 100);
  overflow: hidden;
  background: #000;
}

/* 前面化（既存ルールを補強） */
body.home .c-kv.mode-video  .c-kv__movie{ position: relative; z-index: 1; }
body.home .c-kv.mode-slider .c-kv__slider_wrapper{ position: relative; z-index: 1; }
body.home .c-kv.mode-both   .c-kv__movie{ z-index: 0; }

/* 中身のフィット */
body.home .c-kv .kv-slide img,
body.home .c-kv .kv-slide video{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

/* スライドの見せ方（フェード前提） */
body.home .c-kv .kv-slide { opacity: 0; pointer-events: none; transition: opacity .6s ease; }
body.home .c-kv .kv-slide.is-active { opacity: 1; pointer-events: auto; }

/* 外出しナビ（共通・控えめに） */
body.home .c-kv .kv-nav{
  display:flex; align-items:center; justify-content:center;
  gap: clamp(12px, 2vw, 20px);
  margin-top: clamp(10px, 2.2vw, 18px);
}
body.home .c-kv .kv-prev,
body.home .c-kv .kv-next{
  display:inline-grid; place-items:center;
  width: 24px; height: 24px;
  border: 1px solid rgba(0,0,0,.2);
  border-radius: 999px;
  background: #fff;
  font-size: 18px;
  font-weight: bold;
  line-height: 0.7;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
body.home .c-kv .kv-prev:hover,
body.home .c-kv .kv-next:hover{ transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0,0,0,.12); }
body.home .c-kv .kv-dots{ display:flex; align-items:center; gap: 8px; }
body.home .c-kv .kv-dot{
  width: 10px; height: 10px; border-radius: 999px; border: 0;
  background: rgba(0,0,0,.25); cursor: pointer; padding: 0;
}
body.home .c-kv .kv-dot[aria-selected="true"]{ background: rgba(0,0,0,.75); }

body.home .l-main > section.c-kv {
    margin-bottom: 60px;
}

@media (max-width:800px){
  body.home .c-kv .kv-prev, body.home .c-kv .kv-next{
     width: 36px; height: 36px; font-size: 18px;
    }

}