
.css-table
{
    display: block;
    line-height: 1.4;
    max-width: 100%;
}

.table-row
{
    display: flex;
    width: 100%;
    margin-top: 1px; /* 重なりでのずれ対応 */
}
.table-cell
{
    display: inline-flex;
}

.table-cell-th,.table-cell-td
{
    background: #fff;
    width: 100%;
    height: 100%;
    margin-left: 1px; /* 重なりでのずれ対応 */
}

.css-table .table-row .table-cell-th
{
    padding:5px;
    background: #f0f0f0;
    box-shadow : 0 0 0 1px #aaa;

    font-weight:bold;
    text-align:left;
    /*white-space: nowrap;*/
    display:flex;
    align-items:center;
}

.css-table .table-row .table-cell-td
{
    padding:6px;
    /*white-space: break-spaces;  /* これがあると、input type="file" が膨らむ？ */
    word-break: break-all;

    vertical-align: middle;
    box-shadow : 0 0 0 1px #aaa;

    flex: 1;
    overflow: auto;

    display:flex;
    flex-wrap:wrap;
    align-items:center;
}

.table-cell.cw100p input:not([type="submit"]):not([type="button"]),
.table-cell.cw100p select,
.table-cell.cw100p textarea
{
    width: 100%;
}

.table-cell.cw80p input:not([type="submit"]):not([type="button"]),
.table-cell.cw80p select,
.table-cell.cw80p textarea
{
    width: 80%;
}

/** 以下、幅指定用
wXXX: テーブルの横幅
cwXXX: テーブルの項目の横幅（th, td合わせたもの)
hwXXX: テーブルのヘッダの横幅(thのみ)
**/
.css-table.w10 {  width: 10px; }
.css-table.w20 {  width: 20px; }
.css-table.w30 {  width: 30px; }
.css-table.w40 {  width: 40px; }
.css-table.w50 {  width: 50px; }
.css-table.w60 {  width: 60px; }
.css-table.w70 {  width: 70px; }
.css-table.w80 {  width: 80px; }
.css-table.w90 {  width: 90px; }
.css-table.w100 {  width: 100px; }
.css-table.w120 {  width: 120px; }
.css-table.w140 {  width: 140px; }
.css-table.w160 {  width: 160px; }
.css-table.w180 {  width: 180px; }
.css-table.w200 {  width: 200px; }
.css-table.w220 {  width: 220px; }
.css-table.w240 {  width: 240px; }
.css-table.w260 {  width: 260px; }
.css-table.w280 {  width: 280px; }
.css-table.w300 {  width: 300px; }
.css-table.w320 {  width: 320px; }
.css-table.w340 {  width: 340px; }
.css-table.w360 {  width: 360px; }
.css-table.w380 {  width: 380px; }
.css-table.w400 {  width: 400px; }
.css-table.w420 {  width: 420px; }
.css-table.w440 {  width: 440px; }
.css-table.w460 {  width: 460px; }
.css-table.w480 {  width: 480px; }
.css-table.w500 {  width: 500px; }
.css-table.w520 {  width: 520px; }
.css-table.w540 {  width: 540px; }
.css-table.w560 {  width: 560px; }
.css-table.w580 {  width: 580px; }
.css-table.w600 {  width: 600px; }
.css-table.w620 {  width: 620px; }
.css-table.w640 {  width: 640px; }
.css-table.w660 {  width: 660px; }
.css-table.w680 {  width: 680px; }
.css-table.w700 {  width: 700px; }
.css-table.w720 {  width: 720px; }
.css-table.w740 {  width: 740px; }
.css-table.w760 {  width: 760px; }
.css-table.w780 {  width: 780px; }
.css-table.w800 {  width: 800px; }
.css-table.w900 {  width: 900px; }
.css-table.w1000 {  width: 1000px; }
.css-table.w1100 {  width: 1100px; }
.css-table.w1200 {  width: 1200px; }
.css-table.w1300 {  width: 1300px; }
.css-table.w1400 {  width: 1400px; }
.css-table.w1500 {  width: 1500px; }
.css-table.w1600 {  width: 1600px; }
.css-table.w1700 {  width: 1700px; }
.css-table.w1800 {  width: 1800px; }
.css-table.w1900 {  width: 1900px; }
.css-table.w2000 {  width: 2000px; }

.css-table.w150 { width: 150px; }
.css-table.w250 { width: 250px; }
.css-table.w350 { width: 350px; }
.css-table.w450 { width: 450px; }
.css-table.w550 { width: 550px; }
.css-table.w650 { width: 650px; }
.css-table.w750 { width: 750px; }
.css-table.w850 { width: 850px; }
.css-table.w950 { width: 950px; }
.css-table.w1050 { width: 1050px; }
.css-table.w1150 { width: 1150px; }
.css-table.w1250 { width: 1250px; }
.css-table.w1350 { width: 1350px; }
.css-table.w1450 { width: 1450px; }
.css-table.w1550 { width: 1550px; }
.css-table.w1650 { width: 1650px; }
.css-table.w1750 { width: 1750px; }
.css-table.w1850 { width: 1850px; }
.css-table.w1950 { width: 1950px; }

/* table-cell */
.table-cell.cw10 {  width: 10px; }
.table-cell.cw20 {  width: 20px; }
.table-cell.cw30 {  width: 30px; }
.table-cell.cw40 {  width: 40px; }
.table-cell.cw50 {  width: 50px; }
.table-cell.cw60 {  width: 60px; }
.table-cell.cw70 {  width: 70px; }
.table-cell.cw80 {  width: 80px; }
.table-cell.cw90 {  width: 90px; }
.table-cell.cw100 {  width: 100px; }
.table-cell.cw120 {  width: 120px; }
.table-cell.cw140 {  width: 140px; }
.table-cell.cw160 {  width: 160px; }
.table-cell.cw180 {  width: 180px; }
.table-cell.cw200 {  width: 200px; }
.table-cell.cw220 {  width: 220px; }
.table-cell.cw240 {  width: 240px; }
.table-cell.cw260 {  width: 260px; }
.table-cell.cw280 {  width: 280px; }
.table-cell.cw300 {  width: 300px; }
.table-cell.cw320 {  width: 320px; }
.table-cell.cw340 {  width: 340px; }
.table-cell.cw360 {  width: 360px; }
.table-cell.cw380 {  width: 380px; }
.table-cell.cw400 {  width: 400px; }
.table-cell.cw420 {  width: 420px; }
.table-cell.cw440 {  width: 440px; }
.table-cell.cw460 {  width: 460px; }
.table-cell.cw480 {  width: 480px; }
.table-cell.cw500 {  width: 500px; }
.table-cell.cw520 {  width: 520px; }
.table-cell.cw540 {  width: 540px; }
.table-cell.cw560 {  width: 560px; }
.table-cell.cw580 {  width: 580px; }
.table-cell.cw600 {  width: 600px; }
.table-cell.cw620 {  width: 620px; }
.table-cell.cw640 {  width: 640px; }
.table-cell.cw660 {  width: 660px; }
.table-cell.cw680 {  width: 680px; }
.table-cell.cw700 {  width: 700px; }
.table-cell.cw720 {  width: 720px; }
.table-cell.cw740 {  width: 740px; }
.table-cell.cw760 {  width: 760px; }
.table-cell.cw780 {  width: 780px; }
.table-cell.cw800 {  width: 800px; }
.table-cell.cw900 {  width: 900px; }
.table-cell.cw1000 {  width: 1000px; }
.table-cell.cw1100 {  width: 1100px; }
.table-cell.cw1200 {  width: 1200px; }
.table-cell.cw1300 {  width: 1300px; }
.table-cell.cw1400 {  width: 1400px; }
.table-cell.cw1500 {  width: 1500px; }
.table-cell.cw1600 {  width: 1600px; }
.table-cell.cw1700 {  width: 1700px; }
.table-cell.cw1800 {  width: 1800px; }
.table-cell.cw1900 {  width: 1900px; }
.table-cell.cw2000 {  width: 2000px; }

.table-cell.cw150 { width: 150px; }
.table-cell.cw250 { width: 250px; }
.table-cell.cw350 { width: 350px; }
.table-cell.cw450 { width: 450px; }
.table-cell.cw550 { width: 550px; }
.table-cell.cw650 { width: 650px; }
.table-cell.cw750 { width: 750px; }
.table-cell.cw850 { width: 850px; }
.table-cell.cw950 { width: 950px; }
.table-cell.cw1050 { width: 1050px; }
.table-cell.cw1150 { width: 1150px; }
.table-cell.cw1250 { width: 1250px; }
.table-cell.cw1350 { width: 1350px; }
.table-cell.cw1450 { width: 1450px; }
.table-cell.cw1550 { width: 1550px; }
.table-cell.cw1650 { width: 1650px; }
.table-cell.cw1750 { width: 1750px; }
.table-cell.cw1850 { width: 1850px; }
.table-cell.cw1950 { width: 1950px; }


/* th */
.hw10>.table-cell-th { width: 10px; }
.hw20>.table-cell-th { width: 20px; }
.hw30>.table-cell-th { width: 30px; }
.hw40>.table-cell-th { width: 40px; }
.hw50>.table-cell-th { width: 50px; }
.hw60>.table-cell-th { width: 60px; }
.hw70>.table-cell-th { width: 70px; }
.hw80>.table-cell-th { width: 80px; }
.hw90>.table-cell-th { width: 90px; }
.hw100>.table-cell-th { width: 100px; }
.hw120>.table-cell-th { width: 120px; }
.hw140>.table-cell-th { width: 140px; }
.hw160>.table-cell-th { width: 160px; }
.hw180>.table-cell-th { width: 180px; }
.hw200>.table-cell-th { width: 200px; }
.hw220>.table-cell-th { width: 220px; }
.hw240>.table-cell-th { width: 240px; }
.hw260>.table-cell-th { width: 260px; }
.hw280>.table-cell-th { width: 280px; }
.hw300>.table-cell-th { width: 300px; }
.hw320>.table-cell-th { width: 320px; }
.hw340>.table-cell-th { width: 340px; }
.hw360>.table-cell-th { width: 360px; }
.hw380>.table-cell-th { width: 380px; }
.hw400>.table-cell-th { width: 400px; }
.hw420>.table-cell-th { width: 420px; }
.hw440>.table-cell-th { width: 440px; }
.hw460>.table-cell-th { width: 460px; }
.hw480>.table-cell-th { width: 480px; }
.hw500>.table-cell-th { width: 500px; }
.hw520>.table-cell-th { width: 520px; }
.hw540>.table-cell-th { width: 540px; }
.hw560>.table-cell-th { width: 560px; }
.hw580>.table-cell-th { width: 580px; }
.hw600>.table-cell-th { width: 600px; }
.hw620>.table-cell-th { width: 620px; }
.hw640>.table-cell-th { width: 640px; }
.hw660>.table-cell-th { width: 660px; }
.hw680>.table-cell-th { width: 680px; }
.hw700>.table-cell-th { width: 700px; }
.hw720>.table-cell-th { width: 720px; }
.hw740>.table-cell-th { width: 740px; }
.hw760>.table-cell-th { width: 760px; }
.hw780>.table-cell-th { width: 780px; }
.hw800>.table-cell-th { width: 800px; }
.hw900>.table-cell-th { width: 900px; }
.hw1000>.table-cell-th { width: 1000px; }
.hw1100>.table-cell-th { width: 1100px; }
.hw1200>.table-cell-th { width: 1200px; }
.hw1300>.table-cell-th { width: 1300px; }
.hw1400>.table-cell-th { width: 1400px; }
.hw1500>.table-cell-th { width: 1500px; }
.hw1600>.table-cell-th { width: 1600px; }
.hw1700>.table-cell-th { width: 1700px; }
.hw1800>.table-cell-th { width: 1800px; }
.hw1900>.table-cell-th { width: 1900px; }
.hw2000>.table-cell-th { width: 2000px; }

.hw150>.table-cell-th { width: 150px; }
.hw250>.table-cell-th { width: 250px; }
.hw350>.table-cell-th { width: 350px; }
.hw450>.table-cell-th { width: 450px; }
.hw550>.table-cell-th { width: 550px; }
.hw650>.table-cell-th { width: 650px; }
.hw750>.table-cell-th { width: 750px; }
.hw850>.table-cell-th { width: 850px; }
.hw950>.table-cell-th { width: 950px; }
.hw1050>.table-cell-th { width: 1050px; }
.hw1150>.table-cell-th { width: 1150px; }
.hw1250>.table-cell-th { width: 1250px; }
.hw1350>.table-cell-th { width: 1350px; }
.hw1450>.table-cell-th { width: 1450px; }
.hw1550>.table-cell-th { width: 1550px; }
.hw1650>.table-cell-th { width: 1650px; }
.hw1750>.table-cell-th { width: 1750px; }
.hw1850>.table-cell-th { width: 1850px; }
.hw1950>.table-cell-th { width: 1950px; }

.table-cell-th {vertical-align : middle;}

/* サブテーブル グループ表現用 */
td.cw10 { width: 10px; }
td.cw20 { width: 20px; }
td.cw30 { width: 30px; }
td.cw40 { width: 40px; }
td.cw50 { width: 50px; }
td.cw60 { width: 60px; }
td.cw70 { width: 70px; }
td.cw80 { width: 80px; }
td.cw90 { width: 90px; }
td.cw100 { width: 100px; }
td.cw120 { width: 120px; }
td.cw140 { width: 140px; }
td.cw160 { width: 160px; }
td.cw180 { width: 180px; }
td.cw200 { width: 200px; }
td.cw220 { width: 220px; }
td.cw240 { width: 240px; }
td.cw260 { width: 260px; }
td.cw280 { width: 280px; }
td.cw300 { width: 300px; }
td.cw320 { width: 320px; }
td.cw340 { width: 340px; }
td.cw360 { width: 360px; }
td.cw380 { width: 380px; }
td.cw400 { width: 400px; }
td.cw420 { width: 420px; }
td.cw440 { width: 440px; }
td.cw460 { width: 460px; }
td.cw480 { width: 480px; }
td.cw500 { width: 500px; }
td.cw520 { width: 520px; }
td.cw540 { width: 540px; }
td.cw560 { width: 560px; }
td.cw580 { width: 580px; }
td.cw600 { width: 600px; }
td.cw620 { width: 620px; }
td.cw640 { width: 640px; }
td.cw660 { width: 660px; }
td.cw680 { width: 680px; }
td.cw700 { width: 700px; }
td.cw720 { width: 720px; }
td.cw740 { width: 740px; }
td.cw760 { width: 760px; }
td.cw780 { width: 780px; }
td.cw800 { width: 800px; }
td.cw900 { width: 900px; }
td.cw1000 { width: 1000px; }
td.cw1100 { width: 1100px; }
td.cw1200 { width: 1200px; }
td.cw1300 { width: 1300px; }
td.cw1400 { width: 1400px; }
td.cw1500 { width: 1500px; }
td.cw1600 { width: 1600px; }
td.cw1700 { width: 1700px; }
td.cw1800 { width: 1800px; }
td.cw1900 { width: 1900px; }
td.cw2000 { width: 2000px; }

td.cw150 { width: 150px; }
td.cw250 { width: 250px; }
td.cw350 { width: 350px; }
td.cw450 { width: 450px; }
td.cw550 { width: 550px; }
td.cw650 { width: 650px; }
td.cw750 { width: 750px; }
td.cw850 { width: 850px; }
td.cw950 { width: 950px; }
td.cw1050 { width: 1050px; }
td.cw1150 { width: 1150px; }
td.cw1250 { width: 1250px; }
td.cw1350 { width: 1350px; }
td.cw1450 { width: 1450px; }
td.cw1550 { width: 1550px; }
td.cw1650 { width: 1650px; }
td.cw1750 { width: 1750px; }
td.cw1850 { width: 1850px; }
td.cw1950 { width: 1950px; }

td.cw100p input,
td.cw100p select,
td.cw100p textarea
{
    width: 100%;
}

td.cw80p input,
td.cw80p select,
td.cw80p textarea
{
    width: 80%;
}
