@charset "UTF-8";
/* CSS Document */

/* -----------------------------------
    汎用クラス
   ----------------------------------- */
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: 13px; color: #333333; line-height: 1.5; background-color: #FFFFFF; -webkit-text-size-adjust : none; margin: 0; }

@media (max-width: 639px) {
  body { font-size: 14px;}
}
a { text-decoration: none; }
a:link { color: #00F; }
a:visited { color: #800080; }
a:hover { color: #F60; transition: all 0.3s linear; }
a:active { color: #F00; }
a:hover img { filter: alpha(opacity=60); opacity: 0.6; transition: all 0.3s linear; }

.textRed { color: #F00; }

.marginTop0px { margin-top: 0px !important; }
.marginTop3px { margin-top: 3px !important; }
.marginTop5px { margin-top: 5px !important; }
.marginTop10px { margin-top: 10px !important; }
.marginTop15px { margin-top: 15px !important; }
.marginTop20px { margin-top: 20px !important; }
.marginTop30px { margin-top: 30px !important; }
.marginTop35px { margin-top: 35px !important; }
.marginTop50px { margin-top: 50px !important; }
.marginTop100px { margin-top: 100px !important; }
.marginBottom0px { margin-bottom: 0px !important; }
.marginBottom3px { margin-bottom: 3px !important; }
.marginBottom5px { margin-bottom: 5px !important; }
.marginBottom10px { margin-bottom: 10px !important; }
.marginBottom15px { margin-bottom: 15px !important; }
.marginBottom20px { margin-bottom: 20px !important; }
.marginBottom30px { margin-bottom: 30px !important; }
.marginTopBottom5px { margin-top: 5px !important; margin-bottom: 5px !important; }
.marginTopBottom10px { margin-top: 10px !important; margin-bottom: 10px !important; }
.marginLeft0px { margin-left: 0px !important; }
.marginLeft5px { margin-left: 5px !important; }
.marginLeft10px { margin-left: 10px !important; }
.marginLeft15px { margin-left: 15px !important; }
.marginLeft20px { margin-left: 20px !important; }
.marginRight10px { margin-right: 10px !important; }
.marginRight20px { margin-right: 20px !important; }
.marginRight30px { margin-right: 30px !important; }
.marginRight50px { margin-right: 50px !important; }
.marginRightLeft5px { margin-right: 5px !important; margin-left: 5px !important;}
.marginRightLeft10px { margin-right: 10px !important; margin-left: 10px !important;}
.marginRightLeft15px { margin-right: 15px !important; margin-left: 15px !important;}
.paddingLeft5px { padding-left: 5px !important; }
.paddingLeft10px { padding-left: 10px !important; }
.paddingLeft20px { padding-left: 20px !important; }
.paddingRight0px { padding-right: 0px !important; }
.paddingRight5px { padding-right: 5px !important; }
.paddingRight10px { padding-right: 10px !important; }
.paddingRight20px { padding-right: 20px !important; }
.paddingTop5px { padding-top: 5px !important; }
.paddingBottom10px { padding-bottom: 10px !important; }
.paddingBottom30px { padding-bottom: 30px !important; }
.paddingTopBottom2px { padding-top: 2px !important; padding-bottom: 2px; }


/* -----------------------------------
    ヘッダー
   ----------------------------------- */
#main-header {
	height: 35px;
}
h1 {
	width: 940px;
	margin-left: auto;
	margin-right: auto;
}
h1 a {
	width: 400px;
	display: block;
}
h1 a img {
	width: 100%;
}
h1 a img#h1-pc {
	display: block;
}
h1 a img#h1-sp {
	display: none;
}

@media (max-width: 768px) {
#main-header {
	height: 50px;
	border-bottom: 1px solid #666666;
}
h1 {
	width: 100%;
}
h1 a {
	padding-top: 10px;
	padding-left: 5px;
}
}
@media (max-width:400px) {
h1 {
	width: 100%;
}
h1 a img#h1-pc {
	display: none;
}
h1 a img#h1-sp {
	display: block;
}		
h1 a {
	padding-top: 0px;
	width: 200px;
	display: block;
}
}


/* -----------------------------------
    ナビゲーション
   ----------------------------------- */
@media screen and (min-width: 768px) {
.drawer--right .drawer-hamburger,
.drawer--right.drawer-open .drawer-nav,
.drawer--right.drawer-open .drawer-navbar .drawer-hamburger {
	display:none
}
.drawer-nav#drawer-nav-pc {
	background-color: #4a9cf7;
	position: relative;
	width: 100%;
	right: 0;
}
.drawer-nav#drawer-nav-pc .drawer-menu {
	width: 95%;
	margin-left: auto;
	margin-right: auto;
	}
.drawer-nav#drawer-nav-pc .drawer-menu {
	display: table;
}
.drawer-nav#drawer-nav-pc .drawer-menu li {
	display: table-cell;
	border-right: 1px solid #FFFFFF;
}
.drawer-nav#drawer-nav-pc .drawer-menu li:first-child {
	border-left: 1px solid #FFFFFF;	
} 	
.drawer-nav#drawer-nav-pc .drawer-menu li a {
	font-weight: normal;
	font-size: 14px;
	display: block;
	text-align: center
}
.drawer-nav#drawer-nav-pc .drawer-menu li#active a,
	.drawer-nav#drawer-nav-pc .drawer-menu li a:hover{
	background-color: #0057b9;	
	}	
}
@media screen and (min-width: 900px) {
.drawer-nav#drawer-nav-pc .drawer-menu {
	width: 940px;
}
}

/* -----------------------------------
   カラム
 * ----------------------------------- */

#contents-main {
	width: 940px;
	margin: 0px auto 60px;
}
.content-block {
	padding-left: 15px;
	padding-right: 15px;
}
.column-photo,
.column-photo-80per {
	width: 90%;
	margin: 10px auto;
}
.column-photo-80per {
	width: 80%;
}
.column-photo img,
.column-photo-80per img{
	width: 100%;
}
.per-90 {
	width: 90% !important;
	margin-left: auto;
	margin-right: auto;
}
#photo-150px {
	width: 150px !important;
    display: block;
}
#photo-150px img {
	width: 100%
}
@media (max-width: 768px) {
#contents-main {
	width: 95%;
	margin-bottom: 20px;
}
.column-photo,
.column-photo-80per,
.per-90 {
	width: 100% !important;
	}
}
@media (max-width: 640px) {
#photo-150px {
	width: auto !important;
}
	
}

/* -----------------------------------
   見出し
 * ----------------------------------- */

h2 {
	margin-top: 20px;
	margin-bottom: 10px;
	font-size: 22px;
	font-weight: bold;
	background-color: #D2E7FF;
	color: #4a9cf7;
	padding: 10px 15px 6px;
}
h3 {
	margin-top: 20px;
	margin-bottom: 10px;
	font-size: 20px;
	font-weight: bold;
	border-bottom: 3px solid #D2E7FF;
}
h4 {
	text-align: center;
}
h4 span {
	display: inline-block;
	font-size: 15px;
	background-color: #DADADA;
	padding: 2px 15px 0px;
	margin-bottom: 20px;
}
a.text-link:before {
	content: "▶"
}
.caption {
	font-size: 12px;
	line-height: 1.2;
	margin-top: 10px;
	margin-bottom: 10px;
}
@media (max-width: 640px) {
h2 {
	margin-top: 0px;
	font-size: 18px;
	padding: 8px 10px 4px;
}
h3 {
	margin-top: 12px;
	margin-bottom: 5px;
	font-size: 16px;
}
}


/* -----------------------------------------
   テーブルデザイン
 * ----------------------------------------- */
.tableTdLeft,
.tableTdCenter {
	width: 100%;
}
.tableTdLeft th,
.tableTdCenter th {
	padding: 4px 3px 1px;
	border: 1px solid #bbbbbb;
	font-size: 100%;
	font-weight: normal;
	line-height: 1.2;
	text-align: center;
	background-color: #dedede;
}
.tableTdLeft td,
.tableTdCenter td {
	padding: 4px 3px 1px;
	border: 1px solid #bbbbbb;
	line-height: 1.2;
	text-align: left;
	word-break:break-all
}
.tableTdCenter td {
	text-align: center;
}
th.tableTextCenter,
td.tableTextCenter {
	text-align: center;
}
td.textJustify {
	text-align: justify;
}

.table-hover>tbody>tr:hover>td,
.table-hover>tbody>tr:hover>th {
	background-color: #F6FCFD
}

/* 凡例カラーリング */
.level-4 {
	background-color: #6c008c !important;
	color: #FFFFFF;
	text-align: center;
}
.level-3 {
	background-color: #e62dff !important;
	color: #FFFFFF;
	text-align: center;
}
.level-2 {
	background-color: #fa4600 !important;
	color: #FFFFFF;
	text-align: center;
}
.level-1 {
	background-color: #faf500 !important;
	text-align: center;
}

@media (max-width: 640px) {
.tableTdLeft th,
.tableTdCenter th,
.tableTdLeft td,
.tableTdCenter td {
	font-size: 13px;
}

}

/* -----------------------------------
   peger
 * ----------------------------------- */
#peger {
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: space-around;
	justify-content: space-around;
	width: 820px;
	margin: 15px auto 20px;
	text-align: center;
}
#peger li {
    display: table;
}
#peger li a {
	color: #0057b9;
	height: 50px;
	width: 260px;
	display: table;
	font-size: 1.1em;
	text-align: center;
	border: 2px solid #0057b9;
	border-radius: 6px;
	font-weight: bold;
	background-color: #FFFFFF;
}
#peger li a span {
    display : table-cell;
    vertical-align : middle;
    height : 40px;
}
#peger li a span:hover {
	color: #FFFFFF;
	transition: all 0.2s linear;
	background-color: #0057b9;
}
@media screen and (max-width: 768px) {
#peger {
	width: 260px;
	display: block;
}
#peger li {
    display: block;
	margin-bottom: 10px;
}
}

/* -----------------------------------
   ナンバリング
 * ----------------------------------- */

ol.number {
	counter-reset: item;
	list-style: none;
}
.number li {
	display: block;
	padding-left: 2em;
}
.number li:before {
	content: counters(item, "-")".";
	counter-increment: item;
	display: inline-block;
	margin-right: 12px;
	margin-left: -2em;
}

/* -----------------------------------
   操作方法ナンバリング
 * ----------------------------------- */
dl.manual-text {
	counter-reset: item;
	width: 80%;
	margin-left: auto;
	margin-right: auto;
}
.manual-text dt {
	display: block;
	margin-top: 10px;
	padding-left: 2em;
	margin-bottom: 10px;
}
.manual-text dt:before {
	content: counters(item, "-")"";
	counter-increment: item;
	width: 18px;
	height: 18px;
	background-color: #FF0000;
	color: #FFFFFF;
	display: inline-block;
	text-align: center;
	margin-right: 8px;
	margin-left: -2em;
}
.manual-text dd {
	margin-bottom: 30px;
	width: 95%;
	margin-left: auto;
	margin-right: auto;
}
.manual-text dd img {
	width: 100%;
}
.manual-text dd.photo-half {
	width: 45%;
}
@media (max-width: 667px) {
.manual-text.per80 {
	width: 100%;
}
}
@media (max-width: 640px) {
.manual-text dt {
	margin-top: 5px;
	font-size: 13px;
	padding-left: 1.8em;
}
.manual-text dt:before {
	width: 16px;
	height: 16px;
	margin-right: 5px;
	margin-left: -1.8em;
}
}

/* -----------------------------------
   ページ内リンク
 * ----------------------------------- */
#list-words {
	width: 80%;
	margin-left: auto;
	margin-right: auto;
	column-count: 4;
	-moz-column-count: 4;
}
#list-words li a {
	display: block;
}
#list-words li a:before  {
	content: '▶';
	font-size: 11px;
}

#words-center {
	margin-left: 10%;
	margin-right: 10%;
}
#term-list {
	margin-top: 10px;
}
#term-list dt {
	float: left;
}
#term-list dd {
	padding-left: 9em;
}

@media (max-width: 768px) {
#list-words {
	width: 100%;
	column-count: 2;
	-moz-column-count: 2;
}
}
@media (max-width: 400px) {
#list-words {
	column-count: 1;
	-moz-column-count: 1;
}
}


/* -----------------------------------
   ページトップ
 * ----------------------------------- */
#page-top {
	background-color: #4a9cf7;
	background-image: url(../images/arrow_top.png);
	display: block;
	right: 2%;
	width: 50px;
	height: 50px;
	position: relative;
	z-index: 5;
}
#page-top img {
    width: 100%;
}
#page-top:hover {
    cursor: pointer;
}

/*---------------------------------------------
	凡例カラーリング
  ---------------------------------------------*/
/*土砂災害危険度*/
.Doshakikendo-Level2{background-color: rgba(242,231,0,1.00) !important;color: #000000;}
.Doshakikendo-Level3{background-color:rgba(255,40,0,1.00)!important;color: #FFFFFF;}
.Doshakikendo-Level4{background-color:rgba(170,0,170,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;}