/*気象庁HP市町村選択メニューCSSを改変しています*/

a.area-item-navy {
  padding-left:3px;
  padding-right:3px;
  color:#f9fafb;
  background-color:#0060af;
  background-image:-webkit-linear-gradient(top,#0060af,#003e70);
  background-image:linear-gradient(to bottom,#0060af,#003e70);
  text-align:center;
  overflow:visible;
  white-space:nowrap;
  text-overflow:ellipsis
}

a.area-item-navy.disabled {
  opacity:1;
  background-image:none;
  color:#303f4c
}

.area-active a.area-item-navy {
  color:#000;
  background-color:#f9fafb;
  background-image:none
}

/*文字の色*/
li.area-item-gray a, li.area-item-white a,
li.area-item-gray1 a, li.area-item-white1 a,
li.area-item-gray2 a, li.area-item-white2 a,
li.area-item-gray3 a, li.area-item-white3 a,
li.area-item-gray4 a, li.area-item-white4 a,
li.area-item-gray5 a, li.area-item-white5 a {
  color:#000
}


/*URLの下線を消す*/
.area-contents a{
  text-decoration:none;
}

/*@media (min-width:993px) {*/
@media (hover: hover) {
  a.area-item-navy:hover {
    background-color:#f9fafb;
    background-image:none;
    color:#000
  }
/*カーソル効果*/
  li.area-item-gray:not(:first-child) a:hover,
  li.area-item-white:not(:first-child) a:hover {
    color:#f9fafb;
    background-color:#0060af;
    background-image:none
  }
  li.area-item-gray1:not(:first-child) a:hover,
  li.area-item-white1:not(:first-child) a:hover {
    color:#ffefef;
    background-color:#e93a3a;
    background-image:none
  }
  li.area-item-gray2:not(:first-child) a:hover,
  li.area-item-white2:not(:first-child) a:hover {
    color:#fafcff;
    background-color:#2478cc;
    background-image:none
  }
  li.area-item-gray3:not(:first-child) a:hover,
  li.area-item-white3:not(:first-child) a:hover {
    color:#fffcfa;
    background-color:#f78718;
    background-image:none
  }
  li.area-item-gray4:not(:first-child) a:hover,
  li.area-item-white4:not(:first-child) a:hover {
    color:#fafaff;
    background-color:#1f1fc7;
    background-image:none
  }
  li.area-item-gray5:not(:first-child) a:hover,
  li.area-item-white5:not(:first-child) a:hover {
    color:#f7fcfa;
    background-color:#28d188;
    background-image:none
  }
}
@media (hover: none) {
  li.area-item-gray1:not(:first-child) a:active,
  li.area-item-white1:not(:first-child) a:active {
    color:#ffefef;
    background-color:#e93a3a;
    background-image:none
  }
  li.area-item-gray2:not(:first-child) a:active,
  li.area-item-white2:not(:first-child) a:active {
    color:#fafcff;
    background-color:#2478cc;
    background-image:none
  }
  li.area-item-gray3:not(:first-child) a:active,
  li.area-item-white3:not(:first-child) a:active {
    color:#fffcfa;
    background-color:#f78718;
    background-image:none
  }
  li.area-item-gray4:not(:first-child) a:active,
  li.area-item-white4:not(:first-child) a:active {
    color:#fafaff;
    background-color:#1f1fc7;
    background-image:none
  }
  li.area-item-gray5:not(:first-child) a:active,
  li.area-item-white5:not(:first-child) a:active {
    color:#f7fcfa;
    background-color:#28d188;
    background-image:none
  }
}


.area-dropdown {
  flex-grow:1;
  display:flex;
  align-items:center;
  border-left:0px solid #f9fafb;
  border-right:0px solid #f9fafb;
  height:auto;
}

.area-dropdown.area-no-category {
  border-right:none;
  max-width:initial
}

.area-dropdown.area-no-category {
  display:none
}

.area-megamenu {
  /*display:none;*/
  /*position:absolute;*/
  position:relative;
  top:10px;
  left:0;
  width:100%;
  min-height:0;
  max-height:800px;
  border-top:1px solid #ccc;
  overflow-x:hidden;
  overflow-y:auto;
  /*z-index:300*/
}

@media (-ms-high-contrast:none),(-ms-high-contrast:active) {
  .area-megamenu {
    overflow-y:scroll;
  }
}


.area-contents {
  box-sizing:border-box;
  width:100%;;
}

.area-contents>a {
  /*position:relative;*/
}

/* 下三角マーク */
.area-select-space {
  /*position: relative;*/
  font-size: clamp(12.5px,1.5vw,16px);
  left: 20px;
  margin-top: 10px;
}
.area-select-space>a{
	position: relative;
	left: 5px;
	color: black;
}
.area-select-space::before {
  content:"";
  position:relative;
  width:0;
  height:0;
  border-style:solid;
  border-right: clamp(4px,1.5vw,9px) solid transparent;
  border-left: clamp(4px,1.5vw,9px) solid transparent;
  border-top: clamp(6px,1.5vw,13px)solid #555555;
  border-bottom: 0;
  top:  clamp(12px,1.5vw,17px);
  left: 1px;
  /*top: 50%;*/
  /*left: -5px;*/
  /*margin-top: -5px;*/
}

.area-contents.area-active>a::before {
  border-top:0;
  border-right:5px solid transparent;
  border-bottom:5px solid;
  border-left:5px solid transparent
}

.area-contents>a.disabled::before {
  border-top:5px solid transparent
}

.area-contents>a::before {
  left:calc(50% + 19px)
}

.area-contents {
  flex-grow:1;
  border-right:0px solid #f9fafb;
  z-index:11;
}

.area-contents>a.area-item-navy {
  flex-grow:1;
  display:block;
  line-height:50px;
}

.area-contents.area-active>.area-megamenu {
  display:block
}

.area-contents {
  width:40%
}

ul.area-select-ul>li.area-active .area-megamenu {
  display:flex;
  flex-wrap:wrap;
  border-top:1px solid #ccc
}


/*メニュー全体の配色を決める*/
ul.area-select-menu {
  display:flex;
  align-content:flex-start;
  flex-wrap:wrap;
  flex-direction:row;
  width:100%;
  margin:0;
  padding:0;
  list-style-type:none;
  background-color:#f9fafb;
  border-bottom:1px solid #ccc
}
ul.area-select-menu0 {
  display:flex;
  justify-content: center;
  align-content:flex-start;
  flex-wrap:wrap;
  flex-direction:row;
  width:100%;
  margin:0;
  padding:0;
  list-style-type:none;
  border-bottom:1px solid #ccc
}
.p1{background-color:#fffafa;}
.p2{background-color:#fafcff;}
.p3{background-color:#fffcfa;}
.p4{background-color:#fafaff;}
.p5{background-color:#f7fcfa;}

ul.area-select-menu1 {
  display:flex;
  align-content:flex-start;
  flex-wrap:wrap;
  flex-direction:row;
  width:100%;
  margin:0;
  padding:0;
  list-style-type:none;
  background-color:#fffafa;
  border-bottom:1px solid #ccc
}
ul.area-select-menu2 {
  display:flex;
  align-content:flex-start;
  flex-wrap:wrap;
  flex-direction:row;
  width:100%;
  margin:0;
  padding:0;
  list-style-type:none;
  background-color:#fafcff;
  border-bottom:1px solid #ccc
}
ul.area-select-menu3 {
  display:flex;
  align-content:flex-start;
  flex-wrap:wrap;
  flex-direction:row;
  width:100%;
  margin:0;
  padding:0;
  list-style-type:none;
  background-color:#fffcfa;
  border-bottom:1px solid #ccc
}
ul.area-select-menu4 {
  display:flex;
  align-content:flex-start;
  flex-wrap:wrap;
  flex-direction:row;
  width:100%;
  margin:0;
  padding:0;
  list-style-type:none;
  background-color:#fafaff;
  border-bottom:1px solid #ccc
}
ul.area-select-menu5 {
  display:flex;
  align-content:flex-start;
  flex-wrap:wrap;
  flex-direction:row;
  width:100%;
  margin:0;
  padding:0;
  list-style-type:none;
  background-color:#f7fcfa;
  border-bottom:1px solid #ccc
}

/*メニューのレイアウト*/
/*ul.area-select-menu:nth-child(4n+2),
ul.area-select-menu:nth-child(4n+3) {
  background-color:#e4eef4
}*/
ul.area-select-menu1:nth-child(2n) {
  background-color:#ffe5e5
}
ul.area-select-menu2:nth-child(2n) {
  background-color:#e5f2ff
}
ul.area-select-menu3:nth-child(2n) {
  background-color:#fff2e5
}
ul.area-select-menu4:nth-child(2n) {
  background-color:#e5e5ff
}
ul.area-select-menu5:nth-child(2n) {
  background-color:#bfffe6
}

ul.area-select-menu>li:first-child, 
ul.area-select-menu1>li:first-child,
ul.area-select-menu2>li:first-child,
ul.area-select-menu3>li:first-child,
ul.area-select-menu4>li:first-child,
ul.area-select-menu5>li:first-child {
  display:flex;
  align-items:center;
  margin:0 5px;
  height:35px;
  width:100%
}
ul.area-select-menu0>li:first-child {
  display:flex;
  justify-content: center;
  align-items:center;
  margin:0 5px;
  height:35px;
  width:100%
}

ul.area-select-menu>li:first-child>a, 
ul.area-select-menu0>li:first-child>a,
ul.area-select-menu1>li:first-child>a,
ul.area-select-menu2>li:first-child>a,
ul.area-select-menu3>li:first-child>a,
ul.area-select-menu4>li:first-child>a,
ul.area-select-menu5>li:first-child>a {
  pointer-events:none;
  text-shadow:-1px -1px 0 #fff,1px 1px 0 #d4d3d3;
  font-weight:bolder;
}

ul.area-select-menu>li:first-child>a.area-center-link,
ul.area-select-menu0>li:first-child>a.area-center-link,
ul.area-select-menu1>li:first-child>a.area-center-link,
ul.area-select-menu2>li:first-child>a.area-center-link,
ul.area-select-menu3>li:first-child>a.area-center-link,
ul.area-select-menu4>li:first-child>a.area-center-link,
ul.area-select-menu5>li:first-child>a.area-center-link {
  pointer-events:all;
  text-shadow:none;
  font-weight:400;
  margin-left:auto;
  margin-right:5px;
  padding:0 10px;
  border-radius:20px;
  color:#007bff
}

ul.area-select-menu>li:first-child>a.area-center-link.selected,
ul.area-select-menu0>li:first-child>a.area-center-link.selected,
ul.area-select-menu1>li:first-child>a.area-center-link.selected,
ul.area-select-menu2>li:first-child>a.area-center-link.selected,
ul.area-select-menu3>li:first-child>a.area-center-link.selected,
ul.area-select-menu4>li:first-child>a.area-center-link.selected,
ul.area-select-menu5>li:first-child>a.area-center-link.selected {
  color:#fff
}

ul.area-select-menu>li:not(:first-child),
ul.area-select-menu0>li:not(:first-child),
ul.area-select-menu1>li:not(:first-child),
ul.area-select-menu2>li:not(:first-child),
ul.area-select-menu3>li:not(:first-child),
ul.area-select-menu4>li:not(:first-child),
ul.area-select-menu5>li:not(:first-child) {
  border-right:1px solid #ccc;
  margin:2px 0;
  padding:5px 5px;
}

/*カーソル時の文字背景*/
ul.area-select-menu>li:not(:first-child)>a,
ul.area-select-menu0>li:not(:first-child)>a,
ul.area-select-menu1>li:not(:first-child)>a,
ul.area-select-menu2>li:not(:first-child)>a,
ul.area-select-menu3>li:not(:first-child)>a,
ul.area-select-menu4>li:not(:first-child)>a,
ul.area-select-menu5>li:not(:first-child)>a {
  max-width:15.5rem;
  border-radius:20px;
  padding:0 10px;
  margin: 0;
  white-space:nowrap;
  overflow:visible;
  text-overflow:ellipsis;
}

ul.area-select-menu>li:last-child,
ul.area-select-menu0>li:last-child,
ul.area-select-menu1>li:last-child,
ul.area-select-menu2>li:last-child,
ul.area-select-menu3>li:last-child,
ul.area-select-menu4>li:last-child,
ul.area-select-menu5>li:last-child {
  border-right:none
}



@media (min-width:993px) {
  ul.area-select-menu>li:first-child>a.area-center-link:hover,
  ul.area-select-menu1>li:first-child>a.area-center-link:hover,
  ul.area-select-menu2>li:first-child>a.area-center-link:hover,
  ul.area-select-menu3>li:first-child>a.area-center-link:hover,
  ul.area-select-menu4>li:first-child>a.area-center-link:hover,
  ul.area-select-menu5>li:first-child>a.area-center-link:hover {
    color:#f9fafb;
    background-color:#0060af
  }
}
@media (max-width:992px) {
  .area-megamenu {
    max-height:500px;
    -webkit-overflow-scrolling:touch
  }
  
  ul.area-select-menu,
  ul.area-select-menu1,
  ul.area-select-menu2,
  ul.area-select-menu3,
  ul.area-select-menu4,
  ul.area-select-menu5, {
    width:100%
  }
  
  ul.area-select-menu:nth-child(odd),
  ul.area-select-menu1:nth-child(odd),
  ul.area-select-menu2:nth-child(odd),
  ul.area-select-menu3:nth-child(odd),
  ul.area-select-menu4:nth-child(odd),
  ul.area-select-menu5:nth-child(odd) {
    border-right:none
  }
  
  ul.area-select-menu:nth-child(4n+2),
  ul.area-select-menu:nth-child(4n+3) {
    background-color:#f9fafb
  }
  ul.area-select-menu:nth-child(even) {
    background-color:#e4eef4
  }
  ul.area-select-menu1:nth-child(2n) {
    background-color:#ffe5e5
  }
  ul.area-select-menu2:nth-child(2n) {
    background-color:#e5f2ff
  }
  ul.area-select-menu3:nth-child(2n) {
    background-color:#fff2e5
  }
  ul.area-select-menu4:nth-child(2n) {
    background-color:#e5e5ff
  }
  ul.area-select-menu5:nth-child(2n) {
    background-color:#bfffe6
  }
  
  /*カーソル効果*/ /*画面サイズ指定しなくてもいいかも、上と統合する？*/
  li.area-item-gray:not(:first-child) a:hover,
  li.area-item-white:not(:first-child) a:hover {
    color:#f9fafb;
    background-color:#0060af;
    background-image:none
  }
  li.area-item-gray1:not(:first-child) a:hover,
  li.area-item-white1:not(:first-child) a:hover {
    color:#ffefef;
    background-color:#e93a3a;
    background-image:none
  }
  li.area-item-gray2:not(:first-child) a:hover,
  li.area-item-white2:not(:first-child) a:hover {
    color:#fafcff;
    background-color:#2478cc;
    background-image:none
  }
  li.area-item-gray3:not(:first-child) a:hover,
  li.area-item-white3:not(:first-child) a:hover {
    color:#fffcfa;
    background-color:#f78718;
    background-image:none
  }
  li.area-item-gray4:not(:first-child) a:hover,
  li.area-item-white4:not(:first-child) a:hover {
    color:#fafaff;
    background-color:#1f1fc7;
    background-image:none
  }
  li.area-item-gray5:not(:first-child) a:hover,
  li.area-item-white5:not(:first-child) a:hover {
    color:#f7fcfa;
    background-color:#28d188;
    background-image:none
  }

}
@media (max-height:768px) {
  .area-megamenu {
    max-height:350px;
    max-width: 100%
  }
}
/*@media (max-height:576px) {
  .area-megamenu {
    max-height:200px
  }
}*/
@media (max-width:767px) {
  .area-contents {
    /*max-width:40%*/
    max-width: 100%
  }
  
  .area-dropdown {
    /*max-width:calc(100% - 110px)*/
    max-width:100%
  }
}
/*
@media (max-width:576px) {
  .area-dropdown {
    /*max-width:calc(100% - 85px);*/
    max-width: 100%;
    height:40px
  }
  
  .area-megamenu {
    max-height:400px
  }
  
  .area-contents>a.area-item-navy,
  .area-map-contents>a.area-item-navy,
  ul.area-select-ul>li>a.area-item-navy {
    font-size:.85rem;
    font-weight:700;
    line-height:40px
  }
  
  .area-contents>a::before,
  .area-map-contents>a::before {
    left:0;
    right:0;
    bottom:6px
  }
  
  ul.area-select-menu>li>a,
  ul.area-select-menu0>li>a,
  ul.area-select-menu1>li>a,
  ul.area-select-menu2>li>a,
  ul.area-select-menu3>li>a,
  ul.area-select-menu4>li>a,
  ul.area-select-menu5>li>a {
  	font-size:  clamp(14px,1.5vw,16px);
  }
  
  ul.area-select-menu>li:first-child,
  ul.area-select-menu1>li:first-child
  ul.area-select-menu2>li:first-child
  ul.area-select-menu3>li:first-child
  ul.area-select-menu4>li:first-child
  ul.area-select-menu5>li:first-child {
    height:30px
  }
  
  ul.area-select-menu>li:first-child>a,
  ul.area-select-menu1>li:first-child>a,
  ul.area-select-menu2>li:first-child>a,
  ul.area-select-menu3>li:first-child>a,
  ul.area-select-menu4>li:first-child>a,
  ul.area-select-menu5>li:first-child>a {
    line-height:30px
  }
  
  ul.area-select-menu>li:first-child>a:not(.area-center-link)::after,
  ul.area-select-menu1>li:first-child>a:not(.area-center-link)::after,
  ul.area-select-menu2>li:first-child>a:not(.area-center-link)::after,
  ul.area-select-menu3>li:first-child>a:not(.area-center-link)::after,
  ul.area-select-menu4>li:first-child>a:not(.area-center-link)::after,
  ul.area-select-menu5>li:first-child>a:not(.area-center-link)::after {
    top:12px
  }
  
  ul.area-select-menu.area-group-active>li:first-child>a:not(.area-center-link)::after,
  ul.area-select-menu1.area-group-active>li:first-child>a:not(.area-center-link)::after,
  ul.area-select-menu2.area-group-active>li:first-child>a:not(.area-center-link)::after,
  ul.area-select-menu3.area-group-active>li:first-child>a:not(.area-center-link)::after,
  ul.area-select-menu4.area-group-active>li:first-child>a:not(.area-center-link)::after,
  ul.area-select-menu5.area-group-active>li:first-child>a:not(.area-center-link)::after {
    top:6px
  }
  
  ul.area-select-menu>li:not(:first-child)>a,
  ul.area-select-menu1>li:not(:first-child)>a,
  ul.area-select-menu2>li:not(:first-child)>a,
  ul.area-select-menu3>li:not(:first-child)>a,
  ul.area-select-menu4>li:not(:first-child)>a,
  ul.area-select-menu5>li:not(:first-child)>a {
    padding:0 10px;
    margin:0
  }
  
  ul.area-category-ul>li>a.area-item-navy {
    line-height:20px;
    font-size:12px;
    background-color:transparent;
    background-image:none;
    pointer-events:none;
    cursor:inherit;
    color:#000;
    z-index:1
  }
  
  ul.area-category-ul>li>a.area-item-navy::before {
    content:none
  }
  
  .area-megamenu {
    display:block;
    /*position:relative;*/
    padding:0 10px;
    border-top:none;
    z-index:8
  }
}
*/
@media (max-width:992px) and (max-height:500px) {
  .area-dropdown {
    height:40px;
    max-width:calc(100% - 85px)
  }
  
  #unitmap-header .area-dropdown {
    display:none
  }
  
  #unitmap-header.area-utility-active .area-dropdown {
    display:flex
  }
  
  .area-megamenu {
    max-height:200px
  }
  
  .area-contents>a.area-item-navy,
  .area-map-contents>a.area-item-navy,
  ul.area-category-ul>li>a,
  ul.area-select-ul>li>a.area-item-navy {
    font-size:.85rem;
    font-weight:700;
    line-height:40px
  }
  
  .area-contents>a::before,
  .area-map-contents>a::before {
    left:0;
    right:0;
    bottom:6px
  }
  
  ul.area-select-menu>li>a,
  ul.area-select-menu1>li>a,
  ul.area-select-menu2>li>a,
  ul.area-select-menu3>li>a,
  ul.area-select-menu4>li>a,
  ul.area-select-menu5>li>a {
    font-size:.85rem
  }
  
  ul.area-select-menu>li:first-child,
  ul.area-select-menu1>li:first-child,
  ul.area-select-menu2>li:first-child,
  ul.area-select-menu3>li:first-child,
  ul.area-select-menu4>li:first-child,
  ul.area-select-menu5>li:first-child {
    height:30px
  }
  
  ul.area-select-menu>li:first-child>a,
  ul.area-select-menu1>li:first-child>a,
  ul.area-select-menu2>li:first-child>a,
  ul.area-select-menu3>li:first-child>a,
  ul.area-select-menu4>li:first-child>a,
  ul.area-select-menu5>li:first-child>a {
    line-height:30px
  }
  
  ul.area-select-menu>li:first-child>a:not(.area-center-link)::after,
  ul.area-select-menu1>li:first-child>a:not(.area-center-link)::after,
  ul.area-select-menu2>li:first-child>a:not(.area-center-link)::after,
  ul.area-select-menu3>li:first-child>a:not(.area-center-link)::after,
  ul.area-select-menu4>li:first-child>a:not(.area-center-link)::after,
  ul.area-select-menu5>li:first-child>a:not(.area-center-link)::after {
    top:12px
  }
  
  ul.area-select-menu.area-group-active>li:first-child>a:not(.area-center-link)::after,
  ul.area-select-menu1.area-group-active>li:first-child>a:not(.area-center-link)::after,
  ul.area-select-menu2.area-group-active>li:first-child>a:not(.area-center-link)::after,
  ul.area-select-menu3.area-group-active>li:first-child>a:not(.area-center-link)::after,
  ul.area-select-menu4.area-group-active>li:first-child>a:not(.area-center-link)::after,
  ul.area-select-menu5.area-group-active>li:first-child>a:not(.area-center-link)::after {
    top:6px
  }
  
  ul.area-select-menu>li:not(:first-child)>a,
  ul.area-select-menu1>li:not(:first-child)>a,
  ul.area-select-menu2>li:not(:first-child)>a,
  ul.area-select-menu3>li:not(:first-child)>a
  ul.area-select-menu4>li:not(:first-child)>a
  ul.area-select-menu5>li:not(:first-child)>a {
    padding:0 5px;
    margin:0
  }
}
@media (max-width:576px) and (max-height:500px) {
  .area-megamenu {
    max-height:200px;
  }
}