/* 全体 */

body {

  margin: 0;

  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  background: linear-gradient(180deg, #e0f3ff, #ffffff);

  color: #333;

}

/* ===== ヘッダー ===== */

.site-header {

  padding: 16px;

  background: rgba(255, 255, 255, 0.85);

  border-bottom: 1px solid #cfe4ff;

}

/* 横並び */

.header-inner {

  max-width: 640px;

  margin: 0 auto;

  display: flex;

  align-items: center;

  gap: 12px;

}

/* ロゴ */

.site-logo img {

  display: block;

  width: 64px;

  height: 64px;

}

/* テキスト */

.header-text h1 {

  margin: 0 0 4px;

  font-size: 1.4rem;

}

.header-text .lead {

  margin: 0;

  font-size: 0.9rem;

}

/* ===== スマホ対応 ===== */

@media (max-width: 480px) {

  .header-inner {

    flex-direction: row;

    align-items: center;

    justify-content: flex-start;

    padding: 0 8px;

  }

  .site-logo img {

    width: 52px;

    height: 52px;

  }

  .header-text h1 {

    font-size: 1.2rem;

  }

}

/* ===== コンテンツ ===== */

.container {

  max-width: 600px;

  margin: 16px auto;

  padding: 0 12px 24px;

}

/* カード */

.card {

  background: #ffffff;

  border-radius: 12px;

  padding: 16px;

  box-shadow: 0 4px 12px rgba(0, 80, 160, 0.08);

  margin-bottom: 12px;

}

/* 情報表示 */

.location-info,

.temp-info {

  font-size: 0.9rem;

  margin: 4px 0;

}

/* ===== ボタン ===== */

.btn-main {

  display: block;

  width: 80%;

  max-width: 320px;

  margin: 0 auto 16px;

  padding: 14px 24px;

  font-size: 1.15rem;

  border-radius: 999px;

  border: none;

  cursor: pointer;

  background: #4daaf5;

  color: #fff;

  font-weight: bold;

}

.btn-main:disabled {

  opacity: 0.6;

  cursor: default;

}

.btn-main:active {

  transform: scale(0.97);

}

/* ===== 結果 ===== */

.result-box {

  margin-top: 8px;

  padding-top: 12px;

  border-top: 1px dashed #b3d7ff;

  text-align: center;

}

.label {

  font-size: 0.85rem;

  color: #0070c9;

  margin-bottom: 4px;

}

.result-name {

  font-size: 1.3rem;

  font-weight: bold;

  margin: 4px 0 8px;

}

/* ===== アドバイス ===== */

.advice-box {

  margin-top: 8px;

  text-align: left;

}

.advice-list {

  padding-left: 1.2rem;

  margin: 4px 0;

  font-size: 0.9rem;

}

.advice-list li {

  margin-bottom: 4px;

}

/* ===== 説明 ===== */

.note {

  margin-top: 16px;

  padding: 12px;

  background: #f2f8ff;

  border-radius: 10px;

  font-size: 0.85rem;

}

.note h2 {

  margin-top: 0;

  font-size: 1rem;

}

/* ===== フッター ===== */

.site-footer {

  text-align: center;

  font-size: 0.75rem;

  padding: 8px 0 16px;

  color: #666;

}

/* ユーティリティ */

.hidden {

  display: none;

}