@charset "UTF-8";



/* ------------------------------
	.head_box
------------------------------ */
.head_box .head_img{
	background: url(../img/sightseeing/head_img.jpg) no-repeat center top;
	background-size: cover;
}

.head_box .head_ttl{
	background: url(../img/sightseeing/head_ttl_img.png) no-repeat center top;
	background-size: 220px;
}

.bg_wrap{
	background-position: center top;
}


@media screen and (max-width: 768px){
	.head_box .head_img{
		background: url(../img/sightseeing/head_img_sp.jpg) no-repeat center top;
		background-size: cover;
	}

	.head_box .head_ttl{
		background-size: 120px;
	}

	.sp_bg{
		background: url(../img/common/content_bg_sp01.png) no-repeat right top;
		background-size: 80%;
		background-position: right calc(100% + 72vw);
	}
}



/* ------------------------------
	#map
------------------------------ */
#map{
	position: relative;
	width: 100%;
	height: 700px;
	margin-bottom: 50px;
}

@media screen and (max-width: 768px) {
	#map{
		height: 250px;
		margin-bottom: 25px;
	}
}



/* ------------------------------
	.sightseeing
------------------------------ */
.sightseeing_nav{
	padding-bottom: 70px;
}
.sightseeing_nav ul{
	display: flex;
	justify-content: center;
}

.sightseeing_nav li + li{
	margin-left: 50px;
}

.sightseeing_nav a{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 300px;
	height: 80px;
	padding-bottom: 10px;
	color: #fff;
	font-size: 1.8rem;
}
.sightseeing_nav a::before{
	position: absolute;
	left: 0;
	right: 0;
	bottom: 15px;
	margin: auto;
	content: "";
	display: block;
	width: 16px;
	height: 7px;
	background: url(../img/common/ico_btm_arw.png) no-repeat center center;
	background-size: 100%;
}
.history_btn a{
	background: url(../img/sightseeing/btn_bg01.png) no-repeat center center;
	background-size: cover;
}
.nature_btn a{
	background: url(../img/sightseeing/btn_bg02.png) no-repeat center center;
	background-size: cover;
}
.experiencey_btn a{
	background: url(../img/sightseeing/btn_bg03.png) no-repeat center center;
	background-size: cover;
}

.sightseeing{
	padding-bottom: 60px;
}

.history .img_ttl_box{
	background: url(../img/sightseeing/history_bg.jpg) no-repeat center center;
	background-size: cover;
}
.nature .img_ttl_box{
	background: url(../img/sightseeing/nature_bg.jpg) no-repeat center center;
	background-size: cover;
}
.experience .img_ttl_box{
	background: url(../img/sightseeing/experience_bg.jpg) no-repeat center center;
	background-size: cover;
}

.sightseeing_wrap{
	display: flex;
	flex-wrap: wrap;
}

.sightseeing_box{
	position: relative;
	width: 30.5%;
	padding-bottom: 90px;
}
.sightseeing_box + .sightseeing_box:not(:nth-child(3n +1)){
	margin-left: 4.25%;
}
.sightseeing_box:nth-child(n + 4){
	margin-top: 50px;
}

.sightseeing_box:nth-child(3n - 1) { -webkit-transition-delay: .25; transition-delay: .25s; }
.sightseeing_box:nth-child(3n) { -webkit-transition-delay: .5s; transition-delay: .5s; }

.sightseeing_box .ttl{
	margin: 20px 0;
	font-size: 2.0rem;
	font-weight: bold;
}

.sightseeing_box .arrival{
	display: flex;
	justify-content: space-between;
	margin-bottom: 10px;
}
.sightseeing_box .place{
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content:center;
	width: 80px;
	height: 35px;
	margin-right: 10px;
	background-color: #595757;
	font-size: 1.4rem;
	color: #fff;
}
.sightseeing_box .car{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 35px;
	border-top: 1px solid #aaa;
	border-bottom: 1px solid #aaa;
}
.sightseeing_box .car span{
	position: relative;
}
.sightseeing_box .car span::before{
	position: absolute;
	top: 0;
	bottom: 0;
	left: -38px;
	margin: auto;
	content: "";
	display: block;
	width: 26px;
	height: 100%;
	background: url(../img/sightseeing/ico_car.png) no-repeat center center;
	background-size: 100%;
}

.sightseeing_box .box_btm{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
}

.sightseeing_box .note{
	font-size: 1.2rem;
	font-weight: 500;
	margin-bottom: 15px;
	line-height: 2;
}

.sightseeing_box .btn_box{
	display: flex;
	justify-content: space-between;
}

.sightseeing_box .btn a{
	width: 170px;
	height: 40px;
	padding-left: 10px;
	font-size: 1.4rem;
	letter-spacing: 0;
}

.sightseeing_box .btn.map a::after{
	left: 8%;
	right: initial;
	width: 12px;
	background: url(../img/sightseeing/ico_map.png) no-repeat center center;
	background-size: 100%;
}
.sightseeing_box .btn.map a:hover::after{
	background: url(../img/sightseeing/ico_map_wh.png) no-repeat center center;
	background-size: 100%;
}

.sightseeing_box .btn.hp a::after{
	width: 8px;
}
.sightseeing_box .btn.hp a span::before{
	position: absolute;
	z-index: 2;
	left: 5%;
	top: 0;
	bottom: 0;
	margin: auto;
	content: "";
	width: 23px;
	height: 100%;
	background: url(../img/sightseeing/ico_hp.png) no-repeat center center;
	background-size: 100%;
}
.sightseeing_box .btn.hp a:hover span::before{
	background: url(../img/sightseeing/ico_hp_wh.png) no-repeat center center;
	background-size: 100%;
}


@media screen and (max-width: 768px) {
	.sightseeing_nav{
		padding-bottom: 50px;
	}
	.sightseeing_nav li + li{
		margin-left: 10px;
	}
	.sightseeing_nav a{
		width: 95px;
		height: 40px;
		font-size: 1.4rem;
	}
	.sightseeing_nav a::before{
		bottom: 6px;
		width: 12px;
	}

	.sightseeing{
		padding-bottom: 30px;
	}

	.history .img_ttl_box{
		margin-bottom: 25px;
		background: url(../img/sightseeing/history_bg_sp.jpg) no-repeat center center;
		background-size: cover;
	}
	.nature .img_ttl_box{
		margin-bottom: 25px;
		background: url(../img/sightseeing/nature_bg_sp.jpg) no-repeat center center;
		background-size: cover;
	}
	.experience .img_ttl_box{
		margin-bottom: 25px;
		background: url(../img/sightseeing/experience_bg_sp.jpg) no-repeat center center;
		background-size: cover;
	}

	.sightseeing_box{
		width: 100%;
		padding: 0;
	}
	.sightseeing_box + .sightseeing_box{
		margin-top: 30px;
	}
	.sightseeing_box + .sightseeing_box:not(:nth-child(3n +1)){
		margin-left: 0;
	}

	.sightseeing_box:nth-child(3n - 1),
	.sightseeing_box:nth-child(3n){
		-webkit-transition-delay: 0s; transition-delay: 0s;
	}

	.sightseeing_box .ttl{
		margin: 15px 0;
		font-size: 1.7rem;
		text-align: center;
	}

	.sightseeing_box .place{
		width: 60px;
		height: 30px;
		font-size: 1.2rem;
	}

	.sightseeing_box .car{
		height: 30px;
		font-size: 1.2rem;
	}
	.sightseeing_box .car span::before{
		width: 22px;
		left: -30px;
	}

	.sightseeing_box .box_btm{
		position: relative;
	}
	.sightseeing_box .btn_box{
		justify-content: center;
		margin-top: 10px;
	}

	.sightseeing_box .note{
		margin: 6px 0 10px;
	}

	.sightseeing_box .btn{
		width: 48%;
		max-width: 160px;
	}
	.sightseeing_box .btn + .btn{
		margin-left: 4%;
	}
	.sightseeing_box .btn a{
		width: 100%;
		height: 35px;
		font-size: 1.2rem;
	}

	.sightseeing_box .btn.map a::after{
		width: 10px;
	}
	.sightseeing_box .btn.map a:hover::after{
		width: 10px;
	}

	.sightseeing_box .btn.hp a span::before{
		width: 18px;
	}
	.sightseeing_box .btn.hp a:hover span::before{
		width: 18px;
	}
}



/* ------------------------------
	.link_wrap
------------------------------ */
.link_wrap{
	padding: 70px 0;
}

.link_box dl{
	display: flex;
}
.link_box dl:nth-child(even) dt,
.link_box dl:nth-child(even) dd{
	background: #f7f8f8;
}

.link_box dt{
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 300px;
	border-top: 1px solid #ddd;
	border-left: 1px solid #ddd;
	line-height: 2.2;
	font-weight: 500;
}
.link_box dl:last-child dt{
	border-bottom: 1px solid #ddd;
}

.link_box dd{
	width: 100%;
	padding: 12px 35px;
	border-top: 1px solid #ddd;
	border-left: 1px solid #ddd;
	border-right: 1px solid #ddd;
	line-height: 2.2;
	font-weight: 500;
}
.link_box dl:last-child dd{
	border-bottom: 1px solid #ddd;
}

@media screen and (max-width: 768px) {
	.link_wrap{
		padding: 30px 0;
	}

	.link_box dl{
		flex-wrap: wrap;
	}
	.link_box dt{
		width: 100%;
		padding: 6px 10px;
		border-right: 1px solid #ddd;
		background: #f7f8f8;
	}
	.link_box dl:last-child dt{
		border-bottom: 0;
	}
	.link_box dl:nth-child(even) dd{
		background: #fff;
	}
	.link_box dd{
		padding: 6px 10px;
		text-align: center;
	}
}