/* =========================================================
   エムサイト工房 LP v2 — ブルー・リブランド版
   新ブランドカラーを :root に定義し、全体をこの変数で配色。
   主役=ブルー / 差し色=sun(黄)
   ========================================================= */
:root{
  --brand:#2A93E0;        /* 主役ブルー */
  --brand-deep:#155C9E;   /* 濃ブルー */
  --navy:#122E4A;         /* ネイビー */
  --sky:#E9F4FD;          /* 空色（薄） */
  --paper:#F8FBFE;        /* 用紙 */
  --sun:#FFC24B;          /* 差し色（黄） */
  --coral:#FF8A6B;        /* アクセント（珊瑚） */
  --ink:#16314E;          /* 本文インク */
  /* 補助トーン（ブルーの濃淡） */
  --sky-2:#BFE0F7;
  --sky-soft:#F2F8FE;
  --line:#E4EFF9;
  --line-2:#DCEAF7;
  --text:#3A5572;
  --muted:#5B708A;
  --dots:#9CCBF0;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  font-family:'Noto Sans JP',sans-serif;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:var(--sun);color:var(--navy)}
img{max-width:100%}
a{color:inherit}

/* Lenis */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}

/* =========================================================
   キーフレーム（Design 由来の微アニメ）
   ========================================================= */
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-13px)}}
@keyframes floatY2{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-9px) rotate(4deg)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes wag{0%,100%{transform:rotate(-14deg)}50%{transform:rotate(20deg)}}
@keyframes blink{0%,93%,100%{transform:scaleY(1)}96.5%{transform:scaleY(.08)}}
@keyframes wave{0%,100%{transform:rotate(14deg)}50%{transform:rotate(-26deg)}}
@keyframes sparkle{0%,100%{opacity:.25;transform:scale(.7) rotate(0)}50%{opacity:1;transform:scale(1.15) rotate(25deg)}}

/* =========================================================
   reveal 初期状態（JSが有効なときだけ隠す → FOUC防止）
   ========================================================= */
.js [data-reveal]{opacity:0;will-change:transform,opacity}

/* =========================================================
   ホバー / インタラクション
   ========================================================= */
.work-card{transition:transform .45s cubic-bezier(.34,1.4,.5,1),box-shadow .45s;transform:rotate(0)}
.work-card:hover{transform:translateY(-14px) rotate(-1deg);box-shadow:0 30px 60px -18px rgba(18,46,74,.32)}
.work-card:hover .work-go{opacity:1;transform:translateY(0)}
.cta-btn{transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
.cta-btn:hover{transform:translateY(-4px) scale(1.03)}
.cta-ghost{transition:all .25s}
.cta-ghost:hover{background:#fff;border-color:var(--brand);color:var(--brand-deep)}
.nav-link{transition:color .25s}
.nav-link:hover{color:var(--brand)}
.nav-link:hover .nav-underline{width:100%}
.plan-card{transition:opacity .6s,transform .45s cubic-bezier(.34,1.4,.5,1),box-shadow .45s}
.plan-card:hover{transform:translateY(-8px);box-shadow:0 24px 48px -20px rgba(18,46,74,.28)}
.faq-q{transition:background .2s}
.faq-q:hover{background:var(--sky-soft)}
/* コウボウくんがホバーで反応（しっぽを速く振る） */
.hero-scene:hover .dog-tail{animation-duration:.5s!important}

/* FAQ アコーディオン */
.faq-a{overflow:hidden;max-height:0;opacity:0;transition:max-height .4s ease,opacity .35s ease,padding .4s ease;padding-top:0;padding-bottom:0}
.faq-item.open .faq-a{opacity:1}
.faq-chevron{transition:transform .3s}
.faq-item.open .faq-chevron{transform:rotate(180deg)}

/* 横スクロール制作例トラック */
.works-track::-webkit-scrollbar{height:8px}
.works-track::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:99px}

/* 強み SVG ライン描画 */
.draw-line{stroke-dasharray:1;stroke-dashoffset:1}

/* イントロ */
#intro{position:fixed;inset:0;z-index:9000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;cursor:pointer;
  background:radial-gradient(120% 120% at 50% 30%,var(--sky) 0%,#BFE0F7 55%,var(--brand) 130%)}
#intro.hide{pointer-events:none}
/* 空色ワイプ */
#wipe{position:fixed;inset:0;z-index:8900;background:linear-gradient(180deg,var(--sky),#BFE0F7);transform:translateY(0);pointer-events:none}

/* =========================================================
   レスポンシブ
   ========================================================= */
@media (max-width:880px){
  .hero-grid{grid-template-columns:1fr!important;text-align:center}
  .hero-copy{align-items:center!important}
  .hero-cta{justify-content:center!important}
  .nav-links{display:none!important}
  .two-col{grid-template-columns:1fr!important}
  .three-col{grid-template-columns:1fr!important}
  .h1{font-size:38px!important}
  .conv{margin-left:auto;margin-right:auto}
  .works-track{padding-left:24px!important;padding-right:24px!important}
}

/* =========================================================
   prefers-reduced-motion
   重い装飾(粒子/動画/イントロの大きな動き)だけ簡素化。
   基本の reveal / 会話表示は殺さない（即表示）。
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  /* 重い装飾だけ停止: インラインCSSキーフレーム(無限フロート/きらめき/キャラ微動)を無効化。
     GSAP駆動の reveal/会話/スクロール演出はインラインtransformで動くので生かす。 */
  [style*="animation"]{animation:none!important}
  html{scroll-behavior:auto!important}
  /* イントロの大演出は出さない（JSでも即スキップ済み） */
  #intro,#wipe{display:none!important}
}