@charset "UTF-8";

.main {
  /* =====================
    narrow
  ===================== */
  .narrow {
    display: block flex;
    flex-wrap: wrap;
    gap: 14px 12px;
    align-items: center;
    justify-content: center;
    margin-block-end: 59px;

    @media (width <= 768px) {
      gap: calc((100 / 390) * 10 * 1vw) calc((100 / 390) * 11 * 1vw);
      margin-block-end: calc((100 / 390) * 32 * 1vw);
    }

    button {
      display: block grid;
      place-content: center;
      padding-block: 12px;
      padding-inline: 30px;
      font-size: 14px;
      font-weight: 700;
      line-height: 1;
      color: var(--primary);
      text-align: center;
      border: 1px solid var(--primary);
      border-radius: calc(infinity * 1px);

      @media (width <= 768px) {
        padding-block: calc((100 / 390) * 8 * 1vw);
        padding-inline: calc((100 / 390) * 18 * 1vw);
        font-size: calc((100 / 390) * 14 * 1vw);
      }

      &.on {
        color: white;
        background: var(--primary);
      }
    }
  }

  /* =====================
    portfolio
  ===================== */
  .portfolio {
    padding-block: 110px 161px;

    @media (width <= 768px) {
      padding-block: 16vw;
    }

    /* ==== u-head ==== */
    .u-head {
      margin-block-end: 65px;

      @media (width <= 768px) {
        margin-block-end: 8vw;
      }
    }

    /* ==== description ==== */
    .description {
      margin-block-end: 60px;
      text-align: center;

      @media (width <= 768px) {
        margin-block-end: 8vw;
      }
    }

    /* ==== thumbnail ==== */
    .thumbnail {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 4px;

      @media (width <= 768px) {
        grid-template-columns: repeat(2, 1fr);
        gap: calc((100 / 390) * 6 * 1vw);
      }

      & li {
        position: relative;
        aspect-ratio: 1 / 1;
        overflow: clip;
        color: white;

        &::before {
          position: absolute;
          inset: 0;
          z-index: 2;
          display: block flow;
          inline-size: 100%;
          block-size: 100%;
          pointer-events: none;
          content: '';
          opacity: 0;
          transition: opacity 250ms ease 0s;
        }

        @media (width <= 768px) {
          &::before {
            background: rgb(0 0 0 / 50%);
            opacity: 1;
          }

          &::after {
            position: absolute;
            inset-block-end: 2vw;
            inset-inline-end: 2vw;
            z-index: 2;
            display: block flow;
            inline-size: calc((100 / 390) * 20 * 1vw);
            aspect-ratio: 1 / 1;
            pointer-events: none;
            content: '';
            background-color: currentcolor;
            opacity: 0.5;
            mask-image: var(--icon-zoom);
            mask-repeat: no-repeat;
            mask-position: center;
            mask-size: contain;
          }
        }

        /* ==== label ==== */
        & label {
          position: relative;
          display: block grid;
          gap: 18px;
          place-content: center;
          inline-size: 100%;
          block-size: 100%;
          cursor: pointer;

          @media (width <= 768px) {
            gap: calc((100 / 390) * 12 * 1vw);
          }
        }

        /* ==== span ==== */
        & span,
        h3 {
          position: relative;
          z-index: 3;
          display: block flow;
          text-align: center;
          opacity: 0;
          transition: opacity 250ms ease 0s;

          @media (width <= 768px) {
            opacity: 1;
          }
        }

        /* ==== category ==== */
        .category {
          margin-block: calc((1em - 1lh) / 2);
          font-size: 18px;
          font-weight: 700;

          @media (width <= 768px) {
            font-size: calc((100 / 390) * 14 * 1vw);
          }
        }

        /* ==== type ==== */
        .type {
          inline-size: fit-content;
          padding-block: 8px;
          padding-inline: 18px;
          margin-block: calc((1em - 1lh) / 2);
          margin-inline: auto;
          font-size: 14px;
          line-height: 1;
          border: 1px solid currentcolor;

          @media (width <= 768px) {
            padding-block: 1vw;
            padding-inline: 1em;
            font-size: calc((100 / 390) * 12 * 1vw);
          }
        }

        & h3 {
          padding-inline: 1em;
          margin-block: calc((1em - 1lh) / 2);
          font-weight: 400;
          word-break: auto-phrase;

          @media (width <= 768px) {
            font-size: calc((100 / 390) * 12 * 1vw);
          }
        }

        /* ==== img ==== */
        & img {
          position: absolute;
          inset: 0;
          z-index: 1;
          inline-size: 100%;
          block-size: 100%;
          pointer-events: none;
          object-fit: cover;
        }

        /* ==== button ==== */
        & button {
          display: none;
        }

        /* mask */
        @media (any-hover: hover) {
          &:hover {
            & label {
              & span,
              & h3 {
                opacity: 1;
              }
            }

            &::before {
              background: rgb(0 0 0 / 50%);
              opacity: 1;
            }
          }
        }
      }
    }

    .thumbnail li {
      transition: all 300ms ease 0ms;
      transition-behavior: allow-discrete;

      @starting-style {
        display: block;
        opacity: 1;
        scale: 1;
      }
    }

    .thumbnail[data-id='factory'] {
      li:not([data-id='factory']) {
        display: none;
        opacity: 0;
        scale: 0.95;
      }
    }

    .thumbnail[data-id='kitchen'] {
      li:not([data-id='kitchen']) {
        display: none;
        opacity: 0;
        scale: 0.95;
      }
    }

    .thumbnail[data-id='maintenance'] {
      li:not([data-id='maintenance']) {
        display: none;
        opacity: 0;
        scale: 0.95;
      }
    }

    .thumbnail[data-id='parking'] {
      li:not([data-id='parking']) {
        display: none;
        opacity: 0;
        scale: 0.95;
      }
    }

    .thumbnail[data-id='landscape'] {
      li:not([data-id='landscape']) {
        display: none;
        opacity: 0;
        scale: 0.95;
      }
    }
  }

  /* =====================
    works-list
  ===================== */
  .works-list {
    padding-block: 150px 159px;
    background: var(--bg);

    @media (width <= 768px) {
      padding-block: 16vw;
    }

    /* ==== u-head ==== */
    .u-head {
      margin-block-end: 65px;

      @media (width <= 768px) {
        margin-block-end: 8vw;
      }
    }

    /* ==== description ==== */
    .description {
      margin-block-end: 60px;

      @media (width <= 768px) {
        margin-block-end: 8vw;
      }

      text-align: center;
    }

    /* ==== narrow ==== */
    .narrow {
      max-inline-size: 712px;
      margin-inline: auto;
    }

    /* ==== tab ==== */
    [role='tab'] {
      &[aria-selected='true'] {
        color: white;
        background: var(--primary);
      }
    }

    /* ==== tabpanel ==== */
    [role='tabpanel'] {
      --_border-color: #c3c4c7;

      & ul {
        box-sizing: unset;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        border-block-start: 1px solid var(--_border-color);

        @media (width <= 768px) {
          display: block flex;
          flex-direction: column;
        }

        & li {
          position: relative;
          box-sizing: unset;
          padding-block: 12px;
          padding-inline: 20px;
          font-size: 15px;
          background: white;
          border-block-end: 1px solid var(--_border-color);
          border-inline-end: 1px solid var(--_border-color);

          @media (width <= 768px) {
            padding-block: calc((100 / 390) * 8 * 1vw);
            padding-inline: calc((100 / 390) * 16 * 1vw);
            font-size: calc((100 / 390) * 12 * 1vw);
            border-inline-start: 1px solid var(--_border-color);
          }

          &:nth-child(odd) {
            border-inline-start: 1px solid var(--_border-color);
          }
        }
      }
    }

    .narrow:has(#tab-all[aria-selected='true']) ~ [role='tabpanel'] {
      margin-block-start: -2px;

      @media (width <= 768px) {
        margin-block-start: calc((100 / 390) * 2.3 * -1 * 1vw);
      }

      & ul li:last-child {
        &::after {
          position: absolute;
          inset: auto 0 0;
          z-index: 1;
          display: block;
          block-size: 1px;
          content: '';
          background: var(--_border-color);
        }
      }
    }

    .narrow:has(#tab-all[aria-selected='true']) ~ [role='tabpanel']:has(ul li:last-child:nth-child(even)) {
      & ul li:nth-last-child(2) {
        &::after {
          position: absolute;
          inset: auto 0 0;
          z-index: 1;
          display: block;
          block-size: 1px;
          content: '';
          background: var(--_border-color);
        }
      }
    }

    .narrow:has(#tab-all[aria-selected='true']) ~ [role='tabpanel']:last-child {
      & ul li:last-child {
        &::after {
          display: none;
        }
      }
    }
  }
}

/* =====================
  dialog
===================== */
dialog[open] {
  position: fixed;
  inset: 0;
  z-index: 21;
  display: grid;
  place-content: center;
  inline-size: 100%;
  block-size: 100%;
  padding: 1em;
  outline: none;
  background: color-mix(in srgb, white 100%, transparent 10%);

  /* ==== inner ==== */
  .inner {
    position: relative;
    inline-size: 930px;
    margin-inline: auto;

    @media (width <= 768px) {
      inline-size: 80vw;
    }

    & img {
      display: block;
      inline-size: auto;
      max-inline-size: 800px;
      block-size: 550px;
      margin-inline: auto;
      pointer-events: none;
      user-select: none;
      object-fit: cover;

      @media (width <= 768px) {
        block-size: calc((100 / 390) * 440 * 1vw);
      }
    }
  }

  .swiper-container {
    overflow: hidden;
  }

  .swiper-controller {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 56px;
    color: var(--primary);
    pointer-events: none;
    translate: 0 -50%;

    @media (width <= 768px) {
      height: calc((100 / 390) * 40 * 1vw);
    }
  }

  .swiper-button-prev,
  .swiper-button-next {
    display: block;
    height: 56px;
    color: currentcolor;
    pointer-events: auto;
    outline: none;

    @media (width <= 768px) {
      height: calc((100 / 390) * 40 * 1vw);
    }
  }

  .swiper-button-prev {
    @media (width <= 768px) {
      translate: calc((100 / 390) * -20 * 1vw) 0;
    }
  }

  .swiper-button-next {
    @media (width <= 768px) {
      translate: calc((100 / 390) * 20 * 1vw) 0;
    }
  }

  .swiper-button-prev::after,
  .swiper-button-next::after {
    display: block;
    height: inherit;
    font-size: 56px;
  }

  @media (width <= 768px) {
    .swiper-button-prev::after,
    .swiper-button-next::after {
      font-size: calc((100 / 390) * 40 * 1vw);
    }
  }

  .close {
    position: absolute;
    top: -60px;
    right: 0;
    z-index: 2;
    display: block;
    width: 56px;
    height: 56px;
    font-size: 56px;
    color: currentcolor;
    outline: none;
    background-color: currentcolor;
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 16 16"><path fill="currentColor" d="M7.293 8L3.146 3.854a.5.5 0 1 1 .708-.708L8 7.293l4.146-4.147a.5.5 0 0 1 .708.708L8.707 8l4.147 4.146a.5.5 0 0 1-.708.708L8 8.707l-4.146 4.147a.5.5 0 0 1-.708-.708z"/></svg>');
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;

    @media (width <= 768px) {
      top: -10vw;
      right: -2vw;
      width: calc((100 / 390) * 40 * 1vw);
      height: calc((100 / 390) * 40 * 1vw);
    }
  }
}