/* ============================================
   学び舎 白（しろ）
   Pure Monochrome Typography System
   #111 / #FFF — Nothing else.
   ============================================ */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@200;800&display=swap');

:root{
  --black:#111;
  --white:#fff;
  --font:'Noto Sans JP',sans-serif;
}

html{
  scroll-behavior:smooth;
  font-size:16px;
  cursor:none;
}

body{
  font-family:var(--font);
  font-weight:200;
  background:var(--white);
  color:var(--black);
  line-height:2;
  overflow-x:hidden;
  cursor:none;
}

a{color:inherit;text-decoration:none;cursor:none}
::selection{background:var(--black);color:var(--white)}

/* ── Custom Cursor (4px dot) ── */
.cursor{
  position:fixed;
  width:4px;
  height:4px;
  background:var(--black);
  border-radius:50%;
  pointer-events:none;
  z-index:99999;
  transition:transform .15s;
  transform:translate(-50%,-50%);
}

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

/* ── Scroll Progress ── */
.scroll-progress{
  position:fixed;
  top:32px;
  right:40px;
  font-size:11px;
  font-weight:200;
  color:var(--black);
  z-index:9998;
  letter-spacing:2px;
  mix-blend-mode:difference;
}

/* ── Wrapper ── */
.wrapper{
  max-width:720px;
  margin:0 auto;
  padding:0 200px;
}

@media(max-width:1120px){
  .wrapper{padding:0 80px}
}
@media(max-width:768px){
  .wrapper{padding:0 28px}
}

/* ── Hero ── */
.hero{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:120px 0;
}

.hero-text{
  font-size:clamp(1rem,2.5vw,1.4rem);
  font-weight:200;
  letter-spacing:.15em;
  text-align:center;
  opacity:0;
  animation:heroIn 1.5s ease forwards;
}

@keyframes heroIn{
  from{opacity:0}
  to{opacity:1}
}

/* ── Sections ── */
.section{
  padding:140px 0;
  border-top:1px solid rgba(17,17,17,.08);
}

.section-heading{
  font-size:clamp(1.6rem,3.5vw,2.4rem);
  font-weight:800;
  letter-spacing:.08em;
  margin-bottom:80px;
  line-height:1.4;
  opacity:0;
  transform:translateY(12px);
  transition:opacity 1.5s ease,transform 1.5s ease;
}

.section-heading.visible{
  opacity:1;
  transform:translateY(0);
}

/* ── Center Line ── */
.center-line{
  width:0;
  height:1px;
  background:var(--black);
  margin:0 auto 80px;
  transition:width 1.2s ease;
}

.center-line.visible{
  width:60px;
}

/* ── Text Blocks ── */
.text-block{
  font-size:clamp(.88rem,1.2vw,1rem);
  font-weight:200;
  line-height:2.4;
  margin-bottom:48px;
  opacity:0;
  transform:translateY(12px);
  transition:opacity 1.5s ease,transform 1.5s ease;
}

.text-block.visible{
  opacity:1;
  transform:translateY(0);
}

.text-block:last-child{
  margin-bottom:0;
}

/* ── Course Items ── */
.course-item{
  padding:48px 0;
  border-bottom:1px solid rgba(17,17,17,.08);
  opacity:0;
  transform:translateY(12px);
  transition:opacity 1.5s ease,transform 1.5s ease;
}

.course-item.visible{
  opacity:1;
  transform:translateY(0);
}

.course-item:first-child{
  border-top:1px solid rgba(17,17,17,.08);
}

.course-name{
  font-size:1.1rem;
  font-weight:800;
  letter-spacing:.05em;
  margin-bottom:12px;
}

.course-detail{
  font-size:.88rem;
  font-weight:200;
  line-height:2.2;
  margin-bottom:8px;
}

.course-price{
  font-size:.92rem;
  font-weight:800;
  letter-spacing:.05em;
  margin-top:16px;
}

/* ── Voice Cards ── */
.voice-item{
  padding:48px 0;
  border-bottom:1px solid rgba(17,17,17,.08);
  opacity:0;
  transform:translateY(12px);
  transition:opacity 1.5s ease,transform 1.5s ease;
}

.voice-item.visible{
  opacity:1;
  transform:translateY(0);
}

.voice-item:first-child{
  border-top:1px solid rgba(17,17,17,.08);
}

.voice-quote{
  font-size:1rem;
  font-weight:200;
  line-height:2.4;
  margin-bottom:20px;
}

.voice-attr{
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.1em;
}

/* ── Director Section ── */
.director-name{
  font-size:1.3rem;
  font-weight:800;
  letter-spacing:.08em;
  margin-bottom:8px;
}

.director-title{
  font-size:.78rem;
  font-weight:200;
  letter-spacing:.15em;
  margin-bottom:48px;
}

/* ── Stats ── */
.stats{
  display:flex;
  justify-content:space-between;
  padding:60px 0;
  border-top:1px solid rgba(17,17,17,.08);
  border-bottom:1px solid rgba(17,17,17,.08);
  flex-wrap:wrap;
  gap:24px;
}

.stat{
  text-align:center;
  flex:1;
  min-width:120px;
  opacity:0;
  transform:translateY(12px);
  transition:opacity 1.5s ease,transform 1.5s ease;
}

.stat.visible{
  opacity:1;
  transform:translateY(0);
}

.stat-num{
  font-size:clamp(1.8rem,3vw,2.4rem);
  font-weight:800;
  letter-spacing:.02em;
  line-height:1;
  margin-bottom:8px;
}

.stat-label{
  font-size:.7rem;
  font-weight:200;
  letter-spacing:.15em;
}

/* ── Contact Section ── */
.contact-block{
  text-align:center;
  padding:80px 0;
}

.contact-tel{
  font-size:clamp(1.4rem,3vw,2rem);
  font-weight:800;
  letter-spacing:.08em;
  margin-bottom:12px;
}

.contact-hours{
  font-size:.82rem;
  font-weight:200;
  letter-spacing:.08em;
  line-height:2;
  margin-bottom:40px;
}

.contact-form{
  text-align:left;
}

.form-group{
  margin-bottom:24px;
}

.form-label{
  display:block;
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.15em;
  margin-bottom:8px;
}

.form-input,
.form-textarea{
  width:100%;
  padding:14px 0;
  border:none;
  border-bottom:1px solid rgba(17,17,17,.15);
  font-family:var(--font);
  font-size:.92rem;
  font-weight:200;
  background:transparent;
  color:var(--black);
  outline:none;
  transition:border-color .4s;
  cursor:none;
}

.form-input:focus,
.form-textarea:focus{
  border-bottom-color:var(--black);
}

.form-textarea{
  resize:vertical;
  min-height:120px;
  line-height:2;
}

.form-submit{
  display:inline-block;
  padding:16px 48px;
  background:var(--black);
  color:var(--white);
  font-family:var(--font);
  font-size:.82rem;
  font-weight:200;
  letter-spacing:.15em;
  border:none;
  cursor:none;
  transition:opacity .4s;
  margin-top:16px;
}

.form-submit:hover{
  opacity:.7;
}

/* ── Info Table ── */
.info-row{
  display:flex;
  padding:16px 0;
  border-bottom:1px solid rgba(17,17,17,.08);
  font-size:.85rem;
  opacity:0;
  transform:translateY(12px);
  transition:opacity 1.5s ease,transform 1.5s ease;
}

.info-row.visible{
  opacity:1;
  transform:translateY(0);
}

.info-label{
  min-width:120px;
  font-weight:800;
  font-size:.78rem;
  letter-spacing:.08em;
}

.info-value{
  font-weight:200;
  font-size:.85rem;
}

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

/* ── Footer ── */
.footer{
  padding:80px 0 40px;
  border-top:1px solid rgba(17,17,17,.08);
  text-align:center;
}

.footer-name{
  font-size:1rem;
  font-weight:800;
  letter-spacing:.1em;
  margin-bottom:16px;
}

.footer-info{
  font-size:.75rem;
  font-weight:200;
  line-height:2.2;
  letter-spacing:.05em;
  margin-bottom:40px;
}

.footer-copy{
  font-size:.65rem;
  font-weight:200;
  letter-spacing:.1em;
  opacity:.4;
}

/* ── Hover Weight Shift ── */
.weight-shift{
  transition:font-weight .4s;
}

.weight-shift:hover{
  font-weight:800;
}

/* ── Fade-in utility ── */
.fade-in{
  opacity:0;
  transform:translateY(12px);
  transition:opacity 1.5s ease,transform 1.5s ease;
}

.fade-in.visible{
  opacity:1;
  transform:translateY(0);
}

/* ── Mobile Nav ── */
.mobile-nav-btn{
  display:none;
  position:fixed;
  bottom:28px;
  right:28px;
  width:48px;
  height:48px;
  background:var(--black);
  border:none;
  z-index:9998;
  cursor:none;
  align-items:center;
  justify-content:center;
}

.mobile-nav-btn span{
  display:block;
  width:18px;
  height:1px;
  background:var(--white);
  margin:4px auto;
  transition:.3s;
}

.mobile-overlay{
  display:none;
  position:fixed;
  inset:0;
  background:var(--white);
  z-index:9997;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:32px;
}

.mobile-overlay.active{
  display:flex;
}

.mobile-overlay a{
  font-size:1rem;
  font-weight:200;
  letter-spacing:.15em;
  transition:font-weight .3s;
}

.mobile-overlay a:hover{
  font-weight:800;
}

@media(max-width:768px){
  .mobile-nav-btn{display:flex}
  .section{padding:100px 0}
  .section-heading{margin-bottom:56px}
  .center-line{margin-bottom:56px}
  .stats{flex-direction:column;gap:32px}
  .stat{min-width:auto}
  .cursor{display:none}
}