@charset "UTF-8";
/* =====================================================================
   PISTA CAREER「あたたかい版 × 色とりどり版」mix.css（2026-10-04）
   index.mix.html が warm.css のあとに読み込む。あたたかい版の構成（青いオープニング・白い丸・ふきだし図・札つきニュース・
   サービス紹介01〜03・Q&A）に、色とりどり版の要素（明朝体の見出し・英字のイタリック・6色の差し色・二重の縁のカード・虹の線）を重ねる。
   ===================================================================== */
:root{
  --c-blue:#2563eb;--c-cyan:#06b6d4;--c-violet:#7c3aed;--c-magenta:#e0409a;--c-coral:#f26b4f;--c-amber:#f5a524;--c-mint:#14b8a6;--c-lime:#84cc16;
  --t-blue:#e8f0ff;--t-cyan:#e3f8fc;--t-violet:#f1eafe;--t-magenta:#fde8f3;--t-coral:#ffece7;--t-amber:#fff4de;--t-mint:#e3f7f3;--t-lime:#f1f9e2;
  --rainbow:linear-gradient(100deg,var(--c-blue) 0%,var(--c-violet) 30%,var(--c-magenta) 55%,var(--c-coral) 78%,var(--c-amber) 100%);
  --f-serif:"Shippori Mincho B1","Hiragino Mincho ProN","Yu Mincho",serif;
  --f-it:"Instrument Serif",Georgia,serif;
  --paper:#f8f7f4;--paper-2:#efeee9;
}
/* 上部の虹の線（読み進み） */
.progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:200;background:var(--rainbow);transform:scaleX(0);transform-origin:0 50%;pointer-events:none}
/* 二重の縁（色とりどり版のカードの質感） */
.bz{border:6px solid rgba(12,18,32,.045);background-clip:padding-box;box-shadow:0 0 0 1px rgba(12,18,32,.05),0 24px 48px -36px rgba(12,18,32,.22)}

/* ---------- 見出し：明朝体＋英字のイタリック、下線は虹 ---------- */
.h__en,.intro__text .h__en,.detail__en,.bubbles__label,.flow__no small{font-family:var(--f-it);font-style:italic;font-weight:400;font-size:16px;letter-spacing:.04em;text-transform:none;background:var(--rainbow);-webkit-background-clip:text;background-clip:text;color:transparent}
.h__ja{font-family:var(--f-serif);font-weight:700;font-size:clamp(24px,2.8vw,34px);letter-spacing:.12em}
.h__ja::after{width:64px;height:2px;background:var(--rainbow)}
.intro__text h2,.detail h3,.flow h3,.svc-card h3,.company__msg b,.open__phrase,.bubbles__center b,.footer__phrase{font-family:var(--f-serif);font-weight:700}
.intro__text h2 em{background:var(--rainbow);-webkit-background-clip:text;background-clip:text;color:transparent}
.intro__en{font-family:var(--f-it);font-style:italic;font-size:17px;color:var(--c-coral);letter-spacing:.02em}

/* ---------- オープニング：深い青に、4色のやわらかい光。「次の一歩」は虹 ---------- */
.open{background:radial-gradient(60% 50% at 20% 20%,rgba(124,58,237,.45),transparent 70%),radial-gradient(50% 45% at 85% 25%,rgba(224,64,154,.35),transparent 70%),radial-gradient(45% 40% at 70% 90%,rgba(245,165,36,.28),transparent 70%),radial-gradient(40% 40% at 15% 85%,rgba(20,184,166,.3),transparent 70%),radial-gradient(80% 70% at 50% 40%,#2a55ea,#0f2ba6 75%)}
/* オープニングの「次の一歩」は白文字（Tomoya指示 2026-10-04）。虹色は本文の見出しだけ */
.open__phrase .rb .ch{color:#fff}
.open__phrase{font-size:clamp(26px,5.6vw,64px);letter-spacing:.1em}
.open__dots i{background:#ffd9a3}
.open__dots i:nth-child(2n){background:#ffb3dd}
.open__dots i:nth-child(3n){background:#9fe8dc}
.open__dots i:nth-child(4n){background:#d9b8ff}
.open__dots i:nth-child(5n){background:#9fc0ff;border-radius:1px}
.open__logo{letter-spacing:.24em}
.open__line{background:linear-gradient(180deg,#fff,rgba(255,255,255,0))}

/* ---------- はじめに：白い丸の中に、4色のにじみ ---------- */
.intro__circle::before{background:radial-gradient(40% 40% at 25% 30%,var(--t-violet),transparent 70%),radial-gradient(40% 40% at 80% 25%,var(--t-magenta),transparent 70%),radial-gradient(45% 40% at 75% 85%,var(--t-amber),transparent 70%),radial-gradient(40% 40% at 20% 85%,var(--t-mint),transparent 70%),radial-gradient(circle at 50% 55%,#fff 0 40%,var(--paper-2) 100%)}
.intro__circle{box-shadow:0 0 0 1px rgba(12,18,32,.05),0 40px 80px -50px rgba(12,18,32,.35)}
.hero__tag--a b{background:var(--c-blue)}.hero__tag--b b{background:var(--c-magenta)}.hero__tag--c b{background:linear-gradient(90deg,var(--c-cyan),var(--c-violet),var(--c-magenta))}
.marks span:nth-child(1){background:var(--t-blue)}.marks span:nth-child(1) svg{stroke:var(--c-blue)}
.marks span:nth-child(2){background:var(--t-magenta)}.marks span:nth-child(2) svg{stroke:var(--c-magenta)}
.marks span:nth-child(3){background:var(--t-amber)}.marks span:nth-child(3) svg{stroke:var(--c-amber)}
.btn--fill{background:var(--c-blue);border-color:var(--c-blue)}
.btn--fill:hover{background:var(--c-violet);border-color:var(--c-violet)}

/* ---------- ふきだし：6色 ---------- */
.bubble{border-radius:40px;box-shadow:none}
.bubbles__col:first-child .bubble:nth-child(2){background:var(--c-blue);color:#fff}
.bubbles__col:first-child .bubble:nth-child(3){background:var(--t-cyan);color:var(--ink);box-shadow:0 0 0 1.5px var(--c-cyan)}
.bubbles__col:first-child .bubble:nth-child(4){background:var(--c-mint);color:#fff}
.bubbles__col:last-child .bubble:nth-child(2){background:var(--t-violet);color:var(--ink);box-shadow:0 0 0 1.5px var(--c-violet)}
.bubbles__col:last-child .bubble:nth-child(3){background:var(--c-magenta);color:#fff}
.bubbles__col:last-child .bubble:nth-child(4){background:var(--t-amber);color:var(--ink);box-shadow:0 0 0 1.5px var(--c-amber)}
.bubble small{opacity:.85}
.bubbles__center{background:conic-gradient(from 200deg,var(--c-blue),var(--c-violet),var(--c-magenta),var(--c-coral),var(--c-amber),var(--c-mint),var(--c-blue));color:#fff}
.bubbles__center::before{border-color:rgba(124,58,237,.35)}
.bubbles__center div{display:grid;place-items:center;width:84%;aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.14);backdrop-filter:blur(6px)}
.bubbles__arrow{border-top-color:var(--c-violet)}.bubbles__arrow::after{border-color:var(--c-violet)}

/* ---------- ニュースの札 ---------- */
.news .tag{background:var(--c-amber)}.news .tag--svc{background:var(--c-mint)}.news .tag--ev{background:var(--c-coral)}
.news a:hover{background:#fff;box-shadow:inset 3px 0 0 var(--c-violet)}

/* ---------- サービス：カードは淡い色の面＋二重の縁、6つのサービスの小さなカード ---------- */
.svc-card{border:6px solid rgba(12,18,32,.045);background-clip:padding-box;box-shadow:0 0 0 1px rgba(12,18,32,.05),0 24px 48px -36px rgba(12,18,32,.22);border-radius:24px}
.svc-card:nth-child(1){background:var(--t-blue) padding-box}.svc-card:nth-child(1) .svc-card__icon{background:#fff}.svc-card:nth-child(1) svg{stroke:var(--c-blue)}
.svc-card:nth-child(2){background:var(--t-violet) padding-box}.svc-card:nth-child(2) .svc-card__icon{background:#fff}.svc-card:nth-child(2) svg{stroke:var(--c-violet)}
.svc-card:nth-child(3){background:var(--t-coral) padding-box}.svc-card:nth-child(3) .svc-card__icon{background:#fff}.svc-card:nth-child(3) svg{stroke:var(--c-coral)}
.svc-card h3 small{font-family:var(--f-it);font-style:italic;font-size:14px;letter-spacing:.02em;text-transform:none;color:var(--ink-2)}
.six{display:grid;gap:12px;margin-top:clamp(40px,5vw,64px)}
@media (min-width:640px){.six{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.six{grid-template-columns:repeat(3,1fr);gap:16px}}
.six li{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;align-items:center;padding:18px 20px;border-radius:18px;border:6px solid rgba(12,18,32,.045);background-clip:padding-box;box-shadow:0 0 0 1px rgba(12,18,32,.05);transition:transform .5s var(--ease)}
.six li:hover{transform:translateY(-4px)}
.six li:nth-child(1){background:var(--t-blue) padding-box}.six li:nth-child(2){background:var(--t-cyan) padding-box}.six li:nth-child(3){background:var(--t-violet) padding-box}
.six li:nth-child(4){background:var(--t-magenta) padding-box}.six li:nth-child(5){background:var(--t-mint) padding-box}.six li:nth-child(6){background:var(--t-amber) padding-box}
.six i{grid-row:span 2;font-family:var(--f-it);font-style:italic;font-size:26px;line-height:1;color:var(--ink)}
.six li:nth-child(1) i{color:var(--c-blue)}.six li:nth-child(2) i{color:var(--c-cyan)}.six li:nth-child(3) i{color:var(--c-violet)}.six li:nth-child(4) i{color:var(--c-magenta)}.six li:nth-child(5) i{color:var(--c-mint)}.six li:nth-child(6) i{color:var(--c-amber)}
.six b{font-family:var(--f-serif);font-weight:700;font-size:16px;letter-spacing:.1em}
.six span{font-size:12.5px;line-height:1.8;color:var(--ink-2);letter-spacing:.04em}
.detail__no{background:var(--c-blue)}
#svc02 .detail__no{background:var(--c-violet)}
#svc03 .detail__no{background:var(--c-coral)}
.detail__fig{border:6px solid rgba(12,18,32,.045);background-clip:padding-box;box-shadow:0 0 0 1px rgba(12,18,32,.05)}
.detail__fig--blob{background:radial-gradient(circle at 30% 30%,#fff,var(--t-violet)) padding-box}.detail__fig--blob svg{stroke:var(--c-violet)}
.detail__fig--sand{background:radial-gradient(circle at 70% 30%,#fff,var(--t-coral)) padding-box}.detail__fig--sand svg{stroke:var(--c-coral)}
.detail li{box-shadow:0 0 0 1px rgba(12,18,32,.1)}

/* ---------- ご利用の流れ：番号を4色に、線は虹 ---------- */
.flow::after{background:var(--rainbow)}
.flow li:nth-child(1) .flow__no{color:var(--c-blue)}.flow li:nth-child(2) .flow__no{color:var(--c-violet)}.flow li:nth-child(3) .flow__no{color:var(--c-magenta)}.flow li:nth-child(4) .flow__no{color:var(--c-coral)}
.flow li:nth-child(1)::after{background:var(--c-blue)}.flow li:nth-child(2)::after{background:var(--c-violet)}.flow li:nth-child(3)::after{background:var(--c-magenta)}.flow li:nth-child(4)::after{background:var(--c-coral)}
.flow__no{font-family:var(--f-it);font-style:italic;font-weight:400;font-size:34px}

/* ---------- よくあるご質問：Q. を順に色づけ ---------- */
.faq details:nth-child(1) summary::before{color:var(--c-blue)}.faq details:nth-child(2) summary::before{color:var(--c-violet)}.faq details:nth-child(3) summary::before{color:var(--c-magenta)}.faq details:nth-child(4) summary::before{color:var(--c-coral)}.faq details:nth-child(5) summary::before{color:var(--c-amber)}
.faq summary::before,.faq__a::before{font-family:var(--f-it);font-style:italic;font-size:19px}
.faq__a::before{color:var(--c-mint)}
.faq__icon{background:var(--ink)}
.faq details[open] .faq__icon{background:var(--c-violet)}

/* ---------- 運営会社・お問い合わせ・フッター ---------- */
.dtable dt{color:var(--c-violet)}
.contact{background:linear-gradient(135deg,var(--t-blue),var(--t-violet) 35%,var(--t-magenta) 65%,var(--t-amber))}
.contact .btn{background:#fff}
.contact .btn--fill{background:var(--ink);border-color:var(--ink);color:#fff}
.contact .btn--fill:hover{background:var(--c-violet);border-color:var(--c-violet)}
.footer__phrase{font-size:20px;letter-spacing:.16em}
.footer__phrase::after{content:"";display:block;width:64px;height:2px;margin:12px auto 0;background:var(--rainbow)}

/* ---------- アニメーションなし版（index.mix.still.html）：白い丸の中の静止画 ---------- */
.hero__still{position:absolute;inset:4% 2% 2%;width:96%;height:94%;z-index:1;display:block}

/* ---------- 2Dアニメーション版（index.mix.anim.html）：白い丸の中の「マッチングカード」。SVG＋CSS で動かす（3Dではない） ---------- */
.hero__anim{position:absolute;inset:3% 2% 2%;width:96%;height:95%;z-index:1;display:block;overflow:visible}
.intro__circle.has-anim{cursor:pointer}
.intro__circle.has-anim .intro__hint{opacity:.8}
.hero__tag{transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
.hero__anim .blob{transform-box:fill-box;transform-origin:center;animation:hbBlob 11s ease-in-out infinite alternate}
.hero__anim .blob:nth-child(2){animation-duration:14s;animation-delay:-5s}
.hero__anim .blob:nth-child(3){animation-duration:12s;animation-delay:-8s}
.hero__anim .blob:nth-child(4){animation-duration:15s;animation-delay:-3s}
@keyframes hbBlob{from{transform:translate(0,0) scale(1)}to{transform:translate(16px,-12px) scale(1.1)}}
.hero__anim .dash{fill:none;stroke:#1a2650;stroke-opacity:.16;stroke-width:2;stroke-dasharray:4 9;stroke-linecap:round;animation:hbDash 1.4s linear infinite}
@keyframes hbDash{to{stroke-dashoffset:-13}}
.hero__anim .cand{transform-box:fill-box;transform-origin:center;transition:transform .65s cubic-bezier(.32,.72,0,1),opacity .45s}
.hero__anim .cand[data-pos="0"]{transform:translate(0,0) scale(1);opacity:1}
.hero__anim .cand[data-pos="1"]{transform:translate(14px,-18px) scale(.95);opacity:.85}
.hero__anim .cand[data-pos="2"]{transform:translate(28px,-36px) scale(.9);opacity:.65}
.hero__anim .cand.is-go{transform:translate(70px,20px) scale(.35);opacity:0;transition-duration:.5s}
.hero__anim .cand__float{transform-box:fill-box;transform-origin:center;animation:hbFloat 4.2s ease-in-out infinite}
.hero__anim .cand:nth-child(2) .cand__float{animation-delay:-1.4s}
.hero__anim .cand:nth-child(3) .cand__float{animation-delay:-2.8s}
@keyframes hbFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.hero__anim .co{transform-box:fill-box;transform-origin:center;animation:hbFloat 5s ease-in-out infinite;animation-delay:-2s}
.hero__anim .pulse-dot{transform-box:fill-box;transform-origin:center;animation:hbPulse 1.6s ease-in-out infinite}
@keyframes hbPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.7)}}
.hero__anim .slot__box{transition:stroke .35s,fill .35s}
.hero__anim .slot__av{fill:#e9e7e1;transition:fill .35s}
.hero__anim .slot__l1{fill:#e3e0d9;transition:fill .35s}.hero__anim .slot__l2{fill:#ebe9e3;transition:fill .35s}
.hero__anim .slot.is-on .slot__box{stroke:var(--c);stroke-dasharray:none;fill:#fff}
.hero__anim .slot.is-on .slot__av{fill:var(--c)}
.hero__anim .slot.is-on .slot__l1{fill:#1a2650}.hero__anim .slot.is-on .slot__l2{fill:#cfcbc2}
.hero__anim .slot__chk{transform-box:fill-box;transform-origin:center;transform:scale(0)}
.hero__anim .slot.is-on .slot__chk{animation:hbPop .55s cubic-bezier(.34,1.56,.64,1) forwards}
@keyframes hbPop{from{transform:scale(0)}to{transform:scale(1)}}
.hero__anim .slot__ring{opacity:0;transform-box:fill-box;transform-origin:center}
.hero__anim .slot.is-on .slot__ring{animation:hbRing .9s ease-out forwards}
@keyframes hbRing{from{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(2.6)}}
.hero__anim .bar__fill{transform:scaleX(0);transform-origin:left center;transform-box:fill-box;transition:transform .7s cubic-bezier(.32,.72,0,1)}
.hero__anim .matched{opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.6)}
.hero__anim .co.is-done .matched{animation:hbMatched .6s cubic-bezier(.34,1.56,.64,1) forwards}
@keyframes hbMatched{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}
.hero__anim .mover{visibility:hidden}
.hero__anim .mover.is-on{visibility:visible}
.hero__anim .confetti circle{opacity:0;transform-box:fill-box;transform-origin:center}
.hero__anim.is-party .confetti circle{animation:hbBurst 1.3s cubic-bezier(.2,.7,.3,1) forwards;animation-delay:var(--d,0s)}
@keyframes hbBurst{0%{opacity:0;transform:translate(0,0) scale(.4)}12%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1)}}
.hero__anim.is-static .dash,.hero__anim.is-static .blob,.hero__anim.is-static .cand__float,.hero__anim.is-static .co,.hero__anim.is-static .pulse-dot{animation:none}