@charset 'utf-8';


/* =========================================================
tourism
========================================================= */
#tourism {
	overflow: hidden;
}


/* =========================================================
tourism_spot
========================================================= */
#tourism_spot {
	overflow: hidden;
}
#tourism_spot .inner{
	padding-top: 60px;
	padding-bottom: 60px;
	position: relative;
}
.tourism_spot--title{
	margin-bottom: 60px;
}
@media print, screen and (min-width: 768px) {
	#tourism_spot .inner{
		padding-top: 120px;
		padding-bottom: 120px;
	}
}
@media only screen and (max-width: 767px) {
	.tourism_spot--title{
		margin-bottom: 30px;
	}
}

/* =========================================================
tourism_spot_list
========================================================= */
.tourism_spot_list {
	width: 100%;
	display:         flex;
	display: -webkit-flex;
	-webkit-justify-content: flex-start;
	        justify-content: flex-start;
	        flex-flow: row wrap;
	-webkit-flex-flow: row wrap;
	        align-items: stretch;
	-webkit-align-items: stretch;
	gap:60px 3.65%;
}
.tourism_spot_list li {
	width: 30.9%;
	display:         flex;
	display: -webkit-flex;
	-webkit-justify-content: space-between;
	        justify-content: space-between;
	        flex-flow: column wrap;
	-webkit-flex-flow: column wrap;
	        align-items: center;
	-webkit-align-items: center;
}
@media only screen and (max-width: 767px){
	.tourism_spot_list {
		gap:30px 0px;
	}
	.tourism_spot_list li {
	-webkit-justify-content: flex-start;
	        justify-content: flex-start;
		width: 100%;
	}
}
.tourism_spot_list li > *{
	width: 100%;
}
.tourism_spot_list [class*="btn_area"]{
	-webkit-justify-content: space-between;
  justify-content: space-between;
}
.tourism_spot_list [class*="btn_area"] [class*="btn_def"]{
	margin: 0 auto 0 0;
}
.tourism_spot_list [class*="btn_area"] [class*="btn_def"] + [class*="btn_def"]{
	margin: 0 0 0 auto;
}
.tourism_spot_img {
	width: 100%;
	position: relative;
	padding-top: 71%;
	overflow: hidden;
}
.tourism_spot_img picture,
.tourism_spot_img img{
	width: 100%;
}
.tourism_spot_img img{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	display: block;
}
.tourism_spot_info {
	margin-top: 20px;
	margin-bottom: auto;
}
.tourism_spot_title {
	text-align: center;
}
.tourism_spot_txt {
	margin-top: 15px;
	text-align: left;
}
.tourism_spot_ex {
	display:         flex;
	display: -webkit-flex;
	-webkit-justify-content: flex-end;
	        justify-content: flex-end;
	        flex-flow: row wrap;
	-webkit-flex-flow: row wrap;
	        align-items: flex-start;
	-webkit-align-items: flex-start;
	margin-top: 15px;
}
.tourism_spot_ex span{
	position: relative;
}
.tourism_spot_ex span:before,
.tourism_spot_ex span:after{
	content: "";
	position: absolute;
	display: block;
	width: calc(100% + 4px);
	left: -2px;
}
.tourism_spot_ex span:before{
/*	bottom:100%;
	margin-bottom: 2px;
	border-top: 2px solid var(--main-color--font3);*/
}
.tourism_spot_ex span:after{
	top:100%;
	margin-top: 2px;
	border-bottom: 2px solid var(--main-color--font3);
}
.tourism_spot_btn {
	gap:20px;
	margin-top: 30px;
}
.tourism_spot_btn a{
	width: calc(50% - 10px);
}
.tourism_spot_btn.btn_area--ski {
	-webkit-justify-content: flex-start;
	        justify-content: flex-start;
	        flex-flow: row wrap;
	-webkit-flex-flow: row wrap;

}
.tourism_spot_btn.btn_area--ski a{
/*	width: 100%;*/
	margin:0 !important;
}
@media only screen and (max-width: 767px){
	.tourism_spot_info {
	}
	.tourism_spot_txt {
	}
}


/* =========================================================
tourism_sports
========================================================= */
#tourism_sports{
	overflow: hidden;
}
#tourism_sports .inner{
	padding-top: 60px;
	padding-bottom: 60px;
	position: relative;
}
.tourism_sports--title {
	margin-bottom: 60px;
}
@media print, screen and (min-width: 768px) {
	#tourism_sports .inner{
		padding-top: 120px;
		padding-bottom: 120px;
	}
}
@media only screen and (max-width: 767px) {
	.tourism_sports--title {
		margin-bottom: 30px;
	}
}