:root{scroll-behavior:smooth}
/* Responsive video */
.video_wrapper video{width:100%;height:auto;display:block}
/* Reveal on scroll */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s ease, transform .8s ease}
.reveal.in-view{opacity:1;transform:translateY(0)}
/* Cards hover motion */
.single_dream,.feature_card,.service_card{transition:transform .3s ease, box-shadow .3s ease;will-change:transform}
.single_dream:hover,.feature_card:hover,.service_card:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 12px 24px rgba(0,0,0,.15)}
/* Footer headline: one line, smaller, no overlap with logo */
.footer_header_left h3{font-size:clamp(12px,1.15vw,16px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:.25rem;line-height:1.2}
.footer_bg{padding-bottom:24px} /* extra bottom padding to avoid overlap */
.footer_logo{position:relative;z-index:1}
.footer_header{position:relative;z-index:2}
@media (max-width:575.98px){
  .footer_header_left h3{font-size:12px}
}
/* Mobile nav touch targets */
#navigation > li > a{transition:opacity .2s ease}
#navigation > li > a:hover{opacity:.8}


/* Footer sitemap link visibility and affordance */
.footer_widget .quick_links a{color:#d0d7ff}
.footer_widget .quick_links a:hover{color:#fff;text-decoration:underline}



/* Footer headline: one line, smaller, avoid overlap */
.footer_header_left h3{font-size:clamp(12px,1.15vw,16px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}
.footer_bg{padding-bottom:24px}
.footer_logo{position:relative;z-index:1}
.footer_header{position:relative;z-index:2}
@media (max-width:575.98px){.footer_header_left h3{font-size:12px}}



/* ==== Infraone Overhaul Theme (2025-08-31) ==== */
/* Color System */
:root{
  --io-bg:#0b0d17;           /* near-black */
  --io-fg:#0f172a;           /* on white text */
  --io-text:#1f2937;
  --io-muted:#475569;
  --io-white:#ffffff;
  --io-accent:#2563eb;       /* link/brand blue */
  --io-accent-2:#6475ff;     /* hover blue */
}

/* Base typography */
body{color:var(--io-text);}
h1,h2,h3,h4,h5,h6{color:var(--io-fg);}
.sub_heading{color:var(--io-muted);}

/* Links */
a{color:var(--io-accent);}
a:hover,a:focus{color:var(--io-accent-2);text-decoration:underline;}

/* Header & Footer logos (smaller, keep aspect) */
.logo-img img{height:auto !important; max-height:52px; width:auto !important;}
.footer_logo img{height:auto !important; max-height:44px; width:auto !important;}

/* Hero / Slider (reduce excessive whitespace, ensure text contrast) */
.single_slider{height:auto !important; min-height:clamp(520px,68vh,760px);}
.slider_text h3,.slider_text p{color:#fff !important; text-shadow:0 1px 2px rgba(0,0,0,.2);}
.slider_text h3{font-weight:800; letter-spacing:.2px;}
.slider_text{margin-top:0 !important;}

/* Breadcam (page hero) */
.breadcam_area .bradcam_text h3,
.breadcam_area .bradcam_text p{color:#fff !important;text-shadow:0 1px 2px rgba(0,0,0,.2);}

/* Outsourcing link readability */
main a{color:var(--io-accent);text-decoration:underline;}
.breadcam_area a{color:#fff; text-decoration:underline;}

/* On dark sections (footer etc.) */
.footer_bg, .footer{color:#e5e7eb;}
.footer .footer_heading{color:#fff;}
.footer .quick_links a{color:#d0d7ff;}
.footer .quick_links a:hover{color:#fff;}

/* Footer headline one-line & readable */
.footer_header_left h3{font-size:clamp(12px,1.1vw,15px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2;color:#e5e7eb !important;}
.footer_bg{padding-bottom:24px}

/* Prevent image distortion in service/consulting blocks */
.single_dream .thumb img,
.single_project .thumb img,
.project_area img,
.service_area img,
.feature_card img,
.service_card img{width:100%;height:auto !important;object-fit:cover;}

/* Headings on white backgrounds should not be grey */
section h2, section h3, section h4, .content h3, .content h4{color:var(--io-fg) !important;}

/* Buttons */
.boxed-btn2{background:var(--io-accent);border:1px solid var(--io-accent);}
.boxed-btn2:hover{background:var(--io-accent-2);border-color:var(--io-accent-2)}

/* Mobile nav (ensure hamburger at right) */
@media (max-width: 991.98px){
  .slicknav_menu{ text-align:right; }
  .slicknav_btn{ float:right; }
}

/* Reduce CLS for hero by reserving space */
.slider_area{contain:layout paint;}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}


.single_project_thumb img{width:100%;height:auto !important;object-fit:cover;}


/* === Unified Overhaul v3 =============================================== */
/* Font stack */
:root{ --fontstack:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",Arial,sans-serif; }
body, #navigation > li > a, .slicknav_nav a, .slicknav_menutxt{ font-family:var(--fontstack); }

/* Light bg text */
h1,h2,h3,h4,h5,h6{ color:#0f172a; }
body{ color:#111; }
a{ color:#2563eb; text-decoration:none; }
a:hover{ text-decoration:underline; }

/* Dark bg text (hero/footer) */
.breadcam_area .bradcam_text h3,
.breadcam_area .bradcam_text p,
.slider_text h3,
.slider_text p,
.footer_bg,
.footer_bg .footer_header_left h3,
.footer_bg .footer_header_left p,
.footer_bg .footer_heading,
.footer_bg .quick_links a{ color:#fff !important; }

/* Footer sitemap visibility */
.footer_widget .quick_links a{ color:#d0d7ff !important; }
.footer_widget .quick_links a:hover{ color:#fff !important; text-decoration:underline; }

/* Footer tagline: small / one line / readable */
.footer_header_left h3{
  color:#fff !important;
  font-size:clamp(12px,1.15vw,16px);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.2;
}
.footer_bg{ padding-bottom:24px; }

/* Logo ratio + smaller size (keep aspect) */
.logo-img img, .footer_logo img{ height:auto !important; width:auto !important; object-fit:contain; display:block; }
.header-area .logo-img img{ max-height:52px; }
.footer_logo img{ max-height:44px; }

/* Hero height tuning */
.breadcam_area{ min-height:clamp(520px,68vh,760px); display:flex; align-items:center; }
.breadcam_area .bradcam_text{ margin:auto; text-align:center; }
.slider_text p{ color:#fff !important; font-size:20px; font-weight:400; margin:15px 0 55px; }

/* Hamburger font / right align on mobile */
.slicknav_menu, .slicknav_nav a, .slicknav_menutxt{ font-weight:600; letter-spacing:.02em; }
@media (max-width: 991.98px){
  .slicknav_menu{ text-align:right; }
  .slicknav_btn{ float:right; }
}

/* Ratio fixes */
.messege_thumb img{ width:100%; height:auto !important; object-fit:cover; }
.single_project_thumb img, .thumb img{ width:100%; height:auto !important; object-fit:cover; }

/* Recruit-like pages unification */
main.recruit h4{ color:#0f172a; font-weight:700; margin-top:1rem; }
main.recruit p, main.recruit li{ color:#111; }
main.recruit a{ color:#2563eb; text-decoration:underline; }

/* Reveal motion */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .8s ease, transform .8s ease; }
.reveal.in-view{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){
  .reveal, .reveal.in-view{ transition:none; transform:none; opacity:1; }
}
/* ====================================================================== */


/* === Global Font Unification Override (2025-09-03) =====================
   Force the same Japanese/Latin font stack across ALL pages and components.
   This intentionally uses !important and broad selectors to override any
   theme defaults in css/style.css so that outsourcing.html, contact.html,
   project-details.html などでも完全に同じ見た目になります。
   ====================================================================== */
html{ font-family:var(--fontstack) !important; }
body,
h1,h2,h3,h4,h5,h6,
p, a, small, strong, em, code,
ul, ol, li, dl, dt, dd,
table, th, td,
label, legend, caption,
button, input, select, textarea,
.section_title h3,
.breadcam_text h3, .breadcam_text p,
.footer_heading, .footer_header_left h3, .footer_header_left p,
.main-menu #navigation > li > a,
#navigation > li > a,
.slicknav_menu, .slicknav_nav a, .slicknav_menutxt
{ font-family:var(--fontstack) !important; }

/* Prevent external Google Fonts (if any) from overriding on anchor tags */
@supports (font-variation-settings: normal){
  a, button{ font-variation-settings: normal; }
}

/* === Outsourcing page typography alignment with project-details ===
   Scope only to this page via .outsourcing on <main> to avoid side effects */
main.recruit.outsourcing h4{
  font-weight: 700;
  font-size: 1.375rem;   /* ~22px: close to project-details headings */
  line-height: 1.35;
  margin: 1.25rem 0 .75rem;
}
main.recruit.outsourcing p,
main.recruit.outsourcing li{
  font-size: 1rem;       /* 16px */
  line-height: 1.85;
  letter-spacing: .01em;
}
main.recruit.outsourcing ul,
main.recruit.outsourcing ol{
  margin-left: 1.25rem;
  padding-left: .25rem;
}
main.recruit.outsourcing ul li,
main.recruit.outsourcing ol li{
  margin-bottom: .5rem;
}