@charset "utf-8";


body{
color: #5a1210;
font-family: "Noto Sans JP", sans-serif !important;
font-weight: 500;
font-size: 100%;
padding-top: 60px;

background: #fbf3e8 !important;
}


body.usedcar.static,
body.usedcar.single{
    background: url(/usedcar/images/bg.png) #FFF !important;
    background-size: 50% !important;
}


section{
border: none;
}

section section{
border-bottom: none;
}


.sp{display: none;
}

/*
.map iframe {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
}*/

.map iframe{
width: 100% !important;
height: 250px !important;
}


#wrapper{
/*margin-top: 40px;*/
width: 100%;
}


.top #wrapper{
margin-top: 0px;
}


#contents{
margin: 0;
padding: 0;
}

.usedcar.top{
padding-top: 100px;
}


#contents .inner{
/*width: 980px;*/
}

div.header{
text-align: center;
padding: 20px;
background: #5a1210;
margin-bottom: 50px;
}
div.header span.title{
font-family: "Roboto Condensed", sans-serif;
color: #FFF;
font-size: 20px;
}
div.header span.title a{
color: #FFF;
text-decoration: none;
}

.top div.header{
display: none;
}

div.title.center{
text-align: center;
}
div.title{
margin-bottom: 40px;
}


div.title h2 {
    font-size: 30px;
    font-weight: bold;
}

div.title.center h2 {
    font-size: 40px;
    font-weight: 600;
    font-family: "Jost", sans-serif !important;
}


div.title h2 span.sub{
display: block;
font-size: 60%;
margin-top: .5em;
}



#contents div.title h3{
font-family: "Roboto Condensed", sans-serif;
/*font-family: "Archivo Narrow", sans-serif;*/
font-size: 50px;
margin: 0;
}
#contents div.title h3 span.sub{
font-size: 16px;
display: block;
margin-top: 10px;
}

div.title.center h3{
  position: relative;
  display: inline-block;
  padding: 0 45px;
  color: #000;
  font-weight: 400;
  font-size: 40px;
}
div.title.center h3:before, div.title.center h3:after {
  content: '';
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 44px;
  height: 2px;
  background-color: black;
  transform: rotate(-60deg);
}
div.title.center h3:before{
  -webkit-transform: rotate(-60deg);
  transform: rotate(60deg);
}
div.title.center h3:before {
  left:0;
}
div.title.center h3:after {
  right: 0;
}


div.title h4{
text-align: left;
font-size: 24px;
}
div.title h4{
border-bottom: solid 2px #5a1210;
padding-bottom: 15px;
}


p.button.bottom.search.pc{
position: fixed;
right: 0;
top: 30%;
z-index: 999;
padding: 0;
background: none;
}
p.button.bottom.search.pc img{
height: 250px;
}


p.button.bottom i,
p.button.bottom span.slash{
/*display: none;*/
}
p.button.bottom.search i{
display: inherit;
}

p.button.bottom span{
margin: 0 1em;
display: inline-block;
box-sizing: border-box;
}
/*
p.button.bottom a{
background-color: #b22419;
background: rgba(229,75,44,.9);
padding: 30px;
border-radius: 30px;
width: 260px;
background: #5a1210;
}
*/


p.button.bottom a{
background: #5a1210;
}
p.button.bottom.search a{
background: none;
}


p.button.bottom .tel a{
border: none;
background: rgba(229,75,44,.1);
background: #ffe2d6;
color: #b22419;
background: #d34f26;
color: #FFF;
}


/**PRICE*/


div.box_price{
margin: 20px 0;
text-align: center;
}

div.box_price span{
font-size: 28px;
font-family: "Roboto Condensed", sans-serif;
}

.single div.box_price span{
font-size: 34px;
}

div.box_price span.total{
color: #ee5a24;
}
div.box_price span.total,
div.box_price span.body{
text-align: center;
display: inline-block;
margin:  0 5px;
}

div.box_price span.ttl{
font-size: 12px;
display: block;
color: #000;
margin-bottom: 5px;
text-align: left;
}
div.box_price span.ttl span.sub{
font-size: 10px;
color: #999;
}
div.box_price span.unit{
font-size: 12px;
}




/**FORM*/


input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], textarea{
border-radius: 10px;
border: none;
background: #EEE;
}



form.sent div.form {
	display: none;
}
.wpcf7 input[type="submit"] {
padding: 15px 30px;
font-size: 110%;
}

.wpcf7 form .wpcf7-response-output{
text-align: center;
font-weight: bold;
border: none;
}

.wpcf7-list-item{
margin: 0 .5em 0 1em;
}


.field-group {
  display: none;
}



.wpcf7 form .wpcf7-response-output {
    margin: 2em 0.5em 2em;
    padding: 15px;
    border: 2px dashed #dc3232 !important;
    line-height: 1.5;
    color: #dc3232;
}




.form ul.accept{
margin: 2em 0;
}
.form ul.accept li{
list-style: none;
line-height: 1.5;
font-size: 14px;
margin: .5em 0;
}





/**
TOP
*/


#contents div.main_title{
text-align: center;
background: #fbf3e8;
}



.intro ul li a{
background: rgba(90,18,16);
width: 100%;
padding: 30px;
font-size: 22px;
border-radius: 20px;
}
.intro ul li a:hover{
background: rgba(90,18,16,.6);
}



body.top .about p.title img{
/*height: 180px;*/
width: 600px;
}


body.top .about ul.flexbox li{
display: block;
width: 100%;
}

body.top .about .column div.sub{
text-align: center;
}
body.top .about .column div.sub img{
width: 70%;
}



section.step ul li{
padding: 10px;
}


section.newitem{
background: url(/usedcar/images/bg.png) #FFF !important;
background-size: 50% !important;
}


section.lineup section{
padding: 20px 0;
}

body.top .lineup .search_brand ul li{
padding: 20px;
text-align: center;
margin-bottom: 1em;
}
body.top .lineup .search_brand ul li img{
height: 30px;
}

body.top .lineup ul li div.image img{
border-radius: 5px;
}



.news ul.item.box p{
text-align: left;
}

.news ul.item.box p.title a{
text-decoration: none;
}



/**
CAR LIST
*/

ul.car_list li{
padding: 10px;
margin-bottom: 4% !important;
}

ul.car_list li.sold div.image span.icon{
position: absolute;
top: 0px;
left: 0px;
z-index: 99;
}
ul.car_list li.sold div.image span.icon img{
width: 50px;
border-radius: 10px 0 0 0;
}

ul.car_list div.image{
position: relative;
}

ul.car_list li img{
border-radius: 10px;
}

ul.car_list li p.title{
text-align: left;
display: inline-block;
position: relative;
width: 100%;
padding-right: 50px;
font-family: "Roboto Condensed", sans-serif;

  white-space: nowrap;      /* 改行せず1行で表示する */
  overflow: hidden;         /* はみ出た部分を隠す */
  text-overflow: ellipsis;  /* はみ出た部分を「…」にする */
}
ul.car_list li p.title a{
color: #000;
font-size: 20px;
float: left;
text-decoration: none;
}
ul.car_list li p.title span.icon{
position: absolute;
top: -5px;
right: 0;
margin: 0;
}
ul.car_list li p.title span.icon img{
height: 40px;
}

ul.car_list div.image{
margin-bottom: 1em !important;
}

ul.item.box.car_list li dl.data_list{
font-size: 12px;
margin-bottom: 10px;
color: #333;
font-weight: 600;
}
ul.item.box.car_list li dl.data_list dt{
width: 30%;
white-space: nowrap;
text-align: center;
background: #e3e3e3;
padding: 5px 10px;
border-radius: 5px;
display: inline-block;
margin-bottom: 5px;
font-size: 10px;
vertical-align: top;
line-height: 1.5;
}
ul.item.box.car_list li dl.data_list dd{
width: 70%;
display: inline-block;
padding-left: 10px;
margin-bottom: 5px;
line-height: 1.5;
}


/**VOICE*/


section.voice{
background: url(/usedcar/images/bg.png) #FFF !important;
background-size: 50% !important;
}



.bubble {
  position: relative;
  display: inline-block;
  margin-top: 20px;
  padding: 16px;
  border-radius: 8px;
  background-color: #e8e8e8;
  text-align: left;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: #000000;
}

.bubble::after {
  content: "";
  position: absolute;
  top: 0; /* bottom: 0 から変更 */
  left: 70%;
  border-style: solid;
  border-width: 0 20px 20px 0; /* 三角形を上に向けるよう変更 */
  border-color: transparent transparent #e8e8e8; /* 下辺の色を表示 */
  translate: calc(-50% - 0.4px) -100%; /* 上方向（マイナス）に押し出す */
}




.voice_list div.photo{
background: url("/usedcar/images/voice_photo_bg.png") no-repeat center top;
padding: 10px 40px 90px 10px;
background-size: 100%;
margin-left: 20px;
height: 360px;
}


.search_partners ul li p.area{
text-align: left;
color: #000;
margin-bottom: 1em;
}

.search_partners ul li img{
max-height: 80px;
}
.search_partners ul li{
text-align: center;
}


/**
LIST
*/


.partners ul li{
text-align: center;
list-style: none;
}
.partners ul li p.logo img{
width: 200px;

}

.partners p.data{
margin-top: 20px;
}

.partners .shop div.map{
margin-bottom: 1em;
}
.partners .shop div.data p.name{
font-size: 120%;
font-weight: bold;
margin-bottom: 0;
}



/**
LIST
*/

.partners p.logo{
text-align: center;
margin-bottom: 50px;
}
.partners p.logo img{
height: 100px;
}


/**
DETAIL
*/


.single #sliderWrap{
position: relative;
margin-top: 0;
}

.single #sliderWrap span.icon{
position: absolute;
top: 0px;
left: 0px;
z-index: 99;
}

.single #sliderWrap span.icon img{
width: 60px;
border-radius: 10px 0 0 0;
}




#sliderWrap ul.bxslider li{
height: auto;
}
#sliderWrap ul li img {
    margin: 0 auto;
    max-width: 100%;
    max-height: auto;
border-radius: 10px;
}


.bx-wrapper {
    margin: 0 auto 15px !important;
}




.products #bx-pager a{
margin: 0 1px 1px 1px !important;
display: inline-block;
}



.single div.title span.sub{
font-size: 16px;
display: block;
line-height: 1.6;
margin-bottom: 1em;
}



/* 1. サムネイル全体のコンテナ設定 */
#bx-pager {
  display: flex;
  gap: 6px;                         /* サムネイル同士の間隔 */
  overflow-x: auto;                 /* 横スクロール */
  white-space: nowrap;
  padding: 8px 4px 12px 4px;         /* スクロールバーや枠線が途切れないための余白 */
  -webkit-overflow-scrolling: touch;/* スマホの滑らかなスクロール */
}

/* 2. カスタムスクロールバー（Webkit系: Chrome, Safari, Edgeなど） */
#bx-pager::-webkit-scrollbar {
  height: 6px;                      /* スクロールバーの太さを細く */
}
#bx-pager::-webkit-scrollbar-track {
  background: #f1f1f1;              /* トラック（背景）の色 */
  border-radius: 3px;
}
#bx-pager::-webkit-scrollbar-thumb {
  background: #ccc;                 /* つまみの色 */
  border-radius: 3px;
}
#bx-pager::-webkit-scrollbar-thumb:hover {
  background: #999;                 /* ホバー時のつまみの色 */
}

/* 3. サムネイル枠（リンク）のスタイル */
#bx-pager a {
  flex: 0 0 auto;                   /* 横幅固定 */
  display: block;
  border-radius: 6px;               /* 角丸 */
  overflow: hidden;
  opacity: 0.6;                     /* 選択されていない時は少し薄く */
  transition: all 0.2s ease;        /* アニメーション */
  border: 2px solid transparent;    /* 枠線の準備 */
}

/* ホバー時 */
#bx-pager a:hover {
  opacity: 1;
  /*transform: translateY(-2px);      /* ほんの少し浮き上がる効果 */
}

/* 4. 選択中（アクティブ）のサムネイル */
#bx-pager a.active {
  opacity: 1;
  border-color: rgba(229,75,44,.9);            /* 選択中の枠線色（お好みのアクセントカラーに変更可） */
  /*box-shadow: 0 4px 8px rgba(0,123,255,0.25);*/
}

/* 5. 画像自体の調整 */
#bx-pager img {
  /*width: 80px;                      /* サムネイルの横幅 */
  height: 40px;                     /* サムネイルの高さ */
  object-fit: cover;                /* アスペクト比を保ったまま正しく収める */
  display: block;
}





div.banner{
text-align: center;
margin: 80px auto 0 auto;
}
div.banner img{
height: 120px;
width: auto;
}

.single .data table{
  border-collapse: separate;
  border-spacing: 10px; /* 全体に10pxの隙間 */
  }
.single .data table th{
background: none;
padding: 10px 0;
width: 35%;
background: #e3e3e3;
text-align: center;
color: #000;
border-radius: 10px;
font-size: 13px;

}
.single .data table td{
padding: 10px 0;
color: #000;
font-size: 14px;
}


.wp-pagenavi .current {
    background-color: #b22419;
}

.wp-pagenavi a{
background: none;
text-decoration: none;
}



.news.single article p.category{
margin: 0;
position: absolute;
top: 10px;
right: 10px;
}


p.category a{
text-decoration: none;
padding: 5px 10px;
background: #b22419;
color: #FFF;
margin-left: 5px;
}


ul.item.box li p.title{
font-size: 110%;
}




/**
SIDEBAR
*/

#sidebar {
padding: 50px 0 0 0;
width: 900px;
margin: 0 auto;
float: none;
}


.box_search button{
    border: none !important;
    color: #FFF;
    height: 35px;
    line-height: 35px;
    width: 18%;
    text-align: center;
    padding: 0;
    vertical-align: middle;
	border-radius: 0;
    background: #b22419;
}

.box_search input {
    border: none !important;
    background-color: #FFF;
    height: 35px;
    font-size: 14px;
    width: 82% !important;
    padding-left: 10px !important;
    vertical-align: middle;
}

#sidebar h3{
	font-size: 20px;
	font-weight: 600;
	margin: 0  0 1em 0;
}

#sidebar ul li{
padding: 10px;
}
#sidebar ul li ul li{
padding:  0px;
}
#sidebar ul li a{
	text-decoration: none;
}

#sidebar select{
	width: 100%;
	border: none;
}

#sidebar ul li.category a{
background: none;
color: #333;
padding: 0;
font-size: 14px;
}
#sidebar ul li.category ul li{
margin-left: 30px;
list-style: disc;
}

#sidebar ul li.tag li{
display: inline-block;
width: auto;
margin-bottom: 5px;
}




div.form{
background: inherit !important;
color: #333 !important;
}

div.form p.caution.center{
text-align: center !important;
}

input.short{
width: 150px !important;
}
div.form dl dd.date p{
margin-bottom: .5em !important;
}

.wpcf7 input[type="submit"]{
width: 200px;
border-radius: 10px;
}



.button.to_top{
text-align: center !important;
margin: 50px 0;
}
.button.to_top img{
width: 150px;
}




ul.caution {
  list-style: none; /* デフォルトの箇条書きを消す */
  padding: 0;
  margin-top: 1em;
}

ul.caution li {
  position: relative;
  padding-left: 1.3em; /* アイコン・記号分のスペース */
  text-indent: -1.3em; /* 1行目を引き戻す */
}





/**
TAB
*/

.stock ul.tab{
margin-top: 50px;
}

ul.tab {
    list-style: none;
}

ul.tab li{
    float: left;
    margin-right: 0px;
    padding: 10px 20px;
	background-color: rgba(0,0,0,0.01);
    cursor: pointer;
	list-style: none;
	line-height: 1.5;
	text-align: center;
    border-radius: 5px 5px 0 0;
}

ul.tab li img{
height: 12px;
}


ul.tab li:hover,
ul.tab li a:hover {
	background-color: rgba(0,0,0,0.05);
}

ul.tab li.active {
	background-color: rgba(0,0,0,0.05);
}

div.tabContent {
    clear: both;
	background-color: rgba(0,0,0,0.05);
    padding: 20px 20px 5px 20px;
   display: none;
   margin-bottom: 1em;
   border-radius: 0 0px 10px 10px;
}

.tabContent ul.item.box li p.title{
font-size: 12px;
font-family: "Roboto Condensed", sans-serif !important;
}
.tabContent ul.item.box li p.title a{
text-decoration: none;
}

div.active {
    display: block;
}



ul.item.box.fix li div.image{
    float: none;
    width: 100%;
    text-align: center;
    margin-bottom: 10px;
    height: 120px;
    overflow: hidden;
    position: relative;
}
ul.item.box.fix li div.image img{
border-radius: 0;
    position: absolute;
    width: 20%;
    height: 0;
    width: 100%;
    height: auto;
    /* padding-bottom: 20%; */
    left: 50%;
    top: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
}



#footer{
z-index: 0 !important;
}


@media screen and (max-width: 800px) {

body{
background-size: 100% !important;
}

#wrapper{
padding: 0;
width: 100%;
}

#contents{
/*padding: 0px 10px 0 10px;*/
}

.usedcar.top{
padding-top: 50px;
}

.top #contents{
margin-top: 0px;
padding-top: 0;
}

div.header{
margin-bottom: 30px;
}

section{
padding: 30px 15px !important;
}

.pc{
display: none;
}
.sp{
display: inherit;
}


#contents{
/*margin-top: 30px;*/
}

#contents div.main_title{
/*height: 100vh;*/
margin: 0px auto 0px auto;
height: auto;
text-align: center;
}
.top #contents div.main_title{
margin: 30px auto 0px auto;
}

div.title.name h2{
margin-top: 0 !important;
font-size: 24px;
}

div.title h2 {
    font-size: 18px;
    font-weight: bold;
}

div.title.center h3{
  font-size: 24px;
}


.top section div.title h3{
font-size: 36px;
}
#contents div.title h3 span.sub {
    font-size: 13px;
}

div.title h4{
font-size: 20px;
}




/**
TOP
*/

body.top .intro ul li{
width: 100% !important;
}

.intro ul li a{
font-size: 20px;
}


body.top .newitem,
body.top .voice{
background: url(/usedcar/images/bg.png) #FFF !important;
background-size: 100% !important;
}

body.top .newitem ul.car_list li{
width: 100% !important;
margin-bottom: 0 !important; 
}


/*
body.top .newitem ul.car_list li:not(:first-child) {
    display: none;
}
body.top .voice ul.voice_list li:not(:first-child) {
    display: none;
}*/




.newitem ul.car_list {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; /* iOSの滑らかなスクロール */
    padding-bottom: 10px; /* スクロールバーとの余白（任意） */
  }

  /* clearfixの解除（Flexboxとバッティングを防ぐため） */
  .newitem ul.car_list::after {
    display: none;
  }

  .newitem ul.car_list > li {
    flex: 0 0 100%; /* 1件だけ表示（幅100%に固定） */
    max-width: 100%;
    scroll-snap-align: start; /* スナップ位置を左端に合わせる */
    box-sizing: border-box;
  }


body.top .about ul{
margin-top: 50px;
}
body.top .about ul li{
width: 100% !important;
padding: 0 20px;
}
body.top .about ul li:last-child{
margin-bottom: 0 !important;
}





body.top .step ul li{
width: 100% !important;
padding: 0 30px;
}
body.top .step ul li:last-child{
margin-bottom: 0 !important;
}


body.top section.lineup section{
padding: 0 !important;
}

body.top section.lineup section.search_damd .tabContent ul li{
width: 50% !important;
padding: 0 5px
}



div.tabContent{
border-radius: 0 0 10px 10px;
padding: 0;
background: none;
}


.stock .tabContent ul li{
width: 49% !important;
padding: 0 2px;
}
.stock ul.tab{
margin-top: 10px;
}

ul.tab{
margin-bottom: 20px;
float: left;
}
ul.tab li{
width: 25%;
    padding: 10px 10px;
    margin: 0;
    }


ul.tab li{
border-radius: 5px !important;
margin-bottom: 0px;
}


body.top .lineup .search_brand ul li{
width: 33%;
padding: 0 10px;
}
body.top .lineup .search_brand ul li img{
height: 15px;
width: auto !important;
}




/**
BUTTON
*/

p.button.bottom{
position: fixed;
bottom: 0;
left: 0;
margin: 0;
width: 100%;
padding: 0px;
z-index: 999;
}
p.button.bottom span{
margin: 0;
width: 50%;
display: inline-block;
}
p.button.bottom span.slash{
width: 10%;
}
p.button.bottom i{
display: inherit;
}

p.button.bottom a.btn{
width: 100%;
border-radius: 0;
padding: 15px;
font-size: 120%;
box-shadow: none;
background: #5a1210;
}
p.button.bottom .tel a{
border: none;
text-decoration: none;
background: #d34f26;
}
p.button.bottom .tel a,
p.button.bottom .mail a{
font-size: 90%;
}

/*
.single p.button.bottom p.button a{
display: block;
margin-bottom: 10px;
width: 100%;
}

.single p.button.bottom a:first-child{
border: solid 2px #b22419;
background: none;
}*/

p.button.bottom.search{
bottom: 0;
}





/**
CAR_LIST
*/

ul.car_list{
margin-left: -2% !important;
}

ul.item.box.car_list li{
margin: 0 0 6% 0% !important;
}

ul.item.box.car_list li p.data span.price,
ul.item.box.car_list li p.data span.year{
margin: 0;
display: block;
text-align: left;
}


ul.car_list li p.shop{
margin-bottom: 0 !important;
font-size: 10px;
}

ul.car_list li p.shop i {
    margin-right: 5px;
}

ul.car_list div.image {
    padding: 0px;
    margin-bottom: 10px !important;
}

ul.car_list li.sold div.image span.icon {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 99;
}
ul.car_list li.sold div.image span.icon img{
width: 40px;
}



ul.item.box.fix li div.image{
    height: 100px;
}
ul.item.box.fix li{
margin-bottom: 4% !important;
}


/**
LIST
*/

.partners hr{
margin: 1em 0;
}


/**
DETAIL
*/

.single .products .main{
margin-bottom: 30px;
}
.single .data table{
width: 100%;
}
.single .data table th{
white-space: nowrap;
padding-right: 1em;
}
.single .data table th{
    padding: 10px;
}
.single .data table td{
    padding: 10px 0 5px 0;
}

div.banner{
width: 100%;
margin: 30px auto 0 auto;
}

.single #sliderWrap span.icon img{
width: 60px;
}



.map iframe{
width: 100%;
height: 250px;
}





/**
SIDEBAR
*/

#sidebar{
width: 100%;
}

#sidebar,
#sidebar ul li{
width: 95%;
}

#sidebar ul li{
margin-bottom: 20px;
padding: 0 0 20px 0;
border-bottom: solid 1px #EEE;
}
#sidebar ul li.box_search{
padding-bottom: 30px;
}
#sidebar ul li.archive{
border-bottom: 0;
padding-bottom: 0;
border: none;
}

#sidebar ul li ul li{
border: none;
margin-bottom: 5px;
padding-bottom: 0;
}



.news.single article p.category{
margin: 0;
position: inherit;
}

p.category a{
text-decoration: none;
padding: 5px 10px;
background: #b22419;
color: #FFF;
margin-right: 5px;
margin-left: 0;
}


input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], textarea{
font-size: 120%;
padding: 10px;
}



input.short{
width: 100%;
}

.button.to_top {
    margin: 20px 0;
}
.button.to_top img{
width: 100px;
}

#footer{
margin-top: 0;
}



div.form{
padding: 10px;
}

.wpcf7 input[type="submit"]{
width: 100%;
}





}