/* ============================================================
   採用ページ（recruit.html）固有スタイル
   トップと同一デザインシステム。採用側はブルーを主役に反転
   （ヘッダーの反転は style.css の .page-recruit に集約）
   ============================================================ */

/* ---- 採用ファーストビュー ---- */
.r-hero{padding:70px 0 60px;overflow:visible}
.r-hero .big-en{
  font-family:var(--font-en);font-weight:800;font-size:clamp(2.3rem,9.5vw,7rem);
  line-height:.95;letter-spacing:.01em;text-transform:uppercase;
  color:transparent;-webkit-text-stroke:2px var(--blue);display:block;user-select:none;
}
.r-hero .big-en .fill{color:var(--blue);-webkit-text-stroke:0}
.r-hero h1{font-size:clamp(1.7rem,5.6vw,3rem);font-weight:900;line-height:1.55;margin-top:26px}
.r-hero .sub{margin-top:16px;color:var(--ink-soft);font-weight:500;max-width:36em}
.merit-band{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.merit-pill{
  display:inline-flex;align-items:center;gap:10px;background:var(--white);
  border:3px solid var(--ink);border-radius:999px;padding:10px 22px;font-weight:900;font-size:.95rem;
  transition:transform .5s var(--ease-soft)
}
.merit-pill:hover{transform:translateY(-3px) rotate(-1deg)}
.merit-pill .sun{width:16px;height:16px;border-radius:var(--radius-blob2);background:var(--yellow);flex:none}
.r-hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}

/* ---- 仕事内容 ---- */
.work{background:var(--white);border-radius:48px 48px 0 0}
.work-grid{display:grid;gap:22px;margin-top:40px}
.work-card{background:var(--bg);border:3px solid var(--ink);border-radius:28px;padding:34px 26px 30px;position:relative;transition:transform .55s var(--ease-soft),box-shadow .55s var(--ease-soft)}
.work-card:hover{transform:translateY(-8px) rotate(.6deg);box-shadow:var(--shadow-pop)}
.work-card:nth-child(2):hover{transform:translateY(-8px) rotate(-.6deg)}
.w-icon{width:76px;height:76px;display:grid;place-items:center;margin-bottom:20px;border-radius:var(--radius-blob2);transition:border-radius .6s var(--ease-soft),transform .6s var(--ease-soft)}
.work-card:hover .w-icon{border-radius:var(--radius-blob1);transform:rotate(-8deg) scale(1.06)}
.w1 .w-icon{background:var(--yellow)}
.w2 .w-icon{background:var(--green-soft)}
.w3 .w-icon{background:var(--blue-soft)}
.work-card h3{font-size:1.2rem;font-weight:900;margin-bottom:10px}
.work-card p{font-size:.95rem;color:var(--ink-soft)}

/* ---- 1日の流れ（時間割） ---- */
.day{background:var(--white)}
.day-track{margin-top:40px;position:relative;display:grid;gap:0;max-width:760px}
.day-item{display:flex;gap:20px;position:relative;padding-bottom:34px}
.day-item::before{content:"";position:absolute;left:44px;top:56px;bottom:0;width:3px;background-image:linear-gradient(var(--blue) 55%,transparent 55%);background-size:3px 12px}
.day-item:last-child::before{display:none}
.day-time{
  flex:none;width:90px;min-height:56px;display:grid;place-items:center;
  background:var(--blue);color:#fff;font-family:var(--font-en);font-weight:800;font-size:1.05rem;
  border-radius:var(--radius-blob2);border:3px solid var(--ink);
  transition:transform .6s var(--ease-soft),border-radius .6s var(--ease-soft);
}
.day-item:hover .day-time{transform:rotate(-4deg) scale(1.06);border-radius:var(--radius-blob1)}
.day-item:nth-child(even) .day-time{background:var(--yellow);color:var(--ink)}
.day-body{padding-top:6px}
.day-body strong{display:block;font-size:1.08rem;font-weight:900}
.day-body p{font-size:.92rem;color:var(--ink-soft);max-width:30em}

/* ---- スタッフの声 ---- */
.voice{background:var(--cream2);border-radius:48px;margin:0 10px}
.voice-grid{display:grid;gap:26px;margin-top:40px}
.voice-card{background:var(--white);border:3px solid var(--ink);border-radius:30px;padding:0 0 28px;overflow:hidden;transition:transform .55s var(--ease-soft),box-shadow .55s var(--ease-soft)}
.voice-card:hover{transform:translateY(-8px) rotate(.5deg);box-shadow:var(--shadow-pop)}
.voice-card:nth-child(2):hover{transform:translateY(-8px) rotate(-.5deg)}
.v-photo{position:relative;height:210px;display:grid;place-items:center;
  background:repeating-linear-gradient(45deg,rgba(255,255,255,.25) 0 14px,transparent 14px 28px),linear-gradient(135deg,var(--yellow-soft),#FFD066);
  border-radius:0 0 var(--radius-blob2);border-bottom:3px solid var(--ink);overflow:hidden;
}
.voice-card:nth-child(2) .v-photo{background:repeating-linear-gradient(45deg,rgba(255,255,255,.25) 0 14px,transparent 14px 28px),linear-gradient(135deg,var(--green-soft),#9ED9AE)}
.voice-card:nth-child(3) .v-photo{background:repeating-linear-gradient(45deg,rgba(255,255,255,.25) 0 14px,transparent 14px 28px),linear-gradient(135deg,var(--blue-soft),#AABCFF)}
.v-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.v-photo .ph-label{position:absolute;left:50%;transform:translateX(-50%);bottom:16px;background:var(--ink);color:#fff;font-size:.75rem;font-weight:700;padding:5px 13px;border-radius:12px;max-width:82%;text-align:center;white-space:nowrap}
.v-photo .cam{opacity:.4}
.v-body{padding:24px 24px 0}
.v-meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}
.v-role{background:var(--blue);color:#fff;font-size:.78rem;font-weight:900;padding:4px 14px;border-radius:999px}
.v-years{background:var(--yellow);color:var(--ink);font-size:.78rem;font-weight:900;padding:4px 14px;border-radius:999px}
.v-body h3{font-size:1.15rem;font-weight:900;line-height:1.6;margin-bottom:10px}
.v-body p{font-size:.92rem;color:var(--ink-soft)}
.voice-note{margin-top:22px;font-size:.85rem;color:var(--ink-soft)}

/* ---- データで知るひまわり ---- */
.data{background:var(--white)}
.data-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:40px}
.data-card{
  position:relative;background:var(--bg);border:3px solid var(--ink);border-radius:26px;
  padding:28px 18px 22px;text-align:center;
  transition:transform .55s var(--ease-soft),box-shadow .55s var(--ease-soft);
}
.data-card:hover{transform:translateY(-6px) rotate(-.8deg);box-shadow:var(--shadow-pop)}
.data-card:nth-child(even):hover{transform:translateY(-6px) rotate(.8deg)}
.data-card .num{font-family:var(--font-en);font-weight:800;font-size:clamp(2.4rem,7vw,3.4rem);line-height:1;color:var(--blue)}
.data-card:nth-child(3n) .num{color:var(--green)}
.data-card .unit{font-size:1rem;font-weight:900;margin-left:2px}
.data-card .label{display:block;font-weight:700;font-size:.92rem;margin-top:10px}
.data-note{
  margin-top:26px;background:var(--yellow-soft);border:2px dashed var(--ink);border-radius:18px;
  padding:16px 20px;font-size:.88rem;font-weight:700;position:relative;z-index:1;
}

/* ---- 募集要項 ---- */
.require{background:var(--cream2);border-radius:48px;margin:0 10px}
.req-note{margin-top:20px;font-size:.85rem;color:var(--ink-soft)}

/* ---- 見学だけでもOK（エントリーフォーム） ---- */
.entry{background:var(--blue);border-radius:48px 48px 0 0;color:#fff}
.entry .kicker{color:var(--yellow)}
.entry h2{color:#fff}
.entry .lead{color:var(--blue-soft)}
.entry-card{background:var(--bg);color:var(--ink);border:3px solid var(--ink);border-radius:36px;padding:40px 26px;position:relative;max-width:640px;margin:44px auto 0}
.entry-badge{position:absolute;top:-26px;left:50%;transform:translateX(-50%) rotate(-3deg);background:var(--yellow);color:var(--ink);font-weight:900;font-size:.95rem;padding:10px 26px;border-radius:999px;white-space:nowrap;box-shadow:var(--shadow-pop);border:3px solid var(--ink)}
.entry-form{display:grid;gap:20px;margin-top:14px}
.entry-form label{font-weight:900;font-size:.95rem;display:block;margin-bottom:8px}
.entry-form label small{font-weight:500;color:var(--ink-soft);margin-left:8px}
.entry-form input{
  width:100%;min-height:56px;padding:12px 18px;font-size:1rem;font-family:var(--font-jp);
  border:3px solid var(--ink);border-radius:16px;background:var(--white);color:var(--ink);
  transition:box-shadow .3s,border-color .3s;
}
.entry-form input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px var(--blue-soft)}
.entry-form input::placeholder{color:#9A9280}
.entry-form .field.is-error input{border-color:var(--err);background:var(--err-soft)}
.entry-form .err-msg{display:flex;align-items:center;gap:8px;margin-top:8px;color:var(--err);font-weight:700;font-size:.88rem;line-height:1.6}
.entry-form .err-msg[hidden]{display:none}
.entry-form .err-msg svg{flex:none}
.entry-msg{background:var(--green-soft);color:var(--green);font-weight:900;padding:14px 18px;border-radius:14px;font-size:.95rem;line-height:1.7}
.entry-msg[hidden]{display:none}
.entry-msg.is-info{background:var(--yellow-soft);color:var(--ink)}
.entry-msg.is-ng{background:var(--err-soft);color:var(--err)}
.entry-test-badge{
  display:inline-block;background:var(--ink);color:#fff;font-weight:900;font-size:.78rem;
  padding:5px 14px;border-radius:999px;margin-top:8px;
}
.entry-test-badge[hidden]{display:none}
.entry-alt{margin-top:22px;font-size:.88rem;color:var(--ink-soft);text-align:center}
.entry-alt a{font-weight:900}
.tel-row{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:8px}
.tel-row .num{font-family:var(--font-en);font-weight:800;font-size:1.5rem}

/* ---- レスポンシブ ---- */
@media(min-width:900px){
  .data-grid{grid-template-columns:repeat(4,1fr)}
}
@media(min-width:768px){
  .work-grid{grid-template-columns:repeat(3,1fr)}
  .voice-grid{grid-template-columns:repeat(3,1fr)}
}