/* ===== ページ全体 ===== */
body {
  background-image: url('/images/IMG_5815.jpeg');
  background-repeat: repeat;       /* 繰り返し */
  background-size: 60％;           /* 元サイズで繰り返す */
  background-position: top left;   /* 左上から表示 */
  font-family: 'Comic Sans MS', 'Hiragino Maru Gothic', 'Rounded Mplus 1c', sans-serif;
  color: #333;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}


/* ===== ヘッダー ===== */
header {
  padding: 20px 0;
  text-align: center;
}
.logo-wrap svg { width: 60px; height: 60px; vertical-align: middle; }
.brand { margin-top: 10px; }
.brand svg text { dominant-baseline: middle; alignment-baseline: middle; }
.tagline { font-size: 1em; color: #b33955; margin-top: 5px; }
.date-stamp { margin-top: 8px; font-size: 0.9em; color: #555; }

/* ===== ナビゲーション ===== */
.nav-list {
  display: flex;
  justify-content: center;
  gap: 12px;
  padding: 10px 0;
  list-style: none;
  margin: 0;
}
.nav-list li a {
  text-decoration: none;
  color: #b33955;
  background-color: #FFE4E1;
  padding: 8px 14px;
  border-radius: 20px;
  font-weight: bold;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.nav-list li a:hover {
  transform: scale(1.05);
  box-shadow: 0 5px 12px rgba(0,0,0,0.2);
}
.nav-list li a[aria-current="page"] {
  background-color: #FFD1DC;
  color: #fff;
}

/* ===== ブレイキングニュース ===== */
.ticker {
  background-color: #FFF0F5;
  border-radius: 20px;
  margin: 15px 0;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.ticker-head {
  background-color: #FFB6C1;
  color: #fff;
  font-weight: bold;
  padding: 10px 12px;
  font-size: 0.95em;
  border-radius: 20px 20px 0 0;
}
.ticker-body {
  padding: 10px 12px;
  font-size: 0.95em;
  white-space: nowrap;
  overflow: hidden;
}
.ticker-body .scroll {
  display: inline-block; 
  animation: ticker-scroll 20s linear infinite;
}
@keyframes ticker-scroll {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

/* ===== カード ===== */
.card {
  background-color: #FFFACD;
  border-radius: 25px;
  padding: 25px;
  margin: 20px 0;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  transition: transform 0.2s, box-shadow 0.2s;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 22px rgba(0,0,0,0.15);
}
.head .eyebrow { font-size: 0.9em; color: #b33955; margin-bottom: 5px; }
.head h1, .head h2, .head h3 { margin: 0.2em 0; color: #b33955; }
.sub { font-size: 0.85em; color: #555; }

.list { padding-left: 1.4em; }
.list li { margin: 0.6em 0; }

.list li strong {
  display: inline-block;   /* 行の高さを確保 */
  line-height: 1.6;        /* 行間を広げる */
  margin: 2px 0;           /* 上下の余白 */
}



/* ===== 天気 ===== */
.wx-ico svg { width: 64px; height: 64px; border-radius: 50%; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
.wx-kv { display: flex; gap: 8px; font-weight: bold; }
.tmax { color: #ff6961; }
.tmin { color: #779ECB; }
.advisory { font-size: 0.85em; margin-top: 5px; }

/* ===== フッター ===== */
footer { text-align: center; font-size: 0.8em; color: #555; margin: 20px 0; }
.content strong { background-color: #FFB6C1; color: #fff; padding: 3px 8px; border-radius: 10px; }

/* ===== うさぎマスコット ===== */
.bunny-deco {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 80px;
  height: 80px;
  z-index: 1000;
}
.bunny-deco::before, /* 左耳 */
.bunny-deco::after {  /* 右耳 */
  content: '';
  position: absolute;
  width: 20px;
  height: 50px;
  background: #FFD1DC;
  border-radius: 50px 50px 0 0;
  top: -20px;
}

.bunny-deco::before { 
  left: 10px; 
  transform: rotate(-15deg); 
  animation: ear-wiggle 1.5s infinite ease-in-out; 
  z-index: 0; /* 左耳は顔より後ろ */
}
.bunny-deco::after { 
  right: 10px; 
  transform: rotate(15deg); 
  animation: ear-wiggle-right 1.5s infinite ease-in-out; 
  z-index: 1; /* 右耳は左耳より後ろに */
}

.bunny-deco-face {
  width: 80px;
  height: 80px;
  background: #FFF8DC;
  border-radius: 50%;
  position: relative;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  animation: bounce 2s infinite ease-in-out;
  z-index: 2; /* 顔が耳の前に来る */

}
.bunny-eye { width: 10px; height: 10px; background: #000; border-radius: 50%; position: absolute; top: 30px; transform-origin: center center; animation: blink 4s infinite; }
.bunny-eye.left { left: 20px; }
.bunny-eye.right { right: 20px; }
.bunny-cheek { width: 12px; height: 6px; background: #FFB6C1; border-radius: 50%; position: absolute; top: 50px; }
.bunny-cheek.left { left: 12px; }
.bunny-cheek.right { right: 12px; }
.bunny-cheek::after { content: ''; position: absolute; width: 6px; height: 3px; background: rgba(255,255,255,0.6); border-radius: 50%; top: 1px; left: 1px; animation: blink 4s infinite; }
.bunny-nose { width: 8px; height: 6px; background: #FF69B4; border-radius: 50%; position: absolute; top: 40px; left: 50%; transform: translateX(-50%); }

@keyframes ear-wiggle { 0%,100%{transform:rotate(-15deg);}50%{transform:rotate(-5deg);} }
@keyframes ear-wiggle-right { 0%,100%{transform:rotate(15deg);}50%{transform:rotate(5deg);} }
@keyframes blink { 0%,90%,100%{transform:scaleY(1);}95%{transform:scaleY(0.1);} }
@keyframes bounce { 0%,100%{transform:translateY(0);}50%{transform:translateY(-5px);} }

/* 背景デコ（ハート＆星＆雲） */
.bg-deco { position: fixed; top:0; left:0; width:100%; height:100%; pointer-events:none; overflow:hidden; z-index:0; }
.bg-deco .heart, .bg-deco .star, .bg-deco .cloud {
  position: absolute;
  opacity: 0.85;
  animation: float 10s linear infinite;
}

/* ハート */
.bg-deco .heart { background:#FFB6C1; border-radius: 50%; }
.bg-deco .heart:nth-child(1){ left:5%; top:70%; width:20px; height:20px; animation-duration:12s; }
.bg-deco .heart:nth-child(2){ left:20%; top:60%; width:24px; height:24px; animation-duration:14s; }
.bg-deco .heart:nth-child(5){ left:50%; top:65%; width:22px; height:22px; animation-duration:16s; }

/* 星 */
.bg-deco .star {
  background:#FFFACD;
  clip-path: polygon(
    50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%,
    21% 91%, 32% 57%, 2% 35%, 39% 35%
  );
}
.bg-deco .star:nth-child(3){ left:30%; top:75%; width:18px; height:18px; animation-duration:18s; }
.bg-deco .star:nth-child(4){ left:70%; top:68%; width:22px; height:22px; animation-duration:14s; }
.bg-deco .star:nth-child(6){ left:80%; top:65%; width:20px; height:20px; animation-duration:10s; }

/* 雲 */
.bg-deco .cloud {
  width: 60px; height: 30px;
  background: #F0F8FF;
  border-radius: 50%;
  opacity: 0.6;
}
.bg-deco .cloud:nth-child(7){ left:15%; top:30%; animation-duration:30s; }
.bg-deco .cloud:nth-child(8){ left:55%; top:20%; animation-duration:35s; }
.bg-deco .cloud:nth-child(9){ left:75%; top:25%; animation-duration:32s; }

@keyframes float {
  0%{transform:translateY(0) scale(1); opacity:0.7;}
  50%{opacity:0.9; transform:translateY(-35vh) scale(1.2);}
  100%{transform:translateY(-70vh) scale(1); opacity:0;}
}

/* ===== レスポンシブ対応 ===== */
@media (max-width: 768px) {
  .brand svg { width: 300px; }
  .nav-list { flex-wrap: wrap; gap: 6px; }
  .card { padding: 15px; margin: 12px 0; }
  .wx-kv { flex-direction: column; gap: 4px; }
  .wx-ico svg { width: 48px; height: 48px; }
}
@media (max-width: 480px) {
  .date-stamp { font-size: 0.8em; }
  .brand svg { width: 240px; }
  .nav-list li a { font-size: 0.85em; padding: 6px 10px; }
  .card h1, .card h2 { font-size: 1.2em; }
  .list li { font-size: 0.9em; }
  .links-section .link-desc { font-size: 0.7em; }
}

/* ===== リンクまとめ ===== */
.links-section {
  background: #fff0f5;
  border-radius: 20px;
  padding: 15px;
  margin: 20px 0;
  text-align: center;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
.links-section a {
  display: block;
  font-weight: bold;
  color: #b33955;
  margin: 10px 0 2px;
  text-decoration: none;
}
.links-section a:hover { text-decoration: underline; }
.links-section .link-desc {
  font-size: 0.8em;
  color: #555;
  margin-bottom: 8px;
}


/* =====追加分 ==== */
@media (max-width: 480px) {
  .nav-list {
    flex-wrap: wrap;        
    justify-content: center;
    gap: 8px 12px;          
  }
  .nav-list li {
    flex: 1 1 45%;          
    margin-bottom: 8px;     
    text-align: center;
  }
  .nav-list li a {
    display: block;         
    padding: 10px 0;        
    font-size: 0.9em;       
  }
}