/* 施工事例の見た目（記事本文から出したもの・2026-09-06）
   これまで記事1本1本の本文に <style> として埋め込まれていた。
   本文に <style> があると、編集画面で保存したときに改行タグが打ち込まれ、
   その巻き添えで写真の枠が壊れて写真が消える（61978で実際に3枚消失）。
   中身は body_template.php の <style> をそのまま写している。1文字も変えていない。 */
/* === st-works v3（2026-08-28 V0監修）=========================================
   すべてのセレクタを .st-works 配下に閉じ込めてある。
   body や h2 への裸の指定は書かない（サイト全体・他ページを壊すため）。
   H1 は書かない。記事タイトルは WordPress のテーマが H1 で出すので、
   本文にも入れると H1 が2つになり検索評価を落とす。
   ============================================================================ */
.st-works{
  --stw-bg:#EFF0EA; --stw-alt:#E5E7DE; --stw-panel:#F7F7F3;
  --stw-ink:#1C1D1B; --stw-soft:#5B5D56; --stw-line:#D7D8CF;
  --stw-accent:#35505A; --stw-brass:#A9814F;
  max-width:860px;margin:0 auto;color:var(--stw-ink);line-height:1.85;font-size:15px;
  font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic Medium","Yu Gothic",sans-serif;
}
/* 2026-09-07 枠線の分だけ横にはみ出して、記事が横スクロールしていた（実測 2px・今回の変更より前から）。
   幅の計算に枠線と内側の余白を含める。 */
.st-works,.st-works *{box-sizing:border-box}
.st-works section{margin:0 0 40px}
.st-works h2{
  font-family:"Hiragino Mincho ProN","Yu Mincho",serif;
  font-size:21px;font-weight:600;color:var(--stw-ink);letter-spacing:.02em;
  margin:0 0 16px;padding:0 0 10px;border-bottom:2px solid #2B3A4A
}
.st-works h3{
  font-family:"Hiragino Mincho ProN","Yu Mincho",serif;
  font-size:16px;font-weight:600;color:var(--stw-accent);margin:24px 0 12px;
  padding:0;border-left:0            /* 2026-09-07 左の縦線を撤去（社長指示で全面禁止） */
}
.st-works p{margin:0 0 12px}
.st-works p:last-child{margin-bottom:0}
.st-works .stw-eyebrow{font-size:11px;letter-spacing:.18em;color:var(--stw-brass);margin:0 0 6px}
.st-works-chips{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--stw-line);
  border:1px solid var(--stw-line);margin:0 0 32px}
.st-works-chips div{background:var(--stw-panel);padding:12px 14px}
.st-works-chips dl{margin:0}
.st-works-chips dt{font-size:11px;letter-spacing:.08em;color:var(--stw-soft);margin:0 0 4px}
.st-works-chips dd{margin:0;font-size:15px;font-weight:600}
.st-works-band{background:var(--stw-accent);color:#F2F4F3;padding:32px 26px;margin:0 0 40px}
.st-works-band h2{color:#fff;border-bottom-color:#ffffff33}
.st-works-band .stw-eyebrow{color:#D9C39E}
.st-works-band p{color:#E8ECEA}
.st-works-info{width:100%;border-collapse:collapse;font-size:15px}
.st-works-info th{text-align:left;width:32%;padding:13px 4px;border-bottom:1px solid var(--stw-line);
  font-weight:400;color:var(--stw-soft);font-size:13px;vertical-align:top}
.st-works-info td{padding:13px 4px;border-bottom:1px solid var(--stw-line)}
.st-works-info .stw-note{font-size:11px;color:#9AA09A;display:block;margin-top:4px}
/* 2026-09-07 左の縦線を撤去し、承認済みの「案2（地の色の切り替え）」に揃えた。
   枠線なし・背景の濃さだけで役割を分ける。角丸8px。 */
.st-works-story,.st-works-highlight,.st-works-staff{
  background:#F7F5F2;border:0;border-radius:8px;padding:16px 20px}
.st-works-staff .staff-name{font-size:12px;color:var(--stw-soft);text-align:right;margin:10px 0 0}

/* === 担当者からの一言（アバター付き。これが正式な形） =======================
   公開記事 1,463本と下書き23本は、担当者カードが2つの入れ物でできている。
     <div class="st-works-staff">
       <div class="st-works-staff-icon">ST</div>
       <div class="st-works-staff-body"><p class="staff-name">スタートラスト</p><p>本文</p></div>
     </div>
   2026-09-07、生成側（server/body_template.php と folder_to_draft.py）も
   この形に戻した。アバターと名乗りは設計書が「絶対に壊さないもの」として
   名指ししている、大量生産感を消す唯一の人的要素（2026-08-29 DESIGN §4）。
   一時期この2つの入れ物を落としたテンプレで作った下書きがあるが、
   それらは本文を直してこの形に揃える。過渡期の受け皿ではなく正式仕様。
   親（.st-works-staff）の display は変えない。変えると新しいテンプレの
   <p>本文</p><p class="staff-name">名前</p> が横並びになって壊れるため、
   浮かせ（float）だけで組む。
   ========================================================================== */
.st-works-staff-icon{
  float:left;width:40px;height:40px;margin:0 12px 8px 0;border-radius:50%;
  background:var(--stw-accent);color:#fff;font-size:14px;font-weight:700;line-height:40px;
  text-align:center;flex:0 0 40px}
.st-works-staff-body{overflow:hidden}
.st-works-staff-body .staff-name{
  font-size:14px;font-weight:700;color:var(--stw-accent);text-align:left;margin:0 0 4px}
.st-works-staff::after{content:"";display:block;clear:both}

/* 本文のボタンとボタンの間に打ち込まれた改行タグ <br /> が、
   ならべ（grid）の1行を占有してボタンを縦積みにする。公開記事の本文は触れないので
   ここで無効にする。住所や営業時間の改行（.cta-info の中）は消さない。 */
.st-works-cta-buttons br{display:none}
.st-works-photo-block{margin:0 0 8px}
.st-works-photos{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}
.st-works-photos figure{margin:0}
.st-works-photos img{width:100%;height:auto;display:block;border:1px solid var(--stw-line)}
.st-works-photos figcaption{margin-top:5px;font-size:12px;color:var(--stw-soft)}
.st-works-photos--triple{grid-template-columns:repeat(3,1fr)}
.st-works-photos--single{grid-template-columns:1fr}
.st-works-photo-lead{margin:12px 0}
.st-works-photo-lead img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;border:1px solid var(--stw-line)}
.st-works-photo-lead figcaption{margin-top:5px;font-size:12px;color:var(--stw-soft)}
.st-works-about{display:grid;grid-template-columns:1fr;gap:1px;background:var(--stw-line);
  border:1px solid var(--stw-line)}
.st-works-about div{background:var(--stw-panel);padding:16px 18px}
.st-works-about b{display:block;font-size:14px;margin:0 0 4px}
.st-works-about span{font-size:13px;color:var(--stw-soft)}
.st-works-menu-description{background:var(--stw-alt);border:1px solid var(--stw-line);
  padding:20px 22px;margin:0 0 40px}
.st-works-menu-description h4{font-family:"Hiragino Mincho ProN","Yu Mincho",serif;
  margin:0 0 8px;font-size:15px;color:var(--stw-accent);font-weight:600}
.st-works-menu-description p{font-size:14px;margin:0}
.st-works-related{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0}
.st-works-related a{display:inline-block;padding:9px 16px;border:1px solid var(--stw-accent);
  color:var(--stw-accent);text-decoration:none;font-size:13px}
/* 2026-09-07 承認済みの「案3（塗り面＋白文字）」に。
   罫線1本だけだと、いまの本番（灰色の箱でまとまっている）より弱く見えたため。 */
.st-works-cta{background:#2B3A4A;color:#fff;border-radius:8px;
  box-shadow:0 2px 8px rgba(0,0,0,.08);padding:24px 32px;margin:40px 0 0}
.st-works-cta .cta-title{font-family:"Hiragino Mincho ProN","Yu Mincho",serif;
  font-size:18px;font-weight:600;margin:0 0 6px;text-align:center;color:#fff}
.st-works-cta .cta-sub{font-size:13px;color:#FFFFFFD9;margin:0 0 18px;text-align:center}
/* ボタンの数は記事によって3つだったり4つだったりする（電話のボタンが無い記事がある）。
   列の数を決め打ちすると、3つの記事で右端が1列空く。
   本文の欄は実測で 660px しかなく、4列を決め打ちすると文字が2行に折り返す（60984 で実測）。
   だから「1本あたり最低150px、余りは等分」で並べる。数が変わっても崩れない。 */
.st-works-cta-buttons{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0 0 16px}
.st-works-cta-buttons a{flex:0 1 auto;padding:14px 12px;text-align:center;text-decoration:none;
  font-size:14px;font-weight:600;border:1px solid #E5E3DF;border-radius:6px;
  background:#fff;color:#2B3A4A;white-space:nowrap}
.st-works-cta-buttons .btn-contact{background:#fff;color:#2B3A4A}
.st-works-cta-buttons .btn-estimate,.st-works-cta-buttons .btn-tel{background:#fff;color:#2B3A4A}
/* LINE の緑は残す。当店の問い合わせ窓口は LINE とお客様ページの2本で、
   緑とロゴの色は「LINEで連絡できる」ことを文字を読まずに伝える唯一の目印。
   白地に統一すると、流し見のお客様にはこの選択肢が見えなくなる。 */
.st-works-cta-buttons .btn-line{background:#fff;color:#05A648;border:2px solid #06C755}
.st-works-cta .cta-info{font-size:12px;color:#FFFFFFCC;margin:0;text-align:center}
.st-works-cta .cta-info a{color:#fff}
@media(max-width:600px){
  .st-works{font-size:14.5px}
  .st-works h2{font-size:19px}
  .st-works h3{font-size:15px}
  .st-works-chips{grid-template-columns:1fr}
  .st-works-photos{grid-template-columns:1fr}
  .st-works-photos--triple{grid-template-columns:1fr 1fr}
  .st-works-band{padding:26px 18px}
  .st-works-cta{padding:24px 20px}
  .st-works-cta-buttons{gap:8px}
  .st-works-cta-buttons a{padding:12px 12px;font-size:13px}
}