/* ═══════════════════════════════════════════════════════════════════════════
   このファイルが使う変数を、ここで自分で持つ（2026-08-26）
   🚩 cta.css は全19ページで共有するが、top.css と site.css は変数の定義が
      揃っていない。実測：--violet-d と --e は site.css にしかなく、
      top.css を読むページ（トップ・お知らせ・サイトマップ・理念）では
      選択時の色が透明になり、動きも効いていなかった。
      共有ファイルが読み込み元に依存するのが設計の誤りだったので、
      不足分をここで定義して自立させる。値は site.css と同じ。
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --violet-d:#3E3184;
  --violet-l:#6D5FC4;
}
/* 🚩 --e:var(--e, …) は自己参照で無効になる（CSSは自分を参照できない）。
   site.css と同じ値をそのまま書く。値が同じなので上書きしても影響しない。 */
:root{ --e:cubic-bezier(.16,1,.3,1); }

/* ═══════════════════════════════════════════════════════════════════════════
   画面のCTAパネル ＋ ドックとの合流演出（2026-08-26 髙橋さん指示）
   ─────────────────────────────────────────────────────────────────────────
   ・画面のCTAを、右下のドックと同じ見た目（濃紺の面・オーロラ・受付中ランプ・
     紫のボタン・条件の行・AIに聞いてみる）にする
   ・CONTACTまでスクロールしたら、ドックがこのパネルへ吸い込まれて消える

   🚩 全19ページで共有する1ファイルにしている。
      top.css と site.css の両方に書くと必ず食い違う（このセッションで学習済み）。
   🚩 パネルは常時見えるページ内容なので、表示を transition に依存させていない。
      消えるのはドック側だけ＝止まっても「出たまま」で済み、事故にならない。
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── パネル本体 ───────────────────────────────────────────── */
/* 案1（2026-08-26 髙橋さん選択）：右半分をまるごと押せる面にする。
   小さいボタンをやめ、面が役割を持つ形にした。枠線は不要（面の境界が線になる）。 */
.ctap{
  position:relative;overflow:hidden;isolation:isolate;
  background:var(--deep);color:var(--paper);
  padding:0;margin-top:0;
}
.ctap .in{
  position:relative;z-index:3;
  /* 🚩 ここに padding を置くと、右の「押せる面」が枠まで届かず内側に浮く（実測）。
     余白は列ごと（.say / .hit）に持たせる。 */
  padding:0;
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  align-items:stretch;
}

/* ── オーロラ（ドックと同じ動き・同じ周期）───────────────── */
.ctap .aur{position:absolute;inset:-45%;z-index:1;pointer-events:none;filter:blur(26px)}
.ctap .aur span{position:absolute;display:block;border-radius:50%;will-change:transform}
.ctap .aur span:nth-child(1){width:60%;height:70%;left:-10%;top:6%;
  background:radial-gradient(circle,rgba(85,70,168,.92),transparent 68%);
  animation:ctap-a1 2.17s ease-in-out infinite}
.ctap .aur span:nth-child(2){width:52%;height:62%;right:-12%;top:26%;
  background:radial-gradient(circle,rgba(109,95,196,.62),transparent 68%);
  animation:ctap-a2 2.83s ease-in-out infinite}
.ctap .aur span:nth-child(3){width:46%;height:56%;left:22%;bottom:-16%;
  background:radial-gradient(circle,rgba(183,185,220,.30),transparent 68%);
  animation:ctap-a3 2.50s ease-in-out infinite}
@keyframes ctap-a1{0%,100%{transform:translate3d(-6%,-4%,0) scale(.92)}
  50%{transform:translate3d(30%,20%,0) scale(1.28)}}
@keyframes ctap-a2{0%,100%{transform:translate3d(6%,8%,0) scale(1.24)}
  50%{transform:translate3d(-26%,-20%,0) scale(.9)}}
@keyframes ctap-a3{0%,100%{transform:translate3d(-4%,6%,0) scale(.94)}
  50%{transform:translate3d(22%,-24%,0) scale(1.3)}}
/* オーロラの上でも本文が読めるように敷く暗幕（ドックと同じ .50） */
.ctap .veil{position:absolute;inset:0;z-index:2;background:rgba(15,22,38,.50);pointer-events:none}

/* ── 左：受付中ランプ・見出し・条件 ─────────────────────── */
.ctap .st{
  display:flex;align-items:center;gap:.55em;margin:0;
  font-family:var(--grot);font-size:.6rem;font-weight:700;letter-spacing:.18em;color:#B0A8E8;
}
.ctap .st i{width:5px;height:5px;background:currentColor;display:block;
  animation:ctap-lamp 2.4s ease-in-out infinite}
@keyframes ctap-lamp{0%,100%{opacity:.28}50%{opacity:1}}

.ctap .t{
  font-family:var(--min);font-weight:400;
  font-size:clamp(1.2rem,2.9vw,2.05rem);line-height:1.6;letter-spacing:-.01em;
  margin:clamp(14px,1.6vw,22px) 0 0;max-width:15em;color:var(--paper);
}
.ctap .t::after{content:none}          /* 見出しの差し色の罫はここでは出さない */
.ctap .sub{margin:.75em 0 0;font-size:.86rem;line-height:1.9;max-width:28em;color:var(--peri)}

.ctap .fx b{font-weight:400}
.ctap .fx s{text-decoration:none;color:rgba(183,185,220,.4)}
.ctap .fx a{color:var(--paper);text-decoration:underline;text-underline-offset:.2em}
.ctap .fx a:hover{color:#B0A8E8}


/* ── 合流演出：ドックがパネルへ吸い込まれる ─────────────────
   移動量は cta.js が実測して --dx / --dy に入れる。
   🚩 動かすのは transform と opacity だけ。最後に hidden で確実に消す。
      消える方向の指定なので、クロックが止まっても「出たまま」で済む。 */
.dock.merge{
  animation:none !important;                 /* dock-in の fill:both を打ち消す */
  transform:translate(var(--dx,0px),var(--dy,0px)) scale(.34);
  opacity:0;pointer-events:none;
  transition:transform .62s cubic-bezier(.64,0,.22,1), opacity .5s ease .1s;
}
/* 受け側：吸い込まれた瞬間に縁が一度光る（届いたことを示す） */
.ctap.caught{animation:ctap-caught .72s ease-out}
@keyframes ctap-caught{
  0%{border-color:rgba(183,185,220,.3)}
  22%{border-color:#B0A8E8}
  100%{border-color:rgba(183,185,220,.3)}
}

@media (prefers-reduced-motion:reduce){
  .ctap .aur span,.ctap .st i{animation:none}
  .ctap.caught{animation:none}
  .dock.merge{transition:none}
}


/* ═══════════════════════════════════════════════════════════════════════════
   ASK AI（2026-08-26 髙橋さん指定）
   文言はこの3行で固定：
     INTEPRALをもっと知る
     普段使っているAIに、INTEPRALがあなたに合うか聞いてみましょう。
     ボタンを押すだけで簡単に質問できます。
   新しい見た目を足さず、サイトの言語（罫線と余白）だけで組む。
   面を塗らないので「地は1色」を崩さない。
   ═══════════════════════════════════════════════════════════════════════════ */
/* 🚩 CTAパネルの節の下余白と askai の上余白が二重に効き、
   1440pxで約200pxの空きが出ていた（実測）。上を詰めて罫線で仕切る。 */
.askai{
  margin-top:calc(-1 * clamp(20px,2.6vw,44px));
  padding:clamp(34px,4.2vw,64px) 0 clamp(34px,4.4vw,68px);
  border-top:1px solid var(--line-2);text-align:center;
}
.askai .k{font-family:var(--grot);font-size:.6rem;letter-spacing:.28em;color:var(--principle)}
.askai h2{
  margin-top:1.1em;font-size:clamp(1.24rem,2.9vw,1.94rem);font-weight:700;
  line-height:1.55;letter-spacing:.005em;max-width:none;
}
.askai h2::after{content:none}          /* 差し色の罫はここでは出さない */
.askai .ld{
  margin-top:1.1em;font-size:.88rem;line-height:2.05;color:var(--ink-2);
  max-width:40em;margin-inline:auto;
}
.askai .btns{
  margin-top:clamp(24px,3vw,40px);
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px;
}
.askai .btns a{
  display:inline-flex;align-items:center;gap:.6em;height:48px;padding:0 1.4em;
  border:1px solid var(--line);color:var(--ink);
  font-size:.88rem;font-weight:600;
  transition:border-color .2s var(--e),color .2s var(--e),background .2s var(--e);
}
.askai .btns a svg{
  width:15px;height:15px;flex:0 0 auto;fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;color:var(--ink-3);
  transition:color .2s var(--e);
}
/* 選択＝コーポレートカラー（サイト共通のルール） */
.askai .btns a:hover,.askai .btns a:focus-visible{
  border-color:var(--principle);background:var(--principle);color:var(--paper);
  text-decoration:none;
}
.askai .btns a:hover svg,.askai .btns a:focus-visible svg{color:rgba(246,245,240,.9)}
@media (max-width:520px){
  .askai .btns{flex-direction:column}
  .askai .btns a{justify-content:center}
}


/* ── 左：言葉 ─────────────────────────────────────────── */
.ctap .say{padding:clamp(26px,3.4vw,48px)}
.ctap .say .t{margin-top:clamp(14px,1.6vw,22px)}

/* ── 右：面ごと押せる ───────────────────────────────────
   🚩 この面の中に <a> を入れ子にできない（HTMLで不正になる）。
      メールは条件の行のテキストとして置く。個別に押させたい場合は
      パネルの外（フッター）に導線がある。 */
.ctap .hit{
  position:relative;z-index:4;
  display:flex;flex-direction:column;justify-content:center;gap:1em;
  padding:clamp(26px,3.4vw,48px);
  background:var(--principle);color:var(--paper);text-decoration:none;
  transition:background .24s var(--e);
}
/* 🚩 :hover で background だけ書くと site.css の a:hover 系に負け、
   面の色が透明になった（実測 rgba(0,0,0,0)）。a.hit で詳細度を上げる。 */
.ctap a.hit:hover,.ctap a.hit:focus-visible{
  background:var(--violet-d);color:var(--paper);text-decoration:none;
}
.ctap .hit .lb{
  display:flex;align-items:center;gap:.8em;
  font-size:clamp(1.08rem,2.2vw,1.5rem);font-weight:700;letter-spacing:.01em;
}
.ctap .hit .lb svg{
  width:22px;height:22px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .24s var(--e);
}
.ctap .hit:hover .lb svg,.ctap .hit:focus-visible .lb svg{transform:translateX(6px)}
/* 紫の面の上なので、条件の行は紙色の .82（.72では小さい字がAAを割る） */
.ctap .hit .fx{
  margin:0;color:rgba(246,245,240,.82);
  display:flex;flex-wrap:wrap;gap:.55em;
  font-family:var(--grot);font-size:.68rem;letter-spacing:.05em;
}
.ctap .hit .fx s{color:rgba(246,245,240,.45)}
.ctap .hit .fx b{font-weight:400}

@media (max-width:880px){
  .ctap .in{grid-template-columns:minmax(0,1fr)}
}

/* 英語版では日本語のCTAドックを出さない。
   英語ページに日本語の相談パネルが覆いかぶさると、読み手が置き去りになる。
   ヘッダーとフッターは日本語のまま残す（この先が日本語であることの合図）。 */
.en-page .dock{display:none}

/* ── AIサービスの正式ロゴ（2026-08-31 髙橋さん指示）─────────────
   既存の .askai svg は線画（stroke）前提。ロゴは塗りなので打ち消す。
   Googleだけは4色をSVG側で持っているので currentColor を当てない。 */
.askai .btns a svg.lg{
  width:16px;height:16px;stroke:none;fill:currentColor;
}
.askai .btns a svg.lg-openai{color:#000}
.askai .btns a svg.lg-claude{color:#D97757}
.askai .btns a svg.lg-pplx{color:#20808D}
.askai .btns a svg.lg-google path{fill:inherit}
/* ホバー時は面が濃紫になるので、ロゴを紙色に寄せる（Googleは4色のまま） */
.askai .btns a:hover svg.lg-openai,.askai .btns a:focus-visible svg.lg-openai,
.askai .btns a:hover svg.lg-claude,.askai .btns a:focus-visible svg.lg-claude,
.askai .btns a:hover svg.lg-pplx,.askai .btns a:focus-visible svg.lg-pplx{color:var(--paper)}