/* 見本（手元だけ）：お知らせの一覧と記事のページ。色はトップと同じ（ガンバ大阪の公式サイトの青と黒） */
:root{--blue:#003287;--navy:#001E51;--ink:#191919;--gold:#AA8532;--mist:#C9D4E8;--line:rgb(255 255 255 / .16);
  --font-display:"Anton","Zen Kaku Gothic New",sans-serif;--font-serif:"Shippori Mincho",serif;--font-sans:"Zen Kaku Gothic New",system-ui,sans-serif;--gutter:max(20px,2.08vw)}
*{box-sizing:border-box;margin:0;padding:0}
html{background:#000;color:#fff}
body{font-family:var(--font-sans);background:#000;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit}
.demo-note{background:var(--gold);color:#000;font:500 12px/1.4 var(--font-sans);text-align:center;padding:4px 8px}
.bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px var(--gutter);border-bottom:1px solid var(--line);background:linear-gradient(90deg,var(--navy),#000)}
.brand{display:flex;align-items:center;min-height:44px;gap:.6em;text-decoration:none}
.brand b{font:400 max(22px,1.6vw)/1 var(--font-display);letter-spacing:.04em;white-space:nowrap}
.brand small{font:500 12px/1 var(--font-sans);color:var(--mist)}
.bar nav{display:flex;gap:max(14px,1.8vw);align-items:center}
.bar nav a{font:500 15px/1 var(--font-sans);text-decoration:none;min-height:44px;display:inline-flex;align-items:center;opacity:.88}
.bar .cta{background:#fff;color:var(--blue);border-radius:999px;padding:0 1.1em;opacity:1;font-weight:700;white-space:nowrap}
.wrap{max-width:1180px;margin:0 auto;padding:max(40px,5vw) var(--gutter) max(64px,6vw)}
.eyebrow{font:400 max(44px,5.4vw)/.9 var(--font-display);color:var(--blue);-webkit-text-stroke:1px #2b5fc7}
.h1{font:700 max(24px,2.2vw)/1.45 var(--font-serif);margin:.5em 0 1em;text-wrap:balance}
.count{font:500 .55em/1 var(--font-sans);color:var(--mist);vertical-align:middle}
.ngrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gutter)}
.ncard{display:flex;flex-direction:column;text-decoration:none;background:#0b0f19;border:1px solid var(--line);border-radius:18px;overflow:hidden;transition:border-color .2s}
.ncard:hover{border-color:#3f6fd6}
.ncard figure{aspect-ratio:4/3;background:var(--navy);overflow:hidden;display:grid;place-items:center}
.ncard img{width:100%;height:100%;object-fit:cover;display:block}
.noimg{font:400 64px/1 var(--font-display);color:#2b5fc7}
.meta{display:flex;flex-wrap:wrap;align-items:center;gap:.5em;padding:14px 16px 0}
.meta time{font:500 13px/1 var(--font-sans);color:var(--mist);font-variant-numeric:tabular-nums}
.tag{font:700 11px/1 var(--font-sans);background:var(--blue);color:#fff;border-radius:999px;padding:.4em .8em}
.ncard h2,.ncard h3{font:700 16px/1.55 var(--font-sans);padding:8px 16px 18px}
.article{max-width:820px}
.article .meta{padding:0;margin-top:1.4em}
.back{display:inline-flex;min-height:44px;align-items:center;color:var(--mist);font:500 14px/1 var(--font-sans);text-decoration:none}
.aimg{margin:0 0 1.2em;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:var(--navy)}
.aimg img{width:100%;height:auto;display:block}
.abody p{font:400 16px/1.95 var(--font-sans);color:#e8edf7;margin:0 0 .4em;overflow-wrap:anywhere}
.abody a{color:#9db8ff;text-underline-offset:3px}
.pn{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center;margin-top:2.4em;padding-top:1.4em;border-top:1px solid var(--line)}
.pn a{font:500 14px/1.5 var(--font-sans);text-decoration:none;min-height:44px;display:flex;align-items:center}
.pn a:last-child{justify-content:flex-end;text-align:right}
.pn .all{background:var(--blue);border-radius:999px;padding:0 1.2em;justify-content:center;white-space:nowrap}
.foot{border-top:4px solid var(--blue);padding:max(40px,4vw) var(--gutter) 40px}
.foot .big{font:400 max(40px,4.4vw)/.9 var(--font-display)}
.foot .legal{margin-top:1.2em;font:400 12px/1.6 var(--font-sans);color:#8e9ab3}

.narrow{max-width:760px}
.intro{font:400 15px/1.9 var(--font-sans);color:#dfe6f3;margin-bottom:1.6em}
.talent{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--gutter);align-items:start;padding:var(--gutter) 0;border-top:1px solid var(--line)}
.talent figure{border-radius:18px;overflow:hidden;border:1px solid var(--line);background:var(--navy)}
.talent img{width:100%;height:auto;display:block}
.talent h2{font:700 max(22px,2vw)/1.3 var(--font-serif)}
.talent .lead{font:500 14px/1.7 var(--font-sans);color:var(--mist);margin:.5em 0 1em}
.talent p{font:400 15px/1.9 var(--font-sans);color:#e8edf7;margin-bottom:.6em}
.snsrow{display:flex;flex-wrap:wrap;gap:8px;margin-top:1em}
.sns{display:inline-flex;align-items:center;min-height:44px;padding:0 1.1em;border-radius:999px;border:1px solid #3f6fd6;text-decoration:none;font:700 14px/1 var(--font-sans)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 1.8em;border-radius:999px;background:var(--blue);color:#fff;border:1px solid rgb(255 255 255 / .25);font:700 16px/1 var(--font-sans);text-decoration:none;cursor:pointer}
.ctaline{text-align:center;margin-top:2em}
.form{display:grid;gap:1.1em}
.form label{display:flex;flex-wrap:wrap;align-items:center;gap:.45em .2em;font:700 15px/1.4 var(--font-sans)}
.form label>input:not([type=checkbox]),.form label>textarea,.form label>select{flex:1 1 100%;min-width:0;width:100%;max-width:100%}
.req{display:inline-block;margin-left:.6em;font:700 11px/1 var(--font-sans);background:var(--gold);color:#000;border-radius:999px;padding:.35em .7em;vertical-align:middle}
.form input,.form textarea,.form select{font:400 16px/1.5 var(--font-sans);color:#fff;background:#0b0f19;border:1px solid #3a4a6b;border-radius:12px;padding:.8em 1em;min-height:48px}
.form input:focus,.form textarea:focus,.form select:focus{outline:2px solid #6f95ff;outline-offset:1px}
.form .agree{display:flex;align-items:center;gap:.7em;font-weight:500;min-height:44px}
.form .agree input{width:22px;height:22px;min-height:0}
.form .agree a{color:#9db8ff}
.done{background:#0b2a63;border:1px solid #3f6fd6;border-radius:12px;padding:1em;font:500 14px/1.7 var(--font-sans)}
.mail{margin-top:1em;background:#fff;color:#191919;border-radius:10px;padding:1em 1.2em;font:400 14px/1.8 var(--font-sans)}
.mail p{margin-bottom:.7em}
.mail .subj{font-weight:700;border-bottom:1px solid #ddd;padding-bottom:.6em}
.mail .echo{white-space:pre-wrap;color:#444}
.handover{margin-top:2.4em;border:1.5px dashed rgb(255 255 255 / .35);border-radius:16px;padding:1.2em 1.4em}
.handover h2{font:700 16px/1.5 var(--font-sans);margin-bottom:.6em}
.handover li{font:400 14px/1.8 var(--font-sans);color:#dfe6f3;margin-left:1.2em}
.pp h2{font:700 17px/1.5 var(--font-sans);margin:1.4em 0 .4em}
.pp p{font:400 15px/1.9 var(--font-sans);color:#e8edf7}
.foot .links{display:flex;flex-wrap:wrap;gap:4px 18px;margin-top:1.2em}
.foot .links a{min-height:44px;display:inline-flex;align-items:center;font:500 14px/1 var(--font-sans);text-decoration:none;color:#dfe6f3}
@media (max-width:640px){.talent{grid-template-columns:1fr}}

@media (max-width:1023px){.ngrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){
  .ngrid{grid-template-columns:1fr}
  .bar nav a:not(.cta){display:none}
  .brand small{display:none}
  .pn{grid-template-columns:1fr}
  .pn a:last-child{justify-content:flex-start;text-align:left}
}