/* =========== SCSS-like (compiled to plain CSS for browser) =========== */
:root{
  --primary:#005bac;
  --accent:#f6d365;
  --bg:#f0f8ff;
  --card:#ffffff;
  --muted:#6b7280;
}
*{box-sizing:border-box}
html{
  scroll-behavior:smooth;
  scroll-padding-top: 40px;
  line-height: 1.6;
}
body{
  margin:0;
  font-family: 'Segoe UI', system-ui, -apple-system, 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', 'Yu Gothic', sans-serif;
  background:var(--bg);
  color:#222;
  -webkit-font-smoothing:antialiased;
}
/* Header / Hero */
.hero{
  position:relative;
  /*
  <a href="https://unsplash.com/ja/%E5%86%99%E7%9C%9F/%E6%9C%A8%E3%80%85%E3%81%AB%E5%9B%B2%E3%81%BE%E3%82%8C%E3%81%9F%E6%B0%B4%E5%9F%9F-NRQV-hBF10M?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>の<a href="https://unsplash.com/ja/@baileyzindel?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Bailey Zindel</a>が撮影した写真
  */
  background:linear-gradient(180deg, rgba(0,91,172,0.75), rgba(0,91,172,0.55)), url('image/bailey-zindel-NRQV-hBF10M-unsplash.jpg') center/cover no-repeat;
  color:white;
  padding:64px 20px 90px;
  text-align:center;
  overflow:hidden;
}
.hero .logo-wrap{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:18px;
  margin-bottom:18px;
}
.hero img.logo{
  width:120px;
  height:120px;
  object-fit:contain;
  border-radius:18px;
  background:rgba(255,255,255,0.12);
  padding:12px;
  box-shadow:0 8px 24px rgba(0,0,0,0.2);
  transform:translateY(-6px);
  border:2px solid rgba(255,255,255,0.12);
  animation: fadeIn 1s ease;
}
.hero h1{
  font-size:2.8rem;
  margin:6px 0 6px;
  letter-spacing:0.02em;
  font-weight:bold;
  animation: fadeInDown 1s ease;
}
.hero p.lead{
  opacity:0.95;
  margin:0;
  font-size:1.05rem;
  animation: fadeInUp 1s ease;
}
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-50px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(50px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  0% { opacity: 0; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}

/* Navigation */
nav.site-nav{display:flex;justify-content:center;gap:28px;padding:12px 20px;background:rgba(255,255,255,0.95);position:sticky;top:0;z-index:60;border-bottom:1px solid rgba(0,0,0,0.06)}
nav.site-nav a{color:var(--primary);text-decoration:none;font-weight:600}

/* Main sections */
main{max-width:1100px;margin:40px auto 80px;padding:0 18px}
.card{background:var(--card);padding:28px;border-radius:14px;box-shadow:0 8px 30px rgba(8,20,50,0.06);margin-bottom:28px}
h2.section-title{color:var(--primary);margin:0 0 18px;font-size:1.6rem}

/* Services grid */
.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.service{padding:18px;border-radius:12px;background:linear-gradient(180deg,#fff,#f7fbff);border:1px solid rgba(0,91,172,0.06)}
.service h3{margin:0 0 8px;font-size:1.05rem}
.service p{margin:0;color:var(--muted)}

/* CTO Message area */
.cto-wrap{display:grid;grid-template-columns:260px 1fr;gap:26px;align-items:center}
@media (max-width:800px){.cto-wrap{grid-template-columns:1fr;text-align:center}.cto-wrap .bubble{order:2}.cto-wrap img{margin:0 auto}}

.cto-photo{width:260px;height:260px;border-radius:18px;overflow:hidden;box-shadow:0 12px 30px rgba(0,0,0,0.15);border:6px solid #fff}
.cto-photo img{width:100%;height:100%;object-fit:cover;display:block}

.bubble{position:relative;padding:22px 26px;border-radius:12px;background:linear-gradient(180deg,#fff,#f9feff);border:1px solid rgba(0,0,0,0.06);box-shadow:0 10px 30px rgba(3,12,40,0.06)}
.bubble::after{content:"";position:absolute;left:18px;top:100%;width:0;height:0;border-left:14px solid transparent;border-right:14px solid transparent;border-top:16px solid #fff;filter:drop-shadow(0 4px 6px rgba(0,0,0,0.06));transform:translateY(-6px)}
.bubble h3{margin:0 0 8px;color:var(--primary)}
.bubble p{margin:0;color:#334155}

/* playful quote */
.cto-quote{margin-top:12px;padding:12px;border-radius:10px;background:linear-gradient(90deg,#f0f9ff,#fffaf0);border:1px dashed rgba(0,0,0,0.04);font-style:italic;color:#374151}

/* Footer */
footer.site-footer{padding:28px 20px;background:#072540;color:#dbeafe;text-align:center;border-top:1px solid rgba(255,255,255,0.04)}
footer .mini-logo{width:54px;height:54px;vertical-align:middle;margin-right:10px}

/* small helpers */
.muted{color:var(--muted)}