/* ========================================
   Team Page – team.css
   Base: PC大（1440px以上）
   BP: PC小 max-width:1439px / TAB max-width:1023px / SP max-width:599px
   ======================================== */

/* ========================================
   ページ全体
   ======================================== */

/* stickyを機能させるため、html/bodyのoverflowをリセット */
html:has(.team-page),
body:has(.team-page) {
  overflow: visible !important;
  overflow-x: visible !important;
}

/* 代わりに横スクロールの原因となる要素自体を制御（ページ全体のoverflowは解除） */

.team-page {
  background-color: var(--color-bg-dark);
  /* #26312f */
  width: 100%;
  position: relative;
}

/* ページ全体のコンテナ（main等）の制限を強制解除 */
:where(.team-page).wp-block-group,
main:has(.team-page),
.is-layout-constrained:has(.team-page),
.is-layout-flow:has(.team-page),
.wp-block-group:has(.team-page) {
  overflow: visible !important;
  display: block;
  transform: none !important;
  /* 追従を阻害する transform を解除 */
  contain: none !important;
  /* contain プロパティも解除 */
  filter: none !important;
}

/* WP Block Editor デフォルトリセット */
.team-page h1,
.team-page h2,
.team-page h3 {
  margin-block-start: 0;
  margin-block-end: 0;
}

/* ========================================
   TOP Section
   ======================================== */

.team-top {
  width: 100%;
}

/* 1440px内に収め、右に200px余白 */
.team-top__wrapper {
  max-width: 1440px;
  margin: 0 auto;
  padding: 200px 0 0;
  display: flex;
  align-items: flex-start;
}

/* 左側装飾バー（地図色の縦帯） */
.team-top__left {
  width: 64px;
  min-width: 64px;
  height: 618px;
  background-color: #3e4b48;
  flex-shrink: 0;
  margin-top: 213px;
  overflow: hidden;
  position: relative;
  background-image: url(https://wildcycle.jp/wp-content/themes/twentytwentyfive-child/asset/img/team/mapback.jpg);
}

.profile-card__intro-group {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.team-top__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 120px;
  margin: 0 auto;
  max-width: 1140px;
}

/* ========================================
   TEAM イントロ（見出し + メンバーサムネイル）
   ======================================== */

.team-intro {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.team-intro__header {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.team-intro__title {
  font-family: var(--font-english-serif);
  font-size: 48px;
  font-weight: 700;
  line-height: 50px;
  letter-spacing: 2px;
  color: var(--color-bg-white);
  margin: 0;
}

.team-intro__subtitle {
  display: inline-block;
  padding: 0 8px;
  font-family: var(--font-japanese-serif);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1px;
  line-height: normal;
  color: var(--color-bg-white);
}

/* メンバーサムネイルグリッド */
.team-members-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 40px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.team-member-card {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: calc((100% - 80px) / 3);
}

.team-member-card__image {
  width: 100%;
  height: auto;
  aspect-ratio: 320 / 305;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
}

.team-member-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.team-member-card__info {
  display: flex;
  flex-direction: column;
  gap: 0;
  color: var(--color-bg-white);
}

.team-member-card__role {
  font-family: var(--font-japanese-serif);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1px;
  line-height: normal;
  margin: 0;
}

.team-member-card__name-group {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  margin-top: 16px;
  flex-wrap: wrap;
}

.team-member-card__name-ja {
  font-family: var(--font-japanese-serif);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 2px;
  line-height: normal;
}

.team-member-card__name-en {
  font-family: var(--font-english-sans);
  font-size: 16px;
  font-weight: 300;
  line-height: 24px;
  margin-top: 2px;
}

/* ========================================
   MISSION
   ======================================== */

.team-mission {
  display: flex;
  align-items: center;
  gap: 120px;
  padding-bottom: 120px;
  margin: 0 auto;
}

.team-mission__label {
  font-family: var(--font-english-sans);
  font-size: 40px;
  font-weight: 300;
  line-height: normal;
  color: var(--color-bg-white);
  margin: 0;
  white-space: nowrap;
}

.team-mission__divider {
  width: 1px;
  height: 32px;
  background-color: var(--color-bg-white);
  flex-shrink: 0;
}

.team-mission__subtitle {
  font-family: var(--font-japanese-serif);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 2px;
  line-height: 40px;
  color: var(--color-bg-white);
  margin: 0;
  white-space: nowrap;
}

/* ========================================
   プロフィールセクション
   （背景は .team-page の #26312f を継承）
   ======================================== */
.team-profiles {
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 120px;
  margin-top: 0;
  align-items: center;
  overflow: visible !important;
}

/* プロフィールカード（画像sticky + テキスト） */
.profile-card {
  display: flex;
  gap: 120px;
  align-items: flex-start;
  width: 1040px;
  max-width: 100%;
  position: relative;
  min-height: 800px;
  /* 画像(555px)より確実に高い最小値を設定 */
}

/* 左側：sticky プロフィール画像 */
.profile-card__image {
  width: 420px;
  min-width: 420px;
  height: 555px;
  flex-shrink: 0;
  position: sticky !important;
  top: 140px !important;
  /* 少し下げて確実に視認 */
  z-index: 10;
  overflow: hidden;

}

.profile-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

/* 右側：コンテンツ全体 */
.profile-card__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
  /* 内部で個別に調整 */
  min-width: 0;
}

/* 肩書き・氏名・略歴のグループ */
.profile-card__intro-group {
  display: flex;
  flex-direction: column;
  gap: 40px;
  margin-bottom: 40px;
}

/* メッセージ・サブ画像等の詳細グループ */
.profile-card__message {
  display: flex;
  flex-direction: column;
  margin-bottom: 40px;
}

/* 役職・氏名ヘッダー */
.profile-card__header {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.profile-card__role {
  font-family: var(--font-japanese-serif);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 16px;
  color: var(--color-bg-white);
  margin: 0;
}

.profile-card__role+.profile-card__role {
  margin-top: 16px;
}

.profile-card__name-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 8px;
}

.profile-card__name-ja {
  font-family: var(--font-japanese-serif);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 2px;
  line-height: normal;
  color: var(--color-bg-white);
  margin: 0;
}

.profile-card__name-en {
  font-family: var(--font-english-sans);
  font-size: 24px;
  font-weight: 300;
  line-height: 22px;
  color: var(--color-bg-white);
}

/* 経歴ボックス（#3e4b48 背景でコントラスト） */
.profile-card__bio {
  background-color: #3e4b48;
  padding: 24px;
}

.profile-card__bio p {
  font-family: var(--font-japanese-sans);
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-bg-white);
  margin: 0 0 10px;
}

.profile-card__bio p:last-child {
  margin-bottom: 0;
}

/* メッセージテキスト */
.profile-card__message {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.profile-card__message p {
  font-family: var(--font-japanese-sans);
  font-size: 15px;
  line-height: 2;
  color: var(--color-bg-white);
  margin: 0;
}

/* プロフィール内 全幅画像 */
.profile-card__image-full {
  width: 100%;
  height: 420px;
  overflow: hidden;
  margin: 0;
  margin-bottom: 40px;

}

.profile-card__image-full img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ========================================
   Bottomセクション（ベージュ背景）
   ======================================== */

.team-bottom {
  padding: 120px 0 0;
  background: #EAE7E1;
  margin-top: 120px;
}

.team-bottom__wrapper {
  display: flex;
  gap: 120px;
  align-items: center;
  width: 1040px;
  max-width: calc(100% - 400px);
  /* 左右 200px ずつ確保 */
  margin: 0 auto;
}

/* お問い合わせブロック */
.team-bottom__contact {
  flex-shrink: 0;
  width: 467px;
  text-decoration: none;
  display: block;
}

.team-bottom__contact-image {
  position: relative;
  width: 100%;
  height: 228px;
  overflow: hidden;
  background-color: #3e4b48;
}

.team-bottom__contact-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}


.team-bottom__contact-overlay {
  position: absolute;
  left: 80px;
  bottom: 80px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 2;
}

.team-bottom__contact-label {
  font-family: var(--font-japanese-sans);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 1.28px;
  line-height: 20px;
  color: var(--color-bg-white);
  margin: 0;
}

.team-bottom__contact-title {
  font-family: var(--font-english-sans);
  font-size: 40px;
  font-weight: 300;
  letter-spacing: 2px;
  line-height: 40px;
  color: var(--color-bg-white);
  display: flex;
  align-items: center;
  gap: 10px;
}

.team-bottom__contact-title::after {
  content: '';
  display: inline-block;
  width: 8px;
  height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='14' viewBox='0 0 8 14' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7.37629 5.93771C7.56376 6.12524 7.66907 6.37955 7.66907 6.64471C7.66907 6.90988 7.56376 7.16418 7.37629 7.35171L1.71929 13.0087C1.62704 13.1042 1.5167 13.1804 1.39469 13.2328C1.27269 13.2852 1.14147 13.3128 1.00869 13.314C0.87591 13.3151 0.744231 13.2898 0.621335 13.2395C0.498438 13.1893 0.386786 13.115 0.292893 13.0211C0.199 12.9272 0.124747 12.8156 0.0744663 12.6927C0.0241854 12.5698 -0.00111606 12.4381 3.77571e-05 12.3053C0.00119157 12.1725 0.0287779 12.0413 0.0811869 11.9193C0.133596 11.7973 0.209778 11.687 0.305288 11.5947L5.25529 6.64471L0.305288 1.69471C0.12313 1.50611 0.0223355 1.25351 0.0246139 0.99131C0.0268924 0.729113 0.132061 0.478301 0.317469 0.292893C0.502877 0.107485 0.75369 0.00231622 1.01589 3.78026e-05C1.27808 -0.00224062 1.53069 0.0985537 1.71929 0.280712L7.37629 5.93771Z' fill='%23FFFFFF'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

/* ナビゲーション */
.team-bottom__nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.team-bottom__nav-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 32px;
  border-bottom: 1px solid #dad4ca;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.team-bottom__nav-item:last-child {
  border-bottom: none !important;
  padding-bottom: 0;
}

.team-bottom__nav-item:hover {
  opacity: 0.7;
}

.team-bottom__nav-label {
  font-family: var(--font-japanese-sans);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 1.28px;
  line-height: 20px;
  color: var(--color-text-dark);
  margin: 0;
}

.team-bottom__nav-title {
  font-family: var(--font-english-sans);
  font-size: 32px;
  font-weight: 300;
  letter-spacing: 2px;
  line-height: 40px;
  color: var(--color-text-dark);
  display: flex;
  align-items: center;
  gap: 8px;
}

.team-bottom__nav-title::after {
  content: '';
  display: inline-block;
  width: 8px;
  height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='14' viewBox='0 0 8 14' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7.37629 5.93771C7.56376 6.12524 7.66907 6.37955 7.66907 6.64471C7.66907 6.90988 7.56376 7.16418 7.37629 7.35171L1.71929 13.0087C1.62704 13.1042 1.5167 13.1804 1.39469 13.2328C1.27269 13.2852 1.14147 13.3128 1.00869 13.314C0.87591 13.3151 0.744231 13.2898 0.621335 13.2395C0.498438 13.1893 0.386786 13.115 0.292893 13.0211C0.199 12.9272 0.124747 12.8156 0.0744663 12.6927C0.0241854 12.5698 -0.00111606 12.4381 3.77571e-05 12.3053C0.00119157 12.1725 0.0287779 12.0413 0.0811869 11.9193C0.133596 11.7973 0.209778 11.687 0.305288 11.5947L5.25529 6.64471L0.305288 1.69471C0.12313 1.50611 0.0223355 1.25351 0.0246139 0.99131C0.0268924 0.729113 0.132061 0.478301 0.317469 0.292893C0.502877 0.107485 0.75369 0.00231622 1.01589 3.78026e-05C1.27808 -0.00224062 1.53069 0.0985537 1.71929 0.280712L7.37629 5.93771Z' fill='%23456D5C'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

/* ========================================
   Responsive – PC小（1024px ～ 1439px）
   ======================================== */

@media screen and (max-width: 1439px) {

  .team-top__wrapper {
    padding-top: 160px;
    padding-right: 0;
  }

  .team-top__content {
    padding-left: 64px;
    padding-right: 64px;
  }

  .team-bottom__wrapper {
    display: flex;
    flex-direction: row;
    /* 600px以上は確実に横並び */
    width: 100%;
    max-width: 1140px;
    padding: 0 40px;
    gap: 40px;
    align-items: flex-start;
  }

  .team-bottom__contact {
    width: auto;
    flex: 1.2;
    /* コンタクト側を少し広めに確保 */
    min-width: 0;
  }

  .team-bottom__nav {
    flex: 1;
    min-width: 0;
  }

  .profile-card {
    padding: 0 64px;
    gap: 64px;
  }

  .team-top__left {
    height: 400px;
  }
}

/* ========================================
   Responsive – TAB（600px ～ 1023px）
   ======================================== */

@media screen and (max-width: 1023px) {

  .team-top__wrapper {
    padding: 200px 0 0;
  }

  .team-top__left {
    display: block;
    width: 40px;
    min-width: 40px;
    height: 400px;
    margin-top: 0;
  }

  .team-top__content {
    padding-left: 40px;
    padding-right: 40px;
  }

  .team-intro__title {
    font-size: 40px;
  }

  .team-members-grid {
    gap: 40px;
  }

  .team-member-card {
    width: calc((100% - 40px) / 2);
  }

  .team-member-card__image {
    width: 100%;
    height: auto;
    aspect-ratio: 320 / 305;
  }

  .team-mission {
    gap: 40px;
    padding-bottom: 60px;
  }

  .team-mission__title {
    font-size: 32px;
    line-height: 56px;
  }

  .team-mission__subtitle {
    font-size: 20px;
  }

  /* プロフィール */
  .team-profiles {
    padding: 80px 0;
    gap: 80px;
  }

  .profile-card {
    display: grid;
    grid-template-columns: 280px 1fr;
    /* 左:画像、右:基本情報 */
    gap: 40px;
    width: 100%;
    padding: 0 40px;
    align-items: flex-start;
  }

  .profile-card__image {
    grid-column: 1;
    grid-row: 1;
    /* 1行目に固定 */
    position: relative !important;
    width: 100%;
    min-width: 0;
    height: 420px;
    top: 0 !important;
    margin: 0;
  }

  /* grid 内で children を個別に制御するため display: contents を使用 */
  .profile-card__content {
    display: contents;
  }

  /* 略歴グループ（肩書き・氏名・グレーボックス）を右側に配置 */
  .profile-card__intro-group {
    grid-column: 2;
    grid-row: 1;
    /* 画像と同じ 1 行目に配置 */
    display: flex;
    flex-direction: column;
    gap: 40px;
    width: 100%;
  }

  /* メッセージ等の詳細は、画像の幅を超えて全幅で下に並べる */
  .profile-card__message,
  .profile-card__details,
  .profile-card__image-full {
    grid-column: 1 / span 2;
    /* 1列目から2列目までスパン */
    width: 100%;
  }

  .profile-card__header {
    margin-bottom: 24px;
  }

  .profile-card__name-en {
    font-size: 20px;
  }

  /* Bottom */
  .team-bottom {
    padding: 80px 0;
  }

  .team-bottom__wrapper {
    flex-direction: column;
    /* 599px以下で初めて縦並び */
    align-items: stretch;
    gap: 60px;
    width: 100%;
    padding: 0 40px;
  }

  .team-bottom__contact {
    width: 100%;
  }

  .team-bottom__contact-overlay {
    left: 40px;
    bottom: 40px;
  }

  .team-bottom__contact-title {
    font-size: 32px;
  }
}

/* ========================================
   Responsive – TAB小/スマホ大（max-width: 767px）
   ======================================== */

@media screen and (max-width: 767px) {
  .profile-card {
    display: flex;
    flex-direction: column;
    padding: 0 32px;
    gap: 32px;
  }

  .profile-card__image img {
    object-position: top;
  }

  .profile-card__image {
    height: 460px;
  }

  .profile-card__content {
    display: block;
    /* contentsを解除 */
    width: 100%;
  }

  .profile-card__intro-group {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

}

/* ========================================
   Responsive – SP（599px以下）
   ======================================== */

@media screen and (max-width: 599px) {

  .team-top__wrapper {
    padding: 120px 0 0;
    /* SPでは少し上部の余白を詰め、追従を開始しやすくする */
    align-items: flex-start;
  }

  .team-top__left {
    width: 24px;
    /* 少し細めにしてコンテンツ領域を広げる */
    min-width: 24px;
    height: 200px;
    /* 固定の高さではなく、追従する「帯」としての高さ */
    margin-top: 0;
    position: -webkit-sticky;
    position: sticky;
    top: 100px;
    /* スクロール時に画面上部から100pxの位置で止まる */
    z-index: 10;
  }

  .team-top__content {
    padding-left: 32px;
    padding-right: 32px;
    gap: 64px;
  }

  .team-intro__title {
    font-size: 36px;
    line-height: 44px;
  }

  .team-intro__subtitle {
    font-size: 14px;
  }

  .team-members-grid {
    display: flex;
    flex-direction: column;
    gap: 40px;
  }

  .team-member-card {
    width: 100%;
  }

  .team-member-card__image {
    width: 100%;
    height: auto;
    aspect-ratio: 320 / 305;
  }

  .team-member-card__name-group {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    margin-top: 8px;
  }


  .team-member-card__role {
    font-size: 13px;
  }

  .team-mission {
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding-bottom: 40px;
    margin: 32px 0;
  }

  .team-mission__title {
    font-size: 28px;
    line-height: 40px;
  }

  .team-mission__divider {
    width: 32px;
    height: 1px;
    /* 横線に変換 */
  }

  .team-mission__subtitle {
    font-size: 18px;
    line-height: 32px;
    white-space: normal;
  }

  /* プロフィール */
  .team-profiles {
    padding: 60px 0;
    gap: 60px;
  }

  .profile-card__image {
    position: relative !important;
    top: 0 !important;
  }

  .profile-card__name-ja {
    font-size: 26px;
  }

  .profile-card__name-en {
    font-size: 16px;
  }

  .profile-card__image-full {
    height: 320px;
  }

  .profile-card__bio {
    padding: 16px;
  }

  .team-bottom {
    padding: 80px 32px 0;
  }

  .team-bottom__wrapper {
    padding: 0;
    gap: 40px;
  }

  .team-bottom__contact-image {
    height: 200px;
  }

  .team-bottom__contact-overlay {
    left: 24px;
    bottom: 24px;
  }

  .team-bottom__contact-title {
    font-size: 28px;
  }

  .team-bottom__nav-title {
    font-size: 24px;
  }

  /* TEAMページ全体のテキストを「セーフ・キープオール」で統一 */
  .team-page p,
  .team-intro__text,
  .team-mission__text,
  .profile-card__text,
  .profile-card__bio p {
    word-break: keep-all !important;
    overflow-wrap: break-word !important;
    text-align: left;
    text-wrap: pretty;
    line-height: 1.8;
    letter-spacing: 0;
  }
}


.team-page {
  background: #26312F;
}