/* =========================================================
   Yell on Fulcrum — 明るいブランドイエロー型
   Main:   #F8B323 (マスタードイエロー)
   Accent: #2A1A00 (ダークブラウン)
   Base:   #F3F3F2 (クリームホワイト)
   ========================================================= */

:root{
  --yellow:#F8B323;
  --yellow-deep:#EBA511;
  --brown:#2A1A00;
  --brown-soft:#3d2b0a;
  --cream:#F3F3F2;
  --ink:#2A1A00;
  --ink-soft:#6b5a3e;
  --white:#ffffff;
  --sw-red:#E24A3B;
  --ma-blue:#2E7DE0;
  --ph-gold:#C99A25;
  --shadow:0 10px 30px rgba(42,26,0,.10);
  --shadow-lg:0 24px 60px rgba(42,26,0,.22);
  --radius:16px;
  --maxw:1120px;
  --header-h:72px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:var(--header-h);-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:"Noto Sans JP",system-ui,-apple-system,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  color:var(--ink);
  background:var(--cream);
  line-height:1.85;
  font-size:16px;
  letter-spacing:.02em;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,p,dl,dd,figure,blockquote{margin:0;}

.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:24px;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-weight:700;font-size:1rem;letter-spacing:.06em;
  padding:.95em 2.4em;border-radius:999px;border:0;cursor:pointer;
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
  text-align:center;
}
.btn-dark{background:var(--brown);color:#fff;box-shadow:0 8px 22px rgba(42,26,0,.28);}
.btn-dark:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(42,26,0,.36);}
.btn-yellow{background:var(--yellow);color:var(--brown);box-shadow:0 10px 26px rgba(248,179,35,.5);}
.btn-yellow:hover{transform:translateY(-2px);background:var(--yellow-deep);box-shadow:0 16px 34px rgba(248,179,35,.6);}

/* ---------- Section heads ---------- */
.sec-head{text-align:center;margin-bottom:48px;}
.sec-eyebrow{
  font-family:"Noto Sans JP",sans-serif;font-weight:700;font-size:.8rem;
  letter-spacing:.28em;color:var(--brown);opacity:.75;margin-bottom:.4em;text-transform:uppercase;
}
.sec-title{
  font-family:"Noto Serif JP",serif;font-weight:700;
  font-size:clamp(1.7rem,4vw,2.3rem);letter-spacing:.06em;color:var(--brown);
}
.sec-sub{font-size:.95rem;color:var(--ink-soft);margin-top:.6em;letter-spacing:.05em;}

/* ---------- Header ---------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:100;height:var(--header-h);
  background:rgba(243,243,242,.86);backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(42,26,0,.06);transition:box-shadow .3s ease;
}
.site-header.scrolled{box-shadow:0 4px 20px rgba(42,26,0,.08);}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:var(--header-h);}
.brand-logo{height:46px;width:auto;}
.gnav{display:flex;align-items:center;gap:34px;}
.gnav a{
  font-weight:500;font-size:.95rem;color:var(--brown);position:relative;letter-spacing:.04em;
  transition:color .2s ease;
}
.gnav a:not(.nav-cta)::after{
  content:"";position:absolute;left:0;bottom:-6px;width:0;height:2px;background:var(--yellow-deep);
  transition:width .25s ease;
}
.gnav a:not(.nav-cta):hover::after{width:100%;}
.nav-cta{
  background:var(--brown);color:#fff !important;padding:.55em 1.4em;border-radius:999px;font-weight:700;
}
.nav-cta:hover{background:var(--brown-soft);}
.nav-toggle{
  display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px;
}
.nav-toggle span{display:block;width:26px;height:2px;background:var(--brown);transition:transform .3s ease,opacity .3s ease;}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ---------- Hero ---------- */
.hero{
  background:linear-gradient(170deg,var(--yellow) 0%,var(--yellow) 62%,#f9bf42 100%);
  padding:calc(var(--header-h) + 56px) 0 72px;
  text-align:center;position:relative;overflow:hidden;
}
.hero-eyebrow{
  font-weight:700;font-size:clamp(.72rem,1.6vw,.86rem);letter-spacing:.22em;
  color:var(--brown);opacity:.85;margin-bottom:1.4em;
}
.hero-title{
  font-family:"Noto Serif JP",serif;font-weight:700;color:var(--brown);
  font-size:clamp(1.8rem,4.6vw,3rem);line-height:1.4;letter-spacing:.04em;
}
.hero-lead{
  margin-top:1.6em;font-size:clamp(.9rem,1.9vw,1.05rem);color:var(--brown-soft);
  font-weight:500;letter-spacing:.05em;
}
.hero-btn{margin-top:2.2em;}
.hero-visual{
  margin-top:52px;border-radius:20px;overflow:hidden;
  box-shadow:var(--shadow-lg);border:6px solid rgba(42,26,0,.85);
  max-width:960px;margin-inline:auto;background:#0b1020;
}
.hero-visual img{width:100%;}

/* ---------- こんな方へ ---------- */
.target{padding:88px 0;background:var(--yellow);}
.target .sec-title,.target .sec-eyebrow{color:var(--brown);}
.target-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:26px;
}
.target-card{
  background:#fff;border-radius:var(--radius);padding:34px 28px 30px;box-shadow:var(--shadow);
  position:relative;transition:transform .25s ease,box-shadow .25s ease;
}
.target-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);}
.target-card .num{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;background:var(--brown);color:#fff;
  font-weight:700;font-size:1.05rem;margin-bottom:18px;
}
.target-card h3{font-size:1.06rem;font-weight:700;color:var(--brown);line-height:1.6;}
.target-card p{margin-top:12px;font-size:.85rem;color:var(--ink-soft);letter-spacing:.03em;}

/* ---------- SERVICE ---------- */
.service{padding:96px 0;background:var(--yellow);}
.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.service-card{
  background:#fff;border-radius:var(--radius);padding:0 30px 34px;overflow:hidden;
  box-shadow:var(--shadow);position:relative;transition:transform .25s ease,box-shadow .25s ease;
}
.service-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);}
.service-card .bar{display:block;height:6px;margin:0 -30px 28px;}
.service-card[data-pillar="software"] .bar{background:var(--sw-red);}
.service-card[data-pillar="math"] .bar{background:var(--ma-blue);}
.service-card[data-pillar="philosophy"] .bar{background:var(--ph-gold);}
.service-tag{font-weight:700;font-size:.76rem;letter-spacing:.18em;margin-bottom:10px;}
.service-card[data-pillar="software"] .service-tag{color:var(--sw-red);}
.service-card[data-pillar="math"] .service-tag{color:var(--ma-blue);}
.service-card[data-pillar="philosophy"] .service-tag{color:var(--ph-gold);}
.service-card h3{font-size:1.18rem;font-weight:700;color:var(--brown);line-height:1.5;}
.service-desc{margin-top:16px;font-size:.92rem;color:var(--ink-soft);line-height:1.85;}
.service-note{
  max-width:840px;margin:44px auto 0;background:rgba(255,255,255,.55);border:1px solid rgba(42,26,0,.1);
  border-radius:14px;padding:22px 26px;font-size:.86rem;color:var(--brown-soft);line-height:1.9;
}
.service-note strong{color:var(--brown);}

/* ---------- PROFILE ---------- */
.profile{padding:96px 0;background:var(--cream);}
.profile-inner{max-width:860px;}
.profile-name{
  font-family:"Noto Serif JP",serif;font-weight:700;color:var(--brown);
  font-size:clamp(1.8rem,4vw,2.4rem);letter-spacing:.08em;margin-top:.2em;
}
.profile-role{font-size:.9rem;color:var(--ink-soft);margin-top:.5em;letter-spacing:.04em;}
.profile-lead{margin-top:1.6em;font-size:1.02rem;line-height:2;color:var(--brown-soft);}
.profile-facts{margin-top:36px;display:grid;gap:0;border-top:1px solid rgba(42,26,0,.12);}
.profile-facts>div{
  display:grid;grid-template-columns:120px 1fr;gap:20px;
  padding:22px 4px;border-bottom:1px solid rgba(42,26,0,.12);
}
.profile-facts dt{
  font-weight:700;color:var(--brown);font-size:.92rem;letter-spacing:.06em;position:relative;padding-left:16px;
}
.profile-facts dt::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;border-radius:50%;background:var(--yellow-deep);}
.profile-facts dd{margin:0;font-size:.92rem;color:var(--ink-soft);line-height:1.9;}

/* ---------- VISION ---------- */
.vision{
  padding:104px 0;background:var(--yellow);text-align:center;position:relative;overflow:hidden;
}
.vision-eyebrow{color:var(--brown);}
.vision-quote{
  font-family:"Noto Serif JP",serif;font-weight:700;color:var(--brown);
  font-size:clamp(1.5rem,4.2vw,2.5rem);line-height:1.55;letter-spacing:.05em;margin-top:.3em;
}
.vision-cite{margin-top:1em;font-size:.95rem;color:var(--brown-soft);letter-spacing:.1em;font-weight:500;}
.vision-lead{
  max-width:760px;margin:2em auto 0;font-size:1.02rem;line-height:2.1;color:var(--brown-soft);
}

/* ---------- CONTACT ---------- */
.contact{padding:100px 0;background:var(--brown);color:#fff;}
.contact .sec-title{color:#fff;}
.contact-head .sec-sub{color:rgba(255,255,255,.75);}
.contact-form{max-width:760px;margin:0 auto;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:24px;}
.field{display:flex;flex-direction:column;gap:10px;margin-bottom:24px;}
.form-row .field{margin-bottom:0;}
.field label{font-size:.85rem;font-weight:700;letter-spacing:.06em;color:rgba(255,255,255,.92);}
.req{
  display:inline-block;background:var(--yellow);color:var(--brown);font-size:.66rem;font-weight:700;
  padding:.15em .6em;border-radius:4px;margin-left:.4em;vertical-align:middle;letter-spacing:.04em;
}
.field input,.field textarea{
  font-family:inherit;font-size:1rem;color:#fff;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.22);border-radius:10px;padding:.85em 1em;transition:border-color .2s ease,background .2s ease;
}
.field input::placeholder,.field textarea::placeholder{color:rgba(255,255,255,.4);}
.field input:focus,.field textarea:focus{
  outline:none;border-color:var(--yellow);background:rgba(255,255,255,.12);
  box-shadow:0 0 0 3px rgba(248,179,35,.25);
}
.field textarea{resize:vertical;min-height:140px;}
.field input.invalid,.field textarea.invalid{border-color:#ff8a7a;background:rgba(255,138,122,.1);}

.form-consent{margin:6px 0 26px;}

.form-submit{text-align:center;}
.form-submit .btn{min-width:220px;}
.form-status{text-align:center;margin-top:18px;font-weight:700;min-height:1.5em;}
.form-status.ok{color:#7be0a0;}
.form-status.ng{color:#ff9a8c;}

/* ---------- Footer ---------- */
.site-footer{background:#1c1100;color:rgba(255,255,255,.7);padding:56px 0 40px;text-align:center;}
.footer-inner{display:flex;flex-direction:column;align-items:center;gap:14px;}
.footer-logo{width:230px;max-width:80%;height:auto;background:#fff;padding:12px 20px;}
.footer-tagline{font-size:.85rem;letter-spacing:.08em;color:rgba(255,255,255,.85);}
.footer-contact{font-size:.9rem;}
.footer-contact a{color:var(--yellow);font-weight:500;}
.footer-contact a:hover{text-decoration:underline;}
.footer-copy{font-size:.75rem;color:rgba(255,255,255,.4);margin-top:6px;letter-spacing:.05em;}

/* ---------- To top ---------- */
.to-top{
  position:fixed;right:22px;bottom:22px;width:48px;height:48px;border-radius:50%;
  background:var(--brown);color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:1.3rem;box-shadow:0 8px 22px rgba(42,26,0,.3);z-index:90;
  opacity:0;visibility:hidden;transform:translateY(12px);transition:all .3s ease;
}
.to-top.show{opacity:1;visibility:visible;transform:translateY(0);}
.to-top:hover{background:var(--brown-soft);}

/* ---------- Reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease;}
.reveal.in{opacity:1;transform:none;}

.sp-br{display:none;}

/* =========================================================
   Responsive — Tablet
   ========================================================= */
@media (max-width:900px){
  .target-grid,.service-grid{grid-template-columns:1fr 1fr;}
}

/* =========================================================
   Responsive — Smartphone (スマホ版デザイン準拠)
   ========================================================= */
@media (max-width:680px){
  :root{--header-h:60px;}
  .container{padding-inline:20px;}

  /* Header → hamburger */
  .nav-toggle{display:flex;}
  .gnav{
    position:fixed;inset:var(--header-h) 0 auto 0;flex-direction:column;gap:0;
    background:var(--cream);padding:8px 0 16px;border-bottom:1px solid rgba(42,26,0,.1);
    box-shadow:0 12px 24px rgba(42,26,0,.12);
    transform:translateY(-12px);opacity:0;visibility:hidden;transition:all .28s ease;
  }
  .gnav.open{transform:none;opacity:1;visibility:visible;}
  .gnav a{width:100%;padding:15px 24px;font-size:1rem;border-bottom:1px solid rgba(42,26,0,.06);}
  .gnav a:not(.nav-cta)::after{display:none;}
  .nav-cta{margin:12px 24px 0;border-radius:999px;text-align:center;padding:.85em;}

  .hero{padding:calc(var(--header-h) + 36px) 0 52px;}
  .hero-title{font-size:clamp(1.5rem,7vw,2rem);line-height:1.45;}
  .hero-lead{font-size:.82rem;}
  .hero-visual{margin-top:36px;border-width:5px;border-radius:16px;}

  .target,.service,.profile,.vision{padding:64px 0;}
  .contact{padding:64px 0;}
  .sec-head{margin-bottom:36px;}

  .target-grid,.service-grid{grid-template-columns:1fr;gap:18px;}
  .target-card{padding:26px 24px;}

  .profile-facts>div{grid-template-columns:1fr;gap:8px;padding:18px 4px;}

  .vision-quote{font-size:clamp(1.4rem,6.4vw,1.9rem);}
  .sp-br{display:inline;}

  .form-row{grid-template-columns:1fr;gap:0;margin-bottom:0;}
  .form-submit .btn{width:100%;}

  .to-top{right:16px;bottom:16px;width:44px;height:44px;}
}

@media (max-width:380px){
  .brand-logo{height:36px;}
  .hero-title{font-size:1.35rem;}
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto !important;}
  .reveal{opacity:1 !important;transform:none !important;}
  .btn:hover,.target-card:hover,.service-card:hover{transform:none;}
}