@charset "UTF-8";

.mark_box:after {
  content: "";
  display: block;
  clear: both;
}
.mark_shindan {
  background: #d94150;
  padding: 0.2em 0 0.2em 0;
  margin: 0 0.5em 0 0;
  width: 2.7em;
  color: #ffffff;
  font-size: 0.9em;
  text-align: center;
  border-radius: 2px;
  border: solid 0.5px #d94150;
  float: left;
}
.mark_fcst {
  background: #ffa3a3; /*#f6bfbc;*/
  padding: 0.2em 0 0.2em 0;
  margin: 0 0.5em 0 0;
  width: 2.7em;
  font-size: 0.9em;
  text-align: center;
  border-radius: 2px;
  border: solid 0.5px #333333;
  float: left;
}
/* 期間 */
.mark_niti {
  background: #006699;
  padding: 0.2em 0 0.2em 0;
  margin: 0.5em;
  width: 1.7em;
  font-size: 0.9em;
  color: #f9fafb;
  text-align: center;
  float: right;
  border-radius: 2px;
  border: solid 0.5px #333333;
}
.mark_shu {
  background: #007bbb;
  padding: 0.2em 0 0.2em 0;
  margin: 0.5em;
  width: 1.7em;
  font-size: 0.9em;
  color: #f9fafb;
  text-align: center;
  float: right;
  border-radius: 2px;
  border: solid 0.5px #333333;
}
.mark_jun {
  background: #4c6cb3;
  padding: 0.2em 0 0.2em 0;
  margin: 0.5em;
  width: 1.7em;
  font-size: 0.9em;
  color: #f9fafb;
  text-align: center;
  float: right;
  border-radius: 2px;
  border: solid 0.5px #333333;
}
.mark_tuki {
  background: #165e83;
  padding: 0.2em 0 0.2em 0;
  margin: 0.5em;
  width: 1.7em;
  font-size: 0.9em;
  color: #f9fafb;
  text-align: center;
  float: right;
  border-radius: 2px;
  border: solid 0.5px #333333;
}
.mark_nen {
  background: #274a78;
  padding: 0.2em 0 0.2em 0;
  margin: 0.5em;
  width: 1.7em;
  font-size: 0.9em;
  color: #f9fafb;
  text-align: center;
  float: right;
  border-radius: 2px;
  border: solid 0.5px #333333;
}

/* 海域 */
.mark_jpn, .mark_hokkaido {
  background: #f8e58c;
  padding: 0.2em 0 0.2em 0;
  margin: 0.5em;
  width: 6.4em;
  font-size: 0.9em;
  color: #333333;
  border: solid 0.5px #333333;
  text-align: center;
  float: right;
  border-radius: 2px;
}
.mark_trp, .mark_okhotsk {
  background: #f39800;
  padding: 0.2em 0 0.2em 0;
  margin: 0.5em;
  width: 6.4em;
  font-size: 0.9em;
  color: #333333;
  border: solid 0.5px #333333;
  text-align: center;
  float: right;
  border-radius: 2px;
}
.mark_wnp, .mark_arctic {
  background: #ddbb99;
  padding: 0.2em 0 0.2em 0;
  margin: 0.5em;
  width: 6.4em;
  font-size: 0.9em;
  color: #333333;
  border: solid 0.5px #333333;
  text-align: center;
  float: right;
  border-radius: 2px;
}
.mark_pac {
  background: #f8b862;
  padding: 0.2em 0 0.2em 0;
  margin: 0.5em;
  width: 6.4em;
  font-size: 0.9em;
  color: #333333;
  border: solid 0.5px #333333;
  text-align: center;
  float: right;
  border-radius: 2px;
}
.mark_glb {
  background: #ed6d3d;
  padding: 0.2em 0 0.2em 0;
  margin: 0.5em;
  width: 6.4em;
  font-size: 0.9em;
  color: #333333;
  border: solid 0.5px #333333;
  text-align: center;
  float: right;
  border-radius: 2px;
}
.mark_koumoku a {
  color: #333333;
}
.mark_koumoku a:hover {
  color: #f9fafb;
}
.mark_koumoku {
  background: #f9fafb;
  padding: 0.2em;
  margin: 0.2em;
  font-size: 0.9em;
  text-align: center;
  float: left;
  border-radius: 2px;
  border: solid 0.5px #333333;
  box-shadow: 2px 2px 2px rgba(0,0,0,0.4);
}
.mark_koumoku:hover {
  background: #40566a;
}
.mark_set_box1 {
  width: 0.6em;
  height: 0.6em;
  position:absolute;
  top:0.4em;
  left: 0;
  background:#dadfec;
  box-sizing: border-box;
  border-left:solid 0.5px #2b478e;
  border-top:solid 0.5px #2b478e;
  margin:0;
}
.mark_set_box2 {
  width: 0.6em;
  height: 0.6em;
  position:absolute;
  top:0.4em;
  left: 0.6em;
  background:#2b478e;
  box-sizing: border-box;
  border-right:solid 0.5px #2b478e;
  border-top:solid 0.5px #2b478e;
  margin:0;
}
.mark_set_box3 {
  width: 0.6em;
  height: 0.6em;
  position:absolute;
  top:1.0em;
  left: 0em;
  background:#2b478e;
  box-sizing: border-box;
  border-left:solid 0.5px #2b478e;
  border-bottom:solid 0.5px #2b478e;
  margin:0;
}
.mark_set_box4 {
  width: 0.6em;
  height: 0.6em;
  position:absolute;
  top:1.0em;
  left: 0.6em;
  background:#dadfec;
  box-sizing: border-box;
  border-right:solid 0.5px #2b478e;
  border-bottom:solid 0.5px #2b478e;
  margin:0;
}