sectionpadding/* header */
.header{
      position:fixed;top:0;left:0;width:100%;z-index:50;
      display:flex;justify-content:space-between;align-items:center;
      height:var(--header-h);padding:0 32px;max-width:100%;
      background:rgba(251,249,248,.95);backdrop-filter:blur(4px);
      border-bottom:1px solid var(--border);
      transition:box-shadow .3s ease;
    }
/* common */
.section{padding:var(--section-pc) 0}
.section-alt{background:var(--surface-low)}
.section-header{
      display:flex;justify-content:space-between;align-items:end;gap:16px;margin-bottom:64px
    }
.btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:16px;
      font-weight:700;
      transition:transform .3s ease,background-color .3s ease,color .3s ease,border-color .3s ease,opacity .3s ease;
    }
.btn-primary:hover{opacity:1}
.btn-ghost{
      border:1px solid var(--border);
      color:var(--text);
      padding:16px 32px;
      background:transparent;
    }
.btn-ghost:hover{background:#fff}
.text-muted{color:var(--muted);
      text-align: justify;
    }
.small-label{
      margin:0;
      font-size:14px;
      font-weight:700;
      letter-spacing:.1em;
      color:var(--muted);
      text-transform:uppercase;
    }
/* hero */
.hero{
      position:relative;
      min-height:550px;
      height:100vh;
      display:flex;
      align-items:center;
      overflow:hidden;
      width:100%;
	margin-top: 0px;
    }
.hero-bg{
      position:absolute;inset:0;width:100%;height: 700px;;object-fit:cover;top: 120px;
      transform:scale(1.0);
      transition:transform .7s ease;
    }
.hero:hover .hero-bg{transform:scale(1.0)}
.hero-overlay{position:absolute;inset:0;}
.hero-content{
      position:relative;z-index:10;
      max-width:550px;
      background:rgba(255,255,255,.3);
      backdrop-filter:blur(4px);
      padding:32px;
      display:inline-block;
    }
.hero-title{
      margin:0 0 24px;
      font-family:"Shippori Mincho",serif;
      font-size:clamp(1.6em, 2vw, 2.5em);
      line-height:1.6;
      font-weight:600;
      letter-spacing:.05em;
    }
.hero-text{
      margin:0 0 10px;
      font-size:clamp(0.8em, 1.5vw, 1em);
      line-height:1.8;
      letter-spacing:.02em;
      color: black;
    }
/* layout */
.two-col{display:grid;grid-template-columns:1fr;gap:80px;align-items:center}
.grid-4,.grid-5,.grid-3{display:grid;gap:24px}
.card{
      background:var(--white);
      border:1px solid var(--border);
      padding:32px;
    }
.image-frame{
      overflow:hidden;
      border:1px solid var(--border);
    }
.image-frame img{
      width:100%;
      height:100%;
      object-fit:cover;
      transition:transform .7s ease;
    }
.image-frame:hover img{transform:scale(1.02)}
/* gallery */
.gallery-card{cursor:pointer}
.gallery-image{
      aspect-ratio:4/3;
      overflow:hidden;
      margin-bottom:16px;
      border:1px solid var(--border);
    }
.gallery-image img{
      width:100%;height:100%;object-fit:cover;
      transform:scale(1);
      transition:transform .5s ease;
    }
.gallery-card:hover .gallery-image img{transform:scale(1.1)}
.gallery-card h3{
      margin:8px 0 4px;
      font-family:"Shippori Mincho",serif;
      font-size:24px;
      line-height:1.6;
      font-weight:500;
      transition:color .3s ease;
    }
.gallery-card:hover h3{color:var(--green)}
.gallery-card .project-meta{font-size:10px;font-weight:700;letter-spacing:.1em;color:var(--muted)}
.gallery-card .project-area{margin:4px 0 0;font-size:14px;color:var(--muted)}
/* reasons */
.reason-card{
      background:var(--white);
      border:1px solid var(--border);
      padding:32px;
      text-align:center;
      transition:transform .3s ease,box-shadow .3s ease;
    }
.reason-card:hover{
      transform:translateY(-3px);
      box-shadow:0 8px 20px rgba(0,0,0,.06);
    }
.reason-icon{
      width:64px;height:64px;border-radius:50%;
      background:#f0f0f0;
      display:flex;align-items:center;justify-content:center;
      color:var(--green);
      margin:0 auto 24px;
      transition:transform .3s ease,background-color .3s ease;
    }
.reason-card:hover .reason-icon{transform:rotate(4deg) scale(1.05);background:#ececec}
.reason-card h3{margin:0 0 16px;font-size:16px}
/* voices */
.voice-card{
      display:flex;
      gap:24px;
      align-items:flex-start;
      background:var(--white);
      border:1px solid var(--border);
      padding:32px;
      transition:transform .3s ease,box-shadow .3s ease;
    }
.voice-card:hover{
      transform:translateY(-3px);
      box-shadow:0 8px 20px rgba(0,0,0,.06);
    }
.voice-card h3{
      margin:0 0 16px;
      font-family:"Shippori Mincho",serif;
      font-size:24px;
      line-height:1.6;
      font-weight:500;
    }
.voice-card p{margin:0 0 24px}
.voice-photo{
      width:128px;height:128px;flex-shrink:0;overflow:hidden;
    }
.voice-photo img{
      width:100%;height:100%;object-fit:cover;
      filter:grayscale(100%);
      transition:all .5s ease;
    }
.voice-card:hover .voice-photo img{filter:grayscale(0%)}
/* cta */
.cta{
      position:relative;
      overflow:hidden;
      background:var(--footer);
      color:var(--white);
      padding:96px 0;
    }
.cta-bg{
      position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
      transform:scale(1);
      transition:transform .7s ease;
    }
.cta:hover .cta-bg{transform:scale(1.02)}
.cta-overlay{position:absolute;inset:0;background:rgba(0,0,0,.4)}
.cta-content{
      position:relative;z-index:10;text-align:center;
    }
.cta-buttons{
      display:flex;
      flex-direction:column;
      gap:24px;
      justify-content:center;
      align-items:center;
    }
/* footer */
.footer-links a{
      color:var(--white);
      opacity:.8;
      transition:opacity .3s ease,color .3s ease;
    }
/* responsive */
@media (min-width:768px){
  :root{--section-pc:120px}
  .grid-3{grid-template-columns:repeat(3,1fr)}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-5{grid-template-columns:repeat(2,1fr)}
  .cta-buttons{flex-direction:row}
}
@media (min-width:1024px){
  .two-col{grid-template-columns:repeat(2,1fr)}
  .grid-4{grid-template-columns:repeat(4,1fr)}
  .grid-5{grid-template-columns:repeat(5,1fr)}
}
@media (max-width:767px){
  .section{padding:(--section-sp) 0}
  .section-title{font-size:28px;line-height:1.5;letter-spacing:.03em}
  .section-header{flex-direction:column;align-items:flex-start;margin-bottom:48px}
  .hero-title{line-height:1.5;letter-spacing:.03em}
  .voice-card{flex-direction:column}
  .voice-photo{width:100%;height:128px}
  .cta{padding:96px 0}
}

/* grid内の画像がブラウザ幅を狭めても縮まなくなる問題の修正
   （CSS Gridの初期値 min-width:auto を解除） */
.two-col > *,
.grid-3 > *,
.grid-4 > *,
.grid-5 > * {
  min-width: 0;
}
.hero > .container {
  min-width: 0;
}