@charset "UTF-8";
.uni-wrap {
  width: 1024px
}
.fz-3xs {
  font-size: 2.5641vw;
  line-height: 1.4
}
.ds-tx--baseGreen {
  color: #03835a!important
}
.ds-tx--numberBlue {
  color: #0075c3!important
}
.ds-tx--black {
  color: #222!important
}
.js-acd--area {
  display: none
}
[data-nav-parent=os] {
  display: none
}
.brand-nav {
  display: flex;
  justify-content: center;
  position: relative;
  gap: 2.05128vw;
  margin: 0 0 24px 0
}
.brand-nav::after {
  width: 100%;
  border-bottom: 1px solid #00a44c;
  content: '';
  height: 1px;
  bottom: 0;
  position: absolute
}
.brand-nav .brand-nav-btn {
  width: 426px;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  border: 1px solid #ddd;
  border-bottom: none;
  background: #fff;
  font-weight: 700;
  font-size: 1.6rem;
  height: 54px;
  color: #222
}
.brand-nav .brand-nav-btn.cr {
  color: #03835a;
  background: #f0fff0;
  border: 1px solid #00a44c;
  border-bottom: none;
  position: relative;
  z-index: 1
}
.brand-nav-box {
  background: #f8f8f8;
  padding: 20px
}
.brand-nav-box .brand-nav-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px
}
.brand-nav-box .brand-nav-list .brand-nav-btn {
  align-items: center;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  box-sizing: border-box;
  color: #175f91;
  display: flex;
  font-size: 1.4rem;
  position: relative;
  font-weight: 700;
  height: 60px;
  line-height: 1.2;
  width: 190px;
  padding: 0 16px
}
.brand-nav-box .brand-nav-list .brand-nav-btn::after {
  border-right: 2px solid #03835a;
  border-top: 2px solid #03835a;
  bottom: 0;
  content: '';
  display: block;
  height: 8px;
  margin: auto;
  position: absolute;
  right: 8px;
  top: 0;
  transform: rotate(45deg);
  position: absolute;
  width: 8px
}
.body-list {
  display: flex;
  justify-content: center;
  position: relative;
  gap: 8px;
  margin: 0
}
.body-list .body-list--inner {
  width: 121px;
  height: 128px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: #fff;
  color: #175f91;
  font-weight: 700;
  font-size: 1.6rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: opacity .2s ease-out;
  line-height: 1.4;
  padding-top: 16px
}
.body-list .body-list--inner.disabled {
  pointer-events: none;
  opacity: .6
}
.body-list .body-list--inner span {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%
}
.ranking-list-wrap {
  counter-reset: number
}
.ranking-list {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px
}
.ranking-list .ranking-list-item {
  position: relative;
  width: 328px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: #fff;
  padding: 12px;
  counter-increment: number
}
.ranking-list .ranking-list-item::before {
  display: flex;
  position: absolute;
  top: -4px;
  left: -4px;
  margin: auto;
  width: 40px;
  height: 40px;
  background: #0075c3;
  border-radius: 2.5641vw;
  color: #fff;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
  justify-content: center;
  align-items: center;
  z-index: 1;
  content: counter(number)
}
.ranking-list .ranking-list-item a {
  color: #222
}
.ranking-list .ranking-list-item .ranking-status::after {
  border-right: 2px solid #03835a;
  border-top: 2px solid #03835a;
  bottom: 120px;
  content: '';
  display: block;
  height: 8px;
  margin: auto;
  position: absolute;
  right: 8px;
  top: 0;
  transform: rotate(45deg);
  width: 8px
}
.ranking-list .ranking-list-item .ranking-ttl {
  display: flex;
  gap: 12px;
  margin-bottom: 16px
}
.ranking-list .ranking-list-item .ranking-ttl .ranking-ttl-carname {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 12px
}
.ranking-list .ranking-list-item .ranking-ttl .ranking-ttl-carname .ranking-brand {
  font-size: 1.4rem
}
.ranking-list .ranking-list-item .ranking-ttl .ranking-ttl-carname .ranking-carname {
  font-size: 2rem;
  font-weight: 700
}
.ranking-list .ranking-list-item .ranking-info {
  margin-bottom: 12px
}
.ranking-list .ranking-list-item .ranking-info .ranking-condition {
  display: flex;
  flex-direction: column;
  gap: 8px
}
.ranking-list .ranking-list-item .ranking-info .ranking-condition .ttl {
  display: inline-block;
  margin: 0 4px 0 0;
  padding: 2px 8px;
  background-color: #f8f8f8;
  font-size: 1.2rem;
  font-weight: 700
}
.ranking-list .ranking-list-item .ranking-info .ranking-condition .price {
  font-size: 1.8rem;
  font-weight: 700;
  color: #0075c3
}
.ranking-list .ranking-list-item .ranking-info .ranking-condition .volatility {
  font-size: 1.8rem;
  font-weight: 700;
  color: #da3b3b
}
.ranking-list .ranking-list-item .ranking-info .ranking-condition .tendency img {
  width: auto;
  height: 16px;
  margin: 4px 0 0 12px
}
.ranking-list .ranking-list-item .price-stock {
  background-color: #f8f8f8;
  padding: 12px
}
.ranking-list .ranking-list-item .price-stock .stock-pr {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 12px;
  text-align: center
}
.ranking-list .ranking-list-item .price-stock .stock-pr .price {
  font-size: 1.6rem;
  font-weight: 700
}
.ranking-list .ranking-list-item .price-stock .stock-pr .fz-3xs-b {
  font-size: 1rem;
  font-weight: 700
}
.ranking-acd .ranking-acd-tgl {
  display: flex;
  position: relative;
  margin: 20px auto;
  width: 480px;
  height: 54px;
  background: #f8f8f8;
  border-radius: 5.12821vw;
  font-size: 1.4rem;
  font-weight: 700;
  justify-content: center;
  align-items: center
}
.ranking-acd .ranking-acd-tgl::after,
.ranking-acd .ranking-acd-tgl::before {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  background-color: #00a44c;
  border-radius: 1px;
  color: #00a44c;
  font-size: 1.4rem;
  font-weight: 700;
  content: ''
}
.ranking-acd .ranking-acd-tgl::before {
  right: 12px;
  width: 14px;
  height: 2px
}
.ranking-acd .ranking-acd-tgl::after {
  right: 18px;
  width: 2px;
  height: 14px;
  transition: .2s
}
.ranking-acd .ranking-acd-tgl.open::after {
  transform: rotate(90deg)
}
.ranking-acd .js-acd--area .ranking-list {
  justify-content: flex-start
}
.ranking-acd .js-acd--area .ranking-list .ranking-list-item {
  width: 500px
}
.ranking-acd .js-acd--area .ranking-list .ranking-list-item::before {
  background: #555
}
.ranking-acd .js-acd--area .ranking-list .ranking-list-item .ranking-status::after {
  bottom: 40px
}
.ranking-acd .js-acd--area .ranking-list .ranking-list-item .ranking-ttl {
  display: flex;
  gap: 12px;
  margin-bottom: 8px
}
.ranking-acd .js-acd--area .ranking-list .ranking-list-item .ranking-ttl .ranking-ttl-carname {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 4px;
  padding-top: 0;
  margin-left: 28px
}
.ranking-acd .js-acd--area .ranking-list .ranking-list-item .ranking-ttl .ranking-ttl-carname .ranking-carname {
  font-size: 1.6rem
}
.ranking-acd .js-acd--area .ranking-list .ranking-list-item .ranking-info {
  margin-bottom: 12px;
  display: flex;
  gap: 12px
}
.ranking-acd .js-acd--area .ranking-list .ranking-list-item .ranking-info .ranking-condition {
  margin-top: -4px
}
.ranking-acd .js-acd--area .ranking-list .ranking-list-item .price-stock {
  display: flex;
  justify-content: space-between
}
.ranking-acd .js-acd--area .ranking-list .ranking-list-item .price-stock .stock-pr {
  display: flex;
  flex-direction: column;
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0;
  text-align: left
}
.ranking-acd .js-acd--area .ranking-list .ranking-list-item .price-stock .stock-pr .price {
  font-size: 1.6rem;
  font-weight: 700
}
.ranking-acd .js-acd--area .ranking-list .ranking-list-item .price-stock .ds-btn--sub {
  width: 280px;
  height: 36px;
  min-height: 36px
}
.ranking-acd .js-acd--area .ranking-list .ranking-list-item .price-stock .ds-btn--sub .ds-btn--label {
  font-size: 1.2rem
}
.initials-box .initials-nav {
  display: flex;
  justify-content: center;
  position: relative;
  gap: 12px;
  margin: 0 0 32px 0
}
.initials-box .initials-nav .initials-btn {
  width: 98px;
  height: 54px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: #fff;
  color: #175f91;
  font-weight: 700;
  font-size: 1.6rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: opacity .2s ease-out;
  line-height: 1.4
}
.initials-box .initials-nav .initials-btn.cr {
  background: #f0fff0;
  border: 1px solid #00a44c
}
.initials-box .initials-nav .initials-btn.disabled {
  pointer-events: none;
  opacity: .6
}
.initials-box .initials-list-wrap .initials-ttl {
  font-size: 2rem;
  font-weight: 700;
  color: #03835a;
  margin-bottom: 20px
}
.initials-box .initials-list-wrap .initials-list {
  display: flex;
  counter-reset: number;
  gap: 12px;
  flex-wrap: wrap
}
.initials-box .initials-list-wrap .initials-list .initials-list-item {
  width: 247px;
  min-height: 75px
}
.initials-box .initials-list-wrap .initials-list .initials-list-item a {
  color: #222
}
.initials-box .initials-list-wrap .initials-list .initials-list-item .initials-linkarea {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  border: 1px solid #ddd;
  border-radius: 6px;
  position: relative;
  overflow: hidden;
  padding: 0 15px 0 0;
  margin-bottom: 12px
}
.initials-box .initials-list-wrap .initials-list .initials-list-item .initials-linkarea::before {
  border-right: 2px solid #03835a;
  border-top: 2px solid #03835a;
  bottom: 0;
  content: '';
  display: block;
  height: 8px;
  margin: auto;
  position: absolute;
  right: 8px;
  top: 0;
  transform: rotate(45deg);
  width: 8px;
  z-index: 10
}
.initials-box .initials-list-wrap .initials-list .initials-list-item .initials-linkarea img {
  width: 100px;
  height: auto;
  flex-shrink: 0;
  margin-right: 8px
}
.initials-box .initials-list-wrap .initials-list .initials-list-item .initials-linkarea .initials-carname {
  display: flex;
  flex-direction: column;
  font-weight: 700;
  font-size: 1.4rem
}
.initials-box .initials-list-wrap .initials-list .initials-list-item .initials-linkarea .initials-carname .brandname {
  font-weight: 400;
  font-size: 1.2rem
}
.car-price-box {
  background: #f8f8f8;
  padding: 24px
}
.car-price-box .model-status {
  background: #fff;
  padding: 20px
}
.car-price-box .model-status .model-info {
  display: flex
}
.car-price-box .model-status .model-info .model-imgagebox {
  margin-right: 20px
}
.car-price-box .model-status .model-info .model-condition {
  display: flex;
  gap: 4px;
  text-align: center;
  border-bottom: #ddd 1px solid;
  padding-bottom: 20px
}
.car-price-box .model-status .model-info .model-condition .condition-pr {
  display: flex;
  flex-direction: column;
  width: 274px
}
.car-price-box .model-status .model-info .model-condition .condition-vo {
  display: flex;
  flex-direction: column;
  width: 194px
}
.car-price-box .model-status .model-info .model-condition .condition-te {
  display: flex;
  flex-direction: column;
  width: 200px
}
.car-price-box .model-status .model-info .model-condition .ttl {
  background: #f8f8f8;
  padding: 8px 0;
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 4px
}
.car-price-box .model-status .model-info .model-condition .price {
  font-size: 2.4rem;
  font-weight: 700;
  color: #0075c3
}
.car-price-box .model-status .model-info .model-condition .volatility {
  font-size: 2.4rem;
  font-weight: 700;
  color: #da3b3b
}
.car-price-box .model-status .model-info .model-condition .condition-te-txt {
  display: flex;
  padding: 6px 0 0;
  justify-content: center;
  align-items: center
}
.car-price-box .model-status .model-info .model-condition .tendency img {
  width: auto;
  height: 16px;
  margin: 4px 0 0 12px
}
.trends-box {
  width: 800px;
  margin: 0 auto
}
.model-list-wrap .price-stock,
.trends-box .price-stock {
  width: 400px;
  margin: 32px auto 0;
  text-align: center
}
.model-list-wrap .price-stock .stock-pr,
.trends-box .price-stock .stock-pr {
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 8px
}
.model-list-wrap .price-stock .price,
.trends-box .price-stock .price {
  font-size: 2rem;
  font-weight: 700
}
.model-list-wrap .model-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 24px
}
.model-list-wrap .model-list .model-list-item {
  width: 500px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: #fff;
  padding: 20px
}
.model-list-wrap .model-list .model-list-item .model-ttl {
  display: block;
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 8px
}
.model-list-wrap .model-list .model-list-item .model-info {
  display: flex
}
.model-list-wrap .model-list .model-list-item .model-info .model-condition {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-left: 12px
}
.model-list-wrap .model-list .model-list-item .model-info .model-condition .ttl {
  display: inline-block;
  margin: 0 4px 0 0;
  padding: 2px 8px;
  background-color: #f8f8f8;
  font-size: 1.2rem;
  font-weight: 700
}
.model-list-wrap .model-list .model-list-item .model-info .model-condition .price {
  font-size: 1.8rem;
  font-weight: 700;
  color: #0075c3
}
.model-list-wrap .model-list .model-list-item .model-info .model-condition .volatility {
  font-size: 1.8rem;
  font-weight: 700;
  color: #da3b3b
}
.model-list-wrap .model-list .model-list-item .model-info .model-condition .tendency img {
  width: auto;
  height: 16px;
  margin: 4px 0 0 12px
}
.cta-wrap {
  background: url("/assets/img/search/market-price/common/img-cta-shop.webp") no-repeat right;
  background-color: #f1fbf8;
  padding: 32px
}
.cta-wrap .ttl {
  font-size: 2rem;
  font-weight: 700;
  color: #03835a;
  margin-bottom: 24px
}
.cta-wrap .btn {
  display: flex;
  gap: 12px
}
.market-price-info {
  display: flex;
  justify-content: space-between;
  padding: 0 32px;
  background: linear-gradient(180deg,transparent 0,transparent 85%,#ebebeb)
}