@charset "UTF-8";

/* --------------------------------------------------
	news
-------------------------------------------------- */
#news { padding: 18px 0; }
#news .title { padding: 0 30px; display: inline-block; background: #99ccff; border-radius: 10px 10px 0 0; font-weight: bold; font-weight: 1.8rem; }
#news .contents { padding: 10px; border: solid 2px #99ccff; list-style: none; }
#news li { margin-bottom: 4px; line-height: 1.5; }
@media screen and (max-width: 767px) {
	#news li { font-size: 1.4rem; }
}

/* --------------------------------------------------
	map
-------------------------------------------------- */
#l-map .map-wrap { margin-bottom: 30px; width: 100%; position: relative; }

.popup { display: none; align-items: center; flex-direction: column; position: absolute; top: 10%; left: 10%; }
.popup-contents { width: 300px; background: #fff; box-shadow: 0 5px 16px  rgba(0, 0, 0, 0.3); }

.popup .spot { padding: 5px 10px; background: #fff; display: flex; align-items: center; justify-content: center; gap: 16px; }
.popup .spot-name { flex-shrink: 0; font-size: 1.6rem; }
.popup .spot-address { font-size: 1.2rem; line-height: 1.4; text-align: center; }
.popup .tab-group { display: flex; list-style: none; }
.popup .tab { width: 50%; }
.popup .tab a { width: 100%; padding: 8px 10px; display: block; border: solid 1px #fff; border-top: none; background: rgba(204, 204, 204, 0.8); color: #808080; text-align: center; text-decoration: none; }
.popup .tab.is-active a { color: #fff; font-weight: bold; background: var(--LandColor01); }
.popup .panel { display: none; }
.popup .panel.is-show { display: block; }
.popup .panel .title { padding: 5px; color: #fff; text-align: center; font-size: 1.5rem; }
.popup .panel .now { padding: 5px;  display: flex; align-items: center; justify-content: center; gap: 10px; }
.popup .panel .now strong { font-size: 2.0rem; text-decoration: underline; color: #e70000; }
.popup .panel .now .date { font-size: 1.3rem; }
.popup .panel button.reset { background: #2d649a; width: 32px; height: 32px; border-radius: 5px; transition: all .3s; }
.popup .panel button.reset:hover { background: #224d77; }
.popup .panel button.reset img { width: 20px; }
.popup .panel .graph { padding: 10px 0; background: #fff; }
.popup .panel .graph .btn-term { margin-bottom: 8px; display: flex; align-items: center; justify-content: center; gap: 10px; }
.popup .panel .graph .btn-term button { display: block; padding: 6px 14px; border: solid 2px #c0c0c0; border-radius: 5px; background: #e6e6e6; font-size: 1.3rem; font-weight: bold; color: #6d6d6d; }
.popup .panel .graph p { padding: 0 5px; text-align: center; font-size: 1.4rem; }
.popup .panel .lastyear { padding: 5px 10px; display: flex; align-items: center; justify-content: space-between; }
.popup .panel .lastyear > div { display: flex; align-items: center; gap: 8px; font-size: 1.2rem; }
.popup .panel .lastyear strong { font-size: 2.0rem; text-decoration: underline; }
.popup .panel .old-data { padding: 16px 10px 20px; }
.popup .panel .old-data a { background: #2d649a; display: block; padding: 4px; width: 100%; border-radius: 5px; color: #fff; text-decoration: none; text-align: center; transition: all .3s; }
.popup .panel .old-data a:hover { background: #224d77; }
.popup.is-open { display: block; }


/* single-spot時：タブ1個を横幅100%に */
.popup.single-spot .device-tab .tab {
    width: 100%;
}

/* 2個目以降のタブは消す（念のため） */
.popup.single-spot .device-tab .tab + .tab {
    display: none;
}

/* device02パネルは非表示（中身だけ隠す） */
.popup.single-spot .panel.device02 {
    display: none !important;
}

/* 左側の spot 情報の下に device01 の内容が続くように少し余白 */
.popup.single-spot .spot {
    margin-bottom: 20px;
}


.popup .tab.is-disabled,
.popup .panel.is-disabled {
  opacity: .4;
  filter: grayscale(1);
}


:root {
	--LandColor01: #734008;
	--LandColor02: #f0d4b7;
	--WaterColor01: #2f3081;
	--WaterColor02: #e0f0ff;
}
.popup.category01 {}
.popup.category01 .tab.is-active a { background: var(--LandColor01); }
.popup.category01 .panel .txtColor { color: var(--LandColor01); }
.popup.category01 .panel .bgColor { background: var(--LandColor01); }
.popup.category01 .panel .bgColor2 { background: var(--LandColor02); }

.popup.category02 .tab.is-active a { background: var(--WaterColor01); }
.popup.category02 .panel .txtColor { color: var(--WaterColor01); }
.popup.category02 .panel .bgColor { background: var(--WaterColor01); }
.popup.category02 .panel .bgColor2 { background: var(--WaterColor02); }


.popup-btm { width: 20px; height: 10px; clip-path: polygon(0 0, 100% 0%, 50% 100%); background: #fff; }

.popup-close-button { width: 100%; background: #808080; display: flex; justify-content: flex-end; position: absolute; top: 0; left: 0; transform: translateY(-100%); }
.popup-close-button a { padding: 6px 8px; color: #fff; text-decoration: none; font-size: 2rem; line-height: 1.0; }