/* additional styles here if needed */

/* ─────────────────────────────────
   モバイル最適化（~480px）
   ───────────────────────────────── */
@media (max-width: 480px){
  /* ベース・タイポ */
  html, body { font-size: 15px; }
  .small { font-size: 11px; }

  /* ヘッダー */
  .site-header .inner { padding: 10px 0; }
  .brand .logo { width: 36px; height: 36px; }
  .brand .title { font-size: 16px; }
  .header-cta { gap: 6px; }
  .header-cta .tel { font-weight: 700; }

  /* ヒーロー */
  .hero { padding: 32px 0 20px; }
  .hero .lead { font-size: 24px; line-height: 1.3; }
  .hero .sub { font-size: 14px; }
  .hero .badges { gap: 6px; }
  .badge { padding: 5px 8px; font-size: 11px; }

  /* セクション */
  .section { padding: 36px 0; }
  .section .section-title { font-size: 22px; }
  .section .sub { font-size: 14px; }

  /* ボタン・CTA */
  .btn{ display:block; width:100%; padding:14px 16px; border-radius:12px; text-align:center; }
  .hero .cta { gap: 10px; }

  /* グリッドを強制1カラムに */
  .grid, .grid--2, .grid--3 { grid-template-columns: 1fr !important; }
  .card { padding: 14px; border-radius: 14px; }

  /* 料金テーブルは横スクロール許可 */
  .price-table{ display:block; width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }

  /* エリアのチップ */
  .area-list { gap: 6px; }
  .area-list li { padding: 8px 10px; font-size: 14px; }

  /* フォーム（ズーム防止） */
  .contact-box input, .contact-box textarea, input, select, textarea{
    font-size:16px; -webkit-appearance:none;
  }

  /* フッター */
  .site-footer { padding: 22px 0; }
}

/* 下部固定バー（使う場合） */
@media (max-width: 480px){
  .mobile-callbar{
    position: fixed; left:0; right:0; bottom:0;
    background:#b00020; color:#fff; z-index:9999;
    display:flex; gap:8px; padding:10px;
    box-shadow:0 -4px 10px rgba(0,0,0,.08);
  }
  .mobile-callbar a{
    flex:1; display:block; text-align:center;
    padding:12px; border-radius:10px; font-weight:700;
    background:#fff; color:#b00020;
  }
  body{ padding-bottom:64px; }
}

/* 固定ヘッダー高さ（JSで上書き可） */
:root { --header-h: 56px; }

/* PCや通常スクロール時のアンカーオフセット */
html { scroll-padding-top: var(--header-h); scroll-behavior: smooth; }
section[id] { scroll-margin-top: var(--header-h); }

/* ── 縦スワイプLP（スマホのみ有効） ───────────────── */
@media (max-width: 899px){
  html, body { height:100%; overscroll-behavior:none; }

  .lp-vertical{
    height: calc(100svh - var(--header-h));
    overflow: hidden;
  }
  .lp-vertical .swiper-wrapper{
    height:100%;
    align-items:stretch;
  }
  .lp-vertical .swiper-slide{
    height: calc(100svh - var(--header-h));
    min-height: calc(100svh - var(--header-h));
    display: grid;
    align-content: start; /* 上寄せ：見出しが隠れにくい */
    overflow: hidden;
    box-sizing: border-box;
  }

  /* 固定ヘッダーに隠れないようセクション上に余白 */
  .lp-vertical .section .container{
    padding-top: calc(var(--header-h) + 8px);
  }

  /* 長いコンテンツは内部をスクロール可能に */
  .lp-vertical .swiper-slide .slide-inner{
    max-height: calc(100svh - var(--header-h));
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ドット位置 */
  .lpv-pagination{
    position:absolute; left:0; right:0; bottom:10px !important; z-index:10;
  }
}

/* ── PCは通常スクロールに戻す ───────────────── */
@media (min-width: 900px){
  .lp-vertical .swiper-wrapper{ display:block; transform:none !important; height:auto; }
  .lp-vertical .swiper-slide{ display:block; height:auto; min-height:auto; overflow:visible; }
  .lpv-pagination{ display:none; }
}


/* ===== Main Visual（MV） ===== */
.hero--mv{
  background: linear-gradient(120deg, #ffe6ea, #fff);
  position: relative;
}
.hero--mv .mv{
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  align-items: center;
  gap: 24px;
  min-height: calc(100svh - var(--header-h)); /* 縦スワイプ1画面ジャスト */
}
.hero--mv .mv-copy{ padding: 8px 0; }
.hero--mv .mv-eyebrow{
  display:inline-block; background:#fff; border:1px solid #f3adb7; color:#b00020;
  padding:6px 10px; border-radius:999px; font-size:13px; font-weight:700; letter-spacing:.03em;
  margin-bottom:12px;
}
.hero--mv .mv-title{
  font-size: clamp(28px, 5.2vw, 44px);
  line-height: 1.2; font-weight: 900; margin: 0 0 10px;
}
.hero--mv .mv-title span{ color:#b00020; }

.hero--mv .mv-badges{
  display:flex; flex-wrap:wrap; gap:8px; margin: 8px 0 16px; padding:0; list-style:none;
}
.hero--mv .mv-badges li{
  background:#fff; border:1px solid #f7c3ca; color:#b00020;
  padding:8px 12px; border-radius:999px; font-weight:700; font-size:13px;
}

.hero--mv .mv-cta{ display:flex; gap:12px; flex-wrap:wrap; margin: 6px 0 10px; }
.hero--mv .btn{ padding:14px 18px; border-radius:12px; font-weight:800; }

.hero--mv .mv-points{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.hero--mv .point{
  background:#111; color:#fff; padding:6px 10px; border-radius:8px; font-size:12px; font-weight:700;
}

/* 右ビジュアル */
.hero--mv .mv-visual{
  position: relative; min-height: 380px;
}
.hero--mv .mv-person{
  position:absolute; right:0; bottom:0; width: min(360px, 42vw); height:auto; object-fit: cover;
  border-radius: 12px; box-shadow: 0 12px 30px rgba(176,0,32,.15);
}
.hero--mv .mv-truck{
  position:absolute; left: -6%; bottom: 12px; width: min(220px, 28vw);
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.12));
}
.hero--mv .mv-worker{
  position:absolute; left: -8%; top: 6%; width: min(120px, 18vw);
}
.hero--mv .mv-sticker{
  position:absolute; right: -6px; top: -6px;
  background:#ffcf00; color:#111; font-weight:900; padding:10px 14px; border-radius: 14px;
  transform: rotate(8deg); box-shadow: 0 10px 22px rgba(0,0,0,.12); border: 2px solid #fff;
}
.hero--mv .mv-sticker span{ color:#b00020; }

/* モバイル調整（縦スワイプ時もOK） */
@media (max-width: 899px){
  .hero--mv .mv{ grid-template-columns: 1fr; gap: 10px; }
  .hero--mv .mv-visual{
    min-height: 260px; margin-top: 4px;
  }
  .hero--mv .mv-person{ position: absolute; right: 4%; width: 58vw; }
  .hero--mv .mv-truck{ left: 4%; width: 44vw; bottom: 6px; }
  .hero--mv .mv-worker{ left: 2%; width: 24vw; top: 8px; }
  .hero--mv .mv-sticker{ right: 6px; top: -10px; transform: rotate(6deg); }
  /* CTA縦並び */
  .hero--mv .mv-cta .btn{ width:100%; }
}