.pl-embed-root {
    /* 埋め込み先ページがflexレイアウトの場合、この要素自体は1つのflex項目になるが、
       中身(タブ・表)は横幅いっぱいに広げたい。flex-basis/min-widthの初期値のままだと
       中身の内容(横に長い表)に引っ張られて幅が縮まらず、周囲の要素と衝突することがある。
       flex項目でない通常の配置の場合はここで指定した値は単に無視されるだけなので、
       埋め込み先のレイアウトを問わず安全に付けられる。 */
    flex: 1 1 0%;
    min-width: 0;
    width: 100%;
}

.pl-table-wrap {
    font-family: sans-serif;
    color: #222;
    padding-bottom: 80px;
}

.pl-table-note {
    margin-top: 24px;
    font-size: 13px;
    color: #666;
}

.pl-tabs {
    /* サイト共通ヘッダー(position:fixed、高さは幅により75〜100px)の背景が完全に不透明では
       ないため、下を通り過ぎる表がうっすら透けて見えることがある。そこでこの要素自体を
       共通ヘッダー分(100px)+タブボタン分(44px)の高さにし、白背景で丸ごと覆う。
       ボタンは下端に寄せて表示し、上側の100px分は白い余白として機能させる。 */
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: 144px;
    padding: 0 0 8px;
    background: #fff;
    border-bottom: 1px solid #eee;
    box-sizing: border-box;
    /* タブ数が増えて1行に収まらない場合、ボタンを縮めて文字を折り返すのではなく、
       ボタンの大きさは保ったまま横スクロールできるようにする */
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.pl-tab {
    flex-shrink: 0;
    white-space: nowrap;
    padding: 8px 16px;
    border: 1px solid #ccc;
    border-radius: 6px;
    text-decoration: none;
    color: #444;
    background: #f7f7f7;
    /* 表のセルと文字サイズを揃える(下のメディアクエリでモバイル時も揃える) */
    font-size: 14px;
}

.pl-tab--active {
    background: #f5e642;
    border-color: #d8c800;
    color: #222;
    font-weight: 700;
}

.pl-group-label {
    font-size: 16px;
    margin: 40px 0 6px;
}

.pl-table-scroll {
    overflow-x: auto;
    margin-bottom: 12px;
    -webkit-overflow-scrolling: touch;
}

.pl-table {
    border-collapse: collapse;
    width: max-content;
    min-width: 100%;
}

.pl-table th,
.pl-table td {
    border: 1px solid #ddd;
    padding: 6px 10px;
    font-size: 14px;
    text-align: left;
    white-space: nowrap;
    background: #fff;
}

.pl-table th {
    background: #f5e642;
}

/* モデル名(型番)列は表ごとに幅がバラバラになりやすいので幅を揃え、
   長い名前は折り返して表示する(他の列は数値中心なので折り返さない) */
.pl-table th:first-child,
.pl-table td:first-child {
    width: 160px;
    white-space: normal;
    /* "Type R"の"R"だけが次の行に孤立する、といった1文字だけの改行を避け、
       単語の区切り(スペース)で行の長さがなるべく揃うようにする */
    text-wrap: balance;
    /* overflow-wrap: break-wordだと単語の途中(例: "TECHNICAL"→"TECHNIC"+"AL")でも
       改行してしまうことがあった。単語の途中では改行させず、スペース等の区切りでのみ
       折り返すようにする(収まりきらない単語がある行は、その分だけ列が広がる)。 */
    overflow-wrap: normal;
    /* サイト側(WordPressテーマ)のCSSでword-break: break-allが表のセルにもかかっており、
       overflow-wrapだけでは防ぎきれず単語の途中(例: "MONSTER"→"M"+"ONSTER")で改行される
       ことがあった。ここで明示的に打ち消す。 */
    word-break: normal;
}

@media (min-width: 641px) {
    /* PC幅では表示に余裕があるため、モデル名列をもう少し広くして改行を減らす
       (スマホ幅は640px以下の別ルールで160pxのまま据え置き)。 */
    .pl-table th:first-child,
    .pl-table td:first-child {
        width: 220px;
    }
}

/* 常時表示に選んだ列(常に1列だけ): 横スクロールしても左端に固定する。
   複数列を固定しようとすると列幅の想定がズレて表示が乱れるため、
   固定は先頭の1列のみに限定している(render.php側) */
.pl-table td.pl-frozen-col,
.pl-table th.pl-frozen-col {
    position: sticky;
    left: 0;
    z-index: 3;
}

.pl-table th.pl-frozen-col {
    z-index: 4;
    background: #f5e642;
}

.pl-table td.pl-frozen-col {
    background: #fffef2;
}

@media (max-width: 640px) {
    .pl-table th,
    .pl-table td,
    .pl-tab {
        font-size: 13px;
    }

    .pl-table th,
    .pl-table td {
        padding: 5px 8px;
    }
}