/* ===== 動き（anim.js が .rv を付け、画面に入ったら .in を付ける） ===== */
:root{--ez:cubic-bezier(.2,.7,.15,1)}
.js .rv{opacity:0;transform:translateY(34px);transition:opacity 1s var(--ez),transform 1.1s var(--ez);transition-delay:var(--d,0s)}
.js .rv.in{opacity:1;transform:none}

/* 縦書きの見出し：上から順に現れる */
.js .tate.rv{transform:none;clip-path:inset(0 0 100% 0);transition:clip-path 1.4s var(--ez),opacity .6s;transition-delay:var(--d,0s)}
.js .tate.rv.in{clip-path:inset(0 0 0 0)}
/* 縦の札 */
.js .label.rv{transform:translateY(-14px)}
/* うっすらした大きな英字：横から流れ込む */
.js .ghost.rv{transform:translateX(-80px);transition-duration:1.6s,1.8s}
.js .ghost.rv.in{transform:none}

/* 写真：幕が開く */
.js .wipe{clip-path:inset(0 100% 0 0);transition:clip-path 1.3s var(--ez);transition-delay:var(--d,0s)}
.js .wipe img{transform:scale(1.18);transition:transform 1.8s var(--ez);transition-delay:var(--d,0s)}
.js .wipe.in{clip-path:inset(0 0 0 0)}
.js .wipe.in img{transform:scale(1)}
.ph img,.strip img{transition:transform 1.2s var(--ez)}
.cat:hover .ph img,.svc-row:hover .ph img,.lead .ph:hover img,.strip div:hover img{transform:scale(1.06)!important}

/* トップの大きな文字：1行ずつせり上がる */
.hero h1 .ln{display:block;overflow:hidden}
.hero h1 .ln span{display:block;transform:translateY(105%);animation:up 1.2s var(--ez) forwards}
.hero h1 .ln:nth-child(2) span{animation-delay:.18s}
.hero .copy p{opacity:0;animation:fade 1.2s .7s var(--ez) forwards}
.phero h1{overflow:hidden}
.phero h1 span{display:inline-block;transform:translateY(105%);animation:up 1.1s .1s var(--ez) forwards}
.phero p{opacity:0;animation:fade 1s .5s forwards}
@keyframes up{to{transform:none}}
@keyframes fade{to{opacity:1}}
header .logo{animation:drop 1s var(--ez) both}
@keyframes drop{from{opacity:0;transform:translateY(-16px)}}

/* カード・ボタンの手ざわり */
.cat,.point,.role,.others>div,.dg-trio>div,.card{transition:transform .5s var(--ez),box-shadow .5s var(--ez)}
.point:hover,.role:hover,.others>div:hover,.dg-trio>div:hover,.card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(20,30,60,.10)}
.more i,.bigline,.pill,.btn{transition:transform .4s var(--ez),box-shadow .4s}
.more:hover i{transform:translateX(6px)}
.bigline:hover,.btn:hover,.pill:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(0,0,0,.15)}
.bigline.line{animation:pulse 2.6s 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(6,199,85,.45)}70%{box-shadow:0 0 0 16px rgba(6,199,85,0)}100%{box-shadow:0 0 0 0 rgba(6,199,85,0)}}

/* ===== 図の動き ===== */
/* 流れ図：丸が順にポン、矢印が伸びる、項目が順に */
.js .dg-flow .cir{transform:scale(.4);opacity:0;transition:transform .8s cubic-bezier(.3,1.6,.5,1),opacity .4s;transition-delay:var(--d,0s)}
.js .dg-flow.in .cir{transform:none;opacity:1}
.js .dg-flow .node b,.js .dg-flow .node small{opacity:0;transition:opacity .8s;transition-delay:calc(var(--d,0s) + .25s)}
.js .dg-flow.in .node b,.js .dg-flow.in .node small{opacity:1}
.js .dg-flow .ar::before{transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ez);transition-delay:var(--d,0s)}
.js .dg-flow .ar::after,.js .dg-flow .ar span{opacity:0;transition:opacity .4s;transition-delay:calc(var(--d,0s) + .75s)}
.js .dg-flow.in .ar::before{transform:none}
.js .dg-flow.in .ar::after,.js .dg-flow.in .ar span{opacity:1}
.js .dg-flow li{opacity:0;transform:translateX(-12px);transition:all .6s var(--ez);transition-delay:var(--d,0s)}
.js .dg-flow.in li{opacity:1;transform:none}
.dg-flow .node.main .cir{animation:ring 3s 3.2s infinite}
@keyframes ring{0%{box-shadow:0 0 0 0 rgba(31,45,107,.35)}60%{box-shadow:0 0 0 18px rgba(31,45,107,0)}100%{box-shadow:0 0 0 0 rgba(31,45,107,0)}}
/* お金の流れの矢印の上を光が走る */
.dg-flow .ar.mn{overflow:visible}
.dg-flow.in .ar.mn::before{background:linear-gradient(90deg,#e8c400 0%,#e8c400 40%,#fff6b8 50%,#e8c400 60%,#e8c400 100%);background-size:250% 100%;animation:shine 2.8s 2.5s linear infinite}
@keyframes shine{from{background-position:100% 0}to{background-position:-150% 0}}

/* 段：点線が伸びて、丸が順に */
.js .dg-steps::before{transform:scaleX(0);transform-origin:left;transition:transform 2.2s var(--ez)}
.js .dg-steps.in::before{transform:none}
.js .dg-steps li{opacity:0;transform:translateY(24px);transition:all .8s var(--ez);transition-delay:var(--d,0s)}
.js .dg-steps.in li{opacity:1;transform:none}
.dg-steps li:hover .cir{background:var(--navy);color:#fff;transform:rotate(-8deg) scale(1.06)}
.dg-steps .cir{transition:all .4s var(--ez)}

/* LINE：吹き出しが1つずつ届く */
.js .phone .msg{opacity:0;transform:translateY(14px) scale(.96);transform-origin:left bottom;transition:all .55s cubic-bezier(.3,1.4,.5,1);transition-delay:var(--d,0s)}
.js .phone .msg.r{transform-origin:right bottom}
.js .phone.in .msg{opacity:1;transform:none}
.js .phone .scr{transform:translateY(30px) rotate(-2deg);opacity:0;transition:all 1.1s var(--ez)}
.js .phone.in .scr{transform:none;opacity:1}

/* 地図：1地域ずつ、最後にピンが落ちる */
.js .dg-map .rg{opacity:0;transform:scale(.85);transform-box:fill-box;transform-origin:center;transition:all .6s var(--ez);transition-delay:var(--d,0s)}
.js .dg-map.in .rg{opacity:1;transform:none}
.js .dg-map .pinm{opacity:0;transform:translate(150px,240px);transition:opacity .2s 1.9s,transform .9s 1.9s cubic-bezier(.3,1.7,.5,1)}
.js .dg-map.in .pinm{opacity:1;transform:translate(150px,318px)}
.js .dg-map .pint{opacity:0;transition:opacity .6s 2.6s}
.js .dg-map.in .pint{opacity:1}
.dg-map .rg.home rect{animation:homeglow 2.6s 3s infinite}
@keyframes homeglow{50%{fill:#3a4c9a}}

/* 受け持ちの表：列ごとに丸がポン */
.js .dg-lane .h{opacity:0;transform:translateY(-10px);transition:all .6s var(--ez);transition-delay:var(--d,0s)}
.js .dg-lane .c i{transform:scale(0);transition:transform .55s cubic-bezier(.3,1.7,.5,1);transition-delay:var(--d,0s)}
.js .dg-lane .c::before{transform:scaleX(0);transform-origin:left;transition:transform .4s;transition-delay:var(--d,0s)}
.js .dg-lane-wrap.in .h{opacity:1;transform:none}
.js .dg-lane-wrap.in .c i{transform:none}
.js .dg-lane-wrap.in .c::before{transform:none}

/* お支払いの線：伸びて、点が順に、最後に「5日以内」 */
.js .dg-pay .track{transform:scaleX(0);transform-origin:left;transition:transform 2s var(--ez)}
.js .dg-pay.in .track{transform:none}
.js .dg-pay .track i{transform:scale(0);transition:transform .5s cubic-bezier(.3,1.7,.5,1);transition-delay:var(--d,0s)}
.js .dg-pay.in .track i{transform:none}
.js .dg-pay .br{opacity:0;transform:translateY(10px);transition:all .7s cubic-bezier(.3,1.6,.5,1) 2.1s}
.js .dg-pay.in .br{opacity:1;transform:none}
.js .dg-pay .lbls div{opacity:0;transition:opacity .7s;transition-delay:var(--d,0s)}
.js .dg-pay.in .lbls div{opacity:1}
.dg-pay .track i.end{animation:ring 2.6s 3s infinite}

/* 3つの安心：アイコンが弾む */
.js .dg-trio .cir{transform:scale(.3) rotate(-30deg);transition:transform .8s cubic-bezier(.3,1.6,.5,1);transition-delay:calc(var(--d,0s) + .15s)}
.js .dg-trio .in .cir,.js .dg-trio>div.in .cir{transform:none}

/* 数字の帯 */
.nums .ic{transition:transform .8s cubic-bezier(.3,1.6,.5,1)}
.js .nums .rv .ic{transform:scale(0)}
.js .nums .rv.in .ic{transform:none}

@media (prefers-reduced-motion:reduce){
 .js .rv,.js .wipe,.js .wipe img,.js [class*="dg-"] *,.js .phone *,.hero h1 .ln span,.hero .copy p,.phero h1 span,.phero p{transition:none!important;animation:none!important;opacity:1!important;transform:none!important;clip-path:none!important}
}

/* ===== 真ん中のロゴ：ぼやけ→ピント→光が走る ===== */
.emblem{animation:emb 1.8s .2s var(--ez) both}
@keyframes emb{from{opacity:0;transform:scale(.82);filter:blur(14px) drop-shadow(0 18px 40px rgba(0,0,0,.45))}to{opacity:1;transform:none;filter:blur(0) drop-shadow(0 18px 40px rgba(0,0,0,.45))}}
.emblem .shine{animation:shine2 1.6s 1.9s ease-in-out both,shine2 1.6s 7s ease-in-out infinite}
@keyframes shine2{from{background-position:120% 0}to{background-position:-30% 0}}
.hero .wm{animation:rise 1.3s 1s var(--ez) both}
.hero .wm small{animation:fade 1s 1.4s both}
.hero .tag{animation:line 1.4s 1.5s var(--ez) both}
.hero .kick{animation:fade 1.2s 2.2s both}
@keyframes rise{from{opacity:0;transform:translateY(30px);letter-spacing:.3em}to{opacity:1;transform:none}}
@keyframes line{from{opacity:0;clip-path:inset(0 50% 0 50%)}to{opacity:1;clip-path:inset(0 0 0 0)}}
@media (prefers-reduced-motion:reduce){.emblem,.emblem .shine,.hero .wm,.hero .wm small,.hero .tag,.hero .kick{animation:none!important}}

/* 字にもロゴと同じ光を走らせる */
.silver{animation:textshine 1.6s 1.9s ease-in-out both,textshine 1.6s 7s ease-in-out infinite}
.hero .wm.silver{animation:rise 1.3s 1s var(--ez) both,textshine 1.6s 2.05s ease-in-out both,textshine 1.6s 7.15s ease-in-out infinite}
.hero .sub.silver{animation:fade 1.2s 1.6s both,textshine 1.6s 2.2s ease-in-out both,textshine 1.6s 7.3s ease-in-out infinite}
.hero .tag.silver{animation:line 1.4s 1.9s var(--ez) both,textshine 1.6s 2.35s ease-in-out both,textshine 1.6s 7.45s ease-in-out infinite}
.hero .wm small.silver{animation:fade 1s 1.4s both,textshine 1.6s 2s ease-in-out both,textshine 1.6s 7.1s ease-in-out infinite}
@keyframes textshine{from{background-position:130% 0,0 0}to{background-position:-30% 0,0 0}}
@media (prefers-reduced-motion:reduce){.silver{animation:none!important}}

/* ===== vision ===== */
.js .stairs .st{transform:translateY(60px);opacity:0;transition:all 1s var(--ez);transition-delay:var(--d,0s)}
.js .stairs.in .st{transform:none;opacity:1}
.js .arrow-up path{stroke-dashoffset:1400;transition:stroke-dashoffset 2.2s var(--ez) 1.1s}
.js .arrow-up path:first-child{stroke-dasharray:1400}
.js .stairs.in .arrow-up path{stroke-dashoffset:0}
.js .arrow-up .hd{opacity:0;transition:opacity .4s 3.1s}
.js .stairs.in .arrow-up .hd{opacity:1}
.js .promise .cir{transform:scale(.3) rotate(-30deg);transition:transform .8s cubic-bezier(.3,1.6,.5,1);transition-delay:calc(var(--d,0s) + .2s)}
.js .promise>div.in .cir{transform:none}
.js .vh.rv,.js .vc.rv{transform:none;clip-path:inset(0 100% 0 0);transition:clip-path 1.8s var(--ez),opacity .4s}
.js .vh.rv.in,.js .vc.rv.in{clip-path:inset(0 0 0 0)}
.vh.silver,.vc.silver,.vsub.silver{animation:textshine 1.8s 2s ease-in-out both,textshine 1.8s 8s ease-in-out infinite}
.js .wipe video{transform:scale(1.18);transition:transform 1.8s var(--ez);transition-delay:var(--d,0s)}
.js .wipe.in video{transform:scale(1)}