@charset "utf-8";
body {
	margin: 0;
	padding: 0;
	font-family: 'Noto Sans JP', "Yu Gothic", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
	font-size:100%;
	font-weight: 500;
	line-height:180%;
	color: #222;
	background:#ECF0F1;

}
@media only screen and (max-width:850px){
	body { min-width: 400px; }
}
#wrapper {}
#base { position: relative; left: 0; transition: all .5s;}
i.material-icons { vertical-align: middle;}
.pc {display:block;}
.sm {display:none;}
a:link {color:#06F; outline:none; }
a:visited {color:#06F;}
a:hover {color: #333;}
a:hover img { opacity: 0.7; filter: alpha(opacity=70);}

div, p, ul, ul li, h1, h2, h3, h4, h5, dl, dt, dd {
	margin: 0; padding: 0;
	font-size: 100%;
	font-weight: 500;
	list-style:none;
	box-sizing:border-box;
}
p, ul, ul li, h1, h2, h3, h4, h5, dl, dt, dd,
button,a, span,::before,::after {transition: all .5s;}

div, p, ul, ul li, h1, h2, h3, h4, h5, dl, dt, dd, ol, ol li, table, th, td {
	background-image:url(../img/spacer.gif);
}

iframe { border: none;}
img { border: none; vertical-align:bottom;}


/*==========================================================================
  HEADER
============================================================================*/
#header { position: relative; clear:both; margin:0 2% 20px; padding: 2% 0; width:96%; overflow: hidden; border-bottom: 2px solid #444;}

/* LOGO */
#header h1.logo { float: left; overflow: hidden;}
#header h1.logo .logo_img,
#header h1.logo .logo_txt { float: left;}
#header h1.logo .logo_img img { position: relative; top: 5px; width: 70px; height: auto;}
#header h1.logo .logo_txt { padding-left:20px;}
#header h1.logo .logo_txt span { display: block; padding: 5px 0; font-size:206.3%; color: #444;}
#header h1.logo .logo_txt span a { color: #444; line-height:1.2em;}

/* TIME */
#header .today {
	position: relative; top:10px;
	float: right;
	margin-left: 20px;
	padding:5px 10px;
	text-align: center;
	color: #fff;
	background:rgba(255,255,255,0.28);
	border-radius: 5px;
}
#header .today time { 
	display: block;
	font-family: 'Roboto Mono', monospace;
	font-weight: 400;
	line-height: 100%;
}
#header .today time:nth-child(1) { font-size:130%;}
#header .today time:nth-child(2) { font-size:250%;}

/* NAVIGATION01 */
#header ul.h_nav { 
	position: relative; top:25px;
/*	margin-left: 20px; padding-right: 60px; */
	margin-left: 20px;
	float: right;
}
#header ul.h_nav li { float:left; margin-left: 40px;}
/* #header ul.h_nav a { position: relative; color: #fff; text-decoration: none;} */
#header ul.h_nav a { position: relative; color: #444;}
#header ul.h_nav a:hover { text-decoration:underline;}
#header ul.h_nav a::before {
	display: block; content:""; clear: both;
	position: absolute; top:3px; left:-25px;
	width: 20px; height: 20px;
}
#header ul.h_nav li:nth-child(1) a::before { background: url("../img/icon_sopt_w.svg") no-repeat;}
#header ul.h_nav li:nth-child(2) a::before { background: url("../img/icon_user_w.svg") no-repeat;}

/* NAVIGATION02 */
#navigation {}
#navigation .nav_btn { 
	cursor: pointer;
	position:absolute; top:0; bottom:0; left:0;
	margin: auto; width:60px; height:60px;
	z-index: 9999;
	transition: .3s;
}
#navigation .nav_btn span {
  position: absolute; left: 0;
  width: 100%;  height: 4px;
  background-color: #444;
  border-radius: 20px;
}
#navigation .nav_btn,
#navigation .nav_btn span {
  display: inline-block;
  transition: all .5s;
  box-sizing: border-box;
}
#navigation .nav_btn span { width: 30px;}
#navigation .nav_btn span:nth-of-type(1) { top: 18px;}
#navigation .nav_btn span:nth-of-type(2) { top: 28px;}
#navigation .nav_btn span:nth-of-type(3) { top: 38px;}
#navigation .nav_btn.active {
	position: fixed; top:0; left:150px; bottom: inherit;
	width: 60px; height: 60px;
	background: #eee;
	border-bottom-right-radius: 20px;
	box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.30);
}
#navigation .nav_btn.active span { right: 0; margin: auto; background-color: #222;}
#navigation .nav_btn.active span:nth-of-type(1) { top: 28px;  transform: rotate(45deg);}
#navigation .nav_btn.active span:nth-of-type(2) { opacity: 0; }
#navigation .nav_btn.active span:nth-of-type(3) { top: 28px; transform: rotate(-45deg);}

#header .main_nav { 
	position:fixed; top: 0; left: 0; z-index: 9999;
	width:0; height: 100vh;
	background: #fff;
/*	overflow: hidden; */
	overflow:scroll;
	transition: all .5s;
	box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.30);
}
#header .main_nav li a { 
	display: block;
	padding: 70px 0 30px;
	width: 150px; height: 115px;
	color: #000;
	text-decoration: none;
	text-align: center;
	background-position: center 20px !important;
	background-size: 45px auto !important;
	box-sizing: border-box;
	border-bottom:1px solid #ddd;
}


#header .main_nav li:nth-child(1) a { background: url("../img/icon_home_b.svg") no-repeat;}
#header .main_nav li:nth-child(2) a { background: url("../img/icon_user_b.svg") no-repeat;}
#header .main_nav li:nth-child(3) a { background: url("../img/icon_sopt_b.svg") no-repeat;}
#header .main_nav li:nth-child(4) a { background: url("../img/icon_logout_b.svg") no-repeat;}
#header .main_nav li a:hover { background-color:#eee;}
body.nav_open #header .main_nav { width:150px; }
body.nav_open #base { left:150px; }
@media only screen and (max-width:850px){
	#header h1.logo { float:none;}
	#header h1.logo .logo_img img { top:10px; left:5px; width:40px; height: auto;}
	#header h1.logo .logo_txt span {font-size:130%; line-height:90%; color: #444;}
	#header .today { position:absolute; top:10px; right:2%; float:none;}
	#header .today time:nth-child(1) { font-size:100%;}
	#header .today time:nth-child(2) { font-size:200%;}
	#header ul.h_nav { 
		float:none;
		position: relative; top:0;
		margin:15px 0 0; padding:2% 0 0;
		border-top:2px solid #444;
	}
/*	#navigation .nav_btn { position:absolute; top:30px; right:10px; bottom:inherit;}	 */
	#navigation .nav_btn { position:absolute; top:10px;  bottom:inherit;}	
}

@media only screen and (max-width:720px){
	#header h1.logo .logo_txt {
		max-width:calc(100% - 90px);
	}

}

@media only screen and (max-height:650px){
	#header .main_nav li a { 
		padding: 55px 0 30px;
		height: 95px;
		background-size: 35px auto !important;
	}
}

/*==========================================================================
  CONTENT
============================================================================*/
#content { clear:both; margin:0 2% 2%; width:96%;}


/* INPUT  */
label { margin-right:15px;}
input[type="text"],
input[type="password"],
textarea {
	padding:5px;
	background:rgba(0,0,0,0.10);
/*	border: none; */
	box-sizing:border-box;
	border-radius:5px;

	font-size:100%;
}
textarea { width:100%; height:120px;}
/* select { padding:10px; border:1px solid #EEE; background:#FAFAFA;} */
select { font-size:100%; border:1px solid #EEE; background:#FAFAFA;}
input[type="file"] { display:block; padding:5px; background:#F6F6F6;}


/* BUTTON */
.btn { display: block; border: none;}
.btn a,
button.btn{ 
	display: block;
	margin:2% auto;
	padding:10px 25px;
	font-family: 'Noto Sans JP', "Yu Gothic", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
	font-weight: 500;
	font-size: 112.5%;
	max-width: 300px;
	text-align: center;
	text-decoration:none;
	border-radius: 50px;
	box-shadow:0px 4px 0px 0px rgba(0,0,0,0.10);
}
.btn.btn_w a,
button.btn.btn_w {
	color: #444;
	background: #fff;
	border: 1px solid #ddd;
}
.btn.btn_g a,
button.btn.btn_g {
	color: #fff;
	border: 1px solid #444;
	background:#444;
}
.btn a:hover,
button.btn:hover { 
	color: #444;
	background: #ddd;
	box-shadow:0px 0px 0px 0px;
	border: 1px solid #ddd;
}
.btn_box { margin:2% auto 0; max-width: 600px; overflow: hidden;}
.btn_box .btn { float: left; margin: 2%; width:46%;}

.btn_box2 { margin:2% auto 0; max-width: 1000px; overflow: hidden;}
.btn_box2 .btn { float: left; margin: 2%; width:28%;}


.btn.btn_c{
/*	margin:10px auto; */
	margin:0px auto 10px auto;
}

@media only screen and (max-width:850px){
	.btn_box2 .btn { float: left; margin: 2%; width:46%;}
	.btn_box2 .btn:nth-child(3)  {  width:96%;}

	.btn_box2 .btn a.csvdown { font-size:90%;}

}

#content .plantgraph select,
#content .plantgraph input[type="text"]{
	font-size:130%;

}

/* 2022/07/08 add */
#content .plantgraph input[type="text"]#input_date1,
#content .plantgraph input[type="text"]#input_date2{
	max-width:7em;
}


@media only screen and (max-width:850px){
	#content .plantgraph input[type="text"]{
		width:100%;
	}

	/* 2022/07/08 add */
	#content .plantgraph input[type="text"]#input_date1,
	#content .plantgraph input[type="text"]#input_date2{
		max-width:100%;
	}
}

@media only screen and (max-width:850px){
.sm {display:block;}
.pc {display:none;}
}

/*==========================================================================
  FOOTER
============================================================================*/
#footer { clear:both; width:100%; overflow: hidden;}
#footer .copy { font-size: 70%;}


/*==========================================================================
  COLOR
============================================================================*/
.light-blue { color: #40A6DD;}
.blue { color: #0000FF;}
.dark-blue { color: #000099;}
.purple { color: #660099;}
.pink { color: #FF6699;}
.red { color: #FF0000;}
.orange { color: #FF6600;}
.yellow { color: #FFCC00;}
.white { color: #FFFFFF;}
.gray { color: #666666;}
.brown { color: #663300;}
.green { color: #339900;}
.italic { font-style: italic;}
.strong { font-weight: bold;}
.large { font-size: 115%; line-height: 140%;}
.small { font-size: 80%;}
.underline { text-decoration: underline;}
.line-through { text-decoration: line-through;}
.left { text-align: left;}
.center { text-align: center;}
.right { text-align: right;}