@charset "UTF-8";

html {
  font-size: 16px;
  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: #55595C;
  width: 100%;
  min-width: 1880px;
}
body.admin {
  background: #EEE;
}
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #000;
  color: #FFF;
  min-height: 3.5rem;
}
header .headerLeft {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
header .headerLeft a.home {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #373A3C;
  width: 3.5rem;
  height: 3.5rem;
  color: #FFF;
  font-size: 1.35rem;
}
header .headerLeft a.home:hover {
  background: #55595C;
}
header .headerLeft h1 {
  font-size: 1.125rem;
  padding: 0 1rem;
  min-width: 14.5rem;
}
header .headerLeft .userId {
  font-size: 1.125rem;
	padding: 0 1rem;
	height: 3.5rem;
	line-height: 3.5rem;
	color: #d4d4d4;
	border-left: solid 1px rgba(255,255,255,.3);
}
header .headerRight {
  padding: 0 0.75rem;
}
.errorMessage {
  margin-top: .25rem;
  font-size: 80%;
  color: #dc3545;
  margin-bottom: 0.5rem;
}

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

.login .container-fluid,
.top .container-fluid {
  height: calc(100vh - 3.5rem - 8rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.loginBox {
  display: block;
  width: 36rem;
  padding: 3rem;
  background: #FFF;
  box-shadow: 0 0 2rem rgba(0,0,0,.2);
  border-radius: 0.15rem;
}
.loginBox .logoArea {
  display: flex;
  justify-content: center;
  margin-bottom: 2rem;
}
.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: 8rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.main_container {
  display: flex;
  padding: 0.75rem 0;
}

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

.panels {
  /*width: 270px !important;*/
  min-width: 260px;
  max-width: 280px;
  margin-right: 0.75rem;
}
.panel {
  margin-bottom: 0.75rem;
}
.panel .panel-header {
  background: #000;
  color: rgba(255,255,255,.75);
  padding: 0.5rem 0.75rem;
  border-radius: 0.25rem 0.25rem 0 0;
}
.panel .panel-body {
  background: #373A3C;
  color: #FFF;
  padding: 0.75rem;
}
.panel .panel-body h4 {
  margin: 0.5rem auto;
  font-size: 0.85rem;
}
.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.35rem;
  display: inline-block;
  margin: 0 0.15rem;
}
.panel .panel-body .location.ship h4 i.fas,
.panel .panel-body .location.ship .box strong {
  color: #D9534F;
}
.panel .panel-body .location.cursor h4 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: #000;
  font-size: 1.35rem;
}
.panel .panel-body .btn {white-space: nowrap;}
.panel .panel-body .notice {
  margin: 0 auto 1rem;
}
.panel .panel-body .notice .form-control {
  background: #000;
  border: #000;
  color: #FFF;
  font-size: 0.775rem;
  height: 7.5rem;
}
.panel .alertMessage {
	display: block;
	font-size: 0.8rem;
	color: #ffd27d;
	margin: 0.75rem 0;
}


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

.mapPanels {
  flex-grow: 1;
  display: flex;
}
.mapPanel {
  width: 780px;
  position: relative;
  margin: 0 0.75rem 0 0;
}
.mapPanel-header {
  background: #ECEEEF;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem;
}
.mapPanel-header h3 {
  font-size: 1.0rem;
  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.fishery::before {
  content: "\f578";
  background: #D9534F;
}
.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-body {
  background: #FFF;
  padding-bottom: 2rem;
}
.mapPanel-body .mapControl {
  display: flex;
  align-items: center;
  padding: 0.75rem 0;
}
.mapPanel-body .mapArea {
  width: 702px;
  height: 802px;
  background: url(/images/mapbg.png);
  border: solid 1px rgba(0,0,0,.3);
  margin: 0 1rem;
  position: relative;
  overflow: hidden;
}
.map1x {
	width: 700px;
	height: 800px;
	position: absolute;
}
.map2x {
	width: 1400px;
	height: 1600px;
	position: absolute;
}
.map3x {
	width: 2100px;
	height: 2400px;
	position: absolute;
}
.map4x {
	width: 2800px;
	height: 3200px;
	position: absolute;
}
.map5x {
	width: 3500px;
	height: 4000px;
	position: absolute;
}
.map6x {
	width: 4200px;
	height: 4800px;
	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);
}

.colorBar {
	position: absolute;
  right: 0.75rem;
	bottom: 2.75rem;
}
.legendBar {
  position: absolute;
  right: 0.75rem;
  bottom: calc(3.75rem + 300px);
}
.shipPosition {
	position: absolute;
  display: block;
  width: 40px;
  height: 48px;
}
.shipPosition img {
	position: absolute;
  display: block;
  width: 40px;
  height: 48px;
  top: -24px;
  left: -20px;
}
.cursorPosition {
	position: absolute;
  display: block;
  width: 54px;
  height: 54px;
}
.cursorPosition img {
	position: absolute;
  display: block;
  width: 54px;
  height: 54px;
  top: -27px;
  left: -27px;
}
.harborPosition {
	position: absolute;
  display: block;
  width: 0px;
  height: 0px;
}
.harborPosition img {
	position: absolute;
  display: block;
  width: 48px;
  height: 48px;
  top: -24px;
  left: -24px;
}
.harborPosition .harborName {
  background: rgba(0,0,0,.8);
  padding: 0.125rem 0.5rem;
  border-radius: 0.25rem;
  color: #EEE;
  font-size: 0.75rem;
  text-align: center;
  position: absolute;
  white-space: nowrap;
}
.harborPosition .harborName::after {
  display: block;
  content: "";
  position: absolute;
  width: 0px;
  height: 0px;
}
.harborPosition .ptop,
.harborPosition .pright,
.harborPosition .pbottom,
.harborPosition .pleft {
  position: relative;
  display: flex;
  justify-content: center;
}
.harborPosition .ptop .harborName {
  top: -46px;
}
.harborPosition .ptop .harborName::after {
  border-top: solid 8px rgba(0,0,0,.8);
  border-right: solid 8px transparent;
  border-bottom: solid 0px transparent;
  border-left: solid 8px transparent;
  left: calc(50% - 8px);
  bottom: -8px;
}
.harborPosition .pright .harborName {
  top: -12px;
  left: 25px;
}
.harborPosition .pright .harborName::after {
  border-top: solid 8px transparent;
  border-right: solid 8px rgba(0,0,0,.8);
  border-bottom: solid 8px transparent;
  border-left: solid 0px transparent;
  top: calc(50% - 8px);
  left: -8px;
}
.harborPosition .pbottom .harborName {
  bottom: -46px;
}
.harborPosition .pbottom .harborName::after {
  border-top: solid 0px transparent;
  border-right: solid 8px transparent;
  border-bottom: solid 8px rgba(0,0,0,.8);
  border-left: solid 8px transparent;
  left: calc(50% - 8px);
  top: -8px;
}
.harborPosition .pleft .harborName {
  top: -12px;
  right: 25px;
}
.harborPosition .pleft .harborName::after {
  border-top: solid 8px transparent;
  border-right: solid 0px transparent;
  border-bottom: solid 8px transparent;
  border-left: solid 8px rgba(0,0,0,.8);
  top: calc(50% - 8px);
  right: -8px;
}

.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: 20%;
  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: 150%;
  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: 170%;
  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;
}


/*////////////////////////////////////////////////////////////////
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;
}