@charset "UTF-8";

/* =====================================================================
   ポピンズ professional リニューアル
   お知らせ一覧（部品）
   ---------------------------------------------------------------------
   ショートコード [professional_news]（renewal/news.php）が吐く
   <ul class="rnw-news__list"> の見た目。
   renewal/news.php が「本文にショートコードがあるページ」に読み込ませる。

   Figma
     PC 489:47163「List」/ 489:47164「Item」
     SP 363:24319「List」/ 363:24320「Item」

   ■ 位置づけ
     セクション枠・見出し・「お知らせの一覧を見る」ボタンはページ側が持つ。
     ここが受け持つのはリストと記事1件ぶんだけ。
     クラスは部品なので `rnw-news__` 接頭辞（ページ専用の rnw-global- ではない）。

   ■ 旧CSSとの関係（旧 /professional/css/*.css は編集禁止）
     下層ページでは旧 contents.css / common.css が読み込まれたままになっている。
     打ち消しが必要なのは次の2つで、いずれもここで明示指定している。
       ・common.css 192行 `p { line-height: 2.0 }`  → .rnw-news__title で指定
       ・common.css 202行 `img { max-width:100%; vertical-align:middle }`
                                                   → .rnw-news__thumb img で指定
     リンク色は a に inherit を当てず、要素ごとに指定している
     （旧CSSの `a { color }` に負けないよう、クラス側で色を持たせる）。

   ■ PC / SP
     分岐は common.css・front.css と同じ 767/768。
     PCはサムネ143×100・日付16px・タイトル20px、SPはサムネ100×70・
     日付12px・タイトル14px。日付の色もPCは common/accent/red、
     SPは pro/main とデザインが分かれているため、それぞれに従っている。
   ===================================================================== */

.rnw-news__list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0 0 8px;              /* Figma 489:47163 の下パディング */
  list-style: none;
}

/* 記事間の罫線（Figma 489:47164 stroke #E2E2E2）。
   Figmaは1件ごとに上下1pxだが、隣り合うと2本重なるので
   下線＋先頭だけ上線にしている（front.css のお知らせと同じ）。 */
.rnw-news__item {
  margin: 0;
  border-bottom: 1px solid #E2E2E2;
}

.rnw-news__item:first-child {
  border-top: 1px solid #E2E2E2;
}

.rnw-news__link {
  display: block;
  padding: 16px 15px;            /* Figma 489:47165 */
  color: inherit;
  text-decoration: none;
}

.rnw-news__figure {
  display: flex;
  align-items: flex-start;
  margin: 0;
}

/* サムネイル枠（Figma SP 363:24324 は 100×70、右余白8）。
   画像は object-fit:cover で枠に合わせる。
   代替画像（PostType::noImage）が入る場合も同じ扱いになる。 */
.rnw-news__thumb {
  display: block;
  flex: 0 0 100px;
  width: 100px;
  height: 70px;
  margin-right: 8px;
  overflow: hidden;
}

.rnw-news__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;               /* 旧 common.css の img 指定の打ち消し */
  object-fit: cover;
  vertical-align: top;
}

.rnw-news__body {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 4px;                      /* Figma 363:24326 */
  min-width: 0;
}

.rnw-news__meta {
  display: flex;
  align-items: center;
  gap: 8px;                      /* Figma 363:24327 */
}

/* SPの日付は pro/main（Figma 363:24328）。PCは common/accent/red に変わる。 */
.rnw-news__date {
  color: var(--rnw-main);
  font-family: var(--rnw-font-jp);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 1.2px;
  white-space: nowrap;
}

/* カテゴリタグ（Figma 363:24329）。白地＋pro/main の細枠。 */
.rnw-news__tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 4px 8px;
  border: 0.745px solid var(--rnw-main);
  border-radius: 8px;
  background-color: var(--rnw-white);
  color: var(--rnw-main);
  font-family: var(--rnw-font-jp);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 1.2px;
  white-space: nowrap;
}

/* Figmaは3行で「….」と省略される長さ（幅205px / 14px / 行間1.8）。
   実際の文字数は記事によって変わるので行数で切っている。 */
.rnw-news__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  margin: 0;
  color: var(--rnw-text);
  font-family: var(--rnw-font-jp);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.8;              /* 旧 common.css の p{line-height:2.0} の打ち消し */
  letter-spacing: 0.168px;
}

/* PDFのファイルサイズ（PostType::fileSize が <span class="size"> で吐く） */
.rnw-news__title .size {
  margin-left: 4px;
  font-weight: 400;
}

.rnw-news__empty {
  margin: 0;
  padding: 16px 0;
  color: var(--rnw-text);
  font-family: var(--rnw-font-jp);
  font-size: 14px;
  line-height: 1.8;
}


/* =====================================================================
   PC（Figma 489:47164）
   ---------------------------------------------------------------------
   サムネ143×100（右余白11）、日付16px・common/accent/red、
   タイトル20px。1行に収まるので行数の制限は2行に緩める。
   ===================================================================== */

@media only screen and (min-width: 768px) {

  .rnw-news__figure { align-items: center; }

  .rnw-news__thumb {
    flex: 0 0 143px;
    width: 143px;
    height: 100px;
    margin-right: 11px;
  }

  .rnw-news__date {
    color: #912344;                /* common/accent/red */
    font-size: 16px;
  }

  .rnw-news__tag {
    padding: 8px 16px;
    font-size: 14px;
  }

  .rnw-news__title {
    -webkit-line-clamp: 2;
    font-size: 20px;
    letter-spacing: 1.2px;
  }

}