/* ===== page-works.css ｜ 導入事例一覧（Figma 14486:41990）=====
   デザイン言語: 色/書体トークンは base.css。英大見出し＋和ラベルのペア（.lfv / .sec-title）、共通ボタン(.btn)、コンテンツ幅1200中央（--pad-side）を全ページで使い回す。
   事例カード(.works-card)は詳細ページの関連記事でも共用する。 */

/* --- 下層FV差分: 「Case Study」100px Lato Bold のインク幅補正（実測: Figma 489px / Chrome 492px → -0.3px） --- */
.lfv__en--works{letter-spacing:-.3px}
/* FV高さ 524.6px は Figma 側で 524 に切り捨て描画される（写真の1px段差になる）ため 0.6px 詰めて整数境界に揃える */
.lfv--works{padding-bottom:119.4px}

/* --- 記事一覧（14486:41992）: bg base3 / px120 pb160 / サイド215 + gap100 + カード885 --- */
.works{width:100%;padding:0 var(--pad-side) var(--sp-section-gap);background:var(--c-base3);overflow:hidden}
.works__inner{display:flex;align-items:flex-start;gap:100px;width:100%;max-width:var(--inner);margin-inline:auto}
.works__body{display:flex;flex-direction:column;align-items:center;gap:64px;flex:none;width:885px}

/* --- 絞り込み（Component 27〜31・open状態）: 白 r3 w215 px16 pt12 pb8 gap10 --- */
.works-filter{display:flex;flex-direction:column;align-items:flex-start;gap:24px;flex:none;width:215px}
.works-filter__group{display:flex;flex-direction:column;align-items:flex-start;gap:10px;width:100%;padding:12px 16px 8px;background:var(--c-base);border-radius:var(--r-s)}
/* 見出し = 開閉ボタン（button のUA既定は base.css で font/color/bg/border をリセット済み） */
.works-filter__head{display:flex;align-items:center;gap:12px;width:100%;padding:0;color:inherit;text-decoration:none;text-align:left;appearance:none}
.works-filter__head-label{flex:1 0 0;min-width:1px;font-size:var(--fs-body-s);font-weight:500;line-height:1.6;letter-spacing:.14px}
.works-filter__chevron{flex:none;width:12px;height:15px;transition:transform .35s cubic-bezier(.22,1,.36,1)}
.works-filter__group.is-open .works-filter__chevron{transform:rotate(180deg)}
/* 閉じた状態は JS がある時だけ（no-JS は全グループ開いたまま＝矢印も開き向きに揃える） */
.js .works-filter__group:not(.is-open) .works-filter__list{display:none}
html:not(.js) .works-filter__chevron{transform:rotate(180deg)}
.works-filter__list{display:flex;flex-direction:column;align-items:flex-start;gap:12px;width:100%;padding:10px 4px;border-top:1px solid rgba(205,205,205,.3);list-style:none}
.works-filter__item{width:100%}
/* 選択肢 = ラジオ（1グループ1選択）。input は視覚的に隠し、丸アイコンは .works-filter__mark に SVG 背景で描く */
.works-filter__opt{position:relative;display:flex;align-items:center;gap:8px;width:100%;color:inherit;text-decoration:none;font-size:var(--fs-body-s);font-weight:500;line-height:1.6;letter-spacing:.14px;white-space:nowrap;cursor:pointer}
.works-filter__radio{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;opacity:0}
.works-filter__mark{flex:none;width:18px;height:18px;margin:1px;background:url("../img/lower/works_radio_off.svg") center/18px 18px no-repeat}   /* Figma: p-px の枠内に18px */
.works-filter__radio:checked+.works-filter__mark{background-image:url("../img/lower/works_radio_on.svg")}
.works-filter__radio:focus-visible+.works-filter__mark{outline:2px solid var(--c-main2);outline-offset:2px;border-radius:50%}
/* 絞り込み結果: 非該当カードは非表示。該当0件メッセージ（白 r5 中央寄せ） */
.works-card[hidden],.works-empty[hidden],.pager[hidden]{display:none}
.works-empty{width:100%;padding:40px 24px;background:var(--c-base);border-radius:var(--r-m);font-size:var(--fs-body-m);font-weight:400;line-height:1.6;letter-spacing:.16px;text-align:center}
.works-empty__reset{margin-left:12px;padding:0 2px;border-bottom:1px solid var(--c-border-sub);font-weight:500;color:var(--c-text-sub)}
/* 絞り込み後に残るカードをふわっと出す（出現 0.6s / 16px） */
.js .works-list.is-filtered .works-card.is-shown{animation:works-card-in .6s cubic-bezier(.22,1,.36,1) both}
@keyframes works-card-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .works-filter__chevron{transition:none}
  .js .works-list.is-filtered .works-card.is-shown{animation:none}
}

/* --- 事例カード（casestudy 14387:32861）: w285 px10 pb16 gap16 border-b r5 / 3列 gap 30×15 --- */
.works-list{display:flex;flex-wrap:wrap;align-content:flex-start;align-items:flex-start;gap:30px 15px;width:885px;list-style:none}
.works-card{flex:none;width:285px}
.works-card__link{display:flex;flex-direction:column;align-items:flex-start;gap:16px;width:100%;padding:0 10px 16px;border-bottom:1px solid var(--c-border);border-radius:var(--r-m);color:inherit;text-decoration:none}
.works-card__img{width:100%;height:178px;border-radius:var(--r-m);overflow:hidden}
.works-card__img img{width:100%;height:100%;object-fit:cover}
.works-card__text{display:flex;flex-direction:column;align-items:flex-start;gap:10px;width:100%;padding:0 2px}
.works-card__tags{display:flex;align-items:center;gap:6px;list-style:none}
.works-card__tags li{display:flex;align-items:center;justify-content:center;padding:1px 8px 2px;border:1px solid var(--c-border-sub);border-radius:var(--r-s);font-size:13px;font-weight:500;line-height:1.6;letter-spacing:.13px;color:var(--c-text-sub);text-align:center;white-space:nowrap}
.works-card__main{display:flex;flex-direction:column;align-items:flex-start;gap:10px;width:100%}
.works-card__title{width:100%;font-size:18px;font-weight:500;line-height:1.6;letter-spacing:.18px}
.works-card__foot{display:flex;align-items:flex-end;gap:12px;width:100%}
.works-card__desc{flex:1 0 0;min-width:1px;font-size:var(--fs-body-s);font-weight:400;line-height:1.6;letter-spacing:.14px;color:var(--c-gray)}
.works-card__arrow{display:flex;align-items:center;justify-content:center;flex:none;padding:10px;background:var(--c-main);border-radius:3px}
.works-card__arrow img{display:block;width:14px;height:14px}

/* --- ページネーション（14486:42010）: gap32 / 前後=白 p10 r3 / 数字 34×34 Lato SemiBold 14 / 現在=22px菱形 --- */
.pager{display:flex;align-items:center;gap:32px}
.pager__nav{display:flex;align-items:center;justify-content:center;flex:none;padding:10px;background:var(--c-base);border-radius:3px}
.pager__nav img{display:block;width:14px;height:14px}
.pager__nav--prev img{transform:scaleX(-1)}
.pager__list{display:flex;align-items:center;gap:4px;list-style:none}
.pager__num{position:relative;display:flex;align-items:center;justify-content:center;width:34px;height:34px;padding:11px 10px;font-family:var(--font-en);font-weight:600;font-size:14px;line-height:1;color:var(--c-text);text-align:center;text-decoration:none;white-space:nowrap;font-feature-settings:normal;border-radius:3px}
.pager__num.is-current{color:var(--c-inverse)}
.pager__num.is-current::before{content:"";position:absolute;left:calc(50% - 11px);top:calc(50% - 11px);width:22px;height:22px;background:var(--c-main);transform:rotate(45deg);z-index:-1}
.pager__num.is-current{z-index:0}
.pager__dots{display:flex;align-items:center;justify-content:center;height:34px;padding:9px 4px 11px;font-family:var(--font-en);font-weight:600;font-size:17px;line-height:1;color:var(--c-text);white-space:nowrap;font-feature-settings:normal}

/* --- ホバー（animation.css と同じ往路0.35s/quint） --- */
.works-card__link,.works-card__title,.works-filter__opt,.works-filter__head,.works-empty__reset,.pager__num,.pager__nav{transition:color .35s cubic-bezier(.22,1,.36,1),background-color .35s cubic-bezier(.22,1,.36,1),opacity .35s cubic-bezier(.22,1,.36,1)}
.works-card__img img,.works-card__arrow img{transition:transform .6s cubic-bezier(.22,1,.36,1)}
@media (hover:hover){
  .works-card__link:hover .works-card__title{color:var(--c-main)}
  .works-card__link:hover .works-card__img img{transform:scale(1.05)}
  .works-card__link:hover .works-card__arrow img{transform:translateX(3px)}
  .works-filter__opt:hover,.works-filter__head:hover{color:var(--c-main)}
  .works-empty__reset:hover{color:var(--c-main2);border-bottom-color:var(--c-main2)}
  .pager__num:not(.is-current):hover{background:rgba(21,73,160,.08)}
  .pager__nav:hover{background:var(--c-base2)}
}
.works-card__link:focus-visible,.works-filter__head:focus-visible,.works-empty__reset:focus-visible,.pager__num:focus-visible,.pager__nav:focus-visible{outline:2px solid var(--c-main2);outline-offset:3px}

/* ===== SP（768px以下）: SPカンプ無し → TOP-SP（375）のルール（左右24px・SPトークン・1カラム）から導出 ===== */
@media (max-width:768px){
  .lfv--works{padding-bottom:48px}
  .works{padding:0 var(--sp-side-m) var(--sp-section-gap)}
  .works__inner{flex-direction:column;gap:32px}
  /* 絞り込み: 左サイド→カード上部。各グループの選択肢は横並びチップ（折返し） */
  .works-filter{width:100%;gap:12px}
  .works-filter__group{padding:12px 16px 8px}
  .works-filter__list{flex-direction:row;flex-wrap:wrap;gap:8px 16px;padding:10px 0 6px}
  .works-filter__item{width:auto}
  .works-filter__opt{width:auto}
  .works-empty{padding:32px 16px}
  /* カード: 1列（TOP-SP Case Study カードと同じ構成。写真は 3:2 の比率固定） */
  .works__body{width:100%;gap:40px}
  .works-list,.works-list--related{gap:32px;width:100%}
  .works-card{width:100%}
  .works-card__img{height:auto;aspect-ratio:800/533}
  .pager{gap:20px}
}