/* =============================================================
   HANNARI 採用LP v2 ｜ components.css
   巨大文字・縦書きタグ・全面写真・数字。文字は最小、絵と面で語る。
   ============================================================= */

/* ---- 巨大文字（読ませない・面として見せる） ---- */
.mega{
  font-family:var(--ff-disp);font-weight:700;
  font-size:var(--fs-mega);line-height:.94;letter-spacing:-.05em;
  color:var(--c-ink);
}
.huge{
  font-family:var(--ff-disp);font-weight:700;
  font-size:var(--fs-huge);line-height:1.14;letter-spacing:-.035em;
}
.h-main{font-size:var(--fs-h);line-height:1.4;letter-spacing:-.01em;}

/* はみ出させて“紙面”をつくる */
.bleed-l{margin-left:calc(var(--sp-gut) * -1);}
.bleed-r{margin-right:calc(var(--sp-gut) * -1);}

/* ---- 章の見出し（番号＋一言） ---- */
.ch{position:relative;}
.ch__no{
  font-family:var(--ff-en);font-weight:600;
  font-size:clamp(74px,26vw,132px);line-height:.78;letter-spacing:-.03em;
  color:rgba(255,255,255,.22);
}
.blk--cream .ch__no,.blk--cream2 .ch__no{color:rgba(35,32,27,.10);}
.ch__label{
  font-family:var(--ff-body);font-size:10.5px;font-weight:700;letter-spacing:.24em;
  opacity:.7;margin-bottom:10px;
}
.ch__t{
  font-family:var(--ff-disp);font-weight:700;
  font-size:clamp(30px,9.2vw,44px);line-height:1.35;letter-spacing:-.02em;
  margin-top:-18px;
}
.ch__note{margin-top:18px;font-size:14px;line-height:1.95;max-width:30em;}

/* ---- 縦書きタグ（写真の端に重ねる） ---- */
.vtags{position:absolute;top:0;right:0;z-index:3;display:flex;gap:7px;}
.vtag{
  writing-mode:vertical-rl;
  font-family:var(--ff-disp);font-weight:700;
  font-size:12.5px;letter-spacing:.16em;line-height:1.7;
  padding:16px 5px;color:#fff;
}
.vtag--clay{background:var(--c-clay);}
.vtag--ink{background:var(--c-ink);}
.vtag--sage{background:var(--c-sage);}
.vtag--gold{background:var(--c-gold);}

/* ---- 写真 ---- */
.shot{position:relative;margin:0;}
.shot img{width:100%;object-fit:cover;}
.shot--v{aspect-ratio:3/4;}
.shot--h{aspect-ratio:4/3;}
.shot--w{aspect-ratio:16/9;}
/* 角丸は写真そのものに掛ける（overflow:hidden にすると縦タグが切れるため使わない） */
.shot--round{border-top-right-radius:70px;}
.shot--round img{border-top-right-radius:70px;}
.shot--round-l{border-top-left-radius:70px;}
.shot--round-l img{border-top-left-radius:70px;}
/* 実写が入るまでの枠 */
.shot--ph{
  display:flex;align-items:center;justify-content:center;
  background:repeating-linear-gradient(45deg,#e6ddca 0 14px,#ded4be 14px 28px);
}
/* 直下の span だけ。縦タグ・チップまで巻き込まないこと */
.shot--ph > span{
  font-size:10.5px;letter-spacing:.08em;color:#8a7c5f;
  background:rgba(244,239,227,.92);border-radius:100px;padding:6px 14px;text-align:center;
}
.shot__cap{
  position:absolute;left:14px;bottom:14px;z-index:2;
  display:flex;flex-direction:column;gap:5px;align-items:flex-start;
}
.chip{
  font-size:10.5px;font-weight:700;letter-spacing:.04em;
  background:rgba(244,239,227,.94);color:var(--c-ink);
  border:1px solid var(--c-ink);padding:4px 10px;
}

/* ---- 一言リード（中央・短く） ---- */
.say{
  font-family:var(--ff-mincho);font-weight:700;
  font-size:clamp(19px,5.6vw,25px);line-height:1.95;
  text-align:center;color:var(--c-ink);
}
.blk--ink .say,.blk--clay .say,.blk--sage .say,.blk--gold .say{color:#fff;}
.say--sm{font-size:clamp(16px,4.6vw,19px);}

/* ---- 会社がやること（単語だけ） ---- */
.words{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(255,255,255,.22);margin-top:30px;}
.words li{
  background:var(--c-ink);
  padding:26px 12px;text-align:center;
}
.words b{display:block;font-family:var(--ff-disp);font-size:20px;font-weight:700;color:#fff;letter-spacing:.06em;}
.words small{display:block;font-size:10.5px;color:#a89e8d;margin-top:7px;letter-spacing:.04em;}

/* ---- 歩合の数字 ---- */
.rates{display:flex;align-items:flex-end;justify-content:center;gap:4px;margin:6px 0 4px;}
.rate{
  font-family:var(--ff-en);font-weight:600;
  font-size:clamp(44px,15vw,76px);line-height:.9;letter-spacing:-.03em;color:var(--c-ink);
}
.rate--dim{color:var(--c-gold);}
.rate__sep{font-size:22px;color:var(--c-mute);padding-bottom:8px;}
.rate__pct{font-family:var(--ff-en);font-size:24px;color:var(--c-ink);padding-bottom:6px;}

/* ---- 収入の3段（横に流す・文字は最小） ---- */
.route{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:26px;}
.route li{background:var(--c-cream);border:1px solid var(--c-line);padding:16px 10px;text-align:center;}
.route b{display:block;font-family:var(--ff-disp);font-size:14px;color:var(--c-ink);line-height:1.5;margin-bottom:6px;}
.route small{font-size:10.5px;color:var(--c-mute);line-height:1.6;display:block;}
.route li::before{
  content:attr(data-n);display:block;font-family:var(--ff-en);font-size:13px;
  color:var(--c-clay);margin-bottom:8px;letter-spacing:.06em;
}

/* ---- シミュレーター ---- */
.sim{background:var(--c-cream);border:1px solid var(--c-line);padding:22px 18px 18px;margin-top:26px;}
.sim__h{font-family:var(--ff-disp);font-weight:700;font-size:15px;color:var(--c-ink);margin-bottom:18px;letter-spacing:.02em;}
.sim__row{margin-bottom:18px;}
.sim__row > label{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;color:var(--c-body);margin-bottom:9px;}
.sim__row output{font-family:var(--ff-en);font-size:20px;color:var(--c-clay);font-weight:600;}
.sim__row output + small{font-size:11px;margin-left:2px;color:var(--c-mute);}
.sim__row input[type=range]{width:100%;accent-color:var(--c-clay);height:6px;cursor:pointer;}
.sim__seg{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;}
.sim__seg input{position:absolute;opacity:0;pointer-events:none;}
.sim__seg label{
  display:block;text-align:center;border:1px solid var(--c-line);
  padding:11px 4px;font-family:var(--ff-en);font-size:16px;font-weight:600;
  color:var(--c-ink);background:#fff;cursor:pointer;transition:background .2s var(--ease),color .2s var(--ease);
}
.sim__seg label small{display:block;font-family:var(--ff-body);font-weight:400;font-size:9px;color:var(--c-mute);margin-top:4px;line-height:1.45;}
.sim__seg input:checked + label{background:var(--c-clay);color:#fff;border-color:var(--c-clay);}
.sim__seg input:checked + label small{color:rgba(255,255,255,.8);}
.sim__seg input:focus-visible + label{outline:2px solid var(--c-clay);outline-offset:2px;}
.sim__out{background:var(--c-ink);padding:18px;margin:6px 0 12px;display:flex;justify-content:space-between;align-items:baseline;gap:10px;}
.sim__out span{font-size:11.5px;color:#a89e8d;line-height:1.6;}
.sim__out b{font-family:var(--ff-en);font-size:36px;font-weight:600;color:var(--c-gold-l);line-height:1;}
.sim__out b small{font-size:12px;color:#a89e8d;margin-left:3px;font-family:var(--ff-body);}
.sim__note{font-size:10.5px;line-height:1.8;color:var(--c-mute);}

/* ---- 合う・合わない ---- */
.fit{display:grid;gap:1px;background:var(--c-line);margin-top:8px;}
.fit__col{background:var(--c-cream);padding:22px 18px;}
.fit__col--no{background:var(--c-cream-2);}
.fit__h{font-family:var(--ff-disp);font-size:13px;font-weight:700;letter-spacing:.14em;margin-bottom:14px;color:var(--c-clay);}
.fit__col--no .fit__h{color:var(--c-mute);}
.fit__col li{font-size:14.5px;font-family:var(--ff-disp);font-weight:500;color:var(--c-ink);line-height:1.75;}
.fit__col li + li{margin-top:11px;}
.fit__col--no li{color:var(--c-mute);font-weight:400;}

/* ---- 折りたたみ（読みたい人だけ／条件・FAQ） ---- */
.fold{border-top:1px solid var(--c-line);}
.fold details{border-bottom:1px solid var(--c-line);}
.fold summary{
  list-style:none;cursor:pointer;position:relative;
  padding:16px 30px 16px 0;
  font-family:var(--ff-disp);font-size:14px;font-weight:700;color:var(--c-ink);line-height:1.65;
}
.fold summary::-webkit-details-marker{display:none;}
.fold summary::after{
  content:"";position:absolute;right:6px;top:24px;width:9px;height:9px;
  border-right:1.5px solid var(--c-clay);border-bottom:1.5px solid var(--c-clay);
  transform:rotate(45deg);transition:transform .3s var(--ease);
}
.fold details[open] summary::after{transform:rotate(-135deg);}
.fold__body{padding:0 2px 18px;font-size:13px;line-height:1.95;color:var(--c-body);}

/* 募集要項の定義リスト */
.req{border-top:1px solid var(--c-line);}
.req > div{display:grid;grid-template-columns:82px 1fr;gap:12px;padding:13px 2px;border-bottom:1px solid var(--c-line);}
.req dt{font-family:var(--ff-disp);font-size:11.5px;font-weight:700;color:var(--c-clay);line-height:1.8;}
.req dd{font-size:12.5px;line-height:1.85;}
.req dd small{display:block;font-size:10.5px;color:var(--c-mute);margin-top:4px;line-height:1.7;}

/* ---- 応募の流れ ---- */
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-top:24px;}
.flow li{background:rgba(255,255,255,.10);padding:14px 4px;text-align:center;font-size:11px;line-height:1.55;color:#fff;}
.flow b{display:block;font-family:var(--ff-en);font-size:15px;color:var(--c-gold-l);margin-bottom:5px;}

/* ---- CTA ---- */
.cta{display:grid;gap:10px;margin-top:30px;}
.cta a{
  display:block;padding:17px 12px;text-align:center;
  font-family:var(--ff-disp);font-size:15px;font-weight:700;letter-spacing:.03em;
  transition:transform .2s var(--ease);
}
.cta a small{display:block;font-family:var(--ff-body);font-weight:400;font-size:11px;margin-top:4px;opacity:.8;}
.cta__1{background:var(--c-clay);color:#fff;}
.cta__2{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.4);}
@media (hover:hover){.cta a:hover{transform:translateY(-2px);}}

.fine{font-size:10.5px;line-height:1.85;color:var(--c-mute);margin-top:16px;}
.blk--ink .fine,.blk--clay .fine,.blk--sage .fine,.blk--gold .fine{color:rgba(255,255,255,.62);}