/* =========================
右側固定サイドボタン - cta_up と cta_down
========================= */

/* サイドボタン共通設定 */
#cta_up,
#cta_down {
  position: fixed !important;
  right: 0 !important; /* 画面端に固定 */
  z-index: 1000 !important;
  list-style: none !important;
}

/* 上側ボタン（cta_up）の位置 */
#cta_up {
  top: 45% !important;
  transform: translateY(-50%) !important;
}

/* 下側ボタン（cta_down）の位置 */
#cta_down {
  top: 55% !important;
  transform: translateY(-50%) !important;
}

/* ボタン内のリンクスタイル */
#cta_up a,
#cta_down a {
  display: block !important;
  writing-mode: vertical-rl !important; /* 縦書き */
  padding: 20px 15px 20px 25px !important; /* 左側のパディングを大きく、右側は少なく */
  color: white !important;
  font-size: 14px !important;
  font-weight: bold !important;
  border-radius: 25px 0 0 25px !important; /* 左側だけ角丸 */
  box-shadow: -3px 3px 10px rgba(0,0,0,0.2) !important; /* 左側に影 */
  min-height: 120px !important;
  width: 60px !important; /* 固定幅でしっかりと顔出し */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
  font-family: "Noto Sans JP", sans-serif !important;
}

/* 上側ボタン（資料請求）のスタイル */
#cta_up a {
  background: linear-gradient(135deg, #4285f4, #1976d2) !important; /* 青のグラデーション */
}

#cta_up a:hover {
  background: linear-gradient(135deg, #3367d6, #1565c0) !important; /* ホバー時のグラデーション */
  transform: translateX(-5px) !important; /* ホバー時に少し左に移動 */
}

/* 下側ボタン（お問い合わせ）のスタイル */
#cta_down a {
  background: linear-gradient(135deg, #ff9800, #f57c00) !important; /* オレンジのグラデーション */
}

#cta_down a:hover {
  background: linear-gradient(135deg, #ff6f00, #e65100) !important; /* より濃いオレンジに変化 */
  /* transform: translateX(-5px) !important; この行を削除して移動アニメーション無効 */
}

/* アイコンを追加する場合のスタイル */
#cta_up a::before,
#cta_down a::before {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  margin-bottom: 8px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* 資料請求用ダウンロードアイコン */
#cta_up a::before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="white" viewBox="0 0 24 24"><path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/></svg>') !important;
}

/* お問い合わせ用メールアイコン */
#cta_down a::before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="white" viewBox="0 0 24 24"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg>') !important;
}

/* ウィジェット内のテキストスタイル */
#cta_up .widget,
#cta_down .widget {
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
}

#cta_up .widget_text,
#cta_down .widget_text {
  margin: 0 !important;
  padding: 0 !important;
}

#cta_up .textwidget,
#cta_down .textwidget {
  margin: 0 !important;
  padding: 0 !important;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  #cta_up,
  #cta_down {
    display: none !important; /* モバイルでは非表示 */
  }
}

/* タブレットサイズでの調整 */
@media (max-width: 1024px) {
  #cta_up a,
  #cta_down a {
    width: 50px !important;
    min-height: 100px !important;
    font-size: 12px !important;
    padding: 15px 12px 15px 20px !important;
  }
  
  #cta_up a::before,
  #cta_down a::before {
    width: 16px !important;
    height: 16px !important;
    margin-bottom: 6px !important;
  }
}

/* 高解像度画面での調整 */
@media (min-width: 1400px) {
  #cta_up a,
  #cta_down a {
    width: 70px !important;
    min-height: 140px !important;
    font-size: 15px !important;
    padding: 25px 18px 25px 30px !important;
  }
}