
#gridMap, #listMap {
	max-width: 960px;
	font-size: clamp(1.3rem, 3vw - 1.25rem, 1.6rem);
	margin: auto;
}

/* 地域ごとの色 */
a.tohoku { background:#BAADD8; }
a.kanto  { background:#8BC4D1; }
a.chubu  { background:#7FD3AC; }
a.kinki  { background:#A1D071; }
a.chugoku{ background:#F7B761; }
a.shikoku{ background:#F0D253; }
a.kyushu { background:#EF9EAE; }

/* 地域ごとの色 */
#listMap h3.tohoku { color:#BAADD8; }
#listMap h3.kanto  { color:#8BC4D1; }
#listMap h3.chubu  { color:#7FD3AC; }
#listMap h3.kinki  { color:#A1D071; }
#listMap h3.chugoku{ color:#F7B761; }
#listMap h3.shikoku{ color:#F0D253; }
#listMap h3.kyushu { color:#EF9EAE; }

@media (max-width: 768px) {

	#gridMap { display: none; }

	#listMap p {
		font-size: clamp(1.6rem, 2vw + 1rem, 2.4rem);
		text-align: center;
		line-height: 1.2;
		font-weight: 500;
		margin: 1em 0 1.5em;
	}
	#listMap p span {
		color: var( --orange-color );
		font-size: clamp(3.2rem, 3vw + 3rem, 5rem);
		font-weight: 700;
	}

	#listMap h3 {
		font-size: clamp(1.4rem, 2vw + 0.75rem, 2rem);
		font-weight: 500;
		margin: 0 0 .5em;
 	 }
	#listMap ul + h3 { margin: 1em 0 .5em; }
	#listMap ul {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
	}
	#listMap li {
		margin: 0 5px 5px 0;
	}
	#listMap li a {
		display: block;
		width: 4em;
		color: #fff;
		font-weight: 500;
		font-size: clamp(1.6rem, 2vw + 1rem, 2rem);
		text-align: center;
		line-height: 1;
		border-radius: 3px;
		padding: .7em .5em;
	}

	#listMap li.hide { 
		pointer-events: none;
	}
	#listMap li.hide { 
		display: none; 
	}
}

@media (max-width: 480px) {

	#listMap li {
		width: 23.5%;
		margin: 0 1.5% 1.5% 0;
	}
	
	#listMap li a {
		width: 100%;
	}

}

@media (min-width: 768px) {

	#listMap { display: none; }

	#gridMap {
		display: grid;
		grid-template-columns: repeat(38, 1fr);
		grid-template-rows: 1fr;
		gap: 2px;
		/* background-color: red; */
		grid-auto-rows: 1.75em;
	}
	
	#gridMap a {
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 6px;
		text-decoration: none;
		color: #fff;
		text-align: center;
		-webkit-transition: all 0.3s ease-out;
		transition: all 0.3s ease-out;
	}
	
	#gridMap a:not(.hide):hover {
		opacity: .5;
	}
	#gridMap a.hide { 
		pointer-events: none;
	}
	#gridMap a.hide span { 
		display: none; 
	}

	.catchphrase {
		grid-column: 6 / span 22; 
		grid-row: 4 / span 5;
		font-size: clamp(2.4rem, 3vw, 3.2rem);
		text-align: center;
		line-height: 1.4;
		margin: 0;
	}
	.catchphrase span {
		font-size: clamp(4.4rem, 5vw + 0.5rem, 6.4rem);
		color: #fc9913;
		font-family: "Poppins", sans-serif;
		font-weight: 700;
	}
	
	/* --- 北海道・東北 --- */
	.hokkaido { 
		grid-column: 31 / span 9; 
		grid-row:1 / span 4; 
		margin: 0 0 1em;
	}
	.aomori { grid-column: 32 / span 6; grid-row:5 / span 2; }
	.iwate { grid-column: 31 / span 4; grid-row:7 / span 2; }
	.akita { grid-column: 35 / span 5; grid-row:7 / span 2; }
	.miyagi { grid-column: 35 / span 5; grid-row:9 / span 2; }
	.yamagata { grid-column: 31 / span 4; grid-row:9 / span 2; }
	.fukushima { grid-column: 35 / span 5; grid-row:11 / span 2; }
	
	/* --- 関東 --- */
	.ibaraki { grid-column: 37 / span 2; grid-row:13 / span 4; }
	.tochigi { grid-column: 34 / span 3; grid-row:13 / span 2; }
	.gunma { grid-column: 31 / span 3; grid-row:13 / span 2; }
	.saitama  { grid-column: 31 / span 6; grid-row:15 / span 2; }
	.chiba { grid-column: 37 / span 2; grid-row:17 / span 4; }
	.tokyo  { grid-column: 31 / span 6; grid-row:17 / span 2; }
	.kanagawa  { grid-column: 31 / span 5; grid-row:19 / span 2; }
	
	/* --- 中部 --- */
	.niigata  { grid-column: 31 / span 4; grid-row:11 / span 2; }
	.toyama  { grid-column: 28 / span 3; grid-row:11 / span 2; }
	.ishikawa  { grid-column: 25 / span 3; grid-row:11 / span 2; }
	.fukui  { grid-column: 21 / span 4; grid-row:11 / span 2; }
	.nagano  { grid-column: 28 / span 3; grid-row:13 / span 4; }
	.gifu  { grid-column: 25 / span 3; grid-row:13 / span 3; }
	.yamanashi  { grid-column: 28 / span 3; grid-row:17 / span 2; }
	.aichi  { grid-column: 25 / span 3; grid-row:16 / span 3; }
	.shizuoka  { grid-column: 28 / span 3; grid-row:19 / span 2; }
	
	/* --- 近畿 --- */
	.shiga    { grid-column: 21 / span 4; grid-row: 13 / span 2; }
	.kyoto    { grid-column: 19 / span 2; grid-row: 11 / span 4; }
	.osaka    { grid-column: 19 / span 2; grid-row: 15 / span 4; }
	.nara     { grid-column: 21 / span 2; grid-row: 15 / span 4; }
	.mie      { grid-column: 23 / span 2; grid-row: 15 / span 4; }
	.wakayama { grid-column: 19 / span 5; grid-row: 19 / span 2; }
	.hyogo    { grid-column: 17 / span 2; grid-row: 11 / span 4; }
	
	/* --- 中国 --- */
	.tottori  { grid-column: 15 / span 2; grid-row: 11 / span 2; }
	.shimane  { grid-column: 13 / span 2; grid-row: 11 / span 2; }
	.okayama  { grid-column: 15 / span 2; grid-row: 13 / span 2; }
	.hiroshima{ grid-column: 13 / span 2; grid-row: 13 / span 2; }
	.yamaguchi{ grid-column: 11 / span 2; grid-row: 11 / span 4; }
	
	/* --- 四国 --- */
	.kagawa   { grid-column: 14 / span 3; grid-row: 16 / span 2; }
	.tokushima{ grid-column: 14 / span 3; grid-row: 18 / span 2; }
	.ehime    { grid-column: 11 / span 3; grid-row: 16 / span 2; }
	.kochi    { grid-column: 11 / span 3; grid-row: 18 / span 2; }
	
	/* --- 九州 --- */
	.fukuoka  { grid-column: 7 / span 3; grid-row: 11 / span 2; }
	.saga     { grid-column: 4 / span 3; grid-row: 11 / span 2; }
	.nagasaki { grid-column: 1 / span 3; grid-row: 11 / span 2; }
	.oita     { grid-column: 7 / span 3; grid-row: 13 / span 2; }
	.miyazaki { grid-column: 7 / span 3; grid-row: 15 / span 2; }
	.kumamoto { grid-column: 4 / span 3; grid-row: 13 / span 4; }
	.kagoshima{ grid-column: 4 / span 5; grid-row: 17 / span 2; }
	
	/* --- 沖縄 --- */
	.okinawa  { grid-column: 1 / span 3; grid-row: 20 / span 2; }

}