/* ============================================================
   株式会社 狩野設備工業  ─  Bright & Pop Style
   ============================================================ */

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

/* ── CSS変数 ─────────────────────────────────────────────── */
:root {
  /* Pop colors */
  --sky:      #0EA5E9;
  --sky-lt:   #38BDF8;
  --sky-dim:  rgba(14,165,233,.1);
  --coral:    #F97316;
  --coral-lt: #FB923C;
  --coral-dim:rgba(249,115,22,.1);
  --purple:   #8B5CF6;
  --purple-lt:#A78BFA;
  --teal:     #14B8A6;
  --teal-lt:  #2DD4BF;
  --pink:     #EC4899;
  --green:    #22C55E;

  /* Neutrals */
  --white:    #ffffff;
  --bg-base:  #F8FAFF;
  --bg-card:  #ffffff;
  --bg-light: #F1F5FD;
  --bg-dark:  #0F172A;

  --text-dark:    #0F172A;
  --text-body:    #334155;
  --text-muted:   #64748B;
  --text-faint:   #94A3B8;

  --border:   rgba(0,0,0,.07);

  /* Radius — round is key! */
  --r-sm:  8px;
  --r-md:  16px;
  --r-lg:  24px;
  --r-xl:  32px;
  --r-full:9999px;

  /* Shadows */
  --shadow-xs: 0 1px 4px rgba(0,0,0,.06);
  --shadow-sm: 0 4px 16px rgba(0,0,0,.07);
  --shadow-md: 0 8px 32px rgba(0,0,0,.10);
  --shadow-lg: 0 16px 48px rgba(0,0,0,.13);
  --shadow-sky: 0 8px 28px rgba(14,165,233,.28);
  --shadow-coral: 0 8px 28px rgba(249,115,22,.28);

  --max-w: 1160px;
  --px:    clamp(1.25rem,5vw,2.5rem);
  --trans: 0.25s cubic-bezier(.34,1.56,.64,1);
  --trans-fast: 0.15s ease;
}

/* ── Reset ───────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box;margin:0;padding:0; }
html { scroll-behavior:smooth;font-size:16px; }
body {
  font-family:'Noto Sans JP',sans-serif;
  background:var(--bg-base);
  color:var(--text-body);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img  { display:block;max-width:100%;height:auto; }
a    { color:inherit;text-decoration:none; }
ul   { list-style:none; }
button { cursor:pointer;border:none;background:none;font-family:inherit; }
::selection { background:rgba(14,165,233,.2);color:#0F172A; }
::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:var(--bg-base); }
::-webkit-scrollbar-thumb { background:var(--sky-lt);border-radius:4px; }

/* ── Layout ──────────────────────────────────────────────── */
.container { max-width:var(--max-w);margin:0 auto;padding:0 var(--px); }
.section-py { padding:clamp(4rem,8vw,7rem) 0; }

/* ── Gradient helpers ────────────────────────────────────── */
.grad-sky    { background:linear-gradient(135deg,var(--sky),var(--teal)); }
.grad-coral  { background:linear-gradient(135deg,var(--coral),var(--pink)); }
.grad-purple { background:linear-gradient(135deg,var(--purple),var(--sky)); }
.grad-green  { background:linear-gradient(135deg,var(--teal),var(--green)); }

/* ── Typography ──────────────────────────────────────────── */
.eyebrow {
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.7rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--sky);background:var(--sky-dim);
  padding:.375rem 1rem;border-radius:var(--r-full);
}
.eyebrow::before { content:'';display:block;width:1rem;height:2px;background:var(--sky);border-radius:1px;flex-shrink:0; }

.heading-xl { font-size:clamp(2.4rem,5.5vw,4.2rem);font-weight:900;letter-spacing:-.03em;line-height:1.1;color:var(--text-dark); }
.heading-lg { font-size:clamp(1.75rem,3.5vw,2.75rem);font-weight:900;letter-spacing:-.025em;line-height:1.15;color:var(--text-dark); }
.heading-md { font-size:clamp(1.2rem,2.5vw,1.75rem);font-weight:700;line-height:1.3;color:var(--text-dark); }
.heading-sm { font-size:1.0625rem;font-weight:700;line-height:1.45;color:var(--text-dark); }
.lead { font-size:clamp(.9375rem,1.5vw,1.05rem);color:var(--text-muted);line-height:2; }

/* Gradient text */
.grad-text-sky {
  background:linear-gradient(135deg,var(--sky),var(--teal));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.grad-text-coral {
  background:linear-gradient(135deg,var(--coral),var(--pink));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}

/* Underline accent */
.title-underline { display:inline-block;position:relative;padding-bottom:.625rem; }
.title-underline::after { content:'';position:absolute;bottom:0;left:0;width:3.5rem;height:4px;background:linear-gradient(90deg,var(--sky),var(--teal));border-radius:2px; }

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.875rem 2rem;font-size:.9rem;font-weight:700;letter-spacing:.04em;
  border-radius:var(--r-full);transition:var(--trans);line-height:1;
  border:2px solid transparent;
}
.btn-sky {
  background:linear-gradient(135deg,var(--sky),var(--teal));
  color:#fff;box-shadow:var(--shadow-sky);
}
.btn-sky:hover { transform:translateY(-3px) scale(1.02);box-shadow:0 12px 36px rgba(14,165,233,.4); }

.btn-coral {
  background:linear-gradient(135deg,var(--coral),var(--pink));
  color:#fff;box-shadow:var(--shadow-coral);
}
.btn-coral:hover { transform:translateY(-3px) scale(1.02);box-shadow:0 12px 36px rgba(249,115,22,.4); }

.btn-white {
  background:#fff;color:var(--text-dark);
  box-shadow:var(--shadow-sm);border-color:var(--border);
}
.btn-white:hover { transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--sky); }

.btn-outline-sky {
  background:transparent;color:var(--sky);
  border-color:var(--sky);
}
.btn-outline-sky:hover { background:var(--sky-dim);transform:translateY(-2px); }

.btn-ghost {
  background:rgba(255,255,255,.15);color:#fff;
  border-color:rgba(255,255,255,.35);backdrop-filter:blur(8px);
}
.btn-ghost:hover { background:rgba(255,255,255,.25);transform:translateY(-2px); }

.btn-arrow::after { content:'→';font-size:1em;transition:transform .2s ease; }
.btn-arrow:hover::after { transform:translateX(4px); }

/* ── Badge / Tag ─────────────────────────────────────────── */
.badge {
  display:inline-flex;align-items:center;padding:.25rem .875rem;
  font-size:.6875rem;font-weight:700;letter-spacing:.06em;
  border-radius:var(--r-full);
  background:var(--sky-dim);color:var(--sky);
}
.badge-coral  { background:var(--coral-dim);color:var(--coral); }
.badge-purple { background:rgba(139,92,246,.1);color:var(--purple); }
.badge-teal   { background:rgba(20,184,166,.1);color:var(--teal); }
.badge-white  { background:rgba(255,255,255,.2);color:#fff; }

/* ── Card ────────────────────────────────────────────────── */
.card {
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--r-lg);box-shadow:var(--shadow-sm);
  transition:box-shadow var(--trans),transform var(--trans);
}
.card:hover { box-shadow:var(--shadow-lg);transform:translateY(-6px); }

/* ── Blob / Glow decorations ─────────────────────────────── */
.blob {
  position:absolute;border-radius:50%;filter:blur(60px);
  pointer-events:none;opacity:.5;
}

/* ── Section divider wave ────────────────────────────────── */
.wave-bottom {
  position:relative;overflow:hidden;
}
.wave-bottom::after {
  content:'';position:absolute;bottom:-1px;left:0;right:0;
  height:60px;
  background:var(--bg-base);
  clip-path:ellipse(55% 100% at 50% 100%);
}

/* ── Animations ──────────────────────────────────────────── */
@keyframes float-y { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
@keyframes pulse-ring { 0%{transform:scale(1);opacity:.6} 100%{transform:scale(1.8);opacity:0} }
@keyframes gradient-shift { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
@keyframes slide-up-soft { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }

.reveal { opacity:0;transform:translateY(20px);transition:opacity .65s ease,transform .65s cubic-bezier(.34,1.56,.64,1); }
.reveal.visible { opacity:1;transform:translateY(0); }
.reveal-left  { opacity:0;transform:translateX(-20px);transition:opacity .65s ease,transform .65s cubic-bezier(.34,1.56,.64,1); }
.reveal-right { opacity:0;transform:translateX(20px); transition:opacity .65s ease,transform .65s cubic-bezier(.34,1.56,.64,1); }
.reveal-left.visible,.reveal-right.visible { opacity:1;transform:translate(0); }
.delay-1 { transition-delay:.1s; }
.delay-2 { transition-delay:.2s; }
.delay-3 { transition-delay:.3s; }
.delay-4 { transition-delay:.4s; }

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(16px) saturate(180%);
  -webkit-backdrop-filter:blur(16px) saturate(180%);
  border-bottom:1px solid var(--border);
  transition:box-shadow .2s ease;
}
.site-header.scrolled { box-shadow:0 2px 20px rgba(14,165,233,.1); }
.header-inner { display:flex;align-items:center;justify-content:space-between;height:70px; }

.logo { display:flex;align-items:center;gap:.625rem;flex-shrink:0; }
.logo-mark {
  width:38px;height:38px;
  border-radius:var(--r-sm);
  object-fit:cover;object-position:center 60%;
  flex-shrink:0;
  transition:transform var(--trans);
  box-shadow:0 2px 8px rgba(0,0,0,.18);
  display:block;
}
.logo:hover .logo-mark { transform:rotate(-4deg) scale(1.08); }
.logo-text { display:flex;flex-direction:column;line-height:1; }
.logo-name { font-size:.875rem;font-weight:700;color:var(--text-dark); }
.logo-sub  { font-size:.6rem;color:var(--text-faint);letter-spacing:.08em;margin-top:2px; }

.nav-list { display:flex;align-items:center;gap:.125rem; }
.nav-link {
  font-size:.8125rem;font-weight:600;color:var(--text-muted);
  padding:.5rem .875rem;border-radius:var(--r-full);
  transition:color var(--trans-fast),background var(--trans-fast);
}
.nav-link:hover { color:var(--sky);background:var(--sky-dim); }
.nav-link.active { color:var(--sky);background:var(--sky-dim);font-weight:700; }
.nav-cta { margin-left:.75rem; }

.hamburger { display:none;flex-direction:column;gap:5px;width:40px;height:40px;align-items:center;justify-content:center;padding:4px; }
.hamburger span { display:block;width:22px;height:2px;background:var(--text-dark);transition:var(--trans-fast);transform-origin:center;border-radius:1px; }
.hamburger.open span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
.hamburger.open span:nth-child(2) { opacity:0;transform:scaleX(0); }
.hamburger.open span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }

.mobile-nav {
  position:fixed;top:0;right:0;bottom:0;width:min(320px,85vw);
  background:#fff;border-left:1px solid var(--border);
  box-shadow:-8px 0 32px rgba(0,0,0,.1);
  z-index:200;transform:translateX(100%);
  transition:transform .3s cubic-bezier(.22,1,.36,1);
  display:flex;flex-direction:column;
}
.mobile-nav.open { transform:translateX(0); }
.mobile-nav-header {
  display:flex;align-items:center;justify-content:space-between;
  padding:1.25rem 1.5rem;
  background:linear-gradient(135deg,var(--sky),var(--teal));
}
.mobile-nav-close { width:36px;height:36px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.25rem;border-radius:50%;background:rgba(255,255,255,.2);transition:background var(--trans-fast); }
.mobile-nav-close:hover { background:rgba(255,255,255,.3); }
.mobile-nav-links { flex:1;overflow-y:auto;display:flex;flex-direction:column;padding:.75rem; }
.mobile-nav-link {
  display:flex;align-items:center;justify-content:space-between;
  padding:.875rem 1rem;border-radius:var(--r-md);
  font-size:.9rem;font-weight:600;color:var(--text-body);
  transition:background var(--trans-fast),color var(--trans-fast);margin-bottom:2px;
}
.mobile-nav-link:hover { background:var(--sky-dim);color:var(--sky); }
.mobile-nav-link span { font-size:.65rem;color:var(--text-faint);letter-spacing:.1em; }
.mobile-nav-footer { padding:1.25rem;border-top:1px solid var(--border); }
.overlay { position:fixed;inset:0;background:rgba(15,23,42,.5);z-index:150;opacity:0;pointer-events:none;transition:opacity .25s ease; }
.overlay.show { opacity:1;pointer-events:auto; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position:relative;min-height:100svh;
  display:flex;align-items:center;overflow:hidden;
  background:
    linear-gradient(160deg,rgba(10,20,50,.55) 0%,rgba(8,28,60,.48) 50%,rgba(6,24,52,.45) 100%),
    url('../images/hero-bg.jpg') 120% -50% / cover no-repeat;
}
/* Animated gradient orbs */
.hero-orb-1 {
  position:absolute;top:-10%;left:-5%;
  width:600px;height:600px;border-radius:50%;
  background:radial-gradient(circle,rgba(14,165,233,.35) 0%,transparent 70%);
  filter:blur(40px);animation:float-y 8s ease-in-out infinite;
}
.hero-orb-2 {
  position:absolute;bottom:-10%;right:-5%;
  width:500px;height:500px;border-radius:50%;
  background:radial-gradient(circle,rgba(139,92,246,.3) 0%,transparent 70%);
  filter:blur(50px);animation:float-y 10s ease-in-out infinite reverse;
}
.hero-orb-3 {
  position:absolute;top:40%;left:40%;
  width:400px;height:400px;border-radius:50%;
  background:radial-gradient(circle,rgba(20,184,166,.2) 0%,transparent 70%);
  filter:blur(60px);animation:float-y 12s ease-in-out infinite 2s;
}
.hero-grid {
  position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:56px 56px;
}
.hero-content {
  position:relative;z-index:2;
  padding:8rem var(--px) 5rem;width:100%;max-width:var(--max-w);margin:0 auto;
}
.hero-label {
  display:inline-flex;align-items:center;gap:.625rem;
  font-size:.75rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  background:rgba(255,255,255,.12);color:rgba(255,255,255,.9);
  padding:.4rem 1.125rem;border-radius:var(--r-full);
  border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(8px);
  margin-bottom:1.75rem;
  animation:slide-up-soft .6s .3s both;
}
.hero-title {
  font-size:clamp(2.6rem,6vw,5rem);font-weight:900;
  letter-spacing:-.035em;line-height:1.08;
  color:#fff;margin-bottom:1.5rem;
  animation:slide-up-soft .6s .5s both;
}
.hero-title em {
  font-style:normal;display:inline-block;
  background:linear-gradient(135deg,#38BDF8,#2DD4BF,#818CF8);
  background-size:200% auto;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  animation:gradient-shift 4s linear infinite;
}
.hero-sub {
  font-size:clamp(.9375rem,1.6vw,1.0625rem);color:rgba(255,255,255,.72);
  max-width:520px;margin-bottom:2.75rem;line-height:2;
  animation:slide-up-soft .6s .7s both;
}
.hero-btns { display:flex;align-items:center;flex-wrap:wrap;gap:1rem;animation:slide-up-soft .6s .9s both; }
.hero-scroll {
  position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:.5rem;
  color:rgba(255,255,255,.4);font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;
}
.hero-scroll-line { width:1px;height:36px;background:linear-gradient(to bottom,rgba(255,255,255,.4),transparent); }

/* ── Stats bar ───────────────────────────────────────────── */
.stats-bar {
  background:#fff;border-bottom:1px solid var(--border);
  display:grid;grid-template-columns:repeat(4,1fr);
  box-shadow:0 4px 20px rgba(0,0,0,.06);
}
.stat-item {
  text-align:center;padding:2.25rem 1rem;
  border-right:1px solid var(--border);position:relative;
}
.stat-item:last-child { border-right:none; }
.stat-num {
  font-size:clamp(2rem,4vw,2.75rem);font-weight:900;letter-spacing:-.03em;line-height:1;
  background:linear-gradient(135deg,var(--sky),var(--teal));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  display:block;
}
.stat-label { font-size:.75rem;color:var(--text-muted);margin-top:.375rem;letter-spacing:.04em; }

/* ── Section header ──────────────────────────────────────── */
.section-header { margin-bottom:3.5rem; }
.section-header .eyebrow { margin-bottom:.875rem; }

/* ── About section ───────────────────────────────────────── */
.about-grid { display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center; }
.about-box {
  aspect-ratio:4/3;
  background:linear-gradient(135deg,var(--sky),var(--teal),var(--purple));
  background-size:200% 200%;animation:gradient-shift 6s ease infinite;
  border-radius:var(--r-xl);box-shadow:0 24px 64px rgba(14,165,233,.35);
  display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;
}
.about-box::before {
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 30% 30%,rgba(255,255,255,.2) 0%,transparent 60%);
}
.about-number { font-size:clamp(5rem,10vw,8rem);font-weight:900;color:#fff;line-height:1;letter-spacing:-.04em; }
.about-number-sub { font-size:.875rem;font-weight:700;color:rgba(255,255,255,.7);letter-spacing:.15em;text-transform:uppercase;margin-top:.25rem;text-align:center; }
.about-badges { display:flex;gap:.625rem;margin-top:1rem;flex-wrap:wrap; }
.about-text-body { font-size:.9375rem;color:var(--text-muted);line-height:2; }
.about-actions { display:flex;gap:1rem;flex-wrap:wrap;margin-top:1.25rem; }

/* ── Services ────────────────────────────────────────────── */
.services-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem; }
.service-card {
  background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);
  padding:2.25rem 2rem;box-shadow:var(--shadow-sm);
  transition:box-shadow var(--trans),transform var(--trans);
  position:relative;overflow:hidden;
}
.service-card:hover { box-shadow:var(--shadow-lg);transform:translateY(-8px); }
.service-card-accent {
  position:absolute;top:0;left:0;right:0;height:5px;
  background:linear-gradient(90deg,var(--sky),var(--teal));
  border-radius:var(--r-lg) var(--r-lg) 0 0;
}
.service-icon {
  width:56px;height:56px;
  background:linear-gradient(135deg,var(--sky-dim),rgba(20,184,166,.1));
  border-radius:var(--r-md);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:1.25rem;transition:background var(--trans);
}
.service-card:hover .service-icon { background:linear-gradient(135deg,var(--sky),var(--teal));box-shadow:var(--shadow-sky); }
.service-card:hover .service-icon svg { stroke:#fff; }
.service-no { position:absolute;top:1rem;right:1.25rem;font-size:3.5rem;font-weight:900;color:rgba(0,0,0,.04);letter-spacing:-.04em;line-height:1;user-select:none; }
.service-en { font-size:.65rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--sky);margin-bottom:.375rem;display:block; }
.service-title { font-size:1rem;font-weight:700;color:var(--text-dark);margin-bottom:.75rem;line-height:1.4; }
.service-desc { font-size:.825rem;color:var(--text-muted);line-height:1.85; }
.service-link { display:inline-flex;align-items:center;gap:.375rem;margin-top:1.25rem;font-size:.8125rem;color:var(--sky);font-weight:700;transition:gap var(--trans-fast),color var(--trans-fast); }
.service-link:hover { gap:.625rem;color:var(--teal); }

/* ── Works ───────────────────────────────────────────────── */
.works-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem; }
.work-card {
  background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--shadow-sm);
  transition:box-shadow var(--trans),transform var(--trans);
}
.work-card:hover { box-shadow:var(--shadow-lg);transform:translateY(-6px); }
.work-thumb {
  aspect-ratio:16/10;position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--sky),var(--teal));
}
.work-thumb-overlay { position:absolute;inset:0;background:linear-gradient(to top,rgba(15,23,42,.75) 0%,transparent 60%); }
.work-thumb-meta { position:absolute;bottom:1rem;left:1rem;right:1rem;display:flex;justify-content:space-between;align-items:flex-end; }
.work-body { padding:1.375rem; }
.work-title { font-size:.9375rem;font-weight:700;color:var(--text-dark);margin-bottom:.5rem;line-height:1.4; }
.work-desc  { font-size:.8125rem;color:var(--text-muted);line-height:1.8; }
.work-tags  { display:flex;flex-wrap:wrap;gap:.375rem;margin-top:.75rem; }
.work-tag   { padding:.2rem .625rem;background:var(--bg-light);border-radius:var(--r-full);font-size:.6875rem;color:var(--text-muted);font-weight:600; }

/* ── Safety section ──────────────────────────────────────── */
.safety-section {
  background:linear-gradient(135deg,#0a1e3c,#0d2a50,#0a3564);
  position:relative;overflow:hidden;
}
.safety-orb-1 { top:20%;left:10%;width:300px;height:300px;background:radial-gradient(circle,rgba(14,165,233,.2) 0%,transparent 70%);filter:blur(40px); }
.safety-orb-2 { bottom:10%;right:10%;width:250px;height:250px;background:radial-gradient(circle,rgba(139,92,246,.2) 0%,transparent 70%);filter:blur(40px); }
.safety-items { display:grid;grid-template-columns:repeat(4,1fr);gap:2rem; }
.safety-item { text-align:center; }
.safety-icon-wrap {
  width:72px;height:72px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);
  border-radius:var(--r-lg);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 1.25rem;
  transition:background var(--trans),transform var(--trans),box-shadow var(--trans);
}
.safety-item:hover .safety-icon-wrap {
  background:linear-gradient(135deg,rgba(14,165,233,.25),rgba(20,184,166,.25));
  transform:translateY(-4px) scale(1.05);
  box-shadow:0 8px 24px rgba(14,165,233,.3);
}
.safety-name { font-size:.9375rem;font-weight:700;color:#fff;margin-bottom:.375rem; }
.safety-desc { font-size:.8rem;color:rgba(255,255,255,.55);line-height:1.85; }

/* ── News ────────────────────────────────────────────────── */
.news-list { display:flex;flex-direction:column; }
.news-item {
  display:flex;align-items:center;gap:1.5rem;
  padding:1.125rem .75rem;border-radius:var(--r-md);
  transition:background var(--trans-fast);cursor:pointer;
}
.news-item + .news-item { border-top:1px solid var(--border); }
.news-item:hover { background:var(--sky-dim); }
.news-date  { font-size:.75rem;font-family:monospace;color:var(--text-faint);white-space:nowrap;flex-shrink:0;font-weight:600;font-variant-numeric:tabular-nums; }
.news-cat   { flex-shrink:0; }
.news-title { font-size:.875rem;color:var(--text-body);transition:color var(--trans-fast); }
.news-item:hover .news-title { color:var(--sky);font-weight:600; }
.news-arrow { margin-left:auto;color:var(--text-faint);transition:color var(--trans-fast),transform var(--trans-fast);flex-shrink:0; }
.news-item:hover .news-arrow { color:var(--sky);transform:translateX(4px); }

/* ── CTA section ─────────────────────────────────────────── */
.cta-section {
  position:relative;text-align:center;overflow:hidden;
  background:linear-gradient(135deg,#0d1a3a,#0a2456,#0d2a6e);
}
.cta-orb-1 { top:30%;left:20%;width:300px;height:300px;background:radial-gradient(circle,rgba(14,165,233,.25) 0%,transparent 70%);filter:blur(40px); }
.cta-orb-2 { top:20%;right:15%;width:250px;height:250px;background:radial-gradient(circle,rgba(139,92,246,.25) 0%,transparent 70%);filter:blur(50px); }
.cta-deco,.cta-glow { display:none; }/* legacy compat */
.cta-content { position:relative;z-index:1;max-width:680px;margin:0 auto; }
.cta-content .heading-lg { color:#fff;margin-bottom:1.25rem; }
.cta-content .lead { color:rgba(255,255,255,.7);margin-bottom:2.5rem;max-width:480px;margin-left:auto;margin-right:auto; }
.cta-btns { display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:1rem; }

/* ── Access ──────────────────────────────────────────────── */
.access-grid { display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start; }
.access-map {
  aspect-ratio:4/3;
  background:linear-gradient(135deg,var(--sky-dim),rgba(20,184,166,.08));
  border:2px solid rgba(14,165,233,.15);
  border-radius:var(--r-xl);
  box-shadow:var(--shadow-md);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.access-map-placeholder { text-align:center;color:var(--text-muted);font-size:.8rem;line-height:2; }
.access-info { display:flex;flex-direction:column;gap:1.25rem; }
.access-row { display:flex;gap:1rem;align-items:flex-start; }
.access-row-icon {
  width:2.75rem;height:2.75rem;
  background:linear-gradient(135deg,var(--sky),var(--teal));
  border-radius:var(--r-md);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;margin-top:2px;
  box-shadow:var(--shadow-sky);
}
.access-row dt { font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint);margin-bottom:.25rem; }
.access-row dd { font-size:.9375rem;color:var(--text-dark);line-height:1.7;font-weight:600; }

/* ── Point cards ─────────────────────────────────────────── */
.point-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:1.75rem; }
.point-card {
  background:#fff;border:1px solid var(--border);border-radius:var(--r-xl);
  padding:2.5rem 2rem;box-shadow:var(--shadow-sm);position:relative;overflow:hidden;
  transition:box-shadow var(--trans),transform var(--trans);
}
.point-card:hover { box-shadow:var(--shadow-lg);transform:translateY(-8px); }
.point-num {
  font-size:5rem;font-weight:900;line-height:1;letter-spacing:-.04em;
  position:absolute;top:.5rem;right:1rem;user-select:none;
  background:linear-gradient(135deg,var(--sky-dim),rgba(20,184,166,.08));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.point-icon {
  width:64px;height:64px;border-radius:var(--r-lg);
  background:linear-gradient(135deg,var(--sky),var(--teal));
  display:flex;align-items:center;justify-content:center;
  margin-bottom:1.25rem;font-size:1.75rem;
  box-shadow:var(--shadow-sky);
  transition:transform var(--trans);
}
.point-card:hover .point-icon { transform:scale(1.08) rotate(-5deg); }
.point-title { font-size:1.0625rem;font-weight:700;color:var(--text-dark);margin-bottom:.625rem;line-height:1.4; }
.point-desc  { font-size:.85rem;color:var(--text-muted);line-height:1.9; }

/* ============================================================
   PAGE HERO (subpages)
   ============================================================ */
.page-hero {
  position:relative;
  padding:clamp(7rem,12vw,10rem) 0 clamp(4rem,6vw,5.5rem);
  overflow:hidden;
  background:
    linear-gradient(160deg,rgba(8,20,48,.28) 0%,rgba(6,26,56,.22) 50%,rgba(5,22,48,.20) 100%),
    url('../images/hero-bg.jpg') center 40% / cover no-repeat;
}
.page-hero-bg { position:absolute;inset:0; }
.page-hero-pattern {
  position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:56px 56px;
}
.page-hero-orb-1 {
  position:absolute;top:-20%;right:-5%;
  width:500px;height:500px;border-radius:50%;
  background:radial-gradient(circle,rgba(14,165,233,.18) 0%,transparent 70%);
  filter:blur(50px);
}
.page-hero-deco {
  position:absolute;right:-2rem;bottom:-2rem;
  font-size:clamp(7rem,16vw,15rem);font-weight:900;
  background:linear-gradient(135deg,rgba(14,165,233,.06),rgba(20,184,166,.04));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  line-height:1;letter-spacing:-.04em;pointer-events:none;user-select:none;
}
.page-hero-bottom {
  position:absolute;bottom:0;left:0;right:0;height:5px;
  background:linear-gradient(90deg,var(--sky),var(--teal),var(--purple),var(--sky));
  background-size:200% auto;animation:gradient-shift 4s linear infinite;
}
.page-hero-content { position:relative;z-index:1; }
.page-hero-content .eyebrow { background:rgba(255,255,255,.1);color:rgba(255,255,255,.9);border:1px solid rgba(255,255,255,.15);margin-bottom:1rem; }
.page-hero-content .eyebrow::before { background:rgba(255,255,255,.6); }
.page-hero-content h1 { font-size:clamp(2.2rem,5vw,3.5rem);font-weight:900;letter-spacing:-.025em;line-height:1.1;color:#fff;margin-bottom:1rem; }
.page-hero-content p { font-size:clamp(.875rem,1.5vw,1rem);color:rgba(255,255,255,.65);max-width:600px;line-height:2; }

/* ── Breadcrumb ─────────────────────────────────────────── */
.breadcrumb { display:flex;align-items:center;gap:.5rem;font-size:.75rem;color:rgba(255,255,255,.4);margin-bottom:1.5rem;flex-wrap:wrap; }
.breadcrumb a { color:rgba(255,255,255,.4);transition:color var(--trans-fast); }
.breadcrumb a:hover { color:rgba(255,255,255,.9); }
.breadcrumb-sep { opacity:.4; }

/* ============================================================
   COMPANY TABLE
   ============================================================ */
.company-table { width:100%;border-collapse:collapse; }
.company-table th,.company-table td { padding:1.125rem 1.375rem;text-align:left;border-bottom:1px solid var(--border);font-size:.9rem;vertical-align:top; }
.company-table th { width:180px;font-weight:700;color:var(--text-muted);background:var(--bg-light);white-space:nowrap;font-size:.8125rem;letter-spacing:.04em; }
.company-table td { color:var(--text-dark);line-height:1.8; }
.company-table tr:last-child th,.company-table tr:last-child td { border-bottom:none; }

.philosophy-grid { display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem; }
.philosophy-card {
  border-left:4px solid var(--sky);padding:1.5rem 1.625rem;
  background:#fff;border-radius:0 var(--r-md) var(--r-md) 0;
  box-shadow:var(--shadow-sm);transition:box-shadow var(--trans),transform var(--trans);
}
.philosophy-card:hover { box-shadow:var(--shadow-md);transform:translateX(4px); }
.philosophy-label { font-size:.65rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--sky);margin-bottom:.5rem;display:block; }
.philosophy-text { font-size:.9375rem;font-weight:700;color:var(--text-dark);line-height:1.5; }
.philosophy-sub  { font-size:.825rem;color:var(--text-muted);margin-top:.375rem;line-height:1.8; }

.history-list { display:flex;flex-direction:column;gap:0;position:relative; }
.history-line { position:absolute;left:90px;top:0;bottom:0;width:2px;background:linear-gradient(to bottom,var(--sky),var(--teal)); }
.history-item { display:flex;gap:2rem;align-items:flex-start;padding:1.375rem 0;position:relative; }
.history-year { width:80px;flex-shrink:0;text-align:right;font-size:.875rem;font-weight:900;font-variant-numeric:tabular-nums;color:var(--sky);padding-top:.1rem; }
.history-dot { position:absolute;left:84px;top:1.6rem;width:12px;height:12px;background:linear-gradient(135deg,var(--sky),var(--teal));border:3px solid #fff;border-radius:50%;flex-shrink:0;box-shadow:0 0 0 3px rgba(14,165,233,.2); }
.history-event { padding-left:3rem;flex:1;font-size:.875rem;color:var(--text-muted);line-height:1.9; }

/* ============================================================
   BUSINESS PAGE
   ============================================================ */
.biz-section { padding:4.5rem 0;border-bottom:1px solid var(--border); }
.biz-section:last-child { border-bottom:none; }
.biz-section.bg-gray { background:var(--bg-light); }
.biz-grid { display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center; }
.biz-visual {
  aspect-ratio:4/3;
  background:linear-gradient(135deg,var(--sky),var(--teal));
  background-size:200% 200%;animation:gradient-shift 6s ease infinite;
  border-radius:var(--r-xl);box-shadow:0 20px 60px rgba(14,165,233,.3);
  display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;
}
.biz-visual::before { content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 30% 30%,rgba(255,255,255,.2) 0%,transparent 60%); }
.biz-num { font-size:10rem;font-weight:900;line-height:1;letter-spacing:-.05em;color:rgba(255,255,255,.12);font-variant-numeric:tabular-nums; }
.biz-num-label { position:absolute;bottom:1.25rem;left:1.25rem;font-size:.7rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.8);display:flex;align-items:center;gap:.5rem; }
.biz-num-label::before { content:'';width:1.5rem;height:2px;background:rgba(255,255,255,.6); }
.biz-features { display:flex;flex-direction:column;gap:.625rem;margin-top:1.25rem; }
.biz-feature { display:flex;align-items:flex-start;gap:.75rem;font-size:.875rem;color:var(--text-muted); }
.biz-check { width:22px;height:22px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--sky),var(--teal));border-radius:50%;flex-shrink:0;margin-top:.05rem;color:#fff;font-size:.6rem;font-weight:900;box-shadow:var(--shadow-sky); }

/* ============================================================
   WORKS FILTER
   ============================================================ */
.works-filter { display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2.5rem; }
.filter-btn { padding:.5rem 1.25rem;font-size:.8125rem;font-weight:600;border:1.5px solid var(--border);border-radius:var(--r-full);color:var(--text-muted);background:#fff;transition:var(--trans);letter-spacing:.04em;cursor:pointer;box-shadow:var(--shadow-xs); }
.filter-btn:hover { border-color:var(--sky);color:var(--sky);background:var(--sky-dim); }
.filter-btn.active { background:linear-gradient(135deg,var(--sky),var(--teal));color:#fff;border-color:transparent;box-shadow:var(--shadow-sky); }

.work-card-visual { aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;background:linear-gradient(135deg,var(--sky),var(--teal)); }
.work-card-icon { font-size:3rem;opacity:.3; }
.work-card-body { padding:1.375rem; }
.work-card-tags { display:flex;flex-wrap:wrap;gap:.375rem;margin-bottom:.75rem; }
.work-card-title { font-size:.9375rem;font-weight:700;color:var(--text-dark);line-height:1.45;margin-bottom:.5rem; }
.work-card-desc { font-size:.8125rem;color:var(--text-muted);line-height:1.85; }
.work-card-year { display:inline-block;margin-top:.875rem;font-size:.75rem;color:var(--text-faint);font-variant-numeric:tabular-nums;font-weight:600; }

/* ============================================================
   NEWS PAGE
   ============================================================ */
.news-page-list { display:flex;flex-direction:column; }
.news-page-item { display:grid;grid-template-columns:200px 1fr;gap:2.5rem;padding:2rem 0;border-bottom:1px solid var(--border); }
.news-page-meta { display:flex;flex-direction:column;gap:.625rem;padding-top:.125rem; }
.news-page-date { font-size:.8125rem;color:var(--text-faint);font-family:monospace;font-variant-numeric:tabular-nums;font-weight:600; }
.news-tag-label { display:inline-flex;align-items:center;padding:.2rem .875rem;font-size:.6875rem;font-weight:700;letter-spacing:.08em;border-radius:var(--r-full);background:var(--bg-light);color:var(--text-muted);width:fit-content; }
.news-tag-label.new { background:linear-gradient(135deg,var(--sky),var(--teal));color:#fff; }
.news-page-title { font-size:1rem;font-weight:700;color:var(--text-dark);line-height:1.5;margin-bottom:.75rem; }
.news-page-text { font-size:.875rem;color:var(--text-muted);line-height:2; }

/* ============================================================
   RECRUIT PAGE
   ============================================================ */
.recruit-card { background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm); }
.recruit-card-head {
  display:flex;align-items:flex-start;justify-content:space-between;gap:1.5rem;
  padding:2rem;border-bottom:1px solid var(--border);
  background:linear-gradient(135deg,#e0f2fe,#ccfbf1);
}
.recruit-table-wrap { overflow-x:auto; }
.recruit-table-wrap .company-table th { width:200px; }
.recruit-feature-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:1rem; }
.recruit-msg-grid { display:grid;grid-template-columns:1fr 1fr;gap:1rem; }
.recruit-feature-card { background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);padding:1.75rem 1.25rem;text-align:center;box-shadow:var(--shadow-xs);transition:box-shadow var(--trans),transform var(--trans); }
.recruit-feature-card:hover { box-shadow:var(--shadow-md);transform:translateY(-4px); }

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.contact-layout { display:grid;grid-template-columns:3fr 2fr;gap:4rem;align-items:start; }
.contact-sidebar { position:sticky;top:5.5rem;display:flex;flex-direction:column;gap:1.25rem; }
.form-group { display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.25rem; }
.form-label { font-size:.8rem;font-weight:700;color:var(--text-body);letter-spacing:.04em; }
.req { color:#ef4444;margin-left:.25rem;font-size:.75rem; }
.form-control {
  width:100%;background:var(--bg-light);border:1.5px solid var(--border);border-radius:var(--r-md);
  padding:.875rem 1.125rem;color:var(--text-dark);font-size:.9rem;font-family:inherit;
  transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;
}
.form-control::placeholder { color:var(--text-faint); }
.form-control:focus { outline:none;border-color:var(--sky);background:#fff;box-shadow:0 0 0 4px rgba(14,165,233,.1); }
select.form-control { appearance:none;cursor:pointer; }
textarea.form-control { resize:vertical;min-height:140px;line-height:1.75; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { background:var(--bg-dark);color:rgba(255,255,255,.65); }
.footer-top { display:grid;grid-template-columns:2.2fr 1fr 1fr 1fr;gap:3rem;padding:4rem 0;border-bottom:1px solid rgba(255,255,255,.06); }
.footer-brand { display:flex;flex-direction:column;gap:1rem; }
.footer-logo { display:flex;align-items:center;gap:.625rem; }
.footer-logo .logo-name { color:#fff; }
.footer-logo .logo-sub  { color:rgba(255,255,255,.3); }
.footer-desc { font-size:.8125rem;color:rgba(255,255,255,.4);line-height:2;max-width:240px; }
.footer-contact { margin-top:.5rem; }
.footer-tel { font-size:1.375rem;font-weight:900;color:var(--sky-lt);letter-spacing:.02em;display:block; }
.footer-hours { font-size:.7rem;color:rgba(255,255,255,.3);margin-top:.125rem; }
.footer-col h4 { font-size:.65rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.3);margin-bottom:1rem; }
.footer-links { display:flex;flex-direction:column;gap:.625rem; }
.footer-link { font-size:.8125rem;color:rgba(255,255,255,.45);transition:color var(--trans-fast); }
.footer-link:hover { color:var(--sky-lt); }
.footer-bottom { display:flex;align-items:center;justify-content:space-between;padding:1.25rem 0;font-size:.75rem;color:rgba(255,255,255,.25);flex-wrap:wrap;gap:.75rem; }

/* ============================================================
   BACK-TO-TOP
   ============================================================ */
.back-to-top {
  position:fixed;bottom:2rem;right:2rem;width:44px;height:44px;
  background:linear-gradient(135deg,var(--sky),var(--teal));color:#fff;
  border-radius:var(--r-full);display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;font-weight:700;
  box-shadow:var(--shadow-sky);
  opacity:0;pointer-events:none;z-index:80;transition:var(--trans);
}
.back-to-top.show { opacity:1;pointer-events:auto; }
.back-to-top:hover { transform:translateY(-4px) scale(1.08);box-shadow:0 12px 32px rgba(14,165,233,.4); }

/* ── 汎用グリッドクラス ──────────────────────────────────── */
.form-row-2col {
  display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;
}
.building-types-grid {
  display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;
}

/* ============================================================
   RESPONSIVE  ≤1024px (タブレット・大型スマホ)
   ============================================================ */
@media (max-width:1024px) {
  .nav-list,.nav-cta { display:none; }
  .hamburger { display:flex; }
  .about-grid,.biz-grid,.access-grid { grid-template-columns:1fr;gap:2.5rem; }
  .biz-grid { direction:ltr !important; }
  .biz-visual { aspect-ratio:16/9; }
  .services-grid { grid-template-columns:1fr 1fr; }
  .works-grid { grid-template-columns:1fr 1fr; }
  .safety-items { grid-template-columns:1fr 1fr;gap:1.5rem; }
  .stats-bar { grid-template-columns:1fr 1fr; }
  .stat-item:nth-child(2) { border-right:none; }
  .stat-item:nth-child(3) { border-right:1px solid var(--border);border-top:1px solid var(--border); }
  .stat-item:nth-child(4) { border-right:none;border-top:1px solid var(--border); }
  .footer-top { grid-template-columns:1fr 1fr;gap:2rem; }
  .contact-layout { grid-template-columns:1fr; }
  .contact-sidebar { position:static; }
  .philosophy-grid { grid-template-columns:1fr; }
  .point-grid { grid-template-columns:1fr 1fr; }
  .recruit-feature-grid { grid-template-columns:1fr 1fr; }
  .recruit-card-head { flex-direction:column;align-items:flex-start; }
  .news-page-item { grid-template-columns:1fr;gap:.75rem; }
  .building-types-grid { grid-template-columns:repeat(2,1fr); }
}

/* ============================================================
   RESPONSIVE  ≤640px (スマホ)
   ============================================================ */
@media (max-width:640px) {
  /* グリッド */
  .services-grid,.works-grid { grid-template-columns:1fr; }
  .form-row-2col { grid-template-columns:1fr; }
  .building-types-grid { grid-template-columns:repeat(2,1fr); }
  .safety-items { grid-template-columns:1fr 1fr; }
  .stats-bar { grid-template-columns:1fr 1fr; }
  .stat-item { padding:1.625rem .75rem; }
  .stat-item:nth-child(3) { border-right:1px solid var(--border); }
  .point-grid { grid-template-columns:1fr; }
  .recruit-feature-grid { grid-template-columns:1fr 1fr; }

  /* ヒーロー */
  .hero-content { padding:6rem var(--px) 4rem; }
  .hero-title { font-size:clamp(1.9rem,9vw,2.8rem); }
  .hero-sub { font-size:.9rem; }
  .hero-btns { flex-direction:column;align-items:flex-start; }
  .hero-btns .btn { width:100%;justify-content:center; }
  .hero-scroll { display:none; }

  /* ページヒーロー */
  .page-hero { padding:6rem 0 3rem; }
  .page-hero-content h1 { font-size:clamp(1.8rem,8vw,2.5rem); }

  /* ボタン */
  .cta-btns { flex-direction:column;align-items:stretch; }
  .cta-btns .btn { width:100%;justify-content:center; }

  /* フッター */
  .footer-top { grid-template-columns:1fr; }
  .footer-bottom { flex-direction:column;text-align:center; }

  /* テーブル */
  .company-table { display:block;overflow-x:auto; }
  .company-table th { width:100px;font-size:.75rem; }
  .company-table td { font-size:.8375rem; }
  .recruit-table-wrap .company-table th { width:100px; }

  /* その他 */
  .back-to-top { bottom:1.25rem;right:1.25rem; }
  .section-py { padding:clamp(3rem,7vw,5rem) 0; }
  .section-header { margin-bottom:2rem; }
  .biz-features { gap:.5rem; }
  .works-filter { gap:.375rem; }
  .filter-btn { padding:.4rem .875rem;font-size:.75rem; }
  .news-item { gap:.875rem;padding:.875rem .5rem; }
  .news-title { font-size:.8125rem; }
  .about-actions { flex-direction:column; }
  .about-actions .btn { width:100%;justify-content:center; }
  .recruit-msg-grid { grid-template-columns:1fr 1fr; }
}