/* Jatlas editorial experience layer.
   Keeps the existing map/data runtime intact and changes only presentation + mode switching. */
:root{
  --jx-ink:#14202b;
  --jx-ink-soft:#52606c;
  --jx-cream:#f4f0e9;
  --jx-paper:#fbf9f5;
  --jx-navy:#0c1723;
  --jx-navy-2:#132332;
  --jx-copper:#b7684b;
  --jx-gold:#d9b98b;
  --jx-line:rgba(20,32,43,.11);
  --jx-radius:24px;
  --jx-shadow:0 24px 70px rgba(19,31,43,.10);
}
html{scroll-behavior:smooth}
body{background:var(--jx-cream);color:var(--jx-ink)}
body.jatlasIntroActive{overflow:hidden}
body.jatlasIntroActive>header{opacity:0;pointer-events:none}
body[data-jatlas-view="explore"]{background:var(--jx-cream)}
body[data-jatlas-view="map"]{background:#e7edf0}
body[data-jatlas-view="detail"]{background:var(--jx-cream)}

#jatlasIntro{
  position:fixed;inset:0;z-index:5000;overflow-y:auto;overscroll-behavior:contain;
  background:#08111a;color:#fff;scrollbar-width:thin;scrollbar-color:#ffffff52 transparent;
  transition:opacity .48s ease,visibility .48s ease;
}
#jatlasIntro.leaving{opacity:0;visibility:hidden}
.jxIntroSection{position:relative;min-height:100svh;overflow:hidden}
.jxIntroHero{display:grid;place-items:center;isolation:isolate;background:#08111a}
.jxIntroHero::before{
  content:"";position:absolute;inset:-3%;z-index:-2;
  background:
    linear-gradient(180deg,rgba(4,10,16,.18),rgba(4,10,16,.54)),
    url("images/regions/koshinetsu/yamanashi/places/19-P0017-arakurayama-sengen-park.webp") center 48%/cover no-repeat;
  transform:scale(1.03);
}
.jxIntroHero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(0,0,0,.08) 0%,rgba(0,0,0,.03) 54%,rgba(5,11,17,.78) 100%);
}
.jxIntroTop{
  position:absolute;top:26px;left:clamp(22px,4vw,70px);right:clamp(22px,4vw,70px);
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#ffffffc9;
}
.jxIntroBrand{font-family:Georgia,"Times New Roman",serif;font-size:30px;letter-spacing:-.02em;text-transform:none;color:#fff}
.jxIntroBrand small{display:block;font-family:inherit;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:#ffffff9a;margin-top:4px}
.jxIntroHeroCopy{text-align:center;max-width:980px;padding:100px 24px 150px}
.jxIntroKicker{font-size:12px;letter-spacing:.34em;text-transform:uppercase;color:#ffffffb3;margin-bottom:22px}
.jxIntroHero h1,.jxIntroStory h2,.jxIntroFinal h2{
  font-family:Georgia,"Times New Roman",serif;font-weight:400;letter-spacing:-.045em;margin:0
}
.jxIntroHero h1{font-size:clamp(70px,11vw,158px);line-height:.86;text-shadow:0 14px 44px #0008}
.jxIntroHero .jxIntroLead{font-family:Georgia,"Times New Roman",serif;font-size:clamp(28px,4vw,56px);margin:26px 0 0;letter-spacing:-.035em}
.jxIntroHero p{max-width:660px;margin:20px auto 0;color:#ffffffc7;font-size:clamp(15px,1.6vw,20px);line-height:1.8}
.jxVideoPlaceholder{
  display:inline-flex;align-items:center;gap:9px;margin-top:22px;padding:8px 12px;border-radius:999px;
  background:#0b11199e;border:1px solid #ffffff30;color:#ffffffab;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  backdrop-filter:blur(12px)
}
.jxVideoPlaceholder i{width:7px;height:7px;border-radius:50%;background:#d77a59;box-shadow:0 0 0 5px #d77a5925}
.jxScrollCue{position:absolute;bottom:26px;left:50%;translate:-50% 0;text-align:center;color:#ffffffa0;font-size:10px;letter-spacing:.25em;text-transform:uppercase}
.jxScrollCue::after{content:"";display:block;width:10px;height:10px;margin:10px auto 0;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg);animation:jxFloat 1.8s ease-in-out infinite}

.jxIntroStory{min-height:170svh;background:#0b141f}
.jxIntroSticky{position:sticky;top:0;min-height:100svh;display:grid;align-items:center;padding:100px clamp(22px,6vw,92px)}
.jxIntroStoryBackdrop{position:absolute;inset:0;opacity:.28;background:linear-gradient(90deg,#07111be8,#07111b66),url("images/regions/kinki/kyoto/places/26-P0001-kiyomizudera.webp") center/cover no-repeat}
.jxIntroStoryGrid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,.85fr) minmax(560px,1.15fr);gap:7vw;align-items:center;max-width:1450px;margin:auto;width:100%}
.jxIntroStory h2{font-size:clamp(46px,6.5vw,92px);line-height:.95}
.jxIntroStoryCopy>p{max-width:520px;color:#d7dce1c9;font-size:18px;line-height:1.8;margin:24px 0 0}
.jxIntroCards{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.jxIntroCard{min-height:260px;border-radius:22px;overflow:hidden;position:relative;border:1px solid #ffffff1f;background:#17212d;box-shadow:0 20px 60px #0005}
.jxIntroCard:nth-child(3){grid-column:1/-1;min-height:220px}
.jxIntroCard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.92)}
.jxIntroCard::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,#071019d9)}
.jxIntroCard div{position:absolute;z-index:1;left:20px;right:20px;bottom:18px}
.jxIntroCard small{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:#ffffffa8}
.jxIntroCard strong{display:block;margin-top:7px;font-family:Georgia,"Times New Roman",serif;font-size:25px;font-weight:400}

.jxIntroAtlas{min-height:110svh;background:linear-gradient(180deg,#0b141f,#101923);display:grid;place-items:center;padding:90px 24px}
.jxAtlasInner{max-width:1220px;width:100%;text-align:center}
.jxAtlasNumber{font-family:Georgia,"Times New Roman",serif;font-size:clamp(100px,19vw,260px);line-height:.72;color:#ffffff0c;letter-spacing:-.08em}
.jxAtlasInner h2{font-family:Georgia,"Times New Roman",serif;font-size:clamp(42px,6vw,78px);font-weight:400;letter-spacing:-.04em;margin:-15px 0 18px}
.jxAtlasInner>p{max-width:690px;margin:auto;color:#ffffffae;font-size:18px;line-height:1.8}
.jxAtlasMeta{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:62px;border:1px solid #ffffff18;border-radius:22px;overflow:hidden;background:#ffffff12}
.jxAtlasMeta div{padding:28px 18px;background:#0d1722}
.jxAtlasMeta strong{display:block;font-family:Georgia,"Times New Roman",serif;font-size:28px;font-weight:400}
.jxAtlasMeta span{display:block;margin-top:7px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#ffffff76}

.jxIntroFinal{min-height:100svh;display:grid;place-items:center;text-align:center;padding:90px 24px;background:radial-gradient(circle at 50% 30%,#26384a 0,#0b1520 48%,#071019 100%)}
.jxIntroFinalInner{max-width:900px}
.jxIntroFinal h2{font-size:clamp(50px,7.2vw,100px);line-height:.92}
.jxIntroFinal p{max-width:620px;margin:24px auto 34px;color:#ffffffb8;font-size:18px;line-height:1.8}
.jxPrimary,.jxGhost{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:50px;padding:0 24px;border-radius:999px;
  font-size:14px;font-weight:700;transition:.24s ease;text-decoration:none
}
.jxPrimary{background:#f6f1e8;color:#14202b;border:1px solid #fff;box-shadow:0 16px 40px #0004}
.jxPrimary:hover{transform:translateY(-2px);background:#fff}
.jxGhost{background:#ffffff09;color:#fff;border:1px solid #ffffff31}
.jxGhost:hover{background:#ffffff14}
.jxIntroFine{margin-top:18px!important;font-size:12px!important;color:#ffffff66!important}

header{
  height:74px!important;position:sticky!important;top:0;z-index:1800!important;padding:0 clamp(18px,3vw,48px)!important;
  background:#f7f3edda!important;border-bottom:1px solid rgba(20,32,43,.08)!important;backdrop-filter:blur(18px) saturate(1.15)!important;
  transition:background .25s,color .25s,border-color .25s,opacity .25s
}
body[data-jatlas-view="map"]>header{background:#0b1520e8!important;border-color:#ffffff13!important;color:#eef3f4}
body[data-jatlas-view="map"]>header button,body[data-jatlas-view="map"]>header #savedToggle{color:#eaf0f2}
#brand{align-items:center!important}
#brand .jatlasLogoFrame{width:156px!important}
.jxModeSwitch{display:flex;align-items:center;padding:4px;background:#e7e2da;border-radius:999px;margin-right:6px}
body[data-jatlas-view="map"] .jxModeSwitch{background:#ffffff12}
.jxModeSwitch button{border:0!important;min-height:36px!important;border-radius:999px!important;padding:7px 16px!important;background:transparent!important;font-size:13px!important}
.jxModeSwitch button.active{background:#fff!important;color:#18232d!important;box-shadow:0 3px 12px #1d2f3b16}
body[data-jatlas-view="map"] .jxModeSwitch button.active{background:#f2eee7!important;color:#16202a!important}
.topnav{gap:8px!important;align-items:center}
.topnav>button:not(.jxModeButton){font-weight:600!important;color:#59636d!important}
body[data-jatlas-view="map"] .topnav>button:not(.jxModeButton){color:#dce5e8!important}
.language{background:#ebe6de!important}
body[data-jatlas-view="map"] .language{background:#ffffff12!important}
body[data-jatlas-view="map"] .language button.active{background:#ffffff18!important;color:#fff!important}
#count{background:#e7d6cb!important;color:#744631!important}
body[data-jatlas-view="map"] #count{background:#ffffff1a!important;color:#fff!important}

#magazineExplore{display:block;background:var(--jx-cream);min-height:100svh}
#magazineExplore[hidden]{display:none}
.jxExploreShell{max-width:1480px;margin:auto;padding:34px clamp(18px,4vw,58px) 90px}
.jxEditorialHero{
  position:relative;min-height:clamp(420px,58vw,690px);overflow:hidden;border-radius:30px;background:#1b2732;
  box-shadow:var(--jx-shadow);isolation:isolate
}
.jxEditorialHero::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:url("images/regions/koshinetsu/yamanashi/places/19-P0012-lake-kawaguchi.webp") center 54%/cover no-repeat;
  transform:scale(1.01)
}
.jxEditorialHero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#09121bd9 0%,#09121b91 38%,#09121b1f 72%),linear-gradient(180deg,transparent 58%,#08121b75)}
.jxEditorialCopy{position:absolute;left:clamp(26px,5vw,76px);bottom:clamp(30px,5vw,76px);max-width:630px;color:#fff}
.jxEditorialCopy .eyebrow{color:#ffffffa8!important}
.jxEditorialCopy h1{font-family:Georgia,"Times New Roman",serif;font-size:clamp(48px,6.5vw,92px);font-weight:400;line-height:.92;letter-spacing:-.05em;margin:10px 0 20px}
.jxEditorialCopy p{max-width:520px;color:#ffffffc2;font-size:18px;line-height:1.75;margin:0 0 24px}
.jxExploreToolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:26px 0 58px}
.jxExploreChips{display:flex;gap:8px;flex-wrap:wrap}
.jxExploreChips button{border:1px solid var(--jx-line);background:#fbf9f5;color:#43505a;border-radius:999px;min-height:42px;padding:8px 16px;font-size:13px}
.jxExploreChips button:hover{background:#fff}
.jxMapTeaser{border:0;background:#152432;color:#fff;border-radius:999px;padding:11px 18px;min-height:44px;white-space:nowrap}
.jxSection{margin-top:76px}
.jxSectionHead{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,.6fr);gap:30px;align-items:end;margin-bottom:24px}
.jxSectionHead small{font-size:11px;letter-spacing:.21em;text-transform:uppercase;color:#848b90}
.jxSectionHead h2{font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:clamp(36px,4.4vw,62px);letter-spacing:-.045em;line-height:.98;margin:8px 0 0}
.jxSectionHead p{margin:0;color:#6b747c;font-size:15px;line-height:1.8}
.jxStoryGrid{display:grid;grid-template-columns:1.35fr .82fr .82fr;gap:16px}
.jxStoryCard,.jxRegionCard,.jxMoodCard,.jxResumeCard{position:relative;overflow:hidden;border-radius:22px;background:#fff;border:1px solid var(--jx-line);box-shadow:0 12px 35px rgba(20,32,43,.055);cursor:pointer}
.jxStoryCard{min-height:470px}
.jxStoryCard:not(:first-child){min-height:470px}
.jxStoryCard img,.jxRegionCard img,.jxMoodCard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.jxStoryCard:hover img,.jxRegionCard:hover img,.jxMoodCard:hover img{transform:scale(1.035)}
.jxStoryCard::after,.jxRegionCard::after,.jxMoodCard::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 25%,rgba(6,14,21,.75))}
.jxCardCopy{position:absolute;z-index:1;left:22px;right:22px;bottom:22px;color:#fff}
.jxCardCopy small{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#ffffffa8}
.jxCardCopy strong{display:block;font-family:Georgia,"Times New Roman",serif;font-size:clamp(24px,2vw,34px);font-weight:400;line-height:1.05;margin-top:8px}
.jxCardCopy span{display:block;margin-top:9px;font-size:13px;color:#ffffffb6}
.jxRegions{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.jxRegionCard{min-height:290px}
.jxRegionCard .jxCardCopy strong{font-size:27px}
.jxMoodGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.jxMoodCard{min-height:260px}
.jxResumeCard{display:flex;align-items:center;justify-content:space-between;gap:22px;padding:24px 26px;margin-top:26px;background:#132433;color:#fff;border-color:#ffffff10}
.jxResumeCard h3{font-family:Georgia,"Times New Roman",serif;font-size:28px;font-weight:400;margin:0 0 5px}
.jxResumeCard p{margin:0;color:#ffffff9e;font-size:13px}
.jxResumeCard button{flex-shrink:0}

body[data-jatlas-view="map"] .app{max-width:none;margin:0;display:grid;grid-template-columns:minmax(280px,340px) minmax(0,1fr);align-items:start}
body[data-jatlas-view="map"] .searchbar{
  position:sticky;top:74px;height:calc(100svh - 74px);padding:34px 26px!important;background:linear-gradient(180deg,#101e2b,#0b1621);
  color:#eaf0f2;border-right:1px solid #ffffff10;overflow:auto;max-width:none!important
}
body[data-jatlas-view="map"] .searchwrap{background:#ffffff0e!important;border-color:#ffffff17!important;box-shadow:none!important}
body[data-jatlas-view="map"] .searchwrap input{color:#fff!important}
body[data-jatlas-view="map"] .searchwrap input::placeholder{color:#ffffff7a}
body[data-jatlas-view="map"] .searchwrap>span{color:#ffffff8a}
body[data-jatlas-view="map"] .weatherCurrent{background:#ffffff0e;color:#fff;border-color:#ffffff17}
body[data-jatlas-view="map"] .app main{padding:26px clamp(20px,3vw,44px) 70px;max-width:none;min-width:0}
body[data-jatlas-view="map"] #overview .sectionhead{margin-bottom:6px}
body[data-jatlas-view="map"] #overview .sectionhead h1{font-family:Georgia,"Times New Roman",serif;font-weight:400;letter-spacing:-.045em}
body[data-jatlas-view="map"] #overviewSummary{color:#66737e}
body[data-jatlas-view="map"] .homeLayout{grid-template-columns:1fr!important}
body[data-jatlas-view="map"] .nationalStage #nationalMap{height:clamp(560px,calc(100svh - 260px),820px)!important;border-radius:26px;border-color:#cbd8de;box-shadow:0 24px 60px #24343f15}
body[data-jatlas-view="map"] .mapframe.leaflet-container{background:#dfe9ed}
body[data-jatlas-view="map"] .regionMapLabel span,body[data-jatlas-view="map"] .prefMapLabel span{background:#fbfaf6e8;color:#243947;border-color:#fff;box-shadow:0 4px 15px #22313a21}
body[data-jatlas-view="map"] .chiprow button{border-radius:999px}
body[data-jatlas-view="map"] #nationalRegions button.active{background:#162a39;border-color:#162a39}
body[data-jatlas-view="map"] .mapcredit{color:#71808a}
body[data-jatlas-view="map"] .placeMarker span{background:#bd6a4b;border-width:2px;border-radius:50%;transform:none}
body[data-jatlas-view="map"] .placeMarker span b{transform:none}
body[data-jatlas-view="map"] .placeMarker span.chosen{background:#142a3a}

body[data-jatlas-view="detail"] .app{max-width:1480px}
body[data-jatlas-view="detail"] .app main{padding-top:22px}
body[data-jatlas-view="detail"] #explore>.sectionhead{background:#fbf9f5;border:1px solid var(--jx-line);padding:24px;border-radius:24px;min-height:220px}
body[data-jatlas-view="detail"] .heroPhotoWrap{box-shadow:none}
body[data-jatlas-view="detail"] .themeFilters button{background:#fbf9f5;box-shadow:none;border:1px solid var(--jx-line)}
body[data-jatlas-view="detail"] .themeFilters button.active{background:#192c3b}
body[data-jatlas-view="detail"] .mapcolumn{background:#fbf9f5;border-color:var(--jx-line);box-shadow:0 10px 30px #1a2b3510}
body[data-jatlas-view="detail"] .card{border-color:var(--jx-line);box-shadow:0 10px 24px #1a2b3509;background:#fbfaf7}
body[data-jatlas-view="detail"] .cardMain strong,body[data-jatlas-view="detail"] .detail h2,body[data-jatlas-view="detail"] .resulthead h2{font-family:Georgia,"Times New Roman",serif;font-weight:400}
body[data-jatlas-view="detail"] .contentTabs button.active{background:#192c3b;border-color:#192c3b}

@keyframes jxFloat{0%,100%{translate:0 0}50%{translate:0 5px}}
@media(max-width:1050px){
  .jxIntroStoryGrid{grid-template-columns:1fr;gap:38px}.jxIntroCards{max-width:760px}
  .jxStoryGrid{grid-template-columns:1fr 1fr}.jxStoryCard:first-child{grid-column:1/-1;min-height:520px}
  .jxRegions{grid-template-columns:repeat(2,1fr)}
  body[data-jatlas-view="map"] .app{grid-template-columns:280px minmax(0,1fr)}
}
@media(max-width:760px){
  #jatlasIntro{scroll-snap-type:y proximity}
  .jxIntroSection{scroll-snap-align:start}
  .jxIntroTop{top:18px}.jxIntroBrand{font-size:25px}.jxIntroTop>span:last-child{display:none}
  .jxIntroHeroCopy{padding-left:20px;padding-right:20px}
  .jxIntroHero h1{font-size:clamp(65px,23vw,105px)}
  .jxIntroStory{min-height:auto}.jxIntroSticky{position:relative;min-height:auto;padding:95px 18px}
  .jxIntroStoryBackdrop{opacity:.22}
  .jxIntroStory h2{font-size:52px}.jxIntroStoryCopy>p{font-size:15px}
  .jxIntroCards{grid-template-columns:1fr}.jxIntroCard,.jxIntroCard:nth-child(3){grid-column:auto;min-height:220px}
  .jxAtlasMeta{grid-template-columns:1fr 1fr}.jxAtlasMeta div{padding:22px 12px}
  header{height:68px!important;padding:0 14px!important}
  #brand .jatlasLogoFrame{width:128px!important}.topnav>button:not(.jxModeButton){display:none}
  .jxModeSwitch{margin-left:auto;margin-right:0}.jxModeSwitch button{padding:7px 13px!important}
  .headerActions{margin-left:0!important}.language{display:none!important}
  #magazineExplore{padding-bottom:72px}
  .jxExploreShell{padding:18px 14px 56px}
  .jxEditorialHero{min-height:520px;border-radius:22px}
  .jxEditorialHero::after{background:linear-gradient(180deg,#09121b24 25%,#09121be0 78%)}
  .jxEditorialCopy{left:22px;right:22px;bottom:24px}
  .jxEditorialCopy h1{font-size:52px}
  .jxEditorialCopy p{font-size:15px}
  .jxExploreToolbar{align-items:flex-start;flex-direction:column;margin:18px 0 42px}
  .jxExploreChips{flex-wrap:nowrap;width:100%;overflow-x:auto;padding-bottom:4px}.jxExploreChips button{flex-shrink:0}
  .jxMapTeaser{width:100%}
  .jxSection{margin-top:55px}.jxSectionHead{grid-template-columns:1fr;gap:10px}.jxSectionHead h2{font-size:42px}
  .jxStoryGrid,.jxMoodGrid{grid-template-columns:1fr}.jxStoryCard,.jxStoryCard:first-child{grid-column:auto;min-height:390px}
  .jxRegions{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px}.jxRegionCard{min-width:78vw;scroll-snap-align:start}
  .jxResumeCard{align-items:flex-start;flex-direction:column}.jxResumeCard button{width:100%}
  body[data-jatlas-view="map"] .app{display:block}
  body[data-jatlas-view="map"] .searchbar{
    position:relative;top:auto;height:auto;padding:14px 18px 0!important;background:#e7edf0;color:var(--jx-ink);border-right:0
  }
  body[data-jatlas-view="map"] .searchwrap{background:#fff!important;border-color:#d8e0e4!important}
  body[data-jatlas-view="map"] .searchwrap input{color:#24313a!important}
  body[data-jatlas-view="map"] .searchwrap input::placeholder{color:#74808a}
  body[data-jatlas-view="map"] .searchwrap>span{color:#6a7881}
  body[data-jatlas-view="map"] .app main{padding:12px 18px 88px}
  body[data-jatlas-view="map"] .nationalStage #nationalMap{height:clamp(430px,64svh,620px)!important;border-radius:20px}
  body[data-jatlas-view="detail"] #explore>.sectionhead{padding:15px;border-radius:20px}
  .bottomnav{background:#f8f5f0e8!important;border-color:#ddd5cb!important;backdrop-filter:blur(18px)!important}
  .bottomnav button{color:#53606a!important}.bottomnav button.active{color:#162b3b!important}
}