@charset "UTF-8";

body {
  margin: 0;
  min-height: 100vh;
  background: linear-gradient(135deg, #ffffff, #b7d7ff);
  font-family: "Monomaniac One", "Permanent Marker", "Kaisei Opti", sans-serif;
  color: #9d91ad;
}

.weatherApp {
  width: min(100%, 760px);
  margin: 0 auto;
  padding: 40px 24px;
}

/* 背景フレーム */
.weatherFrame {
  width: 100%;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  border: 6px solid #b9adc8;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  z-index: 0;
  display: grid;
  place-items: center;
  margin-bottom: 24px;
}

/* お天気アイコン (太陽・月・雲) */
.weatherIcon {
  width: 360px;
  height: 360px;
  object-fit: contain;
  position: absolute;
  z-index: 10;
}

/* エフェクト（雨・雪・霧） */
#effect {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  pointer-events: none;
}

/* 雷のフラッシュエフェクト */
#lightningFlash {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

/* 星共通設定 */
#layerStarsBack,
#layerStarsFront {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* 奥の星 */
#layerStarsBack {
  z-index: 1;
}

/* 手前の星 */
#layerStarsFront {
  z-index: 2;
}

.title {
  text-align: center;
  font-size: 32px;
  margin: 0 0 16px;
  color: #b9adc8;
}

.searchArea {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.searchArea input {
  flex: 1;
  padding: 12px;
  background: #fff;
  border: 2px solid #b7d7ff;
  border-radius: 999px;
  font-size: 16px;
}

.searchArea button {
  padding: 12px 18px;
  border: none;
  border-radius: 999px;
  background: #4b7ecf;
  color: #fff;
  font-weight: bold;
  cursor: pointer;
}

.searchArea button:hover {
  opacity: 0.85;
}

.catWeatherArea {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}

/* 猫ラッパー */
.catWrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 黒猫：待機アニメ */
.catImage {
  width: 240px;
  height: auto;
  object-fit: contain;
  cursor: pointer;
  animation: catIdle 3s ease-in-out infinite;
}

@keyframes catIdle {

  0%,
  100% {
    transform: translateY(0) rotate(-1deg);
  }

  50% {
    transform: translateY(-6px) rotate(1deg);
  }
}

/* ピョコ！ジャンプアニメ */
.catImage.jump {
  animation: catJump 0.45s ease-out forwards;
}

@keyframes catJump {
  0% {
    transform: translateY(0) scale(1);
  }

  35% {
    transform: translateY(-28px) scale(1.08);
  }

  65% {
    transform: translateY(-10px) scale(1.02);
  }

  100% {
    transform: translateY(0) scale(1);
  }
}

/* 猫の吹き出し */
.catBubble {
  position: absolute;
  bottom: 50%;
  /* 猫の左側に出す */
  right: calc(100% + -20px);
  transform: translateY(50%);
  width: 180px;
  padding: 40px 20px;
  background: rgba(255, 255, 255, 0.92);
  border: 3px solid #d7d0df;
  border-radius: 40px;
  font-size: 16px;
  color: #9d91ad;
  white-space: normal;
  word-break: break-all;
  line-height: 1.7;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 100;
}

/* しっぽ（右向き三角） */
.catBubble::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
  border: 10px solid transparent;
  border-left-color: #d7d0df;
}

/* 吹き出し内側のしっぽ（白） */
.catBubble::before {
  content: '';
  position: absolute;
  top: 50%;
  left: calc(100% - 3px);
  transform: translateY(-50%);
  border: 9px solid transparent;
  border-left-color: rgba(255, 255, 255, 0.92);
  z-index: 1;
}

/* 非表示 */
.catBubble.hidden {
  display: none;
}

/* 地域 */
.areaName {
  font-size: 28px;
  margin: 0 0 8px;
}

/* 気温 */
.temp {
  font-size: 38px;
  margin: 8px 0;
}

/* クレジット */
.credit {
  text-align: center;
  margin-top: 12px;
  font-size: 14px;
  color: #b9adc8;
}

.credit a {
  color: #4b7ecf;
  text-decoration: none;
}

/* TOPへ戻るボタン */
.pawTopBtn {
  position: fixed;
  right: max(16px, calc(50% - 380px + 16px));
  bottom: 24px;

  width: 72px;
  height: 72px;

  z-index: 100;
  transition: 0.3s;
}

.pawTopBtn img {
  width: 100%;
  animation: pawFloat 2.5s ease-in-out infinite;
}

.pawTopBtn:hover {
  transform: scale(1.08);
}

@keyframes pawFloat {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-6px);
  }
}

.pawSpeech {
  position: fixed;
  right: max(92px, calc(50% - 380px + 92px));
  bottom: 36px;
  background: rgba(255, 255, 255, 0.95);
  border: 3px solid #d7d0df;
  border-radius: 16px;
  padding: 14px 20px;
  font-size: 1rem;
  font-weight: bold;
  color: #9d91ad;
  white-space: nowrap;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(6px);

  opacity: 0;
  transform: translateX(8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}

/* しっぽ（右向き・肉球側） */
.pawSpeech::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
  border: 10px solid transparent;
  border-left-color: #d7d0df;
}

.pawSpeech::before {
  content: '';
  position: absolute;
  top: 50%;
  left: calc(100% - 3px);
  transform: translateY(-50%);
  border: 9px solid transparent;
  border-left-color: rgba(255, 255, 255, 0.95);
  z-index: 1;
}

.pawSpeech.show {
  opacity: 1;
  transform: translateX(0);
}

/* ローディング表示 */
.loading {
  position: fixed;
  inset: 0;
  background: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  overflow: hidden;
}

.loadingCenter {
  position: relative;
  width: 300px;
  height: 120px;
  margin: 0 auto;
}

#loadingPaw,
#loadingText {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  transition: opacity 0.4s ease;
}

#loadingPaw {
  width: 70px;
  left: 0;
}

#loadingText {
  font-family: "Monomaniac One", "Kaisei Opti", sans-serif;
  width: 100%;
  text-align: center;
  font-size: 24px;
}

.hidden {
  opacity: 0;
}

/* 歩きアニメーション */
@keyframes step {
  0% {
    opacity: 0;
    transform: translateY(-10px) scale(0.8);
  }

  50% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  100% {
    opacity: 0;
    transform: translateY(2px) scale(0.95);
  }
}

.loading.hide {
  opacity: 0;
  transition: opacity 0.8s ease;
  pointer-events: none;
}

@keyframes bounceStep {
  0% {
    transform: translateY(var(--y)) scale(1) rotate(var(--r));
  }

  40% {
    transform: translateY(calc(var(--y) - 6px)) scale(1.1) rotate(var(--r));
  }

  100% {
    transform: translateY(var(--y)) scale(1) rotate(var(--r));
  }
}

/* 足跡フェード */
@keyframes fadeOut {
  to {
    opacity: 0;
    transform: scale(0.8);
  }
}

/* ローディング消える演出 */
.loading.hide {
  opacity: 0;
  transition: opacity 0.8s ease;
  pointer-events: none;
}

/* コピーライトエリア */
.copyright {
  text-align: center;
  margin-bottom: 12px;
}

.copyrightLine {
  width: 40px;
  height: 1px;
  background: #9d91ad;
  margin: 0 auto 12px;
}

.copyright p {
  font-size: 12px;
  letter-spacing: 0.15em;
  color: #9d91ad;
  margin: 0;
}

/* ドロワーメニュー */
.noScroll {
  overflow: hidden;
}

.pawBtn {
  position: fixed;
  left: max(16px, calc(50% - 380px + 16px));
  bottom: 24px;
  width: 60px;
  height: 60px;
  z-index: 1100;
  border: none;
  background: transparent;
  cursor: pointer;
}

.pawBtn img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0.7;
  display: block;
}

/* 閉じるボタン */
.closeBtn {
  position: absolute;
  top: 12px;
  left: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 36px;
  line-height: 1;
  cursor: pointer;
  z-index: 10;
}

.drawerNav {
  height: 100%;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  list-style: none;
  gap: 34px;
}

.drawerNavItem {
  width: 260px;
  padding: 0;
  margin: 0;
}

.drawerNavItem a {
  display: grid;
  grid-template-columns: 48px 1fr;
  align-items: center;
  column-gap: 16px;
  width: 100%;
  color: #fff;
  text-decoration: none;
}

.drawerNavText {
  font-size: 36px;
  line-height: 1;
  display: block;
}

.pawIcon {
  width: 36px;
  height: 36px;
  object-fit: contain;
  opacity: 0.75;
  display: block;
  justify-self: center;
  transform: translateY(5px);
}

.drawer {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 360px;
  height: 100%;
  background: linear-gradient(135deg, #C493C3, #B44C97, #915da3);
  transform: translateX(-100%);
  transition: transform .4s cubic-bezier(0.77, 0, 0.18, 1);
  z-index: 1800;
}

.drawer.active {
  transform: translateX(0);
}

.overLay {
  display: none;
  position: fixed;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
  width: 100%;
  margin: 0 auto;
  pointer-events: none;
  transition: opacity .3s;
  z-index: 1700;
}

.overLay.active {
  display: block;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.drawer ul li a:hover .pawBtn {
  opacity: 1;
}

/* 太陽：くるくる (01d)*/
.weatherIcon.sun {
  filter: drop-shadow(0 0 40px rgba(255, 220, 120, 0.6));
  animation: sunSpin 8s linear infinite,
    sunGlow 3s ease-in-out infinite;
}

@keyframes sunSpin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes sunGlow {

  0%,
  100% {
    filter: drop-shadow(0 0 40px rgba(255, 220, 80, 0.7)) drop-shadow(0 0 80px rgba(255, 180, 40, 0.4)) drop-shadow(0 0 120px rgba(255, 140, 20, 0.2));
    transform: scale(1);
  }

  50% {
    filter: drop-shadow(0 0 60px rgba(255, 220, 80, 1.0)) drop-shadow(0 0 120px rgba(255, 180, 40, 0.7)) drop-shadow(0 0 180px rgba(255, 140, 20, 0.4));
    transform: scale(1.06);
  }
}

/* 月：ふわふわ (01n) */
.weatherIcon.moon {
  filter: drop-shadow(0 0 20px rgba(255, 255, 200, 0.4));
  animation: moonFloat 5s ease-in-out infinite,
    fluffy 3s ease-in-out infinite;
}

@keyframes moonFloat {

  0%,
  100% {
    transform: translateY(0, 0);
  }

  25% {
    transform: translateY(-4px, -8px);
  }

  50% {
    transform: translateY(0, -12px);
  }

  75% {
    transform: translateY(4px, -8px);
  }
}

@keyframes fluffy {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}

/* 星：キラキラ (01n/02n/03n/04n/13n/50n) */
.star {
  position: absolute;
  background: white;
  border-radius: 50%;
  opacity: 0;
  animation: starTwinkle var(--dur, 3s) ease-in-out infinite;
  animation-delay: var(--del, 0s);
}

@keyframes starTwinkle {

  0%,
  100% {
    opacity: 0.1;
    transform: scale(0.8);
  }

  50% {
    opacity: 0.9;
    transform: scale(1.2);
  }
}

/* 薄い雲 (02d/02n/) */
.weatherIcon.lightCloud {
  animation: cloudFloat 12s ease-in-out infinite;
}

@keyframes cloudFloat {

  0%,
  100% {
    transform: translateY(-10px) translateX(0);
  }

  25% {
    transform: translateY(-14px) translateX(8px);
  }

  50% {
    transform: translateY(-18px) translateX(0);
  }

  75% {
    transform: translateY(-14px) translateX(-8px);
  }
}

/* 厚い雲 (03d/03n/04d/04n/50d/50n) */
.weatherIcon.cloud,
.weatherIcon.rainLight,
.weatherIcon.snow {
  animation: cloudDrift 16s ease-in-out infinite;
}

@keyframes cloudDrift {

  0%,
  100% {
    margin-left: -10px;
  }

  50% {
    margin-left: 10px;
  }
}

/* 雲：強雨と雷雨 (10d/10n/11d/11n) */
.weatherIcon.rainHeavy,
.weatherIcon.thunder {
  animation: cloudRumble 2s ease-in-out infinite;
}

@keyframes cloudRumble {

  0%,
  100% {
    margin-left: -4px;
  }

  50% {
    margin-left: 4px;
  }
}

/* 雨：雨粒が落ちる (09d/09n) */
.raindrop {
  position: absolute;
  width: 1.5px;
  border-radius: 2px;
  background: linear-gradient(180deg, transparent, rgba(180, 220, 255, 0.7));
  animation: rainFall linear infinite;
  top: -60px;
}

@keyframes rainFall {
  to {
    transform: translateY(110vh) translateX(-20px);
    opacity: 0.2;
  }
}

/* 大雨：雨粒が落ちる (10d/10n/11d/11n) */
.raindrop.heavy {
  width: 2px;
  background: linear-gradient(180deg, transparent, rgba(180, 220, 255, 0.85));
}

/* 雷のフラッシュエフェクト (11d/11n) */
#lightningFlash {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  animation: flash 4s infinite;
}

@keyframes flash {

  0%,
  92%,
  100% {
    opacity: 0;
  }

  94% {
    opacity: 0.8;
  }

  96% {
    opacity: 0.15;
  }
}

/* 雪：雪が降る (13d/13n) */
.snowFlake {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.5);
  animation: snowFall linear infinite;
  top: -20px;
}

@keyframes snowFall {
  0% {
    transform: translateY(0) translateX(0) rotate(0deg);
    opacity: 0.8;
  }

  25% {
    transform: translateY(25vh) translateX(12px);
  }

  50% {
    transform: translateY(50vh) translateX(-8px);
  }

  75% {
    transform: translateY(75vh) translateX(10px);
  }

  100% {
    transform: translateY(110vh) translateX(0) rotate(360deg);
    opacity: 0;
  }
}

/* 霧 (50d/50n) */
#effect .mist {
  position: absolute;
  left: -20%;
  width: 140px;
  border-radius: 999px;

  background: rgba(255, 255, 255, 0.16);
  filter: blur(10px);

  pointer-events: none;
  animation: mistMove ease-in-out infinite;
}

@keyframes mistMove {
  0% {
    transform: translateX(-6%);
  }

  50% {
    transform: translateX(6%);
  }

  100% {
    transform: translateX(-6%);
  }
}






@media screen and (max-width: 768px) {

  /* 全体 */
  .weatherApp {
    width: 100%;
    padding: 56px 16px 32px;
    box-sizing: border-box;
  }

  /* 天気表示フレーム */
  .weatherFrame {
    border-width: 4px;
    border-radius: 12px;
    margin-bottom: 20px;
  }

  .weatherIcon {
    width: 200px;
    height: 200px;
  }

  /* タイトル */
  .title {
    font-size: 28px;
    margin-bottom: 14px;
  }

  /* 検索エリア */
  .searchArea {
    display: flex;
    flex-direction: row;
    gap: 8px;
  }

  .searchArea input {
    flex: 3;
    min-width: 0;
    box-sizing: border-box;
  }

  .searchArea button {
    flex: 1;
    min-width: 72px;
    box-sizing: border-box;
    padding: 0 10px;

    display: flex;
    align-items: center;
    justify-content: center;

    line-height: 1;
  }

  /* 猫＋天気情報エリア */
  .catWeatherArea {
    flex-direction: column;
    gap: 12px;
    margin-top: 24px;
  }

  .catImage {
    width: 170px;
  }

  /* 猫の吹き出し：SPでは猫の上に出す */
  .catBubble {
    bottom: calc(100% - 20px);
    right: auto;
    left: 50%;
    transform: translateX(-50%);
    width: 190px;
    padding: 18px 16px;
    font-size: 14px;
    text-align: center;
    line-height: 1.6;
    border-radius: 28px;
  }

  /* 吹き出しのしっぽを下向きにする */
  .catBubble::after {
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 10px solid transparent;
    border-top-color: #d7d0df;
  }

  .catBubble::before {
    top: calc(100% - 3px);
    left: 50%;
    transform: translateX(-50%);
    border: 9px solid transparent;
    border-top-color: rgba(255, 255, 255, 0.92);
  }

  /* 天気情報の文字 */
  .speechBubble {
    width: 100%;
    text-align: center;
  }

  .areaName {
    font-size: 24px;
  }

  .temp {
    font-size: 32px;
  }

  /* クレジット */
  .credit {
    font-size: 12px;
    margin-top: 20px;
  }

  /* TOPへ戻る肉球 */
  .pawTopBtn {
    right: 16px;
    bottom: 16px;
    width: 58px;
    height: 58px;
  }

  .pawSpeech {
    right: 82px;
    bottom: 26px;
    padding: 10px 14px;
    font-size: 0.85rem;
  }

  /* ドロワー肉球ボタン */
  .pawBtn {
    left: 12px;
    bottom: 16px;
    width: 58px;
    height: 58px;
  }

  /* ドロワー */
  .drawer {
    width: 80%;
    max-width: 320px;
  }

  .drawerNav {
    gap: 30px;
  }

  .drawerNavItem {
    width: 220px;
  }

  .drawerNavItem a {
    grid-template-columns: 40px 1fr;
    column-gap: 12px;
  }

  .drawerNavText {
    font-size: 30px;
  }

  .pawIcon {
    width: 32px;
    height: 32px;
  }

  /* SPでもタップ時に色変更 */
  .drawerNavItem a:active .drawerNavText,
  .drawerNavItem a:focus .drawerNavText {
    color: #B44C97;
  }

  /* コピーライト */
  .copyright {
    margin-bottom: 88px;
  }
}