@charset "utf-8";

/***** SP *****/
body { font-size:clamp(12px,3.7vw,16px); }

.grecaptcha-badge { bottom:105px !important; }
.kaitori-index .grecaptcha-badge { bottom:130px !important; }

/* base ------------------------*/
#wrapper { width:min(100%,900px); margin-inline:auto; }
.fixed #wrapper { position: fixed;}
.inner, .inner-narrow { margin-inline:min(4vw,30px); }
.inner .inner-narrow { margin-inline:0; }

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

/* ページ内リンク */
.local-nav { grid-template-columns: repeat(2,1fr);}

/* table */
.tbl:not(.hscroll) tr:not(:last-child) td { border-bottom: unset;}
.tbl:not(.hscroll) :where(th,td) { display: block;}
.tbl:not(.hscroll) th { width: 100%; padding-bottom: .7em;}

/* dl */
.dl-def.sp-1 { grid-template-columns: 1fr;}
.dl-def.sp-1 > dt { text-align: center;}
.dl-def.sp-1 > dd { padding-bottom: 1em; border-bottom: unset;}

/* ボタン */
.btn-def.big { width:88%; }
.btn-def.big .sub { font-size:.75em; }
.btn-def.big.pc { padding-block:.8em; font-size:.9em; }

.tab-nav li .arrow::before { top: .45em; right: -1em;}

/* シンプルタブ */
.tab-buttons.col4 > li { width:25%; text-align:center; padding-inline:0; }
.tab-buttons.col5 > li { width:20%; text-align:center; padding-inline:0; }

/* header */
.h-lead { line-height:2; background-color:var(--color-base); }
.h-hour { position: fixed; display:none; }
#header { position: relative;}
#header .sitename { width:38%; margin:3% 2% 3%; }
#menu-btn {
  position:absolute; top:min(4vw,25px); right:3.6%;
  width:clamp(25px,6.66vw,50px); height:clamp(16px,4vw,32px); z-index:1000;
  }
#menu-btn > span { transition:all .5s;
  display:block; position:absolute; left:0; width:100%; height:12.5%;
  background-color:var(--color-base); }
#menu-btn > span:nth-of-type(1) { top:0; }
#menu-btn > span:nth-of-type(2) { top:45%; }
#menu-btn > span:nth-of-type(3) { bottom:0; }

#menu-btn.open > span:nth-of-type(1) { transform:translateY(350%) rotate(-315deg); }
#menu-btn.open > span:nth-of-type(2) { display:none; }
#menu-btn.open > span:nth-of-type(3) { transform:translateY(-350%) rotate(315deg); }


#gnav .gmenu { display:none; position: fixed; left: 0; width: 100%; height: 100%; padding:1em 1.5em 10em; background-color: var(--color-wht); transition: top .4s ease-in-out; z-index:100; overflow-y: scroll;}
#gnav .gmenu > li { border-bottom: 2px solid var(--color-gry1);}
#gnav .gmenu > li > a { display: block; padding: .7em .2em .6em; font-size: 1em;}

#gnav .smenu { top:min(2vw,20px); right:13.5%; z-index:1; gap:max(5px,1.5%); }
  #gnav .smenu .btn-def { padding:.3em .55em; }
  #gnav .smenu .btn-def::after { display:none; }

#gnav .gmenu .sub {display: grid; grid-template-columns: 1fr 3em;}
#gnav .gmenu .sub .arrow { position: relative; width: 100%; background-color: unset;}
#gnav .gmenu .sub .arrow::after { content: ''; position: absolute; top: .9em; left: 50%; transform: translateX(-50%); transform-origin: center; width: 1.3em; height: 1.3em; background: url(../img/common/arrow-bg-org.svg) no-repeat center / contain; transition: all .4s;}
#gnav .gmenu .sub .arrow.is-open::after { transform:  translateX(-50%) rotate(-180deg);}
#gnav .gmenu .sub-menu { display: none; grid-area: 2 / 1 / 3 / 3; margin-block: .5em 1em; background-color: var(--color-gry0);}
#gnav .gmenu .sub-menu li:not(:last-child) { border-bottom: 1px solid #dfdfdf;}
#gnav .gmenu .sub-menu li a { display: block; padding: .6em 1em .5em;}


/* footer */
#footer { padding-bottom:min(12vw,78px); }
.flo-nav { left:0; bottom:0; right:0; }
.flo-nav > ul { display:flex; }
.flo-nav li { flex:1; }
.flo-nav li:first-child { border-radius:10px 0 0 0; }
.flo-nav li:last-child { border-radius:0 10px 0 0; }
.flo-nav li a { padding-block:1.8em .2em; }
.flo-nav li a::before { top:.5em; width:1.2em; height:1.2em; }
.flo-nav.add > ul li:not(.add-item) { display: none;}
.flo-nav.add > ul li.store { border-radius:0 10px 0 0; }
.flo-nav.add .add-item a { padding: unset;}
.flo-nav.add .add-item a::before { content: ''; position: absolute; top: unset; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; height: 78%; z-index: -1;}
.flo-nav.add .add-item.service a::before { background-color: var(--color-sub4);}
.flo-nav.add .add-item.kaitori a::before { background-color: #18a705;}
.flo-nav.add .add-item img { max-height: 100px;}
.flo-nav.add #pagetop  { bottom: 5em;}

.f-nav { margin-inline: 0;}
.f-menu { margin-block: 2em 0; grid-template-columns: repeat(2,50%); gap: 0; border-top: 1px solid var(--color-gry2);}
.f-menu > li { align-self: baseline; padding: .5em .7em;}
.f-menu > li:not(:last-child) { border-bottom: 1px solid var(--color-gry2);}
.f-menu .menu-name { margin-block: unset; position: relative;}
.f-menu .sub { display: none; margin-block: .7em; padding: .5em .7em; background-color: var(--color-gry0);}
.f-menu .sub > li:not(:last-child) { margin-bottom: .5em;}
.f-menu .sub a { display: block; width: 100%; padding-left: .5em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.f-menu .sub a::before { content: '-'; position: relative; left: -.5em; color: var(--color-gry3);}

#pagetop { position:absolute; right:0; bottom:3.2em; padding:1.6em .8em .2em; border-radius:5px 0 0 5px; }
#pagetop a::before { bottom:1.6em; width:.8em; height:1em; }

.alert-cookie .btn-def { display:block; margin:1em 0 0 auto; }


/***** contents *****/
body:not(#top, #zaiko, #zaikoDetail) .h-lead { display:none; }
#pan > ul { padding-inline:4vw; }
.pagettl { border-top:2px solid var(--color-gry2); border-bottom:2px solid var(--color-gry2); }
.pagettl > h1 > span { display:inline-block; font-size:.8em; }

/* 汎用boxリスト */
.box-list,.box-list.col3{ grid-template-columns: 1fr;}
.box-list > li .ttl:has(br,.iblock) { line-height: 1.4;}

/* ラベル付き（選ばれる理由・お約束など）リスト */
.label-list { gap: .7em;}
.label-list.sp-1 { grid-template-columns: 1fr;}
.label-list:not(.sp-1) > li { padding: 2.7em .5em .7em;}
.label-list .main-txt { font-size: 1.12em;}
.label-list .sub-txt { font-size: .9em;}

.label-list.flow > li { grid-template-columns: 1fr;}
.label-list.flow img { max-width: 50px;}
.label-list.flow .ttl { text-align: center;}

.img-wrap-box { grid-template-columns: 1fr; grid-template-areas: "txt" "img";}

/* テキスト+小さい画像横並びbox */
.s-img-list { grid-template-columns: 1fr;}

/* form */
input[type="text"],input[type="tel"],input[type="email"], textarea { font-family:inherit; }
form .tbl td { padding-inline: unset;}
form .submit input { min-width: 150px;}

/* FAQ・買取に必要なもの、など */
.drawer.faq dt { padding-block: .7em; padding-right: 2.3em; font-size: 1em; line-height: 1.5;}
.drawer dt span { right: .7em;}
.drawer.faq dd { margin-left: 1em; padding: .7em .7em 1em 2em;}
.drawer.faq dd::before { top: .7em; left: .7em; font-size: 1.12em; line-height: 1.4; letter-spacing: 0px;}
.drawer > div:not(:last-child) { margin-bottom: 1.3em;}


/* 目玉車（共通） ------------------------**/
.medama-box .info { font-size:.85em; }
.medama-list.arrows .prev-arrow { left:-10px; }
.medama-list.arrows .next-arrow { right:-10px; }

/* 店舗一覧（共通） --------------------------- */
.store-list .link > li { font-size:.85em; }
.store-list .link > li .btn-basic.arrow::after { display:none; }
.store-list .num1, .store-list .num2 { padding-block:.4em; font-size:1em; }

/* top ------------------------**/
.top-nav { margin-block:.5em; }
.top-nav li { width:25%; font-size:.85em; text-align:center; }
.top-nav a { padding-block:2.9em .25em; }
.top-nav a::before { top:9%; left:50%; transform:translateX(-50%); }

#top-slide .pager { display:none; }
#top-slide .slick-dotted.slick-slider { margin-bottom:0; }

.top-area-list > li + li { border-left:1px solid #fff; }
.top-area-list .btn-def { border-radius:0 !important; }
.top-con-link { grid-template-columns:repeat(2,1fr); }
.top-con-link li:last-child { grid-column:span 2; }

.search-keyword-box .txt { padding:.8em; border-radius:5px 0 0 5px; }
.search-keyword-box .btn { border-radius:0 5px 5px 0; }

#top .reason-list { margin-inline:-4vw; }

.blog-list p { font-size:.8em; }

.sns-list .btn-border { font-size:.9em; }
.sns-list .btn-border { padding-left:min(20%,145px); }
.top-group .list { gap:1em 3%; }
.top-group .list > li { width:48.5%; font-size:.85em; }

/* はじめての方へ */
#guide  .btn-def.wide { width: 88%; min-height: 64px; margin-inline: auto; font-size: 1.2em;}
#guide  .btn-def:has(br,.iblock) { line-height: 1.4;}
#guide .items-per-step >li:not(:last-child)::before { top: unset; right: unset; bottom: -1.07em; left: 50%; transform: translateX(-50%); width: .7em; height: .5em; clip-path: polygon(100% 0, 0 0, 50% 100%);}
#guide .items-per-step .txtbox.bg-gry { margin-top: 1.8em;}

/* 車検 */
#service table.hscroll .name { margin-inline:max(-1.7vw,-14px);}
#service table.hscroll .name:last-of-type { font-size: .99em;}
#service table.sp { width: 100%; border: 1px solid var(--color-gry2);}
#service table.sp :where(thead th:first-child,tbody th) { min-width: 6em; }
#service table tbody tr:first-child { background-color: unset;}
#service table tbody th[rowspan="4"] { border-right:  1px solid var(--color-gry3);}

#service .price-list-ttl { display: grid; grid-template-columns: 1fr minmax(auto,100px); align-items: center; column-gap: 1em;}
#service .price-list-ttl .note { padding: .5em .7em; font-size: .75em; background-color: var(--color-gry0);}

/* 鈑金 --------------------------- */
#repair .tbl.hscroll { }
#repair .tbl.hscroll tbody th[rowspan="3"] { width:3.3em; }
#repair .tbl.hscroll tbody th[rowspan="3"] > span { writing-mode:vertical-rl; white-space: nowrap; }
#repair .s-img-list > li { grid-template-columns: 1fr; gap: .7em;}
#repair .s-img-list .txt-area { order: 1;}
#repair .s-img-list .ttl { padding-bottom: .5em;}
#repair .s-img-list figure { justify-self: center;}
#repair .s-img-list figure img { max-width: 130px;}


/* 保証・オプション */
#support .guarantee .lead:not(.img-single) .img { order: 1; width: 70%; margin-inline: auto;}
#support .guarantee .s-content:not(.img-single) .img { width: 75%; margin-inline: auto;}
#support .guarantee .s-content .point { gap: .7em;}
#support .guarantee.extend .lead .img { width: 50%; margin-inline: auto ;}
#support .guarantee.used-car .s-content .ttl { padding-block: .2em .3em; font-size: 1.15em; line-height: 1.4;}
#support .option-list,#support .option-list.noimage { grid-template-columns: repeat(2,1fr); gap: .7em;}


/* 納車式 */
.nousya-list { grid-template-columns: repeat(2,1fr); gap: .8em;}
#top .nousya-list { padding-top: unset;}
.nousya-list > li {border-radius: 5px;}
.nousya-list > li a { }
.nousya-list > li .pic {}
.nousya-list > li .data { grid-template-columns: 1fr; margin-top: .7em; margin-inline: 7%;}
.nousya-list > li .data:has(.num22) { margin-inline: 4%;}
.nousya-list > li .store span { padding: 0 3px 1px; }
.nousya-list > li .cname { font-size: 1em;}
.nousya-list > li .btn{ margin-top: .2em; padding: .1em .1em .2em; font-size: .75em; font-weight: 500;}

.nousya-dtl { gap: 2em; margin-top: 2em;}
.nousya-dtl time { padding-right: unset;}
.nousya-dtl main { width: 100%;}
.nousya-dtl main picture { margin-bottom: 1em;}
.nousya-dtl aside h3 { font-size: 1.2em;}
.nousya-dtl aside .aside-list { grid-template-columns: repeat(2,1fr); gap: .5em .7em;}
.nousya-dtl aside .aside-list .data {grid-template-columns: 1fr;}
.pagination a, .pagination span { width:25px; }


/* company --------- */

#greeting .flex>div {width: 100%;}
#greeting .president {text-align: right; padding-top: 1em;}
#greeting .president .name { display: block; margin: 0; }

#greeting .flex>div.presidentimg { position:absolute; bottom:0; right:-30px; width:200px; height:200px; overflow:hidden; padding-right:20px;}
#greeting .presidentimg img {width: 100%;}

#summary .office li { margin-bottom: 1em; }
#summary .office .addr::before { content: ''; }

#history dl { padding-block: .5em 1em; padding-right: .7em;}
#history dt,#history dd { display: block; width: 100%; text-align: left; border:none; padding:0 0 0 3em; }
#history dt { width: 100%; text-align: left; padding-top: 0.8em;}
#history dt::before{ left: 22px; }
#history dt::after{ height: 15px; width:15px; left: 15px; }
#history dd {position: relative;}
#history dd:not(:last-of-type)::before { content: ''; position: absolute; left: 22px; top: 2em; width:1px; height: 100%; background: var(--color-gry2);}
#rinen .rinen { padding: 0; font-size: 1.1em; }
#rinen img {width: 48%; position: static;}

/* グループ会社 */
#group .group-list { grid-template-columns: 1fr; row-gap: .7em;}
#group .group-list > dt { padding: 1em .7em 0;}
#group .group-list > dt:not(:last-of-type) { border-bottom: unset;}
#group .group-list > dd { padding-bottom: 1.3em;}
#group .group-list .note { grid-template-columns: repeat(2,max-content); justify-content: center;}
#group .group-list .note :where(.label,.area) { padding-bottom: 1px;}
#group .group-list .note .label { padding-inline: .5em; font-size: 1em;}

/* ポリシー */
.policy-list.action .label { display: block; width: max-content; margin-bottom: .2em; padding-block: .2em .15em;}

/* 買取比較表 */
#kaitori .hikaku .tbl th { width: 1%; }




/* スマホのみ ----------------------- */
@media screen and (max-width:599px){
  /* 動画リスト（共通） --------------------------- */
  .cm-list { grid-template-columns:repeat(1,1fr); }

  #top .secret { display:block; }
  #top .secret .ico { text-align:center; }

  /* 鈑金 */
  #repair .tbl.hscroll { width:550px; padding-bottom:0; }

}