@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: fit-content;
  max-height: 45vw;
  overflow: hidden;
  margin: 0 auto; /* ← これで中央揃え */
  max-width: calc(100vw - 10px); /* 左右5pxずつの余白 */
}

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

#imgWrap .overlay-img {
  position: absolute;
  top: 0;
  left: 0;
  height: 45vw;
  width: auto;
  pointer-events: none;
  transform-origin: 0 0;
  user-select: none;
  will-change: transform;
}

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

#imgWrap #niseko,
#imgWrap #tomamu,
#imgWrap #rusutsu,
#imgWrap #appi,
#imgWrap #zao,
#imgWrap #yuzawa,
#imgWrap #nozawa,
#imgWrap #myoko,
#imgWrap #hakuba {
  stroke: var(--color-third);
  stroke-width: 2;
}

#imgWrap #niseko circle,
#imgWrap #tomamu circle,
#imgWrap #rusutsu circle,
#imgWrap #appi circle,
#imgWrap #zao circle,
#imgWrap #yuzawa circle,
#imgWrap #nozawa circle,
#imgWrap #myoko circle,
#imgWrap #hakuba circle {
  fill: var(--color-third);
  cursor: pointer;
}

/* ---------- テーブル ---------- */
.my-table {
  position: absolute;
  top: 0vw;
  left: 63.5vw;
  width: 18.24vw;
  height: 45vw;
  border: 0;
  border-spacing: 0;
  text-align: center;
  table-layout: fixed;
}

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

.my-table tr:nth-child(2n) td {
  border-bottom: 1px solid #ccc;
}

.my-table tr:nth-child(10) td {
  border-bottom: none;
}

.my-table td {
  height: 4.5vw;
  font-size: clamp(0.2rem, 1.59vw, 3.0rem);
  font-weight: bold;
  color: var(--color-secondary);
  border: none;
  padding: 0;
  background-color: transparent;
}

.my-table td span {
  display: inline-block;
  line-height: 1;
}

.my-table td span.peak,
.my-table td span.base {
  transform: translate(-5.88vw, 0vw);
}
.my-table td span.course {
  transform: translate(-2.12vw, 1.59vw);
  font-size: clamp(0.2rem, 2.65vw, 5.0rem);
}
.my-table td span.length {
  transform: translate(0vw, 0.53vw);
}
.my-table td span.slope {
  transform: translate(4.24vw, 0.53vw);
}
.my-table td span.gondola {
  transform: translate(2.65vw, 1.06vw);
  font-size: clamp(0.2rem, 2.65vw, 5.0rem);
}
.my-table td span.lift {
  transform: translate(-2.65vw, -1.06vw);
  font-size: clamp(0.2rem, 2.65vw, 5.0rem);
}
.my-table td span.depth,
.my-table td span.fluffiness  {
  font-size: clamp(0.1rem, 1.2vw, 1.2rem);
  line-height: 1;
}
/* 各スキー場ページの予報 */

.forecast_table {
  table-layout: fixed;
  width: 100%;
  text-align: center;
  color: var(--color-secondary);
  font-size: clamp(0.2rem, 1.06vw, 2.0rem);
}

.forecast_table tr:nth-child(odd),
.forecast_table tr:nth-child(even) {
  background-color: transparent;
}

.forecast_table th {
  background-color: var(--color-secondary);
  color: var(--color-primary);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 0;
}

.forecast_table td {
  background-color: transparent;
  padding: 0;
  border-left: none;
  border-right: none;
  border-top: 1px solid rgba(255, 255, 255, 0.4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}
.forecast_table td:nth-child(1),
.forecast_table td:nth-child(4),
.forecast_table td:nth-child(7),
.forecast_table td:nth-child(10),
.forecast_table td:nth-child(13) {
  border-left: 1px solid rgba(255, 255, 255, 0.4);
}
.forecast_table td:last-child {
  border-right: 1px solid rgba(255, 255, 255, 0.4);
}

.forecastTd div {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.forecastTd div img {
  width: 3.17vw;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

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

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

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

.rainsnowTd span {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  white-space: nowrap;
}

.snow-fall,
.rain-fall {
  font-weight: bold;
  font-size: clamp(0.2rem, 1.5vw, 1.0rem);
}
.snow-fall {
  color: var(--color-secondary);
}
.rain-fall {
  color: var(--color-rain);
}

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

.popTd {
  white-space: nowrap;
}

.pop {
  max-width: 1.06vw;
  color: var(--color-secondary);
  font-weight: bold;
  font-size: clamp(0.2rem, 1.5vw, 1.0rem);
}