/* =========================================================
   はどあばんち 共通スタイル  css/style.css
   ---------------------------------------------------------
   非エンジニアの持ち主さんへ:
   ・色を変えたいときは、この一番上の「デザイントークン」の
     ところだけ書き換えれば、サイト全体の色が変わります。
   ・画像の差し替えは各HTMLファイル側でおこないます。
   ========================================================= */

/* ---- デザイントークン（色・共通設定）----
   色コード（#の6桁）を変えると全体の色味が変わります。
   ▼このサイトは「パステルで明るい春」の配色です。
     淡い空色の空／白い雲／アイボリーの家／若草色の芝生／
     桜ピンク／屋根のティール(青緑) をイメージしています。 */
:root {
  --cream: #fdfaf0;       /* 基本の背景（明るいアイボリー）*/
  --cream-2: #f6efe0;     /* 少し濃いアイボリー */
  --paper: #ffffff;       /* カードなど紙の面（白でパキッと）*/
  --ink: #2f4a44;         /* 文字色（深いティール寄りの緑）*/
  --ink-soft: #5f7a72;    /* うすい文字色 */
  --line: #e9e2d1;        /* 罫線 */
  --line-soft: #f2ecdd;   /* うすい罫線 */

  --sakura: #e78ba3;      /* 桜ピンク（アクセント／明るめ）*/
  --sakura-deep: #d4647f; /* 濃い桜ピンク（主ボタン・見出し）*/
  --sakura-tint: #fce8ee; /* うすい桜ピンクの面 */

  --teal: #2aa7a7;        /* ★ティール(青緑)。副アクセント（屋根の色）*/
  --teal-deep: #1d8688;   /* 濃いティール（副ボタンの文字など）*/
  --teal-tint: #dff2f2;   /* うすいティールの面 */

  --grass: #a8d98a;       /* 若草色（フッターの芝生）*/
  --grass-deep: #7bbf5e;  /* 濃い若草色 */
  --leaf: #7bbf5e;        /* 若草色（カードの縁など。grass-deepと同系）*/
  --leaf-tint: #e9f5e0;   /* うすい若草色の面 */

  --sky: #7cc3e0;         /* 空色（アクセント線など）*/
  --sky-tint: #eaf6fc;    /* うすい空色の面（帯・囲み）*/
  --sky-top: #cde9f6;     /* 空の水色（ヒーロー上部）*/
  --sky-soft: #eaf6fc;    /* 淡い空色（グラデの下端）*/

  /* secret.html（夜のページ）用 ※夜テーマはそのまま維持しています */
  --night-1: #2c3a33;
  --night-2: #1d2823;
  --gold: #e7c98a;        /* 夜の灯り＆エア参加カードのゴールド */

  /* 角丸・影 */
  --r-s: 10px;
  --r-m: 18px;
  --r-l: 28px;
  --shadow-s: 0 2px 8px rgba(60, 50, 30, 0.06);
  --shadow-m: 0 6px 20px rgba(60, 50, 30, 0.08);
  --shadow-l: 0 12px 34px rgba(60, 50, 30, 0.10);

  /* 中身の最大幅 */
  --wrap: 960px;

  --font-round: "M PLUS Rounded 1c", system-ui, sans-serif;
  --font-body: system-ui, -apple-system, "Hiragino Kaku Gothic ProN",
    "Noto Sans JP", "Meiryo", sans-serif;
}

/* ---- リセット・基本 ---- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  line-height: 1.85;
  /* 背景：明るいアイボリー＋ごく淡い桜・空・若草のにじみ（画像不使用）*/
  background-color: var(--cream);
  background-image:
    radial-gradient(circle at 12% 8%, rgba(231, 139, 163, 0.10), transparent 42%),
    radial-gradient(circle at 88% 14%, rgba(124, 195, 224, 0.12), transparent 46%),
    radial-gradient(circle at 78% 88%, rgba(168, 217, 138, 0.14), transparent 48%);
  background-attachment: fixed;
  /* 横スクロール防止（スマホ最優先）*/
  overflow-x: hidden;
}

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

a {
  color: var(--sakura-deep);
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-round);
  color: var(--ink);
  line-height: 1.4;
  font-weight: 800;
}

/* 画面読み上げ用（目には見えない）*/
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* 中身の共通ラッパー */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 20px;
}

/* =========================================================
   ヘッダー・ナビ
   スマホではCSSチェックボックス式ハンバーガー
   （JSなしでも開閉できます）
   ========================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 253, 247, 0.92);
  backdrop-filter: saturate(1.2) blur(6px);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 64px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
  flex: 0 1 auto;
  min-width: 0;
}

.brand img {
  height: 40px;
  width: auto;
}

.brand-text {
  font-family: var(--font-round);
  font-weight: 800;
  font-size: 1.05rem;
  white-space: nowrap;
}

/* ハンバーガーのチェックボックス本体は隠す */
.nav-toggle {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* ハンバーガーボタン（スマホで表示）*/
.nav-toggle-label {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  cursor: pointer;
  border-radius: var(--r-s);
  border: 1px solid var(--line);
  background: var(--paper);
}

.nav-toggle-label span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* トップの「はどあばんちの家」（イラスト参加で画像が差し替わっていく） */
.hero-house {
  margin: 30px auto 0;
  max-width: 480px; /* 家の枠の最大幅。下のimgのmax-widthに合わせています */
}
.hero-house img {
  /* ★家の画像の大きさ指定はここだけ（差し替え時もここは変更しないでください）*/
  max-width: min(480px, 92%);
  height: auto;
  margin-inline: auto; /* 幅の狭い画像でも必ず中央に来るように */
}
.hero-house figcaption {
  margin-top: 10px;
  font-size: 0.86rem;
  color: var(--ink-soft);
  text-align: center;
}

/* ナビ本体 */
.site-nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 2px 4px;
  margin: 0;
  padding: 0;
}

/* PC表示：ナビが2行に折り返しても右揃えで整うように */
@media (min-width: 901px) {
  .site-nav ul {
    justify-content: flex-end;
  }
}

/* 中間の幅（ナビが2行になりがちな幅）では、ロゴ画像に名前が入っているので
   隣の「はどあばんち」テキストは非表示にしてスッキリさせる */
@media (min-width: 901px) and (max-width: 1420px) {
  .brand-text {
    display: none;
  }
}

.site-nav a {
  display: inline-block;
  text-decoration: none;
  color: var(--ink-soft);
  font-family: var(--font-round);
  font-weight: 700;
  font-size: 0.86rem;
  padding: 7px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

.site-nav a:hover {
  /* リンクのホバーはティール（青緑）*/
  background: var(--teal-tint);
  color: var(--teal-deep);
}

/* 現在のページを強調（現在ページのピルは桜ピンクのまま）*/
.site-nav a[aria-current="page"] {
  background: var(--sakura);
  color: #fff;
}

/* --- スマホ表示（900px以下）--- */
@media (max-width: 900px) {
  .nav-toggle-label {
    display: flex;
  }

  .site-nav {
    /* 閉じているときは高さ0で隠す */
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-m);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.28s ease;
  }

  .site-nav ul {
    flex-direction: column;
    gap: 0;
    padding: 6px 14px 14px;
  }

  .site-nav a {
    display: block;
    font-size: 1rem;
    padding: 12px 10px;
    border-bottom: 1px solid var(--line-soft);
  }

  /* チェックが入ったら（ハンバーガーを押したら）開く */
  .nav-toggle:checked ~ .site-nav {
    max-height: 80vh;
    overflow-y: auto;
  }

  /* 開いているときはハンバーガーをバツ印に */
  .nav-toggle:checked ~ .nav-toggle-label span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .nav-toggle:checked ~ .nav-toggle-label span:nth-child(2) {
    opacity: 0;
  }
  .nav-toggle:checked ~ .nav-toggle-label span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
}

/* =========================================================
   ボタン（ピル型）
   ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-round);
  font-weight: 800;
  font-size: 1rem;
  text-decoration: none;
  padding: 13px 26px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  line-height: 1.3;
  text-align: center;
}

.btn-primary {
  /* 主ボタン：濃い桜ピンク（白文字が読めるよう濃いめ）*/
  background: var(--sakura-deep);
  color: #fff;
  box-shadow: var(--shadow-s);
}

.btn-primary:hover {
  background: #c1526b;
}

.btn-secondary {
  /* 副ボタン：白地にティール（青緑）の枠と文字 */
  background: var(--paper);
  color: var(--teal-deep);
  border-color: var(--teal);
}

.btn-secondary:hover {
  background: var(--teal-tint);
  color: var(--teal-deep);
}

/* ボタンhoverでふわっと浮く（動きを減らす設定の人には無効化）*/
@media (prefers-reduced-motion: no-preference) {
  .btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-m);
  }
}

/* =========================================================
   セクション・見出し・カード類
   ========================================================= */
main {
  display: block;
}

section {
  padding-block: 44px;
}

.section-title {
  font-size: 1.5rem;
  margin: 0 0 6px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.section-title .ico {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
}

.section-lead {
  color: var(--ink-soft);
  margin: 0 0 22px;
}

/* 汎用パネル（白い紙のカード）*/
.panel {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  box-shadow: var(--shadow-s);
  padding: 26px;
}

.panel + .panel {
  margin-top: 20px;
}

.panel h3 {
  margin-top: 0;
  font-size: 1.2rem;
}

/* 淡い色の付いた囲み（メモ・補足）*/
.note {
  border-radius: var(--r-m);
  padding: 16px 18px;
  border: 1px solid var(--line);
  background: var(--cream-2);
}

.note-sky { background: var(--sky-tint); border-color: #cfe3ee; }
.note-leaf { background: var(--leaf-tint); border-color: #d7e4cf; }
.note-sakura { background: var(--sakura-tint); border-color: #eccdd3; }

/* 注意枠（強めに目立たせる）*/
.alert {
  border-radius: var(--r-m);
  padding: 16px 18px;
  border: 2px solid var(--sakura);
  background: var(--sakura-tint);
  color: var(--sakura-deep);
  font-weight: 700;
}

/* 開催情報チップ */
.chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 22px 0 0;
  padding: 0;
  justify-content: center;
}

.chips li {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 16px;
  font-family: var(--font-round);
  font-weight: 700;
  font-size: 0.92rem;
  box-shadow: var(--shadow-s);
}

/* 定義リスト風の概要表 */
.spec-table {
  width: 100%;
  border-collapse: collapse;
  overflow: hidden;
  border-radius: var(--r-m);
}

.spec-table th,
.spec-table td {
  text-align: left;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}

.spec-table th {
  width: 34%;
  background: var(--leaf-tint);
  font-family: var(--font-round);
  color: var(--ink);
  white-space: nowrap;
}

.spec-table tr:last-child th,
.spec-table tr:last-child td {
  border-bottom: 0;
}

/* =========================================================
   参加方法カード（4枚・ホームの中核）
   ========================================================= */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 18px;
}

/* 中間の画面幅では2列に固定して「3枚＋1枚」の孤立を防ぐ
   （広い画面では4枚横並び、スマホでは1列に自動で切り替わる） */
@media (min-width: 640px) and (max-width: 1099px) {
  .card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 「はじめに」セクション用：文章とイラストを横並びにする専用レイアウト。
   701px以上ではPCの見た目（文章1.4fr／イラスト1fr・縦中央そろえ）を維持し、
   700px以下では1列に戻して、DOM順（文章→イラスト）のまま自然に縦積みします。 */
@media (min-width: 701px) {
  .split-main-sub {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    align-items: center;
  }
}
@media (max-width: 700px) {
  .split-main-sub {
    grid-template-columns: 1fr;
  }
}

.choice-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  box-shadow: var(--shadow-s);
  padding: 24px 22px;
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.choice-card .emoji {
  font-size: 2rem;
  line-height: 1;
}

.choice-card h3 {
  margin: 4px 0 0;
  font-size: 1.15rem;
}

.choice-card p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

.choice-card .go {
  margin-top: auto;
  padding-top: 8px;
  font-family: var(--font-round);
  font-weight: 800;
  color: var(--sakura-deep);
}

@media (prefers-reduced-motion: no-preference) {
  .choice-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-m);
    border-color: var(--sakura);
  }
}

/* 色違いの縁取り（4つの参加方法を色分け）*/
.choice-card.c-circle { border-top: 5px solid var(--sakura); }
.choice-card.c-illust { border-top: 5px solid var(--leaf); }
.choice-card.c-message { border-top: 5px solid var(--sky); }
.choice-card.c-air { border-top: 5px solid var(--gold); }

/* シンプルなリンク行 */
.link-row {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
}

.link-row a {
  display: inline-block;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 10px 18px;
  text-decoration: none;
  color: var(--ink);
  font-family: var(--font-round);
  font-weight: 700;
  font-size: 0.92rem;
  transition: background 0.15s ease;
}

.link-row a:hover {
  background: var(--sky-tint);
}

/* 大きなリンクカード（応募フォームページ用）*/
.big-link {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 6px solid var(--sakura);
  border-radius: var(--r-m);
  padding: 22px 24px;
  text-decoration: none;
  color: var(--ink);
  box-shadow: var(--shadow-s);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.big-link .step {
  font-family: var(--font-round);
  font-weight: 800;
  color: var(--sakura-deep);
  font-size: 0.8rem;
  letter-spacing: 0.02em;
}

.big-link h3 {
  margin: 0;
  font-size: 1.2rem;
}

.big-link p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

.big-link .go {
  margin-top: 4px;
  font-family: var(--font-round);
  font-weight: 800;
  color: var(--sakura-deep);
}

@media (prefers-reduced-motion: no-preference) {
  .big-link:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-m);
  }
}

/* =========================================================
   告知カード画像（縦長jpeg）
   ========================================================= */
.card-images {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}

.card-fig {
  margin: 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  padding: 12px;
  box-shadow: var(--shadow-s);
}

.card-fig img {
  border-radius: var(--r-s);
  width: 100%;
}

.card-fig figcaption {
  margin-top: 8px;
  font-size: 0.82rem;
  color: var(--ink-soft);
  text-align: center;
}

/* 折りたたみ（details）*/
details.fold {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  padding: 4px 18px;
  box-shadow: var(--shadow-s);
}

details.fold + details.fold {
  margin-top: 12px;
}

details.fold summary {
  cursor: pointer;
  font-family: var(--font-round);
  font-weight: 800;
  padding: 14px 4px;
  list-style: none;
}

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

details.fold summary::before {
  content: "＋ ";
  color: var(--sakura);
}

details.fold[open] summary::before {
  content: "− ";
}

details.fold .fold-body {
  padding: 0 4px 16px;
}

/* ステップ番号リスト */
.steps {
  list-style: none;
  counter-reset: step;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.steps li {
  position: relative;
  counter-increment: step;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  padding: 18px 20px 18px 62px;
  box-shadow: var(--shadow-s);
}

.steps li::before {
  content: counter(step);
  position: absolute;
  left: 16px;
  top: 16px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--sakura);
  color: #fff;
  font-family: var(--font-round);
  font-weight: 800;
  display: grid;
  place-items: center;
}

.steps li h4 {
  margin: 0 0 4px;
  font-size: 1.05rem;
}

.steps li p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

/* 箇条書きの読みやすい間隔 */
.list-clean {
  padding-left: 1.2em;
  margin: 12px 0;
}

.list-clean li {
  margin-bottom: 8px;
}

/* =========================================================
   ヒーロー（各ページ上部）＋ 将来イラスト追加フック
   ========================================================= */
.hero {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding-block: 52px 40px;
}

.hero .hero-inner {
  position: relative;
  z-index: 2;
}

.hero-logo {
  max-width: 460px;
  width: 82%;
  margin: 0 auto 18px;
}

.hero h1 {
  font-size: 1.7rem;
  margin: 0 0 6px;
}

.hero .tagline {
  color: var(--ink-soft);
  font-family: var(--font-round);
  font-weight: 700;
  margin: 0;
}

.hero .cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 26px;
}

/* 小さめページ見出しヒーロー */
.page-head {
  text-align: center;
  padding-block: 40px 8px;
  position: relative;
  overflow: hidden;
}

.page-head .eyebrow {
  font-family: var(--font-round);
  font-weight: 800;
  color: var(--sakura-deep);
  letter-spacing: 0.08em;
  font-size: 0.85rem;
  margin: 0 0 4px;
}

.page-head h1 {
  font-size: 1.8rem;
  margin: 0;
}

.page-head p {
  color: var(--ink-soft);
  margin: 10px auto 0;
  max-width: 640px;
}

.page-head .head-ico {
  width: 54px;
  height: 54px;
  margin: 0 auto 10px;
}

/* ---------------------------------------------------------
   .deco-layer ＝ 将来イラストを追加するための「空きスロット」
   ---------------------------------------------------------
   使い方（持ち主さん向け）:
   1) ヒーローの中の <div class="deco-layer"> の中に
      <img> を足します。例:
        <img class="deco gentle-sway" data-deco="laundry"
             src="images/sentakumono.png" alt="">
   2) class に「gentle-sway」を付けるとゆらゆら揺れ、
      「gentle-float」を付けるとふわふわ上下します。
   3) data-deco は "laundry"（洗濯物）/ "bird"（鳥）/
      "post"（ポスト）/ "cat"（猫）などの目印です。
      下の .deco[data-deco="..."] で位置を微調整できます。
   4) 画像は透過PNG推奨。装飾なので alt="" で構いません。
   --------------------------------------------------------- */
.deco-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.deco {
  position: absolute;
  width: 90px;
  height: auto;
  opacity: 0.95;
}

/* 位置の初期値（必要に応じて数字を変えてください）*/
.deco[data-deco="laundry"] { top: 8%; left: 6%; width: 120px; }
.deco[data-deco="bird"]    { top: 14%; right: 8%; width: 70px; }
.deco[data-deco="post"]    { bottom: 6%; left: 8%; width: 80px; }
.deco[data-deco="cat"]     { bottom: 4%; right: 6%; width: 110px; }

/* =========================================================
   桜の花びらアニメーション
   （JSで花びらのdivを作ります。動きを減らす設定の人には
     花びらを作らない＝このCSSは動きません）
   ========================================================= */
.petal-field {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  overflow: hidden;
}

.petal {
  position: absolute;
  top: -8vh;
  width: 14px;
  height: 12px;
  background: var(--sakura-tint);
  border: 1px solid #eccdd3;
  border-radius: 12px 2px 12px 2px;
  opacity: 0.85;
  will-change: transform;
  animation: petal-fall linear infinite;
}

@keyframes petal-fall {
  0% {
    transform: translate3d(0, -10vh, 0) rotate(0deg);
  }
  100% {
    transform: translate3d(40px, 110vh, 0) rotate(360deg);
  }
}

/* ---- 将来イラスト用の共通アニメ ---- */
/* ゆらゆら（洗濯物・吊るし飾りなど）*/
@keyframes gentle-sway {
  0%, 100% { transform: rotate(-3deg); }
  50%      { transform: rotate(3deg); }
}

/* ふわふわ（鳥・雲など上下）*/
@keyframes gentle-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

.gentle-sway {
  transform-origin: top center;
  animation: gentle-sway 4.5s ease-in-out infinite;
}

.gentle-float {
  animation: gentle-float 5s ease-in-out infinite;
}

/* =========================================================
   スクロールでふわっと表示
   （JSがONのときだけ最初は隠し、見えたら表示。
     JSがOFFのときは最初から見えるので情報は必ず読めます）
   ========================================================= */
.js .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* 動きを減らす設定の人には、すべてのアニメを止める */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal {
    opacity: 1;
    transform: none;
  }
}

/* =========================================================
   フッター
   ========================================================= */
.site-footer {
  margin-top: 40px;
  background: var(--cream-2);
  border-top: 1px solid var(--line);
  padding-block: 34px;
  color: var(--ink-soft);
  font-size: 0.9rem;
}

.site-footer .foot-name {
  font-family: var(--font-round);
  font-weight: 800;
  color: var(--ink);
  font-size: 1.05rem;
}

.site-footer p {
  margin: 6px 0;
}

.site-footer .foot-note {
  font-size: 0.82rem;
}

.site-footer .copy {
  margin-top: 12px;
  font-size: 0.8rem;
}

/* 「ホームへもどる」リンク */
.back-home {
  text-align: center;
  padding-block: 8px 40px;
}

.back-home a {
  font-family: var(--font-round);
  font-weight: 800;
  text-decoration: none;
  color: var(--sakura-deep);
}

.back-home a:hover {
  text-decoration: underline;
}

/* =========================================================
   secret.html（夜のページ）専用テーマ
   ========================================================= */
body.night {
  color: #e9e4d4;
  background-color: var(--night-2);
  background-image:
    radial-gradient(circle at 50% 0%, rgba(231, 201, 138, 0.16), transparent 55%),
    radial-gradient(circle at 20% 90%, rgba(44, 58, 51, 0.6), transparent 60%);
}

body.night .site-header {
  background: rgba(29, 40, 35, 0.92);
  border-bottom-color: #3a4b41;
}

body.night .brand,
body.night .brand-text {
  color: #f0ead9;
}

body.night .site-nav a {
  color: #c7d0c4;
}

body.night .site-nav a:hover {
  background: #33443a;
  color: var(--gold);
}

body.night .site-nav a[aria-current="page"] {
  background: var(--gold);
  color: var(--night-2);
}

body.night .nav-toggle-label {
  background: var(--night-1);
  border-color: #3a4b41;
}

body.night .nav-toggle-label span {
  background: #f0ead9;
}

@media (max-width: 900px) {
  body.night .site-nav {
    background: var(--night-1);
    border-bottom-color: #3a4b41;
  }
  body.night .site-nav a {
    border-bottom-color: #33443a;
  }
}

body.night h1,
body.night h2,
body.night h3 {
  color: var(--gold);
}

body.night .site-footer {
  background: var(--night-1);
  border-top-color: #3a4b41;
  color: #b9c2b6;
}

body.night .site-footer .foot-name {
  color: #f0ead9;
}

body.night .back-home a {
  color: var(--gold);
}

/* 封印の扉パネル */
.sealed {
  max-width: 520px;
  margin: 10px auto 0;
  text-align: center;
  background: rgba(20, 28, 24, 0.55);
  border: 1px solid #3a4b41;
  border-radius: var(--r-l);
  padding: 34px 28px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

.sealed .gate-svg {
  width: 180px;
  height: auto;
  margin: 0 auto 18px;
  display: block;
}

.sealed .lantern {
  width: 60px;
  margin: 0 auto 6px;
  display: block;
  filter: drop-shadow(0 0 14px rgba(231, 201, 138, 0.5));
}

.sealed .sealed-date {
  font-family: var(--font-round);
  font-weight: 800;
  color: var(--gold);
  font-size: 1.3rem;
  margin-top: 14px;
}

/* ランタンをやさしく揺らす（夜ページの灯り）*/
@media (prefers-reduced-motion: no-preference) {
  .sealed .lantern {
    animation: gentle-float 5s ease-in-out infinite;
  }
}

/* =========================================================
   スマホ微調整（375pxで崩れないための最終調整）
   ========================================================= */
@media (max-width: 560px) {
  .hero h1 { font-size: 1.4rem; }
  .page-head h1 { font-size: 1.5rem; }
  .section-title { font-size: 1.3rem; }
  .panel { padding: 20px; }
  .hero .cta-row .btn { width: 100%; }
  .chips { justify-content: flex-start; }
  .spec-table th { width: 40%; white-space: normal; }
}

/* =========================================================
   ★春リニューアル 追加スタイル
   ---------------------------------------------------------
   ポスター風「パステルな春」の見た目をここでまとめて足しています。
   （空のヒーロー・芝生のフッター・帯の色分け・見出しの飾り など）
   ※夜のページ(secret.html)には影響しないよう body:not(.night) で
     囲っています。
   ========================================================= */

/* ---- ① ヒーロー（トップページ上部）を「空＋雲」に ---- */
/* 上は水色の空、白い雲(sora.png)がうかび、下はアイボリーへ溶けていきます */
body:not(.night) .hero {
  background-color: var(--sky-top);
  background-image:
    linear-gradient(180deg, rgba(253, 250, 240, 0) 48%, var(--cream) 100%),
    url("../images/sora.png");
  background-repeat: no-repeat, no-repeat;
  background-size: 100% 100%, cover;
  background-position: center, center top;
}

/* ---- ② 下層ページの見出し部分を「淡い空色グラデ」に統一 ---- */
body:not(.night) .page-head {
  background-image:
    linear-gradient(180deg, var(--sky-top) 0%, var(--sky-soft) 46%, rgba(253, 250, 240, 0) 100%);
}

/* ---- ③ セクションの帯を交互に色分け（白→淡い空色→淡い若草）---- */
/* ヒーロー・見出し部は上の空グラデを使うので除外します */
body:not(.night) main > section:not(.hero):not(.page-head):nth-of-type(3n+2) {
  background: var(--sky-soft);
}
body:not(.night) main > section:not(.hero):not(.page-head):nth-of-type(3n) {
  background: var(--leaf-tint);
}

/* ---- ④ 見出しの下に短い飾り線（ティールと桜を交互に）---- */
.section-title {
  position: relative;
  padding-bottom: 12px;
}
.section-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 46px;
  height: 3px;
  border-radius: 3px;
  background: var(--teal);
}
/* 偶数番のセクションでは飾り線を桜ピンクに */
main > section:nth-of-type(even) .section-title::after {
  background: var(--sakura);
}

/* ---- ⑤ フッターを「若草色の芝生バンド」に（夜ページ以外）---- */
body:not(.night) .site-footer {
  position: relative;
  margin-top: 48px;
  background: linear-gradient(180deg, var(--grass) 0%, var(--grass-deep) 100%);
  border-top: 0;
  color: var(--ink); /* 濃い緑の文字でコントラスト確保 */
}
/* 芝生の上端を波形(スカラップ)に */
body:not(.night) .site-footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -14px;
  height: 15px;
  background-image:
    radial-gradient(circle at 50% 100%, var(--grass) 0 15px, transparent 16px);
  background-size: 30px 15px;
  background-repeat: repeat-x;
  background-position: center bottom;
}
/* フッターの文字は芝生装飾より前面に */
.site-footer .wrap {
  position: relative;
  z-index: 1;
}

/* ---- ⑥ フッターの装飾（木・猫）ワンポイント ---- */
/* 装飾は必ず overflow:hidden の中に入れ、横スクロールを防ぎます */
.foot-deco {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.foot-deco .foot-tree {
  position: absolute;
  bottom: 0;
  width: 86px;
  opacity: 0.92;
}
.foot-deco .tree-l { left: 6px; }
.foot-deco .tree-r { right: 6px; width: 78px; }
.foot-deco .foot-cat {
  position: absolute;
  bottom: 8px;
  /* 猫はフッターの文字と重ならないよう、文字のない右側の
     「猫専用ゾーン」に配置（数値を変えると左右に動きます）*/
  left: auto;
  right: 140px;
  opacity: 0.95;
  /* 大きさはファイル末尾近くの「ネコ画像の大きさ統一ルール」で管理 */
}
/* 文字が最優先：画面が広くないとき（900px以下）は
   フッターの飾り（木・猫）を全部隠して、文字と重ならないようにする */
@media (max-width: 900px) {
  .foot-deco { display: none; }
}

/* 901px以上：フッターの文字エリアの右側に「猫と右の木の専用スペース」を
   確保する（padding-rightのぶん、文字はこの範囲に入らない＝絶対に重ならない）*/
@media (min-width: 901px) {
  body:not(.night) .site-footer .wrap {
    padding-right: 320px; /* ★猫ゾーンの幅。猫を大きくしたらここも広げる */
  }
  .foot-deco .foot-cat {
    right: 70px; /* 猫ゾーンの中での左右位置 */
  }
}

/* =========================================================
   ネコ画像の大きさ統一ルール
   ---------------------------------------------------------
   どのページ・どの場所でも「見た目の大きさ」が揃うように、
   ポーズ（画像ファイル）ごとに高さを決めています。
   基準はホーム下部のジャンプ猫（neko_05）。
   横長ポーズは低め・縦長ポーズは高めにすることで、
   猫の体の大きさが同じくらいに見えます。
   ========================================================= */
img[src*="neko_01"] { width: auto; max-height: 135px; } /* 歩く（横長）*/
img[src*="neko_02"] { width: auto; max-height: 180px; } /* 伸び上がり（縦長・細身なので高さ多め）*/
img[src*="neko_03"] { width: auto; max-height: 150px; } /* 背中まるめ */
img[src*="neko_04"] { width: auto; max-height: 150px; } /* 着地ポーズ */
img[src*="neko_05"] { width: auto; max-height: 110px; } /* ジャンプ（横長・基準）*/

/* スマホでは小さめにして情報の見やすさを優先 */
@media (max-width: 640px) {
  img[src*="neko_02"], img[src*="neko_03"], img[src*="neko_04"] { max-height: 100px; }
  img[src*="neko_01"] { max-height: 75px; } /* 丘の歩き猫はさらに控えめ */
  img[src*="neko_05"] { max-height: 75px; }
}

/* 左の木は、画面幅1150px未満だと文字と重なるので広い画面でだけ表示 */
@media (max-width: 1150px) {
  .foot-deco .tree-l { display: none; }
}

/* ---- ⑦ ヒーローに飾るツタ（ハート葉）のワンポイント位置 ---- */
.deco[data-deco="ivy"] {
  top: 0;
  left: 0;
  width: 150px;
  opacity: 0.85;
}
@media (max-width: 560px) {
  .deco[data-deco="ivy"] { width: 96px; }
}

/* =========================================================
   トップ看板エリア（ポスター風）
   ---------------------------------------------------------
   非エンジニアの持ち主さんへ:
   ・ここから下は、トップページのヒーローを「告知ポスター」風に
     見せるための追加パーツです（金バッジ／ロゴの登場アニメ／
     「開催決定！」吹き出し／流れる雲／若草の丘＋木＋猫）。
   ・調整したくなりそうな数値には、行の右側に日本語コメントを
     つけています。基本はその数値だけを書き換えればOKです。
   ・家の画像(images/ietomado.png)自体のサイズ指定は
     上の「.hero-house img」の2行（max-width/height）だけです。
     丘・木・猫はこのブロックの中で「.hero-scene」という枠の
     端を基準に置いているので、家の画像が差し替わっても
     （縦横比が変わっても）位置は崩れません。
   ・動きを減らす設定（prefers-reduced-motion: reduce）の人には、
     このファイル上のほうにある共通ルール（.jsの少し下）が
     サイト全体のアニメを自動で止めてくれるので、ここで個別に
     何かする必要はありません。
   ========================================================= */

/* ---- 金バッジ「有志プチオンリーイベント」 ---- */
.hero-badge {
  position: absolute;
  top: -8px;      /* バッジの上下位置（ヒーロー内側の左上を基準）*/
  left: 4px;      /* バッジの左右位置 */
  z-index: 3;
  width: 108px;   /* ★バッジの大きさ（直径）*/
  height: 108px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 50%;
  background: var(--gold);
  border: 3px double var(--paper); /* 二重線っぽい縁取り */
  box-shadow: var(--shadow-m);
  transform: rotate(-8deg); /* バッジの傾き角度 */
  font-family: var(--font-round);
  font-weight: 800;
  font-size: 0.74rem; /* バッジ内の文字サイズ */
  line-height: 1.35;
  color: var(--ink);
  padding: 6px;
}

/* ---- ロゴ＋猫をまとめる箱 ---- */
.hero-logo-wrap {
  position: relative; /* 中の猫(.hero-neko)を絶対配置するための基準 */
}

/* ---- ロゴのふわっと登場アニメ ---- */
.hero-logo-pop {
  animation: logo-pop 0.7s ease-out 1; /* 0.7秒かけて1回だけポップイン */
}
@keyframes logo-pop {
  0%   { opacity: 0; transform: scale(0.92); }
  100% { opacity: 1; transform: scale(1); }
}

/* ---- ロゴ横の猫（neko_04） ----
   PCではロゴの右横に絶対配置、640px以下ではロゴ下に静的配置（.hero-logo-wrapの下）します。
   大きさは下方の「ネコ画像の大きさ統一ルール」で管理しています。 */
.hero-neko {
  position: absolute;
  top: -6px;    /* 猫の上下位置（ロゴ基準）*/
  right: 2%;    /* 猫の左右位置（ロゴ基準）*/
  z-index: 3;
}

/* ぴょんと飛び降りて着地する登場アニメ（ロゴ横の猫用）*/
.neko-hop {
  /* 0.5秒待ってから0.9秒かけて1回だけ。both=開始前は透明のまま */
  animation: neko-hop 0.9s cubic-bezier(0.3, 0.7, 0.4, 1) 0.5s 1 both;
}
@keyframes neko-hop {
  0%   { opacity: 0; transform: translateY(-140px); } /* 画面の上のほうから */
  55%  { opacity: 1; transform: translateY(0); }      /* ストンと着地 */
  70%  { transform: translateY(-14px); }              /* 小さくぴょん */
  85%  { transform: translateY(0); }
  100% { opacity: 1; transform: translateY(0); }
}
/* 動きを減らす設定の人にはアニメなしで最初から表示 */
@media (prefers-reduced-motion: reduce) {
  .neko-hop { animation: none; }
}

/* ---- 空を流れる雲（画像は使わず、白いグラデーションだけで表現）---- */
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  z-index: 1; /* 空の背景より前、文字やロゴよりは後ろ */
  pointer-events: none;
  width: 220px;   /* 雲1個目の横幅 */
  height: 68px;   /* 雲1個目の高さ */
  opacity: 0.55;  /* 雲の濃さ */
  /* もこもこ雲（楕円3つの重なり）。楕円が箱からはみ出すと
     フチが四角く切れて見えるので、高さは箱の中に収まる値にしてあります */
  background:
    radial-gradient(ellipse 40% 70% at 30% 60%, #fff 60%, transparent 62%),
    radial-gradient(ellipse 50% 85% at 58% 45%, #fff 55%, transparent 58%),
    radial-gradient(ellipse 45% 65% at 80% 60%, #fff 55%, transparent 58%);
  animation: cloud-drift 90s linear infinite; /* 雲1個目が流れる速さ（秒）*/
}
.hero::before {
  top: 6%;     /* 雲1個目の上下位置 */
  left: -30%;  /* 雲1個目のスタート位置（左の外側から）*/
}
.hero::after {
  top: 16%;        /* 雲2個目の上下位置 */
  left: -55%;      /* 雲2個目のスタート位置 */
  width: 160px;    /* 雲2個目の横幅（1個目より小さめ）*/
  height: 54px;
  opacity: 0.4;
  animation-duration: 130s; /* 雲2個目が流れる速さ（1個目よりゆっくり）*/
  animation-delay: -40s;    /* 開始時にすでにズレた位置から流すための調整 */
}
@keyframes cloud-drift {
  from { transform: translateX(0); }
  to   { transform: translateX(160vw); } /* 画面幅の1.6倍ぶん右へ流れて画面外に抜ける */
}

/* ---- 家のシーン（丘・木・猫の舞台）---- */
.hero-scene {
  position: relative;
  margin-top: 20px;      /* CTAボタンとの間の余白 */
  padding-bottom: 110px; /* ★丘の高さぶんの余白（.hero-hillのheightと必ず同じ数値にする）*/
}

/* 若草の丘（画像は使わず、緑グラデ＋大きい角丸で丘の形に）*/
.hero-hill {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 110px; /* ★丘の高さ（.hero-sceneのpadding-bottomと必ず同じ数値にする）*/
  z-index: 0;
  background: linear-gradient(180deg, var(--grass) 0%, var(--grass-deep) 100%);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0; /* 上辺だけ丸めて丘のシルエットに */
}

/* 丘の左右に立つ木（sakuranoki.png / aoiki.png）*/
.hero-scene-tree {
  position: absolute;
  bottom: 2px;   /* 丘に少し埋める深さ */
  width: 100px;  /* ★木の大きさ（幅）*/
  z-index: 1;
  opacity: 0.95;
}
.hero-scene-tree.tree-l { left: 2%; } /* 左の木の左右位置 */
.hero-scene-tree.tree-r { right: 2%; } /* 右の木の左右位置 */

/* 丘の上を歩く猫（neko_01.png）*/
.hero-scene-cat {
  position: absolute;
  bottom: 4px;  /* 丘に少し埋める深さ */
  left: 60%;    /* ★猫の左右位置（0%で左端、100%で右端）*/
  /* 家(z-index:2)より手前の3にして、家と重なっても猫が隠れないように。
     家の前を歩いているように見えます */
  z-index: 3;
  opacity: 0.95;
  /* 大きさは「ネコ画像の大きさ統一ルール」で管理 */
}

/* はどあばんちの家：丘・木・猫より前面（手前）に出す */
.hero-scene .hero-house {
  position: relative;
  z-index: 2;
  /* ★家を丘に少し沈めて「丘の上に立っている」ように見せる量。
     家の画像を差し替えて浮いて見える/沈みすぎるときはこの数値だけ調整 */
  margin-bottom: -58px;
}

/* 家の説明文（丘の下に出るキャプション）*/
.hero-house-cap {
  margin: 16px auto 0;
  max-width: 620px;
  font-size: 0.86rem;
  color: var(--ink-soft);
  text-align: center;
}

/* ---- 開催まであとカウントダウンのチップ ---- */
/* 見た目のベースは既存の .chips li を流用し、桜ピンクで少し目立たせる */
.chip-countdown {
  border-color: var(--sakura-deep);
  color: var(--sakura-deep);
  font-weight: 800;
}
.chip-countdown span {
  font-size: 1.05em; /* 日数の数字だけ少し大きく */
}

/* ---------------------------------------------------------
   スマホ640px以下の調整
   ・バッジを一回り小さく
   ・吹き出しは絶対配置をやめてロゴの下に静的配置（横スクロール防止）
   ・木は幅を半分に
   --------------------------------------------------------- */
@media (max-width: 640px) {
  .hero-badge {
    width: 74px;  /* ★スマホ時のバッジの大きさ */
    height: 74px;
    top: -4px;
    left: 2px;
    font-size: 0.58rem;
    padding: 4px;
  }

  .hero-neko {
    position: static;   /* 絶対配置をやめて通常の流れに戻す＝ロゴの下に来る */
    display: inline-block;
    margin: 10px auto 0; /* ロゴとの間の余白（.heroのtext-align:centerで自動的に中央寄せ）*/
    /* 大きさは「ネコ画像の大きさ統一ルール」で管理 */
  }

  .hero-scene-tree {
    width: 50px; /* ★スマホ時の木の大きさ（幅を半分に）*/
  }

  .hero-scene-cat {
    /* 大きさは「ネコ画像の大きさ統一ルール」で管理（スマホでは自動で小さくなります）*/
  }
}