/*
Theme Name: X-T9 Child
Template: x-t9
Version: 1.0.0
*/

/* 役職名(Pタグ)の上・下・中すべての余白を強制消去 */
.officer-list-conteiner .officer-card .officer-info p.officer-post {
  margin: 0 0 2px 0 !important;
  padding: 0 !important;
  line-height: 1.2 !important;
}
.officer-list-container .officer-card .officer-info h3.officer-name {
  margin: 0 0 20px 0 !important;
  padding: 0 0 10px 0 !important;
  line-height: 1.3 !important;
  border-bottom: 2px solid #f0f0f0 !important;
}

/* もしGutenbergが自動挿入する「隣接要素へのmargin」があればそれも完全に相殺する */
.officer-info p.officer-post + h3.officer-name {
  margin-top: 0px !important;
}

/* 役員一覧全体のコンテナ(1列の縦並び) */
div.officer-list-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 40px;
}

/* 役員カード１枚分のスタイル(横並びの2カラム定義) */
div.officer-card {
  display: flex;
  flex-direction: row; /* 横並び */
  align-items: flex-start; /* 上揃え */
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

/* 写真部分 */
div.officer-img {
  flex: 0 0 250px; /* 写真の幅を250pxに固定 */
  width: 250px;
}
div.officer-img img {
  width: 100% !important;
  height: 100% !important;
  min-height: 250px; /* 最低限の縦幅を確保 */
  object-fit: cover; /* 縦横比を保ってトリミング */
  object-position: center top; /* 顔が切れにくいように上寄り */
  display: block;
}

/* 右側：テキスト情報部分(残りの幅すべてを使う) */
div.officer-info {
  flex: 1;
  padding: 20px; /* 余白を少し広めにしてゆったりと */

  /* FSEテーマが自動で挟み込む縦の隙間(ブロックギャップ)を完全にゼロにする */
  display: flex;
  flex-direction: column;
  gap: 0 !important;
}

div.profile-name {
  font-size: 1.5rem;
  font-weight: bold;
  margin: 0 0 20px 0 !important; /* 上側のマージンを強制的に0にする */
  padding: 0 0 10px 0 !important;
  border-bottom: 2px solid #f0f0f0; /* 氏名の下に薄い区切り線 */
}

span.officer-post {
  font-size: 1.1rem;
  font-weight: normal;
  color: #666;
  margin: 0 14px 0 0 !important; /* 上・下・左のマージンをリセットし、右だけ14pxに */
  padding: 0 !important;
}

div.officer-message {
  font-size: 1rem;
  ling-height: 1.5;
  color: #333;
  margin: 0 0 20px 0 !important; /* 上側のマージンを強制的に0にする */
  padding: 0 0 10px 0 !important;
  border-bottom: 2px solid #f0f0f0; /* 氏名の下に薄い区切り線 */
}

div.officer-career {
  margin: 0 0 20px 0 !important; /* 上側のマージンを強制的に0にする */
  padding: 0 0 10px 0 !important;
  border-bottom: 2px solid #f0f0f0; /* 氏名の下に薄い区切り線 */
}

/* スマホ対応(画面が768px以下になったら縦並びに戻す) */
@media screen and (max-width: 768px) {
  div.officer-card {
    flex-direction: column; /* 上下に並べる */
  }

  div.officer-img {
    flex: 0 0 auto;
    width: 100%; /* 写真を横いっぱいに */
  }

  div.officer-img img {
    height: 400px !important; /* スマホ時の写真の高さ */
  }

  div.officer-info {
    padding: 20px; /* スマホ用に余白を少し狭く */
  }
}

/* SNSリンク全体のコンテナ */
.officer-sns-links {
  display: flex;
  gap: 16px; /* アイコン同士の間隔 */
  justify-content: center; /* 中央揃えにする場合 */
  margin-top: 15px;
}

/* アイコンリンク共通のスタイル */
.officer-sns-link a {
  font-size: 20px; /* アイコンのサイズ */
  color: #888888; /* 初期状態は馴染むようにグレーや暗めの色に */
  transition:
    color 0.3s ease,
    transform 0.2s ease;
  text-decoration: none;
}

/* ホバー時に少し上に弾むアニメーション */
.officer-sns-links a:hover {
  transform: translateY(-2px);
}

/* ホバー時に各SNSのブランドカラーに変化させる */
.officer-sns-links a[aria-label="YouTube"]:hover {
  color: #ff0000; /*YouTubeの赤 */
}
.officer-sns-links a[aria-label="Twitter"]:hover {
  color: #000000; /* Xの黒(背景が黒なら白にする) */
}
.officer-sns-links a[aria-label="Instagram"]:hover {
  color: #cf2e92; /* Instagram風ピンク */
}
.officer-sns-links a[aria-label="Facebook"]:hover {
  color: #1877f2; /* Facebookのブルー */
}
.officer-sns-links a[aria-label="Website"]:hover {
  color: #0073aa; /* WEBサイト用のブルー */
}

/* ツールチップの親要素(アイコン側)の設定 */
.my-tooltip {
  position: relative;
  display: inline-block;
}

/* ホバー時に表示されるツールチップのスタイル */
.my-tooltip::after {
  content: attr(data-tooltip); /* HTMLのdata-tooltipの文字を読み込む */
  position: absolute;
  bottom: 125%; /* アイコンの上側に配置 */
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 10px;
  background-color: #333; /* 背景色(黒系) */
  color: #fff; /* 文字色(白) */
  font-size: 12px;
  border-radius: 4px;
  white-space: nowrap; /* 改行を防ぐ */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease; /* ふわっと表示させる */
  z-index: 100;
}

/* 吹き出しの「三角形のツノ」 */
.my-tooltip::before {
  content: "";
  position: absolute;
  bottom: 135%; /* ボックスと同じ位置からスタート */
  left: 50%;
  transform: translate(-50%, 100%); /* ボックスの真下に密着させる */

  /* ボーダーの仕組みを使って三角形を作る */
  border: 10px solid transparent;
  border-top-color: #333; /* 吹き出しの色と同じにする */

  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
  z-index: 100;
}

/* マウスが乗った(オンマウス)時の動作 */
.my-tooltip:hover::after,
.my-tooltip:hover::before {
  opacity: 1;
  visibility: visible;
}

/* 見出し頭にFont Awesomeアイコンを表示 */
h3.h3-officer::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f2bd";
  margin-right: 0.5em;
  color: var(--wp--preset--color--child-primary);
}
h3.h3-member::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f0c0";
  margin-right: 0.5em;
  color: var(--wp--preset--color--child-primary);
}
h3.h3-donation::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f4be";
  margin-right: 0.5em;
  color: var(--wp--preset--color--child-primary);
}
h3.h3-philosophy::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f14e";
  margin-right: 0.5em;
  color: var(--wp--preset--color--child-primary);
}
h3.h3-platform::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f2b4";
  margin-right: 0.5em;
  color: var(--wp--preset--color--child-primary);
}
h3.h3-form::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f044";
  margin-right: 0.5em;
  color: var(--wp--preset--color--child-primary);
}
h3.h3-mail::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f0e0";
  margin-right: 0.5em;
  color: var(--wp--preset--color--child-primary);
}

/* ==========================================================================
   Swiper 全幅3枚表示（高さ統一・リンクバグ修正版）
   ========================================================================== */

/* 1. スライダーの外枠：テーマを無視して全幅100vwにする */
.slider-container {
  width: 100vw !important;
  max-width: 100vw !important;
  position: relative !important;
  left: calc(50% - 50vw) !important;
  margin: 0 !important;
  padding: 30px 0;
  overflow: hidden !important;
}

/* 2. Swiperコンテナの横幅固定 */
.my-swiper {
  width: 100% !important;
  height: auto;
}

/* 3. 各スライドのサイズ均等化 */
.swiper-slide {
  width: 100%;
  height: auto;
  box-sizing: border-box;
  display: flex; /* 高さを揃えるための設定 */
}

/* 4. リンク（aタグ）を全面に広げて確実にクリック可能にする */
.swiper-slide a.slide-link {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  cursor: pointer !important;
  position: relative;
  z-index: 10; /* ★重要：最前面に持ってきてクリックを確実に有効化 */
}

/* 5. 画像の設定：ここで高さを統一します */
.swiper-slide img {
  width: 100% !important;

  /* ★好みの高さを指定してください（例: PCで400px、500pxなど） */
  height: 450px !important;

  /* ★重要：画像の縦横比を崩さずに、指定した高さにきれいに収めます */
  object-fit: cover !important;

  display: block;
}

/* 6. スマホ表示（画面幅768px以下）での画像の高さ調整 */
@media screen and (max-width: 768px) {
  .swiper-slide img {
    /* スマホで横幅1枚表示になったときは、高さを少し低く（250pxなど）すると綺麗です */
    height: 280px !important;
  }
}

/* 【お好みで】ホバー時の演出 */
.swiper-slide a.slide-link:hover img {
  filter: brightness(0.95);
  transition: filter 0.3s ease;
}