@charset "UTF-8";
/*-----------------------------------------------------
/////components.css/////
  全ページ共通の部品。
  01 hero（装飾・祭ロゴ）
  02 page heading / breadcrumb
  03 section title
  04 notice（年度注記）
  05 card（.wrap / .ks-card）・本文見出し
  06 button
  07 tabs（日付切替）
  08 filter（検索・絞り込み）
  09 archive（折りたたみ）
-----------------------------------------------------*/

/*-----------------------------------------------------
***01 hero（デモ準拠の装飾。パンフレット到着後に差し替え想定）***
-----------------------------------------------------*/
.page-hero,
.home-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 5% 20%, rgba(255, 63, 127, 0.22) 0 7%, transparent 7.2%),
    radial-gradient(circle at 94% 22%, rgba(22, 169, 229, 0.20) 0 8%, transparent 8.2%),
    linear-gradient(#fff, var(--c-bg-tint));
  border-bottom: 1px solid #f1f2f4;
}
/* 下層ページのヘッダー：ロゴ・開催日入りのバナー1枚（img/2026/header/page_banner.*、縦横比 2171:356）。
   幅100%・高さautoで全体を表示する。 */
.page-hero {
  line-height: 0;
  background: var(--c-surface);
}
.page-hero::after,
.page-hero .hero-deco {
  display: none;
}
.page-hero__banner,
.page-hero__banner img {
  display: block;
  width: 100%;
  height: auto;
}
.home-hero {
  min-height: 560px;
  padding: var(--space-8) 0;
}
/* 下端の色付きの丘 */
.page-hero::after,
.home-hero::after {
  content: "";
  position: absolute;
  left: -5%;
  right: -5%;
  bottom: -82px;
  height: 165px;
  background:
    radial-gradient(ellipse at 12% 100%, var(--c-yellow) 0 32%, transparent 33%),
    radial-gradient(ellipse at 31% 100%, #ff86a9 0 36%, transparent 37%),
    radial-gradient(ellipse at 51% 100%, #20b1e8 0 35%, transparent 36%),
    radial-gradient(ellipse at 70% 100%, #31c698 0 36%, transparent 37%),
    radial-gradient(ellipse at 90% 100%, #ffda46 0 35%, transparent 36%);
}
.hero-deco {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hero-confetti {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, var(--c-pink) 0 4px, transparent 5px),
    radial-gradient(circle, var(--c-blue) 0 3px, transparent 4px),
    linear-gradient(35deg, transparent 44%, var(--c-yellow) 45% 55%, transparent 56%);
  background-size: 150px 150px, 190px 190px, 230px 230px;
  opacity: 0.65;
}
.garland {
  position: absolute;
  left: -4%;
  right: -4%;
  top: 22px;
  height: 68px;
  border-top: 4px solid var(--c-blue);
  border-radius: 50%;
  transform: rotate(1deg);
}
.garland::after {
  content: "";
  position: absolute;
  inset: 2px 0 0;
  background: linear-gradient(90deg, var(--c-pink), var(--c-yellow), var(--c-green), var(--c-blue), var(--c-orange), var(--c-pink));
  clip-path: polygon(0 0, 4% 0, 2% 70%, 7% 0, 11% 0, 9% 72%, 14% 0, 18% 0, 16% 74%, 21% 0, 25% 0, 23% 70%, 28% 0, 32% 0, 30% 75%, 35% 0, 39% 0, 37% 72%, 42% 0, 46% 0, 44% 70%, 49% 0, 53% 0, 51% 76%, 56% 0, 60% 0, 58% 72%, 63% 0, 67% 0, 65% 74%, 70% 0, 74% 0, 72% 71%, 77% 0, 81% 0, 79% 74%, 84% 0, 88% 0, 86% 70%, 91% 0, 95% 0, 93% 75%, 98% 0, 100% 0, 100% 0);
}

/* 祭ロゴ（テキストの仮ロゴ。inc/config.php の ks_festival_logo() が出力） */
.festival-logo {
  position: relative;
  z-index: 3;
  display: block;
  margin: 0;
  color: var(--c-ink);
  text-align: center;
  line-height: 1;
  transform: rotate(-2deg);
}
.festival-logo__no {
  display: block;
  margin-bottom: -6px;
  font-size: 24px;
  font-weight: var(--fw-black);
  letter-spacing: 0.06em;
}
.festival-logo__no span {
  color: var(--c-pink);
  font-size: 56px;
}
.festival-logo__name {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  font-size: clamp(72px, 9vw, 120px);
  font-weight: var(--fw-black);
  letter-spacing: -0.1em;
  line-height: 0.9;
}
.festival-logo__name span:first-child {
  background: var(--grad-accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.festival-logo__name span:last-child {
  margin-left: 0.06em;
  color: var(--c-orange);
}
.festival-logo__name::after {
  content: "";
  position: absolute;
  left: 12%;
  width: 75%;
  height: 10px;
  bottom: -22px;
  border-radius: 50%;
  background: var(--c-yellow);
}
.home-hero .festival-logo__no {
  font-size: 30px;
}
.home-hero .festival-logo__no span {
  font-size: 80px;
}
.home-hero .festival-logo__name {
  font-size: clamp(96px, 15vw, 190px);
}
@media (max-width: 760px) {
  .home-hero {
    min-height: 440px;
  }
  .festival-logo__no span {
    font-size: 44px;
  }
  .festival-logo__name {
    font-size: 72px;
  }
  .home-hero .festival-logo__no {
    font-size: 24px;
  }
  .home-hero .festival-logo__no span {
    font-size: 56px;
  }
  .home-hero .festival-logo__name {
    font-size: 92px;
  }
}

/*-----------------------------------------------------
***02 page heading / breadcrumb***
-----------------------------------------------------*/
.page-heading {
  padding: var(--space-6) 0 var(--space-3);
}
/* ページタイトル（英字の見出し＋h1）は中央揃え。パンくずは左揃えのまま */
.page-heading .eyebrow {
  text-align: center;
}
.page-heading__ttl {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.2em;
  font-size: var(--fs-display);
  letter-spacing: -0.04em;
}
.page-heading__icon {
  flex: none;
  display: none; /* ページ別アイコンは一時非表示。戻すときは block にする（下の ::before は削除） */
  width: 1.15em;
  height: 1.15em;
}
.page-heading__icon img {
  display: block;
  width: 100%;
  height: 100%;
}
/* ページタイトル（h1）のアイコンの代わり：高麗祭公式キャラクター（ひよこ家族・5羽 img/2026/character/character26_family.*） */
.page-heading__ttl::before {
  content: "";
  flex: none;
  aspect-ratio: 1039 / 800;
  background: url("../../img/2026/character/character26_family.png") center / contain no-repeat;
  background: image-set(url("../../img/2026/character/character26_family.webp") type("image/webp"), url("../../img/2026/character/character26_family.png") type("image/png")) center / contain no-repeat;
}
.page-heading__ttl::before {
  height: 1.3em;
}
.ks-breadcrumb {
  margin-bottom: var(--space-7);
  font-size: var(--fs-xs);
  line-height: 1.5;
}
.ks-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-1) 0;
}
.ks-breadcrumb li {
  color: var(--c-text-muted);
}
.ks-breadcrumb li + li::before {
  content: "/";
  padding: 0 0.7em;
}
.ks-breadcrumb a {
  color: var(--c-text-muted);
}
.ks-breadcrumb a:hover {
  color: var(--c-accent-text);
}
.ks-breadcrumb [aria-current] {
  color: var(--c-ink);
  font-weight: var(--fw-bold);
}
@media (max-width: 760px) {
  .page-heading {
    padding-top: var(--space-5);
  }
  .ks-breadcrumb {
    margin-bottom: var(--space-6);
  }
}

/*-----------------------------------------------------
***03 section title（トップの各セクション）***
-----------------------------------------------------*/
.ks-section-ttl {
  margin-bottom: var(--space-6);
  text-align: center;
}
.ks-section-ttl h2 {
  font-size: var(--fs-xl);
}

/*-----------------------------------------------------
***04 notice（年度注記。inc/config.php の ks_notice() が出力）***
-----------------------------------------------------*/
.ks-notice {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
  padding: var(--space-3) var(--space-4);
  background: var(--c-notice-bg);
  border: 1px solid var(--c-notice-line);
  border-radius: var(--radius-m);
  font-size: 13px;
  line-height: 1.6;
}
.ks-notice__badge {
  flex: none;
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  background: var(--c-accent-fill);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  white-space: nowrap;
}
.ks-notice__label {
  font-weight: var(--fw-bold);
}
.ks-notice__text {
  color: var(--c-text-muted);
}
@media (max-width: 760px) {
  .ks-notice {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }
}

/*-----------------------------------------------------
***05 card・本文見出し***
  .wrap は既存HTMLの本文ブロック。白いカードとして表示する。
  幅：wrap_wide = コンテナ幅 / wrap_mid = 1000px / wrap_narrow = 860px
-----------------------------------------------------*/
.wrap,
.ks-card {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-s);
}
.wrap {
  margin: 0 auto var(--space-5);
  padding: clamp(20px, 4vw, 40px);
}
.wrap:last-child {
  margin-bottom: 0;
}
.wrap_mid {
  max-width: var(--container-mid);
}
.wrap_narrow {
  max-width: var(--container-narrow);
}
.ks-card {
  overflow: hidden;
}
/* カード内のセクション見出し */
.wrap > h2 {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  font-size: var(--fs-l);
}
.wrap > h2::before {
  content: "";
  display: none; /* 一時非表示。戻すときはこの行を削除 */
  flex: none;
  width: 8px;
  height: 1.1em;
  border-radius: var(--radius-pill);
  background: var(--grad-accent);
}
/* リード文 */
.txt_lead {
  margin-bottom: var(--space-3);
  padding-left: 0.8em;
  border-left: 4px solid var(--c-accent);
  font-size: var(--fs-m);
  font-weight: var(--fw-bold);
  line-height: 1.6;
}

/*-----------------------------------------------------
***06 button***
-----------------------------------------------------*/
.ks-btn,
.link-btn_square-border a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-width: 240px;
  min-height: 52px;
  padding: 12px 28px;
  border: 2px solid var(--c-accent);
  border-radius: var(--radius-pill);
  background: var(--c-surface);
  color: var(--c-ink);
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
}
.ks-btn:hover,
.link-btn_square-border a:hover {
  background: var(--c-soft-pink);
  color: var(--c-ink);
}
.ks-btn_primary {
  border-color: var(--c-accent-fill);
  background: var(--c-accent-fill);
  color: #fff;
}
.ks-btn_primary:hover {
  border-color: var(--c-accent-fill);
  background: #b80f4b;
  color: #fff;
}
.link-btn_square-border {
  margin-top: var(--space-6);
  text-align: center;
}
.link-btn_square-border a::before {
  content: "←";
}
/* 団体個別ページの「一覧に戻る」ボタン：塗りつぶし・大きめ・影つきで目立たせる */
.ks-detail-back {
  margin-top: var(--space-8);
}
.ks-detail-back a {
  min-width: min(360px, 100%);
  min-height: 64px;
  padding: 14px 40px;
  border-color: var(--c-accent-fill);
  background: var(--c-accent-fill);
  box-shadow: 0 10px 24px rgba(217, 20, 90, 0.28);
  color: #fff;
  font-size: var(--fs-m);
  transition: background var(--dur), border-color var(--dur), box-shadow var(--dur), transform var(--dur);
}
.ks-detail-back a::before {
  display: inline-block;
  font-size: 1.2em;
  transition: transform var(--dur);
}
.ks-detail-back a:hover {
  border-color: #b80f4b;
  background: #b80f4b;
  box-shadow: 0 14px 30px rgba(217, 20, 90, 0.36);
  color: #fff;
  transform: translateY(-2px);
}
.ks-detail-back a:hover::before {
  transform: translateX(-4px);
}
.ks-detail-back a:focus-visible {
  outline: 3px solid var(--c-ink);
  outline-offset: 3px;
}
.ks-link-btn {
  padding: var(--space-1) 0;
  border: 0;
  background: none;
  color: var(--c-link);
  font-size: 13px;
  text-decoration: underline;
}

/*-----------------------------------------------------
***07 tabs（日付切替。js/ui.js の [data-ks-tabs]）***
  JS無効時はタブを出さず、全パネルを縦に表示する
-----------------------------------------------------*/
.ks-tabs__list {
  display: none;
}
.js .ks-tabs.is-ready > .ks-tabs__list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: var(--space-5);
}
.ks-tab {
  min-width: 210px;
  padding: 14px 22px;
  border: 0;
  border-radius: 18px;
  background: var(--c-surface-muted);
  color: var(--c-ink);
  font-size: 20px;
  font-weight: var(--fw-black);
  line-height: 1.3;
  text-align: left;
}
.ks-tab small {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-xxs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.15em;
}
.ks-tab:hover {
  background: #e3e8ef;
}
.ks-tab[aria-selected="true"] {
  background: var(--c-accent-fill);
  color: #fff;
}
.ks-tabs__panel:focus-visible {
  outline-offset: 4px;
}
@media (max-width: 760px) {
  .js .ks-tabs.is-ready > .ks-tabs__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .ks-tab {
    min-width: 0;
    padding: 12px 16px;
    font-size: 17px;
  }
}

/*-----------------------------------------------------
***08 filter（検索・絞り込み。js/ui.js の [data-ks-filter]）***
  JS無効時は検索UIを出さず全件表示する
-----------------------------------------------------*/
.ks-filter {
  display: none;
}
.js .ks-filter.is-ready {
  display: block;
  margin-bottom: var(--space-6);
}
.ks-filter__row + .ks-filter__row {
  margin-top: var(--space-4);
}
.ks-filter fieldset {
  padding: 0;
  border: 0;
  min-width: 0;
}
.ks-filter legend {
  padding: 0;
}
.ks-filter__label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--fs-s);
  font-weight: var(--fw-bold);
  line-height: 1.4;
}
.ks-search {
  position: relative;
  width: min(560px, 100%);
}
/* 虫めがねアイコン */
.ks-search::before,
.ks-search::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.ks-search::before {
  left: 18px;
  top: 50%;
  width: 16px;
  height: 16px;
  margin-top: -9px;
  border: 2px solid var(--c-navy);
  border-radius: 50%;
}
.ks-search::after {
  left: 31px;
  top: 50%;
  width: 7px;
  height: 2px;
  margin-top: 6px;
  background: var(--c-navy);
  transform: rotate(45deg);
}
.ks-search input {
  width: 100%;
  height: 54px;
  padding: 0 52px 0 46px;
  border: 2px solid #dfe4ec;
  border-radius: var(--radius-pill);
  background: var(--c-surface);
  color: var(--c-ink);
  font-size: var(--fs-base); /* iOSのズーム防止のため16px以上 */
  -webkit-appearance: none;
  appearance: none;
}
.ks-search input::placeholder {
  color: #7d899b;
}
.ks-search input:focus {
  border-color: var(--c-navy);
  outline: none;
}
.ks-search input:focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 2px;
}
.ks-search input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}
.ks-search__clear {
  position: absolute;
  top: 50%;
  right: 7px;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--c-text-muted);
  font-size: 22px;
  line-height: 1;
}
.ks-search__clear:hover {
  background: var(--c-surface-muted);
  color: var(--c-ink);
}
.ks-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.ks-chip {
  min-height: 42px;
  padding: 8px 18px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--c-surface-muted);
  color: var(--c-ink);
  font-size: var(--fs-s);
  font-weight: var(--fw-bold);
  line-height: 1.3;
}
.ks-chip:hover {
  background: #e3e8ef;
}
.ks-chip[aria-pressed="true"] {
  background: var(--c-accent-fill);
  color: #fff;
}
.ks-filter__status {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-4);
  line-height: 1.4;
}
.ks-filter__count {
  color: var(--c-text-muted);
  font-size: 13px;
}
.ks-filter__count b {
  margin-right: 2px;
  color: var(--c-accent-text);
  font-size: 28px;
  font-weight: var(--fw-black);
}
.ks-empty {
  padding: var(--space-8) var(--space-4);
  color: var(--c-text-muted);
  text-align: center;
  line-height: 1.7;
}
.ks-empty p {
  margin-bottom: var(--space-5);
}
.ks-more {
  margin-top: var(--space-6);
  text-align: center;
}
/* 自動読み込み時はボタンを出さない（監視用の目印として高さだけ残す） */
.ks-more.is-auto {
  min-height: 1px;
  margin-top: 0;
}
.ks-more.is-auto .ks-btn {
  display: none;
}

/*-----------------------------------------------------
***09 archive（過去回の内容を折りたたむ）***
-----------------------------------------------------*/
.archive {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-xl);
}
.archive__summary {
  position: relative;
  display: grid;
  padding: var(--space-5) 64px var(--space-5) var(--space-5);
  cursor: pointer;
  list-style: none;
}
.archive__summary::-webkit-details-marker {
  display: none;
}
.archive__summary::after {
  content: "+";
  position: absolute;
  right: var(--space-5);
  top: 50%;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-top: -18px;
  border-radius: 50%;
  background: var(--c-surface-muted);
  font-size: 22px;
  font-weight: var(--fw-bold);
  line-height: 1;
}
.archive[open] > .archive__summary::after {
  content: "−";
}
.archive__summary .eyebrow {
  margin-bottom: var(--space-1);
}
.archive__ttl {
  font-size: var(--fs-m);
  font-weight: var(--fw-black);
  line-height: 1.4;
}
.archive__body {
  padding: 0 var(--space-5) var(--space-6);
}

/* 画像の拡大表示は lightbox2（js/lightbox.min.js・css/lightbox.min.css。開催イベントページと同じ）を使用。a[data-lightbox] */
a[data-lightbox] {
  display: block;
  cursor: zoom-in;
}