html,body {
  font-family: 
    "Noto Sans JP",
    sans-serif;
  background-color: #fa7d32;
  margin: 0;
  padding: 0;
  text-size-adjust:100%;
  -webkit-text-size-adjust:100%;
  line-height: 1.4;
  letter-spacing: 0.1vw;
  /* font-feature-settings: "palt"; */
  max-width: 100vw;
}

body {
  overflow-x: hidden;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /*outline: 1px solid;*/
}

section {
  max-width: 100%;
  margin: 0 auto;
  position: relative;
  overflow-x: clip;
  /* overflow-y: hidden; */
}

:root{
  --fs-37: clamp(10px, calc(100vw * 37 / 1180), 37px);
  --fs-41: clamp(11px, calc(100vw * 41 / 1180), 41px);
  --fs-45: clamp(12px, calc(100vw * 45 / 1180), 45px);
  --fs-53: clamp(14px, calc(100vw * 53 / 1180), 53px);
  --fs-80: clamp(19px, calc(100vw * 70 / 1180), 70px);
  --fs-130: clamp(35px, calc(100vw * 130 / 1180), 130px);
}

.lease {
  position: relative;
  width: 100%;
  display: block;
}

.lease__inner {
  width: 95%;
  margin: 0 auto;
  z-index: 2;
  /* padding-bottom: 35px; */
  padding-top: 5%;
  padding-bottom: 5%;
  position: relative;
}

h1 {
  color: #fefefe;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  width: 100%;
  text-align: center;
  font-size: var(--fs-80);
  font-weight: 700;
}

.lease__wrap {
  max-width: 980px;
  margin: 0 auto;
}

.lease__card {
  border-radius: 14px;
  padding: 0 18px 18px;
  margin: 14px 0;
  background-color: #fefefe;
}

.carList {
  margin-top:12px
}

.lease__grid {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}

label {
  display: block;
  font-size: var(--fs-45);
  font-weight: 500;
  color: #374151;
  margin-bottom: 6px;
  white-space: nowrap;
}

label::before {
  width: 4px;
  height: calc(100vw * 51 / 1180);
  background-color: #fa7d32;
  display: inline-block;
  content: "";
  margin-right: 4px;
  transform: translateY(2px);
}

input, select {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #d1d5db;
  font-size: var(--fs-45);
  font-weight: 400;
  box-sizing: border-box;
  color: #374151;
  background-color: #f9f9f9;
  -moz-appearance: none;
  -webkit-appearance: none; /*need for safari*/
  appearance: none;
}

select {
  background-image: url("../assets/images/chevron-down.png");
  background-repeat: no-repeat;
  background-size: calc(100vw * 16 / 390) calc(100vw * 13 / 390);
  background-position: right 8% center;

}

select, ::picker(select) {
	/* appearance: base-select; */
  /* -webkit-appearance: base-select; */
  -moz-appearance: none;
  -webkit-appearance: none; /*need for safari*/
  appearance: none;
  padding: 10px 12px;
}

::picker(select) {
  border-radius: 5px;
  box-shadow: rgba(15, 15, 15, 0.05) 0px 0px 0px 1px, rgba(15, 15, 15, 0.1) 0px 3px 6px,
    rgba(15, 15, 15, 0.2) 0px 9px 24px;
  border: none;
}

optgroup {
  font-size: var(--fs-45);
  font-weight: 400;
}

option {
  padding: 0 5px;
  cursor: pointer;
  color: #374151;
  font-size: var(--fs-45);
  font-weight: 400;
}

/* option:checked {
  background-color: #f5f6f7;
} */

option:hover,
option:focus-visible {
  background-color: #f5f6f7;
  outline: none;
}

.lease__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top:15px
}

.lease__muted {
  color: #374151;
  font-size: var(--fs-45);
  font-weight: 500;
}

.lease__caution {
  color: #374151;
  font-size: var(--fs-37);
  font-weight: 500;
}

.lease__big {
  font-size: 22px;
  font-weight: 800;
}

.pill {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: #f3f4f6;
  font-size: 12px;
  margin-right: 6px;
}

.lease__list {
  margin: 10px 0 0;
  padding-left: 18px;
}

hr {
  border: 0;
  border-top: 2px solid #e5e7eb;
  margin: 14px 0;
}

textarea {
  width: 100%;
  min-height: 140px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid #d1d5db;
  box-sizing: border-box;
}

code {
  background: #f3f4f6;
  padding: 2px 6px;
  border-radius: 6px;
}

.lease__note {
  background:#f9fafb;
  border:1px dashed #e5e7eb;
  border-radius:12px;
  padding:12px;
}

.apr {
  margin-top: 15px;
}

#aprDisplay {
  padding:10px 12px;
  border-radius:10px;
  border:1px solid #e5e7eb;
  background:#f9fafb;
  font-size: var(--fs-41);
  color:#374151;
}

/* 結果を見るボタン */
.lease__calc-btn {
  display: block;
  width: 70%;
  padding: 14px;
  border-radius: 12px;
  border: none;
  background: #1ea759;
  color: white;
  font-size: var(--fs-45);
  font-weight: 500;
  cursor: pointer;
  letter-spacing: 0.05em;
  margin-left: auto;
  margin-right: auto;
}
.lease__calc-btn:hover {
  background: #14743d;
}

/* 矢印 */
.lease__arrow {
  width: 20%;
  margin: 0 auto;
  position: relative;
}

.lease__arrow img {
  display: block;
  width: 100%;
}

/* 結果カード */
.lease__result-card {
  background: #fff;
  padding-top: 1vw;
  overflow-x: hidden;
  position: relative;
}

.lease__result-card h2 {
  text-align: center;
  font-size: var(--fs-80);
  font-weight: 700;
  z-index: 5;
  position: relative;
  margin-top: 6.4%;
  /* color: #374151; */
}

.lease__result-title-label {
  background: #fdf0ac;
  padding: calc(100vw * 60 / 1180);
  width: 100%;
  position: absolute;
  z-index: 2;
  top: 12%;
  left: 50%;
  transform: translate(-50%,-50%);
}

/* リース金額ラベル行 */
.lease__result-monthly-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-53);
  font-weight: 700;
  margin-bottom: 8px;
  margin-left: auto;
  margin-right: auto;
  width: fit-content;
  justify-content: center;
  margin-top: 12px;
  color: #374151;
  white-space: nowrap;
}

@media (min-width: 680px) {
  .lease__result-card h2 {
    margin-top: 5.4%;
  }
  
  .lease__result-title-label {
    padding: calc(100vw * 25 / 680);
    top: 15%;
  }

  .lease__result-monthly-label {
    margin-top: 15px;
  }
}

.lease__yen-icon {
  width: 12.5%;
}

.lease__yen-icon img {
  width: 100%;
  display: block;
}

.lease__label-small {
  font-size: var(--fs-41);
  font-weight: 700;
  color: #374151;
}

/* 月額表示ボックス */
.lease__result-monthly-box {
  border: 2px solid #e5e7eb;
  border-radius: 14px;
  padding: 10px;
  text-align: center;
  background: #fafafa;
}

.lease__result-monthly-box .lease__big {
  font-size: var(--fs-130);
  font-weight: 700;
  line-height: 1;
  margin: unset;
  color: #ef4444;
}

.lease__result-monthly-box .lease__muted {
  margin-top: 8px;
  font-size: var(--fs-45);
  font-weight: 500;
  color: #374151;
}

#leaseInitial {
  font-size:var(--fs-53);
  font-weight:400;
  margin-top:4px;
  color: #374151;  
}

#leaseTotal {
  font-size:var(--fs-53);
  font-weight:400;
  margin-top:4px;
  color: #374151;
}

.lease__btn {
  display: inline-block;
  padding: 10px 14px;
  border-radius: 8px;
  background: #1ea759;
  color: white;
  text-decoration: none;
  font-weight: 700;
  font-size: var(--fs-45);
}

.lease__btn.secondary {
  background: #8e8e8e;
}

#contact {
  display: none;
}

.lease__bg-stripe_1 {
  position: absolute;
  width: 30%;
  top: 0%;
  left: 0%;
  transform: translate(-50%,-50%);
}

.lease__bg-sphere_1 {
  position: absolute;
  width: 10%;
  top: 3.5%;
  left: 7%;
  transform: translate(-50%,-50%);
}

.lease__bg-dot_1 {
  position: absolute;
  width: 30%;
  top: 6%;
  left: 103%;
  transform: translate(-50%,-50%);
}

.lease__bg-sphere_2 {
  position: absolute;
  width: 27%;
  top: 66%;
  left: 7%;
  transform: translate(-50%,-50%);
}

.lease__bg-stripe_2 {
  position: absolute;
  top: 95%;
  left: 82%;
  transform: translate(-50%,-50%);
  width: 30vw;
}

.lease__bg-stripe_1 img,
.lease__bg-stripe_2 img,
.lease__bg-sphere_1 img,
.lease__bg-sphere_2 img,
.lease__bg-dot_1 img {
  display: block;
  width: 100%;
}

.contact_btn {
  margin-top:4px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 390px) {
  label {
    white-space: normal;
  }

  select {
    padding-right: 12vw;
  }

  .lease__result-title-label {
    top: 9%;
    padding: calc(100vw * 60 / 1280 );
  }

}

.zsiq_custommain,
.zsiq_floatmain,
.zsiq_theme1 .zsiq_cnt,
.zsiq_theme2 .zsiq_flt_rel {
  display: none !important;
}