/* =========================================================
   motion.css — 2026-09-23 リッチ化（kotaro「手抜き感を消す・シャシャシャな動きと色」）
   構成は v0.6 のまま。動き=集計の線（正の字）・見出しの拭い・罫線の描画・順次表示。色=考え方の藍帯
   prefers-reduced-motion では全部止める
   ========================================================= */
:root{--indigo-2:#2F63B5;--night:#0F2747}

/* 読んだ位置の細線 */
.scrollbar{position:fixed;left:0;top:0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--indigo),var(--indigo-2));z-index:100;pointer-events:none}

/* ---------- FV ---------- */
.c-hero{position:relative;overflow:hidden;padding-bottom:40px}
.c-hero .container{position:relative;z-index:1}
.c-hero h1 .ln{display:block;position:relative;overflow:hidden;width:max-content;max-width:100%}
.c-hero h1 .ln>span{display:inline-block;transform:translateY(105%);transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.c-hero h1 .ln::after{content:"";position:absolute;inset:0;background:var(--indigo);transform:scaleX(0);transform-origin:0 50%}
.is-in .c-hero h1 .ln::after{animation:wipe .9s cubic-bezier(.7,0,.2,1) forwards}
.is-in .c-hero h1 .ln>span{transform:none}
.c-hero h1 .ln:nth-child(2)::after{animation-delay:.18s!important}
.c-hero h1 .ln:nth-child(2)>span{transition-delay:.62s}
.c-hero h1 .ln:nth-child(1)>span{transition-delay:.44s}
@keyframes wipe{0%{transform:scaleX(0);transform-origin:0 50%}48%{transform:scaleX(1);transform-origin:0 50%}52%{transform:scaleX(1);transform-origin:100% 50%}100%{transform:scaleX(0);transform-origin:100% 50%}}
.c-hero .lead{opacity:0;transform:translateY(12px);transition:opacity .7s ease .95s,transform .7s ease .95s}
.is-in .c-hero .lead{opacity:1;transform:none}

/* 集計の線（正の字の束）。JS が SVG を入れる */
.tally{position:absolute;right:24px;top:6px;width:300px;height:230px;z-index:0;pointer-events:none;opacity:.9}
@media (min-width:761px){.c-hero .lead{max-width:31em}}
.tally svg{width:100%;height:100%;overflow:visible}
.tally path{fill:none;stroke:var(--indigo);stroke-width:3;stroke-linecap:round;opacity:.22}
.tally path.hot{stroke:var(--amber);opacity:.75}
.tally path.mid{opacity:.45}
@media (max-width:760px){.c-hero .container{display:flex;flex-direction:column}.tally{order:3;position:relative;right:auto;top:auto;width:100%;height:auto;margin:22px 0 0}.tally svg{height:auto}}
.logo{white-space:nowrap}

/* ---------- 節の出方 ---------- */
main h2{position:relative;border-bottom-color:transparent!important}
main h2::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--line-strong);transform:scaleX(0);transform-origin:0 50%;transition:transform .9s cubic-bezier(.7,0,.2,1)}
main h2::before{content:"";position:absolute;left:0;bottom:-2px;height:2px;width:56px;background:var(--indigo);transform:scaleX(0);transform-origin:0 50%;transition:transform .6s cubic-bezier(.7,0,.2,1) .35s;z-index:1}
.rv.in h2::after,.rv.in h2::before{transform:scaleX(1)}
.rv .eyebrow{opacity:0;transform:translateX(-14px);transition:opacity .5s ease,transform .5s ease}
.rv.in .eyebrow{opacity:1;transform:none}
.rv .st{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
.rv.in .st{opacity:1;transform:none}

/* ---------- 考え方: 藍の帯 ---------- */
#philosophy{background:var(--night);color:#E8EEF7;margin-top:76px;padding:72px 0 76px!important;position:relative;overflow:hidden}
#philosophy::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 44px);pointer-events:none}
#philosophy .container{position:relative}
#philosophy .eyebrow{color:#9DB8E6}
#philosophy h2{color:#fff}
#philosophy h2::after{background:rgba(255,255,255,.25)}
#philosophy h2::before{background:var(--amber)}
#philosophy .mvv div{border-bottom-color:rgba(255,255,255,.14)}
#philosophy .mvv dt{color:#E3B866}
#philosophy .mvv dd{color:#fff;font-size:24px}
#philosophy .sec-lead{color:#C9D5E8}
#philosophy .btn-ghost{color:#fff;border-color:rgba(255,255,255,.6)}
#philosophy .btn-ghost:hover{background:rgba(255,255,255,.1)}
#philosophy + section{padding-top:76px}
@media (max-width:640px){#philosophy .mvv dd{font-size:19px}}

/* 事業の名前に小さな動き */
.biz-name{position:relative;display:inline-block}
.biz-name::after{content:"";position:absolute;left:0;bottom:-4px;height:2px;width:100%;background:var(--indigo-2);transform:scaleX(0);transform-origin:0 50%;transition:transform .8s cubic-bezier(.7,0,.2,1) .3s}
.rv.in .biz-name::after{transform:scaleX(1)}

/* 表とお知らせの行 */
.company-table tr,.news-list li{transition:background .2s}
.company-table tr:hover,.news-list li:hover{background:rgba(31,78,140,.04)}

/* ボタン: 矢印が走る */
.btn{position:relative;overflow:hidden;transition:background .2s,color .2s,border-color .2s}
.btn::after{content:"→";display:inline-block;margin-left:10px;transition:transform .25s}
.btn:hover::after{transform:translateX(4px)}


/* 代表の略歴（年表）。9/23 kotaro: 経歴を具体で見せる */
.rep-cv{margin:6px 0 30px}
.cv-h{font-family:var(--sans);font-size:11px;letter-spacing:.14em;color:var(--indigo);font-weight:700;margin:0 0 12px}
.cv{list-style:none;margin:0;padding:0;position:relative}
.cv::before{content:"";position:absolute;left:4.1em;top:10px;bottom:10px;width:2px;background:var(--line-strong);transform-origin:50% 0;transform:scaleY(0);transition:transform 1.2s cubic-bezier(.7,0,.2,1) .2s}
.rv.in .cv::before{transform:scaleY(1)}
.cv li{display:grid;grid-template-columns:3.4em 1fr;gap:28px;padding:10px 0;position:relative}
.cv li::before{content:"";position:absolute;left:calc(4.1em - 5px);top:17px;width:12px;height:12px;border-radius:50%;background:var(--paper);border:2.5px solid var(--indigo);box-sizing:border-box}
.cv .y{font-family:var(--sans);font-weight:800;font-size:15px;line-height:1.7;color:var(--indigo);font-variant-numeric:tabular-nums}
.cv .t{margin:0;font-family:var(--sans);font-weight:700;font-size:15px;line-height:1.7}
.cv .d{margin:4px 0 0;font-size:13.5px;color:var(--ink2);line-height:1.8;max-width:40em}
.cv-tools{margin:14px 0 0;font-family:var(--sans);font-size:13.5px;display:flex;gap:14px;flex-wrap:wrap;align-items:baseline}
.cv-tools span{font-size:11px;letter-spacing:.1em;color:var(--ink3);font-weight:700}
@media (max-width:640px){.cv li{grid-template-columns:3em 1fr;gap:22px}.cv::before{left:3.7em}.cv li::before{left:calc(3.7em - 5px)}}
@media (prefers-reduced-motion:reduce){.cv::before{transform:scaleY(1)!important;transition:none!important}}

@media (prefers-reduced-motion:reduce){
  .c-hero h1 .ln>span,.c-hero .lead,.rv .eyebrow,.rv .st{transform:none!important;opacity:1!important;transition:none!important}
  .c-hero h1 .ln::after{display:none}
  main h2::after,main h2::before,.biz-name::after{transform:scaleX(1)!important;transition:none!important}
  .scrollbar{display:none}
}