/* Local content and colour adapters. Imported source assets remain intact. */
.hm-ref{background:#fff;color:#4d4d4d;--ink:#59466d;--muted:#807586;--accent:#9b719d;--paper:#fff;--lilac:#f3edf7}
.hm-ref .main_mh{background-color:#c9b5d8;background-blend-mode:luminosity}
.hm-ref a{text-decoration:none}.hm-ref button,.hm-ref select,.hm-ref input{font:inherit}.hm-ref [id]{scroll-margin-top:30px}
.hm-header{background:#fff}.hm-brand-row{height:76px;display:flex;align-items:center;padding:0 4%;gap:25px}.hm-brand{font:italic 25px/1.3 "Yu Mincho","Hiragino Mincho ProN",serif;white-space:nowrap;color:#574a5f}.hm-brand-row p{font-size:11px;color:#929292;margin:0}.hm-mobile-brand{width:calc(100% - 50px);height:50px;display:flex;align-items:center;justify-content:center;font:italic 23px "Yu Mincho",serif;padding-left:50px}
.hm-ref .main_navi_mh ul{max-width:790px;justify-content:flex-end}.hm-ref .main_navi_mh li a{font-family:"Yu Mincho",serif;font-weight:600;font-size:15px;padding-inline:23px;white-space:nowrap}.hm-ref .main_navi_mh li{line-height:22px}
.hm-ref .main_slider_mh .hm-hero-logo{font:italic 48px/1.25 "Yu Mincho","Hiragino Mincho ProN",serif;max-width:500px;text-align:center;color:#fff7fb;text-shadow:-1px -1px 0 #6f6176,1px 1px 0 #6f6176,2px 3px 0 #b28ba8;letter-spacing:.02em;margin-bottom:-16px}.hm-hero-logo small{display:block;font:9px/1.6 Georgia,serif;letter-spacing:.25em;text-shadow:none;color:#675375}
.hm-ref .hm-banner{aspect-ratio:1500/788;overflow:hidden;background:#ddc1df;position:relative;isolation:isolate}.hm-banner--readers{background:linear-gradient(110deg,#fff4ec,#e8c8e4 65%,#c6bbdc)!important}.hm-banner--guide{background:#def0ef url('/uranai/releases/20261009-012748/reference/assets/f75e4659118e6f-blog_bg.jpg') center/cover!important}.hm-banner--concerns{background:#efe0f7 url('/uranai/releases/20261009-012748/reference/assets/magic-fine-glitter-bg-v2.png') center/cover!important}
.hm-banner-copy{position:absolute;left:7%;top:16%;z-index:1}.hm-banner-copy>small{display:block;font:italic 14px Georgia,serif;color:#886286;letter-spacing:.04em}.hm-banner-copy>strong{display:block;font:500 35px/1.7 "Yu Mincho",serif;letter-spacing:.025em;color:#634769;margin-top:18px}.hm-banner-copy>p{font-size:12px;color:#816886;margin-top:18px}.hm-banner-copy>span{display:inline-block;margin-top:25px;border-bottom:1px solid #8e7595;font-size:12px;padding-bottom:6px;color:#76517b}.hm-ref .hm-banner-art{position:absolute;right:-5%;bottom:-6%;width:50%;height:100%;object-fit:contain;pointer-events:none;z-index:0}.hm-banner--guide .hm-banner-art{right:4%;width:35%;height:90%;bottom:0}.hm-banner--concerns .hm-banner-art{right:-14%;width:60%;height:115%;bottom:-13%}
.hm-ref .swiper1 .swiper-slide a::after{pointer-events:none}.hm-ref .castle_mh,.hm-ref .bird_mh,.hm-ref .moon_mh,.hm-ref .wing01_mh,.hm-ref .wing02_mh,.hm-ref .wing03_mh,.hm-ref .wing04_mh,.hm-ref .cat_mh,.hm-ref .pegasus_mh{pointer-events:none}
.hm-ref .hu-results{padding-top:55px;padding-bottom:75px;position:relative;z-index:2}.hm-ref .hu-section-heading{display:block;text-align:center;margin-bottom:35px}.hm-ref .hu-section-heading>p{margin-top:17px;font-size:12px}.hm-ref .hm-section-title{font:italic 38px/1.2 Georgia,serif;text-align:center;color:#644c6c;max-width:none;width:auto;letter-spacing:.03em}.hm-section-title small{display:block;font:13px/1.8 "Yu Mincho",serif;letter-spacing:.04em;margin-top:12px;color:#635e68}
.hm-ref .hu-search{max-width:930px;margin:0 auto;background:#faf7fc;border:1px solid #ece4f0;border-radius:0;padding:24px}.hm-ref .hu-search select,.hm-ref .hu-keyword{border-radius:0;background:white}.hm-ref .hu-button{border-radius:30px;background:#a273a9;border-color:#a273a9;color:#fff;padding:13px 24px;font-size:12px}.hm-ref .hu-button--outline{background:#fff;color:#795d87}.hm-ref .hu-results-meta{max-width:1080px;margin-inline:auto}.hm-ref .hu-grid{gap:42px 28px}.hm-ref .hu-card{border:0;background:#fff;border-radius:0;box-shadow:none}.hm-ref .hu-card:hover{box-shadow:none}.hm-ref .hu-card-image{padding:0}.hm-ref .hu-portrait{height:255px;background:#eee5f5}.hm-ref .hu-portrait--star{background:#e8e4f2}.hm-ref .hu-portrait--sun{background:#f7e6ef}.hm-ref .hu-portrait:before{border-radius:0;border:1px dashed #bfb0ca}.hm-ref .hu-portrait img{filter:none;opacity:.8}.hm-ref .hu-portrait-name{font-size:22px}.hm-ref .hu-card-content{padding:19px 3px 0}.hm-ref .hu-card-headline{font-size:16px}.hm-ref .hu-card h3{font-size:25px}.hm-ref .hu-card-link{font-size:11px;border-color:#e9e0ee}.hm-ref .hu-tags span,.hm-ref .hu-tags a{border-radius:0;background:#f2edf7}.hm-ref .hu-results-note{font-size:10px}
.hm-ref .blog_mh{scroll-margin-top:0}.hm-ref .blog_content_mh h2{margin-bottom:42px}.hm-step{display:flex;gap:24px;align-items:flex-start;position:relative;z-index:2}.hm-step>span{font:italic 32px/1.2 Georgia,serif;color:#a088b4;min-width:43px}.hm-step h3{font:500 18px/1.6 "Yu Mincho",serif;margin:0 0 12px}.hm-step p{font-size:12px;line-height:2;color:#7c707f}.hm-ref .blog_more_mh{position:relative;z-index:3}.hm-ref .blog_more_mh a{font-weight:400;font-size:13px}

.hm-ref .hu-faq{max-width:820px}.hm-ref .hu-faq h2{margin-bottom:38px}.hm-ref .hu-faq summary{font-size:13px}.hm-ref .hu-faq details>p{font-size:12px}
.hm-footer{padding:55px 25px 32px;border-top:1px solid #e6dfe9;text-align:center;background:#fff}.hm-footer>p{font-size:11px;margin:20px 0;color:#8d8390}.hm-footer nav{display:flex;justify-content:center;flex-wrap:wrap;gap:25px;margin:27px 0;font-size:12px}.hm-footer>a:not(.hm-brand){font-size:12px}.hm-footer .hm-preview-note{font-size:9px;margin:30px 0 14px}.hm-footer>small{font-size:10px;color:#948499}
.hm-ref .hu-detail-hero{padding:30px 0 45px}.hm-ref .hu-detail-layout{padding-top:25px}.hm-ref .hu-detail-art .hu-portrait{height:395px}.hm-ref .hu-line{background:#238454;border-color:#238454}.hm-ref .hu-related{padding-block:65px}
@media(max-width:767px){
 .hm-brand-row{display:none}.hm-ref #header-sp-menu{height:50px}.hm-ref #header-sp-menu .toggle_btn{font-family:inherit;flex-shrink:0}.hm-ref #header-sp-menu nav ul{padding-left:30px}.hm-ref #header-sp-menu nav a{font:15px/1.7 "Yu Mincho",serif}.hm-ref #header-sp-menu nav{padding-top:25px;background-color:#f1daef}.hm-ref [id]{scroll-margin-top:65px}
 .hm-ref .main_slider_mh .hm-hero-logo{font-size:31px;width:76%;padding-top:18.5vw;margin-top:-1px;margin-bottom:-8px}.hm-hero-logo small{font-size:6px}.hm-ref .hm-banner-copy{left:6%;top:14%}.hm-banner-copy>small{font-size:8px}.hm-banner-copy>strong{font-size:20px;line-height:1.55;margin-top:10px}.hm-banner-copy>p{font-size:8px;margin-top:8px;max-width:180px}.hm-banner-copy>span{font-size:8px;margin-top:10px;padding-bottom:3px}.hm-ref .hm-banner-art{width:49%;height:100%;right:-5%}.hm-banner--guide .hm-banner-art{width:33%;right:2%}.hm-banner--concerns .hm-banner-art{width:56%;right:-11%}.hm-ref .main_slider_mh{padding-bottom:66px}
 .hm-ref .hu-results{padding-top:35px;padding-bottom:55px}.hm-ref .hu-wrap{width:calc(100% - 36px)}.hm-ref .hm-section-title{font-size:29px}.hm-section-title small{font-size:12px;margin-top:10px}.hm-ref .hu-section-heading>p{font-size:10px}.hm-ref .hu-search{padding:18px 14px}.hm-ref .hu-search .hu-button{font-size:11px}.hm-ref .hu-grid{gap:28px 16px}.hm-ref .hu-portrait{height:183px}.hm-ref .hu-portrait img{width:85px;height:85px}.hm-ref .hu-portrait-name{font-size:16px;letter-spacing:.02em}.hm-ref .hu-portrait-note{font-size:7px}.hm-ref .hu-portrait:before{inset:8px}.hm-ref .hu-card-content{padding:14px 2px 0}.hm-ref .hu-card h3{font-size:20px}.hm-ref .hu-card-headline{font-size:13px}.hm-ref .hu-store-name{font-size:9px}.hm-ref .hu-card-link{font-size:9px}.hm-ref .hu-results-note{font-size:9px}
 .hm-ref .blog_content_mh h2{margin-bottom:30px}.hm-step{gap:12px}.hm-step>span{font-size:26px;min-width:28px}.hm-step h3{font-size:16px;margin-bottom:8px}.hm-step p{font-size:11px;line-height:1.9}.hm-ref .blog_more_mh a{font-size:11px}.hm-ref .hu-faq{padding-block:45px}.hm-ref .hu-faq summary{font-size:11px}.hm-ref .hu-faq details>p{font-size:11px}
 .hm-footer{padding:38px 20px 25px}.hm-footer nav{gap:14px 20px;font-size:11px}.hm-footer .hm-preview-note{font-size:9px;line-height:1.9}.hm-ref .hu-detail-hero{padding-top:15px}.hm-ref .hu-detail-art .hu-portrait{height:300px}.hm-ref .hu-detail-intro h1{font-size:30px}.hm-ref .hu-detail-intro h2{font-size:22px}
}
@media(max-width:359px){.hm-ref .hm-hero-logo{font-size:27px!important}.hm-banner-copy>strong{font-size:17px}.hm-banner-copy>p{font-size:7px}.hm-ref .hu-grid{grid-template-columns:1fr}.hm-ref .hu-portrait{height:250px}.hm-ref .hu-portrait-name{font-size:23px}.hm-ref .hu-portrait img{width:125px;height:125px}.hm-ref .hu-card h3{font-size:25px}.hm-ref .hu-card-headline{font-size:16px}}
@media(prefers-reduced-motion:reduce){.hm-ref *, .hm-ref *::before,.hm-ref *::after{scroll-behavior:auto!important;transition:none!important}}
.hm-ref .toggle_btn .toggle-open{display:block;background:transparent;width:auto;height:auto;white-space:nowrap;letter-spacing:0;font-size:9px}
/* Keep banner copy clear of the reference's foreground tree on narrow screens. */
@media(max-width:767px){.hm-ref .hm-banner-copy{left:19%;top:12%}.hm-banner-copy>strong{font-size:18px}.hm-banner-copy>p{font-size:9px;max-width:178px}.hm-banner-copy>span{font-size:9px}.hm-ref .hm-banner-art{right:-13%;width:47%}.hm-banner--guide .hm-banner-art{right:-4%;width:32%}.hm-banner--concerns .hm-banner-art{right:-22%;width:55%}}
@media(max-width:359px){.hm-banner-copy>strong{font-size:16px}.hm-banner-copy>p{font-size:8px;max-width:150px}.hm-banner-copy>span{font-size:8px}}
/* Generated HERO lettering. Header/footer branding and navigation typography stay unchanged. */
@font-face{font-family:"Hamarepo Rounded";src:url("assets/mplus-rounded-1c-bold.ttf") format("truetype");font-style:normal;font-weight:700;font-display:swap}
.hm-ref .main_slider_mh .hm-hero-logo{width:500px;max-width:60%;margin-top:59px;margin-bottom:-16px;text-shadow:none;font-size:0;line-height:1}
.hm-ref .hm-hero-logo>img{width:100%;height:auto;display:block;margin:0 auto 5px}
.hm-ref .hm-hero-logo>small{font:9px/1.6 Georgia,serif;letter-spacing:.25em;color:#675375}
.hm-ref .fca_main :is(h1,h2,h3,p,a,button,input,select,summary,dt,dd,label,span,strong,small,li):not(.main_navi_mh *){font-family:"Hamarepo Rounded","Hiragino Maru Gothic ProN",sans-serif;font-weight:700}
/* Latin ornaments keep the reference's editorial lettering. */
.hm-ref #maincontent .fca_main .hm-section-title,.hm-ref #maincontent .fca_main .hu-eyebrow,.hm-ref #maincontent .fca_main .hm-banner-copy>small,.hm-ref #maincontent .fca_main .hm-step>span,.hm-ref #maincontent .fca_main .hm-hero-logo>small{font-family:Georgia,serif;font-weight:400}
.hm-ref .hm-banner-copy>strong{font-size:33px;line-height:1.6;letter-spacing:0}
.hm-ref .hm-step h3{font-size:17px}.hm-ref .hu-card-headline{line-height:1.9}
@media(max-width:767px){.hm-ref .main_slider_mh .hm-hero-logo{width:80%;max-width:none;padding-top:14vw;margin-top:0;margin-bottom:-5px}.hm-ref .hm-hero-logo>small{font-size:6px}.hm-ref .hm-banner-copy>strong{font-size:17px;line-height:1.6}.hm-ref .hm-step h3{font-size:15px}.hm-ref .hu-card h3{font-size:19px}}
@media(max-width:359px){.hm-ref .hm-banner-copy>strong{font-size:15px}.hm-ref .hu-card h3{font-size:24px}}

.hm-ref .main_slider_mh .hm-hero-logo{z-index:4;margin-bottom:12px}
/* Share the approved wordmark across desktop/mobile headers and the footer. */
.hm-ref .hm-brand{display:inline-block;flex-shrink:0;line-height:0}
.hm-ref .hm-brand-logo{display:block;width:220px;max-width:100%;height:auto}
.hm-ref .hm-brand-row{height:96px}
.hm-ref .hm-mobile-brand>a{display:block;line-height:0}
.hm-ref .hm-mobile-brand .hm-brand-logo{width:180px}
.hm-ref .hm-footer .hm-brand-logo{width:246px}
@media(max-width:767px){.hm-ref #header-sp-menu,.hm-ref .hm-mobile-brand,.hm-ref #header-sp-menu .toggle_btn{height:72px}.hm-ref #header-sp-menu .hm-mobile-brand{padding-left:50px}.hm-ref #header-sp-menu nav{top:72px}.hm-ref [id]{scroll-margin-top:87px}}

@media(max-width:767px){.hm-ref .hu-search-filters>label:last-child{grid-column:1/-1}}
/* Restore the rainbow message scene as a reader-facing introduction. */
.hm-ref .hm-about-scene{padding-top:100px}
.hm-ref .message_mh .hm-section-title{max-width:none;width:auto}
.hm-message{max-width:500px;margin:0 auto;text-align:center;position:relative;z-index:2}
.hm-message h3{font-size:25px;line-height:1.8;margin-bottom:32px;color:#6d5079}
.hm-message p{font-size:15px;line-height:2.2;margin-bottom:30px;color:#6d5079}
.hm-message .hu-button{margin-top:10px}
@media(max-width:767px){.hm-ref .hm-about-scene{padding-top:70px}.hm-ref .message_mh .hm-section-title{font-size:30px}.hm-message{width:86%}.hm-message h3{font-size:21px}.hm-ref .hm-message p{width:100%;font-size:13px;line-height:2.2}.hm-message .hu-button{font-size:12px}}

/* Approved local HERO art: right-hand moon, left witch, Yokohama waterfront. */
.hm-ref .main_mh{isolation:isolate;overflow:hidden;border-radius:0}
.hm-ref .main_navi_mh{position:relative;z-index:5}
.hm-ref .main_slider_mh{padding-bottom:75px}
.hm-ref .main_slider_mh::after{display:none}

.hm-ref .main_mh>.hm-hero-moon{position:absolute;width:500px;max-width:none;height:auto;right:-340px;top:-265px;z-index:0;pointer-events:none;filter:drop-shadow(0 0 30px #e7a5cf88)}
.hm-ref .main_mh>.hm-hero-witch{position:absolute;width:clamp(380px,35vw,550px);max-width:none;height:auto;left:max(-100px,calc(50% - 880px));top:210px;z-index:3;pointer-events:none}
.hm-ref .main_mh>.hm-hero-city{display:block;position:relative;z-index:1;width:100%;height:auto;max-width:none;object-fit:contain;object-position:center bottom;margin:-8px 0 0;pointer-events:none}
@media(min-width:1600px){.hm-ref .main_mh>.hm-hero-moon{right:calc(50% - 1040px)}}
@media(max-width:1100px) and (min-width:768px){.hm-ref .main_slider_mh{padding-bottom:250px}.hm-ref .main_mh>.hm-hero-witch{left:12px;top:auto;bottom:260px;width:330px}.hm-ref .main_mh>.hm-hero-moon{width:400px;right:-280px;top:-260px}}
@media(max-width:767px){
 .hm-ref .main_slider_mh{padding-bottom:165px}
 .hm-ref .main_slider_mh .hm-hero-logo{padding-top:110px}
 .hm-ref .main_mh>.hm-hero-moon{width:240px;right:-160px;top:-130px;filter:drop-shadow(0 0 16px #e7a5cf88)}
 .hm-ref .main_mh>.hm-hero-witch{left:0;top:auto;bottom:135px;width:240px}
 .hm-ref .main_mh>.hm-hero-city{height:auto;width:100%;margin-top:-4px;object-fit:contain}
 
 .hm-ref .hm-banner-copy{left:8%}
}

/* Local cloud and cat ornaments replace the HERO bird, scales and right island. */
.hm-ref .main_mh>:is(.hm-hero-cloud-long,.hm-hero-cat,.hm-hero-cloud-small,.hm-hero-cloud-cat){position:absolute;max-width:none;height:auto;pointer-events:none}
.hm-ref .main_mh>.hm-hero-cloud-long{width:680px;left:20px;top:-55px;z-index:1}
.hm-ref .main_mh>.hm-hero-cat{width:310px;right:0;top:265px;z-index:3}
.hm-ref .main_mh>.hm-hero-cloud-small{width:220px;left:max(40px,calc(50% - 580px));top:530px;z-index:3}
@media(min-width:1600px){.hm-ref .main_mh>.hm-hero-cat{right:calc(50% - 820px)}}
@media(max-width:1100px) and (min-width:768px){
 .hm-ref .main_mh>.hm-hero-cloud-long{width:360px;left:14px;top:-29px}
 .hm-ref .main_mh>.hm-hero-cat{width:310px;right:0;top:auto;bottom:250px}
 .hm-ref .main_mh>.hm-hero-cloud-small{width:200px;left:85px;top:auto;bottom:205px}
}
@media(max-width:767px){
 .hm-ref .main_mh>.hm-hero-cloud-long{width:230px;left:4px;top:-18px}
 .hm-ref .main_mh>.hm-hero-cat{width:175px;right:0;top:auto;bottom:180px}
 .hm-ref .main_mh>.hm-hero-cloud-small{width:135px;left:100px;top:auto;bottom:110px}
}

.hm-ref .main_mh>.hm-hero-cloud-cat{width:260px;right:12px;top:570px;z-index:3}
@media(min-width:1600px){.hm-ref .main_mh>.hm-hero-cloud-cat{right:calc(50% - 820px)}}
@media(max-width:1100px) and (min-width:768px){.hm-ref .main_mh>.hm-hero-cloud-cat{width:180px;right:35px;top:auto;bottom:195px}}
@media(max-width:767px){.hm-ref .main_mh>.hm-hero-cloud-cat{width:105px;right:2px;top:auto;bottom:125px}}

/* Compact desktop HERO: retain the whole skyline and continue the sea to both edges. */
@media(min-width:1101px){
 .hm-ref .main_mh{padding-top:12px;--hm-city-height:clamp(154px,20.9vh,209px)}
 .hm-ref .main_slider_mh{padding-bottom:22px}
 .hm-ref .main_slider_mh .hm-hero-logo{width:clamp(260px,35vh,350px);margin-top:0;margin-bottom:8px}
 .hm-ref .swiper1{padding-bottom:26px}
 .hm-ref .swiper1 .swiper-slide{max-width:clamp(430px,60vh,600px)}
 .hm-ref .hm-banner-copy{top:12%}
 .hm-ref .hm-banner-copy>small{font-size:11px}
 .hm-ref .hm-banner-copy>strong{font-size:clamp(22px,2.9vh,28px);margin-top:10px;line-height:1.5}
 .hm-ref .hm-banner-copy>p{font-size:10px;margin-top:10px}
 .hm-ref .hm-banner-copy>span{font-size:10px;margin-top:12px}
 
 .hm-ref .main_mh>.hm-hero-city{height:var(--hm-city-height);margin-top:calc(var(--hm-city-height) / -11)}
 /* Repeat only the existing illustration's sea band, at the same scale as the skyline. */
 .hm-ref .main_mh::after{content:"";position:absolute;inset:auto 0 0;height:calc(var(--hm-city-height) * .26);box-sizing:border-box;border-top:calc(var(--hm-city-height) * .035) solid #aad5f2;background-clip:padding-box;z-index:0;pointer-events:none;background:#aad5f2 url("assets/yokohama-harbor-wide-v2.png") center bottom / auto var(--hm-city-height) repeat-x}
 .hm-ref .main_mh>.hm-hero-cloud-long{width:440px;top:-36px}
 .hm-ref .main_mh>.hm-hero-witch{top:140px;width:clamp(340px,30vw,460px)}
 .hm-ref .main_mh>.hm-hero-cat{top:195px;width:280px}
 .hm-ref .main_mh>.hm-hero-cloud-small{top:370px;bottom:auto;left:max(12px,calc(50% - 690px));width:180px}
 .hm-ref .main_mh>.hm-hero-cloud-cat{top:350px;bottom:auto;width:220px}
 .hm-ref .hu-results{padding-top:18px}
}

/* Curve the sea horizon upward at the centre; retain the skyline and a level lower edge. */
.hm-ref .main_mh>.hm-hero-city{mask-image:linear-gradient(to bottom,#000 74%,transparent 74%),radial-gradient(ellipse 55% 26% at 50% 100%,#000 99.5%,transparent 100%)}
@media(min-width:1101px){.hm-ref .main_mh::after{clip-path:ellipse(55% 100% at 50% 100%)}}

/* Keep pagination in its own row so growing or animated slides cannot cover it. */
.hm-ref .main_slider_mh .hm-hero-logo{margin-bottom:28px}
.hm-ref .swiper1{padding-bottom:0}
.hm-ref .swiper1>.swiper-pagination{position:relative;inset:auto;transform:none;margin:22px 0 0;height:18px;line-height:18px}
@media(min-width:1101px){.hm-ref .main_slider_mh{padding-bottom:10px}}

/* Position the characters and their clouds independently toward the centre. */
.hm-ref .main_mh{--hm-character-inset:24px;--hm-cloud-inset:136px;--hm-cat-cloud-inset:168px}
.hm-ref .main_mh>.hm-hero-witch{transform:translateX(var(--hm-character-inset))}
.hm-ref .main_mh>.hm-hero-cat{transform:translateX(calc(var(--hm-character-inset) * -1))}
.hm-ref .main_mh>.hm-hero-cloud-small{transform:translateX(var(--hm-cloud-inset)) scale(1.12)}
.hm-ref .main_mh>.hm-hero-cloud-cat{transform:translateX(calc(var(--hm-cat-cloud-inset) * -1))}
@media(max-width:767px){.hm-ref .main_mh{--hm-character-inset:8px;--hm-cloud-inset:40px;--hm-cat-cloud-inset:48px}}

/* Enlarge the harbour slightly without extending the HERO below the fold. */
@media(max-width:1100px){.hm-ref .main_mh>.hm-hero-city{width:110%;margin-left:-5%;margin-top:calc(-3.3333vw - 8px)}}
@media(max-width:767px){.hm-ref .main_mh>.hm-hero-city{margin-top:calc(-3.3333vw - 4px)}}

/* Soft asymmetric cards and sky-blue navigation. */
.hm-ref .swiper1 .hm-banner{border-radius:40px 10px 30px 16px}
.hm-ref .swiper1 .hm-banner--guide{border-radius:12px 36px 18px 30px}
.hm-ref .swiper1 .hm-banner--concerns{border-radius:30px 16px 40px 10px}
.hm-ref .swiper1 .swiper-slide a::after{display:block;background:none;inset:0;width:auto;height:auto;box-sizing:border-box;border:.75px solid #bf8aa4;border-radius:inherit;box-shadow:none}
.hm-ref .swiper1 .hm-banner:focus-visible{outline:3px solid #65516f;outline-offset:-9px}
.hm-ref .swiper1>.swiper-pagination{display:flex;align-items:center;justify-content:center;height:28px;gap:4px}
.hm-ref .swiper1 .swiper-pagination.custom-bullet .swiper-pagination-bullet{position:relative;flex:0 0 28px;width:28px;height:28px;margin:0;border:0;border-radius:50%;background:transparent;transform:none;opacity:1}
.hm-ref .swiper1 .swiper-pagination-bullet::before{content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;box-sizing:border-box;transform:translate(-50%,-50%);border:1.5px solid #bf8aa4;border-radius:50%;background:#fff5eb;transition:width .25s ease,background-color .25s ease;box-shadow:inset 0 1px 0 #fff9}
.hm-ref .swiper1 .swiper-pagination-bullet-active::before{width:20px;height:11px;border-radius:8px;background:#a9d7e9}
.hm-ref .swiper1 .swiper-pagination.custom-bullet .swiper-pagination-bullet::after{display:none}
.hm-ref .swiper1 .swiper-pagination-bullet:focus-visible{outline:2px solid #65516f;outline-offset:0}
.hm-ref .main_mh::before{height:1px;background:#876b8940;z-index:4;pointer-events:none}
@media(max-width:767px){.hm-ref .swiper1 .hm-banner{border-radius:28px 8px 22px 12px}.hm-ref .swiper1 .hm-banner--guide{border-radius:10px 26px 14px 22px}.hm-ref .swiper1 .hm-banner--concerns{border-radius:22px 12px 28px 8px}}
@media(max-width:767px){.hm-ref #header-sp-menu::before{display:none}}

/* Match the girl’s visible scale across portrait and landscape illustrations. */
.hm-ref .hm-banner--guide .hm-banner-art{right:-3%;bottom:-7%;width:auto;max-width:none;height:110%}
.hm-ref .hm-banner--readers .hm-banner-art{right:-30%;bottom:-2%;width:auto;max-width:none;height:100%}
.hm-ref .hm-banner--concerns .hm-banner-art{right:-4%;bottom:3%;width:55%;height:88%;object-fit:contain}

/* Moon-gazing witch and cat replace the wide broom decoration. */
.hm-ref .hm-about-scene::before{content:none;background-image:none}
.hm-ref .hm-moon-gazing-cels{position:absolute;left:50%;transform:translateX(-50%);width:400px;aspect-ratio:4/5;bottom:-14px;pointer-events:none;z-index:1}
@media(max-width:767px){.hm-ref .hm-about-scene{padding-bottom:calc(min(100vw,500px) + 48px)}.hm-ref .hm-moon-gazing-cels{width:min(80vw,400px);bottom:max(-14px,-2.8vw)}}

/* A worried window scene and a hopeful flight flank the introduction. */
.hm-ref .hm-window-worried-cels,.hm-ref .hm-yokohama-flight-cels{background-size:contain;background-position:center;background-repeat:no-repeat;width:min(460px,calc((100vw - 460px)/2));height:auto;aspect-ratio:1;pointer-events:none}
.hm-ref .message_mh::after{content:none;background-image:none}
.hm-ref .hm-window-worried-cels{position:absolute;left:max(calc((100% - 100vw)/2 + 52px),calc(50% - 650px));top:-70px;bottom:auto}
.hm-ref .message_mh::before{content:none;background-image:none}
.hm-ref .hm-yokohama-flight-cels{position:absolute;right:max(calc((100% - 100vw)/2 + 52px),calc(50% - 650px));top:230px;bottom:auto}
@media(max-width:1100px){.hm-ref .message_mh{padding-bottom:calc(min(46vw,410px) + 32px)}.hm-ref .hm-yokohama-flight-cels,.hm-ref .hm-window-worried-cels{width:min(46vw,410px);height:auto;top:auto;bottom:0}.hm-ref .hm-window-worried-cels{left:3%}.hm-ref .hm-yokohama-flight-cels{right:3%}}

/* Beginner guide: a native modal shared by listing and profile pages. */
.hm-ref.hm-guide-open{overflow:hidden}
.hm-ref .hm-guide-dialog{position:fixed;inset:0;box-sizing:border-box;width:min(640px,calc(100% - 32px));max-width:none;max-height:calc(100dvh - 32px);margin:auto;padding:166px 0 0;border:0;background:transparent;color:#644c6c;overflow:visible;text-align:left}
.hm-ref .hm-guide-panel{position:relative;border:.75px solid #bf8aa4;border-radius:12px 36px 18px 30px;background:#fffafc;box-shadow:0 24px 90px #37214040}
.hm-ref .hm-guide-scroll{max-height:calc(100dvh - 200px);overflow:auto;overscroll-behavior:contain;border-radius:inherit}
.hm-ref .hm-guide-perched{position:absolute;z-index:4;left:-40px;top:-170px;width:190px;max-width:none;height:auto;pointer-events:none}
.hm-ref .hm-guide-dialog:not([open]){display:none}
.hm-ref .hm-guide-dialog::backdrop{background:rgba(45,30,58,.52);backdrop-filter:blur(4px)}
.hm-ref .hm-guide-top{position:absolute;top:0;right:0;height:0;z-index:5;display:flex;justify-content:flex-end}
.hm-ref .hm-guide-close{display:grid;place-items:center;flex-shrink:0;width:44px;height:44px;margin:12px;border:1px solid #dfb9d0;border-radius:50%;background:#fffafc;color:#85618d;cursor:pointer;font-size:28px;line-height:1}
.hm-ref .hm-guide-content{padding:40px 48px;text-align:center}
.hm-ref .hm-guide-content .hm-section-title{margin:0 0 22px}
.hm-ref .hm-guide-intro{font-size:12px;line-height:1.9;color:#826e87;margin:0 0 28px}
.hm-ref .hm-guide-steps{display:grid;gap:24px;text-align:left;margin-bottom:30px}
.hm-ref .hm-guide-steps .hm-step{gap:18px;margin:0;padding:0}
.hm-ref .hm-guide-steps .hm-step+ .hm-step{padding-top:24px;border-top:1px solid #eedee9}
.hm-ref .hm-guide-steps h3{margin:0 0 8px;line-height:1.7}
.hm-ref .hm-guide-steps p{margin:0;font-size:13px;line-height:1.9}
.hm-ref .hm-guide-cta{display:inline-flex;justify-content:center;min-width:220px}
.hm-ref .hm-guide-dialog :focus-visible{outline:2px solid #a66e9f;outline-offset:4px}
@media(max-width:767px){
 .hm-ref .hm-guide-dialog{max-height:calc(100dvh - 24px);padding-top:112px}
 .hm-ref .hm-guide-panel{border-radius:10px 26px 14px 22px}
 .hm-ref .hm-guide-scroll{max-height:calc(100dvh - 138px)}
 .hm-ref .hm-guide-perched{width:128px;left:-9px;top:-115px}
 .hm-ref .hm-guide-content{padding:48px 24px 28px}
 .hm-ref .hm-guide-close{margin:8px}
 .hm-ref .hm-guide-intro{font-size:11px;margin-bottom:24px}
 .hm-ref .hm-guide-steps{gap:20px}
 .hm-ref .hm-guide-steps .hm-step{gap:12px}
 .hm-ref .hm-guide-steps .hm-step+ .hm-step{padding-top:20px}
 .hm-ref .hm-guide-steps h3{font-size:14px}
 .hm-ref .hm-guide-steps p{font-size:12px}
}

/* Original pastel stardust background, shared with the concern card. */
.hm-ref .hm-about-scene{background-image:url("/uranai/releases/20261009-012748/reference/assets/magic-fine-glitter-bg-v2.png")}
.hm-ref .hm-about-scene .book_mh::before{content:none;background-image:none}
@media(max-width:767px){.hm-ref .hm-about-scene{background-size:100% 100%}}

/* Plain white cloud ceiling; no lower sea decoration. */
.hm-ref .hm-about-scene{padding-top:clamp(150px,15vw,220px)}
.hm-ref .hm-about-cloud-edge{position:absolute;inset:-1px 0 auto;height:clamp(90px,13.25vw,190px);background:url('/uranai/releases/20261009-012748/reference/assets/552d0663e051fd-cloud_06.png') center/140% 100% no-repeat;transform:scaleY(-1);pointer-events:none}
.hm-ref .hm-about-scene::after{content:none;display:none;background-image:none}
@media(max-width:767px){.hm-ref .hm-about-scene{padding-top:130px}.hm-ref .hm-about-cloud-edge{height:90px}}

/* Gentle bubble accents replace the two feathers beside the introduction. */
.hm-ref .hm-about-bubbles{position:absolute;width:140px;height:auto;z-index:1;pointer-events:none}
.hm-ref .hm-about-bubbles--right{right:calc(50% - 420px);top:110px;transform:rotate(12deg)}
.hm-ref .hm-about-bubbles--left{left:calc(50% - 410px);top:450px;width:125px;transform:rotate(-18deg)}
@media(max-width:1100px){.hm-ref .hm-about-bubbles--right{right:4%;top:125px}.hm-ref .hm-about-bubbles--left{left:4%;top:430px}}
@media(max-width:767px){.hm-ref .hm-about-bubbles--right{right:12px;top:145px;width:70px}.hm-ref .hm-about-bubbles--left{left:12px;top:380px;width:66px}}
.hm-ref .book_mh .hm-book-bubble{position:absolute;right:-112px;top:-38px;width:110px;height:auto;pointer-events:none}
@media(max-width:767px){.hm-ref .book_mh .hm-book-bubble{right:-54px;top:-30px;width:72px}}

/* Lower the HERO ornaments while keeping their size and horizontal balance. */
.hm-ref .main_mh{--hm-sky-drop:40px;--hm-pair-drop:clamp(60px,calc(100vh - 770px),130px)}
.hm-ref .main_mh>:is(.hm-hero-cloud-long,.hm-hero-moon){translate:0 var(--hm-sky-drop)}
.hm-ref .main_mh>:is(.hm-hero-witch,.hm-hero-cat,.hm-hero-cloud-small,.hm-hero-cloud-cat){translate:0 var(--hm-pair-drop)}
@media(max-width:1100px){.hm-ref .main_mh{--hm-sky-drop:24px;--hm-pair-drop:24px}}

/* Japanese section headings share the site’s soft, bold lettering. */
.hm-ref #maincontent .fca_main .hm-section-title--ja{font:700 28px/1.6 "Hamarepo Rounded","Hiragino Maru Gothic ProN",sans-serif;letter-spacing:.03em}
@media(max-width:767px){.hm-ref #maincontent .fca_main .hm-section-title--ja{font-size:20px}}

/* Inverse logo colors, keeping the original rounded Japanese font. */
.hm-ref #maincontent .fca_main .hm-section-title--ja{color:#775c75;-webkit-text-stroke:1.4px #dda4c3;paint-order:stroke fill}
@media(max-width:767px){.hm-ref #maincontent .fca_main .hm-section-title--ja{-webkit-text-stroke-width:1px}}

/* Approved plum cat and sky-blue ribbon replace the book's reference GIF. */
.hm-ref .book_mh::after{content:none;background-image:none}
.hm-ref .hm-book-page-cels{position:relative;width:100%;aspect-ratio:4/3}
.hm-ref .hm-descending-cat-cels{position:absolute;bottom:-180px;right:-195px;width:160px;height:244px;display:grid;place-items:center;pointer-events:none}
.hm-ref .hm-descending-cat-cels>.hm-witch-cels{position:relative;width:100%;aspect-ratio:2/3}
@media(max-width:767px){.hm-ref .hm-descending-cat-cels{height:40vw;bottom:-35vw;right:-55%;width:47.5%}}

/* Small soap-bubble shortcuts, shared by the listing and reader pages. */
.hm-ref .hm-floating-nav{position:fixed;right:max(22px,env(safe-area-inset-right));bottom:calc(22px + env(safe-area-inset-bottom));z-index:50;width:124px;height:160px;pointer-events:none}
.hm-ref .hm-floating-nav::before,.hm-ref .hm-floating-nav::after{content:"";position:absolute;background:url('assets/bubble-button.svg') center/contain no-repeat;pointer-events:none}
.hm-ref .hm-floating-nav::before{width:16px;height:16px;right:7px;top:18px;opacity:.8}
.hm-ref .hm-floating-nav::after{width:10px;height:10px;left:14px;bottom:21px;opacity:.65}
.hm-ref .hm-bubble-button{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;width:86px;height:86px;right:0;bottom:0;border:0;border-radius:50%;background:url('assets/bubble-button.svg') center/contain no-repeat;color:#6d5471;font:700 14px/1.3 "Hamarepo Rounded","Hiragino Maru Gothic ProN",sans-serif;text-decoration:none;text-align:center;filter:drop-shadow(0 3px 5px #785e7514);transition:transform .2s ease;touch-action:manipulation;pointer-events:auto;-webkit-tap-highlight-color:transparent}
.hm-ref .hm-bubble-button--top{width:72px;height:72px;left:0;top:0;right:auto;bottom:auto;font-size:13px}
.hm-ref .hm-bubble-button--top>span:first-child{font-size:18px;line-height:1;margin-bottom:3px}
.hm-ref .hm-bubble-button:focus-visible{outline:2px solid #956888;outline-offset:4px}
.hm-ref.lock .hm-floating-nav,.hm-ref.hm-guide-open .hm-floating-nav{visibility:hidden}
.hm-ref .hm-floating-nav{opacity:0;visibility:hidden;transform:translateY(24px);transition:opacity .3s ease,transform .4s ease,visibility 0s .4s}
.hm-ref .hm-floating-nav.is-visible{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.hm-ref .hm-floating-nav.is-visible .hm-bubble-button--top{animation:hm-bubble-appear .95s cubic-bezier(.2,.7,.25,1) backwards}
.hm-ref .hm-floating-nav.is-visible .hm-bubble-button--guide{animation:hm-bubble-appear 1.05s .14s cubic-bezier(.2,.7,.25,1) backwards}
.hm-ref .hm-floating-nav.is-visible::before{animation:hm-bubble-appear 1.15s .25s ease-out backwards}
.hm-ref .hm-floating-nav.is-visible::after{animation:hm-bubble-appear 1s .38s ease-out backwards}
.hm-ref.lock .hm-floating-nav.is-visible,.hm-ref.hm-guide-open .hm-floating-nav.is-visible{visibility:hidden;transition:none}
@keyframes hm-bubble-appear{
 0%{opacity:0;transform:translate(10px,65px) scale(.65) rotate(-7deg)}
 60%{opacity:.9;transform:translate(-4px,-7px) scale(1.03) rotate(2deg)}
 82%{opacity:1;transform:translate(2px,2px) scale(.99) rotate(-1deg)}
 100%{opacity:1;transform:translate(0,0) scale(1) rotate(0)}
}
@media(prefers-reduced-motion:reduce){
 .hm-ref .hm-floating-nav{transform:none;transition:none}
 .hm-ref .hm-floating-nav.is-visible .hm-bubble-button,.hm-ref .hm-floating-nav.is-visible::before,.hm-ref .hm-floating-nav.is-visible::after{animation:none}
}
@media(hover:hover){.hm-ref .hm-bubble-button:hover{transform:translateY(-3px)}}
@media(max-width:767px){
 .hm-ref .hm-floating-nav{right:max(10px,env(safe-area-inset-right));bottom:calc(14px + env(safe-area-inset-bottom));width:98px;height:132px}
 .hm-ref .hm-floating-nav::before{width:12px;height:12px;right:4px;top:15px}
 .hm-ref .hm-floating-nav::after{width:8px;height:8px;left:12px;bottom:15px}
 .hm-ref .hm-bubble-button{width:66px;height:66px;font-size:11px}
 .hm-ref .hm-bubble-button--top{width:58px;height:58px;font-size:11px}
 .hm-ref .hm-bubble-button--top>span:first-child{font-size:15px;margin-bottom:2px}
 .hm-ref .hm-footer{padding-bottom:155px}
}

/* Consistent fine line icons; scoped to the local design preview. */
.hm-ref .hm-icon{display:inline-block;flex:none;width:17px;height:17px;vertical-align:-.2em;overflow:visible}
.hm-ref .hu-tags>span.hm-has-icon,.hm-ref .hu-tags>a.hm-has-icon{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.hm-ref .hu-tags .hm-icon{width:13px;height:13px;color:#99779f}
.hm-ref .hu-card-link.hm-has-icon{justify-content:flex-start;gap:8px}
.hm-ref .hu-button.hm-has-icon{justify-content:center;gap:9px}
.hm-ref .hu-text-link.hm-has-icon{display:inline-flex;align-items:center;gap:7px}
.hm-ref .hu-location.hm-has-icon{display:flex;align-items:center;gap:4px}
.hm-ref .hu-location .hm-icon{width:12px;height:12px;color:#a684a5}
.hm-ref .hu-search-filters label>span.hm-has-icon{display:flex;align-items:center;gap:6px}
.hm-ref .hu-search-filters .hm-icon{width:14px;height:14px;color:#99779f}
.hm-ref .hu-keyword .hm-icon{color:#99779f}
.hm-ref .hm-banner-copy>span.hm-has-icon{display:inline-flex;align-items:center;gap:6px}
.hm-ref .hm-banner-copy>span .hm-icon{width:14px;height:14px}
.hm-ref .hm-bubble-button--guide>.hm-icon{width:19px;height:19px;margin-bottom:4px}
.hm-ref .hm-bubble-button--top>span:first-child{display:flex;align-items:center;justify-content:center}
.hm-ref .hm-bubble-button--top .hm-icon{width:23px;height:25px;stroke-width:1.5}
@media(max-width:767px){
 .hm-ref .hu-tags .hm-icon{width:11px;height:11px}
 .hm-ref .hu-tags>span.hm-has-icon,.hm-ref .hu-tags>a.hm-has-icon{gap:3px}
 .hm-ref .hu-card-link .hm-icon{width:14px;height:14px}
 .hm-ref .hu-card-link.hm-has-icon{gap:5px}
 .hm-ref .hu-button.hm-has-icon{gap:7px}
 .hm-ref .hm-bubble-button--guide>.hm-icon{width:15px;height:15px;margin-bottom:3px}
 .hm-ref .hm-bubble-button--top .hm-icon{width:20px;height:22px}
}

/* Registered image_gen cels: placement belongs to the wrapper, never the frames. */
.hm-witch-cels{aspect-ratio:3/2;overflow:hidden}
.hm-witch-cels>img{display:block;width:100%;height:auto}
.hm-witch-cels>.hm-witch-cel-sheet{position:absolute;top:0;width:300%;max-width:none;height:100%;visibility:hidden}
.hm-witch-cels.is-animated>img{visibility:hidden}
.hm-witch-cels.is-animated>.hm-witch-cel-sheet{visibility:visible}
@media(prefers-reduced-motion:reduce){.hm-witch-cels.is-animated>img{visibility:visible}.hm-witch-cels.is-animated>.hm-witch-cel-sheet{visibility:hidden}}

/* The seated pair stays still; only the star wand changes cels. */
.hm-ref .hm-seated-wand-cels{aspect-ratio:2/3;display:block}

/* Match the original landscape banner art while playing registered cels. */
.hm-ref .hm-yellow-broom-cels{display:block;aspect-ratio:3/2}

.hm-ref .hu-portrait--photo img{width:100%;height:100%;object-fit:cover;object-position:center 8%;opacity:1;filter:none}.hm-ref .hu-detail-art .hu-portrait--photo img{width:100%;height:100%}.hm-ref .hu-photo-label{z-index:1}