@charset "utf-8";

/***** PC *****/
body { font-size:16px; }

/* base ------------------------*/
#wrapper { width:max(100%,1100px); }
.inner { width:1100px; margin-inline:auto; }
.inner-narrow { width:860px; margin-inline:auto; }
.dropdown { cursor:pointer; }

.pi { padding-inline:.5em; }

/* common------------------------*/
/* title */
.ttl-sec, .ttl-reason { font-size:36px; }
.ttl-base { font-size:30px; }
.ttl-sub { font-size:28px; }
.ttl-discount { font-size:32px; }

/* ボタン */
.btn-def:hover { opacity:.85; }
.btn-def.big { min-width:445px; }
.btn-def.big .txt { font-size:28px; }

.btn-border.big { font-size:24px; }
.btn-border.big::after { right:.8em; width:.75rem; height:.75rem; border-top-width:4px; border-right-width:4px; }

/* dl */
.dl-def.col2 { grid-template-columns:minmax(20%,6em) 1fr minmax(20%,6em) 1fr; }

form .tbl th { width: 30%; }

/* header ------------------------*/
#menu-btn { display:none; }
#header { padding-top:40px;
  .sitename { margin-left:32px; padding-block:20px; }
  .h-lead {
    position:absolute; top:0; left:calc(50% - 50vw); right:calc(50% - 50vw);
    line-height:40px; background-color:var(--color-gry3); }
  .h-hour {
    position:absolute; top:107px; right:135px;
    margin:0; font-size:1.1em; font-weight:700;
    > span {
      display:inline-block; margin-right:11px; padding:4px 15px 5px;
      font-size:16px; color:var(--color-wht); background:var(--color-sub2);
    }
  }
}
#header.min .sitename { margin:0; text-align:center; }

#gnav {
  .gmenu {
    display:flex; justify-content:center;
    margin-inline:var(--fw); background:var(--color-base);
    >li {
      > a {
        display:block; color:var(--color-wht); padding:.8em 1.3vw;
        font-size:min(1.4vw,1rem);
        &:hover { background-color:var(--color-gry4); }
      }

      &.sub { position:relative;
        > a { padding-right:25px;
          &::after {
            position:absolute; top:41%; right:7px;
            content:''; display:block; width:12px; height:1em;
            background:url(../img/common/arrow-down-wht.svg) no-repeat center / contain;
          }
        }
        .dropdown {
          display: none;
          &::after { display: none;}
        }
        &:hover .sub-menu { opacity:1; transition:opacity .3s, visibility .3s; visibility:visible; }
      }
      .sub-menu { display:block;
        position:absolute; top:100%; left:0; opacity:0; visibility:hidden;
        transition:opacity .3s, visibility .3s; width:max-content; min-width: 100%; z-index:1; background-color:var(--color-gry4); font-size:.9em;
        > li > a {
          display:block; padding:.65em 1em; color:var(--color-wht);
          &:hover { background-color:var(--color-gry3); }
        }
      }
    }
  }

  .smenu {
    top:51px; right:55px; gap:12px;
    > li { width:168px; }
    .btn-def { width:100%; padding-block:8px; }
  }
}



/* footer ------------------------*/
.flo-nav { right:0; bottom:80px; }
.flo-nav li:first-child { border-radius:10px 0 0 0; }
.flo-nav li:last-child { border-radius:0 0 0 10px; }
.flo-nav a { padding:3.2em .5em 10px; }
.flo-nav a::before { bottom:40px; width:1.65em; height:1.65em; }
.flo-nav.add .store {border-radius:0 0 0 10px;}
.flo-nav .add-item { display: none;}

.f-nav { margin-block: 2em 2.5em;}
.f-menu .menu-name { margin-block: 0 .5em; padding: .2em; border-bottom: 2px solid var(--color-gry2); position: relative;}
.f-menu .menu-name::before { content: ''; position: absolute; bottom: -2px; left: 0; width: 2em; height: 2px; background-color: var(--color-sub1);}
.f-menu .sub { display: grid; row-gap: .3em; margin-left: .5em; font-size: .85em;}
.f-menu .sub a { display: block; padding-block: .3em .4em; border-bottom: 1px solid var(--color-gry1);}

#pagetop { margin-top:10px; border-radius:10px 0 0 10px; }
#pagetop a { padding-block:3em 1em; }
#pagetop a::before { bottom:3em; width:14px; height:18px; }

.alert-cookie .msg { flex:1; }


/***** contents *****/
.pagettl { padding-block:.6em; font-size:34px; }

.page-nav { grid-template-columns: repeat(5, 1fr); gap:20px; }


/* 目玉車（共通） ---------------- */
.medama-list.slide { margin-inline:-10px; }
.medama-box { margin-inline:10px; }
.medama-box .price { font-size:18px; }

/* 店舗一覧（共通） --------------------------- */
.store-list { grid-template-columns:repeat(4,1fr); gap:25px 20px; }
.store-list .link > li .btn-basic { padding-inline:0 .5em; }
.store-list .num2 { padding-block:.4em; font-size:1em; }


/* top ------------------------**/
.top-nav {
  margin-block:12px;
  li:nth-child(n+2) { border-width:2px; }
  a { padding:16px 35px 11px 73px; }
  a::before { width:2.5em; top:12px; left:20px; }
  a:hover { background-color:#fff1db; }
}

#top-slide .slick-slide img { padding:0 10px; }
.top-area { max-width:800px; margin-bottom:min(4%,20px); margin-inline:auto; }
.top-area-list { gap:1em; }
.top-con-link { grid-template-columns:1fr 1fr 1.8fr; }
.stock-num > li { font-size:26px; }
.medama-ttl { font-size:22px; }
.reason-list .slick-slide { padding-inline:10px; }

.blog-list { grid-template-columns:repeat(2,1fr); gap:20px 28px; }
.blog-list a { padding:.9em; }
.blog-cat-list { grid-template-columns:repeat(5,1fr); font-size:18px; }

.cm-list { gap:24px; }
.top-group .list { flex-wrap:nowrap; gap:20px; }
.top-group .list > li { max-width:350px; flex:1; font-size:1.3em; }

.bnr_mb {gap: 20px;}

/* はじめての方へ */
#guide .items-per-step {grid-template-columns: repeat(3,1fr) ; grid-column: span 2;}

/* 車検 */
#service .dl-def.col2 { width:600px; }

/* 鈑金 --------------------------- */


/* 保証・option ------------------------ */
#support .guarantee :where(.lead,.s-content) { max-width: 75%; margin-inline: auto; }
#support .guarantee .img-left { grid-template-columns: minmax(auto,35%) 1fr; grid-template-areas: "img price";}
#support .guarantee .img-right { grid-template-columns: 1fr minmax(auto,40%); grid-template-areas: "price img";}
#support .guarantee.extend .lead { grid-template-columns: 1fr minmax(auto,23%);}
#support .guarantee.extend .s-content.img-left  { grid-template-columns:minmax(auto,22%) 1fr; column-gap: unset;}
#support .guarantee.extend .s-content.img-left .price-img { text-align: center;}
#support .guarantee :where(.lead,.s-content) img { grid-area: img;}
#support .guarantee :where(.lead,.s-content) .price { grid-area: price;}
#support .guarantee .img-single img{ grid-area: unset;}
#support .guarantee .dl-def { grid-template-columns: minmax(30%,6em) 1fr; }

#support .loan-plan { grid-template-columns: repeat(3,1fr);}

/* グループ会社 */
#group .group-list { width: max-content; margin-inline: auto;}