/* 
 * 診療時間表のレスポンシブ対応修正用CSS
 * モバイル表示時も横スクロールできるように修正
 */

@media (max-width: 768px) {
  /* コンテナの余白調整 */
  .hours-card {
    padding: 25px 15px;
  }
  
  /* テーブルの横スクロール設定 */
  .hours-table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    white-space: nowrap;
    margin-bottom: 15px;
  }
  
  /* スクロールヒントを表示 */
  .hours-table-container::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 5px;
    width: 8px;
    height: 8px;
    border-right: 2px solid rgba(22, 40, 78, 0.3);
    border-bottom: 2px solid rgba(22, 40, 78, 0.3);
    transform: rotate(-45deg) translateY(-50%);
    animation: scroll-hint 1.5s infinite;
    opacity: 0.7;
  }
  
  @keyframes scroll-hint {
    0% {
      right: 15px;
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
    100% {
      right: 5px;
      opacity: 0;
    }
  }
  
  /* テーブルの最小幅設定 */
  .hours-table {
    width: 100%;
    min-width: 600px;
    margin-bottom: 0;
  }
  
  /* 左側の列を固定 */
  .hours-table th:first-child,
  .hours-table td:first-child {
    position: sticky;
    left: 0;
    background-color: white;
    z-index: 1;
  }
  
  /* ボタン配置の調整 */
  .hours-buttons {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  
  .hours-buttons .btn {
    width: 100%;
    max-width: 250px;
  }
}