#fv{
--navy:#0E2C4A; --ink:#0A1F35; --sky:#A9D6EE; --sky-pale:#E4F2FA;
--yellow:#FFD21E; --flame:#FF5A1F; --paper:#F4F1EA;
--jp:"Noto Sans JP",-apple-system,"Hiragino Sans","Yu Gothic",sans-serif;
--en:"Anton","Arial Narrow",Impact,sans-serif;
font-family:var(--jp);
}
#fv,#fv *{box-sizing:border-box} .fv#fv{
position:relative; width:100%; height:min(calc(100vh - 142px),800px); min-height:560px;
overflow:hidden; background:#fff; isolation:isolate;
}
.fv#fv::after{ display:none; content:""; position:absolute; inset:0; z-index:9; pointer-events:none;
background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='.5'/></svg>");
opacity:.10;
} #fv .art{position:absolute; inset:0; z-index:0; pointer-events:none}
#fv .art svg{position:absolute; inset:0; width:100%; height:100%}
#fv .stripe{
position:absolute; left:-4%; right:-4%; bottom:-4px; height:62px; z-index:7;
background:var(--navy); transform:rotate(-1.1deg); overflow:hidden; pointer-events:none;
display:flex; align-items:center;
}
#fv .stripe .run{
display:flex; gap:44px; white-space:nowrap; color:var(--sky);
font-family:var(--en); font-size:22px; letter-spacing:.07em;
animation:tdfv-run 28s linear infinite; padding-right:44px;
}
#fv .stripe .run span{opacity:.9}
#fv .stripe .run b{color:var(--yellow);font-weight:400}
@keyframes tdfv-run{ to{ transform:translateX(-50%) } } #fv .side{
position:absolute; top:0; bottom:0; z-index:3; text-decoration:none;
display:flex; flex-direction:column; justify-content:center;
padding:0 clamp(26px,3.6vw,62px) 74px; cursor:pointer;
}
#fv .side.l{left:0;  width:44%; align-items:flex-start; text-align:left}
#fv .side.r{right:0; width:44%; align-items:flex-end;  text-align:right}
#fv .side .fill{
position:absolute; inset:172px -6% -3% -6%; z-index:-1;
clip-path:inset(100% 0 0 0); transition:clip-path .5s cubic-bezier(.2,.9,.2,1);
}
#fv .side:hover .fill{clip-path:inset(0 0 0 0)}
#fv .side .en{
display:block; font-family:var(--en); line-height:.84;
font-size:clamp(42px,5.5vw,88px); letter-spacing:.005em;
color:transparent; -webkit-text-stroke:2.2px var(--navy);
transition:color .32s, -webkit-text-stroke-color .32s, transform .42s cubic-bezier(.2,.9,.2,1);
transform-origin:left bottom;
}
#fv .side.r .en{transform-origin:right bottom}
#fv .side .jp{
display:block; margin-top:16px; font-weight:900; line-height:1.34;
font-size:clamp(18px,1.95vw,29px); letter-spacing:.02em; color:var(--navy);
transition:color .32s, transform .42s cubic-bezier(.2,.9,.2,1);
transform-origin:left bottom;
}
#fv .side.r .jp{transform-origin:right bottom}
#fv .side .go{
display:inline-block; margin-top:20px; font-size:12.5px; font-weight:900;
letter-spacing:.06em; color:var(--navy); border-bottom:2px solid currentColor;
padding-bottom:3px; opacity:.55; transition:opacity .3s, color .3s, transform .4s;
} #fv .side .fill{display:none}
#fv .side.l .en{transform-origin:left center}#fv .side.r .en{transform-origin:right center} #fv .side.l .jp{transform-origin:left top}#fv .side.r .jp{transform-origin:right top}
#fv .art .blob-flame{transition:opacity .35s}
.fv#fv[data-hot="l"] .art .blob-flame{opacity:.12} @media (min-width:901px){ #fv .side.l .en{color:var(--flame); -webkit-text-stroke-color:var(--flame)}
#fv .side.l .jp{color:var(--flame)}
#fv .side.l .go{color:var(--flame); opacity:.9}
#fv .side.l:hover .en{color:var(--flame); -webkit-text-stroke-color:var(--flame); transform:scale(1.16) rotate(-1.1deg)}
#fv .side.l:hover .jp{color:var(--flame); transform:scale(1.1)}
#fv .side.l:hover .go{color:var(--flame); opacity:1; transform:translateX(7px)}
#fv .side.r:hover .en{color:var(--navy); -webkit-text-stroke-color:var(--navy); transform:scale(1.16) rotate(1.1deg)}
#fv .side.r:hover .jp{color:var(--navy); transform:scale(1.1)}
#fv .side.r:hover .go{color:var(--navy); opacity:1; transform:translateX(-7px)}
} .fv#fv[data-hot="l"] .side.r .en,
.fv#fv[data-hot="l"] .side.r .jp,
.fv#fv[data-hot="r"] .side.l .en,
.fv#fv[data-hot="r"] .side.l .jp{opacity:.26}
#fv .side .en,#fv .side .jp{transition:opacity .35s, color .32s, -webkit-text-stroke-color .32s, transform .42s cubic-bezier(.2,.9,.2,1)}
#fv .hero{
position:absolute; z-index:10; left:50%; top:86px; transform:translateX(-50%);
margin:0; text-align:center; white-space:nowrap; color:var(--navy);
font-weight:900; font-size:clamp(28px,4.3vw,64px); letter-spacing:.01em; line-height:1.1;
transition:transform .4s cubic-bezier(.2,.9,.2,1);
}
#fv .hero:hover{transform:translateX(-50%) scale(1.035)}
.fv#fv.go .pops{opacity:1}
#fv .hero .c{ display:inline-block; opacity:0;
transform:translateY(34px) scale(.5) rotate(-12deg);
}
#fv .hero.go .c{ animation:tdfv-pop .66s cubic-bezier(.18,1.5,.36,1) forwards; animation-delay:var(--d) }
#fv .hero .c:nth-child(even){--tilt:1.1deg}
#fv .hero .c:nth-child(odd){--tilt:-1.1deg}
#fv .hero .c > i{ display:inline-block; font-style:normal; transform:rotate(var(--tilt)) }
#fv .hero.go .c > i{ animation:tdfv-wave 7.5s var(--dw) infinite }
@keyframes tdfv-pop{ to{ opacity:1; transform:none } }
@keyframes tdfv-wave{
0%,86%,100%{ transform:rotate(var(--tilt)) translateY(0) }
90%        { transform:rotate(var(--tilt)) translateY(-10px) scale(1.06) }
94%        { transform:rotate(var(--tilt)) translateY(2px)   scale(.99) }
}
#fv .hero .mark{position:relative; z-index:0}
#fv .hero .mark::before{ content:""; position:absolute; z-index:-1;
left:-.1em; right:-.1em; bottom:.06em; height:.42em;
background:var(--yellow); filter:url(#sprayPanel);
transform:scaleX(0) skewX(-6deg); transform-origin:left center;
}
#fv .hero.go .mark::before{ animation:tdfv-swipe .52s cubic-bezier(.2,.85,.2,1) forwards; animation-delay:.92s }
@keyframes tdfv-swipe{ to{ transform:scaleX(1) skewX(-6deg) } }
#fv .pops{position:absolute; z-index:11; left:50%; top:46px; opacity:0; transition:opacity .4s .9s; width:min(74vw,900px);
height:150px; transform:translateX(-50%); pointer-events:none}
#fv .pops i{
position:absolute; display:block; width:var(--s); height:var(--s);
background:var(--c); opacity:0;
clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);
animation:tdfv-spark 4.6s var(--d) infinite;
}
@keyframes tdfv-spark{
0%,72%   { opacity:0; transform:scale(.2) rotate(0deg) }
78%      { opacity:1; transform:scale(1.15) rotate(35deg) }
86%      { opacity:.9; transform:scale(.85) rotate(55deg) }
94%,100% { opacity:0; transform:scale(.25) rotate(80deg) }
}
@media (prefers-reduced-motion: reduce){ #fv .hero.go .c{animation:none}
#fv .hero .c{opacity:1; transform:none}
#fv .hero.go .c > i{animation:none}
#fv .hero.go .mark::before{animation:none}
#fv .hero .mark::before{transform:scaleX(1) skewX(-6deg)}
#fv .pops,.fv#fv.go .pops{display:none}
#fv .stripe .run{animation:none}
} #fv .dogwrap{
position:absolute; z-index:5; left:50%; bottom:26px;
height:69%;
transform:translateX(-50%); pointer-events:none;
}
#fv .dogshadow{ position:absolute; z-index:4; left:50%; bottom:34px; transform:translateX(-50%);
width:26%; height:36px; border-radius:50%;
background:radial-gradient(closest-side, rgba(14,44,74,.34), rgba(14,44,74,0) 78%);
pointer-events:none;
}
#fv .dogwrap img{
position:absolute; inset:0; width:100%; height:100%;
display:block; user-select:none; -webkit-user-drag:none;
}
#fv .dogwrap canvas{position:absolute; inset:0; width:100%; height:100%; display:block}
@media(max-width:900px){ .fv#fv{height:auto;min-height:0;display:flex;flex-wrap:wrap;align-content:flex-start;padding:0}
#fv .hero{position:relative;order:1;width:100%;left:auto;top:auto;transform:none;margin:22px 0 0;
font-size:clamp(21px,6vw,40px);white-space:nowrap;padding:0 12px;z-index:10}
#fv .hero:hover{transform:none}
#fv .pops{display:none}
#fv .dogwrap{position:relative;order:2;left:auto;bottom:auto;transform:none !important;
height:auto;--dw:min(70%, calc(46svh * 499 / 720));width:var(--dw);
margin:6px calc((100% - var(--dw)) / 2) -34px;z-index:6} #fv .dogshadow{display:none}
#fv .side,#fv .side.l,#fv .side.r{position:relative;order:3;width:50%;top:auto;bottom:auto;left:auto;right:auto;
padding:56px 14px 22px;justify-content:flex-start;align-items:flex-start;text-align:left;
min-height:220px;z-index:3}
#fv .side.r{order:4;align-items:flex-end;text-align:right;padding-left:10px}
#fv .side .fill{display:none}
#fv .side .en{font-size:clamp(30px,9.4vw,40px);-webkit-text-stroke-width:0}
#fv .side .jp{margin-top:10px;font-size:clamp(13px,3.9vw,16px)}
#fv .side .go{margin-top:14px;font-size:11px}
#fv .side.l{background:var(--flame)}
#fv .side.l .en{color:#fff}
#fv .side.l .jp{color:#fff}
#fv .side.l .go{color:#fff;opacity:1}
#fv .side.r{background:var(--navy)}
#fv .side.r .en{color:#fff}
#fv .side.r .jp{color:#fff}
#fv .side.r .go{color:var(--yellow);opacity:1} #fv .side.l{width:58%}
#fv .side.r{width:42%}
#fv .side.l .en{font-size:clamp(36px,11.2vw,48px)}
#fv .side.r .en{font-size:clamp(24px,7.4vw,32px)} #fv .stripe{display:none}
#fv .side:hover .en,#fv .side:hover .jp,#fv .side:hover .go{transform:none}
#fv .stripe{position:relative;order:5;transform:none;left:auto;right:auto;bottom:auto;
width:100%;height:48px}
#fv .stripe .run{font-size:18px;animation:tdfv-run 22s linear infinite;will-change:transform}
.fv#fv[data-hot] .side .en,.fv#fv[data-hot] .side .jp{opacity:1}
#fv .art svg ellipse{transform:translateY(-120px)}
} .footer_fixed{opacity:0;pointer-events:none;transform:translateY(12px);transition:opacity .35s,transform .35s}
body.td-fv-passed .footer_fixed{opacity:1;pointer-events:auto;transform:none}