:root{
  --ink:#1b1d21; --ink2:#4a4f57; --muted:#7b818b;
  --line:#e3e5e9; --bg:#ffffff; --bg2:#f6f7f9;
  --accent:#1f5f8b; --accent-ink:#16496b;
  --max:1080px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:72px}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic Medium","Yu Gothic",Meiryo,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px; line-height:1.9; letter-spacing:.02em;
  -webkit-text-size-adjust:100%;
}
img{max-width:100%; display:block}
a{color:var(--accent); text-underline-offset:3px}
.wrap{max-width:var(--max); margin:0 auto; padding:0 24px}

/* header */
header{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.94); backdrop-filter:saturate(150%) blur(8px); border-bottom:1px solid var(--line)}
.hd{max-width:var(--max); margin:0 auto; padding:12px 24px; display:flex; align-items:center; gap:20px; flex-wrap:wrap}
.brand{display:flex; align-items:center; gap:10px; font-size:17px; font-weight:700; letter-spacing:.06em; text-decoration:none; color:var(--ink); white-space:nowrap}
.brand .logo{width:30px; height:31px; flex:none; fill:var(--ink)}
.brand small{display:block; font-size:10px; letter-spacing:.18em; color:var(--muted); font-weight:400; margin-top:2px}
nav{margin-left:auto}
nav ul{list-style:none; display:flex; gap:20px; margin:0; padding:0; flex-wrap:wrap}
nav a{text-decoration:none; color:var(--ink2); font-size:13px; letter-spacing:.12em; font-weight:600}
nav a:hover{color:var(--accent)}

/* hero */
.hero{position:relative; min-height:min(74vh,620px); display:flex; align-items:center; overflow:hidden}
.hero img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.hero::after{content:""; position:absolute; inset:0; background:linear-gradient(100deg,rgba(255,255,255,.94) 0%,rgba(255,255,255,.86) 46%,rgba(255,255,255,.35) 100%)}
.hero .wrap{position:relative; z-index:2; padding-top:64px; padding-bottom:64px}
.hero .lead{font-size:14px; letter-spacing:.3em; color:var(--accent); margin:0 0 18px}
.hero h1{font-size:clamp(24px,4.4vw,40px); line-height:1.55; margin:0 0 20px; font-weight:700}
.hero h1 span{display:block}
.hero p.en{font-size:13px; letter-spacing:.1em; color:var(--ink2); margin:0}

/* sections */
section{padding:76px 0; border-top:1px solid var(--line)}
section.alt{background:var(--bg2)}
.sec-head{margin:0 0 34px}
.sec-head .en{display:block; font-size:12px; letter-spacing:.28em; color:var(--accent); font-weight:700; margin-bottom:8px}
.sec-head h2{font-size:clamp(20px,2.6vw,26px); margin:0; font-weight:700; line-height:1.6}
h3{font-size:17px; margin:34px 0 10px; font-weight:700; line-height:1.7}
h3:first-child{margin-top:0}
p{margin:0 0 16px}
.lede{font-size:17px; font-weight:600; line-height:1.85}
.cols{display:grid; grid-template-columns:1fr 1fr; gap:34px; align-items:start}
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.card{background:#fff; border:1px solid var(--line); border-radius:10px; overflow:hidden}
.card img{aspect-ratio:16/10; object-fit:cover; width:100%}
.card .body{padding:18px 20px 22px}
.card h3{margin:0 0 8px; font-size:16px}
.card p{margin:0; font-size:14.5px; color:var(--ink2)}
ul.plain{margin:0 0 16px; padding-left:1.2em}
ul.plain li{margin-bottom:6px}
figure{margin:0}
figure img{border-radius:10px; aspect-ratio:3/2; object-fit:cover; width:100%}

/* work gallery */
.gallery{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:34px}
.gallery img{aspect-ratio:1/1; object-fit:cover; border-radius:6px; width:100%}

/* profile table */
table.profile{width:100%; border-collapse:collapse; font-size:15.5px}
table.profile th,table.profile td{border-bottom:1px solid var(--line); padding:14px 8px; text-align:left; vertical-align:top}
table.profile th{width:8.5em; font-weight:600; color:var(--ink2); white-space:nowrap}

/* qa */
details{border-bottom:1px solid var(--line); padding:4px 0}
details summary{cursor:pointer; list-style:none; padding:16px 34px 16px 0; font-weight:700; font-size:16px; position:relative; line-height:1.7}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"＋"; position:absolute; right:4px; top:16px; color:var(--accent); font-weight:400}
details[open] summary::after{content:"−"}
details .a{padding:0 0 18px; color:var(--ink2); font-size:15.5px}
.qnum{display:inline-block; font-size:11px; letter-spacing:.16em; color:var(--accent); margin-right:10px; vertical-align:2px}

/* contact */
.contact-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:34px}
.contact-grid h3{font-size:12px; letter-spacing:.2em; color:var(--accent); margin:0 0 10px}
.contact-grid p{margin:0; font-size:15.5px; color:var(--ink2)}
.bigtel{font-size:26px; font-weight:700; color:var(--ink); letter-spacing:.04em; text-decoration:none}
.btn{display:inline-block; margin-top:6px; padding:14px 30px; background:var(--accent); color:#fff; text-decoration:none; border-radius:6px; font-weight:700; letter-spacing:.06em; font-size:15px}
.btn:hover{background:var(--accent-ink)}

footer{background:#22262c; color:#c9ced6; padding:44px 0; font-size:14px; border-top:none}
footer a{color:#c9ced6}
footer .name{color:#fff; font-weight:700; margin-bottom:8px}
footer .copy{margin-top:20px; font-size:12px; color:#8b929c}

@media (max-width:820px){
  .cols{grid-template-columns:1fr; gap:24px}
  .cards{grid-template-columns:1fr}
  .gallery{grid-template-columns:repeat(3,1fr)}
  .contact-grid{grid-template-columns:1fr; gap:26px}
  section{padding:56px 0}
  nav ul{gap:14px}
  nav a{font-size:12px}
}
@media (max-width:640px){
  header{position:static}
  html{scroll-padding-top:12px}
}
@media (max-width:520px){
  .hero h1{font-size:22px}
  .hero::after{background:linear-gradient(180deg,rgba(255,255,255,.9) 0%,rgba(255,255,255,.82) 70%,rgba(255,255,255,.5) 100%)}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .hd{padding:10px 18px}
  .wrap{padding:0 18px}
}

/* ---- blog ---- */
.page-head{padding:64px 0 0}
.post{max-width:760px}
.post .meta{font-size:13px; color:var(--muted); margin:0 0 26px; letter-spacing:.06em}
.post h1{font-size:clamp(21px,3vw,28px); line-height:1.6; margin:0 0 14px; font-weight:700}
.post ul{padding-left:1.2em}
.post li{margin-bottom:8px}
.post .back{display:inline-block; margin-top:40px; font-size:14px}
.postlist{list-style:none; margin:0; padding:0; max-width:760px}
.postlist li{border-bottom:1px solid var(--line)}
.postlist a{display:block; padding:22px 0; text-decoration:none; color:var(--ink); font-weight:700; font-size:17px; line-height:1.6}
.postlist a:hover{color:var(--accent)}
.postlist .d{display:block; font-size:12px; color:var(--muted); font-weight:400; letter-spacing:.08em; margin-bottom:6px}
.postlist .x{display:block; font-size:14.5px; color:var(--ink2); font-weight:400; margin-top:6px}

/* ---- 読みやすさ（WORK 制作実績） ---- */
.prose{max-width:36em}
.prose p{margin:0 0 18px}
.subsec{margin:0 0 48px}
.subsec:last-child{margin-bottom:0}
h3.band{font-size:18px; margin:0 0 18px; padding-left:12px; border-left:3px solid var(--accent); line-height:1.5}
.numcards{list-style:none; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:0; margin:0}
.numcards li{background:#fff; border:1px solid var(--line); border-radius:10px; padding:20px 22px}
.numcards .n{display:block; font-size:11px; letter-spacing:.18em; color:var(--accent); font-weight:700; margin-bottom:10px}
.numcards b{display:block; font-size:15.5px; margin-bottom:6px; line-height:1.6}
.numcards p{margin:0; font-size:14.5px; color:var(--ink2); line-height:1.8}
.callout{background:#fff; border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:8px; padding:26px 28px}
.callout h3{margin:0 0 16px; font-size:16px}
ul.check{list-style:none; margin:0; padding:0; columns:2; column-gap:36px}
ul.check li{padding-left:1.5em; position:relative; margin-bottom:9px; break-inside:avoid; font-size:15px; color:var(--ink2); line-height:1.8}
ul.check li::before{content:"✓"; position:absolute; left:0; top:0; color:var(--accent); font-weight:700}
.gallery.top{margin-top:0; margin-bottom:52px}
@media (max-width:820px){
  ul.check{columns:1}
  .prose{max-width:none}
  .numcards{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .numcards{grid-template-columns:1fr}
  .callout{padding:22px 20px}
}

/* ---- 制作実績カード ---- */
.cases{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:20px}
.case{background:#fff; border:1px solid var(--line); border-radius:10px; overflow:hidden; display:flex; flex-direction:column}
.case .cm{position:relative; background:#eceef1}
.case .ci{width:100%; aspect-ratio:4/3; object-fit:cover; display:block; background:#000}
.case video.ci{object-fit:contain}
.case .badge{position:absolute; top:10px; left:10px; background:rgba(27,29,33,.82); color:#fff; font-size:10.5px; letter-spacing:.12em; padding:4px 9px; border-radius:3px; pointer-events:none}
.case .cb{padding:16px 18px 20px}
.case .cl{margin:0 0 4px; font-size:11.5px; letter-spacing:.06em; color:var(--accent); font-weight:700; line-height:1.6}
.case h4{margin:0 0 10px; font-size:15px; line-height:1.6; font-weight:700}
.case .cd{margin:0; font-size:13px; line-height:1.85; color:var(--ink2)}
@media (max-width:1000px){ .cases{grid-template-columns:repeat(3,1fr)} }
@media (max-width:760px){ .cases{grid-template-columns:repeat(2,1fr)} }
@media (max-width:480px){ .cases{grid-template-columns:1fr} }