@charset "utf-8";

/* =====================
  印刷共通設定
===================== */
* {
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

*,
*::before,
*::after {
  transition: none !important;
  animation: none !important;
}

.to-top {
  display: none !important;
}

/* =====================
  common
===================== */
.u-inner {
  max-inline-size: 100% !important;
}

/* =====================
  header
===================== */
.header {
  position: absolute;
  padding-block: 20px;
  background-color: color-mix(in srgb, var(--primary) 70%, transparent);

  .logo {
    inline-size: 60px;
  }

  @media (orientation: portrait) {
    padding-inline: 15px;

    & * {
      font-size: 9pt;
    }
  }

  & ul {
    gap: 5mm !important;
  }
}

/* =====================
  段落制御
===================== */
p {
  break-inside: avoid;
  widows: 2;
  orphans: 2;
}

/* =====================
  main
===================== */
.main {
  & .wrapper[data-id='1']::before {
    inline-size: 644px !important;
  }
}

/* =====================
  mv
===================== */
.mv {
  page-break-before: always;
  break-before: page;
  page-break-after: always;
  break-after: page;

  & span.char {
    opacity: 1 !important;
    translate: 0 0% !important;
  }

  @media (orientation: portrait) {
    .pagination {
      display: none !important;
    }

    & [lang='en'] span {
      font-size: 164px !important;
    }
  }
}

/* =====================
  company
===================== */
article.company {
  page-break-before: always;
  break-before: page;
  page-break-after: always;
  break-after: page;

  @media (orientation: landscape) {
    padding: 30mm 20mm !important;
  }

  @media (orientation: portrait) {
    padding: 10mm 5mm !important;

    .inner {
      gap: 0 5mm !important;
    }

    .lead {
      font-size: 40pt !important;
    }

    & p + p {
      margin-block-start: 5mm !important;
    }
  }
}

/* =====================
  .service
===================== */
article.service {
  @media (orientation: landscape) {
    padding-top: 10mm !important;
  }

  page-break-before: always;
  break-before: page;
  page-break-after: always;
  break-after: page;

  @media (orientation: portrait) {
    padding: 10mm 5mm !important;

    --_negative: 0 !important;

    .head {
      margin-block-end: 10mm !important;
    }

    .inner {
      grid-template-columns: 1fr 50% !important;
      gap: 0 5mm !important;
      padding: 0 !important;
    }

    .lead {
      font-size: 40pt !important;
    }

    & p + p {
      margin-block-start: 5mm !important;
    }

    .list {
      margin-left: 0 !important;
    }
  }
}

/* =====================
  works
===================== */
article.works {
  @media (orientation: landscape) {
    padding: 0 !important;
  }

  @media (orientation: portrait) {
    padding: 10mm 5mm !important;

    & li {
      inline-size: 58.4mm !important;
    }
  }

  break-before: avoid;
  page-break-before: always;
  break-after: avoid;
  break-inside: avoid;
  page-break-inside: avoid;
  page-break-after: avoid;

  .anchor {
    padding-block: 5mm !important;

    @media (orientation: portrait) {
      display: block flex !important;
      flex-direction: column !important;
      gap: 5mm !important;
    }
  }
}

/* =====================
  .others
===================== */
div.others {
  @media (orientation: landscape) {
    padding: 0 !important;
  }

  .inner {
    margin-block-start: -24mm !important;

    @media (orientation: portrait) {
      padding: 0 5mm !important;
    }
  }

  & img {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}

/* =====================
  .recruit
===================== */
article.recruit {
  @media (orientation: landscape) {
    page-break-before: always;
    break-before: page;
    page-break-after: always;
    break-after: page;
  }
}

/* =====================
  aside
===================== */
.aside {
  @media (orientation: portrait) {
    & section {
      padding-inline: 5mm !important;
    }

    .catch {
      font-size: 15pt !important;
    }

    .body {
      font-size: 10pt !important;
    }
  }
}

/* =====================
  footer
===================== */
.footer {
  @media (orientation: portrait) {
    padding: 10mm 5mm !important;

    .inner {
      gap: 8mm 11mm !important;
      padding-bottom: 10mm !important;
    }

    .address {
      grid-area: 2 / 1 / 3 / 3;
    }

    .main-nav {
      display: block flex;
      flex-wrap: wrap;
      gap: 5mm !important;
    }

    .sub-nav {
      display: block flex;
      flex-wrap: wrap;
    }

    .sub {
      gap: 5mm !important;
      justify-content: flex-start !important;

      .unit {
        gap: 5mm !important;
      }
    }

    & small {
      translate: unset !important;
    }
  }
}