/*! Writen  by SCSS */
.quality_ttl_group {
  flex-direction: column;
  row-gap: 15px;
  margin-bottom: clamp(40px, 6.667vw, 80px); }
  @media screen and (max-width: 820px) {
    .quality_ttl_group {
      margin-bottom: 40px; } }
  .quality_ttl_group .quality_ttl {
    font-size: clamp(40px, 4.167vw, 50px);
    color: #db5a39; }
  .quality_ttl_group .quality_read {
    font-size: clamp(17px, 1.667vw, 20px);
    line-height: 1.6; }

.col4 {
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
  gap: clamp(30px, 4.167vw, 50px) 2.78%; }
  @media screen and (max-width: 480px) {
    .col4 {
      gap: 30px 4%; } }
  .col4.grid {
    display: grid;
    align-items: flex-start;
    grid-template-columns: repeat(4, 1fr); }
    @media screen and (max-width: 480px) {
      .col4.grid {
        grid-template-columns: repeat(2, 1fr); } }
    .col4.grid .item {
      width: auto; }
      .col4.grid .item.double {
        width: auto; }
      .col4.grid .item.triple {
        width: auto; }
  .col4 .item {
    width: 22.91%;
    display: flex;
    flex-direction: column;
    row-gap: 15px; }
    @media screen and (max-width: 820px) {
      .col4 .item {
        row-gap: 10px; } }
    .col4 .item.double {
      width: 48.55%; }
    .col4 .item.triple {
      width: 74.19%; }

.sanitary_area .sanitary_group {
  flex-direction: column;
  row-gap: clamp(100px, 14.616vw, 190px); }
  @media screen and (max-width: 820px) {
    .sanitary_area .sanitary_group {
      row-gap: 80px; } }
  .sanitary_area .sanitary_group .kitchen_group .item.item01 {
    grid-column: 1/3;
    grid-row: 1/3;
    background: #fffeee;
    padding: clamp(20px, 2.308vw, 30px);
    gap: 0; }
    @media screen and (max-width: 480px) {
      .sanitary_area .sanitary_group .kitchen_group .item.item01 {
        grid-column: span 2;
        grid-row: auto; } }
    .sanitary_area .sanitary_group .kitchen_group .item.item01 .disposer_group01 {
      align-items: center;
      flex-wrap: wrap;
      gap: clamp(12px, 1.539vw, 20px) 0; }
      @media screen and (max-width: 480px) {
        .sanitary_area .sanitary_group .kitchen_group .item.item01 .disposer_group01 {
          align-items: flex-start;
          gap: 20px 0; } }
      .sanitary_area .sanitary_group .kitchen_group .item.item01 .disposer_group01 .disposer_name {
        width: 100%;
        font-size: clamp(16px, 2.077vw, 27px);
        letter-spacing: 0.2em;
        color: #db5a39;
        text-align: center; }
        @media screen and (max-width: 480px) {
          .sanitary_area .sanitary_group .kitchen_group .item.item01 .disposer_group01 .disposer_name {
            font-size: 7vw;
            letter-spacing: 0.1em; } }
      .sanitary_area .sanitary_group .kitchen_group .item.item01 .disposer_group01 .disposer_text_group {
        width: 58.27%; }
        .sanitary_area .sanitary_group .kitchen_group .item.item01 .disposer_group01 .disposer_text_group .disposer_logo_group {
          margin-top: clamp(20px, 2.308vw, 30px); }
          @media screen and (max-width: 480px) {
            .sanitary_area .sanitary_group .kitchen_group .item.item01 .disposer_group01 .disposer_text_group .disposer_logo_group {
              width: 80vw; } }
          .sanitary_area .sanitary_group .kitchen_group .item.item01 .disposer_group01 .disposer_text_group .disposer_logo_group .disposer_logo {
            width: 56.76%; }
            @media screen and (max-width: 820px) {
              .sanitary_area .sanitary_group .kitchen_group .item.item01 .disposer_group01 .disposer_text_group .disposer_logo_group .disposer_logo {
                width: 45%; } }
          .sanitary_area .sanitary_group .kitchen_group .item.item01 .disposer_group01 .disposer_text_group .disposer_logo_group .disposer_cap {
            width: 40.55%;
            font-size: clamp(10px, 0.924vw, 12px);
            line-height: 1.3; }
            @media screen and (max-width: 820px) {
              .sanitary_area .sanitary_group .kitchen_group .item.item01 .disposer_group01 .disposer_text_group .disposer_logo_group .disposer_cap {
                width: 50%; } }
      .sanitary_area .sanitary_group .kitchen_group .item.item01 .disposer_group01 .disposer_photo {
        width: 39.38%; }
    .sanitary_area .sanitary_group .kitchen_group .item.item01 .disposer_group02 {
      align-items: flex-start;
      margin: 10px 0 20px;
      border: 1px solid #000;
      padding: 15px; }
      @media screen and (max-width: 480px) {
        .sanitary_area .sanitary_group .kitchen_group .item.item01 .disposer_group02 {
          flex-direction: column;
          row-gap: 10px;
          padding: 15px 15px 25px; } }
      .sanitary_area .sanitary_group .kitchen_group .item.item01 .disposer_group02 .item_text_group {
        width: 55.8%; }
        @media screen and (max-width: 480px) {
          .sanitary_area .sanitary_group .kitchen_group .item.item01 .disposer_group02 .item_text_group {
            width: 100%; } }
        .sanitary_area .sanitary_group .kitchen_group .item.item01 .disposer_group02 .item_text_group .item_name {
          text-align: left;
          line-height: 1.4;
          font-size: clamp(13px, 1.231vw, 16px); }
          @media screen and (max-width: 480px) {
            .sanitary_area .sanitary_group .kitchen_group .item.item01 .disposer_group02 .item_text_group .item_name {
              font-size: 15px; } }
        .sanitary_area .sanitary_group .kitchen_group .item.item01 .disposer_group02 .item_text_group .item_read {
          font-size: clamp(11px, 1.077vw, 14px); }
          @media screen and (max-width: 480px) {
            .sanitary_area .sanitary_group .kitchen_group .item.item01 .disposer_group02 .item_text_group .item_read {
              font-size: 13px; } }
      .sanitary_area .sanitary_group .kitchen_group .item.item01 .disposer_group02 .disposer_photo {
        width: 42.49%; }
        @media screen and (max-width: 480px) {
          .sanitary_area .sanitary_group .kitchen_group .item.item01 .disposer_group02 .disposer_photo {
            width: fit-content;
            margin: 0 auto; } }
        .sanitary_area .sanitary_group .kitchen_group .item.item01 .disposer_group02 .disposer_photo .cap {
          bottom: auto;
          top: 100%; }
    .sanitary_area .sanitary_group .kitchen_group .item.item01 .disposer_group03 {
      flex-wrap: wrap;
      gap: 10px 0; }
      @media screen and (max-width: 480px) {
        .sanitary_area .sanitary_group .kitchen_group .item.item01 .disposer_group03 {
          gap: 15px 0; } }
      .sanitary_area .sanitary_group .kitchen_group .item.item01 .disposer_group03 .group03_item {
        width: 31.5%; }
        @media screen and (max-width: 480px) {
          .sanitary_area .sanitary_group .kitchen_group .item.item01 .disposer_group03 .group03_item {
            width: 48%; } }
        .sanitary_area .sanitary_group .kitchen_group .item.item01 .disposer_group03 .group03_item .photo {
          position: relative; }
          .sanitary_area .sanitary_group .kitchen_group .item.item01 .disposer_group03 .group03_item .photo .number {
            position: absolute;
            left: 0;
            top: 0;
            width: 19px;
            aspect-ratio: 1;
            line-height: 1;
            text-align: center;
            background: #004d7e;
            font-size: 15px;
            color: #FFF; }
        .sanitary_area .sanitary_group .kitchen_group .item.item01 .disposer_group03 .group03_item .text {
          text-align: center;
          font-size: clamp(10px, 1.077vw, 14px);
          line-height: 1.3;
          margin-top: 5px; }
          @media screen and (max-width: 480px) {
            .sanitary_area .sanitary_group .kitchen_group .item.item01 .disposer_group03 .group03_item .text {
              font-size: 12px; } }
    .sanitary_area .sanitary_group .kitchen_group .item.item01 .disposer_cap_group {
      margin-top: 30px;
      flex-direction: row-reverse;
      column-gap: 30px; }
      @media screen and (max-width: 480px) {
        .sanitary_area .sanitary_group .kitchen_group .item.item01 .disposer_cap_group {
          flex-direction: column;
          gap: 10px 0;
          margin-top: 15px; } }
      .sanitary_area .sanitary_group .kitchen_group .item.item01 .disposer_cap_group .caption {
        font-size: 10px; }
        .sanitary_area .sanitary_group .kitchen_group .item.item01 .disposer_cap_group .caption.first {
          flex-shrink: 0;
          text-align: right; }
  .sanitary_area .sanitary_group .bathroom_group .item .photo .sub_img {
    position: absolute;
    right: -9%;
    bottom: -5%;
    width: 23.89%; }
  .sanitary_area .sanitary_group .bathroom_group .item.item01 {
    grid-column: span 3;
    grid-row: 1/2;
    background: #fffeee;
    padding: clamp(20px, 2.308vw, 30px);
    justify-content: center;
    gap: 0 4.95%;
    flex-direction: row; }
    @media screen and (max-width: 480px) {
      .sanitary_area .sanitary_group .bathroom_group .item.item01 {
        grid-column: span 2;
        grid-row: auto;
        flex-direction: column;
        row-gap: 20px; } }
    .sanitary_area .sanitary_group .bathroom_group .item.item01 .text_group {
      width: 62.67%; }
      @media screen and (max-width: 480px) {
        .sanitary_area .sanitary_group .bathroom_group .item.item01 .text_group {
          width: 100%; } }
      .sanitary_area .sanitary_group .bathroom_group .item.item01 .text_group .eco_logo {
        width: 53.46%;
        margin: 0 auto clamp(20px, 2.308vw, 30px); }
        @media screen and (max-width: 480px) {
          .sanitary_area .sanitary_group .bathroom_group .item.item01 .text_group .eco_logo {
            width: 70%; } }
    .sanitary_area .sanitary_group .bathroom_group .item.item01 .photo {
      width: 28.56%; }
      @media screen and (max-width: 480px) {
        .sanitary_area .sanitary_group .bathroom_group .item.item01 .photo {
          width: 50%;
          margin: 0 auto; } }
      @media screen and (max-width: 480px) {
        .sanitary_area .sanitary_group .bathroom_group .item.item01 .photo .cap {
          position: static; } }
  .sanitary_area .sanitary_group .bathroom_group .item.item14 {
    grid-column: 4 / 5;
    grid-row: 4 / 6; }
    @media screen and (max-width: 480px) {
      .sanitary_area .sanitary_group .bathroom_group .item.item14 {
        grid-column: auto;
        grid-row: 8 / 10; } }
  @media screen and (max-width: 480px) {
    .sanitary_area .sanitary_group .powder_group {
      flex-direction: column;
      row-gap: 30px; } }
  .sanitary_area .sanitary_group .powder_group .powder_in {
    width: 48.55%; }
    @media screen and (max-width: 480px) {
      .sanitary_area .sanitary_group .powder_group .powder_in {
        width: 100%; } }
    .sanitary_area .sanitary_group .powder_group .powder_in.first {
      flex-wrap: wrap;
      gap: 40px 0; }
      .sanitary_area .sanitary_group .powder_group .powder_in.first .item.bottom {
        margin-top: auto; }
        @media screen and (max-width: 480px) {
          .sanitary_area .sanitary_group .powder_group .powder_in.first .item.bottom {
            margin-top: 0; } }
    .sanitary_area .sanitary_group .powder_group .powder_in.second {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 0 5.63%; }
      .sanitary_area .sanitary_group .powder_group .powder_in.second .item {
        width: auto; }
        .sanitary_area .sanitary_group .powder_group .powder_in.second .item.item01 {
          grid-row: 1/3;
          grid-column: 1/2; }
        .sanitary_area .sanitary_group .powder_group .powder_in.second .item.item03 {
          margin-top: 13%; }
          @media screen and (max-width: 480px) {
            .sanitary_area .sanitary_group .powder_group .powder_in.second .item.item03 {
              margin-top: 40px; } }
    .sanitary_area .sanitary_group .powder_group .powder_in .item {
      width: 47.19%;
      display: flex;
      flex-direction: column;
      row-gap: 15px; }
      @media screen and (max-width: 820px) {
        .sanitary_area .sanitary_group .powder_group .powder_in .item {
          row-gap: 5px; } }

/*# sourceMappingURL=quality02.css.map */
