input[type="file"] { display: none; }
#drag-area {
  width: 300px;
  margin: 10px auto;
  border: 2px dashed #086dd6;
  color:#333;
  font-size: 20px;
  font-weight:bold;
  text-align:center;
  background-color: white;
}
#down-area {
  width: 300px;
  margin: 10px auto;
  border: 2px dashed #086dd6;
  color:#333;
  font-size: 15px;
  text-align:center;
  background-color: white;
  padding:20px 0;
}
#formarea {
  width: 300px;
  margin: 10px auto;
  color:#086dd6;
  font-size: 20px;
  text-align:center;	
}

#logo {
margin:0;
padding: 20px 20px 0px;
text-align:center;
font-size: 30px;
color: #086dd6;
font-weight:bold;
}

#logo img {
  width: 240px;
}

#desc {
	font-size: 0.8rem;
  font-weight: bold;
	text-align:center;
	margin-top: 1px;
	margin-bottom: 20px;
  color: #086dd6;
}

body {
	font-family: 'Noto Sans JP', sans-serif;
	margin:0;
	padding:0;
	text-align:center;
	background-color: #086dd6;
	color: #333;
  background-image: url("../img/bg.jpg"); /* 画像 */
  background-size: cover;               /* 全画面 */
  background-attachment: fixed;         /* 固定 */
  background-position: center center;   /* 縦横中央 */
}
hr {
	border-top: 1px solid #086dd6;
}
#wrapper {
	border-radius: 10px;
	width: 370px;
	border: 1px solid #086dd6;
	text-align:left;
	margin: 20px auto 10px;
	background-color: #f6f6f6;
	box-shadow: 0px 0px 10px rgb(0 0 0 / 50%);
}
#wrapper2 {
	border-radius: 10px;
	width: 800px;
	border: 1px solid #086dd6;
	text-align:left;
	margin: 30px auto 10px;
	background-color: #f6f6f6;
	box-shadow: 0px 0px 10px rgb(0 0 0 / 50%);
}
#bottom {
	padding: 0px 20px 10px;
	text-align:center;
}
#ccc {
  width: 370px;
  margin: 0 auto;
	font-size: 13px;
	color: white;
}
#res {
	width: 320px;
	height: calc( 1.3em * 5 );
	line-height: 1.3;
}
#name {
	float:left;
}

.flt-r {
  float:right;
}

#logout {
	float:right;
}
#list {
	float:right;
  margin-right: 3px;
}

.button {
	font-size: 20px;
	font-weight:bold;
	background-color: #086dd6;
	color: white;
	border: 1px solid #086dd6;
	border-radius: 5%;
	padding: 10px;
}
#page {
	text-align: center;
	font-weight:bold;
	color: #086dd6;
	margin-top: -5px;
}
#txtuserid, #txtuserpwd , #txtuserpwd2 {
    width: 80%; /*親要素いっぱい広げる*/
    padding: 10px 15px; /*ボックスを大きくする*/
    font-size: 16px;
    border-radius: 3px; /*ボックス角の丸み*/
    border: 2px solid #ddd; /*枠線*/
    box-sizing: border-box; /*横幅の解釈をpadding, borderまでとする*/
}

#description {
	font-size: 13px;
	padding: 10px;
	text-align:center;	
}
#ipfilter-area {
	text-align:center;	
}

#downhead {
	padding: 15px;
}

.btn,
a.btn,
button.btn {
  font-size: 1.0rem;
  font-weight: 700;
  line-height: 1.0;
  position: relative;
  display: inline-block;
  padding: 1rem 4rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #212529;
  border-radius: 0.5rem;
}

.prevbtn,
a.prevbtn,
button.prevbtn {
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.0;
  position: relative;
  display: inline-block;
  padding: 0.5rem 1rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #212529;
  border-radius: 0.5rem;
}


.btn--orange,
a.btn--orange {
  color: #fff;
  background-color: #086dd6;
}

.btn--orange:hover,
a.btn--orange:hover {
  color: #fff;
  background: #288df6;
}

a.btn--orange:visited {
  color: white;
}

.btn--green,
a.btn--green {
  color: #fff;
  background-color: #28a745;
}

.btn--green:hover,
a.btn--green:hover {
  color: #fff;
  background: #38c76b;
}

a.btn--green:visited {
  color: white;
}

#customers {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 95%;
  margin: 10px auto;
}

#customers td, #customers th {
  border: 1px solid #ddd;
  padding: 8px;
}
#customers td{
  background-color: white;
}
#customers tr:nth-child(even){background-color: #f2f2f2;}

#customers tr:hover {background-color: #ddd;}

#customers th {
  padding-top: 6px;
  padding-bottom: 6px;
  text-align: left;
  background-color: #086dd6;
  color: white;
}

.menu a:link, a:visited, a:active {
  color: #086dd6;
}

a{
  padding: 0 10px;
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 50%, rgb(49, 170, 226) 50%);
  background-position: 0 0;
  background-size: 200% auto;
  transition: .3s;
  text-decoration: none;
}

a:hover{
  background-position: -100% 0;
  color: #fff;
}

#copyclip {
  margin-bottom: 5px;
}

#tmpurl {
  width: 300px;
  margin: 10px auto;
}

.mtable {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 95%;
  margin: 10px auto;  
}

.mtable td, .mtable th {
  border: 1px solid #ddd;
  padding: 8px;
}
.mtable td{
  background-color: white;
}

.mtable td img{
  width: 300px;
  border: 1px solid black;
}

.mtable th {
  padding-top: 6px;
  padding-bottom: 6px;
  text-align: center;
  background-color: #086dd6;
  color: white;
}

.menu {
  vertical-align: middle;
}
.menu img{
  margin: auto;
  height: 15px;
  vertical-align: middle;
}

    :root{
      --page-bg:#f6f6f6;     /* 要望の背景色 */
      --panel:#f6f6f6;       /* ボックス内のベース */
      --text:#1f2937;        /* 文字色 */
      --muted:#64748b;       /* 補助テキスト */
      --line:#cbd5e1;        /* 枠線 通常 */
      --line-hover:#94a3b8;  /* 枠線 ホバー */
      --focus: rgba(37,99,235,.35); /* フォーカスリング */
      --ok:#16a34a;          /* チェック色（緑） */
      --accent:#2563eb;      /* アクセント（青） */
      --radius:10px;
      --shadow: 0 1px 1px rgba(0,0,0,.04), 0 6px 16px rgba(0,0,0,.06);
    }

.card{ background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:8px; box-shadow:var(--shadow); margin: 3px 45px; }
.row{ display:flex; gap:18px; flex-wrap:wrap; align-items:center; }
/* 視覚的に隠すがスクリーンリーダーでは可視 */
.vh{ position:absolute; inline-size:1px; block-size:1px; margin:-1px; padding:0; border:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
/* フォーカスリングはラッパーに */
.focusable:focus-within{ outline:2px solid var(--focus); outline-offset:3px; border-radius:12px; }
    /* ============ Clean Checkbox（ライト用） ============ */
    .check{ position:relative; padding-left:30px; line-height:1.4; cursor:pointer; user-select:none; display:inline-flex; align-items:center; gap:10px; }

    /* 見た目のボックス */
    .check::before{
      content:""; position:absolute; left:0; top:50%; translate:0 -50%;
      inline-size:20px; block-size:20px; border-radius:6px;
      background: linear-gradient(#ffffff, #f8fafc);
      border:2px solid var(--line);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.6);
      transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
    }
    /* チェックマーク */
    .check::after{
      content:""; position:absolute; left:4px; top:50%; translate:0 -58%;
      inline-size:12px; block-size:7px; border:3px solid transparent;
      border-left-color:var(--ok); border-bottom-color:var(--ok);
      rotate:-45deg; transform-origin:center; scale:0; transition: transform .16s ease;
    }

    /* ホバー時は境界を少し強調 */
    .check.clean:hover::before{ border-color:var(--line-hover); box-shadow: inset 0 0 0 1px rgba(255,255,255,.7), 0 1px 0 rgba(0,0,0,.02); }

    /* チェック時の見た目 */
    input:checked + .check.clean::before{
      border-color: color-mix(in lch, var(--ok) 60%, var(--accent) 40%);
      background: linear-gradient(#ffffff, #eef2ff);
      box-shadow: inset 0 0 0 1px rgba(37,99,235,.15), 0 1px 0 rgba(0,0,0,.02);
    }
    input:checked + .check.clean::after{ scale:1; }

    /* 無効状態（オプション） */
    input:disabled + .check{ cursor:not-allowed; color: color-mix(in lch, var(--muted) 85%, #000 15%); }
    input:disabled + .check::before{ background:#f1f5f9; border-color:#e2e8f0; }

    /* モーションを減らす設定に配慮 */
    @media (prefers-reduced-motion: reduce){
      .check::before, .check::after{ transition:none; }
      .focusable:focus-within{ outline-offset:2px }
    }

    /* サンプルの補助 */
    .hint{ color:var(--muted); font-size:13px; margin-top:10px }