/* news 記事・一覧ページ用スタイル（service.css の変数を継承） */

/* ---- 記事ページ ---- */
.art-head{padding:8.5rem 0 2.5rem}
.art-head .wrap{max-width:860px}
.crumb-line{display:flex;gap:.6rem;font-size:.68rem;letter-spacing:.16em;color:var(--muted);text-transform:uppercase;margin-bottom:2.2rem}
.crumb-line a{color:var(--muted);text-decoration:none}
.crumb-line a:hover{color:var(--accent)}
.art-meta{display:flex;align-items:center;gap:1rem;margin-bottom:1.4rem}
.art-meta time{font-size:.85rem;letter-spacing:.14em;color:var(--accent)}
.chip{display:inline-block;font-size:.66rem;letter-spacing:.18em;padding:.32em 1em;border:1px solid var(--line);border-radius:999px;color:#cfcfcf;text-decoration:none;text-transform:uppercase}
a.chip:hover{border-color:var(--accent);color:var(--accent)}
.art-head h1{font-size:clamp(1.35rem,3.2vw,2.1rem);font-weight:800;line-height:1.5;letter-spacing:.01em}

.cover{max-width:860px;margin:0 auto;padding:0 24px}
.cover img{width:100%;height:auto;border-radius:6px;border:1px solid var(--line)}

.prose{max-width:860px;margin:0 auto;padding:2.6rem 24px 1rem;font-size:.95rem;line-height:2.1;color:#c9c9c9}
.prose p{margin:1.3em 0}
.prose strong{color:#fff;font-weight:700}
.prose a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;word-break:break-all}
.prose img{max-width:100%;height:auto;border-radius:6px;border:1px solid var(--line);margin:1.4em 0}
.prose h2{font-size:1.25rem;font-weight:800;color:#fff;margin:2.4em 0 1em;padding-bottom:.55em;border-bottom:1px solid var(--line)}
.prose h3{font-size:1.05rem;font-weight:700;color:#fff;margin:2em 0 .8em}
.prose ul,.prose ol{margin:1.3em 0;padding-left:1.6em}
.prose blockquote{margin:1.6em 0;padding:1em 1.4em;border:1px solid var(--line);border-radius:6px;color:#a8a8a8}

.art-nav{max-width:860px;margin:0 auto;padding:2.5rem 24px 7rem}
.back-btn{display:inline-flex;align-items:center;gap:.7em;font-size:.82rem;letter-spacing:.2em;color:#fff;text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:.9em 2em;transition:.3s}
.back-btn:hover{border-color:var(--accent);color:var(--accent)}
.back-btn .arw{color:var(--accent)}

/* ---- 一覧ページ ---- */
.list-head{padding:9rem 0 2rem}
.list-head .kicker{font-size:.75rem;letter-spacing:.34em;color:var(--accent);text-transform:uppercase;margin-bottom:1.2rem}
.list-head h1{font-size:clamp(2rem,6vw,3.6rem);font-weight:800;letter-spacing:-.02em}
.cat-tabs{display:flex;gap:.7rem;margin-top:2.2rem;flex-wrap:wrap}
.cat-tabs a{font-size:.74rem;letter-spacing:.16em;padding:.6em 1.6em;border:1px solid var(--line);border-radius:999px;color:#cfcfcf;text-decoration:none;transition:.3s}
.cat-tabs a:hover{border-color:var(--accent);color:var(--accent)}
.cat-tabs a.on{background:var(--accent);border-color:var(--accent);color:#000;font-weight:700}

.list-body{padding:2.5rem 0 8rem}
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem 1.6rem}
@media(max-width:960px){.news-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.news-grid{grid-template-columns:1fr}}
.ncard{display:block;text-decoration:none;color:inherit;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#050505;transition:.35s}
.ncard:hover{border-color:var(--accent);transform:translateY(-4px)}
.ncard .thumb{aspect-ratio:16/10;background-size:cover;background-position:center;background-color:#0b0b0b;position:relative}
.ncard .thumb.noimg::after{content:"IMMERSIVE LAB";position:absolute;inset:0;display:grid;place-items:center;font-size:.7rem;letter-spacing:.34em;color:#2c2c2c}
.ncard .body{padding:1.1rem 1.2rem 1.4rem}
.ncard .meta{display:flex;align-items:center;gap:.8rem;margin-bottom:.7rem}
.ncard .meta time{font-size:.72rem;letter-spacing:.14em;color:var(--accent)}
.ncard h3{font-size:.88rem;font-weight:700;line-height:1.75;color:#e8e8e8;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* ---- portfolio ---- */
.pf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem 1.6rem;margin-top:1rem}
@media(max-width:960px){.pf-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.pf-grid{grid-template-columns:1fr}}
.pfcard{display:block;text-decoration:none;color:inherit;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#050505;transition:.35s}
a.pfcard:hover{border-color:var(--accent);transform:translateY(-4px)}
.pfcard .thumb{aspect-ratio:16/10;background-size:cover;background-position:center;background-color:#0b0b0b;position:relative}
.pfcard .thumb.noimg::after{content:"IMMERSIVE LAB";position:absolute;inset:0;display:grid;place-items:center;font-size:.7rem;letter-spacing:.34em;color:#2c2c2c}
.pf-live{position:absolute;top:.8rem;left:.8rem;background:var(--accent);color:#000;font-size:.62rem;font-weight:700;letter-spacing:.16em;padding:.35em 1em;border-radius:999px}
.pfcard .body{padding:1.1rem 1.2rem 1.3rem}
.pfcard .meta{display:flex;align-items:center;gap:.9rem;margin-bottom:.6rem}
.pf-cat{font-size:.64rem;letter-spacing:.14em;color:var(--accent)}
.pf-region{font-size:.64rem;letter-spacing:.14em;color:var(--muted)}
.pfcard h3{font-size:.95rem;font-weight:700;line-height:1.7;color:#e8e8e8}

/* ---- 共通 ---- */
.s-hero.compact{min-height:52vh}
@media(max-width:700px){.s-hero.compact{min-height:46vh}}