@media screen and (min-width: 769px) {

.mainvisual {
  background: url(../img/place_main_pc.jpg) no-repeat;
  background-size: cover;
  height: 517px;
  position: relative;
}

.mainvisual .main_block {
  width: 902px;
  background: #FFF;
  margin: 0 auto;
  text-align: center;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 60px 0 15px 0;
}
.mainvisual .main_block .title {
  width: 334px;
  margin: 0 auto;
}
.mainvisual .main_block p {
  color: #1c9888;
  font-size: 1.5rem;
  margin: 15px 0 0 0;
  letter-spacing: 3px;
}
.description {
  text-align: center;
  padding: 3px 0 0 0;
}
.description .inner {
}
.description p {
  font-size: 1.2rem;
  line-height: 1.94;
}
.area-list {
    margin: 40px 0 65px 0;
}
.area-list .inner {
  max-width: 1000px;
  margin: 0 auto;
}
.area-list .inner ul {
  display: flex;
  flex-wrap: wrap;
}
.area-list .inner ul li {
  text-align: center;
  min-width: 139px;
  min-height: 37px;
  background: #f2f4f4;
  color: #1c9888;
  margin: 0 4px 4px 0;
  font-size: 1.2rem;
  cursor: pointer;
  padding: 10px 0 0 0;
  transition: background-color 300ms cubic-bezier(0.215, 0.61, 0.355, 1),color 300ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
.area-list .inner ul li:nth-child(7n) {
  margin: 0 0 4px 0;  
}
.area-list .inner ul li span {
  display: block;
  font-size: 1rem;
  padding: 5px 0 0 0;
  letter-spacing: 1.3px;
}

.area-list .inner ul li.active {
  background: #1c9888;
  color: #FFF;
}
.area-list .inner ul li:hover {
  background: #1c9888;
  color: #FFF;  
}
.area {
  background: #f2f4f4;
  padding: 80px 0 21px 0;
}
.area .inner {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.area .inner::after{
  content: "";
  display: block;
  width: 315px;
}
/*
.area .inner .facility-item {
  width: 315px;
  display: flex;
  flex-direction: column;
  margin: 0 0 64px 0;
}
.area .inner .facility-item a figure {
  position: relative;
}
.area .inner .facility-item a figure span {
  display: inline-block;
  font-size: 1rem;
  position: absolute;
  left: 0;
  top: 0;
  background: #1c9888;
  color: #FFF;
  width: 66px;
  height: 20px;
  text-align: center;
  padding: 10px 0 0 0;
  letter-spacing: 1px;
}
.area .inner .facility-item .logo {}
.area .inner .facility-item .thumb {
    margin: 8px 0 0 0;
}
.area .inner .facility-item .info {
  line-height: 1.91;
  font-size: 1.2rem;
  margin: 0 0 8px 0;
}
.area .inner .facility-item .info .name {
  color: #b4994c;
  font-weight: bold;
  font-size: 1.55rem;
  margin: 10px 0 9px 0;
}
.area .inner .facility-item .info ul.tags {
  display: flex;
  flex-wrap: wrap;
}
.area .inner .facility-item .info ul.tags li {
  background: #b4994c;
  color: #FFF;
  font-size: 1rem;
  line-height: 1;
  padding: 9px 17px 7px 17px;
  margin: 0 3px 3px 0;
}
.area .inner .facility-item .info .address {
    margin: 10px 0 0px 0;
    line-height: 2;
}
.area .inner .facility-item .info .address span {
  display: block;
}
.area .inner .facility-item .info .tel {}
.area .inner .facility-item .link-block {
  text-align: center;
  margin-top: auto;
}
.area .inner .facility-item .link-block a:link {
  padding: 15px 0;
  font-size: 1.2rem;
}
.area .inner .facility-item .link-block a:visited {}
.area .inner .facility-item .link-block a:hover {}
.area .inner .facility-item .link-block a:active {}

.area .inner .facility-item .link-block .official {
  margin: 0 0 4px 0;
  font-size: 1.2rem;
}
.area .inner .facility-item .link-block .official a:link {
    display: block;
    width: 100%;
    padding: 17px 0;
    color: #1C9888;
    font-size: 1.3rem;
    font-weight: 200;
    letter-spacing: 1px;
    text-align: center;
    background: url(/assets/img/arrow.svg) right 15px center no-repeat #FFF;
    background-size: 12px;
    border: 1px solid #1C9888;
    transition: all .2s;
}
.area .inner .facility-item .link-block .official a:visited {
    color: #1C9888;
}
.area .inner .facility-item .link-block .official a:hover {
    border: 1px solid #1C9888;
  background: url(/assets/img/arrow_wh.svg) right 5px center no-repeat #1C9888;
  background-size: 12px;
  color: #FFF;
}
.area .inner .facility-item .link-block .official a:active {}


.area .inner .facility-item .link-block .fair {
  margin: 0 0 4px 0;
  font-size: 1.3rem;
}
.area .inner .facility-item .link-block ul {
  display: flex;
  justify-content: space-between;
}
.area .inner .facility-item .link-block ul li {
  text-align: center;
  width: 155px;
}
*/


}

@media screen and (min-width: 769px) and (max-width: 1100px){
	
.area-list .inner {
  max-width: 90%;
  margin: 0 auto;
}
.area-list .inner ul li {
  text-align: center;
  width: 14%;
  background: #f2f4f4;
  color: #1c9888;
  margin: 0 4px 4px 0;
  font-size: 1.2rem;
  cursor: pointer;
  padding: 10px 0 0 0;
  transition: background-color 300ms cubic-bezier(0.215, 0.61, 0.355, 1),color 300ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
.area-list .inner ul li:nth-child(7n){
  margin: 0 4px 4px 0;
}
.area .inner {
  max-width: 90%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.area .inner::after{
  content: "";
  display: block;
  width: 48%;
}
/*
.area .inner .facility-item {
  width: 48%;
  display: flex;
  flex-direction: column;
  margin: 0 0 64px 0;
}
.area .inner .facility-item .link-block ul li {
  text-align: center;
  width: 49.25%;
}
*/

	
}

@media screen and (max-width: 768px) {

.mainvisual {
  background: url(../img/place_main_sp.jpg) no-repeat;
  background-size: cover;
  position: relative;
  width: 100%;
  padding-top: 100%;
}

.mainvisual .main_block {
  width: 90%;
  background: #FFF;
  margin: 0 auto;
  text-align: center;
  position: absolute;
  bottom: -9.5%;
  left: 0;
  right: 0;
  padding: 16.5% 0 0 0;
}
.mainvisual .main_block .title {
  width: 80%;
  margin: 0px auto 0 auto;
}
.mainvisual .main_block p {
  color: #1c9888;
  font-size:4vw;
  margin: 5% 0 0 0;
  letter-spacing: 3px;
}
.description {
  text-align: center;
  padding: 15% 0 0 0;
}
.description .inner {
}
.description p {
  font-size:3.2vw;
  line-height: 2;
}
.area-list {
    margin: 9% 0 14.5% 0;
}
.area-list .inner {
  width: 90%;
  margin: 0 auto;
}
.area-list .inner ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.area-list .inner ul::after{
  content: "";
  display: block;
  width: 32.7%;
}
.area-list .inner ul li {
  text-align: center;
  width: 32.7%;
  background: #f2f4f4;
  color: #1c9888;
  margin: 0 0 1.7% 0;
  font-size:3.2vw;
  padding: 2.5% 0;
  transition: background-color 300ms cubic-bezier(0.215, 0.61, 0.355, 1),color 300ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
.area-list .inner ul li span {
  display: block;
  font-size:2.667vw;
  padding: 5px 0 0 0;
  letter-spacing: 1.3px;
}

.area-list .inner ul li.active {
  background: #1c9888;
  color: #FFF;
}
.area-list .inner ul li:hover {
  background: #1c9888;
  color: #FFF;  
}
.area {
  background: #f2f4f4;
  padding: 18% 0 4.3% 0;
}
.area .inner {
  width: 90%;
  margin: 0 auto;
}
/*
.area .inner .facility-item {
  width: 100%;
  margin: 0 0 19.4% 0;
}
.area .inner .facility-item a figure {
  position: relative;
}
.area .inner .facility-item a figure span {
  display: inline-block;
  font-size:2.667vw;
  position: absolute;
  left: 0;
  top: 0;
  background: #1c9888;
  color: #FFF;
  width: 22%;
  height: 9%;
  text-align: center;
  padding: 3% 0 0 0;
  letter-spacing: 1px;
}
.area .inner .facility-item .logo {}
.area .inner .facility-item .thumb {
    margin: 2% 0 0 0;
}
.area .inner .facility-item .info {
  line-height: 1.91;
  font-size: 2.2vw;
  margin: 0 0 4.1% 0;
}
.area .inner .facility-item .info .name {
  color: #b4994c;
  font-weight: bold;
  font-size:4.267vw;
  margin: 3% 0 2% 0;
}
.area .inner .facility-item .info ul.tags {
  display: flex;
  flex-wrap: wrap;
}
.area .inner .facility-item .info ul.tags li {
  background: #b4994c;
  color: #FFF;
  font-size:2.667vw;
  line-height: 1;
  padding: 2.2% 3.8%;
  margin: 0 3px 3px 0;
}
.area .inner .facility-item .info .address {
    margin: 3.5% 0 0 0;
    line-height: 2;
    font-size:2.667vw;
}
.area .inner .facility-item .info .address span {
  display: block;
}
.area .inner .facility-item .info .tel {
	font-size:2.667vw;
}
.area .inner .facility-item .link-block {
  text-align: center;
  margin-top: auto;
}
.area .inner .facility-item .link-block a:link {
  padding: 5.6% 0;
  font-size:2.667vw;
}
.area .inner .facility-item .link-block a:visited {}
.area .inner .facility-item .link-block a:hover {}
.area .inner .facility-item .link-block a:active {}

.area .inner .facility-item .link-block .official {
  margin: 0 0 1.7% 0;
  font-size:2.667vw;
}

.area .inner .facility-item .link-block .official a:link {
    display: block;
    width: 100%;
    padding: 5.3% 0;
    color: #1C9888;
    letter-spacing: 1px;
    text-align: center;
    background: url(/assets/img/arrow.svg) right 15px center no-repeat #FFF;
    background-size: 12px;
    border: 1px solid #1C9888;
    transition: all .2s;
}
.area .inner .facility-item .link-block .official a:visited {
  color: #1C9888;
}
.area .inner .facility-item .link-block .official a:hover {
  background: url(/assets/img/arrow_wh.svg) right 5px center no-repeat #1C9888;
  background-size: 12px;
  color: #FFF;
}



.area .inner .facility-item .link-block .fair {
  margin: 0 0 1.7% 0;
  font-size:3.467vw;
}
.area .inner .facility-item .link-block ul {
  display: flex;
  justify-content: space-between;
}
.area .inner .facility-item .link-block ul li {
  text-align: center;
  width: 49.25%;
}
.area .inner .facility-item .link-block ul li a:link {
  padding: 11.3% 0;
  background-position: right 10.5% center;
}
.area .inner .facility-item .link-block ul li a:visited {}
.area .inner .facility-item .link-block ul li a:hover {}
.area .inner .facility-item .link-block ul li a:active {}
*/	
   
	
}