.grid-table {
    display: grid;
    grid-template-columns: 120px 1.2fr 0.8fr 0.5fr 0.5fr;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0px 0px 15px -5px #777777;
  }

  .cell { border-bottom: 1px solid #c8d4e8; border-right: 1px solid #d0d8e8; display: flex; align-items: center; justify-content: center; padding: 10px 12px; font-size: clamp(10px, 0.6rem, 12px); }

  .kadai-lbl     { grid-column: 1;     grid-row: 1; background: #133284; color: #fff; font-weight: 500; border-right: 1.5px solid #133284; border-bottom: 1.5px solid #133284; }
  .kadai-explicit{ grid-column: 2 / 5; grid-row: 1; background: #f0f4fa; color: #133284; font-weight: 500; border-bottom: 1.5px solid #133284; border-right: 1px solid #d0d8e8; }
  .kadai-latent  { grid-column: 5;     grid-row: 1; background: #133284; color: #fff; font-weight: 500; border-bottom: 1.5px solid #133284; border-right: none; }

  .sol-lbl    { grid-column: 1;     grid-row: 2; background: #f0f4fa; color: #133284; font-weight: 500; border-right: 1.5px solid #133284; border-bottom: 1.5px solid #133284; }
  .sol-clear  { grid-column: 2 / 4; grid-row: 2; background: #f8f9fc; color: #133284; border-bottom: 1.5px solid #133284; border-right: 1px solid #d0d8e8; }
  .sol-unclear{ grid-column: 4;     grid-row: 2; background: #133284; color: #fff; font-weight: 500; border-bottom: 1.5px solid #133284; border-right: 1px solid rgba(255,255,255,0.15); }
  .sol-empty  { grid-column: 5;     grid-row: 2; background: #133284; border-bottom: 1.5px solid #133284; border-right: none; }

  .needs-lbl { grid-column: 1;     grid-row: 3; background: #133284; color: #fff; font-weight: 500; font-size: clamp(10px, 0.6rem, 12px); border-right: 1.5px solid #133284; border-bottom: 2px solid #133284; }
  .need-tech { grid-column: 2;     grid-row: 3; background: #133284; color: #fff; font-weight: 500; border-right: 1px solid rgba(255,255,255,0.15); border-bottom: 2px solid #133284; }
  .need-edu  { grid-column: 3;     grid-row: 3; background: #133284; color: #fff; font-weight: 500; border-right: 1px solid rgba(255,255,255,0.15); border-bottom: 2px solid #133284; }
  .need-sol  { grid-column: 4 / 6; grid-row: 3; background: #133284; color: #fff; border-right: none; border-bottom: 2px solid #133284; }

  .arrow-down { color: #e05a8a; margin-left: 4px; }

  .body-lbl  { grid-column: 1;     grid-row: 4; background: #f0f4fa; color: #133284; font-size: clamp(10px, 0.6rem, 12px); font-weight: 500; text-align: center; line-height: 1.6; border-right: 1.5px solid #133284; border-bottom: none; align-items: center; }
  .body-tech { grid-column: 2;     grid-row: 4; background: #f8f9fc; padding: 16px 12px; border-right: 1px solid #d0d8e8; border-bottom: none; align-items: flex-start; flex-direction: column; }
  .body-edu  { grid-column: 3;     grid-row: 4; background: #f8f9fc; padding: 16px 12px; border-right: 1px solid #d0d8e8; border-bottom: none; align-items: flex-start; flex-direction: column; }
  .body-sol  { grid-column: 4 / 6; grid-row: 4; background: #f8f9fc; padding: 16px 12px; border-right: none; border-bottom: none; align-items: flex-start; flex-direction: column; }

  .col-title { font-size: 11px; color: #7a8aaa; text-align: center; margin-bottom: 12px; font-weight: 400; width: 100%; }

  .service-card { background: #fff; border: 0.5px solid #c8d4e8; border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; width: 100%; box-sizing: border-box; }
  .service-card h3 { font-size: clamp(10px, 0.85rem, 14px); font-weight: 500; color: #133284; margin: 0 0 8px; }
  .service-tag { display: inline-block; background: #e8edf7; color: #3a4f7a; font-size: clamp(10px, 0.6rem, 12px); border-radius: 4px; padding: 3px 8px; margin-bottom: 6px; }
  .service-desc { font-size: 11px; color: #5a6a8a; line-height: 1.6; margin: 0; }

  .fusion-box { display: flex; align-items: center; justify-content: center; gap: 4px; margin: 8px 0; width: 100%; }
  .bldg-wrap { display: flex; flex-direction: column; align-items: center; gap: 4px; }
  .bldg-icon { font-size: 26px; color: #3a4f7a; }
  .fusion-circle { background: #c8d4e8; border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; font-size: clamp(10px, 0.6rem, 12px); font-weight: 500; color: #133284; margin: 0 -6px; z-index: 1; flex-shrink: 0; }
  .bldg-label { font-size: clamp(10px, 0.6rem, 12px); color: #5a6a8a; text-align: center; line-height: 1.4; }

  .bullet-list { list-style: none; padding: 0; margin: 4px 0 0; }
  .bullet-list li { font-size:clamp(10px, 0.6rem, 12px); color: #5a6a8a; padding: 1px 0; }
  .bullet-list li::before { content: "・"; }

  /* ============================================================
     モバイル版：構造（グリッドの列組み）はPCと完全に同じまま、
     画面幅が足りない分はコンテナごと横スクロールさせる。
     「潜在的課題×解決策が不明確」のようなセル同士の位置関係を
     並び替えで崩さずに済むため、列の対応関係が重要な
     この表では横スクロール方式の方が安全。
  ============================================================ */
  .scroll-wrap{
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 12px;
  }

  @media (max-width: 820px) {
    .scroll-wrap{
      box-shadow: 0px 0px 15px -5px #777777;
    }
    .grid-table{
      /* 1列目を120px→56pxに縮小した分、必要な最低幅も縮める */
      grid-template-columns: 56px 1.2fr 0.8fr 0.5fr 0.5fr;
      min-width: 700px;
      max-width: none;
      box-shadow: none;
      /* 重要：grid-table自身のoverflow:hidden（角丸用）が残っていると、
         stickyが「動かないgrid-table」を基準にしてしまい固定が効かない。
         角丸のクリップは親の.scroll-wrap側で行うので、ここではvisibleに戻す。 */
      overflow: visible;
      border-radius: 0;
    }

    /* Excelの「ウィンドウ枠の固定」と同じ要領で、1列目（ラベル列）を
       横スクロールに追従させず画面左端に固定する。
       さらに縦書きにすることで列幅を狭め、横スクロール量を減らす。 */
    .kadai-lbl,
    .sol-lbl,
    .needs-lbl,
    .body-lbl{
      position: sticky;
      left: 0;
      z-index: 3;
      /* スクロールで下の内容と重なった時に境目がわかるよう影を付ける */
      box-shadow: 2px 0 6px -2px rgba(0,0,0,0.15);

      writing-mode: vertical-rl;   /* 縦書き（右→左に行が進む） */
      text-orientation: mixed;     /* 英数字は横向きのまま、かなは縦向きに */
      -webkit-writing-mode: vertical-rl;
      padding: 10px 4px;
      letter-spacing: 0.08em;
      font-size: 12px;
      line-height: 1.4;
      white-space: normal;
    }

    /* 縦書きにすると <br> による改行が複数の縦列を生んで幅を圧迫するため、
       「当社のサービスソリューション」は1本の縦列に収まるよう改行を無効化 */
    .body-lbl br{ display: none; }
  }

  @media (max-width: 480px) {
    .grid-table{
      grid-template-columns: 46px 1.2fr 0.8fr 0.5fr 0.5fr;
      min-width: 620px;
    }
    .cell{ font-size: 11.5px; padding: 8px 10px; }
    .kadai-lbl, .sol-lbl, .needs-lbl, .body-lbl{ font-size: 11px; }
    .service-card{ padding: 10px 12px; }
  }

  /* スクロールできることが分かるよう、モバイルでのみヒントを表示 */
  .scroll-hint{
    display: none;
    font-size: 12px;
    color: #7a8aaa;
    text-align: center;
    margin: 8px 0 0;
  }
  @media (max-width: 820px) {
    .scroll-hint{ display: block; }
  }