@charset "UTF-8";
/*---------------------------------------------
	フォント
  ---------------------------------------------*/
@import url("../plugins/font-awesome/css/font-awesome.min.css");

/* -----------------------------------
    汎用クラス
   ----------------------------------- */
body, td, th, h1, h2, h3, h4, h5, h6 { font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; }
body {
	font-size: 82%; /* 13px */
	color: #000;
	line-height: 1.4;
	text-align: justify;
	font-feature-settings:"palt";
}

a { text-decoration: none; transition: all 0s}
a:link {color: #44a0ff;}
a:visited {color: #44a0ff;}
a:hover {color: #ac9898; transition: all 0.3s linear;text-decoration: none }
a:active { color: #000000; }

.text-small {font-size: 0.85em; display: inline-block; }
.text-large{font-size: 20px !important}
.text-bold{font-weight: bold !important;}
.text-right {text-align: right !important;}
.text-left {text-align: left !important;}
.text-center {
	text-align: center !important;
	margin-left: auto;
	margin-right: auto;
}
span.text-sup,
span.text-sub{
	font-size: 75.5%;
	vertical-align: top;
	position: relative;
	top: -0.03em;
	padding-left: 1px;
	padding-right: 1px;
}
span.text-sub {
	vertical-align: bottom;
	top: 0.03em;
}
.mt-0px { margin-top: 0px !important; }
.mt-5px { margin-top: 5px !important; }
.mt-10px { margin-top: 10px !important; }
.mt-20px { margin-top: 20px !important; }
.mt-30px { margin-top: 30px !important; }
.mt-50px { margin-top: 50px !important; }
.mt-80px { margin-top: 80px !important; }
.mt-100px { margin-top: 100px !important; }
.mb-10px { margin-bottom: 10px !important; }
.mb-20px { margin-bottom: 20px !important; }
.mb-30px { margin-bottom: 20px !important; }
.mb-50px { margin-bottom: 50px !important; }
.mb-100px { margin-bottom: 100px !important; }
.ml-10px { margin-left: 10px !important; }
.ml-20px { margin-left: 20px !important; }
.mr-10px { margin-right: 10px !important; }
.mr-20px { margin-right: 20px !important; }
.ml-mr-5px { margin-left: 5px !important; margin-right: 5px !important; }
.ml-mr-10px { margin-left: 10px !important; margin-right: 10px !important; }
.ml-mr-20px { margin-left: 20px !important; margin-right: 20px !important; }
.ml-mr-50px { margin-left: 50px !important; margin-right: 50px !important; }
.margin-15px{margin: 15px !important}
.pt-0px { padding-top: 0px !important; }

.width1em { width: 1em !important; }
.width2em { width: 2em !important; }
.width3em { width: 3em !important; }
.width4em { width: 4em !important; }
.width5em { width: 5em !important; }
.width6em { width: 6em !important; }
.width7em { width: 7em !important; }
.width8em { width: 8em !important; }
.width9em { width: 9em !important; }
.width10em { width: 10em !important; }
.width11em { width: 11em !important; }
.width12em { width: 12em !important; }
.width13em { width: 13em !important; }
.width14em { width: 14em !important; }
.width15em { width: 15em !important; }
.width20em { width: 20em !important; }
.width25em { width: 25em !important; }
.width30em { width: 30em !important; }
.width40em { width: 40em !important; }
.width50em { width: 50em !important; }
.width15per { width: 15% !important; }
.width35per { width: 35% !important; }
.width50per { width: 50% !important; }
.width80per { width: 80% !important; }
.width90per { width: 90% !important; }
.width100per { width: 99% !important; }
.width-auto { width: auto !important; }

.text-yellow{color: #FFF23F !important;}
.text-red{color: #AB183E !important;}

.bg-light-blue{background-color: #e6faff !important}
.bg-blue{background-color: #44a0ff !important; color: #ffffff !important}

/* --- Clear Fix ------------- */
.clearfix:before, .clearfix:after {
	display: table;
	content: " ";
}
.clearfix:after {clear: both;}
.clearfix {overflow: hidden;}
*, *::after, *::before {
	box-sizing: border-box;
}

/* -----------------------------------
   フォーム
 * ----------------------------------- */
input,
select,
label {
	vertical-align: baseline;
}

/*---------------------------------------------
	メインコンテンツ
  ---------------------------------------------*/
#wrapper {
}
.container-main{
	width: 920px;
	min-height: 800px;
	margin: 0px auto;
	line-height: 1.8;
	padding-bottom: 100px;
}

/* -----------------------------------
    メニュー
   ----------------------------------- */
header {
  background-color: #44a0ff;
  height: 35px;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center
}
#menu {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
}

h1 a{
	color: #ffffff !important;
	font-size: 20px;
	margin-left: 5px;
}
.luxbar-checkbox:not(:checked) ~ .luxbar-menu {
  height: 50px
}
.luxbar-menu {
  min-height: 50px
}
@media screen and (min-width:769px) {
.luxbar-checkbox:not(:checked) ~ .luxbar-menu {
  height: 35px
}
.luxbar-menu {
  min-height: 35px
}	
#nav {
  display: flex;
  flex-wrap: wrap;
  height: 35px
}
#nav li {
  align-items: center;
  height: 35px;
  flex-wrap: wrap;
  display: flex
}
#nav li a {
  color: #fff;
  line-height: 1.2;
  padding: .3em .5em .3em .5em;
  text-align: center;
  height: 35px;
  border-left: 1px solid #ffffff;
  display: flex;
  align-items: center;
  box-sizing: border-box
}
#nav li#active,
#nav li#active a,
#nav li:hover,
#nav li a:hover,	
.nav-pulldown:hover,
.nav-pulldown a:hover{
	background-color: #FFFFFF;
	color: #44a0ff !important;
}
}

/*---------------------------------------------
	見出し
  ---------------------------------------------*/
h2.title-01 {
    text-align: center;
    font-size: 3em;
    padding-top: 30px;
    margin-bottom: 35px;
}
h3.title-01 {
	font-size: 2.4em;
	line-height: 1.5;
	margin-bottom: 30px;
	text-align: center;
}
h3.title-01 span{
	border-top: 5px solid rgba(172,152,151,0.15);
	border-bottom: 5px solid rgba(172,152,151,0.15);
	display: inline-block;
	margin-left: auto;
	margin-right: auto;
	padding: 0.1em .4em 0.05em;
}
h3.title-01 span.br-sp{
	border: none;
	padding: 0
}
.text-caption,
.text-caption li,
li.text-caption{
	font-size: 1.4em;
	line-height: 1.4
}
.text-indent, li.text-indent {
    padding-left: 1em;
    text-indent: -1em;
}


/*---------------------------------------------
	カラム
  ---------------------------------------------*/
.container-flex {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap}
.block-column {margin-bottom: 100px;}
.block-wide {width: 85% !important}
.block-half {width: 48.5% !important}
.block-medium {width: 65% !important}
.block-small {width: 30% !important}
.block-small-small {width: 20% !important}
.margin-auto{
	margin-left: auto;
	margin-right: auto;
}
.flex-all{flex: 1 0 100%}

/*---------------------------------------------
	見出し
  ---------------------------------------------*/
h2.title{
	text-align: center;
	font-size: 3em;
	padding-top: 30px;
	margin-bottom: 35px;
}
h2.title span{
	font-size: 65%;
	display: block;
}

/* -----------------------------------
   上部のツール類
 * ----------------------------------- */
#dateSetContainer {
	position: relative;
	border-top: 1px solid #999999;
	border-bottom: 1px solid #999999;
	align-items: center;
}
#dateSetContainer img,
#dateSetContainer select,
#dateSetContainer input {vertical-align: middle;}
#dateSetContainer label {vertical-align: text-top;}
#dateSetContainer label input {margin: 0px 0px 0px 3px;}
#dateSetContainerShort {
    border-bottom: 1px solid #999999;
    padding-bottom: 5px;
    margin-bottom: 5px;
    padding-top: 3px;
}

.toolTbl {
	border-collapse: separate;
	border-spacing: 0;
	border-radius: 4px;
	height: 26px;
}
.toolTbl td {
    padding: 2px 2px 0px;
	vertical-align: middle;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #CCC;
	line-height: 1;
}
.toolTbl td.noRightBorder {border-right-style: none;}
.toolTbl a {display: inline;}
.toolTbl a:hover {color: #F60;}
.toolTblShort {margin: 0px auto;}
#backIcon a,
#nextIcon a {
	background-image: url(../images/common/btn_dateset_back.png);
	background-repeat: no-repeat;
	background-position: center center;
	margin-left: 0px;
	margin-right: 3px;
}
#nextIcon a {
	background-image: url(../images/common/btn_dateset_next.png);
	margin-left: 3px;
}
#backIcon a:hover {
	background-image: url(../images/common/btn_dateset_back_hover.png);
	background-color: #FFF;
}
#nextIcon a:hover {
	background-image: url(../images/common/btn_dateset_next_hover.png);
	background-color: #FFF;
}
.toolTbl {height: 28px;}
.toolTbl select{height: 20px !important}
.toolTbl label a{color: #000000}
#displayTime{
	position: relative;
	display: inline-block;
}
#displayTime input{
	width: 130px !important;
	height: 20px !important;
	box-sizing: border-box;
}

/*トグルスイッチ*/
.TinyTools.ToggleSwitch .NubWrapper .OnSide, .TinyTools.ToggleSwitch .NubWrapper .OffSide, .TinyTools.ToggleSwitch .NubWrapper .Nub {
	display: flex !important;
	align-items: center;
	align-content: center;
}
.TinyTools.ToggleSwitch .NubWrapper .OnSide span, .TinyTools.ToggleSwitch .NubWrapper .OffSide span {
    margin: auto;
}

/* -----------------------------------------
   開閉
 * ----------------------------------------- */
.hirakuContainer {
	font-size: 12px;
	border-bottom: 1px dotted #AAAAAA;
    padding-bottom: 5px;
	margin-bottom: 10px;
	margin-top: -5px;
}
.hirakuTojiruBtn {
	padding: 2px 3px 0px 2px;
	position: absolute;
	display: block;
	right: 0px;
	top: 0px;
}
.hiraku,.tojiru{color: #44a0ff}
.hiraku:before {
	font-size: 12px;
	content: "▼開く";
}
.tojiru:before {
	font-size: 12px;
	content: "▲閉じる";
}
.hiraku:hover,.tojiru:hover {color: #FFFFFF;}
.hirakuTojiruBtn:hover {
	color: #FFFFFF;
	border-radius: 3px;
	background-color: #44a0ff;
	cursor: pointer;
}
.hirakuTojiruBtn-wide {
	padding: 4px 7px 2px;
	display: block;
	color: #FFFFFF;
	border-radius: 3px;
	background-color: #44a0ff;
	margin-top: 5px;
	margin-bottom: 5px;
	cursor: pointer;
}
.hiraku-wide:before {
	font-size: 13px;
	content: "閉じる▲";
}
.tojiru-wide:before {
	font-size: 13px;
	content: "開く▼";
}
.hirakuTojiruBtn-wide:hover {
	background-color: #333333;
	cursor: pointer;
}
.komoku {
	display: block;
	float: left;
	color: #FFFFFF;
	margin-right: 2px;
	padding-left: 10px;
	padding-top: 4px;
}

/* -----------------------------------------
   テーブルデザイン
 * ----------------------------------------- */
.tableTdLeft,
.tableTdCenter,
.tableTdRight{
	margin-top: 5px;
	margin-bottom: 5px;
	width: 100%;
}
.tableTdLeft th,
.tableTdCenter th,
.tableTdRight th{
	padding: 4px 3px 1px;
	border: 1px solid #999999;
	font-size: 100%;
	font-weight: normal;
	line-height: 1.2;
	text-align: center;
	background-color: #E7E7E7;
	vertical-align: middle
}
.tableTdLeft td,
.tableTdCenter td,
.tableTdRight td{
	padding: 4px 3px 1px;
	border: 1px solid #999999;
	font-size: 100%;
	line-height: 1.2;
	text-align: left;
	vertical-align: middle;
}
.tableTdCenter td {
	text-align: center;
}
.tableTdRight td {
	text-align: right;
}
th.tableTextCenter,
td.tableTextCenter {
	text-align: center;
}
td.textJustify {
	text-align: justify;
}

/* セルの枠線を消す */
table td.noTopBorder,
table th.noTopBorder {
	border-top-style: none;
}
table td.noBottomBorder,
table th.noBottomBorder {
	border-bottom-style: none;
}
table td.noTopBottomBorder,
table th.noTopBottomBorder {
	border-top-style: none;
	border-bottom-style: none;
}
table td.noLeftBorder {
	border-left-style: none;
}
table td.noRightBorder {
	border-right-style: none;
}
table td.noLeftRightBorder {
	border-left-style: none;
	border-right-style: none;
}
table td.noBorder {
	border: none;
}

/* テーブル横幅調整 */
.table50per {
	width: 50%;
	margin-left: auto;
	margin-right: auto;
}
.table60per {
	width: 60%;
	margin-left: auto;
	margin-right: auto;
}
.table100per {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}
.marginRight1per {margin-right: 1%;}
.marginLeft1per {margin-left: 1%;}

/* レベル */
table.level  {
	width: 100%;
	font-size: 12px;
}
table.level th {
	font-weight: bold;
	line-height: 1.2;
}
table.level td,
table.level th {
	border: 1px solid #AAAAAA;
	padding: 4px 3px 2px;
}
table.level .leftBorder {
	border-left: 1px solid #AAAAAA;
}

table.tbl-level-list{
	margin-top: 5px;
	margin-bottom: 10px;
}
table.tbl-level-list th {
	font-weight: bold;
	line-height: 1.2;
}
table.tbl-level-list td,
table.tbl-level-list th {
    padding: 4px 3px 2px;
}

/* 気象情報 */
table.weather  {
	width: 100%;
	font-size: 12px;
	margin-top: 5px;
	margin-bottom: 5px
}
table.weather th {
	font-weight: bold;
	line-height: 1.2;
}
table.weather td,
table.weather th {
	border: 1px solid #AAAAAA;
	padding: 4px 3px 2px;
}
table.weather .leftBorder {border-left: 1px solid #AAAAAA;}

/* 凡例テーブル */
.hanrei-tbl {font-size: 12px;}
.hanrei-tbl th,
.hanrei-tbl td {
	padding-left: 5px;
	line-height: 1.2;
}


/* 縦スクロールのテーブル */
.scrollTbl-Y {
	height: 100px;
	overflow-y: auto;
	padding-right: 3px;
}
.boxHeight250px {height: 250px;}
.boxHeight500px {height: 500px;}

/*---------------------------------------------
	凡例カラーリング
  ---------------------------------------------*/
.icon-hanrei {
	width: 12px;
    height: 12px;
    display: inline-block;
	vertical-align: middle;
}
/*土砂災害危険度*/
.Doshakikendo-Level2{background-color: rgba(250,245,0,1.00) !important;color: #000000;}
.Doshakikendo-Level3{background-color:rgba(255,70,0,1.00)!important;color: #FFFFFF;}
.Doshakikendo-Level4-1{background-color:rgba(230,45,255,1.00)!important;color: #FFFFFF;}
.Doshakikendo-Level4-2{background-color:rgba(108,0,140,1.00)!important;color: #FFFFFF;}
.Doshakikendo-Level5{background-color:rgba(12,0,12,1.00)!important;color: #FFFFFF;}

/*気象情報*/
.Kisho-Level2{background-color: rgba(242,231,0,1.00)!important;color: #000000;}
.Kisho-Level3{background-color: rgba(255,40,0,1.00)!important; color: #FFFFFF;}
.Kisho-Level4{background-color:rgba(170,0,170,1.00)!important;color: #FFFFFF; }
.Kisho-Level5{background-color:rgba(12,0,12,1.00)!important;color: #FFFFFF;}
.Kisho-Level-no {background-color: #d7d7d7!important;}

/*レーダー雨量*/
.Uryo-1{background-color:rgba(242,242,255,1.00)!important;color: #000000;}
.Uryo-2{background-color:rgba(160,210,255,1.00)!important;color: #000000;}
.Uryo-3{background-color:rgba(33,140,255,1.00)!important;color: #FFFFFF;}
.Uryo-4{background-color:rgba(0,65,255,1.00)!important;color: #FFFFFF;}
.Uryo-5{background-color:rgba(255,255,0,1.00)!important;color: #000000;}
.Uryo-6{background-color:rgba(255,153,0,1.00)!important;color: #000000;}
.Uryo-7{background-color:rgba(255,40,0,1.00)!important;color: #FFFFFF;}
.Uryo-8{background-color:rgba(180,0,104,1.00)!important; color: #FFFFFF;}

/*土壌雨量指数*/
.Soil-1{background-color:rgba(63,172,155,1.00)!important;color: #000000;}
.Soil-2{background-color:rgba(177,203,113,1.00)!important;color: #000000;}
.Soil-3{background-color:rgba(216,179,52,1.00)!important;color: #000000;}
.Soil-4{background-color:rgba(233,71,19,1.00)!important;color: #000000;}
.Soil-5{background-color:rgba(180,60,45,1.00)!important;color: #FFFFFF;}
.Soil-6{background-color:rgba(150,50,100,1.00)!important;color: #FFFFFF;}
.Soil-7{background-color:rgba(130,50,100,1.00)!important;color: #FFFFFF;}
.Soil-8{background-color:rgba(100,50,70,1.00)!important;color: #FFFFFF;}
.Soil-9{background-color:rgba(50,50,70,1.00)!important;color: #FFFFFF;}
.Soil-10{background-color: rgba(12,0,12,1.00)!important;color: #FFFFFF;}

/*⼟砂災害警戒区域等*/
.Kiken_ShiteiR{
	background-color: rgba(255,0,0,1.00)!important;
	border: 1px solid rgba(85,0,0,1.00)
}
.Kiken_ShiteiY{
	background-color: rgba(255,255,0,1.00)!important;
	border: 1px solid rgba(85,0,0,1.00)
}

/*雪崩危険箇所*/
.kiken_Nadare{
	background-color: rgba(171,227,255,1.00)!important;
	border: 1px solid rgba(79,129,189,1.00)
}

/*災害発生箇所*/
.Saigai{
	border: 3px solid rgba(255,0,0,1.00);
	border-radius: 50%
}
.Saigai_Tishou{
	border: 3px solid rgba(80,128,190,1.00);
	border-radius: 50%
}

/* グラフ */
.over-cl { background-color: rgb(108,   0, 140) !important; color: #FFFFFF; }
.over-kp { background-color: rgb(250,  70,   0) !important; color: #FFFFFF; }
.over-cp { background-color: rgb(250, 245,   0) !important; color: #000000; }
.snake-now,
.snake-now::before,
.snake-now::after{ background-color: rgb(0,0,255); color: #FFFFFF !important; }
.rain-now,
.rain-now::before, 
.rain-now::after{ background-color: rgb(0,0,255); color: #FFFFFF !important; }
.soil-now,
.soil-now::before,
.soil-now::after{ background-color: rgb(192,80,77); color: #FFFFFF !important; }
.data-fore1,
.data-fore1::before,
.data-fore1::after{ background-color: rgb(255,0,0); color: #FFFFFF !important; }
.data-fore2,
.data-fore2::before,
.data-fore2::after{ background-color: rgb(255,153, 255); color: #000000 !important; }
.data-fore3,
.data-fore3::before,
.data-fore3::after  { background-color: rgb(255,102,0); color: #000000 !important; }
.bar20px { display: inline-block; margin-right: 3px; padding: 0; height: 6px; width: 20px; }
.line20px { display: inline-block; margin-right: 3px; margin-bottom: 2px; padding: 0; height: 2px; width: 20px; }
.linebox20px{ display: inline-block; position: relative; margin-right: 3px; margin-bottom: 2px; padding: 0; height: 2px; width: 20px; }
.linebox20px::after { display: inline-block; position: absolute; top: -2px; left: 14px; padding: 0; height: 6px; width:  6px; content: ""; }
.boxlinebox20px         { display: inline-block; position: relative; margin-right: 3px; margin-bottom: 2px; padding: 0; height: 2px; width: 20px; }
.boxlinebox20px::before { display: inline-block; position: absolute; top: -2px; left:  0px; padding: 0; height: 6px; width:  6px; content: ""; }
.boxlinebox20px::after  { display: inline-block; position: absolute; top: -2px; left: 14px; padding: 0; height: 6px; width:  6px; content: ""; }

/*統計情報*/
.bglightgray {background-color: #f2f2f2 !important; border: 1px solid #999999;}
.bglightblue {background-color: #dce6f2 !important; border: 1px solid #999999;}

/*---------------------------------------------
	ボタン
  ---------------------------------------------*/
.btn-container{
	margin-top: 30px;
	margin-bottom: 30px;
	text-align: center;
	display: block
}
a.btn {
	padding: 4px 8px;
	margin-right: 1px;
	margin-left: 1px;
	color: #FFFFFF;
	line-height: 1.2;
	display: inline-block;
	text-align: center;
	background-color: #44a0ff;
	border-radius: 4px;
	font-weight: normal!important
}
a.btn:hover {
	background-color: #ff6600;
	color: #FFFFFF;
}
a.btn-small {
	padding: 1px 5px;
}
a.btn-cancel {
	background-color: #d2d2d2;
	color: #000000 !important
}


/*アイコン*/
a.link-external:before{
	font-family: 'FontAwesome';
	content: "\f08e";
	padding-right: 3px
}
a.link-inside:before{
	font-family: 'FontAwesome';
	content: "\f054";
	padding-right: 3px
}
a.link-pdf:before{
	font-family: 'FontAwesome';
	content: "\f1c1";
	padding-right: 3px
}

a.btn-search:before{
	font-family: 'FontAwesome';
	content: "\f002";
	padding-right: 3px
}
a.btn-excel:before{
	font-family: 'FontAwesome';
	content: "\f1c3";
	padding-right: 3px
}
a.btn-print:before{
	font-family: 'FontAwesome';
	content: "\f02f";
	font-size: 15px;
	margin-left: 3px;
	margin-right: 3px;
}
a.icon-download:before{
	font-family: 'FontAwesome';
	content: "\f019";
	padding: 1px 3px;
	background-color: #0000FF;
	color: #FFFFFF;
	border-radius: 3px;
	margin-right: 5px;
}
.kaisetsuBtn a {
    padding: 2px 3px 0px;
    display: inline-block;
    text-align: center;
    font-size: 13px;
    color: #FFFFFF;
    background-color: #44a0ff;
    border-radius: 3px;
}


/* -----------------------------------
   ページの切り替え
 * ----------------------------------- */
.pager {
	margin: 15px auto;
	display: block;
	text-align: center;
}
table .pager {
	margin: 0px auto;
}