/* ========== Base ========== */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; color: #0e1a24; background: #ffffff;
  font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans JP','Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif; }
img { max-width: 100%; height: auto; display: block; }
a { color: #0b7f6d; text-decoration: none; }
a:hover { text-decoration: underline; }
.container { width: min(1120px, 92%); margin: 0 auto; }
.section { padding: 80px 0; }
.section.alt { background: #f5f7f9; }
h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 12px; }
p { line-height: 1.85; margin: 0 0 12px; }
.lead { font-size: 1.15rem; opacity: .9; }
.small { font-size: .9rem; opacity: .75; }
.mt { margin-top: 12px; }

/* ========== Header ========== */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.85); backdrop-filter: blur(8px); border-bottom: 1px solid #e6ebf0; }
.header-inner { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; }
.logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: .08em; color: #0e1a24; }
.logo img { width: 28px; height: 28px; }
.nav { display: flex; align-items: center; gap: 18px; }
.nav .btn.small { padding: 8px 12px; }

/* ========== Buttons & UI ========== */
.btn { display: inline-block; padding: 12px 18px; border-radius: 10px; background: #0b7f6d; color: #fff; font-weight: 700; border: 1px solid #0b7f6d; }
.btn:hover { opacity: .95; text-decoration: none; }
.btn.ghost { background: transparent; color: #0b7f6d; }

/* Pills */
.pillbar { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; padding: 0; list-style: none; }
.pillbar li { padding: 6px 12px; border-radius: 999px; border: 1px solid #c7d7d1; background: #fff; font-size: .88rem; }

/* Cards & Grids */
.cards { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 860px) { .cards { grid-template-columns: repeat(4, 1fr); } }

.card { background: #fff; border: 1px solid #e6ebf0; border-radius: 14px; padding: 20px; box-shadow: 0 6px 20px rgba(14,26,36,.06); }

.checklist { padding-left: 0; list-style: none; }
.checklist li { position: relative; padding-left: 26px; margin: 10px 0; }
.checklist li::before { content: "✔"; position: absolute; left: 0; top: 0; color: #0b7f6d; font-weight: 800; }

/* ========== Hero ========== */
.hero { position: relative; overflow: clip; background: #0e1a24; }
.hero-bg { position: absolute; inset: 0; pointer-events: none; }
.hero-inner { position: relative; display: grid; gap: 28px; grid-template-columns: 1fr; align-items: center; padding: 96px 0 88px; }
.hero-copy h1 { color: #fff; }
.hero .lead { color: #def0ed; }
.hero .cta .btn.ghost { border-color: rgba(223,240,237,.35); color: #a9e4db; }
.hero .cta .btn.ghost:hover { border-color: #a9e4db; }
.hero-card { background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); border: 1px solid rgba(255,255,255,.15); border-radius: 16px; padding: 10px; }
.hero-card img { border-radius: 12px; }
@media (min-width: 920px) { .hero-inner { grid-template-columns: 1.15fr .85fr; } }

/* Reveal animation (load) */
.reveal, .reveal-delay, .reveal-delay-2, .reveal-delay-3 { opacity: 0; transform: translateY(10px); transition: 700ms ease; }
body.loaded .reveal { opacity: 1; transform: translateY(0); transition-delay: .1s; }
body.loaded .reveal-delay { opacity: 1; transform: translateY(0); transition-delay: .25s; }
body.loaded .reveal-delay-2 { opacity: 1; transform: translateY(0); transition-delay: .4s; }
body.loaded .reveal-delay-3 { opacity: 1; transform: translateY(0); transition-delay: .55s; }

/* ========== Trust bar ========== */
.trust { background: #0f202a; color: #d7ece8; }
.trust-inner { display: grid; gap: 12px; grid-template-columns: 1fr; padding: 18px 0; }
.trust-item { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
.trust-item h4 { margin: 0 0 2px; color: #e9f7f4; }
.trust-item .ico { width: 38px; height: 38px; display: inline-grid; place-items: center; border-radius: 10px; background: rgba(169,228,219,.12); color: #a9e4db; border: 1px solid rgba(169,228,219,.25); }
@media (min-width: 860px) { .trust-inner { grid-template-columns: repeat(4, 1fr); } }

/* ========== Industries ========== */
.industries-grid { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 860px) { .industries-grid { grid-template-columns: repeat(4, 1fr); } }
.industry { background: #fff; border: 1px solid #e6ebf0; border-radius: 14px; padding: 18px; box-shadow: 0 6px 20px rgba(14,26,36,.06); }
.industry .il { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: #0b7f6d; color: #fff; margin-bottom: 8px; }

/* ========== Products ========== */
.product-grid { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 860px) { .product-grid { grid-template-columns: 1fr 1fr; } }
.product-card { display: grid; grid-template-rows: auto 1fr; background: #fff; border: 1px solid #e6ebf0; border-radius: 14px; overflow: hidden; box-shadow: 0 6px 20px rgba(14,26,36,.06); }
.pc-visual { padding: 12px; background: #f1f6f5; border-bottom: 1px solid #e6ebf0; }
.pc-visual.alt { background: #f6f8fa; }
.pc-body { padding: 18px; }
.product-card .meta { padding-left: 18px; }

/* ========== About & Contact ========== */
.about-grid { display: grid; gap: 18px; grid-template-columns: 1fr; }
iframe { border: none; }
@media (min-width: 860px) { .about-grid { grid-template-columns: 1.1fr .9fr; } }

form.contact { display: grid; gap: 12px; }
form.contact label { display: grid; gap: 8px; font-weight: 600; }
form.contact input, form.contact textarea { padding: 12px 14px; border-radius: 12px; border: 1px solid #cfd8df; background: #fff; }
form.contact input:focus, form.contact textarea:focus { outline: none; border-color: #0b7f6d; box-shadow: 0 0 0 3px rgba(11,127,109,.12); }

/* ========== Footer ========== */
.site-footer { padding: 34px 0 42px; border-top: 1px solid #e6ebf0; background: #fafbfc; }
.footer-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.logo.foot img { width: 22px; height: 22px; }

/* ========== News Section ========== */
.news-list { display: grid; gap: 24px; margin-top: 28px; }
.news-item { padding: 18px; background: #fff; border: 1px solid #e6ebf0; border-radius: 14px; box-shadow: 0 4px 12px rgba(14,26,36,.06); }
.news-item time { display: block; font-size: .85rem; font-weight: 600; color: #0b7f6d; margin-bottom: 6px; }
.news-item h3 { margin: 0 0 6px; font-size: 1.1rem; }
.news-item p { margin: 0; font-size: .95rem; line-height: 1.6; }

/* ========== Logo ========== */
.site-header { background: #0e1a24; padding: 12px 0; }
.site-header .logo { height: 48px; display: block; }

/* ========== Header & Global Nav (enhanced) ========== */
.site-header { position: sticky; top: 0; z-index: 60; background: rgba(14,26,36,.92); backdrop-filter: blur(8px); border-bottom: 1px solid #1e2e38; }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; }
.brand-logo { height: 42px; width: auto; display: block; }
.gnav { display: flex; align-items: center; gap: 18px; }
.gnav a { color: #d7ece8; font-weight: 600; }
.gnav a:hover { color: #ffffff; }
.btn.small { padding: 8px 12px; border-radius: 10px; border: 1px solid #0b7f6d; background: #0b7f6d; color: #fff; }
.btn.small:hover { opacity: .95; text-decoration: none; }
@media (max-width: 720px) {
  .gnav { gap: 12px; }
  .gnav a:not(.btn) { font-size: .92rem; }
  .brand-logo { height: 36px; }
}

/* Ensure logo renders without background box */
.brand-logo { height: 44px; width: auto; display: block; background: transparent; }

/* ========== Company Card ========== */
.company-card { background: #fff; border: 1px solid #e6ebf0; border-radius: 14px; padding: 20px; box-shadow: 0 6px 20px rgba(14,26,36,.06); }

/* ========== Footer Layout Tidy ========== */
.site-footer { background: #0e1a24; border-top: 1px solid #1e2e38; }
.site-footer .footer-inner { color: #d7ece8; }
.site-footer .footer-inner a { color: #a9e4db; }
.site-footer .footer-inner a:hover { color: #ffffff; }
.site-footer .brand-logo { height: 36px; width: auto; background: transparent; }