@charset "utf-8";

/*=====================================
laws.css
=====================================*/

/* 箇条書き */
.note__list {
  padding-left: 20px;
}

.note__list li {
  margin-bottom: 8px;
}

/*-------------------------------------
 リンク用
-------------------------------------*/
.listbox {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  padding: 0 20px;
  border-radius: 6px;
}

.linkbox {
  list-style: none;
  padding-left: 0;
  border-radius: 6px;
}

.laws__sublist {
  margin-inline-start: 2em;
}

.lawsDocument__link {
  display: block;
  width: fit-content;
  margin: 4px 0 4px 56px;
}

/*-------------------------------------
 写真トピックス
-------------------------------------*/
.sectionInner--topics {
  padding-top: 8rem;
}

/*ホバー時強調表示*/
.personname,
.relatedlinks,
.officialdocuments {
  text-decoration: none;
}

.personname:hover,
.relatedlinks:hover,
.officialdocuments:hover {
  text-decoration: underline;
}

/* =========== tablet / narrow-pc =========== */
@media (max-width: 64em) {
  /* 20260911 */

  .topBanner__list {
    max-width: 100%;
  }
}

/* =========== sp =========== */
@media (max-width: 48em) {
  /*-------------------------------------
 重要なお知らせ / リンク
-------------------------------------*/
  .sectionInner--notice {
    padding-top: 0;
  }

  /* 重要なお知らせ */
  .topNotice {
    padding: 2.4rem var(--inner-padding) 4.3rem;
  }

  .topNotice__list {
    row-gap: 1rem;
  }

  /* リンク */
  .topLink {
    padding-top: 1.2rem;
  }

  .topLink__list {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
  }

  .topLink__item a {
    padding: 1rem 3rem 1.1rem 4.6rem;
    font-size: 1.6rem;
    border-width: 3px;
  }

  .topLink__item a::before {
    top: 1.4rem;
    left: 1.6rem;
    width: 2.2rem;
    height: 2.1rem;
  }

  .topLink__item a::after {
    top: 1.6rem;
    right: 1.4rem;
    width: 1.5rem;
    height: 1.4rem;
  }

  /* 新着情報 */
  .topInfo__tab {
    gap: 0.8rem;
    padding-inline: var(--inner-padding);
  }

  .topInfo__group {
    padding: 2.4rem var(--inner-padding) 4rem;
  }

  .topInfo__box {
    padding: 0.5rem;
  }

  .topInfo__list {
    height: 50dvh;
    max-height: 50rem;
    padding-inline: 1.1rem;
  }

  .topInfo__itemWrap {
    display: block;
    padding: 1.6rem 0;
  }

  .topInfo__itemWrap::after {
    top: 1.6rem;
    right: 0;
    margin-top: 0;
  }

  .topInfo__itemDate {
    padding: 0 3rem 1rem 0;
  }

  .topInfo__btn {
    padding-top: 2.4rem;
  }

  .topInfo__btn a {
    min-width: 21.5rem;
    min-height: 5rem;
    padding-inline: 2.6rem;
  }

  .topInfo__btn a::after {
    width: 0.9rem;
    height: 1rem;
  }

  /*-------------------------------------
 写真トピックス
-------------------------------------*/
  .sectionInner--topics {
    padding-top: 0;
  }

  .topTopics__list {
    grid-template-columns: repeat(auto-fill, minmax(28rem, 1fr));
    gap: 2.4rem;
  }

  /*-------------------------------------
 防災情報 / 災害情報
-------------------------------------*/
  .section--disaster {
    background: url(/files/000000017.webp) repeat-y center -8dvw / 100% auto
      var(--color-main);
  }

  .sectionInner--disaster {
    padding-top: 4rem;
  }

  /* 災害情報 */
  .topDisaster {
    padding: 1.6rem;
  }

  .topDisaster__item {
    display: block;
  }

  .topDisaster__itemTag {
    width: fit-content;
    margin-bottom: 0.4rem;
  }

  /*-------------------------------------
 防災庁について知る
-------------------------------------*/
  .section--about {
    background: url(/files/000000058.webp) repeat-y center -7dvw / 100% auto
      var(--color-sub);
  }

  .topAbout__list {
    grid-template-columns: repeat(auto-fill, minmax(28rem, 1fr));
    gap: 1.6rem;
  }

  .topAbout__cardTitle {
    padding: 1.6rem var(--inner-padding);
    font-size: 1.8rem;
  }

  /*-------------------------------------
 関連リンク
-------------------------------------*/
  .topRelated__list {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    width: fit-content;
    margin-inline: auto;
  }

  .topRelated__item {
    text-align: center;
  }

  .topRelated__item img {
    max-width: 43vw;
  }

  /*-------------------------------------
 ご意見・ご感想
-------------------------------------*/
  .sectionInner--voice {
    padding-top: 0;
  }

  @media (max-width: 24em) {
    .topSafety__list,
    .topCategory__list,
    .topTopics__list,
    .topAbout__list,
    .topRelated__list {
      display: flex;
      flex-direction: column;
    }

    .topInfo__btn a {
      width: 21.5rem;
      max-width: 100%;
      min-width: 0;
    }

    .topVoice__btn a {
      width: 24.2rem;
      max-width: 100%;
      min-width: 0;
    }

    .topAbout__cardList a {
      overflow-wrap: anywhere;
    }
  }

  /* =========== pc =========== */
  @media screen and (width > 48em) {
  }

  /* =========== hover =========== */
  @media (hover: hover) and (pointer: fine) {
    .topMainvisual__nav .splide__arrow {
      transition:
        border-color 0.2s,
        background-color 0.2s;
    }

    .topMainvisual__nav .splide__arrow:hover {
      border-color: var(--color-link);
      background-color: var(--color-link);
    }

    .topMainvisual__nav .splide__arrow svg path {
      transition: fill 0.2s;
    }

    .topMainvisual__nav .splide__arrow:hover svg path {
      fill: #fff;
    }

    .topMainvisual__nav .splide__toggle {
      transition:
        color 0.2s,
        border-color 0.2s,
        background-color 0.2s;
    }

    .topMainvisual__nav .splide__toggle:hover {
      color: #fff;
      border-color: var(--color-link);
      background-color: var(--color-link);
    }

    .topInfo__tabItem {
      transition:
        color 0.2s,
        background-color 0.2s;
    }

    .topInfo__tabItem:hover {
      color: #fff;
      background-color: var(--color-main);
    }

    .topInfo__btn a:hover {
      color: var(--color-main);
      background-color: #fff;
    }

    .topInfo__btn a:hover::after {
      background-image: var(--arrow-blue);
    }

    .topSafety__itemWrap:hover {
      border-color: var(--color-link);
      background-color: var(--color-sub);
    }

    .topCategory__itemWrap:hover {
      background-color: #fff;
    }

    .topCategory__itemWrap:hover::before {
      border-width: 5px;
    }

    .topVoice__btn a:hover {
      background-color: var(--color-sub);
    }

    .sectionHead__link a:hover,
    .topMainvisual__itemWrap:hover {
      text-decoration: underline;
    }

    .topNotice__list a:hover,
    .topLink__item a:hover,
    .topInfo__itemWrap:hover .topInfo__itemTitle,
    .topDisaster__itemTitle a:hover,
    .topAbout__cardList li a:hover {
      text-decoration: none;
    }
  }
}