@charset "UTF-8";

#gallery {
  background: #fffffc;
}

/* ========================================
@media screen and (min-width: 768px), print {
======================================== */
@media screen and (min-width: 768px), print {
  #gallery main.is-archive .system-contents {
    margin-inline: auto;
    width: min(95%, 1200px);
    margin-block: 77px 0;
  }

  #gallery .system-contents {
    margin-inline: auto;
    width: 100%;
  }

  #gallery .system-list {
    display: grid;
    gap: 103px 117px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #gallery .pic-frame {
    margin-bottom: 30px;
  }

  #gallery .system-pic {
    aspect-ratio: auto;
  }

  #gallery .system-pic img {
    height: 420px;
    width: 100%;
  }

  #gallery .system-ttl {
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0em;
    line-height: 2;
    margin-bottom: 0;
  }

  #gallery .system-area {
    color: #787777;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0em;
    line-height: 2.0318571429;
  }

  #gallery .works-meta {
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0em;
    line-height: 2;
    margin-bottom: 134px;
    margin-inline: auto;
    text-align: right;
    width: min(95%, 1200px);
  }

  #gallery .gallery_txt {
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0em;
    line-height: 2.7142857143;
    margin-bottom: 224px;
    margin-inline: auto;
    width: min(95%, 760px);
  }

  #gallery .gallery-image:nth-of-type(odd) .gallery-image-left {
    text-align: right;
  }

  #gallery .gallery-image:nth-of-type(odd) .gallery-image-right {
    text-align: right;
  }

  #gallery .gallery-image.is-last {
    margin-bottom: 150px;
  }

  #gallery .gallery-image-left {
    margin-bottom: 80px;
    margin-inline: auto;
    width: min(95%, 1200px);
  }

  #gallery .gallery-image-left img {
    height: 400px;
    width: 720px;
    -o-object-fit: cover;
    object-fit: cover;
  }

  #gallery .gallery-image-right {
    margin-bottom: 80px;
    margin-inline: auto;
    width: min(95%, 1200px);
  }

  #gallery .gallery-image-right img {
    height: 840px;
    width: 720px;
    -o-object-fit: cover;
    object-fit: cover;
  }

  #gallery .gallery-image-wide img {
    height: 560px;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
  }

  #gallery .gallery-image-lead {
    margin-bottom: 25px;
  }

  #gallery .gallery-image-lead .gallery-image-wide img {
    height: 680px;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
  }

  .c-other__en {
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 0.06em;
    line-height: 1.3333333333;
    margin-bottom: -4px;
    text-align: center;
  }

  .c-other__ttl {
    font-size: 28px;
    font-weight: 400;
    letter-spacing: 0.085em;
    line-height: 2.1428571429;
    margin-bottom: 72px;
    text-align: center;
  }

  .system-contents.--other {
    margin-block: 150px 0;
  }

  #gallery .system-contents.--other .system-list {
    display: grid;
    gap: 100px 120px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 0;
    margin-inline: auto;
    width: min(95%, 1200px);
  }

  #gallery .system-contents.--other .pic-frame {
    margin-bottom: 29px;
  }

  #gallery .system-contents.--other .system-pic img {
    height: 420px;
    width: 100%;
  }

  #gallery .system-contents.--other .system-ttl-01 {
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0em;
    line-height: 2;
    margin-bottom: 0;
  }

  #gallery .system-contents.--other .system-area {
    color: #787777;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0em;
    line-height: 2.0318571429;
  }

  #gallery .wysiwyg {
    margin-bottom: 150px;
    margin-inline: auto;
    width: min(95%, 1200px);
  }
}

/* ========================================
@media screen and (min-width:768px) and ( max-width:1300px) {
======================================== */
@media screen and (min-width: 768px) and (max-width: 1300px) {
  #gallery .system-list {
    display: grid;
    gap: 7.923vw 9vw;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #gallery .pic-frame {
    margin-bottom: 2.308vw;
  }

  #gallery .system-pic {
    aspect-ratio: auto;
  }

  #gallery .system-pic img {
    height: 32.308vw;
    width: 100%;
  }
}

/* ========================================
@media screen and (max-width: 767px) {
======================================== */
@media screen and (max-width: 767px) {
  #gallery main.is-archive .system-contents {
    margin-inline: auto;
    width: min(95%, 86.4734299517vw);
  }

  #gallery .system-contents {
    margin-inline: auto;
    width: 100%;
  }

  #gallery .system-list {
    display: grid;
    gap: 7.246vw;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-block: 14vw 0vw;
  }

  #gallery .pic-frame {
    margin-bottom: 2.899vw;
  }

  #gallery .system-pic {
    aspect-ratio: auto;
  }

  #gallery .system-pic img {
    height: 51.208vw;
    width: 100%;
  }

  #gallery .system-ttl {
    font-size: 3.14vw;
    font-weight: 400;
    letter-spacing: 0em;
    line-height: 1.3846153846;
    margin-bottom: 2vw;
  }

  #gallery .system-area {
    color: #787777;
    font-size: 3.14vw;
    font-weight: 400;
    letter-spacing: 0em;
    line-height: 1;
  }

  #gallery .works-meta {
    font-size: 2.899vw;
    font-weight: 400;
    letter-spacing: 0em;
    line-height: 2;
    margin-bottom: 12.077vw;
    margin-inline: auto;
    text-align: right;
    width: min(95%, 88.4057971014vw);
  }

  #gallery .gallery_txt {
    font-size: 3.382vw;
    font-weight: 400;
    letter-spacing: 0em;
    line-height: 1.8571428571;
    margin-bottom: 9.662vw;
    margin-inline: auto;
    width: min(95%, 82.1vw);
  }

  #gallery .gallery-image:nth-of-type(odd) .gallery-image-left {
    text-align: right;
  }

  #gallery .gallery-image:nth-of-type(odd) .gallery-image-right {
    text-align: right;
  }

  #gallery .gallery-image.is-last {
    margin-bottom: 14.493vw;
  }

  #gallery .gallery-image-left {
    margin-bottom: 4.831vw;
    margin-inline: auto;
    width: min(95%, 89.3vw);
  }

  #gallery .gallery-image-left img {
    height: 49.758vw;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
  }

  #gallery .gallery-image-right {
    margin-bottom: 4.831vw;
    margin-inline: auto;
    width: min(95%, 89.3vw);
  }

  #gallery .gallery-image-right img {
    height: 103.865vw;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
  }

  #gallery .gallery-image-wide img {
    height: 57.971vw;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
  }

  .gallery-image-lead {
    margin-bottom: 2.415vw;
  }

  .c-other__en {
    font-size: 3.382vw;
    font-weight: 400;
    letter-spacing: 0.06em;
    line-height: 1;
    margin-bottom: 0;
    text-align: center;
  }

  .c-other__ttl {
    font-size: 5.797vw;
    font-weight: 400;
    letter-spacing: 0.06em;
    line-height: 2.5;
    margin-bottom: 14.493vw;
    text-align: center;
  }

  .system-contents.--other {
    margin-block: 14.493vw 0;
  }

  #gallery .system-contents.--other .system-list {
    display: grid;
    gap: 7.246vw;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-inline: auto;
    width: min(95%, 86.4734299517vw);
  }

  #gallery .system-contents.--other .pic-frame {
    margin-bottom: 0;
  }

  #gallery .system-contents.--other .system-pic img {
    height: 51.208vw;
    width: 100%;
  }

  #gallery .system-contents.--other .system-ttl-01 {
    font-size: 3.14vw;
    font-weight: 400;
    letter-spacing: 0em;
    line-height: 1.3846153846;
    margin-bottom: 2vw;
  }

  #gallery .system-contents.--other .system-area {
    color: #787777;
    font-size: 3.14vw;
    font-weight: 400;
    letter-spacing: 0em;
    line-height: 1;
  }

  #gallery .wysiwyg {
    margin-bottom: 12.077vw;
    margin-inline: auto;
    width: min(95%, 82.1vw);
  }
}