:root{
  --panel-bg:#1f2d27;
  --panel-fg:#fdfdfb;
}

/* ---- widget ---- */
.wx-wrap {
	position:fixed; right:60px; bottom:80px; z-index: 99;
	width:155px; height: 180px;
}
.wx{
  border-radius:17px;
  padding:10px;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
  transform-origin:top right;
  transition:transform .35s ease, opacity .35s ease;
  background:#fff;
  border: 4px solid #008796;
}
.wx.wx--hidden{transform:scale(.85) translateY(-8px);opacity:0;pointer-events:none;position:absolute;inset:0;}
.wx__close{
  cursor:pointer;
  position:absolute; top:-20px; right:-20px;
  display:block;
  width: 40px; height: 40px;
  text-indent: -9999px;
  background: #008796 url("../../image/b_close.webp") no-repeat center center;
  background-size: 17px auto;
  border: none;
  border-radius: 40px;
}
.area_data { display:flex; justify-content: space-between;}
.kochi{
	width: 45px; height: 16px;
	font-family: "Dokdo", system-ui;
	font-weight: 400;
	color: #fff;
	line-height: 16px;
	letter-spacing: -7%;
	text-align: center;
	background: #62B1C5;
	border-radius: 6px;

}
.wx__date{
	display:flex; align-items:baseline; margin-bottom:4px;
	font-family: "Dokdo", system-ui;
	font-weight: 400;
	color: #62B1C5;
	line-height: 16px;
	letter-spacing: -8%;
}

/* ---- current temperature ---- */
.wx__temp {
	display:flex; justify-content: center; align-items:baseline; gap:4px;
	margin: 2px auto 10px;
	text-align: center;
	height: 55px;
	background: #E5F2F6;
	border-radius: 6px;
}
.wx__temp-label{ display: none; font-size:11px;opacity:.7;}
.wx__temp-value{
	font-family: "Dokdo", system-ui;
	font-weight: 400;
	font-size: 68px;
	color: #008796;
	letter-spacing: -11%;
	line-height: 55px;
}
.wx__temp-unit {
    font-family: "Darumadrop One", sans-serif;
	font-weight: 400;
	font-size: 40px;
	color: #008796;
}
.tenki { display: flex;}
.wx__forecast {
	width: 50%;
	line-height: 100%;
	text-align: center;
}
.wx__forecast--divided{
	background: url("../../image/line_tenki.webp") no-repeat left center;
	background-size: 4px auto;
}
.wx__label{ font-size:11px; letter-spacing: 40%;}
.wx__icon{ margin: auto; width:40px;height:auto;flex-shrink:0;display:block;}
.wx__text{ font-size:11px; letter-spacing: 20%;}
.wx__error{font-size:12px;opacity:.8;}

.wx__forecast:has(.wx__icon[src*="weather-partly-cloudy.svg"]) .wx__text { color:#58CCC4;}
.wx__forecast:has(.wx__icon[src*="weather-cloudy.svg"]) .wx__text { color:#58CCC4;}
.wx__forecast:has(.wx__icon[src*="weather-pouring.svg"]) .wx__text { color:#58CCC4;}
.wx__forecast:has(.wx__icon[src*="weather-snowy.svg"]) .wx__text { color:#F28F04;}
.wx__forecast:has(.wx__icon[src*="weather-cloudy.svg"]) .wx__text { color:#58CCC4;}


/* ---- reopen tab ---- */
.wx-tab {
    cursor: pointer;
    position: fixed;
    right: 0;
    bottom: 30px;
    padding: 6px 10px;
    font-size: 16px;
    font-weight: 700;
    color: #62B1C5;
    font-family: "Zen Maru Gothic", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
    letter-spacing: 0.1em;
    background: #fff;
    border: 4px solid #008796;
    border-right: 0;
    border-radius: 10px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.wx-tab__icon {
    width: 30px;
    height: 30px;
    display: block;
}


@media (max-width:768px){
	.wx-wrap { right:0; bottom:30px; width:215px; height: 93px; }
	.wx{
	  display: flex; flex-wrap: wrap; justify-content: space-between;
	  border-radius:0;
	  border-top-left-radius:20px;
	  border-bottom-left-radius:20px;
	  padding:5px 0 5px 10px;
	  border-right: 0;
	}
	.wx__close{
	  top:-28px; right:0;
	  width: 28px; height: 28px;
	  background-size: 12px auto;
	  border-radius: 0;
	  border-top-left-radius: 8px;
	}
	.data { width: 100px;}
	.area_data { display:flex; justify-content: space-between; padding-top: 5px;}
	.kochi {
		width: 37px; height: 14px;
		font-size: 14px;
		line-height: 14px;
	}
	.wx__date{
		font-size: 14px;
		line-height: 14px;
		letter-spacing: -8%;
	}

	/* ---- current temperature ---- */
	.wx__temp {
		height: 40px;
	}
	.wx__temp-value{
		font-size: 48px;
		line-height: 40px;
	}
	.wx__temp-unit {
		font-size: 29px;
	}
	.tenki { width: calc(100% - 100px - 10px); display: flex;}
	.wx__label{ font-size:10px; line-height: 10px;}
	.wx__icon{ width:27px;}
	.wx__text{ font-size:10px; letter-spacing: 20%;}
	.wx__error{font-size:10px;opacity:.8;}


	/* ---- reopen tab ---- */

}