/* ==========================================================================
   L.U.X.I Studio ／web/（ホームページ制作）と ／app/（業務効率化アプリ）で使う部品
   土台は studio.css、下層ページの共通部品（パンくず・目次・種類の節・作り方・セット）は video.css の vd- を使う
   2026-09-29 新設（/video/ と並べるため）
   ========================================================================== */

/* ---------- 1. ヒーロー: ノートPC＋傾いたスマホにLPの実物の画面 ---------- */
/* 見出し「ホームページ制作」は8字。PC の左の列に1行で収まる大きさにし、収まらない幅では「ホームページ／制作」で折る（st-nb） */
.wb-top .st-hero__title{ font-size:clamp(2.5rem,1rem + 3.4vw,4.2rem); }
.wb-top .st-stage{ margin-top:clamp(8px,2vw,24px); }
.wb-top .st-stage__item{ color:inherit; border-radius:var(--r-m); }
.wb-top .st-laptop__screen > img,
.wb-top .st-phone__screen > img{ object-position:50% 0; }
.wb-top .st-stage__item > .st-laptop,
.wb-top .st-stage__item > .st-phone{ transition:transform .6s var(--ease); }
.wb-top .st-stage__item:hover > .st-laptop,
.wb-top .st-stage__item:focus-visible > .st-laptop,
.wb-top .st-stage__item:hover > .st-phone,
.wb-top .st-stage__item:focus-visible > .st-phone{ transform:translateY(-6px); }

/* ---------- 2. 業種別のLP（ブラウザの窓の右下にスマホを重ねる） ---------- */
/* 見出しと要点は video.css の vd-cat をそのまま使い、作品の列だけ2列にする */
.wb-lps{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:var(--sp-8) clamp(32px,4vw,64px);
}
@media (min-width:960px){
  .wb-lps{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
.wb-lp{ display:grid; gap:var(--sp-5); align-content:start; min-width:0; }
.wb-lp__shot{
  position:relative;
  display:block;
  padding:0 9% 8% 0;
  border-radius:var(--r-s);
  color:inherit;
}
.wb-lp__shot > .st-browser{ transition:transform .6s var(--ease); }
.wb-lp__phone{
  position:absolute;
  right:0; bottom:0;
  width:22%;
  transform:rotate(4deg);
  transition:transform .6s var(--ease);
}
.wb-lp__phone .st-phone__screen > img{ object-position:50% 0; }
.wb-lp__shot:hover > .st-browser,
.wb-lp__shot:focus-visible > .st-browser{ transform:translateY(-4px); }
.wb-lp__shot:hover > .wb-lp__phone,
.wb-lp__shot:focus-visible > .wb-lp__phone{ transform:rotate(4deg) translateY(-8px); }
.wb-lp__shot:focus-visible{ outline-offset:8px; }
.wb-lp__body{ display:grid; gap:var(--sp-2); }
.wb-lp__brand{ font-family:var(--ff-mincho); font-weight:600; color:var(--gold-300); }
.wb-lp .vd-links{ margin-top:var(--sp-3); }
.wb-lp .st-badge{ margin-top:var(--sp-2); }
/* 1200px 以上の vd-cat は「見出し・要点」を上に全幅で置く（video.css）。作品の列はその下に広く取る */
.wb-cat .wb-lps{ margin-top:var(--sp-2); }

/* ---------- 3. 料金: 4プランを 2×2 に ---------- */
@media (min-width:760px){
  .wb-prices{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .wb-prices .st-price__spec{ min-height:3.8em; } /* 説明が1行と2行のカードで、金額の高さをそろえる */
}
.wb-notice{
  margin-bottom:var(--sp-6);
  padding:var(--sp-5) clamp(20px,3vw,32px);
  border:1px solid var(--line-gold);
  border-radius:var(--r-m);
  background:rgba(201,164,92,.06);
}
.wb-notice__title{
  display:flex;
  align-items:center;
  gap:.7em;
  font-family:var(--ff-mincho);
  font-weight:600;
  color:var(--gold-300);
}
.wb-notice__text{ margin-top:var(--sp-2); color:var(--ivory-mute); }
.wb-after{
  display:grid;
  gap:var(--sp-2) var(--sp-6);
  margin-top:var(--sp-6);
  padding:var(--sp-5) clamp(20px,3vw,32px);
  border:1px solid var(--line-faint);
  border-radius:var(--r-m);
}
.wb-after__name{ font-size:var(--fs-h3,1.625rem); color:var(--ivory); }
.wb-after__est{ font-family:var(--ff-mincho); font-size:var(--fs-h3,1.625rem); font-weight:600; color:var(--gold-300); }
.wb-after__text{ color:var(--ivory-mute); }
@media (min-width:960px){
  .wb-after{ grid-template-columns:auto auto minmax(0,1fr); align-items:center; }
}

/* ---------- 4. /app/ の業務デモ: 「任せる作業」「人が見る所」（5字）の見出しの列を広げる ---------- */
.vd-meta.wb-meta--wide div{ grid-template-columns:5.4em minmax(0,1fr); }
@media (max-width:479.98px){
  .vd-meta.wb-meta--wide div{ grid-template-columns:minmax(0,1fr); gap:0; } /* 狭い画面では見出しを上、本文を下に積む */
}