@charset "UTF-8";
/* ==========================================================================
   おすすめ特集（共通パーツ） /_osusume/
   すべて .tbx-osusume から指定。どの特集ページに置いても同じ見た目になるようにしている
   ========================================================================== */
.tbx-osusume { background: #F4F7FB; border-bottom: 0; padding: 56px 0 64px; font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; color: #1F2A37; line-height: 1.7; }
.tbx-osusume *, .tbx-osusume *::before, .tbx-osusume *::after { box-sizing: border-box; }
.tbx-osusume span[aria-hidden="true"] { position: static; }
.tbx-osusume__inner { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
.tbx-osusume__title { font-size: clamp(20px, 3vw, 26px); font-weight: 900; color: #0A2540; text-align: center; margin: 0 0 24px; line-height: 1.4; }
.tbx-osusume__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: 1fr; }
.tbx-osusume__item { margin: 0; }
.tbx-osusume__card { display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid #DCE3EC; border-radius: 12px; overflow: hidden; text-decoration: none; color: inherit; transition: transform .2s, box-shadow .2s; }
.tbx-osusume__card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(10, 37, 64, .1); color: inherit; text-decoration: none; }
.tbx-osusume__img { display: block; aspect-ratio: 680 / 420; background: #DDE6F0; overflow: hidden; }
.tbx-osusume__img img { display: block; width: 100%; height: 100%; object-fit: cover; max-width: none; }
.tbx-osusume__body { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 16px; }
.tbx-osusume__cat { align-self: flex-start; font-size: 11px; font-weight: 700; color: #0066CC; background: #EEF6FD; border-radius: 4px; padding: 1px 8px; }
.tbx-osusume__name { font-size: 15px; font-weight: 900; color: #0A2540; line-height: 1.5; }
.tbx-osusume__desc { font-size: 13px; color: #5B6B7C; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tbx-osusume__more { text-align: center; margin: 24px 0 0; }
.tbx-osusume__more a { display: inline-block; border: 2px solid #0A2540; color: #0A2540; font-weight: 700; text-decoration: none; border-radius: 999px; padding: 10px 28px; font-size: 14px; }
.tbx-osusume__more a:hover { background: #0A2540; color: #fff; }
@media (min-width: 600px) {
  .tbx-osusume__list { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .tbx-osusume__list--3 { grid-template-columns: repeat(3, 1fr); }
  .tbx-osusume__list--4 { grid-template-columns: repeat(4, 1fr); }
}