@charset "utf-8";
/* spot.css */

/*-------    detailBox      ------*/
.detailBox:not(:last-of-type) {
	margin-bottom: 60px;
	padding-bottom: 90px;
	position: relative;
}
.detailBox:not(:last-of-type):after {
	content: "";
	width: 920px;
	height: 30px;
	margin: auto;
	background: url(../img/line01.png) repeat-x 0 0;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
}

/*-------    spotBox      ------*/
.detailBox .spotBox:nth-of-type(odd) {
	background: url(../img/bg01.webp) repeat 0 0;
}
.spotBox {
	padding: 30px 20px;
}
.spotBox .detailTxt > .title {
	font-size: 16px;
	color: #6c6a04;
	border-bottom: 1px solid;
	padding-bottom: 10px;
	margin-bottom: 7px;
}
.spotBox .detailTxt > .title span {
	font-size: 20px;
	font-weight: bold;
	display: block;
	margin-top: 5px;
}
.spotBox:not(.spotOther) .detailConts {
	overflow: hidden;
}
.spotBox:not(.spotOther) .detailConts .detailTxt {
	min-height: 295px;
}
.spotBox:not(.spotOther) .detailConts .detailImg + .detailTxt {
	min-height: auto;
}
.spotBox:not(.spotOther) .detailConts.patternA .detailImg,
.spotBox:not(.spotOther) .detailConts.patternB .detailTxt {
	float: left;
}
.spotBox:not(.spotOther) .detailConts.patternB .detailImg,
.spotBox:not(.spotOther) .detailConts.patternA .detailTxt {
	float: right;
}
.spotBox:not(.spotOther) .detailConts .detailImg {
	width: 480px;
}
.spotBox:not(.spotOther) .detailTxt {
	width: 440px;
}
.spotBox:not(.spotOther) .detailConts.patternA .detailTxt > .title,
.spotBox:not(.spotOther) .detailConts.patternA .detailTxt > .txt {
	padding-left: 20px;
}
.spotBox:not(.spotOther) .detailConts.patternB .detailTxt > .title,
.spotBox:not(.spotOther) .detailConts.patternB .detailTxt > .txt {
	padding-right: 20px;
}
.spotBox.spotOther {
	overflow: hidden;
	padding: 30px;
}
.spotBox.spotOther.col03 .detailConts {
	width: 280px;
	float: left;
}
.spotBox.spotOther.col03 .detailConts:not(:first-of-type) {
	margin-left: 30px;
}
.spotBox.spotOther.col03 .detailConts .detailTxt {
	margin-top: 8px;
}

.spotBox .recommendSpot {
	position: relative;
	padding-top: 31px;
}
.spotBox .recommendSpot:before {
	content: url(../img/spot/map_txt01.png);
	position: absolute;
	top: -4px;
}
.spotBox .recommendSpot > .title {
	position: absolute;
	top: 0;
	left: 0;
}
.spotBox .selectBox {
	width: 920px;
	margin: 0 auto 27px;
}
.spotBox .selectBox .naviBox {
	position: relative;
	width: 100%;
	z-index: 5;
}
.spotBox .selectBox .naviBox .navi {
	position: absolute;
	top: -31px;
}
.spotBox .selectBox .naviBox .navi .switch {
	display: block;
}
.spotBox .selectBox .naviBox .navi .switch:hover {
	cursor: pointer;
}
.spotBox .selectBox .naviBox .navi.icon {
	left: 0;
	width: 473px;
}
.spotBox .selectBox .naviBox .navi.icon .switch {
	width: 36px;
	height: 48px;
	background: no-repeat 0 0;
	position: absolute;
}
.spotBox .selectBox .naviBox .navi.icon .switch.current,
.spotBox .selectBox .naviBox .navi.icon .switch:hover {
	animation: vertical .6s ease-in-out infinite alternate;
}
@keyframes vertical {
	0% { transform:translateY(0px); }
	100% { transform:translateY(-4px); }
}
.spotBox .selectBox .naviBox .navi.btn {
	right: -1px;
	overflow: hidden;
}
.spotBox .selectBox .naviBox .navi.btn .switch {
	float: left;
	width: 48px;
	height: 30px;
	margin: 1px 1px 0 0;
	background: #fff;
	border: 1px solid #634367;
	border-bottom: none;
	color: #634367;
	text-align: center;
	line-height: 30px;
}
.spotBox .selectBox.number8 .naviBox .navi.btn .switch {
	width: 54.125px;
}
.spotBox .selectBox.number9 .naviBox .navi.btn .switch {
	width: 48px;
}
.spotBox .selectBox .naviBox .navi.btn .switch.current,
.spotBox .selectBox .naviBox .navi.btn .switch:hover {
	margin-top: 0;
	background: #d2517a;
	color: #fff;
	border: 1px solid #d2517a;
	border-bottom: none;
	height: 31px;
}
.spotBox .selectBox .contsBox {
	width: 440px;
	margin: 0 0 0 auto;
	border: 1px solid #624266;
	box-shadow: 0 0 10px 2px rgba(0,0,0,.3);
}
.spotBox .selectBox .contsBox .conts {
	display: none;
}

.spotBox .selectBox .txtBox {
	background: #fff;
	min-height: 190px;
	padding: 11px 15px 22px;
}
.spotBox .selectBox .txtBox .title {
	color: #624266;
	line-height: 24px;
	font-size: 20px;
	margin-bottom: 4px;
}
.spotBox .selectBox .txtBox .title span {
	font-size: 16px;
	display: block;
	font-weight: bold;
}
.topicBox {
	overflow: hidden;
	width: 920px;
	margin: auto;
}
.topicBox .img ,
.topicBox .txtBox {
	float: left;
}
.topicBox .img {
	width: 290px;
}
.topicBox .txtBox {
	width: 340px;
}
.topicBox .txtBox .box {
	width: 298px;
}
.topicBox .txtBox .gondola{
	width: 300px;
  margin-top: 135px;
}
.topicBox .txtBox .box:not(:last-of-type) {
	margin-bottom: 24px;
}
.topicBox .txtBox .box.right {
	margin: 0 0 0 auto;
}
.topicBox .txtBox .box .title {
	font-size: 16px;
	line-height: 24px;
	font-weight: bold;
	color: #624266;
	border-bottom: 1px solid;
}
.topicBox .txtBox .box.left .title,
.topicBox .txtBox .box.left .txt {
	padding-left: 8px;
}
.topicBox .txtBox .box.right .title,
.topicBox .txtBox .box.right .txt {
	padding-right: 8px;
}
.topicBox .txtBox .box.right .title {
	text-align: right;
}
.specialBox {
	max-width: 740px;
	margin: 40px auto 0;
	position: relative;
	background: #f7f8ee;
	border: 1px solid #47607d;
	border-radius: 10px;
	padding: 11px 19px 17px;
}
.specialBox:before {
	content: url(../img/icon01.png);
	position: absolute;
	width: 50px;
	left: 0;
	right: 0;
	top: -21px;
	margin: auto;
}
.specialBox .title {
	text-align: center;
	margin-bottom: 18px;
}

/*spot01*/
.detailBox .spotBox.spot01 {
	background: url(../img/spot/spot01_img01.webp) no-repeat 0 0,
		url(../img/bg01.webp) repeat 0 0;
}
.spotBox.spot01 .recommendSpot {
	width: 960px;
	margin-left: -20px;
	background: url(../img/spot/spot01_map01.webp) no-repeat 0 61px;
}
.spotBox.spot01 .recommendSpot:before {
	left: 378px;
}
.spotBox.spot01 .selectBox .naviBox .navi.icon .switch.no01 {
	top: 141px;
	left: 96px;
}
.spotBox.spot01 .selectBox .naviBox .navi.icon .switch.no02 {
	top: 198px;
	left: 41px;
}
.spotBox.spot01 .selectBox .naviBox .navi.icon .switch.no03 {
	top: 113px;
	right: 41px;
}
.spotBox.spot01 .selectBox .naviBox .navi.icon .switch.no04 {
	top: 152px;
	right: 12px;
}
.spotBox.spot01 .selectBox .naviBox .navi.icon .switch.no05 {
	top: 213px;
	left: 178px;
}
.spotBox.spot01 .selectBox .naviBox .navi.icon .switch.no06 {
	top: 195px;
	left: 130px;
}
.spotBox.spot01 .selectBox .naviBox .navi.icon .switch.no07 {
	top: 195px;
	right: 225px;
}
.spotBox.spot01 .selectBox .naviBox .navi.icon .switch.no08 {
	top: 129px;
	right: 128px;
}
.spotBox.spot01 .selectBox .naviBox .navi.icon .switch.no09 {
	top: 411px;
	left: 38px;
}


/*spot02*/
.spotBox.spot02 {
	background: url(../img/spot/spot02_img01.webp) no-repeat 0 0;
}
.spotBox.spot02 .recommendSpot {
	width: 1200px;
	margin-left: -260px;
	padding: 31px 0 0 240px;
	background: url(../img/spot/spot02_map01.webp) no-repeat 0 94px;
}
.spotBox.spot02 .recommendSpot:before {
	left: 506px;
}
.spotBox.spot02 .recommendSpot > .title {
	left: 240px;
}
.spotBox.spot02 .selectBox .naviBox .navi.icon .switch.no01 {
	left: -2px;
	top: 370px;
}
.spotBox.spot02 .selectBox .naviBox .navi.icon .switch.no02 {
	left: 28px;
	top: 275px;
}
.spotBox.spot02 .selectBox .naviBox .navi.icon .switch.no03 {
	left: 216px;
	top: 170px;
}
.spotBox.spot02 .selectBox .naviBox .navi.icon .switch.no04 {
	right: 163px;
	top: 197px;
}
.spotBox.spot02 .selectBox .naviBox .navi.icon .switch.no05 {
	right: 188px;
	top: 141px;
}
.spotBox.spot02 .selectBox .naviBox .navi.icon .switch.no06 {
	right: 154px;
	top: 114px;
}
.spotBox.spot02 .selectBox .naviBox .navi.icon .switch.no07 {
	left: 163px;
	top: 129px;
}
.spotBox.spot02 .selectBox .naviBox .navi.icon .switch.no08 {
	left: 206px;
	top: 100px;
}
.spotBox.spot02 .recommendSpot .selectBox .contsBox {
	margin-right: 0;
}

/*-------    modal      ------*/
.modalConts {
	display: none;
	/*width: 720px;
	height: auto;*/
	margin: 0;
	padding: 20px;
	box-sizing: border-box;
	position: fixed;
	z-index: 50;
}
.modalBg {
	display: none;
	width: 100%;
	height: 100%;
	background-color: rgba(81,85,46,0.95);
	position: fixed;
	top: 0;
	left: 0;
	z-index: 40;
}
.modalBtn {
	margin-top: 22px;
}
.modalClose {
	width: 42px;
	height: 42px;
	background: url(../img/spot/modal_icon01.png) no-repeat 0 0;
	cursor: pointer;
	position: absolute;
	right: 0;
	top: 0;
}
.fb-like iframe {
	z-index: 10;
}