/* カラフル版の色づかい(2026-10-17)
   本人「イメージカラーが青というわけではないので、ちょっとカラフル感出したい」「開くたびに色変わるとかどうですか」
   → 色の組み合わせを6種類用意し、訪問ごとにくじ引き(同じ訪問の中ではページを移っても同じ色)。
   選ぶのは各ページの <head> の小さなスクリプト(build.py)。?pal=citrus などで指定もできる。
   style.css のあとに読み込む。このファイルを外せば元の青系に戻る */

/* ---- 色の組み合わせ ---- */
:root, [data-pal="pop"] {          /* ポップ */
  --c1: #3fa9ee; --c2: #ff7a6b; --c3: #2fbf9b; --c4: #ffbe3d; --c5: #9b7bd8;
  --nav1: #e0503f; --nav2: #8a52c9;
  --btn1: #f2604f; --btn2: #ff8a4c;
  --soft1: #fff6ef; --soft2: #effaf6;
  --pt1: #eef7ff; --pt2: #f6f0ff; --pt3: #fff4ec;
  --badge-bg: #fff0d6; --badge-ink: #a36000;
  --title: #8a3a6e;
}
[data-pal="citrus"] {              /* シトラス */
  --c1: #ff8a3d; --c2: #f5c400; --c3: #7cc242; --c4: #1fb5a6; --c5: #3fa9ee;
  --nav1: #138f84; --nav2: #5aa63a;
  --btn1: #f06d1f; --btn2: #ff9a3d;
  --soft1: #fffbea; --soft2: #f1fbe9;
  --pt1: #fff8e1; --pt2: #f0fbe6; --pt3: #e6f8f6;
  --badge-bg: #fff3c4; --badge-ink: #8a6400;
  --title: #1d6b4f;
}
[data-pal="berry"] {               /* ベリー */
  --c1: #e8457c; --c2: #a78bfa; --c3: #38bdf8; --c4: #ff9a76; --c5: #34c79a;
  --nav1: #7a4fd0; --nav2: #d6407a;
  --btn1: #d93a72; --btn2: #f06292;
  --soft1: #fff1f6; --soft2: #f4f0ff;
  --pt1: #fdeef5; --pt2: #f1ecff; --pt3: #e9f7ff;
  --badge-bg: #fde3ee; --badge-ink: #b0285c;
  --title: #6a2fa0;
}
[data-pal="ocean"] {               /* オーシャン */
  --c1: #2563eb; --c2: #06b6d4; --c3: #2dd4bf; --c4: #f4b860; --c5: #ff6f61;
  --nav1: #1e4fc7; --nav2: #0891b2;
  --btn1: #f25f4f; --btn2: #ff8a5c;
  --soft1: #eef6ff; --soft2: #e8fbf8;
  --pt1: #e8f1ff; --pt2: #e3faf7; --pt3: #fff6e8;
  --badge-bg: #dff3ff; --badge-ink: #0b6aa3;
  --title: #1a3f99;
}
[data-pal="forest"] {              /* フォレスト */
  --c1: #22a06b; --c2: #e07a5f; --c3: #84b818; --c4: #f2b632; --c5: #5b9be8;
  --nav1: #1b7f57; --nav2: #4f9a2a;
  --btn1: #d8664a; --btn2: #ec8c55;
  --soft1: #f2faf3; --soft2: #fff5ec;
  --pt1: #eaf7ee; --pt2: #fbf6e6; --pt3: #fdeee8;
  --badge-bg: #e3f5e6; --badge-ink: #1b7a4f;
  --title: #1f5e43;
}
[data-pal="candy"] {               /* キャンディ */
  --c1: #ff7eb6; --c2: #4fd1c5; --c3: #b794f4; --c4: #ffd44f; --c5: #63b3ed;
  --nav1: #9a6ce0; --nav2: #e5609c;
  --btn1: #e5579a; --btn2: #f27ab3;
  --soft1: #fff2f8; --soft2: #effcfa;
  --pt1: #fff0f7; --pt2: #f3edff; --pt3: #ebfbf9;
  --badge-bg: #ffe6f2; --badge-ink: #b23a76;
  --title: #7a3fb8;
}
:root { --rainbow: linear-gradient(90deg, var(--c2), var(--c4), var(--c3), var(--c1), var(--c5)); }

/* ---- 当てはめ ---- */
.site-header { border-top: 5px solid transparent; border-image: var(--rainbow) 1; }
.brand .name { color: var(--title); }
.header-tel .num { color: var(--title); }
.nav { background: linear-gradient(90deg, var(--nav1), var(--nav2)); }
.nav a:hover, .nav a[aria-current="page"] { background: rgba(255,255,255,.22); }
h2, h3, .page-title h1, .greeting .person, .gallery figcaption b, .box dt, .faq summary, .cal h3 { color: var(--title); }

main section:nth-of-type(5n+1) h2 { border-left-color: var(--c1); }
main section:nth-of-type(5n+2) h2 { border-left-color: var(--c2); }
main section:nth-of-type(5n+3) h2 { border-left-color: var(--c3); }
main section:nth-of-type(5n+4) h2 { border-left-color: var(--c4); }
main section:nth-of-type(5n+5) h2 { border-left-color: var(--c5); }

section.soft:nth-of-type(odd) { background: var(--soft1); }
section.soft:nth-of-type(even) { background: var(--soft2); }
.page-title { background: linear-gradient(120deg, var(--pt1), var(--pt2) 50%, var(--pt3)); border-bottom: 0; position: relative; }
.page-title::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--rainbow); opacity: .85; }

.card { border-top: 6px solid var(--c1); }
.card:nth-child(2) { border-top-color: var(--c2); }
.card:nth-child(3) { border-top-color: var(--c3); }
.card:nth-child(4) { border-top-color: var(--c4); }
.card .num { background: var(--c1); }
.card:nth-child(2) .num { background: var(--c2); }
.card:nth-child(3) .num { background: var(--c3); }
.card:nth-child(4) .num { background: var(--c4); color: #3a2a00; }

.treat article { border-left: 6px solid var(--c1); }
.treat article:nth-child(5n+2) { border-left-color: var(--c2); }
.treat article:nth-child(5n+3) { border-left-color: var(--c3); }
.treat article:nth-child(5n+4) { border-left-color: var(--c4); }
.treat article:nth-child(5n+5) { border-left-color: var(--c5); }
.greeting { border-top: 6px solid var(--c2); }
.greeting + .greeting { border-top-color: var(--c3); }
.gallery figure { border-bottom: 5px solid var(--c1); }
.gallery figure:nth-child(5n+2) { border-bottom-color: var(--c2); }
.gallery figure:nth-child(5n+3) { border-bottom-color: var(--c3); }
.gallery figure:nth-child(5n+4) { border-bottom-color: var(--c4); }
.gallery figure:nth-child(5n+5) { border-bottom-color: var(--c5); }

.btn { background: linear-gradient(90deg, var(--btn1), var(--btn2)); }
.btn:hover { background: linear-gradient(90deg, var(--btn1), var(--btn1)); }
.btn.ghost { background: #fff; color: var(--btn1); border-color: var(--btn1); }

.badge { background: var(--badge-bg); color: var(--badge-ink); }

.faq summary::before { color: var(--c2); }
.faq details:nth-child(3n+2) summary::before { color: var(--c3); }
.faq details:nth-child(3n+3) summary::before { color: var(--c5); }

.flow span:nth-of-type(1) { border-color: var(--c1); }
.flow span:nth-of-type(2) { border-color: var(--c3); }
.flow span:nth-of-type(3) { border-color: var(--c4); }
.flow span:nth-of-type(4) { border-color: var(--c2); }
.flow i { color: var(--c2); }

.hours thead th { background: linear-gradient(90deg, var(--nav1), var(--nav2)); }
/* キャッチの下の線:その時の色の組み合わせを基調にしたグラデーション(本人 10/17「選ばれた色を基調とした、グラデーションの線」) */
.hero .catch p::after { content: ""; display: block; width: min(360px, 66%); height: 5px; margin-top: 12px; border-radius: 3px;
  background: linear-gradient(90deg, var(--nav1), var(--nav2) 65%, rgba(255,255,255,0));
  filter: brightness(1.35) saturate(1.15); box-shadow: 0 0 12px rgba(255,255,255,.18); }
.site-footer { border-top: 6px solid transparent; border-image: var(--rainbow) 1; }
.call-bar .tel { background: linear-gradient(90deg, var(--btn1), var(--btn2)); }
.call-bar .cal-link { background: var(--soft2); color: var(--title); }

/* トップの待合室クイズへの入口(本人 10/17「めっちゃ見つけづらい」) */
.quiz-banner { display: flex; align-items: center; gap: 16px; padding: 18px 22px; border-radius: 18px; text-decoration: none; color: #fff;
  background: linear-gradient(110deg, var(--c2), var(--c4) 45%, var(--c3)); box-shadow: 0 10px 24px rgba(0,0,0,.12); transition: transform .2s, box-shadow .2s; }
.quiz-banner:hover { color: #fff; transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0,0,0,.16); }
.qb-icon { flex: none; width: 54px; height: 54px; border-radius: 50%; background: rgba(255,255,255,.95); color: var(--c2); font-size: 30px; font-weight: 900;
  display: flex; align-items: center; justify-content: center; animation: qbBounce 2.4s ease-in-out infinite; }
@keyframes qbBounce { 0%, 70%, 100% { transform: none; } 80% { transform: translateY(-6px) rotate(-8deg); } 90% { transform: translateY(0) rotate(6deg); } }
.qb-text { flex: 1; line-height: 1.5; text-shadow: 0 1px 3px rgba(0,0,0,.22); }
.qb-text b { display: block; font-size: 21px; letter-spacing: .05em; }
.qb-text small { font-size: 14px; }
.qb-go { flex: none; background: #fff; color: var(--title); font-weight: 800; border-radius: 999px; padding: 8px 18px; }
@media (max-width: 560px) { .qb-go { display: none; } .qb-text b { font-size: 18px; } }
@media (prefers-reduced-motion: reduce) { .qb-icon { animation: none; } }
.game-banner { margin-top: 14px; background: linear-gradient(110deg, #14254d, #2b4378 55%, #5b3fa0); }
.game-banner .qb-icon { background: #0b1630; font-size: 28px; animation-delay: 1.2s; }