/*
 Theme Name: Lightning Child
 Template: lightning
 Version: 1.0.0
 Description: Lightningの子テーマ
 Author: Mercury
*/
/* ------------------------------
   Design tokens
------------------------------ */
:root{
  --bg:#0b1220;         /* 深いネイビー */
  --bg-elev:#101935;    /* 段差用 */
  --text:#e8ecf4;       /* 高コントラストな前景 */
  --muted:#b7c0d0;
  --line:#06C755;       /* LINEブランド */
  --accent:#d4b36a;     /* ゴールド */
  --surface:#121a2c;
  --border:#223056;
  --focus:#ffd36a;
  --error:#ff6b6b;
  --radius:14px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --max:1100px;
  --sp: clamp(16px, 1.6vw, 20px);
}

/* Reset (modern minimal) */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--text);
  background:linear-gradient(180deg,var(--bg),#0e162a 60%, var(--bg));
  font-family:"Noto Sans JP", system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
  line-height:1.8;
  font-size:16px;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{outline:3px solid var(--focus); outline-offset:2px; border-radius:8px}
button{font:inherit}

/* Utilities */
.container{width:100%; max-width:var(--max); margin-inline:auto; padding-inline:clamp(16px,4vw,24px)}
.section{padding: clamp(56px, 8vw, 100px) 0}
.section-head{margin-bottom:32px}
.section-head h2{
  font-family:"Shippori Mincho", serif; 
  font-weight:700; 
  font-size: clamp(24px, 3.2vw, 36px);
  letter-spacing:.02em
}
.section-lead{color:var(--muted); margin-top:8px}
.cards{display:grid; gap:20px}
.cards.three{grid-template-columns:repeat(1,1fr)}
.cards.four{grid-template-columns:repeat(1,1fr)}
@media(min-width:768px){
  .cards.three{grid-template-columns:repeat(3,1fr)}
  .cards.four{grid-template-columns:repeat(4,1fr)}
}

.card{
  background:linear-gradient(180deg,var(--surface),#0f1831);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:24px;
  box-shadow:var(--shadow)
}
.card h3{
  font-family:"Shippori Mincho", serif;
  font-weight:700;
  margin:0 0 8px
}
.list{padding-left:18px; margin:0}
.list li{margin:6px 0}

/* Header */
.site-header{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(180%) blur(10px);
  background:rgba(11,18,32,.75);
  border-bottom:1px solid rgba(255,255,255,.06)
}
.header-inner{display:flex; align-items:center; justify-content:space-between; min-height:64px}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none}
.brand-mark{color:var(--accent)}
.brand-name{font-family:"Shippori Mincho", serif; font-weight:700; letter-spacing:.04em}
.site-nav{display:none}
.site-nav ul{display:flex; gap:18px; align-items:center; list-style:none; margin:0; padding:0}
.site-nav a{text-decoration:none; opacity:.92}
.site-nav a:hover{opacity:1}
.nav-toggle{
  background:none; border:1px solid rgba(255,255,255,.2); border-radius:10px; padding:8px; color:var(--text); display:grid; gap:4px
}
.nav-toggle .bar{width:22px; height:2px; background:var(--text); display:block; border-radius:2px}
@media(min-width:980px){
  .site-nav{display:block}
  .nav-toggle{display:none}
}
.site-nav.open{display:block; position:absolute; right:16px; top:64px; background:var(--surface); border:1px solid var(--border); padding:12px 16px; border-radius:12px}
.site-nav.open ul{flex-direction:column; align-items:flex-start}

/* Buttons */
.btn{
  --btn-bg:#ffffff; --btn-fg:#0b1220; --btn-bd:transparent;
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px; padding:12px 18px; border-radius:14px;
  text-decoration:none; font-weight:700; color:var(--btn-fg);
  background:var(--btn-bg); border:2px solid var(--btn-bd); transition:.2s transform ease, .2s filter ease;
}
.btn:hover{transform:translateY(-2px); filter:brightness(1.05)}
.btn:active{transform:translateY(0)}
.btn.small{padding:8px 12px; font-weight:700}
.btn.xl{padding:16px 22px; font-size:1.05rem}
.btn-ghost{--btn-bg:transparent; --btn-fg:var(--text); --btn-bd:var(--accent)}
.btn-primary{--btn-bg:var(--accent); --btn-fg:#0b1220}
.btn-line{--btn-bg:var(--line); --btn-fg:#0b1220}
.btn-line.small{font-weight:700}

/* Hero */
.hero{padding: clamp(48px, 8vw, 120px) 0 0}
.hero-inner{display:grid; gap:24px; align-items:center}
.hero-copy .display{
  font-family:"Shippori Mincho", serif;
  font-weight:700;
  font-size:clamp(28px,5.4vw,56px);
  line-height:1.2;
  letter-spacing:.02em
}
.subtitle{color:var(--muted); font-size:clamp(16px,2.4vw,18px); margin:10px 0 16px}
.hero-bullets{display:grid; grid-template-columns:1fr; gap:8px; padding:0; margin:0 0 20px; list-style:none}
.hero-bullets li::before{content:"◆"; color:var(--accent); margin-right:.5em}
.hero-ctas{display:flex; gap:12px; flex-wrap:wrap}
.hero-visual{border-radius:18px; overflow:hidden; border:1px solid var(--border); box-shadow:var(--shadow)}
@media(min-width:960px){
  .hero-inner{grid-template-columns:1.05fr .95fr}
}

/* Works */
.works-grid{display:grid; grid-template-columns:1fr; gap:20px}
.work{background:linear-gradient(180deg,var(--surface),#0f1831); border:1px solid var(--border); border-radius:14px; overflow:hidden; box-shadow:var(--shadow)}
.work img{aspect-ratio:16/10; object-fit:cover; width:100%}
.work-meta{padding:16px}

/* Pricing */
.price .price-tag{font-size:clamp(22px,3.6vw,28px); font-weight:800}
.price .currency{opacity:.9; margin-right:2px}

/* Timeline */
.timeline{list-style:none; padding:0; margin:0; display:grid; gap:14px}
.timeline li{
  position:relative; padding:12px 16px 12px 42px; border-radius:12px;
  background:linear-gradient(180deg,var(--surface),#0f1831);
  border:1px solid var(--border); box-shadow:var(--shadow)
}
.timeline li::before{
  content:""; position:absolute; left:16px; top:18px;
  width:10px; height:10px; border-radius:50%; background:var(--accent)
}

/* Contact */
.contact-grid{display:grid; gap:20px; grid-template-columns:1fr}
@media(min-width:860px){.contact-grid{grid-template-columns:1fr 1fr}}
.form{display:grid; gap:10px}
.form input,.form textarea{
  background:#0f172a; color:var(--text); border:1px solid var(--border);
  border-radius:12px; padding:10px 12px
}
.form input::placeholder,.form textarea::placeholder{color:#8fa0bd}
.form-note{font-size:.9rem}
.form-alert{margin-top:8px; padding:10px 12px; border-radius:12px; background:#0f172a; border:1px solid var(--border)}

/* Footer */
.site-footer{padding:28px 0; border-top:1px solid rgba(255,255,255,.06); background:#0b1220}
.footer-inner{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.text-link{color:var(--muted); text-decoration:none}
.text-link:hover{color:var(--text)}
.muted{color:var(--muted)}

/* Floating CTA & ToTop */
.float-cta{
  position:fixed; inset:auto 16px 16px auto; z-index:40;
  background:rgba(16,25,53,.8); border:1px solid var(--border); padding:10px; border-radius:14px; backdrop-filter:blur(6px)
}
@media(min-width:980px){.float-cta{inset:auto 24px 24px auto}}
.to-top{
  position:fixed; right:16px; bottom:76px; z-index:40;
  border:none; background:var(--accent); color:#0b1220; border-radius:50%;
  width:44px; height:44px; box-shadow:var(--shadow); cursor:pointer; display:grid; place-items:center
}
.to-top[hidden]{display:none}

/* Reveal on scroll */
.reveal{opacity:0; transform:translateY(12px); transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1; transform:none}

/* Skip link */
.skip-link{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden
}
.skip-link:focus{position:fixed; left:16px; top:16px; width:auto; height:auto; background:#000; color:#fff; padding:10px 14px; border-radius:10px; z-index:100}

/* Accessibility: reduced motion */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .reveal{transition:none}
}

/* Hero refinement for large screens */
@media(min-width:1200px){
  .hero{padding-top:80px}
}