/* /vavitte-salons/ 専用（日本地図・サロン写真・認定の写真構成）。共通の styles.css の後に読み込む。 */

/* ===== ファーストビュー：コピー＋日本地図 ===== */
.salon-hero-map{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:4vw;padding-top:56px;padding-bottom:64px;background:radial-gradient(ellipse at 78% 45%,#fff 0%,rgba(255,255,255,.55) 38%,rgba(255,255,255,0) 70%),#fbeef1;overflow:hidden}
.salon-hero-map .salon-page-copy h1{font-size:clamp(34px,3.5vw,54px);line-height:1.35;margin:14px 0 18px}
.salon-hero-map .salon-page-copy h1 em{white-space:nowrap}
.salon-kpi{margin:28px 0 0;max-width:560px}
.salon-kpi[hidden],.salon-kpi [hidden]{display:none}
.kpi-group{margin:0 0 8px;font:600 11px var(--jp);letter-spacing:.14em;color:#8a5a6a}
.kpi-row{display:grid;grid-template-columns:1fr 1fr;margin:0;border-top:1px solid rgba(91,36,57,.14);border-bottom:1px solid rgba(91,36,57,.14)}
.kpi-row>div{padding:14px 12px 12px 0;display:flex;flex-direction:column}
.kpi-row>div+div{border-left:1px solid rgba(91,36,57,.14);padding-left:18px}
.kpi-row dt{font:600 12px/1.5 var(--jp);color:var(--wine)}
.kpi-row dd{margin:auto 0 0;padding-top:4px;display:flex;align-items:baseline;gap:5px}
.kpi-row b{font:500 46px/1 var(--serif);color:var(--cta)}
.kpi-row span{font:600 13px var(--jp);color:var(--wine)}
.kpi-row+.kpi-group{margin-top:18px}
.kpi-sub{border-color:rgba(91,36,57,.1)}
.kpi-sub>div{padding-top:10px;padding-bottom:9px}
.kpi-sub b{font-size:32px;color:#b04a6b}
.kpi-note{margin:12px 0 0;font:500 13px var(--jp);color:#6d4a57}
.kpi-note b{font:600 14px var(--sans);color:var(--cta);margin:0 2px}
.region-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;max-width:560px}
.region-chips button{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(91,36,57,.18);background:#fff;color:var(--wine);border-radius:999px;padding:10px 16px;font:600 13px var(--jp);cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .2s}
.region-chips button:hover{border-color:var(--cta);transform:translateY(-1px)}
.region-chips button[aria-pressed="true"]{background:var(--wine);border-color:var(--wine);color:#fff}
.region-chips i{font:600 11px var(--sans);font-style:normal;color:var(--cta)}
.region-chips i:empty{display:none}
.region-chips button[aria-pressed="true"] i{color:#f6c1d0}
.region-chips button:focus-visible{outline:2px solid var(--cta);outline-offset:3px}

.japan-map{position:relative;margin:0;display:flex;align-items:center;justify-content:center}
.japan-map-svg{display:block;overflow:visible;width:auto;max-width:100%;height:min(760px,calc(100vh - 150px));min-height:500px}
.jm-inset{fill:none;stroke:#e2b7c4;stroke-width:1;stroke-dasharray:3 4}
.jm-pref{fill:#fff;stroke:#e8bfcb;stroke-width:.8;stroke-linejoin:round;cursor:pointer;transition:fill .3s,opacity .3s;filter:drop-shadow(0 6px 10px rgba(150,80,105,.08))}
.jm-pref.has-salon{fill:#f3c1cf}
.jm-region:hover .jm-pref{fill:#fdf3f6}
.jm-region:hover .jm-pref.has-salon{fill:#eeabbe}
.japan-map[data-region]:not([data-region=""]) .jm-region:not(.is-active) .jm-pref{opacity:.45}
.jm-region.is-active .jm-pref{fill:#fde9ef;stroke:#d98ba2}
.jm-region.is-active .jm-pref.has-salon{fill:#e98aa6}
.jm-markers{pointer-events:none}
.jm-marker{opacity:0;transition:opacity .6s}
.japan-map[data-state="ready"] .jm-marker.is-on{opacity:1}
.jm-halo{fill:rgba(232,85,125,.2);stroke:rgba(232,85,125,.35);stroke-width:.8}
.jm-dot{fill:var(--cta);stroke:#fff;stroke-width:1.6}
.japan-map[data-state="ready"] .jm-marker.is-on .jm-halo{animation:jm-pulse 3.2s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes jm-pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.12);opacity:.75}}
@media (prefers-reduced-motion:reduce){.japan-map[data-state="ready"] .jm-marker.is-on .jm-halo{animation:none}}

.map-panel{position:absolute;left:0;top:2%;width:min(300px,44%);background:rgba(255,255,255,.94);border-radius:10px;padding:20px 22px;box-shadow:0 18px 40px rgba(107,55,72,.14);backdrop-filter:blur(6px)}
.map-legend{display:flex;align-items:center;gap:8px;margin:0 0 12px;font:600 11px/1.6 var(--jp);color:#8a5a6a}
.map-legend i{flex:none;width:12px;height:12px;border-radius:50%;background:var(--cta);box-shadow:0 0 0 4px rgba(232,85,125,.2)}
.japan-map:not([data-state="ready"]) .map-legend{display:none}
.map-panel-body strong{display:block;font:600 17px var(--jp);color:var(--wine)}
.map-panel-body p{margin:8px 0 0;font:400 13px/1.8 var(--jp);color:var(--ink)}
.map-pref-list{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:4px 14px}
.map-pref-list li{display:flex;justify-content:space-between;gap:8px;padding:5px 0;border-bottom:1px solid rgba(91,36,57,.1);font:500 13px var(--jp)}
.map-pref-list b{color:var(--cta);font:600 13px var(--sans)}
.map-panel-link{display:inline-flex;align-items:center;gap:10px;margin-top:14px;font:600 13px var(--jp);color:var(--cta);border-bottom:1px solid;padding-bottom:4px}

/* ===== 認定サロンを探す：写真＋検索パネル ===== */
.finder-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:22px;align-items:stretch}
.finder-photos{display:grid;grid-template-columns:1.25fr 1fr;grid-template-rows:repeat(2,minmax(0,1fr));gap:14px;height:540px}
.finder-photos figure{position:relative;margin:0;overflow:hidden;border-radius:8px}
.finder-photos .fp-main{grid-row:1/3}
.finder-photos img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s ease}
.finder-photos figure:hover img{transform:scale(1.03)}
.finder-photos .fp-sub:nth-child(2) img{object-position:center 30%}
.finder-photos .fp-sub:nth-child(3) img{object-position:center 35%}
.finder-photos figcaption{position:absolute;left:14px;bottom:14px;background:rgba(255,255,255,.92);border-radius:6px;padding:9px 13px;font:600 10px var(--sans);letter-spacing:.16em;color:var(--cta)}
.finder-photos figcaption span{display:block;margin-top:3px;font:600 13px var(--jp);letter-spacing:.04em;color:var(--wine)}
.finder-layout .finder-panel{display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:26px;padding:48px 42px}
.finder-points{list-style:none;margin:0;padding:0;border-top:1px solid rgba(255,255,255,.18)}
.finder-points li{display:flex;align-items:center;gap:16px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.18);font:500 14px/1.6 var(--jp)}
.finder-points b{font:500 18px var(--serif);color:#f1a9bd}
.finder-layout .finder-actions{flex-direction:column}
.finder-panel .button.white{color:var(--wine)}
.finder-layout .finder-actions .button{justify-content:center}

/* ===== 学びと技術の、認定サロン：写真4枚 ===== */
.cert-photos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:55px}
.cert-photos figure{margin:0;background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 14px 34px rgba(107,55,72,.08)}
.cert-photos img{width:100%;aspect-ratio:4/5;object-fit:cover}
.cert-photos figure:nth-child(1) img{object-position:center 60%}
.cert-photos figure:nth-child(2) img{object-position:center 40%}
.cert-photos figure:nth-child(3) img{object-position:45% center}
.cert-photos .cp-diploma img{background:#f8f4ee}
.cert-photos figcaption{padding:18px 20px 22px;font:600 16px var(--jp);color:var(--wine)}
.cert-photos figcaption b{display:block;font:500 13px var(--serif);color:var(--cta);margin-bottom:6px}
.cert-photos figcaption span{display:block;margin-top:8px;font:400 13px/1.8 var(--jp);color:var(--ink)}
.cert-photos+.cert-grid{margin-top:18px}

@media(max-width:1100px){
.cert-photos{grid-template-columns:repeat(2,minmax(0,1fr))}
.map-panel{width:min(280px,52%)}
}
@media(max-width:900px){
.salon-hero-map{grid-template-columns:1fr;padding:56px 24px 50px;gap:10px}
.kpi-row b{font-size:38px}
.kpi-sub b{font-size:28px}
.japan-map{min-height:0;flex-direction:column;margin:0 -8px}
.japan-map-svg{width:100%;max-width:460px;height:auto;min-height:0}
.map-panel{position:relative;right:auto;bottom:auto;width:100%;margin-top:6px}
.finder-layout{grid-template-columns:1fr}
.finder-photos{height:auto;grid-template-rows:220px 170px}
.finder-layout .finder-panel{padding:35px 24px}
}
@media(max-width:560px){
.region-chips button{padding:9px 13px;font-size:12px}
.kpi-row dt{font-size:11px}
.kpi-row>div+div{padding-left:12px}
.kpi-row b{font-size:34px}
.kpi-sub b{font-size:26px}
.finder-photos{grid-template-columns:1fr 1fr;grid-template-rows:210px 180px}
.finder-photos .fp-sub figcaption{left:8px;bottom:8px;padding:6px 9px;font-size:8px}
.finder-photos .fp-sub figcaption span{font-size:11px}
.finder-photos .fp-main{grid-row:auto;grid-column:1/3}
.cert-photos{gap:10px}
.cert-photos figcaption{padding:14px 14px 18px;font-size:14px}
.cert-photos figcaption span{font-size:12px}
.map-pref-list{grid-template-columns:1fr 1fr}
}
.map-panel{word-break:normal;line-break:strict}

/* VL-HOME-MAP-1: ホーム(05 VAVITTE SALON)の日本地図。/vavitte-salons/ と同じ地図を、選択UIなしの表示専用(data-map-mode="display")で置く。クリックは /vavitte-salons/ へ */
.japan-map--display{flex-direction:column;gap:12px}
.japan-map--display .map-link{display:block;max-width:100%}
.japan-map--display .japan-map-svg{height:min(600px,calc(100vh - 200px));min-height:0}
.japan-map--display .jm-pref{cursor:pointer}
@media(max-width:900px){.japan-map--display .japan-map-svg{height:auto}}