* {
			box-sizing: border-box;
		}
		html {
			font-size: 62.5%;
			color: #333;
		}
		body {
			margin: 40px 5%;
			font-size: 1.4rem;
			background-color: #2A2A2A;
			color: #fff;
		}
		header { margin: 50px 0; }
		footer { margin-top: 50px; }

		article { margin-bottom: 40px;}
		section { margin-bottom: 60px; }
		.sub { margin-top: 60px; font-size: 1.4rem; }

		h2 {
			margin: 5px 0 40px -15px;
			padding: 4px 0 2px 10px;
			font-size: 2.2rem;
			border-radius: 0 20px 20px 0;
			background: #404040; width: 200px;
		}
		h3 {
			font-size: 1.7rem;
			margin-bottom: 8px;
			border-left: 5px solid #fff;
			padding-left: 10px;
		}
		h4 {
			margin: 10px 0 0 4px;
		}

		a { text-decoration: none; color: #398989; }
		a:hover { color: #BEDFDF; }
		
		.tab_hint { display: flex;}
		pre {
			background: #303030;
			padding: 5px 8px;
			line-height: 1.2;
			font-family: "Josefin Sans", "Kosugi", cursive;
			width: 100px;
			margin-right: 10px;
		}
		del { color: #aaa; }

		.mode { font-size: 1.8rem; font-weight: bold; margin-top: 40px;}
		.sampleLink { font-size: 2rem; font-weight: bold; margin-top: 40px;}

		.upload {
			width: 900px;
			height: 280px;
			margin-top: 30px;
			display:grid;
			grid-template-rows: 226px 54px;
			grid-template-columns: 1fr 1fr;
		    grid-template-areas:
				"form name"
				"form btn";
		}
		.hint       { grid-area: hint; }
		#inputFile	{ grid-area: form;}
		.fileName   { grid-area: name; margin-left: 30px;}
		.convert    { grid-area: btn;  margin-left: 30px;}
		.convertB    { width: 300px;}

		.upload strong { font-size: 1.6rem;}

		.d_option label {
			margin-right:10px;
			line-height: 2;}
		.d_option label:hover {
			color: #004FB7;}
		.edit { margin: 50px 0 20px; border: 1px solid #aaa; padding: 10px 15px; border-radius: 10px;}

		.dataForm { position: relative; }		
		.dataForm input[type='text'] {
			padding: 0.3em;
			width: 250px;
			letter-spacing: 1px;
			border: 1px solid #666;
			border-radius: 4px;
			margin: 5px 0;
		}
		.dl_btn {
			display: block;
			padding: 10px 0;
			margin: 0 0 4px 0;
			background: #42A0B4;
			width: 100%;
			height: 50px;
			color: #FFF;
			text-decoration: none;
			text-align: center;
			border-radius: 4px;
			cursor: pointer;
			font-size: 2rem;
		}
		.copy {
			display: block;
			padding: 2px 0;
			margin: 0 0 4px 0;
			background: #42A0B4;
			width: 100px;
			color: #FFF;
			text-decoration: none;
			text-align: center;
			border-radius: 4px;
			cursor: pointer;
			font-size: 1.3rem;
		}
		#dl_btn:hover, .copy:hover { background: #7CB1B0; }

		.hide { display: none; }

		#diceresult {
			width: 100%;
			font-size: 1.3rem;
		}
		#dice_pclist, #dice_tablist {
		}
		.option {
			display: inline-block;
			border: 1px solid #666;
			padding: 8px 25px 22px 15px;
			border-radius: 4px;
		}
		.option small { text-decoration: underline;}
		.option label  {
			display:flex;
			white-space: nowrap;
			margin-top:12px;
			font-size: 1.4rem;
		}
		.option label p { padding-left:3px; line-height: 1.2;}
		.option label input { margin: 4px 15px auto; }

		table{
			border-collapse: collapse;
			border-spacing: 0;
			margin-bottom: 30px;
			table-layout: fixed;
		}
		th, td{
			padding: 3px 10px;
			border: 1px solid #000;
			table-layout: fixed;
		}
		#analyze_table table { width: 700px; }
		.th_group { width: 90px; }
		.th_name  { width: 200px; }
		.th_edit  { width: auto; }
		.th_color { width: 80px ;white-space:nowrap; }
		.pcr-button {
			border: 2px solid #ccc;
			margin: 2px auto;
		}
		 .pickr { text-align: center; }

		  #tabList input, #nameList input {
		  	height: 30px;
			width: 100%;
			margin: 0;
		  }

		 .sub dl {
		 	width: 700px;
		 	display: flex;
		 	flex-wrap: wrap;
		 	margin-left: 30px;
			border-top: 1px solid #aaa;
		 }
		 .sub dt, .sub dd {
			margin: 0;
			padding: 10px 0;
			border-bottom: 1px solid #aaa;
		 }
		 .sub dt { width: 140px; font-size: 1.2rem; }
		 .sub dd { width: 560px; font-size: 1.2rem; }

		 .darkmode {color:#fff;background:#2C2C2C;} 
		 .darkmode h2 {color: #2C2C2C;}
		 .darkmode pre {background: #333;}
		
		 .no-active {
			display: none;
		}
		 .drop-zone {
			position: relative;
			width: 100%;
			height: 100%;
			margin: 0 auto;
			background-color: #4E4E4E;
			font-size: 1.5rem;
			font-weight: 700;
			text-align: center;    
		}
		 
		 .drop-zone-text {
			 padding: 40px 0px 0;
			 margin: 0;
		 }
		 
		 .overlay {
			 position: absolute;
			 width: 100%;
			 height: 100%;
			 background-color: rgba(0,0,0,.75);
			 opacity: 0.8;
			 z-index: 100;
			 display: flex;
			 justify-content: center;
			 align-items: center;
		 }
		 
		 .overlay-text {
			position: relative;
			margin:0;
			 display: block;

			 color: #F7F7F7;
			 text-align: center;
		 }
		 
		 #file_upload {
			 display: none;
		 }
		 
		 .select-file {
			 display: inline-block;
			 margin: 30px auto;
			 padding: 20px 20px;
			 width: 60%;
			 background-color: #42A0B4;
			 border-radius: 5px;
			 color: #F7F7F7;
			 cursor: pointer;
			 font-weight: 700;
			 z-index: 1;
		 }
		 
		 .select-file::hover {
			 background-color: #136EB6;
		 }


		 .tooltipBlock {
			position: relative;
			display: inline-block;
		}
		p#toolTip {
			display: none;
			position: absolute;
			top: -4px;
			left: 110px;
			width:100%;
			z-index: 1;
			background: #999999;
			padding: 0 12px;
			font-size: 0.9rem;
			font-weight: 600;
			line-height: 1.8;
			animation: fadeIn 0.3s;
			color: #FFF;
			border-radius: 3px;
			text-align: center;
			filter: drop-shadow(0px 1px 2px #aaa);
		}
		
		@keyframes fadeIn {
		  from {opacity: 0;}
		  to {opacity:1 ;}
		}

@media screen and (max-width:960px) {
	body { margin: 40px 20px; }
	.upload { width: 100%; }
	.fileName, .convert { margin: 0 0 0 10px}
}
@media screen and (max-width:810px) {
	body { margin: 30px 2%;}
	.upload { display: block; width: 100%; height:250px}
	#SelectFile  { width:100%; height: 100px;}
	.fileName, .convert { margin: 10px 0 20px;}
	h1 { font-size: 2.3rem;}
	label span { display: block; }
	.sub dl { width: 100%; margin-left: 0; display: block; border: none;}
	.sub dt { border: none; padding: 5px 0 0; }
	.sub dd { width: 100%; padding: 0 0 5px;}
	#analyze_table table { width: 100%;}
	.th_name { width:20%; font-size: 1.2rem;}
	.th_color { padding: 3px; width: 50px;}
	.option { padding-left: 0; padding-right: 10px;}
	.option label { white-space: normal;}
	.option label input { margin: 4px 10px auto; }
}