@charset "UTF-8";


/**************************************
* PC1級遮光NIF
***************************************/
  .nif {
    font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", Meiryo, sans-serif;
    color: #222;
    margin: 20px;
    background: #fff;
  }

.nif h2 {
  font-size: 130%;
  margin-top: 30px !important;
}

  /* ========== 共通 ========== */
  .swatch {
    background: #0d0f12;
    border-radius: 6px;
    overflow: hidden;
  }
  .level-app { background-image: radial-gradient(circle, rgba(255,255,255,0.03) 0 25%, transparent 26%); }
  .level-ap  { background-image: radial-gradient(circle, rgba(255,255,255,0.10) 0 25%, transparent 26%); }
  .level-a   { background-image: radial-gradient(circle, rgba(255,255,255,0.18) 0 25%, transparent 26%); }
  .level-b   { background-image: radial-gradient(circle, rgba(255,255,255,0.33) 0 25%, transparent 26%); }
  .level-c   { background-image: radial-gradient(circle, rgba(255,255,255,0.55) 0 25%, transparent 26%); }

  .grade { font-weight: 700; white-space: nowrap; }
  .grade small { color: #666; font-weight: 600; }


    .grid-table {
      display: grid;
      grid-template-columns: 20% 25% 1fr;
      border: 0.5px solid #ccc;
      width: 100%;
    }

    .header {
      display: flex;
      align-items: center;
      background: #f3f5f7;
      font-weight: 700;
      border: 0.5px solid #ccc;
      padding: 10px 12px;
    }

    /* 行を“中継”にして子要素をそのままグリッドに流す */
    .row {
      display: contents;  /* ← これで3つの直下要素が3列に割り当てられる */
      box-shadow: none;
      border: 0;
      padding: 0;
      margin: 0;
    }

    /* 各セルの見た目（3列分） */
    .row > div {
      border: 0.5px solid #ccc;
      padding: 10px 12px;
      display: flex;
      align-items: center;
      background: #fff;
    }

    /* イメージセルのスウォッチを横幅にフィット */
    .row > .image .swatch {
      width: 100%;
      height: 56px;
    }

.desc {
  width: 100% !important;
}