@charset "UTF-8";
/* ============================================================
   01_トップページ_sp（Figma: 1484:32839 / 375x10849）
   760px 以下で PC レイアウトからこちらに切り替わる。
   HTML は PC と共通で、見た目だけをこのファイルで組み替えている。
   ============================================================ */

/* PC 幅では SP 専用のパーツを一切出さない（PC はマーキーの自動スクロール）
   .sp-menu-btn / .drawer の既定非表示は全ページ共通の style.css 側にある */
.sp-slide-btn { display: none; }
.sp-dots { display: none; }
.reason__band { display: none; }
.deco-blob--i { display: none; }
.search-cta__sp-link { display: none; }
br.sp-only { display: none; }

@media (max-width: 760px) {

  /* ------------------------------------------------------------
     全体
     ------------------------------------------------------------ */
  body { min-width: 0; overflow-x: hidden; }
  .container, .dw { width: auto; margin-inline: 0; padding-inline: 16px; }
  br.sp-only { display: inline; }

  /* PC 用に固定していた高さをすべて解除して、中身なりの高さにする */
  .hero, .about, .belief, .showroom, .reason, .service,
  .voice, .company, .recruit, .news, .contact, .footer { height: auto; }

  /*
    装飾ブロブ（Rectangle.png）は SP 専用の座標で置きなおす。
    PC 用の .deco-blob--a1 〜 --h は一度リセットしてから、
    SP のセクションに合わせて配置する。
  */
  .deco { inset: 0; overflow: hidden; }
  .deco-blob { width: 307px; height: 319px; }
  .deco-blob--a1, .deco-blob--b1 { display: none; }

  /* KV 下 〜 ABOUT US、SP に無いものは隠す */
  .deco-blob--a2, .deco-blob--e2, .deco-blob--g { display: none; }
  /* REASON（Figma: 177,2755 / -130,3512 / 215,3845 → 節頭 2363 からの相対） */
  .deco-blob--c  { top:  392px; left:  177px; width: 308px; height: 321px; }
  .deco-blob--d  { top: 1149px; left: -130px; width: 308px; height: 321px; }
  .deco-blob--b2 { display: block; top: 1482px; left: 215px; width: 240px; height: 250px; }
  /* SERVICE（Figma: -154,6362 → 節頭 4059 からの相対） */
  .deco-blob--e1 { display: block; top: 2303px; left: -154px; }
  /* VOICE（Figma: 163,6875 → 節頭 6473 からの相対） */
  .deco-blob--f  { top:  402px; left:  163px; }
  /* RECRUIT（Figma: 174,8856）/ NEWS（Figma: -114,9379） */
  .deco-blob--i  { display: block; top:  359px; left:  174px; }
  .deco-blob--h  { top:  393px; left: -114px; }

  /* REASON のリボンは SP では3つの帯に分かれる（Figma: Mask group ×3） */
  .reason__ribbon { display: none; }
  .reason__band {
    display: block;
    position: absolute;
    left: 0;
    width: 100%;
    overflow: hidden;
    pointer-events: none;
  }
  /*
    Figma の重なりは「ブロブ → 帯 → 本文」。帯は z-index:auto のままだと
    ブレンド指定のあるブロブと同じ層で本文より上に描かれてしまうので、
    帯と本文にそれぞれ明示的な z-index を振って順番を固定する。
  */
  .reason__band { z-index: 0; }
  .reason .container { z-index: 2; }
  /* リボン画像（691x2455）を回転・拡大して、SP カンプの帯の形に切り抜く */
  .reason__band > img { position: absolute; max-width: none; object-fit: fill; transform-origin: center; }
  .reason__band--1 { top: 0; height: 350px; }
  .reason__band--1 > img { left: -315px; top:  -99px; width: 587px; height: 2087px; transform: rotate(10deg); }
  .reason__band--2 { top: 600px; height: 430px; }
  .reason__band--2 > img { left:  349px; top: -740px; width: 553px; height: 1964px; transform: rotate(-96deg) scaleX(-1); }
  .reason__band--3 { top: 1150px; height: 310px; }
  .reason__band--3 > img { left:  -20px; top: -767px; width: 553px; height: 1964px; transform: rotate(78deg); }

  /* 共通の見出し（● + 英字 / 和文） */
  .label { gap: 8px; font-size: 16px; line-height: 16px; }
  .label--lg { font-size: 16px; line-height: 16px; }
  .label__dot { width: 6px; height: 6px; }
  .sec-title { font-size: 22px; line-height: 33px; }
  .reason__head .sec-title, .voice__head .sec-title, .company__head .sec-title,
  .news__head .sec-title, .contact__head .sec-title { margin-top: 4px; }

  /* 共通の丸ボタン */
  .btn-round { min-width: 240px; height: 60px; font-size: 16px; }

  /* ------------------------------------------------------------
     ヘッダー（白いピル 355x60 + ハンバーガー）
     ------------------------------------------------------------ */
  .header {
    top: 10px;
    width: calc(100% - 20px);
    max-width: 355px;
    height: 60px;
    border-radius: 70px;
    box-shadow: 0 0 34px rgba(0, 0, 0, .15);
  }
  .header__inner { padding: 0 8px 0 16px; }
  .header__logo { width: auto; }
  .header__logo-name { font-size: 16px; line-height: 23px; }
  .header__logo-tag { display: none; }
  .header__right { display: none; }

  .sp-menu-btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    width: 46px; height: 46px;
    padding: 0 14px;
    border-radius: 23px;
    background: var(--orange);
    flex: none;
  }
  .sp-menu-btn span {
    display: block;
    width: 18px; height: 1.5px;
    background: #fff;
    transition: transform .3s ease, opacity .3s ease;
  }
  .sp-menu-btn.is-open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  .sp-menu-btn.is-open span:nth-child(2) { opacity: 0; }
  .sp-menu-btn.is-open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

  /* ドロワー（Figma: 13_menu / 白地に緑文字） */
  .drawer {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 99;
    padding: 86px 16px 40px;
    overflow-y: auto;
    background: #fff;
    color: var(--green);
  }
  .drawer[hidden] { display: none; }
  .drawer__inner { max-width: 343px; margin-inline: auto; }
  .drawer__crumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    line-height: 17px;
    font-weight: 500;
    color: var(--ink-60);
  }
  .drawer__crumb-dot { width: 4px; height: 4px; border-radius: 50%; background: currentColor; }

  .drawer__list { margin-top: 16px; }
  .drawer__item + .drawer__item { border-top: 1px solid #ebebeb; }
  .drawer__item > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    height: 32px;
    margin: 16px 0;
    font-size: 18px;
    line-height: 18px;
    font-weight: 700;
    color: var(--green);
  }
  /* 下層リンク（サービス一覧の中） */
  .drawer__sub { margin: 0 0 16px 30px; }
  .drawer__sub li { border-top: 1px solid #ebebeb; }
  .drawer__sub a {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 24px;
    margin: 14px 0;
    font-size: 14px;
    line-height: 14px;
    font-weight: 700;
    color: var(--green);
  }
  .drawer__dot { width: 4px; height: 4px; border-radius: 50%; background: currentColor; flex: none; }
  .drawer__ico {
    width: 32px; height: 32px;
    border-radius: 50%;
    border: 1px solid #ebebeb;
    color: var(--green);
    display: grid; place-items: center;
    flex: none;
    margin-left: auto;
  }
  .drawer__actions { margin-top: 40px; display: flex; flex-direction: column; gap: 16px; }
  .drawer__actions .btn-pill { width: 100%; height: 60px; border-radius: 100px; }
  .drawer__actions .btn-pill b { font-size: 18px; line-height: 18px; }
  /* ドロワー内の営業時間：施設名を1行目に、営業時間・定休日を2列で揃えて表示 */
  .drawer .biz-hours { margin-top: 16px; grid-template-columns: auto 1fr; column-gap: 1em; font-size: 11px; line-height: 16px; white-space: normal; }
  .drawer .biz-hours b { grid-column: 1 / -1; }
  .drawer .biz-hours p + p b { margin-top: 8px; }

  /* SP スライダーの前後ボタンとドット */
  .sp-slide-btn {
    display: grid;
    place-items: center;
    position: absolute;
    z-index: 2;
    width: 40px; height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--green);
    color: #fff;
  }
  /* #i-arrow は水平から 36.68 度上向きなので、その分を足し引きして真横にする */
  .sp-slide-btn--prev { left: 16px; transform: rotate(-143.32deg); }
  .sp-slide-btn--next { right: 16px; transform: rotate(36.68deg); }
  .ico--14 { width: 14px; height: 14px; }

  .sp-dots { display: flex; justify-content: center; gap: 6px; }
  .sp-dots__dot { width: 6px; height: 6px; border-radius: 50%; background: #bce8c9; }
  .sp-dots__dot.is-active { background: var(--green-mid); }
  /* ------------------------------------------------------------
     01 KV（写真 580px → コピー → 検索カード）
     ------------------------------------------------------------ */
  .hero { overflow: visible; }
  .hero__bg { inset: 0 0 auto; height: 580px; }
  /*
    position:static にすると z-index が効かなくなり、背景写真の下に潜ってしまう。
    relative のまま padding-top でコピーの位置を出す（margin だと相殺される）。
  */
  .hero__inner { width: auto; height: auto; padding-top: 414px; }

  .hero__copy { position: static; margin: 0 16px; }
  .hero__lead {
    min-height: 30px;
    padding: 8px 8px 8px 0;
    font-size: 14px;
    line-height: 14px;
  }
  .hero__title { min-height: 52px; margin-top: 8px; font-size: 28px; line-height: 28px; }
  .hero__title--1 { padding: 12px 8px; }
  .hero__title--2 { padding: 12px 8px 12px 8px; }

  .hero__card {
    position: static;
    width: auto;
    margin-top: 16px;
    padding: 24px 16px;
    border-radius: 0;
  }
  .hero__card-lead { font-size: 16px; line-height: 16px; }
  .hero__card-btns { gap: 6px; margin-top: 12px; }
  .kv-btn { width: 100%; height: 50px; font-size: 16px; }
  .kv-btn .ico--28 { width: 22px; height: 22px; }

  /* ------------------------------------------------------------
     02 ABOUT US + お悩みカード
     ------------------------------------------------------------ */
  /* ドットは下の信念の帯（上部はクリーム色のフェード）に少し重なる */
  .about { z-index: 2; margin-bottom: -37px; padding-bottom: 0; }
  .about__head { padding-top: 60px; }
  .about__title { margin-top: 4px; font-size: 22px; line-height: 33px; }

  /* お悩みカード：SP は5秒ごとのスライドショー（Figma: カード270px / gap12） */
  .needs { position: static; margin-top: 20px; overflow: hidden; }
  .needs__track { transform: none !important; }
  .needs__list {
    gap: 12px;
    padding-right: 0;
    transition: transform .6s cubic-bezier(.22, .61, .36, 1);
  }
  .need { width: 270px; height: 360px; padding: 32px 24px 0; border-radius: 135px; }
  .need__figure { width: 180px; height: 172px; }
  .need__text { margin-top: 18px; font-size: 14px; line-height: 22px; }

  .about { position: relative; }
  .about .sp-slide-btn { top: 326px; }        /* カード（高さ360px）の縦中央 */
  .about .sp-dots { margin-top: 20px; }

  /* ------------------------------------------------------------
     03 信念の帯
     ------------------------------------------------------------ */
  /* Figma: 帯 375x355。背景は 741x466 を x=-5 / y=-75 に置いている */
  .belief {
    height: 355px;
    background-image: none;
    background-color: #cfd3d2;
  }
  .belief::before {
    background-image: url("../img/belief-bg-overlay.png");
    background-position: -5px -75px;
    background-size: 741px 466px;
    opacity: .7;
  }
  .belief__fade { height: 185px; }
  .belief__inner { width: auto; }
  .belief__copy { right: 16px; top: 96px; gap: 4px; }
  .belief__big { min-height: 44px; padding: 8px 10px 10px; font-size: 26px; line-height: 26px; }
  .belief__small { min-height: 32px; padding: 6px 10px 8px; font-size: 14px; line-height: 14px; }
  /* Figma: @(107,1511) 252x54 → 右端 359（右から16px）の右寄せ2行 */
  .belief__sub {
    right: 16px;
    left: auto;
    top: 289px;
    width: 252px;
    font-size: 18px;
    line-height: 27px;
    text-align: right;
  }

  /* ------------------------------------------------------------
     04 SHOWROOM（写真 → テキスト）
     ------------------------------------------------------------ */
  .showroom { padding: 40px 0 8px; }
  .showroom__leaf { display: none; }
  .showroom__inner { flex-direction: column; gap: 20px; padding-top: 0; }
  .showroom__photo { width: 100%; height: 240px; border-radius: 5px; }
  /* SP も PC と同じ展示場の写真を枠いっぱいに表示 */
  .crop--showroom img { left: 0; top: 0; width: 100%; height: 100%; transform: none; }
  .showroom__body { width: 100%; }
  .showroom__body .label, .service__lead .label { font-size: 13px; line-height: 13px; }
  .showroom__title { margin-top: 8px; }
  .showroom__title span {
    min-height: 46px;
    padding: 12px;
    font-size: 22px;
    line-height: 22px;
  }
  .showroom__text { margin-top: 16px; font-size: 16px; line-height: 32px; font-weight: 400; }
  /* 改行は「並びます。」「見つかります。」の後ろだけ残す */
  .showroom__text br { display: none; }
  .showroom__text br:nth-of-type(1), .showroom__text br:nth-of-type(5) { display: inline; }
  /* Figma: @(16,2296) 左寄せ */
  .showroom__body .btn-round { margin-top: 20px; margin-left: 0; }

  /* ------------------------------------------------------------
     05 REASON
     ------------------------------------------------------------ */
  .reason { padding: 60px 0; }
  .reason__ribbon { display: none; }
  .reason__head { padding-top: 0; text-align: center; }
  .reason__head .label { justify-content: center; }

  .points { margin-top: 20px; gap: 40px; }
  .point, .point--rev { flex-direction: column; height: auto; gap: 20px; }
  .point__img { width: 100%; height: 180px; border-radius: 5px; }
  .point__img > img { left: 50%; top: 50%; width: 355px; height: 231px; transform: translate(-50%, -50%); }
  .point__body { width: 100%; }
  .point__no { font-size: 12px; line-height: 12px; }
  .point__title { margin-top: 6px; font-size: 22px; line-height: 31px; }
  .point__title br { display: none; }
  .point__text { margin-top: 12px; font-size: 14px; line-height: 25px; }

  /* ------------------------------------------------------------
     06 SERVICE
     ------------------------------------------------------------ */
  .service { padding: 60px 0 36px; }
  .service__inner { flex-direction: column; gap: 0; padding-top: 0; }
  .service__lead { width: 100%; }
  /*
    見出しは「ゆっくり見て選べる、」と「北海道最大級の屋内展示場」の2段。
    HTML は PC 用に3つのチップなので、2つ目と3つ目をつなげて1枚に見せる。
  */
  .service__title { flex-direction: row; flex-wrap: wrap; gap: 0; margin-top: 7px; }
  .service__title::after { content: ""; flex-basis: 100%; order: 1; }
  .service__title .chip { order: 2; }
  .service__title .chip:first-child { order: 0; margin-bottom: 6px; }
  .chip { min-height: 36px; padding: 8px 12px 10px; font-size: 18px; line-height: 18px; }
  .chip--lg { min-height: 45px; padding: 10px 12px 13px; font-size: 22px; line-height: 22px; }
  .service__title .chip--lg:nth-child(2) { padding-right: 0; border-radius: 5px 0 0 5px; }
  .service__title .chip--lg:nth-child(3) { padding-left: 0; border-radius: 0 5px 5px 0; }
  .service__text { margin-top: 18px; font-size: 14px; line-height: 25px; font-weight: 400; }
  /* Figma: @(68,6095) 中央 */
  /* Figma SP では「サービス一覧を見る」がカードの下に来る（Frame 1321318050 @68,6095） */
  .service__inner { display: flex; flex-direction: column; }
  .service__lead { display: contents; }
  .service__cards { order: 1; margin-top: 14px; }
  .service__lead .btn-round { order: 2; margin-top: 16px; margin-inline: auto; }
  .service__lead { text-align: left; }

  .service__cards { width: 100%; gap: 16px; }
  .svc-card > a { flex-direction: column; align-items: stretch; padding: 16px; }
  .svc-card__img { width: 100%; height: 180px; margin-right: 0; }
  .svc-card__img > img { left: 50%; top: 50%; width: 340px; height: 227px; transform: translate(-50%, -50%); }
  .svc-card__body { width: 100%; margin: 16px 0 0; }
  .svc-card__title { font-size: 20px; line-height: 20px; }
  .svc-card__text { margin-top: 12px; font-size: 14px; line-height: 26px; }
  .svc-card__ico { width: 44px; height: 44px; margin: 16px 0 0 auto; }
  /* トップの SERVICE だけ（.svc-card は service.html と共用なので .service で絞る） */
  .service .svc-card__img { height: 200px; border-radius: 5px; }
  .service .svc-card__body { margin-top: 18px; }
  .service .svc-card__text { margin-top: 8px; line-height: 25px; }
  .service .svc-card:nth-child(2) .svc-card__text br { display: none; }   /* 車検・整備は1段落で流す */
  .service .svc-card__ico { width: 40px; height: 40px; margin-top: 8px; }

  /*
    中古車検索バナー：SP は検索フォームを出さず、
    写真＋オレンジ帯「かんたん検索 / 中古車検索ページはこちら」のリンクバナーにする
  */
  .search-cta__head { display: none; }
  .search-cta {
    flex-direction: column;
    width: 100%;
    height: auto;
    margin-top: 40px;
    border-radius: 5px;
  }
  .search-cta__img { position: relative; width: 100%; height: 142px; background: none; }
  /* Figma: マスク @(16,6195) 343x142 に対して写真は @(13,6157) 575x195（FILL） */
  .crop--search img { left: -3px; top: -38px; width: 575px; height: 195px; object-fit: cover; transform: none; }
  .search-cta__body { display: none; }
  .search-cta__sp-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100px;
    padding-top: 12px;
    color: #fff;
  }
  /* 写真部分もタップできるように、リンクの当たり判定をバナー全体に広げる */
  .search-cta__sp-link::after { content: ""; position: absolute; inset: 0; }
  .search-cta__sp-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    height: 27px;
    padding: 0 14px;
    border-radius: 14px;
    background: #fff;
    color: var(--orange);
    font-size: 14px;
    line-height: 14px;
    font-weight: 700;
  }
  /* 吹き出しのしっぽ */
  .search-cta__sp-badge::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -5px;
    margin-left: -5px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid #fff;
  }
  .search-cta__sp-title {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-top: 15px;
    font-size: 20px;
    line-height: 24px;
    font-weight: 700;
  }
  .search-cta__sp-ico {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: #fff;
    color: var(--orange);
    display: grid; place-items: center;
    flex: none;
  }

  /* ------------------------------------------------------------
     07 VOICE
     ------------------------------------------------------------ */
  .voice { padding: 60px 0; }
  .voice__head { padding-top: 0; }
  /* お客様の声：こちらも5秒ごとのスライドショー（Figma: カード290px / gap12） */
  .voice { position: relative; overflow: hidden; }
  .voice__list {
    gap: 12px;
    margin-top: 20px;
    padding: 0;
    justify-content: flex-start;
    transition: transform .6s cubic-bezier(.22, .61, .36, 1);
  }
  .voice-card {
    flex: none;
    width: 290px;
    height: 392px;
    padding: 40px 32px;
    border-radius: 50px;
  }
  .voice .sp-slide-btn { top: 315px; }        /* カード（高さ392px）の縦中央 */
  .voice .sp-dots { margin-top: 20px; }
  .voice-card__text { font-size: 14px; line-height: 24px; }

  /* ------------------------------------------------------------
     08 COMPANY
     ------------------------------------------------------------ */
  .company { padding: 60px 0; }
  .company__cards { flex-direction: column; gap: 20px; margin-top: 20px; }
  .shop { width: 100%; padding: 20px; border-radius: 5px; }
  .shop__main { flex-direction: column; align-items: center; gap: 16px; }
  .shop__photo { width: 120px; height: 120px; }
  .crop--shop-sapporo > img,
  .crop--shop-satozuka > img { left: 50%; top: 50%; width: 145px; height: 145px; transform: translate(-50%, -50%); }
  .shop__info { width: 100%; }
  .shop__name { text-align: center; font-size: 20px; line-height: 20px; }
  .shop__map { width: 100%; height: 140px; }

  /* ------------------------------------------------------------
     09 RECRUIT
     ------------------------------------------------------------ */
  .recruit { padding-bottom: 60px; }
  .recruit__marquee { top: 8px; }
  .recruit__marquee-text { font-size: 50px; line-height: 50px; }
  .recruit__inner { flex-direction: column; gap: 20px; padding: 60px 0 0; }
  /* 見出しは「● RECRUIT」の下に「採用情報」の中央そろえ */
  .recruit__label { flex-direction: column-reverse; align-items: center; height: auto; gap: 4px; padding: 0 16px; }
  .recruit__label-ja { writing-mode: horizontal-tb; font-size: 22px; line-height: 33px; letter-spacing: 0; }
  .recruit__label-en { writing-mode: horizontal-tb; font-size: 13px; line-height: 16px; font-weight: 400; gap: 8px; }
  .recruit__label-en .label__dot { width: 6px; height: 6px; }
  /* 表示中のカードを画面中央に置き、左右に前後のカードを少しのぞかせる */
  .recruit__slider { width: 100%; padding: 0 0 0 calc(50% - 144px); }
  .recruit__list { gap: 12px; }
  .rec-card { width: 288px; height: 216px; }
  .rec-card__badge { right: 8px; top: 8px; min-width: 72px; height: 32px; padding: 0 16px; font-size: 16px; line-height: 16px; }
  .slider-btn { width: 40px; height: 40px; margin-top: -20px; }
  .slider-btn--prev { left: 4px; }
  .slider-btn--next { right: 4px; }
  /* トップの採用スライダーだけ（.slider-btn は cardetail.html と共用） */
  .recruit .slider-btn { background: #fff; }
  .recruit .slider-btn--prev { left: 16px; }
  .recruit .slider-btn--next { right: 16px; }
  /* Figma: @(68,8866) 中央 */
  .recruit__btn-wrap { width: auto; margin-top: 24px; padding: 0; text-align: center; }

  /* ------------------------------------------------------------
     10 NEWS
     ------------------------------------------------------------ */
  .news { padding: 60px 0; }
  /* Figma: 見出しは左、「一覧を見る」は Frame 1321318051 @(68,9523) で中央 */
  /* Figma SP では「一覧を見る」がリストの下に来る（Frame 1321318051 @68,9523） */
  .news .container { display: flex; flex-direction: column; }
  .news__head { display: contents; }
  .news__head > div { order: 0; text-align: center; }
  .news__head .label { justify-content: center; }
  .news__list { order: 1; margin-top: 20px; }
  .news__head .btn-round { order: 2; margin-top: 20px; margin-inline: auto; }
  .news__list { margin-top: 20px; padding: 24px 16px; }
  .news-item__row { gap: 12px; margin-top: 12px; }
  .news-item__title { width: auto; flex: 1; font-size: 14px; line-height: 22px; white-space: normal; }
  .news-item__ico { width: 32px; height: 32px; }
  /* トップのお知らせだけ（.news-item は news.html と共用なので .news で絞る） */
  .news .news-item { padding-bottom: 22px; }
  .news .news-item--last { border-bottom: 1px solid var(--line); }
  .news .news-item__date { font-size: 12px; line-height: 12px; }
  .news .news-item__tag { min-width: 80px; height: 24px; padding: 0 16px; font-size: 12px; line-height: 12px; }
  /* タイトルは2行まで表示して、あふれた分は「…」 */
  .news .news-item__title {
    display: -webkit-box;
    line-height: 21px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .news .news-item__ico { width: 36px; height: 36px; flex: none; }

  /* ------------------------------------------------------------
     11 CONTACT
     ------------------------------------------------------------ */
  .contact { padding: 60px 0 72px; }
  .contact::before { background-position: center; background-size: cover; }
  .contact__inner { flex-direction: column; gap: 16px; padding-top: 0; text-align: center; }
  .contact__head { width: 100%; }
  .contact__head .label { justify-content: center; }
  .contact__body { width: 100%; }
  .contact__lead { font-size: 18px; line-height: 26px; }
  .contact__btns { flex-direction: column; gap: 12px; margin-top: 14px; }
  .tel-btn { width: 100%; height: 64px; font-size: 16px; line-height: 20px; }
  /* お問い合わせ帯の電話ボタン（.tel-btn は cardetail.html の CTA と共用なので .contact で絞る） */
  .contact .tel-btn { font-size: 20px; }
  .contact .tel-btn > span { width: 220px; }
  /* 「札幌屋内展示場への電話 / はこちら」は自然な折り返しにする */
  .contact .tel-btn--white br { display: none; }

  /* ------------------------------------------------------------
     12 フッター
     ------------------------------------------------------------ */
  .footer { padding: 34px 0 20px; }
  .footer__top { flex-direction: column; gap: 28px; }
  .footer__company { width: 100%; }
  .footer__name { font-size: 20px; line-height: 20px; }
  .footer__shops { flex-direction: column; gap: 16px; margin-top: 16px; }
  .footer__shop { width: 100%; }
  .footer__shop-info { margin-top: 8px; font-size: 12px; line-height: 17px; font-weight: 400; }
  .footer__divider { display: none; }
  .footer__nav { gap: 0; }
  .footer__col { flex: none; width: 160px; }
  .footer__col-title { font-size: 14px; line-height: 14px; margin-bottom: 20px; }
  .footer__links { gap: 20px; }
  .footer__links a { font-size: 14px; line-height: 14px; }
  .footer__col--strong .footer__links { gap: 32px; }
  .footer__mid { flex-direction: column; align-items: stretch; gap: 16px; margin-top: 34px; }
  .footer__slogan { font-size: 20px; line-height: 30px; }
  /* 採用バナー：イラストは右下に寄せて、左のコピー・ボタンと重ならないようにする */
  .recruit-banner { width: 100%; height: 125px; background-position: right bottom; background-size: 200px 125px; }
  .recruit-banner__body { left: 20px; top: 17px; }
  .recruit-banner__copy { font-size: 16px; line-height: 23px; }
  .recruit-banner__btn { margin-top: 10px; }
  /* プライバシーポリシー → コピーライトの順で中央そろえ */
  .footer__bottom { flex-direction: column-reverse; align-items: center; gap: 16px; margin-top: 12px; padding-top: 20px; }
  .footer__privacy { font-size: 12px; line-height: 12px; }
  .footer__copy { font-size: 11px; line-height: 11px; }

  /* ページトップへ */
  .to-top { right: 16px; bottom: 16px; width: 48px; height: 48px; }
}