/*
 * 汎用テンプレート用のスタイル。
 *
 * site.css（デザインモックの styles.css）はTOPページだけを対象にしている。
 * 記事・アーカイブ・検索・404 のスタイルはモックに存在しないため、
 * site.css のデザイントークン（--blue / --ink / --yellow / --wrap など）と
 * ブレークポイント760pxに合わせてここに書く。
 *
 * site.css には手を入れないこと。あちらはPDFとの突き合わせを
 * 積み上げたカスケードで、順序そのものが仕様になっている。
 */

/* ------------------------------------------------------------------
 * 支援技術向け
 * ---------------------------------------------------------------- */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link:focus {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 100;
  width: auto;
  height: auto;
  margin: 0;
  padding: 10px 18px;
  clip: auto;
  clip-path: none;
  background: var(--yellow);
  color: var(--ink);
  font-weight: 700;
}

/* キーボード操作のフォーカスを必ず見えるようにする */
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 2px;
}

/* ------------------------------------------------------------------
 * パンくず
 * ---------------------------------------------------------------- */
.breadcrumb {
  padding: 14px 0 0;
  font-size: 0.75rem;
  line-height: 1.6;
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0 6px;
  width: min(100% - 40px, 900px);
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

/* 記事・アーカイブ系は、本文＋サイドバーの左端へ合わせる。 */
body.single .breadcrumb ol,
body.archive .breadcrumb ol,
body.blog .breadcrumb ol,
body.search .breadcrumb ol {
  width: min(100% - 40px, 1240px);
}

.breadcrumb li + li::before {
  content: "＞";
  margin-right: 6px;
  color: #888;
}

.breadcrumb a {
  color: var(--blue);
}

.breadcrumb a:hover,
.breadcrumb a:focus-visible {
  text-decoration: underline;
}

.breadcrumb [aria-current="page"] {
  color: #666;
}

/* ------------------------------------------------------------------
 * 記事・アーカイブ共通レイアウト／ウィジェットサイドバー
 * ---------------------------------------------------------------- */
.content-layout {
  max-width: 900px;
}

.content-layout.has-sidebar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 330px);
  align-items: start;
  gap: clamp(28px, 3.35vw, 48px);
  width: min(100% - 40px, 1240px);
  max-width: none;
}

.content-main {
  min-width: 0;
}

.content-sidebar {
  width: 100%;
  max-width: 330px;
  min-width: 0;
}

.sidebar-widget + .sidebar-widget {
  margin-top: 34px;
}

.sidebar-widget,
.sidebar-widget * {
  max-width: 100%;
}

.sidebar-widget {
  overflow-wrap: anywhere;
}

/* 見出しは下線を引かず、淡い背景で区切る。 */
.sidebar-widget__title,
.content-sidebar .wp-block-heading {
  margin: 0 0 18px;
  padding: 9px 14px;
  border-radius: 6px;
  background: var(--pale);
  color: var(--ink);
  font-size: clamp(1.05rem, 0.98rem + 0.25vw, 1.2rem);
  line-height: 1.5;
}

.content-sidebar img {
  width: auto;
  max-width: 100%;
  height: auto;
}

.content-sidebar iframe,
.content-sidebar video {
  width: 100%;
  max-width: 100%;
}

/*
 * 画像の figure の余白だけを消す。
 * 以前は .widget_media_image（ウィジェットの section 自体）にも margin:0 を当てており、
 * 上の .sidebar-widget + .sidebar-widget の間隔を打ち消して、
 * 画像バナーのウィジェットが隙間なく貼り付いていた（2026-11-12 修正）。
 */
.content-sidebar figure.wp-block-image,
.content-sidebar .widget_media_image figure {
  margin: 0;
}

/* 画像バナーのウィジェットが続くときは、ほかのウィジェットより間隔を詰める */
.content-sidebar .widget_media_image + .widget_media_image {
  margin-top: 16px;
}

.content-sidebar .widget_media_image img,
.content-sidebar .wp-block-image img {
  display: block;
  width: 100%;
}

/* WordPress Popular Postsの標準出力。 */
.content-sidebar .wpp-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.content-sidebar .wpp-list li {
  display: flow-root;
  margin: 0;
  padding: 14px 0;
  border-bottom: 1px solid #cddde6;
  font-size: 0.875rem;
  line-height: 1.65;
}

.content-sidebar .wpp-list li:first-child {
  padding-top: 0;
}

.content-sidebar .wpp-thumbnail {
  float: left;
  width: 100px;
  height: 75px;
  margin: 0 12px 6px 0;
  object-fit: cover;
}

.content-sidebar .wpp-post-title:hover,
.content-sidebar .wpp-post-title:focus-visible {
  color: var(--blue);
  text-decoration: underline;
}

/* Instagram埋め込みのインライン最小幅をサイドバー幅へ収める。 */
.content-sidebar .instagram-media {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin-inline: 0 !important;
}

@media (min-width: 1025px) and (max-width: 1240px) {
  .content-layout.has-sidebar .entry-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1024px) {
  .content-layout.has-sidebar {
    grid-template-columns: minmax(0, 1fr);
  }

  .content-layout.has-sidebar .content-sidebar {
    margin: 52px auto 0;
    padding-top: 34px;
    border-top: 1px solid #b8d4e4;
  }
}

/* ------------------------------------------------------------------
 * 一覧
 * ---------------------------------------------------------------- */
.archive-wrap {
  padding: 34px 0 78px;
}

.archive-header {
  margin-bottom: 34px;
}

.archive-title {
  margin: 0 0 12px;
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
  line-height: 1.5;
}

.archive-count {
  margin: 0 0 18px;
  color: #666;
  font-size: 0.8125rem;
}

.archive-description {
  padding: 18px 22px;
  background: var(--pale2);
  border-radius: 6px;
}

.archive-description p:first-child { margin-top: 0; }
.archive-description p:last-child { margin-bottom: 0; }

.entry-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px 26px;
}

.entry-card__link {
  display: block;
  height: 100%;
}

.entry-card__thumb {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--pale);
}

.entry-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.entry-card__link:hover .entry-card__thumb img,
.entry-card__link:focus-visible .entry-card__thumb img {
  transform: scale(1.04);
}

.entry-card__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0 6px;
  font-size: 0.75rem;
  line-height: 1.4;
}

.entry-card__meta b {
  color: var(--blue);
  font-weight: 700;
}

.entry-card__meta time {
  color: #888;
}

.entry-card__title {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
}

.entry-card__new {
  display: inline-block;
  margin-right: 6px;
  padding: 1px 6px;
  background: var(--orange);
  color: #fff;
  border-radius: 3px;
  font-size: 0.625rem;
  font-style: normal;
  font-weight: 700;
  vertical-align: 2px;
}

.entry-card__link:hover .entry-card__title,
.entry-card__link:focus-visible .entry-card__title {
  color: var(--blue);
}

.no-results {
  padding: 40px 0 60px;
}

/* ------------------------------------------------------------------
 * 記事・固定ページ
 * ---------------------------------------------------------------- */
.entry {
  padding: 34px 0 78px;
}

.entry-header {
  margin-bottom: 26px;
}

.entry-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 0 0 12px;
  font-size: 0.8125rem;
}

.entry-category {
  padding: 3px 12px;
  background: var(--blue);
  color: #fff;
  border-radius: 999px;
  font-size: 0.75rem;
}

.entry-category:hover,
.entry-category:focus-visible {
  background: var(--yellow);
  color: var(--ink);
}

.entry-meta time,
.entry-updated {
  color: #888;
}

.entry-title {
  margin: 0;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
  line-height: 1.5;
}

.entry-thumb {
  margin: 0 0 32px;
}

.entry-thumb img {
  width: 100%;
  height: auto;
}

/*
 * 本文。
 *
 * 7,386記事の本文には旧テーマ時代のクラスが埋まっている。
 * それらを壊さないため、本文用CSSは旧テーマから抽出して足す。
 * ここにあるのは、そのための土台となる最低限の指定。
 */
.entry-content {
  font-size: 1rem;
  line-height: 1.9;
}

.entry-content > * + * {
  margin-top: 1.6em;
}

.entry-content h2 {
  margin-top: 2.4em;
  padding: 10px 0 10px 16px;
  border-left: 5px solid var(--blue);
  font-size: 1.35rem;
  line-height: 1.5;
}

.entry-content h3 {
  margin-top: 2em;
  font-size: 1.15rem;
  line-height: 1.6;
}

.entry-content a {
  color: var(--blue);
  text-decoration: underline;
}

.entry-content img {
  height: auto;
}

.entry-content blockquote {
  margin-left: 0;
  margin-right: 0;
  padding: 16px 22px;
  background: var(--pale2);
  border-left: 4px solid var(--blue);
}

.entry-content table {
  width: 100%;
  border-collapse: collapse;
}

.entry-content th,
.entry-content td {
  padding: 10px 12px;
  border: 1px solid #ddd;
  text-align: left;
}

.entry-content th {
  background: var(--pale2);
}

/* 監修（E-E-A-T） */
.entry-supervisor {
  margin-top: 52px;
  padding: 22px 26px;
  background: var(--pale2);
  border-radius: 6px;
}

.entry-supervisor__label {
  margin: 0 0 6px;
  color: var(--blue);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.entry-supervisor__name {
  margin: 0 0 6px;
  font-size: 1.0625rem;
  font-weight: 700;
}

.entry-supervisor__name a {
  text-decoration: underline;
}

.entry-supervisor__name span {
  margin-left: 10px;
  color: #666;
  font-size: 0.75rem;
  font-weight: 400;
}

.entry-supervisor__desc {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.8;
}

/* 前後の記事 */
.entry-nav {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 52px;
  padding-top: 26px;
  border-top: 1px solid #ddd;
  font-size: 0.875rem;
}

.entry-nav__next {
  margin-left: auto;
  text-align: right;
}

.entry-nav a:hover,
.entry-nav a:focus-visible {
  color: var(--blue);
}

/* ------------------------------------------------------------------
 * ページ送り
 * ---------------------------------------------------------------- */
.pagination {
  margin-top: 52px;
}

.pagination ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pagination .page-numbers {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  background: var(--blue);
  color: #fff;
  font-size: 0.875rem;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.pagination .page-numbers:hover,
.pagination .page-numbers:focus-visible,
.pagination .page-numbers.current {
  background: var(--yellow);
  color: var(--ink);
}

.pagination .page-numbers.dots {
  background: none;
  color: #888;
}

/* ------------------------------------------------------------------
 * 検索フォーム
 * ---------------------------------------------------------------- */
.search-form {
  display: flex;
  gap: 8px;
  max-width: 480px;
}

/*
 * 404・検索結果の検索フォーム。
 * site.css の .keyword-search（TOP用）が width:700px を持っており、
 * 上の max-width:480px だけではSPで画面幅を超えて検索ボタンが切れる。
 * TOPのフォームは .search-form を持たないので、この指定は当たらない。
 */
.search-form.keyword-search {
  width: min(100%, 480px);
  max-width: 100%;
  align-items: stretch;
}

/*
 * ボタンは .pill も持っており、その min-width（130〜170px）と margin-top:24px が
 * 効くと、SPで入力欄が数十pxまで潰れ、ボタンが下へずれる。
 * TOPの検索ボタンと同じ、虫めがねだけの小さなボタンにそろえる。
 */
.search-form.keyword-search .search-submit {
  flex: 0 0 58px;
  width: 58px;
  min-width: 0;
  height: auto;
  min-height: 37px;
  margin: 0;
  padding: 0;
  border-radius: 0;
}

.search-field {
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.search-submit {
  flex: 0 0 auto;
  padding: 10px 22px;
  border: 0;
  background: var(--blue);
  color: #fff;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.search-submit:hover,
.search-submit:focus-visible {
  background: var(--yellow);
  color: var(--ink);
}

/* ------------------------------------------------------------------
 * 404
 * ---------------------------------------------------------------- */
.error-404 {
  padding: 34px 0 78px;
}

.error-404__categories {
  margin-top: 46px;
}

.error-404__categories h2 {
  font-size: 1.125rem;
}

.error-404__categories ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.error-404__categories .pill {
  display: inline-block;
  padding: 8px 20px;
  background: var(--blue);
  color: #fff;
  border-radius: 999px;
  font-size: 0.875rem;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.error-404__categories .pill:hover,
.error-404__categories .pill:focus-visible {
  background: var(--yellow);
  color: var(--ink);
}

/* ------------------------------------------------------------------
 * フッターの地図（埋め込みが入ったとき）
 * ---------------------------------------------------------------- */
.map-embed {
  aspect-ratio: 16 / 9;
}

.map-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* ------------------------------------------------------------------
 * ブランド見出し
 *
 * モックでは <a class="brand"> が直接置かれていたが、
 * SEO要件（TOPのみ h1、下層は p）のため要素で包んでいる。
 * 包み要素の見た目は素通しにする。
 * ---------------------------------------------------------------- */
.brand-heading {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

/* ------------------------------------------------------------------
 * SP
 * ---------------------------------------------------------------- */
@media (max-width: 760px) {
  .breadcrumb ol,
  body.single .breadcrumb ol,
  body.archive .breadcrumb ol,
  body.blog .breadcrumb ol,
  body.search .breadcrumb ol,
  .content-layout.has-sidebar {
    width: min(100% - 30px, 1240px);
  }

  .entry-list {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .entry-card__link {
    display: grid;
    grid-template-columns: 116px 1fr;
    gap: 14px;
    align-items: start;
  }

  .entry-card__meta {
    margin-top: 0;
  }

  .archive-wrap,
  .entry,
  .error-404 {
    padding: 20px 0 52px;
  }

  .entry-nav {
    flex-direction: column;
  }

  .entry-nav__next {
    text-align: left;
  }

  .content-layout.has-sidebar .content-sidebar {
    margin-top: 42px;
    padding-top: 28px;
  }
}

/* ==================================================================
 * TOPページの調整
 *
 * site.css には手を入れず、ここで上書きする。
 * あちらはPDFとの突き合わせを積み上げたカスケードで、
 * 順序そのものが仕様になっているため（style.css 冒頭を参照）。
 * ================================================================== */

/* ------------------------------------------------------------------
 * 最新トピックスの横幅
 *
 * 本文の可読性を上げると新着イベントが縦に伸びるため、
 * このセクションだけ幅を広げる（2026-09-25 の指示）。
 *
 * .content-wrap は max-width:900px。ここだけ 1080px にし、
 * イベント側の取り分（.92fr → 1.05fr）も少し増やす。
 * 他のセクションの幅は変えない。
 * ---------------------------------------------------------------- */
@media (min-width: 761px) {

  .topics > .content-wrap {
    max-width: 1080px;
  }

  .topics .topic-columns {
    grid-template-columns: 1.3fr 1.05fr;
    gap: 40px;
  }

  /* 幅が増えた分、イベントの1件あたりの行数が減る */
  .event-box article {
    padding-block: 20px;
  }
}

/* ------------------------------------------------------------------
 * アイキャッチが無い記事の代替画像
 *
 * 写真ではないので、わずかに沈ませて記事写真と見分けられるようにする。
 * ---------------------------------------------------------------- */
.news-item img.is-noimage,
.entry-card__thumb img.is-noimage {
  object-fit: cover;
  opacity: 0.85;
}

/* ------------------------------------------------------------------
 * 一覧のリンク
 *
 * DOM の入れ子を変えられないため（.news-item は grid で
 * img と div が直接の子である必要がある）、リンクは見出しの中に置く。
 * 触れる範囲が狭くならないよう、見出しのリンクをブロックにする。
 * ---------------------------------------------------------------- */
.news-item h4 a,
.event-box article p a,
.announcements li a {
  display: inline;
  transition: color 0.2s ease;
}

.news-item h4 a:hover,
.news-item h4 a:focus-visible,
.event-box article p a:hover,
.event-box article p a:focus-visible,
.announcements li a:hover,
.announcements li a:focus-visible {
  color: var(--blue);
  text-decoration: underline;
}

/* ==================================================================
 * 支給デザインパーツの適用（2026-09-25）
 *
 * site.css はCSSの図形やモックの仮画像で描いている箇所がある。
 * 支給パーツが届いたので、ここで上書きする。
 * site.css 自体は触らない（順序が仕様になっているため）。
 * ================================================================== */

/* 01 エリア：CSSの多角形 → 浦安市の形 -------------------------------- */
.paper-bird {
  background: url("../images/parts/urayasu-shape.png") center/contain no-repeat !important;
  clip-path: none !important;
}

/* 浦安の風景セクションのカモメ ---------------------------------------
 * 支給画像は 400x446 の縦長。モックの seagulls.svg（92x55の横長）とは
 * 縦横比が違うため、枠のほうを画像に合わせる。
 * ------------------------------------------------------------------ */
.intro-copy:after {
  width: 64px;
  height: 71px;
  background-image: url("../images/parts/illust-kamome.png");
}

/* お知らせのメガホン（56x31・支給は300x168でほぼ同じ比率）------------- */
.announcements .megaphone {
  background-image: url("../images/parts/illust-megaphone.png");
}

/* キーワード検索のボタン --------------------------------------------
 * site.css は円と棒をCSSで描いている。支給アイコンに差し替える。
 * ------------------------------------------------------------------ */
.keyword-search button {
  background: var(--blue) url("../images/parts/icon-search.png") center/24px 24px no-repeat;
}

.keyword-search button:before,
.keyword-search button:after {
  content: none;
}

/* 「ぎゅっと」の左右の装飾 ------------------------------------------
 * site.css は三角形をCSSで描いている。支給の吹き出しパーツに差し替える。
 * 支給は 100x208（縦長）。元の 18px 幅 / 高さ68% とほぼ同じ比率。
 * ------------------------------------------------------------------ */
.city-hero h2 span:before,
.city-hero h2 span:after {
  clip-path: none;
  background: center/contain no-repeat;
}

.city-hero h2 span:before {
  background-image: url("../images/parts/deco-soeech-left.png");
}

.city-hero h2 span:after {
  background-image: url("../images/parts/deco-soeech-right.png");
}

/* 04・07 の丸写真 → 1枚絵 --------------------------------------------
 * 支給パーツは複数の要素が1枚に描かれているため、丸く切り抜かない。
 * 幅は、元の「丸2枚＋隙間」とほぼ同じ見た目の量になるようにしている。
 * ------------------------------------------------------------------ */
/*
 * ★site.css は .decor-note と同じ手口を .round-decor / .circle-pics にも
 *   使っている。中身を display:none で隠し、合成PNGを背景に敷く。
 *
 *     .round-decor{width:261px;height:190px;background:url(decor-community-note.png)}
 *     .round-decor>*{display:none!important}
 *     .circle-pics{width:285px;height:220px;background:url(decor-housing-note.png)}
 *     .circle-pics>*{display:none!important}
 *
 *   これを打ち消さないと、差し替えた画像は一切表示されず、
 *   古い合成PNGが出続ける（2026-09-25 に実際に起きた。
 *   表示寸法が 261x190 / 285x220 と合成PNGの原寸に一致していたのが手がかり）。
 *
 *   .decor-note には同じ打ち消しを入れていたが、この2つを見落としていた。
 */
.round-decor.is-single,
.circle-pics.is-single {
  width: auto;
  height: auto;
  background: none;
}

.round-decor.is-single > *,
.circle-pics.is-single > * {
  display: block !important;
}

.round-decor.is-single span,
.circle-pics.is-single span {
  width: auto;
  height: auto;
  border-radius: 0;
  overflow: visible;
}

.round-decor.is-single img,
.circle-pics.is-single img {
  width: auto;
  height: auto;
  border-radius: 0;
  object-fit: contain;
}

/*
 * 大きさの上限は、本文との衝突で決まる。実測して出した値。
 *
 * 前提（site.css で最終的に効いている値）
 *   .feature-inner{grid-template-columns:3fr 2fr;gap:80px}
 *     → content-wrap 900px のうち 本文492px / 写真328px
 *   .round-decor{right:-15px;top:-48px}   合成PNGは 261x190
 *   .circle-pics{left:-365px;top:-105px}  合成PNGは 285x220
 *
 * 04（本文カラムの中・右寄せ）
 *   幅300px → 左端 x=207 / 下端 y=149
 *     小見出し「浦安の地域・生活情報」 x=0〜150
 *     h3 1行目「暮らしのそばに、」     x=0〜192（y=95〜）
 *   → 300px が、h3 に触れずに済む上限。
 *     340px にすると左端が x=167 まで来て h3 に重なる。
 *
 * 07（写真カラム基準だが、左へ大きく出て本文カラムにかかる）
 *   幅330px → x=207〜537 / 下端 y=112
 *   → 合成PNGの下端 y=115 とほぼ同じ。h3 はその下から始まる。
 *     510px だと下端が y=230 まで伸び、h3 を覆う（実際に起きた）。
 *
 * これ以上大きくしたい場合は、画像内のキャプションを外に出すしかない。
 * 02〜06 の吹き出しと同じで、文字をHTMLにすれば大きさは自由になる。
 */
.round-decor.is-single img {
  width: 300px;
}

.circle-pics.is-single img {
  width: 330px;
}

@media (max-width: 760px) {
  .circle-pics.is-single img {
    width: 250px;
  }

  /*
   * 06 の丸2個画像の上に余白。
   * site.css の最後の .circle-pics{margin:0 auto} で margin-top が
   * 打ち消されて0になっていた。
   */
  .circle-pics.is-single {
    margin-top: 10px;
  }
}

/* ヘッダーのSNSアイコン ---------------------------------------------
 * site.css は文字（◎ 𝕏 f）を前提にフォント指定と、最後の1つに
 * 黒丸の装飾を入れている。画像に差し替えたので打ち消す。
 * ------------------------------------------------------------------ */
.socials a img {
  width: 30px;
  height: 30px;
}

.socials a:has(img),
.socials a:last-child:has(img) {
  width: auto;
  height: auto;
  background: none;
  border-radius: 0;
  font-size: 0;
}

/* ヘッダーのロゴ画像 ------------------------------------------------- */
.brand img {
  width: 300px;
  max-width: 100%;
  height: auto;
}

@media (max-width: 760px) {
  .brand img {
    width: 190px;
  }
}

/* フッター OUR COMPANY のロゴ ----------------------------------------
 * 3社で縦横比が違う（500x71 / 500x54 / 300x99）。
 * 高さを揃えると幅がばらつくため、高さの上限で揃える。
 * ------------------------------------------------------------------ */
.company-grid h3 img {
  display: block;
  max-width: 100%;
  max-height: 26px;
  width: auto;
  height: auto;
  margin-top: 6px;
}

/* ==================================================================
 * 2026-09-25 の調整
 * ================================================================== */

/* ------------------------------------------------------------------
 * ヘッダーの波：形を固定して横に繰り返す
 *
 * site.css は viewBox 1440 のSVGを background-size:100% 100% で敷いており、
 * 画面が広いほど横に引き伸ばされて波が平たくなっていた。
 *
 * ここでは 1440px の等倍で敷き、足りない分は繰り返す。
 * どの画面幅でも波の形と高さが変わらない。
 *
 * ★モックの波形そのものは繰り返せない。
 *   左端(y=7)と右端(y=22)の高さが違うため、継ぎ目に段差が出る。
 *   そこで「左右の端で高さと傾きが一致する」波形に作り直した。
 *   Q と T で描いており、T は直前の制御点を反射するので、
 *   隣り合うタイルの接線が必ず一致する（＝段差も折れも出ない）。
 *   振幅はモックより少し大きくして、メリハリを出している。
 * ---------------------------------------------------------------- */
.header-main:after {
  height: 58px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 70' preserveAspectRatio='none'%3E%3Cpath fill='%236cb0e2' d='M0 34 Q120 -10 240 34 T480 34 T720 34 T960 34 T1200 34 T1440 34 V70 H0Z'/%3E%3C/svg%3E");
  background-size: 1440px 100%;
  background-repeat: repeat-x;
  background-position: center bottom;
}

@media (max-width: 760px) {
  .header-main:after {
    height: 29px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 390 34' preserveAspectRatio='none'%3E%3Cpath fill='%236cb0e2' d='M0 16 Q48.75 -2 97.5 16 T195 16 T292.5 16 T390 16 V34 H0Z'/%3E%3C/svg%3E");
    background-size: 390px 100%;
  }
}

/* ------------------------------------------------------------------
 * カモメの位置
 *
 * 支給画像が縦長（400x446）なので枠が高くなり、下へはみ出していた。
 * 上へ寄せる。
 * ---------------------------------------------------------------- */
.intro-copy:after {
  top: -46px;
  right: 150px;
}

@media (max-width: 760px) {
  .intro-copy:after {
    top: -40px;
    right: 18px;
    width: 52px;
    height: 58px;
  }
}

/* ------------------------------------------------------------------
 * 「まずは知ってほしい」＝ .city-hero の可読性
 *
 * 背景が写真（bay.webp）のため、黒文字が読みにくい。
 * モックには無いが、本文の後ろに半透明の白を敷く。
 * 写真は透けたまま残る。
 * ---------------------------------------------------------------- */
.city-hero .content-wrap {
  padding: 30px 34px 34px;
  background: rgba(255, 255, 255, 0.66);
  border-radius: 12px;
}

@media (max-width: 760px) {
  .city-hero .content-wrap {
    padding: 22px 18px 26px;
    border-radius: 8px;
  }
}

/* ------------------------------------------------------------------
 * 自転車
 *
 * 吹き出し文字を外したので、イラスト単体として置き直す。
 * site.css は絵文字（font-size:76px）を前提にしていて
 * 画像のサイズ指定が無いため、ここで決める。
 * ---------------------------------------------------------------- */
.bike-note {
  right: 55px;
  top: auto;
  bottom: 8px;
  transform: none;
}

.bike-note img {
  width: 200px;
  height: auto;
}

@media (max-width: 760px) {
  .bike-note {
    right: 8px;
    bottom: 6px;
  }

  .bike-note img {
    width: 84px;
  }
}

/* ------------------------------------------------------------------
 * 最新トピックスの文字サイズを3つでそろえる
 *
 * 新着記事・新着イベント・お知らせが、それぞれ別の指定で
 * ばらばらの大きさになっていた。
 *
 * とくに site.css の後ろのほうにある
 *   .heading-lead, .intro-copy>p, …, .event-box article p, … { font-size:1rem }
 * が **イベントの <p> を直接** 指しており、
 * .event-box article に指定しても内側の段落には効かなかった。
 * 見た目上、イベントだけ 16px で突出していた原因。
 *
 * 3つとも新着記事のタイトルと同じ指定にそろえる。
 * 個別の px ではなく同じ宣言を共有させ、片方だけずれないようにする。
 * ---------------------------------------------------------------- */
.news-item h4,
.event-box article,
.event-box article p,
.announcements ul,
.announcements li {
  font-size: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
}

.event-box article p,
.announcements li {
  line-height: 1.6;
}

/* 日付は3つとも同じ大きさに */
.news-item p,
.event-box article time,
.announcements time {
  font-size: 0.8125rem;
}

/* ------------------------------------------------------------------
 * NEW バッジを小さく
 * ---------------------------------------------------------------- */
.news-item em {
  padding: 1px 5px;
  margin-right: 5px;
  border-radius: 4px;
  font-size: 0.625rem;
  line-height: 1.6;
  vertical-align: 1px;
}

/* ------------------------------------------------------------------
 * お知らせ：「もっと見る」が本文に重なる
 *
 * site.css で position:absolute / bottom:20px に置かれている。
 * リストの下に余白を作って重なりを解く。
 * ---------------------------------------------------------------- */
.announcements {
  padding-bottom: 46px;
}

.announcements > a {
  bottom: 10px;
}

@media (max-width: 760px) {
  .announcements {
    padding-bottom: 40px;
  }
}

/* ------------------------------------------------------------------
 * 02〜07 の吹き出し
 *
 * site.css は「吹き出し＋イラスト＋文字」を1枚に合成したPNG
 * （decor-*-note.png）を背景に敷き、中の要素を display:none で
 * 隠している。そのPNGは等倍（130x112 を 130x112 で表示）なので、
 * 大きくすると文字がぼやける。
 *
 * そこで合成PNGをやめ、**文字はHTML・イラストは支給パーツ**に戻す。
 * こうすると何倍にしても鮮明で、読み上げにも乗る。
 *
 * 位置は translateY(-100%) で「下端」を基準にする。
 * 中身の高さが変わっても、下端の位置が動かない。
 * ---------------------------------------------------------------- */
.decor-note {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: auto !important;
  height: auto !important;
  background-image: none !important;
  transform: translateY(-100%);
  font-size: 0.75rem;
  line-height: 1.45;
  font-weight: 600;
  letter-spacing: 0;
  text-align: center;
  white-space: nowrap;
}

.decor-note > * {
  display: block !important;
}

/*
 * 吹き出しの文字は出さない（2026-09-25 指示）。
 * イラストだけを見せる。文言はHTMLに残してあるので、
 * 出したくなったらこの display:none を外すだけでよい。
 */
.decor-note span,
.decor-note small {
  display: none !important;
}

.decor-note .decor {
  width: 188px !important;
  height: auto !important;
}

/*
 * 下端の位置。
 *
 * .feature は padding:70px、.feature-inner は align-items:center なので、
 * .feature-copy の上には 100〜120px 程度しか余白がない。
 * イラストを大きくした分、上へはみ出して前のセクションに重なっていたため
 * 下端を下げ、イラストの上端がこの余白に収まるようにした。
 */
.bus-note      { top: 92px !important; }
.fisher-note   { top: 70px !important; }
.family-note   { top: 80px !important; }
.supplies-note { top: 60px !important; }

/* 支給イラストの縦横比に合わせた個別調整 */
.family-note .decor   { width: 196px !important; }
.supplies-note .decor { width: 205px !important; }

@media (max-width: 760px) {
  .decor-note {
    font-size: 0.6875rem;
    gap: 3px;
  }

  .decor-note .decor        { width: 124px !important; }
  .family-note .decor       { width: 130px !important; }
  .supplies-note .decor     { width: 134px !important; }

  .bus-note      { top: 34px !important; }
  .fisher-note   { top: 40px !important; }
  .family-note   { top: 46px !important; }
  .supplies-note { top: 34px !important; }
}

/* ------------------------------------------------------------------
 * 「ぎゅっと」の配色
 *
 * コントラスト比（WCAG）を実測して決めた。
 *
 *   白  × 青(--blue #247bb5)   4.59   モックの配色
 *   黄  × 青                    3.26   ★悪化したので取りやめ
 *   黒  × 青                    3.34   同様に不足
 *   黒(--ink) × 黄(--yellow)   10.91   ← これを採用
 *
 * 青背景のままでは文字色をどう変えても改善しない。組み合わせを変える。
 * 黄背景・黒文字は .pill のホバーと同じ配色なので、
 * このデザインの語彙から外れない。
 *
 * 青のまま濃くして白文字にする案（#1a5f8f で 6.83）もある。
 * 左右の矢印装飾と色を揃えたい場合はそちら。
 * ---------------------------------------------------------------- */
.city-hero h2 span {
  /*
   * 塗りつぶしの平行四辺形をやめ、透過の蛍光ペン風の下線にする
   * （2026-09-25 指示）。
   *
   * この書き方はこのデザインが既に使っているもの。
   *   .topic-box h3 span{background:linear-gradient(transparent 55%,#b6d5e8 55%)}
   * 「最新トピックス」の小見出しと同じ語彙なので、トーンから外れない。
   *
   * 文字は背景の上に直接乗るため、色は見出し本来の色（--ink）に戻す。
   * 半透明の白いパネルの上なので、コントラストは十分に高い。
   */
  /*
   * ペンで引いたように見せるための3点。
   *
   *  1. 傾き    174deg（垂直から6度）。線が右上がりになる。
   *             span 自体は回さない。回すと文字まで傾くため。
   *  2. 濃淡    上端は薄く、中ほどが最も濃く、下端でまた薄れる。
   *             インクが乗る量のむらを模している。
   *  3. 端の色  transparent は「透明な黒」を通って補間され、
   *             縁がくすむ。同じ黄色の alpha 0 を使って避ける。
   */
  background-image: linear-gradient(
    174deg,
    rgba(241, 219, 53, 0) 40%,
    rgba(241, 219, 53, 0.14) 46%,
    rgba(241, 219, 53, 0.97) 63%,
    rgba(241, 219, 53, 0.58) 85%,
    rgba(241, 219, 53, 0.1) 96%,
    rgba(241, 219, 53, 0) 100%
  );
  background-repeat: no-repeat;
  color: inherit;
  clip-path: none;

  /*
   * 左右の間隔を「蛍光ペン ─2px─ 装飾 ─2px─ 前後の文字」に揃える。
   *
   * 装飾は position:absolute なので、そのままでは場所を取らない。
   * 前後の文字（「が」「詰」）に重なってしまうため、
   * 装飾ぶんの幅を margin で確保する。
   *
   *   margin  = 2 + 装飾18 + 2 = 22px
   *   装飾の位置 = -(2 + 18)  = -20px
   *
   * これで内側（ペンとの隙間）と外側（文字との隙間）が
   * どちらも2pxになる。
   */
  padding: 0 6px;
  margin: 0 22px;
}

.city-hero h2 span:before {
  left: -20px;
}

.city-hero h2 span:after {
  right: -20px;
}

/* SPは見出しが27pxと小さいので、装飾も間隔も縮める */
@media (max-width: 760px) {
  .city-hero h2 span {
    padding: 0 5px;
    margin: 0 17px;
  }

  .city-hero h2 span:before,
  .city-hero h2 span:after {
    width: 13px;
  }

  .city-hero h2 span:before {
    left: -15px;
  }

  .city-hero h2 span:after {
    right: -15px;
  }
}

/* ------------------------------------------------------------------
 * 街のデータ
 *
 * 項目名のバッジに余白を足して詰まりを解く。
 * ---------------------------------------------------------------- */
.city-stats {
  padding: 16px 0;
}

.city-stats dt {
  padding: 4px 14px;
}

.city-stats dd {
  margin-top: 8px;
}

/* 数値の基準日。枠の外・右下に小さく置く */
.city-stats-asof {
  max-width: 600px;
  margin: 8px 0 0;
  color: var(--blue);
  font-size: 0.6875rem;
  line-height: 1.4;
  text-align: right;
}

@media (max-width: 760px) {
  .city-stats {
    padding: 10px 0;
  }

  .city-stats dt {
    padding: 2px 8px;
  }

  .city-stats dd {
    margin-top: 5px;
  }

  .city-stats-asof {
    font-size: 0.625rem;
  }
}

/* ==================================================================
 * スマートフォン（〜760px）の調整  2026-09-25
 * ================================================================== */
@media (max-width: 760px) {

  /* ----------------------------------------------------------------
   * 新着記事：1記事ぶん高さを増やす
   * .news-item は画像85px＋上下padding9pxで1件あたり約84px
   * -------------------------------------------------------------- */
  .article-list.scroll-list {
    height: 330px;
  }

  /* 新着イベント：2.5件ぶん見えるようにする */
  .event-box .scroll-list {
    height: 230px;
  }

  /* ----------------------------------------------------------------
   * お知らせ：三点リーダで切らず、折り返す
   * -------------------------------------------------------------- */
  .announcements li {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    margin: 9px 0;
    line-height: 1.6;
  }

  .announcements time {
    display: inline-block;
  }

  /* ----------------------------------------------------------------
   * 「浦安って、こんな街」を波の下へ
   *
   * .city-intro は padding-top:37px、波（:before）は top:-5px から
   * 150px。見出しが padding-top:18px だと波の中に入ってしまう。
   * ★位置は目視での一次調整。要微調整。
   * -------------------------------------------------------------- */
  .city-intro:before {
    top: -5px;
    height: 104px;
  }

  .intro-copy .section-heading {
    padding-top: 26px;
  }

  /* ----------------------------------------------------------------
   * 「ぎゅっと詰まった街です。」の背景写真を見出しに追随させる
   *
   * site.css は写真を .city-hero:before の**固定225px**で敷き、
   * 波を top:168px に置いている。見出しが3行になると文字が
   * 写真からはみ出す（2026-09-25 に発生）。
   *
   * 固定の帯をやめ、リード＋見出しを包む .city-hero-head の
   * 高さに合わせて写真と波を敷く。見出しが伸びれば写真も伸びる。
   * -------------------------------------------------------------- */
  .city-hero:before,
  .city-hero:after {
    display: none;
  }

  .city-hero {
    padding-top: 0;
  }

  /*
   * 写真は .city-hero-head 自身の背景にする。
   * 疑似要素を2つとも使えるようにするため（:before＝白パネル、:after＝波）。
   * .wrap の左右余白15pxを打ち消して画面幅いっぱいに敷く。
   */
  .city-hero-head {
    position: relative;
    margin-inline: -15px;
    padding: 30px 15px 56px;
    background:
      linear-gradient(90deg, rgba(155, 207, 236, 0.22), rgba(209, 235, 248, 0.18)),
      url("../images/bay.webp") center 42% / cover no-repeat;
  }

  /*
   * 白の透過パネル。PCと同じ考え方で、写真の上の文字を読みやすくする。
   * 上下左右に少し余白を持たせて、文字を囲む。
   */
  .city-hero-head:before {
    content: "";
    position: absolute;
    z-index: 0;
    left: 15px;
    right: 15px;
    top: 16px;
    bottom: 44px;
    background: rgba(255, 255, 255, 0.68);
    border-radius: 10px;
  }

  /* 文字をパネルの上に */
  .city-hero-head > * {
    position: relative;
    z-index: 1;
  }

  /*
   * 写真の下端の波。モックに合わせて、細かい起伏をやめ
   * 大きめの一続きの曲線にした。
   */
  .city-hero-head:after {
    content: "";
    position: absolute;
    z-index: 0;
    left: 50%;
    bottom: 0;
    width: 100vw;
    height: 52px;
    transform: translateX(-50%);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 390 80' preserveAspectRatio='none'%3E%3Cpath fill='white' d='M0 34 C80 8 170 0 252 18 C312 31 356 27 390 13 V80 H0Z'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat;
  }

  /* 「まずは知ってほしい！」の波線を少し下げ、テキスト幅に合わせる */
  .mini-lead:after {
    width: 112px;
    margin-top: 8px;
  }

  /* ----------------------------------------------------------------
   * 自転車：吹き出し文字が無くなったので、下へ下げて大きくする
   * -------------------------------------------------------------- */
  .bike-note {
    width: auto;
    margin: 12px 0 0 auto;
  }

  .bike-note img {
    width: 150px;
    margin: 0;
  }

  /* ----------------------------------------------------------------
   * 02〜06 の吹き出しイラストを、青い小見出しと同じ行へ
   *
   * これまでは position:absolute で浮かせていたため、
   * 前のセクションに食い込んでいた。
   *
   * 小見出し（.eyebrow）と .decor-note は DOM で隣り合っている。
   * 両方を inline-block にして同じ行に流し、vertical-align:bottom で
   * **下端をそろえる**。
   *
   *   ・横位置は小見出しの長さで自然に決まる
   *   ・小見出しが長くて収まらなければ、そのまま次の行へ折り返す
   *   ・min-width で画像の最小幅を確保する
   *
   * 浮かせるのをやめたので、前のセクションに重なることもなくなる。
   * -------------------------------------------------------------- */
  .feature-copy .eyebrow {
    display: inline-block;
    vertical-align: bottom;
    margin: 0 12px 0 0;
  }

  .decor-note {
    position: static;
    display: inline-block !important;
    vertical-align: bottom;
    left: auto;
    right: auto;
    top: auto;
    transform: none;
    min-width: 124px;
    margin: 0 0 -4px;
  }

  /* 小見出しと画像の行の下に、見出しとの間隔をつくる */
  .feature-copy .decor-note + h3 {
    margin-top: 14px;
  }

  /* ----------------------------------------------------------------
   * 01 エリアの浦安シェイプ
   * ★位置は目視での一次調整。要微調整。
   * -------------------------------------------------------------- */
  .paper-bird {
    width: 188px;
    height: 178px;
    right: -30px;
    left: auto;
    top: -385px;
  }
}

/* ==================================================================
 * 記事本文（.entry-content）
 *
 * 旧テーマは本文を <div class="post"> で包み、そこへ指定を当てていた。
 * テーマを切り替えると失われるため、実データで崩れたものを移す。
 *
 * ★全部は移さない。2026-09-26 に7パターンの記事を実際に見て、
 *   崩れていたものだけを入れている。
 *   例えば size-horizonal（2,296件）は旧新どちらでも差が無く、対応不要だった。
 * ================================================================== */

/* ------------------------------------------------------------------
 * 埋め込み地図・動画（iframe）
 *
 * 本文の iframe は width="600" height="450" のように**属性で固定**されている。
 * そのため PC では本文幅より狭く、スマホでははみ出していた。
 * 幅いっぱいにし、縦横比を保つ。
 * ---------------------------------------------------------------- */
.entry-content iframe {
  display: block;
  width: 100%;
  max-width: 100%;
  border: 0;
}

/* Googleマップの埋め込みは 600x450（4:3）。比率を保って伸縮させる */
.entry-content iframe[src*="google.com/maps"] {
  aspect-ratio: 4 / 3;
  height: auto;
}

/* YouTube などの動画は 16:9 */
.entry-content iframe[src*="youtube"],
.entry-content iframe[src*="youtu.be"],
.entry-content iframe[src*="vimeo"] {
  aspect-ratio: 16 / 9;
  height: auto;
}

/* ------------------------------------------------------------------
 * MapPress
 *
 * <mappress-map class="mapp-layout" style="width:…px"> という
 * **カスタム要素にインラインstyleで幅が入る**。
 * インラインstyleを上書きするため !important が要る。
 * ---------------------------------------------------------------- */
.entry-content mappress-map,
.entry-content .mapp-layout {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
}

/* ------------------------------------------------------------------
 * 表
 *
 * 「項目名 ： 内容」の2列表が多い。自動幅だと左右が同じ幅になり、
 * 項目名の列が無駄に広く、内容が窮屈になっていた。
 * 1列目を狭くする。3列以上の表では、残りを内容に応じて分け合う。
 * ---------------------------------------------------------------- */
.entry-content table {
  margin-block: 1.6em;
}

.entry-content th:first-child,
.entry-content td:first-child {
  width: 30%;
}

.entry-content td,
.entry-content th {
  vertical-align: top;
}

@media (max-width: 760px) {
  .entry-content th:first-child,
  .entry-content td:first-child {
    width: 34%;
  }

  .entry-content th,
  .entry-content td {
    padding: 8px 9px;
    font-size: 0.875rem;
  }
}

/* ------------------------------------------------------------------
 * 画像の回り込み
 *
 * ブロック（figure.wp-block-image.alignleft）は WordPress 標準CSSが
 * 面倒を見るが、ブロックエディタ以前の <img class="alignleft"> には
 * 効かない。両方に当たるようにする。
 * ---------------------------------------------------------------- */
.entry-content .alignleft {
  float: left;
  margin: 0 1.4em 1em 0;
}

.entry-content .alignright {
  float: right;
  margin: 0 0 1em 1.4em;
}

.entry-content .aligncenter {
  display: block;
  margin-inline: auto;
}

/* 回り込みが次の見出しへ食い込まないようにする */
.entry-content h2,
.entry-content h3,
.entry-content h4 {
  clear: both;
}

/* 本文の最後で回り込みを解除する */
.entry-content::after {
  content: "";
  display: table;
  clear: both;
}

@media (max-width: 760px) {
  /* 画面が狭いと回り込みは読みにくいので解除する */
  .entry-content .alignleft,
  .entry-content .alignright {
    float: none;
    margin-inline: auto;
  }
}

/* ------------------------------------------------------------------
 * 画像とキャプション
 * ---------------------------------------------------------------- */
.entry-content img {
  max-width: 100%;
  height: auto;
}

/* ブロックエディタ以前のキャプション（該当3件） */
.entry-content .wp-caption {
  max-width: 100%;
}

.entry-content .wp-caption-text,
.entry-content figcaption {
  margin-top: 6px;
  color: #666;
  font-size: 0.8125rem;
  line-height: 1.6;
  text-align: left;
}

/* ------------------------------------------------------------------
 * WP User Frontend／汎用フォーム互換
 * ---------------------------------------------------------------- */
.entry-content .wpuf-form-add,
.entry-content .wpuf-form-add ul,
.entry-content .wpuf-form-add li {
  max-width: 100%;
}

.entry-content .wpuf-form-add input:not([type="checkbox"]):not([type="radio"]),
.entry-content .wpuf-form-add textarea,
.entry-content .wpuf-form-add select {
  max-width: 100%;
  box-sizing: border-box;
}

/* ------------------------------------------------------------------
 * コメント
 * ---------------------------------------------------------------- */
.comments-area {
  margin-top: 56px;
  padding-top: 36px;
  border-top: 1px solid #b8d4e4;
}

.comments-title,
.comment-reply-title {
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);
}

.comment-list {
  padding-left: 1.5em;
}

.comment-list li {
  margin-block: 24px;
}

.comment-form input:not([type="checkbox"]):not([type="radio"]),
.comment-form textarea {
  width: 100%;
  max-width: 100%;
  padding: 10px 12px;
  border: 1px solid #a7bac6;
}

.comment-form .submit {
  width: auto;
  border: 0;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}

/* ------------------------------------------------------------------
 * 旧CPTのACF互換表示
 * ---------------------------------------------------------------- */
.legacy-fields {
  margin-top: 56px;
  padding: clamp(22px, 4vw, 40px);
  border: 1px solid #b8d4e4;
  background: #f5f9fb;
}

.legacy-fields > h2 {
  margin: 0 0 28px;
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
}

.legacy-field + .legacy-field {
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid #cddde6;
}

.legacy-field h3,
.legacy-field h4 {
  margin-top: 0;
}

.legacy-field h3 {
  color: var(--blue);
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
}

.legacy-field h4 {
  margin-bottom: 6px;
  font-size: 1rem;
}

.legacy-field__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 18px;
  padding: 18px 0;
  border-bottom: 1px solid #d9e5eb;
}

.legacy-field__row:last-child {
  border-bottom: 0;
}

.legacy-field__item > :last-child,
.legacy-field > :last-child {
  margin-bottom: 0;
}

.legacy-field__image img,
.legacy-field__gallery img {
  width: auto;
  max-width: 100%;
  height: auto;
}

.legacy-field__gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 16px;
}

.pill.is-disabled {
  cursor: default;
  opacity: 0.72;
}

/* ==================================================================
 * TOP・ヘッダーのリンク追加（2026-11-12）
 * ================================================================== */

/* ------------------------------------------------------------------
 * 01（エリア）の5つのタブ
 *
 * 各エリアの紹介ページへのリンクにした。押せることが分かるよう、
 * ボタン（.pill）と同じ黄背景・黒文字へ変える。タップ中も同じ色にする。
 * ---------------------------------------------------------------- */
.area-tabs a {
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.area-tabs a b {
  transition: color 0.2s ease;
}

.area-tabs a:hover,
.area-tabs a:focus-visible,
.area-tabs a:active {
  background: var(--yellow);
  color: #222;
  transform: translateY(-1px);
}

.area-tabs a:hover b,
.area-tabs a:focus-visible b,
.area-tabs a:active b {
  color: #222;
}

@media (prefers-reduced-motion: reduce) {
  .area-tabs a,
  .area-tabs a b {
    transition: none;
  }

  .area-tabs a:hover,
  .area-tabs a:focus-visible,
  .area-tabs a:active {
    transform: none;
  }
}

/* ------------------------------------------------------------------
 * ヘッダー右上のテキストリンク
 *
 * 「お問い合わせ」を足して2つになったので、あいだを空ける。
 * ---------------------------------------------------------------- */
.header-tools > a + a {
  margin-left: 22px;
}

.header-tools > a:hover,
.header-tools > a:focus-visible {
  color: var(--blue);
  border-bottom-color: var(--blue);
}

/*
 * 4番目を工業ゾーン、5番目をアーバンリゾートゾーンへ入れ替えた。
 * site.css は位置で色を決めているので、色もエリアに付いていくよう入れ替える。
 */
.area-tabs a:nth-child(4) {
  background: #efe1c5;
}

.area-tabs a:nth-child(5) {
  background: #d8c4df;
}

/* 狭い画面では「アーバンリゾート」が1行に入らず「ト」だけ折り返すので、この枠だけ字を詰める */
@media (max-width: 480px) {
  .area-tabs a:nth-child(5) b {
    font-size: 11px;
    letter-spacing: 0;
  }
}

/* ------------------------------------------------------------------
 * 叶えた人たちのカード
 *
 * タイトルは2行で切る。余白を padding で取ると、切ったはずの3行目が
 * 下の余白にのぞくため、margin で取る。
 * カード全体がリンクなので、ホバーで反応を返す。
 * ---------------------------------------------------------------- */
.story-card p {
  margin: 10px 12px;
  padding: 0;
}

.story-card > a {
  display: block;
  color: inherit;
  text-decoration: none;
}

.story-card img {
  display: block;
  transition: opacity 0.2s ease;
}

.story-card > a:hover img,
.story-card > a:focus-visible img {
  opacity: 0.8;
}

.story-card > a:hover p,
.story-card > a:focus-visible p {
  color: var(--blue);
}

/* ------------------------------------------------------------------
 * 叶えた人たちのカルーセル（横スライド）
 *
 * .story-track を「窓」にして、中の .story-rail を横へ滑らせる。
 * site.css は .story-track を3列グリッド（SPは1枚だけ表示）にしているので、
 * ここで窓の役割へ上書きする。カードの並びと枚数は front-page.js が作る。
 * ---------------------------------------------------------------- */
.story-track {
  display: block;
  overflow: hidden;
}

.story-rail {
  display: flex;
  gap: 18px;
  transition: transform 0.45s ease;
  will-change: transform;
}

/* 端から本物の位置へ戻すときは動かさない */
.story-rail.is-jump {
  transition: none;
}

.story-rail .story-card {
  display: block;
  flex: 0 0 calc((100% - 36px) / 3);
  min-width: 0;
}

/* 記事が少なくて送る必要がないときも、ボタンの幅は残して中央をずらさない */
.story-carousel > button[hidden] {
  display: block;
  visibility: hidden;
}

@media (max-width: 760px) {
  .story-rail {
    gap: 12px;
  }

  .story-rail .story-card {
    flex-basis: 100%;
  }

  /* 写真の縦横比が記事ごとに違っても、送るたびに高さが変わらないようにする */
  .story-rail .story-card img {
    aspect-ratio: 3 / 2;
    height: auto;
    object-fit: cover;
  }
}

@media (prefers-reduced-motion: reduce) {
  .story-rail {
    transition: none;
  }
}

/* ------------------------------------------------------------------
 * 01〜07のSP表示（2026-11-12のデザイン案）
 *
 * SPもPCと同じ順序で、04（地域・生活情報）も表示するようになった。
 * site.css に残る旧デザインの order と .community-feature の非表示を打ち消す。
 * ---------------------------------------------------------------- */
@media (max-width: 760px) {
  /* site.css は id で order を指定しているので、id を含めて詳細度を上回る */
  .feature-list > .feature,
  .feature-list > #area,
  .feature-list > #transit,
  .feature-list > #shops,
  .feature-list > #community,
  .feature-list > #children,
  .feature-list > #disaster,
  .feature-list > #housing {
    order: 0;
  }

  .feature-list > .community-feature {
    display: block;
  }

  /*
   * 04の装飾（花火とスポーツの合成画像）。PC用の位置のままだと見出しに重なるので、
   * 右上へ寄せて小さくし、他の節と同じように番号を下げて装飾の左下に置く。
   */
  .community-feature .round-decor.is-single {
    top: 0;
    right: 0;
  }

  .community-feature .round-decor.is-single img {
    width: 200px;
  }

  .community-feature .feature-no {
    margin-top: 90px;
  }
}

/* ------------------------------------------------------------------
 * 「『浦安に住みたい！』について」の設置場所一覧（page-setmap.php）
 *
 * ACFリピーターに行があるときだけ出る。区切りは淡い背景で付ける。
 * ---------------------------------------------------------------- */
.set-places {
  margin-top: 48px;
}

.set-places__title {
  margin: 0 0 16px;
  font-size: clamp(1.1875rem, 1.08rem + 0.55vw, 1.375rem);
  line-height: 1.5;
}

.set-places__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.set-places__item {
  padding: 12px 14px;
  border-radius: 6px;
  background: var(--pale);
  line-height: 1.6;
}

.set-places__item strong {
  display: block;
}

.set-places__item span {
  display: block;
  font-size: 0.875rem;
}

/* 本文に貼られた地図の iframe（width="640" 固定）を画面幅に収める */
.entry-content .gmap iframe {
  display: block;
  width: 100%;
  max-width: 640px;
}

/* ------------------------------------------------------------------
 * グローバルメニューの現在地
 *
 * 表示中のページを含む親項目は、ドロップダウンを開かずに文字色だけで示す。
 * 以前は開いた状態（is-open）で出力しており、PCで開いたまま固定されていた。
 * ---------------------------------------------------------------- */
.global-nav .has-menu.current-menu-ancestor > button,
.global-nav .has-menu.current-menu-parent > button {
  color: var(--blue);
}

/* ------------------------------------------------------------------
 * サイドバーのバナー
 *
 * 1つのウィジェットに画像を縦に並べると、隙間なく貼り付いてしまう。
 * 画像ブロックを並べた場合と、カスタムHTMLで <a><img></a> を並べた場合の
 * どちらでも、バナーとバナーの間を空ける。
 * ---------------------------------------------------------------- */
.content-sidebar .wp-block-image + .wp-block-image,
.content-sidebar figure + figure,
.content-sidebar .widget_block > * + *,
.content-sidebar .textwidget > * + *,
.content-sidebar .custom-html-widget > * + * {
  margin-top: 16px;
}

/* <a><img></a> だけのリンクはブロックにして、縦に並べたときの行間の隙間をなくす */
.content-sidebar a:has(> img:only-child) {
  display: block;
}

.content-sidebar a:has(> img:only-child) img {
  display: block;
}

.content-sidebar a:has(> img:only-child) + a:has(> img:only-child),
.content-sidebar a:has(> img:only-child) + br + a:has(> img:only-child) {
  margin-top: 16px;
}

.content-sidebar a:has(> img:only-child) + br {
  display: none;
}

/* リンク付きバナーは、ホバーで少し薄くして押せることを示す */
.content-sidebar a:has(> img:only-child) img,
.content-sidebar .wp-block-image a img {
  transition: opacity 0.2s ease;
}

.content-sidebar a:has(> img:only-child):hover img,
.content-sidebar a:has(> img:only-child):focus-visible img,
.content-sidebar .wp-block-image a:hover img,
.content-sidebar .wp-block-image a:focus-visible img {
  opacity: 0.85;
}

/* ------------------------------------------------------------------
 * サイドバーの見出し
 *
 * フッターの「ABOUT US」「OUR COMPANY」と同じく、見出しの右に波線を置く。
 * WordPress Popular Posts のブロックは見出しを .popular-posts > h2 で出すので、
 * ウィジェット標準の見出しと同じ見た目にそろえる。
 * ---------------------------------------------------------------- */
.sidebar-widget__title,
.content-sidebar .wp-block-heading,
.content-sidebar .popular-posts > h2 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  padding: 0;
  border-radius: 0;
  background: none;
  color: var(--ink);
  font-size: clamp(1.05rem, 0.98rem + 0.25vw, 1.2rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.5;
}

.sidebar-widget__title::after,
.content-sidebar .wp-block-heading::after,
.content-sidebar .popular-posts > h2::after {
  content: "";
  flex: 0 0 64px;
  height: 9px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='10' viewBox='0 0 64 10'%3E%3Cpath d='M0 5 Q4 0 8 5 T16 5 T24 5 T32 5 T40 5 T48 5 T56 5 T64 5' fill='none' stroke='%23247bb5' stroke-width='2'/%3E%3C/svg%3E") left center / 64px 9px no-repeat;
}

/* ------------------------------------------------------------------
 * よく読まれている記事（テーマ未選択のときの標準出力）
 *
 * サムネイルを float にしていたため、タイトルが長いと画像の下へ回り込んでいた。
 * サムネイルとタイトルを2列に分ける。
 * ---------------------------------------------------------------- */
.content-sidebar .wpp-list li:has(.wpp-thumbnail) {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr);
  column-gap: 12px;
  align-items: start;
}

.content-sidebar .wpp-list li:has(.wpp-thumbnail) > :first-child {
  grid-row: 1 / span 3;
}

.content-sidebar .wpp-list li:has(.wpp-thumbnail) > :not(:first-child) {
  grid-column: 2;
}

.content-sidebar .wpp-list li .wpp-thumbnail {
  float: none;
  margin: 0;
}

/* ------------------------------------------------------------------
 * フッターの地図枠に置くロゴ（地図の埋め込みが空のとき）
 *
 * 枠の大きさは site.css の .map-placeholder のまま（PCは右列いっぱい、
 * SPは右上の小さな枠）。ロゴは白背景なので、枠の中に収まるよう縮める。
 * ---------------------------------------------------------------- */
.footer-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.footer-logo img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* SPでは枠が右上に重なるので、見出しを枠の手前で折り返す（SP版デザイン案と同じ） */
@media (max-width: 760px) {
  .about-us > div:first-child h2 {
    padding-right: 110px;
  }
}