@charset "utf-8";

html,
body {
  height: 100%;
}
div#container {
  height: 100%;
  position: relative;
}

header nav > ul > li#works > a > span:last-of-type {
  color: var(--works_color);
}

article > section#works_top_main {
  display: grid;
  width: 98vw;
  max-width: 780px;
  margin: 0px auto;
  --font-size: 1.8rem;
  --line-height: 1.3;
  @media screen and (min-width: 720px) {
    grid-template-columns: 340px 1fr;
    padding: 40px 0px 0px 0px;
  }
  @media screen and (max-width: 719px) {
    grid-template-columns: min(340px, 99%);
    grid-template-rows: repeat(2, auto);
    justify-content: center;
  }
  & > div#works_top_left {
    & > div:first-of-type > p {
      font-size: min(var(--font-size), calc(5vw + 0.1rem));
      line-height: var(--line-height);
      font-family: var(--font_kosugi_family);
      font-weight: var(--font_kosugi_weight);
      font-style: var(--font_kosugi_style);
    }
    & > div:last-of-type > p {
      font-family: var(--font_mincho);
      font-weight: 400;
      line-height: 1.5;
      font-size: 1.5rem;
      letter-spacing: -1px;
      text-align: justify;
      @media screen and (min-width: 720px) {
        padding-top: 30px;
      }
      @media screen and (max-width: 719px) {
        padding-top: 20px;
      }
    }
  }

  & > div#works_top_right {
    @media screen and (min-width: 720px) {
      justify-self: end;
    }
    @media screen and (max-width: 719px) {
      padding-top: 40px;
    }
    & > div:first-of-type > p:first-of-type {
      font-size: var(--font-size);
      line-height: var(--line-height);
      font-family: var(--font_kosugi_family);
      font-weight: var(--font_kosugi_weight);
      font-style: var(--font_kosugi_style);
      @media screen and (max-width: 719px) {
        text-align: center;
      }
    }
    & > div:first-of-type > p:last-of-type {
      font-size: 1.2rem;
      line-height: var(--line-height);
      font-family: var(--font_kosugi_family);
      font-weight: var(--font_kosugi_weight);
      font-style: var(--font_kosugi_style);
      padding-top: 8px;
    }
    & ul {
      display: grid;
      list-style: none outside none;
      padding-top: 20px;
      @media screen and (min-width: 360px) {
        grid-template-columns: repeat(2, 160px);
        grid-template-rows: repeat(4, 35px);
        column-gap: 20px;
        row-gap: 20px;
      }
      @media screen and (max-width: 359px) {
        grid-template-columns: 160px;
        grid-template-rows: repeat(7, 35px);
        row-gap: 10px;
        justify-content: center;
      }
      & > li {
        font-size: var(--font-size);
        line-height: var(--line-height);
        font-family: var(--font_kosugi_family);
        font-weight: var(--font_kosugi_weight);
        font-style: var(--font_kosugi_style);
        border: var(--works_border);
        text-align: center;
        padding-top: 5.3px;
        @media screen and (min-width: 360px) {
          &#chiiki {
            grid-column: 1;
            grid-row: 1;
          }
          &#school {
            grid-column: 1;
            grid-row: 2;
          }
          &#kanko {
            grid-column: 1;
            grid-row: 3;
          }
          &#insyoku {
            grid-column: 1;
            grid-row: 4;
          }
          &#catalog {
            grid-column: 2;
            grid-row: 1;
          }
          &#etc {
            grid-column: 2;
            grid-row: 2;
          }
          &#photo_d {
            grid-column: 2;
            grid-row: 3;
          }
        }
        &#photo_d {
          letter-spacing: -3.2px;
        }
      }
    }
  }
}
footer.common {
  @media screen and (min-width: 720px) {
    position: absolute;
    top: var(--works_footer_position_top);
    padding-bottom: var(--works_footer_padding_bottom);
  }
  @media screen and (max-width: 719px) {
    position: static;
    padding-top: var(--works_footer_padding_top);
  }
}