@charset "UTF-8";

/* Tsunami Warning / Advisory */


main .tsunami_article h1 {
	font-size: 2.8rem;
	color: var(--texcolor01);
	font-weight: 700;
	margin: -20px 0 40px -24px;
	display: flex;
	align-items: center;
}
main .tsunami_article h1 span {
	display: inline-block;
	width: 76px;
	height: 63px;
	margin-right: 14px;
	display: flex;
	background-color: var(--texcolor02);
	align-items: center;
}
main .tsunami_article h1 span img {
	width: 44px;
	margin: 0 auto;
}


.tsunami_early_data {
	margin-top: 20px;
}
.tsunami_early_map {
	width: 100%;
	height: auto;
	margin-bottom: 10px;
}

.tsunami_color_sample {
		margin: 10px 10px 10px auto;
		width: 100%;
}
.tsunami_color_sample ul {
			width: 100%;
			margin-left: auto;
			padding-right: 10px;
			display: flex;
			justify-content: flex-end;
			gap: 14px;
			flex-wrap: nowrap;
}
.tsunami_color_sample ul li {
	flex-basis: auto;
	white-space: nowrap;
	display: flex;
	justify-content: flex-start;
	flex-wrap: nowrap;
	align-items: center;
	margin-bottom: 6px;
}
.tsunami_color_sample .mark_level04 {
	flex-basis: 20px;
	width: 20px;
	height: 20px;
	border: 1px solid var(--bordercolor01);
	margin-right: 6px;
	background-color: #aa01aa;
}
.tsunami_color_sample .mark_level03 {
	flex-basis: 20px;
	width: 20px;
	height: 20px;
	border: 1px solid var(--bordercolor01);
	margin-right: 6px;
	background-color: #ff2700;
}
.tsunami_color_sample .mark_level02 {
	flex-basis: 20px;
	width: 20px;
	height: 20px;
	border: 1px solid var(--bordercolor01);
	margin-right: 6px;
	background-color: #f1e700;
}
.tsunami_color_sample .mark_level01 {
	flex-basis: 20px;
	width: 20px;
	height: 20px;
	display: block;
	border: 1px solid var(--bordercolor01);
	margin-right: 6px;
	background-color: #12a5f2;
}
.tsunami_color_sample .mark_epicenter {
	flex-basis: 20px;
	width: 20px;
	height: 20px;
	margin-right: 3px;
	background: url("../images/common/mark_epicenter.91c1962b9418.svg") no-repeat center center;
	background-size: 20px;
}
.tsunami_color_sample .mark_station {
	flex-basis: 20px;
	width: 20px;
	height: 24px;
	margin-right: 2px;
	background: url("../images/common/mark_station.85c46121a212.svg") no-repeat center center;
	background-size: 14px;
}
.tsunami_color_sample .mark_detail {
	flex-basis: auto;
	font-size: 1.4rem;
	line-height: 1.3;
	display: inline-block;
}


@media all and (min-width: 768px) and (max-width: 999px) {
	
.tsunami_color_sample ul {
			width: auto;
			margin-left: auto;
			padding-right: 0;
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			gap: 0;
			flex-wrap: nowrap;
}
.tsunami_color_sample ul li {
	flex-basis: auto;
	width: 191px;
	white-space: nowrap;
	display: flex;
	justify-content: flex-start;
	flex-wrap: nowrap;
	align-items: center;
	margin-bottom: 4px;
	margin-left: auto;
	margin-right: 6px;
}

}


@media all and (max-width: 767px) {

main .tsunami_article h1 {
	font-size: 2rem;
	color: var(--texcolor01);
	font-weight: 700;
	margin: -24px 0 40px -24px;
	display: flex;
	align-items: center;
}
main .tsunami_article h1 span {
	display: inline-block;
	width: 56px;
	height: 43px;
	margin-right: 14px;
	display: flex;
	background-color: var(--texcolor02);
	align-items: center;
}
main .tsunami_article h1 span img {
	width: 30px;
	margin: 0 auto;
}

.tsunami_color_sample {
		margin: 10px 10px 10px auto;
		width: 100%;
}
.tsunami_color_sample ul {
			width: auto;
			margin-left: auto;
			padding-right: 0;
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			gap: 0;
			flex-wrap: nowrap;
}
.tsunami_color_sample ul li {
	flex-basis: auto;
	width: 191px;
	white-space: nowrap;
	display: flex;
	justify-content: flex-start;
	flex-wrap: nowrap;
	align-items: center;
	margin-bottom: 4px;
	margin-left: auto;
	margin-right: 6px;
}
.tsunami_color_sample .mark_level04 {
	flex-basis: 20px;
	width: 20px;
	height: 20px;
	border: 1px solid var(--bordercolor01);
	margin-right: 6px;
	background-color: #c800ff;
}
.tsunami_color_sample .mark_level03 {
	flex-basis: 20px;
	width: 20px;
	height: 20px;
	border: 1px solid var(--bordercolor01);
	margin-right: 6px;
	background-color: #ff2800;
}
.tsunami_color_sample .mark_level02 {
	flex-basis: 20px;
	width: 20px;
	height: 20px;
	border: 1px solid var(--bordercolor01);
	margin-right: 6px;
	background-color: #faf500;
}
.tsunami_color_sample .mark_level01 {
	flex-basis: 20px;
	width: 20px;
	height: 20px;
	display: block;
	border: 1px solid var(--bordercolor01);
	margin-right: 6px;
	background-color: #12a5f2;
}

.tsunami_color_sample .mark_detail {
	flex-basis: auto;
	font-size: 1.4rem;
	line-height: 1.3;
	display: inline-block;
}


}