@charset "UTF-8";
/* *** variables model *** */
/* radius */
/* *** mixins *** */
/* *** common variables *** */
/* break point */
/* hover style */
/* color */
/* One-Tone */
/* Two-Tone */
/* break point */
/* hover */
.ev-charge-simulator {
  /* 選択用スライダー */
}
@media (min-width: 769px) {
  .ev-charge-simulator {
    margin-block-end: 6rem;
  }
}
.ev-charge-simulator .tab-wrap.cmn-tab-wrap > .tab-btns-list {
  justify-content: center;
}
@media (min-width: 769px) {
  .ev-charge-simulator .tab-wrap.cmn-tab-wrap > .tab-btns-list {
    padding-block-start: 1px;
  }
}
@media (max-width: 768px) {
  .ev-charge-simulator .tab-wrap.cmn-tab-wrap > .tab-btns-list {
    gap: 1.2rem;
    margin-block-end: 1.6rem;
    border-block-end: 1px solid #ddd;
    overflow: visible;
  }
}
@media (max-width: 768px) {
  .ev-charge-simulator .tab-wrap.cmn-tab-wrap > .tab-btns-list.inner-s-wrap {
    width: calc(100% + 32px);
    padding-inline: 32px;
  }
}
.ev-charge-simulator .tab-wrap.cmn-tab-wrap > .tab-btns-list li {
  position: relative;
}
@media (min-width: 769px) {
  .ev-charge-simulator .tab-wrap.cmn-tab-wrap > .tab-btns-list li {
    margin-inline-end: 1.6rem;
    max-width: 240px;
  }
}
.ev-charge-simulator .tab-wrap.cmn-tab-wrap > .tab-btns-list li .tab-btn {
  border: 1px solid #ddd;
  border-block-end: none;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  background: #eee;
  color: #666;
  position: relative;
}
.ev-charge-simulator .tab-wrap.cmn-tab-wrap > .tab-btns-list li .tab-btn.cur {
  background-color: #fff;
  color: var(--keyColor);
}
.ev-charge-simulator .tab-wrap.cmn-tab-wrap > .tab-btns-list li .tab-btn.cur::after {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  background-color: #fff;
  position: absolute;
  left: 0;
  bottom: -1px;
  z-index: 2;
}
.ev-charge-simulator .tab-wrap.cmn-tab-wrap > .tab-btns-list .tab-btn {
  border: 1px solid #ddd;
  border-block-end: none;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  position: relative;
}
.ev-charge-simulator .pc-border-ajust {
  position: relative;
  top: -1px;
}
@media (min-width: 769px) {
  .ev-charge-simulator .pc-border {
    border: 1px solid #ddd;
    border-radius: 10px;
    padding-inline: 2%;
  }
}
.ev-charge-simulator .parameter-result-wrap {
  display: flex;
}
@media (min-width: 769px) {
  .ev-charge-simulator .parameter-result-wrap {
    justify-content: space-between;
    align-items: center;
    gap: 4%;
  }
}
@media (max-width: 768px) {
  .ev-charge-simulator .parameter-result-wrap {
    flex-direction: column;
    gap: 2.4rem;
  }
}
@media (min-width: 769px) {
  .ev-charge-simulator .parameter-result-wrap .parameter {
    flex-basis: 45%;
    position: relative;
  }
}
@media (min-width: 769px) and (min-width: 769px) {
  .ev-charge-simulator .parameter-result-wrap .parameter::after {
    display: block;
    content: "";
    width: 22rem;
    height: 22rem;
    border-top: 3px solid #ddd;
    border-right: 3px solid #ddd;
    transform: scaleX(0.24) rotate(45deg) translateY(-72%);
    position: absolute;
    top: 50%;
    right: -27%;
    z-index: 2;
  }
}
@media (min-width: 769px) {
  .ev-charge-simulator .parameter-result-wrap .result {
    flex-basis: 45%;
  }
}
.ev-charge-simulator .nml-radio-list-wrap {
  border: 1px solid var(--keyColor);
  flex-grow: 0 !important;
  border-radius: 22px;
  display: inline-block;
}
.ev-charge-simulator .nml-radio-list {
  display: inline-flex;
  justify-content: flex-start;
  gap: 4px;
  border: 2px solid #fff;
  border-radius: 20px;
}
.ev-charge-simulator .nml-radio-list .radio-wrap label {
  padding: 6px 14px;
  border: 1px solid #fff;
  border-radius: 20px;
  color: var(--keyColor);
}
.ev-charge-simulator .nml-radio-list .radio-wrap label::before, .ev-charge-simulator .nml-radio-list .radio-wrap label::after {
  display: none;
}
.ev-charge-simulator .nml-radio-list input[type=radio]:checked + label {
  background-color: var(--keyColor);
  border-color: var(--keyColor);
  color: #fff;
}
.ev-charge-simulator .range-slider {
  outline: none;
}
.ev-charge-simulator .row {
  display: flex;
  flex-direction: column;
}
@media (min-width: 769px) {
  .ev-charge-simulator .row {
    gap: 4rem;
  }
}
@media (max-width: 768px) {
  .ev-charge-simulator .row {
    gap: 1.6rem;
    margin-block-end: 1rem;
  }
}
.ev-charge-simulator .col {
  display: flex;
  align-items: center;
}
@media (min-width: 769px) {
  .ev-charge-simulator .col {
    gap: 3.2rem;
  }
}
@media (max-width: 768px) {
  .ev-charge-simulator .col {
    gap: 2rem;
  }
}
.ev-charge-simulator .col .col_title {
  color: #fff;
  background-color: var(--keyColor);
  text-align: center;
  /* &~* {
  	flex-grow: 1;
  } */
}
@media (min-width: 769px) {
  .ev-charge-simulator .col .col_title {
    flex-basis: 22%;
    padding: 0.2rem 0.8rem;
    border-radius: 0.5rem;
    font-size: 1.6rem;
  }
}
@media (max-width: 768px) {
  .ev-charge-simulator .col .col_title {
    flex-basis: 5em;
    padding: 0.2rem 0.4rem;
    flex-shrink: 0;
    border-radius: 0.3rem;
    font-size: 1.2rem;
  }
}
.ev-charge-simulator .col .charge_time_text {
  text-align: center;
  color: var(--keyColor);
  font-size: 2.4rem;
}
.ev-charge-simulator .col .charge_time_text .enhanced {
  font-size: 3.2rem;
  font-weight: bold;
  margin-inline-end: 0.1em;
}
.ev-charge-simulator .ac_tab_content .charge_time_text {
  text-align: center;
}
.ev-charge-simulator .ac_tab_content .ac-charge-time-labels {
  display: none;
}

.result {
  display: flex;
  flex-direction: column;
  color: #222;
  position: relative;
}
.result dl.group {
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-block-end: 1px solid #ccc;
  padding-block: 2rem;
  padding-inline-end: 7px;
}
@media (min-width: 769px) {
  .result dl.group {
    flex-basis: 45%;
  }
}
.result dl.group:last-child {
  border: none;
}
.result dl.group dt {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  font-size: 1.4rem;
  font-weight: bold;
  color: var(--keyColor);
}
@media (max-width: 768px) {
  .result dl.group dt {
    flex-basis: 18%;
  }
}
.result dl.group dd.start {
  flex-basis: 27%;
}
.result dl.group dd.arrow {
  flex-basis: 28%;
}
.result dl.group dd.arrow span.up-par {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  margin-block: 20px 16px;
  color: var(--keyColor);
  line-height: 40px;
  padding-inline: 10% 0;
}
.result dl.group dd.arrow span.up-par span {
  font-weight: bold;
}
@media (min-width: 769px) {
  .result dl.group dd.arrow span.up-par span {
    font-size: 2.8rem;
  }
}
@media (max-width: 768px) {
  .result dl.group dd.arrow span.up-par span {
    font-size: 2.2rem;
  }
}
.result dl.group dd.arrow span.up-par span.par span,
.result dl.group dd.arrow span.up-par span.par small {
  transform-style: preserve-3d;
  transition-property: filter;
  transition-duration: 100ms;
  transition-timing-function: linear;
  transition-delay: 0ms;
}
.result dl.group dd.arrow span.up-par small {
  font-weight: bold;
}
@media (min-width: 769px) {
  .result dl.group dd.arrow span.up-par small {
    font-size: 2rem;
  }
}
@media (max-width: 768px) {
  .result dl.group dd.arrow span.up-par small {
    font-size: 1.4rem;
  }
}
.result dl.group dd.arrow span.up-par:before {
  content: "";
  display: block;
  background: url("/bev/components/images/icon_charge_arrow.webp") no-repeat center center;
  background-size: cover;
  position: absolute;
  width: 64px;
  height: 12px;
  top: -12px;
  left: calc(50% - 28px);
}
.result dl.group dd.finish {
  flex-basis: 27%;
}
.result dl.group dd.finish .battery {
  transform-style: preserve-3d;
  transition-property: filter;
  transition-duration: 100ms;
  transition-timing-function: linear;
  transition-delay: 0ms;
}
.result dl.group dd .battery-wrap {
  display: block;
  border: 2px solid #999;
  border-radius: 5px;
  position: relative;
}
@media (max-width: 768px) {
  .result dl.group dd .battery-wrap {
    width: 100%;
  }
}
.result dl.group dd .battery-wrap:after {
  content: "";
  position: absolute;
}
@media (min-width: 769px) {
  .result dl.group dd .battery-wrap:after {
    width: 9px;
    height: 20px;
    border: 2px solid #999;
    right: -9px;
    top: calc(50% - 10px);
  }
}
@media (max-width: 768px) {
  .result dl.group dd .battery-wrap:after {
    width: 9px;
    height: 20px;
    border: 2px solid #999;
    right: -9px;
    top: calc(50% - 10px);
  }
}
.result dl.group dd .battery-wrap span.battery {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  border: 4px solid #fff;
  border-radius: 5px;
}
@media (min-width: 769px) {
  .result dl.group dd .battery-wrap span.battery {
    width: 100%;
    height: 50px;
  }
}
@media (max-width: 768px) {
  .result dl.group dd .battery-wrap span.battery {
    width: 100%;
    height: 54px;
  }
}
.result dl.group dd .battery-wrap span.battery.max {
  /* border-color: #98dd9c;
  &:after {
  	background: #98dd9c;
  }
  &:before {
  	opacity: 0;
  }
  .mater {
  	background: #98dd9c;
  	opacity: 0.6;
  } */
}
.result dl.group dd .battery-wrap span.battery:before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background-image: linear-gradient(90deg, transparent 0%, transparent 10%, #ffffff 10%, #ffffff calc(10% + 2px), transparent calc(10% + 2px), transparent 20%, #ffffff 20%, #ffffff calc(20% + 2px), transparent calc(20% + 2px), transparent 30%, #ffffff 30%, #ffffff calc(30% + 2px), transparent calc(30% + 2px), transparent 40%, #ffffff 40%, #ffffff calc(40% + 2px), transparent calc(40% + 2px), transparent 50%, #ffffff 50%, #ffffff calc(50% + 2px), transparent calc(50% + 2px), transparent 60%, #ffffff 60%, #ffffff calc(60% + 2px), transparent calc(60% + 2px), transparent 70%, #ffffff 70%, #ffffff calc(70% + 2px), transparent calc(70% + 2px), transparent 80%, #ffffff 80%, #ffffff calc(80% + 2px), transparent calc(80% + 2px), transparent 90%, #ffffff 90%, #ffffff calc(90% + 2px), transparent calc(90% + 2px), transparent 100%);
}
.result dl.group dd .battery-wrap span.mater {
  top: 0;
  left: 0;
  position: absolute;
  z-index: 0;
  background: #c4e7c6;
  transform-style: preserve-3d;
  transition-property: width, background-color;
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  transition-delay: 0ms;
}
@media (min-width: 769px) {
  .result dl.group dd .battery-wrap span.mater {
    width: 0%;
    height: 100%;
  }
}
@media (max-width: 768px) {
  .result dl.group dd .battery-wrap span.mater {
    width: 0%;
    height: 100%;
  }
}
.result dl.group dd .battery-wrap span.mater.par10 {
  width: 10%;
  background: #e7e7e7;
}
.result dl.group dd .battery-wrap span.mater.par30 {
  width: 30%;
  background: #e7e7e7;
}
.result dl.group dd .battery-wrap span.mater.par60 {
  width: 60%;
  background: #e7e7e7;
}
.result dl.group dd .battery-wrap span.par {
  position: relative;
  z-index: 2;
  text-align: center;
  color: var(--keyColor);
  font-weight: bold;
  text-shadow: 1px 1px 1px #fff, -1px 1px 1px #fff, -1px -1px 1px #fff, 1px -1px 1px #fff;
}
@media (min-width: 769px) {
  .result dl.group dd .battery-wrap span.par {
    line-height: 50px;
  }
}
.result dl.group dd .battery-wrap span.par span {
  display: inline;
  font-size: 20px;
}
.result dl.group dd .battery-wrap span.par small {
  font-size: 16px;
}
.result dl.group dd.change dd.arrow span.par span,
.result dl.group dd.change dd.arrow span.par small {
  filter: brightness(1.5);
}
.result dl.group dd.change dd.finish .battery {
  filter: brightness(1.5);
}
.result dl.group.change dd.arrow span.par span,
.result dl.group.change dd.arrow span.par small {
  filter: brightness(1.1);
}
.result dl.group.change dd.finish .battery .mater {
  filter: brightness(1.1);
}

/* 満充電までの時間 */
dl.full_charge_time {
  padding: 20px 0;
  display: flex;
  border-bottom: 1px solid #ccd7d9;
}
@media (min-width: 769px) {
  dl.full_charge_time dt,
  dl.full_charge_time dd {
    width: 25%;
    box-sizing: border-box;
    line-height: 40px;
  }
}
@media (min-width: 769px) {
  dl.full_charge_time dt {
    padding-left: 4.55%;
    font-size: 12px;
    font-weight: bold;
  }
}
@media (max-width: 768px) {
  dl.full_charge_time dt {
    display: none;
  }
}
dl.full_charge_time dd {
  text-align: center;
  font-size: 14px;
  letter-spacing: 0.06em;
}
@media (min-width: 769px) {
  dl.full_charge_time dd {
    line-height: 40px;
  }
}
@media (max-width: 768px) {
  dl.full_charge_time dd {
    width: 33.3%;
    box-sizing: border-box;
    line-height: 25px;
  }
}
dl.full_charge_time dd strong {
  padding: 0 4px;
  display: inline-block;
  font-size: 24px;
  letter-spacing: 0.06em;
}

/* hr divider */
.hr-divider {
  width: 100%;
  height: 8px;
  background-color: var(--greyK10);
  border: none;
}

/* 月間走行距離選択 */
.monthly-mileage-examples {
  display: flex;
}
@media (min-width: 769px) {
  .monthly-mileage-examples {
    justify-content: center;
    gap: 2.4rem;
    margin-block-end: 4rem;
  }
}
@media (max-width: 768px) {
  .monthly-mileage-examples {
    justify-content: space-around;
    gap: 2.5%;
    margin-block-end: 2rem;
  }
}
.monthly-mileage-examples li {
  border: 1px solid #666;
  border-radius: 5px;
  text-align: center;
  cursor: pointer;
}
@media (min-width: 769px) {
  .monthly-mileage-examples li {
    padding: 1.2rem 2.4rem 3.2rem 2.4rem;
  }
}
@media (max-width: 768px) {
  .monthly-mileage-examples li {
    flex-basis: 30.8333333333%;
    padding: 1rem 1.2rem 3.2rem 1.2rem;
    font-size: 1.2rem;
  }
}
.monthly-mileage-examples li .ex {
  display: block;
}
.monthly-mileage-examples li .monthly-range-area {
  letter-spacing: 0.05em;
}
.monthly-mileage-examples li .monthly-range-area .monthly-range {
  font-size: 120%;
  font-weight: bold;
}
.monthly-mileage-examples li .monthly-range-wrap.mileage-link {
  position: relative;
  display: inline-block;
}
.monthly-mileage-examples li .monthly-range-wrap.mileage-link::after {
  content: "";
  position: absolute;
  width: 24px;
  height: 24px;
  background: url(/assets/images/icn_anchor.svg) no-repeat 0 0/contain;
  top: auto;
  left: 50%;
  transform: translateX(-50%);
  bottom: -24px;
}
.monthly-mileage-examples li .run {
  display: block;
}

/* グラデ エリア */
.bg-dark-blue-grad {
  background: #01406B;
  background: linear-gradient(180deg, rgb(1, 64, 107) 50%, rgb(2, 31, 49) 100%);
  color: var(--white);
  /* .input_title .form-txt-label{
  	@include mixins.sp-layout {
  		font-size: 1.4rem;
  	}
  } */
}
@media (min-width: 769px) {
  .bg-dark-blue-grad {
    padding-block: 4rem;
  }
}
@media (max-width: 768px) {
  .bg-dark-blue-grad {
    padding-block-start: 3rem;
  }
}
.bg-dark-blue-grad .form-txt-box input {
  color: var(--keyColor);
  font-weight: bold;
  font-size: 1.8rem;
}
.bg-dark-blue-grad .form-txt-box input::placeholder {
  color: #666;
  font-weight: normal;
}

/* 費用シミュレーター本体 */
.running-cost-simulator,
.result-section {
  scroll-margin-top: 40px;
}
@media (min-width: 769px) {
  .running-cost-simulator,
  .result-section {
    padding-block: 4rem 0;
  }
}
@media (max-width: 768px) {
  .running-cost-simulator,
  .result-section {
    padding-block: 4rem 1rem;
  }
}
@media (min-width: 769px) {
  .running-cost-simulator .cost-input-wrap,
  .result-section .cost-input-wrap {
    display: block;
    margin: 0 auto 6rem;
  }
}
@media (max-width: 768px) {
  .running-cost-simulator .cost-input-wrap.gas-compare,
  .result-section .cost-input-wrap.gas-compare {
    margin-block: 2rem 3rem;
    padding-inline: 0;
  }
}
.running-cost-simulator .cost-input-inner.gasoline,
.result-section .cost-input-inner.gasoline {
  padding-block: 3rem;
  border-radius: 10px;
  background-color: #1a3d53;
}
@media (min-width: 769px) {
  .running-cost-simulator .cost-input-inner.gasoline,
  .result-section .cost-input-inner.gasoline {
    padding-block: 3rem;
  }
}
@media (max-width: 768px) {
  .running-cost-simulator .cost-input-inner.gasoline,
  .result-section .cost-input-inner.gasoline {
    padding: 3rem 2rem;
  }
}
.running-cost-simulator .cost-input-inner.gasoline .gasoline-comparison-title,
.result-section .cost-input-inner.gasoline .gasoline-comparison-title {
  text-align: center;
}
.running-cost-simulator .cost-input-inner.gasoline .gasoline-comparison-title h3 span,
.result-section .cost-input-inner.gasoline .gasoline-comparison-title h3 span {
  display: inline-block;
  padding-block-end: 1rem;
  border-block-end: 1px solid #fff;
}
.running-cost-simulator .cost-input-inner .cost-input-row,
.result-section .cost-input-inner .cost-input-row {
  display: flex;
  /* &.cost-input-row-main {
  	background-color: #fff;
  	border-radius: 0.5rem;
  	@include mixins.sp-layout {
  		padding: 1rem;
  	}
  	.cost-input-col {
  		width: calc(100% / 2 - (1rem / 2));
  		@include mixins.pc-layout {}
  	}
  } */
}
@media (min-width: 769px) {
  .running-cost-simulator .cost-input-inner .cost-input-row,
  .result-section .cost-input-inner .cost-input-row {
    padding-block-start: 2rem;
  }
}
@media (max-width: 768px) {
  .running-cost-simulator .cost-input-inner .cost-input-row,
  .result-section .cost-input-inner .cost-input-row {
    gap: 2rem 2rem;
    justify-content: space-between;
  }
}
.running-cost-simulator .cost-input-inner .cost-input-row .cost-input-col,
.result-section .cost-input-inner .cost-input-row .cost-input-col {
  display: flex;
  flex-direction: column;
}
@media (min-width: 769px) {
  .running-cost-simulator .cost-input-inner .cost-input-row .cost-input-col,
  .result-section .cost-input-inner .cost-input-row .cost-input-col {
    gap: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .running-cost-simulator .cost-input-inner .cost-input-row .cost-input-col .form-txt-box,
  .result-section .cost-input-inner .cost-input-row .cost-input-col .form-txt-box {
    margin-block-start: 0.4rem;
  }
}
.running-cost-simulator .cost-input-inner .cost-input-row .cost-input-col .home_or_outing_wrap,
.result-section .cost-input-inner .cost-input-row .cost-input-col .home_or_outing_wrap {
  display: flex;
  gap: 1rem;
  flex: 1;
}
.running-cost-simulator .cost-input-inner .cost-input-row .cost-input-col .home_or_outing_wrap label,
.result-section .cost-input-inner .cost-input-row .cost-input-col .home_or_outing_wrap label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}
.running-cost-simulator .cost-input-inner .cost-input-row .cost-input-col .home_or_outing_wrap label input[type=radio],
.result-section .cost-input-inner .cost-input-row .cost-input-col .home_or_outing_wrap label input[type=radio] {
  display: initial;
  accent-color: var(--keyColor);
  color: var(--keyColor);
  inline-size: 1.5em;
  block-size: 1.5em;
}
.running-cost-simulator .cost-input-inner .cost-input-row .cost-input-col .home_or_outing_wrap label sup,
.result-section .cost-input-inner .cost-input-row .cost-input-col .home_or_outing_wrap label sup {
  position: relative;
}
@media (min-width: 769px) {
  .running-cost-simulator .cost-input-inner .cost-input-row .cost-input-col .home_or_outing_wrap label sup,
  .result-section .cost-input-inner .cost-input-row .cost-input-col .home_or_outing_wrap label sup {
    top: -3px;
    left: -2px;
  }
}
@media (max-width: 768px) {
  .running-cost-simulator .cost-input-inner .cost-input-row .cost-input-col .home_or_outing_wrap label sup,
  .result-section .cost-input-inner .cost-input-row .cost-input-col .home_or_outing_wrap label sup {
    top: -3px;
    left: -2px;
  }
}
@media (min-width: 769px) {
  .running-cost-simulator .cost-input-inner .cost-input-row.cost-input-row-detail,
  .result-section .cost-input-inner .cost-input-row.cost-input-row-detail {
    justify-content: space-between;
  }
}
@media (max-width: 768px) {
  .running-cost-simulator .cost-input-inner .cost-input-row.cost-input-row-detail,
  .result-section .cost-input-inner .cost-input-row.cost-input-row-detail {
    flex-wrap: wrap;
  }
}
@media (min-width: 769px) {
  .running-cost-simulator .cost-input-inner .cost-input-row.cost-input-row-detail .cost-input-col,
  .result-section .cost-input-inner .cost-input-row.cost-input-row-detail .cost-input-col {
    flex-basis: 26%;
  }
}
@media (max-width: 768px) {
  .running-cost-simulator .cost-input-inner .cost-input-row.cost-input-row-detail .cost-input-col,
  .result-section .cost-input-inner .cost-input-row.cost-input-row-detail .cost-input-col {
    flex-basis: calc(50% - 2rem);
    flex-grow: 1;
  }
}
@media (min-width: 769px) {
  .running-cost-simulator .cost-input-inner .cost-input-row.cost-input-row-detail .cost-input-col.pc-layout-ajust,
  .result-section .cost-input-inner .cost-input-row.cost-input-row-detail .cost-input-col.pc-layout-ajust {
    flex-basis: 40%;
    display: flex;
    justify-content: space-between;
  }
  .running-cost-simulator .cost-input-inner .cost-input-row.cost-input-row-detail .cost-input-col.pc-layout-ajust .pc-layout-ajust-inner,
  .result-section .cost-input-inner .cost-input-row.cost-input-row-detail .cost-input-col.pc-layout-ajust .pc-layout-ajust-inner {
    display: flex;
    justify-content: space-between;
  }
  .running-cost-simulator .cost-input-inner .cost-input-row.cost-input-row-detail .cost-input-col.pc-layout-ajust .pc-layout-ajust-inner .home_or_outing_wrap,
  .result-section .cost-input-inner .cost-input-row.cost-input-row-detail .cost-input-col.pc-layout-ajust .pc-layout-ajust-inner .home_or_outing_wrap {
    display: flex;
    flex-direction: column;
  }
  .running-cost-simulator .cost-input-inner .cost-input-row.cost-input-row-detail .cost-input-col.pc-layout-ajust .pc-layout-ajust-inner .pc-width-ajust,
  .result-section .cost-input-inner .cost-input-row.cost-input-row-detail .cost-input-col.pc-layout-ajust .pc-layout-ajust-inner .pc-width-ajust {
    width: 65%;
  }
}
.running-cost-simulator .cost-input-inner .cost-input-row.cost-input-row-detail .cost-input-col .select-wrap,
.result-section .cost-input-inner .cost-input-row.cost-input-row-detail .cost-input-col .select-wrap {
  width: auto;
}
@media (max-width: 768px) {
  .running-cost-simulator .cost-input-inner .cost-input-row.cost-input-row-detail .cost-input-col .select-wrap,
  .result-section .cost-input-inner .cost-input-row.cost-input-row-detail .cost-input-col .select-wrap {
    height: 56px;
  }
}
@media (max-width: 768px) {
  .running-cost-simulator .cost-input-inner .cost-input-row.cost-input-row-detail .cost-input-col .sp-width-ajust,
  .result-section .cost-input-inner .cost-input-row.cost-input-row-detail .cost-input-col .sp-width-ajust {
    width: calc(50% - 1rem);
  }
}
@media (min-width: 769px) {
  .running-cost-simulator .cost-input-inner .cost-input-row.cost-input-row-gasoline,
  .result-section .cost-input-inner .cost-input-row.cost-input-row-gasoline {
    justify-content: center;
    align-items: center;
    gap: 3.2rem;
  }
}
@media (max-width: 768px) {
  .running-cost-simulator .cost-input-inner .cost-input-row.cost-input-row-gasoline,
  .result-section .cost-input-inner .cost-input-row.cost-input-row-gasoline {
    padding-inline: 0;
  }
}
@media (min-width: 769px) {
  .running-cost-simulator .cost-input-inner .cost-input-row.cost-input-row-gasoline .cost-input-col,
  .result-section .cost-input-inner .cost-input-row.cost-input-row-gasoline .cost-input-col {
    width: calc(25% - 0.5rem);
  }
}
@media (max-width: 768px) {
  .running-cost-simulator .cost-input-inner .cost-input-row.cost-input-row-gasoline .cost-input-col,
  .result-section .cost-input-inner .cost-input-row.cost-input-row-gasoline .cost-input-col {
    width: calc(50% - 0.5rem);
    max-width: 30rem;
  }
}
.running-cost-simulator .cost-input-inner .form-txt-label,
.result-section .cost-input-inner .form-txt-label {
  color: #fff;
}
@media (min-width: 769px) {
  .running-cost-simulator .cost-input-inner .form-txt-label,
  .result-section .cost-input-inner .form-txt-label {
    font-size: 1.8rem;
  }
}
@media (max-width: 768px) {
  .running-cost-simulator .cost-input-inner .form-txt-label,
  .result-section .cost-input-inner .form-txt-label {
    font-size: 1.6rem;
  }
  .running-cost-simulator .cost-input-inner .form-txt-label sup,
  .result-section .cost-input-inner .form-txt-label sup {
    font-size: 65%;
  }
}
@media (max-width: 768px) {
  .running-cost-simulator .cost-input-inner .form-txt-label.ffsting,
  .result-section .cost-input-inner .form-txt-label.ffsting {
    font-feature-settings: "palt";
  }
}
.running-cost-simulator .cost-input-inner .form-txt-label.ffsting sup,
.result-section .cost-input-inner .form-txt-label.ffsting sup {
  font-weight: normal;
}
@media (min-width: 769px) {
  .running-cost-simulator .cost-input-inner .form-txt-label.ffsting sup,
  .result-section .cost-input-inner .form-txt-label.ffsting sup {
    font-size: 70%;
  }
}
.running-cost-simulator .cost-input-inner .form-txt-label .note,
.result-section .cost-input-inner .form-txt-label .note {
  font-weight: normal;
}
@media (min-width: 769px) {
  .running-cost-simulator .cost-input-inner .form-txt-label .note,
  .result-section .cost-input-inner .form-txt-label .note {
    font-size: 1.4rem;
  }
}
@media (max-width: 768px) {
  .running-cost-simulator .cost-input-inner .form-txt-label .note,
  .result-section .cost-input-inner .form-txt-label .note {
    font-size: 1rem;
  }
}
.running-cost-simulator .cost-input-inner .error_message,
.result-section .cost-input-inner .error_message {
  margin-block-end: 0.25rem;
  font-size: 1.4rem;
  color: var(--redStrong);
  text-align: center;
  display: none;
}
.running-cost-simulator .cost-input-inner .error_message.error_show,
.result-section .cost-input-inner .error_message.error_show {
  display: block;
}
.running-cost-simulator .cost-input-inner .unit,
.result-section .cost-input-inner .unit {
  font-size: 1.2rem;
  margin-block-start: 0.5rem;
  text-align: center;
}
@media (max-width: 768px) {
  .running-cost-simulator .btn-wrap,
  .result-section .btn-wrap {
    margin-inline: auto;
    padding-block-end: 3rem;
    max-width: 100%;
  }
}
.running-cost-simulator .btn-wrap .btn-nml.wht,
.result-section .btn-wrap .btn-nml.wht {
  color: var(--keyColor);
  background-color: #fff;
  position: relative;
}
.running-cost-simulator .btn-wrap .btn-nml.wht::before, .running-cost-simulator .btn-wrap .btn-nml.wht::after,
.result-section .btn-wrap .btn-nml.wht::before,
.result-section .btn-wrap .btn-nml.wht::after {
  content: "";
  width: 1px;
  height: 14px;
  border-radius: 9999px;
  background-color: var(--keyColor);
  transform-origin: 50% calc(100% - 1px);
  position: absolute;
  right: 32px;
  top: calc(50% - 7px);
}
.running-cost-simulator .btn-wrap .btn-nml.wht::before,
.result-section .btn-wrap .btn-nml.wht::before {
  transform: rotate(45deg);
}
.running-cost-simulator .btn-wrap .btn-nml.wht::after,
.result-section .btn-wrap .btn-nml.wht::after {
  transform: rotate(-45deg);
}
.running-cost-simulator .denpi-info,
.result-section .denpi-info {
  border: 1px solid #fff;
  border-radius: 5px;
  font-size: 1.6rem;
  cursor: pointer;
}
@media (min-width: 769px) {
  .running-cost-simulator .denpi-info,
  .result-section .denpi-info {
    padding-inline: 3.2rem;
  }
}
.running-cost-simulator .denpi-info .acc-wrap.nml-acc-wrap,
.result-section .denpi-info .acc-wrap.nml-acc-wrap {
  border: none;
}
.running-cost-simulator .denpi-info .acc-wrap.nml-acc-wrap .triggle,
.result-section .denpi-info .acc-wrap.nml-acc-wrap .triggle {
  display: block;
  padding: 26px 56px 26px;
  font-size: 1.6rem;
  color: var(--white);
}
.running-cost-simulator .denpi-info .acc-wrap.nml-acc-wrap .triggle::before,
.result-section .denpi-info .acc-wrap.nml-acc-wrap .triggle::before {
  background: #fff;
  right: 8px;
}
.running-cost-simulator .denpi-info .acc-wrap.nml-acc-wrap .triggle::after,
.result-section .denpi-info .acc-wrap.nml-acc-wrap .triggle::after {
  background: #fff;
  right: 16px;
  transform: translate(0);
}
.running-cost-simulator .denpi-info .nml-toggle-icn::before,
.running-cost-simulator .denpi-info .nml-toggle-icn::after,
.result-section .denpi-info .nml-toggle-icn::before,
.result-section .denpi-info .nml-toggle-icn::after {
  background-color: var(--white);
}
.running-cost-simulator .denpi-info table,
.result-section .denpi-info table {
  margin-block-start: 0.5rem;
  border: 1px solid #fff;
  border-collapse: collapse;
}
.running-cost-simulator .denpi-info table th,
.running-cost-simulator .denpi-info table td,
.result-section .denpi-info table th,
.result-section .denpi-info table td {
  border: 1px solid #fff;
  border-collapse: collapse;
  padding: 0.4rem 1.6rem;
  font-size: 1.2rem;
}
.running-cost-simulator .denpi-info p,
.result-section .denpi-info p {
  margin-block-start: 0.8rem;
}
.running-cost-simulator .denpi-info p:last-child,
.result-section .denpi-info p:last-child {
  margin-block-end: 0.5rem;
}
.running-cost-simulator .denpi-info .title,
.result-section .denpi-info .title {
  margin-block-start: 1.6rem;
  font-size: 1.6rem;
  font-weight: bold;
}
.running-cost-simulator .denpi-info .txt-note,
.result-section .denpi-info .txt-note {
  font-size: 1.4rem;
}
.running-cost-simulator .denpi-info .underline,
.result-section .denpi-info .underline {
  text-decoration: underline;
}
.running-cost-simulator .denpi-info .emphasis,
.result-section .denpi-info .emphasis {
  color: #4adfff;
}
.running-cost-simulator .note-list,
.result-section .note-list {
  color: var(--white);
}

.result-section .cost-result {
  padding: 2rem;
  background-color: var(--white);
  border-radius: 0.5rem;
  color: var(--keyColor);
  background-color: #d7f5f9;
}
@media (min-width: 769px) {
  .result-section .cost-result {
    text-align: center;
  }
}
.result-section .cost-result .cost-result-text {
  font-weight: bold;
}
@media (min-width: 769px) {
  .result-section .cost-result .cost-result-text {
    font-size: 2rem;
  }
}
@media (max-width: 768px) {
  .result-section .cost-result .cost-result-text {
    font-size: 1.8rem;
  }
}
@media (min-width: 769px) {
  .result-section .cost-result .cost-result-text .cost-price {
    margin-inline: 0.2em;
    font-size: 5rem;
  }
}
@media (max-width: 768px) {
  .result-section .cost-result .cost-result-text .cost-price {
    margin-inline-end: 0.2em;
    font-size: 4rem;
    line-height: 1.4;
  }
}
.result-section .comparison_result_wrap {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
@media (min-width: 769px) {
  .result-section .comparison_result_wrap {
    margin-block-start: 6rem;
  }
}
@media (max-width: 768px) {
  .result-section .comparison_result_wrap {
    padding-block-end: 2.4rem;
  }
}
.result-section .comparison_result_wrap .comparison_result_row {
  max-width: 500px;
  width: 100%;
  margin-inline: auto;
  display: flex;
  align-items: center;
  flex-direction: row;
  font-weight: bold;
}
@media (min-width: 769px) {
  .result-section .comparison_result_wrap .comparison_result_row {
    gap: 4rem;
    font-size: 1.8rem;
    padding-inline: 3rem;
  }
}
@media (max-width: 768px) {
  .result-section .comparison_result_wrap .comparison_result_row {
    gap: 2rem;
    font-size: 1.4rem;
  }
}
.result-section .comparison_result_wrap .comparison_result_row .comparison_result_col {
  display: flex;
}
.result-section .comparison_result_wrap .comparison_result_row .comparison_result_col:first-child {
  flex: 1;
}
.result-section .comparison_result_wrap .comparison_result_row .comparison_result_col .comparison_result_title {
  white-space: nowrap;
}
.result-section .comparison_result_wrap .comparison_result_row .comparison_result_col .comparison_result_price span {
  margin-inline-end: 0.5em;
}
@media (min-width: 769px) {
  .result-section .comparison_result_wrap .comparison_result_row .comparison_result_col .comparison_result_price span {
    font-size: 3rem;
  }
}
@media (max-width: 768px) {
  .result-section .comparison_result_wrap .comparison_result_row .comparison_result_col .comparison_result_price span {
    font-size: 2.4rem;
  }
}
@media (min-width: 769px) {
  .result-section .comparison_result_wrap .comparison_result_row.comparison_result_row-diff {
    border-top: 2px solid #fff;
    padding-block-start: 2rem;
    margin-block-start: 2rem;
  }
}
@media (max-width: 768px) {
  .result-section .comparison_result_wrap .comparison_result_row.comparison_result_row-diff {
    border-top: 1px solid #fff;
    padding-block-start: 1rem;
    margin-block-start: 1rem;
  }
}
.result-section .comparison_result_wrap .comparison_result_row.comparison_result_row-diff .comparison_result_price span {
  color: #4adfff;
}

/* HTML5 スピナー非表示 */
/* Firefox *//*# sourceMappingURL=simulator.css.map */