/* ===== Base ===== */
:root{
  --fg:#e9ecef;
  --fg-dim:#cbd1d6;
  --line:#cbd1d6A6;
  --panel:#15181c;          /* パネル基調 */
  --panel-b:#2b2f34;        /* パネル縁の濃さ */
  --btn:#cbd1d6;
  --btn-hl:#ffffff;
  --bg1:#3a3f47;
  --bg2:#22272c;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--fg);
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Noto Sans JP",Segoe UI,Roboto,Helvetica,Arial,"メイリオ",sans-serif;
  line-height:1.85;
  letter-spacing:.02em;
  background:
    radial-gradient(1200px 800px at 25% 20%, rgba(255,255,255,.08), transparent 60%),
    linear-gradient(135deg,var(--bg1),var(--bg2));
  position:relative;
  overflow-x:hidden;
}

/* ===== Hero ===== */
.stage{
  min-height:100%;
  display:grid;
  place-items:center;
  padding:8vh 24px 4vh;
}
.block{
  width:min(820px, 92vw);
  text-align:center;
}

/* ===== Rules ===== */
.rule{
  border:0; height:1px;
  background:linear-gradient(to right, transparent, var(--line), transparent);
  margin:28px auto; width:86%;
}
.rule.split{
  display:grid; grid-template-columns:1fr 120px 1fr; gap:14px;
  margin-top:34px; margin-bottom:24px;
}
.rule.split::before,
.rule.split::after{
  content:""; height:1px; background:linear-gradient(to right, transparent, var(--line));
}
.rule.split>i{display:block; height:1px; background:var(--line)}

/* ===== Headings ===== */
.title{
  margin:0 0 8px;
  font-size:clamp(28px, 4vw, 44px);
  letter-spacing:.35em; text-indent:.35em;
  font-weight:800;
}
.lead,.desc{margin:0 auto; color:var(--fg-dim)}
.lead{font-size:15px; letter-spacing:.18em}
.desc{
  margin-top:10px; width:min(640px, 92%);
  font-size:15px; white-space:pre-line;
}

/* ===== Buttons ===== */
.nav{display:flex; justify-content:center; gap:0; margin-top:18px}
.btn{
  display:inline-block; padding:14px 24px; min-width:140px;
  border:2px solid var(--btn); border-radius:0;
  color:var(--fg); text-decoration:none; text-align:center;
  letter-spacing:.18em; font-size:14px; background:transparent;
  transition:all .18s ease;
}
.btn + .btn{border-left:none}
.btn:first-child{border-radius:8px 0 0 8px}
.btn:last-child{border-radius:0 8px 8px 0}
.btn:hover{border-color:var(--btn-hl); transform:translateY(-1px)}
.btn:focus-visible{outline:3px solid #99c1ff66; outline-offset:3px}

/* ===== Footer ===== */
footer{
  position:fixed; left:0; right:0; bottom:10px;
  text-align:center; color:var(--fg-dim);
  font-size:12px; letter-spacing:.18em; padding:0 12px; pointer-events:none;
}
footer a{color:inherit; text-decoration:none; border-bottom:1px dotted currentColor; pointer-events:auto}

/* ===== Panels (hashで開閉) ===== */
.panel{
  position:fixed; inset:0;
  display:none;            /* 初期は非表示 */
  overflow:auto;
  padding:6vh 24px;
}
.panel:target{display:block}
.panel__inner{
  width:min(980px, 94vw);
  margin:0 auto 6vh;
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)) , var(--panel);
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px;
  box-shadow:0 20px 60px rgba(0,0,0,.45);
  padding:40px 40px 28px;
  position:relative;
}
.close{
  position:absolute; top:14px; right:16px;
  width:36px; height:36px; border-radius:50%;
  display:grid; place-items:center; text-decoration:none;
  color:var(--fg); font-size:26px; line-height:1;
  border:1px solid rgba(255,255,255,.25);
  background:transparent; transition:transform .15s ease, opacity .15s ease;
}
.close:hover{transform:scale(1.04); opacity:.9}

.panel__header h2{
  margin:4px 0 0;
  font-size:28px; letter-spacing:.38em; text-indent:.38em; font-weight:800;
}
.under{
  display:block; width:120px; height:2px; margin:10px 0 18px;
  background:linear-gradient(to right, var(--line), transparent 70%);
}
.panel__lead{color:var(--fg-dim); margin:0 0 18px}

/* ===== About ===== */
.hero-img img {
  display: block;
  width: 50%;          /* ← さらに小さく（50%） */
  max-width: 480px;    /* 上限を少し抑える */
  height: auto;
  border-radius: 10px;
  margin: 0 auto;       /* 中央寄せ */
}


/* ===== Work ===== */
.work-item{margin:34px 0 18px}
.work-title{
  margin:0 0 12px; font-size:20px; letter-spacing:.12em; font-weight:700;
}
.work-figure img{
  display:block; width:100%; height:auto; border-radius:10px;
  border:1px solid rgba(255,255,255,.15);
}

/* ===== Contact ===== */
.form{margin-top:6px}
.grid{
  display:grid; grid-template-columns:1fr 1fr; gap:18px;
}
.field{display:flex; flex-direction:column; gap:8px}
.field span{font-size:14px; letter-spacing:.12em}
input,textarea{
  width:100%; color:var(--fg); background:transparent;
  border:2px solid rgba(255,255,255,.35);
  border-radius:6px; padding:12px 14px; font-size:15px;
  outline:none; transition:border-color .15s ease, box-shadow .15s ease;
}
input:focus,textarea:focus{
  border-color:#ffffff; box-shadow:0 0 0 3px rgba(255,255,255,.12);
}
.actions{display:flex; gap:12px; margin-top:18px}
.primary,.ghost{
  appearance:none; cursor:pointer; padding:10px 18px; font-size:14px;
  letter-spacing:.16em; border-radius:6px; transition:transform .15s ease, opacity .15s ease;
}
.primary{color:#222; background:#eceff3; border:2px solid #eceff3}
.ghost{color:var(--fg); background:transparent; border:2px solid rgba(255,255,255,.35)}
.primary:hover,.ghost:hover{transform:translateY(-1px)}

.sns{
  list-style:none; padding:18px 0 0; margin:18px 0 0;
  display:flex; gap:12px;
}
.sns a{
  display:grid; place-items:center; width:40px; height:40px;
  border-radius:50%; text-decoration:none; color:var(--fg);
  border:2px solid rgba(255,255,255,.35);
}
.sns a:hover{border-color:#fff}

/* ===== Responsive ===== */
@media (max-width:760px){
  .btn{min-width:112px; padding:12px 16px; font-size:13px}
  .rule.split{grid-template-columns:1fr 90px 1fr}
  .panel__inner{padding:28px 18px}
  .grid{grid-template-columns:1fr}
}