/* gx-ukiuki: うきうきとちぎ専用の演出（おでかけルートのミニ地図・手描き風の下線・保存ハート・検索チップ・歩みのルート・四つの流れの検索バー） 2026-10-17 */
:root{--uk-or:#389b5a;--uk-or-d:#2c7d48;--uk-cream:#f4f7f2}

/* ① 左下の「おでかけルート」：読み進めると、5エリアを結ぶ道をピンが進む */
.ukx-hud{position:fixed;left:14px;bottom:28px;width:150px;z-index:58;pointer-events:none;background:#fff;border:2px solid #1f2a22;border-radius:16px;padding:8px 8px 6px;box-shadow:0 10px 22px rgba(20,21,19,.22);opacity:0;translate:0 14px;transition:opacity .45s,translate .45s}
.ukx-hud.on{opacity:1;translate:0 0}
.ukx-hd{display:flex;align-items:center;gap:5px;font:900 10.5px/1.2 'Zen Kaku Gothic New',sans-serif;color:#1f2a22;margin:0 0 4px}
.ukx-hd i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--uk-or)}
.ukx-map{display:block;width:100%;height:auto;overflow:visible}
.ukx-base{fill:none;stroke:#d9e2da;stroke-width:3;stroke-linecap:round;stroke-dasharray:2 5}
.ukx-done{fill:none;stroke:#2c7d48;stroke-width:3.4;stroke-linecap:round}
.ukx-pin circle{fill:#fff;stroke:#b9c6bc;stroke-width:2;transition:fill .3s,stroke .3s}
.ukx-pin text{font:800 8.5px 'Zen Kaku Gothic New',sans-serif;fill:#8a958d;transition:fill .3s}
.ukx-pin.lit circle{fill:#2c7d48;stroke:#2c7d48}
.ukx-pin.lit text{fill:#1f2a22}
.ukx-car circle{fill:var(--uk-or);stroke:#fff;stroke-width:2.2}
.ukx-now{font:800 10px/1.3 'Zen Kaku Gothic New',sans-serif;color:#57625a;margin:3px 0 0;min-height:13px}
.ukx-now b{color:#2c7d48}
.ukx-go{position:absolute;right:-10px;top:-16px;background:var(--uk-or);color:#fff;font:900 11px/1 'Zen Kaku Gothic New',sans-serif;padding:7px 10px;border-radius:999px;box-shadow:0 6px 12px rgba(44,125,72,.35);scale:0;rotate:-8deg;transition:scale .5s cubic-bezier(.2,1.6,.35,1)}
.ukx-go::after{content:"";position:absolute;left:14px;bottom:-5px;border:6px solid transparent;border-top-color:var(--uk-or);border-bottom:0}
.ukx-hud.end .ukx-go{scale:1}
@media(max-width:640px){.ukx-hud{width:118px;left:10px;bottom:100px;padding:6px 6px 4px;border-radius:13px}.ukx-hd{font-size:9.5px}.ukx-now{font-size:9px}}

/* ② 章見出し：サイトの「楽しい」のような手描き風の下線が引かれる */
.ma-chead .sec-jp em{position:relative;display:inline-block}
.ukx-ul{position:absolute;left:-2%;bottom:-.32em;width:104%;height:.42em;overflow:visible;pointer-events:none}
.ukx-ul path{fill:none;stroke:var(--uk-or);stroke-width:5;stroke-linecap:round;opacity:.85}
html.gx-js .ukx-ul path{stroke-dasharray:var(--l);stroke-dashoffset:var(--l);transition:stroke-dashoffset .9s cubic-bezier(.4,.1,.2,1) .2s}
html.gx-js .ma-chead.gx-in .ukx-ul path{stroke-dashoffset:0}

/* ③ 写真ボード：エリアの札にピン、右上に保存ハートがポンと入る */
.ma-tile .gx-tag{position:absolute;left:10px;bottom:10px;z-index:2;display:inline-flex;align-items:center;gap:4px;background:#fff;color:#1f2a22;font:900 12px/1 'Zen Kaku Gothic New',sans-serif;padding:6px 10px 6px 8px;border-radius:999px;box-shadow:0 4px 10px rgba(20,21,19,.18)}
.ma-tile .gx-tag::before{content:"";width:9px;height:9px;border-radius:50% 50% 50% 0;rotate:-45deg;background:var(--uk-or);box-shadow:inset 0 0 0 2.5px #fff,0 0 0 1px var(--uk-or)}
.ukx-heart{position:absolute;right:10px;top:10px;z-index:2;width:34px;height:34px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 4px 10px rgba(20,21,19,.2)}
.ukx-heart svg{width:18px;height:18px}
.ukx-heart path{fill:transparent;stroke:#389b5a;stroke-width:2.2;transition:fill .35s .35s}
html.gx-js .ukx-heart{scale:.4;opacity:0;transition:scale .55s cubic-bezier(.2,1.7,.35,1) .25s,opacity .3s .25s}
html.gx-js .ma-tile.gx-in .ukx-heart{scale:1;opacity:1}
.ma-tile.gx-in .ukx-heart path,html:not(.gx-js) .ukx-heart path{fill:#389b5a}

/* ④ 六つの入口：番号が検索チップになり、見えたら「押される」 */
.uk-doors .ma-card{position:relative;display:flex;flex-direction:column}
.uk-chip{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;background:#fff;color:#2c7d48;border:2px solid #2c7d48;border-radius:999px;padding:5px 12px 5px 9px;font:900 12px/1 Montserrat,'Zen Kaku Gothic New',sans-serif;margin:0 0 12px;transition:background .3s,color .3s,scale .3s}
.uk-chip::before{content:"";width:12px;height:12px;border-radius:3px;border:2px solid currentColor;border-top-width:4px;box-sizing:border-box}
html.gx-js .uk-door.gx-in .uk-chip{background:#2c7d48;color:#fff;animation:ukxPress .5s cubic-bezier(.3,1.6,.4,1) both}
html:not(.gx-js) .uk-chip{background:#2c7d48;color:#fff}
@keyframes ukxPress{0%{scale:1}40%{scale:.88}100%{scale:1}}
.uk-door-go{margin-top:auto;padding-top:10px;display:inline-flex;align-items:center;gap:6px;color:#2c7d48;font-weight:800;font-size:13.5px;text-decoration:none;border-bottom:2px solid rgba(56,155,90,.35);align-self:flex-start}
.uk-door-go:hover{border-bottom-color:#2c7d48}

/* ⑤ 歩み：ルートの線が下へ伸び、停留所が順に灯る */
.uk-route{list-style:none;margin:22px 0 26px;padding:0 0 0 30px;position:relative}
.uk-route::before{content:"";position:absolute;left:10px;top:8px;bottom:8px;width:3px;background:repeating-linear-gradient(#cfdcd2 0 5px,transparent 5px 10px)}
.uk-route::after{content:"";position:absolute;left:10px;top:8px;width:3px;height:calc(100% - 16px);background:#2c7d48;transform-origin:top;scale:1 1}
html.gx-js .uk-route::after{scale:1 0;transition:scale 1.4s cubic-bezier(.4,.1,.2,1) .15s}
html.gx-js .uk-route.gx-in::after{scale:1 1}
.uk-route li{position:relative;padding:4px 0 16px}
.uk-route li::before{content:"";position:absolute;left:-26px;top:7px;width:15px;height:15px;border-radius:50%;background:#fff;border:3px solid #2c7d48;box-sizing:border-box}
.uk-route li:last-child::before{background:var(--uk-or);border-color:var(--uk-or)}
.uk-rt-y{display:inline-block;font:900 12px/1 Montserrat,sans-serif;color:var(--uk-or-d);letter-spacing:.04em;margin-bottom:4px}
.uk-route b{display:block;font-size:15.5px;font-weight:900;color:#1f2a22;line-height:1.5}
.uk-route small{display:block;font-size:13px;color:#6b756d;line-height:1.7}
html.gx-js .uk-route li{opacity:0;translate:0 10px;transition:opacity .45s,translate .45s}
html.gx-js .uk-route.gx-in li{opacity:1;translate:0 0}
html.gx-js .uk-route.gx-in li:nth-child(2){transition-delay:.35s}
html.gx-js .uk-route.gx-in li:nth-child(3){transition-delay:.7s}
html.gx-js .uk-route.gx-in li:nth-child(4){transition-delay:1.05s}

/* ⑥ 四つの流れ：検索バーが「探す」から「確かめる」まで満ちていく */
.uk-flow{list-style:none;margin:24px 0;padding:18px 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:12px;position:relative}
.uk-flow::before{content:"";position:absolute;left:0;right:0;top:0;height:8px;border-radius:999px;background:#e7eee8}
.uk-flow::after{content:"";position:absolute;left:0;top:0;height:8px;width:100%;border-radius:999px;background:linear-gradient(90deg,#2c7d48,#389b5a 70%,var(--uk-or));transform-origin:left}
html.gx-js .uk-flow::after{scale:0 1;transition:scale 1.6s cubic-bezier(.4,.1,.2,1) .2s}
html.gx-js .uk-flow.gx-in::after{scale:1 1}
.uk-flow li{background:#fff;border:2px solid #e2e9e3;border-radius:16px;padding:14px 14px 16px}
.uk-fn{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#2c7d48;color:#fff;font:900 12px/1 Montserrat,sans-serif;margin-bottom:8px}
.uk-flow li:last-child .uk-fn{background:var(--uk-or)}
.uk-flow b{display:block;font-size:15px;font-weight:900;color:#1f2a22;line-height:1.45;margin-bottom:4px}
.uk-flow small{display:block;font-size:13px;line-height:1.75;color:#6b756d}
@media(max-width:820px){.uk-flow{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.uk-flow{grid-template-columns:1fr}}

/* 公式サイトへのリンク */
.uk-linkp{margin:6px 0 0}
.uk-link{display:inline-flex;align-items:center;gap:6px;color:#2c7d48;font-weight:800;font-size:14px;text-decoration:none;border-bottom:2px solid rgba(56,155,90,.35);padding-bottom:2px}
.uk-link:hover{border-bottom-color:#2c7d48}
.uk-link svg{width:12px;height:12px}
.ma-prof td a{color:#2c7d48;font-weight:700}

@media(prefers-reduced-motion:reduce){.ukx-hud,.ukx-go,.ukx-heart,.uk-chip,.uk-route li,.uk-route::after,.uk-flow::after,.ukx-ul path{transition:none!important;animation:none!important}}

/* 調整：プロフィールのアイコンは丸ごと見せる／01の飾りの線と旗は本文に重ねない */
.ma-prof-photo img[src*="ukg-stick"]{object-fit:contain;background:#fff;padding:10px}
#roots .d-roots>svg,#roots .d-roots .ma-flag{display:none}

/* 2026-10-18 見出しの線はテンプレートの緑の線だけにする（二重線の防止） */
.ukx-ul{display:none!important}