@charset "utf-8";
@layer frame, coat, fill;
@import url("../../css/content_2026.css") layer(frame);

@layer coat {

	[data-view="resp"] {
		min-width: 390px;
	}

	[data-view="resp"] #container {
		width: 100%;
		min-width: inherit;
		padding-inline: inherit;
	}

	[data-view="resp"] header {
		width: 100%;
		min-width: inherit;
	}

	[data-view="resp"] .fix {
		width: 94%;
		max-width: 1400px;
		min-width: inherit;
	}

	[data-view="resp"] main {
		width: 100%;
		min-width: inherit;
	}

	[data-view="resp"] #main-header h1 {
		font-size: clamp(1.4em,2.5vw,1.7em);
	}

	[data-view="resp"] main h2 {
		font-size: clamp(1.1em,2.5vw,1.35em);
	}

	[data-view="resp"] main h3 {
		font-size: 100%;
	}

	[data-view="resp"] footer {
		width: 100%;
		min-width: inherit;
		margin-top: inherit;
	}

	[data-view="resp"] #copyright {
		font-size: clamp(9px, 2vw, 11px);
	}

	@media screen and (min-width: 1600px) {
		[data-view="resp"] {
			font-size: 1.6em;
		}
	}

	@media screen and (max-width: 999px) {
		[data-view="resp"] #header-logo {
			max-width: 220px;
		}
		[data-view="resp"] {
			font-size: 1.4em;
		}

	}

}

@layer fill {

/*--------------------
data-layer="garbage__suinanjiko"
---------------------
018:2026.07.28
--------------------*/

	[data-layer="garbage__suinanjiko"] #section-2 .block:has(>.gr) {
		display: flex;
		justify-content: center;
		align-items: stretch;
		gap: 1em;
		flex-wrap: wrap;
	}

	[data-layer="garbage__suinanjiko"] #section-2 .gr {
		border: 2px solid rgb(102, 171, 223);
		border-radius: 10px;
		padding: 0 1em 1em 1em;
		text-align: center;
		margin-top: 1em;
	}

	[data-layer="garbage__suinanjiko"] #section-2 .gr > *:last-child {
		margin-bottom: 0;
	}

	[data-layer="garbage__suinanjiko"] #section-2 .gr h3 {
		display: inline-block;
		border: none;
		padding: 0.5em;
		margin: 0;
		background-color: rgba(255,255,255,1.00);
		transform: translateY(-1em);
		font-size: 120%;
	}

	[data-layer="garbage__suinanjiko"] #section-2 .gr > div {
		display: flex;
		gap: 1em;
		flex-wrap: wrap;
		justify-content: center;
	}

	[data-layer="garbage__suinanjiko"] figure:has(img[src*="/fivepoints."]) {
		max-width: 500px;
	}

	[data-layer="garbage__suinanjiko"] li .caption {
		display: inline-block;
		font-size: 90%;
		margin-top: 0.5em;
	}

	[data-layer="garbage__suinanjiko"] li .caption::before {
		content: "…";
		margin-right: 0.5em;
	}

	[data-layer="garbage__suinanjiko"] #section-2 .gr figure {
		margin-bottom: 0;
	}

	[data-layer="garbage__suinanjiko"] #section-2 figure img {
		position: relative;
	}

	[data-layer="garbage__suinanjiko"] #section-2 figcaption {
		margin-top: -2em;
		position: relative;
	}

	[data-layer="garbage__suinanjiko"] #section-2 figcaption span {
		display: block;
		margin: 0 auto 0.5em auto; 
		width: fit-content;
	}

	[data-layer="garbage__suinanjiko"] #section-2 figcaption .accident_label {
		padding: 0.5em 1.0em;
		padding: 0.5em 1.0em;
		background-color: rgba(220,0,0,1.00);
		color: rgba(255,255,255,1.00);
		font-size: 90%;
		border-radius: 4px;
	}

	[data-layer="garbage__suinanjiko"] #section-2 figcaption .accident_state span {
		font-size: 80%;
	}

	@media screen and (max-width: 999px) {
		[data-view="resp"][data-layer="garbage__suinanjiko"] #section-2 .gr ,
		[data-view="resp"][data-layer="garbage__suinanjiko"] #section-2 .gr:has(img[src*="accident_1"]) figure ,
		[data-view="resp"][data-layer="garbage__suinanjiko"] #section-2 .gr:has(img[src*="accident_2"]) figure {
			width: 100%;
		}

		[data-view="resp"][data-layer="garbage__suinanjiko"] #section-2 .gr:has(img[src*="accident_1"]) img,
		[data-view="resp"][data-layer="garbage__suinanjiko"] #section-2 .gr:has(img[src*="accident_2"]) img {
			max-width: calc((100% - 1em) / 2);
		}

		[data-view="resp"][data-layer="garbage__suinanjiko"] #section-2 .gr > div:has(img[src*="accident_3"]) figure {
			max-width: calc((100% - 1em) / 2);
		}
	}

/*-----------------------*/
}