/* meruope.com — 深い紺・メールの青・新着の朱。見出しは Zen Kaku Gothic New、金額は Outfit */
:root{
  --ink:#0F2236; --ink-2:#4A5A6E; --bg:#fff; --surface:#fff; --soft:#EEF3FA; --line:#DCE4EE;
  --brand:#1F5FE0; --brand-ink:#fff; --accent:#D23A1F; --accent-ink:#fff; --pay:#0F2236;
  --f-d:"Zen Kaku Gothic New",var(--f-b); --f-n:"Outfit",var(--f-b);
  --r:12px; --r-lg:20px;
}
.logo__name{font-weight:900;font-size:1.25rem;letter-spacing:.01em}
.logo__tld{font-family:var(--f-n);font-weight:800;color:var(--brand);font-size:.95em;margin-left:1px}
.ft .logo__tld{color:#8FB3FF}

/* ヒーロー：左に文字、右に写真。写真の上に実データの「新着」通知 */
.hero{background:linear-gradient(180deg,#F3F7FD 0%,#fff 100%);padding:28px 0 8px;overflow:hidden}
.hero__in{display:grid;gap:28px;align-items:center}
@media (min-width:1000px){.hero{padding:48px 0 24px}.hero__in{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:48px}}
.hero__eyebrow{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:.85rem;color:var(--brand);background:#fff;border:1px solid var(--line);padding:4px 12px;border-radius:999px}
.hero__t{font-family:var(--f-d);font-weight:900;font-size:clamp(2rem,1.3rem + 3.4vw,3.5rem);line-height:1.22;margin-top:14px;letter-spacing:.01em}
.hero__lead{margin-top:16px;color:var(--ink-2);font-size:1.02rem;max-width:34em}
.hero__stats{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 0}
.hero__stats div{background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px 16px;min-width:7.5em}
.hero__stats dt{font-size:.75rem;color:var(--ink-2);font-weight:700}
.hero__stats dd{margin:0;font-weight:700}
.hero__stats .num{font-size:1.7rem;font-weight:800;color:var(--ink);margin-right:2px;line-height:1.2}
.hero__btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.hero__visual{position:relative}
.hero__photo{border-radius:28px;overflow:hidden;aspect-ratio:16/10;box-shadow:0 24px 60px rgb(15 34 54 / .18)}
@media (max-width:999px){.hero__photo{aspect-ratio:16/11;border-radius:20px}}
.notice{position:absolute;left:-8px;bottom:-14px;display:flex;align-items:center;gap:12px;max-width:min(360px,88%);padding:12px 16px 12px 12px;background:#fff;border-radius:18px;color:var(--ink);text-decoration:none;box-shadow:0 12px 32px rgb(15 34 54 / .22);border:1px solid var(--line);animation:notice-in .6s .3s both cubic-bezier(.2,.8,.2,1)}
@media (min-width:1000px){.notice{left:-36px;bottom:28px}}
.notice__icon{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--brand);color:#fff;position:relative}
.notice__icon::after{content:"";position:absolute;top:-3px;right:-3px;width:12px;height:12px;border-radius:50%;background:var(--accent);border:2px solid #fff}
.notice__t{display:flex;flex-direction:column;line-height:1.35;min-width:0}
.notice__l{font-size:.72rem;font-weight:700;color:var(--accent)}
.notice__c{font-size:.84rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.notice__p{font-family:var(--f-n);font-weight:800;font-size:1.05rem}
@keyframes notice-in{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}

.sec__src{font-size:.8rem;color:var(--ink-2)}

/* 求人カード（写真型）：金額を大きく、会社名は上に小さく */
.job--photo .job__payv{font-size:1.4rem}

/* スマホ：求人まで早く届くよう、数字は1行・写真は低く・通知は写真の中 */
@media (max-width:999px){
  .hero{padding:20px 0 4px}
  .hero__in{gap:20px}
  .hero__lead{font-size:.95rem;margin-top:12px}
  .hero__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px}
  .hero__stats div{min-width:0;padding:8px 10px;border-radius:12px}
  .hero__stats dt{font-size:.68rem;white-space:nowrap}
  .hero__stats .num{font-size:1.3rem}
  .hero__btns{margin-top:16px}
  .hero__btns .btn{flex:1 1 auto}
  .hero__photo{aspect-ratio:16/8}
  .notice{left:10px;bottom:10px;animation:none}
}

/* 働き方 */
.work__grid{display:grid;gap:16px}
@media (min-width:760px){.work__grid{grid-template-columns:1fr 1fr;gap:24px}}
.work__card{border-radius:var(--r-lg);overflow:hidden;background:var(--soft)}
.work__photo{aspect-ratio:16/9}
.work__body{padding:18px 22px 22px}
.work__body h3{font-family:var(--f-d);font-size:1.25rem;font-weight:900;margin-bottom:6px}
.work__body strong{color:var(--brand);font-size:1.1em}

/* メルオペとは：左に見出し語、右に本文 */
.about{background:var(--soft)}
.about__in{display:grid;gap:28px}
@media (min-width:1000px){.about__in{grid-template-columns:320px minmax(0,1fr);gap:56px;align-items:start}.about__side{position:sticky;top:96px}}
.about__side{background:#fff;border-radius:var(--r-lg);padding:24px;border:1px solid var(--line)}
.about__word{font-family:var(--f-d);font-weight:900;font-size:2.4rem;line-height:1.1;color:var(--ink)}
.about__read{font-size:.82rem;color:var(--ink-2);margin-top:6px}
.about__def{margin-top:14px;font-size:.95rem;line-height:1.85;padding-top:14px;border-top:2px solid var(--ink)}
.about__links{display:flex;flex-wrap:wrap;gap:4px 18px;margin-top:12px}
.about__main{background:#fff;border-radius:var(--r-lg);padding:clamp(20px,4vw,40px);border:1px solid var(--line);min-width:0}

/* 職種図鑑タイル */
.zk{display:grid;gap:12px;grid-template-columns:1fr}
@media (min-width:640px){.zk{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.zk{grid-template-columns:repeat(3,1fr)}}
.zk__a{display:flex;flex-direction:column;gap:6px;height:100%;padding:18px 20px;border-radius:var(--r);border:1px solid var(--line);color:var(--ink);text-decoration:none;background:#fff;position:relative}
.zk__a:hover{border-color:var(--brand)}
.zk__name{font-family:var(--f-d);font-weight:900;font-size:1.12rem}
.zk__d{font-size:.86rem;color:var(--ink-2);line-height:1.65}

/* 用語 */
.kana ul{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.kana a{display:grid;place-items:center;min-width:44px;min-height:44px;border-radius:10px;background:var(--soft);color:var(--ink);font-weight:800;text-decoration:none;font-family:var(--f-d)}
.kana a:hover{background:var(--brand);color:#fff}
.terms{display:flex;flex-wrap:wrap;gap:8px}
.terms a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:999px;border:1px solid var(--line);color:var(--ink);text-decoration:none;font-size:.92rem;font-weight:600;background:#fff}
.terms a:hover{border-color:var(--brand);color:var(--brand)}
.dict{margin-top:32px}
.dict__row{font-family:var(--f-d);font-weight:900;font-size:1.6rem;width:56px;height:56px;display:grid;place-items:center;border-radius:14px;background:var(--ink);color:#fff;margin-bottom:12px}
.dict__list{display:grid;gap:8px;margin:0}
.dict__item{padding:14px 18px;border:1px solid var(--line);border-radius:var(--r);background:#fff}
.dict__item dt{font-weight:800;display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline}
.dict__item dt a{color:var(--ink);font-family:var(--f-d);font-size:1.08rem}
.dict__read{font-size:.8rem;color:var(--ink-2);font-weight:400}
.dict__item dd{margin:4px 0 0;color:var(--ink-2);font-size:.92rem}
.term__read{font-size:.9rem;color:var(--ink-2);margin-top:6px}
.term__def{margin-top:16px;padding:16px 18px;background:var(--soft);border-radius:var(--r);border-left:4px solid var(--brand);font-size:1.02rem}
.tpager{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:32px}
.tpager__a{display:flex;flex-direction:column;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r);text-decoration:none;color:var(--ink);font-weight:700}
.tpager__a small{font-weight:400;color:var(--ink-2);font-size:.78rem}
.tpager__a--next{text-align:right;grid-column:2}
.smap{display:grid;gap:2px}
.smap a{display:inline-flex;min-height:44px;align-items:center}
.hero__photo img{object-position:72% 35%}
@media (max-width:999px){.hero__stats dt{font-size:.75rem}}
.notice__l{font-size:.75rem}
.dict__item dt a{display:inline-flex;align-items:center;min-height:44px}
.dict__item dt a,.terms a{min-width:44px;justify-content:center}

/* 見出しの上の行（キーワード）を見出しと一体に */
.hero__t{margin-top:0;display:flex;flex-direction:column;align-items:flex-start}
.hero__t .hero__eyebrow{font-family:var(--f-b);line-height:1.5;max-width:100%}
.hero__main{display:block;margin-top:14px}
.hero__main{align-self:stretch;text-wrap:wrap}
.hero__t{font-size:clamp(2rem,1.3rem + 2.6vw,3.05rem)}
@media (min-width:1000px) and (max-width:1199px){.hero__t{font-size:2.5rem}}