@charset "utf-8";

:root {
  --color-primary: #768698;
  --color-secondary: #D9D9D9;
  --color-third: #1A456C;
  --color-rain: #68c1ee;
  --color-sunny: #ffbe0d;
}

/* ---------- #imgWrap & SVGマップ ---------- */
#imgWrap {
  background-color: var(--color-primary);
  position: relative;
  width: max-content;
  max-height: 45vw;
  margin: 0 auto; /* ← これで中央揃え */
}

#imgWrap img {
  display: block;
  max-height: 45vw;
}

#imgWrap svg {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  max-height: 45vw;
}

#imgWrap #r1,
#imgWrap #r2,
#imgWrap #r3,
#imgWrap #r4,
#imgWrap #r5,
#imgWrap #r6,
#imgWrap #r7,
#imgWrap #r8,
#imgWrap #r9 {
  stroke: var(--color-third);
  stroke-width: 2;
}

#imgWrap #r1 circle,
#imgWrap #r2 circle,
#imgWrap #r3 circle,
#imgWrap #r4 circle,
#imgWrap #r5 circle,
#imgWrap #r6 circle,
#imgWrap #r7 circle,
#imgWrap #r8 circle,
#imgWrap #r9 circle {
  fill: var(--color-third);
  cursor: pointer;
}

/* ---------- テーブル ---------- */
.my-table {
  position: absolute;
  top: 0vw;
  left: 39.7vw;
  width: 42.4vw;
  border: 0;
  border-spacing: 0;
  text-align: center;
  table-layout: fixed;

}

/* cocoonのstyle上書き */
.my-table td,
.my-table th {
  border: none;
  padding: 0;
  background-color: transparent;
}
.my-table  tr:nth-child(odd),
.my-table  tr:nth-child(even) {
  background-color: transparent;
}

.my-table th.date:first-child {
  width: 2.9vw;
}
.my-table th.spec:first-child {
  width: 3.18vw;
}

.my-table th {
  height: 3.38vw;
  width: 2vw;
  font-size: clamp(0.2rem, 1.06vw, 1rem);
  line-height: 1.06vw;
  font-weight: bold;
  color: var(--color-secondary);
  white-space: nowrap;
  cursor: pointer;
}

.my-table td.std:nth-child(1) {
  font-size: clamp(0.2rem, 1.59vw, 1.5rem);
  color: var(--color-secondary);
  cursor: pointer;
}

.my-table td.std {
  height: 4.52vw;
  max-height: 4.39vw;
  font-size: clamp(0.2rem, 1.06vw, 2.0rem);
  font-weight: bold;
  color: var(--color-secondary);
}

.my-table td.std_resort:nth-child(1) {
  width: 3.44vw;
  font-size: clamp(0.2rem, 0.85vw, 1.6rem);
  font-weight: bold;
  color: var(--color-secondary);
  line-height: 1.06vw;
  cursor: pointer;
}
.my-table td.std_resort {
  width: 2.9vw;
}

/* ---------- 予報セル ---------- */
.forecastTd {
  vertical-align: top;
  border-left: 1px solid rgba(255, 255, 255, 0.4);
}

.forecastTd div {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  border-left: none; /* ← 消す */
}

.forecastTd div img {
  width: 3.18vw;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  margin-right: 0.2rem;
}

.forecastTd .temp {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: clamp(0.1rem, 1.2vw, 0.7rem);
  font-weight: bold;
}

.high-temp {
  color: var(--color-sunny);
}

.low-temp {
  color: var(--color-rain);
}

.precipitation {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: clamp(0.2rem, 1.06vw, 1rem);
  padding: 0vw 0vw 0.95vw 0vw;
  font-weight: bold;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  line-height: 1.06vw;
}

.snow-fall {
  color: var(--color-secondary);
}

.rain-fall {
  color: var(--color-rain);
}

.my-table td.probability {
  color: var(--color-rain);
  font-weight: bold;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}

/* ---------- ボタンUI ---------- */
.btn-container {
  display: flex;
  flex-direction: column;
  gap: 0.26vw;
  position: absolute;
  top: 2.65vw;
  left: 1.59vw;
  z-index: 10;
}

.unit {
  font-size: clamp(0.2rem, 1.2vw, 0.7rem);
}

.send-label {
  line-height: 1.06vw;
  font-size: clamp(0.2rem, 1.59vw, 1.5rem);
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  color: var(--color-third);
  background-color: var(--color-secondary);
  padding: 0.79vw 1.32vw 0.79vw 3.71vw;
  border-radius: 52.9vw;
  position: relative;
  cursor: pointer;
}

.send-label:hover {
  color: var(--color-secondary);
  background: none;
  outline: 2px solid var(--color-secondary);
  outline-offset: -2px;
  font-style: italic;
}

/* アイコン */
a.btn:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0.79vw;
  transform: translateY(-50%);
  width: 1.5em;
  height: 1.5em;
  background-image: var(--icon-url);
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
}