@charset "UTF-8";
/**
 * -----------------------------------------------------------------------------
 * Style (廿日市市防災ポータルサイト)
 * -----------------------------------------------------------------------------
 */
/* Reset styles */
/**
 * -----------------------------------------------------------------------------
 * Reset
 * -----------------------------------------------------------------------------
 */
/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role=list],
ol[role=list] {
  list-style: none;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/* 共通スタイル */
/**
 * -----------------------------------------------------------------------------
 * SCSS Variables
 * -----------------------------------------------------------------------------
 */
/**
 * -----------------------------------------------------------------------------
 * 共通
 * -----------------------------------------------------------------------------
 */
body {
  font-size: 1rem;
  color: #000;
  font-family: "Noto Sans JP", sans-serif;
}

body {
  background-color: #ffffff;
  background-image: repeating-linear-gradient(45deg, #cccccc, #cccccc 1px, transparent 1px, transparent 3px), repeating-linear-gradient(-45deg, #cccccc, #cccccc 1px, transparent 1px, transparent 3px);
  background-size: 8px 8px;
}

.container {
  margin: 5px 15px;
}

.bg-white {
  background-color: #fff;
}

ul {
  margin: 0;
  padding: 0px 15px;
}

/**
* ハンバーガーメニュー
*/
.menu-opner {
  display: none;
  position: relative;
  width: 40px;
  height: 30px;
  cursor: pointer;
  transition: all 0.5s;
  box-sizing: border-box;
}
.menu-opner span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: black;
  border-radius: 4px;
  display: inline-block;
  transition: all 0.5s;
}
.menu-opner span:nth-of-type(1) {
  top: 0;
}
.menu-opner span:nth-of-type(2) {
  top: 13px;
}
.menu-opner span:nth-of-type(3) {
  bottom: 0;
}
.menu-opner.active span:nth-of-type(1) {
  transform: translateY(20px) rotate(-45deg);
  -webkit-transform: translateY(13px) rotate(-45deg);
}
.menu-opner.active span:nth-of-type(2) {
  opacity: 0;
}
.menu-opner.active span:nth-of-type(3) {
  transform: translateY(-20px) rotate(45deg);
  -webkit-transform: translateY(-13px) rotate(45deg);
}

/* 矢印のスタイル */
.toggle-arrow {
  cursor: pointer;
  display: inline-block;
  margin-left: 10px;
  font-size: 1.2em;
  transition: transform 0.3s;
}
.toggle-arrow.open {
  transform: rotate(180deg);
}

/* 画面共通 */
/**
 * -----------------------------------------------------------------------------
 * Header
 * -----------------------------------------------------------------------------
 */
header a {
  display: block;
  text-decoration: none;
}
header .header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0;
  padding: 10px 15px 10px 15px;
  background-color: #fff;
}
header .header-container-title {
  display: flex;
  align-items: center;
  gap: 10px;
}
header .header-container-title .header-logo {
  width: 50px;
}
header .header-container-title .header-title {
  display: flex;
  align-items: center;
  gap: 5px;
}
header .header-container-title .header-title-japanese {
  font-size: 0.7rem;
  color: rgb(89, 12, 85);
}
header .header-container-title .header-title-japanese span {
  font-size: 1.8rem;
}
header .header-container-title .header-title-english {
  font-size: 0.6rem;
  color: rgb(89, 12, 85);
}
header .header-container-title .header-title-english h2:first-child {
  font-size: 1.2rem;
}
header .header-container .header-sub-nav-lang {
  text-align: right;
  margin-bottom: 5px;
}
header .header-container .header-sub-nav-lang select {
  padding: 5px;
  border: 1px solid #000;
}
header .header-container .header-sub-nav-menu {
  display: block;
}
header .header-container .header-sub-nav-menu > ul {
  display: flex;
  justify-content: space-between;
  list-style: none;
  margin: 0;
}
header .header-container .header-sub-nav-menu > ul li {
  padding: 0 0.5rem;
  border-left: 1px solid #000;
}
header .header-container .header-sub-nav-menu > ul li:first-child {
  border-left: none;
}
header .header-container .header-sub-nav-menu > ul li a {
  text-decoration: none;
  color: #000;
}
header .header-nav {
  margin-top: 10px;
}
header .header-nav ul {
  display: flex;
  gap: 2px;
  justify-content: space-between;
  list-style: none;
  padding: 0;
  margin: 0;
  align-items: stretch;
}
header .header-nav ul li {
  flex: 1;
  text-align: center;
  background-color: rgb(89, 12, 85);
}
header .header-nav ul li a {
  display: block;
  padding: 15px 10px;
  text-decoration: none;
  color: white;
}
header .header-nav ul li a::after {
  content: "";
  display: block;
  width: 80%;
  margin: 0 10%;
  height: 4px;
  margin-top: 5px;
  background-color: white;
}
/*header .header-nav ul li:nth-child(1) a::after {
  background-color: rgb(255, 0, 26);
}
header .header-nav ul li:nth-child(2) a::after {
  background-color: rgb(112, 198, 229);
}
header .header-nav ul li:nth-child(3) a::after {
  background-color: rgb(255, 251, 62);
}
header .header-nav ul li:nth-child(4) a::after {
  background-color: rgb(229, 149, 213);
}
header .header-nav ul li:nth-child(5) a::after {
  background-color: rgb(190, 67, 32);
}
header .header-nav ul li:nth-child(6) a::after {
  background-color: rgb(124, 210, 112);
}*/

@media (max-width: 1100px) {
  .menu-opner {
    display: inline-block;
  }
  .container {
    padding: 0;
    margin: 5px;
  }
  header .header {
    position: fixed;
    top: 0;
  }
  header .header-container {
    padding: 5px 10px;
    position: fixed;
    width: 100%;
    top: 0;
  }
  header .header-title {
    flex-direction: column;
    align-items: start !important;
    gap: 0px !important;
  }
  header .header-title-japanese h1 {
    font-size: 0.8rem;
  }
  header .header-title-japanese h1 > span {
    font-size: 1rem !important;
  }
  header .header-title-english h2 {
    font-size: 0.7rem !important;
  }
  header .header-nav {
    padding-top: 70px;
  }
  header .header-nav ul > li > a {
    font-size: 1.1rem !important;
  }
  header .header-nav ul > li > a > span {
    white-space: nowrap;
  }
  header .header-sub-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
  }
  header .header-sub-nav-lang {
    font-size: 0.8rem;
    margin-bottom: 0 !important;
  }
  header .header-sub-nav-menu {
    display: none;
    position: absolute;
    width: 100%;
    left: 0;
    top: 65px;
    height: 100vh;
    background-color: white;
    padding-top: 40px;
  }
  header .header-sub-nav-menu > ul {
    flex-direction: column;
    gap: 20px;
    padding: 5px 10px;
  }
  header .header-sub-nav-menu > ul li {
    border-left: none !important;
    border-bottom: 1px solid #000;
  }
  header .header-sub-nav-menu > ul li a {
    font-size: 1.3rem;
    padding: 10px 0;
  }
  header .header-nav ul li a {
    word-break: break-all;
    padding: 5px 5px;
    font-size: 1rem;
  }
}
/**
 * -----------------------------------------------------------------------------
 * map
 * -----------------------------------------------------------------------------
 */
#map {
  height: 70vh;
  background-color: rgb(255, 255, 255);
  border-radius: 15px;
  padding: 10px 20px;
}
#map > h3 {
  font-size: 1.5rem;
}
#mapdiv {
  height: 63vh;
  background-color: rgb(255, 255, 255);
  border-radius: 15px;
  padding: 10px 20px;
}
/**
 * -----------------------------------------------------------------------------
 * アラート
 * -----------------------------------------------------------------------------
 */
#alert {
  background-color: rgb(58, 58, 58);
  color: yellow;
  padding: 10px 25px;
  margin:0px -20px;
  overflow:hidden;
}

.alert-container{
  z-index: 3;
  width: 100%;
  text-align: right;
}
.alert-container p{
  box-sizing: content-box;
  display: inline-block;
  white-space: nowrap;
  padding-left: 100%;
  margin: 0;
  animation-name: telop!important;
  animation-duration: 30s!important;
  animation-timing-function: linear!important;
  animation-iteration-count: infinite!important;
}
@keyframes telop{
  from    { transform: translate(0%); } 
  100%,to { transform: translate(-100%); }
}

/**
 * -----------------------------------------------------------------------------
 * index.htmlの情報
 * -----------------------------------------------------------------------------
 */

 /** section information **/
#information {
  display: flex;
  flex-direction: column;
}
#information .info-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 3px solid;
}
#information .info-title h2 {
  font-size: 1rem;
}
#information .info-title .updated-date {
  font-size: 0.8rem;
}
#information .info-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 90%;
  margin-top: 10px;
}
#information .info-content-item {
  display: flex;
  align-items: center;
}
#information .info-content-item > span {
  width: 120px;
  padding: 10px;
  text-align: center;
  border: 1px solid black;
  margin-right: 10px;
}
#information .info-content-item > span.alert-level-1 {
  background-color: rgb(255, 255, 255);
  color: black;
}
#information .info-content-item > span.alert-level-2 {
  background-color: rgb(245, 233, 77);
  color: black;
}
#information .info-content-item > span.alert-level-3 {
  background-color: rgb(255, 0, 0);
  color: white;
}
#information .info-content-item > span.alert-level-4 {
  background-color: rgb(132, 63, 139);
  color: white;
}
#information .info-content-item > span.alert-level-5 {
  background-color: rgb(0, 0, 0);
  color: white;
}
#information .info-content-item > span.shelter-open {
  background-color: rgb(255, 0, 0);
  color: white;
}
#information .info-content-item > span.shelter-close {
  background-color: rgb(87, 87, 87);
  color: white;
}
#information .info-content-item-container {
  width: calc(100% - 130px);
  margin-bottom: 5px;
  text-align: right;
}
#information .info-content-button {
  display: flex;
  justify-content: end;
  gap: 10px;
  margin-top: 5px;
}
#information .info-content-button > a {
  display: block;
  text-decoration: none;
  padding: 0px 10px;
  border: 1px solid #000;
  background-color: white;
  color: #000;
  cursor: pointer;
}
#information .emergency-info .info-title {
  border-color: rgb(255, 0, 26);
}
#information .evacuation-info .info-title {
  border-color: rgb(190, 67, 32);
}
#information .shelter-info .info-title {
  border-color: rgb(124, 210, 112);
}
#information .weather-info .info-title {
  border-color: rgb(255, 251, 62);
}
#information .earthquake-tsunami-info .info-title {
  border-color: rgb(255, 251, 62);
}
#information .disaster-radio-info .info-title {
  border-color: rgb(229, 149, 213);
}
#information .road-closure-info .info-title {
  border-color: rgb(229, 149, 213);
}
#information .news-info .info-title {
  border-color: #005b6b;
}
#information .first-info > div,
#information .second-info > div,
#information .third-info > div {
  padding: 10px 20px;
}
#information .third-info > .other-info {
  padding: 0;
}
#information .first-info > div {
  border: 3px solid rgb(218, 161, 217);
}
#information .second-info {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
}
#information .second-info > div {
  flex: 0 0 calc(50% - 10px);
  display: flex;
  flex-direction: column;
  border: 2px solid rgb(236, 208, 236);
}
#information .third-info {
  display: flex;
  gap: 10px;
}
#information .third-info > div:first-of-type {
  border: 2px solid rgb(190, 227, 168);
}
#information .third-info .news-info {
  width: calc(100% - 350px);
}
#information .third-info .news-info .info-content {
  height: 75%;
}
#information .third-info .other-info {
  width: 350px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* バナー全体 */
}
#information .third-info .other-info > div {
  border: 2px solid rgb(190, 227, 168);
}
#information .third-info .other-info .weather-list {
  display: flex;
}
#information .third-info .other-info .weather-list .day {
  text-align: center;
  flex: 1;
  border-right: 1px solid black;
}
#information .third-info .other-info .weather-list .day:last-child {
  border-right: none;
}
#information .third-info .other-info .weather-list .day dt {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  background-color: rgb(212, 236, 254);
  border-bottom: 1px solid black;
}
#information .third-info .other-info .weather-list .day dd {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding-bottom: 5px;
}
#information .third-info .other-info .weather-list .day dd .icon {
  width: 30px;
}
#information .third-info .other-info .weather-list .day .weather {
  font-size: 14px;
  color: #666;
  margin-bottom: 8px;
}
#information .third-info .other-info-banners {
  border: none !important;
}
#information .third-info .other-info-banners .icon {
  width: 50px;
  margin-right: 10px;
}
#information .third-info .other-info-typhoon .typhoon-banner {
  display: flex;
  align-items: center;
  justify-content: space-around;
  background-color: #005b6b;
  color: #ffffff;
  padding: 10px 20px;
  cursor: pointer;
}
#information .third-info .other-info-typhoon .typhoon-banner p {
  font-size: 1.2rem;
  font-weight: bold;
  display: block;
}

#information .third-info .other-info-heat .heat-banner {
  display: flex;
  align-items: center;
  justify-content: space-around;
  background-color: #1b8600;
  color: #ffffff;
  padding: 10px 20px;
  cursor: pointer;
  margin-top: 10px;
}
#information .third-info .other-info-heat .heat-banner p {
  font-size: 1.2rem;
  font-weight: bold;
  display: block;
}

/** section hinanarea **/
#hinanarea {
  display: flex;
  flex-direction: column;
}
#hinanarea .info-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 3px solid;
}
#hinanarea .info-title h2 {
  font-size: 1rem;
}
#hinanarea .info-title .updated-date {
  font-size: 0.8rem;
}
#hinanarea .info-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 90%;
  margin-top: 10px;
}
#hinanarea .info-content-item {
  display: flex;
  align-items: center;
}
#hinanarea .info-content-item > span {
  width: 120px;
  padding: 10px;
  text-align: center;
  border: 1px solid black;
  margin-right: 10px;
}
#hinanarea .info-content-item > span.alert-level-1 {
  background-color: rgb(255, 255, 255);
  color: black;
}
#hinanarea .info-content-item > span.alert-level-2 {
  background-color: rgb(245, 233, 77);
  color: black;
}
#hinanarea .info-content-item > span.alert-level-3 {
  background-color: rgb(255, 0, 0);
  color: white;
}
#hinanarea .info-content-item > span.alert-level-4 {
  background-color: rgb(132, 63, 139);
  color: white;
}
#hinanarea .info-content-item > span.alert-level-5 {
  background-color: rgb(0, 0, 0);
  color: white;
}
#hinanarea .info-content-item > span.shelter-open {
  background-color: rgb(255, 0, 0);
  color: white;
}
#hinanarea .info-content-item > span.shelter-close {
  background-color: rgb(87, 87, 87);
  color: white;
}
#hinanarea .info-content-item-container {
  width: calc(100% - 130px);
  margin-bottom: 5px;
  text-align: right;
}
#hinanarea .info-content-button {
  display: flex;
  justify-content: end;
  gap: 10px;
  margin-top: 5px;
}
#hinanarea .info-content-button > a {
  display: block;
  text-decoration: none;
  padding: 0px 10px;
  border: 1px solid #000;
  background-color: white;
  color: #000;
  cursor: pointer;
}
#hinanarea .emergency-info .info-title {
  border-color: rgb(255, 0, 26);
}
#hinanarea .evacuation-info .info-title {
  border-color: rgb(190, 67, 32);
}
#hinanarea .shelter-info .info-title {
  border-color: rgb(124, 210, 112);
}
#hinanarea .weather-info .info-title {
  border-color: rgb(255, 251, 62);
}
#hinanarea .earthquake-tsunami-info .info-title {
  border-color: rgb(255, 251, 62);
}
#hinanarea .disaster-radio-info .info-title {
  border-color: rgb(229, 149, 213);
}
#hinanarea .road-closure-info .info-title {
  border-color: rgb(229, 149, 213);
}
#hinanarea .news-info .info-title {
  border-color: #005b6b;
}
#hinanarea .first-info > div,
#hinanarea .second-info > div,
#hinanarea .third-info > div {
  padding: 10px 20px;
}
#hinanarea .third-info > .other-info {
  padding: 0;
}
#hinanarea .first-info > div {
  border: 3px solid rgb(218, 161, 217);
}
#hinanarea .second-info {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
}
#hinanarea .second-info > div {
  flex: 0 0 calc(50% - 10px);
  display: flex;
  flex-direction: column;
  border: 2px solid rgb(236, 208, 236);
}
#hinanarea .third-info {
  display: flex;
  gap: 10px;
}
#hinanarea .third-info > div:first-of-type {
  border: 2px solid rgb(190, 227, 168);
}
#hinanarea .third-info .news-info {
  width: calc(100% - 350px);
}
#hinanarea .third-info .news-info .info-content {
  height: 75%;
}
#hinanarea .third-info .other-info {
  width: 350px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* バナー全体 */
}
#hinanarea .third-info .other-info > div {
  border: 2px solid rgb(190, 227, 168);
}
#hinanarea .third-info .other-info .weather-list {
  display: flex;
}
#hinanarea .third-info .other-info .weather-list .day {
  text-align: center;
  flex: 1;
  border-right: 1px solid black;
}
#hinanarea .third-info .other-info .weather-list .day:last-child {
  border-right: none;
}
#hinanarea .third-info .other-info .weather-list .day dt {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  background-color: rgb(212, 236, 254);
  border-bottom: 1px solid black;
}
#hinanarea .third-info .other-info .weather-list .day dd {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding-bottom: 5px;
}
#hinanarea .third-info .other-info .weather-list .day dd .icon {
  width: 30px;
}
#hinanarea .third-info .other-info .weather-list .day .weather {
  font-size: 14px;
  color: #666;
  margin-bottom: 8px;
}
#hinanarea .third-info .other-info-banners {
  border: none !important;
}
#hinanarea .third-info .other-info-banners .icon {
  width: 50px;
  margin-right: 10px;
}
#hinanarea .third-info .other-info-typhoon .typhoon-banner {
  display: flex;
  align-items: center;
  justify-content: space-around;
  background-color: #005b6b;
  color: #ffffff;
  padding: 10px 20px;
  cursor: pointer;
}
#hinanarea .third-info .other-info-typhoon .typhoon-banner p {
  font-size: 1.2rem;
  font-weight: bold;
  display: block;
}
#hinanarea .third-info .other-info-heat {
  display: none;
}
#hinanarea .third-info .other-info-heat .heat-banner {
  display: flex;
  align-items: center;
  justify-content: space-around;
  background-color: #1b8600;
  color: #ffffff;
  padding: 10px 20px;
  cursor: pointer;
  margin-top: 10px;
}
#hinanarea .third-info .other-info-heat .heat-banner p {
  font-size: 1.2rem;
  font-weight: bold;
  display: block;
}

/** section kishoarea **/
#kishoarea {
  display: flex;
  flex-direction: column;
}
#kishoarea .info-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 3px solid;
}
#kishoarea .info-title h2 {
  font-size: 1rem;
}
#kishoarea .info-title .updated-date {
  font-size: 0.8rem;
}
#kishoarea .info-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 90%;
  margin-top: 10px;
}
#kishoarea .info-content-item {
  display: flex;
  align-items: center;
}
#kishoarea .info-content-item > span {
  width: 120px;
  padding: 10px;
  text-align: center;
  border: 1px solid black;
  margin-right: 10px;
}
#kishoarea .info-content-item > span.alert-level-1 {
  background-color: rgb(255, 255, 255);
  color: black;
}
#kishoarea .info-content-item > span.alert-level-2 {
  background-color: rgb(245, 233, 77);
  color: black;
}
#kishoarea .info-content-item > span.alert-level-3 {
  background-color: rgb(255, 0, 0);
  color: white;
}
#kishoarea .info-content-item > span.alert-level-4 {
  background-color: rgb(132, 63, 139);
  color: white;
}
#kishoarea .info-content-item > span.alert-level-5 {
  background-color: rgb(0, 0, 0);
  color: white;
}
#kishoarea .info-content-item > span.shelter-open {
  background-color: rgb(255, 0, 0);
  color: white;
}
#kishoarea .info-content-item > span.shelter-close {
  background-color: rgb(87, 87, 87);
  color: white;
}
#kishoarea .info-content-item-container {
  width: calc(100% - 130px);
  margin-bottom: 5px;
  text-align: right;
}
#kishoarea .info-content-button {
  display: flex;
  justify-content: end;
  gap: 10px;
  margin-top: 5px;
}
#kishoarea .info-content-button > a {
  display: block;
  text-decoration: none;
  padding: 0px 10px;
  border: 1px solid #000;
  background-color: white;
  color: #000;
  cursor: pointer;
}
#kishoarea .emergency-info .info-title {
  border-color: rgb(255, 0, 26);
}
#kishoarea .evacuation-info .info-title {
  border-color: rgb(190, 67, 32);
}
#kishoarea .shelter-info .info-title {
  border-color: rgb(124, 210, 112);
}
#kishoarea .weather-info .info-title {
  border-color: rgb(255, 251, 62);
}
#kishoarea .earthquake-tsunami-info .info-title {
  border-color: rgb(255, 251, 62);
}
#kishoarea .disaster-radio-info .info-title {
  border-color: rgb(229, 149, 213);
}
#kishoarea .road-closure-info .info-title {
  border-color: rgb(229, 149, 213);
}
#kishoarea .news-info .info-title {
  border-color: #005b6b;
}
#kishoarea .first-info > div,
#kishoarea .second-info > div,
#kishoarea .third-info > div {
  padding: 10px 20px;
}
#kishoarea .third-info > .other-info {
  padding: 0;
}
#kishoarea .first-info > div {
  border: 3px solid rgb(218, 161, 217);
}
#kishoarea .second-info {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
}
#kishoarea .second-info > div {
  flex: 0 0 calc(50% - 10px);
  display: flex;
  flex-direction: column;
  border: 2px solid rgb(236, 208, 236);
}
#kishoarea .third-info {
  display: flex;
  gap: 10px;
}
#kishoarea .third-info > div:first-of-type {
  border: 2px solid rgb(190, 227, 168);
}
#kishoarea .third-info .news-info {
  width: calc(100% - 350px);
}
#kishoarea .third-info .news-info .info-content {
  height: 75%;
}
#kishoarea .third-info .other-info {
  width: 350px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* バナー全体 */
}
#kishoarea .third-info .other-info > div {
  border: 2px solid rgb(190, 227, 168);
}
#kishoarea .third-info .other-info .weather-list {
  display: flex;
}
#kishoarea .third-info .other-info .weather-list .day {
  text-align: center;
  flex: 1;
  border-right: 1px solid black;
}
#kishoarea .third-info .other-info .weather-list .day:last-child {
  border-right: none;
}
#kishoarea .third-info .other-info .weather-list .day dt {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  background-color: rgb(212, 236, 254);
  border-bottom: 1px solid black;
}
#kishoarea .third-info .other-info .weather-list .day dd {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding-bottom: 5px;
}
#kishoarea .third-info .other-info .weather-list .day dd .icon {
  width: 30px;
}
#kishoarea .third-info .other-info .weather-list .day .weather {
  font-size: 14px;
  color: #666;
  margin-bottom: 8px;
}
#kishoarea .third-info .other-info-banners {
  border: none !important;
}
#kishoarea .third-info .other-info-banners .icon {
  width: 50px;
  margin-right: 10px;
}
#kishoarea .third-info .other-info-typhoon .typhoon-banner {
  display: flex;
  align-items: center;
  justify-content: space-around;
  background-color: #005b6b;
  color: #ffffff;
  padding: 10px 20px;
  cursor: pointer;
}
#kishoarea .third-info .other-info-typhoon .typhoon-banner p {
  font-size: 1.2rem;
  font-weight: bold;
  display: block;
}
#kishoarea .third-info .other-info-heat {
  display: none;
}
#kishoarea .third-info .other-info-heat .heat-banner {
  display: flex;
  align-items: center;
  justify-content: space-around;
  background-color: #1b8600;
  color: #ffffff;
  padding: 10px 20px;
  cursor: pointer;
  margin-top: 10px;
}
#kishoarea .third-info .other-info-heat .heat-banner p {
  font-size: 1.2rem;
  font-weight: bold;
  display: block;
}

@media (max-width: 768px) {
  #information .second-info > div {
    flex: 0 0 100%;
  }
  #information .third-info {
    flex-direction: column;
  }
  #information .third-info .news-info {
    width: 100%;
  }
  #information .third-info .other-info {
    width: 100%;
  }
  #information .third-info .other-info {
    flex-direction: row;
  }
  #information .third-info .other-info .other-info-weather {
    order: 2;
    width: 30%;
  }
  #information .third-info .other-info .other-info-weather .weather-list {
    flex-direction: column;
  }
  #information .third-info .other-info .other-info-weather .weather-list .day {
    border-right: none;
    border-bottom: 1px solid black;
  }
  #information .third-info .other-info .other-info-weather .weather-list .day .weather {
    margin-bottom: 0;
  }
  #information .third-info .other-info .other-info-weather .weather-list .day:last-child {
    border-bottom: none;
  }
  #information .third-info .other-info .other-info-banners {
    order: 1;
    width: 70%;
  }
  #information .third-info .other-info .other-info-banners .other-info-heat {
    display: block;
  }
  #information .third-info .other-info .other-info-banners p {
    font-size: 0.9rem;
  }

  #information .third-info .other-info-typhoon .typhoon-banner p {
    font-size: 1.8rem;
    font-weight: bold;
    display: block;
  }
  
  #information .third-info .other-info-heat .heat-banner p {
    font-size: 1.8rem;
    font-weight: bold;
    display: block;
  }
}
/**
 * -----------------------------------------------------------------------------
 * footer
 * -----------------------------------------------------------------------------
 */
.footer {
  background-color: rgb(212, 177, 213);
  padding: 2rem 1rem;
}
.footer-title {
  display: flex;
  justify-content: center;
  align-items: center;
}
.footer-title-content {
  margin-bottom: 1rem;
  text-align: center;
  font-size: 1.5rem;
  font-weight: bold;
  border-bottom: 2px solid black;
  display: block;
  padding: 0 20px;
}
.footer-links {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}
@media (min-width: 768px) {
  .footer-links {
    flex-direction: row;
    justify-content: space-between;
  }
}
.footer-column {
  flex: 1;
}
.footer-column-title {
  border-bottom: 2px solid black;
  padding-bottom: 0.5rem;
  text-align: center;
}
.footer-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-list-item {
  margin: 4px 20px;
}
.footer-contact {
  margin-top: 2rem;
}

/**
 * -----------------------------------------------------------------------------
 * メイン
 * -----------------------------------------------------------------------------
 */
main {
  margin: 10px 15px;
}
main .main-content {
  background-color: #fff;
  padding: 20px;
}
main .main-content-title {
  font-size: 1.6rem;
  color: #000;
  border-bottom: 4px solid white;
  margin-bottom: 20px;
}
main .main-content-title.news {
  border-color: #005b6b;
}
main .main-content-title.information {
  border-color: rgb(255, 0, 26);
}
main .main-content-title.radio {
  border-color: rgb(229, 149, 213);
}
main .main-content-title.road-closure {
  border-color: rgb(229, 149, 213);
}
main .main-content-title.weather {
  border-color: rgb(255, 251, 62);
}
main .main-content-title.other {
  border-color: rgb(89, 12, 85);
}
main .main-content-title.observation {
  border-color: rgb(190, 67, 32);
}
main .main-content-title.map {
  border-color: rgb(112, 198, 229);
}
main .main-content-title.earthquake-tsunami {
  border-color: rgb(255, 251, 62);
}
main .main-content-title.evacuation {
  border-color: rgb(124, 210, 112);
}
main .main-content-title.shelter {
  border-color: rgb(124, 210, 112);
}
main .main-content-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
main .main-content-list-item {
  display: flex;
  align-items: center;
  gap: 20px;
  border-bottom: 1px solid #888888;
  padding: 5px 0;
}
main .main-content-list-item p {
  font-size: 0.9rem;
  color: #888888;
  margin: 0;
  white-space: nowrap;
}
main .main-content-list-item h3 a {
  display: block;
  color: #000;
}
main .main-content-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  border-bottom: 4px solid white;
}
main .main-content-header.news {
  border-color: #005b6b;
}
main .main-content-header.information {
  border-color: rgb(255, 0, 26);
}
main .main-content-header.radio {
  border-color: rgb(229, 149, 213);
}
main .main-content-header.road-closure {
  border-color: rgb(229, 149, 213);
}
main .main-content-header.weather {
  border-color: rgb(255, 251, 62);
}
main .main-content-header.other {
  border-color: rgb(89, 12, 85);
}
main .main-content-header.observation {
  border-color: rgb(190, 67, 32);
}
main .main-content-header.map {
  border-color: rgb(112, 198, 229);
}
main .main-content-header.earthquake-tsunami {
  border-color: rgb(255, 251, 62);
}
main .main-content-header.evacuation {
  border-color: rgb(124, 210, 112);
}
main .main-content-header.shelter {
  border-color: rgb(124, 210, 112);
}
main .main-content-header .main-content-title {
  font-size: 1.6rem;
  color: #000;
  margin: 0;
}
main .main-content-header .main-content-date {
  font-size: 0.9rem;
  color: #888888;
  white-space: nowrap;
}
main .main-content-body {
  font-size: 1rem;
  color: #000;
  line-height: 1.6;
  margin-bottom: 20px;
}
main .main-content-body.sitemap ul {
  list-style: none;
}
main .main-content-body.sitemap li {
  margin-bottom: 5px;
}
main .main-content-body p {
  margin: 0 0 10px;
}
main .main-content-body h4 {
  border-left: 6px solid rgb(89, 12, 85);
  padding: 5px 10px;
  font-size: 1.1rem;
  margin-bottom: 5px;
  margin-top: 15px;
}
main .main-content-footer {
  display: flex;
  justify-content: flex-end;
}
main .main-content-footer .main-content-back-link {
  display: inline-block;
  padding: 8px 12px;
  background-color: rgb(89, 12, 85);
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  transition: background-color 0.3s;
}
main .main-content.evacuation h3[class^=alert-level],
main .main-content.evacuation h3[class^=shelter] {
  /* スタイルを記述 */
  font-size: 1.3ren;
  font-weight: bold;
  width: 100%;
  background-color: black;
  padding: 10px;
  color: white;
}
main .main-content.evacuation h3[class^=alert-level].alert-level-4,
main .main-content.evacuation h3[class^=shelter].alert-level-4 {
  background-color: rgb(132, 63, 139);
}
main .main-content.evacuation h3[class^=alert-level].alert-level-5,
main .main-content.evacuation h3[class^=shelter].alert-level-5 {
  background-color: rgb(0, 0, 0);
}
main .main-content.evacuation h3[class^=alert-level].alert-level-3,
main .main-content.evacuation h3[class^=shelter].alert-level-3 {
  background-color: rgb(255, 0, 0);
}
main .main-content.evacuation h3[class^=alert-level].shelter-open,
main .main-content.evacuation h3[class^=shelter].shelter-open {
  background-color: rgb(255, 0, 0);
}
main .main-content.evacuation h3[class^=alert-level].shelter-close,
main .main-content.evacuation h3[class^=shelter].shelter-close {
  background-color: rgb(87, 87, 87);
}
main .main-content.evacuation p {
  padding: 10px 0;
}

@media screen and (max-width: 768px) {
  main .main-content-header {
    flex-direction: column;
    align-items: stretch;
  }
  main .main-content-header p {
    text-align: right;
  }
  main .main-content-list-item {
    flex-direction: column;
    gap: 0px;
    align-items: start;
  }
}

.mapNav {
  position: absolute;
  border-radius: 0 5px 5px 0;
  background-color: rgba(255, 255, 255, 0.9);
  width: calc(100% - 120px);
  max-height: calc(100% - 20px);
  z-index: 10;
  top: 400px;
  left: 60px;
  padding: 12px 8px;
  font-size: 12px;
  font-size: 0.7rem;
  overflow-y: auto;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

@media screen and (min-width: 400px) {
  .mapNav {
    font-size: 13px;
    font-size: 0.8rem;
  }
}

@media screen and (min-width: 768px) {
  .mapNav {
    font-size: 13px;
    font-size: 0.8rem;
  }
}

.mapNav--minimize {
  left: -100%;
}

.mapNav__tab {
  position: absolute;
  background-color: rgba(255, 255, 255, 0.9);
  color: #adddd7;
  font-size: 12px;
  font-size: 0.875rem;
  top: 400px;
  left: 30px;
  width: 24px;
  height: 350px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
  border-radius: 0 8px 8px 0;
  -webkit-writing-mode: vertical;
      -ms-writing-mode: vertical;
          writing-mode: vertical;
  z-index: 11;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

@media screen and (min-width: 400px) {
  .mapNav__tab {
    font-size: 16.8px;
    font-size: 0.6rem;
  }
}

@media screen and (min-width: 768px) {
  .mapNav__tab {
    font-size: 18.2px;
    font-size: 0.8rem;
  }
}

.mapNav__tab--minimize {
  color: #204e48;
  background-color: rgba(255, 255, 255, 0.9);
}

.mapNav__tab--minimize:hover {
  color: black;
}

.mapNav__title {
  font-weight: bold;
  margin: 2px;
}

.mapNav__titleIcon {
  margin: 4px;
}

.mapNav__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.mapNav__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 2px;
  margin-right: 5px;
  height: 26px;
}

.mapNav__checkbox {
  margin: 4px;
}

.mapNav__icon {
  margin: 0 4px;
  -o-object-fit: contain;
     object-fit: contain;
  width: 18px;
  height: 26px;
}

.mapNav__example {
  margin: 0 4px;
  width: 18px;
  height: 18px;
  border: 2px solid #000;
}

.mapNav__example--tokubetu {
  background: #ff4650;
}

.mapNav__example--keikai {
  background: #fcff00;
}

.mapNav__example--doseki {
  border-color: #743a00;
}

.mapNav__example--jisuberi {
  border-color: #ffc700;
}

.mapNav__example--kyukeisya {
  border-color: #4e31ff;
}

.mapNav__example--koureisha {
  background: #ff0000;
}

.mapNav__example--hinanshiji {
  background:rgb(132, 63, 139)
}

.mapNav__example--kinnkyuuanzen {
  background: #000000;
}

.mapNav__description {
  line-height: 1;
}

.mapNav__divider {
  width: 100%;
  height: 2px;
  background-color: #d9d9d9;
  margin: 8px 0;
}

.mapNav__buttonWrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.mapNav__button {
  margin: 5px 10px;
  border: 1px solid #31746d;
  border-radius: 5px;
  padding: 4px;
  text-align: center;
  display: inline-block;
  width: 150px;
  color: black;
  -webkit-box-shadow: 0 1px 1px #595959;
          box-shadow: 0 1px 1px #595959;
}

.mapNav__button:active {
  -webkit-box-shadow: none;
          box-shadow: none;
  position: relative;
  top: 1px;
}

.mapNav__button:hover {
  opacity: 0.7;
}

.mapNav__button--green300 {
  background: #adddd7;
}

.mapNav__button--gray300 {
  background: white;
  border-color: #595959;
}

.mapNav-kasen-hanrei-wrap {
  font-size: 0.8em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-bottom: 10px;
}

.mapNav-kasen-hanrei-wrap > .mapIcons {
  margin: 15px 5px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin: 0;
}

.mapNav-kasen-hanrei-wrap > .mapIcons > div {
  /*width: 28%;*/
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 5px;
  height: 15px;
}

.mapNav-kasen-hanrei-wrap > .mapIcons > div:last-of-type {
  width: 55.5%;
}

.mapNav-kasen-hanrei-wrap > .mapIcons > div .mapIcons__icon {
  width: 15px;
  margin-right: 5px;
}

.mapNav-kasen-hanrei-wrap > .mapIcons > div .mapIcons__color {
  width: 15px !important;
  height: 15px !important;
}

@media screen and (min-width: 768px) {
  .mapNav__container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  .mapNav__containerItem {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
  }
  .mapNav__list--left {
    display: block;
  }
  .mapNav__item {
    height: 32px;
  }
  .mapNav__icon {
    margin: 0 4px;
    width: 22px;
    height: 32px;
  }
  .mapNav__button {
    margin: 5px 15px;
  }
}

/***********************************
サイト利用案内
***********************************/
.helpList {
  padding: 8px;
}

.helpList__category {
  background: #f8e8d3;
  padding: 2px 6px;
}

.mapIcons {
  margin: 5px;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.mapIcons__item {
  width: calc((100% - 32px) / 2);
  margin: 8px;
  min-height: 60px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.mapIcons__icon {
  width: 30px;
  display: inline-block;
  margin-right: 5px;
}

.mapIcons__img {
  width: 30px;
  display: inline-block;
}

@media screen and (min-width: 768px) {
  .mapIcons {
    margin: 10px 20px;
  }
  .mapIcons__item {
    width: calc((100% - 60px) / 3);
    margin: 10px;
  }
  .mapIcons__icon {
    width: 35px;
    margin-right: 15px;
  }
  .mapIcons__img {
    width: 35px;
  }
}

.mapIcons__color {
  width: 30px;
  height: 30px;
  border: 2px solid #000;
}

.mapIcons__color--tokubetu {
  background: #ff4650;
}

.mapIcons__color--keikai {
  background: #fcff00;
}

.mapIcons__color--chosayotei {
  background: #595959;
}

.mapIcons__color--20m {
  background: #dc7adc;
  border-width: 1px;
}

.mapIcons__color--10m20m {
  background: #f285c9;
  border-width: 1px;
}

.mapIcons__color--5m10m {
  background: #ff9191;
  border-width: 1px;
}

.mapIcons__color--3m5m {
  background: #ffb7b7;
  border-width: 1px;
}

.mapIcons__color--1m3m {
  background: #ffd8c0;
  border-width: 1px;
}

.mapIcons__color--05m1m {
  background: #f8e1a6;
  border-width: 1px;
}

.mapIcons__color--0305m {
  background: #f7f5a9;
  border-width: 1px;
}

.mapIcons__color--03m {
  background: #ffffb3;
  border-width: 1px;
}

.mapIcons__color--5m_tsunami {
  background: #f285c9;
  border-width: 1px;
}

.mapIcons__color--4m5m_tsunami {
  background: #ff9191;
  border-width: 1px;
}

.mapIcons__color--3m4m_tsunami {
  background: #ffb7b7;
  border-width: 1px;
}

.mapIcons__color--2m3m_tsunami {
  background: #ffd8c0;
  border-width: 1px;
}

.mapIcons__color--1m2m_tsunami {
  background: #f8e1a6;
  border-width: 1px;
}

.mapIcons__color--03m1m_tsunami {
  background: #f7f5a9;
  border-width: 1px;
}

.mapIcons__color--03m_tsunami {
  background: #ffffb3;
  border-width: 1px;
}

.mapIcons__color--jisseki {
  background: #0000ff;
  border-width: 1px;
}

.ol-overlaycontainer-stopevent > .ol-zoom.ol-unselectable.ol-control {
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
}

@media screen and (min-width: 768px) {
  .mapIcons__color {
    width: 35px;
    height: 35px;
  }
}

.mapIcons__border {
  width: 30px;
  height: 30px;
  position: relative;
}

.mapIcons__border--doseki {
  border-color: #743a00;
}

.mapIcons__border--jisuberi {
  border-color: #ffc700;
}

.mapIcons__border--kyukeisya {
  border-color: #4e31ff;
}

.mapIcons__border--dosekimi {
  border: 2px dashed #743a00;
}

.mapIcons__border--jisuberimi {
  border: 2px dashed #ffc700;
}

.mapIcons__border--kyukeisyami {
  border: 2px dashed #4e31ff;
}

@media screen and (min-width: 768px) {
  .mapIcons__border {
    width: 35px;
    height: 35px;
  }
}

.kasenlist{
    padding-left: 5px;
    list-style: none;
}
.kisholist{
  padding-left: 5px;
  list-style: none;
}

.clearleft{
  clear: left;
}

.chuuihou ,.tsunamichuui{
  float: left;
  margin-right: 0.5em;
  padding: 3px 6px 3px 6px;
  font-size: 0.95em;
  line-height: 18px;
  line-height: 16px;
  text-align: center;
  vertical-align: middle;
  -o-border-radius: 2px;
  -ms-border-radius: 2px;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  border-radius: 1px;
  background: #f8f500;
  box-sizing: border-box;
}

.keihou ,.tsunamikeihou{
  float: left;
  margin-right: 0.3em;
  padding: 3px 6px 3px 6px;
  font-size: 0.95em;
  line-height: 18px;
  line-height: 16px;
  text-align: center;
  vertical-align: middle;
  -o-border-radius: 2px;
  -ms-border-radius: 2px;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  border-radius: 1px;
  color: #f4fdfd;
  background-color: #fe0a0a;
  box-sizing: border-box;
}

.tokubetsu ,.otsunami{
  float: left;
  margin-right: 0.3em;
  padding: 3px 6px 3px 6px;
  font-size: 0.95em;
  line-height: 18px;
  line-height: 16px;
  text-align: center;
  vertical-align: middle;
  -o-border-radius: 2px;
  -ms-border-radius: 2px;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  border-radius: 1px;
  color: #f4fdfd;
  background-color: #73329c;
  box-sizing: border-box;
}


/*# sourceMappingURL=style.css.map */

/**
  * -----------------------------------------------------------------------------
  * 2025/03/19 修正追加分
  * -----------------------------------------------------------------------------
  */

#kishocontents>ul>.type>p {
    margin-top: 5px;
    margin-bottom: 5px;
}

#mapdiv {
    padding: 0;
}

#js-mapNavTab {
    left: auto;
    top: 25%;
}

#js-mapNav:not(.mapNav--minimize) {
    width: calc(100% - 100px);
    left: 60px;
    top: 25%;
}

#js-mapNav {
    max-height: 400px;
    border: 1px solid #000;
    top: 25%;
}

.header-container {
    z-index: 1000 !important;
}

:target {
    scroll-margin-top: 80px;
}

#saigaimap {
    position: relative;
}

.footer-copyright {
    margin-top: 20px;
    display: block;
    font-size: 0.8rem;
    text-align: center;
}

p.footer-contact-info {
    word-break: keep-all;
}

@media screen and (max-width: 768px) {


    .header-sub-nav-lang>select {
        width: 70px;
    }

    #hinanarea .second-info {
        flex-direction: column;
    }

    #kishoarea .second-info {
        flex-direction: column;
    }

    #information .third-info .other-info .other-info-banners {
        width: 100%;
    }

    #js-mapNav {
        max-height: 350px;
    }

    .riverlink {
        width: 80%;
        font-size: 0.8rem;
        position: initial !important;
        top: 230px !important;
        width: 100%;
        text-align: left;
        margin-bottom: 10px;
    }

    .rainlink {
      width: 80%;
      font-size: 0.8rem;
      position: initial !important;
      top: 230px !important;
      width: 100%;
      text-align: left;
      margin-bottom: 10px;
  }

    .chartboxp {
        display: flex;
        flex-direction: column;
        align-items: center;
        min-height: 70vh;

        >div {
            width: 100%;
        }
    }

    /* 降水量表示変更 */
    .chartboxp,
    .listboxp {
        display: contents;
    }

    .main-content-body {
        display: flex;
        flex-direction: column;
    }

    .chartbox,
    .listbox {
        float: none !important;
        width: 100% !important;
    }

    .listbox .list {
        width: 100%;
    }

    .chartbox.float-left {
        order: 1;
    }

    .listbox.float-left {
        order: 2;
    }

    .chartbox.float-right {
        order: 3;
    }

    .listbox.float-right {
        order: 4;
    }

    #chart2 {
        margin-top: 20px;
    }
}

@media screen and (max-width: 1350px) {

  .riverlink {
      width: 80%;
      font-size: 0.8rem;
      position: initial !important;
      top: 230px !important;
      width: 100%;
      text-align: left;
      margin-bottom: 10px;
  }

  .rainlink {
    width: 80%;
    font-size: 0.8rem;
    position: initial !important;
    top: 230px !important;
    width: 100%;
    text-align: left;
    margin-bottom: 10px;
}
}

/* english */
.translated-ltr header .header-nav ul > li > a > span {
    white-space: normal!important;
}