html {
  scroll-padding-top: 70px;
  @media only screen and (max-width: 619px) {
    scroll-padding-top: 100px;
  }

  scroll-behavior: smooth;
}

#products {
  .products_container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 70px;
    padding-bottom: 104px;

    aside.aside3 {
      width: 230px;
      order: 1;
      display: flex;
      flex-direction: column;
      border: solid 1px rgba(0, 0, 0, 0.1);
      box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
      background-color: var(--color-gray1);
      @media only screen and (max-width: 619px) {
        width: 100%;
        box-shadow: none;
      border: none;
      }
      > ul {
        display: flex;
        margin: 0;
        flex-wrap: wrap;
        flex-direction: column;
        align-items: stretch;
        @media only screen and (max-width: 619px) {
          flex-direction: row;
        }
        /*
        &.ret {
          li {
            a {
              color: var(--color-green2);
            }
          }
        }
        */

        li {
          font-size: 120%;
          font-weight: bold;
          background-color: var(--color-gray1);
          color: white;
          position: relative;
          border-bottom: solid 1px rgba(0, 0, 0, 0.3);
          list-style: none;
          @media only screen and (max-width: 619px) {
            font-size: 100%;
            width: calc(100% / 2);
          }
          a {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px;
            color: black;
            text-decoration: none;
            &:after {
              content: "";
              display: block;
              width: 7px;
              height: 7px;
              border-top: solid 2px black;
              border-right: solid 2px black;
              transform: rotate(45deg);
            }
          }
          &.active {
            background-color: var(--color-green2);
            a {
              color: white;
              &:after {
                border-top: solid 2px white;
                border-right: solid 2px white;
              }
            }
          }
        }
      }
      dl {
        background-color: var(--color-gray1);
        border-bottom: solid 1px #aaa;
      @media only screen and (max-width: 619px) {
        border-bottom: none;
      }
        > div {
          dt {
            font-weight: bold;
            font-size: 120%;
            padding: 20px;
            @media only screen and (max-width: 619px) {
              font-size: 100%;
            }
          }
          dd {
            ul {
              margin: 0;
              display: flex;
              flex-wrap: wrap;
              flex-direction: column;
              @media only screen and (max-width: 619px) {
                flex-direction: row;
                gap: 0;
              }
              li {
                padding: 2px 0px 2px 20px;
                list-style: none;
                display: flex;
                gap: 10px;
                @media only screen and (max-width: 619px) {
                  width: calc(100% / 3 - 10px);
                  padding: 2px 0px 2px 10px;
                  gap: 0;
                }
                &:before {
                  content: "-";
                  padding: 10px 0;
                  @media only screen and (max-width: 619px) {
                    color: var(--color-black);
                  }
                }
                a {
                  color: black;
                  text-decoration: none;
                  width: 100%;
                  padding: 10px 0 10px 10px;
                }
                &.active {
                  background-color: var(--color-green2);
                  @media only screen and (max-width: 619px) {
                    background-color: white;
                  }
                  &:before {
                    font-weight: bold;
                    @media only screen and (max-width: 619px) {
                      color: red;
                    }
                  }
                  a {
                    font-weight: bold;
                    color: white;
                    @media only screen and (max-width: 619px) {
                      color: red;
                    }
                  }
                }
              }
            }
          }
          &.active {
            dt {
              color: white;
              background-color: var(--color-green2);
            }
            dd {
              color: white;
              background-color: #afafaf;
              ul {
                li {
                  border-bottom:solid 1px white;
                  @media only screen and (max-width: 619px) {
                    border-bottom:none;
                  }
                }
              }
              a {
                color: inherit;
              }
            }
          }
        }
        /* 製品紹介のスマホでの挙動違い  */
        @media only screen and (max-width: 619px) {
          > div {
            dt {
              display: flex;
              flex-wrap: wrap;
              align-items: center;
              justify-content: space-between;
              padding: 20px;
              &:after {
                content: "";
                display: block;
                width: 7px;
                height: 7px;
                border-top: solid 2px black;
                border-right: solid 2px black;
                transform: rotate(45deg);
              }
            }
            dd {
              display: none;
            }
            &.active {
              dt {
                &:after {
                  border-top: solid 2px white;
                  border-right: solid 2px white;
                }
              }
              dd {
                background-color: #fff;
                a {
                  color: var(--color-black);
                }
              }
            }
          }
          &.active {
            dd {
              display: block;
            }
          }
        }
      }
      .addr {
        @media only screen and (max-width: 619px) {
          display: none;
        }
        padding: 20px 20px;
        span {
          display: block;
          border: solid 1px;
          text-align: center;
          font-weight: bold;
          font-size: 100%;
          padding: 2px;
          margin-bottom: 10px;
          @media only screen and (max-width: 619px) {
            font-size: 100%;
            margin-bottom: 5px;
          }
        }
        p {
          font-size: 120%;
          @media only screen and (max-width: 619px) {
            font-size: 100%;
            br {
              display: none;
            }
          }
        }
      }
    }
    article {
      width: 700px;
      @media only screen and (max-width: 619px) {
        width: 100%;
      }
      /*
      h2 {
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 50px;
        margin-bottom: 50px;
        padding: 10px;
        color: var(--color-green2);
        border-top: solid 3px;
        border-bottom: solid 3px;
        &.about {
          color: white;
          background-color: var(--color-green2);
        }
      }
      */
    }
  }

  /* 以下は詳細ページごとに切り分け  */
  #products_plastics {
    justify-content: flex-start !important;
    /*border: solid red 5px;*/
    /* トップページ */
    &.index {
      padding: 50px 0;
      section {
        text-align: center;
        padding: 50px 0px;
        width: 900px;
        margin: auto;
        @media only screen and (max-width: 619px) {
          width: 100%;
        }
        ul {
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
          margin: 30px 0 0;
          gap: 20px;
          @media only screen and (max-width: 619px) {
            gap: 10px;
          }
          li {
            width: calc(100% / 2 - 10px);
            list-style: none;
            margin: 0;
            overflow: hidden;
            @media only screen and (max-width: 619px) {
              width: 100%;
            }
            a {
              display: block;
              position: relative;
              text-decoration: none;
              overflow: hidden;
              img {
                object-fit: cover;
                aspect-ratio: 5/2;
                position: relative;
                z-index: 1;
                transition: 0.5s transform ease;
              }
              &:before {
                content: "";
                display: block;
                width: 100%;
                height: 100%;
                aspect-ratio: 5/2;
                position: absolute;
                top: 0;
                z-index: 2;
                /*background-color: rgba(0, 0, 0, 0.3);*/
              }
              span {
                position: relative;
                z-index: 3;
              }
              &:hover {
                img {
                  transform: scale(1.05);
                }
              }
            }
          }
          &.t2,
          &.t4 {
            li {
              a {
                span {
                  position: absolute;
                  top: 50%;
                  left: 50%;
                  transform: translate(-50%, -50%);
                  color: white;
                  font-size: 140%;
                  font-weight: bold;
                  letter-spacing: 0.5rem !important;
                  text-shadow: 1px 1px 12px rgba(0, 0, 0, 2);
                  display: flex;
                  flex-wrap: wrap;
                  letter-spacing: 0.1rem;
                  justify-content: center;
                  flex-direction: column;
                  gap: 18px;
                  @media only screen and (max-width: 619px) {
                    font-size: 100%;
                  }
                  &:after {
                    content: "VIEW MORE >";
                    display: block;

                    padding: 3px 40px;
                    font-family: "DIN Engschrift";
                    font-size: 100%;
                    text-shadow: none;
                    letter-spacing: 0.2rem;
                    color: var(--color-green2);
                    background-color: rgba(255, 255, 255, 0.8);
                    border: solid rgba(255, 255, 255, 0.8) 1px;
                  }
                }
                &:hover {
                  &:before {
                    background-color: rgba(0, 0, 0, 0.3);
                    /*height: 100%;
                    display: block;
                    position: absolute;
                    top: 0;*/
                  }
                  span {
                    &:after {
                      color: white;
                      background-color: rgba(56, 103, 131, 1);
                    }
                  }
                }
              }
            }
          }
          &.t4 {
            @media only screen and (max-width: 619px) {
              justify-content: space-between;
            }
            li {
              width: calc(100% / 3 - 20px);
              @media only screen and (max-width: 619px) {
                width: calc(100% / 2 - 5px);
              }
              a {
                &:before {
                  aspect-ratio: 3/2;
                }
                img {
                  aspect-ratio: 3/2;
                }
                span {
                  width: 100%;
                  &:after {
                    display: none;
                  }
                }
              }
              &.soon {
                position: relative;

                a {
                  pointer-events: none;
                }
                &:before {
                  position: absolute;
                  top: 50%;
                  left: 50%;
                  transform: translate(-50%, -50%) rotate(-25deg);
                  z-index: 30;
                  content: "coming soon";
                  display: block;
                  font-size: 200%;
                  width: 100%;
                  color: rgba(255, 255, 255, 0.8);
                  text-shadow: 1px 1px 0 #a9ceec, -1px -1px 0 #a9ceec,
                  -1px 1px 0 #a9ceec, 1px -1px 0 #a9ceec, 0px 1px 0 #a9ceec,
                  0-1px 0 #a9ceec, -1px 0 0 #a9ceec, 1px 0 0 #a9ceec;
                  opacity: 0.8;
                  letter-spacing: 0.2rem;
                  @media only screen and (max-width: 620px) {
                    font-size: 130%;
                  }
                }
              }
            }
          }
        }
        h2 {
          display: flex;
          flex-wrap: wrap;
          flex-direction: column;
          span {
            font-size: 140%;
            @media only screen and (max-width: 619px) {
              font-size: 100%;
            }
            &.font_dine {
              color: var(--color-green2);
              font-size: 200%;
              display: flex;
              flex-wrap: nowrap;
              justify-content: center;
              align-items: center;
              gap: 20px;
              @media only screen and (max-width: 619px) {
                font-size: 150%;
              }
              &:before,
              &:after {
                content: "";
                display: block;
                width: 20px;
                height: 1px;
                background-color: var(--color-green2);
              }
            }
            + span {
              font-size: 80%;
              color: var(--color-green2);
              @media only screen and (max-width: 619px) {
                font-size: 70%;
              }
            }
          }
          &.h2_products {
            margin-bottom: 50px;
          }
        }
        .certain_range {
          border-top: solid 1px var(--color-green2);
          position: relative;
          &:before,
          &:after {
            content: "";
            display: block;
            width: 1px;
            height: 30px;
            background-color: var(--color-green2);
          }
          &:after {
            position: absolute;
            top: 0;
            right: 0;
          }
          h2 {
            font-weight: bold;
            font-size: 150%;
            color: var(--color-green2);
            @media only screen and (max-width: 619px) {
              font-size: 120%;
              text-align: left;
              br {
                display: none;
              }
            }
          }
          p {
            color: var(--color-green2);
            font-size: 120%;
            font-weight: bold;
            @media only screen and (max-width: 619px) {
              font-size: 100%;
              text-align: left;
              br {
                display: none;
              }
            }
          }
        }
      }
    }

    /* 共通 */
    .ht_2,
    .ht_4 {
      margin-top: 0;
    }
    .h3 {
      display: flex;
      align-items: center;
      gap: 20px;
      margin-bottom: 20px;
      padding-bottom: 20px;
      border-bottom: solid 1px var(--color-green2);
      color: var(--color-green2);
      letter-spacing: 0.3rem;
      &:before {
        content: "";
        display: inline-block;
        width: 6px;
        height: 30px;
        background-color: var(--color-green2);
      }
    }

    .navy {
      color: var(--color-green2);
      font-weight: bold;
    }

    .conts_box {
      display: flex;
      justify-content: space-between;
      @media only screen and (max-width: 619px) {
        flex-wrap: wrap;
        justify-content: center;
      }
      .img {
        width: 333px;
        @media only screen and (max-width: 619px) {
          width: 100%;
          max-width: 333px;
        }
        img {
          padding-bottom: 10px;
        }
      }

      .text {
        width: 337px;
        @media only screen and (max-width: 619px) {
          width: 100%;
          /*max-width: 337px;*/
        }
        p {
          line-height: 2.3;
          padding-bottom: 30px;
        }
      }
    }

    /* /.共通 */
  }
  /* 塩化ビニール */
  .vinyl_chloride {
    @media only screen and (max-width: 619px) {
      padding: 0 !important;
    }

    > div {
      @media only screen and (max-width: 619px) {
        padding: 0 20px;
      }
      .ht_4 {
        margin-top: 0!important;
      }
      img {
        display: block;
        width: 640px;
        margin: 0 auto;
        padding-bottom: 70px;
        @media only screen and (max-width: 619px) {
          width: 100%;
        }
      }

      p {
        .navy {
          color: var(--color-green2);
          font-weight: bold;
        }
      }
    }
    .table_box {
      @media only screen and (max-width: 619px) {
        overflow-x: scroll;
        max-width: 100%;
      }

      table {
        border-collapse: collapse;
        border: 2px solid var(--color-green2);

        tr {
          &:nth-of-type(odd) {
            background: #f2f5f7;
          }

          th,
          td {
            border: 1px solid var(--color-green2);
            padding: 20px;
            @media only screen and (max-width: 619px) {
              padding: 10px;
              /*width: 100px;*/
            }
          }

          th {
            text-align: center;
            color: var(--color-green2);

            width: 200px;
            white-space: nowrap;
          }
          td {
            color: var(--color-green2);

            white-space: nowrap;
          }
        }
      }
    }
  }

  /* 化成品の強み */
  .chemical {
    @media only screen and (max-width: 619px) {
      padding: 0 !important;
    }
    > section {
      @media only screen and (max-width: 619px) {
        padding: 0 20px;
      }
      > p {
        /*line-height: 2.3;*/
        /*margin-bottom: 55px;*/
      }

      > img {
        padding-bottom: 70px;
      }

      > section {
        span {
          display: inline-block;
          padding-bottom: 40px;
        }

        ul {
          display: flex;
          gap: 25px;
          margin-left: 0;
          padding-bottom: 65px;
          @media only screen and (max-width: 619px) {
            flex-wrap: wrap;
            width: 100%;
            /*width: calc((100% - 20px) / 2);*/
            gap: 20px;
          }
          li {
            list-style-type: none;
            @media only screen and (max-width: 619px) {
              width: calc((50% - 80px));
              min-width: 120px;
              white-space: nowrap;
            }
            a {
              text-decoration: underline;
              color: black;
            }

            &:before {
              content: "-";
              display: inline-block;
              width: 5px;
              height: 3px;
              padding-right: 5px;
            }
          }
        }

        .item {
          padding-bottom: 50px;
          span {
            display: inline-block;
            margin-bottom: 15px;
            padding: 0 15px;
            color: white;
            font-weight: bold;
            background: var(--color-green2);
          }
          > div {
            padding-left: 50px;
            @media only screen and (max-width: 619px) {
              padding-left: 0;
            }
            img {
              display: block;
              width: 600px;
              padding-bottom: 20px;
              @media only screen and (max-width: 619px) {
                width: 100%;
              }
            }

            p {
              line-height: 2.3;
            }
          }
        }
      }
    }
  }
  /* 品質保証 */
  .quality_assurance {
    .navy {
      padding-bottom: 20px;
      font-size: 1.13em;
      color: var(--color-green2);
    }

    > p {
      /*padding-bottom: 30px;*/
      /*line-height: 2.3;*/
    }

    ol {
      margin-left: 0;
      padding-bottom: 75px;
      li {
        /*margin-bottom: 30px;*/
        list-style-type: none;
        .midashi {
          display: block;
          padding: 5px 10px;
          background: linear-gradient(to right, var(--color-green2), #fff);
          font-size: 1.13em;
          color: white;
          font-weight: bold;
          margin-bottom: 20px;
        }

        &:last-of-type {
          margin-bottom: 0;
        }
      }
    }

    .testing {
      .midashi2 {
        display: flex;
        align-items: center;
        padding-bottom: 45px;
        font-size: 1.3em;
        letter-spacing: 0.7rem;
        white-space: nowrap;

        &:after {
          content: "";
          display: inline-block;
          width: 100%;
          height: 1px;
          background: #000;
        }
      }

      .box {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 45px 0;
        .item {
          width: calc((100% - 30px) / 2);
          img {
            /*width: 332px;*/
            display: block;

            @media only screen and (max-width: 619px) {
              width: 100%;
            }
          }

          span.text {
            display: block;
            text-indent: -1.6rem;
            margin-left: 1.6rem;
          }
        }
      }
    }
  }
  /* 環境リサイクル */
  .environmental_recycling {
    > p {
      padding-bottom: 45px;
      line-height: 2.3;
    }

    .video {
      position: relative;
      span {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-46%, -54%);
        width: 60px;
        background-color: rgba(255, 0, 0, 1);
        border-radius: 50%;
        aspect-ratio: 1/1;
        &:before {
          content: "▲";
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-40%, -50%) rotate(90deg) scale(2);
          color: white;
        }
      }
      video {
        aspect-ratio: 700/394;
        border: solid 2px var(--color-green2);
        @media only screen and (max-width: 620px) {
          width: 100%;
          height: auto;
        }
      }
    }
  }

  /* 透明フィルム */
  .film {
    .conts_box {
      .text {
        img {
          display: block;
          padding-bottom: 20px;
          @media only screen and (max-width: 619px) {
            max-width: 337px;
            width: 100%;
            margin: auto;
          }
        }
      }
    }
  }

  /* 土木シート */
  .civil_engineering_sheet {
  }

  /* 間仕切り */
  .partition {
    .conts_box {
      .text {
        a {
          position: relative;
          display: block;
          padding: 20px 30px;
          background: var(--color-green2);
          color: white;
          font-weight: bold;
          text-align: center;
          letter-spacing: 0.2rem;

          &:after {
            content: ">";
            display: inline-block;
            color: white;
            width: 16px;
            height: 16px;
            padding-left: 10px;
          }
        }
      }
    }
  }
  /* 河川シート */
  .river_sheet {
  }

  /* SWA（スワ）バイオ */
  .swabio {
    @media only screen and (max-width: 619px) {
      padding: 0 !important;
    }
    > div {
      @media only screen and (max-width: 619px) {
        padding: 0 20px;
      }
    }

    .conts_box {
      flex-wrap: wrap;
      .img {
        span {
        }

        > div {
          &:first-of-type {
            border: solid gray 1px;
            width: 200px;
            margin: 0 auto 30px auto;
            /*padding-bottom: 20px;*/
            @media all and (max-width: 619px) {
              width: 100%;
              max-width: 200px;
            }
          }
          &:not(:first-of-type) {
            padding-bottom: 20px;
          }
        }
      }

      .text {
        > div {
          padding: 30px 0 20px 0;
          border-bottom: dotted 2px navy;
          .merit {
            display: block;
            padding-bottom: 20px;
            height: 40px;
          }

          .midashi {
            display: block;
            font-weight: bold;
            color: var(--color-green2);
          }

          &:nth-of-type(2) {
            .m1 {
              /*width: 216px;*/
            }
          }

          &:nth-of-type(3) {
            .m2 {
              /*width: 288px;*/
            }
            p {
              padding-bottom: 30px;
            }
          }

          &:nth-of-type(4) {
            .m3 {
              /*width: 288px;*/
            }

            > div {
              @media only screen and (max-width: 619px) {
                overflow-x: auto;
              }

              &:nth-of-type(1) {
                margin-bottom: 30px;
                img {
                  display: block;
                  max-width: 100%;
                }
              }
              &:nth-of-type(2) {
                img {
                  display: block;
                  max-width: 100%;
                }
              }
            }
          }

          &:first-of-type {
            padding-top: 0;
          }

          &:last-of-type {
            border-bottom: initial;
          }
        }
      }
      .text.text2 {
        min-width: 100%;
        > div {
          width: 100%;
        }
        .indent {
          text-indent: -1.2rem;
          margin-left: 2rem;
        }
      }
    }
  }
  /* バクテガード  */
  .bacteguard {
    @media only screen and (max-width: 619px) {
      padding: 0 !important;
    }

    > div {
      @media only screen and (max-width: 619px) {
        padding: 0 20px;
      }
    }

    .conts_box {
      flex-wrap: wrap;
    }

    .text.text2 {
      min-width: 100%;
      > div {
        width: 100%;
        dl.bacteria {
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
          > div {
            background-color: black;
            color: white;
            padding: 10px;
            width: calc(100% / 2 - 20px);
            @media only screen and (max-width: 619px) {
              width: 100%;
            }
            dt {
              text-align: center;
              white-space: nowrap;
            }
            dd {
              > div {
                display: flex;
                flex-wrap: nowrap;
                justify-content: center;
                gap: 20px;
                span {
                  color: white;
                  font-weight: normal;
                  @media only screen and (max-width: 619px) {
                    font-size: 90%;
                  }
                  &:last-of-type {
                    color: yellow;
                  }
                }
              }
            }
          }
        }
      }
    }
    .img {
      img {
        display: block;
        margin-bottom: 30px;
      }
    }
    .text {
      .firm_info {
        display: block;
        margin-bottom: 20px;
        padding: 5px 30px;
        font-weight: bold;
        color: var(--color-green2);
        background: #d6dfe6;
        text-align: center;
      }
      .midashi {
        display: block;
        font-weight: bold;
        color: var(--color-green2);
      }

      ul {
        margin-left: 0;
        li {
          list-style-type: none;
          span {
          }

          .red {
            display: inline-block;
            margin-bottom: 50px;
            padding: 3px 10px;
            color: #d24959;
            border: solid #d24959 1px;
            text-align: center;
            min-width: 250px;
          }

          a {
            position: relative;
            display: block;
            padding: 10px 20px;
            border-radius: 30px;
            background: #000;
            color: white;
            font-weight: bold;
            text-align: center;
            letter-spacing: 0.3rem;

            &:after {
              display: inline-block;
              content: "";
              position: absolute;
              top: 55%;
              transform: translateY(-50%);
              background-image: url(../images/products/plastics/bacteguard/arrow.png);
              background-size: 25px;
              background-repeat: no-repeat;
              width: 27px;
              height: 27px;
            }
          }
        }
      }
    }
  }
}
