/* Hirotaki shoji Co., Ltd. — Japanese national holiday band (v3, original Kansai illustrations)
   A normal-flow band under the site header. Text on the left, the original picture in its own column on the right.
   Pictures are never stretched: landscapes are cropped around their subject (object-fit: cover),
   object and garland pictures are shown whole (object-fit: contain). */

html[data-season="japanholiday"] .seasonal-layer.seasonal-theme-japanholiday,
html[data-season="japanholiday"] .seasonal-holiday-note.seasonal-caption-japanholiday{display:none !important}

.jh-band{
  --jh-navy-950:#02182f; --jh-navy-800:#04274d; --jh-gold:#b08a28; --jh-gold-soft:#d6b45c;
  --jh-accent:#c8372d; --jh-tint:#d94b4b;
  --jh-h:clamp(150px,15vw,232px);
  position:relative; isolation:isolate; overflow:hidden; margin:0 !important; padding:0 !important; box-sizing:border-box;
  color:#fff; font-family:inherit;
  background:
    radial-gradient(70% 140% at 82% 50%,color-mix(in srgb,var(--jh-tint) 26%,transparent),transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34.64' height='60' viewBox='0 0 34.64 60'%3E%3Cg fill='none' stroke='%23d6b45c' stroke-opacity='.11' stroke-width='1'%3E%3Cpath d='M17.32 0 34.64 10v20L17.32 40 0 30V10Z'/%3E%3Cpath d='M17.32 40v20M0 30l-17.32 10M34.64 30l17.32 10'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(100deg,var(--jh-navy-950) 0%,var(--jh-navy-800) 58%,#06315f 100%);
  background-size:auto,34.64px 60px,auto;
  box-shadow:inset 0 2px 0 rgba(214,180,92,.75),inset 0 -2px 0 rgba(214,180,92,.75);
}
/* the same colour families as the Kansai site, used only as a soft glow behind the picture */
.jh-band[data-family="celebration"]{--jh-tint:#d44e72}.jh-band[data-family="civic"]{--jh-tint:#bd3737}
.jh-band[data-family="spring"]{--jh-tint:#d96f98}.jh-band[data-family="green"]{--jh-tint:#4f9463}
.jh-band[data-family="children"]{--jh-tint:#3b85b9}.jh-band[data-family="sea"]{--jh-tint:#237aa6}
.jh-band[data-family="mountain"]{--jh-tint:#4d785e}.jh-band[data-family="respect"]{--jh-tint:#8a5a76}
.jh-band[data-family="autumn"]{--jh-tint:#a7593e}.jh-band[data-family="sport"]{--jh-tint:#297ea1}
.jh-band[data-family="culture"]{--jh-tint:#664f91}.jh-band[data-family="harvest"]{--jh-tint:#8e6231}
.jh-band *,.jh-band *::before,.jh-band *::after{box-sizing:border-box}

.jh-inner{
  max-width:76rem; margin-inline:auto;
  padding-left:max(16px,env(safe-area-inset-left,0px)); padding-right:max(16px,env(safe-area-inset-right,0px));
  display:grid; grid-template-columns:auto minmax(0,1fr) var(--jh-art-w) auto; grid-template-areas:"seal text art close";
  align-items:center; gap:0 22px; min-height:var(--jh-h);
}
.jh-band[data-mode="scene"]{--jh-art-w:clamp(300px,46vw,700px)}
.jh-band[data-mode="whole"]{--jh-art-w:clamp(240px,36vw,560px)}

/* hexagon seal in the brand's shape */
.jh-seal{grid-area:seal;position:relative;width:50px;height:56px;display:grid;place-items:center}
.jh-seal::before{content:"";position:absolute;inset:0;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:linear-gradient(135deg,#f7e3a1,#d6b45c 40%,#fff1c2 60%,#a8812a)}
.jh-seal::after{content:"";position:absolute;inset:3px;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:var(--jh-navy-950)}
.jh-seal i{position:relative;z-index:1;display:block;width:16px;height:16px;border-radius:50%;background:var(--jh-accent);box-shadow:0 0 0 3px #fff,0 0 12px 4px rgba(255,255,255,.22)}

.jh-text{grid-area:text;min-width:0;display:grid;gap:4px;padding-block:16px}
.jh-eyebrow{margin:0;font-size:.72rem;line-height:1.2;letter-spacing:.16em;text-transform:uppercase;color:var(--jh-gold-soft);font-weight:600}
html:not([lang="en"]) .jh-eyebrow{letter-spacing:.08em;text-transform:none}
.jh-title{margin:0;font-size:clamp(1.12rem,1rem + .55vw,1.55rem);line-height:1.3;font-weight:700;text-wrap:balance}
.jh-title .jh-date{font-weight:500;color:var(--jh-gold-soft);margin-left:.6em;font-size:.78em;white-space:nowrap}
.jh-note{margin:0;font-size:.9rem;line-height:1.6;color:rgba(255,255,255,.8);max-width:40em}

/* the original picture, in its own column */
.jh-art{grid-area:art;margin:0;position:relative;height:var(--jh-h);min-width:0}
.jh-art img{display:block;width:100%;height:100%}
.jh-band[data-mode="scene"] .jh-art img{object-fit:cover;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 24%,#000 90%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 12%,#000 88%,transparent 100%);
  -webkit-mask-composite:source-in; mask-image:linear-gradient(to right,transparent 0,#000 24%,#000 90%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 12%,#000 88%,transparent 100%); mask-composite:intersect}
.jh-band[data-mode="whole"] .jh-art{padding-block:10px}
.jh-band[data-mode="whole"] .jh-art img{object-fit:contain;filter:drop-shadow(0 10px 18px rgba(0,0,0,.45))}

.jh-close{grid-area:close;appearance:none;width:44px;height:44px;border:1px solid rgba(255,255,255,.32);background:rgba(2,24,47,.5);
  color:rgba(255,255,255,.88);font:inherit;font-size:1.15rem;line-height:1;cursor:pointer}
.jh-close:focus-visible{outline:3px solid var(--jh-gold-soft);outline-offset:2px}
@media (hover:hover){.jh-close:hover{border-color:#fff;color:#fff}}

/* tablets: a little less picture so the text keeps a comfortable measure */
@media (max-width:1024px){.jh-band[data-mode="scene"]{--jh-art-w:clamp(260px,42vw,520px)}.jh-band[data-mode="whole"]{--jh-art-w:clamp(220px,36vw,420px)}}
/* phones: the picture gets its own row above the text, so nothing overlaps */
@media (max-width:640px){
  .jh-inner{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"art art art" "seal text close";gap:0 12px;min-height:0}
  .jh-band{--jh-h:clamp(150px,44vw,200px)}
  .jh-art{margin-inline:calc(-1 * max(16px,env(safe-area-inset-left,0px)))}
  .jh-band[data-mode="scene"] .jh-art img{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 10%,#000 80%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 10%,#000 80%,transparent 100%)}
  .jh-seal{width:42px;height:48px}
  .jh-text{padding-block:10px 14px}
  .jh-note{font-size:.85rem}
}
@media (min-width:1700px){.jh-inner{max-width:88rem}.jh-band{--jh-h:248px}}

/* motion: a gentle entrance, then very slow drift; nothing moves when reduced motion is requested */
@keyframes jh-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes jh-pan{from{transform:scale(1)}to{transform:scale(1.045)}}
@keyframes jh-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.jh-band.jh-enter .jh-art{animation:jh-in .9s cubic-bezier(.2,.7,.2,1) both}
.jh-band.jh-enter .jh-text{animation:jh-in .7s ease both}
.jh-band[data-mode="scene"] .jh-art img{animation:jh-pan 22s ease-in-out infinite alternate;transform-origin:var(--jh-origin,50% 60%)}
.jh-band[data-mode="whole"] .jh-art img{animation:jh-float 7s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.jh-band .jh-art,.jh-band .jh-text,.jh-band .jh-art img{animation:none !important}}
@media (forced-colors:active){.jh-band{border:1px solid CanvasText}}
@media print{.jh-band{display:none}}