/* ==================== #jc-column.hokkaido/@vars.css ==================== */

#jc-column.hokkaido {
	--gray-border: linear-gradient(to right, #cde4f8 50%, white 50%) repeat-x left bottom / 0.4em 0.1em;
}



/* ==================== #jc-column.hokkaido/#charms/@.css ==================== */

#jc-column.hokkaido #charms {
	display: grid;
}

#jc-column.hokkaido #charms > div {
	display: grid;
}

#jc-column.hokkaido #charms h3 {
	color: #52a300;
}


@media (max-width: 640px) {
	#jc-column.hokkaido #charms {
		grid-gap: 2.5em;
	}

	#jc-column.hokkaido #charms > div {
		grid-gap: 1em;
		justify-items: center;
	}

	#jc-column.hokkaido #charms h3 {
		font-size: 1.1em;
	}

	#jc-column.hokkaido #charms figure {
		width: 16em;
	}
	#jc-column.hokkaido #charms > div:nth-of-type(2) figure {
		width: 20em;
	}
}


@media (min-width: 641px) {

	#jc-column.hokkaido #charms {
		grid-gap: 1.5em;
	}

	#jc-column.hokkaido #charms > div {
		grid-gap: 0 1.5em;
		grid-template-columns: repeat(2, auto);
		align-items: center;
	}

	#jc-column.hokkaido #charms > div:nth-of-type(odd) {
		grid-template-areas:
		'figure x1'
		'figure h3'
		'figure p'
		'figure x2';
	}
	#jc-column.hokkaido #charms > div:nth-of-type(even) {
		grid-template-areas:
		'x1 figure'
		'h3 figure'
		'p figure'
		'x2 figure';
	}

	#jc-column.hokkaido #charms figure { grid-area: figure; }
	#jc-column.hokkaido #charms h3 { grid-area: h3; }
	#jc-column.hokkaido #charms p { grid-area: p; }

	#jc-column.hokkaido #charms > div:nth-of-type(1) figure { width: 11em; }
	#jc-column.hokkaido #charms > div:nth-of-type(2) figure { width: 16em; }
	#jc-column.hokkaido #charms > div:nth-of-type(3) figure { width: 15em; }

	#jc-column.hokkaido #charms h3 {
		margin-bottom: 0.5em;
		font-size: 90%;
	}

}



/* ==================== #jc-column.hokkaido/#culture/@.css ==================== */

#jc-column.hokkaido #culture {
	display: grid;
	grid-gap: 1.5em;
}

#jc-column.hokkaido #culture > div {
	display: grid;
}

#jc-column.hokkaido #culture h3 {
	color: #8d65eb;
}


@media (max-width: 640px) {

	#jc-column.hokkaido #culture > div {
		grid-gap: 0.75em;
		justify-items: center;
	}

	#jc-column.hokkaido #culture h3 {
		font-size: 1.1em;
	}

	#jc-column.hokkaido #culture figure {
		width: 16em;
	}

}


@media (min-width: 641px) {

	#jc-column.hokkaido #culture > div {
		grid-gap: 0.5em;
		align-items: center;
	}
	
	#jc-column.hokkaido #culture > div:nth-of-type(1),
	#jc-column.hokkaido #culture > div:nth-of-type(3) {
		grid-template-columns: auto auto;
		column-gap: 2em;
	}

	#jc-column.hokkaido #culture > div:nth-of-type(1),
	#jc-column.hokkaido #culture > div:nth-of-type(3) {
		grid-template-areas:
		'figure blank1'
		'figure h3'
		'figure p'
		'figure blank2';
	}

	#jc-column.hokkaido #culture > div:nth-of-type(1) figure,
	#jc-column.hokkaido #culture > div:nth-of-type(3) figure { grid-area: figure;}
	#jc-column.hokkaido #culture > div:nth-of-type(1) h3,
	#jc-column.hokkaido #culture > div:nth-of-type(3) h3 { grid-area: h3;}
	#jc-column.hokkaido #culture > div:nth-of-type(1) p,
	#jc-column.hokkaido #culture > div:nth-of-type(3) p { grid-area: p;}


	#jc-column.hokkaido #culture h3 {
		font-size: 90%;
	}

	#jc-column.hokkaido #culture figure {
		width: 13em;
	}

}



/* ==================== #jc-column.hokkaido/#events/@.css ==================== */

#jc-column.hokkaido #events {
	display: grid;
	grid-gap: 1.5em;
}

#jc-column.hokkaido #events h3 {
	color: #fa7500;
}

#jc-column.hokkaido #events > div {
	display: grid;
}

#jc-column.hokkaido #events > div:nth-last-of-type(n+2) {
	padding-bottom: 1.5em;
	background: var(--gray-border);
}

#jc-column.hokkaido #events figure {
	display: grid;
	grid-gap: 0.5em;
}

#jc-column.hokkaido #events > div:nth-of-type(4) figure {
	grid-template-columns: repeat(2, 1fr);
}
#jc-column.hokkaido #events > div:nth-of-type(4) figure img:nth-of-type(1),
#jc-column.hokkaido #events > div:nth-of-type(4) figure figcaption {
	grid-column: 1/3;
}

#jc-column.hokkaido #events figcaption {
	color: var(--color-gray);
}

#jc-column.hokkaido #events .notes p {
	margin-left: 1em;
	color: var(--color-blue);
	text-indent: -1em;
}


@media (max-width: 640px) {

	#jc-column.hokkaido #events > div {
		grid-gap: 1em;
	}

	#jc-column.hokkaido #events h3 {
		font-size: 110%;
	}
	#jc-column.hokkaido #events figcaption {
		font-size: 80%;
	}
}


@media (min-width: 641px) {

	#jc-column.hokkaido #events::after,
	#jc-column.hokkaido #events > div::after {
		content: none;
	}

	#jc-column.hokkaido #events > div {
		grid-template-columns: auto auto;
		grid-gap: 0.5em 1.5em;
	}

	#jc-column.hokkaido #events > div:nth-of-type(odd) {
		grid-template-areas:
		'figure h3'
		'figure p'
		'figure blank';
	}
	
	#jc-column.hokkaido #events > div:nth-of-type(even) {
		grid-template-areas:
		'h3 figure'
		'p figure'
		'blank figure';
	 }
	 
	 #jc-column.hokkaido #events > div.notes {
	 	grid-template-areas:
		'p p';
		justify-items: center;
	 }

	 #jc-column.hokkaido #events > div h3 { grid-area: h3; }
	 #jc-column.hokkaido #events > div figure { grid-area: figure; }
	 #jc-column.hokkaido #events > div p { grid-area: p; }

	#jc-column.hokkaido #events h3 {
		font-size: 80%;
	}

	#jc-column.hokkaido #events figure {
		width: 16em;
	}
	#jc-column.hokkaido #events > div:nth-of-type(4) figure {
		width: 21em;
	}
	#jc-column.hokkaido #events figcaption {
		font-size: 60%;
	}

}



/* ==================== #jc-column.hokkaido/#localfoods/@.css ==================== */

#jc-column.hokkaido #localfoods {
	display: grid;
	grid-gap: 1.5em;
}

#jc-column.hokkaido #localfoods > div {
	display: grid;
}
#jc-column.hokkaido #localfoods > div:nth-last-of-type(n+2) {
	padding-bottom: 1.5em;
	background: var(--gray-border);
}

#jc-column.hokkaido #localfoods h3 {
	color: #f76666;
}

#jc-column.hokkaido #localfoods h3 small {
	font-weight: normal;
	font-size: 83%;
}

#jc-column.hokkaido #localfoods dl {
	display: grid;
	grid-template-columns: max-content 1fr;
	grid-gap: 1em 0.75em;
	align-items: start;
}

#jc-column.hokkaido #localfoods dt {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 2em;
	border-radius: 1em;
	padding: 0 1em;
	background: #61a9e9;
	color: white;
	font-size: 95%;
	transform: translateY(0.25em);
}

#jc-column.hokkaido #localfoods dt:nth-of-type(1),
#jc-column.hokkaido #localfoods dt:nth-of-type(2) {
	letter-spacing: 0.5em;
	text-indent: 0.5em;
}


@media (max-width: 640px) {
	#jc-column.hokkaido #localfoods > div {
		grid-gap: 1em;
		justify-items: center;
	}

	#jc-column.hokkaido #localfoods h3 {
		font-size: 110%;
	}

	#jc-column.hokkaido #localfoods figure {
		width: 16em;
	}

	#jc-column.hokkaido #localfoods .recipe {
		margin-top: 0.5em;
	}

}


@media (min-width: 641px) {

	#jc-column.hokkaido #localfoods > div {
		grid-template-columns: max-content 1fr;
		grid-template-rows: 2.25em 1fr;
		grid-template-areas:
		'figure h3'
		'figure dl'
		'recipe recipe';
		grid-gap: 0 1.5em;
	}
	#jc-column.hokkaido #localfoods > div:nth-of-type(even) {
		grid-template-columns: 1fr max-content;
		grid-template-areas:
		'h3 figure'
		'dl figure'
		'recipe recipe';
	}

	#jc-column.hokkaido #localfoods h3 { grid-area: h3; }
	#jc-column.hokkaido #localfoods figure { grid-area: figure; }
	#jc-column.hokkaido #localfoods dl { grid-area: dl; }
	#jc-column.hokkaido #localfoods .recipe { grid-area: recipe; }

	#jc-column.hokkaido #localfoods .recipe {
		justify-self: center;
	}

	#jc-column.hokkaido #localfoods h3 {
		font-size: 90%;
	}

	#jc-column.hokkaido #localfoods figure {
		width: 12em;
	}

	#jc-column.hokkaido #localfoods .recipe {
		width: 24em;
		margin-top: 1em;
	}

}



/* ==================== #jc-column.hokkaido/#meiji/<h3>.css ==================== */

#jc-column.hokkaido #meiji h3 {
	color: #d40000;
}


@media (max-width: 640px) {

	#jc-column.hokkaido #meiji h3 {
		display: grid;
		justify-self: center;
		font-size: 115%;
	}
	
	#jc-column.hokkaido #meiji h3 span:nth-of-type(n+2) {
		text-indent: 1em;
	}

}


@media (min-width: 641px) {

	#jc-column.hokkaido #meiji h3 {
		font-size: 90%;
	}
	
}



/* ==================== #jc-column.hokkaido/#meiji/<h4>.css ==================== */

#jc-column.hokkaido #meiji h4 {
	color: var(--color-hokkaido);
	text-indent: -1em;
	margin-left: 1em;
	line-height: 1.3;
}


@media (min-width: 641px) {
	
	#jc-column.hokkaido #meiji h4 {
		font-size: 80%;
	}

}



/* ==================== #jc-column.hokkaido/#meiji/@.css ==================== */

#jc-column.hokkaido #meiji {
	display: grid;
	grid-gap: 3em;
}



/* ==================== #jc-column.hokkaido/#meiji/body/> div.css ==================== */

#jc-column.hokkaido #meiji .body > div {
	display: grid;
}


@media (max-width: 640px) {

	#jc-column.hokkaido #meiji .body > div {
		grid-gap: 1.5em;
		justify-items: center;
	}
	
}


@media (min-width: 641px) {
	
	#jc-column.hokkaido #meiji .body > div {
		grid-gap: 0.5em 2em;
	}

}



/* ==================== #jc-column.hokkaido/#meiji/body/@.css ==================== */

#jc-column.hokkaido #meiji .body {
	display: grid;
	grid-gap: 1.5em;
}



/* ==================== #jc-column.hokkaido/#meiji/body1/> div.css ==================== */

#jc-column.hokkaido #meiji .body1 > div:nth-last-of-type(n+2) {
	padding-bottom: 1.5em;
	background: var(--gray-border);
}


@media (max-width: 640px) {
	#jc-column.hokkaido #meiji .body1 > div img[src*="image_2"] { width: 15em; }
	#jc-column.hokkaido #meiji .body1 > div img[src*="image_3"] { width: 10em; }
}


@media (min-width: 641px) {

	#jc-column.hokkaido #meiji .body1 > div {
		grid-template-columns: auto auto;
		/* align-items: start; */
		align-items: center;
	}

	#jc-column.hokkaido #meiji .body1 > div:nth-of-type(1),
	#jc-column.hokkaido #meiji .body1 > div:nth-of-type(3) {
		grid-template-areas:
		'blank1 figure'
		'h4 figure'
		'p figure'
		'blank2 figure';
	}
	#jc-column.hokkaido #meiji .body1 > div:nth-of-type(2),
	#jc-column.hokkaido #meiji .body1 > div:nth-of-type(5) {
		grid-template-areas:
		'figure blank1'
		'figure h4'
		'figure p'
		'figure blank2';
	}
	#jc-column.hokkaido #meiji .body1 > div:nth-of-type(4) {
		grid-template-areas:
		'h4 h4'
		'p p';
	}

	#jc-column.hokkaido #meiji .body1 > div h4 { grid-area: h4; }
	#jc-column.hokkaido #meiji .body1 > div figure { grid-area: figure; }
	#jc-column.hokkaido #meiji .body1 > div p { grid-area: p; }

	#jc-column.hokkaido #meiji .body1 > div img[src*="image_1"] { width: 16em; }
	#jc-column.hokkaido #meiji .body1 > div img[src*="image_2"] { width: 11.1em; }
	#jc-column.hokkaido #meiji .body1 > div img[src*="image_3"] { width: 9.3em; }
	#jc-column.hokkaido #meiji .body1 > div img[src*="image_4"] { width: 20em; }

}



/* ==================== #jc-column.hokkaido/#meiji/body2/biodiversity.css ==================== */

.biodiversity {
	margin-top: 1em;
	justify-self: center;
	white-space: nowrap;
}
.biodiversity a {
	display: flex;
	align-items: center;
	height: 3em;
	border-radius: 0.5em;
	padding: 0 1.5em;
	background: red;
	color: white;
	text-decoration: none;
}
.biodiversity a img {
	height: 1em;
	margin-left: 0.5em;
}


@media (min-width: 641px) {

	.biodiversity a {
		font-size: 80%;
	}

}



/* ==================== #jc-column.hokkaido/#school/@.css ==================== */

#jc-column.hokkaido #school {
	display: grid;
	grid-gap: 1.5em;
}

#jc-column.hokkaido #school > div {
	display: grid;
}

#jc-column.hokkaido #school h3 {
	color: #37a371;
}


@media (max-width: 640px) {

	#jc-column.hokkaido #school > div {
		grid-gap: 1em;
		justify-items: center;
	}

	#jc-column.hokkaido #school h3 {
		font-size: 110%;
	}
}


@media (min-width: 641px) {

	#jc-column.hokkaido #school > div {
		grid-template-columns: auto auto;
		grid-template-rows: auto 1fr;
		grid-gap: 0.5em 2em;
	}
	#jc-column.hokkaido #school > div:nth-of-type(2) {
		grid-template-areas:
		'figure h3'
		'figure p';
	}
	#jc-column.hokkaido #school > div:nth-of-type(1) {
		grid-template-areas:
		'h3 figure'
		'p figure';
	}

	#jc-column.hokkaido #school > div h3 { grid-area: h3; }
	#jc-column.hokkaido #school > div figure { grid-area: figure; }
	#jc-column.hokkaido #school > div p { grid-area: p; }

	#jc-column.hokkaido #school h3 {
		font-size: 90%;
	}

	#jc-column.hokkaido #school figure {
		width: 18em;
	}

}