/*
Theme Name: BiVERTA
Theme URI: https://biverta.jp
Author: BiVERTA Inc.
Author URI: https://biverta.jp
Description: BiVERTA 公式サイトテーマ — 美容クリニック専門調達プラットフォーム
Version: 1.0.0
License: Private
Text Domain: biverta
*/

/* =============================================
   BiVERTA — Main Stylesheet
   ============================================= */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Noto Sans JP', 'Inter', sans-serif;
  background: #f4f4f2;
  color: #111;
  -webkit-font-smoothing: antialiased;
  cursor: none;
  overflow-x: hidden;
}
a { text-decoration: none; color: inherit; }

/* ── Custom Cursor ── */
#cur {
  position: fixed; width: 8px; height: 8px;
  background: #111; border-radius: 50%;
  pointer-events: none; z-index: 9999;
  transform: translate(-50%,-50%);
  transition: width .35s ease, height .35s ease, opacity .2s;
}
#cur-o {
  position: fixed; width: 36px; height: 36px;
  border: 1px solid rgba(17,17,17,.3); border-radius: 50%;
  pointer-events: none; z-index: 9998;
  transform: translate(-50%,-50%);
}
.is-hover #cur { width: 56px; height: 56px; opacity: .08; }

/* ── Loader ── */
#loader {
  position: fixed; inset: 0; background: #f4f4f2;
  z-index: 8000; display: flex; align-items: center;
  justify-content: center; flex-direction: column; gap: 24px;
  transition: opacity .7s .1s, visibility .7s .1s;
}
#loader.out { opacity: 0; visibility: hidden; }
.ld-logo {
  font-family: 'Cormorant Garamond', serif;
  font-size: 28px; font-weight: 300; letter-spacing: .28em; color: #111;
  opacity: 0; animation: fadeUp .6s .2s forwards;
}
.ld-bar-wrap { position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: #e8e8e6; }
.ld-bar { height: 100%; width: 0; background: #111; transition: width 1.1s cubic-bezier(.16,1,.3,1); }

/* ── Navigation ── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 500;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 56px; height: 68px;
  transition: background .4s, border-color .4s;
}
nav.scrolled {
  background: rgba(244,244,242,.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(17,17,17,.07);
}
.nav-logo { font-family: 'Cormorant Garamond', serif; font-size: 20px; font-weight: 400; letter-spacing: .22em; color: #111; }
.nav-links { display: flex; gap: 40px; list-style: none; }
.nav-links a { font-size: 11px; font-weight: 300; letter-spacing: .18em; text-transform: uppercase; color: rgba(17,17,17,.5); transition: color .2s; }
.nav-links a:hover { color: #111; }
.nav-btn { font-size: 10px; font-weight: 400; letter-spacing: .2em; text-transform: uppercase; padding: 9px 22px; border: 1px solid rgba(17,17,17,.25); color: #111; transition: background .25s, color .25s, border-color .25s; }
.nav-btn:hover { background: #111; color: #f4f4f2; border-color: #111; }

/* ── Hero ── */
.hero { position: relative; height: 100svh; min-height: 680px; display: flex; align-items: flex-end; overflow: hidden; background: #111; }
.hero-img { position: absolute; inset: 0; background: url('images/hero_tools.jpg') center center/cover no-repeat; background-color: #1a1a1a; will-change: transform; }
.hero-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.35) 40%, rgba(0,0,0,.12) 70%, rgba(0,0,0,.05) 100%); }
.hero-grain { position: absolute; inset: 0; z-index: 2; opacity: .35; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E"); background-size: 300px; pointer-events: none; }
.hero-content { position: relative; z-index: 10; width: 100%; padding: 0 56px 72px; }
.hero-label { display: inline-flex; align-items: center; gap: 14px; margin-bottom: 28px; opacity: 0; animation: fadeUp .7s .6s forwards; }
.hero-label-rule { width: 28px; height: 1px; background: rgba(255,255,255,.45); }
.hero-label-text { font-size: 10px; font-weight: 300; letter-spacing: .28em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.hero-h1 { font-family: 'Cormorant Garamond', serif; font-size: clamp(56px,7.8vw,124px); font-weight: 300; line-height: 1.06; letter-spacing: -.015em; color: #fff; overflow: hidden; }
.hero-h1-ln { display: block; opacity: 0; transform: translateY(105%); animation: slideUp .85s cubic-bezier(.16,1,.3,1) forwards; }
.hero-h1-ln:nth-child(1) { animation-delay: .75s; }
.hero-h1-ln:nth-child(2) { animation-delay: .88s; }
.hero-h1-ln em { font-style: italic; color: rgba(255,255,255,.72); }
.hero-foot { display: flex; align-items: flex-end; justify-content: space-between; margin-top: 40px; opacity: 0; animation: fadeUp .7s 1.1s forwards; }
.hero-desc { max-width: 400px; font-size: 13px; font-weight: 200; line-height: 2; letter-spacing: .07em; color: rgba(255,255,255,.5); }
.hero-cta { display: inline-flex; align-items: center; gap: 18px; font-size: 11px; font-weight: 300; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.7); border-bottom: 1px solid rgba(255,255,255,.25); padding-bottom: 4px; transition: color .25s, border-color .25s; }
.hero-cta:hover { color: #fff; border-color: #fff; }
.cta-arrow { display: inline-block; width: 36px; height: 1px; background: currentColor; position: relative; transition: width .3s cubic-bezier(.16,1,.3,1); }
.cta-arrow::after { content: ''; position: absolute; right: -1px; top: -3px; width: 6px; height: 6px; border-right: 1px solid currentColor; border-top: 1px solid currentColor; transform: rotate(45deg); }
.hero-cta:hover .cta-arrow { width: 52px; }
.hero-scroll { position: absolute; right: 56px; bottom: 72px; z-index: 10; display: flex; flex-direction: column; align-items: center; gap: 10px; opacity: 0; animation: fadeUp .6s 1.4s forwards; }
.scr-txt { writing-mode: vertical-rl; font-size: 9px; font-weight: 300; letter-spacing: .3em; color: rgba(255,255,255,.3); text-transform: uppercase; }
.scr-line { width: 1px; height: 52px; background: linear-gradient(to bottom, rgba(255,255,255,.4), transparent); animation: scrlPulse 2s 1.8s ease-in-out infinite; }

/* ── Marquee ── */
.marquee { background: #f4f4f2; border-top: 1px solid rgba(17,17,17,.08); border-bottom: 1px solid rgba(17,17,17,.08); overflow: hidden; padding: 18px 0; }
.mq-track { display: flex; white-space: nowrap; animation: mq 24s linear infinite; }
.mq-item { display: inline-flex; align-items: center; gap: 24px; padding: 0 28px; font-family: 'Cormorant Garamond', serif; font-size: 12px; font-weight: 300; font-style: italic; letter-spacing: .18em; color: rgba(17,17,17,.22); text-transform: uppercase; }
.mq-dot { width: 3px; height: 3px; border-radius: 50%; background: rgba(17,17,17,.2); flex-shrink: 0; }

/* ── Statement ── */
.statement { background: #111; color: #f4f4f2; padding: 160px 56px; position: relative; overflow: hidden; }
.st-sup { display: flex; align-items: center; gap: 14px; margin-bottom: 64px; }
.st-sup-line { width: 24px; height: 1px; background: rgba(244,244,242,.25); }
.st-sup-txt { font-size: 10px; font-weight: 300; letter-spacing: .28em; text-transform: uppercase; color: rgba(244,244,242,.35); }
.st-body { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: end; }
.st-h2 { font-family: 'Cormorant Garamond', serif; font-size: clamp(40px,5.5vw,80px); font-weight: 300; line-height: 1.25; letter-spacing: -.01em; color: #f4f4f2; }
.st-h2 em { font-style: italic; color: rgba(244,244,242,.45); }
.st-right { font-size: 13px; font-weight: 200; line-height: 2.1; letter-spacing: .06em; color: rgba(244,244,242,.4); padding-bottom: 8px; }
.st-deco { position: absolute; right: -60px; bottom: -80px; font-family: 'Cormorant Garamond', serif; font-size: 360px; font-weight: 300; font-style: italic; color: transparent; -webkit-text-stroke: 1px rgba(244,244,242,.03); pointer-events: none; line-height: 1; user-select: none; }

/* ── Flow ── */
.flow { background: #111; color: #f4f4f2; padding: 160px 56px; }
.flow .sec-eyebrow { color: rgba(244,244,242,.25); }
.flow .sec-title { color: #f4f4f2; }
.flow .sec-title em { color: rgba(244,244,242,.35); }
.flow .sec-note { color: rgba(244,244,242,.35); }
.flow-grid { margin-top: 80px; display: grid; grid-template-columns: repeat(4,1fr); gap: 2px; }
.flow-card { background: rgba(244,244,242,.03); padding: 52px 36px; border-top: 1px solid rgba(244,244,242,.06); position: relative; overflow: hidden; transition: background .35s; }
.flow-card:hover { background: rgba(244,244,242,.06); }
.flow-card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: #f4f4f2; transform: scaleX(0); transform-origin: left; transition: transform .5s cubic-bezier(.16,1,.3,1); }
.flow-card:hover::after { transform: scaleX(1); }
.flow-n { font-family: 'Cormorant Garamond', serif; font-size: 72px; font-weight: 300; font-style: italic; color: rgba(244,244,242,.05); line-height: 1; margin-bottom: 32px; }
.flow-title { font-size: 15px; font-weight: 400; letter-spacing: .1em; color: #f4f4f2; margin-bottom: 12px; }
.flow-body { font-size: 12px; font-weight: 200; line-height: 1.95; letter-spacing: .05em; color: rgba(244,244,242,.35); }

/* ── Company ── */
.company { background: #f4f4f2; padding: 160px 56px; }
.co-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 120px; align-items: start; margin-top: 80px; }
.co-lead { font-family: 'Cormorant Garamond', serif; font-size: clamp(32px,4vw,56px); font-weight: 300; line-height: 1.25; letter-spacing: -.01em; color: #111; margin-bottom: 32px; }
.co-lead em { font-style: italic; color: rgba(17,17,17,.35); }
.co-tagline { font-size: 13px; font-weight: 200; line-height: 2.1; letter-spacing: .06em; color: rgba(17,17,17,.5); max-width: 360px; }
.co-table { width: 100%; }
.co-table tr { border-bottom: 1px solid rgba(17,17,17,.07); }
.co-table tr:first-child { border-top: 1px solid rgba(17,17,17,.07); }
.co-table th { font-size: 11px; font-weight: 300; letter-spacing: .15em; text-transform: uppercase; color: rgba(17,17,17,.35); padding: 20px 0; width: 140px; vertical-align: top; }
.co-table td { font-size: 14px; font-weight: 300; letter-spacing: .05em; line-height: 1.75; color: #111; padding: 20px 0; vertical-align: top; }

/* ── Footer ── */
footer, .site-footer { background: #0a0a0a; padding: 72px 56px 44px; border-top: 1px solid rgba(244,244,242,.05); }
.ft-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 64px; }
.ft-logo { font-family: 'Cormorant Garamond', serif; font-size: 24px; font-weight: 300; letter-spacing: .22em; color: rgba(244,244,242,.55); }
.ft-nav { display: flex; gap: 48px; list-style: none; }
.ft-nav a { font-size: 10px; font-weight: 200; letter-spacing: .18em; text-transform: uppercase; color: rgba(244,244,242,.25); transition: color .2s; }
.ft-nav a:hover { color: rgba(244,244,242,.6); }
.ft-bot { display: flex; justify-content: space-between; align-items: center; padding-top: 24px; border-top: 1px solid rgba(244,244,242,.05); }
.ft-copy { font-size: 10px; font-weight: 200; letter-spacing: .14em; color: rgba(244,244,242,.2); }
.ft-addr { font-size: 10px; font-weight: 200; letter-spacing: .12em; color: rgba(244,244,242,.2); text-align: right; line-height: 1.7; }

/* ── Scroll Reveal ── */
.rv   { opacity: 0; transform: translateY(40px); transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); }
.rv-l { opacity: 0; transform: translateX(-36px); transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); }
.rv-r { opacity: 0; transform: translateX(36px);  transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); }
.rv.on, .rv-l.on, .rv-r.on { opacity: 1; transform: none; }
.d1 { transition-delay: .08s; } .d2 { transition-delay: .16s; }
.d3 { transition-delay: .24s; } .d4 { transition-delay: .32s; }

/* ── Keyframes ── */
@keyframes fadeUp   { to { opacity: 1; transform: translateY(0); } }
@keyframes slideUp  { to { opacity: 1; transform: translateY(0); } }
@keyframes mq       { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@keyframes scrlPulse { 0%,100%{ opacity:1; } 50%{ opacity:.25; } }