/*
Theme Name: Circular Yokohama 2026
Theme URI: https://circular.yokohama
Description: Creative Circular City Yokohama — 横浜トリコロールのオリジナルテーマ（スクラッチ開発・フェーズ1）
Author: Circular Yokohama Editorial Team
Version: 0.20.6
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: cy-theme
*/

/* ==========================================================================
   デザイントークン
   ========================================================================== */
:root {
  --cy-primary: #1d3a6e;
  --cy-primary-dark: #142a52;
  --cy-accent: #c8102e;
  --cy-accent-dark: #a00d25;
  --cy-ink: #1b2432;
  --cy-text: #303c4b;
  --cy-text-soft: #5f6874;  /* 補足・日付（薄灰背景でもコントラスト4.7を確保） */
  --cy-line: #e0e0e0;
  --cy-bg: #ebebeb;
  --cy-bg-soft: #f7f7f7;
  --cy-footer: #14213d;
  --cy-radius: 14px;
  --cy-shadow: 0 2px 10px rgba(20, 33, 61, 0.08);
  --cy-shadow-hover: 0 14px 30px rgba(20, 33, 61, 0.16);
  --cy-font: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
  --cy-container: 1200px;
}

/* ==========================================================================
   ベース
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--cy-font);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.9;
  letter-spacing: 0.01em;
  color: var(--cy-text);
  background: var(--cy-bg);
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--cy-primary); text-decoration: none; transition: color 0.2s ease; }
a:hover { color: var(--cy-accent); }
a:focus-visible { outline: 2px solid var(--cy-primary); outline-offset: 2px; }

h1, h2, h3, h4, h5, h6 {
  font-weight: 900;
  color: var(--cy-ink);
  line-height: 1.5;
  margin: 0 0 0.6em;
}

::selection { background: rgba(29, 58, 110, 0.2); }

.cy-container {
  max-width: var(--cy-container);
  margin: 0 auto;
  padding: 0 24px;
}

.screen-reader-text {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

/* ==========================================================================
   ボタン
   ========================================================================== */
/* ボタンの使い分け（サイト全体の原則）
   .cy-btn          … 通常のアクション。紺の塗り
   .cy-btn--ghost   … 副次的な導線。枠線のみ
   .cy-btn--accent  … 最重要アクションだけに使う横浜レッド。
                       現在は「マップを見る」「マップ掲載申請」のマップ関連に限定
   .cy-hero__btn    … ヒーロー専用の白ピル（例外扱い）
   新しいボタンを置くときは、まず .cy-btn。迷ったら赤にしない */
.cy-btn {
  display: inline-block;
  background: var(--cy-primary);
  color: #ffffff;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.06em;
  padding: 11px 30px;
  border-radius: 999px;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.cy-btn:hover {
  background: var(--cy-primary-dark);
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(20, 42, 82, 0.35);
}

/* ==========================================================================
   ヘッダー
   ========================================================================== */
.cy-header {
  background: #ffffff;
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 1px 0 rgba(20, 33, 61, 0.08);
}

.cy-header__inner {
  max-width: var(--cy-container);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 76px;
}

.cy-header__tools { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }

.cy-icon-btn {
  width: 44px; height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  color: var(--cy-ink);
  padding: 0;
}

.cy-icon-btn:hover { background: var(--cy-bg-soft); color: var(--cy-primary); }
.cy-icon-btn svg { width: 20px; height: 20px; fill: currentColor; display: block; }

/* 検索バー */
.cy-searchbar { border-top: 1px solid var(--cy-line); background: #ffffff; }
.cy-searchbar__inner { max-width: var(--cy-container); margin: 0 auto; padding: 16px 24px; }

.cy-searchform { display: flex; gap: 10px; }

.cy-searchform__input {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--cy-font);
  font-size: 15px;
  font-weight: 500;
  padding: 12px 18px;
  border: 1.5px solid var(--cy-line);
  border-radius: 999px;
  background: #ffffff;
  color: var(--cy-text);
}

.cy-searchform__input:focus {
  outline: none;
  border-color: var(--cy-primary);
  box-shadow: 0 0 0 3px rgba(29, 58, 110, 0.12);
}

.cy-searchform__submit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  background: var(--cy-primary);
  color: #ffffff;
  border: 0;
  border-radius: 999px;
  padding: 12px 26px;
  font-family: var(--cy-font);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
}

.cy-searchform__submit:hover { background: var(--cy-primary-dark); }
.cy-searchform__submit svg { width: 16px; height: 16px; fill: currentColor; }

/* 検索結果ページ上部の検索窓 */
.cy-search-panel {
  background: #ffffff;
  border-radius: var(--cy-radius);
  box-shadow: var(--cy-shadow);
  padding: 20px 24px;
  margin-bottom: 32px;
}

/* 検索結果0件 */
.cy-empty {
  background: #ffffff;
  border-radius: var(--cy-radius);
  box-shadow: var(--cy-shadow);
  padding: 40px 28px;
  text-align: center;
}

.cy-empty .cy-empty-mark { margin-bottom: 18px; }
.cy-empty__lead { font-size: 16px; font-weight: 700; color: var(--cy-ink); margin: 0 0 8px; }
.cy-empty__hint { font-size: 14px; color: var(--cy-text-soft); margin: 0; }

/* キーボード操作用スキップリンク */
.cy-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2000;
  background: var(--cy-primary);
  color: #ffffff;
  padding: 12px 20px;
  border-radius: 0 0 10px 0;
  font-weight: 700;
  font-size: 14px;
}

.cy-skip-link:focus { left: 0; color: #ffffff; }

.cy-header__logo { flex-shrink: 0; display: block; line-height: 0; }

/* flexで横に潰れないよう縮小を禁止し、高さ基準で比率を保つ */
.cy-header__logo img {
  display: block;
  height: 34px;
  width: auto;
  max-width: none;
  flex-shrink: 0;
  object-fit: contain;
}

.cy-nav ul { list-style: none; display: flex; gap: 4px; margin: 0; padding: 0; }
.cy-nav li { position: relative; }

.cy-nav a {
  display: block;
  color: var(--cy-ink);
  font-weight: 700;
  font-size: 14.5px;
  letter-spacing: 0.03em;
  padding: 10px 14px;
  border-radius: 8px;
}

.cy-nav a:hover { color: var(--cy-primary); background: var(--cy-bg-soft); }

.cy-nav li.current-menu-item > a,
.cy-nav li.current-menu-parent > a { color: var(--cy-primary); }

/* ドロップダウン */
.cy-nav li ul {
  position: absolute;
  top: 100%;
  left: 0;
  /* 項目名が折り返さない幅を確保しつつ、長すぎる場合は上限で止める */
  width: max-content;
  min-width: 240px;
  max-width: 340px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(20, 33, 61, 0.16);
  border: 1px solid var(--cy-line);
  padding: 8px;
  display: none;
  flex-direction: column;
  gap: 2px;
}

.cy-nav li:hover > ul, .cy-nav li:focus-within > ul { display: flex; }

.cy-nav li ul a {
  font-weight: 500;
  font-size: 13.5px;
  line-height: 1.5;
  padding: 10px 14px;
  border-radius: 8px;
  white-space: nowrap;
}

.cy-nav li ul a:hover { background: var(--cy-bg-soft); color: var(--cy-primary); }

/* 右端のメニューはドロップダウンを右寄せにして画面外に出さない */
.cy-nav > ul > li:last-child ul,
.cy-nav > ul > li:nth-last-child(2) ul { left: auto; right: 0; }

/* モバイルナビ */
/* ハンバーガー: inline-flex だと 3 本の線が横並びになるため縦積みを明示する */
.cy-nav-toggle { display: none; background: none; border: 0; padding: 10px; cursor: pointer; }
.cy-nav-toggle {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.cy-nav-toggle span {
  display: block;
  width: 22px; height: 2px;
  background: var(--cy-ink);
  border-radius: 2px;
  margin: 0;
  transition: transform 0.22s ease, opacity 0.18s ease;
}
/* 開いている間は × に変形させて状態を分かりやすくする */
.cy-nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.cy-nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.cy-nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.cy-sub-toggle { display: none; }

@media (max-width: 900px) {
  .cy-nav-toggle { display: inline-flex; }
  .cy-nav {
    display: none;
    position: absolute;
    top: 76px; left: 0; right: 0;
    background: #ffffff;
    box-shadow: 0 20px 30px rgba(20, 33, 61, 0.15);
    padding: 8px 12px 16px;
    /* 項目数が多く画面に収まらないため、メニュー内でスクロールできるようにする */
    max-height: calc(100vh - 76px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .cy-nav.is-open { display: block; }
  .cy-nav ul { flex-direction: column; }
  .cy-nav > ul > li { border-bottom: 1px solid var(--cy-line); }
  .cy-nav > ul > li:last-child { border-bottom: 0; }
  .cy-nav a { padding: 14px 12px; }

  /* サブメニューはアコーディオンで開閉（初期は閉じる）。
     PC用ドロップダウンの固定幅・枠線・影を打ち消し、
     親項目の下にぶら下がる入れ子リストとして見せる */
  .cy-nav li.has-sub { position: relative; }
  .cy-nav li ul {
    position: static;
    display: none;
    width: auto;
    min-width: 0;
    max-width: none;
    background: var(--cy-bg-soft);
    border: 0;
    border-radius: 0 0 10px 10px;
    box-shadow: none;
    padding: 4px 0 8px;
    margin: 0 0 8px;
    gap: 0;
  }
  .cy-nav li.sub-open > ul { display: block; }

  /* 階層が分かるように左に罫線を引き、字下げする */
  .cy-nav li ul li { border-bottom: 0; }
  .cy-nav li ul a {
    display: block;
    padding: 12px 14px 12px 26px;
    margin: 0 12px;
    border-left: 2px solid var(--cy-line);
    border-radius: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--cy-text);
    white-space: normal;
  }
  .cy-nav li ul a:hover,
  .cy-nav li ul a:focus-visible {
    background: transparent;
    border-left-color: var(--cy-accent);
    color: var(--cy-primary);
  }

  /* 開いている親項目は背景でひとまとまりに見せる */
  .cy-nav > ul > li.sub-open > a { background: var(--cy-bg-soft); border-radius: 10px 10px 0 0; }
  .cy-nav > ul > li.sub-open { border-bottom-color: transparent; }

  .cy-sub-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 2px; right: 0;
    width: 48px; height: 48px;
    background: none;
    border: 0;
    cursor: pointer;
    padding: 0;
  }
  .cy-sub-toggle span {
    width: 9px; height: 9px;
    border-right: 2px solid var(--cy-text-soft);
    border-bottom: 2px solid var(--cy-text-soft);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform 0.2s ease;
  }
  .cy-nav li.sub-open > .cy-sub-toggle span { transform: rotate(-135deg) translate(-2px, -2px); }
}

@media (min-width: 901px) {
  .cy-nav-toggle { display: none; }
}

/* ==========================================================================
   ページヘッダー（一覧・記事上部の帯）
   ========================================================================== */
.cy-page-header {
  background: #ffffff;
  border-bottom: 1px solid var(--cy-line);
  padding: 36px 0;
}

.cy-page-header__inner {
  max-width: var(--cy-container);
  margin: 0 auto;
  padding: 0 24px;
}

/* パンくずは見出しの上に小さく（現在ページ自身は含めない） */
.cy-breadcrumb {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--cy-text-soft);
  margin-bottom: 10px;
}

.cy-breadcrumb a { color: var(--cy-text-soft); }
.cy-breadcrumb a:hover { color: var(--cy-primary); }
.cy-breadcrumb__sep { margin: 0 8px; opacity: 0.6; }

.cy-page-header__title {
  font-size: 28px;
  letter-spacing: 0.06em;
  line-height: 1.5;
  margin: 0;
}

.cy-page-header__title::after {
  content: '';
  display: block;
  width: 40px; height: 3px;
  border-radius: 2px;
  background: var(--cy-accent);
  margin-top: 16px;
}

.cy-page-header__sub {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--cy-text);
  line-height: 1.9;
  margin: 16px 0 0;
  max-width: 900px;
}

@media (max-width: 700px) {
  .cy-page-header { padding: 26px 0; }
  .cy-page-header__title { font-size: 21px; }
  .cy-page-header__sub { font-size: 13.5px; }
}

/* ==========================================================================
   記事カードグリッド（一覧）
   ========================================================================== */
.cy-main { padding: 48px 0 72px; }

.cy-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

@media (max-width: 900px) { .cy-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .cy-grid { grid-template-columns: 1fr; } }

.cy-card {
  background: #ffffff;
  border-radius: var(--cy-radius);
  overflow: hidden;
  box-shadow: var(--cy-shadow);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  display: flex;
  flex-direction: column;
  position: relative;
}

.cy-card:hover { transform: translateY(-4px); box-shadow: var(--cy-shadow-hover); }

.cy-card__media { position: relative; overflow: hidden; aspect-ratio: 3 / 2; background: var(--cy-bg-soft); }
.cy-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; display: block; }
.cy-card:hover .cy-card__media img { transform: scale(1.05); }

.cy-card__badge {
  position: absolute;
  top: 0; right: 0;
  background: var(--cy-primary);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 5px 14px;
  border-radius: 0 0 0 10px;
  z-index: 2;
}

.cy-card__body { padding: 18px 22px 22px; display: flex; flex-direction: column; flex-grow: 1; }

.cy-card__title { font-size: 17.5px; line-height: 1.65; font-weight: 900; margin: 0 0 12px; letter-spacing: 0.01em; }
.cy-card__title a { color: var(--cy-ink); }
.cy-card__title a::after { content: ''; position: absolute; inset: 0; } /* カード全体をリンクに */
.cy-card:hover .cy-card__title a { color: var(--cy-primary); }

.cy-card__date {
  font-size: 12.5px;
  color: var(--cy-text-soft);
  margin-top: auto;
}

.cy-card__excerpt {
  font-size: 13.5px;
  line-height: 1.9;
  color: var(--cy-text-soft);
  margin: 0 0 12px;
}

/* ページネーション */
.cy-pagination { display: flex; gap: 8px; justify-content: center; margin-top: 48px; flex-wrap: wrap; }
.cy-pagination .page-numbers {
  display: inline-block;
  min-width: 40px;
  text-align: center;
  padding: 8px 12px;
  border-radius: 8px;
  background: #ffffff;
  color: var(--cy-text);
  font-weight: 700;
  font-size: 14px;
  box-shadow: var(--cy-shadow);
}
.cy-pagination .page-numbers.current { background: var(--cy-primary); color: #ffffff; }
.cy-pagination a.page-numbers:hover { background: var(--cy-primary-dark); color: #ffffff; }

/* --------------------------------------------------------------------------
   もっと見る（ページネーションの代替）
   -------------------------------------------------------------------------- */
.cy-loadmore {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 44px;
}

.cy-loadmore__btn { min-width: 220px; text-align: center; }

/* 読み込み中は押せないことを見た目でも示す */
.cy-loadmore.is-loading .cy-loadmore__btn {
  opacity: 0.6;
  cursor: progress;
  pointer-events: none;
}

.cy-loadmore__status {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--cy-text-soft);
  min-height: 1em;
}

.cy-loadmore.is-done .cy-loadmore__status { color: var(--cy-text-soft); }

/* 追記されたカードにフォーカスが移ったときの枠取り */
.cy-grid > *:focus-visible,
.cy-grid > * a:focus-visible { outline: 2px solid var(--cy-primary); outline-offset: 3px; }

@media (max-width: 600px) {
  .cy-loadmore { margin-top: 32px; }
  .cy-loadmore__btn { min-width: 0; width: 100%; }
}

/* ==========================================================================
   記事ページ
   ========================================================================== */
/* 記事・プロジェクト詳細は固定ページと同じ幅に揃える */
.cy-article-wrap { max-width: 940px; margin: 0 auto; padding: 0 24px; }

@media (max-width: 700px) { .cy-article-wrap { padding: 0 16px; } }

.cy-article {
  background: #ffffff;
  border-radius: var(--cy-radius);
  box-shadow: var(--cy-shadow);
  padding: 44px 48px 56px;
}

@media (max-width: 600px) { .cy-article { padding: 28px 20px 40px; border-radius: 10px; } }

.cy-article__meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }

.cy-article__cat {
  background: var(--cy-primary);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 3px 14px;
  border-radius: 999px;
}
.cy-article__cat:hover { background: var(--cy-primary-dark); color: #fff; }

.cy-article__date { font-size: 13px; color: var(--cy-text-soft); }

.cy-article__title { font-size: 27px; line-height: 1.6; letter-spacing: 0.02em; margin: 0 0 24px; }

.cy-article__thumb { margin: 0 0 32px; }
.cy-article__thumb img { width: 100%; height: auto; border-radius: 10px; display: block; }

/* 本文タイポグラフィ */
.cy-article__content { font-size: 16.5px; line-height: 2.05; }
.cy-article__content p { margin: 0 0 1.6em; }
.cy-article__content h2 {
  font-size: 24px;
  line-height: 1.65;
  border-left: 4px solid var(--cy-primary);
  padding: 4px 0 4px 16px;
  margin: 2.4em 0 1.1em;
}
.cy-article__content h3 { font-size: 21px; margin: 2em 0 0.9em; }
.cy-article__content img { border-radius: 10px; height: auto; }
.cy-article__content a { color: var(--cy-primary); text-decoration: underline; text-underline-offset: 3px; }
.cy-article__content a:hover { color: var(--cy-accent); }
.cy-article__content blockquote {
  background: var(--cy-bg-soft);
  border-left: 3px solid var(--cy-accent);
  border-radius: 0 10px 10px 0;
  margin: 1.6em 0;
  padding: 18px 22px;
  font-size: 15.5px;
}
.cy-article__content .wp-caption { max-width: 100%; }
.cy-article__content .wp-caption-text { font-size: 12.5px; color: var(--cy-text-soft); margin-top: 8px; }
.cy-article__content iframe { max-width: 100%; }
.cy-article__content table { border-collapse: collapse; width: 100%; font-size: 14.5px; }
.cy-article__content table th, .cy-article__content table td { border: 1px solid var(--cy-line); padding: 8px 12px; }

/* タグ */
.cy-article__tags { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 8px; }
.cy-article__tags a {
  font-size: 12.5px;
  color: var(--cy-text-soft);
  background: var(--cy-bg-soft);
  border: 1px solid var(--cy-line);
  padding: 4px 14px;
  border-radius: 999px;
}
.cy-article__tags a:hover { color: var(--cy-primary); border-color: var(--cy-primary); }

/* ==========================================================================
   関連記事セクション（記事下の回遊導線）
   ========================================================================== */
.cy-related { max-width: var(--cy-container); margin: 56px auto 0; padding: 0 24px; }

.cy-related__title {
  font-size: 20px;
  letter-spacing: 0.06em;
  margin: 0 0 6px;
}

.cy-related__title::after {
  content: '';
  display: block;
  width: 40px; height: 3px;
  border-radius: 2px;
  background: var(--cy-accent);
  margin-top: 10px;
}

.cy-related .cy-grid { margin-top: 24px; }

.cy-related__more { display: inline-block; margin-top: 20px; font-size: 13.5px; font-weight: 700; }

/* ==========================================================================
   固定ページ（汎用）
   ========================================================================== */
.cy-page-wrap {
  max-width: 940px;
  margin: 0 auto;
  padding: 0 24px;
}

.cy-page-content {
  background: #ffffff;
  border-radius: var(--cy-radius);
  box-shadow: var(--cy-shadow);
  padding: 44px 48px 56px;
  font-size: 16px;
  line-height: 2;
}

@media (max-width: 600px) { .cy-page-content { padding: 28px 20px 40px; } }

/* ==========================================================================
   フッター
   ========================================================================== */
.cy-footer { background: var(--cy-footer); color: #ffffff; }

.cy-footer__inner {
  max-width: var(--cy-container);
  margin: 0 auto;
  padding: 56px 24px 40px;
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 48px;
}

@media (max-width: 800px) { .cy-footer__inner { grid-template-columns: 1fr; gap: 32px; } }

.cy-footer h2 {
  color: #ffffff;
  font-size: 14px;
  letter-spacing: 0.1em;
  margin: 0 0 16px;
}

.cy-footer p, .cy-footer li { font-size: 13.5px; line-height: 2; color: #ffffff; }
.cy-footer ul { list-style: none; margin: 0; padding: 0; }
.cy-footer a { color: #ffffff; }
.cy-footer a:hover { color: #ffffff; text-decoration: underline; text-underline-offset: 3px; }

.cy-footer__social { display: flex; gap: 12px; margin: 0 0 28px; }
.cy-footer__social a {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: #1e2f52;
  font-size: 15px;
}
.cy-footer__social a:hover { background: var(--cy-accent); text-decoration: none; }
.cy-footer__social svg { width: 16px; height: 16px; fill: #ffffff; display: block; }

/* ページ転送量・推定CO2（Sustainable Web Design の見える化。JSが計測できた時だけ出る） */
.cy-footer__weight {
  position: relative;
  z-index: 1;
  text-align: center;
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.55);
  margin: 0;
  padding: 0 24px 14px;
}

.cy-footer__copyright {
  background: #101a30;
  text-align: center;
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.7);
  padding: 16px 24px;
}

/* ==========================================================================
   トップページ
   ========================================================================== */
.cy-main--front { padding-top: 0; padding-bottom: 0; }

/* ヒーロー */
.cy-hero {
  position: relative;
  background-size: cover;
  background-position: center 42%; /* 稜線を文字の背後に置き、下部の平坦な水面を減らす */
  min-height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #ffffff;
}

.cy-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  /* 中央をやや濃くして、賑やかな稜線の上でも文字が読めるようにする */
  background:
    radial-gradient(ellipse 70% 55% at 50% 47%, rgba(10, 22, 48, 0.42) 0%, rgba(10, 22, 48, 0) 100%),
    linear-gradient(180deg, rgba(10, 22, 48, 0.34) 0%, rgba(10, 22, 48, 0.28) 45%, rgba(10, 22, 48, 0.55) 100%);
}

.cy-hero__inner {
  position: relative;
  z-index: 1;
  padding: 80px 24px;
  max-width: 900px;
}

.cy-hero__eyebrow {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 18px;
}

.cy-hero__eyebrow::after {
  content: '';
  display: block;
  width: 40px; height: 3px;
  border-radius: 2px;
  background: var(--cy-accent);
  margin: 14px auto 0;
}

.cy-hero__title::before {
  content: '';
  display: block;
  width: 56px; height: 3px;
  border-radius: 2px;
  background: var(--cy-accent);
  margin: 0 auto 26px;
}

.cy-hero__title {
  color: #ffffff;
  font-size: 42px;
  font-weight: 900;
  letter-spacing: 0.02em;
  line-height: 1.25;
  margin: 0 0 38px;
  text-shadow: 0 2px 28px rgba(0, 0, 0, 0.45);
}

.cy-hero__lead {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.14em;
  margin: 0 0 14px;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.4);
}

.cy-hero__tagline {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.18em;
  line-height: 1.6;
  color: #ffffff;
  margin: 0 0 22px;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.4);
}

.cy-hero__btn {
  display: inline-block;
  color: #ffffff;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.08em;
  padding: 14px 36px;
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  border-radius: 999px;
  background: rgba(10, 22, 48, 0.22);
  backdrop-filter: blur(6px);
  transition: background 0.2s ease, color 0.2s ease;
}

.cy-hero__btn:hover { background: #ffffff; color: var(--cy-ink); }

@media (max-width: 700px) {
  .cy-hero { min-height: 440px; background-position: center 38%; }
  .cy-hero__inner { padding: 48px 20px; }
  .cy-hero__title { font-size: 25px; line-height: 1.4; margin-bottom: 26px; }
  .cy-hero__title::before { width: 44px; margin-bottom: 20px; }
  .cy-hero__eyebrow { font-size: 13px; }
  .cy-hero__tagline { font-size: 14px; letter-spacing: 0.14em; margin-bottom: 16px; }
  .cy-hero__btn { font-size: 13px; padding: 12px 28px; }
}

/* セクション共通 */
.cy-section { padding: 72px 0; }

.cy-section__head { text-align: center; margin-bottom: 40px; }

.cy-section__title {
  font-size: 27px;
  letter-spacing: 0.08em;
  margin: 0;
}

.cy-section__title::after {
  content: '';
  display: block;
  width: 40px; height: 3px;
  border-radius: 2px;
  background: var(--cy-accent);
  margin: 14px auto 0;
}

.cy-section__sub {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--cy-text);
  margin: 16px 0 0;
  line-height: 1.9;
}

.cy-section__action { text-align: center; margin-top: 40px; }

@media (max-width: 700px) {
  .cy-section { padding: 48px 0; }
  .cy-section__title { font-size: 22px; }
}

/* Circular Yokohamaとは（濃紺の帯） */
.cy-about {
  background: var(--cy-footer);
  color: #ffffff;
  text-align: center;
  padding: 72px 0;
}

.cy-about__title { color: #ffffff; font-size: 25px; letter-spacing: 0.08em; margin: 0 0 24px; }

.cy-about__title::after {
  content: '';
  display: block;
  width: 40px; height: 3px;
  border-radius: 2px;
  background: var(--cy-accent);
  margin: 14px auto 0;
}

.cy-about__text {
  max-width: 820px;
  margin: 0 auto 32px;
  font-size: 15px;
  font-weight: 700;
  line-height: 2.1;
  color: rgba(255, 255, 255, 0.92);
  text-align: left;
}

.cy-btn--ghost {
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.85);
}

.cy-btn--ghost:hover { background: #ffffff; color: var(--cy-ink); box-shadow: none; }

@media (max-width: 700px) {
  .cy-about { padding: 48px 0; }
  .cy-about__title { font-size: 21px; }
  .cy-about__text { font-size: 14.5px; }
}

/* プロジェクトカード（画像+タイトル+抜粋） */
.cy-card--project .cy-card__title { font-size: 17.5px; margin-bottom: 10px; }

/* サーキュラーマップ */
.cy-map {
  background: linear-gradient(120deg, var(--cy-primary) 0%, var(--cy-footer) 100%);
  color: #ffffff;
  padding: 68px 0;
  overflow: hidden;
}

.cy-map__inner {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
}

.cy-map__title {
  color: #ffffff;
  font-size: 30px;
  letter-spacing: 0.06em;
  line-height: 1.35;
  margin: 0 0 20px;
}

.cy-map__title::after {
  content: '';
  display: block;
  width: 40px; height: 3px;
  border-radius: 2px;
  background: var(--cy-accent);
  margin: 16px 0 0;
}

.cy-map__text {
  font-size: 15px;
  font-weight: 700;
  line-height: 2;
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 28px;
}

.cy-btn--accent { background: var(--cy-accent); }
.cy-btn--accent:hover { background: var(--cy-accent-dark); box-shadow: 0 6px 16px rgba(200, 16, 46, 0.4); }

/* 実際の地図をそのまま見せるプレビュー。全体が /map/ へのリンク */
.cy-map__preview {
  position: relative;
  display: block;
  height: 300px;
  border-radius: var(--cy-radius);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
  background: rgba(255, 255, 255, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cy-map__preview:hover,
.cy-map__preview:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.36);
}

.cy-map-mini {
  position: absolute;
  inset: 0;
  background: #e8eaed;
}

.cy-map-mini__loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--cy-text-soft);
}

/* 地図側のクリックは殺し、リンクとして振る舞わせる */
.cy-map__preview .cy-map-mini { pointer-events: none; }

.cy-map__preview-badge {
  position: absolute;
  left: 14px; bottom: 14px;
  z-index: 2;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(20, 33, 61, 0.92);
  color: #ffffff;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

@media (prefers-reduced-motion: reduce) {
  .cy-map__preview { transition: none; }
  .cy-map__preview:hover, .cy-map__preview:focus-visible { transform: none; }
}

@media (max-width: 800px) {
  .cy-map__inner { grid-template-columns: 1fr; gap: 28px; }
  .cy-map { padding: 48px 0; }
  .cy-map__title { font-size: 24px; }
  .cy-map__preview { height: 230px; }
}

/* ==========================================================================
   旧ページビルダー製コンテンツの正規化
   固定ページの本文（WPBakery製）を新デザインに馴染ませる
   ========================================================================== */
:is(.cy-page-content, .cy-article__content) .vc_row,
:is(.cy-page-content, .cy-article__content) .vc_row-fluid {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

:is(.cy-page-content, .cy-article__content) .vc_column_container,
:is(.cy-page-content, .cy-article__content) .vc_column-inner,
:is(.cy-page-content, .cy-article__content) .wpb_column {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 過大な空白スペーサーを圧縮 */
:is(.cy-page-content, .cy-article__content) .vc_empty_space { height: 24px !important; }

/* 見出し */
:is(.cy-page-content, .cy-article__content) h2 {
  font-size: 24px;
  line-height: 1.65;
  border-left: 4px solid var(--cy-primary);
  padding: 4px 0 4px 16px;
  margin: 2.2em 0 1em;
  text-align: left;
}

/* セクションタイトル（block_title）は中央＋赤バーで統一 */
:is(.cy-page-content, .cy-article__content) .block_title { text-align: center; margin: 48px 0 20px; }

/* 赤バー無しの inner-only_text は本文リード用の小見出しなので一段小さく */
:is(.cy-page-content, .cy-article__content) .block_title.inner-only_text { margin: 32px 0 14px; }

:is(.cy-page-content, .cy-article__content) .block_title.inner-only_text .h1,
:is(.cy-page-content, .cy-article__content) .block_title.inner-only_text h2 {
  font-size: 21px !important;
  letter-spacing: 0.02em !important;
}

/* 見出しだけの行は下余白を殺し、続く内容と1つの塊に見せる */
:is(.cy-page-content, .cy-article__content) .vc_row:has(.block_title):not(:has(p)):not(:has(img)):not(:has(.vc_btn3-container)):not(:has(.cy-grid)) {
  margin-bottom: 0 !important;
}

:is(.cy-page-content, .cy-article__content) .block_title .h1,
:is(.cy-page-content, .cy-article__content) .block_title h2 {
  font-size: 28px !important;
  line-height: 1.6 !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  text-align: center !important;
  text-transform: none !important;
  letter-spacing: 0.06em !important;
}

:is(.cy-page-content, .cy-article__content) .block_title .divider { display: block; margin-top: 14px; }

:is(.cy-page-content, .cy-article__content) h3 { font-size: 21px; margin: 1.9em 0 0.8em; }
/* h4・h5 は指定が無く本文と同サイズだったため、階層に沿ったサイズを与える */
:is(.cy-page-content, .cy-article__content) h4 { font-size: 18.5px; line-height: 1.7; margin: 1.8em 0 0.7em; }
:is(.cy-page-content, .cy-article__content) h5 { font-size: 17px; line-height: 1.7; margin: 1.7em 0 0.6em; }

/* セクションタイトルの飾り（線と丸）は赤バー1本に */
:is(.cy-page-content, .cy-article__content) .block_title .divider .circle { display: none !important; }
:is(.cy-page-content, .cy-article__content) .block_title .divider .line {
  display: inline-block;
  width: 40px !important; height: 3px !important;
  border-radius: 2px;
  background: var(--cy-accent) !important;
}
:is(.cy-page-content, .cy-article__content) .block_title .divider .line + .line { display: none !important; }

/* 本文 */
:is(.cy-page-content, .cy-article__content) p { margin: 0 0 1.5em; }
:is(.cy-page-content, .cy-article__content) .wpb_text_column p:last-child { margin-bottom: 0; }

/* 画像 */
:is(.cy-page-content, .cy-article__content) img { border-radius: 10px; height: auto; }

/* 背景画像付きの行はカードとして見せる */
:is(.cy-page-content, .cy-article__content) .vc_row[style*="background-image"] {
  border-radius: var(--cy-radius);
  overflow: hidden;
  padding: 40px 28px !important;
  background-size: cover !important;
  background-position: center !important;
  margin-bottom: 28px !important;
}

/* ボタン */
:is(.cy-page-content, .cy-article__content) .vc_btn3,
:is(.cy-page-content, .cy-article__content) .btn-bt {
  display: inline-block;
  background: var(--cy-primary) !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 11px 30px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em;
  text-transform: none !important;
}

:is(.cy-page-content, .cy-article__content) .vc_btn3:hover,
:is(.cy-page-content, .cy-article__content) .btn-bt:hover { background: var(--cy-primary-dark) !important; color: #ffffff !important; }

:is(.cy-page-content, .cy-article__content) .btn-bt span,
:is(.cy-page-content, .cy-article__content) .btn-bt i { color: #ffffff !important; }

/* テーブル */
:is(.cy-page-content, .cy-article__content) table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  font-size: 14.5px;
  line-height: 1.9;
  background: #ffffff;
  border: 1px solid var(--cy-line);
  border-radius: 10px;
  overflow: hidden;
  margin: 0 0 1.6em;
}

:is(.cy-page-content, .cy-article__content) table th,
:is(.cy-page-content, .cy-article__content) table td {
  border: 0;
  border-bottom: 1px solid var(--cy-line);
  padding: 14px 18px;
  vertical-align: top;
  text-align: left;
}

:is(.cy-page-content, .cy-article__content) table tr:last-child th,
:is(.cy-page-content, .cy-article__content) table tr:last-child td { border-bottom: 0; }

/* 1列目は項目名として扱う */
:is(.cy-page-content, .cy-article__content) table td:first-child,
:is(.cy-page-content, .cy-article__content) table th:first-child {
  width: 26%;
  font-weight: 700;
  color: var(--cy-ink);
  background: var(--cy-bg-soft);
  border-right: 1px solid var(--cy-line);
}

@media (max-width: 600px) {
  :is(.cy-page-content, .cy-article__content) table td,
  :is(.cy-page-content, .cy-article__content) table th { display: block; width: 100% !important; }
  :is(.cy-page-content, .cy-article__content) table td:first-child {
    border-right: 0;
    padding-bottom: 6px;
    font-size: 13px;
  }
}

/* 埋め込み */
:is(.cy-page-content, .cy-article__content) iframe { max-width: 100%; border-radius: 10px; }

/* 旧テーマは写真の上に .bg-overlay（半透明の膜）を重ねて可読性を作る設計。
   その要素に位置指定が無いと膜が効かず写真が素通しになるため、ここで補う */
:is(.cy-page-content, .cy-article__content) .vc_row { position: relative; }

:is(.cy-page-content, .cy-article__content) .bg-overlay {
  position: absolute;
  inset: 0;
  border-radius: var(--cy-radius);
  pointer-events: none;
}

:is(.cy-page-content, .cy-article__content) .vc_row > .container,
:is(.cy-page-content, .cy-article__content) .vc_row > .section_clear { position: relative; z-index: 1; }

/* 文字色は .light（暗背景）/ .dark（明背景）の指定に従う */
:is(.cy-page-content, .cy-article__content) .dark,
:is(.cy-page-content, .cy-article__content) .dark p,
:is(.cy-page-content, .cy-article__content) .dark li { color: var(--cy-text); }

:is(.cy-page-content, .cy-article__content) .dark h1,
:is(.cy-page-content, .cy-article__content) .dark h2,
:is(.cy-page-content, .cy-article__content) .dark h3,
:is(.cy-page-content, .cy-article__content) .dark h4,
:is(.cy-page-content, .cy-article__content) .dark .h1 { color: var(--cy-ink); }

/* テーマ由来の .light（暗背景想定）も白文字を維持 */
:is(.cy-page-content, .cy-article__content) .light,
:is(.cy-page-content, .cy-article__content) .light p,
:is(.cy-page-content, .cy-article__content) .light li { color: #f0f0f0 !important; }

:is(.cy-page-content, .cy-article__content) .light h1,
:is(.cy-page-content, .cy-article__content) .light h2,
:is(.cy-page-content, .cy-article__content) .light h3,
:is(.cy-page-content, .cy-article__content) .light h4,
:is(.cy-page-content, .cy-article__content) .light .h1 { color: #ffffff !important; }

/* 旧ビルダーが左右に置いた「余白用の空カラム」を畳んで本文幅を活かす */
:is(.cy-page-content, .cy-article__content) .vc_col-sm-1:not(:has(.wpb_content_element)),
:is(.cy-page-content, .cy-article__content) .vc_col-sm-2:not(:has(.wpb_content_element)),
:is(.cy-page-content, .cy-article__content) .vc_col-sm-3:not(:has(.wpb_content_element)) {
  display: none !important;
}

/* 旧方式の width:100% !important は撤去。
   空カラムが非表示になった分は flex-grow が吸収するため不要で、
   これがあると sm-3+sm-9 のような2カラムが折り返してしまう */
:is(.cy-page-content, .cy-article__content) [class*="vc_col-sm-"] { float: none; }

/* 大きめの文字で書かれたステートメント行は太字で見せる */
:is(.cy-page-content, .cy-article__content) .wpb_text_column p[style*="font-size: 28px"],
:is(.cy-page-content, .cy-article__content) .wpb_text_column p[style*="font-size: 26px"],
:is(.cy-page-content, .cy-article__content) .wpb_text_column p[style*="font-size: 24px"],
:is(.cy-page-content, .cy-article__content) .wpb_text_column p[style*="font-size: 22px"],
:is(.cy-page-content, .cy-article__content) .wpb_text_column p[style*="font-size: 20px"] {
  font-weight: 900;
  color: var(--cy-ink);
  line-height: 1.6;
  letter-spacing: 0.04em;
  margin-bottom: 0.8em;
}

@media (max-width: 700px) {
  .cy-page-wrap { padding: 0 16px; }
}

/* 旧ブランド色（水色5%）の帯を新トーンのカードに置き換える */
:is(.cy-page-content, .cy-article__content) .vc_row[style*="rgba(36,164,219"],
:is(.cy-page-content, .cy-article__content) .vc_row[style*="rgba(36, 164, 219"] {
  background-color: rgba(29, 58, 110, 0.045) !important;
  border-radius: var(--cy-radius);
  padding: 40px 28px !important;
  margin: 8px 0 32px !important;
}

/* コンテンツ内のボタンはリンク下線を継承しない */
:is(.cy-page-content, .cy-article__content) .btn-bt,
:is(.cy-page-content, .cy-article__content) .vc_btn3 { text-decoration: none !important; }

/* ボタン内アイコンとラベルの間隔 */
:is(.cy-page-content, .cy-article__content) .btn-bt i { margin-left: 8px; }

/* ==========================================================================
   旧ビルダーの多カラム行を等高レイアウトに（画像・ボタンの位置揃え）
   12分割グリッドの幅と折り返しを保ちつつ、flexで列の高さを揃える。
   余白用の空カラムは非表示にし、余った幅は残りの列が比率通りに分け合う
   ========================================================================== */
:is(.cy-page-content, .cy-article__content) .section_clear {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  margin-left: -14px;
  margin-right: -14px;
}

:is(.cy-page-content, .cy-article__content) .section_clear > [class*="vc_col-sm-"] {
  float: none !important;
  margin: 0 !important;
  padding: 0 14px !important;
  flex-shrink: 1;
  min-width: 0;
}

:is(.cy-page-content, .cy-article__content) .section_clear > .vc_col-sm-1 { width: 8.3333%; flex-grow: 1; }
:is(.cy-page-content, .cy-article__content) .section_clear > .vc_col-sm-2 { width: 16.6667%; flex-grow: 2; }
:is(.cy-page-content, .cy-article__content) .section_clear > .vc_col-sm-3 { width: 25.0000%; flex-grow: 3; }
:is(.cy-page-content, .cy-article__content) .section_clear > .vc_col-sm-4 { width: 33.3333%; flex-grow: 4; }
:is(.cy-page-content, .cy-article__content) .section_clear > .vc_col-sm-5 { width: 41.6667%; flex-grow: 5; }
:is(.cy-page-content, .cy-article__content) .section_clear > .vc_col-sm-6 { width: 50.0000%; flex-grow: 6; }
:is(.cy-page-content, .cy-article__content) .section_clear > .vc_col-sm-7 { width: 58.3333%; flex-grow: 7; }
:is(.cy-page-content, .cy-article__content) .section_clear > .vc_col-sm-8 { width: 66.6667%; flex-grow: 8; }
:is(.cy-page-content, .cy-article__content) .section_clear > .vc_col-sm-9 { width: 75.0000%; flex-grow: 9; }
:is(.cy-page-content, .cy-article__content) .section_clear > .vc_col-sm-10 { width: 83.3333%; flex-grow: 10; }
:is(.cy-page-content, .cy-article__content) .section_clear > .vc_col-sm-11 { width: 91.6667%; flex-grow: 11; }
:is(.cy-page-content, .cy-article__content) .section_clear > .vc_col-sm-12 { width: 100.0000%; flex-grow: 12; }

/* 列の中身を縦フレックスにしてボタンを下端に揃える */
:is(.cy-page-content, .cy-article__content) .section_clear > [class*="vc_col-sm-"] > .wpb_wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
}

:is(.cy-page-content, .cy-article__content) .section_clear > [class*="vc_col-sm-"] > .wpb_wrapper > .vc_btn3-container,
:is(.cy-page-content, .cy-article__content) .section_clear > [class*="vc_col-sm-"] > .wpb_wrapper > .button {
  margin-top: auto;
  padding-top: 20px;
}

/* 多カラム内の画像は 3:2 の箱に収めて高さを揃える。
   写真(3:2が多数)はぴったり収まり、ロゴなど比率の違う画像も切れずに中央配置される */
:is(.cy-page-content, .cy-article__content) .section_clear > .vc_col-sm-3 .wpb_text_column img,
:is(.cy-page-content, .cy-article__content) .section_clear > .vc_col-sm-4 .wpb_text_column img,
:is(.cy-page-content, .cy-article__content) .section_clear > .vc_col-sm-6 .wpb_text_column img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: contain;
  object-position: center;
  display: block;
}

/* 列見出し（h5）を揃える */
:is(.cy-page-content, .cy-article__content) .section_clear > [class*="vc_col-sm-"] h5 {
  font-size: 17px;
  font-weight: 900;
  text-align: center !important;
  margin: 0 0 14px;
}

/* ボタンは幅を揃えて中央に */
:is(.cy-page-content, .cy-article__content) .vc_btn3-container { text-align: center; margin-bottom: 0; }
:is(.cy-page-content, .cy-article__content) .vc_btn3-container.vc_btn3-left { text-align: left; }
:is(.cy-page-content, .cy-article__content) .vc_btn3-container.vc_btn3-right { text-align: right; }

:is(.cy-page-content, .cy-article__content) .vc_btn3 {
  min-width: 190px;
  text-align: center;
  font-size: 14px !important;
}

@media (max-width: 700px) {
  :is(.cy-page-content, .cy-article__content) .section_clear > [class*="vc_col-sm-"] { width: 100% !important; }
}

/* ==========================================================================
   写真背景の行の扱い
   ・淡い写真の上に濃い文字を置いていた行（.light 無し）は、写真が
     洗い流されて見えるため、写真を外して淡い紺のバンドに置き換える
   ・「暗い写真＋黒い膜＋白文字」で作られていた行（.light あり）は、
     その設計のまま写真と膜を活かす。ここで写真を外すと白文字だけが
     淡い背景に残って読めなくなる
   ========================================================================== */
:is(.cy-page-content, .cy-article__content) .vc_row[style*="background-image"]:not(:has(.light)) {
  background-image: none !important;
  background-color: rgba(29, 58, 110, 0.05) !important;
  border-radius: var(--cy-radius);
  padding: 44px 48px !important;
  margin: 8px 0 32px !important;
}

:is(.cy-page-content, .cy-article__content) .vc_row[style*="background-image"]:not(:has(.light))::before,
:is(.cy-page-content, .cy-article__content) .vc_row[style*="background-image"]:not(:has(.light)) .bg-overlay { display: none !important; }

/* 暗い写真背景の行: 写真をカードいっぱいに敷き、膜で可読性を確保する */
:is(.cy-page-content, .cy-article__content) .vc_row[style*="background-image"]:has(.light) {
  border-radius: var(--cy-radius);
  overflow: hidden;
  padding: 56px 48px !important;
  margin: 8px 0 32px !important;
  background-size: cover !important;
  background-position: center !important;
}

@media (max-width: 700px) {
  :is(.cy-page-content, .cy-article__content) .vc_row[style*="background-image"]:has(.light) { padding: 40px 24px !important; }
}

/* バンド内は中央揃えのCTAとして成立させる */
:is(.cy-page-content, .cy-article__content) .vc_row[style*="background-image"] .wpb_text_column p,
:is(.cy-page-content, .cy-article__content) .vc_row[style*="background-image"] h1,
:is(.cy-page-content, .cy-article__content) .vc_row[style*="background-image"] h2,
:is(.cy-page-content, .cy-article__content) .vc_row[style*="background-image"] h3,
:is(.cy-page-content, .cy-article__content) .vc_row[style*="background-image"] h4 {
  text-align: center !important;
}

:is(.cy-page-content, .cy-article__content) .vc_row[style*="background-image"] h2,
:is(.cy-page-content, .cy-article__content) .vc_row[style*="background-image"] h3,
:is(.cy-page-content, .cy-article__content) .vc_row[style*="background-image"] h4 {
  border-left: 0 !important;
  padding-left: 0 !important;
  margin-top: 0 !important;
}

/* バンド内の余白を詰める */
:is(.cy-page-content, .cy-article__content) .vc_row[style*="background-image"] .vc_empty_space { height: 12px !important; }
:is(.cy-page-content, .cy-article__content) .vc_row[style*="background-image"] .wpb_text_column { margin-bottom: 12px !important; }
:is(.cy-page-content, .cy-article__content) .vc_row[style*="background-image"] .wpb_text_column p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   背景色つきの帯（cy-band / functions.php で付与）
   WPBakery が上下 padding だけをインラインで出すため文字が帯の端に接する。
   左右にも余白を入れ、上下も対称にそろえてカードとして成立させる。
   -------------------------------------------------------------------------- */
:is(.cy-page-content, .cy-article__content) .vc_row.cy-band {
  border-radius: var(--cy-radius);
  padding: 48px !important;
  margin: 8px 0 32px !important;
}

/* 帯の中の段組は、行の負マージン（溝用の -14px）が帯の padding を
   食ってしまうので打ち消す。列側の padding が溝として残る */
:is(.cy-page-content, .cy-article__content) .vc_row.cy-band :is(.section_clear, .vc_row.vc_inner) {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* 背景画像の帯も同じ扱いにする */
:is(.cy-page-content, .cy-article__content) .vc_row[style*="background-image"] :is(.section_clear, .vc_row.vc_inner) {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* 帯の中の過大な余白を詰める */
:is(.cy-page-content, .cy-article__content) .vc_row.cy-band .vc_empty_space { height: 12px !important; }
:is(.cy-page-content, .cy-article__content) .vc_row.cy-band .wpb_text_column { margin-bottom: 16px !important; }
:is(.cy-page-content, .cy-article__content) .vc_row.cy-band > *:last-child,
:is(.cy-page-content, .cy-article__content) .vc_row.cy-band .wpb_text_column p:last-child,
:is(.cy-page-content, .cy-article__content) .vc_row.cy-band .wpb_wrapper > *:last-child { margin-bottom: 0 !important; }

/* 帯の中の画像は角丸をそろえる */
:is(.cy-page-content, .cy-article__content) .vc_row.cy-band img { border-radius: 10px; }

/* ==========================================================================
   ボタンと行間の統一（旧ビルダーは vc_btn3 と btn-bt の2系統が混在し
   サイズ・高さがばらついていた）
   ========================================================================== */
:is(.cy-page-content, .cy-article__content) .vc_btn3,
:is(.cy-page-content, .cy-article__content) .btn-bt {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 210px;
  min-height: 48px;
  padding: 12px 30px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  letter-spacing: 0.04em;
  border-radius: 999px !important;
  text-align: center;
  box-sizing: border-box;
}

:is(.cy-page-content, .cy-article__content) .btn-bt i { margin-left: 0; }
:is(.cy-page-content, .cy-article__content) .btn-bt span { display: inline; }

/* 旧CSSの継承でボタン内アイコンがブロック化して2行目に落ちるのを防ぐ */
:is(.cy-page-content, .cy-article__content) :is(.vc_btn3, .btn-bt) i {
  display: inline !important;
  margin-left: 8px !important;
}

/* 旧テーマのボタン(.btn-bt)は align-* クラスで寄せを指定している。
   上の共通指定で inline-flex になるとインライン要素になり auto マージンが
   効かなくなるため、ブロックレベルの flex に切り替えて中央／右寄せを効かせる */
:is(.cy-page-content, .cy-article__content) .btn-bt.align-center {
  display: flex !important;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

:is(.cy-page-content, .cy-article__content) .btn-bt.align-right {
  display: flex !important;
  width: fit-content;
  margin-left: auto;
  margin-right: 0;
}

:is(.cy-page-content, .cy-article__content) .btn-bt.align-left {
  display: flex !important;
  width: fit-content;
  margin-left: 0;
  margin-right: auto;
}

/* 行（セクション）の間隔を確保 */
:is(.cy-page-content, .cy-article__content) .wpb-content-wrapper > .vc_row { margin-bottom: 44px; }
:is(.cy-page-content, .cy-article__content) .wpb-content-wrapper > .vc_row:last-child { margin-bottom: 0; }

/* ボタン直前に余白、直後は行の間隔に任せる */
:is(.cy-page-content, .cy-article__content) .vc_btn3-container,
:is(.cy-page-content, .cy-article__content) .wpb_content_element.button { margin: 20px 0 0; }

/* 画像ブロックと本文の間隔 */
:is(.cy-page-content, .cy-article__content) .wpb_text_column { margin-bottom: 20px; }
:is(.cy-page-content, .cy-article__content) .wpb_text_column:last-child { margin-bottom: 0; }

/* 列見出し（column_title）は左揃え＝写真横のプロフィール名などに使われる */
:is(.cy-page-content, .cy-article__content) .block_title.column_title { text-align: left; margin: 0 0 12px; }

:is(.cy-page-content, .cy-article__content) .block_title.column_title .h1,
:is(.cy-page-content, .cy-article__content) .block_title.column_title h2 {
  text-align: left !important;
  font-size: 20px !important;
}

:is(.cy-page-content, .cy-article__content) .block_title.column_title .divider { display: none; }

/* プロフィール写真（block_title と並ぶ小カラム）は元の比率のまま */
:is(.cy-page-content, .cy-article__content) .section_clear > .vc_col-sm-2 img { border-radius: 10px; aspect-ratio: auto; object-fit: contain; }
:is(.cy-page-content, .cy-article__content) .section_clear > .vc_col-sm-3 img { border-radius: 10px; }

/* ==========================================================================
   入れ子の行（vc_row.vc_inner）も同じ規則で等高に
   ========================================================================== */
:is(.cy-page-content, .cy-article__content) .vc_row.vc_inner {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  margin: 0 -14px 24px;
}

:is(.cy-page-content, .cy-article__content) .vc_row.vc_inner > .wpb_column {
  float: none !important;
  margin: 0 !important;
  padding: 0 14px !important;
  flex-shrink: 1;
  min-width: 0;
}

:is(.cy-page-content, .cy-article__content) .vc_row.vc_inner > .wpb_column > .vc_column-inner { height: 100%; padding: 0 !important; }

:is(.cy-page-content, .cy-article__content) .vc_row.vc_inner > .vc_col-sm-1 { width: 8.3333%; flex-grow: 1; }
:is(.cy-page-content, .cy-article__content) .vc_row.vc_inner > .vc_col-sm-2 { width: 16.6667%; flex-grow: 2; }
:is(.cy-page-content, .cy-article__content) .vc_row.vc_inner > .vc_col-sm-3 { width: 25.0000%; flex-grow: 3; }
:is(.cy-page-content, .cy-article__content) .vc_row.vc_inner > .vc_col-sm-4 { width: 33.3333%; flex-grow: 4; }
:is(.cy-page-content, .cy-article__content) .vc_row.vc_inner > .vc_col-sm-5 { width: 41.6667%; flex-grow: 5; }
:is(.cy-page-content, .cy-article__content) .vc_row.vc_inner > .vc_col-sm-6 { width: 50.0000%; flex-grow: 6; }
:is(.cy-page-content, .cy-article__content) .vc_row.vc_inner > .vc_col-sm-7 { width: 58.3333%; flex-grow: 7; }
:is(.cy-page-content, .cy-article__content) .vc_row.vc_inner > .vc_col-sm-8 { width: 66.6667%; flex-grow: 8; }
:is(.cy-page-content, .cy-article__content) .vc_row.vc_inner > .vc_col-sm-9 { width: 75.0000%; flex-grow: 9; }
:is(.cy-page-content, .cy-article__content) .vc_row.vc_inner > .vc_col-sm-10 { width: 83.3333%; flex-grow: 10; }
:is(.cy-page-content, .cy-article__content) .vc_row.vc_inner > .vc_col-sm-11 { width: 91.6667%; flex-grow: 11; }
:is(.cy-page-content, .cy-article__content) .vc_row.vc_inner > .vc_col-sm-12 { width: 100.0000%; flex-grow: 12; }

/* 入れ子行の画像も 3:2 の箱に収める（ロゴを切らない） */
:is(.cy-page-content, .cy-article__content) .vc_row.vc_inner > .vc_col-sm-3 img,
:is(.cy-page-content, .cy-article__content) .vc_row.vc_inner > .vc_col-sm-4 img,
:is(.cy-page-content, .cy-article__content) .vc_row.vc_inner > .vc_col-sm-6 img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: contain;
  object-position: center;
  display: block;
}

@media (max-width: 700px) {
  :is(.cy-page-content, .cy-article__content) .vc_row.vc_inner > .wpb_column { width: 100% !important; }
}

/* ==========================================================================
   旧テーマ由来の細かな要素の後始末
   ========================================================================== */
/* WPBakeryのボタンアイコンは絶対配置でラベルに重なるため、通常配置に戻す */
:is(.cy-page-content, .cy-article__content) .vc_btn3-icon {
  position: static !important;
  margin: 0 !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  transform: none !important;
}

/* 旧テーマ専用アイコンフォント（未読込で文字化けする）は隠す */
:is(.cy-page-content, .cy-article__content) i[class*="steadysets"],
:is(.cy-page-content, .cy-article__content) i[class*="moon-"],
:is(.cy-page-content, .cy-article__content) i[class*="linecon"],
:is(.cy-page-content, .cy-article__content) i[class*="typcn"] { display: none !important; }

/* メディア要素（media_el）の画像はカラム幅いっぱいに */
:is(.cy-page-content, .cy-article__content) .media_wrapper { width: 100%; }

:is(.cy-page-content, .cy-article__content) .media_wrapper img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
}

/* 画像だけの列が縦に伸びすぎないように */
:is(.cy-page-content, .cy-article__content) .media_el { margin-bottom: 0; }

/* ==========================================================================
   モバイルのタイポグラフィ調整
   小さな画面では見出し・本文とも一段小さくして情報量と可読性を両立させる
   ========================================================================== */
@media (max-width: 600px) {
  body { font-size: 15px; }

  /* 記事・プロジェクト詳細 */
  .cy-article__title { font-size: 20px; line-height: 1.55; margin-bottom: 18px; }
  .cy-article__content { font-size: 15px; line-height: 1.95; }
  .cy-article__content p { margin-bottom: 1.5em; }
  .cy-article__content h2 { font-size: 20px; padding-left: 12px; border-left-width: 3px; margin: 2em 0 0.9em; }
  .cy-article__content h3 { font-size: 18px; margin: 1.8em 0 0.7em; }
  .cy-article__content blockquote { font-size: 14.5px; padding: 14px 16px; }
  .cy-article__meta { margin-bottom: 10px; }
  .cy-article__thumb { margin-bottom: 22px; }

  /* 固定ページ本文 */
  .cy-page-content { font-size: 15px; line-height: 1.95; }
  :is(.cy-page-content, .cy-article__content) .vc_row.cy-band,
  :is(.cy-page-content, .cy-article__content) .vc_row[style*="background-image"] { padding: 28px 22px !important; margin-bottom: 24px !important; }
  :is(.cy-page-content, .cy-article__content) h2 { font-size: 20px; }
  :is(.cy-page-content, .cy-article__content) h3 { font-size: 18px; }
  :is(.cy-page-content, .cy-article__content) h4 { font-size: 17px; }
  :is(.cy-page-content, .cy-article__content) h5 { font-size: 16px; }
  :is(.cy-page-content, .cy-article__content) .block_title .h1,
  :is(.cy-page-content, .cy-article__content) .block_title h2 { font-size: 23px !important; }

  /* カード */
  .cy-card__title { font-size: 16px; line-height: 1.6; }
  .cy-card__excerpt { font-size: 13px; }
  .cy-card__body { padding: 16px 18px 18px; }

  /* ヘッダーロゴを控えめに。ボタン4つ（Aa・テーマ・検索・メニュー）と
     並んでも横にあふれないよう、ロゴ側だけ縮められるようにする */
  .cy-header__inner { height: 62px; padding: 0 12px; gap: 8px; }
  .cy-header__logo { flex-shrink: 1; min-width: 0; }
  .cy-header__logo img {
    height: 23px;
    max-width: 100%;
    object-fit: contain;
    object-position: left center;
  }
  .cy-nav { top: 62px; max-height: calc(100vh - 62px); }
  .cy-icon-btn { width: 38px; height: 38px; }
  .cy-header__tools { gap: 0; }
  .cy-searchform { flex-direction: column; }
  .cy-searchform__submit { justify-content: center; }

  /* 関連記事セクション */
  .cy-related__title { font-size: 18px; }
}

/* ==========================================================================
   シェアボタン
   ========================================================================== */
.cy-share {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--cy-line);
}

.cy-share__label { font-size: 13px; font-weight: 700; color: var(--cy-text-soft); letter-spacing: 0.04em; }

.cy-share__list { list-style: none; display: flex; gap: 10px; margin: 0; padding: 0; }

.cy-share__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--cy-primary);
  color: #ffffff;
  cursor: pointer;
  padding: 0;
  transition: transform 0.15s ease, background 0.2s ease;
}

.cy-share__btn:hover { transform: translateY(-2px); background: var(--cy-primary-dark); color: #ffffff; }
.cy-share__btn svg { width: 17px; height: 17px; fill: currentColor; display: block; }
.cy-share__btn--copy { background: var(--cy-text-soft); }
.cy-share__btn--copy:hover { background: var(--cy-ink); }

.cy-share__copied {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background: var(--cy-ink);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 6px;
}

@media (max-width: 600px) {
  .cy-share { margin-top: 32px; padding-top: 22px; gap: 12px; }
}

/* ==========================================================================
   404ページ
   ========================================================================== */
.cy-404 {
  background: #ffffff;
  border-radius: var(--cy-radius);
  box-shadow: var(--cy-shadow);
  padding: 48px 32px 44px;
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}

/* 空状態のマーク（404・検索0件共通）: 軌道の輪の中にラベルを置く */
.cy-empty-mark {
  position: relative;
  width: 148px;
  height: 148px;
  margin: 0 auto;
  color: var(--cy-primary);
}

.cy-empty-mark svg { position: absolute; inset: 0; width: 100%; height: 100%; }

.cy-empty-mark__spin {
  transform-origin: 60px 60px;
  animation: cy-empty-spin 32s linear infinite;
}

@keyframes cy-empty-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .cy-empty-mark__spin { animation: none; }
}

.cy-empty-mark__dot { fill: var(--cy-accent); }

.cy-empty-mark__label {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 36px;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1;
  color: var(--cy-primary);
}

.cy-404__lead { font-size: 16px; font-weight: 700; color: var(--cy-ink); margin: 22px 0 6px; }
.cy-404__hint { font-size: 14px; color: var(--cy-text-soft); margin: 0 0 26px; }

.cy-404__search { max-width: 520px; margin: 0 auto 28px; }

.cy-404__links {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 10px;
  margin: 0;
  padding: 0;
}

.cy-404__links a {
  display: inline-block;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--cy-primary);
  background: var(--cy-bg-soft);
  border: 1px solid var(--cy-line);
  border-radius: 999px;
  padding: 9px 18px;
}

.cy-404__links a:hover { background: var(--cy-primary); border-color: var(--cy-primary); color: #ffffff; }

@media (max-width: 600px) {
  .cy-404 { padding: 34px 20px 32px; }
  .cy-empty-mark { width: 120px; height: 120px; }
  .cy-empty-mark__label { font-size: 30px; }
  .cy-404__lead { font-size: 15px; }
}

/* ==========================================================================
   前後の記事ナビゲーション
   ========================================================================== */
.cy-postnav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 28px;
}

.cy-postnav__item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #ffffff;
  border-radius: var(--cy-radius);
  box-shadow: var(--cy-shadow);
  padding: 18px 22px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cy-postnav__item:hover { transform: translateY(-2px); box-shadow: var(--cy-shadow-hover); }

.cy-postnav__item--next { text-align: right; grid-column: 2; }

.cy-postnav__dir {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--cy-accent);
}

.cy-postnav__item--prev .cy-postnav__dir::before { content: '← '; }
.cy-postnav__item--next .cy-postnav__dir::after { content: ' →'; }

.cy-postnav__title {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.65;
  color: var(--cy-ink);
}

.cy-postnav__item:hover .cy-postnav__title { color: var(--cy-primary); }

@media (max-width: 600px) {
  .cy-postnav { grid-template-columns: 1fr; gap: 12px; }
  .cy-postnav__item--next { grid-column: 1; text-align: left; }
  .cy-postnav__item { padding: 14px 18px; }
  .cy-postnav__title { font-size: 13.5px; }
}

/* ==========================================================================
   タップ領域の確保（モバイル）
   フッターリンク等が高さ20pxで誤タップしやすかったため
   ========================================================================== */
.cy-footer a { display: inline-block; }

/* SNSアイコンは中央揃えのままにする（上の inline-block に上書きされないよう再指定） */
.cy-footer__social a { display: flex; align-items: center; justify-content: center; }

@media (max-width: 900px) {
  .cy-footer ul li { margin-bottom: 2px; }

  .cy-footer ul li a {
    display: block;
    min-height: 44px;
    line-height: 44px;
    padding: 0 4px;
  }

  .cy-footer__social a { width: 44px; height: 44px; }

  /* 記事下のタグも押しやすく */
  .cy-article__tags a { padding: 9px 16px; }

  /* パンくずのリンク */
  .cy-breadcrumb a { display: inline-block; padding: 4px 0; }
}

/* ==========================================================================
   アクセシビリティの仕上げ
   ========================================================================== */
/* キーボード操作時のフォーカスを全ての操作要素で可視化 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--cy-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* カード全体リンクでもフォーカス位置が分かるように */
.cy-card:focus-within { box-shadow: var(--cy-shadow-hover); }
.cy-card:focus-within .cy-card__title a { color: var(--cy-primary); }

/* 視覚効果を減らす設定を尊重する */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .cy-card:hover,
  .cy-postnav__item:hover,
  .cy-share__btn:hover { transform: none; }
  .cy-card:hover .cy-card__media img { transform: none; }
}

/* ==========================================================================
   著者・更新日
   ========================================================================== */
.cy-article__author {
  font-size: 13px;
  font-weight: 700;
  color: var(--cy-text-soft);
}

.cy-article__author::before {
  content: '';
  display: inline-block;
  width: 1px; height: 12px;
  background: var(--cy-line);
  margin-right: 12px;
  vertical-align: -1px;
}

.cy-article__updated {
  display: inline-block;
  margin-left: 10px;
  font-size: 12px;
  color: var(--cy-text-soft);
}

.cy-author {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  margin-top: 32px;
  padding: 22px;
  background: var(--cy-bg-soft);
  border-radius: var(--cy-radius);
}

.cy-author__avatar { flex-shrink: 0; }

.cy-author__avatar img {
  width: 64px; height: 64px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.cy-author__label {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--cy-accent);
  margin-bottom: 4px;
}

.cy-author__name { font-size: 15.5px; font-weight: 900; color: var(--cy-ink); margin: 0 0 6px; }
.cy-author__bio { font-size: 13px; line-height: 1.85; color: var(--cy-text-soft); margin: 0; }

@media (max-width: 600px) {
  .cy-author { gap: 14px; padding: 18px; margin-top: 26px; }
  .cy-author__avatar img { width: 52px; height: 52px; }
  .cy-author__name { font-size: 14.5px; }
  .cy-author__bio { font-size: 12.5px; }
  .cy-article__author::before { margin-right: 8px; }
}

/* ==========================================================================
   カテゴリ絞り込みタブ
   ========================================================================== */
.cy-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 32px;
}

.cy-tabs__item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 42px;
  padding: 0 18px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid var(--cy-line);
  color: var(--cy-text);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.cy-tabs__item:hover {
  border-color: var(--cy-primary);
  color: var(--cy-primary);
}

.cy-tabs__item.is-current {
  background: var(--cy-primary);
  border-color: var(--cy-primary);
  color: #ffffff;
}

.cy-tabs__count {
  font-size: 11px;
  font-weight: 700;
  color: var(--cy-text-soft);
  background: var(--cy-bg-soft);
  border-radius: 999px;
  padding: 2px 8px;
  min-width: 26px;
  text-align: center;
}

.cy-tabs__item.is-current .cy-tabs__count { background: rgba(255, 255, 255, 0.22); color: #ffffff; }

@media (max-width: 700px) {
  /* 横スクロールで全カテゴリに届くように */
  .cy-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 -16px 24px;
    padding: 0 16px 4px;
  }
  .cy-tabs::-webkit-scrollbar { display: none; }
  .cy-tabs__item { flex-shrink: 0; }
}

/* トップ: セクションの背景に濃淡をつけてリズムを作る */
.cy-section--tint { background: #ffffff; }

/* ==========================================================================
   プロジェクトの絞り込み（業界 × 循環原則）
   ========================================================================== */
.cy-filter {
  background: #ffffff;
  border-radius: var(--cy-radius);
  box-shadow: var(--cy-shadow);
  padding: 20px 24px;
  margin-bottom: 32px;
}

.cy-filter__row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--cy-line);
}

.cy-filter__row:first-child { padding-top: 0; }
.cy-filter__row:last-of-type { border-bottom: 0; padding-bottom: 0; }

.cy-filter__label {
  flex-shrink: 0;
  width: 84px;
  font-size: 13px;
  font-weight: 900;
  color: var(--cy-ink);
  letter-spacing: 0.06em;
  padding-top: 9px;
}

.cy-filter__label::after {
  content: '';
  display: block;
  width: 22px; height: 3px;
  border-radius: 2px;
  background: var(--cy-accent);
  margin-top: 6px;
}

.cy-filter__items { display: flex; flex-wrap: wrap; gap: 8px; }

.cy-filter__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--cy-line);
  background: #ffffff;
  color: var(--cy-text);
  font-size: 13px;
  font-weight: 700;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.cy-filter__item:hover { border-color: var(--cy-primary); color: var(--cy-primary); }

.cy-filter__item.is-current {
  background: var(--cy-primary);
  border-color: var(--cy-primary);
  color: #ffffff;
}

.cy-filter__count {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--cy-text-soft);
  background: var(--cy-bg-soft);
  border-radius: 999px;
  padding: 1px 7px;
}

.cy-filter__item.is-current .cy-filter__count { background: rgba(255, 255, 255, 0.22); color: #ffffff; }

.cy-filter__status {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--cy-line);
}

.cy-filter__found { font-size: 13.5px; color: var(--cy-text-soft); }
.cy-filter__found strong { font-size: 16px; font-weight: 900; color: var(--cy-ink); margin-right: 2px; }

.cy-filter__reset {
  font-size: 13px;
  font-weight: 700;
  color: var(--cy-accent);
}

.cy-filter__reset::before { content: '× '; }
.cy-filter__reset:hover { color: var(--cy-accent-dark); text-decoration: underline; }

@media (max-width: 700px) {
  .cy-filter { padding: 14px 14px 16px; }
  .cy-filter__row { flex-direction: column; gap: 8px; padding: 10px 0; }

  .cy-filter__label {
    width: auto;
    padding-top: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
  }

  .cy-filter__label::after { margin-top: 0; width: 18px; height: 2px; }

  /* チップを小さくして1行に多く収める */
  .cy-filter__items { gap: 6px; }

  .cy-filter__item {
    min-height: 32px;
    padding: 0 11px;
    font-size: 11.5px;
    gap: 5px;
  }

  .cy-filter__count { font-size: 9.5px; padding: 1px 5px; }

  .cy-filter__status { margin-top: 12px; padding-top: 12px; gap: 12px; }
  .cy-filter__found { font-size: 12.5px; }
  .cy-filter__found strong { font-size: 14.5px; }
  .cy-filter__reset { font-size: 12px; }
}

/* ==========================================================================
   プロジェクトの分類ラベル（業界・循環原則）
   ========================================================================== */
.cy-card__terms {
  position: relative;
  z-index: 3; /* カード全面リンクの上に出してクリック可能にする */
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  /* カード下端に寄せる。ラベル数が違ってもタイトル位置がずれない */
  margin-top: auto;
  padding-top: 14px;
}

/* 画像上のバッジ（プロジェクトは業界を表示）。複数ある場合は縦に積む */
.cy-card__badges {
  position: absolute;
  top: 0; right: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
}

.cy-card__badges .cy-card__badge { position: static; }

.cy-term {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.5;
  padding: 4px 11px;
  border-radius: 999px;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* 業界: 控えめ（輪郭のみ） */
.cy-term--sector {
  color: var(--cy-primary);
  background: #ffffff;
  border: 1px solid var(--cy-primary);
}

.cy-term--sector:hover { background: var(--cy-primary); color: #ffffff; }

/* 循環原則: 主役（塗り） */
.cy-term--rule {
  color: #ffffff;
  background: var(--cy-primary);
  border: 1px solid var(--cy-primary);
}

.cy-term--rule:hover { background: var(--cy-primary-dark); border-color: var(--cy-primary-dark); color: #ffffff; }

/* プロジェクト詳細では少し大きめに */
.cy-article .cy-card__terms { margin: -10px 0 24px; padding-top: 0; }
.cy-article .cy-term { font-size: 12.5px; padding: 5px 14px; }

@media (max-width: 600px) {
  .cy-term { font-size: 11px; padding: 3px 9px; }
}

/* 中間幅（タブレット〜小さめのPC） */
@media (min-width: 701px) and (max-width: 1100px) {
  .cy-hero { min-height: 560px; }
  .cy-hero__title { font-size: 34px; }
  .cy-hero__tagline { font-size: 16px; }
}

/* ==========================================================================
   プロフィール写真（150px角のサムネイル）
   ========================================================================== */
/* 多カラム内の3:2ルールより優先させるため、同じ階層まで書いて特定度を上げる */
:is(.cy-page-content, .cy-article__content) .section_clear [class*="vc_col-sm-"] .wpb_text_column img.size-thumbnail,
:is(.cy-page-content, .cy-article__content) .wpb_text_column img.size-thumbnail {
  width: 128px;
  height: 128px;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  margin: 0 auto 0 0; /* 左寄せ（aligncenter の中央寄せを打ち消す） */
}

/* スマホ（766px 以下で段組が縦積みになる）では写真を中央に置き、
   氏名との間に余白を取ってプロフィールとして1つの塊に見せる */
@media (max-width: 766px) {
  :is(.cy-page-content, .cy-article__content) .section_clear [class*="vc_col-sm-"] .wpb_text_column img.size-thumbnail,
  :is(.cy-page-content, .cy-article__content) .wpb_text_column img.size-thumbnail {
    width: 120px;
    height: 120px;
    margin: 0 auto; /* 中央寄せ。氏名との余白は段組の row-gap で確保する */
  }

  /* 縦積みになった段組の間に余白を入れる（画像や写真が密着するのを防ぐ） */
  :is(.cy-page-content, .cy-article__content) .section_clear,
  :is(.cy-page-content, .cy-article__content) .vc_row.vc_inner {
    row-gap: 26px;
  }

  /* 写真を含む段組だけ、氏名と写真の段落を中央揃えにする（本文は左揃えのまま） */
  /* .block_title.column_title 側が text-align:left !important なので同じ強さで上書きする */
  :is(.cy-page-content, .cy-article__content) .section_clear:has(img.size-thumbnail) [class*="vc_col-sm-"] .block_title,
  :is(.cy-page-content, .cy-article__content) .section_clear:has(img.size-thumbnail) [class*="vc_col-sm-"] .block_title.column_title,
  :is(.cy-page-content, .cy-article__content) .section_clear:has(img.size-thumbnail) [class*="vc_col-sm-"] .block_title :is(h1, h2, h3, h4, h5, h6),
  :is(.cy-page-content, .cy-article__content) .section_clear:has(img.size-thumbnail) [class*="vc_col-sm-"] .block_title .h1,
  :is(.cy-page-content, .cy-article__content) .section_clear:has(img.size-thumbnail) [class*="vc_col-sm-"] .wpb_text_column p:has(> img.size-thumbnail) {
    text-align: center !important;
  }

  /* 氏名の下にも余白を入れて本文と分ける */
  :is(.cy-page-content, .cy-article__content) .section_clear:has(img.size-thumbnail) [class*="vc_col-sm-"] .block_title,
  :is(.cy-page-content, .cy-article__content) .section_clear:has(img.size-thumbnail) [class*="vc_col-sm-"] .block_title.column_title {
    margin: 0 0 14px;
  }

  /* 写真だけの段は下側の余白を詰めて、氏名との距離を img の margin で制御する */
  :is(.cy-page-content, .cy-article__content) .section_clear:has(img.size-thumbnail) [class*="vc_col-sm-"] .wpb_text_column p:has(> img.size-thumbnail) {
    margin-bottom: 0;
  }
}

/* ==========================================================================
   折り返しはブラウザ既定のまま（日本語の改行制御はしない）。
   長いURL等が版面からはみ出すのだけ防ぐ
   ========================================================================== */
:is(.cy-page-content, .cy-article__content) p,
.cy-card__excerpt {
  overflow-wrap: break-word;
}

/* 言語切替（切り替え先のみ表示）を控えめに見せる */
.cy-nav .lang-item > a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--cy-text-soft);
}

.cy-nav .lang-item > a:hover { color: var(--cy-primary); }
.cy-nav .lang-item img { width: 16px; height: auto; border-radius: 2px; display: block; }

/* ==========================================================================
   ページトップへ戻るボタン（右下固定）
   ========================================================================== */
.cy-totop {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 90;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: var(--cy-primary);
  color: #ffffff;
  cursor: pointer;
  padding: 0;
  box-shadow: 0 8px 22px rgba(20, 33, 61, 0.28);
  /* 表示前は当たり判定も無効にしておく */
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease, background-color 0.18s ease;
}

.cy-totop.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.cy-totop:hover,
.cy-totop:focus-visible { background: var(--cy-accent); }

.cy-totop svg { width: 20px; height: 20px; fill: currentColor; display: block; }

@media (max-width: 600px) {
  .cy-totop {
    right: 14px;
    bottom: 14px;
    width: 44px;
    height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cy-totop { transition: opacity 0.01ms linear; transform: none; }
  .cy-totop.is-visible { transform: none; }
}

/* ==========================================================================
   Yokohama Circular Map
   ========================================================================== */
.cy-map-app {
  background: #ffffff;
  border-radius: var(--cy-radius);
  box-shadow: var(--cy-shadow);
  padding: 22px 22px 24px;
  margin-bottom: 36px;
}

/* 検索と現在地 */
.cy-map-app__bar {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.cy-map-search {
  position: relative;
  flex: 1 1 280px;
  min-width: 0;
}

.cy-map-search__icon {
  position: absolute;
  left: 14px; top: 50%;
  transform: translateY(-50%);
  width: 18px; height: 18px;
  fill: var(--cy-text-soft);
  pointer-events: none;
}

.cy-map-search__input {
  width: 100%;
  height: 46px;
  padding: 0 40px 0 42px;
  border: 1.5px solid var(--cy-line);
  border-radius: 999px;
  font: inherit;
  font-size: 15px;
  background: #ffffff;
  color: var(--cy-text);
}

.cy-map-search__input:focus-visible { outline: 2px solid var(--cy-primary); outline-offset: 1px; }

.cy-map-search__clear {
  position: absolute;
  right: 8px; top: 50%;
  transform: translateY(-50%);
  width: 30px; height: 30px;
  border: 0; border-radius: 50%;
  background: var(--cy-bg-soft);
  color: var(--cy-text);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}

.cy-map-geo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  padding: 0;
  border-radius: 12px;
}

.cy-map-geo svg { width: 19px; height: 19px; fill: currentColor; }
.cy-map-geo .cy-map-geo__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.cy-map-geo[disabled] { opacity: 0.6; cursor: progress; }

/* カテゴリチップ */
.cy-map-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

/* 既定で隠しているカテゴリがあることを伝える一文 */
.cy-map-filters__note {
  margin: -6px 0 16px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--cy-text-soft);
}

.cy-map-chip {
  --chip: var(--cy-primary);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 14px;
  border: 1.5px solid var(--cy-line);
  border-radius: 999px;
  background: #ffffff;
  color: var(--cy-text);
  font: inherit;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.cy-map-chip__dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--chip);
  flex-shrink: 0;
}

.cy-map-chip__n {
  font-size: 12px;
  font-weight: 700;
  color: var(--cy-text-soft);
  background: var(--cy-bg-soft);
  border-radius: 999px;
  padding: 1px 8px;
}

.cy-map-chip:hover { border-color: var(--chip); }

.cy-map-chip.is-on {
  background: var(--chip);
  border-color: var(--chip);
  color: #ffffff;
}

.cy-map-chip.is-on .cy-map-chip__dot { background: #ffffff; }
.cy-map-chip.is-on .cy-map-chip__n { background: rgba(255, 255, 255, 0.22); color: #ffffff; }

/* 地図とリスト */
.cy-map-app__tabs { display: none; gap: 6px; margin-bottom: 12px; }

.cy-map-tab {
  flex: 1;
  min-height: 42px;
  border: 1.5px solid var(--cy-line);
  border-radius: 10px;
  background: #ffffff;
  color: var(--cy-text);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.cy-map-tab.is-on { background: var(--cy-primary); border-color: var(--cy-primary); color: #ffffff; }

.cy-map-app__body {
  display: grid;
  grid-template-columns: 1fr 336px;
  gap: 16px;
  align-items: stretch;
}

.cy-map-app__canvas {
  position: relative;
  /* 画面の高さに追随させる。ヘッダー+検索まわり+余白のぶんを引く */
  height: clamp(440px, calc(100vh - 320px), 760px);
  border-radius: 12px;
  overflow: hidden;
  background: var(--cy-bg-soft);
}

.cy-map-app__loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cy-text-soft);
  font-weight: 700;
  font-size: 14px;
}

.cy-map-app__error {
  padding: 40px 20px;
  text-align: center;
  color: var(--cy-text-soft);
  font-weight: 700;
}

.cy-map-app__panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: clamp(440px, calc(100vh - 320px), 760px);
}

.cy-map-app__count {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--cy-text-soft);
}

.cy-map-list {
  list-style: none;
  margin: 0;
  padding: 0 4px 0 0;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cy-map-item { margin: 0; }

.cy-map-item__main {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  border: 1.5px solid var(--cy-line);
  border-radius: 10px;
  background: #ffffff;
  font: inherit;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cy-map-item__main:hover { border-color: var(--cy-primary); box-shadow: 0 4px 12px rgba(20, 33, 61, 0.08); }

.cy-map-item__head { display: flex; gap: 10px; align-items: baseline; justify-content: space-between; }

.cy-map-item__name {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--cy-ink);
  line-height: 1.5;
  word-break: normal;
  overflow-wrap: break-word;
}

.cy-map-item__dist { font-size: 12px; font-weight: 700; color: var(--cy-accent); flex-shrink: 0; }
.cy-map-item__addr { font-size: 12.5px; color: var(--cy-text-soft); line-height: 1.6; }
.cy-map-item__cats { display: flex; flex-wrap: wrap; gap: 4px; }

/* ひとこと説明。一覧は流し読みするので2行で切る */
.cy-map-item__lead {
  font-size: 13px;
  line-height: 1.7;
  color: var(--cy-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cy-map-item--more {
  padding: 12px 14px;
  font-size: 12.5px;
  color: var(--cy-text-soft);
  text-align: center;
}

/* 絞り込みで0件になったときの逃げ道 */
.cy-map-item__all {
  display: block;
  width: fit-content;
  margin: 10px auto 0;
  padding: 8px 18px;
  border: 1.5px solid var(--cy-primary);
  border-radius: 999px;
  background: #ffffff;
  color: var(--cy-primary);
  font-size: 12.5px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}
.cy-map-item__all:hover,
.cy-map-item__all:focus-visible {
  background: var(--cy-primary);
  color: #ffffff;
}

.cy-map-badge {
  --chip: var(--cy-primary);
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--chip);
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* 吹き出し */
.cy-map-info { font-family: var(--cy-font); max-width: 300px; }
.cy-map-info__title { font-size: 15.5px; margin: 0 0 8px; line-height: 1.5; color: var(--cy-ink); }
.cy-map-info__cats { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
.cy-map-info__desc { font-size: 13px; line-height: 1.75; color: var(--cy-text); margin: 0 0 10px; }

/* スポットの写真。吹き出しの幅に合わせて上辺いっぱいに敷く */
.cy-map-info__photo {
  display: block;
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 8px;
  margin: 0 0 10px;
  background: var(--cy-bg-soft);
}

.cy-map-info__row { display: flex; gap: 10px; font-size: 12.5px; line-height: 1.7; margin-bottom: 4px; }
.cy-map-info__row span { flex: 0 0 60px; font-weight: 700; color: var(--cy-text-soft); }
.cy-map-info__row p { margin: 0; color: var(--cy-text); }

/* 「循環の取り組み」は項目名が長く、本文も他より長いので上下に積む */
.cy-map-info__row--cir {
  display: block;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--cy-line);
}
.cy-map-info__row--cir span { display: block; margin-bottom: 2px; }

.cy-map-info__actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }

.cy-map-info__btn {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--cy-primary);
  color: #ffffff;
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
}

.cy-map-info__btn:hover { background: var(--cy-primary-dark); color: #ffffff; }

.cy-map-info__btn--ghost {
  background: #ffffff;
  color: var(--cy-primary);
  border: 1.5px solid var(--cy-line);
}

.cy-map-info__btn--ghost:hover { background: var(--cy-bg-soft); color: var(--cy-primary); }

/* 画像だけの列は、隣の本文列に対して上下中央にそろえる。
   プロフィール写真（size-thumbnail）は上寄せのままにしたいので除外する */
:is(.cy-page-content, .cy-article__content) .section_clear > [class*="vc_col-sm-"]:has(img):not(:has(img.size-thumbnail)):not(:has(p)):not(:has(h1, h2, h3, h4, h5)) {
  align-self: center;
}

/* --------------------------------------------------------------------------
   入れ子の段組で「画像＋説明＋ボタン」が並ぶ紹介アイテムは、
   カードとして見せ、ボタンを下端でそろえる。
   画像とボタンの両方を持つ列だけを対象にし、通常の段組には触らない。

   列の左右 padding は段組の溝として使われているため、カードの地は
   ::before を 14px 内側に敷いて表現し、内側の余白は padding で足す。
   （wpb_wrapper が無い列もあるので、直下・wrapper下の両方を指定する）
   -------------------------------------------------------------------------- */
:is(.cy-page-content, .cy-article__content) .vc_row.vc_inner > .wpb_column:has(img):has(.wpb_content_element.button, .vc_btn3-container) {
  display: flex;
  flex-direction: column;
  position: relative;
  padding: 22px 36px 24px !important;
}

:is(.cy-page-content, .cy-article__content) .vc_row.vc_inner > .wpb_column:has(img):has(.wpb_content_element.button, .vc_btn3-container)::before {
  content: '';
  position: absolute;
  inset: 0 14px;
  background: var(--cy-bg-soft);
  border: 1px solid var(--cy-line);
  border-radius: var(--cy-radius);
  z-index: 0;
}

:is(.cy-page-content, .cy-article__content) .vc_row.vc_inner > .wpb_column:has(img):has(.wpb_content_element.button, .vc_btn3-container) > * {
  position: relative;
  z-index: 1;
}

/* 列 → vc_column-inner → wpb_wrapper と入れ子が続くので、
   ボタンを下端に落とすため flex の連鎖を最下層まで通す */
:is(.cy-page-content, .cy-article__content) .vc_row.vc_inner > .wpb_column:has(img):has(.wpb_content_element.button, .vc_btn3-container) :is(.vc_column-inner, .wpb_wrapper) {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* ボタンを下端に寄せて、隣の列と高さをそろえる */
:is(.cy-page-content, .cy-article__content) .vc_row.vc_inner > .wpb_column:has(img) :is(.wpb_content_element.button, .vc_btn3-container) {
  margin-top: auto;
  margin-bottom: 0;
}

/* ボタンの後ろに残る空白スペーサーは詰める */
:is(.cy-page-content, .cy-article__content) .vc_row.vc_inner > .wpb_column:has(img) .vc_empty_space:last-child { display: none; }

/* カード内の文章と画像 */
:is(.cy-page-content, .cy-article__content) .vc_row.vc_inner > .wpb_column:has(img) .wpb_text_column { margin-bottom: 18px; }

:is(.cy-page-content, .cy-article__content) .vc_row.vc_inner > .wpb_column:has(img) img { border-radius: 10px; }

@media (max-width: 700px) {
  :is(.cy-page-content, .cy-article__content) .vc_row.vc_inner > .wpb_column:has(img):has(.wpb_content_element.button, .vc_btn3-container) {
    padding: 20px 28px 22px !important;
  }
}

/* [home_blog] で描く記事グリッド */
.cy-grid--legacy { margin: 4px 0 8px; }

/* 記事一覧を含む固定ページは、一覧ページと同じ幅まで広げる。
   本文の行長が伸びすぎないよう、文章ブロックだけ幅を絞って中央に置く */
body.cy-page--wide .cy-page-wrap { max-width: calc(var(--cy-container) + 48px); }

/* 広い版面のページでは本文も表も列いっぱいに使う
   （行長より、余白を詰めて情報量を出すことを優先する判断） */
body.cy-page--wide :is(.cy-page-content) .wpb_text_column { max-width: none; }

/* --------------------------------------------------------------------------
   本文の中に差し込むカードは、本文用のタイポグラフィを受けないようにする。
   :is(.cy-page-content, ...) h2 などが特定度で勝ってしまい、カード見出しに
   本文用の縦バーや 24px が乗るため、同じ入れ子の深さで打ち消す。
   -------------------------------------------------------------------------- */
:is(.cy-page-content, .cy-article__content) .cy-card :is(h1, h2, h3, h4, h5, h6) {
  border: 0;
  padding: 0;
  margin: 0 0 12px;
  text-align: left;
  font-size: 17.5px;
  line-height: 1.65;
  font-weight: 900;
  letter-spacing: 0.01em;
  color: var(--cy-ink);
}

:is(.cy-page-content, .cy-article__content) .cy-card p {
  margin: 0 0 12px;
  text-align: left;
  font-size: 13.5px;
  line-height: 1.9;
  color: var(--cy-text-soft);
}

:is(.cy-page-content, .cy-article__content) .cy-card .cy-card__date {
  text-align: left;
  font-size: 12.5px;
  color: var(--cy-text-soft);
}

:is(.cy-page-content, .cy-article__content) .cy-card img {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  border-radius: 0;
  margin: 0;
  max-width: none;
  box-shadow: none;
}

:is(.cy-page-content, .cy-article__content) .cy-card a {
  color: inherit;
  text-decoration: none;
  border: 0;
}

:is(.cy-page-content, .cy-article__content) .cy-card:hover .cy-card__title a { color: var(--cy-primary); }

/* グリッドの直後のボタンは間隔を空ける */
:is(.cy-page-content, .cy-article__content) .cy-grid--legacy + .vc_empty_space + .vc_btn3-container,
:is(.cy-page-content, .cy-article__content) .cy-grid--legacy + .vc_btn3-container { margin-top: 24px; }

/* スポット掲載依頼の導線 */
.cy-map-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  background: #ffffff;
  border-radius: var(--cy-radius);
  box-shadow: var(--cy-shadow);
  padding: 28px 32px;
  margin-bottom: 40px;
}

.cy-map-cta__body { flex: 1 1 420px; min-width: 0; }

.cy-map-cta__title {
  font-size: 19px;
  line-height: 1.6;
  margin: 0 0 8px;
  color: var(--cy-ink);
}

.cy-map-cta__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.9;
  color: var(--cy-text-soft);
  font-weight: 700;
  overflow-wrap: break-word;
}

.cy-map-cta__btn { flex-shrink: 0; text-align: center; }

@media (max-width: 700px) {
  .cy-map-cta { padding: 22px 20px; gap: 16px; }
  .cy-map-cta__title { font-size: 17px; }
  .cy-map-cta__btn { width: 100%; }
}

/* 導入文は地図の上。地図との間だけ空け、上下の余白を詰める */
.cy-map-intro { margin-bottom: 8px; }
.cy-map-intro .vc_row:first-child { margin-top: 0 !important; }
.cy-map-intro .vc_row:last-child { margin-bottom: 0 !important; }
.cy-map-intro .block_title:first-of-type { margin-top: 0 !important; }

@media (max-width: 900px) {
  .cy-map-app { padding: 16px 14px 18px; border-radius: 12px; }
  .cy-map-app__tabs { display: flex; }
  .cy-map-app__body { grid-template-columns: 1fr; }
  .cy-map-app__canvas { height: min(66vh, 520px); }
  .cy-map-app__panel { height: auto; max-height: min(66vh, 520px); }

  /* タブで地図/リストを出し分ける */
  .cy-map-app[data-tab="list"] .cy-map-app__canvas { display: none; }
  .cy-map-app:not([data-tab="list"]) .cy-map-app__panel { display: none; }
}

@media (max-width: 600px) {
  .cy-map-app__bar { gap: 8px; flex-wrap: nowrap; }
  .cy-map-chip { font-size: 12.5px; min-height: 34px; padding: 0 11px; gap: 6px; }
  .cy-map-chip__n { font-size: 11px; padding: 1px 6px; }

  /* チップは横スクロール1行（積み上げると地図が画面外へ押し出されるため） */
  .cy-map-filters {
    flex-wrap: nowrap;
    gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-left: -14px;
    margin-right: -14px;
    padding: 2px 14px 6px;
  }
  .cy-map-filters::-webkit-scrollbar { display: none; }
  .cy-map-chip { flex-shrink: 0; }
}

/* ==========================================================================
   お問い合わせフォーム（Contact Form 7）
   マークアップは table だが、データ表ではなく入力フォームなので
   本文用のテーブル装飾を打ち消して2カラムのフォーム行として見せる。
   ========================================================================== */
:is(.cy-page-content, .cy-article__content) .wpcf7 { margin: 8px 0 0; }

:is(.cy-page-content, .cy-article__content) .wpcf7 table {
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
  font-size: inherit;
  line-height: inherit;
  margin: 0 0 24px;
}

:is(.cy-page-content, .cy-article__content) .wpcf7 table th,
:is(.cy-page-content, .cy-article__content) .wpcf7 table td {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--cy-line);
  padding: 20px 0;
  vertical-align: top;
}

:is(.cy-page-content, .cy-article__content) .wpcf7 table th:first-child,
:is(.cy-page-content, .cy-article__content) .wpcf7 table td:first-child {
  width: 30%;
  min-width: 180px;
  padding-right: 24px;
  border-right: 0;
  background: transparent;
  font-size: 14.5px;
  line-height: 1.7;
}

:is(.cy-page-content, .cy-article__content) .wpcf7 table tr:last-child th,
:is(.cy-page-content, .cy-article__content) .wpcf7 table tr:last-child td { border-bottom: 0; }

/* 入力欄 */
:is(.cy-page-content, .cy-article__content) .wpcf7 input[type="text"],
:is(.cy-page-content, .cy-article__content) .wpcf7 input[type="email"],
:is(.cy-page-content, .cy-article__content) .wpcf7 input[type="tel"],
:is(.cy-page-content, .cy-article__content) .wpcf7 input[type="url"],
:is(.cy-page-content, .cy-article__content) .wpcf7 input[type="number"],
:is(.cy-page-content, .cy-article__content) .wpcf7 input[type="date"],
:is(.cy-page-content, .cy-article__content) .wpcf7 select,
:is(.cy-page-content, .cy-article__content) .wpcf7 textarea {
  width: 100%;
  max-width: 520px;
  min-height: 50px;
  padding: 12px 16px;
  border: 1.5px solid var(--cy-line);
  border-radius: 10px;
  background: #ffffff;
  color: var(--cy-text);
  font-family: inherit;
  font-size: 15px;
  line-height: 1.7;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

:is(.cy-page-content, .cy-article__content) .wpcf7 textarea {
  min-height: 200px;
  resize: vertical;
}

/* セル内の段落マージンが行の余白を二重にしてしまうので消す */
:is(.cy-page-content, .cy-article__content) .wpcf7 :is(th, td) > p,
:is(.cy-page-content, .cy-article__content) .wpcf7 :is(th, td) > p:last-child { margin: 0; }
:is(.cy-page-content, .cy-article__content) .wpcf7 :is(th, td) br { display: none; }

:is(.cy-page-content, .cy-article__content) .wpcf7 :is(input, select, textarea):focus-visible {
  outline: 0;
  border-color: var(--cy-primary);
  box-shadow: 0 0 0 3px rgba(29, 58, 110, 0.14);
}

:is(.cy-page-content, .cy-article__content) .wpcf7 ::placeholder { color: #9aa1ab; }

/* wpcf7 が入力欄を包む span はレイアウトに影響させない */
:is(.cy-page-content, .cy-article__content) .wpcf7 .wpcf7-form-control-wrap { display: block; }

/* 同意チェックボックス */
:is(.cy-page-content, .cy-article__content) .wpcf7 .wpcf7-acceptance .wpcf7-list-item { margin: 0; }

:is(.cy-page-content, .cy-article__content) .wpcf7 .wpcf7-list-item label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--cy-ink);
  cursor: pointer;
}

:is(.cy-page-content, .cy-article__content) .wpcf7 input[type="checkbox"],
:is(.cy-page-content, .cy-article__content) .wpcf7 input[type="radio"] {
  width: 20px;
  height: 20px;
  accent-color: var(--cy-primary);
  flex-shrink: 0;
  margin: 0;
}

/* 送信ボタン */
:is(.cy-page-content, .cy-article__content) .wpcf7 input[type="submit"],
:is(.cy-page-content, .cy-article__content) .wpcf7 button[type="submit"] {
  display: block;
  min-width: 240px;
  min-height: 52px;
  margin: 8px auto 0;
  padding: 14px 32px;
  border: 0;
  border-radius: 999px;
  background: var(--cy-primary);
  color: #ffffff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

:is(.cy-page-content, .cy-article__content) .wpcf7 input[type="submit"]:hover:not(:disabled) {
  background: var(--cy-primary-dark);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(20, 42, 82, 0.35);
}

:is(.cy-page-content, .cy-article__content) .wpcf7 input[type="submit"]:disabled {
  background: var(--cy-text-soft);
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* 送信前の案内文とチェックボックスは中央にまとめる */
:is(.cy-page-content, .cy-article__content) .wpcf7 .wpcf7-acceptance,
:is(.cy-page-content, .cy-article__content) .wpcf7 form > p:has(input[type="submit"]) { text-align: center; }

/* エラー・完了メッセージ */
:is(.cy-page-content, .cy-article__content) .wpcf7 .wpcf7-not-valid-tip {
  display: block;
  margin-top: 7px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--cy-accent);
}

:is(.cy-page-content, .cy-article__content) .wpcf7 :is(input, textarea, select).wpcf7-not-valid {
  border-color: var(--cy-accent);
  background: rgba(200, 16, 46, 0.03);
}

:is(.cy-page-content, .cy-article__content) .wpcf7 .wpcf7-response-output {
  margin: 20px 0 0;
  padding: 14px 18px;
  border-width: 1.5px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.8;
  text-align: center;
}

:is(.cy-page-content, .cy-article__content) .wpcf7 form.invalid .wpcf7-response-output,
:is(.cy-page-content, .cy-article__content) .wpcf7 form.unaccepted .wpcf7-response-output,
:is(.cy-page-content, .cy-article__content) .wpcf7 form.failed .wpcf7-response-output {
  border-color: var(--cy-accent);
  color: var(--cy-accent-dark);
  background: rgba(200, 16, 46, 0.05);
}

:is(.cy-page-content, .cy-article__content) .wpcf7 form.sent .wpcf7-response-output {
  border-color: #047857;
  color: #036049;
  background: rgba(4, 120, 87, 0.06);
}

/* スマホでは項目名を入力欄の上に積む */
@media (max-width: 700px) {
  :is(.cy-page-content, .cy-article__content) .wpcf7 table,
  :is(.cy-page-content, .cy-article__content) .wpcf7 tbody,
  :is(.cy-page-content, .cy-article__content) .wpcf7 tr,
  :is(.cy-page-content, .cy-article__content) .wpcf7 th,
  :is(.cy-page-content, .cy-article__content) .wpcf7 td {
    display: block;
    width: 100% !important;
    min-width: 0;
  }

  :is(.cy-page-content, .cy-article__content) .wpcf7 tr { border-bottom: 1px solid var(--cy-line); padding: 18px 0; }
  :is(.cy-page-content, .cy-article__content) .wpcf7 tr:last-child { border-bottom: 0; }

  :is(.cy-page-content, .cy-article__content) .wpcf7 th,
  :is(.cy-page-content, .cy-article__content) .wpcf7 td {
    border-bottom: 0;
    padding: 0;
  }

  :is(.cy-page-content, .cy-article__content) .wpcf7 th:first-child,
  :is(.cy-page-content, .cy-article__content) .wpcf7 td:first-child {
    padding: 0 0 8px;
    font-size: 13.5px;
  }

  :is(.cy-page-content, .cy-article__content) .wpcf7 input[type="submit"] { width: 100%; min-width: 0; }
}

/* ==========================================================================
   タブ（WPBakery vc_tta）
   プラグインの JS は読み込まれているが CSS が入っていないため、
   パネルの出し分けと見た目をテーマ側で用意する。
   ========================================================================== */
:is(.cy-page-content, .cy-article__content) .vc_tta-container { margin: 0 0 32px; }

/* タブ見出しの一覧 */
:is(.cy-page-content, .cy-article__content) .vc_tta-tabs-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  list-style: none;
  /* 旧テーマ側の ul 指定が強いため同じ強さで上書きする */
  margin: 0 0 34px !important;
  padding: 0 !important;
}

:is(.cy-page-content, .cy-article__content) .vc_tta-tab { margin: 0; }

/* 旧テーマ側の .vc_tta-tab > a への指定が強いため、こちらも強さを揃える */
:is(.cy-page-content, .cy-article__content) .vc_tta-tab > a {
  display: inline-flex !important;
  align-items: center;
  min-height: 44px;
  height: auto !important;
  padding: 10px 22px !important;
  margin: 0 !important;
  border: 1.5px solid var(--cy-line) !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  color: var(--cy-text) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  letter-spacing: 0.02em;
  text-decoration: none !important;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

:is(.cy-page-content, .cy-article__content) .vc_tta-tab > a:hover {
  border-color: var(--cy-primary) !important;
  color: var(--cy-primary) !important;
}

:is(.cy-page-content, .cy-article__content) .vc_tta-tab.vc_active > a {
  background: var(--cy-primary) !important;
  border-color: var(--cy-primary) !important;
  color: #ffffff !important;
}

:is(.cy-page-content, .cy-article__content) .vc_tta-tab .vc_tta-title-text { color: inherit !important; }

/* パネルは選択中のものだけ表示する */
:is(.cy-page-content, .cy-article__content) .vc_tta-panel > .vc_tta-panel-body { display: none; }
:is(.cy-page-content, .cy-article__content) .vc_tta-panel.vc_active > .vc_tta-panel-body { display: block; padding-top: 6px; }

/* タブ表示のときは各パネルの見出しは不要（アコーディオン用） */
:is(.cy-page-content, .cy-article__content) .vc_tta-tabs .vc_tta-panel-heading { display: none; }

:is(.cy-page-content, .cy-article__content) .vc_tta-panels,
:is(.cy-page-content, .cy-article__content) .vc_tta-panels-container { background: transparent; border: 0; }

/* タブ見出しとパネル内容の間隔（タブ一覧側の margin と合わせて確保する） */
:is(.cy-page-content, .cy-article__content) .vc_tta-tabs .vc_tta-panels-container { padding-top: 4px; }

/* プロフィール写真の円形指定（旧テーマのクラス）。
   カード内の画像に角丸10pxを当てるルールより後に、同じ強さで指定する */
:is(.cy-page-content, .cy-article__content) img.img-circle,
:is(.cy-page-content, .cy-article__content) .vc_row.vc_inner > .wpb_column:has(img) img.img-circle {
  border-radius: 50% !important;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  max-width: 200px;
  margin-left: auto;
  margin-right: auto;
}

/* 中央寄せ指定のテキストブロック */
:is(.cy-page-content, .cy-article__content) .wpb_text_column.center { text-align: center; }

/* スマホではタブをやめ、パネル見出しのアコーディオンに切り替える */
@media (max-width: 700px) {
  :is(.cy-page-content, .cy-article__content) .vc_tta-tabs-container { display: none; }

  :is(.cy-page-content, .cy-article__content) .vc_tta-tabs .vc_tta-panel-heading { display: block; margin: 0; }

  :is(.cy-page-content, .cy-article__content) .vc_tta-panel {
    border: 1px solid var(--cy-line);
    border-radius: 10px;
    margin-bottom: 8px;
    overflow: hidden;
  }

  :is(.cy-page-content, .cy-article__content) .vc_tta-panel-title { margin: 0 !important; font-size: 14.5px !important; }

  :is(.cy-page-content, .cy-article__content) .vc_tta-panel-title > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 52px;
    padding: 12px 16px;
    background: var(--cy-bg-soft);
    color: var(--cy-ink);
    font-weight: 700;
    text-decoration: none !important;
  }

  :is(.cy-page-content, .cy-article__content) .vc_tta-panel-title > a::after {
    content: '';
    width: 9px; height: 9px;
    flex-shrink: 0;
    border-right: 2px solid var(--cy-text-soft);
    border-bottom: 2px solid var(--cy-text-soft);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform 0.2s ease;
  }

  :is(.cy-page-content, .cy-article__content) .vc_tta-panel.vc_active .vc_tta-panel-title > a::after {
    transform: rotate(-135deg) translate(-2px, -2px);
  }

  :is(.cy-page-content, .cy-article__content) .vc_tta-panel.vc_active > .vc_tta-panel-body { padding: 16px; }
}

/* ==========================================================================
   マップ掲載申請フォーム
   お問い合わせフォーム（CF7）とは別に、マップの1スポットに必要な項目を
   そのまま尋ねる。項目数が多いので、段（fieldset）で区切って進める。
   ========================================================================== */
.cy-entry {
  max-width: 720px;
  margin: 8px auto 0;
  /* 段の見出し番号。隠れている段は数えないので、常に連番になる */
  counter-reset: cy-step;
}

.cy-entry__group {
  margin: 0 0 34px;
  padding: 26px 28px 8px;
  border: 1px solid var(--cy-line);
  border-radius: var(--cy-radius);
  background: #ffffff;
}

.cy-entry__legend {
  padding: 0 10px;
  margin-left: -10px;
  font-size: 17px;
  font-weight: 700;
  color: var(--cy-primary);
  letter-spacing: 0.02em;
}

.cy-entry__legend::before {
  counter-increment: cy-step;
  content: counter(cy-step) '. ';
}

.cy-entry__row { margin: 0 0 22px; }

.cy-entry__label {
  display: block;
  margin-bottom: 4px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--cy-ink);
}

.cy-entry__req,
.cy-entry__opt {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  vertical-align: 2px;
}
.cy-entry__req { background: #fdeaee; color: var(--cy-accent); }
.cy-entry__opt { background: var(--cy-bg-soft); color: var(--cy-text-soft); }
/* display を指定していると hidden 属性が効かなくなるので打ち消す */
.cy-entry__req[hidden],
.cy-entry__opt[hidden] { display: none; }

.cy-entry__help,
.cy-entry__hint {
  margin: 0 0 8px;
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--cy-text-soft);
}
.cy-entry__hint {
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--cy-bg-soft);
  margin-bottom: 20px;
}

.cy-entry__input {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 14px 15px;
  border: 1.5px solid var(--cy-line);
  border-radius: 10px;
  background: #ffffff;
  color: var(--cy-text);
  font-family: inherit;
  font-size: 15px;
  line-height: 1.7;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
textarea.cy-entry__input { min-height: 0; resize: vertical; }

.cy-entry__input:focus {
  outline: none;
  border-color: var(--cy-primary);
  box-shadow: 0 0 0 3px rgba(29, 58, 110, 0.14);
}

.cy-entry__count {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--cy-text-soft);
  text-align: right;
}
.cy-entry__count.is-over { color: var(--cy-accent); font-weight: 700; }

.cy-entry__file {
  display: block;
  width: 100%;
  padding: 14px;
  border: 1.5px dashed var(--cy-line);
  border-radius: 10px;
  background: var(--cy-bg-soft);
  font-family: inherit;
  font-size: 14px;
}

/* 場所を決める地図 */
.cy-entry__mapbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-bottom: 10px;
}
.cy-btn--sm { padding: 8px 18px; font-size: 13px; }

.cy-entry__mapstate {
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--cy-text-soft);
  flex: 1 1 220px;
}

.cy-entry__map {
  height: 340px;
  border: 1px solid var(--cy-line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--cy-bg-soft);
}

.cy-entry__latlng {
  display: flex;
  gap: 14px;
  margin-top: 10px;
}
.cy-entry__latlng label {
  flex: 1 1 0;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--cy-text-soft);
}
.cy-entry__latlng input {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 10px 12px;
  border: 1.5px solid var(--cy-line);
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
}

.cy-entry__row--check label {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14px;
  line-height: 1.8;
}
.cy-entry__row--check input { margin-top: 5px; flex: 0 0 auto; }

/* ハニーポット。読み上げからも外す */
.cy-entry__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.cy-entry__errors {
  margin: 0 0 28px;
  padding: 18px 22px;
  border: 1.5px solid var(--cy-accent);
  border-radius: var(--cy-radius);
  background: #fdeaee;
}
.cy-entry__errors:focus { outline: 2px solid var(--cy-accent); outline-offset: 2px; }
.cy-entry__errors-title { margin: 0 0 8px; font-weight: 700; color: var(--cy-accent); }
.cy-entry__errors ul { margin: 0; padding-left: 20px; font-size: 14px; line-height: 1.9; }

.cy-entry__submit { text-align: center; margin-top: 8px; }
.cy-entry__note {
  margin: 14px auto 0;
  max-width: 520px;
  font-size: 12.5px;
  line-height: 1.85;
  color: var(--cy-text-soft);
}

.cy-entry__thanks {
  max-width: 620px;
  margin: 8px auto 0;
  padding: 34px 32px;
  border-radius: var(--cy-radius);
  background: var(--cy-bg-soft);
  text-align: center;
}
.cy-entry__thanks h2 { margin: 0 0 14px; font-size: 22px; color: var(--cy-primary); }
.cy-entry__thanks p {
  margin: 0 0 18px;
  font-size: 14.5px;
  line-height: 1.95;
}

@media (max-width: 700px) {
  .cy-entry__group { padding: 20px 18px 4px; }
  .cy-entry__legend { font-size: 16px; }
  .cy-entry__map { height: 280px; }
  .cy-entry__latlng { flex-direction: column; gap: 10px; }
}




/* ==========================================================================
   記事の目次（h2、無ければ h3 から自動生成）
   本文中の冒頭にはたたみ込み式、幅が余る大画面では左の余白に追従表示
   ========================================================================== */
.cy-toc {
  margin: 0 0 30px;
  border: 1px solid var(--cy-line);
  border-radius: 12px;
  background: var(--cy-bg-soft);
}

.cy-toc summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  font-size: 14px;
  font-weight: 700;
  color: var(--cy-ink);
  cursor: pointer;
  list-style: none;
}
.cy-toc summary::-webkit-details-marker { display: none; }
.cy-toc summary::after {
  content: '';
  margin-left: auto;
  width: 8px; height: 8px;
  border-right: 2px solid var(--cy-text-soft);
  border-bottom: 2px solid var(--cy-text-soft);
  transform: rotate(45deg);
  transition: transform 0.18s ease;
}
.cy-toc[open] summary::after { transform: rotate(-135deg); }

.cy-toc ol {
  margin: 0;
  padding: 2px 18px 14px 18px;
  list-style: none;
  counter-reset: cy-toc;
}
.cy-toc li { counter-increment: cy-toc; }
.cy-toc a {
  display: flex;
  gap: 10px;
  padding: 7px 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--cy-text);
}
.cy-toc a::before {
  content: counter(cy-toc, decimal-leading-zero);
  flex: 0 0 auto;
  font-weight: 900;
  font-size: 12px;
  color: var(--cy-accent);
  line-height: 2;
}
.cy-toc a:hover { color: var(--cy-primary); }

/* 大画面: 左の余白に追従する目次 */
.cy-toc-side { display: none; }

@media (min-width: 1480px) {
  .cy-article-wrap { position: relative; }
  .cy-toc-side {
    display: block;
    position: absolute;
    top: 0;
    left: calc(50% - 470px - 262px);
    width: 232px;
    height: 100%;
  }
  .cy-toc-side__in {
    position: sticky;
    top: 96px;
    padding: 4px 0;
  }
  .cy-toc-side__title {
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--cy-text-soft);
  }
  .cy-toc-side a {
    display: block;
    padding: 6px 0 6px 14px;
    border-left: 2px solid var(--cy-line);
    font-size: 13px;
    line-height: 1.65;
    color: var(--cy-text-soft);
  }
  .cy-toc-side a:hover { color: var(--cy-primary); }
  .cy-toc-side a.is-active {
    border-left-color: var(--cy-accent);
    color: var(--cy-ink);
    font-weight: 700;
  }
  /* サイドに出せる幅があるときは、本文中のたたみ込みは重複するので隠す */
  .cy-toc { display: none; }
}

/* ==========================================================================
   404の検索ボックス
   ========================================================================== */
.cy-404__search { max-width: 480px; margin: 22px auto 30px; }


/* ==========================================================================
   Sustainable Web Design ツールキット
   ダークモード / 文字サイズ / 読み上げ / 転送量の開示 / B Corp / blogcard
   ========================================================================== */

/* --- ヘッダーのユーティリティ（テーマ切替・文字サイズ） --- */
.cy-lang-btn {
  width: auto;
  padding: 0 10px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-decoration: none;
}
.cy-lang-btn:hover { text-decoration: none; }

/* SPメニュー内のユーティリティ（EN・文字サイズ・ダークモード）。PCでは非表示 */
.cy-nav__utils { display: none; }

@media (max-width: 900px) {
  /* SPのヘッダーはロゴ・検索・メニューだけにする */
  .cy-header__tools .cy-lang-btn,
  .cy-header__tools .cy-fontsize-toggle,
  .cy-header__tools .cy-theme-toggle { display: none; }

  .cy-nav__utils {
    display: flex;
    gap: 10px;
    margin: 14px 4px 4px;
    padding-top: 16px;
    border-top: 1px solid var(--cy-line);
  }

  .cy-nav .cy-nav__util {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 14px 8px;
    width: auto;
    height: auto;
    background: var(--cy-bg-soft);
    border: 1px solid var(--cy-line);
    border-radius: 12px;
    font-family: var(--cy-font);
    color: var(--cy-ink);
    cursor: pointer;
    text-decoration: none;
  }
  .cy-nav .cy-nav__util:hover { border-color: var(--cy-primary); color: var(--cy-primary); background: var(--cy-bg-soft); }
  .cy-nav__util svg { width: 20px; height: 20px; fill: currentColor; display: block; }
  .cy-nav__util-main { font-size: 17px; font-weight: 900; letter-spacing: 0.08em; line-height: 20px; }
  .cy-nav__util-sub { font-size: 11px; font-weight: 700; color: var(--cy-text-soft); }
}

/* ボタンが2つ増えた分、ナビ項目は折り返さず、中間幅では詰めて収める */
.cy-nav a { white-space: nowrap; }
@media (min-width: 901px) and (max-width: 1280px) {
  .cy-nav a { padding: 10px 8px; font-size: 13.5px; }
}
.cy-theme-toggle .cy-theme-toggle__sun { display: none; }
[data-theme="dark"] .cy-theme-toggle .cy-theme-toggle__sun { display: block; }
[data-theme="dark"] .cy-theme-toggle .cy-theme-toggle__moon { display: none; }

/* --- 文字サイズ（標準・大・特大）。px指定のデザインを崩さず全体を等倍拡大する --- */
:root[data-fs="2"] body { zoom: 1.1; }
:root[data-fs="3"] body { zoom: 1.22; }

/* --- フッター: 転送量・推定CO2（クリックでロジック開示） --- */
.cy-weight { margin: 12px 0 0; font-size: 12.5px; color: rgba(255, 255, 255, 0.78); }
.cy-weight summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.cy-weight summary::-webkit-details-marker { display: none; }
.cy-weight summary::after {
  content: '';
  width: 8px; height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.2s ease;
  opacity: 0.7;
}
.cy-weight[open] summary::after { transform: rotate(225deg) translateY(-1px); }
.cy-weight__label { text-decoration: underline dotted rgba(255, 255, 255, 0.5); text-underline-offset: 4px; }
.cy-weight__body {
  margin-top: 10px;
  padding: 13px 15px;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.85;
}
.cy-weight__body p { margin: 0 0 10px; }
.cy-weight__body p:last-child { margin-bottom: 0; }
.cy-weight__body a { color: #ffffff; text-decoration: underline; text-underline-offset: 3px; }

/* --- フッター: B Corp 認証ロゴ（白抜き） --- */
.cy-footer__bcorp { margin-top: 20px; }
.cy-footer__bcorp img { height: 108px; width: auto; display: block; }

/* --- 記事の読み上げボタン --- */
.cy-listen {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--cy-font);
  font-size: 13px;
  font-weight: 700;
  color: var(--cy-primary);
  background: transparent;
  border: 1.5px solid var(--cy-line);
  border-radius: 999px;
  padding: 8px 18px;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.cy-listen svg { width: 15px; height: 15px; fill: currentColor; }
.cy-listen:hover { border-color: var(--cy-primary); background: var(--cy-bg-soft); }
.cy-listen.is-playing { color: #ffffff; background: var(--cy-primary); border-color: var(--cy-primary); }
[data-theme="dark"] .cy-listen.is-playing { color: #10151f; }

/* --- [blogcard] リンクカード --- */
.cy-blogcard {
  display: flex;
  align-items: stretch;
  background: #ffffff;
  border: 1px solid var(--cy-line);
  border-radius: var(--cy-radius);
  overflow: hidden;
  margin: 22px 0;
  box-shadow: var(--cy-shadow);
  transition: box-shadow 0.2s ease;
}
:is(.cy-page-content, .cy-article__content) a.cy-blogcard { text-decoration: none; }
.cy-blogcard:hover { box-shadow: var(--cy-shadow-hover); }
.cy-blogcard__media { flex: 0 0 210px; min-height: 130px; }
.cy-blogcard__media img { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0 !important; border-radius: 0 !important; }
.cy-blogcard__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 16px 20px;
}
.cy-blogcard__eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.05em; color: var(--cy-accent); }
.cy-blogcard__title { font-size: 15px; font-weight: 700; line-height: 1.6; color: var(--cy-ink); }
@media (max-width: 600px) {
  .cy-blogcard { flex-direction: column; }
  .cy-blogcard__media { flex: none; height: 170px; }
}

/* --- ダークモード ---
   変数の上書き＋白背景を直書きしている部品の面色調整。
   本文画像・地図・写真はそのまま（メディアまで暗くはしない） */
:root[data-theme="dark"] {
  color-scheme: dark;
  --cy-primary: #9db7e8;
  --cy-primary-dark: #c3d3f2;
  --cy-accent: #ef4b62;
  --cy-accent-dark: #ff6b7f;
  --cy-ink: #e9edf5;
  --cy-text: #c6cedd;
  --cy-text-soft: #9aa5bb;
  --cy-line: #313c52;
  --cy-bg: #12161f;
  --cy-bg-soft: #1a212e;
  --cy-footer: #0e1424;
  --cy-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
  --cy-shadow-hover: 0 14px 30px rgba(0, 0, 0, 0.55);
}

[data-theme="dark"] :is(
  .cy-header, .cy-searchbar, .cy-search-panel, .cy-empty, .cy-nav li ul,
  .cy-page-header, .cy-card, .cy-pagination .page-numbers, .cy-article,
  .cy-page-content, .cy-404, .cy-postnav__item, .cy-tabs__item,
  .cy-section--tint, .cy-filter, .cy-filter__item, .cy-term--sector, .cy-map-app,
  .cy-map-chip, .cy-map-tab, .cy-map-item__main, .cy-map-item__all,
  .cy-map-info__btn--ghost, .cy-map-cta, .cy-entry__group, .cy-blogcard
) {
  background: #1c2431;
}

@media (max-width: 900px) {
  [data-theme="dark"] .cy-nav { background: #1c2431; }
}

[data-theme="dark"] :is(
  .cy-searchform__input, .cy-map-search__input, .cy-entry__input,
  :is(.cy-page-content, .cy-article__content) .wpcf7 input[type="text"],
  :is(.cy-page-content, .cy-article__content) .wpcf7 input[type="email"],
  :is(.cy-page-content, .cy-article__content) .wpcf7 input[type="tel"],
  :is(.cy-page-content, .cy-article__content) .wpcf7 input[type="url"],
  :is(.cy-page-content, .cy-article__content) .wpcf7 select,
  :is(.cy-page-content, .cy-article__content) .wpcf7 textarea
) {
  background: #141a26;
  color: var(--cy-ink);
  border-color: var(--cy-line);
}

[data-theme="dark"] :is(.cy-page-content, .cy-article__content) table { background: #1c2431; }

/* ロゴ（透過PNG・紺1色）はダークでは白に反転する */
[data-theme="dark"] .cy-header__logo img { filter: brightness(0) invert(1); }

/* 明るい青地・赤地のボタンは文字を濃色にしてコントラストを確保 */
[data-theme="dark"] :is(
  .cy-btn:not(.cy-btn--ghost), .cy-searchform__submit, .cy-card__badge,
  .cy-article__cat, .cy-pagination .page-numbers.current, .cy-share__btn,
  .cy-tabs__item.is-current, .cy-filter__item.is-current, .cy-term--rule,
  .cy-totop, .cy-map-tab.is-on, .cy-map-info__btn,
  .cy-404__links a:hover, .cy-term--sector:hover
) {
  color: #10151f;
}
[data-theme="dark"] .cy-btn--ghost:hover { background: rgba(157, 183, 232, 0.14); color: var(--cy-primary); }

/* 本文中の写真は少しだけ落ち着かせる */
[data-theme="dark"] :is(.cy-page-content, .cy-article__content) img { filter: brightness(0.92); }

/* 本文中の alignnone 画像（コンテンツ幅より狭い旧記事の画像）は中央寄せ */
:is(.cy-page-content, .cy-article__content) img.alignnone {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* ==========================================================================
   SP版のみ: 本文コンテンツの折り返しを整える
   「かっこよ|く。」のように行末へ1〜2文字だけ残るのを抑える。
   見出しは行長を揃え（balance）、段落は最終行の孤立を避ける（pretty）。
   PC・カード・ヘッダー等には影響しない
   ========================================================================== */
@media (max-width: 600px) {
  :is(.cy-page-content, .cy-article__content) :is(h1, h2, h3, h4) {
    text-wrap: balance;
  }
  :is(.cy-page-content, .cy-article__content) p {
    text-wrap: pretty;
  }
  /* 固定ページの紹介文・キャッチコピーは語の途中で切らない
     （Chrome/Edgeのみ。非対応ブラウザは既定のまま） */
  @supports (word-break: auto-phrase) {
    .cy-page-content p {
      word-break: auto-phrase;
    }
  }
}

/* ==========================================================================
   SP版のみ: 旧ビルダー行の左右余白を詰め、ボタンの折り返しを整える
   ========================================================================== */
@media (max-width: 700px) {
  /* 帯・カード行のデスクトップ向け48px級パディングを詰めて本文幅を確保
     （デスクトップ側の :not(:has(.light)) 付きルールと同じ詳細度で上書き） */
  :is(.cy-page-content, .cy-article__content) .vc_row[style*="background-image"]:not(:has(.light)),
  :is(.cy-page-content, .cy-article__content) .vc_row[style*="background-image"]:has(.light),
  :is(.cy-page-content, .cy-article__content) .vc_row.cy-band,
  :is(.cy-page-content, .cy-article__content) .vc_row[style*="rgba(36,164,219"],
  :is(.cy-page-content, .cy-article__content) .vc_row[style*="rgba(36, 164, 219"] {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  /* ボタン: SPでは一回り小さくして1行に収まりやすくする。
     折り返した場合もラベルは中央揃えでアイコンは文末に続ける */
  :is(.cy-page-content, .cy-article__content) .vc_btn3 {
    display: inline-block !important;
    text-align: center !important;
    min-width: 0;
    max-width: 100%;
    padding: 12px 14px !important;
    font-size: 13px !important;
    letter-spacing: 0.01em;
  }
  :is(.cy-page-content, .cy-article__content) .btn-bt {
    padding: 12px 14px !important;
    font-size: 13px !important;
    letter-spacing: 0.01em;
  }

  /* 注記などに旧ビルダーが入れた「padding:0 28%」のようなインラインの
     左右%余白は、SPでは本文が数文字幅まで痩せるため解除する */
  :is(.cy-page-content, .cy-article__content) p[style*="padding"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* 列の溝もSPでは8pxに詰める（1カラム積みなので広い溝は不要） */
  :is(.cy-page-content, .cy-article__content) .section_clear {
    margin-left: -8px !important;
    margin-right: -8px !important;
  }
  :is(.cy-page-content, .cy-article__content) .section_clear > [class*="vc_col-sm-"] {
    padding: 0 8px !important;
  }
  :is(.cy-page-content, .cy-article__content) .vc_btn3 .vc_btn3-icon { margin-left: 8px; }
  :is(.cy-page-content, .cy-article__content) .vc_btn3-container { text-align: center; }
  :is(.cy-page-content, .cy-article__content) .btn-bt { min-width: 0; max-width: 100%; }
  :is(.cy-page-content, .cy-article__content) .btn-bt span { text-align: center; }
}

/* 講師・登壇者プロフィール（theme.js が組み替える）: 写真左・文右 */
.cy-profile {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin: 0 0 22px;
}
.cy-profile img {
  flex: 0 0 auto;
  width: 120px;
  height: auto;
  border-radius: 14px;
  margin: 0 !important;
}
.cy-profile p { flex: 1; min-width: 0; margin: 0 !important; }
@media (max-width: 600px) {
  .cy-profile { gap: 14px; }
  .cy-profile img { width: 92px; }
}