/* engine.css — ポップ・スクロール共通エンジン（構造/装飾/部品）。色は skin の var() 参照。 */
/* ============================================================
   style.css — ポップ多色（DeNAライバーLP風）/ モバイル特化
   クリーム地×ピンク/ティール/黄/橙/緑・丸ゴシック・ブロブ・バッジ・吹き出し・番号カード
   ============================================================ */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--body);line-height:1.9;
  -webkit-font-smoothing:antialiased;font-feature-settings:"palt";font-weight:500}
img{display:block;max-width:100%}a{color:inherit;text-decoration:none}

.app{position:relative;max-width:var(--maxw);margin-inline:auto;background:var(--cream);overflow:hidden}
.pad{padding-inline:22px}
.sec{position:relative;z-index:1;padding:56px 0}
.center{text-align:center}.rel{position:relative;z-index:1}

/* ===== 背景ブロブ（有機的な色形・浮遊） ===== */
.blobs{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.blob{position:absolute;opacity:.85;filter:blur(2px);animation:float 8s ease-in-out infinite}
.blob.b1{width:120px;height:120px;background:var(--orange);border-radius:46% 54% 60% 40%/50% 44% 56% 50%;top:30px;left:-30px}
.blob.b2{width:90px;height:90px;background:var(--yellow);border-radius:54% 46% 40% 60%/48% 56% 44% 52%;top:120px;right:-20px;animation-delay:1s}
.blob.b3{width:70px;height:70px;background:var(--pink);border-radius:50%;top:8%;right:30%;animation-delay:.5s}
.blob.b4{width:80px;height:80px;background:var(--teal);border-radius:50% 50% 46% 54%/56% 44% 56% 44%;top:46%;left:-26px;animation-delay:1.4s}
.blob.b5{width:64px;height:64px;background:var(--blue);border-radius:50%;top:70%;right:-18px;animation-delay:.8s}
@keyframes float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-18px) rotate(10deg)}}
.dotrow{position:absolute;width:90px;height:30px;opacity:.6;background-image:radial-gradient(var(--teal) 3px,transparent 3px);background-size:18px 18px}

/* ===== バッジ・バナー・ボタン ===== */
.badge{display:inline-grid;place-content:center;text-align:center;border-radius:50%;font-family:var(--disp);font-weight:900;
  color:#fff;box-shadow:0 6px 0 rgba(0,0,0,.08);line-height:1.15}
.badge--y{background:var(--yellow);color:var(--ink)}.badge--p{background:var(--pink)}.badge--t{background:var(--teal)}
.banner{display:inline-block;background:var(--orange);color:#fff;font-family:var(--disp);font-weight:900;
  padding:.7em 1.6em;border-radius:999px;font-size:1.05rem;box-shadow:0 6px 0 rgba(224,110,40,.5)}
.banner em{font-style:normal;color:var(--yellow)}
.cta{display:inline-flex;align-items:center;justify-content:center;gap:.5em;background:var(--green);color:#fff;
  font-family:var(--disp);font-weight:900;font-size:1.15rem;padding:16px 28px;border-radius:999px;
  box-shadow:0 7px 0 var(--green-d);transition:transform .12s}
.cta:active{transform:translateY(4px);box-shadow:0 3px 0 var(--green-d)}
.cta__ic{width:26px;height:26px;border-radius:7px;background:#fff;color:var(--green);display:grid;place-content:center;font-size:.9rem}

/* ===== 見出し ===== */
.eyebrow{font-family:var(--disp);font-weight:900;color:var(--pink);font-size:.95rem;letter-spacing:.04em;display:inline-block;position:relative;margin-bottom:.3em}
.eyebrow::before,.eyebrow::after{content:"";position:absolute;top:50%;width:18px;height:3px;border-radius:3px;background:var(--pink)}
.eyebrow::before{left:-26px}.eyebrow::after{right:-26px}
.eyebrow--w{color:#fff}.eyebrow--w::before,.eyebrow--w::after{background:#fff}
.h{font-family:var(--disp);font-weight:900;line-height:1.4;margin:.2em 0;font-size:clamp(1.7rem,7.6vw,2.3rem)}
.h--big{font-size:clamp(2.2rem,10vw,3rem)}
.h .pk{color:var(--pink)}.h .tc{color:var(--teal)}.h .mk{background:linear-gradient(transparent 58%,var(--yellow) 58%)}
.lead{color:var(--muted);font-size:.96rem;max-width:30ch;margin:0 auto}

/* ===== HERO ===== */
.hero{padding:30px 0 44px;text-align:center;position:relative}
.hero__copy{font-family:var(--disp);font-weight:900;font-size:clamp(2.1rem,10vw,2.9rem);line-height:1.35;margin:.2em 0 .1em}
.hero__copy .pk{color:var(--pink)}
.hero__sub{color:var(--muted);font-size:.95rem;margin:.4em 0 18px}
.hero__photo{position:relative;width:84%;max-width:340px;margin:0 auto;border-radius:30px;overflow:hidden;
  border:5px solid #fff;box-shadow:0 18px 40px -16px rgba(35,50,90,.4);aspect-ratio:4/4.2}
.hero__photo img{width:100%;height:100%;object-fit:cover}
.hero__badges{position:absolute;inset:0;pointer-events:none}
.hero__badges .badge{position:absolute}
.b-top{width:78px;height:78px;font-size:.78rem;top:-14px;right:6%}
.b-bot{width:88px;height:88px;font-size:.82rem;bottom:8%;left:-10px;transform:rotate(-8deg)}
.hero__banner{margin:24px 0 14px}

/* 募集要項ミニ（ピンク帯） */
.mini{display:flex;justify-content:center;gap:10px;align-items:center;background:var(--pink);color:#fff;
  border-radius:16px;padding:12px 16px;max-width:320px;margin:16px auto 0;font-family:var(--disp);font-weight:900;font-size:.95rem}
.mini b{background:#fff;color:var(--pink);border-radius:8px;padding:.1em .6em}

/* ===== カラーブロック面 ===== */
.sec--pink{background:var(--pink);color:#fff;border-radius:40px 40px 0 0;margin-top:30px}
.sec--pink .lead{color:rgba(255,255,255,.9)}
.sec--teal{background:linear-gradient(160deg,var(--teal),var(--teal-d));color:#fff;border-radius:40px 40px 0 0}
.sec--teal .lead{color:rgba(255,255,255,.9)}
.sec--cream{background:var(--cream)}

/* ===== 吹き出し（悩み） ===== */
.bubbles{display:grid;gap:14px;max-width:360px;margin:24px auto 0}
.bubble{background:#fff;border-radius:18px;padding:16px 20px;position:relative;font-weight:700;color:var(--ink);
  box-shadow:0 8px 0 rgba(59,130,246,.18)}
.bubble::after{content:"";position:absolute;left:32px;bottom:-12px;border:12px solid transparent;border-top-color:#fff;border-bottom:0}
.bubble--alt{box-shadow:0 8px 0 rgba(33,182,168,.18)}

/* ===== Caseカード（こんな人におすすめ） ===== */
.cases{display:grid;gap:16px;max-width:360px;margin:26px auto 0}
.case{background:#fff;border-radius:20px;padding:20px;text-align:left;position:relative;color:var(--ink);box-shadow:0 12px 26px -16px rgba(35,50,90,.32)}
.case__no{position:absolute;top:-12px;left:18px;background:var(--ink);color:#fff;font-family:var(--disp);font-weight:900;
  font-size:.78rem;padding:.25em 1em;border-radius:999px}
.case__ic{width:54px;height:54px;border-radius:16px;background:var(--cream);display:grid;place-content:center;margin-bottom:10px}
.case__ic svg{width:30px;height:30px;stroke:var(--pink);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.case h3{font-family:var(--disp);font-weight:900;margin:.1em 0 .2em;font-size:1.12rem}
.case p{margin:0;color:var(--muted);font-size:.9rem}

/* ===== POINTカード（番号・ティール面） ===== */
.points{display:grid;gap:18px;max-width:360px;margin:28px auto 0}
.point{background:#fff;border-radius:20px;padding:22px 20px;text-align:center;color:var(--ink);box-shadow:0 14px 30px -18px rgba(0,60,55,.5)}
.point__no{font-family:var(--disp);font-weight:900;color:var(--teal);font-size:.9rem;display:flex;align-items:center;justify-content:center;gap:.5em;margin-bottom:.4em}
.point__no::before,.point__no::after{content:"";width:16px;height:2px;background:var(--teal);border-radius:2px}
.point__big{font-family:var(--disp);font-weight:900;color:var(--teal-d);font-size:2.4rem;line-height:1}
.point__ic{width:60px;height:60px;border-radius:50%;background:var(--cream);display:grid;place-content:center;margin:10px auto}
.point__ic svg{width:34px;height:34px;stroke:var(--teal);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.point h3{font-family:var(--disp);font-weight:900;font-size:1.18rem;margin:.2em 0 .3em}
.point p{margin:0;color:var(--muted);font-size:.9rem}
.point__fig{border-radius:14px;overflow:hidden;margin-top:14px;aspect-ratio:16/10}
.point__fig img{width:100%;height:100%;object-fit:cover}

/* ===== 仕事カード ===== */
.wcards{display:grid;gap:14px;max-width:360px;margin:24px auto 0}
.wcard{background:#fff;border-radius:18px;padding:18px;text-align:left;box-shadow:0 10px 24px -16px rgba(35,50,90,.28)}
.wcard h3{font-family:var(--disp);font-weight:900;margin:0 0 .2em;font-size:1.05rem;color:var(--ink)}
.wcard h3::before{content:"";display:inline-block;width:12px;height:12px;border-radius:50%;background:var(--pink);margin-right:.5em;vertical-align:middle}
.wcard p{margin:0;color:var(--muted);font-size:.88rem}

/* ===== タイムライン ===== */
.tl{display:grid;gap:14px;max-width:320px;margin:24px auto 0;text-align:left;position:relative;padding-left:22px}
.tl::before{content:"";position:absolute;left:5px;top:8px;bottom:8px;width:3px;border-radius:3px;background:var(--pink)}
.tl li{list-style:none;position:relative;font-weight:600;display:grid;grid-template-columns:max-content 1fr;column-gap:.6em;align-items:baseline}
.tl li::before{content:"";position:absolute;left:-22px;top:.5em;width:12px;height:12px;border-radius:50%;background:var(--pink);border:2px solid #fff}
.tl time{font-family:var(--disp);font-weight:900;color:var(--teal-d)}
.tl__fig{max-width:360px;margin:18px auto 0;border-radius:18px;overflow:hidden;border:4px solid #fff;box-shadow:0 12px 26px -16px rgba(35,50,90,.32);aspect-ratio:16/10}
.tl__fig img{width:100%;height:100%;object-fit:cover}

/* ===== 募集要項（黄枠ボックス） ===== */
.spec{max-width:380px;margin:24px auto 0;background:#fff;border-radius:20px;overflow:hidden;box-shadow:0 14px 30px -18px rgba(35,50,90,.32)}
.spec .row{display:grid;grid-template-columns:34% 1fr;border-bottom:2px solid var(--cream)}
.spec .row:last-child{border-bottom:none}
.spec .k{background:var(--teal);color:#fff;font-family:var(--disp);font-weight:900;font-size:.82rem;padding:13px 14px}
.spec .v{padding:13px 14px;font-size:.86rem}

/* ===== メッセージ ===== */
.msg{text-align:center}
.msg .lead{max-width:32ch}

/* ===== エントリー ===== */
.entry{background:#ffe2c2;color:var(--ink);border-radius:40px 40px 0 0;text-align:center;padding:50px 22px 64px}
.entry .eyebrow{color:var(--pink)}.entry .eyebrow::before,.entry .eyebrow::after{background:var(--pink)}
.form{max-width:360px;margin:22px auto 0;display:grid;gap:12px;text-align:left}
.form label{display:block;font-family:var(--disp);font-weight:900;font-size:.85rem;color:var(--ink);margin-bottom:.3em}
.form input,.form textarea{width:100%;padding:13px;border:2px solid rgba(51,41,77,.12);border-radius:14px;font:inherit;background:#fff;color:var(--ink);resize:vertical}
.form .opt{font-weight:500;font-size:.7em;opacity:.85}
.form .cs{display:flex;gap:.5em;align-items:flex-start;font-size:.82rem;color:var(--ink)}
.form .cs a{text-decoration:underline}
.form button{font-family:var(--disp);font-weight:900;font-size:1.15rem;padding:16px;border:none;cursor:pointer;border-radius:999px;background:var(--ink);color:#fff;box-shadow:0 6px 0 rgba(0,0,0,.25)}
.line-cta{display:block;text-align:center;max-width:360px;margin:18px auto 0;background:#06C755;color:#fff;font-family:var(--disp);font-weight:900;padding:15px;border-radius:999px;box-shadow:0 6px 0 #05a548}
.foot{background:var(--ink);color:rgba(255,255,255,.9);text-align:center;font-size:.78rem;padding:22px}

/* ===== reveal ===== */
.up{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.up.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.up{opacity:1;transform:none}.blob{animation:none}}

/* ============================================================
   全セクション背景デザイン（リッチ化）
   ============================================================ */
/* クリーム面を透過＝全体の背景グラフィックを全セクションで見せる */
.sec--cream{background:transparent}
.app{background:var(--cream)}

/* オーロラ（大きく淡い色グロー・奥行き） */
.aura{position:absolute;border-radius:50%;filter:blur(58px);opacity:.42;pointer-events:none;z-index:0}

/* キラキラ（スパークル） */
.spark{position:absolute;pointer-events:none;z-index:0;background:linear-gradient(135deg,var(--yellow),var(--orange));
  clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);opacity:.85;animation:twinkle 4.5s ease-in-out infinite}
.spark.c{background:linear-gradient(135deg,var(--teal),var(--blue))}
.spark.p{background:linear-gradient(135deg,var(--blue),var(--pink))}
@keyframes twinkle{0%,100%{transform:scale(.55) rotate(0);opacity:.3}50%{transform:scale(1.2) rotate(28deg);opacity:.95}}

/* 流れるリボン帯（ページ全体を縦断） */
.ribbon{position:absolute;top:-4%;right:-32%;width:174%;height:108%;z-index:0;pointer-events:none;opacity:.38;filter:blur(1px)}
.ribbon svg{width:100%;height:100%;display:block}

/* カラーブロック面の中の装飾（白い円・ドット） */
.sec--pink,.sec--teal,.entry,.hero{overflow:hidden}
.sec--pink::before,.sec--teal::before,.entry::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(circle at 13% 15%, rgba(255,255,255,.18), transparent 20%),
    radial-gradient(circle at 87% 62%, rgba(255,255,255,.16), transparent 22%),
    radial-gradient(circle at 72% 7%, rgba(255,255,255,.13), transparent 13%),
    radial-gradient(rgba(255,255,255,.16) 2px, transparent 2px);
  background-size:auto,auto,auto,24px 24px}
.sec--pink>*,.sec--teal>*,.entry>*{position:relative;z-index:1}

/* クリーム面の輪っか装飾（左右交互） */
.sec--cream{position:relative}
.sec--cream::before{content:"";position:absolute;z-index:0;pointer-events:none;width:150px;height:150px;border-radius:50%;
  border:16px solid rgba(33,182,168,.14);top:24px;right:-58px}
.sec--cream:nth-of-type(odd)::before{border-color:rgba(59,130,246,.14);left:-58px;right:auto;top:auto;bottom:24px}
.sec--cream>*{position:relative;z-index:1}

.entry::before{background:radial-gradient(circle at 14% 16%, rgba(255,150,90,.16), transparent 20%),radial-gradient(circle at 86% 70%, rgba(255,190,120,.16), transparent 22%),radial-gradient(rgba(255,150,90,.18) 2px, transparent 2px);background-size:auto,auto,24px 24px}

.form .cs input{width:auto;flex:0 0 auto;margin-top:3px}
.form .cs span{flex:1;line-height:1.5}
/* ===== ヒーロー写真の上下マーキー（流れる文字） ===== */
.hero__mq{position:absolute;left:0;right:0;height:36px;overflow:hidden;z-index:2;display:flex;align-items:center;
  background:linear-gradient(rgba(15,18,30,.62),rgba(15,18,30,.42));backdrop-filter:blur(1px)}
.hero__mq--top{top:0}.hero__mq--bot{bottom:0}
.hero__mq__t{display:inline-flex;align-items:center;white-space:nowrap;font-family:var(--disp);font-weight:900;font-size:.84rem;color:#fff;padding-left:1rem;will-change:transform}
.hero__mq__t span::after{content:"✦";margin:0 .85rem;color:var(--yellow);font-size:.78em}
.hero__mq--top .hero__mq__t{animation:mqRight 13s linear infinite}
.hero__mq--bot .hero__mq__t{animation:mqLeft 13s linear infinite}
@keyframes mqRight{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@keyframes mqLeft{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.hero__badges .badge{z-index:4}
@media(prefers-reduced-motion:reduce){.hero__mq__t{animation:none}}
/* === Caseカードを写真背景に === */
.case--photo{color:#fff;overflow:hidden}
.case--photo .case__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.case--photo::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(18,22,40,.4),rgba(18,22,40,.78))}
.case--photo>*{position:relative;z-index:2}
.case--photo h3{color:#fff}.case--photo p{color:rgba(255,255,255,.92)}
.case--photo .case__ic{background:rgba(255,255,255,.92)}

/* === エントリーをオレンジに === */
.entry{background:linear-gradient(160deg,#ff9a4d,#ff7a2f)!important;color:#fff!important}
.entry .eyebrow{color:#fff!important}.entry .eyebrow::before,.entry .eyebrow::after{background:#fff!important}
.entry .form label{color:#fff}
.entry .form .cs{color:#fff}
.entry::before{background:radial-gradient(circle at 14% 16%,rgba(255,255,255,.16),transparent 20%),radial-gradient(circle at 86% 70%,rgba(255,255,255,.14),transparent 22%),radial-gradient(rgba(255,255,255,.18) 2px,transparent 2px)!important;background-size:auto,auto,24px 24px!important}

/* === 「その想い」強調 === */
.worry-cta{font-family:var(--disp);font-weight:900;font-size:clamp(1.25rem,5.8vw,1.75rem);line-height:1.55;text-align:center;margin:28px auto 0;padding-inline:14px}
.worry-cta .hl{background:linear-gradient(transparent 56%,var(--yellow) 56%);padding:0 .12em}
.worry-cta .pk2{color:var(--pink)}

/* === 追従ボタン（FAB） === */
.fab{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:480px;z-index:60;
  display:grid;grid-template-columns:auto 1fr 1fr;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.85);backdrop-filter:blur(8px);box-shadow:0 -6px 22px -12px rgba(0,0,0,.3)}
.fab a{display:flex;align-items:center;justify-content:center;gap:.25em;font-family:var(--disp);font-weight:900;border-radius:999px;padding:13px 8px;font-size:.9rem;color:#fff}
.fab .f-top{background:var(--ink);padding-inline:15px}
.fab .f-entry{background:var(--orange);box-shadow:0 4px 0 #d9702f}
.fab .f-line{background:var(--green);box-shadow:0 4px 0 var(--green-d)}
.fab a:active{transform:translateY(2px)}
.foot{padding-bottom:100px}
/* === 働く環境（横長カード・写真＋テキストを左右／交互） === */
.envs{display:grid;gap:18px;max-width:420px;margin:24px auto 0}
.env{display:grid;grid-template-columns:1fr 43%;background:#fff;border-radius:18px;overflow:hidden;text-align:left;
  box-shadow:0 12px 26px -16px rgba(35,50,90,.32);border:2.5px solid var(--teal)}
.env:nth-child(2){border-color:var(--pink)}.env:nth-child(3){border-color:var(--orange)}.env:nth-child(4){border-color:var(--green)}
.env__b{grid-column:1;grid-row:1;padding:14px;display:flex;flex-direction:column;justify-content:center}
.env__b h3{font-family:var(--disp);font-weight:900;margin:0 0 .3em;font-size:1rem;color:var(--ink);line-height:1.4}
.env__b p{margin:0;color:var(--muted);font-size:.8rem;line-height:1.6}
.env__fig{grid-column:2;grid-row:1;position:relative;min-height:120px;overflow:hidden}
.env__fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.env__tag{position:absolute;top:8px;left:8px;z-index:2;font-family:var(--disp);font-weight:900;font-size:.6rem;letter-spacing:.05em;color:#fff;background:var(--ink);padding:.34em .8em;border-radius:999px}
.env:nth-child(even){grid-template-columns:43% 1fr}
.env:nth-child(even) .env__b{grid-column:2}
.env:nth-child(even) .env__fig{grid-column:1}