/* ============================================================
   オーダーメイド Web 開発ページ専用 — 型紙（かたがみ）

   このページの一行は「八割は合っている。残りの二割が毎日効く」。
   その一行を物にする：

     ・下に既製の型紙（テンプレート）を敷く。穴は決まった形しかない
     ・上から御社の業務が一枚ずつ落ちてくる
     ・八枚は穴に落ちて収まる（＝合っている）
     ・二枚は穴に合わず、型紙の上に転がったまま残る
     ・残った二枚の下に「毎日の手作業」が積算されていく

   ホームの機構は使わない。ここで完結させる。
   ============================================================ */

.katagami{position:relative;margin-top:clamp(28px,4vh,44px)}
.kg__stage{position:relative;height:clamp(320px,42vh,420px);border-radius:16px;overflow:hidden;
  background:linear-gradient(180deg,rgba(38,4,72,.55),rgba(22,0,41,.9));
  border:2px solid var(--ink-2,#3D0A6B)}

/* 落ちてくる前の待機列（上端） */
.kg__queue{position:absolute;left:0;right:0;top:0;height:34px;
  background:repeating-linear-gradient(90deg,rgba(207,163,250,.16) 0 12px,transparent 12px 24px)}

/* 型紙本体 */
.kg__sheet{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);
  width:min(92%,660px);height:clamp(120px,17vh,168px);border-radius:12px;
  background:var(--washi,#FBF7F2);border:2px solid var(--ink-1,#270147);
  box-shadow:6px 8px 0 rgba(22,0,41,.45);display:grid;
  grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(2,1fr);
  gap:clamp(8px,1.2vw,14px);padding:clamp(12px,1.8vw,20px)}
.kg__sheet::after{content:"既製の型紙";position:absolute;left:14px;top:-11px;font-size:10.5px;
  letter-spacing:.2em;color:var(--washi,#FBF7F2);background:var(--ink-2,#3D0A6B);padding:3px 9px;border-radius:2px}

/* 穴 */
.kg__hole{border-radius:7px;background:rgba(39,1,71,.14);
  box-shadow:inset 0 2px 5px rgba(39,1,71,.30)}

/* 落ちてくる業務の駒 */
.kg__piece{position:absolute;width:var(--w);height:var(--h);border-radius:7px;
  display:grid;place-items:center;font-size:11px;letter-spacing:.06em;line-height:1.25;
  text-align:center;padding:0 6px;font-weight:700;
  background:var(--ink-5,#981DFF);color:#fff;border:2px solid var(--ink-1,#270147);
  box-shadow:3px 4px 0 rgba(22,0,41,.5)}
.kg__piece--miss{background:#D6321F;color:#FFE9E4}

/* はみ出した二枚の集計 */
.kg__tally{display:flex;align-items:baseline;gap:14px;margin-top:20px;flex-wrap:wrap}
.kg__tally b{font-family:var(--f-num,inherit);font-size:clamp(34px,5vw,54px);line-height:1;color:#FF6A4D}
.kg__tally span{font-size:13.5px;line-height:1.8;color:var(--ink-8,#E6D3FB);opacity:.9}
.kg__tally i{font-style:normal;font-size:12px;letter-spacing:.16em;color:#FF6A4D}

.kg__note{margin-top:14px;font-size:13.5px;line-height:1.95;color:var(--ink-8,#E6D3FB);opacity:.86}

@media (prefers-reduced-motion:reduce){ .kg__stage{height:auto;padding:20px 0 26px} }

/* ============================================================
   仕立て — このページだけの世界

   一行は「八割は合っている。残りの二割が、毎日効く」。
   ならば道具は仕立て屋のもの：型紙・裁ちばさみ・待ち針・
   躾糸・メジャー・縫い目・玉止め。戸や暖簾は使わない。
   （戸の世界は /dich-vu-thiet-ke-website/ のもの。持ち込まない）
   ============================================================ */

/* ---------- 序 — 裁断（さいだん） ----------
   既製の型紙が一枚かぶさっている。鋏が横に走り、切った端から
   実物が色を取り戻す。--o 0→1 のひとつで全部が決まる。 */
.saidan{
  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:var(--ink-1,#270147);
  --o:0;
}

/* 反物 — 実物の全景が、原寸のままゆっくり繰り出される。
   引き伸ばすと画面が眠くなる（700px の全景を 1500px に伸ばして失敗した）。
   幅は原寸のまま並べ、足りないぶんは作業台の地で受ける。 */
.sd__bolt{
  position:absolute;inset:0;z-index:0;overflow:hidden;
  display:flex;justify-content:center;gap:clamp(18px,3vw,52px);
  background:linear-gradient(180deg,#2A1B10,#1A1109 60%,#120B06);
}
.sd__roll{position:relative;width:min(46vw,700px);flex:none;overflow:hidden;box-shadow:0 0 60px -10px rgba(0,0,0,.8)}
.sd__roll img{position:absolute;left:0;top:0;width:100%;height:auto;display:block}
.sd__roll--a img{animation:boltRoll 110s linear infinite alternate}
.sd__roll--b img{animation:boltRoll 82s linear infinite alternate-reverse}
@keyframes boltRoll{from{transform:translateY(0)}to{transform:translateY(calc(-100% + 100svh))}}
/* 反物の巻き芯の影 */
.sd__roll::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.45),transparent 9%,transparent 91%,rgba(0,0,0,.45));
}
/* 耳（みみ）— 反物の両端 */
.sd__selv{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(20,2,38,.5) 0,transparent 26px),
    linear-gradient(270deg,rgba(20,2,38,.5) 0,transparent 26px);
}

/* 既製の型紙 — 藍の紙に白い罫。切った左側から消える */
.sd__paper{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  clip-path:inset(0 0 0 calc(var(--o) * 100%));
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.10) 0 1px,transparent 1px 42px),
    repeating-linear-gradient(0deg,rgba(255,255,255,.10) 0 1px,transparent 1px 42px),
    linear-gradient(140deg,#1B0134,#2B0450 46%,#170130);
}
/* 型紙に印刷された裁ち線・合印・寸法 */
.sd__marks{position:absolute;inset:0}
.sd__marks i{
  position:absolute;border:1.5px dashed rgba(232,179,60,.55);border-radius:4px;
}
.sd__marks i:nth-child(1){left:6%;top:24%;width:26%;height:44%}
.sd__marks i:nth-child(2){left:37%;top:16%;width:20%;height:30%}
.sd__marks i:nth-child(3){left:37%;top:52%;width:20%;height:30%}
.sd__marks i:nth-child(4){left:62%;top:22%;width:30%;height:52%}
.sd__marks b{
  position:absolute;right:clamp(16px,3vw,46px);top:clamp(96px,14vh,150px);
  font-family:var(--f-lat,sans-serif);font-size:10px;letter-spacing:.34em;
  text-transform:uppercase;color:rgba(232,179,60,.8);
  writing-mode:vertical-rl;
}
.sd__marks em{
  position:absolute;left:6%;top:20%;font-style:normal;
  font-family:var(--f-num,sans-serif);font-size:12px;letter-spacing:.14em;
  color:rgba(251,247,242,.5);
}

/* 裁ち線と鋏 */
.sd__cut{
  position:absolute;top:0;bottom:0;z-index:3;width:0;
  left:calc(var(--o) * 100%);pointer-events:none;
  opacity:calc(1 - max(0, (var(--o) - .88)) * 8.3);
}
.sd__cut::before{
  content:"";position:absolute;top:0;bottom:0;left:-1px;width:2px;
  background:repeating-linear-gradient(180deg,var(--kin,#E8B33C) 0 7px,transparent 7px 14px);
}
/* 切り口の毛羽立ち */
.sd__cut::after{
  content:"";position:absolute;top:0;bottom:0;left:0;width:26px;
  background:linear-gradient(90deg,rgba(20,2,38,.55),transparent);
}
.sd__scis{
  position:absolute;left:0;top:clamp(120px,20vh,220px);translate:-50% 0;
  width:58px;height:58px;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.6));
}
.sd__scis i{
  position:absolute;left:50%;top:0;width:4px;height:36px;border-radius:2px;
  background:linear-gradient(180deg,#FFF8EA,#9A8B74);transform-origin:50% 100%;
}
.sd__scis i:nth-child(1){transform:translateX(-50%) rotate(-13deg)}
.sd__scis i:nth-child(2){transform:translateX(-50%) rotate(13deg)}
.sd__scis u,.sd__scis s{
  position:absolute;bottom:0;width:20px;height:20px;border-radius:50%;
  border:4px solid #E0C79C;text-decoration:none;
}
.sd__scis u{left:calc(50% - 20px)} .sd__scis s{left:50%}

.sd__wash{
  position:absolute;inset:0;z-index:4;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(18,0,42,.94) 0%,rgba(18,0,42,.86) 34%,rgba(18,0,42,.34) 62%,rgba(18,0,42,.06) 100%),
    linear-gradient(180deg,rgba(18,0,42,.60) 0%,transparent 22%,transparent 52%,rgba(18,0,42,.88) 100%);
}

.sd__body{position:relative;z-index:5;flex:0 1 auto}
.saidan .crumb{color:rgba(251,247,242,.62);margin-bottom:clamp(14px,2vh,22px)}
.saidan .crumb a{color:rgba(251,247,242,.72)}
.saidan .crumb b{color:var(--washi,#FBF7F2)}
.sd__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);
}
.sd__eye i{width:26px;height:1px;background:var(--kin,#E8B33C);display:block}
.sd__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);
}
.sd__h .ln{display:block;overflow:hidden}
.sd__h .ln > span{display:block}
.sd__h u{text-decoration:none;position:relative;white-space:nowrap}
.sd__h u::after{
  content:"";position:absolute;left:-2px;right:-2px;bottom:.05em;height:.08em;
  background:repeating-linear-gradient(90deg,var(--shu,#D6321F) 0 9px,transparent 9px 15px);
}
.sd__lead{margin:0;max-width:52ch;font-size:clamp(14px,1.5vw,16.5px);line-height:2.05;color:rgba(251,247,242,.86)}
.sd__lead em{font-style:normal;color:var(--kin,#E8B33C)}
.sd__act{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(20px,3vh,32px)}
.saidan .wbtn--ghost{
  border-color:rgba(251,247,242,.5);color:var(--washi,#FBF7F2);
  background:rgba(20,2,38,.28);backdrop-filter:blur(6px);
}
.saidan .wbtn--ghost:hover{border-color:var(--kin,#E8B33C);color:var(--kin,#E8B33C)}

/* 反物の見出し札（障子ガラスではなく、反物に貼る紙のタグ） */
.sd__tag{
  margin-top:clamp(22px,3.4vh,38px);display:inline-flex;flex-wrap:wrap;
  background:rgba(251,247,242,.92);color:var(--ink-1,#270147);
  box-shadow:4px 5px 0 rgba(20,2,38,.5);
}
.sd__tag b,.sd__tag span{
  display:block;padding:10px clamp(12px,1.6vw,18px);font-size:12px;line-height:1.5;
  border-right:1px dashed rgba(39,1,71,.3);
}
.sd__tag b{font-family:var(--f-lat,sans-serif);font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-4,#8129DB);white-space:nowrap}
.sd__tag span:last-child{border-right:0}
.sd__tag em{font-style:normal;opacity:.6}

.sd__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;
}
.sd__down::after{
  content:"";width:1px;height:56px;
  background:linear-gradient(180deg,rgba(251,247,242,.6),transparent);
  animation:sdDrop 2.4s ease-in-out infinite;transform-origin:50% 0;
}
@keyframes sdDrop{0%,100%{transform:scaleY(.3);opacity:.3}50%{transform:scaleY(1);opacity:1}}

@media (max-width:900px){
  .sd__roll--b{display:none}
  .sd__roll{width:min(86vw,700px)}
}
@media (max-width:560px){
  .sd__tag{flex-direction:column}
  .sd__tag b,.sd__tag span{border-right:0;border-bottom:1px dashed rgba(39,1,71,.3)}
}
@media (prefers-reduced-motion:reduce){
  .sd__bolt img{animation:none}
  .sd__down::after{animation:none}
}

/* ---------- 敷居 — 糸と道具。戸ではない ---------- */
.shitate{
  position:relative;--o:0;overflow:hidden;pointer-events:none;
  height:calc(clamp(96px,15vh,168px) + var(--seam,0px));
  background:
    repeating-linear-gradient(90deg,rgba(39,1,71,.045) 0 1px,transparent 1px 5px),
    repeating-linear-gradient(0deg,rgba(39,1,71,.045) 0 1px,transparent 1px 5px),
    var(--washi-warm,#F5EDE2);
  box-shadow:inset 0 1px 0 rgba(39,1,71,.10), inset 0 -1px 0 rgba(39,1,71,.10);
}
.st__cap{
  position:absolute;left:50%;top:clamp(10px,1.8vh,18px);translate:-50% 0;
  font-family:var(--f-lat,sans-serif);font-size:9.5px;letter-spacing:.34em;
  text-transform:uppercase;color:var(--ink-4,#8129DB);opacity:calc(var(--o) * .85);
  white-space:nowrap;z-index:5;
}
.st__line{position:absolute;left:0;right:0;top:clamp(46px,7.4vh,84px);height:2px}

/* 躾糸 — 縫ってある糸をほどく */
.st__shitsuke .st__line{
  background:repeating-linear-gradient(90deg,var(--ink-4,#8129DB) 0 13px,transparent 13px 22px);
  clip-path:inset(0 0 0 calc(var(--o) * 100%));
}
.st__shitsuke .st__end{                 /* ほどけた糸の端 */
  position:absolute;top:clamp(38px,6.6vh,76px);left:calc(var(--o) * 100%);
  width:54px;height:22px;border-bottom:2px solid var(--ink-4,#8129DB);
  border-radius:0 0 60% 0;transform:translateX(-100%);
}

/* 裁ち線 — 鋏が渡る */
.st__tachi .st__line{
  background:repeating-linear-gradient(90deg,rgba(39,1,71,.5) 0 8px,transparent 8px 15px);
}
.st__tachi .st__cutdone{                /* 切れた側は上下に開く */
  position:absolute;left:0;top:0;bottom:0;width:calc(var(--o) * 100%);
  background:linear-gradient(180deg,transparent calc(50% - 5px),rgba(214,50,31,.16) 50%,transparent calc(50% + 5px));
}
.st__scis2{
  position:absolute;left:calc(var(--o) * 100%);top:clamp(30px,5vh,58px);
  translate:-50% 0;width:34px;height:34px;
}
.st__scis2 i{
  position:absolute;left:50%;top:0;width:2.5px;height:21px;border-radius:2px;
  background:linear-gradient(180deg,#7B6B52,#3A2F1F);transform-origin:50% 100%;
}
.st__scis2 i:nth-child(1){transform:translateX(-50%) rotate(-14deg)}
.st__scis2 i:nth-child(2){transform:translateX(-50%) rotate(14deg)}
.st__scis2 u,.st__scis2 s{
  position:absolute;bottom:0;width:12px;height:12px;border-radius:50%;
  border:2.5px solid #6B5B44;text-decoration:none;
}
.st__scis2 u{left:calc(50% - 12px)} .st__scis2 s{left:50%}

/* 待ち針 — 順に抜ける */
.st__machibari .st__pins{position:absolute;left:0;right:0;top:0;bottom:0;display:flex;justify-content:space-evenly;align-items:flex-start}
.st__machibari .st__pins i{
  position:relative;width:3px;height:clamp(46px,7.4vh,84px);
  background:linear-gradient(180deg,#C9BDA6,#8A7C63);
  --d:calc(var(--n) / 9);
  --p:clamp(0, calc((var(--o) - var(--d) * .55) / .45), 1);
  transform:translateY(calc(var(--p) * -140%)) rotate(calc(var(--p) * -22deg));
  transform-origin:50% 100%;
}
.st__machibari .st__pins i::before{
  content:"";position:absolute;left:50%;top:-8px;translate:-50% 0;
  width:14px;height:14px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#FF7A5E,var(--shu,#D6321F));
}

/* メジャー — 巻尺が繰り出される */
.st__measure .st__tape{
  position:absolute;left:0;top:clamp(34px,5.6vh,66px);height:26px;
  width:calc(var(--o) * 100%);
  background:linear-gradient(180deg,#F6E7B8,#E8D08A);
  box-shadow:inset 0 -1px 0 rgba(0,0,0,.2), 2px 3px 0 rgba(39,1,71,.14);
}
.st__measure .st__tape::after{
  content:"";position:absolute;inset:0;
  background:
    repeating-linear-gradient(90deg,rgba(39,1,71,.7) 0 1px,transparent 1px 13px),
    repeating-linear-gradient(90deg,rgba(39,1,71,.7) 0 1.5px,transparent 1.5px 65px);
  background-size:100% 40%,100% 72%;background-repeat:no-repeat;background-position:0 100%,0 100%;
}
.st__measure .st__reel{
  position:absolute;left:calc(var(--o) * 100%);top:clamp(24px,4.6vh,56px);
  translate:-50% 0;width:46px;height:46px;border-radius:50%;
  background:radial-gradient(circle at 36% 32%,#4C0A85,#20013C);
  box-shadow:0 6px 14px -8px rgba(0,0,0,.7);
}
.st__measure .st__reel::after{
  content:"";position:absolute;inset:38%;border-radius:50%;background:var(--washi-warm,#F5EDE2);
}

/* 縫い目 — 二枚の端が寄って綴じられる */
.st__nuime .st__edge{
  position:absolute;left:0;right:0;height:calc(50% - 3px);
  background:linear-gradient(180deg,rgba(129,41,219,.14),rgba(129,41,219,.05));
}
.st__nuime .st__edge:nth-of-type(1){top:0;  transform:translateY(calc((1 - var(--o)) * -26px))}
.st__nuime .st__edge:nth-of-type(2){bottom:0;transform:translateY(calc((1 - var(--o)) *  26px))}
.st__nuime .st__line{
  background:repeating-linear-gradient(90deg,var(--shu,#D6321F) 0 11px,transparent 11px 18px);
  clip-path:inset(0 calc((1 - var(--o)) * 100%) 0 0);
}

/* 玉止め — 糸を留めて終わる */
.st__tamadome .st__line{
  background:repeating-linear-gradient(90deg,var(--ink-4,#8129DB) 0 11px,transparent 11px 18px);
  clip-path:inset(0 calc((1 - var(--o)) * 50%) 0 calc((1 - var(--o)) * 50%));
}
.st__tamadome .st__knot{
  position:absolute;left:50%;top:clamp(40px,6.9vh,80px);translate:-50% 0;
  width:calc(9px + var(--o) * 13px);height:calc(9px + var(--o) * 13px);border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#B266F5,var(--ink-2,#3D0A6B));
  box-shadow:0 4px 10px -5px rgba(0,0,0,.6);
}

/* ---------- 二割 — 既製では届かないところ ---------- */
.niwari{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(18px,2.6vw,36px);margin-top:clamp(26px,4vh,44px);
}
.nw{
  position:relative;margin:0;background:var(--washi,#FBF7F2);
  box-shadow:0 30px 50px -40px rgba(26,3,48,.8);
  border:1px solid rgba(39,1,71,.14);
}
.nw__win{position:relative;aspect-ratio:16/11;overflow:hidden;background:#0E0620}
.nw__win img{width:100%;height:100%;object-fit:cover;object-position:50% var(--op,0%);display:block}
.nw__mark{position:absolute;inset:0;pointer-events:none}
.nw__mark svg{width:100%;height:100%;display:block;overflow:visible}
.nw__mark ellipse{
  fill:none;stroke:var(--shu,#D6321F);stroke-width:3;stroke-linecap:round;
  /* preserveAspectRatio="none" だと線まで歪む。太さは画面基準で保つ */
  vector-effect:non-scaling-stroke;
  stroke-dasharray:var(--len,900);stroke-dashoffset:var(--len,900);
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.6));
}
.nw.is-marked .nw__mark ellipse{transition:stroke-dashoffset 1.05s cubic-bezier(.16,1,.3,1);stroke-dashoffset:0}
.nw__body{padding:clamp(14px,1.8vw,22px)}
.nw__k{
  display:flex;align-items:center;gap:9px;margin-bottom:9px;
  font-family:var(--f-lat,sans-serif);font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-4,#8129DB);
}
.nw__k b{
  font-family:var(--f-mincho,serif);font-size:11px;letter-spacing:.1em;
  color:var(--shu,#D6321F);border:1px solid currentColor;padding:2px 7px;border-radius:2px;
}
.nw__t{
  margin:0 0 8px;font-family:var(--f-mincho,serif);font-weight:800;
  font-size:clamp(15.5px,1.8vw,19px);line-height:1.55;color:var(--ink-1,#270147);
}
.nw__p{margin:0;font-size:13px;line-height:1.95;color:var(--sumi,#1C1226);opacity:.82}
.nw__foot{
  margin-top:clamp(20px,3vh,30px);font-size:13px;line-height:1.95;opacity:.8;
  border-top:1px dashed rgba(39,1,71,.24);padding-top:16px;
}

@media (max-width:820px){
  .niwari{grid-template-columns:minmax(0,1fr)}
}

/* 狭い画面では反物が幅いっぱいになる。横のグラデーションでは字が沈むので、
   縦に敷き直す */
@media (max-width:900px){
  .sd__wash{
    background:
      linear-gradient(180deg,rgba(18,0,42,.58) 0%,rgba(18,0,42,.80) 22%,rgba(18,0,42,.90) 46%,rgba(18,0,42,.94) 100%);
  }
  .sd__scis{width:44px;height:44px}
}