/* ===== 栄和 PC用デザインレイヤー（641px〜）：ブロブ／ドット／ライン画／筆記体 ===== */
@media (min-width: 641px) {
  :root { --lime: #9BD95A; --lime-d: #257A12; --lime-l: #E4F5CF; --gray: #EEF1F4; --ink: #111111; }
  body { overflow-x: clip; }

  /* ---------- ヘッダー：半透明＋ブラー、ロゴ整列 ---------- */
  header { position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,.86) !important; -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); border-bottom: 0 !important; box-shadow: 0 2px 28px rgba(17,17,17,.06); overflow: visible !important; }
  header::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, var(--lime) 0%, #CDEBA6 45%, transparent 85%); }
  header > div:first-child { height: 84px; padding: 0 32px !important; align-items: center !important; gap: 24px !important; flex-wrap: nowrap !important; }
  header > div:first-child > a:first-child { gap: 12px !important; align-items: center; height: 84px; }
  header img[alt="栄和ロゴ"] { width: 58px !important; height: 58px !important; margin: 0 !important; border-radius: 50%; box-shadow: 0 4px 14px rgba(155,217,90,.35); }
  header img[alt="Japan demolition 栄和"] { height: 54px !important; width: auto !important; margin: 0 !important; display: block; }
  header nav { gap: 0 !important; align-items: center; }
  header nav a.navlink { display: flex !important; flex-direction: column; align-items: center; justify-content: center; padding: 4px clamp(10px, 1.3vw, 18px) !important; white-space: nowrap; line-height: 1.1 !important; border-left: 1px solid #E3E7EB; text-decoration: none; }
  header nav a.navlink:first-child { border-left: 0; }
  header nav a.navlink .en { font-family: 'Zen Kaku Gothic New', sans-serif; font-weight: 900; letter-spacing: .04em; font-size: 16px; color: var(--lime-d); transition: color .25s, transform .3s; }
  header nav a.navlink .ja { font-size: 11px; color: #555; margin-top: 4px; letter-spacing: .12em; font-weight: 700; }
  header nav a.navlink:hover .en { color: var(--lime); transform: translateY(-2px); }
  header nav a.navlink.cur .en { color: var(--lime); }
  header nav a[href^="tel:"] { margin-left: 20px; font-size: 19px !important; }
  header nav a.pill { margin-left: 8px; }
  .sp-tabs, .sp-actions, .sp-menu { display: none !important; }

  /* ---------- 見出し：筆記体の英語＋日本語 ---------- */
  .pc-en { font-family: 'Zen Kaku Gothic New', sans-serif !important; font-size: 40px !important; font-weight: 900 !important; letter-spacing: .03em !important; line-height: 1.05 !important; margin: 0 0 6px !important; font-weight: 400 !important; background: linear-gradient(92deg, var(--lime-d) 0%, #5FB33A 45%, var(--lime) 100%); -webkit-background-clip: text; background-clip: text; color: transparent !important; display: inline-block; padding-right: .2em; }
  .pc-en { position: relative; z-index: 0; }
  .pc-en + h2, .pc-en + h1 { font-size: 26px !important; letter-spacing: .06em; color: #333333; margin-top: 0 !important; }
  .pc-en + h1 { font-size: 30px !important; }
  .pc-ja { display: inline-block; background: var(--ink); color: #FFFFFF !important; font-size: 12px !important; letter-spacing: .16em !important; padding: 5px 14px; border-radius: 999px; margin-bottom: 14px !important; }

  /* ---------- グレー帯 → ブロブ ---------- */
  .pc-band { position: relative; margin-left: 24px !important; margin-right: 24px !important; border-radius: clamp(48px, 9vw, 140px) clamp(56px, 11vw, 170px) clamp(44px, 8vw, 120px) clamp(52px, 10vw, 160px) / 72px 88px 64px 96px; overflow: hidden; background: linear-gradient(160deg, #F3F5F7 0%, var(--gray) 60%, #E6EBEF 100%) !important; }
  .pc-band::before { content: ""; position: absolute; right: -6%; top: -30%; width: 46%; height: 160%; background: radial-gradient(rgba(155,217,90,.35) 2px, transparent 2.4px) 0 0 / 18px 18px; mask-image: radial-gradient(closest-side, #000 20%, transparent 100%); -webkit-mask-image: radial-gradient(closest-side, #000 20%, transparent 100%); pointer-events: none; }
  .pc-band::after { content: ""; position: absolute; left: -4%; bottom: -6%; width: 78%; height: 46%; background: url(brush-wide.png) no-repeat left bottom / 100% auto; opacity: .22; pointer-events: none; }
  .pc-band > div { position: relative; z-index: 1; }
  .pc-band.pc-dark { background: linear-gradient(160deg, #1C2A21 0%, #06110B 70%) !important; color: #FFFFFF; }

  /* ---------- 白セクションの飾り（ドット／斜線／ライン画） ---------- */
  .pc-sec { position: relative; }
  .pc-deco { position: absolute; pointer-events: none; z-index: 0; }
  .pc-deco.dots { width: 300px; height: 300px; background: radial-gradient(rgba(155,217,90,.5) 2px, transparent 2.4px) 0 0 / 18px 18px; mask-image: radial-gradient(closest-side, #000 10%, transparent 100%); -webkit-mask-image: radial-gradient(closest-side, #000 10%, transparent 100%); }
  .pc-deco.dots.gray { background-image: radial-gradient(rgba(150,160,170,.45) 2px, transparent 2.4px); }
  .pc-deco.stripes { width: 260px; height: 260px; border-radius: 50%; background: repeating-linear-gradient(135deg, rgba(155,217,90,.45) 0 3px, transparent 3px 12px); mask-image: radial-gradient(closest-side, #000 50%, transparent 100%); -webkit-mask-image: radial-gradient(closest-side, #000 50%, transparent 100%); }
  .pc-deco.tr { right: -40px; top: -60px; } .pc-deco.tl { left: -40px; top: -40px; } .pc-deco.br { right: -30px; bottom: -40px; } .pc-deco.bl { left: -40px; bottom: -60px; }
  .pc-art { position: absolute; pointer-events: none; z-index: 0; width: 240px; height: auto; opacity: .75; animation: pc-float 7s ease-in-out infinite; }
  .pc-art img { width: 100%; height: auto; display: block; }
  .pc-art:not(.lime) img { filter: grayscale(1) brightness(1.25); opacity: .8; }
  .pc-art.r { right: 8px; } .pc-art.l { left: 8px; } .pc-art.t { top: 24px; } .pc-art.b { bottom: 24px; }
  .pc-art.tall { width: clamp(240px, 22vw, 340px); opacity: .9; z-index: 0; }
  .pc-art.tall.t { top: -150px; }
  .pc-art.d1 { animation-delay: -2s; } .pc-art.d2 { animation-delay: -4s; }
  @keyframes pc-float { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-10px) rotate(-1deg); } }
  .pc-sec > *:not(.pc-deco):not(.pc-art) { position: relative; z-index: 1; }

  /* ---------- ヒーロー：下辺をカーブ ---------- */
  section:has(> video) { border-radius: 0 0 50% 50% / 0 0 72px 72px; }
  section:has(> video) > video { border-radius: inherit; }

  /* ---------- カード：少し傾け、写真はブロブ風 ---------- */
  .card { border-radius: 30px !important; box-shadow: 0 10px 30px rgba(17,17,17,.05); }
  .card:not([style*="background"]) { background: #FFFFFF; }
  .pc-band h2 { font-size: 34px !important; }
  .card > img:first-child { border-radius: 30px 30px 0 0 !important; }
  img[style*="aspect-ratio: 4 / 3"][style*="border-radius: 28px"] { border-radius: 58% 42% 50% 50% / 45% 55% 45% 55% !important; }

  /* ---------- ボタン：点線インナー＋影 ---------- */
  .pill { position: relative; box-shadow: 0 8px 22px rgba(17,17,17,.14); }
  .pill::after { content: ""; position: absolute; inset: 5px; border: 1.5px dashed currentColor; border-radius: 999px; opacity: .45; pointer-events: none; }
  .pill:hover { box-shadow: 0 12px 28px rgba(17,17,17,.18); }

  /* ---------- 右端の固定ボタン・トップへ ---------- */
  .pc-side { position: fixed; right: 0; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 8px; z-index: 25; }
  .pc-side a { width: 68px; height: 72px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-decoration: none; border-radius: 16px 0 0 16px; box-shadow: -4px 6px 18px rgba(17,17,17,.14); transition: transform .3s, width .3s; }
  .pc-side a:hover { transform: translateX(-4px); }
  .pc-side a svg { width: 22px; height: 22px; }
  .pc-side a span { font-family: 'Zen Kaku Gothic New', sans-serif; font-weight: 900; font-size: 13px; line-height: 1; }
  .pc-side .tel { background: var(--ink); color: #FFFFFF; }
  .pc-side .mail { background: var(--lime); color: var(--ink); }
  .pc-top { position: fixed; right: 28px; bottom: 28px; width: 56px; height: 56px; border-radius: 50%; background: var(--lime); color: var(--ink); border: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 22px rgba(17,17,17,.18); z-index: 25; opacity: 0; transform: translateY(16px); transition: opacity .35s, transform .35s; }
  .pc-top::after { content: ""; position: absolute; inset: 5px; border: 1.5px dashed rgba(17,17,17,.45); border-radius: 50%; }
  .pc-top svg { width: 20px; height: 20px; }
  .pc-scrolled .pc-top { opacity: 1; transform: none; }

  /* ---------- フッター：ドット背景＋ピル型リンク ---------- */
  footer { position: relative; background: transparent; border-top: 0 !important; }
  footer > div { position: relative; }
  footer nav { flex-direction: row !important; flex-wrap: wrap; gap: 10px !important; flex: 1 1 320px !important; align-content: flex-start; justify-content: flex-end; }
  footer nav a { background: #FFFFFF; border: 1px solid #E3E7EB; border-radius: 999px; padding: 10px 22px !important; box-shadow: 0 4px 14px rgba(17,17,17,.06); font-size: 14px !important; transition: transform .25s, border-color .25s; }
  footer nav a::after { content: "›"; margin-left: 10px; color: var(--lime-d); }
  footer nav a:hover { transform: translateY(-2px); border-color: var(--lime); }

  /* ---------- 前セクションがゆっくり透ける（CSSスクロール駆動：JS不使用で滑らか） ---------- */
  @supports (animation-timeline: view()) {
    section { animation: pc-exit linear both; animation-timeline: view(); animation-range: exit 60% exit 100%; }
    @keyframes pc-exit { to { opacity: .2; } }
  }
  @media (prefers-reduced-motion: reduce) { section { animation: none !important; } .pc-art { animation: none; } }

  /* ---------- ヒーロー：画面幅に合わせて文字・余白を縮小（16:9内に収める／溢れたら高さを伸ばす） ---------- */
  section:has(> video) > div[style*="padding: 128px"] { padding-top: clamp(28px, 5vw, 72px) !important; padding-bottom: clamp(36px, 5.6vw, 80px) !important; padding-left: clamp(24px, 4vw, 32px) !important; padding-right: clamp(24px, 4vw, 32px) !important; }
  section:has(> video) .hud { max-width: min(800px, 66vw) !important; }
  section:has(> video) .tick { font-size: clamp(10px, .95vw, 12px) !important; margin-bottom: clamp(8px, 1.4vw, 18px) !important; letter-spacing: .22em; }
  section:has(> video) h1 { font-size: clamp(30px, 5vw, 64px) !important; line-height: 1.22 !important; }
  section:has(> video) h1 + .hero-brush { margin: clamp(10px, 2vw, 26px) 0 clamp(8px, 1.6vw, 22px) !important; width: clamp(220px, 34vw, 460px) !important; }
  section:has(> video) h1 + .hero-brush + p { font-size: clamp(13px, 1.35vw, 18px) !important; line-height: 1.85 !important; }
  section:has(> video) p + div.rise.d3 { margin-top: clamp(16px, 3vw, 40px) !important; gap: clamp(8px, 1.1vw, 14px) !important; }
  section:has(> video) p + div.rise.d3 a.pill { font-size: clamp(13px, 1.3vw, 17px) !important; padding: clamp(11px, 1.5vw, 20px) clamp(18px, 3vw, 40px) !important; }
  section:has(> video) .rise.d3:last-of-type { margin-top: clamp(14px, 2.8vw, 36px) !important; gap: 6px clamp(18px, 2.8vw, 36px) !important; }
  section:has(> video) .rise.d3:last-of-type p:not(.tick) { font-size: clamp(15px, 1.7vw, 22px) !important; }
  section:has(> video) .rise.d3:last-of-type .tick { font-size: clamp(9px, .85vw, 11px) !important; margin-bottom: 2px !important; }
  section:has(> video) .hud::before, section:has(> video) .hud::after { width: clamp(16px, 2.2vw, 28px); height: clamp(16px, 2.2vw, 28px); }
  /* はみ出し防止 */
  section.pc-sec, section.pc-band { overflow-x: clip; }

}

@media (min-width: 641px) and (max-width: 1180px) { header nav a[href^="tel:"] { display: none !important; } }
@media (min-width: 641px) and (max-width: 900px) { header img[alt*="Japan demolition"] { display: none !important; } header nav a.navlink .en { font-size: 14px; } header nav a.pill { padding: 10px 16px !important; } }
/* ヒーロー：ポスター画像（動画はPCのみ読み込み） */
@media (min-width: 641px) {
  .hero-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .62; filter: saturate(.8) contrast(1.1); }
  section:has(> video) > video { opacity: 0 !important; transition: opacity 1.2s ease; }
  section:has(> video) > video.on { opacity: .62 !important; }
}

/* カード右上のアイコン（PC） */
@media (min-width: 641px) {
  .sp-has-ico { position: relative; }
  .sp-ico { position: absolute; top: 22px; right: 22px; width: 42px; height: 42px; border-radius: 50%; background: #EEF7E4; color: #257A12; display: flex; align-items: center; justify-content: center; z-index: 1; }
  .sp-ico svg { width: 22px; height: 22px; }
  .sp-has-ico > p:first-of-type, .sp-has-ico > div > p:first-of-type { padding-right: 52px; }
  [data-sp="reason"] > .sp-has-ico > p:first-of-type { padding-right: 0; }
}

/* ロングアーム解体機：アームがゆっくり上下（支点＝ブームの付け根） */
@media (min-width: 641px) {
  .pc-art .hr { position: relative; }
  .pc-art .hr img { width: 100%; height: auto; display: block; }
  .pc-art .hr .hr-arm { position: absolute; inset: 0; transform-origin: 66.97% 84.67%; animation: hr-swing 9s ease-in-out infinite; }
  @keyframes hr-swing { 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) { .pc-art .hr .hr-arm { animation: none; } }

/* ヒーローの数字：補足を数字の下に置いて4項目を1列に収める */
@media (min-width: 641px) {
  section:has(> video) .rise.d3:last-of-type { flex-wrap: nowrap !important; }
  section:has(> video) .rise.d3:last-of-type p:not(.tick) span { display: block; margin-top: 4px; font-size: clamp(11px, .9vw, 13px) !important; }
}