/* ============================================================
   RiARIO PRO — 下層ページ共通パーツ
   採用プロデュース／店舗開業支援／フリーランス支援／採用情報 が共有する。
   ============================================================ */

.sec{padding:clamp(76px,11vh,130px) 0}
.sec--soft{background:var(--soft)}
.sec--ink{background:var(--navy-deep);color:#fff}
.sec--tight{padding-top:clamp(46px,6vh,70px)}
.sec--ink .h2{color:#fff}
.sec--ink .lead{color:rgba(255,255,255,.8)}

/* ── 冒頭のひとこと ───────────────────────────── */
.lede{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(30px,4.6vw,70px);align-items:center}
.lede h2{font-size:clamp(1.45rem,3.3vw,2.5rem);font-weight:700;color:var(--ink);
  line-height:1.62;letter-spacing:.03em}
.lede h2 em{font-style:normal;color:var(--wine);position:relative;white-space:nowrap}
.lede h2 em::after{content:"";position:absolute;left:0;right:0;bottom:.06em;height:.36em;
  background:rgba(185,151,77,.24);z-index:-1}
.lede p{margin-top:24px;font-size:clamp(13.5px,1.05vw,15.5px);line-height:2.25}
.lede__fig{position:relative;overflow:hidden;aspect-ratio:4/3}
.lede__fig img{width:100%;height:106%;object-fit:cover}
@media(max-width:880px){.lede{grid-template-columns:1fr;gap:30px}.lede__fig{order:-1;aspect-ratio:16/10}}

/* ── 番号つきステップ ─────────────────────────── */
.steps{margin-top:clamp(38px,5vh,58px);display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(14px,1.6vw,22px);list-style:none}
.stp{background:#fff;border:1px solid var(--line);padding:clamp(22px,2.3vw,30px);
  display:flex;flex-direction:column;position:relative}
.sec--soft .stp{background:#fff}
.stp__n{font-family:var(--ui);font-size:11px;font-weight:500;letter-spacing:.2em;color:var(--red)}
.stp h3{margin-top:12px;font-size:15px;font-weight:700;color:var(--ink);letter-spacing:.04em;line-height:1.65}
.stp ul{margin-top:16px;list-style:none;display:grid;gap:8px;flex:1}
.stp li{position:relative;padding-left:15px;font-size:12.5px;line-height:1.85;color:var(--body)}
.stp li::before{content:"";position:absolute;left:0;top:.72em;width:5px;height:5px;
  background:var(--red);transform:rotate(45deg)}
.stp p{margin-top:13px;font-size:12.5px;line-height:1.95;color:var(--body);flex:1}
.stp__goal{margin-top:20px;padding:11px 14px;background:var(--soft);
  font-size:12px;line-height:1.75;color:var(--ink)}
.stp__goal b{display:block;font-family:var(--ui);font-size:10px;letter-spacing:.2em;
  color:var(--wine);margin-bottom:5px}
@media(max-width:980px){.steps{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.steps{grid-template-columns:1fr}}

/* ── カード一覧 ──────────────────────────────── */
.cards{margin-top:clamp(34px,4.6vh,54px);display:grid;gap:1px;background:var(--line);
  border:1px solid var(--line);grid-template-columns:repeat(4,1fr)}
.cards--3{grid-template-columns:repeat(3,1fr)}
.cards--2{grid-template-columns:repeat(2,1fr)}
.cards--5{grid-template-columns:repeat(5,1fr)}
.card{background:#fff;padding:clamp(24px,2.6vw,34px);display:flex;flex-direction:column}
.card b{font-family:var(--ui);font-size:11px;font-weight:500;letter-spacing:.2em;color:var(--red)}
.card h3{margin-top:13px;font-size:15px;font-weight:700;color:var(--ink);letter-spacing:.04em;line-height:1.65}
.card p{margin-top:12px;font-size:12.5px;line-height:1.95;color:var(--body)}
@media(max-width:980px){.cards,.cards--3,.cards--5{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.cards,.cards--3,.cards--2,.cards--5{grid-template-columns:1fr}}

/* ── 対になる2枚（紺／金） ─────────────────────── */
.duo{margin-top:clamp(34px,4.6vh,54px);display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(18px,2.2vw,30px);align-items:stretch}
.duo__x{display:none}
.dpanel{padding:clamp(26px,3vw,40px);color:#fff;display:flex;flex-direction:column}
.dpanel--navy{background:var(--wine)}
.dpanel--gold{background:#8E7130}
.dpanel__n{font-family:var(--en);font-size:clamp(1.6rem,3vw,2.2rem);line-height:1;color:rgba(255,255,255,.5)}
.dpanel h3{margin-top:10px;font-size:clamp(1.05rem,2vw,1.4rem);font-weight:700;letter-spacing:.05em}
.dpanel > small{display:block;margin-top:10px;font-size:12.5px;letter-spacing:.06em;color:rgba(255,255,255,.72)}
.dpanel ul{margin-top:24px;list-style:none;display:grid;gap:16px;flex:1}
.dpanel li strong{display:block;font-size:14px;font-weight:700;letter-spacing:.04em}
.dpanel li span{display:block;margin-top:5px;font-size:12px;line-height:1.8;color:rgba(255,255,255,.74)}
.dpanel__f{margin-top:26px;padding-top:18px;border-top:1px solid rgba(255,255,255,.24);
  font-size:12.5px;line-height:1.8;color:rgba(255,255,255,.9)}
@media(max-width:820px){.duo{grid-template-columns:1fr}}

/* ── チェック一覧 ────────────────────────────── */
.checks{list-style:none;display:grid;gap:11px}
.checks li{position:relative;padding-left:28px;font-size:13.5px;line-height:1.95}
.checks li::before{content:"";position:absolute;left:0;top:.42em;width:16px;height:9px;
  border-left:1.6px solid var(--red);border-bottom:1.6px solid var(--red);transform:rotate(-45deg)}
.checks--2{grid-template-columns:1fr 1fr;gap:11px clamp(20px,3vw,44px)}
@media(max-width:700px){.checks--2{grid-template-columns:1fr}}

/* ── タグ ───────────────────────────────────── */
.chips{margin-top:26px;display:flex;flex-wrap:wrap;gap:9px}
.chips span{border:1px solid var(--line);padding:9px 16px;font-size:12.5px;
  letter-spacing:.05em;color:var(--ink);background:#fff}
.sec--ink .chips span{border-color:rgba(255,255,255,.24);background:transparent;color:rgba(255,255,255,.88)}

/* ── 主張の帯 ────────────────────────────────── */
.band{position:relative;overflow:hidden;background:var(--navy-deep);color:#fff;
  padding:clamp(58px,8.5vh,96px) 0;text-align:center}
.band__bg{position:absolute;inset:0;z-index:0;opacity:.2}
.band__bg img{width:100%;height:112%;object-fit:cover;filter:grayscale(.3)}
.band .wrap{position:relative;z-index:2}
.band b{display:block;font-size:clamp(1.05rem,2.6vw,1.75rem);font-weight:700;
  letter-spacing:.06em;line-height:1.75}
.band p{margin-top:16px;font-size:13.5px;line-height:2.05;color:rgba(255,255,255,.76);
  max-width:36em;margin-inline:auto}

/* ── 循環（3ノード） ─────────────────────────── */
.cycle{margin-top:clamp(32px,4.4vh,50px);display:flex;align-items:center;justify-content:center;
  gap:clamp(10px,2vw,26px);flex-wrap:wrap}
.cycle span{border:1px solid var(--red);color:#fff;padding:15px 24px;font-size:13.5px;
  font-weight:700;letter-spacing:.06em}
.cycle i{font-style:normal;color:var(--red);font-size:17px}

/* ── 写真＋本文 ──────────────────────────────── */
.split{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;min-height:min(72vh,560px)}
.split__fig{position:relative;overflow:hidden;background:var(--navy-deep)}
.split__fig img{position:absolute;inset:0;width:100%;height:107%;object-fit:cover}
.split__txt{padding:clamp(46px,7vh,92px) clamp(24px,4vw,68px);
  display:flex;flex-direction:column;justify-content:center}
.split__txt h2{font-size:clamp(1.25rem,2.7vw,2rem);font-weight:700;color:var(--ink);line-height:1.68;letter-spacing:.03em}
.split__txt p{margin-top:22px;font-size:clamp(13.5px,1.03vw,15px);line-height:2.25;max-width:31em}
.split--rev .split__fig{order:2}
@media(max-width:900px){
  .split,.split--rev{grid-template-columns:1fr}
  .split__fig,.split--rev .split__fig{min-height:46vh;order:0}
}

/* ── 読み物（フリーランスの物語） ───────────────── */
.tale{max-width:31em;margin-inline:auto}
.tale p{margin-top:22px;font-size:clamp(14px,1.08vw,15.5px);line-height:2.4;color:var(--body)}
.tale p.q{margin-top:34px;font-size:clamp(1.05rem,2.3vw,1.5rem);font-weight:700;color:var(--ink);
  line-height:1.85;letter-spacing:.04em}
.tale p.said{color:var(--muted);font-size:14px}
.tale hr{margin:clamp(36px,5vh,56px) auto;width:70px;height:1px;background:var(--line);border:0}
.tale strong{color:var(--ink);font-weight:700}

/* ── 募集職種 ────────────────────────────────── */
.jobs{margin-top:clamp(34px,4.6vh,54px);display:grid;gap:clamp(16px,2vw,24px);
  grid-template-columns:repeat(3,1fr)}
.job{border:1px solid var(--line);background:#fff;padding:clamp(24px,2.7vw,34px);
  display:flex;flex-direction:column;transition:border-color .5s var(--ease),transform .5s var(--ease)}
.job:hover{border-color:var(--wine);transform:translateY(-6px)}
.job__en{font-family:var(--ui);font-size:10.5px;font-weight:500;letter-spacing:.2em;color:var(--red)}
.job h3{margin-top:12px;font-size:16px;font-weight:700;color:var(--ink);letter-spacing:.04em;line-height:1.6}
.job p{margin-top:14px;font-size:13px;line-height:2;flex:1}
.job__tags{margin-top:18px;display:flex;flex-wrap:wrap;gap:7px}
.job__tags i{font-style:normal;font-size:11px;letter-spacing:.05em;color:var(--wine);
  background:var(--soft);padding:5px 11px}
@media(max-width:980px){.jobs{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.jobs{grid-template-columns:1fr}}

/* ── 定義リスト（募集要項） ───────────────────── */
.terms{margin-top:clamp(30px,4vh,46px);border-top:1px solid var(--line)}
.terms > div{display:grid;grid-template-columns:10em 1fr;gap:22px;padding:20px 0;
  border-bottom:1px solid var(--line);align-items:baseline}
.terms dt{font-size:13px;font-weight:700;color:var(--ink);letter-spacing:.1em}
.terms dd{font-size:14px;line-height:2.05}
@media(max-width:760px){.terms > div{grid-template-columns:1fr;gap:6px}}