/* ===== スクロールで動く演出（PROJECTS・FLOW & FAQ の見出し、ご相談の流れ） =====
   html.ha-on は JS が付ける（動きを減らす設定の人には付けない）。
   JS が無い・動かない場合は、何も隠さずそのまま表示する。 */

/* --- 見出し: タグの線が伸びる → 1行目がふわっと → 2行目が左から現れて、色がゆっくり流れ続ける --- */
.ha-on [data-head-anim] .pj-tag i,
.ha-on [data-head-anim] .qa-tag i,
.ha-on [data-head-anim] .ct-tag i { transform: scaleX(0); transform-origin: left; transition: transform .7s cubic-bezier(.2, .8, .2, 1); }
.ha-on [data-head-anim] .pj-tag,
.ha-on [data-head-anim] .qa-tag,
.ha-on [data-head-anim] .ct-tag { opacity: 0; transition: opacity .5s ease; }
.ha-on [data-head-anim] .ha-l1 { display: inline-block; opacity: 0; transform: translateY(18px); filter: blur(6px);
  transition: opacity .7s ease .15s, transform .7s cubic-bezier(.2, .8, .2, 1) .15s, filter .7s ease .15s; }
.ha-on [data-head-anim] .ha-l2 { display: inline-block; clip-path: inset(0 100% 0 0); transform: translateX(-10px);
  transition: clip-path .9s cubic-bezier(.65, 0, .35, 1) .45s, transform .9s cubic-bezier(.2, .8, .2, 1) .45s; }

.ha-on [data-head-anim].is-in .pj-tag i,
.ha-on [data-head-anim].is-in .qa-tag i,
.ha-on [data-head-anim].is-in .ct-tag i { transform: scaleX(1); }
.ha-on [data-head-anim].is-in .pj-tag,
.ha-on [data-head-anim].is-in .qa-tag,
.ha-on [data-head-anim].is-in .ct-tag { opacity: 1; }
.ha-on [data-head-anim].is-in .ha-l1 { opacity: 1; transform: none; filter: none; }
.ha-on [data-head-anim].is-in .ha-l2 { clip-path: inset(0 -4% 0 0); transform: none; }

/* 2行目のグラデーションが、表示後もゆっくり流れる */
.ha-on [data-head-anim] .ha-l2 { background-size: 220% 100% !important; animation: ha-flow 5s ease-in-out 1.4s infinite alternate; }
@keyframes ha-flow { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }

/* --- ご相談の流れ: 線が上から伸び、STEP が順番に現れて番号がポンと出る --- */
.ha-on .qa-steps li { opacity: 0; transform: translateX(-14px); transition: opacity .55s ease, transform .55s cubic-bezier(.2, .8, .2, 1); }
.ha-on .qa-steps li span { transform: scale(.5); transition: transform .5s cubic-bezier(.34, 1.56, .64, 1); }
.ha-on .qa-steps.is-in li { opacity: 1; transform: none; }
.ha-on .qa-steps.is-in li span { transform: none; }
.ha-on .qa-steps.is-in li:nth-child(2), .ha-on .qa-steps.is-in li:nth-child(2) span { transition-delay: .25s; }
.ha-on .qa-steps.is-in li:nth-child(3), .ha-on .qa-steps.is-in li:nth-child(3) span { transition-delay: .5s; }
.ha-on .qa-steps.is-in li:nth-child(4), .ha-on .qa-steps.is-in li:nth-child(4) span { transition-delay: .75s; }

@media (max-width: 760px) {
  .ha-on .qa-steps::before { transform: scaleY(0); transform-origin: top; transition: transform 1.2s cubic-bezier(.65, 0, .35, 1) .1s; }
  .ha-on .qa-steps.is-in::before { transform: none; }
  /* 番号の丸が現れたとき、光の輪が一度広がる */
  .ha-on .qa-steps.is-in li span { animation: ha-ring .9s ease-out 1 both; }
  .ha-on .qa-steps.is-in li:nth-child(2) span { animation-delay: .35s; }
  .ha-on .qa-steps.is-in li:nth-child(3) span { animation-delay: .6s; }
  .ha-on .qa-steps.is-in li:nth-child(4) span { animation-delay: .85s; }
  @keyframes ha-ring {
    0% { box-shadow: 0 0 0 0 rgba(139, 92, 246, .55), 0 6px 16px -8px rgba(109, 40, 217, .6); }
    100% { box-shadow: 0 0 0 14px rgba(139, 92, 246, 0), 0 6px 16px -8px rgba(109, 40, 217, .6); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .ha-on [data-head-anim] .ha-l2 { animation: none; }
}

/* 1行目を span で包んだので、2行目用のグラデーション指定（.qa-title span など）が当たらないよう元の色に戻す */
.pj-title .ha-l1, .qa-title .ha-l1, .ct-title .ha-l1 { background: none !important; color: inherit !important; -webkit-text-fill-color: currentColor !important; }

/* --- CONTACT 見出し: FLOW & FAQ と同じ形（線つきタグ＋2行目グラデーション）を暗い背景向けの色で --- */
#contact .ct-head { text-align: left; }
#contact .ct-tag { display: inline-flex; align-items: center; gap: 10px; padding: 0; border: 0; background: none; box-shadow: none;
  font: 700 12px/1 var(--font-en-display, "Space Grotesk", sans-serif); letter-spacing: .28em; color: rgba(255, 255, 255, .78); }
#contact .ct-tag i { width: 28px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #22d3ee, #a78bfa, #f472b6); }
#contact .ct-title { margin: 16px 0 14px; font-weight: 900; line-height: 1.25; }
#contact .ct-grad { background: linear-gradient(100deg, #67e8f9 0%, #c4b5fd 55%, #f9a8d4 100%); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent; text-shadow: none; }

/* PC: CONTACT の見出しと説明文を、下のフォームと同じ中央の列（最大720px）の左端にそろえる。文字は PROJECTS・FAQ と同じくらいの大きさに */
@media (min-width: 761px) {
  #contact .ct-head { max-width: 720px; margin: 0 auto 40px !important; }
  #contact .ct-title { font-size: clamp(32px, 3.4vw, 48px) !important; }
  #contact .ct-head .section-desc { max-width: none !important; margin: 0 !important; text-align: left !important; font-size: 16px !important; line-height: 1.9 !important; }
}

/* ===== ABOUT: 「50年で磨いた『技術』の中身は、3つ。」を2段にし、「3つ。」を大きなネオン数字で目立たせる ===== */
#about .about__pillars-intro { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-top: 8px; text-align: center;
  background: none !important; -webkit-text-fill-color: initial !important; color: inherit !important; }
#about .about__pillars-intro .pi-sub { font-size: clamp(16px, 1.6vw, 20px); font-weight: 800; letter-spacing: .06em; color: rgba(226, 232, 240, .92); -webkit-text-fill-color: currentColor; }
#about .about__pillars-intro .pi-sub em { font-style: normal; color: #67e8f9; -webkit-text-fill-color: currentColor; }
#about .about__pillars-intro .pi-main { display: inline-flex; align-items: baseline; gap: 4px; font-size: clamp(28px, 2.8vw, 38px); font-weight: 900; line-height: 1;
  color: #fff; -webkit-text-fill-color: #fff; }
#about .about__pillars-intro .pi-main b { font: 800 clamp(72px, 7vw, 104px)/1 var(--font-en-display, "Space Grotesk", sans-serif); letter-spacing: -.04em;
  background: linear-gradient(135deg, #22d3ee 0%, #a78bfa 50%, #f472b6 100%); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 18px rgba(167, 139, 250, .55)); }

/* 「3」のグリッチ: 約3.5秒ごとに一瞬、水色とピンクにずれて横にノイズが走る */
#about .about__pillars-intro .pi-main b { position: relative; display: inline-block; animation: pi-glitch-main 3.5s steps(1) infinite; }
#about .about__pillars-intro .pi-main b::before,
#about .about__pillars-intro .pi-main b::after {
  content: attr(data-text); position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: none; -webkit-background-clip: border-box; background-clip: border-box;
}
#about .about__pillars-intro .pi-main b::before { color: #22d3ee; -webkit-text-fill-color: #22d3ee; animation: pi-glitch-a 3.5s steps(1) infinite; }
#about .about__pillars-intro .pi-main b::after  { color: #f472b6; -webkit-text-fill-color: #f472b6; animation: pi-glitch-b 3.5s steps(1) infinite; }
@keyframes pi-glitch-main {
  0%, 84%, 100% { transform: none; }
  86% { transform: translate(-2px, 1px) skewX(-6deg); }
  88% { transform: translate(3px, -1px); }
  90% { transform: translate(-1px, 0) skewX(4deg); }
  92% { transform: none; }
}
@keyframes pi-glitch-a {
  0%, 84%, 94%, 100% { opacity: 0; transform: none; clip-path: inset(0 0 0 0); }
  85% { opacity: .9; transform: translate(-6px, 0); clip-path: inset(10% 0 62% 0); }
  87% { opacity: .9; transform: translate(5px, 0);  clip-path: inset(55% 0 20% 0); }
  89% { opacity: .9; transform: translate(-4px, 0); clip-path: inset(30% 0 45% 0); }
  91% { opacity: .9; transform: translate(3px, 0);  clip-path: inset(75% 0 5% 0); }
}
@keyframes pi-glitch-b {
  0%, 84%, 94%, 100% { opacity: 0; transform: none; clip-path: inset(0 0 0 0); }
  85% { opacity: .9; transform: translate(6px, 0);  clip-path: inset(60% 0 15% 0); }
  87% { opacity: .9; transform: translate(-5px, 0); clip-path: inset(15% 0 70% 0); }
  89% { opacity: .9; transform: translate(4px, 0);  clip-path: inset(40% 0 35% 0); }
  91% { opacity: .9; transform: translate(-3px, 0); clip-path: inset(5% 0 80% 0); }
}
@media (prefers-reduced-motion: reduce) {
  #about .about__pillars-intro .pi-main b,
  #about .about__pillars-intro .pi-main b::before,
  #about .about__pillars-intro .pi-main b::after { animation: none; }
}