@charset "UTF-8";
:root {
  --preset--fontfamiry: "Noto Sans JP", sans-serif;
  --preset--fontweight--regular: 400;
  --preset--fontweight--semibold: 600; /* やや太め */
  --preset--fontweight--bold: 700; /* 太め */
  --preset--fontsize--XXs: 10px;
  --preset--fontsize--Xs: 12px;
  --preset--fontsize--Xs--sp: 12px; /* sp時変更 */
  --preset--fontsize--S: 13px;
  --preset--fontsize--M: 14px;
  --preset--fontsize--default: 15px;
  --preset--fontsize--L: 16px;
  --preset--fontsize--Xl: 18px;
  --preset--fontsize--XXl: 20px;
  --preset--color--white: #ffffff; /* 白 */
  --preset--color--dark--gray: #afaaaf; /* 濃いめグレー */
  --preset--color--cat--all: #505050; /* カテゴリー すべて */
  --preset--color--cat--shopping: #f07814; /* カテゴリー ショッピング */
  --preset--color--cat--gourmet: #ff4150; /* カテゴリー グルメ */
  --preset--color--cat--sightseeing: #009688; /* カテゴリー 観光 */
  --preset--color--cat--stay: #1e73ff; /* カテゴリー 宿泊 */
  --preset--color--cat--activity: #ff5ac3; /* カテゴリー 体験 */
  --preset--color--cat--event: #7d32e6; /* カテゴリー イベント */
  --preset--color--cat--general: #969696; /* カテゴリー 汎用 */
  --preset--color--line: #dcdcdc; /* 線の色 */
  --preset--color--line--dark: #c8c8c8; /* 濃いめ */
  --preset--color--bg: #f0f0f0; /* 背景の色 */
  --preset--aspect--ratio: 4 / 3;
  --preset--shadow: 0px 0px 5px rgb(0 0 0 / 30%);
  --preset--radius--Xs: 5px;
  --preset--radius--S: 10px;
  --preset--radius--M: 15px;
  --preset--radius--L: 30px;
  --preset--padding--side: 20px; /* サイドパネル用padding */
  --preset--padding--side--2: 25px; /* サイドパネル用padding 上下*/
  --preset--lineheight--low: 1.2;
  --preset--lineheight--high: 1.7;
  --slide--num: 9; /* 下部メニュー表示ジャンル数 */
  --custom--color--main: #2d64d7; /* ベースのカラー設定 */
  --popup--width--1: 106.5px;
  --popup--width--2: 90px;
  --popup--width--2--sp: 80px;
}

/* 画面幅が599px以下 */
@media (max-width: 599px) {
  :root {
    --preset--fontsize--Xs--sp: 14px;
    --preset--padding--side--2: 15px;
    --preset--lineheight--high: 1.5;
  }
}
body {
  font-family: var(--preset--fontfamiry);
}

/*==========================================================================
  パネル設定
==========================================================================*/
/* --------------------------------------------------
  下部パネル設定 
---------------------------------------------------*/
#select-panel-wrapper {
  z-index: 2010;
}

/*------------------------------
　メインジャンル、サブジャンルパネル共通
------------------------------*/
.bottomPanel {
  width: 100%;
  /*max-width: calc(var(--slide--num) * 70px + (var(--slide--num) - 1) * 10px + 70px);  ★花火大会専用 2026/06まで */
  max-width: calc((var(--slide--num) - 1) * 70px + 90px + (var(--slide--num) - 1) * 10px + 70px); /* ★花火大会専用 */
  background-color: var(--preset--color--white);
  border-radius: var(--preset--radius--L) var(--preset--radius--L) 0 0;
  box-shadow: var(--preset--shadow);
  padding: 8px 30px;
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 0);
}

@media (max-width: 599px) {
  .bottomPanel {
    width: 100%;
    border-radius: var(--preset--radius--S) var(--preset--radius--S) 0 0;
    padding: 4px 0 0 0;
  }
}
.bottomPanel_sub {
  z-index: 2030;
}

/* --------------------------------------------------
  サイドパネル設定 ※検索パネル、詳細情報パネル共通
---------------------------------------------------*/
/* サイドパネル設定 */
.sidePanel {
  width: 400px;
  overflow: hidden;
  background-color: var(--preset--color--white);
  position: absolute;
  top: 0;
  box-shadow: var(--preset--shadow);
}

/* サイドパネルスクロール設定 */
.sidePanel_scroll {
  overflow-y: scroll;
  padding-bottom: 50px;
}

/* サイドパネル内ブロック */
.sidePanel-container {
  padding-left: var(--preset--padding--side);
  padding-right: var(--preset--padding--side);
  padding-top: var(--preset--padding--side--2);
  padding-bottom: var(--preset--padding--side--2);
}

/* サイドパネル内ブロック ライン有*/
.sidePanel-container.line {
  border-top: solid 1px var(--preset--color--line);
}

/* サイドパネル内ブロック */
.sidePanel-container-low {
  padding-left: var(--preset--padding--side);
  padding-right: var(--preset--padding--side);
  padding-top: 15px;
  padding-bottom: var(--preset--padding--side--2);
}

/* サイドパネル内ブロック */
.sidePanel-container-side {
  padding-left: var(--preset--padding--side);
  padding-right: var(--preset--padding--side);
}

/* サイドパネル内閉じるボタン */
.sidePanel-close {
  position: absolute;
  top: 7px;
  right: 10px;
  z-index: 5;
}

@media (max-width: 599px) {
  /* サイドパネル設定 */
  .sidePanel {
    width: 100%;
    height: auto;
    background-color: transparent;
    box-shadow: unset;
    bottom: 0;
  }
  /* サイドパネル設定 SP時背景白*/
  .sidePanel-inner {
    background-color: var(--preset--color--white);
    border-radius: var(--preset--radius--S) var(--preset--radius--S) 0 0;
    padding: 30px 0 8px 0;
    box-shadow: var(--preset--shadow);
    position: relative;
    margin-top: 30px;
  }
  /* サイドパネル内閉じるボタン */
  .sidePanel-close {
    top: -20px;
  }
}
/* --------------------------------------------------
  パネルハンドル　※SP時
---------------------------------------------------*/
.panelHandle {
  display: none;
}

@media (max-width: 599px) {
  panelHandle {
    display: block;
    width: 100%;
    height: 30px;
    position: absolute;
    top: 0;
    left: 0;
  }
  .panelHandle::after {
    content: "";
    display: block;
    width: 40px;
    height: 7px;
    border-radius: 100vh;
    background-color: #dcdcdc;
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
  }
}
/*==========================================================================
  スライダー（ジャンル選択）設定
==========================================================================*/
/* -------------------------------------------------
  スライダー（ジャンル選択）
---------------------------------------------------*/
.pslider {
  width: 100%;
  overflow: hidden;
}

/* 
.pslider.pslider_small 付与で、文字とアイコン小さめになる（検索ジャンル内用）
両方共に下部にスタイル記載　
*/
.pslider_category {
  cursor: pointer;
}

/* ------------------------------
  カテゴリー（ジャンル）ボタン設定
---------------------------------*/
/* カテゴリーボタン */
.category_button {
  width: 70px;
  height: 90px;
  padding-top: 10px;
  position: relative;
  cursor: pointer;
}

@media (max-width: 599px) {
  .category_button {
    width: 65px;
    height: 85px;
  }
  .category_button:first-child {
    margin-left: 10px;
  }
  .category_button:last-child {
    margin-right: 10px;
  }
}
/* HOVER時　※上に移動 */
@media (hover: hover) and (pointer: fine) {
  .category_button:hover .category_icon {
    transform: translateY(-10px);
  }
}
/* メインカテゴリーボタン 上にサブジャンルアイコン表示 ※矢印アイコン */
.category_button.icon_sub::after {
  content: "";
  display: block;
  width: 20px;
  height: 10px;
  border: solid 1px var(--preset--color--line);
  border-radius: 100vh;
  background-color: var(--preset--color--white);
  background-image: url(../img/icon_arr_2.svg);
  background-repeat: no-repeat;
  background-size: 7px 4px;
  background-position: center;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

/*------------------------------ 観光意匠用設定START */
/* カテゴリーアイコン */
.category_icon {
  width: 45px;
  height: 45px;
  background-size: 45px;
  margin-left: auto;
  margin-right: auto;
  transform: translateY(0);
  transition: transform 0.2s;
}

@media (max-width: 599px) {
  .category_icon {
    width: 40px;
    height: 40px;
    background-size: 40px;
  }
}
/* アイコン画像指定 */
.category_icon_search {
  background-image: url(../img/icon_category_search.svg);
} /* 検索 */
.category_icon_all {
  background-image: url(../img/icon_category_all.svg);
} /* すべて */
.category_icon_back {
  background-image: url(../img/icon_category_back.svg);
} /* 戻る */
/* メインジャンル */
.category_icon_shopping.icon_shopping {
  background-image: url(../img/icon_category_shopping.svg);
} /* ショッピング */
.category_icon_gourmet.icon_gourmet {
  background-image: url(../img/icon_category_gourmet.svg);
} /* グルメ */
.category_icon_sightseeing.icon_sightseeing {
  background-image: url(../img/icon_category_sightseeing.svg);
} /* 観光 */
.category_icon_stay.icon_stay {
  background-image: url(../img/icon_category_stay.svg);
} /* 宿泊 */
.category_icon_activity.icon_activity {
  background-image: url(../img/icon_category_activity.svg);
} /* 体験 */
.category_icon_event.icon_event {
  background-image: url(../img/icon_category_event.svg);
} /* イベント */
.category_icon_general.icon_modelcourse {
  background-image: url(../img/icon_category_modelcourse.svg);
} /* モデルコース */
.category_icon_general.icon_coupon {
  background-image: url(../img/icon_category_coupon.svg);
} /* クーポン */
/* サブジャンル */
.category_icon_gourmet.icon_japanesefood {
  background-image: url(../img/icon_category_japanesefood.svg);
} /* 和食 */
.category_icon_gourmet.icon_westernfood {
  background-image: url(../img/icon_category_westernfood.svg);
} /* 洋食 */
.category_icon_gourmet.icon_chinesefood {
  background-image: url(../img/icon_category_chinesefood.svg);
} /* 中華 */
.category_icon_gourmet.icon_snacks {
  background-image: url(../img/icon_category_snacks.svg);
} /* 軽食 */
/* 検索アイコン上部に矢印アイコン設定 */
.category_icon_search {
  position: relative;
}

.category_icon_search::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-bottom: 7px solid rgb(230, 230, 230);
  border-right: 7px solid transparent;
  border-left: 7px solid transparent;
  position: absolute;
  top: -7px;
  left: 50%;
  transform: translateX(-50%);
}

/* ------------------------------
  SELECTED表示　※チェックマーク表示
---------------------------------*/
.category_button.selected .category_icon::after {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: solid 2px var(--preset--color--white);
  background-image: url(../img/icon_checkmark.svg);
  background-repeat: no-repeat;
  background-size: 10px 8px;
  background-position: center;
  position: absolute;
  bottom: 0;
  left: -3px;
}

/* チェックマークがついた際の色 */
.category_icon_all::after {
  background-color: var(--preset--color--cat--all);
} /* すべて */
.category_icon_shopping::after {
  background-color: var(--preset--color--cat--shopping);
} /* ショッピング */
.category_icon_gourmet::after {
  background-color: var(--preset--color--cat--gourmet);
} /* グルメ */
.category_icon_sightseeing::after {
  background-color: var(--preset--color--cat--sightseeing);
} /* 観光 */
.category_icon_stay::after {
  background-color: var(--preset--color--cat--stay);
} /* 宿泊 */
.category_icon_activity::after {
  background-color: var(--preset--color--cat--activity);
} /* 体験 */
.category_icon_event::after {
  background-color: var(--preset--color--cat--event);
} /* イベント */
.category_icon_general::after {
  background-color: var(--preset--color--cat--general);
} /* 汎用 */
/*------------------------------ 観光意匠用設定END */
/* カテゴリー名 */
.category_name {
  font-size: var(--preset--fontsize--Xs);
  font-weight: var(--preset--fontweight--semibold);
  text-align: center;
  line-height: var(--preset--lineheight--low);
  margin-top: 5px;
  overflow: hidden; /* 行数でカット設定 */
  display: -webkit-box; /* 行数でカット設定 */
  -webkit-box-orient: vertical; /* 行数でカット設定 */
  -webkit-line-clamp: 2; /* 行数を指定 */
}

/* カテゴリー名長めの場合、カーニングつめる */
.category_name.narrow {
  letter-spacing: -1.5px;
}

@media (max-width: 599px) {
  .category_name {
    font-size: var(--preset--fontsize--XXs);
  }
  .category_name.narrow {
    letter-spacing: 0;
  }
}
/* --------------------------------------------------
  両サイド矢印
---------------------------------------------------*/
/* 矢印アイコンの背景 */
.pslider_nav, .pslider_nav_in {
  width: 30px;
  height: 30px;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  box-shadow: var(--preset--shadow);
  position: absolute;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
}

.pslider_nav_in {
  width: 24px;
  height: 24px;
}

/* 矢印アイコンの設定 */
.pslider_nav::after, .pslider_nav_in::after {
  content: "";
  display: block;
  width: 6px;
  height: 10px;
  background-image: url(../img/icon_arr.svg);
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 5;
}

/* ------------------------------
  矢印の位置（外側に出る）
---------------------------------*/
/* 左矢印 向き */
.pslider_nav.prev {
  left: -12px;
}

.pslider_nav.prev::after {
  transform: translateX(-50%) translateY(-50%) scale(-1, 1);
}

/* 右矢印 向き */
.pslider_nav.next {
  right: -12px;
}

.pslider_nav.next::after {
  transform: translateX(-50%) translateY(-50%);
}

@media (max-width: 599px) {
  .pslider_nav {
    width: 50px;
    height: 50px;
  }
  .pslider_nav.prev {
    left: -25px; /* 左矢印 */
  }
  .pslider_nav.prev::after {
    transform: translateX(calc(-50% + 8px)) translateY(-50%) scale(-1, 1);
  }
  .pslider_nav.next {
    right: -25px; /* 右矢印 */
  }
  .pslider_nav.next::after {
    transform: translateX(calc(-50% - 5px)) translateY(-50%);
  }
}
/* ------------------------------
  矢印の位置（内側に入る※写真スライダー用）
---------------------------------*/
/* 左矢印 向き */
.pslider_nav_in.prev {
  left: 8px;
}

.pslider_nav_in.prev::after {
  transform: translateX(-50%) translateY(-50%) scale(-1, 1);
}

/* 右矢印 向き */
.pslider_nav_in.next {
  right: 8px;
}

.pslider_nav_in.next::after {
  transform: translateX(-50%) translateY(-50%);
}

/* ------------------------------
  小さめ設定
---------------------------------*/
/* カテゴリー（ジャンル）ボタン */
.pslider.pslider_small .category_button {
  width: 65px;
}

/* ジャンルアイコン */
.pslider.pslider_small .category_icon {
  width: 40px;
  height: 40px;
  background-size: 40px;
}

/* ジャンル名 */
.pslider.pslider_small .category_name {
  font-size: var(--preset--fontsize--XXs);
}

/* ジャンル名長めの場合、カーニングつめる */
.pslider.pslider_small .category_name.narrow {
  letter-spacing: 0;
}

/* スライダー矢印 */
.pslider.pslider_small + .pslider_nav,
.pslider.pslider_small + .pslider_nav + .pslider_nav {
  width: 50px;
  height: 50px;
}

/* スライダー左矢印 */
.pslider.pslider_small + .pslider_nav {
  left: -25px;
}

.pslider.pslider_small + .pslider_nav::after {
  transform: translateX(7px) translateY(-50%) scale(-1, 1);
}

/* スライダー右矢印 */
.pslider.pslider_small + .pslider_nav + .pslider_nav {
  right: -25px;
}

.pslider.pslider_small + .pslider_nav + .pslider_nav::after {
  transform: translateX(-12px) translateY(-50%);
}

/*==========================================================================
  ★★★　ここから　花火大会専用　★★★  	
  スライダー（ジャンル選択）設定  
==========================================================================*/
/* 2026/06まで 自治体専用アイコン * /
/ *  花火  * /
.category_icon_all.ex {
  background-image: url(../img/icon_category_all_02.svg);
} / *  すべて  * /
.category_icon_general.icon_firework {
  background-image: url(../img/icon_category_firework.svg);
} / *  花火  * /
.category_icon_general.icon_seat {
  background-image: url(../img/icon_category_seat.svg);
} / *  観覧席  * /
.category_icon_general.icon_toilet {
  background-image: url(../img/icon_category_toilet.svg);
} / *  トイレ  * /
.category_icon_general.icon_carstop {
  background-image: url(../img/icon_category_carstop.svg);
} / *  交通規制  * /
*/


/* 自治体専用アイコン*/
/* すべて */
.category_icon_all.ex {
  background-image: url(../img/icon_event_category_all.svg);
}

/* 花火 */
.category_icon_general.icon_firework {
  background-image: url(../img/icon_event_category_firework.svg);
}

/* 観覧席 */
.category_icon_general.icon_seat {
  background-image: url(../img/icon_event_category_seat.svg);
}

/* 観覧席受付 */
.category_icon_general.icon_reception {
  background-image: url(../img/icon_event_category_reception.svg);
}

/* 大会本部・総合案内 */
.category_icon_general.icon_information {
  background-image: url(../img/icon_event_category_information.svg);
}

/* 当日券販売所 */
.category_icon_general.icon_ticket {
  background-image: url(../img/icon_event_category_ticket.svg);
}

/* エリアゲート */
.category_icon_general.icon_areagate {
  background-image: url(../img/icon_event_category_areagate.svg);
}

/* 撮影エリア */
.category_icon_general.icon_cameraok {
  background-image: url(../img/icon_event_category_cameraok.svg);
}

/* 物産会場・露店 */
.category_icon_general.icon_stall {
  background-image: url(../img/icon_event_category_stall.svg);
}

/* トイレ */
.category_icon_general.icon_toilet {
  background-image: url(../img/icon_event_category_toilet.svg);
}

/* ゴミ箱 */
.category_icon_general.icon_trashcan {
  background-image: url(../img/icon_event_category_trashcan.svg);
}

/* 駐車場 */
.category_icon_general.icon_parking {
  background-image: url(../img/icon_event_category_parking.svg);
}

/* 交通規制 */
.category_icon_general.icon_carstop {
  background-image: url(../img/icon_event_category_carstop.svg);
}

/* 駐輪場（レンタルサイクル） */
.category_icon_general.icon_cycle {
  background-image: url(../img/icon_event_category_cycle.svg);
}

/* 注意 */
.category_icon_general.icon_caution {
  background-image: url(../img/icon_event_category_caution.svg);
}

/* 道路規制矢印 */
.category_icon_general.icon_regulation {
  background-image: url(../img/icon_event_category_regulation.svg);
}

/* 迂回路･関係者専用通路 ※特別 */
.category_icon_general.icon_special {
  background-image: url(../img/icon_event_category_special.svg);
}

/* 臨時バス */
.category_icon_general.icon_busstop {
  background-image: url(../img/icon_event_category_busstop.svg);
}

/* ------------------------------
  カテゴリー（ジャンル）ボタン設定 
  ロゴ用
---------------------------------*/
.category_button_logo {
  width: 90px;
  height: 90px;
  padding-top: 5px;
  position: relative;
  cursor: pointer;
}

@media (max-width: 599px) {
  .category_button_logo {
    width: 85px;
    height: 85px;
  }
  .category_button:first-child {
    margin-left: 10px;
  }
  .category_button:last-child {
    margin-right: 10px;
  }
}
.category_icon_logo {
  width: 80px;
  height: 80px;
  background-image: url(../img/logo_firework.png);
  background-size: contain;
  margin-left: auto;
  margin-right: auto;
  transform: translateY(0);
  transition: transform 0.2s;
}

@media (max-width: 599px) {
  .category_icon_logo {
    width: 70px;
    height: 70px;
    margin-left: 10px;
  }
}
/* HOVER時　※上に移動 */
@media (hover: hover) and (pointer: fine) {
  .category_button_logo:hover .category_icon_logo {
    transform: translateY(-5px);
  }
}
/* ------------------------------
　ロゴポップアップ 
---------------------------------*/
/* ポップアップ枠 */
.category_popup_logo {
  display: none;
  border-radius: var(--preset--radius--M) var(--preset--radius--M) 0 0;
  background-color: var(--preset--color--white);
  padding: 10px;
  box-shadow: 0px -2px 3px rgba(0, 0, 0, 0.2);
  position: absolute;
  z-index: 2;
  transform: translate(calc(-50% - 10px), calc(-100% + 25px));
}

@media (max-width: 599px) {
  .category_popup_logo {
    transform: translate(0, -100%);
  }
}
.category_popup_logo_inner {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 80px;
}

@media (max-width: 599px) {
  .category_popup_logo_inner {
    width: 60px;
    height: 60px;
  }
}
.category_popup_logo_inner img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/*==========================================================================
  ★★★　ここまで　花火大会専用　★★★  
==========================================================================*/
/*==========================================================================
  ボタン設定
==========================================================================*/
/* ボタン共通設定 */
.cbutton {
  display: inline-block;
  text-decoration: none;
  border-radius: 100vh;
  text-align: center;
  cursor: pointer;
  opacity: 1;
  transition: opacity 0.5s;
}

/* HOVER時 */
@media (hover: hover) and (pointer: fine) {
  .cbutton:hover {
    opacity: 0.5;
  }
}
/*------------------------------
　ボタン設定 カラー
------------------------------*/
/* 枠線：白、文字色：白 */
.cbutton.line_wh {
  color: var(--preset--color--white);
  border: solid 1px var(--preset--color--white);
}

/* 背景：白、文字色：黒 */
.cbutton.wh {
  background-color: var(--preset--color--white);
  border: solid 1px var(--preset--color--line);
}

/* 枠線：テーマカラー、文字色：テーマカラー　※カラー変更対象 */
.cbutton.line_thema {
  color: var(--custom--color--main);
  border: solid 1px var(--custom--color--main);
}

/* 背景：テーマカラー、文字色：白　※カラー変更対象 */
.cbutton.thema {
  color: var(--preset--color--white);
  background-color: var(--custom--color--main);
}

/*-------------------------------
　ボタン設定 フォントサイズ
------------------------------*/
/* 小さめ */
.cbutton.ftS {
  font-size: var(--preset--fontsize--Xs--sp); /* 12px →　SP14px */
}

.cbutton.ftM {
  font-size: var(--preset--fontsize--M); /* 14px */
}

/*-------------------------------
　ボタン設定 サイズ
------------------------------*/
/* 小さめ */
.cbutton.sizeFit {
  padding-left: 0.5em;
  padding-right: 0.5em;
}

/* 普通 */
.cbutton.sizeFitM {
  padding: 0.4em 1.25em;
}

/* 大きめ */
.cbutton.sizeFitL {
  padding: 0.6em 1.6em;
}

/* ページングなどの数字 */
.cbutton.sizeNum {
  padding: 0.2em 0.8em;
}

/* MAX */
.cbutton.sizeMax {
  width: 100%;
}

/*-------------------------------
　クローズボタン設定
------------------------------*/
/* サイドバー閉じるボタン */
.cbutton_close {
  width: 30px;
  height: 30px;
  display: block;
  background-color: var(--preset--color--dark--gray);
  background-image: url(../img/icon_close.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px;
  border: solid 2px var(--preset--color--white);
  border-radius: 50%;
  cursor: pointer;
}

@media (max-width: 599px) {
  .cbutton_close {
    width: 40px;
    height: 40px;
  }
}
/*==========================================================================
  スクロールバー設定
==========================================================================*/
.scrollbar::-webkit-scrollbar {
  width: 5px;
  height: 5px;
  background-color: var(--preset--color--bg);
}

.scrollbar::-webkit-scrollbar-thumb {
  background-color: var(--preset--color--dark--gray);
}

/* firefox設定 */
@-moz-document url-prefix() {
  .scrollbar {
    scrollbar-width: thin;
    scrollbar-color: var(--preset--color--dark--gray) var(--preset--color--bg);
  }
}
/*==========================================================================
  LOADING
==========================================================================*/
.loading_wrap {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--preset--color--white);
  opacity: 1;
  transition: opacity 3s;
  z-index: 9999;
}

/* -----------------------------
  LOAD完了
--------------------------------*/
.loading_wrap.active {
  animation-name: loadAnime1;
  animation-duration: 0.5s;
  animation-delay: 1s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

.loading_wrap.active .loadimg_group {
  animation-name: loadAnime2;
  animation-duration: 0.5s;
  animation-delay: 0.5s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

/* -----------------------------
  LOAD完了 アニメーション
--------------------------------*/
@keyframes loadAnime1 {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    pointer-events: none;
  }
}
@keyframes loadAnime2 {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/* -----------------------------
  LOADING パーツ(四角）
--------------------------------*/
.loadimg_group {
  width: 45px;
  height: 45px;
  position: relative;
  opacity: 1;
}

.loadimg1, .loadimg2, .loadimg3, .loadimg4 {
  width: 15px;
  height: 15px;
  background-color: var(--custom--color--main);
  position: absolute;
}

.loadimg1 {
  left: 0;
  top: 0;
  animation: rotate1 2s infinite;
}

.loadimg2 {
  left: 30px;
  top: 0px;
  animation: rotate2 2s infinite;
}

.loadimg3 {
  left: 30px;
  top: 30px;
  animation: rotate3 2s infinite;
}

.loadimg4 {
  left: 0;
  top: 30px;
  animation: rotate4 2s infinite;
}

/* -----------------------------
  LOADING アニメーション
--------------------------------*/
@keyframes rotate1 {
  0% {
    transform: translate(0px, 0px);
  }
  25% {
    transform: translate(30px, 0px) scale(0.5);
  }
  50% {
    transform: translate(30px, 30px);
  }
  75% {
    transform: translate(0px, 30px);
  }
  100% {
    transform: translate(0px, 0px);
  }
}
@keyframes rotate2 {
  0% {
    transform: translate(0px, 0px);
  }
  25% {
    transform: translate(0px, 30px);
  }
  50% {
    transform: translate(-30px, 30px) scale(0.5);
  }
  75% {
    transform: translate(-30px, 0px);
  }
  100% {
    transform: translate(0px, 0px);
  }
}
@keyframes rotate3 {
  0% {
    transform: translate(0px, 0px);
  }
  25% {
    transform: translate(-30px, 0px);
  }
  50% {
    transform: translate(-30px, -30px);
  }
  75% {
    transform: translate(0px, -30px) scale(0.5);
  }
  100% {
    transform: translate(0px, 0px);
  }
}
@keyframes rotate4 {
  0% {
    transform: translate(0px, 0px) scale(0.5);
  }
  25% {
    transform: translate(0px, -30px);
  }
  50% {
    transform: translate(30px, -30px);
  }
  75% {
    transform: translate(30px, 0px);
  }
  100% {
    transform: translate(0px, 0px) scale(0.5);
  }
}
/*==========================================================================
  地図マーカー設定（地図ピン）
==========================================================================*/
/* --------------------------------------------------
  地図マーカー（ピン）設定
---------------------------------------------------*/
/* アイコン、吹き出し、クラスタ数字　グループ */
.cmarker-wraps {
  width: 0;
  height: 0;
  position: relative;
}

/* アイコン */
.cmarker {
  width: 66px;
  height: 70px;
  background-repeat: no-repeat;
  background-size: contain;
  transform: translateX(-50%) translateY(-70px) scale(100%);
  transform-origin: center bottom;
  transition: transform 0.3s;
  position: relative;
  cursor: pointer;
}

.cmarker_subGenre {
  width: 66px;
  height: 70px;
  background-repeat: no-repeat;
  background-size: contain;
  transform: translateX(-50%) translateY(-55px) scale(100%);
  transform-origin: center bottom;
  transition: transform 0.3s;
  position: relative;
  cursor: pointer;
}

/* HOVER時 */
@media (hover: hover) {
  .cmarker:hover {
    transform: translateX(-50%) translateY(-69px) scale(120%);
    transform-origin: center bottom;
  }
}
/* 観光意匠用アイコン画像 */
.cmarker_gourmet {
  background-image: url(../img/marker_gourmet.svg);
} /* グルメ */
.cmarker_shopping {
  background-image: url(../img/marker_shopping.svg);
} /* ショッピング */
.cmarker_sightseeing {
  background-image: url(../img/marker_sightseeing.svg);
} /* 観光*/
.cmarker_stay {
  background-image: url(../img/marker_stay.svg);
} /* 宿泊 */
.cmarker_activity {
  background-image: url(../img/marker_activity.svg);
} /* 体験 */
.cmarker_event {
  background-image: url(../img/marker_event.svg);
} /* イベント */
.cmarker_general {
  background-image: url(../img/marker_general.svg);
} /* 汎用*/
.cmarker_cluster {
  background-image: url(../img/marker_cluster.svg);
} /* クラスター */
/* 写真有り　------------*/
/* アイコン内に写真 */
.cmarker_photo {
  position: absolute;
  top: 13px;
  left: 12px;
}

.cmarker_photo img {
  width: 42px;
  height: 42px;
  aspect-ratio: var(--preset--aspect-ratio);
  object-fit: cover;
  border-radius: 50%;
}

/* 写真無し　------------*/
/* アイコン内にnoimage(ジャンルアイコン） */
.cmarker_photo_noimage {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background-color: var(--preset--color--white);
  background-repeat: no-repeat;
  background-size: 34px;
  background-position: 4px 3px;
  position: absolute;
  top: 13px;
  left: 12px;
}

.cmarker_gourmet .cmarker_photo_noimage {
  background-image: url(../img/icon_category_gourmet.svg);
} /* グルメ */
.cmarker_shopping .cmarker_photo_noimage {
  background-image: url(../img/icon_category_shopping.svg);
} /* ショッピング */
.cmarker_sightseeing .cmarker_photo_noimage {
  background-image: url(../img/icon_category_sightseeing.svg);
} /* 観光 */
.cmarker_stay .cmarker_photo_noimage {
  background-image: url(../img/icon_category_stay.svg);
} /* 宿泊 */
.cmarker_activity .cmarker_photo_noimage {
  background-image: url(../img/icon_category_activity.svg);
} /* 体験 */
.cmarker_event .cmarker_photo_noimage {
  background-image: url(../img/icon_category_event.svg);
} /* イベント */
.cmarker_cluster .cmarker_photo_noimage {
  background-image: url(../img/icon_cluster_noimage.svg);
} /* クラスター */
/* 汎用 */
.cmarker_general .cmarker_photo_noimage.noimage_modelcourse {
  background-image: url(../img/icon_category_modelcourse.svg);
} /* モデルコース */
.cmarker_general .cmarker_photo_noimage.noimage_coupon {
  background-image: url(../img/icon_category_coupon.svg);
} /* クーポン */
/* マーカー 数字 */
.cmarker_num {
  min-width: 20px;
  display: inline-block;
  font-size: var(--preset--fontsize--Xs);
  text-align: center;
  background-color: rgba(255, 255, 255, 0.95);
  border-radius: var(--preset--radius--Xs);
  box-shadow: var(--preset--shadow);
  position: absolute;
  right: 2px;
  top: 0px;
}

/* マーカー 名称 */
.cmarker_name {
  max-width: 150px;
  overflow: hidden;
  display: inline-block;
  font-size: var(--preset--fontsize--XXs);
  font-weight: var(--preset--fontweight--semibold);
  background-color: rgba(255, 255, 255, 0.95);
  border-radius: var(--preset--radius--Xs);
  box-shadow: var(--preset--shadow);
  padding-left: 5px;
  padding-right: 5px;
  white-space: nowrap;
  transform: translateX(-50%);
  position: absolute;
  left: 0;
  top: 0;
  text-overflow: ellipsis;
}

/* HOVER時 */
@media (hover: hover) {
  .cmarker:hover + .cmarker_name {
    max-width: none;
    overflow: initial;
  }
}
/*-------------------------------
　選択時
------------------------------*/
/* 選択時 ふわふわアニメ */
.cmarker-wraps.selected .cmarker {
  animation: marker_anime 1.5s ease-in-out infinite;
}

/* 選択時は文字全て表示 */
.cmarker-wraps.selected .cmarker_name {
  max-width: none;
  overflow: initial;
}

@keyframes marker_anime {
  0% {
    transform: translateX(-50%) translateY(-69px) scale(1);
  }
  50% {
    transform: translateX(-50%) translateY(-80px) scale(1);
  }
  100% {
    transform: translateX(-50%) translateY(-69px) scale(1);
  }
}
/*==========================================================================
  ★★★　ここから　花火大会専用　★★★ 
  地図マーカー設定（地図ピン）    
==========================================================================*/
/* sample_pin ※ピンを表示されるようだけのためです。削除でOK*/
.sample_pin {
  width: 100%;
  max-width: 900px;
  height: 300px;
  position: absolute;
  top: 90px;
  left: 90px;
  z-index: 10;
}

.sample_pin > div:nth-of-type(1) {
  transform: translate(0px, 10px);
}

.sample_pin > div:nth-of-type(2) {
  transform: translate(150px, 10px);
}

.sample_pin > div:nth-of-type(3) {
  transform: translate(300px, 10px);
}

.sample_pin > div:nth-of-type(4) {
  transform: translate(0px, 160px);
}

.sample_pin > div:nth-of-type(5) {
  transform: translate(150px, 160px);
}

.sample_pin > div:nth-of-type(6) {
  transform: translate(0px, 310px);
}

.sample_pin > div:nth-of-type(7) {
  transform: translate(150px, 310px);
}

.sample_pin > div:nth-of-type(8) {
  transform: translate(300px, 310px);
}

/* ここまで削除でOK */
/* --------------------------------------------------
  地図マーカー（ピン）設定
---------------------------------------------------*/
/* 花火大会専用 */
.cmarker_general.ex {
  background-image: url(../img/marker_general_02.svg);
} /* 全てのジャンル*/

/* 仕様外のサブジャンル専用 */
.cmarker_subGenre.ex {
  background-image: url(../img/marker_traffic.svg);
} /* */

/* 写真無し　------------*/
/* アイコン内にnoimage(ジャンルアイコン） ※交通規制除く */
.cmarker_photo_noimage_firework {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background-repeat: no-repeat;
  background-size: 50px;
  background-position: -5px -4px;
  position: absolute;
  top: 13px;
  left: 12px;
}

/* 2026/06まで
.cmarker_photo_noimage_firework.noimage_firework {
  background-image: url(../img/icon_category_firework_02.svg);
}

.cmarker_general.ex .cmarker_photo_noimage.noimage_seat {
  background-image: url(../img/icon_category_seat.svg);
} / *  観覧席  * /
.cmarker_general.ex .cmarker_photo_noimage.noimage_toilet {
  background-image: url(../img/icon_category_toilet.svg);
} / *  トイレ  * /
*/



/* 観覧席 */
.cmarker_general.ex .cmarker_photo_noimage.noimage_seat {
  background-image: url(../img/icon_event_category_seat.svg);
}

/* 観覧席受付 */
.cmarker_general.ex .cmarker_photo_noimage.noimage_reception {
  background-image: url(../img/icon_event_category_reception.svg);
}

/* 大会本部･総合案内 */
.cmarker_general.ex .cmarker_photo_noimage.noimage_information {
  background-image: url(../img/icon_event_category_information.svg);
}

/* 当日券販売所 */
.cmarker_general.ex .cmarker_photo_noimage.noimage_ticket {
  background-image: url(../img/icon_event_category_ticket.svg);
}

/* エリアゲート */
.cmarker_general.ex .cmarker_photo_noimage.noimage_areagate {
  background-image: url(../img/icon_event_category_areagate.svg);
}

/* 撮影エリア */
.cmarker_general.ex .cmarker_photo_noimage.noimage_cameraok {
  background-image: url(../img/icon_event_category_cameraok.svg);
}

/* 物産会場･露店 */
.cmarker_general.ex .cmarker_photo_noimage.noimage_stall {
  background-image: url(../img/icon_event_category_stall.svg);
}

/* トイレ */
.cmarker_general.ex .cmarker_photo_noimage.noimage_toilet {
  background-image: url(../img/icon_event_category_toilet.svg);
}

/* ゴミ箱 */
.cmarker_general.ex .cmarker_photo_noimage.noimage_trashcan {
  background-image: url(../img/icon_event_category_trashcan.svg);
}

/* 駐車場 */
.cmarker_general.ex .cmarker_photo_noimage.noimage_parking {
  background-image: url(../img/icon_event_category_parking.svg);
}

/* 駐輪場 */
.cmarker_general.ex .cmarker_photo_noimage.noimage_cycle {
  background-image: url(../img/icon_event_category_cycle.svg);
}

/* 注意 */
.cmarker_general.ex .cmarker_photo_noimage.noimage_caution {
  background-image: url(../img/icon_event_category_caution.svg);
}

/* 道路規制矢印 */
.cmarker_general.ex .cmarker_photo_noimage.noimage_regulation {
  background-image: url(../img/icon_event_category_regulation.svg);
}

/* 迂回路･関係者専用通路 ※特別 */
.cmarker_general.ex .cmarker_photo_noimage.noimage_special {
  background-image: url(../img/icon_event_category_special.svg);
}

/* 喫煙所 */
.cmarker_general.ex .cmarker_photo_noimage.noimage_smoking {
  background-image: url(../img/icon_event_category_smoking.svg);
}


/* --------------------------------------------------
  地図マーカー（ピン）設定 ※花火大会
---------------------------------------------------*/
/* 打上会場ピン */
.cmarkerFirework {
  width: 90px;
  height: 97px;
  background-repeat: no-repeat;
  background-size: contain;
  transform: translateX(-50%) translateY(-96px) scale(100%);
  transform-origin: center bottom;
  transition: transform 0.3s;
  position: relative;
  cursor: pointer;
}

/* HOVER時 */
@media (hover: hover) {
  .cmarkerFirework:hover {
    transform: translateX(-50%) translateY(-96px) scale(120%);
    transform-origin: center bottom;
  }
}
.cmarker_firework {
  background-image: url(../img/marker_firework.svg);
}

/* 打上会場名称 */
.cmarkerFirework_name {
  max-width: 150px;
  overflow: hidden;
  display: inline-block;
  font-size: var(--preset--fontsize--Xs);
  font-weight: var(--preset--fontweight--semibold);
  border-radius: var(--preset--radius--Xs);
  background-color: rgba(255, 255, 255, 0.95);
  box-shadow: var(--preset--shadow);
  padding-left: 5px;
  padding-right: 5px;
  white-space: nowrap;
  transform: translateX(-50%);
  position: absolute;
  left: 0;
  top: 0;
  text-overflow: ellipsis;
}

/* HOVER時 */
@media (hover: hover) {
  .cmarkerFirework:hover + .cmarkerFirework_name {
    max-width: none;
    overflow: initial;
  }
}
/* 写真有り　------------*/
/* アイコン内に写真 */
.cmarkerFirework_photo {
  position: absolute;
  top: 16px;
  left: 16px;
}

.cmarkerFirework_photo img {
  width: 59px;
  height: 59px;
  aspect-ratio: var(--preset--aspect-ratio);
  object-fit: cover;
  border-radius: 50%;
}

/* 写真無し　------------*/
/* アイコン内にnoimage(ジャンルアイコン） */
.cmarkerFirework_photo_noimage {
  width: 59px;
  height: 59px;
  border-radius: 50%;
  background-repeat: no-repeat;
  background-size: 58px;
  background-position: 0px 0px;
  position: absolute;
  top: 16px;
  left: 16px;
}

.cmarkerFirework_photo_noimage.noimage_firework {
  background-image: url(../img/icon_category_firework_02.svg);
}

/* 選択時 ふわふわアニメ */
.cmarker-wraps.selected .cmarkerFirework {
  animation: marker_anime_firework 1.5s ease-in-out infinite;
}

@keyframes marker_anime_firework {
  0% {
    transform: translateX(-50%) translateY(-97px) scale(1);
  }
  50% {
    transform: translateX(-50%) translateY(-113px) scale(1);
  }
  100% {
    transform: translateX(-50%) translateY(-97px) scale(1);
  }
}

/* --------------------------------------------------
  地図マーカー（ピン）設定 ※交通規制等　小さめサイズ
---------------------------------------------------*/
/* 個別設定共通 */
.cmarker_original {
  background-repeat: no-repeat;
  background-size: contain;
  transform: translateX(-50%) translateY(-100%) scale(100%);
  transform-origin: center bottom;
  transition: transform 0.3s;
  position: relative;
  cursor: pointer;
}


/* 交通規制 */
.cmarker_carstop {
  width: 44px;
  height: 46px;
  background-image: url(../img/marker_event_carstop.svg);
}

/* 駐車場 */
.cmarker_parking {
  width: 44px;
  height: 46px;
  background-image: url(../img/marker_event_parking.svg);
}

/* 注意 */
.cmarker_caution {
  width: 44px;
  height: 43px;
  background-image: url(../img/marker_event_caution.svg);
}

/* 迂回路･関係者専用通路 ※特別 */
.cmarker_special {
  width: 42px;
  height: 50px;
  background-image: url(../img/marker_event_special.svg);
}

/* バス停 */
.cmarker_busstop {
  width: 31px;
  height: 52px;
  background-image: url(../img/marker_event_busstop.svg);
}

/* 専用バス停 */
.cmarker_exbusstop {
  width: 31px;
  height: 52px;
  background-image: url(../img/marker_event_exbusstop.svg);
}

/* HOVER時 個別設定共通*/
@media (hover: hover) {
  .cmarker_original:hover {
    transform: translateX(-50%) translateY(-100%) scale(120%);
    transform-origin: center bottom;
  }
  .cmarker_original:hover + .cmarker_name {
    max-width: none;
    overflow: initial;
  }
}
/* 選択時 ふわふわアニメ */
.cmarker-wraps.selected .cmarker_original {
  animation: marker_anime_original 1.5s ease-in-out infinite;
}

@keyframes marker_anime_original {
  0% {
    transform: translateX(-50%) translateY(-100%) scale(1);
  }
  50% {
    transform: translateX(-50%) translateY(calc(-100% - 8px)) scale(1);
  }
  100% {
    transform: translateX(-50%) translateY(-100%) scale(1);
  }
}/*==========================================================================
  ★★★　ここまで　花火大会専用　★★★  
==========================================================================*/
/*==========================================================================
  フォーム系設定
==========================================================================*/
/* 入力枠リセット */
.cfminput {
  display: block;
  padding: 5px 15px;
  font-family: var(--preset--fontfamiry);
  font-weight: var(--preset--fontweight--regular);
}

/* 入力枠フォーカスリセット */
.cfminput:focus {
  background-color: transparent;
  border: none;
  outline: 0;
}

/* ボタンリセット */
.cfmbutton {
  border: none;
  outline: none;
  padding: 0;
  background-color: transparent;
  cursor: pointer;
}

/*==========================================================================
  テキスト設定
==========================================================================*/
/* 文字やや太め */
.csemibold {
  font-weight: var(--preset--fontweight--semibold);
}

/* 文字太め */
.cbold {
  font-weight: var(--preset--fontweight--bold);
}

/* テキスト + アイコン脇余白 */
.cfa {
  margin-left: 5px;
}

/*******************************
/ * ==========================================================================
  マップコントロールパネル設定（旧地図操作ボタン）
========================================================================== * /
.旧mapControlPanel {
  --button--line--color: #f0f0f0;
  --button--margin--S--top: 8px;
  --button--margin--M--top: 17px;
  --button--margin--S--right: 0; / *  landscape  * /
  --button--margin--M--right: 0; / *  landscape  * /
  text-align: center;
  position: absolute;
  right: 50px;
  top: 20px;
  z-index: 2000;
}

@media (orientation: landscape) and (max-height: 450px) {
  .旧mapControlPanel {
    --button--margin--S--top: 0;
    --button--margin--M--top: 0;
    --button--margin--S--right: 8px;
    --button--margin--M--right: 17px;
    display: flex;
    flex-direction: row-reverse;
  }
}
/ *  スタイルリセット  * /
.旧mapControlPanel button {
  display: inline-block;
  outline: none;
  padding: 0;
  cursor: pointer;
}
*******************************/

/*==========================================================================
  マップコントロールパネル設定（地図操作ボタン）
==========================================================================*/
.mapControlPanel {
  --button--line--color: #f0f0f0;
  --button--margin--S--top: 8px;
  --button--margin--M--top: 14px;
  --button--margin--S--right: 0; /* height 500px; */
  --button--margin--M--right: 0; /* height 500px; */
  text-align: center;
  position: absolute;
  /* スクロールバー対策
  right: 10px;
  */
  right: 16px;
  top: 10px;
  z-index: 2000;
}

/* スクロールバー対策 */
@media (max-width: 599px) {
  .mapControlPanel {
    right: 10px; 
  }
}

@media (max-height: 500px) {
  .mapControlPanel {
    --button--margin--S--top: 0;
    --button--margin--M--top: 0;
    --button--margin--S--right: 8px;
    --button--margin--M--right: 14px;
    display: flex;
    flex-direction: row-reverse;
  }
}
/* スタイルリセット */
.mapControlPanel button {
  display: inline-block;
  outline: none;
  padding: 0;
  cursor: pointer;
}

/*-------------------------------------------------
　ボタン設定
--------------------------------------------------*/
/* ボタン共通設定（拡縮除く） */
.mcb {
  background-size: contain;
  border-radius: 50%;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
}

/************************************
/ * ------------------------------
　旧ボタン設定 サイズ
------------------------------ * /
/ *  パネル内  * /
.旧mcb.旧sizeM {
  width: 40px;
  height: 40px;
}

/ *  パネル外  * /
.旧mcb.旧sizeL {
  width: 50px;
  height: 50px;
}
************************************/

/*------------------------------
　ボタン設定 サイズ
------------------------------*/
/* パネル内 */
.mcb.sizeM {
  width: 34px;
  height: 34px;
}

/* パネル外 */
.mcb.sizeL {
  width: 40px;
  height: 40px;
}

/*------------------------------
　ボタン設定 スタイル
------------------------------*/
/* 背景：白、枠線：薄いグレー */
.mcb.wh {
  background-color: rgba(255, 255, 255, 0.95);
  border: solid 3px var(--button--line--color);
}

/* 背景：グレー */
.mcb.gray {
  background-color: rgba(180, 180, 180, 0.95);
  border: solid 3px var(--button--line--color);
}

/* HOVER時 */
@media (hover: hover) and (pointer: fine) {
  .mcb:hover.wh {
    background-color: var(--preset--color--bg);
  }
}
/* 選択時 */
.mcb.selected.wh {
  border-color: var(--custom--color--main);
}

/*******************************************
/ *  -----------------------------
  旧吹き出し　ボタン
-------------------------------- * /
/ *  ボタンと吹き出しグループ  * /
.mapControl_group {
  position: relative;
}
.mapControl_group.mgS {
  margin-top: var(--button--margin--S--top);
  margin-right: var(--button--margin--S--right);
}
.mapControl_group.mgM {
  margin-top: var(--button--margin--M--top);
  margin-right: var(--button--margin--M--right);
}

/ *  HOVER時　※ボタンに乗ったら吹き出し表示  * /
@media (hover: hover) and (pointer: fine) {
  .mapControl_popup_btn:hover + .mapControl_popup_msg {
    display: block;
  }
}
/ *  吹き出し  * /
.mapControl_popup_msg {
  display: none;
  max-width: 150px;
  font-size: var(--preset--fontsize--S);
  color: var(--preset--color--white);
  text-align: left;
  background-color: rgba(0, 0, 0, 0.8);
  border-radius: 15px;
  padding: 8px 10px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

@media (orientation: landscape) and (max-height: 450px) {
  .mapControl_popup_msg {
    display: none;
  }
}
.mapControl_popup_msg::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-left: 5px solid rgba(0, 0, 0, 0.8);
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  position: absolute;
  top: 50%;
  right: -5px;
  transform: translateY(-50%);
}
*******************************************/
/* -----------------------------
  吹き出し　ボタン
--------------------------------*/
/* ボタンと吹き出しグループ */
.mapControl_group {
  position: relative;
}
.mapControl_group.mgS {
  margin-top: var(--button--margin--S--top);
  margin-right: var(--button--margin--S--right);
}
.mapControl_group.mgM {
  margin-top: var(--button--margin--M--top);
  margin-right: var(--button--margin--M--right);
}

/* HOVER時　※ボタンに乗ったら吹き出し表示 */
@media (hover: hover) and (pointer: fine) and (min-height: 501px) {
  .mapControl_popup_btn:hover + .mapControl_popup_msg {
    display: block;
  }
}
/* 吹き出し */
.mapControl_popup {
  position: absolute;
  top: 0;
  left: 0;
  /* スクロールバー対策
  width: 150px;
  */
  pointer-events: none;
}

@media (max-height: 500px) {
  .mapControl_popup {
    display: none;
  }
}
.mapControl_popup_msg {
  display: inline-block;
  max-width: 150px;
  font-size: var(--preset--fontsize--S);
  color: var(--preset--color--white);
  text-align: left;
  background-color: rgba(0, 0, 0, 0.8);
  border-radius: 15px;
  padding: 8px 10px;
  position: absolute;
  opacity: 0;
  transform: translateY(-50%) translateX(-100%);
  transition: opacity 0.2s ease, transform 0.2s ease;
  width: max-content; /* スクロールバー対策 */
}

.mapControl_popup_msg::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-left: 5px solid rgba(0, 0, 0, 0.8);
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  position: absolute;
  top: 50%;
  right: -5px;
  transform: translateY(-50%);
}

.mapControl_popup_msg.active {
  opacity: 1;
}


/* -----------------------------
  現在地　ボタン
--------------------------------*/
.mapControl_location {
  background-color: var(--custom--color--main);
  background-image: url(../img/map_control_location.svg);
  border: solid 3px var(--preset--color--white);
}

/* -----------------------------
  パネル開閉ボタン
--------------------------------*/
/* OFF */
.mapControl_open {
  background-color: rgba(255, 255, 255, 0.95);
  background-image: url(../img/map_control_off.svg);
  border: solid 3px var(--button--line--color);
}

/* OFF HOVER時 */
@media (hover: hover) and (pointer: fine) {
  .mapControl_open:hover {
    background-color: var(--preset--color--bg);
  }
}
/* ON */
.mapControl_open.active {
  background-color: rgba(0, 0, 0, 0.95);
  background-image: url(../img/map_control_on.svg);
  border-color: rgba(0, 0, 0, 0.95);
}

/*************************************

/ *  -----------------------------
  旧パネル
-------------------------------- * /
/ *  ボタンパネル　※デフォルトは非表示 * /
.mcb-panel {
  width: 42px;
  height: 0;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  transition: height 0.5s;
}

@media (orientation: landscape) and (max-height: 450px) {
  .mcb-panel {
    width: 0;
    height: 42px;
    display: flex;
    flex-direction: row-reverse;
    transition: none;
  }
}
.mcb-panel.active {
  height: 255px;
}

/ *  transition 終了後　visible  * /
.mcb-panel.overflow_visible {
  overflow: visible;
}

@media (orientation: landscape) and (max-height: 450px) {
  .mcb-panel.active {
    width: 255px;
    height: 42px;
  }
}
/ *  -----------------------------
  拡縮ボタン
-------------------------------- * /
.mapControl-scale {
  width: 40px;
  height: 80px;
  background-color: var(--preset--color--white);
  border: solid 3px var(--button--line--color);
  border-radius: 100vh;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
  margin-top: var(--button--margin--M--top);
  margin-right: var(--button--margin--M--right);
  position: relative;
}

@media (orientation: landscape) and (max-height: 450px) {
  .mapControl-scale {
    width: 80px;
    height: 40px;
  }
}
/ *  拡大ボタン、縮小ボタン共通  * /
.mapControl-scale_plus-wrap, .mapControl-scale_minus-wrap {
  width: 36px;
  height: 37px;
  position: absolute;
  left: 0;
}

.mapControl-scale_plus,
.mapControl-scale_minus {
  width: 36px;
  height: 37px;
  background-color: transparent;
  background-size: contain;
  border: none;
}

/ *  拡大ボタン  * /
.mapControl-scale_plus-wrap {
  top: 0;
}

@media (orientation: landscape) and (max-height: 450px) {
  .mapControl-scale_scale_plus-wrap {
    left: 0;
  }
}
.mapControl-scale_plus {
  background-image: url(../img/map_control_plus.svg);
  border-radius: 100vh 100vh 0 0;
}

@media (orientation: landscape) and (max-height: 450px) {
  .mapControl-scale_plus {
    border-radius: 100vh 0 0 100vh;
    left: 0;
  }
}
/ *  縮小ボタン  * /
.mapControl-scale_minus-wrap {
  bottom: 0;
}

@media (orientation: landscape) and (max-height: 450px) {
  .mapControl-scale_minus-wrap {
    right: 0;
    top: 0;
    left: auto;
    bottom: auto;
  }
}
.mapControl-scale_minus {
  background-image: url(../img/map_control_minus.svg);
  border-radius: 0 0 100vh 100vh;
}

@media (orientation: landscape) and (max-height: 450px) {
  .mapControl-scale_minus {
    border-radius: 0 100vh 100vh 0;
  }
}
/ *  HOVER時  * /
@media (hover: hover) and (pointer: fine) {
  .mapControl-scale_plus:hover,
  .mapControl-scale_minus:hover {
    background-color: var(--preset--color--bg);
  }
}
/ *  -----------------------------
  リセット、回転、傾き、標高　ボタン
-------------------------------- * /
/ *  リセットボタン  * /
.mapControl_reset {
  background-image: url(../img/map_control_reset.svg);
}

/ *  回転ボタン  * /
.mapControl_rotate {
  background-image: url(../img/map_control_rotate.svg);
}

/ *  標高ボタン  * /
.mapControl_elevation {
  background-image: url(../img/map_control_elevation.svg);
}
*************************************/

/* -----------------------------
  パネル
--------------------------------*/
/* ボタンパネル　※デフォルトは非表示*/
.mcbPanelWrap {
  position: relative;
}

@media (max-height: 500px) {
  .mcbPanelWrap {
    display: flex;
    flex-direction: row-reverse;
  }
}
.mcb-panel {
  width: 0px;
  height: 0px;
  margin-left: auto;
  margin-right: auto;
  -webkit-clip-path: inset(0 0 100% 0);
  clip-path: inset(0 0 100% 0); /* 下を隠す */
  transition: clip-path 0.6s ease;
}

@media (max-height: 500px) {
  .mcb-panel {
    display: flex;
    flex-direction: row-reverse;
    -webkit-clip-path: inset(0 0 0 100%);
    clip-path: inset(0 0 0 100%); /* 左を隠す */
  }
}
.mcb-panel.active {
  width: auto;
  height: auto;
  clip-path: inset(0 0 0 0);
}

.mcb-panel.nonactive {
  width: auto;
  height: auto;
}

/* transition 終了後　visible */
.mcb-panel.overflow_visible {
  overflow: visible;
}

/* -----------------------------
  拡縮ボタン
--------------------------------*/
.mapControl-scale {
  width: 34px;
  height: 68px;
  background-color: var(--preset--color--white);
  border: solid 3px var(--button--line--color);
  border-radius: 100vh;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
  margin-top: var(--button--margin--M--top);
  margin-right: var(--button--margin--M--right);
  position: relative;
  left: 2px;
}

@media (max-height: 500px) {
  .mapControl-scale {
    width: 68px;
    height: 34px;
  }
}
/* 拡大ボタン、縮小ボタン共通 */
.mapControl-scale_plus-wrap, .mapControl-scale_minus-wrap {
  width: 28px;
  height: 31px;
  position: absolute;
  left: 0;
}

@media (max-height: 500px) {
  .mapControl-scale_plus-wrap, .mapControl-scale_minus-wrap {
    width: 31px;
    height: 28px;
  }
}
.mapControl-scale_plus,
.mapControl-scale_minus {
  width: 28px;
  height: 31px;
  background-color: transparent;
  background-size: contain;
  border: none;
}

@media (max-height: 500px) {
  .mapControl-scale_plus,
  .mapControl-scale_minus {
    width: 31px;
    height: 28px;
  }
}
/* 拡大ボタン */
.mapControl-scale_plus-wrap {
  top: 0;
}

.mapControl-scale_plus {
  background-image: url(../img/map_control_plus.svg);
  border-radius: 100vh 100vh 0 0;
}

@media (max-height: 500px) {
  .mapControl-scale_plus {
    border-radius: 100vh 0 0 100vh;
  }
}
/* 縮小ボタン */
.mapControl-scale_minus-wrap {
  bottom: 0;
}

@media (max-height: 500px) {
  .mapControl-scale_minus-wrap {
    right: 0;
    top: 0;
    left: auto;
    bottom: auto;
  }
}
.mapControl-scale_minus {
  background-image: url(../img/map_control_minus.svg);
  border-radius: 0 0 100vh 100vh;
}

@media (max-height: 500px) {
  .mapControl-scale_minus {
    border-radius: 0 100vh 100vh 0;
  }
}
/* HOVER時 */
@media (hover: hover) and (pointer: fine) {
  .mapControl-scale_plus:hover,
  .mapControl-scale_minus:hover {
    background-color: var(--preset--color--bg);
  }
}
/* -----------------------------
  リセット、回転、傾き、標高　ボタン
--------------------------------*/
/* リセットボタン */
.mapControl_reset {
  background-image: url(../img/map_control_reset.svg);
}

/* 回転ボタン */
.mapControl_rotate {
  background-image: url(../img/map_control_rotate.svg);
}

/* 標高ボタン */
.mapControl_elevation {
  background-image: url(../img/map_control_elevation.svg);
}

/* インフォメーションボタン */
.mapControl_info {
  background-image: url(../img/map_control_info.svg);
}

/*==========================================================================
  GRAYER
==========================================================================*/
.grayer {
  display: none;
  width: 100%;
  height: 100vh;
  background-color: rgba(255, 255, 255, 0.5);
  position: fixed;
  left: 0;
  top: 0;
  z-index: 3000;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

/*==========================================================================
  詳細情報パネル
==========================================================================*/
.infoPanel {
  z-index: 2040;
}

/*-------------------------------
　スライダー
------------------------------*/
.infoPanel-slider {
  width: 100%;
  position: relative;
}

@media (max-width: 599px) {
  .infoPanel-slider {
    padding-left: var(--preset--padding--side);
    padding-right: var(--preset--padding--side);
  }
}
.infoPanel-slider-swiper {
  aspect-ratio: var(--preset--aspect--ratio);
  overflow: hidden;
  position: relative;
}

@media (max-width: 599px) {
  .infoPanel-slider-swiper {
    border-radius: var(--preset--radius--M);
  }
}
.infoPanel_slide {
  background-color: var(--preset--color--bg);
}

.infoPanel_slide img {
  width: 100%;
  aspect-ratio: var(--preset--aspect--ratio);
  object-fit: contain;
}

/*-------------------------------
　カテゴリー名、スポット名、
------------------------------*/
/* カテゴリー名 */
.infoSpot_cat {
  font-size: var(--preset--fontsize--Xs);
}

.infoSpot_cat svg {
  margin-right: 5px;
  position: relative;
  top: -1px;
}

.infoSpot_cat_svgcls {
  fill: none;
  stroke: var(--custom--color--main);
  stroke-miterlimit: 10;
  stroke-width: 1px;
}

/* スポット名 */
.infoSpot_name {
  font-size: var(--preset--fontsize--XXl);
  margin-top: 0.3em;
}

/* 地図表示、ルート検索ボタン群 */
.infoSpot_mapbutton {
  margin-top: 0.8em;
}

.infoSpot_mapbutton > *:first-child {
  margin-right: 8px;
}

/* 地図表示、ルート検索ボタン */
.infoSpot_mapbutton_map::before,
.infoSpot_mapbutton_root::before {
  content: "";
  display: inline-block;
  background-repeat: no-repeat;
  background-size: contain;
}

/* 地図表示アイコン */
.infoSpot_mapbutton_map::before {
  width: 12px;
  height: 10px;
  background-image: url(../img/icon_map.svg);
  margin-right: 5px;
}

/* ルート検索アイコン */
.infoSpot_mapbutton_root::before {
  width: 14px;
  height: 13px;
  background-image: url(../img/icon_root.svg);
  margin-right: 5px;
}

/* スポット 説明 */
.infoSpot_desc {
  font-size: var(--preset--fontsize--default);
  line-height: var(--preset--lineheight--high);
  margin-top: 0.6em;
  overflow: hidden; /* 行数でカット設定 */
  display: -webkit-box; /* 行数でカット設定 */
  -webkit-box-orient: vertical; /* 行数でカット設定 */
  -webkit-line-clamp: 3; /* 行数を指定 */
}

/* スポット 説明　開く */
.infoSpot_desc.active {
  overflow: visible;
  display: block;
}

/* 続きを読むボタン */
.infoSpot-more {
  text-align: center;
  margin-top: 1.5em;
}

.infoSpot-more svg {
  position: relative;
  top: -1px;
  margin-right: 5px;
}

.infoSpot-more_svgcls, .infoSpot-more_svgcls2 {
  fill: none;
  stroke: var(--custom--color--main);
  stroke-width: 1px;
}

.infoSpot-more_svgcls {
  stroke-linecap: round;
  stroke-linejoin: round;
}

.infoSpot-more_svgcls2 {
  stroke-miterlimit: 10;
}

/*------------------------------
　スポット情報（表組）
------------------------------*/
.infoSpot-tbl {
  border: solid 1px var(--preset--color--line);
  border-radius: var(--preset--radius--S);
  margin-top: 40px;
}

/* スポット情報一覧 横並び */
.infoSpot-tbl_row {
  display: flex;
  border-top: dotted 1px var(--preset--color--line);
  padding: 15px 20px;
  margin-bottom: 0;
}

@media (max-width: 599px) {
  .infoSpot-tbl_row {
    padding-top: 10px;
    padding-bottom: 10px;
  }
}
.infoSpot-tbl_row:first-child {
  border-top: none;
  padding-top: 20px;
}

@media (max-width: 599px) {
  .infoSpot-tbl_row:first-child {
    border-top: dotted 1px var(--preset--color--line);
  }
}
.infoSpot-tbl_row:last-child {
  padding-bottom: 20px;
}

/* スポット情報一覧 項目 */
.infoSpot-tbl_row .item {
  width: 100px;
  font-size: var(--preset--fontsize--Xs);
  font-weight: var(--preset--fontweight--semibold);
}

/* スポット情報一覧 内容 */
.infoSpot-tbl_row .cnt {
  font-size: var(--preset--fontsize--Xs--sp);
  flex: 1;
  overflow-wrap: anywhere;
  margin-bottom: 0;
}

/*------------------------------
  外部リンク、クーポン、シェア一式
------------------------------*/
/* 外部リンク、クーポン */
.infoSpot-secondarybutton {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}

.infoSpot-secondarybutton a:nth-of-type(1) {
  margin-right: 15px;
}

/* シェアボタン群 */
.infoSpot-share_title {		 
    font-weight: bold;		 
    font-size: 14px;		 
    margin-bottom: 0px; /* ボタンとの間隔 */ 		 
    color: #333;        /* 文字色 */ 		 
    padding-left: 40px;   /* 必要に応じて位置調整 */ 		 
}		 

.infoSpot-share {
  font-size: var(--preset--fontsize--Xs);
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  /* margin-top: 30px; */
}

/* シェアボタン アイコン*/
.infoSpot-share_icon {
  height: 3em;
  display: flex;
  justify-content: center;
  align-items: center;
}

.infoSpot-share_icon_thema {
  color: var(--custom--color--main);
}

.infoSpot-share_icon-line {
  color: #06c052;
}

.infoSpot-share_button {
  width: 80px;
  text-align: center;
  margin-bottom: 20px;
  cursor: pointer;
}

/* シェアボタン アイコン名*/
.infoSpot-share_button span {
  display: block;
  text-align: center;
  margin-top: 3px;
}