@charset "UTF-8";

/* 全ページ共通: reset / font / colors / interaction */
:root {
  --header-height: 104px;
  --color-blue: #00a5dd;
  --color-green: #22b873;
  --color-dark-green: #008f57;
  --color-text: #111;
  --font-sans: "Noto Sans JP", sans-serif;
}

html { box-sizing: border-box; scroll-behavior: smooth; scroll-padding-top: var(--header-height); font-family: var(--font-sans); font-size: 16px; -webkit-text-size-adjust: 100%; }
*, *::before, *::after { box-sizing: inherit; }
body, h1, h2, h3, p, ul, ol, figure { margin: 0; }
body { min-width: 320px; overflow-x: hidden; background: #fff; color: var(--color-text); font-family: var(--font-sans); font-weight: 400; line-height: 1.7; overflow-wrap: anywhere; }
strong, b { font-weight: 700; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; border: 0; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a[href^="tel:"] { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }
a:focus-visible, button:focus-visible { outline: 3px solid #0b63ce; outline-offset: 3px; border-radius: 5px; }

/* 共通ボタン */
.contact-button { display: inline-flex; align-items: center; justify-content: center; gap: 18px; overflow: hidden; border-radius: 999px; background: linear-gradient(100deg, var(--color-blue), var(--color-green)); color: #fff; font-weight: 700; letter-spacing: .04em; text-decoration: none; transition: transform .25s ease, box-shadow .25s ease; }
.contact-button::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, var(--color-green), var(--color-blue)); opacity: 0; transition: opacity .3s ease; }
.contact-button span { position: relative; }
.contact-button__arrow { width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 7px solid #fff; }
.contact-button:hover, .contact-button:focus-visible { transform: translateY(-2px); box-shadow: 0 7px 18px rgba(0, 155, 150, .3); }
.contact-button:hover::before, .contact-button:focus-visible::before { opacity: 1; }

.more-button { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 28px; overflow: hidden; border-radius: 999px; background: linear-gradient(100deg, var(--color-blue), var(--color-green)); color: #fff; font-size: 16px; font-weight: 700; letter-spacing: .2em; text-decoration: none; transition: transform .25s ease, box-shadow .25s ease; }
.more-button::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, var(--color-green), var(--color-blue)); opacity: 0; transition: opacity .3s ease; }
.more-button span, .more-button i { position: relative; }
.more-button i { width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 7px solid #fff; }
.more-button:hover, .more-button:focus-visible { transform: translateY(-2px); box-shadow: 0 7px 18px rgba(0, 155, 150, .25); }
.more-button:hover::before, .more-button:focus-visible::before { opacity: 1; }

.utility-button { position: relative; display: flex; align-items: center; overflow: hidden; border-radius: 6px; background: linear-gradient(100deg, var(--color-blue), var(--color-green)); color: #fff; font-weight: 700; text-decoration: none; transition: transform .25s ease, box-shadow .25s ease; }
.utility-button::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, var(--color-green), var(--color-blue)); opacity: 0; transition: opacity .3s ease; }
.utility-button img, .utility-button span { position: relative; z-index: 1; }
.utility-button:hover, .utility-button:focus-visible { transform: translateY(-3px); box-shadow: 0 9px 22px rgba(0, 155, 150, .28); }
.utility-button:hover::before, .utility-button:focus-visible::before { opacity: 1; }
.utility-button:hover img, .utility-button:focus-visible img { transform: scale(1.08); }
.utility-button img { object-fit: contain; transition: transform .25s ease; }

.site-footer a { color: inherit; text-decoration: none; }
.site-footer a:hover, .site-footer a:focus-visible { color: var(--color-dark-green); }

/* WordPress管理バー表示時の固定ヘッダー位置 */
body.admin-bar .top-header { top: 32px; }

@media (min-width: 783px) {
  body.admin-bar .mega-menu { top: calc(var(--header-height) + 32px); }
}

@media (min-width: 769px) and (max-width: 782px) {
  body.admin-bar .top-header { top: 46px; }
  body.admin-bar .mega-menu { top: calc(var(--header-height) + 46px); }
}

@media (max-width: 768px) {
  body.admin-bar .top-header { top: 46px; }
  body.admin-bar .global-nav { top: calc(var(--header-height) + 46px); }
}
.access-link { display: inline-flex; align-items: center; justify-content: center; background: #f7931e; color: #fff !important; font-weight: 700; transition: background .2s ease, transform .2s ease; }
.access-link:hover, .access-link:focus-visible { background: #df7100; transform: translateY(-1px); }

/* 共通ナビゲーション動作 */
.global-nav__link, .global-nav__trigger { position: relative; display: flex; align-items: center; border: 0; background: transparent; color: var(--color-text); font-weight: 700; line-height: 1.2; text-decoration: none; cursor: pointer; }
.global-nav__link::after, .global-nav__trigger::after { content: ""; position: absolute; bottom: 0; height: 3px; background: linear-gradient(90deg, var(--color-blue), var(--color-green)); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
.global-nav__link:hover, .global-nav__link:focus-visible, .global-nav__trigger:hover, .global-nav__trigger:focus-visible { color: var(--color-dark-green); }
.global-nav__link:hover::after, .global-nav__link:focus-visible::after, .global-nav__trigger:hover::after, .global-nav__trigger:focus-visible::after, .global-nav__item.is-current > :is(a, button)::after, .global-nav__item.is-open > .global-nav__trigger::after { transform: scaleX(1); }
.global-nav__trigger i { width: 0; height: 0; border-right: 6px solid transparent; border-left: 6px solid transparent; border-top: 10px solid var(--color-green); transition: transform .25s ease; }
.global-nav__item.is-open .global-nav__trigger i { transform: rotate(180deg); }
.mega-menu a { color: var(--color-text); font-weight: 600; text-decoration: none; transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease; }
.mega-menu a::before { content: ""; flex: 0 0 auto; width: 7px; height: 7px; margin-right: 11px; border-top: 2px solid var(--color-green); border-right: 2px solid var(--color-green); transform: rotate(45deg); }
.mega-menu a:hover, .mega-menu a:focus-visible { color: var(--color-dark-green); background: #effaf5; border-color: var(--color-green); transform: translateX(3px); }

/* ページトップ */
.page-top-button { position: fixed; z-index: 900; right: var(--page-top-right, 20px); bottom: var(--page-top-bottom, 20px); display: block; width: var(--page-top-size, 50px); height: var(--page-top-size, 50px); padding: 0; overflow: hidden; visibility: hidden; opacity: 0; transform: translateY(10px); border: 2px solid rgba(255, 255, 255, .92); border-radius: 50%; background: #fff; box-shadow: 0 4px 14px rgba(0, 80, 80, .22); cursor: pointer; transition: opacity .25s ease, transform .25s ease, visibility .25s, box-shadow .25s ease; }
.page-top-button.is-visible { visibility: visible; opacity: .88; transform: translateY(0); }
.page-top-button:hover, .page-top-button:focus-visible { opacity: 1; transform: translateY(-2px); box-shadow: 0 6px 15px rgba(0, 130, 130, .24); }
.page-top-button img { width: 100%; height: 100%; object-fit: cover; }

/* 共通スライド動作 */
.hero__slides, .hero__slide { position: absolute; inset: 0; }
.hero__slide { opacity: 0; transform: scale(1.035); transition: opacity 1.1s ease, transform 7s linear; }
.hero__slide.is-active { z-index: 1; opacity: 1; transform: scale(1); }
.hero:not(.is-visual-ready) .hero__slide.is-active { opacity: 0; transform: scale(1.025); transition: none; }
.hero.is-single .hero__slide { transition: none; transform: none; }
.hero.is-single.is-visual-ready .hero__slide { transition: opacity 1.25s ease, transform 2.2s ease-out; }
.hero__slide img { width: 100%; height: 100%; object-fit: cover; }

/* 共通表示アニメーション */
.reveal-preload :is(.lower-hero h1, .breadcrumb, .about-subnav, .procedure-subnav, .home-news__inner, .social-links, .about-photos, .about-card, .water-management > h2, .water-management__visual, .home-utility-links, .pickup-card, .about-area, .about-work, .about-water-info__item, .about-renewal, .overview-greeting, .overview-summary, .overview-officers, .overview-organization, .overview-numbers, .disaster-introduction, .disaster-charts, .disaster-damage, .chronology-timeline, .chronology-gallery, .community-entry, .levy-introduction, .finance-publications, .forms-content, .contact-content__inner) { opacity: 0; transform: translateY(24px); }
.reveal-enabled .reveal-on-load,
.reveal-enabled .reveal-on-scroll { opacity: 0; transform: translateY(24px); }
.reveal-enabled .reveal-on-load { transition: opacity .8s ease var(--reveal-delay, 0s), transform .8s cubic-bezier(.22, 1, .36, 1) var(--reveal-delay, 0s); }
.reveal-enabled .reveal-on-scroll { transition: opacity .85s ease var(--reveal-delay, 0s), transform .85s cubic-bezier(.22, 1, .36, 1) var(--reveal-delay, 0s); }
.reveal-enabled :is(.reveal-on-load, .reveal-on-scroll).is-revealed { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal-preload :is(.lower-hero h1, .breadcrumb, .about-subnav, .procedure-subnav, .home-news__inner, .social-links, .about-photos, .about-card, .water-management > h2, .water-management__visual, .home-utility-links, .pickup-card, .about-area, .about-work, .about-water-info__item, .about-renewal, .overview-greeting, .overview-summary, .overview-officers, .overview-organization, .overview-numbers, .disaster-introduction, .disaster-charts, .disaster-damage, .chronology-timeline, .chronology-gallery, .community-entry, .levy-introduction, .finance-publications, .forms-content, .contact-content__inner) { opacity: 1; transform: none; }
  .reveal-enabled .reveal-on-load, .reveal-enabled .reveal-on-scroll { opacity: 1; transform: none; }
}

/* サイトマップ */
.sitemap-content { width: min(calc(100% - 48px), 1100px); margin: 50px auto 80px; }
.sitemap-home { display: flex; align-items: center; min-height: 54px; margin-bottom: 30px; padding: 12px 22px; border-radius: 8px; background: linear-gradient(100deg, var(--color-blue), var(--color-green)); color: #fff; font-size: 19px; font-weight: 700; text-decoration: none; }
.sitemap-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 48px; }
.sitemap-group { min-width: 0; }
.sitemap-group h2 { margin: 0; padding: 12px 16px; border-left: 4px solid var(--color-green); background: #f0f8f3; color: #126344; font-size: 20px; font-weight: 600; }
.sitemap-group ul { margin: 0; padding: 0; list-style: none; }
.sitemap-group li { border-bottom: 1px solid #dcebe2; }
.sitemap-group a { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; padding: 12px 16px; color: var(--color-text); font-size: 16px; text-decoration: none; }
.sitemap-group a::after { flex: 0 0 7px; width: 7px; height: 7px; margin-right: 4px; border-top: 2px solid var(--color-green); border-right: 2px solid var(--color-green); content: ""; transform: rotate(45deg); }
.sitemap-group a:hover, .sitemap-group a:focus-visible { background: #f0f8f3; color: #087c50; text-decoration: underline; text-underline-offset: 4px; }
.sitemap-home:hover, .sitemap-home:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
.sitemap-content a:focus-visible { outline: 2px solid #007fac; outline-offset: 3px; }
@media (max-width: 768px) {
  .sitemap-content { width: calc(100% - 30px); margin: 30px auto 50px; }
  .sitemap-home { margin-bottom: 24px; font-size: 18px; }
  .sitemap-grid { grid-template-columns: 1fr; gap: 26px; }
  .sitemap-group h2 { font-size: 18px; }
  .sitemap-group a { font-size: 15px; }
}

/* 住所とアクセスボタンの縦位置を揃える。 */
.site-footer__address-row { display: inline-flex; align-items: center; vertical-align: top; }