/* ==== Layout (構造・配置・サイズ) ==== */
*{box-sizing:border-box; margin:0; padding:0;}
img{max-width:100%; display:block;}
.section-title{position:relative; padding-bottom:14px; margin-bottom:8px;}
.section-title::after{position:absolute; left:0; bottom:0; width:40px; height:2px;}
.center .section-title::after{left:50%;}
.wrap{max-width:1180px; margin:0 auto; padding:0 32px;}
/* Header */
  header{position:sticky; top:0; z-index:100;}
.nav-inner{display:flex; align-items:center; justify-content:space-between; padding:18px 32px; max-width:1180px; margin:0 auto;}
a.logo span.script{padding-bottom: 5px;}
.logo{display:flex; flex-direction:column;}
.logo .sub{margin-top:2px;}
nav ul{display:flex; gap:34px;}
nav a{position:relative; padding-bottom:4px;}
nav a::after{position:absolute; left:0; bottom:0; width:0; height:1px;}
nav a:hover::after{width:100%;}
.menu-btn{display:none;}
.menu-btn span{display:block; width:24px; height:1.5px; margin:5px 0;}
/* Hero */
.hero{position:relative; min-height:640px; display:flex; align-items:center; overflow:hidden;}
.hero-bg{position:absolute; inset:0; z-index:0;}
.hero-bg img{width:100%; height:100%; object-fit:cover;}
.hero-overlay{position:absolute; inset:0; z-index:1;}
.hero-content{position:relative; z-index:2; padding:100px 32px; max-width:640px;}
.hero-title{margin-bottom:14px;}
.hero-script{margin-bottom:24px;}
.hero-text{margin-bottom:36px;}
.hero-buttons{display:flex; gap:16px; flex-wrap:wrap;}
.hero-buttons .btn span{margin-left:2px;}

/* About */
.about{padding:96px 0;}
.about-grid{display:grid; grid-template-columns:0.85fr 1.15fr; gap:64px; align-items:center;}
.about-photo{aspect-ratio:3/4; overflow:hidden; position:relative;}
.about-photo img{width:100%; height:100%; object-fit:cover;}
.about-lead{margin-bottom:18px;}
.about-text{margin-bottom:40px;}
.about-stats{display:flex; gap:36px;}
.stat{display:flex; flex-direction:column; gap:4px; padding-left:20px;}
.stat:first-child{padding-left:0;}

/* Works */
  .works{padding:88px 0 90px;}
.works-head{display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:44px;}
.view-all{padding-bottom:2px;}
.works-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:28px;}
.thumb{aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; overflow:hidden; position:relative;}
.thumb img{width:100%; height:100%; object-fit:cover;}
.work-title{margin-top:16px;}
.work-sub{margin-top:3px;}
/* Service */
  .service{padding:90px 0; position:relative; overflow:hidden;}
.service-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:44px; margin-top:56px;}
.service-item{text-align:center;}
.service-icon{width:64px; height:64px; margin:0 auto 22px; display:flex; align-items:center; justify-content:center;}
.service-icon svg{width:26px; height:26px;}
.service-item h3{margin-bottom:10px;}
/* Flow */
  .flow{padding:92px 0;}
.flow-steps{display:grid; grid-template-columns:repeat(5,1fr); gap:0; margin-top:56px; align-items:start;}
.flow-step{text-align:center; position:relative; padding:0 12px;}
.flow-num{width:64px; height:64px; display:flex; align-items:center; justify-content:center; margin:0 auto 18px; position:relative; z-index:2;}
.flow-icon{margin:0 auto 14px; width:30px; height:30px;}
.flow-icon svg{width:100%; height:100%;}
.flow-step h4{margin-bottom:8px;}
.flow-arrow{position:absolute; top:32px; right:-6%; width:12%; height:1px; display:flex; align-items:center; justify-content:center;}
/* Contact */
  .contact{padding:0 0 0;}
.contact-grid{display:grid; grid-template-columns:1fr 1fr; align-items:center; min-height:380px;}
.contact-text{padding:70px 32px; max-width:520px; margin:auto;}
.contact-text p{margin:18px 0 32px;}
.btn{display:inline-flex; align-items:center; gap:10px; padding:15px 34px;}
.contact-photo{height:100%; min-height:380px;}
.contact-photo img{width:100%; height:100%; object-fit:cover;}
/* Footer */
  footer{padding:64px 0 28px;}
.footer-top{display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:40px; padding-bottom:44px;}
.footer-logo .sub{margin:2px 0 20px;}
.footer-links{display:flex; flex-direction:column; gap:12px;}
.footer-social .follow{margin-bottom:16px; display:block;}
.icon-row{display:flex; gap:16px;}
.icon-row a{width:34px; height:34px; display:flex; align-items:center; justify-content:center;}
.icon-row svg{width:15px; height:15px;}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; padding-top:22px;}
.to-top{width:38px; height:38px; display:flex; align-items:center; justify-content:center;}
.to-top svg{width:14px; height:14px;}
@media (max-width:900px){
  .hero{min-height:auto;}
  .hero-content{padding:80px 24px; max-width:100%;}
  .about-grid{grid-template-columns:1fr; gap:36px;}
  .about-photo{aspect-ratio:4/3; order:-1;}
  .about-stats{gap:24px;}
  .works-grid{grid-template-columns:repeat(2,1fr);}
  .service-grid{grid-template-columns:repeat(2,1fr); row-gap:44px;}
  .flow-steps{grid-template-columns:repeat(1,1fr); row-gap:40px;}
  .flow-arrow{display:none;}
  .contact-grid{grid-template-columns:1fr;}
  .contact-text{margin:0; max-width:100%;}
  .footer-top{grid-template-columns:1fr;}
  nav ul{display:none;}
  .menu-btn{display:block;}
  header.nav-open nav ul{
    display:flex; flex-direction:column; gap:0;
    position:absolute; top:100%; left:0; right:0;
    padding:8px 32px 28px;
  }
  header.nav-open nav ul li{width:100%;}
  header.nav-open nav ul li a{display:block; padding:14px 0;}
}