.hero {
	/* appの地図背景色 */
	--map-bgcolor: #ebf8f8;

	background: url(hero.png) center / auto no-repeat var(--map-bgcolor);
	
	> div {
		padding: 32px 8px;
		max-width: 1200px;
		margin: 0 auto;
	}

	p {
		line-height: 2em;

		span {
			background-color: var(--map-bgcolor);
		}
	}

	ul {
		display: flex;
		gap: 16px;

		li {
			display: block;
			flex: 1;
			list-style-type: none;

			a {
				display: block;
				text-align: center;
				background-color: rgb(255 255 255 / .9);
				padding: 32px 0;
				border-radius: 16px;
				border-width: 4px;
				border-style: dashed;
				text-decoration: none;
				font-weight: bold;
				font-size: 18px;

				span {
					font-size: 30px;
				}

				&:hover {
					background-color: rgb(255 255 255 / .85);
				}

				i {
					display: block;
					font-size: 80px;
					margin-bottom: 16px;
				}
			}
		
			&:first-child {
				color: #9ac675;
				border-color: #9ac675;
			}

			&:nth-child(2) {
				color: #779bc8;
				border-color: #779bc8;
			}

			&:nth-child(3) {
				color: #c6759a;
				border-color: #c6759a;
			}
		}
	}
}