@charset "utf-8";

/*********************************************
 * タイトルなど
 *
 * Copyright (C) ●●など
 *********************************************/
/*====================================
	0.root
====================================*/
:root {
--color-corporate:#00A88E;
--color-corporate-blu:#3776BC;
--color-add-search:#119CDA;
--color-location-search: #EC6D74;
--color-risk-water:#0B53A2;
--color-risk-earthquake:#EA841E;
--color-table-blu: #E0EEF7;
--color-table-or: #FBE6D2;
--color-table-yw: #FDD35C;
--color-table-gr:#F6F6F6;
--color-topics-r:#FF699C;
}

/*====================================
	1.Base
====================================*/
html {
  height: 100%;
}
body {
  font-family: "游ゴシック Medium", "Yu Gothic Medium", "Yu Gothic", "Hiragino Kaku Gothic ProN", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
  font-size: 100%;
  width: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
h3 {
  color: #fff;
  text-align: center;
  padding: 0.5rem;
  line-height: 1.5;
}
h4 {
  text-align: center;
  margin-bottom: 8px;
  font-weight: bold;
  div {
    position: absolute;
    top: 0;
    left: 40%;
  }
  span {
    font-size: 0.9rem;
  }
}

a {
  text-decoration: none;
  &:hover {
    text-decoration: underline;
  }
}

button {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
}


/*====================================
	2.Layout
====================================*/
/* 2.1 Header ----------------------*/
.header {
  position: fixed;
  z-index: 999;
  width: 100%;
  top:0;
  left:0;
  background: #fff;
}
.header-gm {
  margin: 0 auto;
  background: linear-gradient(to right, #00b3fe, #039);
  text-align: right;
  font-size: 1px;
  line-height: 0;
}
.img-header-gm {
  width: 137px;
}
.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  /* min-width: 1000px; */
  max-width: 1300px;
  margin: 0 auto;
}
.header-ci-logo {
  width: 100%;
}
.header-main-img {
  width: 145px;
}

.header-link {
  color: #222222;
  a text-decoration: none;
}

/* 2.2 Footer ----------------------*/
.footer__copyright {
  /*background:linear-gradient(to right,#00b3fe,#039);*/
  background-color:#002656;
  color: #fff;
  display: flex;
  justify-content: space-between;
}

.footer__copyright__logo {
  padding: 20px 48px;
}

.footer__copyright__copy {
  padding: 28px 48px 28px 20px;
  /*background: url(/assets/image/footer_bg.png) no-repeat right bottom;*/
  text-align: right;
}
.footer__copyright__txt {
  /* font-size: 0.781rem; */
}

@media only screen and (max-width: 767px) and (orientation:portrait), only screen and (max-width:900px) and (orientation:landscape) {
  /* 2.3 Header-sp ----------------------*/
  .header {
    position: fixed;
    width: 100%;
    top:0;
    left:0;
    background: #fff;
  }
  /* .header-gm {
    margin: 0 auto;
    background: linear-gradient(to right, #00b3fe, #039);
    text-align: right;
    font-size: 1px;
    line-height: 0;
  } */
  .img-header-gm {
    width: 100px;
  }
  .header-inner {
    /* display: flex;
    justify-content: space-between;
    align-items: center;*/
    padding: .6rem;
    min-width: 100%;
    max-width: 100%;
    /* margin: 0 auto; */
  }
  .header-ci-logo {
    width: 120px;
  }
  .header-main-img {
    width: 145px;
  }

  /* 2.4 Footer-sp ----------------------*/
  .footer__copyright {
    padding: 15px 0 0 15px;
    display: block;
    position: relative;
    @media (min-width: 400px) {
      text-align: center;
    }
  }

  .footer__copyright__logo {
    padding: 0;
    margin-bottom: 2%;
  }

  .footer__copyright__copy__ci >a > img {
    width: 50%;
  }

  footer__copyright__copy__ci {
    margin-bottom: 16px;
  }

  .footer__copyright__philosophy {
    padding: 0;
    text-align: left;
  }

  .footer__copyright__copy {
    padding: 0;
    text-align: left;
  }

  .footer__copyright__txt {
    font-size: .605rem;
    line-height: 1.5;
    display: inline-block;
    padding-bottom: 4%;
  }

  .img-sp {
    padding: 0px 24px;
  }

  .footer-sp-msg {
    margin-top: 32px;
  }

  .footer-sp-logo {
    margin-top: 16px;
  }

  .footer-sp-copy {
    margin-top: 28px;
  }

  .mb-4_sp {
    margin-bottom: 1.5rem!important;
  }
}
.main-contents {
  flex: 1;
}
.container {
  position: relative;
}
.offcanvas.offcanvas-end {/*利用規約の右スライダーの幅調整 元は400px*/
  width: 60%;
}
/*====================================
	3.Module
====================================*/
/* 利用規約 */
.bl_termsOfUse {
  margin-bottom: 1rem;
}
.termsOfUse__item ol,.termsOfUse__item ul {
  padding-left: 0;
}
.list-group-numbered.round-parentheses>.list-group-item::before {/* リスト丸括弧数字 */
  content: "(" counters(section, ".") ") ";
}
.list-group-marked>.list-group-item::before {/* リスト点 */
  content: "・";
}
.list-group-nomarked>.list-group-item::before {/* リストマークなし */
  content: "";
}
.list-group-item > div {
  margin-left: .25rem;
  margin-right: auto;
}
.ol-nest>.list-group-item::before  {/* ナンバー付きリストの入れ子用 */
  content: "(" counter(section) ") "!important;
}

/* テキスト */
.text-read {
  font-size: 1.15rem;
}
.text-link {
  color: #0B53A2;
  font-weight:bold;
  position: relative;
  display: inline-block;
  transition: .3s;
}
.text-link:hover {
  text-decoration: none;
}
.text-link::after {
position: absolute;
bottom: 0;
left: 0;
content: '';
width: 0;
height: 1px;/*下線の太さ*/
background-color:#0B53A2 ;/*下線の色*/
transition: .3s;
}
.text-link:hover::after {
width: 100%;
}
small {
  font-size: .8rem;
}
.risk-block {
  display: flex;
  flex-direction: column;
}

.card {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  margin: 0 .5rem .5rem;
  max-width: ;
}
.card-header {
  background-color : transparent;
    position: relative;
  }
  .card-body {
  background-color : #fff;
    border-radiu: 0 0 var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius);
  }

.inner {
  display: flex;
  justify-content: center;
  align-items: center;
}
.inner::before {
  content: "";
  display: block;
  position: absolute;
  width: 29px;
  height:29px ;
  top: calc(50% - 12px);
  left: calc(50% - 120px);
}
.map-view {
  width: 100%;
  height: calc(100vh - 370px);
  overflow: hidden;
}
iframe {height: 100vh;}
@media only screen and (max-width: 767px) and (orientation:portrait), only screen and (max-width:900px) and (orientation:landscape) {
  .map-view {
    height: calc(100vh - 335px);
  }
  input.form-control + label {
    font-size: 0.85rem;
  }
}
.risk-table-title {
  text-align: center;
  color: #fff;
  padding: .5rem 0;
  font-weight: bold;
  font-size: 18px;
  width: calc(100% - 2px);
}

.risk-table {
  border-spacing: 0;
  width: 100%;
  /* border: 1px solid #fff;
  font-size: ;*/
  th {
    padding: 0.2rem 0.5rem;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    text-align: center;
    vertical-align: middle;
    font-size: 1.2rem;
  }
  td {
    padding: 0.3rem 0.5rem;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    background-color: var(--color-table-gr);
    text-align: center;
    vertical-align: middle;
    font-size: 1.1rem;
  }
}
.table-item {
  display: flex;
  justify-content: end;
}
.table-item div.table-item-content {
  width: 86%;
  display: flex;
}

.report-img {
  /* width: 150px; */
  width: 230px;
}
.cover-img {
  width: 100%;
  object-fit: cover;
  height: 140px;
}

.reference {
  margin-bottom: 1.25rem;
}
.reference-title {
  text-align: center;
  margin-bottom: 0.15rem;
  font-size: 1.2rem;
}
.reference-body {
  position: relative;
}
.reference-body::after{
  content: "";
  display: block;
  position: absolute;
  bottom: 1px;
  right: 0;
  width: 30%;
  height: 50%;
  z-index: 999;
  background: no-repeat;
  background-size: 100%;
  background-position: 100% 100%;
}
.reference-body.hazard-map-1::after {/* 浸水想定区域_想定規模_凡例 */
  background-image: url(../image/img-usage-guide1.png);
}
.reference-body.hazard-map-2::after {/* 浸水想定区域_想定最大規模_凡例 */
  background-image: url(../image/img-usage-guide2.png);
}
.reference-body.hazard-map-3::after {/* 土砂災害警戒区域_凡例 */
  background-image: url(../image/img-usage-guide3.png) ;
}
.reference-body.hazard-map-4::after {/* ゆれやすさ_凡例 */
  background-image: url(../image/img-usage-guide4.png) ;
}
.reference-body.hazard-map-5::after {/* 液状化_凡例 */
  background-image: url(../image/img-usage-guide5.png) ;
}
.reference-body.hazard-map-6::after {/* 南海トラフ津波_凡例 */
  background-image: url(../image/img-usage-guide6.png) ;
}
.reference-body.hazard-map-7::after {/* 都道府県津波_凡例 */
  background-image: url(../image/img-usage-guide7.png) ;
}
.legend-img {
  position: absolute;
  bottom: 0;
  right: 0;
  height: 22%;
}

.explanation {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto 20px;
  padding: 1.5rem;
  background-color: var(--color-table-blu);
  border: 2px solid var(--color-risk-water);
  position: relative;
}
.explanation p {
  font-size: 0.875rem;
}
/* .explanation-blu::before{
  content: "解説";
  position: absolute;
  top: 0;
  left: 0;
  padding: 0.5rem 0.8rem;
  background-color: var(--color-risk-water);
  color: #fff;
} */

.explanation-caution {
  border-color: var(--color-topics-r);
  background-color: #FFEFF4;
}
.explanation-title {
  position: relative;
  font-size: 1.2rem;
  font-weight: bold;
  color: #fff;
  background-color: var(--color-topics-r);
  text-align: center;
  padding: 0.2rem;
  margin: 0 auto;
  span.inner::before {
    background: url(../image/icon-warning.png) no-repeat 0 0 / 75% auto;
    left: calc(50% - 145px);
  }
}
.topics-title {
  text-align: center;
}
.topics-title p {
  display: inline-block;
  background: linear-gradient(transparent 50%, #9AC5E5 50%);
  padding: 0 0.5rem;
  font-size: calc(1.175rem + .3vw);
}
.topics {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
}
.topics-items {
  display: flex;
  flex-direction: column;
  padding: .5rem;
}
.topics-text {
  font-size: 0.875rem;
  text-align: left;
  padding: .8rem;
  margin-bottom: 0;
}
/* .warning-area {
  background-color: #F8F0F2;
  padding: .8rem;
} */
@media only screen and (max-width: 767px) and (orientation:portrait), only screen and (max-width:900px) and (orientation:landscape) {
  .topics-text {
    font-size: 0.8rem;
  }
}
.risk-level {
  margin: 0 auto;
}
.risk-level-title {
  text-align: center;
  font-size: 1.2rem;
  background-color: var(--color-table-yw);
  color: #fff;
  font-weight: bold;
}

.risk-level-result{
  display: block;
  margin: 0 auto .6rem;
  padding: 1rem;
  text-align: center;
  width: 100%;
  background-color: rgb(237 206 122 / 14%);
  span {
    font-size: 1.1rem;
    font-weight: bold;
  }
}
.risk-level-body {

}
.risk-level-comment{
  border: 2px solid var(--color-table-yw);
  background-color: #fff;
  padding: .8rem;
  width: 100%;
  margin-bottom: 2rem;
}
.emphasis {
  font-size: 1.75rem;
  font-weight: bold;
  color: #ff0000;
}
.risk-level-high {
  background-color: ;
  color: ;
}
.risk-level-medium {
  background-color: ;
  color: ;
}
.risk-level-low {
  background-color: ;
  color: #333;
}
.warning-area {
  background-color: #FFEFF4;
}
.source-text,.source-list {
  font-size: 0.8rem;
}
.list-group-numbered.source-list {
  /* counter-reset: section 2; */
}
.source-list .list-group-item {
  margin-bottom: .85rem;
}
.list-group-numbered.source-list>.list-group-item::before {
  content: "["counters(section, ".") "]"!important;
  counter-increment: section;
  flex: 0 0 2rem;
}
.source-list .list-group-item .source {
  display: flex;
  flex-direction: column;
  font-size: 0.8rem;
}
.source-title {
  font-weight: 600;
  margin-bottom: .15rem;
}
.source-body {
  margin-bottom: 0;
}


#pageTop{
  /* display: none; */
  position: absolute;
  bottom: 15px;
  right: 30px;
  /* width: 75px;
  height: 75px;
  border-radius: 50%;
  background-color: #3776BC; */
}
.page-top {
  font-size: .7rem;
  text-decoration: none;
  background: #00B1FC;
  color: rgba(255, 255, 255);
  font-weight: bold;
  width: 65px;
  height: 65px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0px 0px 0px 5px #00B1FC;
  border: solid 2px rgba(255, 255, 255);
  transition: .4s;
}
.page-top::before {
    content: "";
    display: block;
    width: 12px;
    height: 12px;
    /* 三角の線と回転角度 */
    border-top: 2px solid white;
    border-right: 2px solid white;
    transform: rotate(-45deg);
}
.page-top:hover {
  opacity: .4;
  text-decoration: none;
}
/*====================================
	4.State
====================================*/
/* 4.1 add-search ----------------------*/
.add-search {
  background-color: var(--color-add-search);
  border : 2px solid var(--color-add-search);
  width: 100%;
  span.inner::before {
    background: url(../image/icon-search.png) no-repeat 0 0 / 75% auto;
  }
}
.btn.add-search:hover {
  background-color: rgb(17 156 218 / 12%);
  border-color: var(--color-add-search);
  color: var(--color-add-search)!important;
}
/* #button-addon2 {
  width: auto;
} */
#btnMapAddress {
  width: auto;
}

/* 4.2 location-search ----------------------*/
.location-search {
  background-color: var(--color-location-search);
  border: 2px solid var(--color-location-search);
  width: 100%;
  span.inner::before {
    background: url(../image/icon-location.png) no-repeat 0 0 / 85% auto;
  }
}
.btn.location-search:hover {
  background-color: rgb(236 109 116 / 14%);
  border-color: var(--color-location-search);
  color: var(--color-location-search)!important;
}

/* 4.3 risk-water ----------------------*/
.risk-water {
  background-color : var(--color-risk-water) ;
  border :  2px solid var(--color-risk-water);
}

/* 4.4 risk-earthquake ----------------------*/
.risk-earthquake {
  background-color: var(--color-risk-earthquake);
  border :  2px solid var(--color-risk-earthquake);
}
.btn.risk-earthquake:hover {
  background-color : rgba(246, 126, 74, 0.192);
  border-color: var(--color-risk-earthquake);
  color: var(--color-risk-earthquake)!important;
}

/* 4.5 Table-calor ----------------------*/
.table-blu-th {
  background-color: var(--color-table-blu);
}

.table-or-th {
  background-color: var(--color-table-or);
}

.table-yw-th {
  background-color: var(--color-table-yw);
  color: #fff;
}
.table-yw-td {
  background-color: rgb(237 206 122 / 14%)!important;
}

/* 4.６ quotation-text ----------------------*/
.img-sp {
    display: none;
}

@media screen and (max-width:560px) {
    .img-pc {
        display: none;
    }
    .head-pc {
        display: none;
    }

    .img-sp {
        display: block;
    }
}