/*! Writen  by SCSS */
.breadlist {
  display: none; }

.bg_wrap {
  position: relative;
  z-index: 5;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); }
  .bg_wrap::after {
    content: "";
    position: fixed;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100lvh;
    background: url("../images/gallery/bg.jpg") top left/cover; }
    @media screen and (max-width: 480px) {
      .bg_wrap::after {
        background: url("../images/gallery/bg_sp.jpg") top center/cover; } }

.list {
  padding-bottom: 180px; }
  @media screen and (max-width: 480px) {
    .list {
      padding-bottom: 50px; } }
  .list .sec_wrap {
    display: flex;
    flex-direction: column;
    gap: 50px; }
    @media screen and (max-width: 480px) {
      .list .sec_wrap {
        gap: 10px; } }
    .list .sec_wrap .cap {
      font-size: 15px; }
      @media screen and (max-width: 480px) {
        .list .sec_wrap .cap {
          font-size: 12px; } }
    .list .sec_wrap .item {
      position: relative; }
      .list .sec_wrap .item figure img {
        width: 100%; }
      .list .sec_wrap .item .mdl_btn {
        display: none;
        position: absolute;
        bottom: 10px;
        right: 10px;
        cursor: pointer; }
    .list .sec_wrap .sec01 {
      display: grid;
      gap: 50px;
      grid-template-columns: 470fr 680fr; }
      @media screen and (max-width: 480px) {
        .list .sec_wrap .sec01 {
          gap: 10px;
          display: flex;
          flex-direction: column; } }
      .list .sec_wrap .sec01 li:first-child {
        grid-row: span 2; }
      @media screen and (max-width: 480px) {
        .list .sec_wrap .sec01 li {
          gap: 10px; } }
    @media screen and (max-width: 480px) {
      .list .sec_wrap .sec02 {
        order: -1; } }
    .list .sec_wrap .sec03 {
      display: grid;
      gap: 50px;
      grid-template-columns: 600fr 281fr 219fr; }
      @media screen and (max-width: 480px) {
        .list .sec_wrap .sec03 {
          gap: 10px;
          display: flex;
          flex-wrap: wrap; } }
      @media screen and (max-width: 480px) {
        .list .sec_wrap .sec03 li {
          width: calc(50% - 5px); } }
      .list .sec_wrap .sec03 li:first-child {
        grid-row: span 2; }
        @media screen and (max-width: 480px) {
          .list .sec_wrap .sec03 li:first-child {
            width: 100%; } }
      .list .sec_wrap .sec03 li:nth-child(2) {
        grid-column: span 2; }
        @media screen and (max-width: 480px) {
          .list .sec_wrap .sec03 li:nth-child(2) {
            width: 100%; } }
      @media screen and (max-width: 480px) {
        .list .sec_wrap .sec03 li:nth-child(3) {
          width: calc((281% / 5) - 5px); } }
      @media screen and (max-width: 480px) {
        .list .sec_wrap .sec03 li:nth-child(4) {
          width: calc((219% / 5) - 5px); } }
    .list .sec_wrap .sec05 {
      display: flex;
      gap: 48px; }
      @media screen and (max-width: 480px) {
        .list .sec_wrap .sec05 {
          flex-wrap: wrap;
          gap: 10px; }
          .list .sec_wrap .sec05 li {
            width: calc(50% - 5px); }
            .list .sec_wrap .sec05 li:nth-child(3), .list .sec_wrap .sec05 li:nth-child(4) {
              width: 100%; } }
    .list .sec_wrap .sec06 {
      display: flex;
      gap: 48px; }
      @media screen and (max-width: 480px) {
        .list .sec_wrap .sec06 {
          gap: 10px;
          flex-direction: column; } }
    .list .sec_wrap .sec07 {
      display: flex;
      gap: 50px; }
      @media screen and (max-width: 480px) {
        .list .sec_wrap .sec07 {
          gap: 10px;
          flex-direction: column; } }

.mdl_wrap {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99999999999999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease-in-out 0.2s;
  display: flex;
  justify-content: center;
  align-items: center; }
  .mdl_wrap .bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(0, 0, 0, 0.7); }
  .mdl_wrap .mdl_close {
    position: absolute;
    top: 50px;
    right: 50px;
    cursor: pointer; }
    @media screen and (max-width: 480px) {
      .mdl_wrap .mdl_close {
        top: 20px;
        right: 20px; } }
  .mdl_wrap .mdl {
    position: relative;
    max-width: 1050px;
    padding: 0 80px;
    overflow: hidden;
    opacity: 0;
    max-height: 90vh;
    overflow-y: auto;
    transition: opacity 0.5s ease-in-out 0.5s; }
    @media screen and (max-width: 480px) {
      .mdl_wrap .mdl {
        padding: 0 20px; } }
  .mdl_wrap.on {
    opacity: 1;
    pointer-events: all; }
    .mdl_wrap.on .mdl {
      opacity: 1; }

.swiper-button-next, .swiper-button-prev {
  width: calc(var(--swiper-navigation-size) / 44 * 27);
  height: var(--swiper-navigation-size);
  margin-top: calc(0px - (var(--swiper-navigation-size) / 2));
  color: #fff; }
  @media screen and (max-width: 480px) {
    .swiper-button-next, .swiper-button-prev {
      width: 20px;
      height: 30px;
      margin-top: -5px; }
      .swiper-button-next::after, .swiper-button-prev::after {
        font-size: 30px; } }

@media screen and (max-width: 480px) {
  .swiper-button-next {
    right: 10px; } }

@media screen and (max-width: 480px) {
  .swiper-button-prev {
    left: 10px; } }

/*# sourceMappingURL=gallery.css.map */