body{font-family: "Noto Sans JP", "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, sans-serif;}


/* base ------------------------*/
#wrapper {position:relative; }
main { flex-grow: 1;}
.inner { width: 96%; max-width: 1200px; margin-inline: auto; }
.con-box {
  margin-bottom: clamp(30px,4vw,60px);
}
.font-en { font-family: "Roboto Condensed",sans-serif;}
.scroll { overflow-y:scroll; }
p {margin-top:0;}
.mb1 { margin-bottom: 1em; }

/* common------------------------*/
:root {
  /* 使用色 */
  --text-color:#1b1b1b;
  --color-base:#1bc0eb; /*ベースカラー*/
  --color-sub:#fdd000; /*アクセント*/

  --color-orn:#fc9b02;
  --color-l-orn:#ffba00;
  --color-yel:#ffba00;
  --color-crm:#fbf9db; /*背景色など*/
  --color-gry:#999; /*装飾用の英字など*/
  --color-l-gry:#f8f7f7;
  --color-d-gry:#707070;
  --color-red:#ec2713;
  --color-wht:#fff;
  --color-blu:#0068b7;
  --color-l-blu:#dff9f2;
  --color-grn:#8fc31f;
  --color-pink:#fd5287;


  /* 図形 */
  --arrow :polygon(0 4%, 0 96%, 80% 50%);/* ▶ */

  /* ボックスシャドウ */
  --shadow: 0px 2px 7px 0px rgba(0, 0, 0, 0.1);
}
/* 親要素を越えて画面端まで背景を敷く */
.over-bg{ border-image:linear-gradient( var(--color-base),var(--color-base) ) fill 0 /1/ 0 100vw;}
.over-bg-crm{ border-image:linear-gradient( var(--color-crm),var(--color-crm) ) fill 0 /1/ 0 100vw;}
.over-bg-gry{ border-image:linear-gradient( var(--color-l-gry),var(--color-l-gry) ) fill 0 /1/ 0 100vw;}
.bg-y-strp {background-color: #fff; background-image: repeating-linear-gradient(-45deg, #fce5ac, #fce5ac 2px, #fbeece 2px, #fbeece 6px);}
.bg-gr-strp {background-color: #fff; background-image: repeating-linear-gradient(-45deg, #f1f1f1, #f1f1f1 2px, #e3e1e1 2px, #e3e1e1 6px);}
[class*="over-bg"] {
  padding-block: 2em;
}

.shadow { box-shadow: var(--shadow);}

/* aタグに下線 */
.underline { text-decoration: underline;}

/* tel */

/* title */
/* 背景にロゴマーク
.ttl-def {
  padding-bottom: 1em; font-size: clamp(18px,3vw,34px); color: var(--color-grn); font-weight: 700; text-align: center;
  span {
    position: relative;
    &::before {
      content: ''; z-index: -1; position: absolute; top: 50%; left: 50%; translate: -50% -50%; width: 2em; aspect-ratio: 1; background-color: var(--color-l-gry); mask: url(../img/common/logomark.svg) no-repeat center / contain;
    }
  }
} */
/* .ttl-defにサブタイトルが付くとき */
.ttl-def-2line {
  z-index: 1; display: flex; flex-direction: column-reverse; padding-bottom: .7em; font-size: clamp(18px,3vw,34px); color: var(--color-grn); font-weight: 700; text-align: center; line-height: 1.5; position: relative;
  &::before {
    content: ''; z-index: -1; position: absolute; top: 35%; left: 50%; translate: -50% -50%; width: 2.2em; aspect-ratio: 1; background-color: var(--color-l-gry); mask: url(../img/common/logomark.svg) no-repeat center / contain;
  }
  .sub {
    margin-block: 0 -.3em; font-size: .56em; font-weight:500;
  }
}

/* 左にロゴマーク */
.ttl-left-logomark {
  padding-left: 1.4em; font-size: clamp(20px,3vw,36px); color: var(--color-base); font-weight: 700; position: relative;
  &::before {
    content: ''; position: absolute; top: 50%; left: 0; translate: 0 -50%; width: .9em; aspect-ratio: 1; background: url(../img/common/logomark.svg) no-repeat center / contain;
  }
}

/* 小さいアイコン付き（TOP営業カレンダー・小見出し） */
.ttl-s-icon {
  padding: .3em 1em; font-size: 1.125em; color: var(--color-wht); font-weight: 700; background-color: var(--color-base); position: relative;
}

/* アイコンと英字（TOPメーカーで選ぶ等に使用） */
.ttl-icon-en {
  display: flex; flex-direction: column-reverse; margin-bottom: .5em; padding-left: 3.5em; padding-bottom: .5em; font-size: clamp(17px,3vw,34px); line-height: 1.5; border-bottom: 2px solid var(--color-base); position: relative;
  &::before {
    content: ''; position: absolute; top: 45%; left: .5em; translate: 0 -50%; width: 2.4em; aspect-ratio: 1; background-color: var(--color-sub); mask-repeat: no-repeat; mask-position: center; mask-size: contain;
  }
  &::after { content: ''; position: absolute; bottom: .1em; left: 0; width: 100%; height: 1px; background-color: var(--color-base);}
  &.search {
    &::before { mask-image: url(../img/common/ico_search2.svg);}
  }
  &.ranking {
    &::before { mask-image: url(../img/common/ico_crown.svg);}
  }
  .ttl {
    color: var(--color-sub);
  }
  .font-en {
    margin-block: 0 -.2em; font-size: .76em; color: var(--color-gry);
  }
  &.col {/*アイコン・タイトル・英字が横並び（TOPブログに使用）*/
    flex-direction: row; align-items: baseline; gap: .5em; padding-block: .7em 0; background-color: var(--color-base);
    &::before { top: 62%; left: 1em; width: 2em; background-color: var(--color-wht); mask-image: url(../img/common/ico_book.svg);}
    .ttl { color: var(--color-wht);}
    .font-en { color: var(--color-wht);}
  }
}

/* 太字中央揃えの下に小さい横棒の装飾 */
.ttl-u-line {
  margin-bottom: 1em; padding-bottom: .8em; font-size: clamp(17px,3vw,34px); color: var(--color-grn); font-weight: 700; text-align: center; position: relative;
  &::before {
    content: ''; position: absolute; bottom: 0; left: 50%; translate: -50% 0; width: 1em; height: 4px;
    background-size: auto auto; background-color: #239212;
    background-image: repeating-linear-gradient(135deg, transparent, transparent 2px,var(--color-grn) 2px,var(--color-grn) 4px );
  }
}

/* 左に縦棒（小見出し） */
.ttl-l-line {
  padding-left: .7em; color: var(--color-sub); font-weight: 700; position: relative;
  &::before {
    content: ''; position: absolute; top: .35em; left: .1em; width: 2px; height: 1.2em; background-color: var(--color-sub);
  }
}

.ttl-bg {
  padding: .5em 1em; font-size: 1.12em; color: var(--color-sub); font-weight: 700; background-color: var(--color-l-orn);
}

/* 左右に横線 */
.ttl-w-border {
  span {
    position: relative;
    &::before,&::after {
      content: ''; position: absolute; top: 50%; translate: 0 -50%; width: 1em; height: 1px; background-color: var(--color-base);
    }
    &::before { left: -1.3em;}
    &::after { right: -1.3em;}
  }
}


/* dl */
dl > div {
  display: flex;
  &:nth-child(n+2) { margin-top: .3em;}
}
.dtl > div {
  > * { padding: .2em .7em;}
  dt { color: var(--color-wht); font-weight: 600; background-color: var(--color-l-blu);}
}

/* table */
.tbl {
  width: 100%; max-width: 1000px; margin: 0 auto; border-collapse: separate; border-spacing: 10px;
  tr {
    > :where(th,td) { display: block; padding: .5em 1.5em;}
    th { white-space: nowrap; border-bottom: var(--color-blu) 2px solid; color: var(--color-blu); font-size: 1.125em;}
    td { padding-inline: .7em; width: 100%;}
  }
}


/* button */
.button { position:relative; z-index:2; display:inline-block; overflow:hidden; min-width:260px;
  padding: 1em 3em .9em; font-size: 1.3em; color: var(--color-wht); font-weight: 700; text-align:center; background-color: var(--color-base); }
.button.icon:before { content:""; display:inline-block; width:1em; height:1em; margin:.3em .5em 0 0; vertical-align:top; background:no-repeat center / 100%; }


.btn {
  display: inline-block; padding: .3em 3em .3em 1.7em; color: var(--color-wht); background: var(--color-blu); border: 1px solid transparent; border-radius: 4em; position: relative;
  span {
    padding-bottom: 2px; position: relative;
    &::before,&::after { content: ''; position: absolute; top: 50%; translate: 0 -50%; background-color: var(--color-wht); mask-repeat: no-repeat; mask-position: center; mask-size: contain; }
  }
  &.size-l { font-size: clamp(16px,3vw,24px); font-weight: 700; }
  &:hover,&:focus {
    color: var(--color-red); background-color: var(--color-wht) !important; border-color: currentColor;
  }
  &.orn {
    background:var(--color-orn); &:hover,&:focus { color:var(--color-orn); }
  }
  &.grn {
    background:var(--color-grn); &:hover,&:focus { color:var(--color-grn); }
  }
  &.blu {
    background:var(--color-blu); &:hover,&:focus { color:var(--color-blu); }
  }
}
.btn-icon {
  span { padding-left: 1em; }
    &[href*="contact"],&[href*="reserve"]{
    span::before{
      left: -.7em; width: 1.2em; aspect-ratio: 1;
      mask-image: url(../img/common/ico_mail.svg);
    }
    &:hover,&:focus {
      span::before { background-color: var(--color-blu); }
    }
  }
}
.btn-arrow {
  span::after{
    right: -1.3em; width: .5em; aspect-ratio: 1;
    background-color: var(--color-wht); clip-path: var(--arrow);
  }
  &.circle {
    span{
      padding-left: unset;
      &::before {
        left: unset; right: -2.4em; width: 1.5em; aspect-ratio: 1; border: 1px solid transparent; border-radius: 4em; background-color: var(--color-wht); mask: unset;
      }
      &::after { right: -2em; background-color: var(--color-blu);}
    }
    &:hover,&:focus {
      span::before { border-color: var(--color-wht);}
    }
  }
  &:hover,&:focus {
    span::after { background-color: currentColor; }
  }
}

/* 複数バナーリンク */
.bnr-link-list {
  flex-direction: column; gap: .5em;
  li { width: 100%;}
  &.logo {
    li {
      border: 2px solid var(--color-base); position: relative;
      a {
        display: block; padding: 1em 1em .7em;
        img { max-width: 68%;}
      }
      &::before,&::after {
        content: ''; position: absolute; top: 50%; translate: 0 -50%;
      }
      &::before {
        right: 1.2em; width: 1.9em; aspect-ratio: 1; border: 2px solid var(--color-base); border-radius: 50%;
      }
      &::after {
        right: 1.7em; width: .6em; aspect-ratio: 1; background-color: var(--color-wht); clip-path: var(--arrow);
      }
      .shop-name { display: inline-block; margin-bottom: .8em; padding-left: .5em; color: var(--color-blu); font-weight: 700;}
    }
  }
}

@media screen and (min-width: 600px) {
 
 /* header ------------------------*/
  #header {
    padding-block: 0; align-items: flex-end; gap: 0; padding-bottom: unset;
    .sitename {
      flex: 1;
      .logo { max-width: 300px; margin-top: 0;}
      .lead {margin: 0 0;font-size: 14px;color: var(--text-color);font-weight: bold;}
    }
    .header-wrap {
      gap: 0;
      .info {
        display: block; line-height: 1.5; font-weight: 700;
        div {margin: 3px .3em 0;font-size: 13px;font-weight: 700;}
        .tel_num a {position: relative; vertical-align: middle; font-size: 2em; color: var(--color-base); padding-left: 22px; line-height: 1;}
        .tel_num a::before {content: "";display: block;width: 20px;height: 30px;mask-image: url(/common/images/header/2025/ico_tel.svg);background: #1bc0eb;background-size: 80%;background-repeat: no-repeat;position: absolute;top: 2px;left: 0;}
      }
      .btn-wrap {
        a.btn-icon { max-width: unset; font-size: 1.15em;}
      }
    }
  }
  .line_btn {width: 70px; height: 70px;}
  .h_reserve_btn a {width: 70px; height: 70px;}
  .h_reserve_btn a::before {width: 1.8em; height: 1.3em; top: 1em;}

  .h_reserve_btn {display: block;}
  .h_reserve_btn a {display: block; background:#1bc0eb; border-radius: 50%; width: 70px; height: 70px; position: relative; color: var(--color-wht);}
  .h_reserve_btn a::before {content: "";display: block;width: 2em;height: 2.3em;background: url(/common/images/header/2025/icon-contact.svg) no-repeat;background-size: 100%;position: absolute;top:.9em;left: 0;right: 0;margin: auto;}
  .h_reserve_btn span {display: block;width: 100%;font-size: 10px;position: absolute;bottom: 0.8em;text-align: center;font-weight: 700;}


  /* gnav ------------------------*/
  #gnav {
    z-index: 1; position: relative; visibility: visible; opacity: 1; translate: 0 0; width: 100%; padding-block: 0; background-color: #f8f7f7;
    .nav-list {
      flex-direction: row; max-width: 1200px; margin: 0 auto;
      > li {
        flex-grow: 1; text-align: center; border-radius: unset; border: none; position: relative;
        &:nth-child(n+2) { margin-top: unset;}
        &::after {content: ""; position: absolute; display: block; width:1px; height: 60%; background: var(--color-gry); top: 20%; left: 0;}
        &.nav-list-top > a::before { mask-image: url(/common/images/header/2025/icon-top.svg); width: 1.5em; height: 1.3em; background: #1bc0eb;}
        &.nav-list-stock > a::before { mask-image: url(/common/images/header/2025/icon-stock.svg); width: 1.6em; height: 1.6em; background: #1bc0eb;}
        &.nav-list-about > a::before { mask-image: url(/common/images/header/2025/icon_about.svg); width: 2.2em; height: 2.2em; background: #1bc0eb;}
        &.nav-list-mainte > a::before { mask-image: url(/common/images/header/2025/icon-mainte.svg); width: 1.8em; height: 1.6em; background:#1bc0eb;}
        &.nav-list-newcar > a::before { mask-image: url(/common/images/header/2025/icon-newcar.svg); background: #1bc0eb;}
        &.nav-list-shop > a::before { mask-image: url(/common/images/header/2025/icon-shop.svg); width: 1.5em; height: 1.5em; background: #1bc0eb;}
        &.nav-list-company > a::before { mask-image: url(/common/images/header/2025/ico_company.svg); background: #1bc0eb;}
        > a {
          display: inline-block;
          width: 100%;
          height: 100%;
          padding:2.3em 2em .5em;
          font-size: 16px;
          color: var(--text-color);
          position: relative;
          font-weight: 700;
          
          &::before {
            content: ''; position: absolute; bottom: 2.5em; left: 50%; translate: -50% 0; width: 1.8em; height: 1.8em; mask-repeat: no-repeat; mask-position: center; mask-size: contain;
          }
        }
      }
      li.sub-list-parent {
        position: relative;
        &.is-open { padding-block: unset; border-radius: unset;}
        .sub-list {
          position: absolute; top: 4.7em; width: 100%; padding-inline: 0; background-color: var(--color-base);
          li {
            font-size: 14px;
            padding: 6px 0;
            font-weight: 700;
            
            &:nth-child(n+2) { border-top: 1px dashed var(--color-wht);}

          }
          a {
            display: block; padding-block: .5em; font-size: 1em; color: var(--color-wht);
          }
        }
      }
      .tgl-btn { display: none;}
    }
  }
  .menu-button  { display:none; }

  #gnav::before {height:0!important;}
  #gnav {border-top: 8px solid #fff!important; padding-top: 8px;}

}

  /* footer ------------------------*/
  #footer {
    padding-bottom: unset; .f-nav { columns: 2; font-size: .875em; background-color: #f8f7f7; padding-block: 3em;}
    .f-nav { justify-content: center; text-align: center; line-height: 2;}
  }

  .footer_logo {text-align: center; }
  
  .flo-nav {
    z-index:999; position:fixed; display: block; right:-5px; left: unset; bottom:80px; display:block;
    li {
      position:relative; width:100px; font-size:.8rem; line-height:130%;
      a {
        font-weight:500; border: 1px solid var(--color-wht); border-right: unset; border-radius:8px 0 0 8px; height: 100px; text-align: center; padding-top: 30px;
        > p { font-size:.95rem; }
        &[href="/stock/"] {
          padding-block: 2em 1em;
        }
        &[href="/reserve/"] {
          padding-block: 2em 1em;
        }
        &[href="#top"] {
          padding-block: 0em 1em;
          width: 100px;
          height: 90px;
        }
      }
      a::after {top: 1em;width: 2em;height: 2em;left: 50px;}
    }
  }

  .flo-nav {
    position:fixed;
    right: 0!important;
    bottom:80px;
    z-index:200;
    display:flex;
    align-items: flex-start;
    flex-flow: column;
  
    li.f_banner {width: 100%;}
    li { width:20%;
      a { display:block; padding: 0;
        p {margin-block: unset; font-size:.875rem; }
        .txt {/* padding-top: 1.4em; */position: relative;top: 53px;color: #fff;font-weight: bold;}
      }
    }
    .tel a { height:100%; background-color: var(--color-base); font-size: 1.2em; padding: 10.5px 0 11px;
    .small {font-size:.8em; line-height: 1.2;}
    .f-sm { font-size: .6em; line-height: 1.1;}
          }
    .pagetop a {background-color: var(--color-d-gry); color: var(--color-wht);}
    .stock a {background-color: var(--color-sub);width: 100px;height: 90px;}
    .contact a {background-color: var(--color-yel);width: 100px;height: 90px;}

    a::after { content: ''; display: block; position: absolute; top: .5em; left: 50%; translate: -50% 0; width: 1.5em; height: 2em;}
  }

  

  #footer {
    padding-block: clamp(20px,4vw,30px) 70px;
    .sns li {padding: .3em; width: 80px;}
    .footer_logo {
      margin: 0 auto;
      max-width: 400px;
      margin-block: 3em;
      .logo { max-width: 300px;}
      .lead {display: inline-block;margin-block: .5em;font-size: 18px;color: var(--text-color);font-weight: 700;}
      p {margin-block: 0;font-size: 16px;font-weight: 700;}
    }
    .f-nav {
      columns: 2;
      font-size: 14px;
      line-height: 3;
      margin-bottom: 5em;
      font-weight: 700;
    }
  }

  footer ul{
    width:600px;
    margin:auto;
  }

  .f-back{background-color: #f8f7f7}

  

  .pagetop a::after{ background: url(/common/images/header/2025/icon-f-arrow.svg) no-repeat 100% / 100%; }
  .stock a::after{ background: url(/common/images/header/2025/icon-f-search.svg) no-repeat 100% / 100%; }
  .contact a::after{ background: url(/common/images/header/2025/icon-f-mail.svg) no-repeat 100% / 100%; }

  /*cookie policy*/
  .alert-cookie {
    position:fixed; bottom:0; left:0; right:0; padding:1.3em 0; background:rgba(0,0,0,.85); z-index:998;
    .flex { row-gap: .5em; justify-content: center;}
    .msg { margin:0; color:var(--color-wht); font-size:13px; line-height:1.5; }
    a { color:var(--color-wht); }
  }

  .copyright {margin:0;padding:1em 0;font-size: 14px;text-align:center;}





  /* ================================================================
  レスポンシブ
=================================================================== */

/* ================================================================
  タブレット
=================================================================== */
@media screen and (max-width: 1000px) {
body { font-size:15px; }
.inner { width: 95%; margin-inline: auto; }

  footer ul{width:100%;}
  #footer .f-nav{font-size:12.5px;}
  .flo-nav {bottom:0;}
  .copyright {font-size: .75em;}

  
#pan { display:none; }
#pan.spBlock, .spBlock { display:block; }

.pageTtl { padding:35px 10px 25px; font-size:20px; font-family: 'Kosugi Maru', sans-serif; text-align:center; background:url(/common/images/header/2025/bg_stripe_gn.png); }
.pageTtl h2 { line-height:1.4; }
.pageTtl span { display:block; padding:0 15px; font-size:15px; font-family:'Roboto Condensed', sans-serif; text-align:center; color:#059932; }
.subTtl { padding:4px 15px 3px; font-size:16px; font-family:'Kosugi Maru', sans-serif; text-align:center; color:#059932; background:#ffef02; }


}


/* ================================================================
  スマホ
=================================================================== */
@media screen and (max-width: 599px){
  body { font-size:14px !important; }
  .wide_inner,
  .inner, .narrow { width: 95%; }


  /* header------------------------*/


  /* gnav ------------------------ */

  /* footer------------------------*/
  .flo-nav {
    li.pagetop {width: 30%; position: absolute; top: -38px; right: 0;}
    a::after { bottom: .2em; left: unset; right: .2em;}
    li a{
      .txt {padding-top: unset; padding: .5em;}
    }
  }

  .flo-nav {
    li.f_banner {
      position:relative;
      bottom:0;
      height:auto;
    }
  }

  #footer {
    & .footer_logo {
        .lead {
          font-size:17px;
        }
    }
  }

  #footer {
    & .footer_logo {
        p {
          font-size:15px;
        }
      }
    }

  #footer {
    .f-nav {
        margin-bottom: 1em;
    }
  }

  .pt{
    background: #707070;
    color: #fff;
    width: 115px;
    height: 40px;
    position:absolute;
    right:0;
  }
  .pt a::after {
    background: url(/common/images/header/2025/icon-f-arrow.svg) no-repeat 100% / 100%;
  }

  .pt .txt{
    color: #fff;
    line-height: 42px;
    padding-left: 11px;
  }

  /* common ------------------------*/

  /* tel */

  /* title */

  /* button */


}