/* =========================================================
   ABOUT FRIENDS — 動きの第2層（2026-09-30 制作Cowork）
   KiMiさん「見出し・PARAMETER・SPECIAL の品質とモーションを上げて」
   ・見出し：字が下からせり上がる → 光が走る → キラキラが放射
   ・PARAMETER：間延びを直す＋六角形の図（motion2.js が描く）＋バーが弾んで光る
   ・SPECIAL：縁を光が一周、雷は落ちて光る／若葉は舞い降りてそよぐ
   🔴 動きを減らす設定では、全部「最後の姿」で止める（末尾）
   ========================================================= */
@property --ang{ syntax: '<angle>'; inherits: false; initial-value: 0deg; }

/* =========================================================
   1 見出し「あばっと、出会おう。」
   ========================================================= */
.js .hero__eyebrow{ animation: m2Eyebrow 1.2s var(--ease-out, cubic-bezier(.2,.8,.2,1)) .05s both; }
@keyframes m2Eyebrow{
  from{ opacity: 0; letter-spacing: .9em; filter: blur(4px); }
  to  { opacity: 1; letter-spacing: .35em; filter: blur(0); }
}

/* 元の「跳ねて出る」は、分けた後は使わない */
.hero__title.is-split .ch{
  opacity: 1; transform: none; animation: none;
  clip-path: inset(-45% -30% -4% -30%);          /* 下の縁で切る＝字が床下からせり上がる */
  translate: 0 var(--lift, 0px);                  /* カーソルが近い字は少し浮く（PC） */
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), translate .35s cubic-bezier(.2,.8,.2,1);
}
@media (hover: hover){
  .hero__title.is-split .ch:hover{ transform: translateY(-10px) rotate(-4deg) scale(1.12); clip-path: none; }
  .hero__title.is-split .ch:hover .ch-in{ --c: var(--batton-text); }
}
.hero__title .ch-in{
  display: inline-block;
  background-image: linear-gradient(100deg,
    var(--c) 0 40%, #E3F07F 46%, #FFFFFF 50%, #E3F07F 54%, var(--c) 60% 100%);
  background-size: 320% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation:
    m2Rise .95s cubic-bezier(.22,1.2,.36,1) calc(.15s + var(--i) * 70ms) both,
    m2Sheen 1.2s ease-in-out calc(1.35s + var(--i) * 55ms) both;
}
.hero__title.is-replay .ch-in{ animation: m2Sheen 1.1s ease-in-out calc(var(--i) * 45ms) both; }
@keyframes m2Rise{
  0%  { transform: translateY(108%) rotate(7deg); filter: blur(10px); opacity: 0; }
  55% { filter: blur(0); opacity: 1; }
  100%{ transform: none; filter: blur(0); opacity: 1; }
}
@keyframes m2Sheen{
  from{ background-position: 100% 0; }
  to  { background-position: 0% 0; }
}
/* 1行目と2行目で奥行きをずらす（スクロールで） */
.hero__title-l1, .hero__title-l2{ will-change: transform; }
.js .hero__title-l1{ transform: translate3d(0, calc(var(--py, 0) * -.10px), 0); opacity: var(--po, 1); }
.js .hero__title-l2{ transform: translate3d(0, calc(var(--py, 0) * -.22px), 0); opacity: var(--po, 1); }

/* キラキラ：線が中心から外へ走り、輪が広がる */
.js .hero__title-spark path{
  stroke-dasharray: 1; stroke-dashoffset: -1;
  animation: m2Ray .45s cubic-bezier(.2,.8,.2,1) calc(1.45s + var(--r, 0) * 45ms) forwards;
}
@keyframes m2Ray{ to{ stroke-dashoffset: 0; } }
.hero__title-spark .spark-ring{
  fill: none; stroke: currentColor; stroke-width: 2;
  transform-box: fill-box; transform-origin: center;
  opacity: 0;
  animation: m2Ring 1s cubic-bezier(.2,.8,.2,1) 1.45s forwards;
}
@keyframes m2Ring{
  0%  { opacity: .9; transform: scale(.2); }
  100%{ opacity: 0;  transform: scale(3.2); }
}

/* リード文：ぼかしから浮かび、「360° から観察」に線が引かれる */
.js .hero__lead{ animation: m2Lead 1s var(--ease-out, cubic-bezier(.2,.8,.2,1)) 1.15s both; }
@keyframes m2Lead{
  from{ opacity: 0; transform: translateY(14px); filter: blur(6px); }
  to  { opacity: 1; transform: none; filter: blur(0); }
}
.js .hero__lead b{
  background: linear-gradient(var(--batton), var(--batton)) no-repeat 0 92% / 0% 34%;
  animation: m2Under .9s cubic-bezier(.2,.8,.2,1) 1.9s forwards;
  padding: 0 2px;
}
@keyframes m2Under{ to{ background-size: 100% 34%; } }

/* =========================================================
   2 PARAMETER
   ========================================================= */
/* 間延びの原因：一覧（grid）がカードの高さいっぱいに引き伸ばされ、行と行の間が空いていた
   → 一覧は詰めて、空いた高さは六角形の図が受け持つ */
.profile__card--stats .stats{ flex: 0 0 auto; align-content: start; gap: 12px; }
.profile__card--stats .profile__skill{ margin-top: 22px; }

.radar{
  flex: 1 1 auto;
  display: flex; align-items: center; justify-content: center;
  min-height: 230px;
  margin: -4px 0 14px;
}
.radar svg{ width: 100%; max-width: 360px; height: auto; max-height: 100%; overflow: visible; }
.radar__ring{ fill: none; stroke: rgba(31,44,41,.10); stroke-width: 1; }
.radar__ring--outer{ stroke: rgba(31,44,41,.18); }
.radar__axis{ stroke: rgba(31,44,41,.10); stroke-width: 1; }
.radar__area{
  fill: var(--rc-fill); stroke: var(--rc-line); stroke-width: 2; stroke-linejoin: round;
  filter: drop-shadow(0 6px 14px var(--rc-glow));
}
.radar__dot{ fill: #fff; stroke: var(--rc-line); stroke-width: 2; transition: r .25s cubic-bezier(.34,1.56,.64,1); }
.radar__lab{ font-size: 11.5px; fill: var(--ink-soft); letter-spacing: .08em; text-anchor: middle; dominant-baseline: middle; }
.radar__val{ font-family: var(--f-mono); font-weight: 700; fill: var(--ink); }
.radar__lab.is-hot{ fill: var(--ink); font-weight: 700; }
.radar__dot.is-hot{ r: 6; }
/* 色：バットン＝黄緑／アモ＝ティール */
.radar{ --rc-fill: rgba(206,226,77,.38); --rc-line: #8FA52A; --rc-glow: rgba(206,226,77,.45); }
.dex--amo .radar{ --rc-fill: rgba(24,86,79,.20); --rc-line: #18564F; --rc-glow: rgba(24,86,79,.28); }

/* 目盛りは内側から順に描かれる */
.js .radar .radar__ring, .js .radar .radar__axis{ stroke-dasharray: 1; stroke-dashoffset: 1; }
.radar.is-live .radar__ring,
.radar.is-live .radar__axis{ animation: m2Draw .9s cubic-bezier(.2,.8,.2,1) calc(var(--d, 0) * 80ms) forwards; }
@keyframes m2Draw{ to{ stroke-dashoffset: 0; } }
.js .radar .radar__lab{ opacity: 0; transform: translateY(4px); transition: opacity .6s ease, transform .6s ease; transition-delay: calc(.35s + var(--d, 0) * 90ms); }
.radar.is-live .radar__lab{ opacity: 1; transform: none; }
/* 見終わった後：ゆっくり呼吸し、走査線がまわる（図鑑のスキャナー） */
.radar__shape{ transform-origin: 0 0; }
.radar.is-idle .radar__shape{ animation: m2Breath 4.8s ease-in-out infinite; }
@keyframes m2Breath{ 0%,100%{ transform: scale(1); } 50%{ transform: scale(1.025); } }
.radar__scan{ opacity: 0; transform-origin: 0 0; }
.radar.is-idle .radar__scan{ opacity: 1; animation: m2Scan 7s linear infinite; }
@keyframes m2Scan{ to{ transform: rotate(360deg); } }

/* バー：弾んで伸び、端が光り、光が一度だけ走る */
.js .stats__bar::before{ transition: none; transform: scaleX(0); }
.js .stats__bar.show::before{
  background:
    linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent) no-repeat -60% 0 / 45% 100%,
    linear-gradient(90deg, var(--batton-2), var(--batton));
  animation:
    m2Fill 1.15s cubic-bezier(.22,1.25,.36,1) forwards,
    m2Shine 1.3s ease-in-out .95s forwards;
}
.js .dex--amo .stats__bar.show::before{
  background:
    linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent) no-repeat -60% 0 / 45% 100%,
    linear-gradient(90deg, var(--amo-2), var(--amo));
}
@keyframes m2Fill{ 0%{ transform: scaleX(0); } 70%{ transform: scaleX(1.035); } 100%{ transform: scaleX(1); } }
@keyframes m2Shine{ to{ background-position: 170% 0, 0 0; } }
.stats__bar::after{
  content: ''; position: absolute; top: 50%;
  left: calc(var(--v) - 8px);
  width: 8px; height: 8px; margin-top: -4px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 0 2px var(--batton), 0 0 12px 2px var(--batton-glow);
  opacity: 0; transform: scale(0);
}
.dex--amo .stats__bar::after{ box-shadow: 0 0 0 2px var(--amo), 0 0 12px 2px var(--amo-glow); }
.stats__bar.show::after{ animation: m2Head .5s cubic-bezier(.34,1.56,.64,1) .85s forwards; }
.stats li.is-max .stats__bar.show::after{ animation: m2Head .5s cubic-bezier(.34,1.56,.64,1) .85s forwards, m2MaxPulse 2.2s ease-in-out 1.6s infinite; }
@keyframes m2Head{ to{ opacity: 1; transform: scale(1); } }
@keyframes m2MaxPulse{ 0%,100%{ transform: scale(1); } 50%{ transform: scale(1.45); } }
.stats__num.pop{ animation: m2Pop .45s cubic-bezier(.34,1.56,.64,1); display: inline-block; }
@keyframes m2Pop{ 0%{ transform: scale(1.5); color: var(--batton-text); } 100%{ transform: scale(1); } }
.dex--amo .stats__num.pop{ animation-name: m2PopAmo; }
@keyframes m2PopAmo{ 0%{ transform: scale(1.5); color: var(--amo); } 100%{ transform: scale(1); } }
.stats li{ transition: background .25s; border-radius: 8px; margin: 0 -8px; padding: 3px 8px; }
.stats li.is-hot{ background: rgba(31,44,41,.045); }
.stats li.is-hot .stats__label{ color: var(--ink); font-weight: 700; }

/* =========================================================
   3 SPECIAL
   ========================================================= */
.profile__skill{ position: relative; isolation: isolate; }
.js .profile__skill{ opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .8s cubic-bezier(.2,.8,.2,1); }
.js .profile__skill.is-live{ opacity: 1; transform: none; }
/* 縁を光が一周 */
.profile__skill::before{
  content: ''; position: absolute; inset: -1px; border-radius: 13px; padding: 1.5px;
  background: conic-gradient(from var(--ang), transparent 0 68%, var(--batton) 84%, #fff 90%, transparent 96%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; pointer-events: none;
}
.dex--amo .profile__skill::before{ background: conic-gradient(from var(--ang), transparent 0 68%, #5C9F8E 84%, #fff 90%, transparent 96%); }
.profile__skill.is-live::before{ animation: m2Trace 2.4s cubic-bezier(.45,.05,.3,1) .25s forwards; }
@keyframes m2Trace{ 0%{ --ang: 0deg; opacity: 1; } 88%{ opacity: 1; } 100%{ --ang: 360deg; opacity: 0; } }
/* 触れると光がなでる */
.profile__skill::after{
  content: ''; position: absolute; inset: 0; border-radius: 12px; pointer-events: none;
  background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%) no-repeat -120% 0 / 60% 100%;
  z-index: 1;
}
@media (hover: hover){
  .profile__skill:hover::after{ transition: background-position .9s ease; background-position: 220% 0; }
}
/* 名前が一文字ずつ */
.profile__skill .sk-ch{ display: inline-block; opacity: 0; transform: translateY(.6em); }
.profile__skill.is-live .sk-ch{ animation: m2Sk .55s cubic-bezier(.34,1.56,.64,1) calc(.55s + var(--i) * 45ms) forwards; }
@keyframes m2Sk{ to{ opacity: 1; transform: none; } }
.js .profile__skill > span:last-child{ opacity: 0; transition: opacity .8s ease 1.1s; }
.js .profile__skill.is-live > span:last-child{ opacity: 1; }

/* バットン：雷が落ちて光る → ときどき瞬く */
/* 雷アイコン（2026-09-30 作り直し）：厚みのある稲妻＋白い光の筋＋放電＋火花
   ・落ちてくる：縦に伸びた残像で上から突き刺さる → 着地で一瞬まっ白に光る
   ・待機中：光がゆっくり呼吸、火花がまたたき、ときどき放電がバチッと走る
   ・触れると：放電が連続で走り、本体が小刻みに震える */
.profile__skill-icon--bolt{ width: 44px; height: 44px; overflow: visible; filter: drop-shadow(0 3px 8px rgba(143,165,42,.45)); }
.profile__skill-icon--bolt .bolt-body{ transform-box: view-box; transform-origin: 20px 22px; }
.profile__skill-icon--bolt .bolt-glow{ transform-box: fill-box; transform-origin: center; }
.profile__skill-icon--bolt .bolt-arcs path{ stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; }
.profile__skill-icon--bolt .bolt-sparks path{ transform-box: fill-box; transform-origin: center; }

.js #batton .profile__skill-icon--bolt .bolt-body{ opacity: 0; }
.js #batton .profile__skill-icon--bolt .bolt-glow{ opacity: 0; }
.js #batton .profile__skill-icon--bolt .bolt-sparks path{ opacity: 0; }

#batton .profile__skill.is-live .bolt-body{
  animation: m2BoltStrike .6s cubic-bezier(.15,.9,.25,1.2) .3s both, m2BoltIdle 5.5s ease-in-out 1.8s infinite;
}
#batton .profile__skill.is-live .bolt-glow{
  animation: m2GlowBurst .8s ease-out .55s both, m2GlowBreath 3.2s ease-in-out 1.4s infinite;
}
#batton .profile__skill.is-live .bolt-arcs path{
  animation: m2Arc .42s steps(3, end) calc(.62s + var(--a, 0) * 60ms) 2, m2ArcIdle 5.5s linear calc(1.8s + var(--a, 0) * 40ms) infinite;
}
#batton .profile__skill.is-live .bolt-sparks path{
  animation: m2Twinkle 2.4s ease-in-out calc(.9s + var(--a, 0) * 500ms) infinite;
}
.bolt-arcs path:nth-child(1), .bolt-sparks path:nth-child(1){ --a: 0; }
.bolt-arcs path:nth-child(2), .bolt-sparks path:nth-child(2){ --a: 1; }
.bolt-arcs path:nth-child(3), .bolt-sparks path:nth-child(3){ --a: 2; }
.bolt-arcs path:nth-child(4){ --a: 3; }
@media (hover: hover){
  #batton .profile__skill.is-live:hover .bolt-body{ animation: m2BoltBuzz .12s linear infinite; }
  #batton .profile__skill.is-live:hover .bolt-arcs path{ animation: m2Arc .36s steps(3, end) calc(var(--a, 0) * 90ms) infinite; }
}
@keyframes m2BoltStrike{
  0%  { opacity: 0; transform: translateY(-34px) scale(.7, 1.9); filter: brightness(3) blur(1.5px); }
  60% { opacity: 1; transform: translateY(2px) scale(1.15, .86); filter: brightness(3.2) blur(0); }
  78% { transform: translateY(-1px) scale(.96, 1.05); filter: brightness(1.6); }
  100%{ opacity: 1; transform: none; filter: brightness(1); }
}
@keyframes m2BoltIdle{
  0%, 84%, 100%{ transform: none; filter: brightness(1); }
  86%{ transform: scale(1.1) rotate(-3deg); filter: brightness(1.9); }
  88%{ transform: scale(1.01); filter: brightness(1.1); }
  90%{ transform: scale(1.07) rotate(2deg); filter: brightness(1.7); }
}
@keyframes m2BoltBuzz{
  0%  { transform: translate(0,0); filter: brightness(1.25); }
  25% { transform: translate(-.6px,.4px); }
  50% { transform: translate(.5px,-.5px); filter: brightness(1.6); }
  75% { transform: translate(-.4px,-.3px); }
  100%{ transform: translate(0,0); filter: brightness(1.25); }
}
@keyframes m2GlowBurst{
  0%  { opacity: 0; transform: scale(.3); }
  30% { opacity: 1; transform: scale(1.5); }
  100%{ opacity: .7; transform: scale(1); }
}
@keyframes m2GlowBreath{ 0%,100%{ opacity: .6; transform: scale(.95); } 50%{ opacity: 1; transform: scale(1.08); } }
@keyframes m2Arc{
  0%  { opacity: 1; stroke-dashoffset: 1; }
  50% { opacity: 1; stroke-dashoffset: 0; }
  100%{ opacity: 0; stroke-dashoffset: -1; }
}
@keyframes m2ArcIdle{
  0%, 85%, 100%{ opacity: 0; stroke-dashoffset: 1; }
  87%{ opacity: 1; stroke-dashoffset: 0; }
  89%{ opacity: 0; stroke-dashoffset: -1; }
  90%{ opacity: 1; stroke-dashoffset: .3; }
  92%{ opacity: 0; stroke-dashoffset: -1; }
}
@keyframes m2Twinkle{
  0%, 100%{ opacity: 0; transform: scale(.3) rotate(0deg); }
  45%     { opacity: 1; transform: scale(1.15) rotate(45deg); }
  60%     { opacity: .8; transform: scale(.9) rotate(60deg); }
}
#batton .profile__skill.is-live{ animation: m2Flash .9s ease-out .5s; }
@keyframes m2Flash{
  0%  { box-shadow: 0 0 0 0 rgba(206,226,77,0); }
  25% { box-shadow: 0 0 0 7px rgba(206,226,77,.35), 0 0 30px rgba(206,226,77,.35); }
  100%{ box-shadow: 0 0 0 0 rgba(206,226,77,0); }
}
/* アモ：若葉が舞い降りて、そよぐ */
/* 若葉アイコン（2026-09-30 作り直し）：左右で色の違う立体の葉＋茎＋葉脈＋光の筋＋風の筋＋浮かぶ粒
   ・登場：くるくる舞い降りて着地（葉が裏返るように横につぶれる）
   ・待機中：茎を支点にそよぐ、粒がふわっと浮かんで消える、6秒に1回そよ風が吹いて葉がひるがえる
   ・触れると：風が吹き続けて葉が大きく揺れる */
.profile__skill-icon--leaf{ width: 44px; height: 44px; overflow: visible; filter: drop-shadow(0 3px 8px rgba(24,86,79,.35)); }
#amo .profile__skill-icon--leaf{ animation: none; opacity: 1; }
.profile__skill-icon--leaf .leaf-body{ transform-box: view-box; transform-origin: 20px 36px; }
.profile__skill-icon--leaf .leaf-glow{ transform-box: fill-box; transform-origin: center; }
.profile__skill-icon--leaf .leaf-wind path{ stroke-dasharray: .45 1; stroke-dashoffset: .45; opacity: 0; }
.profile__skill-icon--leaf .leaf-motes circle{ transform-box: fill-box; transform-origin: center; }
.leaf-wind path:nth-child(1), .leaf-motes circle:nth-child(1){ --a: 0; }
.leaf-wind path:nth-child(2), .leaf-motes circle:nth-child(2){ --a: 1; }
.leaf-wind path:nth-child(3), .leaf-motes circle:nth-child(3){ --a: 2; }

.js #amo .leaf-body, .js #amo .leaf-glow, .js #amo .leaf-motes circle{ opacity: 0; }
#amo .profile__skill.is-live .leaf-body{
  animation: m2LeafFall 1.6s cubic-bezier(.3,.7,.3,1) .25s both, m2LeafIdle 6s ease-in-out 1.9s infinite;
}
#amo .profile__skill.is-live .leaf-glow{ animation: m2LeafGlowIn 1s ease-out 1.2s both, m2GlowBreath 4s ease-in-out 2.2s infinite; }
#amo .profile__skill.is-live .leaf-wind path{
  animation: m2Wind 1.1s cubic-bezier(.4,0,.2,1) calc(1.1s + var(--a) * 120ms) 1 both, m2WindIdle 6s linear calc(1.9s + var(--a) * 90ms) infinite;
}
#amo .profile__skill.is-live .leaf-motes circle{ animation: m2Mote 3.6s ease-in-out calc(1.4s + var(--a) * 1.1s) infinite; }
@media (hover: hover){
  #amo .profile__skill.is-live:hover .leaf-body{ animation: m2LeafGust 1.4s ease-in-out infinite; }
  #amo .profile__skill.is-live:hover .leaf-wind path{ animation: m2Wind 1.1s cubic-bezier(.4,0,.2,1) calc(var(--a) * 200ms) infinite; }
}
@keyframes m2LeafFall{
  0%  { opacity: 0; transform: translate(-16px,-36px) rotate(-50deg) scaleX(1); }
  25% { opacity: 1; transform: translate(9px,-24px) rotate(28deg) scaleX(-.35); }
  50% { transform: translate(-7px,-11px) rotate(-18deg) scaleX(.6); }
  75% { transform: translate(3px,-3px) rotate(8deg) scaleX(1); }
  100%{ opacity: 1; transform: none; }
}
@keyframes m2LeafIdle{
  0%, 100%{ transform: rotate(-5deg); }
  40%     { transform: rotate(5deg); }
  /* そよ風：一瞬ひるがえって戻る */
  78%     { transform: rotate(-3deg) scaleX(1); }
  84%     { transform: rotate(14deg) scaleX(.55); }
  90%     { transform: rotate(-8deg) scaleX(1); }
}
@keyframes m2LeafGust{
  0%, 100%{ transform: rotate(-9deg) scaleX(1); }
  30%     { transform: rotate(16deg) scaleX(.6); }
  60%     { transform: rotate(-4deg) scaleX(1); }
}
@keyframes m2LeafGlowIn{ from{ opacity: 0; transform: scale(.4); } to{ opacity: .8; transform: scale(1); } }
@keyframes m2Wind{
  0%  { opacity: 0; stroke-dashoffset: .45; }
  20% { opacity: 1; }
  100%{ opacity: 0; stroke-dashoffset: -1; }
}
@keyframes m2WindIdle{
  0%, 74%, 100%{ opacity: 0; stroke-dashoffset: .45; }
  78%          { opacity: 1; }
  92%          { opacity: 0; stroke-dashoffset: -1; }
}
@keyframes m2Mote{
  0%  { opacity: 0; transform: translateY(4px) scale(.4); }
  30% { opacity: .95; transform: translateY(0) scale(1); }
  100%{ opacity: 0; transform: translateY(-10px) scale(.6); }
}
/* アモの SPECIAL もティールでそろえる */
#amo .profile__skill{
  background: linear-gradient(135deg, rgba(92,159,142,.14), rgba(92,159,142,.03));
  border-color: rgba(24,86,79,.28);
}
.js #amo .profile__skill-icon:not(.profile__skill-icon--leaf){ animation: none; opacity: 0; }
#amo .profile__skill.is-live .profile__skill-icon:not(.profile__skill-icon--leaf){
  animation: m2Leaf 1.5s cubic-bezier(.3,.7,.3,1) .25s both, m2Sway 4.4s ease-in-out 1.8s infinite;
}
@keyframes m2Leaf{
  0%  { opacity: 0; transform: translate(-16px,-34px) rotate(-45deg); }
  35% { opacity: 1; transform: translate(10px,-16px) rotate(24deg); }
  65% { transform: translate(-5px,-5px) rotate(-12deg); }
  100%{ opacity: 1; transform: none; }
}
@keyframes m2Sway{ 0%,100%{ transform: rotate(-6deg); } 50%{ transform: translateY(-2px) rotate(6deg); } }

/* =========================================================
   🔴 動きを減らす設定
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  .hero__title .ch-in{ animation: none !important; background-position: 0 0 !important; opacity: 1 !important; transform: none !important; filter: none !important; }
  .hero__title.is-split .ch{ translate: none !important; }
  .js .hero__title-l1, .js .hero__title-l2{ transform: none !important; opacity: 1 !important; }
  .js .hero__title-spark path{ stroke-dashoffset: 0 !important; animation: none !important; }
  .hero__title-spark .spark-ring{ display: none; }
  .js .hero__lead{ animation: none !important; opacity: 1 !important; filter: none !important; transform: none !important; }
  .js .hero__lead b{ animation: none !important; background-size: 100% 34% !important; }
  .js .hero__eyebrow{ animation: none !important; opacity: 1 !important; letter-spacing: .35em !important; filter: none !important; }
  .js .radar .radar__ring, .js .radar .radar__axis{ stroke-dashoffset: 0 !important; animation: none !important; }
  .js .radar .radar__lab{ opacity: 1 !important; transform: none !important; }
  .radar__shape, .radar__scan{ animation: none !important; }
  .radar__scan{ display: none; }
  .js .stats__bar::before, .js .stats__bar.show::before{ animation: none !important; transform: scaleX(1) !important; }
  .stats__bar::after{ display: none; }
  .js .profile__skill{ opacity: 1 !important; transform: none !important; animation: none !important; }
  .profile__skill::before{ display: none; }
  .profile__skill .sk-ch{ opacity: 1 !important; transform: none !important; animation: none !important; }
  .js .profile__skill > span:last-child{ opacity: 1 !important; }
  .js .profile__skill-icon{ opacity: 1 !important; animation: none !important; transform: none !important; }
  .js .profile__skill-icon--bolt .bolt-body,
  .js .profile__skill-icon--bolt .bolt-glow,
  .js .profile__skill-icon--bolt .bolt-sparks path{ opacity: 1 !important; animation: none !important; transform: none !important; filter: none !important; }
  .profile__skill-icon--bolt .bolt-arcs{ display: none; }
  .js .profile__skill-icon--leaf .leaf-body,
  .js .profile__skill-icon--leaf .leaf-glow,
  .js .profile__skill-icon--leaf .leaf-motes circle{ opacity: 1 !important; animation: none !important; transform: none !important; }
  .profile__skill-icon--leaf .leaf-wind{ display: none; }
}

#batton .profile__skill-icon--bolt{ animation: none; }

/* バットンの SPECIAL は雷の色（黄緑）でそろえる（元はオレンジ系の枠だった） */
#batton .profile__skill{
  background: linear-gradient(135deg, rgba(206,226,77,.16), rgba(206,226,77,.03));
  border-color: rgba(143,165,42,.38);
}

/* =========================================================
   HP（aboutthefit.fit/characters）の中に iframe で埋め込んだとき（?embed=1）
   ・図鑑自身のヘッダー（ロゴ・Studio →）は HP のヘッダーと二重になるので隠す
   ・最後の「About The Fit · Studio へ」も、もう HP の中にいるので隠す
   ========================================================= */
.is-embed .hd{ display: none; }
.is-embed .story__cta{ display: none; }
.is-embed .hero{ padding-top: 40px; }