/* 山形 4地方 天気予報 v2.4 */
.yw {
	--yw-text: #4a3a2c;
	--yw-sub: #7a6650;
	--yw-faint: #a08d77;
	--yw-line: #e6d5bd;
	--yw-soft: #fbf6ee;
	--yw-hi: #d9573f;
	--yw-lo: #3b7cc4;
	--yw-pop-high: #3b7cc4;
	--yw-pop-mid: #7fb0e0;
	--yw-pop-low: #b9ad9c;
	--yw-green: #68ae76;
	/* 警報・注意報（気象庁の色分けに準じる） */
	--yw-w-advisory: #f2e700;
	--yw-w-warning: #ff2800;
	--yw-w-danger: #aa00aa;
	--yw-w-special: #0c000c;
	color: var(--yw-text);
	font-size: 14px;
	line-height: 1.5;
	letter-spacing: normal;
	text-align: left;
}
.yw *,
.yw *::before,
.yw *::after { box-sizing: border-box; }
.yw p,
.yw ul,
.yw ol,
.yw li { margin: 0; padding: 0; list-style: none; }
.yw li::before,
.yw li::marker { content: none; display: none; }
.yw a { text-decoration: none; }

/* ---- 共通パーツ ---- */
.yw .yw-hi { color: var(--yw-hi); font-weight: 800; }
.yw .yw-lo { color: var(--yw-lo); font-weight: 800; }
.yw .yw-hi small,
.yw .yw-lo small { font-size: .62em; font-weight: 700; margin-left: 1px; }
.yw .yw-na { color: #cbbda9; font-weight: 700; }

.yw-ic { position: relative; display: block; flex: none; }
.yw-ic__main,
.yw-ic__sub { position: absolute; line-height: 0; }
.yw-ic svg { width: 100%; height: 100%; display: block; }
.yw-ic--s { width: 32px; height: 28px; }
.yw-ic--m { width: 40px; height: 34px; }
.yw-ic--l { width: 60px; height: 50px; }
.yw-ic__main { left: 0; top: 0; width: 82%; height: 96%; }
.yw-ic__sub { right: 0; bottom: 0; width: 50%; height: 58%; }

.yw .yw-pop {
	display: inline-block;
	min-width: 3.4em;
	padding: 2px 8px;
	border-radius: 999px;
	color: #fff;
	font-size: 12px;
	font-weight: 800;
	text-align: center;
	white-space: nowrap;
	line-height: 1.5;
}
.yw .yw-pop__u { font-weight: 400; margin-right: 1px; }
.yw .yw-pop.is-high { background: var(--yw-pop-high); }
.yw .yw-pop.is-mid { background: var(--yw-pop-mid); }
.yw .yw-pop.is-low { background: var(--yw-pop-low); }
.yw .yw-pop.is-none { background: #efe6d8; color: var(--yw-faint); }

.yw .yw-credit { margin-top: 8px; font-size: 10px; color: var(--yw-faint); text-align: right; line-height: 1.6; }
.yw .yw-credit a { color: inherit; text-decoration: underline; }
.yw .yw-note { margin-top: 6px; font-size: 11px; color: var(--yw-faint); }
.yw .yw-hint { margin-left: 4px; font-size: 11px; font-weight: 400; color: var(--yw-faint); }

/* ---- 警報・注意報の印（小さなカード） ---- */
.yw .yw-wbadge {
	position: absolute;
	top: -8px;
	left: 50%;
	transform: translateX(-50%);
	padding: 0 7px;
	border-radius: 999px;
	font-size: 10px;
	font-weight: 800;
	line-height: 16px;
	white-space: nowrap;
	color: #fff;
}
.yw .yw-wbadge.is-advisory { background: var(--yw-w-advisory); color: #4a3a00; }
.yw .yw-wbadge.is-warning { background: var(--yw-w-warning); }
.yw .yw-wbadge.is-danger { background: var(--yw-w-danger); }
.yw .yw-wbadge.is-special { background: var(--yw-w-special); }

/* ---- 小さなカード（トップ・ほかの地方） ---- */
.yw .yw-minis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding-top: 6px; }
.yw .yw-minis--others { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.yw .yw-mini { position: relative; }
.yw .yw-mini__a {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	height: 100%;
	padding: 8px 2px 6px;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 2px 0 var(--yw-line);
	color: var(--yw-text);
	text-align: center;
	transition: box-shadow .15s, transform .15s;
}
.yw .yw-mini__a:hover { box-shadow: 0 2px 0 var(--yw-green); }
.yw .yw-mini__a:active { transform: scale(.98); }
.yw .yw-mini__name { font-size: 13px; font-weight: 800; }
.yw .yw-mini__temp { font-size: 15px; line-height: 1.2; }
.yw .yw-mini__br { display: block; }
.yw .yw-mini .yw-pop { font-size: 11px; min-width: 0; padding: 1px 6px; }

/* ---- トップ ---- */
.yw-top { position: relative; margin: 0 0 1.5em; }
.yw-top .yw-r { position: absolute; opacity: 0; pointer-events: none; }
.yw-top .yw-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.yw-top .yw-title { font-size: 15px; font-weight: 800; }
.yw-top .yw-title::before {
	content: "";
	display: inline-block;
	width: 10px;
	height: 10px;
	margin-right: 6px;
	border-radius: 50%;
	background: var(--yw-green);
	vertical-align: 1px;
}
.yw-top .yw-tabs { display: flex; background: #fff; border: 1px solid var(--yw-line); border-radius: 999px; overflow: hidden; }
.yw-top .yw-tab { display: block; padding: 4px 14px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--yw-sub); cursor: pointer; }
.yw-top .yw-r--today:checked ~ .yw-head .yw-tab--today,
.yw-top .yw-r--tomorrow:checked ~ .yw-head .yw-tab--tomorrow { background: var(--yw-green); color: #fff; }
.yw-top .yw-r:focus-visible ~ .yw-head .yw-tabs { outline: 2px solid var(--yw-lo); outline-offset: 2px; }
.yw-top .yw-r--today:checked ~ .yw-panel--tomorrow,
.yw-top .yw-r--tomorrow:checked ~ .yw-panel--today { display: none; }
.yw-top.yw-cols-3 .yw-minis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.yw-top.yw-cols-2 .yw-minis { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* 1地方だけのときは横長に */
.yw-top.yw-cols-1 .yw-minis { grid-template-columns: 1fr; }
.yw-top.yw-cols-1 .yw-mini__a { flex-direction: row; justify-content: space-between; gap: 10px; padding: 8px 12px; text-align: left; }
.yw-top.yw-cols-1 .yw-mini__temp { font-size: 17px; }
.yw-top.yw-cols-1 .yw-mini__br { display: inline; margin-left: 6px; }
.yw-top.yw-cols-1 .yw-wbadge { left: 12px; transform: none; }

/* ---- 詳細ページ ---- */
.yw-detail { margin: 0 0 2em; }
.yw-detail .yw-dmeta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 12px; font-size: 12px; color: var(--yw-sub); }
.yw-detail .yw-dcities summary { cursor: pointer; text-decoration: underline dotted; }
.yw-detail .yw-dcities p { margin-top: 4px; }

.yw-detail .yw-box {
	margin-bottom: 14px;
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 2px 0 var(--yw-line);
	overflow: hidden;
}
.yw-detail .yw-box__b { padding: 12px; }

/* 見出し：薄い帯＋緑の縦線 */
.yw-detail .yw-h2,
.yw-detail .yw-h2::before,
.yw-detail .yw-h2::after { all: unset; }
.yw-detail .yw-h2 {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0 8px;
	margin: 0;
	padding: 9px 12px 9px 10px;
	background: var(--yw-soft);
	border-bottom: 1px solid #eee3d2;
	box-shadow: inset 4px 0 0 var(--yw-green);
	padding-left: 16px;
	font-size: 16px;
	font-weight: 800;
	line-height: 1.4;
	color: var(--yw-text);
}
.yw-detail .yw-h2__sub { font-size: 13px; font-weight: 400; color: var(--yw-sub); }
.yw-detail .yw-h2 .yw-hint { margin-left: 0; }

/* 今日・明日 */
.yw-detail .yw-day__main { display: flex; align-items: center; gap: 12px; }
.yw-detail .yw-day__label { flex: 1; min-width: 0; font-size: 18px; font-weight: 800; line-height: 1.35; }
.yw-detail .yw-day__temp { flex: none; display: flex; flex-direction: column; align-items: flex-end; font-size: 26px; line-height: 1.1; }
.yw-detail .yw-day__detail { margin-top: 6px; font-size: 13px; color: var(--yw-sub); }
.yw-detail .yw-pops { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin-top: 10px; }
.yw-detail .yw-pops li { text-align: center; }
.yw-detail .yw-pops__h { display: block; font-size: 11px; color: var(--yw-sub); margin-bottom: 2px; }
.yw-detail .yw-pops .yw-pop { display: block; min-width: 0; padding: 3px 0; border-radius: 6px; font-size: 13px; }
.yw-detail .yw-day__sub { margin-top: 8px; font-size: 12px; color: var(--yw-sub); }

/* 今夜 */
.yw-detail .yw-tonight__main { display: flex; align-items: center; gap: 10px; }
.yw-detail .yw-tonight__label { flex: 1; min-width: 0; line-height: 1.4; }
.yw-detail .yw-tonight__label b { font-size: 16px; margin-right: 8px; }
.yw-detail .yw-tonight__label span { font-size: 12px; color: var(--yw-sub); }

/* 週間（1日1行） */
.yw-detail .yw-week li {
	display: grid;
	grid-template-columns: 58px 34px minmax(0, 1fr) auto 40px;
	align-items: center;
	gap: 6px;
	padding: 6px 0;
	border-bottom: 1px solid #f1e9dc;
}
.yw-detail .yw-week li:last-child { border-bottom: 0; }
.yw-detail .yw-week__d { font-size: 14px; font-weight: 800; white-space: nowrap; }
.yw-detail .yw-week__d small { font-size: 11px; font-weight: 400; margin-left: 2px; }
.yw-detail .yw-week .is-sun .yw-week__d { color: var(--yw-hi); }
.yw-detail .yw-week .is-sat .yw-week__d { color: var(--yw-lo); }
.yw-detail .yw-week__l { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yw-detail .yw-week__t { font-size: 15px; white-space: nowrap; }
.yw-detail .yw-week__sl { margin: 0 3px; color: #cbbda9; }
.yw-detail .yw-week__p { font-size: 12px; font-weight: 700; color: var(--yw-lo); text-align: right; }

/* 天気の解説 */
.yw-detail .yw-ov__head { margin-bottom: 6px; font-weight: 700; }
.yw-detail .yw-ov__text p { font-size: 14px; line-height: 1.8; letter-spacing: .02em; }
.yw-detail .yw-ov__text p + p { margin-top: 4px; }
.yw-detail .yw-ov__by { margin-top: 8px; font-size: 11px; color: var(--yw-faint); }
.yw-detail .yw-ov__by a { color: inherit; text-decoration: underline; }

/* イベント */
.yw-detail .yw-more {
	display: block;
	margin-top: 10px;
	padding: 9px;
	border: 1px solid var(--yw-line);
	border-radius: 999px;
	color: var(--yw-text);
	font-size: 13px;
	font-weight: 700;
	text-align: center;
}
.yw-detail .yw-more:hover { background: var(--yw-soft); }

/* ほかの地方 */
.yw-detail .yw-minis--others .yw-mini__a { background: var(--yw-soft); box-shadow: none; }

/* ---- 警報・注意報の欄（詳細ページ） ---- */
.yw-detail .yw-warn {
	margin-bottom: 14px;
	background: #fff;
	border-radius: 14px;
	border: 2px solid var(--yw-w-advisory);
	overflow: hidden;
}
.yw-detail .yw-warn.is-warning { border-color: var(--yw-w-warning); }
.yw-detail .yw-warn.is-danger { border-color: var(--yw-w-danger); }
.yw-detail .yw-warn.is-special { border-color: var(--yw-w-special); }
.yw-detail .yw-warn__h,
.yw-detail .yw-warn__h::before,
.yw-detail .yw-warn__h::after { all: unset; }
.yw-detail .yw-warn__h {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	background: #fffbd6;
	font-size: 15px;
	font-weight: 800;
	color: var(--yw-text);
}
.yw-detail .yw-warn.is-warning .yw-warn__h { background: #ffe9e4; }
.yw-detail .yw-warn.is-danger .yw-warn__h { background: #f6e3f6; }
.yw-detail .yw-warn.is-special .yw-warn__h { background: #2a222a; color: #fff; }
.yw-detail .yw-warn__ic {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--yw-text);
	color: #fff;
	font-size: 13px;
	font-weight: 800;
}
.yw-detail .yw-warn.is-special .yw-warn__ic { background: #fff; color: #0c000c; }
.yw-detail .yw-warn__list { padding: 8px 12px 0; }
.yw-detail .yw-warn__list li { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; padding: 4px 0; }
.yw-detail .yw-warn__c { font-size: 12px; color: var(--yw-sub); }
.yw-detail .yw-warn__by { padding: 6px 12px 10px; font-size: 11px; color: var(--yw-faint); }
.yw-detail .yw-warn__by a { color: inherit; text-decoration: underline; }
.yw .yw-wchip {
	display: inline-block;
	padding: 1px 10px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 800;
	color: #fff;
	white-space: nowrap;
}
.yw .yw-wchip.is-advisory { background: var(--yw-w-advisory); color: #4a3a00; }
.yw .yw-wchip.is-warning { background: var(--yw-w-warning); }
.yw .yw-wchip.is-danger { background: var(--yw-w-danger); }
.yw .yw-wchip.is-special { background: var(--yw-w-special); }
/* 表にない番号（内容不明）は灰色で、気象庁での確認を促す */
.yw .yw-wchip.is-unknown,
.yw .yw-wbadge.is-unknown { background: #5c5c5c; color: #fff; }
.yw-detail .yw-warn.is-unknown { border-color: #5c5c5c; }
.yw-detail .yw-warn.is-unknown .yw-warn__h { background: #eeeeee; }
.yw-detail .yw-warn__u { flex-basis: 100%; font-size: 12px; color: var(--yw-text); font-weight: 700; }
.yw-detail .yw-warn__go { padding: 0 12px 12px; }
.yw-detail .yw-warn__go a,
.yw-detail .yw-wlink a {
	display: inline-block;
	font-size: 13px;
	font-weight: 700;
	color: var(--yw-text);
	text-decoration: underline;
}
.yw-detail .yw-wlink { margin: -4px 0 12px; }
.yw-detail .yw-wlink a { font-size: 12px; font-weight: 400; color: var(--yw-sub); }

@media (min-width: 768px) {
	.yw .yw-mini__temp { font-size: 16px; }
	.yw .yw-ic--m { width: 46px; height: 40px; }
	.yw-detail .yw-week li { grid-template-columns: 70px 40px minmax(0, 1fr) auto 56px; }
	.yw-detail .yw-week__l { font-size: 13px; }
}

/* 見出しの緑の線：カードの角で欠けないよう、少し内側に置く */
.yw-detail .yw-h2 { position: relative; box-shadow: none; padding-left: 26px; }
.yw-detail .yw-h2::before {
	content: "";
	position: absolute;
	left: 14px;
	top: 6px;
	bottom: 6px;
	width: 4px;
	border-radius: 2px;
	background: var(--yw-green);
}