.main {
	background: var(--color-gray-100);
	clear: both;
	margin: var(--spacing-0_00em);
	overflow: hidden;
	padding: var(--spacing-0_50em);

	@media screen and (min-width: 768px) {
		border-radius: var(--radius-1_00em);
		margin: var(--spacing-0_00em) auto var(--spacing-1_00em);
		width: var(--size-34_00em);
	}

	@media screen and (min-width: 1024px) {
		float: left;
		margin: var(--spacing-0_25em) var(--spacing-0_00em) var(--spacing-2_00em);
		padding: var(--spacing-1_00em);
		width: var(--size-47_75em);
	}

	h1 {
		background: var(--color-gray-700);
		border-radius: var(--radius-0_25em);
		color: var(--color-gray-100);
		font-size: var(--fontSize-1_3em);
		line-height: var(--lineHeight-1_3);
		margin: var(--spacing-0_25em) var(--spacing-0_00em);
		padding: var(--spacing-1_50em) var(--spacing-0_50em);
		text-align: center;

		@media screen and (min-width: 1024px) {
			font-size: var(--fontSize-1_7em);
		}
	}

	h2 {
		background: var(--color-gray-700);
		clear: both;
		color: var(--color-gray-100);
		font-size: var(--fontSize-1_3em);
		font-weight: normal;
		margin: var(--spacing-1_50em) var(--spacing-0_00em) var(--spacing-1_00em);
		padding: var(--spacing-0_50em);
		position: relative;
		text-align: center;

		&::after {
			border: var(--border-width-10px) solid transparent;
			border-top: var(--border-width-10px) solid var(--color-gray-700);
			content: "";
			height: var(--spacing-0_00em);
			left: 50%;
			margin-left: calc(var(--border-width-10px) * -1);
			position: absolute;
			top: 100%;
			width: var(--spacing-0_00em);
		}

		&:first-child {
			margin-top: var(--spacing-2_00em);
		}
	}

	h3 {
		border-bottom: solid var(--border-width-03px) var(--color-gray-300);
		clear: both;
		font-size: var(--fontSize-1_1em);
		margin: var(--spacing-1_50em) var(--spacing-0_00em) var(--spacing-1_00em);
		padding: var(--spacing-0_25em) var(--spacing-0_00em);
		position: relative;

		&::after {
			border-bottom: none;
			bottom: calc(var(--border-width-03px) * -1);
			content: " ";
			display: block;
			position: absolute;
			width: var(--size-32pct);
		}
	}

	h4 {
		clear: both;
		color: var(--color-green);
		font-size: var(--fontSize-1_1em);
		font-weight: bold;
		margin: var(--spacing-1_00em) var(--spacing-0_00em) var(--spacing-0_50em);
		padding-left: var(--spacing-2_00em);
		position: relative;

		&::before,
		&::after {
			content: "□";
			position: absolute;
		}

		&::before {
			left: var(--spacing-0_00em);
			top: calc(var(--spacing-0_25em) * -1);
		}

		&::after {
			color: var(--color-skyblue);
			left: var(--spacing-0_375em);
			top: var(--spacing-0_25em);
		}
	}
}

.main {
	.hotel_list {
		ul {
			clear: both;

			@media screen and (min-width: 414px) {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
			}

			li {
				width: var(--size-100pct);
				padding-bottom: var(--spacing-1_00em);
				margin: var(--spacing-1_00em) var(--spacing-0_00em);
				border: var(--border-width-01px) solid var(--color-gray-300);

				@media screen and (min-width: 414px) {
					width: var(--size-48pct);
				}

				@media screen and (min-width: 768px) {
					width: var(--size-32pct);
				}

				&::before {
					display: block;
					text-align: center;
					margin-top: var(--spacing-0_50em);
				}

				&.no1::before {
					content: url(../img/no1.gif);
				}

				&.no2::before {
					content: url(../img/no2.gif);
				}

				&.no3::before {
					content: url(../img/no3.gif);
				}

				img {
					border-bottom: var(--border-width-01px) solid var(--color-gray-300);
				}

				.hotel_name {
					padding: var(--spacing-0_00em);
					margin: var(--spacing-0_50em);
					font-size: var(--fontSize-1_0em);
					font-weight: bold;
					line-height: var(--lineHeight-1_3);
					text-align: center;
				}

				.hotel_overview {
					padding: var(--spacing-0_00em);
					margin: var(--spacing-0_50em);
					font-size: var(--fontSize-0_8em);
					text-align: center;
				}
			}
		}
	}
}

.main {
	.fa-angle-right {
		font-size: var(--fontSize-0_9em);
		padding-left: var(--spacing-1_00em);
	}

	.weather_conditions .fa-sun {
		font-size: var(--fontSize-1_3em);
		color: var(--color-orange);
	}

	.points_clothing .fa-user {
		font-size: var(--fontSize-1_3em);
		color: var(--color-green);
	}
}

.main {
	.temperature {
		margin: var(--spacing-0_00em);
		display: flex;

		.highest_temperature,
		.average_temperature,
		.lowest_temperature {
			border: var(--border-width-01px) solid var(--color-gray-300);
			margin: var(--spacing-0_00em) var(--spacing-0_10em) var(--spacing-1_00em);
			padding: var(--spacing-0_00em) var(--spacing-0_25em);
			flex: 1;

			img {
				display: block;
				margin: var(--spacing-0_00em) auto;
			}
		}

		h3 {
			margin: var(--spacing-0_00em);
			padding: var(--spacing-1_00em) var(--spacing-0_00em) var(--spacing-0_50em);
			border-bottom: none;
			font-size: var(--fontSize-1_0em);
		}

		li {
			padding: var(--spacing-0_10em) var(--spacing-0_25em);
			line-height: 1.5em;
			font-size: var(--fontSize-0_9em);

			&.max,
			&.min {
				background: var(--color-gray-300);
			}
		}

		.lowest_temperature {
			li {
				&.ave {
					background: var(--color-blue);
					color: var(--color-gray-100);
				}
			}

			.fa-thermometer-empty {
				font-size: var(--fontSize-1_3em);
				color: var(--color-blue);
			}
		}

		.average_temperature {
			li {
				&.ave {
					background: var(--color-gray-700);
					color: var(--color-gray-100);
				}
			}

			.fa-thermometer-empty {
				font-size: var(--fontSize-1_3em);
				color: var(--color-gray-700);
			}
		}

		.highest_temperature {
			li {
				&.ave {
					background: var(--color-red);
					color: var(--color-gray-100);
				}
			}

			.fa-thermometer-empty {
				font-size: var(--fontSize-1_3em);
				color: var(--color-red);
			}
		}
	}
}

.main {
	.month_spot {
		.ggmap {
			position: relative;
			padding-top: var(--spacing-1_00em);
			padding-bottom: var(--size-56pct);
			height: var(--spacing-0_00em);
			overflow: hidden;

			:is(iframe, object, embed) {
				position: absolute;
				top: var(--spacing-0_00em);
				left: var(--spacing-0_00em);
				width: var(--size-100pct);
				height: var(--size-100pct);
			}
		}

		.twitter {
			li {
				margin-top: var(--spacing-0_50em);
				margin-bottom: var(--spacing-0_50em);
				padding: var(--spacing-0_00em);
				border-bottom: var(--border-width-01px) dotted var(--color-gray-700);
				line-height: var(--lineHeight-1_3);

				.fa-twitter-square {
					font-size: var(--fontSize-1_0em);
					color: var(--color-skyblue);
					/* padding-right: var(--spacing-0_25em); */
					padding: var(--spacing-0_50em);
				}
			}
		}
	}
}

.main {
	.near_spot {
		ul {
			margin: var(--spacing-0_00em);
			display: flex;
			flex-wrap: wrap;

			li {
				a {
					justify-content: flex-start;
					display: block;
					margin: var(--spacing-02px);
					line-height: var(--lineHeight-1_3);
					padding: var(--spacing-0_25em) var(--spacing-0_375em);
					background: var(--color-gray-300);
					color: var(--color-gray-700);

					&:hover {
						text-decoration: none;
						background: var(--color-gray-700);
						color: var(--color-gray-300);
						font-weight: normal;
					}
				}
			}
		}
	}
}

.main {
	.LastNext_Month {
		margin: var(--spacing-0_00em) auto;

		.Last_Month,
		.Next_Month {
			margin: var(--spacing-1_00em) var(--spacing-0_00em);
			font-size: var(--fontSize-1_0em);
			text-align: center;
			background: var(--color-gray-700);
			display: block;
			padding: var(--spacing-0_25em) var(--spacing-1_00em);

			a {
				font-size: var(--fontSize-0_8em);
				color: var(--color-gray-100);
			}
		}

		.Last_Month {
			float: left;
		}

		.Next_Month {
			float: right;
		}
	}
}

.main {

	.month,
	.congestion_list {
		.Z {
			background: var(--color-gray-700);
			color: var(--color-gray-900);
		}

		.A {
			background: var(--color-gray-100);
			color: var(--color-gray-900);
		}

		.B {
			background: var(--color-skyblue);
			color: var(--color-gray-900);
		}

		.C {
			background: var(--color-yellow);
			color: var(--color-gray-900);
		}

		.D {
			background: var(--color-orange);
			color: var(--color-gray-900);
		}

		.E {
			background: var(--color-red);
			color: var(--color-gray-900);
		}
	}

	.congestion_list {
		justify-content: center;
		align-items: center;
		margin: var(--spacing-1_00em) auto;
		text-align: center;
		clear: both;
		display: flex;

		li {
			width: var(--size-20pct);
			display: block;
			text-align: center;
			padding: var(--spacing-0_10em) var(--spacing-0_00em);
			box-sizing: border-box;

			@media screen and (min-width: 768px) {
				width: var(--size-10pct);
			}
		}

		.Z,
		.A,
		.B,
		.C,
		.D,
		.E {
			border-top: var(--border-width-01px) solid var(--color-gray-300);
			border-bottom: var(--border-width-01px) solid var(--color-gray-300);
			border-left: var(--border-width-01px) solid var(--color-gray-300);
			font-size: var(--fontSize-1_3vh);
			text-align: center;
		}

		.E {
			border-right: var(--border-width-01px) solid var(--color-gray-300);
		}
	}

	.month {
		clear: both;
		display: flex;
		flex-wrap: wrap;
		margin: var(--spacing-1_00em) auto var(--spacing-2_00em);

		@media screen and (min-width: 768px) {
			float: canter;
			margin-top: var(--spacing-1_00em);
			margin-bottom: var(--spacing-4_00em);
			padding: var(--spacing-0_00em);
			width: var(--size-18_00em);
		}

		@media screen and (min-width: 1024px) {
			width: var(--size-31_50em);
		}

		.pMonth {
			color: var(--color-gray-300);
		}

		.holiday {
			color: var(--color-red);
		}

		.weekday {
			color: var(--color-gray-700);
		}

		div {
			border-bottom: solid var(--border-width-01px) var(--color-gray-300);
			border-left: solid var(--border-width-01px) var(--color-gray-300);
			box-sizing: border-box;
			text-align: center;
			vertical-align: middle;
			width: var(--size-14pct);

			font-size: var(--fontSize-1_7vh);
			height: var(--size-height-6_0vh);
			line-height: var(--size-height-5_5vh);

			@media screen and (min-width: 768px) {
				font-size: var(--fontSize-1_9vh);
				height: var(--size-height-5_0vh);
				line-height: var(--size-height-6_0vh);
			}

			@media screen and (min-width: 1024px) {
				font-size: var(--fontSize-1_9vh);
				height: var(--size-height-7_0vh);
				line-height: var(--size-height-7_0vh);
			}
		}
	}

}