@charset "utf-8";
/* =========================================================
   臨時休湯のお知らせ（カード下部）
   サーバー出力：
     <div class="temporary-closure-notice">
       <span class="temporary-closure-notice__period">8月1日～8月31日</span>は臨時休湯です。
     </div>
   ========================================================= */
.temporary-closure-notice {
  margin-top: auto;             /* カード下部に固定 */
  padding: 9px 10px;
  border-radius: 6px;
  background: #d8402f;
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: bold;
  line-height: 1.5;
  letter-spacing: .01em;
  text-align: center;
}
/* 期間の直後で改行し、日付を大きく見せる */
.temporary-closure-notice__period {
  display: block;
  font-family: Arial, "Helvetica Neue", sans-serif;
  font-size: 1.35em;
  line-height: 1.35;
  letter-spacing: .02em;
}
/* お知らせの上に少し余白（グラフ・温度計との間） */
.facility > .temporary-closure-notice { margin-top: 14px }

/* =========================================================
   施設名の上に置くローマ字表記
   ========================================================= */
.facility-en {
  margin: 0 0 2px;
  font-family: serif;           /* 下の .facility-name に合わせる */
  font-size: 12px;
  font-weight: bold;
  letter-spacing: .12em;
  line-height: 1.4;
  color: #444;
}

/* =========================================================
   休湯中のカード
   「お休み」の札が position:absolute でカード中央に浮いており、
   下部のお知らせと重なるため、通常フローに戻して中央に置く。
   ========================================================= */
.facility.closing .mark-info-wrap {
  position: static;
  transform: none;
  width: 100%;
  margin: auto 0;
}
.facility.closing .closing-mark {
  position: static;
  transform: none;
  display: block;
}
/* 960px以下では style.css が札に padding-top:15% を掛けて下げている。
   いまは margin:auto で中央に置いているので、その分だけ下がりすぎる。 */
.facility.closing .closing-mark img { padding-top: 0 }

/* SPは「お休み」の札を少し小さく */
@media screen and (max-width: 599px) {
  .facility.closing .closing-mark img { width: 110px }
}

/* =========================================================
   responsive
   カードが 3列／2列と細くなるので、期間が折り返さないよう
   カード幅に合わせた vw（clamp で上下限つき）で追従させる
   ========================================================= */
@media screen and (max-width: 960px) {
  .facility > .temporary-closure-notice { margin-top: 10px }
  .temporary-closure-notice { padding: 8px 4px }
  .temporary-closure-notice__period {
    white-space: nowrap;
    letter-spacing: 0;
  }
}
/* 600〜960px：カード3列 */
@media screen and (min-width: 600px) and (max-width: 960px) {
  .temporary-closure-notice { font-size: clamp(13px, 2.4vw, 21px) }
  .temporary-closure-notice__period { font-size: clamp(14px, 2.9vw, 26px) }
  .facility-en { font-size: 11px; letter-spacing: .08em }
}
/* 600px以下：カード2列 */
@media screen and (max-width: 599px) {
  .temporary-closure-notice { font-size: clamp(13px, 3.5vw, 19px) }
  .temporary-closure-notice__period { font-size: clamp(15px, 4.2vw, 24px) }
  .facility-en { font-size: 11px; letter-spacing: .08em }
}