.popup-template .modal{opacity:0;transition:all .25s ease}.popup-template .modal.is-open{opacity:1;transition:all .25s ease}/*
Theme Name: REALESTATE ALG Design
Theme URI: https://algrit.co.jp/
Description: 株式会社アルグリットのワードプレステーマ
Version: 1.0
Author: ALGRIT
Author: https://algrit.co.jp/
*//* ===== 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;  /* ←極限まで近づける。必要に応じて -10 や -14 にも調整可 */
  display: block;
  position: relative;
  top: 2px; /* さらに微調整：上方向から近づける */
}

/*==============================
  Swiper物件スライダーの高さ統一・白画面防止版
==============================*/

/* スライダーの高さを画像に合わせて制御 */
.property-slide {
    max-height: 600px !important;
    overflow: hidden;
}

/* Swiper本体は高さ自動（固定しない） */
.property-slide .swiper,
.property-slide .swiper-wrapper {
    height: auto !important;
}

/* 各スライドの高さのみを固定 */
.property-slide .swiper-slide {
    height: 600px !important;   /* ここが重要 */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden;
}

/* 画像の調整（白画面防止のため100%ではなくmax-height指定） */
.property-slide .swiper-slide img {
    max-height: 100% !important;  /* スライド枠いっぱいまで */
    max-width: 100% !important;   /* はみ出さず表示 */
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    display: block;
    margin: 0 auto;
}

/* サムネイルスライダーの見た目を調整 */
.thumb-slider {
    height: 120px;
    margin-top: 15px;
}

.thumb-slider .swiper-slide {
    opacity: 0.5;
    cursor: pointer;
    transition: opacity 0.3s;
}

.thumb-slider .swiper-slide-thumb-active {
    opacity: 1;
    border: 2px solid #ff6600; /* 選択中サムネイルの強調 */
}

.thumb-slider img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ===============================
   メインスライダーは高さ固定のまま維持
=============================== */
.property-slide,
.property-slide .swiper {
    height: 600px !important;
    max-height: 600px !important;
    overflow: hidden;
    position: relative;
}

/* PC用（1024px以上）：高さ600px固定 */
@media (min-width: 1024px) {
  .property-slide,
  .property-slide .swiper,
  .property-slide .swiper-wrapper,
  .property-slide .swiper-slide {
      height: 600px !important;
  }
}

/* タブレット用（768px〜1023px）：高さ500px固定 */
@media (min-width: 768px) and (max-width: 1023px) {
  .property-slide,
  .property-slide .swiper,
  .property-slide .swiper-wrapper,
  .property-slide .swiper-slide {
      height: 500px !important;
  }
}

/* スマホ用（767px以下）：画面の50%の高さにする（固定pxは使わない） */
@media (max-width: 767px) {
  .property-slide,
  .property-slide .swiper,
  .property-slide .swiper-wrapper,
  .property-slide .swiper-slide {
      height: 50vh !important;   /* ★画面の50%の高さ */
      max-height: none !important;
      overflow: visible !important; /* Swiperが正しくスライドを扱えるようにする */
  }

  .property-slide img,
  .property-slide .swiper-slide img {
      height: 100% !important;
      width: auto !important;
      object-fit: contain !important; /* 画像の縦横比を維持 */
  }