@charset "utf-8";
/* ---------------------- main -------------------------------- */
section {
  margin-inline: auto;
  padding: 64px 0;
}

main {
  width: 100%;
  > figure {
    position: relative;
    > .heroImage {
      height: 100dvh;
      object-fit: cover;
      object-position: 0 10%;
    }
    > .heroTextBox {
      position: absolute;
      top: 96px;
      left: 5%;
      display: grid;
      gap: 16px 0;
      > h2 {
        color: #063b6b;
        font-size: clamp(24px, 3.64vw, 70px);
        text-shadow: 1px 1px 3px white;
        > span {
          font-size: clamp(36px, 5.72vw, 110px);
          background: linear-gradient(transparent 70%, rgb(255, 255, 127) 30%);
        }
      }
      > p {
        width: fit-content;
        color: white;
        background-color: #063b6b;
        font-size: clamp(18px, 2.5vw, 48px);
        letter-spacing: 2px;
        padding: 4px 16px;
      }
      > a {
        width: fit-content;
        color: white;
        background-color: #3ee19e;
        border-radius: 100vmax;
        font-size: clamp(16px, 2.5vw, 48px);
        margin-top: 16px;
        padding: 28px 16px 28px 0;
        > span {
          background-color: #00b772;
          border-radius: 100vmax;
          border: 4px solid white;
          padding: 36px 24px;
        }
      }
    }
  }
  > div {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0 2px;
    > p {
      text-align: center;
      background-color: #4d6fb8;
      color: white;
      font-size: clamp(12px, 2.08vw, 40px);
      padding: 4px 0;
    }
  }
  > .worriesSection {
    background: no-repeat center 180% / contain url(../image/bg_water_rev.png);
    > .worriesSectionContents {
      width: 73.95%;
      margin-inline: auto;
      display: grid;
      gap: 64px 0;
      > .worriesCards {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        grid-template-rows: repeat(2, 1fr);
        gap: 128px 16px;
        margin-inline: auto;
        > .worryCard {
          position: relative;
          aspect-ratio: 378/245;
          display: grid;
          place-items: center;
          background-color: #d9d9d9;
          border-radius: 5px;
          padding: 16px;
          box-shadow: 0 10px 10px #7e7e7e;
          > p {
            color: #063b6b;
            font-size: clamp(10px, 1.25vw, 24px);
            > span {
              color: #5b0000;
            }
          }
          &::before {
            position: absolute;
            top: -48px;
            left: 50%;
            translate: -50% 0;
            content: "";
            background: no-repeat center / cover url("../image/checkmark.png");
            width: 20%;
            aspect-ratio: 1/1;
          }
        }
        > .worryCard:nth-of-type(1) {
          grid-column: 1/3;
        }
        > .worryCard:nth-of-type(2) {
          grid-column: 3/5;
        }
        > .worryCard:nth-of-type(3) {
          grid-column: 5/7;
        }
        > .worryCard:nth-of-type(4) {
          grid-column: 2/4;
          grid-row: 2;
        }
        > .worryCard:nth-of-type(5) {
          grid-column: 4/6;
          grid-row: 2;
        }
      }
      > .rWaterBox {
        display: grid;
        gap: 16px 0;
        background: no-repeat center center / contain url(../image/r_water.png);
        > p {
          color: #a27e2e;
          font-size: clamp(16px, 4.16vw, 80px);
          text-shadow: 2px 2px 5px #ffffff;
        }
        > figure {
          background-color: #00a2e875;
          display: flex;
          justify-content: center;
          align-items: center;
          gap: 0 16px;
          border-radius: 10px;
          padding: 16px;
          > img {
            width: 60%;
          }
          > p {
            color: white;
            font-size: clamp(14px, 3.33vw, 64px);
          }
        }
      }
    }
  }
  > .sliderSection {
    display: grid;
    grid-template-columns: 100%;
    gap: 36px 0;
    background: linear-gradient(to bottom, #bcefff, #bddfff);
    > h3 {
      width: 53%;
      margin-inline: auto;
      background-color: white;
      color: #a27e2e;
      font-size: clamp(14px, 2.5vw, 48px);
      text-align: center;
      padding: 8px;
      border: 3px solid #a27e2e;
      border-radius: 100vmax;
      box-shadow: 0 5px 10px #777;
    }
    > .swiperButtonPositionBox {
      > .swiper {
        > .swiper-wrapper {
          > .swiper-slide {
            > .sliderCards {
              width: 100%;
              display: flex;
              justify-content: center;
              align-items: center;
              gap: 0 16px;
              padding: 16px 0;
              > .sliderCard {
                display: grid;
                grid-template-rows: auto 1fr;
                gap: 32px 0;
                width: 25%;
                height: 800px;
                color: #063b6b;
                background-color: white;
                padding: 16px;
                border-radius: 8px;
                border: 8px solid #b29426;
                box-shadow: 0 3px 10px #333;
                font-size: clamp(10px, 0.833vw, 16px);
                > img {
                  width: 80%;
                  margin-inline: auto;
                }
                > .cardTextContent {
                  display: grid;
                  grid-template-rows: auto 1fr;
                  gap: 24px 0;
                  > h4 {
                    padding-bottom: 24px;
                    text-align: center;
                    font-weight: 400;
                    font-size: clamp(12px, 1.25vw, 24px);
                    border-bottom: 2px solid #b29426;
                  }
                  > .textDetailBox {
                    display: grid;
                    > div {
                      > p {
                        line-height: 24px;
                      }
                    }
                    > div:nth-of-type(2) {
                      > p {
                        color: #269ee1;
                      }
                    }
                  }
                }
              }
            }
            > .slider02Box {
              display: grid;
              gap: 16px 0;
              width: 95%;
              background-color: white;
              border: 5px solid #b29426;
              border-radius: 10px;
              margin-inline: auto;
              padding: 32px 0;
              color: #5e88ae;
              > h4 {
                width: 90%;
                padding-bottom: 4px;
                border-bottom: 4px solid #b29426;
                margin-inline: auto;
                font-size: clamp(12px, 1.66vw, 32px);
                letter-spacing: 3px;
              }
              > .slider02Content {
                width: 90%;
                margin-inline: auto;
                display: grid;
                gap: 16px 0;
                > figure {
                  display: grid;
                  gap: 8px 0;
                  > p {
                    font-size: clamp(12px, 1.25vw, 24px);
                    border-bottom: 2px solid #b29426;
                    padding: 4px 0;
                  }
                }
              }
            }
          }
        }
      }
    }
    .ribbon {
      --r: 0.8em; /* control the ribbon shape */
      padding-top: 12px;
      padding-bottom: 12px;
      padding-inline: calc(var(--r) + 0.3em);
      line-height: 1.8;
      clip-path: polygon(
        0 0,
        100% 0,
        calc(100% - var(--r)) 50%,
        100% 100%,
        0 100%,
        var(--r) 50%
      );
      font-size: 28px;
      font-weight: bold;
      color: #fff;
      background: #063b6b; /* the main color */
      width: fit-content;
      margin-inline: auto;
      > p {
        text-align: center;
        font-size: clamp(14px, 1.5625vw, 30px);
        > span {
          font-size: clamp(16px, 3.33vw, 64px);
        }
      }
    }
  }
  > .introductionSection {
    display: grid;
    grid-template-columns: 100%;
    gap: 32px 0;
    > .introductionMeritBox {
      width: 73.95%;
      margin-inline: auto;
      display: grid;
      gap: 64px 0;
      > h3 {
        background-color: #063b6b;
        padding: 4px;
        border-radius: 100vmax;
        color: white;
        font-size: clamp(16px, 3.33vw, 64px);
        text-align: center;
        > span {
          color: #063b6b;
          text-shadow: 1px 1px 0 #fff, -1px 1px 0 #fff, 1px -1px 0 #fff,
            -1px -1px 0 #fff;
          font-size: clamp(48px, 5.72vw, 110px);
        }
      }
      > div {
        width: 80%;
        margin-inline: auto;
        display: grid;
        gap: 16px 0;
        > hgroup {
          display: flex;
          align-items: center;
          gap: 0 16px;
          > h4 {
            width: 5%;
          }
          > p {
            color: #063b6b;
            font-size: clamp(12px, 1.5625vw, 30px);
          }
        }
      }
    }
    > .introductionSafetyBox {
      display: grid;
      grid-template-columns: 100%;
      gap: 32px 0;
      width: 73.95%;
      margin-inline: auto;
      background-color: #fff8e0;
      padding: 8px;
      border-radius: 10px;
      color: #063b6b;
      > h3 {
        font-size: clamp(12px, 1.66vw, 32px);
        margin-inline: auto;
        width: fit-content;
        border-bottom: 2px solid #a27e2e;
        > span {
          font-size: clamp(18px, 2.5vw, 48px);
        }
      }
      > .safetyCards {
        display: flex;
        justify-content: center;
        gap: 0 8px;
        > .safetyCard {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          background-color: white;
          width: 14%;
          aspect-ratio: 1/1;
          border-radius: 100vmax;
          border: 2px solid #a27e2e;
          > p {
            font-size: clamp(12px, 1.04vw, 20px);
            > span {
              font-size: clamp(12px, 1.25vw, 24px);
            }
          }
        }
      }
      > p {
        text-align: center;
        font-size: clamp(10px, 0.83vw, 16px);
      }
    }
    > .introductionCostBox {
      width: 73.95%;
      margin-inline: auto;
      display: grid;
      gap: 32px 0;
      > .ribbon {
        --r: 0.8em; /* control the ribbon shape */
        padding-top: 12px;
        padding-bottom: 12px;
        padding-inline: calc(var(--r) + 0.3em);
        line-height: 1.8;
        clip-path: polygon(
          0 0,
          100% 0,
          calc(100% - var(--r)) 50%,
          100% 100%,
          0 100%,
          var(--r) 50%
        );
        font-size: 28px;
        font-weight: bold;
        color: #fff;
        background: #a27e2e; /* the main color */
        width: 41.76%;
        margin-inline: auto;
        > p {
          text-align: center;
          font-size: clamp(16px, 3.33vw, 64px);
        }
      }
      > figure {
        display: flex;
        justify-content: center;
        gap: 0 16px;
        > img {
          width: 30%;
        }
      }
      > p {
        color: #063b6b;
        text-align: center;
        font-size: clamp(12px, 1.25vw, 24px);
      }
    }
    > .otherComparisonBox {
      width: 73.95%;
      margin-inline: auto;
      display: grid;
      gap: 32px 0;
      > h3 {
        background-color: #063b6b;
        color: white;
        padding: 4px;
        border-radius: 100vmax;
        text-align: center;
        font-size: clamp(12px, 1.875vw, 36px);
      }
      > .comparisonTable {
        display: grid;
        grid-template-columns: auto repeat(4, 1fr);
        gap: 2px 0;
        > .comparisonTableRow {
          display: grid;
          grid-column: 1/6;
          grid-template-columns: subgrid;
          gap: 0 2px;
          > p {
            padding: 4px;
            border-radius: 2px;
            &:first-child {
              /*表1列目*/
              background-color: #063b6b;
              color: white;
              font-size: clamp(8px, 1.25vw, 24px);
            }
          }
          &:first-child {
            /*表1行目*/
            text-align: center;
            > p:nth-of-type(n + 2) {
              color: white;
              font-size: clamp(10px, 1.25vw, 24px);
            }
            > p:nth-of-type(n + 3) {
              background-color: #6d6d6d;
            }
            > p:nth-of-type(2) {
              background-color: #1770c2;
            }
          }
          &:nth-of-type(n + 2) {
            /* 表2行目以降 */
            > p:nth-of-type(n + 2) {
              /* 表2列目以降 */
              color: #063b6b;
              font-size: clamp(10px, 1.04vw, 20px);
              text-align: center;
            }
            > p:nth-of-type(n + 3) {
              background-color: #d6d6d6;
            }
            > p:nth-of-type(2) {
              background-color: #92c7f8;
            }
          }
          &:nth-of-type(2) {
            /* 表2行目 */
            > p:first-child {
              text-align: center;
            }
          }
        }
      }
      > p {
        font-size: clamp(12px, 1.04vw, 20px);
        font-weight: 700;
      }
    }
    > .aboutSubsidyBox {
      width: 60%;
      margin-inline: auto;
      display: grid;
      gap: 16px 0;
      > figure {
        display: flex;
        justify-content: space-between;
        gap: 0 32px;
        > img {
          width: 20%;
        }
        > div {
          width: 70%;
          display: grid;
          align-items: center;
          gap: 16px 0;
          > p {
            font-size: clamp(12px, 1.04vw, 20px);
            font-weight: 700;
            padding: 8px 16px;
          }
          > p:first-child {
            width: fit-content;
            color: white;
            background-color: #3b5aa9;
            border-radius: 100vmax;
            letter-spacing: 6px;
          }
          > p:nth-of-type(2) {
            line-height: 32px;
            color: #063b6b;
          }
        }
      }
      > a {
        width: fit-content;
        margin-inline: auto;
        color: white;
        background: linear-gradient(to right, #3fe19d, #31d0c7);
        padding: 8px 32px;
        border-radius: 100vmax;
        text-shadow: 2px 2px 4px #777;
      }
    }
  }
  > .rWaterDetailSection {
    background: linear-gradient(to bottom, #e8f8ff, #a6e0ed);
    > .rWaterDetailContent {
      width: 73.95%;
      margin-inline: auto;
      display: grid;
      gap: 32px 0;
      > div {
        padding: 16px;
      }
      > .detailBox {
        position: relative;
        background-color: rgba(255, 255, 255, 0.6);
        border-radius: 5px;
        text-align: center;
        display: grid;
        gap: 32px 0;
        > .rWaterImage {
          position: absolute;
          top: -25%;
          left: 0;
          width: 41.54%;
        }
        > .rWaterLogoImage {
          margin-left: auto;
          width: 51.69%;
        }
        > div {
          display: grid;
          gap: 16px 0;
        }
        > div:first-of-type {
          margin-top: 32px;
          > p {
            color: #063b6b;
            font-size: clamp(12px, 1.25vw, 24px);
          }
        }
        > div:nth-of-type(2) {
          > p {
            color: #9f7826;
            font-size: clamp(12px, 1.04vw, 20px);
          }
        }
      }
      > .annotationBox {
        width: fit-content;
        margin-inline: auto;
        display: grid;
        gap: 24px 0;
        color: #063b6b;
        font-size: clamp(12px, 1.04vw, 20px);
        > div {
          display: grid;
          gap: 8px 0;
        }
      }
    }
  }
  > .flowAndFaqSection {
    > .flowAndFaqContent {
      width: 73.95%;
      margin-inline: auto;
      > .flowBox {
        display: grid;
        gap: 48px 0;
        > h3 {
          position: relative;
          color: white;
          background-color: #b29426;
          text-align: center;
          padding: 8px;
          &::after {
            position: absolute;
            background-color: #b29426;
            content: "";
            top: 90%;
            left: 50%;
            translate: -50% 0;
            width: 5%;
            aspect-ratio: 1/1;
            clip-path: polygon(0 0, 50% 90%, 100% 0);
          }
        }
        > .flowImages {
          display: flex;
          justify-content: center;
          > .flowCard {
            width: 24%;
            > .cardText {
              color: white;
              clip-path: polygon(0 0, 85% 0, 100% 50%, 85% 100%, 0 100%);
              padding: 16px 0;
              text-align: center;
              height: 210px;
              display: grid;
              gap: 6px 0;
              > p:first-child {
                font-size: clamp(12px, 1.66vw, 32px);
                > span {
                  font-size: clamp(18px, 2.5vw, 48px);
                }
              }
              > p:nth-of-type(2) {
                font-size: clamp(10px, 1.25vw, 24px);
              }
            }
            &:nth-of-type(1) {
              > .cardText {
                background-color: #f9a4a4;
              }
            }
            &:nth-of-type(2) {
              position: relative;
              &::after {
                position: absolute;
                top: 100%;
                left: 0;
                content: "※希望があれば";
                color: #f4a45a;
                font-size: clamp(8px, 0.729vw, 14px);
              }
              > .cardText {
                background-color: #f4a45a;
              }
            }
            &:nth-of-type(3) {
              > .cardText {
                background-color: #49afcf;
              }
            }
            &:nth-of-type(4) {
              position: relative;
              &::after {
                position: absolute;
                top: 100%;
                left: 0;
                content: "※場合によっては配管取替工事あり";
                color: #7cc3ae;
                font-size: clamp(8px, 0.729vw, 14px);
              }
              > .cardText {
                background-color: #7cc3ae;
              }
            }
          }
        }
        > .toContactButton {
          width: 39.22%;
          margin-inline: auto;
          font-size: clamp(16px, 1.5625vw, 30px);
          text-align: center;
          padding: 8px 24px;
          border-radius: 100vmax;
          color: white;
          background: linear-gradient(to right, #3fe19d, #31d0c7);
        }
      }
      > .faqBox {
        display: grid;
        gap: 48px 0;
        color: #063b6b;
        border-top: 1px solid #333;
        padding-top: 32px;
        margin-top: 64px;
        > h3 {
          letter-spacing: 8px;
          text-align: center;
          font-size: clamp(18px, 2.5vw, 48px);
        }
        > .qaContainer {
          display: grid;
          gap: 32px 0;
          > div {
            display: grid;
            grid-template-columns: 10% 1fr;
            align-items: center;
            gap: 0 16px;
            > p:first-of-type {
              justify-self: center;
              font-size: clamp(11px, 2.083vw, 40px);
            }
          }
          > .qBox {
            > p:first-child {
              color: #269ee1;
            }
            > p:nth-of-type(2) {
              font-size: clamp(12px, 1.66vw, 32px);
            }
          }
          > .aBox {
            background-color: #fcfcfc;
            > p:first-child {
              color: #ce2424;
            }
            > p:nth-of-type(2) {
              font-size: clamp(10px, 1.25vw, 24px);
            }
          }
        }
      }
    }
  }
}

/* --------------------- マウスホバー ---------------------- */
/* transition */
main {
  > figure {
    > .heroTextBox {
      > .hoverScale {
        transition: scale 0.3s;
      }
    }
  }
  > div {
    > p {
      transition: background-color 0.3s;
    }
  }
  > .introductionSection {
    > .aboutSubsidyBox {
      > .hoverScale {
        transition: scale 0.3s;
      }
    }
  }
  > .flowAndFaqSection {
    > .flowAndFaqContent {
      > .flowBox {
        > .hoverScale {
          transition: scale 0.3s;
        }
      }
    }
  }
}
/*  */
@media (any-hover: hover) {
  main {
    > figure {
      > .heroTextBox {
        > .hoverScale:hover {
          scale: 1.1;
        }
      }
    }
    > div {
      > p:hover {
        background-color: #294788;
      }
    }
    > .introductionSection {
      > .aboutSubsidyBox {
        > .hoverScale:hover {
          scale: 1.1;
        }
      }
    }
    > .flowAndFaqSection {
      > .flowAndFaqContent {
        > .flowBox {
          > .hoverScale:hover {
            scale: 1.1;
          }
        }
      }
    }
  }
}

/* メディアクエリ ////////////////////////////////*/
@media (width <= 520px) {
  section {
    padding: 32px 0;
  }

  main {
    > figure {
      > .heroImage {
        height: 70dvh;
        object-position: right center;
      }
      > .heroTextBox {
        > a {
          padding: 16px 8px 16px 0;
          > span {
            padding: 24px 12px;
          }
        }
      }
    }
    > div {
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(2, 1fr);
      gap: 2px;
    }
    > .worriesSection {
      background-position: center 100%;
      padding: 32px 0 8px 0;
      > .worriesSectionContents {
        width: 95%;
        > .worriesCards {
          grid-template-columns: repeat(4, 1fr);
          grid-template-rows: repeat(3, 1fr);
          gap: 16px;
          > .worryCard {
            &::before {
              top: -20px;
            }
          }
          > .worryCard:nth-of-type(3) {
            grid-column: 2/4;
            grid-row: 2;
          }
          > .worryCard:nth-of-type(4) {
            grid-column: 1/3;
            grid-row: 3;
          }
          > .worryCard:nth-of-type(5) {
            grid-column: 3/5;
            grid-row: 3;
          }
        }
        > .rWaterBox {
          background-position: 40% top;
          gap: 2px 0;
          margin: 64px 0 0 0;
          > figure {
            padding: 8px;
          }
        }
      }
    }
    > .sliderSection {
      gap: 12px;
      > h3 {
        width: 95%;
      }
      > .swiperButtonPositionBox {
        position: relative;
        &::before {
          position: absolute;
          content: "<";
          top: 50%;
          left: 2%;
          translate: 0 -50%;
          font-size: 24px;
          font-weight: bold;
          color: #333;
          z-index: 10;
        }
        &::after {
          position: absolute;
          content: ">";
          top: 50%;
          right: 2%;
          translate: 0 -50%;
          font-size: 24px;
          font-weight: bold;
          color: #333;
          z-index: 10;
        }
        > .swiper {
          > .swiper-wrapper {
            > .swiper-slide {
              > .sliderCards {
                height: 80dvh;
                display: grid;
                grid-template-columns: 100%;
                grid-template-rows: repeat(3, 1fr);
                gap: 8px 0;
                > .sliderCard {
                  justify-content: space-around;
                  grid-template-columns: 30% 60%;
                  grid-template-rows: subgrid;
                  width: 90%;
                  margin-inline: auto;
                  padding: 4px;
                  border: 4px solid #b29426;
                  box-shadow: none;
                  > img {
                    width: 100%;
                    align-self: center;
                  }
                  > .cardTextContent {
                    gap: 16px 0;
                    > h4 {
                      padding: 4px;
                    }
                    > .textDetailBox {
                      display: grid;
                      > div {
                        > p {
                          line-height: 12px;
                        }
                      }
                    }
                  }
                }
              }
              > .slider02Box {
                margin-top: 8px;
              }
            }
          }
        }
      }
      > .ribbon {
        width: 90%;
      }
    }
    > .introductionSection {
      > .introductionMeritBox {
        width: 95%;
        gap: 16px 0;
        > h3 {
          padding: 0;
        }
        > div {
          width: 100%;
          > hgroup {
            display: grid;
            grid-template-columns: 10% 1fr;
            > h4 {
              width: 100%;
            }
          }
        }
      }
      > .introductionSafetyBox {
        width: 95%;
        > .safetyCards {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 4px;
          > .safetyCard {
            width: 100%;
          }
        }
      }
      > .introductionCostBox {
        width: 95%;
        > .ribbon {
          width: 80%;
        }
        > figure {
          flex-direction: column;
          > img {
            width: 100%;
          }
        }
      }
      > .otherComparisonBox {
        width: 100%;
      }
      > .aboutSubsidyBox {
        width: 95%;
        > figure {
          flex-direction: column;
          align-items: center;
          gap: 12px 0;
          > img {
            width: 40%;
          }
          > div {
            width: 100%;
            > p:first-child {
              width: 100%;
              letter-spacing: 0;
              text-align: center;
            }
            > p:nth-of-type(2) {
              line-height: 24px;
            }
          }
        }
        > a {
          width: 100%;
          text-align: center;
        }
      }
    }
    > .rWaterDetailSection {
      > .rWaterDetailContent {
        width: 95%;
        > .detailBox {
          gap: 12px 0;
          > .rWaterImage {
            top: -5%;
          }
        }
      }
    }
    > .flowAndFaqSection {
      > .flowAndFaqContent {
        width: 95%;
        > .flowBox {
          gap: 24px 0;
          > .flowImages {
            gap: 0 4px;
            > .flowCard {
              > .cardText {
                grid-template-columns: 100%;
                grid-template-rows: repeat(2, 1fr);
                height: 20dvh;
              }
            }
          }
          > .toContactButton {
            width: 95%;
          }
        }
        > .faqBox {
          > .qaContainer {
            gap: 12px 0;
          }
        }
      }
    }
  }
}