@charset "utf-8";
/* ============================================================
   転職ボイス ロゴの見た目と動き（全ページ共通）  tenshoku-voice/assets/logo.css   2026-09-15（⑫）
   ------------------------------------------------------------
   inc/00b-logo.php の tv_logo_html() が出す a.tv-logo の分だけ。色（文字）は各ヘッダーの CSS が持つ（トップ .home .logo＝黒／下層 .tv-hd__logo＝緑）
   ・マーク＝黒い吹き出し＋4本の波（黄・赤・青・緑）。大きさは文字の 1.25em（スマホでも文字に追従）
   ・開いたとき … 吹き出しがポンと膨らむ（.tv-logo__mk）→ 文字が1字ずつ上から落ちて着地（i）→ 黄色のマーカーが左から引かれる（.tv-logo--mark の b）
   ・常時 … 波がゆっくり上下に揺れる（rect）・9秒に1回だけ吹き出しがぷるんと揺れる（.tv-logo__mk の2つ目の animation）
   ・hover / focus … 文字が1字ずつ跳ねる（i>span）・吹き出しが揺れる（svg）・波が速くなる
   ・JS は使わない。動きを減らす設定（prefers-reduced-motion）では全部止まる
   ・落ちる動きと跳ねる動きを同じ要素に付けない（hover を外した瞬間に落下が最初から走る）ので i と i>span の2段
   ============================================================ */
.tv-logo{display:inline-flex;align-items:center;gap:.3em;white-space:nowrap;text-decoration:none;line-height:1;vertical-align:middle;--tvl-bub:#111111;--tvl-mark:#FFD100}
.tv-logo:hover,.tv-logo:focus{text-decoration:none}
.tv-logo__mk{display:inline-block;flex:none;line-height:0;transform-origin:20% 90%}
.tv-logo__svg{display:block;overflow:visible;width:1.25em;height:1.25em;transform-origin:20% 90%}
.tv-logo__bub{fill:var(--tvl-bub)}
.tv-logo__t{display:inline-block;line-height:1.1}
.tv-logo__t b{font-weight:inherit;color:inherit}
.tv-logo__t i{display:inline-block;font-style:normal}
.tv-logo__t i span{display:inline-block}

/* ── 常時：波（各棒が違う周期・スマホも同じ） ── */
@keyframes tvl-wave{0%,100%{transform:scaleY(.5)}50%{transform:scaleY(1)}}
.tv-logo__w{transform-box:fill-box;transform-origin:center;animation:tvl-wave 1.6s ease-in-out infinite}
.tv-logo__w2{animation-duration:1.25s;animation-delay:-.45s}
.tv-logo__w3{animation-duration:1.9s;animation-delay:-.95s}
.tv-logo__w4{animation-duration:1.4s;animation-delay:-.2s}

/* ── 開いたとき（1回） ── */
@keyframes tvl-pop{0%{transform:scale(0) rotate(-25deg);opacity:0}55%{transform:scale(1.2) rotate(5deg);opacity:1}78%{transform:scale(.94) rotate(-2deg)}100%{transform:scale(1) rotate(0);opacity:1}}
@keyframes tvl-drop{0%{transform:translateY(-.6em);opacity:0}50%{transform:translateY(.14em);opacity:1}72%{transform:translateY(-.07em)}88%{transform:translateY(.03em)}100%{transform:none;opacity:1}}
@keyframes tvl-mark{to{background-size:100% 100%}}
/* 9秒に1回のぷるん（後ろの animation が transform を握るのは遅延が明けてから＝それまでは tvl-pop の値が残る） */
@keyframes tvl-idle{0%,90%,100%{transform:none}92%{transform:rotate(-9deg) scale(1.07)}94%{transform:rotate(8deg) scale(1.07)}96%{transform:rotate(-4deg) scale(1.03)}98%{transform:rotate(3deg)}}
.tv-logo__mk{animation:tvl-pop .65s cubic-bezier(.34,1.56,.64,1) both,tvl-idle 9s 4s ease-in-out infinite}
.tv-logo__t i{animation:tvl-drop .6s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(.28s + var(--i,0) * .07s)}
.tv-logo--mark .tv-logo__hl{background:linear-gradient(transparent 68%,var(--tvl-mark) 68%) no-repeat 0 0 / 0% 100%;animation:tvl-mark .5s cubic-bezier(.2,.7,.2,1) .8s both;padding:0 .04em}

/* ── hover / focus ── */
@keyframes tvl-jump{0%,100%{transform:none}35%{transform:translateY(-.24em) rotate(-5deg)}65%{transform:translateY(.05em) rotate(2deg)}}
@keyframes tvl-wobble{0%,100%{transform:rotate(0)}20%{transform:rotate(-11deg) scale(1.1)}45%{transform:rotate(9deg) scale(1.1)}70%{transform:rotate(-4deg) scale(1.03)}}
.tv-logo:hover .tv-logo__t i span,.tv-logo:focus-visible .tv-logo__t i span{animation:tvl-jump .6s ease both;animation-delay:calc(var(--i,0) * .06s)}
.tv-logo:hover .tv-logo__svg,.tv-logo:focus-visible .tv-logo__svg{animation:tvl-wobble .75s ease both}
.tv-logo:hover .tv-logo__w,.tv-logo:focus-visible .tv-logo__w{animation-duration:.42s}

@media (prefers-reduced-motion:reduce){
  .tv-logo__w,.tv-logo__mk,.tv-logo__t i,.tv-logo__t i span,.tv-logo__svg,.tv-logo--mark .tv-logo__hl{animation:none!important}
  .tv-logo--mark .tv-logo__hl{background-size:100% 100%}
}