@charset "UTF-8";

body {
	width: auto;
	-webkit-text-size-adjust: 100%;
	font-family: sans-serif;
}

h1{
	color: #265cc4;
}
h2{
	color: #265cc4;
}

h3:before{
	content: '●';
	color: #265cc4;
	margin-right: 4px;
}


img.fig_small {
    display: block;
	width: 300px;
}

img.fig_small400 {
    display: block;
	width: 400px;
}

a.link_small{
    font-size: 18px;
    color: black;
}
a.link_small:hover {
	color: #265cc4;
}

/*--狭い画面用---------------*/
@media screen and (max-width: 299px) {
img.fig_small {
    display: block;
	width: 100%;
}
}
@media screen and (max-width: 399px) {
img.fig_small400 {
    display: block;
	width: 100%;
}
}

/* 最新の水温情報 */
.tile_img_1_2{ width:460px;}
.tile_img_1_1{ width:460px;}

/* 最近3ヶ月の水温分布図 */
.tile2 td img{ width:350px;}

/* 0.5度領域平均水温データセット */
/* 日本海海況予報 */
.tile1{         border-spacing: 0px;}
.tile1 td{      padding: 5px; border: 1px solid gray; font-size:1.5em; vertical-align:top;}
.tile1 td img{  width:450px;}

/* モンスーンインデックス(MOI) */
/* 太平洋十年規模振動(PDO) */
/* ブリ富山湾漁獲量比 */
.tile5{         border-spacing: 0px;}
.tile5 td{      padding: 5px; border: 1px solid gray; font-size:1.5em;  vertical-align:top;}
.tile5 td img{  width:340px;}

/*--画像タイル4列---------------*/
ul.tile4 {
    list-style-type: none;
    padding-left: 0px;
    width: 95%;
    display:grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    }
ul.tile4 li {font-size: 26px;
    background-color: lightgray;
    border: solid 1px black;
    }

img.fig_tile4 {  
    width: 100%;
}


/*--表---------*/
table.csv{
    font-size: xx-small;
}

table.csv tr:nth-child(even) {  
  background-color: #E3F2FD;  
}  


.legend{
    position:relative;
    min-height:1px;
    padding-right: 15px;
    padding-left:15px;
    width:100%;
}

.legend table{
    width: 50%;
    max-width: 100%;
    margin-bottom: 20px;
    border-spacing: 0;
    border: 1px solid #ddd;
}

.legend td{
    border-top: 1px solid #ddd;
    padding: 8px;
    vertical-align: top;
    font-size: 12px;
}

/*--ヘッダ--------------*/
header{
    text-align: center;
    /*border:1px solid black;*/
}
header h1{
    display:inline-block;
    margin-top: 15px;
    margin-bottom: 0px;
}
header span{
    display:inline-block;
    float:right;
    margin-top: 20px;
    margin-right: 15px;
}
header::after {
    /* 必要 */
    content: ""; 
    display: block; 
    clear: both;
}


ul.tile_top_1 {
	list-style: none;
    padding-left: 0px;
    /*width: 60%;*/
}
ul.tile_top_1 li {
    display: inline-block;
    /*width: 45%;*/
}
ul.tile_top_1 li img{
    min-width: 200px;

}

/*--目次--------------*/
nav#contents {
    margin-top:25px;
    margin-bottom:25px;
}
ul.menu {
	list-style: none;
	padding-left: 0px; /* padding-inline-startを取り消すため必要*/
/*  padding-left: 5px; padding: 0px; margin: 0px: */
}
ul.menu li {
    display: inline-block;
/*  margin:8px; margin-top: 0px; */
    margin-top: 2px;
    margin-bottom: 2px;
    margin-left: 0px;
    margin-right: 0px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 5px;
    padding-right: 5px;
    border-bottom: 1px solid blue;
    font-size: 1.1em;
}
ul.menu li.active{
    background-color: #D9E5FF;
    border-top:  1px solid blue;
    border-right:1px solid blue;
    border-left: 1px solid blue;
    border-bottom: none;
}
ul.menu li.active a{
    /*border: 1px solid black !important;*/
    color: black;
    /*text-decoration: underline;*/
}
ul.menu a {
	text-decoration: none;
	color: black;
}
ul.menu a:visited {
	color: black;
}
ul.menu a:hover {
	color: #265cc4;
}
ul.menu li:hover
{
	/*border: solid 2px #265cc4;*/
}
ul.menu li:before
{
	content: '▶';
	color: #265cc4;
	margin-right: 0px; font-size: 100%;
}

/*--広い画面用---------------*/
@media screen and (min-width: 300px) {
img.fig_small {
	width: 300px;
}
}
@media screen and (min-width: 400px) {
img.fig_small400 {
	width: 400px;
}
}


footer{
margin-top:50px;
border-top:1px dotted black;
}