/* ===== works.html ページ固有（mono.css後勝ち前提・2クラス以上で特異度確保） ===== */

/* 「中心領域」の強調ピルラベル（見出し横） */
.oxh .ox-pill {
  display: inline-block;
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
  color: var(--kg-blue); background: var(--kg-t1);
  border-radius: 999px; padding: 4px 12px;
  margin-left: 10px; vertical-align: 2px;
}

/* v23（2026-08-09 恒久方針適用） */

/* デモ主役化: ステージ構成（英字キッカー→ブラウザ大写し→キャプション→機能タグチップ） */
.wk-demo .wk-stage { margin-top: 56px; }
.wk-demo .wk-kicker {
  display: block; text-align: center;
  font-family: var(--font-num); font-size: 12px; font-weight: 700;
  letter-spacing: .26em; color: var(--kg-blue);
}
.wk-demo .browser { margin: 18px auto 0; max-width: 920px; }
.wk-demo .shot-cap { margin-top: 24px; }
.wk-demo .wk-tags { justify-content: center; margin-top: 20px; }
.wk-demo .wk-tags li {
  background: var(--kg-t1); border: none; box-shadow: none;
  color: var(--kg-deep); font-size: 13px; font-weight: 600;
  padding: 8px 20px;
}
.wk-demo .sec-p.mt-lg { margin-left: auto; margin-right: auto; }
.wk-demo .demo-cta { margin-top: 40px; text-align: center; }

/* 支援経験: カード2枚→罫線リスト2列（中央1px区切り・主従は文字の声量で表現） */
.wk-exp {
  display: grid; grid-template-columns: 1fr 1fr;
  margin-top: 56px; max-width: 980px;
}
.wk-exp-col { padding-right: 56px; }
.wk-exp-col + .wk-exp-col {
  border-left: 1px solid rgba(11,44,85,.12);
  padding-left: 56px; padding-right: 0;
}
.wk-exp-list { list-style: none; margin-top: 18px; padding: 0; }
.wk-exp-list li {
  position: relative; padding: 14px 0 14px 32px;
  border-top: 1px solid rgba(11,44,85,.10);
  font-size: 15px; line-height: 1.95;
  color: var(--kg-ink); font-weight: 600;
}
.wk-exp-list li::before {
  content: "○";
  position: absolute; left: 2px; top: 14px;
  font-family: var(--font-num); font-weight: 700;
  color: var(--kg-blue);
}
.wk-exp-list--sub li { color: var(--kg-body); font-weight: 400; }
.wk-exp-list--sub li::before { color: var(--kg-quiet); }

/* SP */
@media (max-width: 749px) {
  .wk-demo .wk-stage { margin-top: 40px; }
  .wk-exp { grid-template-columns: 1fr; margin-top: 44px; }
  .wk-exp-col { padding-right: 0; }
  .wk-exp-col + .wk-exp-col {
    border-left: none; padding-left: 0;
    border-top: 1px solid rgba(11,44,85,.12);
    margin-top: 36px; padding-top: 36px;
  }
}

/* v25（2026-08-10 さき指示）: タブレット帯（750〜1023px） */
@media (min-width: 750px) and (max-width: 1023px) {
  .wk-demo .wk-stage { margin-top: 48px; }
  .wk-demo .shot-cap { margin-top: 20px; }
  .wk-demo .demo-cta { margin-top: 34px; }

  /* 支援経験2列: 2列は維持。中央区切りの内側余白 56px+56px＝実効112pxが
     768px時に列幅を296pxまで削るので36pxずつ（実効72px）へ。
     minmax(0,1fr) で長い社名が列外へ張り出すのも封じる */
  .wk-exp {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 48px;
  }
  .wk-exp-col { padding-right: 36px; }
  .wk-exp-col + .wk-exp-col { padding-left: 36px; }
}

/* ===== v31（2026-08-11 第2次レビュー対応）===== */
/* このページの整理モチーフ＝「左の青い縦ライン」。支援経験の小見出しと機能例の各項目で
   スケールを変えて反復し、works固有の見え方をつくる（他ページの意匠は変えない）。 */

/* ① これまでの支援経験: 箇条書き→「整理された実績ブロック」
   上に薄い罫線でブロックの天を作り、左に青の縦バーを持つ小見出しを立てる。
   項目間の余白を広げ、小見出しの行高を固定して両カラムの行位置を1pxずれなく揃える。 */
.wk-exp { align-items: stretch; }
.wk-exp-col {
  border-top: 1px solid rgba(11, 44, 85, .16);
  padding-top: 26px;
}
/* 天の罫線と中央の区切りは同じ濃さに揃える（角で線幅が食い違って見えるのを防ぐ） */
.wk-exp-col + .wk-exp-col { border-left-color: rgba(11, 44, 85, .16); }
.wk-exp .oxh {
  position: relative;
  padding-left: 15px;
  font-size: 17px;
  /* 32.3px固定。ピル（中心領域）の有無で行ボックスが伸びないようにする＝両カラムの行揃え */
  line-height: 1.9;
}
.wk-exp .oxh::before {
  content: "";
  position: absolute; left: 0; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 18px; border-radius: 2px;
  background: var(--kg-blue);
}
/* 従カラム（BtoC）は主従を保つため縦バーを弱める（○印の扱いと同じ考え方） */
.wk-exp-col:not(.wk-exp-col--main) .oxh::before { background: var(--kg-quiet); }
/* ピルの行ボックスが見出しの行高（32.3px）を超えないように詰める＝両カラムの行揃えの要 */
.wk-exp .ox-pill { line-height: 1.1; vertical-align: 1px; }
.wk-exp-list { margin-top: 20px; }
.wk-exp-list li { padding: 18px 0 18px 32px; }
.wk-exp-list li::before { top: 18px; }

/* ② これまでに対応した機能・設定の例: 短文の一覧→「代表例の紹介」
   各項目の左に細い青ライン。タイトルを1段強く、本文の行間を少し広く。 */
/* start: 青ラインを本文の高さで止める（stretchだと短い項目の下に線だけが伸びて残る） */
.wk-feats { gap: 48px 44px; align-items: start; }
.wk-feats .feat {
  border-left: 2px solid var(--kg-blue);
  padding: 2px 0 2px 22px;
}
.wk-feats .feat::before { content: none; }
.wk-feats .feat-t { font-size: 18px; line-height: 1.75; letter-spacing: .04em; }
.wk-feats .feat-d { font-size: 14px; line-height: 2.1; margin-top: 12px; }

/* ③ Shopify実装・運用ノート: 記事一覧への入口感を少し強める
   （白いボックス自体は現状維持。見出し・行ホバー・右矢印だけ視認性を上げる） */
.wk-notes .sec-h { position: relative; padding-bottom: 18px; }
.wk-notes .sec-h::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 44px; height: 3px; border-radius: 2px;
  background: var(--kg-blue);
}
.wk-notes .sec-p { margin-top: 20px; }
.wk-notes .reclist a { transition: background .15s, color .15s; }
.wk-notes .reclist a:hover { background: var(--kg-t1); color: var(--kg-deep); }
.wk-notes .reclist a::after { font-size: 17px; transition: transform .15s, color .15s; }
.wk-notes .reclist a:hover::after { transform: translateX(4px); color: var(--kg-deep); }

/* v31 SP */
@media (max-width: 749px) {
  /* 2列→縦積み時も「上に薄い罫線＋26px」で天を揃え、ブロック間だけ余白を大きく取る */
  .wk-exp-col + .wk-exp-col {
    border-top-color: rgba(11, 44, 85, .16);
    margin-top: 34px; padding-top: 26px;
  }
  .wk-feats { gap: 34px; }
  .wk-feats .feat { padding-left: 18px; }
  .wk-feats .feat-t { font-size: 17px; }
  .wk-notes .sec-h { padding-bottom: 15px; }
}

/* v31 タブレット（750〜1023px） */
@media (min-width: 750px) and (max-width: 1023px) {
  .wk-feats { gap: 40px; }
}