@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: 12; /* 下部メニュー表示ジャンル数 */
  --custom--color--main: #2d64d7; /* ベースのカラー設定 */
  --custom--color--sakaimachi: rgba(1 , 115 , 185, 100%); /* 境町のカラー設定 */
}

/* 画面幅が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;
}

/*
#course-panel {
	z-index: 2020;
}*/
/*------------------------------
　メインジャンル、サブジャンルパネル共通
------------------------------*/
.bottomPanel {
  width: 100%;
  max-width: calc(var(--slide--num) * 70px + (var(--slide--num) - 1) * 10px + 90px); /* ★境町通常専用 */
  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%);
}

/*==========================================================================
  ★★★　ここから　境町 通常専用　★★★ 
  スライダー（ジャンル選択）設定
==========================================================================*/
/* ------------------------------
  カテゴリー（ジャンル）ボタン設定
---------------------------------*/
/* カテゴリーボタンに境界線追加 */
.category_button.category_button_line1::after {
  content: "";
  display: block;
  width: 3px;
  height: 78px;
  position: absolute;
  background-image: url(../img/line_category.svg);
  background-repeat: no-repeat;
  background-size: contain;
  top: 7px;
  right: -10px;
  z-index: 1;
}

/* カテゴリーアイコン */
/* 境町 通常専用 */
.category_icon_area {
  background-image: url(../img/icon_category_area.svg);
} /* ふるさと納税 */
.category_icon_general.icon_furusato {
  background-image: url(../img/icon_category_furusato.svg);
} /* ふるさと納税 */
.category_icon_general.icon_bus_root {
  background-image: url(../img/icon_category_bus_root.svg);
} /* 自動運転バスルート */
.category_icon_general.icon_bus_auto {
  background-image: url(../img/icon_category_bus_auto.svg);
} /* バス停（自動） */
.category_icon_general.icon_bus {
  background-image: url(../img/icon_category_bus.svg);
} /* バス停（通常） */
/* カテゴリー名 ※地区のみスタイル付与 */
.category_name .area_name {
  display: inline-block;
  color: #34569f;
  background-color: #d4e8ff;
  border-radius: 3px;
  padding: 2px 3px 3px;
}

/* カテゴリーポップアップ */
/* ポップアップ枠 */
.category_popup {
  display: none;
  border: solid 1px var(--preset--color--line--dark);
  border-radius: var(--preset--radius--S);
  background-color: var(--preset--color--bg);
  padding: 10px;
  position: absolute;
  z-index: 2;
  transform: translate(calc(-50% - 10px), calc(-100% + 25px));
}

@media (max-width: 599px) {
  .category_popup {
    transform: translate(0, calc(-100% + 25px));
  }
}
@media (orientation: landscape) and (max-height: 450px) {
  .category_popup {
    width: 300px;
    transform: translate(-20px, calc(-100% + 25px));
  }
}
/* ポップアップリスト */
.category_popup ul {
  padding-left: 0;
  margin-bottom: 0;
}

@media (orientation: landscape) and (max-height: 450px) {
  .category_popup ul {
    display: flex;
    flex-wrap: wrap;
    border-top: solid 1px var(--preset--color--line--dark);
    border-left: solid 1px var(--preset--color--line--dark);
  }
}
.category_popup ul li {
  list-style: none;
  border-top: solid 1px var(--preset--color--line--dark);
}

@media (orientation: landscape) and (max-height: 450px) {
  .category_popup ul li {
    width: 33.3333333333%;
    border-right: solid 1px var(--preset--color--line--dark);
    border-top: none;
    border-bottom: solid 1px var(--preset--color--line--dark);
  }
}
.category_popup ul li:first-child {
  border-top: none;
}

.category_popup ul li:first-child button {
  border-radius: var(--preset--radius--Xs) var(--preset--radius--Xs) 0 0;
}

.category_popup ul li:last-child button {
  border-radius: 0 0 var(--preset--radius--Xs) var(--preset--radius--Xs);
}

/* ポップアップリスト内ボタン */
.category_popup ul li button {
  display: block;
  width: 100%;
  font-size: var(--preset--fontsize--S);
  color: #000;
  text-align: left;
  background-color: var(--preset--color--white);
  padding: 0.5em 1.5em 0.5em 1em;
  opacity: 1;
  transition: opacity 0.5s;
}

@media (hover: hover) and (pointer: fine) {
  .category_popup ul li button:hover {
    opacity: 0.3;
  }
}
/* 選択中 */
.category_popup ul li button.selected {
  color: #34569f;
  font-weight: bold;
  background-color: #d4e8ff;
}

/*==========================================================================
  ★★★　ここまで　境町 通常専用　★★★  
==========================================================================*/
/*==========================================================================
  ボタン設定
==========================================================================*/
/* ボタン共通設定 */
.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;
}

/* 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_general_bus {
  background-image: url(../img/marker_general_bus.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_furusato .cmarker_photo_noimage {
  background-image: url(../img/icon_category_furusato.svg);
} /* 納税 */
.cmarker_bus .cmarker_photo_noimage {
  background-image: url(../img/icon_category_bus_auto_02.svg);
}/* バス停 */
.cmarker_general_bus .cmarker_photo_noimage {
  background-image: url(../img/icon_category_bus.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, 0px);
}

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

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

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

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

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

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

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

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

/* ここまで削除でOK */
/* --------------------------------------------------
  地図マーカー（ピン）設定
---------------------------------------------------*/
/* 境町 通常専用  */
.cmarker_general.ex {
  background-image: url(../img/marker_general_02.svg);
} /* 汎用*/
/* 写真無し　------------*/
/* アイコン内にnoimage(ジャンルアイコン） */
/* 境町 通常専用  */
.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_carstop {
  background-image: url(../img/icon_category_carstop_02.svg);
} /* トイレ */
/* --------------------------------------------------
  地図マーカー（ピン）設定 ※ふるさと納税
---------------------------------------------------*/
/* ふるさと納税ピン */
.cmarkerFurusato {
  width: 80px;
  height: 85px;
  background-repeat: no-repeat;
  background-size: contain;
  transform: translateX(-50%) translateY(-85px) scale(100%);
  transform-origin: center bottom;
  transition: transform 0.3s;
  position: relative;
  cursor: pointer;
}

/* HOVER時 */
@media (hover: hover) {
  .cmarkerFurusato:hover {
    transform: translateX(-50%) translateY(-84px) scale(120%);
    transform-origin: center bottom;
  }
}
.cmarker_furusato {
  background-image: url(../img/marker_furusato.svg);
}

/* ふるさと納税名称 */
.cmarkerFurusato_name {
  max-width: 150px;
  overflow: hidden;
  display: inline-block;
  font-size: var(--preset--fontsize--Xs);
  font-weight: var(--preset--fontweight--semibold);
  color: var(--custom--color--sakaimachi);
  border: solid 2px var(--custom--color--sakaimachi);
  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) {
  .cmarkerFurusato:hover + .cmarkerFurusato_name {
    max-width: none;
    overflow: initial;
  }
}
/* 写真有り　------------*/
/* アイコン内に写真 */
.cmarkerFurusato_photo {
  position: absolute;
  top: 12px;
  left: 12px;
}

.cmarkerFurusato_photo img {
  width: 56px;
  height: 56px;
  border: solid 1px #fff;
  aspect-ratio: var(--preset--aspect-ratio);
  object-fit: cover;
  border-radius: 50%;
}

/* 写真無し　------------*/
/* アイコン内にnoimage(ジャンルアイコン） */
.cmarkerFurusato_photo_noimage {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: var(--preset--color--white);
  background-repeat: no-repeat;
  background-size: 44px;
  background-position: 6px 7px;
  position: absolute;
  top: 11px;
  left: 12px;
}

.cmarkerFurusato_photo_noimage.noimage_furusato {
  background-image: url(../img/icon_category_furusato.svg);
}

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

@keyframes marker_anime_furusato {
  0% {
    transform: translateX(-50%) translateY(-85px) scale(1);
  }
  50% {
    transform: translateX(-50%) translateY(-101px) scale(1);
  }
  100% {
    transform: translateX(-50%) translateY(-85px) scale(1);
  }
}
/* --------------------------------------------------
  地図マーカー（ピン）設定 ※自動運転バス
---------------------------------------------------*/
/* 自動運転バスピン */
.cmarkerBus {
  width: 60px;
  height: 96px;
  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) {
  .cmarkerBus:hover {
    transform: translateX(-50%) translateY(-95px) scale(120%);
    transform-origin: center bottom;
  }
}
.cmarker_bus {
  background-image: url(../img/marker_bus.svg);
}

/* 自動運転バス名称 */
.cmarkerBus_name {
  max-width: 150px;
  overflow: hidden;
  display: inline-block;
  font-size: var(--preset--fontsize--Xs);
  font-weight: var(--preset--fontweight--semibold);
  color: var(--custom--color--sakaimachi);
  border: solid 1px var(--custom--color--sakaimachi);
  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) {
  .cmarkerBus:hover + .cmarkerBus_name {
    max-width: none;
    overflow: initial;
  }
}
/* 写真有り　------------*/
/* アイコン内に写真 */
.cmarkerBus_photo {
  position: absolute;
  top: 44px;
  left: 10px;
}

.cmarkerBus_photo img {
  width: 38px;
  height: 38px;
  aspect-ratio: var(--preset--aspect-ratio);
  object-fit: cover;
  border-radius: 5px;
}

/* 写真無し　------------*/
/* アイコン内にnoimage(ジャンルアイコン） */
.cmarkerBus_photo_noimage {
  width: 38px;
  height: 38px;
  border-radius: 5px;
  background-color: var(--preset--color--white);
  background-repeat: no-repeat;
  background-size: 36px;
  background-position: 1px 1px;
  position: absolute;
  top: 44px;
  left: 10px;
}

.cmarkerBus_photo_noimage {
  background-image: url(../img/icon_category_bus_auto_02.svg);
}

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

@keyframes marker_anime_bus {
  0% {
    transform: translateX(-50%) translateY(-96px) scale(1);
  }
  50% {
    transform: translateX(-50%) translateY(-111px) scale(1);
  }
  100% {
    transform: translateX(-50%) translateY(-96px) scale(1);
  }
}
/* --------------------------------------------------
  地図マーカー（ピン）設定 ※学区
---------------------------------------------------*/
/* 学区ピン */
.cmarkerGakku {
  width: 60px;
  height: 74px;
  background-repeat: no-repeat;
  background-size: contain;
  transform: translateX(-50%) /*translateY(-74px) */translateY(-72px) scale(100%);
  transform-origin: center bottom;
  transition: transform 0.3s;
  position: relative;
  /*cursor: pointer;*/
}
/* HOVER時 */
@media ( hover: hover ){
  .cmarkerGakku:hover{  /*セミコロン後ろに半角スペースを入れると動かない*/
    transform: translateX( -50% ) translateY( -71px ) scale( 120% );
    transform-origin: center bottom; 
  }
}

.corsor_gakku{
  cursor: default;
}

/* 写真有り　------------*/
/* アイコン内に写真 */
.cmarkerGakku_photo {
  position: absolute;
  top: 11px;
  left: 10px;
}

.cmarkerGakku_photo img {
  width: 38px;
  height: 38px;
  aspect-ratio: var(--preset--aspect-ratio);
  object-fit: cover;
  border-radius: 5px;
}

.cmarker_gakku {
  background-image: url(../img/marker_area.svg);
}

/* 選択時 ふわふわアニメ */
.cmarker-wraps.selected .cmarkerGakku{
  animation: marker_anime_gakku 1.5s ease-in-out infinite;
}
@keyframes marker_anime_gakku{
  0%{
    transform: translateX( -50% ) translateY( -72px ) scale( 1 );
  }
  50%{
    transform: translateX( -50% ) translateY( -88px ) scale( 1 );
  }
  100%{
    transform: translateX( -50% ) translateY( -72px ) 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;
}

@media (max-width: 599px) {
  .mapControlPanel {
    right: 15px;
  }
}

/*-------------------------------------------------
　ボタン設定
--------------------------------------------------*/
/* ボタン共通設定（拡縮除く） */
.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.wh {
  background-color: rgba(255, 255, 255, 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_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);
}

/*==========================================================================
  検索パネル
==========================================================================*/
.searchPanel {
  z-index: 2030;
}

/* --------------------------------------------------
  検索キーワード設定 
---------------------------------------------------*/
/* 検索キーワードエリア */
.searchPanel-keyword {
  width: calc(100% - 40px);
  padding: 25px 0 20px var(--preset--padding--side);
}

@media (max-width: 599px) {
  .searchPanel-keyword {
    width: 100%;
    padding-top: 0;
    padding-right: var(--preset--padding--side);
  }
}
/* 検索キーワード枠 */
.searchPanel-keyword_group {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  overflow: hidden;
  border: solid 1px var(--custom--color--main);
  border-radius: 100vh;
  padding-right: 6px;
}

@media (max-width: 599px) {
  .searchPanel-keyword_group {
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
  }
}
/* 検索キーワード 入力部 */
.searchPanel-keyword_group input {
  width: calc(100% - 40px);
  height: 50px;
  border: none;
}

/* 検索キーワード プレースホルダー */
.searchPanel-keyword_group input::placeholder {
  color: #ccc;
}

/* 検索キーワード ボタン */
.searchPanel-keyword_group button {
  --button--size: 34px;
  width: var(--button--size);
  height: var(--button--size);
  border-radius: 50%;
  background-color: var(--custom--color--main);
  background-image: url(../img/icon_search_keyword.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 19px;
}

/* --------------------------------------------------
  検索ジャンル選択設定 
---------------------------------------------------*/
/* -----------------------------
  検索ジャンル選択HEAD 
--------------------------------*/
/* 検索ジャンル選択帯 */
.searchPanel-selectHead {
  --head--height: 30px;
  --head--open-width: 40px;
  height: var(--head--height);
  display: flex;
  align-items: center;
  background-color: var(--custom--color--main);
  padding-left: 10px;
}

@media (max-width: 599px) {
  .searchPanel-selectHead {
    --head--height: 36px;
  }
}
/* 項目名 */
.searchPanel-selectHead_heading {
  flex: 1;
  font-size: var(--preset--fontsize--Xs--sp);
  color: var(--preset--color--white);
}

/* リセットボタン */
.searchPanel-selectHead_reset {
  margin-right: 8px;
}

.searchPanel-selectHead_reset > button {
  position: relative;
  top: -2px;
}

/* 開閉ボタン */
.searchPanel-selectHead_open {
  width: 40px;
  height: var(--head--height);
  border-left: solid 1px var(--preset--color--white);
  cursor: pointer;
  position: relative;
}

.searchPanel-selectHead_open::after {
  content: "";
  display: block;
  width: 13px;
  height: 7px;
  background-image: url(../img/icon_arr_wh.svg);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  left: 13px;
  top: 12px;
  transform: scale(1, -1);
}

@media (max-width: 599px) {
  .searchPanel-selectHead_open::after {
    left: 14px;
    top: 14px;
  }
}
/* 開閉ボタン アイコン切り替え*/
.searchPanel-selectHead_open.active {
  transform: scale(1, -1);
}

/* -----------------------------
  検索ジャンル選択 SLIDER（選択部分）
--------------------------------*/
.searchPanel-select {
  border-bottom: solid 1px var(--preset--color--line);
}

.searchPanel-selectSlider {
  height: 90px;
  padding-top: 5px;
  padding-left: 20px;
  padding-bottom: 5px;
  position: relative;
  overflow: hidden;
}

.searchPanel-selectSlide-subSlider {
  height: 90px;
  width: 400px;
  position: absolute;
  left: 0;
  bottom: 0;
  transform: translateY(100%);
  background-color: var(--preset--color--white);
  z-index: 20;
}

/* --------------------------------------------------
  検索結果設定
---------------------------------------------------*/
/* 検索結果見出し */
.searchPanel-result_heading {
  font-size: var(--preset--fontsize--S);
  font-weight: var(--preset--fontweight--bold);
  margin-top: 15px;
}

/* 検索結果リスト */
.searchPanel-result_list {
  display: flex;
  flex-wrap: wrap;
}

/* １スポット */
.searchPanel-result_list .resultSpot {
  width: calc((100% - 20px) / 2);
  margin-top: 10px;
  opacity: 1;
  transition: opacity 0.5s;
  cursor: pointer;
}

.searchPanel-result_list .resultSpot:nth-of-type(odd) {
  margin-right: 20px;
}

/* 1スポットHOVER時 */
@media (hover: hover) and (pointer: fine) {
  .searchPanel-result_list .resultSpot:hover {
    opacity: 0.5;
  }
}
/* スポット写真 */
.searchPanel-result_list .resultSpot_photo img {
  width: 100%;
  height: auto;
  aspect-ratio: var(--preset--aspect--ratio);
  object-fit: cover;
  border-radius: var(--preset--radius--M);
}

/* スポット名 */
.searchPanel-result_list .resultSpot_name {
  font-size: var(--preset--fontsize--M);
  font-weight: var(--preset--fontweight--semibold);
  margin-top: 5px;
}

/* スポット説明 */
.searchPanel-result_list .resultSpot_desc {
  font-size: var(--preset--fontsize--S);
  margin-top: 3px;
  overflow: hidden; /* 行数でカット設定 */
  display: -webkit-box; /* 行数でカット設定 */
  -webkit-box-orient: vertical; /* 行数でカット設定 */
  -webkit-line-clamp: 3; /* 行数を指定 */
}

/* もっと見る */
.searchPanel-result_more {
  margin-top: 30px;
  text-align: center;
}

/* ページング */
.searchPanel-result_paging {
  margin-top: 30px;
  text-align: center;
}

.searchPanel-result_paging > * {
  margin-left: 10px;
}

/*==========================================================================
  詳細情報パネル
==========================================================================*/
.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;
}