@charset "utf-8";

.car-sales-txt{
  margin-bottom:140px;
  text-align:center;
}

.car-sales-txt p:first-child{
  font-size:clamp(1.25rem, 0.625rem + 2.08vw, 2.5rem); 
  background:#FF7A59;
  width:fit-content;
  margin: 0 auto 20px;
  padding: 8px 0px 8px 20px;
  line-height: 1;
}

.feature-wrap:nth-child(3){
  flex-direction: row;
}

.feature-wrap:nth-child(4){
  flex-direction: row-reverse;
}

.way{
  margin:180px 0;
}

.way .lower-title + p{
  text-align:center;
  margin:4rem 0;
}

.compare {
  width: 80%;
  max-width: 875px;
  margin: 0 auto;
}

.compare p {
  margin: 0;
}

/* 見出し */
.compare-head {
  display: grid;
  grid-template-columns: 60px 1fr 1fr;
}

.compare-space {
  width: 60px;
}

.compare-title {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 105px;
  font-size: clamp(0.875rem, 0.563rem + 1.04vw, 1.5rem);
  font-weight: 700;
}

.compare-title.buy {
  background: #ff7455;
  border-radius: 18px 18px 0 0;
}

.compare-title.lease {
  color: #fff;
  background: #725f60;
  border-radius: 18px 18px 0 0;
}

/* 各行 */
.compare-row {
  display: grid;
  grid-template-columns: 60px 1fr 1fr;
  position: relative;
}

/* 左ラベル */
.compare-label {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  padding: 15px 0;
  color: #fff;
  background: #2f2f2f;
  writing-mode: vertical-rl;
  letter-spacing: 0.08em;
  border-radius: 15px 0 0 15px;
}

/* 内容 */
.compare-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height:  120px;
  padding: 25px 30px;
  box-sizing: border-box;
  border-right: 1px solid #888;
  border-bottom: 1px solid #888;
  font-size: clamp(0.875rem, 0.563rem + 1.04vw, 1.5rem);
  text-align: center;
}

/* 左側セル */
.compare-item:nth-child(2) {
  border-left: 1px solid #888;
}

/* 最初の行だけ上線 */
.compare-row:first-of-type .compare-item {
  border-top: 1px solid #888;
}

/* 補足 */
.compare-note {
  margin-top: 12px !important;
  font-size: clamp(0.75rem, 0.563rem + 0.63vw, 1.125rem);
}

.voice .container{
  max-width:1000px;
}

.voice-item{
  position:relative;
}

.voice-label{
  display:flex;
  padding:6px 20px;
  background:#FF7A59;
  gap:1rem;
  position:absolute;
  left:0;
  top:0;
  width:max-content;
  align-items: center;
  border-radius:20px 0 0 0;
}

.voice-label h3{
  font-size:1rem;
  padding:0px 6px;
  background:#2F2F2F;
  color:#fff;
}

.products .feature-wrap.voice-item{
  border-radius: 20px;
  padding:5rem 5% 3rem;
}

.products .feature-wrap img {
  width: 20%;
  max-width:145px;
}

.products .feature-txt{
  width:75%;
}

.products .feature-txt h4{
  font-size:clamp(1.125rem, 0.938rem + 0.63vw, 1.5rem);
  padding-bottom:14px;
  margin-bottom:1rem;
  border-bottom:1px solid #2F2F2F;
}

.process{
  margin:180px 0;
}

.process .container{
  max-width:745px;
}

.process-wrap{
  display:grid;
  gap:5rem;
  position:relative;
}

.process-wrap::before{
  content:"";
  position:absolute;
  top: 50%;
  left: 8.5%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  width:3px;
  height:80%;
  background:#6A5856;
  z-index:-1;
}

.process-item{
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.process-item img{
  width:17%;
}

.process-txt{
  width:75%;
}

.process-txt h3{
  margin-bottom:1rem;
  font-size:clamp(1.125rem, 0.938rem + 0.63vw, 1.5rem);
  display: flex;
  align-items: center;
  gap: 1rem;
}

.process-txt h3 strong{
  color:#FF7A59;
  font-size:clamp(1.25rem, 0.625rem + 2.08vw, 2.5rem);
}

.choice {
  width: 100%;
  padding: 80px 20px ;
  background: #ddd5c7;
  box-sizing: border-box;
  margin-bottom:7.5rem;
}

.choice-inner {
  position: relative;
}

.car-sales-img{
  width:80%;
  margin:0 auto;
}

.choice-text {
  width: fit-content;
  margin: 0 0 -5% auto;
}

.choice-title {
  margin: 0 0 25px;
  font-size: clamp(1.25rem, 0.875rem + 1.25vw, 2rem);
  font-weight: 700;
  width:fit-content;
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.65);
}


/* =========================
SP
========================= */

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

  .choice {
    padding: 35px 15px 0;
  }

  .choice-inner {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  /* テキスト */
  .choice-text {
    position: static;
    width: 100%;
  }

  /* 車 */
  .choice-car {
    position: absolute;
    top: 300px;
    right: 0;
    left: auto;
    width: 53%;
  }

  /* モヤモヤ */
  .choice-mark {
    position: absolute;
    top: 690px;
    left: 57%;
    width: 14%;
    transform: none;
  }

  /* 吹き出し */
  .choice-balloon {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    width: 55%;
  }

  .choice-balloon01 {
    align-self: flex-start;
    margin-top: 190px;
    order: 2;
  }

  .choice-balloon02 {
    align-self: flex-end;
    margin-top: -10px;
    order: 3;
  }

  .choice-balloon03 {
    align-self: flex-start;
    margin-top: -10px;
    order: 4;
  }

  .choice-balloon04 {
    align-self: flex-start;
    margin-top: 10px;
    order: 5;
  }

  /* 人物 */
  .choice-person {
    position: absolute;
    right: -10px;
    bottom: 0;
    left: auto;
    width: 40%;
    transform: none;
  }

  .choice-inner {
    padding-bottom: 80px;
  }

}

/* SP */
@media screen and (max-width: 767px) {

  .compare-head,
  .compare-row {
    grid-template-columns: 38px 1fr 1fr;
  }

  .compare-space {
    width: 38px;
  }

  .compare-title {
    min-height: 70px;
    padding: 10px 5px;
    font-size: 18px;
  }

  .compare-title.buy,
  .compare-title.lease {
    border-radius: 10px 10px 0 0;
  }

  .compare-label {
    min-height: 90px;
    padding: 8px 0;
    font-size: 14px;
    border-radius: 8px 0 0 8px;
  }

  .compare-item {
    min-height: 90px;
    padding: 15px 8px;
    font-size: 14px;
    line-height: 1.5;
  }

  .compare-note {
    margin-top: 6px !important;
    font-size: 11px;
    line-height: 1.6;
  }
}

@media screen and (max-width: 1400px) {
  .choice-text {
    margin: 0 0 3rem;
  }
}

@media screen and (max-width: 1024px) {
  .lower-fv-txt p.car-title{
    font-size:clamp(1.5rem, 0.667rem + 2.78vw, 4rem);
  }
  .car-sales-img {
    width: 100%;
  }
}

@media screen and (max-width: 767px) {
  .choice-text {
    margin: 0 0 1rem;
  }
  .car-sales-txt {
    margin-bottom: 40px;
  }
  .way {
    margin: 80px 0;
  }
  .way .lower-title p,
  .process .lower-title p{
    font-size: 2rem;
  }
  .way .lower-title + p{
    margin: 2rem 0;
  }
  .compare {
    width: 100%;
  }
  .products .feature-txt,
  .products .feature-wrap img{
    width: 100%;
  }
  .process{
    margin: 80px 0;
  }
}