@charset "utf-8";

/* pages/energyfees.css  —  /plan/basicplan/energyfees */

.page-energyfees {
  /* Figma のトークンに無い黄緑。この2色はこのページ専用 */
  --c-energy-green: #88c912;

  .energyfees-lead {
    margin-top: var(--sp-2xl);
    font-size: var(--fs-md);
    line-height: 1.7;
  }

  /* --- 3つの費用のカード --- */
  .energyfees-cost-list {
    margin-top: var(--sp-lg);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-2xs);

    @media (max-width: 1023px) {
      grid-template-columns: 1fr;
      gap: var(--sp-lg);
    }
  }

  .energyfees-cost {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 2px solid var(--cost-color);
    border-radius: var(--radius-md);

    /* カード間の ＋（カード外にはみ出すので overflow: hidden は使えない。
       見出しの角丸は .energyfees-cost-head 側で付ける） */
    &:not(:last-child)::after {
      content: "＋";
      position: absolute;
      top: 50%;
      right: -18px;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      border-radius: var(--radius-full);
      border: 2px solid var(--c-white);
      background: var(--c-bg-info-icon);
      font-size: var(--fs-xl);
      font-weight: 700;
      line-height: 1;

      @media (max-width: 1023px) {
        top: auto;
        right: 50%;
        bottom: -28px;
        transform: translateX(50%);
      }
    }
  }

  .energyfees-cost-capacity {
    --cost-color: var(--c-blue);
  }

  .energyfees-cost-green {
    --cost-color: var(--c-energy-green);
  }

  .energyfees-cost-adjust {
    --cost-color: var(--c-red);
  }

  .energyfees-cost-head {
    padding: var(--sp-xs) var(--sp-sm);
    /* 2px ボーダーの内側なので radius-md - 2px */
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-sm);
    align-items: center;
    justify-content: center;
    background: var(--cost-color);
    color: var(--c-white);
    font-size: var(--fs-base);
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
  }

  .energyfees-cost-num {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-xs);
    background: var(--c-white);
    color: var(--c-text);
    font-family: var(--font-num);
    font-size: var(--fs-base);
    font-weight: 700;
    line-height: 1;
  }

  .energyfees-cost-body {
    flex: 1;
    padding: var(--sp-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-base);
    line-height: 1.8;
    text-align: center;
  }

  /* --- 当月の単価についてのお知らせ --- */
  .energyfees-notice {
    margin-top: var(--sp-md);
    padding: var(--sp-lg);
    display: flex;
    flex-direction: column;
    gap: var(--sp-md);
    border: 2px solid var(--c-border);
    border-radius: var(--radius-md);

    p {
      line-height: 1.7;
    }

    @media (max-width: 1023px) {
      p {
        font-size: var(--fs-base);
      }
    }
  }

  /* --- 各費用の詳細 --- */
  .energyfees-detail {
    margin-top: var(--sp-2xl);
    padding: var(--sp-lg);
    display: flex;
    flex-direction: column;
    gap: var(--sp-lg);
    background: var(--c-bg-gray);

    @media (max-width: 1023px) {
      padding: var(--sp-md);
    }
  }

  .energyfees-detail-item {
    padding: var(--sp-lg);
    display: flex;
    flex-direction: column;
    gap: var(--sp-md);
    border-radius: var(--radius-xl);
    background: var(--c-white);

    @media (max-width: 1023px) {
      padding: var(--sp-md);
    }
  }

  .energyfees-detail-title {
    display: flex;
    gap: var(--sp-sm);
    align-items: center;
    font-size: var(--fs-xl);
    font-weight: 700;
    line-height: 1.25;
  }

  .energyfees-detail-num {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    border-radius: var(--radius-xs);
    color: var(--c-white);
    font-size: var(--fs-md);
    font-weight: 700;
    line-height: 1;
  }

  .energyfees-detail-num-capacity {
    background: var(--c-blue);
  }

  .energyfees-detail-num-green {
    background: var(--c-energy-green);
  }

  .energyfees-detail-num-adjust {
    background: var(--c-red);
  }

  .energyfees-detail-subtitle {
    padding-left: 28px;
    font-size: var(--fs-md);
    font-weight: 700;
    line-height: 1.25;
    background: url(../../images/common/icon-thunder.svg) no-repeat left
      center / 16px auto;
  }

  .energyfees-note-list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2xs);

    li {
      font-size: var(--fs-base);
      line-height: 1.5;
      color: var(--c-note);
    }
  }

  .energyfees-note-list-tight {
    margin-top: calc(var(--sp-xs) * -1);
  }

  /* --- 基準価格帯の図 --- */
  .energyfees-range {
    padding: var(--sp-md);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
  }

  .energyfees-range-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    @media (max-width: 1023px) {
      grid-template-columns: 1fr;
      gap: var(--sp-md);
    }
  }

  .energyfees-range-col {
    display: flex;
    flex-direction: column;
    gap: var(--sp-xs);
  }

  .energyfees-range-box {
    padding: var(--sp-md) var(--sp-xs);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2xs);
    height: 78px;
    justify-content: center;

    @media (max-width: 1023px) {
      height: auto;
      border-radius: var(--radius-md);
    }
  }

  .energyfees-range-box-under {
    border-radius: var(--radius-md) 0 0 var(--radius-md);
    background: var(--c-blue-light);
  }

  .energyfees-range-box-within {
    background: var(--c-yellow-light);
  }

  .energyfees-range-box-over {
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    background: var(--c-red-light);
  }

  .energyfees-range-box-title {
    font-size: var(--fs-base);
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
  }

  .energyfees-range-box-text {
    font-size: var(--fs-base);
    line-height: 1.5;
    text-align: center;
  }

  .energyfees-range-limit {
    font-size: var(--fs-sm);
    font-weight: 700;
    line-height: 1.5;
    text-align: right;
  }

  .energyfees-range-summary {
    margin-top: var(--sp-md);
    font-size: var(--fs-md);
    line-height: 1.5;
    text-align: center;
  }

  /* --- 調整単価の考え方 --- */
  .energyfees-policy {
    padding: var(--sp-md);
    display: flex;
    flex-direction: column;
    gap: var(--sp-xs);
    border-radius: var(--radius-md);
    background: var(--c-yellow-light);

    ul {
      display: flex;
      flex-direction: column;
      gap: var(--sp-xs);
    }

    li {
      font-size: var(--fs-md);
      line-height: 1.5;
    }
    @media (max-width: 1023px) {
      li {
        font-size: var(--fs-base);
      }
    }
  }

  .energyfees-policy-title {
    font-size: var(--fs-md);
    font-weight: 700;
    line-height: 1.75;
  }

  .btn-secondary {
    margin-top: var(--sp-2xl);
  }
}