/* services-signage.html 固有スタイル */

/* ローカル変数: styles.css に対応トークン未定義のアンバー系のみここに集約 */
:root {
  --sg-amber-bg:    #FFF8EC;
  --sg-amber-line:  #FFDC8A;
  --sg-amber-text:  #7A4F00;
  --sg-amber-body:  #5C3C00;
}

.page-hero { position:relative; isolation:isolate; overflow:hidden; color:#fff; background:var(--navy); padding:clamp(140px,18vw,240px) 0 clamp(80px,10vw,120px); border-bottom:1px solid rgba(255,255,255,0.08); }
.page-hero::before { content:""; position:absolute; inset:0; z-index:-2; background:var(--navy); }
.page-hero::after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,rgba(10,22,40,0.92) 0%,rgba(10,22,40,0.74) 45%,rgba(10,22,40,0.45) 100%),linear-gradient(180deg,rgba(10,22,40,0.55) 0%,rgba(10,22,40,0.7) 100%); }
.page-hero__inner { position:relative; max-width:1240px; margin:0 auto; padding:0 clamp(20px,4vw,56px); }
.page-hero h1 { font-size:clamp(36px,5vw,68px); font-weight:800; letter-spacing:-0.03em; line-height:1.1; color:#fff; margin:0 0 24px; max-width:24ch; }
.page-hero h1 em { font-style:normal; color:var(--orange); }
.page-hero__sub { font-size:clamp(16px,1.3vw,18px); color:rgba(255,255,255,0.85); line-height:1.75; max-width:52ch; margin:0; }
.breadcrumbs { display:flex; gap:10px; align-items:center; font-size:13px; color:rgba(255,255,255,0.6); margin-bottom:24px; letter-spacing:0.04em; }
.breadcrumbs a { color:rgba(255,255,255,0.85); text-decoration:none; }
.breadcrumbs a:hover { color:var(--orange); }
.breadcrumbs__sep { color:rgba(255,255,255,0.25); }
.badge-proto { display:inline-flex; align-items:center; gap:8px; background:rgba(255,200,60,0.15); border:1px solid rgba(255,200,60,0.4); color:var(--orange); font-size:13px; font-weight:700; padding:5px 14px; border-radius:100px; letter-spacing:0.06em; margin-bottom:20px; }
.hero-screens { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:48px; }
.hero-screen { border-radius:10px; overflow:hidden; border:1px solid rgba(255,255,255,0.1); position:relative; }
.hero-screen img { width:100%; height:auto; display:block; }
.hero-screen__caption { position:absolute; bottom:0; left:0; right:0; padding:10px 16px; background:rgba(10,16,25,0.82); font-size:13px; color:rgba(255,255,255,0.75); letter-spacing:0.04em; }
.hero-screen--primary { grid-column:2; grid-row:1; }
.hero-screen--secondary { grid-column:1; grid-row:1; }
.sg-section { padding:clamp(60px,8vw,100px) 0; }
.sg-section__inner { max-width:1240px; margin:0 auto; padding:0 clamp(20px,4vw,56px); }
.sg-section--alt { background:var(--grey); }
.sg-eyebrow { font-size:12px; font-weight:800; letter-spacing:0.12em; color:var(--orange); text-transform:uppercase; margin-bottom:16px; display:block; }
.sg-h2 { font-size:clamp(28px,3.5vw,44px); font-weight:800; letter-spacing:-0.02em; line-height:1.2; margin-bottom:20px; color:var(--ink); }
.sg-lede { font-size:clamp(16px,1.2vw,18px); color:var(--ink-3); line-height:1.75; max-width:60ch; }
.sg-quote { background:#F0F4F8; border-left:4px solid var(--orange); padding:24px 28px; border-radius:0 10px 10px 0; margin:32px 0; font-size:clamp(17px,1.4vw,20px); color:#2C3A48; line-height:1.7; font-style:italic; }
.sg-body { font-size:clamp(15px,1.1vw,17px); color:var(--ink-3); line-height:1.85; max-width:68ch; }
.sg-body + .sg-body { margin-top:16px; }
.sg-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:48px; }
@media (max-width:768px) { .sg-steps { grid-template-columns:1fr; } .hero-screens { grid-template-columns:1fr; } .hero-screen--primary,.hero-screen--secondary { grid-column:1; grid-row:auto; } }
.sg-step { background:#fff; border:1px solid var(--line); border-radius:14px; padding:28px 26px; }
.sg-step__num { font-size:11px; font-weight:800; letter-spacing:0.1em; color:var(--orange); margin-bottom:12px; display:block; }
.sg-step__title { font-size:20px; font-weight:800; color:var(--ink); margin-bottom:10px; }
.sg-step__body { font-size:15px; color:var(--ink-3); line-height:1.7; }
.sg-step__img { width:100%; border-radius:8px; margin-top:18px; border:1px solid var(--line); display:block; }
/* ---- 2ステップ大型ショーケース ---- */
.sg-flow { display:flex; flex-direction:column; gap:clamp(48px,7vw,80px); margin-top:56px; }
.sg-flow__row { display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,56px); align-items:center; }
.sg-flow__row--reverse { direction:rtl; }
.sg-flow__row--reverse > * { direction:ltr; }
.sg-flow__media { margin:0; border-radius:12px; overflow:hidden; border:1px solid var(--line); }
.sg-flow__media img { width:100%; height:auto; display:block; }
.sg-flow__text { display:flex; flex-direction:column; gap:12px; }
@media (max-width:768px) {
  .sg-flow__row,
  .sg-flow__row--reverse { grid-template-columns:1fr; direction:ltr; }
  .sg-flow__row--reverse .sg-flow__media { order:-1; }
}

.sg-specs { list-style:none; padding:0; margin-top:32px; display:flex; flex-direction:column; gap:14px; }
.sg-spec { display:flex; gap:16px; align-items:flex-start; padding:18px 22px; background:#fff; border:1px solid var(--line); border-radius:10px; }
.sg-spec__icon { font-size:22px; flex:none; line-height:1; margin-top:2px; }
.sg-spec__text { font-size:16px; color:var(--ink); line-height:1.6; }
.sg-spec__note { font-size:13px; color:var(--mute); margin-top:4px; }
.sg-notice { background:var(--sg-amber-bg); border:1px solid var(--sg-amber-line); border-radius:12px; padding:28px 32px; margin-top:40px; }
.sg-notice__title { font-size:16px; font-weight:800; color:var(--sg-amber-text); margin-bottom:12px; display:flex; align-items:center; gap:8px; }
.sg-notice__body { font-size:15px; color:var(--sg-amber-body); line-height:1.8; }
.sg-note-banner { background:linear-gradient(135deg,#1A2A3A 0%,#162033 100%); border-radius:14px; padding:36px 40px; display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap; }
.sg-note-banner__text { flex:1; min-width:240px; }
.sg-note-banner__eyebrow { font-size:12px; font-weight:800; letter-spacing:0.12em; color:var(--orange-2); text-transform:uppercase; margin-bottom:10px; display:block; }
.sg-note-banner__title { font-size:clamp(18px,1.6vw,22px); font-weight:700; color:#EAF0F6; line-height:1.4; margin-bottom:8px; }
.sg-note-banner__sub { font-size:14px; color:#A8B4C0; }
.sg-note-banner__btn { display:inline-flex; align-items:center; gap:8px; background:var(--orange-2); color:var(--navy); font-size:15px; font-weight:800; padding:12px 24px; border-radius:8px; text-decoration:none; white-space:nowrap; transition:background 0.2s; }
.sg-note-banner__btn:hover { background:var(--orange-deep); }
.sg-cta { text-align:center; padding:clamp(60px,8vw,100px) 0; }
.sg-cta__inner { max-width:640px; margin:0 auto; padding:0 clamp(20px,4vw,56px); }
.sg-cta h2 { font-size:clamp(24px,3vw,36px); font-weight:800; color:var(--ink); margin-bottom:16px; line-height:1.3; }
.sg-cta__body { font-size:16px; color:var(--ink-3); line-height:1.8; margin-bottom:32px; }
.sg-cta__btn { display:inline-flex; align-items:center; gap:10px; background:var(--orange); color:#fff; font-size:17px; font-weight:800; padding:16px 36px; border-radius:10px; text-decoration:none; transition:background 0.2s; }
.sg-cta__btn:hover { background:var(--orange-deep); }