/* =========================================================
   buttonタグ化に伴うデザイン崩れの修正（不要な四角と背景の消去）
========================================================= */

/* 🏠 お部屋カード（.button-link）のボタン特有の初期背景と枠線をクリア */
.sliderWrap button.button-link {
  background: transparent;          /* グレーの初期背景を透明にする */
  padding: 0;                       /* 余計な内側余白をリセット */
  cursor: pointer;                  /* マウスが乗った時に指マークにする */
  text-align: inherit;              /* 文字の配置を元に戻す */
  font-family: inherit;
  font-size: inherit;
}

/* ❌ モーダル内の「×」閉じるボタンを四角く囲まない設定 */
#modal-close {
  background: transparent !important; /* 背景を透明にする */
  border: none !important;            /* 四角い枠線を消す */
  outline: none;
  font-size: 36px;                    /* ×マークを少し大きくて押しやすく */
  color: #333333;                     /* バツ印の色（濃いグレー） */
  cursor: pointer;
  padding: 0;
  position: absolute;
  top: 15px;
  right: 20px;
  z-index: 10;
  line-height: 1;
}

/* ◀ ▶ モーダル内の「戻る・進む」の矢印ボタンを四角く囲まない設定 */
button.modal-prev, 
button.modal-next {
  background: transparent !important; /* 背景を透明にする */
  border: none !important;            /* 四角い枠線を消す */
  outline: none;
  cursor: pointer;
  padding: 0;
  /* positionなどの配置スタイルは既存のCSS（modal.cssなど）の指定をそのまま活かします */
}

/* ボタンにマウスを乗せたときに少し薄くして、押せることを分かりやすくする設定 */
#modal-close:hover,
button.modal-prev:hover,
button.modal-next:hover {
  opacity: 0.7;
  transition: opacity 0.2s;
}