:root{
  --bg:#f5f2ec;
  --ink:#171717;
  --line:rgba(23,23,23,.22);
  --side:clamp(24px,7vw,88px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Avenir Next","Avenir","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",sans-serif;font-weight:300;letter-spacing:.04em}
a{color:inherit;text-decoration:none}
.site-header{
  height:82px;padding:0 var(--side);display:flex;align-items:center;
  justify-content:space-between;background:rgba(248,246,241,.96);
  position:relative;z-index:20
}
.wordmark{
  display:flex;
  align-items:center;
  width:clamp(190px,22vw,305px);
}
.wordmark img{
  width:100%;
  height:auto;
  display:block;
}
.desktop-nav{margin-left:auto;display:flex;gap:42px;font-size:12px;font-weight:500;letter-spacing:.15em}
.desktop-nav a{position:relative}
.desktop-nav a:after{content:"";position:absolute;left:0;bottom:-7px;width:0;height:1px;background:currentColor;transition:.25s}
.desktop-nav a:hover:after{width:100%}
.menu-button{width:28px;height:24px;margin-left:35px;padding:0;border:0;background:none;display:grid;align-content:center;gap:5px;cursor:pointer}
.menu-button span{height:1px;background:var(--ink);width:100%;transition:.25s}
.mobile-menu{display:none}
.hero{
  min-height:590px;height:calc(100vh - 78px);max-height:780px;position:relative;
  background:url("assets/hero.jpg") center center/cover no-repeat
}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.28) 0%,rgba(0,0,0,.05) 48%,rgba(0,0,0,0) 70%)}
.hero-content{position:absolute;left:var(--side);top:48%;transform:translateY(-50%);color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.13)}
.hero h1{
  margin:0 0 12px;
  font-family:"Avenir Next","Avenir",sans-serif;
  font-size:clamp(32px,4.2vw,53px);
  font-weight:500;
  letter-spacing:.12em
}
.hero-services{
  margin:0;
  font-family:"Avenir Next","Avenir",sans-serif;
  font-size:clamp(13px,1.5vw,18px);
  font-weight:400;
  letter-spacing:.08em
}
.hero-copy{
  margin:34px 0 0;
  font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",sans-serif;
  font-size:clamp(15px,1.55vw,18px);
  font-weight:300;
  line-height:1.9;
  letter-spacing:.08em
}
.scroll{
  position:absolute;
  left:37px;
  bottom:40px;
  color:#fff;
  display:flex;
  align-items:center;
  gap:14px;
  writing-mode:vertical-rl;
  font-family:"Avenir Next","Avenir",sans-serif;
  font-size:11px;
  font-weight:500;
  letter-spacing:.18em
}
.scroll i{display:block;width:1px;height:60px;background:#fff}
.section{padding:62px var(--side) 0}
.section-label{
  font-family:"Avenir Next","Avenir",sans-serif;
  font-size:12px;
  font-weight:500;
  letter-spacing:.18em;
  margin-bottom:42px
}
.section-label:after{content:"";display:block;width:23px;height:1px;background:var(--ink);margin-top:10px}
.about-grid{
  display:grid;
  grid-template-columns:minmax(320px,.72fr) minmax(520px,1.28fr);
  gap:clamp(64px,8vw,110px);
  align-items:start
}
.about-copy{max-width:430px}
.about-copy h2{
  font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",sans-serif;
  font-size:clamp(22px,2vw,28px);
  font-weight:400;
  line-height:1.8;
  letter-spacing:.025em;
  margin:4px 0 34px
}
.about-copy p{
  font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",sans-serif;
  font-size:clamp(15px,1.1vw,17px);
  font-weight:300;
  line-height:2.1;
  letter-spacing:.015em;
  margin:0 0 30px
}
.about-image{margin:0;overflow:hidden}
.about-image img{width:100%;height:410px;object-fit:cover;display:block}
.create{padding-top:48px}
.service-grid{display:grid;grid-template-columns:repeat(3,1fr)}
.service{min-height:215px;text-align:center;padding:6px 38px 25px}
.service+.service{border-left:1px solid var(--line)}
.service svg{width:32px;height:32px;fill:none;stroke:currentColor;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round;margin-bottom:8px}
.service h3{
  font-family:"Avenir Next","Avenir",sans-serif;
  font-size:20px;
  font-weight:400;
  letter-spacing:.03em;
  margin:4px 0 20px
}
.service p{
  font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",sans-serif;
  font-size:14px;
  font-weight:300;
  line-height:1.95;
  letter-spacing:.01em;
  margin:0
}
.contact{padding-top:46px;padding-bottom:28px}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
.contact-grid p{
  font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",sans-serif;
  font-size:14px;
  font-weight:300;
  line-height:1.95;
  margin:0 0 10px
}
.email{
  font-family:"Avenir Next","Avenir",sans-serif;
  font-size:16px;
  font-weight:400;
  border-bottom:1px solid transparent;
  transition:.25s
}
.email:hover{border-color:currentColor}
.ps{border-left:1px solid var(--line);padding-left:62px}
.ps strong{font-size:12px;font-weight:500}
.ps p{margin-top:8px}
footer{display:grid;grid-template-columns:1fr auto 1fr;align-items:end;margin-top:36px;font-size:10px;font-weight:400;letter-spacing:.1em}
footer span:nth-child(2){opacity:.62}
footer a{text-align:right}
footer a:hover{text-decoration:underline}
@media(max-width:800px){
  :root{--side:24px}
  .site-header{height:66px}
  .wordmark{
  display:flex;
  align-items:center;
  width:clamp(190px,22vw,305px);
}
.wordmark img{
  width:100%;
  height:auto;
  display:block;
}
  .desktop-nav{display:none}
  .menu-button{margin-left:auto}
  .menu-button.active span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .menu-button.active span:nth-child(2){opacity:0}
  .menu-button.active span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  .mobile-menu{
    display:flex;position:fixed;z-index:15;inset:66px 0 auto;height:0;overflow:hidden;
    background:var(--bg);flex-direction:column;justify-content:center;align-items:center;
    gap:30px;font-size:14px;font-weight:500;letter-spacing:.18em;transition:height .35s
  }
  .mobile-menu.open{height:calc(100dvh - 66px)}
  .hero{height:72svh;min-height:470px;max-height:610px;background-position:58% center}
  .hero-overlay{background:linear-gradient(90deg,rgba(0,0,0,.36),rgba(0,0,0,.03) 78%)}
  .hero-content{top:auto;bottom:70px;transform:none}
  .hero h1{
  margin:0 0 12px;
  font-family:"Avenir Next","Avenir",sans-serif;
  font-size:clamp(32px,4.2vw,53px);
  font-weight:500;
  letter-spacing:.12em
}
  .hero-services{
  margin:0;
  font-family:"Avenir Next","Avenir",sans-serif;
  font-size:clamp(13px,1.5vw,18px);
  font-weight:400;
  letter-spacing:.08em
}
  .hero-copy{
  margin:34px 0 0;
  font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",sans-serif;
  font-size:clamp(15px,1.55vw,18px);
  font-weight:300;
  line-height:1.9;
  letter-spacing:.08em
}
  .scroll{
  position:absolute;
  left:37px;
  bottom:40px;
  color:#fff;
  display:flex;
  align-items:center;
  gap:14px;
  writing-mode:vertical-rl;
  font-family:"Avenir Next","Avenir",sans-serif;
  font-size:11px;
  font-weight:500;
  letter-spacing:.18em
}
  .section{padding-top:60px}
  .about-grid{grid-template-columns:1fr;gap:35px}
  .about-copy{max-width:none}
  .about-copy h2{
  font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",sans-serif;
  font-size:clamp(22px,2vw,28px);
  font-weight:400;
  line-height:1.8;
  letter-spacing:.025em;
  margin:4px 0 34px
}
  .about-copy p{
  font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",sans-serif;
  font-size:clamp(15px,1.1vw,17px);
  font-weight:300;
  line-height:2.1;
  letter-spacing:.015em;
  margin:0 0 30px
}
  .about-image img{height:62vw;min-height:260px}
  .service-grid{grid-template-columns:1fr}
  .service{padding:28px 5px 35px;min-height:0}
  .service+.service{border-left:0;border-top:1px solid var(--line)}
  .service p{
  font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",sans-serif;
  font-size:14px;
  font-weight:300;
  line-height:1.95;
  letter-spacing:.01em;
  margin:0
}
  .contact-grid{grid-template-columns:1fr;gap:42px}
  .ps{border-left:0;border-top:1px solid var(--line);padding:30px 0 0}
  footer{grid-template-columns:1fr auto;gap:18px 10px;margin-top:55px}
  footer span:nth-child(2){display:none}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}




.header-instagram{
  width:22px;
  height:22px;
  margin-left:28px;
  display:grid;
  place-items:center;
  transition:transform .28s ease, opacity .28s ease;
}
.header-instagram svg{
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.35;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.header-instagram:hover{
  transform:scale(1.08) rotate(2deg);
  opacity:.72;
}

.hero-content{
  animation:heroFade .9s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes heroFade{
  from{opacity:0;transform:translateY(calc(-50% + 14px))}
  to{opacity:1;transform:translateY(-50%)}
}
.scroll i{
  transform-origin:top;
  animation:scrollLine 2.2s ease-in-out infinite;
}
@keyframes scrollLine{
  0%,100%{transform:scaleY(.72);opacity:.55}
  50%{transform:scaleY(1);opacity:1}
}
.service{
  transition:transform .28s ease;
}
.service svg,
.service h3{
  font-family:"Avenir Next","Avenir",sans-serif;
  font-size:20px;
  font-weight:400;
  letter-spacing:.03em;
  margin:4px 0 20px
}
.service:hover svg{
  transform:translateY(-3px);
}
.service:hover h3{
  transform:translateY(-1px);
}
.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .8s ease, transform .8s cubic-bezier(.22,.61,.36,1);
}
.reveal.is-visible{
  opacity:1;
  transform:none;
}

@media(max-width:800px){
  .header-instagram{margin-left:auto;margin-right:18px}
  .menu-button{margin-left:0}
  .hero-content{animation:none}
}

@media(max-width:800px){
  .wordmark{width:175px}
}

/* Final mobile hero typography fix */
@media(max-width:800px){
  .scroll{
    display:none !important;
  }
  .hero-content{
    left:22px;
    right:18px;
    bottom:58px;
    width:auto;
  }
  .hero h1{
    font-size:clamp(27px,8.2vw,32px);
    line-height:1.15;
    letter-spacing:.075em;
    white-space:nowrap;
  }
  .hero-services{
    margin-top:14px;
    font-size:clamp(12px,3.6vw,14px);
    line-height:1.5;
    letter-spacing:.035em;
    white-space:nowrap;
  }
  .hero-copy{
    margin-top:30px;
    font-size:14px;
    line-height:1.95;
    letter-spacing:.035em;
  }
}

@media(max-width:370px){
  .hero h1{
    font-size:25px;
    letter-spacing:.055em;
  }
  .hero-services{
    font-size:11px;
  }
}


/* Mobile hero copy final position */
@media(max-width:800px){
  .hero-content{
    top:54px !important;
    bottom:auto !important;
    left:22px !important;
    right:auto !important;
    width:72% !important;
    max-width:320px !important;
    transform:none !important;
  }

  .hero h1{
    margin:0 0 10px !important;
    font-size:clamp(27px,8vw,31px) !important;
    line-height:1.15 !important;
    letter-spacing:.07em !important;
    white-space:nowrap !important;
  }

  .hero-services{
    margin:0 !important;
    font-size:clamp(11px,3.45vw,13px) !important;
    line-height:1.5 !important;
    letter-spacing:.025em !important;
    white-space:nowrap !important;
  }

  .hero-copy{
    margin-top:26px !important;
    font-size:13px !important;
    line-height:1.9 !important;
    letter-spacing:.025em !important;
    white-space:nowrap !important;
  }
}

@media(max-width:370px){
  .hero-content{
    width:76% !important;
  }

  .hero h1{
    font-size:25px !important;
  }

  .hero-services{
    font-size:10.5px !important;
  }

  .hero-copy{
    font-size:12.5px !important;
  }
}


/* ===== Mobile Hero Fine Tuning ===== */
@media (max-width:800px){
  .hero-content{
    top:54px !important;
    left:22px !important;
    right:auto !important;
    bottom:auto !important;
    width:68% !important;
    max-width:300px !important;
    transform:none !important;
  }
  .hero h1{
    font-size:clamp(28px,7.8vw,31px) !important;
    letter-spacing:.045em !important;
    line-height:1.12 !important;
    margin-bottom:10px !important;
    white-space:nowrap !important;
  }
  .hero-services{
    font-size:13px !important;
    margin-bottom:24px !important;
    white-space:nowrap !important;
  }
  .hero-copy{
    font-size:13px !important;
    line-height:1.9 !important;
  }
}


/* ===== Desktop Header Menu Fix ===== */
@media (min-width:801px){
  /* PC版のみ3本線を非表示 */
  .menu-button{
    display:none !important;
  }
}