/* ===== 栄和 スマホ専用レイヤー（〜640px） ===== */
@media (max-width: 640px) {
  /* セクション単位でスーッと止まる（proximity＝近づいた時だけ吸着、長いセクションは自由にスクロール） */
  html { -webkit-text-size-adjust: 100%; }
  section { transform-origin: 50% 100%; will-change: opacity, transform; }
  body { overflow-x: hidden; overflow-x: clip; -webkit-tap-highlight-color: transparent; padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
  .sp-js body { animation: sp-fade .55s ease-out both; }
  @keyframes sp-fade { from { opacity: 0; } to { opacity: 1; } }
  .sp-lock { overflow: hidden !important; height: 100vh; }

  /* ---------- スクロール出現（iOSでも動く版） ---------- */
  .sp-js .scroll-rise { animation: none !important; opacity: 0; transform: translateY(22px); transition: opacity .75s cubic-bezier(.2,.7,.2,1), transform .75s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--i, 0) * 70ms); }
  .sp-js .scroll-rise.in { opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce) { .sp-js .scroll-rise { opacity: 1; transform: none; transition: none; } }

  /* ---------- ヘッダー ---------- */
  header { height: auto !important; transition: box-shadow .3s; }
  .sp-scrolled header { box-shadow: 0 6px 24px rgba(17,17,17,.08); }
  header { display: block !important; }
  header > div:first-child { height: 64px; padding: 0 10px 0 12px !important; width: 100%; gap: 8px !important; flex-wrap: nowrap !important; box-sizing: border-box; display: flex; align-items: center; }
  header > div:first-child > a:first-child { gap: 6px !important; align-items: center; height: 64px; }
  header img[alt="栄和ロゴ"] { width: 50px !important; height: 50px !important; margin: 0 !important; }
  header img[alt="Japan demolition 栄和"] { height: 64px !important; width: auto !important; margin: 0 !important; display: block; }
  /* ページリンク（ヘッダー2段目） */
  .sp-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; padding: 0 10px 8px; }  /* スライドせず4×2で全部見える */
  .sp-tabs a { font-size: 11.5px; font-weight: 700; color: #111111; text-decoration: none; padding: 6px 2px; border: 1px solid #E2E5E9; border-radius: 8px; background: #FFFFFF; line-height: 1.3; white-space: nowrap; text-align: center; letter-spacing: -.01em; }
  .sp-tabs a.cur { background: #111111; color: #FFFFFF; border-color: #111111; }
  .sp-tabs a.cta { background: #9BD95A; border-color: #9BD95A; }
  .sp-open .sp-tabs { visibility: hidden; }
  header > div > nav { display: none !important; }
  .sp-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }
  .sp-tel { width: 44px; height: 44px; border-radius: 50%; background: #111111; color: #FFFFFF; display: flex; align-items: center; justify-content: center; text-decoration: none; }
  .sp-tel svg { width: 19px; height: 19px; }
  .sp-burger { width: 44px; height: 44px; border: 0; background: #9BD95A; border-radius: 50%; position: relative; padding: 0; cursor: pointer; }
  .sp-burger span { position: absolute; left: 13px; width: 18px; height: 2px; background: #111111; border-radius: 2px; transition: transform .35s cubic-bezier(.2,.7,.2,1), opacity .25s, top .35s; }
  .sp-burger span:nth-child(1) { top: 16px; } .sp-burger span:nth-child(2) { top: 21px; } .sp-burger span:nth-child(3) { top: 26px; }
  .sp-open .sp-burger { background: #FFFFFF; }
  .sp-open .sp-burger span:nth-child(1) { top: 21px; transform: rotate(45deg); }
  .sp-open .sp-burger span:nth-child(2) { opacity: 0; }
  .sp-open .sp-burger span:nth-child(3) { top: 21px; transform: rotate(-45deg); }

  /* ---------- フルスクリーンメニュー ---------- */
  .sp-menu { position: fixed; inset: 0; z-index: 19; background: #06110B; color: #FFFFFF; transform: translateY(-100%); transition: transform .55s cubic-bezier(.7,0,.2,1), visibility 0s linear .55s; visibility: hidden; display: flex; flex-direction: column; padding: 84px 24px 32px; box-sizing: border-box; overflow-y: auto; }
  .sp-menu::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(155,217,90,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(155,217,90,.07) 1px, transparent 1px); background-size: 56px 56px; mask-image: linear-gradient(180deg, rgba(0,0,0,.9), transparent 90%); }
  .sp-open .sp-menu { transform: translateY(0); visibility: visible; transition: transform .55s cubic-bezier(.7,0,.2,1), visibility 0s; }
  .sp-open header { background: #06110B !important; border-bottom-color: rgba(155,217,90,.25) !important; }
  .sp-open header img[alt="Japan demolition 栄和"] { filter: invert(1) brightness(1.3); }
  .sp-menu-tick { font-family: 'Zen Kaku Gothic New', sans-serif; letter-spacing: .28em; font-size: 11px; color: #9BD95A; margin: 0 0 18px; }
  .sp-menu-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
  .sp-menu-list li { opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .5s cubic-bezier(.2,.7,.2,1); border-bottom: 1px solid rgba(255,255,255,.08); }
  .sp-open .sp-menu-list li { opacity: 1; transform: none; }
  .sp-open .sp-menu-list li:nth-child(1) { transition-delay: .25s; } .sp-open .sp-menu-list li:nth-child(2) { transition-delay: .31s; } .sp-open .sp-menu-list li:nth-child(3) { transition-delay: .37s; } .sp-open .sp-menu-list li:nth-child(4) { transition-delay: .43s; } .sp-open .sp-menu-list li:nth-child(5) { transition-delay: .49s; } .sp-open .sp-menu-list li:nth-child(6) { transition-delay: .55s; }
  .sp-menu-list a { display: flex; align-items: baseline; gap: 16px; padding: 18px 0; color: #FFFFFF; text-decoration: none; font-family: 'Zen Kaku Gothic New', sans-serif; font-weight: 900; font-size: 26px; letter-spacing: .02em; }
  .sp-menu-list a small { font-family: 'Zen Kaku Gothic New', sans-serif; font-weight: 500; font-size: 12px; color: #9BD95A; letter-spacing: .2em; min-width: 28px; }
  .sp-menu-list a.cur { color: #9BD95A; }
  .sp-menu-list a .arr { margin-left: auto; font-size: 18px; color: rgba(255,255,255,.35); }
  .sp-menu-foot { margin-top: auto; padding-top: 32px; opacity: 0; transform: translateY(16px); transition: opacity .5s .6s, transform .5s .6s; }
  .sp-open .sp-menu-foot { opacity: 1; transform: none; }
  .sp-menu-foot .lbl { font-size: 12px; color: #8FA89A; margin: 0 0 6px; }
  .sp-menu-foot .tel { display: block; font-family: 'Zen Kaku Gothic New', sans-serif; font-weight: 900; font-size: 32px; color: #FFFFFF; text-decoration: none; letter-spacing: .02em; line-height: 1.1; }
  .sp-menu-foot .hours { font-size: 12px; color: #8FA89A; margin: 6px 0 20px; }
  .sp-menu-foot .cta { display: flex; align-items: center; justify-content: center; min-height: 56px; background: #9BD95A; color: #111111; border-radius: 999px; font-weight: 700; font-size: 16px; text-decoration: none; }
  .sp-menu-foot .addr { font-size: 11px; color: #5F7A68; margin: 18px 0 0; line-height: 1.8; }

  /* ---------- トップのヒーロー（動画は16:9固定・見切れなし） ---------- */
  section:has(> video) { display: block; }
  section:has(> video) > video { display: none !important; }
  .hero-poster { position: relative; display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
  section:has(> video) > div[style*="linear-gradient(90deg"] { inset: auto 0 0 0 !important; height: auto !important; top: auto !important; background: none !important; }
  section:has(> video) > .gridlines { top: calc(100vw * 9 / 16) !important; }
  section:has(> video) > .scanline { display: none; }
  section:has(> video) > div[style*="padding: 128px"] { padding: 22px 20px 30px !important; box-sizing: border-box; background: linear-gradient(180deg, #06110B, #0A1A11); }
  section:has(> video) .hud { max-width: none !important; }
  section:has(> video) .tick { font-size: 10px !important; letter-spacing: .22em; }
  section:has(> video) h1 { font-size: clamp(30px, 8.6vw, 38px) !important; line-height: 1.22 !important; letter-spacing: 0 !important; }
  section:has(> video) h1 + .hero-brush { margin: 14px 0 12px !important; width: 220px !important; }
  section:has(> video) h1 + .hero-brush + p { font-size: 14px !important; line-height: 1.85 !important; color: #C9D6CD !important; }
  section:has(> video) p + div.rise.d3 { margin-top: 20px !important; gap: 8px !important; display: grid !important; grid-template-columns: 1fr 1fr; }
  section:has(> video) p + div.rise.d3 a.pill { width: auto; justify-content: center; text-align: center; font-size: 14.5px !important; padding: 15px 10px !important; display: block; box-sizing: border-box; white-space: nowrap; }
  section:has(> video) .rise.d3:last-of-type { margin-top: 20px !important; display: grid !important; grid-template-columns: repeat(2, 1fr); gap: 14px 0 !important; border-top: 1px solid rgba(155,217,90,.3); padding-top: 14px; }
  section:has(> video) .rise.d3:last-of-type > div { padding: 0 8px; border-left: 1px solid rgba(155,217,90,.2); }
  section:has(> video) .rise.d3:last-of-type > div:nth-child(odd) { border-left: 0; padding-left: 0; }
  section:has(> video) .rise.d3:last-of-type .tick { font-size: 9.5px !important; margin-bottom: 2px !important; }
  section:has(> video) .rise.d3:last-of-type p:not(.tick) { font-size: 16px !important; line-height: 1.2 !important; }
  section:has(> video) .rise.d3:last-of-type p:not(.tick) span { display: block; font-size: 10px !important; margin-top: 3px; white-space: nowrap; letter-spacing: -.02em; }
  .sp-cue { display: none; }
  .hud::before, .hud::after { display: none; }

  /* ---------- 筆のかすれアクセント ---------- */
  .sp-menu-tick { position: relative; padding-bottom: 14px; }
  .sp-menu-tick::after { content: ""; position: absolute; left: -10px; bottom: 0; width: 220px; height: 14px; background: url(brush-wide.png) no-repeat left center / auto 100%; opacity: .9; }
  /* ---------- 下層ページのヒーロー ---------- */
  section:first-of-type[style="background: #EEF1F4"] > div { padding: 28px 20px 0 !important; gap: 0 12px !important; display: grid !important; grid-template-columns: minmax(0, 1fr) 108px; align-items: end; }
  section:first-of-type[style="background: #EEF1F4"] > div:not(:has(img)) { grid-template-columns: minmax(0, 1fr); padding-bottom: 32px !important; }
  section:first-of-type[style="background: #EEF1F4"] > div > div { flex: none !important; }
  section:first-of-type[style="background: #EEF1F4"] > div > div { grid-column: 1; grid-row: 1; padding-bottom: 20px; }
  section:first-of-type[style="background: #EEF1F4"] > div > div:has(> img) { grid-column: 2; grid-row: 1; padding-bottom: 0; align-self: end; flex: none !important; width: 108px !important; max-width: none !important; display: flex; align-items: flex-end; }
  section:first-of-type[style="background: #EEF1F4"] h1 { font-size: 28px !important; line-height: 1.3 !important; }
  section:first-of-type[style="background: #EEF1F4"] h1 + p { font-size: 14px !important; line-height: 1.85 !important; margin-top: 10px !important; }
  section:first-of-type[style="background: #EEF1F4"] img { grid-column: 2; grid-row: 1; width: 108px !important; max-width: none !important; flex: none !important; align-self: end; margin: 0 !important; }

  /* ---------- セクション余白・タイポ ---------- */
  section > div, section { padding-left: 20px !important; padding-right: 20px !important; }
  section[style*="padding: 120px 32px"], section[style*="padding: 104px 32px"], section[style*="padding: 96px 32px"], section[style*="padding: 72px 32px"], section[style*="padding: 64px 32px"] { padding-top: 48px !important; }
  section[style*="padding: 96px 32px 96px"], section[style*="padding: 72px 32px 96px"] { padding-bottom: 48px !important; }
  section[style*="margin-top: 120px"], section[style*="margin-top: 96px"] { margin-top: 48px !important; }
  section > div[style*="padding: 120px 32px"], section > div[style*="padding: 104px 32px"], section > div[style*="padding: 96px 32px"] { padding-top: 48px !important; padding-bottom: 48px !important; }
  h2 { font-size: 27px !important; line-height: 1.3 !important; }
  h2[style*="margin: 0 0 52px"], h2[style*="margin: 0 0 40px"], h2[style*="margin: 0 0 36px"] { margin-bottom: 18px !important; }
  h2 { font-size: 25px !important; }
  h2[style*="font-size: 48px"] { font-size: 23px !important; }
  h3 { font-size: 18px !important; }
  p, li, dd, dt { font-size: 15px !important; }
  p[style*="letter-spacing: 0.12em"] { font-size: 12px !important; letter-spacing: .18em !important; margin-bottom: 10px !important; }
  [style*="grid-template-columns: repeat(2"], [style*="grid-template-columns: repeat(3"], [style*="grid-template-columns: repeat(4"] { grid-template-columns: minmax(0, 1fr) !important; gap: 14px !important; }
  [style*="border-radius: 28px"], [style*="border-radius: 32px"] { border-radius: 22px !important; }
  [style*="padding: 40px 34px"], [style*="padding: 44px 40px"], [style*="padding: 48px 44px"], [style*="padding: 52px 44px"], [style*="padding: 52px 48px"], [style*="padding: 56px 48px"] { padding: 26px 22px !important; }
  [style*="padding: 36px 32px"], [style*="padding: 36px 34px"], [style*="padding: 40px 36px"], [style*="padding: 38px 32px"], [style*="padding: 32px 30px"] { padding: 24px 20px !important; }
  div[style*="margin-bottom: 52px"][style*="align-items: flex-end"] { margin-bottom: 24px !important; }
  div[style*="align-items: flex-end"] > a[href$=".html"] { margin-left: 0 !important; font-size: 14px !important; flex: 1 1 100%; }
  .card:active { transform: scale(.985); }
  a.pill, button.pill { font-size: 15px !important; padding: 16px 24px !important; width: 100%; text-align: center; box-sizing: border-box; display: block; }
  .pill[href^="tel:"] { font-size: 18px !important; }

  /* ---------- 4つの理由（バッジ横並び） ---------- */
  .sp-reason > * { flex-basis: 86% !important; }
  .sp-reason > div { display: grid !important; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; align-items: start; }
  .sp-reason > div > div:first-of-type { width: 44px !important; height: 44px !important; font-size: 18px !important; margin: 0 !important; grid-row: 1; align-self: center; }
  .sp-reason > div > h3 { grid-column: 2; grid-row: 1; margin: 0 !important; font-size: 17.5px !important; line-height: 1.45; align-self: center; }
  .sp-reason > div > .sp-more { grid-column: 1 / -1; }
  .sp-reason > div > p { grid-column: 1 / -1; margin-top: 14px !important; padding-top: 14px; border-top: 1px dashed #E5E7EA; }

  /* ---------- 横スワイプ・カルーセル ---------- */
  .sp-carousel { display: flex !important; grid-template-columns: none !important; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px !important; margin: 0 -20px; padding: 6px 20px 10px; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
  .sp-carousel::-webkit-scrollbar { display: none; }
  .sp-carousel.sp-flow { scroll-snap-type: none; }
  .sp-carousel.sp-flow > * { scroll-snap-align: none; }
  .sp-carousel > * { flex: 0 0 82%; scroll-snap-align: center; box-sizing: border-box; }
  .sp-carousel > a.card { min-height: 100%; }
  .sp-carousel img[style*="aspect-ratio: 4 / 3"] { aspect-ratio: 16 / 10 !important; }
  .sp-carousel article h2 { font-size: 17px !important; }
  .sp-carousel article > div:last-child { padding: 16px 18px 18px !important; }
  .sp-clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
  .sp-clamp.open { -webkit-line-clamp: unset; display: block; }
  .sp-more { background: none; border: 0; padding: 8px 0 0; font: inherit; font-size: 13px; font-weight: 700; color: #257A12; cursor: pointer; display: block; }
  .sp-more::after { content: " ＋"; }
  .sp-more.open::after { content: " −"; }
  .sp-dots { display: flex; justify-content: center; align-items: center; gap: 7px; margin: 14px 0 0; }
  .sp-dots i { width: 6px; height: 6px; border-radius: 999px; background: #D5D9DE; transition: width .35s cubic-bezier(.2,.7,.2,1), background .3s; }
  .sp-dots i.on { width: 22px; background: #9BD95A; }
  .sp-swipe { display: none; text-align: center; font-family: 'Zen Kaku Gothic New', sans-serif; font-size: 10px; letter-spacing: .3em; color: #9AA3AB; margin: 8px 0 0; }

  /* ---------- 費用の目安（行表示） ---------- */
  .sp-rows > div { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: baseline; padding: 20px 20px 18px !important; border-radius: 18px !important; background: #F5F7F9; border: 0 !important; }
  .sp-rows > div > p:nth-child(1) { grid-column: 1; grid-row: 1; margin: 0 !important; font-size: 14px !important; color: #111111 !important; }
  .sp-rows > div > p:nth-child(2) { grid-column: 2; grid-row: 1; margin: 0 !important; font-size: 23px !important; white-space: nowrap; }
  .sp-rows > div > p:nth-child(2) span { font-size: 13px !important; }
  .sp-rows > div > p:nth-child(3) { grid-column: 1 / -1; grid-row: 2; margin: 8px 0 0 !important; font-size: 12.5px !important; }

  div[style*="align-items: flex-end"]:has(> img) { display: grid !important; grid-template-columns: minmax(0, 1fr) 128px; gap: 6px 10px !important; align-items: end !important; }
  div[style*="align-items: flex-end"]:has(> img) > div { grid-column: 1; grid-row: 1; }
  div[style*="align-items: flex-end"]:has(> img) h2 { font-size: 22px !important; }
  div[style*="align-items: flex-end"]:has(> img) > a { grid-column: 1; grid-row: 2; flex: none; }
  div[style*="align-items: flex-end"]:has(> img) > img { grid-column: 2; grid-row: 1 / 3; width: 128px !important; max-width: none !important; margin: 0 !important; }
  /* ---------- お悩みセクション ---------- */
  div:has(> img[alt="栄和のキャラクター"]) { display: grid; grid-template-columns: minmax(0, 1fr) 96px; column-gap: 12px; align-items: end; flex: none !important; }
  div:has(> img[alt="栄和のキャラクター"]) > p { grid-column: 1; }
  div:has(> img[alt="栄和のキャラクター"]) > h2 { grid-column: 1; font-size: 23px !important; }
  img[alt="栄和のキャラクター"] { grid-column: 2; grid-row: 1 / 3; width: 96px !important; margin: 0 !important; }
  section div[style*="gap: 64px"] { gap: 24px !important; }

  /* ---------- FAQ アコーディオン ---------- */
  .sp-acc > div { display: block !important; padding: 0 !important; }
  .sp-acc dt { display: flex; align-items: flex-start; gap: 10px; padding: 18px 44px 18px 0; position: relative; cursor: pointer; font-size: 16px !important; line-height: 1.55; -webkit-user-select: none; user-select: none; }
  .sp-acc dt::after { content: ""; position: absolute; right: 4px; top: 50%; width: 30px; height: 30px; margin-top: -15px; border-radius: 50%; background: #F0F3F5; background-image: linear-gradient(#111, #111), linear-gradient(#111, #111); background-size: 12px 1.5px, 1.5px 12px; background-position: center; background-repeat: no-repeat; transition: transform .4s cubic-bezier(.2,.7,.2,1), background-color .3s; }
  .sp-acc > div.open dt::after { transform: rotate(135deg); background-color: #9BD95A; }
  .sp-acc dd { display: grid !important; grid-template-rows: 0fr; margin: 0 !important; transition: grid-template-rows .45s cubic-bezier(.2,.7,.2,1); }
  .sp-acc dd > div { overflow: hidden; }
  .sp-acc dd > div > div { padding: 0 0 20px; }
  .sp-acc > div.open dd { grid-template-rows: 1fr; }

  /* ---------- 表（会社概要・募集要項） ---------- */
  table { min-width: 0 !important; width: 100% !important; display: block; font-size: 15px !important; }
  table tbody, table tr { display: block; }
  table tr { padding: 14px 0 15px; border-bottom: 1px solid #E5E7EA; }
  table tr:first-child { border-top: 1px solid #E5E7EA; }
  th[scope="row"], td { display: block; width: auto !important; border: 0 !important; background: transparent !important; text-align: left !important; }
  th[scope="row"] { padding: 0 0 4px !important; font-size: 12px !important; font-weight: 700 !important; color: #257A12 !important; letter-spacing: .08em; }
  td { padding: 0 !important; font-size: 15px !important; line-height: 1.85; }

  /* ---------- 1日の流れ（採用） ---------- */
  .clockwrap { transform: scale(.94); transform-origin: top center; margin-bottom: -18px; }
  div:has(> .clockwrap) { padding: 20px 10px 22px !important; }
  /* タイムライン表示 */
  div:has(> .clockwrap) + div { gap: 0 !important; position: relative; padding-left: 4px; }
  div:has(> .clockwrap) + div::before { content: ""; position: absolute; left: 10px; top: 14px; bottom: 14px; width: 2px; background: #E5E7EA; }
  div:has(> .clockwrap) + div > .card { display: grid !important; grid-template-columns: 14px 64px minmax(0, 1fr); column-gap: 12px; align-items: baseline !important; border: 0 !important; border-radius: 0 !important; padding: 12px 0 14px !important; position: relative; }
  div:has(> .clockwrap) + div > .card:active { transform: none; }
  div:has(> .clockwrap) + div > .card > span { grid-column: 1; grid-row: 1; width: 14px !important; height: 14px !important; border-radius: 50% !important; align-self: center !important; box-shadow: 0 0 0 4px #FFFFFF; position: relative; z-index: 1; }
  div:has(> .clockwrap) + div > .card > p[style*="flex: 0 0 80px"] { grid-column: 2; grid-row: 1; flex: none !important; font-size: 18px !important; }
  div:has(> .clockwrap) + div > .card > h3 { grid-column: 3; grid-row: 1; flex: none !important; font-size: 16px !important; }
  div:has(> .clockwrap) + div > .card > p:last-child { grid-column: 3; grid-row: 2; flex: none !important; font-size: 13.5px !important; margin-top: 2px !important; }

  /* ---------- 施工事例（一覧・縦積み） ---------- */
  .sp-stack { gap: 20px !important; }

  /* ---------- フォーム ---------- */
  form { padding: 28px 18px !important; border-radius: 22px !important; }
  input, select, textarea { font-size: 16px !important; width: 100%; box-sizing: border-box; }
  form button, form [type="submit"] { width: 100%; min-height: 56px; }

  /* ---------- アクセス・下層末尾 ---------- */
  div[style*="aspect-ratio: 16 / 9"] { aspect-ratio: 4 / 3 !important; }

  /* ---------- 末尾CTA（コンパクト） ---------- */
  img[src="assets/char-phone.png"], img[src="assets/char-bow.png"] { width: 96px !important; display: inline-block !important; vertical-align: bottom; margin: 0 6px 10px !important; }
  img[src="assets/char-phone.png"] + img[alt="Japan demolition 栄和"] { width: 150px !important; display: inline-block !important; vertical-align: bottom; margin: 0 6px 10px !important; }
  section h2 + p[style*="margin: 0 auto 44px"] { margin-bottom: 22px !important; font-size: 14px !important; line-height: 1.85 !important; }
  div:has(> a.pill + a.pill) { gap: 10px !important; }
  /* 表の折りたたみ */
  tr.sp-hide { display: none; }
  table.sp-expanded tr.sp-hide { display: block; }
  .sp-tbl-more { display: block; width: 100%; margin: 12px 0 0; padding: 13px; border: 1.5px solid #111111; border-radius: 999px; background: #FFFFFF; font: inherit; font-size: 14px; font-weight: 700; color: #111111; }
  /* 対応工事（アコーディオン） */
  .sp-svc { display: grid !important; grid-template-columns: 76px minmax(0, 1fr) 28px; column-gap: 12px; row-gap: 0 !important; gap: 0 12px !important; padding: 16px 0 !important; align-items: center; }
  .sp-svc > div:first-child { grid-column: 1; grid-row: 1; }
  .sp-svc > div:first-child img, .sp-svc > div:first-child > div { aspect-ratio: 1 / 1 !important; border-radius: 16px !important; font-size: 9px !important; padding: 4px !important; line-height: 1.4; }
  .sp-svc > .sp-svc-head { grid-column: 2; grid-row: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
  .sp-svc > .sp-svc-head > p { margin: 0 !important; font-size: 11px !important; padding: 2px 8px !important; }
  .sp-svc > .sp-svc-head > h2 { margin: 0 !important; font-size: 17px !important; flex: 1 1 100%; }
  .sp-svc::after { content: ""; grid-column: 3; grid-row: 1; width: 28px; height: 28px; border-radius: 50%; background: #F0F3F5; background-image: linear-gradient(#111, #111), linear-gradient(#111, #111); background-size: 11px 1.5px, 1.5px 11px; background-position: center; background-repeat: no-repeat; transition: transform .4s cubic-bezier(.2,.7,.2,1), background-color .3s; }
  .sp-svc.open::after { transform: rotate(135deg); background-color: #9BD95A; }
  .sp-svc > .sp-svc-body { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s cubic-bezier(.2,.7,.2,1); }
  .sp-svc > .sp-svc-body > div { overflow: hidden; }
  .sp-svc > .sp-svc-body > div > div { padding-top: 14px; }
  .sp-svc.open > .sp-svc-body { grid-template-rows: 1fr; }
  .sp-svc-body p { font-size: 14px !important; line-height: 1.85 !important; margin-bottom: 12px !important; }
  .sp-svc-body ul { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 !important; list-style: none; }
  .sp-svc-body li { font-size: 12.5px !important; background: #F0F3F5; border-radius: 999px; padding: 4px 10px; line-height: 1.5 !important; }

  /* ---------- 会社案内 ごあいさつ ---------- */
  .sp-float { float: right; width: 104px !important; max-width: none !important; margin: -8px 0 6px 14px !important; shape-outside: margin-box; }
  .sp-fold { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s cubic-bezier(.2,.7,.2,1); clear: none; }
  .sp-fold > div { overflow: hidden; }
  .sp-fold > div > div { padding-top: 16px; }
  .sp-fold.open { grid-template-rows: 1fr; }
  .sp-fold p { font-size: 14.5px !important; line-height: 1.9 !important; }
  div:has(> .sp-fold) > h2 { font-size: 23px !important; margin-bottom: 16px !important; }
  div:has(> .sp-fold) > p { font-size: 14.5px !important; line-height: 1.9 !important; margin-bottom: 0 !important; }
  div:has(> .sp-fold) > div[style*="margin-top: 36px"] { margin-top: 20px !important; padding-top: 16px !important; gap: 12px 16px !important; clear: both; }
  div:has(> .sp-fold) img[alt="Japan demolition 栄和"] { width: 130px !important; }
  div:has(> .sp-fold) p[style*="font-size: 26px"] { font-size: 20px !important; }
  section:first-of-type[style="background: #EEF1F4"] h1[style*="font-size: 48px"] { font-size: 26px !important; }

  /* ---------- フッター ---------- */
  footer > div { padding: 28px 20px 12px !important; display: grid !important; grid-template-columns: minmax(0, 1fr); gap: 14px 12px !important; align-items: start; }
  footer > div > div:first-child { grid-column: 1; grid-row: 1; flex: none !important; gap: 10px !important; }
  footer img[alt="栄和ロゴ"] { width: 40px !important; height: 40px !important; }
  footer > div > div:first-child p { font-size: 12px !important; line-height: 1.75 !important; }
  footer > div > div:first-child p[style*="font-size: 24px"] { font-size: 18px !important; }
  footer > div > div:first-child p[style*="margin: 14px 0 0"] { margin-top: 8px !important; }
  footer nav { grid-column: 1 / -1; grid-row: 2; flex-direction: row !important; flex-wrap: wrap; gap: 0 16px !important; flex: none !important; border-top: 1px solid #E5E7EA; padding-top: 4px; }
  footer nav a { font-size: 13px !important; padding: 8px 0 !important; }
  footer img[alt="Japan demolition Eiwa だるまマーク"] { grid-column: 2; grid-row: 1; width: 112px !important; margin: 0 !important; }
  footer > div:last-child { padding: 0 20px 14px !important; font-size: 11px !important; }

  /* ---------- 固定ボトムバー ---------- */
  .spbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 18; padding-bottom: env(safe-area-inset-bottom); background: #111111; transform: translateY(110%); transition: transform .45s cubic-bezier(.2,.7,.2,1); box-shadow: 0 -8px 24px rgba(0,0,0,.12); }
  .sp-barshow .spbar { transform: translateY(0); }
  .sp-open .spbar { transform: translateY(110%); }
  .spbar a { min-height: 58px !important; font-size: 15px !important; letter-spacing: .02em; }
  .spbar a:active { filter: brightness(.9); }
  .sp-noscroll-bar .spbar { transform: translateY(0); }
}
@media (min-width: 641px) {
  .sp-actions, .sp-menu, .sp-cue, .sp-swipe, .spbar, .sp-tabs { display: none !important; }
  /* PC：流れるカード列 */
  .sp-carousel { display: flex !important; grid-template-columns: none !important; overflow-x: auto; gap: 24px !important; padding: 8px 0 12px; scrollbar-width: none; scroll-snap-type: none; }
  .sp-carousel::-webkit-scrollbar { display: none; }
  .sp-carousel > * { flex: 0 0 calc((100% - 48px) / 3); box-sizing: border-box; }
  .sp-carousel[data-cols="2"] > * { flex-basis: calc((100% - 24px) / 2); }
  .sp-carousel[data-cols="4"] > * { flex-basis: calc((100% - 72px) / 4); }
  .sp-carousel > a.card { height: auto; }
  .sp-dots { display: flex; justify-content: center; gap: 7px; margin: 16px 0 0; }
  .sp-dots i { width: 6px; height: 6px; border-radius: 999px; background: #D5D9DE; transition: width .35s cubic-bezier(.2,.7,.2,1), background .3s; }
  .sp-dots i.on { width: 22px; background: #9BD95A; }
  section { transform-origin: 50% 100%; }
}

/* ===== 筆のかすれ：ページ全体を走る薄い背景アクセント ===== */
body { position: relative; }
.brush-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
body { background: #FFFFFF; }
body > div:not(.brush-bg) { position: relative; z-index: 1; background: transparent !important; }
.brush-bg i { position: absolute; display: block; background: no-repeat center / 100% 100%; transform: rotate(var(--r)) scale(var(--sx), var(--sy)); }
@media (prefers-reduced-motion: no-preference) { .brush-bg i { animation: brush-drift 16s ease-in-out infinite alternate; } }
@keyframes brush-drift { from { transform: translateX(0) rotate(var(--r)) scale(var(--sx), var(--sy)); } to { transform: translateX(var(--dx)) rotate(calc(var(--r) + 2deg)) scale(var(--sx), var(--sy)); } }

/* ロングアーム解体機（スマホ） */
@media (max-width: 640px) {
  .sp-hr-host { position: relative; }
  .sp-hr { position: absolute; right: -6px; top: 0; width: clamp(92px, 28vw, 120px); z-index: 0; pointer-events: none; opacity: .95; }
  .sp-hr-host > .tick { padding-right: clamp(70px, 22vw, 96px); }
  .sp-hr-host > *:not(.sp-hr):not(.brush-bg) { position: relative; z-index: 1; }
  .sp-hr .hr { position: relative; }
  .sp-hr .hr img { width: 100%; height: auto; display: block; }
  .sp-hr .hr-arm { position: absolute; inset: 0; transform-origin: 66.97% 84.67%; animation: hr-swing-sp 9s ease-in-out infinite; }
  @keyframes hr-swing-sp { 0%, 100% { transform: rotate(0deg); } 30% { transform: rotate(-5deg); } 42% { transform: rotate(-5deg); } 70% { transform: rotate(3deg); } 80% { transform: rotate(3deg); } }
}
@media (prefers-reduced-motion: reduce) { .sp-hr .hr-arm { animation: none; } }

/* スライドの代わり：2列タイルで一瞬で見渡せる */
@media (max-width: 640px) {
  html body .sp-glance { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; }
  html body .sp-glance > * { min-width: 0; padding: 16px 14px !important; border-radius: 16px !important; box-sizing: border-box; }
  html body .sp-glance h3 { font-size: 15px !important; line-height: 1.4 !important; margin: 0 0 6px !important; }
  html body .sp-glance p { font-size: 12.5px !important; line-height: 1.6 !important; }
  html body .sp-glance > * > p:last-of-type:not(:first-child) { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  html body .sp-glance img { aspect-ratio: 16 / 10 !important; height: auto !important; }
  html body .sp-glance.sp-reason > div { display: block !important; }
  html body .sp-glance.sp-reason > div > div:first-of-type { width: 30px !important; height: 30px !important; font-size: 14px !important; margin: 0 0 8px !important; }
  html body .sp-glance.sp-reason > div > h3 { font-size: 14.5px !important; line-height: 1.45 !important; }
  html body .sp-glance.sp-reason > div > p { margin-top: 8px !important; padding-top: 8px; border-top: 1px dashed #E5E7EA; }
  html body .sp-glance > .sp-open > p:last-of-type { -webkit-line-clamp: unset; display: block; }
  html body .sp-glance > div[data-tap] { cursor: pointer; }
  html body .sp-glance > .sp-has-ico { position: relative; }
  html body .sp-glance .sp-ico { position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; border-radius: 50%; background: #EEF7E4; color: #257A12; display: flex; align-items: center; justify-content: center; }
  html body .sp-glance .sp-ico svg { width: 17px; height: 17px; }
  html body .sp-glance > .sp-has-ico > p:first-of-type { padding-right: 34px; }
  html body .sp-glance.sp-reason > .sp-has-ico > p:first-of-type { padding-right: 0; }
  html body .sp-glance > div[data-tap]::after { content: "タップで全文"; display: block; margin-top: 6px; font-size: 11px; font-weight: 700; color: #257A12; }
  html body .sp-glance > div.sp-open[data-tap]::after { content: "閉じる"; }
}

/* お問い合わせ：チェック項目はスマホで詰めて縦の長さを抑える */
@media (max-width: 640px) {
  html body form fieldset > div[style] { display: grid !important; grid-template-columns: 1fr !important; gap: 6px !important; }
  html body form fieldset > div[style] > div[style] { min-height: 0 !important; gap: 9px !important; padding: 8px 12px; border: 1px solid #DDE0E3; border-radius: 10px; background: #FFFFFF; }
  html body form fieldset > div[style] > div[style]:has(input:checked) { border-color: #6BB82E; background: #F1FAE8; }
  form fieldset input[type="checkbox"] { width: 17px !important; height: 17px !important; margin: 0; flex: none; accent-color: #257A12; }
  form fieldset label { font-size: 13.5px !important; line-height: 1.4; }
}