@charset "UTF-8";

/* =========================================================
   ガイドキャラクター「ルミ」（雲のキャラクター）
   - coaching-service-lp の assets/guide-mokumoku.svg / js/lumi.js を移植
   - [data-rumi="ポーズ名"] の要素に js/main.js がルミを描く
   - ポーズ：idle / wave / run / worry / think / look / question / idea / point / happy / cheer
   - .is-smile で一時的にニコッと笑う、data-face="left" で左向き、data-look="up" で見上げる
   ========================================================= */
:root {
  --lumi-body: #6DAA8F;
  --lumi-limb: #4F8C73;
  --lumi-head: #F4F8F3;
  --lumi-ink: #1E4A3C;
  --lumi-blush: #EBA68A;
  --lumi-accent: #E8A33D;
  --lumi-main: #2F6B57;
}

.rumi svg { display: block; width: 100%; overflow: visible; }

/* ---------- からだ（座標は素材の 220×230） ---------- */
.rumi .r-head { fill: var(--lumi-head); stroke: var(--lumi-ink); stroke-width: 4; stroke-linejoin: round; }
.rumi .r-body { fill: var(--lumi-body); }
.rumi .r-arm-line { fill: none; stroke: var(--lumi-limb); stroke-width: 14; stroke-linecap: round; }
.rumi .r-hand { fill: var(--lumi-limb); }
.rumi .r-ink { fill: var(--lumi-ink); }
.rumi .r-line { fill: none; stroke: var(--lumi-ink); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.rumi .r-blush { fill: var(--lumi-blush); opacity: .35; transition: opacity .3s; }
.rumi .r-star { fill: var(--lumi-accent); }
.rumi .r-glow { fill: var(--lumi-accent); opacity: .22; }
.rumi .r-ray { fill: none; stroke: var(--lumi-accent); stroke-width: 5; stroke-linecap: round; }
.rumi .r-shadow { fill: rgba(30, 74, 60, .13); }
.rumi .r-prop { opacity: 0; transition: opacity .3s; }

/* 表情のパーツは、ポーズで出し分ける（初期値：ふつうの目＋にっこり） */
.rumi .r-eyes-happy,
.rumi .r-brows,
.rumi .r-mouth { opacity: 0; transition: opacity .2s; }
.rumi .m-smile { opacity: 1; }

/* 向きと視線 */
.rumi .r-flip { transform-box: view-box; transform-origin: 110px 0; transition: transform .35s cubic-bezier(.3, 1.3, .5, 1); }
.rumi[data-face="left"] .r-flip { transform: scaleX(-1); }
.rumi .r-look { transform: translate(var(--lx, 0px), var(--ly, 0px)); transition: transform .3s; }

.rumi .r-arm { transform-box: view-box; transition: transform .45s cubic-bezier(.3, 1.4, .5, 1); }
.rumi .r-arm--l { transform-origin: 52px 141px; }
.rumi .r-arm--r { transform-origin: 168px 141px; }
.rumi .r-glow { transform-box: fill-box; transform-origin: center; animation: lumi-glow 2.4s ease-in-out infinite; }
.rumi .r-eyes { transform-box: fill-box; transform-origin: center; animation: lumi-blink 5s infinite; }
.rumi .p-sweat path { fill: #fff; stroke: var(--lumi-ink); stroke-width: 3; }
.rumi .p-loupe circle { fill: rgba(255, 255, 255, .7); stroke: var(--lumi-ink); stroke-width: 5; }
.rumi .p-q text { fill: var(--lumi-main); }
.rumi .p-spark .s1 { fill: var(--lumi-accent); }
.rumi .p-spark .s2 { fill: var(--lumi-main); }

/* 濃い緑の上に置くときは、からだを白でふちどり、腕を明るく */
.rumi--outline .r-body { stroke: #fff; stroke-width: 5; }
.rumi--outline .r-arm-line { stroke: #8CC2A9; }
.rumi--outline .r-hand { fill: #8CC2A9; }
.rumi--outline .r-shadow { fill: rgba(0, 0, 0, .15); }
.rumi--outline .p-q text,
.rumi--outline .p-spark .s2 { fill: #fff; }

@keyframes lumi-glow { 50% { transform: scale(1.35); opacity: .1; } }
@keyframes lumi-blink { 0%, 94%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.1); } }
@keyframes lumi-wave { 0%, 100% { transform: rotate(-95deg); } 50% { transform: rotate(-65deg); } }

/* ---------- ポーズ（腕） ---------- */
.rumi[data-pose="wave"] .r-arm--r { transform: rotate(-95deg); animation: lumi-wave 1.2s ease-in-out infinite; }
.rumi[data-pose="cheer"] .r-arm--l { transform: rotate(85deg); }
.rumi[data-pose="cheer"] .r-arm--r { transform: rotate(-85deg); }
.rumi[data-pose="point"] .r-arm--r { transform: rotate(-65deg); }
.rumi[data-pose="think"] .r-arm--r { transform: rotate(95deg); }
.rumi[data-pose="look"] .r-arm--r { transform: rotate(-80deg); }
.rumi[data-pose="question"] .r-arm--r { transform: rotate(-100deg); }
.rumi[data-pose="idea"] .r-arm--r { transform: rotate(-90deg); }
.rumi[data-pose="happy"] .r-arm--l { transform: rotate(35deg); }
.rumi[data-pose="happy"] .r-arm--r { transform: rotate(-35deg); }
.rumi[data-pose="run"] .r-arm--l { transform: rotate(40deg); }
.rumi[data-pose="run"] .r-arm--r { transform: rotate(-50deg); }
.rumi[data-pose="worry"] .r-arm--l { transform: rotate(-18deg); }
.rumi[data-pose="worry"] .r-arm--r { transform: rotate(18deg); }
/* 風船を持つルミは、左手を上げたまま */
.rumi.rumi--balloon .r-arm--l { transform: rotate(85deg); }

/* ---------- ポーズ（小物） ---------- */
.rumi[data-pose="think"] .p-think,
.rumi[data-pose="worry"] .p-sweat,
.rumi[data-pose="look"] .p-loupe,
.rumi[data-pose="question"] .p-q,
.rumi[data-pose="cheer"] .p-spark,
.rumi[data-pose="happy"] .p-spark,
.rumi[data-pose="idea"] .p-idea,
.rumi[data-pose="point"] .p-spark { opacity: 1; }
.rumi[data-pose="idea"] .r-glow { opacity: .5; }

/* ---------- ポーズ（表情） ---------- */
/* ニコニコ：目を細めて、ほっぺを赤く */
.rumi:is([data-pose="happy"], [data-pose="cheer"], .is-smile) .r-eyes { opacity: 0; }
.rumi:is([data-pose="happy"], [data-pose="cheer"], .is-smile) .r-eyes-happy { opacity: 1; }
.rumi:is([data-pose="happy"], [data-pose="cheer"], .is-smile) .r-blush { opacity: .7; }
/* 口をあけて笑う */
.rumi:is([data-pose="happy"], [data-pose="cheer"], [data-pose="wave"], [data-pose="run"], [data-pose="idea"], .is-smile) .m-smile { opacity: 0; }
.rumi:is([data-pose="happy"], [data-pose="cheer"], [data-pose="wave"], [data-pose="run"], [data-pose="idea"], .is-smile) .m-open { opacity: 1; }
/* 困り顔：眉を下げて、口をもにょっと */
.rumi[data-pose="worry"] .r-brows,
.rumi[data-pose="worry"] .m-worry { opacity: 1; }
.rumi[data-pose="worry"] .m-smile { opacity: 0; }
/* ぽかん：首をかしげるとき */
.rumi[data-pose="question"] .m-smile { opacity: 0; }
.rumi[data-pose="question"] .m-o { opacity: 1; }
/* 視線：ポーズで黒目を動かす */
.rumi[data-pose="look"] { --lx: 4px; }
.rumi[data-pose="point"] { --lx: 3px; }
.rumi[data-pose="think"] { --lx: 3px; --ly: -4px; }
.rumi[data-pose="question"] { --lx: 2px; --ly: -3px; }
.rumi[data-pose="worry"] { --ly: 3px; }
.rumi.rumi[data-look="up"] { --lx: 0px; --ly: -5px; }

/* 表情が切り替わる瞬間に、ぷにっと弾む */
.rumi .r-pop { transform-box: view-box; transform-origin: 110px 200px; }
.rumi.is-pop .r-pop { animation: lumi-pop .45s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes lumi-pop { 0% { transform: scale(1); } 35% { transform: scale(1.08, .92); } 70% { transform: scale(.97, 1.04); } 100% { transform: scale(1); } }

/* ---------- 風船（ルミが左手で持つ） ---------- */
.rumi .m-balloon { transform-box: fill-box; transform-origin: 50% 100%; animation: sway 3s ease-in-out infinite; }
.rumi .m-balloon .b-string { fill: none; stroke: var(--lumi-ink); stroke-width: 1.6; opacity: .85; }
.rumi .m-balloon .b-body { fill: var(--lumi-accent); }
.rumi .m-balloon .b-shine { fill: #fff; opacity: .6; }
.rumi--outline .m-balloon .b-string { stroke: #fff; }