@charset "UTF-8";

@layer utility {
  /* =====================
    attribute
  ===================== */

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

  /* serif */
  :where([data-family='serif']) {
    font-family: var(--serif);
  }

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

  /* =====================
    u-anchor
  ===================== */
  :where(.u-anchor) {
    --_border-radius: 6px;
    --_background-color: var(--color-text-primary);
    --_color: white;
    --_padding-inline: 20px 97px;
    --_min-inline-size: 201px;

    @media (width <= 768px) {
      --_padding-inline: calc((100 / 390) * 21 * 1vw) calc((100 / 390) * 78 * 1vw);
      --_min-inline-size: calc((100 / 390) * 177 * 1vw);
    }

    &[data-size='middle'] {
      @media (width > 768px) {
        --_padding-inline: 20px 67px;
      }

      @media (width <= 768px) {
        --_padding-inline: 4.9vw 14.6vw;
        --_min-inline-size: calc((100 / 390) * 177 * 1vw);
      }
    }

    &[data-color='white'] {
      --_background-color: white;
      --_color: var(--color-text-primary);
    }

    position: relative;
    display: block flex;
    flex-wrap: wrap;
    align-items: center;
    inline-size: fit-content;
    min-inline-size: var(--_min-inline-size);
    padding-block: 7.5px;
    padding-inline: var(--_padding-inline);
    overflow: clip;
    font-family: var(--serif);
    font-size: 14px;
    font-weight: 600;
    color: var(--_color);
    background: var(--_background-color);
    border-radius: var(--_border-radius);
    isolation: isolate;
    transition: all 250ms ease 0s;

    @media (width <= 768px) {
      min-inline-size: var(--_min-inline-size);
      padding-block: calc((100 / 390) * 6.3 * 1vw);
      padding-inline: var(--_padding-inline);
      font-size: calc((100 / 390) * 13 * 1vw);
    }

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

    /* ==== arrow ==== */
    &::before {
      position: absolute;
      inset-inline-end: 13px;
      z-index: 3;
      inline-size: 13px;
      aspect-ratio: 12 / 14;
      content: '';
      background-color: currentcolor;
      mask-image: var(--icon-arrow);
      mask-repeat: no-repeat;
      mask-position: center;
      mask-size: contain;
      transition: inherit;

      @media (width <= 768px) {
        inset-inline-end: calc((100 / 390) * 13 * 1vw);
        inline-size: calc((100 / 390) * 10 * 1vw);
      }
    }

    /* ==== box ==== */
    &::after {
      position: absolute;
      inset-inline-end: 0;
      z-index: 2;
      inline-size: 40px;
      block-size: 100%;
      content: '';
      background: var(--_background-color);
      border-inline-start: 1px solid var(--_color);
      border-radius: 0 var(--_border-radius) var(--_border-radius) 0;
      transition: inherit;

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

  /* =====================
    .u-head
  ===================== */
  :where(.u-head) {
    display: block flex;
    gap: 20px;
    align-items: center;
    inline-size: fit-content;
    margin-inline: auto;
    font-size: 18px;

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

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

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

  /* =====================
    u-hgroup
  ===================== */
  :where(.u-hgroup) {
    display: block grid;
    grid-template-rows: repeat(auto-fit, minmax(0, min-content));
    gap: 26px;
    inline-size: fit-content;

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

    /* ==== .title ==== */
    .title {
      display: block flex;
      gap: 20px;
      align-items: center;
      font-family: var(--serif);
      font-size: 18px;
      font-weight: 400;

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

      &::before {
        display: block flow;
        inline-size: 22px;
        aspect-ratio: 1 / 1;
        content: '';
        background: #e1e6ff;
        border-radius: 3px;

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

    /* ==== [lang="en"] ==== */
    [lang='en'] {
      margin-block: calc((1em - 1lh) / 2);
      font-size: 70px;
      font-weight: 400;
      line-height: 1.1;

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

  /* =====================
    u-news
  ===================== */
  :where(.u-news) {
    display: grid;

    /* ==== li or details ==== */
    .unit {
      position: relative;
      display: grid;
      grid-template-columns: auto auto 1fr;

      /* ==== details ==== */
      &:is(:first-child:is(details)) {
        border-block-start: 1px solid var(--smoke);
      }

      &:is(details) {
        padding-inline: 24px;
        border-block-end: 1px solid var(--smoke);

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

        &[hidden] {
          display: none;
        }

        .title {
          font-size: 16px;
          font-weight: 500;

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

      @media (width <= 768px) {
        grid-template-rows: auto 1fr;
        grid-template-columns: auto 1fr;
      }
    }

    /* ==== a or summary ==== */
    .anchor {
      position: relative;
      display: grid;
      grid-template-columns: subgrid;
      grid-column: span 3;
      gap: 17px;
      align-items: center;
      padding-block: 50.1px;
      cursor: pointer;
      border-block-end: 1px solid var(--smoke);
      transition: all 250ms ease 0s;

      @media (width <= 768px) {
        grid-column: span 2;
        gap: 2.9vw calc((100 / 390) * 17 * 1vw);
        padding-block: 7.9vw 7.7vw;
      }

      /* ==== summary ==== */
      &:is(summary) {
        gap: 11px 16px;
        border-block-end: none;

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

        /* ==== ± ==== */
        &::after {
          position: absolute;
          inset-block-start: 49%;
          inset-inline-end: 0;
          inline-size: 25px;
          aspect-ratio: 1 / 1;
          content: '';
          background: #b7b7b7;
          clip-path: polygon(47% 0%, 53% 0%, 53% 47%, 100% 47%, 100% 53%, 53% 53%, 53% 100%, 47% 100%, 47% 53%, 0% 53%, 0% 47%, 47% 47%);
          mask-repeat: no-repeat;
          mask-position: center;
          mask-size: contain;
          translate: 0 -50%;
          transition: clip-path 150ms ease 0s;
          will-change: clip-path;

          @media not all and (width >= 768px) {
            inset-inline-end: 0;
            inline-size: calc((100 / 390) * 20 * 1vw);
          }
        }
      }

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

    /* ==== time ==== */
    & time {
      display: block grid;
      grid-row: 1 / 2;
      grid-column: 1 / 2;
      margin-block: calc((1em - 1lh) / 2);
      font-size: 13px;
      font-weight: 400;
      line-height: 1;
      color: var(--smoke);

      @media not all and (width >=768px) {
        grid-row: 1 / 2;
        grid-column: 1 / 2;
        grid-auto-flow: column;
        font-size: calc((100 / 750) * 26 * 1vw);
        font-weight: 400;
        color: var(--smoke);
      }
    }

    /* ==== category ==== */
    .category {
      display: block flow;
      grid-row: 1 / 2;
      grid-column: 2 / 3;
      inline-size: 100%;
      min-inline-size: 55px;
      padding-block: 5px;
      padding-inline: 5px;
      font-size: 10px;
      font-weight: 700;
      line-height: 1;
      color: white;
      text-align: center;
      background: var(--color-text-primary);
      border-radius: 4px;

      @media (width <= 768px) {
        grid-row: 1 / 2;
        grid-column: 2 / 3;
        inline-size: fit-content;
        min-inline-size: calc((100 / 390) * 55 * 1vw);
        padding-block: 1.2vw;
        padding-inline: 1.6vw;
        font-size: calc((100 / 390) * 10 * 1vw);
      }

      &[data-type='news'] {
        background: #ef4b9e;
      }

      &[data-type='recruit'] {
        background: #42a4fd;
      }
    }

    /* ==== title ==== */
    .title {
      grid-row: 1 / 2;
      grid-column: 3 / 4;
      font-size: 15px;
      font-weight: 350;

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

    /* ==== contents ==== */
    .container {
      display: grid;
      grid-template-rows: 0fr;
      grid-template-columns: 1fr;
      grid-row: 2 / 3;
      padding-block-end: 33px;
      padding-inline: 0;
      overflow: hidden;
      font-weight: 350;
      transition: grid-template-rows 250ms ease 0ms;
      animation: none;
      will-change: grid-template-rows;

      @media not all and (width >=768px) {
        padding-block: 2.1vw 8vw;
        padding-inline: 0;
        font-size: calc((100 / 390) * 15 * 1vw);
      }

      .wrap {
        display: grid;
        grid-template-rows: 0fr;
        grid-auto-flow: row;
        padding-inline-end: 10px;
        overflow: hidden;
        line-height: 1.8;
      }
    }

    /* ==== details ==== */
    details[open] {
      grid-template-rows: auto 1fr;
      grid-template-columns: auto;

      .container {
        grid-template-rows: 1fr;
      }

      & summary {
        grid-template-columns: auto auto 1fr !important;
        grid-auto-rows: auto;
        padding-block-end: 32px;

        @media (width <= 768px) {
          grid-template-columns: auto 1fr !important;
          grid-auto-rows: auto 1fr;
          padding-block: calc((100 / 390) * 33.5 * 1vw) 7.7vw;
          padding-block-end: calc((100 / 390) * 11.3 * 1vw);
          padding-inline: 0;
        }

        &::after {
          inset-block-start: 62px;
          clip-path: polygon(47% 47%, 53% 47%, 53% 47%, 100% 47%, 100% 53%, 53% 53%, 53% 53%, 47% 53%, 47% 53%, 0% 53%, 0% 47%, 47% 47%);

          @media (width <= 768px) {
            inset-block-start: 10.8vw;
          }
        }
      }
    }
  }

  /* =====================
    u-hr
  ===================== */
  :where(.u-hr) {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: auto;
    z-index: 2;
    display: block flow;
    inline-size: 100vw;
    block-size: 1px;
    pointer-events: none;
    background: #949494;

    @media (width > 1441px) {
      inline-size: 100%;
    }

    &[data-size='fit'] {
      @media (width > 768px) {
        inline-size: 100%;
      }
    }
  }

  /* =====================
    u-mv
  ===================== */
  :where(.u-mv) {
    --_block-size: 320px;

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

    position: relative;
    z-index: 2;
    inline-size: 100%;
    block-size: var(--_block-size);
    overflow: clip;

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

    /* ==== inner ==== */
    .inner {
      position: relative;
      display: block grid;
      grid-template-columns: auto 800px;
      gap: 0 90px;
      align-items: flex-start;
      justify-content: flex-start;
      max-inline-size: 1280px;
      block-size: inherit;
      margin-inline: auto;

      @media (width <= 768px) {
        display: contents;
        flex-direction: column;
        gap: 0;
        padding-inline: calc((100 / 390) * 16 * 1vw);
      }
    }

    /* ==== hgroup ==== */
    hgroup {
      display: block grid;
      gap: 21px;
      inline-size: fit-content;
      padding-block-start: 67px;
      margin-block: calc((1em - 1lh) / 2);
      font-weight: 400;

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

      h1 {
        margin-block: calc((1em - 1lh) / 2);
        font-family: var(--serif);
        font-size: 18px;

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

      [lang='en'] {
        margin-block: calc((1em - 1lh) / 2);
        font-size: 70px;

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

    /* ==== picture ==== */
    picture {
      display: block flow;
      block-size: var(--_block-size);

      @media (width > 768px) {
        position: absolute;
        inset-block-start: 0;
        inset-inline-end: 0;
        inline-size: 55.6vw;
        min-inline-size: 800px;
        max-inline-size: calc(100vw - 400px);
      }

      @media (width <= 768px) {
        order: 2;
        inline-size: calc((100 / 390) * 358 * 1vw);
        block-size: calc((100 / 390) * 180 * 1vw);
        margin-block-start: 11.4vw;
        margin-inline: auto;
      }

      & img {
        inline-size: 100%;
        block-size: 100%;
        object-fit: cover;
        object-position: center;

        @media (width > 1441px) {
          object-fit: cover;
        }
      }
    }

    /* ==== u-breadcrumb ==== */
    .u-breadcrumb {
      position: absolute;
      inset-block-end: 4px;
      inset-inline-start: 0;

      @media (width <= 768px) {
        position: unset;
        inset: unset;
        gap: 2.1vw;
        order: 3;
        padding-inline: calc((100 / 390) * 16 * 1vw);
        margin-block-start: 5vw;
      }
    }
  }

  /* =====================
    .u-breadcrumb
  ===================== */
  :where(.u-breadcrumb) {
    display: block flex;
    gap: 7px;
    align-items: center;
    inline-size: fit-content;
    font-family: var(--serif);

    @media only screen and (width <= 768px) {
      flex-wrap: wrap;
      gap: calc((100 / 390) * 22 * 1vw) calc((100 / 390) * 13 * 1vw);
      justify-content: flex-end;
    }

    & li {
      display: block flex;
      gap: 9px;
      align-self: center;
      margin-block: calc((1em - 1lh) / 2);

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

    & li:not(:last-child)::after {
      content: '–';
    }

    .item {
      display: block flex;
      gap: 12px;
      align-items: center;
      margin-block: calc((1em - 1lh) / 2);
      font-size: 14px;
      line-height: 1;

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

      &:has(small) {
        gap: 0;

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

      small {
        font-size: 12px;

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

      &:is(a) {
        font-family: var(--sans-serif);
        transition: all 250ms ease 0s;

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

  /* =====================
    u-main
  ===================== */
  :where(.u-main) {
    position: relative;

    &::before {
      position: absolute;
      inset-block-start: 270px;
      inset-inline-start: 0;
      z-index: 1;
      display: block flow;
      inline-size: 1440px;
      block-size: 845px;
      pointer-events: none;
      content: '';
      background-image: url('../img/_common/bg-main.png');
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
      isolation: isolate;

      @media (width <= 768px) {
        inset-block-start: 0;
        inset-inline-start: 0;
        inline-size: calc((100 / 390) * 572 / 2 * 1vw);
        block-size: calc((100 / 390) * 761 / 2 * 1vw);
        background-image: url('../img/_common/bg-main_sp.png');
      }
    }
  }

  /* =====================
    u-bg
  ===================== */
  :where(.u-bg) {
    position: absolute;
    pointer-events: none;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

    &[data-id='2'] {
      inset-block-start: -71px;
      inset-inline-end: 0;
      inline-size: 829px;
      block-size: 845px;
      background-image: url('../img/_common/bg-main2.png');

      @media (width <= 768px) {
        inset-block-start: -1vw;
        inset-inline-end: 0;
        inline-size: calc((100 / 390) * 780 / 2 * 1vw);
        block-size: calc((100 / 390) * 674 / 2 * 1vw);
        background-image: url('../img/_common/bg-main2_sp.png');
      }
    }

    &[data-id='3'] {
      inset-block-start: 497px;
      inset-inline-end: -219px;
      inline-size: 1880px;
      block-size: 845px;
      background-image: url('../img/_common/bg-main3.png');

      @media (width <= 768px) {
        inset-block-start: 75vw;
        inset-inline-end: 0;
        inline-size: calc((100 / 390) * 780 / 2 * 1vw);
        block-size: calc((100 / 390) * 761 / 2 * 1vw);
        background-image: url('../img/_common/bg-main3_sp.png');
      }
    }
  }

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

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

  /* =====================
    u-hover
  ===================== */
  :where(.u-hover) {
    transition: opacity 0.3s ease-in-out;
    will-change: opacity;

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

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

    display: block grid;
    grid-template-columns: 207px 1fr;
    inline-size: 1120px;
    margin-inline: auto;

    @media (width <= 768px) {
      grid-template-columns: 26vw 1fr;
      inline-size: 100%;
      font-size: calc((100 / 390) * 15 * 1vw);
    }

    .column {
      display: block flex;
      flex-direction: column;
      gap: 4px;

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

    /* ==== 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: 28.7px 31.7px;

        @media (width <= 768px) {
          padding-block: 4vw 6.3vw;
          word-break: break-all;
        }

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

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

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

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

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

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

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

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

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

  /* =====================
    u-empty
  ===================== */
  :where(.u-empty) {
    inline-size: fit-content;
    padding-block: 1em;
    margin-inline: auto;
  }

  /* =====================
    .u-pagination
  ===================== */
  :where(.u-pagination) {
    display: block flex;
    flex-wrap: wrap;
    grid-auto-flow: column;
    gap: 1em;
    align-items: center;
    justify-content: center;
    margin-block-start: 3.5em;

    .dots {
      opacity: 0.5;
    }

    & a {
      aspect-ratio: 1 / 1;
      padding: 0.5em;
      font-family: var(--title);
      font-size: 20px;
      font-weight: 500;
      line-height: 1;
      color: var(--color-text-secondary);
      border-block-end: 1px solid transparent;
      transition: all 250ms ease 0s;

      @media (any-hover: hover) {
        &:hover {
          border-block-end: 1px solid var(--color-text-primary);
          opacity: 0.7;
        }
      }
    }

    & .current {
      pointer-events: none;
      border-block-end: 1px solid var(--color-text-primary);

      & a {
        color: var(--color-text-primary);
      }
    }
  }
}