@charset "UTF-8";
/* =====================================================
  1.0 - Foundation
===================================================== */
/* ----------------------------------------------
   1.1 Reset
---------------------------------------------- */
/* ---------- [ 1.11 ] global ---------- */
* {
  letter-spacing: var(--base-letter-spacing);
}

*,
::before,
::after,
::backdrop {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

@media (prefers-reduced-motion: reduce) {
  *,
  ::before,
  ::after,
  ::backdrop {
    transition: none !important;
    animation: none !important;
  }
}

/* ---------- [ 1.12 ] Document & Sections ---------- */
:where(html) {
  font-size: 0.83vw;
  font-family: var(--base-font-family);
  font-weight: var(--base-font-weight);
  line-break: strict;
  overflow-wrap: anywhere;
  line-height: var(--base-line-height, 1.5);
  color: var(--base-color);
  background-color: var(--base-background);
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  @media screen and (max-width: 1920px) {
    font-size: 100%;
  }
  @media screen and (max-width: 768px) {
    font-size: 100%;
    line-height: var(--base-line-height-sp, var(--base-line-height));
  }
}

:where(body) {
  min-block-size: 100svb;
  overflow-x: clip;
  font-size: var(--fs-md);
}

.is-drawer-open body {
  overflow: hidden;

  &::after {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    content: "";
    background-color: var(--base-filter);
    opacity: 0.5;
    z-index: 1;
  }
}

/* ---------- [ 1.13 ] Grouping content ---------- */
:where(section) {
  scroll-margin-block-start: var(--base-scroll-margin);
}

:where(ul, ol) {
  list-style: none;
}

/* ---------- [ 1.14 ] Text-level semantics ---------- */
:where(em, address) {
  font-style: normal;
}

:where(strong) {
  font-weight: 700;
  color: var(--base-strong-color);
}

:where(:any-link) {
  color: unset;
}

/* ---------- [ 1.15 ] Embedded content ---------- */
:where(img, svg, iframe) {
  display: block flow;
}

:where(img, picture, svg) {
  max-inline-size: 100%;
  block-size: auto;
}

/* ---------- [ 1.16 ] Tabular data ---------- */
:where(table) {
  border-collapse: collapse;
}

/* ---------- [ 1.17 ] Forms ---------- */
:where(input, button, textarea, select, optgroup) {
  color: unset;
  letter-spacing: inherit;
  word-spacing: inherit;
  font: unset;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
}

:where(textarea) {
  resize: vertical;
  resize: block;
}

:where(button, label, select, summary) {
  cursor: pointer;
}

/* ---------- [ 1.18 ] link ---------- */
:where(a, button) {
  text-decoration: none;
  transition: opacity var(--duration-normal);

  &:focus-visible {
    opacity: 0.5;
    outline: none;
  }

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

/* ---------- [ 1.19 ] Etc ---------- */
/* 管理バーが出ているとき（ログイン時）だけ上にズラす */
body.admin-bar .l-header {
  top: var(--wp-admin--admin-bar--height);
}

/* ----------------------------------------------
   1.2 Variable
---------------------------------------------- */
:root {
  /* ---------- [ 1.20 ] tool ---------- */
  --torem: calc(1rem / 16);

  /* ---------- [ 1.21 ] color ---------- */
  --color-key: #b4272d;
  --color-white: #ffffff;
  --color-black: #000000;
  --color-light-gray: #f2f2f2;
  --color-gray: #999999;
  --color-dark-gray: #666666;

  /* ---------- [ 1.22 ] font family ---------- */
  --ff-gothic: "source-han-sans-japanese", sans-serif;
  --ff-eng: "futura-pt", "Futura", sans-serif;

  /* ---------- [ 1.23 ] font size ---------- */
  --fs-5xl: calc(80 * var(--torem));
  --fs-4xl: calc(56 * var(--torem));
  --fs-3xl: calc(44 * var(--torem));
  --fs-2xl: calc(32 * var(--torem));
  --fs-xl: calc(24 * var(--torem));
  --fs-lg: calc(20 * var(--torem));
  --fs-md: calc(18 * var(--torem));
  --fs-sm: calc(16 * var(--torem));
  --fs-xs: calc(14 * var(--torem));

  /* ---------- [ 1.24 ] offset ---------- */
  --offset-default: 5vw;
  /* コンテナ変数 */
  /* コンテンツ幅1440px分のオフセット */
  --offset-sm: max(calc(100vw / 2 - 45rem), var(--offset-default));
  /* コンテンツ幅1200px分のオフセット */
  --offset-md: max(calc(100vw / 2 - 37.5rem), var(--offset-default));
  /* コンテンツ幅1000px分のオフセット */
  --offset-lg: max(calc(100vw / 2 - 31.25rem), var(--offset-default));

  /* ---------- [ 1.25 ] space ---------- */
  --space-4xl: calc(200 * var(--torem));
  --space-3xl: calc(152 * var(--torem));
  --space-2xl: calc(120 * var(--torem));
  --space-xl: calc(104 * var(--torem));
  --space-lg: calc(96 * var(--torem));
  --space-md: calc(80 * var(--torem));
  --space-sm: calc(64 * var(--torem));
  --space-xs: calc(32 * var(--torem));

  /* ---------- [ 1.26 ] animation & transition ---------- */
  --duration-fast: 0.3s;
  --duration-normal: 0.6s;
  --duration-slow: 1.6s;
  --ease-out-sine: cubic-bezier(0.61, 1, 0.88, 1);

  /* ---------- [ 1.27 ] base ---------- */
  --base-line-height-sp: 2;
  --base-line-height: 2.5;
  --base-letter-spacing: 0.06em;
  --base-font-family: var(--ff-gothic);
  --base-font-weight: 400;
  --base-strong-color: var(--color-key);
  --base-color: var(--color-black);
  --base-background: var(--color-white);
  --base-filter: var(--color-key);

  /* ---------- [ 1.27 ] header ---------- */
  --header-logo-height: calc(36 * var(--torem));
  --header-pad: 0.75rem;
  --header-height: calc(var(--header-logo) + var(--header-pad) * 2);
}
@media screen and (max-width: 1200px) {
  :root {
    /* ---------- [ 1.23 ] font size ---------- */
    --fs-5xl: calc(80 * var(--torem));
    --fs-4xl: calc(56 * var(--torem));
    --fs-3xl: calc(44 * var(--torem));
    --fs-2xl: calc(32 * var(--torem));
    --fs-xl: calc(24 * var(--torem));
    --fs-lg: calc(20 * var(--torem));
    --fs-md: calc(18 * var(--torem));
    --fs-sm: calc(16 * var(--torem));
    --fs-xs: calc(14 * var(--torem));

    /* ---------- [ 1.25 ] space ---------- */
    --space-4xl: calc(200 * var(--torem));
    --space-3xl: calc(152 * var(--torem));
    --space-2xl: calc(120 * var(--torem));
    --space-xl: calc(104 * var(--torem));
    --space-lg: calc(96 * var(--torem));
    --space-md: calc(80 * var(--torem));
    --space-sm: calc(64 * var(--torem));
    --space-xs: calc(32 * var(--torem));
  }
}
@media screen and (max-width: 600px) {
  :root {
    /* ---------- [ 1.24 ] offset ---------- */
    --offset-default: 3vw;
  }
}

/* =====================================================
  2.0 - Layout
===================================================== */
/* ----------------------------------------------
   2.1 Header
---------------------------------------------- */
.l-header {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1000;
}
@media screen and (max-width: 768px) {
}
/* ----------------------------------------------
   2.2 Main
---------------------------------------------- */
.l-main {
}

/* ----------------------------------------------
   2.3 Footer
---------------------------------------------- */
.l-footer {
}

/* =====================================================
  3.0 - Component
===================================================== */
/* ----------------------------------------------
   3.1 section
---------------------------------------------- */
/* ---------- [ 3.11 ] util ---------- */
.c-sec {
}
/* ---------- [ 3.21 ] Hero ---------- */
.c-hero {
}
@media screen and (max-width: 768px) {
}
/* ----------------------------------------------
   3.2 title
---------------------------------------------- */
/* ---------- [ 3.21 ] section title ---------- */

/* ---------- [ 3.22 ] heading ---------- */
.c-title {
  margin-bottom: 2.5em;
  font-size: var(--fs-lg);
  text-align: center;
  line-height: 1;
}
.c-title__eng {
  display: block;
  margin-bottom: 0.2em;
  font-size: var(--fs-5xl);
  font-weight: 500;
  color: var(--color-key);
}
.c-title__main {
  font-weight: 500;
  color: var(--color-dark-gray);
}
/* ----------------------------------------------
   3.2 button
---------------------------------------------- */
/* ---------- [ 3.21 ] button ---------- */
.c-button {
  position: relative;
  display: inline-block;
  padding: 1em 3em;
  color: inherit;
  line-height: 1;

  &::before,
  &::after {
    position: absolute;
    top: 0;
    right: -12.5%;
    bottom: 0;
    content: "";
    display: block;
    margin: auto 0;
    background-color: currentColor;
    transition: transform var(--duration-fast);
  }
  &::before {
    width: 25%;
    height: 1px;
  }
  &::after {
    width: 5%;
    height: 1px;
    transform-origin: right center;
    transform: rotate(45deg);
  }
}
.c-button--primary {
  border: 1px solid currentColor;
  background-color: transparent;
}
.c-button--secondary {
  background-color: var(--color-white);
}
.c-button:focus-visible {
  &::before {
    transform: translateX(0.5em);
  }
  &::after {
    transform: translateX(0.5em) rotate(45deg);
  }
}
@media (any-hover) {
  .c-button:hover {
    &::before {
      transform: translateX(0.5em);
    }
    &::after {
      transform: translateX(0.5em) rotate(45deg);
    }
  }
}
/* ----------------------------------------------
   3.3 text
---------------------------------------------- */
/* ---------- [ 3.31 ] text jump ---------- */
.c-text-jump-01::after {
  content: "";
  display: inline-block;
  margin-left: 1em;
  width: 1em;
  height: 0.9em;
  background-image: url("../img/icon/icon_jump_black.png");
  background-size: contain;
  background-repeat: no-repeat;
}
.c-text-jump-02::after {
  content: "";
  display: inline-block;
  margin-left: 0.5em;
  width: 1em;
  height: 0.9em;
  background-image: url("../img/icon/icon_jump_white.png");
  background-size: contain;
  background-repeat: no-repeat;
}

/* ---------- [ 3.32 ] text icon ---------- */
.c-text-check-01::before {
  content: "";
  display: inline-block;
  margin-right: 0.5em;
  width: 1em;
  height: 0.8em;
  background-image: url("../img/icon/icon_site_icon-01.png");
  background-size: contain;
  background-repeat: no-repeat;
}
.c-text-check-02::before {
  content: "";
  display: inline-block;
  margin-right: 0.5em;
  width: 1em;
  height: 0.8em;
  background-image: url("../img/icon/icon_site_icon-02.png");
  background-size: contain;
  background-repeat: no-repeat;
}
.c-text-check-03::before {
  content: "";
  display: inline-block;
  margin-right: 0.5em;
  width: 1em;
  height: 0.8em;
  background-image: url("../img/icon/icon_site_icon-03.png");
  background-size: contain;
  background-repeat: no-repeat;
}

/* ----------------------------------------------
   3.4 parts
---------------------------------------------- */
/* ---------- [ 3.41 ] service ---------- */
.c-service {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.c-service__body {
}
.c-service__title {
  margin-bottom: 1.5em;
  font-size: var(--fs-2xl);
  color: var(--color-key);
  line-height: 1;
}
.c-service__text {
  margin-bottom: 1.5em;
}
.c-service__button {
  font-size: var(--fs-xs);
  color: var(--color-key);
}
.c-service__thumbnail {
  order: -1;

  width: 600px;
  aspect-ratio: 1.6 / 1;
  background-color: #eee;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* =====================================================
  4.0 - Project
===================================================== */
/* ----------------------------------------------
   4.1 Layout
---------------------------------------------- */
/* ---------- [ 4.11 ] Header ---------- */
.p-header {
  background-color: rgb(255 255 255 / 0.9);
}
.p-header__wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--header-pad) var(--offset-md);
  line-height: 1;
}
.p-header__logo {
  height: var(--header-logo-height);

  img {
    height: 100%;
  }
}
@media screen and (max-width: 768px) {
}
/* ---------- [ 4.12 ] Global Nav ---------- */
.p-globalNav {
  color: var(--color-black);
  font-family: var(--ff-gothic);
  font-size: var(--fs-md);
}
.p-globalNav__siteName {
  display: none;
  opacity: 0;
  visibility: hidden;
}
.p-globalNav__list {
  display: flex;
  flex-wrap: wrap;

  li {
    display: block;
    visibility: visible;
    border: none;
  }
  li:first-of-type a {
    padding-inline-start: 0;
  }
  li:last-of-type a {
    padding-inline-end: 0;
  }
  a {
    padding-inline: 1.5em;
    padding-block: 0;
  }
}
.is-drawer-open {
  .p-globalNav__wrapper {
    transform: translateX(0);
  }
}
@media screen and (max-width: 768px) {
  .p-globalNav__wrapper {
    position: fixed;
    top: 0;
    left: 110%;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    background-color: var(--color-white);
    transition: transform 0.4s ease-in-out;
    transform: translateX(0);
    z-index: 10;
  }
  .p-globalNav__siteName {
    display: initial;
    opacity: 1;
    visibility: visible;
  }
  .p-globalNav__list {
    flex-direction: column;
  }
  .is-drawer-open {
    .p-globalNav__wrapper {
      transform: translateX(-110%);
    }
  }
}

/* ---------- [ 4.13 ] Hamburger ---------- */
.p-hamburger {
  position: relative;
  display: none;
  width: calc(30 * var(--torem));
  height: calc(30 * var(--torem));
  background-color: var(--color-key);
  border-radius: 50%;
  border: none;
  z-index: 20;
}
.p-hamburger__line {
  position: relative;
  display: block;
  width: 50%;
  height: calc(2 / 16 * 1rem);
  margin-inline: auto;
  background: linear-gradient(90deg, transparent 20%, var(--color-white) 20%);
  transition: background-color 0.2s;

  &::before,
  &::after {
    position: absolute;
    inset-inline: 0;
    content: "";
    width: 100%;
    height: 100%;
    background-color: var(--color-white);
    transition: rotate 0.2s, inset 0.2s 0.2s;
  }
  &::before {
    inset-block-start: calc(5 / 16 * 1rem * -1);
  }
  &::after {
    inset-block-start: calc(5 / 16 * 1rem);
  }
}
.is-drawer-open .p-hamburger__line {
  background: transparent;

  &::before,
  &::after {
    inset-block-start: 0;
    transition: inset 0.2s, rotate 0.2s 0.2s;
  }
  &::before {
    rotate: 45deg;
  }
  &::after {
    rotate: -45deg;
  }
}
@media screen and (max-width: 768px) {
  .p-hamburger {
    display: initial;
  }
}
/* ---------- [ 4.14 ] Footer ---------- */
.p-footer {
}

/* ----------------------------------------------
   4.2 Section Parts
---------------------------------------------- */
/* ---------- [ 4.21 ] recruit ---------- */

/* ---------- [ 4.22 ] blog sns ---------- */

/* ----------------------------------------------
   4.3 Top Page
---------------------------------------------- */
/* ---------- [ 4.31 ] mv ---------- */
.p-mv {
  position: relative;
  display: grid;
  place-items: center;
  height: 50vw;
}
.p-mv__bg {
  position: absolute;
  inset: 0;
  background-color: #eee;
  z-index: -1;
}
.p-mv__textWrapper {
  font-size: var(--fs-5xl);
  color: var(--color-key);
  text-align: center;
  line-height: 1;
}
.p-mv__copy {
  margin-bottom: calc(60 / 80 * 1em);
}
.p-mv__text {
}
@media screen and (max-width: 768px) {
}

/* ---------- [ 4.32 ] News ---------- */
.p-top-news {
  --circle-r: 12.5vw;
  --circle-thin: 2.6vw;

  position: relative;

  &::before {
    position: absolute;
    left: var(--offset-default);
    bottom: calc(var(--circle-r) * -1);
    content: "";
    display: block;
    width: calc(var(--circle-r) * 2);
    aspect-ratio: 1 / 1;
    border: var(--circle-thin) solid var(--color-key);
    border-radius: 50%;
  }
}
.p-top-news__wrapper {
  display: flex;
  justify-content: space-between;
  align-items: start;
  padding: var(--space-2xl) var(--offset-lg) var(--space-3xl);
}
.p-top-news__title {
}
.p-top-news__contents {
  width: calc(600 * var(--torem));
}
.p-top-news__list {
  margin-bottom: 3em;
  font-size: var(--fs-sm);
}
.p-top-news__item {
  padding: 0 0.5em;
  border-bottom: 1px solid var(--color-gray);

  a {
    display: block;
    padding: 1em 0;
  }
}
.p-top-news__sns {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 0.5em 0;
  border: 1px solid var(--color-key);
  font-size: var(--fs-md);
}

/* ---------- [ 4.33 ] service ---------- */
.p-top-service {
  position: relative;
  z-index: 1;
}
.p-top-service__wrapper {
  padding: 0 0 var(--space-3xl);
}
.p-top-service__title {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  transform: translateY(-43%);
}
.p-top-service__contents {
  margin-right: var(--offset-md);
  padding-top: var(--space-3xl);
  padding-left: var(--offset-sm);
  padding-right: 5rem;
  padding-bottom: var(--space-2xl);
  background-color: var(--color-light-gray);
}
.p-top-service__item {
}
.p-top-service__roll {
  position: relative;
}
/* ---------- [ 4.34 ] about ---------- */
.p-top-about {
}
.p-top-about__wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: var(--space-xl) var(--offset-sm) var(--space-xl) var(--offset-lg);
  background-color: var(--color-key);
  color: var(--color-white);
}
.p-top-about__title {
  text-align: left;

  * {
    color: var(--color-white);
  }
}
.p-top-about__text {
  margin-bottom: 3em;
}
.p-top-about__button {
  font-size: var(--fs-xs);
  color: var(--color-black);
}
.p-top-about__thumbnails {
  display: grid;
}
.p-top-about__thumbnail {
  grid-row: 1 / 2;
  grid-column: 1 / 2;
}
.p-top-about__thumbnail--01 {
  position: relative;
  left: 13%;
  align-self: end;
  width: 35%;
  aspect-ratio: 1 / 0.835;
  z-index: 2;
}
.p-top-about__thumbnail--02 {
  position: relative;
  left: 42%;
  align-self: center;
  width: 40%;
  aspect-ratio: 1 / 0.835;
  z-index: 1;
}
.p-top-about__thumbnail--03 {
  align-self: start;
  width: 100%;
  aspect-ratio: 1.54 / 1;
  z-index: 0;
  transform: translateY(-40%);
}

/* ---------- [ 4.35 ] recruit ---------- */
.p-top-recruit__cta {
  font-size: var(--fs-md);
  color: var(--color-key);
}

/* =====================================================
  5.0 - Utilities
===================================================== */
/* ----------------------------------------------
   5.1 text utilities
---------------------------------------------- */
.u-screen-reader-text {
  position: absolute;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  width: 1px;
  height: 1px;
}
/* ----------------------------------------------
   5.2 visibility utilities
---------------------------------------------- */
.u-pc {
  display: initial;
}
.u-sp {
  display: none;
}
@media screen and (max-width: 768px) {
  .u-pc {
    display: none;
  }
  .u-sp {
    display: initial;
  }
}
/* ----------------------------------------------
   5.3 state
---------------------------------------------- */
/* ----- [ 5.31 ] font ----- */
.is-mincho {
  font-family: var(--ff-mincho);
  font-style: normal;
}
.is-gothic {
  font-family: var(--ff-gothic);
  font-style: normal;
}
.is-eng {
  font-family: var(--ff-eng);
  font-style: normal;
}

/* ----- [ 5.32 ] text ----- */
.is-uppercase {
  text-transform: uppercase;
}
.is-medium {
  font-weight: 500;
}
.is-bold {
  font-weight: 700;
}

/* =====================================================
  6.0 - tools
===================================================== */
/* ----------------------------------------------
   6.1 Swiper
---------------------------------------------- */
.js-staff-swiper {
  width: calc(100vw - var(--offset-lg));
  overflow: hidden;
}

.swiper-wrapper {
  z-index: 1;
}
.js-staff-swiper .swiper-slide {
  width: 250px;
}

@media (min-width: 769px) {
  .js-staff-swiper .swiper-slide {
    width: 350px;
  }
}