/* ============================================================
   AIソフトウェア開発ページ専用 — からくり

   このページの一行は「AIは歯車ひとつ。機械のほうは御社の業務」。
   だから道具は座敷からくりのもの：歯車、心棒、ぜんまい、糸。

   ・戸と暖簾は /dich-vu-thiet-ke-website/ のもの
   ・糸と型紙は /thiet-ke-va-lap-trinh-web-theo-yeu-cau/ のもの
   ・帳面と算盤は /viet-phan-mem-theo-yeu-cau/ のもの
   ここには持ち込まない。
   ============================================================ */

/* ---------- 歯車そのもの ---------- */
.gear{
  position:absolute;display:block;color:var(--ink-6,#B266F5);
  transform:translate(-50%,-50%);
}
.gear__in{
  display:block;width:100%;height:100%;
  transform:rotate(calc(var(--rot,0) * 1deg));will-change:transform;
}
.gear svg{width:100%;height:100%;display:block;overflow:visible}
.gear .gr__body{fill:currentColor;opacity:.86}
.gear .gr__web{fill:var(--hub,#170130)}
.gear .gr__rim{fill:none;stroke:currentColor;stroke-width:2.4;opacity:.9}
.gear .gr__spoke{stroke:currentColor;stroke-width:4.5;stroke-linecap:round;opacity:.75}
.gear .gr__hub{fill:var(--hub,#170130)}
.gear .gr__hubring{fill:none;stroke:currentColor;stroke-width:2.4;opacity:.9}
.gear--ai{color:var(--kin,#E8B33C)}
.gear--dead{color:#6A5A7A;opacity:.55}
.gear__lbl{
  position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:2;
  font-family:var(--f-mincho,serif);font-weight:800;font-size:12.5px;
  color:var(--washi,#FBF7F2);letter-spacing:.08em;white-space:nowrap;
  text-shadow:0 1px 3px rgba(0,0,0,.7);pointer-events:none;
}

/* ---------- 序 — からくりが噛み合う ---------- */
.karakuri{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:100svh;display:flex;align-items:flex-end;
  padding:clamp(140px,17vh,186px) 0 clamp(30px,5vh,56px);
  background:#150229;--o:0;
}
.kk__floor{position:absolute;inset:0;z-index:0;overflow:hidden}
.kk__floor img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;display:block;
  filter:saturate(.72) brightness(.62);transform:scale(calc(1.06 - var(--o) * .04))}
.kk__floor::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(21,2,41,.72),rgba(21,2,41,.42) 40%,rgba(21,2,41,.9));
}
/* 心棒と台座 */
.kk__train{position:absolute;inset:0;z-index:2;pointer-events:none}
.kk__shaft{
  position:absolute;left:0;right:0;top:52%;height:2px;
  background:linear-gradient(90deg,transparent,rgba(232,179,60,.34) 12%,rgba(232,179,60,.34) 88%,transparent);
  opacity:calc(var(--o) * .9);
}
.kk__wash{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(15,1,30,.94) 0%,rgba(15,1,30,.86) 30%,rgba(15,1,30,.40) 58%,rgba(15,1,30,.10) 100%),
    linear-gradient(180deg,rgba(15,1,30,.56) 0%,transparent 22%,transparent 56%,rgba(15,1,30,.90) 100%);
}
.kk__body{position:relative;z-index:5;flex:0 1 auto}
.karakuri .crumb{color:rgba(251,247,242,.62);margin-bottom:clamp(14px,2vh,22px)}
.karakuri .crumb a{color:rgba(251,247,242,.72)}
.karakuri .crumb b{color:var(--washi,#FBF7F2)}
.kk__eye{
  display:inline-flex;align-items:center;gap:9px;margin-bottom:clamp(14px,2vh,22px);
  font-family:var(--f-lat,sans-serif);font-size:11px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-7,#CFA3FA);
}
.kk__eye i{width:26px;height:1px;background:var(--kin,#E8B33C);display:block}
.kk__h{
  margin:0 0 clamp(16px,2.4vh,26px);font-family:var(--f-mincho,serif);font-weight:800;
  font-size:clamp(30px,5.1vw,64px);line-height:1.24;letter-spacing:.02em;color:var(--washi,#FBF7F2);
}
.kk__h .ln{display:block;overflow:hidden}
.kk__h .ln > span{display:block}
.kk__h u{text-decoration:none;position:relative;white-space:nowrap}
.kk__h u::after{content:"";position:absolute;left:-2px;right:-2px;bottom:.05em;height:.09em;background:var(--shu,#D6321F)}
.kk__lead{margin:0;max-width:52ch;font-size:clamp(14px,1.5vw,16.5px);line-height:2.05;color:rgba(251,247,242,.86)}
.kk__lead em{font-style:normal;color:var(--kin,#E8B33C)}
.kk__act{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(20px,3vh,32px)}
.karakuri .wbtn--ghost{
  border-color:rgba(251,247,242,.5);color:var(--washi,#FBF7F2);
  background:rgba(15,1,30,.3);backdrop-filter:blur(6px);
}
.karakuri .wbtn--ghost:hover{border-color:var(--kin,#E8B33C);color:var(--kin,#E8B33C)}
.kk__tag{
  margin-top:clamp(22px,3.4vh,38px);display:inline-flex;flex-wrap:wrap;
  background:rgba(251,247,242,.10);backdrop-filter:blur(12px);color:var(--washi,#FBF7F2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), inset 0 0 0 1px rgba(255,255,255,.12);
}
.kk__tag b,.kk__tag span{display:block;padding:10px clamp(12px,1.6vw,18px);font-size:12px;line-height:1.5;
  border-right:1px solid rgba(255,255,255,.16)}
.kk__tag b{font-family:var(--f-lat,sans-serif);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--kin,#E8B33C);white-space:nowrap}
.kk__tag span:last-child{border-right:0}
.kk__down{
  position:absolute;right:clamp(16px,3vw,44px);bottom:clamp(24px,4vh,44px);z-index:5;
  writing-mode:vertical-rl;font-family:var(--f-lat,sans-serif);font-size:10px;
  letter-spacing:.32em;text-transform:uppercase;color:rgba(251,247,242,.55);
  display:flex;align-items:center;gap:12px;
}
.kk__down::after{content:"";width:1px;height:56px;
  background:linear-gradient(180deg,rgba(251,247,242,.6),transparent);
  animation:kkDrop 2.4s ease-in-out infinite;transform-origin:50% 0}
@keyframes kkDrop{0%,100%{transform:scaleY(.3);opacity:.3}50%{transform:scaleY(1);opacity:1}}

/* ---------- 敷居 — 歯車が一枚ずつ噛む ---------- */
.hagurumaBand{
  position:relative;--o:0;overflow:hidden;pointer-events:none;
  height:calc(clamp(96px,15vh,160px) + var(--seam,0px));
  background:linear-gradient(180deg,#1D0536,#140126);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), inset 0 -1px 0 rgba(0,0,0,.35);
  --hub:#140126;
}
.hb__cap{
  position:absolute;left:50%;top:clamp(10px,1.8vh,18px);translate:-50% 0;z-index:5;
  font-family:var(--f-lat,sans-serif);font-size:9.5px;letter-spacing:.34em;
  text-transform:uppercase;color:rgba(207,163,250,.85);opacity:calc(var(--o) * .9);white-space:nowrap;
}
.hb__rail{
  position:absolute;left:0;right:0;top:clamp(56px,8.6vh,94px);height:1px;
  background:linear-gradient(90deg,transparent,rgba(232,179,60,.3) 14%,rgba(232,179,60,.3) 86%,transparent);
}

/* ---------- 順番 — 噛み合わせを試す ---------- */
.kamiai{margin-top:clamp(26px,4vh,44px)}
.km__stage{
  position:relative;height:clamp(240px,34vh,340px);
  background:linear-gradient(180deg,#1D0536,#120124);
  border:2px solid var(--ink-2,#3D0A6B);--hub:#160229;overflow:hidden;
}
.km__note{
  position:absolute;left:16px;top:12px;
  font-size:11px;letter-spacing:.14em;color:rgba(251,247,242,.6);
  background:rgba(15,1,30,.5);padding:5px 12px;white-space:nowrap;z-index:4;
}
.km__ctl{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.km__btn{
  cursor:pointer;border:1.5px solid rgba(207,163,250,.45);background:transparent;
  color:var(--ink-8,#E6D3FB);font-family:var(--f-jp,sans-serif);font-size:13px;
  letter-spacing:.06em;padding:11px 18px;transition:all .2s ease;
}
.km__btn[aria-pressed="true"]{background:var(--ink-5,#981DFF);color:#fff;border-color:var(--ink-5,#981DFF)}
.km__say{margin:16px 0 0;font-size:13.5px;line-height:1.95;color:var(--ink-8,#E6D3FB);opacity:.9;min-height:3.8em}
.km__say b{color:var(--kin,#E8B33C)}

/* ---------- 四つの穴 ---------- */
.ana{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.6vw,22px);margin-top:clamp(24px,3.6vh,40px)}
.ana__i{position:relative;padding:clamp(16px,2vw,24px);background:var(--washi,#FBF7F2);border:1px solid rgba(39,1,71,.16);min-width:0}
.ana__i h3{margin:0 0 8px;font-family:var(--f-mincho,serif);font-size:clamp(15px,1.8vw,18px);line-height:1.5;color:var(--ink-1,#270147)}
.ana__i p{margin:0;font-size:12.5px;line-height:1.95;opacity:.82}
.ana__n{display:block;font-family:var(--f-num,sans-serif);font-size:26px;color:var(--ink-5,#981DFF);line-height:1;margin-bottom:10px}
@media (max-width:900px){ .ana{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:520px){ .ana{grid-template-columns:minmax(0,1fr)} }

/* ---------- 出典 ---------- */
.gensen{
  margin-top:clamp(18px,2.6vh,28px);font-size:12px;line-height:1.9;opacity:.66;
  border-left:2px solid rgba(207,163,250,.4);padding-left:14px;
}
.gensen a{color:inherit}

@media (max-width:900px){
  .kk__wash{background:linear-gradient(180deg,rgba(15,1,30,.56) 0%,rgba(15,1,30,.80) 22%,rgba(15,1,30,.90) 46%,rgba(15,1,30,.94) 100%)}
  .kk__tag{flex-direction:column}
  .kk__tag b,.kk__tag span{border-right:0;border-bottom:1px solid rgba(255,255,255,.16)}
}
@media (prefers-reduced-motion:reduce){ .kk__down::after{animation:none} }

/* ---------- 現場の写真帯 ---------- */
.kkBand{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(10px,1.4vw,20px);margin-top:clamp(24px,3.6vh,40px);
}
/* 歯車が噛んで座るときのように、わずかに回ってから止まる */
.kkB{
  position:relative;margin:0;min-width:0;overflow:hidden;background:var(--ink-1,#270147);
  aspect-ratio:4/3;
  opacity:var(--op2,0);
  transform:translateY(var(--ty,30px)) rotate(var(--rz,-1.4deg));
  transform-origin:14% 92%;
}
.kkB img{
  position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:100%;height:122%;object-fit:cover;display:block;
  transform:translate3d(0,var(--py,0px),0);
}
.kkB figcaption{
  position:absolute;left:0;bottom:0;background:rgba(20,2,38,.74);color:var(--washi,#FBF7F2);
  font-size:10.5px;letter-spacing:.1em;padding:6px 10px;
}
@media (max-width:760px){ .kkBand{grid-template-columns:minmax(0,1fr)} }