/* 花印 HANAJIRUSHI — premium v1.7: the client's request of 2026-10-21 (ブランドページ 写真差し替え).
   Loaded after premium-v16.css on every v1.7 page.
   - brand page header: three photos as a slideshow (premium-v17.js) in the 16:9 frame, the copy set
     as text over each photo where the client's text sample has it (2026-10-22); the fade into the
     text side is only a thin edge, so it no longer covers the text */

.phero__img--slides{isolation:isolate}
.pslide{position:absolute;inset:0;margin:0;opacity:0;transition:opacity 1.2s var(--ease)}
.pslide.is-on{opacity:1;z-index:1}
.pslide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:none}
.pslide.is-on img{animation:kb 9s var(--ease) both}
/* the client's photos are shown as supplied (the brand page otherwise tones its header photo down) */
.phero__img.phero__img--slides img{filter:none}
/* the fade into the text side stays above every slide, but only as a thin edge so it stays clear of
   the text (client 2026-10-22) */
.phero__img--slides::after{z-index:2;background:linear-gradient(90deg,var(--paper) 0,rgba(255,255,255,0) 3.5%)}

/* each slide's text sits where the client's sample has it: --cx / --cy (the top left, or the top centre
   with --c), --cc (the colour), --cs (the size); sized to the photo, so it keeps its place at any width */
.phero__img--slides{container-type:inline-size}
.pslide__cap{position:absolute;z-index:3;left:var(--cx,5%);top:var(--cy,30%);width:max-content;max-width:none;display:block;margin:0;
  font-size:inherit;letter-spacing:0;color:var(--cc,var(--ink));text-align:left;text-shadow:none}
.pslide__cap--c{translate:-50% 0;text-align:center}
.pslide__cap::before{display:none}
.pslide__cap b{display:block;font-family:var(--mincho);font-weight:400;font-size:calc(3.7cqw * var(--cs,1));line-height:1.42;letter-spacing:.08em;white-space:nowrap}
html[lang="en"] .pslide__cap b{font-family:var(--didone);font-size:calc(3.5cqw * var(--cs,1));line-height:1.16;letter-spacing:0}
.pslide__cap span{display:block;margin-top:1.1em;font-size:calc(1.45cqw * var(--cs,1));letter-spacing:.14em;white-space:nowrap}
.pslide__tags{display:inline-flex;align-items:center;margin:1.5cqw 0 0;padding:.75cqw 2.1cqw;list-style:none;border-radius:99px;
  background:rgba(255,255,255,.85);font-size:calc(1.3cqw * var(--cs,1));font-weight:500;letter-spacing:.2em;white-space:nowrap}
.pslide__tags li+li::before{content:"";display:inline-block;width:1px;height:1.1em;margin:0 1.6em;vertical-align:-.2em;background:currentColor;opacity:.5}
html[lang="en"] .pslide__tags{padding-inline:1.6cqw;font-size:calc(1.2cqw * var(--cs,1));letter-spacing:.04em}
html[lang="en"] .pslide__tags li+li::before{margin:0 .9em}
.js .pslide__cap{opacity:0;transform:translateX(-10px);transition:opacity .9s var(--ease) .35s,transform .9s var(--ease) .35s}
.js .pslide.is-on .pslide__cap{opacity:1;transform:none}

.pslide__dots{position:absolute;z-index:4;right:clamp(14px,2vw,28px);bottom:clamp(12px,1.6vw,22px);display:flex;gap:6px}
.pslide__dots button{display:grid;place-items:center;width:28px;height:28px;padding:0;border:0;background:none;cursor:pointer}
.pslide__dots i{display:block;width:18px;height:2px;background:rgba(39,38,40,.25);transition:background .3s,width .3s}
.pslide__dots button[aria-current="true"] i{width:28px;background:var(--beni)}
.pslide__dots button:focus-visible{outline:2px solid var(--beni);outline-offset:2px}

/* tablets and phones: the photo is full width and small, so the copy sits in a band under it */
@media (max-width:1024px){
  .phero__img--slides{aspect-ratio:auto!important;height:calc(100vw * 9 / 16 + 84px)}
  .pslide img{bottom:auto;height:calc(100vw * 9 / 16)}
  .phero__img--slides::after{background:linear-gradient(180deg,var(--paper) 0,rgba(255,255,255,0) 6%)}
  .pslide__cap,.pslide__cap--c{top:auto;bottom:0;left:var(--gut);right:var(--gut);width:auto;height:84px;translate:none;text-align:left;
    display:flex;flex-direction:column;justify-content:center}
  .pslide__cap b{font-size:15px;line-height:1.55;letter-spacing:.04em;white-space:normal}
  .pslide__cap b br{display:none}
  html[lang="en"] .pslide__cap b{font-size:18px}
  .pslide__cap span{margin-top:.5em;font-size:10.5px;letter-spacing:.08em;white-space:normal}
  .pslide__tags{display:none}
  .pslide__dots{bottom:auto;top:calc(100vw * 9 / 16 - 34px);right:8px}
}
@media (prefers-reduced-motion:reduce){
  .pslide,.js .pslide__cap{transition:none}
  .pslide.is-on img{animation:none}
}