body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
}

.site-header {
  padding: 1.5rem 1rem;
  border-bottom: 1px solid #ddd;
}

.site-header__inner {
  max-width: 960px;
  margin: 0 auto;
}

/* ヘッダ：市章＋タイトルを横並びに */
.site-title-wrap {
  display: inline-flex;       /* タイトルと一緒に横に並ぶ */
  align-items: center;
  gap: 0.5rem;               /* 市章と文字の間のすき間 */
}

/* 市章のサイズ（高さだけ決めておく） */
.city-emblem {
  height: 40px;              /* 好きな高さに調整 */
  width: auto;
  display: block;
}


.site-title {
  margin: 0;
  font-size: 1.8rem;
 }
 
 .site-title a {
  color: inherit;
  text-decoration: none;
}

.site-title a:hover {
  text-decoration: underline;
}

.site-subtitle {
  margin: 0.25rem 0 1rem;
  font-size: 0.9rem;
}

.global-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.global-nav a {
  text-decoration: none;
  font-size: 0.9rem;
}

main {
  max-width: 960px;
  margin: 0 auto;
  padding: 1rem;
}

.section {
  margin: 2rem 0;
}

.section h2 {
  margin-bottom: 0.5rem;
  border-left: 4px solid #444;
  padding-left: 0.5rem;
}

.map-board {
  border: 1px solid #ccc;
  padding: 1rem;
}

.map-board__image img {
  max-width: 100%;
  height: auto;
  display: block;
}

.map-board__links ul {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
}

.button {
  display: inline-block;
  padding: 0.5rem 1rem;
  text-decoration: none;
  border: 1px solid #444;
  border-radius: 4px;
  font-size: 0.9rem;
}

.site-footer {
  border-top: 1px solid #ddd;
  padding: 1rem;
  margin-top: 2rem;
}

.site-footer__inner {
  max-width: 960px;
  margin: 0 auto;
  font-size: 0.8rem;
}
/* マップリンク */

/* 町マップの土台 */
.town-map {
  position: relative;
  display: inline-block;
}



/* ===== マップを全体表記させる記述 ===== */


.town-map img {
  width: 100%;      /* 最優先で画像を縮める */
  height: auto;
  display: block;
}

/* ===== あいさつ文 ===== */
.panel-greeting {
  text-align: center;
  font-size: 0.95rem;
  line-height: 1.8;
  margin: 0 0 18px;
}




.panel-menu__title {
  text-align: center;
  font-size: 1.3rem;
  margin-bottom: 8px;
}

.panel-menu__item:hover,
.panel-menu__item:focus-visible {
  background: #f5f5f5;
  border-color: #ffffff;
  box-shadow: 0 1px 0 #777777;
  transform: translateY(1px);
}


/* パネル本体を画面中央に固定（スクロールさせない） */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  justify-content: center;
  align-items: center;
  background: #fafefe;  /* 好きな背景でOK */
}

/* 端末全体（画面中央に固定） */
.kiosk-wrapper {
  min-height: 100vh;                 /* 画面の高さぶん使う */
  display: flex;                     /* この箱の中だけフレックス */
  justify-content: center;           /* 横中央 */
  align-items: center;               /* 縦中央 */
}

.kiosk {
  width: min(90vw, 90vh);            /* 画面に収まる最大サイズの正方形 */
  aspect-ratio: 1 / 1;
}

/* パネル本体の背景画像 */
.kiosk-frame {
  position: relative;
  width: 100%;
  height: 100%;
  background-image: url("../ui/panel.png");
  background-size: cover;
  background-position: center;
}

/* 画面部分（中身がスクロールする領域） */
.kiosk-screen {
  position: absolute;
  inset: 3.125%;         /* 四辺から60px相当を内側にした領域 */
  border-radius: 8px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px;
  box-sizing: border-box;
}

.panel-main {
  flex: 1;
  overflow-y: auto;
}

.panel-menu {
  flex: 0 0 140px;
}


/* ページ共通：基本は非表示 */
.page {
  display: none;
}

/* 表示中のページだけ出す */
.page.visible {
  display: block;
}



.panel-menu button {
  width: 200px;       /* 横幅 */
  height: 40px;       /* 高さ */
  font-size: 16px;    /* 文字サイズ */
  border-radius: 10px;
  cursor: pointer;
}

/* 共通のボタン見た目 */
.panel-menu {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

/* ホーム画面のときの位置（少し下め） */
.kiosk-screen.home .panel-menu {
  top: 200px;
}


.page.visible {
  display: block !important;
}

.panel-menu {
  margin-top: 24px;           /* 上のあいさつ文との間隔 */
  display: flex;
  justify-content: center;    /* 横方向の中央寄せ */
}

.panel-menu__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);  /* 縦2列 */
  gap: 10px 16px;                         /* 行・列のすき間 */
  width: 400px;                           /* 全体の幅（好みで調整） */
}

.panel-menu__item {
  width: 100%;            /* グリッドの幅いっぱい */
  padding: 10px 0;
  font-size: 16px;
  border-radius: 8px;
  border: 1px solid #777;
  background: #eee;
  cursor: pointer;
}

#panel-content {
  flex: 1;
  padding: 0px 0px 0px;
  box-sizing: border-box;
  overflow: hidden;   /* ← ここを一旦 auto から hidden に */
}

.panel-map {
  width: 100%;
  height: 100%;                     /* 表示領域の高さを全部使う */
  display: flex;
  align-items: center;
  justify-content: center;          /* 中央に配置 */
}

.panel-map img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;              /* 4:3 を保ったまま“収まる” */
  display: block;
}

.kiosk-screen.inner #panel-content {
  padding-top: 140px;   /* ボタン＋少し余白。今より気持ち増やす感じで調整 */
}

/* 中身ページ（inner）のとき：ボタン帯をパネル最上部に固定 */
.kiosk-screen.inner .panel-menu {
  position: absolute;
  top: 0px;              /* 上端からの距離（好みで調整） */
  left: 50%;
  transform: translateX(-50%);
  margin-top: 0;
  width: 100%;
  
  padding-bottom: 8px;          /* 横線との間の余白 */
}

.kiosk-screen.inner .panel-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;                    /* ボタンエリアのすぐ下 */
  border-bottom: 1px solid #cccccc;
}

/* 説明文（2本線のあいだに固定表示） */
.panel-desc {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 50px;         /* ← 線と線の真ん中あたりになるように調整してね */
  padding: 0 10px;    /* 横の余白。お好みで */
  font-size: 14px;
  color: #333;
  white-space: pre-line;
}

/* inner のときだけ表示する */
.kiosk-screen.inner .panel-desc {
  display: block;
}


.kiosk-screen.inner .panel-menu::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -120px;                /* 1本目より少し下にずらす */
  border-bottom: 1px solid #888888;
}



/* 中身ページ：ボタンを横一列で中央寄せ */
.kiosk-screen.inner .panel-menu__list {
  display: flex;
  justify-content: center;
  gap: 8px;               /* ボタン同士のすき間 */
  width: auto;            /* 固定幅をやめて、内容に合わせる */
}

/* 中身ページ用の小さめボタン */
.kiosk-screen.inner .panel-menu__item {
  padding: 4px 12px;      /* 細め・横長 */
  font-size: 12px;
  width: auto;            /* 100% をやめて、中身サイズに */
  white-space: nowrap;    /* 改行せず一行で収める */
}

/* FAQ など本文部分の共通設定 */
.page-body {
  max-width: 720px;      /* 行の長さを少し短くして読みやすく */
  margin: 0 auto;        /* 中央寄せ */
  line-height: 1.6;      /* 行間はちょっとだけ広め */
}

/* 通常の段落の余白を詰める */
.page-body p {
  margin: 0 0 0.6em;     /* 下だけ少し空ける（数字は好みで調整） */
}

/* セクション見出し（1. 舞寿空市そのものについて） */
.page-body h2 {
  font-size: 1.2rem;
  margin: 1.4em 0 0.6em;  /* 上を広め、下を少しだけ */
}

/* 質問行 */
.page-body p.faq-q {
  margin: 0.8em 0 0.2em;
  font-weight: 600;
}

/* 回答行 */
.page-body p.faq-a {
  margin: 0 0 0.6em;
}


/* ここから下は楽曲専用ページの設定 */
/* =========================
   楽曲部（新レイアウト）
   動画は上、下に
   クレジット＋外部リンク
   ========================= */

.song-main {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}

/* 動画側 */
.song-video iframe {
  display: block;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  border: 0; /* frameborder の代替 */
}

/* 動画下の横並びエリア */
.song-lower {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
}

/* クレジット */
.song-credits {
  flex: 0 0 220px;
  font-size: 1rem;
  line-height: 1.4;
}

.song-credits p {
  margin: 0.3rem 0;
}

/* 外部リンク群 */
/* 右：リンクカード列 */
.song-links-column {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 480px;      /* ★ ここでカード全体の横幅上限を決める */
  margin: 0 0 0 auto;        /* 左に寄せたい場合 */
}




/* ここから下は2曲標示用 */
.song-version-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.song-version-tab{
  border: 1px solid #999;
  background: #fff;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  font-size: 0.9rem;
  cursor: pointer;
}

.song-version-tab.is-active{
  background: #222;
  color: #fff;
  border-color: #222;
}

/* クレジット切替 */
.song-branch{
  display: none;
  font-size: 1rem;
  line-height: 1.6;
}

.song-branch.is-active{
  display: block;
}

.song-branch p{
  margin: 0.1rem 0;
}





/* 施設部：アイコン側 */
/* --- 全画像共通ルールがあるならそのあとに --- */

.song-page .facility-image img {
  width: 128px ;
  height: 128px ;
  max-width: none ;
  image-rendering: pixelated;
 }


/* 施設部：概要テキスト */
.facility-text {
  flex: 1;
  line-height: 1.8;
}

.facility-main {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  margin-bottom: 1.5rem;
}

/* =========================
   外部リンク：カード風
   ========================= */

.song-links {
  display: flex;
  flex-direction: column;   /* 縦に３枚並べる */
  gap: 0.75rem;             /* カード同士のすき間 */  

}

.links-branch {
  display: flex;
  flex-direction: column;   /* 縦に３枚並べる */
  gap: 0.75rem;             /* カード同士のすき間 */  
}

.links-branch.is-active{
  display: block;
}

.links-branch p{
  margin: 0.1rem 0;
}



/* カード本体 */
.song-link-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0.9rem;    /* ← ここを小さくして高さを抑える */
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.08);
  margin-bottom: 16px;
  text-decoration: none;
  color: inherit;
}

/* hoverで少しだけ“触れる感じ” */
.song-link-card:hover {
  transform: translateY(-1px);
  border-color: #cfcfcf;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

/* 左側テキスト */
.song-link-card__body {
  flex: 1;
  min-width: 0;
}

.song-link-card__eyebrow {
  font-size: 0.8rem;
  margin-bottom: 0.1rem;
  color: #666;
}

.song-link-card__title {
   font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 0.15rem;
}

.song-link-card__desc {
  font-size: 0.85rem;
  line-height: 1.4;
  margin-bottom: 0.15rem;
}

.song-link-card__domain {
  font-size: 0.75rem;
  color: #999;
}

/* 右側サムネ */
.song-link-card__thumb {
	flex: 0 0 96px;           /* ← ここを小さくするとカード自体も低くなる */
  margin-left: 0.75rem;
}


.song-link-card__thumb img {
  width: 100%;
  height: auto;
  border-radius: 4px;
  object-fit: cover;
  aspect-ratio: 16 / 9;
}

/* サムネ無し運用のときの安全策
   （thumb を消しても崩れない） */
.song-link-card:not(:has(.song-link-card__thumb)) {
  grid-template-columns: 1fr;
}



/* ここまで楽曲専用ページの設定 */

/* リンク用カードの見た目 */
.link-card {
  background: #ffffff;
  border-radius: 14px;
  padding: 18px 22px;
  margin-bottom: 16px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.link-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.12);
}

.link-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 6px;
}

.link-desc {
  font-size: 14px;
  color: #555;
  margin-bottom: 4px;
}

.link-url {
  font-size: 13px;
  color: #888;
}




}

/* 楽曲一覧用 */
.song-list {
  list-style: disc;
  padding-left: 1.5rem;
  margin-top: 0.5rem;
}

.song-list li {
  margin: 0.25rem 0;
}

.song-title {
  text-decoration: none;
}

.song-title:hover {
  text-decoration: underline;
}

.song-meta {
  font-size: 0.9rem;
  color: #555;
}


/* ===== キャラクター上部（アイコン＋基本情報） ===== */
.chara-main {
  display: flex;
  gap: 30px;
  align-items: flex-start;
}

.chara-icon img {
  width: 300px;
  height: 300px;
  object-fit: cover;
   border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  }

.chara-text {
  line-height: 1.8;
}

/* ===== トップページのキャラクター一覧のレイアウト ===== */
.resident-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 1行4人 */
  gap: 25px;
  margin-top: 30px;
}

.resident-card {
  text-align: center;
  text-decoration: none;
  color: inherit;
  background: #ffffff;
  padding: 15px;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.resident-card img {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 12px;
}

.resident-card p {
  margin-top: 10px;
  font-weight: bold;
}

.resident-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.12);
}


/* ===== 下部（全身＋詳細） ===== */
.chara-detail-layout {
  display: flex;
  gap: 40px;
  align-items: flex-start;
}

.chara-full img {
  width: 250px;
}

.chara-detail-text {
  line-height: 1.9;
}



/* ===== 楽曲モーダル ===== */

.song-modal {
  position: fixed;
  inset: 0;              /* 画面全体にかぶせる */
  display: none;         /* 初期状態は非表示 */
  z-index: 2000;
}

.song-modal.is-open {
  display: block;
}

.song-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);   /* 半透明の暗幕 */
}

.song-modal-dialog {
  position: absolute;
  inset: 5% 12%;                   /* 上下5%, 左右12% くらい内側 */
  background: #fff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
}

.song-modal-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  padding: 0.3rem 0.9rem;
  font-size: 0.95rem;
  border: none;
  border-radius: 999px;          /* まるいピル型 */
  background: #333;
  color: #fff;
  cursor: pointer;
}

.song-modal-close:hover {
  background: #555;
}

.song-modal-frame,
#song-modal-frame {
  border: none;
  width: 100%;
  flex: 1;
  min-height: 400px;
}

/* ===== 町ページ共通 ===== */

.town-main {
  padding: 2rem 0;
}

/* 木枠（town-frame.png）を背景にする */
.town-frame {
  position: relative;
  max-width: 900px;          /* 端末と同じくらいにしたい場合 */
  margin: 0 auto;
  aspect-ratio: 1 / 1;
  background-image: url("../ui/town-frame.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}



/* 枠の内側 1800×1800 相当の領域 */
.town-map-wrapper {
  position: absolute;
  inset: 3.125%;             /* 60 / 1920 × 100 → 3.125% */
}

/* マップを枠いっぱいに */
.town-map-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* 施設アイコンの共通設定 */
.facility-link {
  position: absolute;
  display: block;

  /* ここで当たり判定の“箱”を作る */
  width: var(--w, 64px);
  height: var(--h, 64px);

  /* 座標の基準点を中心にしたいなら */
  transform: translate(-50%, -50%);
}

.facility-link img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain; /* 正方形/長方形どっちでも安全 */
}


/* 鱒川湖の座標 */
.facility-ms001 {
	width: 34%;
	height: 34%;
  top: 63%;   /* マップ内の縦位置（0%～100%） */
  left: 48%;  /* マップ内の横位置（0%～100%） */
}

/* 鱒川湖畔公園の座標 */
.facility-ms004 {
	width: 10%;
	height: 5%;
  top: 81%;   /* マップ内の縦位置（0%～100%） */
  left: 85%;  /* マップ内の横位置（0%～100%） */
}

/* 時焚庵の座標 */
.facility-ms011 {
	width: 10%;
	height: 10%;
  top: 69%;   /* マップ内の縦位置（0%～100%） */
  left: 15%;  /* マップ内の横位置（0%～100%） */
}

/* 時焚庵の座標 */
.facility-ms002 {
	width: 7%;
	height: 7%;
  top: 70%;   /* マップ内の縦位置（0%～100%） */
  left: 70%;  /* マップ内の横位置（0%～100%） */
}

/* Campanaの座標 */
.facility-ms003 {
	width: 7%;
	height: 7%;
  top: 63.5%;   /* マップ内の縦位置（0%～100%） */
  left: 70%;  /* マップ内の横位置（0%～100%） */
}

/* 鱒川食堂の座標 */
.facility-ms006 {
	width: 4%;
	height: 4%;
  top: 73%;   /* マップ内の縦位置（0%～100%） */
  left: 88%;  /* マップ内の横位置（0%～100%） */
}

/* 名もない公園の座標 */
.facility-ms008 {
	width: 5%;
	height: 5%;
  top: 82.5%;   /* マップ内の縦位置（0%～100%） */
  left: 23%;  /* マップ内の横位置（0%～100%） */
}

/* 鱒川町住宅街の座標 */
.facility-ms010 {
	width: 18%;
	height: 18%;
  top: 88.5%;   /* マップ内の縦位置（0%～100%） */
  left: 40%;  /* マップ内の横位置（0%～100%） */
}

/* 夢寐園の座標 */
.facility-ms012 {
	width: 25%;
	height: 25%;
  top: 17%;   /* マップ内の縦位置（0%～100%） */
  left: 50%;  /* マップ内の横位置（0%～100%） */
}

/* 舞寿空新聞社の座標 */
.facility-ms014 {
	width: 10%;
	height: 10%;
  top: 41%;   /* マップ内の縦位置（0%～100%） */
  left: 78%;  /* マップ内の横位置（0%～100%） */
}

/* 朝風中学校の座標 */
.facility-ms015 {
	width: 10%;
	height: 10%;
  top: 88%;   /* マップ内の縦位置（0%～100%） */
  left: 65%;  /* マップ内の横位置（0%～100%） */
}

/* 舞寿空駅の座標 */
.facility-oz002 {
	width: 7%;
	height: 7%;
  top: 45%;   /* マップ内の縦位置（0%～100%） */
  left: 13.5%;  /* マップ内の横位置（0%～100%） */
}

/* 舞寿空駅前エリアの座標 */
.facility-oz003 {
	width: 10%;
	height: 5%;
  top: 51%;   /* マップ内の縦位置（0%～100%） */
  left: 20%;  /* マップ内の横位置（0%～100%） */
}

/* 舞寿空市役所の座標 */
.facility-oz004 {
	width: 12%;
	height: 12%;
  top: 64%;   /* マップ内の縦位置（0%～100%） */
  left: 70%;  /* マップ内の横位置（0%～100%） */
}

/* 舞寿空市民ホールの座標 */
.facility-oz005 {
	width: 12%;
	height: 12%;
  top: 23%;   /* マップ内の縦位置（0%～100%） */
  left: 19%;  /* マップ内の横位置（0%～100%） */
}

/* 大空美術館の座標 */
.facility-oz006 {
	width: 12%;
	height: 12%;
  top: 66%;   /* マップ内の縦位置（0%～100%） */
  left: 85%;  /* マップ内の横位置（0%～100%） */
}

/* 大空町住宅街の座標 */
.facility-oz009 {
	width: 20%;
	height: 20%;
  top: 20%;   /* マップ内の縦位置（0%～100%） */
  left: 78%;  /* マップ内の横位置（0%～100%） */
}

/* VDRの座標 */
.facility-oz011 {
	width: 5%;
	height: 5%;
  top: 51%;   /* マップ内の縦位置（0%～100%） */
  left: 12.5%;  /* マップ内の横位置（0%～100%） */
}

/* 時渡文具堂の座標 */
.facility-oz012 {
	width: 5%;
	height: 5%;
  top: 89%;   /* マップ内の縦位置（0%～100%） */
  left: 52%;  /* マップ内の横位置（0%～100%） */
}

/* シータの座標 */
.facility-oz013 {
	width: 12%;
	height: 6%;
  top: 36%;   /* マップ内の縦位置（0%～100%） */
  left: 21%;  /* マップ内の横位置（0%～100%） */
}

/* 霊峰虹ノ峰の座標 */
.facility-nj001 {
	width: 18%;
	height: 18%;
  top: 38%;   /* マップ内の縦位置（0%～100%） */
  left: 25%;  /* マップ内の横位置（0%～100%） */
}
/* 霊峰虹ノ峰の座標 */
.facility-nj002 {
	width: 10%;
	height: 10%;
  top: 8%;   /* マップ内の縦位置（0%～100%） */
  left: 35%;  /* マップ内の横位置（0%～100%） */
}

/* 野球場の座標 */
.facility-nj003 {
	width: 6.5%;
	height: 6.5%;
  top: 15%;   /* マップ内の縦位置（0%～100%） */
  left: 38.2%;  /* マップ内の横位置（0%～100%） */
}

/* テニス・プールの座標 */
.facility-nj004 {
	width: 6.5%;
	height: 6.5%;
  top: 16.5%;   /* マップ内の縦位置（0%～100%） */
  left: 33.3%;  /* マップ内の横位置（0%～100%） */
}

/* 希望ヶ丘公園の座標 */
.facility-nj005 {
	width: 10%;
	height: 10%;
  top: 31.5%;   /* マップ内の縦位置（0%～100%） */
  left: 51%;  /* マップ内の横位置（0%～100%） */
}

/* 舞寿空市立図書館の座標 */
.facility-nj006 {
	width: 8%;
	height: 8%;
  top: 33%;   /* マップ内の縦位置（0%～100%） */
  left: 84%;  /* マップ内の横位置（0%～100%） */
}

/* 飛石川の座標 */
.facility-nj008 {
	width: 6%;
	height: 6%;
  top: 15%;   /* マップ内の縦位置（0%～100%） */
  left: 26.5%;  /* マップ内の横位置（0%～100%） */
}

/* 空翔の丘の座標 */
.facility-rh001 {
	width: 15%;
	height: 15%;
  top: 50%;   /* マップ内の縦位置（0%～100%） */
  left: 55%;  /* マップ内の横位置（0%～100%） */
}

/* 蘖の森の座標 */
.facility-rh002 {
	width: 15%;
	height: 15%;
  top: 57%;   /* マップ内の縦位置（0%～100%） */
  left: 26%;  /* マップ内の横位置（0%～100%） */
}

/* 蘖の森の座標 */
.facility-rh003 {
	width: 28%;
	height: 28%;
  top: 78%;   /* マップ内の縦位置（0%～100%） */
  left: 45%;  /* マップ内の横位置（0%～100%） */
}

/* 扉の座標 */
.facility-rh004 {
	width: 8%;
	height: 8%;
  top: 33%;   /* マップ内の縦位置（0%～100%） */
  left: 9%;  /* マップ内の横位置（0%～100%） */
}

/* Mascara Studioの座標 */
.facility-tb001 {
	width: 10%;
	height: 10%;
  top: 38%;   /* マップ内の縦位置（0%～100%） */
  left: 55%;  /* マップ内の横位置（0%～100%） */
}

/* Madhurikaの座標 */
.facility-tb002 {
	width: 6%;
	height: 6%;
  top: 38.5%;   /* マップ内の縦位置（0%～100%） */
  left: 88%;  /* マップ内の横位置（0%～100%） */
}

/* 舞寿空市営団地の座標 */
.facility-tb003 {
	width: 36%;
	height: 18%;
  top: 55%;   /* マップ内の縦位置（0%～100%） */
  left: 72%;  /* マップ内の横位置（0%～100%） */
}

/* 石碑の座標 */
.facility-tb005 {
	width: 6%;
	height: 6%;
  top: 78%;   /* マップ内の縦位置（0%～100%） */
  left: 95%;  /* マップ内の横位置（0%～100%） */
}

/* 天醒ヶ丘の座標 */
.facility-tb006 {
	width: 15%;
	height: 10%;
  top: 78%;   /* マップ内の縦位置（0%～100%） */
  left: 84%;  /* マップ内の横位置（0%～100%） */
}

/* 桜醒の道の座標 */
.facility-tb007 {
	width: 20%;
	height: 20%;
  top: 80%;   /* マップ内の縦位置（0%～100%） */
  left: 43.5%;  /* マップ内の横位置（0%～100%） */
}

/* Σの座標 */
.facility-tb008 {
	width: 6%;
	height: 6%;
  top: 55%;   /* マップ内の縦位置（0%～100%） */
  left: 29.5%;  /* マップ内の横位置（0%～100%） */
}

/* 若草児童公園の座標 */
.facility-tb009 {
	width: 6%;
	height: 6%;
  top: 55%;   /* マップ内の縦位置（0%～100%） */
  left: 50%;  /* マップ内の横位置（0%～100%） */
}

/* 風待ち台の座標 */
.facility-tb010 {
	width: 6%;
	height: 6%;
  top: 73%;   /* マップ内の縦位置（0%～100%） */
  left: 65%;  /* マップ内の横位置（0%～100%） */
}

/* 黄波野原の座標 */
.facility-kn001sf {
	width: 8%;
	height: 8%;
  top: 25%;   /* マップ内の縦位置（0%～100%） */
  left: 55%;  /* マップ内の横位置（0%～100%） */
}

/* 黄波野原の座標 */
.facility-kn001hh {
	width: 8%;
	height: 8%;
  top: 25%;   /* マップ内の縦位置（0%～100%） */
  left: 65%;  /* マップ内の横位置（0%～100%） */
}

/* 黄波野原フラワーパークの座標 */
.facility-kn002 {
	width: 20%;
	height: 20%;
  top: 50%;   /* マップ内の縦位置（0%～100%） */
  left: 78%;  /* マップ内の横位置（0%～100%） */
}

/* 黄波野駅の座標 */
.facility-kn003 {
	width: 8%;
	height: 8%;
  top: 51%;   /* マップ内の縦位置（0%～100%） */
  left: 91%;  /* マップ内の横位置（0%～100%） */
}

/* 映恋神社の座標 */
.facility-kn004 {
	width: 16%;
	height: 16%;
  top: 16%;   /* マップ内の縦位置（0%～100%） */
  left: 82%;  /* マップ内の横位置（0%～100%） */
}

/* Flor de Recuerdoの座標 */
.facility-kn005 {
	width: 8%;
	height: 8%;
  top: 50%;   /* マップ内の縦位置（0%～100%） */
  left: 62%;  /* マップ内の横位置（0%～100%） */
}

/* 白鷺浜の座標 */
.facility-sr001 {
	width: 24%;
	height: 6%;
  top: 3%;   /* マップ内の縦位置（0%～100%） */
  left: 80%;  /* マップ内の横位置（0%～100%） */
}

/* ベルレイクタウンの座標 */
/* Pickiesの座標 */
.facility-bel001 {
	width: 7%;
	height: 7%;
  top: 20%;   /* マップ内の縦位置（0%～100%） */
  left: 12%;  /* マップ内の横位置（0%～100%） */
}

/* Carameloの座標 */
.facility-bel002 {
	width: 7%;
	height: 7%;
  top: 55%;   /* マップ内の縦位置（0%～100%） */
  left: 15%;  /* マップ内の横位置（0%～100%） */
}

/* Dress codeの座標 */
.facility-bel003 {
	width: 7%;
	height: 7%;
  top: 74%;   /* マップ内の縦位置（0%～100%） */
  left: 27.5%;  /* マップ内の横位置（0%～100%） */
}

/* Roasterの座標 */
.facility-bel004 {
	width: 7%;
	height: 7%;
  top: 55%;   /* マップ内の縦位置（0%～100%） */
  left: 6%;  /* マップ内の横位置（0%～100%） */
}

/* にじパの座標 */
.facility-bel005 {
	width: 7%;
	height: 7%;
  top: 35%;   /* マップ内の縦位置（0%～100%） */
  left: 12%;  /* マップ内の横位置（0%～100%） */
}

/* Campanitaの座標 */
.facility-bel006 {
	width: 7%;
	height: 7%;
  top: 68%;   /* マップ内の縦位置（0%～100%） */
  left: 11.5%;  /* マップ内の横位置（0%～100%） */
}

/* マジカル☆オニオンの座標 */
.facility-bel007 {
	width: 7%;
	height: 7%;
  top: 8.5%;   /* マップ内の縦位置（0%～100%） */
  left: 31%;  /* マップ内の横位置（0%～100%） */
}

/*  mirameの座標 */
.facility-bel008 {
	width: 7%;
	height: 7%;
  top: 74%;   /* マップ内の縦位置（0%～100%） */
  left: 39%;  /* マップ内の横位置（0%～100%） */
}

/*  Plumaの座標 */
.facility-bel009 {
	width: 7%;
	height: 7%;
  top: 55%;   /* マップ内の縦位置（0%～100%） */
  left: 39%;  /* マップ内の横位置（0%～100%） */
}

/*  Aurora Phoneの座標 */
.facility-bel010 {
	width: 7%;
	height: 7%;
  top: 55%;   /* マップ内の縦位置（0%～100%） */
  left: 30%;  /* マップ内の横位置（0%～100%） */
}

/*  ベルレ出口の座標 */
.facility-belexit {
	width: 10%;
	height: 10%;
  top: 93%;   /* マップ内の縦位置（0%～100%） */
  left: 93%;  /* マップ内の横位置（0%～100%） */
}

/*  ベルレinfoロボの座標 */
.facility-belinfo {
	width: 10%;
	height: 10%;
  top: 93%;   /* マップ内の縦位置（0%～100%） */
  left: 80%;  /* マップ内の横位置（0%～100%） */
}
/*  白鷺町infoロボの座標 */
.facility-srinfo {
	width: 10%;
	height: 10%;
  top: 22%;   /* マップ内の縦位置（0%～100%） */
  left: 95%;  /* マップ内の横位置（0%～100%） */
}
/*  黄波野町infoロボの座標 */
.facility-kninfo {
	width: 10%;
	height: 10%;
  top: 45%;   /* マップ内の縦位置（0%～100%） */
  left: 48%;  /* マップ内の横位置（0%～100%） */
}
/*  虹ノ峰町infoロボの座標 */
.facility-njinfo {
	width: 10%;
	height: 10%;
  top: 15%;   /* マップ内の縦位置（0%～100%） */
  left: 18%;  /* マップ内の横位置（0%～100%） */
}
/*  翼町infoロボの座標 */
.facility-tbinfo {
	width: 10%;
	height: 10%;
  top: 36%;   /* マップ内の縦位置（0%～100%） */
  left: 31%;  /* マップ内の横位置（0%～100%） */
}
/*  鱒川町infoロボの座標 */
.facility-msinfo {
	width: 10%;
	height: 10%;
  top: 28%;   /* マップ内の縦位置（0%～100%） */
  left: 86%;  /* マップ内の横位置（0%～100%） */
}
/*  大空町infoロボの座標 */
.facility-ozinfo {
	width: 10%;
	height: 10%;
  top: 52%;   /* マップ内の縦位置（0%～100%） */
  left: 64%;  /* マップ内の横位置（0%～100%） */
}

/*  大空町出口の座標 */
.facility-ozexit {
	width: 10%;
	height: 10%;
  top: 95%;   /* マップ内の縦位置（0%～100%） */
  left: 5%;  /* マップ内の横位置（0%～100%） */
}
/*  鱒川町出口の座標 */
.facility-msexit {
	width: 10%;
	height: 10%;
  top: 95%;   /* マップ内の縦位置（0%～100%） */
  left: 5%;  /* マップ内の横位置（0%～100%） */
}
/*  虹ノ峰町出口の座標 */
.facility-njexit {
	width: 10%;
	height: 10%;
  top: 95%;   /* マップ内の縦位置（0%～100%） */
  left: 5%;  /* マップ内の横位置（0%～100%） */
}
/*  翼町出口の座標 */
.facility-tbexit {
	width: 10%;
	height: 10%;
  top: 95%;   /* マップ内の縦位置（0%～100%） */
  left: 5%;  /* マップ内の横位置（0%～100%） */
}
/*  黄波野町出口の座標 */
.facility-knexit {
	width: 10%;
	height: 10%;
  top: 95%;   /* マップ内の縦位置（0%～100%） */
  left: 5%;  /* マップ内の横位置（0%～100%） */
}
/*  白鷺町出口の座標 */
.facility-srexit {
	width: 10%;
	height: 10%;
  top: 95%;   /* マップ内の縦位置（0%～100%） */
  left: 5%;  /* マップ内の横位置（0%～100%） */
}

/* 大空町看板の座標 */
.facility-ol02 {
	width: 15%;
	height: 8%;
  top: 23%;   /* マップ内の縦位置（0%～100%） */
  left: 5%;  /* マップ内の横位置（0%～100%） */
}
.facility-ol03 {
	width: 15%;
	height: 8%;
  top: 95%;   /* マップ内の縦位置（0%～100%） */
  left: 40%;  /* マップ内の横位置（0%～100%） */
}
.facility-ol04 {
	width: 15%;
	height: 8%;
  top: 95%;   /* マップ内の縦位置（0%～100%） */
  left: 90%;  /* マップ内の横位置（0%～100%） */
}
.facility-ol05 {
	width: 15%;
	height: 8%;
  top: 2%;   /* マップ内の縦位置（0%～100%） */
  left: 20%;  /* マップ内の横位置（0%～100%） */
}
.facility-ol06 {
	width: 15%;
	height: 8%;
  top: 2%;   /* マップ内の縦位置（0%～100%） */
  left: 67%;  /* マップ内の横位置（0%～100%） */
}
.facility-ol07 {
	width: 23%;
	height: 10%;
  top: 60%;   /* マップ内の縦位置（0%～100%） */
  left: 12%;  /* マップ内の横位置（0%～100%） */
}

/* 鱒川町看板の座標 */
.facility-ml01 {
	width: 15%;
	height: 8%;
  top: 19%;   /* マップ内の縦位置（0%～100%） */
  left: 95%;  /* マップ内の横位置（0%～100%） */
}
.facility-ml03 {
	width: 15%;
	height: 8%;
  top: 97%;   /* マップ内の縦位置（0%～100%） */
  left: 83%;  /* マップ内の横位置（0%～100%） */
}
.facility-ml04 {
	width: 15%;
	height: 8%;
  top: 88%;   /* マップ内の縦位置（0%～100%） */
  left: 95%;  /* マップ内の横位置（0%～100%） */
}
.facility-ml05 {
	width: 15%;
	height: 8%;
  top: 10%;   /* マップ内の縦位置（0%～100%） */
  left: 17%;  /* マップ内の横位置（0%～100%） */
}

/* 虹ノ峰町の看板の座標 */
.facility-nl02 {
	width: 15%;
	height: 8%;
  top: 3%;   /* マップ内の縦位置（0%～100%） */
  left: 10%;  /* マップ内の横位置（0%～100%） */
}
.facility-nl04 {
	width: 15%;
	height: 8%;
  top: 9%;   /* マップ内の縦位置（0%～100%） */
  left: 95%;  /* マップ内の横位置（0%～100%） */
}

/* 翼町の看板の座標 */
.facility-tl01 {
	width: 15%;
	height: 8%;
  top: 16%;   /* マップ内の縦位置（0%～100%） */
  left: 33%;  /* マップ内の横位置（0%～100%） */
}
.facility-tl02 {
	width: 15%;
	height: 8%;
  top: 13%;   /* マップ内の縦位置（0%～100%） */
  left: 8%;  /* マップ内の横位置（0%～100%） */
}
.facility-tl03 {
	width: 15%;
	height: 8%;
  top: 48%;   /* マップ内の縦位置（0%～100%） */
  left: 6%;  /* マップ内の横位置（0%～100%） */
}
.facility-tl06 {
	width: 15%;
	height: 8%;
  top: 16%;   /* マップ内の縦位置（0%～100%） */
  left: 86%;  /* マップ内の横位置（0%～100%） */
}

/* 黄波野町の看板の座標 */
.facility-kl01 {
	width: 15%;
	height: 8%;
  top: 43%;   /* マップ内の縦位置（0%～100%） */
  left: 95%;  /* マップ内の横位置（0%～100%） */
}
.facility-kl02 {
	width: 15%;
	height: 8%;
  top: 95%;   /* マップ内の縦位置（0%～100%） */
  left: 85%;  /* マップ内の横位置（0%～100%） */
}
.facility-kl03 {
	width: 15%;
	height: 8%;
  top: 95%;   /* マップ内の縦位置（0%～100%） */
  left: 17%;  /* マップ内の横位置（0%～100%） */
}
.facility-kl06 {
	width: 15%;
	height: 8%;
  top: 32%;   /* マップ内の縦位置（0%～100%） */
  left: 95%;  /* マップ内の横位置（0%～100%） */
}

/* 白鷺町の看板の座標 */
.facility-sl01 {
	width: 15%;
	height: 8%;
  top: 89%;   /* マップ内の縦位置（0%～100%） */
  left: 38%;  /* マップ内の横位置（0%～100%） */
}
.facility-sl02 {
	width: 15%;
	height: 8%;
  top: 86%;   /* マップ内の縦位置（0%～100%） */
  left: 4%;  /* マップ内の横位置（0%～100%） */
}
.facility-sl04 {
	width: 15%;
	height: 8%;
  top: 96%;   /* マップ内の縦位置（0%～100%） */
  left: 80%;  /* マップ内の横位置（0%～100%） */
}
.facility-sl05 {
	width: 15%;
	height: 8%;
  top: 29%;   /* マップ内の縦位置（0%～100%） */
  left: 5%;  /* マップ内の横位置（0%～100%） */
}



.site-footer {
  text-align: center;
  padding: 0.75rem 0;
  font-size: 0.8rem;
}

/* ここでコピーライト文字を一括管理 */
.copyright::before {
  content: "© 2026 Mascara / 舞寿空市";
}

/* 全体マップの土台 */
.city-map {
  position: relative;
  display: inline-block;
}

/* 全体マップ画像 */
.city-map-image {
  display: block;
  max-width: 100%;
  height: auto;
}

/* マウスオーバーで少し強調 */
.facility-link:hover {
  transform: translate(-50%, -50%) scale(1.05);
  filter: brightness(1.1);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.8);
}


/* 看板共通 */
.town-marker {
  position: absolute;
  display: block;
  transform: translate(-50%, -50%); /* 中心基準にする */
  cursor: pointer;
  transition:
    transform 0.15s ease-out,
    filter 0.15s ease-out,
    box-shadow 0.15s ease-out;
}

.town-marker img {
  display: block;
  width: 100%;      /* 看板の表示サイズはお好みで */
  height: auto;
}

/* 鱒川町看板の位置（％で調整） */
.town-marker--masukawa {
  left: 25%;   /* マップ内のX位置（要調整） */
  top: 64%;    /* マップ内のY位置（要調整） */
  /* サイズ … 看板の横幅をマップの何％にするか */
  width: 18%;   /* → ここを 15% とか 12% とかに変えれば小さくなる */
}

/* 大空町看板の位置（％で調整） */
.town-marker--ozora {
  left: 65%;   /* マップ内のX位置（要調整） */
  top: 41%;    /* マップ内のY位置（要調整） */
  /* サイズ … 看板の横幅をマップの何％にするか */
  width: 18%;   /* → ここを 15% とか 12% とかに変えれば小さくなる */
}

/* 虹ノ峰町看板の位置（％で調整） */
.town-marker--nijinomine {
  left: 40%;   /* マップ内のX位置（要調整） */
  top: 82%;    /* マップ内のY位置（要調整） */
  /* サイズ … 看板の横幅をマップの何％にするか */
  width: 18%;   /* → ここを 15% とか 12% とかに変えれば小さくなる */
}

/* 翼町看板の位置（％で調整） */
.town-marker--tsubasa {
  left: 65%;   /* マップ内のX位置（要調整） */
  top: 72%;    /* マップ内のY位置（要調整） */
  /* サイズ … 看板の横幅をマップの何％にするか */
  width: 18%;   /* → ここを 15% とか 12% とかに変えれば小さくなる */
}

/* 黄波野町看板の位置（％で調整） */
.town-marker--kinamino {
  left: 25%;   /* マップ内のX位置（要調整） */
  top: 15%;    /* マップ内のY位置（要調整） */
  /* サイズ … 看板の横幅をマップの何％にするか */
  width: 18%;   /* → ここを 15% とか 12% とかに変えれば小さくなる */
}

/* 白鷺町看板の位置（％で調整） */
.town-marker--shirasagi {
  left: 75%;   /* マップ内のX位置（要調整） */
  top: 6%;    /* マップ内のY位置（要調整） */
  /* サイズ … 看板の横幅をマップの何％にするか */
  width: 18%;   /* → ここを 15% とか 12% とかに変えれば小さくなる */
}


/* マウスオーバーで少し強調 */
.town-marker:hover {
  transform: translate(-50%, -50%) scale(1.05);
  filter: brightness(1.1);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.8);
}