@charset "UTF-8";
html {
  scroll-behavior: smooth;
}

.contents {
  width: 90%;
  max-width: 1000px;
  margin: 0 auto;
}

.spotTab {
  -webkit-overflow-scrolling: touch;
  display: flex;
  z-index: 100;
  position: sticky;
  top: 0;
  justify-content: center;
  margin: 2em 0;
  padding: 10px 0 0;
  overflow-x: auto;
  gap: 10px;
  background: #fff;
  list-style: none;
}
.spotTab::-webkit-scrollbar {
  display: none;
}
.spotTab li {
  flex: 0 0 auto;
  margin: 0;
  white-space: nowrap;
}
.spotTab button {
  all: unset;
  display: flex;
  align-items: center;
  padding: 10px 20px;
  border: 1px solid;
  border-radius: 10px 10px 0 0;
  font-weight: bold;
  cursor: pointer;
  transition: 0.3s;
}
.spotTab button .spotTab_svg {
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  aspect-ratio: 1/1;
  width: 28px;
  margin-right: 0.5em;
          mask-position: center;
          mask-repeat: no-repeat;
          mask-size: contain;
}
.spotTab button.active .spotTab_svg, .spotTab button:hover .spotTab_svg {
  background-color: #FFF !important;
}
.spotTab button.spot_see {
  border-color: #62B744;
  color: #62B744;
}
.spotTab button.spot_see.active, .spotTab button.spot_see:hover {
  background-color: #62B744;
  color: #fff;
}
.spotTab button.spot_see .spotTab_svg {
  -webkit-mask-image: url(/assets/img/icon_spot_see.svg);
  background-color: #62B744;
          mask-image: url(/assets/img/icon_spot_see.svg);
}
.spotTab button.spot_tea {
  border-color: #00683C;
  color: #00683C;
}
.spotTab button.spot_tea.active, .spotTab button.spot_tea:hover {
  background-color: #00683C;
  color: #fff;
}
.spotTab button.spot_tea .spotTab_svg {
  -webkit-mask-image: url(/assets/img/icon_spot_tea.svg);
  background-color: #00683C;
          mask-image: url(/assets/img/icon_spot_tea.svg);
}
.spotTab button.spot_eat {
  border-color: rgb(220, 112, 8);
  color: rgb(220, 112, 8);
}
.spotTab button.spot_eat.active, .spotTab button.spot_eat:hover {
  background-color: rgb(220, 112, 8);
  color: #fff;
}
.spotTab button.spot_eat .spotTab_svg {
  -webkit-mask-image: url(/assets/img/icon_spot_eat.svg);
  background-color: rgb(220, 112, 8);
          mask-image: url(/assets/img/icon_spot_eat.svg);
}
.spotTab button.spot_buy {
  border-color: rgb(46, 167, 224);
  color: rgb(46, 167, 224);
}
.spotTab button.spot_buy.active, .spotTab button.spot_buy:hover {
  background-color: rgb(46, 167, 224);
  color: #fff;
}
.spotTab button.spot_buy .spotTab_svg {
  -webkit-mask-image: url(/assets/img/icon_spot_buy.svg);
  background-color: rgb(46, 167, 224);
          mask-image: url(/assets/img/icon_spot_buy.svg);
}
.spotTab button.spot_stay {
  border-color: rgb(122, 106, 86);
  color: rgb(122, 106, 86);
}
.spotTab button.spot_stay.active, .spotTab button.spot_stay:hover {
  background-color: rgb(122, 106, 86);
  color: #fff;
}
.spotTab button.spot_stay .spotTab_svg {
  -webkit-mask-image: url(/assets/img/icon_spot_stay.svg);
  background-color: rgb(122, 106, 86);
          mask-image: url(/assets/img/icon_spot_stay.svg);
}
.spotTab button.spot_play {
  border-color: rgb(3, 110, 184);
  color: rgb(3, 110, 184);
}
.spotTab button.spot_play.active, .spotTab button.spot_play:hover {
  background-color: rgb(3, 110, 184);
  color: #fff;
}
.spotTab button.spot_play .spotTab_svg {
  -webkit-mask-image: url(/assets/img/icon_spot_play.svg);
  background-color: rgb(3, 110, 184);
          mask-image: url(/assets/img/icon_spot_play.svg);
}

.spot_container {
  font-size: 16px;
}
.spot_container h1, .spot_container h2, .spot_container h3, .spot_container h4, .spot_container p, .spot_container ul, .spot_container ol, .spot_container li {
  margin: 0 0 0.5em 0;
}
.spot_container a {
  color: rgba(83, 133, 58, 0.8);
  text-decoration: underline;
}
.spot_container dl {
  display: grid;
  grid-template-columns: 6em 1fr;
  place-content: start;
  margin-top: 0;
  gap: 0.5em;
  font-size: 0.9em;
}
.spot_container dl dt {
  display: table;
  border-radius: 5px;
  background-color: #e6e6e6;
  font-size: 0.9em;
  text-align: center;
}
.spot_container dl dt span {
  display: table-cell;
  height: 100%;
  vertical-align: middle;
}
.spot_container dl dd, .spot_container dl dd + dt {
  margin: 0;
}
.spot_container dl .spot_map {
  margin-left: 0.5em;
}
.spot_container h1.spot_title {
  display: flex;
  align-items: center;
  margin-bottom: 1em;
  padding: 0.5em 1em;
  font-size: 20px;
}
.spot_container h1.spot_title img {
  aspect-ratio: 1/1;
  width: 28px;
  margin-right: 0.5em;
}
.spot_container h1.spot_title .spot_title_text {
  display: flex;
  align-items: center;
}
.spot_container h1.spot_title .spot_title_subtext {
  font-size: 0.8em;
  line-height: 180%;
  letter-spacing: 0;
}
.spot_container h1.spot_title .spot_title_subtext::after, .spot_container h1.spot_title .spot_title_subtext::before {
  content: "〜";
}
.spot_container h2 {
  font-size: 20px;
}
.spot_container h2 span {
  display: inline-block;
  width: 40px;
  height: 40px;
  margin-right: 0.5em;
  border-radius: 20px;
  color: #fff;
  line-height: 40px;
  text-align: center;
}

.spotBox {
  display: grid;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 400px;
  margin-bottom: 20px;
  padding-bottom: 20px;
  gap: 5px 20px;
  border-bottom: 1px dashed #B3B3B3;
}

h2 {
  grid-column: span 2/span 2;
}

.spotBox_info {
  grid-row-start: 2;
}

.spotBox_img {
  grid-row-start: 2;
}
.spotBox_img:first-child img {
  margin-bottom: 1em;
}
.spotBox_img img {
  width: 100%;
  height: auto;
}

.spotBox_img_container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 80%;
  margin: 0 auto 1em;
  gap: 1em;
}

.spotBox_info_container {
  display: grid;
  grid-template-columns: 3fr 2fr;
  margin-bottom: 1em;
  gap: 1em;
}

.spot_desc ul {
  margin-left: 1em;
  list-style: square;
}
.spot_desc li {
  margin: 0;
}

.spot_map img {
  display: inline;
  width: 10px;
  height: auto;
  margin-right: 5px;
}

.spot_isclosed {
  color: red;
}

.spot_tags {
  margin-bottom: 0 !important;
}
.spot_tags li {
  display: inline-block;
  margin-right: 0.3em;
  padding: 0 0.5em;
  border-radius: 20px;
  background-color: #B3B3B3;
  color: #fff;
  font-weight: bold;
  font-size: 0.9em;
}

.spot_pdf a {
  display: inline-flex;
  align-items: center;
  margin: 1em 0 0.5em;
  padding: 0.3em 0.5em;
  gap: 0.5em;
  border: 1px solid rgba(83, 133, 58, 0.8);
  border-radius: 10px;
  transition: 0.3s;
}
.spot_pdf a:hover {
  background-color: rgba(83, 133, 58, 0.1);
}
.spot_pdf a::before {
  display: block;
  width: 19px;
  height: 19px;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAAmCAMAAACf4xmcAAABj1BMVEVMaXH9/v7+/v772NP2koXN0tXg5Oji5efu8PHk5+jh5ef5ta3i5efz9PXq7O7g5Of+/v7xVkPt7/Du8PHO1Nv72NT3o5j++/rf4+Xn6ev6+/vo6uzk5+j7+/zp6+3n6uvk5+jnxcLR1dn9/v7i5efxVkLK0diwt73c4OPlxMDubFv////W29++xcuzusDyaFb6zcf3p5zyZVP96ebybFvya1n95uTxYE3xWkf++/vzb170gHH4sKf1kYTlxcLsgnXi4OHX2t3HzdHO0tbwV0Pd4OPh5Obik4q2vcLR19z0gnT3ppz71dD97er3o5n2lYnzcWHxV0P3oZbzdWX2m5D3oJT3pJn97+34tKvxXEjzdmbyZFHxYE7yaVf4r6X6ysT0fm/yYk/70MvyY1H98O7xWETzcmL719L71tH5vrfzd2fyZVLxW0fxWUX4r6b6zMbxW0j5vbXzc2L7z8r5urLyY1D5tq7+/Pv6x8D6xL372dT1jH796+j2l4v6y8X5u7P1jH/+9PP6xsD+8/H96ujakSeMAAAAJHRSTlMAAwE6o56RwJHrvmC3W5F6Avlrj+s0fgLrlBi56RSxkOjvdwLvpkESAAAACXBIWXMAABYlAAAWJQFJUiTwAAABTUlEQVQ4jaXUZW+DUBiGYTbWubsrb9l2usHK6u3c3d3d3d1++IAuYeG8SLb7w0lOcuVJIASGiVZclJygq7qGoSrhqBodsRQrRRjviNGzJIzx1B7OqD0Dpt8zYro9hPXxPLWHsE6ep/YQxrV3NKhlmDOOczmV4q1Y1Fkz1dlgirPDZGeLcS57jEtXRUEey7JVdVgtbQpLVFk+GNeqsTgTVv835p9c2DkGWBeEefl2JgiCD2MThBDJ4wsQEjj3w4d882Ksaffo+uHGTQ42Q19hEF+DwUWU7QFc3btJM8DzE4gvkcgyymb3724fVfb2CeK7JE2jbHguHAKFbV+KIJ4YPOngkHIeko1V79YFnK4YMM+Aco5PzYyMLgGsjf3v9VqzlCxD1dWrMbVcJ1q/jhXWYnX36JjZ1/uLVZqwHI2Vm7A0jZVVUL/on1KzMxnmG/SYqagOfwVlAAAAAElFTkSuQmCC) no-repeat;
  background-size: 19px 19px;
  content: "";
}
.spot_pdf a::after {
  display: block;
  width: 12px;
  height: 12px;
  background: url(/assets/img/icon_external.svg) no-repeat;
  background-size: 12px 12px;
  content: "";
}

.spot_dl_row2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1em;
}

.spot_see h1 {
  background-color: #62B744;
}
.spot_see h2 span {
  background-color: #62B744;
}

.spot_tea h1 {
  background-color: #00683C;
}
.spot_tea h2 span {
  background-color: #00683C;
}
.spot_tea .spotBox {
  display: block;
}

.spot_eat h1 {
  background-color: rgb(220, 112, 8);
}
.spot_eat h2 span {
  background-color: rgb(220, 112, 8);
}

.spot_buy h1 {
  background-color: rgb(46, 167, 224);
}
.spot_buy h2 span {
  background-color: rgb(46, 167, 224);
}

.spot_stay h1 {
  background-color: rgb(122, 106, 86);
}
.spot_stay h2 span {
  background-color: rgb(122, 106, 86);
}
.spot_stay .spotBox {
  display: block;
}

.spot_play h1 {
  background-color: rgb(3, 110, 184);
}
.spot_play h2 span {
  background-color: rgb(3, 110, 184);
}
@media screen and (max-width: 768px){
  .spotTab {
    justify-content: left;
  }
  .spotTab button {
    padding: 5px 10px;
  }
  .spot_container dl .spot_map {
    display: block;
    margin-left: 0;
  }
  .spot_container h1.spot_title {
    display: block;
    padding: 0.5em;
  }
  .spot_container h1.spot_title .spot_title_subtext {
    font-size: 0.7em;
  }
  .spotBox {
    grid-template-columns: 1fr;
  }
  .spotBox_info {
    display: block;
    grid-row-start: 3;
    order: 2;
  }
  .spotBox_img {
    grid-row-start: 2;
    order: 1;
  }
  .spotBox_img_container {
    display: block;
  }
  .spotBox_info_container {
    display: block;
  }
  .spot_dl_row2 {
    display: block;
  }
}