@charset "utf-8";
/* ------------------------------------------------------------------
   corporatezine（媒体横断集約ページ）専用スタイル
   ※ビューのみの仮実装。BZ 本体の main-biz.css を前提に差分だけ定義する。
   ------------------------------------------------------------------ */

/* ---------- ヘッダー ---------- */

/* .l-header_logo は width:12rem/14rem 固定なので、ロゴ画像の縦横比に任せるため打ち消す */
.l-header_logo.-cpz {
  flex: 0 0 auto;
  width: auto;
}

/* ロゴ画像（/assets/images/common/cpz-logo.svg）は未納品。
   納品後に高さだけここで調整すればよい */
.p-cpz_logo img {
  display: block;
  width: auto;
  height: 2.4rem;
}

@media (min-width: 769px) {
  .p-cpz_logo img {
    height: 3.2rem;
  }
}

.p-cpz_medianav {
  display: flex;
  align-items: center;
  margin-left: auto;
}

.p-cpz_medianav_list {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.p-cpz_medianav_listitem {
  display: flex;
  align-items: center;
}

.p-cpz_medianav_link {
  display: block;
  opacity: 0.85;
  transition: opacity 0.15s;
}

.p-cpz_medianav_link:hover,
.p-cpz_medianav_link:focus-visible {
  opacity: 1;
}

.p-cpz_medianav_link img {
  display: block;
  width: auto;
  height: 1.6rem;
}

/* HRzine のロゴは viewBox の下側に余白があり、他2つより沈んで見えるため上げる。
   transform なのでレイアウトには影響しない。 */
.p-cpz_medianav_listitem.-hz img {
  transform: translateY(-0.3rem);
}

@media (min-width: 769px) {
  .p-cpz_medianav_list {
    gap: 2rem;
  }
  .p-cpz_medianav_link img {
    height: 2rem;
  }
}

/* SP では媒体ロゴ3つ＋テキストロゴが溢れるので縮める
   ※仮ページのための応急処置。ロゴ画像が確定したら組み直す */
@media (max-width: 480px) {
  .p-cpz_logo img {
    height: 2rem;
  }
  .p-cpz_medianav_list {
    gap: 0.6rem;
  }
  .p-cpz_medianav_link img {
    height: 1.2rem;
  }
}

/* ---------- セクション見出しの英語タイトル ---------- */

/* .c-primarysection_header は display:flex; align-items:center なので
   h2 の兄弟として置けば横並びになる */
.p-cpz_section_en {
  margin-left: 1.2rem;
  color: #a3a3a3;
  font-size: 1.2rem;
  font-weight: normal;
  letter-spacing: 0.08em;
  line-height: 1.4;
  white-space: nowrap;
}

@media (min-width: 769px) {
  .p-cpz_section_en {
    margin-left: 1.6rem;
    font-size: 1.3rem;
  }
}

@media (max-width: 480px) {
  .p-cpz_section_en {
    margin-left: 0.8rem;
    font-size: 1rem;
  }
}

/* ---------- ①最新トピックス：2×2 のカード ---------- */

.p-cpz_topics_list {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
  gap: 3rem 2.4rem;
}

.p-cpz_topics_listitem {
  width: 100%;
}

@media (min-width: 769px) {
  .p-cpz_topics_listitem {
    width: calc((100% - 2.4rem) / 2);
  }
}

.p-cpz_card {
  height: 100%;
  overflow: hidden;   /* ヘッダーのベタ塗りを角丸に沿わせる */
  border: 1px solid #e5e5e5;
  border-radius: 0.6rem;
  background-color: #fff;
  /* ヘッダーを外枠にピッタリ付けるため、余白はカードではなく body 側に持たせる */
}

/* カード内のリンクは既定のリンク色(#456499)ではなく本文色にする
   （本体の .c-headlineindex_item a などと同じ扱い） */
.p-cpz_card a {
  color: inherit;
}

.p-cpz_card_header {
  padding: 1.1rem 1.8rem;
  background-color: #555;   /* 既定色。テーマ修飾クラスで上書きする */
}

.p-cpz_card_heading {
  color: #fff;
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 1.4;
}

/* カードのテーマカラー（ヘッダーのベタ塗り） */
.p-cpz_card.-finance  .p-cpz_card_header { background-color: #15736E; }  /* 財務・会計／経理：青緑 */
.p-cpz_card.-hr       .p-cpz_card_header { background-color: #B84A26; }  /* 人事・総務：赤（オレンジ寄り） */
.p-cpz_card.-planning .p-cpz_card_header { background-color: #59509E; }  /* 経営企画：紫（紺寄り） */
.p-cpz_card.-legal    .p-cpz_card_header { background-color: #84405C; }  /* 法務：赤紫（サツマイモ） */

.p-cpz_card_body {
  padding: 1.6rem 1.8rem 1.8rem;
}

.p-cpz_card_list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.p-cpz_card_listitem + .p-cpz_card_listitem {
  margin-top: 1.2rem;
  padding-top: 1.2rem;
  border-top: 1px dotted #d9d9d9;
}

/* 1本目：サムネイル＋タイトル */
.p-cpz_card_lead {
  display: flex;
  gap: 1.2rem;
  align-items: flex-start;
}

.p-cpz_card_lead_img {
  flex: 0 0 12rem;
  width: 12rem;
}

.p-cpz_card_lead_img img {
  display: block;
  width: 100%;
  height: auto;
}

/* サムネイルの hover 拡大。効果・タイミングは本体の
   .c-headlineindex_item_img（③最新記事で使っているもの）に合わせる。
   マウス操作前提なので PC 幅のみ。 */
@media (min-width: 769px) {
  .p-cpz_card_lead_img {
    overflow: hidden;
  }
  .p-cpz_card_lead_img img {
    transform: scale(1);
    transition: transform 0.3s;
  }
  .p-cpz_card_lead:hover .p-cpz_card_lead_img img {
    transform: scale(1.06);
  }
}

@media (prefers-reduced-motion: reduce) {
  .p-cpz_card_lead_img img {
    transition: none;
  }
}

.p-cpz_card_lead_content {
  flex: 1 1 auto;
  min-width: 0;
}

.p-cpz_card_heading_link {
  display: block;
  font-size: 1.4rem;
  font-weight: bold;
  line-height: 1.55;
}

.p-cpz_card_heading_link:hover {
  color: #FB8D00;
}

/* 2,3本目：タイトルのみ */
.p-cpz_card_link {
  display: block;
  font-size: 1.3rem;
  font-weight: bold;
  line-height: 1.6;
}

.p-cpz_card_link:hover {
  color: #FB8D00;
}

/* 媒体バッジ（②ニュースでのみ使用） */
.p-cpz_badge {
  display: inline-block;
  padding: 0.1em 0.6em;
  border-radius: 2px;
  color: #fff;
  font-size: 1rem;
  font-weight: bold;
  line-height: 1.6;
  white-space: nowrap;
  /* .c-linklist_item のハンギングインデント (text-indent: -1.4rem) が
     inline-block の中身に継承されて先頭が欠けるため打ち消す */
  text-indent: 0;
}

/* 修飾クラスは cross_media_article.media の値。色は各媒体のブランドカラー。
   BZ: main-biz.css / HZ: main-hrzine.css / EZ: 財務会計Online ロゴのアクセント色 */
.p-cpz_badge.-bz { background-color: #FB8D00; }
.p-cpz_badge.-hz { background-color: #E45E32; }
.p-cpz_badge.-ez { background-color: #1C96D5; }

/* ---------- ③最新記事：本体トップと同じ c-headlineindex ---------- */
/* タグは本体と同じ .c-articleindex_item_tags / .c-taglist / .c-tag をそのまま使うため
   追加の指定は不要 */

/* サムネイルの縦横比は媒体ごとにまちまちで、SP では枠幅 9rem に対して
   縦長の画像だけが大きく伸びてしまう（HZ で発生）。枠を 4:3 に固定して切り抜く。
   PC 幅は枠が 15rem あり本体と同じ見え方なので触らない。 */
@media (max-width: 768.98px) {
  .c-headlineindex_item_img {
    flex: 0 0 9rem;
    max-width: 9rem;
  }
  .c-headlineindex_item_img img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
  }
}

/* ---------- 右カラム：バナー縦並び ---------- */

.p-cpz_bannercolumn_list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.p-cpz_bannercolumn_listitem {
  width: 100%;
  max-width: 30rem;
}

.p-cpz_bannercolumn_link {
  display: block;
}

.p-cpz_bannercolumn_link img {
  display: block;
  width: 100%;
  height: auto;
}