/* Works（タブのフォルダ）。works/folder.html をもとに、works/DESIGN.md §3〜§5 の決定を入れた版（2026-10-20） */
#works{padding:120px 0 100px;background:#fff}
#works .head{text-align:center;margin-bottom:36px}
#works .head .lead{margin-top:14px}
.wk-stage{position:relative;width:min(880px,calc(100% - 32px));margin:0 auto;overflow:hidden;transition:height .3s var(--ease)}
.wk-stage .sheet,.wk-stage .peek{position:absolute;left:var(--x);top:var(--y);width:var(--sw);
  transform:translate(var(--px,0px),var(--dy,0px));transition:transform .24s var(--ease),filter .3s,opacity .3s}
.wk-stage .sheet{display:block;cursor:pointer;text-decoration:none;color:var(--navy)}
.wk-stage .paper{display:block;width:100%;filter:drop-shadow(0 -2px 6px rgba(21,26,89,.10))}
.wk-stage .tab-label{position:absolute;top:0;left:var(--tx0);width:var(--tw);height:var(--th);display:flex;align-items:center;justify-content:center;gap:.5em;
  font-weight:700;font-size:var(--fs);letter-spacing:.12em;white-space:nowrap}
.wk-stage .tab-label::before{content:'';width:.42em;height:.42em;border-radius:50%;background:var(--coral);flex:none}
.wk-stage .tab-label.en{font:600 var(--fs)/1 'Outfit',sans-serif;letter-spacing:.2em}
.wk-stage .band{position:absolute;top:calc(var(--th) + var(--band) * .5);translate:0 -50%;font-size:calc(var(--fs) * .78);letter-spacing:.1em;opacity:.6;white-space:nowrap;transition:opacity .12s}
.wk-stage .band b{font:600 1em/1 'Outfit',sans-serif;letter-spacing:.2em;margin-right:1.2em}
.wk-stage .sheet.behind .band{opacity:0}
.wk-stage .sheet.cover{cursor:default;color:#fff}
.wk-stage .sheet.cover .tab-label{font:600 var(--fs)/1 'Outfit',sans-serif;letter-spacing:.24em}
.wk-stage .cover-body{position:absolute;left:8%;right:8%;top:calc(var(--th) + var(--band) * 1.1)}
.wk-stage .cover-body h3{font:600 clamp(40px,calc(var(--sw) * .085),76px)/1 'Outfit',sans-serif;letter-spacing:.02em}
.wk-stage .cover-body h3 i{display:inline-block;width:.16em;height:.16em;border-radius:50%;background:var(--coral);margin-left:.04em}
.wk-stage .cover-body p{font-size:max(12px,calc(var(--sw) * .018));letter-spacing:.14em;margin-top:1.2em;opacity:.8}

/* 合わせたとき：作品が扇のように飛び出す */
.wk-stage .peek{pointer-events:none}
.wk-stage .pk{position:absolute;bottom:calc(var(--sh) * -0.14);width:calc(var(--sw) * var(--pw));aspect-ratio:4/5;border-radius:4px;overflow:hidden;background:#fbf8f3;
  box-shadow:0 8px 22px rgba(21,26,89,.20);transform-origin:50% 100%;transform:translateY(110%) rotate(0deg);opacity:0;
  transition:transform .42s cubic-bezier(.34,1.45,.64,1),opacity .1s linear}
.wk-stage .pk img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.wk-stage .pk.ph{display:flex;align-items:center;justify-content:center;border:1px dashed #c8c3b8;font:600 11px/1 'Outfit',sans-serif;letter-spacing:.2em;color:#a7a196}
.wk-stage .peek.on .pk{transform:translateY(0) rotate(var(--r));opacity:1}
.wk-stage .peek.on .pk:nth-child(2){transition-delay:.05s}
.wk-stage .peek.on .pk:nth-child(3){transition-delay:.10s}

/* 開いたとき：ほかの紙は消え、紺の表紙だけが見開きの下にうっすら（白を重ねる）。表紙を押すと閉じる */
.wk-stage.open .sheet:not(.cover),.wk-stage.open .peek{opacity:0;pointer-events:none;filter:blur(6px)}
.wk-stage.open .sheet.cover{cursor:pointer;filter:blur(1.5px)}
.wk-stage::after{content:'';position:absolute;inset:0;z-index:40;background:rgba(255,255,255,.68);opacity:var(--veil,0);pointer-events:none}
.wk-stage .book{position:absolute;inset:0;z-index:60;pointer-events:none;display:none;perspective:2200px}
.wk-stage.open .book{display:block}
.wk-stage .bk{position:absolute;left:0;top:0;width:var(--sw);transform-origin:50% 50%;pointer-events:auto;cursor:pointer}
.wk-stage .flap{position:absolute;transform-origin:0 50%;transform-style:preserve-3d}
.wk-stage .face{position:absolute;inset:0;backface-visibility:hidden;overflow:hidden;border-radius:0 6px 6px 0}
.wk-stage .face.back{transform:rotateY(180deg);border-radius:6px 0 0 6px}
.wk-stage .face .bk{pointer-events:none}
.wk-stage .shade{position:absolute;inset:0;pointer-events:none}

/* 見開きの中：細かい分類ごとに見出し → 同じ大きさの枠を左から4つずつ（スマホは2つ）。中だけ縦にスクロール */
.wk-stage .spread{position:absolute;z-index:35;pointer-events:auto;opacity:0}
.wk-stage .sc{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:auto;scrollbar-width:thin;scrollbar-color:rgba(21,26,89,.25) transparent;
  padding:calc(var(--p) * 1.1) var(--p) calc(var(--p) * 2);
  -webkit-mask-image:linear-gradient(#000 calc(100% - 56px),transparent);mask-image:linear-gradient(#000 calc(100% - 56px),transparent)}
.wk-stage .sp-title{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.wk-stage .sp-title h3{font-size:clamp(18px,2.2vw,24px);letter-spacing:.1em}
.wk-stage .sp-title h3::after{content:'';display:inline-block;width:.24em;height:.24em;border-radius:50%;background:var(--coral);margin-left:.15em}
.wk-stage .sp-title span{font:600 11px/1 'Outfit',sans-serif;letter-spacing:.24em;opacity:.6}
.wk-stage .sub{margin-top:calc(var(--p) * 1.1)}
.wk-stage .sub-h{display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid rgba(21,26,89,.18);padding-bottom:8px}
.wk-stage .sub-h b{font-size:14px;letter-spacing:.1em}
.wk-stage .sub-h a{font:600 11px/1 'Outfit',sans-serif;letter-spacing:.18em;color:var(--navy);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:3px}
.wk-stage .grid{display:grid;grid-template-columns:repeat(4,1fr);column-gap:var(--g);row-gap:18px;margin-top:14px}
.wk-stage .grid > :nth-child(4n+2){margin-right:var(--spine)}   /* 背の線を真ん中のすき間に */
.wk-stage .grid > :nth-child(4n+3){margin-left:var(--spine)}
.wk-stage .wk{display:block;text-decoration:none;color:var(--navy);min-width:0;opacity:0}
.wk-stage .fr{display:block;aspect-ratio:4/5;border-radius:4px;overflow:hidden;background:#fbf8f3;box-shadow:0 6px 16px rgba(21,26,89,.14);transition:transform .25s var(--ease),box-shadow .25s}
.wk-stage a.wk:hover .fr{transform:translateY(-3px);box-shadow:0 12px 24px rgba(21,26,89,.18)}
.wk-stage .fr video,.wk-stage .fr img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.wk-stage .wk.slot .fr{display:flex;align-items:center;justify-content:center;text-align:center;border:1px dashed #c8c3b8;box-shadow:none;
  font-size:10.5px;line-height:1.7;letter-spacing:.06em;color:#9b968c;padding:10px}
.wk-stage .cap{display:block;margin-top:8px;font-size:12px;line-height:1.5;letter-spacing:.04em}
.wk-stage .cap small{display:block;font:500 10px/1.4 'Outfit',sans-serif;letter-spacing:.14em;opacity:.6;margin-top:2px}
.wk-stage .grid.two{grid-template-columns:repeat(2,1fr)}
.wk-stage .grid.two > *{margin:0!important}

.wk-stage .close{position:absolute;right:12px;top:12px;z-index:99;font:600 12px/1 'Outfit',sans-serif;letter-spacing:.2em;padding:10px 12px;
  border:1px solid var(--navy);border-radius:99px;background:#fff;color:var(--navy);opacity:0;pointer-events:none;transition:opacity .2s;cursor:pointer}
.wk-stage.open .close{opacity:1;pointer-events:auto}
@media (prefers-reduced-motion: reduce){.wk-stage,.wk-stage .sheet,.wk-stage .peek,.wk-stage .pk{transition:none!important}}
@media (max-width:760px){#works{padding:88px 0 72px}}