@charset "utf-8";

:root {
  /* 使用色 */
  --color-text:#222;

  --color-base:#29aae3; /*ベースカラー*/
  --color-sub1:#f8363e; /*アクセント 1*/
  --color-sub2:#ff9833; /*アクセント 2*/
  --color-sub3:#ffe945; /*アクセント 3*/

  --color-confirm:#8ec21f;
  --color-send:#ff6699;

  --color-wht:#ffffff;
  --color-red:#ed2735;
  --color-blu:#387daf;

  --color-gry:#f0f0f0;
  --color-gry1:#e2e2e0;
  --color-gry2:#b7b7b5;
  --color-gry3:#6d6c6c;
  --color-gry4:#3a3a39;

  /* フォント */
  --font-base : "Noto Sans JP", sans-serif;
  --font-sub  : "Mochiy Pop P One", sans-serif;
  --font-sub2 : "M PLUS Rounded 1c", sans-serif;
  --font-en   : "Oswald", sans-serif;
}


/* base ------------------------*/
#wrapper { width:min(100%, 800px); margin-inline:auto; position:relative; }
.inner { margin-inline:4%; }
.en { font-family:var(--font-en); }

.mt0 { margin-top:0; }
.mb0 { margin-bottom:0; }

.bg-gry { background-color:var(--color-gry); }
.bg-crm { background-color:#fef9e8; }
.bg-dots {
  background-color: var(--color-base);
  background-image: radial-gradient(circle, #ffffff 2px, transparent 2px), radial-gradient(circle, var(--color-sub3) 2px, transparent 2px), radial-gradient(circle, var(--color-sub3) 2px, transparent 2px), radial-gradient(circle, #ffffff 2px, transparent 2px);
  background-position: 0 10px, 24px 10px, 12px 34px, 36px 34px;
  background-size: 48px 48px; }

/* header ------------------------*/
#header {  }

/* gnav ------------------------*/
#gnav {  }

/* footer ------------------------*/
#footer {  }

.copyright { margin:0; padding:.5em 0; color:#fff; font-size:.75em; text-align:center; background-color:var(--color-base); }

/* common------------------------*/
/* title */
.pageTitle { padding-top:min(7%,30px); font:min(6.5vw,45px)/1.2 var(--font-sub2); text-align:center; }
.ttl-fill { padding-block:.3em; color:#fff; font-size:1.2em; text-align:center; background:var(--color-sub2); }

/* button */
.btn-def { padding:.5em 1.5em; color:#fff; background-color:var(--color-sub2); border-radius:2em; }

/* form関連 */
.dl-form {
  font-size:min(4.2vw,22px);
  > div { padding:3.75%; border-bottom:2px solid var(--color-sub2); }
  dd { margin-top:.2em; }
  .help { display:inline-block; font-size:.9em; font-weight:400; color:var(--color-gry3); }
  .radio label { display:inline-flex; align-items:center; gap:.2em; padding-inline:.5em .75em; background:#fff; border:1px solid #ccc; border-radius:3px; }
  a.zipcode { display:inline-block; margin-left:.5em; padding-inline:.5em; font-size:.85em; line-height:2; color:#fff; background:var(--color-gry4); border-radius:5px; }
}
.dl-form dt, p.pcheck {
  display:flex; align-items:center; gap:.3em;
  &::before {
    display:block; content:"任意";
    padding:.2em .5em .3em; font-size:.75em; line-height:1;
    color:#fff; background-color:#999; border-radius:3px
  }
  &.required::before { content:"必須"; background-color:var(--color-sub1); }
}
.dl-confirm {
  border-top:1px solid var(--color-gry1);
  > div {
    display:grid; grid-template-columns:11em 1fr;
    padding:.2em .4em; border-bottom:1px solid var(--color-gry1);
    dt { font-size:.875em; }
    &:nth-child(2n) { background-color:var(--color-gry); }
  }
}

form {
  label.error { display: inline-block; margin-inline:.2em; color:var(--color-red); font-size: 0.875em; }
  div.error, label.error { display:none; }
  input.error, textarea.error, select.error { background-color:color-mix(in srgb, var(--color-red) 10%, transparent); }
}

.submit { margin-block:min(7%, 40px);
  input[type="submit"], button { position:relative;
    display:inline-block; width:80%; padding:.5em;
    color:#fff; font:400 1.5em/1 var(--font-sub); letter-spacing:.1em;
    background:var(--color-sub2); border-radius:2em;
    box-shadow:0 .25em color-mix(in srgb, var(--color-sub2) 85%, black);
    &::before { display:block; content: '';
      position:absolute; top:50%; right:2em;
      width:.5em; height:.5em;
      border-top:3px solid #fff;
      border-right:3px solid #fff;
      transform:rotate(45deg) translateY(-50%);
    }
  }
  button.confirm { background-color:var(--color-confirm); }
  button.send { background-color:var(--color-send); }
  button.back { margin-top:.5em;
    color:var(--color-sub2); background:#fff; border:3px solid var(--color-sub2);
    &::before {
      right:auto; left:2em;
      border:none;
      border-bottom:3px solid var(--color-sub2);
      border-left:3px solid var(--color-sub2);
    }
  }
}

/* 車両リスト swiper -------- */
.cars-box { padding-bottom:10%;
  .ttl { padding-block:3.5% 1%; font-size:min(6.4vw,32px); text-align:center;
    &.maker > span {
      display:inline-flex; gap:.3em;
      &::before {
        display:block; content:''; width:2em; aspect-ratio:2/1;
        background:no-repeat center / contain;
      }
    }
    &.daihatsu > span::before { background-image:url(../img/common/logo_daihatsu.png) }
    &.honda > span::before { background-image:url(../img/common/logo_honda.png) }
    &.mazda > span::before { background-image:url(../img/common/logo_mazda.png) }
    &.mitsubishi > span::before { background-image:url(../img/common/logo_mitsubishi.png) }
    &.nissan > span::before { background-image:url(../img/common/logo_nissan.png) }
    &.suzuki > span::before { background-image:url(../img/common/logo_suzuki.png) }
    &.toyota > span::before { background-image:url(../img/common/logo_toyota.png) }
  }

  .swiper {
    --swiper-navigation-size:1.5em;
    --swiper-pagination-bullet-size:.9em;
    --swiper-pagination-color:var(--color-sub1);
    --swiper-pagination-bullet-inactive-opacity:1;
    --swiper-pagination-bullet-inactive-color:#fff;
  }
  .swiper-cars:nth-child(n+2) { margin-top:8%; border-top:3px dotted var(--color-text); }
  .swiper-wrapper { padding-left:20px; }
  .swiper-slide { position:relative;
    padding:min(2vw,15px); background:#fff; border-radius:20px;
  }
  .swiper-pagination { position:relative; }
  .swiper-pagination-bullet { border:2px solid var(--color-sub1); }
  .swiper-button-next, .swiper-button-prev {
    top:55%; padding:.4em; color:#fff;
    background-color:rgba(0,0,0,.7); border-radius:50%; }


  .img { margin-inline:auto; padding-block:5% 3%; text-align:center; }
  .text { position:absolute; top:4%; left:3%; width:35%; }
  .yen { font-size:.75em; }
  .cname { position:relative; text-align:center;
    > span { display:inline-block; padding:.1em .5em .2em .4em; color:#fff; font-size:1.2em; background:var(--color-text); }
    .maker { display:inline-block; margin-right:.5em; padding-inline:.3em; color:var(--color-text); font-size:.8em; background:#fff; }
    &::before { position:absolute; top:50%; left:0; z-index:-1;
      display:block; content:""; width:100%; height:3px;
      background:var(--color-text); transform:translateY(-50%); }
  }
  .grade { margin-block:.4em 0; font-size:1.1em; text-align:center; }
  .info {
    display:grid; grid-template-columns:6.5em 1fr; align-items:center; gap:.5em;
    margin-block:.8em; margin-left:.5em; line-height:1;
    > *:nth-child(-n+2) { color:var(--color-sub1); }
    dd { font-size:1.2em }
  }
  .price {
    display:flex; justify-content:center; align-items:end; line-height:1.3;
    .label { font-size:.8em; text-align:center;
     .border { display:block; border:1px solid var(--color-text); } }
    .monthly { padding-left:.5em; font-size:1.1em; font-weight:700; > em { font-size:2em; color:var(--color-sub1); } }
    .num { font-size:1.1em; > em { font-size:1.3em; } }
  }
  .btn {
    margin-block:.75em .5em; padding:.5em; color:#fff; font-weight:700;
    text-align:center; background:var(--color-sub1); border-radius:10px;
    box-shadow:0 .3em color-mix(in srgb, var(--color-sub1) 85%, black);
  }
}

/* 問い合わせ 7.jpg */
.cotact-tel { position:relative;
  a { display:block; opacity:0; position:absolute; left:3.5%; width:93%; aspect-ratio:744/146; }
  .uji     { top:26.1%; }
  .fushimi { top:35.3%; }
  .rakusai { top:44.7%; }
  .tottori { bottom:26.3%; }
  .izumo   { bottom:17.1%; }
  .matsue  { bottom:7.8%; }
}
/* 問い合わせ 19.jpg */
.shop-list { position:relative;
  a { display:block; opacity:0; position:absolute; left:0; right:0; aspect-ratio:800/64; }
  .uji     { top:3.5%; }
  .fushimi { top:19.8%; }
  .rakusai { top:36.1%; }
  .tottori { top:51.4%; }
  .izumo   { top:67.5%; }
  .matsue  { top:83.7%; }
}

/* 個人情報保護方針 -------- */
.policy-box {
  padding:3.75%;
  .subttl { margin-bottom:.2em; }
  .con { height:200px; overflow:auto; padding:.5em 1em; font-size:13px; font-weight:400; background-color:#fff; border:1px solid #ccc;
    > h4 { margin-top:1.6em; }
    > p { margin-top:0; }
    > ol { margin-left:0; padding-left:1.5em; }
  }
}

.sec-form { padding-block:5%;
  .ttl { font-family:var(--font-sub); font-size:2.2em; text-align:center; text-shadow:2px 2px #fff; }
  .lead { margin-block:.5em; font-size:1.3em; font-weight:600; }
  .pcheck { padding-left:3.75%; }
}

/* loan ローン審査 -------- */
.form-header {
  .text { font-size:min(4vw,16px); font-weight:400; }
  &.thanks { padding-bottom:6%; .text { padding-bottom:2%; } }
}

.step-flow {
  display:grid; grid-template-columns:repeat(3, 1fr); margin-top:1.5em;
  li { position:relative;
    font-size:1.8em; font-family:var(--font-sub2); line-height:2; text-align:center; color:#fff; background:var(--color-gry2);
    &:not(:last-child)::before, &:not(:last-child)::after {
      position:absolute; top:0; bottom:0; right:-.2em; z-index:2;
      display:block; content:''; width:.8em;
      background-color:var(--color-gry2);
      clip-path: polygon(0% 0%, 50% 0, 100% 50%, 50% 100%, 0% 100%);
    }
    &:not(:last-child)::after {
      right:-.4em; z-index:1; background-color:#fff;
    }
    &:nth-child(1), &:nth-child(1)::before { background: #f3c517;}
    &.active:nth-child(2), &.active:nth-child(2)::before { background:var(--color-confirm);}
    &.active:nth-child(3) { background:var(--color-send);}
  }
}
.step-list {
  display:flex; justify-content:center; align-items:center; gap:.5em;
  margin-block:1em; font-size:1.3em; font-weight:600;
  .step { width:1.9em; aspect-ratio:1; padding-top:.03em; text-align:center; color:var(--color-gry2); border:2px dashed var(--color-gry2); border-radius:50%;
    &.active { color:#fff; background:var(--color-text); border:2px solid var(--color-text); }
  }
}

.step-box { display:none;
  &.active { display:block; }
  button { font-family:var(--font-sub2); border-radius:10px; box-shadow:none } }

/* ================================================================
  スマホ
=================================================================== */
@media screen and (max-width: 599px){

  /* 車両リスト swiper */
  .cars-box {
    .swiper-slide { border-radius:15px; }
  }
  .kei {
    .cars-box .img { width:90%; margin-inline:auto; }
  }
  .car {
    .cars-box .img { margin-inline:-2vw; }
  }
}