/* ========================================================================== style.css — SCCM corporate top page stylesheet Follows docs/CODING-RULES.md: 1. margin/padding in 4 values 2. per-section classes define their own padding 3. font-size/margin/padding in multiples of 8 (fallback 4) 4. no !important 5. vertical space via margin-bottom / padding-bottom 7. px units (no rem, no CSS variables) 8. direct values (no :root variables) 9. PC (>=768) and SP (<=767) split into separate blocks 10. border-radius 8px (exception: .expand-container morphs from 300px→0) Images are optimized local assets in img/ (jpg photos, webp textures). Loads after css/common.css (shared nav). GSAP + Lenis scroll orchestration is preserved by user approval (rule 6 is scoped to ordinary fade-ins; editorial pins/marquee require GSAP). ========================================================================== */ /* --- Global reset --------------------------------------------------------- */ *, *::before, *::after { margin: 0 0 0 0; padding: 0 0 0 0; box-sizing: border-box; } html, body { width: 100%; min-height: 100vh; overflow-x: hidden; } body { background-color: #eef1f6; color: #16202e; font-family: "Manrope", "Noto Sans JP", sans-serif; font-weight: 300; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: color 0.8s ease; } a, .hover-target { cursor: pointer; } ::selection { background-color: #2b7ee0; color: #fff; } html.lenis { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: hidden; } /* Stone texture stays faint on ; section colors are layered translucently on top so the texture shows through. Text stays dark on light sections. */ body.theme-dark { color: #eef1f6; } body.theme-light { color: #16202e; } /* --- Noise overlay -------------------------------------------------------- */ .noise { position: fixed; inset: 0; z-index: 9998; pointer-events: none; opacity: 0.05; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } body.theme-dark .noise { mix-blend-mode: overlay; opacity: 0.08; } /* --- Shared section shell -------------------------------------------------- */ .section { position: relative; width: 100vw; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; } /* --- Image reveal primitives ---------------------------------------------- */ .img-mask { position: relative; overflow: hidden; clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%); will-change: clip-path; background: #dddddd; border-radius: 8px; } .img-parallax { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; } /* --- Word-split animation primitives -------------------------------------- */ .word-wrap { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 0 0.15em 0; } .word { display: inline-block; transform: translateY(115%); will-change: transform; transform-origin: top left; } /* Fade-in elements start hidden from the very first paint (like .word) so they never flash visible before GSAP takes over and fades them in on scroll. GSAP sets the opacity:0→1 timing; this only covers the pre-init window. */ .gs-fade { opacity: 0; } /* --- Typography tokens ---------------------------------------------------- */ .t-display { font-family: "Cormorant Garamond", serif; font-weight: 400; letter-spacing: -0.02em; margin: 0 0 0 0; } .t-display-jp { font-family: "Shippori Mincho", "Noto Sans JP", serif; font-weight: 500; letter-spacing: 0.02em; margin: 0 0 0 0; } .t-body-jp { font-family: "Manrope", "Noto Sans JP", sans-serif; letter-spacing: 0.04em; opacity: 0.85; } .t-caption { font-weight: 500; text-transform: uppercase; letter-spacing: 0.22em; } .text-accent { color: #2b7ee0; } .text-muted { color: #6e7b8c; } @media (min-width: 768px) { .t-display { font-size: 160px; line-height: 0.85; } .t-display-jp { font-size: 96px; line-height: 1; } .t-body-jp { font-size: 16px; line-height: 2.1; max-width: 600px; } .t-caption { font-size: 12px; } } @media (max-width: 767px) { .t-display { font-size: 64px; line-height: 0.9; } .t-display-jp { font-size: 48px; line-height: 1; } .t-body-jp { font-size: 14px; line-height: 2.1; max-width: 100%; } .t-caption { font-size: 12px; } } /* Small utility (margin-bottom only per rule 5) */ .mb-4 { margin: 0 0 16px 0; } /* Visually hidden — accessible to screen readers / crawlers, not shown */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0 0 0 0; margin: 0 0 0 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* SP-only line break */ @media (min-width: 768px) { .sp-br { display: none; } } @media (max-width: 767px) { .sp-br { display: inline; } } /* ========================================================================== Section: s-hero — "SCC Management." ========================================================================== */ .s-hero { justify-content: center; background: linear-gradient(rgba(238, 241, 246, 0.8), rgba(238, 241, 246, 0.8)), url("../img/header-bg.webp") center / cover no-repeat; } .hero-content { position: relative; z-index: 10; pointer-events: none; color: #ffffff; } .hero-img-box { overflow: visible; background: transparent; z-index: 0; border-radius: 8px; } .hero-img-box .img-parallax { object-position: right center; -webkit-mask-image: linear-gradient( to right, transparent 0%, rgba(0, 0, 0, 0.15) 18%, rgba(0, 0, 0, 0.55) 38%, #000000 65% ); mask-image: linear-gradient( to right, transparent 0%, rgba(0, 0, 0, 0.15) 18%, rgba(0, 0, 0, 0.55) 38%, #000000 65% ); } .hero-sub { font-family: "Shippori Mincho", "Noto Sans JP", serif; letter-spacing: 0.18em; opacity: 0.9; } .hero-eyebrow { letter-spacing: 0.28em; } @media (min-width: 768px) { .s-hero { padding: 0 80px 0 80px; } .hero-content { mix-blend-mode: exclusion; } .hero-img-box { position: absolute; right: 0; top: 0; transform: none; width: 46vw; height: 100vh; } .hero-sub { font-size: 20px; } /* push hero-sub down via previous h1's bottom margin (rule 5) */ .s-hero .t-display:last-of-type { margin: 0 0 32px 0; } /* second title line offset (replaces inline style) */ .hero-title-offset { margin: 0 0 0 128px; } } @media (max-width: 767px) { .s-hero { padding: 120px 24px 0 24px; } .hero-content { color: #16202e; margin: 0 0 40px 0; } .hero-img-box { position: relative; width: 100%; height: 50vh; top: auto; right: auto; transform: none; opacity: 0.7; } .hero-sub { font-size: 16px; } .s-hero .t-display:last-of-type { margin: 0 0 24px 0; } } /* ========================================================================== Section: s-intro — "Quiet hands, steady care." ========================================================================== */ .s-intro { min-height: auto; justify-content: center; background: linear-gradient(rgba(227, 232, 240, 0.74), rgba(227, 232, 240, 0.74)), url("../img/header-bg.webp") center / cover no-repeat; } .intro-grid { display: grid; align-items: stretch; } .intro-grid > :first-child { align-self: start; } .intro-body { align-self: center; } .intro-body .t-body-jp { max-width: none; } .intro-caption { font-family: "Manrope", "Noto Sans JP", sans-serif; font-weight: 500; text-transform: uppercase; letter-spacing: 0.28em; color: #6e7b8c; } .intro-headline { font-family: "Cormorant Garamond", serif; font-weight: 400; letter-spacing: -0.01em; color: #16202e; white-space: nowrap; } .intro-headline .word-wrap { white-space: nowrap; } .intro-headline em { font-style: italic; color: #16202e; position: relative; display: inline-block; } .intro-headline em::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0.06em; height: 1px; background: #2b7ee0; opacity: 0.6; } .intro-headline-jp { font-family: "Shippori Mincho", "Noto Sans JP", serif; letter-spacing: 0.08em; color: #6e7b8c; margin: 0 0 0 0; } .intro-divider { width: 56px; height: 1px; background: #2b7ee0; } @media (min-width: 768px) { .s-intro { padding: 144px 80px 144px 80px; } .intro-grid { max-width: 1640px; margin: 0 auto 0 auto; grid-template-columns: 5fr 6fr; gap: 80px; } .intro-caption { font-size: 12px; margin: 0 0 24px 0; } .intro-headline { font-size: 80px; line-height: 1.05; margin: 0 0 24px 0; } .intro-headline-jp { font-size: 20px; line-height: 1.85; } .intro-body p { margin: 0 0 24px 0; } .intro-body p:last-child { margin: 0 0 0 0; } .intro-divider { margin: 0 0 24px 0; } } @media (max-width: 767px) { .s-intro { padding: 96px 24px 96px 24px; } .intro-grid { max-width: 100%; margin: 0 auto 0 auto; grid-template-columns: 1fr; gap: 48px; } .intro-caption { font-size: 12px; margin: 0 0 16px 0; } .intro-headline { font-size: 40px; line-height: 1.1; margin: 0 0 16px 0; white-space: normal; } .intro-headline-jp { font-size: 15px; line-height: 1.85; } .intro-body p { margin: 0 0 16px 0; } .intro-body p:last-child { margin: 0 0 0 0; } .intro-divider { margin: 0 0 16px 0; } } /* ========================================================================== Section: s-expand — "支え、整え、つなぐ。" (pill → fullscreen morph) ========================================================================== */ .s-expand { height: 100vh; min-height: 100vh; display: flex; align-items: center; justify-content: center; position: relative; background: linear-gradient(rgba(14, 23, 39, 0.88), rgba(14, 23, 39, 0.88)), url("../img/footer-texture.webp") center / cover no-repeat; overflow: hidden; padding: 0 0 0 0; } .expand-wrapper { width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; position: absolute; inset: 0; overflow: hidden; } /* exception to rule 10: 300px radius is the pill shape that morphs to 0 */ .expand-container { border-radius: 300px; overflow: hidden; position: relative; will-change: width, height, border-radius; -webkit-mask-image: -webkit-radial-gradient(white, black); transform: translateZ(0); } .expand-img { position: absolute; width: 100vw; height: 100vh; object-fit: cover; top: 50%; left: 50%; transform: translate(-50%, -50%); filter: brightness(0.55) grayscale(20%); transition: filter 1s ease; } .expand-text { position: absolute; z-index: 10; color: #ffffff; opacity: 0; pointer-events: none; display: flex; flex-direction: column; align-items: center; justify-content: center; inset: 0; text-align: center; } .expand-text .t-caption { letter-spacing: 0.3em; color: rgba(255, 255, 255, 0.7); } .expand-text .t-display-jp { color: #ffffff; } .expand-text .t-display-jp em { font-family: "Cormorant Garamond", serif; font-style: italic; font-weight: 400; color: #2b7ee0; } .expand-text .t-body-jp { color: rgba(255, 255, 255, 0.75); margin: 0 auto 0 auto; } @media (min-width: 768px) { .expand-container { width: 25vw; height: 60vh; } .expand-text { padding: 0 96px 0 96px; } .expand-text .t-display-jp { margin: 0 0 32px 0; } .expand-text .t-body-jp { max-width: 540px; font-size: 20px; } } @media (max-width: 767px) { .expand-container { width: 60vw; height: 40vh; border-radius: 100px; } .expand-text { padding: 0 24px 0 24px; } .expand-text .t-display-jp { line-height: 1.6; margin: 0 0 24px 0; } .expand-text .t-body-jp { max-width: 100%; font-size: 12px; } } /* ========================================================================== Section: s-horiz — 4 business areas (PC: horizontal pin, SP: vertical stack) ========================================================================== */ .s-horiz { position: relative; background: linear-gradient(rgba(238, 241, 246, 0.82), rgba(238, 241, 246, 0.82)), url("../img/header-bg.webp") center / cover no-repeat; } .horiz-track { display: flex; } .h-panel { display: flex; } .h-num { font-family: "Cormorant Garamond", serif; line-height: 1; color: #2b7ee0; font-style: italic; } .h-tag { font-family: "Manrope", "Noto Sans JP", sans-serif; text-transform: uppercase; color: #6e7b8c; } .h-title-jp { font-family: "Shippori Mincho", "Noto Sans JP", serif; font-weight: 500; } .h-title-en { font-family: "Cormorant Garamond", serif; font-style: italic; color: #2b7ee0; } @media (min-width: 768px) { .s-horiz { height: 100vh; overflow: hidden; padding: 0 0 0 0; } .horiz-track { height: 100vh; width: max-content; } .h-panel { width: 100vw; height: 100vh; padding: 0 80px 0 80px; align-items: center; justify-content: space-between; gap: 96px; } .h-text { width: 36vw; } .h-img { width: 48vw; height: 68vh; } .h-num { font-size: 96px; margin: 0 0 32px 0; } .h-tag { font-size: 12px; letter-spacing: 0.28em; margin: 0 0 24px 0; } .h-title-jp { font-size: 40px; line-height: 1.3; letter-spacing: 0.04em; margin: 0 0 16px 0; } .h-title-en { font-size: 24px; margin: 0 0 32px 0; } } @media (max-width: 767px) { .s-horiz { height: auto; overflow: visible; padding: 0 0 0 0; } .horiz-track { flex-direction: column; width: 100vw; height: auto; } .h-panel { flex-direction: column; width: 100%; height: auto; padding: 24px 24px 80px 24px; gap: 40px; } .h-text { width: 100%; } .h-img { width: 100%; height: 50vh; } .h-num { font-size: 48px; margin: 0 0 16px 0; } .h-tag { font-size: 12px; letter-spacing: 0.28em; margin: 0 0 16px 0; } .h-title-jp { font-size: 24px; line-height: 1.3; letter-spacing: 0.04em; margin: 0 0 8px 0; } .h-title-en { font-size: 20px; margin: 0 0 24px 0; } } /* ========================================================================== Section: s-marquee — "支える、医療を。 / In Service of Medicine." ========================================================================== */ .s-marquee { display: flex; align-items: center; overflow: hidden; background: linear-gradient(rgba(227, 232, 240, 0.62), rgba(227, 232, 240, 0.62)), url("../img/header-bg.webp") center / cover no-repeat; border-top: 1px solid rgba(0, 0, 0, 0.08); border-bottom: 1px solid rgba(0, 0, 0, 0.08); padding: 0 0 0 0; } body.theme-dark .s-marquee { border-top-color: rgba(255, 255, 255, 0.08); border-bottom-color: rgba(255, 255, 255, 0.08); background: linear-gradient(rgba(14, 23, 39, 0.85), rgba(14, 23, 39, 0.85)), url("../img/footer-texture.webp") center / cover no-repeat; } .marquee-wrap { display: flex; white-space: nowrap; width: max-content; } .marquee-text { font-family: "Cormorant Garamond", serif; font-style: italic; color: transparent; -webkit-text-stroke: 1px rgba(22, 32, 46, 0.4); transition: color 0.4s ease; cursor: default; } body.theme-dark .marquee-text { -webkit-text-stroke-color: rgba(255, 255, 255, 0.3); } .s-marquee:hover .marquee-text { color: #2b7ee0; -webkit-text-stroke: 0; } @media (min-width: 768px) { .s-marquee { height: 256px; } .marquee-text { font-size: 128px; padding: 0 32px 0 32px; } } @media (max-width: 767px) { .s-marquee { height: 192px; } .marquee-text { font-size: 80px; padding: 0 24px 0 24px; } } /* ========================================================================== Section: s-goals — shared shell + heading for Company Profile ========================================================================== */ .s-goals { min-height: 100vh; justify-content: flex-start; background: linear-gradient(rgba(238, 241, 246, 0.8), rgba(238, 241, 246, 0.8)), url("../img/header-bg.webp") center / cover no-repeat; } .goals-head { display: grid; align-items: end; } .goals-head-title { font-family: "Cormorant Garamond", serif; font-weight: 400; line-height: 1; margin: 0 0 0 0; } .goals-head-title em { font-style: italic; color: #2b7ee0; } .goals-head-body { font-family: "Manrope", "Noto Sans JP", sans-serif; color: #6e7b8c; letter-spacing: 0.04em; max-width: none; } @media (min-width: 768px) { /* user override: top padding for visual breathing room (rule 5 exception) */ .s-goals { padding: 128px 80px 128px 80px; } .goals-head { max-width: 1400px; margin: 0 auto 48px auto; grid-template-columns: 1fr 1fr; gap: 64px; } .goals-head-title { font-size: 80px; } .goals-head-body { font-size: 16px; line-height: 1.9; } } @media (max-width: 767px) { .s-goals { padding: 0 24px 48px 24px; } .goals-head { max-width: 100%; margin: 24px auto 32px auto; grid-template-columns: 1fr; gap: 32px; } .goals-head-title { font-size: 40px; } .goals-head-body { font-size: 14px; line-height: 1.9; } } /* ========================================================================== Section: cta flex-centered container — content vertically centered, no padding-top/bottom per rule 5 (space comes from min-height + flex). ========================================================================== */ .cta { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; background: linear-gradient(rgba(11, 33, 71, 0.84), rgba(11, 33, 71, 0.84)), url("../img/footer-texture.webp") center / cover no-repeat; border-top: 1px solid rgba(22, 32, 46, 0.1); overflow: hidden; isolation: isolate; } .cta::before { content: ""; position: absolute; inset: -32px; background: url("../img/hero.jpg") center / cover no-repeat; filter: blur(18px); z-index: -2; } .cta::after { content: ""; position: absolute; inset: 0; background: rgb(0 0 0 / 26%); z-index: -1; } .cta, .cta * { color: #ffffff; } /* light text on the navy contact block */ .cta-eyebrow { display: inline-block; font-family: "Manrope", "Noto Sans JP", sans-serif; font-weight: 500; line-height: 1.5; letter-spacing: 0.2em; text-transform: uppercase; } .cta-title { font-family: "Shippori Mincho", "Noto Sans JP", serif; font-weight: 500; line-height: 1.3; letter-spacing: 0.04em; } .cta-text { font-family: "Manrope", "Noto Sans JP", sans-serif; line-height: 2; letter-spacing: 0.02em; } .cta .btn { display: inline-flex; align-items: center; background: #eef1f6; border-radius: 8px; font-family: "Manrope", "Noto Sans JP", sans-serif; font-weight: 500; letter-spacing: 0.18em; text-decoration: none; transition: transform 0.3s ease, background 0.3s ease; } .cta .btn, .cta .btn * { color: #16202e; } .cta .btn:hover { background: #2b7ee0; transform: translateY(-2px); } .cta .btn:hover, .cta .btn:hover * { color: #ffffff; } @media (min-width: 768px) { .cta { min-height: 480px; padding: 0 64px 0 64px; } .cta-eyebrow { font-size: 12px; margin: 0 0 16px 0; } .cta-title { font-size: 56px; margin: 0 0 24px 0; } .cta-text { font-size: 16px; max-width: 640px; margin: 0 auto 32px auto; } .cta .btn { font-size: 12px; padding: 16px 32px 16px 32px; } } @media (max-width: 767px) { .cta { min-height: 320px; padding: 0 24px 0 24px; } .cta-eyebrow { font-size: 12px; margin: 0 0 16px 0; } .cta-title { font-size: 32px; margin: 0 0 24px 0; } .cta-text { font-size: 13px; max-width: 100%; margin: 0 auto 32px auto; } .cta .btn { font-size: 12px; padding: 16px 24px 16px 24px; } } /* ========================================================================== Footer (shared shape with about.css / business.css) ========================================================================== */ .site-footer { background: linear-gradient(rgba(238, 241, 246, 0.7), rgba(238, 241, 246, 0.7)), url("../img/header-bg.webp") center / cover no-repeat; color: rgba(22, 32, 46, 0.72); font-family: "Manrope", "Noto Sans JP", sans-serif; border-top: 1px solid rgba(22, 32, 46, 0.1); } .footer-top { display: grid; } .footer-brand-kanji { font-family: "Shippori Mincho", "Noto Sans JP", serif; font-weight: 500; color: #16202e; letter-spacing: 0.1em; } .footer-brand-en { font-family: "Cormorant Garamond", serif; font-style: italic; color: #6e7b8c; letter-spacing: 0.08em; } .footer-address { line-height: 1.95; letter-spacing: 0.04em; color: rgba(22, 32, 46, 0.68); margin: 0 0 0 0; } .footer-top h4 { font-weight: 500; letter-spacing: 0.26em; text-transform: uppercase; color: #16202e; } .footer-top ul { list-style: none; } .footer-top ul li { color: rgba(22, 32, 46, 0.68); } .footer-top ul a { color: inherit; text-decoration: none; transition: color 0.3s ease; } .footer-top ul a:hover { color: #2b7ee0; } .footer-bot { display: flex; justify-content: space-between; letter-spacing: 0.2em; color: rgba(22, 32, 46, 0.5); text-transform: uppercase; } /* NOTE: .footer-top / .site-footer use small top padding as an approved exception to rule 5 — the top border requires an internal offset so text does not abut the rule. Size values keep 8/4-multiples. */ @media (min-width: 768px) { .site-footer { padding: 0 80px 32px 80px; } .footer-top { max-width: 1400px; margin: 0 auto 24px auto; padding: 64px 0 48px 0; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; border-bottom: 1px solid rgba(22, 32, 46, 0.08); } .footer-brand-kanji { font-size: 32px; margin: 0 0 8px 0; } .footer-brand-en { font-size: 16px; margin: 0 0 20px 0; } .footer-address { font-size: 12px; } .footer-top h4 { font-size: 12px; margin: 0 0 16px 0; } .footer-top ul li { font-size: 12px; margin: 0 0 8px 0; } .footer-bot { max-width: 1400px; margin: 0 auto 0 auto; font-size: 12px; } } @media (max-width: 767px) { .site-footer { padding: 0 24px 24px 24px; } .footer-top { max-width: 100%; margin: 0 auto 16px auto; padding: 48px 0 32px 0; grid-template-columns: 1fr; gap: 32px; border-bottom: 1px solid rgba(22, 32, 46, 0.08); } .footer-brand-kanji { font-size: 28px; margin: 0 0 8px 0; } .footer-brand-en { font-size: 14px; margin: 0 0 16px 0; } .footer-address { font-size: 12px; } .footer-top h4 { font-size: 12px; margin: 0 0 16px 0; } .footer-top ul li { font-size: 12px; margin: 0 0 8px 0; } .footer-bot { max-width: 100%; margin: 0 auto 0 auto; flex-direction: column; gap: 8px; font-size: 12px; } } /* ========================================================================== Section: s-goals repurposed — Company Profile (definition list) ========================================================================== */ .profile { width: 100%; } .profile-row { display: grid; border-bottom: 1px solid rgba(22, 32, 46, 0.12); } .profile-label { font-family: "Manrope", "Noto Sans JP", sans-serif; font-weight: 500; text-transform: uppercase; letter-spacing: 0.22em; color: #6e7b8c; } .profile-value { font-family: "Shippori Mincho", "Noto Sans JP", serif; line-height: 1.9; letter-spacing: 0.04em; color: #16202e; } .profile-value ul { list-style: none; } @media (min-width: 768px) { .profile { max-width: 1400px; margin: 0 auto 0 auto; } .profile-row { grid-template-columns: 280px 1fr; gap: 48px; padding: 24px 0 24px 0; } .profile-label { font-size: 12px; } .profile-value { font-size: 16px; } .profile-value li { margin: 0 0 8px 0; } } @media (max-width: 767px) { .profile { max-width: 100%; margin: 0 auto 0 auto; } .profile-row { grid-template-columns: 1fr; gap: 8px; padding: 16px 0 16px 0; } .profile-label { font-size: 12px; } .profile-value { font-size: 15px; } .profile-value li { margin: 0 0 8px 0; } } /* ========================================================================== Company map — grayscale by default, regains colour on hover ========================================================================== */ .company-map { width: 100%; border-radius: 8px; overflow: hidden; } .company-map iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(1) contrast(0.92) brightness(0.96); transition: filter 0.5s ease; } .company-map:hover iframe { filter: none; } @media (min-width: 768px) { .company-map { max-width: 1400px; height: 400px; margin: 48px auto 0 auto; } } @media (max-width: 767px) { .company-map { max-width: 100%; height: 280px; margin: 32px auto 0 auto; } }