@charset "UTF-8";
/* ==========================================================================
   column.css  ―  コラム一覧ページ用の追加スタイル
   ・main.css のユーティリティ（grid-layout / aspect-ratio-16-9 / bg-c-light* /
     pager__* など）を前提とした差分のみを定義しています
   ・ブレイクポイントは main.css と同じ  md:990px / sm:600px
   ========================================================================== */

/* --------------------------------------------------------------------------
   記事一覧
   -------------------------------------------------------------------------- */
.column-list {
  width: 100%;
}

/* JSで非表示にした記事（hidden属性）を確実に隠す
   ※ grid アイテムは display 指定が効いてしまうため !important で上書き */
.column-list .js-column-item[hidden] {
  display: none !important;
}

/* 件数表示 */
.column-count {
  color: #4e4e4e;
}

/* --------------------------------------------------------------------------
   記事カード
   -------------------------------------------------------------------------- */
.column-card {
  display: flex;
  flex-direction: column;
}

.column-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
}

@media (min-width: 990px) {
  .column-card__link {
    transition: transform 0.25s ease-in-out, opacity 0.25s ease-in-out;
  }
  .column-card__link:hover {
    transform: translateY(-4px);
    opacity: 0.85;
  }
  .column-card__link:hover .column-card__title {
    text-decoration: underline;
  }
}

/* アイキャッチ枠
   ・画像が未登録／読み込み失敗でも無地のブロックとして成立するよう背景色を敷く
   ・比率は16:9固定（推奨サイズ 1200×675px） */
.column-card__thumb {
  background: #d6e2f2;
}

.column-card__thumb > img {
  display: block;
}

/* アイキャッチ上に重ねるカテゴリラベル
   （位置は /welcome/interview/ のラベルと同じ。色はキーカラーの青で統一）
   左右パディングはタイトルと同じ値にし、ラベル文字とタイトルの左端を揃える */
.column-card__label {
  position: absolute;
  bottom: -1em;
  left: 0;
  z-index: 1;
  padding: 0.35em clamp(16px, 1.4vw, 24px);
  color: #fff;
  line-height: 1.4;
  white-space: nowrap;
}

/* タイトル領域
   ・上余白：カテゴリラベルが画像下に 1em ぶん重なるため、その分＋余白を確保する
   ・左右：ラベルの左右パディング（1.5em）と視覚的に揃う値に設定
   ・下余白：矢印までの間隔を margin-top:auto で伸ばし、カード下端の余白を一定に保つ */
.column-card__body {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 0.6vw, 12px);
  padding:
    clamp(26px, 2.2vw, 34px)
    clamp(16px, 1.4vw, 24px)
    clamp(18px, 1.4vw, 24px);
}

/* タイトル：行間を広めにとり、3行で切り揃える */
.column-card__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  font-size: clamp(14px, 0.3vw + 12.5px, 17px);
  line-height: 1.7;
  letter-spacing: 0.02em;
}

/* 下端の矢印（装飾）。不要な場合はこのブロックを削除してください */
.column-card__body::after {
  content: "";
  align-self: flex-end;
  margin-top: auto;
  width: 0.5em;
  height: 0.5em;
  border-top: 2px solid #004098;
  border-right: 2px solid #004098;
  transform: rotate(45deg);
}

@media (min-width: 990px) {
  .column-card__body::after {
    transition: transform 0.25s ease-in-out;
  }
  .column-card__link:hover .column-card__body::after {
    transform: rotate(45deg) translate(2px, -2px);
  }
}

@media (max-width: 600px) {
  .column-card__title {
    -webkit-line-clamp: 4;
  }
}

/* --------------------------------------------------------------------------
   ページャー（main.css の .pager__* を拡張）
   -------------------------------------------------------------------------- */
.column-pager {
  margin: clamp(20px, 1.5vw, 30px) auto 0;
  width: 100%;
}

.column-pager .pager__lists {
  flex-wrap: wrap;
  gap: 0.75rem;
  font-size: clamp(1.4rem, 0.0758vw + 1.3px, 1.6rem);
}

.column-pager .pager__list {
  border: 1px solid #e6e6e5;
  background: #fff;
}

.column-pager .pager__list.is-current {
  border: 1px solid #004098;
  background: #004098;
}

.column-pager .pager__list.is-current .pager__num {
  color: #fff;
}

/* 「…」は枠なしで表示 */
.column-pager .pager__list.pager__dots {
  border: none;
  background: transparent;
}

/* 前へ／次へ */
.column-pager__arrow .pager__cursor {
  width: 1em;
  height: 1em;
}

.column-pager__arrow.is-prev .pager__cursor {
  transform: rotate(180deg);
}

.column-pager__arrow.is-disabled {
  opacity: 0.25;
  cursor: default;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   カテゴリ一覧
   -------------------------------------------------------------------------- */
.column-category__lists {
  width: 100%;
}

@media (max-width: 600px) {
  /* SPでも2列。1列にしたい場合はこのブロックを削除 */
  .column-category__lists.grid-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* 見出し（h2は記事タイトル専用にしているため p タグで組んでいます） */
.column-category__heading {
  margin-bottom: 0.5em;
}

/* カテゴリボタン。中身はカテゴリ名のみ（記事件数は表示しない） */
.column-category__link {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  line-height: 1.4;
  text-align: center;
}

.column-category__name {
  min-width: 0;
}

/* --------------------------------------------------------------------------
   汎用
   -------------------------------------------------------------------------- */
.column-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}