@charset "utf-8";
/* スマホ用シンプルレイアウト (769px以上のPC表示には影響しない) */
.sp-bar, .sp-switch-foot { display: none; }

@media screen and (max-width: 768px) {
  html { -webkit-text-size-adjust: 100%; }
  body { background: #fff; font-size: 14px; line-height: 1.6; }
  img { max-width: 100%; height: auto; }
  a:hover { text-decoration: none; }

  #wrapper, #header, #container { width: 100%; max-width: 100%; box-sizing: border-box; }
  #wrapper { padding: 0 10px; }
  #top { font-size: 10px; line-height: 1.4; margin: 4px 0; text-align: left; color: #888; }
  #top a:link, #top a:visited { color: #888; }
  #sine { display: none; }

  /* ヘッダー */
  #header { height: auto; }
  #header-left, #header-right { float: none; width: 100%; }
  #header-right { display: none; }
  #logo { float: none; display: block; width: 130px; margin: 6px auto 8px; }
  #search { float: none; width: 100%; height: auto; margin: 0 0 8px; padding: 0; background: none; }
  #search form { margin: 0; display: flex; gap: 6px; }
  input.searchtext { flex: 1; min-width: 0; width: auto; height: 40px; padding: 0 10px; font-size: 16px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; }
  #submit-btn { flex: 0 0 80px; width: 80px; height: 40px; background-size: 100% 100%; }

  /* グローバルナビ */
  #g-navi { border: 0; }
  #g-navi ul { margin: 0; height: auto; display: flex; flex-wrap: wrap; }
  #g-navi li { float: none; width: 33.333%; height: auto; box-sizing: border-box; padding: 2px; font-size: 13px; line-height: 2.6; text-align: center; }
  #g-navi li a { margin: 0; background-size: 100% 100%; border-radius: 3px; }

  /* 1カラム: カテゴリ/エリア → お知らせ類 → イベント等 */
  #container { display: flex; flex-direction: column; margin: 10px 0 16px; }
  #left   { order: 1; }
  #center, #main { order: 2; }
  #right  { order: 3; }
  #left, #center, #right, body #main { float: none; width: 100%; margin: 0; }

  /* 見出しを共通のシンプルなバーに */
  #cat-box h2, .center-box h2, .right-box h2 {
    margin: 0; padding: 8px 10px; height: auto; font-size: 15px; font-weight: bold;
    background: #f6f6f6 !important; border-left: 4px solid #F39800;
  }
  #cat-box, .center-box, .right-box, #saigai_info {
    width: 100%; box-sizing: border-box; margin: 0 0 14px; padding: 0 0 4px; background: none; border: 1px solid #e3e3e3;
  }

  /* カテゴリ: 3列のボタン */
  #cat { display: flex; flex-wrap: wrap; padding: 6px; }
  #cat li { width: 33.333%; box-sizing: border-box; padding: 3px; text-align: center; }
  #cat li img { display: block; width: 100%; margin: 0; }

  /* エリア: チップ表示 */
  #area { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px; }
  #area li { float: none; display: block; width: auto; margin: 0; padding: 0; background: none; border: 0; line-height: 1; }
  #area li a { display: block; padding: 9px 14px; border: 1px solid #ccc; border-radius: 16px; background: #fafafa; font-size: 13px; }

  /* 左カラムの装飾・バナー類は非表示 */
  #thisweek-box, #freepaper-box, #link-box, #left > a, #left > img, #left > br { display: none; }

  /* 一覧 (お知らせ・新規掲載店・特集) */
  .shop-box, .shop-box-noimg, .shop-box2, .hotnews-box, .tokusyuu-box2 {
    float: none; display: block; width: auto !important; margin: 0 10px; padding: 10px 0; overflow: hidden;
  }
  .shop-box-l { width: 74px; margin-right: 10px; }
  .shop-box-l img, .hotnews-box-l img { width: 70px; height: auto; }
  .hotnews-box-l { margin: 0 10px 0 0; }
  .shop-box h3, .shop-box-noimg h3, .hotnews-box h3 { margin-bottom: 3px; font-size: 14px; }
  .tokusyuu-box2-l { width: 40%; margin-right: 10px; }
  .banner-large, .banner-large > div { width: 100% !important; height: auto !important; margin: 0 0 12px; }
  .banner-large img { width: 100%; height: auto; }
  #tokusyuu img { max-width: 100%; }

  /* 右カラム: イベント/オープン情報のみ。固定幅・固定高さを解除 */
  #right > *:not(#event):not(#open) { display: none; }
  #right div[style*="width:280px"] { width: 100% !important; height: auto !important; overflow: visible !important; }
  #event ul { padding: 4px 10px; }
  #event li { margin: 0; padding: 8px 0; }
  .event-date { display: inline-block; margin-right: 6px; color: #e60; font-weight: bold; }
  .itiran-btn { padding: 4px 10px; }

  /* 検索結果ページ */
  body #main { float: none; width: 100%; margin: 0; }
  body #pankuzu { margin: 0 0 10px; font-size: 12px; line-height: 1.5; }
  #cat-list { padding: 8px 0; margin: 0 0 12px; }
  #cat-list hr { display: none; }
  #cat-list p { margin: 4px 10px; }
  #cat-list ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 10px 8px; }
  #cat-list ul li { float: none; font-size: 0; }
  #cat-list ul li a { display: block; padding: 8px 12px; border: 1px solid #ccc; border-radius: 16px; background: #fff; font-size: 13px; }
  #cat-list div[style] { display: none; }
  #sort { display: flex; flex-direction: column; gap: 6px; padding-bottom: 8px; font-size: 13px; }
  #sort a { display: block; padding: 8px 10px; border: 1px solid #ddd; border-radius: 4px; }
  #main > p { margin: 8px 0; }
  #main > p a { display: inline-block; padding: 8px 14px; border: 1px solid #ccc; border-radius: 4px; }
  #main > hr { margin: 8px 0; }
  body .content-box { width: 100%; padding-bottom: 8px; }
  body .shoplist-box, body .shoplist-box-free { width: 100%; box-sizing: border-box; padding: 10px 0; display: flow-root; }
  .shoplist-box-l { width: 100px; margin-right: 10px; }
  .shoplist-box-l img { width: 100px; height: auto; }
  .shoplist-box h3 { font-size: 16px; line-height: 1.3; margin: 2px 0; }
  .shoplist-box .subtit { font-size: 12px; }
  .shoplist-box p.card img { margin: 4px 6px 0 0; max-height: 28px; width: auto; }

  /* ===== 店舗ページ (/co/xxx) ===== */
  body #point, body #webapp { float: none; width: auto; text-align: left; }
  body #webapp { display: none; }
  body #shop-header { width: 100%; box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; padding: 10px; }
  body .shop-header-l { float: none; width: 90px; margin: 0; }
  body .shop-header-l img { width: 90px; height: auto; }
  body .shop-header-c { float: none; flex: 1; width: auto; min-width: 0; }
  body .shop-header-r { display: none; }
  body #shop-menu { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-bottom: 12px; }
  body #shop-menu img { display: block; width: 100%; height: auto; }
  body .box1 { width: 100%; box-sizing: border-box; padding-bottom: 8px; }
  body .box2 { width: auto; margin: 0 10px 20px; }
  body .tit-bar { max-width: 100%; height: auto; }
  body .box2 h2 { background-size: 20px auto; height: auto; min-height: 26px; }
  body .main-img { float: none; display: block; width: 100%; height: auto; margin: 0 0 8px; }
  body #shop_picture img { width: 100% !important; height: auto !important; }
  body #photos_thum { margin-bottom: 8px; }
  body .zeetle-qr { float: none; text-align: center; margin: 0 0 10px; }
  body .table-01 th { width: 30% !important; white-space: normal !important; }
  body .table-01 th, body .table-01 td { padding: 6px 8px; word-break: break-word; }
  body .box2 iframe { max-width: 100%; }
  body .box2 iframe[src*="youtube"] { width: 100%; height: auto; aspect-ratio: 16 / 9; }
  body #map_canvas { width: 100% !important; height: 300px !important; }
  body .photo-box { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  body .image-small, body .image-large { float: none; width: auto; height: auto; margin: 0; }
  body .image-small img, body .image-large img { width: 100%; height: auto; box-sizing: border-box; }

  /* ===== 求人・中古車の絞り込み検索 ===== */
  body h1.page-tit { height: auto; line-height: 1.5; padding: 6px 10px; font-size: 16px; background: #f6f6f6; border-left: 4px solid #00a1e9; }
  body #j-serch, body #u-serch { padding: 10px; }
  body dl.j-serch-box dt, body dl.u-serch-box dt { float: none; width: auto; padding: 8px 0 0; }
  body dl.j-serch-box dd, body dl.u-serch-box dd { padding: 4px 0 8px; }
  body ul.list-col-4 li, body ul.list-col-6 li { width: 50%; box-sizing: border-box; padding: 3px 6px 3px 0; font-size: 13px; }
  body .j-kekka, body .u-kekka { font-size: 13px; }
  body .page-nav { line-height: 2.4; }
  body .u-narabi { font-size: 12px; line-height: 1.8; }

  /* 求人一覧 */
  body .j-list-box { width: 100%; box-sizing: border-box; }
  body .j-list-left, body .j-list-right { float: none; width: auto; }
  body .j-list-right { margin-top: 6px; text-align: right; }
  body .j-list-head { padding: 8px 12px; }
  body dl.j-list-cont { margin: 0 12px; }

  /* 中古車一覧: 表をカード表示に */
  body table.ucar-head { display: none; }
  body .u-list-box { width: 100%; }
  body table.ucar-item { display: block; width: 100%; box-sizing: border-box; }
  body .ucar-item tbody { display: flex; flex-wrap: wrap; }
  body .ucar-item tr { display: contents; }
  body .ucar-item td { box-sizing: border-box; width: 33.333%; padding: 6px 4px; font-size: 13px; }
  body .ucar-item td.ucar-item-left { width: 100%; overflow: hidden; font-size: 13px; }
  body .ucar-item td[colspan] { width: 100%; text-align: left; }
  body .item-left { width: 110px; height: auto; }
  body .ucar-item tr:first-child td:not(.ucar-item-left)::before { display: block; font-size: 10px; color: #888; }
  body .ucar-item tr:first-child td:nth-child(2)::before { content: "支払総額"; }
  body .ucar-item tr:first-child td:nth-child(3)::before { content: "年式"; }
  body .ucar-item tr:first-child td:nth-child(4)::before { content: "走行距離"; }
  body .ucar-item tr:first-child td:nth-child(5)::before { content: "排気量"; }
  body .ucar-item tr:first-child td:nth-child(6)::before { content: "車検"; }
  body .ucar-item tr:first-child td:nth-child(7)::before { content: "色"; }

  /* ===== CNカード ===== */
  body .cn-container, body .cn-main { width: 100%; }
  body .cn-header { margin-bottom: 14px; }
  body .cn-box { margin-bottom: 18px; }
  body .cn-box-left, body .cn-box-right { float: none; width: 100%; margin-bottom: 8px; }
  body .cn-subtit { height: auto; line-height: 1.5; padding: 8px 12px; font-size: 16px !important; color: #222; background: #f6f6f6; border-left: 6px solid #f60; }
  body .cn-box h3 { font-size: 16px !important; }
  body .img-right { float: none; margin: 0 auto 12px; text-align: center; }
  body .img-right img { max-width: 100%; height: auto; }
  body ul.retu03 { width: auto; margin: 0; }
  body ul.retu03 li { display: block; float: none; width: 100%; margin: 0 0 16px; text-align: center; }
  body .cn-box-inner { margin-bottom: 20px; }

  /* ===== フリーペーパー ===== */
  body .fp-container, body .fp-main, body .fp-box, body .fp-box-etc, body .fp-right { float: none; width: 100%; box-sizing: border-box; }
  body .fp-container img { max-width: 100%; height: auto; }
  body .fp-top-left { float: none; width: 100%; text-align: center; }
  body .fp-top-left img { width: 250px; max-width: 100%; }
  body .fp-top-right { margin-left: 0; margin-top: 10px; }
  body .thismonth dt { font-size: 20px; }
  body .fp-box-left, body .fp-box-right { float: none; width: 100%; }
  body .fp-banner { display: block; margin: 0 auto 10px; }
  body ul.rensai li dl.rensai-item dt { float: none; width: 100%; margin: 0 0 8px; text-align: center; }
  body .enquete-head { width: 100%; background-size: cover; background-position: center; }
  body .thismonth-tit h2 { font-size: 16px !important; margin-top: 8px !important; }
  body .fp-right > a { display: block; text-align: center; }
  body .fp-nav { width: 100%; background: #f6f6f6; }
  body .fp-nav h2 { background: #555; padding: 0 12px; }
  body .fp-nav ul li { font-size: 14px; padding: 10px 3px; }
  body .fp-nav ul li a { color: #0075a9; }

  /* ===== 店舗サブページ (クーポン・地図・メニュー・ニュース・口コミ・求人) ===== */
  body .coupon { width: auto; margin: 0 0 16px; box-sizing: border-box; }
  body .coupon > img:not([class]) { max-width: 100%; height: auto; }
  body .coupon-l, body .coupon-r { float: none; display: block; margin: 10px auto; padding: 0; border: 0; }
  body .coupon-r { width: 100px; }
  body .coupon-text, body .coupon-text2 { float: none; width: auto; margin: 8px 12px; }
  body .printbtn, body .reviewbtn { margin: 12px auto; }
  body #tab { margin: 0 0 8px; }
  body #maps_tab { width: 100%; display: flex; flex-wrap: wrap; gap: 4px; }
  body #maps_tab li { float: none; flex: 1 1 30%; width: auto; margin: 0; }
  body #map1 iframe, body #map2 iframe, body .maps_wrap iframe { width: 100% !important; height: 300px; }
  body #map2 img { max-width: 100%; height: auto; }
  body .table-menu th, body .table-menu td { padding: 6px 4px 0; font-size: 13px; }
  body .table-menu th[width] { width: 60% !important; }
  body .image-right { float: none; display: block; width: 100%; max-width: 330px; margin: 0 auto 12px; }
  body .news h3, body .news-date { margin-left: 10px; margin-right: 10px; }
  body .entry { padding: 0 10px; word-break: break-word; }
  body .pagenavi { margin: 0 10px 12px; }
  body .re { margin: 0 12px 16px; }
  body .bn { margin: 12px; }
  body .job-box { margin-bottom: 20px; }
  body ul.event-list li { padding: 8px; }
  body table.event-list-shop-t, body table.event-list-shop-t tbody, body table.event-list-shop-t tr, body table.event-list-shop-t td { display: block; width: auto; }

  /* ===== フリーペーパーのサブページ ===== */
  body h1.fp-title { font-size: 20px !important; height: auto; line-height: 1.4; }
  body .enquete-head { height: auto; min-height: 70px; display: flex; align-items: center; }
  body .month-box { float: none; flex: 0 0 70px; margin: 0; }
  body .thismonth-tit { flex: 1; margin-left: 0; height: auto; padding: 6px 10px; }
  body .thismonth-tit h1 { font-size: 18px !important; line-height: 1.4; }
  body h2.enquete-tit { width: 100%; box-sizing: border-box; height: auto; line-height: 1.4; padding: 8px 12px; font-size: 16px !important; background: #f6f6f6; border-left: 6px solid #F36; }
  body .enquete_list { width: 100%; }
  body ul.enquete_shop li { margin-top: 18px; padding: 8px; }
  body .en-shop-top-img { width: 100%; height: auto; }
  body .en-shop-data { padding: 8px; }
  body .en-shop-data-img { float: none; width: auto; margin-bottom: 8px; text-align: center; }
  body .en-shop-data-img img { width: 100%; max-width: 181px; height: auto; }
  body .en-shop-data table { width: 100%; }
  body .en-shop-data th { width: 28% !important; text-align: left; vertical-align: top; }
  body .en-shop-data th, body .en-shop-data td { word-break: break-word; }
  body .backnumber { margin-bottom: 14px; }
  body .backnumber select { width: 100%; height: 38px; font-size: 16px; }
  body .backnumber img { width: 100%; height: auto; }
  body .en-form-head, body .en-banner, body .en-present { box-sizing: border-box; }
  body .en-form-table01 th, body .en-form-table01 td { padding: 6px; }
  body .en-form-table01 th[width] { width: auto !important; }
  body .fp-container input[type=text], body .fp-container input[type=email], body .fp-container input[type=tel], body .fp-container textarea, body .fp-container select { max-width: 100%; box-sizing: border-box; font-size: 16px; }
  body .fp-container input[type=text], body .fp-container textarea { width: 100%; }
  body .en-present li { margin-left: 10px; font-size: 14px; }
  body .freepaper-img-box { margin: 12px 0 0; }
  body .freepaper-img-box ul { margin: 10px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  body .freepaper-img-box li { float: none; width: auto; height: auto; margin: 0; }
  body .freepaper-img-box li img { width: 100%; height: auto; }
  body .freepaper-shop-list ul { margin: 0 0 16px; }
  body .freepaper-shop-list ul li { float: none; display: block; width: auto; margin: 0; padding: 6px 0; border-bottom: 1px dotted #ccc; }
  body .ad-list img.ad-img { margin-bottom: 30px; max-width: 100%; box-sizing: border-box; }
  body .rensai-no { float: none; width: auto; text-align: left; margin-bottom: 4px; }
  body .rensai-entry { margin-left: 0; padding-left: 0; border-left: 0; }
  body .rensai-entry-left { float: none; width: auto; margin-bottom: 8px; text-align: center; }
  body .rensai-entry-right { margin-left: 0; }
  body ul.rensai03 { width: auto; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  body ul.rensai03 li { float: none; width: auto; height: auto; margin: 0; padding-bottom: 6px; }

  /* スマホ用ヘッダーバー: ロゴ+サイト名(左) / スマホ版ボタン(右)。/sp/ と同じ配置 */
  .sp-bar { display: flex; align-items: center; gap: 10px; position: sticky; top: 0; z-index: 50; margin: 0 -10px 8px; padding: 8px 14px; background: #fff; box-shadow: 0 1px 0 #e5e7eb; }
  .sp-bar-logo { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; color: #222 !important; text-decoration: none; }
  .sp-bar-logo img { height: 34px; width: auto; max-width: none; }
  .sp-bar-logo span { font-weight: bold; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sp-switch-btn { display: block; padding: 4px 10px; border: 1px solid #e5e7eb; border-radius: 14px; background: #fff; color: #6b7280 !important; font-size: 12px; line-height: 1.6; white-space: nowrap; text-decoration: none; }
  #top, #header-left > a { display: none; }
  .sp-switch-foot { display: block; margin: 0; padding: 12px 8px 0; text-align: center; font-size: 12.5px; color: #666; }
  .sp-switch-foot a { color: #0066cc; text-decoration: underline; }

  /* フッター */
  #footer { margin-top: 16px; }
  #footer ul { margin: 10px 0; padding: 0 8px; text-align: center; }
  #footer li { display: inline-block; margin: 4px 6px; }
  #unei, #copy { padding: 10px 8px; }
  .to-top { margin: 0 0 8px; }
}