@charset "UTF-8";
/************************************
** コーポレート周りCSS
** Page Class: page-id-65
************************************/

/************************************
** LP Contents
************************************/
body {
  color: var(--color-grayscale-005);
}
/* pages.cssの.page .content（margin-bottom: 0）に対する共通ページの上書き（contact/thanks・cookieページを含む） */
.page .content {
  margin-bottom: 80px !important;
}
.bodyCompany .content__heading--main {
  color: var(--color-LinkusSecondary-030);
  font-weight: 700;
  padding-bottom: 0;
}
.bodyCompany .content {
  margin-bottom: 0 !important;
}
.bodyCompany .main {
  padding-bottom: 0;
}
.bodyCompany .footer-widgets {
  display: none;
}
.overview__label {
  border-right: 1px solid var(--color-grayscale-005);
}
.overview__companyList {
  color: var(--color-grayscale-020);
  font-size: var(--font-size-caption);
}
.overview__textLink {
  color: var(--color-grayscale-005);
  text-decoration: underline !important;
}
.overview__textLink:hover {
  color: var(--color-LinkusSecondary-060);
}

@media screen and (max-width: 767px) {
  .overview__label {
    border-bottom: 1px solid var(--color-grayscale-005);
    border-right: none;
  }
}

/************************************
** 導入事例カルーセル（メディアのピックアップ記事コンポーネントを流用）
************************************/
/* media.cssのbodyフォント指定（Noto Sans JP !important）を打ち消し、会社概要ページのフォントをCocoon本体に戻す */
body.bodyCompany {
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif !important;
}
.bodyCompany .categoryBox__pickup {
  background-color: transparent;
  max-width: 1200px;
  padding: 0 32px;
}

/* media.css側の834px以下 !important 上書き（padding: 32px 0）に対し、上下paddingのみ0に戻す */
@media screen and (max-width: 834px) {
  .bodyCompany .categoryBox__pickup {
    padding-bottom: 0 !important;
    padding-top: 0 !important;
  }
}
.bodyCompany .categoryBox__pickupHeading {
  display: none;
}
.bodyCompany .categoryBox__pickup .categoryBox__pickupList .swiper-button-prev {
  left: -32px !important;
}
.bodyCompany .categoryBox__pickup .categoryBox__pickupList .swiper-button-next {
  right: -32px !important;
}
.bodyCompany .articleCard.--top {
  background-color: var(--color-LinkusSecondary-090);
}

/* 640px以下は calc(100vw - 80px) だと余白と相殺されちら見えが消えるため、641〜834pxと同じ300px固定にする */
@media screen and (max-width: 640px) {
  .bodyCompany .categoryBox__pickup .swiper-slide {
    width: 300px;
  }
}

/************************************
** お問い合わせCTAボタン
************************************/
/* Linkus TOPの .button--primary / .buttonContact を流用し、幅のみ会社概要ページ用に調整する */
.bodyCompany .buttonContact {
  width: 100%;
}

@media screen and (min-width: 835px) {
  .bodyCompany .buttonContact {
    width: fit-content;
  }
}

/************************************
** お問い合わせCTA
************************************/
/* linkus.cssの.kvと同じ背景画像。HTML側にインラインCSSを書かないためここで指定する */
.bodyCompany .contactCta {
  background-image: url(../img/linkus/kv_bg-scaled.png);
}

/* page-linkus.phpの .content__heading--sub を流用し、色・SP時のフォントサイズのみ調整する */
.bodyCompany .contactCta .content__heading--sub {
  color: var(--color-LinkusSecondary-030);
  font-weight: 700;
}

@media screen and (max-width: 640px) {
  .bodyCompany .contactCta .content__heading--sub {
    font-size: var(--font-size-emphasize);
  }
}

/* linkus.cssの.ctaContact__box:hoverと同じホバー効果を適用する */
.bodyCompany .contactCta .contactCard:hover {
  background-image: linear-gradient(to right, var(--color-grayscale-100), var(--color-LinkusAccent-080));
  background-position: 0 0;
  color: var(--color-LinkusSecondary-030);
}