// 資料庫
@import './partials/variable';
@import './partials/mixin';

.productList {
  .listBtns {
    position: sticky;
    top: 119px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 0;
    margin-bottom: 30px;
    z-index: 9;
    background: #FFF;

    @include screen('tablet') {
      top: 80px;
    }

    button {
      position: relative;
      padding: 10px;
      border-bottom: 1px solid #ddd;

      &::before {
        content: '';
        position: absolute;
        bottom: 0;
        display: block;
        width: 0;
        height: 2px;
        left: 50%;
        background-color: #2680ff;
        transition: all 0.4s ease-in-out;
        transform: translateX(-50%);
      }

      &.active,
      &:hover {
        &::before {
          width: 100%;
        }
      }
    }
  }

  .listContentBox {
    display: flex;
    flex-direction: column;
    gap: 50px;
  }

  .listContent {
    width: 100%;
    padding: 30px 0;
    max-width: 1150px;
    margin: 0 auto;

    @include screenMax('1330') {
      max-width: 1062px;
    }

    .listTitle {
      font-size: var(--clamp32);
      font-weight: 500;
      line-height: 1;
      letter-spacing: 1px;
      margin-bottom: 30px;
    }

    .listBox {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 20px;

      .item {
        position: relative;
        overflow: hidden;
        display: block;
        padding: 3% 5%;
        border-radius: 16px;
        background: #fff;
        box-shadow: 0 0px 10px 0 rgba(0, 0, 0, 0.1);
        @include itemWidth(20, 3);

        @include screen('xsMobile') {
          @include itemWidth(20, 2);
          padding: 20px;
        }

        &:hover {
          .top {
            opacity: 1;
          }
        }
      }

      .pic {
        max-width: 200px;
        margin: 0 auto 20px;

        img {
          @include transition(all, 2);
        }
      }

      .title {
        height: 23px;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        text-align: center;

        img {
          max-height: 100%;
          object-fit: contain;
        }
      }

      .top {
        position: absolute;
        inset: 0;
        padding: 10%;
        display: flex;
        align-items: center;
        background: rgba(0, 0, 0, 0.4);
        opacity: 0;
        @include transition(all, 0.3);
      }

      .btnBox {
        width: 70%;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        gap: 20px;

        @include screen('mobile') {
          width: 80%;
          gap: 10px;
        }

        a {
          display: block;
          border-radius: 50px;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-grow: 1;
          padding: 8px 15px 8px;
          font-size: 13px;
          white-space: nowrap;

          &:nth-of-type(1) {
            border: 1px solid #000;
            background: #fff;
          }

          &:nth-of-type(2) {
            border: 1px solid #fff;
            background: #000;
            color: #fff;
          }
        }
      }
    }
  }
}


///////////////////////////////////////////////////////////////////////
.productInfo {
  .siteHeader {
    position: absolute;
  }

  .mainBox .contentBox {
    max-width: 1150px;
    margin: 0 auto;

    @include screenMax('1330') {
      max-width: 1062px;
    }
  }

  .TemplateSpec_specSeat {
    & > tbody > tr {

      & > th {
        text-align: left;
        vertical-align: top;
        white-space: nowrap;
        padding-right: 40px;
      }

      & > th,
      & > td {
        padding-top: 40px;
        padding-bottom: 40px;
        border-bottom: 1px solid #f5f5f5;
      }
    }

    table:not(.TemplateSpec_innerTable) {
      width: 100%;

      colgroup {
        col:nth-child(1) {
          width: 30%;
        }

        col:nth-child(2) {
          width: 70%;
        }
      }

      th {
        text-align: left;
        vertical-align: top;
        padding-right: 20px;
        font-size: 13px;
      }

      th,
      td {
        padding-bottom: 20px;
      }

      tr {
        &:last-child {

          th,
          td {
            padding-bottom: 0px;
          }
        }
      }
    }

    .TemplateSpec_innerTable {
      width: 100%;

      colgroup {
        col:nth-child(1) {
          width: 50px;
        }

        col:nth-child(2) {
          width: 25%;
        }

        col:nth-child(3) {
          width: calc(75% - 50px);
        }
      }

      th {
        text-align: left;
        vertical-align: top;
        font-size: 13px;
        font-weight: normal;

        &:first-child {
          font-weight: bold;
          padding-right: 20px;
        }
      }

      th,
      td {
        padding-bottom: 10px;
      }
    }

    figure {
      text-align: center;
      max-width: 116px;
    }

    @include screen('mobile') {
      colgroup {
        display: none;
      }

      & > tbody > tr {
        & > th {
          font-size: 26px;
          padding-bottom: 0 !important;
        }
      }

      td {
        padding-top: 0 !important;
      }

      td,
      th {
        width: 100%;
        display: block;

        th {
          font-size: 18px !important;
          padding-bottom: 0 !important;
        }

        td {
          padding-top: 0 !important;
          padding-left: 30px;
        }
      }
    }
  }

  .TemplateSpec_listLogo {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0 20px;
    margin: 38px auto;

    li {
      height: 80px;

      img {
        height: 100%;
      }
    }
  }

  .TemplateSpec_importantNotice {
    margin-top: 85px;

    .title {
      padding: 30px 0;
      margin-bottom: 50px;
      font-size: 32px;
      font-weight: 400;
      letter-spacing: .064rem;
      border-bottom: 1px solid #000;
    }

    h2 {
      margin-bottom: 20px;
      font-size: 22px;
      font-weight: 500;

      &:not(:first-child) {
        margin-top: 40px;
      }
    }

    li {
      margin-top: 5px;

      &::before {
        display: inline-block;
        content: "・";
      }
    }
  }
}