:root{
      --bg:#0b0f19;
      --panel:#111726;
      --panel-2:#0e1422;
      --text:#e8ecf1;
      --muted:#a7b0c0;
      --brand:#4da3ff;
      --accent:#7cf1c9;
      --border:rgba(255,255,255,.08);
      --shadow:0 10px 30px rgba(0,0,0,.35);
      --radius:16px;
      --gap:16px;
      --content-max:1200px;
    }
    body{margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", "Yu Gothic", "Meiryo", sans-serif; line-height:1.6; color:var(--text); background:linear-gradient(180deg, #0b0f19 0%, #0a1322 100%);}
    img{max-width:100%; display:block}
    a{color:inherit; text-decoration:none}
    .container{max-width:var(--content-max); margin:0 auto; padding:0 20px}

    .site-header{position:sticky; top:0; z-index:50; backdrop-filter:saturate(1.2) blur(10px); background:linear-gradient(180deg, rgba(30,40,60,.96), rgba(30,40,60,.88)); border-bottom:1px solid var(--border);}
    .header-inner{display:flex; align-items:center; gap:16px; padding:14px 0}
    .brand{display:flex; align-items:center; gap:12px}
    .brand-logo{width:40px; height:40px;object-fit: contain;}
    .brand-title{font-weight:800; font-size:1.25rem; color:#fff}
    .nav{margin-left:auto; display:flex; gap:10px; flex-wrap:wrap}
    .nav a{padding:8px 12px; border-radius:10px; color:#f0f4fa; font-weight:600}
    .nav a[aria-current="page"], .nav a:hover{color:#fff; background:rgba(255,255,255,.12)}

    .hero{padding:28px 0 10px}
    .hero-card{background:radial-gradient(1200px 500px at 70% -20%, rgba(77,163,255,.18), transparent 50%), radial-gradient(1000px 400px at 20% -10%, rgba(124,241,201,.15), transparent 50%), var(--panel); border:1px solid var(--border); border-radius:22px; padding:22px; box-shadow:var(--shadow)}
    .hero h1{font-size:clamp(1.5rem, 2.5vw + 1rem, 2.5rem); margin:0 0 6px}
    .hero p{margin:0; color:var(--muted)}

    .controls{display:grid; gap:var(--gap); padding:18px 0}
    .search{display:flex; gap:10px; align-items:stretch; background:var(--panel-2); border:1px solid var(--border); border-radius:14px; padding:10px;}
    .search input{flex:1; border:none; outline:none; background:transparent; color:var(--text); font-size:1rem; padding:10px 12px; border-radius:10px;}
    .chips{display:flex; flex-wrap:wrap; gap:8px}
    .chip{padding:8px 12px; border-radius:999px; background:rgba(255,255,255,.05); border:1px solid var(--border); color:var(--muted)}
    .chip--active{color:var(--text); background:rgba(77,163,255,.15); border-color:rgba(77,163,255,.4)}

    .section-title{display:flex; align-items:center; gap:10px; margin:8px 0 6px}
    .section-title h2{margin:0; font-size:1.1rem; color:var(--muted); font-weight:700}
    .grid{display:grid; gap:var(--gap)}

    .work-card{display:flex; flex-direction:row; gap:16px; align-items:flex-start; background:var(--panel); border:1px solid var(--border); padding:12px; border-radius:var(--radius);}
    .thumb{flex:1; max-width:45%; border-radius:12px; overflow:hidden; background:linear-gradient(135deg, #1f2635, #172034); border:1px solid var(--border)}
    .thumb img{width:100%; height:100%; object-fit:cover; filter:brightness(0.85)}
    .info{flex:2; display:flex; flex-direction:column}
    .meta{display:flex; flex-wrap:wrap; gap:8px; color:var(--muted); font-size:.9rem}
    .meta .dot{width:3px; height:3px; border-radius:50%; background:var(--muted)}
    .title{font-weight:800; margin:6px 0}
    .tag{padding:6px 10px; border-radius:999px; font-size:.8rem; color:var(--text); background:rgba(255,255,255,.04); border:1px solid var(--border)}
    .actions{display:flex; gap:8px; margin-top:8px}
    .btn{padding:10px 14px; border-radius:12px; border:1px solid var(--border); background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); color:var(--text); font-weight:600}
    .btn--primary{background:linear-gradient(135deg, var(--brand), #5ac8ff); border-color:rgba(77,163,255,.4)}
    .btn--ghost{background:transparent}

    footer{margin:40px 0 80px; color:var(--muted); text-align:center}
    .footer-title{font-size:1.2rem; font-weight:800; color:#fff; margin-top:20px}

    @media (max-width: 768px){
      .work-card{flex-direction:column}
      .thumb{max-width:100%}
    }
      /* About / FAQ */
    html{scroll-behavior:smooth}
    .about{margin: 0 auto}/* 左右中央寄せ */
    .about-card {background: var(--panel);border: 1px solid var(--border);border-radius: 22px;padding: 20px;max-width: 1500px}/* 好きな最大幅 */
    .about h2{margin:0 0 10px; font-size:1.25rem}
    .faq{display:grid; gap:12px; margin-top:8px}
    .faq details{background:var(--panel-2); border:1px solid var(--border); border-radius:14px; padding:12px}
    .faq summary{cursor:pointer; list-style:none; font-weight:700}
    .faq summary::-webkit-details-marker{display:none}
    .faq p{margin:8px 0 0; color:var(--muted)}
    .quicklinks{display:flex; flex-wrap:wrap; gap:10px; margin-top:12px}
    .ql{padding:8px 12px; border-radius:999px; background:rgba(255,255,255,.05); border:1px solid var(--border)}