/* Kohana. build-07 r11 (2026-11-03, local, not published) — loaded after build07h.css. CSS only.
   1. PC: the hero content (copy, logo, light, IBJ AWARD) sits in a centred box of at most 1240px; the background still fills
      the screen. Up to 1240px nothing moves (the box is the full width, as before).
   2. IBJ AWARD, larger: phones 112px (≤359px: 96px), tablets 136px, PC 148–176px. Same banner, same fade and timing.
      Phones/tablets: it sits at the right, just under the logo (the logo keeps its size and place), and the copy starts below it
      (the copy moves down by the room the banner needs; nothing overlaps). */

/* 2. phones / tablets: the banner under the logo's lower right; the copy starts below it */
@media(max-width:63.99em){
 #top-fv{--sb:calc(var(--ly) + var(--lh))}   /* the bottom of the script Kohana. */
 #top-fv>.iaw-adopted{--aw:112px;top:calc(var(--sb) + 10px)}
 #top-fv .copy{padding-top:max(calc(var(--hh) + min(46svh,420px) + 14px),calc(var(--sb) + 10px + var(--aw) + 14px))}
}
@media(max-width:359px){#top-fv>.iaw-adopted{--aw:96px}}
@media(min-width:37.5em) and (max-width:63.99em){#top-fv>.iaw-adopted{--aw:136px}}
/* .copy reads --aw from the banner's value: give it to the first view too */
@media(max-width:63.99em){#top-fv{--aw:112px}}
@media(max-width:359px){#top-fv{--aw:96px}}
@media(min-width:37.5em) and (max-width:63.99em){#top-fv{--aw:136px}}

/* 1. PC: a centred content box (--cx: its left edge, --cw: its width) */
@media(min-width:64em){
 #top-fv{--cw:min(100%,1240px);--cx:max(0px,calc((100% - 1240px)/2));--lcx:calc(var(--cx) + var(--cw)*.69);--lx:calc(var(--lcx) - var(--lw)/2)}
 #top-fv .copy{margin-left:var(--cx);width:calc(var(--cw)*.48);padding-left:calc(var(--cw)*.06)}
 .fv-light{left:calc(var(--lcx) - 36%);right:auto;width:72%}
 #top-fv>.iaw-adopted{--aw:clamp(148px,11.5vw,176px);right:calc(var(--cx) + var(--cw)*.04);bottom:clamp(24px,4.5svh,52px)}
}

/* 3. the light keeps swaying, slowly (CSS only). After its entrance (build07h) each layer goes on to a loop that starts and
   ends at the entrance's final state, so the hand-over and every new cycle are seamless. Three different periods (17s / 13s /
   19s) so the whole never visibly repeats. Only transform / opacity, a few percent; the light stays behind the logo.
   「視差効果を減らす」: build07h already sets animation:none on these layers, which stops the loop too. */
.fv-light::before{will-change:transform,opacity;
 animation:fvl-in 2.2s cubic-bezier(.25,.1,.25,1) .15s both,fvl-sway 17s ease-in-out 2.35s infinite}
.fv-light i{will-change:transform,opacity;
 animation:fvl-rays 2.6s cubic-bezier(.25,.1,.25,1) .35s both,fvl-rays-sway 13s ease-in-out 2.95s infinite}
.fv-light::after{animation:fvl-valance 1.2s ease .5s forwards,fvl-valance-sway 19s ease-in-out 1.7s infinite}
@keyframes fvl-sway{
 0%,100%{opacity:1;transform:none}
 25%{opacity:.9;transform:translate(1.6%,.8%) rotate(.6deg) scale(1.02)}
 50%{opacity:.96;transform:translate(-.6%,1.4%) rotate(-.3deg) scale(1.035)}
 75%{opacity:.88;transform:translate(-1.8%,.4%) rotate(-.7deg) scale(1.015)}}
@keyframes fvl-rays-sway{
 0%,100%{opacity:.8;transform:none}
 30%{opacity:.62;transform:translateX(1.4%) skewX(-1.2deg)}
 60%{opacity:.74;transform:translateX(-.8%) skewX(.6deg)}
 80%{opacity:.66;transform:translateX(-1.6%) skewX(1deg)}}
@keyframes fvl-valance-sway{0%,100%{opacity:1}50%{opacity:.82}}
@media(prefers-reduced-motion:reduce){.fv-light::before,.fv-light::after,.fv-light i{animation:none}}