@charset "UTF-8";
/*▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽*/
/*************************************/
/*************************************/
.l_area-mainContent {
    margin-top: 0 !important;
}
.onsen_exp_text{
  padding: 0 10px;
  margin: -1.5em 0 1.5em;
}
nav.top_header_menu ul li a{
  font-size: 1em;
  color: #111;
  border-radius: 5px;
  padding: 10px;
  border: 1px solid #111;
  display: block;
}
#ranking ul li,
#area ul li{
  margin-top: 5px !important;
}
#ranking ul li .ranking_box,
#area ul li .area_box{
  position: relative;
}
#ranking ul li .ranking_box dd{
  position: absolute;
  top: 30%;
  left: 0;
  width: 100%;
  text-align: center;
}
#area ul li .area_box dd{
  position: absolute;
  top: 5px;
  left: 0;
  width: 100%;
  text-align: center;
}
#ranking ul li .ranking_box dt{
  overflow: hidden;
  height: 10em;
}
#area ul li .area_box dt{
  overflow: hidden;
  height: 10em;
}
#area ul li .area_box dt img{
  height: 100%;
  object-fit: cover;
}
#ranking ul li .ranking_box dd h4,
#ranking ul li .ranking_box dd p,
#area ul li .area_box dd h4,
#area ul li .area_box dd p {
  color: #FFF;
  text-shadow: 1px 1px 4px #444, -1px 1px 4px #444,
   1px -1px 4px #444, -1px -1px 4px #444;
}
#ranking ul li .ranking_box dd h4,
#area ul li .area_box dd h4{
  margin-bottom: 5px;
}
#area ul li .area_box dd h4 img{
  width: 25%;
  margin: auto;
}
#ranking ul li .ranking_box dd h4 .rank_onsen{
  font-size: 0.8em;
  font-weight: lighter;
  border: 1px solid #FFF;
  border-radius: 5px;
  padding: 0 5px;
  margin-right: 10px;
  background: rgba(0, 0, 0, 0.3);
}

#purpose ul li a {
  text-decoration: none;
}
#purpose ul li {
  margin-top: 5px;
}
#purpose ul li .purpose_box {
  text-align: center;
  /*border: 1px solid #CCC;*/
  padding: 5px 0 10px !important;
  font-size: 0.85em;
}
#purpose ul li a .purpose_box p{
color: #111;
}
#purpose ul li .purpose_box img{
  max-width: 320px;
}
/*△△△△△△△△△△△△△△△△△△△△△△△△△△△△△△△△△△△△*/
/******************************************************************************************/
/******************************************************************************************/
/*Media Queries****************************************************************************/
/******************************************************************************************/
/******************************************************************************************/
/* < iPad  */
@media screen and (min-width: 35.5em) {
  /*△△△△△△△△△△△△△△△△△△△△△△△△△△△△△△△△△△△△*/


  nav.top_header_menu{
    margin: 0;
    padding-bottom: 1.5em;
  }
  nav.top_header_menu ul li a{
    font-size: 1.2em;
  }
  #ranking ul li,
  #area ul li{
    margin-top: 15px !important;
  }
  #ranking ul li .ranking_box dt{
    height: auto;
  }
  #area ul li .area_box dt{
    height: 12em;
  }

#purpose ul li .purpose_box {
  padding: 15px 10px;
  font-size: 1em;
}
#area ul li .area_box dd h4 img{
  width: 30%;
}
#area ul li .area_box dd{
  top: 10px;
}
}

  /* < 　PC用 */
  @media screen and (min-width: 65em) {
  /*▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽*/
  .onsen_exp_text{
    margin: 0 0 2em;
    font-size: 1.1em;
  }

  nav.top_header_menu ul li a:hover{
    background: #edf6ff;
    }
  #area ul li .area_box dt{
    height: 14em;
  }
  #area ul li .area_box dd h4 img{
    width: 35%;
  }
  #area ul li .area_box dd{
    top: 15px;
  }
  /*△△△△△△△△△△△△△△△△△△△△△△△△△△△△△△△△△△△△*/ }

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