@charset "utf-8";

/* =====================
  Custom properties
===================== */
:root {
  --black: #1e1e1e;
  --navy: #202020;
  --letter-spacing: 2.9px;

  /* ==== text ==== */
  --title: 'Jacques Francois', serif;

  /* ==== icon ==== */

  /* ==== アニメーション easing関数 ==== */
  --easeOutQuart: cubic-bezier(0.25, 1, 0.5, 1);
  --easeOutExpo: cubic-bezier(0.87, 0, 0.13, 1);
  --easeOutBack: cubic-bezier(0.34, 1.56, 0.64, 1);
  --easeOutQuint: cubic-bezier(0.22, 1, 0.36, 1);
  --easeInCirc: cubic-bezier(0.55, 0, 1, 0.45);
  --easeInOutBack: cubic-bezier(0.68, -0.6, 0.32, 1.6);
  --easeOutSine: cubic-bezier(0.61, 1, 0.88, 1);
  --slideInBezier: cubic-bezier(0.16, 0.5, 0.43, 1);
}

@media not all and (width >=768px) {
  :root {
    --letter-spacing: 0.6vw;
  }
}

/* =====================
  style
===================== */
html,
body {
  font-family: 'Shippori Mincho', 'Noto Serif SC', serif;
  font-weight: 400;
  line-height: 1.8;
  color: white;
}

@media print, screen and (width >= 768px) {
  .sp {
    display: none;
  }
}

@media not all and (width >= 768px) {
  .pc {
    display: none;
  }
}

/* p */
p {
  line-height: 2.12;
}

/* =====================
  hover
===================== */
@media (any-hover: hover) {
  .hover-op {
    transition: opacity 250ms ease 0s;
    will-change: opacity;

    &:hover {
      opacity: 0.6;
    }
  }
}

/* =====================
  u-vertical
===================== */
.u-vertical {
  letter-spacing: var(--letter-spacing);
  writing-mode: vertical-rl;
  text-orientation: upright;
}

/* =====================
  u-head
===================== */
.u-head {
  position: absolute;
  top: 120px;
  right: 160px;
  z-index: 2;
  display: grid;
  grid-auto-flow: column;
  gap: 17px;
  align-items: flex-start;
  justify-content: flex-end;

  @media not all and (width >=768px) {
    inset: auto;
    top: calc((100 / 750) * 256 * 1vw);
    left: calc((100 / 750) * 40 * 1vw);
    gap: calc((100 / 750) * 17 * 1vw);
  }

  & h2 {
    margin-block: calc((1em - 1lh) / 2);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: 4px;
    translate: 0 -5px;

    @media not all and (width >=768px) {
      font-size: calc((100 / 750) * 30 * 1vw);
      letter-spacing: 0.8vw;
      translate: 0;
    }
  }

  & [lang='en'] {
    margin-block: calc((1em - 1lh) / 2);
    font-family: 'Cormorant Garamond', serif;
    font-size: 18px;
    font-weight: 300;
    letter-spacing: 1.44px;
    opacity: 0.7;
    writing-mode: vertical-rl;

    @media not all and (width >=768px) {
      font-size: calc((100 / 750) * 30 * 1vw);
      letter-spacing: 0.36vw;
    }
  }
}

/* =====================
  u-anchor
===================== */
.u-anchor {
  position: relative;
  display: block grid;
  grid-auto-flow: column;
  gap: 12px;
  align-items: center;
  align-self: flex-start;
  justify-content: center;
  width: fit-content;
  padding-block: 13.6px;
  padding-inline: 31px;
  font-size: 16px;
  font-weight: 700;
  border: 1px solid white;
  border-radius: calc(infinity * 1px);
  transition: background 250ms ease 0s, border-block-end-color 250ms ease 0s;
  will-change: background, border-block-end-color;

  @media not all and (width >=768px) {
    gap: 3.7vw;
    padding-block: 2.5vw;
    padding-inline: 5.9vw;
    margin-inline: auto;
    font-size: calc((100 / 750) * 26 * 1vw);
    letter-spacing: 0;
  }

  @media (any-hover: hover) {
    &:hover {
      background: color-mix(in srgb, var(--black) 20%, transparent);
      border-block-end-color: var(--purple);

      &::after {
        transform: translateX(3px);
      }
    }
  }

  &::after {
    inline-size: 4px;
    aspect-ratio: 1 / 1;
    content: '';
    background: white;
    border-radius: calc(infinity * 1px);
  }

  @media not all and (width >=768px) {
    &::after {
      inline-size: calc((100 / 750) * 8 * 1vw);
      translate: 1px -2px;
    }
  }
}

/* =====================
  u-inner
===================== */
.u-inner {
  max-inline-size: 1120px;
  padding-block: 54px 183px;
  padding-inline: 64px;
  margin-block-start: 64px;
  margin-inline: auto;
  color: var(--black);
  background: white;

  @media not all and (width >=768px) {
    max-inline-size: calc((100 / 750) * 670 * 1vw);
    padding-block: calc((100 / 750) * 61 * 1vw) calc((100 / 750) * 64 * 1vw);
    padding-inline: calc((100 / 750) * 40 * 1vw);
    margin-block-start: calc((100 / 750) * 80 * 1vw);
  }
}

/* =====================
  u-local-nav
===================== */
.u-local-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-flow: column;
  gap: 24px;
  align-items: center;
  justify-content: center;
  inline-size: 770px;
  margin-inline: auto;

  @media not all and (width >=768px) {
    grid-template-columns: 100%;
    grid-auto-flow: row;
    gap: calc((100 / 750) * 40 * 1vw);
    inline-size: calc((100 / 750) * 599 * 1vw);
  }

  /* ==== anchor ==== */
  & a {
    display: grid;
    place-content: center;
    padding-block: 17px;
    padding-inline: 55px;
    font-size: 18px;
    font-weight: bold;
    border: 1px solid white;
    border-radius: 8px;
    transition: all 250ms ease 0s;

    @media (any-hover: hover) {
      &:hover {
        background: color-mix(in srgb, white 20%, var(--navy));
      }
    }

    @media not all and (width >=768px) {
      padding-block: 4vw;
      padding-inline: 10.3vw;
      font-size: calc((100 / 750) * 30 * 1vw);
    }

    &[data-selected='true'] {
      color: var(--navy);
      pointer-events: none;
      background: white;
    }
  }
}

/* =====================
  header
===================== */
.header {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 100;
  display: grid;
  grid-auto-flow: column;
  block-size: 100%;
  padding-block: 24px;

  @media not all and (width >=768px) {
    padding-block: 0;
  }

  /* ==== button ==== */
  .buttons {
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 23px;
    align-items: flex-start;
    justify-content: center;
    inline-size: 117px;
    block-size: inherit;

    @media not all and (width >=768px) {
      gap: 1vw;
      inline-size: 16.7vw;
      padding-inline-end: 1vw;
    }

    /* ==== button ==== */
    & button {
      position: relative;
      display: grid;
      gap: 15px;
      inline-size: 40px;
      aspect-ratio: 1 / 1;
      padding-block: 15px;
      margin-inline: auto;

      @media not all and (width >=768px) {
        gap: 3vw;
        inline-size: calc((100 / 750) * 56 * 1vw);
        padding-block: 5vw;
      }

      &::before,
      &::after {
        display: block;
        block-size: 1px;
        content: '';
        background: white;
        transition: all 250ms ease 0s;
      }

      @media (any-hover: hover) {
        &:hover {
          &::before,
          &::after {
            background: color-mix(in srgb, white 70%, transparent);
          }
        }
      }
    }
  }
}

body[data-current='footer'] .header {
  display: none;
}

/* =====================
  top-logo
===================== */
.top-logo {
  position: fixed;
  top: 32px;
  left: 40px;
  z-index: 10;
  opacity: 0;
  filter: blur(0.5em);
  transition: all 600ms ease 0s;

  @media not all and (width >=768px) {
    top: calc((100 / 750) * 40 * 1vw);
    left: calc((100 / 750) * 40 * 1vw);
    inline-size: calc((100 / 750) * 252 * 1vw);
    block-size: calc((100 / 750) * 80 * 1vw);
  }
}

body:not([data-current='footer']) .top-logo {
  opacity: 1;
  filter: blur(0);
}

/* =====================
  pager
===================== */
.pager {
  position: fixed;
  top: 50%;
  left: 40px;
  z-index: 20;
  display: grid;
  gap: 13px;
  translate: 0 -50%;

  @media only screen and (width <= 768px) {
    top: 48%;
    left: calc((100 / 750) * 30 * 1vw);
    gap: calc((100 / 750) * 16 * 1vw);
  }

  & button {
    display: block;
    inline-size: 7px;
    aspect-ratio: 1 / 1;
    border: 1px solid white;
    border-radius: calc(infinity * 1px);
    opacity: 0.7;

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

body[data-current='home'] .pager button[data-label='home'],
body[data-current='concept'] .pager button[data-label='concept'],
body[data-current='philosophy'] .pager button[data-label='philosophy'],
body[data-current='story'] .pager button[data-label='story'],
body[data-current='commitment'] .pager button[data-label='commitment'],
body[data-current='footer'] .pager button[data-label='footer'] {
  background: white;
}

/* =====================
  footer
===================== */
.footer {
  block-size: 100lvh;
  background: var(--black);

  /* ==== inner ==== */
  .inner {
    display: grid;
    grid-template-columns: minmax(902px, 56%) 1fr;
    block-size: 100%;

    @media not all and (width >=768px) {
      grid-template-rows: calc((100 / 750) * 750 * 1vw) auto;
      grid-template-columns: 100%;
    }
  }

  /* ==== .unit[data-id='1'] ==== */
  .unit[data-id='1'] {
    display: grid;
    align-items: flex-start;
    justify-content: center;
    padding-block: 80px 0;
    padding-inline: 0;

    @media not all and (width >=768px) {
      grid-template-rows: auto auto auto auto 1fr;
      padding-block: calc((100 / 750) * 51 * 1vw) 0;
      padding-inline: calc((100 / 750) * 40 * 1vw);
    }

    @media not all and (width >=768px) {
      grid-row: 2 / 3;
      grid-column: 1 / 2;
      gap: 0;
      justify-content: space-between;
      padding-inline: calc((100 / 750) * 81 * 1vw) calc((100 / 750) * 76 * 1vw);
    }

    /* ==== catch ==== */
    .catch {
      display: block grid;
      gap: 21.5px;
      place-content: center;
      font-size: 22px;
      font-style: normal;
      font-weight: 500;
      font-feature-settings: 'vert' on;
      line-height: 1.2;
      letter-spacing: 3.9px;
      text-shadow: 1px 1px 3px rgb(0 0 0 / 60%);
      translate: 0 0;

      @media only screen and (width <= 768px) {
        grid-row: 1 / span 3;
        grid-column: 1 / 2;
        gap: calc((100 / 750) * 21.5 * 1vw);
        margin-inline-start: 4.3vw;
        font-size: calc((100 / 750) * 30 * 1vw);
        letter-spacing: calc((100 / 750) * 5.8 * 1vw);
      }

      & span + span {
        translate: 0 25px;

        @media only screen and (width <= 768px) {
          translate: 0 calc((100 / 750) * 39 * 1vw);
        }
      }
    }

    /* ==== logo ==== */
    .logo {
      display: block;
      align-self: flex-start;
      inline-size: 256px;
      margin-block: 84px 0;
      margin-inline: auto;
      translate: 19px 0;

      @media not all and (width >=768px) {
        grid-row: 1 / 2;
        grid-column: 2 / 3;
        inline-size: calc((100 / 750) * 256 * 1vw);
        margin-block: 0;
        margin-block-end: unset;
        translate: unset;
      }
    }

    /* ==== nav ==== */
    .nav {
      place-self: flex-start auto;
      translate: 26px -15px;

      @media not all and (width >=768px) {
        grid-row: 2 / 3;
        grid-column: 2 / 3;
        translate: unset;
      }

      & ul {
        display: grid;
        grid-auto-flow: column;
        gap: 47px;
        justify-content: flex-start;
        margin-block-end: 0;

        @media not all and (width >=768px) {
          
          
          
          
          gap: 9.2vw;
          justify-content: center;
          margin-block-start: 8.1vw;
          margin-inline-end: 3.1vw;
          
          
          
          
        }

        & li {
          font-size: 16px;
          font-style: normal;
          font-weight: 700;
          line-height: 1;
          color: var(--white, #fff);

          @media not all and (width >=768px) {
            font-size: calc((100 / 750) * 26 * 1vw);
          }
        }
      }
    }

    /* ==== small ==== */
    small {
      font-size: 12px;
      font-weight: 400;
      text-align: center;
      letter-spacing: 0.12px;
      translate: 0 -39px;

      @media not all and (width >=768px) {
        grid-row: 3 / 4;
        grid-column: 2 / 3;
        margin-block-start: 5.4vw;
        font-size: calc((100 / 750) * 22 * 1vw);
        letter-spacing: 0;
        translate: unset;
      }
    }
  }

  /* ==== .unit[data-id='2'] ==== */
  .unit[data-id='2'] {
    position: relative;
    display: grid;
    place-content: flex-end center;
    padding-block-end: 80px;

    @media not all and (width >=768px) {
      grid-row: 1 / 2;
      grid-column: 1 / 2;
      block-size: calc((100 / 750) * 750 * 1vw);
      padding-block-end: 8.4vw;
    }

    /* ==== img ==== */
    .img {
      position: absolute;
      top: 50%;
      left: 50%;
      inline-size: 100%;
      block-size: 100%;
      pointer-events: none;
      object-fit: cover;
      translate: -50% -50%;
    }

    /* ==== anchor ==== */
    .u-anchor {
      position: static;
      z-index: 2;
      padding-block: 18px;
      padding-inline: 24px;
      font-size: 20px;
      font-weight: 700;
      letter-spacing: 0.4px;

      @media not all and (width >=768px) {
        padding-block: 3.6vw;
        padding-inline: 1.8vw;
        font-size: calc((100 / 750) * 26 * 1vw);
        letter-spacing: 0;
        letter-spacing: 0.4px;
      }

      &::before {
        position: absolute;
        inset: 0;
        z-index: 20;
        display: block;
        inline-size: 100%;
        block-size: 100%;
        content: '';
      }
    }
  }
}

/* =====================
  toggle-menu
===================== */
body.menu-on {
  overflow: hidden;
}

body.menu-on .toggle-menu {
  z-index: 101;
  pointer-events: auto;
  opacity: 1;
}

.toggle-menu {
  position: fixed;
  inset: 0;
  z-index: -1;
  inline-size: 100%;
  block-size: 100%;
  pointer-events: none;
  background: var(--navy);
  opacity: 0;
  transition: all 350ms ease 0s;

  /* ==== inner ==== */
  .inner {
    position: relative;
    padding-block: 54px;
    padding-inline: 3.1% 7%;

    @media not all and (width >=768px) {
      padding-block: 8vw;
      padding-inline: calc((100 / 750) * 40 * 1vw);
    }
  }

  /* ==== close-menu ==== */
  .close-menu {
    position: absolute;
    top: 40px;
    right: 40.1px;
    z-index: 20;
    display: block;
    margin-inline: auto 0;

    @media not all and (width >=768px) {
      top: 5vw;
      right: 5vw;
      inline-size: calc((100 / 750) * 46.67 * 1vw);
    }
  }

  /* ==== contents ==== */
  .contents {
    display: grid;
    grid-template-columns: 1fr 49vw;
    block-size: 100%;

    @media not all and (width >=768px) {
      grid-template-rows: auto auto auto auto 1fr;
      grid-template-columns: 100%;
    }

    /* ==== .unit[data-id='1'] ==== */
    .unit[data-id='1'] {
      display: grid;
      grid-template-rows: auto auto auto 1fr;
      align-items: flex-start;
      padding-block: 0;
      padding-inline: 28px;

      @media not all and (width >=768px) {
        display: contents;
        grid-template-rows: auto auto auto auto 1fr;
        padding-inline: 0;
      }

      /* ==== logo ==== */
      .logo {
        display: block;
        inline-size: 250px;
        margin-block: calc((1em - 1lh) / 2);
        margin-block-end: 153px;
        translate: -4px 0;

        @media not all and (width >=768px) {
          grid-area: 1 / 1 / 2 / 2;
          inline-size: calc((100 / 750) * 202 * 1vw);
          margin-block-end: calc((100 / 750) * 20 * 1vw);
          translate: 0 0;
        }
      }

      /* ==== nav ==== */
      .nav {
        @media not all and (width >=768px) {
          grid-area: 3 / 1 / 4 / 2;
          margin-block-start: calc((100 / 750) * 94 * 1vw);
        }

        & ul {
          display: grid;
          grid-auto-flow: column;
          gap: 63px;
          justify-content: flex-start;
          padding-inline-start: 21px;
          margin-block-end: 133px;

          @media not all and (width >=768px) {
            gap: calc((100 / 750) * 70 * 1vw);
            padding-inline-start: 0;
            margin-block-end: 0;
          }

          & li {
            font-size: 16px;
            font-style: normal;
            font-weight: 700;
            line-height: 1;
            color: var(--white, #fff);

            @media not all and (width >=768px) {
              font-size: calc((100 / 750) * 26 * 1vw);
            }
          }
        }
      }

      /* ==== sns ==== */
      .sns {
        display: grid;
        grid-auto-flow: column;
        gap: 18px;
        justify-content: flex-start;
        padding-inline-start: 22px;
        margin-block: calc((1em - 1lh) / 2);
        margin-block-end: 33px;

        @media not all and (width >=768px) {
          gap: 3.9vw;
          padding-inline-start: 0;
          margin-block: 11.7vw 5.1vw;
        }

        /* ==== a ==== */
        & a {
          display: block;
          inline-size: 40px;
          aspect-ratio: 1 / 1;
        }
      }

      /* ==== anchor ==== */
      .anchor {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 10px;
        align-items: center;
        inline-size: fit-content;
        padding-block: 14px;
        padding-inline: 24px 25px;
        margin-block: calc((1em - 1lh) / 2);
        margin-block-end: 17px;
        margin-inline-start: 21px;
        font-size: 14px;
        font-weight: 700;
        line-height: 1;
        color: var(--navy);
        background-color: white;
        transition: all 250ms ease 0s;

        @media not all and (width >=768px) {
          gap: 1.3vw;
          padding-block: 3vw;
          padding-inline: 4.4vw;
          margin-block-end: 0;
          margin-inline-start: 0;
          font-size: calc((100 / 750) * 24 * 1vw);
        }

        @media (any-hover: hover) {
          &:hover {
            background: color-mix(in srgb, white 70%, var(--navy));
          }
        }

        &::before {
          display: block;
          inline-size: 26px;
          block-size: 26px;
          content: '';
          background-image: url('../img/common/nhk.png');
          background-repeat: no-repeat;
          background-position: center;
          background-size: contain;
          filter: brightness(0.19) sepia(0.3) saturate(0.9) hue-rotate(170deg);
        }

        @media not all and (width >=768px) {
          &::before {
            inline-size: calc((100 / 750) * 38 * 1vw);
            block-size: calc((100 / 750) * 38 * 1vw);
          }
        }
      }

      /* ==== small ==== */
      small {
        font-size: 12px;
        font-weight: 400;
        letter-spacing: 0.12px;
      }
    }

    /* ==== .unit[data-id='2'] ==== */
    .unit[data-id='2'] {
      position: relative;
      display: grid;
      place-content: flex-end center;
      padding-block-end: 35px;
      margin-block-start: 167px;

      @media not all and (width >=768px) {
        grid-area: 2 / 1 / 3 / 2;
        block-size: calc((100 / 750) * 340 * 1vw);
        padding-block-end: 4vw;
        margin-block-start: 8.8vw;
      }

      /* ==== img ==== */
      .img {
        position: absolute;
        top: 50%;
        left: 50%;
        inline-size: 100%;
        block-size: 100%;
        min-block-size: 476px;
        pointer-events: none;
        object-fit: cover;
        translate: -50% -50%;

        @media not all and (width >=768px) {
          min-block-size: calc((100 / 750) * 340 * 1vw);
        }
      }

      /* ==== anchor ==== */
      .u-anchor {
        position: static;
        z-index: 2;
        padding-block: 18px;
        padding-inline: 16px;
        font-size: 20px;
        font-weight: 700;
        letter-spacing: 0.4px;

        @media not all and (width >=768px) {
          padding-block: 3.3vw;
          padding-inline: 3vw;
          font-size: calc((100 / 750) * 26 * 1vw);
          letter-spacing: 0;
        }

        &::before {
          position: absolute;
          inset: 0;
          z-index: 20;
          display: block;
          inline-size: 100%;
          block-size: 100%;
          content: '';
        }
      }
    }
  }
}

/* =====================
  toggle-menu
===================== */
body.menu-on {
  overflow: hidden;
}

body.menu-on .toggle-menu {
  z-index: 101;
  pointer-events: auto;
  opacity: 1;
}

.toggle-menu {
  position: fixed;
  inset: 0;
  z-index: -1;
  inline-size: 100%;
  block-size: 100%;
  pointer-events: none;
  background: var(--navy);
  opacity: 0;
  transition: all 350ms ease 0s;

  /* ==== inner ==== */
  .inner {
    position: relative;
    padding-block: 0;
    padding-inline: 0;

    @media not all and (width >=768px) {
      padding-block: 0;
      padding-inline: calc((100 / 750) * 0 * 1vw);
    }
  }

  /* ==== close-menu ==== */
  .close-menu {
    position: absolute;
    top: 40px;
    right: 40.1px;
    z-index: 20;
    display: block;
    margin-inline: auto 0;

    @media not all and (width >=768px) {
      top: 5vw;
      right: 5vw;
      inline-size: calc((100 / 750) * 46.67 * 1vw);
    }
  }

  /* ==== contents ==== */
  .contents {
    display: grid;
    grid-template-columns: 1fr 49vw;
    block-size: 100%;

    @media not all and (width >=768px) {
      grid-template-rows: auto auto auto auto 1fr;
      grid-template-columns: 100%;
    }

    /* ==== .unit[data-id='1'] ==== */
    .unit[data-id='1'] {
      display: grid;
      grid-template-rows: auto auto auto 1fr;
      align-items: flex-start;
      padding-block: 0;
      padding-inline: 28px;

      @media not all and (width >=768px) {
        display: contents;
        grid-template-rows: auto auto auto auto 1fr;
        padding-inline: 0;
      }

      /* ==== logo ==== */
      .logo {
        display: block;
        inline-size: 250px;
        margin-block: calc((1em - 1lh) / 2);
        margin-block-end: 153px;
        translate: -4px 0;

        @media not all and (width >=768px) {
          grid-area: 1 / 1 / 2 / 2;
          inline-size: calc((100 / 750) * 202 * 1vw);
          margin-block-end: calc((100 / 750) * 20 * 1vw);
          translate: 0 0;
        }
      }

      /* ==== nav ==== */
      .nav {
        @media not all and (width >=768px) {
          grid-area: 3 / 1 / 4 / 2;
          margin-block-start: calc((100 / 750) * 94 * 1vw);
        }

        & ul {
          display: grid;
          grid-auto-flow: column;
          gap: 63px;
          justify-content: flex-start;
          padding-inline-start: 21px;
          margin-block-end: 133px;

          @media not all and (width >=768px) {
            gap: calc((100 / 750) * 70 * 1vw);
            padding-inline-start: 0;
            margin-block-end: 0;
          }

          & li {
            font-size: 16px;
            font-style: normal;
            font-weight: 700;
            line-height: 1;
            color: var(--white, #fff);

            @media not all and (width >=768px) {
              font-size: calc((100 / 750) * 26 * 1vw);
            }
          }
        }
      }

      /* ==== sns ==== */
      .sns {
        display: grid;
        grid-auto-flow: column;
        gap: 18px;
        justify-content: flex-start;
        padding-inline-start: 22px;
        margin-block: calc((1em - 1lh) / 2);
        margin-block-end: 33px;

        @media not all and (width >=768px) {
          gap: 3.9vw;
          padding-inline-start: 0;
          margin-block: 11.7vw 5.1vw;
        }

        /* ==== a ==== */
        & a {
          display: block;
          inline-size: 40px;
          aspect-ratio: 1 / 1;
        }
      }

      /* ==== anchor ==== */
      .anchor {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 10px;
        align-items: center;
        inline-size: fit-content;
        padding-block: 14px;
        padding-inline: 24px 25px;
        margin-block: calc((1em - 1lh) / 2);
        margin-block-end: 17px;
        margin-inline-start: 21px;
        font-size: 14px;
        font-weight: 700;
        line-height: 1;
        color: var(--navy);
        background-color: white;
        transition: all 250ms ease 0s;

        @media not all and (width >=768px) {
          gap: 1.3vw;
          padding-block: 3vw;
          padding-inline: 4.4vw;
          margin-block-end: 0;
          margin-inline-start: 0;
          font-size: calc((100 / 750) * 24 * 1vw);
        }

        @media (any-hover: hover) {
          &:hover {
            background: color-mix(in srgb, white 70%, var(--navy));
          }
        }

        &::before {
          display: block;
          inline-size: 26px;
          block-size: 26px;
          content: '';
          background-image: url('../img/common/nhk.png');
          background-repeat: no-repeat;
          background-position: center;
          background-size: contain;
          filter: brightness(0.19) sepia(0.3) saturate(0.9) hue-rotate(170deg);
        }

        @media not all and (width >=768px) {
          &::before {
            inline-size: calc((100 / 750) * 38 * 1vw);
            block-size: calc((100 / 750) * 38 * 1vw);
          }
        }
      }

      /* ==== small ==== */
      small {
        font-size: 12px;
        font-weight: 400;
        letter-spacing: 0.12px;
      }
    }

    /* ==== .unit[data-id='2'] ==== */
    .unit[data-id='2'] {
      position: relative;
      display: grid;
      place-content: flex-end center;
      padding-block-end: 35px;
      margin-block-start: 167px;

      @media not all and (width >=768px) {
        grid-area: 2 / 1 / 3 / 2;
        block-size: calc((100 / 750) * 340 * 1vw);
        padding-block-end: 4vw;
        margin-block-start: 8.8vw;
      }

      /* ==== img ==== */
      .img {
        position: absolute;
        top: 50%;
        left: 50%;
        inline-size: 100%;
        block-size: 100%;
        min-block-size: 476px;
        pointer-events: none;
        object-fit: cover;
        translate: -50% -50%;

        @media not all and (width >=768px) {
          min-block-size: calc((100 / 750) * 340 * 1vw);
        }
      }

      /* ==== anchor ==== */
      .u-anchor {
        position: static;
        z-index: 2;
        padding-block: 18px;
        padding-inline: 16px;
        font-size: 20px;
        font-weight: 700;
        letter-spacing: 0.4px;

        @media not all and (width >=768px) {
          padding-block: 3.3vw;
          padding-inline: 3vw;
          font-size: calc((100 / 750) * 26 * 1vw);
          letter-spacing: 0;
        }

        &::before {
          position: absolute;
          inset: 0;
          z-index: 20;
          display: block;
          inline-size: 100%;
          block-size: 100%;
          content: '';
        }
      }
    }
  }
}