@charset "UTF-8";
/* あの日の天気・この日の天気 CSS */
/* みんなの知識 ちょっと便利帳 */
/* 2026/07/07 */

  /* ============================================================
     「あの日の天気・この日の天気」専用テーマ。
     「きょうの天気と服装提案」（青系・実用トーン）とは明確に区別するため、
     セピア×臙脂（えんじ）× 金の「古い写真・記念絵はがき」風の配色にしています。
     クラス名はすべて「.ano-」で始め、親ページや他ツールと衝突しません。
     ============================================================ */
  .ano-container {
    max-width: 900px;
    margin: 20px auto;
    background: #FBF3E2;
    border-radius: 16px;
    padding: 25px;
    border: 2px solid #8B4A3D;
    box-shadow: 0 4px 24px rgba(80, 40, 20, 0.12);
    color: #3B2A22;
    font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
    box-sizing: border-box;
  }
  .ano-container * { box-sizing: border-box; }

  .ano-header {
    text-align: left;
    margin-bottom: 22px;
    padding-bottom: 16px;
    border-bottom: 2px dashed #C9A227;
  }  .ano-title {
    text-align: center;  
    margin: 0 0 15px;
    font-size: 28px;
    font-weight: 900;
    color: #7B2D2D;
    letter-spacing: .06em;
    font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;  }
  .ano-subtitle {
    margin: 0;
    color: #6B5544;
    font-size: 14px;
    line-height: 1.7;
    font-family: system-ui, -apple-system, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  }

  .ano-panel {
    background: #FFFFFF;
    border: 1px solid #E4CBA8;
    border-radius: 12px;
    padding: 18px;
    margin-bottom: 22px;
    font-family: system-ui, -apple-system, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  }

  .ano-place-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    margin-bottom: 16px;
  }
  .ano-input, .ano-select, .ano-btn {
    font-size: 16px;
    border-radius: 10px;
    border: 1px solid #D8BFA0;
    padding: 12px 14px;
    outline: none;
    background: #fff;
    color: #3B2A22;
  }
  .ano-input:focus, .ano-select:focus {
    border-color: #8B4A3D;
    box-shadow: 0 0 0 3px rgba(139, 74, 61, 0.15);
  }
  .ano-btn:focus-visible, .ano-input:focus-visible, .ano-select:focus-visible {
    outline: 2px solid #8B4A3D;
    outline-offset: 2px;
  }
  .ano-btn-secondary {
    background: #F1E4CE;
    color: #7B2D2D;
    border: 1px solid #D8BFA0;
    cursor: pointer;
    font-weight: 700;
  }
  .ano-btn-secondary:hover { background: #E9D8B8; }

  .ano-map-wrapper {
    margin-bottom: 20px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #D8BFA0;
  }
  .ano-map-instruction {
    background: #F1E4CE;
    padding: 8px 12px;
    font-size: 13px;
    color: #6B5544;
    border-bottom: 1px solid #D8BFA0;
    font-weight: bold;
  }
  #anoMap { width: 100%; height: 220px; background: #e5d9c3; }

  /* 地図レイヤー切り替え（右上コントロール） */
  .ano-map-layer-control {
    background: #FFFFFF;
    border: 1px solid #D8BFA0;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(80, 40, 20, 0.25);
    padding: 3px;
  }
  .ano-map-layer-select {
    font-size: 12.5px;
    font-weight: 700;
    color: #3B2A22;
    border: none;
    background: transparent;
    padding: 4px 6px;
    cursor: pointer;
    outline: none;
  }

  /* 大きな年月日セレクタ */
  .ano-date-label {
    font-size: 15px;
    font-weight: 800;
    color: #7B2D2D;
    margin-bottom: 10px;
  }
  .ano-date-row {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr auto;
    gap: 10px;
    align-items: stretch;
    margin-bottom: 16px;
  }
  .ano-date-select {
    font-size: 20px;
    font-weight: 800;
    text-align: center;
    padding: 10px 6px;
    border-radius: 12px;
    border: 2px solid #C9A227;
    background: #fff;
    color: #3B2A22;
  }
  .ano-date-select:focus {
    border-color: #8B4A3D;
    box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.25);
  }
  .ano-go-btn {
    font-size: 17px;
    font-weight: 800;
    padding: 14px 22px;
    border-radius: 12px;
    border: none;
    background: #7B2D2D;
    color: #FFF7EA;
    cursor: pointer;
    white-space: nowrap;
  }
  .ano-go-btn:hover { background: #632323; }
  .ano-go-btn:disabled { background: #C9A9A0; cursor: not-allowed; }

  .ano-mode-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .ano-mode-row .ano-select {
    width: 100%;
  }
  .ano-mode-label { font-size: 13px; font-weight: 700; color: #6B5544; white-space: nowrap; }

  @media (max-width: 700px) {
    .ano-date-row { grid-template-columns: 1fr 1fr; }
    .ano-go-btn { grid-column: 1 / -1; }
  }

  .ano-status {
    margin: 16px 0;
    padding: 14px;
    border-radius: 10px;
    font-weight: 600;
    font-family: system-ui, -apple-system, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  }
  .ano-status-loading { background: #FBF0DC; color: #7B5A20; border: 1px solid #EBD9A9; }
  .ano-status-error { background: #FBEAEA; color: #8B2D2D; border: 1px solid #F1C4C4; }

  /* 記念絵はがき風カード */
  .ano-postcard {
  font-family: system-ui, -apple-system, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;  
  color: #7B2D2D;  
  background: #FFFDF7;
  border: 3px double #C9A227;
  border-radius: 16px;
  padding: 28px 20px;
  text-align: center;
  margin-bottom: 22px;
  position: relative;
}

/* 基準となるフォントサイズと太さを一括適用 */
.ano-date-display,
.ano-date-sub,
.ano-place-label {
  /* dateを少し大きく、placeを少し小さくして、このサイズに統一します。
     clamp()はSafari 13.1未満では非対応のため、フォールバックとして
     固定サイズを先に指定してからclamp()で上書きします（対応ブラウザのみ有効）。 */
  font-size: 20px;
  font-size: clamp(19px, 4vw, 21px);
  font-weight: 700; /* 太さを統一 */
  line-height: 1.4;
}

.ano-date-display-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  column-gap: 10px;
  row-gap: 2px;
  margin-bottom: 14px;
}

.ano-date-display {
  white-space: nowrap;
}

.ano-date-sub {
  white-space: nowrap;
}

.ano-place-label {
  margin-bottom: 6px;
}

  .ano-sun-card {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #FBEEDC, #F6E1BF);
    border: 1px solid #E4CBA8;
    border-radius: 14px;
    padding: 14px 20px;
    margin-bottom: 20px;
    font-family: system-ui, -apple-system, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  }
  .ano-sun-item {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .ano-sun-icon {
    font-size: 26px;
    line-height: 1;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif;
  }
  .ano-sun-text { display: flex; flex-direction: column; line-height: 1.2; }
  .ano-sun-label { font-size: 12px; font-weight: 700; color: #8B6A4A; }
  .ano-sun-time { font-size: 21px; font-weight: 900; color: #7B2D2D; }

  /* この日の夜9時の月 */
  .ano-moon-card {
    background: #FFFFFF;
    border: 1px solid #E4CBA8;
    border-radius: 14px;
    padding: 18px;
    margin-bottom: 20px;
    text-align: center;
    font-family: system-ui, -apple-system, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  }
  .ano-moon-label {
    font-size: 15px;
    font-weight: 800;
    color: #7B2D2D;
    margin-bottom: 10px;
  }
  .ano-moon-img {
    width: 100px;
    height: 100px;
    object-fit: contain;
    margin: 0 auto 10px;
    display: block;
  }
  .ano-moon-age {
    font-size: 20px;
    font-weight: 900;
    color: #3B2A22;
  }

  .ano-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 20px;
    font-family: system-ui, -apple-system, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  }
  .ano-stat-card {
    background: #FFFFFF;
    border: 1px solid #E4CBA8;
    border-radius: 12px;
    padding: 14px;
    text-align: center;
  }
  .ano-stat-card .label { font-size: 15px; color: #6B5544; font-weight: 700; margin-bottom: 6px; }
  .ano-stat-card .value { font-size: 21px; font-weight: 900; color: #7B2D2D; }
  .ano-stat-card .subtext { font-size: 14px; color: #6B5544; margin-top: 4px; }

  @media (max-width: 700px) {
    .ano-stats-grid { grid-template-columns: 1fr; }
  }

  .ano-advice-card {
    background: linear-gradient(135deg, #FBEEDC, #F6E1BF);
    border: 1px solid #E4CBA8;
    border-radius: 14px;
    padding: 22px;
    margin-bottom: 20px;
    font-family: system-ui, -apple-system, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  }
  .ano-advice-title {
    font-size: 20px;
    font-weight: 900;
    color: #7B2D2D;
    margin-bottom: 8px;
  }
  .ano-advice-reason {
    font-size: 14.5px;
    color: #5A4230;
    line-height: 1.7;
    margin-bottom: 14px;
  }
  .ano-advice-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  @media (max-width: 700px) { .ano-advice-columns { grid-template-columns: 1fr; } }
  .ano-advice-sub-title {
    font-size: 13px;
    font-weight: 800;
    color: #7B2D2D;
    margin-bottom: 6px;
    border-left: 4px solid #C9A227;
    padding-left: 8px;
  }
  .ano-advice-list {
    margin: 0;
    padding-left: 18px;
    font-size: 13.5px;
    color: #5A4230;
    line-height: 1.8;
  }

  .ano-trivia-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 20px;
    font-family: system-ui, -apple-system, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  }
  @media (max-width: 700px) { .ano-trivia-grid { grid-template-columns: 1fr; } }
  .ano-trivia-card {
    background: #FFFFFF;
    border: 1px dashed #C9A227;
    border-radius: 12px;
    padding: 24px 0 14px 0;
    text-align: center;
  }
  .ano-trivia-card .icon { font-size: 40px; margin-bottom: 8px; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif; }
  .ano-trivia-card .label { font-size: 15px; color: #6B5544; font-weight: 700; margin-bottom: 6px; }
  .ano-trivia-card .value { font-size: 21px; font-weight: 800; color: #3B2A22; }

  .ano-detail {
    padding: 16px;
    background: #FFFBF3;
    border-radius: 10px;
    border: 1px dashed #D8BFA0;
    color: #6B5544;
    font-size: 12.5px;
    line-height: 1.7;
    font-family: system-ui, -apple-system, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  }
  .ano-detail ul { margin: 8px 0 0; padding-left: 20px; }
  .ano-detail li { margin-bottom: 4px; }

  /* この日の24時間（時間別）表 */
  .ano-hourly-box {
    background: #FFFFFF;
    border: 1px solid #E4CBA8;
    border-radius: 12px;
    padding: 18px;
    margin-bottom: 20px;
    font-family: system-ui, -apple-system, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  }
  .ano-hourly-title {
    font-size: 15px;
    font-weight: 800;
    color: #7B2D2D;
    margin-bottom: 10px;
  }
  .ano-hourly-table-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .ano-hourly-table {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
    font-size: 15px;
    min-width: 1400px;
  }
  .ano-hourly-table th, .ano-hourly-table td {
    padding: 9px 8px;
    border-bottom: 1px solid #E4CBA8;
  }
  .ano-hourly-table th {
    background: #F1E4CE;
    color: #7B2D2D;
    font-weight: 800;
    font-size: 13.5px;
  }
  .ano-hourly-table th:first-child, .ano-hourly-table td:first-child {
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    background: #FFFFFF;
    font-weight: 800;
    z-index: 2;
    border-right: 2px solid #E4CBA8;
    min-width: 80px;
    text-align: left;
  }
  .ano-hourly-table th:first-child { background: #F1E4CE; }
  .ano-td-label { color: #8B6A4A; }
  .ano-td-weather { font-weight: 700; color: #7B2D2D; }
  .ano-td-temp { font-weight: 800; color: #3B2A22; }
  .ano-td-wind { font-weight: 600; color: #5A7A4A; }
  .ano-cell-max-badge {
    display: inline-block;
    background: #FBEAEA;
    color: #B23A3A;
    padding: 2px 6px;
    border-radius: 6px;
    border: 1px solid #E6A9A9;
    font-weight: 800;
  }
  .ano-cell-min-badge {
    display: inline-block;
    background: #EAF1FB;
    color: #2A4E8B;
    padding: 2px 6px;
    border-radius: 6px;
    border: 1px solid #A9C4E6;
    font-weight: 800;
  }