@charset "utf-8";
/* ==========================================================================
   愛知淑徳大学クリニック オウンドメディア「お役立ち情報」
   一覧ページ 追加スタイル

   前提：既存 /clinic/css/style.css の直後に読み込む
        （ヘッダー・フッター・heading01・パンくずは既存CSSのまま使用）
   設計：レイアウト・フォントサイズは愛知淑徳大学のコラム一覧に準拠し、
        配色は記事詳細ページ（media-article.css）と同じトークンを使用
   ※ media-article.css と同時に読み込んでも競合しません
      （:root と .mediaWrap は同一定義）
   ========================================================================== */

:root {
  --m-key: #2f5597;        /* クリニック基調色 */
  --m-key-hover: #119bf2;  /* クリニック リンクホバー */
  --m-key-pale: #f0f6ff;   /* 淡青（面） */
  --m-key-line: #c5d9f4;   /* 薄青（罫線） */
  --m-text: #523c3c;
  --m-gray: #a39b9b;
  --m-bg: #f3f3f3;         /* 薄グレー地 */
  --m-line: #e6e6e5;       /* 罫線 */
}

/* --------------------------------------------------------------------------
   1. セクション（薄グレー地）
   -------------------------------------------------------------------------- */
.mediaWrap {
  background-color: var(--m-bg);
  padding-top: 50px;
  padding-top: clamp(30px, 1.51515vw + 20.9px, 70px);
  padding-bottom: 80px;
  padding-bottom: clamp(50px, 3vw + 30px, 100px);
}
.mediaWrap_inner {
  width: 90%;
  max-width: 1120px;
  margin: 0 auto;
}

/* 一覧ページのリード文 */
.mediaListLead {
  margin-bottom: 30px;
  color: var(--m-text);
  font-size: clamp(1.5rem, 0.02273vw + 1.36364px, 1.8rem);
  line-height: 1.9;
  text-align: center;
}
.mediaListLead + .mediaHr { margin-bottom: 30px; }

.mediaHr {
  height: 1px;
  margin: 0 0 25px;
  border: 0;
  background-color: #dcdcdc;
}

/* 件数表示 */
.mediaCount {
  margin-bottom: 20px;
  color: #676767;
  font-size: clamp(12px, 0.22727vw + 10.63636px, 15px);
  text-align: center;
}

/* --------------------------------------------------------------------------
   2. 記事カード（3列 → 2列 → 1列）
   -------------------------------------------------------------------------- */
.mediaList {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px 20px;
  width: 100%;
}
/* JSで非表示にした記事を確実に隠す（gridアイテム対策） */
.mediaList > [hidden] { display: none !important; }

.mediaListCard { display: flex; }
.mediaListCard_link {
  display: flex;
  flex-direction: column;
  width: 100%;
  background-color: #fff;
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  transition: transform .25s ease-in-out, box-shadow .25s ease-in-out;
}
.mediaListCard_imgArea {
  position: relative;
  aspect-ratio: 600 / 400;
  background-color: var(--m-key-pale);
  overflow: hidden;
}
.mediaListCard_img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* アイキャッチ左下に重ねるカテゴリラベル */
.mediaListCard_label {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
  padding: 4px 14px;
  background-color: var(--m-key);
  color: #fff;
  font-size: clamp(9px, 0.30303vw + 7.18182px, 13px);
  line-height: 1.6;
  letter-spacing: .06em;
  white-space: nowrap;
}
.mediaListCard_body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 16px 18px 18px;
}
.mediaListCard_date {
  color: var(--m-key);
  font-size: clamp(12px, 0.22727vw + 10.63636px, 15px);
  font-family: "Roboto", sans-serif;
  letter-spacing: .04em;
}
.mediaListCard_title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  margin-top: 8px;
  color: var(--m-key);
  font-weight: bold;
  font-size: clamp(14px, 0.3vw + 12.5px, 17px);
  line-height: 1.7;
  letter-spacing: .02em;
}
/* 右下の矢印（カード下端の余白をタイトル行数によらず一定にする） */
.mediaListCard_body::after {
  display: block;
  width: 8px;
  height: 8px;
  margin-top: auto;
  margin-left: auto;
  margin-top: 14px;
  border-top: 2px solid var(--m-key);
  border-right: 2px solid var(--m-key);
  transform: rotate(45deg);
  transition: transform .25s ease-in-out;
  content: "";
}
@media (min-width: 1024px) {
  .mediaListCard_link:hover,
  .mediaListCard_link:focus-visible {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(47, 85, 151, .14);
  }
  .mediaListCard_link:hover .mediaListCard_title { text-decoration: underline; }
  .mediaListCard_link:hover .mediaListCard_body::after { transform: rotate(45deg) translate(3px, -3px); }
}

/* --------------------------------------------------------------------------
   3. ページャー
   -------------------------------------------------------------------------- */
.mediaPager { margin-top: 40px; }
.mediaPager[hidden] { display: none; }
.mediaPager_lists {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.mediaPager_item {
  border: 1px solid var(--m-line);
  background-color: #fff;
  border-radius: 4px;
}
.mediaPager_link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  color: var(--m-key);
  font-size: clamp(1.4rem, 0.0758vw + 1.3px, 1.6rem);
  font-family: "Roboto", sans-serif;
  text-decoration: none;
  transition: background-color .2s, color .2s;
}
.mediaPager_item.is-current { border-color: var(--m-key); background-color: var(--m-key); }
.mediaPager_item.is-current .mediaPager_link { color: #fff; }
.mediaPager_item:not(.is-current):not(.is-dots) .mediaPager_link:hover {
  background-color: var(--m-key-pale);
}
.mediaPager_item.is-dots {
  border: 0;
  background: transparent;
}
.mediaPager_item.is-dots .mediaPager_link { color: var(--m-gray); }
/* 前へ／次へ */
.mediaPager_link-arrow { position: relative; }
.mediaPager_link-arrow::before {
  width: 8px;
  height: 8px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  content: "";
}
.mediaPager_item.is-prev .mediaPager_link-arrow::before { transform: rotate(-135deg); }
.mediaPager_item.is-disabled { opacity: .3; }
.mediaPager_item.is-disabled .mediaPager_link { pointer-events: none; cursor: default; }

/* --------------------------------------------------------------------------
   4. カテゴリ一覧
   -------------------------------------------------------------------------- */
.mediaCategory { margin-top: 60px; }
.mediaCategory_title {
  margin-bottom: 20px;
  color: var(--m-key);
  font-weight: bold;
  font-size: clamp(17.5px, 0.56818vw + 14.09091px, 25px);
  text-align: center;
}
.mediaCategory_lists {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.mediaCategory_lists > li { flex: 0 1 calc((100% - 24px) / 3); }
.mediaCategory_link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 100%;
  padding: 14px 18px;
  border: 1px solid var(--m-key);
  border-radius: 30px;
  background-color: #fff;
  color: var(--m-key);
  font-weight: bold;
  font-size: clamp(1.4rem, 0.0758vw + 1.3px, 1.6rem);
  line-height: 1.4;
  text-align: left;
  text-decoration: none;
  transition: background-color .2s, color .2s;
}
.mediaCategory_link:hover,
.mediaCategory_link:focus-visible {
  background-color: var(--m-key);
  color: #fff;
}

/* --------------------------------------------------------------------------
   5. レスポンシブ
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1023px) {
  .mediaList { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
  .mediaCategory { margin-top: 45px; }
}
@media screen and (max-width: 767px) {
  .mediaList { grid-template-columns: 1fr; gap: 20px; }
  .mediaListCard_title { -webkit-line-clamp: 4; }
  .mediaPager_link { width: 38px; height: 38px; }
  .mediaCategory_lists > li { flex-basis: calc((100% - 12px) / 2); }
  .mediaCategory_link { padding: 12px 14px; border-radius: 20px; }
}