@charset "utf-8";

/*
費用相場 2026.01.06
*/
/* 汎用パーツに移行予定 */
.cmn_container {
  /* cta2 */
  .cmn_cta2 {
    .cmn_cta_box {
      border: none;
      border-radius: 6px;
    }
  }
  .cmn_button_wrap {
    .cmn_button {
      &.cmn_button_s {
        height: 48px;
        font-size: 16px;
      }
      &.cmn_button_m {
      }
    }
  }

  /* table */
  .table_box {
    margin: 20px 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  table {
    border-collapse: separate;
    width: 100%;
    border-spacing: 2px;
    th,
    td {
      padding: 8px;
    }

    th {
      text-align: center;
    }
    td {
      background-color: #fff;
    }
    .sticky {
      position: sticky;
      top: 0;
      left: 0;
    }
    .tac {
      text-align: center;
    }
    .tar {
      text-align: right;
    }
    .tal {
      text-align: left;
    }
    tr:last-child {
      & *:first-child {
        border-radius: 0 0 0 4px;
      }
      & *:last-child {
        border-radius: 0 0 4px 0;
      }
    }
    thead {
      th {
        background-color: #418de5;
        color: #fff;
      }
      tr:first-of-type {
        & *:first-child {
          border-radius: 4px 0 0 0;
        }
        & *:last-child {
          border-radius: 0 4px 0 0;
        }
      }
    }
    tbody {
      th {
        background-color: #ccc;
        color: #666;
      }
    }
  }
  /* 注釈 */
  .notice {
    color: #666;
    line-height: 1.5;
    > * {
      padding-left: 1.5em;
      text-indent: -1.5em;
      & + * {
      }
      &::before {
        content: '※';
        margin-right: 0.5em;
      }
    }
    &.notice_num {
      /*番号付き注釈*/
      counter-reset: number 0;
      > * {
        padding-left: 2em;
        text-indent: -2em;
        &::before {
          counter-increment: number 1;
          content: '※' counter(number);
          margin-right: 1em;
        }
      }
    }
  }

  /* ========================================

  ======================================= */
  @media (768px <= width) {
    /* cta2 */
    .cmn_cta2 {
      .cmn_cta_box {
        border-radius: 8px;
      }
    }
    .cmn_button_wrap {
      .cmn_button {
        &.cmn_button_s {
        }
        &.cmn_button_m {
        }
      }
    }
  }
}

.page-price,
.page-devtest,
.page-price_test,
.price-child,
.devtest-child,
.price_test-child {
  .cmn_main {
    padding-bottom: 0;
  }
  .cmn_container {
    h2 {
      font-size: 24px;
    }
    h3 {
      font-size: 20px;
    }
    h4 {
      font-size: 18px;
    }
    h5 {
      font-size: 16px;
    }
    h6 {
      font-size: 16px;
    }

    p {
      line-height: 1.5;
      margin: 1em 0;
    }
    section {
      margin-top: 60px;
    }
    .col_bl {
      color: #0063af;
    }
    .col_or {
      color: #ff6708;
    }
    .col_gr {
      color: #009e25;
    }
    .fz_sm {
      font-size: 0.875em;
    }
    .fz_xs {
      font-size: 0.75em;
    }
    .fz_xxs {
      font-size: 0.626em;
    }
    .icon {
      display: inline-block;
    }
    .flex_column_box {
      display: flex;
      flex-direction: column;
      > * {
        flex: 1;
        display: flex;
        flex-direction: column;
        *:last-of-type {
          /* flex-grow: 1; */
        }
      }
    }
    .link_anchor {
      display: flex;
      flex-wrap: wrap;
      flex-direction: column;
      font-weight: 700;
      > * {
        flex: 1;
      }
      > * > a {
        display: flex;
        align-items: center;
        gap: 12px;
        align-self: stretch;
        position: relative;
        padding: 16px 44px 16px 0;
        border-bottom: 1px solid #d9d9d9;
        transition: 0.2s;
        color: #000;
        text-decoration: none;
        &::after {
          content: '';
          display: block;
          position: absolute;
          right: 16px;
          top: 0;
          bottom: 0;
          margin: auto;
          width: 16px;
          height: 16px;
          background-color: #000; /* 色を指定 */
          -webkit-mask-image: url(../assets/icon/icon_scrolldown.svg);
          mask-image: url(../assets/icon/icon_scrolldown.svg);
          -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
          -webkit-mask-size: contain;
          mask-size: contain;
        }
        &:hover {
          border-bottom: 1px solid #000;
        }
        p {
          flex: 1 0 0;
          margin: 0;
        }
      }
    }

    .sct_price_01 {
      > h3 {
        margin-top: 32px;
      }
      .flex_column_box {
        gap: 16px;
        .box {
          padding: 16px;
          border-radius: 4px;
          background-color: #fff;
          h3 {
            margin-bottom: 16px;
          }
          figure {
            background: linear-gradient(180deg, #fafcfe 0%, #ebf3f9 100%);
          }
          p {
            flex-grow: 1;
          }
          .cmn_button_wrap {
            width: 100%;
          }
        }
      }
      .table_box {
        table {
          width: 650px;
          tr {
            *:first-child {
            }
            td {
              text-align: center;
            }
          }
        }
      }
    }
    .sct_price_02 {
      h2 {
        margin-bottom: 32px;
      }
      .bnr {
        margin-top: 20px;
        picture {
        }
        p {
          margin-top: 8px;
        }
      }
    }
    .sct_price_03 {
      h2 {
        margin-bottom: 32px;
      }
      h3 {
        margin-top: 20px;
        margin-bottom: 16px;
        color: #0063af;
      }
      ul.list {
        list-style-type: disc;
        margin-left: 20px;
        line-height: 1.5;
      }
      .cmn_cta2 {
        margin-top: 20px;
        margin-bottom: 60px;
      }
      .flex_column_box {
        gap: 24px;
        .box {
          img {
            margin-bottom: 16px;
          }
          h4 {
            margin-bottom: 8px;
          }
          p {
            margin-bottom: 0;
          }
        }
      }
    }
    .sct_price_04 {
      h2 {
        margin-bottom: 32px;
      }
      p {
        margin-bottom: 32px;
      }
      em {
        display: inline-block;
        font-size: 20px;
        font-weight: 600;
        font-style: normal;
        color: #0063af;
      }
    }
    .pagelink {
      background-color: #fff;
      margin-left: -1em;
      margin-right: -1em;
      padding: 1em;
      ul {
        display: flex;
        flex-direction: column;
        border-top: 1px solid #ccc;
      }
      li {
        border-bottom: 1px solid #ccc;

        a {
          padding: 16px 0;
          display: flex;
          align-items: center;
          gap: 8px;
          font-weight: 600;
          text-decoration: none;

          &::before {
            content: '';
            display: block;
            width: 64px;
            height: 64px;
            background-position: center center;
            background-repeat: no-repeat;
            background-size: 100%;
          }
          &::after {
            content: '';
            width: 20px;
            height: 20px;
            display: block;
            margin-left: auto;
            background-image: url(../img/common/icon_arrow_blue.svg);
            background-position: center center;
            background-repeat: no-repeat;
            background-size: 6.4px;
          }
        }
        &.price_gas {
          a {
            &::before {
              background-image: url(../img/price/ico_gas.png);
            }
          }
        }
        &.price_eco-cute {
          a {
            &::before {
              background-image: url(../img/price/ico_ecocute.png);
            }
          }
        }
        &.price_oil-fired {
          a {
            &::before {
              background-image: url(../img/price/ico_oil.png);
            }
          }
        }
      }
    }
    .sct_price_list {
      margin-bottom: 60px;
    }
    .sct_price_data {
      h2 {
        margin-bottom: 24px;
      }
      .flex_column_box {
        .box {
          padding: 16px;
          border-radius: 4px;
          background-color: #fff;
        }

        h3 {
          margin-bottom: 8px;
          font-size: 18px;
          color: #0063af;
        }
        figure {
          text-align: center;
          width: 100%;
          background: linear-gradient(180deg, #fafcfe 0%, #ebf3f9 100%);
          img {
            aspect-ratio: 1.3333 / 1;
          }
        }
      }
      .notice {
        margin-top: 8px;
      }
      .link_anchor {
        margin-top: 32px;
      }
    }
    .sct_price_type,
    .sct_price_size {
      h2 {
        margin-bottom: 32px;
      }
      h3 {
        margin-top: 24px;
        border-radius: 4px 4px 0 0;
        padding: 8px 0;
        text-align: center;
        color: #fff;
        font-weight: 600;
        background-color: #333;
      }
      h4 {
        margin: 20px 0 20px;
        padding: 20px 0 0;
        color: #666;
        border-top: 1px solid #ccc;
      }
      .sample {
        padding: 12px 16px 20px;
        border-radius: 0 0 4px 4px;
        background-color: #fff;
        .rate {
          text-align: center;
          font-weight: 600;
          span {
            font-size: 2em;
          }
        }
        .flex_functions {
          margin: 16px 0;
          display: flex;
          flex-wrap: wrap;

          gap: 8px;
          .function {
            width: calc((100% - 8px * 3) / 4);
          }
        }
        .flex_items {
          .item {
            margin-bottom: 20px;

            & + .item {
              border-top: 1px dashed #ccc;
              margin-top: 16px;
              padding-top: 16px;
            }
            & > a {
              text-decoration: none;
              color: #333;
              font-weight: 600;
              display: flex;
              flex-wrap: wrap;
              gap: 8px;
              padding-right: 28px;
              position: relative;
              &::after {
                position: absolute;
                top: 0;
                bottom: 0;
                right: 0;
                width: 24px;
                height: 24px;
                margin: auto;
                content: '';
                background-image: url(../img/common/icon_arrow_blue.svg);
                background-repeat: no-repeat;
                background-position: center;
              }
              picture {
                flex: 37 0 0;
              }
              .meta {
                flex: 63 0 0;
                .item_title {
                }
                .item_name {
                  margin: 0;
                  font-weight: 300;
                  font-size: 12px;
                }
              }
              .item_function {
                margin-top: 8px;
                display: flex;
                flex-wrap: wrap;
                gap: 4px;
                li {
                  border-radius: 50px;
                  color: #fff;
                  font-size: 12px;
                  padding: 2px 8px;
                  &.location {
                    background-color: #f05865;
                  }
                  &.hole {
                    background-color: #418de5;
                  }
                  &.size {
                    background-color: #d88b18;
                  }
                  &.supply {
                    background-color: #8c59b2;
                  }
                  &.energy {
                    background-color: #409d40;
                  }
                }
              }
              .price,
              .total {
                display: flex;
                border-radius: 4px;
                width: 100%;
                dt,
                dd {
                  /* padding: 4px 16px; */
                  display: flex;
                  align-items: center;
                  justify-content: center;
                }
                dt {
                  width: 41%;
                  flex-direction: column;
                  border-radius: 4px 0 0 4px;
                }
                dd {
                  width: 59%;
                  border-radius: 0 4px 4px 0;
                }
              }
              .price {
                height: 26px;
                dt {
                  color: #fff;
                  background-color: #ff6708;
                }
                dd {
                  background-color: rgba(255, 103, 8, 0.1);
                }
              }
              .total {
                height: 41px;
                dt {
                  background-color: #ffeb03;
                }
                dd {
                  background-color: rgba(255, 235, 3, 0.1);
                }
              }
            }
          }
        }
      }
    }
    .sct_price_type {
      h3 {
        background-color: #ff6708;
      }
      .sample {
        .rate {
          color: #ff6708;
        }
      }
    }
    .sct_price_size {
      h3 {
        background-color: #009e25;
        .icon {
          margin-right: 8px;
        }
      }
      .sample {
        .rate {
          color: #009e25;
        }
      }
    }
    .sct_price_cost {
      h3 {
        margin-top: 32px;
        margin-bottom: 20px;
      }
      .pict {
        background-color: #fff;
        padding: 12px;
        border-radius: 4px;
      }
      .cmn_button_wrap {
        margin-top: 32px;
      }
      .table_box {
        td {
          text-align: center;
        }
      }
    }

    /* =========================================

    ========================================= */
    @media (768px <= width) {
      h2 {
        margin-bottom: 32px;
        font-size: 32px;
      }
      .cmn_button_wrap {
        max-width: 360px;
      }
      .link_anchor {
        flex-direction: row;
        gap: 20px;
        > * {
        }
        > * > a {
          height: 100%;
          P {
          }
        }
      }

      .sct_price_01 {
        > h3 {
          margin-top: 40px;
        }
        .flex_column_box {
          margin-top: 40px;
          flex-direction: row;
          gap: 40px;
          .box {
            padding: 20px;
          }
        }
        .table_box {
          table {
            width: 100%;
          }
        }
      }
      .sct_price_03 {
        .cmn_cta2 {
          margin-top: 32px;
        }
        .flex_column_box {
          margin-top: 24px;
          flex-direction: row;
          gap: 40px;
        }
      }

      .sct_price_04 {
        padding-bottom: 96px;
        p {
          text-align: center;
        }
      }

      .pagelink {
        margin: 0 calc(50% - 50vw);
        padding: 32px calc(50vw - 50%);
        ul {
          flex-direction: row;
          border-top: none;
          justify-content: center;
          gap: 40px;
          li {
            border-bottom: none;
            flex: 1;
            max-width: 308px;
            a {
              padding: 0;
            }
          }
        }
      }

      .sct_price_type,
      .sct_price_size {
        h3 {
          padding: 12px 0;
        }
        h4 {
          margin: 24px 0 24px;
          padding-top: 24px;
          text-align: center;
        }
        .sample {
          padding: 16px 20px 24px;
          .flex_functions {
            gap: 16px;
            justify-content: center;
            .function {
              width: 12.5%;
            }
          }
          .flex_items {
            display: flex;
            gap: 20px;
            margin-bottom: 24px;
            .item {
              margin: 0 auto 0;
              max-width: 470px;
              & + .item {
                border-top: none;
                margin-top: 0;
                padding-top: 0;
              }
            }
          }
        }
      }

      .sct_price_type {
        .sample {
        }
      }

      .sct_price_data {
        h2 {
          text-align: left;
        }

        .flex_column_box {
          margin-bottom: 24px;
          .box {
            padding: 20px;
          }
          h3 {
            margin-bottom: 16px;
          }
          figure {
            img {
              width: auto;
              height: 281px;
            }
          }
          .notice {
            margin-top: 16px;
          }
        }
      }
      .sct_price_cost {
        h3 {
          margin-top: 40px;
        }
        .pict {
          padding: 20px;
        }
        .cmn_button_wrap {
          margin-top: 40px;
        }
        .table_box {
          tbody {
            th {
              width: 215px;
            }
          }
        }
      }
    }
  }
}