@charset "UTF-8";

/* =========================================================
  top
========================================================= */

/* site layout
----------------------------------------------- */
#links {
  padding: 23px 0 70px;
}

#main {
  padding-top: 34px;
  padding-right: 32px;
  padding-bottom: 0;
}

#content {
  padding-top: 70px;
  padding-bottom: 70px;
}

@media only screen and (max-width: 959px) {
  #main {
    padding-top: 20px;
    padding-right: 8px;
  }
}

@media only screen and (max-width: 767px) {
  #main {
    padding-top: 20px;
  }

  #content {
    padding-top: 28px;
    padding-bottom: 28px;
  }
}

/* emergencyDocs
----------------------------------------------- */
#emergencyDocs {
  max-width: 1600px;
  margin: 0 auto 30px;
  padding: 28px 38px 20px;
  border: 2px solid var(--ac-color-red-1);
  border-radius: 16px;
  background: #fff6f8;
}

#emergencyDocs .pieceHeader h2 {
  margin-bottom: 20px;
  color: #e73562;
  font-weight: 600;
  font-size: 1.625rem;
  font-family: "Zen Maru Gothic", sans-serif;
  line-height: 1.4;
}

#emergencyDocs .pieceBody ul {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

#emergencyDocs .pieceBody li {
  display: flex;
  gap: 2px 12px;
  font-size: 1.125rem;
}

#emergencyDocs .pieceBody li .update_date {
  flex-shrink: 0;
}

#emergencyDocs .pieceBody .more > a {
  display: block;
  margin-top: 30px;
  padding: 8px 38px;
  border: 1px solid #e73562;
  border-radius: 7px;
  background: url(/_themes/site/images/arrow-white.svg) right 17px center no-repeat #e73562;
  color: var(--mono-color-9);
  font-size: 1.125rem;
  text-decoration: none;
  text-align: center;
}

#emergencyDocs .pieceBody .more a:hover {
  opacity: 0.6;
}

@media only screen and (max-width: 767px) {
  #emergencyDocs .pieceBody li {
    flex-direction: column;
  }
}

@media only screen and (max-width: 534px) {
  #emergencyDocs {
    padding: 12px 14px 20px;
  }

  #emergencyDocs .pieceHeader h2 {
    margin-bottom: 10px;
    font-size: 1.5rem;
  }

  #emergencyDocs .pieceBody .more > a {
    margin-top: 20px;
  }
}

/* noticeSlider
----------------------------------------------- */
#noticeSlider {
  width: 100vw;
  margin: 0 -32px 0 -132px;
}

#noticeSlider .slick-slider {
  min-width: 0;
}

#noticeSlider .slick-track {
  display: flex;
  margin: 0 -8px;
}

#noticeSlider .slick-slide {
  width: 428px;
  height: auto;
  margin: 2px 8px 6px;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 0 5px rgba(0,0,0,.1);
  background: var(--mono-color-9);
}

#noticeSlider .slick-slide div,
#noticeSlider .slick-slide li,
#noticeSlider .slick-slide a {
  height: 100%;
}

#noticeSlider .slick-slide a {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: opacity 0.25s ease-in-out;
}

#noticeSlider .slick-slide a:hover {
  opacity: 0.6;
}

#noticeSlider .slick-slide span {
  display: block;
}

#noticeSlider .slick-slide .image img {
  display: block;
  object-fit: cover;
  object-position: top center;
  aspect-ratio: 428/285;
}

#noticeSlider .slick-slide span.txt {
  padding: 21px 25px;
  background: var(--mono-color-9);
}

#noticeSlider .slick-slide span.title {
  color: var(--a-color);
}

#noticeSlider .slick-btn {
  margin-top: 10px;
}

@media only screen and (max-width: 959px) {
  #noticeSlider {
    margin: 0 -16px;
  }
}

@media only screen and (max-width: 534px) {
  #noticeSlider .slick-track {
    display: block;
    margin: 0;
  }

  #noticeSlider .slick-slide {
    width: calc(100vw - 32px);
  }
}

/* column-block
----------------------------------------------- */
.column-block {
  display: flex;
}

@media only screen and (max-width: 767px) {
  .column-block {
    flex-direction: column;
  }
}

/* column-block keyword
----------------------------------------------- */
.column-block.keyword {
  gap: 24px;
  margin-bottom: 40px;
  /*
  padding-bottom: 38px;
  border-bottom: 1px dotted var(--mono-color-5);
  */
}

.column-block.keyword .column-block-item:first-child {
  flex-shrink: 0;
  flex-basis: 43%;
  max-width: 600px;
}

.column-block.keyword .column-block-item:last-child {
  flex-grow: 1;
  flex-shrink: 1;
}

.column-block.keyword .pieceHeader h2 {
  margin-bottom: 10px;
  font-weight: 700;
  font-size: 1.125rem;
  font-family: "Zen Maru Gothic", sans-serif;
}

.frequentlyKeyword ul {
  justify-content: flex-start;
  padding-top: 6px;
}

@media only screen and (max-width: 767px) {
  .column-block.keyword {
    /*
    margin-bottom: 24px;
    */
    margin-bottom: 34px;
    padding-bottom: 0;
    border-bottom: 0;
  }
}

/* pickUp
----------------------------------------------- */
#pickUp {
  margin-bottom: 40px;
}

#pickUp ul {
  display: flex;
  justify-content: center;
  gap: min(40px,2.5vw);
}

#pickUp li {
  flex-grow: 1;
}

#pickUp a {
  display: block;
  transition: opacity 0.25s ease-in-out;
}

#pickUp a:hover {
  opacity: 0.6;
}

#pickUp img {
  width: 100%;
  box-shadow: 0px 3px 9px rgba(0,0,0,0.1);
}

@media only screen and (max-width: 1279px) {
  #pickUp a {
    aspect-ratio: 16/9;
  }

  #pickUp img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

@media only screen and (max-width: 767px) {
  #pickUp {
    margin-bottom: 34px;
  }
}

@media only screen and (max-width: 534px) {
  #pickUp ul {
    flex-direction: column;
    gap: 20px;
  }
}

/* useful
----------------------------------------------- */
#useful {
  margin-bottom: 15px;
  padding-bottom: 53px;
  border-bottom: 1px dotted var(--mono-color-5);
}

#useful .pieceHeader h2 {
  margin-bottom: 17px;
  font-weight: 700;
  font-size: 1.3125rem;
  font-family: "Zen Maru Gothic", sans-serif;
  text-align: center;
}

#useful .pieceBody ul.upper {
  display: flex;
  flex-wrap: wrap;
  gap: 17px;
  margin-bottom: 34px;
}

#useful .pieceBody ul.upper li {
  flex-basis: calc((100% - 34px) / 3);
}

#useful .pieceBody ul.upper li a {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 14px;
  position: relative;
  height: 100%;
  min-height: 144px;
  padding: 13px 5px 20px;
  border: 2px solid transparent;
  border-radius: 8px;
  box-shadow: 0px 3px 9px rgba(0,0,0,0.1);
  background: var(--mono-color-9);
  color: inherit;
  text-decoration: none;
  text-align: center;
  transition: transform 0.25s ease-in-out, border-color 0.25s ease-in-out, color 0.25s ease-in-out;
}

#useful .pieceBody ul.upper li a:hover {
  border-color: var(--ac-color-green-1);
  color: var(--a-hover-color);
}

#useful .pieceBody ul.upper li img {
  opacity: 1;
}

#useful .pieceBody ul.lower {
  display: flex;
  gap: 15px;
}

#useful .pieceBody ul.lower li {
  flex-basis: calc((100% - 15px) / 2);
  border-radius: 8px;
  background: url(/_themes/site/images/anchor-life_soshiki.svg) right 25px center no-repeat var(--mono-color-9);
}

#useful .pieceBody ul.lower li a {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  position: relative;
  min-height: 80px;
  padding: 10px 5px;
  border-radius: 8px;
  box-shadow: 0px 3px 9px rgba(0,0,0,0.1);
  color: var(--a-color);
  font-size: 1.125rem;
  text-decoration: none;
  text-align: center;
  transition: color 0.25s ease-in-out;
}

#useful .pieceBody ul.lower li a:hover {
  color: var(--a-hover-color);
}

#useful .pieceBody ul.lower li a::before {
  content: "";
  opacity: 0;
  position: absolute;
  inset: 0;
  border: 2px solid var(--ac-color-green-1);
  border-radius: 8px;
  background: none !important;
  transition: opacity 0.25s ease-in-out;
}

#useful .pieceBody ul.lower li a:hover::before {
  opacity: 1;
}

#useful .pieceBody ul.lower li img {
  margin: 0 auto;
}

#useful .pieceBody ul.lower li span {
  padding: 5px;
  background: var(--mono-color-9);
}

#useful .pieceBody ul.lower li.lifescene a {
  padding-right: 65px;
  background: url(/_themes/site/images/lifeevent-ic.svg) 3% center / min(50%,299px) auto no-repeat;
}

#useful .pieceBody ul.lower li.soshiki a {
  padding-right: 75px;
  background: url(/_themes/site/images/soshiki-ic.svg) 10% bottom / min(25%,144px) auto no-repeat;
}

#useful .pieceBody ul.lower li.soshiki img {
  align-self: flex-end;
}

#useful .pieceBody .for-side {
  display: none !important;
}

@media only screen and (min-width: 1280px), print {
  #useful .pieceBody ul.upper {
    flex-wrap: nowrap;
    position: relative;
    padding-bottom: 13px;
  }

  #useful .pieceBody ul.upper::before {
    content: "";
    position: absolute;
    right: 9px;
    bottom: 0;
    left: 9px;
    border-bottom: 3px solid var(--ac-color-green-2);
  }

  #useful .pieceBody ul.upper li {
    flex: 1 1 0;
    position: relative;
    padding-bottom: 3px;
  }

  #useful .pieceBody ul.upper li::before {
    content: "";
    opacity: 0;
    position: absolute;
    bottom: -23px;
    left: 50%;
    transform: translateX(-50%);
    width: 45px;
    height: 21px;
    border-radius: 50%;
    background: var(--ac-color-green-1);
    transition: opacity 0.25s ease-in-out;
  }

  #useful .pieceBody ul.upper li:hover::before {
    opacity: 1;
  }

  #useful .pieceBody ul.upper li::after {
    content: "";
    position: absolute;
    bottom: -18px;
    left: 50%;
    transform: translateX(-50%);
    width: 35px;
    height: 12px;
    border: 3px solid var(--ac-color-green-2);
    border-radius: 50%;
    background: var(--ac-color-green-5);
  }

  #useful .pieceBody ul.upper li a:hover {
    transform: translateY(-10px);
  }

  #useful .pieceBody ul.upper li a::before {
    content: "";
    opacity: 0;
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    border-top: 8px solid var(--ac-color-green-1);
    border-right: 12px solid transparent;
    border-left: 12px solid transparent;
    transition: opacity 0.25s ease-in-out;
  }

  #useful .pieceBody ul.upper li a:hover::before {
    opacity: 1;
  }

  #useful .pieceBody ul.upper li a::after {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    border-top: 6px solid var(--mono-color-9);
    border-right: 9px solid transparent;
    border-left: 9px solid transparent;
  }
}

@media only screen and (max-width: 767px) {
  #useful {
    margin-bottom: 35px;
    padding-bottom: 0;
    border-bottom: none;
  }

  #useful .pieceBody ul.upper {
    gap: 9px;
    margin-bottom: 9px;
  }

  #useful .pieceBody ul.upper li {
    flex-basis: calc((100% - 9px) / 2);
  }

  #useful .pieceBody ul.upper li a {
    min-height: 125px;
    padding-bottom: 15px;
    font-size: 0.9375rem;
  }

  #useful .pieceBody ul.lower {
    flex-direction: column;
    gap: 9px;
  }

  #useful .pieceBody ul.lower li {
    flex-basis: 100%;
    background-position: right 14px top 21px;
  }

  #useful .pieceBody ul.lower li a {
    min-height: 120px;
    padding: 5px 30px 68px;
    font-size: 1.0625rem;
  }

  #useful .pieceBody ul.lower li.lifescene a {
    background-position: center bottom 7px;
    background-size: min(298px,85%) auto;
  }

  #useful .pieceBody ul.lower li.soshiki a {
    background-position: center bottom;
    background-size: min(144px,44%) auto;
  }
}

/* column-block town
----------------------------------------------- */
.column-block.town {
  flex-wrap: wrap;
  gap: 36px 17px;
  margin-bottom: 44px;
}

.column-block.town .column-block-item:nth-child(2),
.column-block.town .column-block-item:nth-child(3) {
  border-radius: 8px;
  box-shadow: 0px 3px 9px rgba(0,0,0,0.1);
  background: var(--mono-color-9);
}

.column-block.town .column-block-item:nth-child(2) {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: calc(100% - 264px - 17px);
  padding: 10px 10px 15px;
}

.column-block.town .column-block-item:nth-child(3) {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 264px;
}

@media only screen and (max-width: 767px) {
  .column-block.town {
    flex-wrap: nowrap;
    gap: 16px;
    margin-bottom: 16px;
  }

  .column-block.town .column-block-item:nth-child(3) {
    flex-basis: auto;
  }
}

/* info
----------------------------------------------- */
#info {
  flex-basis: 100%;
}

#info .pieceHeader h2 {
  margin-bottom: 17px;
  font-weight: 700;
  font-size: 1.3125rem;
  font-family: "Zen Maru Gothic", sans-serif;
  text-align: center;
}

#info ul {
  display: flex;
  align-items: center;
  gap: 17px;
}

#info li {
  flex: 1 1 0;
}

#info a {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 100%;
  min-height: 60px;
  padding: 10px 15px;
  border: 2px solid transparent;
  border-radius: 8px;
  box-shadow: 0px 3px 9px rgba(0,0,0,0.1);
  background: var(--mono-color-9);
  color: inherit;
  font-weight: 700;
  font-size: 1.125rem;
  font-family: "Zen Maru Gothic", sans-serif;
  text-decoration: none;
  transition: border-color 0.25s ease-in-out, color 0.25s ease-in-out;
}

#info a:hover {
  border-color: var(--ac-color-green-1);
  color: var(--a-hover-color);
}

#info .mayor a {
  padding: 7px 5px 7px 10px;
}

#info .mayor img {
  max-height: 42px;
}

@media only screen and (max-width: 767px) {
  #info ul {
    flex-direction: column;
  }

  #info li {
    width: 100%;
  }
}

/* doc-box
----------------------------------------------- */
.doc-box-tab {
  display: flex;
  align-items: flex-end;
  gap: 9px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--ac-color-green-1);
}

.doc-box-tab .pieceHeader {
  flex: 1 1 0;
}

.doc-box-tab .pieceHeader button {
  width: 100%;
  padding: 6px 5px;
  border: 1px solid var(--mono-color-8);
  background-color: var(--mono-color-8);
  text-align: center;
  transition: background-color 0.25s ease-in-out;
}

.doc-box-tab .pieceHeader button:not(.current):hover {
  transform: translateY(4px);
  padding: 10px 5px;
  border-radius: 7px 7px 0 0;
  background-color: var(--ac-color-green-4);
}

.doc-box-tab .pieceHeader button.current {
  transform: translateY(5px);
  padding: 12px 5px;
  border: 1px solid var(--ac-color-green-1);
  border-radius: 7px 7px 0 0;
  background-color: var(--ac-color-green-4);
}

.doc-box-body .pieceBody ul.docs {
  display: flex;
  flex-direction: column;
  gap: 26px;
  height: 220px;
  margin: 30px 0;
  padding: 0 18px;
  overflow-x: hidden;
}

.doc-box-body .pieceBody ul.docs li {
  display: flex;
  gap: 2px 12px;
  font-size: 1.125rem;
}

.doc-box-body .pieceBody ul.docs li .publish_date,
.doc-box-body .pieceBody ul.docs li .update_date {
  flex-shrink: 0;
}

.doc-box-body .pieceBody .more {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 15px 18px;
  padding-top: 18px;
  border-top: 1px dotted var(--mono-color-5);
}

.doc-box-body .pieceBody .more .sns {
  display: flex;
  align-items: center;
  gap: 3px 18px;
}

.doc-box-body .pieceBody .more .sns > li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.doc-box-body .pieceBody .more .sns a {
  color: inherit;
  text-decoration: none;
}

.doc-box-body .pieceBody .more .sns a:hover {
  color: var(--a-hover-color);
}

.doc-box-body .pieceBody .more > a {
  flex-grow: 1;
  max-width: 62%;
  padding: 6px 38px;
  border: 1px solid var(--ac-color-green-4);
  border-radius: 7px;
  background: url(/_themes/site/images/arrow-footer.svg) right 17px center no-repeat var(--ac-color-green-4);
  color: inherit;
  font-size: 1.125rem;
  text-decoration: none;
  text-align: center;
}

.doc-box-body .pieceBody .more a:hover {
  opacity: 0.6;
}

@media only screen and (max-width: 767px) {
  .doc-box-body .pieceBody ul.docs {
    height: 230px;
    margin: 20px 0;
  }

  .doc-box-body .pieceBody ul.docs li {
    flex-direction: column;
  }

  .doc-box-body .pieceBody .more {
    justify-content: center;
  }

  .doc-box-body .pieceBody .more > a {
    max-width: 100%;
    min-width: 200px;
  }
}

/* disasterRadioTop
----------------------------------------------- */
#disasterRadioTop .pieceBody #bosaiBody {
  display: flex;
  flex-direction: column;
  gap: 26px;
  padding: 30px;
}

#disasterRadioTop .pieceBody #bosaiBody .header {
  display: flex;
  align-items: center;
  gap: 5px 25px;
  font-size: 1.125rem;
}

#disasterRadioTop .pieceBody #bosaiBody .header .button-wrapper {
  flex-shrink: 0;
  padding: 5px 0;
}

#disasterRadioTop .pieceBody #bosaiBody .header .button-wrapper button {
  padding: 7px 20px 7px 35px;
  border: 1px solid var(--ac-color-green-1);
  border-radius: 7px;
  background-image: url(/_themes/site/images/ic-slider_playback.svg) !important;
  background-position: 15px center !important;
  background-repeat: no-repeat !important;
  background-color:  var(--ac-color-green-4);
  font-size: 1rem;
  transition: opacity 0.25s ease-in-out;
}

#disasterRadioTop .pieceBody #bosaiBody .header .button-wrapper button:hover {
  opacity: 0.6;
}

#disasterRadioTop .pieceBody #bosaiBody .header .button-wrapper button.playing {
  background-image: url(/_themes/site/images/ic-slider_stop.svg) !important;
}

#disasterRadioTop .pieceBody #bosaiBody .modal-content {
  display: none;
}

#disasterRadioTop .pieceBody .bosai-more {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 15px 18px;
  padding-top: 18px;
  border-top: 1px dotted var(--mono-color-5);
}

#disasterRadioTop .pieceBody .bosai-more a {
  flex-grow: 1;
  max-width: 62%;
  padding: 6px 38px;
  border: 1px solid var(--ac-color-green-4);
  border-radius: 7px;
  background: url(/_themes/site/images/arrow-footer.svg) right 17px center no-repeat var(--ac-color-green-4);
  color: inherit;
  font-size: 1.125rem;
  text-decoration: none;
  text-align: center;
}

#disasterRadioTop .pieceBody .bosai-more a:hover {
  opacity: 0.6;
}

/* featherlight */
.featherlight .featherlight-content {
  display: inline-flex;
  max-width: min(90%, 1030px);
  max-height: 85%;
  padding-bottom: 25px;
  overflow: visible;
  border: 1px solid transparent;
  border-radius: 8px;
}

.featherlight .featherlight-close-icon {
  top: 0;
  right: 0;
  transform: translate(50%, -50%);
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background-color: #ccc;
  line-height: 35px;
}

.featherlight .featherlight-close-icon:hover {
  opacity: 0.8;
}

.featherlight .featherlight-next,
.featherlight .featherlight-previous {
  top: 0;
  bottom: 0;
  background: none !important;
}

.featherlight .featherlight-next {
  right: 0;
  left: 90%;
}

.featherlight .featherlight-previous {
  right: 90%;
  left: 0;
}

.featherlight .featherlight-next:hover,
.featherlight .featherlight-previous:hover {
  background: rgba(0, 0, 0, .25) !important;
}

.featherlight .featherlight-next span,
.featherlight .featherlight-previous span {
  font-size: 40px;
}

.featherlight .featherlight-inner {
  width: 100%;
  overflow-x: hidden;
}

.featherlight .modalInner {
  padding: 15px;
}

.featherlight .modalHeader {
  display: flex;
  align-items: center;
  gap: 5px 25px;
  margin-bottom: 20px;
  font-size: 1.125rem;
}

.featherlight .modalHeader .button-wrapper {
  flex-shrink: 0;
  padding: 5px 0;
}

.featherlight .modalHeader .button-wrapper button {
  padding: 7px 20px 7px 35px;
  border: 1px solid var(--ac-color-green-1);
  border-radius: 7px;
  background-image: url(/_themes/site/images/ic-slider_playback.svg) !important;
  background-position: 15px center !important;
  background-repeat: no-repeat !important;
  background-color:  var(--ac-color-green-4);
  font-size: 1rem;
  transition: opacity 0.25s ease-in-out;
}

.featherlight .modalHeader .button-wrapper button:hover {
  opacity: 0.6;
}

.featherlight .modalHeader .button-wrapper button.playing {
  background-image: url(/_themes/site/images/ic-slider_stop.svg) !important;
}

@media only screen and (max-width: 767px) {
  #disasterRadioTop .pieceBody #bosaiBody {
    padding: 20px 18px;
  }

  #disasterRadioTop .pieceBody #bosaiBody .header {
    flex-direction: column;
    align-items: flex-start;
    font-size: 1rem;
  }

  #disasterRadioTop .pieceBody #bosaiBody .header .button-wrapper button {
    font-size: 0.875rem;
  }

  #disasterRadioTop .pieceBody .bosai-more {
    justify-content: center;
  }

  #disasterRadioTop .pieceBody .bosai-more a {
    max-width: 100%;
    min-width: 200px;
  }

  /* featherlight */
  .featherlight .featherlight-content {
    max-width: 90%;
    padding-bottom: 15px;
  }

  .featherlight .featherlight-next,
  .featherlight .featherlight-previous {
    display: block;
    top: 30%;
    bottom: 40%;
    background: transparent !important;
  }

  .featherlight .featherlight-next {
    right: -25px;
  }

  .featherlight .featherlight-previous {
    left: -25px;
  }

  .featherlight .featherlight-next:hover,
  .featherlight .featherlight-previous:hover {
    background: transparent !important;
  }

  .featherlight .featherlight-next span,
  .featherlight .featherlight-previous span {
    color: #000;
    font-size: 30px;
    line-height: inherit;
  }

  .featherlight .modalHeader {
    flex-direction: column;
    font-size: 1rem;
  }

  .featherlight .modalHeader .button-wrapper button {
    font-size: 0.875rem;
  }
}

/* population
----------------------------------------------- */
#population {
  padding: 20px 15px 15px;
}

#population .pieceHeader h2 {
  margin-bottom: 12px;
  font-weight: 700;
  font-size: 1.125rem;
  font-family: "Zen Maru Gothic", sans-serif;
}

#population .pieceBody {
  text-align: center;
}

#population .total,
#population .household {
  display: flex;
  justify-content: center;
  align-items: center;
  background-position: center top;
  background-repeat: no-repeat;
  font-size: 1.0625rem;
}

#population .total {
  margin-bottom: 5px;
  padding-top: 52px;
  background-image: url(/_themes/site/images/jinko.svg);
}

#population .household {
  margin-bottom: 10px;
  padding-top: 64px;
  background-image: url(/_themes/site/images/setai.svg);
}

#population .total dt,
#population .household dt {
  font-weight: 400;
}

#population .total dt::after,
#population .household dt::after {
  content: "：";
  margin-left: -6px;
}

#population .total strong,
#population .household strong {
  margin-right: 5px;
  font-size: 1.0625rem;
}

#population .gender {
  display: flex;
  margin-bottom: 17px;
  padding: 0 10px;
}

#population .gender dl:first-child {
  flex-basis: 46%;
  text-align: left;
}

#population .gender dl:last-child {
  flex-basis: 54%;
  text-align: right;
}

#population .gender dl dt {
  padding: 3px 6px;
  font-weight: 400;
  line-height: 1.3;
}

#population .gender dl:first-child dt {
  border: 1px solid #80a1d5;
  border-radius: 4px 0 0 4px;
  background: #80a1d5;
}

#population .gender dl:last-child dt {
  border: 1px solid #f0778e;
  border-left: none;
  border-radius: 0 4px 4px 0;
  background: #f0778e;
}

#population .gender dl dd {
  font-size: 0.875rem;
}

#population .gender dl:first-child dd {
  padding-left: 10px;
}

#population .gender dl:last-child dd {
  padding-right: 5px;
}

#population .gender dl dd strong {
  font-size: 1.0625rem;
}

#population p {
  font-size: 0.875rem;
  text-align: right;
}

@media only screen and (max-width: 767px) {
  #population .pieceHeader h2 {
    font-size: 1.3125rem;
  }

  #population .gender {
    max-width: 214px;
    margin-inline: auto;
  }
}

/* media-block
----------------------------------------------- */
.media-block {
  display: flex;
  flex-wrap: wrap;
  gap: 17px 24px;
  margin-bottom: 40px;
  padding: 24px 24px 28px;
  border-radius: 8px;
  box-shadow: 0px 3px 9px rgba(0,0,0,0.1);
  background: var(--mono-color-9);
}

.media-block > h2 {
  flex-basis: 100%;
  font-weight: 700;
  font-size: 1.3125rem;
  font-family: "Zen Maru Gothic", sans-serif;
}

.media-block .piece dt {
  margin-bottom: 15px;
  padding: 9px;
  border-radius: 8px;
  border: 1px solid #e8ebf4;
  background: #e8ebf4;
  font-weight: 500;
  font-size: 0.875rem;
  text-align: center;
}

.media-block .piece dd ul {
  padding-left: 8px;
}

.media-block .piece dd li {
  position: relative;
  margin-bottom: 8px;
  padding-left: 12px;
}

.media-block .piece dd li::before {
  content: "";
  position: absolute;
  top: 0.65em;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--mono-color-0);
}

@media only screen and (max-width: 767px) {
  .media-block {
    gap: 13px;
    padding: 24px 22px;
  }

  .media-block > * {
    width: 100%;
  }

  .media-block .piece dd ul {
    padding-left: 12px;
  }
}

/* koho
----------------------------------------------- */
#koho {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 345px;
  padding-right: 24px;
  border-right: 1px solid var(--mono-color-5);
}

#koho li.docs {
  display: flex;
  gap: 22px 19px;
}

#koho li.docs .image {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 140px;
}

#koho li.docs dl {
  flex-grow: 1;
}

@media only screen and (max-width: 1279px) {
  #koho {
    flex-basis: calc((100% - 24px) / 2);
  }
}

@media only screen and (max-width: 767px) {
  #koho {
    flex-basis: 100%;
    padding-right: 0;
    border-right: none;
  }

  #koho li.docs {
    flex-wrap: wrap;
    justify-content: center;
  }

  #koho li.docs dl {
    flex-basis: 100%;
  }
}

/* kohoDx
----------------------------------------------- */
#kohoDx {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 295px;
  padding-right: 24px;
  border-right: 1px solid var(--mono-color-5);
  text-align: center;
}

#kohoDx dt {
  display: inline-block;
  min-width: 162px;
}

#kohoDx dd span {
  display: inline-block;
}

#kohoDx dd a {
  transition: opacity 0.25s ease-in-out;
}

#kohoDx dd a:hover {
  opacity: 0.6;
}

@media only screen and (max-width: 1279px) {
  #kohoDx {
    flex-basis: calc((100% - 24px) / 2);
    padding-right: 0;
    border-right: none;
  }
}

@media only screen and (max-width: 767px) {
  #kohoDx dt {
    display: block;
  }
}

/* media
----------------------------------------------- */
#media {
  flex-grow: 1;
  flex-shrink: 1;
}

#media .pieceContainer,
#media .pieceBody,
#media .pieceBody > ul {
  height: 100%;
}

#media .pieceBody > ul {
  display: flex;
  gap: 0 24px;
}

#media .pieceBody > ul > li {
  flex-grow: 1;
  flex-basis: 162px;
}

#media .pieceBody > ul > li:not(:last-child) {
  padding-right: 24px;
  border-right: 1px solid var(--mono-color-5);
}

@media only screen and (max-width: 1279px) {
  #media {
    flex-basis: 100%;
    padding-top: 24px;
    border-top: 1px solid var(--mono-color-5);
  }
}

@media only screen and (max-width: 767px) {
  #media {
    padding-top: 7px;
    border-top: none;
  }

  #media .pieceBody > ul {
    flex-direction: column;
    gap: 16px;
  }

  #media .pieceBody > ul > li {
    flex-basis: auto;
  }

  #media .pieceBody > ul > li:not(:last-child) {
    padding-right: 0;
    border-right: none;
  }
}

/* bizPr
----------------------------------------------- */
#bizPr {
  margin-bottom: 60px;
}

#bizPr .pieceHeader {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}

#bizPr .pieceHeader h2 {
  margin-bottom: 12px;
  font-weight: 400;
  font-size: 1.625rem;
  font-family: "Zen Maru Gothic", sans-serif;
}

#bizPr .pieceBody {
  position: relative;
}

#bizPr .slideImagesWrapper {
  margin: 0 -32px 0 -132px;
}

#bizPr .slideImages {
  transform: translateX(-50%);
  width: 100vw;
  margin-left: 50%;
}

#bizPr .slick-slider {
  min-width: 0;
}

#bizPr .slick-track {
  display: flex;
  margin: 0 -8px;
}

#bizPr .slick-slide {
  width: 424px;
  height: auto;
  margin: 2px 8px 6px;
}

#bizPr .slick-slide div,
#bizPr .slick-slide li,
#bizPr .slick-slide a {
  height: 100%;
}

#bizPr .slick-slide a {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  color: inherit;
  text-decoration: none;
  transition: opacity 0.25s ease-in-out, color 0.25s ease-in-out;
}

#bizPr .slick-slide a:hover {
  opacity: 0.6;
  color: var(--a-hover-color);
}

#bizPr .slick-slide .img {
  width: 100%;
  display: block;
  margin-bottom: 8px;
  padding: 7px;
  border-radius: 14px;
  box-shadow: 0 0 5px rgba(0,0,0,.1);
  background: var(--mono-color-9);
}

#bizPr .slick-slide .img img {
  display: block;
  object-fit: cover;
  aspect-ratio: 428/285;
  border-radius: 12px;
}

#bizPr .slick-slide span.txt {
  margin: auto;
  text-align: center;
}

#bizPr .slick-slide span.txt strong {
  display: block;
  font-weight: 400;
  font-size: 1.1875rem;
}

@media only screen and (max-width: 959px) {
  #bizPr .slideImagesWrapper {
    margin: 0 -16px;
  }

  #bizPr .slideImages {
    transform: none;
    margin-left: 0;
  }
}

@media only screen and (max-width: 767px) {
  #bizPr .pieceHeader {
    display: block;
  }
}

@media only screen and (max-width: 534px) {
  #bizPr {
    margin-bottom: 20px;
  }

  #bizPr .slick-track {
    display: block;
    margin: 0;
  }

  #bizPr .slick-slide {
    width: 100vw;
  }
}

/* advertisement
----------------------------------------------- */
#advertisement .pieceHeader h2 {
  margin-bottom: 12px;
  font-weight: 400;
  font-size: 1.625rem;
  font-family: "Zen Maru Gothic", sans-serif;
}

#advertisement .bannerImages {
  display: flex;
  flex-wrap: wrap;
  gap: 17px;
  text-align: center;
}

#advertisement .bannerImages a {
  transition: opacity 0.25s ease-in-out;
}

#advertisement .bannerImages a:hover {
  opacity: 0.6;
}

@media only screen and (max-width: 534px) {
  #advertisement .bannerImages {
    gap: 17px 15px;
  }

  #advertisement .bannerImages .banner {
    flex-basis: calc((100% - 15px) / 2);
  }
}