.climate-shell{max-width:1050px}.climate-gauge{margin:0 auto 14px;max-width:900px}.climate-gauge>div{display:flex;justify-content:space-between;gap:12px}.climate-gauge i{display:block;height:12px;background:#e8edf2;border-radius:999px;overflow:hidden}.climate-gauge b{display:block;height:100%;background:currentColor;border-radius:inherit}.climate-start-card,.climate-play-card{max-width:900px;margin:auto;text-align:center}.climate-type-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:22px 0}.climate-type-grid button{min-height:66px;border:1px solid #dce2eb;border-radius:15px;background:#fff;color:#172033;font-size:18px;font-weight:900;cursor:pointer}.climate-type-grid button.is-selected{border:3px solid #315fe8;background:#eef3ff}.climate-start{width:100%;min-height:58px;border:0;border-radius:15px;background:#071a4f;color:#fff;font-size:20px;font-weight:900;cursor:pointer}.climate-start:disabled{opacity:.35}.climate-next{border:1px solid #cbd5df;border-radius:14px;background:#fff;padding:14px;font:inherit;cursor:pointer}.climate-charts{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin:12px 0}.climate-chart-card{width:min(100%,420px);border:1px solid #d7dee7;border-radius:16px;padding:8px;background:#fff}.climate-chart-card.is-choice{cursor:pointer}.climate-chart-card.is-choice:hover{outline:3px solid #cbd5df}.climate-chart-card svg{width:100%;height:auto}.cc-axis{stroke:#687382;stroke-width:1.5}.cc-bar{fill:#a9c8e8}.cc-temp{fill:none;stroke:#e35d5d;stroke-width:3}.cc-dot{fill:#e35d5d}.climate-chart-card text{font-size:12px;fill:#5b6570}.climate-choices{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:640px;margin:16px auto}.climate-choices button{min-height:58px;border:1px solid #dce2eb;border-radius:14px;background:#fff;color:#172033;font-size:18px;font-weight:900;cursor:pointer}.climate-choices button:active{transform:scale(.98)}
.climate-feedback{font-size:1.25rem;font-weight:700;min-height:2em}.climate-feedback.ok{color:#177a48}.climate-feedback.ng{color:#b43b3b}.climate-detail{min-height:2em}.climate-source{display:block;margin:12px 0;color:#667}.climate-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:18px}.climate-action-button{min-height:48px;display:flex;align-items:center;justify-content:center;padding:10px 12px;border:1px solid #cbd5e1;border-radius:12px;background:#fff;color:#172033;font:inherit;font-weight:700;text-decoration:none;cursor:pointer;box-sizing:border-box}.climate-action-button--choose{background:#e9eef7;border-color:#e9eef7}.climate-action-button--pass{background:#fff3dd;border-color:#fff3dd}.climate-action-button--finish{background:#071a4f;border-color:#071a4f;color:#fff}.climate-action-button--choose:hover{background:#e9eef7}.climate-action-button--pass:hover{background:#fff3dd}.climate-action-button--finish:hover{background:#071a4f}.climate-next{font-weight:700;margin-top:8px}@media(max-width:700px){.climate-type-grid{grid-template-columns:1fr}.climate-choices{grid-template-columns:1fr 1fr}.climate-chart-card{width:100%}.climate-charts:has(.climate-chart-card:nth-child(2)){display:grid;grid-template-columns:1fr}.climate-charts:has(.climate-chart-card:nth-child(2)) .climate-chart-card{width:100%}}

@media(max-width:520px){.climate-actions{gap:7px}.climate-action-button{padding:9px 6px;font-size:14px}}

/* 3枚の雨温図はPC・タブレットで横並びにして比較しやすくする */
@media (min-width:701px){
  .climate-charts:has(.climate-chart-card:nth-child(3)){
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    align-items:start;
    gap:10px;
    max-width:100%;
  }
  .climate-charts:has(.climate-chart-card:nth-child(3)) .climate-chart-card{
    width:auto;
    min-width:0;
    box-sizing:border-box;
    padding:6px;
  }
  .climate-charts:has(.climate-chart-card:nth-child(3)) .climate-chart-card>strong{
    display:block;
    margin-bottom:2px;
    font-size:20px;
  }
  .climate-charts:has(.climate-chart-card:nth-child(3)) .climate-chart-card text{
    font-size:11px;
  }
}