@charset "UTF-8";

:root {
  --orange: #e77a1f;
  --lorange: #f8f5f2;
  --other02: #d8351c;
  --lother02: #d8351c1a;
  --purple: #7439ea;
  --lpurple: #e5dafe;
  --yellow: #f6be1f;
  --lyellow: #f6be1f1a;
  --green: #74d76c;
  --lgreen: #74d76c1a;
  --lightblue: #97efff;
  --llightblue: #97efff1a;
}

/* ==================================
リセット・調整・ファンデーション
===================================== */
/*---------- BMパーツの調整 ----------*/
/* 疑似要素の削除 */
.no-before::before,
.no-after::after {
  content: unset !important;
}

/* CNT_06 */
.lib-cnt-protrude__outer > * > [class*="__txtarea"].bg-orange::before {
  background-color: var(--orange);
}
.lib-cnt-protrude__outer > * > [class*="__txtarea"].bg-lorange::before {
  background-color: var(--lorange);
}

/* COL_01_02 */
.lib-col-01-02 .lib-card__txtarea.bg-lmain {
  background-color: var(--LMAIN);
}
.lib-col-01-02 .lib-card__txtarea.bg-laccent {
  background-color: var(--LACC);
}

/* ico-after-arrD */
:where(.ico-after-arrD):has(.txt) .txt::after {
  border: 1px solid currentColor;
  padding: 0.5em;
  border-radius: 50%;
}
:where(.lib-link__btn)[class*="justify-content-"].ico-after-arrD > .txt::after {
  margin-top: -1em;
}

/*---------- BMパーツのパターン増設 ----------*/
/* ①②③...のリストマーカー */
:where(.lib-indent__list).--circle > li:before {
  content: counter(ol-bullet);
  text-align: center;
  border: 1px solid var(--DEF);
  border-radius: 50%;
  font-size: 0.75em;
  line-height: 1;
  width: 1.5em;
  height: 1.5em;
  aspect-ratio: 1/1;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 0.4%;
  /* margin-top: 2px; */
}

/* ※のリストマーカー */
:where(.lib-indent__list).--asterisk > li {
  padding-left: 1.8em;
  position: relative;
}
:where(.lib-indent__list).--asterisk > li::before {
  /* counter-increment: ol-bullet; */
  content: "※";
  display: block;
  width: 2em;
  text-align: center;
  text-align: right;
  position: absolute;
  left: 0;
  top: 0;
  padding-right: 0.5em;
}

/* table 罫線パターン */
:where(table).--border > thead,
:where(table).--border th {
  background-color: unset;
}
:where(table).--border th,
:where(table).--border td {
  border: unset;
  border: 1px solid var(--GRY);
}
:where(table).--border th {
  color: var(--DEF);
}
:where(table).--border tbody > tr > th:first-child {
  border-left-color: var(--GRY);
}

/* table 下線パターン */
:where(table).--border-bottom {
  border: unset;
}
:where(table).--border-bottom th,
:where(table).--border-bottom > thead {
  background-color: unset;
}
:where(table).--border-bottom th,
:where(table).--border-bottom td {
  border: unset;
  border-bottom: 1px solid var(--GRY);
}
:where(table).--border-bottom th {
  color: var(--DEF);
}
:where(table).--even.--border-bottom tbody > tr:nth-child(even) > th {
  background-color: var(--LGRY);
}

/* table 見出し"列"だけグレー */
:where(table.--gry) tbody > tr > th {
  background-color: var(--GRY);
  color: var(--DEF);
}
:where(table.--gry) tbody > tr > th:first-child {
  border-left-color: var(--GRY);
}

/* table .lib-table__03に少し余白を入れる */
:where(.lib-table__03).--padding td,
:where(.lib-table__03).--padding th {
  padding: 0.5em;
}

/* ========================================
カラー
======================================== */
/* ボタン（TOPのボタンをアレンジ） */
.lib-card__btn {
  .btn-circle {
    &.btn-circle-orange {
      /* background-color: var(--orange); */
      background-color: var(--ACC);
      color: var(--WHT);
    }
    &.btn-circle-accent {
      background-color: var(--ACC);
      color: var(--WHT);
    }
    &.btn-circle-other {
      background-color: var(--OTH);
      color: var(--WHT);
    }
  }
}

/* テキスト・背景色 */
.text-orange {
  color: var(--orange);
}
.text-lorange {
  color: var(--lorange);
}
.bg-orange {
  background-color: var(--orange);
}
.bg-lorange {
  background-color: var(--lorange);
}
.border-orange {
  border-color: var(--orange);
}
.border-lorange {
  border-color: var(--lorange);
}

.text-purple {
  color: var(--purple);
}
.text-lpurple {
  color: var(--lpurple);
}
.bg-purple {
  background-color: var(--purple);
}
.bg-lpurple {
  background-color: var(--lpurple);
}
.border-purple {
  border-color: var(--purple);
}
.border-lpurple {
  border-color: var(--lpurple);
}

.text-yellow {
  color: var(--yellow);
}
.text-lyellow {
  color: var(--lyellow);
}
.bg-yellow {
  background-color: var(--yellow);
}
.bg-lyellow {
  background-color: var(--lyellow);
}
.border-yellow {
  border-color: var(--yellow);
}
.border-lyellow {
  border-color: var(--lyellow);
}

.text-green {
  color: var(--green);
}
.text-lgreen {
  color: var(--lgreen);
}
.bg-green {
  background-color: var(--green);
}
.bg-lgreen {
  background-color: var(--lgreen);
}
.border-green {
  border-color: var(--green);
}
.border-lgreen {
  border-color: var(--lgreen);
}

.text-lightblue {
  color: var(--lightblue);
}
.text-llightblue {
  color: var(--llightblue);
}
.bg-lightblue {
  background-color: var(--lightblue);
}
.bg-llightblue {
  background-color: var(--llightblue);
}
.border-lightblue {
  border-color: var(--lightblue);
}
.border-llightblue {
  border-color: var(--llightblue);
}

/* タイトル */
.lib-title__outer :where(.title).before-orange:before {
  background-color: var(--orange) !important;
}

/* 蛍光マーカー風 */
.c-marker {
  background: linear-gradient(transparent 60%, #ffc164 60%);
}

/* table見出しを朱色に */
:where(table.--th-other02) th,
:where(table.--th-other02) > thead {
  background-color: var(--other02);
}
:where(table.--th-other02) > thead th:first-child {
  border-left-color: var(--other02);
}
:where(table.--th-other02) > thead th {
  border-top-color: var(--other02);
}
:where(table.--th-other02) > thead th:last-child {
  border-right-color: var(--other02);
}
:where(table.--th-other02) tbody > tr > th:first-child {
  border-left-color: var(--other02);
}

/* ========================================
下層
======================================== */
/*---------- 下層MV ----------*/
.lib-hero__outer {
  background-color: unset;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-image: url("/dcms_media/image/under-mv.png");
}
/* @media print, screen and (min-width: 1400px) {
  .lib-hero__outer {
    min-height: 440px;
  }
} */
.lib-hero__title {
  font-size: clamp(1.25rem, calc(1.021341463414634rem + 0.975609756097561vw), 1.875rem);
}
.lib-hero__title-en {
  text-transform: uppercase;
  line-height: 1;
  font-weight: 700;
  font-size: clamp(2rem, calc(0.1707317073170731rem + 7.804878048780488vw), 7rem);
  color: var(--MAIN);
  margin-bottom: 0.125em;
}

/* パターン2 */
.lib-hero__outer.--pt-02 {
  background-image: url(/dcms_media/image/under-mv-pt-02.png);
  background-position-x: right;
}

/* パターン3 */
.lib-hero__outer.--pt-03 {
  background-image: unset;
  background-color: var(--MAIN);
  color: var(--WHT);
}
.lib-hero__outer.--pt-03 .lib-hero__title-en {
  color: var(--WHT);
}

/*---------- 福利厚生 ----------*/
.lib-cnt-protrude__outer .u-round::before {
  border-top-right-radius: 0.75em;
  border-bottom-right-radius: 0.75em;
}

/*---------- 仕事を知る ----------*/
/* 私たちの仕事 */
.rounded-pt-1 {
  border-top-right-radius: 1.25em;
  border-bottom-left-radius: 1.25em;
}

/* 画像ズレた背景色 */
.p-bg.--u-margin::before {
  top: 1.5em;
  left: 1.5em;
  right: -1.5em;
  bottom: -1.5em;
  width: auto;
  height: auto;
}

/*---------- 早わかりラウンドワン ----------*/
body:has(.u-numbers-bg) {
  background-color: var(--LGRY);

  .lib-hero__outer {
    background-color: var(--WHT);
  }
}

.fs-sougyou,
.fs-kokunaitenpo,
.fs-kaigaitenpo {
  font-size: clamp(5.375rem, calc(3.4085365853658534rem + 8.390243902439025vw), 10.75rem);
}
.fs-jugyouin {
  /* font-size: clamp(3rem, calc(2.3140243902439024rem + 2.9268292682926833vw), 4.875rem); */
  /* font-size: 4.875rem; */
  font-size: clamp(4.25rem, calc(4.021341463414634rem + 0.975609756097561vw), 4.875rem);
}
.fs-raijousya,
.fs-souuriage {
  font-size: clamp(5rem, calc(3.3536585365853657rem + 7.02439024390244vw), 9.5rem);
  &.--tani {
    font-size: clamp(2rem, calc(0.9024390243902438rem + 4.682926829268292vw), 5rem);
  }
}
.fs-syoninnkyu {
  font-size: 5.5rem;
  &.--syousuten {
    font-size: 2.75rem;
  }
}
.fs-zangyojikan {
  font-size: clamp(4rem, calc(2.902439024390244rem + 4.682926829268292vw), 7rem);
}
.fs-zangyotani {
  font-size: clamp(7rem, calc(4.804878048780488rem + 9.365853658536585vw), 13rem);
  &.--min {
    font-size: clamp(3rem, calc(2.451219512195122rem + 2.341463414634146vw), 4.5rem);
  }
}
.fs-yukyu {
  font-size: clamp(5.5rem, calc(4.402439024390244rem + 4.682926829268292vw), 8.5rem);
  &.--syousuten {
    font-size: clamp(2.75rem, calc(2.3841463414634148rem + 1.5609756097560976vw), 3.75rem);
  }
  &.--tani {
    font-size: clamp(3rem, calc(2.6341463414634148rem + 1.5609756097560976vw), 4rem);
  }
}
.fs-risyoku {
  font-size: clamp(5.75rem, calc(3.9207317073170733rem + 7.804878048780488vw), 10.75rem);
  &.--syousuten {
    font-size: clamp(3rem, calc(2.0396341463414633rem + 4.097560975609756vw), 5.625rem);
  }
  &.--tani {
    font-size: clamp(3rem, calc(2.6341463414634148rem + 1.5609756097560976vw), 4rem);
  }
}
.fs-ikukyu {
  font-size: clamp(1.875rem, calc(1.2804878048780486rem + 2.5365853658536586vw), 3.5rem);
  &.--year {
    font-size: clamp(5.5rem, calc(3.8536585365853657rem + 7.02439024390244vw), 10rem);
  }
  &.--month {
    font-size: clamp(4.5rem, calc(3.5396341463414633rem + 4.097560975609756vw), 7.125rem);
  }
}
.fs-ikukyu-ritsu {
  font-size: clamp(4rem, calc(2.9939024390243905rem + 4.2926829268292686vw), 6.75rem);
}

/* ========================================
調整
======================================== */
/* @media print, screen and (min-width: 992px) {
  .lib-utility__item:has([href="/people.html"]) .lib-utility__item__child {
    display: grid !important;
    grid-template-columns: repeat(3, auto);
  }
} */
@media print, screen and (min-width: 992px) {
  .lib-timeline-002__headline.flex-column.justify-content-center::before {
    top: 50%;
    transform: translateY(-50%);
  }
}
