@charset "UTF-8";

*, *::before, ::after { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 10px; }
body { color: #222; font-family: "BIZ UDPGothic", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; font-size: 1.6rem; line-height: 1.6; -webkit-text-size-adjust: 100%;background:url(../images/common/body_bg.webp);background-size:cover;background-attachment: fixed;background-position:center; }
img { border: 0; vertical-align: top; -ms-interpolation-mode: bicubic; }
a { word-break: break-all; }
a:link { color: #003379; text-decoration: underline; }
a:visited { color: #003379; }
a:hover { text-decoration: none; transition: all 0.3s ease; }
a:hover img { opacity: 0.8; transition: all 0.3s ease; }
/*button { background: transparent; border: none; appearance: none; cursor: pointer; outline: none; }*/
button {font-size:1.6rem;padding:0 5px;}
input{font-size:1.6rem;}
select{font-size:1.6rem;}
.clearfix::after { content: ''; display: block; clear: both; }

.inner { margin: 0 auto; width: 100%; max-width: 1200px; }

header#top{width:1200px;margin:auto;display:flex;justify-content: space-between;align-items:flex-start;}
header#top h1, header#top strong{font-size:4rem;line-height:90%;margin-bottom:15px;padding-right:230px;background:url(../images/common/musubimaru2.png) no-repeat top right;background-size:contain;}

header#top h1 span, header#top strong span{font-size:1.6rem;display:block;font-weight:400;}
header#top h1 a, header#top strong a{color:#000;text-decoration:none;}
header#top .pref{background:#fff;border:solid 2px #0c0;border-radius:8px;margin:5px;padding:3px 10px;}
.nav-menu{width:1200px;margin:auto;}
.nav-menu ul{list-style:none;display:flex;flex-wrap:wrap;gap:2px;}
.nav-menu ul li a{display:flex;align-items:center;justify-content:center;
    height:100%;text-align:center;line-height:120%;padding:10px;border-radius:10px;
    text-decoration:none;}

.nav-menu ul li.nav1{width:204px;}
.nav-menu ul li.nav2{width:238px;}
.nav-menu ul li.home{width:100px;}
.nav-menu ul li.nav1 a{color:#000;background:#0c0;}
.nav-menu ul li.nav2 a{color:#fff;background:#106724;}
.nav-menu ul li a:hover{color:#fff;background:#111;}

main{margin:20px auto;width:1200px;}
main#toppage{width:1200px;display:flex;gap:10px;flex-direction:row;justify-content: space-between;}
main#toppage .alpha{display:flex;flex-direction:column;gap:10px;}
main#toppage section{width:595px;margin:0px;padding:10px 20px;background:#fff;border-radius:10px;}
main#toppage section h2{font-size:2.4rem;margin-top:0;margin-bottom:5px;padding:0;color:#000;background:#fff;border-bottom:2px solid #0c0;display:flex;justify-content: space-between;align-items:flex-end;}
main#toppage section h2 span{font-size:1.8rem;font-weight:400;}
main#toppage section h2 a{font-size:1.4rem;font-weight:400;}

main#toppage section#hatsurei {display:flex;flex-direction:column;gap:20px;}
main#toppage section#hatsurei article{}
main#toppage section#hatsurei article p{font-size:1.8rem;min-height:43px;}

main#toppage section#info{}
main#toppage section#info p{height:200px;overflow-y:scroll;}

main#toppage section#mobile .inner {display:flex;align-items:center;}

main#toppage section#ox_map {position:relative;}
main#toppage section#ox_map .map{position:relative;margin:20px 0;text-align:center;width:544px;aspect-ratio:1;max-width:100%;}
main#toppage section#ox_map .map img{max-width:100%;}
main#toppage section#ox_map .item{position:absolute;border:solid 1px silver;padding:10px;right:10px;bottom:10px;background:#fff;font-size:1.2rem;z-index:10;text-align:left;}

footer{background:white;padding-top:20px;border-top:2px solid #0c0;}
footer .inner{width:1200px;margin:auto;}
footer .inner p{margin-bottom:10px;}
footer .inner ul{display:flex;list-style:none;gap:50px;margin-bottom:20px;}
footer .inner ul li{border-left:3px solid #0c0;padding-left:10px;}
footer .copyright{background:#333;color:#fff;text-align:center;font-size:1.2rem;padding:5px;}

button{color:#000;background: #fff; border: solid 1px gray; appearance: none;border-radius:5px;padding:2px 2px;}

/*警報値*/
.lev01{color: #0099ff;}
.lev02{color: #00ffff;}
.lev03{color: #00ff66;}
.lev04{color: #cdcd4c;}
.lev05{color: #ff9900;}
.lev06{color: #ff3300;}

/*下層ページ*/
main section{margin:0px;padding:20px 20px;background:#fff;border-radius:10px;}
main section section{padding:10px 0;}
main section h1{background:#333;color:#fff;font-size:2.8rem;padding:5px 15px; letter-spacing:0.1rem;}
main section h1.flex{display: flex; justify-content: space-between; align-items: flex-end;}
main section h1 small{font-size:1.6rem;margin:0 20px;font-weight:normal;letter-spacing:0;}
main section h1 .beta{font-size:1.6rem;font-weight:normal;letter-spacing:0;}
main section h2 {margin:20px 0;padding:3px 15px;color:#fff;background:#666;}
main section #option{padding:5px;background:#ccc;}
main section table{margin: 20px 0px 10px 0px; border-collapse: collapse;font-size:1.4rem;width:100%;}
main section table thead th{font-weight:normal;background:#666;color:#fff;padding:6px 5px;border:solid 1px #000;white-space:nowrap;}
main section table tbody th{font-weight:normal;background:#ccc;color:#000;padding:6px 5px;border:solid 1px #000;}
main section table td{padding:3px 5px;border:solid 1px #999;text-align:right;background:#fff;}
main section table thead td{background:#ccc;text-align:center;border:solid 1px #000;}
main section ul, main section ol{padding-left:30px;}
main section table tbody tr:nth-child(even) td {  background: #ffffef;}
main section table tbody td.none{text-align:left;}
main section table tbody tr:hover td{background:#edf8fe!important;}
br.sp{display:none;}
.yellow{background:#ffff00;color:#000;}
.orange{background:#FD9840;color:#000;}
.purple{background:#FD6CFC;color:#000;}

/*日報*/
main#dayreport section table thead th{padding:6px 3px;}

/*発令*/
main#hatsurei section section.flex{display:flex;gap:20px;}
main#hatsurei section table{margin-top:0;}
main#hatsurei section table td{text-align:left;}
main#hatsurei section table tbody tr:hover td{pointer-events: none;}
main#hatsurei section p{}
main#hatsurei section p.caution{font-weight:bold;font-size:2rem;padding:10px;}
main#hatsurei section p.caution strong{vertical-align:top;}
main#hatsurei section p.caution::before{content:url(../images/common/icon.gif);margin-right:10px;}
main#hatsurei section table tbody th{white-space:nowrap;}
main#hatsurei section.comment dl{margin-left:20px;display:flex;flex-wrap:wrap;}
main#hatsurei section.comment dl dt{width:6.5rem;}
main#hatsurei section.comment dl dd{width:90%;}
@media screen and (max-width: 767px) {
  main#hatsurei section section.flex{flex-direction: column;}
}

/*ダウンロード*/
main#download section table td{text-align:left;}
main#download section table td:nth-child(2){text-align:right;}

/*マップ*/
main#map section .flex{display:flex;gap:30px;}
main#map section .flex2{display:flex;gap:30px;}
main#map section .box{position:relative;}
main#map section #alpha{position:relative;flex:1;width:550px;height:550px;aspect-ratio: 1;}
main#map section #beta{position:relative;flex:1;}
main#map section #gamma{text-align:center;}
main#map section #delta{margin-top:10px;padding:10px;background:#efefef;line-height:200%;}
main#map section #delta label{margin-right:15px;}
.note{padding:10px;border:solid 1px silver;display:inline-block;align-self:flex-start;margin-bottom:10px;}
.note ul{list-style:none;padding-left:0;}
.mapbox2{position:relative;width:350px;height:380px;}
.targetArea{padding:10px 0;}
@media screen and (max-width: 767px) {
  main#map section .flex{flex-direction: column;}
  main#map section #alpha{height:auto!important;}
  .note{font-size:1rem;}
  .mapbox2{height:auto!important;aspect-ratio: 1 / 1;margin-bottom:10px;}
}

/*グラフ*/
main#graph section table{width:auto;}
main#graph section table td{text-align:left;background-color:transparent;border:none;padding:0;}
main#graph section table td img{border:solid 1px red;background:white;}
main#graph section table tbody tr:hover td{pointer-events: none;}
main#graph section .graph{display:flex;gap:20px;flex-direction: column;}
main#graph section .graph aside{flex:1;}
main#graph section .graph section{flex:3;}
main#graph section aside form{}
main#graph section .box {padding: 10px 10px;width: 100%;background-color: #EEEEEE;border: solid 1px #ccc;}
main#graph section .graph .time{display:flex;gap:20px;margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid #ccc;}
main#graph section .graph .item{margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid #ccc;}
main#graph section .graph .check{margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid #ccc;}
main#graph section .graph .noborder{border-bottom:none;margin-bottom:0;padding-bottom:0;}
.datehour input{margin-right:5px;height:3rem;width:150px;}
.datehour img{margin-right:10px;}
.select_btn{text-align:center;}
.select_btn a{display:inline-block;margin:5px;padding:4px 15px;border-radius:5px;background:blue;color:white;text-decoration:none;}
main#graph section .button-list ul,main#graph section .kyoku-list ul{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;}
main#graph section .button-list ul li button{width:187px;margin:1px;}
main#graph section .kyoku-list ul li button{width:101px;margin:1px;}
.cdata{display:none;}

@media screen and (max-width: 767px) {
  main#graph section .graph{flex-direction: column-reverse;}
  main#graph section aside form{flex-direction:column;}
  main#graph section .graph .time{flex-direction:column;}
  .datehour input{margin-bottom:10px;}
  main#graph section .button-list ul li button{width:165px;margin:1px;}
  main#graph section .kyoku-list ul li button{width:109px;margin:1px;}
}

/*リンク*/
main#link section ul li{margin-bottom:10px;}
main#link section ul.preflink{display:flex;flex-wrap:wrap;}
main#link section ul li{margin-left:30px;}
main#link section ul.preflink a{white-space:nowrap;}

/*モバイル*/

@media screen and (max-width: 767px) {
body{background-image:none;background-color:#D4E2F2;}
header#top, main#toppage, footer .inner{width:100%;}
header#top {align-items:flex-end;position:fixed;background:#fff;z-index:999999;}
main, main#toppage{flex-direction:column;padding:70px 5px 5px;margin:0;}
main#toppage section{width:100%;padding:10px;}
header#top h1,header#top strong{font-size:3rem;margin:5px;padding-right:50px;background:url(../images/common/musubimaru_sp.png) no-repeat top right;background-size:contain;}
header#top h1 span,header#top strong span{font-size:1.4rem;}
main#toppage section h2{flex-wrap:wrap;white-space:nowrap;font-size:1.8rem;}
main#toppage section h2 span{font-size:1.4rem;}
main#toppage section h2 a{font-size:1.4rem;}
footer .inner ul{flex-direction:column;gap:10px;margin:10px;}
footer .inner p{margin:10px;}
main#toppage section#hatsurei article p{font-size:1.4rem;}
main#toppage section#mobile{display:none;}
main#toppage section#ox_map .item{right:0;bottom:0;}
button {font-size:1.4rem;}
input{font-size:1.4rem;}
select{font-size:1.4rem;}



/*ハンバーガーメニュー*/
.hamburger {
  width: 40px;
  cursor: pointer;
  height:43px;
  background:#333;
  margin:5px;
  padding:5px;
}
.hamburger span {
  display: block;
  height: 3px;
  background: white;
  margin: 6px 0;
  transition: 0.3s;
}
.nav-menu {
  display: none;
  background: #fff;
  position: fixed;
  top: 60px;
  left: 0;
  width: 100%;
  padding:10px;
  z-index:10000;
}
.nav-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-menu ul li.home , .nav-menu ul li.nav1 , .nav-menu ul li.nav2 {
  width:100%;
}
.nav-menu ul li a {
  padding: 15px;
}
.nav-menu ul li a br{display:none;}

/* メニュー表示時のクラス */
.nav-menu.active {
  display: block;
}
header#top .pref{display:none;}
/*ハンバーガーここまで*/

/*下層*/
*{max-width:100%;height:auto;}
main section h1{display:block;font-size:2.4rem;}
main section h1 small{display:block;margin:0;font-size:1.4rem;}
main section h1 .beta{font-size:1.4rem;text-align:right;}
main section{padding:10px 5px;}
main section div.table{overflow-x:scroll;}
main section div.table{max-height:80vh;overflow:scroll;}
main section div.table table thead th{position:sticky;top:0;z-index:50;line-height:110%;}
main section div.table table thead th.fixed01{left:0;z-index:100;}
main section div.table table tbody tr td:first-child,main section div.table table tbody tr th:first-child{position:sticky;top:0;left:0;z-index:50;background:#ccc;}
main section table th{white-space:nowrap;}
br.sp{display:inline;}
label{white-space:nowrap;}

/*
main section table tbody tr td:first-child, main section table thead tr th, main section table thead tr td{
  position: sticky;
  top: 0;
  left: 0;
  z-index: 1;
  &:before{
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    width: 100%;
    height: 100%;
    border: 1px solid #999;
  }}
.fixed01{
  z-index: 5;
}
*/


}