/* いまはじめる副業地図 — 選択後の画面構成（左：縮小海図＋一覧／右：詳細）
   最後に読み込む層。既存の focus / map-tools / service-compass の見た目を上書きする。 */
.map-frame{--fk-rail:340px;--fk-s:.22;--fk-top:76px;--fk-ink:#1d3f5d;--fk-ink2:#4d6b80;--fk-line:#c3d0d8;--fk-brass:#a98a52}

/* 選択後：他の地点を消さない。海図は縮めて左上に残す */
.route-focused .route:not(.focus-primary){opacity:1!important;visibility:visible!important;pointer-events:auto!important}
.route-focused .route.focus-primary{transform:none!important}
.focus-flight-token{display:none!important}

.route-focused .map-scroll{position:absolute!important;inset:auto!important;left:0!important;top:0!important;width:var(--fk-w)!important;height:var(--fk-h)!important;transform-origin:0 0;transform:translate(16px,var(--fk-top)) scale(var(--fk-s))!important;border-radius:0;overflow:hidden;z-index:4;cursor:default}
.route-focused .exploration-bar,.route-focused .atlas-filter-toggle{display:none!important}

/* 縮小版：全体の海図をそのまま縮める。選んだ地点だけ目印を強める */
.route-focused .map-north,.route-focused .map-foot,.route-focused .atlas-azimuth{display:none!important}
.route-focused #map-svg .route.focus-primary .atlas-ring{r:30px!important;opacity:1;stroke:var(--fk-ink);stroke-width:5px;fill:#fffdf6aa}
.route-focused #map-svg .route.focus-primary .dot{r:11px!important;stroke:var(--fk-ink);stroke-width:4px}

/* 縮小海図の枠（拡大しない飾り枠）と戻るボタン */
.fk-mini-frame{position:absolute;left:16px;top:var(--fk-top);width:var(--fk-rail);height:var(--fk-minih);border:1px solid #8c7a5a88;border-radius:8px;box-shadow:inset 0 0 0 3px #f8f3e4aa,0 10px 28px #2a45591f;pointer-events:none;z-index:6;display:none}
.route-focused .fk-mini-frame{display:block}
.fk-back{position:absolute;z-index:7;left:calc(16px + 10px);top:calc(var(--fk-top) + var(--fk-minih) - 42px);display:none;align-items:center;gap:8px;border:1px solid #1d3f5d;background:#1d3f5df2;color:#fbf7ea;border-radius:999px;padding:8px 14px 8px 12px;font:600 12px/1 'Noto Sans JP',system-ui,sans-serif;letter-spacing:.04em;cursor:pointer;box-shadow:0 6px 16px #1d3f5d33}
.fk-back:hover,.fk-back:focus-visible{background:#2b5a82;outline:2px solid #fbf7ea;outline-offset:-4px}
.route-focused .fk-back{display:inline-flex}

/* 左の一覧（4つの立場ごと） */
.fk-rail{position:absolute;z-index:6;left:16px;top:calc(var(--fk-top) + var(--fk-minih) + 14px);bottom:16px;width:var(--fk-rail);overflow:auto;display:none;flex-direction:column;gap:6px;padding:0 2px 0 0;scrollbar-width:thin}
.route-focused .fk-rail{display:flex}
.fk-group{border:1px solid var(--fk-line);background:#fbf9f1d9;border-radius:10px;overflow:hidden}
.fk-group>button{all:unset;box-sizing:border-box;width:100%;display:flex;align-items:center;gap:10px;padding:10px 12px;cursor:pointer;color:var(--fk-ink)}
.fk-group>button:hover{background:#eef3f6}
.fk-group>button:focus-visible{outline:2px solid var(--fk-ink);outline-offset:-3px}
.fk-dot{flex:none;width:12px;height:12px;border-radius:50%;background:var(--c);border:2px solid #fffdf6;box-shadow:0 0 0 1px #8aa0ad}
.fk-gname{flex:1;font:700 13px/1.3 'Noto Sans JP',system-ui,sans-serif;letter-spacing:.02em}
.fk-gname i{font-style:normal;color:#8aa0ad;margin:0 .3em;font-weight:500}
.fk-gcount{font:500 11px 'DM Mono',monospace;color:var(--fk-ink2)}
.fk-chev{flex:none;width:8px;height:8px;border-right:2px solid var(--fk-ink2);border-bottom:2px solid var(--fk-ink2);transform:rotate(45deg);transition:transform .25s}
.fk-group.open .fk-chev{transform:rotate(-135deg)}
.fk-items{display:none;flex-direction:column;padding:2px 6px 8px;gap:2px}
.fk-group.open .fk-items{display:flex}
.fk-item{all:unset;box-sizing:border-box;display:block;padding:7px 10px;border-radius:7px;cursor:pointer;color:#35566b;font:500 13px/1.3 'Noto Sans JP',system-ui,sans-serif}
.fk-item:hover{background:#e7eff4}
.fk-item:focus-visible{outline:2px solid var(--fk-ink)}
.fk-item[aria-current="true"]{background:var(--fk-ink);color:#fbf7ea;font-weight:700}

/* 右の詳細：縮小海図のとなり */
.route-focused .route-branch{left:calc(var(--fk-rail) + 40px)!important;right:16px!important;top:var(--fk-top)!important;bottom:16px!important;width:auto!important;height:auto!important;max-height:none!important}
.route-focused .route-branch.compass-view{animation:fk-in .45s cubic-bezier(.2,.7,.2,1) both}
@keyframes fk-in{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.route-focused .route-branch.compass-view{animation:none}}

/* 「ふだん → ここでは」の一行 */
.fk-flip{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;margin:8px 0 0;font:500 13px/1.4 'Noto Sans JP',system-ui,sans-serif;color:#5f7a8b}
.fk-flip span{color:#7f95a3}
.fk-flip i{font-style:normal;color:var(--fk-brass);font-weight:700}
.fk-flip b{color:var(--fk-ink);font-weight:700;font-size:15px}

/* 選択後の背景：START・海図と同じアイボリー系 */
.map-frame.route-focused{background:radial-gradient(120% 90% at 20% 0%,#f7f2e4 0%,#eae6d6 55%,#dfe6e6 100%)!important}
.route-focused .route-branch{background:#fbf9f2f2!important;border:1px solid #c9d2d3!important;box-shadow:0 18px 50px #1f405e22,inset 0 1px #fff!important}

/* ===== 詳細パネルの作り直し ===== */
.route-focused .route-branch.compass-view{--serif:'Zen Old Mincho','Hiragino Mincho ProN','Yu Mincho',serif;clip-path:none!important;background:#fbf9f2f4!important}
.route-focused .route-branch.compass-view{animation:fk-in .4s cubic-bezier(.2,.7,.2,1) both}
.route-focused .compass-view .route-card-head{display:block!important;position:relative;padding:22px 32px 20px!important;background:linear-gradient(#f4f6f3,#fbf9f2)!important;border-bottom:1px solid #d8dfdb!important}
.route-focused .compass-view .route-card-head>div{display:block;padding:0}
.route-focused .compass-view .route-card-head small{display:block;font:500 12px/1.4 'Noto Sans JP',sans-serif!important;letter-spacing:.04em!important;text-transform:none!important}
.fk-tag{display:inline-flex!important;align-items:center;gap:8px;color:#4d6b80!important;margin:0 0 4px}
.fk-tag:before{content:'';width:10px;height:10px;border-radius:50%;background:var(--c,#78caff);border:2px solid #fffdf6;box-shadow:0 0 0 1px #8aa0ad}
.route-focused .compass-view .route-card-head h2{font:700 38px/1.15 var(--serif)!important;letter-spacing:.01em!important;color:#1d3f5d!important;margin:2px 0 14px!important}
.route-focused .compass-view .route-card-head .fk-date{position:absolute!important;right:32px;bottom:18px;color:#8aa0ad!important;font-size:11px!important}
.route-focused .compass-view .route-card-head>button{position:absolute;top:18px}
.route-focused .compass-view .route-card-head>button:nth-of-type(1){right:70px}.route-focused .compass-view .route-card-head>button:nth-of-type(2){right:26px}
.fk-flip{display:flex;align-items:flex-end;gap:18px;margin:0!important;flex-wrap:nowrap}
.fk-flip>div{display:flex;flex-direction:column;gap:3px;min-width:0}
.fk-flip em{font:500 11px/1 'Noto Sans JP',sans-serif;font-style:normal;color:#7f95a3;letter-spacing:.06em}
.fk-flip .fk-from strong{font:500 19px/1.4 var(--serif);color:#7f95a3}
.fk-flip .fk-to strong{font:700 27px/1.3 var(--serif);color:#1d3f5d}
.fk-flip .fk-to em{color:#8c6f3c}
.fk-line{flex:none;position:relative;width:clamp(48px,9vw,120px);height:2px;margin-bottom:13px;background:#a98a52;transform-origin:left;animation:fk-draw .6s .25s cubic-bezier(.3,.7,.2,1) both}
.fk-line:after{content:'';position:absolute;right:-1px;top:-4px;width:9px;height:9px;border-top:2px solid #a98a52;border-right:2px solid #a98a52;transform:rotate(45deg) translate(-1px,1px)}
.fk-flip .fk-to{animation:fk-rise .5s .65s both}
.fk-flip .fk-from{animation:fk-rise .4s .1s both}
@keyframes fk-draw{from{transform:scaleX(0);opacity:0}to{transform:scaleX(1);opacity:1}}
@keyframes fk-rise{from{opacity:0;translate:0 6px}to{opacity:1;translate:0 0}}

/* 中央の◎は、名前を頭に置いたので外す */
.route-focused .compass-view .compass-center{display:none!important}

/* 2×2：順番のある4つの問い */
.route-focused .compass-view .service-compass{display:grid!important;grid-template-columns:1fr 1fr!important;grid-template-rows:auto minmax(0,1fr)!important;gap:16px!important;padding:18px 28px 24px!important;background:none!important}
.route-focused .compass-view .compass-north{grid-column:1!important;grid-row:1!important}
.route-focused .compass-view .compass-east{grid-column:2!important;grid-row:1!important}
.route-focused .compass-view .compass-west{grid-column:1!important;grid-row:2!important}
.route-focused .compass-view .compass-south{grid-column:2!important;grid-row:2!important}
.route-focused .compass-view .compass-area{padding:16px 22px 18px!important;border:0!important;border-top:2px solid #1d3f5d33!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;overflow:auto;scrollbar-width:thin;animation:fk-rise .45s both}
.route-focused .compass-view .compass-north{animation-delay:.9s}.route-focused .compass-view .compass-east{animation-delay:1s}.route-focused .compass-view .compass-west{animation-delay:1.1s}.route-focused .compass-view .compass-south{animation-delay:1.2s}
.route-focused .compass-view .compass-south{background:#eaf1f4!important;border-top-color:#1d3f5d66!important}
.route-focused .compass-view .compass-region-title{all:unset;display:flex;align-items:center;gap:12px;margin:0 0 12px;cursor:default}
.route-focused .compass-view .compass-region-title small{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;background:#1d3f5d;color:#fbf9f2;font:700 14px/1 'Noto Sans JP',sans-serif;letter-spacing:0}
.route-focused .compass-view .compass-region-title strong{font:700 20px/1.3 'Noto Sans JP',sans-serif;color:#1d3f5d;letter-spacing:.01em}
.route-focused .compass-view .compass-pitch{font:400 16px/1.85 'Noto Sans JP',sans-serif;color:#254a64;margin:0 0 10px}
.route-focused .compass-view .compass-steps li,.route-focused .compass-view .route-flow *{font-size:14.5px}
.route-focused .compass-view .compass-detail{margin-top:8px;border-top:1px solid #d8dfdb;padding-top:8px}
.route-focused .compass-view .compass-detail summary{font:500 13.5px/1.6 'Noto Sans JP',sans-serif;color:#2f5b7a;cursor:pointer}
.route-focused .compass-view .compass-detail p{font:400 14px/1.8 'Noto Sans JP',sans-serif;color:#35566b}
.route-focused .compass-view .compass-detail summary:focus-visible{outline:2px solid #1d3f5d;outline-offset:2px}
@media(prefers-reduced-motion:reduce){.fk-line,.fk-flip .fk-to,.fk-flip .fk-from,.route-focused .compass-view .compass-area{animation:none!important}}

/* 詰め直し：枠の内側スクロールを減らす */
.route-focused .compass-view .route-card-head{padding:16px 32px 14px!important}
.route-focused .compass-view .route-card-head h2{font-size:34px!important;margin:0 0 10px!important}
.route-focused .compass-view .research-date{position:absolute!important;right:32px;bottom:10px;margin:0!important;font:500 11px 'Noto Sans JP',sans-serif!important;color:#8aa0ad!important}
.route-focused .compass-view .service-compass{gap:12px 24px!important;padding:12px 28px 18px!important}
.route-focused .compass-view .compass-area{padding:12px 20px 14px!important}
.route-focused .compass-view .compass-region-title{margin:0 0 8px!important}
.route-focused .compass-view .compass-pitch{font-size:15.5px!important;line-height:1.75!important;margin:0 0 6px!important}
.route-focused .compass-view .compass-steps li{margin-bottom:8px!important;font-size:14px!important;line-height:1.7!important}
.route-focused .compass-view .compass-detail{margin-top:6px!important;padding-top:6px!important}

/* 海図が左上へ縮む／広がる（選択・戻るのとき） */
.map-frame .map-scroll{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.fk-hover-dot{pointer-events:none}
/* 一覧にカーソルを乗せると、縮小海図の地点が脈打つ */
.route-focused #map-svg .route.fk-hover .atlas-ring{r:34px!important;opacity:1;stroke:var(--fk-ink);stroke-width:5px;fill:#fffdf6aa;animation:fk-pulse 1.1s ease-in-out infinite}
@keyframes fk-pulse{0%,100%{stroke-opacity:1}50%{stroke-opacity:.25}}
@media(prefers-reduced-motion:reduce){.map-frame .map-scroll{transition:none}.route-focused #map-svg .route.fk-hover .atlas-ring{animation:none}}

/* 公式サイトへ（確認済みの公式ページ） */
.route-focused .compass-view .fk-official{position:absolute;right:32px;bottom:34px;display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.route-focused .compass-view .fk-official-btn{display:inline-flex;align-items:center;padding:11px 20px;border-radius:999px;background:#1d3f5d;color:#fbf9f2;font:700 14px/1 'Noto Sans JP',sans-serif;letter-spacing:.03em;text-decoration:none;box-shadow:0 6px 16px #1d3f5d33;transition:background .2s,transform .2s}
.route-focused .compass-view .fk-official-btn:hover{background:#2b5a82;transform:translateY(-1px)}
.route-focused .compass-view .fk-official-btn:focus-visible{outline:3px solid #1d3f5d;outline-offset:3px}

@media(prefers-reduced-motion:reduce){.route-focused .compass-view .fk-official-btn{transition:none}}

/* 公式サイト／登録・始め方 の2つのボタン */
.route-focused .compass-view .fk-official{align-items:flex-end;gap:8px}
.route-focused .compass-view .fk-official-row{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.route-focused .compass-view .fk-official-btn{background:#fbf9f2;color:#1d3f5d;border:1.5px solid #1d3f5d;box-shadow:none;padding:9.5px 18px}
.route-focused .compass-view .fk-official-btn.primary{background:#1d3f5d;color:#fbf9f2;box-shadow:0 6px 16px #1d3f5d33}
.route-focused .compass-view .fk-official-btn:hover{background:#e6eef2;color:#1d3f5d;transform:translateY(-1px)}
.route-focused .compass-view .fk-official-btn.primary:hover{background:#2b5a82;color:#fbf9f2}
.route-focused .compass-view .fk-official-src{font:500 12px/1.4 'Noto Sans JP',sans-serif;color:#4d6b80;text-decoration:underline;text-underline-offset:3px;max-width:340px;text-align:right}
.route-focused .compass-view .fk-official-src:hover{color:#1d3f5d}
.route-focused .compass-view .fk-official-src:focus-visible{outline:2px solid #1d3f5d;outline-offset:2px}

/* 同じ目的で選べる入口（詳細の下の帯） */
.route-focused .compass-view .fk-next{flex:none;display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:10px 28px 12px;border-top:1px solid #d8dfdb;background:#f4f6f3}
.fk-next-label{font:500 12.5px/1.4 'Noto Sans JP',sans-serif;color:#4d6b80}
.fk-next-chips{display:flex;gap:8px;flex-wrap:wrap}
.fk-chip{all:unset;box-sizing:border-box;cursor:pointer;padding:7px 14px;border-radius:999px;border:1.5px solid #1d3f5d55;background:#fbf9f2;color:#1d3f5d;font:600 13px/1.2 'Noto Sans JP',sans-serif;transition:background .2s,border-color .2s}
.fk-chip:hover{background:#e6eef2;border-color:#1d3f5d}
.fk-chip:focus-visible{outline:2px solid #1d3f5d;outline-offset:2px}
@media(prefers-reduced-motion:reduce){.fk-chip{transition:none}}