/* 生地のレール（ハンガーサンプル）— 試作。今のサイトの色・書体の変数をそのまま使う。 */
.cai-rack{
  --hw:250px; --gap:52px; --ease:cubic-bezier(.19,1,.22,1);
  --wall:#fff; --ui:#1a1a1a; --ui-line:rgba(26,26,26,.22); --shadow:rgba(20,26,40,.3);
  --metal1:#f1f2f4; --metal2:#9a9ea6; --metal3:#555a62;
  --card:#fff; --card-fg:var(--ink,#1a1a1a); --card-line:rgba(26,26,26,.22); --card-accent:var(--red,#a54a42);
  position:relative; height:640px; overflow:hidden; background:var(--wall);
  touch-action:pan-y; cursor:grab; user-select:none; -webkit-user-select:none; margin-top:clamp(36px,5vw,72px);
}
.cai-rack[data-wall=white]{border-block:1px solid var(--line,#d2cfc7)}
.cai-rack.is-drag{cursor:grabbing}
.cai-rack[data-concept="rail"]{height:700px}
.cj{display:inline-block}
.cai-detail-desc,.cai-book-desc{word-break:auto-phrase}
.cai-rack[data-wall=navy]{--wall:#1d2b3d;--ui:#fff;--ui-line:rgba(255,255,255,.34);--shadow:rgba(0,0,0,.55);background:radial-gradient(120% 90% at 50% 0%,#2a3d57 0%,#1d2b3d 64%)}
.cai-rack[data-wall=black]{--wall:#0c0d0f;--ui:#fff;--ui-line:rgba(255,255,255,.3);--shadow:rgba(0,0,0,.65);background:radial-gradient(120% 90% at 50% 0%,#1c1f25 0%,#0c0d0f 62%)}
.cai-rail{position:absolute;left:0;right:0;top:50px;height:10px;z-index:1;background:linear-gradient(var(--metal1),var(--metal2) 46%,var(--metal3));box-shadow:0 9px 16px var(--shadow)}
.cai-track{position:absolute;left:0;top:0;height:100%;display:flex;gap:var(--gap);padding:0 clamp(28px,6vw,84px);will-change:transform;z-index:2}
.cai-hanger{position:relative;flex:none;display:block;width:var(--hw);margin-top:32px;height:max-content;transform-origin:50% 23px;color:inherit;text-decoration:none;will-change:transform;outline:none;-webkit-tap-highlight-color:transparent}
.cai-hanger:focus-visible .cai-head,.cai-hanger:focus-visible .cai-cloth{outline:2px solid var(--red,#a54a42);outline-offset:4px}
.cai-hook{display:block;width:40px;height:64px;margin:0 auto;position:relative;z-index:4;overflow:visible}
.cai-hook path{stroke:url(#cai-metal)}
/* フックをレールに掛ける：先端側（左半分）はレールの高さ（フック枠の18〜28px）だけ隠して裏へ回し、手前側には影を落とす */
.cai-hook{
  -webkit-mask:linear-gradient(#000 0 18px,transparent 18px 28px,#000 28px) left/50% 100% no-repeat,linear-gradient(#000,#000) right/50% 100% no-repeat;
  mask:linear-gradient(#000 0 18px,transparent 18px 28px,#000 28px) left/50% 100% no-repeat,linear-gradient(#000,#000) right/50% 100% no-repeat;
  filter:drop-shadow(0 2px 1.5px rgba(0,0,0,.45));
}

/* 見本札 */
.cai-head{position:relative;display:block;margin-top:-10px;background:var(--card);color:var(--card-fg);padding:22px 15px 10px;z-index:3;box-shadow:0 12px 22px var(--shadow)}
.cai-head::before{content:"";position:absolute;left:50%;top:7px;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:radial-gradient(circle,#15171a 0 34%,var(--metal2) 38% 68%,var(--metal1) 72%)}
.cai-no{display:flex;justify-content:space-between;font:500 10px/1.4 var(--mono,monospace);letter-spacing:.16em;border-bottom:1px solid var(--card-line);padding-bottom:6px}
.cai-no b{font-weight:500;color:var(--card-accent)}
.cai-title{display:block;font:600 16px/1.42 var(--sans,sans-serif);margin-top:8px;letter-spacing:.01em}
.cai-rows{display:block;margin-top:7px;font-size:10.5px;line-height:1.45}
.cai-rows span{display:flex;gap:10px;border-top:1px dotted var(--card-line);padding:2px 0}
.cai-rows b{font:500 9.5px/1.6 var(--mono,monospace);letter-spacing:.12em;width:44px;flex:none;opacity:.7}

/* 布 */
.cai-clothwrap{display:block;position:relative;z-index:1;margin-top:-3px;filter:drop-shadow(0 20px 18px var(--shadow));transform-origin:50% 0;transform:skewX(var(--sk,0deg))}
.cai-cloth{display:block;position:relative;height:var(--len,330px);margin:0 7px;overflow:hidden;background:#1c1c1c}
.cai-cloth img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;transform:scale(1.03);filter:saturate(.9) contrast(.95);transition:transform 1.2s var(--ease)}
.cai-hanger:hover .cai-cloth img{transform:scale(1.08)}
.cai-weave{position:absolute;inset:0;z-index:2;pointer-events:none;mix-blend-mode:overlay;background:
  repeating-linear-gradient(0deg,rgba(255,255,255,.1) 0 1px,transparent 1px 3px),
  repeating-linear-gradient(90deg,rgba(0,0,0,.12) 0 1px,transparent 1px 3px)}
.cai-grain{position:absolute;inset:0;z-index:2;pointer-events:none;mix-blend-mode:soft-light;opacity:.5;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")}
.cai-fold{position:absolute;inset:0;z-index:3;pointer-events:none;background:
  linear-gradient(90deg,rgba(0,0,0,.32),rgba(0,0,0,0) 13%,rgba(255,255,255,.1) 31%,rgba(0,0,0,0) 52%,rgba(0,0,0,.2) 78%,rgba(0,0,0,.02) 92%,rgba(0,0,0,.26)),
  linear-gradient(180deg,rgba(0,0,0,.4),rgba(0,0,0,0) 9%)}
.cai-selv,.cai-label,.cai-hem,.cai-fringe,.cai-clipbar{display:none}

/* 2 赤耳：綾織り、片側に耳、裾はほつれ */
.cai-rack[data-design="2"] .cai-rows{display:none}
.cai-rack[data-design="2"] .cai-head{width:84%;padding-bottom:12px}
.cai-rack[data-design="2"] .cai-head::before{left:calc(50% / .84)}
.cai-rack[data-design="2"] .cai-weave{background:repeating-linear-gradient(-45deg,rgba(255,255,255,.15) 0 1.2px,rgba(0,0,0,.12) 1.2px 2.4px,transparent 2.4px 3.6px)}
.cai-rack[data-design="2"] .cai-selv{display:block;position:absolute;left:0;top:0;bottom:0;width:12px;z-index:1;background:linear-gradient(90deg,#fff 0 6px,var(--red,#a54a42) 6px 8.5px,#fff 8.5px)}
.cai-rack[data-design="2"] .cai-fringe{display:block;height:17px;margin:0 7px;background:var(--img) center bottom/cover no-repeat;-webkit-mask-image:repeating-linear-gradient(90deg,#000 0 1.3px,transparent 1.3px 3px),linear-gradient(#000 20%,transparent);-webkit-mask-composite:source-in;mask-image:repeating-linear-gradient(90deg,#000 0 1.3px,transparent 1.3px 3px),linear-gradient(#000 20%,transparent);mask-composite:intersect}

/* 3 織りネーム：クリップハンガー、帆布、裾は三つ折り縫い */
.cai-rack[data-design="3"]{--hw:268px}
.cai-rack[data-design="3"] .cai-head{display:none}
.cai-rack[data-design="3"] .cai-clipbar{display:block;position:relative;z-index:4;height:9px;margin:-10px 0 0;background:linear-gradient(var(--metal1),var(--metal2) 50%,var(--metal3));box-shadow:0 6px 10px var(--shadow)}
.cai-rack[data-design="3"] .cai-clipbar i{position:absolute;top:-3px;width:26px;height:34px;background:linear-gradient(90deg,var(--metal3),var(--metal1) 35%,var(--metal2) 70%,var(--metal3));box-shadow:0 5px 8px var(--shadow)}
.cai-rack[data-design="3"] .cai-clipbar i:first-child{left:16%}
.cai-rack[data-design="3"] .cai-clipbar i:last-child{right:16%}
.cai-rack[data-design="3"] .cai-clipbar i::after{content:"";position:absolute;left:5px;right:5px;top:9px;height:3px;background:rgba(0,0,0,.35)}
.cai-rack[data-design="3"] .cai-clothwrap{margin-top:-2px}
.cai-rack[data-design="3"] .cai-cloth{height:calc(var(--len,330px) + 96px);margin:0 4px}
.cai-rack[data-design="3"] .cai-weave{background:
  repeating-linear-gradient(0deg,rgba(255,255,255,.15) 0 1.5px,transparent 1.5px 4px),
  repeating-linear-gradient(90deg,rgba(0,0,0,.17) 0 1.5px,transparent 1.5px 4px)}
.cai-rack[data-design="3"] .cai-label{display:block;position:absolute;left:16px;top:44px;z-index:4;max-width:78%;background:var(--navy,#1d2b3d) repeating-linear-gradient(0deg,rgba(255,255,255,.07) 0 1px,transparent 1px 2px);color:#fff;padding:10px 14px 11px;box-shadow:0 2px 4px rgba(0,0,0,.45);outline:1px dashed rgba(255,255,255,.6);outline-offset:-4px}
.cai-label small{display:block;font:500 9px/1.4 var(--mono,monospace);letter-spacing:.18em;opacity:.78}
.cai-label b{display:block;font:600 14.5px/1.4 var(--sans,sans-serif);margin-top:3px;letter-spacing:.02em}
.cai-rack[data-design="3"] .cai-hem{display:block;position:absolute;left:0;right:0;bottom:0;height:22px;z-index:3;background:linear-gradient(rgba(0,0,0,.3),rgba(0,0,0,.1) 28%,rgba(255,255,255,.07));border-top:1px solid rgba(0,0,0,.28)}
.cai-rack[data-design="3"] .cai-hem::after{content:"";position:absolute;left:5px;right:5px;top:7px;border-top:1.5px dashed rgba(255,255,255,.8)}

/* 4 紺の下げ札 */
.cai-rack[data-design="4"]{--card:var(--navy,#1d2b3d);--card-fg:#fff;--card-line:rgba(255,255,255,.3);--card-accent:#e58c80}
.cai-rack[data-design="4"] .cai-head{box-shadow:0 12px 22px var(--shadow),inset 0 0 0 1px rgba(255,255,255,.14)}
.cai-rack[data-design="4"] .cai-head::before{background:radial-gradient(circle,#fff 0 30%,var(--metal2) 36% 68%,var(--metal1) 72%)}

/* 操作 */
.cai-rack-ui{position:absolute;left:clamp(20px,4vw,64px);right:clamp(20px,4vw,64px);bottom:18px;display:flex;justify-content:space-between;align-items:center;z-index:5;pointer-events:none;color:var(--ui)}
.cai-rack-ui p{font:500 11px/1.5 var(--mono,monospace);letter-spacing:.16em;opacity:.7}
.cai-arrows{display:flex;gap:8px;pointer-events:auto}
.cai-arrows button{width:46px;height:46px;border:1px solid var(--ui-line);background:var(--wall);color:var(--ui);cursor:pointer;font:400 17px/1 var(--sans,sans-serif);transition:background .3s,color .3s}
.cai-arrows button:hover{background:var(--ui);color:var(--wall)}
.cai-cur{position:fixed;left:0;top:0;z-index:120;pointer-events:none;background:var(--navy,#1d2b3d);color:#fff;font:500 10.5px/1 var(--mono,monospace);letter-spacing:.16em;padding:7px 10px;white-space:nowrap;opacity:0;transform:translate3d(-200px,-200px,0);transition:opacity .25s}
.cai-cur.on{opacity:1}

/* 手に取る */
.cai-detail{position:fixed;inset:0;z-index:150;display:grid;place-items:center;padding:clamp(16px,4vw,56px);opacity:0;pointer-events:none;transition:opacity .45s;color:#fff}
.cai-detail.on{opacity:1;pointer-events:auto}
.cai-detail::before{content:"";position:absolute;inset:0;background:var(--navy,#1d2b3d);opacity:.96}
.cai-detail-in{position:relative;display:grid;grid-template-columns:auto minmax(280px,420px);gap:clamp(24px,4vw,64px);align-items:center;max-width:1120px}
.cai-detail-img{height:min(76vh,700px);aspect-ratio:3/4;overflow:hidden;background:#111;position:relative}
.cai-detail-img img{width:100%;height:100%;object-fit:cover;filter:saturate(.9) contrast(.95)}
.cai-detail-tx>*{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease,ease),transform .8s var(--ease,ease)}
.cai-detail.on .cai-detail-tx>*{opacity:1;transform:none}
.cai-detail.on .cai-detail-tx>*:nth-child(1){transition-delay:.1s}.cai-detail.on .cai-detail-tx>*:nth-child(2){transition-delay:.18s}.cai-detail.on .cai-detail-tx>*:nth-child(3){transition-delay:.26s}.cai-detail.on .cai-detail-tx>*:nth-child(4){transition-delay:.34s}.cai-detail.on .cai-detail-tx>*:nth-child(5){transition-delay:.42s}
.cai-detail-no{font:500 11px/1.5 var(--mono,monospace);letter-spacing:.2em;opacity:.8}
.cai-detail h2{font:600 clamp(26px,3vw,40px)/1.4 var(--sans,sans-serif);margin-top:10px}
.cai-detail dl{margin-top:22px;border-top:1px solid rgba(255,255,255,.28)}
.cai-detail dl div{display:flex;gap:18px;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.28);font-size:15px}
.cai-detail dt{font:500 11px/1.9 var(--mono,monospace);letter-spacing:.16em;width:64px;flex:none;opacity:.7}
.cai-detail-desc{margin-top:22px;font-size:16px;line-height:1.9;color:rgba(255,255,255,.84)}
.cai-detail-go{display:inline-flex;align-items:center;gap:22px;margin-top:26px;background:#fff;color:var(--navy,#1d2b3d);padding:17px 26px;font:600 15px/1 var(--sans,sans-serif);box-shadow:inset 0 -3px var(--red,#a54a42);text-decoration:none}
.cai-detail-go::after{content:"→";transition:transform .5s var(--ease,ease)}
.cai-detail-go:hover::after{transform:translateX(6px)}
.cai-detail-x{position:absolute;right:clamp(14px,3vw,40px);top:clamp(14px,3vw,36px);width:52px;height:52px;border:1px solid rgba(255,255,255,.4);background:none;color:#fff;cursor:pointer;font-size:22px;z-index:2}
.cai-detail-x:hover{background:#fff;color:var(--navy,#1d2b3d)}
.cai-fly{position:fixed;z-index:160;object-fit:cover;pointer-events:none;box-shadow:0 30px 80px rgba(0,0,0,.5)}
body.cai-lock{overflow:hidden}

/* ---------- 2. 見本帳（段差のある吊り見本帳を上へめくる） ---------- */
.cai-rack[data-concept="book"]{height:auto;cursor:auto;touch-action:auto}
.cai-book-wrap{display:grid;grid-template-columns:auto minmax(260px,400px);justify-content:center;align-items:center;gap:clamp(36px,7vw,120px);padding:44px clamp(20px,4vw,64px) 52px;color:var(--ui)}
.cai-book{--bw:380px;--base:290px;--step:30px;position:relative;width:var(--bw);height:calc(40px + var(--base) + 8 * var(--step) + 16px);perspective:2400px}
.cai-book-bind{position:absolute;left:-12px;right:-12px;top:0;height:46px;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:0 16px;background:var(--navy,#273a57);color:#fff;font:500 10.5px/1 var(--mono,monospace);letter-spacing:.2em;box-shadow:0 10px 18px var(--shadow),inset 0 -1px rgba(255,255,255,.14)}
.cai-book-bind i{width:12px;height:12px;border-radius:50%;background:radial-gradient(circle,#15171a 0 30%,var(--metal2) 36% 66%,var(--metal1) 72%)}
.cai-leaf{position:absolute;left:0;top:40px;width:100%;height:calc(var(--base) + var(--i) * var(--step));padding:0;border:0;background:none;color:inherit;text-align:left;cursor:pointer;transform-origin:50% 0;transform:rotateX(0deg);transition:transform 1.15s cubic-bezier(.5,.05,.2,1);backface-visibility:hidden;-webkit-backface-visibility:hidden;filter:drop-shadow(0 5px 7px var(--shadow));outline:none;-webkit-tap-highlight-color:transparent}
.cai-leaf.up{transform:rotateX(178deg);pointer-events:none}
.cai-leaf:focus-visible .cai-leaf-tab{outline:2px solid var(--red,#a54a42);outline-offset:3px}
.cai-leaf .cai-cloth{position:absolute;inset:0;height:auto;margin:0}
.cai-leaf .cai-cloth img{transform:none}
.cai-leaf:hover .cai-cloth img{transform:none}
.cai-leaf-tab{position:absolute;left:14px;bottom:9px;z-index:4;display:flex;align-items:baseline;gap:10px;height:calc(var(--step) - 11px);padding:0 10px;background:#fff;color:var(--ink,#171717);box-shadow:0 1px 2px rgba(0,0,0,.35);white-space:nowrap}
.cai-leaf-tab small{font:500 9.5px/19px var(--mono,monospace);letter-spacing:.14em;color:var(--red,#a54a42)}
.cai-leaf-tab b{font:600 12px/19px var(--sans,sans-serif);letter-spacing:.02em}
.cai-leaf.is-current .cai-leaf-tab{box-shadow:0 1px 2px rgba(0,0,0,.35),inset 3px 0 var(--red,#a54a42)}
.cai-book-info{transition:opacity .24s,transform .24s}
.cai-book-info.is-swap{opacity:0;transform:translateY(8px)}
.cai-book-info .cai-detail-no{color:inherit}
.cai-book-info h3{font:600 clamp(24px,2.4vw,32px)/1.4 var(--sans,sans-serif);margin-top:10px}
.cai-book-info dl{margin-top:20px;border-top:1px solid var(--ui-line)}
.cai-book-info dl div{display:flex;gap:18px;padding:10px 0;border-bottom:1px solid var(--ui-line);font-size:15px}
.cai-book-info dt{font:500 11px/1.9 var(--mono,monospace);letter-spacing:.16em;width:60px;flex:none;opacity:.65}
.cai-book-desc{margin-top:20px;font-size:16px;line-height:1.9;opacity:.86}
.cai-book-acts{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:26px}
.cai-book-go{display:inline-flex;align-items:center;gap:20px;background:var(--ui);color:var(--wall);padding:16px 24px;font:600 15px/1 var(--sans,sans-serif);box-shadow:inset 0 -3px var(--red,#a54a42);text-decoration:none}
.cai-book-go::after{content:"→";transition:transform .5s var(--ease)}
.cai-book-go:hover::after{transform:translateX(6px)}
.cai-book-hint{margin-top:18px;font:500 11px/1.6 var(--mono,monospace);letter-spacing:.12em;opacity:.6}

/* ---------- 3. 反物（棒に掛けた反物から生地を引き出す） ---------- */
.cai-rack[data-concept="rolls"]{--rw:210px;--gap:40px;height:660px}
.cai-rod{top:81px;height:12px}
.cai-roll{position:relative;flex:none;display:block;width:var(--rw);margin-top:58px;height:max-content;color:inherit;text-decoration:none;outline:none;-webkit-tap-highlight-color:transparent}
.cai-roll:focus-visible .cai-roll-cyl{outline:2px solid var(--red,#a54a42);outline-offset:6px}
/* 巻いた生地：表は写真＋巻きの層、両端は年輪のような断面 */
.cai-roll-cyl{position:relative;z-index:3;display:block;height:58px;margin:0 -4px;background:
  linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,.06) 20%,rgba(0,0,0,0) 42%,rgba(0,0,0,.3) 74%,rgba(0,0,0,.7)),
  repeating-linear-gradient(180deg,rgba(0,0,0,.24) 0 1px,rgba(255,255,255,.08) 1px 2px,transparent 2px 5px),
  var(--img) center/cover;
  background-position:0 0,0 0,center;transition:background-position 1.1s var(--ease);
  box-shadow:0 16px 18px -8px var(--shadow)}
.cai-roll.open .cai-roll-cyl{background-position:0 0,0 40px,center}
.cai-roll-cyl::before,.cai-roll-cyl::after{content:"";position:absolute;top:0;bottom:0;width:18px;border-radius:50%;background:
  radial-gradient(ellipse closest-side,#25272b 0 22%,transparent 26%),
  repeating-radial-gradient(ellipse closest-side,rgba(0,0,0,.28) 0 1px,transparent 1px 3px),
  var(--img) center/cover;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.3),inset -4px 0 6px rgba(0,0,0,.35),0 6px 10px -4px var(--shadow)}
.cai-roll-cyl::before{left:-9px}
.cai-roll-cyl::after{right:-9px}
.cai-roll-sticker{position:absolute;left:14px;top:50%;transform:translateY(-50%);z-index:2;display:block;max-width:calc(100% - 28px);background:#fff;color:var(--ink,#171717);padding:5px 10px 6px;box-shadow:0 1px 3px rgba(0,0,0,.4)}
.cai-roll-sticker small{display:block;font:500 9px/1.4 var(--mono,monospace);letter-spacing:.16em;color:var(--red,#a54a42)}
.cai-roll-sticker b{display:block;font:600 12px/1.35 var(--sans,sans-serif);letter-spacing:.02em}
.cai-roll .cai-clothwrap{margin-top:-8px;transform:skewX(calc(var(--sway,0deg) * -1))}
.cai-roll .cai-cloth{height:calc(var(--len) * .4);margin:0 2px;transition:height 1.1s var(--ease)}
.cai-roll.open .cai-cloth{height:var(--len)}
.cai-roll .cai-cloth img{height:var(--len);object-position:50% 0;transform:none}
.cai-roll:hover .cai-cloth img{transform:none}
.cai-roll .cai-fringe{display:block;height:15px;margin:0 3px;background:var(--img) center top/cover no-repeat;-webkit-mask-image:repeating-linear-gradient(90deg,#000 0 1.3px,transparent 1.3px 3px),linear-gradient(#000 20%,transparent);-webkit-mask-composite:source-in;mask-image:repeating-linear-gradient(90deg,#000 0 1.3px,transparent 1.3px 3px),linear-gradient(#000 20%,transparent);mask-composite:intersect}

/* ---------- 4. 裁断台（方眼の台に布を広げる） ---------- */
.cai-rack[data-concept="table"]{height:720px;cursor:auto;touch-action:auto;--grid:rgba(39,58,87,.14);--grid2:rgba(39,58,87,.06)}
.cai-rack[data-concept="table"][data-wall=navy],.cai-rack[data-concept="table"][data-wall=black]{--grid:rgba(255,255,255,.15);--grid2:rgba(255,255,255,.055)}
.cai-table{position:absolute;inset:0;background-image:
  linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px),
  linear-gradient(var(--grid2) 1px,transparent 1px),linear-gradient(90deg,var(--grid2) 1px,transparent 1px);
  background-size:100px 100px,100px 100px,20px 20px,20px 20px;background-position:-1px -1px}
.cai-table::before{content:"";position:absolute;left:0;right:0;top:0;height:14px;background:
  repeating-linear-gradient(90deg,var(--ui-line) 0 1px,transparent 1px 100px) left top/100% 14px no-repeat,
  repeating-linear-gradient(90deg,var(--ui-line) 0 1px,transparent 1px 10px) left top/100% 6px no-repeat;pointer-events:none}
.cai-piece{position:absolute;left:0;top:0;display:block;width:var(--pw,200px);height:var(--ph,252px);color:inherit;text-decoration:none;cursor:grab;touch-action:none;will-change:transform;outline:none;-webkit-tap-highlight-color:transparent}
.cai-piece:focus-visible .cai-piece-tag{outline:2px solid var(--red,#a54a42);outline-offset:3px}
.cai-piece .cai-clothwrap{position:absolute;inset:0;margin:0;transform:none;filter:drop-shadow(0 5px 5px var(--shadow));transition:filter .35s,transform .35s var(--ease)}
.cai-piece .cai-cloth{position:absolute;inset:0;height:auto;margin:0}
.cai-piece .cai-cloth img{transform:none}
.cai-piece .cai-fold{background:linear-gradient(150deg,rgba(255,255,255,.12),rgba(255,255,255,0) 40%,rgba(0,0,0,0) 62%,rgba(0,0,0,.14))}
.cai-piece.is-lift{cursor:grabbing}
.cai-piece.is-lift .cai-clothwrap{filter:drop-shadow(0 26px 22px var(--shadow));transform:scale(1.04)}
.cai-pin{position:absolute;left:50%;top:16px;z-index:3;width:13px;height:13px;margin-left:-6px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#f2b0a8 0 16%,var(--red,#a54a42) 46%,#5a1712);box-shadow:0 3px 4px rgba(0,0,0,.4)}
.cai-pin::after{content:"";position:absolute;left:6px;top:10px;width:1.4px;height:30px;background:linear-gradient(#f4f4f4,#8b8f96);transform:rotate(-24deg);transform-origin:50% 0;box-shadow:0 2px 2px rgba(0,0,0,.25)}
.cai-piece-tag{position:absolute;left:12px;bottom:16px;z-index:3;display:block;max-width:calc(100% - 24px);background:#fff;color:var(--ink,#171717);padding:7px 11px 8px;box-shadow:0 1px 3px rgba(0,0,0,.35)}
.cai-piece-tag small{display:block;font:500 9px/1.4 var(--mono,monospace);letter-spacing:.16em;color:var(--red,#a54a42)}
.cai-piece-tag b{display:block;font:600 13px/1.4 var(--sans,sans-serif);letter-spacing:.02em}
.cai-modes button{width:auto;padding:0 18px;font:500 13px/1 var(--sans,sans-serif)}
.cai-table.is-touch{display:flex;gap:30px;align-items:center;overflow-x:auto;overscroll-behavior-inline:contain;padding:24px 26px 74px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.cai-table.is-touch .cai-piece{position:relative;flex:none;width:210px;height:264px;transform:rotate(var(--r));scroll-snap-align:center;touch-action:auto}

/* ---------- 小道具の画像（assets/props/ に置くと自動で使う。切り替えバーの「小道具」で比較） ---------- */
.cai-rack[data-propmode=img][data-props~=rail] .cai-rail{background:url(assets/props/rail.webp) left center/auto 100% repeat-x}
/* フック画像：曲がりの内側（画像の高さ36%）がレールの上端に乗り、軸の下端が札のハトメに届く大きさ */
.cai-rack[data-propmode=img][data-props~=hook] .cai-hook{background:url(assets/props/hook.webp) 50% -8px/45px 72px no-repeat}
.cai-rack[data-propmode=img][data-props~=hook] .cai-hook path{stroke:none}
.cai-rack[data-propmode=img][data-props~=eyelet] .cai-head::before{background:url(assets/props/eyelet.webp) center/contain no-repeat}
.cai-rack[data-propmode=img][data-props~=paper] :is(.cai-head,.cai-roll-sticker,.cai-piece-tag,.cai-leaf-tab,.cai-book-bind){background-image:url(assets/props/paper.webp);background-size:256px;background-blend-mode:multiply}
/* しわ：生成した陰影（50%グレー中心）＋両端と上端の影を、写真にソフトライトで重ねる */
.cai-rack{--drape-edge:linear-gradient(90deg,rgba(0,0,0,.4),rgba(0,0,0,0) 12%,rgba(0,0,0,0) 86%,rgba(0,0,0,.4)),linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,0) 9%)}
.cai-rack[data-propmode=img][data-props~=drape] :is(.cai-hanger,.cai-roll) .cai-fold{background:var(--drape-edge),url(assets/props/drape-1.webp) center/100% 100% no-repeat;mix-blend-mode:soft-light;filter:contrast(1.7)}
.cai-rack[data-propmode=img][data-props~=drape] :is(.cai-hanger,.cai-roll):nth-child(3n+2) .cai-fold{background-image:var(--drape-edge),url(assets/props/drape-2.webp)}
.cai-rack[data-propmode=img][data-props~=drape] :is(.cai-hanger,.cai-roll):nth-child(3n) .cai-fold{background-image:var(--drape-edge),url(assets/props/drape-3.webp)}
.cai-rack[data-propmode=img][data-props~=clip][data-design="3"] .cai-clipbar{height:calc((var(--hw) + 12px) / 4);margin:-14px -6px 0;background:url(assets/props/clip-hanger.webp) center top/100% 100% no-repeat;box-shadow:none}
.cai-rack[data-propmode=img][data-props~=clip][data-design="3"] .cai-clipbar i{display:none}
.cai-rack[data-propmode=img][data-props~=clip][data-design="3"] .cai-clothwrap{margin-top:calc((var(--hw) + 12px) / -4 * .52)}
.cai-rack[data-propmode=img][data-props~=pin] .cai-pin{width:24px;height:48px;margin-left:-8px;top:4px;border-radius:0;background:url(assets/props/pin.webp) center/contain no-repeat;box-shadow:none;filter:drop-shadow(0 3px 2px rgba(0,0,0,.35))}
.cai-rack[data-propmode=img][data-props~=pin] .cai-pin::after{display:none}

@media (max-width:860px){
  .cai-rack{--hw:206px;--gap:32px;height:580px}
  .cai-rack[data-concept="rail"]{height:600px}
  .cai-book-wrap{grid-template-columns:1fr;justify-items:center;gap:28px;padding:30px 20px 40px}
  .cai-book{--bw:min(340px,calc(100vw - 64px));--base:240px;--step:27px}
  .cai-book-info{width:100%;max-width:440px}
  .cai-rack[data-concept="rolls"]{--rw:184px;--gap:28px;height:600px}
  .cai-rack[data-concept="table"]{height:420px}
  .cai-rack[data-design="3"]{--hw:222px}
  .cai-rack-ui p{display:none}
  .cai-rack-ui{justify-content:flex-end}
  .cai-detail-in{grid-template-columns:1fr;gap:20px;max-height:100%;overflow:auto}
  .cai-detail-img{height:40vh;aspect-ratio:auto;width:100%}
}