/* 基本的なコンテナのスタイル（必要に応じて） */
.cuckoo-clock-container {
  position: relative; /* 必要に応じて */
  width: fit-content; /* コンテンツに合わせて幅を調整 */
  height: fit-content; /* コンテンツに合わせて高さを調整 */
  display: flex;
  flex-direction: column;
  align-items: center; /* 中央揃え */
  z-index: 100; /* 他の要素より前面に表示する場合 */
}

/* 個別の位置指定のスタイル */
.cuckoo-clock-position-center {
  position: fixed;
  top: 5cm; /* 上から5センチ */
  left: 50%;
  transform: translateX(-50%);
}

.cuckoo-clock-position-right {
  position: fixed;
  top: 5cm; /* 上から5センチ */
  right: 20px; /* 右端から少し離す */
}

.cuckoo-clock-position-left {
  position: fixed;
  top: 5cm; /* 上から5センチ */
  left: 20px; /* 左端から少し離す */
}

.cuckoo-clock-position-bottom-right {
  position: fixed;
  bottom: 20px; /* 下端から少し離す */
  right: 20px; /* 右端から少し離す */
}

.cuckoo-clock-position-bottom-left {
  position: fixed;
  bottom: 20px; /* 下端から少し離す */
  left: 20px; /* 左端から少し離す */
}

/* 鳩時計の枠 */
#wrapper {
  position: relative;
  width: 5cm;
  height: 7.5cm;
  background: #8e4e20;
  border: 5px solid #5D3A0D;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center; /* 内部要素を中央揃え */
  padding: 10px;
}

/* 鳩時計の本体（丸い部分） */
#clock {
  position: relative;
  width: 60px;
  height: 110px;
  background: #8B4513;
  border-radius: 50%;
  text-align: center;
  padding-top: 15px;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
  border: 3px solid #5D3A0D;
}

/* 鳩の窓 */
#door {
  width: 70px;
  height: 80px;
  background: #654321;
  position: absolute;
  left: -5px;
  top: 30px;
  border-radius: 10px;
  transform-origin: left center;
  transition: transform 1.5s ease-in-out;
  box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.6);
}

/* 鳩 */
#bird {
  position: absolute;
  left: 15px;
  top: 10px;
  font-size: 90px;
  display: none;
}

/* デジタル時計 */
#analog-clock {
  margin-top: 25px; /* 鳩の窓との距離を25ミリに設定 */
  font-size: 20px;
  font-weight: bold;
  color: white;
  background: #5D3A0D;
  padding: 5px;
  border-radius: 5px;
  width: 100%; /* 親要素に合わせて幅を調整 */
  text-align: center; /* テキストを中央揃え */
}

/* アナログ時計 */
#real-clock {
  position: absolute;
  top: -120px; /* 鳩時計の上に配置。サイズやバランスに応じて調整 */
  width: 130px;
  height: 130px;
  background: #fdfcfb;
  border-radius: 50%;
  border: 4px solid black;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
}

.num {
  position: absolute;
  font-size: 14px;
  font-weight: bold;
}
.num-12 { top: 5px; left: 50%; transform: translateX(-50%); }
.num-6 { bottom: 5px; left: 50%; transform: translateX(-50%); }
.num-3 { right: 5px; top: 50%; transform: translateY(-50%); }
.num-9 { left: 5px; top: 50%; transform: translateY(-50%); }

.hour-hand, .minute-hand, .second-hand {
  position: absolute;
  width: 2px;
  background: black;
  transform-origin: bottom;
}

.hour-hand {
  height: 35px;
  top: 30px;
}

.minute-hand {
  height: 45px;
  top: 20px;
}

.second-hand {
  height: 55px;
  top: 10px;
  background: red;
}