/* Kohana. build-07 r12 (2026-11-03, local, not published) — loaded after build07i.css. CSS only.
   1. The light of r11, more natural: the rays (.fv-light i) get beams of different widths — wide and faint, thin and clear,
      and very soft ones — in three groups (i, i::before, i::after). Each group drifts left and right on its own path,
      period and amplitude (29s / 23s / 37s), a little wider than in r11, so they never move together or visibly back and forth.
      Colours, the direction from the top, the entrance (from 0.15s) and the order light → logo → IBJ AWARD are unchanged.
   2. Phones 372–599px: the IBJ AWARD banner (112px; 108px up to 389px) sits to the right of 「結ぶのは、縁。／ほどくのは、不安。」,
      its bottom 10px above 「あなたの気持ちから…」. The copy goes back to where it was before the banner was enlarged (r10).
      Below 372px and on tablets / PC: as in r11 (no room beside the copy on the narrowest phones). */

/* 1. rays */
.fv-light i{
 background:
  linear-gradient(97deg,rgba(255,252,242,0) 6%,rgba(255,252,242,.34) 11%,rgba(255,252,242,0) 19%),
  linear-gradient(99deg,rgba(255,252,242,0) 30%,rgba(255,252,242,.55) 31.2%,rgba(255,252,242,0) 32.6%),
  linear-gradient(96deg,rgba(255,252,242,0) 47%,rgba(255,252,242,.26) 54%,rgba(255,252,242,0) 64%),
  linear-gradient(100deg,rgba(255,252,242,0) 76%,rgba(255,252,242,.5) 77.4%,rgba(255,252,242,0) 79.2%)}
.fv-light i::before,.fv-light i::after{content:"";position:absolute;inset:0 -12%;pointer-events:none;will-change:transform,opacity}
/* group 2: thin, clearer beams */
.fv-light i::before{
 background:
  linear-gradient(98deg,rgba(255,253,246,0) 17%,rgba(255,253,246,.6) 18%,rgba(255,253,246,0) 19.3%),
  linear-gradient(101deg,rgba(255,253,246,0) 40%,rgba(255,253,246,.42) 41.5%,rgba(255,253,246,0) 43.5%),
  linear-gradient(97deg,rgba(255,253,246,0) 63%,rgba(255,253,246,.5) 63.8%,rgba(255,253,246,0) 64.8%),
  linear-gradient(99deg,rgba(255,253,246,0) 86%,rgba(255,253,246,.38) 87.5%,rgba(255,253,246,0) 89.5%);
 animation:ray-2 23s cubic-bezier(.45,.05,.55,.95) infinite}
/* group 3: wide beams with no clear edge */
.fv-light i::after{
 background:
  linear-gradient(95deg,rgba(255,251,240,0) 0,rgba(255,251,240,.28) 12%,rgba(255,251,240,0) 27%),
  linear-gradient(98deg,rgba(255,251,240,0) 52%,rgba(255,251,240,.22) 66%,rgba(255,251,240,0) 82%);
 animation:ray-3 37s cubic-bezier(.45,.05,.55,.95) infinite}
/* group 1 (the element itself): its entrance as in r11, then a slower, wider drift than r11's */
.fv-light i{animation:fvl-rays 2.6s cubic-bezier(.25,.1,.25,1) .35s both,ray-1 29s cubic-bezier(.45,.05,.55,.95) 2.95s infinite}
/* uneven paths: each returns to its start (no seam), never a plain back-and-forth */
@keyframes ray-1{
 0%,100%{opacity:.8;transform:none}
 18%{opacity:.7;transform:translateX(2.6%) skewX(-1.6deg)}
 41%{opacity:.78;transform:translateX(4.2%) skewX(-.6deg)}
 63%{opacity:.66;transform:translateX(-1.4%) skewX(1.4deg)}
 84%{opacity:.74;transform:translateX(-3.6%) skewX(.8deg)}}
@keyframes ray-2{
 0%,100%{opacity:1;transform:none}
 22%{opacity:.74;transform:translateX(-2.4%) skewX(1.3deg)}
 47%{opacity:.9;transform:translateX(-3.6%) skewX(.4deg)}
 71%{opacity:.7;transform:translateX(1.3%) skewX(-.9deg)}
 88%{opacity:.92;transform:translateX(2.1%) skewX(-.3deg)}}
@keyframes ray-3{
 0%,100%{opacity:1;transform:none}
 30%{opacity:.75;transform:translateX(5%) skewX(-1deg)}
 55%{opacity:.92;transform:translateX(2.2%) skewX(1.2deg)}
 78%{opacity:.7;transform:translateX(-4.4%) skewX(.6deg)}}
@media(prefers-reduced-motion:reduce){.fv-light i,.fv-light i::before,.fv-light i::after{animation:none}.fv-light i{opacity:.8;transform:none}}

/* 2. phones: the banner to the right of the heading */
@media(min-width:23.25em) and (max-width:37.49em){
 #top-fv .copy{padding-top:calc(var(--hh) + min(46svh,420px) + 14px)}
 #top-fv>.iaw-adopted{--aw:112px;right:16px;top:calc(var(--hh) + min(46svh,420px) + 10px)}
}
@media(min-width:23.25em) and (max-width:24.3125em){#top-fv>.iaw-adopted{--aw:108px;right:12px}}