/* jig_style.css (CLEAN) — jig pages content-only - Header/menu styles removed (handled by tp_style.css) - Hero size tightened - Card/grid image sizes controlled with clamp (machintools-like) - Keeps optional hero overlay effects minimal Usage: 1) (recommended) 2) Load order: tp_style.css -> jig_style.css -> jig_ap.css(optional) ; tp_style.js */ /* Base */ :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)); } /* Links in content only (avoid global !important rules that break header) */ .jig-page main a, .jig-page main a:visited{ color:#fff; text-decoration:none; } /* Hero & content */ html{ scroll-padding-top: var(--navH, 72px) } @media (max-width:960px){ html{ scroll-padding-top: var(--navH-small, 56px) } } .jig-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/jigdesign01.webp') center/cover no-repeat; border-bottom:1px solid rgba(255,255,255,.12); } @media (max-width:960px){ .jig-page .hero{ padding-top: calc(var(--navH-small, 56px) + 14px); min-height: 28svh; } } .jig-page .hero .title{ margin:0; font-size: clamp(20px, 3.2vw, 34px); font-weight:900; } .jig-page .hero .lead{ margin:.35em 0 0; color:var(--muted); font-size:14px; } /* Optional: subtle overlay (keep light to avoid “too dark”) */ .jig-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; } .jig-page .hero > *{ position:relative; z-index:1; } /* Section / grid / cards */ .jig-page .section{ max-width:min(1100px, 92vw); margin: clamp(18px, 4vw, 46px) auto; } .jig-page .grid{ display:grid; gap:14px; grid-template-columns: repeat(5, 1fr); } @media (max-width:1160px){ .jig-page .grid{ grid-template-columns: repeat(3, 1fr) } } @media (max-width:760px){ .jig-page .grid{ grid-template-columns: repeat(1, 1fr) } } .jig-page .card{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.15); border-radius:16px; overflow:hidden; box-shadow:var(--shadow); } .jig-page .card > a{ display:block; } /* Cancel any grid spanning from shared styles */ .jig-page .grid .card{ grid-column:auto; } .jig-page .card img{ width:100%; height:auto; display:block; } /* machintools-like image scale */ .jig-page .grid .card img{ height: clamp(110px, 9vw, 150px); object-fit: cover; display:block; } .jig-page .card-body{ padding:12px; } .jig-page .card-title{ font-weight:800; margin:0 0 6px; font-size:14px; } .jig-page .card-more{ opacity:.9; font-weight:800; font-size:12px; } /* Footer */ .jig-page footer{ color:#9fb0c0; text-align:center; padding:40px 12px 60px; } .jig-page footer .copyright{ font-size:10px; color:#ffffff; margin:10px 0; } /* Standalone PNGs inside content (if any) */ .jig-page .section img:not([width]){ width: min(920px, 92vw); max-width:100%; height:auto; display:block; margin: 0 auto; }