body#quality section#fv {
}

body#quality section#cfa {
  /* padding-bottom: 8rem; */
  .ttl {
    color: var(--expcolor);
  }
}

body#quality .bg {
  position: relative;
  background-position: center bottom;
  background-size: 100%;
  background-repeat: no-repeat;
  & > figcaption {
    position: absolute;
    right: 10px;
    bottom: 10px;
  }
  &.bg1 {
    background-image: url(../img/quality/quality_bg1.webp);
  }
  &.bg2 {
    background-image: url(../img/quality/quality_bg2.webp);
  }
  section {
    .set {
      .blank {
        width: calc(16.66% - 10px);
      }
      & > ol {
        li {
          .name {
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 1rem 0;
            min-height: 4rem;
            font-size: 1.8rem;
            letter-spacing: 0;
            line-height: 2.5rem;
            text-align: center;
          }
          .explanation {
            font-size: 1.4rem;
            line-height: 2rem;
            letter-spacing: 0;
            span {
              display: block;
              margin-top: .5rem;
              font-size: 60%;
              line-height: 1.2rem;
              letter-spacing: unset;
            }
          }
        }
      }
    }
  }
  section#kitchen {
    padding-bottom: 12rem;
    .title {
      display: flex;
      align-items: flex-end;
      padding-left: 2rem;
      font-family: 'Cormorant Garamond', serif;
      font-size: 10rem;
      letter-spacing: .6rem;
      color: var(--expcolor);
      white-space: nowrap;
      opacity: .4;
      span {
        padding-bottom: 3rem;
        font-size: 20%;
      }
    }
    .set {
      display: flex;
      gap: 20px;
      & > figure {
        width: calc(33.33% - 10px);
        max-width: 1000px;
        height: fit-content;
      }
      & > ol {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        /* padding-right: 10vw; */
        width: calc(50% - 20px);
        /* max-width: 590px; */
        li {
          width: calc(33.33% - 14px);
        }
      }
    }
  }
  section#powderroom {
    padding-bottom: 12rem;
    .title {
      display: flex;
      align-items: flex-end;
      padding-left: 2rem;
      font-family: 'Cormorant Garamond', serif;
      font-size: 10rem;
      letter-spacing: .6rem;
      color: var(--expcolor);
      opacity: .4;
      span {
        padding-bottom: 3rem;
        font-size: 20%;
      }
    }
    .set {
      display: flex;
      flex-direction: row-reverse;
      gap: 20px;
      align-items: flex-start;
      & > figure {
        width: calc(50% - 10px);
      }
      & > ol {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        width: calc(33.33% - 20px);
        li {
          width: calc(50% - 10px);
        }
      }
    }
  }
  section#toilet {
    padding-bottom: 12rem;
    .title {
      display: flex;
      align-items: flex-end;
      padding-left: 2rem;
      font-family: 'Cormorant Garamond', serif;
      font-size: 10rem;
      letter-spacing: .6rem;
      color: var(--expcolor);
      opacity: .4;
      span {
        padding-bottom: 3rem;
        font-size: 20%;
      }
    }
    .set {
      display: flex;
      gap: 20px;
      align-items: flex-start;
      & > figure {
        width: calc(33.33% - 20px);
        figcaption {
          /* right: unset;
          left: 10px; */
        }
      }
      & > ol {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        width: calc(33.33% - 20px);
        li {
          width: calc(50% - 10px);
        }
        figure {
          figcaption {
            &.b {
              color: var(--maincolor);
            }
          }
        }
      }
    }
  }
  section#bathroom {
    padding-bottom: 12rem;
    .set {
      display: flex;
      gap: 20px;
      align-items: flex-end;
      & > figure {
       width: calc(33.33% - 20px);
        /* .title {
          position: absolute;
          right: -51rem;
          top: .5rem;
          z-index: 1;
          display: flex;
          align-items: flex-end;
          font-family: 'Cormorant Garamond', serif;
          font-size: 10rem;
          letter-spacing: .6rem;
          color: var(--expcolor);
          opacity: .4;
          span {
            padding-bottom: 3rem;
            font-size: 20%;
          }
        } */
      }
      & > ol {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        width: calc(50% - 10px);
        .title {
          display: flex;
          align-items: flex-end;
          margin-left: -8rem;
          width: 100%;
          /* padding-left: 2rem; */
          font-family: 'Cormorant Garamond', serif;
          font-size: 10rem;
          letter-spacing: .6rem;
          color: var(--expcolor);
          opacity: .4;
          white-space: nowrap;
          span {
            padding-bottom: 3rem;
            font-size: 20%;
          }
        }
        li {
          width: calc(33.33% - 13.33px);
        }
      }
    }
    .rinnai {
      margin: 4rem auto;
      width: 100%;
      max-width: 1000px;
      .bg {
        padding: 4rem 10rem;
        color: var(--bodycolor);
        background-color: #0B2F4B;
        ol {
          display: flex;
          gap: 6rem;
          margin-top: 6rem;
          li {
            width: calc(50% - 3rem);
            .ttl {
              margin-bottom: 1rem;
              padding-bottom: 1rem;
              font-size: 1.6rem;
              line-height: 2.5rem;
              border-bottom: var(--bodycolor) solid 1px;
            }
            .explanation {
              font-size: 1.2rem;
              line-height: 2rem;
            }
          }
        }
      }
      .movie {
        margin-top: 6rem;
        h3 {
          margin: 4rem auto;
          span {
            display: block;
            margin-top: .5rem;
            font-size: 60%;
          }
        }
        iframe {
          margin: 2rem auto;
          width: 598px;
          height: 336px;
        }
      }
    }
  }
}



@media all and (min-width: 769px) and (max-width: 1000px) {

}



@media all and (max-width: 768px) {

  ol#breadcrumb {
    & li {
      color: var(--maincolor);
      a {
        color: var(--maincolor);
        &::after {
          filter: unset;
        }
      }
    }
  }

  body#quality .bg {
    & > figcaption {
    }
    &.bg1 {
    }
    &.bg2 {
      overflow: hidden;
    }
    section {
      .set {
        .blank {
        }
        & > ol {
          li {
            .name {
              min-height: 5rem;
              font-size: 1.5rem;
              line-height: 2rem;
            }
            .explanation {
              span {
              }
            }
          }
        }
      }
    }
    section#kitchen {
      padding-bottom: 6rem;
      .title {
        padding-left: 1rem;
        font-size: 5rem;
        letter-spacing: .4rem;
        span {
          padding-left: .5rem;
          padding-bottom: 1rem;
          font-size: 30%;
        }
      }
      .set {
        flex-direction: column;
        & > figure {
          width: 100%;
          max-width: unset;
        }
        & > ol {
          column-gap: 10px;
          padding: 10px;
          width: 100%;
          li {
            width: calc(50% - 5px);
            /* &:nth-child(1) {
              display: none;
            } */
          }
        }
      }
    }
    section#powderroom {
      padding-bottom: 6rem;
      .title {
        flex-direction: column;
        align-items: flex-start;
        padding-left: 1rem;
        font-size: 5rem;
        letter-spacing: .4rem;
        span {
          padding-bottom: 1rem;
          font-size: 30%;
        }
      }
      .set {
        flex-direction: column;
        & > figure {
          width: 100%;
        }
        & > ol {
          gap: 10px;
          padding: 10px;
          width: 100%;
          li {
            width: calc(50% - 5px);
          }
        }
      }
    }
    section#toilet {
      margin-top: 5rem;
      padding-bottom: 6rem;
      .title {
        padding-left: 1rem;
        font-size: 5rem;
        letter-spacing: .4rem;
        span {
          padding-left: .5rem;
          padding-bottom: 1rem;
          font-size: 30%;
        }
      }
      .set {
        flex-direction: column;
        & > .blank {
          display: none;
        }
        & > figure {
          width: 100%;
          figcaption {
          }
        }
        & > ol {
          gap: 10px;
          padding: 10px;
          width: 100%;
          li {
            width: calc(50% - 5px);
          }
          figure {
            figcaption {
              &.b {
              }
            }
          }
        }
      }
    }
    section#bathroom {
      padding-bottom: 6rem;
      .set {
        flex-direction: column;
        & > figure {
          width: 100%;
          /* .title {
            position: relative;
            right: unset;
            left: 0;
            top: unset;
            padding-left: 1rem;
            font-size: 5rem;
            letter-spacing: .4rem;
            span {
              padding-left: .5rem;
              padding-bottom: 1rem;
              font-size: 30%;
            }
          } */
        }
        & > ol {
          gap: 10px;
          padding: 10px;
          width: 100%;
          .title {
            position: relative;
            right: unset;
            left: 0;
            top: unset;
            margin-left: unset;
            padding-left: 1rem;
            font-size: 5rem;
            letter-spacing: .4rem;
            span {
              padding-left: .5rem;
              padding-bottom: 1rem;
              font-size: 30%;
            }
          }
          li {
            width: calc(50% - 5px);
          }
          figure {
            figcaption {
              &.b {
              }
            }
          }
        }
      }
      .rinnai {
        .bg {
          padding: 2rem;
          h3 {
            font-size: 4vw;
            line-height: 3rem;
          }
          ol {
            gap: 2rem;
            margin-top: 3rem;
            li {
              width: calc(50% - 1rem);
              .ttl {
              }
              .explanation {
              }
            }
          }
        }
        .movie {
          h3 {
            font-size: 4vw;
            line-height: 2rem;
            span {
            }
          }
          iframe {
            margin: unset;
            aspect-ratio: 299 / 168;
            width: 100%;
            height: unset;
          }
        }
      }
    }
  }

}