/* ========================================================
   Maken Technologies - LIGHT THEME Override (v5)
   screenshot.html の設計に完全準拠
   ======================================================== */

/* ─── CSS Variables ─── */
:root {
  --c-bg:        #f6f9fd;
  --c-bg-alt:    #edf1f8;
  --c-surface:   #ffffff;
  --c-line:      rgba(0, 102, 255, 0.14);
  --c-line-soft: rgba(10, 16, 32, 0.08);
  --c-text:      #0b1e36;
  --c-text-dim:  #3a5070;
  --c-text-mute: #7a90b0;
  --c-accent:    #0077ff;
  --c-accent-2:  #00a8d8;
  --c-accent-3:  #7b5cff;
  --c-accent-glow: 0 0 12px rgba(0, 119, 255, 0.35), 0 0 32px rgba(0, 180, 216, 0.22);
  --grad-primary:   linear-gradient(135deg, #00c4f0 0%, #0077ff 100%);
  --grad-secondary: linear-gradient(135deg, #00a8d8 0%, #7b5cff 100%);
}

/* ─── Base ─── */
body {
  background: #f6f9fd;
  color: #0b1e36;
  overflow-x: hidden;
}
a { color: var(--c-accent); }
a:hover { color: var(--c-accent-2); }

/* ─── 背景グリッド・パーティクル（ダーク版）は非表示 ─── */
.bg-grid { display: none !important; }
#particles-canvas { display: none !important; }

/* ─── Ambient 背景装飾 ─── */
.amb-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.amb-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(110px);
  mix-blend-mode: multiply;
  opacity: .55;
}
.amb-blob--1 {
  width: 720px; height: 720px;
  background: radial-gradient(circle, rgba(0,170,255,.22) 0%, transparent 70%);
  top: 12%; left: -220px;
  animation: ambFloat1 22s ease-in-out infinite;
}
.amb-blob--2 {
  width: 560px; height: 560px;
  background: radial-gradient(circle, rgba(140,100,255,.20) 0%, transparent 70%);
  top: 40%; right: -180px;
  animation: ambFloat2 26s ease-in-out infinite;
}
.amb-blob--3 {
  width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(0,220,200,.18) 0%, transparent 70%);
  bottom: 8%; left: 28%;
  animation: ambFloat3 30s ease-in-out infinite;
}
@keyframes ambFloat1 {
  0%, 100% { transform: translate(0,0) scale(1); }
  33%       { transform: translate(140px, 90px) scale(1.08); }
  66%       { transform: translate(80px, -60px) scale(.95); }
}
@keyframes ambFloat2 {
  0%, 100% { transform: translate(0,0) scale(1); }
  50%       { transform: translate(-160px, 120px) scale(1.1); }
}
@keyframes ambFloat3 {
  0%, 100% { transform: translate(0,0) scale(1); }
  50%       { transform: translate(-120px, -80px) scale(1.06); }
}
#ambient-canvas {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 1;
  opacity: .7;
}
.amb-grid {
  position: fixed; inset: 0;
  background-image:
    linear-gradient(rgba(0,120,220,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,120,220,.035) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse at 50% 40%, rgba(0,0,0,.8) 0%, rgba(0,0,0,.2) 60%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, rgba(0,0,0,.8) 0%, rgba(0,0,0,.2) 60%, transparent 90%);
  pointer-events: none;
  z-index: 0;
  animation: ambGridDrift 40s linear infinite;
}
@keyframes ambGridDrift {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 60px 60px, 60px 60px; }
}

/* ─── z-index スタック ─── */
/* site-header を高くすることで、内部の position:fixed な site-nav (z-index:200) が
   site-main (hero-neo など) より手前に描画されるようにする */
.site-main, .site-footer { position: relative; z-index: 2; }
.site-header { position: relative; z-index: 1000; }

/* ─── Header: 濃紺グラデ ─── */
.site-header {
  background: linear-gradient(135deg, #0a1834 0%, #0f2a5c 55%, #123a8a 100%) !important;
  border-bottom: 1px solid rgba(0, 180, 255, .18) !important;
  box-shadow: 0 6px 24px rgba(10, 30, 80, .18) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.site-header.is-scrolled {
  background: linear-gradient(135deg, #07122a 0%, #0c2350 55%, #0f3278 100%) !important;
  box-shadow: 0 8px 28px rgba(5, 20, 60, .35) !important;
}
.site-header .site-nav__list a,
.site-header .site-nav__list li > a { color: #e6f1ff !important; }
.site-header .site-nav__list a span { color: rgba(180,210,255,.7) !important; }
.site-header .site-nav__list a:hover { color: #00d4ff !important; }
.site-header .site-nav__toggle span { background: #e6f1ff !important; }
.site-header .site-logo__img {
  filter: drop-shadow(0 0 10px rgba(0,200,255,.35));
}
.site-header .site-nav__cta {
  color: #fff;
  background: var(--grad-primary);
  border-color: transparent;
  box-shadow: 0 6px 18px rgba(0,119,255,.35);
}

/* ─── Hero Neo (ライト版: inline CSS 完全上書き) ─── */
.hero-neo {
  background:
    radial-gradient(1200px 700px at 18% 18%, rgba(0,170,255,.12) 0%, transparent 60%),
    radial-gradient(900px 600px at 85% 85%, rgba(120,80,255,.08) 0%, transparent 60%),
    linear-gradient(180deg, #f4faff 0%, #eaf3ff 100%) !important;
}
.hero-neo__grid {
  background-image:
    linear-gradient(rgba(0,120,220,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,120,220,.07) 1px, transparent 1px) !important;
  mask-image: radial-gradient(ellipse at center, rgba(0,0,0,.9) 0%, rgba(0,0,0,.3) 70%, transparent 100%) !important;
  -webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,.9) 0%, rgba(0,0,0,.3) 70%, transparent 100%) !important;
}
.hero-neo__scan { display: none !important; }
.hero-neo__orb--1 {
  background: radial-gradient(circle, rgba(0,140,255,.22) 0%, transparent 70%) !important;
}
.hero-neo__orb--2 {
  background: radial-gradient(circle, rgba(140,110,255,.18) 0%, transparent 70%) !important;
}
.hero-neo__orb--3 {
  background: radial-gradient(circle, rgba(0,200,255,.14) 0%, transparent 70%) !important;
}
.hero-neo__floor {
  background-image:
    linear-gradient(rgba(0,130,220,.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,130,220,.18) 1px, transparent 1px) !important;
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.55) 40%, rgba(0,0,0,.9) 100%) !important;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.55) 40%, rgba(0,0,0,.9) 100%) !important;
}
.hero-neo__horizon {
  background: linear-gradient(90deg,
    transparent 0%, rgba(0,150,255,.18) 15%,
    rgba(0,150,255,.7) 50%,
    rgba(0,150,255,.18) 85%, transparent 100%) !important;
}
.hud-corner::before,
.hud-corner::after {
  background: rgba(0,140,230,.65) !important;
}
.hero-neo__company {
  color: rgba(0,120,200,.75) !important;
}
.hero-neo__company::before {
  background: linear-gradient(90deg, transparent, rgba(0,140,230,.55)) !important;
}
.hero-neo__company::after {
  background: linear-gradient(270deg, transparent, rgba(0,140,230,.55)) !important;
}
.hero-neo__headline .line-1 {
  background: linear-gradient(155deg, #0b2a4e 0%, #123b6d 35%, #1e4c85 65%, #0b2a4e 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 2px 10px rgba(20,60,120,.14)) !important;
}
.hero-neo__headline .line-2 {
  background: linear-gradient(155deg, #00a8d8 0%, #0077ff 40%, #5b7cff 70%, #00a8d8 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 2px 14px rgba(0,150,255,.25)) !important;
}
.hero-neo__divider .dv-line {
  background: linear-gradient(90deg, transparent, rgba(0,140,230,.7) 40%, rgba(0,140,230,.7) 60%, transparent) !important;
}
.hero-neo__divider .dv-gem {
  background: #0095d6 !important;
  box-shadow: 0 0 10px rgba(0,150,220,.55), 0 0 20px rgba(0,150,220,.3) !important;
}
.hero-neo__divider .dv-gem-sm {
  background: rgba(0,140,220,.6) !important;
}
.hero-neo__sub {
  color: rgba(30,60,110,.78) !important;
  font-weight: 400 !important;
}
.hero-neo__actions .btn--primary {
  background: linear-gradient(135deg, #00c4f0 0%, #0077ff 100%) !important;
  color: #fff !important;
  box-shadow: 0 10px 28px rgba(0,120,240,.28) !important;
}
.hero-neo__actions .btn--ghost {
  background: rgba(255,255,255,.85) !important;
  color: #0b2a4e !important;
  border: 1px solid rgba(0,120,220,.3) !important;
}
.hero-neo .hero__scroll {
  color: rgba(30,60,110,.7) !important;
}
.hero-neo .hero__scroll-line {
  background: linear-gradient(180deg, rgba(0,140,230,.6), transparent) !important;
}

/* ─── Section head ─── */
.section-head__num,
.section-head__eyebrow { color: var(--c-accent); }
.section-head__title { color: var(--c-text); }
.accent {
  background: var(--grad-primary);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ─── Buttons ─── */
.btn--primary { color: #ffffff; box-shadow: 0 6px 18px rgba(0,119,255,.35); }
.btn--ghost {
  color: var(--c-text);
  border: 1px solid var(--c-line);
  background: rgba(255,255,255,.6);
}
.btn--ghost:hover {
  border-color: var(--c-accent);
  color: var(--c-accent);
}
.link-arrow { color: var(--c-accent); }

/* ─── About ─── */
.about__body p { color: var(--c-text-dim); }
.about__tagline {
  background: linear-gradient(90deg, rgba(0,119,255,.08), transparent) !important;
  border-left-color: var(--c-accent) !important;
  color: var(--c-text) !important;
}

/* ─── Stats ─── */
.stat {
  background: #ffffff;
  border: 1px solid var(--c-line);
  box-shadow: 0 8px 20px rgba(10,30,80,.05);
}
.stat__num {
  background: var(--grad-primary);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat__label { color: var(--c-text-dim); }

/* ─── Service cards ─── */
.service-card {
  background: #ffffff;
  border: 1px solid var(--c-line);
  box-shadow: 0 10px 26px rgba(10,30,80,.06);
  backdrop-filter: none;
}
.service-card:hover {
  border-color: rgba(0,119,255,.4);
  box-shadow: 0 20px 40px rgba(0,119,255,.12);
}
.service-card__num { color: var(--c-accent); }
.service-card__title { color: var(--c-text); }
.service-card__desc { color: var(--c-text-dim); }
.service-card__icon {
  color: var(--c-accent);
  filter: drop-shadow(0 4px 10px rgba(0,119,255,.3));
}
.service-card__tags li {
  color: var(--c-text-dim);
  background: rgba(0,119,255,.05);
  border-color: var(--c-line);
}

/* ─── Product Feature ─── */
.product-feature {
  background: #ffffff;
  border: 1px solid var(--c-line);
  box-shadow: 0 16px 40px rgba(10,30,80,.06);
  backdrop-filter: none;
}
.product-feature__eyebrow { color: var(--c-accent); }
.product-feature__title { color: var(--c-text); }

/* ─── News ─── */
.news-item { border-top-color: var(--c-line); }
.news-item__link { color: var(--c-text); }
.news-item__cat { color: var(--c-accent); border-color: var(--c-line); }
.news-item__title { color: var(--c-text); }
.news-item__date { color: var(--c-text-dim); }
.news-item__arrow { color: var(--c-accent); }

/* ─── CTA ─── */
.cta {
  background: linear-gradient(180deg, #eaf2ff 0%, #f6f8fc 100%);
}
.cta__box {
  background: #ffffff;
  border: 1px solid var(--c-line);
  box-shadow: 0 18px 50px rgba(10,30,80,.08);
}
.cta__eyebrow { color: var(--c-accent); }
.cta__title { color: var(--c-text); }
.cta__desc { color: var(--c-text-dim); }

/* ─── Process ─── */
.process__step {
  background: #ffffff;
  border: 1px solid var(--c-line);
  box-shadow: 0 10px 26px rgba(10,30,80,.05);
}
.process__num { color: var(--c-accent); }
.process__step h3 { color: var(--c-text); }
.process__step p { color: var(--c-text-dim); }

/* ─── Contact Page head ─── */
.page-head {
  background: linear-gradient(180deg, #f0f6ff 0%, #e8f2ff 100%) !important;
}
.page-head__eyebrow { color: rgba(0,100,200,.7) !important; }
.page-head__title {
  background: linear-gradient(135deg, #0b2045 30%, #0055cc 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.page-head__sub { color: rgba(0,80,180,.6) !important; }

/* ─── Contact form ─── */
.contact-form {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
.contact-lead {
  background: rgba(0,100,220,.04) !important;
  border-color: rgba(0,119,255,.18) !important;
}
.contact-lead p,
.contact-lead::before { color: #3a5070 !important; }
.form-row label { color: #1a3060 !important; }
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form select,
.contact-form textarea {
  background: #ffffff !important;
  color: #0b1424 !important;
  border-color: rgba(0,102,255,.22) !important;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: rgba(80,100,140,.45) !important;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  background: #ffffff !important;
  border-color: rgba(0,119,255,.55) !important;
  box-shadow: 0 0 0 3px rgba(0,119,255,.12) !important;
}
.contact-form select option {
  background: #ffffff !important;
  color: #0b1424 !important;
}
.form-row--check input[type="checkbox"] {
  background: #ffffff !important;
  border-color: rgba(0,102,255,.35) !important;
}
.form-row--check a { color: #0066cc !important; }
.contact-direct p { color: #3a5070 !important; }
.contact-direct a { color: #0066cc !important; }
.contact-direct { border-top-color: rgba(0,100,220,.15) !important; }
.notice--success {
  background: rgba(0,180,80,.06) !important;
  color: #1a5c35 !important;
}

/* ─── Service row ─── */
.service-row { border-top: 1px solid var(--c-line); }
.service-row__num { color: var(--c-accent); }
.service-row__title { color: var(--c-text); }
.service-row__lead,
.service-row__eyebrow { color: var(--c-text-dim); }
.service-row__list li { color: var(--c-text-dim); }
.service-row__list li::before { background: var(--c-accent); }

/* ─── Footer: あえてダーク維持 ─── */
.site-footer {
  background: #0b1424;
  color: #c5d0e6;
  border-top: 1px solid rgba(0,119,255,.3);
}
.site-footer__tagline { color: #8e9cb8; }
.site-footer__heading { color: #ffffff; }
.site-footer__address { color: #c5d0e6; }
.site-footer__address a { color: var(--c-accent-2); }
.site-footer__nav a,
.site-footer__social a { color: #c5d0e6; }
.site-footer__nav a:hover,
.site-footer__social a:hover { color: var(--c-accent-2); }
.site-footer__copy { color: #8e9cb8; }
.site-footer__badge { color: #8e9cb8; }

/* ─── service-row--alt: DOM順を body→meta に変更したので列幅を反転 ─── */
/* body(DOM1番目)→1fr列(広い), meta(DOM2番目)→280px列(狭い) */
.service-row--alt {
  grid-template-columns: 1fr 280px !important;
}
.service-row--alt .service-row__meta { order: initial; }
.service-row--alt .service-row__body { order: initial; }
@media (max-width: 800px) {
  .service-row--alt { grid-template-columns: 1fr !important; }
}

/* ─── Utility ─── */
.no-posts { color: var(--c-text-dim); }
body::-webkit-scrollbar { width: 10px; }
body::-webkit-scrollbar-track { background: #eef2f8; }
body::-webkit-scrollbar-thumb { background: #c5d1e2; border-radius: 10px; }
body::-webkit-scrollbar-thumb:hover { background: var(--c-accent); }

/* ═══════════════════════════════════════════════════════════
   Services Page — Overview Cards & Detail Cards
   ═══════════════════════════════════════════════════════════ */

/* ─── Overview 3カード ─── */
.services-overview { padding: 48px 0 0; }
.services-overview__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 900px) {
  .services-overview__grid { grid-template-columns: 1fr; }
}
.services-overview__card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 32px 28px;
  background: #fff;
  border: 1.5px solid var(--c-line);
  border-radius: 16px;
  text-decoration: none;
  color: var(--c-text);
  transition: box-shadow .22s, transform .22s, border-color .22s;
  position: relative;
  overflow: hidden;
}
.services-overview__card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--grad-primary);
  opacity: 0;
  transition: opacity .22s;
}
.services-overview__card:hover {
  box-shadow: 0 8px 32px rgba(0,119,255,.13);
  transform: translateY(-4px);
  border-color: rgba(0,119,255,.3);
  color: var(--c-text);
}
.services-overview__card:hover::before { opacity: 1; }
.services-overview__num {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--c-accent);
  font-weight: 600;
}
.services-overview__icon {
  color: var(--c-accent);
  line-height: 1;
}
.services-overview__title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.45;
  color: #0b1e36;
  margin: 0;
}
.services-overview__desc {
  font-size: 13.5px;
  color: var(--c-text-dim);
  line-height: 1.7;
  flex: 1;
  margin: 0;
}
.services-overview__arrow {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--c-accent);
  margin-top: 4px;
}

/* ─── service-row: タグ ─── */
.service-row__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 28px;
}
.service-row__tags span {
  font-size: 12px;
  font-family: var(--font-mono, monospace);
  letter-spacing: .05em;
  padding: 4px 12px;
  background: rgba(0,119,255,.07);
  border: 1px solid rgba(0,119,255,.2);
  border-radius: 100px;
  color: var(--c-accent);
}

/* ─── service-row: 2カラム（自社/請負 等） ─── */
.service-row__2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 28px 0;
}
@media (max-width: 700px) {
  .service-row__2col { grid-template-columns: 1fr; }
}
.service-row__2col-item {
  background: #fff;
  border: 1.5px solid var(--c-line);
  border-radius: 12px;
  padding: 22px 20px;
}
.service-row__2col-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--c-accent);
  margin: 0 0 10px;
}
.service-row__2col-item p {
  font-size: 13.5px;
  color: var(--c-text-dim);
  line-height: 1.75;
  margin: 0;
}

/* ─── service-detail-card: 詳細4枚グリッド ─── */
.service-row__cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-top: 28px;
}
@media (max-width: 700px) {
  .service-row__cards { grid-template-columns: 1fr; }
}
.service-detail-card {
  background: #fff;
  border: 1.5px solid var(--c-line);
  border-radius: 12px;
  padding: 22px 20px;
  transition: box-shadow .2s, border-color .2s;
}
.service-detail-card:hover {
  box-shadow: 0 4px 20px rgba(0,119,255,.1);
  border-color: rgba(0,119,255,.25);
}
.service-detail-card__icon {
  color: var(--c-accent);
  margin-bottom: 12px;
  line-height: 1;
}
.service-detail-card__title {
  font-size: 14.5px;
  font-weight: 700;
  color: #0b1e36;
  margin: 0 0 8px;
}
.service-detail-card__desc {
  font-size: 13px;
  color: var(--c-text-dim);
  line-height: 1.75;
  margin: 0;
}