@charset "utf-8";

/*------------------------------------------------------------
	デフォルトスタイル
------------------------------------------------------------*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0; padding:0; background:transparent; border:0; outline:0; font-size:1em;}
body,table,input,textarea,select,option{font-family: Meiryo, "メイリオ", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", sans-serif;}
ol,ul{list-style:none;}

#wrap{width:98%; margin:1%;}
#csv_in{/*display:none;*/}
#csv_in_label{display:inline-block; margin:0.3em;}
#csv_name_view{}
#generation{display:inline-block; margin:0.3em;}
#generation input[type=text]{width:3em; text-align:center;}

#select_area{}
#select_area a{margin:2px;}
#search_area{margin:1em;}
#search_area .search_item{display:inline-block; margin:0.2em 0.5em;}
#view_area{width:100%; height:500px;}
#view_data{margin-top:1em; border-collapse:collapse; overflow:scroll;}
#view_data th{  position: sticky;
  top: 0;
  color: #fff;
  background: #333;
  white-space:nowrap;
  &:before{
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    width: 100%;
    height: 100%;
    border: 1px solid #ccc;
  }}
#view_data tr,#view_data th,#view_data td{border:1px solid darkgray;}
#view_data th,#view_data td{padding:4px 1px; text-align:center;}
#view_data td.select-checkbox{width:15px; padding:4px 10px;}

#view_area_F20{width:100%; height:150px;}
#view_data_F20{margin-top:1em; border-collapse:collapse; overflow:scroll;}
#view_data_F20 th{  position: sticky;
  top: 0;
  color: #fff;
  background: #333;
  white-space:nowrap;
  &:before{
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    width: 100%;
    height: 100%;
    border: 1px solid #ccc;
  }}
#view_data_F20 tr,#view_data_F20 th,#view_data_F20 td{border:1px solid darkgray;}
#view_data_F20 th,#view_data_F20 td{padding:4px 1px; text-align:center;}

#form_list{display:flex; flex-wrap:wrap; gap:1em; margin:1em;}
#form_list li{padding:0.5em 1em; text-align:center; border:1px solid darkgray; border-radius:0.5em;}
#form_list a{text-decoration:none; color:blue;}
#form_list li:hover{background:lightgray;}

.nowrap{white-space:nowrap;}


html {
    scroll-behavior: smooth;
}
.pagetop {
    height: 50px;
    width: 50px;
    position: fixed;
    right: 30px;
    bottom: 30px;
    background: #fff;
    border: solid 2px #000;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
    box-shadow: 0 4px 6px rgb(0 0 0 / 30%);
}

.pagetop__arrow {
    height: 10px;
    width: 10px;
    border-top: 3px solid #000;
    border-right: 3px solid #000;
    transform: translateY(20%) rotate(-45deg);
}

@media (hover: hover) and (pointer: fine) {
    .pagetop:hover, .pagetop:hover .pagetop__arrow {
        border-color: #3293e7;
    }
}