@charset "UTF-8";

/* コンテナ全体のカラー・変数定義 */
.num-container {
  --bg-board: #11326c; /* 深い紺色ボード背景 */
  --line-color: rgba(255, 255, 255, 0.2); /* 白い仕切り線 */
  --accent-red: #e60012; /* 縦ライン用の赤 */
  --text-white: #ffffff;
}


/* ==========================================================================
   【新設】リード文専用スタイル（最大幅1100px、中央揃え、左青帯の完全再現）
   ========================================================================== */
.num-lead-area {
  max-width: 1100px;
  margin: 0 auto 40px auto; /* 下の紺色ボードとの間に40pxの適切な余白を確保 */
  padding: 0 40px; /* 紺色ボードの内側余白（padding）の開始位置と綺麗に縦ラインを揃える */
  box-sizing: border-box;
}

.num-lead-text {
  position: relative;
  font-size: 1.1rem; /* 約20px（既存の共通フォントサイズ設定に自然に馴染む大きさ） */
  font-weight: bold;
  color: #2365bf;
  line-height: 1.5;
  margin: 0;
  padding: 8px 0 8px 24px; /* 青い帯との間の適切な隙間 */
  text-align: center;
}

/* カンプ左側の「青い極太の縦帯」を疑似要素で正確に再現 */
.num-lead-text::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 8px; /* 太めのアクセントライン */
  background-color: var(--accent-blue);
}

/* 紺色ボード本体（1100px幅） */
.num-board {
  max-width: 1100px;
  margin: 0 auto 50px auto;
  padding: 60px 40px;
  background-color: var(--bg-board);
  box-sizing: border-box;
}

/* 6カラムベースの厳密なグリッド構造 */
.num-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  width: 100%;
}

/* 各グリッドカードの共通ルール */
.num-card {
  position: relative;
  box-sizing: border-box;
  padding: 40px 30px;
  border-bottom: 1px solid var(--line-color);
  overflow: hidden;
}

/* カードインナー */
.num-card-inner {
  position: relative;
  z-index: 3;
  height: 100%;
}

/* 仕切り線・区切り線の追加ルール */
.num-card.border-r { border-right: 1px solid var(--line-color); }
.num-card.border-b-thick { border-bottom: 2px solid rgba(255, 255, 255, 0.35); }

/* カラムの結合制御 */
.num-card.w-full { grid-column: span 6; } /* 1列ぶち抜き */
.num-card.w-1-3 { grid-column: span 2; } /* 3列並び（2/6幅） */
.num-card.w-1-2 { grid-column: span 3; } /* 2列並び（3/6幅） */

/* --- 背景イラスト画像一括マッピング（すべて右上に固定） --- */
.num-card::before {
  content: "";
  position: absolute;
  top: 15px;      
  right: 25px;    
  width: 110px;   
  height: 110px;
  background-repeat: no-repeat;
  background-position: right top;
  background-size: contain;
  opacity: 0.25;  
  z-index: 1;     
  pointer-events: none;
}

/* 1行目（創業年数）のビルイラストのみ文字を避けて右側にスライド（left: 70%） */
.bg-building::before { 
  background-image: url('../images/numbers/bg-building.webp'); 
  left: 70%; 
  right: auto; 
  width: 145px; 
  height: 145px; 
}

.bg-coins::before { background-image: url('../images/numbers/bg-coins.webp'); }
.bg-map::before { background-image: url('../images/numbers/bg-map.webp'); }
.bg-trucks::before { background-image: url('../images/numbers/bg-trucks.webp'); }
.bg-pole-transport::before { background-image: url('../images/numbers/bg-pole-transport.webp'); }
.bg-crane::before { background-image: url('../images/numbers/bg-crane.webp'); }
.bg-stairs::before { background-image: url('../images/numbers/bg-stairs.webp'); }
.bg-calendar::before { background-image: url('../images/numbers/bg-calendar-1.webp'); }
.bg-certificate::before { background-image: url('../images/numbers/bg-certificate.webp'); }
.bg-cal-cert::before { background-image: url('../images/numbers/bg-calendar-certificate.webp'); }
.bg-family::before { background-image: url('../images/numbers/bg-family.webp'); }
.bg-heart::before { background-image: url('../images/numbers/bg-heart.webp'); }
.bg-drinks::before { background-image: url('../images/numbers/bg-drinks.webp'); }

/* 【修正】シンプルに左寄せ。変な上書きプロパティはすべて削除しました */
.num-title {
  position: relative;
  font-size: 1.2rem;
  color: var(--text-white);
  padding-left: 14px;
  margin: 0 0 16px 0;
  font-weight: bold;
  line-height: 1.4;
  text-align: left;
}
.num-title::before {
  content: "";
  position: absolute;
  left: 0; top: 3px;
  width: 4px; height: 18px;
  background-color: var(--accent-red);
}

/* 数字セクションはすべて中央揃え */
.num-content {
  display: flex;
  align-items: flex-end; /* 数字・小数点は下揃え */
  justify-content: center; /* センター揃え */
  width: 100%;
}

/* 数字フォント共通 */
.num-digit {
  font-family: 'Arial Black', sans-serif;
  font-size: 5rem;
  font-weight: bold;
  color: var(--text-white);
  line-height: 0.85; 
  letter-spacing: -0.02em;
  display: inline-flex;
  align-items: flex-end;
}
.num-digit.hero { font-size: 6.5rem; }
.num-digit.font-mid { font-size: 4rem; } 
.num-digit.highlight {
  font-family: sans-serif;
  font-size: 4.5rem;
}

/* 小数点を小さく表示 */
.num-decimal {
  font-size: 3rem; 
  font-family: 'Arial Black', sans-serif;
  font-weight: bold;
  line-height: 0.85;
}

/* 単位・接頭辞の基本設定 */
.num-unit {
  font-size: 1.125rem;
  color: var(--text-white);
  margin-left: 6px;
  font-weight: bold;
  font-family: sans-serif;
  padding-bottom: 2px; 
}
.num-prefix {
  font-size: 1.125rem;
  color: var(--text-white);
  margin-right: 6px;
  font-weight: bold;
  font-family: sans-serif;
  padding-bottom: 2px;
}

/* 保有車両台数エリア */
.num-rows {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 10px;
  width: 100%;
}
.num-row-item {
  display: flex;
  justify-content: space-between; 
  align-items: flex-end; 
  width: 100%;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15); 
  padding-bottom: 4px;
}
.num-row-label {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.8);
  text-align: left;
}
.num-row-digit {
  font-family: 'Arial Black', sans-serif;
  font-size: 3.2rem; 
  font-weight: bold;
  color: var(--text-white);
  line-height: 0.85;
}
.num-row-unit {
  font-family: sans-serif;
  font-size: 0.875rem;
  color: var(--text-white);
  font-weight: bold;
  margin-left: 2px;
}

/* 感謝表彰制度エリア（お米・現金） */
.num-rows.center .num-row-item-center {
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: none;
  padding-bottom: 0;
  width: 100%;
  margin-bottom: 12px;
}
.num-rows.center .num-row-item-center:last-child {
  margin-bottom: 0;
}
.num-block-flex {
  display: flex;
  align-items: flex-end; 
  justify-content: center;
}
.num-text-lines {
  display: flex;
  flex-direction: column;
  text-align: left;
  margin-right: 12px; 
  padding-bottom: 4px; 
}
.num-text-line {
  font-size: 1.125rem; 
  color: var(--text-white);
  font-weight: bold;
  font-family: sans-serif;
  line-height: 1.35; 
}
.num-digits-wrap {
  display: flex;
  align-items: flex-end;
}
.num-row-digit-inline {
  font-family: 'Arial Black', sans-serif;
  font-size: 3.5rem;
  font-weight: bold;
  color: var(--text-white);
  line-height: 0.85; 
}
.num-row-unit-inline {
  font-family: sans-serif;
  font-size: 0.875rem;
  color: var(--text-white);
  font-weight: bold;
  margin-left: 4px;
  padding-bottom: 2px; 
}

/* 職種割合の横棒グラフ */
.num-bar-chart {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 16px;
  width: 100%;
  padding: 0 10px;
}
.num-bar-row { display: flex; align-items: center; gap: 12px; }
.num-bar-label { font-size: 1.1rem; color: var(--text-white); width: 80px; flex-shrink: 0; text-align: left; }
.num-bar-track { flex: 1; height: 24px; background-color: rgba(255, 255, 255, 0.15); }
.num-bar-fill { height: 100%; background-color: var(--text-white); }
.num-bar-pct { font-size: 2.2rem; font-weight: bold; color: var(--text-white); width: 45px; text-align: right; }
.num-bar-unit { font-size: 0.9rem; font-weight: normal; margin-left: 2px; }

/* 年代構成 */
.num-graph-img {
  width: 100%;
  max-width: 220px;
  margin: 10px auto 0 auto;
}
.num-graph-img img { width: 100%; height: auto; display: block; }

/* 健康経営優良法人 */
.num-health-info { width: 100%; text-align: left; } 
.num-health-sub { font-size: 0.8125rem; color: rgba(255, 255, 255, 0.7); margin-bottom: 6px; text-align: left; padding-left: 14px; }

/* PC専用ヘルパー */
.pc-only { display: inline; }

/* ==========================================================================
   スマホ（レスポンシブ）対応
   ========================================================================== */
@media screen and (max-width: 768px) {
  /* リード文エリアをスマホ時に横幅90%・中央揃えに変更 */
  .num-lead-area { 
    width: 90% !important; 
    padding: 0 !important; 
    margin: 0 auto 24px auto !important; 
  } 
  .num-lead-text { font-size: 0.8rem; padding-left: 16px; }
  .num-lead-text::before { width: 5px; }

  /* メインの紺色ボードをスマホ時に横幅90%・中央揃えに変更 */
  .num-board { 
    width: 90% !important;
    padding: 30px 16px !important; 
    margin: 0 auto 50px auto!important;
  }
  
  .num-grid { grid-template-columns: 1fr; }
  .num-card { grid-column: span 1 !important; border-right: none !important; padding: 35px 15px; }
  .num-card::before { top: 10px !important; right: 15px !important; width: 80px !important; height: 80px !important; }
  .bg-building::before { left: auto !important; right: 15px !important; width: 90px !important; height: 90px !important; }
  .pc-only { display: none; }
  
  .num-content { justify-content: center !important; padding-right: 0 !important; margin-top: 20px; } 
  .num-digit { font-size: 3.5rem; }
  .num-digit.hero { font-size: 4.5rem; }
  .num-digit.font-mid { font-size: 3rem; }
  .num-digit.highlight { font-size: 3.5rem; }
  .num-decimal { font-size: 2.2rem; }
  .num-row-digit { font-size: 3rem; }
  .num-row-digit-inline { font-size: 2.8rem; }
  .num-text-line { font-size: 0.95rem; }
}