@charset "UTF-8";

/* ON time バナーリスト用 追加CSS */
      :root {
          --on-text-main: #333;
          --on-text-muted: #666;
          --on-border: #eaeaea;
      }

      .time-hub-container {
          max-width: 900px;
          margin: 0 auto;
      }

      .time-banner-card {
          display: block;
          text-decoration: none;
          color: var(--on-text-main);
          background-color: #fff;
          border-radius: 15px;
          overflow: hidden;
          box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
          border: 1px solid var(--on-border);
          transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
          margin-bottom: 2.5rem;
      }

      .time-banner-card:hover {
          transform: translateY(-5px);
          box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
          color: var(--on-text-main);
      }

      .time-banner-img {
          width: 100%;
          height: 240px;
          object-fit: cover;
          transition: transform 0.6s ease;
      }

      .time-banner-card:hover .time-banner-img {
          transform: scale(1.05);
      }

      .time-banner-img-wrapper {
          overflow: hidden;
          height: 100%;
      }

      .time-banner-body {
          padding: 2.5rem 2rem;
          display: flex;
          flex-direction: column;
          justify-content: center;
          height: 100%;
      }

      .time-banner-date {
          font-family: 'Quicksand', sans-serif;
          color: #999;
          font-size: 0.9rem;
          letter-spacing: 1px;
          margin-bottom: 0.5rem;
      }

      .time-banner-title {
          font-size: 1.4rem;
          font-weight: bold;
          margin-bottom: 1rem;
          line-height: 1.4;
      }

      .time-banner-text {
          color: var(--on-text-muted);
          font-size: 0.95rem;
          line-height: 1.7;
          margin-bottom: 1.5rem;
          display: -webkit-box;
          -webkit-line-clamp: 3;
          -webkit-box-orient: vertical;
          overflow: hidden;
      }

      .time-banner-btn {
          align-self: flex-start;
          font-size: 0.9rem;
          font-weight: bold;
          padding: 0.5rem 1.5rem;
          border-radius: 50px;
          border: 1px solid #333;
          transition: all 0.3s;
      }

      .time-banner-card:hover .time-banner-btn {
          background-color: #333;
          color: #fff;
      }

      @media (max-width: 767px) {
          .time-banner-img {
              height: 200px;
          }
          .time-banner-body {
              padding: 1.5rem;
          }
          .time-banner-title {
              font-size: 1.2rem;
          }
      }