/* ============================================
   RESET & BASE
============================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{
  font-family:"Noto Serif JP","Shippori Mincho",serif;
  background:#f5f2ec;
  color:#1a1a1a;
  line-height:1.8;
  overflow-x:hidden;
  letter-spacing:.04em;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
ul{list-style:none}

/* ============================================
   PRELOADER
============================================ */
.preloader{
  position:fixed;inset:0;background:#0d0d0d;z-index:9999;
  display:flex;align-items:center;justify-content:center;
  transition:opacity .8s ease,visibility .8s ease;
}
.preloader.hidden{opacity:0;visibility:hidden}
.preloader-inner{text-align:center;color:#f5f2ec}
.preloader-logo{
  font-family:"Cormorant Garamond",serif;
  font-size:clamp(2rem,6vw,4rem);
  letter-spacing:.5em;
  padding-left:.5em;
  overflow:hidden;
}
.preloader-logo span{
  display:inline-block;opacity:0;transform:translateY(30px);
  animation:letterUp .8s cubic-bezier(.2,.8,.2,1) forwards;
}
.preloader-logo span:nth-child(1){animation-delay:.1s}
.preloader-logo span:nth-child(2){animation-delay:.2s}
.preloader-logo span:nth-child(3){animation-delay:.3s}
.preloader-logo span:nth-child(4){animation-delay:.4s}
.preloader-logo span:nth-child(5){animation-delay:.5s}
.preloader-logo span:nth-child(6){animation-delay:.6s}
.preloader-logo span:nth-child(7){animation-delay:.7s}
.preloader-logo span:nth-child(8){animation-delay:.8s}
.preloader-bar{
  width:120px;height:1px;background:rgba(245,242,236,.2);
  margin:2rem auto 0;position:relative;overflow:hidden;
}
.preloader-bar::after{
  content:"";position:absolute;inset:0;background:#c9a961;
  transform:translateX(-100%);
  animation:barLoad 1.8s cubic-bezier(.7,0,.3,1) forwards;
  animation-delay:.5s;
}
@keyframes letterUp{to{opacity:1;transform:translateY(0)}}
@keyframes barLoad{to{transform:translateX(0)}}

/* ============================================
   CUSTOM CURSOR
============================================ */
.cursor,.cursor-follow{
  position:fixed;top:0;left:0;pointer-events:none;z-index:9998;
  border-radius:50%;transition:transform .15s ease,width .3s ease,height .3s ease,background .3s ease;
  mix-blend-mode:difference;
}
.cursor{width:8px;height:8px;background:#f5f2ec;transform:translate(-50%,-50%)}
.cursor-follow{width:36px;height:36px;border:1px solid #f5f2ec;transform:translate(-50%,-50%);transition:transform .4s cubic-bezier(.2,.8,.2,1),width .3s,height .3s}
.cursor.active{width:60px;height:60px;background:#c9a961}
@media(hover:none),(max-width:768px){.cursor,.cursor-follow{display:none}}

/* ============================================
   HEADER / NAVIGATION
============================================ */
.header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  padding:1.5rem 3rem;
  display:flex;justify-content:space-between;align-items:center;
  transition:background .4s ease,padding .4s ease,backdrop-filter .4s ease;
}
.header.scrolled{
  background:rgba(245,242,236,.85);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  padding:1rem 3rem;
  box-shadow:0 1px 0 rgba(26,26,26,.06);
}
.logo{
  font-family:"Cormorant Garamond","Shippori Mincho",serif;
  font-size:1.5rem;letter-spacing:.35em;font-weight:500;
  padding-left:.35em;
  position:relative;overflow:hidden;
}
.logo-mark{display:inline-block;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.logo:hover .logo-mark{transform:translateY(-100%)}
.logo-mark-hover{
  position:absolute;left:0;top:100%;
  transition:transform .6s cubic-bezier(.2,.8,.2,1);
  color:#c9a961;padding-left:.35em;
}
.logo:hover .logo-mark-hover{transform:translateY(-100%)}
.nav-toggle{
  width:48px;height:48px;position:relative;z-index:110;
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;
}
.nav-toggle span{
  display:block;width:26px;height:1px;background:#1a1a1a;
  transition:transform .5s cubic-bezier(.2,.8,.2,1),background .3s;
}
.nav-toggle.active span{background:#f5f2ec}
.nav-toggle.active span:nth-child(1){transform:translateY(3.5px) rotate(45deg)}
.nav-toggle.active span:nth-child(2){transform:translateY(-3.5px) rotate(-45deg)}

.nav-overlay{
  position:fixed;inset:0;background:#0d0d0d;z-index:105;
  clip-path:circle(0 at calc(100% - 3rem) 2.5rem);
  transition:clip-path 1s cubic-bezier(.77,0,.175,1);
  display:flex;align-items:center;justify-content:center;
}
.nav-overlay.active{clip-path:circle(150% at calc(100% - 3rem) 2.5rem)}
.nav-menu{text-align:center;color:#f5f2ec;width:100%;padding:0 2rem}
.nav-menu li{overflow:hidden;margin:1rem 0}
.nav-menu a{
  display:inline-block;
  font-family:"Shippori Mincho",serif;
  font-size:clamp(1.8rem,5vw,3.5rem);
  letter-spacing:.15em;
  position:relative;
  transform:translateY(120%);
  transition:transform .8s cubic-bezier(.7,0,.3,1),color .3s;
}
.nav-overlay.active .nav-menu a{transform:translateY(0)}
.nav-menu li:nth-child(1) a{transition-delay:.3s}
.nav-menu li:nth-child(2) a{transition-delay:.4s}
.nav-menu li:nth-child(3) a{transition-delay:.5s}
.nav-menu li:nth-child(4) a{transition-delay:.6s}
.nav-menu li:nth-child(5) a{transition-delay:.7s}
.nav-menu a:hover{color:#c9a961;letter-spacing:.25em}
.nav-menu .en{
  display:block;font-family:"Cormorant Garamond",serif;
  font-size:.7rem;letter-spacing:.4em;color:#c9a961;
  margin-top:.5rem;font-style:italic;
}

/* ============================================
   HERO / FV
============================================ */
.hero{
  min-height:100vh;min-height:100svh;position:relative;overflow:hidden;
  display:flex;align-items:center;
  background:#f5f2ec;
  padding:0 3rem;
}
.hero-bg{
  position:absolute;inset:0;overflow:hidden;
}
.hero-bg-img{
  position:absolute;top:0;right:0;width:55%;height:100%;
  background:linear-gradient(135deg,#c8c4bc 0%,#a8a49c 100%);
  overflow:hidden;
}
.hero-bg-img::before{
  content:"画像が入ります";
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  font-family:"Shippori Mincho",serif;
  color:rgba(245,242,236,.6);letter-spacing:.3em;font-size:.9rem;
}
.hero-bg-img::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(135deg,transparent 40%,rgba(201,169,97,.15) 100%);
  animation:shimmer 4s ease-in-out infinite;
}
@keyframes shimmer{0%,100%{opacity:.3}50%{opacity:.8}}

.hero-content{
  position:relative;z-index:2;max-width:1400px;margin:0 auto;
  width:100%;padding-top:6rem;
}
.hero-label{
  font-family:"Cormorant Garamond",serif;
  font-size:.85rem;letter-spacing:.6em;
  color:#c9a961;margin-bottom:2rem;
  opacity:0;animation:fadeUp 1s ease .8s forwards;
  padding-left:.6em;
}
.hero-title{
  font-family:"Shippori Mincho",serif;
  font-size:clamp(3rem,8vw,7rem);
  line-height:1.15;font-weight:500;
  letter-spacing:.05em;
  margin-bottom:2rem;
}
.hero-title .line{overflow:hidden;display:block}
.hero-title .line span{
  display:inline-block;transform:translateY(120%);
  animation:lineUp 1.2s cubic-bezier(.2,.8,.2,1) forwards;
}
.hero-title .line:nth-child(1) span{animation-delay:1s}
.hero-title .line:nth-child(2) span{animation-delay:1.2s}
.hero-title .line:nth-child(3) span{animation-delay:1.4s}
.hero-title .accent{color:#c9a961;font-style:italic;font-family:"Cormorant Garamond",serif}
.hero-desc{
  font-size:1rem;line-height:2.2;
  max-width:480px;margin-bottom:3rem;
  opacity:0;animation:fadeUp 1s ease 1.6s forwards;
  color:#4a4a4a;
}
.hero-cta{
  display:inline-flex;align-items:center;gap:1.5rem;
  padding:1.2rem 2.5rem;background:#1a1a1a;color:#f5f2ec;
  font-family:"Cormorant Garamond",serif;
  letter-spacing:.3em;font-size:.85rem;
  position:relative;overflow:hidden;
  opacity:0;animation:fadeUp 1s ease 1.8s forwards;
  transition:letter-spacing .4s ease;
}
.hero-cta::before{
  content:"";position:absolute;inset:0;background:#c9a961;
  transform:translateY(100%);transition:transform .5s cubic-bezier(.7,0,.3,1);z-index:0;
}
.hero-cta:hover::before{transform:translateY(0)}
.hero-cta:hover{letter-spacing:.4em}
.hero-cta span{position:relative;z-index:1}
.hero-cta .arrow{
  display:inline-block;width:30px;height:1px;background:#f5f2ec;position:relative;
  transition:width .4s ease;
}
.hero-cta:hover .arrow{width:50px}
.hero-cta .arrow::after{
  content:"";position:absolute;right:0;top:-3px;width:8px;height:8px;
  border-top:1px solid #f5f2ec;border-right:1px solid #f5f2ec;transform:rotate(45deg);
}

.hero-scroll{
  position:absolute;bottom:2rem;left:3rem;
  font-family:"Cormorant Garamond",serif;letter-spacing:.4em;font-size:.75rem;
  color:#4a4a4a;writing-mode:vertical-rl;
  opacity:0;animation:fadeUp 1s ease 2s forwards;
}
.hero-scroll::after{
  content:"";display:block;width:1px;height:60px;background:#1a1a1a;
  margin:1rem auto 0;position:relative;overflow:hidden;
}
.hero-scroll-line{
  position:absolute;bottom:2rem;left:calc(3rem + 8px);
  width:1px;height:60px;overflow:hidden;
}
.hero-scroll-line::after{
  content:"";position:absolute;inset:0;background:#c9a961;
  animation:scrollLine 2.5s ease-in-out infinite;
}
@keyframes scrollLine{
  0%{transform:translateY(-100%)}
  50%{transform:translateY(0)}
  100%{transform:translateY(100%)}
}

.hero-number{
  position:absolute;top:50%;right:3rem;transform:translateY(-50%);
  font-family:"Cormorant Garamond",serif;
  font-size:14rem;color:rgba(26,26,26,.04);
  font-weight:300;letter-spacing:-.05em;line-height:1;
  z-index:1;pointer-events:none;
  opacity:0;animation:fadeUp 1.5s ease 2s forwards;
}

@keyframes fadeUp{
  from{opacity:0;transform:translateY(30px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes lineUp{to{transform:translateY(0)}}

/* ============================================
   SECTION COMMON
============================================ */
section{padding:8rem 3rem;position:relative}
.section-inner{max-width:1400px;margin:0 auto}
.section-label{
  font-family:"Cormorant Garamond",serif;
  font-size:.8rem;letter-spacing:.6em;color:#c9a961;
  margin-bottom:1.5rem;display:flex;align-items:center;gap:1rem;
  padding-left:.6em;
}
.section-label::before{
  content:"";width:40px;height:1px;background:#c9a961;
}
.section-title{
  font-family:"Shippori Mincho",serif;
  font-size:clamp(2rem,5vw,4rem);
  line-height:1.3;font-weight:500;
  margin-bottom:3rem;letter-spacing:.05em;
}
.section-title .accent{color:#c9a961;font-family:"Cormorant Garamond",serif;font-style:italic}

/* Reveal Animation */
.reveal{opacity:0;transform:translateY(60px);transition:opacity 1.2s cubic-bezier(.2,.8,.2,1),transform 1.2s cubic-bezier(.2,.8,.2,1)}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-delay-1{transition-delay:.15s}
.reveal-delay-2{transition-delay:.3s}
.reveal-delay-3{transition-delay:.45s}
.reveal-delay-4{transition-delay:.6s}

.text-reveal{overflow:hidden;display:block}
.text-reveal-inner{display:block;transform:translateY(120%);transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.visible .text-reveal-inner{transform:translateY(0)}

/* ============================================
   ABOUT SECTION
============================================ */
.about{background:#f5f2ec;position:relative}
.about-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:6rem;align-items:center;
}
.about-img{
  aspect-ratio:4/5;background:linear-gradient(135deg,#c8c4bc,#a8a49c);
  position:relative;overflow:hidden;
}
.about-img::before{
  content:"画像が入ります";
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  color:rgba(245,242,236,.6);letter-spacing:.3em;font-size:.85rem;
}
.about-img::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(45deg,transparent,rgba(201,169,97,.1));
}
.about-img-wrap{position:relative}
.about-img-wrap::before{
  content:"EST. 2024";
  position:absolute;top:-30px;left:-30px;z-index:2;
  font-family:"Cormorant Garamond",serif;letter-spacing:.4em;font-size:.75rem;
  color:#c9a961;background:#f5f2ec;padding:.8rem 1.2rem;
  border:1px solid #c9a961;
}
.about-desc{font-size:1rem;line-height:2.2;color:#4a4a4a;margin-bottom:2rem}
.about-desc strong{color:#1a1a1a;font-weight:500}
.about-stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:3rem;
  padding-top:2rem;border-top:1px solid rgba(26,26,26,.1);
}
.stat-item{text-align:left}
.stat-num{
  font-family:"Cormorant Garamond",serif;
  font-size:3rem;color:#c9a961;line-height:1;font-weight:300;
  display:block;margin-bottom:.5rem;
}
.stat-label{font-size:.75rem;letter-spacing:.3em;color:#4a4a4a}

/* ============================================
   PHILOSOPHY SECTION
============================================ */
.philosophy{
  background:#1a1a1a;color:#f5f2ec;padding:10rem 3rem;
  position:relative;overflow:hidden;
}
.philosophy::before{
  content:"PHILOSOPHY";
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  font-family:"Cormorant Garamond",serif;
  font-size:clamp(8rem,20vw,20rem);
  color:rgba(245,242,236,.03);font-weight:300;
  letter-spacing:.05em;pointer-events:none;white-space:nowrap;
}
.philosophy-inner{position:relative;z-index:2;text-align:center;max-width:900px;margin:0 auto}
.philosophy-label{
  font-family:"Cormorant Garamond",serif;letter-spacing:.6em;font-size:.85rem;
  color:#c9a961;margin-bottom:2rem;padding-left:.6em;
}
.philosophy-title{
  font-family:"Shippori Mincho",serif;
  font-size:clamp(2.5rem,6vw,5rem);
  line-height:1.5;margin-bottom:3rem;font-weight:400;letter-spacing:.1em;
}
.philosophy-title .accent{color:#c9a961;font-style:italic;font-family:"Cormorant Garamond",serif}
.philosophy-desc{
  font-size:1.05rem;line-height:2.4;color:rgba(245,242,236,.75);
  max-width:700px;margin:0 auto;
}
.philosophy-values{
  display:grid;grid-template-columns:repeat(3,1fr);gap:3rem;margin-top:6rem;
}
.value-item{text-align:center;padding:2rem 1rem;position:relative}
.value-item::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:0;height:1px;background:#c9a961;transition:width .8s ease;
}
.value-item.visible::before{width:60px}
.value-num{
  font-family:"Cormorant Garamond",serif;
  font-size:.85rem;letter-spacing:.4em;color:#c9a961;margin-bottom:2rem;
  padding-left:.4em;
}
.value-title{
  font-family:"Shippori Mincho",serif;font-size:1.5rem;
  margin-bottom:1.5rem;letter-spacing:.15em;
}
.value-desc{font-size:.9rem;line-height:2;color:rgba(245,242,236,.6)}

/* ============================================
   BUSINESS SECTION
============================================ */
.business{padding:10rem 3rem;background:#f5f2ec}
.business-list{margin-top:5rem}
.business-item{
  display:grid;grid-template-columns:1fr 1fr;gap:5rem;
  padding:4rem 0;border-bottom:1px solid rgba(26,26,26,.1);
  align-items:center;position:relative;
}
.business-item:first-child{border-top:1px solid rgba(26,26,26,.1)}
.business-item-img{
  aspect-ratio:16/10;background:linear-gradient(135deg,#c8c4bc,#a8a49c);
  position:relative;overflow:hidden;
  transition:transform .8s cubic-bezier(.2,.8,.2,1);
}
.business-item-img::before{
  content:"画像が入ります";
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  color:rgba(245,242,236,.6);letter-spacing:.3em;font-size:.85rem;
}
.business-item:hover .business-item-img{transform:scale(.97)}
.business-item:nth-child(even) .business-item-img{order:2}
.business-num{
  font-family:"Cormorant Garamond",serif;
  font-size:.85rem;letter-spacing:.5em;color:#c9a961;margin-bottom:1.5rem;
  padding-left:.5em;
}
.business-title{
  font-family:"Shippori Mincho",serif;
  font-size:clamp(2rem,4vw,3rem);
  margin-bottom:1rem;font-weight:500;letter-spacing:.1em;
}
.business-en{
  font-family:"Cormorant Garamond",serif;font-style:italic;
  color:#c9a961;letter-spacing:.15em;font-size:1rem;margin-bottom:2rem;
  padding-left:.15em;
}
.business-desc{font-size:.95rem;line-height:2.2;color:#4a4a4a;margin-bottom:2.5rem}
.business-link{
  display:inline-flex;align-items:center;gap:1rem;
  font-family:"Cormorant Garamond",serif;letter-spacing:.4em;font-size:.85rem;
  padding-bottom:.5rem;border-bottom:1px solid #1a1a1a;
  transition:color .3s ease,letter-spacing .4s ease,gap .4s ease;
  padding-left:.4em;
}
.business-link:hover{color:#c9a961;border-color:#c9a961;letter-spacing:.5em;gap:1.5rem}
.business-link .arrow{
  display:inline-block;width:20px;height:1px;background:currentColor;position:relative;
}
.business-link .arrow::after{
  content:"";position:absolute;right:0;top:-3px;width:6px;height:6px;
  border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg);
}

/* ============================================
   MARQUEE
============================================ */
.marquee{
  padding:3rem 0;background:#f5f2ec;border-top:1px solid rgba(26,26,26,.1);
  border-bottom:1px solid rgba(26,26,26,.1);overflow:hidden;
}
.marquee-track{
  display:flex;gap:4rem;animation:marquee 30s linear infinite;
  white-space:nowrap;
}
.marquee-item{
  font-family:"Cormorant Garamond",serif;font-style:italic;
  font-size:clamp(2rem,5vw,4rem);color:rgba(26,26,26,.15);
  letter-spacing:.05em;
}
.marquee-item::after{
  content:"◆";margin-left:4rem;color:#c9a961;
}
@keyframes marquee{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

/* ============================================
   CONTACT CTA
============================================ */
.contact-cta{
  padding:10rem 3rem;background:#f5f2ec;text-align:center;
  position:relative;overflow:hidden;
}
.contact-cta-title{
  font-family:"Shippori Mincho",serif;
  font-size:clamp(2.5rem,7vw,6rem);
  line-height:1.3;margin-bottom:3rem;letter-spacing:.08em;font-weight:400;
}
.contact-cta-title .accent{color:#c9a961;font-family:"Cormorant Garamond",serif;font-style:italic}
.contact-cta-desc{
  font-size:1rem;line-height:2.2;color:#4a4a4a;
  max-width:600px;margin:0 auto 4rem;
}
.contact-cta-btn{
  display:inline-flex;align-items:center;gap:1.5rem;
  padding:1.5rem 4rem;background:#1a1a1a;color:#f5f2ec;
  font-family:"Cormorant Garamond",serif;letter-spacing:.4em;font-size:.9rem;
  position:relative;overflow:hidden;transition:letter-spacing .4s ease;
}
.contact-cta-btn::before{
  content:"";position:absolute;inset:0;background:#c9a961;
  transform:translateY(100%);transition:transform .5s cubic-bezier(.7,0,.3,1);
}
.contact-cta-btn:hover::before{transform:translateY(0)}
.contact-cta-btn:hover{letter-spacing:.5em}
.contact-cta-btn span{position:relative;z-index:1}

/* ============================================
   FOOTER
============================================ */
.footer{
  background:#0d0d0d;color:#f5f2ec;padding:6rem 3rem 2rem;
  position:relative;overflow:hidden;
}
.footer::before{
  content:"SO-LIGHT";
  position:absolute;bottom:-4rem;left:50%;transform:translateX(-50%);
  font-family:"Cormorant Garamond",serif;
  font-size:clamp(6rem,18vw,18rem);
  color:rgba(245,242,236,.03);font-weight:300;
  letter-spacing:.1em;pointer-events:none;white-space:nowrap;
}
.footer-inner{max-width:1400px;margin:0 auto;position:relative;z-index:2}
.footer-grid{
  display:grid;grid-template-columns:2fr 1fr 1fr;gap:4rem;
  padding-bottom:4rem;border-bottom:1px solid rgba(245,242,236,.1);
}
.footer-logo{
  font-family:"Cormorant Garamond",serif;
  font-size:2rem;letter-spacing:.35em;margin-bottom:2rem;
  padding-left:.35em;
}
.footer-info{font-size:.85rem;line-height:2;color:rgba(245,242,236,.6)}
.footer-info strong{color:#f5f2ec;font-weight:500;display:block;margin-bottom:.5rem;letter-spacing:.1em}
.footer-title{
  font-family:"Cormorant Garamond",serif;
  letter-spacing:.4em;font-size:.85rem;color:#c9a961;margin-bottom:2rem;
  padding-left:.4em;
}
.footer-nav li{margin-bottom:1rem}
.footer-nav a{
  font-size:.9rem;letter-spacing:.15em;
  position:relative;transition:color .3s,padding .3s;
}
.footer-nav a::before{
  content:"—";margin-right:.5rem;color:#c9a961;opacity:0;transition:opacity .3s;
}
.footer-nav a:hover{color:#c9a961;padding-left:.5rem}
.footer-nav a:hover::before{opacity:1}
.footer-contact{font-size:.85rem;line-height:2;color:rgba(245,242,236,.6)}
.footer-contact a{transition:color .3s;display:block;margin-bottom:.5rem}
.footer-contact a:hover{color:#c9a961}
.footer-bottom{
  display:flex;justify-content:space-between;align-items:center;
  padding-top:2rem;font-size:.75rem;letter-spacing:.3em;color:rgba(245,242,236,.4);
}

/* ============================================
   COMPANY PROFILE SECTION
============================================ */
.company{background:#efece5;padding:10rem 3rem;position:relative;overflow:hidden}
.company::before{
  content:"PROFILE";
  position:absolute;top:6rem;right:-2rem;
  font-family:"Cormorant Garamond",serif;
  font-size:clamp(6rem,14vw,14rem);
  color:rgba(26,26,26,.04);font-weight:300;
  letter-spacing:.05em;pointer-events:none;line-height:1;
}
.company-grid{
  display:grid;grid-template-columns:1fr 1.4fr;gap:6rem;align-items:flex-start;
  position:relative;z-index:2;
}
.company-head{position:sticky;top:8rem}
.company-mark{
  margin-top:3rem;padding-top:2rem;border-top:1px solid rgba(26,26,26,.15);
  display:flex;flex-direction:column;gap:.5rem;
}
.company-mark-en{
  font-family:"Cormorant Garamond",serif;letter-spacing:.4em;font-size:.85rem;
  color:#c9a961;padding-left:.4em;
}
.company-mark-ja{
  font-family:"Shippori Mincho",serif;letter-spacing:.2em;font-size:1.1rem;color:#1a1a1a;
}
.company-list{display:flex;flex-direction:column}
.company-item{
  display:grid;grid-template-columns:220px 1fr;gap:2rem;
  padding:1.8rem 0;border-bottom:1px solid rgba(26,26,26,.12);
  align-items:flex-start;transition:padding-left .4s ease,background .4s ease;
}
.company-item:first-child{border-top:1px solid rgba(26,26,26,.12)}
.company-item:hover{padding-left:1rem;background:rgba(201,169,97,.04)}
.company-item dt{
  font-family:"Shippori Mincho",serif;font-size:1rem;letter-spacing:.2em;
  color:#1a1a1a;font-weight:500;display:flex;align-items:center;gap:1.2rem;
}
.company-item dt .c-num{
  font-family:"Cormorant Garamond",serif;font-style:italic;font-size:.8rem;
  letter-spacing:.2em;color:#c9a961;padding-left:.2em;
}
.company-item dd{
  font-size:.95rem;line-height:1.9;color:#4a4a4a;letter-spacing:.05em;
}
.company-item dd .c-en{
  display:inline-block;font-family:"Cormorant Garamond",serif;font-style:italic;
  font-size:.8rem;letter-spacing:.3em;color:#c9a961;padding-left:.3em;
}
.company-item dd a{transition:color .3s ease;border-bottom:1px solid transparent}
.company-item dd a:hover{color:#c9a961;border-color:#c9a961}

/* ============================================
   RESPONSIVE
============================================ */
@media(max-width:1024px){
  .about-grid,.business-item,.company-grid{grid-template-columns:1fr;gap:3rem}
  .company-head{position:static}
  .business-item:nth-child(even) .business-item-img{order:0}
  .philosophy-values{grid-template-columns:1fr;gap:2rem}
  .hero-number{font-size:8rem;right:1rem}
  .footer-grid{grid-template-columns:1fr;gap:3rem}
}
@media(max-width:768px){
  section{padding:5rem 1.5rem}
  .header{padding:1rem 1.5rem}
  .header.scrolled{padding:1rem 1.5rem}
  .hero{padding:0 1.5rem}
  .hero-bg-img{width:100%;opacity:.3}
  .hero-scroll{display:none}
  .hero-scroll-line{display:none}
  .about-stats{grid-template-columns:1fr;gap:2rem}
  .philosophy{padding:6rem 1.5rem}
  .business{padding:6rem 1.5rem}
  .contact-cta{padding:6rem 1.5rem}
  .footer{padding:4rem 1.5rem 2rem}
  .footer-bottom{flex-direction:column;gap:1rem;text-align:center}
  .about-img-wrap::before{top:-15px;left:-15px}
}

/* ============================================
   SCROLL PROGRESS
============================================ */
.scroll-progress{
  position:fixed;top:0;left:0;width:0;height:2px;
  background:linear-gradient(90deg,#c9a961,#e8c987);z-index:999;
  transition:width .1s ease;
}

/* ============================================
   PAGE HERO (SUB PAGES)
============================================ */
.page-hero{
  min-height:70vh;padding:12rem 3rem 6rem;background:#1a1a1a;color:#f5f2ec;
  position:relative;overflow:hidden;display:flex;align-items:center;
}
.page-hero-bg{
  position:absolute;top:0;right:0;width:45%;height:100%;
  background:linear-gradient(135deg,#3a3a3a 0%,#1a1a1a 100%);
  opacity:.5;
}
.page-hero-bg::before{
  content:"画像が入ります";
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  color:rgba(245,242,236,.3);letter-spacing:.3em;font-size:.85rem;
}
.page-hero-title .text-reveal-inner{animation:lineUp 1.2s cubic-bezier(.2,.8,.2,1) .6s forwards}
.page-hero-inner{position:relative;z-index:2;max-width:1400px;margin:0 auto;width:100%}
.page-hero-label{
  font-family:"Cormorant Garamond",serif;
  letter-spacing:.6em;font-size:.85rem;color:#c9a961;margin-bottom:2rem;
  padding-left:.6em;
  opacity:0;animation:fadeUp 1s ease .4s forwards;
}
.page-hero-title{
  font-family:"Shippori Mincho",serif;
  font-size:clamp(3rem,7vw,6rem);
  line-height:1.2;font-weight:500;margin-bottom:1rem;letter-spacing:.1em;
}
.page-hero-en{
  font-family:"Cormorant Garamond",serif;font-style:italic;
  color:#c9a961;letter-spacing:.3em;font-size:1.2rem;margin-bottom:2rem;
  padding-left:.3em;
  opacity:0;animation:fadeUp 1s ease .8s forwards;
}
.page-hero-desc{
  font-size:1rem;line-height:2.2;color:rgba(245,242,236,.7);max-width:500px;
  opacity:0;animation:fadeUp 1s ease 1s forwards;
}

/* STRENGTH CARDS */
.strength-card{
  background:#f5f2ec;padding:3rem 2rem;text-align:center;
  border:1px solid rgba(26,26,26,.08);position:relative;overflow:hidden;
  transition:transform .5s ease,border-color .5s ease,box-shadow .5s ease;
}
.strength-card::before{
  content:"";position:absolute;top:0;left:0;width:0;height:2px;background:#c9a961;
  transition:width .6s cubic-bezier(.2,.8,.2,1);
}
.strength-card:hover::before{width:100%}
.strength-card:hover{transform:translateY(-8px);border-color:#c9a961;box-shadow:0 20px 60px rgba(26,26,26,.08)}
.strength-num{
  font-family:"Cormorant Garamond",serif;font-size:.85rem;letter-spacing:.5em;
  color:#c9a961;margin-bottom:1.5rem;padding-left:.5em;
}
.strength-title{
  font-family:"Shippori Mincho",serif;font-size:1.5rem;margin-bottom:1rem;
  letter-spacing:.15em;
}
.strength-desc{font-size:.85rem;line-height:2;color:#4a4a4a}

/* FLOW LIST */
.flow-list{margin-top:4rem;position:relative}
.flow-list::before{
  content:"";position:absolute;left:130px;top:0;bottom:0;width:1px;
  background:linear-gradient(to bottom,transparent,#c9a961,transparent);
}
.flow-item{
  display:grid;grid-template-columns:130px 1fr;gap:3rem;
  padding:2.5rem 0;position:relative;align-items:flex-start;
}
.flow-item::before{
  content:"";position:absolute;left:126px;top:3rem;width:9px;height:9px;
  border-radius:50%;background:#c9a961;
  box-shadow:0 0 0 4px #f5f2ec, 0 0 0 5px #c9a961;
}
.flow-num{
  font-family:"Cormorant Garamond",serif;letter-spacing:.4em;font-size:.85rem;
  color:#c9a961;padding-top:.5rem;padding-left:.4em;
}
.flow-content h3{
  font-family:"Shippori Mincho",serif;font-size:1.5rem;margin-bottom:1rem;
  font-weight:500;letter-spacing:.1em;
}
.flow-content p{font-size:.95rem;line-height:2;color:#4a4a4a}

/* SERVICE GRID */
.service-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem;margin-top:4rem}
.service-card{
  background:#f5f2ec;position:relative;overflow:hidden;
  transition:transform .5s ease;
}
.service-card:hover{transform:translateY(-8px)}
.service-img{
  aspect-ratio:16/10;background:linear-gradient(135deg,#c8c4bc,#a8a49c);position:relative;
}
.service-img::before{
  content:"画像が入ります";
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  color:rgba(245,242,236,.6);letter-spacing:.3em;font-size:.85rem;
}
.service-body{padding:3rem 2rem}
.service-num{
  font-family:"Cormorant Garamond",serif;letter-spacing:.5em;font-size:.85rem;
  color:#c9a961;margin-bottom:1.5rem;padding-left:.5em;
}
.service-title{
  font-family:"Shippori Mincho",serif;font-size:2rem;margin-bottom:.5rem;
  letter-spacing:.15em;
}
.service-en{
  font-family:"Cormorant Garamond",serif;font-style:italic;
  color:#c9a961;letter-spacing:.2em;font-size:1rem;margin-bottom:2rem;
  padding-left:.2em;
}
.service-desc{font-size:.9rem;line-height:2;color:#4a4a4a;margin-bottom:2rem}
.service-list{padding-top:1.5rem;border-top:1px solid rgba(26,26,26,.1)}
.service-list li{padding:.6rem 0;font-size:.9rem;color:#4a4a4a;letter-spacing:.1em}

/* PROPERTY GRID */
.property-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:2rem}
.property-card{
  background:#fff;overflow:hidden;position:relative;
  transition:transform .5s ease,box-shadow .5s ease;
  border:1px solid rgba(26,26,26,.06);
}
.property-card:hover{transform:translateY(-8px);box-shadow:0 30px 60px rgba(26,26,26,.1)}
.property-img{
  aspect-ratio:4/3;background:linear-gradient(135deg,#c8c4bc,#a8a49c);
  position:relative;overflow:hidden;
}
.property-img::before{
  content:"画像が入ります";
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  color:rgba(245,242,236,.6);letter-spacing:.3em;font-size:.85rem;
}
.property-body{padding:2rem}
.property-location{
  font-family:"Shippori Mincho",serif;font-size:.8rem;letter-spacing:.15em;
  color:#c9a961;margin-bottom:1rem;
}
.property-title{
  font-family:"Shippori Mincho",serif;font-size:1.4rem;margin-bottom:1rem;
  letter-spacing:.1em;font-weight:500;
}
.property-price{
  font-family:"Cormorant Garamond",serif;font-size:1.6rem;color:#1a1a1a;
  margin-bottom:1.5rem;font-weight:400;letter-spacing:.05em;
}
.property-info{border-top:1px solid rgba(26,26,26,.08);padding-top:1rem}
.property-info li{
  display:flex;justify-content:space-between;padding:.5rem 0;
  font-size:.85rem;color:#4a4a4a;
}
.property-info li span:first-child{color:#c9a961;letter-spacing:.2em;font-size:.75rem}

/* FORM */
.contact-form{margin-top:2rem}
.form-row{margin-bottom:2.5rem}
.form-row-2{display:grid;grid-template-columns:1fr 1fr;gap:2rem}
.form-label{display:block}
.form-label-text{
  display:block;font-family:"Cormorant Garamond",serif;
  letter-spacing:.4em;font-size:.8rem;color:#4a4a4a;margin-bottom:1rem;
  padding-left:.4em;
}
.form-label-text em{color:#c9a961;font-style:normal;font-weight:600}
.form-input{
  width:100%;padding:1rem 0;font-size:1rem;font-family:inherit;
  background:transparent;border:none;border-bottom:1px solid rgba(26,26,26,.2);
  transition:border-color .3s ease;color:#1a1a1a;letter-spacing:.05em;
}
.form-input:focus{outline:none;border-color:#c9a961}
.form-textarea{resize:vertical;min-height:150px;padding-top:1rem}
.form-radio-group{display:flex;flex-wrap:wrap;gap:1.5rem}
.form-radio{display:flex;align-items:center;gap:.5rem;cursor:pointer;font-size:.9rem}
.form-radio input{accent-color:#c9a961;width:16px;height:16px}
.form-radio span{letter-spacing:.1em}
.form-check{display:flex;align-items:center;gap:.8rem;font-size:.9rem;cursor:pointer}
.form-check input{accent-color:#c9a961;width:16px;height:16px}
.form-check em{color:#c9a961;font-style:normal}
.form-submit-wrap{text-align:center;margin-top:4rem}
.form-submit{
  display:inline-flex;align-items:center;gap:1.5rem;
  padding:1.4rem 4rem;background:#1a1a1a;color:#f5f2ec;
  font-family:"Cormorant Garamond",serif;letter-spacing:.4em;font-size:.9rem;
  position:relative;overflow:hidden;transition:letter-spacing .4s ease;cursor:pointer;
}
.form-submit::before{
  content:"";position:absolute;inset:0;background:#c9a961;
  transform:translateY(100%);transition:transform .5s cubic-bezier(.7,0,.3,1);
}
.form-submit:hover::before{transform:translateY(0)}
.form-submit:hover{letter-spacing:.5em}
.form-submit span{position:relative;z-index:1}
.form-submit .arrow{
  display:inline-block;width:30px;height:1px;background:#f5f2ec;position:relative;
}
.form-submit .arrow::after{
  content:"";position:absolute;right:0;top:-3px;width:8px;height:8px;
  border-top:1px solid #f5f2ec;border-right:1px solid #f5f2ec;transform:rotate(45deg);
}

/* CONTACT INFO */
.contact-info{
  margin-top:6rem;padding-top:4rem;border-top:1px solid rgba(26,26,26,.1);
  display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;
}
.contact-info-item{text-align:center}
.contact-info-label{
  font-family:"Cormorant Garamond",serif;letter-spacing:.4em;font-size:.8rem;
  color:#c9a961;margin-bottom:1rem;padding-left:.4em;
}
.contact-info-value{font-size:.9rem;line-height:1.8;color:#1a1a1a;letter-spacing:.1em}
.contact-info-value a{transition:color .3s}
.contact-info-value a:hover{color:#c9a961}

@media(max-width:768px){
  .page-hero{padding:8rem 1.5rem 4rem;min-height:50vh}
  .service-grid{grid-template-columns:1fr}
  .form-row-2{grid-template-columns:1fr}
  .contact-info{grid-template-columns:1fr;gap:2.5rem;margin-top:4rem}
  .company{padding:6rem 1.5rem}
  .company-item{grid-template-columns:1fr;gap:.8rem;padding:1.5rem 0}
  .company-item:hover{padding-left:0}
}


/* ============================================
   HELPER CLASSES (replace inline styles of the pen)
============================================ */
.bg-light{background:#f5f2ec}
.bg-sand{background:#efece5}
.section-label--center{justify-content:center;text-align:center}
.section-title--center{text-align:center}
.section-inner--narrow{max-width:800px}
.stat-num small{font-size:1rem}
.strength-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:2rem;margin-top:4rem}
.properties-note{text-align:center;margin-top:5rem}
.properties-note p{color:#4a4a4a;margin-bottom:2rem;font-size:.95rem}
.form-message{margin-top:2rem;text-align:center;font-size:.9rem;letter-spacing:.1em}
.form-message.is-error{color:#a33}
.form-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.page-title-fallback{padding:12rem 3rem 6rem;max-width:900px;margin:0 auto}

/* ============================================
   RESPONSIVE ADDITIONS (not covered by the pen)
============================================ */
@media(max-width:1024px){
  .hero-title{font-size:clamp(2.6rem,8vw,5rem)}
  .page-hero-bg{width:60%}
  .contact-info{gap:1.5rem}
  .contact-info-value{letter-spacing:.05em;word-break:break-all}
  .business-item{padding:3rem 0}
  .footer-bottom{gap:1rem}
}
@media(max-width:768px){
  body{letter-spacing:.02em}
  .nav-overlay{overflow-y:auto;clip-path:circle(0 at calc(100% - 2.25rem) 2.25rem)}
  .nav-overlay.active{clip-path:circle(150% at calc(100% - 2.25rem) 2.25rem)}
  .nav-menu{padding:6rem 1.5rem 3rem;margin:auto 0}
  .nav-menu li{margin:.6rem 0}
  .logo{font-size:1.25rem}
  .hero-content{padding-top:5rem}
  .hero-label{letter-spacing:.35em;font-size:.75rem}
  .hero-title{font-size:clamp(2.2rem,9.5vw,3.2rem);line-height:1.3}
  .hero-desc{font-size:.95rem;line-height:2;margin-bottom:2.5rem}
  .hero-desc br,.about-desc br,.philosophy-desc br,.contact-cta-desc br,.business-desc br{display:none}
  .hero-cta{padding:1.1rem 2rem;gap:1rem}
  .hero-number{font-size:6rem;right:1rem;top:auto;bottom:2rem;transform:none}
  .about-grid{gap:4rem}
  .about-img{aspect-ratio:4/3}
  .stat-num{font-size:2.4rem}
  .philosophy-title{font-size:clamp(1.9rem,7vw,2.5rem);line-height:1.6;letter-spacing:.05em}
  .philosophy-desc{font-size:.95rem;line-height:2.2}
  .philosophy-values{margin-top:4rem}
  .business-list{margin-top:3rem}
  .business-item{padding:2.5rem 0;gap:2rem}
  .business-link{letter-spacing:.3em}
  .marquee{padding:2rem 0}
  .marquee-track{gap:2rem}
  .marquee-item::after{margin-left:2rem}
  .contact-cta-title{font-size:clamp(2rem,8vw,2.8rem)}
  .contact-cta-btn,.form-submit{padding:1.3rem 2.5rem}
  .company::before{top:3rem}
  .footer-grid{padding-bottom:3rem}
  .footer-bottom{letter-spacing:.15em}
  .page-hero-bg{width:100%;opacity:.25}
  .page-hero-title{font-size:clamp(2.4rem,11vw,3.5rem)}
  .page-hero-en{font-size:1rem;letter-spacing:.2em}
  .strength-card{padding:2.5rem 1.5rem}
  .service-body{padding:2rem 1.5rem}
  .property-body{padding:1.5rem}
  .property-grid{gap:1.5rem}
  .properties-note{margin-top:3rem}
  .form-row{margin-bottom:2rem}
  .form-radio-group{flex-direction:column;gap:1rem}
  .form-submit-wrap{margin-top:3rem}
  .page-title-fallback{padding:8rem 1.5rem 4rem}
  /* flow: stack the step label over its content, line on the left */
  .flow-list{margin-top:3rem}
  .flow-list::before{left:4px}
  .flow-item{grid-template-columns:1fr;gap:.5rem;padding:2rem 0 2rem 2.2rem}
  .flow-item::before{left:0;top:2.6rem}
  .flow-num{padding-top:0}
  .flow-content h3{font-size:1.25rem;margin-bottom:.6rem}
}
@media(max-width:480px){
  .hero-cta,.contact-cta-btn,.form-submit{letter-spacing:.25em}
  .hero-cta:hover,.contact-cta-btn:hover,.form-submit:hover{letter-spacing:.3em}
  .footer-bottom{letter-spacing:.1em;font-size:.7rem}
  .footer-logo{font-size:1.6rem}
}
@media(prefers-reduced-motion:reduce){
  .marquee-track,.hero-bg-img::after,.hero-scroll-line::after{animation:none}
}

/* Skip preloader when already seen in this session */
.is-visited .preloader{display:none}