/*# sourceMappingURL=style.css.map */

.battery-top__button-icon {
  margin-left: 0;
}

.benefits {
  width: 920px;
  margin: 0 auto;
  padding: 80px 0 100px;
}
.benefits__header {
  margin-bottom: 40px;
}
.benefits__list {
  display: flex;
  gap: 22px;
  align-items: stretch;
}

.benefits__item {
  flex: 1 1 0;
  min-width: 0;
  padding: 16px 16px 34px;
  display: flex;
  flex-direction: column;
}

.benefit-card__header {
  text-align: center;
  margin-bottom: 10px;
}
.benefit-card__icon {
  width: 53px;
  height: 53px;
  display: inline-block;
}
.benefit-card__title {
  margin: 12px 0 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
}

.benefit-card__text {
  margin: 0;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.4;
  letter-spacing: 0.75px;
}
/* =================
  必要な容量の目安
  ====================*/
.capacity-guide th {
  text-align: left;
  font-weight: 500;
}
.capacity-guide {
  width: 940px;
  margin: 0 auto;
  padding-block: 80px;
}
.capacity-guide__container {
  padding: 56px 60px 59px;
}
.breakdown-table__capacity-guide {
  width: 798px;
  padding: 0;
}
.info-panel {
  background: linear-gradient(90deg, #0392fe 0%, #27d6ff 100%);
  color: #ffffff;
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  padding: 16px 13px 21px;
  margin-top: 15px;
}
.info-panel__badge {
  font-size: 16px;
}
.info-panel__emphasis {
  margin: 0 0 clamp(10px, 2.2vw, 18px);
}
.info-panel__range {
  display: inline-flex;
  align-items: baseline;
  font-weight: 900;
  line-height: 1.4;
  font-size: 20px;
  margin-top: 8px;
}
.info-panel__num {
  font-size: 56px;
  line-height: 1;
  font-weight: 700;
  font-style: italic;
  font-family: "Inter";
}

.info-panel__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 400;
}

.info-panel__recommend {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #ffffff;
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: 0;
}
.info-panel__label {
  font-weight: 700;
}
.data-table__cell--content-total {
  background-color: #a5e7ff;
}
/* =======================
  導入費用と投資回収シミュレーション
  ==========================*/
.cost-summary {
  padding-top: 80px;
  width: 940px;
  margin: 0 auto;
}

.cost-summary__columns {
  display: flex;
  gap: 10px;
  align-items: stretch;
  margin-top: 36px;
}
.cost-summary__column {
  flex: 1 1 0;
  min-width: 0;
}

/* =================================
    左：導入費用の目安
  ================================= */
.estimate-card {
  padding: 32px 30px 50px;
}
.estimate-card__title {
  margin: 0 0 14px;
}
.estimate-list {
  margin: 0;
}
.estimate-list__row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 18px;
  padding: 9px 0;
  border-bottom: 2px solid #e9f3fa;
}

.estimate-list__term {
  margin: 0;
}
.estimate-list__capacity {
  display: block;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.4;
}
.estimate-list__note {
  display: block;
  margin-top: 2px;
  font-size: 14px;
  line-height: 1.4;
  color: #b2b2b2;
}
.estimate-list__value {
  margin: 0;
  text-align: right;
  font-weight: 700;
  line-height: 1.4;
  font-size: 20px;
}
.price {
  font-size: 20px;
  line-height: 1.4;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.estimate-card__footnote {
  margin: 15px 0 0;
  font-size: 14px;
}

/* =================================
    右：投資回収期間
  ================================= */
.payback-card {
  padding: 32px 26px 36px;
  background: #eaf7ff;
}
.payback-card__title {
  margin: 0 0 14px;
}

.payback-list {
  margin: 0;
  padding: 8px 0;
}
.payback-list__row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 18px;
  padding-bottom: 10px;
}
.payback-list__row--divider {
  border-bottom: 2px solid #d8e9f7;

  margin-bottom: 7px;
}
.payback-list__row--highlight {
  background-color: #ffffff;
  padding: 8px 10px;
  margin-top: 5px;
}
.payback-list__term {
  margin: 0;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.4;
}
.payback-list__term--box {
  display: inline-block;
}

.payback-list__value {
  margin: 0;
  text-align: right;
  font-weight: 900;
  color: #202531;
}
.section-header .section-header__subtitle {
  margin-bottom: 20px;
}
.application-flow__lead br {
  display: none;
}

.badge--minus {
  background: transparent;
  color: #1dc2ff;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.4;
  padding: 0;
}

.payback-card__years {
  background: #ffe248;
  font-weight: 700;
  font-size: 20px;
  padding: 0 2px 2px;
}

.payback-card__footnote {
  font-size: 14px;
}
/*=================
   接続方式の比較 
   ==================*/
.connection-types {
  padding-top: 103px;
}
.connection-types__subtitle {
  margin-bottom: 5px !important;
}
.connection-types__options__container .badge--pop::before {
  right: 74%;
}
.connection-types__options__container .badge--pop::after {
  left: 76%;
}
.feature-list__item {
  margin-bottom: 5px;
  font-size: 16px;
}

/* =====================
  主要メーカー比較
  ========================*/
.manufacturers-comparison th {
  font-weight: 500;
}
.manufacturers-comparison__container {
  padding-bottom: 80px;
}
.manufacturers-comparison {
  margin-top: 80px;
  text-align: center;
}
.manufacturers-comparison__table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.manufacturers-comparison__suntitle {
  margin-bottom: 18px;
}

.manufacturers-comparison__breakdown-table {
  width: 948px;
  margin-top: -11px;
}

.manufacturers-comparison__breakdown-table th,
.manufacturers-comparison__breakdown-table td {
  text-align: center;
  padding: 12px 32px;
  justify-content: space-between;
}
.manufacturers-comparison__breakdown-table th {
  width: 23%;
}
.comparison-table__body .data-table__row th,
.comparison-table__body .data-table__row td {
  height: 69px;
}
.comparison-table__body .data-table__cell--content-dark {
  background-color: #a5e7ff;
}

.manufacturers-comparisondata-table__cell--label {
  width: 129px;
}

.data-table__text {
  width: 18%;
  text-align: center;
}
.data-table__text span {
  font-size: 12px;
}
/* =====================
  導入事例
  ========================*/
.case-examples {
  padding: 80px 0 100px;
}
.case-card__badge {
  background-color: #ddf6ff;
  font-size: 14px;
}
.case-examples__container {
  max-width: 940px;
  margin: 0 auto;
  padding-inline: 1rem;
}
.case-examples__list {
  display: flex;
  gap: 10px;
  align-items: stretch;
  margin-top: 37px;
}
.case-examples__item {
  flex: 1 1 0;
  min-width: 0;
  padding: 39px 30px 41px;
}

.case-card__header {
  margin-bottom: 10px;
}
.case-card__badge {
  margin: 0 0 10px;
}
.case-card__title {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 1.2px;
}

.spec-list {
  margin: 16px 0 0;
}
.spec-list__row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 18px;
  padding-bottom: 5px;
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(118, 172, 192, 0.6);
}
.spec-list__term {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
}
.spec-list__desc {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
}
.spec-list__badge {
  background: #ffe248;
  font-size: 16px;
  padding: 0 4px 2px;
}

.case-card__voice {
  display: grid;
  grid-template-columns: 72px 1fr;
  align-items: center;
  gap: 8px;
  margin: 18px 0 0;
}
.voice {
  margin: 0;
}
.voice__avatar {
  width: 67px;
  height: 67px;
  border-radius: 50%;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);

  background: #fefefe;
}

.voice__text {
  margin: 0;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.4;
}
/* =========================
    Section: 蓄電池導入時の注意点
  ========================= */
.battery-cautions {
  padding-bottom: 100px;
  margin-bottom: 100px;
}
.battery-cautions__suntitle {
  margin-bottom: 34px;
}
.battery-cautions__container {
  max-width: 920px;
  margin: 0 auto;
  padding-inline: 1rem;
}

.battery-cautions__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: block;
  margin-top: 40px;
}
.caution-list__item + .caution-list__item {
  margin-top: 24px;
}

.card {
  border: 1px solid #e7edf4;
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}
.caution-card {
  padding: 30px 40px 30px 30px;
}

.caution-card__inner {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(16px, 3vw, 28px);
  align-items: center;
}

.caution-card__icon {
  display: inline-block;
  width: 130px;
  height: 130px;
  padding: 31px 28px 25px;
  border-radius: 50%;
  background: #eaf7ff;
}

.caution-card__header {
  display: flex;
  align-items: baseline;
  gap: 19px;
  margin: 0 0 11px;
}
.number-badge,
.caution-card__number {
  margin: 0;
  font-family: "Inter";
  font-size: 40px;
  line-height: 1;
  font-weight: 700;
  font-style: italic;
  color: #ffe248;
}
.caution-card__title {
  margin: 0;
  font-size: 25px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 1.25px;
}

.caution-card__text {
  margin: 0;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: 0.8px;
}
@media (max-width: 991px) {
  /* =========================
    蓄電池が必要な理由
    ========================= */
  .benefits {
    width: 92.83vw;
  }
  /* =========================
    必要な容量の目安
    ========================= */
  .capacity-guide {
    width: 92.83vw;
  }
  .breakdown-table__capacity-guide {
    width: 80.5vw;
  }
  .capacity-guide__container {
    padding: 56px 0 80px;
  }
  .info-panel {
    width: 84%;
    margin: 15px auto 0;
  }
  /* =========================
    導入費用と投資回収シミュレーション
    ========================= */
  .cost-summary {
    width: 92.83vw;
  }
  /* =========================
    接続方式の比較
    ========================= */
  .comparison-card {
    height: 100%;
    width: 100%;
  }
  /* =========================
    主要メーカー比較
    ========================= */
  .manufacturers-comparison__breakdown-table {
    padding: 0 16px;
  }
}
@media (max-width: 768px) {
  /* =========================
    蓄電池が必要な理由
    ========================= */
  .benefits__list {
    gap: 1vw;
  }
  /* =========================
    主要メーカー比較
    ========================= */
  .manufacturers-comparison__breakdown-table {
    font-size: 16px;
  }
  /* =========================
    Section: 蓄電池導入時の注意点
  ========================= */
  .battery-cautions {
    margin-bottom: 40px;
  }
}
@media (max-width: 600px) {
  /* =========================
    蓄電池が必要な理由
    ========================= */
  .benefits__list {
    flex-direction: column;
    gap: 24px;
  }
  .benefits__item {
    flex: none;
  }
  /* =========================
    導入費用と投資回収シミュレーション
    ========================= */
  .cost-summary__columns {
    flex-direction: column;
  }
  .cost-summary__column {
    flex: none;
  }
  /* =========================
    接続方式の比較
    ========================= */
  .card {
    overflow: visible;
  }
  /* =========================
    導入事例
    ========================= */
  .case-examples__list {
    flex-direction: column;
    gap: 24px;
  }
  /*
     =========================
    導入時の注意点
    ========================= */
  .caution-card__icon {
    width: 14.3vw;
    height: 14.3vw;
    padding: 4.16vw 3.66vw 3.16vw;
  }
  .caution-card__inner {
    align-items: start;
  }
  .number-badge,
  .caution-card__number {
    font-size: 6.66vw;
  }
  .caution-card__title {
    font-size: max(20px, 4.16vw);
  }
}
@media (max-width: 425px) {
  /* =========================
    蓄電池が必要な理由
    ========================= */
  .benefits {
    padding-bottom: 39px;
  }
  .benefits__header {
    margin-bottom: 20px;
  }
  .benefit-card__title {
    margin-top: 11px;
  }
  .benefits__item {
    padding-bottom: 12px;
  }
  /* =========================
    必要な容量の目安
    ========================= */
  .capacity-guide th {
    text-align: center;
  }
  .capacity-guide {
    padding-block: 39px;
  }
  .capacity-guide__container {
    padding: 38px 0 48px;
  }
  .application-flow__lead br {
    display: block;
  }
  .info-panel__range {
    font-size: 5vw;
  }
  .info-panel__num {
    font-size: 14vw;
  }
  .info-panel {
    width: 90%;
  }
  /* =========================
    導入費用と投資回収シミュレーション
    ========================= */
  .cost-summary {
    padding-top: 34px;
  }
  .cost-summary__columns {
    margin-top: 0;
    gap: 24px;
  }
  .estimate-card {
    padding-bottom: 19px;
  }
  /* =========================
    接続方式の比較
    ========================= */
  .connection-types__list {
    gap: 12px;
  }
  .connection-types {
    padding-top: 38px;
    width: 92%;
    margin: 0 auto;
  }
  .comparison-card__body {
    width: 87%;
  }
  /* =========================
    主要メーカー比較
    ========================= */
  .manufacturers-comparison {
    margin-top: 54px;
  }
  .manufacturers-comparison__data-table__row {
    display: flex;
  }
  .manufacturers-comparison__breakdown-table {
    width: 948px;
  }
  .manufacturers-comparison__breakdown-table th {
    width: 219px;
  }
  .manufacturers-comparison__breakdown-table td {
    width: 702px;
  }
  .data-table__header th,
  .data-table__header td {
    padding-block: 27px;
  }
  .manufacturers-comparisondata-table__cell--label,
  .manufacturers-comparisondata-data-table__cell--content {
    font-size: 16px;
  }
  .manufacturers-comparison__container {
    padding-bottom: 31px;
  }

  .comparison-table__body .data-table__cell--content {
    font-size: 16px;
  }
  /*
     =========================
    導入事例
    ========================= */
  .case-examples {
    padding: 40px 0 49px;
  }
  .case-examples__list {
    margin-top: 22px;
  }
  .case-examples__item {
    padding: 26px 23px 27px;
  }
  /*
     =========================
    導入時の注意点
    ========================= */
  .battery-cautions__list {
    margin-top: 23px;
  }
  .caution-card__icon {
    width: 45px;
    height: 45px;
    padding: 10px 9px 8px;
  }
  .caution-card__header {
    margin-bottom: 0;
    margin-top: 5px;
    align-items: center;
  }
  .caution-card__text {
    width: 120%;
    margin-left: -52px;
    margin-top: 19px;
  }
  .number-badge,
  .caution-card__number {
    font-size: 10.25vw;
  }
  .caution-card__title {
    font-size: 6.41vw;
  }
  .caution-card {
    padding: 30px 23px 30px 21px;
  }
  .caution-card__inner {
    gap: 10px;
  }
}