@charset "utf-8";

html,
body {
  height: 100%;
}

header nav > ul > li#works > a > span:last-of-type {
  color: var(--works_color);
}
div#container {
  height: 100%;
  position: relative;
}

article > section:nth-of-type(2) {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto auto;
  justify-content: center;
  justify-items: center;
  & div#title {
    width: 160px;
    height: 35px;
    font-size: 1.8rem;
    font-family: var(--font_kosugi_family);
    font-weight: var(--font_kosugi_weight);
    font-style: var(--font_kosugi_style);
    border: var(--works_border);
    line-height: 1;
    text-align: center;
    padding-top: 8px;
    position: relative;
    top: 17px;
    background-color: #fff;
  }
  & div.images {
    display: grid;
    justify-content: center;
    width: 98vw;
    max-width: 1200px;
    background-color: #e6e6e7;
    border: var(--works_border);
    padding-top: 50px;
    padding-bottom: 40px;
  }
  & figure {
    display: grid;
    justify-items: center;
    & figcaption {
      font-size: 1.2rem;
      padding-top: 10px;
      line-height: 1;
      text-align: center;
    }
  }
}
/* #region 地域発信 */
section#chiiki {
  & > div.images {
    @media screen and (min-width: 950px) {
      grid-template-columns: repeat(3, auto);
      column-gap: min(50px, calc(14.81vw - 130.74px));
      align-content: center;
      justify-content: center;
      height: var(--works_div_images_height);
      & figure img {
        width: auto;
        height: 350px;
      }
    }
    @media screen and (min-width: 600px) and (max-width: 949px) {
      grid-template-columns: 1fr 1fr;
      grid-template-rows: auto auto;
      justify-content: center;
      row-gap: 20px;
      height: auto;
      & figure#p01 {
        grid-row: 1;
        grid-column: 1;
      }
      & figure#p02 {
        grid-row: 2;
        grid-column: span 2;
      }
      & figure#p03 {
        grid-row: 1;
        grid-column: 2;
      }
      & figure img {
        width: auto;
        height: 400px;
      }
    }
    @media screen and (max-width: 599px) {
      grid-template-columns: 1fr;
      grid-template-rows: repeat(3, auto);
      row-gap: 20px;
      height: auto;
      & figure img {
        width: 98%;
        height: auto;
      }
    }
  }
}
/* #endregion */
/* #region 学校関係 */
section#school {
  & > div.images {
    @media screen and (min-width: 950px) {
      grid-template-columns: repeat(3, auto);
      column-gap: min(20px, calc(3.64vw - 24.545px));
      align-content: center;
      justify-content: center;
      padding-left: 30px;
      padding-right: 30px;
      height: var(--works_div_images_height);
      & figure {
        height: fit-content;
        & img {
          width: auto;
          height: min(350px, calc(24vw + 56px));
        }
      }
    }

    @media screen and (min-width: 530px) and (max-width: 949px) {
      grid-template-columns: 1fr 1fr;
      grid-template-rows: auto auto;
      column-gap: 10px;
      row-gap: 10px;
      height: auto;
      & figure {
        height: fit-content;
        & img {
          width: 98%;
          height: auto;
        }
        &#p01 {
          grid-row: 1;
          grid-column: 1;
        }
        &#p02 {
          grid-row: 2;
          grid-column: 1;
        }
        &#p03 {
          grid-row: span 2;
          grid-column: 2;
        }
      }
    }
    @media screen and (max-width: 529px) {
      grid-template-columns: 1fr;
      grid-template-rows: repeat(3, auto);
      row-gap: 20px;
      height: auto;
      & figure img {
        width: 98%;
        height: auto;
      }
    }
  }
}
/* #endregion */
/* #region 観光案内 */
section#kanko {
  & > div.images {
    @media screen and (min-width: 1110px) {
      grid-template-columns: repeat(3, auto);
      column-gap: 10px;
      align-content: center;
      justify-items: baseline;
      padding-left: 30px;
      padding-right: 30px;
      height: var(--works_div_images_height);
      & figure {
        height: fit-content;
        &#p01 img {
          width: auto;
          height: 350px;
        }
        &#p02 img {
          width: auto;
          height: 350px;
        }
        &#p03 img {
          width: 100%;
          height: auto;
        }
      }
    }
    @media screen and (min-width: 600px) and (max-width: 1109px) {
      grid-template-columns: 1fr 1fr;
      grid-template-rows: auto auto;
      column-gap: min(20px, calc(2.67vw - 4.6128px));
      row-gap: 20px;
      justify-items: center;
      height: auto;
      & figure {
        height: fit-content;
        &#p01 {
          grid-row: 1;
          grid-column: 1;
          & img {
            width: auto;
            height: 400px;
          }
        }
        &#p02 {
          grid-row: 1;
          grid-column: 2;
          & img {
            width: auto;
            height: 400px;
          }
        }
        &#p03 {
          grid-row: 2;
          grid-column: span 2;
          & img {
            width: 98%;
            height: auto;
          }
        }
      }
    }
    @media screen and (max-width: 599px) {
      grid-template-columns: 1fr;
      grid-template-rows: repeat(3, auto);
      row-gap: 20px;
      height: auto;
      & figure img {
        width: 98%;
        height: auto;
      }
    }
  }
}
/* #endregion */
/* #region 飲食店関係 */
section#insyoku {
  & > div.images {
    @media screen and (min-width: 1100px) {
      grid-template-columns: repeat(4, auto);
      column-gap: 10px;
      align-content: center;
      justify-content: center;
      padding-left: 30px;
      padding-right: 30px;
      height: var(--works_div_images_height);
      & figure {
        height: fit-content;
        & img {
          width: auto;
          height: 350px;
        }
      }
    }
    @media screen and (min-width: 770px) and (max-width: 1099px) {
      grid-template-columns: 1fr 1fr;
      grid-template-rows: auto auto;
      column-gap: min(20px, calc(2.67vw - 4.6128px));
      row-gap: 20px;
      justify-items: center;
      height: auto;
      & figure {
        height: fit-content;
        & img {
          width: auto;
          height: 500px;
        }
        &#p01 {
          grid-row: 1;
          grid-column: 1;
        }
        &#p02 {
          grid-row: 1;
          grid-column: 2;
        }
        &#p03 {
          grid-row: 2;
          grid-column: 1;
        }
        &#p04 {
          grid-row: 2;
          grid-column: 2;
        }
      }
    }
    @media screen and (max-width: 769px) {
      grid-template-columns: 1fr;
      grid-template-rows: repeat(4, auto);
      row-gap: 20px;
      height: auto;
      & figure img {
        width: 98%;
        height: auto;
      }
    }
  }
}
/* #endregion */
/* #region カタログ */
section#catalog {
  & > div.images {
    grid-template-columns: repeat(3, auto);
    column-gap: min(60px, calc(16.67vw - 143.33px));
    justify-content: center;
    align-content: center;
    height: var(--works_div_images_height);
    @media screen and (min-width: 920px) {
      & figure {
        height: fit-content;
        & img {
          width: auto;
          height: 350px;
        }
      }
    }
    @media screen and (min-width: 720px) and (max-width: 919px) {
      grid-template-columns: 1fr 1fr;
      grid-template-rows: auto auto;
      row-gap: 20px;
      justify-content: center;
      height: auto;
      & figure {
        height: fit-content;
        & img {
          width: auto;
          height: 500px;
        }
        &#p01 {
          grid-row: 1;
          grid-column: span 2;
        }
        &#p02 {
          grid-row: 2;
          grid-column: 1;
        }
        &#p03 {
          grid-row: 2;
          grid-column: 2;
        }
      }
    }
    @media screen and (max-width: 719px) {
      grid-template-columns: 1fr;
      grid-template-rows: repeat(3, auto);
      row-gap: 20px;
      height: auto;
      & figure img {
        width: 98%;
        height: auto;
      }
    }
  }
}
/* #endregion */
/* #region その他 */
section#etc {
  & > div.images {
    @media screen and (min-width: 1200px) {
      grid-template-columns: auto auto;
      align-content: center;
      column-gap: 20px;
      height: var(--works_div_images_height);
      & figure {
        height: fit-content;
        & img {
          width: auto;
          height: 285px;
        }
      }
    }
    @media screen and (min-width: 900px) and (max-width: 1199px) {
      grid-template-columns: auto;
      grid-template-rows: auto;
      row-gap: 20px;
      justify-content: center;
      height: auto;
      & figure {
        height: fit-content;
        & img {
          width: auto;
          height: 400px;
        }
      }
    }
    @media screen and (max-width: 899px) {
      grid-template-columns: 1fr;
      grid-template-rows: repeat(2, auto);
      row-gap: 20px;
      height: auto;
      & figure img {
        width: 98%;
        height: auto;
      }
    }
  }
}
/* #endregion */
/* #region フォトディレクション */
section#photo_d {
  & div#title {
    letter-spacing: -3.2px;
  }
  & > div.images {
    grid-template-columns: repeat(auto-fit, minmax(221.03px, 1fr));
    grid-auto-rows: auto;
    column-gap: 10px;
    align-content: center;
    justify-content: center;

    @media screen and (min-width: 1200px) {
      height: var(--works_div_images_height);
      padding: 0px 10px;
    }
    @media screen and (max-width: 1199px) {
      height: auto;
      padding: 50px 10px;
    }
    @media screen and (min-width: 490px) {
      & figure img {
        width: auto;
        height: 330px;
        /*最も小さい5.pngに合わせてトリミング*/
        object-fit: cover;
        aspect-ratio: 1000 / 1493;
      }
    }
    @media screen and (max-width: 489px) {
      & figure img {
        width: 98%;
        height: auto;
      }
    }
  }
}
/* #endregion */
/* #region wroks footer adjust */
footer#works_footer_chiiki {
  @media screen and (min-width: 950px) {
    position: absolute;
    top: var(--works_footer_position_top);
    padding-bottom: var(--works_footer_padding_bottom);
  }
  @media screen and (max-width: 949px) {
    position: static;
    padding-top: var(--works_footer_padding_top);
  }
}
footer#works_footer_school {
  @media screen and (min-width: 950px) {
    position: absolute;
    top: var(--works_footer_position_top);
    padding-bottom: var(--works_footer_padding_bottom);
  }
  @media screen and (max-width: 949px) {
    position: static;
    padding-top: var(--works_footer_padding_top);
  }
}
footer#works_footer_kanko {
  @media screen and (min-width: 1110px) {
    position: absolute;
    top: var(--works_footer_position_top);
    padding-bottom: var(--works_footer_padding_bottom);
  }
  @media screen and (max-width: 1109px) {
    position: static;
    padding-top: var(--works_footer_padding_top);
  }
}
footer#works_footer_insyoku {
  @media screen and (min-width: 1100px) {
    position: absolute;
    top: var(--works_footer_position_top);
    padding-bottom: var(--works_footer_padding_bottom);
  }
  @media screen and (max-width: 1109px) {
    position: static;
    padding-top: var(--works_footer_padding_top);
  }
}
footer#works_footer_catalog {
  @media screen and (min-width: 920px) {
    position: absolute;
    top: var(--works_footer_position_top);
    padding-bottom: var(--works_footer_padding_bottom);
  }
  @media screen and (max-width: 919px) {
    position: static;
    padding-top: var(--works_footer_padding_top);
  }
}
footer#works_footer_etc {
  @media screen and (min-width: 1200px) {
    position: absolute;
    top: var(--works_footer_position_top);
    padding-bottom: var(--works_footer_padding_bottom);
  }
  @media screen and (max-width: 1199px) {
    position: static;
    padding-top: var(--works_footer_padding_top);
  }
}
footer#works_footer_photo_d {
  @media screen and (min-width: 1200px) {
    position: absolute;
    top: var(--works_footer_position_top);
    padding-bottom: var(--works_footer_padding_bottom);
  }
  @media screen and (max-width: 1199px) {
    position: static;
    padding-top: var(--works_footer_padding_top);
  }
}
/* #endregion */