@charset "utf-8";

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

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

article > section#locale_main {
  display: grid;
  column-gap: 40px;
  width: 98vw;
  max-width: 780px;
  margin: 0px auto;

  & div#locale_right > div > p {
    color: #53b332;
  }

  @media screen and (min-width: 600px) {
    grid-template-columns: 45% 1fr;
    padding: 40px 0px 0px 0px;

    & > div#locale_left {
      & img {
        width: 100%;
        height: auto;
      }
    }

    & > div#locale_right {
      display: grid;
      grid-template-columns: 45% 1fr;
      grid-template-rows: auto auto;
      column-gap: 15px;
      row-gap: 10px;
      & img {
        width: 100%;
        height: auto;
      }
      & > img {
        grid-row: 1;
        grid-column: 1 / 3;
      }
      & > figure {
        grid-row: 2;
        grid-column: 1;
        & > figcaption {
          font-size: 1.2rem;
        }
      }
      & > div {
        grid-row: 2;
        grid-column: 2;
        & > p {
          font-size: min(1.3rem, calc(2vw - 0.2rem));
        }
      }
    }
  }

  @media screen and (max-width: 599px) {
    grid-template-columns: 100%;
    grid-template-rows: auto auto;
    justify-content: center;

    & > div#locale_left {
      & img {
        width: 100%;
        height: auto;
      }
    }

    & > div#locale_right {
      display: grid;
      grid-template-columns: 45% 1fr;
      grid-template-rows: repeat(2, auto);
      column-gap: 15px;
      row-gap: 10px;
      & img {
        width: 100%;
        height: auto;
      }
      & > img {
        grid-row: 1;
        grid-column: 1 / 3;
      }
      & > figure {
        grid-row: 2;
        grid-column: 1;
        & > figcaption {
          font-size: 1.2rem;
        }
      }
      & > div {
        grid-row: 2;
        grid-column: 2;
        & > p {
          font-size: min(1.3rem, calc(4.29vw - 0.28571rem));
        }
      }
    }
  }
}
footer.common {
  & div#locale_footer {
    font-family: var(--font_mincho);
  }
  @media screen and (min-width: 720px) {
    /* position: absolute;
    top: var(--works_footer_position_top); */
    padding-top: 40px;
    padding-bottom: var(--works_footer_padding_bottom);
  }
  @media screen and (max-width: 719px) {
    /* position: static; */
    padding-top: var(--works_footer_padding_top);
  }
}