@charset "UTF-8";

/* =========================================================
   FLOOR MAP （アクセシビリティ対応・JavaScript連動版）
========================================================= */

.floorMapContainer {
  border: 1px solid #dfdfdf;
  box-sizing: border-box;
  background: #ffffff;
}

/* 🗺 地図を囲む4つの箱の初期設定 */
.floorMapContainer > .container1,
.floorMapContainer > .container2,
.floorMapContainer > .container3,
.floorMapContainer > .container4 {
  opacity: 0;                       /* 最初は透明にする */
  overflow: hidden;
  transition: opacity 400ms ease-in-out; /* 0.4秒かけて滑らかにフェードイン */
  justify-content: center;
  align-items: flex-start;
  padding: 15px 0;                  /* 地図の上下に少しゆとりを作る */
  box-sizing: border-box;
  
  /* ❌ display: none; はJavaScriptの邪魔をして画像を消し去ってしまうため削除します */
}

/* 💡 JavaScriptで現在アクティブになった階（aria-hidden="false"）だけを画面に表示させる、最も重要な設定 */
.floorMapContainer > [aria-hidden="false"] {
  display: block !important;        /* JavaScriptの命令と連動させて画面に引っ張り出す */
  opacity: 1;                       /* 不透明度を1にしてクッキリ表示させる */
}


/* 💡 JavaScriptによって display: block; があたった瞬間に、フワッとフェードインさせる設定 */
.floorMapContainer > [aria-hidden="false"] {
  opacity: 1;
}

.floorMapContainer p {
  padding: 5px;
}

.floorMapContainer img {
  display: block;
  width: 100%;
  max-width: 400px;
  height: auto;
  margin: 0 auto;
}

/* =========================================================
   TABS BUTTON STYLE （buttonタグ化に伴うデザイン調整）
========================================================= */

/* 階数切り替えのボタンから、初期のグレー背景や立体的な太い枠線をリセット */
.floorMap .tabs-list button.panel-label {
  background: transparent;          /* 背景を透明にする */
  border: none;                     /* 邪魔な初期枠線を消す */
  outline: none;
  cursor: pointer;                  /* マウスが乗った時に指マークにする */
  font-family: inherit;             /* サイト共通のフォントに統一 */
  font-size: 1rem;                  /* 文字の大きさ */
  padding: 12px 20px;               /* 押しやすいように内側の余白を調整 */
  display: block;                   /* 横並びのレイアウトに合わせる */
  width: 100%;                      /* 囲んでいる親要素（li）いっぱいに広げる */
  box-sizing: border-box;
  text-align: center;
  transition: background-color 0.2s, color 0.2s;
}

/* 💡 キーボード操作時、今どこを選んでいるか分かりやすくするためのフォーカス線 */
.floorMap .tabs-list button.panel-label:focus-visible {
  outline: 2px solid #00a1e9;
  outline-offset: -2px;
}