@charset "UTF-8";
/* ============================================================
   pages/public.css  トップ・検索結果・フォーム・固定ページ
   ============================================================ */

/* ============================================================
   1. トップページ
   ============================================================ */

/* --- ヒーロー --- */
.p-top__hero {
  padding-block: var(--space-8);
  background-color: var(--color-surface-deep);
  color: var(--color-text-inverse);
}

@media (min-width: 1024px) {
  .p-top__hero {
    padding-block: var(--space-10);
  }
}

.p-top__hero-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 1024px) {
  .p-top__hero-inner {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: var(--space-8);
  }

  .p-top__hero-inner--no-image {
    grid-template-columns: 1fr;
    max-width: var(--container-narrow);
    margin-inline: auto;
  }
}

.p-top__hero-image {
  order: -1;
  width: 100%;
  aspect-ratio: var(--hero-image-ratio);
  border-radius: var(--radius-lg);
  object-fit: cover;
  box-shadow: var(--shadow-lg);
}

@media (min-width: 1024px) {
  .p-top__hero-image {
    order: 1;
    aspect-ratio: 4 / 3;
  }
}

.p-top__hero-title {
  margin-bottom: var(--space-3);
  color: var(--color-text-inverse);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  text-align: center;
}

.p-top__hero-lead {
  margin-bottom: var(--space-6);
  color: rgba(255, 255, 255, 0.86);
  text-align: center;
}

@media (min-width: 1024px) {
  .p-top__hero-title,
  .p-top__hero-lead {
    text-align: left;
  }
}

/* --- クイック検索カード --- */
.p-top__quick-search {
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-lg);
  color: var(--color-text);
}

.p-top__quick-search-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

@media (min-width: 480px) {
  .p-top__quick-search-row {
    flex-direction: row;
  }

  .p-top__quick-search-row .c-select {
    flex: 1;
  }
}

.p-top__quick-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.p-top__quick-tags a.c-tag {
  background-color: var(--color-primary-light);
  color: var(--color-primary);
}

/* --- 信頼材料バー --- */
.p-top__trust {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  padding-block: var(--space-6);
}

@media (min-width: 768px) {
  .p-top__trust {
    grid-template-columns: repeat(4, 1fr);
  }
}

.p-top__trust-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  text-align: center;
}

.p-top__trust-value {
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
}

.p-top__trust-label {
  color: var(--color-text-sub);
  font-size: var(--fs-small);
}

/* --- 区タイル --- */
.p-top__wards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}

@media (min-width: 768px) {
  .p-top__wards {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 1024px) {
  .p-top__wards {
    grid-template-columns: repeat(6, 1fr);
  }
}

.p-top__ward {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--btn-height);
  padding: var(--space-2) var(--space-3);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  color: var(--color-primary);
  font-weight: var(--fw-bold);
  text-align: center;
  text-decoration: none;
}

.p-top__ward:hover {
  border-color: var(--color-primary);
  background-color: var(--color-primary-light);
  color: var(--color-primary-hover);
}

.p-top__ward .c-icon {
  width: var(--space-5);
  height: var(--space-5);
  color: var(--color-text-weak);
}

/* --- 目的別タイル --- */
.p-top__purposes {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--grid-gap);
}

@media (min-width: 768px) {
  .p-top__purposes {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .p-top__purposes {
    grid-template-columns: repeat(4, 1fr);
  }
}

.p-top__purpose {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-4);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  color: var(--color-text);
  text-decoration: none;
}

.p-top__purpose:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
  color: var(--color-text);
}

.p-top__purpose-title {
  font-size: var(--fs-h3);
  color: var(--color-text);
  line-height: var(--lh-h3);
}

.p-top__purpose-desc {
  color: var(--color-text-sub);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}

/* --- 詳しい条件（アコーディオン） --- */
.p-top__advanced {
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
}

.p-top__advanced-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: calc(var(--tap-min) + var(--space-2));
  padding: var(--space-4) var(--space-5);
  font-size: var(--fs-h3);
  cursor: pointer;
  list-style: none;
}

.p-top__advanced-head::-webkit-details-marker {
  display: none;
}

.p-top__advanced-head::after {
  content: "条件をすべて見る ＋";
  flex-shrink: 0;
  color: var(--color-primary);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
}

.p-top__advanced[open] .p-top__advanced-head::after {
  content: "閉じる －";
}

.p-top__advanced-body {
  padding: 0 var(--space-5) var(--space-5);
  border-top: var(--border-width) solid var(--color-border);
}

/* --- 条件グループ（チェックボックス群） --- */
.p-search-form__group {
  margin-top: var(--space-5);
}

.p-search-form__legend {
  margin-bottom: var(--space-2);
  font-weight: var(--fw-bold);
}

.p-search-form__hint {
  margin-bottom: var(--space-3);
  color: var(--color-text-sub);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}

.p-search-form__choices {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
}

@media (min-width: 768px) {
  .p-search-form__choices {
    grid-template-columns: repeat(2, 1fr);
  }
}

.p-search-form__choice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  min-height: var(--tap-min);
  padding: var(--space-2) var(--space-3);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.p-search-form__choice:hover {
  border-color: var(--color-primary);
  background-color: var(--color-primary-light);
}

.p-search-form__choice-text {
  flex: 1;
}

.p-search-form__choice-desc {
  display: block;
  color: var(--color-text-sub);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}


/* --- 使い方の3ステップ --- */
.p-top__steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--grid-gap);
}

@media (min-width: 768px) {
  .p-top__steps {
    grid-template-columns: repeat(3, 1fr);
  }
}

.p-top__step {
  padding: var(--space-5);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  text-align: center;
}

.p-top__step .c-icon-badge {
  margin-bottom: var(--space-3);
}

.p-top__step-title {
  margin-bottom: var(--space-2);
  font-size: var(--fs-h3);
}

.p-top__step-desc {
  color: var(--color-text-sub);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}

/* --- 新着コラム --- */
.p-top__columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--grid-gap);
}

@media (min-width: 768px) {
  .p-top__columns {
    grid-template-columns: repeat(3, 1fr);
  }
}


/* ============================================================
   2. 検索結果
   ============================================================ */

.p-search {
  display: block;
}

@media (min-width: 1024px) {
  .p-search__layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: var(--space-6);
    align-items: start;
  }
}

/* --- 絞り込み（アコーディオン） --- */
.p-search__facet {
  margin-bottom: var(--space-5);
  padding: var(--space-4);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
}

.p-search__facet-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--tap-min);
  margin-bottom: var(--space-1);
  font-size: var(--fs-h3);
  cursor: pointer;
  list-style: none;
}

.p-search__facet-summary::-webkit-details-marker {
  display: none;
}

.p-search__facet-summary::after {
  content: "閉じる";
  color: var(--color-primary);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
}

.p-search__facet:not([open]) .p-search__facet-summary::after {
  content: "開く";
}

.p-search__facet form {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: var(--border-width) solid var(--color-border);
}

@media (min-width: 1024px) {
  .p-search__facet {
    position: sticky;
    top: var(--space-4);
    max-height: 90vh;
    overflow-y: auto;
  }
}

/* 条件チップ・区リンク内のアイコン */
.c-icon--inline {
  width: var(--space-4);
  height: var(--space-4);
  margin-right: var(--space-1);
  vertical-align: -3px;
}

.p-search__facet-title {
  margin-bottom: var(--space-4);
  font-size: var(--fs-h3);
}

/* --- 結果ヘッダー --- */
.p-search__head {
  margin-bottom: var(--space-4);
}

.p-search__title {
  margin-bottom: var(--space-2);
  font-size: var(--fs-h1);
}

.p-search__count {
  color: var(--color-text-sub);
}

.p-search__conditions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.p-search__condition {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tag-height);
  padding-inline: var(--space-3);
  border: var(--border-width) solid var(--color-primary);
  border-radius: var(--radius-full);
  background-color: var(--color-primary-light);
  color: var(--color-primary);
  font-size: var(--fs-small);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.p-search__condition::after {
  content: "×";
  flex-shrink: 0;
  font-weight: var(--fw-bold);
  line-height: 1;
}

.p-search__sort {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.p-search__results {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--grid-gap);
}

@media (min-width: 768px) {
  .p-search__results {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .p-search__results {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================================================
   3. フォーム（掲載申込・お問い合わせ）
   ============================================================ */

.p-form {
  max-width: var(--container-narrow);
  margin-inline: auto;
  padding: var(--space-6) var(--space-4);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
}

@media (min-width: 768px) {
  .p-form {
    padding: var(--space-8) var(--space-6);
  }
}

.p-form__lead {
  margin-bottom: var(--space-6);
  color: var(--color-text-sub);
}

.p-form__notice {
  margin-bottom: var(--space-6);
  padding: var(--space-4);
  border: var(--border-width) solid var(--color-warning);
  border-radius: var(--radius-md);
  background-color: var(--color-accent-bg);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}

.p-form__submit {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: var(--border-width) solid var(--color-border);
}

.p-form__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

@media (min-width: 768px) {
  .p-form__row {
    grid-template-columns: 1fr 1fr;
  }
}

/* ============================================================
   4. 固定ページ・ガイド
   ============================================================ */

.p-page__title {
  margin-bottom: var(--space-2);
  font-size: var(--fs-h1);
  text-align: center;
}

.p-page__eyebrow {
  margin-bottom: var(--space-6);
  color: var(--color-primary);
  font-weight: var(--fw-bold);
  text-align: center;
}

.p-page__draft {
  margin-bottom: var(--space-5);
}

/* ============================================================
   5. エラーページ
   ============================================================ */

.p-error {
  max-width: var(--container-narrow);
  margin-inline: auto;
  padding: var(--space-10) var(--gutter);
  text-align: center;
}

.p-error__code {
  color: var(--color-text-weak);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
}

.p-error__title {
  margin-bottom: var(--space-4);
  font-size: var(--fs-h1);
}

.p-error__text {
  margin-bottom: var(--space-6);
  color: var(--color-text-sub);
}

.p-error__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
}

/* ============================================================
   6. 区の一覧（京都市特化）
   ============================================================ */

.p-top__wards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}

@media (min-width: 768px) {
  .p-top__wards {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 1024px) {
  .p-top__wards {
    grid-template-columns: repeat(6, 1fr);
  }
}

.p-top__ward {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--btn-height);
  padding: var(--space-2) var(--space-3);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  color: var(--color-primary);
  font-weight: var(--fw-bold);
  text-align: center;
  text-decoration: none;
}

.p-top__ward:hover {
  border-color: var(--color-primary);
  background-color: var(--color-primary-light);
  color: var(--color-primary-hover);
}

/* --- 検索結果ページ下部の区リンク --- */
.p-search__other-wards {
  margin-block: var(--space-8) var(--space-6);
}

.p-search__ward-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}