@charset "utf-8";
/* ============================================================
   佐賀さいこう！暮らし＆しごと体感フェア LP
   ビジュアルデザイン版（design.md 準拠）
   ============================================================ */

:root {
  /* ベース */
  --bg: #FAF5E8;
  --bg-sub: var(--hero-fade-bg); /* 緑（旧：薄水色 #F2F8FB） */
  --surface: #FFFFFF;
  --line: #D8E5C2;

  /* ブランド（葉のグリーン。旧：空色 --sky-*） */
  --leaf-100: #EEF6DC;
  --leaf-300: #BBDB84;
  --leaf-500: #99C25A;
  --leaf-700: #4A6F1B;

  /* アクセント（マスタードイエロー） */
  --accent: #F3E926;
  --accent-deep: #E0A83E;
  --accent-pale: #FBEECB;

  /* テキスト・見出し */
  --navy: #33495A;
  --text: #4A4038;
  --text-mute: #736A63; /* WCAG AA（4.5:1）を満たすよう #8A8078 から調整 */
  --text-on-navy: #FFFFFF;

  /* サブアクセント */
  --pink: #F3CDD1;
  --pink-deep: #E7A6AD;
  --green: #B9CDAA;
  --green-deep: #8CA678;

  /* 写真プレースホルダー */
  --ph-bg: #EEF6DC;
  --ph-text: #6F8A48;

  /* 強調ブロック（CTA） */
  --emphasis-bg: var(--hero-fade-bg);

  /* 無効化状態（準備中ナビ等） */
  --muted: #9AA3AB; /* navyを白側に大きくトーンダウンした無効化グレー。準備中リンク・Coming Soonバッジ専用 */

  /* A4チラシの見出し色（斜線装飾つき見出し用）。A4チラシ2ページ目「佐賀を楽しむ、体感型コンテンツ」の見出しをピクセルサンプリング */
  --heading-blue: #408AAB;

  /* ヒーロー下部フェード */
  --hero-fade-bg: #DDEEBC; /* A4チラシ（A4チラシ/佐賀県移住イベント_A4.pdf）下部の地色と同一 */
}

/* ---------- base ---------- */
* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Noto Sans JP", sans-serif;
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--navy); }
a:hover { color: var(--leaf-700); }

:focus-visible { outline: 2px solid var(--leaf-700); outline-offset: 3px; }

/* ---------- layout ---------- */
.container {
  width: min(92%, 1080px);
  margin-inline: auto;
}

.section { padding: clamp(40px, 6vw, 72px) 0; position: relative; }
.section--center { text-align: center; }
.section--gray { background: var(--bg-sub); } /* 名称は旧仕様（薄水色）の名残。現在はヒーロー下と同じ緑 */

.section__head {
  text-align: center;
  margin-bottom: 2rem;
}

.section__title {
  font-family: "Zen Maru Gothic", "Noto Sans JP", sans-serif;
  font-size: clamp(1.5rem, 4.5vw, 2.2rem);
  color: var(--navy);
  font-weight: 700;
  margin: .2em 0 0;
}

/* 見出しの左右に黄色い斜線（A4チラシの見出し装飾）。丸端の斜線1本ぶんのSVGをマスクにして--accentで塗る。
   左右の斜線は見出しの両脇の余白いっぱい（コンテナの端まで）に広がり（flex:1）、斜線1本は.6em四方で、
   入る本数は幅に応じて変わる。端で斜線が切れないよう mask-repeat:space で均等に並べる。
   ※SVG内の色（black）はマスクのアルファにしか使われず、実際の色は background の--accent。 */
.section__title--stripe {
  color: var(--heading-blue);
  display: flex;
  align-items: center;
  gap: .5em;
  white-space: nowrap;
}

.section__title--stripe::before,
.section__title--stripe::after {
  content: "";
  flex: 1 1 0;
  min-width: 0;
  height: .6em;
  background: var(--stripe-color, var(--accent));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath d='M8 52L46 14' stroke='black' stroke-width='13' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") 0 0 / .6em .6em space no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath d='M8 52L46 14' stroke='black' stroke-width='13' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") 0 0 / .6em .6em space no-repeat;
}

/* 緑の背景（--hero-fade-bg）の上では黄色が沈むので、斜線だけ濃い緑にする */
.section__title--stripe-leaf { --stripe-color: var(--leaf-700); }

/* スマホ幅：見出し（最長15文字）が1行に収まるよう文字を縮め、残りの余白を斜線にする */
@media (max-width: 560px) {
  .section__title--stripe { font-size: clamp(.95rem, 4.6vw, 1.4rem); }
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .8em;
  font-family: "Caveat", cursive;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--leaf-700);
}

.eyebrow::before,
.eyebrow::after {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--leaf-500);
}

/* ---------- hero ---------- */
.hero { padding: 0; background: var(--hero-fade-bg); }

.hero__img {
  width: 100%;
  height: auto;
  display: block;
}

/* 下層ページのヒーロー（hero_sub.png）：書き出し時のアンチエイリアスで画像の上端・左右端1〜2pxが
   半透明に滲んでいる（上端に薄い緑の線が出る）ため、外周2pxを切り落とす */
.hero--sub { overflow: hidden; }
.hero--sub .hero__img {
  width: calc(100% + 4px);
  max-width: none;
  margin: -2px -2px 0;
}

/* ---------- concept ---------- */
.section--center {
  overflow: hidden;
  background: var(--hero-fade-bg);
  padding-top: clamp(10px, 1.5vw, 18px);
}

.section--center::before {
  content: "";
  position: absolute;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
  width: 620px;
  height: 620px;
  max-width: 140vw;
  background: radial-gradient(closest-side, var(--leaf-100), transparent 70%);
  z-index: 0;
  pointer-events: none;
}

.section--center > .container {
  position: relative;
  z-index: 1;
}

.concept__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.2rem;
  margin-top: 1.4rem;
  text-align: left;
}

@media (min-width: 860px) {
  .concept__grid { grid-template-columns: 1fr 1.1fr; align-items: start; }

  /* 右カラム（円のコラージュ）をヒーロー画像の下端に重ねて持ち上げる（A4チラシで円がキャッチコピーの右横まで
     上がっている配置に合わせる）。セクション（overflow:hidden）ごと上に延ばし、ヒーローを前面に出して
     コンテナ（z-index:1）をその上に重ねる。左カラムは元の位置のまま（同じ量だけ下げる）。 */
  .hero { position: relative; z-index: 1; }
  .section--center {
    --concept-lift: 9vw;
    margin-top: calc(-1 * var(--concept-lift));
  }
  .section--center::before { top: calc(var(--concept-lift) - 60px); }
  .concept__col-text { margin-top: var(--concept-lift); }
}

.concept__lead {
  margin: 0;
  color: var(--text);
}

/* しごと／暮らし／体験の3ポイント（A4チラシと同じ、円の大きさ・位置をずらした配置）。
   SP：円を左右にずらして並べ、説明文は円の下。
   PC（860px〜）：右カラム全体を1つのコラージュ（アスペクト比固定）にして、円と説明文を%で絶対配置。
   位置・大きさはA4チラシの右カラムを200dpiで切り出して割り出した。説明文の文字サイズは cqw で
   コラージュの幅に比例させる。 */
.concept__col-points { container-type: inline-size; }

.concept__point-img {
  display: block;
  height: auto;
}

.concept__point-text {
  margin: -.4rem 0 0;
  font-size: .85rem;
  font-weight: 500;
  line-height: 1.7;
  color: var(--text);
  word-break: auto-phrase;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

@media (max-width: 859px) {
  /* 1列のとき、タブレット幅で円が大きくなりすぎないよう幅を絞って中央に寄せる */
  /* container-type:inline-size は、幅が内容で決まる状態（auto余白のグリッドアイテム）だと幅0になるので width:100% を必ず付ける */
  .concept__col-points { width: 100%; max-width: 420px; margin-inline: auto; }
  .concept__point + .concept__point { margin-top: .4rem; }

  .concept__point--work .concept__point-img { width: 62%; }
  .concept__point--work .concept__point-text { width: 78%; margin-left: 12%; }

  .concept__point--living .concept__point-img { width: 56%; margin-left: auto; }
  .concept__point--living .concept__point-text { width: 78%; margin-left: auto; }

  .concept__point--exp .concept__point-img { width: 52%; margin-left: 4%; }
  .concept__point--exp .concept__point-text { width: 84%; margin-left: 12%; }
}

@media (min-width: 860px) {
  .concept__col-points { position: relative; aspect-ratio: 902 / 700; }
  .concept__point { display: contents; }
  .concept__point-img,
  .concept__point-text { position: absolute; margin: 0; }
  .concept__point-text { font-size: max(.7rem, 2.35cqw); z-index: 1; }

  .concept__point--work .concept__point-img   { left: 0;   top: 8.5%;  width: 52%; }
  .concept__point--work .concept__point-text  { left: 12%; top: 46%;   width: 39%; }

  .concept__point--living .concept__point-img  { left: 49%; top: 0.7%; width: 42%; }
  .concept__point--living .concept__point-text { left: 65%; top: 36%;  width: 30%; }

  .concept__point--exp .concept__point-img   { left: 27%; top: 58.5%; width: 35%; }
  .concept__point--exp .concept__point-text  { left: 63%; top: 69%;   width: 37%; }
}

.chips {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .5rem;
  margin-top: 1.4rem;
}

.chip {
  border: 1px solid transparent;
  border-radius: 999px;
  padding: .35em 1em;
  font-size: .85rem;
  text-align: center;
  color: var(--navy);
  background: var(--surface);
}

/* 2列に収めるため、狭い画面では文字と余白を小さくして1行に収める */
@media (max-width: 560px) {
  .chip { font-size: .75rem; padding: .35em .4em; }
}

/* ---------- overview ---------- */
.overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: .6rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1.4rem;
  box-shadow: 0 4px 16px rgba(51,73,90,.06);
}

.overview__row {
  display: flex;
  gap: .9rem;
  padding: .4rem;
}

.overview__label {
  flex: none;
  width: 84px;
  text-align: center;
  border: 1px solid var(--line);
  background: var(--leaf-100);
  border-radius: 999px;
  font-size: .85rem;
  font-weight: 700;
  color: var(--navy);
  padding: .3em 0;
  height: fit-content;
}

.overview__value b {
  color: var(--navy);
  font-weight: 700;
}

.overview__value small {
  display: block;
  color: var(--text-mute);
  font-size: .8rem;
  line-height: 1.5;
}

/* ---------- contents cards ---------- */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 1.1rem;
}

.card {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  background: var(--surface);
  box-shadow: 0 4px 16px rgba(51,73,90,.08);
}

.card__num {
  position: absolute;
  top: .5rem;
  left: .5rem;
  z-index: 2;
  background: var(--accent);
  color: var(--navy);
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: .8rem;
  font-weight: 700;
}

.card__thumb {
  background: var(--ph-bg);
  border-bottom: 1px solid var(--line);
  aspect-ratio: 3 / 2;
  overflow: hidden;
}

.card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* トリミング位置の個別調整 */
.card__img--y38 { object-position: center 38%; }
.card__img--y42 { object-position: center 42%; }
.card__img--y45 { object-position: center 45%; }

/* 写真未確定のプレースホルダー（カード用） */
.card__thumb--empty {
  display: grid;
  place-items: center;
}

.card__body { padding: .9rem 1rem 1.1rem; }

.card__title {
  font-family: "Zen Maru Gothic", "Noto Sans JP", sans-serif;
  font-size: 1.02rem;
  color: var(--navy);
  font-weight: 700;
  margin: 0 0 .3em;
}

.card__text {
  font-size: .85rem;
  color: var(--text-mute);
  margin: 0;
}

.tag {
  display: inline-block;
  margin-top: .5rem;
  font-size: .72rem;
  border: 1px solid transparent;
  background: var(--accent-pale);
  border-radius: 999px;
  padding: .1em .7em;
  color: var(--navy);
}

/* ---------- guests ---------- */
.guests {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 1rem;
}

/* SP：1カラム（縦積み） */
@media (max-width: 560px) {
  .guests { grid-template-columns: 1fr; }
}

.guest {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(51,73,90,.08);
}

.guest__photo {
  background: var(--ph-bg);
  border-bottom: 1px solid var(--line);
  aspect-ratio: 3 / 2;
  overflow: hidden;
}

/* 写真未確定のプレースホルダー */
.guest__photo--empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.guest__ph-label {
  color: var(--ph-text);
  font-weight: 700;
  font-size: .95rem;
}

.guest__ph-sub {
  color: var(--ph-text);
  font-size: .72rem;
  margin-top: .15em;
}

.guest__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.guest__body { padding: .8rem .9rem 1rem; }

.guest__role {
  font-size: .72rem;
  border: 1px solid var(--leaf-300);
  border-radius: 999px;
  padding: .1em .6em;
  color: var(--leaf-700);
}

.guest__name {
  display: flex;
  align-items: center;
  gap: .35em;
  font-family: "Zen Maru Gothic", "Noto Sans JP", sans-serif;
  font-size: .98rem;
  color: var(--navy);
  font-weight: 700;
  margin: .4em 0 .2em;
}

/* ゲストのSNSリンク（現状Instagramのみ）。氏名の右に小さいアイコンで添える */
.guest__sns {
  display: inline-flex;
  align-items: center;
  color: var(--leaf-700);
}

.guest__sns:hover { color: var(--leaf-500); }

.guest__sns-icon {
  width: 1em;
  height: 1em;
}

.guest__text {
  font-size: .78rem;
  color: var(--text-mute);
  margin: 0;
}

/* トリミング位置の個別調整 */
.guest__img--r70 { object-position: 70% center; }
.guest__img--y5 { object-position: center 5%; }
.guest__img--y15 { object-position: center 15%; }
.guest__img--y55 { object-position: center 55%; }

/* ---------- stage timetable ---------- */
.timetable {
  max-width: 680px;
  margin: 0 auto;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  background: var(--surface);
  box-shadow: 0 4px 16px rgba(51,73,90,.06);
}

.timetable__row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  padding: .85rem 1.2rem;
  border-bottom: 1px solid var(--line);
}

.timetable__row:last-child { border-bottom: 0; }

.timetable__time {
  flex: none;
  width: 118px;
  font-weight: 700;
  color: var(--navy);
}

.note {
  text-align: center;
  color: var(--text-mute);
  font-size: .8rem;
  margin-top: .9rem;
}

/* ---------- access ---------- */
.access {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.2rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(51,73,90,.06);
}

.access__body { padding: 1.6rem; }

.access__title {
  font-family: "Zen Maru Gothic", "Noto Sans JP", sans-serif;
  color: var(--navy);
  font-weight: 700;
  font-size: 1.2rem;
  margin: 0 0 .6em;
}

.access__list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .4rem .9rem;
  font-size: .9rem;
  margin: 0;
}

.access__list dt {
  font-weight: 700;
  color: var(--navy);
}

.access__list dd {
  color: var(--text-mute);
  margin: 0;
}

.access__map {
  background: var(--ph-bg);
  overflow: hidden;
  min-height: 280px;
}

.access__map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ---------- CTA ---------- */
.cta {
  background: var(--emphasis-bg);
  color: var(--navy);
  text-align: center;
}

.cta .eyebrow { color: var(--leaf-700); }

.cta__title {
  font-family: "Zen Maru Gothic", "Noto Sans JP", sans-serif;
  font-size: clamp(1.5rem, 5vw, 2.2rem);
  font-weight: 700;
  margin: .2em 0;
  color: var(--navy);
}

.cta__text {
  color: var(--text);
  margin: 0 0 1.4rem;
}

.btn,
.btn:hover {
  display: inline-block;
  background: var(--accent);
  color: var(--navy);
  font-weight: 700;
  border-radius: 999px;
  padding: .8em 2em;
  text-decoration: none;
  border: 1px solid transparent;
  box-shadow: 0 2px 8px rgba(224,168,62,.35);
}

.btn:hover { background: var(--accent-deep); }

/* ---------- CTA：来場者登録（QR・受付アプリの案内・使い方の画像） ---------- */
/* QRはスマホ幅では出さない（同じスマホ画面のQRは、そのスマホでは読み取れない。ボタンから直接開く） */
.cta__qr { display: none; margin: 1.8rem auto 0; }

@media (min-width: 768px) {
  .cta__qr { display: block; }
}

.cta__qr-lead {
  margin: 0 0 .6rem;
  font-weight: 700;
  color: var(--navy);
}

.cta__qr-img {
  display: block;
  width: 168px;
  height: auto;
  margin: 0 auto;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(51,73,90,.08);
}

.cta__notes {
  list-style: none;
  max-width: 620px;
  margin: 1.8rem auto 0;
  padding: 0;
  text-align: left;
  font-size: .92rem;
  color: var(--text);
}

.cta__notes li { position: relative; padding-left: 1.7em; }
.cta__notes li + li { margin-top: .5em; }

/* 行頭の記号：小さな葉っぱ */
.cta__notes li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .5em;
  width: .95em;
  height: .95em;
  background: var(--leaf-700);
  border-radius: 0 100% 0 100%;
}

.cta__guide {
  display: block;
  max-width: 720px;
  margin: 1.6rem auto 0;
  color: var(--navy);
  text-decoration: none;
}

.cta__guide-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 4px 16px rgba(51,73,90,.08);
}

.cta__guide-cap {
  display: inline-block;
  margin-top: .7rem;
  font-size: .88rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: .2em;
}

.cta__guide:hover .cta__guide-cap { color: var(--leaf-700); }

/* ---------- footer ---------- */
.site-footer {
  background: var(--navy);
  border-top: none;
  text-align: center;
  padding: 2rem 0;
  font-size: .82rem;
  color: var(--text-on-navy);
}

.site-footer a { color: var(--text-on-navy); }

.site-footer__name {
  font-family: "Zen Maru Gothic", "Noto Sans JP", sans-serif;
  color: var(--text-on-navy);
  font-weight: 700;
  margin-bottom: .3em;
}

.site-footer__contact--confirmed {
  display: block;
  margin-top: 1rem;
  font-size: .76rem;
  line-height: 1.9;
}

/* ============================================================
   下層ページ追加分（4ページ構成）
   ============================================================ */

/* ---------- visually hidden ---------- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- グローバルナビ ---------- */
.gnav { background: var(--accent); }

.gnav__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.gnav__item { display: flex; align-items: center; justify-content: center; }

.gnav__link {
  display: block;
  padding: .8em 1.6em;
  color: var(--navy);
  font-size: 1.05rem;
  font-weight: 700;
  text-decoration: none;
  line-height: 1.4;
}

.gnav__link:hover { color: var(--navy); background: rgba(255,255,255,.25); border-radius: 999px; }

.gnav__link[aria-current="page"] {
  background: var(--surface);
  border-radius: 999px;
  padding: .55em 1.4em;
  margin: .5em .2em;
  box-shadow: 0 2px 6px rgba(51,73,90,.15);
}

.gnav__link[aria-current="page"]:hover { background: var(--surface); }

/* 準備中（暮らし／しごとブース紹介：Coming Soon表示。2026-10-08〜公開前につき再び非活性化：<span>でクリック・
   キーボードフォーカスとも無効化し、カーソル・ホバーの変化も出さない。文字色は--mutedで沈めて準備中と分かるようにする） */
.gnav__link.is-coming,
.booth-guide__item.is-coming { color: var(--muted); cursor: default; }
.gnav__link.is-coming:hover { color: var(--muted); background: none; }
.booth-guide__item.is-coming:hover { color: var(--muted); background: var(--surface); }

/* Coming Soon：ラベル文字の上に半透明の手書き文字を斜めに重ねる（帯・背景なし）。
   マークアップは <span class="gnav__link is-coming">ラベル<span class="coming-soon">…</span></span> の形。 */
.gnav__link.is-coming,
.booth-guide__text { position: relative; }

.coming-soon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-8deg);
  font-family: "Zen Maru Gothic", "Noto Sans JP", sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .06em;
  white-space: nowrap;
  color: var(--navy);
  opacity: .7;
  pointer-events: none;
  user-select: none;
}
/* カードのラベルは左寄せで短いので、文字ブロックをラベル幅に縮めて重ね文字の中心をラベルに合わせる */
.booth-guide__item.is-coming .booth-guide__text { flex: 0 1 auto; }
.booth-guide__item.is-coming .coming-soon { font-size: 1.3rem; }

/* 4項目が1行に収まりきらない中間幅で、3+1の不揃いな折り返しにならないよう、
   SPと同じ2×2グリッドに早めに切り替える */
@media (max-width: 860px) {
  .gnav__list { display: grid; grid-template-columns: repeat(2, 1fr); }
  .gnav__link { display: block; text-align: center; padding: .8em .8em; }
  .gnav__link[aria-current="page"] { margin: .5em auto; }
}

@media (max-width: 560px) {
  .gnav__link { padding: .8em .4em; font-size: .78rem; }
  .gnav__link.is-coming .coming-soon { font-size: .9rem; }
}

/* ---------- 下層ページ見出し ---------- */
.section--head-only { padding-bottom: 0; }

.page-lead {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  color: var(--text);
  font-size: .92rem;
}

/* リード文の直下に一覧（暮らし）／絞り込み（しごと）が続くページの間隔（旧：ダミー注記の余白が兼ねていた） */
.page-lead + .cards,
.page-lead + .filter { margin-top: 2rem; }

/* ---------- 絞り込み（しごとブース） ---------- */
.filter {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1rem 1.2rem;
  margin-bottom: 1.4rem;
  box-shadow: 0 4px 16px rgba(51,73,90,.06);
}

.filter__row {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  align-items: baseline;
  padding: .35rem 0;
}

.filter__label {
  flex: none;
  width: 64px;
  font-size: .8rem;
  font-weight: 700;
  color: var(--navy);
}

.filter__chips {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}

.filter__chip {
  font-family: inherit;
  font-size: .78rem;
  line-height: 1.6;
  color: var(--navy);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .25em .9em;
  cursor: pointer;
}

.filter__chip:hover { background: var(--leaf-100); }

.filter__chip[aria-pressed="true"] {
  background: var(--leaf-500);
  border-color: var(--leaf-500);
  color: var(--navy); /* 白文字はWCAG AA未達のため navy に変更 */
}

.filter__result {
  margin: .6rem 0 0;
  font-size: .78rem;
  color: var(--text-mute);
}

/* ---------- ブースカード（しごと／暮らし共通） ---------- */
/* 絞り込みで件数が減っても列幅を保つため auto-fill を使う */
.cards--booth { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }

.booth {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  background: var(--surface);
  box-shadow: 0 4px 16px rgba(51,73,90,.08);
}

.booth[hidden] { display: none; }

.booth__name {
  margin: 0;
  background: var(--navy);
  color: var(--text-on-navy);
  font-family: "Zen Maru Gothic", "Noto Sans JP", sans-serif;
  font-size: .95rem;
  font-weight: 700;
  text-align: center;
  padding: .6em 1em;
}

.booth__thumb {
  background: var(--ph-bg);
  border-bottom: 1px solid var(--line);
  aspect-ratio: 16 / 10;
  display: grid;
  place-items: center;
}

.booth__ph {
  color: var(--ph-text);
  font-weight: 700;
  font-size: .9rem;
}

.booth__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  padding: .9rem 1rem 0;
}

.booth__meta .tag { margin-top: 0; }

.booth__catch {
  margin: .8rem 0 0;
  padding: 0 1rem;
  font-size: .92rem;
  font-weight: 700;
  color: var(--navy);
}

.booth__text {
  flex: 1;
  margin: .3rem 0 0;
  padding: 0 1rem;
  font-size: .82rem;
  color: var(--text-mute);
}

.booth__foot { padding: 1rem; }

.badge {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  background: var(--accent);
  color: var(--navy);
  border-radius: 999px;
  padding: .1em .8em;
}

.btn-line,
.btn-line:hover {
  display: block;
  text-align: center;
  border: 1px solid var(--leaf-500);
  border-radius: 999px;
  padding: .5em 1em;
  font-size: .82rem;
  font-weight: 700;
  color: var(--leaf-700);
  text-decoration: none;
}

.btn-line:hover { background: var(--leaf-100); }

/* ---------- ブース・コンテンツ導線 ---------- */
.booth-guide__lead {
  margin: 0;
  text-align: center;
  font-family: "Zen Maru Gothic", "Noto Sans JP", sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--navy);
}

.booth-guide {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 1.4rem;
}

/* 3列だと画像＋文字が窮屈になる幅では1列にし、広がりすぎないよう幅を絞る */
@media (max-width: 1000px) {
  .booth-guide { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
}

.booth-guide__item {
  display: flex;
  align-items: center;
  gap: .9rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1rem .9rem;
  text-align: left;
  font-weight: 700;
  color: var(--navy);
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(51,73,90,.06);
}

.booth-guide__img {
  flex: none;
  width: 96px;
  height: auto;
}

.booth-guide__text { flex: 1; min-width: 0; }

.booth-guide__item:hover {
  color: var(--navy);
  background: var(--leaf-100);
}

/* ---------- みどころ3ブロック（TOP・仮） ---------- */
.features {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.6rem;
}

@media (min-width: 768px) {
  .features {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.6rem 2.4rem;
  }
}

.feature {
  display: flex;
  flex-direction: column;
}

.feature__head { text-align: center; }

.feature__badge {
  position: relative;
  display: inline-block;
  background: var(--accent);
  color: var(--navy);
  font-family: "Zen Maru Gothic", "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: .98rem;
  line-height: 1.5;
  text-align: center;
  border-radius: 16px;
  padding: .7em 1.6em;
}

.feature__badge::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 10px solid transparent;
  border-top-color: var(--accent);
}

.feature__text {
  margin: 1.6rem 0 1rem;
  font-size: .92rem;
  color: var(--text);
}

.feature__thumb {
  margin-top: auto;
  background: var(--ph-bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  display: grid;
  place-items: center;
}

.feature__ph {
  color: var(--ph-text);
  font-weight: 700;
  font-size: .9rem;
}

.feature__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}