@charset "UTF-8";

/* =====================
  variables
===================== */
:root {
  --color-not-available: var(--black);
  --color-standard: #c8c8c8;
}

/* =====================
  common
===================== */
@layer common {
  .main article {
    padding-block: 104px 112px;

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

    /* ==== u-inner ==== */
    .u-inner {
      display: block grid;
      gap: 45px;

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

      /* ==== h2 ==== */
      & h2 {
        padding-block-end: 6px;
        font-weight: 500;
        line-height: 2;
        color: var(--green);
        letter-spacing: 0.48px;
        border-block-end: 1px solid var(--gray300);

        @media (width <= 768px) {
          padding-block-end: calc((100 / 390) * 5 * 1vw);
          letter-spacing: calc((100 / 390) * 0.42 * 1vw);
        }
      }

      /* ==== h3 ==== */
      & h3:not(.u-subhead) {
        position: relative;
        font-weight: 500;
        color: var(--green);
        letter-spacing: 0.48px;

        @media (width <= 768px) {
          letter-spacing: calc((100 / 390) * 0.42 * 1vw);
        }

        &::before {
          position: absolute;
          inset-block-start: 0;
          inset-inline-start: 0;
          content: attr(data-bullet);
        }

        &[data-bullet] {
          padding-inline-start: 17px;

          @media (width <= 768px) {
            padding-inline-start: 3.9vw;
          }
        }
      }

      /* ==== ol ==== */
      & ol {
        display: block grid;
        gap: 21px;
        counter-reset: number;

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

        & li {
          position: relative;
          padding-inline-start: 26px;
          margin-block: calc((1em - 1lh) / 2);
          line-height: 2;
          word-break: break-all;

          @media (width <= 768px) {
            padding-inline-start: calc((100 / 390) * 22 * 1vw);
          }

          &::before {
            position: absolute;
            inset-block-start: 9px;
            inset-inline-start: 0;
            font-family: var(--title);
            font-size: 20px;
            font-weight: 500;
            line-height: 1;
            color: var(--green);
            content: counter(number) '.';
            counter-increment: number;
          }

          @media (width <= 768px) {
            &::before {
              inset-block-start: calc((100 / 390) * 8 * 1vw);
              font-size: calc((100 / 390) * 18 * 1vw);
            }
          }

          /* 任意のビュレット */
          &[data-bullet] {
            &::before {
              inset-block-start: 10px;
              font-size: 18px;
              content: attr(data-bullet);
            }

            @media (width <= 768px) {
              padding-inline-start: calc((100 / 390) * 24 * 1vw);

              &::before {
                inset-block-start: 2.05vw;
                font-size: calc((100 / 390) * 18 * 1vw);
              }
            }
          }
        }
      }

      /* ==== p ==== */
      & p {
        line-height: 2;
        word-break: break-all;
      }

      /* ==== ul ==== */
      & ul {
        display: block grid;
        gap: 15px;

        & li {
          position: relative;
          margin-block: calc((1em - 1lh) / 2);
          line-height: 2;
          word-break: break-all;

          &::before {
            content: '・';
          }
        }
      }

      /* ==== dl ==== */
      & dl {
        display: block grid;
        gap: 20px;

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

        /* ==== tr ==== */
        .tr {
          display: block flex;
          align-items: center;
          justify-content: flex-start;
          margin-block: calc((1em - 1lh) / 2);

          @media (width <= 768px) {
            align-items: flex-start;
          }

          & dt {
            flex-shrink: 0;
          }

          & dd {
            @media (width <= 768px) {
              padding-left: 1em;
              text-indent: -1em;
            }
          }
        }
      }

      /* ==== strong ==== */
      & strong {
        font-weight: 400;
        color: var(--green);
      }

      /* ==== table ==== */
      .scroll-table {
        & thead tr:first-child th:first-child,
        & tbody th {
          position: sticky;
          inset-inline-start: 0;
          z-index: 2;

          @media (width <= 768px) {
            box-shadow: 0 0 0 0.5px #000;
          }
        }
      }

      & table {
        .tac {
          text-align: center;
        }

        .fwb {
          font-weight: bold;
        }

        .bg {
          background: #cbf1f1;
        }

        .bg-gray {
          background: #bfbfbf;
        }

        &[data-color='purple'] .bg {
          background: #e4dfec;
        }

        &[data-color='purple'] thead th {
          background: #e4dfec;
        }

        &[data-color='blue'] thead th {
          background: #c0e6f5;
        }

        & :where(th, td) {
          padding-block: 4px;
          padding-inline: 11px;
          font-size: 14px;
          text-align: left;
          border: 1px solid #000;

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

        & thead th {
          font-weight: 700;
        }

        & td {
          background-color: white;
        }

        & tbody th {
          background-color: white;

          &:has(br.sp) {
            @media (width <= 768px) {
              text-align: center;
            }
          }
        }

        .number {
          text-align: right;
        }

        .not-available {
          background-color: var(--color-not-available);
        }

        .standard {
          background-color: var(--color-standard);
        }
      }
    }
  }
}

/* =====================
  module
===================== */
@layer module {
  .sp100w {
    @media (width <= 768px) {
      inline-size: 100%;
    }
  }

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

  .mt {
    margin-block-start: 15px;

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

  .mt-2x {
    margin-block-start: 21px;

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

  .mt-4x {
    margin-block-start: 40px;

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

  .mt-6x {
    margin-block-start: 64px;

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

  .mt-large {
    margin-block-start: 34px;

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

  /* ==== attention ==== */
  .attention {
    display: block grid;
    font-size: 13px;
    line-height: 1.6;
    color: var(--gray400);
    letter-spacing: 0.39px;

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

  /* ==== images ==== */
  .images {
    display: block flex;
    gap: 64px;
    align-items: center;

    &.jcb {
      justify-content: space-between;
    }

    /* ==== figcaption ==== */
    & figcaption {
      line-height: 2;
      text-align: center;

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

    @media (width <= 768px) {
      display: block flex;
      flex-direction: column;
      gap: calc((100 / 390) * 32 * 1vw);
      align-items: flex-start;
      justify-content: flex-start;

      & figure {
        margin-inline: auto;
      }
    }
  }

  & ol + .images {
    @media (width > 768px) {
      margin-block-start: 64px;

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

  & h2 + .images {
    @media (width > 768px) {
      margin-block-start: 24px;

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

  /* ==== tag ==== */
  .tag {
    display: block grid;
    place-content: center;
    inline-size: fit-content;
    padding-block: 7px;
    padding-inline: 24.8px;
    color: white;
    letter-spacing: 0.48px;
    background: linear-gradient(102deg, #274827 15.2%, #aad59a 135.62%);
    border-radius: calc(infinity * 1px);

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

  /* ==== scroll-table ==== */
  .scroll-table {
    padding-block-end: 5px;
    margin-block-start: 21px;
    overflow-x: auto;
    cursor: grab;
    user-select: none;

    &:has([data-type='sgkh']) {
      margin-block-start: 0;
    }

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

    &.active {
      cursor: grabbing;
      user-select: none;
    }

    @media (width > 768px) {
      &::-webkit-scrollbar {
        block-size: 3px;
      }

      &::-webkit-scrollbar-track {
        background-color: #d9d9d9;
        border-radius: calc(infinity * 1px);
      }

      &::-webkit-scrollbar-thumb {
        background-color: var(--green);
        border-radius: calc(infinity * 1px);
      }
    }

    /* ==== table ==== */
    & table {
      white-space: nowrap;

      /* ==== sgkh ==== */
      &[data-type='sgkh'] {
        @media (width <= 768px) {
          inline-size: 167vw;
          table-layout: fixed;

          & thead tr:nth-child(2) th {
            inline-size: calc(100% / 13);
          }
        }

        & tbody td {
          @media (width > 768px) {
            inline-size: 44.2px;
            aspect-ratio: 1 / 1;
            padding: unset;
          }

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

  .table-caption {
    margin-block-start: 24px;
    font-weight: 500;

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

    & + .scroll-table {
      margin-block-start: 12px;

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

  /* ==== graph-list ==== */
  .graph-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;

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

    & canvas {
      inline-size: 400px !important;
      width: 400px !important;
      block-size: 400px !important;
      height: 400px !important;

      @media (width <= 768px) {
        inline-size: calc((100 / 390) * 326 * 1vw) !important;
        width: calc((100 / 390) * 326 * 1vw) !important;
        block-size: calc((100 / 390) * 326 * 1vw) !important;
        height: calc((100 / 390) * 326 * 1vw) !important;
      }
    }
  }

  /* ==== sgkh-table-description ==== */
  .sgkh-table-description {
    display: block flex;
    gap: 32px;
    align-items: center;

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

    .not-available {
      background-color: var(--color-not-available);
    }

    .standard {
      background-color: var(--color-standard);
    }

    .wrap {
      display: block flex;
      gap: 8px;
      align-items: center;
      font-size: 15px;

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

      .color {
        flex-shrink: 0;
        inline-size: 48px;
        block-size: 24px;

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

  /* ==== col2-list  ==== */
  .col2-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 26px 77px;

    @media (width <= 768px) {
      display: block flex;
      flex-direction: column;
      gap: calc((100 / 390) * 26 * 1vw);
    }

    & .li {
      display: block grid;
      grid-template-rows: subgrid;
      grid-row: span 4;
      gap: 32px;
      align-items: flex-start;

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

    /* ==== picture ==== */
    .picture {
      object-fit: cover;
      border-radius: 10px;

      @media (width > 768px) {
        block-size: 350px;
      }

      @media (width <= 768px) {
        border-radius: calc((100 / 390) * 10 * 1vw);
      }
    }

    /* ==== p ==== */
    & p {
      margin-block: calc((1em - 1lh) / 2);
    }

    /* ==== img ==== */
    & img {
      @media (width <= 768px) {
        display: block flow;
        margin-inline: auto;
      }
    }
  }

  /* =====================
      introduction
    ===================== */
  .introduction {
    min-block-size: 441px;
    padding-block: 147px 10px;
    background-image: url('../img/products/bg.webp');
    background-repeat: no-repeat;
    background-position: left top;
    background-size: cover;

    @media (width <= 768px) {
      min-block-size: auto;
      padding-block: 27.6vw 9.6vw;
      padding-inline: calc((100 / 390) * 32 * 1vw);
      background-image: url('../img/products/bg_sp.webp');
    }

    /* ==== u-inner ==== */
    .u-inner {
      display: block grid;
      gap: 77px;
      padding-inline-start: 2px;

      @media (width <= 768px) {
        gap: 0;
        padding-inline: 0;
      }
    }

    /* ==== hgroup ==== */
    & hgroup {
      display: block grid;
      gap: 12px;

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

      /* ==== h1 ==== */
      & h1 {
        font-family: var(--jp);
        font-size: 32px;
        font-weight: 700;
        line-height: 2;
        color: var(--gray400);

        @media (width <= 768px) {
          font-size: calc((100 / 390) * 20 * 1vw);
          line-height: 1.8;

          /* word-break: keep-all; */
        }
      }

      /* ==== en ==== */
      & [lang='en'] {
        inline-size: fit-content;
        font-family: var(--title);
        font-size: 24px;
        font-weight: 500;
        line-height: 1;
        color: transparent;
        word-break: break-all;
        background: linear-gradient(102deg, #274827 15.2%, #aad59a 135.62%);
        background-clip: text;
        -webkit-text-fill-color: transparent;

        @media (width <= 768px) {
          font-size: calc((100 / 390) * 16 * 1vw);
          line-height: 1.2;
          word-break: break-all;
        }
      }
    }

    /* ==== breadcrumb ==== */
    .breadcrumb {
      position: unset;
      inset: unset;
      padding-inline: 0;
      padding-inline-start: 3px;
      margin-inline: 0 auto;

      @media (width <= 768px) {
        display: block flex;
        flex-wrap: wrap;
        gap: calc((100 / 390) * 13.7 * 1vw) 3.3vw;
        padding-inline-start: calc((100 / 390) * 0 * 1vw);

        & li {
          align-items: center;

          &:first-child {
            padding-inline-start: 1vw;
          }

          &:not(:last-child)::after {
            flex-shrink: 0;
            inline-size: calc((100 / 390) * 5 * 1vw);
            aspect-ratio: 6 / 16;
            content: '';
            background-color: var(--green);
            mask-image: var(--icon-breadcrumb);
            mask-repeat: no-repeat;
            mask-position: center;
            mask-size: contain;
          }
        }

        & li + li::before {
          display: none;
        }
      }
    }
  }

  /* =====================
      detail
    ===================== */
  .detail {
    display: block grid;
    grid-template-rows: repeat(3, auto) 1fr;
    grid-template-columns: 655px auto;
    gap: 45px 80px;
    align-items: flex-start;

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

    /* ==== ul ==== */
    & ul {
      & li {
        &::before {
          padding-inline-end: 3px;
        }

        @media (width <= 768px) {
          &::before {
            padding-inline-end: calc((100 / 390) * 3 * 1vw);
          }
        }
      }

      @media (width <= 768px) {
        margin-block: calc((1em - 1lh) / 2);
      }
    }

    /* ==== dl ==== */
    & dl {
      gap: 16px;

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

        & :where(dt, dd) {
          margin-block: calc((1em - 1lh) / 2);
        }
      }
    }

    /* ==== picture ==== */
    .picture {
      grid-area: 1 / 1 / 5 / 2;
      inline-size: 655px;
      block-size: 500px;
      object-fit: cover;
      border-radius: 10px;

      @media (width > 768px) {
        position: sticky;
        inset-block-start: 0;
        z-index: 1;
      }

      @media (width <= 768px) {
        inline-size: 100%;
        block-size: calc((100 / 390) * 241 * 1vw);
        border-radius: calc((100 / 390) * 10 * 1vw);
      }
    }

    /* ==== tag ==== */
    .tag {
      grid-area: 1 / 2 / 2 / 3;
    }

    /* ==== section ==== */
    & > section {
      display: block grid;
      grid-column: 2 / 3;
      gap: 21px;
      align-self: flex-start;

      @media (width <= 768px) {
        gap: calc((100 / 390) * 22 * 1vw);
        inline-size: 100%;
      }

      &:has(.catch) {
        gap: 48px;

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

      & p {
        margin-block: calc((1em - 1lh) / 2);

        &.catch {
          inline-size: fit-content;
          font-size: 32px;
          font-style: normal;
          font-weight: 500;
          line-height: 200%;
          color: transparent;
          letter-spacing: 0.96px;
          background: linear-gradient(99deg, #274827 15.76%, #aad59a 97.34%);
          background-clip: text;
          -webkit-text-fill-color: transparent;

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

      & li {
        margin-block: calc((1em - 1lh) / 2);
      }
    }
  }

  /* =====================
      個別
    ===================== */
  body[data-product='example-flexon_fx'] {
    position: static;
  }

  body[data-product='example-flexon_lw'] {
    position: static;
  }

  /* =====================
      ハードガスケット FINGERSTOCK
    ===================== */
  body[data-product='example-laird'] {
    /* ==== .detail ==== */
    .detail {
      & p {
        @media (width <= 768px) {
          & img {
            inline-size: calc((100 / 390) * 197 * 1vw);
          }
        }
      }
    }

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

    /* ==== wrap ==== */
    .wrap {
      display: block flex;
      flex-wrap: wrap;
      align-items: start;

      /* ==== data-id='1' ==== */
      &[data-id='1'] {
        gap: 48px;

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

        @media (width <= 768px) {
          & + h3 {
            margin-block-start: 8.4vw;
          }
        }
      }

      /* ==== data-id='2' ==== */
      &[data-id='2'] {
        gap: 64px;

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

      & + .wrap {
        margin-block-start: 32px;

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

    /* ==== table ==== */
    & table {
      & thead th {
        background: #ff6;
      }

      &.tac :where(th, td) {
        text-align: center;
      }

      .yellow {
        background-color: #ff6;
      }

      .dark {
        background-color: #ccc;
      }

      .smoke {
        background-color: #e3e3e3;
      }
    }

    /* ==== dl ==== */
    & dl.table {
      display: table;
      padding-block: 13px;
      padding-inline: 24px;
      table-layout: fixed;
      background: var(--lightgreen);
      border-radius: 10px;

      @media (width <= 768px) {
        padding-block: calc((100 / 390) * 13 * 1vw) calc((100 / 390) * 14 * 1vw);
        padding-inline: calc((100 / 390) * 18.7 * 1vw);
        border-radius: calc((100 / 390) * 10 * 1vw);
      }

      .tr {
        display: table-row;
      }

      & :where(dt, dd) {
        display: table-cell;
        letter-spacing: 0.48px;

        @media (width <= 768px) {
          line-height: 1.6;
          letter-spacing: calc((100 / 390) * 0.42 * 1vw);
        }
      }

      & dd::before {
        content: '：';
      }
    }

    /* ==== content ==== */
    .content {
      display: block grid;
      margin-block-start: 40px;

      /* ==== .scroll-table ==== */
      .scroll-table {
        inline-size: 100%;
        margin-block-start: 16px;
      }

      /* ==== unit ==== */
      .unit {
        display: block grid;
        grid-template-rows: auto auto 1fr;
        grid-template-columns: auto 528px;
        gap: 16px 96px;
        align-items: flex-start;
        padding-block: 29px 39px;
        border-block-start: 1px dashed var(--gray300);
        border-block-end: 1px dashed transparent;

        &:last-child {
          border-block-end: 1px dashed var(--gray300);
        }

        @media (width <= 768px) {
          display: block flex;
          flex-direction: column;
          gap: 3.4vw;
          padding-block: 7.9vw 39px;
        }

        /* ==== h3 ==== */
        & h3 {
          grid-area: 1 / 1 / 2 / 2;
        }

        /* ==== table ==== */
        .table {
          grid-area: 2 / 1 / 3 / 2;
          margin-block-start: 0;

          @media (width > 768px) {
            padding-block-end: 0;
          }

          & tbody tr:nth-child(even) td {
            background-color: #e3e3e3;
          }

          & tbody th {
            background: #ffc;
          }
        }

        /* ==== ul ==== */
        & ul {
          grid-area: 3 / 1 / 4 / 2;
          margin-block-start: 5px;
        }

        /* ==== img ==== */
        .img {
          display: block flex;
          grid-area: 1 / 2 / 4 / 3;
          gap: 24px;
          margin-block-start: 9px;

          @media (width <= 768px) {
            flex-direction: column;
            gap: 6vw;
            margin-block-start: 4.5vw;
          }

          /* ==== picture ==== */
          .picture {
            object-fit: cover;
            border-radius: 10px;

            @media (width > 768px) {
              block-size: 216px;
            }

            @media (width <= 768px) {
              display: block flow;
              inline-size: 100%;
              margin-inline: auto;
              border-radius: calc((100 / 390) * 10 * 1vw);
            }
          }

          /* ==== icon ==== */
          .icon {
            @media (width <= 768px) {
              display: block flow;
              inline-size: calc((100 / 390) * 130 * 1vw);
              margin-inline: auto;
            }
          }
        }
      }
    }

    /* ==== attention ==== */
    .attention {
      @media (width <= 768px) {
        margin-block-start: 4.1vw;
      }
    }
  }

  /* =====================
      エンボス銅箔シールディングテープ
    ===================== */
  body[data-product='example-t262'] {
    position: static;
  }

  body[data-product='example-schlegel'] {
    position: static;
  }

  body[data-product='example-sgkh'] {
    position: static;
  }

  body[data-product='high-fca'] {
    position: static;
  }

  body[data-product='high-msfc'] {
    position: static;
  }

  body[data-product='high-ri'] {
    position: static;
  }

  body[data-product='high-tr'] {
    position: static;
  }

  body[data-product='low-msfc'] {
    position: static;
  }

  body[data-product='low-mtcn'] {
    position: static;
  }

  body[data-product='low-mtfc'] {
    position: static;
  }

  body[data-product='low-tre'] {
    position: static;
  }

  body[data-product='mid-fca'] {
    position: static;
  }

  body[data-product='mid-msfc'] {
    position: static;
  }

  body[data-product='mid-mtcn'] {
    position: static;
  }

  body[data-product='mid-mtfc'] {
    position: static;
  }

  body[data-product='mid-ri'] {
    position: static;
  }

  body[data-product='mid-ssc'] {
    position: static;
  }

  body[data-product='mid-tr'] {
    position: static;
  }
}

/* =====================
  force
===================== */
.f-sp-tal {
  @media (width <= 768px) {
    text-align: left !important;
  }
}