/* ==========================================================
   _common.css
   全ページ共通のカスタムCSS（各HTML内にあった<style>を集約）
   ========================================================== */

/* ページ読み込み時の時間差フェードイン */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.animate-fade-in {
  opacity: 0;
  animation: fadeInUp 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
.delay-1 { animation-delay: 0.2s; }
.delay-2 { animation-delay: 0.4s; }
.delay-3 { animation-delay: 0.6s; }

/* ナビゲーションのホバー線 */
.nav-link {
  position: relative;
}
.nav-link::after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: -4px;
  left: 0;
  background-color: #fcc801;
  transform-origin: bottom right;
  transition: transform 0.3s ease-out;
}
.nav-link:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

/* ボタン波動（電話・LINE） */
@keyframes pulsePink {
  0% { box-shadow: 0 0 0 0 rgba(228, 0, 127, 0.8); }
  70% { box-shadow: 0 0 0 15px rgba(228, 0, 127, 0); }
  100% { box-shadow: 0 0 0 0 rgba(228, 0, 127, 0); }
}
.animate-pulse-pink {
  animation: pulsePink 2s infinite;
}
@keyframes pulseGreen {
  0% { box-shadow: 0 0 0 0 rgba(6, 199, 85, 0.8); }
  70% { box-shadow: 0 0 0 15px rgba(6, 199, 85, 0); }
  100% { box-shadow: 0 0 0 0 rgba(6, 199, 85, 0); }
}
.animate-pulse-green {
  animation: pulseGreen 2s infinite;
  animation-delay: 0.5s;
}

/* price ページ：距離帯タブ切り替え（CSSのみで軽量動作、他ページには影響なし） */
.tab-content { display: none; }
#tab1:checked ~ .tab-contents #content1,
#tab2:checked ~ .tab-contents #content2,
#tab3:checked ~ .tab-contents #content3,
#tab4:checked ~ .tab-contents #content4 { display: block; }

#tab1:checked ~ .tabs #label1,
#tab2:checked ~ .tabs #label2,
#tab3:checked ~ .tabs #label3,
#tab4:checked ~ .tabs #label4 {
  background-color: #093d69;
  color: #fcc801;
  border-color: #fcc801;
}