@charset "UTF-8";

/* **************************************************

Name: members.css

Description: members page

Create: 2026.02.25
Update: 

Copyright 2026 Hitachi, Ltd.

***************************************************** */

#Contents button:focus-visible {
  outline: auto;
}


/*====================*/
/* reuse */
/*====================*/

.wbr {
  word-break: keep-all;
}

/* 見出し */
.heading-m {
  font-kerning: auto;
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 2.5rem;
  border-bottom: 1px solid var(--color-supportive-grey-2);
  padding-bottom: 1rem;
  margin: 80px 0 24px !important;
  color: var(--color-black)
}

@media(max-width: 994px) {
  .heading-m {
    font-size: 1.75rem;
    line-height: 2.1875rem;
  }
}

.heading-s {
  font-size: 1.75rem;
  letter-spacing: 0;
  line-height: 2.1875rem;
  font-weight: 600;
  color: var(--color-black);
  margin: 32px 0 16px;
}

@media(max-width: 994px) {
  .heading-s {
    font-size: 1.625rem;
    line-height: 2.0625rem;
  }
}

/* 注釈 */
.paragraph-small-regular{
  font-kerning: auto;
  font-size: .875rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.3125rem;
}


/*====================*/
/* メンバー一覧(一覧ページと紹介ページで共有) */
/*====================*/
.members-list-post {
  font-size: .875rem !important;
  font-weight: 500;
  line-height: 1.3125rem !important;
  margin: 0;
  color: var(--color-black);
}

.members-list-name {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.875rem;
  margin: 0 !important;
  padding: 0;
  background: none;
  color: var(--color-black);
}

a:hover .members-list-name {
  color: inherit;
}

.members-list-labels {
  margin: 1rem 0 0 0;
  font-size: 0.875rem;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.members-list-labels > li {
  border: .0625rem solid var(--color-supportive-grey-2);
  color: var(--color-black);
  border-radius: .25rem;
  padding: .125rem .75rem;
  width: fit-content;
  max-width: 100%;
  line-height: 1.3125rem;
}

/*====================*/
/* slick */
/*====================*/
.slick-control {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 1.5rem 0 0;
}

.slick-prev-btn,
.slick-next-btn {
    background-color: var(--color-supportive-grey-1);
    border-radius: .25rem;
    height: 2rem;
    margin: 0 1rem;
    width: 2rem;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 75% auto;
    transition: 0s;
}

.slick-prev-btn:not(.off):hover,
.slick-next-btn:not(.off):hover {
  background-color: var(--primary-color);
}

.slick-prev-btn {
  background-image: url(/products/it/lumada/digital_engineering/design/members/common/images/icon_arrow_left_black.png);
}

.slick-next-btn {
  background-image: url(/products/it/lumada/digital_engineering/design/members/common/images/icon_arrow_right_black.png);
}

.slick-prev-btn:not(.off):hover {
  background-image: url(/products/it/lumada/digital_engineering/design/members/common/images/icon_arrow_left_white.png);
}

.slick-next-btn:not(.off):hover {
  background-image: url(/products/it/lumada/digital_engineering/design/members/common/images/icon_arrow_right_white.png);
}

.slick-prev-btn.off {
  background-image: url(/products/it/lumada/digital_engineering/design/members/common/images/icon_arrow_left_gray.png);
}

.slick-next-btn.off {
  background-image: url(/products/it/lumada/digital_engineering/design/members/common/images/icon_arrow_right_gray.png);
}


.slick-num {
  display: inline-block;
  width: fit-content;
}

/* メンバー一覧（slick内） */
#members-list-common-slider {
  width: calc(100% + 0.78125rem * 2);
  margin-left: -0.78125rem;
}

#members-list-common-slider a {
  margin: 0 0.78125rem;
  display: block;
  color: var(--color-black);
  text-decoration: none;
  transition: all .3s ease-in-out;
}

#members-list-common-slider a:hover {
  color: var(--primary-color);
}

#members-list-common-slider-control {
  margin-bottom: 1.5rem;
}

@media(max-width: 994px) {
  #members-list-common-slider {
    width: 86vw;
  }

  #members-list-common-slider .slick-list {
    overflow: visible;
  }

}



/*====================*/
/* メンバー一覧ページ */
/*====================*/
#members-wrap #branding {
  margin-bottom: 5rem;
}

#members-wrap #branding::before {
  background-image: url(/products/it/lumada/digital_engineering/design/members/images/branding.jpg);
}


@media(max-width: 994px) {
  #members-wrap #branding::before {
    background-position: left 30% center;
  }
}


/*====================*/
/* メンバー紹介ページ */
/*====================*/
#Contents:has(#members-profile-wrap ) {
  overflow: hidden;
}

#members-profile-wrap #contents-header {
  position: relative;
  z-index: 0;
}

#members-profile-wrap #contents-header::after {
  content: "";
  position: absolute;
  width: 100vw;
  height: 100%;
  background: var(--color-supportive-grey-1);
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  z-index: -1;
}

#members-profile-wrap #contents-header-photo {
  width: 100%;
}

#members-profile-wrap #contents-header-txt-wrap {
  padding: 4rem 0;
}

#members-profile-wrap #contents-header-comment {
  font-size: 2.5rem;
  font-weight: 600;
  color: var(--color-supportive-grey-4);
  letter-spacing: 0;
  line-height: 3.125rem;
  margin-bottom: 1rem;
}

#members-profile-wrap #contents-header-post {
  font-size: 1rem;
}

#members-profile-wrap #contents-header-name {
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 2.5rem;
  margin: 0 0 24px;
}

#members-profile-wrap #contents-header-field {
  font-size: 0.875rem;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 1.5rem 0 0;
}

#members-profile-wrap #contents-header-field > li {
  border: .0625rem solid var(--color-supportive-grey-2);
  color: var(--color-black);
  border-radius: .25rem;
  padding: .125rem .75rem;
  width: fit-content;
  max-width: 100%;
}

@media(max-width: 994px) {
  #members-profile-wrap #contents-header-img-wrap {
    width: calc(100% + 30px);
    margin-left: -15px;
    margin-right: -15px;
  }

  #members-profile-wrap #contents-header-txt-wrap {
    padding: 2.5rem 0;
  }
}

@media(max-width: 767px) {
  #members-profile-wrap #contents-header-comment {
    font-size: 2.5rem;
    line-height: 3.5rem;
  }
}