@charset "utf-8";

/*
	共通
*/
:root {
  --button-color: #FFCC66;
	--header-bg-color: #FF9933;
	
	--menu-forecast: rgb(66, 154, 221);
	--menu-forecast-hover: rgb(66, 154, 221);
	--menu-forecast-child: rgb(66, 154, 221);
	
	--menu-forecast-child-hover: rgb(66, 114, 221);
	--menu-forecast-childchild: rgb(66, 114, 221);
	
	--menu-forecast-childchild-hover: rgb(66, 114, 181);
	
	--menu-analysis: rgb(28, 184, 65);
	--menu-analysis-hover: rgb(28, 184, 65);
	--menu-analysis-child: rgb(28, 184, 65);
	--menu-analysis-child-hover: rgb(28, 154, 65);

	--menu-month: rgb(204, 204, 204);
	--menu-month-hover: rgb(242, 237, 237);
	--menu-month-child: rgb(242, 237, 237);
	--menu-month-child-hover: rgb(255, 252, 252);
	
	--menu-year: rgb(219, 213, 213);
	--menu-year-hover: rgb(242, 237, 237);
	--menu-year-child: rgb(242, 237, 237);
	--menu-year-child-hover: rgb(255, 252, 252);
	
	--green-color: rgb(28, 184, 65);
	--maroon-color: rgb(202, 60, 60);
	--orange-color: rgb(223, 117, 20);
	--blue-color: rgb(66, 184, 221);
	--black-color: rgb(51, 51, 51);
}

/*
	Login
*/
#top_header {
	background-image: url(../images/projectLogo.png), url(../images/companyLogo.png);
	background-position: left top, right top;
	background-repeat: no-repeat, no-repeat;
	background-size: contain, contain;
	height: 50px;
	margin: 10px 0;
	padding: 1px;
}

#alert, #alert_1, #alert_2 {
	color: var(--maroon-color);
}
#prompt {
	color: var(--black-color);
}

/*
	ローディング
*/
.hide {
	display: none;
}

#loading{
	position:fixed;
	top:0;
	right:0;
	bottom:0;
	left:0;
	background:rgba(0,0,0,.5);
}
#loading::before{
	content:"";
	display:block;
	position:fixed;
	left:50%;
	top:50%;
	width:50px;
	height:50px;
	border-radius:5px;
	margin-top:-15px;
	margin-left:-15px;
	background:white;
}

.loading_icon {
	content:"";
	display:block;
	position:fixed;
	left:50%;
	top:50%;
	width:32px;
	height:32px;
	border-radius:20px;
	margin-top:-10px;
	margin-left:-10px;
	border:4px solid #60ABB9;
	border-right:4px solid white;

	animation: rotate 1s infinite linear;
}
@keyframes rotate {
	0%    { transform: rotate(0deg); }
	100%  { transform: rotate(360deg); }
}

/*
	ボタン
*/
input[type="button"], input[type="submit"], button {
	font-weight: normal;
	width:200px;
	padding: 5px 0;
	margin:0.5em 0.5em 0 0;
	border-style:none;
	
	color: #000;
	background: #FFCC66;	/*#FFCC66*/
	-webkit-appearance: none;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-moz-box-shadow: 1px 1px 2px 0px #666;
	-webkit-box-shadow: 1px 1px 2px 0px #666;
	box-shadow: 1px 1px 2px 0px #666;
}

button#logout, button#downloadPdf, button#manager, button#totop {
	width: 120px;
	height: 46px;
	margin:0em 0.5em 0.5em 0;
	
	-moz-box-shadow: 0px 0px 0px 0px #fff;
	-webkit-box-shadow: 0px 0px 0px 0px #fff;
	box-shadow: 0px 0px 0px 0px #fff;
}

input[type="button"]:hover, input[type="submit"]:hover, button:hover {
	background-color: #FFFF99;
}

input[type="button"]#linebreak, button#totop {
	display: block;
}

/*
	入力フィールド
*/
#login_area input[type=password], #login_area input[type=text], #login_area input[type=email], #login_area input[type=date], #login_area input[type=tel], #login_area input[type=number] {
	width:200px;
	padding: 5px 0;
	margin:0.5em 0.5em 1em 0;
	display:block;
}

#registration_area input[type=password], #registration_area input[type=text], #registration_area input[type=email], #registration_area input[type=date], #registration_area input[type=tel], #registration_area input[type=number] {
	width:200px;
	padding: 5px 0;
	margin:0.5em 0.5em 1em 0;
	display:block;
}


#registration_area select {
	width:200px;
	padding: 5px 0;
	margin:0.5em 0.5em 1em 0;
	display:block;
}

#registration_area button {
	display:block;
}

#analysis_malaria_model_contents input[type=number] {
	width: 5em;
}

/*
	基本
*/
#base {
	margin: 0em 2em 2em 2em;
}

body {
	margin: 0px;
	padding: 0px;
	background-color: #EEEEEE;
	font-family: "Meiryo", "MS PGothic", Sans-Serif;
}

h2 {
	margin: 0em 0em;
	padding: 0em 0em;
	
	height: 50px;
  border-bottom: 3px solid #FF9933;

  line-height: 50px;
  font-size: 16px;
  text-align: center;
  display: block;
  text-align: center;
  font-weight: bold;
  transition: all 0.2s ease;
  background-color: #FF9933;

  color: #fff;
}

table {
	width: 100%;
}
table td {
	padding: 0.5em;
	vertical-align: top;
}

table th {
	padding: 0.5em;
	background-color: #CCCCCC;
}

/*
	Manager
*/
table, table th, table td {
	border-collapse: collapse;
	border: 1px solid #ccc;
	line-height: 1.5;
}
table#userTable th {
	width: 350px;
	font-weight: bold;
	vertical-align: top;
	background: #3f3f3f;
	color: #ffffff;
}
table#userTable td {
	width: 350px;
	vertical-align: top;
}
table tr:nth-child(even) {
	background: #d9d9d9;
}


div {
	margin-bottom: 1em;
}

#initial_contents {
}

/*
	Forecast
*/
#forecast_contents {
}
#forecast_contents #recentImages {
	margin: 1em 0em 1em 0em;
	width: 900px;
}

#forecast_type, #analysis_type {
  list-style-type: none;
  width: 960px;
  padding: 0;
}
#forecast_type li, #analysis_type li {
  position: relative;
  width: 20%;
  float: left;
  margin: 0;

  padding: 0;
  text-align: center;
}
#forecast_type li a, #analysis_type li a {
  display: block;
  margin: 0;
  padding: 16px 0;
  background: var(--menu-forecast); /*#8a9b0f;*/
  color: #333;
	
  font-size: 14px;
  font-weight: bold;
  line-height: 1;
  text-decoration: none;
}
#analysis_type li a {
  background: var(--menu-analysis);
}

#forecast_type li ul, #analysis_type li ul {
  list-style: none;
  position: absolute;
  z-index: 100;
  top: 100%;
  left: 0;
  width: 100%;
  margin: 0;
  padding: 0;
}
#forecast_type li ul li, #analysis_type li ul li {
  overflow: hidden;
  width: 100%;
  height: 0;
  color: #333;
  transition: .2s;
}
#forecast_type li ul li a, #analysis_type li ul li a {
  padding: 13px 15px;
  background: var(--menu-forecast-child); /*#7c8c0e;*/
  text-align: left;
  font-size: 12px;
  font-weight: normal;
}
#analysis_type li ul li a {
  background: var(--menu-analysis-child);
}

#forecast_type > li:hover > a {  background: var(--menu-forecast-hover) } /*#7c8c0e*/
#forecast_type > li:hover li:hover > a {  background: var(--menu-forecast-child-hover) } /*#6e7c0c*/
#analysis_type > li:hover > a {  background: var(--menu-analysis-hover) } /*#7c8c0e*/
#analysis_type > li:hover li:hover > a {  background: var(--menu-analysis-child-hover) } /*#6e7c0c*/

#forecast_type li:hover > ul > li, #analysis_type li:hover > ul > li {
  overflow: visible;
  height: 38px;
}
#forecast_type li ul li ul, #analysis_type li ul li ul {
  top: 0;
  left: 100%;
}
#forecast_type li ul li ul li a, #analysis_type li ul li ul li a {  background: var(--menu-forecast-childchild) } /*#616d0b*/
#forecast_type li:hover ul li ul li:hover > a, #analysis_type li:hover ul li ul li:hover > a {  background: var(--menu-forecast-childchild-hover) } /*#535d09*/

.right_menu {
	float: right;
	width: 200px;
}
#nav:after, .right_menu:after {
	content: "";
	display: block;
	clear: both;
}

#comments {
	text-align: center;
}
#initial_comments {
	text-align: left;
}
#recentText {
	margin:2px; padding:0; width:100%; height:280px; border:solid 1px #999999; background-color:#eeeeee;
}


/*
	Analysis
	data
*/
#analysis_contents > div, #analysis_malaria_model_contents > div {
	float: left;
	margin: 1em 2em 1em 0em;
}
#analysis_contents > div:first-child, #analysis_malaria_model_contents > div:first-child {
	margin: 1em 2em 1em 2em;
}
#analysis_contents > div.linebreak:after, #analysis_malaria_model_contents > div.linebreak:after {
	content: "";
	display: block;
	clear: both;
}
#analysis_contents #alert {
	width: 100%;
	margin: 1em 0em 1em 0em;
}
#analysis_contents #alert p {
	text-align: center;
}
#analysis_contents #seasonal_option {
	display: none;
}
#analysis_contents #recentImages {
	margin: 1em 0em 1em 0em;
}
#recentImages img {
	width: 94vw;
}


/*
	Analysis
	malaria_model
*/
#analysis_malaria_model_contents #malaria_model_alert {
	color: var(--maroon-color);
	width: 100%;
	margin: 1em 0em 1em 0em;
}
#analysis_malaria_model_contents #malaria_model_alert p {
	text-align: center;
}