@charset "UTF-8";

.spot__ttl, .spot__time, .spot__btn { text-align: center; }
.spot__text { text-align: justify; }
.spot__btn a { color: var(--text); }
.spot__btn .ico { fill: none; stroke: var(--text); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
.spot__btn .ico text { fill: var(--text); stroke: none; font-family: Arial, sans-serif; font-size: 3.4px; font-weight: 700; }

@media (min-width: 1001px) {
	main { padding-bottom: 160px; }

	.spotsec { padding-top: 160px; }

	.spotlist {
		display: grid; grid-template-columns: repeat(2, 482px); justify-content: center;
		gap: 40px 36px; align-items: start; margin-top: 40px;
	}
	.spotlist--single { grid-template-columns: 482px; }
	.spot:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: 482px; }
	.spot__img img { display: block; width: 100%; height: 270px; object-fit: cover; border-radius: 10px; }
	.spot__box { padding: 18px 20px 29px; }
	.spot__ttl { font-size: 22px; line-height: 36px; letter-spacing: 0.1em; font-weight: 500; }
	.spot__text { margin-top: 14px; font-size: 15px; line-height: 22px; letter-spacing: 0.06em; }
	.spot__time { margin-top: 12px; font-size: 15px; line-height: 22px; letter-spacing: 0.06em; }
	.spot__btn { margin-top: 12px; line-height: 1; }
	.spot__text + .spot__btn { margin-top: 18px; }

	.spot__btn a {
		position: relative; display: inline-flex; align-items: center; justify-content: center;
		width: 180px; height: 40px; box-sizing: border-box;
		border: 1px solid var(--text); font-size: 13px; letter-spacing: 0.02em;
		transition: .3s all ease;
	}
	.spot__btn--wide a { width: 360px; font-size: 14px; letter-spacing: 0.14em; }
	.spot__btn .ico { position: absolute; right: 12px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); }
	.spot__btn .ico, .spot__btn .ico text { transition: .3s all ease; }
	.spot__btn a:hover { background: var(--wine); border-color: var(--wine); color: #fff; opacity: 1; }
	.spot__btn a:hover .ico { stroke: #fff; }
	.spot__btn a:hover .ico text { fill: #fff; }
}

@media (max-width: 1000px) {
	main { padding-bottom: 21.33vw; }

	.spotsec { padding-top: 21.07vw; }

	.spotlist { width: 87.07vw; margin: 4.27vw auto 0; }
	.spot + .spot { margin-top: 7.47vw; }
	.spot__img img { display: block; width: 100%; height: 58.27vw; object-fit: cover; border-radius: 1.33vw; }
	.spot__box { margin: -8.27vw 5.2vw 0; padding: 5.2vw 5.3vw 5.2vw; }
	.spot__ttl { font-size: 5.33vw; line-height: 1.15; letter-spacing: 0; font-weight: 500; }
	.spot__text { margin-top: 3.2vw; font-size: 3.5vw; line-height: 1.6; letter-spacing: 0.08em; }
	.spot__time { margin-top: 1.6vw; font-size: 3.5vw; line-height: 1.6; letter-spacing: 0.08em; }
	.spot__btn { margin-top: 2.7vw; line-height: 1; }
	.spot__text + .spot__btn { margin-top: 4vw; }

	.spot__btn a {
		position: relative; display: inline-flex; align-items: center; justify-content: center;
		width: 48.27vw; height: 8.27vw; box-sizing: border-box;
		border: 1px solid var(--text); font-size: 2.9vw; letter-spacing: 0.02em;
	}
	.spot__btn--wide a { width: 100%; padding-right: 5vw; font-size: 3.3vw; letter-spacing: 0.04em; }
	.spot__btn .ico { position: absolute; right: 2.8vw; top: 50%; width: 2.67vw; height: 2.67vw; transform: translateY(-50%); }
	.spot__btn--wide .ico { width: 3.47vw; height: 3.47vw; }
}