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

  /* 以下は詳細ページごとに切り分け  */
  #products_shoes {
    /*border: solid red 5px;*/
    /* トップページ */
    &.index {
      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;
              text-decoration: none;
              position: relative;
              overflow: hidden;
              img {
                object-fit: cover;
                aspect-ratio: 5/2;
                position: relative;
                z-index: 1;
                transition: 0.5s transform ease;
              }
              &:hover {
                img {
                  transform: scale(1.05);
                }
              }
              &:before {
                content: "";
                display: block;
                width: 100%;
                height: 100%;
                position: absolute;
                z-index: 2;
                background-color: rgba(0, 0, 0, 0.2);
              }
              > div {
                position: absolute;
                z-index: 3;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                justify-content: space-between;
                flex-direction: column;
                width: 100%;
                aspect-ratio: 5/2;
                .s_title {
                  position: absolute;
                  z-index: 4;
                  top: 50%;
                  left: 50%;
                  color: white;
                  font-size: 140%;
                  font-weight: bold;
                  transform: translate(-50%, -50%);
                }
                > div {
                  position: absolute;
                  display: flex;
                  flex-wrap: wrap;
                  justify-content: center;
                  bottom: 10px;
                  z-index: 4;
                  > span {
                    padding: 5px 10px;
                    @media only screen and (max-width: 619px) {
                      font-size: 70%;
                    }
                    &:nth-of-type(1) {
                      background-color: rgba(255, 255, 255, 0.8);
                    }
                    &:nth-of-type(2) {
                      color: white;
                      background-color: rgba(0, 0, 0, 0.5);
                    }
                  }
                }
              }
              &:hover {
                > div {
                  > div {
                    > span {
                      &:nth-of-type(1) {
                        color: white;
                        background-color: var(--color-green2);
                      }
                      &:nth-of-type(2) {
                        color: black;
                        background-color: rgba(255, 255, 255, 0.8);
                      }
                    }
                  }
                }
              }

              &:before {
                content: "";
                display: block;
                width: 100%;
                aspect-ratio: 5/2;
                position: absolute;
                z-index: 2;
              }
            }
          }
          &.t1 {
            position: relative;
            width: 100%;
            li {
              width: 100%;
              overflow-y: hidden;
              a {
                background-color: #f6f6f6;
                display: flex;
                align-items: center;
                @media only screen and (max-width: 619px) {
                  aspect-ratio: 5/2;
                }
                img {
                  aspect-ratio: initial;
                }
                &:before {
                  display: none;
                }

                > div {
                  /*position: absolute;
                  z-index: 3;
                  top: 50%;
                  left: 50%;
                  transform: translate(-50%, -50%);
                  display: flex;
                  flex-wrap: wrap;
                  align-items: center;
                  justify-content: space-between;
                  flex-direction: column;
                  width: 100%;
                  aspect-ratio: 5/2;*/
									aspect-ratio: 900/171;
                  .s_title {

                    position: absolute;
                    z-index: 40;
                    top: 0;
                    left: 50%;
                    color: white;
                    font-size: 140%;
                    font-weight: bold;
                    /*transform: translate(-50%, -50%);*/
                  }
                  > div {
                    position: absolute;
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: center;
                    bottom: 10px;
                    z-index: 4;
                    > span {
                      padding: 5px 10px;
                      @media only screen and (max-width: 619px) {
                        font-size: 70%;
                      }
                      &:nth-of-type(1) {
                        /*background-color: rgba(255, 255, 255, 0.8);*/
                      }
                      &:nth-of-type(2) {
                        color: white;
                        background-color: rgba(0, 0, 0, 0.5);
                      }
                    }
                  }
                }
                &:hover {
                  > div {
                    > div {
                      > span {
                        &:nth-of-type(1) {
                          color: white;
                          background-color: var(--color-green2);
                        }
                        &:nth-of-type(2) {
                          color: black;
                          background-color: rgba(255, 255, 255, 0.8);
                        }
                      }
                    }
                  }
                }

                &:before {
                  content: "";
                  display: block;
                  width: 100%;
                  aspect-ratio: 5/2;
                  position: absolute;
                  z-index: 2;
									background: initial;
                }
              }
            }
          }
        }
        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;
          }
        }
      }
    }
  }
}