/* motion.css — 動きと訴求の追加層（2026-09-23 Claude）
   方針：動きはすべて「最終状態が素のスタイル」。アニメが止まっても・JSが無くても中身は見える。
   動きを減らす設定の人には動かさない（中身は表示） */

/* ===== 流れる帯（BEYOND DEMOLITION.） ===== */
.impact-marquee{display:block;overflow:hidden;padding:30px 0}
.marquee-track{display:flex;width:max-content}
.marquee-set{display:flex;align-items:center;flex-shrink:0}
.marquee-set>span{font:900 clamp(34px,4.6vw,68px)/1 Arial,sans-serif;letter-spacing:-.03em;color:transparent;-webkit-text-stroke:1px #ffffff8c;padding:0 .45em;white-space:nowrap}
.marquee-set>span:nth-of-type(2n){color:#f57b26;-webkit-text-stroke:0}
.marquee-set>i{font-style:normal;font-size:14px;font-weight:800;letter-spacing:.14em;color:#ff9b43;white-space:nowrap;padding:0 .9em}
.marquee-set>i::before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;background:#f57b26;margin-right:1.1em;vertical-align:middle}
@media (max-width:600px){.impact-marquee{padding:20px 0}.marquee-set>i{font-size:12px}}

/* ===== 途中の相談帯：電話番号を並べて訴求 ===== */
.j-consult-actions{display:flex;flex-wrap:wrap;align-items:center;gap:18px 30px;margin-top:22px}
.j-consult-actions .j-button{margin-top:0}
.j-consult-tel{display:flex;flex-direction:column;font:800 30px/1.2 Arial,sans-serif;letter-spacing:-.02em;color:#152a43}
.j-consult-tel small{font:700 11px/1.6 var(--sans);letter-spacing:.06em;color:#c65b12;margin-bottom:4px}
@media (max-width:600px){.j-consult-tel{font-size:26px}}

/* ===== フッター：サイトマップ3列＋会社情報 ===== */
.footer-sitemap{grid-template-columns:repeat(3,1fr);gap:28px}
.footer-sitemap>div>span{font-size:11px;font-weight:800;color:#152a43;letter-spacing:.06em;padding-bottom:9px;border-bottom:2px solid #f57b26;margin-bottom:6px}
.footer-sitemap a{font-size:13px;color:#314255;position:relative;padding-left:14px}
.footer-sitemap a::before{content:"";position:absolute;left:0;top:.95em;width:6px;height:1px;background:#f57b26}
.footer-sitemap a.is-planned{cursor:default}
.footer-sitemap a.is-planned:hover{text-decoration:none}
.closing-footer-main{grid-template-columns:.85fr 1.6fr;padding-bottom:36px;border-bottom:1px solid #d9e0e8}
.footer-nap{font-style:normal;font-size:12px;line-height:1.9;color:#4a5869;margin-top:18px}
.footer-tel{display:inline-flex;flex-direction:column;margin-top:14px;font:800 26px/1.2 Arial,sans-serif;color:#152a43}
.footer-tel small{font:700 11px/1.6 var(--sans);color:#c65b12;letter-spacing:.06em;margin-bottom:3px}
@media (max-width:1000px){.closing-footer-main{grid-template-columns:1fr}}
@media (max-width:600px){.footer-sitemap{grid-template-columns:1fr;gap:26px}.footer-sitemap a{font-size:13px}}

/* ===== ここから動き ===== */
.scroll-progress{position:fixed;left:0;top:0;height:3px;width:100%;background:linear-gradient(90deg,#f57b26,#ffb178);transform-origin:0 50%;transform:scaleX(0);z-index:200;pointer-events:none}

@media (prefers-reduced-motion:no-preference){
  /* 流れる帯 */
  .marquee-track{animation:marquee 38s linear infinite}
  .impact-marquee:hover .marquee-track{animation-play-state:paused}
  @keyframes marquee{to{transform:translateX(-50%)}}

  /* ヒーロー：読み込み時に順に立ち上がる */
  .impact-hero-copy>*{animation:heroUp 1s cubic-bezier(.16,.84,.24,1) both}
  .impact-hero-copy>*:nth-child(2){animation-delay:.12s}
  .impact-hero-copy>*:nth-child(3){animation-delay:.28s}
  .impact-hero-copy>*:nth-child(4){animation-delay:.38s}
  .impact-hero-copy>*:nth-child(5){animation-delay:.5s}
  .impact-hero-copy>*:nth-child(6){animation-delay:.62s}
  .impact-hero-copy h1 em{background:linear-gradient(transparent 78%,#f57b2640 78%) no-repeat 0 0/100% 100%;animation:markIn 1s .9s cubic-bezier(.6,0,.2,1) both}
  .impact-hero-visual{overflow:hidden}
  .impact-hero-visual>img{animation:heroZoom 2.6s cubic-bezier(.2,.7,.2,1) both}
  .hero-image-copy strong{display:inline-block;animation:wipeIn 1.1s .55s cubic-bezier(.7,0,.2,1) both}
  .hero-image-copy>span{animation:heroUp .9s .45s cubic-bezier(.16,.84,.24,1) both}
  .hero-free-badge{animation:badgePop .8s 1.1s cubic-bezier(.3,1.5,.5,1) both}
  .hero-free-badge::after{content:"";position:absolute;inset:-9px;border-radius:50%;border:2px solid #f57b26;opacity:0;animation:ring 2.8s 2s ease-out infinite;pointer-events:none}
  .proof-ribbon>div,.proof-ribbon>a{animation:heroUp .9s cubic-bezier(.16,.84,.24,1) both}
  .proof-ribbon>div:nth-child(1){animation-delay:.7s}.proof-ribbon>div:nth-child(2){animation-delay:.82s}.proof-ribbon>div:nth-child(3){animation-delay:.94s}.proof-ribbon>a{animation-delay:1.06s}
  @keyframes heroUp{from{opacity:0;transform:translateY(34px)}}
  @keyframes heroZoom{from{scale:1.14}}
  @keyframes wipeIn{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
  @keyframes markIn{from{background-size:0 100%}}
  @keyframes badgePop{from{opacity:0;transform:scale(.4) rotate(-40deg)}}
  @keyframes ring{0%{opacity:.7;transform:scale(.92)}70%,100%{opacity:0;transform:scale(1.22)}}

  /* スクロールで現れる：浮き上がり＋ぼかし解除、並びは順番に */
  .js-motion .reveal{opacity:0;transform:translateY(46px);filter:blur(6px);transition:opacity .9s cubic-bezier(.16,.84,.24,1),transform 1.1s cubic-bezier(.16,.84,.24,1),filter .9s ease;transition-delay:calc(var(--i,0) * 120ms)}
  .js-motion .reveal.is-visible{opacity:1;transform:none;filter:none}
  .js-motion .reveal.is-done{transition:transform .4s ease,box-shadow .4s ease;filter:none}

  /* 見出しのオレンジ語に下線マーカーが走る */
  .js-motion .reveal h2 em{background:linear-gradient(transparent 76%,#f57b2640 76%) no-repeat 0 0/0 100%;transition:background-size 1.1s .55s cubic-bezier(.6,0,.2,1)}
  .js-motion .reveal.is-visible h2 em{background-size:100% 100%}

  /* カードの写真は少し寄った状態から引く */
  .decision-card{overflow:hidden}
  .js-motion .decision-card .decision-image,.js-motion .article-card img,.js-motion .j-estimate-visual img,.js-motion .service-photo img{scale:1.12;transition:scale 1.6s cubic-bezier(.16,.84,.24,1)}
  .js-motion .is-visible .decision-image,.js-motion .decision-card.is-visible .decision-image,.js-motion .article-card.is-visible img,.js-motion .is-visible .j-estimate-visual img,.js-motion .j-estimate-visual.is-visible img,.js-motion .service-photo.is-visible img{scale:1}
  .j-estimate-visual,.service-photo,.article-image{overflow:hidden}

  /* 実績：着工前 → 引き渡し後 が左からめくれて現れる */
  .js-motion .work-feature .work-comparison figure:last-child img{clip-path:inset(0 0 0 100%);transition:clip-path 1.5s .5s cubic-bezier(.7,0,.2,1)}
  .js-motion .work-feature.is-visible .work-comparison figure:last-child img{clip-path:inset(0 0 0 0)}
  .js-motion .work-feature .work-comparison figure:last-child figcaption{opacity:0;transform:translateY(-8px);transition:opacity .5s 1.7s,transform .5s 1.7s}
  .js-motion .work-feature.is-visible .work-comparison figure:last-child figcaption{opacity:1;transform:none}
  .work-comparison figure:hover img{transform:scale(1.04)}

  /* ホバー：カードが浮く・写真が寄る・矢印が進む */
  .decision-card:hover .decision-image,.article-card:hover img{scale:1.06}
  .decision-card:hover,.article-card:hover{box-shadow:0 22px 44px #0d20301f}
  .decision-link b,.article-read b,.text-link span,.j-link span,.button span,.j-button span,.closing-methods b{display:inline-block;transition:transform .35s cubic-bezier(.3,1.5,.5,1)}
  a:hover .decision-link b,a:hover .article-read b,.text-link:hover span,.j-link:hover span,.button:hover span,.j-button:hover span,.closing-methods a:hover b{transform:translate(4px,-4px)}

  /* オレンジのボタンに光が走る（ヒーローのボタンはときどき自動で） */
  .impact-primary,.header-contact,.mobile-contact a:last-child{position:relative;overflow:hidden;isolation:isolate}
  .impact-primary::after,.header-contact::after,.mobile-contact a:last-child::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,#ffffff8c 50%,transparent 70%);transform:translateX(-120%);z-index:-1;pointer-events:none}
  .impact-primary:hover::after,.header-contact:hover::after{transition:transform .8s ease;transform:translateX(120%)}
  .impact-primary::after,.mobile-contact a:last-child::after{animation:shine 4.5s 2.4s ease-in-out infinite}
  @keyframes shine{0%,62%{transform:translateX(-120%)}82%,100%{transform:translateX(120%)}}

  /* 問い合わせの3導線：浮く */
  .closing-methods a{transition:transform .4s cubic-bezier(.16,.84,.24,1),box-shadow .4s}
  .closing-methods a:hover{transform:translateY(-6px);box-shadow:0 20px 40px #0000003a}

  /* FAQ：なめらかに開閉（対応ブラウザのみ） */
  html{interpolate-size:allow-keywords}
  .faq-list details::details-content{block-size:0;overflow:hidden;transition:block-size .45s cubic-bezier(.16,.84,.24,1),content-visibility .45s allow-discrete}
  .faq-list details[open]::details-content{block-size:auto}
}