@charset "UTF-8";
/* TOP「ニュース・ブログ」欄のピックアップ（inc/top-pickup.php）。ピックアップがあるときだけ読み込む */

/* ピックアップがあるときは欄の横幅を広げる（従来 1118px） */
.news .container:has(.news__box--pickup) {
  width: 1280px;
}

/*
 * 2カラム: 左にピックアップ、右にニュース。
 * .news__main を display:contents にして、ニュース一覧と VIEW MORE を直接グリッドに並べる。
 * これで左のカード2枚の上端・下端が、ニュース一覧の上下の罫線とそろう。
 */
.news__box--pickup {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    "pickup list"
    ".      nav";
  column-gap: 56px;
}

.news__main {
  display: contents;
}

.news__pickup {
  grid-area: pickup;
  display: flex;
}

.news__box--pickup .news__list {
  grid-area: list;
  width: 100%;
}

/* VIEW MORE はニュース一覧の右下に置く（従来は欄の右下に絶対配置） */
.news__box--pickup .news__nav {
  grid-area: nav;
  position: static;
  display: flex;
  justify-content: flex-end;
  margin-top: 30px;
}

.news__pickupList {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

/* カードの見た目は技術コラム一覧（.column__item）に合わせる。高さは一覧に合わせて伸縮 */
.news__pickupItem {
  flex: 1;
  min-height: 120px;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
  transition: box-shadow .3s ease;
}

.news__pickupItem:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, .14);
}

.news__pickupItem > article,
.news__pickupLink {
  height: 100%;
}

.news__pickupLink {
  display: flex;
}

.news__pickupImg {
  position: relative;
  flex-shrink: 0;
  width: 40%;
  overflow: hidden;
}

.news__pickupImg > img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s ease;
}

.news__pickupLink:hover .news__pickupImg > img {
  transform: scale(1.05);
}

/* 画像のない記事はロゴを小さく出す */
.news__pickupImg--noimage {
  background: #f5f5f5;
}

.news__pickupImg--noimage > img {
  top: 50%;
  left: 50%;
  width: 70%;
  height: auto;
  object-fit: contain;
  transform: translate(-50%, -50%);
}

.news__pickupLink:hover .news__pickupImg--noimage > img {
  transform: translate(-50%, -50%);
}

.news__pickupBadge {
  position: absolute;
  top: 0;
  left: 0;
  padding: 3px 10px;
  background: linear-gradient(90deg, #0070d0, #00a0d8);
  font-family: Oswald, "Noto Sans JP", sans-serif;
  font-size: 12px;
  letter-spacing: .1em;
  line-height: 1.5;
  color: #fff;
}

.news__pickupBody {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  min-width: 0;
  padding: 16px 24px;
}

.news__pickupMeta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin-bottom: 10px;
  font-family: Oswald, "Noto Sans JP", sans-serif;
  font-size: 13px;
  color: #666;
}

.news__pickupType {
  padding: 1px 10px;
  border: 1px solid #0070d0;
  border-radius: 3px;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 12px;
  color: #0070d0;
}

.news__pickupTitle {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .04em;
  color: #141414;
  transition: color .3s ease;
}

.news__pickupLink:hover .news__pickupTitle {
  color: #0070d0;
}

/* 1件だけのときはカードが一覧の高さまで伸びるため、画像を広く・文字を大きくする */
.news__pickupList--single .news__pickupImg {
  width: 48%;
}

.news__pickupList--single .news__pickupBody {
  padding: 24px 32px;
}

.news__pickupList--single .news__pickupTitle {
  -webkit-line-clamp: 4;
  font-size: 19px;
}

/* タブレット: 列の間と文字を少し詰める */
@media screen and (max-width: 980px) {
  .news__box--pickup {
    column-gap: 32px;
  }

  .news__pickupBody {
    padding: 12px 16px;
  }

  .news__pickupTitle {
    font-size: 14px;
  }

  .news__pickupList--single .news__pickupBody {
    padding: 16px 20px;
  }

  .news__pickupList--single .news__pickupTitle {
    font-size: 16px;
  }
}

/* スマホ: ピックアップ → ニュースの順に縦積み */
@media screen and (max-width: 680px), screen and (max-width: 737px) and (orientation: landscape) {
  .news__box--pickup {
    display: block;
  }

  .news__pickupItem {
    min-height: 100px;
  }

  .news__pickupBody {
    padding: 10px 12px;
  }

  .news__pickupMeta {
    margin-bottom: 6px;
  }

  .news__pickupTitle {
    -webkit-line-clamp: 3;
    font-size: 14px;
  }

  .news__pickupList--single .news__pickupImg {
    width: 40%;
  }

  .news__pickupList--single .news__pickupBody {
    padding: 12px 14px;
  }

  .news__pickupList--single .news__pickupTitle {
    -webkit-line-clamp: 3;
    font-size: 15px;
  }

  .news__box--pickup .news__list {
    margin-top: 40px;
  }

  /* 従来のスマホ表示と同じく左寄せ */
  .news__box--pickup .news__nav {
    justify-content: flex-start;
  }
}