@charset "UTF-8";

html {
  font-size: 20px;
  letter-spacing: 0.025rem;
}
a {transition: all 0.125s ease-out;}
a:hover {text-decoration: none;}
body {
  font-family: Arial, Helvetica, 'メイリオ', 'Meiryo', sans-serif;
  min-height: 100vh;
}
body.user {
  background: #f5f4f3;
  width: 100%;
}
body.admin {
  background: #EEE;
}
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #3b8cc7;
  color: #FFF;
  min-height: 3rem;
}
header .headerLeft {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
header .headerLeft a.home {
  display: flex;
  justify-content: center;
  align-items: center;
  background:#296b9a;
  width: 3rem;
  height: 3rem;
  color: #FFF;
  font-size: 1.35rem;
}
header .headerLeft a.home:hover {
  background: #0a5286;
}
header .headerLeft h1 {
  font-size: 1.25rem;
  padding: 0 1rem;
}
header .headerLeft .userId {
  opacity: 0.8;
  font-size: 0.95rem;
  padding: 0 1rem;
}
header .headerRight {
  padding: 0 0.75rem;
}

/*////////////////////////////////////////////////////////////////
login / top
////////////////////////////////////////////////////////////////*/

body.user.login ,
body.user.top {
  background-image: url(/images/login_bg.png);
}
.login .container-fluid,
.top .container-fluid {
  height: calc(100vh - 3.5rem - 6rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.loginBox {
  display: block;
  width: 42rem;
  padding: 2rem 1rem;
  background: #FFF;
  box-shadow: 0 0 2rem rgba(0,0,0,.2);
  border-radius: 0.15rem;
}
.loginBox .logoArea {
  display: flex;
  justify-content: space-around;
  align-items: baseline;
  margin-bottom: 2rem;
}
.loginBox .logoArea .logo_digitalhokkaido {
  width: 216px;
  height: 67px;
}
.loginBox .logoArea .logo_arc {
  width: 240px;
  height: 63px;
}
.loginBox .textArea h4 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 1rem;
  text-align: center;
}
.loginBox .textArea p {
  margin-bottom: 1rem;
  text-align: center;
}
.loginBox .inputArea {
  width: 20rem;
  margin: 0 auto;
}
.login footer,
.top footer {
  height: 6rem;
  background: rgba(255,255,255,.6);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 90%;
}
.login footer .inner,
.top footer .inner {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 42rem;
  font-size: 80%;
}
.login footer .inner .logo_jaxa,
.top footer .inner .logo_jaxa {
  width: 120px;
  height: 72px;
  display: block;
  margin: 1.5rem;
}
.main_container {
  display: flex;
  padding: 0.75rem 0;
}

/*////////////////////////////////////////////////////////////////
panels
////////////////////////////////////////////////////////////////*/

.panels {
  width: auto;
  min-width: 320px;
  max-width: 360px;
  margin-right: 0.75rem;
}
.panel {
  margin-bottom: 0.75rem;
  box-shadow: 0 0.25rem 0.5rem rgba(204,217,222,.3);
}
.panel .panel-header {
  background: #cddceb;
  color: rgba(0,0,0,.75);
  padding: 0.5rem 0.75rem;
  border-radius: 0.25rem 0.25rem 0 0;
}
.panel .panel-body {
  background: #FFF;
  padding: 0.75rem;
}
.panel .panel-body h4 {
  margin: 0.5rem auto;
  font-size: 0.95rem;
}
.panel .panel-body .box {
  background: rgba(0,0,0,.8);
  border-radius: 0.25rem;
  text-align: center;
  font-size: 0.9rem;
  padding: 0.5rem;
  margin: 0 0 0.25rem;
}
.panel .panel-body .location {
  margin: 0 0 1rem;
}
.panel .panel-body .location .box .coordinate {
  display: flex;
	align-items: baseline;
	justify-content: space-between;
}
.panel .panel-body .location .box strong {
  font-size: 1.45rem;
  display: inline-block;
  margin: 0 0.15rem;
}
.panel .panel-body .location.ship i.fas,
.panel .panel-body .location.ship .box strong {
  color: #D9534F;
}
.panel .panel-body .location.cursor i.fas,
.panel .panel-body .location.cursor .box strong {
  color: #5CB85C;
}
.panel .panel-body .magnification {
  margin: 0 0 1rem;
  display: flex;
  justify-content: space-between;
}
.panel .panel-body .magnification .rate {
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  background: #f5eeda;
  font-size: 1.35rem;
}
.panel .panel-body .notice {
  margin: 0 auto 1rem;
}
.panel .panel-body .notice .form-control {
  background: #f5eeda;
  border: #f5eeda;
  color: #222;
  font-size: 0.775rem;
  height: 10.25rem;
}


/*////////////////////////////////////////////////////////////////
mapPanels
////////////////////////////////////////////////////////////////*/

.mapPanels {
  flex-grow: 1;
  display: flex;
}
.mapPanel {
  position: relative;
  margin: 0 0.75rem 0 0;
  min-width: 1280px;
}
.mapPanel-header {
  background: #cddceb;
  color: #222;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0.75rem;
}
.mapPanel-header h3 {
  font-size: 1.125rem;
  position: relative;
  margin-left: 2.5rem;
}
.mapPanel-header h3 i.fas {
  opacity: 0.5;
}
.mapPanel-header h3::before {
  display: flex;
	justify-content: center;
	align-items: center;
  width: 2rem;
  height: 2rem;
  position: absolute;
  top: calc(50% - 1rem);
  left: -2.5rem;
  border-radius: 100%;
  color: #FFF;
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
}
.mapPanel-header h3.release::before {
  content: "\f578";
  background: #ec6a4a;
}
.mapPanel-header h3.ocean::before {
  content: "\f773";
  background: #56C0E0;
}
.mapPanel-header h3.satellite::before {
  content: "\f7bf";
  background: #1C7CD5;
}
.mapPanel-header h3.waveHeight::before {
  content: "\f773";
  background: #5CB85C;
}
.mapPanel-header h3.windSpeed::before {
  content: "\f72e";
  background: #5CB85C;
}
.mapPanel-header .btnArea {
  display: flex;
}
.mapPanel .dropdown-item:focus,
.mapPanel .dropdown-item:hover {
  background-color: #007bff;
  color: #FFF;
}

.mapPanel-body {
  background: #FFF;
  padding-bottom: 1rem;
  box-shadow: 0 0.25rem 0.5rem rgba(204,217,222,.3);
}
.mapPanel-body .mapControl {
  display: flex;
  align-items: center;
  padding: 0.75rem 0;
}
.mapPanel-body .mapWrapper {
  display: flex;
}
.mapPanel-body .mapArea {
  width: 992px;
  height: 802px;
  background: url(/images/mapbg.png);
  border: solid 1px rgba(0,0,0,.3);
  margin: 0 0 0 1rem;
  position: relative;
  overflow: hidden;
}
.map1x {
	width: 990px;
	height: 800px;
	position: absolute;
}
.map2x {
	width: 1980px;
	height: 1600px;
	position: absolute;
}
.map3x {
	width: 2970px;
	height: 2400px;
	position: absolute;
}
.map4x {
	width: 3960px;
	height: 3200px;
	position: absolute;
}
.mapArea > div > div {
  width: 100%;
  height: 100%;
  position: absolute;
}
.mapArea > div > div > img {
  width: 100%;
  height: 100%;
}

.mapGrid .latitudeLine > div {
	width: 100%;
	height: 0;
  position: absolute;
}
.mapGrid .latitudeLine .solid {
  border-top: solid 1px rgba(119, 119, 119, 0.7);
}
.mapGrid .latitudeLine .dashed {
  border-top: dashed 1px rgba(119, 119, 119, 0.7);
}
.mapGrid .longitudeLine > div {
	width: 0;
	height: 100%;
  position: absolute;
}
.mapGrid .longitudeLine .solid {
  border-left: solid 1px rgba(119, 119, 119, 0.7);
}
.mapGrid .longitudeLine .dashed {
  border-left: dashed 1px rgba(119, 119, 119, 0.7);
}
.mapGrid .longitudeLine span,
.mapGrid .latitudeLine span {
  text-shadow: 
  1px 1px 0 rgba(255,255,255,0.8),
  1px -1px 0 rgba(255,255,255,0.8),
  -1px 1px 0 rgba(255,255,255,0.8),
  -1px -1px 0 rgba(255,255,255,0.8);
}

.cursorPosition {
	position: absolute;
  display: block;
  width: 54px;
  height: 54px;
}
.cursorPosition img {
	position: absolute;
  display: block;
  width: 54px;
  height: 54px;
  top: -27px;
  left: -27px;
}
.riverPosition {
	position: absolute;
  display: block;
  width: 20px;
  height: 20px;
}
.riverPosition img {
	position: absolute;
  display: block;
  width: 20px;
  height: 20px;
  top: -10px;
  left: -10px;
}

.mapPanel-menu {
  display: none;
  width: 100%;
  height: 949px;
  background: #FFF;
  border-radius: 0.25rem 0.25rem 0 0;
  position: absolute;
  top: 0;
  z-index: 20;
}
.mapPanel-menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: solid 1px rgba(0,0,0,.3);
}
.mapPanel-menu-header h3 {
  padding: 1rem;
  font-size: 1.25rem;
}
.mapPanel-menu-nav {
  height: calc(100% - 57px);
}
.mapPanel-menu-nav .first-menu {
  display: flex;
  flex-direction: column;
  width: 25%;
  height: 100%;
  position: relative;
  border-right: solid 1px rgba(0,0,0,.3);
}
.mapPanel-menu-nav .first-menu > li,
.mapPanel-menu-nav .second-menu > li,
.mapPanel-menu-nav .third-menu > li {
  border-bottom: solid 1px rgba(0,0,0,.3);
  transition: all 0.125s ease-out;
}
.mapPanel-menu-nav .first-menu > li span,
.mapPanel-menu-nav .second-menu > li span,
.mapPanel-menu-nav .third-menu > li span,
.mapPanel-menu-nav .first-menu li:hover > .second-menu span,
.mapPanel-menu-nav .second-menu li:hover > .third-menu span {
  color: #212529;
}
.mapPanel-menu-nav .first-menu > li:hover,
.mapPanel-menu-nav .second-menu > li:hover,
.mapPanel-menu-nav .third-menu > li:hover {
  background: #1C7CD5;
  cursor: pointer;
}
.mapPanel-menu-nav .first-menu > li:hover span,
.mapPanel-menu-nav .second-menu > li:hover span,
.mapPanel-menu-nav .third-menu > li:hover span,
.mapPanel-menu-nav .first-menu li > .second-menu li:hover span {
  color: #FFF;
}
.mapPanel-menu-nav .first-menu li:hover > .second-menu,
.mapPanel-menu-nav .second-menu li:hover > .third-menu {
  display: flex;
}
.mapPanel-menu-nav .second-menu {
  display: none;
  flex-direction: column;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 100%;
  border-right: solid 1px rgba(0,0,0,.3);
}
.mapPanel-menu-nav .third-menu {
  display: none;
  flex-direction: column;
  width: 200%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 100%;
}
.mapPanel-menu-nav .first-menu > li span,
.mapPanel-menu-nav .second-menu > li span,
.mapPanel-menu-nav .third-menu > li span,
.mapPanel-menu-nav li a {
  display: block;
  color: #212529;
  padding: 0.75rem 1rem;
}
.mapPanel-menu-nav li a:hover {
  color: #FFF;
}
.mapPanel-menu-nav li span,
.mapPanel-menu-nav li a {
  position: relative;
}
.mapPanel-menu-nav li span::after,
.mapPanel-menu-nav li a::after {
	display: inline-block;
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	position: absolute;
	top: calc(50% - 0.75rem);
  right: 0.5rem;
  opacity: 0.6;
}
.mapPanel-menu-nav li span::after {
	content: "\f0da";
}
.mapPanel-menu-nav li a::after {
	content: "\f2f1";
}
.mordal-bg {
	display: none;
	width: 100%;
	height: 100%;
	background: rgba(64,64,64,.75);
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10;
}

.mapRight {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.colorBar {
  display: flex;
  align-items: flex-end;
  margin: 0 0.5rem;
}

.ensoIndexModal .modal-dialog {
  max-width: calc(800px + 2rem + 2px);
}
.dailyReportModal .modal-dialog {
  max-width: calc(960px + 2rem + 2px);
}
.dailyReportModal .modal-dialog embed {
  height: 760px;
}

.figPanel {
  position: absolute;
  top: 0;
  left: 0;
}
.figPanel .modal-dialog {
  position: absolute;
  top: 11rem;
  left: calc(18.5rem + 490px);
  max-width: 490px;
  margin: 0;
  z-index: 1;
}
.figPanel .modal-dialog img {
  width: 100%;
}
.figPanel .modal-dialog img.expand {
  cursor: zoom-in;
}
.figPanel .exImgase .modal-dialog img {
  cursor: default;
}
.figPanel .crossSectionLine,
.figPanel .buoyPoint {
  position: absolute;
  width: 990px;
  height: 800px;
  top: 10.5rem;
  left: 18.5rem;
}
.figPanel .crossSectionLine svg {
  filter: drop-shadow(0 0 20px #000);
}
.figPanel .buoyPoint span {
  display: block;
  width: 54px;
  height: 54px;
  position: absolute;
  background: url(/images/buoyPoint.png) no-repeat;
  background-size: cover;
  transform: translateX(-27px) translateY(-27px);
}
.modal-backdrop {
  background-color: #666;
}
.modal-backdrop.show {
  opacity: .2;
}
.exImgase .modal-dialog {
  max-width: 960px;
}

.drop-hover:hover > .dropdown-menu {
  display: block !important;
  margin-left: 0;
  margin-top: -0.5rem;
}


/*////////////////////////////////////////////////////////////////
release
////////////////////////////////////////////////////////////////*/

.releaseSimulatorModal .modal-dialog {
  max-width: 960px;
}
.releaseSimulatorModal .releaseInputTable {
  height: 500px;
  overflow-y: auto;
}
.releaseSimulatorModal .releaseInputHead th:nth-child(1),
.releaseSimulatorModal .releaseInputTable td:nth-child(1) {
  width: 15%;
}
.releaseSimulatorModal .releaseInputHead th:nth-child(2),
.releaseSimulatorModal .releaseInputTable td:nth-child(2) {
  width: 25%;
}
.releaseSimulatorModal .releaseInputHead th:nth-child(3),
.releaseSimulatorModal .releaseInputTable td:nth-child(3) {
  width: 30%;
}
.releaseSimulatorModal .releaseInputHead th:nth-child(4),
.releaseSimulatorModal .releaseInputTable td:nth-child(4) {
  width: 30%;
}
.releaseSimulationResultModal .loading {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
}



/*////////////////////////////////////////////////////////////////
glaphPanels
////////////////////////////////////////////////////////////////*/

.glaphPanels {
  display: flex;
  flex-direction: column;
}
.glaphPanel {
  width: calc(1000px + 2rem);
  position: relative;
  margin: 0 0.75rem 0 0;
}
.glaphPanel-header {
  background: #ECEEEF;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem;
}
.glaphPanel-header h3 {
  font-size: 1.125rem;
  position: relative;
  margin-left: 2.5rem;
}
.glaphPanel-header h3 i.fas {
  opacity: 0.5;
}
.glaphPanel-header h3::before {
  display: flex;
	justify-content: center;
	align-items: center;
  width: 2rem;
  height: 2rem;
  position: absolute;
  top: calc(50% - 1rem);
  left: -2.5rem;
  border-radius: 100%;
  color: #FFF;
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
}
.glaphPanel-header h3.waveHeight::before {
  content: "\f773";
  background: #5CB85C;
}
.glaphPanel-header h3.windSpeed::before {
  content: "\f72e";
  background: #5CB85C;
}
.glaphPanel-body {
  background: #FFF;
  padding: 1rem;
  margin-bottom: 0.75rem;
}
.rightPanel {
  width: auto;
}
.miniMap {
  width: 504px;
  height: 576px;
  position: relative;
}
.miniMap .mapImage,
.miniMap .mapImage img {
  width: 100%;
  height: 100%;
}
.miniMap .cursorPosition {
  position: absolute;
}


/*////////////////////////////////////////////////////////////////
admin
////////////////////////////////////////////////////////////////*/
.admin .container-fluid .tableArea table th,
.admin .container-fluid .tableArea table td {
  vertical-align: middle;
}