@charset "utf-8";


/* common ---------------- */
#contents {  }
section:first-of-type { margin-top: 1.5em;}


/* パンくず */
#pan {
  gap: .5em; font-size: .85em; max-width:1200px; margin: 1em auto;
  li {
    &:nth-child(n+2)::before {
      content: '>'; padding-right: .5em;
    }
  }
}

/* スライダー */
.slick-arrow {
  &::before {
    content: ''; position: absolute; top: 0; left: 0; width: 1em; aspect-ratio: 1; background-color: var(--color-l-orn); clip-path: var(--arrow);
  }
  &.slick-prev {
    left: -5.5%;
    &::before { rotate: -180deg;}
  }
  &.slick-next { right: -5.5%;}
}
.slick-dots{
  bottom: -20px;
  li.slick-active button:before { color: var(--color-l-orn);}
}

/* title */
.page-ttl {
  display: flex; flex-direction: column-reverse; padding-block: 1.5em; font-size: clamp(18px,3vw,36px); color: var(--color-base); font-weight: 700; text-align: center; line-height: 1.5; position: relative;
  .sub {
    margin-block: 0 -.3em; font-size: .56em; font-weight:500;
  }
}
.sec_ttl {
  font-size: clamp(17px,3vw,30px); display: inline-block; background: #fff; border: 1px solid #999; padding: .3em 1em; border-radius: 30px; box-shadow: 3px 3px #999; margin: 0 auto 20px; color: #333;
}

/* pagination ページ送り ------------- */
.pagination{
  margin:1em 0 30px auto; text-align:center;
  :where(a,span){
    display:inline-block; margin:3px; width:34px; line-height:32px; text-align:center; background-color:var(--color-wht); border-radius: 3px;
  }
  a{ color: var(--color-sub); text-decoration:none; background-color:var(--color-wht); border:1px solid var(--color-l-orn); }
  a:hover{ background-color:var(--color-l-gry); border:1px solid var(--color-l-orn); }
  span.current{ color:var(--color-sub); background-color:var(--color-l-orn); border:1px solid var(--color-l-orn); }
  span.disabled { border:1px solid #d0cac8; color:#d0cac8; }

}
/* form */
.tab-nav {
  overflow:hidden; max-width:600px; margin:2rem auto 2rem; border:3px solid var(--color-sub); border-radius:5px;
  li {
    -webkit-box-flex:1; flex-grow:1;
    a {
      display:block; padding:.5em 1em; color:var(--color-sub); text-align:center; font-weight:bold; text-decoration:none;
      &:hover,&:focus { background-color:var(--color-l-gry); }
    }
    &.current a {background-color:var(--color-sub); color: var(--color-wht); }
  }
}

.btn-submit {
  min-width: 170px; padding: 1em; font-weight: 700; color: var(--color-wht); background-color: var(--color-red);
  &.prev {
    color: var(--text-color); border: 1px solid; background-color: var(--color-l-gry);
  }
}

/* list */
.oval {
  >li {
    text-indent: 1.3em; position: relative;
    &::before {
      content: ''; position: absolute; top: 1.2em; left: .5em; rotate: -30deg; width: .8em; height: .5em; background-color: var(--color-l-orn); border-radius: 50%;
    }
  }
}

/* contents ---------------- */
/* 新生オートとは */
.con-box {
  >:nth-child(n+2):not(:last-child) { margin-bottom: 1.5em;}
}

.card-list {
  gap: .7em;
  li {
    padding: 1em; box-shadow: var(--shadow);
    .ttl { margin-bottom: .7em; font-size: 1.12em; color: var(--color-base); font-weight: 700; text-align: center;}
    .txt { margin-block: unset; padding: .7em 1em; background-color: var(--color-crm);}
  }
  &.border {
    li {
      box-shadow: unset; border: 3px solid var(--color-base); border-radius: 10px;
      .ttl { color: var(--color-wht); background-color: var(--color-base); padding: .5em;}
      .txt { padding: unset; background-color: unset;}
    }
  }
  &.bg{
    li {box-shadow: unset;}
    .txt { padding: unset; background-color: unset;}
    &.l-orn {
      li {
        background-color: var(--color-l-orn);
      }
    }
    &.blue {
      li {
        color: var(--color-wht); background-color: var(--color-blu);
      }
    }
  }
}
.img-list {
  gap: 1em;
}
.bg-box {
  width: 100%; margin-inline: auto; padding: .7em 1em;
  &.crm { background-color: var(--color-crm);}
  &.wht { background-color: var(--color-wht);}
  &.l-gry { background-color: var(--color-l-gry);}
}
.con-list {
  > li{
    &:nth-child(n+2) {
      margin-top: 1.7em;
    }
  }
}

#about {
  .lead {font-size: 1.25em; color: var(--color-orn); font-weight: 700;}
  .low-price {
    gap: .5em;
    >li {
      border: 3px solid; border-radius:10px;
      .ttl { padding-block: .3em; font-size: 1.25em; color: var(--color-wht); font-weight: 700; text-align: center;}
      .txt { margin-block: unset;}
      &.our {
        border-color: var(--color-base);
        .ttl { background-color: var(--color-base);}
        .dtl {
          .dtl-ttl {
            color: var(--color-base);
          }
        }
      }
      &.customer {
        border-color: var(--color-sub);
        .ttl { background-color: var(--color-sub);}
        .dtl {
          .dtl-ttl {
            color: var(--color-sub);
          }
        }
      }
      .dtl {
        padding: .5em;
        li {
          &:nth-child(n+2) { margin-top: .7em;}
          .dtl-ttl { font-size: 1.1em; font-weight: bold;}
        }
      }
    }
  }
  .con-list {
    > li {
      display: flex; flex-wrap: wrap; gap: .5em; padding: 1em; background-color: var(--color-wht); box-shadow: var(--shadow);
      .txt-area {
        width: 100%;
        .bnr {
          li {
            width: fit-content; margin-inline: auto; padding: .5em; border: 2px solid var(--color-l-gry);
            a.flex { gap: .5em; align-items: center;}
            img { width: 100%; max-width: 250px;}
            .shop-name { display: block; color: var(--color-blu); font-weight: 700; }
          }
          &.flex {
            gap: .5em;
          }
        }
      }
      .slider,.image { width: 100%;}
    }
  }
}
.melit dl { margin:10px auto; max-width: 1020px;}
.melit dt { width:140px; height:120px; margin-right:10px; padding-top:70px; font-size:1.25rem; font-weight:bold; text-align:center; background-color:#f08900; background-repeat:no-repeat; background-position:center 20px;  border-radius: 10px;}
.melit dd { width:426px; padding:30px 40px; border-radius: 10px;}
.melit dd.new { background-color:#f4d734; }
.melit dd.old { background-color:#e6e6e6; }

.melit .kosyo dt { background-image:url(../img/about/kosho.svg); background-size: 50%; color: #fff; margin: 0 10px;}
.melit .buhin dt { background-image:url(../img/about/buhin.svg); background-size: 40%; color: #fff;  margin: 0 10px;}
.melit .tenken dt { background-image:url(../img/about/tenken.svg); background-size: 40%; color: #fff; margin: 0 10px;}
.melit .sell dt { background-image:url(../img/about/sell.svg); background-size: 46%; color: #fff; margin: 0 10px;}

dl.melit_item { margin:0 auto 10px;}
.melit_item dt {width:425px; height:auto; margin:0; padding: 4px 0; font-size:20px;}
.melit_item dt:before { content:""; position:absolute; bottom:0; left:0; right:0; margin:0 auto; width:0; height:0; width: 40px; height: 30px;}

.melit_item dt.new {background-color:#f4d734;}
.melit_item dt.old {background-color:#e6e6e6;}
.melit_item dt span { display:inline-block; padding:2px; padding-left:45px;}
.melit_item dt.new span { background:url(../img/about/new.svg) 0 center no-repeat; background-size: 40px;}
.melit_item dt.old span { background:url(../img/about/old.svg) 0 center no-repeat; background-size: 40px;}

 /*----- スタッフ紹介 -----*/
.staff_list { margin: 30px auto 0;}
.staff_list li { width:220px; margin: 0 1em 2em; text-align:center; }
.staff_list li figure {display: flex; justify-content: center; align-items: center; margin:0 auto 5%;}
.staff_list li figure img {width: 220px; height: 220px; object-fit: cover; border-radius:50%;}
.staff_list li figure:before, .staff_list li figure:after { opacity:0; content:""; position:absolute; top:0; left:0; right:0; bottom:0; width:30px; height:3px; margin:auto; background:#fff; z-index:2; }
.staff_list li figure:after { width:3px; height:30px; }
.staff_list li a { display:block; text-decoration:none; }
.staff_list li a:focus { outline:none; }
.staff_list li .name { margin:0; font-size:24px; line-height:1.3; }
.staff_list li .post { margin:10px 0 0; color: var(--color-base); }
.staff_list li.empty { height:0; margin-bottom:0; }
.staff_list li figure:before, .staff_list li figure:after,
.staff_list li a figure, .staff_list li a figure img { transition:all .3s; -webkit-transition:all .3s; }
.staff_list li a:hover figure img { opacity:0.7; }
.staff_list li a:hover figure:before, .staff_list li a:hover figure:after { opacity:0.8; }

.staff_con { position:relative; width:460px; max-width:100%; margin: 0 auto; padding:30px; background:#fff; }
.staff_con figure { position: relative; }
.staff_con .post { position:absolute; bottom:0; left: 0; display:inline-block; margin:0; padding:3px 10px; color:#fff; background:var(--color-base); }

.staff_con h3 span { margin-left:15px; color:var(--color-base); font-size:16px; }
.staff_con h3 { margin:6px 0 18px; padding-left:34px; font-size:24px; font-weight:500; border-bottom:1px dashed #ccc; background:url(../img/gnav_staff.svg) no-repeat 3px 8px / 21px; }

.staff_data { margin-top:22px; }
.staff_data dt { float:left; clear:left; width:5em; margin-right:10px; text-align:center; font-weight:bold; background:var(--color-sub); }
.staff_data > * { margin-bottom:3px; padding:2px 6px; }

/* メンテナンス */
  .maintenance-list {
>li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5em; padding: 1em; background-color: var(--color-wht); box-shadow: var(--shadow);}
      .txt-area { width:100%;}
      .slider,.image { width: 100%;}
    }

.weithing li {width: 33.3%;}
.shaken_banner a {width:100%; display: inline-block; padding: .5em 1.5em; color: var(--color-wht); font-weight: 700; line-height: 2em; border: 1px solid #ccc; background-color: var(--color-sub); font-size: 1.2em;}
.shaken_banner img {width:100%;}
.priceList { width:100%;}
.priceList p {margin-block:0;}
.priceList table { width:100%;}
.priceList td, .priceList th { padding:.5em 1em; border:1px solid #666; font-weight:normal; text-align:center; background:#fff; }

/* 料金表 */
.priceList td,.priceList th { white-space:nowrap; width:15%; font-size: .85em;}
.priceList .ttl th,.priceList .ttl td {color:var(--color-wht); background: var(--color-base); font-weight: 600;}
.priceList th.subttl,.priceList td.subttl {background:#eee; }

.scrollWrap { max-width:320px; overflow-x:scroll; -webkit-overflow-scrolling:touch; padding: 0;}
.scrollWrap > .scroll { position:relative; padding-top: 30px; margin-bottom: 0;}
.scrollWrap > .scroll:before { content:"横にスクロールできます→"; position:absolute; top:5px; left:0; font-size:.875em;}

/* 会社紹介 */
#company {
  #access {
    .shop {
      gap: 1em;
      .dtl-wrap { display: flex; flex-direction: column-reverse;}
      .info {
        dd {
          font-size: 1.3em;
          .holiday { font-size: .9em;}
        }
      }
      address { margin-bottom: .5em; font-size: 1.2em; font-weight: 600;}
    }
  }
  .message {
    gap: 1em; max-width: 800px; margin:0 auto 3em;
    .txt-box {
      .serif {
        margin-bottom: .5em; font-weight: 600; text-align: end;
        .name { padding-left: 1em; font-size: 1.5em;}
      }
      .ttl { padding-left: .5em; font-size: clamp(20px,3vw,36px);; color: var(--color-base); font-weight: 700; line-height: 1.5; border-bottom: 2px solid;}
    }
  }
  .slogan {
    > li{
        padding: 1em 1.5em 2em; box-shadow: var(--shadow);
        .ttl-w-border {
          margin-block: .7em .5em; font-size: 1.5em; color: var(--color-base); font-weight: 700; text-align: center;
          &.mb-narrow { margin-block: .3em .2em;}
        }
        p { margin: unset;}
    }
    .slogan-num-list {
      > li {
        counter-increment: slogan-num; padding-left: 2.5em; position: relative; z-index: 0;
        &::before {
          z-index: -1; content: '-'counter(slogan-num)'-'; position: absolute; left: 0; font-size: 1.5em; color: var(--color-gry); font-family: "Roboto Condensed",sans-serif; font-style: italic;
        }
        &:nth-child(n+2) { margin-top: 1em;}
      }
    }
  }
}
.route {
  gap: .5em;
  > li { width: 100%;}
  .ttl { padding-left: .5em; font-size: 1.12em; color: var(--color-base); font-weight: 700; border-bottom: 1px solid;}
  .txt { margin-block: .5em 0;}
}

/* 買取査定 */
#purchase {
  .satei_bg {
    width: 100%; padding-block: clamp(30px,3vw,60px); background: url(../img/purchase/satei_bg.jpg) no-repeat; background-size: cover;
  }
  .satei-list {
    text-align: center; font-weight: 700; font-size: 1em; line-height: 1.6; color: var(--color-wht); padding: 0 0 1em; line-height: 1.6em;
    a.tel_num {color:var(--color-wht); font-size: 2.5em;}
    p {margin-block: .8em;}
    .yel {color: var(--color-yel);}
  .reserve_btn {background: var(--color-base); max-width: 500px; margin: 0 auto; border-radius: 10px; text-align: center; height: 80px;}
  .reserve_btn a {display: block; height:100%; padding-left: 1.5em; color: #fff; font-size: 1.5em; font-weight: 600; padding-top: 1em; position: relative;}
  .reserve_btn a::before {content:""; display: block; width: 1.5em; height: 1.5em; position: absolute; top:0; bottom: 0; left: 1em;  margin:auto; background: url(../img/top/reserve_icon.svg) no-repeat 100% / 100%;}
  .reserve_btn a span {display: block; font-size: .6em;}
  }
  .over-bg-gry {
  .satei-list,a.tel_num {color:var(--text-color);}
}
}

#purchase {
  .lead {
    gap: 1em; align-items: flex-end; margin-bottom: 2em;
  }
  .satei-list {
    margin-top: 1.5em; gap: 1em;
    > li {
      width: 100%;
      a {
        display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 75px; padding: 1em; font-size: 1.3em;color: var(--color-wht); font-weight: 700; border-radius: 5em;
      }
      &.form {
        a {
          background-color: var(--color-blu); position: relative;
          &::before {
            content: ''; position: absolute; top: 55%; right: 1.3em; translate: 0 -50%; rotate: 90deg; width: .8em; aspect-ratio: 1; background-color: var(--color-wht); clip-path: var(--arrow);
          }
        }
      }
      &.tel {
        a {
          padding-block: .5em; line-height: 1.3; background-color: var(--color-red);
          .yel { color: var(--color-yel);}
          em { display: block;}
        }
      }
    }
  }
  /* 買取事例 */
  .pex-list {
    .item {
      margin-bottom: .5em; margin-inline: .5em; padding-bottom:.5em; box-shadow: var(--shadow);
      .pex-ttl {
        display: grid; align-items: center; min-height: 3.5em; font-size: clamp(12px,3vw,20px); color: var(--color-wht); line-height: 1.5; text-align: center; background-color: var(--color-base);
        p { margin-block: unset;}
      }
      :where(.price,.info) {
        margin-top: .7em; padding-inline: .5em;
      }
      .price {
        p { margin-block: unset;}
        .base {
          font-size: clamp(11px,2vw,14px);
        }
        .p-price {
          .font-en { font-size: 2em; color: var(--color-red); font-weight: 900;}
        }
        .up-price{
          align-self: center; padding-inline: .5em; font-size: .8em; color:var(--color-wht); line-height: 1.5; background-color: var(--color-red); border-radius: 3px;
        }
      }
      .info {
        font-size: clamp(10px,2vw,14px);
        > div { gap: .7em;}
        dt {
          width: 6em; text-align: center; background-color: var(--color-crm);
        }
        dd {
          flex: 1;
        }
      }
    }
  }
  /* 買取強化 */
  .pcar-list {
    gap: 1em;
    >li {
      width: calc((100% - 1em) / 2); padding-bottom:.5em; box-shadow: var(--shadow);background-color: var(--color-wht);
      .pcar-ttl {
        display: grid; align-items: center; min-height: 3.5em; font-size: clamp(12px,3vw,20px); color: var(--color-wht); line-height: 1.5; text-align: center; background-color: var(--color-base);
        p { margin-block: unset;}
      }
      .info {
        margin-top: .7em; padding-inline: .5em; font-size: clamp(10px,2vw,14px);
        > div { gap: .7em;}
        dt {
          width: 6em; text-align: center; background-color: var(--color-crm);
        }
        dd {
          flex: 1;
        }
      }
    }
  }
  .high-price-reason {
    .card-list {
      li {
        counter-increment: reason-num;
        .ttl {
          &::before {
            content: '\7406\7531\305D\306E'counter(reason-num); display: block; margin-bottom: -.5em; font-size: .8em;
          }
        }
      }
    }
  }
  .customer-image {
    .card-list {
      li {
        display: flex; align-items: center; justify-content: center; width: 100%; padding-top: 6em; font-size: 1.1em; font-weight: 700; position: relative;
        &::before {
          content: ''; position: absolute; top: .5em; left: 50%; translate: -50% 0;  width: 5.5em; aspect-ratio: 1; background-color: var(--color-sub); mask-repeat: no-repeat; mask-position: center; mask-size: contain;
        }
        &.image-1 {
          &::before { mask-image: url(../img/purchase/ico_customer1.svg);}
        }
        &.image-2 {
          &::before { mask-image: url(../img/purchase/ico_customer2.svg);}
        }
        &.image-3 {
          &::before { mask-image: url(../img/purchase/ico_customer3.svg);}
        }
        .txt { padding: unset; text-align: center; background-color: unset;}
      }
    }
  }
  .flow {
    .card-list {
      gap:1em;
      li {
        position: relative;
        &:not(:last-child)::before {
          content: ''; position: absolute; bottom: -2.1em; left: 50%; translate: -50% 0; rotate: 90deg; width: 1em; aspect-ratio: 1; background-color: var(--color-l-orn); clip-path: var(--arrow);
        }
        .txt {
          margin-top: .5em; padding: .2em; background-color: unset;
        }
      }
    }
  }
}

/* サイトマップ */
.sitemap {
  li {
    border-bottom: 1px dashed var(--color-l-gry);
    a {
      display: block; padding: .5em;

    }
  }
}

/* クッキーポリシー */
.cookie-policy {
  .con-list {
    counter-reset: con-num;
    .ttl-bg {
      counter-increment: con-num;
      &::before {
        content: counter(con-num)'.'; margin-right: .7em;  font-family: "Roboto Condensed",sans-serif;
      }
    }
    ol.paren { margin-top: 1em;}
  }
}

/* チラシ */
#flyer {
  .flyer-list {
    gap: 1em; margin-bottom: clamp(14px,3vw,28px); padding: 1em; background-color: var(--color-wht);
    li { width: 47%;}
  }
}


/* ================================================================
  レスポンシブ
=================================================================== */
/* 600以上(PC・タブレット) */
@media screen and (min-width: 600px) {

.sec_ttl {margin: 0 auto 30px;}

  /* スライダー */
  .slick-arrow {
    &.slick-prev {left: -2%;}
    &.slick-next { right: -2%;}
  }

  /* メンテナンス */
  .maintenance-list {
    >li {margin-bottom: 1em; padding: 2em;}
      .txt-area { width:50%;}
      .slider,.image { width: 45%;}
      .bnr {width: 50%;}
    }
.shaken_banner a {max-width: 300px;}
.scrollWrap {max-width:100%; }
.scrollWrap > .scroll:before { display:none; }
.scrollWrap > .scroll {padding-top: 5px;}

  .con-box {
    >:nth-child(n+2):not(:last-child) { margin-bottom: 2em;}
  }
  .card-list {
    &.col-3 {
      gap: 1em;
      li { width: calc((100% - 2em) / 3);}
    }
  }
  .card-list {
    &.col-2 {
      gap: 1em;
      li { width: calc((100% - 2em) / 2);}
    }
  }
  .img-list {
    gap: 1em;
    &.col-2 {
      li { width: calc((100% - 1em) / 2);}
    }
  }
  .bg-box {
    width: 90%; padding: .7em 1em; text-align: center;
  }
  .con-list {
    &.col2 {
      display: flex; flex-wrap: wrap; gap: 1em;
      li {
        width: calc((100% - 1em) / 2);
        &:nth-child(n+2) {
          margin-top: unset;
        }
      }
    }
  }

/* 店舗情報 */
#shop {
  .slider {width: 450px; margin: 0 auto;}
}

  /* 軽自動車専門店とは */
  #about{
    .low-price {
      gap: 1em;
      >li {
        width: calc((100% - 1em) / 2);
        .dtl { padding: 1em;}
      }
    }
    .con-list {
      > li {
        gap: 1.5em;
        .txt-area {
          width: 60%;
          .bnr {
            &.flex.col-3 {
              gap: .5em;
              li { width: calc((100% - 1em) / 2);}
            }
            li { margin-inline: unset;}
          }
        }
        .slider,.image { width: calc(100% - 1.5em - 60%);}
      }
    }
}

#policy {
  .con-box {max-width: 1000px; margin: 0 auto;}
}
  /* 会社紹介 */
  #company {
    #access {
      .shop {
        .info {
          dd { font-size: 1.2em;}
        }
      }
    }
  }

  .route {
    gap: 1.5em;
    > li { width: fit-content;}
  }
  .slogan {
    columns: 2;
    > li{
        padding: 1em 1.5em 1.5em;
      &:nth-child(n+2) {
        margin-top: 1em;
        &:not(:last-child) { margin-bottom: unset;}
      }
    }
    .slogan-num-list {
      > li {
        counter-increment: slogan-num; padding-left: 2em; position: relative; z-index: 0;
        &::before {
          z-index: -1; content: '-'counter(slogan-num)'-'; position: absolute; left: 0; font-size: 1.5em; color: var(--color-gry); font-family: "Roboto Condensed",sans-serif; font-style: italic;
        }
        &:nth-child(n+2) { margin-top: 1em;}
      }
    }
  }

  /* 買取査定 */
  #purchase {
    .satei-list {
      >li {
        width: 42%;
      }
    }
    /* 買取事例 */
    .pex-list {
      .item {
        .price {
          padding-inline: .7em;
          row-gap: .5em;
          .p-price {
            .font-en { font-size: 3em;}
          }
        }
      }
    }
    /* 買取強化 */
    .pcar-list {
      >li {
        width: calc((100% - 3em) / 4);
      }
    }
    .customer-image {
      .card-list {
        li { width: calc((100% - 2em) / 3);}
      }
    }
    .flow {
      .card-list {
        li {
          display: grid; width: calc((100% - 6em) / 3);
          &:not(:last-child)::before {
            top: 50%; right: -2.1em; bottom: unset; left: unset; translate: 0 -50%; rotate: unset;
          }
        }
      }
    }
  }
  /* サイトマップ */
  .sitemap {
    width: 70%; margin-inline: auto; columns: 2;
  }

  /* クッキーポリシー */
  .cookie-policy {
    .con-list {
      .bg-box { text-align: start;}
    }
  }

  /* チラシ */
  #flyer {
    .flyer-list {
      li { width: 28%;}
    }
  }

}

/* お客様の声・納車式 */
#reason > .nousya #contents, #reason > .enquete #contents { margin-bottom:300px; }
#reason > .nousya #contents > section, #reason > .enquete #contents > section { margin-top: 40px; }
.voice_list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1em;}
.voice_list li { position:relative; }
.voice_list li a { display:block; text-decoration:none; border-radius:5px 5px 0 0; }
.voice_list li .date { margin:0; padding:4px 0;
  text-align:center; color:#fff; font-size:13px; background: var(--color-base);
}
.voice_list li a figure { padding: 10px; background: var(--color-l-gry); transition:all .3s; -webkit-transition:all .3s; }
.voice_list li a:hover figure { opacity:0.7; }
.voice_list li .date { margin:0; padding:4px 0;
  text-align:center; color:#fff; font-size:13px; background: var(--color-base);
  border-radius:5px 5px 0 0;
}
.voice_list li a:focus { outline:none; }
.voice_list li img { max-width:100%; }

/*来店予約カレンダー*/
#rdate { padding-inline:20px; margin-block: 1em 2em; }
#rdate .slick-arrow { font-size: 0; line-height: 0; position: absolute; top: 50%; padding: 0;
  display:block; width:10px; height:10px;
  border-top:2px solid #32170d;
  border-right:2px solid #32170d; }
#rdate .slick-arrow::before { content:""; }
#rdate .slick-arrow::after { content:""; }
#rdate .slick-prev { left: 5px; transform:rotate(-135deg); }
#rdate .slick-next { right: 5px; transform:rotate(45deg) }
#rdate button { display:block; padding-inline: 0 6px; width:100%; color:#333; text-align:center; background-color:transparent; font-size: 1.2em; border: 0; cursor: pointer; }
#rdate button:disabled { cursor:auto; }
#rdate .week { display:block; font-size: .8em; }
#rdate .week.holiday { color:#f55; }
#rdate .week.saturday { color:#0af; }
#rdate .date { display:block; padding-block:.5em 2em; border:1px solid #ddd; border-radius:3px; position:relative; }

#rdate .date.holiday { background:#fee; }
#rdate .date.saturday { background:#eef9ff; }
#rdate .no .date { background: #f7f7f7;}

#rdate .date::after {
  content:""; display:block; width:1.2em; height:1.2em;
  position:absolute; left:0; right: 0; bottom:.5em; margin-inline: auto;
  background:no-repeat center / 90%;
}
#rdate .slick-slide { margin:0; }
#rdate .ok .date::after { background-image:url("../img/common/mark-ok.svg"); }
#rdate .no .date::after { background-image:url("../img/common/mark-no.svg"); }

/*zohoform*/
#crmWebToEntityForm { width: min(90%,800px); margin: 20px auto;}
.zcwf_row { display: flex; margin-top: .5em;}
.zcwf_col_lab { width:30%; padding:8px 20px; text-align:left; font-weight:normal; color:#fff; background-color: var(--color-gry); }
.zcwf_col_fld { flex: 1; margin-left: 1em; padding:5px 10px 10px; position: relative; border-bottom:1px dashed var(--color-gry); }
.wfrm_fld_dpNn { display: none!important; }
#calenDiv #weekDays { width: 100%; }

/* 960px以上(PC) */
@media screen and (min-width: 960px) {

}

/* ================================================================
  タブレット
=================================================================== */
/* 1024以下 (タブレット横以下) */
@media screen and (max-width: 1024px) {

}

/* 959以下 (タブレット以下) */
@media screen and (max-width: 959px) {

}

/* ================================================================
  スマホ
=================================================================== */
@media screen and (max-width: 599px){
  .voice_list { grid-template-columns: repeat(2, 1fr); gap:10px; }

  /* ZOHO */
  .zcwf_row { display: block;}
  .zcwf_col_lab { width: 100%;}
  .zcwf_col_fld { margin: 0; }
  .zcwf_col_fld>input:where([type="text"], [type="email"], [type="tel"], [type="number"]) { width: 96%; }

}