/* ===== REALESTATE ALG Design 用 カラムレイアウトカスタム ===== */
.custom-row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin: 2em 0;
}

.custom-col {
  box-sizing: border-box;
  background: #ffffff;    /* テーマの背景色に合わせる */
  padding: 20px;
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  font-size: 15px;
  line-height: 1.8;
}

/* 比率 */
.col-1-3 { flex: 0 0 calc(33.333% - 12px); }
.col-2-3 { flex: 0 0 calc(66.666% - 12px); }
.col-1-2 { flex: 0 0 calc(50% - 12px); }

/* 画像対策 */
.custom-col img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* スマホ対応 */
@media (max-width: 768px) {
  .custom-row {
    flex-direction: column;
  }
  .col-1-3,
  .col-2-3,
  .col-1-2 {
    flex: 0 0 100%;
  }
}
.custom-col ul {
  margin-top: 2em;       /* 上余白（調整ポイント） */
  margin-bottom: 2em;    /* 下余白 */
  padding-left: 1.5em;   /* 左のインデント */
}

.custom-col ul li {
  margin-bottom: 0.8em;  /* 箇条書き同士の間隔 */
  list-style-type: disc; /* 「•」を表示 */
}
/* ===== スタッフカード全体レイアウト ===== */
.staff-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px;
}

/* ===== カード本体 ===== */
.staff-card {
  background: linear-gradient(135deg, #ffffff, #f7f9fb);
  border: 1px solid #e3e3e3;
  border-radius: 18px;
  padding: 25px;
  text-align: center;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
  transition: all 0.3s ease;
}
.staff-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 25px rgba(0,0,0,0.1);
}

/* ===== アイコン部分（共通） ===== */
.staff-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 15px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  color: #fff;
}

/* 個別のカラー */
.staff-icon.icon-blue { background-color: #003366; }  /* 津野 */
.staff-icon.icon-green { background-color: #2d6a4f; } /* 税所 */
.staff-icon.icon-soft { background-color: #f9d8bf; }  /* 田中 */
.staff-icon.icon-fresh { background-color: #fbcce0; } /* 森本 */

/* ===== 名前・タイトル ===== */
.staff-name {
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 5px;
  color: #002b4e;
  border-bottom: 2px solid #c8a25a; /* ゴールドライン */
  display: inline-block;
  padding-bottom: 3px;
}

.staff-title {
  font-size: 0.95rem;
  color: #555;
  margin-bottom: 12px;
}

/* ===== バッジ（資格） ===== */
.staff-badges {
  margin-bottom: 15px;
}
.badge {
  display: inline-block;
  background-color: #e6ecef;
  color: #003366;
  font-size: 0.75rem;
  padding: 4px 10px;
  border-radius: 12px;
  margin: 3px;
  border: 1px solid #cdd5d9;
}

/* ===== メッセージ部分 ===== */
.staff-message {
  background-color: #f5f9f8;
  padding: 15px;
  border-radius: 12px;
  line-height: 1.7;
  font-size: 0.92rem;
  color: #333;
  position: relative;
}
.staff-message:before {
  content: "“";
  font-size: 2rem;
  color: #c8a25a;
  position: absolute;
  top: -15px;
  left: 15px;
}
.staff-message {
  background-color: #f5f9f8;
  padding: 15px;
  border-radius: 12px;
  line-height: 1.7;
  font-size: 0.92rem;
  color: #333;
  position: relative;
  text-align: left;
}
.staff-message:before {
  content: "“";
  font-size: 2rem;
  color: #c8a25a;
  position: absolute;
  top: -15px;
  left: 15px;
}
@media screen and (max-width: 768px) {
  .staff-container {
    grid-template-columns: 1fr !important;
  }
}
/* 名前とふりがな位置調整 */
.staff-name-wrap {
  margin-bottom: 5px; /* 全体のバランスを整える */
}

/* ふりがな（氏名の上に小さく配置） */
.staff-furigana-top {
  font-size: 14px;       /* サイズ固定（変更しない） */
  color: #555;
  font-weight: normal;
  text-align: center;
  letter-spacing: 0.05em;
  line-height: 1;
  margin-bottom: -25px;  /* ←極限まで近づける。 */
  display: block;
  position: relative;
  top: 2px; /* さらに微調整：上方向から近づける */
}
/* 物件画像を“はみ出しなし”で綺麗に見せる */
.property-slide img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}
/* 余白・はみ出し防止 */
.property-slide .swiper-slide {
    overflow: hidden;
}
