@charset 'Shift_JIS';
body {
  margin: 0;
  background-color: #e8eaf3;
  font-family: "ＭＳ ゴシック", "MS Gothic", sans-serif;
}

a {
  color: #0033cc;
  text-decoration: underline;
}

a:hover,
a:focus {
  color: #002699;
  text-decoration: none;
}

.l-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-right: 20px;
  margin-left: 20px;
}

.l-content + .l-content {
  margin-left: 20px;
}

.l-content-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.l-content-item + .l-content-item {
  margin-left: 20px;
}

/* コンテンツ枠 */
.content-wrapper {
  margin-bottom: 20px;
  border-top: 4px solid #64bbff;
  background-color: #fff;
}

/* コンテンツ */
.content {
  padding: 10px 20px;
}

.content-title {
  margin: 0;
  padding-top: 1rem;
  padding-bottom: 1rem;
  font-size: 1.8rem;
}

/* ボタン */
.btn {
  margin: 0;
  padding: .2rem .5rem;
  background-color: rgba(170, 170, 170, .6);
  color: #212529;
  text-decoration: none;
  font-size: .9rem;
}

.btn:hover,
.btn:focus {
  background-color: rgba(102, 102, 102, .6);
  color: #212529;
  text-decoration: none;
}

.btn-active {
  background-color: #1899ff;
  color: #fff;
}

.btn-active:hover,
.btn-active:focus {
  background-color: #0080e4;
  color: #fff;
}

/* テキスト非表示 */
.clear-text {
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
}

/* パンくずリスト */
.breadcrumb {
  background-color: inherit;
}

/* ヘッダー */
.header {
  overflow: hidden;
  margin: 0 0 10px 0;
  padding: 24px 0;
  width: 100%;
  background: #4c8ec2 url('../img/bg-header.png') repeat;
  vertical-align: middle;
}

/* ロゴ */
.logo {
  margin: 0;
  margin-left: 30px;
  width: 465px;
  height: 32px;
  font-size: 1rem;
  line-height: 1;
}

.logo a {
  display: inline-block;
  margin: 0;
  padding: 0;
  width: 465px;
  height: 32px;
  background: url('../img/logo.png') no-repeat left top;
}

/* 発表記号● */
.ann-mark {
  font-family: "ＭＳ ゴシック", "MS Gothic", sans-serif;
}

/* =============================================
    画像
============================================= */
/* メイン画像 */
.main-img {
  width: 384px;
  height: 77px;
  background: url('../img/main.png') no-repeat;
}

/* アイコン画像 */
.icon-img::before,
.icon-img::after {
  display: block;
  background: url('../img/main.png') no-repeat;
  content: '';
}

/* アイコン画像 [before] */
.icon-b-img::before {
  display: block;
  background: url('../img/main.png') no-repeat;
  content: '';
}

/* アイコン画像 [after] */
.icon-a-img::after {
  display: block;
  background: url('../img/main.png') no-repeat;
  content: '';
}

/* ボーダードット画像 */
.border-dot::after {
  display: block;
  overflow: hidden;
  height: 3px;
  background: url('../img/border-dot.png') repeat-x;
  content: '';
}

/* =============================================
    メニュー
============================================= */
/* メニューリスト */
.menu-list {
  margin: 0;
  margin-bottom: 20px;
  padding: 0;
  width: 223px;
  background-color: #fff;
  list-style: none;
}

.menu-list li {
  padding: 0 .5rem;
}

.menu-list li a {
  display: inline-block;
  padding: .25rem .5rem;
  width: 100%;
  color: #212529;
  text-decoration: none;
}

.menu-list li a:hover,
.menu-list li a:focus {
  text-decoration: underline;
}

.menu-list .menu-title {
  display: inline-block;
  padding: 0;
  width: 100%;
  background-color: #64bbff;
  color: #fff;
  vertical-align: middle;
}

.menu-list .menu-title .title {
  margin: 0;
  padding: .3rem;
  /**padding-left: 1rem;*/
  font-size: 1rem;
}

.menu-list .menu-separator::after {
  display: block;
  overflow: hidden;
  margin: .5rem 0;
  padding: 0;
  height: 3px;
  background: url('../img/border-dot.png') repeat-x;
  content: '';
}

.menu-list .menu-arrow::before {
  position: absolute;
  top: 50%;
  left: 3px;
  display: block;
  margin-top: -5px;
  width: 6px;
  height: 10px;
  background-position: -18px -61px;
}

.menu-list .maint-link {
  position: relative;
  padding-left: 1rem;
}

.menu-list .dosya-link {
  position: relative;
  padding-left: 0;
  border-left: none;
  color: #fff;
}

.menu-list .dosya-link::after {
  position: absolute;
  top: 50%;
  right: 16px;
  display: block;
  margin-top: -8px;
  width: 16px;
  height: 16px;
  background-position: -15px -72px;
  content: '';
}

.menu-list .dosya-link:hover,
.menu-list .dosya-link:focus {
  border-left: none;
}

.menu-list .link-anchor {
  position: relative;
  color: #fff;
}

.menu-list .link-anchor::after {
  position: absolute;
  top: 50%;
  right: 16px;
  display: block;
  margin-top: -8px;
  width: 16px;
  height: 16px;
  background-position: -15px -72px;
  content: '';
}

/* データ種別メニューリスト */
.kind-menu-list li a {
  padding: .125rem .5rem;
  border-left: 3px solid #fff;
  color: #212529;
}

.kind-menu-list li a:hover,
.kind-menu-list li a:focus {
  border-left: 3px solid #31a5ff;
}

.kind-menu-list .menu-title {
  position: relative;
}

.kind-menu-list .menu-title::before,
.kind-menu-list .menu-title::after {
  display: block;
  background: url('../img/main.png') no-repeat;
  content: '';
}

.kind-menu-list .menu-title::before {
  position: absolute;
  top: 0;
  left: 50%;
  overflow: hidden;
  margin-left: -67.5px;
  width: 135px;
  height: 5px;
  background-position: 0 -43px;
}

.kind-menu-list .menu-title::after {
  position: absolute;
  top: 100%;
  left: 50%;
  overflow: hidden;
  margin-left: -67.5px;
  width: 135px;
  height: 5px;
  background-position: 0 -49px;
}

.kind-menu-list .menu-title .title {
  margin: 0;
  padding: 1rem;
  padding-top: 14.5px;
  padding-bottom: 12px;
  font-size: 1rem;
}

/* 情報提供について */
.info-link-btn {
  position: relative;
  display: block;
  margin: 0 auto;
  padding: .5rem;
  width: 200px;
  border: 2px solid #616161;
  border-radius: 8px;
  background-color: #fff;
  text-align: center;
  text-decoration: none;
}

.info-link-btn:hover,
.info-link-btn:focus {
  background-color: #fff;
  text-decoration: underline;
}

.info-link-btn::after {
  position: absolute;
  top: 50%;
  right: 10px;
  display: block;
  margin-top: -3px;
  width: 10px;
  height: 6px;
  background-position: 0 -61px;
  content: '';
}

/* =============================================
    地図
============================================= */
/* 地図コンテンツ */
.map-content {
  width: 540px;
}

/* 地図枠 */
.map-wrapper {
  position: relative;
}

/* 地図 */
.map {
  position: relative;
  margin: 0 auto;
  width: 280px;
  height: 350px;
}

.map img {
  position: absolute;
  top: 0;
  left: 0;
}

/* 地図説明 */
.map-desc {
  display: block;
  margin-bottom: 1rem;
}

.map-desc p {
  margin: 0;
  font-size: .8rem;
}

/* データ種別ボタンリスト */
.kind-btn-list {
  margin: 0;
  margin-bottom: 1rem;
  padding: 0;
  list-style: none;
  font-size: 0;
}

.kind-btn-list li {
  display: inline-block;
}

.kind-btn-list li + li {
  margin-left: 5px;
}

/* 種別ラジオボタン */
input[name='kind'] {
  display: none;
}

/* 地図凡例 */
.legend {
  position: absolute;
  right: 0;
  bottom: 40px;
}

/* 凡例表 */
.legend-table {
  margin: 0;
  font-size: .9rem;
}

.legend-table th,
.legend-table td {
  vertical-align: middle;
}

/* 凡例レベルボックス */
.legend-lv {
  display: inline-block;
  margin-right: .3rem;
  margin-left: .3rem;
  width: 12px;
  height: 12px;
  vertical-align: middle;
}

.legend-lv4 {
  background-color: #010101;
  color: #010101;
}

.legend-lv3 {
  background-color: #ca00ff;
  color: #ca00ff;
}

.legend-lv2 {
  background-color: #ff2801;
  color: #ff2801;
}

.legend-lv1 {
  background-color: #ffaa01;
  color: #ffaa01;
}

/* =============================================
    お知らせ
============================================= */
/* お知らせコンテンツ */
.notice-content {
  width: 460px;
}

/* お知らせ */
.notice-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -ms-flex-align: center;
}

/* お知らせ日付 */
.notice-date {
  margin: 0;
  margin-left: 1rem;
  padding: 0;
  width: 130px;
  text-align: center;
}

/* お知らせ更新枠 */
.notice-update-wrapper {
  display: inline-block;
  margin-left: 1rem;
  width: 16px;
  height: 14px;
}

/* お知らせ更新 */
.notice-update {
  display: block;
  width: 16px;
  height: 14px;
  background-position: -32px -72px;
}

/* お知らせ 一覧ボタン */
.notice-list-btn {
  position: relative;
  margin-left: auto;
  padding: 0;
  width: 80px;
  height: 22px;
  border-radius: 10px;
  color: #fff;
}

.notice-list-btn::after {
  position: absolute;
  top: 50%;
  right: 3px;
  display: block;
  margin-top: -5px;
  width: 6px;
  height: 10px;
  background-position: -25px -61px;
  content: '';
}

/* =============================================
    気象注警報
============================================= */
/* 気象注警報コンテンツ */
.weather-content {
  width: 1020px;
}

/* =============================================
    画面説明
============================================= */
/* 説明 */
.desc-content-wrapper {
  position: relative;
  margin: 0;
  padding: 20px 0;
  background-color: #fff;
}

/* 説明タイトル */
.desc-title {
  position: relative;
  margin: 0;
  margin-left: -5px;
  padding-left: 5px;
  width: 220px;
  background-color: #192d3d;
  color: #fff;
  font-weight: normal;
  font-size: 1rem;
}

/* 説明タイトル折返し */
.desc-title-return::before {
  position: absolute;
  top: 100%;
  left: 0;
  display: block;
  border: none;
  border-right: solid 10px #0071ca;
  border-bottom: solid 5px transparent;
  content: '';
}

/* 説明インナータイトル */
.desc-inner-title {
  display: block;
  padding: .4rem 1rem;
  width: 100%;
  background-color: #64bbff;
}

/* 説明テキスト */
.desc-text {
  margin: 0 2rem;
  padding-top: .5rem;
  padding-bottom: 1rem;
}

.desc-text p {
  margin: 0;
  font-size: .9rem;
  line-height: 2;
}

/* =============================================
    Footer
============================================= */
/* フッター */
.footer {
  width: 100%;
  background-color: #64bbff;
  color: #fff;
  text-align: center;
}

/* ページトップへ */
.pagetop {
  margin: 0;
  margin-bottom: 40px;
  padding: 0;
  background-color: #e8eaf3;
  text-align: center;
}

.pagetop a {
  position: relative;
  display: inline-block;
  width: 94px;
  height: 26px;
  background-position: 0 0;
}

.pagetop a:hover,
.pagetop a:focus {
  text-decoration: underline;
}

/* ページトップ下 */
.pagetop-bottom {
  position: relative;
}

.pagetop-bottom::after {
  position: absolute;
  top: 100%;
  left: 50%;
  display: block;
  margin-left: -190.5px;
  width: 381px;
  height: 15px;
  background-color: rgba(0, 0, 0, 0);
  background-position: 0 -27px;
  content: '';
}

/* フッター リンクタイトル */
.footer-link-title {
  position: relative;
  margin: 0 0 0 3rem;
  padding: 0;
  width: auto;
  text-align: left;
  font-size: 1.2rem;
}

.footer-link-title::before {
  position: absolute;
  top: 50%;
  left: -21px;
  display: block;
  margin-top: -9px;
  width: 14px;
  height: 18px;
  background-position: 0 -72px;
  content: '';
}

/* フッター リンク一覧 */
.footer-link-list {
  margin: 1rem 0;
  padding: 0;
  list-style: none;
}

.footer-link-list li {
  display: inline-block;
}

.footer-link-list li a {
  position: relative;
  display: inline-block;
  margin-left: 1.5rem;
  color: #fff;
}

.footer-link-list li a:hover,
.footer-link-list li a:focus {
  color: #fff;
  text-decoration: none;
}

/* フッターリンク矢印 */
.footer-link-arrow::before {
  position: absolute;
  top: 50%;
  left: -9px;
  display: block;
  margin-top: -5px;
  width: 6px;
  height: 10px;
  background-position: -11px -61px;
  content: '';
}

/* コピーライト */
.copylight {
  margin: 0;
  padding-top: .5rem;
  padding-bottom: .5rem;
  background-color: #4c8ec2;
  color: #fff;
  letter-spacing: 1px;
  line-height: 2;
}

/* ページTOPナビ */
.pagetop-nav {
  position: fixed;
  right: 40px;
  bottom: 10px;
  z-index: 999;
  padding: 0;
  -webkit-transition: .5s;
          transition: .5s;
}

.pagetop-nav a {
  display: inline-block;
  padding: .7rem 1rem;
  border-radius: 8px;
  background-color: #1e88e5;
  -webkit-box-shadow: 0 0 6px 0 rgba(0, 0, 0, .5);
          box-shadow: 0 0 6px 0 rgba(0, 0, 0, .5);
  color: #fff;
  vertical-align: middle;
  text-decoration: none;
  white-space: nowrap;
  opacity: .9;
  cursor: pointer;
}

.pagetop-nav a:hover {
  -webkit-box-shadow: 0 0 1px 0 rgba(0, 0, 0, .5);
          box-shadow: 0 0 1px 0 rgba(0, 0, 0, .5);
  text-decoration: none;
}

.pagetop-nav-hide {
  -webkit-transform: translateY(200%);
          transform: translateY(200%);
}

/* =============================================
    Banner
============================================= */
/* [バナー画像] */
.bnr-img {
  width: 208px;
  height: 181px;
  background: url('../img/bnr.png') no-repeat;
}

/* [バナー画像] 美の国あきたネット */
.bnr-img-akitanet {
  width: 208px;
  height: 42px;
  background-position: 0 0;
}

/* [バナー画像] 河川砂防課 */
.bnr-img-sabou {
  width: 208px;
  height: 42px;
  background-position: 0 -51px;
}

/* [バナー画像] Facebook */
.bnr-img-facebook {
  width: 208px;
  height: 42px;
  background-position: 0 -95px;
}

/* [バナー画像] Twitter */
.bnr-img-twitter {
  width: 208px;
  height: 42px;
  background-position: 0 -139px;
}