@charset "utf-8";
/* ===================================================
	sightseeing CSS
====================================================== */

#contents_wrap { color: #fff;}

h2 { padding: 160px 0 180px; text-align: center; font-size: 50px; text-shadow: 1px 0px 8px #000, 0px 1px 8px #000, -1px 0px 8px #000, 0px -1px 8px #000; background: url(../../sightseeing/img/tit_bg.jpg)no-repeat; background-size: cover;}
h2 span { display: block; margin: 0 auto; font-size: 16px; color: #e2c788;}

@media screen and (max-width: 600px) {
h2 { padding: 130px 0 90px; font-size: 30px;}
h2 span { font-size: 14px;}
}

/* ---------------------------------------------------
lead
------------------------------------------------------ */
#lead_wrap { background: url(../img/f_bg.gif);}
#lead { padding: 60px 0;}
#lead dl { display: table; width: 1100px; margin: 0 auto;}
#lead dt,#lead dd { display: table-cell; vertical-align: top;}
#lead dt { font-size: 36px; color: #ffe6b2; width: 320px;}
#lead dd { padding: 0 0 0 70px;}

@media screen and (max-width: 1100px) {
  #lead dl { width: 94%;}
}

@media screen and (max-width: 600px) {
  #lead { padding: 30px 0;}
  #lead dl { display: block;}
  #lead dt, #lead dd { display: block;}
  #lead dt { padding: 0 0 10px; font-size: 26px; width: 100%;}
  #lead dd { padding: 0;}
}

/* ---------------------------------------------------
#map
------------------------------------------------------ */
#map { padding: 90px 0 120px; background: url(../img/bg2.gif);}
#map >div { width: 1100px; margin: 0 auto; padding: 0 0 60px; background-color: #fff; border-radius: 12px; color: #000;}
#map >div >a:nth-of-type(1) img { display: block; margin: 0 auto; padding: 27px 0 0;}
#map >div >a:nth-of-type(2) { float: right; margin: 0 60px 40px 0;}
#map >div >ul { clear: both; width: 1050px; margin: 0 auto; border-top: 1px solid #c7c7c7; border-left: 1px solid #c7c7c7;}
#map >div >ul li { position: relative; float: left; width: 25%; min-height: 210px; padding: 20px; box-sizing: border-box; border-bottom: 1px solid #c7c7c7; border-right: 1px solid #c7c7c7;}
#map >div >ul li.shop_tit { position: relative; padding: 0 10px; background-color: #000; color: #fff; text-align: center; border: none;}
#map >div >ul li.shop_tit p { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: table; margin: 0 auto;}
#map >div >ul li.shop_tit span { display: block; margin: 10px 0 0; padding: 5px 20px; border-top: 1px solid #808080;}
#map >div >ul li:not(.shop_tit) p:nth-of-type(1) { padding: 0 0 8px 23px; border-bottom: 1px dotted #c7c7c7; background: url(../../sightseeing/img/icon.png)no-repeat left 4px;}
#map >div >ul li a { position: absolute; right: 16px; top: 16px;}
#map >div >ul li p:nth-of-type(2) { font-size: 15px;}
#map >div >ul li.map_detail { border-right: none; border-bottom: none; width: -webkit-calc(100% - 25%); width: calc(100% - 47%) ; color: #cf481f; padding: 40px;}

@media screen and (max-width: 1100px) {
  #map >div { width: 94%;}
  #map >div >ul { width: 94%;}
}

@media screen and (max-width: 600px) {
  #map { padding: 45px 0 60px;}
  #map >div { padding: 0;}
  #map >div >a:nth-of-type(2) { display: none;}
  #map >div >ul { margin: 20px auto 0; border-left: none;}
  #map >div >ul li.shop_tit { float: none; width: 100%; min-height: inherit;}
  #map >div >ul li.shop_tit p { position: static; transform: none; padding: 40px 0;}
  #map >div >ul li { width: 50%; border-right: none;}
  #map >div >ul li:nth-of-type(n+1) { border-left: 1px solid #c7c7c7;}
  #map >div >ul li:nth-of-type(2n+1) { border-right: 1px solid #c7c7c7;}
  #map >div >ul li p:nth-of-type(2) { padding: 0 0 10px;}
  #map >div >ul li a { display: block; position: static; width: 70px;}
  #map >div >ul li.map_detail { clear: both; float: none; width: 100%; padding: 40px 30px; border: none;}

}

/* ---------------------------------------------------
#cnav
------------------------------------------------------ */
#cnav li { float: left; width: calc(100% / 4);}
#cnav li:hover { opacity: 0.7;}
#cnav li a { display: block; position: relative; min-height: 500px;}
#cnav li a> span { position: absolute; bottom: 25px; display: block; width: 100%; padding: 0 0 70px; color: #fff5e0; font-size: 32px; text-align: center; background: url(../../sightseeing/img/cnav_arrow.png)no-repeat bottom center;}
#cnav li a> span span { display: block;}
#cnav li:nth-of-type(1) { background: url(../../sightseeing/img/cnav1.jpg)no-repeat center center; background-size: cover;}
#cnav li:nth-of-type(2) { background: url(../../sightseeing/img/cnav2.jpg)no-repeat center center; background-size: cover;}
#cnav li:nth-of-type(3) { background: url(../../sightseeing/img/cnav3.jpg)no-repeat center center; background-size: cover;}
#cnav li:nth-of-type(4) { background: url(../../sightseeing/img/cnav4.jpg)no-repeat center center; background-size: cover;}

@media screen and (max-width: 1300px) {
  #cnav li a> span { font-size: 26px;}
}

@media screen and (max-width: 600px) {
  #cnav li { width: 50%;}
  #cnav li a { min-height: 250px;}
  #cnav li a> span { bottom: 10px; padding: 0 2% 40px; font-size: 16px; line-height: 1.2; box-sizing: border-box;}
}


/* ---------------------------------------------------
#sec1
------------------------------------------------------ */
#sec1 { padding: 90px 0;}
#sec1 h3 { padding: 0 0 50px; font-size: 45px; color: #fff5e0; text-align: center;}
#sec1 h3 span { display: table; margin: 0 auto; padding: 0 23px; font-size: 16px; color: #ffe2a0; background: url(../../img/sec_tit_icon1.png)no-repeat left center,url(../../img/sec_tit_icon2.png)no-repeat right center;}
#sec1 #sec1_map_pc { display: block; margin: 0 auto 40px; text-align: center;}
#sec1 #sec1_map_sp { display: none;}
#sec1 p { text-align: center; color: #ffe2a0;}
#sec1 a { display: block; width: 524px; margin: 15px auto 0;}

@media screen and (max-width: 600px) {
#sec1 { padding: 50px 0;}
#sec1 h3 { padding: 0 0 30px; font-size: 26px;}
#sec1 #sec1_map_pc { display: none;}
#sec1 #sec1_map_sp { display: block; width: 94%; margin: 0 auto 20px;}
#sec1 a { max-width: 94%;}
}

/* ---------------------------------------------------
#sec2
------------------------------------------------------ */
#sec2 { padding: 90px 0 0; background: url(../img/bg2.gif);}
#sec2 h3 { padding: 0 0 50px; font-size: 45px; color: #fff5e0; text-align: center;}
#sec2 h3 span { display: table; margin: 0 auto; padding: 0 23px; font-size: 16px; color: #ffe2a0; background: url(../../img/sec_tit_icon1.png)no-repeat left center,url(../../img/sec_tit_icon2.png)no-repeat right center;}
#sec2 section { width: 1100px; margin: 0 auto;}
#sec2 section div { float: left; margin: 0 0 110px; width: 520px;}
#sec2 section div:nth-of-type(even) { float: right;}
#sec2 section div >img { display: block; margin: 0 auto;}
#sec2 section div h4 { padding: 10px 0; text-align: center; font-size: 30px; color: #fff5e0; border-bottom: 1px solid #ababab;}
#sec2 section div h4+span { display: table; margin: 5px auto 0; padding: 0 0 0 25px; font-size: 16px; text-align: center; color: #ffe2a0;}
#sec2 section div h4+span.spot_car { background: url(../../sightseeing/img/spot_icon1.png)no-repeat left 4px;}
#sec2 section div h4+span.spot_walk { background: url(../../sightseeing/img/spot_icon2.png)no-repeat left 3px;}
#sec2 section div p { padding: 30px 0;}
#sec2 section div ul:nth-last-of-type(1) li { float: left; width: 49%; text-align: center; background-color: #000;}
#sec2 section div ul:nth-last-of-type(1) li:hover { opacity: 0.7;}
#sec2 section div ul:nth-last-of-type(1) li a { display: block; padding: 10px 0; color: #fff; font-size: 15px;}
#sec2 section div ul:nth-last-of-type(1) li a:hover { text-decoration: none;}
#sec2 section div ul:nth-last-of-type(1) li:nth-of-type(1) span { padding: 2px 0 2px 25px; background: url(../../sightseeing/img/btn_icon1.png)no-repeat left 2px;}
#sec2 section div ul:nth-last-of-type(1) li:nth-of-type(2) { float: right; background-color: #ae9292;}
#sec2 section div ul:nth-last-of-type(1) li:nth-of-type(2) a { color: #000;}
#sec2 section div ul:nth-last-of-type(1) li:nth-of-type(2) span { padding: 4px 0 4px 25px; background: url(../../sightseeing/img/btn_icon2.png)no-repeat left 2px;}

#sec2 section div ul.spot_detail { margin: 0 0 20px; padding: 20px; background-color: rgba(0,0,0,0.5);}
#sec2 section div ul.spot_detail li { padding: 0 0 0 20px; font-size: 15px; background: url(../../sightseeing/img/detail_icon.gif)no-repeat left 10px;}

#sec2 section div:nth-of-type(3) ul li { float: none; width: 100%;}


@media screen and (max-width: 1100px) {
  #sec2 section { width: 94%;}
  #sec2 section div { width: 49%;}
}

@media screen and (max-width: 600px) {
  #sec2 { padding: 50px 0;}
  #sec2 h3 { padding: 0 0 30px; font-size: 26px;}
  #sec2 section div h4 { font-size: 20px;}
  #sec2 section div,
  #sec2 section div:nth-of-type(even) { float: none; width: 100%; margin: 0 auto 40px;}
  #sec2 section div p { padding: 20px 0;}
}


/* ---------------------------------------------------
#sec3
------------------------------------------------------ */
#sec3 { padding: 90px 0 0;}
#sec3 h3 { padding: 0 0 50px; font-size: 45px; color: #fff5e0; text-align: center;}
#sec3 h3 span { display: table; margin: 0 auto; padding: 0 23px; font-size: 16px; color: #ffe2a0; background: url(../../img/sec_tit_icon1.png)no-repeat left center,url(../../img/sec_tit_icon2.png)no-repeat right center;}
#sec3 section { width: 1100px; margin: 0 auto;}
#sec3 section div { float: left; margin: 0 0 110px; width: 520px;}
#sec3 section div >img { display: block; margin: 0 auto;}
#sec3 section div:nth-of-type(even) { float: right;}
#sec3 section div h4 { padding: 10px 0; text-align: center; font-size: 30px; color: #fff5e0; border-bottom: 1px solid #ababab;}
#sec3 section div h4+span { display: table; margin: 5px auto 0; padding: 0 0 0 25px; font-size: 16px; text-align: center; color: #ffe2a0;}
#sec3 section div h4+span.spot_car { background: url(../../sightseeing/img/spot_icon1.png)no-repeat left 4px;}
#sec3 section div h4+span.spot_walk { background: url(../../sightseeing/img/spot_icon2.png)no-repeat left 3px;}
#sec3 section div p { padding: 30px 0;}
#sec3 section div ul:nth-last-of-type(1) li { float: left; width: 49%; text-align: center; background-color: #000;}
#sec3 section div ul:nth-last-of-type(1) li:hover { opacity: 0.7;}
#sec3 section div ul:nth-last-of-type(1) li a { display: block; padding: 10px 0; color: #fff; font-size: 15px;}
#sec3 section div ul:nth-last-of-type(1) li a:hover { text-decoration: none;}
#sec3 section div ul:nth-last-of-type(1) li:nth-of-type(1) span { padding: 2px 0 2px 25px; background: url(../../sightseeing/img/btn_icon1.png)no-repeat left 2px;}
#sec3 section div ul:nth-last-of-type(1) li:nth-of-type(2) { float: right; background-color: #ae9292;}
#sec3 section div ul:nth-last-of-type(1) li:nth-of-type(2) a { color: #000;}
#sec3 section div ul:nth-last-of-type(1) li:nth-of-type(2) span { padding: 4px 0 4px 25px; background: url(../../sightseeing/img/btn_icon2.png)no-repeat left 2px;}

#sec3 section div ul.spot_detail { margin: 0 0 20px; padding: 20px; background-color: rgba(0,0,0,0.5);}
#sec3 section div ul.spot_detail li { padding: 0 0 0 20px; font-size: 15px; background: url(../../sightseeing/img/detail_icon.gif)no-repeat left 10px;}

#sec3 section div h4 span { margin: 0 5px 0 0; padding: 3px 7px; font-size: 18px; color: #000; background-color: #dfc68f;}

@media screen and (max-width: 1100px) {
  #sec3 section { width: 94%;}
  #sec3 section div { width: 49%;}
}

@media screen and (max-width: 600px) {
  #sec3 { padding: 50px 0;}
  #sec3 h3 { padding: 0 0 30px; font-size: 26px;}
  #sec3 section div h4 { font-size: 20px;}
  #sec3 section div,
  #sec3 section div:nth-of-type(even) { float: none; width: 100%; margin: 0 auto 40px;}
  #sec3 section div p { padding: 20px 0;}
}

/* ---------------------------------------------------
#sec4
------------------------------------------------------ */
#sec4 { padding: 90px 0 0; background: url(../img/bg2.gif);}
#sec4 h3 { padding: 0 0 50px; font-size: 45px; color: #fff5e0; text-align: center;}
#sec4 h3 span { display: table; margin: 0 auto; padding: 0 23px; font-size: 16px; color: #ffe2a0; background: url(../../img/sec_tit_icon1.png)no-repeat left center,url(../../img/sec_tit_icon2.png)no-repeat right center;}
#sec4 section { width: 1100px; margin: 0 auto;}
#sec4 section div { float: left; margin: 0 0 110px; width: 520px;}
#sec4 section div >img { display: block; margin: 0 auto;}
#sec4 section div:nth-of-type(even) { float: right;}
#sec4 section div h4 { padding: 10px 0; text-align: center; font-size: 30px; color: #fff5e0; border-bottom: 1px solid #ababab;}
#sec4 section div h4+span { display: table; margin: 5px auto 0; padding: 0 0 0 25px; font-size: 16px; text-align: center; color: #ffe2a0;}
#sec4 section div h4+span.spot_car { background: url(../../sightseeing/img/spot_icon1.png)no-repeat left 4px;}
#sec4 section div h4+span.spot_walk { background: url(../../sightseeing/img/spot_icon2.png)no-repeat left 3px;}
#sec4 section div p { padding: 30px 0;}
#sec4 section div ul:nth-last-of-type(1) li { float: left; width: 49%; text-align: center; background-color: #000;}
#sec4 section div ul:nth-last-of-type(1) li:hover { opacity: 0.7;}
#sec4 section div ul:nth-last-of-type(1) li a { display: block; padding: 10px 0; color: #fff; font-size: 15px;}
#sec4 section div ul:nth-last-of-type(1) li a:hover { text-decoration: none;}
#sec4 section div ul:nth-last-of-type(1) li:nth-of-type(1) span { padding: 2px 0 2px 25px; background: url(../../sightseeing/img/btn_icon1.png)no-repeat left 2px;}
#sec4 section div ul:nth-last-of-type(1) li:nth-of-type(2) { float: right; background-color: #ae9292;}
#sec4 section div ul:nth-last-of-type(1) li:nth-of-type(2) a { color: #000;}
#sec4 section div ul:nth-last-of-type(1) li:nth-of-type(2) span { padding: 4px 0 4px 25px; background: url(../../sightseeing/img/btn_icon2.png)no-repeat left 2px;}

#sec4 section div ul.spot_detail { margin: 0 0 20px; padding: 20px; background-color: rgba(0,0,0,0.5);}
#sec4 section div ul.spot_detail li { padding: 0 0 0 20px; font-size: 15px; background: url(../../sightseeing/img/detail_icon.gif)no-repeat left 10px;}

@media screen and (max-width: 1100px) {
  #sec4 section { width: 94%;}
  #sec4 section div { width: 49%;}
}

@media screen and (max-width: 600px) {
  #sec4 { padding: 50px 0;}
  #sec4 h3 { padding: 0 0 30px; font-size: 26px;}
  #sec4 section div h4 { font-size: 20px;}
  #sec4 section div,#sec4 section div:nth-of-type(even) { float: none; width: 100%; margin: 0 auto 40px;}
  #sec4 section div p { padding: 20px 0;}
}


section:after,#map >div >ul:after,#cnav:after,
section div ul:nth-last-of-type(1):after { content: "."; display: block; height: 0px; clear: both; visibility: hidden; font-size: 0;}