/* The city's navigation stays separate from the logo and global navigation. */
body.eac-city-navigation{--eac-city-header-height:64px;--eac-city-rail-width:180px;--eac-city-main-left:228px}
body.eac-city-navigation #content .l-sideScrollMenu,
body.eac-city-navigation #content .ecl-city-nav{display:none!important}
body.eac-city-navigation #header,
body.eac-city-navigation #header2{position:sticky;top:0;z-index:1100}
/* The drawer locks the body at the current scroll position. Keep its close button in view. */
@media(max-width:1023px){body.eac-city-navigation:has(#js-globalNav.is-open) #header{position:fixed;inset:0 0 auto;width:100%}}
body.eac-city-navigation #content [id]{scroll-margin-top:calc(var(--eac-city-header-height) + 24px)}
body.eac-city-navigation .eac-city-rail{box-sizing:border-box;font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;color:#51423c;letter-spacing:.03em;line-height:1.7;background:#fffdf9;border:1px solid #eaded6;border-radius:16px;box-shadow:0 5px 24px #5b3f3610;padding:20px 12px}
.eac-city-rail *{box-sizing:border-box}
.eac-city-rail-heading{padding:0 10px 17px;border-bottom:1px solid #eee3dc;margin-bottom:10px}
.eac-city-rail-heading>span{display:block;font-size:9px;letter-spacing:.17em;color:#ad6470}
.eac-city-rail-heading>strong{display:block;font-size:17px;font-weight:600;margin:6px 0;line-height:1.6;overflow-wrap:anywhere}
.eac-city-rail-heading>small{display:block;font-size:10px;color:#8c7a70}
#eac-city-navigation ul{display:flex;flex-direction:column;gap:5px;margin:0;padding:0;list-style:none}
#eac-city-navigation li{display:block;margin:0;padding:0;list-style:none;background:none;border:0}
#eac-city-navigation a{display:flex;align-items:center;gap:9px;min-height:45px;padding:10px 9px;border:1px solid transparent;border-radius:9px;color:#51423c;text-decoration:none;font-size:12px;font-weight:500;line-height:1.7;white-space:normal}
#eac-city-navigation a:hover{background:#f9f1ed;color:#944e5d;border-color:#efdbd5}
#eac-city-navigation a[aria-current=page]{background:#f4e4e1;color:#914b5a;border-color:#e7c6bf;font-weight:600}
#eac-city-navigation a:focus-visible{outline:3px solid #95684e;outline-offset:2px}
.eac-city-rail-number{color:#a79183;font:10px/1.5 Georgia,serif;flex:none}
.eac-city-rail-arrow{margin-left:auto;font:17px/1.2 Georgia,serif;color:#b78a80}
@media(min-width:768px){
 body.eac-city-navigation #eac-city-navigation{position:fixed;z-index:200;left:max(24px,calc((100vw - 1440px)/2 + 24px));top:calc(var(--eac-city-header-height) + 24px);width:var(--eac-city-rail-width);max-height:calc(100vh - var(--eac-city-header-height) - 48px);max-height:calc(100dvh - var(--eac-city-header-height) - 48px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
 body.eac-city-navigation #content,body.eac-city-navigation > footer{width:calc(100% - var(--eac-city-main-left) - 24px);max-width:1160px;margin-left:max(var(--eac-city-main-left),calc((100vw - 1440px)/2 + var(--eac-city-main-left)));margin-right:24px;min-width:0}
 body.eac-city-navigation #content .eac-wide-hero{width:100%;max-width:100%;margin:0 0 36px;min-height:440px}
 body.eac-city-navigation #content .eac-wide-hero-copy{width:calc(100% - 64px)}
 body.eac-city-navigation #content .eac-wide-hero h1{font-size:clamp(26px,3vw,44px)}
}
@media(min-width:1280px){body.eac-city-navigation{--eac-city-rail-width:200px;--eac-city-main-left:256px}}
@media(min-width:1024px){body.eac-city-navigation{--eac-city-header-height:142px}}
@media(min-width:768px) and (max-width:1023px){
 body.eac-city-navigation{--eac-city-rail-width:156px;--eac-city-main-left:192px}
 body.eac-city-navigation #eac-city-navigation{left:16px;padding:17px 9px;top:calc(var(--eac-city-header-height) + 20px);max-height:calc(100dvh - var(--eac-city-header-height) - 40px)}
 body.eac-city-navigation #content,body.eac-city-navigation > footer{width:calc(100% - var(--eac-city-main-left) - 16px);margin-right:16px}
 .eac-city-rail-heading{padding-left:7px;padding-right:7px}
 .eac-city-rail-heading>strong{font-size:15px}
 #eac-city-navigation a{gap:7px;padding:10px 6px;font-size:11px}
 body.eac-city-navigation #content .eac-wide-hero{min-height:360px}
 body.eac-city-navigation #content .eac-wide-hero-copy{width:calc(100% - 40px)}
}
/* The reading column is narrower beside the rail, especially on tablets. */
@media(min-width:768px) and (max-width:1199px){
 body.eac-city-navigation .ecl-wrap{width:calc(100% - 40px)}
 body.eac-city-navigation .ecl-hero{grid-template-columns:1fr;gap:32px;padding:34px 0 45px}
 body.eac-city-navigation .ecl-hero-visual{width:min(100%,580px);justify-self:center;padding:0 12px}
 body.eac-city-navigation .ecl-site .ecl-hero h1{font-size:38px}
 body.eac-city-navigation .ecl-toc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
 body.eac-city-navigation .ecl-toc>span{grid-column:1/-1}
 body.eac-city-navigation .ecl-toc a{gap:7px;font-size:10px}
 body.eac-city-navigation .ecl-toc a b{font-size:12px}
 body.eac-city-navigation .ecl-toc a svg{display:none}
 body.eac-city-navigation .ecl-facts{grid-template-columns:1fr}
 body.eac-city-navigation .ecl-facts>div{padding:12px 0;border-right:0;border-bottom:1px solid #e8ded4}
 body.eac-city-navigation .ecl-facts>div:last-child{border-bottom:0}
 body.eac-city-navigation .ecl-life-grid{grid-template-columns:1fr;gap:28px}
 body.eac-city-navigation .ecl-season-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 body.eac-city-navigation .ecl-section-head{display:block}
 body.eac-city-navigation .ecl-section-head>p{max-width:none;margin-top:12px}
 body.eac-city-navigation .ecl-currency-badge{display:inline-block;margin-top:12px}
 body.eac-city-navigation .ecl-quick-prices{grid-template-columns:1fr;gap:10px}
 body.eac-city-navigation .ecl-quick-prices>a{display:grid;grid-template-columns:1fr auto;gap:6px 16px;padding:19px 22px}
 body.eac-city-navigation .ecl-quick-prices>a>.ecl-money{grid-column:2;grid-row:1/3;font-size:30px}
 body.eac-city-navigation .ecl-price-grid{grid-template-columns:1fr}
 body.eac-city-navigation .ecl-consult{grid-template-columns:1fr;gap:25px;padding:28px}
}
@media(max-width:767px){
 body.eac-city-navigation #eac-city-navigation{position:sticky;inset:auto;top:var(--eac-city-header-height);z-index:200;margin:0;width:100%;padding:10px 0 0;border-radius:0;border-left:0;border-right:0;max-height:none;overflow:visible;box-shadow:0 4px 14px #5b3f3610}
 body.eac-city-navigation #content [id]{scroll-margin-top:calc(var(--eac-city-header-height) + var(--eac-city-mobile-nav-height,110px) + 16px)}
 .eac-city-rail-heading{display:flex;align-items:center;flex-wrap:wrap;gap:4px 12px;padding:0 12px 8px;margin-bottom:4px}
 .eac-city-rail-heading>span{font-size:9px}
 .eac-city-rail-heading>strong{font-size:14px;margin:0}
 .eac-city-rail-heading>small{display:none}
 .eac-city-rail-heading::after{content:"← 左右にスワイプ →";margin-left:auto;font-size:10px;color:#8c7a70;white-space:nowrap}
 #eac-city-navigation ul{display:flex;flex-direction:row;flex-wrap:nowrap;gap:8px;max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scroll-padding:12px;padding:4px 12px 8px;scrollbar-width:thin;scrollbar-color:#d8b6b3 #f5eeea;-webkit-overflow-scrolling:touch}
 #eac-city-navigation li{flex:0 0 auto;scroll-snap-align:center}
 #eac-city-navigation a{min-height:44px;background:#fbf7f2;border-color:#eee5df;padding:10px 15px;font-size:12px;white-space:nowrap}
 #eac-city-navigation a .eac-city-rail-number,#eac-city-navigation a .eac-city-rail-arrow{display:none}
}
@media print{#eac-city-navigation{display:none!important}body.eac-city-navigation #content,body.eac-city-navigation > footer{width:100%;max-width:none;margin:0}}
