::-webkit-scrollbar {
  display: none;
}


.category-bar {
   display: block;
   /* gap: 10px; */
   /* padding: 10px; */
   overflow-x: scroll;
   overflow-y: hidden;
   position: fixed;
   width: calc(100% - 40px);
   background-color: white;
   left: 20px;
   top: 20px;
   box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
   border-radius: 5px;
   height: 55px;
   /* max-width: 800px;
   left: 50%;
    transform:translateX(-50%);
    -webkit-transform: translateX(-50%); */

 }

 #category_scroll {
   float: left;
   position: absolute;
   /* width: 2000px; */
   overflow-y: hidden;
   overflow-x: scroll;
   height: 70px;
   left: 70px;
   width:calc(70px * 9 );
 }

.before_gradient {
  background: linear-gradient(90deg, rgba(255,255,255,1),rgba(255,255,255,0));
  /* background-color: red; */
  border-radius: 4px  0 0 4px;
  position: fixed;
  width: 20px;
  height: 55px;
  top: 20px;
  bottom: 0;
  left: 90px;
}

.after_gradient {
  background: linear-gradient(270deg, rgba(255,255,255,1),rgba(255,255,255,0));
  /* background-color: red; */
  border-radius: 0 4px 4px 0;
  position: fixed;
  width: 25px;
  height: 55px;
  top: 20px;
  bottom: 0;
  right: 20px;
  text-align: center;
}

.after_gradient .material-symbols-outlined{
  width: 20px;
}

 .category_icon:hover {
 }


 .category_icon {
   position: relative;
   float: left;
   border:none;
   background-color: white;
   width: calc(70px);
   padding: 0;
   color: black;
   height: 55px;
 }

 .category_icon.first {
   position: fixed;
   border-right: solid 1px #dcdcdc;
   border-radius: 4px 0 0  4px;
 }

 .category_icon.active:after {
   content: '';
   display: block;
   position: absolute;
   width: 70%;
   height: 3px;
   background-color: black;
   bottom: 0px;
   margin-left: 15%;
   overflow:hidden;
   text-align: center;
 }

 .after_gradient .material-symbols-outlined {
   font-size: 40px;
   width: calc(25px);
}


 .category_icon .material-symbols-outlined{
   font-size: 30px;
   line-height: 30px;
   height: 30px;
   width: 70px;
 }
 .category_icon .name {
   display: block;
   font-size: 9px;
   text-align: center;
   width: calc(70px);
 }





.map-container {
  width: 100%;
  /* height: calc(100vh); */
  /* position: absolute; */
  /* top: 0; */
}
.info-container {
  /* padding: 10px;  */
  /* font-size: 18px;
  font-weight: bold; */
}
.detail-container {
    position: fixed;
    /* bottom: 0;
    left: 0; */
    width: calc(100% - 20px);
    background: white;
    box-shadow: 0px -4px 10px rgba(0, 0, 0, 0.2);
    padding: 10px;
    padding-bottom: 70px;
    /* padding-bottom: 70px; */
    transform: translateY(100%) translateX(-50%);
    transition: all 0.3s ease-out;
    border-radius: 10px 10px 0 0;
    max-width: 1000px;
    /* margin: auto; */
    left: 50%;
     max-width: 800px;
     overflow-x: hidden;    /* max-width: 1000px;
     transform:translateX(-50%);
     -webkit-transform: translateX(-50%); */ */


    /* overflow: hidden; */
    /* overflow: auto; */
}
.detail-container.active {
    transform: translateY(0) translateX(-50%);
    /* opacity: 1; */
    /* height: 30vh; */
}



.detail-container.overwrap {
  /* transition: all 300ms ease-out ; */
  /* overflow: scroll; */
  /* height: calc(100vh - 150px); */
}


.point_wrap {
  position: absolute;
  height: calc(100% - 180px);
  width: calc(100% - 10px);
  overflow-y: scroll ;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch; /* モバイルでスムーズスクロールを有効化 */
}


.header {
  margin: 0;
  padding: 0;
  border-bottom: solid 1px #dcdcdc;
  width: calc(100%);
  padding-bottom: 10px;
  overflow: hidden;
}
.header h2{
  margin: 0;
  text-align: left;
  float: left;
  width: calc(100% - 95px);
  /* background-color: red; */
}

.header .material-symbols-outlined{
  float: right;
  height: 35px;
  line-height: 35px;
  width: 35px;
  font-size: 35px;
  margin-left: 10px
}

.detail-container p {
  padding: 0;
  padding-bottom: 20px;
  white-space: pre-line;
}

.detail-container p a{
  display: inline-block;
  text-decoration: underline;
}
.detail-container p a:hover{
  opacity: 0.7
}

.detail-container .header img {
  float: right;
  height: 30px;
  cursor: pointer;
  width: 22px;
  margin-right: 10px
}

.detail-container img {
  width: calc(100% - 10px);
  position: relative;
}

.point_wrap .point_bg_image {
  width: calc(100% - 10px);
  position: relative;
  height:calc(20vh);
  background-position: center;
  background-size: cover;
  transition: all 0.3s ease-out;
}

.point_wrap.all .point_bg_image {
  height:calc(40vh);
}


.map_link {
  border:solid 1px #b6b6b6;
  padding: 10px;
}













#map {
  /* margin-top: 50px; */
  height: calc(100vh - 50px);
  transition: all 0.3s ease-out;
}
#map.active  {
  /* height: calc(70vh - 54px); */
}