/* =========================================================
     1. スライダーコンテナと矢印
========================================================= */
.staff-coord-slider-wrap {
  position: relative;
  width: 100%;
  margin-top: 20px; /* タイトルからの余白 */
}

/* 矢印のデザイン（関連商品の大きく細い「く」の字を完全再現） */
.staff-swiper-btn {
  position: absolute;
  top: 40%;
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  border-top: 1px solid #c0aa78; /* ゴールドの色味 */
  border-right: 1px solid #c0aa78;
  cursor: pointer;
  z-index: 10;
  padding: 0;
  outline: none;
  transition: opacity 0.3s;
}

.staff-swiper-prev {
  left: -35px; /* スライダーの外側に配置 */
  transform: translateY(-50%) rotate(-135deg);
}

.staff-swiper-next {
  right: -35px; /* スライダーの外側に配置 */
  transform: translateY(-50%) rotate(45deg);
}

/* 矢印がクリックできない状態（両端） */
.staff-swiper-btn.swiper-button-disabled {
  border-color: #e5e5e5;
  cursor: default;
  pointer-events: none;
}

/* =========================================================
   2. スライダーアイテム（画像＋テキスト）
========================================================= */
.staff-coord-item {
  display: block;
  text-align: left; /* 関連商品に合わせて左揃え */
  cursor: pointer;
  text-decoration: none;
}

.staff-coord-img-box {
  margin: 0 0 12px 0;
  overflow: hidden;
}

.staff-coord-img-box img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
  transition: opacity 0.3s ease;
}

.staff-coord-item:hover .staff-coord-img-box img {
  opacity: 0.8; /* ホバーで少し透過 */
}

.staff-coord-txt {
  font-family: "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
  font-size: 13px; /* 関連商品の価格テキスト等と視覚的に合わせる */
  color: #666; /* ★画像に合わせてグレーに */
  margin: 0;
  line-height: 1.5;
  letter-spacing: 0.05em;
  font-weight: 400; /* ★通常体 (画像合わせ) */
}

/* =========================================================
   3. モーダル（ポップアップ）CSS
========================================================= */
.staff-modal {
  display: none;
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
}

/* PC時はここから overflow-y: auto; を削除します */
.staff-modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  padding: 40px;
  max-width: 800px;
  width: 90%;
  border-radius: 0;
  max-height: 90vh;
  text-align: left;
  box-sizing: border-box;
}

/* ★閉じるボタンのスタイル修正 (image_2.png合わせ) */
.staff-modal-close { 
  position: absolute; 
  top: 15px; 
  right: 15px; 
  cursor: pointer; 
  font-size: 24px; /* サイズ調整 */
  font-weight: 300; 
  color: #666; /* 暗いグレーの×マーク */
  line-height: 34px; /* 縦方向の中央揃え */
  width: 34px; 
  height: 34px; 
  text-align: center; 
  border: none; /* 境界線をなくす */
  border-radius: 50%; 
  z-index: 10; 
  background: rgba(0,0,0,0.05); /* 薄いグレーの背景 */
  transition: background 0.2s;
}

.staff-modal-close:hover {
  background: rgba(0,0,0,0.1);
}

.staff-modal-body-flex {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

/* ▼ PC時のレイアウト（右側のみスクロール） ▼ */
@media (min-width: 768px) {
  .staff-modal-content {
    overflow-y: hidden; /* モーダル全体はスクロールさせない */
  }

  .staff-modal-body-flex { 
    display: block; /* Flexを解除して画像の高さに合わせる */
    position: relative; /* 右側エリアの高さの基準にする */
  }

  .staff-modal-gallery-wrapper { 
    width: 48%; /* 左側の画像エリア */
  }

  .staff-modal-info-wrapper { 
    position: absolute; 
    top: 0; 
    right: 0; 
    width: 48%; /* 右側のテキストエリア */
    height: 100%; /* 左側の画像の高さに完全に合わせる */
    padding-top: 10px; 
    padding-right: 15px; /* スクロールバー用の余白 */
    box-sizing: border-box;
    overflow-y: auto; /* ★テキストが長い場合はここだけスクロール */
  }

  /* 右側スクロールバーのデザイン（任意ですが綺麗に見えます） */
  .staff-modal-info-wrapper::-webkit-scrollbar {
    width: 6px;
  }

  .staff-modal-info-wrapper::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px;
  }
}

.modal-img-gallery {
  display: flex;
  overflow-x: auto;
  gap: 10px;
  padding-bottom: 10px;
  margin-bottom: 10px;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
}

.modal-img-gallery::-webkit-scrollbar {
  height: 6px;
}

.modal-img-gallery::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 3px;
}

.modal-img-gallery img {
  flex: 0 0 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
  scroll-snap-align: center;
}

/* ★追加・変更したスタイル：フレックスボックスで縦を揃える */
.staff-modal-info-item { 
  display: flex; 
  margin-bottom: 12px; 
  font-size: 13px; 
  line-height: 1.5; 
  color: #333; /* ★値の色を黒に (画像合わせ) */
}

.staff-modal-info-label {
  width: 120px; /* 見出しの幅（必要に応じて調整） */
  flex-shrink: 0;
  color: #666; /* ★ラベルをグレーに (画像合わせ) */
  font-weight: 400; /* ★通常体 (画像合わせ) */
}

.staff-modal-info-value {
  flex-grow: 1;
  color: #333; /* ★値の色を黒に (画像合わせ) */
  font-weight: 400; /* ★通常体 (画像合わせ) */
}

/* ★着用レビューエリアの画像合わせ修正 */
.staff-modal-review { 
  font-size: 13px; 
  line-height: 1.6; 
  margin-top: 25px; /* ★上余白 */
  border-top: 1px solid #e5e5e5; /* ★薄い区切り線 (画像合わせ) */
  padding-top: 25px; /* ★区切り線の下余白 */
}

.staff-modal-review-head {
  font-weight: bold; /* ★太字 (画像合わせ) */
  color: #333; /* ★黒 (画像合わせ) */
  margin-bottom: 15px; /* ★本文との余白 */
}

.staff-modal-review-body {
  color: #333; /* ★黒 (画像合わせ) */
  font-weight: 400; /* ★通常体 (画像合わせ) */
}

/* =========================================================
   4. スマホ用レイアウト調整（関連商品と完全一致）
========================================================= */
@media (max-width: 767px) {
  .staff-coord-slider-wrap {
    padding: 0 40px; 
  }

  .staff-swiper-btn {
    display: block; 
    width: 20px;
    height: 20px;
  }

  .staff-swiper-prev {
    left: 5px; 
  }

  .staff-swiper-next {
    right: 5px; 
  }

  /* スマホ時はモーダル全体でスクロールするように調整 */
  .staff-modal-content { 
    padding: 40px 15px 20px; 
    width: 95%; 
    overflow-y: auto; 
  }

  .staff-modal-close {
    top: 10px;
    right: 10px;
  }
}

.article-margin {
  margin-top: 3.5em;
}