/*カードグリッドに変換するため、一旦
      !importantを適切に使い、既存の古いスタイルを上書きします */
table, 
tbody, 
tr, 
td {
    display: block !important;
    border: none !important;
    width: 100% !important;

    /*border-box: paddingとborderを、要素のwidthとheightに含む*/
    box-sizing: border-box !important;
}

/* テーブルの見出し（thead）はカード型には不要なので完全に消す */
thead {
    display: none !important;
}

/* 親要素（tbody）をグリッドレイアウトに変更 */
tbody {
    display: grid !important; /*カード状にするために指定、親要素、小要素の指定は(grid-template-columns)　*/
    /* 画面幅に合わせて自動でカードを並べる（レスポンシブ） */
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important; /*小要素の幅 小要素は既に用意しているものとする frでいい感じに均等になる*/
    /* grid-template-rows: 20px; itemの高さ tr height: autoで調整*/
    gap: 20px !important; /*小要素の幅同士の隙間の幅*/
    padding: 20px !important;
}

/* 【カードデザイン】各行(tr (table row))を1枚のカードにする */
tr {
    background: #ffffff !important;
    border-radius: 18px !important; /* ヘッダーのボタンと同じ丸み */
    padding: 24px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03) !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    position: relative !important;
    border: 1px solid #f0f0f0 !important;
    /* バグ防止：高さが潰れないように設定 */
    height: auto !important;
    min-height: 150px !important;
}

/* 4. ホバー：ヘッダーのボタンと同じ浮遊感とピンクの影 カーソル当てた時に動きを出す*/
tr:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 15px 30px rgba(219, 17, 108, 0.12) !important;
    border-color: rgba(219, 17, 108, 0.2) !important;
}

/* タイトルホバーで色が変わる演出 */
tr:hover td:nth-child(2) a {
    color: #ff1a8c !important;
    text-decoration: underline; /* 同時に下線を出す */
}

/* CakePHP等の自動生成タグによる無駄な余白を消す */
.table-responsive {
    overflow: visible !important;
}