:root{--bg:#fff;--bg-alt:#f6f8fb;--text:#1a1a1a;--muted:#5a6a7a;--navy:#1d3557;--softblue:#a8dadc;--border:#e6ebf2;--shadow:0 6px 20px rgba(0,0,0,.06)}
*{box-sizing:border-box}html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:"Noto Sans JP",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial;line-height:1.7}
a{color:var(--navy);text-decoration:none}a:hover{text-decoration:underline}
.container{width:min(1100px,92%);margin:0 auto}
.header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--border)}
.header__inner{display:flex;align-items:center;justify-content:space-between;padding:.8rem 0}
.logo{display:flex;align-items:center;gap:.5rem;color:var(--navy);font-weight:700;letter-spacing:.04em}
.logo img{height:40px}
.nav__toggle{display:none;border:1px solid var(--border);background:#fff;padding:.5rem .75rem;border-radius:.5rem}
.nav__menu{display:flex;gap:1rem;list-style:none;margin:0;padding:0}
.nav__menu a{position:relative;padding:.5rem .75rem;border-radius:.6rem;transition:background-color .2s,color .2s, box-shadow .2s}
.nav__menu a:hover,.nav__menu a:focus-visible{background:var(--bg-alt);outline:none;box-shadow:0 0 0 3px rgba(168,218,220,.45)}
.nav__menu a.active{background:var(--navy);color:#fff;box-shadow:0 6px 16px rgba(29,53,87,.18)}
@media (max-width:820px){.nav__toggle{display:inline-block}.nav__menu{position:absolute;right:4%;top:56px;flex-direction:column;background:#fff;border:1px solid var(--border);border-radius:.75rem;box-shadow:var(--shadow);padding:.5rem;display:none}.nav__menu.show{display:flex}}
.hero{position:relative;padding:5rem 0 4rem;border-bottom:1px solid var(--border);min-height:420px}
.hero__bg{position:absolute;inset:0;background:url('https://images.unsplash.com/photo-1549693578-d683be217e58?auto=format&fit=crop&w=2560&q=85') center/cover no-repeat;opacity:.9;z-index:0}
.hero__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg, rgba(0,0,0,.52), rgba(0,0,0,.32));box-shadow:inset 0 0 200px rgba(0,0,0,.45)}
.hero__content{position:relative;z-index:1;text-align:center;color:#fff}
.hero__content h1{font-size:clamp(2rem,4vw,3rem);margin:0 0 1rem;text-shadow:0 3px 12px rgba(0,0,0,.55)}
.hero__content p{color:#f3f7fb;margin:0 0 1.2rem;text-shadow:0 2px 10px rgba(0,0,0,.45)}
.btn{display:inline-block;border:1px solid var(--navy);padding:.75rem 1.1rem;border-radius:.7rem;font-weight:600}
.btn--primary{background:var(--navy);color:#fff}
.section__title{font-size:1.4rem;margin:0 0 1rem}
.grid{display:grid;gap:1rem}.grid--2{grid-template-columns:repeat(2,1fr)}.grid--4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.grid--2,.grid--4{grid-template-columns:1fr}}
.card{background:#fff;border:1px solid var(--border);border-radius:1rem;padding:1rem;box-shadow:var(--shadow)}
.card__thumb{height:180px;border-radius:.9rem;overflow:hidden;background-size:cover;background-position:center;border:1px solid var(--border);box-shadow:var(--shadow);margin-bottom:.9rem}
.pagehead{padding:3rem 0;background:var(--bg-alt);border-bottom:1px solid var(--border)}
.services,.about,.contact{padding:2.5rem 0}
.deflist{display:grid;grid-template-columns:auto 1fr;gap:.5rem 1rem}.deflist dt{color:#5a6a7a}
.about__photo{position:relative;min-height:320px;border-radius:1rem;overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow);background-image:url('https://images.unsplash.com/photo-1524758631624-e2822e304c36?auto=format&fit=crop&w=1400&q=85');background-size:cover;background-position:center}
.about__photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(233,244,255,.18), rgba(232,245,255,.28)), rgba(232,245,255,.88));pointer-events:none}
.form label{display:block;margin:0 0 .9rem}.form input,.form textarea{width:100%;padding:.7rem .8rem;border:1px solid var(--border);border-radius:.6rem;background:#fff}.form input:focus,.form textarea:focus{outline:2px solid var(--softblue)}
.footer{margin-top:2rem;background:#fff;border-top:1px solid var(--border)}.footer__inner{display:flex;align-items:center;justify-content:space-between;padding:1rem 0}.footer__links{display:flex;gap:1rem;list-style:none;margin:0;padding:0}
.backtotop{position:fixed;right:1rem;bottom:1rem;border:1px solid var(--border);background:#fff;border-radius:50%;width:44px;height:44px;box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;visibility:hidden;transition:.2s}
.backtotop.show{opacity:1;visibility:visible}
.fadein{opacity:0;transform:translateY(10px);transition:opacity .6s, transform .6s}.fadein.visible{opacity:1;transform:none}

.hero {
  margin-bottom: 6rem !important;
}

footer {
  background-color: #e6f2fa; /* 浅蓝色背景 */
}


/* --- Footer palette override --- */
.footer{
  background:#eaf4ff !important;            /* light blue */
  border-top:1px solid #cfe3f6 !important;  /* softer border */
}
.footer__inner small,
.footer__links a{ color:#1d3557 !important; }  /* navy text for contrast */
.footer__links a:hover{ text-decoration:underline; }


.company-info__image {
  background-image: url('https://images.unsplash.com/photo-1524758631624-e2822e304c36?auto=format&fit=crop&w=1200&q=80') !important;
  background-size: cover !important;
  background-position: center !important;
  border-radius: 12px !important;
  min-height: 300px !important;
}


/* About page hero with soft machinery background */

.pagehead--about .container h1,
.pagehead--about .container p{ color:#0f172a; }


/* Force image for 情報収集 / 信息收集 card (2nd card) */
.services .grid.grid--4 > .card:nth-child(2) .card__thumb{
  background-image:url('https://images.unsplash.com/photo-1519389950473-47ba0277781c?auto=format&fit=crop&w=1200&q=80') !important;
  background-size:cover !important;
  background-position:center !important;
}


/* Services hero with mechanical (gears/workshop) background */

.pagehead--services .container h1,
.pagehead--services .container p,
.hero.services-hero .hero-content h1,
.hero.services-hero .hero-content p {
  color:#0f172a;
}


/* ===== Contact form layout fix (2025-09-26) ===== */
form[name="contact"]{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 24px;
  align-items: start;
  max-width: 720px;
}
form[name="contact"] > label{
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-weight: 600;
  line-height: 1.4;
}
form[name="contact"] input[type="text"],
form[name="contact"] input[type="email"],
form[name="contact"] textarea{
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #fff;
  font: inherit;
  color: #0f172a;
}
form[name="contact"] textarea{
  min-height: 140px;
  resize: vertical;
}
/* Make the textarea row span two columns if present */
form[name="contact"] textarea{
  grid-column: 1 / -1;
}
form[name="contact"] button[type="submit"]{
  grid-column: 1 / 2;
  justify-self: start;
  padding: 12px 20px;
  border-radius: 12px;
  font-weight: 700;
}
@media (max-width: 768px){
  form[name="contact"]{
    grid-template-columns: 1fr;
    max-width: 100%;
  }
  form[name="contact"] button[type="submit"]{
    grid-column: 1 / -1;
  }
}


/* Active nav link styling */
.nav a.active{background:var(--blue,#1e90ff);color:#fff;border-radius:.5rem}


/* Hero background images */
.pagehead--services {
  background-image: url('https://images.unsplash.com/photo-1581092160562-40aa08e78837?ixlib=rb-4.0.3&auto=format&fit=crop&w=2400&h=900&q=80');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.pagehead--contact {
  background-image: url('https://images.unsplash.com/photo-1600880292089-90a7e086ee0c?ixlib=rb-4.0.3&auto=format&fit=crop&w=2400&h=900&q=80');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* Ensure enough vertical space for hero */
.pagehead{
  min-height: 320px;
  display:flex;
  align-items:center;
}
.pagehead .container{
  padding: 60px 0;
}

/* Overlay for hero readability */


/* --- fix: overlay without overriding background-image --- */
.pagehead{ position: relative; }
.pagehead.hero-overlay::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(to bottom, rgba(0,0,0,.25), rgba(0,0,0,.10));
  pointer-events:none;
  z-index:0;
}
.pagehead .container{ position: relative; z-index:1; }



.pagehead--about {
  background-image: url('https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?ixlib=rb-4.0.3&auto=format&fit=crop&w=2400&h=900&q=80');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}


.pagehead.hero-overlay h1,
.pagehead.hero-overlay p {
  color: #fff !important;
  text-shadow: 0 2px 6px rgba(0,0,0,.5);
}