@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;700&display=swap');

* {
  box-sizing: border-box;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  letter-spacing: 1px;
}


/* タブレットZoom対応 */
input[type="submit"] {
  font-size: 18px;
}
fieldset {
  border: none;
}
select {
  font-size: 16px;
}
/*
/* 表全体のデザイン */
table.list {
  /*border-spacing: 0px;   /* セルの間隔をなくす */
  /*font-family: Verdana,sans-serif;   /* フォントの指定 */
  /*font-size: 16px;   /* 文字サイズを小さめに */
}
/* セルのデザインのうちヘッダと中身の共通部分 */
table.list th, table.list td {
  /*border-width: 1px;   /* セルの枠線は太さ1ピクセル */
  /*border-style: solid;   /* セルの枠線は実線 */
  /*padding: 2px;   /* セル内側の余白は2ピクセル */
}
/* ヘッダセルのデザイン */
table.list thead th {
  /*border-color: #ccffcc #7ca866 #7ca866 #ccffcc;   /* ※1 */
  /*background-color: #A3FFA3;   /* ※1 */
}
table.list tbody th {
  /*border-color: #ffffcc #aca866 #aca866 #ffffcc;   /* ※2 */
  /*background-color: #A3FFA3;   /* ※2 */
}
/* セルのデザイン */
table.list td {
  /*border-color: #ffffff #aca899 #aca899 #ffffff;   /* ※3 */
  /*background-color: #F0FFF0;   /* ※3 */
}
#span1 {
-moz-appearance: textfield;
-webkit-appearance: textfield;
background-color: white;
background-color: -moz-field;
border: 0.5px solid #ABADB3;
border-bottom: 0.5px solid #E3E9EF;
border-right: 0.5px solid #E3E9EF;
font: -moz-field;
font: -webkit-small-control;
padding-left: 5px;
white-space: nowrap;
padding:1.7px;
}

.skew {
/*  background-color:#598CDF;*/
  height: 100%;
  width: 100%;
  max-width: 800px;
  padding: 20px;
  margin: 0 auto;
  overflow-y: auto;
}

h1:not(.top-ttl) {
  /* text-align: center; */
  margin-bottom: 20px;
  padding-left: 20px;
}

h1.top-ttl { text-align: center;}

section {
  border-top: solid 0.5px;
  border-left: solid 0.5px;
  padding-top: 10px;
  padding-left: 10px;
  margin: 3% 0 0 10%;
}
body {
background-image : url(./bg.jpg);
background-size: 100vw 100vh;
background-repeat: no-repeat;
overflow-x: hidden;
/*background: #26558b; /* Old browsers */
/*background: -moz-linear-gradient(45deg,  #00CC00 0%,#00CC33 16%,#00CC33 29%,#00CC66 41%,#00CC66 49%,#00CC99 50%,#00CC99 83%,#cedbe9 100%); /* FF3.6-15 */
/*background: -webkit-linear-gradient(45deg,  #00CC00 0%,#00CC33 16%,#00CC33 29%,#00CC66 41%,#00CC66 49%,#00CC99 50%,#00CC99 83%,#cedbe9 100%); /* Chrome10-25,Safari5.1-6 */
/*background: linear-gradient(45deg,  #00CC00 0%,#00CC33 16%,#00CC33 29%,#00CC66 41%,#00CC66 49%,#00CC99 50%,#00CC99 83%,#cedbe9 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#26558b', endColorstr='#cedbe9',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
	#nav1, #nav1 * {
		font:bold 11px Verdana,sans-serif;
	}
	ul#nav1 {
		list-style:none;
		text-align:center;
		margin:1em 0; padding:0 0 2em 0;
	}
	ul#nav1 li {
		padding:0;
		width:8em;
		float:left;
	}
	ul#nav1 li a {	/* 通常時 */
		margin:0 5px 0 0; padding:5px;
		display:block; 
		border:1px solid #ccc;
		text-decoration:none;
		background:#fff url(/content/img/css/slash_gray.png) repeat left top;
		color:#999; font-weight:bold;
	}
	ul#nav1 li a:hover,
	ul#nav1 li a#current {	/* マウスON時、カレント時 */
		background:#fff url(/content/img/bg_stripe_dark.png) repeat left top;
		color:#fff;
	}
  /*
background-image : url(./ball-ga72a16a9b_1280.jpg);
background-color:rgba(255,255,255,0.8);
background-blend-mode:soft-light;
*/

/* Login */
.signupForm {
  /* display: table; */
  margin: 0 auto;
  padding: 20px 10px;
  border: solid 3px #ffffff;
}

#loginForm .item {
  overflow: hidden;
  margin-bottom: 10px;
}

.top-login legend {
  display: none;
}

.top-login fieldset {
  max-width: 500px;
  display: block;
  padding: 30px 10px 0;
  margin: 0 auto;
}

.signupForm legend {
  display: block;
  font-size: 20px;
  margin-bottom: 20px;
}

#loginForm label {
  display: inline-block;
  padding-right: 20px;
}

#loginForm #userid,
#loginForm #password {
  padding: 5px 10px;
  border: none;
  border-radius: 5px;
}
#loginForm #password { margin-top: 10px;}

#loginForm #userid {
  /* margin-bottom: 20px; */
  background-color: #fff!important;
}

#loginForm #login {
  display: table;
  color: #ffffff;
  width: 100%;
  max-width: 220px;
  margin: 0 auto;
  margin-top: 40px;
  padding: 5px;
  border: none;
  border-radius: 5px;
  background-color: rgb(168, 177, 230);
}

/* num_input */
form[name="form1"] {
  width: 100%;
  margin-bottom: 30px;
}
form[name="form1"] section {
  display: flex;
  align-items: center;
  margin: 0;
  font-size: 18px;
  padding: 10px 20px;
  border: solid 3px #ffffff;
}

form[name="form1"] #number {
  margin-left: 20px;
  padding: 10px;
  font-size: 18px;
  outline: none;
  border: none;
  border-radius: 5px;
  flex-grow: 1;
}

form[name="form1"] input[name="button"] {
  display: table;
  color: #ffffff;
  margin-left: 10px;
  padding: 5px 30px;
  border: none;
  border-radius: 5px;
  background-color: rgb(168, 177, 230);
}

form[name="loginForm"] input[name="username"] ,
form[name="loginForm"] input[name="password"], 
form[name="loginForm"] input[name="password2"] {
    padding: 5px 10px;
    font-size: 18px;
    outline: none;
    border: none;
    border-radius: 5px;
    flex-grow: 1;
}

form#signupForm {
  padding: 10px;
  border: solid 3px #ffffff;
}

form#signupForm legend{
  display: block;
  font-size: 20px;
}
.list {
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
  margin-top: 10px;
}

.list th,
.list td {
  padding: 10px;
  border: solid 1px #dddddd;
}

.list th {
  letter-spacing: 2px;
  color: white;
  background-color: rgb(168, 177, 230);
}

.list td {
  background-color: #ffffff;
}

.list th:nth-of-type(1),
.list td:nth-of-type(1) {
  width: 50px;
}

.list th:nth-of-type(2),
.list td:nth-of-type(2) {
  word-break: break-all;
  width: auto;
  width: 61%;
  /* float: left; */
}

.list th:nth-of-type(3),
.list td:nth-of-type(3) {
  word-break: break-all;
  width: 90px;
  line-height: 140%;
}

.list th:nth-of-type(4),
.list td:nth-of-type(4) {
  word-break: break-all;
  width: 100px;
}
.list th:nth-of-type(5),
.list td:nth-of-type(5) {
  word-break: break-all;
  width: 80px;
}

.list th:nth-of-type(6),
.list td:nth-of-type(6) {
  width: 90px;
}
.list td:nth-of-type(6) input {
  display: table;
  margin: 0 auto;
}
.list th:nth-of-type(7),
.list td:nth-of-type(7) {
  width: 120px;
}
.list td:nth-of-type(7) input {
  display: table;
  margin: 0 auto;
}


form:nth-of-type(2) {
  width: 100%;
}
form:nth-of-type(2) fieldset {
  display: flex;
  align-items: center;
  margin: 0;
  font-size: 18px;
  padding: 10px 20px;
  border: solid 3px #ffffff;
}

input#signUp {
  display: table;
  width: 300px;
  color: #ffffff;
  margin-left: auto;
  padding: 5px 30px;
  margin: 50px auto 20px;
  border: none;
  border-radius: 5px;
  background-color: rgb(168, 177, 230);
}

form:nth-of-type(2) legend {
  display: none;
  margin-left: 10px;
  padding: 10px;
  flex-grow: 1;
}

form:nth-of-type(2) input {
  display: table;
  color: #ffffff;
  margin-left: auto;
  padding: 5px 30px;
  border: none;
  border-radius: 5px;
  background-color: rgb(168, 177, 230);
}

form:nth-of-type(2) input.back { float: left;}

form:nth-of-type(2) fieldset::before {
  content: "ユーザ新規登録フォーム";
  display: inline-block;
}

form:nth-of-type(3) input {
  display: table;
  color: #ffffff;
  width: 100%;
  max-width: 220px;
  margin: 0 auto;
  padding: 10px 0;
  border: none;
  border-radius: 5px;
  background-color: rgb(168, 177, 230);
}

.log-list .btn a {
  display: table;
  color: #ffffff;
  width: 100%;
  max-width: 250px;
  margin: 0 auto;
  padding: 10px;
  border: none;
  border-radius: 5px;
  background-color: rgb(168, 177, 230);
  text-decoration: none;
  font-size: 18px;
  text-align: center;
}

/* 
br {
  display: none;
} */