body {
	padding: 0;
	margin: 0;
}


#main {
	padding: 0 10%;
	display: flex;
	justify-content:space-between;
}
#main nav {
	min-width: 15em;
	max-width: 30%;
	padding-right: 2em;
}
#left-pain {
	max-width: 45%;
	padding-right: 2em;
}
footer {
	background: #ccc;
	color:white;
	padding: 1em 10%;
}
header {
	padding: 1em 10%;
	margin-top: 0.5em;
	color: #FFFFFF;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	background-color: #3399FF;

}
header h1 {
	color: white;
	border: none;
	padding: 0;
	background-color: transparent;
	text-shadow: 2px 2px 1px gray;
	border-bottom: 0.1em solid white;
}
header a {
	color:white;
	text-decoration: none;
}

nav#topnav {
	background-color: white;
	color:black;
	display: flex;
	justify-content: space-between;
	width: 100%;
	padding: 0;
}
#topnav a{
	text-decoration: none;
	color:#444;
	display: inline-block;
	padding: 0.7em 1em 0.1em 1em;
}
.corp {
	font-weight: bold;
	font-size: 1.2em;
}


h2 {
	background-color: white;
	border: 0.2em solid #3399ff;
	border-left: 1em solid #3399ff;
	color:black;
	padding: 0.5em;
	border-radius: 5px;
}
h2 a{
	color:black;
}
H3 {
	background: #FFFFFF;
	font-weight: bold;
	border: solid #66CC33 1px;

	text-shadow: 0px 0px 0px #dddddd;
	border-radius:4px;
	padding: 0.5em;
}
h3 a {
	display: block;
	text-decoration: none;
}
nav h3 {
	padding:0.5em;
}
nav h3.link {
	padding:0;
}
nav h3 a {
	display: block;
	padding: 0.5em 1em;
}
nav h3 a:hover {
	background: #669933;
	color:white;
}
nav ul.link {
	padding:0.2em 1em;
}
nav li {
	margin: 0.5em 0;
}

STRONG {
	color: #0000FF;
	font-weight: bold;
}
DIV.text {
	font-size: x-small;
}

UL.menu {
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	margin-left: 1em;
}
TD.left {
	border: solid #E0E0E0 thin;
}
p{
	line-height: 1.5em;
}
P.text {
	padding-left: 2em;
	padding-right: 2em;
}
DIV.swicon {
	
	float: left;
	font-size: x-small;

}
.center {
	text-align: center;
}
DIV.contents {
	width: 90%;
	padding: 0px 0px 0px 0px;
	margin-left: auto;
	margin-right: auto;

}
DIV.navi {
	margin: 0px;
	padding: 10px;
	padding-left: 10px;
	width: 250px;
	float: left;
	
	background: #EFFFDF;
	border: solid #99CC00 1px;
	border-radius:6px;
	margin-bottom: 5px;


}
DIV.main {
	margin-left: 275px;
	padding-left:5px;
	padding-right:5px;
	background-color: #FFFFF7;

}
.clear{
	clear:both;
}
DIV.main ul li {
	margin: 0.5em;
	line-height: 1.2em;
}
table.tbl {
	border-collapse: collapse;
}
table.tbl td,th{
	border: 1px solid gray;
	padding: 5px;
}
table.tbl th{
	background-color: #EAFFEA;
}
table.tbl td{
	background-color: white;
}
ul.soft {
	padding: 0;
}
ul.soft li {
	border: 1px solid gray;
	background-color: #FFFFF0;
	list-style-type: none;
	margin-bottom: 5px;
	margin-right: 2em;
	border-radius: 8px;
	background-color:white;
	box-shadow: 1px 1px 1px 1px gray;
}
ul.soft li a{
	display: block;
	padding: 10px;
	text-decoration: none;
	border-radius: 8px;
	color: #3366FF;
	font-weight: bold;
}
ul.soft li a:hover {
	color:#444;
	background-image:linear-gradient(to bottom,#FFFFee,#FFFFcc);
}
nav ul.menu {
	padding:0;
}
nav ul.menu li {
	list-style-type: none;
	margin-bottom: 5px;

}
nav ul.menu li a{
	border: 1px solid #ccc;
	border-radius: 5px;
	background-color: #F0FFF0;
	display: block;
	padding: 10px;
	text-decoration: none;
}
nav ul.menu li a:hover {
	background-color: #80FF80;

}
nav div.navbox{
	background-color: #ddd;
	border-radius: 5px;
	padding: 0.5em;
	margin: 0.5em 0;
}

.btnlink {
	text-decoration: none;
	display: inline-block;
	padding: 0.5em 2em;
	margin: 5px;
	color:white;
	background-color:#62c462;
	background-image:linear-gradient(to bottom, #62c462, #51a351);
	border-radius: 5px;
	border: 1px solid #ccc;
	box-shadow: 1px 1px 1px 1px gray;
	font-weight: bold;
	text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
}
.btnlink:hover {
	background-color:#51a351;
	background-image:none;
	transition: background-color 1s linear;

}


table.form {
	border-collapse: collapse;
}
table.form td,table.form th {
	border: 1px solid #ccc;
	padding: 0.5em;
}
table.form input[type=text],input[type=email] {
	padding: 0.5em;
	border-radius: 5px;
}
table.form select {
	padding: 0.5em;
	border-radius: 5px;
}
input[type=submit] {
	padding: 1em 2em;
	border-radius: 5px;
	font-weight: bold;
}
textarea {
	padding: 0.5em;
	border-radius: 5px;
	width: calc(100% - 1em);
}


div.mywell {
	background-color: #ddd;
	padding: 1em;
	border-radius: 10px;
	margin: 1em 0;
}
div.mywell p:first-child  {
	margin-top: 0;
}
p.alert {
	padding: 1em;
	border-radius: 10px;
	margin: 1em 0;
}
p.alert-info {
	background-color: #99CCFF;

}
p.alert-sucess {
	background-color: #CCFFCC;
}
p.alert-error {
	background-color: #FF9999;

}
ul.hmenu {
	list-style-type: none;
	overflow: hidden;
	margin: 0 auto;
	padding: 0;
	text-align: center;
}
ul.hmenu li {
	padding: 0 2px;
	text-align: center;
	display: inline-block;
}
ul.hmenu li a{
	display: block;
	color:white;
	text-decoration: none;
	background-color: #3366CC;
	padding:0.2em 1em;
}
.waku{
	width: 90%;
	border: 1px solid #ccc;
	border-radius: 5px;
	padding: 0.5em;
	margin-left: auto;
	margin-right: auto;
	box-shadow: 0.2em 0.2em 0.2em 0.2em gray;
}

img{
	max-width: 100%;
}
.logobox {
	background-color: white;
	padding: 1em 1em 0em 1em;
	margin-right:1em;
	border-radius: 5px;
}
.logobox-r0 {
	background-color: white;
	padding: 1em 0em 0em 1em;
	margin-right:1em;
	border-radius: 5px;
}

div.panel {
	background-color: #DFEFFF;
	border: solid #CCCCFF thin;
	padding: 0.5em;

}
div.panel2 {
	padding: 0.5em;
	background: #FFFAE3;
	border: solid #FFCC99 thin;
	border-radius:5px;
	margin: 0.2em;
	color:black;
}
.dan2 {
  display: grid;
  grid-template-columns: 50% 50%;
}
div.mywell {
	background-color: #ddd;
	padding: 1em;
	border-radius: 10px;
	margin: 1em 0;
}
div.mywell p:first-child  {
	margin-top: 0;
}
.alert {
	padding: 1em;
	border-radius: 10px;
	margin: 1em 0;
	background-color: #99CCFF;
}
.alert-info {
	background-color: #99CCFF;

}
.alert-sucess {
	background-color: #CCFFCC;
}
.alert-error {
	background-color: #FF9999;

}
label.checkbox {
	display: block;
	margin-bottom: 0.3em;
}
input[type="text"],input[type="number"],input[type="checkbox"],select {
	border:1px solid #ccc;
	box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);
	display:inline-block;
	padding: 0.5em;
	margin-bottom: 0.5em;
	color:#555;
	border-radius: 3px;
}

.tbl-form th {
	background-color: #66CCCC;
	border-style: none;
	color:white;
	padding: 0.5em;
}
.tbl-form td {
	padding: 0.5em;
}

@media only all and (max-width: 640px){
	.container {
		padding: 0;
	}
	header {
		padding: 0.5em;
		display: block;
	}
	#main {
		padding: 0 0.2em;
		display: block;
	}
	#main nav {
		display: none;
	}
	#left-pain {
		max-width:100%;
	}
	DIV#centerpain {
		margin: 0 0 0 0;
	}
	textarea {
		max-width: 100%;
	}
	.dan2 {
	  display: block;
	}
}