/* Production implementation: reviewed photo framing, compact navigation and native links. */
.skip-link{position:fixed;top:8px;left:12px;z-index:2000;padding:12px 20px;background:#fff;color:#551464;transform:translateY(-180%);border-radius:30px}.skip-link:focus{transform:none}
a:focus-visible,button:focus-visible{outline:3px solid #652177;outline-offset:5px}
@media(min-width:768px){
 html{scroll-padding-top:calc(var(--desktop-menu-height,76px) + 20px)}
 #page>.header{transition:none;will-change:transform}
 .header .header-bottom{padding-top:10px;padding-bottom:8px}
 .museum-refined .campaign-slide .hero-photo img{width:59%;height:100%;top:0;right:0;object-fit:cover;transform:none;filter:none;mask-image:linear-gradient(90deg,transparent 0%,#000 19%);-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 19%)}
 .museum-refined .campaign-slide:after{background:linear-gradient(90deg,rgba(var(--campaign-tone),.28) 0%,rgba(var(--campaign-tone),.12) 29%,transparent 43%)}
 .museum-refined .campaign-slide .edit-promo-copy{left:3.8%;max-width:39%;bottom:48px}
 .museum-refined .edit-promo.campaign-slide[data-slide] .banner-title{font-size:clamp(28px,3.05vw,42px);line-height:1.2}
 .museum-refined .campaign-slide .hero-actions{flex-wrap:wrap;gap:16px}
 .museum-refined .campaign-team .hero-photo img{object-position:50% 22%;mask-image:linear-gradient(90deg,transparent,#000 16%);-webkit-mask-image:linear-gradient(90deg,transparent,#000 16%)}
 .museum-refined .campaign-birthday .hero-photo img{object-position:50% 18%}
 .museum-refined .campaign-combo .hero-photo img{object-position:58% 18%}
 .museum-refined .campaign-date .hero-photo img{object-position:45% 18%;mask-image:linear-gradient(90deg,transparent,#000 16%);-webkit-mask-image:linear-gradient(90deg,transparent,#000 16%)}
}
.museum-refined .edit-feeling-grid .feeling-0>img{object-position:50% 12%}
.museum-refined .edit-feeling-grid .feeling-1>img{object-position:79% 15%}
.museum-refined .edit-feeling-grid .feeling-3>img{object-position:50% 10%}
.museum-refined .edit-feeling-grid .excitement-photo img{object-position:51% 0;transform:scale(1.12);transform-origin:51% 0}
.museum-refined .edit-format-excursion .goods-slider__img img{object-position:50% 16%}
.museum-refined .edit-format-combo .goods-slider__img img{object-position:50% 10%}
.museum-refined .edit-format-date .goods-slider__img img{object-position:50% 12%}
.museum-refined .edit-format-master .goods-slider__img img{object-position:50% 50%}
.museum-refined .occasion-birthday .occasion-photo img{object-position:50% 12%}
.museum-refined .occasion-corporate .occasion-photo img{object-position:50% 10%}
.museum-refined .occasion-schools .occasion-photo img{object-position:50% 12%}
.museum-refined .real-portrait{object-position:50% 16%}
.museum-refined .journal-1 .journal-photo img{object-position:50% 12%}
.museum-refined .journal-2 .journal-photo img{object-position:50% 20%}
.museum-refined .journal-3 .journal-photo img{object-position:50% 12%}
@media(max-width:767px){
 #page{padding-top:117px}#page>.header{height:117px}
 html{scroll-padding-top:130px}
 .header .header-top{grid-template-columns:minmax(94px,1fr) 120px 52px;grid-template-rows:52px;gap:9px}
 .header .header-contact,.header .header-contact .header-phone{width:120px}
 .header .header-contact .header-phone{height:52px;border-radius:50px}
 .header .header-contact .header-phone .call-label{font-size:13px}
 .header .header-phone .phone-icon{width:18px;height:18px;flex-basis:18px}
 .header .mobile-btn{width:52px;min-width:52px;height:52px;border-radius:50%}
 .header .header__nav{max-height:calc(100dvh - 205px);overflow-y:auto;overscroll-behavior:contain}
 .museum-refined .edit-feeling-grid article>img,.museum-refined .edit-feeling-grid .excitement-photo{height:auto!important;aspect-ratio:1/1.12;width:100%}
 .museum-refined .edit-feeling-grid .excitement-photo img{height:100%!important;margin:0;transform:scale(1.08);transform-origin:51% 0;object-position:51% 0}
 .museum-refined .edit-format-grid .goods-slider__img{height:auto!important;aspect-ratio:4/3}
 .museum-refined .edit-format-excursion .goods-slider__img{aspect-ratio:1/1}
 .museum-refined .edit-format-grid .goods-slider__img img{width:100%;height:100%;transform:none}
 .museum-refined .occasion .occasion-photo{height:auto!important;aspect-ratio:4/3}
 .museum-refined .occasion .occasion-photo img{height:100%;width:100%;transform:none}
 .museum-refined .campaign-slide .hero-photo img{width:100%;height:54%;object-fit:cover;transform:none;filter:none;mask-image:linear-gradient(#000 82%,transparent 100%);-webkit-mask-image:linear-gradient(#000 82%,transparent 100%)}
 .museum-refined .campaign-slide:after{background:linear-gradient(0deg,rgba(var(--campaign-tone),.4),transparent 48%)}
 .museum-refined .campaign-team .hero-photo img{object-position:50% 10%}
 .museum-refined .campaign-birthday .hero-photo img{object-position:50% 12%}
 .museum-refined .campaign-combo .hero-photo img{object-position:55% 12%}
 .museum-refined .campaign-date .hero-photo img{object-position:50% 10%}
 .museum-refined .campaign-slide .edit-promo-copy{bottom:22px}
 .museum-refined .edit-promo.campaign-slide[data-slide] .banner-title{font-size:25px}
}
@media(max-width:374px){
 .header>.container{padding-inline:12px}
 .header .header-top{grid-template-columns:minmax(90px,1fr) 108px 50px;gap:6px}
 .header .header-contact,.header .header-contact .header-phone{width:108px}
 .header .header-contact .header-phone,.header .mobile-btn{height:50px}
 .header .mobile-btn{width:50px;min-width:50px}
 .header .header__logo,.header .header__logo img{width:100px!important}
 .museum-refined .edit-promo.campaign-slide[data-slide] .banner-title{font-size:21px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*,*:before,*:after{animation:none!important;transition:none!important}}
@media(max-width:767px){
 .museum-refined .campaign-slide .hero-photo img{height:auto;aspect-ratio:1.4;object-fit:contain;object-position:center top}
 .museum-refined .campaign-slide .edit-promo-copy{color:#fff}
}
/* Keep text contrast on the brand colour; the photo's own mask ends before faces. */
.museum-refined .edit-promo.campaign-slide{background:rgb(var(--campaign-tone))!important}
@media(min-width:768px){
 .museum-refined .campaign-slide .hero-photo img{width:63%}
 .museum-refined .campaign-team .hero-photo img{mask-image:linear-gradient(90deg,transparent,#000 22%);-webkit-mask-image:linear-gradient(90deg,transparent,#000 22%)}
 .museum-refined .campaign-birthday .hero-photo img{mask-image:linear-gradient(90deg,transparent,#000 24%);-webkit-mask-image:linear-gradient(90deg,transparent,#000 24%)}
 .museum-refined .campaign-combo .hero-photo img{mask-image:linear-gradient(90deg,transparent,#000 20%);-webkit-mask-image:linear-gradient(90deg,transparent,#000 20%)}
 .museum-refined .campaign-date .hero-photo img{mask-image:linear-gradient(90deg,transparent,#000 18%);-webkit-mask-image:linear-gradient(90deg,transparent,#000 18%)}
}