/* rec_style.css (CLEAN) — recruit pages content-only - Header/menu styles removed (handled by tp_style.css + tp_style.js) - Hero height tightened - Grid/card image sizing controlled with clamp (machintools-like) - Avoids global a{...!important} that breaks header themes Usage (recommended): Load order: /tp_style.css -> rec_style.css -> rec_color_ap_crisp.css(optional) JS: /tp_style.js */ /* Base (content only) */ :root{ --txt:#e9eef6; --muted:#a9b3c3; --shadow: 0 10px 30px rgba(0,0,0,.35); --bg1:#0b1020; --bg2:#0f1b36; } *{ box-sizing:border-box; } html,body{ height:100%; } body{ margin:0; color:var(--txt); background: linear-gradient(180deg, var(--bg1), var(--bg2)); } /* Content link rules only (do NOT touch header links) */ .rec-page main a, .rec-page main a:visited{ color:#fff; text-decoration:none; } .rec-page main a:hover{ opacity:.92; } /* Offset anchor scroll under fixed nav */ html{ scroll-padding-top: var(--navH, 72px); } @media (max-width:960px){ html{ scroll-padding-top: var(--navH-small, 56px); } } /* Hero */ .rec-page .hero{ padding-top: calc(var(--navH, 72px) + 18px); padding-bottom: 18px; min-height: 34svh; display:grid; place-items:center; position:relative; overflow:hidden; background: linear-gradient(180deg, rgba(15,27,54,.70), rgba(15,27,54,.20)), url('https://www.nikko-kikai.co.jp/img/recruit00.webp') center/cover no-repeat; border-bottom: 1px solid rgba(255,255,255,.12); } @media (max-width:960px){ .rec-page .hero{ padding-top: calc(var(--navH-small, 56px) + 14px); min-height: 28svh; } } .rec-page .hero .title{ margin:0; font-size: clamp(20px, 3.2vw, 34px); font-weight: 900; } .rec-page .hero .lead{ margin:.35em 0 0; color: var(--muted); font-size: 14px; } /* Optional: subtle vignette (keep light) */ .rec-page .hero::after{ content:""; position:absolute; inset:0; background: radial-gradient(120% 80% at 50% -10%, rgba(0,0,0,0) 0%, rgba(0,0,0,.18) 60%, rgba(0,0,0,.32) 100%); pointer-events:none; } .rec-page .hero > *{ position:relative; z-index:1; } /* Section / grid / cards */ .rec-page .section{ max-width: min(1100px, 92vw); margin: clamp(18px, 4vw, 46px) auto; } /* Recruit: 2 cards centered */ .rec-page .section > .grid{ display:flex; justify-content:center; align-items:stretch; gap:24px; flex-wrap:wrap; } /* Card */ .rec-page .card{ width: clamp(280px, 36vw, 360px); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.15); border-radius: 16px; overflow:hidden; box-shadow: var(--shadow); display:flex; flex-direction:column; } .rec-page .card > a{ display:block; } /* Images (machintools-like) */ .rec-page .card img{ width: 100%; height: clamp(140px, 14vw, 220px); object-fit: cover; display:block; } /* Body */ .rec-page .card-body{ padding: 12px 14px; display:flex; flex-direction:column; gap:6px; } .rec-page .card-title{ margin:0; font-weight: 800; font-size: 14px; } .rec-page .card-more{ opacity:.9; font-weight: 800; font-size: 12px; } /* Mobile */ @media (max-width: 760px){ .rec-page .card{ width: min(92vw, 360px); } } /* Footer */ .rec-page footer{ color:#9fb0c0; text-align:center; padding:40px 12px 60px; } .rec-page footer .copyright{ font-size:10px; color:#fff; margin:10px 0; }