/* Whole-city FLOW02 composition: shared materials, five distinct motifs. */
.ce-page{--city-accent:#75a9bf;--city-tint:#dfedf4;background:#f8fbfc;overflow:clip}
.ce-page .ce-shell{width:min(1240px,calc(100% - 96px));margin-inline:auto;position:relative;min-width:0}
.ce-page .ce-hero{position:relative;isolation:isolate;padding:140px 0 76px;background:#f8fbfc}
.ce-page .ce-hero::before{content:'';position:absolute;inset:140px -16% 55px 57%;background:var(--city-tint);border-radius:45% 35% 0 55%;z-index:-1;transform:rotate(-7deg)}
.ce-page .ce-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);grid-template-rows:auto 1fr;gap:26px 68px;align-items:start}
.ce-page .ce-title{grid-area:1/1}
.ce-page .ce-hero-media{grid-area:1/2/3/3;align-self:center;position:relative;padding:25px 0}
.ce-page .ce-intro{grid-area:2/1;max-width:40em;font-size:16px;line-height:2.05}
.ce-page .ce-intro br{display:none}
.ce-page .ce-city-name{font-size:19px;letter-spacing:.12em;color:#21677a;font-weight:700;margin:25px 0 3px}
.ce-page .ce-eyebrow{display:block;font-size:12px;font-weight:700;letter-spacing:.12em;color:#357da3;margin-bottom:22px}
.ce-page h1{font-size:clamp(31px,3.35vw,47px);line-height:1.6;letter-spacing:.03em;margin:0;text-wrap:pretty}
.ce-page h1>span{display:block}
.ce-page .ce-hero-links{display:flex;flex-wrap:wrap;gap:22px 28px;align-items:center;margin-top:30px}
.ce-page .ce-hero-links .fp-button{font-size:15px;min-width:210px;padding:14px 24px}
.ce-page .ce-hero-links .fp-link{font-size:14px}
.ce-page .ce-hero .fp-breadcrumb{font-size:12px;line-height:1.8;gap:8px;margin-bottom:15px}
.ce-page .ce-hero .fe-photo-shadow{aspect-ratio:1.05}
.ce-page .ce-hero .fe-photo figcaption{font-size:12px;max-width:40em;margin-inline:auto;text-align:left;line-height:1.8}
.ce-page .ce-hero-media::after{content:'';position:absolute;width:28%;height:28%;border:1px solid var(--city-accent);border-radius:50%;left:1%;bottom:10%;z-index:-1;box-shadow:13px -9px 0 -1px #f8fbfc,13px -9px 0 0 var(--city-accent)}
.ce-page .ce-ornament{position:absolute;pointer-events:none;color:var(--city-accent);width:260px;height:260px;right:-50px;top:20px;opacity:.65;z-index:-1}
.ce-page .ce-hero>.ce-ornament{right:auto;left:-85px;top:auto;bottom:-45px;width:270px}
.ce-page .ce-guide{display:grid;grid-template-columns:1.5fr 1fr 1fr .7fr;gap:20px;padding:30px 0 65px;border-top:1px solid #b6d0df}
.ce-page .ce-guide a{min-height:50px;display:flex;align-items:center;justify-content:space-between;gap:15px;font-size:14px;line-height:1.75;text-decoration:none;padding:8px 10px;border-bottom:1px solid #b6d0df}
.ce-page .ce-guide span{color:#357da3;font-size:18px}
.ce-page .ce-section{position:relative;isolation:isolate;padding:90px 0 145px;background:var(--surface);min-width:0}
.ce-page .ce-section--paper{--surface:#f8fbfc}
.ce-page .ce-section--sky{--surface:#dfedf4}
.ce-page .ce-section--pale{--surface:#edf5fa}
.ce-page .ce-section::before{content:'';position:absolute;inset:-58px -1px auto;height:60px;background:var(--surface);mask:url('/flow02/hub/assets/divider-coast.svg') center/100% 100% no-repeat}
.ce-page .ce-section>.ce-shell{display:block}
.ce-page .ce-section-title{margin-bottom:36px}
.ce-page .ce-section-title h2{font-size:clamp(28px,2.6vw,37px);line-height:1.7;margin:0 0 25px}
.ce-page .ce-section-title .fe-label{font-size:13px;margin-bottom:25px;gap:12px}
.ce-page .ce-section-title .fe-number{width:54px;height:60px;flex-basis:54px;font-size:24px}
.ce-page .ce-body{min-width:0}
.ce-page .ce-body p{line-height:2.05;margin:0 0 20px}
.ce-page .ce-body h3{font-size:22px;margin:0 0 15px;line-height:1.7}
.ce-page .ce-body h4{font-size:17px;font-weight:500;margin:0 0 18px;color:#357da3}
.ce-page .ce-body ul{padding-left:1.3em;margin:18px 0 25px}
.ce-page .ce-body li{padding-left:.25em;margin:12px 0}
.ce-page .ce-body a{text-underline-offset:.2em;text-decoration-thickness:1px}
.ce-page .ce-section--introduction>.ce-shell{align-items:start}
.ce-page .ce-promises{counter-reset:promise}
.ce-page .ce-promises>article{position:relative;counter-increment:promise;padding:5px 0 32px 68px;margin:28px 0;border-bottom:1px solid #a8c9da}
.ce-page .ce-promises>article::before{content:counter(promise,decimal-leading-zero);font-size:29px;position:absolute;top:0;left:0;color:#4f86a1;font-weight:500}
.ce-page .ce-promises>article:first-child{margin-top:0}
.ce-page .ce-promises>article:last-child{margin-bottom:0}
.ce-page .ce-section--services>.ce-shell{display:block}
.ce-page .ce-services{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 64px;margin-top:20px}
.ce-page .ce-services article{border-top:2px solid #85afc6;padding:28px 0 15px;position:relative}
.ce-page .ce-services ul{display:flex;flex-wrap:wrap;gap:10px 23px;list-style:none;padding:0}
.ce-page .ce-services li{padding:0 0 6px;margin:0;font-size:15px}
.ce-page .ce-services li::before{content:'・';color:#357da3}
.ce-page .ce-local-topic{margin:0 0 34px;padding:0 0 25px;border-bottom:1px solid #a8c9da}
.ce-page .ce-concerns>article{padding:0 0 28px;margin:0 0 28px;border-bottom:1px solid #bed8e5}
.ce-page .ce-towns{display:flex;flex-wrap:wrap;gap:8px 24px;list-style:none;padding:0!important;margin-block:25px!important}
.ce-page .ce-towns li{margin:0!important;border-bottom:1px solid #91b6ca;padding:8px 0!important}
.ce-page .ce-section--policy .ce-body ul{list-style:none;padding:0;counter-reset:policy}
.ce-page .ce-section--policy li{position:relative;padding:18px 0 18px 48px;border-bottom:1px solid #a8c9da;margin:0;counter-increment:policy}
.ce-page .ce-section--policy li::before{content:counter(policy,decimal-leading-zero);position:absolute;left:0;color:#357da3}
.ce-page .fp-desk.fe-desk{border-radius:0;padding:95px 0 145px;background:#dceef5}
.ce-page .fp-desk.fe-desk::before{content:'';position:absolute;inset:-58px -1px auto;height:60px;background:#dceef5;mask:url('/flow02/hub/assets/divider-coast.svg') center/100% 100% no-repeat}
.ce-page .fe-desk>.fp-inner{width:min(1240px,calc(100% - 96px))}
.ce-page .fe-desk .fp-desk-answer,.ce-page .fe-desk .fp-desk-detail{background:#f8fbfc;border-radius:24px 8px 24px 8px;box-shadow:3px 4px 0 #b0d0df}
.ce-page .fe-desk .fp-desk-answer:last-child{border-left:3px solid #357da3}
.ce-page .ce-adjacent-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 26px}
.ce-page .ce-adjacent-links .fp-link{margin:0;padding:17px 0;border-bottom:1px solid #a8c9da;font-size:16px;justify-content:space-between}
.ce-page .ce-section--contact{--surface:#dceef5;padding-bottom:100px}
.ce-page .ce-contact-actions{max-width:900px}
.ce-page .ce-contact-actions .fp-actions{grid-template-columns:1fr;margin:0;gap:16px}
.ce-page .ce-contact-actions .fp-hours{font-size:12px;line-height:2.1}
.ce-page .ce-contact-actions .fp-button{min-height:58px}
.ce-page .ce-anchor{display:block;position:absolute;top:0}
.ce-page .fp-faq{margin-top:0;background:#fff}
.ce-page .fp-faq summary{font-size:17px;padding:23px 24px;grid-template-columns:28px minmax(0,1fr) 24px;gap:12px}
.ce-page .fp-answer{padding:0 24px 28px}
.ce-page .fp-answer p{font-size:16px}
.ce-noboribetsu{--city-accent:#94b9bb;--city-tint:#e0eeee}
.ce-noboribetsu .ce-hero .fe-photo-mask{mask-image:url('/flow02/leak/assets/photo-mask-leaf.svg')}
.ce-noboribetsu .ce-hero::before{border-radius:60% 30% 65% 30%;transform:rotate(5deg)}
.ce-date{--city-accent:#96b8b1;--city-tint:#e7f0eb}
.ce-date .ce-hero::before{border-radius:50% 0 50% 5%;transform:rotate(-12deg)}
.ce-shiraoi{--city-accent:#89aeb0;--city-tint:#e0ecec}
.ce-shiraoi .ce-hero::before{border-radius:2% 60% 5% 50%;transform:rotate(6deg)}
.ce-shiraoi .ce-hero .fe-photo-mask{mask-image:url('/flow02/leak/assets/photo-mask-leaf.svg')}
.ce-tomakomai{--city-accent:#86aac2;--city-tint:#ddebf5}
.ce-tomakomai .ce-hero::before{border-radius:55% 10% 50% 10%;transform:rotate(-3deg)}
@media(hover:hover){.ce-page .ce-guide a:hover{background:#edf5fa;color:#21677a}.ce-page .ce-adjacent-links a:hover{padding-left:8px}.ce-page summary:hover{background:#edf5fa}}
@media(max-width:1100px){.ce-page .ce-shell,.ce-page .fe-desk>.fp-inner{width:calc(100% - 64px)}.ce-page .ce-hero-grid{gap:24px 36px}.ce-page .ce-guide{grid-template-columns:1fr 1fr}}
@media(max-width:767px){
 .ce-page .ce-shell,.ce-page .fe-desk>.fp-inner{width:calc(100% - 48px)}
 .ce-page .ce-hero{padding:82px 0 42px}
 .ce-page .ce-hero-grid{display:flex;flex-direction:column;gap:20px}
 .ce-page .ce-hero-media{order:0;width:100%;padding:0}
 .ce-page .ce-title{order:1;width:100%}
 .ce-page .ce-intro{order:2;font-size:16px}
 .ce-page .ce-hero .fe-photo-shadow{aspect-ratio:1.55}
 .ce-page .ce-hero .fe-photo figcaption{margin-top:16px;font-size:11px}
 .ce-page .ce-hero::before{inset:95px -25% auto 35%;height:240px}
 .ce-page .ce-hero>.ce-ornament{bottom:15px;width:170px;height:170px;left:-100px;opacity:.45}
 .ce-page .ce-city-name{margin:17px 0 2px;font-size:16px}
 .ce-page .ce-eyebrow{font-size:10px;margin-bottom:16px}
 .ce-page h1{font-size:clamp(28px,7.65vw,34px);line-height:1.65;letter-spacing:.02em}
 .ce-page .ce-hero .fp-breadcrumb{font-size:11px;margin-bottom:0}
 .ce-page .ce-hero-links{gap:20px;margin-top:22px;align-items:stretch;flex-direction:column}
 .ce-page .ce-hero-links .fp-button{min-height:54px;min-width:0}
 .ce-page .ce-hero-links .fp-link{align-self:flex-start}
 .ce-page .ce-guide{gap:4px 20px;padding:18px 0 80px}
 .ce-page .ce-guide a{font-size:12px;padding:12px 0}
 .ce-page .ce-section{padding:55px 0 100px}
 .ce-page .ce-section>.ce-shell,.ce-page .ce-section--contact>.ce-shell,.ce-page .fe-desk>.fp-inner{display:block}
 .ce-page .ce-section-title{margin-bottom:28px}
 .ce-page .ce-section-title h2{font-size:28px;line-height:1.7;margin-bottom:24px}
 .ce-page .ce-section .ce-ornament{right:-105px;top:15px;width:190px;opacity:.45}
 .ce-page .ce-body{padding:0}
 .ce-page .ce-body h3{font-size:21px}
 .ce-page .ce-services{grid-template-columns:1fr;gap:10px;margin:0}
 .ce-page .ce-services article{padding-top:25px}
 .ce-page .ce-promises>article{padding-left:47px}
 .ce-page .ce-promises>article::before{font-size:25px}
 .ce-page .ce-local-topic:last-child{margin-bottom:0}
 .ce-page .fp-desk.fe-desk{padding:55px 0 105px}
 .ce-page .fe-desk .fe-desk-heading h2{margin-bottom:28px}
 .ce-page .ce-adjacent-links{gap:0 22px}
 .ce-page .ce-adjacent-links .fp-link{font-size:15px}
 .ce-page .ce-section--contact{padding-bottom:70px}
 .ce-page .fp-faq summary{padding:23px 18px;font-size:17px;gap:9px;grid-template-columns:23px minmax(0,1fr) 20px}
 .ce-page .fp-answer{padding:0 21px 25px}
}
@media(min-width:768px) and (max-width:900px){.ce-page h1{font-size:28px}}
@media(max-width:359px){.ce-page .ce-shell,.ce-page .fe-desk>.fp-inner{width:calc(100% - 40px)}.ce-page h1{font-size:24px}.ce-page .ce-section-title h2{font-size:26px}}
/* Preserve each city's art; align only the opening sequence. */
.ce-hero-breadcrumb { padding-top:24px; padding-bottom:8px }
@media(max-width:767px) {
 .ce-page .ce-title { order:0 }
 .ce-page .ce-intro { order:1 }
 .ce-page .ce-hero-media { order:2 }
}