/* ==== 課題別ページ 図解アニメーション（.viz.on で再生） ==== */

/* 1. 仕入れ：条件がそろって比較できる状態になる */
.vz-tbl{display:grid;grid-template-columns:1.1fr repeat(4,1fr);gap:1px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.1);border-radius:9px;overflow:hidden;}
.vz-tbl>div{background:var(--navy);padding:12px 10px;font-size:.72rem;color:rgba(255,255,255,.55);display:flex;align-items:center;justify-content:center;text-align:center;min-height:46px;}
.vz-tbl .hd{color:var(--gold-lt);font-size:.66rem;letter-spacing:.08em;}
.vz-tbl .rw{justify-content:flex-start;color:rgba(255,255,255,.75);font-size:.76rem;}
.vz-cell{position:relative;}
.vz-cell .q{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.22);font-size:1rem;transition:opacity .5s var(--ease);}
.vz-cell .v{opacity:0;transform:translateY(6px);transition:opacity .6s var(--ease),transform .6s var(--ease);}
.viz.on .vz-cell .q{opacity:0;}
.viz.on .vz-cell .v{opacity:1;transform:none;}
.viz.on .vz-cell:nth-of-type(2) .v{transition-delay:.12s}
.viz.on .vz-cell:nth-of-type(3) .v{transition-delay:.24s}
.viz.on .vz-cell:nth-of-type(4) .v{transition-delay:.36s}
.vz-cell .v.good{color:var(--gold-lt);}
@media(max-width:620px){.vz-tbl{grid-template-columns:.9fr repeat(4,1fr);}.vz-tbl>div{padding:9px 4px;font-size:.62rem;min-height:40px;}.vz-tbl .rw{font-size:.64rem;}}

/* 2. 集客：見つける→確認する→来店 の導線がつながる */
.vz-flow{display:flex;align-items:stretch;gap:0;}
.vz-node{flex:1;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:18px 12px;text-align:center;transition:border-color .7s var(--ease),background .7s var(--ease);}
.vz-node .ic{font-size:1.2rem;color:rgba(255,255,255,.4);margin-bottom:8px;transition:color .7s;}
.vz-node .t{font-size:.8rem;color:rgba(255,255,255,.72);font-weight:500;}
.vz-node .s{font-size:.68rem;color:rgba(255,255,255,.4);margin-top:5px;line-height:1.7;}
.vz-join{width:clamp(24px,5vw,54px);align-self:center;height:2px;background:rgba(255,255,255,.12);position:relative;flex:none;}
.vz-join::after{content:'';position:absolute;inset:0;width:0;background:linear-gradient(90deg,var(--gold),var(--gold-lt));transition:width .8s var(--ease);}
.viz.on .vz-join::after{width:100%;}
.viz.on .vz-join:nth-of-type(4)::after{transition-delay:.7s;}
.viz.on .vz-node{border-color:rgba(201,162,39,.4);background:rgba(201,162,39,.08);}
.viz.on .vz-node .ic{color:var(--gold-lt);}
.viz.on .vz-node:nth-of-type(3){transition-delay:.4s;}
.viz.on .vz-node:nth-of-type(5){transition-delay:.9s;}
@media(max-width:600px){.vz-flow{flex-direction:column;}.vz-join{width:2px;height:24px;align-self:center;}.vz-join::after{width:2px;height:0;transition:height .8s var(--ease);}.viz.on .vz-join::after{height:100%;width:2px;}}

/* 3. メニュー：同じ強さの並び → 差が伝わる配置 */
.vz-menu{display:grid;gap:9px;}
.vz-mrow{display:grid;grid-template-columns:1fr auto;align-items:center;gap:14px;padding:13px 16px;border-radius:8px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  transition:all .9s var(--ease);}
.vz-mrow .nm{font-size:.84rem;color:rgba(255,255,255,.7);}
.vz-mrow .pr{font-size:.82rem;color:rgba(255,255,255,.5);font-family:var(--serif);}
.vz-mrow .badge{display:inline-block;font-size:.58rem;letter-spacing:.12em;color:var(--navy);background:var(--gold-lt);
  border-radius:3px;padding:2px 8px;margin-right:9px;opacity:0;transform:scale(.7);transition:opacity .6s var(--ease) .6s,transform .6s var(--ease) .6s;}
.viz.on .vz-mrow.push{background:rgba(201,162,39,.14);border-color:var(--gold-lt);padding:20px 18px;order:-1;}
.viz.on .vz-mrow.push .nm{color:#fff;font-size:1rem;font-weight:500;}
.viz.on .vz-mrow.push .pr{color:var(--gold-lt);font-size:1rem;}
.viz.on .vz-mrow.push .badge{opacity:1;transform:none;}
.viz.on .vz-mrow.dim{opacity:.55;}
.vz-cost2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px;}
.vz-cbar{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:14px 16px;}
.vz-cbar .l{font-size:.68rem;color:rgba(255,255,255,.45);margin-bottom:9px;}
.vz-cbar .track{height:9px;border-radius:5px;background:rgba(255,255,255,.08);overflow:hidden;}
.vz-cbar .fill{height:100%;width:0;border-radius:5px;background:linear-gradient(90deg,var(--gold),var(--gold-lt));transition:width 1.1s var(--ease) .3s;}
.viz.on .vz-cbar .fill{width:var(--w);}
.vz-cbar .n{margin-top:8px;font-size:.74rem;color:rgba(255,255,255,.6);font-family:var(--serif);}

/* 4. 制作物：複数の依頼先 → ひとつの窓口（SVG） */
.vz-hub{width:100%;}
.vz-hub svg{width:100%;height:auto;display:block;}
.vz-hub .fan{stroke:rgba(255,255,255,.28);stroke-width:1.4;fill:none;stroke-dasharray:260;stroke-dashoffset:0;
  transition:opacity .9s var(--ease),stroke .9s;}
.viz.on .vz-hub .fan{opacity:.12;}
.vz-hub .one{stroke:var(--gold-lt);stroke-width:2.4;fill:none;stroke-dasharray:200;stroke-dashoffset:200;
  transition:stroke-dashoffset 1s var(--ease) .5s;}
.viz.on .vz-hub .one{stroke-dashoffset:0;}
.vz-hub .vbox rect{fill:rgba(255,255,255,.06);stroke:rgba(255,255,255,.14);transition:opacity .9s var(--ease);}
.vz-hub .vbox text{fill:rgba(255,255,255,.55);font-size:12px;transition:opacity .9s var(--ease);}
.viz.on .vz-hub .vbox{opacity:.3;}
.vz-hub .hub{opacity:0;transform:scale(.88);transform-origin:center;transition:opacity .8s var(--ease) .45s,transform .8s var(--ease) .45s;}
.viz.on .vz-hub .hub{opacity:1;transform:scale(1);}
.vz-hub .hub rect{fill:rgba(201,162,39,.18);stroke:#D4AF37;stroke-width:1.4;}
.vz-hub .hub text{fill:#D4AF37;font-size:14px;font-weight:600;}
.vz-hub .shop rect{fill:rgba(255,255,255,.08);stroke:rgba(255,255,255,.2);}
.vz-hub .shop text{fill:rgba(255,255,255,.8);font-size:13px;}

/* 5. 壁打ち：散らばった悩み → 言葉と選択肢に整理 */
.vz-sp{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(12px,3vw,28px);align-items:center;}
.vz-cloud{position:relative;height:210px;}
.vz-bit{position:absolute;padding:7px 12px;border-radius:16px;font-size:.7rem;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.5);
  transition:all 1s var(--ease);}
.vz-bit:nth-of-type(1){left:2%;top:6%;transform:rotate(-8deg);}
.vz-bit:nth-of-type(2){left:44%;top:0%;transform:rotate(6deg);}
.vz-bit:nth-of-type(3){left:14%;top:38%;transform:rotate(4deg);}
.vz-bit:nth-of-type(4){left:50%;top:44%;transform:rotate(-5deg);}
.vz-bit:nth-of-type(5){left:26%;top:76%;transform:rotate(9deg);}
.viz.on .vz-bit{opacity:.3;transform:scale(.92);}
.vz-mid{color:var(--gold);font-size:1.2rem;opacity:0;transition:opacity .7s var(--ease) .5s;}
.viz.on .vz-mid{opacity:1;}
.vz-sorted{display:grid;gap:8px;}
.vz-sitem{padding:11px 14px;border-radius:8px;background:rgba(201,162,39,.09);border:1px solid rgba(201,162,39,.3);
  font-size:.76rem;color:var(--gold-lt);opacity:0;transform:translateX(14px);transition:opacity .7s var(--ease),transform .7s var(--ease);}
.vz-sitem span{display:block;color:rgba(255,255,255,.5);font-size:.68rem;margin-top:4px;line-height:1.7;}
.viz.on .vz-sitem{opacity:1;transform:none;}
.viz.on .vz-sitem:nth-child(2){transition-delay:.75s;}
.viz.on .vz-sitem:nth-child(3){transition-delay:.95s;}
.viz.on .vz-sitem:nth-child(1){transition-delay:.55s;}
@media(max-width:640px){.vz-sp{grid-template-columns:1fr;}.vz-mid{transform:rotate(90deg);text-align:center;}.vz-cloud{height:180px;}}

/* 6. 優先順位：散らばった課題が並ぶ */
.vz-pri{display:grid;gap:9px;}
.vz-task{display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:13px;padding:13px 16px;border-radius:8px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);transition:all .95s var(--ease);}
.vz-task .no{font-family:var(--serif);font-size:1.05rem;color:rgba(255,255,255,.25);transition:color .8s;}
.vz-task .nm{font-size:.8rem;color:rgba(255,255,255,.65);}
.vz-task .tag{font-size:.62rem;color:rgba(255,255,255,.35);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:3px 10px;transition:all .8s;}
.viz.on .vz-task[data-o="1"]{order:1;background:rgba(201,162,39,.14);border-color:var(--gold-lt);}
.viz.on .vz-task[data-o="2"]{order:2;}
.viz.on .vz-task[data-o="3"]{order:3;}
.viz.on .vz-task[data-o="4"]{order:4;opacity:.62;}
.viz.on .vz-task[data-o="5"]{order:5;opacity:.5;}
.viz.on .vz-task[data-o="1"] .no{color:var(--gold-lt);}
.viz.on .vz-task[data-o="1"] .nm{color:#fff;font-weight:500;}
.viz.on .vz-task[data-o="1"] .tag{color:var(--navy);background:var(--gold-lt);border-color:var(--gold-lt);}

@media(max-width:620px){
  .vz-hub .vbox text{font-size:17px;}
  .vz-hub .hub text{font-size:20px;}
  .vz-hub .shop text{font-size:18px;}
}