:root{
--brand:#2563eb;
--ink:#0f172a;
--muted:#6b7280;
--max:1200px;
--header-h:64px;
--shadow:0 10px 28px rgba(0,0,0,.08);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--header-h);}
body{margin:0;color:var(--ink);background:#fff;
font-family:"Noto Sans JP",system-ui,-apple-system,Segoe UI,Roboto,"ヒラギノ角ゴ ProN","Yu Gothic",sans-serif;
line-height:1.7;}
.container{max-width:var(--max);margin:0 auto;padding:0 20px;} header{position:fixed;inset:0 0 auto 0;height:var(--header-h);
z-index:10000;background:transparent;transition:background .28s, box-shadow .28s;}
header.scrolled{background:rgba(15,23,42,.95);box-shadow:0 6px 20px rgba(0,0,0,.22);}
.header-inner{height:100%;display:flex;align-items:center;justify-content:space-between;}
.logo a,.logo span{color:#fff;text-decoration:none;font-weight:800;letter-spacing:.2px;font-size:1.1rem;}
nav.desktop{display:flex;gap:24px;align-items:center;}
nav.desktop a{color:#fff;text-decoration:none;font-weight:400;opacity:.95}
nav.desktop a:hover{opacity:1} .burger{position:relative;display:none;width:44px;height:44px;border:0;background:transparent;cursor:pointer;z-index:1100;-webkit-tap-highlight-color:transparent;}
.burger:focus-visible{outline:2px solid rgba(255,255,255,.7);outline-offset:3px;border-radius:8px;}
.burger .icon{position:absolute;top:50%;left:50%;width:24px;height:24px;transform:translate(-50%,-50%) scale(1);transition:opacity .22s ease, transform .22s ease;display:block;}
.burger .icon line{stroke:#fff;stroke-width:2.5;stroke-linecap:round;filter:drop-shadow(0 0 2px rgba(0,0,0,.6));}
.burger .icon.burger-icon{opacity:1;}
.burger .icon.close-icon{opacity:0;transform:translate(-50%,-50%) scale(.8);}
.burger[aria-expanded="true"] .icon.burger-icon{opacity:0;transform:translate(-50%,-50%) scale(.8);}
.burger[aria-expanded="true"] .icon.close-icon{opacity:1;transform:translate(-50%,-50%) scale(1);} .mobile-panel{position:fixed;top:var(--header-h);left:0;right:0;z-index:9500;background:rgba(15,23,42,.7);
visibility:hidden;opacity:0;transform:translateY(-8px);pointer-events:none;
transition:opacity .28s ease, transform .28s ease, visibility .28s step-end;
backdrop-filter:saturate(120%) blur(2px);}
.mobile-panel.open{visibility:visible;opacity:1;transform:translateY(0);pointer-events:auto;
transition:opacity .28s ease, transform .28s ease, visibility 0s step-start;}
.mobile-menu{display:flex;flex-direction:column;padding:8px 0;}
.mobile-menu a{color:#fff;text-decoration:none;font-weight:400;padding:16px 20px;border-bottom:1px solid rgba(255,255,255,.08);
opacity:0;transform:translateY(6px);animation:itemIn .35s ease forwards; line-height:2.7; }
.mobile-menu a:nth-child(1){animation-delay:.04s}
.mobile-menu a:nth-child(2){animation-delay:.08s}
.mobile-menu a:nth-child(3){animation-delay:.12s}
.mobile-menu a:nth-child(4){animation-delay:.16s}
.mobile-panel:not(.open) .mobile-menu a{animation:none;opacity:0;transform:translateY(6px);}
@keyframes itemIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}} .hero{position:relative;height:100vh;display:grid;place-items:center;text-align:center;color:#fff;}
.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;pointer-events:none;}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(9,16,32,.42), rgba(9,16,32,.56));z-index:1;}
.hero .container{position:relative;z-index:2;}
.hero h1{margin:0 0 10px;font-size:clamp(28px,5vw,56px);font-weight:800;}
.hero .accent{background:linear-gradient(90deg,#6aa9ff,#a7c5ff);-webkit-background-clip:text;background-clip:text;color:transparent;}
.hero p{max-width:820px;margin:10px auto 26px;font-size:1.05rem;opacity:.95}
.cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
.btn{display:inline-block;padding:11px 18px;border-radius:12px;text-decoration:none;font-weight:400;}
.btn-primary{background:#2563eb;color:#fff;}
.btn-outline{border:2px solid #fff;color:#fff;} section{padding:80px 20px; }
.section-title{text-align:center;font-size:1.8rem;margin:0 0 10px;}
.section-sub{text-align:center;color:var(--muted);margin:0 0 36px;} .services .grid{display:grid;gap:22px;grid-template-columns:repeat(3,1fr);}
.service-card{position:relative;border-radius:18px;overflow:hidden;min-height:240px;color:#fff;box-shadow:var(--shadow);}
.service-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;}
.service-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.55));z-index:1;}
.service-card .inner{position:relative;z-index:2;padding:18px;display:flex;flex-direction:column;height:100%;justify-content:flex-end;}
.service-card ul{margin:12px 0 0 1em;padding:0;font-size:.9rem;opacity:.9} .works{background:#f9fafb;}
.works .grid{display:grid;gap:22px;grid-template-columns:repeat(3,1fr);}
.work-card{background:#fff;border-radius:16px;padding:16px;box-shadow:var(--shadow);}
.badge{display:inline-block;font-size:.72rem;background:#e9f1ff;color:#2563eb;padding:5px 9px;border-radius:999px;margin-bottom:8px;} .team .list{display:grid;gap:30px;grid-template-columns:repeat(3,1fr);justify-items:center;}
.avatar{width:96px;height:96px;border-radius:50%;object-fit:cover;box-shadow:0 8px 18px rgba(0,0,0,.18);display:block;margin:0 auto 10px;}
.person{text-align:center;} .band .box{background:#2563eb;color:#fff;padding:56px 20px;text-align:center;}
.band .box h3{margin:0 0 10px;font-size:1.6rem;} .contact .grid{display:grid;gap:28px;grid-template-columns:1.05fr 1fr;}
.info-list{list-style:none;padding:0;margin:0;color:var(--muted);}
.info-list li{margin:10px 0;}
.wpcf7-form input,.form textarea{width:100%;padding:12px 14px;border:1px solid #d0d3db;border-radius:12px;font:inherit;background:#fff;}
.wpcf7-form textarea{padding:12px 14px;width:100%; min-height:160px;resize:vertical;border-radius:12px;f}
.wpcf7-form button{margin-top:8px;}
.wpcf7-form .btn-primary{background:#2563eb;} footer{background:#0f172a;color:#cfd7ff;padding:40px 20px;}
footer .grid{display:grid;gap:24px;grid-template-columns:2fr 1fr 1fr 1fr;max-width:var(--max);margin:0 auto;}
footer h4{margin:0 0 8px;color:#fff;}
footer a{color:#cfd7ff;text-decoration:none;display:block;margin:6px 0;opacity:.9}
footer a:hover{opacity:1}
.copy{border-top:1px solid rgba(255,255,255,.1);margin-top:22px;padding-top:16px;text-align:center;font-size:.9rem;} @media (max-width:1024px){
.services .grid,.works .grid{grid-template-columns:repeat(2,1fr);}
.team .list{grid-template-columns:repeat(3,1fr);}
.contact .grid{grid-template-columns:1fr;}
footer .grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:768px){
nav.desktop{display:none;}
.burger{display:block;}
.services .grid,.works .grid{grid-template-columns:1fr;}
.team .list{grid-template-columns:repeat(2,1fr);}
} .services-pro .grid-3 {
display:grid; gap:32px; grid-template-columns:repeat(3,1fr);
}
@media (max-width:1024px){ .services-pro .grid-3{grid-template-columns:repeat(2,1fr);} }
@media (max-width:680px){  .services-pro .grid-3{grid-template-columns:1fr;} }
.card-pro {
position:relative; border-radius:18px; overflow:hidden; box-shadow:0 12px 28px rgba(0,0,0,.18);
transition:transform .25s ease, box-shadow .25s ease;
background:#000; }
.card-pro:hover { transform:translateY(-4px); box-shadow:0 18px 40px rgba(0,0,0,.28); }
.card-pro .bg {
position:absolute; inset:0; z-index:0;
}
.card-pro .bg img {
width:100%; height:100%; object-fit:cover; object-position:top;
display:block; filter:saturate(105%);
}
.card-pro .bg::after{
content:""; position:absolute; inset:0;
background:linear-gradient(180deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.42) 52%, rgba(0,0,0,.22) 100%);
}
.card-pro .content {
position:relative; z-index:1; padding:32px; min-height:420px;
display:flex; flex-direction:column;
}
.icon-badge {
width:64px; height:64px; border-radius:14px;
background:rgba(255,255,255,.18);
backdrop-filter:saturate(140%) blur(6px);
display:flex; align-items:center; justify-content:center;
margin:0 0 20px; transition:background .2s ease;
}
.card-pro:hover .icon-badge{ background:rgba(255,255,255,.28); }
.icon-badge svg{ width:28px; height:28px; stroke:#fff; fill:none; stroke-width:2; }
.card-pro h3{ color:#fff; font-weight:800; font-size:1.35rem; margin:0 0 10px; }
.card-pro p{ color:rgba(255,255,255,.92); margin:0 0 22px; }
.feature-list{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.feature-list li{ color:rgba(255,255,255,.86); display:flex; align-items:center; gap:10px; } .check {
width:18px; height:18px; flex:0 0 18px; display:inline-block;
}
.check svg{ width:100%; height:100%; fill:#34d399; } .wpcf7-form p {
margin-bottom: 1.5rem; } .wpcf7-form-control {
margin-bottom: 1rem; padding: 14px 16px; border-radius: 10px;
border: 1px solid #d1d5db;
font-size: 1rem;
width: 100%;
box-sizing: border-box;
} .wpcf7-submit {
padding: 12px 24px;
font-weight: 700;
border-radius: 8px;
background-color: #2563eb;
color: #fff;
border: none;
transition: background 0.2s;
}
.wpcf7-submit:hover {
background-color: #1e4ed8;
}
.project-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 2rem;
margin-top: 2.5rem;
} .project-card {
background: #fff;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 8px 20px rgba(0,0,0,.08);
transition: transform .3s ease, box-shadow .3s ease;
}
.project-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 30px rgba(0,0,0,.12);
} .project-card img {
width: 100%;
height: 220px;
object-fit: cover;
} .project-content {
padding: 1.5rem;
}
.project-content .tag {
display: inline-block;
background: #e9f1ff;
color: #2563eb;
font-weight: 600;
font-size: .85rem;
border-radius: 999px;
padding: 5px 12px;
margin-bottom: 10px;
}
.project-content h3 {
font-size: 1.1rem;
font-weight: 700;
margin: 0 0 10px;
}
.project-content p {
color: #4b5563;
font-size: .95rem;
margin: 0;
}