/* 花印 HANAJIRUSHI — premium v1.5: the client's second round (2026-10-07) on v1.4.
   Loaded after premium-v14.css on every v1.5 page.
   - The red is the logo's magenta #D92070 (LOGO－2020版 06) in place of V1's crimson #A51D34.
     Text uses a hair darker #CC1E69 so it keeps WCAG AA on the light grey bands (4.9:1 on
     #F6F5F3; #D92070 itself is 4.8:1 on white, 4.4:1 on the grey). White on #D92070 is 4.8:1.
   - English pages: no Japanese labels. The faint word behind each page title is English,
     word stamps are English, 一二三 are I II III, the 日本製 circles carry icons, and the
     slogan keeps its Japanese with an English line under it. */

:root{
  --beni:#d92070;           /* logo magenta */
  --beni-d:#cc1e69;         /* magenta for text */
  --seal:#d92070;
  --plum:#d92070;           /* filled buttons, cards and tabs */
  --plum-2:#b81b5f;
  --on-plum-2:#fde3ee;
  --pink-l:#ffe0ee;
  --gold-l:#ffe0ee;
}

/* ---- contact band: magenta on the home page */
.cta{background:#d92070;--ink-2:#fff;--ink-3:#fff}
.cta .seal{color:#d92070;box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 3px rgba(217,32,112,.45)}
.cta .btn:hover,.cta .btn--fill,.cta .btn--fill:hover{color:#d92070}

/* light (pink-tinted) on every other page */
body:not(.pg-home) .cta{background:#fdf4f8;border-top-color:#f8e1eb;--beni-d:#cc1e69}
body:not(.pg-home) .cta .seal{background:#d92070;box-shadow:inset 0 0 0 2px #d92070,inset 0 0 0 3px rgba(255,255,255,.6)}
body:not(.pg-home) .cta .btn--fill{background:#d92070;border-color:#d92070}
body:not(.pg-home) .cta .btn--fill::before{background:#a3184f}

.hs13__bg--plain{background:linear-gradient(115deg,#fff 0%,#f6f5f3 52%,#f8edf2 100%)}
.fld input:focus,.fld select:focus,.fld textarea:focus{box-shadow:0 0 0 3px rgba(217,32,112,.14)}

/* ---- English pages: English words in place of the Japanese accents */
.phero__kj--en{font-family:var(--didone);font-style:italic;font-weight:400;letter-spacing:0;white-space:nowrap;font-size:clamp(64px,7.4vw,118px)}
.phero--plain .phero__kj--en{font-size:clamp(72px,11vw,168px);bottom:-.16em}

.seal--en span{writing-mode:horizontal-tb;font-family:var(--caps);font-size:10px;font-weight:500;letter-spacing:.14em;line-height:1.3;text-align:center;text-transform:uppercase}
.seal--en.seal--m span{font-size:11px}
.seal--en.seal--l span{font-size:12px}

.j4__k--ic svg{width:40%;height:auto}

.win__kj--en{writing-mode:horizontal-tb;font-family:var(--didone);font-style:italic;font-weight:400;font-size:clamp(36px,4vw,60px);letter-spacing:0;white-space:nowrap}

html[lang="en"] .craft__n span{font-family:var(--didone);font-size:24px}

.slogan-en{margin-top:8px;font-family:var(--didone);font-style:italic;font-size:16px;line-height:1.5;color:var(--ink-2)}
.br13__mark{flex-wrap:wrap}
.slogan-en--mark{flex-basis:100%;margin-top:4px;text-align:center}
.msg__txt .slogan-en--msg{margin-top:.3em}

@media (max-width:760px){
  .hero13 .win__kj--en{font-size:clamp(22px,7vw,30px)}
}

/* the sales map: the recoloured image (world_map_v15.png) at full colour */
.phero--map .phero__img img{filter:none}

/* ---- home: the brand film under the brand text (plays only when asked; premium-v15.js) */
.film{margin-top:clamp(56px,6vw,96px)}
/* the film is letterboxed (about 2.54:1 inside 16:9): a 2.6:1 frame crops the black bars */
.film__v{position:relative;aspect-ratio:2.6/1;overflow:hidden;background:linear-gradient(115deg,#fff 0%,#f8edf2 100%)}
.film__v video{display:block;width:100%;height:100%;object-fit:cover}
.film__play{position:absolute;inset:0;display:grid;place-items:end start;padding:clamp(14px,2.4vw,32px);border:0;background:linear-gradient(20deg,rgba(39,38,40,.22),rgba(39,38,40,0) 45%);color:#fff;cursor:pointer}
.film__ic{display:grid;place-items:center;width:clamp(48px,5.6vw,80px);aspect-ratio:1;border-radius:50%;background:var(--plum);box-shadow:0 12px 30px -12px rgba(217,32,112,.7);transition:transform .4s var(--ease),background .3s}
.film__ic svg{width:34%;margin-left:8%}
.film__play:hover .film__ic,.film__play:focus-visible .film__ic{transform:scale(1.08);background:var(--plum-2)}
.film__play:focus-visible{outline:2px solid var(--beni);outline-offset:-8px}
.film.is-playing .film__play,.film.is-auto .film__play{display:none}
/* while it plays muted by itself: pause and sound-on buttons, lower left */
.film__bar{position:absolute;left:clamp(14px,2.4vw,32px);bottom:clamp(14px,2.4vw,32px);display:none;gap:8px}
.film.is-auto .film__bar{display:flex}
.film__btn{display:inline-flex;align-items:center;gap:8px;height:40px;min-width:40px;padding:0 14px;border:0;border-radius:20px;background:rgba(255,255,255,.9);color:var(--ink);font-family:var(--caps);font-size:12px;font-weight:500;letter-spacing:.12em;cursor:pointer;box-shadow:0 6px 18px -10px rgba(39,38,40,.5);transition:background .3s,color .3s}
.film__btn:hover,.film__btn:focus-visible{background:var(--plum);color:#fff}
.film__btn:focus-visible{outline:2px solid #fff;outline-offset:2px}
.film__btn svg{width:18px;height:18px}
.film__btn[data-film-pause]{justify-content:center;padding:0}
.film__pz{position:relative;width:12px;height:12px}
.film__pz::before,.film__pz::after{content:"";position:absolute;top:0;width:4px;height:12px;background:currentColor}
.film__pz::before{left:1px}.film__pz::after{right:1px}
.film__pz.is-paused::before{left:2px;width:0;height:0;background:none;border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent currentColor}
.film__pz.is-paused::after{display:none}
@media (max-width:760px){.film__btn{height:34px;min-width:34px;padding:0 11px;font-size:11px}.film__btn--snd span{display:none}}
.film__cap{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;margin-top:20px;font-size:inherit;letter-spacing:0;color:var(--ink)}
.film__cap::before{display:none}
.film__cap b{font-family:var(--mincho);font-weight:500;font-size:16px;letter-spacing:.1em}
html[lang="en"] .film__cap b{font-family:var(--didone);font-weight:400;font-size:21px;letter-spacing:0}
.film__cap b .tbd{margin-left:10px}
.film__cap i{font-family:var(--didone);font-style:italic;font-size:15px;color:var(--ink-3)}
@media (prefers-reduced-motion:reduce){.film__ic{transition:none}}

/* ---- page header photo: a fixed 16:9 frame on every screen, so one 16:9 photo (2400×1350) shows
   whole everywhere. Desktop: the photo column keeps 16:9 and the header follows the screen width;
   when the title and lead are taller than the photo, the photo sits centred beside them. Very wide
   screens cap the height (only there are the top and bottom trimmed). The fade into the text side
   is shorter, since nothing else is cut. */
@media (min-width:1025px){
  .phero:not(.phero--plain){min-height:0}
  .phero:not(.phero--plain) .phero__img{align-self:center;width:100%;aspect-ratio:16/9;min-height:0;max-height:760px}
}
.phero__img::after{background:linear-gradient(90deg,var(--paper) 0,rgba(255,255,255,0) 16%)}
@media (max-width:1024px){
  .phero__img::after{background:linear-gradient(180deg,var(--paper) 0,rgba(255,255,255,0) 10%)}
}

/* ---- three photo shapes for every replaceable photo (16:9, 4:5, 1:1), the same on every screen,
   so one photo per spot works everywhere:
   - 16:9 (2400×1350): page headers (above), the two office photos
   - 4:5  (1600×2000): every arch (home company, brand concept, business), the main office photo
   - 1:1  (1600×1600): round windows, product photos, IP collaboration images (unchanged)
   Phones: the portrait arches are capped in width so they do not fill the screen. */
.arch{aspect-ratio:4/5!important}
.office__main img{aspect-ratio:4/5;width:100%;object-fit:cover}
.office__l img{aspect-ratio:16/9;width:100%;object-fit:cover}
@media (max-width:1024px){
  .phil__img .arch,.cosplit .arch,.split__img .arch{max-width:360px;margin-inline:auto}
  .office__main{max-width:360px}
}
@media (max-width:760px){
  .craft__l .arch{max-width:300px;margin-inline:auto}
}