/*--------------------------------------------
	スリックの写真
--------------------------------------------*/
@media (min-width: 500px) {
	.attraction {
		width: 95%;
		max-width: 1000px;
		margin: var(--dynamic-margin) auto
	}

	.slider {
		position: relative;
		margin: 0 auto;
		width: 68%
	}

	.slider img {
		width: 100%;
		height: auto;
		vertical-align: bottom
	}

	.slider .img_main {
		width: 50%;
		margin: 0 auto
	}

	.slider .img_main:before {
		content: "";
		display: block;
		padding-top: 100%
	}

	.slider .img_main img {
		position: absolute;
		top: 50%;
		left: 50%;
		width: auto;
		height: 100%;
		transform: translate(-50%, -50%)
	}

	.slider .img_sub {
		position: absolute;
		width: 24.5%
	}

	/* 空白調整のため、0.5%枠の外に出す(数学) */
	.slider .img_sub.sub01 {
		top: 0;
		left: -0.5%
	}

	.slider .img_sub.sub02 {
		top: 0;
		right: -0.5%
	}

	.slider .img_sub.sub03 {
		bottom: 0;
		left: -0.5%
	}

	.slider .img_sub.sub04 {
		bottom: 0;
		right: -0.5%
	}

	.slider .img_sub.sub05 {
		top: 0;
		left: -26%
	}

	.slider .img_sub.sub06 {
		top: 0;
		right: -26%
	}

	.slider .img_sub.sub07 {
		bottom: 0;
		left: -26%
	}

	.slider .img_sub.sub08 {
		bottom: 0;
		right: -26%
	}
}

@media (min-width: 500px) and (max-width: 600px) {
	.slider {
		width: 100%
	}

	.slider .img_sub.sub05,
	.slider .img_sub.sub06,
	.slider .img_sub.sub07,
	.slider .img_sub.sub08 {
		display: none
	}
}

@media not all and (min-width: 500px) {
	.attraction {
		margin: 10px auto;
		position: relative;
		width: 95%
	}

	.slider img {
		height: auto;
		width: 100%
	}

	.slick-prev {
		left: 0;
		z-index: 1
	}

	.slick-next {
		right: 0
	}
}

/*--------------------------------------------
	文章
--------------------------------------------*/
.attractioncontent {
	max-width: 700px;
	width: 85%;
	margin: 0 auto
}

.attractioncontent h6 {
	font-size: 1.2em;
	margin-bottom: 10px
}

.attractioncontent p {
	margin-top: 6px;
	text-align: left
}
/*--------------------------------------------
	テーブル
--------------------------------------------*/
table {
	width: 95%;
	border-collapse: collapse;
	max-width: 800px;
	margin: var(--dynamic-margin) auto;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

th,
td {
	padding: 10px;
	border: 1px solid #ddd
}

th {
	background-color: #d3d3d3;
	width: 30%
}

td {
	text-align: left;
	background-color: var(--base-color)
}

@media (max-width: 500px) {
	table table th,
	table table td {
		display: block;
		width: 100%;
		text-align: left;
	}
}

/*--------------------------------------------
	マップ
--------------------------------------------*/
@media not all and (max-width: 500px) {
	.map iframe {
		width: 80%;
		height: 400px;
	}
}

@media (max-width: 500px) {
	.map iframe {
		width: 95%;
		height: 300px;
	}
}