/* ============================================================================================
	WEATHER FORECAST / BLOCK
============================================================================================ */
.resola-weather-forecast-wrapper {
	width: 100%;
	max-width: 1600px !important;
	margin: 0 auto;
	background: rgb(50,50,50);
	font-family: var(--wp--preset--font-family--gothic)
}
@media screen and (min-width: 980px) {
	.weatherForecast {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(6, 1fr);
	}
}

/* item */
.weather {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: .5em
}
@media screen and (min-width: 375px) {
	.weather {
		padding: .5em 1em
	}
}
.weather:first-of-type {
	grid-row: span 6 / span 6;
	flex-flow: column;
	padding: 2em 1em;
	background: rgb(250,250,250)
}
.weather:first-of-type .weather-temp {
	margin-top: 1em
}
@media screen and (min-width: 620px) {
	.weather {
		padding: .5em 2em
	}
	.weather:first-of-type {
		flex-flow: row;
		padding: 2em
	}
}
.weather:nth-of-type(2) {
	grid-column-start: 2;
	background: rgb(237,237,237)
}
.weather:nth-of-type(3) {
	grid-column-start: 2;
    grid-row-start: 2;
	background: rgb(242,242,242)	
}
.weather:nth-of-type(4) {
	grid-column-start: 2;
    grid-row-start: 3;
	background: rgb(247,247,247)
}
.weather:nth-of-type(5) {
	grid-column-start: 2;
    grid-row-start: 4;
	background: rgb(252,252,252)
}
.weather:nth-of-type(6) {
	grid-column-start: 2;
    grid-row-start: 5;
	background: rgb(247,247,247)
}
.weather:nth-of-type(7) {
	grid-column-start: 2;
    grid-row-start: 6;
	background: rgb(242,242,242)
}

/* contents and image area */
.weatherForecast-content {
	flex: 1;
	margin-right: 1rem;
}
.weather:not(:first-of-type) .weatherForecast-content {
	display: flex;
	align-items: flex-end
}
.weather:not(:first-of-type) .weather-date {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 0 1em;
	width: 10em;
	margin-right: 2em
}
.weather-image {
	text-align: center;
	display: flex;
	align-items: center
}

/* date */
.weather-week {
	display: block;
	font-size: 18px;
	font-family: var(--wp--preset--font-family--mincho)
}
.weather:first-of-type .weather-week {
	font-size: 2em
}
.weather-date {
	font-size: 14px
}
.weather:first-of-type .weather-date {
	font-size: 1.5em
}

/* 気温スタイル */
.weather-temp {
	display: flex;
	align-items: center;
	gap: 0 1em;
	white-space: nowrap
}
.tempMin, .tempMax {
	display: inline-block;
	font-size: 0.9rem;
}
.weather:first-of-type .tempMin,
.weather:first-of-type .tempMax {
	font-size: 1.2rem;
}
.tempMin::before,
.tempMax::before {
	content: "";
	display: inline-block;
	width: 5px;
	height: 5px;
	margin-right: 4px;
	transform: rotate(45deg)
}
.tempMin::before {
	vertical-align: .2em;
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor
}
.tempMax::before {
	vertical-align: .1em;
	border-top: 1px solid currentColor;
	border-left: 1px solid currentColor
}

/* images */
.weatherImg {
	width: 30px;
	height: 30px;
}
.weather:first-of-type .weatherImg {
	width: 120px;
	height: 120px;
	margin: 1em 0 0
}

/* 天気テキスト */
.weather-telop {
	display: none
}
@media screen and (min-width: 620px) {
	.weather-telop {
		display: block;
		font-size: 0.9rem;
		font-weight: 500;
		margin: 0 1em 0 0;
		font-size: 12px
	}
	.weather:first-of-type .weatherImg {
		margin: 0
	}
}
.weather:first-of-type .weather-telop {
	font-size: 1.2rem;
}