@charset "UTF-8";
/* =========================================================
   マリーンズ-チェコ ベースボールブリッジプログラム
   リニューアル追加スタイル（new-style.css）
   ※ lotte/styles/styles.css の後に読み込み、差分を上書きする
   ※ レスポンシブのブレークポイントは旧コンテンツ（lotte styles）を踏襲：
      SP = @media print, screen and (max-width: 767px)
========================================================= */

@media print, screen and (max-width: 767px) {
  .p-lotteSection__title--sp-marB40 {
    margin-bottom: 40px;
  }
}

/* ---------------------------------------------------------
   ファーストビュー（FV / キービジュアル）
   Figma node-id: 8006:3675
   ※ 旧 .p-lotteMv（sticky動画＋パララックス）を廃し、全幅1枚画像に刷新
   ※ JS不使用・パララックス無し。PC/SPで画像を出し分け（picture）
--------------------------------------------------------- */
.p-lotte-fv {
  width: 100%;
}

.p-lotte-fv__img {
  display: block;
  width: 100%;
  height: auto;
  /* PC：fv-bg_pc.jpg（2880×1360＝1440×680の@2x） */
  aspect-ratio: 1440 / 680;
  object-fit: cover;
}

/* SP：縦長のSP用キービジュアルに差し替え（fv-bg_sp.jpg 750×569） */
@media print, screen and (max-width: 767px) {
  .p-lotte-fv {
    padding-top: 95px;
  }

  .p-lotte-fv__img {
    aspect-ratio: 750 / 569;
  }
}

/* ---------------------------------------------------------
   FV直下の黒ラベル（プログラム名＋キャッチコピー）
   Figma node-id: 8006:3742
   ※ FVの直下に flush で配置。JS不使用。キャッチSVGはPC/SP出し分け
--------------------------------------------------------- */
.p-lotte-fvLabel {
  background-color: #000;
  /* 上下40px。左右はSP等の見切れ防止に最小余白を確保 */
  padding: 40px 30px;
}

.p-lotte-fvLabel__inner {
  max-width: 1200px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

/* 日本語リード（16px / line-height 22px 相当 / 白 / 中央） */
.p-lotte-fvLabel__lead {
  font-size: 1rem; /* 16px */
  line-height: 1.375; /* 22 / 16 */
  text-align: center;
  color: #fff;
}

/* 筆記体キャッチ（PC：fv-catch_pc.svg 952×46） */
.p-lotte-fvLabel__catch {
  display: block;
  width: 952px;
  max-width: 100%;
  height: auto;
}

/* SP：改行版（fv-catch_sp.svg 315×121）に差し替え */
@media print, screen and (max-width: 767px) {
  .p-lotte-fvLabel__catch {
    width: 315px;
  }
}

/* ---------------------------------------------------------
   メッセージ（リード文）セクション
   Figma node-id: 8006:3614
--------------------------------------------------------- */
.p-lotteSection--message {
  /* 背景は全幅。Figma注記「下に線入れる」→下端に区切り線 */
  background-color: #f2f2f2;
  border-bottom: 1px solid #475c85;
  padding-top: 100px;
  padding-bottom: 100px;
  color: #475c85;
  text-align: center;
}

@media print, screen and (max-width: 767px) {
  .p-lotteSection--message {
    padding-top: 60px;
    padding-bottom: 60px;
  }
}

.p-lotteMessage__title {
  font-size: 2rem; /* 32px */
  line-height: 1.28125; /* 41 / 32 */
}

@media print, screen and (max-width: 767px) {
  .p-lotteMessage__title {
    font-size: 1.5rem; /* 24px */
    line-height: 1.6666666667;
  }
}

.p-lotteMessage__text {
  font-size: 1rem; /* 16px */
  line-height: 2.5; /* 40 / 16 */
  margin-top: 40px;
}

/* 段落間（Figmaの空行1行分≒40px相当） */
.p-lotteMessage__text p + p {
  margin-top: 2em;
}

@media print, screen and (max-width: 767px) {
  .p-lotteMessage__text {
    line-height: 2;
    margin-top: 28px;
  }
}

/* ---------------------------------------------------------
   取り組み（Our Contents）セクション
   Figma node-id: 8001:785 / 8045:870（カードグリッド）
   ※ カルーセル → カードグリッド（PC3列×4行=12枚）へ刷新
   ※ タイトル行アイコンの種別は modifier で切替：
      .p-lotteCard--movie ＝ 動画モーダル（再生アイコン＋サムネ再生ボタン）
      .p-lotteCard--external ＝ 外部リンク（別窓アイコン）
      .p-lotteCard--pdf ＝ PDF（PDFアイコン）
   ※ 日付右のカテゴリタグは別系統の modifier（色のみ切替）：
      .p-lotteCard__tag--movie ＝ スペシャルムービー（赤 #b43539）
      .p-lotteCard__tag--topics ＝ トピックス（青 #475c85）
      .p-lotteCard__tag--paper ＝ マリーンズタブロイド紙（黄 #DDA61A）
      .p-lotteCard__tag--press ＝ プレスリリース（緑 #40997e）
   ※ NEWバッジ（.p-lotteCard__badge）は最新カードのサムネ左上に表示
   ※ 「詳細なし」カード（トピックス／プレスリリース系）は __desc ブロックごと省略
--------------------------------------------------------- */

/* コンテンツ幅を 1200px に拡張（基底 .p-lotteSection の 976px を上書き） */
.p-lotteSection--ourContents {
  padding-left: calc((100% - 1200px) / 2);
  padding-right: calc((100% - 1200px) / 2);
}

@media print, screen and (max-width: 1080px) {
  .p-lotteSection--ourContents {
    padding-left: 30px;
    padding-right: 30px;
  }
}

/* カードグリッド：PC 3列 / Tab 2列 / SP 1列 */
.p-lotteCards {
  list-style: none;
  margin-left: 0;
  display: grid;
  /* minmax(0, 1fr)：説明文(nowrap)の最小幅でトラックが膨らむのを防ぐ */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 60px;
  row-gap: 40px;
}

/* タブレット：2列（既存 lotte styles の 1080px 区切りに合わせる） */
@media print, screen and (max-width: 1080px) {
  .p-lotteCards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px;
  }
}

/* SP：1列 */
@media print, screen and (max-width: 767px) {
  .p-lotteCards {
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
  }
}

/* カード（縦積みも flex ではなく grid で構成） */
.p-lotteCard {
  display: grid;
  grid-template-columns: minmax(
    0,
    1fr
  ); /* カード内も子要素が膨らまないよう0基準に */
  align-content: start;
  min-width: 0;
}

/* カードのリンク範囲：サムネ＋日付＋見出し（__head）まで。__desc は対象外 */
.p-lotteCard__link {
  display: block;
  color: inherit;
  text-decoration: none;
}

/* サムネイル */
.p-lotteCard__thumb {
  position: relative;
  display: block;
  aspect-ratio: 360 / 240;
  overflow: hidden;
  filter: opacity(1);
  transition: filter 0.3s;
}

/* ホバー時：リンク全体のホバーでサムネを減光 */
.p-lotteCard__link:hover .p-lotteCard__thumb {
  filter: opacity(.7);
}

.p-lotteCard__link:hover .p-lotteCard__title {
  text-decoration: underline;
}

@media print, screen and (max-width: 767px) {
  .p-lotteCard__thumb {
    aspect-ratio: auto;
  }
}

.p-lotteCard__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 動画：サムネ中央の再生ボタン（--movie のみ markup に配置） */
.p-lotteCard__play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 64px;
  height: 64px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.5);
  transition: background-color 0.3s;
}

.p-lotteCard__link:hover .p-lotteCard__play {
  background-color: rgba(0, 0, 0, 0.7);
}

.p-lotteCard__play::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent #fff;
}

/* NEWバッジ（--new で表示。今回は未使用） */
.p-lotteCard__badge {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 73px;
  height: 32px;
  padding: 0 8px;
  background-color: #b43539;
  color: #fff;
  font-size: 1rem;
  font-weight: 900;
  line-height: 1.5;
}

/* 本文（サムネとの間隔 16px：Figma 8002:2318 gap-16） */
.p-lotteCard__body {
  margin-top: 16px;
  min-width: 0; /* grid アイテムとして nowrap 説明文で膨らまないように */
}

/* 日付＋カテゴリタグの行（Figma 8044:302 / flex gap-16） */
.p-lotteCard__meta {
  display: flex;
  align-items: center;
  gap: 16px;
}

.p-lotteCard__date {
  font-size: 1.25rem; /* 20px */
  line-height: 1.2;
  font-weight: 500;
  color: #1a1a1a;
  white-space: nowrap;
}

/* カテゴリタグ（バッジ）：色は modifier で切替 */
.p-lotteCard__tag {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 3px;
  background-color: #475c85; /* 既定（トピックス相当）。modifier で上書き */
  color: #fff;
  font-size: 0.75rem; /* 12px */
  line-height: 2; /* 24 / 12 */
  font-weight: 700;
  white-space: nowrap;
}

.p-lotteCard__tag--movie {
  background-color: #b43539; /* スペシャルムービー：赤 */
}

.p-lotteCard__tag--topics {
  background-color: #475c85; /* トピックス：青 */
}

.p-lotteCard__tag--paper {
  background-color: #DDA61A; /* マリーンズタブロイド紙：黄 */
}

.p-lotteCard__tag--press {
  background-color: #40997e; /* プレスリリース：緑 */
}

/* タイトル行（メタ行との間隔 8px：Figma 8002:2221 gap-8） */
.p-lotteCard__head {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 8px;
}

.p-lotteCard__title {
  flex: 1 1 0;
  min-width: 0;
  font-size: 1.25rem; /* 20px */
  line-height: 1.2;
  font-weight: 500;
  color: #1a1a1a;
  transition: text-decoration 0.3s;
}

/* タイトル行アイコン：type modifier で出し分け（パスは _data-files の正規パス） */
.p-lotteCard__icon {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  margin-top: 4px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* 再生（動画）：Figma準拠の「円＋三角」再生アイコン（共有 holdings-icn-modal-video.svg はモニター枠状で形が異なるため、ページ専用SVGを使用） */
.p-lotteCard--movie .p-lotteCard__icon {
  background-image: url("/hvac-cc/corp/sustainability/social/czechrepublic-baseball-bridge/images/icn-play-circle.svg");
}

.p-lotteCard--external .p-lotteCard__icon {
  background-image: url("/hvac-cc/corp/assets/_data-files/corp/assets/images/holdings-icn-newtab.svg");
}

.p-lotteCard--pdf .p-lotteCard__icon {
  background-image: url("/hvac-cc/corp/assets/_data-files/corp/assets/images/holdings-icn-pdf.svg");
}

/* 説明文：既定は1行省略、.is-open で全文表示（本文との間隔 16px） */
.p-lotteCard__desc {
  display: flex;
  flex-direction: column;
  margin-top: 16px;
}

.p-lotteCard__desc__text {
  font-size: 1rem; /* 16px */
  line-height: 1.5;
  color: #1a1a1a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.p-lotteCard.is-open .p-lotteCard__desc__text {
  overflow: visible;
  white-space: normal;
}

/* 「▼詳細を見る / ▲隠す」トグル（右寄せ） */
.p-lotteCard__toggle {
  align-self: flex-end;
  margin-top: 8px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.875rem; /* 14px */
  line-height: 1.7142857143;
  color: #1a1a1a;
}

.p-lotteCard__toggle:hover {
  text-decoration: underline;
}

@media print, screen and (max-width: 767px) {
  .p-lotteSection--desc {
    margin-bottom: 48px;
  }
}