/* =========================================================
   WORKS 作品ページ（works/works_*.html）
   一覧と同じ構造。左に作品名・説明・データ・前後の作品を固定し、
   右に写真が流れる。
   ========================================================= */
.wd{
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 40px 0;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 80px;
  align-items: start;
}
.wd img{ max-width: 100%; }

/* ---- 左：固定される欄 ---- */
.wd-side{
  position: sticky;
  top: 80px;
  height: calc(100vh - 80px);
  box-sizing: border-box;
  padding: 106px 0 48px;            /* 一覧の WORKS と作品名の天端を揃える */
  display: flex;
  flex-direction: column;
}
.wd-side__inner{
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
.wd-head{
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;                 /* 文章が長い場合は左欄の中で送る（下の矢印は動かない） */
  scrollbar-width: none;
  padding-right: 4px;
}
.wd-head.is-scrollable{                  /* 続きがあるときだけ、下端を淡く */
  mask-image: linear-gradient(to bottom, #000 calc(100% - 40px), transparent);
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 40px), transparent);
}
.wd-head::-webkit-scrollbar{ display: none; }
.wd-kind{
  font-size: 10px;
  letter-spacing: 0.3em;
  color: #a19d99;
  margin: 0 0 14px;
}
.wd-kind span::before{ content: '\2014'; margin: 0 8px; }
.wd-title{
  font-size: 18px;                  /* 300px 幅で二行に収まる大きさ */
  font-weight: normal;
  letter-spacing: 0.08em;
  line-height: 1.7;
  color: #4d4946;
  margin: 0 0 10px;
}
.wd-sub{
  font-size: 12px;
  letter-spacing: 0.06em;
  line-height: 1.9;
  color: #8a8683;
  margin: 0 0 28px;
}
/* 本文（CONCEPT）は畳んでおく。〇 から波紋が静かに広がる */
.wd-toggle{
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: 4px 0 8px;
  padding: 4px 0;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 0.3em;
  color: #4d4946;
  cursor: pointer;
  transition: color .3s;
}
.wd-toggle:hover{ color: #8a8683; }
.wd-toggle__mark{ position: relative; width: 12px; height: 12px; flex: 0 0 12px; }
.wd-toggle__mark::before{                       /* ○ 白に薄い線 */
  content: ''; position: absolute; inset: 2px; border-radius: 50%;
  background: #fff; box-shadow: inset 0 0 0 1px #c8c4bf; transition: box-shadow .3s;
}
.wd-toggle__mark::after{                        /* 波紋 */
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid #b5b2ae; opacity: 0; transform: scale(.5);
}
.wd-toggle[aria-expanded="false"] .wd-toggle__mark::after{ animation: wd-ripple 3.6s cubic-bezier(.2,.5,.3,1) infinite; }
.wd-toggle[aria-expanded="true"] .wd-toggle__mark::before{ box-shadow: inset 0 0 0 1px #4d4946; }
@keyframes wd-ripple{
  0%{ opacity: 0; transform: scale(.5); }
  12%{ opacity: .6; }
  70%{ opacity: 0; transform: scale(3.2); }
  100%{ opacity: 0; transform: scale(3.2); }
}
@media (prefers-reduced-motion: reduce){ .wd-toggle .wd-toggle__mark::after{ animation: none; } }
.wd-more{
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .55s cubic-bezier(.3,0,.2,1);
}
.wd-more__inner{ overflow: hidden; opacity: 0; transition: opacity .45s ease; }
.wd-more.is-open{ grid-template-rows: 1fr; }
.wd-more.is-open .wd-more__inner{ opacity: 1; transition-delay: .15s; }
.wd-more .wd-lead{ padding-top: 10px; margin-bottom: 8px; }

.wd-lead{
  font-size: 13px;
  line-height: 2.1;
  letter-spacing: 0.04em;
  color: #4d4946;
  margin: 0 0 28px;
}
.wd-lead--en{
  font-family: 'Shippori Mincho B1', Georgia, serif;
  font-size: 11.5px;
  line-height: 1.9;
  letter-spacing: 0.02em;
  color: #8a8683;
  margin: -12px 0 28px;
}
.wd-notice{
  font-size: 10px;
  line-height: 1.8;
  letter-spacing: 0.02em;
  color: #a19d99;
  margin: 0 0 20px;
  padding-top: 18px;
  border-top: 1px solid #e3e1de;         /* 文章との区切り */
}
.wd-lead a{ color: inherit; border-bottom: 1px solid #d5d2ce; text-decoration: none; }
.wd-meta{
  margin: 0 0 22px;
  padding: 18px 0 0;
  border-top: 1px solid #e3e1de;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.wd-meta div{ display: flex; align-items: baseline; gap: 14px; }
.wd-meta dt{
  flex: 0 0 52px;
  font-size: 10px;
  letter-spacing: 0.25em;
  color: #a19d99;
}
.wd-meta dd{
  font-size: 12px;
  letter-spacing: 0.05em;
  line-height: 1.7;
  color: #6f6b67;
  margin: 0;
}
.wd-meta a{ color: inherit; text-decoration: none; border-bottom: 1px solid #d5d2ce; transition: border-color .3s; }
.wd-meta a:hover{ border-color: #4d4946; }

.wd-hero-m{ display: none; margin: 0; }

/* 何枚目か：写真の右に、縦の細い線と数字 */
.wd-count{
  position: fixed;
  top: 50%;
  right: max(56px, calc((100vw - 1360px) / 2 + 56px));   /* 写真の右外。写真側は padding-right で空けてある */
  transform: translate(50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  z-index: 5;
  transition: opacity .4s ease;
}
.wd-count.is-off{ opacity: 0; pointer-events: none; }
.wd-count__bar{ width: 1px; height: 120px; background: #e3e1de; position: relative; }
.wd-count__bar i{ position: absolute; left: 0; top: 0; width: 1px; height: 0; background: #4d4946; transition: height .7s cubic-bezier(.3,0,.2,1); }
.wd-count__num{ font-size: 10px; letter-spacing: 0.15em; line-height: 1.8; color: #a19d99; text-align: center; }
.wd-count__num b{ font-weight: normal; color: #4d4946; }

/* 前後の作品：左欄の下 */
.wd-nav{
  margin-top: auto;
  padding-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.wd-nav{ flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0 28px; }
.wd-nav a{ color: #4d4946; text-decoration: none; }
.wd-nav__prev, .wd-nav__next{ display: inline-flex; padding: 6px 0; }
.wd-nav__arrow{ font-size: 16px; line-height: 1; letter-spacing: 0; transition: transform .35s ease, color .3s; }
.wd-nav__prev:hover .wd-nav__arrow{ transform: translateX(-4px); }
.wd-nav__next:hover .wd-nav__arrow{ transform: translateX(4px); }
.wd-nav__all{
  margin-top: 0;
  margin-left: 12px;
  align-self: center;
  font-size: 10px;
  letter-spacing: 0.3em;
  padding-bottom: 4px;
  border-bottom: 1px solid #4d4946;
  transition: color .3s, border-color .3s;
}
.wd-nav__all:hover{ color: #8a8683; border-color: #8a8683; }

.wd-nav--bottom{ display: none; }

/* ---- 右：写真 ----
   一枚ごとに画面の高さの枠を持ち、写真はその枠の中央。枠は画面に固定され、
   スクロールすると次の枠が下から重なってくる（切り替えではなく、滑り込み）。
   枠を画面より少し短くして、次の写真の上端が常に下に覗くようにする。 */
.wd-body{ padding: 0 56px 12vh 0; --slot: calc(92vh - 80px); --peek: 8vh; }
.wd-body > .wd-img,
.wd-body > .wd-pair{
  position: sticky;
  top: 80px;
  height: var(--slot);
  box-sizing: border-box;
  margin: 0;
  padding: 4vh 0;
  background: #fff;                 /* 前の写真を覆う */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.wd-body > .wd-img + .wd-img,
.wd-body > .wd-img + .wd-pair,
.wd-body > .wd-pair + .wd-img,
.wd-body > .wd-pair + .wd-pair{ margin-top: calc(var(--peek) * -1); }   /* 前の枠に覗きぶんだけ重ねる */
.wd-body > .wd-img:first-child{ margin-top: 0; }
.wd-body > .wd-img img,
.wd-body > .wd-pair img{
  filter: grayscale(calc(1 - var(--p, 1)));
  opacity: calc(.12 + .88 * var(--p, 1));
}
.wd-img img{
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: calc(var(--slot) - 8vh - 2.4em);   /* 縦長でも上下に余白が残る */
  object-fit: contain;
}
.wd-hero{ position: relative; }
.wd-hero--video .wd-video{ width: 100%; aspect-ratio: 16 / 9; background: #000; }
.wd-video iframe{ display: block; width: 100%; height: 100%; border: 0; }
.wd-hero--vr{ position: relative; }
.wd-hero--vr img{ position: relative; }
.wd-vr-btn{
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-size: 12px;
  letter-spacing: 0.3em;
  color: #fff;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,.85);
  padding: 18px 40px 16px;
  background: rgba(40,36,34,.35);
  backdrop-filter: blur(2px);
  transition: background .3s;
}
.wd-vr-btn:hover{ background: rgba(40,36,34,.6); }
.wd-img figcaption,
.wd-pair figcaption{
  font-size: 11px;
  letter-spacing: 0.08em;
  line-height: 1.9;
  color: #a19d99;
  margin: 10px 0 0;
  align-self: stretch;
}
.wd-body > .wd-pair{
  flex-direction: row;               /* 横二列（枠の縦並び指定より優先） */
  justify-content: center;
  gap: 32px;
  overflow: hidden;
}
.wd-pair .wd-img{ flex: 1 1 0; min-width: 0; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.wd-pair .wd-img img{ max-height: calc(var(--slot) - 8vh - 2.4em); }

/* 一枚の枠の中で、写真が数秒ごとに溶けるように入れ替わる */
.wd-body > .wd-fade{
  display: grid; align-items: center; justify-items: center; overflow: hidden;   /* 枠の縦並び指定より優先 */
  filter: grayscale(calc(1 - var(--p, 1)));                                        /* 覗いているときの色抜きは枠ごと */
  opacity: calc(.12 + .88 * var(--p, 1));
}
.wd-body > .wd-fade img{ grid-area: 1 / 1; filter: none; opacity: 0; }             /* 個々の写真は JS が不透明度を動かす */

/* 現れ方（下からわずかに） */
.fade_up{ opacity: 0; transition: opacity 1.2s ease; }
.fade_up.on{ opacity: 1; }

/* ---- タブレット・モバイル：上に文章、下に写真 ---- */
@media screen and (max-width: 1024px){
  .wd{ display: block; padding: 0 5px; }
  .wd-side{ position: static; height: auto; padding: 40px 0 0; }
  .wd-head, .wd-head.is-scrollable{ overflow: visible; padding: 0; mask-image: none; -webkit-mask-image: none; }
  .wd-title{ font-size: 20px; }
  .wd-lead{ font-size: 14px; line-height: 2; }
  .wd-nav{ display: none; }                    /* 小画面は写真の下に出す */
  .wd-count{ display: none; }
  .wd-body{ padding: 32px 0 96px; }
  .wd-count{ display: none; }
  .wd-hero-m{ display: block; margin: 8px -15px 28px; }          /* 題名の下に主画像。左右いっぱい */
  .wd-hero-m img{ display: block; width: 100%; height: auto; }
  .wd-body > .wd-img.wd-hero{ display: none !important; }        /* 上に出したぶん、本文側の一枚目は省く */
  .wd-body > .wd-fade{ display: block; filter: none; opacity: 1; }
  .wd-body > .wd-fade img{ opacity: 1 !important; position: static; margin-bottom: 28px; }   /* 小画面は切り替えず、順に見せる */
  .wd-body > .wd-img,
  .wd-body > .wd-pair{ position: static; height: auto; padding: 0; margin: 0 0 28px; display: block; }
  .wd-body > .wd-img + .wd-img,
  .wd-body > .wd-img + .wd-pair,
  .wd-body > .wd-pair + .wd-img,
  .wd-body > .wd-pair + .wd-pair{ margin-top: 0; }
  .wd-img img{ width: 100%; max-height: none; }
  .wd-pair{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .wd-pair .wd-img{ display: block; }
  .wd-vr-btn{ font-size: 11px; padding: 14px 28px 12px; }
  .wd-nav--bottom{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    padding: 24px 5px 96px;
    border-top: 1px solid #e3e1de;
    margin: 0 5px;
  }
  .wd-nav--bottom{ justify-content: center; gap: 0 40px; }
  .wd-nav--bottom .wd-nav__all{ margin: 0; }
}
@media screen and (max-width: 600px){
  .wd-pair{ grid-template-columns: 1fr; gap: 28px; }
}
/* ---- 一覧 ⇄ 作品ページ はページを読み込まずに切り替える（works.js）。幕は出さない ---- */
html.no-curtain .splashbg{ display: none !important; }