/* ============================================
   整体 白（しろ）— style.css
   Only #111 and #FFF. Pure text. Minimal.
   ============================================ */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;font-size:16px}
body{
  font-family:'Noto Sans JP',sans-serif;
  font-weight:200;
  background:#fff;
  color:#111;
  line-height:2;
  overflow-x:hidden;
  cursor:none;
}

a{color:inherit;text-decoration:none}
::selection{background:#111;color:#fff}

/* ── Custom Cursor ── */
.cursor{
  position:fixed;
  width:4px;height:4px;
  background:#111;
  border-radius:50%;
  pointer-events:none;
  z-index:99999;
  transition:transform .15s ease;
  mix-blend-mode:difference;
}
.cursor.inv{background:#fff}

/* ── Scroll Progress ── */
.scroll-progress{
  position:fixed;
  top:0;right:32px;
  width:1px;height:0%;
  background:#111;
  z-index:9999;
  transition:height .1s linear;
}
.scroll-pct{
  position:fixed;
  top:8px;right:40px;
  font-size:.6rem;
  font-weight:200;
  letter-spacing:2px;
  color:#111;
  z-index:9999;
}

/* ── Sample Banner ── */
.sample-banner{
  position:fixed;
  top:0;left:0;right:0;
  background:#111;
  color:#fff;
  text-align:center;
  font-size:11px;
  padding:7px 16px;
  z-index:99999;
  letter-spacing:1px;
  font-weight:200;
}

/* ── Layout ── */
.wrap{
  max-width:720px;
  margin:0 auto;
  padding:0 200px;
}
@media(max-width:1120px){
  .wrap{padding:0 80px}
}
@media(max-width:768px){
  .wrap{padding:0 32px}
}

/* ── Header ── */
header{
  position:fixed;
  top:28px;left:0;right:0;
  z-index:9998;
  padding:12px 0;
  transition:opacity .6s;
}
header.hide{opacity:0;pointer-events:none}
.header-inner{
  max-width:720px;
  margin:0 auto;
  padding:0 200px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
@media(max-width:1120px){
  .header-inner{padding:0 80px}
}
@media(max-width:768px){
  .header-inner{padding:0 32px}
}
.logo{
  font-size:.85rem;
  font-weight:800;
  letter-spacing:4px;
  text-decoration:none;
  color:#111;
}
.logo span{
  font-weight:200;
  font-size:.6rem;
  display:block;
  letter-spacing:2px;
  margin-top:2px;
}
nav{display:flex;gap:24px;align-items:center}
nav a{
  font-size:.65rem;
  font-weight:200;
  letter-spacing:2px;
  color:#111;
  text-decoration:none;
  transition:font-weight .4s;
}
nav a:hover{font-weight:800}

/* ── Mobile Nav ── */
.hamburger{
  display:none;
  background:none;
  border:none;
  cursor:none;
  padding:8px;
  flex-direction:column;
  gap:4px;
}
.hamburger span{
  width:18px;height:1px;
  background:#111;display:block;
  transition:.3s;
}
.mobile-nav{
  display:none;
  position:fixed;inset:0;
  background:#fff;
  z-index:9997;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:36px;
}
.mobile-nav.active{display:flex}
.mobile-nav a{
  font-size:1rem;
  font-weight:200;
  letter-spacing:4px;
  color:#111;
  text-decoration:none;
  transition:font-weight .4s;
}
.mobile-nav a:hover{font-weight:800}

@media(max-width:768px){
  nav{display:none}
  .hamburger{display:flex}
}

/* ── Hero ── */
.hero{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:120px 0;
}
.hero-text{
  font-size:clamp(.85rem,1.5vw,1rem);
  font-weight:200;
  letter-spacing:8px;
  text-align:center;
  line-height:2.4;
  opacity:0;
  transition:opacity 1.5s ease;
}
.hero-text.visible{opacity:1}

/* ── Section ── */
.section{
  padding:140px 0;
  opacity:0;
  transition:opacity 1.5s ease;
}
.section.visible{opacity:1}

.section-heading{
  font-size:.65rem;
  font-weight:200;
  letter-spacing:6px;
  margin-bottom:64px;
  position:relative;
  display:inline-block;
}
.section-heading::after{
  content:'';
  position:absolute;
  bottom:-12px;
  left:50%;
  width:0;
  height:1px;
  background:#111;
  transition:width 1.2s ease,left 1.2s ease;
}
.section.visible .section-heading::after{
  width:100%;
  left:0;
}

.section-center{text-align:center}
.section-center .section-heading::after{
  left:50%;
  width:0;
}
.section-center.visible .section-heading::after{
  width:100%;
  left:0;
}

/* ── Concept Block ── */
.concept p{
  font-size:.88rem;
  font-weight:200;
  line-height:2.8;
  margin-bottom:28px;
  letter-spacing:1px;
}
.concept p:last-child{margin-bottom:0}

/* ── Services ── */
.service-item{
  padding:48px 0;
  border-bottom:1px solid rgba(17,17,17,.08);
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:32px;
}
.service-item:first-of-type{
  border-top:1px solid rgba(17,17,17,.08);
}
.service-name{
  font-size:.88rem;
  font-weight:200;
  letter-spacing:2px;
}
.service-detail{
  text-align:right;
}
.service-price{
  font-size:.88rem;
  font-weight:800;
  letter-spacing:2px;
}
.service-time{
  font-size:.65rem;
  font-weight:200;
  color:#111;
  opacity:.5;
  margin-top:4px;
  display:block;
}

/* ── Testimonials ── */
.voice-item{
  padding:56px 0;
  border-bottom:1px solid rgba(17,17,17,.08);
}
.voice-item:first-of-type{
  border-top:1px solid rgba(17,17,17,.08);
}
.voice-text{
  font-size:.85rem;
  font-weight:200;
  line-height:2.6;
  margin-bottom:20px;
  letter-spacing:.5px;
}
.voice-attr{
  font-size:.6rem;
  font-weight:200;
  letter-spacing:3px;
  opacity:.5;
}

/* ── Director ── */
.director-name{
  font-size:1.1rem;
  font-weight:800;
  letter-spacing:4px;
  margin-bottom:8px;
}
.director-title{
  font-size:.6rem;
  font-weight:200;
  letter-spacing:3px;
  opacity:.5;
  margin-bottom:40px;
}
.director-text{
  font-size:.85rem;
  font-weight:200;
  line-height:2.8;
  margin-bottom:20px;
  letter-spacing:.5px;
}
.director-text:last-of-type{margin-bottom:0}

/* ── Stats ── */
.stats{
  display:flex;
  justify-content:space-between;
  gap:24px;
  padding:64px 0;
  border-top:1px solid rgba(17,17,17,.08);
  border-bottom:1px solid rgba(17,17,17,.08);
  margin:80px 0;
}
.stat{text-align:center;flex:1}
.stat-num{
  font-size:1.6rem;
  font-weight:800;
  letter-spacing:2px;
  display:block;
}
.stat-unit{
  font-size:.6rem;
  font-weight:200;
  letter-spacing:2px;
}
.stat-label{
  font-size:.55rem;
  font-weight:200;
  letter-spacing:2px;
  opacity:.4;
  margin-top:6px;
  display:block;
}

@media(max-width:600px){
  .stats{flex-direction:column;gap:32px}
}

/* ── Info Table ── */
.info-row{
  display:flex;
  padding:20px 0;
  border-bottom:1px solid rgba(17,17,17,.06);
  font-size:.78rem;
  font-weight:200;
  letter-spacing:1px;
}
.info-row:first-child{border-top:1px solid rgba(17,17,17,.06)}
.info-label{
  min-width:100px;
  font-weight:800;
  flex-shrink:0;
}
.info-value{opacity:.7}

@media(max-width:600px){
  .info-row{flex-direction:column;gap:4px}
}

/* ── Reservation CTA ── */
.cta{
  text-align:center;
  padding:140px 0;
}
.cta-text{
  font-size:.85rem;
  font-weight:200;
  line-height:2.4;
  letter-spacing:1px;
  margin-bottom:48px;
}
.cta-tel{
  font-size:1.3rem;
  font-weight:800;
  letter-spacing:4px;
  text-decoration:none;
  color:#111;
  display:inline-block;
  margin-bottom:12px;
  transition:font-weight .4s;
}
.cta-tel:hover{font-weight:200}
.cta-hours{
  font-size:.6rem;
  font-weight:200;
  letter-spacing:2px;
  opacity:.5;
}

/* ── Footer ── */
footer{
  border-top:1px solid rgba(17,17,17,.08);
  padding:48px 0 32px;
  text-align:center;
}
.footer-name{
  font-size:.7rem;
  font-weight:800;
  letter-spacing:4px;
  margin-bottom:8px;
}
.footer-addr{
  font-size:.6rem;
  font-weight:200;
  letter-spacing:1px;
  opacity:.4;
  line-height:2;
  margin-bottom:24px;
}
.footer-copy{
  font-size:.5rem;
  font-weight:200;
  letter-spacing:2px;
  opacity:.3;
}

/* ── Hover weight shift on all links ── */
a{transition:font-weight .4s}
a:hover{font-weight:800}

/* ── Touch devices: restore normal cursor ── */
@media(hover:none){
  body{cursor:auto}
  .cursor{display:none}
}