/* =========================================================
   レジスル — 共通デザインシステム
   ホワイト基調 / 上品なインディゴ × シャンパンゴールド
   ========================================================= */

/* ---- Fonts ---- */
@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;500;700;900&family=Noto+Sans+JP:wght@400;500;700&family=Outfit:wght@400;500;600;700;800&family=Shippori+Mincho:wght@500;600;700&display=swap');

:root{
  /* palette */
  --bg:            #ffffff;
  --bg-soft:       #f6f7fb;
  --bg-tint:       #f1f1fd;
  --bg-ink:        #14152b;
  --bg-ink-2:      #1c1d3a;

  --ink:           #14152b;
  --ink-soft:      #44475f;
  --muted:         #767a93;
  --line:          #e8e9f1;
  --line-soft:     #f0f1f7;

  --brand:         #5246e6;
  --brand-ink:     #3a2fc4;
  --brand-deep:    #2a2280;
  --brand-tint:    #eeedfc;
  --brand-tint-2:  #e3e1fb;

  --gold:          #c2974a;
  --gold-soft:     #f3ead7;
  --gold-deep:     #8f6e2d;

  --rose:          #e76a8d;

  --ok:            #2fa66a;

  /* type */
  --display: 'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif;
  --body:    'Noto Sans JP', sans-serif;
  --mincho:  'Shippori Mincho', serif;
  --num:     'Outfit', 'Zen Kaku Gothic New', sans-serif;

  /* shape */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* shadow */
  --sh-sm: 0 1px 2px rgba(20,21,43,.06), 0 1px 3px rgba(20,21,43,.05);
  --sh-md: 0 6px 16px rgba(20,21,43,.07), 0 2px 6px rgba(20,21,43,.05);
  --sh-lg: 0 24px 48px -20px rgba(28,24,90,.22), 0 8px 24px -12px rgba(20,21,43,.12);
  --sh-brand: 0 18px 40px -16px rgba(82,70,230,.45);

  /* layout */
  --maxw: 1180px;
  --gut: clamp(20px, 5vw, 56px);
  --nav-h: 74px;
}

/* ---- reset ---- */
*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body{
  margin:0;
  font-family: var(--body);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.75;
  font-size: 16px;
  letter-spacing: .01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
button{ font-family: inherit; cursor: pointer; }
h1,h2,h3,h4{ font-family: var(--display); font-weight:900; line-height:1.18; letter-spacing:.01em; margin:0; color:var(--ink); }
p{ margin:0; }
.num{ font-family: var(--num); font-feature-settings:"tnum"; }

/* ---- layout helpers ---- */
.wrap{ max-width: var(--maxw); margin:0 auto; padding-inline: var(--gut); }
.wrap-wide{ max-width: 1320px; margin:0 auto; padding-inline: var(--gut); }
.section{ padding-block: clamp(64px, 9vw, 128px); }
.section-sm{ padding-block: clamp(48px, 6vw, 80px); }
.center{ text-align:center; }
.stack > * + *{ margin-top: var(--sp, 16px); }

/* eyebrow / kicker */
.kicker{
  display:inline-flex; align-items:center; gap:8px;
  font-family: var(--num); font-weight:700; font-size:13px;
  letter-spacing:.16em; text-transform:uppercase;
  color: var(--brand-ink);
}
.kicker::before{
  content:""; width:22px; height:2px; border-radius:2px;
  background: linear-gradient(90deg,var(--brand),var(--gold));
}
.kicker.center{ }
.kicker-gold{ color: var(--gold-deep); }
.kicker-gold::before{ background: linear-gradient(90deg,var(--gold),var(--brand)); }

/* section heading */
.h-eyebrow{ font-family:var(--num); font-weight:700; font-size:13px; letter-spacing:.18em; text-transform:uppercase; color:var(--brand-ink); }
.display-1{ font-size: clamp(34px, 6vw, 66px); line-height:1.1; letter-spacing:-.005em; }
.display-2{ font-size: clamp(28px, 4.4vw, 46px); line-height:1.16; }
.display-3{ font-size: clamp(22px, 2.6vw, 30px); }
.lead{ font-size: clamp(16px, 1.5vw, 19px); color: var(--ink-soft); line-height:1.9; }
.muted{ color: var(--muted); }
.balance{ text-wrap: balance; }
.pretty{ text-wrap: pretty; }

.grad-text{
  background: linear-gradient(100deg,var(--brand) 0%, #7a52e6 55%, var(--gold) 130%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---- buttons ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family: var(--display); font-weight:700; font-size:15px;
  padding: 14px 24px; border-radius: var(--r-pill);
  border:1px solid transparent; transition: all .2s ease; white-space:nowrap;
  letter-spacing:.02em;
}
.btn svg{ width:18px; height:18px; }
.btn-primary{ background: var(--brand); color:#fff; box-shadow: var(--sh-brand); }
.btn-primary:hover{ background: var(--brand-ink); transform: translateY(-2px); box-shadow: 0 22px 44px -16px rgba(82,70,230,.55); }
.btn-dark{ background: var(--bg-ink); color:#fff; }
.btn-dark:hover{ background:#000; transform: translateY(-2px); }
.btn-ghost{ background:#fff; color:var(--ink); border-color: var(--line); box-shadow: var(--sh-sm); }
.btn-ghost:hover{ border-color: var(--brand); color: var(--brand-ink); transform: translateY(-2px); }
.btn-gold{ background: var(--gold); color:#fff; box-shadow: 0 16px 32px -16px rgba(194,151,74,.6); }
.btn-gold:hover{ background: var(--gold-deep); transform:translateY(-2px); }
.btn-lg{ padding: 17px 32px; font-size:16px; }
.btn-block{ width:100%; }
.btn-text{ color:var(--brand-ink); font-weight:700; font-family:var(--display); display:inline-flex; align-items:center; gap:6px; }
.btn-text:hover{ gap:10px; }

/* pill / chip */
.chip{
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 14px; border-radius:var(--r-pill);
  background: var(--brand-tint); color: var(--brand-ink);
  font-size:13px; font-weight:700; font-family:var(--display);
}
.chip-gold{ background: var(--gold-soft); color: var(--gold-deep); }
.chip-line{ background:#fff; border:1px solid var(--line); color:var(--ink-soft); font-weight:500; }

/* ---- cards ---- */
.card{ background:#fff; border:1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-md); }
.card-soft{ background: var(--bg-soft); border:1px solid var(--line-soft); border-radius: var(--r-lg); }

/* =========================================================
   HEADER
   ========================================================= */
.site-header{
  position: sticky; top:0; z-index: 50;
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(180%) blur(16px);
  border-bottom:1px solid var(--line-soft);
}
.nav{
  height: var(--nav-h);
  display:flex; align-items:center; justify-content:space-between;
  gap:24px;
}
.brand{ display:flex; align-items:center; gap:11px; font-family:var(--display); font-weight:900; font-size:21px; letter-spacing:.01em; color:var(--ink); }
.brand .mark{
  width:34px; height:34px; border-radius:10px;
  background: linear-gradient(140deg,var(--brand),var(--brand-deep));
  display:grid; place-items:center; color:#fff; font-family:var(--num); font-weight:800; font-size:18px;
  box-shadow: var(--sh-brand); position:relative; overflow:hidden;
}
.brand .mark::after{ content:""; position:absolute; top:-8px; right:-8px; width:18px; height:18px; border-radius:50%; background:var(--gold); opacity:.9; }
.brand small{ display:block; font-family:var(--body); font-weight:500; font-size:10.5px; letter-spacing:.14em; color:var(--muted); margin-top:-3px; }

.nav-links{ display:flex; align-items:center; gap:4px; }
.nav-links a{
  font-family:var(--display); font-weight:700; font-size:14.5px; color:var(--ink-soft);
  padding:9px 15px; border-radius: var(--r-pill); transition: all .18s;
}
.nav-links a:hover{ color:var(--brand-ink); background:var(--brand-tint); }
.nav-links a.active{ color:var(--brand-ink); background:var(--brand-tint); }
.nav-cta{ display:flex; align-items:center; gap:10px; }

.nav-toggle{ display:none; width:42px; height:42px; border-radius:12px; border:1px solid var(--line); background:#fff; align-items:center; justify-content:center; }
.nav-toggle span{ position:relative; width:18px; height:2px; background:var(--ink); border-radius:2px; }
.nav-toggle span::before,.nav-toggle span::after{ content:""; position:absolute; left:0; width:18px; height:2px; background:var(--ink); border-radius:2px; }
.nav-toggle span::before{ top:-6px; } .nav-toggle span::after{ top:6px; }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{ background: var(--bg-ink); color: #c7c9e0; padding-block: 72px 36px; }
.site-footer a{ color:#c7c9e0; }
.site-footer a:hover{ color:#fff; }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap:40px; }
.footer-brand .brand{ color:#fff; }
.footer-brand .brand small{ color:#8c8fb6; }
.footer-brand p{ color:#9698bf; font-size:13.5px; margin-top:16px; max-width:30ch; line-height:1.9; }
.footer-col h4{ color:#fff; font-size:13px; letter-spacing:.1em; margin-bottom:16px; font-family:var(--num); text-transform:uppercase; }
.footer-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.footer-col li a{ font-size:14px; color:#9698bf; transition:.15s; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.1); margin-top:48px; padding-top:24px; display:flex; justify-content:space-between; align-items:center; gap:16px; font-size:12.5px; color:#7c7fa6; }

/* =========================================================
   shared bits
   ========================================================= */
/* stat */
.stat-num{ font-family:var(--num); font-weight:800; line-height:1; font-size: clamp(34px,4.5vw,52px); color:var(--ink); letter-spacing:-.01em; }
.stat-num .u{ font-size:.5em; color:var(--muted); font-weight:700; margin-left:2px; }
.stat-label{ color:var(--muted); font-size:13.5px; margin-top:8px; }

/* feature icon tile */
.itile{
  width:54px; height:54px; border-radius:15px; display:grid; place-items:center;
  background: var(--brand-tint); color: var(--brand-ink); flex:none;
}
.itile svg{ width:26px; height:26px; }
.itile-gold{ background:var(--gold-soft); color:var(--gold-deep); }
.itile-ink{ background:var(--bg-ink); color:#fff; }

/* divider dot list */
.dotlist{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:13px; }
.dotlist li{ display:flex; gap:11px; align-items:flex-start; color:var(--ink-soft); font-size:15px; }
.dotlist li::before{
  content:""; flex:none; margin-top:7px; width:18px; height:18px; border-radius:50%;
  background: var(--brand-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235246e6' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat;
}

/* =========================================================
   App mockup (pure CSS product UI)
   ========================================================= */
.app{
  background:#fff; border:1px solid var(--line); border-radius: 18px;
  box-shadow: var(--sh-lg); overflow:hidden; font-family:var(--body);
}
.app-bar{ height:42px; display:flex; align-items:center; gap:7px; padding:0 16px; border-bottom:1px solid var(--line-soft); background:var(--bg-soft); }
.app-dot{ width:11px; height:11px; border-radius:50%; }
.app-bar .t{ margin-left:10px; font-size:12px; color:var(--muted); font-weight:600; font-family:var(--num); letter-spacing:.04em; }
.app-body{ display:grid; grid-template-columns: 168px 1fr; min-height: 300px; }
.app-side{ background: var(--bg-ink); padding:16px 12px; display:flex; flex-direction:column; gap:4px; }
.app-side .logo{ color:#fff; font-family:var(--display); font-weight:900; font-size:15px; padding:6px 8px 14px; display:flex; align-items:center; gap:8px; }
.app-side .logo .m{ width:22px;height:22px;border-radius:7px;background:linear-gradient(140deg,var(--brand),var(--brand-deep)); display:grid;place-items:center; font-family:var(--num); font-size:12px;}
.app-nav{ display:flex; align-items:center; gap:9px; padding:8px 10px; border-radius:9px; color:#9c9fcb; font-size:12.5px; font-weight:600; }
.app-nav.on{ background: rgba(255,255,255,.08); color:#fff; }
.app-nav .d{ width:7px; height:7px; border-radius:2px; background:currentColor; opacity:.8; }
.app-main{ padding:18px; background:#fbfbfe; }

/* keep responsive */
@media (max-width: 980px){
  .footer-grid{ grid-template-columns: 1fr 1fr; gap:32px; }
  .footer-brand{ grid-column: 1 / -1; }
}
@media (max-width: 860px){
  :root{ --nav-h: 64px; }
  .nav-links, .nav-cta .btn-ghost{ display:none; }
  .nav-toggle{ display:flex; }
  .app-body{ grid-template-columns: 1fr; }
  .app-side{ display:none; }
}
@media (max-width: 560px){
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; }
}

/* mobile menu (shared) */
.mobile-menu{ display:none; position:fixed; inset:var(--nav-h) 0 0; z-index:49; background:rgba(255,255,255,.98); backdrop-filter:blur(8px); padding:24px var(--gut); }
.mobile-menu.open{ display:block; }
.mobile-menu a{ display:block; font-family:var(--display); font-weight:700; font-size:20px; padding:16px 0; border-bottom:1px solid var(--line-soft); color:var(--ink); }
.mobile-menu .btn{ margin-top:24px; }

/* =========================================================
   Home design switcher (meta-control, not part of the site)
   ========================================================= */
.home-switch{
  position: fixed; z-index: 80; left:50%; bottom:22px; transform:translateX(-50%);
  display:flex; align-items:center; gap:4px;
  background: rgba(20,21,43,.92); backdrop-filter: blur(12px);
  border:1px solid rgba(255,255,255,.14); border-radius: var(--r-pill);
  padding:6px 8px 6px 16px; box-shadow: 0 16px 40px -12px rgba(20,21,43,.5);
}
.home-switch .lab{ color:#b9bbe0; font-size:11.5px; font-weight:700; font-family:var(--num); letter-spacing:.14em; text-transform:uppercase; margin-right:6px; }
.home-switch a{
  width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  color:#cfd0ef; font-family:var(--num); font-weight:800; font-size:14px; transition:.18s;
}
.home-switch a:hover{ background: rgba(255,255,255,.1); color:#fff; }
.home-switch a.cur{ background: linear-gradient(140deg,var(--brand),var(--brand-deep)); color:#fff; box-shadow: var(--sh-brand); }
@media (max-width:560px){ .home-switch{ bottom:14px; padding:5px 7px 5px 12px; } .home-switch a{ width:30px; height:30px; } }

/* entrance */
@media (prefers-reduced-motion: no-preference){
  /* Entrance is transform-only: never opacity:0, so a stalled transition still leaves content VISIBLE. */
  html.js .reveal{ transform: translateY(18px); transition: transform .7s cubic-bezier(.2,.7,.2,1), opacity .7s cubic-bezier(.2,.7,.2,1); will-change: transform; }
  html.js .reveal.in{ transform:none; }
  html.js .reveal.d1{ transition-delay:.08s; } html.js .reveal.d2{ transition-delay:.16s; } html.js .reveal.d3{ transition-delay:.24s; } html.js .reveal.d4{ transition-delay:.32s; }
}