@charset "UTF-8";

@layer utility {
  /* =====================
    data-*
  ===================== */

  /* lang=en */
  [lang='en'] {
    font-family: var(--en);
  }

  [data-font='catch'] {
    font-family: var(--title);
  }

  [data-transform='uppercase'] {
    text-transform: uppercase;
  }

  /* ==== bg ==== */
  [data-bg='blue'] {
    background-color: var(--blue);
  }

  [data-bg='bg_blue'] {
    background-color: var(--bg_blue);
  }

  [data-bg='gray'] {
    background-color: var(--bg_gray);
  }

  [data-align='center'] {
    text-align: center;
  }

  /* =====================
    u-hgroup
  ===================== */
  .u-hgroup {
    position: relative;
    display: block grid;
    gap: 11px;
    align-self: flex-start;
    inline-size: fit-content;
    padding-inline-start: 20px; /* ==== deco ==== */
    &::before {
      position: absolute;
      inset-block-start: 5px;
      inset-inline-start: 0;
      inline-size: 13px;
      aspect-ratio: 1 / 1;
      content: '';
      background-image: url('../img/_common/u-hgroup.webp');
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
    }

    @media only screen and (width <= 768px) {
      &::before {
        inset-block-start: calc((100 / 390) * 4 * 1vw);
        inline-size: calc((100 / 390) * 13 * 1vw);
      }
    }

    /* ==== en ==== */
    & span[lang='en'] {
      inline-size: fit-content;
      margin-block: calc((1em - 1lh) / 2);
      font-size: 40px;
      font-weight: 400;
      line-height: 1;
      color: var(--blue);

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

    /* ==== title ==== */
    .title {
      inline-size: fit-content;
      margin-block: calc((1em - 1lh) / 2);
      font-size: 15px;
      font-weight: 500;
      line-height: 1;

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

    &[data-color='white'] {
      color: var(--white, #fff);

      & span[lang='en'] {
        color: var(--white, #fff);
      }

      &::before {
        filter: brightness(0) invert(1);
      }
    }
  }

  /* =====================
    u-arrow
  ===================== */
  .u-hover[data-type='arrow'],
  .u-anchor {
    @media (any-hover: hover) {
      &:hover {
        .u-arrow {
          color: var(--white);
          background: var(--blue);

          &::before {
            inline-size: 100%;
          }

          &::after {
            translate: 25% 0;
          }

          &[data-color='blue'] {
            color: var(--blue);
            background: var(--white);
          }

          &[data-icon='download'] {
            &::after {
              translate: 0 25%;
            }
          }
        }
      }
    }
  }

  /* ==== → ==== */
  .u-arrow {
    position: relative;
    display: block grid;
    place-content: center;
    inline-size: fit-content;
    min-inline-size: 47px;
    padding-block: 8.32px;
    overflow: clip;
    color: var(--blue);
    pointer-events: none;
    background: var(--white);
    border-radius: calc(infinity * 1px);
    transition: all 600ms var(--easeOutBounce) 0s;

    @media only screen and (width <= 768px) {
      min-inline-size: calc((100 / 390) * 45 * 1vw);
      padding-block: 1.6vw;
    }

    &::before {
      position: absolute;
      z-index: 1;
      inline-size: 0%;
      block-size: 100%;
      content: '';
      background: var(--blue);
      transition: all 600ms var(--easeOutBounce) 0s;
    }

    &::after {
      z-index: 2;
      inline-size: 13.37px;
      aspect-ratio: 13.37 / 11;
      content: '';
      background-color: currentcolor;
      mask-image: var(--icon-arrow);
      mask-repeat: no-repeat;
      mask-position: center;
      mask-size: contain;
      transition: all 600ms var(--easeOutBounce) 0s;
    }

    @media only screen and (width <= 768px) {
      &::after {
        inline-size: calc((100 / 390) * 13.37 * 1vw);
      }
    }

    /* ==== color ==== */
    &[data-color='blue'] {
      color: var(--white, #fff);
      background: var(--blue);

      &::before {
        background: var(--white);
      }
    }

    /* ==== download ==== */
    &[data-icon='download'] {
      &::after {
        inline-size: 16px;
        aspect-ratio: 1 / 1;
        mask-image: var(--icon-download);
      }

      @media only screen and (width <= 768px) {
        &::after {
          inline-size: calc((100 / 390) * 16 * 1vw);
        }
      }
    }
  }

  /* =====================
    u-anchor
  ===================== */
  .u-anchor {
    display: block flex;
    gap: 16px;
    align-items: center;
    inline-size: fit-content;

    @media only screen and (width <= 768px) {
      gap: 3.7vw;
    }

    /* ==== span ==== */
    & span:not(.u-arrow) {
      flex-shrink: 0;
      font-family: var(--title);
      font-weight: 500;
      color: var(--white);
      transition: all 250ms ease 0s;

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

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

    &:has([data-color='blue']) {
      & span:not(.u-arrow) {
        color: var(--blue);
      }
    }

    .u-arrow {
      min-inline-size: 61px;
      padding-block: 13.72px;

      @media only screen and (width <= 768px) {
        min-inline-size: calc((100 / 390) * 57 * 1vw);
        padding-block: 2.9vw;
        font-size: calc((100 / 390) * 15 * 1vw);
      }

      &::after {
        inline-size: 15.41px;
      }

      @media only screen and (width <= 768px) {
        &::after {
          inline-size: calc((100 / 390) * 16 * 1vw);
        }
      }
    }
  }

  /* =====================
    u-inner
  ===================== */
  .u-inner {
    max-inline-size: 1280px;
    margin-inline: auto;

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

  /* =====================
    u-hover
  ===================== */
  .u-hover:not([data-type='arrow']) {
    transition: opacity 0.3s ease-in-out;
    will-change: opacity;

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

  /* =====================
    u-mv
  ===================== */
  .u-mv {
    position: relative;
    block-size: 450px;
    color: white;

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

    /* ==== after ==== */
    &::after {
      position: absolute;
      inset-block-end: 0;
      inset-inline: 0;
      inline-size: 100%;
      block-size: 342px;
      pointer-events: none;
      content: '';
      background: linear-gradient(180deg, rgb(25 89 142 / 0%) 0%, #19598e 100%);

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

    /* ==== picture ==== */
    .picture {
      position: absolute;
      inset-block-start: 0;
      inset-inline-end: 0;
      display: block flow;
      inline-size: 100%;
      block-size: inherit;
      pointer-events: none;

      & img {
        position: absolute;
        inset-block-start: 50%;
        inset-inline-start: 50%;
        display: block flow;
        inline-size: 100%;
        block-size: inherit;
        object-fit: cover;
        translate: -50% -50%;
      }
    }

    /* ==== inner ==== */
    .inner {
      position: relative;
      z-index: 2;
      display: block grid;
      block-size: inherit;
      padding-block: 210px 27px;
      padding-inline: 80px;

      @media only screen and (width <= 768px) {
        padding-block: calc((100 / 390) * 123 * 1vw) 4.3vw;
        padding-inline: calc((100 / 390) * 16 * 1vw);
      }
    }

    /* ==== head ==== */
    .head {
      display: block grid;
      grid-template-rows: repeat(auto-fit, minmax(0, min-content));
      gap: 23px;

      @media only screen and (width <= 768px) {
        gap: 2.6vw;
      }

      & span {
        margin-block: calc((1em - 1lh) / 2);
        font-size: 64px;
        line-height: 1;

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

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

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

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

    /* ==== u-breadcrumb ==== */
    .u-breadcrumb {
      align-self: flex-end;
      justify-content: flex-end;
    }
  }

  /* =====================
    u-breadcrumb
  ===================== */
  .u-breadcrumb {
    --_gap: 15px;

    @media only screen and (width <= 768px) {
      --_gap: 1.9vw;
    }

    display: block flex;
    gap: var(--_gap);
    font-size: 16px;

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

    /* ==== li ==== */
    & li {
      display: block flex;
      gap: 2px;
      align-items: center;

      @media only screen and (width <= 768px) {
        gap: 0.5vw;
      }

      /* ==== a ==== */
      & a {
        transition: all 250ms ease 0s;

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

    & li + li::before {
      display: block flow;
      inline-size: 14px;
      block-size: 1px;
      margin-inline-end: var(--_gap);
      content: '';
      background: white;
    }

    @media only screen and (width <= 768px) {
      & li + li::before {
        inline-size: calc((100 / 390) * 12 * 1vw);
      }
    }
  }

  /* =====================
    u-row-table
  ===================== */
  .u-row-table {
    inline-size: 100%;
    table-layout: fixed;

    & thead {
      color: white;
      background: var(--blue);

      & th {
        text-align: center;

        &:last-child {
          inline-size: 462px;

          @media only screen and (width <= 768px) {
            inline-size: calc((100 / 390) * 118 * 1vw);
          }
        }
      }
    }

    & tbody {
      & td {
        padding-block: 19px;
        background: white;

        @media only screen and (width <= 768px) {
          padding-block: 2.6vw;
          word-break: break-all;
        }

        &:has(a) a {
          margin-inline: auto;
          text-align: center;

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

    & :where(th, td) {
      padding-block: 21px;
      padding-inline: 24px;
      border: 1px solid var(--gray100);

      @media only screen and (width <= 768px) {
        padding-block: 3vw;
        padding-inline: 3.6vw;
        font-size: calc((100 / 390) * 14 * 1vw);
      }
    }
  }

  /* =====================
    u-table
  ===================== */
  .u-table {
    --_border-color: var(--gray100);

    display: block grid;
    grid-template-columns: 152px 1fr;
    inline-size: 1040px;
    margin-inline: auto;

    @media (width <= 768px) {
      grid-template-columns: 26.9vw 1fr;
      inline-size: 100%;
    }

    /* ==== tr ==== */
    .tr {
      display: block grid;
      grid-template-columns: subgrid;
      grid-column: 1 / -1;
      align-items: self-start;

      & :where(dt, dd) {
        block-size: 100%;
        padding-block: 29px;
        line-height: 2 !important;

        @media (width <= 768px) {
          padding-block: calc((100 / 390) * 19.6 * 1vw) calc((100 / 390) * 22.7 * 1vw);
          font-size: calc((100 / 390) * 15 * 1vw);
          word-break: break-all;
        }

        & a:not([href^='tel:']) {
          color: var(--blue);
          text-decoration: underline;

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

        @media (width <= 768px) {
          & a {
            color: var(--blue);
            text-decoration: underline;
          }
        }
      }

      &:first-child {
        & dt {
          border-block-start-color: transparent;
        }

        & dd {
          border-block-start-color: transparent;
        }
      }

      &:last-child {
        & dt {
          border-block-end-color: var(--_border-color);
        }

        & dd {
          word-break: break-all;
          border-block-end-color: var(--_border-color);
        }
      }
    }

    /* ==== dt ==== */
    & dt {
      place-content: start;
      padding-inline-end: 1em;
      font-weight: 500;
      border-block-start: 1px solid var(--_border-color);
      border-block-end: 1px solid transparent;
    }

    /* ==== dd ==== */
    & dd {
      padding-inline: var(--_gap);
      border-block-start: 1px solid var(--_border-color);
      border-block-end: 1px solid transparent;

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

  /* =====================
    u-scroll-table
  ===================== */
  .u-scroll-table {
    overflow-x: auto;

    @media only screen and (width <= 768px) {
      display: block flex;
      inline-size: 100vw;
      padding-block-end: 6vw;

      &::after {
        display: block;
        flex-shrink: 0;
        inline-size: calc((100 / 390) * 32 * 1vw);
        content: '　';
      }
    }

    /* ==== table ==== */
    & table {
      inline-size: 100%;
      white-space: nowrap;
    }
  }
}