/* muchino-chi.com ファーストビュー差し替え（トップページのみ）。既存のReactアプリには手を入れず、
   元のファーストビューの中身を見えなくして、同じ位置に「知の円」を重ねる。 */
html.fv-on #root main > section:first-of-type > *{visibility:hidden!important}
/* 2026-10-06 会社概要などへ遷移する瞬間、fv-on が外れてReact側の旧ファーストビュー（pt-52 の section）が一瞬見えていた → 旧FVの中身は常に隠す */
#root main > section.pt-52 > *{visibility:hidden!important}
html.fv-intro::after{content:"";position:fixed;inset:0;background:#f5f3ee;z-index:2147483646}

#fv-hero{position:absolute;left:0;right:0;top:0;height:100vh;z-index:30;overflow:hidden;display:none;background:#f5f3ee}
html.fv-on #fv-hero{display:block}
#fv-hero canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
#fv-hero .fv-copy{position:absolute;left:8.5vw;top:50%;transform:translateY(-50%);max-width:38vw;font-family:'Noto Sans JP','Hiragino Kaku Gothic ProN',sans-serif}
#fv-hero .fv-eyebrow{margin:0 0 24px;font-size:13px;letter-spacing:.2em;color:#3e7c80;font-weight:700}
#fv-hero .fv-title{margin:0;font-weight:800;font-size:clamp(40px,4.4vw,84px);line-height:1.2;letter-spacing:.06em;color:#1f2a44;white-space:nowrap}
#fv-hero .fv-title span{display:inline-block;opacity:0;transform:translateY(.55em) rotate(4deg);filter:blur(6px);transition:opacity .8s ease,transform 1s cubic-bezier(.2,.9,.2,1),filter .8s ease;transition-delay:calc(var(--i) * .08s + .2s)}
#fv-hero .fv-title span.k{color:#3e7c80}
#fv-hero .fv-title{text-shadow:0 0 22px #f5f3ee,0 0 10px #f5f3ee,0 0 3px #f5f3ee}
#fv-hero.on .fv-title span{opacity:1;transform:none;filter:none}
#fv-hero .fv-lead{margin:28px 0 0;font-size:clamp(13px,1vw,16px);line-height:2.1;letter-spacing:.04em;color:#5d6676}
#fv-hero .fv-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
#fv-hero .fv-cta > *{visibility:visible!important}






/* タイピング（白背景・黒文字） */
#fv-intro{position:fixed;inset:0;z-index:2147483647;display:grid;place-items:center;background:#f5f3ee;transition:background-color .45s ease;font-family:'Noto Sans JP','Hiragino Kaku Gothic ProN',sans-serif}
#fv-intro.wiping{background-color:rgba(245,243,238,0);pointer-events:none}
#fv-intro canvas{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
#fv-intro .fv-line-wrap{position:relative}
#fv-intro .fv-line{font-size:clamp(18px,2.5vw,34px);font-weight:400;letter-spacing:.09em;line-height:1.8;white-space:nowrap;width:calc(10 * 1.09em + .25em);color:#111;clip-path:inset(0 0 0 0);transition:clip-path .75s cubic-bezier(.7,0,.3,1)}
/* 2026-10-06 変換後は8文字幅に縮めて中央へ（打鍵中は10文字幅で「る」が切れない）。2026-10-08 幅はアニメさせない＝変換の瞬間に中央（0.4秒かけて縮むと右へ滑って見えた） */
#fv-intro .fv-line.fv-fit{width:calc(8 * 1.09em + .25em)}
#fv-intro.wiping .fv-line{clip-path:inset(0 0 0 100%)}
#fv-intro .fv-composing{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em}
#fv-intro .fv-selected{background:#111;color:#f5f3ee;text-decoration:none}
#fv-intro .fv-caret{display:inline-block;width:2px;height:1.04em;background:#111;vertical-align:-.12em;margin-left:.09em;animation:fv-blink 1s steps(1) infinite}
#fv-intro .fv-typing .fv-caret{animation:none}
#fv-intro .fv-hint{position:absolute;top:calc(100% + 18px);left:0;font-size:10px;letter-spacing:.17em;color:#9a9a9a;opacity:0;transition:opacity .2s}
#fv-intro .fv-hint.visible{opacity:1}
#fv-intro.wiping .fv-hint,#fv-intro.wiping .fv-controls{opacity:0}
#fv-intro .fv-controls{position:absolute;right:4.2vw;bottom:24px;display:flex;gap:22px;transition:opacity .3s}
#fv-intro .fv-controls button{border:0;background:none;padding:8px 0;font:inherit;font-size:12px;letter-spacing:.08em;color:#777;cursor:pointer}
#fv-intro .fv-controls button:hover{color:#111}
@keyframes fv-blink{50%{opacity:0}}

/* スマホ：アニメーションを画面いっぱい（球はど真ん中）、文字とボタンはその下 */
@media (max-aspect-ratio:1/1){
  html.fv-on #root main > section:first-of-type{min-height:var(--fv-sec-h,100vh)!important}
  #fv-hero canvas{height:var(--fv-anim-h,100%);bottom:auto}
  /* 文字はアニメーションの左下 */
  #fv-hero .fv-copy{top:auto;bottom:calc(100% - var(--fv-anim-h,100%) + 36px);transform:none;left:6vw;right:6vw;max-width:none}
  #fv-hero .fv-title{text-shadow:0 0 18px #f5f3ee,0 0 8px #f5f3ee,0 0 2px #f5f3ee}
  #fv-hero .fv-title{font-size:clamp(34px,10vw,52px)}
  #fv-hero .fv-lead{margin-top:16px;font-size:13px;line-height:1.95}
  #fv-hero .fv-cta{margin-top:22px}
  #fv-intro .fv-line{font-size:5.6vw;letter-spacing:.05em;width:calc(10 * 1.05em + .25em)}
  #fv-intro .fv-line.fv-fit{width:calc(8 * 1.05em + .25em)}
}
@media (prefers-reduced-motion:reduce){#fv-hero *,#fv-intro *{transition:none!important;animation:none!important}}

/* 2026-10-05 秋山依頼: 変換中に出る「変換」ラベルを非表示 */
#fv-intro .fv-hint{display:none}

/* 2026-10-05 秋山依頼: アニメーションを中央・全面に。「知＝無知の拡大」は最後の一点の画面でだけ、点の下に中央揃えで出す */
#fv-hero .fv-copy{left:0;right:0;top:calc(50% + clamp(40px,6vh,72px));transform:none;max-width:none;text-align:center}
#fv-hero.on:not(.show-title) .fv-title span{opacity:0;transform:translateY(.55em) rotate(4deg);filter:blur(6px);transition-delay:0s}
@media (max-aspect-ratio:1/1){
  #fv-hero .fv-copy{top:calc(var(--fv-anim-h,100%) / 2 + 40px);bottom:auto;left:0;right:0}
}

/* 2026-10-05 PCもファーストビューを画面内に収める（高さは fv.js が --fv-sec-h に入れる） */
@media (min-aspect-ratio:1/1){
  html.fv-on #root main > section:first-of-type{min-height:0!important;height:var(--fv-sec-h,100vh)!important;overflow:hidden}
}

/* 2026-10-05 最後の一点の画面：ロゴの筆文字を左から筆で書くように出し、下に一文を明朝で1文字ずつ（.show-title の間だけ） */
#fv-hero .fv-sign{margin:0;display:flex;flex-direction:column;align-items:center;gap:clamp(14px,2vh,22px)}
#fv-hero .fv-brush{display:block;width:clamp(240px,30vw,500px);
  -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 40%,transparent 60%);mask-image:linear-gradient(90deg,#000 0%,#000 40%,transparent 60%);
  -webkit-mask-size:260% 100%;mask-size:260% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:100% 0;mask-position:100% 0;opacity:0;filter:blur(3px);
  transition:-webkit-mask-position 1.3s cubic-bezier(.55,.05,.25,1),mask-position 1.3s cubic-bezier(.55,.05,.25,1),opacity .3s,filter 1s ease .3s}
#fv-hero .fv-brush img{display:block;width:100%;height:auto;filter:drop-shadow(0 0 14px #f5f3ee) drop-shadow(0 0 6px #f5f3ee)}
#fv-hero.show-title .fv-brush{-webkit-mask-position:0 0;mask-position:0 0;opacity:1;filter:none}
#fv-hero .fv-tag{display:block;font-family:'Shippori Mincho','Hiragino Mincho ProN','Yu Mincho',serif;font-weight:500;font-size:clamp(13px,1.15vw,18px);letter-spacing:.14em;color:#1f2a44;text-shadow:0 0 12px #f5f3ee,0 0 4px #f5f3ee;white-space:nowrap}
#fv-hero .fv-tag span{display:inline-block;opacity:0;transform:translateY(.5em);filter:blur(4px);transition:opacity .5s ease,transform .7s cubic-bezier(.2,.9,.2,1),filter .5s ease;transition-delay:0s}
#fv-hero.show-title .fv-tag span{opacity:1;transform:none;filter:none;transition-delay:calc(1s + var(--i) * .045s)}
@media (prefers-reduced-motion:reduce){#fv-hero .fv-brush{-webkit-mask-image:none;mask-image:none;opacity:1;filter:none}#fv-hero .fv-tag span{opacity:1;transform:none;filter:none}}

/* 2026-10-05 v2 アニメのEDの締め：1文字ずつ筆で書く → 墨しぶき → 落款をドンと押す → 一文。.show-title が付くたびに頭から再生 */
#fv-hero .fv-brush{position:relative;width:clamp(260px,34vw,560px);aspect-ratio:1832/480;-webkit-mask-image:none;mask-image:none;opacity:1;filter:none;transition:none}
#fv-hero .fv-brush .ch{position:absolute;inset:0;clip-path:inset(-6% var(--r) -6% var(--l));opacity:0}
#fv-hero .fv-brush .ch img{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 0 16px #f5f3ee) drop-shadow(0 0 6px #f5f3ee);
  -webkit-mask-image:linear-gradient(118deg,#000 42%,transparent 58%);mask-image:linear-gradient(118deg,#000 42%,transparent 58%);
  -webkit-mask-size:320% 320%;mask-size:320% 320%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:100% 100%;mask-position:100% 100%}
#fv-hero.show-title .fv-brush .ch{animation:fv-ink calc(var(--du) + .35s) cubic-bezier(.2,.8,.2,1) var(--dl) both}
#fv-hero.show-title .fv-brush .ch img{animation:fv-stroke var(--du) cubic-bezier(.6,.05,.3,1) var(--dl) both}
@keyframes fv-stroke{from{-webkit-mask-position:100% 100%;mask-position:100% 100%}to{-webkit-mask-position:0 0;mask-position:0 0}}
@keyframes fv-ink{0%{opacity:0;transform:scale(1.14);filter:blur(7px)}25%{opacity:1}100%{opacity:1;transform:none;filter:none}}
/* 墨しぶき */
#fv-hero .fv-brush .drops{position:absolute;inset:0;pointer-events:none}
#fv-hero .fv-brush .drops i{position:absolute;width:calc(var(--s) * 2.2);height:calc(var(--s) * 2.2);margin:calc(var(--s) * -1.1) 0 0 calc(var(--s) * -1.1);border-radius:50%;background:#1f2a44;opacity:0}
#fv-hero.show-title .fv-brush .drops i{animation:fv-drop .5s cubic-bezier(.2,.9,.2,1.4) var(--d) both}
@keyframes fv-drop{0%{opacity:0;transform:scale(0)}60%{opacity:.85;transform:scale(1.35)}100%{opacity:.7;transform:scale(1)}}
/* 落款：上から叩きつけて、少し揺れて止まる。朱の輪が広がる */
#fv-hero .fv-seal{position:absolute;right:-19%;bottom:-4%;width:15%;height:auto;opacity:0;transform-origin:50% 50%;filter:drop-shadow(0 0 10px #f5f3ee)}
#fv-hero.show-title .fv-seal{animation:fv-stamp .5s cubic-bezier(.3,1.6,.5,1) 1.82s both}
@keyframes fv-stamp{0%{opacity:0;transform:scale(2.8) rotate(-16deg)}35%{opacity:1;transform:scale(.92) rotate(-5deg)}100%{opacity:1;transform:scale(1) rotate(-6deg)}}
#fv-hero .fv-brush::after{content:"";position:absolute;right:-19%;bottom:-4%;width:15%;aspect-ratio:1;border:2px solid #b8322a;border-radius:8px;opacity:0;pointer-events:none}
#fv-hero.show-title .fv-brush::after{animation:fv-ring .9s ease-out 1.9s forwards}
@keyframes fv-ring{0%{opacity:.7;transform:scale(1) rotate(-6deg)}100%{opacity:0;transform:scale(2.4) rotate(-6deg)}}
/* 押した瞬間の揺れ */
#fv-hero.show-title .fv-sign{animation:fv-shake .32s linear 1.9s}
@keyframes fv-shake{0%,100%{transform:none}20%{transform:translate(3px,-2px)}40%{transform:translate(-3px,2px)}60%{transform:translate(2px,1px)}80%{transform:translate(-1px,-1px)}}
/* 一文は押印のあと */
#fv-hero.show-title .fv-tag span{transition-delay:calc(2.15s + var(--i) * .04s)}
@media (prefers-reduced-motion:reduce){#fv-hero .fv-brush .ch,#fv-hero .fv-seal{opacity:1;animation:none!important}#fv-hero .fv-brush .ch img{-webkit-mask-image:none;mask-image:none;animation:none!important}#fv-hero .fv-seal{transform:rotate(-6deg)}#fv-hero .fv-brush .drops i{opacity:.7;animation:none!important}}