@charset "UTF-8";

ul.website {
	display: flex;
    justify-content: center;
	gap: 18px;
	margin-top: 42px;
}
ul.website li {
	
}
ul.website li a {
	display: inline-block;
	max-width: 460px;
	background: #FFF;
	color: var(--linkcolor);
	width: 100%;
	margin: 0 auto;
	border-radius: 4px;
	border: 1px solid var(--linkcolor);
	padding: 28px 5em 28px 2em;
	line-height: 1;
	text-align: left;
	font-weight: 600;
	position: relative;
}

.region-description {
	overflow: hidden;
	margin-top: 42px;
    padding: 42px;
    background: var(--subcolor1);
    border-radius: 4px;
}
.region-description .region-description-title {
text-align: center;	
}
.region-description .region-description-title span {
	display: block;
    font-family: "Montserrat", sans-serif;
    font-size: 14px;
    font-weight: 900;
    text-transform: uppercase;
    color: var(--subcolor2);
}
.region-description img.img-region {
	float: left;
    margin: 0 32px 18px 0;
    shape-outside: circle(50%);
    width: 39%;
    max-width: 300px;
}


/* X日現在〜〜 */
p.region-note {
	text-align:right;
	margin-top: 18px;
	font-size: .9em;
	color: var(--subcolor2);
}


@media screen and (max-width: 768px) {
	ul.website {
		flex-direction: column;
		align-items: center;
	}
	ul.website li {
		width: 100%;
		text-align: center;
	}
	ul.website li a {
		width: 82%;
	}

	/* X日現在〜〜 */
	p.region-note {
		text-align: left;
		font-size: .7em;
		color: #826C5E;
	}
}
@media screen and (max-width: 559px) {
	ul.website li a {
		width: 100%;
		padding: 22px 3.6em 22px 22px;
		font-size: .9em;
	}
	
	
	.region-description {
		padding: 30px;
        width: calc(100% + 60px);
        margin-left: -30px;
        padding-top: 142px;
        margin-top: -100px;
	}
	.region-description img.img-region {
		
	}
}
@media screen and (max-width: 440px) {
	
}
@media screen and (max-width: 380px) {
	.region-description {
		padding: 20px;
        width: calc(100% + 40px);
        margin-left: -20px;
        padding-top: 132px;
        margin-top: -100px;
	}
}