@charset "utf-8";
@import url("root.css");

/***************************************
-------------- NEWS --------------
***************************************/

#souba .desc span {
	font-size: .8em;
}

.souba_wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	> div:not(:last-of-type) {
		margin-bottom: 30px;
	}
}
.souba_wrap {
	.gold,
	.platinum,
	.silver {
		display: flex;
		flex-wrap: wrap;
		flex-direction: column;
		width: calc((100% - 10px * 2) / 3);
		gap: 10px 10px;
		.souba_list {
			width: 100%;
			border: 2px solid;
			display: flex;
			flex-wrap: wrap;
			dt,dd {
				display: flex;
				justify-content: center;
				align-items: center;
				padding: clamp(.5em, 2.5vw, 1em);
				line-height: 1.0;
			}
			dt {
				width:min(100px, 40%);
				flex-shrink: 0;
				font-weight: bold;
				color: #fff;
			}
			dd {
				font-size: 1.2em;
				flex-grow: 1;
				align-items: flex-end;
				span {font-size: .6em;} 
			}
		}
		h2 {
			font-size: clamp(1em, 3vw, 1.4em);
			font-weight: bold;
			width: 100%;
			color: #333;
		}
	}
}
.souba_wrap {
	.gold h2 {
		padding-bottom: .25em;
		border-bottom: 2px dotted #d9c074;
		margin-bottom: .5em;
	}
	.platinum h2 {
		padding-bottom: .25em;
		border-bottom: 2px dotted #90bdda;
		margin-bottom: .5em;
	}
	.silver h2 {
		padding-bottom: .25em;
		border-bottom: 2px dotted #aaa;
		margin-bottom: .5em;
	}
	.gold .souba_list {
		border-color: #d9c074;
		dt { background: #d9c074;}
	}
	.platinum .souba_list {
		border-color: #90bdda;
		dt { background: #90bdda;}
	}
	.silver .souba_list {
		border-color: #aaa;
		dt { background: #aaa;}
	}
}

@media (max-width: 1024px) {
	.souba_wrap {
		.gold,
		.platinum,
		.silver {
			flex-direction: row;
			width: 100%;
			.souba_list {
				width: calc((100% - 10px * 2) / 3);
			}
		}
	}
}
@media (max-width: 767px) {
	.souba_wrap {
		.gold,
		.platinum,
		.silver {
			.souba_list {
				width: calc((100% - 10px * 1) / 2);
			}
		}
	}
}


@media (max-width: 499px) {
	.souba_wrap {
		.gold,
		.platinum,
		.silver {
			.souba_list {
				flex-direction: column;
				dt,dd {
					width: 100%;
				}
			}
		}
	}
}



.caution {
	display: block;
	width: 100%;
	margin: min(10vw, 50px) auto 0;
	padding: min(10px, 1.5%) min(20px, 2.5%);
	border: 4px double var(--base-color01);
}
.caution li {
	font-size: 0.9em;
}