@charset "utf-8";
/*@import "reset.css";*/

/*
 * Global
 */

/* html */
html{
	overflow-y : scroll;
}

/* body */
/*
body{
	font-family : "ＭＳ Ｐゴシック", sans-serif;
	font-size : 18px;
	font-size: 10pt;
	color : #333;
	background-color:transparent;
}*/
/* フォント */
body, div, select, td, button{
  font-size: 10pt;
  font-family: 'Noto Sans JP', 'Arial', sans-serif
}

/* ラッパー */
.table-container{
	display: flex;        /* 横並びにする */
    gap: 20px;            /* 表と凡例の間隔 */
    align-items: flex-start; /* 上端を揃える */
    padding-top : 20px;
    overflow-y: auto;
}

/* タイトル */
h1{
	font-weight: bold;
    font-size: 1.8em;
    color: #fff;
    background-color: #1565C0; 
    background: linear-gradient(90deg, #1565C0, #42A5F5); /* 青系グラデーション */
    padding: 12px 16px;
    border-radius: 8px;  /* 丸角 */
    box-shadow: 0 3px 6px rgba(0,0,0,0.3); /* 少し立体感 */
    margin: 10px 0 20px 0;
    border-left: 8px solid #0D47A1; /* アクセントバー */
}

#legend{
	/*width : 850px;*/
	margin : 20px 0 0 0;
	/*float : right; */
}

#jump{
	margin : 10px 0 10px 0;
	float : left;
}

#link{
	margin : 10px 0 10px 0;
	float : right;
}
/* テーブル */
#table{
	clear : both;
	/* max-width: 900px; */
}
table{
	margin : 10px 0 0 0;
	border-collapse : collapse;
/*	width : 100%; */
	border: 2px #cccccc solid;
}
th,td{
/*	border : 1px solid #666; */
	border : 1px solid #cccccc;
	text-align : center;
	vertical-align : top;
	padding : 2px 2px;
}

th#tide + th, td#tide + td {
    border-left: 3px solid #000;
}

/* フォーム */
select{
	font-size : 1em;
}
select.pref{
	width : 120px;
}
select.area{
	width : 200px;
}
select.town{
	width : 150px;
}
button{
	cursor : pointer;
	font-size : 1em;
	padding-left : 20px;
	padding-right : 20px;
}

/* clearfix */
.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}
.clearfix {
  min-height: 1px;
}
* html .clearfix {
  height: 1px;
  /*\*//*/
  height: auto;
  overflow: hidden;
  /**/
}

h2.date {
	margin-bottom : 5px;
}
td.tokubetsukeiho {
	background-color : #AA00AA;
	color : #fff;
	vertical-align: middle;
}
td.emergency, td.level5 {
	background-color : #0C000C;
	color : #fff;
	vertical-align: middle;
}
div.emergency, div.level5 {
    display: inline-block;
    background-color: #0C000C;
    color: #fff;
    padding: 2px 4px;
	/* font-size : 1.2em; */
	font-weight : bold;
	margin-right: 5px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3); /* 影 */
    margin-top: 6px;
    margin-bottom: 6px; 
}
td.level4 {
	background-color : #AA00AA;
	color : #fff;
	vertical-align: middle;
}
div.level4 {
    display: inline-block;
    background-color: #AA00AA;
    color: #fff;
    padding: 2px 4px;
	/* font-size : 1.2em; */
	font-weight : bold;
	margin-right: 5px;
	box-shadow: 0 2px 4px rgba(0,0,0,0.3); /* 影 */
    margin-top: 6px;
    margin-bottom: 6px; 
}
td.warning, td.level3 {
	background-color : #FF2800;
	color : #fff;
	vertical-align: middle;
}
div.warning, div.level3 {
    display: inline-block;
    background-color: #FF2800;
    color: #fff;
    padding: 2px 4px;
	/* font-size : 1.2em; */
	font-weight : bold;
	margin-right: 5px;
	box-shadow: 0 2px 4px rgba(0,0,0,0.3); /* 影 */
    margin-top: 6px;
    margin-bottom: 6px; 
}
td.advisory, td.level2 {
	background-color : #F2E700;
	color : #000000;
	vertical-align: middle;
}
div.advisory, div.level2 {
    display: inline-block;
    background-color: #F2E700;
    color: #000000;
    padding: 2px 4px;
	/* font-size : 1.2em; */
	font-weight : bold;
	margin-right: 5px;
	box-shadow: 0 2px 4px rgba(0,0,0,0.3); /* 影 */
    margin-top: 6px;
    margin-bottom: 6px; 
}
td.cancel {
	vertical-align: middle;
}
td.header, th.header {
	background-color : #eeeeee;
	vertical-align: middle;
}

/* facebox */
#placeholder{
    width:600px;
    height:300px;
}

/* 凡例 */
.legend-container {
    display: flex;
    flex-direction: column; /* 縦に並べる */
}

.legend-box {
    border: 1px solid #000;   /* 枠線 */
    padding: 10px;
    display: inline-block;     /* 必要に応じてブロック表示 */
    font-size: 14px;
    background-color: #f0f4ff;
    padding: 12px 16px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    margin-bottom: 12px;
}

.legend-item {
    margin-bottom: 2px;
    padding: 4px 8px;
    color: #333;
}

.legend-color {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 5px;
    vertical-align: middle;
}

.legend-table {
    border-collapse: collapse;
    display: inline-block;       
    border: 1px solid #000; 
    padding: 12px 16px;               
    background-color: #f0f4ff;
    font-size: 14px;
    border-radius: 8px;    
}

.legend-left {
    padding: 2px 5px;
    vertical-align: middle;
    border: none;
    text-align: left;
    border-right: 3px solid #000; /* 中央の太線 */
    width: 50%; 
    margin-bottom: 5px;
    padding: 4px 8px;
}
.legend-right {
    padding: 2px 10px;
    vertical-align: middle;
    border: none; 
    text-align: left;
    width: 50%;
    justify-content: flex-start;
}

.legend-top {
    padding: 2px 5px;
    vertical-align: middle;
    border: none;
    text-align: left;
    border-bottom: 3px solid #000; /* 中央の太線 */
    width: 50%; 
    margin-bottom: 5px;
    padding: 4px 8px;
}

.legend-level {
    padding: 2px 5px;
    vertical-align: middle;
    border: none;
    text-align: left;
    width: 50%; 
    margin-bottom: 5px;
    padding: 4px 8px;
}

/* 注意書き */
#notice{
	padding-top: 20px;
	padding-bottom: 20px;
}

/* ボタン */
.btn-design {
    background: linear-gradient(to bottom, #2196F3, #1565C0); /* 青のグラデ */
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: bold;
    box-shadow: 0 3px 6px rgba(0,0,0,0.3);
    cursor: pointer;
    transition: all 0.2s ease;
}
.btn-design:hover {
    background: linear-gradient(to bottom, #42A5F5, #1976D2);
    box-shadow: 0 5px 10px rgba(0,0,0,0.4);
    transform: translateY(-2px);
}

.form-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.form-row .btn-design:last-child {
    margin-left: auto;
}

.btn-design-simple {
	padding: 6px 12px;
    border: none;
    border-radius: 6px;
    background: #2196F3;
    color: #fff;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
}

.btn-design-simple:hover {
    background: #0D47A1;
    transform: translateY(-1px);
}

#container p, #container div.note, .no-data {
    color: #222;          /* 真っ黒じゃなく少し柔らかめ */
    line-height: 1.6;     /* 行間を少し広くして読みやすく */
    background-color: #f0f4ff; /* 薄い青系の背景でアクセント */
    padding: 8px 12px;    /* 内側余白 */
    border-left: 4px solid #2196F3; /* 左のバーで強調 */
    border-radius: 4px;   /* 角を少し丸める */
    margin: 10px 0;       /* 上下の余白 */
}

/* 表 */
#table table {
    width: 100%;
    border-spacing: 0 8px; /* 行ごとに隙間 */
}

#table td {
    padding: 4px 8px;
    vertical-align: middle;
    text-align: left;
    width: auto; /* 必要に応じて自動 */
}

#table tr {
    background: #f8fafd;
}

#table td a.detail_popup {
    display: inline-block; /* 幅は文字＋paddingに自動調整 */
    padding: 4px 8px;
    background: linear-gradient(90deg, #2196F3, #64B5F6);
    color: #fff;
    font-weight: bold;
    border-radius: 6px;
    text-decoration: none;
    text-align: center;
    transition: all 0.2s ease;
}

#table td a.detail_popup:hover {
    background: linear-gradient(90deg, #42A5F5, #90CAF9);
    transform: translateY(-2px); /* 軽く浮くアニメーション */
    box-shadow: 0 3px 6px rgba(0,0,0,0.2);
}

.table-scroll {
  max-height: 400px;   /* スクロール領域の高さ */
  overflow-y: auto;
  margin-bottom: 1em;
}

.data-table {
  border-collapse: separate;
  border-spacing: 0;        /* 余白ができないようにする */
  width: 100%;
}

.data-table th, .data-table td {
  border: 1px solid #ccc;
  /* padding: 8px; */
  text-align: center;
}

/* ヘッダー固定 */
.data-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
}

/* 印刷用 */
@media print {
    .table-scroll {
        max-height: none !important;  /* 高さ制限解除 */
        overflow: visible !important; /* スクロール解除 */
    }
    .data-table thead th {
        position: static !important;  /* 固定を解除 */
    }
    .btn-design, .note, #select_area_div, #clear, #search, #print{
        display: none !important;
    }

    /** カラー印刷を可能にする */
    td.emergency, td.level5, div.emergency, div.level5
    , td.level4, div.level4
    , td.warning, td.level3, div.warning, div.level3 
    , td.advisory, td.level2, div.advisory, div.level2
    , .legend-color{
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

/* スマホ画面 */
@media (max-width: 768px) {
    #print{
        display: none !important;
    }

    .table-container{
        display: flex;
        flex-direction: column;
        gap: 20px;            /* 表と凡例の間隔 */
        align-items: flex-start; /* 上端を揃える */
        padding-top : 20px;
        overflow-y: auto;
    }
}

/** 履歴画面 **/
/* カレンダー */
.calendar {
    padding: 6px 10px;
    border: 2px solid #2196F3;
    border-radius: 6px;
    font-size: 14px;
    width: 150px;
    transition: all 0.2s;
}

.calendar:focus {
    outline: none;
    border-color: #0D47A1;
    box-shadow: 0 0 5px rgba(33, 150, 243, 0.5);
}

/* 地域選択 */
select.pref, select.area {
    padding: 6px 10px;
    border: 2px solid #2196F3;
    border-radius: 6px;
    background-color: #fff;
    color: #0D47A1;
    font-weight: 500;
    font-size: 14px;
    transition: all 0.2s;
}

select.pref:focus, select.area:focus {
    outline: none;
    border-color: #0D47A1;
    box-shadow: 0 0 5px rgba(33, 150, 243, 0.5);
}

.current-location {
    margin-top: 8px;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.current-location .label {
    font-weight: 600;
    color: #333;  /* ラベルは落ち着いた色 */
}

.current-location .location {
    font-weight: bold;
    color: #2196F3;  /* 青系でアクセント */
    background-color: rgba(33, 150, 243, 0.1); /* 薄い背景で目立たせる */
    padding: 2px 6px;
    border-radius: 4px;
}

/* 更新時間 */
.current-time {    
    margin-top: -20px;
    margin-left: 8px;
    display: block;
    text-align: left;
    width: 100%;
    font-size: 0.9em;
    color: #1565C0;             /* 青系で目立たせる */
    font-weight: 500;
    letter-spacing: 0.5px;      /* 少し文字間隔を空けて読みやすく */
}

.header-row {
    display: flex;
    align-items: center;
}

.header-row > div:last-child {
    margin-left: auto;
}