@charset "utf-8";

.subTitle { margin:min(8%,50px) 0 .8em; padding-bottom:.3em; font-size:1.2em;  border-bottom:2px solid var(--color-base); }

#stock.index.pc #pan { margin-bottom:2em; }
.tokuten.stock { margin-bottom:min(5%,40px); }
.tokuten.stock1 { margin-top:1em; }

/* 検索BOX ---------------- */
.searchBox {
  border:2px solid var(--color-base); border-radius:10px; box-shadow: var(--shadow1);
  > form { position:relative; }
  .filter {
    dt { padding:.3em .5em; line-height:1.4; background-color:var(--color-gry1);
      &:first-child { border-radius:8px 8px 0 0; }
    }
    dd {
      width:100%; padding:3px 10px; font-family:inherit; background-color:#fff;
      select { width:100%; padding:3px 10px; font-family:inherit; background-color:#fff; border:1px solid #ccc; border-radius:3px; }
      label { font-size:.9em; input { margin-right:3px; } }
      label + label { margin-left:.75em; }
      &.range select { width:44%; }
    }
  }

  .searchBtn {
    display:block; position:relative;
    width:calc(100% - 1em); margin:1em .5em; padding-block:.5em; color:#fff; font-size:15px; font-weight:bold; font-family:inherit;
    border:none; border-radius:5px; background:var(--color-base); cursor:pointer;
    &::before { content:'';
      position:absolute; background:var(--color-wht);
      mask-image:url(../img/common/ico_search.svg);
      mask-repeat:no-repeat; mask-position:center; mask-size:contain;
    }
  }
}
/* ジャンル別検索 */
.typeBtnList {
  display: grid; grid-template-columns:repeat(3,1fr); gap: 1em;
  margin-bottom:min(9%, 50px);
  li {display: block; padding: 2px; border-radius: 10px; border: 3px solid var(--color-base); box-shadow: 3px 3px #b5b5b5; }
}

/* 一覧と詳細共通 ------------- */
/* 車両画像（JCM 640×480）読込が遅いので、読み込む前から4:3の高さを確保 */
img.car-img { width:100%; height:auto; aspect-ratio:4 / 3; object-fit:cover; background-color:var(--color-gry1); }

.price.flex { margin-bottom:.5em; line-height:1.2;
  .label { font-size:.8em; }
  em { font-size:1.5em; font-family:'Helvetica','Arial',sans-serif; }
  > li { display:flex; justify-content:space-between; }
  .total { width:100%; margin-bottom:.4em; border-bottom:2px solid var(--color-gry2);
    em { font-size:2em; color:var(--color-red); }
  }
  .def { font-size:.9em;
    .manen { font-size:.9em; }
  }
  .base { width:60%; padding-right:1em; }
  .cost { width:40%; }
  .tax { font-size:.85em; }
}

ul.law { margin-bottom:.5em; margin-left:.2em;
  > li { padding-left:1.3em; font-size:.8em; line-height:1.4; position:relative;
    &::before {
      position:absolute; left:0; top:0; width:1em; height:100%;
      display:block; content:"";
      background:url(../img/common/ico-tag.svg) no-repeat center / contain; }
  }
}

/* 価格の代わりに出す SOLD OUT・ASK（詳細） */
p.soldout { margin-block:7px; font-size:1.05em; font-weight:bold; line-height:1.2; text-align:center;
  > em { font-family:'Helvetica','Arial',sans-serif; font-size:1.8em; color:#c00; }
}


/* 目玉車 ---------------- */
.medama-list {
  &:not(.swiper-wrapper) { display:grid; grid-template-columns:repeat(4, 1fr); gap:min(2vw,20px); margin-block:min(6%,50px); }
  li {
    display:flex; flex-direction:column; height:auto;
    background-color:var(--color-wht); box-shadow: var(--shadow1);
    > a { display:contents; }
    p { margin:0; }
    .cname { padding:.5em; line-height:1.4; text-align:center; color:var(--color-wht); background-color:var(--color-base);}
    .grade { display:inline-block; font-size:.8em; font-weight:normal; }
    .image { position:relative;
      .frame { position:absolute; top:0; left:0; right:0; }
    }

    .price_total { margin-top:7px; font-size:1.05em; font-weight:bold; line-height:1; text-align:center;
      > em { font-family:'Helvetica','Arial',sans-serif; font-size:1.8em; color:#c00; text-shadow: 2px 2px 3px #ffff1a, -2px 2px 3px #ffff1a, 2px -2px 3px #ffff1a, -2px -2px 3px #ffff1a, 2px 0px 3px #ffff1a, 0px 2px 3px #ffff1a, -2px 0px 3px #ffff1a, 0px -2px 3px #ffff1a; }
    }
    .price_cost {font-size:.85em; line-height:1.4; text-align:center; }
    .info { display:grid; grid-template-columns:repeat(3, 1fr); margin-top:.5em; font-size:12px; text-align:center;
      div:nth-of-type(n+2) { border-left:1px solid var(--color-wht); }
      dt { padding-block:.2em; background: var(--color-gry0); }
      dd { padding-block:.3em; font-weight:bold; }
    }
  }
  &.kei  .cname { background-color:var(--color-sub1); }
  &.std  .cname { background-color:var(--color-sub2); }
  &.used .cname { background-color:var(--color-sub3); }
}


/* 在庫ページ ---------------- */
#stock {
  .result { display:flex; justify-content:space-between; align-items:baseline; }
  .order {
    .current { color:var(--color-base); text-decoration:none; }
  }
  .rowMax { font-size:1.6em; }
  .pagination { margin-block:min(6%,20px); .disabled { display:none; } }

  /* その他のラインナップ */
  .others { margin-block:10%; }
  .otherList { margin-block:1em 3em;
    .box {
      display:grid; grid-template-columns:36% 1fr; grid-template-rows:auto 1fr; column-gap:15px; position:relative;
      color:var(--color-text); line-height:1.4; text-decoration:none;
    }
    a.box {
      &::before { /* 右端の矢印 */
        position:absolute; top:50%; right:1.3%;
        content:""; display:block; width:10px; height:10px;
        border-top:2px solid var(--color-base); border-right:2px solid var(--color-base);
        transform:translateY(-50%) rotate(45deg);
      }
      &:hover { color:var(--color-base); opacity:.8; }
    }
    .image { grid-area:1 / 1 / 3 / 2; position:relative; }
    .cname { margin:0; font-size:1.1em; font-weight:bold; }
    .data {
      > div { display:flex; align-items:center; font-size:.9em; font-weight:bold; }
      dt { width:6.5em; font-size:.9em; }
      dd::before { content:"："; }
      .price { font-size:.9em; > em { font-size:1.4em; color:var(--color-red); } }
    }
  }
}
#stockList + .pagination { margin-bottom:8%; }

/* stockList 在庫一覧 --------------------------- */
#stockList {
  > li { position:relative;
    display:grid; margin-bottom:30px; background-color:#fff;
    padding:10px; border:1px solid var(--color-gry2); border-radius:5px;
    box-shadow: var(--shadow1);
  }
  .cname { display:flex; align-items:baseline; margin-bottom:.3em; font-size:1.3em; font-weight:bold; gap:.5em; }
  .maker { font-size:.85em; }
  .grade { font-weight:normal; font-size:.75em; }

  .image { position:relative; }
  .mtype {
    margin:0; align-self:start; padding-inline:.5em; font-size:.8em; text-align:center; color:var(--color-sub1); border:1px solid var(--color-sub1); border-radius:3px;
    &.used { color:var(--color-sub3); border-color:var(--color-sub3); }
  }
  .shopname { margin-block:0; padding-block:.1em; font-size:.8em; color:#fff; background:var(--color-blk); text-align:center; align-self:start; }

  .data { font-size:.9em; border-top:1px solid var(--color-gry2);
    > div {
      display:flex; width:50%; border-width:0 1px 1px 1px; border-style:solid; border-color: var(--color-gry2);
    }
    dt { width:5.5em; padding:.3em .5em; font-size:.9em; text-align:center; background-color:var(--color-gry0); }
    dd { flex:1; padding:.2em 1em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  }

  .link { width:min(100%,450px); margin-top:10px; margin-left:auto;
    > li { width:49%;
      &:nth-child(n+2) { margin-left:2%; }
      > a { display:block; padding:.3em; color:#fff; font-weight:bold; text-align:center; text-decoration:none; border-radius:5px;
        &.contact { background:var(--color-contact); }
        &.detail  { background:var(--color-zaiko); }
      }
    }
  }
}
/* zaiko 詳細 --------------------------- */
#zaikoDetail { position:relative;
  .carName {
    width:100%; margin-bottom:1em; padding:.6em 1em; font-size:1.125em; font-weight:bold; background:var(--color-gry0); border:1px solid var(--color-gry2); }

  .lBox { width:min(100%,640px); }

  div[class*="swiper-button"] {
    &::after { display:none; }
    &::before {
      position:absolute; top:50%;
      content:""; width:12px; height:12px;
      border-top:3px solid var(--color-base); border-right:3px solid var(--color-base);
    }
    &.swiper-button-next::before { right:6px; transform:translateY(-50%) rotate(45deg); }
    &.swiper-button-prev::before { left:6px; transform:translateY(-50%) rotate(-135deg); }
  }

  /* 画像スライダー（Swiper） */
  #slider { position:relative;
    .slider-num {
      position:absolute; top:5px; right:5px; z-index:2;
      padding:0 5px; color:#fff; font-size:.8em; background-color:rgba(0,0,0,.7);
    }
    .swiper-button-next { right:0; }
    .swiper-button-prev { left:0; }
  }
  .car-main-slider {
    .swiper-slide { background-color:#fff; }
    .cap { margin-block:.3em 0; font-size:.9em; line-height:1.4; }
    div[class*="swiper-button"] { width:20px; height:80px; margin-top:-40px; background:rgba(255,255,255,.9); }
  }
  .car-thumb-slider { margin-top:5px; cursor:pointer;
    .swiper-slide { padding:2px; }
    .swiper-slide-thumb-active img { outline:2px solid var(--color-base); outline-offset:-2px; }
    .empty { pointer-events:none; }
  }

  /* 年式・車検など（価格の下） PC：2列、スマホ：横1列（下の body.pc / body.sp） */
  dl:is(.spec, .spec-sub, .spec-vehicle) { display:grid; margin-bottom:1em; font-size:.9em; text-align:center;
    > div > * { padding:9px 4px; line-height:1.2; }
    dt { background-color:#f6f6f6; }
    dd { font-weight:bold; }
  }
  /* 色・店舗名（電話の下） PC・スマホ共通で横いっぱいの枠 */
  dl.spec-sub { row-gap:10px;
    > div { border:1px solid var(--color-gry2); }
    dt { border-bottom:1px solid var(--color-gry2); }
  }

  .note{ font-size:.9em; line-height:1.5; }

  /* 見積依頼・来店予約ボタン */
  .car-btn { display:grid; gap:10px; margin-block:1em;
    a { display:block; padding:.6em .5em; color:#fff; font-size:1.15em; font-weight:bold; line-height:1.3; text-align:center; text-decoration:none; border-radius:5px;
      &:hover { opacity:.85; }
      .sub { display:block; font-size:.7em; font-weight:normal; }
    }
    .contact a { background-color:var(--color-contact); }
    .reserve a { background-color:var(--color-reserve); }
  }
  /* 電話 */
  .car-tel { margin-block:1em; padding:.8em 1em; text-align:center; background:var(--color-gry1);
    .ttl { margin:0 0 .3em; font-weight:bold; }
    .tel { display:block; color:var(--color-base); text-decoration:none; line-height:1.2; }
    .num { font-family:var(--font-en); font-size:1.8em; font-weight:bold; letter-spacing:.02em; }
  }

  /* 車両情報 項目名｜値 を左右に並べて表のようにつなげる
     PC：1行3組、スマホ：1行1組（下の body.pc / body.sp） */
  dl.spec-vehicle { margin-bottom:1.5em; line-height:1.3; text-align:left; border-top:1px solid var(--color-gry2); border-left:1px solid var(--color-gry2);
    > div { display:flex; border-bottom:1px solid var(--color-gry2);
      &:last-child { border-right:1px solid var(--color-gry2); }
    }
    > div > dt { padding:1em .8em 0; font-size:.85em; }
    > div > dd { flex:1; padding:.75em; overflow-wrap:anywhere; }
  }
  /* 装備情報 PC：5列、スマホ：2列（下の body.pc） */
  .equip {
    display:grid; grid-template-columns:repeat(2, 1fr); gap:3px; font-size:.85em;
    > li { padding:.85em; line-height:1.5; font-weight:bold; border:1px solid var(--color-gry2);
      &.wide { grid-column:span 2; }
    }
  }
}


/*来店予約カレンダー*/
#rdate { padding-inline:20px;
  div[class*="swiper-button"] { top:0; margin-top:0; width:20px; height:100%; background-color:#fff;
    &::before { width:10px; height:10px; border-width:2px; border-color:#333; }
    &.swiper-button-next::before { right:5px; }
    &.swiper-button-prev::before { left:5px; }
  }
  .swiper-button-next { right:0; }
  .swiper-button-prev { left:0; }

  button { display:block; width:100%; margin-bottom:.5em; color:#333; text-align:center; background-color:transparent; }
  button:disabled { cursor:auto; }
  .week { display:block; font-size:.8em; }
  .week.holiday { color:#f55; }
  .week.saturday { color:#0af; }
  .date { display:block; padding-block:.5em 3em; font-size:.95em; border:1px solid #ddd; border-radius:3px; position:relative;
    &::after {
      content:""; display:block; width:1.2em; height:1.2em;
      position:absolute; left:50%; bottom:1em; translate:-50% 0;
      background:no-repeat center / contain;
    }
  }
  .date.holiday { background:#fee; }
  .date.saturday { background:#eef9ff; }

  .ok .date::after { background-image:url("../img/common/mark-ok.svg"); }
  .no .date { background: #f7f7f7; &::after { background-image:url("../img/common/mark-no.svg"); } }
}

/* ================================================================
  PC・スマホの切り替え
  画面幅ではなく body の class（$ua：pc / sp）で切り替える
  ※:where() で囲んで詳細度を上げない
=================================================================== */
/* PC ---------------------------------------------------------- */
:where(body.pc) {
  /* ジャンル別検索 */
  .typeBtnList {
    grid-template-columns: repeat(6,1fr);
  }

  /* 在庫一覧 */
  .contents { display:grid; grid-template-columns:250px 1fr; align-items:start; gap:20px; }
  #side { order:-1; position:sticky; top:0; }
  &#stock .otherList { display:grid; grid-template-columns:repeat(2, 1fr); gap:15px; }

  /* stockList 一覧 ---------------------- */
  #stockList {
    > li {
      grid-template-columns:min(35%,640px) 1fr 450px; column-gap:20px;
      grid-template-rows:repeat(5, auto);
      .cname { grid-area:1 / 1 / 2 / 4; }
      .image { grid-area:3 / 1 / 6 / 2; }
      .price_law { grid-area:3 / 2 / 4 / 4; position:relative;
        display:grid; grid-template-columns:48% 5.5em 1fr; column-gap:.5em;
      }
      .data  { grid-area:4 / 2 / 5 / 4; }
      .link  { grid-area:5 / 2 / 6 / 4; }
    }
    .data > div:nth-child(2n) { border-left:none; }
    .price.flex { grid-row: 1 / span 2; padding-right:1em;
      .base { padding-right:3%; }
    }
    .def .manen { font-size:.8em; }
    .law { grid-column: 2 / span 2; }
  }

  /* zaiko 詳細 */
  #zaikoDetail { max-width:1100px; margin-inline:auto;
    .lBox { margin-right:4%; }
    .rBox { flex:1 }

    /* 年式・車検など 2列 */
    dl.spec { grid-template-columns:repeat(2, 1fr); row-gap:10px;
      > div { border:1px solid var(--color-gry2);
        &:nth-child(2n) { border-left:none; }
      }
      dt { border-bottom:1px solid var(--color-gry2); }
    }
    /* 車両情報 1行3組（項目名13.33%・値20%） */
    dl.spec-vehicle { grid-template-columns:repeat(3, 1fr); border-left:none; /* 左端の線は dt の左線で */
      > div:nth-child(3n) { border-right:1px solid var(--color-gry2); }
      dt { width:40%; border-inline:1px solid var(--color-gry2); }
    }

    /* サムネイル 2行×10（矢印あり） */
    .car-thumb-slider { padding-inline:20px;
      div[class*="swiper-button"] { top:0; margin-top:0; width:20px; height:100%; background-color:#fff;
        &::before { width:8px; height:8px; border-width:2px; }
      }
    }

    .equip {
      grid-template-columns:repeat(5, 1fr); font-size:.8em;
    }
  }
}

/* スマホ ------------------------------------------------------ */
:where(body.sp) {
  /* 目玉車 */
  .medama-list {
    &:not(.swiper-wrapper) { grid-template-columns:repeat(2, 1fr); }
    li {
      .cname { line-height:1.3; .grade { display:block; } }
      .price_total { font-size:1em; }
      .price_cost { font-size:.75em; }
    }
    .info dd { font-size:10px; }
  }

  /* 検索BOX */
  .searchBox {
    padding-bottom:1em; background:#fff;
    .searchBtn {
      width:80%; height:auto; margin:10px auto 0;
      padding-block:.7em; padding-left:2em;
      &::before {
        top:50%; left:calc(50% - 3.5em); translate:0 -50%;
        width:1.8em; height:1.8em; }
    }
  }

  /* 在庫ページ */
  &#stock.index {
    #side { display:none; z-index:1000;
      position:fixed; inset:0; overflow-y:auto;
      padding:2vw 2vw 3em; background-color:rgba(0,0,0,.3);
    }
    .flo-nav { display:none !important; }
    .flo_search {
      position:fixed; bottom:0; left:0; right:0; z-index:999;
      padding-block:.9em; font-size:1.2em;
      color:#fff; line-height:1.2; text-align:center; background-color:var(--color-base);
      .ico { display:inline-block; width:1.2em; vertical-align:bottom; aspect-ratio:1; background:url(/img/common/icon-f-search.svg) no-repeat center / contain; }
    }
  }
  #stockList {
    > li {
      margin-bottom:20px; padding:10px;
      grid-template-columns:38% 1fr;
      grid-template-rows:repeat(5, auto);
      .cname { grid-area:1 / 1 / 2 / 3; font-size:1.2em; }
      .image { grid-area:3 / 1 / 4 / 2; }
      .price_law { grid-area:3 / 2 / 5 / 3; padding-left:10px; position:relative; }
      .mtype { position:absolute; top:-3px; left:10px; padding-inline:.3em; font-size:.7em; line-height:1.3; }
      .data  { grid-area:5 / 1 / 6 / 3; font-size:.8em; margin-top:1em; }
      .link  { grid-area:6 / 1 / 7 / 3; }
    }
    .price {
      .def, .price { display:block; }
      .label br { display:none; }
    }
    .total .label { align-self:flex-end; padding-bottom:.4em; }
    .data {
      > div { width:33.33%;
        &:not(:nth-child(3n+1)) { border-left:none; }
      }
      dt { width:3.3em;
        > span { display:none; }
      }
      dd { padding:.3em; }
    }
  }

  /* zaiko 詳細 */
  &.detail .flo-nav { display:none !important; }
  .flo-contact { /* スクロールしたら表示（details.php のJS） */
    position:fixed; top:0; left:0; right:0; z-index:999;
    display:grid; grid-template-columns:repeat(2, 1fr); gap:5px;
    padding:5px 10px; background-color:#fff; box-shadow:0 2px 4px rgba(0,0,0,.15);
    > li > a {
      display:block; height:100%; padding-block:.4em; color:#fff; font-weight:bold; line-height:1.3; text-align:center; text-decoration:none; border-radius:5px;
      .big { font-size:1.2em; }
    }
    .contact > a { background-color:var(--color-contact); }
    .tel > a { background-color:var(--color-base); }
  }
  #zaikoDetail {
    .rBox .price.flex { margin-block:1em; }
    /* 年式・走行距離・車検・修復歴を横1列（排気量は .pc_only） */
    dl.spec { grid-template-columns:repeat(4, 1fr); margin-block:.5em .75em;
      > div:not(:first-child) { border-left:1px solid var(--color-gry2); }
      > div > * { padding-block:4px; }
      dt { background:none; }
      .pc_only { display:none; }
    }

    /* 車両情報 1行1組（項目名30%・値70%） */
    dl.spec-vehicle {
      > div { border-right:1px solid var(--color-gry2); }
      dt { width:30%; }
    }

    /* サムネイル 1行4枚（次の画像を少し見せる） */
    .car-thumb-slider { padding-right:10%;
      div[class*="swiper-button"] { display:none; }
    }
  }
  #rform { margin-inline:-3vw; }
  #rdate {
    button { padding-inline:2px; }
    .date { font-size:.8em; }
  }

  /* その他の車・閲覧履歴 1列で区切り線 */
  &#stock .otherList {
    > li { padding-bottom:15px; border-bottom:1px solid var(--color-gry2);
      &:nth-child(n+2) { margin-top:15px; }
    }
    .box { column-gap:10px; }
  }
}