html,body{margin:0;background:#fff;}
#sk-sd{
  --sd-navy-900:#0D1B2A; --sd-navy-800:#1B2E45; --sd-navy-700:#1E3A5F; --sd-navy-400:#4A7FC1;
  --sd-gold-600:#B8860B; --sd-gold-500:#C9971A; --sd-gold-400:#D4A820; --sd-gold-300:#E8C547;
  --sd-n-900:#111111; --sd-n-800:#1C1C1C; --sd-n-700:#2E2E2E; --sd-n-600:#4A4A4A;
  --sd-n-500:#6B6B6B; --sd-n-400:#9A9A9A; --sd-n-200:#D8D8D8; --sd-n-50:#F8F8F7; --sd-white:#FFFFFF;
  --sd-font-display:'Shippori Mincho','Noto Serif JP',serif;
  --sd-font-body:'Noto Sans JP','Hiragino Sans',sans-serif;
  --sd-font-latin:'DM Sans',sans-serif;
  font-family:var(--sd-font-body); color:var(--sd-n-800); background:var(--sd-white);
  -webkit-font-smoothing:antialiased;
}
#sk-sd *{box-sizing:border-box;}
#sk-sd p{margin:0;} #sk-sd h1,#sk-sd h2,#sk-sd h3{margin:0;font-weight:400;}

/* Lightning 青い線を非表示 */
#sk-sd h1,
#sk-sd h2,
#sk-sd h3,
#sk-sd h4,
#sk-sd h5,
#sk-sd h6{
    border:none !important;
    border-bottom:none !important;
    box-shadow:none !important;
    background:none !important;
}
#sk-sd h1::before,
#sk-sd h1::after,
#sk-sd h2::before,
#sk-sd h2::after,
#sk-sd h3::before,
#sk-sd h3::after,
#sk-sd h4::before,
#sk-sd h4::after,
#sk-sd h5::before,
#sk-sd h5::after,
#sk-sd h6::before,
#sk-sd h6::after{
    display:none !important;
    content:none !important;
}

#sk-sd a{color:inherit;text-decoration:none;}
#sk-sd img{max-width:100%;display:block;}
#sk-sd figure{margin:0;}   /* figure既定マージンをリセット＝写真と文字の左端を揃える */
.sd-wrap{
    max-width:1400px;
    margin:0 auto;
    padding:0 72px;
}
.sd-eb{font-family:var(--sd-font-latin);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--sd-gold-600);display:flex;align-items:center;gap:14px;}
.sd-eb::after{content:"";width:38px;height:1px;background:var(--sd-gold-400);}
.sd-ph{position:relative;background:linear-gradient(180deg,#22364c 0%,#1a2c42 100%);overflow:hidden;}
.sd-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.sd-ph__t{position:absolute;left:16px;bottom:14px;font-family:ui-monospace,monospace;font-size:11px;letter-spacing:.08em;color:rgba(255,255,255,.62);text-transform:uppercase;}
.sd-head{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:2px;
}
.sd-h2{
    font-family:var(--sd-font-display);
    font-size:58px;
    letter-spacing:-.03em;
    line-height:1.3;
    color:var(--sd-navy-900);
    text-align:center;
}
.sd-h2 .em{color:var(--sd-gold-600);}
.sd-btn{display:inline-flex;align-items:center;gap:14px;font-family:var(--sd-font-body);font-size:14px;font-weight:700;letter-spacing:.04em;padding:18px 32px;border-radius:2px;background:var(--sd-gold-400);color:var(--sd-navy-900);transition:transform .15s cubic-bezier(.16,1,.3,1),background .15s;}
.sd-btn:hover{transform:translateY(-2px);background:var(--sd-gold-300);}
.sd-btn .arw{font-family:var(--sd-font-latin);}
/* ============================================================
   HERO ── services-event ページと同じ紺デザインシステム（4事業ページ共通）。
   紺 #031323 は --sd-navy-900 とは別の値だが、参考ページと完全一致させるため
   あえてハードコードしている。
   ============================================================ */
#sk-sd .sd-hero{position:relative;overflow:hidden;isolation:isolate;background:#031323;color:#fff;padding:100px 0 60px !important;}
.sd-hero::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
    background:
      radial-gradient(circle at 1px 1px, rgba(255,255,255,.075) 1px, transparent 1.5px) 0 0/22px 22px,
      #031323;
}
#sk-sd .sd-hero__in{position:relative;z-index:1;max-width:980px;margin:0 auto;padding:128px 0 0;}
.sd-hero__crumb{position:relative;z-index:1;display:flex;align-items:center;gap:10px;font-family:var(--sd-font-latin);font-size:11.5px;font-weight:500;line-height:1.95;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:30px;}
.sd-hero__crumb .sep{color:rgba(255,255,255,.3);} .sd-hero__crumb .cur{color:#d8b15f;}
/* パンくず（Home/Services）は実リンク化。文字色はカレント表示と別の継承色を維持し、
   ホバー・キーボードフォーカス時のみカレントと同じゴールドに変わる。 */
.sd-hero__crumb a{color:inherit;text-decoration:none;transition:color .2s ease;}
.sd-hero__crumb a:hover,.sd-hero__crumb a:focus-visible{color:#d8b15f;}
/* セレクタを「#sk-sd .sd-hero__h1」「#sk-sd .sd-hero__lead」とID込みにしているのは、
   上部の共通リセット #sk-sd h1,h2,h3{margin:0} / #sk-sd p{margin:0}
   （IDを含むため詳細度が高い）にmargin指定を打ち消されないようにするため。 */
#sk-sd .sd-hero__h1{position:relative;z-index:1;font-family:var(--sd-font-display);font-weight:400;font-size:48px;letter-spacing:.02em;line-height:1.5;color:#fff;margin:35px 0 0;}
#sk-sd .sd-hero__lead{position:relative;z-index:1;font-size:15px;line-height:1.95;color:rgba(255,255,255,.72);max-width:640px;margin-top:28px;}
/* HEROリード文の途中で不自然に改行されるのを防ぐための共通クラス。
   PCでは対象範囲をnowrapにして1行に収め、SP（下部の@media screen and
   (max-width:640px)側）ではwhite-space:normalで打ち消して通常の自然改行に
   戻す（モバイル幅では強制的に1行にすると画面からはみ出すため）。 */
.sd-hero__lead .sd-nobreak{white-space:nowrap;}
/* HERO直下の施工写真：紺ヒーローには重ねず白背景側に通常配置 */
.sd-photo{padding:56px 0 0;background:var(--sd-white);}
.sd-photo__fig{aspect-ratio:21/9;border-radius:6px;overflow:hidden;box-shadow:0 0 0 1px rgba(13,27,42,.08);}
.sd-photo__fig img{width:100%;height:100%;object-fit:cover;display:block;}
/* ============================================================
   HERO直下の施工写真：スクロール連動パララックス
   仕組み：画像だけをこの枠（.sd-photo__fig、overflow:hidden）より縦に
   大きく拡大した状態でJS（service-detail.js）がheightを上書きし、スクロールで
   要素がビューポートに入ってから抜けるまでの進捗(0→1)に応じてtranslateYだけを
   動かす。通常表示時のCSS（width/height:100%・object-fit:cover）はJS未実行時・
   prefers-reduced-motion時のフォールバックとしてそのまま残す。 */
#sk-sd .sd-photo__fig{position:relative;}
#sk-sd .sd-photo__fig img{backface-visibility:hidden;will-change:transform;}
@media (prefers-reduced-motion: reduce){
  #sk-sd .sd-photo__fig img{transform:none !important;height:100% !important;}
}
/* 各セクション間の上下余白（4事業ページ共通、K指定） */
.sd-sec{padding:128px 0;}
.sd-sec--tint{background:var(--sd-n-50);}
/* ============================================================
   .sd-head--left：見出し(.sd-head/.sd-eb)を左寄せ化する共通の追加クラス。
   Overview/Strengths/Scope/Process/Works/FAQの全セクションに適用する。
   アイブロウはTOPページ標準の丸ドット+線パターン（.sk-services-sub 等が共通で
   使うDM Sans・7pxドット・線34pxの見せ方）と同じ見せ方に統一している。
   .sd-head/.sd-eb自体（センター寄せ・番号無しの基本形）は残しており、
   直接は書き換えずこの追加クラスで上書きする方式にしている。 */
.sd-head--left{align-items:flex-start;text-align:left;}
.sd-head--left .sd-eb{
    font-size:12px;
    font-weight:500;
    letter-spacing:.2em;
    line-height:1.7;
    gap:12px;
}
.sd-head--left .sd-eb::before{
    content:"";
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--sd-gold-400);
    flex:none;
}
/* 見出しフォントサイズは会社概要ページ「数字が語る、確かな仕事」と同じ48pxに統一。
   他セクションの.sd-h2(58px)は維持するため、Overview等の左寄せ見出しでのみ上書き。 */
.sd-head--left .sd-h2{text-align:left;font-size:48px;}
.sd-head--left .sd-h2 .em{color:var(--sd-navy-900);}
.sd-overview{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start;margin-top:44px;}
.sd-overview__lead{font-family:var(--sd-font-display);font-size:26px;line-height:1.7;letter-spacing:-.01em;color:var(--sd-navy-900);}
.sd-overview__body p{font-size:16px;line-height:2.1;color:var(--sd-n-700);}
.sd-overview__body p + p{margin-top:20px;}

/* #sk-sd を付けて詳細度を上げているのは、上部の共通リセット
   #sk-sd p{margin:0;}（ID込みのため詳細度が高い）にmarginを
   打ち消されないようにするため（HERO部分の.sd-hero__h1等と同じ対策）。 */
#sk-sd .sd-overview__lead-center{
    max-width:none;
    margin:56px auto 0;
    text-align:left;
    font-family:var(--sd-font-body);
    font-size:15px;
    line-height:2;
    letter-spacing:.02em;
    color:var(--sd-n-500);
}

.sd-overview__lead-center .gold{
    color:inherit;   /* 一部だけゴールドにしない：文章全体と同色に統一 */
}

/* ============================================================
   数字3項目（KPI）：会社概要ページ「数字が語る、確かな仕事」と同じ数字タイポ
   グラフィ（Shippori Mincho・太字・line-height:.85・単位は小さくDM Sansで
   添える）に統一し、全項目左寄せにしている。 */
.sd-kpis{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    margin-top:48px;
}
.sd-kpi{
    padding:36px 32px 4px 0;
    border-right:1px solid var(--sd-n-200);
    text-align:left;
}
.sd-kpi:not(:first-child){padding-left:32px;}
.sd-kpi:last-child{border-right:0;padding-right:0;}
.sd-kpi__l{
    font-family:var(--sd-font-latin);
    font-size:11px;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:var(--sd-gold-600);
    padding-bottom:28px;
}
.sd-kpi__n{
    display:flex;
    align-items:flex-end;
    gap:8px;
    font-family:var(--sd-font-display);
    font-weight:700;
    font-size:clamp(52px,6.2vw,84px);
    line-height:.85;
    letter-spacing:-.02em;
    color:var(--sd-navy-900);
    font-variant-numeric:tabular-nums;
    white-space:nowrap;
}
.sd-kpi__n .u{
    font-family:var(--sd-font-latin);
    font-size:15px;
    font-weight:500;
    letter-spacing:.02em;
    color:var(--sd-gold-600);
    padding-bottom:.22em;
}
/* 数字下の罫線：薄いグレーの全幅の線＋左端の小さいゴールドの縦ティック。
   上部#sk-sd p{margin:0}のリセットがID込みで詳細度が高く上書きされてしまうため、
   marginではなくpaddingと疑似要素のtopオフセットだけで余白を作っている。 */
.sd-kpi__d{
    position:relative;
    font-size:13px;
    color:var(--sd-n-500);
    padding-top:50px;
}
.sd-kpi__d::before{
    content:"";
    position:absolute;
    top:26px;
    left:0;
    width:100%;
    height:1px;
    background:var(--sd-n-200);
}
.sd-kpi__d::after{
    content:"";
    position:absolute;
    top:20px;
    left:0;
    width:1px;
    height:13px;
    background:var(--sd-gold-400);
}
/* ============================================================
   Strengths（選ばれる、3つの理由）：写真が画面端まで伸びる全幅レイアウト。
   タイトル(.sd-head/.sd-eb/.sd-h2)は.sd-wrap内のまま、01〜03のみ.sd-wrapの
   外に出して全幅にしている。
   スクロール連動パララックスは.sd-photo__figと同じ仕組みを.sd-str__fig用に
   汎用化し、service-detail.js内で3枚それぞれ独立に動かす。 */
.sd-str{
    margin-top:120px;
    display:flex;
    flex-direction:column;
    gap:56px;
}
.sd-str__item{
    display:grid;
    grid-template-columns:55% 45%;
    min-height:clamp(380px,46vw,560px);
}
/* 偶数番目（02）はテキストを先に書いてPCで左右反転、写真側の比率を保つ */
.sd-str__item--rev{grid-template-columns:45% 55%;}
.sd-str__media{position:relative;overflow:hidden;}
/* height:100%（親のstretchで決まる高さ）ではなく.sd-str__itemと同じ
   clamp()を直接指定：グリッドのstretch解決前にJSがfig.clientHeightを
   読むと、パーセント指定同士の循環でheightが暴走することがあるため、
   写真側の高さは単独で確定させている。 */
.sd-str__fig{position:relative;overflow:hidden;height:clamp(380px,46vw,560px);}
.sd-str__fig img{width:100%;height:100%;object-fit:cover;display:block;backface-visibility:hidden;will-change:transform;}
.sd-str__body{display:flex;align-items:center;}
.sd-str__body-in{
    padding:56px clamp(32px,4vw,56px);
    /* 控えめなスクロールフェードイン（opacity+translateY）。写真の
       パララックスを主役にするため動きは小さめ。 */
    opacity:0;
    transform:translateY(26px);
    transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1);
}
.sd-str__item.is-in .sd-str__body-in{opacity:1;transform:translateY(0);}
.sd-str__meta{display:flex;align-items:center;gap:16px;margin-bottom:20px;}
.sd-str__num{font-family:var(--sd-font-display);font-size:32px;font-weight:400;letter-spacing:.02em;color:var(--sd-gold-600);}
.sd-str__en{font-family:var(--sd-font-latin);font-size:12px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--sd-n-500);}
/* #sk-sd を付けて詳細度を上げているのは、上部の共通リセット
   #sk-sd h1,h2,h3{margin:0;}（ID込みで詳細度が高い）にmarginを
   打ち消されないようにするため。 */
#sk-sd .sd-str__t{font-family:var(--sd-font-display);font-size:34px;font-weight:400;letter-spacing:-.02em;line-height:1.4;color:var(--sd-navy-900);margin:0 0 24px;}
.sd-str__d{font-size:15px;line-height:1.9;color:var(--sd-n-700);max-width:38em;}
@media (prefers-reduced-motion: reduce){
  .sd-str__fig img{transform:none !important;height:100% !important;}
  .sd-str__body-in{opacity:1;transform:none;transition:none;}
}
/* モバイル・タブレット：常に「写真→英字番号→タイトル→説明文」の
   1カラム表示に統一（PCの左右反転は無視し、orderで写真を必ず先頭に）。 */
@media screen and (max-width: 768px) {
  .sd-str{margin-top:72px;gap:40px;}
  .sd-str__item,
  .sd-str__item--rev{
    display:flex;
    flex-direction:column;
    grid-template-columns:none;
    min-height:0;
  }
  /* モバイルは片側だけ少し離してもう片側だけブリードさせる。24pxは
     .sd-str__body-inの左右paddingと同じ値にして、下の文章の端と
     写真の端を揃えている。PCの左右交互（01/03=写真左・02=写真右）と
     同じ向きになるよう、.sd-str__item--rev（02）だけ逆側にしている。 */
  .sd-str__media{order:1;margin-left:24px;}
  .sd-str__item--rev .sd-str__media{margin-left:0;margin-right:24px;}
  .sd-str__fig{height:64vw;max-height:420px;}
  .sd-str__body{order:2;}
  .sd-str__body-in{padding:32px 24px 44px;max-width:none;}
  #sk-sd .sd-str__t{font-size:24px;margin:0 0 14px;}
}
/* ===================================================================
   対応範囲 — マーカー・レジャー（横帯リスト / 番号なし / ゴールド先頭罫）
   タグは3個ともゴールドの縁＋文字に統一。
   =================================================================== */
.sd-scope-list{
    border-top:2px solid var(--sd-navy-900);
    margin-top:60px;
}
.sd-scope-row{
    display:grid;
    grid-template-columns:18px 1fr auto;
    gap:30px;
    align-items:center;
    padding:26px 8px;
    border-bottom:1px solid var(--sd-n-200);
    transition:background .2s,padding-left .2s;
}
.sd-scope-row:hover{
    background:var(--sd-n-50);
    padding-left:18px;
}
.sd-scope-row__mark{
    width:4px;
    height:34px;
    background:var(--sd-n-200);
    border-radius:2px;
    transition:background .2s,height .2s;
}
.sd-scope-row:hover .sd-scope-row__mark{
    background:var(--sd-gold-400);
    height:46px;
}
.sd-scope-row__main{
    display:flex;
    flex-direction:column;
    gap:7px;
}
.sd-scope-row__t{
    font-family:var(--sd-font-display);
    font-size:23px;
    color:var(--sd-navy-900);
    letter-spacing:-.01em;
}
.sd-scope-row__d{
    font-size:14px;
    line-height:1.7;
    color:var(--sd-n-500);
}
.sd-scope-row__tags{
    display:flex;
    flex-wrap:wrap;
    gap:7px;
    justify-content:flex-end;
    max-width:360px;
}
.sd-scope-tag{
    font-size:12.5px;
    font-weight:500;
    letter-spacing:.02em;
    color:var(--sd-gold-600);
    background:var(--sd-white);
    border:1px solid rgba(184,134,11,.45);
    border-radius:3px;
    padding:5px 12px;
    white-space:nowrap;
}
@media screen and (max-width:768px){
    .sd-scope-row{
        grid-template-columns:14px 1fr;
        gap:18px;
        padding:22px 4px;
    }
    .sd-scope-row__tags{
        grid-column:2;
        justify-content:flex-start;
        max-width:none;
        margin-top:10px;
    }
    .sd-scope-row__t{font-size:20px;}
}

/* ===================================================================
   施工／製作／設置の流れ — 連結タイムライン（横レール・ノード型）
   5本の独立柱を1本のゴールド罫でつなぎ「流れ」を可視化。番号は
   ノード円に内包し、最終ノードだけ紺塗りで「完了」を示す。
   背景はTOPページ「施工の流れ」と同じ薄いドット柄＋淡いグラデーション。
   =================================================================== */
.sd-sec--dots{
    background:
      radial-gradient(circle at 1px 1px, rgba(13,27,42,.08) 1px, transparent 1.5px) 0 0/22px 22px,
      linear-gradient(180deg,#fbfaf6 0%,#ffffff 100%);
}
/* 施工／製作／設置事例：ドット柄は入れずグラデーションのみ */
.sd-sec--grad{
    background:linear-gradient(180deg,#fbfaf6 0%,#ffffff 100%);
}
.sd-flow{
    position:relative;
    display:grid;
    grid-template-columns:repeat(5,minmax(220px,1fr));
    gap:20px;
    margin-top:60px;
}
/* 連結レール：無地グレーの太線 → 半透明ゴールドの細線（ノードのゴールドの縁と調和） */
.sd-flow::before{content:"";position:absolute;top:34px;left:10%;right:10%;height:1px;background:rgba(212,168,32,.35);}
.sd-step{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    padding:0 10px;
}
/* 番号ノード：白地＋ゴールドの縁（TOPページ.sk-process__markerと同じトーン）。
   背景は帯色に依存しないよう白に固定し、影を少し添えて浮かせる。 */
.sd-step__node{
    position:relative;
    z-index:1;
    width:68px;
    height:68px;
    border-radius:50%;
    background:#fff;
    border:1px solid var(--sd-gold-400);
    box-shadow:0 2px 10px -4px rgba(13,27,42,.12);
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:16px;
    transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s;
}
.sd-step__node b{font-family:var(--sd-font-latin);font-weight:300;font-size:30px;line-height:1;color:var(--sd-navy-700);letter-spacing:-.02em;}
.sd-step:hover .sd-step__node{transform:translateY(-3px);box-shadow:0 10px 24px -12px rgba(13,27,42,.4);}
/* 最終ステップ＝完了：紺塗り＋ゴールド数字。縁は他ノードと同じゴールドに統一 */
.sd-step:last-child .sd-step__node{background:var(--sd-navy-900);border-color:var(--sd-gold-400);}
.sd-step:last-child .sd-step__node b{color:var(--sd-gold-300);}
/* .sd-step__body：英字ラベル・タイトル・説明文をまとめるラッパー。
   PC（display:contents）では透過扱いにして見た目を一切変えず、
   モバイルのみ実体のあるブロックとして使い、ノードの横に並べる。 */
.sd-step__body{display:contents;}
.sd-step__en{
    font-family:var(--sd-font-latin);
    font-size:10.5px;
    font-weight:500;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--sd-gold-600);
    margin-top:18px;
    margin-bottom:16px;
}
.sd-step__t{
    font-family:var(--sd-font-display);
    font-size:20px;
    line-height:1.7;
    letter-spacing:-.01em;
    color:var(--sd-navy-900);
    margin:0;
    padding-top:20px;
}

.sd-step__d{
    font-size:14px;
    line-height:2.1;
    color:var(--sd-n-500);
    margin-top:16px;
    max-width:24ch;
}

/* ===================================================================
   施工／製作／設置事例 — TOPページ「施工実績」カードの表示へ統一。
   カード内は画像・施工事例タイトル・「事例を見る」のシンプルな構成。
   =================================================================== */
.sd-works3{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:32px;
    align-items:start;
    margin-top:48px;
    margin-left:-72px;
    margin-right:-72px;
}
.sd-w3-card{
    display:block;
    color:inherit;
}
.sd-w3-card:hover,
.sd-w3-card:focus-visible{
    color:inherit;
    text-decoration:none;
}
.sd-w3-card:focus-visible{
    outline:2px solid var(--sd-gold-400);
    outline-offset:6px;
}
.sd-w3-ph{
    position:relative;
    aspect-ratio:4/5;
    border-radius:6px;
    overflow:hidden;
    background:#16202c;
}
.sd-w3-ph::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    background:rgba(11,26,41,0);
    transition:background-color .35s ease;
    pointer-events:none;
}
.sd-w3-ph img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .8s cubic-bezier(.16,1,.3,1);
}
.sd-w3-card:hover .sd-w3-ph img,
.sd-w3-card:focus-visible .sd-w3-ph img{
    transform:scale(1.05);
}
.sd-w3-card:hover .sd-w3-ph::after,
.sd-w3-card:focus-visible .sd-w3-ph::after{
    background:rgba(11,26,41,.18);
}
.sd-w3-card .fpw-card-view{
    position:absolute;
    right:16px;
    bottom:16px;
    z-index:2;
    width:48px;
    height:48px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.75);
    background:rgba(11,26,41,.35);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-family:var(--font-latin,var(--sd-font-latin));
    font-size:18px;
    line-height:1;
    opacity:0;
    transform:scale(.85);
    transition:opacity .35s ease,transform .35s ease;
    pointer-events:none;
}
.sd-w3-card:hover .fpw-card-view,
.sd-w3-card:focus-visible .fpw-card-view{
    opacity:1;
    transform:scale(1);
}
.sd-w3-tags{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:18px;
}
.sd-w3-tag{
    display:inline-flex;
    align-items:center;
    font-family:var(--font-body,var(--sd-font-body));
    font-size:11px;
    font-weight:700;
    letter-spacing:.06em;
    color:#cda052;
    background:transparent;
    border:1px solid #cda052;
    border-radius:2px;
    padding:3px 10px;
    white-space:nowrap;
}
/* #sk-sd を付けて詳細度を上げているのは、上部の共通リセット
   #sk-sd h1,h2,h3{font-weight:400;}（ID込みで詳細度が高い）にfont-weight
   を打ち消されないようにするため。 */
#sk-sd .sd-w3-t{
    font-family:var(--font-body,var(--sd-font-body));
    font-size:18px;
    font-weight:700;
    line-height:1.6;
    color:var(--sd-navy-900);
    letter-spacing:0;
    margin:10px 0 0;
    transition:color .2s ease;
}
.sd-w3-card:hover .sd-w3-t,
.sd-w3-card:focus-visible .sd-w3-t{
    color:#cda052;
}
.sd-w3-more{
    display:inline-block;
    margin-top:14px;
    font-family:var(--font-latin,var(--sd-font-latin));
    font-size:12.5px;
    font-weight:700;
    letter-spacing:.04em;
    color:#cda052;
    border-bottom:1px solid #cda052;
    padding-bottom:3px;
    transition:opacity .2s ease;
}
.sd-w3-card:hover .sd-w3-more,
.sd-w3-card:focus-visible .sd-w3-more{
    opacity:.7;
}

/* 「すべての施工実績を見る」ボタン。TOPページの.fpw-more/.fpw-btnと
   色・余白・ホバー挙動を完全に同じ値で複製（クラス名のみsd-命名に統一）。 */
.sd-works-more{display:flex;justify-content:center;margin-top:56px;}
.sd-works-more__btn{display:inline-flex;align-items:stretch;background:#1a2a40;border-radius:0;overflow:hidden;}
.sd-works-more__label{display:flex;align-items:center;padding:22px 36px;font-size:13px;font-weight:700;letter-spacing:.06em;color:#fff;}
.sd-works-more__arrow{display:flex;align-items:center;justify-content:center;width:56px;border-left:1px solid rgba(255,255,255,.25);color:#fff;font-size:11px;transition:transform .2s ease;}
.sd-works-more__btn:hover .sd-works-more__arrow{transform:translateX(4px);}
@media screen and (max-width:390px){
  .sd-works-more__label{padding:20px 24px;font-size:14px;}
  .sd-works-more__arrow{width:52px;}
}

.sd-faq{margin-top:44px;border-top:1px solid var(--sd-navy-900);}
.sd-faq__item{border-bottom:1px solid var(--sd-n-200);}
.sd-faq__q{list-style:none;cursor:pointer;display:flex;align-items:center;gap:18px;padding:26px 4px;}
.sd-faq__q::-webkit-details-marker{display:none;}
.sd-faq__q::before{content:"Q";font-family:var(--sd-font-latin);font-size:15px;font-weight:500;color:var(--sd-gold-600);flex:none;width:16px;}
.sd-faq__qt{font-family:var(--sd-font-display);font-size:20px;line-height:1.5;color:var(--sd-navy-900);}
.sd-faq__ic{margin-left:auto;flex:none;width:9px;height:9px;border-right:2px solid var(--sd-n-400);border-bottom:2px solid var(--sd-n-400);transform:rotate(45deg);transition:transform .25s cubic-bezier(.16,1,.3,1);}
.sd-faq__item[open] .sd-faq__ic{transform:rotate(-135deg);}
.sd-faq__a{display:flex;gap:18px;padding:0 4px 30px;}
.sd-faq__a::before{content:"A";font-family:var(--sd-font-latin);font-size:15px;font-weight:500;color:var(--sd-navy-400);flex:none;width:16px;}
.sd-faq__a p{font-size:15px;line-height:2;color:var(--sd-n-700);flex:1 1 auto;max-width:116ch;}
@media screen and (max-width:1024px){
  #sk-sd .sd-hero__in{
    max-width:none;
    padding:112px clamp(32px,6vw,56px) 0;
  }
  /* 施工／製作／設置の流れ：タブレット幅では5列の最小幅が足りないため縦積みにする。
     各項目内は番号ノードを左、英字ラベル＋タイトル＋説明文を右に並べる。 */
  .sd-flow{grid-template-columns:1fr;gap:28px;margin-top:44px;}
  .sd-flow::before{display:none;}
  .sd-step{
    position:relative;
    flex-direction:row;
    align-items:flex-start;
    text-align:left;
    gap:16px;
    padding:0;
  }
  .sd-step:not(:last-child)::before{
    content:"";
    position:absolute;
    left:26px;
    top:26px;
    bottom:-54px;
    width:1px;
    background:var(--sd-gold-400);
  }
  .sd-step__node{
    position:relative;
    z-index:1;
    flex:none;
    width:52px;
    height:52px;
    margin-bottom:0;
  }
  .sd-step__node b{font-size:22px;}
  .sd-step__body{
    display:block;
    flex:1;
    min-width:0;
  }
  .sd-step__en{margin-top:0;}
  .sd-step__t{padding-top:0;font-size:23px;line-height:1.55;}
  .sd-step__d{max-width:none;}
  .sd-works3{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:32px 24px;
    margin-left:0;
    margin-right:0;
  }
  .sd-faq__a p{max-width:100%;}
}
.sd-cta{position:relative;background:var(--sd-navy-900);color:#fff;padding:80px 0;overflow:hidden;}
.sd-cta::after{content:"";position:absolute;top:-140px;right:-120px;width:420px;height:420px;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(212,168,32,.16) 0%,rgba(212,168,32,0) 70%);}
.sd-cta__in{position:relative;z-index:1;display:grid;grid-template-columns:1fr auto;gap:48px;align-items:center;}
.sd-cta__h{font-family:var(--sd-font-display);font-size:34px;letter-spacing:-.02em;line-height:1.4;color:#fff;}
.sd-cta__d{font-size:14px;line-height:1.9;color:rgba(255,255,255,.66);margin-top:16px;max-width:46ch;}
.sd-cta__act{display:flex;flex-direction:column;align-items:flex-start;gap:24px;}
.sd-cta__tel{padding-top:22px;border-top:1px solid rgba(255,255,255,.18);width:100%;}
.sd-cta__tel-l{display:flex;align-items:center;gap:12px;font-family:var(--sd-font-latin);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--sd-gold-300);}
.sd-cta__tel-l::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.18);}
.sd-cta__tel-n{font-family:var(--sd-font-latin);font-weight:400;font-size:32px;letter-spacing:.01em;color:#fff;margin-top:10px;}
.sd-cta__tel-h{font-size:12px;color:rgba(255,255,255,.6);margin-top:8px;}
@media screen and (max-width:640px){
  .sd-wrap{padding:0 24px;}
  #sk-sd .sd-hero{padding:72px 0 61px !important;}
  #sk-sd .sd-hero__in{padding:102px 20px 0;}
  .sd-hero__crumb{margin-bottom:24px;font-size:10.5px;letter-spacing:.08em;}
  #sk-sd .sd-hero__h1{font-size:30px;line-height:1.45;margin-top:40px;}
  #sk-sd .sd-hero__lead{font-size:14px;line-height:1.85;max-width:none;margin-top:18px;}
  .sd-hero__lead .sd-nobreak{white-space:normal;}
  .sd-photo{padding:36px 0 0;}
  .sd-overview{grid-template-columns:1fr;gap:28px;}
  /* 見出し（Overview他、.sd-head--left使用の全セクション共通）：PC48px→
     モバイルは30pxに縮小し、狭い画面でも見やすくする。 */
  .sd-head--left .sd-h2{font-size:30px;}
  .sd-sec{padding:76px 0;}
  /* Overview数字3項目：スマホは1列縦積み・左寄せ維持。項目間はpaddingのみ
     で上下の間隔を確保する（区切り線は数字下の罫線と重複するため入れない）。 */
  .sd-kpis{grid-template-columns:1fr;}
  .sd-kpi{padding:28px 0;border-right:0;}
  .sd-kpi:first-child{padding-top:0;}
  .sd-kpi:not(:first-child){padding-left:0;}
  .sd-kpi:last-child{padding-bottom:0;}
  .sd-kpi__n{font-size:clamp(44px,15vw,60px);}
  .sd-step__t{font-size:20px;line-height:1.7;}
  /* 施工／製作／設置事例：モバイルは1カラム縦積み。
     PCではwrapのpadding(72px)を打ち消して横幅を広げているが、モバイルは
     通常のpadding(24px)内に収める。 */
  .sd-works3{grid-template-columns:1fr;gap:28px;margin-left:0;margin-right:0;}
  #sk-sd .sd-w3-t{font-size:15px;line-height:1.7;}
  .sd-w3-card .fpw-card-view{width:42px;height:42px;right:12px;bottom:12px;font-size:16px;}
  .sd-faq__qt{font-size:17px;}
  .sd-cta__in{grid-template-columns:1fr;gap:28px;}
}

/* ---- Lightning 干渉打消し（4事業ページ共通） ----
   実際のbody classは「page-template-{テンプレートファイル名（拡張子・フォルダ抜き）}」
   （page-template-event ではなく page-template-service-event のように、
   フォルダ・拡張子を含まない名前になる。ライブサイトで確認済み）。 */
.page-template-service-event #main,
.page-template-service-event .entry-content,
.page-template-service-event .container,
.page-template-service-event .ld-content-wrap,
.page-template-service-event .l-section,
.page-template-service-furniture #main,
.page-template-service-furniture .entry-content,
.page-template-service-furniture .container,
.page-template-service-furniture .ld-content-wrap,
.page-template-service-furniture .l-section,
.page-template-service-green #main,
.page-template-service-green .entry-content,
.page-template-service-green .container,
.page-template-service-green .ld-content-wrap,
.page-template-service-green .l-section,
.page-template-service-illumination #main,
.page-template-service-illumination .entry-content,
.page-template-service-illumination .container,
.page-template-service-illumination .ld-content-wrap,
.page-template-service-illumination .l-section{
  max-width:none !important; padding-left:0 !important; padding-right:0 !important;
  margin:0 !important; width:100% !important;
}
.page-template-service-event .ld-page_header,
.page-template-service-event .entry-header,
.page-template-service-event .breadcrumb,
.page-template-service-furniture .ld-page_header,
.page-template-service-furniture .entry-header,
.page-template-service-furniture .breadcrumb,
.page-template-service-green .ld-page_header,
.page-template-service-green .entry-header,
.page-template-service-green .breadcrumb,
.page-template-service-illumination .ld-page_header,
.page-template-service-illumination .entry-header,
.page-template-service-illumination .breadcrumb{ display:none !important; }

/* ---- スクロール時のガタつき対策（4事業ページ共通） ----
   親テーマ(Lightning)本体main.jsの「header_scroll」機能が、スクロール量が
   ヘッダー高さ(112px)を超えるたびに直下要素(#saitamakogei-embed-wrapper)へ
   インラインstyleでmargin-topを出し入れしており、これがガタつきの原因。 */
.page-template-service-event #saitamakogei-embed-wrapper,
.page-template-service-furniture #saitamakogei-embed-wrapper,
.page-template-service-green #saitamakogei-embed-wrapper,
.page-template-service-illumination #saitamakogei-embed-wrapper{
  margin-top:0 !important;
}