@charset "UTF-8";

/* =====================
  article1
===================== */
.article[data-id='1'] {
  padding-block: 79px 160px;

  @media (width <=768px) {
    a[href^='tel:'] {
      text-decoration: underline;
    }

    padding-block: var(--nudge-7);
  }

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

    @media (width > 768px) {
      padding-inline: 80px;
    }

    @media (width <=768px) {
      gap: var(--nudge-6);
    }

    /* ==== p ==== */
    p {
      font-size: 15px;
      font-weight: 500;

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

    /* ==== li ==== */
    li {
      font-size: 15px;
      font-weight: 500;

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

    /* ==== h3 ==== */
    h3 {
      font-size: 18px;
      font-weight: 700;

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

    /* ==== h4 ==== */
    h4:not(.u-sub-head) {
      font-size: 17px;
      font-weight: 700;
      color: var(--primary);

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

    /* ==== section ==== */
    >section {
      display: block grid;

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

      >section {
        display: block grid;
        gap: 20px;

        @media (width <=768px) {
          gap: var(--nudge-1);
        }

        +section {
          margin-block-start: 41px;

          @media (width <=768px) {
            margin-block-start: var(--nudge-4);
          }
        }

        >section {
          display: block grid;
          gap: 10px;

          @media (width <=768px) {
            gap: var(--nudge-1);
          }
        }
      }
    }

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

      @media (width <=768px) {
        margin-block-end: var(--nudge-2);
      }
    }

    /* ==== u-list ==== */
    p+.u-list {
      margin-block-start: -10px;

      &.no-margin {
        margin-block-start: 0;

        +ol+p {
          margin-block: 27px;
        }
      }
    }

    /* ==== u-sub-head ==== */
    .u-sub-head {
      margin-block-end: 24px;
    }

    /* ==== order-list ==== */
    .order-list {
      display: block grid;
      gap: 41px;
      margin-block-start: 40px;

      @media (width <=768px) {
        gap: var(--nudge-4);
        margin-block-start: var(--nudge-2);
      }
    }

    /* ==== caption ==== */
    .caption {
      margin-block: 40px -20px;
      font-size: 15px;

      @media (width <=768px) {
        margin-block: 9vw 0;
        font-size: calc((100 / 390) * 15 * 1vw);
      }
    }

    /* ==== table ==== */
    table {
      inline-size: 100%;
      margin-block-start: 0;
      table-layout: fixed;

      @media (width <=768px) {
        margin-block-start: var(--nudge-1);
      }

      &.margin {
        margin-block-start: 20px;

        @media (width <=768px) {
          margin-block-start: var(--nudge-2);
        }
      }

      th,
      td {
        padding-block: 14px;
        padding-inline: 17px;
        font-size: 15px;
        font-weight: 500;
        border: 1px solid #c3c4c7;

        @media (width <=768px) {
          padding-block: 3vw;
          padding-inline: calc((100 / 390) * 9 * 1vw);
          font-size: calc((100 / 390) * 13 * 1vw);
          vertical-align: middle;
          word-break: auto-phrase;
        }
      }

      th {
        inline-size: 200px;
        font-weight: 700;
        background: #eee;

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

      a[href^='mailto:'] {
        text-decoration: underline;
        transition: opacity 250ms ease 0s;

        @media (any-hover: hover) {
          &:hover {
            text-decoration: none;
            opacity: 0.7;
          }
        }
      }
    }

    /* ==== h5 ==== */
    h5.square {
      margin-block-start: 40px;
      font-size: 15px;
      font-weight: 500;

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

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

    /* ==== h6 ==== */
    h6.bracket {
      margin-block: 40px 20px;
      font-size: 15px;
      font-weight: 600;

      @media (width <=768px) {
        margin-block: 7vw 0;
        font-size: calc((100 / 390) * 15 * 1vw);
      }

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

      &::after {
        content: '》';
      }
    }

    /* ==== number-list ==== */
    .number-list {
      li {
        --_indent: 1.2em;
        padding-inline-start: var(--_indent);
        text-indent: calc(var(--_indent) * -1);
      }
    }

    /* ==== purpose-section ==== */
    @media (width > 768px) {
      .purpose-section {
        gap: 10px;
        margin-block-end: -20px;

        +.order-list {
          margin-block-start: 59px;

          table {
            margin-block-start: 41px;
          }
        }
      }
    }

    /* ==== note-list ==== */
    .note-list {
      display: block grid;
      gap: 40px;
      margin-block-start: 40px;

      @media (width <=768px) {
        gap: var(--nudge-4);
        margin-block-start: var(--nudge-3);
      }

      section {
        display: block grid;
        gap: 20px;

        @media (width <=768px) {
          gap: 3vw;
        }

        &.no-gap {
          gap: 0;
        }

        ol {
          display: block grid;
          gap: 20px;

          @media (width <=768px) {
            gap: var(--nudge-2);
          }

          >li {
            display: block grid;
            gap: 10px;

            @media (width <=768px) {
              gap: var(--nudge-1);
            }

            a {
              display: block flex;
              gap: 2px;
              inline-size: fit-content;
              color: var(--primary);
              transition: opacity 250ms ease 0s;

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

              &::after {
                inline-size: 18px;
                aspect-ratio: 18 / 24;
                content: '';
                background-color: #c75656;
                mask-image: var(--icon-pdf);
                mask-repeat: no-repeat;
                mask-position: center;
                mask-size: contain;
                translate: 0 -2px;

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

              @media (any-hover: hover) {
                &:hover {
                  opacity: 0.7;
                }
              }
            }
          }
        }

        ul {
          display: block grid;
          margin-block-start: 6px;

          @media (width <=768px) {
            margin-block-start: 0;
          }

          >li {
            font-size: 15px;
            font-weight: 500;

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

      h5 {
        font-size: 19px;
        font-weight: 600;

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

      h6:not(.note-head) {
        font-size: 17px;
        font-weight: 700;
        color: var(--primary);

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

      h6.note-head {
        margin-block: 20px -6px;
        font-size: 15px;
        font-weight: 600;

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

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

        &::after {
          content: '＞';
        }
      }

      .in-list li:has(> h6.note-head) {
        @media (width > 768px) {
          margin-block-start: 7px;
        }
      }

      .in-list2 {
        @media (width > 768px) {
          margin-block-start: 20px;
        }
      }
    }

    /* ==== abcd-list ==== */
    .abcd-list {
      li {
        --_indent: 1.5ch;
        padding-inline-start: var(--_indent);
        text-indent: calc(var(--_indent) * -1);
      }
    }
  }
}