/* -------- weather pics（衛星写真・天気図） -------- */
/* トップページの枠に、気象庁の画像を出すための見た目。
 * 枠の大きさ（310px）は css/weather_images.css に合わせています。 */

.wp_wrap {
	width: 310px;
}

.wp_view {
	width: 310px;
	height: 233px;
	overflow: hidden;
	background-color: #22282e;
	border: 1px solid #999;
	position: relative;
}

.wp_view a {
	display: block;
	width: 100%;
	height: 100%;
}

.wp_img {
	width: 100%;
	height: 100%;

	object-position: center;
	display: block;
}

/* 枠いっぱいに切り出す（衛星写真）。 */
.wp_fit_cover {
	object-fit: cover;
}

/* 全体を入れる（天気図）。まわりに余白が出ます。 */
.wp_fit_contain {
	object-fit: contain;
	background-color: #fff;
}

.wp_error {
	margin: 0;
	padding: 100px 10px;
	color: #ddd;
	font-size: 12px;
	text-align: center;
}


/* ---- 衛星写真のタイルを1枚の絵として並べる ---- */
/* 気象庁の衛星画像はタイル（256px四方）で配られています。
 * 3×3枚を並べて、枠の幅に合わせて縮めているだけなので、
 * 地図のように動かすことはできません（＝1枚の絵と同じです）。 */

.wp_sheet {
	position: absolute;
	left: 0;
	top: 0;
}

.wp_tile {
	position: absolute;
	width: 256px;
	height: 256px;
	display: block;
}

/* ---- 切替ボタン ---- */

.wp_btns {
	margin-top: 4px;
	line-height: 1.6;
}

.wp_group {
	margin-right: 6px;
}

.wp_btn {
	display: inline-block;
	margin-right: 3px;
	padding: 1px 7px;
	background-color: #eef1f3;
	border: 1px solid #c3ccd2;
	border-radius: 3px;
	font-size: 11px;
	color: #333;
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
}

.wp_btn:hover {
	background-color: #dde5ea;
}

.wp_btn_on {
	background-color: #006998;
	border-color: #006998;
	color: #fff;
}

.wp_play {
	background-color: #fff;
}

/* ---- 狭い画面 ---- */

@media screen and (max-width: 640px) {

	.wp_wrap,
	.wp_view {
		width: 100%;
	}

	.wp_view {
		height: 200px;
	}
}