:root {
	--root-font-size: 16;
	--main_color: #e27700;
}

#challenge-shop {
	max-width: 880px;
	margin-left: auto;
	margin-right: auto;
	section {
		margin-top: 5em;
	}
	section#start {
		.sub-section-title {
			margin-top: 0;
		}
		.start-wrap {
			display: flex;
			gap: 2em;
			@media screen and (max-width: 768px) {
				flex-direction: column;
			}
		}
		.text-wrap {
			flex: 2;
			@media screen and (max-width: 768px) {
				order: 2;
			}
		}
		.photo {
			flex: 1;
			margin-bottom: 0;
			@media screen and (max-width: 768px) {
				order: 1;
			}
			img {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}
		.notice {
			background-color: #daeeff;
			padding: 1em 2em;
			li {
				margin: 0;
				padding: 0;
			}
		}
		.map {
			margin-top: 2em;
			iframe {
				height: 300px;
				width: 100%;
			}
		}
	}
	section#news {
		.news-wrap {
			display: flex;
			@media screen and (max-width: 768px) {
				flex-direction: column;
			}
		}
		.text {
			flex: 1.5;
			background-color: #fae7d1;
			padding: 1em;
			@media screen and (max-width: 768px) {
				order: 2;
			}
		}
		.photo {
			flex: 1;
			margin: 0;
			@media screen and (max-width: 768px) {
				order: 1;
			}
			img {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}
		.news-title {
			line-height: 1.8em;
		}
		.link {
			text-align: right;
			a {
				display: inline-flex;
				align-items: center;
				padding: 0.5em;
				background-color: var(--main_color);
				color: #fff;
				gap: 0.5em;
				text-decoration: none;
				&:after {
					width: 2em;
					height: 1em;
					content: '';
					background-image: url("../images/challenge-shop/arrow.svg");
					background-repeat: no-repeat;
					background-size: contain;
					background-position: center;
				}
			}
		}
	}
	section#open {
		.open-wrap {
			display: flex;
			gap: 2em;
			@media screen and (max-width: 768px) {
				flex-direction: column;
			}
		}
		.photo {
			flex: 1;
			img {
				width: 100%;
				height: auto;
			}
		}
		.text {
			flex: 1.5;
		}
		.message {
			line-height: 1.8em;
		}
		table {
			border: 1px solid #000;
			border-collapse: collapse;
			width: 100%;
			box-sizing: border-box;
		}
		th, td {
			padding: 0.5em 1em;
		}
		th {
			text-align: left;
			font-weight: normal;
			background-color: #daeeff;
		}
	}
	section#list {
		.list-wrap {
			display: grid;
			gap: 2em 1em;
			grid-template-columns: repeat(3, 1fr);
			@media screen and (max-width: 768px) {
				gap: 1em;
				grid-template-columns: repeat(2, 1fr);
			}
		}
		.photo {
			position: relative;
			padding-top: 75%;
			img {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				object-fit: cover;
			}
		}
		.link {
			text-align: center;
			a {
				display: inline-flex;
				align-items: center;
				padding: 1em;
				background-color: var(--main_color);
				color: #fff;
				gap: 0.5em;
				text-decoration: none;
				border-radius: 0.5em;
				&:after {
					width: 2em;
					height: 1em;
					content: '';
					background-image: url("../images/challenge-shop/arrow.svg");
					background-repeat: no-repeat;
					background-size: contain;
					background-position: center;
				}
			}
		}
	}
}