@charset "UTF-8";
/* CSS Information
===============================
File name:Map.css
Description:Tanoshima RN2019
D&M:IJU inc.
Date:2019
Contents:*Map Page
Root EM:62.5%=10px
=============================== */
/* Common */
.main{position:relative;}
.operation{display:none;}
.search_tag__list:first-of-type{
  border-bottom:solid 1px #ddd;
  padding-bottom:1rem;
  margin-bottom:1rem;
}
/* Canvas */
#canvas{
  position:fixed;
  top:7rem;
  left:0;
  z-index:0;
  height:calc(100% - 18rem);
}
/* Slider */
.spot{
  position:fixed;
  left:24rem;
  bottom:0;
  z-index:1;
  width:calc(100% - 24rem);
  height:11rem;
}
.spot_content__wrap{
  position:relative;
}
.slick-slide:nth-child(even) .spot_content__wrap{
  border-left:solid 1px #ddd;
  border-right:solid 1px #ddd;
}
.spot_content__wrap.check-current a{
  color:#fff!important;
  background:#0084cd;
}
.spot_content__wrap.check-current:before{
  position:absolute;
  top:50%;
  left:4rem;
  -webkit-transform:translateY(-50%);
  transform:translateY(-50%);
  z-index:3;
  content:"\f00c";
  font-family:"FontAwesome";
  font-size:2rem;
  color:#fff;
  width:4rem;
  height:4rem;
  line-height:4rem;
  background:#0084cd;
  border-radius:50%;
  text-align:center;
}
.spot_inner{
  background:#fff;
  border-left:solid 1px #ddd;
}
.spot_content{width:100%;}
.spot_link{
  position:relative;
  width:100%;
  padding:1rem;
  text-decoration:none;
  color:#555!important;
}
.spot_overflow{
  position:relative;
  width:10rem;
  overflow:hidden;
}
.spot_eyecatch{
  position:relative;
  width:100%;
  height:auto;
}
.spot_eyecatch:before{
  display:block;
  content:"";
  padding-top:9rem;
}
.spot_eyecatch__img{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}
.flag_tswari{
  position:absolute;
  left:0;
  bottom:0;
  z-index:2;
  font-size:1.2rem;
  line-height:1;
  background:#b29e28;
  color:#fff;
  padding:0.5rem;
}
.spot_disc{
  width:calc(100% - 10rem);
  padding-left:1rem;
}
.spot_category{
  font-size:1.1rem;
}
.spot_category:before{
  content:"\f041";
  font-family:"FontAwesome";
  margin-right:0.4rem;
}
.spot_item{
  font-size:1.6rem;
  line-height:1.3;
  margin-bottom:0.5rem;
  display:-webkit-box;
  overflow:hidden;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}
/*IE11 hac*/
@media screen and (min-width: 0\0) and (min-resolution: +72dpi){
.spot_item{height:4rem;}
}
.spot_lead{
  font-size:1.2rem;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  width:100%;
}
/* Arrows */
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before{
  opacity:.15;
}
.spot_content .slick-prev,
.spot_content .slick-next{
  z-index:4;
}
.spot_content .slick-prev{
  left:-0.1rem;
  top:-2rem;
  width:4rem;
  height:4rem;
  text-align:center;
  opacity:1;
}
.spot_content .slick-prev:before{
  content:"\f053";
  font-family:"FontAwesome";
  background:rgba(0,132,205,1);
  color:#fff;
  width:4rem;
  height:4rem;
  line-height:4rem;
  display:block;
  border-radius:0;
  color:#fff;
  font-size:1.4rem;
  box-shadow:rgba(0, 0, 0, 0.1) 0px 2px 4px;
}
.spot_content .slick-next{
  right:0;
  top:-2rem;
  width:4rem;
  height:4rem;
  text-align:center;
  opacity:1;
}
.spot_content .slick-next:before{
  content:"\f054";
  font-family:"FontAwesome";
  background:rgba(0,132,205,1);
  color:#fff;
  width:4rem;
  height:4rem;
  line-height:4rem;
  display:block;
  border-radius:0;
  color:#fff;
  font-size:1.4rem;
  box-shadow:rgba(0, 0, 0, 0.1) 0px 2px 4px;
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before{
  opacity:0;
}
/* GoogleMap Defult */
.gm-ui-hover-effect{
  top:0!important;
  right:9px!important;
  opacity:1!important;
}
.gm-ui-hover-effect img{
  display:none!important;
}
.gm-ui-hover-effect:before{
  content:"\f00d";
  font-family:"FontAwesome";
  font-size:2rem!important;
  background:#0084cd;
  color:#fff!important;
  width:4rem;
  height:4rem;
  line-height:4rem;
  border-radius:0 0 0 6px;
  display:block;
}
/* IE11 hac */
@media screen and (min-width: 0\0) and (min-resolution: +72dpi){
  .gm-ui-hover-effect{
    right:0!important;
    border-radius:0 0 0 6px;
    width:4rem!important;
    height:4rem!important;
  }
}
/* Safari hac */
_::-webkit-full-page-media, _:future, :root .gm-ui-hover-effect{
  right:0!important;
  border-radius:0 0 0 6px;
  width:4rem!important;
  height:4rem!important;
}
.gm-style .gm-style-iw-c{
  padding:0!important;
  max-width:40rem!important;
}
.gm-style-iw-d{
  max-width:40rem!important;
}
.poi-info-window{padding:1rem;}
.poi-info-window .title{
  font-weight:bold;
  padding-right:1.5rem;
  border-bottom:solid 1px #ccc;
  margin-bottom:0.5rem;
  padding-bottom:0.5rem;
}
.poi-info-window a,
.poi-info-window a:visited{
  color:#fff!important;
  display:block;
  background:#999;
  text-align:center;
}
.poi-info-window .view-link{
  margin-top:0.5rem;
  height:2rem;
  line-height:2rem;
}
.poi-info-window .view-link:hover,
.poi-info-window a:hover{
  text-decoration:none!important;
}
/* InfoWindow */
.wipe{
  width:100%;
  padding:1.7rem 0 0.5rem 1.7rem;
}
/* firefox hac */
@-moz-document url-prefix(){
  .wipe{padding:1.7rem;}
}
/* Edge hac */
@supports (-ms-ime-align: auto) {
	.wipe{padding:1.7rem;}
}
/* IE11 hac */
@media screen and (min-width: 0\0) and (min-resolution: +72dpi){
  .wipe{padding:1.7rem;}
  .wipe_link:hover{opacity:1!important;}
}
.wipe_figure{
  position:relative;
  width:100%;
  height:auto;
  background-size:cover;
}
.wipe_figure:before{
  display:block;
  content:"";
  padding-top:55%;
}
.wipe_figure span{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  display:block;
}
.wipe_figure .flag_tswari{
  top:0;
  bottom:auto;
}
.wipe_inner{
  width:100%;
  padding:0 2rem 1.5rem 0;
}
.wipe_link{
  width:100%;
  display:block;
  text-decoration:none;
  color:#444!important;
}
.wipe_category{
  font-size:1.2rem;
  margin-bottom:0.5rem;
}
.wipe_category:before{
  content:"\f041";
  font-family:"FontAwesome";
  margin-right:0.4rem;
}
.wipe_spotname{
  font-size:1.8rem;
  font-weight:bold;
  line-height:1.4;
}
.wipe_disc{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  width:100%;
  margin-top:0.5rem;
}
/* Current Location */
.current_location{
  position:absolute;
  right:1rem;
  top:17rem;
  z-index:3;
  width:4rem;
  height:4rem;
  cursor:pointer;
  box-shadow:rgba(0, 0, 0, 0.3) 0px 1px 4px -1px;
}
.current_location__btn{
  display:block;
  width:4rem;
  height:4rem;
  line-height:4rem;
  background:#fff;
  border-radius:0.2rem;
  text-align:center;
}
.current_location__icon{
  width:2rem;
  opacity:.9;
}

/* Responsive
====================*/
/*[ MIN ]---------------------------*/
@media (min-width:64.0625em){/*1025*/
  .spot_link:hover{
    background:#f0f0f0;
    opacity:.9;
  }
  .spot_link:hover .spot_eyecatch{
    opacity:.9;
    transform:scale(1.1);
    transition-duration:0.5s;
  }
  .current_location:hover .current_location__icon{
    opacity:1;
  }
}
/*[ MAX ]---------------------------*/
@media (max-width:64em){/*1024*/
  .spot{
    left:16rem;
    width:calc(100% - 16rem);
  }
}
@media (max-width:48em){/*768*/
  #canvas{
    top:6rem;
    height:calc(100vh - 17rem);
  }
  .spot{
    left:0;
    width:calc(100% - 0rem);
  }
  .gmnoprint{display:none!important;}
  .current_location{
    top:6.5rem;
    right:auto;
    left:0.5rem;
  }
}
@media (max-width:40em){/*640*/
  .wipe_inner{padding:0 2rem 1rem 0;}
  .search_tag__list:first-of-type .search_tag__item{width:100%;}
}
@media (max-width:30em){/*480*/
  .slick-slide:nth-child(even) .spot_content__wrap{
    border:0;
  }
  .wipe_spotname{font-size:1.6rem;}
  .gm-style .gm-style-iw-c,
  .gm-style-iw-d{
    max-width:28rem!important;
  }
}
@media (max-width:21.25em){/*340*/
  .gm-style .gm-style-iw-c,
  .gm-style-iw-d{
    max-width:24rem!important;
  }
}