h1{font-size:1.2rem;}
h2{font-size:1.1rem;}
p{font-size:1rem;}
@media screen and (max-width:480px){
  h1{font-size:1rem;}
  h2{font-size:0.8rem;}
  p{font-size:0.75rem;}
}

body {
    font-family: 'Hiragino Kaku Gothic Pro', 'Meiryo', sans-serif;
    background-color: #DDDDDD;
}
.svg-inline-icon{
  width:1rem;
}

.entrance-button{
  width:15rem;
  height:3rem;
  vertical-align:middle;
  text-align:center;
  font-size:2rem;
  color:white;
  background-color:black;
  border:black solid 1px;
  border-radius:5px;
  margin:2rem;
}

.header{
  color:black;
  font-size:1.5rem;
  font-weight: bold;
}
#header-location_name {padding-left:10px;}
.header svg{
    width:30px;
    height:30px;
    color:#FFFFFF;
    background-color:#333; 
    border-radius:5px;
    margin: 3px;
}

.subheader{
  color:black;
  font-size:1rem;
  display: flex;
  align-items: center;
}
#date {margin-left:10px;}
.subheader svg{flex-shrink:0;}

@media screen and (max-width:480px){
    .subheader {font-size:0.8rem;}
    .subheader svg {width: 0.8rem;}
}

.footer{
  background-color: #333;
  color:#fff;
}

.footer p{
  font-size:0.6rem;
  text-align:right;
  margin-right: 5px;
}

/* Top page (index.html) */
#IndexMap{background-color:white;}

.card-two-row{
    border-radius:8px;
    background-color: #FFFFFF;
}
.subcard {
  background-color:#EEEEEE;
  border-radius:4px;
  padding: 0;
  box-shadow: 1px 1px 3px gray;
  display: flex;
  gap: 10px;
}
.subcard_thumbnail {
  margin:0;
  height:150px;
  background-color:white;
  border-radius:4px 0 0 4px;
}
.subcard_content {
  display:block;
}
.info-supple{font-size:0.75rem;}
@media screen and (max-width:480px){
  .card-two-row{font-size:0.7rem;}
  .info-supple{font-size:0.6rem;}
}

.mhw-category-box{
    border:2px solid #FFFFFF !important;
    border-radius: 5px;
    font-weight: bold;
}


/* For portal contents (oceanpoint.html) */
#table-weather{width:100%;overflow-x:auto;}
#table-weather th{
  position: sticky;
  top: 0;
  left: 0;
  background: none;
  border-left: none;
  border-right: none;
  min-width: 5svh;
}
#table-weather th::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-left: 1px solid #000;
  border-right: 1px solid #000;
  background: #ccc;
  z-index: -10;
}
#table-weather svg {
    min-width: 3.5svh;
}
.card-two-row table{font-size:0.75rem;}
#map-sst-quick{border-radius:8px;}
#map-sst-quick .leaflet-control-zoom{display:none;}

/* For tab-seected contents (timeseries.html) */
.ContentsTab .tab{
  border:1px dotted gray;
  font-size:0.8rem;
}

.CtrlMap-btn{
  background-color:#FFFFFF;
  border:solid #000000 1.5px;
  border-radius:5px;
  margin-bottom:3px;
  text-align:center;
  height:1.2rem;
}
.CtrlMap-radio:checked+.CtrlMap-btn{
  background-color:#000;
  color:#FFFFFF;
}
.CtrlMap-area{
  background-color:#666;
  border:solid #000000 0.5px;
  border-radius:5px;
  margin-bottom:3px;
  text-align:left;
  color:#FFFFFF;
}

/* For diary contents (diarymemo.html) */
.ContentsCalendar table{border-collapse:collapse;}
.ContentsCalendar table th{
  border:1px solid gray;
}
.ContentsCalendar table td{
  border:1px solid gray;
}
.calendar-content-date-in{color:black;}
.calendar-content-date-out{color:lightgray;}
.calendar-content-memo{font-size:0.8rem;}
.calendar-content-memo p{margin:0;}
.calendar-content-memo ul{padding-left:1rem;}
.calendar-input-diary{
  background-color:#f0f0f0;
}

/* For graph select */
.ContentsTab {
    gap: 0.5rem;
}

.tab {
    display: inline-block;
    padding: 0.2rem 1rem;
  text-decoration: none;
  background: #99CCFF;
  color: #EEEEEE;
  font-weight: bold;
  border-radius: 5px;
}

#radio-for-tab0:checked ~ #tab0 {
  background: #006699;
    color: #FFF;
}
#radio-for-tab1:checked ~ #tab1 {
  background: #006699;
  color: #FFF;
}

.graph-area {
    margin-top: 0.6rem;
}

#select_ts-fish{
  display:inline-block;
  padding:0.2rem 1rem;
  border:solid #000000 1.5px;
  text-decoration:none;
  font-weight:bold;
  border-radius:5px;
  margin-bottom:3px;
}

#select_ts-detail-crw{
  display:inline-block;
  padding:0.2rem 1rem;
  border:solid #000000 1.5px;
  text-decoration:none;
  font-weight:bold;
  border-radius:5px;
  margin-bottom:3px;
}


#move-back_ts-fish{
  display:inline-block;
  padding:0.1rem 1rem;
  border:solid #000000 1.5px;
  background:#FFFFFF;
  text-decoration:none;
  font-weight:bold;
  border-radius:5px;
  margin-bottom:3px;
}
#move-forward_ts-fish {
  display:inline-block;
  padding:0.1rem 1rem;
  border:solid #000000 1.5px;
  background:#FFFFFF;
  text-decoration:none;
  font-weight:bold;
  border-radius:5px;
  margin-bottom:3px;
}