/* マップページで使用するCSS */
body{
  overflow: hidden;
  font-family: YakuhanJP,'Noto Sans JP','Noto Sans TC','Noto Sans SC', 'Noto Sans KR', 'Noto Sans',sans-serif!important;
  font-size:15px;
	line-height: 1.8em;
  overscroll-behavior: none; /* モバイルブラウザでドロワーを引いたときに、リロードがかからないように */
}

/* ナブバー */
/* 下層ナブバーは常に40pxで表示する */
#nav-lower-layer {
  background-color: #F5F5F3;
  padding: 8px 0;
  width: 100%;
  overflow-x: scroll;
  border-bottom:1px solid #DEDEDE;
}

#nav-lower-layer-tag-container-wrapper {
  width: calc(100vw - 450px); /* 検索ボックスの幅を除外 */
}

@media (max-width: 767px) {
  #nav-lower-layer-tag-container-wrapper {
    width: calc(100vw - 45px); /* 右端の矢印の幅だけ引く */
  }
}

#nav-lower-layer-tag-container {
  display: flex;
  overflow-x: scroll;
  flex-wrap: nowrap;
  text-wrap:nowrap;
  margin:0;
  padding:0;
  left: 20px;
}

/*スクロールバー非表示（Chrome・Safari）*/
#nav-lower-layer-tag-container::-webkit-scrollbar{
	display:none;
}

#nav-lower-layer::-webkit-scrollbar{
	display:none;
}

.tag-carousel-arrow {
  border: none;
  background-color: transparent;
}

.tag-carousel-arrow[aria-disabled="true"] {
  color: gray!important;
}

#nav-upper-layer{
	padding: 0 20px;  
	border-bottom:1px solid;
	border-color:#fff;
	height: 60px;
	background-color: #fff;
	border-bottom:1.5px dotted #c0c0c0;
}

.icon-lang{
	font-size: 22px;
	vertical-align: -4.5px;
}

.dropdown-menu{
	border-radius: 0;
	padding:0 !important;
	min-width: auto;
}

.dropdown-divider{
	margin:0 !important;
}

.dropdown-toggle{
	border:none;
	padding-right:0!important;
	padding-left: 20px!important;
}

.dropdown-item{
	font-size: 15px;
}

.dropdown-item:active{
	background-color:#105779 !important;
}

.dropdown-toggle::after {
  display: none !important;
}

#nav-middle-layer {
 padding:10px 20px;
 border-bottom:1px solid #DEDEDE;
 background-color: #F5F5F3;
 height: 72px;
}

#search-box{
  height: 40px;
  padding:8px;
}

input::placeholder {
  color: #999999;
}

.options-outline{
  font-size: 28px;
	vertical-align: -5px;
}

a,a:hover,a:visited{
    color: inherit;
}

@media (min-width: 768px) {
  #nav-middle-layer,
  #nav-lower-layer {
    display: inline-block;
    vertical-align: middle;
  }

  #nav-middle-layer {
    width: 400px;
    min-width: 400px;
    max-width: 400px;
    flex-shrink: 0; 
  }

  #nav-lower-layer{
    padding:13px 0;
  }

  /* 親要素に横並びさせるためのflex指定 */
  #nav-layer-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}

@media (min-width: 768px) {
  #nav-layer-wrapper {
    display: flex;
    align-items: center;
  }

  #nav-middle-layer, #nav-lower-layer {
    flex: 1; /* 幅の比率を等しくする場合 */
  }
}

/* フルサークルボタン */
.full-circle-button {
  background: #fff;
  height: 48px;
  text-decoration: none;
  box-sizing:border-box;
  border:none;
  padding:0;
  margin:0;
  border-radius: 50px;
  font-size: 15px;
  font-weight: 600;
  box-shadow: 0 0 4px #999999;
}

.custom-input {
  border: 1px solid #999999;
}

.input-icon-wrapper {
  position: relative;
  display: inline-block;
}

.input-icon-wrapper i {
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  color: #888;
  pointer-events: none; /* アイコン上でクリックしてもinputにフォーカスが移るように */
  font-size: 22px;
  margin-top:3px;
}

.input-icon-wrapper input {
   padding-left: 35px !important;
  height: 36px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
/* 販売チケット一覧ドロワー */
#filter-drawer-sale-ticket-container {
  overflow-y: auto; /* スクロール可能にする */
  height: calc( 100vh - 285px); /* ヘッダーとフッターの高さを引く */
}

@media (max-width: 768px) {
  #filter-drawer-sale-ticket-container {
    height: calc(100vh - 156px); /* ヘッダーとフッターの高さを引く */
  }
}

/* フィルタ条件切り替えトグルスイッチ　*/
.filter-toggle-input {
  display: none;
}

.filter-toggle-label {
  transition: 0.4s;
  box-sizing: border-box;
  border: 1px solid #696969;
  border-radius: 100px;
  padding: 3px 10px;
  margin: 4px;
  font-size: 12px;
  background-color: #fff;
  font-weight: 500;
  color: #696969; /* グレー */
}

.filter-toggle-input:checked + label {
  border: 2px solid;
  font-weight: 500;
  color: #fff; /* 白色 */
}

/* フィルタ条件タグ表示
見た目は.filter-toggle-labelと色を除いて同じ */
.filter-tag {
  transition: 0.4s;
  box-sizing: border-box;
  font-size: 12px;
  border: 1px dotted ;
	padding: 3px 5px;
	margin-right:6px;
	white-space: nowrap;
}

/* (PC表示)ドロワーメニュー共通クラス */
.drawer-handle {
  border-radius: 20px 20px 0 0;
  height: 12px;
  cursor: grab;
}

.drawer-handle-point {
  width: 40px;
  height: 4px;
  background: #dedede;
  border-radius: 10px;
  margin: 10px auto;
}

.drawer-close-button {
  padding-right: 16px!important;
  padding-left: 16px!important;
}

.drawer {
  position: fixed;
  left: 0;
  width: 500px;
  height: 100%;
  background-color: #ffffff;
  top: 100vh; /* 初期状態では画面外に配置 */
  z-index: 1500;
}

.drawer-image {
  width: 100%;
  aspect-ratio: 8 / 5;
  object-fit: contain;
}

.drawer-content {
  height: 100%;
  margin: 0 20px 24px 20px;
  overscroll-behavior: none; /* safariでスクロールしたときに引っ付くような挙動をしないように */
  overflow-y: auto; /* スクロール可能にする */
}

.drawer-close-button-section {
  display: flex;
  margin-top:16px;
}

.carousel-indicators {
  transform: translate3d(0, 40px,0);
}

#spot-detail-drawer{
  border-radius: 15px 15px 0 0;
}

#spot-detail-drawer-title{
  font-size: 20px;
  line-height: 30px;
  font-weight: 500;
  margin:8px 20px 20px 20px;
}

#spot-detail-drawer-tags{
  margin:24px 0 16px 0;
}

#spot-detail-drawer-description{
  font-size:15px;
  line-height: 28px;
  margin-bottom:24px;
}

#spot-detail-drawer-links a{
  text-decoration: none;
  border-bottom:1px solid;
}

.SpotDetailDrawerLink {
  color: #e67e22; /* 例：オレンジ */
  text-decoration: none;
}

.slick-disabled {
  display: none !important; /* スライダーの矢印を非表示 */
}

/** (モバイル表示)固定ドロワーメニュー共通クラス */
.fixed-drawer {
  position: fixed;
  top: 100vh; /* 初期状態では画面外に配置 */
  height: 100%;
  background-color: #ffffff;
  z-index: 1500;
}

.fixed-drawer.open {
  transform: translate(0);
}

@media (max-width: 768px) {
  /* 
  ドロワーの上端を円形にして、
  drawerより小さく上をあける
   */
  .fixed-drawer {
    border-radius: 20px 20px 0 0;
  }
}

/* チケットカード */
.ticket-card {
  display: flex;
  border: 1px dotted #dedede;
  border-radius: 8px;
  align-items: center;
}

.ticket-card-image {
  width: 50%;
  aspect-ratio: 8 / 5;
  object-fit: contain;
  overflow: hidden;
  margin-right: 12px;
  flex-shrink: 0;;
}

.ticket-card-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 8px 0 0 8px;
}

.ticket-card-details {
  text-wrap: balance;
}

.ticket-card-title {
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 8px;
}

.ticket-card-price {
  font-size: 15px;
}

/* テーブル */
.info-table {
  width: 100%; /* 必要に応じて調整 */
  border-collapse: collapse;
  margin: 40px 0 24px 0; 
}

.info-table th {
  text-align: left;
  padding: 10px;
  font-weight: normal;
  font-size: 13px;
  width: 100px;
  vertical-align: top;
}

.info-table td {
  padding: 10px;
  font-size: 13px;
  vertical-align: top;
}

.info-table tr {
  border-bottom: 1px solid #dedede; /* 区切り線 */
}

.info-table tr:last-child {
  border-bottom: none; /* 最後の行の区切り線を消す */
}

.info-table .website a {
  color: #e67e22; /* 例：オレンジ */
  text-decoration: none;
}

.info-table .website a:hover {
  text-decoration: underline;
}

/** タブバー */
.tab-bar {
  display: flex;
  border-bottom: 1px solid #eee;
}

.tab-button {
  flex-grow: 1;
  padding: 12px 0;
  text-align: center;
  background: none;
  border: none;
  font-size: 16px;
  color: #555;
  cursor: pointer;
}

.tab-button.active {
  color: #333;
  font-weight: bold;
  border-bottom: 2px solid #ffc107;
}

/* 使用できるチケット読み込みボタン */
#spot-detail-drawer-load-sale-ticket-button{
  border:1px dotted;
  font-size: 16px;
  padding:5px 8px;
  background-color: #fff;
}

.arrow-down-circle{
	font-size: 22px;
	vertical-align: -4.5px;
}

/** リスト */
.list-item {
  margin-top: 5px;
  padding-top: 5px;
}

#sale-ticket-detail-drawer-set-list{
  font-size: 14px;
}

/* チケットボタン　*/
#ticket-button {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 1500;
  color: rgb(255, 255, 255);
  background-color: rgb(255, 255, 255);
  padding-right: 20px;
  padding-left: 20px;
  font-weight: 700;
}

/* マップコントローラー　*/
#map-controller {
  position: fixed;
  bottom: 20px;
  right: 20px;
  color: rgb(0, 0, 0);
  z-index: 1500;
}

#map-controller div {
  border-radius: 44px;
  width: 44px;
  height: 44px;
  margin-top:10px;
  background-color: #fff;
  box-shadow: 0 0 4px #999999;
  font-weight: 600;
}

#map-controller div:first-of-type{
  padding: 10px 5px 10px 12px;
}

#map-controller div:nth-of-type(2){
  padding: 8px 3px 12px 12px;
}

#map-controller div:nth-of-type(2) img{
  height: 18px;
}

#map-controller div:nth-of-type(3){
  padding: 5px 3px 11px 12px;
  font-size: 20px;
}


/* フィルタ条件設定ドロワーメニュー */
#filter-drawer-handle-title {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
  font-size: 28px;
	font-weight: 400;
	line-height: 1.4em;
	letter-spacing: 0.4rem;
  margin:32px 0 16px 0;
  width: 100%;
  text-align: center;
}


#filter-drawer-handle-close-button {
  margin-left: auto;
}

#filter-drawer-search {
  width: 100%;
  padding: 8px;
  background: white;
  position: fixed;
  bottom: 0;
  left: 0;
  display: none; /* 初期状態では非表示 */
}


#filter-drawer-search-button {
  background: #eb6100;
  border-radius: 9999px;
  display: flex;
  justify-content: center;
  padding: 20px 30px;
  line-height: 1.8;
  text-decoration: none;
  color: #fff;
  font-weight: 500;
  transition: 0.3s ease-in-out;
  margin: 8px;
}

#filter-drawer-content{
  margin:72px 0 0 0;
  padding:16px 20px;
}

#filter-drawer-ticket-selection-form select{
 margin-bottom: 16px;
}

/* 検索するボタンに隠れてコンテンツが見えないのを防ぐために
スクロール可能コンテンツの下部に余白を挿入 */
.content-bottom-margin {
  height: 500px;
}

#spot-detail-drawer-content-bottom-margin {
  height: 500px;
}

#sale-ticket-detail-drawer-content-bottom-margin {
  height: 500px;
}
/* スポット詳細ドロワー系 */
/* 販売チケット詳細ドロワー系 */
.buy-anchor {
  color: white!important;
  background-color: rgb(238, 135, 0);
  border: 0;
  width: calc(100% - 8px);
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  border-radius: 50px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}

@media (max-width: 768px) {
  /* モバイル表示のときは、heightは変わる */
  #sale-ticket-detail-drawer-content {
    height: calc(100vh - 66px);
  }
}

#sale-ticket-detail-drawer-title{
  font-size: 20px;
  line-height: 30px;
  font-weight: 500;
  margin:8px 20px 20px 20px;
}

#sale-ticket-detail-drawer{
  border-radius: 15px 15px 0 0;
}

#sale-ticket-detail-drawer-description{
  font-size:15px;
  line-height: 28px;
  margin-bottom:24px;
}

#sale-ticket-detail-drawer-tags{
  margin:24px 0 16px 0;
}

#sale-ticket-detail-drawer-content{
  padding:0 20px;
}

#sale-ticket-detail-drawer-price {
  margin: 16px 0;
}

#sale-ticket-detail-drawer-price > p{
  font-size: 20px;
  line-height: 30px;
  margin:0 0 0 0;
}

.ticket-set{
  font-size: 15px;
  font-weight: 500;
}

/** mapboxgljsの既存geolocationコントローラーを非表示　*/
.mapboxgl-ctrl {
  display: none;
}

/* loading表示系 */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 半透明の黒 */
  display: none; /* 初期状態では非表示 */
  justify-content: center;
  align-items: center;
  z-index: 2000; /* 他の要素より前面に表示 */
}

/** バックドロップ */
.backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 半透明の黒 */
  display: none; /* 初期状態では非表示 */
  justify-content: center;
  align-items: center;
  z-index: 1000; /* ドロワーメニューより後ろに表示 */
}

/* 閉じるボタンのフォーカス時の青枠を消す */
.btn-close{
  outline: none!important;
  box-shadow: none!important;
}