@charset "UTF-8";
/* ===================================================================
CSS information

 file name  : sightseeing.css
 author     : Ability Consultant
 style info : 周辺観光
=================================================================== */
.con_sightseeing {
  max-width: 1100px;
  margin: auto;
}
@media only screen and (max-width: 1024px) {
  .con_sightseeing {
    width: 95%;
  }
}

.con_sightseeing:after, .con_sightseeing .con_spot:after {
  content: "";
  display: table;
  clear: both;
}

/* Opacity */
/* Hover animation */
/* Hover 拡大 */
/*　ボタン設定　*/
/* -----------------------------------------------------------
	logo 黒色設定
----------------------------------------------------------- */
#sightseeing .header_logo {
  background: url(../images/header/logo_black.png) no-repeat;
  background-size: contain;
}
@media only screen and (max-width: 640px) {
  #sightseeing .header_logo {
    background: none;
  }
}
#sightseeing .header_logo img {
  display: none;
}
@media only screen and (max-width: 640px) {
  #sightseeing .header_logo img {
    display: block;
  }
}

/* -----------------------------------------------------------
	ヘッダー　#header
----------------------------------------------------------- */
#header .con_mainimg {
  background: url(../sightseeing/images/img_main.jpg) center 0 no-repeat #7c6954;
}

/* -----------------------------------------------------------
	.con_intro
----------------------------------------------------------- */
.con_intro {
  padding-top: 530px;
  height: 0;
  overflow: hidden;
  background: url(../sightseeing/images/img_intro_pc.jpg) center 0 no-repeat;
}
@media only screen and (max-width: 1024px) {
  .con_intro {
    padding-top: 43%;
    background-size: auto 100%;
  }
}
@media only screen and (max-width: 640px) {
  .con_intro {
    height: auto;
    background: url(../sightseeing/images/img_intro_sp.jpg) center 0 no-repeat;
    background-size: 100% auto;
    padding-top: 90%;
    margin-bottom: 30px;
    padding-left: 2.5%;
    padding-right: 2.5%;
  }
  .con_intro .txt {
    margin-top: 1em;
    color: #24282f;
  }
}

/* -----------------------------------------------------------
	.con_sightseeing
----------------------------------------------------------- */
.con_sightseeing h3 {
  margin-bottom: 30px;
}
.con_sightseeing h3 span {
  display: inline-block;
  font-weight: normal;
}
@media only screen and (max-width: 640px) {
  .con_sightseeing h3 span {
    display: block;
  }
}
.con_sightseeing h3 span.en {
  font-family: "EB Garamond", serif;
  color: #24282f;
  font-size: 286%;
}
@media only screen and (max-width: 640px) {
  .con_sightseeing h3 span.en {
    font-size: 200%;
  }
}
.con_sightseeing h3 span.jp {
  font-size: 108%;
  position: relative;
  color: #7c6954;
  top: 10px;
  padding-left: 40px;
  font-weight: normal;
}
@media only screen and (max-width: 640px) {
  .con_sightseeing h3 span.jp {
    font-size: 100%;
    padding-left: 35px;
    padding-top: 7px;
    top: auto;
  }
}
.con_sightseeing h3 span.jp:before {
  content: ' ';
  position: absolute;
  top: -13px;
  left: 7px;
  width: 33px;
  height: 33px;
  background: url(../images/common/st_line_slash.png) no-repeat;
}
@media only screen and (max-width: 640px) {
  .con_sightseeing h3 span.jp:before {
    width: 26px;
    height: 26px;
    top: 2px;
    left: 4px;
  }
}
@media only screen and (max-width: 640px) and (max-width: 450px) {
  .con_sightseeing h3 span.jp:before {
    width: 26px;
    height: 26px;
    top: -2px;
    left: 4px;
  }
}

@media only screen and (max-width: 640px) {
  .con_sightseeing h3 {
    margin-bottom: 20px;
  }
}
.con_sightseeing .catemenu ul {
  overflow: hidden;
  margin-top: -2%;
  margin-bottom: 30px;
  margin-left: -2%;
}
@media only screen and (max-width: 640px) {
  .con_sightseeing .catemenu ul {
    display: none;
  }
}
.con_sightseeing .catemenu ul li {
  float: left;
  width: 23%;
  margin-left: 2%;
  margin-top: 2%;
  text-align: center;
}
.con_sightseeing .catemenu ul li a {
  width: 100%;
  display: inline-block;
  padding: 9px 10px;
  background: #fff;
  color: #000;
  border: solid 1px #000;
  text-decoration: none;
  text-align: center;
  font-family: "EB Garamond", serif;
  -webkit-transition: all .2s ease;
  -moz-transition: all .2s ease;
  -ms-transition: all .2s ease;
  -o-transition: all .2s ease;
  transition: all .2s ease;
}
.con_sightseeing .catemenu ul li a:hover {
  background: #62a1e1;
  color: #fff;
}
.con_sightseeing .catemenu ul li a:hover i.fa-angle-right {
  margin-right: -0.2em;
  margin-left: 0.8em;
}
.con_sightseeing .catemenu ul li a i {
  margin-right: 0.6em;
}
.con_sightseeing .catemenu ul li a i.fa-angle-right {
  margin-right: 0;
  margin-left: 0.6em;
  -webkit-transition: all .2s ease;
  -moz-transition: all .2s ease;
  -ms-transition: all .2s ease;
  -o-transition: all .2s ease;
  transition: all .2s ease;
}
.con_sightseeing .catemenu ul li a.cate00.active, .con_sightseeing .catemenu ul li a.cate00:hover {
  color: #fff;
  background: #cb7567;
}
.con_sightseeing .catemenu ul li a.cate01.active, .con_sightseeing .catemenu ul li a.cate01:hover {
  color: #fff;
  background: #cb7567;
}
.con_sightseeing .catemenu ul li a.cate02.active, .con_sightseeing .catemenu ul li a.cate02:hover {
  color: #fff;
  background: #dda5c1;
}
.con_sightseeing .catemenu ul li a.cate03.active, .con_sightseeing .catemenu ul li a.cate03:hover {
  color: #fff;
  background: #df913d;
}
.con_sightseeing .catemenu ul li a.cate04.active, .con_sightseeing .catemenu ul li a.cate04:hover {
  color: #fff;
  background: #e8cc5c;
}
.con_sightseeing .catemenu ul li a.cate05.active, .con_sightseeing .catemenu ul li a.cate05:hover {
  color: #fff;
  background: #a3be5a;
}
.con_sightseeing .catemenu ul li a.cate06.active, .con_sightseeing .catemenu ul li a.cate06:hover {
  color: #fff;
  background: #24675b;
}
.con_sightseeing .catemenu ul li a.cate07.active, .con_sightseeing .catemenu ul li a.cate07:hover {
  color: #fff;
  background: #6ecdd0;
}
.con_sightseeing .catemenu ul li a.cate08.active, .con_sightseeing .catemenu ul li a.cate08:hover {
  color: #fff;
  background: #2873bf;
}
.con_sightseeing .catemenu ul li a.cate09.active, .con_sightseeing .catemenu ul li a.cate09:hover {
  color: #fff;
  background: #576280;
}
.con_sightseeing .catemenu ul li a.cate10.active, .con_sightseeing .catemenu ul li a.cate10:hover {
  color: #fff;
  background: #b176a2;
}
.con_sightseeing .catemenu select {
  width: 100%;
  margin-bottom: 20px;
}
@media only screen and (min-width: 641px) {
  .con_sightseeing .catemenu select {
    display: none;
  }
}
@media print {
  .con_sightseeing .catemenu select {
    display: none;
  }
}
.ie8 .con_sightseeing .catemenu select {
  display: none;
}
.con_sightseeing .wrap_map #gmap {
  height: 420px;
}
@media only screen and (max-width: 640px) {
  .con_sightseeing .wrap_map #gmap {
    height: 300px;
  }
}
.con_sightseeing .wrap_map .txt {
  margin-top: 1em;
}
.con_sightseeing .con_spot {
  margin-top: 30px;
}
.con_sightseeing .con_spot h4 {
  font-size: 129%;
  color: #24282f;
  position: relative;
  border: dotted 1px #b2b2b2;
  padding: 7px 7px 7px 45px;
  background: #f9f7f3;
  box-shadow: rgba(255, 255, 255, 0.8) 0px 0px 15px 5px inset;
  -webkit-box-shadow: rgba(255, 255, 255, 0.8) 0px 0px 15px 5px inset;
  -moz-box-shadow: rgba(255, 255, 255, 0.8) 0px 0px 15px 5px inset;
  margin-bottom: 30px;
}
@media only screen and (max-width: 640px) {
  .con_sightseeing .con_spot h4 {
    padding: 7px 7px 7px 30px;
    font-size: 100%;
    margin-bottom: 20px;
  }
}
.con_sightseeing .con_spot h4:before {
  content: ' ';
  position: absolute;
  top: 50%;
  left: 10px;
  width: 27px;
  height: 27px;
  margin-top: -13px;
  background: url(../images/common/ic_flower.png) center no-repeat;
  background-size: contain;
}
@media only screen and (max-width: 640px) {
  .con_sightseeing .con_spot h4:before {
    left: 5px;
    width: 20px;
    height: 20px;
    margin-top: -10px;
  }
}
.con_sightseeing .con_spot .wrap_spot {
  overflow: hidden;
  margin-left: -77px;
  margin-top: -50px;
}
@media only screen and (max-width: 1024px) {
  .con_sightseeing .con_spot .wrap_spot {
    margin-left: -3%;
  }
}
@media only screen and (max-width: 640px) {
  .con_sightseeing .con_spot .wrap_spot {
    margin-left: 0;
    margin-top: -30px;
  }
}
.con_sightseeing .con_spot .wrap_spot .box_spot {
  width: 315px;
  float: left;
  margin-left: 77px;
  margin-top: 50px;
}
@media only screen and (max-width: 1024px) {
  .con_sightseeing .con_spot .wrap_spot .box_spot {
    width: 30.33%;
    margin-left: 3%;
  }
}
@media only screen and (max-width: 640px) {
  .con_sightseeing .con_spot .wrap_spot .box_spot {
    width: 100%;
    margin-left: 0;
    margin-top: 30px;
  }
}
.con_sightseeing .con_spot .wrap_spot .box_spot .box_img {
  position: relative;
}
.con_sightseeing .con_spot .wrap_spot .box_spot .box_img .time {
  position: absolute;
  top: 0;
  left: 0;
  background: #ffffff;
}
.con_sightseeing .con_spot .wrap_spot .box_spot .box_img .time dl {
  vertical-align: middle;
  text-align: center;
  display: table-cell;
  width: 75px;
  height: 75px;
}
.con_sightseeing .con_spot .wrap_spot .box_spot .box_img .time dt {
  font-size: 93%;
  display: block;
}
.con_sightseeing .con_spot .wrap_spot .box_spot .box_img .time dd {
  font-size: 129%;
  display: block;
}
@media only screen and (max-width: 640px) {
  .con_sightseeing .con_spot .wrap_spot .box_spot .box_img .img img {
    width: 100%;
  }
}
.con_sightseeing .con_spot .wrap_spot .box_spot .box_content .cate {
  color: #fff;
  font-size: 93%;
  padding: 5px 10px;
  display: inline-block;
}
.con_sightseeing .con_spot .wrap_spot .box_spot .box_content .cate.cate01 {
  background: #cb7567;
}
.con_sightseeing .con_spot .wrap_spot .box_spot .box_content .cate.cate02 {
  background: #dda5c1;
}
.con_sightseeing .con_spot .wrap_spot .box_spot .box_content .cate.cate03 {
  background: #df913d;
}
.con_sightseeing .con_spot .wrap_spot .box_spot .box_content .cate.cate04 {
  background: #e8cc5c;
}
.con_sightseeing .con_spot .wrap_spot .box_spot .box_content .cate.cate05 {
  background: #a3be5a;
}
.con_sightseeing .con_spot .wrap_spot .box_spot .box_content .cate.cate06 {
  background: #24675b;
}
.con_sightseeing .con_spot .wrap_spot .box_spot .box_content .cate.cate07 {
  background: #6ecdd0;
}
.con_sightseeing .con_spot .wrap_spot .box_spot .box_content .cate.cate08 {
  background: #2873bf;
}
.con_sightseeing .con_spot .wrap_spot .box_spot .box_content .cate.cate09 {
  background: #576280;
}
.con_sightseeing .con_spot .wrap_spot .box_spot .box_content .cate.cate10 {
  background: #b176a2;
}
.con_sightseeing .con_spot .wrap_spot .box_spot .box_content h5 {
  font-size: 129%;
  margin-top: 0.8em;
}
.con_sightseeing .con_spot .wrap_spot .box_spot .box_content .txt {
  margin-top: 0.5em;
}
.con_sightseeing .con_spot .wrap_spot .box_spot .box_info {
  margin-top: 15px;
  border-top: 1px solid #c2beb8;
  border-bottom: 1px solid #c2beb8;
}
.con_sightseeing .con_spot .wrap_spot .box_spot .box_info ul {
  display: table;
  padding: 12px 0;
  width: 100%;
}
.con_sightseeing .con_spot .wrap_spot .box_spot .box_info ul li {
  display: table-cell;
  width: 50%;
  padding: 0 5px;
  text-align: center;
}
.con_sightseeing .con_spot .wrap_spot .box_spot .box_info ul li a {
  text-decoration: none;
}
.con_sightseeing .con_spot .wrap_spot .box_spot .box_info ul li .fa-map-marker,
.con_sightseeing .con_spot .wrap_spot .box_spot .box_info ul li .fa-desktop {
  margin-right: 0.5em;
}

/* -----------------------------------------------------------
	.pagenation
----------------------------------------------------------- */
.pagination {
  overflow: hidden;
}
.pagination.top {
  margin-bottom: 25px;
}
.pagination.bottom {
  border-bottom: 1px solid #cccccc;
  margin-bottom: 30px;
  padding: 40px 0;
}
@media only screen and (max-width: 640px) {
  .pagination.bottom {
    padding: 20px 0;
  }
}
.pagination.bottom ul {
  float: none !important;
  text-align: center;
}
.pagination span.result {
  display: inline-block;
  vertical-align: middle;
  padding: 10px 0;
}
.pagination ul {
  float: right;
  text-align: left;
}
@media only screen and (max-width: 640px) {
  .pagination ul {
    width: 100%;
    float: none;
    text-align: center;
  }
}
.pagination ul li {
  display: inline-block;
  position: relative;
}
.pagination ul li:first-child {
  padding-right: 15px;
}
.pagination ul li:first-child a:before {
  position: absolute;
  top: 2px;
  right: 0;
  content: "|";
  width: 10px;
  height: 10px;
}
.pagination ul li:last-child {
  padding-left: 15px;
}
.pagination ul li:last-child a:before {
  position: absolute;
  top: 2px;
  left: 0;
  content: "|";
  width: 10px;
  height: 10px;
}
.pagination ul li a {
  margin: 0px 1px;
  padding: 1px 3px;
  text-align: center;
  text-decoration: none;
  text-decoration: underline;
  color: #7c6954;
  display: block;
}
.pagination ul li a.active, .pagination ul li a:hover {
  background: #c1b19d;
}