/* --- 絵文字崩れ対策設定 --- */
.miel-emj {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif !important;
  line-height: 1 !important;
  text-indent: 0 !important;
  letter-spacing: normal !important;
}

/* --- パステルグリーン×うさぎフェイス交互ストライプ壁紙 --- */
.stage {
  position: relative;
  width: 100%;       /* 記事の横幅いっぱいに自動伸縮 */
  height: 260px; 
  margin: 10px auto; 
  display: flex;
  align-items: flex-start;
  padding-top: 20px; 
  justify-content: center; 
  background-color: #e8f5e9; /* ベースのパステルグリーン */
  border-radius: 12px;       
  box-shadow: inset 0 0 15px rgba(0,0,0,0.01), 0 4px 12px rgba(0,0,0,0.04);
  overflow: hidden;
  box-sizing: border-box;

  /* ===================================================
     ▼ 【スマホ用】横の周期を58pxに広げ、しつこさを解消
     =================================================== */
  background-image: 
    linear-gradient(90deg, #c8e6c9 2px, transparent 2px),
    radial-gradient(3.5px 8px at 26px 21.5px, #ffffff 0%, #ffffff 99%, transparent 100%),
    radial-gradient(3.5px 8px at 34px 21.5px, #ffffff 0%, #ffffff 99%, transparent 100%),
    radial-gradient(12px 9px at 30px 35px, #ffffff 0%, #ffffff 99%, transparent 100%);
  
  background-size: 58px 68px; 
  background-repeat: repeat;
  background-position: center top;
}

/* ===================================================
   ★ 【PC用設定】横幅600px以上の時はお気に入りの「88px」を維持
   =================================================== */
@media (min-width: 600px) {
  .stage {
    /* PC用にお顔の中心を「45px」に戻し、パーツをジャスト配置 */
    background-image: 
      linear-gradient(90deg, #c8e6c9 2px, transparent 2px),
      radial-gradient(3.5px 8px at 41px 21.5px, #ffffff 0%, #ffffff 99%, transparent 100%),
      radial-gradient(3.5px 8px at 49px 21.5px, #ffffff 0%, #ffffff 99%, transparent 100%),
      radial-gradient(12px 9px at 45px 35px, #ffffff 0%, #ffffff 99%, transparent 100%);

    /* 前回の返答で好評だった「88px」のゆったり周期にガチッと固定 */
    background-size: 88px 68px; 
  }
}

/* ★HTMLにある元の「壁紙タグ」を非表示にする設定 */
.wallpaper-stripe-gate {
  display: none !important;
}

/* --- パステルのアーチ窓 --- */
.mado-design {
  position: relative;
  width: 250px; 
  height: 200px; 
  z-index: 1;
  background-color: #eaddd3; 
  border-radius: 125px 125px 0px 0px; 
  padding: 12px 12px 0px 12px; 
  box-sizing: border-box;
}

/* 窓ガラス（内側の景色と文字エリア） */
.mado-glass {
  width: 100%;
  height: 100%;
  border-radius: 113px 113px 0px 0px;
  background: linear-gradient(to bottom, #1d4ed8, #1e3a8a); 
  padding: 35px 15px 15px 15px; 
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}

/* 窓の左下から斜めに顔を覗かせるバラン */
.baran-deco {
  position: absolute;
  bottom: 15px;
  left: -19px;
  width: 85px;  
  height: 55px; 
  background-color: #22c55e; /* バランの緑 */
  z-index: 1; 
  
  /* clip-pathを使い山が3つのギザギザな形に */
  clip-path: polygon(
    0% 100%, 
    0% 30%, 15% 0%, 30% 35%,   /* 1の山 */
    48% 5%, 63% 40%,          /* 2の山 */
    82% 10%, 100% 45%,        /* 3の山 */
    100% 100%
  );
  
  /* 左下から斜めに顔を覗かせるための傾き調整 */
  transform: rotate(22deg); 
  transform-origin: bottom left;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
}

/* バランの顔の傾き・配置調整 */
.baran-deco::before {
  content: "・ ・\A・"; /* 1行目に目、2行目に口 */
  position: absolute;
  top: 28px; /* バランの傾きと間隔調整に合わせて上位置を中央に調整 */
  left: 28px; /* 指定の顔の横位置 */
  font-size: 11px; 
  line-height: 9px; /* 指定の目口の縦間隔 */
  font-weight: bold;
  color: #000000; /* 黒の目口 */
  white-space: pre; 
  transform: rotate(2deg); 
  text-align: center;
}

/* ピンク星 */
.css-star {
  position: absolute;
  width: 10px; 
  height: 10px;
  background-color: #ff9ebe; 
  z-index: 2;
  clip-path: polygon(50% 0%, 65% 35%, 100% 50%, 65% 65%, 50% 100%, 35% 65%, 0% 50%, 35% 35%);
  filter: drop-shadow(0 0 3px rgba(255,158,190,0.9));
  animation: star-pika 2s ease-in-out infinite;
}

/* 星の配置 */
.star1 { top: 15px; left: 55px; animation-delay: 0s; }
.star2 { top: 25px; right: 50px; animation-delay: 0.5s; }
.star3 { top: 50px; left: 25px; animation-delay: 1.2s; }
.star4 { top: 45px; right: 30px; animation-delay: 0.7s; }
.star5 { top: 85px; left: 35px; animation-delay: 1.5s; }
.star6 { top: 90px; right: 40px; animation-delay: 0.2s; }
.star7 { top: 125px; left: 60px; animation-delay: 1.8s; }
.star8 { top: 120px; right: 55px; animation-delay: 0.9s; }

@keyframes star-pika {
  0%, 100% { opacity: 0.2; transform: scale(0.6); }
  50% { opacity: 1; transform: scale(1); }
}

/* 窓格子（縦） */
.mado-koushi-v {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 100%;
  background-color: #eaddd3; 
  z-index: 2;
  pointer-events: none;
}

/* 窓格子（横） */
.mado-koushi-h {
  position: absolute;
  top: 50%; 
  left: 12px;
  width: calc(100% - 24px);
  height: 6px;
  background-color: #eaddd3; 
  z-index: 2;
  pointer-events: none;
}

/* 窓の中の文字設定 */
.mado-text {
  margin: 0;
  position: relative;
  z-index: 3; 
  font-size: 12px; 
  line-height: 1.5;
  font-weight: 500;
  color: #f8fafc; 
  text-align: center;
  overflow-y: auto;
  height: 100%;
  padding-left: 14px; 
  padding-right: 14px; 
  box-sizing: border-box;
}

/* 手前に出っ張っている立体的な窓辺の棚（土台） */
.mado-shelf {
  position: absolute;
  bottom: -16px; 
  left: -15px;  
  width: 280px; 
  height: 18px; 
  z-index: 5; 
  background-color: #eaddd3; 
  border-radius: 4px;
  box-shadow: 
    inset 0 3px 3px rgba(255,255,255,0.6), 
    0 6px 12px rgba(120,110,100,0.25); 
}

/* キャラ配置ゾーン */
.char-zone {
  position: absolute;
  left: 52px; 
  bottom: -14px; 
  width: 160px; 
  height: 130px;
  z-index: 10; 
  pointer-events: none; 
}

/* --- くまコンテナ --- */
.bear-container {
  display: inline-block !important;
  z-index: 4;
  position: absolute !important;
  left: -8px !important; 
  bottom: 8px !important;
}

/* --- くま本体 --- */
.bear {
  font-size: 98px !important; 
  line-height: 1 !important;
  display: inline-block !important;
  filter: grayscale(100%) brightness(1.1) drop-shadow(2px 4px 6px rgba(0,0,0,0.15));
}

/* --- ひよこコンテナ --- */
.chick-container {
  display: inline-block !important; 
  z-index: 10 !important;
  position: absolute !important;
  left: 31px !important; 
  bottom: 30px !important; 
  animation: smooth-hohosuri 1.2s ease-in-out infinite;
  transform-origin:  bottom center;

  pointer-events: auto; 
}

/* --- ひよこ本体 --- */
.chick {
  font-size: 43px !important; 
  line-height: 1 !important;
  display: inline-block !important;
  position: relative;
  z-index: 15 !important;
  margin-bottom: 8px;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.15));
}

/* --- 首のリボン --- */
.bear-ribbon {
  position: absolute;
  z-index: 5; 
  display: inline-block !important;
  font-size: 38px !important; 
  top: 40px;  
  left: 38px; 
  filter: hue-rotate(120deg) saturate(70%) brightness(1.2) drop-shadow(0 2px 3px rgba(0,0,0,0.15));
}

/* --- なめらかな上向きスリスリ --- */
@keyframes smooth-hohosuri {
  0%, 100% { transform: translateX(0) rotate(30deg); }
  50% { transform: translateX(-1.5px) rotate(30deg); }
}

/* サボテン＆鉢植え */
.cactus-pot-set {
  position: absolute;
  z-index: 10; 
  right: 1px;    
  bottom: -1px;  
  width: 45px;
  height: 55px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}

/* サボテンの絵文字 */
.cactus {
  font-size: 30px !important; 
  line-height: 1 !important;
  display: inline-block !important;
  margin-bottom: -10px; 
  position: relative;
  z-index: 11; 
  filter: drop-shadow(1px 2px 2px rgba(0,0,0,0.1));
}

/* 白い植木鉢 */
.white-pot {
  width: 28px;
  height: 22px;
  background-color: #ffffff; 
  border-radius: 2px 2px 6px 6px; 
  z-index: 12;
  box-shadow: 
    inset -3px 0 4px rgba(0,0,0,0.08),  
    inset 0 3px 2px rgba(255,255,255,1), 
    0 4px 6px rgba(0,0,0,0.1);          
}

/* 目に溜まる涙（サイズ縮小＆位置調整版） */
.chick-container::after {
  content: "";
  position: absolute;
  z-index: 20 !important;
  
  /* 涙のサイズ */
  width: 3px;
  height: 3px;
  
  /* Twemojiの黒目のフチに被るよう位置を内側・下側に移動 */
  left: 18px;  
  top: 17px;  
  
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.95) 0%, rgba(165, 225, 255, 0.8) 50%, rgba(55, 175, 240, 0.5) 100%);
  box-shadow: inset -0.5px -0.5px 1px rgba(0, 0, 0, 0.1), 0 0 2px rgba(142, 215, 255, 0.6);
  animation: namida-tamarika 2.5s ease-in-out infinite;
  pointer-events: none;
}

/* 涙のアニメーション */
@keyframes namida-tamarika {
  0%, 100% {
    transform: scale(1) rotate(0deg);
    border-radius: 50% 45% 52% 48% / 50% 48% 52% 50%;
    opacity: 0.85;
  }
  30% {
    transform: scale(1.1, 0.9) translate(0.1px, 0.1px);
    border-radius: 48% 52% 45% 55% / 48% 55% 45% 52%;
    opacity: 1;
  }
  70% {
    transform: scale(0.9, 1.1) translate(-0.1px, -0.1px);
    border-radius: 52% 48% 55% 45% / 52% 45% 55% 48%;
    opacity: 0.95;
  }
}