/* =========================================================
   'ilo 制作実績の一覧（works/index.html）
   レイヤー: 糸(1) → カード(2) → 針穴の留め玉(3)
   ========================================================= */

.wl { position: relative; }
.wl > *:not(.wl-thread):not(.wl-front) { position: relative; z-index: 2; }
.wl-thread, .wl-front {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  pointer-events: none; overflow: visible;
}
.wl-thread { z-index: 1; }
.wl-front { z-index: 3; }
.wl-eyelet { fill: var(--thread); stroke: var(--thread); stroke-width: .6px; opacity: 0; transition: opacity .5s var(--ease); }
.wl-eyelet.is-on, .wl-static .wl-eyelet { opacity: 1; }
.wl-knot { fill: var(--thread); }
.wl-tail { fill: none; stroke: var(--thread); stroke-width: 1.3px; stroke-linecap: round; }

/* ---------- タイトル ---------- */
.wl-hero {
  padding: calc(var(--header-h) + clamp(88px, 15vh, 168px)) var(--gutter) clamp(72px, 10vh, 120px);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: end;
}
.wl-hero__title { grid-column: 1 / span 7; }
.wl-hero__title .sec-title__en { font-size: clamp(104px, 16.5vw, 252px); line-height: .8; }
.wl-hero__side { grid-column: 8 / span 5; padding-bottom: 8px; }
.wl-hero__lead { font-size: 14.5px; line-height: 2.15; color: var(--mute); max-width: 26em; text-wrap: pretty; }

/* 区分への目次：英語名＋和文＋件数 */
.wl-index { margin-top: clamp(28px, 4vh, 44px); border-top: 1px solid var(--line); }
.wl-index a {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; column-gap: 16px;
  padding: 14px 2px 15px; border-bottom: 1px solid var(--line);
  transition: color .4s var(--ease);
}
.wl-index__en {
  font-family: var(--f-display); font-weight: 300; font-size: 26px; line-height: 1.2; letter-spacing: 0;
  font-variation-settings: "opsz" 36, "SOFT" 100, "WONK" 0;
}
.wl-index__ja { font-size: 12px; letter-spacing: .14em; color: var(--mute); }
.wl-index__ja [lang] { font-family: var(--f-en); font-size: 1.12em; letter-spacing: .04em; }
.wl-index__n {
  font-family: var(--f-display); font-style: italic; font-weight: 300; font-size: 18px; color: var(--mute);
  font-variation-settings: "opsz" 24, "SOFT" 100, "WONK" 0; font-variant-numeric: lining-nums;
}
.wl-index a:hover, .wl-index a:focus-visible { color: var(--thread); }

/* ---------- パンくず（詳細ページと共通の見た目） ---------- */
.wl-hero .w-crumb { top: calc(var(--header-h) + clamp(20px, 3.5vh, 36px)); }

/* ---------- 区分 ---------- */
.wl-sec { padding: var(--space-l) var(--gutter); }
.wl-sec__head { margin-bottom: clamp(56px, 8vw, 112px); }
.wl-sec__head .w-sec__ja [lang] { font-family: var(--f-en); font-size: 1.15em; letter-spacing: .06em; }
.wl-sec__lead { font-size: 14.5px; line-height: 2.15; max-width: 34em; text-wrap: pretty; }
.wl-sec__note { font-size: 12.5px; line-height: 2; letter-spacing: .06em; color: var(--mute); max-width: 34em; }
.wl-sec__lead + .wl-sec__note { margin-top: 14px; }
.wl-sec__note [lang], .wl-sec__lead [lang] { font-family: var(--f-en); font-size: 1.12em; letter-spacing: .02em; }
@media (min-width: 901px) {
  .wl-sec__head { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: clamp(32px, 4vw, 72px); align-items: end; }
  .wl-sec__head > p, .wl-sec__body { padding-bottom: 4px; }
}
@media (max-width: 900px) {
  .wl-sec__head > p, .wl-sec__body { margin-top: 28px; }
}
@media (min-width: 901px) {
  .wl-web .wl-sec__head { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
  .wl-web .wl-sec__head > .w-sec__title { grid-column: 1 / span 6; }
  .wl-web .wl-sec__head > .wl-sec__note { grid-column: 8 / span 5; }
}
/* SP：右端の余白を糸が下りるので、見出しまわりの文章は右を少しあける */
@media (max-width: 900px) {
  .wl-hero__side, .wl-web .wl-sec__head { padding-right: 30px; }
}

/* ---------- Website：左右に互い違い。右のカードは糸の分だけ下へ ---------- */
.wl-grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  /* row-gap：右のカードの側面から出た糸が、左のカードの説明文の下（24px 以上あけて）を通って、次の行の左のカードの上辺へ大きく曲がって入れる高さ */
  column-gap: var(--col-gap); row-gap: clamp(160px, 14vw, 200px);
}
.wl-card { position: relative; min-width: 0; }
.wl-card:nth-child(odd) { grid-column: 1 / span 6; }
.wl-card:nth-child(even) { grid-column: 8 / span 5; transform: translateY(var(--drop)); }
.wl-card:nth-child(even):last-child { margin-bottom: var(--drop); }
/* --drop：右のカードの画像の下端が、左のカード（説明文まで）の下端より 64px 以上下に来る量。
   糸は右のカードの側面から、左のカードの説明文の下を通って次のカードへ渡る（前のカードの裏を通らない） */
/* 広い画面では画像の高さの差（列幅×0.625）が幅とともに広がるので、上限 260px を超えて伸ばす
   （必要量 ≒ 説明文 115px + 余白（側面の針穴の可動域ぶん） + (列幅+24px)×0.625 ≒ 6.5vw + 156px） */
.wl-web { --drop: max(clamp(150px, calc(12vw + 116px), 260px), calc(6.5vw + 156px)); padding-bottom: calc(var(--space-l) + var(--drop) * .4); }

.wl-card__link { display: block; }
.wl-card__fig { margin: 0; }
.wl-card__img {
  position: relative; overflow: hidden; aspect-ratio: 16 / 10;
  background: var(--kinari); border-radius: 2px;
}
.wl-card__img img {
  width: 100%; height: 100%; object-fit: cover; object-position: left top;
  transform: scale(1.001); filter: saturate(.92);
  transition: transform 1.6s var(--ease), filter 1s var(--ease);
}
.wl-card__link:hover .wl-card__img img, .wl-card__link:focus-visible .wl-card__img img { transform: scale(1.04); filter: saturate(1); }

.wl-card__cap {
  display: grid; grid-template-columns: 2.6em minmax(0, 1fr) auto; column-gap: 14px;
  padding-top: 20px;
}
.wl-card__no {
  grid-column: 1; grid-row: 1 / span 3; padding-top: 3px;
  font-family: var(--f-display); font-style: italic; font-weight: 300; font-size: 17px; line-height: 1.4; color: var(--mute);
  font-variation-settings: "opsz" 24, "SOFT" 100, "WONK" 0; font-variant-numeric: lining-nums;
}
.wl-card__name, .wl-card__type, .wl-card__meta { grid-column: 2; }
.wl-card__name { font-size: 19px; font-weight: 500; line-height: 1.5; letter-spacing: .12em; transition: color .45s var(--ease); }
.wl-card__name[lang] { font-family: var(--f-en); font-weight: 400; font-size: 27px; line-height: 1.25; letter-spacing: .01em; }
.wl-card__name [lang] { font-family: var(--f-en); font-style: italic; font-weight: 400; font-size: 1.12em; letter-spacing: .02em; margin-left: .25em; }
.wl-card__type { margin-top: 4px; font-size: 13px; line-height: 1.9; letter-spacing: .1em; color: var(--mute); word-break: auto-phrase; }
.wl-card__meta {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; margin-top: 10px;
  font-size: 12.5px; line-height: 1.6; color: var(--mute);
}
.wl-card__tool { font-family: var(--f-en); font-style: italic; font-size: 15.5px; letter-spacing: .02em; }
.wl-card__kind { letter-spacing: .06em; }
.wl-card__kind [lang] { font-family: var(--f-en); font-size: 13.5px; letter-spacing: .14em; }
.wl-card__more {
  grid-column: 3; grid-row: 1; align-self: start; padding-top: 6px;
  font-size: 12px; letter-spacing: .16em; white-space: nowrap; color: var(--mute);
  background: linear-gradient(var(--thread), var(--thread)) 0 100% / 0 1px no-repeat;
  transition: background-size .6s var(--ease), color .4s var(--ease);
}
.wl-card__link:hover .wl-card__name, .wl-card__link:focus-visible .wl-card__name { color: var(--thread); }
.wl-card__link:hover .wl-card__more, .wl-card__link:focus-visible .wl-card__more { color: var(--thread); background-size: 100% 1px; }
.wl-card__link:focus-visible { outline-offset: 10px; }

/* ---------- Graphic：同じ大きさの台紙に並べる（台紙は 625:521） ---------- */
.wl-gfx { border-top: 1px solid var(--line); margin: 0 var(--gutter); padding-left: 0; padding-right: 0; }
.wl-gfx__grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: clamp(56px, 6vw, 88px) clamp(24px, 3vw, 44px);
}
.wl-g { min-width: 0; }
.wl-g__fig { margin: 0; max-width: 625px; }
.wl-g__mat {
  position: relative; overflow: hidden; aspect-ratio: 625 / 521;
  background: var(--kinari); border-radius: 2px;
}
/* 画像：等倍より大きくしない */
.wl-g__img { width: 100%; max-width: var(--max, 625px); height: 100%; object-fit: cover; }
/* 2言語版の対：A4縦の2枚を左右に並べる（原寸 1200px より大きくはならない）。ホバーで少し持ち上がる */
.wl-g__pair { position: absolute; inset: 0; display: flex; justify-content: center; align-items: center; gap: 4%; }
.wl-g__sheet {
  height: 76%; width: auto; max-height: 1697px; object-fit: contain; /* 縦横比は img の width/height 属性から */
  box-shadow: 0 0 0 1px rgba(46, 40, 38, .08), 0 18px 26px -22px rgba(46, 40, 38, .5);
  transition: transform 1s var(--ease), box-shadow 1s var(--ease);
}
.wl-g:hover .wl-g__sheet:first-child { transform: translateY(-4px) rotate(-1deg); }
.wl-g:hover .wl-g__sheet:last-child { transform: translateY(-4px) rotate(1deg); }
/* 準備中：中央に仕上がりの形の紙を置き、ブランド色の玉で留める */
.is-soon .wl-g__mat { box-shadow: inset 0 0 0 1px var(--line); }
.wl-g__paper {
  position: absolute; left: 50%; top: 45%; translate: -50% -50%;
  width: min(60%, calc(56% * var(--r))); aspect-ratio: var(--r);
  background: var(--ivory);
  box-shadow: 0 0 0 1px rgba(46, 40, 38, .1), 0 22px 32px -26px rgba(46, 40, 38, .45);
}
.wl-g__paper::before {
  content: ""; position: absolute; left: 50%; top: 9px; width: 7px; height: 7px; margin-left: -3.5px;
  border-radius: 50%; background: var(--thread);
}
.wl-g__soon, .wl-g__format {
  position: absolute; bottom: 12px; font-family: var(--f-en); font-size: 14px; line-height: 1.4; color: var(--mute);
}
.wl-g__soon { left: 16px; font-style: italic; letter-spacing: .04em; }
.wl-g__format { right: 16px; letter-spacing: .14em; }

.wl-g__cap { padding-top: 18px; }
.wl-g__title { font-size: 16.5px; font-weight: 500; line-height: 1.6; letter-spacing: .1em; word-break: auto-phrase; }
.wl-g__title [lang] { font-family: var(--f-en); font-size: 1.12em; letter-spacing: .02em; }
.wl-g__line { margin-top: 6px; font-size: 13px; line-height: 1.95; letter-spacing: .06em; color: var(--mute); }

/* ---------- ご相談 ---------- */
.wl .w-contact { border-top: 1px solid var(--line); margin: var(--space-m) var(--gutter) 0; padding-left: 0; padding-right: 0; }

/* ---------- 読み込み時に一度だけ：大見出しが布から浮かぶ ---------- */
.js .wl-hero__title .sec-title__en { animation: heroNo 1.5s var(--ease) both; }
.js .wl-hero__title .sec-title__ja, .js .wl-hero__side { animation: heroIn 1.2s var(--ease) .3s both; }

/* ---------- SP ---------- */
@media (max-width: 900px) {
  .wl-hero { display: block; padding-top: calc(var(--header-h) + 96px); }
  .wl-hero__title .sec-title__en { font-size: clamp(88px, 27vw, 150px); }
  .wl-hero__side { margin-top: 36px; }
  .wl-grid { display: flex; flex-direction: column; gap: 88px; }
  .wl-card:nth-child(odd) { margin-right: 11vw; }
  .wl-card:nth-child(even) { margin-left: 11vw; transform: none; }
  .wl-card:nth-child(even):last-child { margin-bottom: 0; }
  .wl-web { padding-bottom: var(--space-l); }
  .wl-card__cap { grid-template-columns: 2.2em minmax(0, 1fr); }
  .wl-card__name { font-size: 17.5px; }
  .wl-card__name[lang] { font-size: 23px; }
  .wl-card__more { grid-column: 2; grid-row: auto; justify-self: start; margin-top: 12px; padding-top: 0; }
}

/* ---------- Coding：PC・スマートフォン・ページ全体を並べて、カードの中で完結 ---------- */
.wl-coding { border-top: 1px solid var(--line); margin: 0 var(--gutter); padding-left: 0; padding-right: 0; }
.wl-code__shots {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 2fr) minmax(0, 3.4fr);
  gap: clamp(18px, 2vw, 32px); align-items: start;
}
.wl-code__shots figure { margin: 0; min-width: 0; }
.wl-code__frame, .wl-code__scroll {
  border-radius: 4px; overflow: hidden; background: var(--kinari); box-shadow: 0 0 0 1px var(--line);
}
.wl-code__frame img { width: 100%; }
.wl-code__phone {
  padding: 6px; border-radius: 22px; background: var(--sumi);
  box-shadow: 0 24px 40px -30px var(--shadow-device);
  max-width: 220px;
}
.wl-code__phone img { width: 100%; border-radius: 16px; background: var(--white); }
/* メニューページの全体：PC画面と同じ高さの窓。中を自分でスクロールして見る */
.wl-code__scroll {
  height: var(--code-h, 380px); overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
}
.wl-code__scroll img { width: 100%; }
.wl-code__scroll:focus-visible { outline-offset: 4px; }
.wl-code__text {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: clamp(32px, 4vw, 72px);
  margin-top: clamp(32px, 4vw, 52px);
}
.wl-code__text > :not(.wl-code__name):not(.wl-card__type) { grid-column: 2; }
.wl-code__name, .wl-code__text > .wl-card__type { grid-column: 1; }
.wl-code__text > .wl-card__type { grid-row: 2; margin-top: 4px; }
.wl-code__name { grid-row: 1; font-family: var(--f-en); font-weight: 400; font-size: 30px; line-height: 1.2; letter-spacing: .01em; }
.wl-code__pages { grid-row: 1; display: flex; flex-wrap: wrap; gap: 6px 10px; align-self: center; }
.wl-code__pages li {
  font-family: var(--f-en); font-size: 14px; letter-spacing: .08em; line-height: 1;
  padding: 6px 12px 7px; border: 1px solid var(--line-strong); border-radius: 999px;
}
.wl-code__line { grid-row: 2; margin-top: 14px; font-size: 14px; line-height: 2.05; max-width: 34em; }
.wl-code__text > .wl-card__meta { grid-row: 3; }
@media (max-width: 900px) {
  .wl-code__shots { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
  .wl-code__pc { grid-column: 1 / -1; }
  .wl-code__phone { max-width: none; }
  .wl-code__text { display: block; }
  .wl-code__pages { margin-top: 18px; }
}

/* PC：スマートフォン画像は PC 画面と同じ高さにそろえる（JS で --code-h を入れる） */
@media (min-width: 901px) {
  .wl-code__shots { grid-template-columns: minmax(0, 6fr) auto minmax(0, 3.4fr); }
  .wl-code__phone { max-width: none; width: fit-content; }
  .wl-code__phone img { height: calc(var(--code-h, 380px) - 12px); width: auto; }
}
/* 横幅が広いときは4列（バナーは原寸 300×250 前後で見える） */
@media (min-width: 1200px) {
  .wl-gfx__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}